/*-----------------------------------------------------*/
/*    CSS for the internal pages of AEL site           */
/*           Michael Ho - Feb 2017                     */
/*													   */
/*	+ add class 'with_image' to a panel that needs     */
/*	  image added as in whoWeAre.xhtml page            */
/*	+ add class 'display_block' instead of adding 	   */											   
/*	  <br/> tags to force text to display in next line */	
/*-----------------------------------------------------*/

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


/* nav items share available width */
#nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

#nav > li.firstLevelNav {
  flex: 1 1 0;
  min-width: 0;    
  text-align: center;
}

#nav > li.firstLevelNav .nav-heading,
#nav > li.firstLevelNav .nav-heading a,
#nav > li.firstLevelNav .nav-heading span.nav-label {
  display: block;
  width: 100%;
}

#nav > li#acct_nav {
  flex: 1.35 1 0;  
}

#nav > li.firstLevelNav {
  display: flex;
  align-items: stretch;
}

#nav > li.firstLevelNav .nav-heading {
  display: flex;
  align-items: center; 
  justify-content: center; 
  height: 100%;
}

.grad-navbar #nav li.current {
    background-color: #ABCAE9 !important; 
}
.grad-navbar #nav li.current .nav-heading a,
.grad-navbar #nav li.current .nav-heading span {
    color: #003399 !important;
}

.grad-navbar #nav li.firstLevelNav:hover .nav-heading a, 
.grad-navbar #nav li.firstLevelNav:hover .nav-heading span { 
color: #FFF !important;
}

/*highlight the nav item you're on*/
.grad-navbar #nav li.active .nav-heading a,
.grad-navbar #nav li.active .nav-heading span,
.grad-navbar #nav li.active .nav-heading h\:outputText {
    color: #ffffff !important;
}

.grad-navbar #nav li.active .nav-heading {
    background-color: #003399 !important;
}

#apply_now_nav .nav-heading {
    cursor: pointer;
}

#graduate_nav .nav-heading {
    cursor: pointer;
}

#about_our_loans_nav .nav-heading {
    cursor: pointer !important;
}


#nav li.has-sub > ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
}

.nav-label-fix {
    display: block;
    width: 100%;
}

html {
    scroll-padding-top: 120px; 
}


/*grad loans nav*/
.grad-nav li.has-sub {
    position: relative;
}

.grad-nav li.has-sub .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 180px;
    border: 1px solid #d0d7e3;
    z-index: 9999;
}

.grad-nav li.has-sub:hover .submenu {
    display: block;
}

.grad-nav li.has-sub .submenu li a {
    display: block;
    padding: 10px 14px;
    color: #004b8d;
    text-decoration: none;
    white-space: nowrap;
}

.grad-nav li.has-sub .submenu li a:hover {
    background-color: #e6eef9;
}

.grad-nav li.has-sub .submenu {
    display: none;
}

.grad-nav li.has-sub.open .submenu {
    display: block;
}



.smallText {font-size:75%;}
#intImg img {width:100%;}
h1.top_title {color:#003366;}
#page_content h1#top_title {margin-top:1em;font-size:1.27em;}
#page_content .section #section_content {width:auto;margin:auto;}
/*#page_content .section #section_content {width:auto;margin:auto;}*/

#productHeadingContainer {
	font-weight: bold; font-size: 1.15em; letter-spacing: -0.03em; color: #003399;
	text-align: center;
	width: 100%;
	border-bottom: 4px solid #003366;
	padding-bottom: 0.25em; padding-top: 0.75em;
}



