
/*		Main Body Text		*/
html, body {
	font-family: 'Open Sans', 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, 'Lucida Grande', sans-serif !important; 
	color: #333; 
	background-color: #000; 
	background: none; 
	background-size: cover;
	padding-left: 0px; /* initial gutters as mobile view */
	padding-right: 0px;
	font-size: 0.93em;
}

/*		Box Shadows		*/
.shadow{
	-webkit-box-shadow: 0px 0px 10px 10px rgba(133,133,133,0.7);
	-moz-box-shadow: 0px 0px 10px 10px rgba(133,133,133,0.7);
	box-shadow: 0px 0px 10px 10px rgba(133,133,133,0.7);
}

/*		For Solid/Semi-transparent Backgrounds on HD, Dashboard, SSO, and Acct Mgmt Pages		*/
.opaque, .hdOpaque{background-color: transparent; padding-bottom: 20px; margin-top: 10px;align-self: flex-start; min-height: 85%;}

/*		Link Text		*/
a{color: #0037ff;}
a:focus, a:hover, .deleteLink:focus, .deleteLink:hover{color:#4c2df8;}
#userMenuList>li>a{color: #fff;}
#userMenuList>li>a:hover{color: #ddd;}

/*		Login Box Background		*/
.logonbox{background-color: transparent; border-radius:10px; width: 400px;} /* 2021-02-04: Ensure long errors do not stretch the error div */
#login{background-color:transparent;}

/*		Self-Service Dialogue Box Backgrounds		*/
#popup_OTPResend{background-color: #fff;}
#popup_OTPResend.col-sm-6.col-sm-offset-3 {	border-radius: 5px; }
.popupWin {background-color:transparent;z-index:1;} /*2021-02-04: Same as above, fixed width */
.popFieldsContainer{}	/* 2021-02-19: For full-width fields on login popups */
#SSRecoveryActions, #SSEnrollmentAuth { margin-left: 20px; } /* 2021-02-19: Indent SS radio buttons */

/*	Input Fields	*/
.form-control{
	box-sizing: border-box; /* fixes input fields from bleeding out of box model */
	display: block;
	width: 100%;
	height: 45px;
	padding: 5px;
	margin: 0px;
	color: #777;
	font-size: 20px;
	border: 2px solid #777;
	background-color: rgba(255, 255, 255, 0.6);
}
/* .form-control:focus{border-color: #66afe9 !important; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,0); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,0);} */

/*		Header Text		*/
h1,h2,h3 { color: #000;}

/*		Header Background		*/
.dlghdr{background-color: transparent;}
.dlghdr h1, .dlghdr h2 {color: #000;}

.loginHdr{background-color: transparent;}

/*		Labels & Legends		*/
label{color: #000;}
legend, #SSActionChosen>span{color: #000;}

/*		Buttons		*/
.PGButton {
	background-color: #2973c7;
	color: #FFF;
    border: 2px solid #266bb9;
	border-radius: 5px;
}

.PGButton:hover, .PGButton:focus {
	color:#FFF;
	background-color: #225fa5;
    border: 2px solid #1e5594;
}
.PGButtonDisabled { 
    background-color: #3c74b4;
    color: #e6e6e6;
    border: 2px solid #386ca8;
    border-radius: 5px;
}
.PGButtonDisabled:hover { color:#bfbfbf; }
.PGButtonDisabled:focus { color:#bfbfbf; }

.PGAltButton { background-color:#ff8000; }
.PGAltButton:hover { background-color: #ff9933; color: #fff; }

/*		Errors, Warnings, and Confirmations		*/
.successdiv { background: #e2fadb; border: 2px solid #96c289; color: #000;}
.warningdiv { background: #e2fadb; border: 2px solid #96c289; color: #000;}
.errordiv  { background: #f9e5d2; border: 2px solid #cc7f33; color: #000;}
.errorfield { background: #f9e5d2; border: 2px solid #cc7f33; }

/*		Link Text for Errors, Warnings, and Confirmations		*/
.successdiv>a, .warningdiv>a, .errordiv>a { color:#337ab7; }

/*		Input		*/
.form-control{}
.form-control:focus{}

/*		Account Management		*/
.panel-title>a {color: #000; text-decoration: none; display: block;}
.panel-title>a:hover {text-decoration: underline;}
.panel-default>.panel-heading{background-color: #FFFFFF;}
.panel-body{background-color: rgb(255,255,255,0.7);}
.panel-group{margin-bottom: 0px;}
.activityLabel{color:#000;}
.panel{background-color: transparent; color:#000;}
	/* For IE11 */
	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .panel-default>.panel-heading { background-color: #fff; } }
	/* For MS Edge */
	@supports (-ms-ime-align:auto) { .panel-default>.panel-heading { background-color: #fff; } }
	
#lblLoggedInAs,#lblLoggedInAsMobile{color:#000;}
#lblLoggedInAsMobile{display: none;}
#maintitle{margin-left: 2vw;}

/*		SSO Tiles		*/
#ssoSearch{width: 100%; padding-bottom: 0px !important;}
/*#SAMLSSOTabContent{display: flex; flex-wrap: wrap;justify-content: space-evenly; margin-top: 5px;}*/
.rpdiv:hover{box-shadow: 0 5px 15px 0 #777}

/* 2019-01-10 - Removed padding so tiles fit "3 per row" again */
#SSOContainer{
	background-color: rgba(235,235,235,1.0);
	border: 2px solid rgba(100,100,100,1.0);
	color:#FFF;
}

#sortedList>li.activeGroup {
	background-color: rgba(235,235,235,1.0);
	border: solid 2px rgba(100,100,100,1.0) !important;
	border-right: solid 2px rgba(235,235,235,1.0) !important;
	padding: 10px;
	font-weight: bold;
}
#currentActiveGroup{
	background-color: rgba(235,235,235,1.0);
	border: solid 2px rgba(100,100,100,1.0) !important;
	border-bottom: solid 2px rgba(235,235,235,1.0) !important;
}
.pgRP, .rpdiv {
	border: 2px solid #555;
	box-shadow: 0 5px 10px 0 #ccc;
	padding: 5px;
}

/*		Self-Registration Page		*/
div.container div.displaybox.col-md-8.col-md-offset-2{background-color: transparent;}

/*		Horizontal Rule Spacers for HelpDesk and Admin Dashboard		*/
hr {border-color: #EEE;}

/*		Help Desk Background		*/
.HelpDeskActions{
	background-color: rgba(255,255,255,1.0);  
	border-radius: 4px; 
	border: 2px solid #000; 
	padding: 20px;
}

/*		Admin Dashboard User Detail Lookup Utility		*/
#ReportBody{
	background-color: rgba(255,255,255,1.0); 
	border-radius: 4px; 
	border: 2px solid #000; 
	padding: 20px;
}
tr:nth-child(even) {
    background-color: rgba(0,0,0,0.1);
}
#UserProfileData, #NoUserSelected{
	background-color: rgba(255,255,255,1.0);
	border-radius: 4px; 
	border: 2px solid #000; 
	padding: 20px;
}
.sectionHeader{color: #000;}

/*	User Menu Text	*/
.usrMenuBtn{text-align: right;}
.usrMenuBtn:hover{cursor: pointer;}

#hidden, .hidden{display: none!important;}
#userMenu{ 
	width: fit-content;
	margin-left: auto;
}
#userMenuList{
	list-style: none; 
	padding: 10px 0px 0px 0px;
}
#userMenuList li, #userMenuList li a { background-color: transparent; color: #000;}
#userMenuList li:hover, #userMenuList li a:hover { color: #ed2127;}
.userMenuItem{padding: 0px 20px 0px 20px; font-size: 1.3em; display: inline-grid; grid-template-columns: 30px auto;}
.userMenuItem a{color: #fff; text-decoration: none;}
.userMenuItem a:hover,.userMenuItem a:focus {color: #fff;}
.userMenuItem i.fab, .userMenuItem i.fas {
	padding-top: 5px; 
	font-weight: 900!important;
}

#menuWrapper{
	padding: 5px;
}
/* #menuWrapper{
	display: revert;
	padding: 10px;
	background-color: rgba( 255, 255, 255, 0.5 );
	background-image: linear-gradient(rgba(255,255,255,1.0),rgba(200,200,200,1.0));
	border: 1px solid #828282;
	z-index: 1;
	-webkit-border-radius:  5px;
	   -moz-border-radius:  5px;
	        border-radius:  5px;
	-webkit-box-shadow: #4a5772 0px 0px 2px;
	   -moz-box-shadow: #4a5772 0px 0px 2px;
	        box-shadow: #4a5772 0px 0px 2px;
}
#menuWrapper:hover {
	-webkit-box-shadow: #4a5772 0px 0px 7px;
	   -moz-box-shadow: #4a5772 0px 0px 7px;
		    box-shadow: #4a5772 0px 0px 7px;
} */

/*	User Menu Popup	*/
#tippy-1>.tippy-box{
	background-color: rgba(255,255,255,1.0) !important; 
	box-shadow: 0px 10px 20px 0px rgba(26,26,29,.25); 
	border-radius: 10px;
}
#tippy-1>.tippy-box>.tippy-arrow{color: rgba(255,255,255,1.0) !important;}
.tac{text-align: center!important;}
.tal{text-align: left!important;}
.tar{text-align: right!important;}
.fr{float:right!important;}

/*	Footer	*/
#footerLogo{/*content:url('/_layouts/images/PG/images/bk.svg');*/ max-height:20px; }
#copyrightLogoContainer {order: 1; flex: 2;}
#footerHelp{order: 2; flex: 2;}
#copyrightTextContainer{order: 3; flex: 2;}

/*		Additional Custom CSS		*/

/*--- VCCCD BACKGROUNDS -- START ---*/
.back-1, 
.back-2,
.back-3,
.back-4,
.back-5 {
	height: auto;
	background: no-repeat top center;
	background-color: #BDD0E2;
	min-height: 100%;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
}
.back-1 {
	background-image: url('/vcccd-theme/images/bg-01.jpg')
}
.back-2 {
	background-image: url('/vcccd-theme/images/bg-02.jpg')
}
.back-3 {
	background-image: url('/vcccd-theme/images/bg-03.jpg')
}
.back-4 {
	background-image: url('/vcccd-theme/images/bg-04.jpg')
}
.back-5 {
	background-image: url('/vcccd-theme/images/bg-05.jpg')
}
@media (max-width: 992px) { /* resized for smaller file size versions of above images for mobile */
	.back-1 {
		background-image: url('/vcccd-theme/images/bg-01-small.jpg')
	}
	.back-2 {
		background-image: url('/vcccd-theme/images/bg-02-small.jpg')
	}
	.back-3 {
		background-image: url('/vcccd-theme/images/bg-03-small.jpg')
	}
	.back-4 {
		background-image: url('/vcccd-theme/images/bg-04-small.jpg')
	}
	.back-5 {
		background-image: url('/vcccd-theme/images/bg-05-small.jpg')
	}
}
/*--- VCCCD BACKGROUNDS -- END ---*/

/*----- VCCCD HEADER - Open -----*/
#vcccd-header {
	margin-top: 10px;
	margin-bottom: 10px;
}
#vcccd-header img.myvcccd-logo {
	width: 70%;
}
#vcccd-header img.myvcccd-logo-acctheader {
}
#vcccd-header .campus-logos {
	padding-top: 15px;
	margin: 0 auto;
    display: table;
    table-layout: fixed;
    width: 100%;
}
#vcccd-header .campus-logos ul {
    display: table-row;
    margin: 0;
    padding: 0;
}
#vcccd-header .campus-logos ul li {
    list-style: none;
    display: table-cell;
    text-align: center;
}
#vcccd-header .campus-logos ul li a {
    display: block;
}
#stHolder a,
#stHolder a:hover,
#stHolder a:visited {
	color :#1E252D!important;
	text-decoration: underline!important;
}
div.flexBreaker { width: 100%; } /* added div at end of header and set to 100% to break wrap in flex box */
/*----- VCCCD HEADER - Close -----*/

/*----- VCCCD MAIN - Open -----*/
.vcccd-main {
	display: block;
	margin-bottom: 25px;
	background-color: rgba( 255, 255, 255, 0.6 );
	z-index: 1;
	-webkit-border-radius:  5px;
	   -moz-border-radius:  5px;
	        border-radius:  5px;
	-webkit-box-shadow: #4a5772 0px 0px 20px;
	   -moz-box-shadow: #4a5772 0px 0px 20px;
	        box-shadow: #4a5772 0px 0px 20px;
	/* behavior: url(PIE.htc); */
}
.vcccd-main .pad {
	padding: 5px;
}
#SSForm .pad {
	padding: 15px;
}
.mainFlex {
	padding-top: unset;
	padding-bottom: unset;
}
#popup_SS .vcccd-main {
	background-color: rgba( 255, 255, 255, 0.8 );
}
#infoSS.popupInstructions { margin-top: 20px;}
.confDsp { margin-top: 5px; margin-bottom: 5px;}
/* highlights for login form and features */
#login-form, 
#feature-options .feature {
	display: block;
	background-color: transparent;
	padding: 10px;
}
#login-form:hover,
#feature-options .feature:hover,
.vcccd-main .logout-wrapper /* logout page */ {
	background-color: rgba(255,255,255,0.50);
	-webkit-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.35);
	   -moz-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.35);
	        box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.35);
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
}
#login-form form {
	margin: 0px;
}

/* login form */
#login-form ul {
	margin: 0 0;
	padding: 0 0;
}
#login-form ul li {
	list-style: none;
	display: block;
	margin-top: 15px;
}
#login-form ul li:first-child {margin-top: 0px }
#login-form label { /* input labels */
	font-size: 16px; 
	color: #444;
}
#login-form .login-button-wrap {
	float: left;
}
#login-form .help-links {
	float: right;
}
#login-form #infoLogin.popupInstructions {
	margin-bottom: 0px; /* override PG style of 20px */
}
input#mv_login_btn {
    float: left;
    padding: 2px 25px;
	margin-top: 5px;
    border-radius: 50px;
    border: 1px solid #FF7D00;
    box-shadow: 0 0px 5px 0 #000;
    background-color: #FF7D00;
    background-image: linear-gradient(#FFDFB4 0%,#FFB04E 25%, #FF7B00 60%, #FF6800 66%);
    color: #000;
	font-weight: bold;
    font-size: 16px;
}
input#mv_login_btn:hover {
	box-shadow: 0 0px 7px 0 #000;
	background-image: linear-gradient(#FFEACE 0%,#FFB75F 25%,#FF8D1F 60%,#FF6E0C 66%);
}

