@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

@font-face {
	font-family: 'FontAwesome';
	src: url('/fonts/fa-solid-900.eot');
	src: url('/fonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), /*ie5-ie8*/
	url('/fonts/fa-solid-900.woff') format('woff'), /*modern browsers*/
	url('/fonts/fa-solid-900.ttf') format('truetype'), /*safari,adroid,ios*/
	url('/fonts/fa-solid-900.svg#svgFontName') format('svg'); /*legacy ios*/
}

:root {
	--text: #666666;

	--lightblue: #0e92ff;
	--superlightblue: #CDE9FF;
	--darkblue: #010228;
	--cyan: #51c3c5;
	--mediumblue: #05388B;

	--lightgreen: #69fa61;
	--green: #4ddb5b;
	--darkgreen: #05a600;
	--gold: #daa85b;
	
	--superlightgray: #eeeeee;
	--lightgray: #cccccc;
	--gray: #999999;
	--darkgray: #333333;

	--red: #cc0000;
	--lightred: #ff3333;
	--darkred: #991b1b;
	--pink: #ffc2c2;
	
	--magenta: #cc44ff;
	--darkmagenta: #852da6;

	--black: #000000;
	--white: #ffffff;
	--offwhite: #f8f8f8;
	--greengold: #adad87;
	--darkgreengold: #7d7d57;

	--border: #e4e4e4;
	--shadow: 4px 4px 4px 1px rgba(0, 0, 0, 0.1);
	--shadow-right: 4px 4px 4px 3px rgba(0, 0, 0, 0.1);
	--shadow-bottom: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);

	--card-text: #8f8f8f;
	--tb-text: #666666;

	--strokecolorlightCCC: brightness(0) saturate(100%) invert(86%) sepia(0%) saturate(575%) hue-rotate(58deg) brightness(95%) contrast(94%);
	--strokecolorlightCCCHover: brightness(0) saturate(100%) invert(8%) sepia(95%) saturate(7475%) hue-rotate(4deg) brightness(92%) contrast(108%);
	--strokecolormedium777: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(1735%) hue-rotate(11deg) brightness(92%) contrast(93%);
	--strokecolormedium777Hover: brightness(0) saturate(100%) invert(8%) sepia(95%) saturate(7475%) hue-rotate(4deg) brightness(92%) contrast(108%);
	--strokecolorlightblue: brightness(0) saturate(100%) invert(55%) sepia(54%) saturate(7498%) hue-rotate(195deg) brightness(108%) contrast(101%);
	--strokecolorgreen: brightness(0) saturate(100%) invert(40%) sepia(96%) saturate(2071%) hue-rotate(87deg) brightness(95%) contrast(103%);
	--strokecolorred: brightness(0) saturate(100%) invert(12%) sepia(61%) saturate(7498%) hue-rotate(357deg) brightness(84%) contrast(114%);
	/*https://cssfilterconverter.com/*/

	/*https://www.svgrepo.com/collections/  ionicons*/
}

body {
	background: var(--white);
	margin: 0;
	color: var(--text);
	font-family: 'DM Sans', sans-serif !important;
	font-size: 20px;
	line-height: 1.2em;
}
.userbody {
	background: var(--offwhite);
	margin: 0;
	color: var(--text);
	font-family: 'DM Sans', sans-serif !important;
	/*font-size: 18px;*/
	line-height: 1.5em;
}
* {
	box-sizing: border-box;
}

input[type='submit'] {
	cursor: pointer;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 1.0em;
	border: 1px solid var(--lightgray);
	border-radius: .25em;
	padding: 4px 10px;
}
input {font-family: 'DM Sans', sans-serif !important;}


hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid var(--lightgray);
	margin: 1em 0;
	padding: 0;
}

a, a:link, a:visited, a:active {
	cursor: pointer;
	color: var(--lightblue);
}
	a:hover {
		color: var(--darkblue);
	}



