/* 
* Please DO NOT REMOVE styles. 
* If changes are made, comment out styles and provide a note of the change.
* THESE STYLES AFFECT ALL CAMPUSCE CUSTOMER SITES 
* and should ONLY be used for global updates.
*/

/*************** FONT LIBRARIES ***************/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Arvo:400,700');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

@import url("https://use.fontawesome.com/releases/v5.0.10/css/all.css");

/*************** GLOBAL DEFAULTS ***************/

html, body {
	margin:0px;
	padding:0px;
	width:100%; 
	min-width: 960px;
	height: 100%;
}

body {
	font-size: 75%;
	position: absolute;
	width: 100vw;
}

.clearfix {
	display: block;
	vertical-align:top;
} 

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.smHeading {
	margin-bottom: 2%;
	font-weight: 700;
}

#catalogVert ul, #catalogHoriz ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#catalogVert ul li, #catalogHoriz ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-bottom: 2%;
}

.error {
	font-weight: bold;
	color: #FF0000 !important;
}

.success {
	font-weight: bold;
	color: #009933 !important;
}

.attn {
	font-weight: bold;
}

/*************** VERTICAL SPECIFIC ***************/

#catalogVert {
	width: 100%;
	max-width: 1200px;
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
}

#categoryParent, #selectedCategory {
	width: 100%;
  	float: left;
  	box-sizing: border-box;
}

#categoryParent {
	border: 1px solid #0957A9;
	padding: 10px;
	margin-right: 2%;
	margin-bottom: 4%;
}

#subCategories, #subCourses {
	border: 1px solid #0957A9;
	padding: 10px;
}

#catDescrip {
	width: 96%;
	padding: 2%;
	background: #A6C6E8;
	margin-bottom: 2%;
}

#catDescrip img {
	width: 100%;
	margin-bottom: 2%;
}

#catalogVert ul li.selected a {
    font-weight: bold;
}

#catalogVert ul li.selected {
	margin-bottom: 2%;
}

#categoryParent ul li.selected, #subCategories ul li.selected {
	background: #A6C6E8;
	padding: 10px;
}

/*** HORIZONTAL SPECIFIC ***/

#catalogHoriz {
	width: 100%;
	max-width: 1200px;
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
}

.categoryColumn {
	width: 100%;
  	float: left;
  	box-sizing: border-box;
  	border: 1px solid #0957A9;
	padding: 10px;
	margin-right: 2%;
}

.categoryColumn:last-child {
	margin-right: 0;

}

.categoryImg img {
	width: 100%;

}

.categoryTitle {
	background: #A6C6E8;
	text-align: center;
	padding-top: 2%;
	padding-bottom: 2%;
	margin-bottom: 6%;
	margin-top: 2%;
	font-weight: 700;
}

.categoryColumn ul.catLevel1 li {
	list-style-type: square;
	list-style-position: inside;
}

.categoryColumn ul.catLevel2 {
	padding-left: 5% !important;
}
.categoryColumn ul.catLevel2 li{
	padding-bottom: 0px !important;
}

.categoryColumn ul.catLevel2 li {
	list-style-type: circle;
	list-style-position: inside;
}

.btnViewAll {
	-moz-border-radius: 5px;
	border-radius: 5px;
	width: 100%;
	background: #0957A9;
	text-align: center;
	padding-top: 2%;
	padding-bottom: 2%;
	font-size: 75%;
	margin-top: 4%;
}

.btnViewAll:hover {
	background: #A6C6E8;
}

.btnViewAll:hover a {
	color: #0957A9;
}

.btnViewAll a, .btnViewAll a:visited {
	text-decoration: none;
	padding: 2%;
	color: #FFF;
}

/*** FEATURE/STYLE DEFAULT OFF - (OVERRIDE AT SCHOOL LEVEL) ***/
/* GLOBAL */
.smHeading {font-weight: bold;}

/* VERTICAL */
.categoryTitle {background: none; text-align: center; font-weight: bold;}
#categoryParent {border: none;}
#subCategories, #subCourses {border: none;}
#catDescrip {background: none;}
#categoryParent ul li.selected, #subCategories ul li.selected {background: none;}
ul li.selected a, ul li.selected a:visited, ul li.selected a:hover {font-weight: bold; text-decoration: none;}
#categoryParent ul li a, #categoryParent ul li a:visited, #categoryParent ul li a:hover {text-decoration: none; font-weight: bold;}
#subCategories ul li a, #subCategories ul li a:visited, #subCategories ul li a:hover {text-decoration: none;}
#subCourses ul li a, #subCourses ul li a:visited, #subCourses ul li a:hover {text-decoration: none;}

