/* Main Layout ------------------------------------------------------------------------------------------------ */  
      /* CSS Reset */
      *{ box-sizing: border-box; margin: 0; padding: 0;}
      body { padding: 40px;}
      html, body{ background-image: linear-gradient(to right bottom, #e6e6e9, #e9e9ec, #ececf0, #efeff3, #f2f2f7, #f2f2f7, #f2f2f7, #f2f2f7, #efeff3, #ececf0, #e9e9ec, #e6e6e9); height: 100%; width: 100%; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #213A5E;}
      .LoginFrame{ display: inline; float: left; width: 420px; height: 100%; background-color: #fff; border-radius: 10px; box-shadow: 0px 7px 20px -10px rgb(45 60 126 / 40%); padding:40px; position: relative; overflow: hidden;}
      .VideoFrame {display: inline; float: right; width:calc(100% - 460px); height: 100%; background-color: #fff; border-radius: 10px; box-shadow: 0px 7px 20px -10px rgb(45 60 126 / 40%); margin-left: 40px; overflow: hidden;  position: relative;}

      .FontWeightOptions{font-family:"HelveticaNeue-Medium","Helvetica Neue Medium","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;}
      .TitleFont {font-family: "Lato", sans-serif; font-weight: 600;}

      .LeftStripe{position:absolute;left:0;top:0;width:10px;height:100%;background-color:#dd3091;}
      .LeftStripe.Error { background-color: #d7403a; }

      /* Save Button Animation */
      .Button.Loading,
      .Button.Loaded,
      .Button.LoadedFail { text-align: center!important; letter-spacing: normal!important; color: transparent; position: relative;}
      .Button.Loading::before,
      .Button.Loaded::before,
      .Button.LoadedFail::before {content:'app_badging';font-size:22px;font-family:'Material Symbols Outlined';display:block;color:#fff;position:absolute;width:100%;left:0;top:0;height:100%;display:flex;align-items:center;justify-content:center;line-height:normal}
     .Button.Loading::before {animation:SavingSpin 1s linear infinite;}
     .Button.Loaded::before {content: 'check_circle';}
     .Button.LoadedFail::before {content: 'release_alert';}
      @keyframes SavingSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

      /* Chat Box Hide */
      .ChatWindow, .ChatEndPromptMessage{ display: none!important; }

    /* Login Screens --------------------------------------------------------------------------------------------*/

      .Screens{ width: 340px; margin-left: -400px; position: absolute;top: 0; display: none;}

    /* Video Frame ----------------------------------------------------------------------------------------------*/

     .PlayVideo{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 1s ease-in;}
     .PlayVideo.Loaded { opacity: 1;}
     .VideoFrame .Copyright{position:absolute;bottom:5px;right:-1px;font-size:11px;background-color:#f2f3f2;padding:2px 5px 2px 5px;border-radius:5px 0 0 5px;color:#403c3c;opacity:.85;}
     .GTwoBadge{background-image:url('/resources/login/users-love-us.png');position:absolute;top:14px;right:12px;width:85px;height:99px;background-size:contain;background-repeat:no-repeat;opacity:.85;}

    /* Login Frame ---------------------------------------------------------------------------------------------*/

    .EbBadge{ display: inline; float: left; width: 70px; height: 70px; line-height: 70px; text-align: center; background-color: #2d3c4a; color: #fff; font-size: 50px; border-radius: 5px 5px 5px 5px; margin-left: calc(50% - 35px); z-index: 1; margin-top: 50px; box-shadow: 0px 0px 13px -10px rgb(45 60 126 / 40%); cursor: pointer;}
    .EbBadge::before{ content:'cloud'; font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'}
    .WelcomeTxt,
    .WelcomeTxtDesc{ display:inline; float:left; width:100%; text-align:center; color: #213A5E; line-height: 30px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: 0.7px; margin-top:20px; margin-bottom:40px}
    .WelcomeTxtDesc {font-size: 14px;line-height: 20px; margin-top: 0;}
    .EbBadge:hover { animation:swinging 1s ease-in-out forwards infinite; box-shadow: 0px 4px 10px -3px rgb(45 60 76 / 50%)!important;}
    @keyframes swinging{0%{transform:rotate(10deg);}50%{transform:rotate(-5deg)}100%{transform:rotate(10deg);}}

    .InputField{display: inline; float: left; width: 100%; height: 35px; border: 2px solid #2d3c4a; outline: none; font-size: 18px; color: #414141; border-radius: 10px; margin-top: 6px; box-sizing: border-box; padding: 10px; padding: 20px 10px; margin-bottom:20px}
    .InputLabel {display: inline; float: left; width: 100%; position: relative;}
    .Button{display:inline;float:left;line-height:25px;width:100%;font-weight:500;text-align:center;border-radius:10px;color:#fff;font-size:18px;letter-spacing:1.2px;padding:10px 15px;box-shadow:0 5px 8px -2px rgb(35 40 126 / 20%);cursor:pointer;background-image:linear-gradient(to bottom,#3a4d5e,#344859,#2f4354,#2d3f50,#2d3c4a);}
    .Button .GoArrow{display:inline-flex;vertical-align:middle;font-size:24px;margin-top:-4px;}
    .BtnHover:hover { transform: scale(1.03)!important; box-shadow: 0px 4px 10px -3px rgb(45 60 76 / 50%)!important;}

    /* Honey Pot Login */
    .HnyPt{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden;}

    /* Errors */
    .InputLabel.Error,
    .LoginAttemptsCounter .Title.Error  { color:#d7403a; }
    .InputLabel.Error::after{content:'Invalid';position:absolute;right:9px;font-style:italic;font-size:14px;top:6px;}
    .InputField.Error { border-color:#d7403a;}

    .ForgotLogins,
    .ForgotLoginsReturn {display:inline;float:left;width:100%;margin-top:20px;font-size:12px;text-align:center;font-style:italic;color:#737373; cursor: pointer;}
    .ForgotLogins:hover span,
    .ForgotLoginsReturn:hover span { color: #414141;}
    .ForgotLogins span,
    .ForgotLoginsReturn span { text-decoration: underline;}

    /* Footer Advert */
    .FooterAdFrame,
    .LoginAttemptsCounter{position:absolute;bottom:10px;left:0;width:calc(100% - 40px);padding:20px;margin-left:20px; cursor: pointer; width: 340px;     width: 380px; border-radius: 10px;}
    .FooterAdFrame {display: none;}
    .FooterAdFrame .Title,
    .LoginAttemptsCounter .Title { font-size: 18px; display: inline; float: left; width: 100%; margin-bottom: 3px;}
    .FooterAdFrame .SubTitle,
    .LoginAttemptsCounter .SubTitle{font-size:14px;display:inline;float:left;width:100%;font-style:italic;color:#737373;}
    .FooterAdFrame:hover .material-symbols-outlined{ transform: scale(1.1) }
    .FooterAdFrame:hover .SubTitle,
    .LoginAttemptsCounter:hover .SubTitle { color:#414141;}
    .LoginAttemptsCounter { margin-left: -400px;}
    .LoginAttemptsCounter .material-symbols-outlined,
    .FooterAdFrame .material-symbols-outlined{display:inline;float:left;width:15%;height:39px;line-height:39px; font-size: 40px;}
    .LoginAttemptsCounter .Title,
    .LoginAttemptsCounter .SubTitle,
    .FooterAdFrame .Title,
    .FooterAdFrame .SubTitle { width: 85%;}
    .FooterAdFrame:hover .Title, 
    .LoginAttemptsCounter:hover .Title{ text-decoration: underline; }
    .LoginAttemptsCounter:hover .material-symbols-outlined{ transform: scale(1.05) }


    /* Password Reset Screen  ---------------------------------------------------------------------------------*/

    /* Password Reset Screen */
    .PasswordToggle{position:absolute;right:9px;top:auto;bottom:-43px;font-size:20px;cursor:pointer;}
    .PasswordToggle::before{content:'visibility_off';font-family:'Material Symbols Outlined';}
    .PasswordToggle.View::before { content: 'visibility';}
    .PasswordToggle:hover { opacity: 0.8; }

      /* Content > Input Row > Password  Strength Indicator */
    .PasswordStrength{display:none;float:left;width:100%;margin-bottom:20px;background-color:#fafafa;padding:10px;border-radius:10px;}
    .PasswordStrength .CheckRow { display: inline-block; width: 100%; margin-top: 5px; font-size: 13px;}
    .PasswordStrength .CheckRow::before{ content: 'cancel'; color: #999; font-weight: normal; font-family: 'Material Symbols Outlined'; font-size: 16px; margin-right: 5px; display: inline-flex; vertical-align: middle; margin-top: -2px;}
    .PasswordStrength .CheckRow.Pass::before { content: 'check_circle'; color: #2e5dc4; font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}
    .PasswordStrengthSpacingApply { margin-top: 141px!important;}

    /* Password Match Error */
    .InputLabel.Error.PassMatch::after { content: 'Does not match'; top: 1px;}
    .InputLabel.Error.PassMatchNoLabel::after { content:''}
    .InputLabel.Error.PassWeak::after { content: 'Too weak'; top: 1px;}
    label[for="Input_SetPasswordConfirm"].PassWeak::after { content:''!important}

  /* Small Screen/Mobile Styles -------------------------------------------------------------------------------*/

    /* Mobile Styles */
    @media screen and (max-width: 767px) {
      body { padding: 20px; }
      .LoginFrame { width: 100%; margin-left: 0;  }
      .VideoFrame { display: none;}
      .Screens{ width: calc(100% - 80px); }
      .LeftStripe { display: none; }
    }
    
    .MobileNotice{position:fixed;bottom:31px;left:50%;transform:translateX(-50%);background:#fffae6;color:#fff;padding:12px 20px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.2);font-size:16px;z-index:9999;width:84%;font-size:14px;background-color:#2d3c4a;}
    .MobileNotice span {font-style: italic;}

    /* Small Screen */
    @media (max-height: 680px) {
      body { padding: 5px; }
      .LeftStripe { display: none; }
      .EbBadge { margin-top: 30px; }
      .LoginFrame { overflow-y: auto; border-radius: 10px 0 0 10px;}
      .Screens::after { content: ''; position: inline; float: left; height: 20px; width: 100%; }
      .WelcomeTxt, .WelcomeTxtDesc { margin-bottom: 20px;}
      .EbBadge { width: 60px; height: 60px; line-height: 60px; margin-left: calc(50% - 30px); }
      .EbBadge::before { font-size: 44px; }
      .VideoFrame{margin-left:0;width:calc(100% - 420px);border-radius:0 10px 10px 0;box-shadow:11px 11px 20px -10px rgb(45 60 126 / 40%);}
      .FooterAdFrame,
      .LoginAttemptsCounter1{ bottom: 0px; }
    }
    @media (max-height: 680px) {
      .FooterAdFrame, .LoginAttemptsCounter { display: none!important;}
    }