/* default settings */
body {
	--glbl-max-width:1200px;
	--glbl-padding:1.5rem;
}
html {
/*	scrollbar-width:thin; */ /* prevent scrollbar left-content-shift issue */
}

/* ---------------------------------------------------------------------------
BEGIN grid definition styles
----------------------------------------------------------------------------*/
.grid-container {
	display:block;
	margin:auto;
	width:auto;
	max-width:var(--glbl-max-width);
	padding:0rem var(--glbl-padding) 0rem var(--glbl-padding);
}
.grid {
	display:inline-flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:stretch;
	flex-wrap:wrap;
	width:100%;
}
.grid > .cell {
	display:block;
	height:100%;
	width:100%;
}
.grid.grid-padding {
	margin:0rem calc(0rem - var(--glbl-padding)) calc(0rem - var(--glbl-padding)) 0rem;
	width:calc(100% + var(--glbl-padding));
}
.grid.grid-padding > .cell {
	padding:0rem var(--glbl-padding) var(--glbl-padding) 0rem;
}
.grid > .cell.small-1 {
	width:8.3333%;
}
.grid > .cell.small-2 {
	width:16.6666%;
}
.grid > .cell.small-3 {
	width:25%;
}
.grid > .cell.small-4 {
	width:33.3333%;
}
.grid > .cell.small-5 {
	width:41.6666%;
}
.grid > .cell.small-6 {
	width:50%;
}
.grid > .cell.small-7 {
	width:58.3333%;
}
.grid > .cell.small-8 {
	width:66.6666%;
}
.grid > .cell.small-9 {
	width:75%;
}
.grid > .cell.small-10 {
	width:83.3333%;
}
.grid > .cell.small-11 {
	width:91.6666%;
}
.grid > .cell.small-12 {
	width:100%;
}
/* ---------------------------------------------------------------------------
END grid definition styles
----------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------------
BEGIN medium and large display adjustments (mobile is default)
----------------------------------------------------------------------------*/
@media all and (min-width:768px) { /* $screen-size-medium */
	.hidden-on-medium {
		display:none;
	}
	.shown-on-medium, .hidden.shown-on-medium {
		display:inline-block;
	}
	
	/* ---------------------------------------------------------------------------
	BEGIN grid definition styles
	----------------------------------------------------------------------------*/
	.grid > .cell.medium-1 {
		width:8.3333%;
	}
	.grid > .cell.medium-2 {
		width:16.6666%;
	}
	.grid > .cell.medium-3 {
		width:25%;
	}
	.grid > .cell.medium-4 {
		width:33.3333%;
	}
	.grid > .cell.medium-5 {
		width:41.6666%;
	}
	.grid > .cell.medium-6 {
		width:50%;
	}
	.grid > .cell.medium-7 {
		width:58.3333%;
	}
	.grid > .cell.medium-8 {
		width:66.6666%;
	}
	.grid > .cell.medium-9 {
		width:75%;
	}
	.grid > .cell.medium-10 {
		width:83.3333%;
	}
	.grid > .cell.medium-11 {
		width:91.6666%;
	}
	.grid > .cell.medium-12 {
		width:100%;
	}
	.cell.halign-l {
		text-align:left;
		display:flex;
		align-items:center;
		justify-content:flex-start;
	}
	.cell.halign-l > *:not(:last-child) {
		margin-right:var(--glbl-padding);
	}

	.cell.halign-r {
		text-align:right;
		display:flex;
		align-items:center;
		justify-content:flex-end;
	}
	.cell.halign-r > *:not(:first-child) {
		margin-left:var(--glbl-padding);
	}
	/* ---------------------------------------------------------------------------
	END grid definition styles
	----------------------------------------------------------------------------*/
}
/* ---------------------------------------------------------------------------
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-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);
	
	--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;
	
	--btn-padding:8px 16px;
	--btn-border-radius:0.5rem;
	
	--form-card-padding: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 {
	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);
}

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%;
}

.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);
}
.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 > 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 > * {
	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 ~ .nav-list-item .topbar-link,
.nav-list-item ~ .nav-list-item .bottombar-link,
.nav-list-item ~ .nav-list-item .dropdown-toggle-label {
	border-left:none;
}

.dropdown-menu-cont.halign-l {
	/* left alignment is default so no styles are needed here; this is just for completeness */
}
.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);
}
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[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;
	
	color:var(--clr-btn-font);
	background-color:var(--clr-btn-bg);
	border-color:var(--clr-btn-border);
}
form input[type=submit]:disabled {
	opacity:0.25;
	pointer-events:none;
}
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 input:not([type=checkbox]):not([type=submit]),
form select,
form textarea {
	width:100%;
	border-radius:0px;
	border:1px solid var(--clr-btn-bg);
	transition:all var(--glbl-transition-time) ease;
}
form select {
	min-height:32px;
	padding:6px;
}
form select > option {
	min-height:32px;
	padding:6px;
}
form input:not([type=checkbox]):not([type=submit]),
form textarea {
	padding:8px;
}
form input:not([type=checkbox]):not([type=submit]):hover,
form input:not([type=checkbox]):not([type=submit]):focus,
form input:not([type=checkbox]):not([type=submit]):active,
form select:hover,
form select:focus,
form select:active,
form textarea:hover
form textarea:focus
form textarea:active {
	border:1px solid var(--clr-toggle-label-switch-unchecked);
}
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;
}

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


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

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

	.dropdown-menu-cont {
		width:15rem;
	}
	.dropdown-toggle-label, .topbar-link, .bottombar-link {
		padding:0rem var(--glbl-padding);
	}

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

}
/* ---------------------------------------------------------------------------
BEGIN global settings
----------------------------------------------------------------------------*/

