/* ==========================================================
   INCEPTION AUTH V12.2
   50% BLUE / 50% CORAL
   ========================================================== */

body.inc-auth-v122 {
  min-height: 100vh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #2448b5 !important;
}


/* ==========================================================
   GUARANTEED SPLIT BACKGROUND
   Tidak bergantung background React wrapper.
   ========================================================== */

.inc-auth-split-bg {
  position: fixed;
  inset: 0;

  z-index: 0;

  display: grid;

  grid-template-columns:
    50% 50%;

  pointer-events: none;
}


.inc-auth-split-blue {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #213b9f 0%,
      #2857bb 55%,
      #3473c7 100%
    );
}


.inc-auth-split-coral {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #b64048 0%,
      #d55152 52%,
      #ef7163 100%
    );
}


/* subtle texture */

.inc-auth-split-blue::before,
.inc-auth-split-coral::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.045) 1px,
      transparent 1px
    );

  background-size:
    82px 82px;

  opacity:
    .42;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 16%,
      #000 84%,
      transparent
    );
}


/* decorative circles */

.inc-auth-split-blue::after {
  content: "";

  position: absolute;

  width: 112px;
  height: 112px;

  top: 7%;
  left: 5%;

  border-radius: 50%;

  background:
    rgba(255,255,255,.10);
}


.inc-auth-split-coral::after {
  content: "";

  position: absolute;

  width: 88px;
  height: 88px;

  right: 7%;
  bottom: 8%;

  border-radius: 50%;

  background:
    rgba(255,255,255,.08);
}


/* ==========================================================
   BERSIHKAN BACKGROUND WRAPPER REACT
   hanya ancestor halaman auth.
   ========================================================== */

body.inc-auth-v122
.inc-auth-shell-transparent {
  background:
    transparent !important;

  background-image:
    none !important;

  border:
    0 !important;

  box-shadow:
    none !important;

  filter:
    none !important;
}


body.inc-auth-v122 #root {
  position:
    relative;

  z-index:
    1;

  min-height:
    100vh;

  background:
    transparent !important;
}


/* ==========================================================
   LEFT BRAND AREA
   ========================================================== */

.inc-auth-brand {
  position:
    fixed;

  z-index:
    3;

  top:
    0;

  left:
    0;

  width:
    50%;

  height:
    100vh;

  box-sizing:
    border-box;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    54px;

  color:
    white;

  text-align:
    center;

  pointer-events:
    none;
}


.inc-auth-brand-inner {
  width:
    min(500px, 86%);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;
}


.inc-auth-brand-logo {
  width:
    176px;

  height:
    176px;

  display:
    block;

  object-fit:
    contain;

  margin-bottom:
    25px;
}


.inc-auth-brand-kicker {
  margin-bottom:
    12px;

  color:
    #cbdcff;

  font-family:
    "IBM Plex Mono",
    ui-monospace,
    monospace;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;
}


.inc-auth-brand h1 {
  margin:
    0;

  color:
    #fff;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;

  font-size:
    clamp(42px, 4.4vw, 64px);

  font-weight:
    800;

  line-height:
    .98;

  letter-spacing:
    -.04em;
}


.inc-auth-brand p {
  max-width:
    39ch;

  margin:
    19px 0 0;

  color:
    rgba(255,255,255,.82);

  font-size:
    15px;

  line-height:
    1.72;
}


.inc-auth-brand-line {
  width:
    76px;

  height:
    3px;

  margin-top:
    27px;

  border-radius:
    99px;

  background:
    linear-gradient(
      90deg,
      #bed7ff 0 50%,
      #ff9a90 50% 100%
    );
}


/* ==========================================================
   FORM CARD
   ========================================================== */

body.inc-auth-v122
.inc-auth-card {
  position:
    fixed !important;

  z-index:
    5 !important;

  top:
    50% !important;

  left:
    75% !important;

  margin:
    0 !important;

  transform:
    translate(-50%, -50%)
    !important;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(255,255,255,.52)
    !important;

  border-radius:
    22px !important;

  background:
    #ffffff !important;

  background-image:
    none !important;

  color:
    #17213a !important;

  box-shadow:
    0 22px 52px
    rgba(70, 16, 20, .17)
    !important;

  overflow:
    auto;
}


/* LOGIN SIZE */

body.inc-auth-v122
.inc-auth-card-login {
  width:
    min(430px, calc(50vw - 90px))
    !important;

  min-width:
    370px;

  max-height:
    calc(100vh - 70px);

  padding:
    34px 34px 29px
    !important;
}


/* REGISTER SIZE */

body.inc-auth-v122
.inc-auth-card-register {
  width:
    min(475px, calc(50vw - 72px))
    !important;

  min-width:
    395px;

  max-height:
    calc(100vh - 52px);

  padding:
    30px 34px
    !important;
}


/* custom scrollbar register */

body.inc-auth-v122
.inc-auth-card::-webkit-scrollbar {
  width:
    5px;
}


body.inc-auth-v122
.inc-auth-card::-webkit-scrollbar-thumb {
  border-radius:
    99px;

  background:
    #d8ddea;
}


/* ==========================================================
   CARD TYPOGRAPHY
   ========================================================== */

body.inc-auth-v122
.inc-auth-card
:is(h1, h2, h3) {
  margin-top:
    0 !important;

  color:
    #18213a !important;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif !important;

  font-size:
    29px !important;

  font-weight:
    800 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    -.025em !important;

  text-align:
    center !important;
}


body.inc-auth-v122
.inc-auth-card > p,

body.inc-auth-v122
.inc-auth-card
form ~ p {
  color:
    #778198 !important;
}


body.inc-auth-v122
.inc-auth-card p {
  color:
    #778198;
}


/* labels */

body.inc-auth-v122
.inc-auth-card label {
  color:
    #38425d !important;

  font-size:
    12px !important;

  font-weight:
    650 !important;
}


/* input */

body.inc-auth-v122
.inc-auth-card input {
  min-height:
    48px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    #d6ddea !important;

  border-radius:
    11px !important;

  background:
    #fbfcff !important;

  color:
    #17213a !important;

  caret-color:
    #3f69d5 !important;

  box-shadow:
    none !important;
}


body.inc-auth-v122
.inc-auth-card input::placeholder {
  color:
    #a0a8b9 !important;
}


body.inc-auth-v122
.inc-auth-card input:focus {
  outline:
    none !important;

  border-color:
    #527de4 !important;

  box-shadow:
    0 0 0 3px
    rgba(82,125,228,.10)
    !important;
}


/* password eye */

body.inc-auth-v122
.inc-auth-card button:not([type="submit"]) {
  color:
    #737f98;
}


/* submit */

body.inc-auth-v122
.inc-auth-card button[type="submit"] {
  min-height:
    49px !important;

  border:
    0 !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      90deg,
      #4771d9,
      #e15e58
    )
    !important;

  color:
    #fff !important;

  font-weight:
    750 !important;

  box-shadow:
    none !important;

  cursor:
    pointer;
}


body.inc-auth-v122
.inc-auth-card button[type="submit"]:hover {
  filter:
    brightness(1.045);
}


/* links */

body.inc-auth-v122
.inc-auth-card a {
  color:
    #3d69d1 !important;

  font-weight:
    650 !important;

  text-decoration:
    none !important;
}


