/*-----------------------------------------------------*/
/*            CSS for the KHESLC Servicing site        */
/*              Sanaa Ahmad - May 2017                 */
/*	+ add class 'display-block' instead of adding 	   */											   */
/*	  <br/> tags to force text to display on next line */	
/*													   */
/*	+ class "phone" is to display phone numbers on     */ 
/*		desktop. Class "phone-m" to display on mobile  */
/*-----------------------------------------------------*/

@viewport{zoom:1.0; width: extend-to-zoom;}
html {-webkit-text-size-adjust: 100%; }
#page_content .ui-widget-content, .ui-widget-content {border:none;}
.homepage-body {height:100%;padding:0px; margin:0px;}
#page_wrap {float:left;}

body {
	min-width:350px;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:82%;  
	line-height:1.2;
	margin:0px;
	color:#202121;
}

body #page_content .ui-widget {font-family:Verdana, Arial, Helvetica, sans-serif;}
body #page_content .ui-messages-warn {background: #ffe399;}
.innerpages-body, .terminalpages-body, .innerpages-body {
	display:flex;  /* read https://css-tricks.com/snippets/css/a-guide-to-flexbox/*/
	flex-direction:column;
	min-height:100%;
	min-height:100vh;  /*caused page not to display correctly after adding the new footer section, on the iPads - for longer pages, a box of height 100vh is showing as a background  */
	} /* vh =1/100 of the viewport height */
