html, body {
    font-family: var(--rz-text-font-family);
    background-color: var(--color-background-secondary);
    height: 100%;
    margin: 0;
}

:root {
    /* Color styles */
    --color-primary-light: #E6F7F3;
    --color-primary-light-hover: #D9F2ED;
    --color-primary-light-active: #B0E5D9;
    --color-primary: #00AB84;
    --color-primary-hover: #009A77;
    --color-primary-active: #00896A;
    --color-primary-dark: #008063;
    --color-primary-darkhover: #00674F;
    --color-primary-darkactive: #004D3B;
    --color-primary-darker: #003C2E;
    --color-secondary-light: #EDEEF0;
    --color-secondary-light-hover: #E4E6E8;
    --color-secondary-light-active: #C7CAD0;
    --color-secondary-normal: #4A5568;
    --color-secondary-normal-hover: #434D5E;
    --color-secondary-normal-active: #3B4453;
    --color-secondary-dark: #38404E;
    --color-secondary-dark-hover: #2C333E;
    --color-secondary-dark-active: #21262F;
    --color-secondary-darker: #1A1E24;
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-text-white: #FFFFFF;
    --color-base-background: #F8F9FA;
    --color-base-border: #D0D0D0;
    --color-background-primary: #FFFFFF;
    --color-background-secondary: #fbfbfb;
    --color-background-tertiary: #f6fffc;
    --color-background-dark: #2C2C2C;
    --color-success-light: #EAF6EC;
    --color-success-light-hover: #DFF2E3;
    --color-success-light-active: #BCE4C5;
    --color-success-normal: #28A745;
    --color-success-normal-hover: #24963E;
    --color-success-normal-active: #208637;
    --color-success-dark: #1E7D34;
    --color-success-dark-hover: #186429;
    --color-success-dark-active: #124B1F;
    --color-success-darker: #0E3A18;
    --color-warning-light: #FFF9E6;
    --color-warning-light-hover: #FFF6DA;
    --color-warning-light-active: #FFECB2;
    --color-warning-normal: #FFC107;
    --color-warning-normal-hover: #E6AE06;
    --color-warning-normal-active: #CC9A06;
    --color-warning-dark: #BF9105;
    --color-warning-dark-hover: #997404;
    --color-warning-dark-active: #735703;
    --color-warning-darker: #594402;
    --color-danger-light: #FCEBEC;
    --color-danger-light-hover: #FAE1E3;
    --color-danger-light-active: #F4C0C5;
    --color-danger-normal: #DC3545;
    --color-danger-normal-hover: #C6303E;
    --color-danger-normal-active: #B02A37;
    --color-danger-dark: #A52834;
    --color-danger-dark-hover: #842029;
    --color-danger-dark-active: #63181F;
    --color-danger-darker: #4D1318;
    --color-info-light: #E8F6F8;
    --color-info-light-hover: #DCF1F4;
    --color-info-light-active: #B7E2E9;
    --color-info-normal: #17A2B8;
    --color-info-normal-hover: #1592A6;
    --color-info-normal-active: #128293;
    --color-info-dark: #117A8A;
    --color-info-dark-hover: #0E616E;
    --color-info-dark-active: #0A4953;
    --color-info-darker: #083940;
    --color-series-1: #B0E5D9;
    --color-series-2: #F4B19E;
    --color-series-3: #B2C8F4;
    --color-series-4: #D6B7F4;
    --color-series-5: #F1D9B0;
    --color-series-6: #B0EDD9;
    --color-series-7: #F9B0CF;
}


