html {
    font-size: 14px;
}

:root {
    /* Defining variables */
    --primary-color: #49C3C6;
    --action-color: #49C3C6;
    /*#823B96*/
}



@font-face {
    font-family: 'Cambria-R';
    src: url('../lib/Cambria-Font/Cambria-Font-For-Windows.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.modal-higher{
    z-index: 1061 !important;
}

#loader-wrapper, #loader-wrapper-1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#loader {
    border: 8px solid #f3f3f3; /* light grey */
    border-top: 8px solid #49C3C6; /* #3498db  */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

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

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

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.bg-custom {
    background-color: var(--primary-color);
    color: white;
}

.text-custom-color {
    color: darkblue;
}

.item-desc-column {
    /* This overrides the 'text-nowrap' from the table */
    white-space: normal !important;
    min-width: 200px; /* Ensures it doesn't get TOO small */
    max-width: 200px; /* Limits how wide it can go */
    word-break: break-word; /* Prevents long codes from breaking layout */
}

.pagination .page-item.active .page-link {
    background-color: var(--action-color) !important;
    border-color: var(--action-color) !important;
    color: #ffffff !important; /* Text color */
}

.pagination .page-link:hover {
    background-color: var(--action-color) !important;
    border-color: var(--action-color) !important;
    color: #ffffff !important;
    opacity: 0.8;
}

.pagination .page-link {
    color: var(--action-color);
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
    background-color: var(--action-color) !important; 
    color: #ffffff !important; 
}

/* Custom "On" Color */
.custom-checkbox-lab .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--action-color); 
    border-color: var(--action-color);
}

/* Custom "On" Color */
.custom-switch-lab .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--action-color); 
    border-color: var(--action-color);
}

.row-checkbox {
    accent-color: var(--action-color); 
}

.all-checkbox {
    accent-color: var(--action-color);
}

/*#49C3C6*/

.btn-info {
    background-color: var(--action-color);
    border: var(--action-color);
}
    .btn-info:hover,
    .btn-info:focus {
        background-color: var(--action-color);
        opacity: 0.8;
    }

    /* Active (Clicking) */
    .btn-info:active,
    .btn-info:visited {
        background-color: var(--action-color) !important;
        border-color: var(--action-color) !important;
        outline: none !important;
        box-shadow: none !important; /* Removes the distracting glow/shadow */
    }

.alert-custom {
    background-color: darkblue;
    color: white;
}

.card, modal {
    border: var(--primary-color);
}

    .card .card-header,.modal .modal-header {
        background-color: var(--primary-color);
        color: white;
    }

        .card .card-header .card-tools button, .modal .modal-header button {
            color: white;
        }



.delete-button-container {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    padding: 5px;
}

.table-font-size {
    font-size: 13px;
}

.table-border-fixed {
    border-collapse: separate;
    border-spacing: 0;
}

.modal-height {
    min-height: 350px;
    max-height: 400px;
}

.modal-table-max-height {
    max-height: 350px;
}

.modal-table-max-height-sm {
    max-height: 300px;
}

.table-header-bg-color {
    background-color: ghostwhite;
}

#thead th {
    background-color: ghostwhite;
    top: -1px; /* MUST be 0 */
    z-index: 2;
}

/* Default style for ALL screens (or screens up to 768px wide) */
.table-max-height {
    max-height: 300px;
    overflow-y: auto; 
}

/* Condition for larger screens (e.g., tablets and desktops, min-width: 769px) */
@media (min-width: 900px) {
    .table-max-height {
        max-height: 450px;
    }

    .modal-height {
        max-height: 500px;
    }
}