:root {
	--color-vcccd-main: #0A5D66;
	--color-vcccd-accent: #3DC2D1;
	--color-vcccd-tertiary: #3A3A3A;

	--border-radius-base: 9999px;
	--border-width: 2px;

	--alert-success: #32D2A4;
	--alert-success-border: rgb(155, 235, 153);
	--alert-success-text: #FFFFFF;

	--alert-warning: #FFB347;
	--alert-warning-border: #ffc97e;
	--alert-warning-text: #FFFFFF;

	--alert-error: #FF6B6B;
	--alert-error-border: rgb(255, 162, 162);
	--alert-error-field: #FFFFFF;
	--alert-error-field-glow: rgba(255, 125, 125, 0.7);
	--alert-error-text: #FFFFFF;

	/*--alert-info-bg: #6EC1E4; 
	--alert-text: #fff; */

	--btn: #FFFFFF;
	--btn-border: #0A5D66;
	--btn-border-weight: 2px;
	--btn-hover: #0A5D66;
	--btn-disabled: #808080;

	--header-height: 40px;
}


/*	Fonts	*/
@font-face {
    font-family: 'Montserrat';
    src: url('/_layouts/images/PG/fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/_layouts/images/PG/fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: bold;
}


html { margin-left: calc(100vw - 100%); }
/*		Main Body Text		*/
html, body {
	font-family: 'Montserrat'!important; 
	color: #000; 
	background-color: #000; 
	background: url('/_layouts/images/PG/images/vcccd-bg-03.svg') no-repeat center center fixed; 
	background-size: cover;
}

/*		Box Shadows		*/
.shadow{
	-webkit-box-shadow: 0px 0px 5px 4px rgba(133,133,133,0.5);
	-moz-box-shadow: 0px 0px 5px 4px rgba(133,133,133,0.5);
	box-shadow: 0px 0px 5px 4px rgba(133,133,133,0.5);
}

/*		For Solid/Semi-transparent Backgrounds on HD, Dashboard, SSO, and Acct Mgmt Pages		*/
.opaque, .hdOpaque{background-color: transparent; padding-bottom: 20px; /*margin-top: 50px;*/align-self: flex-start; min-height: 85%;}

/*		Link Text		*/
a{color: #337ab7;}
a:focus, a:hover, .deleteLink:focus, .deleteLink:hover{color:#23527c;}
#userMenuList>li>a{color: #fff;}
#userMenuList>li>a:hover{color: #ddd;}

/*		Login Box Background		*/
.logonbox{background-color: transparent; width: 400px;} /* 2021-02-04: Ensure long errors do not stretch the error div */
#login{background-color:transparent; width: 100vw;}

/*		Self-Service Dialogue Box Backgrounds		*/
#popup_OTPResend{background-color: #eee;}
.popupWin {background-color:transparent;z-index:1; width: 400px;} /*2021-02-04: Same as above, fixed width */
.popFieldsContainer{width: 400px;}	/* 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{border: 1px solid #cbd6e2 !important; border-radius: var(--border-radius-base); padding: 8px 12px; height: auto;}
.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; width: 100%;}
.dlghdr h1, .dlghdr h2 {color: #000;}

.loginHdr{background-color: transparent;}

/*		Labels & Legends		*/
label{color: #000;}
legend, #SSActionChosen>span{color: #000;}
#sortedList>.PGButton{color:#000;}
#maintitle{color: #000;}

/*		Buttons		*/
.PGButton {
	background-color: var(--btn);
	color: #000;
	border-radius: var(--border-radius-base);
    border: var(--btn-border-weight) solid var(--btn-border);
}

.PGButton:hover, .PGButton:focus {
	color:#FFF;
    background-color: var(--btn-hover);
    box-shadow: 0 10px 30px 0 rgba(165,160,160,0.32);
	border: var(--btn-border-weight) solid var(--btn-border);
}
.PGButtonDisabled { background-color: var(--btn-default-bg); color:#808080; border: var(--btn-border-weight) solid var(--btn-disabled); }
.PGButtonDisabled:hover { color:#808080; }
.PGButtonDisabled:focus { color:#808080; }

.PGAltButton { background-color:#ff8000; }
.PGAltButton:hover { background-color: #ff9933; color: #fff; }

/*		Errors, Warnings, and Confirmations		*/
.successdiv { background: var(--alert-success); border: var(--border-width) solid var(--alert-success-border); color: var(--alert-success-text);}
.warningdiv { background: var(--alert-warning); border: var(--border-width) solid var(--alert-warning-border); color: var(--alert-warning-text);}
.errordiv  { background: var(--alert-error); border: var(--border-width) solid var(--alert-error-border); color: var(--alert-error-text);}
.errorfield { background: var(--alert-error-field); border: 2px solid #f00;}
.errorfield:focus {box-shadow: 0 0 6px 2px var(--alert-error-field-glow);}

/*		Link Text for Errors, Warnings, and Confirmations		*/
.successdiv>a, .warningdiv>a, .errordiv>a { color:#337ab7; }

/*		Input		*/
.form-control{border: 2px solid #ccc;}
.form-control:focus{border-color: #66afe9;}

/*		Account Management		*/
.panel-title>a {color: #000;}
.panel-heading{background-color:rgba(26,26,29,.02)!important;}
.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;}

/*		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 12px 20px 0 #ed212787;}

/* 2019-01-10 - Removed padding so tiles fit "3 per row" again */
#SSOContainer{background-color: #fff;color:#FFF;}

/*		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: transparent; border-radius: 4px; border: 2px solid #000; padding: 20px;}

/*		Admin Dashboard User Detail Lookup Utility		*/
#ReportBody{/*background-color: rgba(51,51,51,0.5);*/ 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(51,51,51,0.5);*/ border-radius: 4px; border: 2px solid #000; padding: 20px;}	/*	Uncomment to add transparent background to User Detail Lookup */
.sectionHeader{color: #000;}

/*	User Menu Text	*/
.usrMenuBtn{text-align: center;}
.usrMenuBtn:hover{cursor: pointer;}

#hidden, .hidden{display: none!important;}
#userMenu{margin-right: 25px;}
#userMenuList>li>a{color: #fff;text-decoration: none;}
#userMenuList>li>a:hover{color: #ddd; background-color: transparent!important;}
#userMenuList{list-style: none; padding: 10px 0px 10px 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.5em; display: inline-grid; grid-template-columns: 50px auto;}
.userMenuItem a{color: #fff; text-decoration: none;}
.userMenuItem a:hover,.userMenuItem a:focus {color: #fff;}
  
#menuWrapper{margin-top: auto; margin-bottom: auto; margin-right: 5vw;}

/*	User Menu Popup	*/
.tippy-content{padding: 0px 0px 0px 0px !important;}
#tippy-1>.tippy-box{background-color: #fff!important; box-shadow: 0px 24px 56px -8px rgba(26,26,29,.16); border-radius: 10px;}
#tippy-1>.tippy-box>.tippy-arrow{color: #fff!important;}
.tac{text-align: center!important;}
.tal{text-align: left!important;}
.tar{text-align: right!important;}
.fr{float:right!important;}
.userMenuWrapper{display: flex; align-items: center;}

/*	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		*/

/*		End Additional Custom CSS		*/

/*	Media Queries	*/
@media all and (min-width: 320px) {
	#login{margin-top: 0px;}
}
@media screen and (max-width:480px){
	#menuWrapper{margin-right: 0px!important;}
	#userMenu{margin-right: 5px!important;}
}
@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{margin-top:50px;}*/
	#menuWrapper{margin-right: 2.5vw;}
	#lblLoggedInAs{display: none;}
	#lblLoggedInAsMobile{display: inline-block;}
	
	/* 2021-02-16: Don't apply the larger width to mobile */
	.logonbox{background-color: transparent; border-radius:10px; width: 330px;}
	.popupWin {background-color:transparent;z-index:1; margin-top: 0px; width: 330px;}
	.secondaryWrapper{width: 330px;}
	.popFieldsContainer{width: 330px;}	/* 2021-02-19: So fields on mobile use full width */
}

li[aria-expanded=true] { pointer-events: none; }
#ssoGroupCreationHelp { margin-bottom: 0; }
.ssoGroupName { min-width: 200px; }

/* Export Report - Admin Dashboard */
#btnExportReport { display: none;}


/*  Start VCCCD Custom CSS  */

.logo-container {
	border-top: solid 5px rgb(61,194,209);
	/* background-color: var(--color-vcccd-tertiary); */
	background-color: transparent;
	box-shadow: none;
}
.logo-container #BrandedLogo {
	max-height: 40px;
}
#lblMainFormTitle {
	margin: 0 0; /* reset space around logo */
	padding: 0 0;
}
#loginHeader .campus-logos {
	max-height: var(--header-height);
	width: 200px;
}
#loginHeader #CampusLogoImg{
	max-height: 32px;
	margin-top: 9px;
}
@media all and (max-width:768px){
	#stMesg>#alert,
	#stHolder>#statusAlert {
		width: 330px;
	}
	/* center header logo just for login page */
	#loginHeader .branded-logo {
		margin-left: 0; 
		flex: none;
	}
	#loginHeader .campus-logos {
		display: none;
	}
}

.branded-footer {
    background-color: var(--color-vcccd-tertiary);
    background-image: url("/_layouts/images/PG/images/new-vcccd-logo-footer.png");
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: bottom -30px right -20px; /* Position in bottom right */
    background-size: contain;
    height: 12em;
    border-top: solid 5px var(--color-vcccd-accent);
    color: rgb(255,255,255);
	text-align: left
}
.branded-footer a {
	color: rgb(255,255,255);
}
.branded-footer #footer-copyright { justify-content: left; }
.branded-footer .vcccdCopyright {
	margin: 1.5em 6.5em 1.5em 1.5em;
}
.vcccdCopyright {
	font-size: 90%;
}
#popup_VCCCDForgotUsername iframe {
	min-width: 340px; 
	min-height: 300px; 
	width: 100%; 
	height: 100%;
}

#popup_VCCCDSignUp .panel-title>a {
	text-decoration: none;
	font-weight: normal;
	display: block;
}
#popup_VCCCDSignUp .panel-body,
#popup_VCCCDGetHelp .panel-body {
	background-color: rgb(255,255,255);
	padding: 10px 15px 10px 15px;
}
#popup_VCCCDSignUp .panel-default>.panel-heading,
#popup_VCCCDGetHelp .panel-default>.panel-heading {
    background-color: #f5f5f5 !important;
}
#popup_VCCCDGetHelp .panel-default>.panel-heading {
	font-weight: bold;
}
#popup_VCCCDSignUp .panel-success>.panel-heading,
#popup_VCCCDGetHelp .panel-success>.panel-heading {
    background-color: #dff0d8 !important;
}
h2#lblVCCCDSignUp,
h2#lblVCCCDGetHelp {
	margin-bottom: 20px;
}

#stMesg,
#stHolder {
	width: 100vw;
}
#stMesg>#alert,
#stHolder>#statusAlert {
	margin: 10px auto 0px;
}
#stMesg>#alert,
#stHolder>#statusAlert {
	width: 400px;
}
@media all and (max-width:768px){
	#stMesg>#alert,
	#stHolder>#statusAlert {
		width: 330px;
	}
}

#popup_TOU .customTOUHTML {
	padding: 10px;
}
#popup_TOU .content-box-scroll {
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;  
	height: 300px;
	background-color: #FAFAFA;
	border: 2px solid #AAA;
	padding: 5px 5px;
	font-size: 70%;
}
#popup_TOU .printable {
	padding: 5px 0px;
}
#SelfServiceLinks.mainFlex {
	padding: 0px 0px 5px 0px;
	font-size: 90%;
}
#AdditionalLinks {
	text-align: center;
	padding: 15px 0px;
}
#AdditionalLinks > div {
	padding: 3px 0px;
}
/*  End VCCCD Custom CSS  */