::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

*::-webkit-scrollbar-track {
    background: #ffffff7d;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
}

    *::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb {
        background: #0000003b;
    }

[rf-scroll] {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    margin-right: -8px !important;
}

.custom-label-rf {
    border: var(--border-rf);
    padding: var(--padding-rf);
    border-radius: var(--border-radius-rf);
    margin: var(--margin-rf);
    /* background-color: var(--background-color-rf); */
    min-height: var(--min-height-rf);
    width: var(--width-rf);
    color: var(--color-rf);
    width: 200px !important;
    background: #f9f9f9 !important;
}
.custom-label2-rf {
    padding: var(--padding-rf);
    border-radius: var(--border-radius-rf);
    margin: var(--margin-rf);
    /* background-color: var(--background-color-rf); */
    min-height: var(--min-height-rf);
    width: var(--width-rf);
    color: var(--color-rf);
    width: 300px !important;
}
th.selectable-header[filter-item] .rf-sort-arrow::after {
    color: #969696 !important;
}

th:not(.selectable-header)[filter-item] .rf-sort-arrow::after {
    color: #ccc !important;
}
.table-rf-tbl > table tbody > tr > td {
    text-wrap-mode: nowrap!important;
}

.table-rf-tbl > table thead > tr > th{
    white-space:nowrap!important;
}
.table-rf-tbl > table thead > tr > th[order-by]::after {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    color: #0000002e !important;
    content: '\f176 \f175' !important;
    padding-top: 13px !important;
    line-height: 0 !important;
    float: right !important;
}

    .table-rf-tbl > table thead > tr > th[order-dir="asc"]::after {
        color: #0000008f !important;
        content: '\f176' !important;
        padding-top: 10px !important;
        line-height: 0 !important;
    }

    .table-rf-tbl > table thead > tr > th[order-dir="desc"]::after {
        color: #0000008f !important;
        content: '\f175' !important;
        padding-top: 15px !important;
        line-height: 0 !important;
        
    }


.summary-card {
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* 🔥 ensures equal height */
}