a[href^="tel:"]:before {
	content: "\260e";
	margin-right: 0.5em;
	white-space: nowrap;
}
h1 {margin: 20px auto 0 auto;}
h2 {margin: 20px auto 0 auto;}
h3 {margin: 10px auto 0 auto;}
h4 {margin: 5px auto 0 auto;}

/*  ---------------------------  GENERAL ---------------------------------------------------*/

.card {background-color: var(--white); box-shadow: var(--shadow); font-size: 0.9em; color: var(--card-text); }
.cardtitle {width: 100%; display: inline-block; text-align:center; font-weight: bold; border-bottom: 1px solid var(--gray); margin-bottom: 5px; color: var(--gray); padding-bottom: 5px;}
.carddetails {width: 100%; display: inline-block; text-align:left; line-height: 1.7em;}
.cardpointer {width: 45px; vertical-align:middle; background-color: transparent; margin-left: -20px; padding-top: 20px}
.complete {background-color: var(--lightgreen);}
.incomplete {background-color: var(--pink);}
.disabled {background-color: var(--lightgray);}
.narrow {margin-top: 20px; margin-right: 20px; padding: 10px; width: 210px; min-width: 210px; display: inline-block; vertical-align: top; line-height: 1.2em;}
.medium {margin-top: 20px; margin-right: 20px; padding: 10px; width: calc(50% - 30px);  min-width: 200px; display: inline-block; vertical-align: top; line-height: 1.2em;}
.wide {margin-top: 20px; margin-right: 20px; padding: 10px; width: calc(100% - 30px); display: inline-block; vertical-align: top; line-height: 1.2em;}

.rounded {border-radius: .75rem; }

.redtext {color: var(--red);}
.greentext {color: var(--darkgreen);}

.svgstrokecolor{width: 25px; filter: var(--strokecolormedium777); vertical-align: text-top;}
.svgstrokecoloractive{width: 25px; filter: var(--strokecolormedium777Hover);}
.svgstrokecolor20{width: 20px; filter: var(--strokecolormedium777);}
.svgstrokecoloractive20{width: 20px; filter: var(--strokecolormedium777Hover);}
.svgstrokecolor:hover{filter: var(--strokecolormedium777Hover);}
.svgstrokecolorgreen{filter: var(--strokecolorgreen);}
.svgstrokecolorblue{filter: var(--strokecolorlightblue); margin-bottom: 10px; vertical-align: text-top;}
.svgstrokecolorred{width: 20px; filter: var(--strokecolorred);}

.svgstrokecolor777only{filter: var(--strokecolormedium777);vertical-align: middle;}
.svgstrokecolor777onlysmall{filter: var(--strokecolormedium777);vertical-align: middle; width: 20px;}
.svgstrokecolorredonly{filter: var(--strokecolorred);vertical-align: middle;}
.svgstrokecolorgreenonly{filter: var(--strokecolorgreen);vertical-align: middle;}
.svgstrokecolorblueonly{filter: var(--strokecolorlightblue);vertical-align: middle;}

.mastered{color: var(--darkgreen);}
.notmastered{color: var(--red);}

.titlebar {
	width: calc(100% - 40px);
	margin: 0 20px 0 20px;
	/*background-image:url(/Images/TitleBar.png);*/
	background-color: var(--greengold);
	background-repeat: no-repeat; 
	background-size: cover;
	color: rgba(255,255,255,0.8);
	padding: 2% 2%;
	background-position: right;
	font-size: 1.7em;
	font-weight: bold;
	line-height: 1.2em;
	/*text-shadow: 1px 1px var(--black);*/
}

.breadcrumb {padding-left: 8px; font-size: 0.8em; display: inline-block;}
.breadcrumb::before{content:" — ";}

.errorlabel {color: var(--red); }
.msglabel {color: var(--green);}

.showpassword {width: 30px; height: 24px; filter: var(--strokecolormedium777); padding-top: 5px;}
.showpassword:hover {filter: var(--strokecolormedium777Hover);}


