:root {
		
	--CONTENT_PADDING: 3rem;
	
	--FONT_FAMILY: 'Raleway';
	--FONT_SIZE: 16px;
	
	--FONT_FAMILY_ACCENT: 'Rajdhani';
}

:root {
	--color-blue: #25AAE1;
	--color-blue_dk: #1E7EA7;
	--color-blue_dker: #0c1d38;
	--color-gray: #58585A;
	
	--color-content: white;
	--color-font: black;
	
	--color-anchor: var(--color-gray);
	--color-anchor_visited: var(--color-gray);
	--color-anchor_hover: color-mix(in srgb, var(--color-gray), white 33%);
	
	--color-important: #900;
	--color-bad: #900;
}

html {
	min-height: 100%;
}

html,
body {
	/*height: 100% ;*/
	padding: 0;
	margin: 0;
}

body {
	font-size: var(--FONT_SIZE);
	font-family: var(--FONT_FAMILY);
	background: #ccc ;
	margin-top: 70px ;
}

p,
.par {
	line-height: 1.5 ;
}

p,
.par,
.spaced {
	margin: 1em 0; 
}

input,
button,
select,
textarea {
	box-sizing: border-box;
	font-size: inherit;
	font-family: inherit;
}

h1,
h2,
h3,
h4 {
	font-family: var(--FONT_FAMILY_ACCENT);
	text-transform: uppercase;
	font-weight: normal;
	margin: var(--FONT_SIZE) 0;
	color: var(--color-blue_dk); 
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
p:first-child {
	margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
p:last-child {
	margin-bottom: 0;
}

h1 {
	font-size: 3.5em;
}

h2 {
	font-size: 2.25em;
}

h3 {
	font-size: 1.75em;
}

h4 {
	font-size: 1.25em;
}

@media (max-width: 800px) {
	h1 {
		font-size: 9vw;
	}
	
	h2 {
		font-size: 7.5vw;
	}
	
	h3 {
		font-size: 6.5vw;
	}
	
	h4 {
		font-size: 5vw;
	}
}

img {
	
}

/* default table properties */
table {
	border-collapse: collapse ;
}

tr {
	vertical-align: baseline; 
}

/* set anchor styles */
a, 
a:link {
	color: var(--color-anchor);
}

a:active, 
a:visited {
	color: var(--color-anchor_visited);
}

a:hover {
	color: var(--color-anchor_hover);
	text-decoration: none;
}

/* classes */

.container {
	margin: auto;
}



.menu_logo {
	vertical-align: middle;
	width: 1%;
	font-size: 0 ;
}

.menu_nav {
	vertical-align: middle ;
}

.menu_logo img {
	width: 100px ;
}

.nav_outer {
	float: right ;
	clear: right ;
}

.nav_top {
	border: 2px solid var(--color-blue);
	background: var(--color-gray);
	padding: 10px 20px ;
	border-radius: 20px ;
	font-size: .8em ;
	box-shadow: 0 0 10px color-mix(in srgb, black 25%, transparent);
}

.nav_top, 
.nav_top a {
	color: white;
	text-decoration: none;
}

.nav_top a:hover {
	text-decoration: underline;
}

.content_outer {
}

.content_padding {
	padding: calc(var(--CONTENT_PADDING) * .66) var(--CONTENT_PADDING);
}

.bottom_container {
	color: #999;
	font-size: .75em;
	text-align: center ;
}

.bottom_container a {
	text-decoration: none;
	color: #999 ;
}

.bottom_container a:hover {
	text-decoration: underline;
}

/* nav */

.nav_container {
}

.nav_container ul.sf-menu {
	display: block ;
}
.nav_container ul li {
	display: block ;
}

.nav_container ul li a {
	display: block;
	padding: .5em 1em ;
	color: white;
	text-decoration: none;
	font-family: var(--FONT_FAMILY_ACCENT);
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.5em;
}

.nav_container ul li a:hover {
	background: var(--color-blue);
}

@media (max-width: 800px) {
	.page_nav a {
		display: block;
	}
}

/* standard stuff */

.standard_t {
	text-align: left;
	width: 100%; 
	margin: auto;
	background: white;
}

.standard_t td {
	padding: .75em 1em;
}

.standard_t .standard_h td {
	font-weight: bold;
	background-color: #666;
	color: #eee;
}

.standard_t .standard_b:nth-child(odd) {
	background: #f0f0f0;
}

.standard_t .standard_b {
	border-bottom: solid 1px #ccc;
}

.standard_t .standard_b:hover {
	background-color: #ddd;
}

.standard_bl {
	border-left: solid 1px #ccc;
}

.standard_h .standard_bl {
	border-left: solid 1px #888;
}

.standard_block {
	display: block;
	box-shadow: 0 0 15px color-mix(in srgb, black 15%, transparent);
	margin: var(--CONTENT_PADDING) 0;
	border-radius: 20px;
	background: white;
	padding: var(--CONTENT_PADDING);
	text-decoration: none;
	color: var(--color-font);
}

.standard_block:hover {
	box-shadow: 0 0 15px color-mix(in srgb, var(--color-blue) 90%, transparent);
}

.standard_block h2 {
	color: var(--color-blue);
}

.standard_flex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.standard_flex > * {
	flex: 1 1 auto;
}

.standard_flex_left {
	text-align: left;
}

.standard_flex_center {
	text-align: center;
}

.standard_flex_right {
	text-align: right;
}

.dim {
	color: var(--color-gray); 
}

.gb {
	font-weight: bold; 
	color: var(--color-gray); 
}

.important {
	color: var(--color-important); 
}

.a_but {
	--main: color-mix(in srgb, var(--color-blue) 90%, black);
	--bg: var(--main);
	--border_bottom: color-mix(in srgb, var(--bg) 80%, black);
	
	border-radius: 0px;
	display: inline-block;
	margin: 1px 0px;
	border: solid 0px black;
	border-bottom: solid 2px var(--border_bottom);
	background-color: var(--bg); 
	padding: .5em 1em ;
	color: white !important; 
	font-weight: bold;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border-radius: .25em ;
}

.a_but::-moz-focus-inner {
	border: 0;
}

.a_but:hover {
	--main: var(--color-gray);
	--bg: var(--main);
	--border_bottom: color-mix(in srgb, var(--bg) 50%, black);
	
	border-bottom: solid 2px var(--border_bottom);
	background-color: var(--bg); 
}

.a_but[disabled] {
	border-color: var(--color-blue); 
	background-image: none; 
	background-color: var(--bg);
	color: #999 !important; 
	box-shadow: none;
}

form:invalid .a_but[type=submit] {
	--main: #bbb;
}

/* overlay */

.overlay_cont {
	--clr: var(--color-gray);
	
	position: relative; 
	box-shadow: 0 0 20px 0 color-mix(in srgb, black 50%, transparent);
	margin: 10px; 
	border: solid 6px var(--clr); 
	border-radius: 10px;
	background-color: color-mix(in srgb, var(--clr) 15%, white);
	padding: var(--CONTENT_PADDING);
}

.overlay_cont h2 {
	text-shadow: 1px 1px .1em color-mix(in srgb, black 30%, transparent);
}

.overlay_close {
	display: block; 
	position: absolute ;
	top: -9px; 
	right: 14px; 
	border: solid 1px color-mix(in srgb, var(--clr) 99%, black);
	border-radius: 4px;
	background-color: color-mix(in srgb, var(--clr) 100%, white); 
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) , rgba(0, 0, 0, 0.1));
	padding: 3px 6px; 
	text-decoration: none; 
	line-height: 1;
	color: white !important; 
	text-shadow: 0px 0px .1em color-mix(in srgb, black 50%, transparent);
}