body {
	--glbl-padding:1.5rem;
	--glbl-font-vbold:900;
	--glbl-menu-arrow-height:0.75rem;
	--glbl-transition-time:0.4s; /* debug */
	--glbl-scrollbar-offset:12px;
	
	--hdr-height:3rem;
	--hdr-dropdown-menu-link-vert-padding:1rem;
	--hdr-dropdown-menu-link-horiz-padding:0.5rem;
	--hdr-dropdown-border-radius:0.5rem;
	
	--clr-hdr-bg:#fefefe;
	--clr-hdr-shadow:var(--clr-dropdown-shadow);
	--clr-body-bg:#f7f7f7;
	--clr-hover-title-bg:var(--clr-hdr-dropdown-toggle-hover-bg);
	--clr-hover-title-shadow:var(--clr-dropdown-shadow);
	--clr-form-error-border:rgba(128,0,0,1);
	--clr-form-error-bg:rgba(128,0,0,0.1);
	--clr-form-error-text:rgba(0,0,0,1);
	--clr-menu-item-selected:rgba(49,172,153,1);
}


/* ---------------------------------------------------------------------------
END global settings
----------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------------
BEGIN global component styles
NOTE: this are IN ADDITION TO the base component styles in base-components.css
----------------------------------------------------------------------------*/

/*
NOTE: the setting of body colors above effectively overrides
the color settings in base-components.css without needing additional css
*/

h1,h2,h3,h4,h5,h6 {
	font-weight:600;
}
main {
	margin-top:var(--glbl-padding);
}

img {
	max-width:100%;
	object-fit:contain;
	display:block;
	margin:var(--glbl-padding) auto;
}

.hcentered {
	text-align:center;
}
.hpadded {
	padding-left:var(--glbl-padding);
	padding-right:var(--glbl-padding);
}
.vcentered {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
}
.vcentered.hcentered {
	align-items:center;
}
.vcentered.grid {
	flex-direction:row;
	align-items:center;
	display:inline-flex;
}
.grid > .cell.vcentered {
	display:flex;
}
.vpadded {
	padding-top:var(--glbl-padding);
	padding-bottom:var(--glbl-padding);
}
.hexpanded {
	width:100%;
}
.vexpanded {
	height:100%;
}