/* ==========================================================
   TOPBAR LOGIN BUTTON
   ========================================================== */

.inception-login-cta {
  min-height:
    38px;

  display:
    inline-flex !important;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 17px !important;

  margin-left:
    4px;

  border:
    1px solid
    #f46b61 !important;

  border-radius:
    10px !important;

  background:
    #f46b61 !important;

  color:
    #fff !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  text-decoration:
    none !important;

  box-shadow:
    none !important;
}


.inception-login-cta:hover {
  background:
    #ff766c !important;

  color:
    #fff !important;

  transform:
    translateY(-1px);
}


.inception-login-cta::before,
.inception-login-cta::after {
  display:
    none !important;
}


/* ==========================================================
   CHATBOT
   Jangan muncul di login / register.
   ========================================================== */

body.inc-auth-v122
.inception-chatbot-trigger,

body.inc-auth-v122
.inception-chatbot-panel {
  display:
    none !important;
}


/* ==========================================================
   TABLET + MOBILE
   50:50 berubah vertical supaya usable.
   ========================================================== */

@media (max-width: 860px) {

  body.inc-auth-v122 {
    overflow-y:
      auto !important;
  }


  .inc-auth-split-bg {
    grid-template-columns:
      1fr;

    grid-template-rows:
      38vh auto;
  }


  .inc-auth-brand {
    position:
      relative;

    width:
      100%;

    height:
      38vh;

    min-height:
      300px;

    padding:
      35px 22px;
  }


  .inc-auth-brand-logo {
    width:
      98px;

    height:
      98px;

    margin-bottom:
      11px;
  }


  .inc-auth-brand-kicker {
    margin-bottom:
      8px;

    font-size:
      8px;
  }


  .inc-auth-brand h1 {
    font-size:
      31px;
  }


  .inc-auth-brand p {
    display:
      none;
  }


  .inc-auth-brand-line {
    margin-top:
      14px;
  }


  body.inc-auth-v122
  .inc-auth-card {
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    width:
      calc(100% - 34px)
      !important;

    min-width:
      0 !important;

    max-width:
      470px;

    max-height:
      none;

    margin:
      38px auto 60px
      !important;

    transform:
      none !important;
  }

}


@media (max-width: 520px) {

  body.inc-auth-v122
  .inc-auth-card {
    padding:
      27px 21px !important;

    border-radius:
      17px !important;
  }


  body.inc-auth-v122
  .inc-auth-card
  :is(h1, h2, h3) {
    font-size:
      25px !important;
  }

}

/* INCEPTION_AUTH_SELECT_API_V2_START */

body.inc-auth-v122
.inc-auth-card select {
  width: 100% !important;

  min-height: 48px !important;

  box-sizing: border-box !important;

  padding:
    0 42px 0 14px !important;

  border:
    1px solid
    #d6ddea !important;

  border-radius:
    11px !important;

  outline:
    none !important;

  background-color:
    #fbfcff !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c7892' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    !important;

  background-repeat:
    no-repeat !important;

  background-position:
    right 13px center !important;

  background-size:
    17px !important;

  color:
    #17213a !important;

  font:
    inherit !important;

  appearance:
    none !important;

  -webkit-appearance:
    none !important;

  cursor:
    pointer;
}


body.inc-auth-v122
.inc-auth-card select:focus {
  border-color:
    #527de4 !important;

  box-shadow:
    0 0 0 3px
    rgba(82,125,228,.10)
    !important;
}


body.inc-auth-v122
.inc-auth-card select:disabled {
  cursor:
    not-allowed;

  color:
    #98a2b7 !important;

  background-color:
    #f4f6fa !important;

  opacity:
    .78;
}


.auth-select-help {
  display:
    block;

  margin-top:
    6px;

  color:
    #748199;

  font-size:
    10px;

  line-height:
    1.4;
}


.auth-reference-warning {
  margin:
    0 0 13px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(218, 154, 67, .28);

  border-radius:
    9px;

  background:
    rgba(218,154,67,.08);

  color:
    #8c6230;

  font-size:
    11px;

  line-height:
    1.45;
}


/* register sedikit lebih tinggi karena dropdown */

body.inc-auth-v122
.inc-auth-card-register {
  max-height:
    calc(100vh - 34px)
    !important;
}


/* INCEPTION_AUTH_SELECT_API_V2_END */

/* INCEPTION_PARTICIPANT_FINAL_V3_START */


body.inc-auth-v122
.inc-auth-card-register {
  width:
    min(500px, calc(50vw - 64px))
    !important;

  min-width:
    420px;

  max-height:
    calc(100vh - 28px)
    !important;

  padding:
    27px 32px
    !important;

  overflow-y:
    auto !important;

  overflow-x:
    visible !important;
}


/* PASSWORD */

body.inc-auth-v122
.inc-auth-card
input.is-invalid {
  border-color:
    #dc625d !important;

  box-shadow:
    0 0 0 3px
    rgba(220,98,93,.10)
    !important;
}


.auth-password-error {
  display:
    block;

  margin-top:
    5px;

  color:
    #bf4d48 !important;

  font-size:
    10px;
}


/* ==========================================================
   SEARCH DROPDOWN
   ========================================================== */

.auth-search-field {
  position:
    relative;

  z-index:
    3;
}


.auth-search-field:focus-within {
  z-index:
    50;
}


.auth-search-control {
  position:
    relative;
}


body.inc-auth-v122
.inc-auth-card
.auth-search-input {
  padding-right:
    46px !important;
}


.auth-search-toggle {
  position:
    absolute;

  z-index:
    3;

  top:
    50%;

  right:
    5px;

  width:
    38px;

  height:
    38px;

  padding:
    0 !important;

  display:
    grid !important;

  place-items:
    center;

  transform:
    translateY(-50%);

  border:
    0 !important;

  border-radius:
    8px !important;

  background:
    transparent !important;

  color:
    #748096 !important;

  box-shadow:
    none !important;

  cursor:
    pointer;
}


.auth-search-toggle:hover {
  background:
    #eef3fc !important;

  color:
    #426bd2 !important;
}


.auth-search-menu {
  position:
    absolute;

  z-index:
    300;

  top:
    calc(100% + 6px);

  left:
    0;

  right:
    0;

  max-height:
    270px;

  overflow-y:
    auto;

  padding:
    6px;

  border:
    1px solid
    #d7deeb;

  border-radius:
    12px;

  background:
    #ffffff;

  box-shadow:
    0 16px 38px
    rgba(22,34,62,.16);
}


.auth-search-menu-info {
  padding:
    8px 10px 9px;

  color:
    #8a95aa;

  font-size:
    10px;
}


body.inc-auth-v122
.inc-auth-card
.auth-search-option {
  width:
    100%;

  min-height:
    45px !important;

  margin:
    0 !important;

  padding:
    8px 10px !important;

  display:
    flex !important;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  border:
    0 !important;

  border-radius:
    8px !important;

  background:
    transparent !important;

  color:
    #202b43 !important;

  box-shadow:
    none !important;

  text-align:
    left;

  cursor:
    pointer;
}


body.inc-auth-v122
.inc-auth-card
.auth-search-option:hover {
  background:
    #edf3ff !important;
}