.overlay_close:hover,
.overlay_close:focus {
	background-color: color-mix(in srgb, var(--clr) 80%, white); 
	border-color: color-mix(in srgb, var(--clr) 85%, white);
}

.proc_win {
	padding: 40px 75px; 
	background-color: #eee; 
	text-align: center; 
}

.proc_win h2 {
	font-size: 26px; 
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: var(--FONT_SIZE); 
}

/* done */

.done {
	border-bottom: solid 1px color-mix(in srgb, black 30%, transparent); 
	background-color: color-mix(in srgb, black 10%, transparent); 
	padding: 10px;
	color: color-mix(in srgb, black 75%, transparent);
	text-align: center; 
}
.done_1 {
	
}
.done_0 {
	font-style: italic; 
}

.done_standard {
	font-weight: bold;
}

.done_message {
	margin-top: 6px; 
}

.field {
	font-weight: bold ;
}
.indent {
	padding-left: 2% ;
}

.table {
	display: table ;
	width: 100% ;
}

.td {
	display: table-cell ;
	vertical-align: top ;
}

.table_2 .td {
	width: 50% ;
}

.table_2 .td:first-child {
	padding-right: 20px ;
}
.table_2 .td:last-child {
	padding-left: 20px ;
}

.input_outer {
	margin: var(--FONT_SIZE) 0;
}

