body {
    background-color: #f9f9fc;
    color: #6c7293;
}

.ps__rail-y, .ps__rail-x {
    z-index: 1;
}

.isvalid,
[isvalid] {
    border-color: var(--control-isvalid-border-color) !important;
}

.invalid,
[invalid] {
    border-color: var(--control-invalid-border-color) !important;
}

.rf-lazy-loading-off {
    display: none !important;
}

.validation-message {
    font-size: 12px;
    color: red;
}

.form-control:focus {
    outline: none !important;
    box-shadow: none;
}

:focus-visible {
    outline: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #00000050;
    opacity: 0.5; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #00000050;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #00000050;
}

.main-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    gap: 10px;
}

.main-body {
    flex: auto;
    padding: 0 15px;
}

.page-footer {
    z-index: 1;
}


.btn {
    outline: none !important;
    /*border: none !important;*/
    box-shadow: none !important;
    font-size: 14px;
    display: inline-flex;
}

    .btn.btn-info {
        background-color: rgba(54, 108, 243, 0.1);
        color: #366cf3;
        border-color: transparent;
    }

        .btn.btn-info:hover {
            background-color: #366cf3;
            color: #ffffff;
        }

    .btn.btn-light {
        color: #5c5c5c;
        background-color: #00000012;
        border-color: transparent;
    }

        .btn.btn-light:hover {
            background-color: #00000021;
            color: black;
        }

.rf-font-success {
    color: #1dc9b7 !important;
}

.rf-font-warning {
    color: #ffb822 !important;
}

.rf-font-danger {
    color: #fd397a !important;
}

.rf-font-info {
    color: #366cf3 !important;
}