/* feature blocks */
#feature-options .feature {
	text-decoration: none;
}
#feature-options .feature h3,
#feature-options .feature p { /* padding left for text so icon is shown */
	padding-left: 60px;
}
#feature-options .feature h3 { /* feature title */
	padding-bottom: 0px;
	margin-bottom: 0px;
	font-size: 16px;
	color: black;
	font-weight: bold;
	line-height: 25px;
}
#login-form .help-link,
#feature-options .feature p {
	font-size: 12px;
	text-decoration: none;
	color: rgba(195,0,0,1.00);
}
#feature-options .feature p { /* feature help text */
	visibility: hidden; /* hide initially. use visibilty so we can keep the block */
}
#login-form .help-link:hover,
#feature-options .feature:hover p {
	visibility: visible; /* solid */
	text-decoration: underline;
}
/* feature icons */
.feature-icon-signup,
.feature-icon-login-help,
.feature-icon-student-support,
.feature-icon-faculty-support {
	background-position: 10px 10px;
	background-repeat: no-repeat;
}
.feature-icon-signup { background-image: url(/vcccd-theme/images/icon-signup.png); /* sign up */ }
.feature-icon-login-help { background-image: url(/vcccd-theme/images/icon-login-help.png); /* sign up help */ }
.feature-icon-student-support {	background-image: url(/vcccd-theme/images/icon-student-support.png); /* student support */ }
.feature-icon-faculty-support { background-image: url(/vcccd-theme/images/icon-faculty-support.png); /* faculty support */ }

