:root,
[data-bs-theme="light"] {
  --bs-root-font-size: 17px;
  /* --bs-font-sans: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  /* --bs-font-sans-serif: "IBM Plex Sans Thai Looped", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  --bs-body-font-size: 0.95rem;
  --bs-body-font-letter-spacing: -.1px;
  /* --bs-heading-color: #23202b; */
  /* fix IBM Plex Sans Thai Looped */


  --palette-primary-main: #1663d8;
  --palette-hover-primary-main: #013b93;
  --palette-border-color: #dee2e6;
  --palette-hover-border-color: #82808b;

  --ti-margin-top: -0.13em;

  --palette-bg-main: #141371;
  --palette-color-0: #2D367E;
  --palette-color-1: #242424;
  --palette-color-2: #616161;

  --bs-danger-rgb: 222, 51, 35;
}

.dark-style {
  --palette-border-color: #56596f;
  --palette-hover-border-color: #9a9ab0;
  --bs-heading-color: #cfcde4;

  --palette-primary-main: #2986ff;

  --palette-color-1: var(--bs-heading-color);
  --palette-color-2: var(--bs-body-color);
}

.ibm-plex-sans-thai-thin {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-sans-thai-extralight {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-sans-thai-light {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-sans-thai-regular {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-thai-medium {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-thai-semibold {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-sans-thai-bold {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.form-label.required:after,
.form-check-label.required:after {
  display: inline-block;
  font-family: tabler-icons !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\efd5";
  color: red;
  font-size: .6rem;
  vertical-align: super;
  padding-left: 3px;
  padding-right: 3px;
  font-weight: 900
}

.col-form-label.required:after,
.form-check-label.required:after {
  display: inline-block;
  font-family: tabler-icons !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\efd5";
  color: red;
  font-size: .6rem;
  vertical-align: super;
  padding-left: 3px;
  padding-right: 3px;
  font-weight: 900
}

.form-control:read-only {
  color: #acaab1;
  background-color: #f3f2f3;
  border-color: #cdccd0;
  opacity: 1;
}

.center {
  text-align: center;
}

.form-control.is-invalid {
  border-color: var(--bs-form-invalid-color) !important;
  border-width: 2px;
}

.form-control.is-valid {
  border-color: var(--bs-form-valid-color) !important;
  border-width: 2px;
}

.form-control.is-valid:focus {
  border-color: var(--bs-form-valid-color);
  border-width: 2px;
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

.form-control.is-invalid:focus {
  border-color: var(--bs-form-invalid-color);
  border-width: 2px;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}


.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-top: 2px;
}

/**
    Password Strong
*/
.list-pass-strong {
  font-size: .9rem;
  line-height: 1.6;
  margin-top: 10px;
  color: var(--slate-color-500);
}

.list-pass-strong>div {
  margin-bottom: .2rem !important;
}

.list-pass-strong li {
  position: relative;
  padding-left: 21px;
}

.list-pass-strong li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #CFD8DC;
  font-size: 1rem;
  position: absolute;
  left: 1px;
  content: "\f00d";
}

.list-pass-strong li.valid::before {
  color: #008f00;
  content: "\f00c";
}


.bg-green {
  background: var(--bs-success, #28c76f) !important;
  color: white !important;
}

.text-green {
  color: var(--bs-success, #28c76f) !important;
}

.bs-stepper .step-trigger:disabled:has(.bg-green) {
  opacity: 1 !important;
}

.bs-stepper .step.crossed .step-trigger .bs-stepper-circle {
  background: var(--bs-success, #28c76f) !important;
  color: white !important;
  ;
}

.title_register {
  font-size: calc(23px + 1vw);
}

.show-mobile {
  display: none;
}

@media (max-width: 991.98px) {
  .show-desktop {
    display: none;
  }

  .show-mobile {
    display: inline-block;
    margin-left: 10px;
  }

  .app-brand-logo {
    display: none;
  }
}


.form-password-toggle .input-group {
  position: relative;
}

.form-password-toggle .password-toggle {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding-inline: .75rem;
  line-height: 1;
  pointer-events: auto;
  user-select: none;
}

.form-password-toggle .password-toggle .ti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  line-height: 1;
  text-align: center;
  vertical-align: top;
  pointer-events: none;
}

.login-cover {
  visibility: visible !important;
}

/* ==========================================================================
   Modern Auth & Login Redesign
   ========================================================================== */
.auth-cover-bg {
  position: relative !important;
  block-size: 100vh;
  inline-size: 100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

/* Sticky Left Hero Sidebar for multi-step / long pages */
@media (min-width: 992px) {
  .auth-hero-sticky-col {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    align-self: flex-start !important;
    z-index: 10;
  }

  .auth-hero-sticky-col .auth-cover-bg {
    height: 100% !important;
    min-height: 100% !important;
  }
}

.auth-hero-gradient-bg {
  background:
    radial-gradient(120% 140% at 12% 10%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(160deg, #4A3CDB 0%, #2A2076 78%);
}

.auth-hero-body {
  margin-top: clamp(1.5rem, 8vh, 4rem);
}

.auth-hero-logo-img {
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.auth-hero-logo-img:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
}

.auth-hero-title {
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.auth-hero-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.auth-hero-rule {
  width: 52px;
  height: 3px;
  background: #DC9A3C;
  border-radius: 2px;
  margin: 1.1rem 0 1.25rem;
}

.auth-hero-steps {
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 1.1rem 0 0 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.auth-hero-steps li {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.auth-hero-steps li::marker {
  color: #DC9A3C;
  font-weight: 700;
}

.auth-hero-quote {
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: #FDF4E3;
}

.auth-hero-foot {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  margin: auto 0 0;
  padding-top: 1.5rem;
}

.auth-right-panel {
  background: var(--bs-paper-bg, #ffffff);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1;
}

.auth-ambient-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.auth-ambient-bg::before {
  content: '';
  position: absolute;
  top: -8rem;
  right: -8rem;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(115, 103, 240, 0.09) 0%, rgba(168, 85, 247, 0.04) 50%, transparent 70%);
  filter: blur(40px);
  animation: auth-ambient-drift 14s ease-in-out infinite alternate;
}

.auth-ambient-bg::after {
  content: '';
  position: absolute;
  bottom: -6rem;
  left: -6rem;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.07) 0%, rgba(244, 63, 94, 0.03) 50%, transparent 70%);
  filter: blur(40px);
  animation: auth-ambient-drift-rev 16s ease-in-out infinite alternate;
}

@keyframes auth-ambient-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-30px, 40px) scale(1.1);
  }

  100% {
    transform: translate(20px, -20px) scale(0.95);
  }
}

@keyframes auth-ambient-drift-rev {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(40px, -30px) scale(1.08);
  }

  100% {
    transform: translate(-20px, 20px) scale(0.92);
  }
}

.auth-motion-fade-up {
  opacity: 0;
  animation: authFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-motion-delay-1 {
  animation-delay: 0.05s;
}

.auth-motion-delay-2 {
  animation-delay: 0.12s;
}

.auth-motion-delay-3 {
  animation-delay: 0.20s;
}

.auth-motion-delay-4 {
  animation-delay: 0.28s;
}

.auth-motion-delay-5 {
  animation-delay: 0.36s;
}

@keyframes authFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.auth-lang-pill {
  display: inline-flex;
  background: var(--bs-gray-100, #f1f5f9);
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-radius: 9999px;
  padding: 3px;
  gap: 2px;
}

.auth-lang-item {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-body-color, #475569);
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.auth-lang-item:hover {
  color: var(--bs-primary, #7367f0);
}

.auth-lang-item.active {
  background: var(--bs-primary, #7367f0);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(115, 103, 240, 0.35);
}

.auth-badge-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--bs-primary, #7367f0);
  background: rgba(115, 103, 240, 0.08);
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.auth-badge-pill:hover {
  transform: scale(1.03);
  background: rgba(115, 103, 240, 0.14);
}

.auth-badge-pill i {
  animation: badge-icon-pulse 3s ease-in-out infinite;
}

@keyframes badge-icon-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
    color: #5e50ee;
  }
}

.auth-main-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bs-heading-color, #1e293b);
  letter-spacing: -0.01em;
  line-height: 1.45;
  margin-bottom: 0.35rem;
}

.auth-sub-title {
  font-size: 0.88rem;
  color: #64748b !important;
  line-height: 1.5;
}

.auth-signin-hint {
  font-size: 0.85rem;
  color: #64748b;
}

.auth-signin-link {
  margin-left: 0.15rem;
  color: #7367f0;
  font-weight: 700;
  text-decoration: none;
}

.auth-signin-link:hover {
  color: #5e50ee;
  text-decoration: underline;
}

.auth-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.4rem;
  line-height: 1.4;
  display: block;
}

.auth-input {
  border-radius: 0.5rem !important;
  border-color: var(--bs-border-color, #dbdade);
  font-size: 0.9rem;
  padding: 0.65rem 0.95rem;
  height: calc(1.5em + 1.3rem + 2px);
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease !important;
}

/* Standalone input focus (e.g. username) */
.form-control.auth-input:not(.input-group .auth-input):focus {
  border-color: var(--bs-primary, #7367f0) !important;
  box-shadow: 0 0 0 3.5px rgba(115, 103, 240, 0.16), 0 3px 10px rgba(115, 103, 240, 0.08) !important;
  transform: translateY(-1px);
}

/* Unified merged input group (e.g. password with eye toggle) */
.input-group.input-group-merge {
  border-radius: 0.5rem !important;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease !important;
}

.input-group.input-group-merge:focus-within {
  box-shadow: 0 0 0 3.5px rgba(115, 103, 240, 0.16), 0 3px 10px rgba(115, 103, 240, 0.08) !important;
  transform: translateY(-1px);
}

.input-group.input-group-merge .auth-input {
  border-right: 0 !important;
  border-radius: 0.5rem 0 0 0.5rem !important;
  box-shadow: none !important;
  transform: none !important;
}

.input-group.input-group-merge .input-group-text {
  border-color: var(--bs-border-color, #dbdade);
  background: #ffffff;
  padding: 0 0.95rem;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

/* Icon after the field (e.g. password show/hide toggle). */
.input-group.input-group-merge .input-group-text:last-child {
  border-left: 0 !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
}

/* Icon before the field (e.g. a search box) - round the outer/left
   corners and flatten the inner/right ones instead, or the icon's own
   border curves the wrong way and shows as a stray bubble at the seam. */
.input-group.input-group-merge .input-group-text:first-child {
  border-right: 0 !important;
  border-radius: 0.5rem 0 0 0.5rem !important;
}

.input-group.input-group-merge:focus-within .auth-input,
.input-group.input-group-merge:focus-within .input-group-text {
  border-color: var(--bs-primary, #7367f0) !important;
}

.form-password-toggle .input-group-text:hover i {
  transform: scale(1.15);
  color: var(--bs-primary, #7367f0);
}

.form-password-toggle .input-group-text i {
  transition: transform 0.2s ease, color 0.2s ease;
}

.auth-forgot-link {
  font-size: 0.8rem;
  color: var(--bs-primary, #7367f0);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.auth-forgot-link:hover {
  text-decoration: underline;
  transform: translateX(1px);
}

.btn-login-gradient {
  background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%) !important;
  border: none !important;
  border-radius: 0.55rem !important;
  box-shadow: 0 4px 14px rgba(115, 103, 240, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0.72rem 1.25rem !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-login-gradient::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(60deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.35) 50%,
      rgba(255, 255, 255, 0) 80%);
  transform: rotate(25deg);
  pointer-events: none;
  animation: btn-shine-sweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes btn-shine-sweep {

  0%,
  60% {
    left: -60%;
  }

  85%,
  100% {
    left: 160%;
  }
}

.btn-login-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(115, 103, 240, 0.5) !important;
}

.btn-login-gradient:hover i {
  transform: translateX(3px);
}

.btn-login-gradient i {
  transition: transform 0.2s ease;
}

.btn-login-gradient:active {
  transform: translateY(0);
}

.btn-create-account {
  border: 1.5px solid var(--bs-primary, #7367f0) !important;
  background: rgba(115, 103, 240, 0.04) !important;
  color: var(--bs-primary, #7367f0) !important;
  border-radius: 0.55rem !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0.68rem 1.25rem !important;
}

.btn-create-account:hover {
  background: var(--bs-primary, #7367f0) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(115, 103, 240, 0.28) !important;
}

.btn-create-account:hover i {
  transform: rotate(-8deg) scale(1.1);
}

.btn-create-account i {
  transition: transform 0.2s ease;
}

.auth-help-footer {
  border-top: 1px dashed var(--bs-border-color, #e2e8f0);
}

/* Align & Stacking for Select2 in Auth panel */
#form-login,
#form-forgot-password {
  position: relative;
  z-index: 10;
}

.form-control-validation:has(.select2-container--open),
.form-control-validation:focus-within {
  position: relative;
  z-index: 9999;
}

.auth-right-panel .select2-container {
  width: 100% !important;
  position: relative;
}

.auth-right-panel .select2-container--open {
  z-index: 999999 !important;
}

.auth-right-panel .select2-container--default .select2-selection--single {
  height: calc(1.5em + 1.3rem + 2px) !important;
  border-radius: 0.5rem !important;
  border: 1px solid var(--bs-border-color, #dbdade) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 0.85rem !important;
  background-color: #ffffff !important;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease !important;
}

.auth-right-panel .select2-container--default.select2-container--focus .select2-selection--single,
.auth-right-panel .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--bs-primary, #7367f0) !important;
  box-shadow: 0 0 0 3.5px rgba(115, 103, 240, 0.16), 0 3px 10px rgba(115, 103, 240, 0.08) !important;
  transform: translateY(-1px);
}

.auth-right-panel .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + 1.3rem) !important;
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
  color: var(--bs-body-color, #475569) !important;
  font-size: 0.9rem !important;
}

.auth-right-panel .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 0.75rem !important;
}

/* Select2 Dropdown Menu Styling & Solid Background */
.select2-dropdown {
  background-color: #ffffff !important;
  border: 1px solid var(--bs-border-color, #dbdade) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 12px 36px rgba(75, 70, 92, 0.22) !important;
  z-index: 999999 !important;
  overflow: hidden !important;
}

.select2-results {
  background-color: #ffffff !important;
}

.select2-container--default .select2-results__options {
  max-height: 240px !important;
  background-color: #ffffff !important;
  padding: 6px !important;
}

.select2-container--default .select2-results__option {
  padding: 0.6rem 0.95rem !important;
  font-size: 0.9rem !important;
  color: var(--bs-body-color, #475569) !important;
  background-color: transparent !important;
  border-radius: 0.375rem !important;
  margin-bottom: 2px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--bs-primary, #7367f0) !important;
  color: #ffffff !important;
}

.select2-container--default .select2-results__option--selected {
  background-color: rgba(115, 103, 240, 0.12) !important;
  color: var(--bs-primary, #7367f0) !important;
  font-weight: 600 !important;
}

/* Mobile optimizations for auth page */
@media (max-width: 575.98px) {
  .auth-right-panel {
    padding: 1.5rem 1rem 2rem !important;
    background: #f8f9fc !important;
  }

  .auth-card-mobile {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem 1.15rem;
    box-shadow: 0 4px 20px rgba(75, 70, 92, 0.08);
    border: 1px solid #eef0f6;
  }

  .auth-main-title {
    font-size: 1.22rem !important;
  }

  .auth-sub-title {
    font-size: 0.84rem !important;
  }

  .auth-input,
  .auth-right-panel .select2-container--default .select2-selection--single {
    font-size: 0.88rem !important;
    height: 46px !important;
  }

  .btn-login-gradient,
  .btn-create-account {
    padding: 0.65rem 1rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .auth-ambient-bg::before,
  .auth-ambient-bg::after,
  .btn-login-gradient::after,
  .auth-badge-pill i {
    animation: none !important;
  }

  .auth-motion-fade-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .btn-login-gradient,
  .btn-create-account,
  .auth-input,
  .auth-badge-pill,
  .auth-right-panel .select2-container--default .select2-selection--single {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Login Hero — Left Panel Refinement
   Scoped to login.volt only (login-hero-*, login-info-list). Colors match
   the approved mockup (indigo-violet gradient + gold accent) rather than
   the admin theme's default primary, per request. Font is left untouched —
   no new font-family is introduced here.
   ========================================================================== */
.login-hero-cover {
  background:
    radial-gradient(120% 140% at 12% 10%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(160deg, #4A3CDB 0%, #2A2076 78%);
}

.login-hero-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.login-hero-body {
  margin-top: clamp(1.5rem, 8vh, 4rem);
}

.login-hero-brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  flex-shrink: 0;
}

.login-hero-brand-name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

.login-hero-brand-sub {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.15rem;
}

.login-hero-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.login-hero-title {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.login-hero-rule {
  width: 52px;
  height: 3px;
  background: #DC9A3C;
  border-radius: 2px;
  margin: 1.15rem 0 1.35rem;
}

.login-hero-quote {
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: #FDF4E3;
}

.login-hero-desc {
  font-size: 0.94rem;
  line-height: 1.65;
  max-width: 560px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.login-info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 520px;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.login-info-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.login-info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: #DC9A3C;
  border-radius: 1px;
}

.login-hero-foot {
  position: relative;
  z-index: 2;
  margin: auto 0 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
}


/**
  Apply personal information wizard
*/
.applicant-info-shell {
  --applicant-info-line: var(--bs-border-color);
  --applicant-info-muted: var(--bs-secondary-color);
  --applicant-info-heading: var(--bs-heading-color);
  --applicant-info-radius: .5rem;
  padding: 0;
}

.applicant-info-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.applicant-info-heading h5 {
  margin: 0 0 .15rem;
  color: var(--applicant-info-heading);
  font-weight: 700;
  line-height: 1.2;
}

.applicant-info-eyebrow {
  margin-bottom: .1rem;
  color: var(--bs-primary);
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.25;
}

.applicant-info-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem;
}

.applicant-info-summary span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: .28rem .6rem;
  border: 1px solid rgba(22, 99, 216, .14);
  border-radius: 999px;
  color: #344054;
  background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
  font-size: .82rem;
  font-weight: 650;
  white-space: nowrap;
}

.applicant-info-summary .ti {
  color: var(--bs-primary);
  font-size: 1.05rem;
}

.applicant-info-wizard {
  overflow: hidden;
  border: 1px solid var(--applicant-info-line);
  border-radius: var(--applicant-info-radius);
  background: var(--bs-body-bg);
}

.applicant-info-wizard .bs-stepper-header {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  padding: .9rem;
  border-right: 0 !important;
  border-bottom: 1px solid var(--applicant-info-line);
  background: color-mix(in srgb, var(--bs-primary) 4%, var(--bs-body-bg));
}

.applicant-info-wizard .step {
  width: 100%;
  min-width: 0;
}

.applicant-info-wizard .step-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-height: 4.25rem;
  gap: .65rem;
  padding: .75rem !important;
  border: 1px solid transparent;
  border-radius: .5rem;
  text-align: left;
  background: var(--bs-body-bg);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.applicant-info-wizard .step-trigger:hover {
  border-color: color-mix(in srgb, var(--bs-primary) 24%, var(--bs-border-color));
  background: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-body-bg));
}

.applicant-info-wizard .step.active .step-trigger {
  border-color: var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg));
  box-shadow: inset 0 -3px 0 var(--bs-primary);
}

.applicant-info-wizard .bs-stepper-circle {
  display: inline-flex;
  flex: 0 0 2.15rem;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  min-height: 2.15rem;
  border-radius: .375rem;
  background: rgba(var(--bs-base-color-rgb), .06);
  color: var(--bs-heading-color);
  line-height: 1;
  margin: 0;
}

.applicant-info-wizard .bs-stepper-circle .ti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  line-height: 1;
}

.applicant-info-wizard .step.active .bs-stepper-circle {
  background: var(--bs-primary);
  color: #fff;
  box-shadow: 0 .125rem .375rem rgba(var(--bs-primary-rgb), .3);
}

.applicant-info-wizard .bs-stepper-title {
  display: block;
  color: var(--applicant-info-heading);
  font-weight: 700;
  line-height: 1.2;
}

.applicant-info-wizard .bs-stepper-subtitle {
  display: block;
  margin-top: .15rem;
  color: var(--applicant-info-muted);
  font-size: .8rem;
  line-height: 1.25;
  white-space: normal;
}

.applicant-info-wizard .bs-stepper-label {
  display: block !important;
  min-width: 0;
  max-width: none !important;
  line-height: 1.25;
  text-align: left !important;
}

.applicant-info-wizard .line {
  display: none;
}

.applicant-info-wizard .bs-stepper-content {
  min-width: 0;
  padding: 1rem;
  background: var(--bs-body-bg);
}

.applicant-info-wizard .content>.row {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--applicant-info-line);
  border-radius: .5rem;
  background: var(--bs-body-bg);
  row-gap: .85rem !important;
  column-gap: 0;
}

.applicant-section-intro {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
}

.applicant-section-intro h6 {
  margin: 0 0 .1rem;
  color: var(--applicant-info-heading);
  font-weight: 750;
  line-height: 1.2;
}

.applicant-section-intro p {
  margin: 0;
  color: var(--applicant-info-muted);
  font-size: .88rem;
  line-height: 1.35;
}

.applicant-info-wizard .form-label,
.applicant-info-wizard p.form-label {
  margin-bottom: .35rem;
  color: #344054;
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.2;
}

.applicant-info-wizard .form-control,
.applicant-info-wizard .form-select,
.applicant-info-wizard .select2-container--default .select2-selection--single {
  min-height: 2.65rem;
  border-color: #d7deea;
  border-radius: .375rem;
  background-color: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.applicant-info-wizard .form-control:focus,
.applicant-info-wizard .form-select:focus,
.applicant-info-wizard .select2-container--default.select2-container--focus .select2-selection--single,
.applicant-info-wizard .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .22rem rgba(22, 99, 216, .12);
}

.applicant-info-wizard .form-control:disabled {
  border-style: dashed;
  color: #667085;
  background-color: #f8fafc;
}

.applicant-info-wizard .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-top: .36rem;
  padding-left: .95rem;
  color: #182230;
  line-height: 1.6;
}

.applicant-info-wizard .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.55rem;
  right: .65rem;
}

.applicant-info-wizard .form-check.form-check-inline {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.applicant-info-wizard .form-check-input {
  width: 1.08rem;
  height: 1.08rem;
  margin-top: 0;
}

.applicant-info-wizard .col-12.d-flex.justify-content-between {
  margin-top: .1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--applicant-info-line);
}

.applicant-info-wizard .btn {
  min-height: 2.5rem;
  border-radius: .375rem;
  font-weight: 650;
  white-space: normal;
}

.applicant-info-wizard .btn-primary,
.applicant-info-wizard .btn-success {
  box-shadow: 0 8px 18px rgba(22, 99, 216, .18);
}

@media (max-width: 991.98px) {
  .applicant-info-heading {
    align-items: flex-start;
  }

  .applicant-info-summary {
    justify-content: flex-start;
  }

  .applicant-info-wizard .bs-stepper-header {
    display: flex;
    gap: .65rem;
    overflow-x: auto;
    padding: .85rem;
  }

  .applicant-info-wizard .step {
    min-width: 235px;
  }

  .applicant-info-wizard .step-trigger {
    min-height: 3.75rem;
  }
}

/* Keep multiple applied-course ranks on separate readable lines. */
.dashboard-applications-feature-list p {
  white-space: pre-line !important;
}

/* White glass-liquid surface for the latest applications card. */
.dashboard-applications-feature {
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 1rem 2.4rem rgba(75, 70, 92, .1), inset 0 1px 0 rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  overflow: hidden;
  position: relative;
}

.dashboard-applications-feature::before {
  animation: dashboard-applications-gradient-drift 16s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 72% 54% at 0% 100%, rgba(115, 103, 240, .34) 0%, rgba(167, 157, 255, .16) 48%, transparent 76%);
  bottom: -4rem;
  content: '';
  filter: blur(14px);
  height: 18rem;
  opacity: .9;
  pointer-events: none;
  position: absolute;
  left: -5%;
  width: 120%;
  z-index: 0;
}

.dashboard-applications-feature>* {
  position: relative;
  z-index: 1;
}

@keyframes dashboard-applications-gradient-drift {
  0% {
    transform: translate(-8px, 3px) scale(1);
  }

  100% {
    transform: translate(10px, -3px) scale(1.05);
  }
}

/* Soft lavender background for the applicant navigation rail. */
#layout-menu.bg-menu-theme {
  background: radial-gradient(circle at 8% 92%, rgba(115, 103, 240, .2), transparent 17rem), linear-gradient(180deg, #ffffff 0%, #ffffff 56%, #f3f1ff 100%);
  border-right-color: rgba(115, 103, 240, .12);
}

#layout-menu.bg-menu-theme .menu-inner {
  background: transparent;
  position: relative;
  z-index: 1;
}

@media (max-width: 575.98px) {
  .applicant-info-heading {
    display: block;
  }

  .applicant-info-summary {
    margin-top: .75rem;
  }

  .applicant-info-wizard .bs-stepper-content {
    padding: .85rem;
  }

  .applicant-info-wizard .content>.row {
    padding: .85rem;
    row-gap: .8rem !important;
  }

  .applicant-info-wizard .bs-stepper-header {
    padding: .75rem;
  }

  .applicant-info-wizard .step {
    min-width: 225px;
  }

  .applicant-info-wizard .step-trigger {
    gap: .6rem;
    padding: .65rem !important;
  }

  .applicant-info-wizard .bs-stepper-circle {
    flex-basis: 2rem;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
  }

  .applicant-section-intro {
    padding: .7rem;
  }

  .applicant-info-wizard .col-12.d-flex.justify-content-between {
    gap: .75rem;
    flex-wrap: wrap;
  }

  .applicant-info-wizard .col-12.d-flex.justify-content-between .btn {
    flex: 1 1 0;
  }
}


/* Keep the password-change confirmation above the fixed application chrome. */
.change-password-toast-container {
  --bs-toast-zindex: 1095;
}

@media (min-width: 930px) {
  .d-md-block-show {
    display: block !important;
  }
}

/**
  Apply personal information wizard - friendly compact redesign
*/
.applicant-info-shell {
  --applicant-info-line: var(--bs-border-color);
  --applicant-info-soft: color-mix(in srgb, var(--bs-primary) 7%, var(--bs-body-bg));
  --applicant-info-soft-strong: color-mix(in srgb, var(--bs-primary) 13%, var(--bs-body-bg));
  --applicant-info-muted: var(--bs-secondary-color);
  --applicant-info-heading: var(--bs-heading-color);
}

.applicant-info-heading {
  align-items: center;
  margin-bottom: .85rem;
  padding: .85rem 1rem;
  border: 1px solid var(--applicant-info-line);
  border-radius: .5rem;
  background: var(--bs-body-bg);
}

.applicant-info-heading h5 {
  margin-bottom: .1rem;
  font-size: 1.15rem;
  line-height: 1.2;
}

.applicant-info-heading .text-muted {
  line-height: 1.3;
}

.applicant-info-summary {
  gap: .35rem;
}

.applicant-info-summary span {
  min-height: 1.85rem;
  padding: .25rem .55rem;
  border-color: color-mix(in srgb, var(--bs-primary) 18%, var(--bs-border-color));
  background: var(--applicant-info-soft);
  font-size: .78rem;
}

.applicant-info-wizard {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.applicant-info-wizard .bs-stepper-header {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: .85rem;
  padding: .75rem;
  border: 1px solid var(--applicant-info-line);
  border-radius: .5rem;
  background: var(--bs-body-bg);
}

.applicant-info-wizard .step-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 3rem;
  gap: .55rem;
  padding: .55rem .6rem !important;
  border: 1px solid var(--applicant-info-line);
  border-radius: .5rem;
  background: var(--bs-body-bg);
  text-align: left;
  box-shadow: none;
}

.applicant-info-wizard .step-trigger:hover {
  border-color: color-mix(in srgb, var(--bs-primary) 34%, var(--bs-border-color));
  background: var(--applicant-info-soft);
}

.applicant-info-wizard .step.active .step-trigger {
  border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-border-color));
  background: var(--applicant-info-soft-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 16%, transparent);
}

.applicant-info-wizard .bs-stepper-circle {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: .45rem;
  background: var(--bs-gray-100);
  color: var(--bs-secondary-color);
}

.applicant-info-wizard .step.active .bs-stepper-circle {
  background: var(--bs-primary);
  color: #fff;
  box-shadow: none;
}

.applicant-info-wizard .bs-stepper-circle .ti {
  width: 1.1rem;
  height: 1.1rem;
  font-size: 1.1rem;
}

.applicant-info-wizard .bs-stepper-label {
  display: block !important;
  min-width: 0;
  max-width: none !important;
  text-align: left !important;
  line-height: 1.12;
}

.applicant-info-wizard .bs-stepper-title {
  display: block;
  font-size: .88rem;
  font-weight: 700 !important;
  line-height: 1.12;
}

.applicant-info-wizard .bs-stepper-subtitle {
  display: block;
  margin-top: .08rem;
  color: var(--applicant-info-muted);
  font-size: .73rem;
  line-height: 1.12;
}

.applicant-info-wizard .bs-stepper-content {
  padding: 0;
  background: transparent;
}

.applicant-info-wizard .content>.row {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--applicant-info-line);
  border-radius: .5rem;
  background: var(--bs-body-bg);
  row-gap: .72rem !important;
  column-gap: 0;
}

.applicant-info-wizard .content>.row>[class*="col-"] {
  min-height: auto;
}

.applicant-section-intro {
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border-color: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-border-color));
  background: var(--applicant-info-soft);
}

.applicant-section-intro .avatar {
  flex: 0 0 auto;
}

.applicant-section-intro h6 {
  margin-bottom: .05rem;
  font-size: .95rem;
  line-height: 1.15;
}

.applicant-section-intro p {
  font-size: .82rem;
  line-height: 1.2;
}

.applicant-info-wizard .form-label,
.applicant-info-wizard p.form-label {
  margin-bottom: .28rem;
  font-size: .82rem;
  line-height: 1.12;
}

.applicant-info-wizard .form-control,
.applicant-info-wizard .form-select,
.applicant-info-wizard .select2-container--default .select2-selection--single {
  min-height: 2.45rem;
  border-radius: .375rem;
}

.applicant-info-wizard .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-top: .25rem;
  line-height: 1.55;
}

.applicant-info-wizard .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.35rem;
}

.applicant-info-wizard .form-check.form-check-inline {
  min-height: 2.15rem;
  margin-top: .15rem !important;
  margin-bottom: .15rem !important;
}

.applicant-info-wizard .col-12.d-flex.justify-content-between {
  margin-top: .05rem;
  padding-top: .75rem;
}

.applicant-info-wizard .btn {
  min-height: 2.35rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
}

@media (max-width: 991.98px) {
  .applicant-info-wizard .bs-stepper-header {
    display: flex;
    overflow-x: auto;
    gap: .5rem;
    padding: .65rem;
  }

  .applicant-info-wizard .step {
    min-width: 215px;
  }

  .applicant-info-wizard .step-trigger {
    min-height: 2.85rem;
  }
}

@media (max-width: 575.98px) {
  .applicant-info-heading {
    padding: .75rem;
  }

  .applicant-info-summary {
    margin-top: .6rem;
  }

  .applicant-info-wizard .content>.row {
    padding: .8rem;
    row-gap: .68rem !important;
  }

  .applicant-info-wizard .step {
    min-width: 205px;
  }

  .applicant-info-wizard .step-trigger {
    padding: .5rem .55rem !important;
  }
}

/**
  Apply personal information wizard - usability polish
*/
.applicant-info-heading {
  box-shadow: 0 .25rem .9rem rgba(16, 24, 40, .04);
}

.applicant-step-counter {
  border-color: color-mix(in srgb, var(--bs-primary) 28%, var(--bs-border-color)) !important;
  color: var(--bs-primary) !important;
  background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg)) !important;
}

.applicant-info-wizard .step.completed .bs-stepper-circle {
  color: #fff;
  background: var(--bs-success);
}

.applicant-info-wizard .step.completed .bs-stepper-circle .ti::before {
  content: "\ea5e";
}

.applicant-info-wizard .step.completed .step-trigger {
  border-color: color-mix(in srgb, var(--bs-success) 30%, var(--bs-border-color));
}

.applicant-info-wizard .content.active {
  animation: applicant-info-fade .18s ease-out;
}

.applicant-optional {
  color: var(--bs-secondary-color);
  font-weight: 500;
}

.applicant-info-wizard .invalid-feedback,
.applicant-info-wizard .is-invalid-custom {
  font-size: .78rem;
}

.applicant-info-wizard label.is-invalid-custom,
.applicant-info-wizard label.error {
  display: block;
  margin-top: .25rem;
  color: var(--bs-form-invalid-color);
}

.applicant-info-wizard .select2-container--disabled .select2-selection--single,
.applicant-info-wizard .form-control:disabled,
.applicant-info-wizard .form-select:disabled {
  cursor: not-allowed;
}

@keyframes applicant-info-fade {
  from {
    opacity: .7;
    transform: translateY(.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 575.98px) {
  .applicant-info-summary span {
    flex: 1 1 100%;
    justify-content: center;
  }

  .applicant-info-wizard .bs-stepper-title {
    font-size: .84rem;
  }

  .applicant-info-wizard .bs-stepper-subtitle {
    font-size: .7rem;
  }

  .applicant-info-wizard .col-12.d-flex.justify-content-between .btn {
    flex-basis: 100%;
    justify-content: center;
  }
}

/**
  Apply personal information wizard - readability and spacing tuning
*/
.applicant-info-shell {
  --applicant-info-line: var(--palette-border-color, var(--bs-border-color));
  --applicant-info-surface: var(--bs-paper-bg, var(--bs-body-bg));
  --applicant-info-soft: color-mix(in srgb, var(--bs-primary) 6%, var(--applicant-info-surface));
  --applicant-info-soft-strong: color-mix(in srgb, var(--bs-primary) 12%, var(--applicant-info-surface));
  --applicant-info-muted: var(--bs-secondary-color);
  --applicant-info-heading: var(--bs-heading-color);
  --applicant-info-field-bg: var(--applicant-info-surface);
  --applicant-info-field-border: color-mix(in srgb, var(--bs-base-color, var(--bs-body-color)) 22%, var(--applicant-info-surface));
  --applicant-info-field-focus: var(--palette-primary-main, var(--bs-primary));
  --applicant-info-card-shadow: var(--bs-card-box-shadow, var(--bs-box-shadow-sm));
}

.applicant-info-heading {
  padding: 1rem 1.1rem;
  background: var(--applicant-info-surface);
  box-shadow: var(--applicant-info-card-shadow);
}

.applicant-info-eyebrow {
  letter-spacing: 0;
}

.applicant-info-heading h5 {
  font-size: 1.2rem;
}

.applicant-info-heading .text-muted {
  color: var(--applicant-info-muted) !important;
  font-size: .86rem;
}

.applicant-info-summary span {
  min-height: 2rem;
  border-color: color-mix(in srgb, var(--bs-primary) 18%, var(--applicant-info-line));
  color: var(--bs-body-color);
  background: var(--applicant-info-soft);
}

.applicant-step-counter {
  border-color: color-mix(in srgb, var(--bs-primary) 28%, var(--applicant-info-line)) !important;
  color: var(--bs-primary) !important;
  background: var(--applicant-info-soft-strong) !important;
}

.applicant-info-wizard .bs-stepper-header {
  gap: .6rem;
  padding: .8rem;
  background: color-mix(in srgb, var(--bs-primary) 3%, var(--applicant-info-surface));
}

.applicant-info-wizard .step-trigger {
  min-height: 3.25rem;
  padding: .6rem .7rem !important;
}

.applicant-info-wizard .step.active .bs-stepper-circle,
.applicant-info-wizard .step.completed .bs-stepper-circle {
  color: var(--bs-white, #fff);
}

.applicant-info-wizard .bs-stepper-title {
  font-size: .9rem;
}

.applicant-info-wizard .bs-stepper-subtitle {
  font-size: .74rem;
  line-height: 1.22;
}

.applicant-info-wizard .content>.row {
  padding: 1.1rem;
  row-gap: .95rem !important;
  background: var(--applicant-info-surface);
  box-shadow: var(--applicant-info-card-shadow);
}

.applicant-info-wizard .content>.row>[class*="col-"] {
  margin-top: 0;
}

.applicant-section-intro {
  min-height: 3.7rem;
  padding: .75rem .85rem;
  border-color: color-mix(in srgb, var(--bs-primary) 16%, var(--applicant-info-line));
  background: var(--applicant-info-soft);
}

.applicant-section-intro h6 {
  font-size: .98rem;
}

.applicant-section-intro p {
  color: var(--applicant-info-muted);
  font-size: .84rem;
  line-height: 1.35;
}

.applicant-info-wizard .form-label,
.applicant-info-wizard p.form-label {
  margin-bottom: .34rem;
  color: var(--applicant-info-heading);
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.22;
}

.applicant-info-wizard .form-control,
.applicant-info-wizard .form-select,
.applicant-info-wizard .select2-container--default .select2-selection--single {
  min-height: 2.7rem;
  box-sizing: border-box;
  border-color: var(--applicant-info-field-border);
  background-color: var(--applicant-info-field-bg);
  color: var(--bs-body-color);
  font-size: .95rem;
}

.applicant-info-wizard .form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: .72;
}

.applicant-info-wizard .form-control:focus,
.applicant-info-wizard .form-select:focus,
.applicant-info-wizard .select2-container--default.select2-container--focus .select2-selection--single,
.applicant-info-wizard .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--applicant-info-field-focus);
  box-shadow: 0 0 0 var(--bs-focus-ring-width, .15rem) color-mix(in srgb, var(--applicant-info-field-focus) 18%, transparent);
}

.applicant-info-wizard .form-control.is-valid,
.applicant-info-wizard .form-control.is-valid-custom,
.applicant-info-wizard .form-select.is-valid,
.applicant-info-wizard .form-select.is-valid-custom,
.applicant-info-wizard .select2-container--default .select2-selection--single.is-valid,
.applicant-info-wizard .select2-container--default .select2-selection--single.is-valid-custom,
.applicant-info-wizard select.is-valid~.select2-container--default .select2-selection--single,
.applicant-info-wizard select.is-valid-custom~.select2-container--default .select2-selection--single,
.applicant-info-wizard .form-select.is-valid~.select2-container--default .select2-selection--single,
.applicant-info-wizard .form-select.is-valid-custom~.select2-container--default .select2-selection--single,
.applicant-info-wizard .input-group:has(.form-control.is-valid) .form-control,
.applicant-info-wizard .input-group:has(.form-control.is-valid-custom) .form-control,
.applicant-info-wizard .input-group:has(.form-control.is-valid) .input-group-text,
.applicant-info-wizard .input-group:has(.form-control.is-valid-custom) .input-group-text {
  border-color: var(--bs-form-valid-color) !important;
  border-width: var(--bs-border-width) !important;
}

.applicant-info-wizard .form-control.is-valid:focus,
.applicant-info-wizard .form-control.is-valid-custom:focus,
.applicant-info-wizard .form-select.is-valid:focus,
.applicant-info-wizard .form-select.is-valid-custom:focus,
.applicant-info-wizard .select2-container--default.select2-container--focus .select2-selection--single.is-valid,
.applicant-info-wizard .select2-container--default.select2-container--focus .select2-selection--single.is-valid-custom,
.applicant-info-wizard select.is-valid~.select2-container--default.select2-container--focus .select2-selection--single,
.applicant-info-wizard select.is-valid-custom~.select2-container--default.select2-container--focus .select2-selection--single,
.applicant-info-wizard .form-select.is-valid~.select2-container--default.select2-container--focus .select2-selection--single,
.applicant-info-wizard .form-select.is-valid-custom~.select2-container--default.select2-container--focus .select2-selection--single,
.applicant-info-wizard .input-group:has(.form-control.is-valid:focus),
.applicant-info-wizard .input-group:has(.form-control.is-valid-custom:focus) {
  box-shadow: 0 0 0 var(--bs-focus-ring-width, .15rem) color-mix(in srgb, var(--bs-form-valid-color) 24%, transparent) !important;
}

.applicant-info-wizard .form-control.is-invalid,
.applicant-info-wizard .form-control.is-invalid-custom,
.applicant-info-wizard .form-select.is-invalid,
.applicant-info-wizard .form-select.is-invalid-custom,
.applicant-info-wizard .select2-container--default .select2-selection--single.is-invalid,
.applicant-info-wizard .select2-container--default .select2-selection--single.is-invalid-custom,
.applicant-info-wizard select.is-invalid~.select2-container--default .select2-selection--single,
.applicant-info-wizard select.is-invalid-custom~.select2-container--default .select2-selection--single,
.applicant-info-wizard .form-select.is-invalid~.select2-container--default .select2-selection--single,
.applicant-info-wizard .form-select.is-invalid-custom~.select2-container--default .select2-selection--single,
.applicant-info-wizard .input-group:has(.form-control.is-invalid) .form-control,
.applicant-info-wizard .input-group:has(.form-control.is-invalid-custom) .form-control,
.applicant-info-wizard .input-group:has(.form-control.is-invalid) .input-group-text,
.applicant-info-wizard .input-group:has(.form-control.is-invalid-custom) .input-group-text {
  border-color: var(--bs-form-invalid-color) !important;
  border-width: var(--bs-border-width) !important;
}

.applicant-info-wizard .input-group.date {
  min-height: 2.7rem;
  box-shadow: none !important;
}

.applicant-info-wizard .input-group.date::before {
  content: none !important;
  box-shadow: none !important;
}

.applicant-info-wizard .input-group.date .form-control,
.applicant-info-wizard .input-group.date .input-group-text {
  min-height: 2.7rem;
  box-sizing: border-box;
  border-width: var(--bs-border-width) !important;
}

.applicant-info-wizard .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-top: .36rem;
  padding-right: 4.25rem;
  color: var(--bs-body-color);
}

.applicant-info-wizard .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.6rem;
  width: 2rem;
  right: .55rem;
}

.applicant-info-wizard .select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute;
  top: 50%;
  right: 2.45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border-radius: 50%;
  color: var(--bs-secondary-color);
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-50%);
}

