/* ---------------------------------------------------------------------------
BEGIN default settings
NOTE: code which uses this stylesheet can override these settings later
----------------------------------------------------------------------------*/

body {
	--glbl-padding:1.5rem;
	--glbl-font-semibold:500;
	--glbl-font-bold:700;
	--glbl-font-vbold:900;
	--glbl-font-size-input:1rem; /* used for form inputs, textareas */
	--glbl-menu-arrow-height:0.75rem;
	--glbl-toggle-slider-height:16px;
	--glbl-hover-title-border-radius:0.5rem;
	--glbl-hover-title-vert-padding:0.75rem;
	--glbl-hover-title-horiz-padding:0.5rem;
	--glbl-hover-title-slidein-offset:15px;
	--glbl-transition-time:0.5s;
	--glbl-section-vert-padding:16px;
	
	--clr-body-bg:#eeeeee;
	--clr-body-font:#0a0a0a;
	--clr-link-font:var(--clr-body-font);
	--clr-link-font-hover:#2a2a7a;
	--clr-hdg-font:var(--clr-body-font);
	--clr-toggle-label-bg:rgba(0,0,0,0.25);
	--clr-toggle-label-switch-unchecked:rgba(16,16,190,0.5);
	--clr-toggle-label-switch-checked:rgba(16,16,190,1);
	--clr-hover-title-bg:#cecece;
	--clr-hover-title-shadow:#808080;
	--clr-hover-title-border:transparent;
	--clr-btn-font:#000000;
	--clr-btn-bg:#eeeeee;
	--clr-btn-border:var(--clr-toggle-label-switch-unchecked);
	--clr-btn-hover-font:#000000;
	--clr-btn-hover-bg:#ffffff;
	--clr-btn-hover-border:var(--clr-toggle-label-switch-checked);
	--clr-form-card-bg:#ffffff;
	--clr-banner-font:#000000;
	--clr-banner-bg:var(--clr-toggle-label-switch-unchecked);
	--clr-submenu-margin-bg:#aeaeae;
	--clr-dropdown-shadow:#808080;
	--clr-dropdown-bg:#efefef;
	--clr-dropdown-toggle-bg:var(--clr-dropdown-bg);
	--clr-dropdown-toggle-hover-bg:#cecece;
	--clr-dropdown-toggle-border:var(--clr-body-font);
	--clr-dropdown-link-bg:var(--clr-dropdown-toggle-bg);
	--clr-dropdown-link-hover-bg:var(--clr-dropdown-toggle-hover-bg);
	--clr-close-btn-font:black;
	--clr-close-btn-bg:rgba(159,95,95,1);
	--clr-close-btn-hover-bg:rgba(228,26,26,1);
	--clr-notify-stack-bg:white;
	--clr-notification-success-bg:rgba(25,135,84,1);
	--clr-notification-success-font:white;
	--clr-notification-error-bg:rgba(220,53,69,1);
	--clr-notification-error-font:white;
	--clr-notification-warning-bg:rgba(255,193,7,1);
	--clr-notification-warning-font:black;
	--clr-notification-info-bg:rgba(13,202,240,1); /* aka #0dcaf0 */
	--clr-notification-info-font:black;
	--clr-popout-outer-shadow:var(--clr-dropdown-shadow);
	--clr-popout-inner-shadow:rgba(255,255,255,0.5);
	--clr-notification-settings-bg:#ced9dc;
	--clr-user-attention-shadow-bg:#0b779f;
	
	--hdr-height:3rem;
	
	--dropdown-menu-link-vert-padding:1rem;
	--dropdown-menu-link-horiz-padding:0.5rem;
	--dropdown-border-radius:0.5rem;
	
	--iconbar-size:50px;
	--iconbar-focus-size:90px;
	--iconbar-padding:8px;
	--iconbar-z-index:1;
	
	--btn-padding:8px 16px;
	--btn-border-radius:0.5rem;
	
	--form-card-padding:16px;
	
	--progress-bar-height:16px;
}


/* ---------------------------------------------------------------------------
END default settings
----------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------------
BEGIN global component styles
----------------------------------------------------------------------------*/

* {
	box-sizing:border-box;
}

html,body {
	margin:0rem;
	padding:0rem;
}

body {
/*	min-height:100vh; */
	background-color:var(--clr-body-bg);
	color:var(--clr-body-font);
	padding-top:var(--hdr-height);
	padding-bottom:var(--glbl-section-vert-padding);
}

body .no-js {
	display:inline-block;
}
body .yes-js {
	display:none;
}
body .hidden, body .hide {
	display:none;
}

h1, h2, h3, h4, h5, h6 {
	color:var(--clr-hdg-font);
	transition:color var(--glbl-transition-time) ease;
}

a {
	display:inline-block;
	transition:all 0.5s ease;
	color:var(--clr-link-font);
	transition:color var(--glbl-transition-time) ease;
}
a:hover, a:focus, a:active {
	color:var(--clr-link-font-hover);
}

