html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
}
.page {
    padding: 0px;
}

.font-size-xs {
    font-size: clamp(.6rem, 3vw, 1rem);
}

.font-size-small {
    font-size: clamp(.5rem, 3vw, .85rem);
}

.icon-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.sitemenu-large-menu {
    --bs-dropdown-link-color: var(--bs-secondary-color) !important; /* Text color */
    --bs-dropdown-link-hover-color: #000; /* Text color on hover */
    --bs-dropdown-link-hover-bg: #678D82; /* Background on hover */
    --bs-dropdown-link-active-color: #000; /* Text color on click */
    --bs-dropdown-link-active-bg: #678D82; /* Background on click */
}


.hover-bg-light:hover {
    background-color: #f8f9fa !important; /* Bootstrap's 'light' gray */
    transition: background-color 0.2s ease-in-out;
}


.btn-breadcrumb .btn {
    /* Create the arrow shape using clip-path */
    clip-path: polygon( calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 15px 50%, 0% 0% );
    padding-left: 25px; /* Space for the inward notch */
    padding-right: 25px; /* Space for the outward point */
    border: none; /* Borders look messy with clip-path */
    margin-right: -10px; /* Overlap the buttons to close the gap */
}

/* Fix the first button (no notch on the left) */
.btn-breadcrumb .btn:first-child {
    clip-path: polygon( calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 0% 0% );
    padding-left: 15px;
}

/* Fix the last button (no point on the right) */
.btn-breadcrumb .btn:last-child {
    clip-path: polygon( 100% 0%, 100% 100%, 0% 100%, 15px 50%, 0% 0% );
}


.table-header {
    background-color: #B3C6C0 !important;
    z-index: 500 !important;
}






/* Hover effect for the quote headers */
.quote-header:hover {
    background-color: #e9ecef !important; /* Slightly darker than bg-light */
    color: #495057 !important;
}

/* Base rotation icon style */
.rotate-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
    user-select: none;
}

/* Rotate icon to point right when collapsed */
.quote-header.collapsed .rotate-icon {
    transform: rotate(-90deg);
}










/* Container for the switch */
.form-switch-custom {
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.2s;
    overflow: hidden; /* Keeps the invisible input contained */
}

    /* Make the hidden input the ACTUAL clickable area */
    .form-switch-custom input[type="checkbox"] {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Spans full width of the toggle */
        height: 100%; /* Spans full height of the toggle */
        margin: 0;
        cursor: pointer;
        z-index: 2; /* Sits on top of the 'after' circle */
    }

    /* The toggle circle */
    .form-switch-custom::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: white;
        top: 2px;
        left: 2px;
        transition: transform 0.2s;
        z-index: 1;
    }

    /* On state - Background */
    .form-switch-custom:has(input:checked) {
        background-color: #0d6efd;
    }

    /* On state - Circle move */
    .form-switch-custom:has(input:checked)::after {
        transform: translateX(20px);
    }






/* Hide the actual radio button circle */
.avatar-radio-list input[type="radio"] {
    display: none;
}

/* Style the label (which holds our image) */
.avatar-radio-list label {
    cursor: pointer;
    margin: 10px;
    display: inline-block;
    border: 3px solid transparent; /* Placeholder for the highlight */
    padding: 2px;
}

    /* Hover effect */
    .avatar-radio-list label:hover {
        background-color: #f8f9fa;
    }

/* THE HIGHLIGHT: When the hidden radio is checked, style the adjacent label */
.avatar-radio-list input[type="radio"]:checked + label {
    border-color: #0d6efd; /* Bootstrap Primary Blue */
}

/* Ensure images fit well */
.avatar-radio-list img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: block;
}





/* 1. Remove spacing and manage overlap */
.nav-tabs .nav-item {
    margin-bottom: -1px;
}

.nav-tabs .nav-link {
    background-color: #6C757D;
    color: #fff;
    border: 1px solid #dee2e6;
    margin-right: -1px;
    /* Restore top rounded corners */
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

    /* 2. Selected tab: White and Black */
    .nav-tabs .nav-link.active {
        background-color: #fff !important;
        color: #000 !important;
        border-bottom-color: transparent;
        z-index: 1; /* Ensures active tab sits "above" the neighbors */
        font-weight: bold;
    }

/* 3. Clean up the last tab */
.nav-tabs .nav-item:last-child .nav-link {
    margin-right: 0;
}