@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@font-face {
  font-family: 'OTSansBold';
  src: url('/fonts/otsans-bold.woff2') format('woff2'), url('/fonts/otsans-bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'OTSansLight';
  src: url('/fonts/otsans-light.woff2') format('woff2'), url('/fonts/otsans-light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'OTSansRegular';
  src: url('/fonts/otsans-regular.woff2') format('woff2'), url('/fonts/otsans-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "OpenText Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/OpenTextSans_W_Rg.eot");
  src: url("../fonts/OpenTextSans_W_Rg.woff2") format("woff2"), url("../fonts/OpenTextSans_W_Rg.woff") format("woff");
}
@font-face {
  font-family: "OpenText Sans";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/OpenTextSans_W_Lt.eot");
  src: url("../fonts/OpenTextSans_W_Lt.woff2") format("woff2"), url("../fonts/OpenTextSans_W_Lt.woff") format("woff");
}
@font-face {
  font-family: "OpenText Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/OpenTextSans_W_Bd.eot");
  src: url("../fonts/OpenTextSans_W_Bd.woff2") format("woff2"), url("../fonts/OpenTextSans_W_Bd.woff") format("woff");
}
@font-face {
  font-family: "OpenText Sans";
  font-style: normal;
  font-weight: 150;
  src: url("../fonts/OpenTextSans_W_Bd.eot");
  src: url("../fonts/OpenTextSans_W_Bd.woff2") format("woff2"), url("../fonts/OpenTextSans_W_Bd.woff") format("woff");
}
.root {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(61deg, rgb(9, 14, 44) 0%, rgb(18, 44, 105) 59%, rgb(7, 141, 179) 100%);
  background-color: #111b58;
  overflow: hidden;
}
.flex_col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px auto 0px;
  width: 45%;
}

.flex_col4 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}
@media (max-width: 991px) {
  .untitled-page .flex_col {
    width: 100%;
  }
}
.flex_col1 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}
@media (max-width: 991px) {
  .untitled-page .flex_col1 {
    width: 90%;
  }
}
@media (max-width: 767px) {
  .untitled-page .flex_col1 {
    width: 80%;
  }
}
.flex_row {
  position: relative;
  display: flex;
  gap: 0px 10px;
  width: 100%;
}
.image6 {
  position: relative;
  margin: 2.5px 0px;
  width: 233px;
  min-width: 0px;
}
.rect3 {
  position: relative;
  margin: 2.5px 0px;
  width: 1px;
  min-width: 0px;
  min-height: 44px;
  background-color: white;
}
.hero_title {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0px;
  font: 400 30px/1.00 "OTSansRegular", Helvetica, Arial, serif;
  color: white;
  letter-spacing: -0.38px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.highlight {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 0px 0px;
  font: 300 20px/1.33 "OTSansBold", Helvetica, Arial, serif;
  color: white;
  text-align: center;
}
.content_box1 {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 14px 0px 0px;
  width: 75%;
  background-color: rgba(255, 255, 255, 0.098);
  border-radius: 4px 4px 4px 4px;
}
.flex_row1 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0px 16px;
  margin: 11px 16px;
  width: 90%;
}
.image2 {
  position: relative;
  width: 24px;
  min-width: 0px;
  height: 24px;
}
.highlight2 {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0px;
  font: 300 16px/1.5 "OTSansBold", Helvetica, Arial, serif;
  color: white;
}
.flex_col2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 21px 0px 0px;
  width: 100%;
}
.info1 {
  position: relative;
  display: flex;
  align-items: center;
  font: 400 12px/1.33 "OTSansRegular", Helvetica, Arial, serif;
  color: white;
}
.flex_row2 {
  position: relative;
  display: flex;
  gap: 0px 16px;
  margin: 9px 0px 0px;
}
.content_box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 40px;
  min-width: 0px;
  background: var(--src) center center/100% 100% no-repeat;
}
.medium_title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px;
  font: 400 24px/1 "OTSansRegular", Helvetica, Arial, serif;
  color: white;
  text-align: center;
}
.text1 {
  position: relative;
  width: 40px;
  min-width: 0px;
  height: 48px;
  background-color: #28396a;
  font-size:18px;
  padding:12px 10px 10px 5px;
  display:block;
  border:none;
  /* border-bottom:1px solid #757575; */
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background-position: -298px 0;
  background-size: 298px 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  font-weight:400;
  border-radius: 5px;
  text-align: center;
}
.flex_col3 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px 0px;
  margin: 32px 0px 0px;
  width: 100%;
}
.btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 30px 0px 27px;
  width: 140px;
  max-width: 100%;
  font: 400 18px/1.33 "OTSansRegular", Helvetica, Arial, serif;
  color: #232e72;
  text-align: center;
  background: #fff center center/100% 100% no-repeat;
  padding: 8px 36px 8px 36px;
  border-radius: 50px !important;
}
.flex_row3 {
  position: relative;
  display: flex;
  gap: 0px 8px;
}
.highlight21 {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0px;
  font: 400 16px/1.5 "OTSansBold", Helvetica, Arial, serif;
  color: white;
  text-align: right;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2470588235);
}
.rect1 {
  position: relative;
  margin: 10px 0px 10px;
  width: 1px;
  min-width: 0px;
  min-height: 18px;
  background-color: white;
}
.highlight22 {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0px;
  font: 400 16px/1.5 "OTSansBold", Helvetica, Arial, serif;
  color: white;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2470588235);
}
.highlight23 {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0px;
  font: 400 16px/1.5 "OTSansBold", Helvetica, Arial, serif;
  color: white;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2470588235);
  text-align: center;
}
.flex_row4 {
  position: relative;
  display: flex;
  gap: 0px 9px;
  margin: 98px 0px 0px;
  width: 26.45%;
}
.info11 {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 4px 0px;
  min-width: 0px;
  font: 400 12px/1.33 "OTSansRegular", Helvetica, Arial, serif;
  color: white;
  text-align: right;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2470588235);
}
.rect2 {
  position: relative;
  margin: 4px 0px;
  width: 1px;
  min-width: 0px;
  min-height: 16px;
  background-color: white;
}
.info12 {
  position: relative;
  display: flex;
  align-items: center;
  margin: 4px 0px;
  min-width: 0px;
  font: 400 12px/1.33 "OTSansRegular", Helvetica, Arial, serif;
  color: white;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2470588235);
}
.info {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0px 0px;
  font: 400 12px/2 "OTSansRegular", Helvetica, Arial, serif;
  color: white;
  text-align: center;
  letter-spacing: -0.2px;
}
.text2 {
  position: relative;
  width: 300px;
  min-width: 0px;
  height: 48px;
  background-color: #fff;
  font-size:18px;
  padding:12px 10px 10px 5px;
  display:block;
  border:none;
  /* border-bottom:1px solid #757575; */
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background-position: -298px 0;
  background-size: 298px 100%;
  background-repeat: no-repeat;
  color: #298CC4;
  font-weight:400;
  border-radius: 5px;
  text-align: left;
}