:root {
    --rz-text-font-family: Poppins, sans-serif;
    --rz-base: var(--color-base-background);
    --rz-primary: var(--color-primary);
    --rz-primary-lighter: rgb(230,247,243,0.4);
    --rz-primary-light: var(--color-primary-light);
    --rz-primary-dark: var(--color-primary-dark);
    --rz-primary-darker: var(--color-primary-darker);
    --rz-secondary: var(--color-secondary-normal);
    --rz-secondary-lighter: rbg(237,238,240,0.4);
    --rz-secondary-light: var(--color-secondary-light);
    --rz-secondary-dark: var(--color-secondary-dark);
    --rz-secondary-darker: var(--color-secondary-darker);
    --rz-info: var(--color-info-normal);
    --rz-info-light: var(--color-info-light);
    --rz-info-lighter: rgba(232, 246, 248, 0.4);
    --rz-info-dark: var(--color-info-dark);
    --rz-info-darker: var(--color-info-darker);
    --rz-success: var(--color-success-normal);
    --rz-success-light: var(--color-success-light);
    --rz-success-lighter: rgba(234, 246, 236, 0.4);
    --rz-success-dark: var(--color-success-dark);
    --rz-success-darker: var(--color-success-darker);
    --rz-warning: var(--color-warning-normal);
    --rz-warning-light: var(--color-warning-light);
    --rz-warning-lighter: rgba(255, 249, 230, 0.4);
    --rz-warning-dark: var(--color-warning-dark);
    --rz-warning-darker: var(--color-warning-darker);
    --rz-danger: var(--color-danger-normal);
    --rz-danger-light: var(--color-danger-light);
    --rz-danger-lighter: rgba(252, 235, 236, 0.4);
    --rz-danger-dark: var(--color-danger-dark);
    --rz-danger-darker: var(--color-danger-darker);
    --rz-on-primary: var(--color-text-white);
    --rz-on-primary-light: var(--color-text-white);
    --rz-on-primary-lighter: var(--color-primary-active);
    --rz-on-secondary-lighter: var(--color-secondary-normal-active);
    --rz-on-info-lighter: var(--color-info-normal-active);
    --rz-on-success-lighter: var(--color-success-normal-active);
    --rz-on-warning-lighter: var(--color-warning-normal-active);
    --rz-on-warning: var(--color-text-primary);
    --rz-on-danger-lighter: var(--color-danger-normal-active);
    --rz-body-background-color: var(--color-background-primary);
    /*--rz-dialog-content-padding: 0px;*/
    --rz-series-1: var(--color-series-1);
    --rz-series-2: #ba68c8;
    --rz-series-3: #f06292;
    --rz-series-4: #ff8a65;
    --rz-series-5: #ffee58;
    --rz-series-6: #9ccc65;
    --rz-series-7: #26a69a;
    --rz-series-8: #4fc3f7;
    --rz-series-9: #7f5cce;
    --rz-series-10: #ce93d8;
    --rz-series-11: #f48fb1;
    --rz-series-12: #ffab91;
    --rz-series-13: #fff176;
    --rz-series-14: #aed581;
    --rz-series-15: #4db6ac;
    --rz-series-16: #81d4fa;
    --rz-series-17: #a58cdd;
    --rz-series-18: #e1bee7;
    --rz-series-19: #f8bbd0;
    --rz-series-20: #ffccbc;
    --rz-series-21: #fff59d;
    --rz-series-22: #c5e1a5;
    --rz-series-23: #80cbc4;
    --rz-series-24: #b3e5fc;
    --rz-text-h1-font-size: 1.5rem; /* 24px - Page titles */
    --rz-text-h2-font-size: 1.375rem; /* 22px - Section titles */
    --rz-text-h3-font-size: 1.25rem; /* 20px */
    --rz-text-h4-font-size: 1.125rem; /* 18px */
    --rz-text-h5-font-size: 1rem; /* 16px */
    --rz-text-h6-font-size: 0.875rem; /* 14px */

    --rz-text-subtitle1-font-size: 0.9375rem; /* 15px */
    --rz-text-subtitle2-font-size: 0.875rem; /* 14px */
    --rz-text-body1-font-size: 1rem; /* 16px */
    --rz-text-body2-font-size: 0.875rem; /* 14px */
    --rz-text-caption-font-size: 0.75rem; /* 12px */
    --rz-text-overline-font-size: 0.625rem; /* 10px */

    --rz-text-h6-font-weight: 600;
    --rz-sidebar-toggle-icon-width: 1.5rem;
    --rz-sidebar-toggle-icon-height: 1.5rem;
    --rz-sidebar-toggle-margin-inline-end: 1rem;
    --rz-sidebar-toggle-padding: 0.8125rem;
    --rz-sidebar-toggle-border: none;
    --rz-sidebar-toggle-color: var(--color-text-primary);
    --rz-sidebar-toggle-background-color: transparent;
    --rz-sidebar-toggle-hover-color: var(--color-text-secondary);
    --rz-sidebar-toggle-hover-background-color: var(--rz-primary-light);
    --rz-sidebar-toggle-hover-border-radius: 50%;
    --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus);
    --rz-sidebar-toggle-focus-outline-offset: calc(-1* var(--rz-outline-offset));
    --rz-dropdown-item-selected-color: var(--color-primary);
    --rz-dropdown-item-selected-hover-color: var(--color-primary-active);
    --rz-header-background-color: var(--color-base-background);
    --rz-panel-menu-font-weight: 500;
    --rz-panel-menu-focus-outline: var(--rz-outline-focus);
    --rz-panel-menu-focus-outline-offset: calc(-1* var(--rz-outline-width));
    --rz-panel-menu-item-line-height: 1.5rem;
    --rz-panel-menu-item-padding-block: .5rem;
    --rz-panel-menu-item-padding-inline: 1rem;
    --rz-panel-menu-item-margin-block: 0;
    --rz-panel-menu-item-margin-inline: 0;
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-item-border-radius: 0;
    --rz-panel-menu-item-color: var(--rz-text-title-color);
    --rz-panel-menu-item-background-color: var(--rz-base-background-color);
    --rz-panel-menu-item-hover-color: var(--rz-text-title-color);
    --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.04);
    --rz-panel-menu-item-active-color: var(--color-primary);
    --rz-panel-menu-item-active-background-color: var(--color-background-secondary);
    --rz-panel-menu-item-active-indicator: var(--rz-secondary);
    --rz-panel-menu-item-offset: 0;
    --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition);
    --rz-panel-menu-2nd-level-vertical-offset: 0.5rem;
    --rz-panel-menu-item-2nd-level-padding-block: 0.5rem;
    --rz-panel-menu-item-2nd-level-padding-inline: 1rem 0.5rem;
    --rz-panel-menu-item-2nd-level-margin-block: 0;
    --rz-panel-menu-item-2nd-level-margin-inline: 0.5rem;
    --rz-panel-menu-item-2nd-level-border-radius: var(--rz-border-radius);
    --rz-panel-menu-item-2nd-level-offset: 3rem;
    --rz-panel-menu-item-2nd-level-font-size: calc(var(--rz-body-font-size) * 0.875);
    --rz-panel-menu-item-2nd-level-font-weight: 400;
    --rz-panel-menu-item-2nd-level-color: var(--rz-text-tertiary-color);
    --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-background-color);
    --rz-panel-menu-item-2nd-level-hover-color: var(--rz-text-title-color);
    --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-100);
    --rz-panel-menu-item-2nd-level-active-color: var(--color-primary);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--color-background-secondary);
    --rz-panel-menu-item-2nd-level-active-font-weight: 500;
    --rz-panel-menu-item-3rd-level-color: var(--rz-text-tertiary-color);
    --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-background-color);
    --rz-panel-menu-item-3rd-level-hover-color: var(--rz-text-title-color);
    --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-100);
    --rz-panel-menu-item-3rd-level-active-color: var(--rz-on-primary-lighter);
    --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-primary-lighter);
    --rz-profile-menu-background-color: var(--rz-base-background-color);
    --rz-profile-menu-top-item-background-color: var(--color-base-background);
    --rz-profile-menu-border: none;
    --rz-profile-menu-padding-block: 0.5rem;
    --rz-profile-menu-padding-inline: 1rem;
    --rz-profile-menu-border-radius: var(--rz-border-radius);
    --rz-profile-menu-toggle-button-color: var(--color-text-primary);
    --rz-profile-menu-item-hover-background-color: var(--rz-base-100);
    --rz-profile-menu-item-focus-outline: var(--rz-outline-focus);
    --rz-profile-menu-item-focus-outline-offset: calc(-1* var(--rz-outline-width));
    --rz-profile-menu-item-icon-width: var(--rz-icon-size);
    --rz-profile-menu-item-icon-height: var(--rz-icon-size);
    --rz-profile-menu-item-icon-font-size: var(--rz-icon-size);
    --rz-profile-menu-item-icon-margin-inline: 0 0.5rem;
    --rz-tabs-padding: 1rem 0px;
    --rz-text-body2-color: var(--color-text-secondary);
    --rz-text-overline-color: var(--color-text-muted);
    --rz-switch-background-color: var(--rz-base-400);
    --rz-switch-checked-background-color: var(--rz-primary-light);
    --rz-switch-box-shadow: var(--rz-shadow-1);
    --rz-switch-circle-background-color: var(--rz-text-contrast-color);
    --rz-switch-checked-circle-background-color: var(--rz-primary);
    --rz-switch-focus-outline: var(--rz-outline-focus);
    --rz-switch-focus-outline-offset: var(--rz-outline-offset);
    --rz-pager-numeric-button-selected-background-color: var(--color-primary);
    --rz-notification-padding: 1rem 1.25rem;
    --rz-notification-gap: 0.625rem;
    --rz-notification-icon-margin: 0;
    --rz-notification-container-background-color: var(--rz-white);
    --rz-notification-shadow: none;
    --rz-notification-border-radius: var(--rz-border-radius);
    --rz-notification-success-color: var(--color-text-white);
    --rz-notification-success-background-color: var(--rz-success);
    --rz-notification-success-icon-color: var(--color-text-white);
    --rz-notification-warning-color: var(--color-text-white);
    --rz-notification-warning-background-color: var(--rz-warning);
    --rz-notification-warning-icon-color: var(--color-text-white);
    --rz-notification-error-color: var(--color-text-white);
    --rz-notification-error-background-color: var(--rz-danger);
    --rz-notification-error-icon-color: var(--color-text-white);
    --rz-notification-info-color: var(--color-text-white);
    --rz-notification-info-background-color: var(--rz-info);
    --rz-notification-info-icon-color: var(--color-text-white);
    --rz-layout-background-color: var(--color-background-secondary);
    --rz-datalist-item-margin-inline: unset;
}