/* ----------------------------------------------------------- */
/* accordion panels and sub-panels colors and background style */
/* ----------------------------------------------------------- */
#page_gutter .ui-panel .tabs-forms .ui-accordion-header {color:#003366;}
.section-main-content .ui-accordion .ui-accordion-header:nth-of-type(4n+1) {background:#ECEFF5;border-bottom:1px solid #D9DFEA;}
.section-main-content .ui-accordion .ui-accordion-header:nth-of-type(4n-1) {background:#d9dfea;border-bottom:1px solid #ECEFF5;}
.section-main-content .ui-widget .ui-accordion-content:nth-of-type(4n),
.section-main-content .ui-accordion-content:nth-of-type(4n) >*   {background:#d9dfea;}
.section-main-content .ui-widget .ui-accordion-content:nth-of-type(4n+2),
.section-main-content .ui-accordion-content:nth-of-type(4n+2) > *  {background:#ECEFF5;}
.section-main-content #intro_text_content {background:none;}

.section-main-content .ui-panel .sub-panels .ui-accordion-header:nth-of-type(4n+1),
.section-main-content .ui-panel .sub-panels .ui-accordion-content:nth-of-type(4n+2),
.section-main-content .ui-panel .sub-panels .ui-accordion-content:nth-of-type(n+2) >* {background-color:#dfdfe0;}

.section-main-content .ui-panel .sub-panels .ui-accordion-header:nth-of-type(4n+3),
.section-main-content .ui-panel .sub-panels .ui-accordion-content:nth-of-type(4n+4),
.section-main-content .ui-panel .sub-panels .ui-accordion-content:nth-of-type(4n+4) >* {background-color:#e8ecf3;}

.sub-panels p {padding-left:1em; padding-right:1em;}
.ui-widget-content .phone-links {color:#0000cc;}

[id*="calc_tab"].ui-accordion-content.ui-widget-content {padding-left: 0; padding-right: 0;}

/* setting panels and subpanels background and hover colors ends */

/*-------- Panels and sub-panels icons style begins ------------*/
/*    Note: I am overriding the sprites from primefaces code 	*/
/*--------------------------------------------------------------*/
.set_img_margin {margin-right:.6em; float:left;}
.img-swap {top:18px;}
.ui-state-active .ui-icon, .ui-state-default .ui-icon, .ui-state-default .ui-icon:active {background: none;}
.section-main-content .tabs-forms .ui-accordion-header {padding: .5em .5em 2em 1.5em;}

/* SA- instead of using a background image, I'm drawing a triangle. The idea is to draw a box with 0 width and 0 height
 but with thick borders. Borders of a box meet in triangles. So, have 3 borders be with transparent color while the 4th have a solid color.
 See https://css-tricks.com/snippets/css/css-triangle/ */
 
.ui-state-active .ui-icon-triangle, .ui-state-default .ui-icon-triangle{
	width: 0; 
	height: 0; 
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 8px solid #003366;
	margin-top:6px; 
	float:left;
}
.ui-state-active .ui-icon-triangle, .ui-state-default .ui-icon-triangle:active {
	width: 0; 
	height: 0; 
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 8px solid #003366;
	margin-top:8px; 
	float:left;
	}

.section-main-content .ui-accordion .ui-accordion-header .ui-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    height:3em;
    width:3em;
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}



/* panels and sub-panels icons styling ends */

/*---- panels content style begins ----*/
.sub-panels {width:97%; margin:auto;}
.with-subpanels .sub-panels {width:92%;margin-bottom:2em;}
#section {margin-bottom:2em;}
/* for terminal pages */
#page_content .intro {padding:.5%; text-align:center; margin:auto;}
#page_content #page_wrap #section #intro_text {padding:.5% .5% 1.5em; margin:auto; width:95%;}

/* for rest of pages */
.page-wrap .section .intro {padding:1%;	text-align:center;margin:auto;}
.panels-list-content {padding-left:2em;margin:0px;list-style-type: disc;}
.ui-widget-content h4 a,.ui-widget-content h4 {color:#5d3e7b;/* text-shadow:1px 1px 1px #d8ad6b; */}

.ui-widget-content h2 a,.ui-widget-content h2 {color:#5d3e7b;}
.ui-widget-content h2 {font-size:1em;}
/* .section .section-main-content .tabs-forms h4 {color:#54315c;margin-top:.3em;margin-bottom:0px;padding-bottom:0px;} */
.section-main-content .ui-accordion .ui-accordion-content {border-bottom: .5px solid #ccc;clear:both;}
.section-main-content .ui-accordion .sub-panels .ui-accordion-content {padding:0px; width:100%;}
.tabs-forms .ui-widget-content a.tabLinks, a.tabLinks {color:#0000cc; text-decoration:underline;}
.tabs-forms .ui-widget-content a.panel-links, a.panel-links {color:#0000cc; text-decoration:underline;}
.tabs-forms .ui-widget-content a.panel-links, a.panel-links h4 {text-decoration:underline;}

.tabs-forms .ui-widget-content .nextPara {margin-top:.5em;}


/************ add images in pannels style details - see Who We are ******************/
#page_content .with_image {width:75%; float:left;}  /* use this class to insert images to the right of text in panels as done in whoWeAre.xhtml */
#page_content .logo {float:right;margin-right:auto;}
/************** add images inside panels style ends **************************************/


/************** Interior pages with one panel - these won't have tabs ***********/
.no-tabs .nextPara {margin-bottom:.8em;}
#page_content .section .no-tabs {padding: .5em 2em 2em;}
.section .no-tabs h4 {margin:1.5em 0em .8em; font-weight:bold;}

.interest-fields {display:none;}

.fade-rule {
	width: 80%; height: 1px;
	background-color: black;
	margin: 2em auto;
	background: linear-gradient(left, transparent 2%, black 50%, transparent 98%);
	background: -webkit-linear-gradient(left, transparent 2%, black 50%, transparent 98%);
	background: -moz-linear-gradient(left, transparent 2%, black 50%, transparent 98%);
	background: -ms-linear-gradient(left, transparent 2%, black 50%, transparent 98%);
}

#casIntro {font-size:1.8em;}
.cas-contain { padding: 1em 3em 3em 3em; }
.cas-contain h1 {font-size: 1.6em; text-decoration: underline; text-underline-position: under; color:#003399;}
.cas-contain p {font-size: 1.2em; width: 75%; margin: 0 auto; margin-top: 2em;}
#casContain2 p a {border-bottom: 1px solid;}

#contactContain p { font-size: 0.9em;}
#contactContain h4, #contactUsForm h4 { margin-top: 0;}
#contactContain h3 { padding-top: 2em;}
#contactUsForm\:userEmailContain { margin-bottom:2em; }
#contactUsForm\:userQCContain { margin-bottom:1em; }
#contactUsForm\:inputUserEmail, #contactUsForm\:inputEmailQC {display: block;}
/*#contactUsForm\:inputUserEmail {width: 19.2em;} */
#contactUsForm\:btnContactUsSubmit {
	background: white;
	border: 1px solid gray;
	font-weight: 100;
}
#contactPhoneContain span {
	font-size: 0.9em;
	display: block;
	margin-top: 0;
	margin-left: 7em;
}

#contactUsForm\:btnContactUsSubmit:hover { background-color:#C1D4F2}

[id*="aboutOurLoans_panels\:reviews"].reviews-block {
	padding: 0.8em; 
	font-size: 1.2em;
	width: 18em; min-height: 10em;
	float: left;
	border-right: 2px solid white; border-bottom: 2px solid white;
}
#aboutOurLoans_panels\:reviewsOne {background-color: #008645; }
#aboutOurLoans_panels\:reviewsOne_content {color: white;}

#aboutOurLoans_panels\:reviewsTwo {background-color: #003399; }
#aboutOurLoans_panels\:reviewsTwo_content {color: white;}

#aboutOurLoans_panels\:reviewsThree {background-color: #ABCAE9; }
#aboutOurLoans_panels\:reviewsThree_content {color: black;}

.ui-panel .faq-list {list-style: initial; padding-left: 4em; width: 80%;}

[id*="calcMain"] {
	background: inherit;
}

#calcContain {
	margin-top: 1em;
}

#repayOpenStatements p, #compareOpenStatements p,
#tools_panels\:repayOpenStatements p, #tools_panels\:compareOpenStatements p {font-size: 1.2em; padding:0px 12%}
#repayOpenStatements #repayOS1 {margin-top: 5px; display: flex; justify-content: center;}
.field-box { display: flex; flex-direction: column; align-items: center; margin: 0.6rem 0 0.6rem 0; }
.simple-loan-head {
	letter-spacing: -0.04em;
	margin-top: 0; margin-bottom: 1.8em;
	text-align: center; font-size: 1.2em;
}

/* [id*="calcMiddleCol"].ui-outputpanel.ui-widget {
	margin-right: 2rem;
} */

#calcRightCol .simple-loan-head, #tools_panels\:calcRightCol .simple-loan-head {
	margin-bottom: 2.0em;
}

[id*="inpMonthsStudyContain"] {width: 100%;}
#inputLoanContain .label-input,
#inputMonthsStudy .label-input,
.field-box .label-input {
	color: #5F5F5F;
	font-size: 1.25rem;
	text-align: left;
	margin:0;

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.curr-loan-block {
	display:flex;
	flex-direction: column;
}

body [id*="calcLeftCol"] { padding-right: 0; padding-left: 0; }

body [id*="calcLeftCol"] .curr-loan-inputs,
#rowSimpleCalcStats .curr-loan-inputs 
{
	box-shadow:none; 
	border: 1px solid gray; 
	font-size: 1.4em;

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#rowSimpleCalcStats .field-box {margin: 1rem auto;}

[id*="calcLeftCol"] .curr-loan-inputs.calc-label-highlight,
#rowSimpleCalcStats .curr-loan-inputs.calc-label-highlight {
	border: 1px solid #FFA200;
}

.warning--loan,
.warning--monthsStudy {
	margin: 1rem auto;
	color: red;
	opacity: 0;
}

#repayYearsStatement {margin: 1.5rem auto 1.5rem auto; width: 26em;}

.simple-calc-stats { font-size: 1.1em;}

.green-cash {
	color: #00853F;
	font-size: 1.8em; letter-spacing: -0.04em; font-weight: 400;
	margin-bottom: 0; margin-top: 0.25em;
}

#aelCompareHeading {
	color: white;
	text-align: center;
	margin-top: 2em; margin-bottom: 2em;
	padding: 1em;
	background-color: #003399;
}

#aelCalcContain {
	margin-bottom: 2em;
}

.ael-box {
	display: inline-block;
}

.ael-box h4 {
	margin-bottom: 1.5em;
}

#selCalcPeriod .ui-button, #tools_panels\:selCalcPeriod .ui-button, .btn-repay-years  {
	width: 4em; height: 3em; line-height: 3em;
	border: 1px solid gray;
	background-color: white;
	font-weight: 700;
	cursor: pointer;
}

.repayYrContain {
	display:flex;
	justify-content: center;
}

.btn-repay-years.yrActive {
	background: #ABCAE9;
}

#selCalcPeriod .ui-button .ui-button-text, #tools_panels\:selCalcPeriod .ui-button .ui-button-text  {
	line-height: 3.2em;
}

#selCalcPeriod .ui-state-active, #tools_panels\:selCalcPeriod .ui-state-active {
	background: #ABCAE9;
}

#ignoreInput, #tools_panels\:ignoreInput {display: none;}

.disclosures-list li {margin-bottom: 0.5rem;}

.compare-sub-head {
	letter-spacing: -0.04em;
	margin-top: 0;
}
[id*="selCredit"], [id*="selCreditSlider"] {margin: 0 auto; width: 10rem;}
#selCredit, #selCreditSlider {margin: 0 auto; width: 10rem;}

[id*="txtCredit"] {
	margin-top: 0.5em;
	font-size:1.4rem;
}

[id*="txtCredit"].refiTxtCredit {
	float: none;
	margin: 0.5rem auto 0 auto;
	text-align: center;
}

#selMonthsStudyContain {
	opacity: 0
}

#selMonthsStudy, #tools_panels\:selMonthsStudy {
	width: 20rem;
	margin: 0 auto;
}

.statsBox h4 {
	margin-bottom: 0;
}

.result-box {
	margin-bottom: 1em;
}


/** Rates and Compare Tables **/

[id*="product_table"] .ratesTableEl,
[id*="compare_table"] .compareTableEl {table-layout: auto}

#ratesOpening { color: #00994D; margin-bottom: 5%; text-align: center; }
.ratesStatements { font-weight: bold; margin-left: 12%; font-size: 1.1em; }

[id*="product_table"].ratesTable {display: inline-block;}

/* KAEL  */
[id*="product_table"].ratesKyTable .ui-datatable-header {
	border-top-color: black; border-left-color: black; border-right-color: black;
	font-size: 1.3em;
	padding-top: 1.5em; padding-bottom: 1.5em;
	background: #C2D9D4; color: black;
	
}

/* specific third kael rate table (medical) styles */
.ui-datatable[id*="product_table_3"] th,
.ui-datatable[id*="product_table_3"] td {
    text-align: center !important;
}

.ui-datatable[id*="product_table_3"] .pnlRatesCol,
.ui-datatable[id*="product_table_3"] .pnlRatesColRepay,
.ui-datatable[id*="product_table_3"] .pnlRatesCol .ui-panel-content {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ui-datatable[id*="product_table_3"] .pnlRatesCol .ui-panel-content,
.ui-datatable[id*="product_table_3"] .pnlRatesColRepay .ui-panel-content {
    padding: 1rem 1rem !important;
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
}

.ui-datatable[id*="product_table_3"] td,
.ui-datatable[id*="product_table_3"] th {
    background: white !important;
}

.ui-datatable[id*="product_table_3"] {
    margin-top: 5rem !important;
    margin-bottom: 1rem !important;
}
/*end 3rd table (medical) */


[id*="product_table"].ratesTable .ui-datatable-header {
	border-top-color: black; border-left-color: black; border-right-color: black;
	font-size: 1.3em;
	padding-top: 1.5em; padding-bottom: 1.5em;
	background: #003399; color: white;
	
}
[id*="product_table"].ratesTable .ui-datatable-header .header-fineprint {
	margin: 0;
	font-size: 0.65em;
	font-weight: 400;
}

[id*="product_table"].ratesTable .ui-datatable-header .header-fineprint a {
    margin: 0;
    font-size: 0.95em;
    font-weight: 400;
    font-style: italic; 
    text-shadow: none;
    color: white;
}

[id*="product_table"].ratesKyTable .ui-datatable-header .header-fineprint {
	margin: 0;
	font-size: 0.9em;
	font-weight:600;
}
[id*="product_table"].ratesKyTable .ratesCol {
	background: white; 
	border: 1px solid black;
	font-size: 1.2em;
	text-align: center;
	color: black;
}
[id*="product_table"].ratesTable .ratesCol {
	background: white; 
	border: 1px solid black;
	font-size: 1.2em;
	text-align: center;
	color: black;
}
[id*="product_table"].ratesKyTable .ratesColAPR {padding-bottom: 1em;}
.aprRateTiersExtra {font-style: italic; font-size: 0.8em}

[id*="product_table"].ratesTable .ratesColAPR {padding-bottom: 1em;}
.aprRateTiersExtra {font-style: italic; font-size: 0.8em}

[id*="product_table"].ratesTable .ratesColExcellent {background: #88BFE8;}
[id*="product_table"].ratesTable .ratesColVery {background: #65B58B;}
[id*="product_table"].ratesTable .ratesColGood {background: #FDDF6A;}
[id*="product_table"].ratesTable .ratesColFair {background: #CACACA;}

[id*="product_table"].ratesKyTable .ratesColExcellent {background: #88BFE8;}
[id*="product_table"].ratesKyTable .ratesColVery {background: #65B58B;}
[id*="product_table"].ratesKyTable .ratesColGood {background: #FDDF6A;}
[id*="product_table"].ratesKyTable .ratesColFair {background: #CACACA;}


[id*="product_table_data"] [role="row"] .pnlRatesCol,
[id*="product_table_data"] [role="row"] .pnlRatesColRepay
{
	background:white;
	text-align: center;
	padding-top: 1em; padding-bottom: 1em;
}

[id*="product_table_2_data"] [role="row"] .pnlRatesCol,
[id*="product_table_2_data"] [role="row"] .pnlRatesColRepay
{
	background:white;
	text-align: center;
	padding-top: 1em; padding-bottom: 1em;
}


.ui-datatable[id$="product_table_2"] {
    margin-top: 5rem !important;
}


[id*="product_table"] .pnlRatesCol .ui-panel-content,
[id*="product_table_2"] .pnlRatesCol .ui-panel-content {
    font-size: 1.2rem !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    white-space: nowrap;
}


.pnlRatesColRepayMain {font-size: 1.1em;}
.prod-desc {margin:0 29%;}
.pnlRatesCol {font-size: 1.05em; font-weight: bold}

.rates-tier-img {
	width: 100px;
	padding-top: 0.75em; padding-bottom: 0.75em;
}

#ratesFineprint-1, #ratesFineprint-2, #compareFineprint-1, #compareFineprint-2 {color: black; font-size: 0.9em; padding-right: 15%;}
#ratesFineprint-1 {margin-top: 0;}

#calcMain #rates_panel {
	max-width: 90%;
	margin:auto;
	margin-top: 2em;
}

[id*="compare_table"].compareTable {
	margin: 0 auto 2.5rem auto;
}

[id*="compare_table"].compareTable .compareCol {
	background: white; 
	border: 1px solid black;
	font-size: 1rem;
	color: black;
}

[id*="compare_table"].compareTable .compareSubHead {
	font-weight: bold;
	padding: 1rem;
}

[id*="compare_table"].compareTable .compareSectionHead {
	background-color: #00853F;
	color: white; border-color: black;
	font-weight:bold;
	font-size: 1.2rem;
	padding: 0.5rem;

}

[id*="compare_table"] .compareTableHead.ui-panelgrid-cell {
	font-size: 1.3em;
	background: #003399; color: white; border-color: black;
	font-weight: bold;
	padding: 1rem 0;
}


/* Disclosures page*/
.disclosure-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #003399;
 }
 
.disc-image-container {
	text-align: center;
	margin: 2rem 0;
}

.disc-image-container .disclosures {
	max-width: 600px;
	width: 100%;
	height: auto;
	margin-top: 40px;
	display: inline-block;
	vertical-align: middle;
}


/**Apply Now**/
.applyIntro {
	text-align: center;
	font-size: 2.8em;
	margin-top: 0;
	color: #003399;
}

#containApply {
	display: flex;
	justify-content: center;
	margin-top: 4em;
	flex-wrap: wrap;
}
.itemApply {
	width: 16em;
	margin-bottom: 1.5em;
}

.itemApplyTitle {
	text-align: center;
	background-color: #003399;
	border-radius: 5px;
}
.applyBlurb1, .applyBlurb2 { color: white; font-weight: bold; margin: 0; }
.applyBlurb1 { font-size: 3em; padding-top: 0.25em; }
.applyBlurb2 { font-size: 2.2em; padding-bottom: 0.5em; }

.itemApplyStatement { text-align: center; font-weight: 400; margin-top: 2em; }

/**Advantage Loan Documents**/
#lnDocs {
	max-width: 400px;
	width: 100%;
	margin: 0 auto;
}
#lnDocs h1 {
	font-size: 2em;
	color: #003399;
	margin: 0 0 2em;
}
#lnDocs h2 {
	font-size: 1.4em;
	color: #000;
}
#lnDocs > div {
	margin: 1em;
}
#lnDocs ul {
	list-style: disc;
	list-style-position: inside;
}
#lnDocs ul li {
	font-size: 1.2em;
	color: #003399;
	margin: .25em 0;
	text-decoration: underline;
}
#lnDocs ul li a {
	color: #000;
}
#lnDocs ul li a:hover {
	color: #003399;
}
/* end */