/* HORIZONTAL */
.btnViewAll {display: none;}
.categoryColumn {border: none; padding: 0px;}
.categoryTitle {background: none; font-weight: bold; text-align: left; text-transform: uppercase;}
.categoryTitle a, .categoryTitle a:visited {}
.categoryTitle a:hover {}
.categoryColumn ul li a, .categoryColumn ul li a:visited {}
.categoryColumn ul li a:hover {}
.categoryColumn ul.catLevel1 {padding-left: 0px;}
.categoryColumn ul.catLevel1 a {}
.categoryColumn ul.catLevel2 a {}
.categoryColumn ul.catLevel1 li {list-style-type: none;}
.categoryColumn ul.catLevel2 li {list-style-type: none;}

/*** DEFAULT TO KEEP ORIGINAL VERTICAL STRUCTURE - NOT RESPONSIVE ***/
#catalogVert {width: 100%; display: block;}
#categoryParent, #selectedCategory {width: 48%;}
#catalogVert:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/*** DEFAULT TO KEEP ORIGINAL HORIZONTAL STRUCTURE - NOT RESPONSIVE ***/
#catalogHoriz {width: 100%;}
.categoryColumn {width: 18.4%;} /* 5 Column */

/*** FOR REFERENCE & PLACEMENT IN SPECIFIC CSS PER SCHOOL ***/
/*
@media only screen and (min-width: 200px) {
	#catalogHoriz {width: 85%; padding: 0;}
	#catalogVert {width: 85%; padding: 0;}
	.categoryColumn {margin-bottom: 4%;}
}

@media only screen and (min-width: 600px) {
	#catalogVert {width: 80%;}
	#categoryParent, #selectedCategory {width: 48%;}
	.categoryColumn {width: 48%;}
}

@media only screen and (min-width: 960px) {
	.categoryColumn {width: 48%;} /* 2 Column *** 
	.categoryColumn {width: 30%;} /* 3 Column *** 
	.categoryColumn {width: 23.5%;} /* 4 Column *** 
	.categoryColumn {width: 18.4%;} /* 5 Column ***
	.categoryColumn {width: 15%;} /* 6 Column ***
}
*/

#categoryWebDescr {
	display: inline-block;
}

div.classPanelSearch, div.classPanelSearch table {
	padding: 0 !important;
	width: 100% !important;
	border-width: 1px !important;
}
tr#s2Top { background-color: #DDD; color: #333; }
tr#s2Bot { background-color: #EEE; color: #333; }
td#s2Buttons a, td#s2Buttons a:visited { background-color: #333; padding: 5px 10px; color: #FFF; text-decoration: none; font-weight: bold; font-size: 85%; border-radius: 5px; }
td#s2Buttons a:hover { background-color: #666; cursor: hand; pointer: hand; }
#s2Title, #s2Instr, #s2Info, #s2Meta, #s2Buttons { padding: 7px; }

table.accountinfo tr td {vertical-align: top !important;}

a.noclick { cursor: none !important; pointer-events: none !important; }
a.noclick[aria-disabled="true"] {
	color: currentColor !important;
  	display: inline-block !important;
  	pointer-events: none !important;
  	text-decoration: none !important;
  	border: none !important;
}

#signin, #createnew {
	display: block !important;
	position: relative !important;
}

#signInForm label, #signInForm input, #createNewForm label, #createNewForm input {
	width: 100% !important;
	display: block !important;
	position: relative !important;
	padding: 5px 0 0 0 !important;
	z-index: 99;

}

#createNewForm button, #signInForm input[type=submit], #sso input[type=submit] {
	margin-top: 10px !important;
	width: 50% !important;
	padding: 10px 20px 10px 20px !important;
}

#unpwReset {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	/*padding-top: 50px !important;*/
	margin-top: 10px !important;
	left: 0;
}

.secTitle h2 { font-size: 18px !important; }


#signInForm input[type="submit"] {
	/*float: left !important;*/
	position: relative;
	left: 0px;
	cursor: pointer;
}

#createNewForm button {
	float: left !important;
	position: relative;
	left: 0px;
	cursor: pointer;
}

div#NonResponsiveSpacer {
	position: relative !important; 
	display: block !important; 
	width: 100% !important; 
	height: 200px !important; 
	z-index: -1 !important;
}

input[type="checkbox"] + label {
	display: initial;
}

/*=============UTILITIES==================*/
.margin-top-0 {
	margin-top: 0;
}

.margin-top-1 {
	margin-top: 1rem;
}

.margin-top-2 {
	margin-top: 2rem;
}

.margin-top-3 {
	margin-top: 3rem;
}