.text-primary {
    color: var(--color-text-primary) !important;
}

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

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-white {
    color: var(--color-text-white);
}

.danger-container {
    background-color: var(--color-danger-light);
}

.text-danger {
    color: var(--color-danger-normal);
}


/* Labels styling */
label {
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-text-primary); /* Primary text color */
}

.always-float label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem)
}

/* General styling for input fields and textareas */
input,
input[type="text"],
input[type="date"],
textarea,
.form-control { /* Include .form-control here */
    width: 100%; /* Full width input fields */
    padding: 10px; /* Padding inside the input fields */
    border: 1px solid var(--color-base-border); /* Base border color */
    border-radius: 4px; /* Rounded corners */
    font-size: 16px; /* Font size */
    color: var(--color-text-primary); /* Primary text color */
    background-color: var(--color-background-primary); /* Background color */
    box-sizing: border-box; /* Ensures padding doesn't affect total width */
}

/* Textarea specific styling */
textarea {
    resize: vertical; /* Allow vertical resizing of textareas */
    padding-top: 1.5rem;
}

    /* General focus styling for input fields and textareas */
    input:focus,
    input[type="text"]:focus,
    input[type="date"]:focus,
    textarea:focus,
    .form-control:focus { /* Include .form-control here */
        outline: none; /* Remove default browser outline */
        border-color: var(--color-primary); /* Primary color on focus */
        box-shadow: 0 0 5px rgba(0, 171, 132, 0.2); /* Optional subtle shadow on focus using primary color */
    }

    /* Disabled input fields styling */
    input:disabled,
    input[type="text"]:disabled,
    input[type="date"]:disabled,
    textarea:disabled,
    .form-control:disabled { /* Include .form-control here */
        color: var(--color-text-muted); /* Muted text color for disabled fields */
        cursor: not-allowed; /* Not-allowed cursor for disabled fields */
    }

    /* Readonly input fields styling */
    input:read-only,
    input[type="text"]:read-only,
    input[type="date"]:read-only,
    textarea:read-only,
    .form-control:read-only { /* Include .form-control here */
        color: var(--color-text-secondary); /* Secondary text color for readonly fields */
        cursor: default; /* Default cursor for readonly fields */
    }

