:root {
    /* Light Theme */
    --bg-primary: #fff;
    --text-primary: #17223a;
    --bg-secondary: #f9f9f9;
    --text-secondary: black;
    --accent-color: #17223a;
    --accent-hover: #7b9cbd;
    --border-color: #ccc;
    --table-header-bg: #17223a;
    --tile-bg: #17223a;
    --tile-button-bg: #17223a;
    --tile-text-color: #fff;
    --table-row-even-bg: #f2f2f2;
    --button-text-color: #fff;
    --delete-button-color: red;
    --form-container-bg: white;
    --bg-popup: white;
    --text-popup: black;
    --bg-hover: #b2acac;
    --search-text: #a89d9d;
    --search-bg: white;
    --btn-bg: #17223a;
    --sidebar: #17223a;
    --popup-list: #f0f0f0;
    --popup-hover: #17223a;
    --chart-color: #fff;
    --popup-heading: #17223a;
    --status-bg: #e0e0e0;
    --status-text: #333;
    --status-warning-bg: #ffc107;
    --status-warning-text: #000;
    --table-header-bg2: #f9f9f9;
    --table-header-text: #111;
    --table-text: #222;
    --table-border: #eee;
    --table-striped-bg: #fcfcfc;
    --table-hover-bg: #f5faff;
    --heading-color: #003d66;
    --filter-color: #fff;
    --filter-item: #555;
    --input-field2: background-color: #fafafa;
    --background-modal: #ffffff;
}
/* Dark Theme  */
[data-theme="dark"] {
    --bg-primary: #121212;
    --text-primary: #fff;
    --bg-secondary: #282828;
    --text-secondary: #E1E1E1;
    --accent-color: #7b9cbd;
    --accent-hover: #919191;
    --border-color: #666;
    --table-header-bg: #17223a;
    --table-row-even-bg: #444;
    --tile-bg: #7b9cbd;
    --tile-button-bg: #7b9cbd;
    --tile-text-color: black;
    --button-text-color: #fff;
    --delete-button-color: #da190b;
    --form-container-bg: #282828;
    --bg-popup: #282828;
    --chart-color: #D3D3D3;
    --text-popup: white;
    --bg-hover: #334768;
    --search-text: white;
    --search-bg: #121212;
    --btn-bg: #334768;
    --sidebar: #334768;
    --popup-list: #8b9baa;
    --popup-hover: #334768;
    --popup-heading: white;
    --status-bg: #444;
    --status-text: #fff;
    --status-warning-bg: #ff9800;
    --status-warning-text: #fff;
    --table-header-bg2: #2c2c2c;
    --table-header-text: #fff;
    --table-text: #f5f5f5;
    --table-border: #444;
    --table-striped-bg: #1e1e13;
    --table-hover-bg: #333;
    --heading-color: white;
    --filter-color: #fff;
    --filter-item: #f0f0f0;
    --background-modal: #444;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    z-index: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center; /* centers the row if less than 2 items */
    margin-top: 60px;
    width: 100%;
}

    .button-container .btn-wrapper {
        flex: 0 1 40%; /* two per row (~45% + gap) */
        max-width: 45%;
        display: flex;
        justify-content: center; /* center the button inside wrapper */
    }

        .button-container .btn-wrapper button {
            width: 100%;
            height: 70px;
            font-size: 1rem;
        }

/* Responsive: stack buttons on small screens */
@media (max-width: 768px) {
    .button-container .btn-wrapper {
        flex: 0 1 80%; /* full width */
        max-width: 80%;
    }
}

.file-upload-wrapper {
    margin-top: 15px;
}

.btn-small {
    background-color: green;
    color: white;
    border: none;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 60px;
    height: auto;
    text-align: center;
    padding: 4px 8px;
    font-size: 0.8rem;
}

.content {
    padding-top: 1.1rem;
}

