:root {
        /* Materialize CSS 2.2 Color Variables (Based on M3) */
        --md-source: #9c27b0;
        /* Primary Colors */
        --primary-color: #9c27b0; /* Primary */
        --primary-color-light: rgba(173,179,178,1); /* Primary Light */
        --primary-color-dark: #630a73; /* Primary Dark */
        --primary-color-text: #FFFFFF; /* On Primary */
        --primary-color-container: #EADDFF; /* Primary Container */
        --primary-color-on-container: #21005E; /* On Primary Container */
      
        /* Secondary Colors */
        --secondary-color: #625B71; /* Secondary */
        --secondary-color-light: #E8DEF8; /* Secondary Light */
        --secondary-color-dark: #1D192B; /* Secondary Dark */
        --secondary-color-text: #FFFFFF; /* On Secondary */
        --secondary-color-container: #E8DEF8; /* Secondary Container */
        --secondary-color-on-container: #1D192B; /* On Secondary Container */
      
        /* Tertiary Colors */
        --tertiary-color: #7D5260; /* Tertiary */
        --tertiary-color-light: #FFD8E4; /* Tertiary Light */
        --tertiary-color-dark: #31111D; /* Tertiary Dark */
        --tertiary-color-text: #FFFFFF; /* On Tertiary */
        --tertiary-color-container: #FFD8E4; /* Tertiary Container */
        --tertiary-color-on-container: #31111D; /* On Tertiary Container */
      
        /* Error Colors */
        --error-color: #B3261E; /* Error */
        --error-color-light: #F9DEDC; /* Error Light */
        --error-color-dark: #410E0B; /* Error Dark */
        --error-color-text: #FFFFFF; /* On Error */
        --error-color-container: #F9DEDC; /* Error Container */
        --error-color-on-container: #410E0B; /* On Error Container */
      
        /* Neutral Colors */
        --background-color: #FFFBFE; /* Background */
        --on-background-color: #1C1B1F; /* On Background */
        --surface-color: #FFFBFE; /* Surface */
        --on-surface-color: #1C1B1F; /* On Surface */
        --surface-variant-color: #E7E0EC; /* Surface Variant */
        --on-surface-variant-color: #49454F; /* On Surface Variant */
        --outline-color: #79747E; /* Outline */
        --outline-variant-color: #CAC4D0; /* Outline Variant */
      
        /* Inverse Colors */
        --inverse-surface-color: #313033; /* Inverse Surface */
        --inverse-on-surface-color: #F4EFF4; /* Inverse On Surface */
        --inverse-primary-color: #D0BCFF; /* Inverse Primary */
        --shadow-color: #000000; /* Shadow */
        --scrim-color: #000000; /* Scrim */
      
        /* Additional Colors */
        --surface-tint-color: #FFFFFF; /* Surface Tint */
        --inverse-surface-tint-color: #333333; /* Inverse Surface Tint */
        --background-dim-color: rgba(0, 0, 0, 0.8); /* Background Dim */
        --surface-dim-color: rgba(0, 0, 0, 0.8); /* Surface Dim */
      
        /* Materialize Specific */
        --materialize-grey-lighten-4: #f5f5f5; /* Example: Light grey for backgrounds */
        --materialize-grey-darken-3: #424242; /* Example: Dark grey for text */
      
        /* Text Colors */
        --text-color-primary: rgba(0, 0, 0, 0.87); /* Primary Text (on light) */
        --text-color-secondary: rgba(0, 0, 0, 0.6); /* Secondary Text (on light) */
        --text-color-on-dark: rgba(255, 255, 255, 0.87); /* Primary Text (on dark) */
        --text-color-on-dark-secondary: rgba(255, 255, 255, 0.6); /* Secondary Text (on dark) */
      
        /* Link Color */
        --link-color: var(--primary-color);
        --link-visited-color: var(--primary-color);
        --link-hover-color: var(--primary-color-dark);
        --link-active-color: var(--primary-color);

}


.btn, .btn-small, .btn-large, .btn-floating {
    background-color: var(--primary-color); /* Your primary button color */
    color: var(--primary-color-text); /* Your primary button text color */
}

.btn:hover, .btn-small:hover, .btn-large:hover, .btn-floating:hover {
background-color: var(--primary-color-dark); /* Darker shade on hover */
}

.btn-floating {
background-color: var(--secondary-color); /* Your secondary button color */
color: var(--secondary-color-text);
}

.btn-flat, .btn.tonal {
    color: var(--primary-color-text); /* Color for flat buttons */
    background-color: var(--primary-color-light);
}

.btn-flat:hover, .btn.tonal:hover {
    color: var(--primary-color-text); /* Color for flat buttons */
    background-color: var(--primary-color);
}