/* General checkbox styling */
input[type="checkbox"] {
    display: none; /* Hide the default checkbox */
}

/* Custom checkbox */
.custom-checkbox {
    display: flex; /* Flex layout for alignment */
    align-items: start; /* Center align vertically */
    height: auto; /* Allow height to adjust based on content */
}

    /* Create the custom checkbox appearance */
    .custom-checkbox .checkbox-label {
        position: relative; /* Position relative for absolute children */
        padding-left: 30px; /* Space for the custom checkbox */
        cursor: pointer; /* Pointer cursor on hover */
        user-select: none; /* Prevent text selection */
    }

    /* Custom checkbox indicator */
    .custom-checkbox .checkbox-indicator {
        position: absolute; /* Absolute positioning for the checkbox */
        left: 0; /* Align to the left */
        top: 50%; /* Center vertically */
        transform: translateY(-50%); /* Adjust for vertical centering */
        width: 20px; /* Width of the checkbox */
        height: 20px; /* Height of the checkbox */
        border: 2px solid var(--color-base-border); /* Base border color */
        border-radius: 4px; /* Rounded corners */
        background-color: var(--color-background-primary); /* Background color */
        transition: background-color 0.2s, border-color 0.2s; /* Smooth transitions */
    }

/* Checked state styles */
input[type="checkbox"]:checked + .checkbox-label .checkbox-indicator {
    background-color: var(--color-primary); /* Change background color to primary */
    border-color: var(--color-primary); /* Change border color to primary */
}

    /* Custom checkmark */
    input[type="checkbox"]:checked + .checkbox-label .checkbox-indicator:after {
        content: ''; /* Empty content for the checkmark */
        position: absolute; /* Positioning for the checkmark */
        left: 5px; /* Position inside the checkbox */
        top: 10%; /* Center vertically */
        width: 5px; /* Width of the checkmark */
        height: 10px; /* Height of the checkmark */
        border: solid white; /* Color of the checkmark */
        border-width: 0 2px 2px 0; /* Make a checkmark shape */
        transform: rotate(45deg); /* Rotate to make it look like a checkmark */
    }