.flex_col5 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 21px 0px 0px;
}

.btn1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 30px 0px 27px;
  width: 140px;
  max-width: 100%;
  font: 400 18px/1.33 "OTSansRegular", Helvetica, Arial, serif;
  color: #fff;
  text-align: center;
  background: #232e72 center center/100% 100% no-repeat;
  padding: 8px 36px 8px 36px;
  border-radius: 50px !important;
  border: 1px solid #fff;
}

.btn1:hover{
  color: #232e72;
  background: #fff center center/100% 100% no-repeat;
}

.highlight24 {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0px;
  font: 400 14px/1.5 "OTSansBold", Helvetica, Arial, serif;
  color: white;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2470588235);
  text-align: center;
}

.flex_row5 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0px 16px;
  width: 90%;
  margin-left: 20px;
}

.highlight25 {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0px;
  font: 300 16px/1.5 "OTSansBold", Helvetica, Arial, serif;
  color: white;
  margin: 0px !important;
}

.btn2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 30px 0px 27px;
  width: 200px;
  max-width: 100%;
  font: 400 18px/1.33 "OTSansRegular", Helvetica, Arial, serif;
  color: #fff;
  text-align: center;
  background: #232e72 center center/100% 100% no-repeat;
  padding: 8px 36px 8px 36px;
  border-radius: 50px !important;
  border: 1px solid #fff;
}

.btn2:hover{
  color: #232e72;
  background: #fff center center/100% 100% no-repeat;
}

.btn3 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 30px 0px 27px;
  width: 100%;
  max-width: 100%;
  font: 400 18px/1.33 "OTSansRegular", Helvetica, Arial, serif;
  color: #fff;
  text-align: center;
  background: #232e72 center center/100% 100% no-repeat;
  padding: 8px 36px 8px 36px;
  border-radius: 50px !important;
  border: 1px solid #fff;
}

.btn3:hover{
  color: #232e72;
  background: #fff center center/100% 100% no-repeat;
}

.flex_row6 {
  position: relative;
  display: flex;
  margin: 9px 0px 0px;
  gap: 0px 4px;
}

.content_box2 {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 14px 0px 0px;
  width: 50%;
  background-color: rgba(255, 255, 255, 0.098);
  border-radius: 4px 4px 4px 4px;
}