.btn {
	font-weight:600;
}

.btn:hover, .btn:focus, .btn:active {
	box-shadow:0rem 0.5rem 0.5rem var(--clr-btn-hover-boxshadow);
}

.toggle-slider.has-reveal {
	flex-wrap:wrap;
	align-items:stretch;
}
.toggle-slider.has-reveal label.toggle-label-checked, label.toggle-label-unchecked {
	width:calc(100% - (var(--glbl-toggle-slider-height) * 2) - 8px);
}
.toggle-slider .slider-reveal-checked,
.toggle-slider .slider-reveal-unchecked {
	width:100%;
	padding-top:var(--glbl-padding);
}
.toggle-slider input[type=checkbox] ~ .slider-reveal-unchecked {
	display:inline-block;
}
.toggle-slider input[type=checkbox] ~ .slider-reveal-checked {
	display:none;
}
.toggle-slider input[type=checkbox]:checked ~ .slider-reveal-unchecked {
	display:none;
}
.toggle-slider input[type=checkbox]:checked ~ .slider-reveal-checked {
	display:inline-block;
}

.nav-list-item.selected > .topbar-link,
.nav-list-item.selected > .dropdown-toggle-label {
	border-bottom:2px solid var(--clr-menu-item-selected);
	padding-top:2px;
}

.dropdown-menu > li.selected {
	border-left:5px solid var(--clr-menu-item-selected);
}

.custom-rule-json-cont.hidden {
	display:none;
}

/*
.custom-rule-list-cont {
	padding-top:var(--glbl-padding);
	padding-bottom:var(--glbl-padding);
}
*/
.rule-row-cont {
	margin-bottom:calc(var(--glbl-padding) / 2);
}
.rule-row-cont:last-child {
	margin-bottom:0px;
}
.rule-row-cont .toggle-slider .toggle-label-checked {
	font-weight:bold;
}
.rule-row-cont .toggle-slider .toggle-label-unchecked {
	font-weight:normal;
}
.cc-doc-form {
	margin-top:var(--glbl-padding);
}

.cc-doc-form .submit-btn-cont {
	display:flex;
	align-items:center;
	justify-content:center;
}
.cc-doc-form p {
	font-weight:bold;
	margin-top:0px;
}
.cc-doc-form label {
	font-weight:bold;
}

.cc-doc-form .grid .cell:not(:last-child):not(.labelled-select-cell) {
	padding-bottom:var(--glbl-padding);
}
.cc-doc-form .labelled-select-grid {
	align-items:center;
}
.cc-doc-form .labelled-select-cell {
	padding-left:var(--glbl-padding);
	padding-right:var(--glbl-padding);
	padding-bottom:0px;
}
.cc-doc-form .labelled-select-cell:nth-child(2n+1) {
	padding-left:0px;
}
.cc-doc-form .labelled-select-cell:nth-child(2n) {
	padding-right:0px;
}

.custom-rule-list-disclaimer {
	margin-bottom:0px;
}
.custom-rule-list-disclaimer.fineprint {
	margin-top:0px;
	font-size:0.75rem;
	margin-bottom:calc(var(--glbl-padding) / 2);
}

.form-error-output-cont {
	margin-bottom:var(--glbl-padding);
}
.form-error-output-cont.hidden {
	display:none;
}
.form-error-output {
	border-radius:var(--glbl-padding);
	border:1px solid var(--clr-form-error-border);
	background-color:var(--clr-form-error-bg);
	color:var(--clr-form-error-text);
	padding:calc(var(--glbl-padding) / 2) var(--glbl-padding);
	margin-bottom:var(--glbl-padding);
}
.form-error-output:last-child {
	margin-bottom:0px;
}

.doc-note::before {
	content:'NOTE: ';
	font-weight:bold;
}