#page_gutter {clear:both;}
.desktop {display:none;}
.desktop-inline {display:none;}
#getinfo_mobile_wrap {display:flex;}
.mobile {display:block;}
.mobile-inline {display:inline;}
.clear {clear:both;}
.default {cursor:default;}
form .clear, .noheight-clear {clear:both; height:0px;}
.hide {display:none;}
.bold {font-weight:bold;}
.red {color:#ff0000;}
.small-text {font-size:11px;}
.section .section-main-content .sub-title {color:#247c7f;margin-bottom:.3em;}
.zeroMargin {margin:0px;}
.zero-top-margin {margin-top:0px;}
#body .add-top-margin {margin-top:1em;}
#body .less-margin {margin-top:.5em;}
.add-topPadding {padding-top:1em;}
.less-padding {padding-top:.5em;}
.super {vertical-align:super;font-size:85%;}
.main-content {flex:1 0 auto;} /* white space will be part of the content and footer doesn't move up */ 
.site-header, .site-footer {flex-shrink:0;} 
body img {border:none;}
.hidden { /* screen readers do not read display:none */
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}
ol ul {list-style-type: disc;}
/* adding font-weight as ie is not displaying them bolded */
#page_content h1.top_title {margin-top: 1em;font-size: 1.22em;font-weight:bold;}
h2 {font-size:1.07em;color:#5d3e7b;font-weight:bold;}
h3 {font-size:1em;color:#54315c;font-weight:bold;}
h4 {color:#FAA31E;font-weight:bold;}
h5 {font-weight:bold;}
#navBar ul, #navBar li, a  {margin: 0; padding: 0;}
#navBar ul {list-style:none; width:100%;} 
a {text-decoration: none;}
.display-block {display:block;}  /*add this class instead of using <br/> to move text to next line */
#nav .display-block {margin-top:0px;}
.ie-picture {display:none;} 
.date-layout {display: flex; align-items: center;}
.date-layout > span {display: flex; width: 100%; max-width: 300px;}
.date-layout > span input {width: 100%;}
#pnl_accord_pay\:main_form\:tab_view\:schedule_panel .date-layout > span input {width: 100%;}
#ibrWebForm .date-layout > p {margin: 0;}
.date-format {display: inline-block; margin: 0 0 0 10px;}

/* forms submit buttons */
#page_content .blue-buttons, #page_content .epic-buttons {
    background: #3b579d;
    border: 1px solid #3b579d;
    text-shadow: none;
    font-weight: normal;
    color: #fff;
    box-shadow: none;
    margin-right: .3em;
    font-size:90%;
}
#page_content .red-buttons {
	background: #c5390e;
    border: 1px solid #c5390e;
    text-shadow: none;
    font-weight: normal;
    color: #fff;
    box-shadow: none;
    margin-right: .3em;
    font-size:90%;
}
#page_content .text-area {border:1px solid #ccc;}

/*----------------Background and text colors------------------- */
body .ui-widget-content {color: #000000;}
#footer {background:#003399;font-size:1.2em;}
#footer, #navBar li a {color:#FFF;}
.white {color:#fff;}
/*----------------------end of colors style--------------------- */

/* ---------------------Header style begins -------------------- */
#kheslcLogo_m {margin-top:.5em;}
#lastLoginClear {height:.5em;}
#lastSignI  n {color:#375a7e;}
.header-wrap {width:100%;margin-left:auto;margin-right:auto;position:relative;float:left;}
.header-wrap::after,.section_inner::after {clear:both;content:""}
#header {clear: both;/* float: left;*/ width: 100%; margin: 0; padding: 0;}
#whiteHeader {float:left; width:100%; min-height:3em;}
.whiteHeader-right {float:right; margin-top: 1em;}
#mobile_header_bar {background-color:#8C9EC5;width:100%;clear:left; border-radius:0px;}
#logo {padding:.5em 0px .3em .5em; float:left;}
#header_blue_bar { min-height:2.3em;}
#header_blue_bar {float: left; width: 100%;background: #003399;border-bottom: 1px solid #47477c; border-radius:0px;}
#header_blue_bar_content {display: flex; align-items: center; justify-content: flex-end;}
#desktop-search-field {border:1px solid #CCC;}
#rightHeader #acctIdLbl {font-size:90%;margin-left:3em;color:#375a7e;margin-bottom:0.3em;}
#phoneNumLbl div {clear: both; padding: .3em 0 0 1em; color: #375a7e; font-size: 90%;}
#loginPageContainer\:signInMain_error button {display: block; margin-top: 1em;}
#loginPageContainer\:signInMain_error_content {padding: 0 1em 1.5em;}
#loginPageContainer\:signInMain_error .ui-dialog-titlebar {padding: 0 0 1em 0; margin: 1em 1em 0;}
#page_content .floatRight {float:right;}
.whiteHeader-right #search .cse .gsc-control-cse,.whiteHeader-right #search .gsc-control-cse { padding:0px; background-color:transparent;border:none; }
.whiteHeader-right #search .gsc-control-cse table.gsc-search-box {width: 40%; float:right;background-color:#FFF; display:none;}
.search-form {position:relative;}
.search-sec {margin-top:.3em;}
#search-button, #desktop-search-button {padding:5px 5px 1px; cursor:pointer; background:white;float:left; border:none; } 

.desktop #desktop-search-field {
	background: url(../resources/images/searchicon.png) 1.5% 60% no-repeat #fff;
	height: 1.6em; 
	padding-left:1.9em; 
	margin-right:1em;
	-webkit-transition: width .35s ease-in-out;
  	transition: width .35s ease-in-out;
  	float:left; 
  	border:none; 
  	background-color:#FFF;
  	font-size:16px;
  	border: 1px solid #ccc;
    border-radius: 5px;
    font-size:93%;
}

.mobile .search-box .mobile-search-field {
    background: url(../resources/images/searchicon_m.png) no-repeat #fff;
    width: 72%;
    -webkit-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;
    transition: left 2s;
    height: auto;
    border-radius: 4px;
    border: 1px solid #8c9ec5;
    background-position: 3% 50%;
    font-size: 16px;
    float: right;
    margin-right:5px;
    font-size:93%;
    padding:3px 5px 3px 28px;
}

/* Prevent zoom when selecting a text input on mobile, specifically when logging in */
.ui-widget input[type='text'],
.ui-widget input[type='password'],
.ui-widget textarea,
input[type='text'],
input[type='password'],
textarea {
  font-size: 16px;
}

/* style site links and phone links */
.tabs-forms .ui-widget-content a.tab-links, a.tab-links, #page_content .tab-links,
.tabs-forms .ui-widget-content a.panel-links, a.panel-links {color:#0000cc; text-decoration:underline;}
.ui-widget-content .phone-links {color:#0000cc;}
/* ----------------------------- Header Style Ends --------------------------- */

/* Content area styles begin */
.main-content {position:relative; clear:both; float:left; width:100%; background:#fff;}
.home-main {float:left; width:100%;}
.page-wrap {width:100%;	height:100%;float:left;}
.section {clear: both;float: left; width: 100%; margin: 0; padding: 0;}
.section .desktop img {display: block; margin-left: auto; margin-right: auto; width:100%; height:auto;}
body #header #navBar  #nav .firstLevelNav ul li a {font-size:100%; font-weight:bold;}
#navBar #nav .nav-heading {font-size:92%;}
#intImg img {min-height:165px;}

#navBar #nav .nav-heading, #navBar li li a {font-weight:bold;}
/* ---------- Content area styles end ------------- */

/* ---------- alert/messages section Styles begins ----------- */
#alert_para {padding-left:2.8em;}
#msg_area\:alert_home{
	width:96%; 
	color:#333;
	opacity:.85; 
	font-size:80%; 
	font-weight:bold; 
	z-index:3; 
	margin:.5em 2% .5em;
	text-align:left;
	background-color:#e8e8e8;
	display: flex;
}
#msg_area\:alert_home_content {
	width:100%; 
	position: relative;
}
#sessionWarning,
#sessionWarningContainer {
	z-index: 1100;
	opacity: .9;
	background: #c3c3c3;
  	height: 100%;
  	padding: 0px;
}
#sessionWarningContainer {
	display: flex;
  	justify-content: center;
  	flex-direction: column;
  	align-items: center;
}
#sessionWarningContainer span {
	display: block;
	margin: 6%;
	text-align: center;
}
#sessionWarningContainer button {
	background: #3b579d;
    border: 1px solid #3b579d;
    text-shadow: none;
    font-weight: normal;
    color: #fff;
    box-shadow: none;
    margin-right: .3em;
    font-size:150%;
    width: 25%;
}
/* ---------- alert/messages section Styles ends ---------- */

/********* mobile homepage style begins *************/
.header #logo_m {margin: .3em 0em 0em .2em; float:left;}
#kheslcLogo, #kheslcLogo_img {margin-left:1em;}
#logo {width:45%;}
#nav_m { margin-bottom: 10%; text-align:center; margin-left:auto; margin-right:auto;}
#rightSide, #leftSide {margin:auto;}
/******** mobile homepage style ends ***************/

/**************************** main pages style ends ****************************/

/********* CSS Override primefaces styles begins *********/
body .ui-panel, body .ui-panel .ui-panel-content {background:none;padding:0;margin:0;margin:0;padding:0;border:none;}
.icon {margin-right:5px;vertical-align:middle;}
/********* CSS Override primefaces styles ends *********/

/******* Media Queries ************/
@media only screen and (max-width: 39.938em) { /* 639px - mobile only styles */ 
	#navBar {font-weight:bold;}
	#noImage {margin-top:0;}
	body #header #navBar #nav .firstLevelNav .nav-heading span,
	body #header #navBar #nav .firstLevelNav a {font-size:1em;}
	.firstLevelNav {width:25%;}
}
@media only screen and (max-width: 37.438em) { /* 599px */
	#nav .firstLevelNav .desktop {display:none;}
	#lastSignIn {margin-left:2em;}
}
@media only screen and (max-width: 25.938em) { /* 415px */
	#nav li ul li .navheader-sub {font-size:102%;}
	#navBar > ul > li {display: table-cell;}
}

/********** media queries handling minimum width - start with the less and go up ************/

@media screen and (min-width: 37.5em) { /* min-width:600px */
	#login_btn_wrap {margin-top: 7px;}
	#header_blue_bar { min-height:2.5em;}
	.mobile {display:none;}
	.desktop {display:block;} 
	.desktop-inline {display:inline;}
	.mobile-inline {display:none;}
	.search-field {display:block;}
	#page_content #nav li:not(:first-child) .submenu{margin-left:-20%;}
	#nav li .submenu li a {width:110%;}
	#msg_area\:alert_home {position:absolute;} 
	body {font-weight:300; font-size:14px;}
	#my_profile {margin-top:0px;}
	*::-ms-backdrop, #msg_area\:alert_home {top:8.5%;}
	*::-ms-backdrop, #page_content #nav li:not(:first-child) .submenu{margin-left:-20%;}
	.phone {visibility:visible;}
	.phone-m {display:none;}
	#header_blue_bar button.btn-signin {margin-top:8px;}
	.whiteHeader-right {margin-top: .8em;}
	#rightHeader #acctIdLbl {margin-left:1em;}
	#page_content #nav li span.topnav-text {padding: 4% 2%;}
}
@media screen and (min-width: 600px) {
	#getinfo_mobile_wrap {display:none;}
}

@media only screen and (min-width: 43.750em) { /* 700px */
	#sec-content {padding:1% 2% 1% 3%; }
	*::-ms-backdrop, body #page_content #navBar li ul.submenu {top:auto;}
	#page_content #nav li:not(:first-child):not(:last-child) .submenu{margin-left:-15%;}
	#page_content #getNav #navBar #nav li.last .submenu {right:29%;}
	*::-ms-backdrop, #page_content #nav .submenu{margin-top:0%;}
	#rightHeader {padding-right:.5em;}
}

@media screen and (min-width: 800px){
	.whiteHeader-right { float: right;  margin-top: 1%;}
	#page_content #not_dflted #notDflt_left, #page_content #dflted_left {width:32%;float:left;}
	#page_content #not_dflted #notDflt_right, #page_content #dflted_right {float:left; width:40%}
	#enrollTerms {margin-left:1em;}
	#page_content #nav li span.topnav-text {padding: 3% 2%;}
	#whiteHeader {padding:.5em 0;}
}
@media screen and (min-width: 860px){
	*::-ms-backdrop, #homePicture {display:block;}
	*::-ms-backdrop, .ie-picture {display:none;}
	#homePicture {display:block;}
	.ie-picture {display:none;}
}
@media only screen and (min-width: 53.125em) { /* 850px */
	#msg_area\:alert_home {/* top:11%  */;position:absolute;}
	#navBar li li a {font-size:95%;}
	#navBar li li a { font-weight:bold;}
	*::-ms-backdrop, #msg_area\:alert_home {top:8%;} 
	#nav div.nav-heading {font-size:1.12em;}
}

@media only screen and (min-width: 900px){
	*::-ms-backdrop, #page_content #nav #communicate_title {padding:0;}
	#page_content #nav .nav-heading {font-size:1.17em;}
}

@media screen and (min-width: 700px) and (max-width: 950px) { 
	*::-ms-backdrop, #page_content #nav div:not(#communicate_title) {padding:0 20%;}
}

@media screen and (min-width: 600px) and (max-width:700px){	
	body #header #navBar #nav .firstLevelnav div.nav-heading span {font-size:1em;}
	#nav li .submenu li a {width:120%; /*font-size:1.2em;*/}
	#nav li:last-child .submenu li {margin-left:-25%}
	*::-ms-backdrop, #page_content #nav div#communicate_title {font-size:93%;padding:0%;}
}

@media screen and (min-width: 600px) and (max-width:860px){	
	*::-ms-backdrop, #homePicture {display:none;}
	*::-ms-backdrop, .ie-picture {display:block;}
	#homePicture {display:none;}
	#home_image .ie-picture {display:block;}
	*::-ms-backdrop, body .not-ie {display:none;}
}

@media screen and (max-width:700px){
	*::-ms-backdrop, #page_content #nav .firstLevelNav div:not(#communicate_title) {padding:0 15%;}
	#getNav #navBar #nav #communicate {width:25%;}
}

@media screen and (max-width: 600px){
	#page_content #nav .desktop {display:none;}
	#nav #genInfo {display:none;}
	.search-field {display:none;}
	#sec-content {padding-left:2.5%;}
	.top_title {padding-top:.1em;}
	.filler {height:3em;}
	#nav_m {margin-top:2em;}
	#page_content .ui-tabs-top .ui-tabs-nav li{width:98%;}
	*::-ms-backdrop, #page_content #nav .submenu {margin-top:2%;}
	.phone-m {visibility:visible;}
	.phone {display:none;}
/* 	#page_content #nav li span.topnav-text {padding: 5% 1px;} */
	#nav li .topnav-text:nth-child(1) {margin-left:-1em;}
}

@media screen and (max-width:430px){
	*::-ms-backdrop, #page_content #nav .firstLevelNav div {padding:1%;}
	#getNav #navBar #nav #communicate {width:28%;}
}

@media screen and (max-width:395px){
	#page_content #navBar #nav li div, #page_content #navBar #nav .nav-heading {font-size:85%;}
}

/*IE on my machine leaves white space if keep display:flex property on body tag */
 *::-ms-backdrop, body.homepage-body {flex:none;display:block;}
 *::-ms-backdrop, body.terminalpages-body, *::-ms-backdrop, body.innerpages-body {display:flex;flex-direction:column; min-height:100%; /*height:100vh;*/}
 *::-ms-backdrop, .header #whiteHeader #logo {padding-top:5px;padding-bottom:2px;}
 *::-ms-backdrop, .hide-icon {margin-bottom:.5em;margin-top:.5em;}
 *::-ms-backdrop, body.homepage-body .blueHeader #search {margin:.3em .5em;}

/*************************************/
#login_btn_wrap {order: 2; float:right; margin-right:5px;margin-left:.5em;}
#logout {float: right;margin-right:5px;}

/***************** CSS for servicing site ********************/
#page_content #EPIC_ad_content {margin-bottom:2%;margin:auto;max-width:auto;}
.footer_text {margin-bottom:1em;}
#page_content span.revisit, #page_content a.revisit, #page_content p.revisit {color:red; background:yellow;}
#page_content .panel-link {color:#003366;}
#page_content #nav .topnav-text:hover {color:#fff;}

/* if choose to add words under the blue header icons */
#blueHeader_wrap {order:2; display: flex;}
#blueHeader_wrap, #getinfo_mobile_wrap {align-items: flex-end; flex-direction: row-reverse; padding: 5px 0;}
#getinfo_mobile_wrap {margin: 0 5px;}
#getinfo {
	display: flex;
    flex-direction: column;
    align-items: center;
}
#getinfo i {width: 11px;}
#blueHeader_wrap #logout {align-self: center;}
#blueHeader_wrap #logout #logout_form button {margin-top: 0;}
.header-icons {color:#FFF; font-size:75%; text-align:center; display:block; margin-top: -2px;}
#blueHeader_wrap > div > a {display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 5px;}
#my_profile i, #upload i, #getinfo i {color: #fff; font-size: 2em; margin-bottom: 3px;}
#upload i {font-size: 1.7em; margin-bottom: 6px;}
#infoIcon {margin-right:0px;}

body .ui-messages-error-icon{background-position:0 -90px;}
body .ui-messages-error{padding:5px;font-size:90%;}
.ie-icon {display:none;}
*::-ms-backdrop, #errorImg {display:none;}
*::-ms-backdrop, .ie-icon {display:block;}


/* COVID ALERT and DEBT RELIEF SCAM ALERT messages on home.xhtml */
/* alert responsive styles */


#scamalerts {padding:1em 2.2em 1em 2.2em}
#scams.outpnlScams{margin:1em 5px 0 5px;background-color: #ECEFF5;}
#scamImg {width:100%;}
.covid-alert a, .scam-alert a {
	outline: none;
	border: none;
	background: #0097dc;
	color: #000;
	padding: 6px 12px;
	font-size: 12px;
	border-radius: 5px;
	text-transform: uppercase;
	display: block;
	margin: 0 auto;
	text-align: center;
}

@media screen and (min-width: 37.5em) {
	.alerts {
		position: absolute;
		top: 15%;
		right: 2%;
		width: 25%;
	}
}

.covid-alert, .privacy {margin-bottom: 25px;}

@media screen and (min-width: 37.5em) {
	.covid-alert, .scam-alert, .privacy {
		background: rgba(0,0,0,.5);
		color: white;
		padding: 10px;
		text-align: left;
	}
}

@media screen and (max-width: 120em) {
	.covid-alert h2, .scam-alert h2, .privacy h2 {
		color: #fff;
		font-size: 2em;
	}
	
	.covid-alert p, .scam-alert p, .privacy p {
		color: #fff;
		font-size: 1em;
	}
	
	.covid-alert a, .scam-alert a {
		outline: none;
		border: none;
		background: #0097dc;
		color: #000;
		padding: 6px 12px;
		font-size: 12px;
		border-radius: 5px;
		text-transform: uppercase;
		display: block;
		margin: 0 auto;
		text-align: center;
	}
}

@media screen and (max-width: 84.375em) {
	.covid-alert h2, .scam-alert h2, .privacy h2 {
		color: #fff;
		font-size: 24px;
	}
	
	.covid-alert p, .scam-alert p, .privacy p {
		color: #fff;
		font-size: 14px;
	}
}

@media screen and (max-width: 64.0625em) {
	.covid-alert h2, .scam-alert h2, .privacy h2 {
		color: #fff;
		font-size: 20px;
	}
	
	.covid-alert p, .scam-alert p, .privacy p {
		color: #fff;
		font-size: 12px;
	}
}

@media screen and (max-width: 53.125em) {
	.covid-alert h2, .scam-alert h2, .privacy h2 {
		color: #fff;
		font-size: 16px;
	}
	
	.covid-alert p, .scam-alert p, .privacy p {
		color: #fff;
		font-size: 11px;
	}
}

@media screen and (max-width: 42.1875em) {
	.covid-alert h2, .scam-alert h2, .privacy h2 {
		color: #fff;
		font-size: 14px;
	}
}

@media screen and (max-width: 37.5em) {
	.covid-alert, .scam-alert .privacy {
		background: rgba(232,232,232,.9);
		color: #000;
		width: 90%;
		margin: 0 auto 1em;
		height: auto;
		padding: 10px;
		text-align: center;
	}
	.covid-alert h2, .scam-alert h2, .privacy h2 {
		color: #000;
		margin: 1.5 0 0 0;
	}
	
	.covid-alert p, .scam-alert p, .privacy p {
		color: #000;
	}
}

/* END - COVID MSG */

.covid-links {width:100%;}
.covid-link-1 {width:40%; float:left;}
.covid-link-2 {width:40%; float:left; padding:0 0 15px 15%;}
.temp-HR {padding:0 0 15px 0;}