/* =============================================================================
   NOVA DESIGN SYSTEM — Combined Stylesheet
   =============================================================================
   Sections:
     1.  Variables (Design Tokens)
     2.  Main Layout & Typography
     3.  Buttons
     4.  Form Controls
     5.  Checkbox
     6.  Radio
     7.  Select
     8.  Modal
     9.  Operation Feedback
    10.  Cookie Banner
   ============================================================================= */


/* =============================================================================
   1. VARIABLES (Design Tokens)
   ============================================================================= */

:root {
    /* ========================================
       Spacing Tokens
       ======================================== */
    --0: 4px;
    --1: 8px;
    --3: 16px;
    --4: 24px;
    --7: 48px;

    /* ========================================
       Elevation
       ======================================== */
    --elevation-blur-100: 4px;
    --elevation-blur-300: 6px;
    --elevation-blur-500: 24px;
    --elevation-spread-100: -1px;
    --elevation-spread-300: -1px;
    --elevation-x-0: 0px;
    --elevation-y-100: 2px;
    --elevation-y-300: 6px;
    --elevation-y-500: 12px;
    --spread-500: -6px;

    /* ========================================
       Font
       ======================================== */
    --font-fontFamily-default: 'Noto Sans';
    --font-fontSize-body-large: 16px;
    --font-fontSize-body-medium: 14px;
    --font-fontSize-heading-h4: 24px;
    --font-fontSize-heading-h6: 18px;
    --font-fontSize-title-large: 16px;
    --font-fontSize-title-medium: 14px;
    --font-fontSize-uiControlText-large: 16px;
    --font-fontSize-uiControlText-medium: 14px;
    --font-fontSize-uiControlText-small: 12px;
    --font-fontWeight-medium: 500;
    --font-fontWeight-regular: 400;
    --font-fontWeight-semiBold: 600;
    --font-letterSpacing-normal: 0px;
    --font-lineHeight-body-large: 24px;
    --font-lineHeight-body-medium: 20px;
    --font-lineHeight-heading-h4: 32px;
    --font-lineHeight-heading-h6: 24px;
    --font-lineHeight-title-large: 24px;
    --font-lineHeight-title-medium: 20px;
    --font-lineHeight-uiControlText-large: 20px;
    --font-lineHeight-uiControlText-medium: 18px;
    --font-lineHeight-uiControlText-small: 14px;

    /* ========================================
       Radius
       ======================================== */
    --radius-large: 16px;
    --radius-medium: 12px;
    --radius-xLarge: 24px;
    --radius-round: 128px;

    /* ========================================
       Sizing
       ======================================== */
    --sizing-icon-medium: 24px;
    --sizing-icon-small: 20px;
    --sizing-minInteractiveTarget: 24px;
    --sizing-stroke-light: 0.5px;
    --sizing-stroke-medium: 1px;
    --sizing-stroke-strong: 2px;
    --sizing-uiControl-height-medium: 40px;
    --sizing-uiControl-height-small: 32px;
    --sizing-uiControl-height-xLarge: 56px;
    --sizing-uiControl-height-xSmall: 24px;

    /* ========================================
       Spacing
       ======================================== */
    --spacing-gap-large: 24px;
    --spacing-gap-medium: 16px;
    --spacing-gap-semiMedium: 12px;
    --spacing-gap-small: 8px;
    --spacing-gap-xLarge: 32px;
    --spacing-gap-xSmall: 4px;
    --spacing-padding-xLarge: 32px;
    --spacing-padding-medium: 16px;
    --spacing-padding-semiMedium: 12px;
    --spacing-padding-small: 8px;

    /* ========================================
       UI Content
       ======================================== */
    --uiContent-accent: #0342C9;
    --uiContent-accentIntense: #0033A0;
    --uiContent-danger: #D1485F;
    --uiContent-disabled: #9D9FAA;
    --uiContent-emphasized: #272727;
    --uiContent-error: #B51A36;
    --uiContent-info: #005CB8;
    --uiContent-inverse: #FFF;
    --uiContent-neutral: #575966;
    --uiContent-subtle: #6B7280;
    --uiContent-success: #2D7B58;

    /* ========================================
       UI Control
       ======================================== */
    --uiControl-contained-disabled: #C2C3CC;
    --uiControl-contained-enabled: #0342C9;
    --uiControl-contained-hover: #0033A0;
    --uiControl-contained-pressed: #0A2271;
    --uiControl-outlined-disabled: #F5F6FA;
    --uiControl-outlined-enabled: #FFF;
    --uiControl-outlined-hover: #EDF2FC;
    --uiControl-outlined-pressedOrSelected: #E4EBFC;
    --uiControl-outlined-readonly: #F8F9FC;

    /* ========================================
       UI Stroke
       ======================================== */
    --uiStroke-accent: #0342C9;
    --uiStroke-danger: #D1485F;
    --uiStroke-disabled: #D7D9E2;
    --uiStroke-error: #FD4E57;
    --uiStroke-focused: #78A3FF;
    --uiStroke-hovered: #9DB8E5;
    --uiStroke-neutral: #C2C3CC;
    --uiStroke-readonly: #D7D9E2;

    /* ========================================
       UI Surface
       ======================================== */
    --uiSurface-effect-shadow: rgba(10, 34, 113, 0.16);
    --uiSurface-interactive: #FFF;
    --uiSurface-semantic-error-intense: #B51A36;
    --uiSurface-semantic-error-lightest: #FFF0F0;
    --uiSurface-semantic-info-intense: #155B99;
    --uiSurface-semantic-success-intense: #266548;
    --uiSurface-static: #F9F9FB;

    /* ========================================
       Bootstrap Theming - Primary Button
       ======================================== */
    --mdb-btn-primary-active-bg: var(--uiControl-contained-pressed);
    --mdb-btn-primary-active-border-color: transparent;
    --mdb-btn-primary-active-color: var(--uiContent-inverse);
    --mdb-btn-primary-active-shadow: none;
    --mdb-btn-primary-bg: var(--uiControl-contained-enabled);
    --mdb-btn-primary-border-color: transparent;
    --mdb-btn-primary-box-shadow: var(--elevation-x-0) var(--elevation-y-100) var(--elevation-blur-100) var(--elevation-spread-100) var(--uiSurface-effect-shadow);
    --mdb-btn-primary-color: var(--uiContent-inverse);
    --mdb-btn-primary-disabled-bg: var(--uiControl-contained-disabled);
    --mdb-btn-primary-disabled-border-color: transparent;
    --mdb-btn-primary-disabled-color: var(--uiContent-disabled);
    --mdb-btn-primary-disabled-shadow: none;
    --mdb-btn-primary-focus-bg: var(--uiControl-contained-enabled);
    --mdb-btn-primary-focus-color: var(--uiContent-inverse);
    --mdb-btn-primary-focus-shadow-rgb: 120, 163, 255;
    --mdb-btn-primary-hover-bg: var(--uiControl-contained-hover);
    --mdb-btn-primary-hover-border-color: transparent;
    --mdb-btn-primary-hover-color: var(--uiContent-inverse);

    /* ========================================
       Bootstrap Theming - Secondary Button
       ======================================== */
    --mdb-btn-secondary-active-bg: var(--uiControl-outlined-pressedOrSelected);
    --mdb-btn-secondary-active-border-color: var(--uiStroke-accent);
    --mdb-btn-secondary-active-color: var(--uiContent-accentIntense);
    --mdb-btn-secondary-active-shadow: none;
    --mdb-btn-secondary-bg: var(--uiControl-outlined-enabled);
    --mdb-btn-secondary-border-color: var(--uiStroke-neutral);
    --mdb-btn-secondary-box-shadow: var(--elevation-x-0) var(--elevation-y-100) var(--elevation-blur-100) var(--elevation-spread-100) var(--uiSurface-effect-shadow);
    --mdb-btn-secondary-color: var(--uiContent-accent);
    --mdb-btn-secondary-disabled-bg: var(--uiControl-outlined-disabled);
    --mdb-btn-secondary-disabled-color: var(--uiContent-disabled);
    --mdb-btn-secondary-disabled-shadow: none;
    --mdb-btn-secondary-focus-bg: var(--uiControl-contained-enabled);
    --mdb-btn-secondary-focus-border-color: var(--uiStroke-focused);
    --mdb-btn-secondary-focus-color: var(--uiContent-accentIntense);
    --mdb-btn-secondary-hover-bg: var(--uiControl-outlined-hover);
    --mdb-btn-secondary-hover-border-color: var(--uiStroke-accent);
    --mdb-btn-secondary-hover-color: var(--uiContent-accentIntense);
    --mdb-form-invalid-color: #b31b32;
    --mdb-form-invalid-border-color: #b31b32;
    --custom-defaultblue: #0d58d9;
}