@media (max-width: 768px) {
    .dashboard-container .content {
        padding: 0;
    }

    .e-dashboardlayout {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .e-panel {
        width: 100% !important;
        left: 0 !important;
    }

        .e-panel .e-panel-container {
            height: auto !important;
        }
}

.btn1 {
    background: var(--btn-bg);
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    text-align: center;
}

.btn_donatenow {
    background-color: green;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    text-align: center;
}


@media (min-width: 768px) {
    .btn_donatenow {
        width: 50%;
        padding: 10px;
        min-width: 300px;
        min-height: 70px;
        font-size: 18px;
        padding: 15px 25px;
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 767.98px) {
    .btn_donatenow {
        width: 100%;
        min-width: auto;
        font-size: 14px;
        padding: 10px 15px;
    }
}

.btn_donatenow:hover {
    background-color: forestgreen;
    color: var(--text-primary);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.btn_donatenow:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
    .btn1 {
        width: 50%;
        padding: 10px;
        min-width: 300px;
        min-height: 70px;
        font-size: 18px;
        padding: 15px 25px;
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 767.98px) {
    .btn1 {
        width: 100%;
        min-width: auto;
        font-size: 14px;
        padding: 10px 15px;
    }
}

.btn1:hover {
    background: var(--accent-hover);
    color: var(--text-primary);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.btn1:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#chatbotbg {
    background-color: var(--bg-primary);
}

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

.input-group {
    background-color: var(--bg-primary);
}

.select-container {
    width: 100%;
    max-width: 100%;
}

.signup-background {
    background-color: white;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
    box-sizing: border-box;
    overflow: hidden;
}
/* Media Query for very small screens */
@media (max-width: 768px) {
    .signup-background {
        padding: 0px 5px;
    }
}

/* Card with split layout */
.signup-card {
    display: flex;
    width: 95%;
    max-width: 1200px;
    min-width: 700px;
    background: #f5f5f5;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    margin: 30px auto;
}

.divider {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
}
/* Left side */
.signup-left {
    position: relative;
    flex: 1;
    /*background: linear-gradient(135deg, #6a11cb, #2575fc);*/
    background: #17223A;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

    .signup-left h1, .signup-left p {
        animation: slideIn 1.5s ease forwards;
        opacity: 0;
    }

@keyframes slideIn {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.signup-logo {
    width: 100px;
    margin-bottom: 20px;
}
/* Right side */
.signup-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: var(--form-page-bg, #f9f9f9);
    padding: 20px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

@media (max-width: 900px) {
    .signup-card {
        flex-direction: column;
        width: 95%;
        max-width: 100%;
        min-width: 0;
        max-height: 100vh;
    }

    .signup-left {
        flex: none;
        width: 100%;
        max-height: 30vh;
        overflow: hidden;
        padding: 20px;
    }

    .signup-right {
        flex: 1;
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        padding: 20px 10px;
        align-items: stretch;
    }
}

@media (max-width: 600px) {
    .signup-left h1 {
        font-size: 1.5rem;
    }

    .signup-left p {
        font-size: 1rem;
    }

    .signup-right .signup-heading {
        font-size: 1.2rem;
    }
}

.form-container {
    display: flex;
    border-radius: 10px;
    flex-direction: column;
    gap: 5px;
    width: 90%;
    background-color: var(--form-container-bg);
    max-width: 600px;
    min-height: 250px;
    margin: auto;
    padding: 10px;
    overflow-y: auto;
}

    .form-container label {
        font-weight: 600;
        color: var(--text-primary);
    }

.form-container2 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 90%;
    max-width: 600px;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    background-color: var(--form-container-bg);
    min-height: auto;
    overflow-y: visible;
}

.form-group label {
    font-weight: 600;
}

.full-width {
    flex: 2;
    width: 100%;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.step-number {
    background: #17223a;
    color: white;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

.step-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #17223a;
}

.input-field {
    padding: 3px 4px;
    border: none;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    transition: border-bottom 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

    .input-field:focus {
        outline: none;
        border-bottom: 2px solid #007bff;
        box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
    }

    .input-field::placeholder {
        color: #aaa;
        font-size: 0.9rem;
    }

@media (max-width: 768px) {
    .select-container {
        width: 100%;
    }

    .input-field {
        font-size: 0.9rem;
        padding: 6px 8px;
    }
}

@media (max-width: 768px) {
    .form-container {
        width: 95%;
        max-width: 360px;
        padding: 15px;
    }
}

@media (max-height: 700px) {
    .form-container {
        max-height: 80vh;
        padding: 8px;
    }
}

.btn {
    background-color: var(--btn-bg);
    color: white;
    padding: 10px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    width: 100%;
    border-radius: 5px;
}

    .btn:hover {
        background: #9d9999;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        color: #17223a;
    }

    .btn:active {
        transform: scale(0.98);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.payment-method {
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    border-radius: 0px;
    text-align: left;
    width: 100%;
    background-color: transparent;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup {
    background: var(--bg-popup);
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 90%;
    border-radius: 15px;
    color: var(--text-popup);
    max-width: 340px;
    text-align: left;
}

.popup-title {
    font-size: 1rem;
    margin-bottom: 15px;
    color: var(--text-popup);
    font-weight: normal;
    padding-left: 5px;
}

.popup-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 15px;
    background: none;
    color: var(--text-popup);
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: left;
    font-size: 1rem;
}

    .popup-option:hover {
        background-color: var(--bg-hover);
    }

.popup-cancel {
    background: none;
    border: none;
    color: var(--text-popup);
    cursor: pointer;
    padding: 10px;
    transition: background-color 0.2s;
    text-align: right;
    border-radius: 15px;
    display: block;
    width: fit-content;
    margin-left: auto;
}

    .popup-cancel:hover {
        background-color: red;
    }

.profile-photo-container2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.upload-container2 {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #4a90e2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.upload-container {
    position: relative;
    display: inline-block;
}

.profile-photo1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.edit-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: white;
    border: 2px solid #4a90e2;
    border-radius: 50%;
    padding: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

    .edit-icon:hover {
        background-color: #4a90e2;
        color: white;
    }


.upload-button {
    background-color: Goldenrod;
    color: white;
    font-size: 20px;
    font-weight: bold;
    width: 30px;
    height: 30px;
    margin-left: auto;
    margin-top: 2px;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .upload-button:hover {
        background-color: #ddd;
    }

.uploading-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.uploading-label {
    margin-right: 10px;
    margin-bottom: 0;
    flex: 1;
}
/* Responsive Design */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
    }
}

.btn:active {
    transform: scale(0.95);
}
/* Custom responsive wrapper */
.tableWrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/*Table Styling*/
.tableStyle {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: auto;
}

    .tableStyle th, .tableStyle td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }

    .tableStyle th {
        font-weight: bold;
        background-color: var(--table-header-bg);
        color: var(--button-text-color);
    }

    .tableStyle tr:nth-child(even) {
        background-color: var(--form-container-bg);
    }

    .tableStyle tr {
        background-color: var(--form-container-bg);
    }

        .tableStyle tr:hover {
            background-color: var(--bg-hover) !important;
            transition: background-color 0.3s ease-in-out;
        }

.pay-now-btn {
    background-color: #17223a;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    .pay-now-btn:hover {
        background-color: #28a745;
        transform: scale(1.05);
    }
/* Toggle Switch Styles */
.toggle-label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.toggle-switch {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 10px;
    cursor: pointer;
    margin-left: 10px;
}

.toggle-slider {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: white;
    top: 1px;
    left: 1px;
    transition: transform 0.3s ease;
}

.toggle-switch:has(.hidden-checkbox:checked) {
    background-color: var(--btn-bg);
}

    .toggle-switch:has(.hidden-checkbox:checked) .toggle-slider {
        transform: translateX(20px);
    }

/* Hidden Checkbox */
.hidden-checkbox {
    opacity: 0;
    position: absolute;
    margin: 0px;
}
/*
.search-container {
    position: relative;
}

.search-input-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    background-color: var(--search-bg);
    color: var(--search-text);
}

    .search-input-container .input-field {
        flex: 1;
        border: none;
        padding-right: 5px;
        background-color: var(--search-bg) color: var(--search-text);
    }*/
.search-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.search-input-container,
.dropdown-container,
.date-range-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.input-field2 {
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%; /* full width inside container */
    max-width: 390px; /* still cap it for big screens */
    box-sizing: border-box;
}

.dropdown-select,
.date-range-container input {
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.date-range-container label {
    font-size: 14px;
    margin-right: 5px;
}

.date-range-container input[type="date"] {
    width: 120px;
}

@media (max-width: 768px) {
    .search-container {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-container,
    .dropdown-container,
    .date-range-container {
        width: 100%; /* stack full width */
    }
}

.clear-search {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #777;
    font-size: 1.2em;
}

.search-results-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.display-dropdown {
    position: relative;
    display: in-block;
}

    .display-dropdown button {
        background-color: darkslategray;
        color: white;
        height: 40px;
        width: 150px;
        padding: 10px 10px;
        border: none;
        gap: 10px;
        cursor: pointer;
        border-radius: 10px;
        margin-top: 10px;
        margin-left: 5px;
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    color: white;
    width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 10px;
    z-index: 1;
    height: 260px;
    border-radius: 4px;
    right: 0;
    left: auto;
    overflow-y: auto;
}

.display-dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content label {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
}

.dropdown-content input[type="checkbox"] {
    margin-right: 8px;
}

.search-results {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

    .search-results li {
        padding: 5px 8px;
        cursor: pointer;
    }

        .search-results li:hover {
            background-color: #e9e9e9;
        }

.no-results {
    padding: 8px 12px;
    font-style: italic;
    color: #777;
}

.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    scrollbar-width: thin;
    padding: 0;
}

    .pagination::-webkit-scrollbar {
        height: 6px;
    }

@media (min-width: 768px) {
    .pagination {
        margin-left: 100px;
    }
}

@media (min-width: 1200px) {
    .pagination {
        margin-left: 200px;
    }
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.circular-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    display: block;
}

    .circular-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

.img {
    max-width: 100px;
    max-height: 100px;
    margin-bottom: 10px;
    display: block;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
    padding: 40px;
}

.login-form {
    width: 90%;
    max-width: 450px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .logo {
        max-width: 100px;
    }
}

.login-header {
    font-size: 28px;
    color: #17223a;
    margin-bottom: 5px;
    align-items: center;
}

.login-text {
    font-size: 16px;
    color: #777;
    margin-bottom: 25px;
    align-items: center;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}


.input-container {
    position: relative;
}

.email-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z' clip-rule='evenodd' /%3E%3C/svg%3E");
    display: inline-block;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #999;
    background-size: cover;
}

.password-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M15.75 1.5a6.75 6.75 0 0 0-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 0 0-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 0 0 .75-.75v-1.5h1.5A.75.75 0 0 0 9 19.5V18h1.5a.75.75 0 0 0 .53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1 0 15.75 1.5Zm0 3a.75.75 0 0 0 0 1.5A2.25 2.25 0 0 1 18 8.25a.75.75 0 0 0 1.5 0 3.75 3.75 0 0 0-3.75-3.75Z' clip-rule='evenodd' /%3E%3C/svg%3E");
    display: inline-block;
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #999;
    background-size: cover;
}


.password-icon2 {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 32px; /* bigger clickable area */
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: color 0.2s ease;
}

    .password-icon2 img {
        width: 100%; /* image fills span */
        height: 100%;
        object-fit: contain;
    }

    .password-icon2:hover {
        color: #000;
    }

.login-field {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border-radius: 25px;
    box-sizing: border-box;
    font-size: 16px;
    color: #333;
    border: none;
    outline: none;
    background-color: #E1E1E1;
}

    .login-field:focus {
        border: solid 1px;
        border-color: #17223a;
    }

.remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
}

.remember-me {
    display: flex;
    align-items: center;
    color: #555;
}

    .remember-me input[type="checkbox"] {
        margin-right: 5px;
    }

.forgot-password {
    color: #007bff;
    text-decoration: none;
}

    .forgot-password:hover {
        font-weight: bold;
    }

.login-button {
    width: 100%;
    padding: 12px;
    background-color: #17223a;
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s;
}

    .login-button:hover {
        background-color: #0056b3;
    }

.new-user {
    margin-top: 25px;
    font-size: 15px;
    color: #555;
}

    .new-user a {
        color: #007bff;
        text-decoration: none;
    }

        .new-user a:hover {
            font-weight: bold;
        }
/* Responsive Table: Enables Scroll for Small Screens */
@media (max-width: 768px) {
    .tableStyle {
        overflow-x: auto;
        display: block;
    }

    th, td {
        font-size: 14px;
        padding: 8px;
    }
}

.delete-button {
    background-color: white;
    border: none;
    /*color: red;*/
    color: var(--delete-button-color);
    text-align: right;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin-left: 2px;
}

    .delete-button:hover {
        color: #da190b;
    }

.alert-danger {
    color: red;
    margin: 2px;
    font-size: 15px;
    text-align: right;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 3;
}

.modal-content {
    background-color: var(--bg-popup);
}

.modal-dialog {
    background-color: var(--bg-popup);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    width: 80%;
    margin: 25vh auto;
    max-width: 600px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.modal-title {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--text-popup)
}

.close {
    cursor: pointer;
    border: none;
    background: none;
    font-size: 1.5em;
    color: #888;
}

    .close:hover {
        color: #333;
    }

.modal-content-donor {
    position: relative; /* ensures child absolute positioning works */
    padding: 20px;
    /* your other styles */
}

    .modal-content-donor .close {
        position: absolute; /* position relative to modal-content */
        top: 10px; /* distance from top */
        right: 10px; /* move to the right edge */
        background: transparent; /* optional: no background */
        border: none; /* remove border */
        font-size: 18px; /* adjust size */
        font-weight: bold;
        cursor: pointer;
        color: #000; /* adjust color if needed */
        z-index: 1000; /* ensure it stays on top */
    }

.modal-body ul {
    list-style: none;
    padding: 0;
}

    .modal-body ul li {
        margin-bottom: 10px;
    }

        .modal-body ul li button {
            display: block;
            width: 100%;
            padding: 10px 15px;
            background-color: var(--popup-list);
            border: none;
            border-radius: 25px;
            text-align: left;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 1em;
        }

            .modal-body ul li button:hover {
                background-color: var(--popup-hover);
                color: #FFFF;
            }

.change-btn {
    width: 240px;
    height: 40px;
    padding: 5px;
    background-color: var(--tile-button-bg);
    border-radius: 20px;
    color: white;
    font-size: small;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}


    .change-btn:hover {
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        transform: scale(0.98);
    }

.tile {
    height: auto;
    width: 350px;
    border-radius: 26px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    background-color: var(--tile-bg);
    color: var(--tile-text-color);
    padding: 32px;
}

.modal-overlay {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.6);
}

.alert-success {
    color: white;
    background-color: green;
    font-size: 15px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
    height: 30%;
    width: 50%;
    border: solid;
    border-color: green;
    border-radius: 10px;
}

.editpopup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
}

.editpopup-content {
    background-color: var(--bg-popup);
    color: var(--text-popup);
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    position: relative;
    margin: 0 auto;
    max-height: 80vh;
    overflow-y: auto;
}

.editpopup-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

    .editpopup-close:hover,
    .editpopup-close:focus {
        color: black;
        text-decoration: none;
    }

.editpopup-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.editpopup-field {
    padding: 2px;
    border: none;
    background-color: var(--bg-secondary);
    border-radius: 0;
    width: 100%;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

    .editpopup-field:focus {
        outline: none;
        border-bottom: 1px solid #007bff;
    }

@media (max-width: 768px) {
    .editpopup-content {
        width: 85%;
        max-width: none;
    }

    .editpopup-field {
        font-size: 14px;
    }

    .editpopup-close {
        font-size: 24px;
    }
}


@media (max-width: 576px) {
    .editpopup-content {
        padding: 10px;
    }

    .editpopup-close {
        font-size: 24px;
    }
}

.profile-picture {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 6px;
    object-fit: cover;
    vertical-align: middle;
    margin-top: 6px;
}

.profile-dropdown:hover .dropdown-content {
    display: block;
}

.profile-dropdown {
    position: relative;
    display: inline-block;
}

.profile-button {
    background-color: transparent;
    color: white;
    margin-bottom: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .profile-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

.dropdown-content {
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #0e1423;
    margin-top: -10px;
}

.greeting {
    margin-left: 5px;
    margin-bottom: -8px;
}

.dropdown-content a {
    color: #fff;
    padding: 5px 8px;
    text-decoration: none;
    display: block;
}

    .dropdown-content a:hover {
        text-decoration: underline;
    }



.succespopup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.success-popup-content {
    background-color: var(--bg-popup);
    color: var(--text-popup);
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 80%;
    max-width: 300px;
    position: relative;
    margin: 0 auto;
    max-height: 60vh;
    text-align: center;
}

.popup-header {
    margin-bottom: 15px;
}

.popup-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.popup-body h2 {
    color: var(--text-primary);
    margin-bottom: 10px;
}

.popup-body p {
    color: var(--text-primary);
}

.popup-footer {
    margin-top: 20px;
    color: var(--text-primary);
}

.popup-button {
    background-color: #17223a;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0 auto;
    display: block;
}

    .popup-button:hover {
        background-color: #334768;
    }

.info-message-container {
    background-color: #e1f5fe;
    border: 1px solid #b3e5fc;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    color: #0277bd;
    display: flex;
    align-items: center;
}

.info-icon {
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
}

    .info-icon svg {
        fill: #0277bd;
    }

.dashboard-grid {
    display: grid;
    grid-template-areas:
        "merchandise organization"
        "donor donor";
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    padding: 1rem;
}

.badge {
    font-size: 0.75rem;
    padding: 0.3em 0.6em;
    border-radius: 50%;
    vertical-align: top;
}
/* Chart containers */
.chart-section {
    background: var(--chart-color);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 7px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
}

.chart-header {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    text-align: center;
}


.merchandise {
    grid-area: merchandise;
    min-height: 500px;
}

.organization {
    grid-area: organization;
    min-height: 500px;
}

.donor {
    grid-area: donor;
}

.pledges {
    grid-area: pledges;
    min-height: 500px;
}

.chart-section > *:not(.chart-header) {
    flex-grow: 1;
}

/* Responsive layout for mobile */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-areas:
            "merchandise"
            "organization"
            "donor"
            "pledges";
        grid-template-columns: 1fr;
        gap: 0.5rem; /* smaller gaps between sections */
        padding: 0 1rem; /* horizontal padding */
    }

    .merchandise,
    .organization,
    .donor,
    .pledges {
        min-height: 300px; /* slightly smaller height */
        width: 90%; /* reduce width */
        max-width: 320px; /* max width of each chart */
        margin: 0 auto; /* center in container */
    }

    .chart-header {
        font-size: 0.85rem;
    }
}



@media (min-width: 769px) {
    .dashboard-grid {
        display: grid;
        grid-template-areas:
            "merchandise organization"
            "donor pledges";
        grid-template-columns: 1fr 1fr;
        grid-gap: 1rem;
    }

    .donor,
    .pledges {
        min-height: 250px;
    }
}

.dashboard-container {
    padding: 2px;
    overflow: hidden;
}

.dropdown2 {
    position: relative;
    display: inline-block;
}

.dropdown2-content {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 190px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    padding: 0;
    z-index: 1;
    right: -10px;
    position: relative;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    max-height: 150px;
    overflow-y: auto;
}

    .dropdown2-content ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .dropdown2-content li {
        margin-bottom: 0;
    }

.dropdown2:hover .dropdown2-content {
    display: block;
}

.dropdown2-content button {
    background-color: transparent;
    color: #212126;
    padding: 5px;
    border: none;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

    .dropdown2-content button:hover {
        background-color: #f5f5f5;
    }

.dropdown2-button {
    background-color: #7b9cbd;
    color: white;
    padding: 5px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border-radius: 10px;
}

.metric-card {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    text-align: center;
    margin-bottom: -4px;
    margin-top: -10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    z-index: 2;
}

@media (min-width: 390px) {
    .metric-card {
        width: 95%;
        display: inline-block;
        align-content: center;
        box-sizing: border-box;
        padding: 1px;
        margin: 1px;
    }
}

@media (min-width: 900px) {
    .metric-card {
        width: 100%;
    }
}

.metric-card.daily-visits {
    background-color: #488fc2;
    color: white;
}

.metric-card.revenue {
    background-color: #c4a34d;
    color: white;
}

.metric-card.orders {
    background-color: #7b9cbd;
    color: white;
}

.metric-card.users {
    background-color: #4db6ac;
    color: white;
}


.metric-icon {
    font-size: 3em;
    margin-bottom: 10px;
    opacity: 0.8;
}

.metric-value {
    font-size: 2em;
    font-weight: bold;
}

.metric-label {
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.metric-trend {
    font-size: 0.9em;
    opacity: 0.8;
}


.metric-card:hover {
    transform: translateY(-3px);
    transition: transform 0.3s ease;
}

.chat-page {
    background-color: var(--bg-primary);
    height: 63vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header h3 {
    background: linear-gradient(135deg, #1a2a3a, #3b5a7c);
    color: #dcdcdc;
    font-weight: 700;
    font-size: 1.5rem;
    padding: 10px 0;
    border-radius: 8px 8px 0 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.header-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
}

.welcome-message {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .welcome-message .bi-robot {
        color: #adb5bd;
    }

    .welcome-message .lead {
        color: var(--text-secondary);
    }


.chat-messages {
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--bg-primary);
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    height: 80vh;
    overflow: auto;
}

.message-row {
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.chat-icon .bi {
    color: #6c757d;
}

.message-bubble {
    max-width: 75%;
    word-wrap: break-word;
    line-height: 1.5;
    padding: 0.75rem 1rem;
}

.user-bubble {
    background-color: #0d6efd;
    color: white;
    border-radius: 15px;
}

.bot-bubble {
    background-color: #e9ecef;
    color: #212529;
    border-radius: 15px;
    font-size: 12px;
}


    .bot-bubble p:last-child {
        margin-bottom: 0;
    }

.chat-input-area {
    position: relative;
    background-color: var(--bg-primary);
}

    .chat-input-area .send-button {
        position: absolute;
        top: 50%;
        left: 48%;
        transform: translateY(-50%);
        border: none;
        background: none;
        padding: 0;
        color: #007bff;
    }

    .chat-input-area .form-control {
        padding-right: 2px;
        padding-left: 45px;

        background: var(--bg-primary);
        color: var(--text-secondary);
        border-radius: 55px;
        box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.05);
    }

.ask-question-textarea::placeholder {
    color: var(--text-primary);
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

.user-profile {
    display: flex;
    align-items: center;
    margin-right: -90px;
}

.custom-collapse {
    display: none;
    background-color: #f8f9fa;
    padding: 1rem;
}

    .custom-collapse.show {
        display: block;
    }

    .custom-collapse .nav-link {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }


@media (min-width: 768px) {
    .custom-collapse {
        position: absolute;
        top: 56px;
        left: 0;
        width: 100%;
        z-index: 1000;
    }
}

.custom-edit-profile-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 17px;
    margin-bottom: -2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-pencil-square' viewBox='0 0 16 16'%3E%3Cpath  d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/%3E%3Cpath fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.profile-picture {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
    vertical-align: middle;
    margin-top: 6px;
}

.profile-dropdown:hover .dropdown-content {
    display: block;
}

.profile-dropdown {
    position: relative;
    display: inline-block;
}

.profile-button {
    background-color: transparent;
    color: white;
    margin-bottom: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .profile-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }


.greeting {
    margin-left: 5px;
}

.dropdown-content a {
    color: #fff;
    padding: 5px 8px;
    text-decoration: none;
    display: block;
}

    .dropdown-content a:hover {
        text-decoration: underline;
    }

.custom-settings-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159-.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764-.415-1.6.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z'/%3E%3C/svg%3E");
    display: inline-block;
    width: 16px;
    height: 16px;
    top: 4px;
}

.custom-route {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-return-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 4px;
    background-size: cover;
}

.custom-order {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-truck' viewBox='0 0 16 16'%3E%3Cpath d='M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5zm1.294 7.456A2 2 0 0 1 4.732 11h5.536a2 2 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456M12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 3px;
    background-size: cover;
}

.custom-rabi {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building-fill-gear' viewBox='0 0 16 16'%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7.256A4.5 4.5 0 0 0 12.5 8a4.5 4.5 0 0 0-3.59 1.787A.5.5 0 0 0 9 9.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .39-.187A4.5 4.5 0 0 0 8.027 12H6.5a.5.5 0 0 0-.5.5V16H3a1 1 0 0 1-1-1zm2 1.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5m3 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5m3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM4 5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z'/%3E%3Cpath d='M11.886 9.46c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382zM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 2px;
    background-size: cover;
}

.custom-organization-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building-fill-gear' viewBox='0 0 16 16'%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7.256A4.5 4.5 0 0 0 12.5 8a4.5 4.5 0 0 0-3.59 1.787A.5.5 0 0 0 9 9.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .39-.187A4.5 4.5 0 0 0 8.027 12H6.5a.5.5 0 0 0-.5.5V16H3a1 1 0 0 1-1-1zm2 1.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5m3 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5m3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M4 5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z'/%3E%3Cpath d='M11.886 9.46c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382zM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 3px;
    background-size: cover;
}

.donation {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box2-heart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3.75 0a1 1 0 0 0-.8.4L.1 4.2a.5.5 0 0 0-.1.3V15a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V4.5a.5.5 0 0 0-.1-.3L13.05.4a1 1 0 0 0-.8-.4zM8.5 4h6l.5.667V5H1v-.333L1.5 4h6V1h1zM8 7.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 3px;
    background-size: cover;
}

.custom-donor-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 3px;
    background-size: cover;
}



.custom-staff-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-workspace' viewBox='0 0 16 16'%3E%3Cpath d='M4 16s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-5.95a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3Cpath d='M2 1a2 2 0 0 0-2 2v9.5A1.5 1.5 0 0 0 1.5 14h.653a5.4 5.4 0 0 1 1.066-2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9h-2.219c.554.654.89 1.373 1.066 2h.653a1.5 1.5 0 0 0 1.5-1.5V3a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 4px;
    background-size: cover;
}

.navbar-brand {
    font-size: 1.1rem;
}

.bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 3px;
    background-size: cover;
}

.bi-robot-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-robot' viewBox='0 0 16 16'%3E%3Cpath d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135'/%3E%3Cpath d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 2px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 2px;
    background-size: cover;
}

.custom-logout-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-left' viewBox='0 0 16 16'%3E%3Cpath  d='M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0z'/%3E%3Cpath fill-rule='evenodd' d='M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708z'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 4px;
    background-size: cover;
}