.rf-logo-layout {
    min-height: 100px;
    max-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

    .rf-logo-layout img {
        width: max-content;
        height: max-content;
        max-width: 100px;
        max-height: 150px;
        border-radius: 10px;
        padding: 10px;
        box-shadow: inset 0 0 11px #00000021;
    }


.rf-reset-pass-box {
    width: 50%;
    min-width: 300px;
    max-width: 535px;
    box-sizing: border-box;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rf-reset-pass-box button {
        margin: auto;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }


/*.layout-header {
    position: sticky;
    top: -5px;
    z-index: 999;
    min-height: 60px;
}

.rf-page-header {
    -webkit-box-shadow: 0px 0px 40px 0px rgb(82 63 105 / 10%);
    box-shadow: 0px 0px 40px 0px rgb(82 63 105 / 10%);
    background: #fff;
    border-bottom: 0;
    height: 60px;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;*/
/*font-family: Poppins;*/
/*animation: top-bottom 0.3s ease-in-out;
}*/
.layoutheader-rf {
    animation: top-bottom 0.3s ease-in-out;
}

@keyframes top-bottom {
    from {
        opacity: 0;
        height: 10px;
    }

    to {
        opacity: 1;
        height: 60px;
    }
}

@keyframes top-drop {
    from {
        opacity: 0;
        top: 0px;
    }

    to {
        opacity: 1;
        top: 60px;
    }
}

@keyframes bottom-drop {
    from {
        opacity: 0;
        top: 120px;
    }

    to {
        opacity: 1;
        top: 60px;
    }
}

@keyframes menu-drop {
    from {
        opacity: 0;
        top: -10px;
    }

    to {
        opacity: 1;
        top: 50px;
    }
}

@keyframes menu-drop-2 {
    from {
        opacity: 0;
        top: -30px;
    }

    to {
        opacity: 1;
        top: 0px;
    }
}

@keyframes menu-drop-3 {
    from {
        opacity: 0;
        left: -200px;
    }

    to {
        opacity: 1;
        left: 0px;
    }
}

@keyframes menu-drop-4 {
    from {
        opacity: 1;
        left: 0;
    }

    to {
        opacity: 0;
        left: -200px;
    }
}



.rf-page-header-leading {
    /*flex: 0 0 115px;
    padding-right: 15px;*/
}

    .rf-page-header-leading > img {
    }

.rf-page-header-menu {
    /*flex: auto;*/
    display: flex;
    align-items: center;
    margin-right: 5px;
    position: relative;
}

.rf-page-header-menu-mobile,
.rf-page-header-action-mobile {
    font-size: 0px;
}

    .rf-page-header-menu-mobile > i,
    .rf-page-header-action-mobile > i {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        transition: all 0.2s ease-in-out;
    }

.rf-page-header-menu > ul,
.rf-page-header-menu > ul > li ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

    .rf-page-header-menu > ul > li {
        display: flex;
        margin-right: 5px;
        position: relative;
        max-width: 200px;
    }

        .rf-page-header-menu > ul > li ul {
            position: absolute;
            top: 50px;
            display: none;
            flex-wrap: wrap;
            background-color: white;
            box-shadow: 0px 10px 15px #00000024;
            border-radius: 5px;
            transition: all 0.1s ease-in-out;
            padding: 10px 0;
            width: 200px;
            animation: menu-drop 0.3s ease-in-out;
        }

        .rf-page-header-menu > ul > li > ul > li ul {
            top: 0;
            left: 201px;
            animation: menu-drop-2 0.3s ease-in-out;
        }

        .rf-page-header-menu > ul > li ul > li {
            flex: 0 0 100%;
            display: flex;
            position: relative;
        }

.rf-page-header-menu ul > li > a {
    flex: auto;
    color: inherit;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
    height: 36px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: keep-all;
    cursor: pointer;
}

    .rf-page-header-menu ul > li > a > i {
        display: none;
    }

    .rf-page-header-menu ul > li > a[rf-menu-expanded] ~ ul {
        display: flex;
    }

    .rf-page-header-menu ul > li > a:after {
        display: flex;
        float: right;
        width: 21px;
        height: 21px;
        align-items: center;
        justify-content: flex-end;
        content: '\f1ac';
        font-family: Flaticon2;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        font-size: 8px;
    }

    .rf-page-header-menu ul > li > a[rf-menu-expanded]:after {
        display: flex;
        float: right;
        width: 21px;
        height: 21px;
        align-items: center;
        justify-content: flex-end;
        content: '\f1b1';
        font-family: Flaticon2;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
    }

    .rf-page-header-menu ul > li > a:only-child:after {
        display: none;
    }

    .rf-page-header-menu ul > li > a.active,
    .rf-page-header-menu ul > li > a:hover,
    .rf-page-header-menu-mobile > i:hover,
    .rf-page-header-action-mobile > i:hover {
        background-color: #f7f7f7;
    }






.rf-page-header-action {
    /*flex: 0 0 255px;*/
    /*overflow: hidden;*/
    display: flex;
    align-items: center;
}

.rf-page-header-action-items {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: end;
}



.rf-page-header-action-item {
    flex: 0 0 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    color: #9ea4bc;
    font-size: 20px;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

    .rf-page-header-action-item:last-of-type {
        color: #919191;
    }

    .rf-page-header-action-item > .rf-page-header-action-item-username {
        font-size: 14px;
        margin: 0 5px;
        width: 80px;
        white-space: nowrap;
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rf-page-header-action-item > .rf-page-header-action-item-userletter {
        width: 36px;
        height: 36px;
        background-color: #f5f5f5;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 23px;
        padding-bottom: 1px;
    }

@media (max-width: 1080px) {
    .rf-page-header-menu-mobile,
    .rf-page-header-action-mobile {
        flex: auto;
        text-align: right;
        font-size: 20px;
        color: #7096f6;
        z-index: 1;
    }

        .rf-page-header-menu-mobile > i,
        .rf-page-header-action-mobile > i {
            height: 36px;
            width: 36px;
        }

    .rf-page-header-menu > ul {
        display: none;
    }

        .rf-page-header-menu > ul.True {
            display: flex;
            background-color: white;
            position: fixed;
            left: 0;
            top: 62px;
            bottom: 0;
            flex-direction: column;
            width: 300px;
            box-shadow: 5px 0px 15px #0000001a !important;
            z-index: -1;
            overflow: auto;
            animation: menu-drop-3 0.3s ease-in-out;
        }

        .rf-page-header-menu > ul > li {
            width: 100%;
            max-width: 100%;
            margin-right: 0;
            flex-wrap: wrap;
        }

            .rf-page-header-menu > ul > li ul {
                top: 0;
                animation: menu-drop-2 0.3s ease-in-out;
                position: relative;
                width: 100%;
                border-radius: 0;
                padding-left: 10px;
                box-shadow: none !important;
            }

                .rf-page-header-menu > ul > li ul > li {
                    flex-wrap: wrap;
                }

            .rf-page-header-menu > ul > li > ul > li ul {
                left: 0;
            }



    .rf-page-header-action-items {
        display: none;
    }

        .rf-page-header-action-items.True {
            display: flex;
            position: absolute;
            top: 55px;
            left: 0;
            right: 0;
            background-color: white;
            z-index: -1;
            padding: 5px 15px;
            padding-top: 10px;
            box-shadow: 0px 2px 10px #00000012;
            animation: top-drop 0.3s ease-in-out;
        }

    .rf-page-header-action {
        flex: 0 0 36px;
    }

    .rf-page-header-action-user, .rf-page-header-action-setting, .rf-page-header-action-notification, .rf-page-header-action-search {
        top: 107px !important;
    }
}

.rf-page-header-action-user, .rf-page-header-action-setting, .rf-page-header-action-notification, .rf-page-header-action-search {
    position: absolute;
    right: 15px;
    width: calc(270px + 20vw);
    max-width: 380px;
    background-color: white;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
    box-shadow: 0px 2px 12px #00000026;
    overflow: hidden;
}

    .rf-page-header-action-user.True, .rf-page-header-action-setting.True, .rf-page-header-action-notification.True, .rf-page-header-action-search.True {
        top: 60px;
        display: flex;
        animation: top-drop 0.3s ease-in-out;
    }

.rf-page-header-action-user-header, .rf-page-header-action-setting-header, .rf-page-header-action-notification-header {
    background-image: url(../image/bg-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 1.5rem;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.rf-page-header-action-user-header-left {
    flex: 0 0 60px;
    background-color: #ffb822d6;
    color: #1dc9b7;
    font-weight: 500;
    font-size: 38px;
    text-align: center;
    height: 60px;
    border-radius: 5px;
}

.rf-page-header-action-user-header-middle {
    flex: auto;
    font-weight: 500;
    font-size: 18px;
    color: #2b2d36;
    padding: 0 10px;
}

.rf-page-header-action-user-header-right {
    flex: 0 0 100px;
    background-color: #1dc9b7;
    padding: 5px 10px;
    color: white;
    border: 1px solid #ffffff66;
    border-radius: 5px;
}

.rf-page-header-action-user-body {
    flex: auto;
    overflow: auto;
}

@media (max-height: 550px) {
    .rf-page-header-action-user-body {
        max-height: 60px;
    }
}

.rf-page-header-action-user-body-item,
.rf-page-header-action-notification-body .bi-list-item {
    border-bottom: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    color: #919191 !important;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    .rf-page-header-action-user-body-item .bi-left {
        flex: 0 0 40px;
        font-size: 20px;
    }

    .rf-page-header-action-user-body-item .bi-middle {
        flex: auto;
    }

        .rf-page-header-action-user-body-item .bi-middle .bim-top {
            font-size: 14px;
        }

        .rf-page-header-action-user-body-item .bi-middle .bim-bottom {
            font-size: 14px;
            font-weight: 400;
            color: #919191 !important;
        }

    .rf-page-header-action-user-body-item .bi-right {
        font-size: 8px;
        color: #919191 !important;
    }

    .rf-page-header-action-user-body-item:hover,
    .rf-page-header-action-notification-body .bi-list-item:hover {
        color: #8d68cf !important;
        background-color: #f7f8fa;
    }



.rf-page-header-action-setting-header-top {
    flex: 0 0 100%;
    font-size: 18px;
    color: black;
    text-align: center;
    align-self: end;
}

.rf-page-header-action-setting-header-bottom {
    background-color: #1dc9b7;
    padding: 5px 10px;
    color: white;
    border: 1px solid #ffffff66;
    border-radius: 5px;
}

.rf-page-header-action-setting-body {
    display: flex;
    flex-wrap: wrap;
    height: calc(100px + 20vh);
}

    .rf-page-header-action-setting-body > a {
        flex: 1 0 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        border-color: #e5e5e5 !important;
        transition: all 0.2s ease-in-out;
    }

        .rf-page-header-action-setting-body > a:nth-of-type(1), .rf-page-header-action-setting-body > a:nth-of-type(2) {
            border-bottom: 1px solid;
        }

        .rf-page-header-action-setting-body > a:nth-child(even) {
            border-left: 1px solid;
        }

        .rf-page-header-action-setting-body > a:hover {
            background-color: #fbfbfb;
        }

        .rf-page-header-action-setting-body > a > i {
            flex: 0 0 calc(10px + 4vh);
            width: calc(10px + 4vh);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(10px + 3vh);
            color: #1acbba;
        }

        .rf-page-header-action-setting-body > a > .bi-text {
            color: #366cf3;
            font-size: calc(8px + 1vh);
            font-weight: 600;
        }

        .rf-page-header-action-setting-body > a > .bi-subtext {
            color: #8b8b8b;
            font-weight: 400;
            font-size: calc(8px + 0.6vh);
        }


.rf-page-header-action-notification-header-left {
    font-size: 18px;
    color: black;
    text-align: center;
    align-self: end;
    padding-right: 15px;
    margin-top: 20px;
}

.rf-page-header-action-notification-header-right {
    font-size: 14px;
    height: 26px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: end;
    background-color: rgba(88, 103, 221, 0.3) !important;
    color: #0a1b9f !important;
    border-radius: 5px;
}

.rf-page-header-action-notification-header-bottom {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    align-self: flex-end;
}

    .rf-page-header-action-notification-header-bottom .hi-tab-header {
        padding: 8px;
        padding-bottom: 5px;
        border-bottom: 3px solid transparent;
        cursor: pointer;
        color: #3a3a3a;
        transition: all 0.3s ease-in-out;
    }

        .rf-page-header-action-notification-header-bottom .hi-tab-header:hover,
        .rf-page-header-action-notification-header-bottom .hi-tab-header.True {
            border-color: #366cf3;
        }

.rf-page-header-action-notification-body {
    overflow: auto;
    height: calc(50px + 21vh);
}



    .rf-page-header-action-notification-body .bi-list-item .bi-left {
        font-size: 17px;
        flex: 0 0 30px;
    }

    .rf-page-header-action-notification-body .bi-list-item .bi-middle {
        flex: auto;
        font-weight: 400;
    }

    .rf-page-header-action-notification-body .bi-list-item .bi-right {
        font-size: 8px;
        color: #dddddd;
    }

.rf-page-header-action-notification-footer {
    border-top: 1px dashed #e9e9e9;
    text-align: center;
    font-weight: 400;
}


.rf-page-header-action-search {
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
}

    .rf-page-header-action-search > input {
        border: none;
        font-size: 14px;
        padding: 20px 0;
        outline: none;
        flex: auto;
    }

    .rf-page-header-action-search > i {
        font-size: 14px;
        padding-right: 15px;
    }


.rf-page-header-action-user-footer {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


path.footer-bg1-rf-top {
    fill: #393939 !important;
}

.rf-page-footer {
    background-image: url('../image/footer-pink.png');
    padding: 15px;
    padding-top: calc(100px + 5vw);
    background-repeat: no-repeat;
    background-size: cover;
}

.rf-page-footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.rf-page-footer-top-item {
    flex: 1 1 300px;
}

.rf-page-footer-top-item-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.rf-page-footer-top-item-desc {
    font-size: 14px;
    color: #58557c;
    display: flex;
    flex-wrap: wrap;
}


.rf-page-footer-top-item-links {
    flex: auto;
}

    .rf-page-footer-top-item-links > a,
    .rf-page-footer-bottom-link,
    .rf-page-footer-bottom-right-link {
        padding: 0;
        margin-bottom: 5px;
        color: inherit;
        transition: all 0.3s ease-in-out;
    }

.rf-page-footer a:hover {
    color: white !important;
}


.rf-page-footer-top-item-desc.input-backdrops {
    flex-wrap: nowrap;
    background-color: #00000021;
    padding: 8px;
}

.rf-page-footer-top-item-email {
    background: none;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 700;
    padding: 7px;
    color: white;
    width: 100%;
}

.rf-page-footer-top-item-emailbtn {
    padding: 7px 25px;
    font-weight: 500;
    background-color: #366cf3;
    border-radius: 5px;
    color: white;
    transition: all 0.3s ease-in-out;
}

    .rf-page-footer-top-item-emailbtn:hover {
        background-color: #1252f1;
        color: white;
    }

.rf-page-footer-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 50px;
    gap: 15px;
}

.rf-page-footer-bottom-left,
.rf-page-footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 10px;
    color: black;
}


.rf-page-footer-bottom-logo {
    width: 45px;
    filter: drop-shadow(1px 1px 1px #222);
}

.rf-page-footer-bottom-cr,
.rf-page-footer-bottom-link {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.rf-page-footer-bottom-right-link {
    font-size: 14px;
    font-weight: 700;
    color: #565656;
    margin: 0;
}

@media (max-width: 765px) {
    .rf-page-footer-bottom {
        flex-direction: column-reverse;
    }
}


@keyframes scroll-to-top {
    from {
        opacity: 0;
        bottom: 0px;
    }

    to {
        opacity: 1;
        bottom: 25px;
    }
}


.scroll-to-top {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 25px;
    bottom: 25px;
    border: none;
    outline: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    z-index: 10;
    background-color: #366cf347;
    transition: all 0.3s ease-in-out;
    animation: scroll-to-top 0.8s ease-in-out;
}

    .scroll-to-top:hover {
        background-color: #366cf3;
        box-shadow: 3px 3px 10px #00000026;
    }

.layoutbody-rf > .body-space {
    flex: auto;
    transition: all 0.3s ease-in-out;
}

.rf-page-left-menu {
    width: 12px;
    position: fixed;
    top: 55px;
    left: 0;
    bottom: 0;
    padding-top: 5px;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

    .rf-page-left-menu.hide-left-menu {
        display: none;
    }

.rf-page-left-menu-exp {
    position: absolute;
    top: 25px;
    right: 0px;
    height: 100px;
    width: 12px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 1;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid #0000001f;
    box-shadow: 0 0 5px #00000021;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

    .rf-page-left-menu-exp:hover {
        box-shadow: 0 0 5px #00000045;
        background-color: #ebebeb;
    }

.rf-page-left-menu.True {
    width: 260px;
    border: 1px solid #00000012;
    border-top: 0;
    background-color: white;
    z-index: 99;
    box-shadow: inset -5px 0px 13px #0000000a;
}

    .rf-page-left-menu.True > .rf-page-left-menu-exp {
        right: -12px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: white;
    }

.rf-page-left-menu.has-left-menu.True ~ .body-space {
    margin-left: 260px;
    transition: all 0.3s ease-in-out;
}

.rf-page-left-menu-body {
    overflow: auto;
    padding: 10px;
    height: calc(100vh - 100px);
}


    .rf-page-left-menu-body > ul,
    .rf-page-left-menu-body > ul > li ul {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
    }

    .rf-page-left-menu-body li {
        /*border-bottom: 1px dashed #e3e3e3;*/
    }

    .rf-page-left-menu-body ul > li > a {
        flex: auto;
        padding: 5px;
        font-size: 14px;
        color: inherit;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .rf-page-left-menu-body > ul > li ul {
        display: none;
        padding-left: 10px;
        animation: menu-drop 0.3s ease-in-out;
    }

    .rf-page-left-menu-body ul > li > a[rf-menu-expanded] ~ ul {
        display: block;
    }

    .rf-page-left-menu-body ul > li > a > i {
        flex: 0 0 25px;
    }

    .rf-page-left-menu-body ul > li > a:after {
        flex: auto;
        text-align: right;
        content: '\f1ac';
        font-family: Flaticon2;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        font-size: 8px;
    }

    .rf-page-left-menu-body ul > li > a[rf-menu-expanded]:after {
        content: '\f1b1';
    }

    .rf-page-left-menu-body ul > li > a:only-child:after {
        display: none;
    }

    .rf-page-left-menu-body ul > li > a.active,
    .rf-page-left-menu-body ul > li > a:hover,
    .rf-page-left-menu-body-mobile > i:hover,
    .rf-page-header-action-mobile > i:hover {
        background-color: #f7f7f7;
    }

.menu-separator {
    height: 1px;
    display: block;
    background-color: #0000001a;
    margin: 5px;
}








/*loader*/
.dt-loading, [dt-loading] {
    position: relative;
    cursor: wait;
}

    .dt-loading > div,
    .dt-loading > span > span > span > span,
    [dt-loading] > div,
    [dt-loading] > span > span > span > span {
        opacity: 0.2;
        pointer-events: none;
    }

    .dt-loading > span,
    [dt-loading] > span {
        pointer-events: none;
    }

    .dt-loading::after, [dt-loading]::after {
        font-family: FontAwesome;
        font-size: 24px;
        width: 25px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2196f3;
        content: "\f1ce";
        animation: lds-ring 1s linear infinite;
        position: absolute;
        right: 10px;
        top: 6px;
        cursor: wait;
    }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
        opacity: 0.5;
    }

    50% {
        transform: rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.5;
    }
}
/*loader*/

/*PageRF*/
.page-rf {
    display: flex;
    flex-direction: column;
}

.page-rf-header {
    position: sticky;
    z-index: 8;
    border-radius: 5px;
    top: 55px;
    margin-bottom: 10px;
    background-color: white;
}

    .page-rf-header.True {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 8px 15px;
        box-shadow: 0px 3px 9px #00000014;
        border: 1px solid #0000000a;
    }

    .page-rf-header > div {
        display: flex;
        align-items: center;
        gap: 5px;
    }

.page-rf-header-icon {
}

    .page-rf-header-icon:empty {
        flex: 0 0 5px;
        background-color: #e91e63;
    }

.page-rf-header-title {
    font-size: 16px;
    font-weight: 500;
}

.page-rf-header-subtitle {
    font-size: 12px;
}

    .page-rf-header-subtitle > .page-rf-header-subtitle-icon {
        font-size: 11px;
        color: #e91e63;
    }

.page-rf-header-actions {
    flex: auto;
    flex-wrap: wrap;
    justify-content: end;
}

    .page-rf-header-actions > * {
    }

.page-rf-footer {
    position: sticky;
    z-index: 8;
    border-radius: 5px;
    bottom: 0;
    background-color: white;
    padding: 8px 15px;
    margin-top: 10px;
    box-shadow: 0px -3px 9px #00000014;
    border: 1px solid #0000000a;
}
/*PageRF*/
.rf-control {
    border-radius: var(--control-border-radius);
    border: var(--control-border);
    border-color: var(--control-border-color);
    margin: var(--control-margin);
    padding: var(--control-padding);
    background-color: var(--control-background-color);
    color: var(--control-color);
    width: 100%;
    outline: none;
}

    .rf-control:focus, .rf-control:focus-visible {
        border-color: var(--control-focus-border-color) !important;
    }

.rf-control-label {
    margin: 0;
}

.rf-control-clear {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #efefef;
    color: black;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin: 0 5px;
    cursor: pointer;
}
/*Checkbox*/ /*ok*/
.checkbox-rf, .radio-rf {
    grid-gap: 15px;
    row-gap: 5px;
}

    .radio-rf [templated], .checkbox-rf [templated] {
        display: none;
    }

    .radio-rf .radio-rf-label, .checkbox-rf .checkbox-rf-label {
        flex: auto;
    }

    .radio-rf .option-rf[inherit-p], .checkbox-rf .option-rf[inherit-p] {
        background: inherit;
        box-shadow: inherit;
        padding: inherit;
    }


.checkdiorf-accordion .checkbox-rf, .checkdiorf-accordion .radio-rf {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}
/*Checkbox*/

/*SwitchRF*/

:root .rf-switch {
    --scolor: #fff;
    --dscolor: #000;
    --sbcolor: #009688;
    --dsbcolor: #e91e63;
    --slbg: #00968814;
    --dslbg: #e91e6314;
    --ol: 0.2;
    --rd: 5px;
}

.rf-switch {
    margin: var(--control-margin);
}

    .rf-switch input {
        display: none;
    }

    .rf-switch * {
        user-select: none;
        box-sizing: border-box;
    }

    .rf-switch label {
        cursor: pointer;
        width: fit-content;
        min-height: 38px;
        position: relative;
        display: flex;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: var(--rd);
        border: 3px solid #ffffff00;
        background: var(--dslbg);
    }

        .rf-switch label > span {
            flex: auto;
            min-width: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
            position: relative;
            padding: 3px 5px;
            z-index: 1;
        }

            .rf-switch label > span.s1 {
                opacity: var(--ol);
                color: var(--dscolor);
            }

            .rf-switch label > span.s2 {
                color: var(--scolor);
            }

            .rf-switch label > span:before {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: -1;
                border-radius: var(--rd);
                transition: 0.3s;
            }

            .rf-switch label > span.s1:before {
                transform: translateX(100%);
                background-color: var(--sbcolor);
                opacity: 0;
            }

            .rf-switch label > span.s2:before {
                background-color: var(--dsbcolor);
            }

    .rf-switch input:checked + label {
        background: var(--slbg);
    }

        .rf-switch input:checked + label > span.s1 {
            color: var(--scolor);
            opacity: 1;
        }

        .rf-switch input:checked + label > span.s2 {
            color: var(--dscolor);
            opacity: var(--ol);
        }

        .rf-switch input:checked + label > span.s1:before {
            opacity: 1;
            transform: translateX(0%);
        }

        .rf-switch input:checked + label > span.s2:before {
            transform: translateX(-100%);
            opacity: 0;
        }
/*SwitchRF*/

/*RatingRF*/

.rf-rating {
    display: flex;
    margin: var(--control-margin);
}
/*RatingRF*/
/*SelectRF*/
.select-rf, .multiselect-rf {
    min-height: 38px;
}

    .select-rf .select2-container,
    .multiselect-rf .select2-container {
        width: 100% !important;
    }

    .select-rf .select2-selection,
    .multiselect-rf .select2-selection {
        min-height: 36px !important;
        border: none !important;
        font-family: inherit !important;
        border-radius: 5px !important;
        background-color: transparent;
    }

    .select-rf .select2-selection__rendered,
    .multiselect-rf .select2-selection__rendered {
        line-height: 36px !important;
        color: inherit !important;
    }

    .select-rf ul.select2-selection__rendered,
    .multiselect-rf ul.select2-selection__rendered {
        line-height: 23px !important;
    }

    .select-rf .select2-selection__choice,
    .multiselect-rf .select2-selection__choice {
        /*background-color: #0000001c !important;
        color: var(--control-color);*/
        border: none !important;
        border-radius: 5px !important;
        margin-right: 7px !important;
        margin-top: 7px !important;
        padding: 0 10px !important;
        padding-bottom: 1px !important;
    }

    .select-rf .select2-selection__arrow,
    .multiselect-rf .select2-selection__arrow {
        height: 36px !important;
    }

.select2-search__field {
    /*border: 1px solid #ced4da !important;*/
    outline: none !important;
}

.select2-search--inline .select2-search__field {
    border: none !important;
    margin-top: 7px !important;
}

.select2-dropdown {
    /* border: 1px solid #ced4da !important;
    box-shadow: 0px 0px 20px #0000002e;
    z-index: 1;*/
}

.select2-container--open {
    z-index: 9999;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-top: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--control-color);
    font-size: 18px;
    opacity: 0.3;
    transition: all 0.2s ease-in-out;
}

.select2-selection__choice:hover .select2-selection__choice__remove {
    opacity: 1;
}
/*SelectRF*/
/*DatePickerRF*/
.datepicker-popup-rf {
    max-width: 300px;
    background-color: white;
    box-shadow: 0px 4px 10px 4px #00000026;
    border-radius: 5px;
    position: absolute;
    z-index: 10;
    user-select: none;
}

    .datepicker-popup-rf.False,
    .datepicker-popup-rf-header.False,
    .datepicker-popup-rf-body.False,
    .datepicker-popup-rf-footer.False,
    .datepicker-popup-rf-time-selector.False,
    .datepicker-popup-rf-body-time.False,
    .datepicker-popup-rf-time-selector-result .dpt-apm.False {
        display: none;
    }

.datepicker-popup-rf-header {
    display: flex;
    align-items: center;
    background-color: #f6f6f6;
    padding: 10px;
    border-bottom: 1px solid #dadada;
}

    .datepicker-popup-rf-header > i {
        flex: 0 0 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

        .datepicker-popup-rf-header > i:hover {
            background-color: #e1e1e1;
            border-radius: 5px;
        }

.datepicker-popup-rf-header-month,
.datepicker-popup-rf-header-year {
    flex: auto;
    width: 100px;
    text-align: center;
    border: none;
    background: transparent;
    height: 25px;
    outline: none;
}


.datepicker-popup-rf-body {
    padding: 10px;
}


    .datepicker-popup-rf-body > table {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: black;
    }

        .datepicker-popup-rf-body > table tr {
        }

        .datepicker-popup-rf-body > table th {
            font-weight: 500;
        }

        .datepicker-popup-rf-body > table td {
            height: 40px;
            width: 40px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }

            .datepicker-popup-rf-body > table td[c-today] {
                color: #009688;
                font-weight: bold;
                text-decoration: underline;
            }

            .datepicker-popup-rf-body > table td[c-notmonth] {
                color: #d4d4d4;
            }

            .datepicker-popup-rf-body > table td[c-disabled] {
                background-color: whitesmoke;
                opacity: 0.4;
                cursor: not-allowed;
            }

            .datepicker-popup-rf-body > table td[c-ranged] {
                background-color: #2196f32e;
            }

            .datepicker-popup-rf-body > table td[c-selected] {
                background-color: #2196f3;
                color: white;
            }

.datepicker-popup-rf-footer {
    padding: 10px;
    border-top: 1px solid #dadada;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


    .datepicker-popup-rf-footer > div {
        text-align: center;
        flex: 0 0 50px;
        padding: 3px;
        border-radius: 5px;
        cursor: pointer;
    }

.datepicker-popup-rf-footer-clear {
    background-color: #ececec;
    color: black;
}

.datepicker-popup-rf-footer-today {
    background-color: #ececec;
    color: black;
}

.datepicker-popup-rf-footer-done {
    background-color: #ececec;
    color: black;
}


.datepicker-popup-rf-body-time {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 10px;
}

    .datepicker-popup-rf-body-time > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
    }

.datepicker-popup-rf-time-selector {
    padding: 10px;
    color: black;
}

.datepicker-popup-rf-time-selector-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
}

    .datepicker-popup-rf-time-selector-picker > div {
        flex: 0 0 26px;
        height: 24px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f9f9f9;
        cursor: pointer;
    }

    .datepicker-popup-rf-time-selector-picker.H > div {
        flex: 0 0 45px;
        height: 37px;
    }

    .datepicker-popup-rf-time-selector-picker.h > div {
        flex: 0 0 68px;
        height: 50px;
    }

    .datepicker-popup-rf-time-selector-picker > div:hover {
        background-color: #e5e5e5;
    }

.datepicker-popup-rf-time-selector-result {
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    gap: 2px;
}

    .datepicker-popup-rf-time-selector-result .dpt {
        flex: 0 0 40px;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        color: #e5e5e5;
    }

    .datepicker-popup-rf-time-selector-result .dpt-apm {
        flex: 0 0 45px;
        font-size: 11px;
        cursor: pointer;
        margin-left: 5px;
        color: #e5e5e5;
    }

        .datepicker-popup-rf-time-selector-result .dpt-apm > div {
            border-radius: 5px;
            text-align: center;
        }

    .datepicker-popup-rf-time-selector-result .dpt-sep {
        font-size: 16px;
    }

    .datepicker-popup-rf-time-selector-result .dpt:hover,
    .datepicker-popup-rf-time-selector-result .dpt.True,
    .datepicker-popup-rf-time-selector-result .dpt-apm > div:hover,
    .datepicker-popup-rf-time-selector-result .dpt-apm > .dpt-apm-True {
        color: black;
    }

.datepicker-popup-rf-time-selector-done {
    text-align: right;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    background-color: #eeeeee;
    border-radius: 5px;
    float: right;
    margin-bottom: 10px;
    padding: 0 10px;
}
/*DatePickerRF*/

/*FileUploaderRF*/
.fileuploader-rf {
    overflow: hidden;
    min-height: 38px;
}

.fileuploader-rf-input {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0000000f;
    border-right: 1px solid #00000026;
    font-weight: 500;
    color: var(--control-color);
    cursor: pointer;
}

.fileuploader-rf-preview {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 5px;
}

.fileuploader-rf-preview-item {
    background-color: #00000012;
    border: 1px solid #ffffff4a;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    color: var(--control-color);
}

    .fileuploader-rf-preview-item > div {
        flex: auto;
        padding: 0 10px;
        padding-bottom: 2px;
        word-break: break-all;
    }

    .fileuploader-rf-preview-item > i {
        width: 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0000000d;
        color: var(--control-color);
        transition: all 0.3s ease-in-out;
    }

    .fileuploader-rf-preview-item > .fileuploader-rf-download:hover {
        background-color: #2196f3;
        color: white;
    }

    .fileuploader-rf-preview-item > .fileuploader-rf-remove:hover,
    .fileuploader-rf-remove-all:hover {
        background-color: #f44336;
        color: white;
    }

.fileuploader-rf-remove-all {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    background-color: #0000000f;
    border-left: 1px solid #00000026;
    transition: all 0.3s ease-in-out;
}

[rf-file] {
    display: none;
}
/*FileUploaderRF*/

/*ImageUploaderRF*/
.imageuploader-rf {
    overflow: hidden;
}

.imageuploader-rf-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    height: 310px;
    overflow: hidden;
    overflow-y: auto;
    padding: 5px;
}

    .imageuploader-rf-preview > div {
        flex: auto;
        height: 300px;
        cursor: pointer;
        position: relative;
    }

        .imageuploader-rf-preview > div > img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            vertical-align: middle;
            border-radius: 5px;
            transition: all 0.2s 0.1s ease-in-out;
        }

.imageuploader-rf-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(57, 57, 57, 0.502);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.2s 0.1s ease-in-out;
    color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.imageuploader-rf-preview > div:hover .imageuploader-rf-overlay {
    transform: scale(1);
}

.imageuploader-rf-preview > div:hover img {
    object-fit: contain;
    border-radius: 0;
}

.imageuploader-rf-remove,
.imageuploader-rf-download {
    display: flex;
    color: #ffffff;
    font-size: 14px;
    background-color: #00000057;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

    .imageuploader-rf-remove:hover {
        background-color: #f44336;
    }

    .imageuploader-rf-download:hover {
        background-color: #03a9f4;
    }

.imageuploader-rf-input {
    min-height: 38px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #00000021;
    font-weight: 500;
    color: var(--control-color);
    cursor: pointer;
}

.imageuploader-rf-remove-all {
    flex: 0 0 38px;
    background-color: #00000012;
    align-self: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    transition: all 0.3s ease-in-out;
}

    .imageuploader-rf-remove-all:hover {
        background-color: #f44336;
        color: white;
    }
/*ImageUploaderRF*/
/*FormRF*/
.rf-form {
    background-color: white;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 3px 10px #0000000a;
}

.rf-form-header {
    position: sticky;
    z-index: 8;
    border-radius: 5px;
    top: 55px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: white;
    padding: 8px 15px;
    margin: -15px;
    margin-bottom: 10px;
    box-shadow: 0px 4px 9px #00000014;
}

.rf-form-header-title {
    border-left: 5px solid #e91e63;
    font-size: 16px;
    font-weight: 500;
    padding-left: 10px;
}

.rf-form-header-subtitle {
    flex: auto;
    font-size: 13px;
    margin: 5px 0;
}

    .rf-form-header-subtitle > i {
        font-size: 12px;
        margin-right: 5px;
        color: #e91e63;
    }

.rf-form-header-action {
    flex: 0 1 200px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.rf-form-header-action-saving,
.rf-form-header-action-reset,
.rf-form-header-action-save {
    flex: 1 0 95px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    background-color: #ffc107;
    color: black;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30px;
    transition: all 0.2s ease-in-out;
}

.rf-form-header-action-saving {
    background-color: #2196f3;
    color: white;
}

    .rf-form-header-action-saving.dt-loading::after,
    .rf-form-header-action-saving[dt-loading]::after {
        font-size: 19px;
        width: 20px;
        height: 20px;
        top: 5px;
        color: white;
    }

.rf-form-header-action-save {
    background-color: #2196f3;
    color: white;
    align-items: normal;
    flex-wrap: wrap;
}

.rf-form-header-action-reset:hover {
    background-color: #ff5722;
    color: white;
}

.rf-form-header-action-save:hover {
    background-color: #3f51b5;
}

.rf-form-header-action-save > .rf-form-header-action-save-only {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rf-form-header-action-save > i {
    flex: 0 0 25px;
    border-left: 1px solid #ffffff57;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 1;
}

    .rf-form-header-action-save > i:hover ~ .rf-form-header-action-save-dd, .rf-form-header-action-save-dd:hover {
        display: block;
    }

.rf-form-header-action-save-dd {
    display: none;
    position: absolute;
    top: 26px;
    overflow: hidden;
    background-color: #3f51b5;
    width: 100%;
    padding-top: 10px;
    box-shadow: 0px 5px 5px #0000002b;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

    .rf-form-header-action-save-dd > div {
        padding: 6px;
        font-size: 14px;
        transition: all 0.2s ease-in-out;
    }

        .rf-form-header-action-save-dd > div:hover {
            background-color: #2196f3;
        }
/*FormRF*/


/*Toaster*/
.toaster-rf-container {
    min-width: 280px;
    max-width: 400px;
    position: fixed;
    right: 5px;
    top: 65px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 99;
    overflow: hidden;
    padding: 10px;
}

.toaster-rf {
    background-color: white;
    box-shadow: 0px 0px 6px #00000045;
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    display: flex;
    gap: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: white;
}

    .toaster-rf.False {
        display: none;
    }

    .toaster-rf > i {
        flex: 0 0 40px;
        display: flex;
        align-items: center;
        font-size: 40px;
    }

.toaster-rf-body {
    flex: auto;
}

.toaster-rf-title {
    font-weight: 600;
}

.toaster-rf-message {
    font-size: 12px;
}

.toaster-rf-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

    .toaster-rf-progress > div {
        height: 7px;
        background-color: #00000021;
    }

.toaster-rf-success {
    background-color: #009688eb;
}

.toaster-rf-info {
    background-color: #03a9f4e6;
}

.toaster-rf-warning {
    background-color: #ff9800ed;
}

.toaster-rf-error {
    background-color: #e91e63eb;
}
/*Toaster*/



/*Pager-RF*/
.pager-rf {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 5px 15px;
    border-radius: 5px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    font-size: 14px;
    box-shadow: 0 0 5px #00000014;
    color: black;
}

.pager-rf-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.pager-rf-button {
    padding: 2px 10px;
    border: 1px solid #00000014;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

    .pager-rf-button:hover {
        border-color: #2196f3;
    }

    .pager-rf-button.pager-active {
        background-color: #2196f3;
        color: white;
    }

    .pager-rf-button.False {
        background-color: #f7f7f7;
        color: #bfbfbf;
    }

.pager-rf-summary {
    padding: 5px 0;
}
/*Pager-RF*/


/*TableRF*/
.table-rf {
    background-color: white;
    border-radius: 5px;
    padding-top: 1px;
    box-shadow: 0 3px 10px #0000000a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .table-rf .rf-header {
        box-shadow: 0px 2px 9px #0000000f;
    }

.table-rf-tbl {
    flex: auto;
    overflow: auto;
    background-color: white;
    margin: 15px;
    min-height: 132px;
}

    .table-rf-tbl > table {
        width: 100%;
        border-color: #dee2e6;
    }

        .table-rf-tbl > table thead {
            position: sticky;
            top: 0px;
            z-index: 7;
            box-shadow: 0px 0px 8px 0px #0000000f;
            background-color: white;
            cursor: pointer;
        }

            .table-rf-tbl > table thead > tr > th {
                box-shadow: inset 0px 0px 0px 1px #0000000d;
                font-weight: 500;
                border-width: 0 !important;
                padding: 5px 10px;
            }

        .table-rf-tbl > table tbody > tr > td {
            border-width: 1px;
            border-style: dashed;
            border-top: 0;
            padding: 5px 10px;
        }

        .table-rf-tbl > table tbody > tr:hover > td {
            background-color: #fbfbfb;
        }

        .table-rf-tbl > table tfoot {
            position: sticky;
            bottom: 0;
            z-index: 6;
            box-shadow: 0px 0px 8px 0px #0000000f;
            background-color: white;
        }

            .table-rf-tbl > table tfoot > tr > * {
                box-shadow: inset 0px 0px 0px 1px #0000000d;
                font-weight: 500;
                border-width: 0 !important;
                padding: 5px 10px;
            }

            .table-rf-tbl > table tfoot > tr:hover > * {
                background-color: #fbfbfb;
            }

    .table-rf-tbl.table-rf-with-tfoot > table tbody > tr:last-of-type > td {
        border-bottom: none;
    }

    .table-rf-tbl .table-rf-norecord {
        text-align: center;
        font-weight: 500;
        color: #e91e63;
    }

    .table-rf-tbl .table-rf-loading {
        text-align: center;
        font-weight: 500;
    }

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

td.table-rf-action {
    text-align: center;
    position: sticky;
    right: 0;
    background-color: white;
    box-shadow: inset 1px 0px 0px 0px #0000000d;
    cursor: pointer;
}

.table-rf-dp-action td.table-rf-action.True {
    z-index: 8;
}


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

.table-rf-dp-action td.table-rf-action .table-rf-action-holder {
    display: none;
}

.table-rf-dp-action td.table-rf-action.True .table-rf-action-holder {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 120px;
    padding: 10px;
    position: absolute;
    right: 50%;
    background-color: white;
    border: 1px solid #0000001c;
    box-shadow: -2px 3px 20px #00000024;
    border-radius: 5px;
    overflow: hidden;
}

.table-rf-float-action .table-rf-action {
    padding: 0;
}

    .table-rf-float-action .table-rf-action .table-rf-action-holder {
        position: absolute;
        right: 1px;
        top: 1px;
        bottom: 1px;
        max-width: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        background-color: white;
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }

.table-rf-float-action tr:hover .table-rf-action .table-rf-action-holder {
    max-width: 600px;
    padding: 0 7px;
    opacity: 1;
    box-shadow: -5px 0px 4px #00000012;
}

.table-rf-float-action .table-rf-action .table-rf-action-holder > div {
    gap: 5px;
    flex: 1 0 24px;
    color: inherit;
}

.table-rf-action-holder > div {
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 5px;
    width: 24px;
    height: 24px;
    color: #bebebe;
    transition: all 0.3s ease-in-out;
}

.table-rf-dp-action .table-rf-action-holder > div {
    gap: 5px;
    padding: 5px;
    flex: 1 0 32px;
    justify-content: start;
    border-radius: 0;
    color: inherit;
    width: auto;
}

.table-rf-action-holder > div:hover {
    background-color: #ebebeb;
    color: black;
}

.table-rf-action-holder > div > i {
    flex: 0 0 24px;
}

.table-rf-action-holder > div > div {
    display: none;
    white-space: nowrap;
}

.table-rf-dp-action .table-rf-action-holder > div > div {
    flex: auto;
    display: block;
    text-align: left;
    padding-right: 10px;
}




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

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

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

/*TableRF*/

/*GridRF*/
.grid-rf {
    display: flex;
    flex-direction: column;
}

.grid-rf-action {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

    .grid-rf-action.True {
        justify-content: right;
    }

    .grid-rf-action > input {
        flex: 0 0 200px;
        padding: 3px 15px;
        margin: 0;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid;
        border-color: var(--control-border-color);
    }

.grid-rf-body {
    overflow: auto;
    flex: auto;
    display: grid;
    grid-auto-rows: min-content;
    padding: 2px;
}

.grid-rf-loading {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 500;
}

.grid-rf-norecord {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 500;
    color: #e91e63;
}

.grid-rf .pager-rf {
    margin-top: 5px;
    position: sticky;
    bottom: 0;
}

.grid-rf-card {
    animation: scale01 0.2s ease-in-out;
}

    .grid-rf-card.grid-rf-card-loading {
        animation: blinker01 0.1s ease-in-out infinite;
    }

@keyframes scale01 {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1.01);
    }
}

@keyframes scale21 {
    from {
        opacity: 0;
        transform: scale(1.5);
    }

    to {
        opacity: 1;
        transform: scale(0.99);
    }
}

@keyframes blinker01 {
    50% {
        opacity: 0.5;
    }
}
/*GridRF*/
/*HeaderRF*/
.rf-header {
    position: sticky;
    z-index: 8;
    border-radius: 5px;
    top: 55px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: white;
    padding: 8px 15px;
    margin-bottom: 10px;
    box-shadow: 0px 3px 9px #00000014;
    border: 1px solid #0000000a;
}

.rf-header-title {
    border-left: 5px solid #e91e63;
    font-size: 16px;
    font-weight: 500;
    padding-left: 10px;
}

.rf-header-subtitle {
    flex: auto;
    font-size: 13px;
    margin: 5px 0;
}

    .rf-header-subtitle > i {
        font-size: 12px;
        margin-right: 5px;
        color: #e91e63;
    }

.rf-header-actions {
    flex: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: end;
}

    .rf-header-actions > button {
        flex: 0 1 80px;
        justify-content: center;
    }

.rf-header-body {
}
/*HeaderRF*/

/*CardRF*/
.rf-card {
    display: inline-block;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #0000001f;
}

    .rf-card .rf-header {
        box-shadow: 0px 5px 10px #0000000a;
    }
/*CardRF*/


/*BadgeRF*/
.rf-badge {
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 400;
    background-color: #f5f5f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rf-badge-success {
    background-color: #1dc9b7 !important;
    color: white;
}

.rf-badge-warning {
    background-color: #ffb822 !important;
    color: white;
}

.rf-badge-danger {
    background-color: #fd397a !important;
    color: white;
}

.rf-badge-info {
    background-color: #366cf3 !important;
    color: white;
}

.rf-badge-red {
    background-color: #f44336 !important;
    color: white;
}

.rf-badge-amber {
    background-color: #ff9800 !important;
    color: white;
}

.rf-badge-green {
    background-color: #009688 !important;
    color: white;
}
/*BadgeRF*/


/*FilterRF*/
.rf-filter {
}

    .rf-filter [isvalid], .rf-filter .isvalid {
        border-color: var(--control-border-color) !important;
    }

.rf-filter-side {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rf-filter-card-view {
    background-color: white;
}

.rf-filter > .rf-filter-container {
    position: sticky;
    top: 55px;
    z-index: 10;
}

.rf-filter-side-right > .rf-filter-container {
    order: 1;
}

.rf-filter-side > .rf-header {
    flex: 0 0 100%;
    margin-bottom: 0;
    z-index: 11;
}

.rf-filter-add {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    width: 31px;
    background-color: #f0f0f1;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.4s ease-in-out;
}

    .rf-filter-add:hover {
        background-color: #e3e3e3;
    }

.rf-filter-quickfilter {
    display: flex;
    background-color: #f0f0f1;
    border-radius: 5px;
    flex: 0 0 30px;
    overflow: hidden;
}

    .rf-filter-quickfilter.True {
        flex: 0 1 250px;
    }

.rf-filter-side .rf-filter-quickfilter {
    display: none;
}

.rf-filter-quickfilter > input {
    flex: auto;
    width: 100%;
    border: none;
    background-color: transparent !important;
    border-radius: 5px;
    font-size: 14px;
    outline: none !important;
    display: inline-flex;
    padding: 4px 15px;
    transition: all 0.4s ease-in-out;
}

.rf-filter-quickfilter > i {
    flex: 0 0 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

.rf-filter-quickfilter.True > i {
    border-left: 1px solid #0000000f;
}

.rf-filter-quickfilter > i:hover {
    background-color: #0000000f;
}


@keyframes top-drop-filter {
    from {
        opacity: 0;
        top: 0px;
        z-index: -1;
    }

    to {
        opacity: 1;
        top: 33px;
        z-index: 1;
    }
}

@keyframes top-drop-filter-2 {
    from {
        opacity: 0;
        top: -20px;
        z-index: 0;
    }

    to {
        opacity: 1;
        top: 5px;
        z-index: 1;
    }
}

.rf-filter-controls {
    display: none;
    z-index: 0;
}



    .rf-filter-controls.rf-filter-show {
        display: block;
        position: absolute;
        right: 0;
        margin-top: 5px;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0px 0px 13px 0px #00000030;
        z-index: 8;
        overflow: hidden;
        width: 100%;
        animation: top-drop-filter .4s ease-in-out;
    }

.rf-filter-side .rf-filter-controls {
    display: block;
    background-color: white;
    box-shadow: 0 0 5px #00000014;
    border-radius: 5px;
    overflow: hidden;
    position: sticky;
    top: 110px;
    width: auto;
    margin-top: auto;
    animation: top-drop-filter-2 .4s ease-in-out;
}

.rf-filter-header {
    display: flex;
    background-color: #ffffff;
    color: black;
    padding: 10px 15px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
}

.rf-filter-side .rf-filter-header {
}

.rf-filter-header > div {
    font-weight: 600;
}

.rf-filter-header > i {
    width: 24px;
    height: 24px;
    background-color: #e91e630d;
    color: #e91e6378;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

    .rf-filter-header > i:hover {
        background-color: #e91e6324;
        color: #e91e63;
    }

.rf-filter-side .rf-filter-header > i {
    display: none;
}

.rf-filter-body {
    padding: 0 15px;
    margin: 5px 0;
    max-height: 30vh;
    min-height: 70px;
    overflow: auto;
}

.rf-filter-side .rf-filter-body {
    max-height: calc(100vh - 285px);
}

.rf-filter-footer {
    display: flex;
    background-color: #ffffff;
    color: black;
    padding: 10px 15px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
}

    .rf-filter-footer.rf-filter-footer-bottom {
        border-top: 1px solid #e4e4e4;
    }

    .rf-filter-footer > button {
        padding: 2px 15px;
        border: none;
        flex: 0 1 80px;
        justify-content: center;
    }

.rf-filter-datacontent {
    flex: auto;
    min-height: calc(100vh - 190px);
    display: flex;
    flex-direction: column;
}

    .rf-filter-datacontent > * {
        flex: auto;
    }

@media (max-width: 1080px) {
    .rf-filter-side {
        display: block;
    }

        .rf-filter-side .rf-header {
            flex: 0 0 100%;
            margin-bottom: 10px;
            z-index: 11;
        }

        .rf-filter-side .rf-filter-quickfilter,
        .rf-filter-side .rf-filter-header > i {
            display: flex;
        }

        .rf-filter-side .rf-filter-controls {
            display: none;
            border-radius: 0;
        }

            .rf-filter-side .rf-filter-controls.rf-filter-show {
                display: block;
                margin-top: 0;
                border-radius: 0;
                position: absolute;
                right: 0;
                top: auto;
                width: 250px;
                animation: top-drop-filter-2 .4s ease-in-out;
            }

        .rf-filter-side .rf-filter-body {
            max-height: 30vh;
            margin-top: 0;
        }

        .rf-filter-side > .rf-filter-container {
            top: 100px;
        }
}

/*FilterRF*/


/*AccordionRF*/
.rf-accordions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rf-accordion {
    overflow: hidden;
    border: 1px solid #0000000f;
}

    .rf-accordion.True {
        box-shadow: 0px 1px 5px #0000000d;
    }

.rf-accordion-header {
    padding: 6px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rf-accordion.True .rf-accordion-header {
    border-bottom: 1px solid #0000000f;
}

.rf-accordion-header-icon {
    flex: 0 0 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rf-accordion-header > div {
    flex: auto;
    font-weight: 500;
}

.rf-accordion-body {
    height: 0;
    max-height: 0;
    overflow: hidden;
}

.rf-accordion.True .rf-accordion-body {
    height: auto;
    max-height: 30000px;
    padding: 5px 15px;
    transition: max-height 8s ease-in-out,padding 0.1s ease-in-out;
}

.checkdiorf-accordion {
    border: var(--control-border);
    border-color: var(--control-border-color);
    border-radius: var(--control-border-radius);
    background-color: var(--control-background-color);
    color: var(--control-color);
    margin: var(--control-margin);
    overflow: hidden;
}

    .checkdiorf-accordion .rf-accordion {
        border: none;
    }

    .checkdiorf-accordion .rf-accordion-header > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: inherit;
    }

    .checkdiorf-accordion .rf-accordion, .checkdiorf-accordion .rf-accordion-header, .checkdiorf-accordion .rf-accordion-body {
        color: inherit !important;
        background-color: transparent !important;
    }
/*AccordionRF*/

/*TabRF*/
.rf-tab {
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 3px 10px #0000000a;
    margin: 15px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.rf-tab-Bottom {
    flex-direction: column-reverse;
}

.rf-tab-Left {
    flex-direction: row;
}

.rf-tab-Right {
    flex-direction: row-reverse;
}

    .rf-tab-Left > .rf-tab-headers,
    .rf-tab-Right > .rf-tab-headers {
        flex-direction: column;
    }

    .rf-tab-Left > .rf-tab-bodies,
    .rf-tab-Right > .rf-tab-bodies {
        flex: auto;
        display: flex;
    }



.rf-tab-headers {
    display: flex;
    padding: 1px;
    box-shadow: inset 0 -1px 0px 0px #00000012;
}

.rf-tab-Bottom .rf-tab-headers {
    box-shadow: inset 0 1px 0px 0px #00000012;
}

.rf-tab-Left .rf-tab-headers {
    box-shadow: inset -1px 0px 0px 0px #00000012;
}

.rf-tab-Right .rf-tab-headers {
    box-shadow: inset 1px 0px 0px 0px #00000012;
}

.rf-tab-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 5px;
    cursor: pointer;
    border-style: solid;
    border-right: 0;
    border-left: 0;
    transition: all 0.3s ease-in-out;
}

    .rf-tab-header:not(.True):hover {
        border-bottom-color: #0000001a !important;
    }

    .rf-tab-header > div {
        flex: auto;
    }

    .rf-tab-header > i {
        font-size: 11px;
        color: darkgrey;
    }

.rf-tab-body {
    flex: 0 0 100%;
    display: none;
    padding: 15px;
}

    .rf-tab-body.True {
        display: flex;
        flex-direction: column;
        animation: tab-body 0.3s ease-in-out;
    }

.rf-tab-body-html {
    flex: auto;
}

.rf-tab-body-footer {
    order: 0;
    margin: -15px;
    margin-top: 15px;
    padding: 10px 15px;
    border-top: 1px solid #00000012;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: right;
}

    .rf-tab-body-footer.True {
        justify-content: space-between;
    }

    .rf-tab-body-footer > div {
        background-color: #00000012;
        padding: 5px 15px;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
    }

.rf-tab-body-footer-prev {
}

.rf-tab-body-footer-next {
}

.rf-tab-body-footer-finish {
}


@keyframes tab-body {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}
/*TabRF*/

/*TabHeaderRF*/
.rf-tab-header-iconic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5px;
    gap: 10px;
}

    .rf-tab-header-iconic.True {
        flex-direction: row;
    }

    .rf-tab-header-iconic > div {
        font-weight: 500;
    }
/*TabHeaderRF*/


/*SortRF*/
.rf-sort {
    display: inline-flex;
    flex-wrap: wrap;
    position: relative;
    background-color: white;
    width: 150px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    cursor: pointer;
}

    .rf-sort > i {
        flex: 0 0 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease-in-out;
    }

        .rf-sort > i:hover {
            background-color: #00000014;
        }

        .rf-sort > i:first-of-type {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .rf-sort > i:last-of-type {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

.rf-sort-text {
    flex: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: #00000012;
    padding: 0 5px;
    text-align: center;
    font-weight: 500;
    padding-top: 3px;
}

.rf-sort-option-holder {
    position: absolute;
    top: 31px;
    background-color: white;
    width: -webkit-fill-available;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #0000001c;
    box-shadow: 0px 5px 8px #00000029;
    transition: all 0.3s ease-in-out;
}

    .rf-sort-option-holder.False {
        opacity: 0;
        visibility: hidden;
    }

.rf-sort-options {
    padding: 10px 0;
    overflow: auto;
    max-height: 200px;
    transition: all 0.3s ease-in-out;
}

.rf-sort-option-holder.False .rf-sort-options {
    max-height: 0;
    padding: 0;
}

.rf-sort-option {
    padding: 5px 10px;
    margin-bottom: 2px;
    transition: all 0.3s ease-in-out;
}

    .rf-sort-option:hover {
        background-color: #00000014;
    }
/*SortRF*/

/*ButtonRF*/
[rf-button] {
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
}

[rf-button="processing"] {
    pointer-events: none;
}

    [rf-button="processing"] > i {
        animation: lds-ring 1s linear infinite;
    }

[rf-button] > span {
    padding-bottom: 1px;
}
/*ButtonRF*/


/*PermissionSelectorRF*/
.rf-permission-selector {
    max-height: 58vh;
    overflow: auto;
    padding: 5px;
    animation: scale01 0.8s ease-in-out;
}

    .rf-permission-selector * {
        user-select: none;
    }

.rf-permission-selector-header {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    z-index: 1;
    top: -5px;
    margin-bottom: 15px;
    background-color: white;
    border: 1px solid #0000001a;
    border-left: 4px solid #0000001f;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #00000017;
    padding: 8px 15px;
    overflow: hidden;
}

    .rf-permission-selector-header > i {
        flex: 0 0 16px;
        font-size: 16px;
    }

.rf-permission-selector-header-title {
    flex: auto;
    font-weight: 600;
}

    .rf-permission-selector-header-title > input {
        width: 100%;
        border: none;
        border-bottom: 1px solid transparent;
        font-weight: inherit;
        font-size: inherit;
        transition: all 0.3s;
    }

        .rf-permission-selector-header-title > input:focus, .rf-permission-selector-header-title > input:focus-visible {
            border-color: lightgray;
        }

i.rf-permission-selector-header-expander,
.rf-permission-selector-card-item > i.rf-permission-selector-card-item-expander {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9b9b9;
    height: 30px;
    cursor: pointer;
    transition: all 0.3s;
}

    i.rf-permission-selector-header-expander:hover,
    .rf-permission-selector-card-item > i.rf-permission-selector-card-item-expander:hover {
        background-color: #f7f7f7;
        color: black;
    }

.rf-permission-selector-header-crud,
.rf-permission-selector-card-item-crud {
    flex: 0 0 162px;
    gap: 3px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    background-color: white;
}

    .rf-permission-selector-header-crud > div,
    .rf-permission-selector-card-item-crud > div {
        flex: 0 0 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
    }

        .rf-permission-selector-card-item-crud > div.crud-is-invisible {
            opacity: 0.2;
            pointer-events: none;
        }

        .rf-permission-selector-header-crud > div:hover,
        .rf-permission-selector-card-item-crud > div:hover {
            color: white;
        }

.rf-permission-selector-header-crud-all,
.rf-permission-selector-card-item-crud-all {
    background-color: #03a9f41c;
    color: #03a9f4;
}

    .rf-permission-selector-header-crud-all:hover,
    .rf-permission-selector-card-item-crud-all:hover {
        background-color: #03a9f4;
    }

.rf-permission-selector-header-crud-c,
.rf-permission-selector-card-item-crud-c {
    background-color: #0096881a;
    color: #009688;
}

    .rf-permission-selector-header-crud-c:hover,
    .rf-permission-selector-card-item-crud-c:hover {
        background-color: #00968875;
    }

    .rf-permission-selector-header-crud-c.True,
    .rf-permission-selector-card-item-crud-c.True {
        background-color: #009688;
        color: white;
    }

.rf-permission-selector-header-crud-r,
.rf-permission-selector-card-item-crud-r {
    background-color: #3f51b51a;
    color: #3f51b5;
}

    .rf-permission-selector-header-crud-r:hover,
    .rf-permission-selector-card-item-crud-r:hover {
        background-color: #3f51b575;
    }

    .rf-permission-selector-header-crud-r.True,
    .rf-permission-selector-card-item-crud-r.True {
        background-color: #3f51b5;
        color: white;
    }

.rf-permission-selector-header-crud-u,
.rf-permission-selector-card-item-crud-u {
    background-color: #9c27b01a;
    color: #9c27b0;
}

    .rf-permission-selector-header-crud-u:hover,
    .rf-permission-selector-card-item-crud-u:hover {
        background-color: #9c27b075;
    }

    .rf-permission-selector-header-crud-u.True,
    .rf-permission-selector-card-item-crud-u.True {
        background-color: #9c27b0;
        color: white;
    }

.rf-permission-selector-header-crud-d,
.rf-permission-selector-card-item-crud-d {
    background-color: #e91e631a;
    color: #e91e63;
}

    .rf-permission-selector-header-crud-d:hover,
    .rf-permission-selector-card-item-crud-d:hover {
        background-color: #e91e6375;
    }

    .rf-permission-selector-header-crud-d.True,
    .rf-permission-selector-card-item-crud-d.True {
        background-color: #e91e63;
        color: white;
    }


.rf-permission-selector-body {
    overflow: hidden;
}

    .rf-permission-selector-body ul {
        list-style: none;
        margin: 0;
        padding: 0;
        flex: auto;
    }

    .rf-permission-selector-body > ul > li {
        padding-left: 0;
        padding-top: 10px;
        border-left: none;
    }

        .rf-permission-selector-body > ul > li:first-child {
            padding-top: 0px;
        }

        .rf-permission-selector-body > ul > li ul {
            margin-left: 15px;
            max-height: 6000px;
            opacity: 1;
            transition: max-height 3s,opacity 0.5s;
        }

    .rf-permission-selector-body li.False > ul {
        z-index: -1;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.2s,opacity 0.2s;
    }

    .rf-permission-selector-body > ul > li li {
        margin: 0;
        padding-top: 10px;
        border-left: 1px solid #989898;
        display: flex;
        flex-wrap: wrap;
    }

        .rf-permission-selector-body > ul > li li > ul > li {
            margin-left: 15px;
        }

    .rf-permission-selector-body > ul li:last-child {
        border-left-color: transparent;
    }

    .rf-permission-selector-body p {
        padding: 0;
        margin: 0;
    }

    .rf-permission-selector-body > ul > li li > p {
        flex: 0 0 15px;
        margin-top: -10px;
        display: flex;
    }

        .rf-permission-selector-body > ul > li li > p > span {
            flex: auto;
            height: calc(50% + 5px);
            border-bottom: 1px solid #989898;
        }

    .rf-permission-selector-body > ul > li li:last-child > p > span {
        border-left: 1px solid #989898;
        margin-left: -1px;
        border-bottom-left-radius: 5px;
    }

.rf-permission-selector-card-item {
    background-color: white;
    border: 1px solid #0000001a;
    border-left: 4px solid #0000001f;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #00000017;
    padding: 8px 15px;
    overflow: hidden;
    flex: 0 0 calc(100% - 15px);
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    transition: all 0.5s;
}

    .rf-permission-selector-card-item:hover {
        border-left-color: #878787;
    }

    .rf-permission-selector-card-item > i {
        flex: 0 0 16px;
        font-size: 16px;
    }

.rf-permission-selector-card-item-title {
    flex: auto;
}
/*PermissionSelectorRF*/

/*UserRole Card*/
.rf-user-cards {
}

    .rf-user-cards .grid-rf-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        background-color: #f7f7f7;
        cursor: pointer;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
    }


        .rf-user-cards .grid-rf-card > .rf-badge {
            transition: all 0.2s ease-in-out;
        }

        .rf-user-cards .grid-rf-card:hover {
            box-shadow: inset 0 0 20px 0px #0000001c;
        }

            .rf-user-cards .grid-rf-card:hover > .rf-badge {
                transform: scale(1.2);
            }

        .rf-user-cards .grid-rf-card.True {
            background-color: #e3e3e3;
        }

    .rf-user-cards .rf-user-card-img {
        flex: 0 0 40px;
        width: 40px;
        transition: all 0.2s ease-in-out;
    }

    .rf-user-cards .grid-rf-card:hover > .rf-user-card-img {
        transform: scale(1.2);
    }

    .rf-user-cards .rf-user-card-text {
        flex: auto;
    }

        .rf-user-cards .rf-user-card-text .rf-user-card-name {
            font-size: 14px;
            font-weight: 600;
        }

        .rf-user-cards .rf-user-card-text .rf-user-card-username {
            font-size: 12px;
        }
/*UserRole Card*/


/*ProgressStepperRF*/
.rf-progress-stepper {
}

.rf-progress-stepper-item {
    display: flex;
    gap: 15px;
    min-height: 50px;
    animation: scale01 0.8s ease-in-out;
}

.rf-progress-stepper-joiner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .rf-progress-stepper-joiner > i {
        font-size: 16px;
        background-color: #dedede;
        border-radius: 50%;
        height: 30px;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.rf-progress-stepper-joiner-top, .rf-progress-stepper-joiner-bottom {
    flex: auto;
    width: 5px;
    background-color: #dedede;
}

.rf-progress-stepper-item:first-child .rf-progress-stepper-joiner-top {
    background-color: transparent !important;
}

.rf-progress-stepper-item:last-child .rf-progress-stepper-joiner-bottom {
    background-color: transparent !important;
}

.rf-progress-stepper-data {
    flex: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.rf-progress-stepper-item-title {
    font-weight: 600;
}

.rf-progress-stepper-item-message {
    font-size: 12px;
}

.rf-progress-stepper-item.Working .rf-progress-stepper-joiner > i {
    animation: rotate 1s infinite;
}

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

    to {
        transform: rotate(360deg);
    }
}

.rf-progress-stepper-item.Success .rf-progress-stepper-joiner > * {
    background-color: #2196f3;
    color: white;
}

.rf-progress-stepper-item.Error .rf-progress-stepper-joiner > * {
    background-color: #ff9800;
    color: white;
}

.rf-progress-stepper-item.Stop .rf-progress-stepper-joiner > * {
    background-color: #e91e63;
    color: white;
}

.rf-progress-stepper-item.Success .rf-progress-stepper-item-message {
    color: #2196f3;
}

.rf-progress-stepper-item.Error .rf-progress-stepper-item-message {
    color: #ff9800;
}

.rf-progress-stepper-item.Stop .rf-progress-stepper-item-message {
    color: #e91e63;
}

.rf-progress-stepper-item.Working + .rf-progress-stepper-item .rf-progress-stepper-joiner > .rf-progress-stepper-joiner-top {
    background-color: #dedede;
}

.rf-progress-stepper-item.Success + .rf-progress-stepper-item .rf-progress-stepper-joiner > .rf-progress-stepper-joiner-top {
    background-color: #2196f3;
}

.rf-progress-stepper-item.Error + .rf-progress-stepper-item .rf-progress-stepper-joiner > .rf-progress-stepper-joiner-top {
    background-color: #ff9800;
}

.rf-progress-stepper-item.Stop + .rf-progress-stepper-item .rf-progress-stepper-joiner > .rf-progress-stepper-joiner-top {
    background-color: #e91e63;
}
/*ProgressStepperRF*/

/*UserRoleSummary*/
.rf-userrole-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .rf-userrole-summary > div {
        flex: 1 0 200px;
        box-shadow: 3px 3px 12px #00000038;
        padding: 5px 0;
        border-radius: 5px;
        display: flex;
        align-items: center;
        gap: 15px;
        margin-left: 50px;
        animation: scale01 0.8s ease-in-out;
    }

        .rf-userrole-summary > div > span {
            flex: 0 0 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-left: -50px;
            color: white;
            border: 8px solid white;
            font-size: 24px;
            font-weight: 600;
        }

        .rf-userrole-summary > div > div {
            font-weight: 600;
            flex: auto;
        }

.rf-role-profile-summary {
    background-color: #ffdead;
}

    .rf-role-profile-summary > span {
        background-color: #ff9800;
    }

.rf-role-ui-summary {
    background-color: #b0deda;
}

    .rf-role-ui-summary > span {
        background-color: #009688;
    }

.rf-role-member-summary {
    background-color: #bee0fc;
}

    .rf-role-member-summary > span {
        background-color: #2196f3;
    }


.rf-role-geo-summary {
    flex: 0 0 calc(100% - 50px) !important;
    background-color: #673ab745;
    align-items: unset !important;
    margin-top: 15px;
}

    .rf-role-geo-summary > span {
        background-color: #673ab7;
    }

    .rf-role-geo-summary > div {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

.rf-role-geo-summary-item {
    display: flex;
    align-items: center;
    flex: 1 0 135px;
    gap: 10px;
}

    .rf-role-geo-summary-item > span {
        padding: 5px;
        border-radius: 5px;
        flex: 0 0 70px;
        text-align: center;
        font-size: 18px;
        box-shadow: 2px 4px 5px #00000036;
    }

    .rf-role-geo-summary-item > div {
        word-break: break-all;
    }
/*UserRoleSummary*/

/*UserList*/
.user-bolder {
    font-weight: 600;
}

.user-slim {
    font-size: 13px;
}
/*UserList*/


/*RF SelectBox*/
.rf-selectbox {
    border-radius: 5px;
    padding: 1px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
}

.rf-selectbox-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    min-height: 40px;
}

    .rf-selectbox-header > i {
        border-radius: 50%;
        background-color: #ededed;
        border: 3px solid white;
        height: 50px;
        width: 50px;
        position: absolute;
        top: -12px;
        left: -6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #00000073;
        overflow: hidden;
    }

.rf-selectbox-header-title {
    flex: auto;
    padding: 8px;
    padding-left: 55px;
    font-weight: 600;
    color: #000000b3;
}

.rf-selectbox-header-count {
    flex: 1 0 20px;
    max-width: 50px;
    margin-right: 5px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background-color: #ffffff4d;
    border: 1px solid #00000012;
    border-radius: 5px;
}

.rf-selectbox-header-search {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    background-color: white;
    border-bottom: 1px dashed #0000001f;
}

    .rf-selectbox-header-search > input {
        flex: auto;
        width: 100%;
        border: none;
        background-color: transparent;
        font-size: 14px;
        padding: 2px 10px;
    }

    .rf-selectbox-header-search > i {
        flex: 0 0 25px;
        width: 25px;
        height: 25px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

        .rf-selectbox-header-search > i:hover {
            background-color: #ebebeb;
        }

.rf-selectbox-body {
    flex: auto;
    overflow: auto;
    background-color: #ffffff;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rf-selectbox-card {
    padding: 5px 10px;
    position: relative;
    transition: all 0.1s ease-in-out;
    cursor: pointer;
}

.rf-selectbox.False .rf-selectbox-card {
    animation: slide-top 0.5s ease-in-out;
}

@keyframes slide-top {
    0% {
        transform: translateY(-100px);
    }

    100% {
        transform: translateY(0);
    }
}

.rf-selectbox-card::before {
    content: '';
    position: absolute;
    background-color: white;
    top: 0;
    left: 3px;
    right: 0;
    height: 100%;
    opacity: 0.6;
    transition: all 0.3s ease-in-out;
}

.rf-selectbox-card > * {
    position: relative !important;
    min-height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rf-selectbox-card:hover::before {
    opacity: 0.4;
}

.rf-selectbox-card.True::before {
    opacity: 0;
    height: 0;
}

.rf-selectbox-card-norecord {
    font-weight: 600;
    opacity: 0.5;
    text-align: center;
}

.rf-selectbox.True {
}

    .rf-selectbox.True .rf-selectbox-header > i::before {
        animation: lds-ring 1s linear infinite;
        font-size: 24px;
        color: black;
    }
/*RF SelectBox*/
/*GEO CARD*/
.geo-card {
}

.geo-title {
    font-weight: 600;
    word-break: break-all;
}

.geo-subtitle {
    font-size: 12px;
    word-break: break-all;
    color: #0000009c;
}
/*GEO CARD*/


/*UserGeoRF*/
.user-geo-rf {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(calc(200px),1fr));
    max-height: 60vh;
    overflow: auto;
}

    .user-geo-rf > * {
        animation: scale01 0.8s ease-in-out;
    }
/*UserGeoRF*/
/*IconPickerRF*/
.iconpicker-rf {
    min-height: 38px;
}

.iconpicker-rf-viewer {
    display: flex;
    gap: 10px;
    overflow: hidden;
    padding: 0 5px;
}

    .iconpicker-rf-viewer > i {
        font-size: 25px;
        flex: 0 0 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .iconpicker-rf-viewer > span {
        flex: auto;
        height: 36px;
        display: flex;
        align-items: center;
    }

.iconpicker-rf-popper {
    display: none;
}

    .iconpicker-rf-popper.True {
        display: block;
        position: absolute;
        background-color: white;
        border-radius: var(--control-border-radius);
        border: var(--control-border);
        border-color: var(--control-border-color);
        box-shadow: 0px 5px 10px #00000033;
        z-index: 9;
        padding: 5px 10px;
    }

.iconpicker-rf-popper-input {
}

.iconpicker-rf-popper-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
    font-size: 18px;
    gap: 8px;
    background-color: var(--control-background-color);
    color: var(--control-color);
    max-height: 150px;
    overflow: auto;
    text-align: center;
}

.iconpicker-rf-popper-item {
    opacity: 0.5;
    transition: all 0.2s ease-in;
    cursor: pointer;
}

    .iconpicker-rf-popper-item:hover,
    .iconpicker-rf-popper-item.True {
        opacity: 1;
    }
/*IconPickerRF*/
/*MenuDesignerRF*/
.rf-menu-designer {
    padding: 5px;
    animation: scale01 0.8s ease-in-out;
}

    .rf-menu-designer * {
        user-select: none;
    }

.rf-menu-designer-header {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    z-index: 1;
    top: -5px;
    margin-bottom: 15px;
    background-color: white;
    border: 1px solid #0000001a;
    border-left: 4px solid #0000001f;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #00000017;
    padding: 8px 15px;
    overflow: hidden;
    position: sticky;
    top: 55px;
}

    .rf-menu-designer-header > i {
        flex: 0 0 16px;
        font-size: 16px;
    }

.rf-menu-designer-header-title {
    flex: auto;
    font-weight: 600;
}

    .rf-menu-designer-header-title > input {
        width: 100%;
        border: none;
        border-bottom: 1px solid transparent;
        font-weight: inherit;
        font-size: inherit;
        transition: all 0.3s;
    }

        .rf-menu-designer-header-title > input:focus, .rf-menu-designer-header-title > input:focus-visible {
            border-color: lightgray;
        }

i.rf-menu-designer-header-expander,
.rf-menu-designer-card-item > i.rf-menu-designer-card-item-expander {
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9b9b9;
    height: 24px;
    cursor: pointer;
    transition: all 0.3s;
}

    .rf-menu-designer-card-item > i.rf-menu-designer-card-item-expander.False {
        opacity: 0.2;
        cursor: not-allowed;
    }

    i.rf-menu-designer-header-expander:hover,
    .rf-menu-designer-card-item > i.rf-menu-designer-card-item-expander:hover {
        background-color: #f7f7f7;
        color: black;
    }

.rf-menu-designer-body {
    /*overflow: hidden;*/
}

    .rf-menu-designer-body ul {
        list-style: none;
        margin: 0;
        padding: 0;
        flex: auto;
    }

.rf-menu-designer-card {
    position: relative;
}

.rf-menu-designer-body > ul > li {
    padding-left: 0;
    padding-top: 10px;
    border-left: none;
}

    .rf-menu-designer-body > ul > li:first-child {
        padding-top: 0px;
    }

    .rf-menu-designer-body > ul > li ul {
        margin-left: 15px;
        max-height: 6000px;
        opacity: 1;
        transition: max-height 3s,opacity 0.5s;
    }

.rf-menu-designer-body li.False > ul {
    z-index: -1;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s,opacity 0.2s;
}

.rf-menu-designer-body > ul > li li {
    margin: 0;
    padding-top: 10px;
    border-left: 1px solid #989898;
    display: flex;
    flex-wrap: wrap;
}

    .rf-menu-designer-body > ul > li li > ul > li {
        margin-left: 15px;
    }

.rf-menu-designer-body > ul li:last-child {
    border-left-color: transparent;
}

.rf-menu-designer-body p {
    padding: 0;
    margin: 0;
}

.rf-menu-designer-body > ul > li li > p {
    flex: 0 0 15px;
    margin-top: -10px;
    display: flex;
}

    .rf-menu-designer-body > ul > li li > p > span {
        flex: auto;
        height: calc(50% + 5px);
        border-bottom: 1px solid #989898;
    }

.rf-menu-designer-body > ul > li li:last-child > p > span {
    border-left: 1px solid #989898;
    margin-left: -1px;
    border-bottom-left-radius: 5px;
}

.rf-menu-designer-card-item-cancelcopy,
.rf-menu-designer-card-item-delete {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background-color: #ffffffab;
    cursor: pointer;
}

.rf-menu-designer-card-item-delete {
    cursor: auto;
    display: flex;
    justify-content: end;
    overflow: hidden;
}

    .rf-menu-designer-card-item-delete > div {
        flex: 0 0 350px;
        display: flex;
        gap: 10px;
        background-color: white;
        align-items: center;
        padding: 0 20px;
        box-shadow: 0 0 20px #0000002e;
    }

.rf-menu-designer-card-item-delete-title {
    flex: auto;
    font-weight: bold;
}

.rf-menu-designer-card-item-delete-yes,
.rf-menu-designer-card-item-delete-no {
    flex: 0 0 50px;
    background-color: #f4433652;
    color: black;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.rf-menu-designer-card-item-delete-no {
    background-color: #00968836;
}

.rf-menu-designer-card-item-delete-yes:hover {
    background-color: #e91e63;
    color: white;
}

.rf-menu-designer-card-item-delete-no:hover {
    background-color: #009688;
    color: white;
}

.rf-menu-designer-card-item {
    background-color: white;
    border: 1px solid #0000001a;
    border-left: 4px solid #0000001f;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #00000017;
    padding: 8px 15px;
    padding-right: 25px;
    flex: 0 0 calc(100% - 15px);
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    transition: all 0.5s;
}

    .rf-menu-designer-card-item:hover {
        border-left-color: #878787;
    }

    .rf-menu-designer-card-item > .iconpicker-rf {
        flex: 0 0 38px;
        width: 38px;
        min-height: 20px;
        margin: 0;
        border: none;
    }

        .rf-menu-designer-card-item > .iconpicker-rf .iconpicker-rf-viewer > i {
            height: 24px;
            font-size: 20px;
        }

        .rf-menu-designer-card-item > .iconpicker-rf .iconpicker-rf-viewer > span {
            display: none;
        }

.rf-menu-designer-card-item-body {
    flex: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
}

    .rf-menu-designer-card-item-body input {
        border: none;
        padding: 0;
        width: 100%;
        border-bottom: 1px dashed #00000000;
        transition: all 0.5s ease-in-out;
    }

        .rf-menu-designer-card-item-body input:focus {
            border-color: #00000024;
        }

.rf-menu-designer-card-item-body-left {
    flex: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .rf-menu-designer-card-item-body-left > div {
        flex: 1 0 200px;
    }

        .rf-menu-designer-card-item-body-left > div > div {
            font-size: 12px;
        }

.rf-menu-designer-card-item-body-right {
    flex: 0 1 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    position: relative;
}

.rf-menu-designer-card-checked-items {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: white;
    font-size: 20px;
}

    .rf-menu-designer-card-checked-items > i {
        cursor: pointer;
        color: #bebebe;
        transition: all 0.3s ease-in-out;
    }

        .rf-menu-designer-card-checked-items > i:hover {
            color: #474747;
        }

        .rf-menu-designer-card-checked-items > i.True {
            color: #474747;
            font-weight: 600;
        }

.rf-menu-designer-card-select-items {
    border: none;
}

.rf-menu-designer-card-item-setup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    width: auto;
    min-width: 20px;
    max-width: 0;
    overflow: hidden;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f3f3f3;
    padding: 10px 5px;
    color: #626262;
    cursor: pointer;
    transition: max-width 1s ease-in-out,padding 0.5s ease-in-out,box-shadow 0.5s ease-in-out,background-color 0.3s ease-in-out;
}

    .rf-menu-designer-card-item-setup.True {
        display: none;
    }

    .rf-menu-designer-card-item-setup > i {
        cursor: pointer;
        color: #0000004f;
        font-size: 18px;
        transition: all 0.2s ease-in-out;
    }

        .rf-menu-designer-card-item-setup > i:hover {
            color: #000000;
        }

    .rf-menu-designer-card-item-setup:hover {
        box-shadow: -10px 0px 20px 0px #00000038;
        max-width: 1000px;
        padding: 10px 20px;
        background-color: white;
    }

.rf-menu-designer-card-item-setup-menu {
    display: none;
}

.rf-menu-designer-card-item-setup:hover .rf-menu-designer-card-item-setup-menu {
    display: flex;
}

.rf-menu-designer-card-item-setup:hover .rf-menu-designer-card-item-setup-menu-icon {
    display: none;
}
/*MenuDesignerRF*/


/*Input-Grid*/
.input-grid-rf {
    margin: 15px 0;
}

    .input-grid-rf > table {
        width: 100%;
        border-color: #dee2e6;
    }

        .input-grid-rf > table thead {
            position: sticky;
            top: 0px;
            z-index: 7;
            box-shadow: 0px 0px 8px 0px #0000000f;
            background-color: white;
            cursor: pointer;
        }

            .input-grid-rf > table thead > tr > th {
                box-shadow: inset 0px 0px 0px 1px #0000000d;
                font-weight: 500;
                border-width: 0 !important;
                padding: 5px 10px;
            }

        .input-grid-rf > table tbody > tr > td {
            border-width: 1px;
            border-style: dashed;
            border-top: 0;
            padding: 5px 10px;
        }

        .input-grid-rf > table tbody > tr:hover > td {
            background-color: #fbfbfb;
        }

        .input-grid-rf > table tbody input {
        }
/*Input-Grid*/