a.access-skip-to-content {
	display:none;
}

section ~ section {
	padding-top:var(--glbl-section-vert-padding);
}

ul, ol {
	margin:0rem;
}

ul.horizontal-list, ol.horizontal-list {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:stretch;
	list-style-type:none;
	padding:0rem;
}
ul.horizontal-list > li, ol.horizontal-list > li {
	display:inline-block;
	height:100%;
}
ul.horizontal-list > li.hidden, ol.horizontal-list > li.hidden {
	display:none;
}

.toggle-slider {
	display:inline-block;
	height:var(--glbl-toggle-slider-height);
}
.toggle-slider > input[type=checkbox] {
/*	display:none;*/
	/* this needs to not be display:none for keyboard navigation to work */
	opacity:0;
	height:0px;
	width:0px;
	position:absolute;
	z-index:-20;
}
.toggle-slider > input[type=checkbox]:hover ~ label.toggle-label,
.toggle-slider > input[type=checkbox]:focus ~ label.toggle-label,
.toggle-slider > input[type=checkbox]:active ~ label.toggle-label {
	border:1px solid var(--clr-toggle-label-switch-unchecked);
}
.toggle-slider > label.toggle-label {
	display:inline-block;
	position:relative;
	border-radius:8px;
	height:var(--glbl-toggle-slider-height);
	width:calc(var(--glbl-toggle-slider-height) * 2);
	background-color:var(--clr-toggle-label-bg);
	border:1px solid transparent;
}
.toggle-slider > label.toggle-label::before {
	content:' ';
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	bottom:0px;

	border-radius:8px;
	width:calc(var(--glbl-toggle-slider-height) - 2px);
	height:calc(var(--glbl-toggle-slider-height) - 2px);
	transition:all var(--glbl-transition-time) ease;
	background-color:var(--clr-toggle-label-switch-unchecked);
}
.toggle-slider > input[type=checkbox]:checked ~ label.toggle-label::before {
/*
	left:unset;
	right:0px;
*/
	background-color:var(--clr-toggle-label-switch-checked);
	left:100%;
	transform:translateX(-100%);
}
.toggle-slider > input[type=checkbox] ~ label.toggle-label-unchecked,
.toggle-slider > input[type=checkbox] ~ label.toggle-label-checked {
	margin-left:8px;
}
input[type=checkbox] ~ label.toggle-label-unchecked {
	display:inline-block;
}
input[type=checkbox] ~ label.toggle-label-checked {
	display:none;
}
input[type=checkbox]:checked ~ label.toggle-label-unchecked {
	display:none;
}
input[type=checkbox]:checked ~ label.toggle-label-checked {
	display:inline-block;
}

.topbar, .bottombar {
	position:fixed;
	top:0vh;
	left:0vw;
	right:0vw;
	width:100vw;
	display:block;
/*	height:var(--hdr-height); */
	box-shadow:0rem 0.5rem 0.5rem var(--clr-hdr-shadow);
	background-color:var(--clr-hdr-bg);
	transition:all var(--glbl-transition-time) ease;
	z-index:2;
}
.fixed-bar-height {
	height:var(--hdr-height);
}
.bottombar {
	top:unset;
	bottom:0px;
	box-shadow:0rem -0.5rem 0.5rem var(--clr-hdr-shadow);
	background-color:var(--clr-hdr-bg);
}

.hover-title-cont {
	z-index:0;
	position:relative;
	transition:all var(--glbl-transition-time) ease;
}
.hover-title-cont:hover .hover-title {
	opacity:1;
	pointer-events:auto;
	transform:none;
}

.hover-title {
	z-index:1;
	position:absolute;
	background-color:var(--clr-hover-title-bg);
	box-shadow:0rem 0.5rem 0.5rem var(--clr-hover-title-shadow);
	border-radius:var(--glbl-hover-title-border-radius);
	padding:var(--glbl-hover-title-vert-padding) var(--glbl-hover-title-horiz-padding);
	border:1px solid var(--clr-hover-title-border);
	opacity:0;
	pointer-events:none;
	min-width:150px;
	max-width:unset;
	text-align:center;
	transition:all var(--glbl-transition-time) ease;
}

.hover-title.above {
	bottom:calc(100% + var(--glbl-menu-arrow-height));
	transform:translateY(calc(0px - var(--glbl-hover-title-slidein-offset)));
	box-shadow:0rem -0.5rem 0.5rem var(--clr-hover-title-shadow);
}
.hover-title.below {
	top:calc(100% + var(--glbl-menu-arrow-height));
	transform:translateY(var(--glbl-hover-title-slidein-offset));
}
.hover-title.halign-l {
	left:0px;
}

.hover-title.halign-r {
	right:0px;
}