/*  ---------------------------AVATAR ---------------------------------------------------*/
.divUserIcon {
	-webkit-background-size: 42px 42px;
	/*background-size: 30px 30px;*/
	-webkit-border-radius: 50%;
	border-radius: 50%;
	display: inline-block;
	/*margin: 0px;*/
	border: 5px solid var(--superlightgray);
	height: 42px;
	width: 42px;
	text-align: center;
	font-weight: bold;
	color: var(--white);
	font-size: 20px;
	vertical-align: top;
	margin-top: 3px;
	/*box-shadow: var(--shadow);*/
}
.divUserIconInner {display: flex; justify-content: center; border-radius: 50%; }
.divUserIconText {margin-top: 2px; color: var(--white); text-transform:uppercase; }
.divUserIconInner img {object-fit: cover; width: 101%; height: auto; overflow: hidden; border-radius: 50%; }



/*  ----------------------------  VIDEO  -------------------------------------------------    */
.video-container {
	height: 450px;
	width: 100%;
	position: relative;
	background-color: rgba(1,2,40, 0.7);
}

.video-container video {
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
	z-index: 0;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
	z-index: 1;
	position: relative;
	text-align: center;
	color: var(--white);
	padding: 10px;
	z-index: 5;
}
.video-container .overlay {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	background-color: rgba(1,2,40, 0.5);
}



/*  ---------------------------  DIVs  ---------------------------------------------------    */
.divpageheaderwrapper{width: 100%; margin-bottom: 20px; background-color: var(--greengold); min-height: 50px; text-align:right;}
.divpagename {font-weight: bold; margin-top: 0.5em; display: inline-block; font-size: 1.2em; color: rgba(255,255,255,0.8); }
.divbreadcrumb {font-size: 0.75em; margin-left: 20px; display: inline-block;}
.divbreadcrumb a{text-decoration: underline;}
.divbreadcrumb a:hover{color: var(--red);}

.divblockwrapper {}
.divblockheader {}
.divblockcontent2 {margin: 10px auto; background-color: var(--lightblue); padding: 20px 20px; color: var(--white);}
.divblockcontent1 {margin: 10px auto; background-color: var(--white); padding: 20px 20px; color: var(--darkgray);}
.divblockcontent4 {margin: 10px auto; background-color: var(--superlightblue); padding: 20px 20px; color: var(--black);}
.divblockcontent3 {margin: 10px auto; background-color: var(--white); padding: 20px 20px; color: var(--darkgray);}
.divblockcontent {margin: 10px auto; background-color: var(--white); padding: 20px 20px; color: var(--darkgray);}
.block {margin: 10px auto; background-color: var(--white); padding: 20px 20px; color: var(--gray);}


.paypaldiv {max-width: 700px; margin: 0 auto;}

.gridwrapper {width: 45%; display: inline-block; vertical-align:top; margin-left: 20px; margin-top: 20px;}
.gridwrappernarrow {width: 36%; display: inline-block; vertical-align:top; margin-left: 15px; margin-top: 20px;}
.gridwrapperwide {width: 60%; display: inline-block; vertical-align:top; margin-left: 15px; margin-top: 20px;}


/*  ---------------------------  TOP MENU  ---------------------------------------------------    */
.topmenu {
	height: 70px;
	width: 100%;
	margin-bottom: 10px;
	background-color: var(--white);
	box-shadow: var(--shadow-bottom);
	position:fixed;
	z-index: 1000;
}
.topmenuhamburger {width: 50px; display: inline-block; vertical-align:top; text-align: center; padding-top: 20px;}
.topmenubusinessname {width: calc(100% - 300px); display: inline-block; vertical-align:top; padding-top: 20px; text-align: center; line-height: 1.0em;}
.topmenuright {float: right; width: 100px; margin-top: 5px;}
.topmenu .headerlogo {width: 125px; display: inline-block; vertical-align: middle; text-align: right;}
.topmenu .headerlogo img {width: 125px; }