/* =============================================================================
   2. MAIN LAYOUT & TYPOGRAPHY
   ============================================================================= */

@font-face {
    font-family: 'Noto Sans';
    src: url(./../../fonts/notosans/NotoSans-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans';
    src: url(./../../fonts/notosans/NotoSans-SemiBold.ttf) format('truetype');
    font-weight: 600;
    font-style: normal;
}

body {
    font-family: var(--font-fontFamily-default);
    color: var(--uiContent-emphasized);
    position: relative;
}

main {
    display: flex;
    min-height: 100vh;
    overflow: hidden;
}

.custom-right-section {
    position: relative;
    flex: 1 1 auto;
    background: #eef1f8;
    overflow: hidden;
}

.custom-left-section {
    flex: 0 0 auto;
    position: relative;
    width: 652px;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: #fff;
}

.page-content {
    height: 100%;
    width: 100%;
    max-width: 392px;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
    align-items: center;
    padding-top: 112px;
}

.main-logo {
    position: absolute;
    top: 30px;
    left: 30px;
}

.action-and-disclaimer-container {
    width: 100%;
    height: 97%;
    /*max-width: 332px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 20px;*/
    justify-content: space-between;
    padding-bottom: 32px;
}

.custom-right-section .bg-login-side {
    margin-left: 150px;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    min-width: 470px;
    min-height: 549px;
}

@media (min-width: 1598px) {
    .custom-right-section {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-right-section .bg-login-side {
        margin: unset;
        top: unset;
        transform: unset;
    }
}

@media (min-width: 1024px) {
    .custom-right-section .bg-login-side {
        width: 647px;
        height: 756px;
    }
}

@media (max-width: 1280px) {
    .custom-right-section .bg-login-side {
        width: 470px;
        height: 549px;
        margin-left: 79px;
    }
}

@media (max-width: 1023px) {
    .custom-right-section {
        display: none;
    }

    .custom-left-section {
        width: 100%;
        max-width: none;
        padding: 1.5rem 80px;
    }
}

@media (max-width: 768px) {
    main {
        flex-direction: column;
    }

    .custom-left-section {
        width: 100%;
        padding: 24px 40px;
    }

    .tooltip {
        display: none !important;
    }

    .cookie-banner-container {
        flex-direction: column;
    }
}

.accordion-root {
    padding-bottom: 20px;
}

@media (max-width: 1024px) {

    .page-content:has(.register-form-box),
    .page-content:has(.create-password-form-box),
    .page-content:has(.create-password-form-box) {
        height: unset;
    }
}

@media (min-width: 1024px) {
    .modal-dialog {
        max-width: 600px;
        width: max-content;
    }

    .modal-dialog.business-unit-modal,
    .modal-dialog.modal-password-expiring {
        width: 600px;
    }

    .modal-dialog.disclaimer-document-content-modal {
        max-width: 900px;
    }
}

/* --- Typography --- */

.title-large {
    overflow: hidden;
    color: var(--uiContent-emphasized, #272727);
    text-overflow: ellipsis;
    font: var(--font-fontWeight-semiBold, 600) var(--font-fontSize-title-large, 16px) / var(--font-lineHeight-title-large, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.heading-h4 {
    color: var(--uiContent-emphasized);
    text-align: left;
    font: var(--font-fontWeight-semiBold) var(--font-fontSize-heading-h4) / var(--font-lineHeight-heading-h4) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal);
}

.heading-h6 {
    color: var(--uiContent-emphasized, #272727);
    font: var(--font-fontWeight-semiBold, 600) var(--font-fontSize-heading-h6, 18px) / var(--font-lineHeight-heading-h6, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.body-large {
    color: var(--uiContent-emphasized, #272727);
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-body-large, 16px) / var(--font-lineHeight-body-large, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.body-medium {
    color: var(--uiContent-neutral, #575966);
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-body-medium, 14px) / var(--font-lineHeight-body-medium, 20px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.semi-bold {
    font-weight: var(--font-fontWeight-semiBold, 600);
}

/* --- Tenant Selection --- */

.tenant-selection-user-id {
    color: var(--uiContent-emphasized, #272727);
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-body-large, 16px) / var(--font-lineHeight-body-large, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.tenant-selection-change {
    color: var(--uiContent-accent, #0342C9);
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-body-large, 16px) / var(--font-lineHeight-body-large, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.tenant-selection-title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--0, 4px);
}

.tenant-selection-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--3, 16px);
    align-self: stretch;
}

.tenant-selection-wrapper {
    display: flex;
    width: 392px;
    flex-direction: column;
    align-items: center;
    gap: var(--4, 24px);
}

.tenant-selection-form {
    width: 100%;
}

.tenant-selection-show-all-container {
    display: flex;
    width: 400px;
}

.tenant-selection-show-all {
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 1%;
    color: #0033A0;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

/* --- Password --- */

.password-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--1, 8px);
    align-self: stretch;
}

.password-field-container {
    width: 100%;
    margin: 0;
    position: relative;
}

.input-field {
    margin: 0;
}

.show-password {
    z-index: 99;
    position: absolute;
    top: 15px;
    right: 10px;
    color: var(--custom-defaultblue);
}

.show-password:hover {
    cursor: pointer;
    color: var(--custom-darkblue);
}

.forgot-password-link {
    color: var(--uiContent-accent, #0342C9);
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-body-large, 16px) / var(--font-lineHeight-body-large, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.new-password-container {
    width: 100%;
    gap: var(--1, 8px);
    display: flex;
    flex-direction: column;
}

/* Password conditions */

.password-conditions {
    overflow: hidden;
    color: var(--uiContent-neutral, #575966);
    text-overflow: ellipsis;
    font: var(--font-fontWeight-medium, 500) var(--font-fontSize-uiControlText-medium, 14px) / var(--font-lineHeight-uiControlText-medium, 18px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
    margin-top: 8px;
}

.conditions-title {
    overflow: hidden;
    color: var(--uiContent-emphasized, #272727);
    text-overflow: ellipsis;
    font: var(--font-fontWeight-semiBold, 600) var(--font-fontSize-uiControlText-medium, 14px) / var(--font-lineHeight-uiControlText-medium, 18px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.conditions-title-container {
    display: flex;
    padding: var(--spacing-padding-small, 8px) var(--spacing-padding-medium, 16px);
    align-items: center;
    gap: var(--spacing-gap-small, 8px);
    align-self: stretch;
}

.condition-list-element-container {
    padding: var(--spacing-padding-small, 8px) var(--spacing-padding-medium, 16px);
    align-self: stretch;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-gap-small, 8px);
}

.condition-list-element-container::before {
    content: "•";
    width: var(--sizing-icon-medium, 24px);
    height: var(--sizing-icon-medium, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.condition-list-element {
    overflow: hidden;
    color: var(--uiContent-neutral, #575966);
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--font-fontWeight-medium, 500) var(--font-fontSize-uiControlText-medium, 14px) / var(--font-lineHeight-uiControlText-medium, 18px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.condition-list-element::before,
.condition-list-element-container::before {
    color: var(--uiContent-neutral, #575966);
    font-size: 14px;
}

.condition-list-element-container.valid-condition::before {
    color: var(--uiContent-success, #2D7B58);
    font-family: 'Material Icons';
    content: 'done';
}

.condition-list-element-container.valid-condition .condition-list-element {
    overflow: hidden;
    color: var(--uiContent-success, #2D7B58);
    text-overflow: ellipsis;
    font-family: var(--font-fontFamily-default, "Noto Sans");
    font-size: var(--font-fontSize-uiControlText-medium, 14px);
    font-style: normal;
    font-weight: var(--font-fontWeight-medium, 500);
    line-height: var(--font-lineHeight-uiControlText-medium, 18px);
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.condition-list {
    margin-bottom: 0;
    padding: 0;
}

/* Create password back button */

.create-password-back-button-container {
    display: flex;
    height: var(--sizing-uiControl-height-medium, 40px);
    padding: 0 var(--spacing-padding-medium, 16px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.create-password-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--custom-defaultblue);
    border: none;
    background-color: transparent;
}

.create-password-back-button-form {
    display: flex;
    align-items: start;
    align-self: start;
    justify-content: flex-start;
    position: absolute;
    top: 32px;
    left: 28px;
    margin-bottom: 20px;
}

.create-password-error-feedback {
    color: var(--mdb-form-invalid-color);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    margin-top: -30px;
}

.create-password-error-feedback i {
    font-size: 20px;
    margin-right: 7px;
}

/* --- Layout helpers --- */

.request-account-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
}

.link {
    color: var(--uiContent-accent, #0342C9);
    text-decoration: underline;
}

.request-account-divider {
    margin-top: var(--7, 48px);
}

.m-top-large {
    margin-top: var(--spacing-gap-large, 24px);
}

.m-top-xlarge {
    margin-top: var(--spacing-gap-xLarge, 32px);
}

.m-top-1 {
    margin-top: var(--1, 8px);
}

.back-to-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.large-gap-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-gap-large, 24px);
    align-self: stretch;
}

.vertical-little-gap-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.position-relative {
    position: relative;
}

.form-check {
    padding-left: 0;
}

.no-undernline {
    text-decoration: none;
}

.language-select-form {
    min-width: 220px;
}

/* --- Accordion --- */

.accordion-item {
    border-radius: 0;
    background: var(--uiSurface-interactive, #FFF);
    box-shadow: var(--elevation-x-0, 0) var(--elevation-y-100, 2px) var(--elevation-blur-100, 4px) var(--elevation-spread-100, -1px) var(--uiSurface-effect-shadow, rgba(10, 34, 113, 0.16));
}

.accordion {
    --mdb-accordion-btn-color: var(--uiContent-emphasized, #272727);
    --mdb-accordion-active-color: var(--uiContent-emphasized, #272727);
    --mdb-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230342C9' d='M11.9969 14.975C11.8635 14.975 11.7385 14.9542 11.6219 14.9125C11.5052 14.8709 11.3969 14.8 11.2969 14.7L6.69688 10.1C6.51354 9.91672 6.42188 9.68338 6.42188 9.40005C6.42188 9.11672 6.51354 8.88338 6.69688 8.70005C6.88021 8.51672 7.11354 8.42505 7.39688 8.42505C7.68021 8.42505 7.91354 8.51672 8.09688 8.70005L11.9969 12.6L15.8969 8.70005C16.0802 8.51672 16.3135 8.42505 16.5969 8.42505C16.8802 8.42505 17.1135 8.51672 17.2969 8.70005C17.4802 8.88338 17.5719 9.11672 17.5719 9.40005C17.5719 9.68338 17.4802 9.91672 17.2969 10.1L12.6969 14.7C12.5969 14.8 12.4885 14.8709 12.3719 14.9125C12.2552 14.9542 12.1302 14.975 11.9969 14.975Z'/%3E%3C/svg%3E");
    --mdb-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230342C9' d='M11.9969 14.975C11.8635 14.975 11.7385 14.9542 11.6219 14.9125C11.5052 14.8709 11.3969 14.8 11.2969 14.7L6.69688 10.1C6.51354 9.91672 6.42188 9.68338 6.42188 9.40005C6.42188 9.11672 6.51354 8.88338 6.69688 8.70005C6.88021 8.51672 7.11354 8.42505 7.39688 8.42505C7.68021 8.42505 7.91354 8.51672 8.09688 8.70005L11.9969 12.6L15.8969 8.70005C16.0802 8.51672 16.3135 8.42505 16.5969 8.42505C16.8802 8.42505 17.1135 8.51672 17.2969 8.70005C17.4802 8.88338 17.5719 9.11672 17.5719 9.40005C17.5719 9.68338 17.4802 9.91672 17.2969 10.1L12.6969 14.7C12.5969 14.8 12.4885 14.8709 12.3719 14.9125C12.2552 14.9542 12.1302 14.975 11.9969 14.975Z'/%3E%3C/svg%3E");
    --mdb-accordion-btn-padding-x: var(--spacing-padding-medium, 16px);
    --mdb-accordion-btn-padding-y: var(--spacing-padding-semiMedium, 12px);
}

.forgot-password-form-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-gap-large, 24px);
    align-self: stretch;
}

.didnt-receive-email-accordion-body {
    color: var(--uiContent-emphasized, #272727);
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-body-large, 16px) / var(--font-lineHeight-body-large, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
    padding: var(--spacing-padding-semiMedium, 12px) var(--spacing-padding-medium, 16px) var(--spacing-padding-medium, 16px) var(--spacing-padding-medium, 16px);
}

.didnt-receive-email-accordion-body-text-container {
    display: flex;
    gap: 4px;
    margin-bottom: 1rem;
}

.support-list {
    margin-top: 1rem;
}

/* --- Phone input MFA --- */

.phoneinputmfa-suggestion-msg,
.twofactorcode-suggestion-msg {
    position: absolute;
    display: block;
    width: auto;
    padding-top: 5px;
    margin-left: 10px;
    overflow: hidden;
    color: var(--uiContent-neutral, #575966);
    text-overflow: ellipsis;
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-uiControlText-small, 12px) / var(--font-lineHeight-uiControlText-small, 14px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.request-new-code-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* --- Close button --- */

.btn-close-container {
    display: flex;
    min-width: var(--sizing-minInteractiveTarget, 24px);
    min-height: var(--sizing-minInteractiveTarget, 24px);
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-close {
    --mdb-btn-close-opacity: 1;
    --mdb-btn-close-hover-opacity: 1;
    --mdb-btn-close-color: var(--uiContent-accent);
    --mdb-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M6.575 7.975L1.675 12.875C1.49167 13.0583 1.25833 13.15 0.975 13.15C0.691667 13.15 0.458333 13.0583 0.275 12.875C0.0916667 12.6917 0 12.4583 0 12.175C0 11.8917 0.0916667 11.6583 0.275 11.475L5.175 6.575L0.275 1.675C0.0916667 1.49167 0 1.25833 0 0.975C0 0.691667 0.0916667 0.458333 0.275 0.275C0.458333 0.0916667 0.691667 0 0.975 0C1.25833 0 1.49167 0.0916667 1.675 0.275L6.575 5.175L11.475 0.275C11.6583 0.0916667 11.8917 0 12.175 0C12.4583 0 12.6917 0.0916667 12.875 0.275C13.0583 0.458333 13.15 0.691667 13.15 0.975C13.15 1.25833 13.0583 1.49167 12.875 1.675L7.975 6.575L12.875 11.475C13.0583 11.6583 13.15 11.8917 13.15 12.175C13.15 12.4583 13.0583 12.6917 12.875 12.875C12.6917 13.0583 12.4583 13.15 12.175 13.15C11.8917 13.15 11.6583 13.0583 11.475 12.875L6.575 7.975Z' fill='%230342C9'/%3E%3C/svg%3E");
    width: 24px;
    height: var(--sizing-icon-medium, 24px);
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

.btn-close:hover {
    color: var(--uiContent-accent)
}

/* --- Clinic selection --- */

.choose-clinic-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.checkbox-group-preview label.clinic-selection-label {
    color: var(--uiContent-accent, #0342C9);
}

/* --- Banner --- */

.banner {
    display: flex;
    padding: 6px 16px;
    align-items: flex-start;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

.banner--info {
    color: white;
    background-color: #0149b5;
}

.banner__icon {
    display: flex;
    padding: 7px 12px 7px 0px;
    align-items: flex-start;
}

.banner__icon-symbol {
    font-size: 22px;
    width: 22px;
}

.banner__content {
    display: flex;
    padding: 8px 0;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

.banner__title {
    margin: 0;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
    margin-bottom: 5.6px;
    margin-top: -2px;
    font-weight: 700;
}

.banner__message {
    margin: 0;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20.02px;
}

/* --- Misc --- */

.tooltip-inner {
    color: var(--uiContent-inverse, #FFF);
    font-family: var(--font-fontFamily-default, "Noto Sans");
    font-size: var(--font-fontSize-body-medium, 14px);
    font-style: normal;
    font-weight: var(--font-fontWeight-regular, 400);
    line-height: var(--font-lineHeight-body-medium, 20px);
    /* 142.857% */
    letter-spacing: var(--font-letterSpacing-normal, 0);

    display: flex;
    padding: var(--spacing-padding-small, 8px) var(--spacing-padding-medium, 16px);
    align-items: center;
    border-radius: var(--radius-medium, 12px);
    background: var(--uiSurface-overlay-tooltipBackground, rgba(87, 89, 102, 0.80));
}


.cancel-box {
    display: flex;
    font-family: Arial;
    line-height: 24px;
    font-weight: 700;
}

.cancel-box-span {
    margin-left: 8px;
}

.required-field-asterisk {
    color: var(--mdb-form-invalid-color);
}

.btn.btn-link-custom {
    padding: 0px;
    text-transform: lowercase;
    font-size: medium;
    color: var(--custom-defaultblue);
    width: auto;
}

.btn-link-custom:hover {
    background-color: unset !important;
}

a {
    color: var(--custom-defaultblue);
    text-decoration: none;
}

a.underlined {
    text-decoration: underline;
}

.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    border-radius: 5px;
}

/* --- Country/Phone flag --- */

.iti__flag {
    background-image: url('~/assets/auth-assets/img/flags.png');
}

@media (min-resolution: 2x) {
    .iti__flag {
        background-image: url('~/assets/auth-assets/img/flags@2x.png');
    }
}

.iti__country-container {
    top: -1px;
}

.iti--inline-dropdown div.iti__dropdown-content {
    border-radius: var(--radius-large, 16px);
    border: var(--sizing-stroke-light, 0.5px) solid var(--uiStroke-neutral, #C9D3DE);
    background: var(--uiSurface-interactive, #FFF);
    box-shadow: var(--elevation-x-0, 0) var(--elevation-y-300, 6px) var(--elevation-blur-300, 6px) var(--elevation-spread-300, -1px) var(--uiSurface-effect-shadow, rgba(10, 34, 113, 0.30));
    padding: var(--spacing-padding-small, 8px);
    z-index: 1000;
    margin-top: 6px;
}

.iti__country {
    display: flex;
    padding: var(--spacing-padding-small, 8px) var(--spacing-padding-medium, 16px);
    align-items: center;
    gap: var(--spacing-gap-small, 8px);
    align-self: stretch;
    overflow: hidden;
    color: var(--uiContent-accent, #0342C9);
    border-radius: var(--radius-medium, 12px);
}

.iti__country.iti__highlight {
    --iti-hover-color: var(--uiControl-outlined-hover, #EDF2FC);
    color: var(--uiContent-accentIntense, #0033A0);
}

/* --- Disclaimer / Privacy Policy --- */

.disclaimer-document-content-modal .modal-dialog {
    max-width: 90vw;
}

.disclaimer-document-content-modal .modal-content {
    overflow-x: hidden;
}

.disclaimer-document-content-modal .modal-body {
    overflow-x: hidden !important;
}

.disclaimer-document-content-modal .document-content,
.privacy-policy-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.disclaimer-document-content-modal .document-content table,
.privacy-policy-content table {
    max-width: 100% !important;
    word-wrap: break-word !important;
}

.disclaimer-document-content-modal .document-content img,
.privacy-policy-content img {
    max-width: 100% !important;
    height: auto !important;
}

.disclaimer-document-content-modal .document-content pre,
.privacy-policy-content pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-x: hidden !important;
}

.disclaimer-document-content-modal .document-content *,
.privacy-policy-content * {
    word-break: normal !important;
    hyphens: auto !important;
}

/* --- Session error --- */

.session-error-container {
    display: flex;
    flex-direction: column;
    margin: auto;
    padding-left: 50px;
    padding-right: 50px;
}

.session-error-img {
    width: 30%;
    margin: auto;
}

.session-error-title {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    margin-top: 40px;
    font-size: 24px;
    font-weight: 700;
    line-height: 133%;
    color: #000;
}

.session-error-description {
    margin: auto;
    width: 50%;
    font-size: 16px;
    line-height: 150%;
    color: #000;
    text-align: center;
}


/* =============================================================================
   3. BUTTONS
   ============================================================================= */

/* --- Size --- */

.button-medium {
    height: var(--sizing-uiControl-height-medium);
    padding: 0 var(--spacing-padding-medium);
    font-size: var(--font-fontSize-uiControlText-medium);
    font-style: normal;
    font-weight: var(--font-fontWeight-semiBold);
    line-height: var(--font-lineHeight-uiControlText-medium);
    border-radius: var(--radius-round);
}

.btn {
    text-transform: none;
    width: 100%;
    letter-spacing: var(--font-letterSpacing-normal);
}

/* --- Primary button --- */

.primary-button {
    --mdb-btn-color: var(--mdb-btn-primary-color);
    --mdb-btn-bg: var(--mdb-btn-primary-bg);
    --mdb-btn-border-color: var(--mdb-btn-primary-border-color);

    --mdb-btn-hover-color: var(--mdb-btn-primary-hover-color);
    --mdb-btn-hover-bg: var(--mdb-btn-primary-hover-bg);
    --mdb-btn-hover-border-color: var(--mdb-btn-primary-hover-border-color);

    --mdb-btn-focus-color: var(--mdb-btn-primary-focus-color);
    --mdb-btn-focus-bg: var(--mdb-btn-primary-focus-bg);
    --mdb-btn-focus-shadow-rgb: 120, 163, 255;

    --mdb-btn-active-color: var(--mdb-btn-primary-active-color);
    --mdb-btn-active-bg: var(--mdb-btn-primary-active-bg);
    --mdb-btn-active-border-color: var(--mdb-btn-primary-active-border-color);
    --mdb-btn-active-shadow: var(--mdb-btn-primary-active-shadow);

    --mdb-btn-disabled-color: var(--mdb-btn-primary-disabled-color);
    --mdb-btn-disabled-bg: var(--mdb-btn-primary-disabled-bg);
    --mdb-btn-disabled-border-color: var(--mdb-btn-primary-disabled-border-color);
    --mdb-btn-disabled-shadow: var(--mdb-btn-primary-disabled-shadow);

    --mdb-btn-box-shadow: var(--mdb-btn-primary-box-shadow);
}

.primary-button:disabled {
    box-shadow: none;
}

.btn.primary-button:focus,
.btn.primary-button:focus-visible {
    border: var(--sizing-stroke-strong, 2px) solid var(--uiStroke-focused, #78A3FF);
}

.btn.primary-button:active,
.btn.primary-button:active:focus,
.btn.primary-button:active:focus-visible,
.btn.primary-button.active {
    border-color: transparent;
    box-shadow: none;
    background-color: var(--uiControl-contained-pressed, #0A2271);
}

/* --- Secondary button --- */

.btn.secondary-button {
    --mdb-btn-color: var(--mdb-btn-secondary-color);
    --mdb-btn-bg: var(--mdb-btn-secondary-bg);

    --mdb-btn-hover-color: var(--mdb-btn-secondary-hover-color);
    --mdb-btn-hover-bg: var(--mdb-btn-secondary-hover-bg);

    --mdb-btn-focus-color: var(--mdb-btn-secondary-focus-color);
    --mdb-btn-focus-bg: var(--mdb-btn-secondary-focus-bg);

    --mdb-btn-active-color: var(--mdb-btn-secondary-active-color);
    --mdb-btn-active-bg: var(--mdb-btn-secondary-active-bg);
    --mdb-btn-active-shadow: var(--mdb-btn-secondary-active-shadow);

    --mdb-btn-disabled-color: var(--mdb-btn-secondary-disabled-color);
    --mdb-btn-disabled-bg: var(--mdb-btn-secondary-disabled-bg);
    --mdb-btn-disabled-shadow: var(--mdb-btn-secondary-disabled-shadow);

    --mdb-btn-box-shadow: var(--mdb-btn-secondary-box-shadow);

    border: var(--sizing-stroke-light, 0.5px) solid var(--mdb-btn-secondary-border-color);
}

.btn.secondary-button:hover {
    border: var(--sizing-stroke-light, 0.5px) solid var(--mdb-btn-secondary-hover-border-color);
    background: var(--mdb-btn-secondary-hover-bg);
}

.btn.secondary-button:disabled {
    box-shadow: none;
}

.btn.secondary-button:focus {
    border: var(--sizing-stroke-strong, 2px) solid var(--mdb-btn-secondary-focus-border-color);
}

.btn.secondary-button:focus,
.btn.secondary-button:active,
.btn.secondary-button:active:focus,
.btn.secondary-button:active:focus-visible,
.btn.secondary-button.active {
    border: var(--sizing-stroke-light, 0.5px) solid var(--mdb-btn-secondary-active-border-color);
    box-shadow: none;
    background-color: var(--mdb-btn-secondary-active-bg);
}

.btn.width-auto {
    width: auto;
}


/* =============================================================================
   4. FORM CONTROLS
   ============================================================================= */

.form-control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--spacing-padding-small, 8px) var(--spacing-padding-semiMedium, 12px);
    overflow: hidden;
    color: var(--uiContent-emphasized);
    text-overflow: ellipsis;
    font: var(--font-fontWeight-medium) 1em / 1.5 var(--font-fontFamily-default);
    letter-spacing: var(--font-letterSpacing-normal);
    border: 0;
    background: var(--uiControl-outlined-enabled);
}

.form-control-large {
    height: var(--sizing-uiControl-height-xLarge, 56px);
    min-height: var(--sizing-minInteractiveTarget, 24px);
    font-size: var(--font-fontSize-body-large);
    line-height: var(--font-lineHeight-body-large);
    border-radius: var(--radius-large, 16px);
}

.form-control:focus,
.form-control.active {
    box-shadow: none;
}

.form-control.active:not(:focus) {
    background: var(--uiControl-outlined-enabled, #FFF);
}

.form-control:hover:not(:focus):not(:disabled):not([readonly]):not(.is-invalid):not(.input-validation-error) {
    background: var(--uiControl-outlined-hover);
}

.form-outline .form-control-large~.form-label {
    padding: 0;
    color: var(--uiContent-neutral, #575966);
    background-color: transparent;
}

.form-outline .form-control.form-control-large~.form-label {
    line-height: var(--sizing-uiControl-height-xLarge);
}

.form-outline .form-control~.form-notch div {
    border-color: var(--uiStroke-neutral);
    border-width: var(--sizing-stroke-light);
}

.form-outline .form-control:hover:not(:focus):not(:disabled):not([readonly]):not(.is-invalid):not(.input-validation-error)~.form-label {
    color: var(--uiContent-accentIntense, #0033A0);
}

.form-outline .form-control:hover:not(:focus):not(:disabled):not([readonly]):not(.is-invalid):not(.input-validation-error)~.form-notch div {
    border-color: var(--uiStroke-accent, #0342C9);
    border-width: var(--sizing-stroke-light, 0.5px);
}

.form-outline .form-control.active:hover:not(:focus):not(:disabled):not([readonly]):not(.is-invalid):not(.input-validation-error)~.form-notch .form-notch-middle {
    border-top-color: transparent;
}

.form-outline .form-control.form-control-large~.form-notch .form-notch-leading {
    width: var(--radius-large);
    min-width: var(--radius-large);
    border-radius: var(--radius-large) 0 0 var(--radius-large);
}

.form-outline .form-control.form-control-large~.form-notch .form-notch-trailing {
    border-radius: 0 var(--radius-large) var(--radius-large) 0;
}

.form-outline .form-control:focus~.form-label,
.form-control.active:focus~.form-label {
    color: var(--uiContent-accent, #0342C9);
}

.form-outline .form-control:focus~.form-notch .form-notch-leading,
.form-outline .form-control:focus~.form-notch .form-notch-middle,
.form-outline .form-control:focus~.form-notch .form-notch-trailing,
.form-outline .form-control.active:focus~.form-notch .form-notch-leading,
.form-outline .form-control.active:focus~.form-notch .form-notch-middle,
.form-outline .form-control.active:focus~.form-notch .form-notch-trailing {
    border-color: var(--uiStroke-accent, #0342C9);
    border-width: var(--sizing-stroke-medium, 1px);
}

.form-outline .form-control:focus~.form-notch .form-notch-leading,
.form-outline .form-control.active:focus~.form-notch .form-notch-leading {
    box-shadow: -1px 0 0 0 var(--uiStroke-accent, #0342C9), 0 1px 0 0 var(--uiStroke-accent, #0342C9), 0 -1px 0 0 var(--uiStroke-accent, #0342C9);
}

.form-outline .form-control:focus~.form-notch .form-notch-middle,
.form-outline .form-control.active:focus~.form-notch .form-notch-middle {
    box-shadow: 0 1px 0 0 var(--uiStroke-accent, #0342C9);
    border-top: 1px solid rgba(0, 0, 0, 0);
}

.form-outline .form-control:focus~.form-notch .form-notch-trailing,
.form-outline .form-control.active:focus~.form-notch .form-notch-trailing {
    box-shadow: 1px 0 0 0 var(--uiStroke-accent, #0342C9), 0 -1px 0 0 var(--uiStroke-accent, #0342C9), 0 1px 0 0 var(--uiStroke-accent, #0342C9);
}

/* Disabled state */

.form-outline .form-control:disabled,
.form-outline .form-control.disabled {
    color: var(--uiContent-subtle);
    background: var(--uiControl-outlined-disabled);
    cursor: not-allowed;
}

.form-outline .form-control:disabled~.form-label,
.form-outline .form-control.disabled~.form-label {
    color: var(--uiContent-subtle);
}

.form-outline .form-control:disabled~.form-notch div,
.form-outline .form-control.disabled~.form-notch div {
    border-color: var(--uiStroke-disabled);
    box-shadow: none;
}

.form-outline .form-control:disabled.active~.form-notch .form-notch-middle,
.form-outline .form-control.disabled.active~.form-notch .form-notch-middle,
.form-outline input.form-control[readonly].active~.form-notch .form-notch-middle,
.form-outline input.form-control:read-only.active~.form-notch .form-notch-middle,
.form-outline textarea.form-control[readonly].active~.form-notch .form-notch-middle,
.form-outline textarea.form-control:read-only.active~.form-notch .form-notch-middle {
    border-top-color: transparent;
}

/* Read-only state */

.form-outline input.form-control[readonly],
.form-outline input.form-control:read-only,
.form-outline textarea.form-control[readonly],
.form-outline textarea.form-control:read-only {
    color: var(--uiContent-emphasized);
    background: var(--uiControl-outlined-readonly);
    cursor: default;
}

.form-outline input.form-control[readonly]~.form-label,
.form-outline input.form-control:read-only~.form-label,
.form-outline textarea.form-control[readonly]~.form-label,
.form-outline textarea.form-control:read-only~.form-label {
    color: var(--uiContent-subtle);
}

.form-outline input.form-control[readonly]~.form-notch div,
.form-outline input.form-control:read-only~.form-notch div,
.form-outline textarea.form-control[readonly]~.form-notch div,
.form-outline textarea.form-control:read-only~.form-notch div {
    border-color: var(--uiStroke-readonly);
    box-shadow: none;
}

/* Invalid / validation error state */

.was-validated .form-control:invalid,
.form-control.is-invalid,
.form-control.input-validation-error {
    color: var(--uiContent-emphasized);
    background: var(--uiControl-outlined-enabled);
}

.was-validated .form-outline .form-control:invalid~.form-label,
.form-outline .form-control.is-invalid~.form-label,
.form-outline .form-control.input-validation-error~.form-label {
    color: var(--uiContent-error, #B51A36);
}

.was-validated .form-outline .form-control:invalid~.form-notch div,
.form-outline .form-control.is-invalid~.form-notch div,
.form-outline .form-control.input-validation-error~.form-notch div {
    border-color: var(--uiStroke-error, #FD4E57);
    border-width: var(--sizing-stroke-medium, 1px);
}

.was-validated .form-outline .form-control:invalid~.invalid-feedback,
.form-outline .form-control.is-invalid~.invalid-feedback,
.form-outline .form-control.input-validation-error~.invalid-feedback {
    overflow: hidden;
    display: flex;
}

.invalid-feedback {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    margin: 0;
    color: var(--uiContent-error, #B51A36);
    text-overflow: ellipsis;
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-uiControlText-small, 12px) / var(--font-lineHeight-uiControlText-small, 14px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
    display: none;
    align-items: center;
}

.was-validated .form-outline .form-control:invalid:focus~.form-notch .form-notch-leading,
.was-validated .form-outline .form-control:invalid:focus~.form-notch .form-notch-middle,
.was-validated .form-outline .form-control:invalid:focus~.form-notch .form-notch-trailing,
.form-outline .form-control.is-invalid:focus~.form-notch .form-notch-leading,
.form-outline .form-control.is-invalid:focus~.form-notch .form-notch-middle,
.form-outline .form-control.is-invalid:focus~.form-notch .form-notch-trailing,
.form-outline .form-control.input-validation-error:focus~.form-notch .form-notch-leading,
.form-outline .form-control.input-validation-error:focus~.form-notch .form-notch-middle,
.form-outline .form-control.input-validation-error:focus~.form-notch .form-notch-trailing {
    border-color: var(--uiStroke-error, #FD4E57);
    border-width: var(--sizing-stroke-medium, 1px);
}

.was-validated .form-outline .form-control:invalid:focus~.form-notch .form-notch-leading,
.form-outline .form-control.is-invalid:focus~.form-notch .form-notch-leading,
.form-outline .form-control.input-validation-error:focus~.form-notch .form-notch-leading {
    box-shadow: -1px 0 0 0 var(--uiStroke-error, #FD4E57), 0 1px 0 0 var(--uiStroke-error, #FD4E57), 0 -1px 0 0 var(--uiStroke-error, #FD4E57);
}

.was-validated .form-outline .form-control:invalid:focus~.form-notch .form-notch-middle,
.form-outline .form-control.is-invalid:focus~.form-notch .form-notch-middle,
.form-outline .form-control.input-validation-error:focus~.form-notch .form-notch-middle {
    box-shadow: 0 1px 0 0 var(--uiStroke-error, #FD4E57);
    border-top-color: transparent;
}

.was-validated .form-outline .form-control:invalid:focus~.form-notch .form-notch-trailing,
.form-outline .form-control.is-invalid:focus~.form-notch .form-notch-trailing,
.form-outline .form-control.input-validation-error:focus~.form-notch .form-notch-trailing {
    box-shadow: 1px 0 0 0 var(--uiStroke-error, #FD4E57), 0 -1px 0 0 var(--uiStroke-error, #FD4E57), 0 1px 0 0 var(--uiStroke-error, #FD4E57);
}

/* Label transitions */

.form-outline .form-control:focus~.form-label,
.form-outline .form-control.active~.form-label,
.form-outline textarea.form-control.active~.form-label {
    transform: translateX(0.5rem) translateY(-1rem) translateY(0.1rem) scale(0.8);
    line-height: var(--mdb-body-line-height);
    padding-top: 6px;
}

.form-outline .form-control.active:not(:focus)~.form-label,
.form-outline textarea.form-control.active:not(:focus)~.form-label {
    color: var(--uiContent-neutral, #575966);
}

.was-validated .form-control:invalid.active:not(:focus)~.form-label,
.form-control.is-invalid.active:not(:focus)~.form-label,
.form-control.input-validation-error.active:not(:focus)~.form-label {
    color: var(--uiContent-error, #B51A36);
}

.form-control.is-invalid {
    margin-bottom: 28px;
}

/* Form fields layout */

.form-fields {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-gap-large, 24px);
    align-self: stretch;
}

.form-field-container {
    margin-bottom: 0px;
    width: 100%;
}

/* Phone input MFA */

.phoneinputmfa-container {
    position: relative;
}

.phoneinputmfa-container .iti.iti-profile-container {
    display: flex;
    width: 100%;
    min-height: var(--sizing-uiControl-height-xLarge, 56px);
    border-radius: var(--radius-large, 16px);
    border-color: var(--uiStroke-neutral);
    border-width: var(--sizing-stroke-light, 0.5px);
    border-style: solid;
    overflow: hidden;
    background: var(--uiControl-outlined-enabled, #FFF);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    position: static;
}

.phoneinputmfa-container .iti.iti-profile-container:hover:not(:focus-within) {
    background: var(--uiControl-outlined-hover);
    border-color: var(--uiStroke-accent, #0342C9);
}

.phoneinputmfa-container .iti.iti-profile-container:focus-within {
    background: var(--uiControl-outlined-enabled, #FFF);
    border-color: var(--uiStroke-accent, #0342C9);
}

.phoneinputmfa-container .iti.iti-profile-container:has(.phoneinputmfa.is-invalid),
.phoneinputmfa-container .iti.iti-profile-container:has(.phoneinputmfa.input-validation-error),
.phoneinputmfa-container .iti.iti-profile-container:has(.phoneinputmfa.is-invalid):focus-within,
.phoneinputmfa-container .iti.iti-profile-container:has(.phoneinputmfa.input-validation-error):focus-within {
    border-color: var(--uiStroke-error, #FD4E57);
}

.phoneinputmfa-container .iti.iti-profile-container .iti__country-container {
    padding: 4px;
}

.phoneinputmfa-container .iti.iti-profile-container .iti__selected-country {
    border-radius: calc(var(--radius-large, 16px) - 4px);
}

.phoneinputmfa-container .iti.iti-profile-container .iti__selected-country-primary {
    padding: 0 8px 0 12px;
}

.phoneinputmfa-container .iti.iti-profile-container .iti__selected-country-primary:hover,
.phoneinputmfa-container .iti.iti-profile-container .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
    background: transparent;
}

.phoneinputmfa-container .phoneinputmfa.form-control {
    height: var(--sizing-uiControl-height-xLarge, 56px);
    min-height: var(--sizing-minInteractiveTarget, 24px);
    padding: calc(var(--spacing-padding-small, 8px) - 1px) var(--spacing-padding-semiMedium, 12px) calc(var(--spacing-padding-small, 8px) + 1px);
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent;
    box-shadow: none !important;
}

.phoneinputmfa-container .phoneinputmfa.form-control:hover:not(:focus):not(:disabled):not([readonly]):not(.is-invalid):not(.input-validation-error) {
    background: transparent;
}

.phoneinputmfa-container .phoneinputmfa.form-control.is-invalid:focus,
.phoneinputmfa-container .phoneinputmfa.form-control.input-validation-error:focus {
    box-shadow: none !important;
}

.phoneinputmfa-container .form-outline .form-notch {
    display: none;
}

.phoneinputmfa-container label {
    position: absolute;
    top: 0;
    left: 100px;
    z-index: 1;
    padding: 0;
    line-height: var(--sizing-uiControl-height-xLarge, 56px);
    color: var(--uiContent-neutral, #575966);
    background: transparent;
    pointer-events: none;
    transition: all 0.2s ease-out;
}

.phoneinputmfa-container label.active,
.phoneinputmfa-container label.hasContent {
    top: 6px;
    left: 0.75rem;
    padding: 0 4px;
    line-height: 20px;
    background: linear-gradient(to bottom, transparent 0%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 100%);
    transform-origin: 0 0;
    transform: translateX(0.5rem) translateY(-1rem) translateY(0.1rem) scale(0.8);
}

.phoneinputmfa-container label.active.is-invalid,
.phoneinputmfa-container label.is-invalid {
    color: var(--uiContent-error, #B51A36);
}


/* =============================================================================
   5. CHECKBOX
   ============================================================================= */

.checkbox-group-preview {
    display: flex;
    align-items: center;
}

.checkbox-input {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    border: 0;
    border-radius: 0;
    background: transparent center / 24px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='mask0_31680_3264' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_31680_3264)'%3E%3Cpath d='M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z' fill='%230342C9'/%3E%3C/g%3E%3C/svg%3E");
    cursor: pointer;
    outline: none;
}

.checkbox-input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='mask0_11365_4523' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_11365_4523)'%3E%3Cpath d='M10.6 13.4L8.45 11.25C8.26667 11.0667 8.03333 10.975 7.75 10.975C7.46667 10.975 7.23333 11.0667 7.05 11.25C6.86667 11.4333 6.775 11.6667 6.775 11.95C6.775 12.2333 6.86667 12.4667 7.05 12.65L9.9 15.5C10.1 15.7 10.3333 15.8 10.6 15.8C10.8667 15.8 11.1 15.7 11.3 15.5L16.95 9.85C17.1333 9.66667 17.225 9.43333 17.225 9.15C17.225 8.86667 17.1333 8.63333 16.95 8.45C16.7667 8.26667 16.5333 8.175 16.25 8.175C15.9667 8.175 15.7333 8.26667 15.55 8.45L10.6 13.4ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z' fill='%230342C9'/%3E%3C/g%3E%3C/svg%3E");
}

.checkbox-container {
    display: flex;
    min-height: var(--sizing-minInteractiveTarget, 24px);
    padding: var(--spacing-padding-small, 8px);
    justify-content: center;
    align-items: center;
}

.checkbox-group-preview label {
    color: var(--uiContent-neutral, #575966);
}


/* =============================================================================
   6. RADIO
   ============================================================================= */

.radio-group-preview {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: hidden;
}

.radio-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    cursor: pointer;
}

.radio-icon-group {
    display: flex;
    min-height: var(--sizing-minInteractiveTarget, 24px);
    padding: var(--spacing-padding-small, 8px);
    justify-content: center;
    align-items: center;
}

.radio-icon {
    display: flex;
    width: var(--sizing-uiControl-height-xSmall, 24px);
    height: var(--sizing-icon-medium, 24px);
    justify-content: center;
    align-items: center;
}

.radio-icon-group .radio-icon-checked {
    display: none;
    color: var(--uiContent-accent, #0342C9);
}

.radio-icon-group .radio-icon-unchecked {
    display: inline-flex;
    color: var(--uiContent-accent, #0342C9);
}

.radio-label {
    color: var(--uiContent-neutral, #575966);
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-body-large, 16px) / var(--font-lineHeight-body-large, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.form-check-input {
    position: absolute;
    display: none;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.radio-container:has(.form-check-input:checked) .radio-label {
    color: var(--uiContent-accent, #0342C9);
}

.radio-container:has(.form-check-input:checked) .radio-icon-checked {
    display: inline-flex;
}

.radio-container:has(.form-check-input:checked) .radio-icon-unchecked {
    display: none;
}

.radio-container:hover:not(:has(.form-check-input:disabled)) .radio-icon-checked,
.radio-container:hover:not(:has(.form-check-input:disabled)) .radio-icon-unchecked {
    color: var(--uiControl-contained-hover, #0033A0);
}

.radio-container:has(.form-check-input:disabled) {
    cursor: not-allowed;
}

.radio-container:has(.form-check-input:disabled) .radio-label {
    color: var(--uiContent-disabled, #9D9FAA);
}

.radio-container:has(.form-check-input:disabled) .radio-icon-checked,
.radio-container:has(.form-check-input:disabled) .radio-icon-unchecked {
    color: var(--uiContent-disabled, #9D9FAA);
}

.radio-container:focus-within .radio-icon {
    outline: 2px solid var(--uiStroke-focused, #78A3FF);
    border-radius: 50%;
}

.radio-container:has(.form-check-input:disabled) .radio-icon-group {
    box-shadow: none;
}


/* =============================================================================
   7. SELECT
   ============================================================================= */

.nova-select {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow: visible;
}

.item-selected {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    background: var(--uiControl-outlined-enabled, #FFF);
    position: relative;
    min-width: 220px;

    p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.item-selected:hover {
    border: var(--sizing-stroke-light, 0.5px) solid var(--uiStroke-accent, #0342C9);
    background: var(--uiControl-outlined-hover, #EDF2FC);
}

.item-selected:after {
    content: '';
    position: absolute;
    right: 12px;
    border-top: 0.3em solid;
    border-right: 0.3em solid rgba(0, 0, 0, 0);
    border-bottom: 0;
    border-left: 0.3em solid rgba(0, 0, 0, 0);
    color: var(--uiContent-accent);
}

.item-selected.select-arrow-active:after {
    transform: rotate(180deg);
}

.select-arrow-active {
    border-radius: var(--radius-medium, 12px);
    border: var(--sizing-stroke-medium, 1px) solid var(--uiStroke-accent, #0342C9);
    background: var(--uiControl-outlined-enabled, #FFF);
}

.select-text {
    overflow: hidden;
    color: var(--uiContent-emphasized, #272727);
    text-overflow: ellipsis;
    margin: 0;
    font-family: var(--font-fontFamily-default, "Noto Sans");
    font-size: var(--font-fontSize-body-large, 16px);
    font-style: normal;
    font-weight: var(--font-fontWeight-medium, 500);
    line-height: var(--font-lineHeight-body-large, 24px);
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: var(--radius-large, 16px);
    border: var(--sizing-stroke-light, 0.5px) solid var(--uiStroke-neutral, #C9D3DE);
    background: var(--uiSurface-interactive, #FFF);
    box-shadow: var(--elevation-x-0, 0) var(--elevation-y-300, 6px) var(--elevation-blur-300, 6px) var(--elevation-spread-300, -1px) var(--uiSurface-effect-shadow, rgba(10, 34, 113, 0.30));
    padding: var(--spacing-padding-small, 8px);
    z-index: 1000;
}

.select-items.select-hide {
    display: none;
}

.select-items.select-show {
    display: block;
    overflow-y: hidden;
    overflow-x: hidden;
}

.select-items-container {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.option-item {
    display: flex;
    padding: var(--spacing-padding-small, 8px) var(--spacing-padding-medium, 16px);
    align-items: center;
    gap: var(--spacing-gap-small, 8px);
    align-self: stretch;
    overflow: hidden;
}

.option-item:hover {
    border-radius: var(--radius-medium, 12px);
    background: var(--uiControl-outlined-hover, #EDF2FC);

    .item-text {
        overflow: hidden;
        color: var(--uiContent-accentIntense, #0033A0);
        text-overflow: ellipsis;
        font-family: var(--font-fontFamily-default, "Noto Sans");
        font-size: var(--font-fontSize-uiControlText-large, 16px);
        font-style: normal;
        font-weight: var(--font-fontWeight-regular, 400);
        line-height: var(--font-lineHeight-uiControlText-large, 20px);
        letter-spacing: var(--font-letterSpacing-normal, 0);
    }
}

.option-item.highlighted {
    border-radius: var(--radius-medium, 12px);
    background: var(--uiControl-outlined-pressedOrSelected, #E4EBFC);

    .item-text {
        color: var(--uiContent-emphasized, #272727);
        font-family: var(--font-fontFamily-default, "Noto Sans");
        font-size: var(--font-fontSize-uiControlText-large, 16px);
        font-style: normal;
        font-weight: var(--font-fontWeight-medium, 500);
        line-height: var(--font-lineHeight-uiControlText-large, 20px);
        letter-spacing: var(--font-letterSpacing-normal, 0);
    }
}

.item-text-wrapper {
    display: flex;
    min-height: var(--sizing-icon-medium, 24px);
    align-items: center;
    gap: var(--spacing-padding-small, 8px);
    flex: 1 0 0;
}

.item-text-wrapper.indent {
    padding: 0 var(--spacing-padding-medium, 16px);
}

.item-text {
    color: var(--uiContent-accent, #0342C9);
    font-family: var(--font-fontFamily-default, "Noto Sans");
    font-size: var(--font-fontSize-uiControlText-large, 16px);
    font-style: normal;
    font-weight: var(--font-fontWeight-medium, 500);
    line-height: var(--font-lineHeight-uiControlText-large, 20px);
    letter-spacing: var(--font-letterSpacing-normal, 0);
    margin: 0;
}

.nova-select-label {
    position: absolute;
    left: 12px;
    top: 20px;
    transform: translateY(-50%);
    transform-origin: 0 50%;
    pointer-events: none;
    color: var(--uiContent-neutral, #575966);
    font-family: var(--font-fontFamily-default, "Noto Sans");
    font-size: var(--font-fontSize-uiControlText-large, 16px);
    font-style: normal;
    font-weight: var(--font-fontWeight-regular, 400);
    line-height: var(--font-lineHeight-uiControlText-large, 20px);
    letter-spacing: var(--font-letterSpacing-normal, 0);
    transition: top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out, padding 0.2s ease-out;
    white-space: nowrap;
    z-index: 2;
    margin: 0;
}

&:has(.item-selected .select-text) .nova-select-label,
&:has(.item-selected.select-arrow-active) .nova-select-label {
    top: 0;
    transform: translateY(-50%) scale(0.8);
    background: linear-gradient(to bottom,
            transparent 0%,
            transparent 40%,
            white 40%,
            white 50%,
            transparent 50%,
            transparent 100%);
    padding: 0 4px;
}

&:has(.item-selected.select-arrow-active) .nova-select-label {
    color: var(--uiContent-accentIntense, #0033A0);
}

.option-item {
    img {
        display: none;
    }
}

.option-item.default-clinic {
    img {
        display: block;
    }

    .curret-default-label {
        display: block;
        margin-left: auto;
    }
}

.item-selected {
    img {
        display: none;
    }
}

.item-selected.default-clinic {
    img {
        display: block;
    }
}

.curret-default-label {
    display: none;
    margin: 0;
}


.nova-select.select-small {
    min-height: var(--sizing-minInteractiveTarget, 24px);
    padding-top: 10px;

    .item-selected {
        gap: var(--spacing-padding-small, 8px);
        height: var(--sizing-uiControl-height-medium, 40px);
        min-height: var(--sizing-minInteractiveTarget, 24px);
        padding: var(--spacing-padding-small, 8px) var(--spacing-padding-xLarge, 32px) var(--spacing-padding-small, 8px) var(--spacing-padding-semiMedium, 12px);
        border-radius: var(--radius-medium, 12px);
        border: var(--sizing-stroke-light, 0.5px) solid var(--uiStroke-neutral, #C9D3DE);
    }
}

.nova-select.select-large {
    min-height: var(--sizing-minInteractiveTarget, 24px);

    .item-selected {
        height: var(--sizing-uiControl-height-xLarge, 56px);
        min-height: var(--sizing-minInteractiveTarget, 24px);
        padding: var(--spacing-padding-medium, 16px) var(--spacing-padding-xLarge, 32px) var(--spacing-padding-medium, 16px) var(--spacing-padding-semiMedium, 12px);
        border-radius: var(--radius-large, 16px);
        border: var(--sizing-stroke-light, 0.5px) solid var(--uiStroke-neutral, #C9D3DE);
    }
}


/* =============================================================================
   8. MODAL
   ============================================================================= */

.modal {
    --mdb-modal-border-radius: var(--radius-xLarge, 24px);
    --mdb-modal-border-width: var(--sizing-stroke-light, 0.5px);
    --mdb-modal-border-color: var(--uiSurface-static, #F9F9FB);
    --mdb-modal-box-shadow: var(--elevation-x-0, 0) var(--elevation-y-500, 12px) var(--elevation-blur-500, 24px) var(--spread-500, -6px) var(--uiSurface-effect-shadow, rgba(10, 34, 113, 0.16));
}

.modal-header {
    display: flex;
    padding: var(--spacing-padding-semiMedium, 12px) var(--spacing-padding-semiMedium, 12px) var(--spacing-padding-small, 8px) var(--spacing-padding-medium, 16px);
    align-items: center;
    gap: var(--spacing-gap-small, 8px);
    align-self: stretch;
    border: none;
}

.modal-footer {
    display: flex;
    padding: var(--spacing-padding-medium, 16px);
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-gap-medium, 16px);
    align-self: stretch;
    border: none;
    border-radius: 0 0 24px 24px;
    background: var(--uiSurface-static, #F9F9FB);
    box-shadow: var(--elevation-x-0, 0) -2px var(--elevation-blur-100, 4px) var(--elevation-spread-100, -1px) var(--uiSurface-effect-shadow, rgba(10, 34, 113, 0.16));
}

.modal-footer .btn {
    margin: 0;
    width: auto;
}

.modal-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    padding: 0 var(--spacing-padding-medium, 16px) var(--spacing-padding-medium, 16px) var(--spacing-padding-medium, 16px);
    overflow-y: auto;
}

.modal-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: var(--uiSurface-static, #F9F9FB);
}


/* =============================================================================
   9. OPERATION FEEDBACK
   ============================================================================= */

.operation-feedback.actionable {
    box-shadow: var(--elevation-x-0, 0) var(--elevation-y-300, 6px) var(--elevation-blur-300, 6px) var(--elevation-spread-300, -1px) var(--uiSurface-effect-shadow, rgba(10, 34, 113, 0.30));
}

.operation-feedback {
    z-index: 10;
    top: 24px;
    display: flex;
    width: 100%;
    align-items: flex-start;
    padding: var(--spacing-padding-small, 8px) var(--spacing-padding-medium, 16px);
    border-radius: var(--radius-large, 16px);
}

.operation-feedback.inline {
    position: static;
}

.operation-feedback-warning.inline {
    border: var(--sizing-stroke-light, 0.5px) solid var(--uiStroke-neutral, #C9D3DE);
    background: var(--uiSurface-semantic-warning-lightest, #FFFBE0);
}

.operation-feedback-danger.inline {
    border: var(--sizing-stroke-light, 0.5px) solid var(--uiStroke-neutral, #C2C3CC);
    background: var(--uiSurface-semantic-error-lightest, #FFF0F0);
}

.operation-feedback-danger.actionable {
    border-radius: var(--radius-large, 16px);
    background: var(--uiSurface-semantic-error-intense, #B51A36);
    color: var(--uiContent-inverse, #FFF);
}

.operation-feedback-success.actionable {
    border-radius: var(--radius-large, 16px);
    background: var(--uiSurface-semantic-success-intense, #266548);
    box-shadow: var(--elevation-x-0, 0) var(--elevation-y-300, 6px) var(--elevation-blur-300, 6px) var(--elevation-spread-300, -1px) var(--uiSurface-effect-shadow, rgba(10, 34, 113, 0.30));
    color: var(--uiContent-inverse, #FFF);
}

.operation-feedback-info.actionable {
    border-radius: var(--radius-large, 16px);
    background: var(--uiSurface-semantic-info-intense, #155B99);
    color: var(--uiContent-inverse, #FFF);
}

.operation-feedback .alert-icon {
    padding-top: var(--spacing-padding-small, 8px);
    margin-right: 4px;
}

.operation-feedback .alert-icon .material-icons {
    font-size: var(--sizing-icon-small, 20px);
}

.operation-feedback-danger.operation-feedback.inline .alert-icon {
    color: var(--uiContent-error, #B51A36);
}

.operation-feedback .title {
    font: var(--font-fontWeight-semiBold, 600) var(--font-fontSize-title-medium, 14px) / var(--font-lineHeight-title-medium, 20px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.operation-feedback-danger.operation-feedback.inline .title {
    color: var(--uiContent-error, #B51A36);
}

.operation-feedback-danger.operation-feedback.inline .message {
    color: var(--uiContent-neutral, #575966);
}

.operation-feedback-warning.operation-feedback.inline .message {
    color: var(--uiContent-emphasized, #272727);
}

.operation-feedback-warning.operation-feedback.inline .title {
    color: var(--uiContent-emphasized, #272727);
}

.operation-feedback .message p {
    margin: 0;
}

.operation-feedback .message {
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-body-medium, 14px) / var(--font-lineHeight-body-medium, 20px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.operation-feedback .message-container {
    display: flex;
    padding: var(--spacing-padding-small, 8px) 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-gap-xSmall, 4px);
    flex: 1 0 0;
}

.operation-feedback .contact-admin a {
    text-decoration: underline;
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-body-large, 16px) / var(--font-lineHeight-body-large, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.operation-feedback-warning.operation-feedback .contact-admin a {
    color: var(--uiContent-emphasized, #272727);
}

.operation-feedback-danger.operation-feedback .contact-admin a {
    color: var(--uiContent-inverse, #FFF);
}

.close-operation-feedback {
    padding-top: var(--spacing-gap-xSmall, 4px);
}

.close-operation-feedback .btn.secondary-button {
    display: flex;
    width: var(--sizing-uiControl-height-small, 32px);
    height: var(--sizing-uiControl-height-small, 32px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.close-operation-feedback .material-icons {
    color: var(--uiContent-accent, #0342C9);
    font-size: var(--sizing-icon-small, 20px);
}

.operations-feedback-container {
    min-width: 392px;
    max-width: 400px;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 50%;
    transform: translate(50%, 0);
}


/* =============================================================================
   10. COOKIE BANNER
   ============================================================================= */

.cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    right: 0;
    background: var(--uiSurface-interactive, #FFF);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    align-self: stretch;
    z-index: 1000;
}

.cookie-banner-container {
    padding: var(--spacing-gap-large, 24px) var(--spacing-gap-medium, 16px) var(--spacing-gap-large, 24px) var(--spacing-gap-xLarge, 32px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-gap-semiMedium, 12px);
    align-self: stretch;
}

.cookie-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--spacing-gap-xSmall, 4px);
}

.cookie_text_body {
    color: var(--uiContent-neutral, #575966);
    font: var(--font-fontWeight-regular, 400) var(--font-fontSize-body-large, 16px) / var(--font-lineHeight-body-large, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.cookie_title {
    color: var(--uiContent-emphasized, #272727);
    font: var(--font-fontWeight-semiBold, 600) var(--font-fontSize-heading-h6, 18px) / var(--font-lineHeight-heading-h6, 24px) var(--font-fontFamily-default, "Noto Sans");
    letter-spacing: var(--font-letterSpacing-normal, 0);
}

.cookie-buttons-container {
    align-self: stretch;
    display: flex;
    padding: 60px var(--spacing-gap-xLarge, 32px) 0 16px;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}