/* ================================================
   3. OTP LOGIN  (otp-login.css)
   All classes prefixed with otp- for isolation.
   IDs are inherently scoped — no prefix needed.
   ================================================ */

.otp-column {
  padding: 30px;
}

#otpForm {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    font-family: "OTSansBold", Helvetica, Arial, serif;
}

/* --- Page header collapse --- */
#otpPageHeader {
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}

#otpPageHeader.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* --- Push username group down when header collapses --- */
#otpPageHeader.collapsed + #userInputGroup {
    margin-top: 24px;
}

/* --- Username group collapse --- */
#userInputGroup {
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}

#userInputGroup.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* --- reCAPTCHA wrapper collapse --- */
#recaptchaWrap {
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}

#recaptchaWrap.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* --- Continue button wrapper collapse --- */
#validateUserBtnWrap {
    max-height: 80px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}

#validateUserBtnWrap.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* --- No-cookie path OTP options section fade-in --- */
#otpOptionsSection {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
    pointer-events: none;
}

#otpOptionsSection.visible {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

#otpOptionsSection.collapsed {
    display: none !important;
    pointer-events: none;
}

/* --- Cookie path OTP options section ---
       visible by default, collapses when Send Passcode clicked --- */
#otpCookieOptionsSection {
    display: block;
    opacity: 1;
    overflow: hidden;
    max-height: 600px;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

#otpCookieOptionsSection.visible {
    max-height: 600px;
    opacity: 1;
    overflow: hidden;
    pointer-events: all;
}

#otpCookieOptionsSection.collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* --- Send Passcode button — hidden until tiles are ready --- */
#sendOtpBtn {
    display: none;
}

#sendOtpBtn.visible {
    display: block;
}

/* --- OTP entry section — hidden until sendOtp succeeds --- */
#otpEntrySection {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
    pointer-events: none;
}

#otpEntrySection.visible {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* --- Step header — page purpose and section labels --- */
.otp-step-header {
    margin-bottom: 20px;
    text-align: center;
}

.otp-step-title {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.33;
    color: #ffffff;
    margin: 0 0 6px 0;
}

/* --- Username confirmation line — slightly larger and more prominent --- */
.otp-step-title--confirm {
    font-size: 20px;
    margin-bottom: 0;
}

/* --- Subtle horizontal divider between confirmation and instruction --- */
.otp-section-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 12px 0;
}

.otp-step-subtitle {
    font-size: 15px;
    color: #ffffff;
    margin: 1px;
}

/* --- Form structural wrappers --- */
.otp-group {
    margin-bottom: 16px;
}

.otp-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
}

/* --- Error message --- */
.otp-error {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 6px;
    margin-bottom: 6px;
}

/* --- Username / OTP input label wrapper --- */
.otp-user-label {
    display: block;
    width: 100%;
}

/* --- Error message spacing (ID-targeted error divs) --- */
#ajaxError,
#sendOtpError,
#otpEntryError {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* --- Resend passcode link --- */
.otp-resend {
    text-align: center;
    margin-top: 12px;
}

.otp-resend a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    cursor: pointer;
}

.otp-resend a:hover {
    color: rgba(255, 255, 255, 0.95);
}

/* --- Back to login link — always visible, bottom left --- */
.otp-back-to-login {
    text-align: left;
    margin-top: 20px;
}

.otp-back-to-login a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    cursor: pointer;
}

.otp-back-to-login a:hover {
    color: rgba(255, 255, 255, 0.95);
}

/* --- OTP countdown timer --- */
.otp-timer {
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.otp-timer__count {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.otp-timer--expired {
    color: #ff6b6b;
    font-weight: 500;
}

/* --- OTP Tile base --- */
.otp-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s ease, background 0.2s ease;
    user-select: none;
}

.otp-tile:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.14);
}

/* --- OTP Tile selected state --- */
.otp-tile--selected {
    border-color: #4a9eff;
    background: rgba(74, 158, 255, 0.18);
}

/* --- Tile icon circle --- */
.otp-tile__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.otp-tile--selected .otp-tile__icon {
    background: rgba(74, 158, 255, 0.3);
    border-color: #4a9eff;
}

/* --- Tile text block --- */
.otp-tile__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.otp-tile__label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}

.otp-tile__value {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.otp-tile--selected .otp-tile__label {
    color: #ffffff;
}

.otp-tile--selected .otp-tile__value {
    color: rgba(255, 255, 255, 0.75);
}

/* --- Button loading spinner --- */
.otp-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: otp-btn-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes otp-btn-spin {
    to { transform: rotate(360deg); }
}