.hover-title::after {
	content:' ';
	z-index:1;
	position:absolute;
	left:var(--glbl-padding);
	border-left:var(--glbl-menu-arrow-height) solid transparent;
	border-right:var(--glbl-menu-arrow-height) solid transparent;
	transition:all var(--glbl-transition-time) ease;
}
.hover-title::before {
	content:' ';
	z-index:1;
	position:absolute;
	left:calc(-1px + var(--glbl-padding));
	border-left:var(--glbl-menu-arrow-height) solid transparent;
	border-right:var(--glbl-menu-arrow-height) solid transparent;
	transition:all var(--glbl-transition-time) ease;
}

.hover-title.halign-r::before {
	left:unset;
	right:calc(-1px + var(--glbl-padding));
}
.hover-title.halign-r::after {
	left:unset;
	right:calc(-1px + var(--glbl-padding));
}
.hover-title.halign-l::before {
	left:calc(-1px + var(--glbl-padding));
	right:unset;
}
.hover-title.halign-l::after {
	left:calc(-1px + var(--glbl-padding));
	right:unset;
}

.hover-title.above::after {
	bottom:calc(0px - var(--glbl-menu-arrow-height));
	border-top:var(--glbl-menu-arrow-height) solid var(--clr-hover-title-bg);
}
.hover-title.above::before {
	bottom:calc(-1px - var(--glbl-menu-arrow-height));
	border-top:var(--glbl-menu-arrow-height) solid var(--clr-hover-title-border);
}
.hover-title.below::after {
	top:calc(0px - var(--glbl-menu-arrow-height));
	border-bottom:var(--glbl-menu-arrow-height) solid var(--clr-hover-title-bg);
}
.hover-title.below::before {
	top:calc(-1px - var(--glbl-menu-arrow-height));
	border-bottom:var(--glbl-menu-arrow-height) solid var(--clr-hover-title-border);
}

.hover-title.halign-l.arrow-nopadding::after,
.hover-title.halign-l.arrow-nopadding::before {
	right:unset;
	left:var(--glbl-hover-title-border-radius);
}
.hover-title.halign-r.arrow-nopadding::after,
.hover-title.halign-r.arrow-nopadding::before {
	left:unset;
	right:var(--glbl-hover-title-border-radius);
}


.dropdown-toggle-label, .topbar-link, .bottombar-link {
	height:100%;
	padding:0rem calc(var(--glbl-padding) / 2);
	font-weight:var(--glbl-font-vbold);
	height:var(--hdr-height);
	position:relative;
	background-color:var(--clr-dropdown-toggle-bg);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	border-left:1px solid var(--clr-dropdown-toggle-border);
	border-right:1px solid var(--clr-dropdown-toggle-border);
	transition:all var(--glbl-transition-time) ease;
	text-decoration:none;
}
.dropdown-toggle-label:hover,
.dropdown-toggle-label:focus,
.dropdown-toggle-label:active,
.topbar-link:hover,
.topbar-link:focus,
.topbar-link:active,
.bottombar-link:hover,
.bottombar-link:focus,
.bottombar-link:active,
.submenu-toggle-label:hover,
.submenu-toggle-label:focus,
.submenu-toggle-label:active {
	background-color:var(--clr-dropdown-toggle-hover-bg);
}
.topbar-link:hover,
.topbar-link:focus,
.topbar-link:active,
.bottombar-link:hover,
.bottombar-link:focus,
.bottombar-link:active {
	color:var(--clr-body-font);
}
input[type=checkbox].dropdown-toggle:hover ~ label.dropdown-toggle-label,
input[type=checkbox].dropdown-toggle:focus ~ label.dropdown-toggle-label,
input[type=checkbox].dropdown-toggle:active ~ label.dropdown-toggle-label,
input[type=checkbox].submenu-toggle:hover ~ label.submenu-toggle-label,
input[type=checkbox].submenu-toggle:focus ~ label.submenu-toggle-label,
input[type=checkbox].submenu-toggle:active ~ label.submenu-toggle-label {
	background-color:var(--clr-dropdown-toggle-hover-bg);
}

input[type=checkbox].dropdown-toggle, input[type=checkbox].submenu-toggle {
/*	display:none; */
	/* this needs to not be display:none for keyboard navigation to work */
	opacity:0;
	height:0px;
	width:0px;
	position:absolute;
	z-index:-20;
}
input[type=checkbox].dropdown-toggle ~ .dropdown-menu-cont {
	opacity:0;
	pointer-events:none;
	transition:all var(--glbl-transition-time) ease;
	transform:translateY(var(--glbl-hover-title-slidein-offset));
}
input[type=checkbox].dropdown-toggle:checked ~ .dropdown-menu-cont {
	opacity:1;
	pointer-events:auto;
	transform:none;
}
input[type=checkbox].submenu-toggle ~ .submenu-cont {
	display:none;
}
input[type=checkbox].submenu-toggle:checked ~ .submenu-cont {
	display:block;
}
input[type=checkbox].submenu-toggle:checked ~ label.submenu-toggle-label.toggle-label-checked {
	border-radius:0px;
}