/*========== homepage coming soon section ========== */
.grad-loan-promo {
  background-color: #f5f8ff;
  border: 2px solid #004b8d;
  border-radius: 8px;
  padding: 0.4rem 1.25rem;
  margin: 2rem 0;
  width: 100%;
  box-sizing: border-box;
}

.grad-promo-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}


.grad-promo-columns {
  display: flex;
  justify-content: flex-start;   
  gap: 7rem;                      
  max-width: 800px;               
  margin: 0 auto;                 
}

.promo-col {
  min-width: 0;                    
}

.promo-col:nth-child(2) {
  padding-top: 2rem;
}

.grad-loan-promo p {
  margin: 0.4rem 0;
  color: #004b8d;
  line-height: 1.5;
}

.grad-loan-promo a {
  color: #004b8d;
  text-decoration: underline;
}

.coming-soon-title {
  color: #2e7d32 !important;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: .75rem;
}


@media (max-width: 700px) {
  .grad-promo-columns {
    flex-direction: column;
    gap: 1rem;
  }
}



/*========== homepage kael/vet loan section ========== */

.kael-wrapper {
  padding: 0 1rem;
}

.kael-panel {
  background-color: #dff3e3;
  border: 2px solid #2e7d32;
  border-radius: 8px;
  padding: 0.4rem 1.25rem;  
  margin: 2.5rem 0;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  box-sizing: border-box;
}