/* logout page main */
.vcccd-main .logout-wrapper {
	padding: 50px;
	text-align: center;
}
/* error.aspx page */
.errorPageContainer {margin-top: 10%;}
/*----- VCCCD MAIN - Close -----*/

/*----- VCCCD FOOTER - Open -----*/
#footer {
	color: #FFF;
	margin: 15px auto 40px auto;
}
#footer .footer-text {
	text-align: center;
	text-shadow: 2px 2px 2px #000;
}
/*----- VCCCD  FOOTER - Close -----*/

/*----- VCCCD MODALS - Open -----*/
.modal h3 { /* modal titles */
	font-size: 21px;
	font-weight: normal;
}
.modal a {
	color: #337ab7;
}
.modal .troubleshootInfo { /* user troubleshoot info */
	font-size: 80%;
	padding: 5px;
	background-color: #EEE;
	-webkit-border-radius: 5px 5px 5px 5px;
       -moz-border-radius: 5px 5px 5px 5px;
	        border-radius: 5px 5px 5px 5px;
}
.modal .troubleshootInfo > div:first-child {
	font-weight: bold;
	border-bottom: 1px solid #DDD;
}
.modal .troubleshootInfo ul { 
	margin: 0;
	padding: 0;
}
.modal .troubleshootInfo ul li {
	list-style: none;
	display: block;
	float: left;
	width: 50%;
}
.modal-dialog { /* vertically center modal */
	top:50% !important;
	transform: translate(0, -50%) !important;
	    -ms-transform: translate(0, -50%) !important;
	-webkit-transform: translate(0, -50%) !important;
	
}
#modal_forgotUsername iframe {
	min-width: 340px; 
	min-height: 370px; 
	width: 100%; 
	height: 100%;
}
/*----- VCCCD MODALS - Close -----*/