.applicant-info-wizard .select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: var(--bs-heading-color);
  background: color-mix(in srgb, var(--bs-base-color, var(--bs-body-color)) 8%, transparent);
}

.applicant-info-wizard .form-check.form-check-inline {
  min-height: 2.4rem;
  padding: .25rem .65rem;
  /* border: 1px solid var(--applicant-info-line); */
  border-radius: .375rem;
  background: var(--applicant-info-surface);
}

.applicant-info-wizard .form-control:disabled,
.applicant-info-wizard .form-select:disabled,
.applicant-info-wizard .select2-container--disabled .select2-selection--single {
  border-color: color-mix(in srgb, var(--bs-base-color, var(--bs-body-color)) 16%, var(--applicant-info-surface));
  background-color: color-mix(in srgb, var(--bs-base-color, var(--bs-body-color)) 5%, var(--applicant-info-surface));
  color: var(--applicant-info-muted);
}

.applicant-info-wizard .btn-primary,
.applicant-info-wizard .btn-success {
  box-shadow: 0 .25rem .75rem rgba(var(--bs-primary-rgb), .18);
}

.applicant-info-wizard .col-12.d-flex.justify-content-between {
  margin-top: .25rem;
  padding-top: 1rem;
}

.applicant-info-wizard .btn {
  min-height: 2.55rem;
  padding-right: 1rem;
  padding-left: 1rem;
}