.kael-panel p {
  color: inherit;
}

.kael-panel a {
  color: #004b8d;
  text-decoration: underline;
}


/*========== homepage 4-box section ========== */

.home-info-wrapper {
  max-width: 1000px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  gap: 2rem;                                       
}

.home-info-section-bg {
  width: 100%;
  background-color: #eef4ff;
  padding: .05rem 0;           
}


.home-box {
  width: 100%;
  max-width: none;
  background: #ccc;
  border-radius: 18px;
  color: #000000;
  padding: 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: box-shadow 0.18s ease, filter 0.18s ease;
  overflow: hidden;
}

.home-box:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  filter: brightness(1.05);
}

.home-box-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;     
  font-weight: 800;       
  letter-spacing: -0.5px; 
  margin-bottom: 1rem;
  text-align: center;
  line-height: 1.2;
}


.home-box-content {
  display: grid;
  grid-template-columns: 1fr 340px; 
  align-items: start;
  column-gap: 0.75rem;
}


.home-box-textwrap {
  flex: 0 0 220px;  
  min-width: 220px;
  max-width: 260px;
  box-sizing: border-box;
  padding-top: .2rem;
}

.home-box-text {
  font-size: 0.9rem;
  line-height: 1.1;
  margin: 0;
  width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.first-bullet {
  margin-top: -0.3rem;
}

.home-box-anim {
  width: 450px;  
  margin-top:-70px;
  margin-left: -220px; 

}

.home-box-1 { background: #99e09c; }
.home-box-2 { background: #8096ba; }
.home-box-3 { background: #b890bf; }
.home-box-4 { background: #e5ae73; }

/* bullets */
.home-box li::before {
  content: "\2022" !important;
  position: absolute;
  left: 0;
  top: -.5rem;
  font-size: 2rem;
  line-height: 1;
}

.home-box li {
  position: relative;
  /*display: block;*/
  padding-left: 1.6rem;
  margin-bottom: 1.1rem;
  line-height: 1.35;
}

.home-box-1 li::before { color: #00853f; font-size: 2.2rem;}
.home-box-2 li::before { color: #004b8d; font-size: 2.2rem; }
.home-box-3 li::before { color: #781d7e; font-size: 2.2rem; }
.home-box-4 li::before { color: #c47a0e; font-size: 2.2rem; }


.desktop { display: block !important; }
.mobile  { display: none !important; }

@media (max-width: 599px) {
  .desktop { display: none !important; }
  .mobile  { display: block !important; }
}


@media (max-width: 400px) {
  .desktop { display: none !important; }
  .mobile  { display: block !important; }
}



/* media queries*/
@media (max-width: 900px) {
  .home-info-wrapper {
    grid-template-columns: 1fr;
  }

  .home-box-content {
    flex-direction: column;
    align-items: center;
  }

  .home-box-textwrap {
    width: 100%;
  }

  .home-box-anim {
    width: 100%;
    max-width: 320px;
  }
}

@media (min-width: 901px) and (max-width: 1024px) {
  .home-box-anim {
  	max-width: none;
    width: 400px;          
    margin-left: -200px;   
    margin-top: -60px;    
  }
  
  .home-box-textwrap { flex: 0 0 270px; max-width: 270px; }
  .home-box li::before { left: .3rem;}
  .home-box li { padding-left: 2rem;}
	.home-box-2 .home-box-title {font-size:1.1rem;}
	.home-box-4 li {font-size: .87rem;}
}


@media (min-width: 830px) and (max-width: 900px) {

  .home-box-anim {
  	max-width: none;
    width: 480px;          
    margin-left: -250px;  
    margin-top: -80px;     
  }
  
  .home-box-textwrap { flex: 0 0 270px;  max-width: 270px; }
  .home-box li::before { left: 6.3rem;}
  .home-box li { padding-left: 8rem;}
}

@media (min-width: 701px) and (max-width: 830px) {
	.home-box-anim {
  	max-width: none;
    width: 480px;  
    margin-left: -190px;  
    margin-top: -80px;  
  }
  
  .home-box-textwrap { flex: 0 0 270px; max-width: 270px; }
  .home-box li::before { left: 3.3rem;  }
  .home-box li { padding-left: 5rem;  }
}

@media (max-width: 700px) {

  .grad-promo-columns {
    flex-direction: column;
    gap: 0.75rem;   
  }


  .promo-col:nth-child(2) {
    padding-top: 0 !important;
  }
  
  .home-box-anim {
  max-width: none;
  width: 450px !important; 
  margin-left: -190px !important;
  margin-top: -70px !important;
 }
}

@media (min-width: 600px) and (max-width: 700px) {
  .home-box-textwrap {
    min-width: 0 !important;
    max-width: 200px !important;
    width: 100% !important;
  }

  .home-box-content {
    grid-template-columns: minmax(0, 1fr) 260px !important;
  }

  .home-box-anim {
    width: 360px !important;
    margin-left: -120px !important;
    margin-top: -55px !important;
  }

  .home-box ul {
    margin: 0 !important;
    padding-left: 0 !important;
  }
} 


@media (max-width: 550px) {

  .home-box-anim {
    display: none !important;
  }

.home-box-2 .home-box-title {font-size:1rem;}
}

/*=============== GRAD LOAN MAIN LANDING PAGE ======================*/


#nav a,
#nav .nav-heading a,
.grad-nav a,
.grad-nav .submenu a {
    text-decoration: none !important;
}

.grad-prof-promo a.grad-prof-link,
.grad-prof-promo .grad-prof-overview-links a {
  color: #003399 !important;
  text-decoration: underline !important;
}


.grad-prof-promo a.grad-prof-link:hover,
.grad-prof-promo .grad-prof-overview-links a:hover {
  color: #003399 !important;
  text-decoration: underline !important;
}


.grad-prof-promo a.grad-prof-link:visited,
.grad-prof-promo .grad-prof-overview-links a:visited {
  color: #003399 !important;
}


.grad-prof-promo {
  background-color: #e8f0ff;
  padding: 2rem;
  margin: 2rem 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #000000;
}

.grad-prof-overview-title {
    color: #000000 !important;
}


.grad-prof-header .grad-prof-title {
  font-size: 2rem;     
  font-weight: 800;
  margin: 0;
  color: #003366;
  letter-spacing: -0.5px;
}

.grad-prof-promo-content {
  padding-left: 2rem; 
}


.grad-prof-header {
  background-color: #d0e2ff;   
  width: 65%;                  
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}



.grad-prof-link {
  color: #004b8d;
  font-weight: bold;
  text-decoration: underline;
}

.grad-prof-overview-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #004b8d;
}

.grad-prof-accordion {
  margin-top: 1rem;
}

.grad-prof-promo + .grad-prof-promo {
    margin-top: 4rem;
}

/* ===== grad professional list only ===== */

.grad-prof-body {
    margin-left: 2rem;
}

.grad-prof-list-wrap .grad-prof-list {
    margin: 0.75rem 0 1.25rem 1.5rem;
    padding: 0;
}

.grad-prof-list-wrap .grad-prof-list li {
    margin-bottom: 0.55rem;
}

/* normal bullets for first two items */
.grad-prof-list-wrap .grad-prof-list li:not(.hand-bullet) {
    list-style-type: disc;
}

/* third item uses custom hand instead of bullet */
.grad-prof-list-wrap .grad-prof-list li.hand-bullet {
    list-style: disc;

}



/*=============== END GRAD LOAN MAIN LANDING PAGE =================*/

.grad-top-link {
    background-color: #ffffff;
    padding: 0.3rem 1rem;      
    margin: 8px auto 0;    
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    width: fit-content;
    border-radius: 4px;
    text-align: center;
}

.grad-top-link a {
    color: #004b8d;
    text-decoration: underline;
}

.grad-top-bluebar {
    background-color: #004b8d;
    height: 7.5px; 
    width: 100%; 
    margin-bottom: 0; 
    margin-top: 8px; 
}


/*=============== MEDICAL/DENTAL LOANS SPECIFIC STYLES =================*/
#medDentEligibleSection {
    width: 100%;
    box-sizing: border-box;
    padding: 0 1.5rem;
}

.med-dent-eligible-wrapper {
    width: 100%;
    max-width: 67.5%;
    margin: 0;
    padding-left: 1rem; 
    box-sizing: border-box;
}

#medDentEligibleSection h3.intro-product,
#medDentEligibleSection h3 {
    font-size: 1.17em;
    margin: 0 0 0.75rem 0;
}

.med-dent-eligible-list {
    list-style-type: disc !important;
    margin: 0.75rem 0 1rem 3.5rem !important;
    padding-left: 1rem !important;
    box-sizing: border-box;
}

.med-dent-eligible-list li {
    display: list-item !important;
    margin-bottom: 0.4rem;
    color: #3674B3 !important;
    line-height: 1.45; 
}

#prodStudentContain #prodGetStartedBtn {
    display: inline-block;
    margin-bottom: 1.7rem;
    margin-top: .2rem;
}

/*=============== END MEDICAL/DENTAL LOANS SPECIFIC STYLES =================*/

/* DEGREES COVERED SECTIONS ON GRAD SUB SITES*/

.degrees-list li .grad-degrees-check {
    width: 26px;
    height: 26px;
    filter: brightness(0) saturate(100%) invert(34%) sepia(94%) saturate(512%) hue-rotate(96deg) brightness(92%) contrast(89%);
}

.grad-degrees-covered-intro {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #003366;
}

.grad-degrees-covered-list {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0 1.5rem 0;
}

.grad-degrees-covered-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    color: #003366;
}


.grad-degrees-covered-footer {
    margin-top: 1.5rem;
    font-size: 1rem;
    color: #003366;
}

.grad-degrees-covered-link {
    color: #004b8d;
    text-decoration: underline;
    font-weight: bold;
    margin: 0 0.25rem;
}

.degrees-section {
    background-color: #cfcfcf; 
    padding: 2rem;
    margin: 2rem 0;
    border-radius: 6px;
    color: #000;
}

.degrees-header {
    background-color: #9bb7e0; 
    width: 65%;               
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    
}

.degrees-header .degrees-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
}

.degrees-content {
    font-size: 1.25rem;
    line-height: 1.55;
}

.degrees-intro {
    margin-bottom: 1rem;
}

.degrees-list {
    list-style: none;
    padding-left: 1.5rem;
    margin: 0 0 1rem 0;
}

.degrees-list li {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 1.2rem;
    color: #000;
}

.degrees-footer {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: #000;
}

.degrees-footer a {
	color: #003399;
}


/*------------ACCORDION SECTIONS FOR GRAD SUBPAGES-------------*/


.loan-details-section {
    background-color: #cfcfcf; 
    padding-top: 2.2rem;         
    padding-bottom: 4rem;      
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}


.loan-details-header {
    background-color: #9bb7e0;   
    width: 65%;                  
    padding: 0.75rem 1rem;          
    margin-bottom: 1.25rem;      
}

.loan-details-title {
    margin: 0;
    font-size: 2rem;           
    font-weight: 700;            
    color: #000000;              
}

.loan-details-content {
    margin-top: 1rem;
    max-width: 67.5%;
}



/* override legacy accordion background rules */
.loan-details-accordion .ui-accordion-header,
.loan-details-accordion .ui-accordion-content {
    background: none !important;
    background-color: inherit !important;
    transition: none !important;
}

/* 1st header */
.loan-details-accordion > div.ui-accordion-header:nth-child(1) {
    background-color: #a8d5a2 !important;
}

/* 2nd header */
.loan-details-accordion > div.ui-accordion-header:nth-child(3) {
    background-color: #9bb7e0 !important;
}

/* 3rd header */
.loan-details-accordion > div.ui-accordion-header:nth-child(5) {
    background-color: #a8d5a2 !important;
}

/* 4th header */
.loan-details-accordion > div.ui-accordion-header:nth-child(7) {
    background-color: #9bb7e0 !important;
}


.loan-details-accordion .ui-accordion-header {
    background-color: #ffffff;
    border: 1px solid #c0c0c0;
    color: #000;
    font-size: 1.15rem;
    padding: 0.75rem 1rem;
}

.loan-details-accordion .ui-accordion-content {
    background-color: #ffffff;
    color: #000;
    padding: 1rem;
    font-size: 1.1rem;
}


.loan-details-accordion .ui-accordion-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.loan-details-accordion .ui-accordion-header .ui-accordion-header-text {
    display: inline-block !important;
}

.loan-details-accordion .ui-accordion-header .ui-icon {
    all: unset !important;
    display: inline-block !important;
    margin-left: 0.4rem !important;
    width: 0 !important;
    height: 0 !important;
    flex-shrink: 0 !important;
}

/* closed arrow (down) */
.loan-details-accordion .ui-accordion-header .ui-icon::before {
    content: "";
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #003366;
}

/* Open arrow (up) */
.loan-details-accordion .ui-accordion-header.ui-state-active .ui-icon::before {
    border-top: none;
    border-bottom: 8px solid #003366;
}

.loan-details-accordion .ui-accordion-header {
    display: flex !important;
    align-items: center !important;
}

.loan-details-accordion .ui-accordion-header .ui-icon {
    order: 2 !important;
}

.loan-details-accordion .ui-accordion-header *:not(.ui-icon) {
    order: 1 !important;
}

.loan-details-accordion .ui-accordion-header {
    display: flex !important;
    align-items: center !important; 
}

.loan-details-accordion .ui-accordion-header .ui-accordion-header-text {
    display: inline-flex !important;
    align-items: center !important;
}

.loan-details-accordion .ui-accordion-header .ui-icon {
    position: relative !important;
    top: -12px !important; 
}

.loan-details-accordion ul {
    list-style: none;
    margin: 0.75rem 0;
    padding-left: 1.4rem;
}

.loan-details-accordion ul li {
    position: relative;
    margin: 0.4rem 0;
    padding-left: 0.75rem;
    line-height: 1.45;
}

/* bullet */
.loan-details-accordion ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    background-color: #000000;
    border-radius: 50%;
}

.loan-details-accordion .ui-accordion-content {
    overflow-x: hidden !important;
}

.loan-details-accordion .ui-accordion-content {
    background-color: #dcdcdc !important;
}

.faq-single-link a {
    color: #003399 !important;
    text-decoration: underline !important;
}



/*----------------LAST GREY BOX SECTION------------*/


.med-page-graybox {
    background-color: #cfcfcf !important;
    padding: 2.75rem 2rem !important;
    border-radius: 6px;
    margin: 2rem 0;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center;
    gap: 2rem;
}

.med-page-graybox #grayBoxImageContain {
    flex: 0 0 34% !important;
    max-width: 34% !important;
    width: 34% !important;
    display: flex;
    align-items: center;
}

.med-page-graybox #prodMarketIMG {
    display: block;
    width: 100% !important;
    max-width: 440px !important;
    height: auto !important;
    margin: 0 auto !important;
}