/*----- VCCCD PANELS - Open -----*/
div.vcccd.panel-group .panel-title>a {
	font-weight: normal; 
	color: #000;
	line-height: normal;
}
div.vcccd.panel-group .panel-info>.panel-heading {

}
div.vcccd.panel-group .panel-default>.panel-heading {
	background-color: #F5F5F5;
}
div.vcccd.panel-group .panel-body{
	padding: 10px 15px 10px 15px;
}
/*----- VCCCD PANELS - Close -----*/

body.vcccd-fade {
	/*background-color: rgba(255,255,255,0.2);*/
	background-image: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.0));
}
.badPwRegexChars {
	font-weight: bold;
	background: #f9e5d2;
	border: 2px solid #cc7f33;
	width: 100%;
	display: block;
	border-radius: 5px;
	padding: 15px;
	text-align: center;
}
.headerMyVCCCDLink {
	text-align: right;
	padding: 5px;
}

/*		End Additional Custom CSS		*/

/*	Media Queries	*/
@media all and (min-width: 320px) {
	#login{margin-top: 0px;}
}
@media all and (max-width: 800px) {
	.branded-footer{margin-top:25px;}
}
@media all and (max-width: 600px) {
	/*#maintitle{display:none;}*/
	#searchBarDiv>input{width: 100%;}
	.deleteLink{float: left!important;padding-right: 0px!important;}
}
@media all and (max-width:768px){
	#copyrightLogoContainer, #footerHelp, #copyrightTextContainer{flex:7 1 100%;}
	.opaque{}
	#lblLoggedInAs{}
	#lblLoggedInAsMobile{display: inline-block;}
	
	/* 2021-02-16: Don't apply the larger width to mobile */
	.logonbox{background-color: transparent; border-radius:10px; width: auto;}
	.popupWin {background-color:transparent;z-index:1; margin-top: 0px;}
	.secondaryWrapper{width: 330px;}
	.popFieldsContainer{}	/* 2021-02-19: So fields on mobile use full width */

	/* vcccd */
	.modal .troubleshootInfo ul li {
		float: none;
	}
	.container {
		flex: auto;
		padding-left: 5px;
		padding-right: 5px;
		width: 100%;
	}
	.vcccd-loggedinas { display: none; }
}
/* VCCCD */
/* Medium devices (tablets, 768px and up) */
@media ( min-width:768px ){
	#vcccd-header {
		padding-top: 15px; /* margin above header */
		padding-bottom: 10px;
	}
	#vcccd-header img.myvcccd-logo {
		margin-left: 0;
		width: auto;
	}
	.vcccd-main .pad {
		padding: 10px;
	}
	#footer .footer-text {
		text-align: left;
		padding-left: 15px;
	}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	#vcccd-header .campus-logos {
	    width: 80%;
	}
}

li[aria-expanded=true] { pointer-events: none; }
#ssoGroupCreationHelp { margin-bottom: 0; }
.ssoGroupName { min-width: 200px; }

/* terms of service */
#popup_TOU .vcccd-main {
	background-color: white;
}
#popup_TOU .customTOUHTML {
	padding: 10px;
}
#popup_TOU .content-box-scroll {
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;  
	height: 200px;
	background-color: #FAFAFA;
	border: 2px solid #AAA;
	padding: 5px;
}
@media ( min-width:768px ) {
	#popup_TOU .content-box-scroll {  
		height: 400px;
	}
}
#popup_TOU .information{
	font-size: smaller;
}
#popup_TOU .information h1 {
	font-size: 18px;
	font-weight: bold;
}
#popup_TOU .information h2 {
	font-size: 16px;
	font-weight: bold;
}
#popup_TOU .information h3 {
	font-size: 14px;
	font-weight: bold;
}
#popup_TOU .printable {
	text-align: right; 
	font-size: 11px;
}