:root {
    --fmi-blue-lightest: #66a3cd;
    --fmi-blue-lighter: #3385bd;
    --fmi-blue: #0067ad;
    --fmi-blue-darker: #00528a;
    --fmi-blue-darkest: #003d67;
    --fmi-green-lightest: #bce296;
    --fmi-green-lighter: #a6d873;
    --fmi-green: #90cf50;
    --fmi-green-darker: #73b431;
    --fmi-green-darkest: #568725;
    --fmi-orange-lightest: #e1aa74;
    --fmi-orange-lighter: #d78e46;
    --fmi-orange: #cd7218;
    --fmi-orange-darker: #a45b13;
    --fmi-orange-darkest: #7b440e;
    --fmi-login-gray: #dedede;
    --danger-500: #ff0000;
}


body {
}

a {
    color: var(--fmi-blue);
}

.form-control:focus {
    border-color: var(--fmi-blue-lightest);
}

.input-group:focus-within .input-group-text {
    background-color: var(--fmi-blue);
    color: var(--bs-white) !important;
    border-color: var(--fmi-blue-lightest);
}

    .input-group:focus-within .input-group-text .form-check-input:checked {
        background-color: var(--primary-700);
        border-color: var(--fmi-blue-lightest);
    }

.input-group:focus-within .form-select {
    border-color: var(--fmi-blue-lightest);
}

.input-group:focus-within .input-group-text + .input-group-text {
    border-left: 1px solid var(--fmi-blue-lightest);
}

.disabled-link {
    color: gray;
    cursor: default; /* Change cursor to default pointer */
    pointer-events: none; /* Prevents mouse events in modern browsers */
}

.hero-section {
    background-color: var(--fmi-blue);
}

.page-link:hover {
    z-index: 2;
    color: #fff;
    background-color: var(--fmi-blue);
    border-color: var(--bs-pagination-hover-border-color);
}

.page-link:focus {
    z-index: 3;
    color: #fff;
    background-color: var(--fmi-blue);
    outline: 0;
    -webkit-box-shadow: var(--bs-pagination-focus-box-shadow);
    box-shadow: var(--bs-pagination-focus-box-shadow);
}

.page-link.active, .active > .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--fmi-blue);
    border-color: var(--fmi-blue);
}

.page-link:hover {
    z-index: 2;
    text-decoration: none;
    background-color: var(--fmi-blue) !important;
    color: #fff;
    border-color: var(--fmi-blue);
}

.app-header {
    background-color: var(--fmi-blue);
}
   
.app-sidebar {
    background-color: var(--fmi-blue);
}

.primary-nav ul li a {
    color:#fff;
}

.primary-nav ul li a:hover {
    color: var(--fmi-green);
}

.primary-nav ul li.active:not(.open):not(.has-ul) a:only-child {
    /*color: var(--app-nav-link-active-color);*/
    color: #fff;
}

.primary-nav ul li a > i::before {
    color: #fff;
}

.fa-file {
    color: #fff;
}

.st-table thead tr th {
    background-color: rgb(222,222,222);
    color: var(--fmi-blue);

}

.btn-system:hover .sa-icon, .btn-system.show .sa-icon {
    fill: rgba(144, 207, 80, 0.8);
    stroke: rgba(144, 207, 80, 0.8);
}

.bg-success-500 {
    background-color: var(--fmi-green) !important;
    color: #000 !important;
}

.bg-danger-500 {
    background-color: #f00 !important;
}

.bg-warning-500 {
    background-color: yellow  !important;
}

.st-wrapper.st-loading .st-loading-spinner {
    border: 3px solid ;
}

.st-toolbar .btn-tertiary {
    background-color: var(--fmi-blue) !important;
    border-color: var(--fmi-blue) !important;
    color: #ccc !important;
}

    .st-toolbar .btn-tertiary:hover {
        background-color: var(--fmi-blue-lighter) !important;
        border-color: var(--fmi-blue) !important;
        color: #444 !important;
    }

.st-toolbar .btn-secondary {
    background-color: var(--fmi-green-darker) !important;
    border-color: var(--fmi-green) !important;
    color: #ccc !important;
}

    .st-toolbar .btn-secondary:hover {
        background-color: var(--fmi-green-lighter) !important;
        border-color: var(--fmi-green) !important;
        color: #444 !important;
    }

.st-toolbar .btn-secondary a {
    color: #ccc !important;
}

    .st-toolbar .btn-secondary a:hover {
        color: #444 !important;
    }

.st-toolbar .btn-primary {
    background-color: var(--fmi-orange) !important;
    border-color: var(--fmi-orange-darker) !important;
    color: #fff !important;
}

    .st-toolbar .btn-primary:hover {
        background-color: var(--fmi-orange-lighter) !important;
        border-color: var(--fmi-orange) !important;
        color: #fff !important;
    }