.med-page-graybox #grayBoxParaContain {
    flex: 0 1 66% !important;
    max-width: 700px !important;
    width: 66% !important;
    min-width: 0;
    margin: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    text-align: center !important;
    align-self: center;
}

.med-page-graybox #grayBoxParaContain h1 {
    width: auto !important;
    margin: 0 0 0.5rem 0 !important;
    padding-top: 0 !important;
    line-height: 1.15 !important;
    font-size: 2rem !important;
    color: #003399 !important;
    white-space: normal !important;
}

.med-page-graybox #grayBoxParaContain p {
    font-family: Calibri, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #441A17 !important;
    font-size: 1.2em !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    max-width: 100% !important;
}


/* tablet - still side by side */
@media (max-width: 1024px) and (min-width: 700px) {
    .med-page-graybox {
        flex-wrap: nowrap !important;
        gap: 1.5rem;
        align-items: center !important;
    }

    .med-page-graybox #grayBoxImageContain {
        flex: 0 0 38% !important;
        max-width: 38% !important;
        width: 38% !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .med-page-graybox #prodMarketIMG {
        width: 100% !important;
        max-width: 430px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .med-page-graybox #grayBoxParaContain {
        flex: 0 1 62% !important;
        max-width: 62% !important;
        width: 62% !important;
        min-width: 0;
        text-align: center !important;
    }

    .med-page-graybox #grayBoxParaContain h1 {
        font-size: 1.7rem !important;
        margin: 0 0 0.5rem 0 !important;
        text-align: center !important;
    }

    .med-page-graybox #grayBoxParaContain p {
        font-size: 1.1rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }
}


