/*
CLOUD Documentum:
  DevGroup: /cf/products/cloud-directory
  Process: /cloud-directory
  DevUnit: /cloud-directory/platform-users/login
  Activities: 6007779726983168
==============================================================================
login-v3.css — what Vuetify 2 used to put on the login and login.css does not:
the application wrapper, the fluid container, row/column, the text field
(floating label + underline), the button, the checkbox, the select, the divider
and the spacing/flex utilities the template uses. Loaded AFTER login.css, which
is not modified. Visual target: equivalent to the current login (decision of the
Requirement 5026514085347328), not a pixel copy of Vuetify.
==============================================================================
*/

[v-cloak] { display: none !important; }

/* ── Loader ─────────────────────────────────────────────────────────────── */
/* ED14: index.html positions the backdrop `absolute` with height 100%, i.e. the FIRST screen of the
   document only; on a short window the page scrolls and what lies below stays uncovered. `fixed`
   covers the viewport wherever the page is scrolled. */
.cf-loader__backdrop {
    position: fixed; display: flex; justify-content: center;
    width: 100%; height: 100%; top: 0; left: 0;
    background: rgba(0, 0, 0, 0.5); z-index: 9999998;
}
.cf-loader__spinner { margin-top: 48vh; }

/* ── Application wrapper and container (v-app / v-container) ────────────── */
.cf-app {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.87);
}
/* Vuetify's typography reset gave every paragraph a 16px bottom margin (login.css sets p { margin: 0 } at
   lower specificity); the current login relies on it (subtitles, the password-rules title, messages). */
.cf-app p { margin-bottom: 16px; }
.cf-app .app-error p:last-child, .cf-app .login-forgot-ok-txt p:last-child { margin-bottom: 0; }
/* login.css removes the underline of the navigation links by id (#btn-forgot-password, #btn-return-login…);
   the new login does not repeat ids across screens, so the same links are targeted by their containers. */
.password a, .return-login-btn-wrapper a, .login-router a { text-decoration: none; }
.cf-container { width: 100%; margin-right: auto; margin-left: auto; padding: 12px; }
.cf-container--fluid { max-width: 100%; }

/* ── Grid (v-row / v-col) ───────────────────────────────────────────────── */
.cf-row { display: flex; flex-wrap: wrap; flex: 1 1 auto; margin: -12px; width: calc(100% + 24px); }
.cf-row--no-gutters { margin: 0; width: 100%; }
.cf-row--no-gutters > .cf-col { padding: 0; }
.cf-col { flex: 0 0 100%; max-width: 100%; width: 100%; padding: 12px; }
.cf-row.cf-row--no-gutters > * { width: 100%; }