body.inc-auth-v122
.inc-auth-card
.auth-search-option.is-selected {
  background:
    #e6efff !important;

  color:
    #315ec9 !important;
}


.auth-search-option span {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;
}


.auth-search-option small {
  flex:
    0 0 auto;

  color:
    #8b96aa;

  font-size:
    9px;
}


.auth-search-empty {
  padding:
    18px 10px;

  color:
    #8d97aa;

  text-align:
    center;

  font-size:
    11px;
}


.auth-select-help {
  display:
    block;

  margin-top:
    5px;

  color:
    #7e899d;

  font-size:
    10px;

  line-height:
    1.4;
}


/* ==========================================================
   OTP
   ========================================================== */

.auth-otp-form {
  display:
    grid;

  gap:
    18px;
}


.auth-email-verified-target {
  padding:
    20px 16px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  border:
    1px solid
    #dfe5ef;

  border-radius:
    14px;

  background:
    #f8faff;

  text-align:
    center;
}


.auth-mail-icon {
  width:
    50px;

  height:
    50px;

  margin-bottom:
    11px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #dce8ff,
      #ffe2de
    );

  font-size:
    21px;
}


.auth-email-verified-target strong {
  color:
    #1c2740 !important;

  font-size:
    15px;
}


.auth-email-verified-target span {
  margin-top:
    5px;

  color:
    #7b869b;

  font-size:
    11px;
}


.auth-email-verified-target b {
  margin-top:
    4px;

  color:
    #3d68cc;

  font-size:
    12px;
}


.auth-email-verified-target small {
  margin-top:
    8px;

  color:
    #929cad;
}


.auth-otp-boxes {
  display:
    grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    8px;
}


body.inc-auth-v122
.inc-auth-card
.auth-otp-boxes input {
  width:
    100%;

  min-width:
    0;

  height:
    57px;

  padding:
    0 !important;

  text-align:
    center;

  color:
    #17213a !important;

  font-size:
    23px !important;

  font-weight:
    750;

  border:
    1px solid
    #d6deed !important;

  border-radius:
    10px !important;

  background:
    #fbfcff !important;
}


body.inc-auth-v122
.inc-auth-card
.auth-otp-boxes input:focus {
  border-color:
    #527de4 !important;

  box-shadow:
    0 0 0 3px
    rgba(82,125,228,.10)
    !important;
}


.auth-otp-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


body.inc-auth-v122
.inc-auth-card
.auth-otp-actions button {
  min-height:
    0 !important;

  padding:
    3px 0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  color:
    #416bce !important;

  box-shadow:
    none !important;

  font-size:
    11px;

  font-weight:
    650;

  cursor:
    pointer;
}


body.inc-auth-v122
.inc-auth-card
.auth-otp-actions button:disabled {
  color:
    #a1a8b7 !important;

  cursor:
    not-allowed;
}


@media (max-width: 860px) {

  body.inc-auth-v122
  .inc-auth-card-register {
    width:
      calc(100% - 32px)
      !important;

    min-width:
      0 !important;

    max-height:
      none !important;
  }


  .auth-search-menu {
    max-height:
      230px;
  }

}


@media (max-width: 480px) {

  .auth-otp-boxes {
    gap:
      5px;
  }


  body.inc-auth-v122
  .inc-auth-card
  .auth-otp-boxes input {
    height:
      50px;

    font-size:
      19px !important;
  }

}


/* INCEPTION_PARTICIPANT_FINAL_V3_END */


/* ==========================================================
   INCEPTION_LOGIN_UI_V14
   Refined participant login
   ========================================================== */


/* ----------------------------------------------------------
   CARD
   ---------------------------------------------------------- */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-card {
  width:
    min(
      430px,
      calc(
        100vw - 42px
      )
    )
    !important;

  padding:
    38px 36px 32px
    !important;

  border:
    1px solid
    rgba(
      26,
      36,
      58,
      .07
    )
    !important;

  border-radius:
    24px
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 26px 70px
    rgba(
      31,
      28,
      43,
      .16
    )
    !important;
}


/* ----------------------------------------------------------
   HEADING
   ---------------------------------------------------------- */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-card h1,
body.inc-auth-login.inc-login-ui-v14
.inc-auth-card h2,
body.inc-auth-login.inc-login-ui-v14
.inc-auth-card h3 {
  margin:
    0 0 29px
    !important;

  color:
    #1f2940
    !important;

  font-size:
    34px
    !important;

  font-weight:
    780
    !important;

  line-height:
    1.05
    !important;

  letter-spacing:
    -.035em
    !important;

  text-align:
    center
    !important;
}


/* Jangan sisakan ruang subtitle lama */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-card
h1 + p,
body.inc-auth-login.inc-login-ui-v14
.inc-auth-card
h2 + p {
  margin-top:
    0
    !important;
}


/* ----------------------------------------------------------
   LABEL
   ---------------------------------------------------------- */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-card label {
  color:
    #3f4a61
    !important;

  font-size:
    12px
    !important;

  font-weight:
    720
    !important;

  line-height:
    1.35
    !important;
}


/* ----------------------------------------------------------
   INPUT
   ---------------------------------------------------------- */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-card input[type="email"],
body.inc-auth-login.inc-login-ui-v14
.inc-auth-card input[type="password"],
body.inc-auth-login.inc-login-ui-v14
.inc-auth-card input[type="text"] {
  width:
    100%
    !important;

  min-height:
    52px
    !important;

  padding:
    0 15px
    !important;

  border:
    1px solid
    #dbe2ee
    !important;

  border-radius:
    12px
    !important;

  outline:
    none
    !important;

  background:
    #fbfcfe
    !important;

  color:
    #202a40
    !important;

  font-size:
    14px
    !important;

  font-weight:
    520
    !important;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease
    !important;
}


body.inc-auth-login.inc-login-ui-v14
.inc-auth-card input[type="email"]:focus,
body.inc-auth-login.inc-login-ui-v14
.inc-auth-card input[type="password"]:focus,
body.inc-auth-login.inc-login-ui-v14
.inc-auth-card input[type="text"]:focus {
  border-color:
    #6582d9
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 0 0 4px
    rgba(
      81,
      112,
      205,
      .09
    )
    !important;
}


/* ----------------------------------------------------------
   FIELD SPACING
   ---------------------------------------------------------- */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-card form {
  gap:
    0
    !important;
}


body.inc-auth-login.inc-login-ui-v14
.inc-auth-card form > label {
  margin-top:
    16px
    !important;
}


body.inc-auth-login.inc-login-ui-v14
.inc-auth-card form > label:first-of-type {
  margin-top:
    0
    !important;
}


/* ----------------------------------------------------------
   FORGOT PASSWORD
   DI BAWAH PASSWORD, KANAN
   ---------------------------------------------------------- */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-forgot-v14 {
  width:
    max-content
    !important;

  margin:
    9px 0 0 auto
    !important;

  padding:
    0
    !important;

  display:
    block
    !important;

  justify-self:
    end
    !important;

  align-self:
    flex-end
    !important;

  border:
    0
    !important;

  background:
    transparent
    !important;

  color:
    #4e69c9
    !important;

  font-size:
    11px
    !important;

  font-weight:
    700
    !important;

  line-height:
    1.4
    !important;

  text-decoration:
    none
    !important;

  cursor:
    pointer
    !important;
}