.dropdown-menu-cont {
	z-index:0;
	position:absolute;
	top:calc(100% + var(--glbl-menu-arrow-height));
	box-shadow:0rem 0.5rem 0.5rem var(--clr-dropdown-shadow);
	border-radius:var(--dropdown-border-radius);
	border:1px solid var(--clr-dropdown-toggle-border);
	width:10rem;
	text-align:center;
}

.dropdown-menu-cont::after {
	content:' ';
	z-index:1;
	position:absolute;
	top:calc(0rem - var(--glbl-menu-arrow-height));
	left:var(--glbl-padding);
	border-bottom:var(--glbl-menu-arrow-height) solid var(--clr-dropdown-bg);
	border-left:var(--glbl-menu-arrow-height) solid transparent;
	border-right:var(--glbl-menu-arrow-height) solid transparent;
	transition:all var(--glbl-transition-time) ease;
}
.dropdown-menu-cont::before {
	content:' ';
	z-index:1;
	position:absolute;
	top:calc(-1px - var(--glbl-menu-arrow-height));
	left:calc(-1px + var(--glbl-padding));
	border-bottom:calc(1px + var(--glbl-menu-arrow-height)) solid var(--clr-dropdown-toggle-border);
	border-left:calc(1px + var(--glbl-menu-arrow-height)) solid transparent;
	border-right:calc(1px + var(--glbl-menu-arrow-height)) solid transparent;
	transition:all var(--glbl-transition-time) ease;
}
.dropdown-menu {
	background-color:var(--clr-dropdown-bg);
	list-style-type:none;
	padding:0rem;
	border-radius:var(--dropdown-border-radius);
	
	/* if the dropdown menu is too tall for the display, then it scrolls */
	max-height: calc(100vh - var(--hdr-height) - 2rem);
	overflow: auto;
}
.dropdown-menu > li, .submenu > li {
	padding:0rem;
}
.dropdown-menu > li > a,
.dropdown-menu > li > *,
.submenu > li > a,
.submenu > li > * {
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	transition:all var(--glbl-transition-time) ease;
	background-color:var(--clr-dropdown-link-bg);
	color:var(--clr-body-font);
	padding:var(--dropdown-menu-link-vert-padding) var(--dropdown-menu-link-horiz-padding);
	border-bottom:1px solid var(--clr-dropdown-toggle-border);
	margin-top:0px;
	margin-bottom:0px;
}