.input_outer label {
	display: block ;
	font-size: .9em ;
	margin-bottom: 5px ;
}

.input_outer div {
	padding: 10px ;
	background: white ;
	border: 1px solid #e0e0e0 ;
}

.input_outer input {
	width: 100% ;
	border: 0 ;
	margin: 0 ;
}

.big_submit {
	font-family: var(--FONT_FAMILY_ACCENT);
	text-transform: uppercase;
	font-weight: normal;
	background: var(--color-blue_dk);
	color: white;
	border: 0;
	font-size: 2em;
	padding: 10px 20px;
}

.big_submit:hover {
	background: var(--color-blue);
}

.gb {
	font-weight: bold; 
	color: var(--color-blue_dk); 
}

.type_color {
	height: 36px;
	width: 36px;
	font-size: 0;
}


.info_holder {
	box-shadow: 0 0 10px rgba(0,0,0,.5) ;
	margin: 20px 0;
	font-size: var(--FONT_SIZE);
}

.info_heading {
	background: var(--color-blue_dk);
	color: white ;
	padding: 12px ;
}

.table {
	display: table ;
	width: 100% ;
}

.td {
	display: table-cell ;
	vertical-align: middle ;
}

.td_r {
	text-align: right ;
}

.video-container {
	text-align: center;
	margin: auto;
	position: relative;
	padding-bottom: 50%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, 
.video-container object, 
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.top-sticky {
	position: fixed ;
	top: 0 ;
	left: 0 ;
	right: 0 ;
	height: 70px ;
	background: #f0f0f0 ;
	box-shadow: 0 0 10px rgba(0,0,0,.5) ;
}

@media (min-width: 768px) {
	.page-inner-container {
		overflow: hidden ;
		height: calc(100vh - 70px) ; 
	}
	.page-inner {
		display: grid ;
		width: 100% ;
		height: 100% ;
		grid-template-columns: 0 * ;
	}
	.page-inner-nav {
		grid-template-columns: 250px auto ;	
	}
	.page-inner > div {
		overflow: auto ;
	}
}
@media (max-width: 768px) {
	.nav_container {
		position: fixed ;
		top: 70px ;
		left: 0 ;
		bottom: 0 ;
		overflow: auto ;
	}
}


hr {
	background-image: url(/template/images/hr.png) ;
	background-position: center center ;
	background-repeat: repeat-x ;
	margin: 3rem auto ;
	height: 30px ;
	padding: 0 ;
	border: 0 ;
	opacity: .25 ;
}

@media (min-width: 480px) {
	.grid-dashboard {
		display: grid ;
		align-items: center ;
		grid-template-columns: 25% 25% 25% 25% ;		
	}	
}

.grid-cell-padding {
	padding: 1rem ;
}

.grid-dashboard-cell {
	border: 1px solid #e0e0e0 ;
	border-radius: 2rem ;
	margin: 1rem ;
	padding: 2rem ;
}

/*  */

.cb_but {
	--cb_but-color: var(--color-blue_dk) ;
	--cb_but-contrast: white;
	
	accent-color: var(--cb_but-color);
	display: inline-block; 
	margin: var(--BUTTON_MARGIN); 
	border: 1px solid color-mix(in srgb, var(--cb_but-color), white 50%);
	border-radius: var(--BUTTON_RADIUS);
	background-color: color-mix(in srgb, var(--cb_but-color), white 85%); 
	padding: 2px 6px;
	line-height: inherit; 
}

.cb_but-fat {
	line-height: 1.75; 
}

.cb_but [class*=fa-] {
	color: var(--cb_but-color); 
}

.cb_but:hover {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, .5);
	text-shadow: 0 0 .2em rgba(255, 255, 255, 1);
}