.applicant-info-wizard .step.completed .step-trigger {
  border-color: var(--bs-success);
  background: var(--bs-success);
  box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--bs-success) 24%, transparent);
}

.applicant-info-wizard .step.completed .step-trigger:hover {
  border-color: color-mix(in srgb, var(--bs-success) 86%, var(--bs-black, #000));
  background: color-mix(in srgb, var(--bs-success) 88%, var(--bs-black, #000));
}

.applicant-info-wizard .step.completed .bs-stepper-circle {
  background: color-mix(in srgb, var(--bs-white, #fff) 18%, transparent);
  color: var(--bs-white, #fff) !important;
  box-shadow: none;
}

.applicant-info-wizard .step.completed .bs-stepper-circle .ti,
.applicant-info-wizard .step.completed .bs-stepper-title,
.applicant-info-wizard .step.completed .bs-stepper-label,
.applicant-info-wizard .step.completed .step-trigger {
  color: var(--bs-white, #fff) !important;
}

.applicant-info-wizard .step.completed .bs-stepper-subtitle {
  color: var(--bs-white, #fff) !important;
  opacity: .86;
}

@media (max-width: 575.98px) {
  .applicant-info-heading h5 {
    font-size: 1.08rem;
  }

  .applicant-info-wizard .content>.row {
    padding: .9rem;
    row-gap: .85rem !important;
  }

  .applicant-section-intro {
    min-height: 0;
    align-items: flex-start;
  }

  .applicant-info-wizard .form-control,
  .applicant-info-wizard .form-select,
  .applicant-info-wizard .select2-container--default .select2-selection--single {
    min-height: 2.65rem;
  }
}

/**
  Apply personal information wizard - stepper clarity
*/
.applicant-info-shell {
  --applicant-info-step-done: var(--bs-success, #28c76f);
  --applicant-info-step-current: var(--palette-primary-main, var(--bs-primary));
  --applicant-info-step-waiting: #697386;
  --applicant-info-step-track: transparent;
}

.applicant-info-wizard .bs-stepper-header {
  position: relative;
  gap: .75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.applicant-info-wizard .step-trigger {
  position: relative;
  align-items: center;
  min-height: 6.65rem;
  gap: .75rem;
  padding: .95rem 1rem !important;
  border-color: color-mix(in srgb, var(--applicant-info-step-waiting) 14%, var(--applicant-info-line));
  border-radius: .45rem;
  background: color-mix(in srgb, var(--applicant-info-step-waiting) 7%, var(--applicant-info-surface));
  box-shadow: none;
}

.applicant-info-wizard .step-trigger::before {
  content: none;
}

.applicant-info-wizard .step-trigger::after {
  content: none;
}

.applicant-info-wizard .step-trigger:hover {
  border-color: color-mix(in srgb, var(--applicant-info-step-current) 36%, var(--applicant-info-line));
  background: color-mix(in srgb, var(--applicant-info-step-current) 8%, var(--applicant-info-surface));
  box-shadow: none;
}

.applicant-info-wizard .step.active .step-trigger {
  border-color: color-mix(in srgb, var(--applicant-info-step-current) 78%, var(--applicant-info-line));
  background: color-mix(in srgb, var(--applicant-info-step-current) 15%, var(--applicant-info-surface));
  box-shadow: none;
}

.applicant-info-wizard .step.active .step-trigger::before {
  content: none;
}

.applicant-info-wizard .step.active .step-trigger::after {
  content: none;
}

.applicant-info-wizard .step.completed .step-trigger,
.applicant-info-wizard .step.completed .step-trigger:hover {
  border-color: color-mix(in srgb, var(--applicant-info-step-done) 78%, var(--applicant-info-line));
  background: color-mix(in srgb, var(--applicant-info-step-done) 13%, var(--applicant-info-surface));
  box-shadow: none;
}

.applicant-info-wizard .step.completed .step-trigger::before {
  content: none;
}

.applicant-info-wizard .step.completed .step-trigger::after {
  content: none;
}

.applicant-info-wizard .bs-stepper-circle {
  flex-basis: 2.15rem;
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  min-height: 2.15rem;
  border: 0;
  border-radius: .35rem;
  background: color-mix(in srgb, var(--applicant-info-step-waiting) 12%, var(--applicant-info-surface));
  color: color-mix(in srgb, var(--applicant-info-step-waiting) 68%, var(--applicant-info-surface));
}

.applicant-info-wizard .step.active .bs-stepper-circle {
  border-color: transparent;
  background: var(--applicant-info-step-current);
  color: var(--bs-white, #fff) !important;
  box-shadow: none;
}

.applicant-info-wizard .step.completed .bs-stepper-circle {
  border-color: transparent;
  background: var(--applicant-info-step-done) !important;
  color: var(--bs-white, #fff) !important;
  box-shadow: none;
}

.applicant-info-wizard .step.completed .bs-stepper-circle .ti,
.applicant-info-wizard .step.completed .bs-stepper-label,
.applicant-info-wizard .step.completed .step-trigger {
  color: inherit !important;
}

.applicant-info-wizard .step.completed .bs-stepper-circle .ti {
  color: var(--bs-white, #fff) !important;
}

.applicant-info-wizard .step.completed .bs-stepper-title {
  color: var(--applicant-info-step-done) !important;
}

.applicant-info-wizard .step.completed .bs-stepper-subtitle {
  color: var(--applicant-info-muted) !important;
  opacity: 1;
}

.applicant-info-wizard .bs-stepper-label {
  padding-right: 0;
}

.applicant-info-wizard .bs-stepper-title {
  color: color-mix(in srgb, var(--applicant-info-step-waiting) 64%, var(--applicant-info-heading));
  font-size: .95rem;
  line-height: 1.35;
}

.applicant-info-wizard .step.active .bs-stepper-title {
  color: var(--applicant-info-step-current);
}

.applicant-info-wizard .bs-stepper-subtitle {
  margin-top: .42rem;
  color: var(--applicant-info-muted);
  font-size: .78rem;
  line-height: 1.45;
}

@media (max-width: 991.98px) {
  .applicant-info-wizard .bs-stepper-header {
    padding: .75rem;
    scroll-padding-inline: .75rem;
  }

  .applicant-info-wizard .step {
    min-width: 245px;
  }
}

@media (max-width: 575.98px) {
  .applicant-info-wizard .step {
    min-width: 230px;
  }

  .applicant-info-wizard .step-trigger {
    min-height: 5.8rem;
    padding: .78rem .82rem !important;
  }

  .applicant-info-wizard .bs-stepper-label {
    padding-right: 0;
  }
}

/**
  Apply personal information wizard - theme aligned stepper
*/
.applicant-info-shell {
  --applicant-info-step-done: var(--bs-success, #28c76f);
  --applicant-info-step-current: #7367f0;
  --applicant-info-step-waiting: #7b8495;
}

.applicant-info-wizard .bs-stepper-header {
  gap: .85rem;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--applicant-info-line) 86%, transparent);
  border-radius: .625rem;
  background: color-mix(in srgb, var(--bs-white, #fff) 88%, var(--applicant-info-surface));
  box-shadow: 0 .35rem 1rem rgba(16, 24, 40, .045);
}

.applicant-info-wizard .step-trigger {
  min-height: 5.15rem;
  gap: .82rem;
  padding: .9rem .95rem !important;
  border: 1px solid color-mix(in srgb, var(--applicant-info-line) 92%, transparent);
  border-radius: .55rem;
  background: var(--applicant-info-surface);
  box-shadow: 0 .2rem .65rem rgba(16, 24, 40, .04);
}

.applicant-info-wizard .step-trigger:hover {
  border-color: color-mix(in srgb, var(--applicant-info-step-current) 34%, var(--applicant-info-line));
  background: color-mix(in srgb, var(--applicant-info-step-current) 4%, var(--applicant-info-surface));
}

.applicant-info-wizard .step.active .step-trigger {
  border-color: color-mix(in srgb, var(--applicant-info-step-current) 68%, var(--applicant-info-line));
  background: color-mix(in srgb, var(--applicant-info-step-current) 7%, var(--applicant-info-surface));
  box-shadow: 0 .45rem 1.1rem color-mix(in srgb, var(--applicant-info-step-current) 12%, transparent);
}

.applicant-info-wizard .step.completed .step-trigger,
.applicant-info-wizard .step.completed .step-trigger:hover {
  border-color: color-mix(in srgb, var(--applicant-info-step-done) 38%, var(--applicant-info-line));
  background: color-mix(in srgb, var(--applicant-info-step-done) 5%, var(--applicant-info-surface));
  box-shadow: 0 .25rem .8rem color-mix(in srgb, var(--applicant-info-step-done) 8%, transparent);
}

.applicant-info-wizard .bs-stepper-circle {
  flex: 0 0 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  border: 1px solid color-mix(in srgb, var(--applicant-info-step-waiting) 24%, var(--applicant-info-line));
  border-radius: .5rem;
  background: color-mix(in srgb, var(--applicant-info-step-waiting) 6%, var(--applicant-info-surface));
  color: var(--applicant-info-step-waiting);
}

.applicant-info-wizard .step.active .bs-stepper-circle {
  border-color: transparent;
  background: var(--applicant-info-step-current);
  color: var(--bs-white, #fff) !important;
  box-shadow: 0 .25rem .65rem color-mix(in srgb, var(--applicant-info-step-current) 24%, transparent);
}

.applicant-info-wizard .step.completed .bs-stepper-circle {
  border-color: transparent;
  background: var(--applicant-info-step-done) !important;
  color: var(--bs-white, #fff) !important;
  box-shadow: 0 .25rem .65rem color-mix(in srgb, var(--applicant-info-step-done) 18%, transparent);
}

.applicant-info-wizard .bs-stepper-title {
  color: var(--applicant-info-heading);
  font-size: .93rem;
  font-weight: 750;
  line-height: 1.28;
}

.applicant-info-wizard .step.active .bs-stepper-title {
  color: var(--applicant-info-heading);
}

.applicant-info-wizard .step.completed .bs-stepper-title {
  color: color-mix(in srgb, var(--applicant-info-step-done) 76%, var(--applicant-info-heading)) !important;
}

.applicant-info-wizard .bs-stepper-subtitle,
.applicant-info-wizard .step.completed .bs-stepper-subtitle {
  margin-top: .24rem;
  color: var(--applicant-info-muted) !important;
  font-size: .76rem;
  line-height: 1.36;
  opacity: .92;
}

/* Applicant portal dashboard */
.applicant-dashboard {
  --dashboard-navy: #1e3a5f;
  --dashboard-ink: #172b4d;
  --dashboard-copy: #52627a;
  --dashboard-surface: #f8fafc;
  --dashboard-line: #d7e1ec;
  --dashboard-shadow: 0 .85rem 2.2rem rgba(23, 43, 77, .08);
  --dashboard-ease: cubic-bezier(.22, 1, .36, 1);
}

.dashboard-welcome {
  background: radial-gradient(circle at 88% 10%, rgba(255, 255, 255, .14), transparent 28%), linear-gradient(118deg, #193755, #2e638d);
  color: #fff;
  box-shadow: 0 1rem 2.5rem rgba(30, 58, 95, .2);
}

.dashboard-welcome h1 {
  color: #fff !important;
  font-size: clamp(1.7rem, 2.35vw, 2.35rem);
  font-weight: 750;
  letter-spacing: -.025em;
}

.dashboard-eyebrow {
  align-items: center;
  color: rgba(255, 255, 255, .88);
  display: inline-flex;
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-welcome-copy {
  color: rgba(255, 255, 255, .92);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 42rem;
}

.dashboard-primary-action {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 .35rem .8rem rgba(10, 32, 58, .16);
  color: var(--dashboard-navy);
  min-height: 44px;
  transition: background-color .2s var(--dashboard-ease), box-shadow .2s var(--dashboard-ease), transform .2s var(--dashboard-ease);
}

.dashboard-primary-action:hover {
  background: #f4f8fc;
  border-color: #f4f8fc;
  box-shadow: 0 .6rem 1.15rem rgba(10, 32, 58, .22);
  color: var(--dashboard-navy);
  transform: translateY(-2px);
}

.dashboard-primary-action:focus-visible,
.dashboard-contact-action:focus-visible,
.dashboard-task:focus-visible,
.dashboard-overview-card a:focus-visible {
  box-shadow: 0 0 0 .24rem rgba(255, 255, 255, .48), 0 0 0 .42rem var(--dashboard-navy);
  outline: 0;
}

.dashboard-overview-card,
.dashboard-next-card,
.dashboard-help-card {
  background: rgba(255, 255, 255, .96);
  border-color: var(--dashboard-line);
  box-shadow: 0 .35rem 1.1rem rgba(23, 43, 77, .045);
}

.dashboard-overview-card {
  transition: box-shadow .24s var(--dashboard-ease), transform .24s var(--dashboard-ease);
}

.dashboard-overview-card:hover {
  box-shadow: var(--dashboard-shadow);
  transform: translateY(-3px);
}

.dashboard-overview-icon,
.dashboard-task-icon,
.dashboard-help-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .7rem;
  font-size: 1.3rem;
}

.dashboard-overview-icon-success {
  background: #e7f7ef;
  color: #157347;
}

.dashboard-overview-icon-primary,
.dashboard-task-icon {
  background: #e9f0f8;
  color: var(--dashboard-navy);
}

.dashboard-overview-icon-warning,
.dashboard-help-icon {
  background: #fff3df;
  color: #a16207;
}

.dashboard-card-label {
  color: var(--dashboard-copy);
  font-size: .79rem;
  font-weight: 650;
  letter-spacing: .02em;
}

.dashboard-card-copy {
  color: var(--dashboard-ink);
  font-weight: 700;
  line-height: 1.4;
}

.dashboard-text-link {
  color: #245bbb;
  font-weight: 650;
}

.dashboard-section-copy,
.dashboard-task-copy {
  color: var(--dashboard-copy);
  line-height: 1.5;
}

.dashboard-task {
  border: 1px solid transparent;
  border-radius: .75rem;
  min-height: 80px;
  padding: .9rem;
  transition: background-color .2s var(--dashboard-ease), border-color .2s var(--dashboard-ease), transform .2s var(--dashboard-ease);
}

.dashboard-task+.dashboard-task {
  margin-top: .35rem;
}

.dashboard-task:hover {
  background: var(--dashboard-surface);
  border-color: #dce7f2;
  transform: translateX(3px);
}

.dashboard-task:focus {
  background: var(--dashboard-surface);
  outline: none;
}

.dashboard-task-arrow {
  color: #7b8ba2;
  transition: transform .2s var(--dashboard-ease);
}

.dashboard-task:hover .dashboard-task-arrow {
  color: var(--dashboard-navy);
  transform: translateX(3px);
}

.dashboard-contact-action {
  border-width: 1px;
  font-weight: 650;
  min-height: 44px;
  transition: background-color .2s var(--dashboard-ease), box-shadow .2s var(--dashboard-ease), transform .2s var(--dashboard-ease);
}

.dashboard-contact-action:hover {
  box-shadow: 0 .4rem .9rem rgba(30, 58, 95, .12);
  transform: translateY(-2px);
}

.dashboard-enter {
  animation: dashboard-enter .42s var(--dashboard-ease) both;
}

.dashboard-enter-2 {
  animation-delay: .06s;
}

.dashboard-enter-3 {
  animation-delay: .12s;
}

.dashboard-enter-4 {
  animation-delay: .18s;
}

.dashboard-enter-5 {
  animation-delay: .24s;
}

.dashboard-enter-6 {
  animation-delay: .3s;
}

@keyframes dashboard-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 575.98px) {
  .dashboard-welcome .btn {
    width: 100%;
  }

  .dashboard-overview-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-enter {
    animation: none;
  }

  .dashboard-overview-card,
  .dashboard-task,
  .dashboard-primary-action,
  .dashboard-contact-action,
  .dashboard-task-arrow {
    transition: none;
  }
}

/* Dashboard redesign: every action card has one distinct destination. */
.dashboard-redesign .dashboard-hero {
  background: radial-gradient(circle at 93% 4%, rgba(255, 255, 255, .14), transparent 25%), linear-gradient(118deg, #183451, #2d628d);
  border-radius: .7rem;
  box-shadow: 0 1rem 2.5rem rgba(30, 58, 95, .18);
  color: #fff;
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

.dashboard-redesign .dashboard-hero h1 {
  color: #fff !important;
  font-size: clamp(1.75rem, 2.6vw, 2.55rem);
  font-weight: 750;
  letter-spacing: -.03em;
}

.dashboard-redesign .dashboard-hero>.row>div:first-child>p {
  color: rgba(255, 255, 255, .9);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 40rem;
}

.dashboard-hero-note {
  border-left: 1px solid rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .9);
  font-size: .9rem;
  line-height: 1.45;
  padding-left: 1rem;
}

.dashboard-kicker {
  color: #65758b;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-redesign .dashboard-actions h2,
.dashboard-redesign .dashboard-journey h2,
.dashboard-redesign .dashboard-assist h2 {
  color: var(--dashboard-ink);
  font-weight: 750;
  letter-spacing: -.015em;
}

.dashboard-action-card {
  background: #fff;
  border: 1px solid var(--dashboard-line);
  border-radius: .75rem;
  box-shadow: 0 .35rem 1rem rgba(23, 43, 77, .045);
  color: var(--dashboard-ink);
  display: flex;
  flex-direction: column;
  min-height: 15.5rem;
  overflow: hidden;
  padding: 1.3rem;
  position: relative;
  transition: border-color .22s var(--dashboard-ease), box-shadow .22s var(--dashboard-ease), transform .22s var(--dashboard-ease);
}

.dashboard-action-card:hover {
  border-color: #aebfd1;
  box-shadow: var(--dashboard-shadow);
  color: var(--dashboard-ink);
  transform: translateY(-3px);
}

.dashboard-action-card:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .22), var(--dashboard-shadow);
  outline: 0;
}

.dashboard-action-featured {
  background: linear-gradient(145deg, #1b3c5d, #2c658f);
  border-color: transparent;
  color: #fff;
}

.dashboard-action-featured:hover {
  border-color: transparent;
  color: #fff;
}

.dashboard-action-number {
  color: #72839a;
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .1em;
}

.dashboard-action-featured .dashboard-action-number {
  color: rgba(255, 255, 255, .68);
}

.dashboard-action-icon {
  align-items: center;
  background: #eaf1f8;
  border-radius: .65rem;
  color: var(--dashboard-navy);
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  margin-top: 1.05rem;
  width: 2.75rem;
}

.dashboard-action-featured .dashboard-action-icon {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.dashboard-action-body {
  display: block;
  margin-top: 1rem;
}

.dashboard-action-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.35;
}

.dashboard-action-desc {
  color: var(--dashboard-copy);
  display: block;
  font-size: .88rem;
  line-height: 1.5;
  margin-top: .32rem;
}

.dashboard-action-featured .dashboard-action-desc {
  color: rgba(255, 255, 255, .82);
}

.dashboard-action-go {
  align-items: center;
  display: inline-flex;
  font-size: .86rem;
  font-weight: 750;
  gap: .32rem;
  margin-top: auto;
  padding-top: 1rem;
}

.dashboard-action-card:not(.dashboard-action-featured) .dashboard-action-go {
  color: #245bbb;
}

.dashboard-journey,
.dashboard-assist {
  background: #fff;
  border: 1px solid var(--dashboard-line);
  border-radius: .75rem;
  box-shadow: 0 .35rem 1rem rgba(23, 43, 77, .045);
  padding: 1.35rem;
}

.dashboard-journey-list {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-journey-list li {
  align-items: flex-start;
  display: flex;
  gap: .85rem;
  position: relative;
}

.dashboard-journey-list li:not(:last-child)::after {
  background: #d9e4ef;
  content: '';
  height: calc(100% - 1.35rem);
  left: .85rem;
  position: absolute;
  top: 2rem;
  width: 1px;
}

.dashboard-journey-list li>span {
  align-items: center;
  background: #edf3f9;
  border-radius: 50%;
  color: var(--dashboard-navy);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 750;
  height: 1.7rem;
  justify-content: center;
  width: 1.7rem;
}

.dashboard-journey-list strong {
  color: var(--dashboard-ink);
  display: block;
  font-size: .92rem;
}

.dashboard-journey-list p {
  color: var(--dashboard-copy);
  font-size: .84rem;
  line-height: 1.45;
  margin: .16rem 0 0;
}

.dashboard-assist {
  display: flex;
  flex-direction: column;
}

@media (max-width: 991.98px) {
  .dashboard-action-card {
    min-height: 13.5rem;
  }
}

@media (max-width: 575.98px) {
  .dashboard-redesign .dashboard-hero {
    padding: 1.35rem;
  }

  .dashboard-hero-note {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
    padding: .8rem 0 0;
  }

  .dashboard-action-card {
    min-height: 12.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-action-card {
    transition: none;
  }
}

/* Application summary dashboard */
.dashboard-summary-hero {
  background: radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .14), transparent 24%), linear-gradient(118deg, #183451, #2d628d);
  border-radius: .7rem;
  box-shadow: 0 1rem 2.5rem rgba(30, 58, 95, .18);
  color: #fff;
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

.dashboard-summary-hero h1 {
  color: #fff !important;
  font-size: clamp(1.75rem, 2.6vw, 2.55rem);
  font-weight: 750;
  letter-spacing: -.03em;
}

.dashboard-summary-hero>.row>div:first-child>p {
  color: rgba(255, 255, 255, .9);
  line-height: 1.65;
  max-width: 40rem;
}

.dashboard-summary-total {
  border-left: 1px solid rgba(255, 255, 255, .35);
  display: flex;
  flex-direction: column;
  padding-left: 1.2rem;
}

.dashboard-summary-total span {
  color: rgba(255, 255, 255, .8);
  font-size: .82rem;
}

.dashboard-summary-total strong {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.dashboard-summary-panel,
.dashboard-summary-side {
  background: #fff;
  border: 1px solid var(--dashboard-line);
  border-radius: .75rem;
  box-shadow: 0 .35rem 1rem rgba(23, 43, 77, .045);
  padding: 1.35rem;
}

.dashboard-summary-panel h2,
.dashboard-summary-side h2 {
  color: var(--dashboard-ink);
  font-weight: 750;
  letter-spacing: -.015em;
}

.dashboard-summary-link {
  color: #245bbb;
  flex: 0 0 auto;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-summary-link:hover {
  color: #173f8f;
  text-decoration: underline;
}

.dashboard-summary-list {
  display: grid;
  gap: .7rem;
}

.dashboard-summary-application {
  align-items: center;
  background: #fbfcfe;
  border: 1px solid #e3eaf2;
  border-radius: .65rem;
  display: flex;
  gap: .85rem;
  padding: 1rem;
}

.dashboard-summary-application-icon {
  align-items: center;
  background: #eaf1f8;
  border-radius: .6rem;
  color: var(--dashboard-navy);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.dashboard-summary-application h3 {
  color: var(--dashboard-ink);
  font-size: .94rem;
  font-weight: 750;
  line-height: 1.35;
  margin: 0;
}

.dashboard-summary-application p {
  color: var(--dashboard-copy);
  font-size: .82rem;
  line-height: 1.4;
  margin: .2rem 0 0;
}

.dashboard-summary-date {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  padding-left: 1rem;
  text-align: right;
}

.dashboard-summary-date span {
  color: var(--dashboard-copy);
  font-size: .72rem;
}

.dashboard-summary-date strong {
  color: var(--dashboard-ink);
  font-size: .82rem;
  font-weight: 700;
}

.dashboard-empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 1.8rem 1rem .6rem;
  text-align: center;
}

.dashboard-empty-icon {
  align-items: center;
  background: #edf3f9;
  border-radius: 50%;
  color: var(--dashboard-navy);
  display: inline-flex;
  font-size: 1.4rem;
  height: 3.2rem;
  justify-content: center;
  width: 3.2rem;
}

.dashboard-empty-state h3 {
  color: var(--dashboard-ink);
  font-size: 1rem;
  font-weight: 750;
  margin: 1rem 0 .35rem;
}

.dashboard-empty-state p {
  color: var(--dashboard-copy);
  font-size: .88rem;
  margin: 0;
}

.dashboard-empty-action {
  margin-top: 1.1rem;
  min-height: 44px;
}

.dashboard-summary-side {
  display: flex;
  flex-direction: column;
}

.dashboard-summary-action {
  align-items: center;
  border: 1px solid #e2eaf2;
  border-radius: .6rem;
  color: var(--dashboard-ink);
  display: flex;
  font-size: .9rem;
  font-weight: 700;
  gap: .7rem;
  min-height: 3.65rem;
  padding: .7rem;
  text-decoration: none;
  transition: background-color .2s var(--dashboard-ease), border-color .2s var(--dashboard-ease), transform .2s var(--dashboard-ease);
}

.dashboard-summary-action+.dashboard-summary-action {
  margin-top: .55rem;
}

.dashboard-summary-action>span:first-child {
  align-items: center;
  background: #edf3f9;
  border-radius: .45rem;
  color: var(--dashboard-navy);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.dashboard-summary-action>i {
  color: #7b8ba2;
  margin-left: auto;
}

.dashboard-summary-action:hover {
  background: #f8fafc;
  border-color: #b9c9d9;
  color: var(--dashboard-ink);
  transform: translateX(2px);
}

.dashboard-summary-action:focus-visible {
  box-shadow: 0 0 0 .24rem rgba(37, 99, 235, .22);
  outline: 0;
}

.dashboard-summary-help {
  align-items: flex-start;
  border-top: 1px solid #e4ebf2;
  color: var(--dashboard-copy);
  display: flex;
  font-size: .83rem;
  gap: .65rem;
  padding-top: 1rem;
}

.dashboard-summary-help>i {
  color: #a16207;
  font-size: 1.2rem;
}

.dashboard-summary-help strong {
  color: var(--dashboard-ink);
  display: block;
  font-size: .85rem;
}

.dashboard-summary-help a {
  color: #245bbb;
  display: inline-block;
  font-weight: 700;
  margin-top: .18rem;
  text-decoration: none;
}

.dashboard-summary-help a:hover {
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .dashboard-summary-hero {
    padding: 1.35rem;
  }

  .dashboard-summary-total {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
    margin-top: .6rem;
    padding: .8rem 0 0;
  }

  .dashboard-summary-application {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dashboard-summary-date {
    margin-left: 3.35rem;
    padding-left: 0;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-summary-action {
    transition: none;
  }
}

.dashboard-profile-grid span {
  color: var(--dashboard-copy);
  display: block;
  font-size: .76rem;
  margin-bottom: .25rem;
}

.dashboard-profile-grid strong {
  color: var(--dashboard-ink);
  display: block;
  font-size: .9rem;
  line-height: 1.45;
}

.dashboard-count-pill {
  background: #edf3f9;
  border-radius: 999px;
  color: var(--dashboard-navy);
  font-size: .78rem;
  font-weight: 750;
  padding: .38rem .7rem;
  white-space: nowrap;
}

.dashboard-progress {
  border-radius: 999px;
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  margin-top: .45rem;
  padding: .2rem .5rem;
}

.dashboard-progress-success {
  background: #e7f7ef;
  color: #146c43;
}

.dashboard-progress-primary {
  background: #eaf1f8;
  color: #1e3a5f;
}

.dashboard-progress-warning {
  background: #fff3df;
  color: #8a5405;
}

.dashboard-progress-danger {
  background: #fce8e7;
  color: #b42318;
}

.dashboard-open-list {
  display: grid;
  gap: .65rem;
}

.dashboard-open-project {
  background: #fbfcfe;
  border: 1px solid #e3eaf2;
  border-radius: .6rem;
  padding: .8rem;
}

.dashboard-open-project strong {
  color: var(--dashboard-ink);
  display: block;
  font-size: .86rem;
  line-height: 1.4;
}

.dashboard-open-project span {
  color: var(--dashboard-copy);
  display: block;
  font-size: .76rem;
  margin-top: .32rem;
}

.dashboard-open-project small {
  color: #245bbb;
  display: block;
  font-weight: 700;
  margin-top: .25rem;
}

/* Match the existing Vuexy purple application theme. */
.dashboard-summary {
  --dashboard-navy: var(--bs-primary, #7367f0);
  --dashboard-ink: #3f3b57;
  --dashboard-copy: #6d6b7c;
  --dashboard-line: #e7e5ec;
}

.dashboard-summary {
  --dashboard-purple: #7367f0;
  --dashboard-cyan: #31b7d0;
  --dashboard-green: #28c76f;
  --dashboard-orange: #ff9f43;
  --dashboard-canvas: #f8f7fb;
}

.dashboard-summary-hero {
  background: radial-gradient(circle at 90% 10%, rgba(115, 103, 240, .16), transparent 22%), linear-gradient(135deg, #f4f2ff, #faf9fd);
  border: 1px solid #ece9ff;
  box-shadow: 0 .65rem 1.5rem rgba(75, 70, 92, .07);
  color: #3f3b57;
}

.dashboard-summary-hero h1 {
  color: #3f3b57 !important;
}

.dashboard-summary-hero>.row>div:first-child>p {
  color: #6d6b7c;
}

.dashboard-summary-hero .dashboard-eyebrow {
  color: #7367f0;
}

.dashboard-summary-hero::after {
  border-color: rgba(115, 103, 240, .16);
}

.dashboard-summary-hero::before {
  background: linear-gradient(135deg, rgba(115, 103, 240, .12), transparent);
}

.dashboard-summary-panel,
.dashboard-summary-side {
  border-color: #e7e5ec;
  box-shadow: 0 .25rem .85rem rgba(75, 70, 92, .07);
}

.dashboard-profile-grid strong,
.dashboard-summary-application h3,
.dashboard-open-project strong {
  color: #3f3b57;
}

.dashboard-count-pill,
.dashboard-summary-application-icon,
.dashboard-summary-action>span:first-child {
  background: rgba(115, 103, 240, .12);
  color: #6258d9;
}

.dashboard-summary-link,
.dashboard-open-project small,
.dashboard-summary-help a {
  color: #6258d9;
}

.dashboard-progress-primary {
  background: rgba(115, 103, 240, .12);
  color: #5f55d9;
}

/* Pastel accent rhythm inspired by the supplied dashboard reference. */
.dashboard-profile-grid>div:nth-child(1)::before {
  background: var(--dashboard-purple);
}

.dashboard-profile-grid>div:nth-child(2)::before {
  background: var(--dashboard-cyan);
}

.dashboard-profile-grid>div:nth-child(3)::before {
  background: var(--dashboard-green);
}

.dashboard-profile-grid>div:nth-child(4)::before {
  background: var(--dashboard-orange);
}

.dashboard-profile-grid>div:nth-child(1) strong {
  background: rgba(115, 103, 240, .07);
}

.dashboard-profile-grid>div:nth-child(2) strong {
  background: rgba(49, 183, 208, .08);
}

.dashboard-profile-grid>div:nth-child(3) strong {
  background: rgba(40, 199, 111, .075);
}

.dashboard-profile-grid>div:nth-child(4) strong {
  background: rgba(255, 159, 67, .09);
}

.dashboard-summary-application:nth-child(odd) .dashboard-summary-application-icon {
  background: rgba(115, 103, 240, .12);
  color: #6258d9;
}

.dashboard-summary-application:nth-child(even) .dashboard-summary-application-icon {
  background: rgba(49, 183, 208, .12);
  color: #249bb4;
}

.dashboard-progress-success {
  background: rgba(40, 199, 111, .13);
  color: #16894a;
}

.dashboard-progress-warning {
  background: rgba(255, 159, 67, .16);
  color: #a45b0c;
}

.dashboard-progress-danger {
  background: rgba(234, 84, 85, .12);
  color: #b72a31;
}

.dashboard-open-project:nth-child(odd)::before {
  background: var(--dashboard-cyan);
}

.dashboard-open-project:nth-child(even)::before {
  background: var(--dashboard-green);
}

.dashboard-open-project {
  background: linear-gradient(90deg, rgba(115, 103, 240, .035), #fff);
}

/* Balanced dashboard hierarchy: identity, current applications, opportunities. */
.dashboard-summary-hero {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.dashboard-summary-hero::after {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  content: '';
  height: 18rem;
  position: absolute;
  right: -6rem;
  top: -9rem;
  width: 18rem;
  z-index: -1;
}

.dashboard-summary-hero::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent);
  border-radius: 50%;
  content: '';
  height: 10rem;
  position: absolute;
  right: 7rem;
  top: 2.5rem;
  transform: rotate(35deg);
  width: 10rem;
  z-index: -1;
}

.dashboard-summary-panel>.d-flex:first-child {
  border-bottom: 1px solid #efedf4;
  padding-bottom: .9rem;
}

.dashboard-profile-grid>div {
  position: relative;
}

.dashboard-profile-grid>div::before {
  background: #7367f0;
  border-radius: 999px;
  content: '';
  height: .45rem;
  left: 0;
  position: absolute;
  top: -.72rem;
  width: 2rem;
}

.dashboard-profile-grid>div:nth-child(2)::before {
  background: #28c76f;
}

.dashboard-profile-grid>div:nth-child(3)::before {
  background: #ff9f43;
}

.dashboard-profile-grid>div:nth-child(4)::before {
  background: #00cfe8;
}

.dashboard-profile-grid strong {
  background: #faf9fc;
  border-radius: .55rem;
  min-height: 3.2rem;
  padding: .55rem .65rem;
}

.dashboard-summary-application {
  border-left: 3px solid transparent;
  transition: border-color .2s var(--dashboard-ease), box-shadow .2s var(--dashboard-ease), transform .2s var(--dashboard-ease);
}

.dashboard-summary-application:hover {
  border-left-color: #7367f0;
  box-shadow: 0 .45rem 1rem rgba(75, 70, 92, .08);
  transform: translateX(2px);
}

.dashboard-summary-side {
  background: linear-gradient(180deg, #fff, #fbfaff);
}

.dashboard-open-project {
  position: relative;
  transition: border-color .2s var(--dashboard-ease), transform .2s var(--dashboard-ease);
}

.dashboard-open-project:hover {
  border-color: #c7c2f7;
  transform: translateY(-2px);
}

.dashboard-open-project::before {
  background: #7367f0;
  border-radius: 999px;
  content: '';
  height: 100%;
  left: 0;
  opacity: .9;
  position: absolute;
  top: 0;
  width: 3px;
}

@media (prefers-reduced-motion: reduce) {

  .dashboard-summary-application,
  .dashboard-open-project {
    transition: none;
  }
}

/* Applicant journey + premium profile dashboard. */
.dashboard-journey-dashboard {
  --journey-surface: #ffffff;
  --journey-soft: #f7f6ff;
  --journey-purple: #7367f0;
  --journey-ink: #3f3b57;
  --journey-copy: #6d6b7c;
}

.dashboard-journey-hero {
  background: radial-gradient(circle at 92% 8%, rgba(115, 103, 240, .22), transparent 22rem), linear-gradient(135deg, #f2f0ff, #fff 64%);
  border: 1px solid #e9e6ff;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.25rem rgba(75, 70, 92, .09);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  min-height: 18.75rem;
  overflow: hidden;
  padding: clamp(1.65rem, 3vw, 2.7rem);
  position: relative;
}

.dashboard-journey-hero::after {
  border: 1px solid rgba(115, 103, 240, .16);
  border-radius: 50%;
  content: '';
  height: 18rem;
  position: absolute;
  right: -8rem;
  top: -9rem;
  width: 18rem;
}

.dashboard-journey-hero h1 {
  color: var(--journey-ink);
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.2;
  margin: 0;
  max-width: 43rem;
  position: relative;
}

.dashboard-journey-hero .dashboard-eyebrow {
  color: var(--journey-purple);
  font-weight: 700;
  position: relative;
}

.dashboard-journey-focus-kicker {
  color: #88839e;
  font-size: .7rem;
  position: relative;
}

.dashboard-journey-hero-course {
  color: var(--journey-copy);
  font-size: 1rem;
  line-height: 1.5;
  position: relative;
}

.dashboard-journey-hero-footer {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  position: relative;
}

.dashboard-journey-hero-footer small {
  color: var(--journey-copy);
  display: block;
  font-size: .78rem;
  margin-top: .45rem;
}

.dashboard-journey-hero-footer .btn {
  min-height: 44px;
  white-space: nowrap;
}

.dashboard-profile-card,
.dashboard-journey-panel,
.dashboard-opportunity-panel {
  background: var(--journey-surface);
  border: 1px solid #e8e6ef;
  border-radius: 1rem;
  box-shadow: 0 .55rem 1.4rem rgba(75, 70, 92, .07);
  padding: 1.35rem;
}

.dashboard-profile-card {
  background: #fff;
}

.dashboard-profile-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: box-shadow .25s var(--dashboard-ease), transform .25s var(--dashboard-ease);
}

.dashboard-profile-card::after {
  animation: dashboard-profile-gradient-drift 14s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 72% 50% at 88% 100%, rgba(115, 103, 240, .42) 0%, rgba(167, 157, 255, .2) 48%, transparent 74%);
  bottom: -3rem;
  content: '';
  filter: blur(12px);
  height: 18rem;
  opacity: .95;
  pointer-events: none;
  position: absolute;
  right: -10%;
  width: 120%;
  z-index: 0;
}

.dashboard-profile-card::after {
  transform-origin: 88% 100%;
}

@keyframes dashboard-profile-gradient-drift {
  0% {
    transform: translate(-7px, -3px) scale(1);
  }

  100% {
    transform: translate(7px, 4px) scale(1.06);
  }
}

.dashboard-profile-card:hover {
  box-shadow: 0 .8rem 1.8rem rgba(75, 70, 92, .12);
  transform: translateY(-2px);
}

.dashboard-profile-card-head {
  align-items: center;
  display: flex;
  gap: .8rem;
}

.dashboard-profile-card-head,
.dashboard-profile-highlights,
.dashboard-profile-details,
.dashboard-profile-apply-btn {
  position: relative;
  z-index: 1;
}

.dashboard-profile-apply-btn {
  align-items: center;
  background: linear-gradient(145deg, #9b93ff, #6258d9) !important;
  border: none !important;
  box-shadow: 0 .45rem .9rem rgba(98, 88, 217, .32) !important;
  display: flex;
  font-weight: 700;
  justify-content: center;
  margin-top: 1.1rem;
  min-height: 44px;
  transition: box-shadow .25s var(--dashboard-ease), transform .25s var(--dashboard-ease);
  width: 100%;
}

.dashboard-profile-apply-btn:hover {
  box-shadow: 0 .65rem 1.25rem rgba(98, 88, 217, .42) !important;
  color: #fff;
  transform: translateY(-2px);
}

.dashboard-profile-apply-btn:active {
  box-shadow: 0 .3rem .6rem rgba(98, 88, 217, .32) !important;
  transform: translateY(0);
}

.dashboard-profile-apply-btn:focus-visible {
  box-shadow: 0 0 0 .24rem rgba(115, 103, 240, .28) !important;
  outline: 0;
}

.dashboard-profile-avatar {
  align-items: center;
  background: linear-gradient(145deg, #9b93ff, #6258d9);
  border-radius: .85rem;
  box-shadow: 0 .45rem .9rem rgba(98, 88, 217, .28);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  height: 3.15rem;
  justify-content: center;
  position: relative;
  transition: box-shadow .25s var(--dashboard-ease), transform .25s var(--dashboard-ease);
  width: 3.15rem;
}

.dashboard-profile-avatar>i {
  align-items: center;
  color: #fff !important;
  display: flex;
  inset: 0;
  justify-content: center;
  line-height: 1;
  position: absolute;
}

.dashboard-profile-card:hover .dashboard-profile-avatar {
  box-shadow: 0 .6rem 1.1rem rgba(98, 88, 217, .35);
  transform: rotate(-3deg) scale(1.03);
}

.dashboard-profile-card h2,
.dashboard-journey-panel h2,
.dashboard-opportunity-panel h2 {
  color: var(--journey-ink);
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 0;
}

.dashboard-profile-edit {
  align-items: center;
  background: var(--journey-soft);
  border-radius: .55rem;
  color: #6258d9;
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  margin-left: auto;
  text-decoration: none;
  transition: background-color .2s var(--dashboard-ease), transform .2s var(--dashboard-ease);
  width: 2.25rem;
}

.dashboard-profile-edit>i {
  display: block;
  line-height: 1;
}

.dashboard-profile-edit:hover {
  background: #eae7ff;
  color: #544bc0;
  transform: translateY(-1px);
}

.dashboard-profile-edit:focus-visible {
  box-shadow: 0 0 0 .24rem rgba(115, 103, 240, .24);
  outline: 0;
}

.dashboard-profile-highlights {
  display: grid;
  gap: .65rem;
  grid-template-columns: minmax(0, 1fr) 5.4rem;
  margin-top: 1.25rem;
}

.dashboard-profile-highlights>div {
  background: #faf9fd;
  border-radius: .7rem;
  min-width: 0;
  padding: .7rem .75rem;
}

.dashboard-profile-highlights>div:not(:first-child) {
  background: rgba(40, 199, 111, .09);
}

.dashboard-profile-highlights-dual {
  grid-template-columns: minmax(0, 1fr) 4.6rem 4.6rem;
}

.dashboard-profile-card span,
.dashboard-profile-details span {
  color: var(--journey-copy);
  display: block;
  font-size: .71rem;
}

.dashboard-profile-card strong {
  color: var(--journey-ink);
  display: block;
  font-size: .84rem;
  line-height: 1.42;
  margin-top: .18rem;
  overflow-wrap: anywhere;
}

.dashboard-profile-details {
  border-top: 1px solid #efedf4;
  display: grid;
  gap: .7rem;
  margin-top: .9rem;
  padding-top: .9rem;
}

.dashboard-profile-details>div {
  min-width: 0;
}

.dashboard-panel-heading {
  align-items: center;
  border-bottom: 1px solid #efedf4;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.15rem;
  padding-bottom: .9rem;
}

.dashboard-application-journeys {
  display: grid;
  gap: .85rem;
}

.dashboard-journey-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #efedf4;
  border-radius: 0;
  padding: 1rem 0;
  transition: background-color .2s var(--dashboard-ease);
}

.dashboard-journey-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dashboard-journey-item:first-child {
  padding-top: .2rem;
}

.dashboard-journey-item:hover {
  background: rgba(115, 103, 240, .025);
}

.dashboard-journey-item-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.dashboard-journey-item h3 {
  color: var(--journey-ink);
  font-size: .96rem;
  font-weight: 750;
  line-height: 1.4;
  margin: 0;
}

.dashboard-journey-item p {
  color: var(--journey-copy);
  font-size: .8rem;
  line-height: 1.4;
  margin: .22rem 0 0;
}

.dashboard-journey-item-status {
  flex: 0 0 auto;
  text-align: right;
}

.dashboard-journey-item-status small {
  color: var(--journey-copy);
  display: block;
  font-size: .72rem;
  margin-top: .4rem;
}

.dashboard-application-meta {
  align-items: center;
  border-top: 1px solid #efedf4;
  display: flex;
  font-size: .76rem;
  gap: .75rem;
  justify-content: space-between;
  margin-top: .85rem;
  padding-top: .75rem;
}

.dashboard-application-meta span {
  color: var(--journey-copy);
}

.dashboard-application-meta span i {
  margin-right: .32rem;
}

.dashboard-application-meta a {
  color: #6258d9;
  font-weight: 750;
  text-decoration: none;
}

.dashboard-application-meta a:hover {
  color: #4f46bd;
  text-decoration: underline;
}

.dashboard-application-meta a:focus-visible {
  box-shadow: 0 0 0 .24rem rgba(115, 103, 240, .24);
  outline: 0;
}

.dashboard-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.dashboard-path li {
  color: #aaa6b5;
  min-width: 0;
  position: relative;
  text-align: center;
}

.dashboard-path li:not(:last-child)::after {
  background: #e5e2ed;
  content: '';
  height: 2px;
  left: calc(50% + 1rem);
  position: absolute;
  right: calc(-50% + 1rem);
  top: .85rem;
}

.dashboard-path li.is-complete:not(:last-child)::after {
  background: #a49df6;
}

.dashboard-path span {
  align-items: center;
  background: #f0eef4;
  border-radius: 50%;
  color: #8f8a9b;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 750;
  height: 1.7rem;
  justify-content: center;
  position: relative;
  width: 1.7rem;
  z-index: 1;
}

.dashboard-path strong {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: .35rem;
  overflow-wrap: anywhere;
}

.dashboard-path .is-complete {
  color: #6258d9;
}

.dashboard-path .is-complete span {
  background: #e9e6ff;
  color: #6258d9;
}

.dashboard-path .is-current span {
  background: #7367f0;
  box-shadow: 0 0 0 .25rem rgba(115, 103, 240, .14);
  color: #fff;
}

.dashboard-path .is-danger {
  color: #b72a31;
}

.dashboard-path .is-danger span {
  background: #fde8e9;
  color: #b72a31;
}

.dashboard-text-link {
  color: #6258d9;
  display: inline-flex;
  font-size: .86rem;
  font-weight: 750;
  gap: .28rem;
  margin-top: 1.15rem;
  text-decoration: none;
}

.dashboard-text-link:hover {
  color: #4f46bd;
  text-decoration: underline;
}

.dashboard-text-link:focus-visible {
  box-shadow: 0 0 0 .24rem rgba(115, 103, 240, .24);
  outline: 0;
}

.dashboard-opportunity-panel {
  background: linear-gradient(180deg, #fff, #fbfaff);
  display: flex;
  flex-direction: column;
}

.dashboard-opportunity-list {
  display: grid;
  gap: .65rem;
  margin: 1rem 0 1.2rem;
}

.dashboard-opportunity-card {
  background: #fff;
  border: 1px solid #e9e7f0;
  border-radius: .7rem;
  overflow: hidden;
  padding: .8rem .85rem .8rem 1rem;
  position: relative;
  transition: border-color .2s var(--dashboard-ease), transform .2s var(--dashboard-ease);
}

.dashboard-opportunity-card::before {
  background: #31b7d0;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 3px;
}

.dashboard-opportunity-card:nth-child(even)::before {
  background: #28c76f;
}

.dashboard-opportunity-card:hover {
  border-color: #cfc9fb;
  transform: translateY(-2px);
}

.dashboard-opportunity-card strong {
  color: var(--journey-ink);
  display: block;
  font-size: .84rem;
  line-height: 1.38;
}

.dashboard-opportunity-card span {
  color: var(--journey-copy);
  display: block;
  font-size: .73rem;
  margin-top: .32rem;
}

.dashboard-opportunity-card small {
  color: #6258d9;
  display: block;
  font-size: .74rem;
  font-weight: 700;
  margin-top: .27rem;
}

@media (max-width: 575.98px) {
  .dashboard-journey-hero {
    min-height: auto;
    padding: 1.35rem;
  }

  .dashboard-journey-hero-footer,
  .dashboard-journey-item-header,
  .dashboard-application-meta {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-journey-hero-footer .btn {
    width: 100%;
  }

  .dashboard-journey-item-status {
    text-align: left;
  }

  .dashboard-profile-highlights {
    grid-template-columns: minmax(0, 1fr) 4.7rem;
  }

  .dashboard-profile-highlights-dual {
    grid-template-columns: minmax(0, 1fr) 3.9rem 3.9rem;
  }


  .dashboard-path {
    gap: .1rem;
  }

  .dashboard-path li:not(:last-child)::after {
    left: calc(50% + .78rem);
    right: calc(-50% + .78rem);
  }

  .dashboard-path strong {
    font-size: .64rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dashboard-profile-edit,
  .dashboard-profile-card,
  .dashboard-profile-avatar,
  .dashboard-profile-apply-btn,
  .dashboard-journey-item,
  .dashboard-opportunity-card {
    transition: none;
  }

  .dashboard-profile-card::after,
  .dashboard-applications-feature::before {
    animation: none;
  }

  .dashboard-profile-card:hover {
    transform: none;
  }

  .dashboard-profile-card:hover .dashboard-profile-avatar {
    transform: none;
  }
}

/* Essential dashboard: applicant identity and application summary only. */
.dashboard-essentials .dashboard-profile-feature,
.dashboard-essentials .dashboard-applications-card {
  background: #fff;
  border: 1px solid #e8e6ef;
  border-radius: 1rem;
  box-shadow: 0 .55rem 1.4rem rgba(75, 70, 92, .07);
  height: 100%;
  padding: clamp(1.35rem, 2.5vw, 2.1rem);
}

.dashboard-essentials .dashboard-profile-feature {
  background: radial-gradient(circle at 94% 4%, rgba(115, 103, 240, .16), transparent 19rem), linear-gradient(135deg, #f5f3ff, #fff 66%);
  border-color: #e8e4ff;
}

.dashboard-profile-feature-head {
  align-items: center;
  display: flex;
  gap: .9rem;
}

.dashboard-profile-feature-icon {
  align-items: center;
  background: linear-gradient(145deg, #8e84fb, #6258d9);
  border-radius: .85rem;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.3rem;
  height: 3.2rem;
  justify-content: center;
  width: 3.2rem;
}

.dashboard-profile-feature h1 {
  color: #3f3b57;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 760;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 0;
}

.dashboard-profile-feature .dashboard-eyebrow {
  color: #7367f0;
  font-weight: 750;
}

.dashboard-profile-feature-grid {
  display: grid;
  gap: .8rem;
  grid-template-columns: 1.2fr 1.2fr 1fr .55fr;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.dashboard-profile-feature-grid>div {
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(115, 103, 240, .1);
  border-radius: .75rem;
  min-width: 0;
  padding: .8rem .85rem;
}

.dashboard-profile-feature-grid span {
  color: #6d6b7c;
  display: block;
  font-size: .72rem;
}

.dashboard-profile-feature-grid strong {
  color: #3f3b57;
  display: block;
  font-size: .86rem;
  line-height: 1.42;
  margin-top: .22rem;
  overflow-wrap: anywhere;
}

.dashboard-profile-feature-gpa {
  background: rgba(40, 199, 111, .1) !important;
  border-color: rgba(40, 199, 111, .14) !important;
}

.dashboard-profile-feature-gpa strong {
  color: #16894a;
  font-size: 1.1rem;
}

.dashboard-essentials .dashboard-applications-card {
  display: flex;
  flex-direction: column;
}

.dashboard-essentials .dashboard-panel-heading {
  margin-bottom: .8rem;
}

.dashboard-applications-mini-list {
  display: grid;
  gap: .65rem;
}

.dashboard-applications-mini-list>div {
  border-bottom: 1px solid #efedf4;
  min-width: 0;
  padding: .45rem 0 .75rem;
}

.dashboard-applications-mini-list>div:last-child {
  border-bottom: 0;
}

.dashboard-applications-mini-list strong {
  color: #3f3b57;
  display: block;
  font-size: .84rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.dashboard-applications-mini-list span {
  color: #6d6b7c;
  display: block;
  font-size: .75rem;
  line-height: 1.35;
  margin-top: .2rem;
}

.dashboard-compact-empty {
  align-items: center;
  color: #6d6b7c;
  display: flex;
  flex-direction: column;
  font-size: .85rem;
  gap: .45rem;
  padding: 1rem 0;
  text-align: center;
}

.dashboard-compact-empty i {
  color: #7367f0;
  font-size: 1.3rem;
}

.dashboard-compact-empty a {
  color: #6258d9;
  font-weight: 750;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .dashboard-profile-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {

  .dashboard-essentials .dashboard-profile-feature,
  .dashboard-essentials .dashboard-applications-card {
    padding: 1.25rem;
  }

  .dashboard-profile-feature-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-profile-feature-head {
    align-items: flex-start;
  }

  .dashboard-profile-feature h1 {
    font-size: 1.3rem;
  }
}

/* Featured application summary paired with the compact applicant card. */
.dashboard-applications-feature {
  background: radial-gradient(circle at 94% 4%, rgba(115, 103, 240, .16), transparent 19rem), linear-gradient(135deg, #f5f3ff, #fff 66%);
  border: 1px solid #e8e4ff;
  border-radius: 1rem;
  box-shadow: 0 .55rem 1.4rem rgba(75, 70, 92, .07);
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.5vw, 2.1rem);
}

.dashboard-applications-feature .dashboard-panel-heading {
  margin-bottom: 1rem;
}

.dashboard-applications-feature .dashboard-eyebrow {
  color: #7367f0;
  font-weight: 750;
}

.dashboard-applications-feature h1 {
  color: #3f3b57;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 760;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 0;
}

.dashboard-applications-feature-list {
  display: grid;
  gap: .7rem;
}

.dashboard-applications-feature-list article {
  align-items: center;
  background: rgba(255, 255, 255, .77);
  border: 1px solid rgba(115, 103, 240, .11);
  border-radius: .75rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .85rem .95rem;
}

.dashboard-applications-feature-list h2 {
  color: #3f3b57;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.38;
  margin: 0;
}

.dashboard-applications-feature-list p {
  color: #6d6b7c;
  font-size: .77rem;
  line-height: 1.35;
  margin: .16rem 0 0;
}

.dashboard-applications-feature-list article>span {
  color: #6d6b7c;
  flex: 0 0 auto;
  font-size: .72rem;
  white-space: nowrap;
}

.dashboard-applications-feature-list article>span i {
  color: #7367f0;
  margin-right: .3rem;
}

.dashboard-feature-action {
  align-self: flex-start;
  color: #6258d9;
  font-size: .86rem;
  font-weight: 750;
  margin-top: auto;
  padding-top: 1rem;
  text-decoration: none;
}

.dashboard-feature-action:hover {
  color: #4f46bd;
  text-decoration: underline;
}

.dashboard-feature-action:focus-visible {
  box-shadow: 0 0 0 .24rem rgba(115, 103, 240, .24);
  outline: 0;
}

@media (max-width: 575.98px) {
  .dashboard-applications-feature {
    padding: 1.25rem;
  }

  .dashboard-applications-feature-list article {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
  }

  .dashboard-applications-feature-list article>span {
    white-space: normal;
  }
}

@media (max-width: 991.98px) {
  .applicant-info-wizard .bs-stepper-header {
    padding: .75rem;
  }

  .applicant-info-wizard .step {
    min-width: 240px;
  }
}

@media (max-width: 575.98px) {
  .applicant-info-wizard .step {
    min-width: 225px;
  }

  .applicant-info-wizard .step-trigger {
    min-height: 4.8rem;
    padding: .78rem .82rem !important;
  }
}

/* ==========================================================================
   REGISTER PAGE MODERN FULL UPGRADE DESIGN SYSTEM
   ========================================================================== */

/* Left Hero Panel */
.reg-hero-panel {
  background: linear-gradient(145deg, #23083f 0%, #3e1263 50%, #5f0cac 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.5rem 2.75rem;
  color: #ffffff;
  min-height: 100vh;
}

.reg-ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  animation: regAmbientDrift 14s ease-in-out infinite alternate;
}

.reg-blob-1 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, #9b93ff 0%, #7367f0 100%);
  top: -60px;
  left: -40px;
}

.reg-blob-2 {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, #e056fd 0%, #5f0cac 100%);
  bottom: -80px;
  right: -50px;
  animation-duration: 18s;
  animation-direction: alternate-reverse;
}

@keyframes regAmbientDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(25px, 20px) scale(1.08);
  }

  100% {
    transform: translate(-20px, -15px) scale(0.95);
  }
}

.reg-hero-content {
  position: relative;
  z-index: 2;
}

.reg-hero-glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  margin-top: 2rem;
}

.reg-hero-step-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
}

.reg-hero-step-badge:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
}

.reg-hero-step-badge .badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #7367f0 0%, #9b93ff 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Right Registration Card Container */
.reg-right-container {
  background: #f8f9fc;
  min-height: 100vh;
  position: relative;
}

.reg-form-card {
  background: #ffffff;
  border-radius: 1.25rem;
  box-shadow: 0 12px 42px rgba(75, 70, 92, 0.08);
  border: 1px solid #ebebf0;
  padding: 2.75rem 2.5rem;
  width: 100%;
  max-width: 780px;
}

/* Stepper Modernization */
#registerSteps.bs-stepper {
  background: transparent;
}

#registerSteps .bs-stepper-header {
  border-bottom: 1px solid #edeef2 !important;
  padding-bottom: 1.5rem !important;
  margin-bottom: 1rem !important;
}

#registerSteps .step-trigger {
  padding: 0.5rem !important;
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

#registerSteps .bs-stepper-circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #f0edf8 !important;
  color: #6d6b7c !important;
  font-size: 1.15rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#registerSteps .step.active .bs-stepper-circle {
  background: linear-gradient(135deg, #7367f0 0%, #5f0cac 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 5px rgba(115, 103, 240, 0.2), 0 4px 14px rgba(115, 103, 240, 0.35) !important;
  transform: scale(1.05);
}

#registerSteps .step.crossed .bs-stepper-circle,
#registerSteps .step .bs-stepper-circle.bg-green {
  background: #d1f5ea !important;
  color: #14b8a6 !important;
  border: 1.5px solid #14b8a6 !important;
  box-shadow: none !important;
}

#registerSteps .bs-stepper-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #5d596c;
  transition: color 0.3s ease;
}

#registerSteps .step.active .bs-stepper-title {
  color: #7367f0 !important;
}

#registerSteps .bs-stepper-label .step-subtitle {
  font-size: 0.76rem;
  color: #a5a3ae;
  display: block;
}

.step-progress-mobile {
  display: none;
}

@media (max-width: 991.98px) {
  .step-progress-mobile {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #7367f0;
  }
}

#registerSteps .line {
  color: #cfcdd9;
  font-size: 1.1rem;
}

/* Form Controls & Inputs - Crisp White Theme */
.auth-right-panel .form-control,
.reg-form-card .form-control {
  min-height: 48px;
  border-radius: 0.5rem;
  border: 1px solid #dbdade;
  background-color: #ffffff !important;
  color: #33303c !important;
  font-size: 0.9375rem;
  padding: 0.65rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.auth-right-panel .form-control::placeholder,
.reg-form-card .form-control::placeholder {
  color: #a5a3ae !important;
  opacity: 1 !important;
}

.auth-right-panel .form-control:focus,
.reg-form-card .form-control:focus {
  background-color: #ffffff !important;
  border-color: #7367f0 !important;
  box-shadow: 0 0 0 3.5px rgba(115, 103, 240, 0.16), 0 2px 8px rgba(115, 103, 240, 0.08) !important;
  transform: translateY(-1px);
}

.auth-right-panel .form-control:disabled,
.auth-right-panel .form-control[readonly],
.reg-form-card .form-control:disabled,
.reg-form-card .form-control[readonly] {
  background-color: #f1f0f5 !important;
  border-color: #e2e0e9 !important;
  color: #8a8894 !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
  box-shadow: none !important;
  transform: none !important;
}

.auth-right-panel .select2-container--default .select2-selection--single {
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 0.5rem !important;
  border: 1px solid #dbdade !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.auth-right-panel .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 1rem !important;
  line-height: 46px !important;
  color: #4b465c !important;
  font-size: 0.9375rem !important;
}

.auth-right-panel .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
  right: 0.75rem !important;
}

.auth-right-panel .form-label,
.reg-form-card .form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #4b465c;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}

.auth-right-panel .form-label.required::after,
.reg-form-card .form-label.required::after {
  content: ' *';
  color: #ea5455;
  font-weight: bold;
}

/* Password Input Group Merge */
.auth-right-panel .input-group.input-group-merge,
.reg-form-card .input-group.input-group-merge {
  border-radius: 0.5rem;
  background-color: #ffffff;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.auth-right-panel .input-group.input-group-merge:focus-within,
.reg-form-card .input-group.input-group-merge:focus-within {
  box-shadow: 0 0 0 3.5px rgba(115, 103, 240, 0.18) !important;
  transform: translateY(-1px);
}

.auth-right-panel .input-group.input-group-merge:focus-within .form-control,
.reg-form-card .input-group.input-group-merge:focus-within .form-control {
  border-color: #7367f0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.auth-right-panel .input-group.input-group-merge:focus-within .input-group-text,
.reg-form-card .input-group.input-group-merge:focus-within .input-group-text {
  border-color: #7367f0 !important;
}

.auth-right-panel .input-group-text,
.reg-form-card .input-group-text {
  border: 1px solid #dbdade;
  border-left: none;
  background-color: #ffffff !important;
  color: #6d6b7c;
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

/* Registration Form Validation Errors */
#form-register-account label.error {
  display: block;
  font-size: 0.8125rem;
  color: #ea5455;
  margin-top: 0.35rem;
  font-weight: 500;
}

#form-register-account .form-control.error {
  border-color: #ea5455 !important;
}

#form-register-account #middleName:disabled {
  background-color: #f8f7fa;
  border-color: #e9e7ee;
  color: #a5a3ae;
  cursor: not-allowed;
}

/* OTP Screen Card */
.reg-otp-card {
  background: linear-gradient(180deg, #faf9fd 0%, #ffffff 100%);
  border: 1px solid #edeaf7;
  border-radius: 1rem;
  padding: 2.25rem 2rem;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(115, 103, 240, 0.05);
}

.reg-otp-badge-mail {
  background: rgba(115, 103, 240, 0.08);
  border: 1px solid rgba(115, 103, 240, 0.16);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  color: #5f0cac;
  font-weight: 700;
  display: inline-block;
  font-size: 0.95rem;
}

.reg-otp-inputs-row {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.5rem 0;
}

.reg-otp-input,
.reg-otp-inputs-row .form-control,
.numeral-mask-wrapper .otp-input {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  -webkit-font-smoothing: antialiased;
  width: 52px !important;
  height: 56px !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  border-radius: 0.65rem !important;
  border: 1.5px solid #d4d2de !important;
  color: #2f2b3d !important;
  background-color: #ffffff !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.reg-otp-input:focus,
.reg-otp-inputs-row .form-control:focus,
.numeral-mask-wrapper .otp-input:focus {
  border-color: #7367f0 !important;
  color: #7367f0 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(115, 103, 240, 0.2), 0 3px 10px rgba(115, 103, 240, 0.1) !important;
  transform: translateY(-2px);
  outline: none !important;
}

.reg-otp-timer {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ea5455;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.reg-resend-link {
  color: #7367f0 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.reg-resend-link:hover {
  color: #5f0cac !important;
  text-decoration: underline !important;
}

/* Gradient Action Buttons */
.btn-reg-gradient {
  background: linear-gradient(135deg, #7367f0 0%, #5f0cac 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 0.75rem 1.75rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 16px rgba(115, 103, 240, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-reg-gradient::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  animation: regBtnShimmer 4.5s infinite ease-in-out;
}

@keyframes regBtnShimmer {

  0%,
  70% {
    left: -120%;
  }

  100% {
    left: 160%;
  }
}

.btn-reg-gradient:hover {
  background: linear-gradient(135deg, #6258d9 0%, #4a0987 100%) !important;
  box-shadow: 0 6px 22px rgba(95, 12, 172, 0.45) !important;
  transform: translateY(-2px);
  color: #ffffff !important;
}

.btn-reg-gradient:hover .ti-arrow-right {
  transform: translateX(3px);
}

.btn-reg-gradient .ti-arrow-right {
  transition: transform 0.25s ease;
}

.btn-reg-prev {
  background: #f1f0f5 !important;
  border: 1px solid #e3e2ea !important;
  color: #5d596c !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.4rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.25s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-reg-prev:hover {
  background: #e6e5ec !important;
  color: #33303c !important;
  transform: translateY(-1px);
}

/* Mobile Topbar & Responsiveness */
.reg-topbar-mobile {
  display: none;
}

@media (max-width: 991.98px) {
  .reg-hero-panel {
    display: none !important;
  }

  .reg-topbar-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #ecebf2;
    position: sticky;
    top: 0;
    z-index: 1050;
  }

  .reg-form-card {
    padding: 1.75rem 1.25rem;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .reg-right-container {
    background: #ffffff;
    padding: 0 !important;
  }

  #registerSteps .bs-stepper-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    overflow: visible;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  #registerSteps .step {
    flex: 0 0 auto;
  }

  #registerSteps .step-trigger {
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Collapse each step to a small dot; the step name/progress moves to
     .step-progress-mobile above the form heading instead. */
  #registerSteps .bs-stepper-label {
    display: none;
  }

  #registerSteps .bs-stepper-circle {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.05rem !important;
  }

  #registerSteps .line {
    flex: 0 0 24px;
  }

  #registerSteps .line .show-desktop,
  #registerSteps .line .show-mobile {
    display: none !important;
  }

  #registerSteps .line::before {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background: #dbdade;
  }

  #registerSteps .step.crossed + .line::before {
    background: #14b8a6;
  }

  .reg-otp-inputs-row {
    gap: 0.35rem !important;
    margin: 1.25rem 0 !important;
  }

  .reg-otp-input,
  .reg-otp-inputs-row .form-control,
  .numeral-mask-wrapper .otp-input {
    width: 44px !important;
    height: 52px !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
  }
}

/* ==========================================================================
   Admin read-only impersonation banner (apply/index.volt)
   ========================================================================== */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #663C00;
  background: #FFE082;
  border-bottom: 1px solid #E6A700;
  text-align: center;
}

/* Visually gray out data-entry fields while impersonating, so staff
   immediately see they can't edit — the banner alone wasn't obvious enough.
   This is a UX layer only: the real enforcement is server-side
   (ControllerBase::beforeExecuteRoute() blocks every POST during
   impersonation regardless of what's clickable here).
   Navigation links, sidebar menu, search/filter controls, and modal
   close/cancel buttons ([data-bs-dismiss]) are intentionally left alone so
   staff can still browse and inspect everything read-only.

   Buttons deliberately do NOT get pointer-events:none (unlike the fields
   above): pages like /personal/info reuse the same .btn-primary/.btn-next
   classes for pure client-side wizard-step navigation (no save involved —
   see .btn-next's click handler in public/js/apply/personal.js, which just
   calls stepper.next()), so blocking clicks broke staff from paging through
   an applicant's data at all. Buttons stay clickable; the actual save
   attempt (a real POST) still gets rejected server-side same as before —
   this is intentional: "clickable, but doesn't save" (see docs/audit.md,
   28 กันยายน 2026). */
body.impersonation-active input,
body.impersonation-active select,
body.impersonation-active textarea {
  pointer-events: none;
  background-color: #e9ecef;
  opacity: 0.75;
  cursor: not-allowed;
}

body.impersonation-active button[type="submit"]:not([data-bs-dismiss]),
body.impersonation-active input[type="submit"],
body.impersonation-active button.btn-primary:not([data-bs-dismiss]),
body.impersonation-active button.btn-success:not([data-bs-dismiss]),
body.impersonation-active button.btn-danger:not([data-bs-dismiss]),
body.impersonation-active button.btn-outline-primary:not([data-bs-dismiss]),
body.impersonation-active button.btn-label-danger:not([data-bs-dismiss]) {
  opacity: 0.55;
  filter: grayscale(0.4);
}

/* Compact mobile step navigator on /personal/info — icon-only, single row. Appended last on
   purpose: there are many earlier conflicting `.applicant-info-wizard` rules in this file from
   prior edits (same selectors, several full re-declarations), so source order alone was not
   reliable enough to be sure this wins — !important is used deliberately here, scoped to this
   one mobile breakpoint only.
   Root cause of the original "stacks full-height" bug: the vendor stepper library itself
   (vendor/libs/bs-stepper/bs-stepper.css:409) sets `.bs-stepper .bs-stepper-header { flex-direction:
   column }` at max-width:991.98px as ITS OWN default — none of the many .applicant-info-wizard
   rules here had ever overridden `flex-direction` specifically, so that vendor default silently
   won and every step wrapped onto its own full-width row regardless of display:flex/grid attempts
   above. See docs/audit.md, 14 Sep 2026 entries, for the full investigation (including how this
   was found: disabling each loaded stylesheet in a live browser one at a time via JS). */
@media (max-width: 767.98px) {
  .applicant-info-wizard .bs-stepper-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    overflow-x: visible !important;
    gap: .25rem !important;
    padding: .5rem !important;
  }
  .applicant-info-wizard .step {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .applicant-info-wizard .step-trigger {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    padding: .4rem !important;
    gap: 0 !important;
  }
  .applicant-info-wizard .bs-stepper-label {
    display: none !important;
  }
  .applicant-info-wizard .line {
    display: none !important;
  }
  .applicant-info-wizard .bs-stepper-circle {
    flex: 0 0 2rem !important;
    flex-basis: 2rem !important;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    margin: 0 !important;
  }
  .applicant-info-wizard .bs-stepper-circle .ti {
    width: 1.1rem !important;
    height: 1.1rem !important;
    font-size: 1.1rem !important;
  }
}

/* Mascot (khammok.png) perched on the bottom edge of the white top navbar,
   left side (user request, 30 กันยายน 2026; replaced the earlier campus
   illustration as too busy). Decorative only; the navbar's own content
   sits above it (z-index:1). */
/* No position/overflow on #layout-navbar itself: the theme's
   layout-navbar-fixed already makes it fixed/sticky (a containing block for
   the absolute image); forcing position:relative broke its placement. */
#layout-navbar > *:not(.navbar-brand) {
  position: relative;
  z-index: 1;
}

#layout-navbar .navbar-brand.app-brand {
  position: static;
  margin: 0;
  padding: 0;
}

#layout-navbar .navbar-left-illustration {
  position: absolute;
  left: 48px;
  bottom: -3px;
  height: 78px;
  width: auto;
  pointer-events: none;
  z-index: 0;
  /* khammok.png has a stray dark baseline stroke at bottom-left (x<28%,
     y 94-96%). Hide only that strip so the hands stay whole and hang over
     the bar's bottom edge, gripping it (user request, 30 กันยายน 2026). */
  clip-path: polygon(0 0, 100% 0, 100% 98.5%, 28.1% 98.5%, 28.1% 93.5%, 0 93.5%);
}

/* Hidden on phones (user request, 30 กันยายน 2026). */
@media (max-width: 575.98px) {
  #layout-navbar .navbar-left-illustration {
    display: none;
  }
}

/* Login hero brand: logo2.png (white/yellow "UP Admission" wordmark,
   transparent bg) replaces the old "UP" badge + text (user request,
   30 กันยายน 2026). */
.login-hero-brand .login-hero-brand-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
}

/* Terms and Conditions modal body on /apply/login: numbered clauses with
   dash-bulleted sub-purposes, matching the university's supplied text
   (user request, 30 กันยายน 2026). */
.terms-list {
  padding-left: 1.6rem;
}

.terms-list > li {
  line-height: 1.8;
  margin-bottom: .5rem;
}

.terms-sublist {
  list-style: none;
  padding-left: 1.25rem;
  margin: .25rem 0 0;
}

.terms-sublist > li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.8;
  margin-bottom: .35rem;
}

.terms-sublist > li::before {
  content: "\2013";
  position: absolute;
  left: 0;
}

/* Copyright line in the applicant layout footer: centered, in the site's
   Thai UI font at a quieter size/colour so it reads as a footnote (user
   request, 30 กันยายน 2026). */
.apply-footer-text {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-size: .8125rem;
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--bs-secondary-color, #7a7f93) !important;
}

@media (max-width: 575.98px) {
  .apply-footer-text {
    font-size: .75rem;
    padding: 0 1rem;
  }
}