:root {
    --white: #f7fbff;
    --blue: #0ca8f4;
    --light-blue: #62d2ff;
    --border: rgba(255, 255, 255, 0.55);
    --glass: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(215, 222, 232, 0.16) 100%), rgba(220, 226, 235, 0.22);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background: linear-gradient(
            90deg,
            rgba(3, 17, 30, 0.34),
            rgba(3, 17, 30, 0.03)
    ),
    url("../images/olisa/axilion-cover.png") center / cover no-repeat fixed;
    font-family: "Segoe UI", Arial, sans-serif;
}

.loginCard {
    box-sizing: border-box !important;
    padding: 0 !important;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.55)) !important;
    border-radius: 13px !important;
    background: var(--glass, rgba(220, 226, 235, 0.22)) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.30), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
    color: var(--white, #f7fbff) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
}

.loginForm,
div.loginForm,
.loginCard .loginForm {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Base text elements inside login card default to white */
.loginCard td,
.loginCard div,
.loginCard span,
.loginCard label,
.loginCard p,
.loginCard .normal,
.loginCard .label,
.loginCard [class*="normal"],
.loginCard [class*="label"] {
    color: var(--white, #f7fbff);
    font-family: "Segoe UI", Arial, sans-serif;
}

.loginTitle,
.loginCard .loginTitle {
    color: var(--white, #f7fbff) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Form item titles, labels, anchors, header items and form text */
.loginForm td.formTitle,
.loginForm td.formTitleFocused,
.loginForm td.formTitleOver,
.loginForm td.formTitleDisabled,
.loginForm td.formTitlePending,
.loginForm td.formTitleError,
.loginForm [class*="formTitle"],
.loginForm .labelAnchor,
.loginForm a.labelAnchor,
.loginForm span.labelAnchor,
.loginForm div.labelAnchor,
.loginForm label.labelAnchor,
.loginForm td.labelAnchor,
.loginForm [class*="labelAnchor"],
.loginForm td.normal,
.loginForm .normal,
.loginForm [class*="normal"],
.loginForm label,
.loginForm div.headerItem,
.loginForm [class*="headerItem"],
.loginForm .staticTextItem,
.loginForm [class*="staticTextItem"],
.loginForm .staticTextItemLite,
.loginForm b,
.loginForm strong,
.loginCard td.formTitle,
.loginCard td.formTitleFocused,
.loginCard td.formTitleOver,
.loginCard td.formTitleDisabled,
.loginCard td.formTitlePending,
.loginCard td.formTitleError,
.loginCard [class*="formTitle"],
.loginCard .labelAnchor,
.loginCard a.labelAnchor,
.loginCard span.labelAnchor,
.loginCard div.labelAnchor,
.loginCard label.labelAnchor,
.loginCard td.labelAnchor,
.loginCard [class*="labelAnchor"],
.loginCard td.normal,
.loginCard .normal,
.loginCard [class*="normal"],
.loginCard label,
.loginCard div.headerItem,
.loginCard [class*="headerItem"],
.loginCard .staticTextItem,
.loginCard [class*="staticTextItem"],
.loginCard .staticTextItemLite,
.loginCard b,
.loginCard strong {
    color: var(--white, #f7fbff) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    vertical-align: middle !important;
    text-align: left !important;
    line-height: 1.3 !important;
}

.loginForm span.formTitleVertical,
.loginForm span[class*="formTitleVertical"],
.loginCard span.formTitleVertical,
.loginCard span[class*="formTitleVertical"] {
    margin-bottom: 4px !important;
    display: inline-block !important;
}

.loginForm table.formTable,
.loginForm form > table,
.loginForm form table,
.loginForm > div > table,
.loginForm form,
.loginCard table.formTable,
.loginCard form > table,
.loginCard form table,
.loginCard > div > table,
.loginCard form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
}

.loginForm td.formCell,
.loginForm td.formCellFocused,
.loginForm td.formCellOver,
.loginForm td.formCellFocusedOver,
.loginForm td.formCellDisabled,
.loginForm td.formCellPending,
.loginForm td.formCellError,
.loginForm td[class*="formCell"],
.loginCard td.formCell,
.loginCard td.formCellFocused,
.loginCard td.formCellOver,
.loginCard td.formCellFocusedOver,
.loginCard td.formCellDisabled,
.loginCard td.formCellPending,
.loginCard td.formCellError,
.loginCard td[class*="formCell"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure inner table cells within form cells do not inherit row padding */
.loginForm td[class*="formCell"] table td,
.loginCard td[class*="formCell"] table td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Row-specific spacing (applied to row cells across all focus/hover/interaction states) */
.loginForm tr:has([name="organisation"]) > td,
.loginCard tr:has([name="organisation"]) > td,
.loginForm tr:has([id*="TextItem_0"]) > td,
.loginCard tr:has([id*="TextItem_0"]) > td,
.loginForm tr:has([id*="TextItem_2"]) > td,
.loginCard tr:has([id*="TextItem_2"]) > td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.loginForm tr:has([name="username"]) > td,
.loginCard tr:has([name="username"]) > td,
.loginForm tr:has([id*="TextItem_1"]) > td,
.loginCard tr:has([id*="TextItem_1"]) > td,
.loginForm tr:has([id*="TextItem_3"]) > td,
.loginCard tr:has([id*="TextItem_3"]) > td {
    padding-top: 14px !important;
    padding-bottom: 0 !important;
}

.loginForm tr:has([name="password"]) > td,
.loginCard tr:has([name="password"]) > td,
.loginForm tr:has([id*="PasswordItem"]) > td,
.loginCard tr:has([id*="PasswordItem"]) > td,
.loginForm tr:has(input[type="password"]) > td,
.loginCard tr:has(input[type="password"]) > td {
    padding-top: 14px !important;
    padding-bottom: 0 !important;
}

.loginForm tr:has([name="saveData"]) > td,
.loginCard tr:has([name="saveData"]) > td,
.loginForm tr:has([id*="saveData"]) > td,
.loginCard tr:has([id*="saveData"]) > td,
.loginForm tr:has([id*="CheckboxItem"]) > td,
.loginCard tr:has([id*="CheckboxItem"]) > td,
.loginForm tr:has(span[class*="checkbox"]) > td,
.loginCard tr:has(span[class*="checkbox"]) > td,
.loginForm tr:has([class*="checkboxItem"]) > td,
.loginCard tr:has([class*="checkboxItem"]) > td,
.loginForm tr:has([class*="staticTextItem"]) > td,
.loginCard tr:has([class*="staticTextItem"]) > td,
.loginForm tr:has(input[type="checkbox"]) > td,
.loginCard tr:has(input[type="checkbox"]) > td {
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}

.loginForm tr:has([id*="loginLanguagePickList"]) > td,
.loginCard tr:has([id*="loginLanguagePickList"]) > td,
.loginForm tr:has([name="language"]) > td,
.loginCard tr:has([name="language"]) > td,
.loginForm tr:has([class*="selectItem"]) > td,
.loginCard tr:has([class*="selectItem"]) > td {
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}

.loginForm tr:has([id*="loginLanguagePickList"]) > td[class*="formTitle"],
.loginCard tr:has([id*="loginLanguagePickList"]) > td[class*="formTitle"],
.loginForm tr:has([name="language"]) > td[class*="formTitle"],
.loginCard tr:has([name="language"]) > td[class*="formTitle"],
.loginForm tr:has([class*="selectItem"]) > td[class*="formTitle"],
.loginCard tr:has([class*="selectItem"]) > td[class*="formTitle"] {
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    padding-right: 12px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Checkbox specific label text and cursor across all hover/focus/active states */
.loginForm .labelAnchor,
.loginForm a.labelAnchor,
.loginForm span.labelAnchor,
.loginForm [class*="labelAnchor"],
.loginForm label[for],
.loginForm label,
.loginForm .checkboxItemLite,
.loginForm [class*="checkboxItem"],
.loginForm [id*="saveData"] .labelAnchor,
.loginForm [id*="saveData"] [class*="labelAnchor"],
.loginForm [id*="saveData"] [class*="staticTextItem"],
.loginForm [name="saveData"] .labelAnchor,
.loginForm [name="saveData"] [class*="labelAnchor"],
.loginForm [name="saveData"] [class*="staticTextItem"],
.loginForm tr:has([id*="saveData"]) [class*="staticTextItem"],
.loginForm tr:has([name="saveData"]) [class*="staticTextItem"],
.loginForm tr:has(span[class*="checkbox"]) [class*="staticTextItem"],
.loginCard .labelAnchor,
.loginCard a.labelAnchor,
.loginCard span.labelAnchor,
.loginCard [class*="labelAnchor"],
.loginCard label[for],
.loginCard label,
.loginCard .checkboxItemLite,
.loginCard [class*="checkboxItem"],
.loginCard [id*="saveData"] .labelAnchor,
.loginCard [id*="saveData"] [class*="labelAnchor"],
.loginCard [id*="saveData"] [class*="staticTextItem"],
.loginCard [name="saveData"] .labelAnchor,
.loginCard [name="saveData"] [class*="labelAnchor"],
.loginCard [name="saveData"] [class*="staticTextItem"],
.loginCard tr:has([id*="saveData"]) [class*="staticTextItem"],
.loginCard tr:has([name="saveData"]) [class*="staticTextItem"],
.loginCard tr:has(span[class*="checkbox"]) [class*="staticTextItem"] {
    color: var(--white, #f7fbff) !important;
    font-size: 15px !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    user-select: none !important;
}

.loginForm input.textItem,
.loginForm input.textItemLite,
.loginForm input.textItemFocused,
.loginForm input.textItemLiteFocused,
.loginForm input.textItemDisabled,
.loginForm input.textItemLiteDisabled,
.loginForm input.passwordItem,
.loginForm input.passwordItemLite,
.loginForm input.passwordItemFocused,
.loginForm input.passwordItemLiteFocused,
.loginForm input.passwordItemDisabled,
.loginForm input.passwordItemLiteDisabled,
.loginForm input.loginTextItemLite,
.loginForm input[class*="textItem"],
.loginForm input[class*="passwordItem"],
.loginForm input[type="text"],
.loginForm input[type="password"],
.loginCard input.textItem,
.loginCard input.textItemLite,
.loginCard input.textItemFocused,
.loginCard input.textItemLiteFocused,
.loginCard input.passwordItem,
.loginCard input.passwordItemLite,
.loginCard input.passwordItemFocused,
.loginCard input.passwordItemLiteFocused,
.loginCard input.loginTextItemLite,
.loginCard input[class*="textItem"],
.loginCard input[class*="passwordItem"],
.loginCard input[type="text"],
.loginCard input[type="password"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--white, #f7fbff) !important;
    font-size: 16px !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    padding: 0 12px 0 50px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

.loginForm select,
.loginCard select {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--white, #f7fbff) !important;
    font-size: 16px !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

/* Inline icon positioning, separator line, and icon styling in login input fields */
.loginForm td.formCell > div,
.loginForm td.formCellFocused > div,
.loginForm td.formCellOver > div,
.loginForm td.formCellFocusedOver > div,
.loginForm td[class*="formCell"] > div,
.loginCard td.formCell > div,
.loginCard td.formCellFocused > div,
.loginCard td.formCellOver > div,
.loginCard td.formCellFocusedOver > div,
.loginCard td[class*="formCell"] > div,
.loginForm [id*="inlineiconswrapper"],
.loginCard [id*="inlineiconswrapper"] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.loginForm td[class*="formCell"] > div > table:has(img.loginFieldIcon),
.loginCard td[class*="formCell"] > div > table:has(img.loginFieldIcon),
.loginForm div > table:has(img.loginFieldIcon),
.loginCard div > table:has(img.loginFieldIcon),
.loginForm [id*="inlineiconswrapper"] > table,
.loginCard [id*="inlineiconswrapper"] > table {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 22px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.loginForm td[class*="formCell"] > div > table:has(img.loginFieldIcon) tbody,
.loginCard td[class*="formCell"] > div > table:has(img.loginFieldIcon) tbody,
.loginForm div > table:has(img.loginFieldIcon) tbody,
.loginCard div > table:has(img.loginFieldIcon) tbody,
.loginForm td[class*="formCell"] > div > table:has(img.loginFieldIcon) tr,
.loginCard td[class*="formCell"] > div > table:has(img.loginFieldIcon) tr,
.loginForm div > table:has(img.loginFieldIcon) tr,
.loginCard div > table:has(img.loginFieldIcon) tr,
.loginForm [id*="inlineiconswrapper"] > table tbody,
.loginCard [id*="inlineiconswrapper"] > table tbody,
.loginForm [id*="inlineiconswrapper"] > table tr,
.loginCard [id*="inlineiconswrapper"] > table tr {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 22px !important;
}

.loginForm td[class*="formCell"] > div > table:has(img.loginFieldIcon) td,
.loginCard td[class*="formCell"] > div > table:has(img.loginFieldIcon) td,
.loginForm div > table:has(img.loginFieldIcon) td,
.loginCard div > table:has(img.loginFieldIcon) td,
.loginForm [id*="inlineiconswrapper"] > table td,
.loginCard [id*="inlineiconswrapper"] > table td {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-right: 10px !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    background: transparent !important;
    background-color: transparent !important;
}

.loginForm td[class*="formCell"] > div > table:has(img.loginFieldIcon) td span,
.loginCard td[class*="formCell"] > div > table:has(img.loginFieldIcon) td span,
.loginForm td[class*="formCell"] > div > table:has(img.loginFieldIcon) td a,
.loginCard td[class*="formCell"] > div > table:has(img.loginFieldIcon) td a,
.loginForm div > table:has(img.loginFieldIcon) td span,
.loginCard div > table:has(img.loginFieldIcon) td span,
.loginForm div > table:has(img.loginFieldIcon) td a,
.loginCard div > table:has(img.loginFieldIcon) td a,
.loginForm [id*="inlineiconswrapper"] td > span,
.loginCard [id*="inlineiconswrapper"] td > span,
.loginForm [id*="inlineiconswrapper"] span[role="button"],
.loginCard [id*="inlineiconswrapper"] span[role="button"],
.loginForm [id*="inlineiconswrapper"] a[role="button"],
.loginCard [id*="inlineiconswrapper"] a[role="button"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-right: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 16px !important;
    background: transparent !important;
}

.loginForm [id*="inlineiconswrapper"] img,
.loginCard [id*="inlineiconswrapper"] img,
.loginForm [eventpart="icon"],
.loginCard [eventpart="icon"],
.loginForm img[eventpart="icon"],
.loginCard img[eventpart="icon"],
.loginForm img.loginFieldIcon,
.loginCard img.loginFieldIcon,
.loginForm td[class*="formCell"] > div > table:has(img.loginFieldIcon) img,
.loginCard td[class*="formCell"] > div > table:has(img.loginFieldIcon) img,
.loginForm div > table:has(img.loginFieldIcon) img,
.loginCard div > table:has(img.loginFieldIcon) img {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: content-box !important;
    object-fit: contain !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.loginForm input:hover,
.loginForm input.textItemOver,
.loginForm input.textItemLiteOver,
.loginForm input.passwordItemOver,
.loginForm input.passwordItemLiteOver,
.loginForm input[class*="Over"],
.loginCard input:hover,
.loginCard input.textItemOver,
.loginCard input.textItemLiteOver,
.loginCard input.passwordItemOver,
.loginCard input.passwordItemLiteOver,
.loginCard input[class*="Over"] {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
}

.loginForm input:focus,
.loginForm input.textItemFocused,
.loginForm input.textItemLiteFocused,
.loginForm input.passwordItemFocused,
.loginForm input.passwordItemLiteFocused,
.loginForm input[class*="Focused"],
.loginForm select:focus,
.loginCard input:focus,
.loginCard input.textItemFocused,
.loginCard input.textItemLiteFocused,
.loginCard input.passwordItemFocused,
.loginCard input.passwordItemLiteFocused,
.loginCard input[class*="Focused"],
.loginCard select:focus {
    border-color: var(--light-blue, #62d2ff) !important;
    background: rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 0 0 3px rgba(12, 168, 244, 0.22) !important;
    outline: 0 !important;
}

/* Autofill styling override for username & password */
.loginForm input:-webkit-autofill,
.loginForm input:-webkit-autofill:hover,
.loginForm input:-webkit-autofill:focus,
.loginForm input:-webkit-autofill:active,
.loginCard input:-webkit-autofill,
.loginCard input:-webkit-autofill:hover,
.loginCard input:-webkit-autofill:focus,
.loginCard input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(220, 226, 235, 0.22) inset !important;
    -webkit-text-fill-color: var(--white, #f7fbff) !important;
    caret-color: var(--white, #f7fbff) !important;
    transition: background-color 5000s ease-in-out 0s !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 7px !important;
}

.loginForm input:-webkit-autofill:focus,
.loginCard input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.20) inset, 0 0 0 3px rgba(12, 168, 244, 0.22) !important;
    border-color: var(--light-blue, #62d2ff) !important;
}

.loginForm input:autofill,
.loginForm input:autofill:hover,
.loginForm input:autofill:focus,
.loginForm input:autofill:active,
.loginCard input:autofill,
.loginCard input:autofill:hover,
.loginCard input:autofill:focus,
.loginCard input:autofill:active {
    box-shadow: 0 0 0 1000px rgba(220, 226, 235, 0.22) inset !important;
    -webkit-text-fill-color: var(--white, #f7fbff) !important;
    caret-color: var(--white, #f7fbff) !important;
    filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 7px !important;
}

/* Language picker / SelectItem control container */
.loginForm table.selectItemLiteControl,
.loginForm table.selectItemControl,
.loginForm table[class*="selectItem"],
.loginCard table.selectItemLiteControl,
.loginCard table.selectItemControl,
.loginCard table[class*="selectItem"],
.loginForm [id*="loginLanguagePickList"] table,
.loginCard [id*="loginLanguagePickList"] table,
.loginForm [id*="loginLanguagePickList"].selectItemLiteControl,
.loginForm [id*="loginLanguagePickList"] .selectItemLiteControl {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-sizing: border-box !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
    cursor: pointer !important;
}

.loginForm table[class*="selectItem"]:hover,
.loginForm table[class*="selectItemOver"],
.loginForm [class*="selectItemLiteControlOver"],
.loginForm [class*="selectItemControlOver"],
.loginForm [id*="loginLanguagePickList"] table:hover,
.loginForm [id*="loginLanguagePickList"] [class*="Over"] {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
}

.loginForm table[class*="selectItemFocused"],
.loginForm table[class*="selectItem"]:focus-within,
.loginForm [class*="selectItemLiteControlFocused"],
.loginForm [class*="selectItemControlFocused"],
.loginForm [id*="loginLanguagePickList"] [class*="Focused"],
.loginForm [id*="loginLanguagePickList"] table:focus-within {
    border-color: var(--light-blue, #62d2ff) !important;
    background: rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 0 0 3px rgba(12, 168, 244, 0.22) !important;
    outline: 0 !important;
}

/* Inner text container of SelectItem */
.loginForm div.selectItemLiteText,
.loginForm div.selectItemText,
.loginForm [class*="selectItemLiteText"],
.loginForm [class*="selectItemText"],
.loginForm td.selectItemText,
.loginForm [id*="loginLanguagePickList"] div,
.loginForm [id*="loginLanguagePickList"] [class*="selectItemLiteText"] {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--white, #f7fbff) !important;
    font-size: 16px !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 0 0 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* Flag icon inside valueicon */
.loginForm [id*="loginLanguagePickList"] span[eventpart="valueicon"],
.loginForm [class*="selectItem"] span[eventpart="valueicon"],
.loginForm .selectItemLiteText span[eventpart="valueicon"],
.loginCard [id*="loginLanguagePickList"] span[eventpart="valueicon"],
.loginCard [class*="selectItem"] span[eventpart="valueicon"],
.loginCard .selectItemLiteText span[eventpart="valueicon"] {
    display: inline-block !important;
    width: 18px !important;
    height: 13px !important;
    min-width: 18px !important;
    min-height: 13px !important;
    max-width: 18px !important;
    max-height: 13px !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
    border: none !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    background-color: transparent !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}

/* Picker dropdown icon cell and icon */
.loginForm td[class*="selectItemPickerIcon"],
.loginCard td[class*="selectItemPickerIcon"],
.loginForm [id*="loginLanguagePickList"] td[class*="PickerIcon"],
.loginForm [id*="loginLanguagePickList"] td[class*="selectItemPickerIcon"],
.loginCard [id*="loginLanguagePickList"] td[class*="PickerIcon"],
.loginCard [id*="loginLanguagePickList"] td[class*="selectItemPickerIcon"],
.loginForm div.comboBoxItemPickerCell,
.loginCard div.comboBoxItemPickerCell {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 10px 0 2px !important;
    vertical-align: middle !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    width: 24px !important;
    min-width: 24px !important;
}

.loginForm td[class*="selectItemText"],
.loginCard td[class*="selectItemText"],
.loginForm [id*="loginLanguagePickList"] td[class*="selectItemText"],
.loginCard [id*="loginLanguagePickList"] td[class*="selectItemText"],
.loginForm [id*="loginLanguagePickList"] td:first-child,
.loginCard [id*="loginLanguagePickList"] td:first-child {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    vertical-align: middle !important;
    text-align: left !important;
}

.loginForm td[class*="selectItemPickerIcon"] span[role="button"],
.loginForm td[class*="selectItemPickerIcon"] span[class*="selectItemPickerIcon"],
.loginForm [id*="loginLanguagePickList"] span[class*="selectItemPickerIcon"],
.loginForm [id*="loginLanguagePickList"] span[role="button"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.loginForm td[class*="selectItemPickerIcon"] .comboBoxItemPicker,
.loginForm [id*="loginLanguagePickList"] .comboBoxItemPicker {
    filter: brightness(0) invert(1) !important;
    opacity: 0.85 !important;
    transition: opacity 160ms ease !important;
}

.loginForm table[class*="selectItem"]:hover td[class*="selectItemPickerIcon"] .comboBoxItemPicker,
.loginForm table[class*="selectItemOver"] td[class*="selectItemPickerIcon"] .comboBoxItemPicker,
.loginForm [id*="loginLanguagePickList"] table:hover .comboBoxItemPicker {
    opacity: 1 !important;
}

/* ============================================================
   Checkbox styling with frosted glass appearance (single clean box)
   ============================================================ */

/* Checkbox row container geometry lock to prevent any layout shift */
.loginForm tr:has([name="saveData"]) td[class*="formCell"] > div,
.loginCard tr:has([name="saveData"]) td[class*="formCell"] > div,
.loginForm tr:has([id*="saveData"]) td[class*="formCell"] > div,
.loginCard tr:has([id*="saveData"]) td[class*="formCell"] > div,
.loginForm tr:has(span[class*="checkbox"]) td[class*="formCell"] > div,
.loginCard tr:has(span[class*="checkbox"]) td[class*="formCell"] > div {
    display: flex !important;
    align-items: center !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    line-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* Outer container wrappers for checkbox in login form */
.loginForm [id*="saveData"] span[eventpart="valueicon"],
.loginForm [id*="saveData"] span[role="button"],
.loginForm [name="saveData"] span[eventpart="valueicon"],
.loginForm [name="saveData"] span[role="button"],
.loginCard [id*="saveData"] span[eventpart="valueicon"],
.loginCard [id*="saveData"] span[role="button"],
.loginCard [name="saveData"] span[eventpart="valueicon"],
.loginCard [name="saveData"] span[role="button"],
.loginForm td[class*="formCell"] span:has(> span[class*="checkbox"]),
.loginCard td[class*="formCell"] span:has(> span[class*="checkbox"]),
.loginForm td[class*="formCell"] span[role="button"]:has(span[class*="checkbox"]),
.loginCard td[class*="formCell"] span[role="button"]:has(span[class*="checkbox"]),
.loginForm tr:has(span[class*="checkbox"]) span[role="button"],
.loginCard tr:has(span[class*="checkbox"]) span[role="button"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure spriteviewport inside checkbox doesn't clip and matches 24px */
.loginForm span[spriteviewport]:has(> span[class*="checkbox"]),
.loginCard span[spriteviewport]:has(> span[class*="checkbox"]),
.loginForm span[role="button"] > span[spriteviewport],
.loginCard span[role="button"] > span[spriteviewport],
.loginForm [id*="saveData"] span[spriteviewport],
.loginCard [id*="saveData"] span[spriteviewport],
.loginForm [name="saveData"] span[spriteviewport],
.loginCard [name="saveData"] span[spriteviewport] {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* The actual checkbox element itself across ALL states */
.loginForm span[class*="checkboxFalse"],
.loginForm span[class*="checkboxTrue"],
.loginForm span[class*="checkboxPartial"],
.loginForm span[class*="checkboxUnset"],
.loginCard span[class*="checkboxFalse"],
.loginCard span[class*="checkboxTrue"],
.loginCard span[class*="checkboxPartial"],
.loginCard span[class*="checkboxUnset"] {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    transform: none !important;
    -webkit-transform: none !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 6px !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    background-image: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    top: 0 !important;
    left: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

/* Suppress all nested child spans, sprites, and viewports inside the checkbox icon */
.loginForm span[class*="checkboxFalse"] *,
.loginForm span[class*="checkboxTrue"] *,
.loginForm span[class*="checkboxPartial"] *,
.loginForm span[class*="checkboxUnset"] *,
.loginCard span[class*="checkboxFalse"] *,
.loginCard span[class*="checkboxTrue"] *,
.loginCard span[class*="checkboxPartial"] *,
.loginCard span[class*="checkboxUnset"] * {
    display: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
}

/* Hover state for unchecked checkbox */
.loginForm span[class*="checkboxFalse"]:hover,
.loginForm span[class*="checkboxFalse"][class*="Over"],
.loginCard span[class*="checkboxFalse"]:hover,
.loginCard span[class*="checkboxFalse"][class*="Over"],
.loginForm [id*="saveData"]:hover span[class*="checkboxFalse"],
.loginCard [id*="saveData"]:hover span[class*="checkboxFalse"],
.loginForm [name="saveData"]:hover span[class*="checkboxFalse"],
.loginCard [name="saveData"]:hover span[class*="checkboxFalse"],
.loginForm tr:has(span[class*="checkbox"]):hover span[class*="checkboxFalse"],
.loginCard tr:has(span[class*="checkbox"]):hover span[class*="checkboxFalse"] {
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
}

/* Focus and active/down states for unchecked checkbox */
.loginForm span[class*="checkboxFalse"][class*="Down"],
.loginForm span[class*="checkboxFalse"][class*="Focused"],
.loginCard span[class*="checkboxFalse"][class*="Down"],
.loginCard span[class*="checkboxFalse"][class*="Focused"] {
    border-color: var(--light-blue, #62d2ff) !important;
    background-color: rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 0 0 3px rgba(12, 168, 244, 0.22) !important;
}

/* Checked state: smooth blue background with clean white SVG checkmark */
.loginForm span[class*="checkboxTrue"],
.loginCard span[class*="checkboxTrue"] {
    background-color: rgba(12, 168, 244, 0.75) !important;
    border-color: var(--light-blue, #62d2ff) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f7fbff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
}

/* Hover state for checked checkbox */
.loginForm span[class*="checkboxTrue"]:hover,
.loginForm span[class*="checkboxTrue"][class*="Over"],
.loginCard span[class*="checkboxTrue"]:hover,
.loginCard span[class*="checkboxTrue"][class*="Over"],
.loginForm [id*="saveData"]:hover span[class*="checkboxTrue"],
.loginCard [id*="saveData"]:hover span[class*="checkboxTrue"],
.loginForm [name="saveData"]:hover span[class*="checkboxTrue"],
.loginCard [name="saveData"]:hover span[class*="checkboxTrue"],
.loginForm tr:has(span[class*="checkbox"]):hover span[class*="checkboxTrue"],
.loginCard tr:has(span[class*="checkbox"]):hover span[class*="checkboxTrue"] {
    background-color: rgba(12, 168, 244, 0.90) !important;
    border-color: #ffffff !important;
}

/* Focus and active/down states for checked checkbox */
.loginForm span[class*="checkboxTrue"][class*="Down"],
.loginForm span[class*="checkboxTrue"][class*="Focused"],
.loginCard span[class*="checkboxTrue"][class*="Down"],
.loginCard span[class*="checkboxTrue"][class*="Focused"] {
    box-shadow: 0 0 0 3px rgba(12, 168, 244, 0.35) !important;
}

/* Native checkbox inputs fallback */
.loginForm input[type="checkbox"],
.loginCard input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    cursor: pointer !important;
    margin: 0 10px 0 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
    outline: none !important;
    flex-shrink: 0 !important;
}

.loginForm input[type="checkbox"]:hover,
.loginCard input[type="checkbox"]:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
}

.loginForm input[type="checkbox"]:focus,
.loginCard input[type="checkbox"]:focus {
    border-color: var(--light-blue, #62d2ff) !important;
    background: rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 0 0 3px rgba(12, 168, 244, 0.22) !important;
}

.loginForm input[type="checkbox"]:checked,
.loginCard input[type="checkbox"]:checked {
    background: rgba(12, 168, 244, 0.75) !important;
    border-color: var(--light-blue, #62d2ff) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f7fbff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
}

/* Ensure container cells for checkboxes have transparent backgrounds and no borders */
.loginForm .checkboxItemLite,
.loginForm [class*="checkboxItem"],
.loginForm td[class*="formCell"],
.loginForm .staticTextItemLite,
.loginForm [class*="staticTextItem"],
.loginCard .checkboxItemLite,
.loginCard [class*="checkboxItem"],
.loginCard td[class*="formCell"],
.loginCard .staticTextItemLite,
.loginCard [class*="staticTextItem"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Language dropdown picklist popup styling (scoped to loginPickList) */
.loginPickListMenu,
div.loginPickListMenu {
    box-sizing: border-box !important;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.55)) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(215, 222, 232, 0.12) 100%), rgba(20, 36, 54, 0.90) !important;
    background-color: rgba(20, 36, 54, 0.90) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.40), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
    overflow: hidden !important;
}

.loginPickListMenuBody,
div.loginPickListMenuBody,
table.loginPickListMenu,
table.loginPickListMenuBody {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ALL states of loginPickListCell must share the EXACT same geometry, sizing, font, padding, and borders to prevent flickering/jitter on hover */
td[class*="loginPickListCell"],
.loginPickListCell,
.loginPickListCellDark,
.loginPickListCellOver,
.loginPickListCellOverDark,
.loginPickListCellSelected,
.loginPickListCellSelectedDark,
.loginPickListCellSelectedOver,
.loginPickListCellSelectedOverDark,
.loginPickListCellFocused,
.loginPickListCellFocusedDark,
.loginPickListCellFocusedOver,
.loginPickListCellFocusedOverDark,
.loginPickListCellDisabled,
.loginPickListCellDisabledDark,
.loginPickListCellPending,
.loginPickListCellPendingDark,
.loginPickListCellPendingOver,
.loginPickListCellPendingOverDark {
    color: var(--white, #f7fbff) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 20px !important;
    height: 38px !important;
    min-height: 38px !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 8px 14px !important;
    cursor: pointer !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    transition: background-color 140ms ease, color 140ms ease !important;
}

/* Remove bottom border on last item */
tr:last-child td[class*="loginPickListCell"],
tr:last-of-type td[class*="loginPickListCell"] {
    border-bottom: none !important;
}

/* Hover state for picklist cells */
td[class*="loginPickListCell"][class*="Over"],
.loginPickListCellOver,
.loginPickListCellOverDark,
.loginPickListCellFocusedOver,
.loginPickListCellFocusedOverDark,
.loginPickListCellPendingOver,
.loginPickListCellPendingOverDark {
    color: var(--white, #f7fbff) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
}

/* Selected state for picklist cells */
td[class*="loginPickListCell"][class*="Selected"],
.loginPickListCellSelected,
.loginPickListCellSelectedDark,
.loginPickListCellPendingSelected,
.loginPickListCellPendingSelectedDark {
    color: #ffffff !important;
    background: rgba(12, 168, 244, 0.65) !important;
    background-color: rgba(12, 168, 244, 0.65) !important;
    font-weight: 600 !important;
}

/* Selected + Hover state for picklist cells */
td[class*="loginPickListCell"][class*="Selected"][class*="Over"],
.loginPickListCellSelectedOver,
.loginPickListCellSelectedOverDark,
.loginPickListCellPendingSelectedOver,
.loginPickListCellPendingSelectedOverDark {
    color: #ffffff !important;
    background: rgba(12, 168, 244, 0.85) !important;
    background-color: rgba(12, 168, 244, 0.85) !important;
    font-weight: 600 !important;
}

/* Disabled state */
td[class*="loginPickListCell"][class*="Disabled"],
.loginPickListCellDisabled,
.loginPickListCellDisabledDark {
    color: rgba(255, 255, 255, 0.40) !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: default !important;
}

/* Flag icon inside ALL states of loginPickListCell */
[class*="loginPickListCell"] span[eventpart="valueicon"],
.loginPickListCell span[eventpart="valueicon"],
.loginPickListCellDark span[eventpart="valueicon"],
.loginPickListCellOver span[eventpart="valueicon"],
.loginPickListCellOverDark span[eventpart="valueicon"],
.loginPickListCellSelected span[eventpart="valueicon"],
.loginPickListCellSelectedDark span[eventpart="valueicon"],
.loginPickListCellSelectedOver span[eventpart="valueicon"],
.loginPickListCellSelectedOverDark span[eventpart="valueicon"],
.loginPickListMenu span[eventpart="valueicon"],
.loginPickListMenuBody span[eventpart="valueicon"] {
    display: inline-block !important;
    width: 18px !important;
    height: 13px !important;
    margin-right: 10px !important;
    margin-left: 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}

.loginForm select option,
.loginCard select option {
    color: var(--white, #f7fbff) !important;
    background-color: #1a2d42 !important;
}

.loginButton,
.loginButtonOver,
.loginButtonDown,
.loginButtonFocused,
.loginButtonFocusedOver,
.loginButtonFocusedDown,
.login-button {
    width: 100% !important;
    height: 48px !important;
    border: 1px solid #62caff !important;
    border-radius: 6px !important;
    color: white !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    background: linear-gradient(180deg, #16aff8, #079ce8) !important;
    box-shadow: 0 7px 18px rgba(0, 128, 214, 0.22) !important;
    transition: transform 140ms ease, filter 140ms ease !important;
    text-align: center !important;
}

.loginButton:hover,
.loginButtonOver {
    filter: brightness(1.08) !important;
}

.loginButton:active,
.loginButtonDown {
    transform: translateY(1px) !important;
}

.loginPageLink,
.forgot-password {
    display: block !important;
    margin: 0 !important;
    color: var(--light-blue, #62d2ff) !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

.loginPageLink:hover,
.forgot-password:hover {
    text-decoration: underline !important;
    color: var(--light-blue, #62d2ff) !important;
}

.loginFooterText,
.footer-text {
    margin: 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* Loading state in login card after submitting login */
.loginLoadingMessage,
.loginCard .loginLoadingMessage {
    color: var(--white, #f7fbff) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    padding: 30px 10px !important;
    box-sizing: border-box !important;
}

#loadingWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20001;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 80px;
}

#loading {
    box-sizing: border-box !important;
    width: 425px !important;
    max-width: calc(100% - 100px) !important;
    padding: 28px 31px 24px !important;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.55)) !important;
    border-radius: 13px !important;
    background: var(--glass, rgba(220, 226, 235, 0.22)) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.30), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
    color: var(--white, #f7fbff) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
}

#loading .loadingIndicator {
    background: transparent !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    color: var(--white, #f7fbff) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#loading .loadingSpinner {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
}

#loading .loadingContent {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#loading .loadingTitle {
    color: var(--white, #f7fbff) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

#loadingMsg {
    color: rgba(255, 255, 255, 0.88) !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

@media (max-width: 600px) {
    #loadingWrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
        justify-content: center !important;
    }

    #loading {
        width: 100% !important;
        max-width: 100% !important;
    }
}