.custom-donation-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 3px;
    background-size: cover;
}

.custom-bank-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bank' viewBox='0 0 16 16'%3E%3Cpath d='m8 0 6.61 3h.89a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v7a.5.5 0 0 1 .485.38l.5 2a.498.498 0 0 1-.485.62H.5a.498.498 0 0 1-.485-.62l.5-2A.5.5 0 0 1 1 13V6H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 3h.89zM3.777 3h8.447L8 1zM2 6v7h1V6zm2 0v7h2.5V6zm3.5 0v7h1V6zm2 0v7H12V6zM13 6v7h1V6zm2-1V4H1v1zm-.39 9H1.39l-.25 1h13.72z'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 3px;
    background-size: cover;
}

.custom-report-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 4px;
    background-size: cover;
}

.custom-chat-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bell-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.custom-settings-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159-.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764-.415-1.6.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 4px;
    background-size: cover;
}

.custom-merchandise-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-shop-window' viewBox='0 0 16 16'%3E%3Cpath d='M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.37 2.37 0 0 1 9.875 8 2.37 2.37 0 0 1 8 7.083 2.37 2.37 0 0 1 6.125 8a2.375 2.375 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0 1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0M1.5 8.5A.5.5 0 0 1 2 9v6h12V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5m2 .5a.5.5 0 0 1 .5.5V13h8V9.5a.5.5 0 0 1 1 0V13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 4px;
    background-size: cover;
}