.cb_but:has(input:is([type=checkbox], [type=radio]):checked) {
	border: solid 1px var(--cb_but-color); 
	background-color: color-mix(in srgb, var(--cb_but-color), white 15%);
	text-shadow: 0 0 .2em rgba(0, 0, 0, .35);
	color: var(--cb_but-contrast);
}

.cb_but:has(input:is([type=checkbox], [type=radio]):checked):hover {
	text-shadow: 0 0 .2em rgba(0, 0, 0, .6);
}

.cb_but:has(input:is([type=checkbox], [type=radio]):checked) [class*=fa-] {
	color: var(--cb_but-contrast);
}

.cb_but:has(input:is([type=checkbox], [type=radio]):disabled) {
	opacity: .5;
}

.cb_but:has(input:is([type=checkbox], [type=radio]):disabled):hover {
	box-shadow: none;
	text-shadow: none;
}

/*  */

body .jq-toast-wrap {
	width: 300px;
	}

body .jq-toast-wrap.top-right {
	top: 15px;
	right: 15px;
}

body .jq-toast-wrap.bottom-right {
	bottom: 15px;
	right: 15px;
}

body .jq-toast-single {
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .4);
	box-sizing: border-box;
}

body .close-jq-toast-single {
	font-size: 30px;
	right: 3px;
}

@media (max-width: 430px) {
	body .jq-toast-wrap {
		width: calc(100% - 10.5rem);
	}
}

/*  */

/* filter */

.filter-cont {
	--spacing: 1em;
	
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: last baseline;
	gap: calc(var(--spacing) * .5) var(--spacing);
	margin-bottom: var(--spacing);
}

.filter-item {
	display: inline-block; 
	white-space: nowrap;
}

.filter-sizer {
	display: none;
	width: 1px;
	overflow-x: hidden;
	opacity: 0;
}

.filter-sizer input {
	widthX: 0;
}

.filter-toggle_but {
	align-self: stretch;
}

.filter-cont.filter-hidden .filter-sizer {
	display: inline-block;
}

.filter-cont.filter-hidden .filter-item:not(.filter-toggle_but):not(.filter-sizer) {
	display: none;
}

.filter-label {
	display: block;
	margin-bottom: .125em;
	font-weight: bold; 
	color: var(--color-blue_dker);
}

.filter-submit {
	justify-content: right; 
}


@property --progress-used-grow {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

@property --progress-over-grow {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

@property --progress-unused-grow {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

.progress-outer {
	/* pass in (non use- version) */
	--use-gets: var(--gets, 100);
	--use-used: var(--used, 0);
	--use-clr-used: var(--clr-used, var(--color-gray));
	--use-clr-over: var(--clr-over, var(--color-bad)) ;
	--use-clr-unused: var(--clr-unused, oklch(100% 0 0));
	--use-clr-border: var(--clr-border, oklch(0% 0 0));
	--use-height: var(--height, calc(1em * 1.25));
	--use-transition-speed: var(--transition-speed, 1s);
	/* end pass in */
	
	--over: max(var(--use-used) - var(--use-gets), 0);
	--unused: max(var(--use-gets) - var(--use-used), 0);
	--used-adjusted: calc(var(--use-used) - var(--over));
	
	--progress-used-grow: var(--used-adjusted);
	--progress-over-grow: var(--over);
	--progress-unused-grow: var(--unused);
	
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: nowrap;
	height: var(--use-height);
	border: solid 1px var(--use-clr-border);
	background-color: var(--use-clr-unused);
	
	> * {
		flex-basis: 0;
		transition: flex-grow var(--use-transition-speed);
	}
	
	.progress-inner_used {
		background-color: var(--use-clr-used);
		flex-grow: var(--progress-used-grow);
	}
	
	.progress-inner_over {
		background-color: var(--use-clr-over);
		flex-grow: var(--progress-over-grow);
	}
	
	.progress-inner_unused {
		background-color: var(--use-clr-unused);
		flex-grow: var(--progress-unused-grow);
	}
}

.progress-inline {
	display: inline-flex;
	min-width: var(--use-height);
	vertical-align: sub;
}

.progress-running {
	background-image: url(/common/images/loading/bg.gif);

	> * {
		opacity: .75;
	}
}