/*  ---------------------------  LEFT MENU  ---------------------------------------------------    */
.leftmenu {
	width: 110px;
	text-align:center;
	display: inline-block;
	box-shadow: var(--shadow-right);
	background-color: var(--white);
	vertical-align: top;
	margin-right: 10px;
	height: calc(100% - 70px);
	position: fixed;
	font-size: 0.6em;
	border-top-right-radius: .75em;
	margin-top: 70px;
	padding-top: 20px;
	transition: margin 500ms ease-in-out, width 500ms ease-in-out;
	line-height: 1.0em;
	
}
.leftmenu a{text-decoration:none; color: var(--gray)}
.leftmenu a:hover{text-decoration:none; color: var(--red); filter: var(--strokecolormedium777Hover);}
.leftmenu img{margin-right: 3px;}
.leftmenuitem {margin-top: 20px; width: 100%; display: inline-block;}
.divnohover a:hover {color: transparent !important; filter: none !important}



/*  ---------------------------  PAGE CONTENT  ---------------------------------------------------    */
.pagecontent {
	margin-left: 125px;
	width: calc(100% - 140px);
	display: inline-block;
	background-color: var(--offwhite);
	vertical-align:top;
	margin-top: 75px;
	transition: margin 500ms ease-in-out, width 500ms ease-in-out;
}
.pagecontentTest {
	margin-left: 60px;
	width: calc(100% - 70px);
	display: inline-block;
	background-color: var(--offwhite);
	vertical-align:top;
	margin-top: 75px;
	z-index: 100;
	position: fixed;
	overflow-y: auto;
	height: 90vh;
}
.pagecontentweb {
	width: 100%;
	display: inline-block;
	background-color: var(--white);
	vertical-align:top;
	margin-top: 25px;
}
.contentarea {
	width: 100%;
	/*max-width: 1200px;*/
	margin: 0 auto;
}
.blockwrapper {
	width: 100%;
}
.divblockheader {
	width: 100%;
}
.loginpanel {max-width: 600px; width: 100%; margin: 0 auto;}

/* ------------------------------TAKE COURSE ------------------------------------  */
.coursecontentpagewrapper {max-width: 1100px;}
.browseGrid {width: 100%; max-width: 1280px; margin: 20px auto 0 auto; }
.browseGrid th {display: none; }
.browseGrid td {padding-right: 5px;}
.browseGridPager a, .browseGridPager span
{
	font-size: 0.9em;
     display: block;
     min-width: 36px;
     text-align: center;
     text-decoration: none;
	border-radius: 5px;
	padding: 2px;
}
.browseGridPager a
{
     background-color: var(--white);
     color: var(--gray);
     border: 1px solid var(--gray);
}
.browseGridPager span
{
     background-color: var(--lightgray);
     color: var(--white);
     border: 1px solid var(--gray);
}


/*  ---------------------------- BUTTONS ----------------------------------------    */
.stdButton{text-transform: uppercase !important; padding: 10px !important; min-width: 150px; font-size: 1.0em; border: 1px solid var(--lightgray); border-radius: 5px; color: var(--darkgray);}
.stdButton:hover{border: 1px solid var(--lightblue); color: var(--lightblue); }
.stdButton:focus {border: 1px solid var(--lightblue) !important; color: var(--lightblue); outline: none; }

.stdButton100{text-transform: uppercase !important; padding: 10px !important; min-width: 100px; font-size: 1.0em; border: 1px solid var(--lightgray); border-radius: 5px; color: var(--darkgray);}
.stdButton100:hover{border: 1px solid var(--lightblue); color: var(--lightblue); }
.stdButton100:focus {border: 1px solid var(--lightblue) !important; color: var(--lightblue); outline: none; }