body.inc-auth-login.inc-login-ui-v14
.inc-auth-forgot-v14:hover {
  color:
    #344fae
    !important;

  text-decoration:
    underline
    !important;
}


/* ----------------------------------------------------------
   SUBMIT
   ---------------------------------------------------------- */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-card button[type="submit"] {
  width:
    100%
    !important;

  min-height:
    52px
    !important;

  margin-top:
    23px
    !important;

  border:
    0
    !important;

  border-radius:
    12px
    !important;

  background:
    linear-gradient(
      90deg,
      #5876d6 0%,
      #c96569 100%
    )
    !important;

  color:
    #ffffff
    !important;

  font-size:
    13px
    !important;

  font-weight:
    780
    !important;

  letter-spacing:
    -.005em
    !important;

  box-shadow:
    none
    !important;

  cursor:
    pointer
    !important;

  transition:
    transform 150ms ease,
    filter 150ms ease
    !important;
}


body.inc-auth-login.inc-login-ui-v14
.inc-auth-card button[type="submit"]:hover {
  transform:
    translateY(-1px)
    !important;

  filter:
    brightness(1.035)
    !important;
}


/* ----------------------------------------------------------
   REGISTER FOOTER
   ---------------------------------------------------------- */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-register-link-v14 {
  color:
    #4e69c9
    !important;

  font-weight:
    750
    !important;

  text-decoration:
    none
    !important;
}


body.inc-auth-login.inc-login-ui-v14
.inc-auth-register-link-v14:hover {
  text-decoration:
    underline
    !important;
}


/* Parent teks "Belum punya akun?" */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-card
form
> p:last-child,
body.inc-auth-login.inc-login-ui-v14
.inc-auth-card
> p:last-child {
  margin:
    17px 0 0
    !important;

  color:
    #7f899d
    !important;

  font-size:
    12px
    !important;

  text-align:
    center
    !important;
}


/* ----------------------------------------------------------
   EYE BUTTON
   ---------------------------------------------------------- */