.custom-revenue-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-cash-coin' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8m5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0'/%3E%3Cpath d='M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195z'/%3E%3Cpath d='M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083q.088-.517.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1z'/%3E%3Cpath d='M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 6 6 0 0 1 3.13-1.567'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 6px;
    background-size: cover;
}

.custom-expense-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-wallet-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2A1.5 1.5 0 0 0 0 3.5v2h6a.5.5 0 0 1 .5.5c0 .253.08.644.306.958.207.288.557.542 1.194.542s.987-.254 1.194-.542C9.42 6.644 9.5 6.253 9.5 6a.5.5 0 0 1 .5-.5h6v-2A1.5 1.5 0 0 0 14.5 2z'/%3E%3Cpath d='M16 6.5h-5.551a2.7 2.7 0 0 1-.443 1.042C9.613 8.088 8.963 8.5 8 8.5s-1.613-.412-2.006-.958A2.7 2.7 0 0 1 5.551 6.5H0v6A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 4px;
    background-size: cover;
}

.hide {
    color: white;
    padding-left: 15px;
    cursor: pointer;
    opacity: 0.5;
}

.nav-scrollable .nav-link.profile-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: white !important;
}


    .nav-scrollable .nav-link.profile-link span {
        font-size: 0.8rem;
        opacity: 0.8;
        color: white !important;
        cursor: pointer;
    }