.blueButton{text-transform: uppercase !important; padding: 10px !important; min-width: 100px; font-size: 1.0em; border: 1px solid var(--darkblue); border-radius: 5px; color: var(--white); background-color: var(--darkblue);}
.blueButton:hover {border: 1px solid var(--lightblue); color: var(--lightblue) !important;}
.blueButton:focus {border: 1px solid var(--lightblue) !important; color: var(--lightblue); outline: none; }

.btnClearJumpTo {border:none !important; background-image: none !important; background-color: transparent !important; font-size: 0.9em !important; font-style:italic; color: var(--darkgray);}
.btnClearJumpTo:enabled {font-style:normal; color: var(--lightblue);}

.btnClear {border:none !important; background-image: none !important; background-color: transparent !important; font-size: 0.9em !important; color: var(--lightblue);}
.btnClear a{}
.btnClearInstructions {border:none !important; background-image: none !important; background-color: transparent !important; font-size: 1.2em !important; font-weight:bold; color: var(--lightblue); font-style: italic;}
.btnClearInstructionsHeader {border:none !important; background-image: none !important; background-color: transparent !important; color: var(--lightblue); font-size: 19px;}

.btnhref {text-transform: uppercase !important; padding: 10px !important; min-width: 150px; font-size: 1.0em; border: 1px solid var(--lightgray); border-radius: 5px; color: var(--darkgray); color: var(--darkgray) !important; text-decoration: none; background-color: buttonface;}
.btnhref:hover{border: 1px solid var(--lightblue); color: var(--lightblue) !important; }
.btnhref:focus {border: 1px solid var(--lightblue) !important; color: var(--lightblue) !important; outline: none; }

.redLabel {color: var(--red);}
.lightBlueLabel {color: var(--lightblue);}

/*  ---------------------------   PAGE HEADER  -------------------------------------------    */
.pageheadernav {background-color: var(--white) !important; width: calc(100% - 260px); vertical-align: middle; display: inline-block;}
.headerlogo {width: 250px; display: inline-block; vertical-align: middle;}
.headerlogo img {width: 250px; }


/*  --------------------------  MODAL POPUP  -------------------------------------------------    */
.modalBackground {
	background-color: var(--black);
	filter: alpha(opacity=75);
	opacity: 0.6;
}

.modalPopup {
	background-color: rgba(255,255,255,1.0);
	border-color: rgba(187,187,187,0.3);
	border-radius: 8px;
	padding: 10px;
	width: 90%;
	max-width: 700px;
	margin: 0 auto 0 auto;
	max-height: 90%;
	overflow: auto;
}
.modalPopupwide {
	background-color: rgba(255,255,255,1.0);
	border-color: rgba(187,187,187,0.3);
	border-radius: 8px;
	padding: 10px;
	width: 90%;
	max-width: 90%;
	margin: 0 auto 0 auto;
	max-height: 90%;
	overflow: auto;
}
.modalPopupmedium {
	background-color: rgba(255,255,255,1.0);
	border-color: rgba(187,187,187,0.3);
	border-radius: 8px;
	padding: 10px;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 0 auto;
	max-height: 90%;
	overflow: auto;
}
.modalPopupLeft {
	width: 50%;
	display: inline-block;
	padding: 5px;
	vertical-align: top;
	left: 0 !important;
	top: 0 !important;
	min-height: 50vh;
}

.modalPopupRight {
	width: 70%;
	display: inline-block;
	padding: 5px;
	text-align: left;
	vertical-align: top;
	margin-bottom: 5px;
	max-height: 40vh;
	overflow-y: auto;
}

.panelWhite {
	background-color: var(--white);
}

/*  ------------------------------  PAGE FOOTER  ---------------------------------------------------    */
.page_footer {
	margin-top: 0px;
	bottom: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	padding: 10px;
	height: 65px;
	position: fixed;
	z-index: 100;
	background: var(--mediumblue);
	font-size: 0.8em;
	line-height: 1.0em;
}

	.page_footer .footer_content {
		color: var(--white);
		padding: 10px 5% 10px 5%;
		display: inline-block;
		min-width: 400px;
		width: inherit;
		font-size: 1.0em;
		display: inline-block;
	}
	.page_footer .footer_content a {color: var(--white); /*text-decoration:none;*/}
	.page_footer .footer_content a[href^="tel:"] {color: var(--white); text-decoration:none;}