body.inc-auth-login.inc-login-ui-v14
.inc-auth-card
button:not([type="submit"]):has(svg) {
  color:
    #7c879d
    !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (
  max-width: 720px
) {

  body.inc-auth-login.inc-login-ui-v14
  .inc-auth-card {
    width:
      calc(
        100vw - 28px
      )
      !important;

    padding:
      31px 22px 27px
      !important;

    border-radius:
      20px
      !important;
  }


  body.inc-auth-login.inc-login-ui-v14
  .inc-auth-card h1,
  body.inc-auth-login.inc-login-ui-v14
  .inc-auth-card h2,
  body.inc-auth-login.inc-login-ui-v14
  .inc-auth-card h3 {
    margin-bottom:
      25px
      !important;

    font-size:
      30px
      !important;
  }

}


/* ==========================================================
   INCEPTION_REGISTER_MANUAL_SCHOOL_V15
   ========================================================== */


/* ==========================================================
   CARD
   ========================================================== */

body.inc-register-v15
.inc-auth-card {
  width:
    min(
      470px,
      calc(
        100vw - 38px
      )
    )
    !important;

  max-height:
    calc(
      100vh - 46px
    )
    !important;

  padding:
    30px 32px 28px
    !important;

  overflow:
    visible
    !important;

  border-radius:
    22px
    !important;

  background:
    #ffffff
    !important;
}


/* Jika layar pendek, card boleh scroll */

@media (
  max-height: 850px
) {

  body.inc-register-v15
  .inc-auth-card {
    overflow-y:
      auto
      !important;

    overflow-x:
      visible
      !important;
  }

}


/* ==========================================================
   TITLE
   ========================================================== */

.inc-register-v15 {
  width:
    100%;
}


.inc-register-title {
  margin-bottom:
    22px;

  text-align:
    center;
}


.inc-register-title h1 {
  margin:
    0 !important;

  color:
    #202a40 !important;

  font-size:
    30px !important;

  font-weight:
    780 !important;

  line-height:
    1.1 !important;

  letter-spacing:
    -.035em !important;
}


.inc-register-title p {
  max-width:
    340px;

  margin:
    9px auto 0;

  color:
    #7d879a;

  font-size:
    11px;

  line-height:
    1.55;
}


.inc-register-title p strong {
  color:
    #37445e;
}


.inc-register-step {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #5776c7;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .14em;
}


/* ==========================================================
   FORM
   ========================================================== */

.inc-register-form-v15,
.inc-register-otp-form {
  display:
    grid;

  gap:
    12px;
}


.inc-register-field {
  min-width:
    0;

  display:
    grid;

  gap:
    6px;

  position:
    relative;
}


.inc-register-field > span {
  color:
    #3e4960;

  font-size:
    10px;

  font-weight:
    720;
}


.inc-register-field
> input,
.inc-password-shell
> input,
.inc-search-select
> input {
  width:
    100% !important;

  height:
    45px !important;

  min-height:
    45px !important;

  padding:
    0 13px !important;

  border:
    1px solid
    #dbe2ee
    !important;

  border-radius:
    10px
    !important;

  outline:
    none
    !important;

  background:
    #fbfcfe
    !important;

  color:
    #202a40
    !important;

  font:
    inherit
    !important;

  font-size:
    11px
    !important;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}


.inc-register-field
> input:focus,
.inc-password-shell
> input:focus,
.inc-search-select
> input:focus {
  border-color:
    #6381d5
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 0 0 3px
    rgba(
      80,
      111,
      202,
      .08
    )
    !important;
}


.inc-register-helper {
  color:
    #8b95a7;

  font-size:
    8px;

  line-height:
    1.45;
}


/* ==========================================================
   SEARCHABLE SELECT
   ========================================================== */

.inc-search-select {
  position:
    relative;

  z-index:
    4;
}


.inc-search-select:focus-within {
  z-index:
    30;
}


.inc-search-select > input {
  padding-right:
    42px
    !important;
}


.inc-search-toggle {
  position:
    absolute;

  z-index:
    4;

  top:
    50%;

  right:
    6px;

  width:
    33px;

  height:
    33px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  transform:
    translateY(-50%);

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  color:
    #7d899f;

  cursor:
    pointer;
}


.inc-search-toggle:hover {
  background:
    #f0f4fa;
}


.inc-search-toggle:disabled {
  cursor:
    default;

  opacity:
    .4;
}


.inc-search-select.is-disabled {
  opacity:
    .72;
}


.inc-search-menu {
  position:
    absolute;

  z-index:
    100;

  top:
    calc(
      100% + 6px
    );

  left:
    0;

  right:
    0;

  max-height:
    220px;

  padding:
    6px;

  overflow-y:
    auto;

  border:
    1px solid
    #dce3ef;

  border-radius:
    11px;

  background:
    #ffffff;

  box-shadow:
    0 14px 34px
    rgba(
      33,
      44,
      70,
      .13
    );
}


.inc-search-option {
  width:
    100%;

  min-height:
    38px;

  padding:
    9px 10px;

  display:
    block;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    #364157;

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.4;

  text-align:
    left;

  cursor:
    pointer;
}


.inc-search-option:hover {
  background:
    #edf3ff;

  color:
    #365db6;
}


.inc-search-empty {
  padding:
    15px 10px;

  color:
    #8e98a9;

  font-size:
    9px;

  text-align:
    center;
}


/* ==========================================================
   SCHOOL FALLBACK
   ========================================================== */

.inc-school-block {
  display:
    grid;

  gap:
    8px;
}


.inc-manual-school-toggle {
  width:
    fit-content;

  margin-left:
    auto;

  padding:
    1px 0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  border:
    0;

  background:
    transparent;

  color:
    #4d69c3;

  font:
    inherit;

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;
}


.inc-manual-school-toggle span {
  color:
    #8a94a6;

  font-weight:
    500;
}


.inc-manual-school-toggle:hover {
  text-decoration:
    underline;
}


.inc-manual-school-toggle:disabled {
  cursor:
    default;

  opacity:
    .45;

  text-decoration:
    none;
}


.inc-manual-school-box {
  padding:
    12px;

  display:
    grid;

  gap:
    9px;

  border:
    1px solid
    #d8e2f4;

  border-radius:
    11px;

  background:
    #f7f9fd;
}


.inc-manual-school-status {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.inc-manual-school-status > span {
  padding:
    5px 7px;

  border-radius:
    99px;

  background:
    #e6edfc;

  color:
    #4b68b3;

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


.inc-manual-school-status button {
  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #4f69bf;

  font:
    inherit;

  font-size:
    8px;

  font-weight:
    700;

  cursor:
    pointer;
}


.inc-manual-school-status button:hover {
  text-decoration:
    underline;
}


/* ==========================================================
   PASSWORD
   ========================================================== */

.inc-password-shell {
  position:
    relative;
}


.inc-password-shell input {
  padding-right:
    45px !important;
}


.inc-password-eye {
  position:
    absolute;

  top:
    50%;

  right:
    7px;

  width:
    32px;

  height:
    32px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  transform:
    translateY(-50%);

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    #7e899e;

  cursor:
    pointer;
}


.inc-password-eye:hover {
  background:
    #f0f3f8;
}


.inc-password-match {
  font-size:
    8px;
}


.inc-password-match.is-ok {
  color:
    #3c8c5b;
}


.inc-password-match.is-error {
  color:
    #c4514b;
}


/* ==========================================================
   ERROR
   ========================================================== */

.inc-register-error {
  margin-bottom:
    12px;

  padding:
    10px 11px;

  border:
    1px solid
    #efcbc8;

  border-radius:
    9px;

  background:
    #fff2f1;

  color:
    #b34b45;

  font-size:
    9px;

  line-height:
    1.45;
}


/* ==========================================================
   SUBMIT
   ========================================================== */

.inc-register-submit {
  width:
    100%;

  min-height:
    47px;

  margin-top:
    3px;

  border:
    0;

  border-radius:
    10px;

  background:
    linear-gradient(
      90deg,
      #5575d3 0%,
      #cc6768 100%
    );

  color:
    #ffffff;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    780;

  cursor:
    pointer;
}


.inc-register-submit:hover {
  filter:
    brightness(1.035);
}


.inc-register-submit:disabled {
  cursor:
    wait;

  opacity:
    .68;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.inc-register-footer {
  margin:
    1px 0 0;

  color:
    #7e899c;

  font-size:
    10px;

  text-align:
    center;
}


.inc-register-footer a {
  color:
    #4f69c2;

  font-weight:
    750;

  text-decoration:
    none;
}


.inc-register-footer a:hover {
  text-decoration:
    underline;
}


/* ==========================================================
   OTP
   ========================================================== */

.inc-register-otp-v15 {
  padding:
    7px 0;
}


.inc-register-otp-input {
  height:
    57px
    !important;

  font-size:
    24px
    !important;

  font-weight:
    760
    !important;

  letter-spacing:
    .34em
    !important;

  text-align:
    center
    !important;
}


.inc-register-otp-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;
}


.inc-register-otp-actions button {
  padding:
    2px 0;

  border:
    0;

  background:
    transparent;

  color:
    #506bc3;

  font:
    inherit;

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;
}


.inc-register-otp-actions button:disabled {
  color:
    #9aa3b1;

  cursor:
    default;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (
  max-width: 720px
) {

  body.inc-register-v15
  .inc-auth-card {
    width:
      calc(
        100vw - 28px
      )
      !important;

    padding:
      26px 20px
      !important;

    overflow-y:
      auto
      !important;
  }


  .inc-register-title h1 {
    font-size:
      27px
      !important;
  }


  .inc-search-menu {
    max-height:
      180px;
  }


  .inc-manual-school-status {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* ==========================================================
   INCEPTION REGISTER CLARITY V1.6
   ========================================================== */


/* LABEL */

body.inc-register-v15
.inc-register-field > span {
  margin-bottom:
    1px;

  color:
    #354159
    !important;

  font-size:
    11px
    !important;

  font-weight:
    760
    !important;
}


/* HELPER */

body.inc-register-v15
.inc-register-helper {
  margin-top:
    1px;

  color:
    #707d93
    !important;

  font-size:
    9px
    !important;

  font-weight:
    520
    !important;

  line-height:
    1.45
    !important;
}


/* Sedikit jarak antar field */

body.inc-register-v15
.inc-register-form-v15 {
  gap:
    14px
    !important;
}


/* ==========================================================
   MANUAL SCHOOL CTA
   ========================================================== */

body.inc-register-v15
.inc-manual-school-toggle {
  width:
    100%
    !important;

  min-height:
    58px;

  margin:
    3px 0 0
    !important;

  padding:
    10px 12px
    !important;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    space-between
    !important;

  gap:
    16px
    !important;

  border:
    1px solid
    #d7dfef
    !important;

  border-radius:
    10px
    !important;

  background:
    #f7f9fd
    !important;

  text-align:
    left
    !important;

  text-decoration:
    none
    !important;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease
    !important;
}


body.inc-register-v15
.inc-manual-school-toggle:hover {
  border-color:
    #b9c9eb
    !important;

  background:
    #f0f4fc
    !important;

  transform:
    translateY(-1px);

  text-decoration:
    none
    !important;
}


body.inc-register-v15
.inc-manual-school-copy {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;

  color:
    inherit
    !important;
}


body.inc-register-v15
.inc-manual-school-copy strong {
  color:
    #37445d;

  font-size:
    9px;

  font-weight:
    750;
}


body.inc-register-v15
.inc-manual-school-copy small {
  color:
    #7e899d;

  font-size:
    8px;

  font-weight:
    500;

  line-height:
    1.4;
}


body.inc-register-v15
.inc-manual-school-toggle > b {
  flex:
    0 0 auto;

  padding:
    7px 9px;

  border-radius:
    7px;

  background:
    #e7edfb;

  color:
    #4866bd;

  font-size:
    8px;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* Manual mode */

body.inc-register-v15
.inc-manual-school-box {
  border-color:
    #cbd7ee
    !important;

  background:
    #f5f8fd
    !important;
}


/* ==========================================================
   INPUT TEXT LEBIH JELAS
   ========================================================== */

body.inc-register-v15
.inc-register-field input,
body.inc-register-v15
.inc-search-select input {
  color:
    #263149
    !important;

  font-size:
    11px
    !important;

  font-weight:
    570
    !important;
}


body.inc-register-v15
.inc-register-field input::placeholder,
body.inc-register-v15
.inc-search-select input::placeholder {
  color:
    #9aa4b6
    !important;

  font-weight:
    450
    !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (
  max-width: 720px
) {

  body.inc-register-v15
  .inc-manual-school-toggle {
    align-items:
      flex-start
      !important;
  }

}


/* ==========================================================
   INCEPTION_AUTH_STABLE_COLOR_V171
   CSS ONLY — NO DOM OBSERVER
   ========================================================== */


/* ==========================================================
   LOGIN CARD
   jangan ubah positioning / width wrapper
   ========================================================== */

body.inc-auth-login
.inc-auth-card {
  border:
    1px solid
    rgba(
      68,
      91,
      158,
      .14
    )
    !important;

  background:
    linear-gradient(
      160deg,
      #ffffff 0%,
      #f7f9ff 65%,
      #fff6f5 100%
    )
    !important;

  box-shadow:
    0 22px 55px
    rgba(
      36,
      40,
      70,
      .15
    )
    !important;
}


/* title lebih berwarna */

body.inc-auth-login
.inc-auth-card h1,
body.inc-auth-login
.inc-auth-card h2,
body.inc-auth-login
.inc-auth-card h3 {
  color:
    #263b72
    !important;
}


/* label */

body.inc-auth-login
.inc-auth-card label {
  color:
    #34466d
    !important;

  font-weight:
    760
    !important;
}


/* input login */

body.inc-auth-login
.inc-auth-card input[type="email"],
body.inc-auth-login
.inc-auth-card input[type="password"],
body.inc-auth-login
.inc-auth-card input[type="text"] {
  border-color:
    #d2ddef
    !important;

  background:
    #f4f7ff
    !important;

  color:
    #26334e
    !important;
}


body.inc-auth-login
.inc-auth-card input:focus {
  border-color:
    #5e7bd0
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 0 0 4px
    rgba(
      67,
      99,
      188,
      .09
    )
    !important;
}


/* tombol */

body.inc-auth-login
.inc-auth-card button[type="submit"] {
  background:
    linear-gradient(
      90deg,
      #4d6fd0 0%,
      #777ac5 48%,
      #d26966 100%
    )
    !important;

  box-shadow:
    0 8px 18px
    rgba(
      55,
      80,
      155,
      .14
    )
    !important;
}


/* link */

body.inc-auth-login
.inc-auth-card a {
  color:
    #4968c5
    !important;

  font-weight:
    750
    !important;
}


/* ==========================================================
   REGISTER CARD
   tidak ubah layout utama
   ========================================================== */

body.inc-register-v15
.inc-auth-card {
  border:
    1px solid
    rgba(
      68,
      91,
      158,
      .14
    )
    !important;

  background:
    linear-gradient(
      160deg,
      #ffffff 0%,
      #f8faff 68%,
      #fff7f6 100%
    )
    !important;

  box-shadow:
    0 22px 55px
    rgba(
      36,
      40,
      70,
      .15
    )
    !important;
}


/* pseudo badge tanpa ubah React DOM */

body.inc-register-v15
.inc-register-title::before {
  content:
    "PENDAFTARAN PESERTA";

  width:
    fit-content;

  margin:
    0 auto 8px;

  padding:
    5px 9px;

  display:
    block;

  border:
    1px solid
    #d4def4;

  border-radius:
    99px;

  background:
    #edf3ff;

  color:
    #4b68bd;

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    .13em;
}


/* title */

body.inc-register-v15
.inc-register-title h1 {
  color:
    #263b72
    !important;
}


/* labels: jangan abu pucat */

body.inc-register-v15
.inc-register-field > span {
  color:
    #33466d
    !important;

  font-size:
    10px
    !important;

  font-weight:
    780
    !important;
}


/* input */

body.inc-register-v15
.inc-register-field > input,
body.inc-register-v15
.inc-password-shell > input,
body.inc-register-v15
.inc-search-select > input {
  border:
    1px solid
    #d3deef
    !important;

  background:
    #f5f8ff
    !important;

  color:
    #26334e
    !important;
}


body.inc-register-v15
.inc-register-field > input:focus,
body.inc-register-v15
.inc-password-shell > input:focus,
body.inc-register-v15
.inc-search-select > input:focus {
  border-color:
    #5f7dd2
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 0 0 3px
    rgba(
      72,
      102,
      190,
      .09
    )
    !important;
}


/* ==========================================================
   HELPER TEXT
   dibuat benar-benar terbaca
   ========================================================== */

body.inc-register-v15
.inc-register-helper {
  width:
    fit-content;

  max-width:
    100%;

  margin-top:
    3px
    !important;

  padding:
    5px 8px
    !important;

  border-radius:
    6px;

  background:
    #eaf1ff
    !important;

  color:
    #506482
    !important;

  font-size:
    8px
    !important;

  font-weight:
    620
    !important;

  line-height:
    1.45
    !important;
}


/* ==========================================================
   SCHOOL MANUAL CTA
   ========================================================== */

body.inc-register-v15
.inc-manual-school-toggle {
  min-height:
    59px
    !important;

  margin-top:
    5px
    !important;

  padding:
    10px 12px
    !important;

  border:
    1px solid
    #cbd8f0
    !important;

  border-left:
    3px solid
    #ef7167
    !important;

  border-radius:
    9px
    !important;

  background:
    linear-gradient(
      90deg,
      #edf3ff 0%,
      #fff4f2 100%
    )
    !important;
}


body.inc-register-v15
.inc-manual-school-toggle:not(:disabled) {
  opacity:
    1
    !important;
}


body.inc-register-v15
.inc-manual-school-toggle:not(:disabled)
span {
  color:
    #53627d
    !important;
}


body.inc-register-v15
.inc-manual-school-toggle:not(:disabled)
b {
  color:
    #4968c3
    !important;
}


/* ==========================================================
   PASSWORD STATUS
   ========================================================== */

body.inc-register-v15
.inc-password-match.is-ok {
  padding:
    4px 7px;

  border-radius:
    5px;

  background:
    #eaf7ee;

  color:
    #3d8256
    !important;
}


body.inc-register-v15
.inc-password-match.is-error {
  padding:
    4px 7px;

  border-radius:
    5px;

  background:
    #fff0ef;

  color:
    #b84e49
    !important;
}


/* ==========================================================
   REGISTER BUTTON
   ========================================================== */

body.inc-register-v15
.inc-register-submit {
  background:
    linear-gradient(
      90deg,
      #4d6fd0 0%,
      #777ac5 48%,
      #d26966 100%
    )
    !important;

  box-shadow:
    0 8px 18px
    rgba(
      55,
      80,
      155,
      .13
    )
    !important;
}


/* ==========================================================
   SEARCH MENU
   ========================================================== */

body.inc-register-v15
.inc-search-menu {
  border-color:
    #ccd8ed
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 14px 30px
    rgba(
      39,
      52,
      84,
      .14
    )
    !important;
}


body.inc-register-v15
.inc-search-option:hover {
  background:
    #eaf1ff
    !important;

  color:
    #3f60b7
    !important;
}



/* ==========================================================
   INCEPTION_AUTH_UX_V172
   Colored form system
   CSS ONLY
   ========================================================== */


/* ==========================================================
   REGISTER CARD
   ========================================================== */

body.inc-register-v15
.inc-auth-card {
  width:
    min(
      490px,
      calc(100vw - 36px)
    )
    !important;

  max-height:
    calc(100dvh - 30px)
    !important;

  padding:
    30px 31px 28px
    !important;

  border:
    1px solid
    rgba(66, 91, 157, .13)
    !important;

  border-radius:
    22px
    !important;

  background:
    linear-gradient(
      180deg,
      #fcfdff 0%,
      #f8faff 72%,
      #fff8f6 100%
    )
    !important;

  box-shadow:
    0 22px 58px
    rgba(35, 43, 76, .15)
    !important;

  scrollbar-width:
    thin;

  scrollbar-color:
    #b9c7e3 transparent;
}


/* ==========================================================
   TITLE
   ========================================================== */

body.inc-register-v15
.inc-register-title {
  margin-bottom:
    20px
    !important;
}


body.inc-register-v15
.inc-register-title::before {
  background:
    #eef3ff
    !important;

  border-color:
    #d6e1f7
    !important;

  color:
    #5872b9
    !important;

  font-weight:
    700
    !important;
}


body.inc-register-v15
.inc-register-title h1 {
  margin:
    0
    !important;

  color:
    #293961
    !important;

  font-size:
    31px
    !important;

  font-weight:
    680
    !important;

  letter-spacing:
    -.035em
    !important;
}


/* ==========================================================
   FIELD COLOR VARIABLES
   ========================================================== */

body.inc-register-v15
.inc-register-form-v15
> .inc-register-field {
  --field-bg:
    #edf3ff;

  --field-border:
    #cbd9f3;

  --field-accent:
    #5574c7;

  --field-label:
    #435d9e;
}


/* alternate coral */

body.inc-register-v15
.inc-register-form-v15
> .inc-register-field:nth-of-type(even) {
  --field-bg:
    #fff1ef;

  --field-border:
    #f1d0cc;

  --field-accent:
    #df746c;

  --field-label:
    #b45e59;
}


/* school = blue/coral mix */

body.inc-register-v15
.inc-school-block {
  --field-bg:
    #f1f4ff;

  --field-border:
    #d2d9f2;

  --field-accent:
    #786fbf;

  --field-label:
    #575493;
}


/* ==========================================================
   LABEL
   jangan hitam bold
   ========================================================== */

body.inc-register-v15
.inc-register-field > span {
  margin-bottom:
    2px
    !important;

  display:
    flex
    !important;

  align-items:
    center;

  gap:
    7px;

  color:
    var(
      --field-label,
      #445d99
    )
    !important;

  font-size:
    10px
    !important;

  font-weight:
    620
    !important;

  line-height:
    1.35
    !important;

  letter-spacing:
    .005em;
}


body.inc-register-v15
.inc-register-field > span::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    var(
      --field-accent,
      #5574c7
    );
}


/* ==========================================================
   INPUT / SEARCH / PASSWORD
   ========================================================== */

body.inc-register-v15
.inc-register-field > input,

body.inc-register-v15
.inc-password-shell > input,

body.inc-register-v15
.inc-search-select > input {
  height:
    46px
    !important;

  min-height:
    46px
    !important;

  padding:
    0 14px
    !important;

  border:
    1px solid
    var(
      --field-border,
      #cbd9f3
    )
    !important;

  border-radius:
    11px
    !important;

  outline:
    none
    !important;

  background:
    var(
      --field-bg,
      #edf3ff
    )
    !important;

  color:
    #34435f
    !important;

  font-size:
    11px
    !important;

  font-weight:
    520
    !important;

  box-shadow:
    none
    !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease
    !important;
}


body.inc-register-v15
.inc-search-select > input {
  padding-right:
    42px
    !important;
}


body.inc-register-v15
.inc-password-shell > input {
  padding-right:
    46px
    !important;
}


/* Focus */

body.inc-register-v15
.inc-register-field > input:focus,

body.inc-register-v15
.inc-password-shell > input:focus,

body.inc-register-v15
.inc-search-select > input:focus {
  border-color:
    var(
      --field-accent,
      #5574c7
    )
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--field-accent, #5574c7)
      13%,
      transparent
    )
    !important;
}


/* ==========================================================
   PLACEHOLDER
   ========================================================== */

body.inc-register-v15
input::placeholder {
  color:
    #8c98ae
    !important;

  font-weight:
    450
    !important;

  opacity:
    1
    !important;
}


/* ==========================================================
   DISABLED
   ========================================================== */

body.inc-register-v15
.inc-search-select.is-disabled {
  opacity:
    1
    !important;
}


body.inc-register-v15
.inc-search-select.is-disabled
> input {
  border-color:
    #e0e5ee
    !important;

  background:
    #f4f6fa
    !important;

  color:
    #8f99a9
    !important;
}


body.inc-register-v15
.inc-search-select.is-disabled
> input::placeholder {
  color:
    #aeb6c5
    !important;
}


/*
 * Placeholder sudah menjelaskan field disabled.
 * Jangan ulang kalimat yang sama di bawah.
 */

body.inc-register-v15
.inc-search-select.is-disabled
+ .inc-register-helper {
  display:
    none
    !important;
}


/* ==========================================================
   HELPER
   bukan badge/pill abu lagi
   ========================================================== */

body.inc-register-v15
.inc-register-helper {
  width:
    auto
    !important;

  margin:
    2px 2px 0
    !important;

  padding:
    0
    !important;

  display:
    flex
    !important;

  align-items:
    center;

  gap:
    5px;

  border:
    0
    !important;

  border-radius:
    0
    !important;

  background:
    transparent
    !important;

  color:
    #71809c
    !important;

  font-size:
    8px
    !important;

  font-weight:
    520
    !important;

  line-height:
    1.45
    !important;
}


body.inc-register-v15
.inc-register-helper::before {
  content:
    "";

  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

  background:
    var(
      --field-accent,
      #6682ca
    );
}


/* ==========================================================
   FORM SPACING
   ========================================================== */

body.inc-register-v15
.inc-register-form-v15 {
  gap:
    13px
    !important;
}


/* ==========================================================
   DROPDOWN BUTTON
   ========================================================== */

body.inc-register-v15
.inc-search-toggle {
  right:
    7px
    !important;

  width:
    32px
    !important;

  height:
    32px
    !important;

  border-radius:
    8px
    !important;

  background:
    rgba(
      255,
      255,
      255,
      .50
    )
    !important;

  color:
    var(
      --field-accent,
      #607bc4
    )
    !important;
}


body.inc-register-v15
.inc-search-toggle:not(:disabled):hover {
  background:
    #ffffff
    !important;
}


/* ==========================================================
   SEARCH MENU
   ========================================================== */

body.inc-register-v15
.inc-search-menu {
  margin-top:
    2px;

  padding:
    6px
    !important;

  border:
    1px solid
    #d1dcef
    !important;

  border-radius:
    11px
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 15px 35px
    rgba(40, 52, 89, .15)
    !important;
}


body.inc-register-v15
.inc-search-option {
  min-height:
    39px
    !important;

  padding:
    9px 11px
    !important;

  border-radius:
    8px
    !important;

  color:
    #44536c
    !important;

  font-size:
    10px
    !important;

  font-weight:
    520
    !important;
}


body.inc-register-v15
.inc-search-option:hover {
  background:
    linear-gradient(
      90deg,
      #edf3ff,
      #fff3f1
    )
    !important;

  color:
    #435fae
    !important;
}


/* ==========================================================
   SCHOOL MANUAL
   ========================================================== */

body.inc-register-v15
.inc-manual-school-toggle {
  width:
    100%
    !important;

  min-height:
    62px
    !important;

  margin:
    5px 0 0
    !important;

  padding:
    10px 11px
    !important;

  display:
    flex
    !important;

  align-items:
    center
    !important;

  justify-content:
    space-between
    !important;

  gap:
    14px;

  border:
    1px solid
    #e7c9d2
    !important;

  border-left:
    4px solid
    #e87970
    !important;

  border-radius:
    11px
    !important;

  background:
    linear-gradient(
      100deg,
      #fff1ef 0%,
      #f4f2ff 100%
    )
    !important;

  box-shadow:
    none
    !important;

  text-align:
    left
    !important;
}


body.inc-register-v15
.inc-manual-school-toggle:not(:disabled):hover {
  border-color:
    #deaeb1
    !important;

  background:
    linear-gradient(
      100deg,
      #ffeae7 0%,
      #eef1ff 100%
    )
    !important;

  transform:
    translateY(-1px);
}


body.inc-register-v15
.inc-manual-school-copy {
  display:
    grid;

  gap:
    3px;
}


body.inc-register-v15
.inc-manual-school-copy strong {
  color:
    #8c555f
    !important;

  font-size:
    9px
    !important;

  font-weight:
    650
    !important;
}


body.inc-register-v15
.inc-manual-school-copy small {
  color:
    #81798d
    !important;

  font-size:
    8px
    !important;

  font-weight:
    480
    !important;
}


body.inc-register-v15
.inc-manual-school-toggle > b {
  padding:
    7px 10px
    !important;

  flex:
    0 0 auto;

  border-radius:
    8px
    !important;

  background:
    #df716b
    !important;

  color:
    #ffffff
    !important;

  font-size:
    8px
    !important;

  font-weight:
    680
    !important;

  white-space:
    nowrap;
}


/* Disabled manual box */

body.inc-register-v15
.inc-manual-school-toggle:disabled {
  opacity:
    .48
    !important;

  cursor:
    default
    !important;
}


/* ==========================================================
   PASSWORD EYE
   ========================================================== */

body.inc-register-v15
.inc-password-eye {
  color:
    var(
      --field-accent,
      #647dc0
    )
    !important;

  background:
    rgba(
      255,
      255,
      255,
      .45
    )
    !important;
}


body.inc-register-v15
.inc-password-eye:hover {
  background:
    #ffffff
    !important;
}


/* ==========================================================
   PASSWORD MATCH
   ========================================================== */

body.inc-register-v15
.inc-password-match {
  width:
    fit-content;

  margin-top:
    2px;

  padding:
    4px 7px
    !important;

  border-radius:
    6px;

  font-size:
    8px
    !important;

  font-weight:
    600
    !important;
}


body.inc-register-v15
.inc-password-match.is-ok {
  background:
    #e8f7ed
    !important;

  color:
    #387a51
    !important;
}


body.inc-register-v15
.inc-password-match.is-error {
  background:
    #fff0ee
    !important;

  color:
    #b7534d
    !important;
}


/* ==========================================================
   REGISTER SUBMIT
   ========================================================== */

body.inc-register-v15
.inc-register-submit {
  min-height:
    48px
    !important;

  margin-top:
    3px
    !important;

  border-radius:
    11px
    !important;

  background:
    linear-gradient(
      90deg,
      #4e70cf 0%,
      #6f78c8 48%,
      #da6d67 100%
    )
    !important;

  color:
    #ffffff
    !important;

  font-size:
    11px
    !important;

  font-weight:
    650
    !important;

  box-shadow:
    0 8px 20px
    rgba(66, 88, 154, .13)
    !important;
}


/* ==========================================================
   REGISTER FOOTER
   ========================================================== */

body.inc-register-v15
.inc-register-footer {
  margin-top:
    2px
    !important;

  color:
    #7d8799
    !important;

  font-size:
    9px
    !important;

  font-weight:
    450
    !important;
}


body.inc-register-v15
.inc-register-footer a {
  color:
    #4d69bd
    !important;

  font-weight:
    650
    !important;
}


/* ==========================================================
   LOGIN
   SAME VISUAL LANGUAGE
   ========================================================== */

body.inc-auth-login
.inc-auth-card {
  background:
    linear-gradient(
      180deg,
      #fcfdff 0%,
      #f7f9ff 70%,
      #fff8f6 100%
    )
    !important;

  border:
    1px solid
    rgba(68, 91, 158, .14)
    !important;

  box-shadow:
    0 22px 58px
    rgba(35, 43, 76, .15)
    !important;
}


body.inc-auth-login
.inc-auth-card h1,
body.inc-auth-login
.inc-auth-card h2,
body.inc-auth-login
.inc-auth-card h3 {
  color:
    #293961
    !important;

  font-weight:
    680
    !important;
}


/* Login labels */

body.inc-auth-login
.inc-auth-card label {
  color:
    #4661a0
    !important;

  font-size:
    11px
    !important;

  font-weight:
    600
    !important;
}


/* Login inputs */

body.inc-auth-login
.inc-auth-card input[type="email"] {
  border-color:
    #cbd9f3
    !important;

  background:
    #edf3ff
    !important;
}


body.inc-auth-login
.inc-auth-card input[type="password"],
body.inc-auth-login
.inc-auth-card input[type="text"] {
  border-color:
    #efd0cc
    !important;

  background:
    #fff1ef
    !important;
}


body.inc-auth-login
.inc-auth-card input:focus {
  border-color:
    #617cca
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 0 0 3px
    rgba(76, 104, 190, .10)
    !important;
}


/* Forgot password */

body.inc-auth-login
.inc-auth-forgot-v14 {
  color:
    #cf6863
    !important;

  font-size:
    10px
    !important;

  font-weight:
    600
    !important;
}


/* Login submit */

body.inc-auth-login
.inc-auth-card
button[type="submit"] {
  background:
    linear-gradient(
      90deg,
      #4e70cf 0%,
      #747bc7 48%,
      #da6d67 100%
    )
    !important;

  font-weight:
    650
    !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (
  max-width: 720px
) {

  body.inc-register-v15
  .inc-auth-card {
    width:
      calc(100vw - 24px)
      !important;

    padding:
      25px 20px 24px
      !important;
  }


  body.inc-register-v15
  .inc-register-title h1 {
    font-size:
      27px
      !important;
  }


  body.inc-register-v15
  .inc-register-form-v15 {
    gap:
      12px
      !important;
  }


  body.inc-register-v15
  .inc-manual-school-toggle {
    align-items:
      flex-start
      !important;
  }

}