/* mobile only */
@media (max-width: 699px) {
    .med-page-graybox {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .med-page-graybox #grayBoxImageContain,
    .med-page-graybox #grayBoxParaContain {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .med-page-graybox #grayBoxImageContain {
        display: flex;
        justify-content: center;
    }

    .med-page-graybox #prodMarketIMG {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        margin: 0 auto 0.5rem auto !important;
    }

    .med-page-graybox #grayBoxParaContain {
        text-align: center !important;
    }

    .med-page-graybox #grayBoxParaContain h1 {
        font-size: 1.45rem !important;
        text-align: center !important;
    }

    .med-page-graybox #grayBoxParaContain p {
        font-size: 1rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }
}



/*=============== SIGN UP PAGE ======================*/

#signupContainer {
    max-width: 720px;
    margin: 3rem auto;
    padding: 2.5rem 2rem;
    background: #eef4ff;
    border-radius: 14px;
    border: 1px solid #d7e3f5;
    box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}

.pageMainHeader {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #003366;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.signupHeader {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 2.5rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}

.formRow {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.6rem;
    align-items: center;
}

.formRow label {
    width: 100%;
    max-width: 380px;
    font-weight: 600;
    color: #003366;
    font-size: 1rem;
}

#signupContainer .formRow label {
    font-size: 1.15rem;     
    font-weight: 700;       
    color: #003366;         
    letter-spacing: -0.2px; 
}

/* gettin rid of primefces entry field shadows*/
#signupContainer .ui-inputfield,
#signupContainer input,
#signupContainer .ui-selectonemenu-label {
    background: #ffffff !important;     
    box-shadow: none !important;          
    border: 1px solid #b8cbe0 !important; 
    background-image: none !important;    
}

.ui-selectonemenu select {
    display: none !important;
}


.formRow input {
    width: 100%;
    max-width: 380px;
    padding: 0.75rem;
    border: 1px solid #b8cbe0;
    border-radius: 6px;
    font-size: 1rem;
    background: #f9fbff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.formRow input:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.25);
    outline: none;
}


#aglForm .ui-selectonemenu {
    width: 100% !important;
    max-width: 380px !important;
    border: 1px solid #b8cbe0 !important;
    border-radius: 6px !important;
    background: #f9fbff !important;
}

#aglForm .ui-selectonemenu-label {
    padding: 0.75rem !important;
    font-size: 1rem !important;
    color: #003366 !important;
}

#aglForm .ui-selectonemenu-trigger {
    background: #e6eefc !important;
    border-left: 1px solid #b8cbe0 !important;
}

#optInBox {
    margin-top: 1.8rem;
    padding: 1.2rem;
    background: #eef5ff;
    border: 1px solid #c8d8f0;
    border-radius: 8px;
    display: flex;
    gap: 0.75rem;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
    color: #003366;
}


#aglForm .ui-selectonemenu {
    position: relative;
    width: 100% !important;
    max-width: 380px !important;
}

#aglForm .ui-selectonemenu-trigger {
    width: 36px !important;
    background: #e6eefc !important;
    border-left: 1px solid #b8cbe0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;   
    top: 0;
    right: 0;
    height: 100%;
    cursor: pointer;
}

#aglForm .ui-selectonemenu-trigger::after {
    content: "\25BC";       
    font-size: 0.9rem;
    color: #003366;
    pointer-events: none;
}

.submitRow {
    text-align: center;
    margin-top: 2.5rem;
}

#aglForm .ui-button.ctaButton {
	background-color: #C1D4F2 !important; 
	border: 3px solid #f6a01a !important;  
	color: #333 !important;  
	font-weight: 700 !important; 
	font-size: 1.4rem !important; 
	padding: 1rem 2.5rem !important; 
	border-radius: 10px !important; 
	cursor: pointer;
}

#aglForm .ui-chkbox .ui-chkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid #003366;
    border-radius: 4px;
    background: white;
    position: relative;
}

#aglForm .ui-chkbox-box.ui-state-active::after {
    content: "\2713";
    color: #003366;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: -2px;
    left: 3px;
}


.errorMsg {
    color: #b30000;
    font-size: 0.85rem;
    margin-top: 0.3rem;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.fieldError {
    color: #cc0000;
    font-size: 0.9rem;
    margin-top: -0.4rem;
    margin-bottom: 1rem;
    text-align: left;
    width: 100%;
    max-width: 380px;
    padding-left: 0.2rem;
}

.optInError {
    display: block;
    margin: 0.4rem auto 1.2rem auto;
    max-width: 380px;
    color: #cc0000;
    font-size: 0.9rem;
    text-align: left;
}

.sign-up-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin: 1.5rem auto;
}

.logo-box {
    width: 200px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grad-logo-panel .logo-box {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

.grad-logo-panel {
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.grad-fineprint-logo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

/* Program of Interest dropdown panel */
body .programSelectPanel {
    width: min(92vw, 700px) !important;
    max-width: min(92vw, 700px) !important;
}

body .programSelectPanel .ui-selectonemenu-items-wrapper {
    max-height: 50vh !important;
}

body .programSelectPanel .ui-selectonemenu-item {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    height: auto !important;
    padding: 0.75rem 1rem !important;
}


@media screen and (orientation: landscape) and (max-width: 950px) {
    body .programSelectPanel {
        width: min(94vw, 820px) !important;
        max-width: min(94vw, 820px) !important;
    }

    body .programSelectPanel .ui-selectonemenu-item {
        white-space: normal !important;
        line-height: 1.35 !important;
        height: auto !important;
    }
}


@media (max-width: 600px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

#content, 
#main, 
#wrapper, 
#page, 
.container, 
.content {
        width: 80% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    } 

    #signupContainer {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        margin: 0 auto !important;
        box-sizing: border-box;
    }

    #signupContainer .formRow {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1.2rem 0;
        box-sizing: border-box;
    }

    #signupContainer input,
    #signupContainer .ui-inputfield,
    #signupContainer .ui-selectonemenu,
    #signupContainer .ui-selectonemenu-label {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; 
        box-sizing: border-box;
    }

    .ui-selectonemenu-panel {
        width: 100% !important;
        left: 0 !important;
        box-sizing: border-box;
    }

    .pageMainHeader {width: 100% !important;
        max-width: 96% !important;
        padding: 0 1rem !important;
        text-align: center;
        box-sizing: border-box;
        overflow-wrap: break-word;}
        
    .signupHeader {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
        text-align: center;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

    #optInBox {
        width: 80% !important;
        max-width: 100% !important;
        padding: 1rem 0 !important;
        box-sizing: border-box;
    }

    #aglForm .ctaButton {
        width: 80% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        box-sizing: border-box;
    }

    #aglForm .ui-selectonemenu {
        width: 80% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #aglForm .ui-selectonemenu-label {
        width: 100% !important;
        white-space: normal !important; 
        line-height: 1.3;
        padding-right: 2.5rem; 
    }

    #aglForm .ui-selectonemenu-trigger {
        right: 0 !important;
        width: 2rem !important;
    }

    .ui-selectonemenu-panel {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        box-sizing: border-box;
    }

    .ui-selectonemenu-item {
        white-space: normal !important;
        line-height: 1.4 !important;
        padding: 0.75rem 1rem !important;
    }

    body, html {
        overflow-x: hidden !important;
    }
}