/* Hover effect */
.custom-checkbox:hover .checkbox-indicator {
    border-color: var(--color-primary); /* Change border color on hover */
}

/* Disabled checkbox styles */
input[type="checkbox"]:disabled + .checkbox-label .checkbox-indicator {
    background-color: var(--color-base-background); /* Background for disabled */
    border-color: var(--color-text-muted); /* Muted border for disabled */
}

/* Checkmark color for disabled */
input[type="checkbox"]:disabled:checked + .checkbox-label .checkbox-indicator {
    background-color: var(--color-base-background); /* Keep background muted */
}

/* Styling for the label when disabled */
input[type="checkbox"]:disabled + .checkbox-label {
    color: var(--color-text-muted); /* Change text color for disabled label */
    cursor: not-allowed; /* Change cursor to not-allowed */
}


.page-background-primary {
    display: flex;
    background-color: var(--color-primary); /* Primary color for the left section */
}

.split-page {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100vh;
    width: 100vw; /* Ensure it covers full width */
    background: linear-gradient(180deg, rgb(0, 171, 132) 0%, rgb(0, 128, 99) 100%);
    overflow: hidden; /* Prevent any unwanted scrolling */
}

    .split-page .left-section {
        position: relative;
        flex: 1;
        max-width: 40%; /* Ensure it doesn't exceed 40% */
        display: flex;
        flex-direction: column;
        padding: 32px;
        background-color: transparent;
        position: relative;
    }

    .split-page .right-section {
        flex: 1 1 60%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
        /* padding: 32px; */
        border-radius: 48px 0px 0px 0px;
        background-color: var(--color-background-primary);
        min-height: 100%;
        width: 100%;
        overflow-y: auto;
        z-index: 1;
    }