.doc-img > img {
	margin:0px auto;
	border-radius:calc(var(--glbl-padding) / 2);
}
.doc-img {
	box-shadow:-5px 5px 12px #000000;
	border:2px solid rgba(128,128,128,0.8);
	border-radius:calc(var(--glbl-padding) / 2);
	position:relative;
	margin:var(--glbl-padding) auto;
	width:fit-content;
	overflow:hidden;
}
.doc-img::after {
	content:' ';
	display:block;
	position:absolute;
	height:100%;
	top:0px;
	left:-8rem;
	width:8rem;
	background-color:rgba(255,255,255,0.2); /* compatibility */
	background:linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.7) 20%, rgba(255,255,255,0.1) 100%);
/*	background:linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,1) 20%, rgba(255,255,255,0.1) 100%); */ /* debug so we can see what's going on */
	transition:all 0.5s ease;
	filter:blur(3px);
	pointer-events:none;
}
.doc-img:hover::after,
.doc-img:focus::after,
.doc-img:active::after {
	left:100%;
}

.svg-icon {
	min-height:1.5rem;
	width:auto;
}

.inline-link {
	display:inline;
}

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

/* ---------------------------------------------------------------------------
BEGIN module styles
----------------------------------------------------------------------------*/

.hdr-nav-cont .cell.hdr-options-cell {
	height:var(--hdr-height);
	display:flex;
	align-items:center;
	justify-content:flex-end;
}
.hdr-nav-cont .cell.hdr-options-cell > * {
	margin-right:8px;
}
.hdr-nav-cont .cell.hdr-options-cell > *:last-child {
	margin-right:0px;
}

.hdr-nav-cont .cell.hdr-options-cell.halign-l {
	justify-content:flex-start;
}
.hdr-nav-cont .cell.hdr-menu-cell.halign-r {
	display:flex;
	align-items:center;
	justify-content:flex-end;
}

footer {
	text-align:center;
}

/* ---------------------------------------------------------------------------
END module styles
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN section styles
----------------------------------------------------------------------------*/

.info-rule-update {
	display:none;
}

/* ---------------------------------------------------------------------------
END section styles
----------------------------------------------------------------------------*/

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

	/* ---------------------------------------------------------------------------
	BEGIN global settings
	----------------------------------------------------------------------------*/

	body {
		--hdr-height:2rem;
	}

	/* ---------------------------------------------------------------------------
	END global settings
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	BEGIN global component styles
	----------------------------------------------------------------------------*/
	.cc-doc-form .labelled-select-cell:nth-child(2n+1) {
		padding-left:var(--glbl-padding);
	}
	.cc-doc-form .labelled-select-cell:nth-child(2n) {
		padding-right:var(--glbl-padding);
	}
	.cc-doc-form .labelled-select-cell:nth-child(4n+1) {
		padding-left:0px;
	}
	.cc-doc-form .labelled-select-cell:nth-child(4n) {
		padding-right:0px;
	}
	/* ---------------------------------------------------------------------------
	END global component styles
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	BEGIN module styles
	----------------------------------------------------------------------------*/
	
	body {
		min-height:101vh; /* ensure the scrollbar is ALWAYS shown */
	}
	.hdr-nav-cont > .grid-container {
		max-width:calc(var(--glbl-max-width) + var(--glbl-scrollbar-offset));
	}
	.hdr-nav-cont .cell.hdr-options-cell {
		padding-right:12px; /* correct for header width being larger to accomodate scroll offset */
	}
	.hdr-nav-cont .cell.hdr-options-cell.halign-l {
		padding-right:0px;
	}
	.hdr-nav-cont .cell.hdr-menu-cell.halign-r {
		padding-right:12px; /* correct for header width being larger to accomodate scroll offset */
	}
	
	/* ---------------------------------------------------------------------------
	END module styles
	----------------------------------------------------------------------------*/
}