.nav-link {
    color: white !important;
}

.bi-person-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23ffffff' d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.15rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: 4px;
    background-size: cover;
}

.profile-details, .profile-details:before, .profile-details:after {
    color: white !important;
}

.change-btn, .change-btn:before, .change-btn:after {
    background-color: #cedddd;
    color: black;
}

main {
    flex: 1;
}

.sidebar {
    background: rgb(51,71,104);
    background: #17223a;
}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-scrollable .nav-link.profile-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: white !important;
}

    .nav-scrollable .nav-link.profile-link span {
        font-size: 0.8rem;
        opacity: 0.8;
        color: white !important;
    }

@media (min-width: 661px) {
    .navbar-toggler {
        display: none;
    }



    .nav-scrollable {
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

@media (max-width: 767.98px) {
    .top-row {
        flex-direction: column;
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
    }

    .user-profile {
        margin-bottom: 2px;
    }

    .themebtn {
        margin-right: 20px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        border-radius: 5px;
        color: white;
        margin-bottom: 5px;
    }

    .greeting {
        margin-bottom: -12px;
    }
}

.sidebar-toggle {
    position: fixed;
    top: 0.5rem;
    left: 1rem;
    z-index: 10000;
    background-color: #0e1423;
    color: white;
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1055;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item a:hover {
        background-color: rgba(255, 255, 255, 0.09);
        color: white;
        border-radius: 10px;
    }

    .nav-item a.active {
        background-color: rgba(255, 255, 255, 0.37);
        color: white;
    }

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: transparent;
    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

.top-row {
    background-color: #0e1423;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 5px;
    align-items: center;
}



.navbar-brand {
    font-size: 1.1rem;
}

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    /*.top-row ::deep a, .top-row ::deep .btn-link {
                margin-left: 0;
            }*/
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 320px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* .top-row.auth ::deep a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }*/

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

.change-btn, .change-btn:before, .change-btn:after {
    background-color: #cedddd;
    color: black;
}

.themebtn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    color: white;
    margin-left: 90px;
    margin-bottom: 15px;
}

.fab {
    position: fixed;
    bottom: 40px;
    right: 35px;
    width: 70px;
    height: 65px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: background-color 0.3s ease;
}

    .fab img {
        width: 55px;
        height: 65px;
        object-fit: contain;
    }

    .fab:hover {
        background-color: #333;
    }

.fab-container {
    position: fixed;
    bottom: 40px;
    right: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9999;
}

.fab-label {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
}

/*  Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .fab {
        width: 56px;
        height: 56px;
        bottom: 110px;
        right: 25px;
    }

        .fab img {
            width: 45px;
            object-fit: contain;
            height: 40px;
        }

        .fab:hover {
            background-color: #333;
        }

    .fab-label {
        font-size: 12px;
        padding: 2px 5px;
    }

    .fab-container {
        bottom: 40px;
        right: 30px;
    }
}


@media (min-width: 661px) {
    .navbar-toggler {
        display: none !important;
    }

    .nav-scrollable {
        transform: translateX(0) !important;
        position: sticky !important;
        top: 0;
        height: 100vh;
        overflow-y: hidden;
    }
}

.nav-scrollable {
    position: fixed;
    top: 0;
    left: 0;
    width: 290px;
    height: 90vh;
    background: #17223a;
    z-index: 2;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}


.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
    display: block;
    border: none;
}

.notification-container1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
   /* margin-left: 50%;*/
    overflow: hidden;
}

.notification-wrapper1 {
    background-color: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    max-width: 100%;
    height: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    vertical-align: central;
}

.panel-title1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
}
    .delete-dialog-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

.delete-dialog-content {
    background: var(--bg-popup);
    color: var(--text-popup);
    padding: 25px 30px;
    border-radius: 12px;
    text-align: center;
    width: 450px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    animation: fadeIn 0.3s ease-in-out;
}

.delete-title {
    background: var(--bg-popup);
    color: var(--text-popup);
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.delete-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    font-size: 14px;
    color: #856404;
    background-color: #fff3cd;
    padding: 8px 12px;
    border-radius: 6px;
}

.warning-icon {
    color: #ffc107;
    margin-right: 6px;
    margin-top: -12px;
    font-size: 18px;
}

/* Small fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .navbar-toggler {
        display: block !important;
    }

    .sidebar {
        display: block !important;
        width: 320px;
        transition: all 0.3s;
    }
}

.dialog-buttons {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-around;
}

.notification-scroll {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
    max-height: 100%;
}


    .notification-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .notification-scroll::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 3px;
    }

.notification-item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .notification-item:last-child {
        border-bottom: none;
    }

.highlight {
    background-color: yellowgreen;
}

.notification-text {
    font-size: 0.95rem;
    color: #333;
    flex: 1;
    margin-right: 12px;
    line-height: 1.4;
}

.notification-time {
    font-size: 0.75rem;
    color: #999;
    white-space: nowrap;
}

.custom-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: block;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    padding: 0.25rem 0;
    min-width: 200px;
}

    .custom-dropdown .dropdown-item {
        width: 50%;
        padding: 0.5rem 1rem;
        border: none;
        background: none;
        text-align: left;
        color: #212529;
    }

        .custom-dropdown .dropdown-item:hover {
            background-color: #f8f9fa;
        }


.small-button {
    width: 30%;
    height: 40px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    gap: 10px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s;
}

    .small-button :hover {
        background-color: #0277bd;
    }

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > .dropdown-menu {
    margin-top: -0.5rem;
}

.modal-content2 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1055;
    /*background-color: white;*/
    background: var(--bg-popup);
    color: var(--text-popup);
}

@media (max-width: 768px) {
    .table {
        overflow-x: auto;
        display: block;
    }
}

.excel-button {
    width: 150px;
    height: 40px;
    padding: 5px;
    margin-top: 10px;
    background-color: seagreen;
    color: #fff;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    float: right;
    transition: background-color 0.3s;
    margin-left: 18px;
}

    .excel-button:hover {
        background-color: #333;
    }

.notification-badge {
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    position: absolute;
    top: 0;
    right: 0;
}

.notification-dropdown {
    position: absolute;
    top: 30px;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    max-height: 300px;
    overflow-y: auto;
    width: 300px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}


/*.content-container {
    position: relative;
    min-height: 300px;
    z-index: 1;*/ /* keep it low */
/*}*/
.content-container {
    min-height: 300px; /* keep the height if you want */
    position: static; /* default, no stacking context */
    z-index: auto; /* no competition */
}

.table-wrapper {
    position: relative; /* new relative parent */
    min-height: 300px; /* keep your layout stable */
    z-index: 1;
}
/*.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.0);  White with 80% opacity 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}*/

.extracted-text {
    line-height: 1;
    font-family: sans-serif;
    white-space: pre-line;
}

/* The spinner animation */
.spinner {
    width: 60px;
    height: 60px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #17223a;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    justify-content: center;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fab_penny {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 64px;
    height: 60px;
    border-radius: 50%;
    background-color: #0078D4;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-panel {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 400px;
    height: 600px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 999;
    overflow: hidden;
}

.popup-close {
    background: none;
    border: none;
    font-size: 18px;
    position: absolute;
    top: 8px;
    right: 20px;
    cursor: pointer;
    z-index: 1300;
    color: aliceblue;
}

@media screen and (max-width: 768px) {

    .popup-panel {
        max-width: 95vw; /* panel will shrink if screen smaller */
        max-height: 90vh; /* also prevent it from being too tall */
        width: auto;
    }
}

@media (max-width: 768px) {
    .fab_penny {
        width: 50px;
        height: 50px;
    }
}

.import-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 150px;
    padding: 10px;
    border: 4px ridge #007acc;
    border-radius: 12px;
    background-color: var(--bg-popup);
    color: var(--popup-heading);
    width: 30%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .import-container {
        width: 80%;
        margin-top: 50px; /* extra space for mobile */
    }
}

.import-container h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--heading-color);
}

.import-container h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #003d66;
}

.upload-section {
    margin-bottom: 20px; /* Space between upload buttons */
    width: 100%;
}