.st-toolbar .btn-primary a {
    color: #fff !important;
}

    .st-toolbar .btn-primary a:hover {
        color: #fff !important;
    }

.st-toolbar .btn-outline-primary {
    border-color: var(--fmi-blue) !important;
    color: var(--fmi-blue) !important;
}

    .st-toolbar .btn-outline-primary:hover {
        background-color: var(--fmi-blue-lighter) !important;
        border-color: var(--fmi-blue) !important;
        color: var(--fmi-blue) !important;
    }



.btn-check:checked + .btn {
    background-color: var(--fmi-green) !important;
    border-color: var(--fmi-green) !important;
    color: #fff !important;
}

.btn-primary {
    background-color: var(--fmi-blue) !important;
    border-color: var(--fmi-blue) !important;
    color: #fff;
}

    .btn-primary:hover {
        background-color: var(--fmi-blue-lightest) !important;
        border-color: var(--fmi-blue) !important;
    }

    .btn-primary:disabled {
        background-color: var(--fmi-blue) !important;
        border-color: var(--fmi-blue) !important;
    }


.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--fmi-green-lightest);
}

.table-hover > tbody > tr:hover {
    outline: 1px solid var(--fmi-green-darker);
    z-index: 1;
    position: relative;
}

.zero-percent {
    color: #bbb;
}

.login-card {
    background-color:var(--fmi-login-gray);
}

    .login-card .forgot-password-text {
        
        margin-bottom: 1.5em;
    }

    .login-card a {
        color:var(--fmi-blue);
    }
    .login-card a.btn {
        background-color: var(--fmi-blue);
        color: #fff;
    }

    .login-card .input-container {
        position: relative;
    }

    .login-card input.form-control {
        padding-left: 30px;
    }

    .login-card i.input-icon {
        color: #000;
        position: absolute;
        left: 10px;
        pointer-events: none;
        top: 20px;
        transform: translateY(-50%);
    }

    .login-card .copyright {
        color: #000;
        font-size: .8em;
        text-align: center;
    }

    .login-card .logo-container {
        padding-bottom: 3em;
        text-align:center;
    }

.buttonContainer {
    display: flex;
    justify-content: flex-end;
}

.failed-container {
    background-color: #ff0000;
    border-radius:.5em;
    color: #ffffff;
    display: grid;
    justify-content:center;
    padding:.5em 0;
}
    .failed-container div {
        background-color: #ff0000;
        border-radius: .5em;
        color: #ffffff;
        display: flex;
        justify-content: center;
    }

#cancelButton {
    background-color: #888 !important;
    margin-right:.5em;
    width: 80px;
}

#resetButton {
    width: 130px;
}

.hidden {
    display: none;
}




/*.dataTable {
    border-collapse:initial;
}*/

.dt-container .bottom {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding-top: 0.5rem;
}

    .dt-column-header{
        background-color:#dedede;
        color:var(--fmi-blue);
        font-weight:bold;
        white-space:nowrap;
        overflow:hidden;
        padding:.6em .4em;
        text-overflow:ellipsis;
    }

     Length dropdown sits at the left, naturally, since it comes first in the DOM 
    .dt-container .bottom .dt-length {
        flex-shrink: 0;
    }

    .dt-container .bottom .dt-info {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .dt-container .bottom .dt-paging {
        margin-left: auto;  this is what pushes pagination to the far right 
    }

    .dt-container .dt-length select {
        width:10px;
    }






.dt-container .top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}

     /* Search and checkbox stay left */
    .dt-container .top .dt-filter {
        flex-shrink: 0;
    }

        .dt-container .top .dt-filter label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin: 0;
        }

             /* Remove the default "Search:" text if you don't want it */
            .dt-container .top .dt-filter label::before {
                content: none;  or keep it — just remove this rule to show it 
            }

    .dt-container .top .custom-search-extras {
        flex-shrink: 0;
    }

     /* Spacer that pushes custom buttons to the right */
    .dt-container .top::after {
        content: '';
        flex: 1;
    }


.dataTable {
    border-collapse: collapse; /* Removes space between cells */
    border-spacing: 0;
    width: 100%;
}

    .dataTable tbody tr:nth-child(odd) {
        background-color: #efefef;
        border-color: #444;
        border-width:1px;
    }

    .dataTable tbody tr td {
        border-bottom: 1px solid #ddd;
        padding: .5em .3em;
    }

.dataTable-childTable thead {
    border-collapse:collapse;
}

.dataTable-childTable thead th {
    background-color: var(--fmi-blue-lightest) !important;
    border-bottom:1px solid var(--fmi-blue-darkest);
    color: #fff;
}