/* Ensure no unwanted margins from body/html */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Responsive: Stack sections vertically on smaller screens */
@media (max-width: 768px) {
    .split-page {
        flex-direction: column;
        height: auto;
    }

        .split-page .left-section {
            max-width: 100%;
            flex: none;
            width: 100%;
            padding: 24px;
        }

        .split-page .right-section {
            flex: none;
            width: 100%;
            border-radius: 0;
            padding: 32px 16px;
        }
}


.logo-container {
    align-items: center;
    align-self: stretch;
    background-color: transparent;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    padding: 32px;
    position: relative;
    width: 100%;
}

    .logo-container .logo {
        background-color: transparent;
        flex: 0 0 auto;
        position: relative;
    }

    .logo-container p {
        align-self: stretch;
        color: var(--color-text-white);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        position: relative;
        text-align: center;
    }

.form-container {
    background-color: var(--color-background-primary);
    align-items: center;
    border-radius: 12px;
    box-shadow: 0px 4px 4px #00000020;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 35px;
    justify-content: center;
    padding: 32px;
    position: relative;
    margin: 32px;
}

    .form-container .form-header {
        margin-bottom: 1.5rem !important;
    }

        .form-container .form-header p {
            color: var(--color-text-secondary)
        }

    .form-container .action-buttons {
        display: flex;
        justify-content: space-between; /* Space between buttons */
        margin-top: 20px; /* Space above the buttons */
        width: 100%;
        gap: 35px;
    }

        .form-container .action-buttons btn {
            width: 100%;
            flex-grow: 1;
        }

.setup-dialog-class {
    min-width: fit-content;
    min-height: fit-content;
}

.setup-dialog-content-class {
    padding: 0px;
}

.page-section {
    background-color: var(--color-background-primary);
    border: 1px solid var(--color-base-border);
    padding: 16px;
    border-radius: 8px;
}

.progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.1); /* Semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Ensure it's above all other elements */
}

    .progress-overlay.hidden {
        display: none;
    }


.metric-card {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

/*.metric-card:not(:first-child) {
        border-left: 1px solid #d0d0d0;
        padding: 0px 16px;
    }*/
.metric-change {
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 5px;
    padding: 0 10px;
    width: fit-content;
    font: 400 12px Roboto, sans-serif;
}

    .metric-change.positive {
        background: #eaf6ec;
        color: #28a745;
    }

    .metric-change.negative {
        background: #fcebec;
        color: #dc3545;
    }


.insights-card {
    background-color: var(--color-base-background);
    border: 1px solid var(--color-base-border);
    padding: 16px;
    border-radius: 8px;
}

.invite-employees-dialog {
    min-width: 680px;
    height: fit-content;
}

.add-employees-dialog {
    max-width: 550px;
    height: fit-content;
}

.border-color-base {
    border-color: var(--color-base-border);
}

.avatar-wrapper {
    display: flex;
    min-height: 120px;
    align-items: start;
    justify-content: space-between;
    width: 120px;
    padding: 16px 0 44px;
}

.avatar {
    fill: #fff;
    stroke: #d0d0d0;
    display: flex;
    width: 60px;
    height: 60px;
    padding-top: 10px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d0d0d0;
    border-radius: 30px;
}

.avatar-icon {
    border-radius: 24px;
    background: #00ab84;
    align-self: center;
    width: 24px;
    height: 24px;
}

.avatar-body {
    border-radius: 90px;
    background: #00ab84;
    margin-top: 6px;
    height: 20px;
}

/*ToolTip CSS Position Override*/
/* General tooltip styling for RTL */
/*.rz-tooltip-rtl .rz-tooltip-content {
    position: absolute;
    right: -34px;*/ /* Aligns tooltip with the trigger */
/*bottom: 0px;*/ /* Keeps the tooltip tip at the bottom */
/*min-width: 500px;
    max-width: 90vw;*/ /* Prevents overflow beyond the viewport width */
/*word-wrap: break-word;
    white-space: normal;
}

.rz-tooltip-rtl .rz-tooltip-content {
    transform: translateX(calc(-100% + 50px));*/ /* Adjusts position for screen fit */
/*}*/

/* Ensure the tooltip doesn't go off the top or bottom of the viewport */
/*@media screen and (max-height: 600px) {
    .rz-tooltip-rtl .rz-tooltip-content {
        bottom: auto;
        top: 10px;*/ /* Moves tooltip upward when screen height is limited */
/*}
}*/

/* Optional: Style for the tooltip arrow to remain outside the bubble */
/*.rz-tooltip-rtl .rz-tooltip-content::after {
    content: "";
    position: absolute;
    bottom: -10px;*/ /* Keeps the arrow outside the tooltip */
/*right: 40px;*/ /* Align arrow with trigger */
/*border-width: 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    z-index: 1001;
}*/

/*.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover {
    background-color: var(--rz-primary-lighter);
    color: var(--color-primary-dark);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover {
    background-color: var(--rz-primary-lighter);
    color: var(--color-primary-dark);
    background-image: none;
}*/

.iti__selected-flag {
    padding: 16px 0px 0px 8px !important;
}

.rounded-button {
    border-radius: 999px;
}

.rz-alert.rz-alert-md.rz-variant-flat.rz-primary.rz-shade-default {
    background-color: var(--color-primary-light);
    box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary);
    border-radius: 8px;
    color: var(--color-text-primary);
}

    .rz-alert.rz-alert-md.rz-variant-flat.rz-primary.rz-shade-default i {
        color: var(--color-primary);
    }

    .rz-alert.rz-alert-md.rz-variant-flat.rz-primary.rz-shade-default p,
    .rz-alert.rz-alert-md.rz-variant-flat.rz-primary.rz-shade-default h1,
    .rz-alert.rz-alert-md.rz-variant-flat.rz-primary.rz-shade-default h2,
    .rz-alert.rz-alert-md.rz-variant-flat.rz-primary.rz-shade-default h3,
    .rz-alert.rz-alert-md.rz-variant-flat.rz-primary.rz-shade-default h4,
    .rz-alert.rz-alert-md.rz-variant-flat.rz-primary.rz-shade-default h5 {
        margin-bottom: unset;
    }