.upload-label-text {
    margin-bottom: 6px;
    font-size: 15px;
    color: var(--popup-heading);
    font-weight: 600;
    font-family: 'Segoe UI', sans-serif;
}

.file-upload-label {
    display: inline-block;
    padding: 10px 10px;
    background-color: #007acc;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    position: relative;
}

    .file-upload-label:hover {
        background-color: #005c99;
    }

    .file-upload-label .upload-icon {
        margin-right: 8px;
    }

.file-input {
    display: none;
}

.status-message {
    margin-top: 15px;
    font-size: 14px;
    color: #333;
}


.login-link a:hover {
    text-decoration: underline;
}



/* signup icons  */

.step-tracker {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0 30px;
    gap: 30px;
}

.step {
    display: flex;
    align-items: center;
    position: relative;
}

.icon {
    width: 40px;
    height: 40px;
    background-color: #ccc;
    color: white;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.3s;
}

.step.active .icon {
    background-color: green;
}

.line {
    width: 40px;
    height: 4px;
    background-color: #ccc;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.step:last-child .line {
    display: none;
}

.horizontal-align {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}


.signup-heading {
    color: #001f3f;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 24px;
}
/*styling for photo on the edit user page*/
.photo-preview-center {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.round-photo-large {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ccc;
}

.photo-preview {
    position: relative;
    display: inline-block;
}

    .photo-preview img {
        max-width: 200px;
        max-height: 200px;
        border-radius: 5px;
    }

.remove-photo {
    position: absolute;
    top: -4px;
    right: -2px;
    background: red;
    color: white;
    border: none;
    font-size: 14px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 18px;
}

.tr-report {
    font-style: italic;
    background-color: #638ae6;
}

.step-buttons {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* space between buttons */
    margin-top: 10px;
}

.circle-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #001f3f;
    color: white;
    font-weight: bold;
    font-size: 26px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .circle-button span {
        display: inline-block;
        transform: translateX(12px);
    }

    .circle-button:hover {
        background-color: #003366;
    }

.btn-primary {
    background-color: #001f3f;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.login-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    white-space: normal;
    word-wrap: break-word;
    width: 100%;
    max-width: 100%;
    padding: 0 5px;
}

    .login-link a {
        color: #001f3f;
        font-weight: bold;
        text-decoration: none;
        word-break: break-word;
    }

        .login-link a:hover {
            text-decoration: underline;
        }

@media (max-width: 480px) {
    .login-link {
        font-size: 0.8rem;
    }
}


/* signup icons  */

.step-tracker {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0 30px;
    gap: 30px;
}

.step {
    display: flex;
    align-items: center;
    position: relative;
}

.icon {
    width: 40px;
    height: 40px;
    background-color: #ccc;
    color: white;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.3s;
}

.step.active .icon {
    background-color: green;
}

.line {
    width: 40px;
    height: 4px;
    background-color: #ccc;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.step:last-child .line {
    display: none;
}

.horizontal-align {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* Style for back button*/
.back-btn {
    background: #17223a;
    color: white;
    padding: 4px 11px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin: 10px;
    font-weight: 600;
}
/* Style for page heading*/
.page-heading-underline {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    position: relative;
    margin-bottom: 20px;
}

    .page-heading-underline::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -5px;
        width: 60px;
        height: 4px;
        background-color: #17223a;
        border-radius: 2px;
    }
/* Container to hold input + spinner */
.input-with-spinner {
    position: relative;
    display: inline-block;
    width: 100%;
}
    /* Give input extra right padding so spinner doesn't overlap text */
    .input-with-spinner input {
        padding-right: 35px;
        box-sizing: border-box;
    }
/* The actual loading spinner */
.spinnersmall {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 3px solid #e0e0e0;
    border-top: 3px solid #007acc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
}
/* Rotation animation */
@keyframes spin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

.modal-transaction {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 10px;
    overflow: auto;
}

.modal-content-transaction {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* For very small screens like mobile phones */

@media (max-width: 480px) {

    .modal-content-transaction {
        padding: 15px;
        width: 95%;
        max-height: 85vh;
        font-size: 14px;
    }
}

.modal-content-transaction {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.modal-body-transaction {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 10px;
}

.modal-footer-transaction {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    background: #fff;
    position: sticky;
    bottom: 0;
}


/* Backdrop for Donor Modal */
.modal-backdrop-donor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    padding: 10px;
    overflow: auto;
}

/* Donor Modal Content */
.modal-content-donor {
    background: white;
    padding: 25px;
    border-radius: 8px;
    width: 90%; /* responsive width for smaller screens */
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

/* Responsive behavior for smaller devices */
@media (max-width: 480px) {
    .modal-content-donor {
        padding: 15px;
        width: 95%;
        max-height: 85vh;
        font-size: 14px;
    }
}

.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Status colors */
.badge-status {
    background-color: var(--status-bg);
    color: var(--status-text);
}

.badge-warning-custom {
    background-color: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.95rem;
}

    /* Table Head */
    .custom-table thead th {
        padding: 12px;
        text-align: left;
        background-color: var(--table-header-bg2);
        color: var(--table-header-text);
        font-weight: 600;
    }

    /* Table Body */
    .custom-table tbody td {
        padding: 10px;
        border-bottom: 1px solid var(--table-border);
        color: var(--table-text);
    }

    /* Striped rows */
    .custom-table tbody tr:nth-child(even) {
        background-color: var(--table-striped-bg);
    }

    /* Hover effect */
    .custom-table tbody tr:hover {
        background-color: var(--table-hover-bg);
        transition: background-color 0.3s ease;
    }

.forgot-password-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 85vh;
    background-color: #f8f9fa; /* light background */
}

.forgot-password-card {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    text-align: center;
    width: 450px;
}

.icon-container {
    margin-bottom: 20px;
}

.input-field-forgot {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    font-size: 0.95rem;
}


.forgot-password-header {
    position: absolute;
    top: 15px;
    left: 15px;
    margin: -10px;
}

.forgot-password-page {
    background: #17223a;
    padding: 15px;
    color: white;
}

signup-heading {
    color: #001f3f;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 24px;
}


/*Chatbot Image Animation*/
.chatbot-img {
    width: 62px;
    height: 88px;
    animation: bounceDance 2s infinite, glow 2s infinite alternate;
}

@keyframes bounceDance {
    0%,100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-8px) rotate(6deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(-8px) rotate(-6deg);
    }
}

@keyframes glow {
    from {
        filter: drop-shadow(0 0 3px #00bfff);
    }

    to {
        filter: drop-shadow(0 0 12px #00bfff);
    }
}
/*Typewriter Text Animation*/
.typewriter-text {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #000;
    width: 0;
    animation: typing 2s steps(17, end) forwards, blinkCursor 0.7s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 17ch;
    }
    /* number of characters in "Ask me anything!" */
}

@keyframes blinkCursor {
    50% {
        border-color: transparent;
    }
}

.fab_penny {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border: none;
    background: transparent !important; /* remove blue/gray background */
    box-shadow: none !important; /* remove shadow */
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    outline: none;
    z-index: 9999; /* ensure on top */
}

    .fab_penny img {
        width: 64px; /* increase width */
        height: 285px; /* increase height proportionally (original ratio 62x88 ≈ 0.7) */
        object-fit: contain;
        background: transparent !important;
    }




.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px); /* This creates the blur effect */
    background-color: rgba(0, 0, 0, 0.3); /* dim background */
    z-index: 999; /* behind popup */
}

.logout-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-in-out;
}

.popup-content {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    width: 320px;
    animation: slideUp 0.3s ease-in-out;
}



.popup-buttons2 {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.logo-container2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    display: block;
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: transform 0.2s;
    border: 3px solid transparent; /* border invisible at first */
    border-radius: 50%; /* make it circular */
    background-color: transparent;
}

    .logo-container2:hover {
        transform: scale(1.1);
    }