/* ── Text field (v-text-field, default underline variant) ───────────────── */
.cf-field { position: relative; width: 100%; padding-top: 12px; margin-top: 4px; font-size: 16px; text-align: left; }
/* 8px between the input text and the underline, as Vuetify's slot had. */
.cf-field__slot { position: relative; display: flex; align-items: flex-end; min-height: 48px; padding: 8px 0; }
.cf-field__slot::before,
.cf-field__slot::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background-color: rgba(0, 0, 0, 0.42);
}
.cf-field__slot::after {
    height: 2px; background-color: var(--theme-main-color, #0fcad8);
    transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.cf-field--focused .cf-field__slot::after { transform: scaleX(1); }
.cf-field--error .cf-field__slot::before,
.cf-field--error .cf-field__slot::after { background-color: #ff5252; transform: scaleX(1); }
.cf-field__input {
    flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0;
    height: 32px; padding: 8px 0; line-height: 20px; font-size: 16px;
    font-family: inherit; color: rgba(0, 0, 0, 0.87); background: transparent;
    border: none; outline: none; border-radius: 0;
}
.cf-field--disabled .cf-field__input { color: rgba(0, 0, 0, 0.38); }
.cf-field__label {
    position: absolute; left: 0; top: 6px; max-width: 90%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 16px; line-height: 20px; color: rgba(0, 0, 0, 0.6);
    pointer-events: none; transform-origin: top left;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 0.3s;
}
/* login.css forces the Vuetify label ALWAYS up (-18px, .90, !important), empty or not: same here. */
.cf-field__label { transform: translateY(-18px) scale(0.90); }
.cf-field--focused .cf-field__label { color: var(--theme-main-color, #0fcad8); }
.cf-field--error .cf-field__label { color: #ff5252; }
.cf-field__append { display: flex; align-items: flex-end; flex: 0 0 auto; padding-left: 4px; }
.cf-field__icon, .cf-field__eye svg { width: 24px; height: 24px; margin: 0 10px 10px; color: #adadad; }
.cf-field__eye { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; }
.cf-field__details { min-height: 14px; padding: 6px; margin-bottom: 8px; }
.cf-field__message { font-size: 14px; line-height: 12px; color: #ff5252; padding-top: 4px; }
.cf-field__details.mt-2 { margin-top: 8px; }

/* ── Button (v-btn rounded large dark elevation=0) ──────────────────────── */
.cf-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    height: 44px; min-width: 78px; padding: 0 20px;
    border: none; border-radius: 28px; outline: none; cursor: pointer;
    font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500;
    letter-spacing: 0.0892857143em; text-transform: uppercase; text-decoration: none;
    color: #fff; background-color: var(--theme-main-color, #0fcad8);
    transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
    -webkit-appearance: none; user-select: none;
}
.cf-btn::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background-color: currentColor; opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
}
.cf-btn:hover::before { opacity: 0.08; }
.cf-btn:focus-visible::before { opacity: 0.24; }
.cf-btn__content { display: flex; align-items: center; justify-content: center; }
.cf-btn.cf-btn--square { border-radius: 4px; }
.cf-btn--disabled, .cf-btn:disabled { cursor: default; pointer-events: none; background-color: hsla(0, 0%, 0%, 0.4) !important; color: rgba(255, 255, 255, 0.7) !important; }
/* login100-form-btn in login.css paints the full-width button; keep its height with pa-5 (20px) look. */
/* login.css gives .login100-form-btn 16px; Vuetify's large button rendered at 14px (.875rem) with higher specificity, so 14px is what the current login shows. */
.cf-btn.login100-form-btn { width: 100%; height: 44px; padding: 0 20px; font-size: 14px; }
.cf-btn.login100-form-btn.square { width: auto; min-width: 160px; }

/* ── Checkbox (v-checkbox) ──────────────────────────────────────────────── */
.cf-checkbox { display: inline-flex; flex-direction: column; margin-top: 4px; padding-top: 4px; }
.cf-checkbox__slot { display: flex; align-items: center; min-height: 32px; }
.cf-checkbox__input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.cf-checkbox__box { display: inline-flex; width: 24px; height: 24px; color: rgba(0, 0, 0, 0.54); pointer-events: none; }
.cf-checkbox--checked .cf-checkbox__box { color: var(--theme-main-color, #0fcad8); }
.cf-checkbox--error .cf-checkbox__box { color: #ff5252; }
.cf-checkbox__label { padding-left: 8px; font-size: 16px; color: rgba(0, 0, 0, 0.6); cursor: pointer; line-height: 1.3; }
.cf-checkbox--error .cf-checkbox__label { color: #ff5252; }
.cf-checkbox .cf-field__details { padding-left: 32px; }

/* ── Select (language selector, v-select solo) ──────────────────────────── */
.cf-select { position: relative; }
.cf-select__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    width: 100%; height: 38px; padding: 0 8px 0 12px;
    border: none; border-radius: 4px; cursor: pointer;
    background-color: rgba(255, 255, 255, 0.8); color: #888; font: inherit; font-size: 14px;
}
.cf-select__toggle .language-selector-item img { width: 20px; }
.cf-select__icon { color: #888; flex: 0 0 auto; transition: transform 0.2s; }
.cf-select--open .cf-select__icon { transform: rotate(180deg); }
.cf-select__menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1001;
    margin: 0; padding: 8px 0; list-style: none;
    background: #fff; border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}
.cf-select__option { display: flex; align-items: center; gap: 8px; padding: 0 16px; min-height: 40px; font-size: 14px; color: rgba(0,0,0,.87); cursor: pointer; }
.cf-select__option img { width: 20px; }
.cf-select__option--highlighted { background-color: rgba(0, 0, 0, 0.04); }
.cf-select__option--selected { color: var(--theme-main-color, #0fcad8); }

/* ── Divider (v-divider) ────────────────────────────────────────────────── */
.cf-divider { display: block; flex: 1 1 0; height: 0; max-height: 0; border: solid; border-width: thin 0 0 0; border-color: rgba(0, 0, 0, 0.12); margin: 0; }

/* ── Utilities the template uses (Vuetify 4px scale) ───────────────────── */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.align-center { align-items: center !important; }
.text-center { text-align: center !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-5 { margin-top: 20px !important; }
.mt-6 { margin-top: 24px !important; }
.mt-8 { margin-top: 32px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-8 { margin-bottom: 32px !important; }
.ml-4 { margin-left: 16px !important; }
.pt-2 { padding-top: 8px !important; }
.pa-12 { padding: 48px !important; }

/* ── ED13: the card fits the device on mobile (login.css: min-width 420px) ── */
.main-wrapper-default .wrap-login100 {
    flex: 0 0 auto;           /* the flex container (.container-login100, 380px) must not shrink the card */
    min-width: 0;
    width: 420px;
    max-width: calc(100vw - 32px);
}
/* The terms card is wider (login.css: min-width 45vw); keep it. */
.main-wrapper-default .wrap-login100.terms-wrapper { width: 45vw; min-width: 45vw; max-width: calc(100vw - 32px); }
@media (max-width: 480px) {
    .cf-container.pa-12 { padding: 24px 16px !important; }
}

/* ── PIN: the boxes are styled by login.css (.pincode-container); only the label here ── */
.pincode-label { margin: 0; display: flex; padding: 0; font-weight: 800; }