html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 40px 20px;
  background-color: #f3f6f9;
  background-image: linear-gradient(135deg, rgba(0, 82, 155, 0.06) 1px, transparent 1px), linear-gradient(45deg, rgba(0, 82, 155, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "DejaVu Sans", "Helvetica Neue", Arial, sans-serif;
}

@media (max-width: 991.98px) {
    .offcanvas-collapse {
      position: fixed;
      top: 56px; /* Height of navbar */
      bottom: 0;
      left: 100%;
      width: 100%;
      padding-right: 1rem;
      padding-left: 1rem;
      overflow-y: auto;
      visibility: hidden;
      background-color: #343a40;
      transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    }
    .offcanvas-collapse.open {
      visibility: visible;
      transform: translateX(-100%);
    }

    .form-login { width: 100%; }
}

.form-login {
    width: min(100%, 420px);
    text-align: center;
}

  .login-card {
    position: relative;
    padding: 38px 36px 34px;
    overflow: hidden;
    border: 1px solid rgba(0, 82, 155, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(31, 55, 76, 0.13);
  }

  .login-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: #00529b;
    content: "";
  }

  .login-brand { margin-bottom: 24px; }
  .login-brand img { max-width: 168px; height: auto; }

  .login-heading { margin-bottom: 28px; }

  .login-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #e8f1f8;
    color: #00529b;
    font-size: 1.2rem;
  }

  .login-heading p { font-size: 0.95rem; }
  .login-alert { text-align: left; font-size: 0.9rem; }
  .login-field { text-align: left; }

  .portal-version-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 38px;
    margin-top: 14px;
  }

  .portal-version-switch .form-check-input {
    width: 2.75rem;
    height: 1.4rem;
    margin-top: 0;
    cursor: pointer;
  }

  .portal-version-switch .form-check-input:checked {
    border-color: var(--ibsc-ocean);
    background-color: var(--ibsc-ocean);
  }

  .portal-version-label {
    color: #6c757d;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease-in-out;
  }

  .portal-version-label.is-active {
    color: #17435a;
    font-weight: 700;
  }

  .login-submit {
    min-height: 48px;
    margin-top: 8px;
    font-weight: 600;
  }

  .login-footer { margin: 20px 0 0; font-size: 0.85rem; }

.form-login .form-floating:focus-within {
    z-index: 2;
}

.form-login input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-login input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.navbar {
    height: 56px;
}

.header-logo {
    height: 1.5em !important;
    margin-right: 25px;
}

@media (max-width: 575.98px) {
  body { padding: 20px 16px; }
  .login-card { padding: 30px 22px 26px; }
}

@media (prefers-reduced-motion: no-preference) {
  .login-card { animation: login-card-enter 0.35s ease-out; }
}

@keyframes login-card-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

:root {
  --ibsc-ocean: #007ea4;
  --ibsc-blue: #2e98d1;
  --ibsc-cyan: #00cdcb;
}

body {
  background-color: #f4f8fa;
  background-image: linear-gradient(135deg, rgb(0 126 164 / 6%) 1px, transparent 1px), linear-gradient(45deg, rgb(46 152 209 / 5%) 1px, transparent 1px);
}

.login-card { border-color: rgb(0 126 164 / 16%); }
.login-card::before { background: linear-gradient(90deg, var(--ibsc-ocean), var(--ibsc-blue) 78%, var(--ibsc-cyan)); }
.login-heading-icon { background: #e7f2f8; color: var(--ibsc-ocean); }
.form-control:focus { border-color: var(--ibsc-blue); box-shadow: 0 0 0 0.2rem rgb(46 152 209 / 18%); }

.btn-primary {
  --bs-btn-bg: var(--ibsc-ocean);
  --bs-btn-border-color: var(--ibsc-ocean);
  --bs-btn-hover-bg: #006b89;
  --bs-btn-hover-border-color: #006b89;
  --bs-btn-active-bg: #005a74;
  --bs-btn-active-border-color: #005a74;
}

body {
  background-image: radial-gradient(circle, rgb(0 126 164 / 10%) 0.7px, transparent 0.8px);
  background-size: 22px 22px;
}

body.password-reset-page { flex-direction: column; }

.login-card {
  border-radius: 3px;
  box-shadow: 0 18px 45px rgb(0 68 90 / 12%);
}

.login-heading h1 { font-family: "Century Gothic", "Trebuchet MS", sans-serif; }
.login-heading-icon { border: 1px solid #c8dce7; }
.login-card .form-control { border-radius: 3px; }
.login-card .btn { border-radius: 3px; }