.btn.outlined, .btn-small.outlined {
    color: var(--link-color); /* Color for flat buttons */
}

.btn.outlined:hover, .btn-small.outlined:hover {
    color: var(--link-hover-color); /* Color for flat buttons */
    background-color: var(--primary-color-light);
}

a:link {
    color: var(--link-color);
}

a:visited {
    color: var(--link-visited-color);
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

a:active {
    color: var(--link-active-color);
}

ul.right.hide-on-med-and-down li a:hover {
    background-color: var(--link-color) !important; /* Change this to your desired hover color */
    color: inherit !important; /* Ensure text color remains unchanged */
}

.tabs.tabs-fixed-width .tab a {
    color: var(--link-color);
}

.tabs.tabs-fixed-width .tab a.active {
    color: var(--primary-color);
}

.tabs.tabs-fixed-width .indicator {
    background-color: var(--primary-color);
}

.login-body-background {

    background-image: url('/images/background.png');
    background-size: cover; /* Cover the entire viewport */
    background-repeat: no-repeat; /* Prevent the image from tiling */
    background-position: center center; /* Center the image */
    display: flex; /* Use flexbox for vertical centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
    margin: 0; /* Remove default body margin */
}


/* Navbar */
nav, nav .nav-wrapper {
    background-color: white;
    background-image: url('/images/background_top.png');
}

.sidenav {
    margin-top: 66px;
    width: 220px;
    background-color: rgba(204, 218, 217, 0.95);
}

header, main {
    padding-left: 250px;
    padding-right: 10px;
}

@media only screen and (max-width : 992px) {
    header, main {
    padding-left: 20px;
    }
}

.input-field {
    padding: 0px 0px 20px 0px;
}


blockquote {
    margin: 20px 0;
    padding-left: 1.5rem;
    border-left: 5px solid #5d5d5d;
}

pre {
    white-space: pre-wrap; /* Since CSS 2.1 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.warning {
    color: #856404;
    background-color: #fff3cd;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid #ffeeba;
    border-radius: .25rem;
    margin-left: 0.75em;
    margin-right: 0.75rem;
}

div.uid-div {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.uid-div:hover {
    cursor: pointer;
}

div.uid-div:active {
    cursor: pointer;
}

span.timezone {
    opacity: 60%;
}

p.report-description {
    padding-left: 10px;
}

span.report-header {
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: underline;
    padding-bottom: 20px;
    padding-left: 10px;
}

blockquote.screening-notes {
    font-size: 15px;
    white-space: pre-line;
}

.info-panel {
    margin: 5px;
    padding: 10px;
}

td.table-label {
    font-weight: bold;
}

table {
    --separator-color: #8d8d8d;
}

.collapsible-header {
    display: flow-root;
}

.adjust-height {
    min-height: 525px;
    color: var(--secondary-color-hover-solid);
}

li.active > .collapsible-body:has(> form)  {
    min-height: 525px;
}


.select-wrapper .dropdown-content {
    z-index: 9999 !important;
    position: absolute !important;
}


/* Ensure proper positioning relative to select */
.card .select-wrapper {
    position: relative !important;
    overflow: visible !important;
}

/* Position dropdown relative to its wrapper */
.card .select-wrapper .dropdown-content.active {
    top: auto !important;
    bottom: 100% !important;
    left: 0 !important;
    transform: none !important;
    max-height: 300px !important;
    display: block !important;
    overflow-y: auto !important;
}

/* Prevent card from scrolling */
.card {
    overflow: visible !important;
}

.card .card-content {
    overflow: visible !important;
}

.card .container {
    width: 90% !important;
}

.ec-toast {
    background-color: #3f7253;
    color: #fff;
}

.ec-error-toast {
    background-color: #e72c2c;
    color: #fff;
}

.ask-ai-target {
    height: auto !important;
    max-height: fit-content;
}

.customer-property-header {
    color: #2a2828;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 20px;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    :root {
        background-color: var(--background-color-dark);
        color: var(--text-color-on-dark);
        /* Navbar */
        nav, nav .nav-wrapper {
            background-color: var(--background-color-dark);
            background-image: url('/images/background_top.png');
            color: var(--text-color-on-dark);
        }

        .sidenav {
            margin-top: 66px;
            width: 220px;
            background-color: var(--background-color-dark);
        }

        a:link {
            color: var(--link-color);
        }

        a:visited {
            color: var(--link-visited-color);
        }

        a:hover {
            color: var(--link-hover-color);
            text-decoration: underline;
        }

        a:active {
            color: var(--link-active-color);
        }
        
        td.table-label {
            font-weight: bold;
        }
        
        table {
            --separator-color: #8d8d8d;
            color: var(--text-color-primary);
        }
    }
}