.page_footer_bar {
	bottom: 0;
	z-index: 100;
	margin-bottom: 50px;
	position: fixed;
	height: 5px;
	width: 100%;
	background: var(--darkgray);
	display:none;
}

.phoneFooter {width: 125px;display: inline-block; text-align: center; vertical-align: top;}
.socialFooter {width: 100px;display: inline-block; text-align: right; vertical-align: top;}
.literalFooter {width: calc(100% - 250px); display:inline-block; text-align: center; margin: -3px auto 0 auto;}


/*  ------------------------------  RESPONSIVE LAYOUT  --------------------------------------------  */
@media (min-width:1536px) {
}

@media (max-width: 1440px) {
	.coursecontentpagewrapper {max-width: 1000px;}
}

@media (min-width:1280px) { /* desktop */
}

@media (max-width: 1200px) {
}

@media (max-width:1000px) { /* laptop, small desktop */
	.gridwrapper {width:calc(100% - 40px);}
	.gridwrappernarrow {width:calc(100% - 40px);}
	.gridwrapperwide {width:calc(100% - 40px);}
}

@media (max-width:1024px) { /* laptop, small desktop */
}

@media (max-width:700px) {
	body{font-size: 16px !important;}
	.headerlogo {width: 125px; }
	.headerlogo img {width: 125px; }
	.topmenubusinessname {padding-top: 10px; font-size: 0.8em;}
}

@media (min-width:600px) { /* large phone,  */
	.pagecontent{margin-left: 125px; }
	.pagecontentTest{margin-left: 60px; }
	.leftmenu {
		margin-left: 0px;
	}
	.hidden {
		margin-left: -120px;
	}
	.hidden2 {
		margin-left: 15px; width: calc(100% - 25px);
	}
}
@media (max-width:600px) { /* large phone,  */
	.pagecontent{margin-left: 15px; width: calc(100% - 30px) }
	.pagecontentTest{margin-left: 60px; width: calc(100% - 70px) }
	.leftmenu {
		margin-left: -110px;
	}
	.hidden {
		margin-left: 0px;
	}
	.hidden2 {
		margin-left: 125px; width: calc(100% - 135px);
	}
	.paypaldiv {max-width: 450px;}
	.narrow {
		width: 170px !important;
		min-width: 170px !important;
	}
}
@media (max-width:480px) { /* small  phone */
	body {
		font-size: 14px;
	}

	.headerlogo, .headerlogo img {
		width: 125px;
	}

	.page_header .logo {
		min-width: 125px;
		width: 125px;
		max-width: 150px;
	}

	.pageheadernav {
		width: 100%;
	}
	.page_header .menu {
		padding-top: 25px;
		width: 50px;
	}
	.topmenuhamburger {
		    padding-top: 11px;
	}
	.topmenubusinessname {
		width: calc(100% - 275px);
	}
	.topmenu .headerlogo {
		width: 100px;
	}
	.topmenu .headerlogo img {
		width: 100px;
	}
	.page_footer .footer_content {
		max-width: 470px;
	}
	.topmenu{height:55px;}

}

@media print {
	.main_content {
		margin-top: 10px !important;
		color: var(--black) !important;
		font-family: Arial !important;
	}

	.content {
		border: none !important;
	}

	.noprint, .noprint * {
		display: none !important;
	}
}


#warning-message {
	display: none;
}

@media only screen and (orientation:portrait) {
	#wrapper {
		display: none;
	}

	#warning-message {
		display: block;
	}
}

@media only screen and (orientation:landscape) {
	#warning-message {
		display: none;
	}
}