/*=============== END SIGN UP GRAD LOAN PAGE ======================*/


/*=============== GRADUATE/PROFESIONNAL PAGE START ======================*/


/* SHARED GRAD LOAN ACCORDION   */

.grad-loan-accordion {
    margin-top: 1rem;
}

.grad-loan-overview-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #004b8d;
}

.accordion-professional {
    /* any changes specificaly for Graduate/Professional page */
}

.accordion-medical {
    /* hanges specifically for Medical/Dental page */
}


/*=============== END GRADUATE/PROFESIONNAL PAGE ======================*/

.home-get-started-wrapper {
  max-width: 1200px;
  margin: 4rem auto 3rem auto;
  text-align: center;
}

.home-get-started-wrapper .get-started-btn {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 1rem 2.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0 auto;
}

.blue-divider {width: 100%; border-top: 10px solid #2442AE; margin: 0;}


/********************Graduate FAQ******************/

/* normal state */
body #faq_main .faq-menu a,
body #faq_main .faq-menu a:link,
body #faq_main .faq-menu a:visited {
  color: #003399 !important;
  text-decoration: none !important;
}

/* hover state */
body #faq_main .faq-menu a:hover,
body #faq_main .faq-menu a:focus,
body #faq_main .faq-menu a:active {
  color: #ffffff !important;
  text-decoration: none !important;
}


body #faq_main .faq-menu a *,
body #faq_main .faq-menu a:link *,
body #faq_main .faq-menu a:visited * {
  color: #003399 !important;
  text-decoration: none !important;
}

body #faq_main .faq-menu a:hover *,
body #faq_main .faq-menu a:focus *,
body #faq_main .faq-menu a:active * {
  color: #ffffff !important;
  text-decoration: none !important;
}

body #faq_main .faq-menu li:hover > a,
body #faq_main .faq-menu li:hover > a * {
  color: #ffffff !important;
  text-decoration: none !important;
}




/*************** no tabs pages styles ends ***************/

.aol-list {
	list-style: disc;
	padding-left: 2em;
}

@media screen and (max-width: 41.5625em) { /* 665px */
	#contactPhoneContain span {margin-left: 2em;}
}

@media screen and (max-width: 37.5em) { /* 600px */
	.homepage-body #page_content #page_gutter .section, 
	.page-wrap .section .intro {padding:0 3%; /* background:#deefe7; */}


	.applyIntro { font-size: 2.4em }

	[id*="product_table"].ratesTable {
		width: 100%;
		margin: 1% 0% 2% 0%;
		
	}
	[id*="product_table"].ratesKyTable {
		width: 100%;
		margin: 1% 0% 2% 0%;
		
	}
	
	.ratesStatements {margin-left: 0; text-align: center;}

	[id*="product_table"].ratesTable .ratesCol {
		font-size: 0.9em;
	}
	[id*="product_table"].ratesKyTable .ratesCol {
		font-size: 0.9em;
	}
	
	[id*="product_table_data"] [role="row"] .pnlRatesCol, 
	[id*="product_table_data"] [role="row"] .pnlRatesColRepay {
		font-size: 0.9em;
	}

	#calcMain #rates_panel {
		max-width: 98%;
	}

	#calcMain #rates_panel [id*="rates_tab"] {
		padding: 1em 0em;
	}
	
	.prod-desc {margin:0 0%;}
}

@media screen and (max-width:28.75em) { /* 460px */
	#accordionPanel_main .logo {margin-top:1em;}
	#page_gutter .ui-panel .tabs-forms .ui-accordion-header {
		font-size: 14px;
		padding-left: 1em;
		min-height: 12px;
	}
	#page_gutter .ui-panel .tabs-forms .ui-accordion-header .mobileTriangle {
		float: right;
		position: relative;
		bottom: 30px;
	}
	

	.itemApply:not(:nth-child(3)) {
		margin-right: 0;
	}
	
}

@media screen and (max-width: 26.875em){ /* 430px */
	#page_content .with_image {width:98%;}
	#accordionPanel_main .logo {display:none;}
}

@media screen and (max-width: 22.5em) { /* 360px */
	#alert\:alert_home {width:90%; margin-top:2em;}
	
}

@media screen and (min-width:400px) {

	[id*="calcLeftCol"] .curr-loan-inputs, #rowSimpleCalcStats .curr-loan-inputs {width:16em;}

	#loanChart { margin-left:12%; }

	/* [id*="compare_table"].compareTable .compareCol {
		font-size: 0.5rem;
	}
	[id*="compare_table"].compareTable .compareSubHead {
		padding: 0.2rem;
	} */

	[id*="compare_table"].compareTable .compareCol.left-col {
		width: 25%;
	} 
	
}	

@media screen and (min-width:500px) {
	[id*="calcLeftCol"] .curr-loan-inputs, #rowSimpleCalcStats .curr-loan-inputs {width:18em;}

	#loanChart { margin-left:18%; }

	.itemApply { margin-right: 1.5em; }
	
}	

@media screen and (max-width:500px) {
	/* [id*="compare_table"].compareTable .compareCol {
		font-size: 0.4rem;
	}
	[id*="compare_table"].compareTable .compareSubHead {
		padding: 0.15rem;
	} */
	
}	

@media screen and (min-width:35.625em){ /* 570px */
	[id*="calcLeftCol"] .curr-loan-inputs, #rowSimpleCalcStats .curr-loan-inputs {width:19em;}
	
	#loanChart { margin-left:24%; }
	
}

@media screen and (min-width: 37.5em){ /* 600px */
	#body .separator {border-bottom:1px solid #cccece; width:97%; margin:auto;padding-top:3em;}

	[id*="calcLeftCol"] .curr-loan-inputs, #rowSimpleCalcStats .curr-loan-inputs {width:20em;}	

	.itemApply { margin-right: 2em; }

	[id*="product_table"].ratesTable {
		width: 90%;
		margin: 1% 5% 2% 5%;
	}
	
	[id*="product_table"].ratesKyTable {
		width: 90%;
		margin: 1% 5% 2% 5%;
	}
	
	.ratesStatements {margin-left: 0;}

	[id*="compare_table"].compareTable { width: 90%;}

	[id*="compare_table"].compareTable .compareCol {
		font-size: 0.6rem;
	}
	[id*="compare_table"].compareTable .compareSubHead {
		padding: 0.25rem;
	}

	[id*="compare_table"].compareTable .compareSubHead:nth-child(5) {
		width: 12rem;
		padding: 0.5rem;
	}
	
}

@media screen and (min-width: 40em){ /* 640px */
	.calc-field-box p, .compare-field-box p {font-size: 0.85em;}

	[id*="calcLeftCol"] .curr-loan-inputs, #rowSimpleCalcStats .curr-loan-inputs {width:12em;}
	
	#loanChart { margin-left:0%; }

	[id*="compare_table"].compareTable .compareCol {
		font-size: 0.65rem;
	}
	[id*="compare_table"].compareTable .compareSubHead {
		padding: 0.3rem;
	}
	
}