.dropdown-menu > li > .submenu-toggle:checked ~ .submenu-toggle-label {
	border-bottom:none;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:active,
.submenu > li > a:hover,
.submenu > li > a:focus,
.submenu > li > a:active {
	background-color:var(--clr-dropdown-link-hover-bg);
	text-decoration:underline;
}

.dropdown-menu > li:first-child,
.dropdown-menu > li:first-child > a,
.dropdown-menu > li:first-child > *:not(.submenu-cont) {
	border-radius:var(--dropdown-border-radius) var(--dropdown-border-radius) 0rem 0rem;
}
.dropdown-menu > li:first-child > input[type=checkbox].submenu-toggle:checked ~ label.submenu-toggle-label.toggle-label-checked {
	border-radius:var(--dropdown-border-radius) var(--dropdown-border-radius) 0rem 0rem;
}
.dropdown-menu > li:last-child,
.dropdown-menu > li:last-child > a,
.dropdown-menu > li:last-child > * {
	border-radius:0rem 0rem var(--dropdown-border-radius) var(--dropdown-border-radius);
	border-bottom:0px solid transparent;
}

.menu {
	height:100%;
	position:relative;
}

.menu.valign-b .dropdown-menu-cont {
	top:unset;
	bottom:calc(100% + var(--glbl-menu-arrow-height));
	box-shadow:0rem -0.5rem 0.5rem var(--clr-dropdown-shadow);
}
.menu.valign-b .dropdown-menu-cont::before,
.menu.valign-b .dropdown-menu-cont::after {
	top:unset;
}
.menu.valign-b .dropdown-menu-cont::before {
	border-bottom:none;
	border-top:calc(1px + var(--glbl-menu-arrow-height)) solid var(--clr-dropdown-toggle-border);
	bottom:calc(-1px - var(--glbl-menu-arrow-height));
}
.menu.valign-b .dropdown-menu-cont::after {
	border-bottom:none;
	border-top:var(--glbl-menu-arrow-height) solid var(--clr-dropdown-bg);
	bottom:calc(0px - var(--glbl-menu-arrow-height));
}
.menu.valign-b input[type=checkbox].dropdown-toggle ~ .dropdown-menu-cont {
	transform:translateY(calc(0px - var(--glbl-hover-title-slidein-offset)));
}
.menu.valign-b input[type=checkbox].dropdown-toggle:checked ~ .dropdown-menu-cont {
	transform:none;
}
.nav-list-item:not(.hidden-on-medium) ~ .nav-list-item .topbar-link,
.nav-list-item:not(.hidden-on-medium) ~ .nav-list-item .bottombar-link,
.nav-list-item:not(.hidden-on-medium) ~ .nav-list-item .dropdown-toggle-label {
	border-left:none;
}

.dropdown-menu-cont.halign-l {
	/* left alignment is default so no styles are needed here */
}
.dropdown-menu-cont.halign-r {
	right:0px;
}
.dropdown-menu-cont.halign-r::after {
	left:unset;
	right:var(--glbl-padding);
}
.dropdown-menu-cont.halign-r::before {
	left:unset;
	right:calc(-1px + var(--glbl-padding));
}

.submenu-opener {
	height:100%;
	width:100%;
	text-align:center;
}
.submenu-toggle-label {
	width:100%;
	border-bottom:none;
	cursor:pointer;
}
.submenu > li > .submenu-toggle-label.toggle-label-checked {
	border-bottom:none;
}
.submenu-opener > .submenu-cont {
	background-color:var(--clr-submenu-margin-bg);
	border-top:1px solid var(--clr-dropdown-toggle-border);
	padding:0px 8px 0px 8px;
}
.submenu {
	list-style-type:none;
	padding:0px;
}
.submenu > li:last-child > a,
.submenu > li:last-child > * {
	border-bottom:none;
}

aside.iconbar {
	position:fixed;
	background-color:rgba(255,255,255,0.70);
	border-radius:calc(var(--iconbar-padding) * 2);
	z-index:var(--iconbar-z-index,1);
}
aside.iconbar > ul.icons {
	list-style-type:none;
	width:100%;
	height:100%;
	padding:var(--iconbar-padding);
	display:flex;
	align-items:center;
	justify-content:center;
}
aside.iconbar > ul.icons img {
	display:block;
	width:100%;
	height:100%;
}
aside.iconbar > ul.icons > li {
	display:block;
	height:100%;
	width:100%;
}
aside.iconbar > ul.icons > li > * {
	transition:all 0.5s ease;
	display:inline-block;
/*
	width:100%;
	height:100%;
*/
	width:calc(var(--iconbar-size) - (var(--iconbar-padding) * 2));
	height:calc(var(--iconbar-size) - (var(--iconbar-padding) * 2));
	position:relative;
}
aside.iconbar > ul.icons > li > *:hover,
aside.iconbar > ul.icons > li > *:focus,
aside.iconbar > ul.icons > li > *:active {
	width:var(--iconbar-focus-size);
	height:var(--iconbar-focus-size);
}

aside.iconbar.left-center {
	left:0px;
	top:50%;
	transform:translateY(-50%);
	width:var(--iconbar-size);
}
aside.iconbar.left-center ul.icons {
	flex-direction:column;
	align-items:flex-start;
}

aside.iconbar.right-center {
	right:0px;
	top:50%;
	transform:translateY(-50%) rotateY(180deg);
	width:var(--iconbar-size);
}
aside.iconbar.right-center ul.icons {
	flex-direction:column;
	align-items:flex-start;
}
aside.iconbar.right-center ul.icons img {
	transform:rotateY(180deg);
}

aside.iconbar.top-center {
	top:0px;
	left:50%;
	transform:translateX(-50%);
	height:var(--iconbar-size);
}
aside.iconbar.top-center.nav-cont-offset {
	top:var(--hdr-height);
}
aside.iconbar.top-center ul.icons {
	flex-direction:row;
	align-items:flex-start;
	justify-content:center;
}

aside.iconbar.bottom-center {
	bottom:0px;
	left:50%;
	transform:translateX(-50%) rotateX(180deg);
	height:var(--iconbar-size);
}
aside.iconbar.bottom-center.nav-cont-offset {
	bottom:var(--hdr-height);
}
aside.iconbar.bottom-center ul.icons {
	flex-direction:row;
	align-items:flex-start;
	justify-content:center;
}
aside.iconbar.bottom-center ul.icons img {
	transform:rotateX(180deg);
}

.btn {
	padding:var(--btn-padding);
	border-radius:var(--btn-border-radius);
	border-width:1px;
	border-style:solid;
	transition:all var(--glbl-transition-time) ease;
	text-decoration:none;
	
	color:var(--clr-btn-font);
	background-color:var(--clr-btn-bg);
	border-color:var(--clr-btn-border);
}
.btn:hover,
.btn:focus,
.btn:active {
	color:var(--clr-btn-hover-font);
	background-color:var(--clr-btn-hover-bg);
	border-color:var(--clr-btn-hover-border);
}

.form-card {
	background-color:var(--clr-form-card-bg);
	padding:var(--form-card-padding);
}
.form-card .cell {
	padding:8px;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

form input:not([type=checkbox]),
form select,
form textarea,
input:not([type=checkbox]) {
	width:100%;
	border-radius:0px;
	border:1px solid var(--clr-btn-bg);
	transition:all var(--glbl-transition-time) ease;
}
form input:not([type=checkbox]):not([type=submit]),
form select,
form textarea,
input:not([type=checkbox]):not([type=submit]) {
	font-size:var(--glbl-font-size-input);
	font-family:inherit;
}
form select {
	min-height:32px;
	padding:6px;
}
form select > option {
	min-height:32px;
	padding:6px;
}
form input:not([type=checkbox]),
form textarea,
input:not([type=checkbox]) {
	padding:calc(var(--glbl-padding,24px) / 4);
}
form input:not([type=checkbox]):hover,
form input:not([type=checkbox]):focus,
form input:not([type=checkbox]):active,
form select:hover,
form select:focus,
form select:active,
form textarea:hover
form textarea:focus
form textarea:active,
input:not([type=checkbox]):hover,
input:not([type=checkbox]):focus,
input:not([type=checkbox]):active {
	border:1px solid var(--clr-toggle-label-switch-unchecked);
}
form input[type=submit] {
	padding:var(--btn-padding);
	border-radius:var(--btn-border-radius);
	border-width:1px;
	border-style:solid;
	transition:all var(--glbl-transition-time) ease;
	text-decoration:none;
	width:auto;
	
	color:var(--clr-btn-font);
	background-color:var(--clr-btn-bg);
	border-color:var(--clr-btn-border);
}
form input[type=submit]:hover,
form input[type=submit]:focus,
form input[type=submit]:active {
	color:var(--clr-btn-hover-font);
	background-color:var(--clr-btn-hover-bg);
	border-color:var(--clr-btn-hover-border);
}

form .toggle-slider {
	min-height:32px;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

.banner {
	background-color:var(--clr-banner-bg);
	color:var(--clr-banner-font);
	text-align:center;
	padding-top:calc(var(--glbl-padding) / 4);
	padding-bottom:calc(var(--glbl-padding) / 4);
	font-weight:var(--glbl-font-bold);
}
.banner p {
	margin-top:0px;
	margin-bottom:0px;
}

.user-attention {
	animation:pulse var(--glbl-transition-time) ease;
	animation-iteration-count:2;
}

/*
NOTE: .notify-stack cannot have overflow-y:auto;overflow-x:visible;
so we need this container around it :/
*/
.notify-stack-cont {
	width:100%;
	position:fixed;
	margin-top:var(--hdr-height);
	left:50%;
	transform:translateX(-50%);
	height:calc(100% - var(--hdr-height));
	overflow-y:auto;
	/*
	this container is only for overflow uses
	so it shouldn't get any pointer events or show any scrollbars
	NOTE: this means the notify-stack MUST have pointer-events:auto set
	otherwise no pointer events will reach the notifications!
	*/
	pointer-events:none;
	scrollbar-width:none;
}
.banner:not(:empty):not(.hidden) ~ .notify-stack-cont {
	height:calc(100% - (var(--hdr-height) * 2));
}
.bottombar .notify-stack-cont {
	bottom:var(--hdr-height);
	margin-top:0px;
}
.bottombar .banner:not(:empty):not(.hidden) ~ .notify-stack-cont {
	bottom:calc(var(--hdr-height) * 2);
}
.notify-stack {
	position:relative;
	height:auto;
	pointer-events:auto;
	width:var(--glbl-max-width); /* mobile */
	padding: var(--glbl-padding) calc(var(--glbl-padding) * 2);
	left:50%;
	transform:translateX(-50%);
}
.notify-stack:empty {
	display:none;
}
.notify-stack::before {
	content:' ';
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	filter:blur(3px);
	background-color:var(--clr-notify-stack-bg);
	background:radial-gradient(#ffffff,rgba(255,255,255,0.5) 90%,transparent 100%);
	z-index:-1;
}
.notification {
	padding:var(--glbl-padding) 0px var(--glbl-padding) var(--glbl-padding);
/*	padding:calc(var(--glbl-padding) / 2) 0px calc(var(--glbl-padding) / 2) calc(var(--glbl-padding) / 2); */
	box-shadow:0rem 0.5rem 0.5rem var(--clr-popout-outer-shadow);
	border-radius: var(--glbl-hover-title-border-radius);
	background-color:var(--clr-form-card-bg);
	display:flex;
	flex-direction:row;
	align-items:stretch;
	justify-content:space-between;
	width:100%;
	transition:all var(--glbl-transition-time) ease;
	position:relative;
	cursor:pointer;
	opacity:0.9; /* mobile */
	/*
	NOTE: this touch-action setting /should/ make draggable elements work correctly on mobile devices
	per https://github.com/taye/interact.js/issues/564
	however due to limitations of my testing environment I can't verify that at this time
	but I don't have any further action to take even if it doesn't work
	since we're already showing the close and setting buttons and have click-cancels-timeout behaviour
	I'm considering this "done" regardless of whether touch-action works
	until/unless someone lets me know a better and more widely supported solution
	*/
	touch-action:none;
}
.notification:hover,
.notification:focus,
.notification:active {
	opacity:1; /* mobile */
}
.notification.fade-in {
	animation:notification-fade-in 0.5s;
	animation-iteration-count:1;
}
.notification.fade-out {
	opacity:0;
	pointer-events:none;
}
.notification.fade-out.fade-out-left {
	transform:translateX(-150%);
}
.notification.fade-out.fade-out-right {
	transform:translateX(150%);
}
.notification:not(:last-child) {
	margin-bottom:var(--glbl-padding);
}
.notification.success {
	color:var(--clr-notification-success-font);
	background-color:var(--clr-notification-success-bg);
}
.notification.error {
	color:var(--clr-notification-error-font);
	background-color:var(--clr-notification-error-bg);
}
.notification.warning {
	color:var(--clr-notification-warning-font);
	background-color:var(--clr-notification-warning-bg);
}
.notification.info {
	color:var(--clr-notification-info-font);
	background-color:var(--clr-notification-info-bg);
}
.notification.notify-settings {
	cursor:auto;
	background-color:var(--clr-notification-settings-bg,#b0d4dc);
	border:1px solid transparent;
}
/*
TODO: generalize this progress-bar styling to be potentially used for other progress bars
I think some changes would need to be made and there would need to still be some notification-specific styling
*/
.notification .progress-bar {
	position:absolute;
	height:calc(0.5rem + var(--progress-bar-height));
	width:100%;
	bottom:calc(0.5rem - var(--progress-bar-height));
	left:50%;
	transform:translateX(-50%);
	border-radius:0px 0px var(--glbl-hover-title-border-radius) var(--glbl-hover-title-border-radius);
	z-index:-1;
	background-color:var(--clr-form-card-bg);
}
.notification.success .progress-bar {
/*	color:var(--clr-notification-success-font); */
	background-color:var(--clr-notification-success-bg);
}
.notification.error .progress-bar {
/*	color:var(--clr-notification-error-font); */
	background-color:var(--clr-notification-error-bg);
}
.notification.warning .progress-bar {
/*	color:var(--clr-notification-warning-font); */
	background-color:var(--clr-notification-warning-bg);
}
.notification.info .progress-bar {
/*	color:var(--clr-notification-info-font); */
	background-color:var(--clr-notification-info-bg);
}
.notify-content {
	width:100%;
	margin:calc(0px - var(--glbl-padding)) 0px calc(0px - var(--glbl-padding)) calc(0px - var(--glbl-padding));
/*	margin:calc(0px - (var(--glbl-padding) / 2)) 0px calc(0px - (var(--glbl-padding) / 2)) calc(0px - (var(--glbl-padding) / 2)); */
	padding:var(--glbl-padding);
/*	padding:calc(var(--glbl-padding) / 2); */
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
}
.notify-settings-content {
	width:100%;
}
.notify-action-btns {
	min-height:100%;
	font-size:1.5rem;
	font-weight:bold;
	margin:calc(0px - var(--glbl-padding)) 0px;
/*	margin:calc(0px - (var(--glbl-padding) / 2)) 0px; */
	border-radius:0px var(--glbl-hover-title-border-radius) var(--glbl-hover-title-border-radius) 0px;
	border:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	transition:all var(--glbl-transition-time) ease;
	color:var(--clr-close-btn-font);
	/*
	NOTE: on desktop close button is HIDDEN until user hovers over notification
	however on mobile because the html draggable attribute is not consistently supported
	we need the close action constantly visible
	*/
	width:32px;
	overflow:visible;
	padding:0px;
	opacity:1;

}
.notify-action-btns > * {
	border:none;
	/* TODO: generalize height setting so it works correctly regardless of the number of items within the container */
/*	height:100%; */
	height:50%; /* (100% / <number of elements>) */
	width:100%;
	padding:calc(var(--glbl-padding) / 4);
	font-size:1.5rem;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all var(--glbl-transition-time) ease;
	cursor:pointer;
}
.notify-action-btns > *:hover,
.notify-action-btns > *:focus,
.notify-action-btns > *:active {
	box-shadow:0rem 0.5rem 0.5rem var(--clr-popout-outer-shadow);
	z-index:1;
}
.notification.notify-settings .notify-action-btns {
	box-shadow:none;
}
.notify-action-btns > *:first-child {
	border-top-right-radius:var(--glbl-hover-title-border-radius);
}
.notify-action-btns > *:last-child:not(:first-child) {
	border-bottom-right-radius:var(--glbl-hover-title-border-radius);
}
.notify-icon {
	height:16px;
	width:16px;
}
.notify-close-btn {
	background-color:var(--clr-close-btn-bg);
}
.notify-close-btn:hover,
.notify-close-btn:focus,
.notify-close-btn:active {
	background-color:var(--clr-close-btn-hover-bg);
}
.notification.notify-settings .notify-action-btns {
	/*
	account for the 1px transparent border that's present on the page notification settings
	which is necessary for the user-attention functionality to look as intended
	*/
	position:relative;
	top:-1px;
	right:-1px;
	justify-content:flex-start;
}
.notification.notify-settings .notify-close-btn  {
	height:auto;
}
.notification-title,
.notification-message {
	margin-top:0px;
	margin-bottom:0px;
}
.notification-title {
	font-size:1.1rem;
}
.notification.success .notification-title,
.notification.success .notification-message {
	color:var(--clr-notification-success-font);
}
.notification.error .notification-title,
.notification.error .notification-message {
	color:var(--clr-notification-error-font);
}
.notification.warning .notification-title,
.notification.warning .notification-message {
	color:var(--clr-notification-warning-font);
}
.notification.info .notification-title,
.notification.info .notification-message {
	color:var(--clr-notification-info-font);
}

.notify-enable-list {
	padding-top:calc(var(--glbl-padding) / 2);
}
.notify-enable-list > .toggle-slider {
	width:100%;
	height:auto;
	display:flex;
	align-items:stretch;
	justify-content:flex-start;
}
.notify-enable-list > .toggle-slider:not(:last-child) {
	margin-bottom:calc(var(--glbl-padding) / 4);
}
.notify-timeout-settings {
	margin-top:calc(var(--glbl-padding) / 2);
}
.timeout-input-cont {
	display:flex;
	align-items:stretch;
	justify-content:space-between;
}
.timeout-input-cont:not(:last-child) {
	margin-bottom:calc(var(--glbl-padding) / 4);
}
.clear-input-field {
	background-color:var(--clr-close-btn-bg);
	transition:all var(--glbl-transition-time,0.5s) ease;
	border:none;
	border-radius:0px var(--glbl-hover-title-border-radius) var(--glbl-hover-title-border-radius) 0px;
}
.clear-input-field:hover,
.clear-input-field:focus
.clear-input-field:active {
	background-color:var(--clr-close-btn-hover-bg);
}

/* ---------------------------------------------------------------------------
END global component styles
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN animation definitions
----------------------------------------------------------------------------*/

@keyframes notification-fade-in {
	0% {
		transform:translateY(-150%);
		opacity:0;
		pointer-events:none;
	}
	100% {
		transform:none;
		opacity:0.9; /* mobile */
		pointer-events:all;
	}
}

@keyframes pulse {
	0% {
		box-shadow:0rem 0.5rem 0.5rem var(--clr-popout-outer-shadow);
		border:1px solid transparent;
	}
	100% {
		box-shadow:0rem 0.5rem 0.5rem var(--clr-user-attention-shadow-bg);
		border:1px solid var(--clr-user-attention-shadow-bg);
	}
}

@keyframes linear-shrink {
	0% {
		width:100%;
	}
	100% {
		width:0px;
	}
}


/* ---------------------------------------------------------------------------
END animation definitions
----------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------------
BEGIN medium and large display adjustments (mobile is default)
----------------------------------------------------------------------------*/
@media all and (min-width:768px) { /* $screen-size-medium */

	/* ---------------------------------------------------------------------------
	BEGIN global component styles
	----------------------------------------------------------------------------*/

	ul.horizontal-list > li.hidden.shown-on-medium, ol.horizontal-list > li.hidden.shown-on-medium {
		display:inline-block;
	}
	ul.horizontal-list > li.hidden-on-medium, ol.horizontal-list > li.hidden-on-medium {
		display:none;
	}

	.dropdown-menu-cont {
		width:15rem;
	}
	.dropdown-toggle-label, .topbar-link, .bottombar-link {
		padding:0rem var(--glbl-padding);
	}
	.notify-stack {
		width:calc(var(--glbl-max-width) / 2);
	}
	.notification {
		opacity:0.75;
	}
	.notification:hover,
	.notification:focus,
	.notification:active {
		opacity:0.95;
	}
	.notify-action-btns {
		/*
		NOTE: close button is HIDDEN until user hovers over notification
		*/
		opacity:0;
	}
	.notification:hover .notify-action-btns,
	.notification:focus .notify-action-btns,
	.notification:active .notify-action-btns {
		opacity:1;
	}
	
	/* ---------------------------------------------------------------------------
	END global component styles
	----------------------------------------------------------------------------*/

	/* ---------------------------------------------------------------------------
	BEGIN animation definitions
	----------------------------------------------------------------------------*/
	
	@keyframes notification-fade-in {
		0% {
			transform:translateY(-150%);
			opacity:0;
			pointer-events:none;
		}
		100% {
			transform:none;
			opacity:0.75;
			pointer-events:all;
		}
	}
	
	/* ---------------------------------------------------------------------------
	END animation definitions
	----------------------------------------------------------------------------*/

}