/*==========================================================================================*/

/*[id^=ctl00_ContentPlaceHolder1_usSurvey1_req]:after, [id^=ctl00_ContentPlaceHolder1_usSurvey1_chkReq]:after, .requiredCustomField:after {
	content: " *";
	color: red;
}*/

select.survey-select {
	margin-bottom: 0px;
}

.fieldDisabled {
	cursor: not-allowed !important;
	background-color: #f1f1f1 !important;
}


#searchResultBreadcrumb {
	display: none;
}

iframe[title*="recaptcha" i]:not(iframe[title="reCAPTCHA"]) {
	margin-left: 33% !important;
}


.password_icon {
	position: absolute;
	left: 97%;
	margin-top: 10px;
	cursor: pointer;
	z-index: 999;
}

.password_icon_changelogin {
	position: absolute;
	margin-left: 30%;
	margin-top: 9px;
	cursor: pointer;
}

.password_icon_passwordrecovery {
	position: absolute;
	margin-left: 38%;
	margin-top: 9px;
	cursor: pointer;
}

/*Sign on Page Horizontal alignment*/
.password_icon_sph {
	z-index: 999;
	position: absolute;
	left: 90%;
	cursor: pointer;
	margin-top: 9px;
}

.searchHeaderText {
	/*display: inline-block;*/
	display: table-cell;
	margin-right: 20px;
}

ul.resultsText {
	list-style: initial !important;
	padding: 20px;
}
ul.resultsText > li{
	list-style: initial !important;
}
.w-100 {
	width: 100px;
	float: left;
	margin-right: 50px;
	margin-top: 10px;
}
.w-200 {
	width: 200px;
	float: left;
	margin-right: 50px;
	margin-top: 10px;
}
.w-300 {
	width: 300px;
	float: left;
	margin-right: 50px;
	margin-top: 10px;
}
.w-400 {
	width: 400px;
	float: left;
	margin-right: 50px;
}

.w-500 {
	width: 500px;
	float: left;
	margin-right: 50px;
}

.w-600 {
	width: 600px;
	float: left;
	margin-right: 50px;
}
.clearboth {
	clear: both;
}
.align_left_other {
	text-align: left;
	display: inline-block;
	margin-right: 5px;
}

.small_textbox {
	width: 150px; /* Adjust width as needed */
}

.small_textbox > input {
	margin-bottom: -15px;
}

@media only screen and (max-width: 700px) {
	.password_icon {
		left: 95% !important;
	}
}

@media only screen and (max-width: 532px) {
	.mbl-full {
		width: 100%;
	}
}

@media only screen and (max-width: 500px) {
	.password_icon_sph {
		left: 87% !important;
	}

	.password_icon {
		left: 93% !important;
	}
}

@media only screen and (max-width: 400px) {
	.password_icon_sph {
		left: 83% !important;
	}
}

@media only screen and (max-width: 300px) {
	.password_icon {
		left: 87% !important;
	}

	.password_icon_sph {
		left: 72% !important;
	}
}

@media only screen and (max-width: 960px) {
  	.marketing-site-footer div.row div.columns, 
  	.marketing-site-footer-bottom div.row div.columns { text-align: center !important; }
}

.modal-overlay {
	display: none;
	position: fixed;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9998;
}

.modal-window {
	display: none;
	position: fixed;
	top: 50% !important;
	left: 50% !important;
	height: 80% !important;
	width: 60% !important;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	box-sizing: content-box !important;
	transform: translate(-50%, -50%);
	z-index: 9999;
}

.modal-close-icon {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 20px;
	color: black !important;
	cursor: pointer;
	z-index: 9999;
}

.modal-reload-icon {
	display: none;
}

.modal-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.modal-content {
	width: 100% !important;
	background-color: white !important;
}

.modal-iframe {
	border: none !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

@media (max-width: 1080px) {
    .modal-window {
        width: 85% !important;
        height: 85% !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin: 4% !important;
        padding: 0 !important;
    }

	.modal-iframe {
		width: 100% !important;
	}

	.modal-close-icon {
		font-size: 30px;
		right: 30px;
	}
}

@media (max-width: 960px) {
    .modal-window {
        width: 92% !important;
        height: 90% !important;
		margin: 4% !important;
    }
}

@media (max-width: 790px) {
	.modal-window {
		width: 90% !important;
		margin: 5% !important;
	}

	.modal-close-icon {
		font-size: 40px;
		transform: translateX(-10px);
	}
}

@media (max-width: 480px) {
	.modal-window {
		top: 0 !important;
		left: 0 !important;
		height: 100% !important;
		width: 100% !important;
		margin: 0 !important;
	}
}