@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 1. Design tokens and themes */
    :root {
        color-scheme: light;

        --font-family-base: 'Inter', system-ui, sans-serif;
        --font-size-base: 87.5%;
        --font-weight-regular: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;

        --color-page: #f9f9f9;
        --color-surface: #ffffff;
        --color-surface-muted: #efefef;
        --color-text: #222222;
        --color-text-secondary: #717171;
        --color-text-disabled: #b0b0b0;
        /* Legacy aliases remain while customer-specific styles migrate. */
        --color-text-strong: var(--color-text);
        --color-text-muted: var(--color-text-secondary);
        --color-border: #e0e0e0;
        --color-border-strong: #b0b0b0;
        --color-theme: #00cc66;
        --color-on-theme: #ffffff;
        --color-theme-muted: color-mix(in srgb, var(--color-theme) 12%, var(--color-surface));
        --color-scrim: #000000;
        --color-shadow: #262426;
        --color-hover: color-mix(in srgb, var(--color-text) 3.5%, transparent);
        --color-overlay: color-mix(in srgb, var(--color-scrim) 40%, transparent);
        --color-info: #007afe;
        --color-success: #25e47b;
        --color-error: #ff385a;
        --color-focus: #007afe;
        --color-control-shadow: #555555;
        --color-scrollbar-hover: color-mix(in srgb, var(--color-text) 9%, transparent);
        --color-loader-overlay: color-mix(in srgb, var(--color-page) 80%, transparent);

        --radius-modal: 1.43rem;

        --content-max-width: 57.14rem;
        --space-0-5: .36rem;
        --space-1: .71rem;
        --space-2: 1.43rem;
        --space-3: 2.14rem;
        --shadow-navbar: 0 .29rem .57rem color-mix(in srgb, var(--color-shadow) 10%, transparent);
        --shadow-subtle: 0 .07rem .21rem color-mix(in srgb, var(--color-shadow) 10%, transparent);
        --shadow-raised:
            0 .14rem .14rem color-mix(in srgb, var(--color-shadow) 14%, transparent),
            0 .21rem .07rem -.14rem color-mix(in srgb, var(--color-shadow) 12%, transparent),
            0 .07rem .36rem color-mix(in srgb, var(--color-shadow) 20%, transparent);
        --shadow-button-theme:
            inset 1px 1px 0 0 color-mix(in srgb, var(--color-on-theme), transparent 60%),
            0 0 1.5rem color-mix(in srgb, var(--color-theme), transparent 20%);
        --shadow-button-filled:
            inset 1px 1px 0 0 color-mix(in srgb, var(--color-surface), transparent 60%),
            0 0 1.5rem color-mix(in srgb, var(--color-text), transparent 20%);
        --shadow-control-inset: inset 0 .14rem .29rem color-mix(in srgb, var(--color-border-strong), transparent 90%);
    }

    /* A theme is activated explicitly on the root element: data-theme="dark". */
    :root[data-theme="dark"] {
        color-scheme: dark;

        --color-page: #18181b;
        --color-surface: #27272a;
        --color-surface-muted: #3f3f46;
        --color-text: #f4f4f5;
        --color-text-secondary: #a1a1aa;
        --color-text-disabled: rgba(255, 255, 255, .38);
        --color-border: #3f3f46;
        --color-border-strong: #52525b;
        --color-shadow: #000000;
        --color-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --color-overlay: color-mix(in srgb, var(--color-scrim) 65%, transparent);
        --color-info: #5ba7ff;
        --color-success: #35dc82;
        --color-error: #ff6b7f;
        --color-focus: #7cb8ff;
        --color-control-shadow: #000000;
        --color-scrollbar-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --color-loader-overlay: color-mix(in srgb, var(--color-page) 80%, transparent);
        --shadow-subtle: 0 .07rem .21rem color-mix(in srgb, var(--color-shadow) 35%, transparent);
        --shadow-raised:
            0 .14rem .14rem color-mix(in srgb, var(--color-shadow) 40%, transparent),
            0 .21rem .07rem -.14rem color-mix(in srgb, var(--color-shadow) 32%, transparent),
            0 .07rem .36rem color-mix(in srgb, var(--color-shadow) 45%, transparent);
    }

    /* 2. Document foundation and accessibility */
    html {
        height: 100%;
        color: var(--color-text);
        font-family: var(--font-family-base) !important;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-regular);
    }

    body {
        height: 100%;
        max-width: 100%;
        color: var(--color-text);
        background-color: var(--color-page);
        background-repeat: no-repeat;
        background-size: cover;
        font-weight: var(--font-weight-regular);
    }

    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 3px solid color-mix(in srgb, var(--color-focus), transparent 35%);
        outline-offset: 2px;
    }

    .disabled,
    ::placeholder {
        color: var(--color-text-disabled) !important;
    }

    .disabled {
        pointer-events: none;
    }

    /* 3. Typography */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    button,
    input,
    optgroup,
    select,
    textarea {
        font-family: var(--font-family-base) !important;
    }

    input,
    select,
    textarea {
        color: var(--color-text) !important;
        font-weight: var(--font-weight-semibold);
    }

    h1,
    h2,
    h3,
    h4 {
        margin: 0;
        -webkit-font-smoothing: antialiased !important;
    }

    h1,
    .h1 {
        font-size: clamp(2rem, 5vw, 3rem);
        font-weight: var(--font-weight-bold);
        letter-spacing: -.036em;
    }

    h2,
    .h2 {
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: var(--font-weight-bold);
    }

    h3,
    .h3 {
        font-size: 1.5rem;
        font-weight: var(--font-weight-bold);
    }

    h4,
    .h4,
    .heading4 {
        font-size: 1.25rem;
        font-weight: var(--font-weight-medium);
    }

    .body-md {
        font-size: 1rem !important;
    }

    .caption,
    .input-field > label,
    .label,
    .overline,
    label {
        font-size: .875rem;
    }

    .caption,
    .input-field > label,
    .label,
    label {
        font-weight: var(--font-weight-regular);
    }

    .caption {
        letter-spacing: -.017em;
    }

    .overline {
        text-transform: uppercase;
    }

    /* Legacy text style used by default4 and older client views. */
    .button {
        font-size: 1.2rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: -.024em;
    }

    .chip,
    label {
        color: var(--color-text-secondary) !important;
    }

    .chip {
        font-size: 1rem;
        font-weight: 300;
    }

    /* 4. Shared layout */
    .container {
        max-width: var(--content-max-width);
    }

    .navbar .navbar-light {
        box-shadow: var(--shadow-navbar);
    }

    .full-width {
        width: 100%;
    }

    /* 5. Links and buttons */
    a:not(
        .btn,
        .btn-large,
        .btn-small,
        .btn-icon,
        .btn-fab,
        .btn-floating
    ) {
        color: var(--color-text);
        text-decoration: none;
    }

    .link {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, currentColor, transparent 45%);
        text-underline-offset: .2em;
        transition: text-decoration-color .2s ease;
    }

    .link:hover {
        text-decoration-color: currentColor;
    }

    .btn,
    .btn-text {
        font-size: 1.2rem;
    }

    .btn-text {
        font-weight: var(--font-weight-medium);
        letter-spacing: -.2px;
    }

    .btn,
    .btn-large,
    .btn-small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: normal;
        vertical-align: middle;
        font-weight: var(--font-weight-medium);
        letter-spacing: -.01em;
    }

    /* Buttons default to the tonal palette when no color variant is set. */
    .btn,
    .btn-large,
    .btn-small,
    .btn-icon,
    .btn-fab,
    .btn-floating {
        --btn-color: var(--color-text);
        --btn-background: var(--color-surface-muted);
        --btn-hover-color: var(--btn-color);
        --btn-hover-background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface-muted));
        --btn-shadow: none;
        --btn-hover-shadow: var(--btn-shadow);

        position: relative;
        overflow: hidden;
        isolation: isolate;
        color: var(--btn-color);
        background-color: var(--btn-background);
        box-shadow: var(--btn-shadow);
        transition:
            color .2s cubic-bezier(.4, 0, .2, 1),
            background-color .2s cubic-bezier(.4, 0, .2, 1),
            box-shadow .2s cubic-bezier(.4, 0, .2, 1),
            opacity .2s cubic-bezier(.4, 0, .2, 1),
            transform .2s cubic-bezier(.4, 0, .2, 1);
    }

    .btn {
        max-width: 100%;
        height: 3rem;
        padding: 0 1rem;
        border: none;
        border-radius: 2rem;
        text-overflow: ellipsis;
        text-transform: initial;
        white-space: nowrap;
    }

    @media (hover: hover) {
        .btn:not(:disabled, .disabled):hover,
        .btn-large:not(:disabled, .disabled):hover,
        .btn-small:not(:disabled, .disabled):hover,
        .btn-icon:not(:disabled, .disabled):hover,
        .btn-fab:not(:disabled, .disabled):hover,
        .btn-floating:not(:disabled, .disabled):hover {
            color: var(--btn-hover-color);
            background-color: var(--btn-hover-background);
            box-shadow: var(--btn-hover-shadow);
            opacity: 1;
            transform: scale(.95);
        }
    }

    .btn-large {
        height: 4rem;
        padding: 0 3rem;
    }

    .btn-small {
        height: 2rem !important;
        padding: 0 1rem;
        font-size: 1rem;
    }

    .btn-small.rounded {
        padding: 0 var(--space-1);
    }

    .btn-theme {
        --btn-color: var(--color-on-theme);
        --btn-background: var(--color-theme);
        --btn-hover-background: color-mix(in srgb, var(--color-on-theme) 12%, var(--color-theme));
        --shadow-button-theme:
            inset 1px 1px 0 0 color-mix(in srgb, var(--color-on-theme), transparent 60%),
            0 0 1.5rem color-mix(in srgb, var(--color-theme), transparent 20%);
        --btn-shadow: var(--shadow-button-theme);
        --btn-hover-shadow: none;
    }

    .btn-filled {
        --btn-color: var(--color-surface);
        --btn-background: var(--color-text);
        --btn-hover-background: color-mix(in srgb, var(--color-surface) 12%, var(--color-text));
    }

    .btn-tonal {
        --btn-color: var(--color-text);
        --btn-background: var(--color-surface-muted);
        --btn-hover-background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface-muted));
    }

    .btn-flat {
        --btn-color: var(--color-text);
        --btn-background: transparent;
        --btn-hover-background: var(--color-hover);
        --btn-shadow: none;
    }

    .btn-danger {
        --btn-color: var(--color-on-theme);
        --btn-background: var(--color-error);
        --btn-hover-background: color-mix(in srgb, var(--color-on-theme) 12%, var(--color-error));
    }

    /* Emphasis and semantic color classes can be composed in either order. */
    .btn-theme.btn-filled {
        --btn-color: var(--color-on-theme);
        --btn-background: var(--color-theme);
        --btn-hover-background: color-mix(in srgb, var(--color-on-theme) 12%, var(--color-theme));
        --btn-shadow: var(--shadow-button-theme);
        --btn-hover-shadow: none;
    }

    .btn-theme.btn-tonal {
        --btn-color: var(--color-theme);
        --btn-background: color-mix(in srgb, var(--color-theme) 12%, var(--color-surface));
        --btn-hover-background: color-mix(in srgb, var(--color-theme) 20%, var(--color-surface));
        --btn-shadow: none;
        --btn-hover-shadow: none;
    }

    .btn-theme.btn-flat {
        --btn-color: var(--color-theme);
        --btn-background: transparent;
        --btn-hover-background: color-mix(in srgb, var(--color-theme) 8%, transparent);
        --btn-shadow: none;
        --btn-hover-shadow: none;
    }

    .btn-danger.btn-filled {
        --btn-color: var(--color-on-theme);
        --btn-background: var(--color-error);
        --btn-hover-background: color-mix(in srgb, var(--color-on-theme) 12%, var(--color-error));
    }

    .btn-danger.btn-tonal {
        --btn-color: var(--color-error);
        --btn-background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
        --btn-hover-background: color-mix(in srgb, var(--color-error) 20%, var(--color-surface));
    }

    .btn-danger.btn-flat {
        --btn-color: var(--color-error);
        --btn-background: transparent;
        --btn-hover-background: color-mix(in srgb, var(--color-error) 8%, transparent);
        --btn-shadow: none;
        --btn-hover-shadow: none;
    }

    /* Legacy surface variant used by Account2 manager controls. */
    .white-btn {
        color: var(--color-text);
        background-color: var(--color-surface);
    }

    .btn-icon,
    .btn-fab,
    .btn-floating {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        padding: 0;
        border-radius: 50%;
        text-align: center;
    }

    .btn-icon > .material-icons,
    .btn-fab > .material-icons,
    .btn-floating > .material-icons {
        font-size: 1.5rem;
        line-height: 1;
    }

    .btn-fab {
        position: fixed;
        z-index: 997;
        right: var(--space-2);
        bottom: var(--space-2);
    }

    .btn-icon.btn-small,
    .btn-fab.btn-small,
    .btn-floating.btn-small {
        width: 2rem;
        height: 2rem;
    }

    .btn-icon.btn-large,
    .btn-fab.btn-large,
    .btn-floating.btn-large {
        width: 4rem;
        height: 4rem;
    }

    .btn::after,
    .btn-large::after,
    .btn-small::after,
    .btn-icon::after,
    .btn-fab::after,
    .btn-floating::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200%;
        aspect-ratio: 1;
        border-radius: 50%;
        background-color: currentColor;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    .btn:not(:disabled, .disabled):active::after,
    .btn-large:not(:disabled, .disabled):active::after,
    .btn-small:not(:disabled, .disabled):active::after,
    .btn-icon:not(:disabled, .disabled):active::after,
    .btn-fab:not(:disabled, .disabled):active::after,
    .btn-floating:not(:disabled, .disabled):active::after {
        animation: btn-wave .4s ease-out;
    }

    @keyframes btn-wave {
        from {
            opacity: .16;
            transform: translate(-50%, -50%) scale(0);
        }

        to {
            opacity: 0;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    .btn:disabled,
    .btn.disabled,
    .btn-large:disabled,
    .btn-large.disabled,
    .btn-small:disabled,
    .btn-small.disabled,
    .btn-icon:disabled,
    .btn-icon.disabled,
    .btn-fab:disabled,
    .btn-fab.disabled,
    .btn-floating:disabled,
    .btn-floating.disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: .4;
        transform: none;
    }

    .btn-shadow {
        box-shadow: inset 1px 1px 0 0 color-mix(in srgb, var(--color-on-theme), transparent 60%),
            0 0 1.43rem color-mix(in srgb, var(--color-theme), transparent 20%);
    }

    .btn-filled.btn-shadow {
        --btn-shadow: var(--shadow-button-filled);
        --btn-hover-shadow: none;

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

    /* Shared Materialize-era cards used by both admin and client views. */

    .card{
        margin: 0;
        border-radius: 40px;
        padding: 1rem;
    }
    .card .card-image {
        width: 100%;
        vertical-align: middle;
        margin-bottom: 5px;
    }
    .card .card-image img {
        width: auto;
        border-radius: 60px;
        max-height: 60px;
        max-width: 100%;
        display: initial;
    }
    .card .card-image .card-title {
        text-align: center;
        padding: 0px 24px;
        line-height: 60px;
    }
    .card .card-content{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-height: 40px;
        padding: 1rem;
    }
    .card .card-action {
        border: none;
        text-align: center;
        padding: 0;
    }
    .card-content h6{
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-alert {
        display: flex;
        align-items: center;
    }

    .card-alert .card-content {
        flex: 1 1 auto;
        min-width: 0;
    }

    .card-alert .card-content span,
    .card-alert .card-content .material-icons {
        vertical-align: middle;
    }

    .card-alert .card-content .material-icons {
        transform: translateY(-.07rem);
    }

    .card-alert .close {
        position: static;
        flex: 0 0 auto;
        margin-inline-end: var(--space-1);
        transform: none;
        color: var(--color-on-theme);
        background: transparent;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }

    .card-alert--error,
    .card-alert--success {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .card-alert--error {
        color: var(--color-error);
        background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
    }

    .card-alert--success {
        color: var(--color-success);
        background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
    }

    .card-alert--error .card-content,
    .card-alert--error .material-icons,
    .card-alert--error .close,
    .card-alert--success .card-content,
    .card-alert--success .material-icons,
    .card-alert--success .close {
        color: inherit;
    }

    .card-alert--error .card-content,
    .card-alert--success .card-content {
        padding: var(--space-1);
        white-space: normal;
    }

    .card-alert--error .card-content p,
    .card-alert--success .card-content p {
        white-space: normal;
        overflow-wrap: anywhere;
    }



    /* 6. Forms and input helpers */
    .clear-input {
        position: absolute;
        top: 50%;
        right: .5rem;
        margin-top: 0;
        transform: translateY(-50%);
        cursor: pointer;
        color: var(--color-text-secondary);
        font-size: 1.43rem;
    }

    .password-icon {
        position: absolute;
        top: 50%;
        right: var(--space-1);
        margin-top: 0;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 1rem;
    }

    input[type="time"]::-webkit-calendar-picker-indicator {
        display: none;
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 3.43rem;
        height: 3.43rem;
        margin-top: -1.71rem;
        -webkit-appearance: none;
        background: var(--color-surface);
        border-radius: 50%;
        box-shadow: 0 0 .14rem 0 var(--color-control-shadow);
    }

    .autoheight {
        padding-right: 0;
    }

    .icon-input {
        float: left;
        width: calc(100% - 4.29rem);
    }

    .input-action-row {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        width: 100%;
    }

    .input-action-row > .input-field {
        flex: 1;
        float: none;
        min-width: 0;
        width: auto;
    }

    .input-action-row > .btn {
        flex: 0 0 auto;
        margin: 0;
    }

    /* Shared duration input rendered by components/mform/duration. */
    .flex-box {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        border-radius: .71rem;
    }

    .flex-box select {
        background: transparent;
    }

    .flex-box-container {
        display: flex;
        flex: 1;
        width: 100%;
        border-left: 1px solid var(--color-border);
    }

    .flex-box-container.hidden {
        display: none;
    }

    .duration-select {
        appearance: none;
        text-align: center;
    }

    /* 7. Semantic states and colors */
    .theme {
        background-color: var(--color-info);
    }

    .primary,
    .primary:hover {
        color: var(--color-surface);
        background-color: var(--color-text);
    }

    .high-emphasis {
        color: var(--color-text);
    }

    .medium-emphasis {
        color: var(--color-text-secondary);
    }

    .light-grey {
        background-color: var(--color-surface-muted) !important;
    }

    .green {
        background-color: var(--color-success) !important;
    }

    .green-text {
        color: var(--color-success);
    }

    .blue {
        background-color: var(--color-info) !important;
    }

    .blue-text {
        color: var(--color-info);
    }

    .red {
        background-color: var(--color-error);
    }

    .red-text {
        color: var(--color-error);
    }

    .red-border {
        border-color: var(--color-error) !important;
    }

    /* 8. Shared icons and images */
    .material-icons {
        display: inline-block;
        direction: ltr;
        font-family: 'Material Symbols Rounded' !important;
        font-feature-settings: 'liga';
        font-size: 1.71rem;
        font-style: normal;
        font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 200, 'opsz' 48;
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        line-height: 1;
        text-rendering: optimizeLegibility;
        text-transform: none;
        white-space: nowrap;
        word-wrap: normal;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-img {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        margin: -.2em .2em 0 0;
        content: "";
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
    }

    .icon-md {
        width: 1.33rem;
        height: 1.33rem;
    }

    .icon-lg {
        width: 1.8rem;
        height: 1.8rem;
    }

    .size-2 {
        width: 2rem;
        height: 2rem;
    }

    .size-2-2 {
        width: 2.2rem;
        height: 2.2rem;
    }

    .img-arror-left {
        background-image: url('https://storage.googleapis.com/apps-common/icons/arrow.svg');
        transform: rotate(180deg);
    }

    .img-arror-right {
        background-image: url('https://storage.googleapis.com/apps-common/icons/arrow.svg');
    }

    .img-calendar {
        background-image: url('https://storage.googleapis.com/apps-common/icons/calendar.svg');
    }

    .img-avatar {
        background-image: url('https://storage.googleapis.com/apps-common/icons/avatar.svg');
    }

    /* Booking status IDs are mapped to the shared status icon set. */
    .img-status0 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/tbc.svg'); }
    .img-status1 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/done.svg'); }
    .img-status2 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/paid.svg'); }
    .img-status3 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/done.svg'); }
    .img-status4 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/no-show.svg'); }
    .img-status5 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/done.svg'); }
    .img-status6 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/available.svg'); }
    .img-status7 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/booked.svg'); }
    .img-status8 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/paid.svg'); }
    .img-status9 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/unavailable.svg'); }
    .img-status10 { background-image: url('https://storage.googleapis.com/apps-common/icons/statuses/declined.svg'); }

    .cover-photo,
    .profile-photo {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* Google Places Autocomplete appends this dropdown directly under body. */
    .pac-container {
        position: fixed;
        z-index: 99999;
        display: inline-block;
        float: left;
        background-color: var(--color-surface);
    }

    /* 9. Layout and spacing utilities */
    .bold { font-weight: var(--font-weight-medium); }
    .italic { font-style: italic; }
    .capitalize { text-transform: capitalize; }
    .pointer { cursor: pointer; }
    .no-border { border: none !important; }
    .hidden,
    .display-none { display: none !important; }
    .autowidth,
    .width-auto { width: auto !important; }
    .absolute {
        position: absolute;
        z-index: 1200;
        overflow: hidden;
        width: auto;
        max-width: 100%;
        margin-left: .86rem;
        padding-top: var(--space-0-5);
        white-space: nowrap;
        text-overflow: ellipsis;
        background: var(--color-surface);
    }
    .ellipsis {
        overflow: hidden;
        max-width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .sub-header { padding-bottom: var(--space-1); }

    .m0,
    .m-0 { margin: 0; }
    .mb-0 { margin-bottom: 0; }
    .mb-05 { margin-bottom: var(--space-0-5); }
    .mb-1 { margin-bottom: var(--space-1); }
    .mb-2 { margin-bottom: var(--space-2); }
    .ml-1 { margin-left: var(--space-1) !important; }
    .ml-2 { margin-left: var(--space-2); }
    .mr-0 { margin-right: 0 !important; }
    .mr-1 { margin-right: var(--space-1); }
    .mt-0 { margin-top: 0; }
    .mt-05 { margin-top: var(--space-0-5); }
    .mt-1 { margin-top: var(--space-1); }
    .mt-2 { margin-top: var(--space-2); }
    .mt-3 { margin-top: var(--space-3); }

    .p0,
    .p-0 { padding: 0 !important; }
    .p-05 { padding: var(--space-0-5); }
    .p20 {
        padding-right: var(--space-2);
        padding-left: var(--space-2);
    }
    .pb-1 { padding-bottom: var(--space-1); }
    .pb-2 { padding-bottom: var(--space-2); }
    .pl-0 { padding-left: 0; }
    .pl-1 { padding-left: var(--space-1); }
    .pl-2 { padding-left: var(--space-2); }
    .pr-0 { padding-right: 0; }
    .pr-1 { padding-right: var(--space-1); }
    .pr-2 { padding-right: var(--space-2); }
    .pt-1 { padding-top: var(--space-1); }
    .pt-2 { padding-top: var(--space-2); }

    .br-1rem { border-radius: 1rem; }
    .br-10 { border-radius: .71rem; }
    .br-50 { border-radius: 3.57rem; }

    /* 10. Shared scrollbar appearance */
    ::-webkit-scrollbar {
        width: 3px;
        background-color: transparent;
        border-radius: 7.14rem;
    }

    ::-webkit-scrollbar:hover {
        background-color: var(--color-scrollbar-hover);
    }

    ::-webkit-scrollbar-thumb:vertical {
        background: var(--color-border-strong);
        border-radius: 7.14rem;
    }

    ::-webkit-scrollbar-thumb:vertical:active {
        background: var(--color-border-strong);
    }

    /* 11. Responsive visibility */
    @media screen and (min-width: 601px) {
        .hideDesktop, .hide-on-small-and-up, .mobile_element {
            display: none !important;
        }
    }

    @media screen and (max-width: 601px) {
        body {
            background-color: var(--color-surface);
        }
        .desktop_element, .hideMobile {
            display: none;
        }
    }

    /* 12. Reduced-motion accessibility */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }

        .btn,
        .btn-large,
        .btn-small,
        .btn-icon,
        .btn-fab,
        .btn-floating {
            transition: none;
        }

        .btn::after,
        .btn-large::after,
        .btn-small::after,
        .btn-icon::after,
        .btn-fab::after,
        .btn-floating::after {
            animation: none !important;
        }

        .btn:hover,
        .btn-large:hover,
        .btn-small:hover,
        .btn-icon:hover,
        .btn-fab:hover,
        .btn-floating:hover {
            transform: none;
        }
    }

    .no-shadow{
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    .cover-photo{
        background-position:center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 160px;
    }

    .footer-button{
        position: fixed;
        bottom: 20px;
        z-index: 100;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        width: 300px;
        max-width: 60%;
    }

    .loader {
        z-index: 10000;
        text-align: center;
        position: absolute;
        background: var(--color-loader-overlay);
        width: 100%;
        height: 100%;
        padding-top: 40vh;
    }