@media screen and (min-width: 43.75em){ /* 700px */
	#page_content .section-main-content {margin-bottom:2em}
	#page_content .with_image {width:80%;}
	.calc-field-box p, .compare-field-box p {font-size: 0.9em;}

	[id*="calcLeftCol"] .curr-loan-inputs, #rowSimpleCalcStats .curr-loan-inputs {width:14em;}
	
	#loanChart { margin-left:4%; }

	[id*="compare_table"].compareTable .compareCol {
		font-size: 0.7rem;
	}
	[id*="compare_table"].compareTable .compareSubHead {
		padding: 0.4rem;
	}
}
@media screen and (max-width: 43.75em){ /* 700px */
	.rates-tier-img {display: none;}
}

@media screen and (min-width: 52.5em){ /* 840px */
	.ui-state-active .ui-icon, .ui-state-default .ui-icon {background: none;}
	.ui-state-active .ui-icon-triangle, .ui-state-default .ui-icon-triangle {
		width: 0; 
		height: 0; 
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 10px solid #003366;
		margin-top:6px; 
		float:left;
	}
	.ui-state-active .ui-icon-triangle, .ui-state-default .ui-icon-triangle:active {
		width: 0; 
		height: 0; 
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 10px solid #003366;
		margin-top:9px; 
		float:left;
	}
	#page_content .logo {float:right;margin-right:1em;}

	[id*="calcLeftCol"] .curr-loan-inputs, #rowSimpleCalcStats .curr-loan-inputs {width:10em;}

	.itemApply:nth-child(3) { margin-top: 0; }

	[id*="compare_table"].compareTable .compareCol {
		font-size: 0.75rem;
	}
	[id*="compare_table"].compareTable .compareSubHead {
		padding: 0.5rem;
	}
}
@media screen and (min-width: 56.25em){ /* 900px */
	body #page_content #page_gutter .with_image {width:85%;}

	[id*="calcLeftCol"] .curr-loan-inputs, #rowSimpleCalcStats .curr-loan-inputs {width:12em;}

	#loanChart { margin-left:8%; }

	.itemApply { margin-right: 3em; }
	[id*="product_table"].ratesTable { width: 80%; margin: 1% 12% 0% 12%; }
	
	[id*="product_table"].ratesKyTable { width: 80%; margin: 1% 12% 0% 12%; }
	
	[id*="compare_table"].compareTable { width: 85%;}
	
	[id*="compare_table"].compareTable .compareCol {
		font-size: 0.9rem;
	}
	[id*="compare_table"].compareTable .compareSubHead {
		padding: 0.5rem;
	}
}

@media screen and (min-width: 64.0em){ /* 1024px */
	[id*="loanChart"] {margin-left: 5%;}
	[id*="calcStatsContain"] { margin-left: 3rem;}
	.statsBox {margin-bottom:2em;}
	
}

@media screen and (min-width: 87.5em){ /* 1400px */
	[id*="calcLeftCol"] .curr-loan-inputs {
		width:14em;
	}
	[id*="loanChart"] {margin-left: 5%;}

}

/*@media screen and (max-width: 52.5em){ /* 840px */
/*	.section-main-content .ui-accordion .ui-accordion-header .ui-icon {left: 1%; top: 50%;}
	.ui-widget, .ui-widget .ui-widget {width: 100%;}
	#contactUsForm\:inputUserEmail {width: 9.2em;}
	#contactUsForm\:inputEmailQC {width: 10.5em;}
	#contactUsForm\:btnContactUsSubmit {width: 10em;}
} */


body .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {text-shadow:none;border:none;}
body .ui-state-active:nth-of-type(even), .ui-widget-content .ui-state-active:nth-of-type(even), .ui-widget-header .ui-state-active:nth-of-type(even) {color:#003366; }

/* Chrome is adding a scrollbar to the panel content */
/* if in future add something that needs overflow visible then */
/* use the id of that element to add CSS to negate this property */

@media screen and (-webkit-min-device-pixel-ratio:0){ /* Chrome hack */
	#section .ui-accordion .ui-accordion-content {overflow:hidden;}
}


/* ===== contact us page ===== */
#content_main .ui-g,
#content_main .ui-grid { display: flex; flex-wrap: wrap; gap: 16px; }
#content_main .ui-g > [class*="ui-g-"],
#content_main .ui-grid > [class*="ui-g-"] { min-width: 0; }
@media (max-width: 840px){
  #content_main .ui-g > .ui-g-6,
  #content_main .ui-grid > .ui-g-6 { flex: 1 1 100%; }
}

#content_main, 
#content_main * { min-width: 0; }
#content_main [style*="width:"],
#content_main [style*="min-width:"] { max-width: 100% !important; }


@media (max-width: 840px){
  #content_main .ui-widget,
  #content_main .ui-widget .ui-widget { width: auto; max-width: 100%; }
}

#content_main #contactUsForm .ui-outputlabel,
#content_main #contactUsForm label { display:block; margin-bottom:6px; max-width:100%; }
#content_main #contactUsForm .ui-inputfield,
#content_main #contactUsForm textarea,
#content_main #contactUsForm input[type="text"],
#content_main #contactUsForm input[type="email"],
#content_main #contactUsForm .ui-button {
  width:100%; max-width:100%; box-sizing:border-box;
}

#content_main #contactUsForm textarea { width: 100% !important; }

@media (max-width: 600px){
  #content_main #contactUsForm\:btnContactUsSubmit { width:100% !important; }
}

#content_main .ui-accordion .ui-accordion-header { position:relative; padding-left:2.25rem; }
#content_main .ui-accordion .ui-accordion-header .ui-icon {
  left:.75rem; top:50%; transform:translateY(-50%);
  width:1em; height:1em; margin-top:0;
}

@media (max-width: 840px){
  #content_main #contactPhoneContain span { margin-left: 0; }
}

#content_main p,
#content_main .hours { overflow-wrap:anywhere; }

#content_main .section-main-content,
#content_main .page-wrap,
#content_main #page_wrap,
#content_main #page_gutter { width:100%; max-width:100%; }

/*==== form on contact us page ====*/
#content_main #contactUsForm {
	max-width: 720px; 
	margin: 0;
	padding: 0 16px 0 0;
}

#content_main #contactUsForm label,
#content_main #contactUsForm .ui-outputlabel {
	display: block;
    margin-bottom: 6px;
  	text-align: left;
}

#content_main #contactUsForm .ui-inputfield,
#content_main #contactUsForm textarea {
  	width: 100%;
  	max-width: 36rem;  
  	box-sizing: border-box;
  	margin: 0;
}

#content_main #contactUsForm\:btnContactUsSubmit {
  	width: auto !important;
  	margin: 1rem 0 0 0; 
  	padding: 10px 16px;
  	display: inline-flex;
  	align-items: center;
  	justify-content: center;
}

@media (max-width: 480px) {
  #content_main #contactUsForm {
    max-width: 100%;
    padding: 0 12px;
  }
  #content_main #contactUsForm .ui-inputfield,
  #content_main #contactUsForm textarea {
    max-width: 100%;
  }
  #content_main #contactUsForm\:btnContactUsSubmit {
    width: 100% !important;
  }
}

/* ael homepage centering fix (doest mess with loanapp stuff anymore)*/
body.homepage-body #main_section,
body.homepage-body #main_section_content,
body.homepage-body #home_image,
body.homepage-body #home-info-desktop,
body.homepage-body #teContainer,
body.homepage-body #fineprint-box,
body.terminalpages-body #home-info-desktop {
  box-sizing: border-box !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media screen and (min-width: 600px) and (max-width: 699px) {
  #main_section,
  #main_section_content,
  .section,
  .ui-panel-content,
  #page_content,
  #page_gutter,
  .page-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}