.logo2 {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.step.active .logo-container2 {
    border-color: #28a745; /* green outline only */
}

.custom-small {
    margin: 4px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 6px;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}

.modalexpense {
    background: white;
    padding: 10px;
    margin: 5% auto; /* vertical spacing relative to viewport */
    width: 90%; /* width relative to viewport */
    max-width: 400px; /* prevents it from getting too big on large screens */
    border-radius: 10px;
    z-index: 1000;
    overflow: auto;
    box-sizing: border-box; /* include padding in width */
}

    .modalexpense.donation-modal {
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        width: 95%; /* responsive width */
        max-width: 900px; /* max width for large screens */
        max-height: 80vh; /* keep inside viewport */
        overflow-y: auto; /* scroll if content is too tall */
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

/* Optional: for very small screens */
@media (max-width: 576px) {
    .modalexpense {
        padding: 15px;
        width: 95%;
        margin: 10px auto;
    }

        .modalexpense.donation-modal {
            padding: 15px;
            width: 98%;
            max-width: 100%;
        }
}

.table-container {
    flex: 1;
    overflow-y: auto; /* makes list scrollable */
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

a {
    color: dodgerblue;
    text-decoration: none;
    cursor: pointer;
}

    a hover {
        text-decoration: underline;
        color: darkblue;
        cursor: pointer;
    }

.custom-card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: none;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    background: #fff;
    padding: 1rem;
    max-width: 100%;
}

@media (min-width: 576px) {
    .custom-card {
        max-width: 540px;
        margin: 0 auto 1.5rem auto;
    }
}

@media (min-width: 768px) {
    .custom-card {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .custom-card {
        max-width: 960px;
    }
}


.custom-dropdown {
    position: relative;
}

.dropdown-box {
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    margin-top: 5px;
    min-width: 160px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 10;
    padding: 10px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    cursor: pointer;
}

    .dropdown-item:hover {
        background-color: #f0f0f0;
    }

.dropdown-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.small-text {
    font-size: 1.25rem; /* smaller than default */
}

.nav-link {
    position: relative;
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        left: 0;
        bottom: 0;
        background-color: #007BFF;
        transition: width 0.3s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: 100%;
    }

    .nav-link:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px #0056b3;
        color: #00bcd4;
    }

    .nav-link:active {
        transform: translateY(2px);
        box-shadow: 0 2px #007b8a;
    }

.btn-custom {
    background-color: #fff;
    color: #343a40; /* dark gray text + dropdown arrow */
    border: 1px solid #ccc;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .btn-custom:hover {
        background-color: #f8f9fa;
        color: #000;
        border-color: #bbb;
    }

    .btn-custom i {
        color: inherit; /* icon follows text color */
        font-size: 1rem;
        line-height: 1;
    }

    /* Make sure Bootstrap’s default arrow uses our dark gray */
    .btn-custom.dropdown-toggle::after {
        border-top-color: currentColor;
    }


/* Black overlay */
.popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* subtle dark overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
/* Popup background and text styling */
.popup {
    background-color: #000; /* black background */
    color: #fff; /* white text */
    padding: 15px 20px;
    text-align: left;
    border-radius: 8px;
    width: 200px; /* smaller width */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* full width for lines */
    font-family: monospace;
    font-size: 14px;
    line-height: 1.6;
}
/* Title */
.popup-title {
    font-size: 15px;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
}

.popup-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .popup-buttons button {
        background: none; /* remove button shape */
        border: none; /* no border */
        color: #fff; /* white text */
        padding: 8px 0;
        font-size: 14px;
        text-align: left;
        cursor: pointer;
        border-bottom: 1px solid #555; /* gray line between each */
    }

        .popup-buttons button:last-child {
            border-bottom: none; /* remove line for last item */
        }

        .popup-buttons button:hover {
            text-decoration: underline; /* subtle hover effect */
        }


qb-filter-bar {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 15px;
}

.qb-tab {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    color: #555;
    font-weight: 500;
}

    .qb-tab:hover {
        color: #000;
    }

    .qb-tab.active {
        color: #007bff; /* QuickBooks blue */
        font-weight: 600;
    }

        .qb-tab.active::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #007bff;
            border-radius: 2px 2px 0 0;
        }

top-controls {
    display: flex;
    flex-wrap: nowrap; /* keep all in one line */
    align-items: center;
    gap: 10px;
}

.top-controls input,
.top-controls select,
.top-controls button {
    height: 30px;
    font-size: 0.85rem;
}

.search-container input {
    width: 180px;
}

.date-range-container input {
    width: 120px;
}

#pageSize {
    width: 70px;
}

.display-dropdown .btn {
    width: auto;
    padding: 4px 8px;
}

.uncategorize-btn {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.2s ease;
}

    .uncategorize-btn:hover {
        background-color: darkred;
    }

.undo-btn {
    background-color: slategrey;
    color: white;
    border: none;
    margin-left: 2px;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}

    .undo-btn:hover {
        background-color: #17223a;
    }

/ /* Main container for side-by-side layout */
.invoice-sections-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Equal width sections */
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
}

/* Grid styling inside each section */
.invoice-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    background: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Bill To and Ship To should span full width */
.full-width {
    grid-column: span 2;
}


.input-field:focus {
    border-color: #007bff;
    outline: none;
}

/* Responsive Design */
@media (max-width: 900px) {
    .invoice-sections-container {
        grid-template-columns: 1fr; /* Stack vertically */
    }
}

.nav-item.dropdown {
    position: relative;
    z-index: 1100;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 90%; /* adjust as needed */
    min-width: 200px;
    background-color: #f8f9fa; /* consistent background */
    border: 1px solid #dee2e6;
    border-radius: 5px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    z-index: 2000;
    padding: 0;
}

    .dropdown-menu.show {
        display: block;
    }

/* Submenu items */
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #212529; /* normal text color */
    text-decoration: none;
    background-color: transparent; /* no white flash */
}

.home-page .nav-item.dropdown:hover .dropdown-menu {
    display: none !important;
}

.home-page .nav-item.dropdown .dropdown-menu.show {
    display: none !important;
}

/* Hover effect */
.dropdown-item:hover {
    background-color: #e9ecef;
    color: #212529 !important;
}

/* Override NavLink active and hover states */
.dropdown-item.active,
.dropdown-item.active:hover,
.dropdown-item:focus,
.dropdown-item:focus:hover {
    color: #212529 !important;
    background-color: #e9ecef;
}

/* Main link styling */
.nav-link.dropdown-toggle {
    background-color: transparent;
    border: none;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    color: #212529;
    outline: none;
    box-shadow: none;
}

    .nav-link.dropdown-toggle::before,
    .nav-link.dropdown-toggle::after {
        content: none;
    }

.custom-dropdown-inflow {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #17223a;
    color: white;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease-in-out;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(-45deg, transparent 50%, #555 50%);
    background-position: right 12px center, right 6px center;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}

.custom-dropdown:hover {
    border-color: #0078D7;
    box-shadow: 0 2px 6px rgba(0, 120, 215, 0.2);
}

.custom-dropdown:focus {
    border-color: #0078D7;
    box-shadow: 0 0 0 3px rgba(0, 120, 215, 0.3);
}

.bank-summary-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    allows cards to wrap on smaller screens margin: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bank-summary-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 20px 25px;
    max-width: 380px;
    width: 100%;
    transition: transform 0.2s;
}

    .bank-summary-card:hover {
        transform: translateY(-5px);
    }

@media (max-width: 768px) {
    .bank-summary-card {
        max-width: 300px;
        padding: 15px 20px;
    }
}

For mobile devices
@media (max-width: 480px) {
    .bank-summary-container

{
    margin: 10px;
}

.bank-summary-card {
    max-width: 100%;
    padding: 10px 15px;
}

}

.card-title {
    font-size: 1rem;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.form-card3 {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 30px;
    max-width: 500px; /* adjust as needed */
    width: 100%;
    margin: 0 auto; /* center it */
}


.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

    .summary-item:last-child {
        border-bottom: none;
    }

    .summary-item span {
        display: block;
        font-size: 1rem;
        color: #555;
    }

.total-amount {
    font-weight: bold;
    font-size: 1.1rem;
    color: #222;
}

.transaction-count {
    font-size: 0.85rem;
    color: #888;
}

.inflow .total-amount {
    color: #28a745; /* green for inflows */
}

.outflow .total-amount {
    color: #dc3545; /* red for outflows */
}

.date-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
    font-size: 14px;
}

    .date-filter label {
        font-weight: bold;
        margin-right: 2px;
    }

    .date-filter input[type="date"] {
        max-width: 130px;
        padding: 3px 6px;
        font-size: 14px;
    }

.btn-wrapper {
    display: inline-block;
    position: relative;
    margin: 5px;
}

button {
    position: relative;
    padding-right: 35px; /* space for nested + */
}