.rz-alert.rz-alert-md.rz-variant-flat.rz-warning.rz-shade-default {
    background-color: var(--color-warning-light);
    box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning);
    border-radius: 8px;
    color: var(--color-text-primary);
    align-items: flex-start;
}

    .rz-alert.rz-alert-md.rz-variant-flat.rz-warning.rz-shade-default i {
        color: var(--color-warning-normal);
    }

.rz-alert.rz-alert-md.rz-variant-flat.rz-info.rz-shade-default {
    background-color: var(--color-info-light);
    box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info);
    border-radius: 8px;
    color: var(--rz-info);
    align-items: flex-start;
}

    .rz-alert.rz-alert-md.rz-variant-flat.rz-info.rz-shade-default i {
        color: var(--color-info-normal);
    }



.rz-alert .rz-button-icon-left.rzi {
    color: var(--color-text-primary) !important;
}


.rz-alert .rz-alert-item {
    align-items: center;
}

.rz-alert-content {
    width: 100%;
}

@media (max-width: 768px) {
    .page-section {
        margin-bottom: 1.5rem;
    }
}

.rz-form-field.rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-form-field.rz-variant-flat .rz-textarea ~ .rz-form-field-label {
    transform: unset;
}


/* Dashed border and padding for the upload area */
.rz-fileupload-buttonbar .rz-fileupload-choose {
    border: 2px dashed var(--color-base-border);
    border-radius: 8px;
    padding: 2rem !important;
    background-color: var(--color-background-secondary);
    text-align: center;
    box-shadow: none;
}

    /* Make the text inside smaller */
    .rz-fileupload-buttonbar .rz-fileupload-choose span {
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--color-text-secondary);
        margin: 2rem;
    }

.rz-dialog {
    border-radius: 16px;
}

.rz-dialog-content {
    padding: 0px;
}

/* Reaches into child components rendered inside CreateAccount */
.password-requirements {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.password-requirement {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.icon-container {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background-color: lightgrey;
    margin-right: 10px;
}

    .icon-container.valid {
        background-color: var(--color-primary, #4CAF50);
    }

.confirm-publish {
    padding: 16px 18px 0 18px;
}

@media (max-width: 768px) {
    .form-container {
        padding: 28px;
    }
}