.summary-title {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.summary-value {
    font-size: 18px;
    font-weight: 600;
    margin-top: auto; /* pushes value to bottom */
}

/* colors */
.card-blue {
    background: #e9edf5;
}

.card-purple {
    background: #ece7f2;
}

.card-beige {
    background: #f3eadc;
}

.card-green {
    background: #eefff3;
}
.button-rf-success-outline {
    background-color: #ffffff !important;
    border: 1px solid #198754 !important;
    color: #198754 !important;
}

    .button-rf-success-outline:hover {
        background-color: #198754 !important;
        color: #FFFFFF !important;
    }

.button-rf-danger-outline {
    background-color: #ffffff !important;
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
}

    .button-rf-danger-outline:hover {
        background-color: #dc3545 !important;
        color: #FFFFFF !important;
    }

.badge-green {
    background-color: #e7fbe8 !important;
    border: 1px solid #008726 !important;
    color: #008726 !important;
}
.badge-amber {
    background-color: #fef3e1 !important;
    border: 1px solid #e27400 !important;
    color: #e27400 !important;
}
.badge-red {
    background-color: #ffd3d7 !important;
    border: 1px solid #d4041e !important;
    color: #d4041e !important;
}
.badge-red-withHover {
    background-color: #ffd3d7 !important;
    border: 1px solid #d4041e !important;
    color: #d4041e !important;
}
    .badge-red-withHover:hover {
        background-color: #d4041e !important;
        border: 1px solid #d4041e !important;
        color: #FFFFFF !important;
    }
.badge-blue {
    background-color: #f2f5f9 !important;
    border: 1px solid #4a526b !important;
    color: #4a526b !important;
}

.button-rf-green {
    background-color: #bdf2c0 !important;
    border: 1px solid #00b726 !important;
    color: #000000 !important;
}
    .button-rf-green:hover {
        background-color: #00b726 !important;
        color: #FFFFFF !important;
    }
.button-rf-amber {
    background-color: #fed7c1 !important;
    border: 1px solid #ee9758 !important;
    color: #000000 !important;
}
    .button-rf-amber:hover {
        background-color: #ee9758 !important;
        color: #FFFFFF !important;
    }
.button-rf-red {
    background-color: #ffabb3 !important;
    border: 1px solid #df001b !important;
    color: #000000 !important;
}
    .button-rf-red:hover {
        background-color: #df001b !important;
        color: #FFFFFF !important;
    }
/*#################*/
.table-rf-action-view > div:hover {
    background: #222221 !important;
    color: #FFFFFF !important;
}


.table-rf-action-view {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.table-rf-view {
    text-align: center;
    width: 75px;
    position: sticky;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: white;
}

.table-rf-action-view > div {
    flex: 0 0 27px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    width: 27px !important;
    height: 27px !important;
    border-radius: 50% !important;
    color: #222221 !important;
    box-shadow: 0 0 0 1px #222221;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
    font-size: 14px !important;
}
.table-rf-action-holder {
    display: flex;
    justify-content: center;
    gap: 10px;
}

    .table-rf-action-holder > div {
        flex: 0 0 27px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        width: 27px !important;
        height: 27px !important;
        border-radius: 50% !important;
        color: #222221 !important;
        box-shadow: 0 0 0 1px #222221;
        -webkit-transition: color 0.3s;
        -moz-transition: color 0.3s;
        transition: color 0.3s;
        font-size: 14px !important;
    }

        .table-rf-action-holder > div:hover {
            background: #222221 !important;
            color: #FFFFFF !important;
        }
/*.cex {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
}

    .cex > div {
        display: flex !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }

        .cex > div > input {
            flex: 0 0 auto !important;
        }

        .cex > div > .radio-rf-label {
            display: flex !important;
            flex: 1 1 100% !important;
            width: 100% !important;
            min-width: 0 !important;
        }

            .cex > div > .radio-rf-label > .option-rf {
                display: flex !important;
                flex: 1 1 100% !important;
                width: 100% !important;
                min-width: 0 !important;
                padding: 12px !important;
                border-radius: 8px !important;
                background: #fff !important;
                box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
                transition: all 0.2s ease !important;
            }

                .cex > div > .radio-rf-label > .option-rf:hover {
                    box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important;
                }

        .cex > div > input:checked + .radio-rf-label > .option-rf {
            box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
            border: 2px solid #6457c1 !important;
        }

        .cex > div > .radio-rf-label > .option-rf > .option-rf-textarea {
            display: flex !important;
            flex: 1 1 100% !important;
            width: 100% !important;
            min-width: 0 !important;
        }

    .cex .row {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .cex [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }*/

/*Letter badge color-codes*/
.A {
    background-color: rgba(44, 62, 80,0.3);
    color: rgb(44, 62, 80);
}

.B {
    background-color: rgba(92, 155, 209,0.3);
    color: rgb(92, 155, 209);
}

.C {
    background-color: rgba(68, 182, 174,0.3);
    color: rgb(68, 182, 174);
}

.D {
    background-color: rgba(41, 180, 182,0.3);
    color: rgb(41, 180, 182);
}

.E {
    background-color: rgba(227, 91, 90,0.3);
    color: rgb(227, 91, 90);
}

.F {
    background-color: rgba(196, 159, 71,0.3);
    color: rgb(196, 159, 71);
}

.G {
    background-color: rgba(142, 68, 173,0.3);
    color: rgb(142, 68, 173);
}

.H {
    background-color: rgba(136, 119, 169,0.3);
    color: rgb(136, 119, 169);
}

.I {
    background-color: rgba(154, 18, 179,0.3);
    color: rgb(154, 18, 179);
}

.J {
    background-color: rgba(242, 120, 75,0.3);
    color: rgb(242, 120, 75);
}

.K {
    background-color: rgba(243, 106, 90,0.3);
    color: rgb(243, 106, 90);
}

.L {
    background-color: rgba(82, 94, 100,0.3);
    color: rgb(82, 94, 100);
}

.M {
    background-color: rgba(42, 180, 192,0.3);
    color: rgb(42, 180, 192);
}

.N {
    background-color: rgba(77, 179, 162,0.3);
    color: rgb(77, 179, 162);
}

.O {
    background-color: rgba(38, 194, 129,0.3);
    color: rgb(38, 194, 129);
}

.P {
    background-color: rgba(54, 215, 183,0.3);
    color: rgb(54, 215, 183);
}

.Q {
    background-color: rgba(50, 197, 210,0.3);
    color: rgb(50, 197, 210);
}

.R {
    background-color: rgba(148, 160, 178,0.3);
    color: rgb(148, 160, 178);
}

.S {
    background-color: rgba(75, 119, 190,0.3);
    color: rgb(75, 119, 190);
}

.T {
    background-color: rgba(87, 142, 190,0.3);
    color: rgb(87, 142, 190);
}

.U {
    background-color: rgba(85, 85, 85,0.3);
    color: rgb(85, 85, 85);
}

.V {
    background-color: rgba(231, 80, 90,0.3);
    color: rgb(231, 80, 90);
}

.W {
    background-color: rgba(208, 84, 84,0.3);
    color: rgb(208, 84, 84);
}

.X {
    background-color: rgba(243, 194, 0,0.3);
    color: rgb(243, 194, 0);
}

.Y {
    background-color: rgba(135, 117, 167,0.3);
    color: rgb(135, 117, 167);
}

.Z {
    background-color: rgba(0, 150, 136,0.3);
    color: rgb(0, 150, 136);
}


.pager-rf-button.pager-active {
    background-color: #da291c !important;
    color: white !important;
}

.pager-rf-button:hover {
    border-color: #da291c !important;
}

.role-list-rf > .page-rf-header > .page-rf-header-actions > button:nth-child(2),
.user-list-rf > .page-rf-header > .page-rf-header-actions > button:nth-child(2) {
    background-color: #da291c;
    color: #ffffff;
    border: 1px solid #da291c !important;
    border-radius: 5px;
    order: 1;
}

    .role-list-rf > .page-rf-header > .page-rf-header-actions > button:nth-child(2):hover,
    .user-list-rf > .page-rf-header > .page-rf-header-actions > button:nth-child(2):hover {
        background-color: #ffffff;
        color: #da291c;
        border: 1px solid #da291c !important;
        border-radius: 5px;
        order: 1;
    }

.page-rf-header-actions > .button-rf.btn-info:before,
.container-rf-header-actions > .button-rf.btn-info:before {
    content: "\2b";
    font-family: FontAwesome;
    margin-top: 1px;
}


.row > div > .button-rf.btn-info,
.page-rf-header-actions > .button-rf.btn-info,
.container-rf-header-actions > .button-rf.btn-info {
    background-color: #da291c;
    color: #ffffff;
    border: 1px solid #da291c !important;
    border-radius: 5px;
}

    .row > div > .button-rf.btn-info:hover,
    .page-rf-header-actions > .button-rf.btn-info:hover,
    .container-rf-header-actions > .button-rf.btn-info:hover{
        background-color: #ffffff;
        color: #da291c;
        border: 1px solid #da291c !important;
        border-radius: 5px;
    }