.nested-plus {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: #FFFFFF;
    font-weight: bold;
    cursor: pointer;
    font-size: 18px; /* made it a bit bigger */
    transition: transform 0.2s ease;
    border: none; /* no border */
    padding: 0; /* no padding */
}

    /* Pop out on hover */
    .nested-plus:hover {
        transform: translateY(-50%) scale(1.5);
    }

    /* Tooltip */
    .nested-plus::after {
        content: "Open new tab"; /* tooltip text */
        position: absolute;
        bottom: 120%; /* above the + */
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: #fff;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 5px;
        opacity: 0;
        pointer-events: none;
        white-space: nowrap;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /* Show tooltip on hover with smooth fade/slide */
    .nested-plus:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px);
    }

.loading-indicator2 {
    text-align: center;
    padding: 40px 0;
}

.spinner2 {
    border: 4px solid #f3f3f3; /* light gray background */
    border-top: 4px solid #007bff; /* blue spinner */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.bank-header-container {
    display: flex;
    align-items: center; /* vertically center items */
    gap: 20px; /* space between summary card and filters */
}

.bank-summary-container {
    flex: 0 0 300px; /* fixed width for summary card */
}

.filters-container {
    display: flex;
    align-items: center;
    gap: 10px; /* space between search and dates */
}

.input-field2 {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}



.close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.clickable-amount {
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
}
/* Background overlay */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Ensures it appears above tables and other content */
}

/* Modal container */
.custom-modal {
    background: #fff;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: fadeIn 0.3s ease-in-out;
    position: relative;
    z-index: 10000; /* Modal content stays on top of the overlay */
}

/* Modal header */
.custom-modal-header {
    background: var(--background-modal);
    /*background: #f5f5f5;*/
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

    .custom-modal-header h3 {
        margin: 0;
        font-size: 18px;
    }

/* Close button */
.custom-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #333;
}

/* Modal body */
.custom-modal-body {
    background: var(--background-modal);
    padding: 20px;
}

/* Options grid */
.options-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Modal Overlay - dark background */
.modal-overlay-donation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Always on top of everything */
}

/* Modal box */
.modal-dialog-donation {
    /* background: white;*/
    background: var(--background-modal);
    color: var(--text-secondary);
    border-radius: 10px;
    width: 600px;
    max-width: 85%;
    padding: 20px;
    position: relative;
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Header and footer */
.modal-header-donation,
.modal-footer-donation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-footer-donation {
    margin-top: 20px;
    text-align: center;
}

/* Modal body with scroll if needed */
.modal-body-donation {
    background: var(--background-modal);
    color: var(--text-secondary);
    max-height: 720px;
    overflow-y: auto;
    margin-top: 15px;
    padding-right: 10px;
}

.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
    /*  background: #fff;*/
    color: var(--filter-color);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
}

.filter-item {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    flex: 1;
}

.filter-container.compact .filter-item {
    flex: 0;
    min-width: auto;
}

    .filter-item label {
        font-size: 12px;
        color: var(--filter-item);
        margin-bottom: 5px;
    }

.input-fields {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background-color: #fafafa;
    transition: all 0.2s ease;
    height: 38px;
    box-sizing: border-box;
}

    .input-fields:focus {
        border-color: #007bff;
        outline: none;
        background-color: #fff;
    }

.filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-left: auto;
}


.btn-successs {
    background: #28a745;
    color: white;
    margin-top: 8px;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

    .btn-successs:hover {
        background: #218838;
    }

.btn-primarys {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    margin-top: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

    .btn-primarys:hover {
        background: #0056b3;
    }

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

    .filter-actions {
        margin-left: 0;
    }
}

.progress-container {
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    position: relative;
    margin-bottom: 15px;
    margin-top: -18px;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #3498db;
    transition: width 0.5s ease;
}

.apply-button {
    background-color: #007bff;
    color: white;
    border: none;
    margin-top: 10px;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
}

    .apply-button:hover {
        background-color: #0056b3;
    }

.dropdown3-content {
    position: absolute;
    background-color: #0e1423;
    min-width: 160px;
    padding: 5px 0 5px 15px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-top: -10px;
    transition: all 0.3s ease;
    z-index: 1000;
    color: #fff;
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    height: auto;
    max-height: none;
    overflow: visible;
}

    .dropdown3-content a {
        color: #fff;
        padding: 8px 12px;
        text-decoration: none;
        display: block;
        white-space: nowrap;
    }

        .dropdown3-content a:hover {
            text-decoration: underline;
        }


@media screen and (max-width: 500px) {
    .dropdown3-content {
        min-width: 120px;
        max-width: 90vw;
        padding-left: 10px;
    }
}
#calendar {
    max-width: 1200px;
    margin: 20px auto;
    padding: 10px;
}

.fc-toolbar-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.fc-daygrid-event {
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 0.85rem;
}

.fc-button {
    border-radius: 5px;
    font-weight: 500;
    margin-top: 3px;
}
.fc .fc-button.fc-button-primary {
    min-width: 80px;
    padding: 0.25rem 0.75rem;
    margin-top:3px;
}
.btn-view {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

    .btn-view:hover {
        background-color: #0056b3;
    }

/* Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    
}

/* ✨ Smaller Modal Box */
.modal-content-large {
    background: var(--background-modal);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 80%;
    max-width: 950px;
    height: 80vh;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e0e0e0;
    background-color: var(--background-modal);
    color: var(--text-secondary);
}

    .modal-header h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #333;
    }

.btn-close-icon {
    background: none;
    border: none;
    font-size: 32px;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
}

    .btn-close-icon:hover {
        color: #000;
    }


.modal-body-audit {
    display: flex;
    flex: 1;
    overflow: hidden;
    color: var(--text-secondary);
    background-color: var(--background-modal);
}

/* Left section */
.audit-main-section {
    flex: 1;
    padding: 25px;
   background-color: var(--background-modal);
    overflow-y: auto;
    color: var(--text-secondary);
}

/* Right sidebar */
.audit-sidebar {
    width: 300px;
    background-color: var(--background-modal);
    color: var(--text-secondary);
    border-left: 1px solid #e0e0e0;
    padding: 20px;
    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.sidebar-title {
    font-weight: 600;
    font-size: 16px;
}

.btn-close-sidebar {
    background: none;
    border: none;
    font-size: 28px;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.view-mode-selector {
    margin-bottom: 20px;
}

    .view-mode-selector label {
        display: block;
        font-size: 13px;
        color: #666;
        margin-bottom: 5px;
    }

.form-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.timeline {
    margin-top: 20px;
}

.timeline-item {
    padding: 15px;
    background: #d4edda;
    border-radius: 6px;
    margin-bottom: 10px;
}

    .timeline-item.active {
        background: #d4edda;
    }

.timeline-date {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.timeline-user {
    font-size: 13px;
    color: #666;
}

.audit-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.audit-title {
    font-size: 15px;
}

.entity-link {
    color: #007bff;
    cursor: pointer;
}

    .entity-link:hover {
        text-decoration: underline;
    }

.btn-print {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
}

    .btn-print:hover {
        background: #e0e0e0;
    }

.audit-subtitle {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

.section-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 20px 0;
}

.audit-entry {
    margin-bottom: 25px;
}

.entry-header {
    margin-bottom: 15px;
    font-size: 14px;
}

    .entry-header strong {
        /*color: #333;*/
        color: var(--text-secondary);
    }

.entry-details {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.detail-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row {
    display: grid;
    grid-template-columns: 120px 1fr 120px 1fr;
    gap: 15px;
    font-size: 13px;
}

.detail-label {
    color: var(--text-secondary);
  /*  color: #666;*/
    font-weight: 500;
}

.detail-value {
    color: var(--text-secondary);
    /* color: #333;*/
}

.details-table-container {
    margin-top: 20px;
    overflow-x: auto;
}

.details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .details-table thead {
        background: #f0f0f0;
    }

    .details-table th {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
        font-weight: 600;
        font-size: 11px;
        color: #666;
    }

    .details-table td {
        padding: 10px;
        border: 1px solid #ddd;
    }

    .details-table .no-data {
        text-align: center;
        color: #999;
        font-style: italic;
    }

/* Responsive */
@media (max-width: 1024px) {
    .audit-sidebar {
        display: none;
    }

    .modal-content-large {
        width: 98%;
    }
}