/*********************************** Login/Intersitial Page Styles ************************************************/
body.interstitial .ZoneBoxHolder { width:856px; margin: 16vh auto 1em auto; background-color:transparent; }
body.portalLogin .ZoneBoxHolder, body.portalPasswordReset .ZoneBoxHolder {  background:transparent; } 
body.interstitial #FormControls { background-color:transparent; }
body.interstitial .colZoneContainer { height:auto;  border-radius:0.25em; }

body.portalLogin .contentZone, body.portalPasswordReset .contentZone{border-radius:0.25em; padding-bottom:0.25em;}
body.interstitial .leftColZone, body.interstitial .contentZone, body.portalLogin .contentZone, 
body.portalPasswordReset .contentZone { width:50% !important; background-color:#eee; flex-grow:1; flex-basis:50%; }
body.interstitial .contentZone > div, body.interstitial .leftColZone > div { border:none; width:auto !important; }
body.interstitial.singleColForm .leftColZone { display:none; }
body.interstitial .rightColZone { display:none; }
body.interstitial h1 { text-align:center; }
body.interstitial .subPanel { margin: 1em;}
  
 /* border radii for login page  */
body.interstitial.twoColForm .leftColZone,  body.interstitial.twoColForm .leftColZone > div { border-top-left-radius: 0.25em; border-bottom-left-radius:0.25em; }
body.interstitial.twoColForm .contentZone,  body.interstitial.twoColForm .contentZone > div { border-top-right-radius: 0.25em; border-bottom-right-radius:0.25em; }
body.interstitial .widgetWrapper { margin-top:0.5em; }
body.interstitial.singleColForm .contentZone,  body.interstitial.singleColForm .contentZone > div { border-radius: 0.25em; }

body.interstitial.twoColForm .contentZone { position:relative; }
body.interstitial.twoColForm .contentZone .zonePadding, body.interstitial.twoColForm .contentZone .widgetWrapper,
body.interstitial.twoColForm .contentZone .widgetWrapper > div, body.interstitial.twoColForm .contentZone .WidgetBody { position:absolute; left:0; right:0; top:0; bottom:0;}

body.interstitial.singleColForm .contentZone .widgetWrapper {position:relative;}
body.interstitial .colZoneContainer::after { content: 'Essent'; display:block; 
    background-image:url('/images/CRM/essent-logo-web.png'); width:189px; height:180px; text-indent: -10em; overflow:hidden;
    position:absolute; left:calc(50% - 94px); top:calc(16vh - 92px); background-size:contain; }
body.interstitial.singleColForm .contentZone .widgetWrapper:first-child { padding-top: 80px; }

 /* login page and interstitial config */
body.interstitial .Login div.formCol.FormBlock { margin-top:0; }
body.interstitial .Login .fieldBlock.footer { text-align:right; min-height:auto;}
body.interstitial .footer .subordinate {  float:left; font-size: 90%; margin-top:0.1em; text-decoration:none; }
body.interstitial .footer a.subordinate:hover { text-decoration:none; }
body.interstitial .fieldBlock.remember { min-height:auto; font-size:90%; }
body.interstitial .Login { font-size: 125%;}
body.interstitial .Login .loginSection { font-size: 110%; min-width: 428px; display:flex; flex-direction:column; justify-content:space-between; min-height:405px; }
body.interstitial .Login .loginSection .logo { width: 290px; margin:2em 0 0 1em; }
body.interstitial .Login .fieldBlock.footer .LinkButton::before { content: '«'; display: inline-block; margin-right:0.2em; height:0.6em; width:0.5em; 
                                                                  margin-bottom:0.3em; line-height:0.5em; vertical-align:middle}

body.interstitial .systemFooter, body.portalLogin .systemFooter, body.portalPasswordReset .systemFooter { position: absolute; bottom: 0; left: 0; right: 0; }

body.interstitial.twoColForm .systemFooter { display:none; }
body.interstitial .systemFooter::before, body.portalLogin .systemFooter::before, body.portalPasswordReset .systemFooter::before {
    content: ' '; display:block; background-image: url(../../Images/CRM/essent-logo-web.png); background-size:cover; height:45px; width:45px;
    position:absolute; right: calc(50% - 22px); top:-35px;
}
body.interstitial .Login .loginSection .minimalContent { min-height:auto; padding:0}
body.interstitial .Login .loginSection .minimalContent label { font-size:80%; line-height:0.8em; display:block; }
body.interstitial .Login .loginSection .minimalContent input { background:transparent; padding: 0; height:auto;font-size:90%; line-height:0.9em; }

 /* demo section on right of login*/
body.interstitial .demoRequest { width:413px;  margin:15px 15px 15px 0; position:absolute; bottom:0; top:0; }

body.interstitial .demoRequest a {
    display: inline-block; color:black; text-decoration:none; padding: 0 1em;
    position:absolute; bottom:15px; right:15px; font-size: 20px; height:35px;
}

body.interstitial .demoRequest span { font-size: 12pt; font-weight: 700; display:block; width:200px; text-align:right;
    position:absolute; right: 15px; bottom:65px;}
body.interstitial .demoRequest .demoRequestContent { position: absolute; bottom: 0; right: 0; width: 100%; }
.LinkButton { background-color:transparent; color: #0082C6; padding: 0; text-transform:initial; font-size:inherit; font-weight:inherit; display:inline-block; text-align:left; }
.LoginMessage { display:block; color: red; padding: 1em 1em 0 1em; line-height:1.4em; font-size:85%; }
.resetSentMessage  { padding: 2em 2.5em; text-align:center; font-size:125%;line-height: 1.4em; padding-bottom:1em; }
.resetReturn { display:block; text-align:center; padding: 1em; }

/* Login Footer */
 body.interstitial footer, body.portalLogin .footerZone footer  { margin:0.3em 1em; font-size:90%; }
 body.interstitial footer .copy, body.interstitial footer .links { width:50%; display: inline-block; }
 body.interstitial footer a, body.interstitial footer a:active, body.interstitial footer a:hover, body.interstitial footer a:visited,
 body.portalLogin .footerZone footer a, body.portalLogin .footerZone footer a:active, body.portalLogin .footerZone footer a:hover, 
 body.portalLogin .footerZone footer a:visited {  text-decoration:none; }
 body.interstitial footer .links { text-align:right; }
 body.interstitial footer .links a,  body.portalLogin .footerZone footer a { display:inline-block;  padding: 0 0.3em; line-height:1; }
 body.interstitial footer .links a:last-child,  body.portalLogin .footerZone footer a:last-child { padding-right:0; border-right: none; }

 /* MFA setup */
.MFASetup { padding-bottom: 1em; }
.MFASetup footer { text-align:right; }
.MFASetup footer button.option { float:left; margin-right: 1em;  }
.MFASetup footer .back { float:left; }
.MFASetup footer .back::before { 
    content: "\00ab"; margin-right:0.3em;vertical-align:baseline; font-size:120%; }
.MFASetup footer .next::after { 
    content: "\00bb"; margin-left:0.3em;vertical-align:baseline; font-size:120%; }
.MFASetup .securityInfo > .entry, .MFASetup .appConfig, .MFASetup .desktopConfig { padding:1em 0; min-height:150px; padding-left:40%; }
.MFASetup .codeCol { padding-right:45%; }
.MFASetup .codeCol, .MFASetup .securityInfo {  min-height:300px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start }
.MFASetup #divCodeColQR, .MFASetup #divCodeColVerify {text-align:center; align-items:center; }
.MFASetup .codeCol p { width:80%; margin:0 auto; }
.MFASetup .codeCol img { width:200px; height:200px; display:block; margin: 0 auto;  }
.MFASetup #divCodeColManual, .MFASetup #divCodeColVerify { padding-left:5%; }
.MFASetup ol {padding-left:1em; }
.MFASetup ol li { padding-bottom:0.6em; }
.MFASetup strong { display:block; font-size:120%; }
.MFASetup .appStores { margin: 1em 0 3em 0; } 
.MFASetup .appStores a{ display:inline-block; vertical-align: middle;height: 40px; overflow: hidden;}
.MFASetup .appStores img{ max-height: 60px; display: inline; position: relative; top: -10px;}
.MFASetup .compactInput { width:70%; display:block; margin: 1em auto; text-align:center; font-size: 130%; font-weight: 600; }
.MFASetup footer span { margin-right:1em; }
.MFASetup .subPanel.mfaComplete { text-align:center; padding:2em; }
.MFASetup .mfaComplete img {height:15vh; width:15vh; }
.MFASetup .mfaComplete h3 { font-size:160%; }

.MFASetup .extra { background-repeat:no-repeat; background-position: top 1em left 1em; background-size: 35% 11em;  }
.MFASetup .attacker { background-repeat:no-repeat;background-position:15% 0 }
.MFASetup .appConfig { background-repeat:no-repeat;background-position:7% 0  }
.MFASetup .desktopConfig { background-repeat:no-repeat; background-position:0 80px; background-size: 35% 55%;  }
.MFASetup #divSetupQR { background-repeat:no-repeat; background-position:right 15% top 1em }
.MFASetup #divCodeColVerify {  background-repeat:no-repeat;background-position:right 15% center }

div.errMsgBlock.errBlock { margin: 1em; display:flex; flex-direction:column; height:370px; text-align:center; justify-content:center; }
.errMsgBlock br { display:none; }
.errMsgBlock .errImage { display: block; float:none; margin: 0 auto; width:15vh; padding: 0;margin: 0 auto 1em auto; order:1}
.errMsgBlock.errBlock .errHeader { order:2 }
.LockoutMessage .errHeader { display:none; }
.errMsgBlock.errBlock > p {order:3; font-size:130%; }
.errMsgBlock.errBlock > a {order:4; }


/* mobile login/interstitial styles */
@media only screen and (max-width:1024px) {
    body.interstitial { margin:0; padding:0;  }
    body.interstitial #FormControls .ZoneBoxHolder { width:92% !important; margin: 70px auto 4% auto; box-sizing:border-box; }
    body.interstitial.singleColForm .contentZone .widgetWrapper:first-child { padding-top: 40px; }
    
    body.interstitial .loginSection .logo { width: 200px; margin: 3em auto 0 auto;  }

    body.interstitial .leftColZone,  body.interstitial .leftColZone > div { border-radius: 0.25em 0.25em 0 0; }
    body.interstitial .contentZone,  body.interstitial .contentZone > div { border-radius: 0 0 0.25em 0.25em; }
    
    body.interstitial .ZoneBoxHolder .leftColZone { box-sizing:border-box; }
    body.interstitial .contentZone .zonePadding { padding-bottom:15px; }

    body.interstitial .Login .loginSection { max-width:100%; min-width:200px; min-height:0 }

    body.interstitial .colZoneContainer::after { width: 100px; height: 95px; left: calc(50% - 50px); top: 25px;  }

    body.interstitial.twoColForm .contentZone .widgetWrapper:first-child { margin-top: 0; }
    body.interstitial.twoColForm .contentZone .zonePadding, body.interstitial.twoColForm .contentZone .widgetWrapper, 
    body.interstitial.twoColForm .contentZone .widgetWrapper > div, body.interstitial.twoColForm .contentZone .WidgetBody { position:static; }

    body.interstitial .demoRequest  { width: calc(100% - 30px); position:relative; min-height: 400px; margin: 0 15px 15px 15px; }

    body.interstitial .loginSection { text-align:center; min-width: 300px; max-width:300px;  }
    body.interstitial .loginSection .FormBlock { text-align: left; }

    /*shrink text + margins*/
    body.interstitial .fieldBlock.remember > * {font-size: 90%; }
    body.interstitial .loginSection .FormBlock.formCol { padding-top:0; padding-bottom:0; }

    /*rearrange footer*/
    body.interstitial footer { text-align:center; display:flex; flex-direction:column; margin-top:3em }
    body.interstitial footer > button.option, body.interstitial footer > button.back { margin-left: 0;  margin-right:0; margin-bottom:0.5em; }
    body.interstitial footer .copy, body.interstitial footer .links { width:auto; text-align:center; }
    body.interstitial footer .links {order: 1; }
    body.interstitial footer .copy { order: 2; }

    .MFASetup #divCodeColQR { padding:0; background-image:none; }
    .MFASetup .securityInfo > .entry, .MFASetup .appConfig{ padding:7em 1em 0 1em; min-height:150px;  }
    .MFASetup .extra, .MFASetup .attacker, .MFASetup .appConfig { background-position:50% 0.5em; background-size: auto 6em;  }
}
 
/*********************************** END Login/Interstitial Page Styles ************************************************/