@charset "UTF-8";

:root,
[data-bs-theme=light] {
    --bs-gray-dark: rgba(67, 89, 113, 0.8);
    --bs-gray-25: rgba(67, 89, 113, 0.025);
    --bs-gray-50: rgba(67, 89, 113, 0.05);
    --bs-primary-rgb: 105, 108, 255;
    --bs-secondary-rgb: 133, 146, 163;
    --bs-success-rgb: 113, 221, 55;
    --bs-info-rgb: 3, 195, 236;
    --bs-warning-rgb: 255, 171, 0;
    --bs-danger-rgb: 255, 62, 29;
    --bs-light-rgb: 252, 253, 253;
    --bs-dark-rgb: 35, 52, 70;
    --bs-gray-rgb: 67, 89, 113;
    --bs-primary-text-emphasis: #2a2b66;
    --bs-secondary-text-emphasis: #353a41;
    --bs-success-text-emphasis: #2d5816;
    --bs-info-text-emphasis: #014e5e;
    --bs-warning-text-emphasis: #664400;
    --bs-danger-text-emphasis: #66190c;
    --bs-light-text-emphasis: rgba(67, 89, 113, 0.7);
    --bs-dark-text-emphasis: rgba(67, 89, 113, 0.7);
    --bs-primary-bg-subtle: #e1e2ff;
    --bs-secondary-bg-subtle: #e7e9ed;
    --bs-success-bg-subtle: #e3f8d7;
    --bs-info-bg-subtle: #cdf3fb;
    --bs-warning-bg-subtle: #fefce8;
    --bs-danger-bg-subtle: #ffd8d2;
    --bs-light-bg-subtle: rgba(246, 247, 248, 0.55);
    --bs-dark-bg-subtle: rgba(67, 89, 113, 0.4);
    --bs-primary-border-subtle: #c3c4ff;
    --bs-secondary-border-subtle: #ced3da;
    --bs-success-border-subtle: #c6f1af;
    --bs-info-border-subtle: #9ae7f7;
    --bs-warning-border-subtle: #ffdd99;
    --bs-danger-border-subtle: #ffb2a5;
    --bs-light-border-subtle: rgba(67, 89, 113, 0.2);
    --bs-dark-border-subtle: rgba(67, 89, 113, 0.5);
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 67, 89, 113;
    --bs-font-sans-serif: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --bs-font-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient( 180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) );
    --bs-root-font-size: 16px;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.9375rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.53;
    --bs-body-color: #697a8d;
    --bs-body-color-rgb: 105, 122, 141;
    --bs-body-bg: #f5f5f9;
    --bs-body-bg-rgb: 245, 245, 249;
    --bs-emphasis-color: #435971;
    --bs-emphasis-color-rgb: 67, 89, 113;
    --bs-secondary-color: rgba(105, 122, 141, 0.75);
    --bs-secondary-color-rgb: 105, 122, 141;
    --bs-secondary-bg: rgba(67, 89, 113, 0.2);
    --bs-secondary-bg-rgb: 67, 89, 113;
    --bs-tertiary-color: rgba(105, 122, 141, 0.5);
    --bs-tertiary-color-rgb: 105, 122, 141;
    --bs-tertiary-bg: rgba(67, 89, 113, 0.1);
    --bs-tertiary-bg-rgb: 67, 89, 113;
    --bs-heading-color: #020617;
    --bs-link-color: #696cff;
    --bs-link-color-rgb: 105, 108, 255;
    --bs-link-decoration: none;
    --bs-link-hover-color: #5f61e6;
    --bs-link-hover-color-rgb: 95, 97, 230;
    --bs-code-color: #e83e8c;
    --bs-highlight-color: #697a8d;
    --bs-highlight-bg: #ffeecc;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #d9dee3;
    --bs-border-color-translucent: rgba(67, 89, 113, 0.175);
    --bs-box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4);
    --bs-box-shadow-lg: 0 0.625rem 1.25rem rgba(161, 172, 184, 0.5);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(67, 89, 113, 0.075);
    --bs-focus-ring-width: 0.15rem;
    --bs-focus-ring-opacity: 0.75;
    --bs-focus-ring-color: rgba(67, 89, 113, 0.75);
    --bs-form-valid-color: #71dd37;
    --bs-form-valid-border-color: #71dd37;
    --bs-form-invalid-color: #ff3e1d;
    --bs-form-invalid-border-color: #ff3e1d;
}

body[data-style=ios] {
    --bs-radius: 7px;
    --bs-box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    --padding: 20px;
    --bs-border-radius: 7px;
    --bs-border-radius-sm: 12px;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 0.625rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-bg-page: #f5f5f7;
    --bs-color-text: #020617;
}

    body[data-style=ios] .badge {
        --bs-badge-padding-x: 0.593em;
        --bs-badge-padding-y: 0.52em;
        --bs-badge-font-size: 0.8125em;
        --bs-badge-font-weight: 500;
        --bs-badge-color: #fff;
        --bs-badge-border-radius: 20px;
        display: inline-block;
        padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
        font-size: var(--bs-badge-font-size);
        font-weight: var(--bs-badge-font-weight);
        line-height: 1;
        color: var(--bs-badge-color);
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: var(--bs-badge-border-radius);
    }

body[data-style=google] {
    --bs-radius: 10px;
    --bs-box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    --padding: 15px;
    --bs-border-radius: 5px;
    --bs-border-radius-sm: 5px;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 0.625rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-bg-page: #ffff;
    --bs-color-text: #020617;
}

    body[data-style=google] .badge {
        --bs-badge-padding-x: 0.593em;
        --bs-badge-padding-y: 0.52em;
        --bs-badge-font-size: 0.8125em;
        --bs-badge-font-weight: 500;
        --bs-badge-color: #fff;
        --bs-badge-border-radius: 0.25rem;
        display: inline-block;
        padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
        font-size: var(--bs-badge-font-size);
        font-weight: var(--bs-badge-font-weight);
        line-height: 1;
        color: var(--bs-badge-color);
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: var(--bs-badge-border-radius);
    }

body[data-color=color-1] {
    --bs-primary-rgba: rgb(105, 108, 255, 0.3);
    --bs-primary: #223e9c;
    --bs-primary-hover: #223e9c;
    --bs-secondary: #8592a3;
    --bs-secondary-hover: #788393;
    --bs-success: #22c55e;
    --bs-success-hover: #22c55e;
    --bs-info: #6366f1;
    --bs-info-hover: #6366f1;
    --bs-warning: #f59e0b;
    --bs-warning-hover: #f59e0b;
    --bs-danger: #e11d48;
    --bs-danger-hover: #e11d48;
    --bs-light: #fcfdfd;
    --bs-light-hover: #fcfdfd;
    --bs-dark: #233446;
    --bs-dark-hover: #202f3f;
    --bs-gray: rgba(67, 89, 113, 0.1);
    --bs-blue: #007bff;
    --bs-indigo: #6610f2;
    --bs-purple: #696cff;
    --bs-pink: #e83e8c;
    --bs-red: #ff3e1d;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffab00;
    --bs-green: #71dd37;
    --bs-teal: #20c997;
    --bs-cyan: #03c3ec;
    --bs-black: #435971;
    --bs-white: #fff;
    --bs-gray: rgba(67, 89, 113, 0.6);
}

body[data-color=color-2] {
    --bs-primary-rgba: rgb(76, 20, 141, 0.3);
    --bs-primary: #6b21a8;
    --bs-primary-hover: #6b21a8;
    --bs-secondary: #d8d8d8;
    --bs-secondary-hover: #d8d8d8;
    --bs-success: #38ce3c;
    --bs-success-hover: #38ce3c;
    --bs-info: #1bdbe0;
    --bs-info-hover: #1bdbe0;
    --bs-warning: #eab308;
    --bs-warning-hover: #eab308;
    --bs-danger: #ff4d6b;
    --bs-danger-hover: #ff4d6b;
    --bs-light: #fcfdfd;
    --bs-light-hover: #fcfdfd;
    --bs-dark: #233446;
    --bs-dark-hover: #202f3f;
    --bs-gray: rgba(67, 89, 113, 0.1);
    --bs-blue: #007bff;
    --bs-indigo: #6610f2;
    --bs-purple: #696cff;
    --bs-pink: #e83e8c;
    --bs-red: #ff3e1d;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffab00;
    --bs-green: #71dd37;
    --bs-teal: #20c997;
    --bs-cyan: #03c3ec;
    --bs-black: #435971;
    --bs-white: #fff;
    --bs-gray: rgba(67, 89, 113, 0.6);
}

body[data-color=color-3] {
    --bs-primary-rgba: rgb(29, 78, 216, 0.3);
    --bs-primary: #0090e7;
    --bs-primary-hover: #0ea5e9;
    --bs-secondary: #e4eaec;
    --bs-secondary-hover: #e4eaec;
    --bs-success: #00d25b;
    --bs-success-hover: #00d25b;
    --bs-info: #8f5fe8;
    --bs-info-hover: #8f5fe8;
    --bs-warning: #facc15;
    --bs-warning-hover: #facc15;
    --bs-danger: #fc424a;
    --bs-danger-hover: #fc424a;
    --bs-light: #fcfdfd;
    --bs-light-hover: #fcfdfd;
    --bs-dark: #233446;
    --bs-dark-hover: #202f3f;
    --bs-gray: rgba(67, 89, 113, 0.1);
    --bs-blue: #007bff;
    --bs-indigo: #6610f2;
    --bs-purple: #696cff;
    --bs-pink: #e83e8c;
    --bs-red: #ff3e1d;
    --bs-orange: #fd7e14;
    --bs-yellow: #facc15;
    --bs-green: #71dd37;
    --bs-teal: #20c997;
    --bs-cyan: #03c3ec;
    --bs-black: #435971;
    --bs-white: #fff;
    --bs-gray: rgba(67, 89, 113, 0.6);
}

.wrapImgResize {
    overflow: hidden;
    position: relative;
    display: block;
}

    .wrapImgResize video,
    .wrapImgResize iframe,
    .wrapImgResize img {
        object-fit: cover;
        -webkit-object-fit: cover;
        -moz-object-fit: cover;
        -ms-object-fit: cover;
        -o-object-fit: cover;
        width: 101%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        min-height: 101%;
        max-height: 101%;
    }

    .wrapImgResize.img16And9 {
        padding-top: 56.25%;
    }

    .wrapImgResize.imgSquare {
        padding-top: 100%;
    }

    .wrapImgResize.img9And16 {
        padding-top: 177%;
    }

    .wrapImgResize.img3And4 {
        padding-top: 133.33333333%;
    }

    .wrapImgResize.imgSpecial1 {
        padding-top: 75.46%;
    }

@media only screen and (max-width: 1220px) {
    .wrapperMenuTopMobile {
        display: flex;
        justify-content: space-between;
        position: relative;
    }
}

.searchMenuMobile {
    display: none;
    padding: 5px 10px;
}

@media only screen and (max-width: 576px) {
    .searchMenuMobile {
        display: block;
    }
}

.wrapMenuMainContentHeader {
    position: relative;
}

@media only screen and (max-width: 1220px) {
    .wrapMenuMainContentHeader {
        height: 100%;
    }

        .wrapMenuMainContentHeader > .wrapMenuHeader {
            height: calc(100% - 70px);
            height: -ms-calc(100% - 70px);
            height: -o-calc(100% - 70px);
            overflow-y: auto;
        }
}

.HeadingPage {
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .HeadingPage {
        display: none;
    }
}

.HeadingPage h1 {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 0px;
}

@media only screen and (max-width: 1220px) {
    .HeadingPage h1 {
        font-size: 18px;
    }
}

/* ======== || LOGO || ========  */
.wrapLogoHeader {
    font-size: 0;
    line-height: 0;
    color: transparent;
    z-index: 1;
    z-index: 10;
    display: flex;
    align-items: center;
}

    .wrapLogoHeader .linkLogoHeader {
        display: inline-block;
    }

        .wrapLogoHeader .linkLogoHeader .imgLogoHeader {
            height: 35px;
            width: auto;
            display: block;
            transition: height 0.5s;
        }

@media only screen and (max-width: 1220px) {
    .wrapLogoHeader .linkLogoHeader .imgLogoHeader {
        height: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .wrapLogoHeader .linkLogoHeader .imgLogoHeader {
        height: 30px;
    }
}

.headerTop {
    height: 70px;
    display: flex;
    align-items: center;
    background-color: #f9faf5;
}

@media only screen and (max-width: 1220px) {
    .headerTop {
        position: fixed;
        width: 100%;
        z-index: 991;
    }
}

.headerTop .wrapperContentTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

    .headerTop .wrapperContentTop .wrapperRight {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .headerTop .wrapperContentTop .wrapperRight .searchPage .icon svg {
            width: 20px;
            height: 20px;
        }

        .headerTop .wrapperContentTop .wrapperRight .btn svg {
            width: 20px;
            height: 20px;
        }

        .headerTop .wrapperContentTop .wrapperRight .btn .rounded-pill {
            left: 80% !important;
        }

/* ======== || LIST MENU ITEMS HEADER || ========  */
.wrapMenuHeader {
    padding-top: 0px;
}

    .wrapMenuHeader .itemMenuHeader {
        gap: 10px;
    }

        .wrapMenuHeader .itemMenuHeader.menuSub:hover svg {
            fill: #e9e9ef !important;
        }

    .wrapMenuHeader .listMenuHeader {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .wrapMenuHeader .listMenuHeader .linkMenuHeader {
            font-size: 14px;
            line-height: 20px;
            color: #ffff;
            display: block;
            transition: 0.5s;
            display: flex;
            align-items: center;
            text-decoration: none;
            font-weight: 500;
            position: relative;
        }

@media only screen and (max-width: 1600px) {
    .wrapMenuHeader .listMenuHeader .linkMenuHeader {
        font-size: 14px;
    }
}

@media only screen and (max-width: 1220px) {
    .wrapMenuHeader .listMenuHeader .linkMenuHeader {
        padding: 10px 10px 10px 20px;
        font-size: 18px;
        color: var(--bs-primary);
    }
}

.wrapMenuHeader .listMenuHeader .linkMenuHeader svg {
    color: #eea01c;
    width: 20px;
    height: 20px;
}

.wrapMenuHeader .listMenuHeader .itemMenuHeader .btnDropdownMenuSub {
    display: block;
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translate(0, -50%);
    color: #ffff;
}

@media only screen and (max-width: 1220px) {
    .wrapMenuHeader .listMenuHeader .itemMenuHeader .btnDropdownMenuSub {
        top: 0;
        transform: unset;
        display: flex;
        align-items: center;
        position: absolute;
        justify-content: center;
        width: 33px;
        height: 41px;
        transition: 0.5s;
        color: var(--bs-primary);
        right: 0;
    }
}

.wrapMenuHeader .listMenuHeader .itemMenuHeader .btnDropdownMenuSub svg {
    width: 12px;
    height: 20px;
    transition: 0.5s;
    transform: translate(0, -2px);
    display: inline-block;
    fill: #eea01c;
}

    .wrapMenuHeader .listMenuHeader .itemMenuHeader .btnDropdownMenuSub svg:last-child {
        display: none;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
    }

.wrapMenuHeader .listMenuHeader .itemMenuHeader.menuSub {
    text-align: left;
}

    .wrapMenuHeader .listMenuHeader .itemMenuHeader.menuSub .listMenuHeader {
        padding: 5px 20px;
        min-width: 150px;
    }

@media only screen and (max-width: 1220px) {
    .wrapMenuHeader .listMenuHeader .itemMenuHeader.menuSub .listMenuHeader {
        background-color: rgba(218, 218, 218, 0.2);
        border-bottom: 0px !important;
    }
}

.wrapMenuHeader .listMenuHeader .itemMenuHeader.menuSub .listMenuHeader .itemMenuHeader:first-child {
    border-top: none;
}

.wrapMenuHeader .listMenuHeader .itemMenuHeader.menuSub .listMenuHeader .linkMenuHeader {
    padding: 10px 0;
    color: var(--bs-color-text);
    font-weight: 500;
    font-size: 14px;
    transition: 0.3s;
    text-transform: unset;
}

@media only screen and (min-width: 1221px) {
    .wrapMenuHeader .listMenuHeader .itemMenuHeader.menuSub .listMenuHeader .linkMenuHeader {
        color: var(--bs-color-text);
    }
}

.wrapMenuHeader .listMenuHeader .itemMenuHeader .btnDropdownMenuSub .wrapMenuMainHeader > .wrapMenuMainHeader > .listMenuMainHeader {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 990;
}

.wrapMenuHeader .listMenuHeader .itemMenuHeader .wrapBtnCtrMenuHeader,
.wrapMenuHeader .listMenuHeader .itemMenuHeader .wrapCloseInfoContactHeaderMobile,
.wrapMenuHeader .listMenuHeader .itemMenuHeader .wrapCloseMenuHeaderMobile {
    display: none;
}

/*===========|| container header bottom && header top  ||============ */
.containerHeader {
    height: 100%;
}

@media only screen and (min-width: 1221px) {
    .containerHeader {
        display: grid;
    }
}

.contentHeader {
    transition: all 0.3s ease-in-out;
    height: 150px;
    z-index: 900;
}

@media only screen and (max-width: 1220px) {
    .contentHeader {
        height: 80px;
    }
}

@media only screen and (max-width: 768px) {
    .contentHeader {
        height: 60px;
    }
}

.contentHeader .headerBottom {
    width: 100%;
    z-index: 991;
    transition: all 0.2s ease-in-out;
    height: 60px;
    top: 70px;
    left: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 1220px) {
    .contentHeader .headerBottom {
        height: 0px;
    }
}

.contentHeader .headerBottom .containerHeaderBottom,
.contentHeader .headerBottom .contentHeaderBottom {
    height: 100%;
}

.contentHeader .headerBottom .contentHeaderBottom {
    position: relative;
    width: 100%;
}

@media only screen and (min-width: 1221px) {
    .contentHeader .headerBottom .contentHeaderBottom .wrapMenuMainHeader {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
    }
}

@media only screen and (max-width: 1220px) {
    .contentHeader .headerBottom .contentHeaderBottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.contentHeader .headerBottom .contentHeaderBottom .wrapMenuHeader .listMenuHeader .itemMenuHeader.menuSub .listMenuHeader {
    flex-direction: column !important;
}

.fixedMenu .headerBottom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/*===========|| BTN CLOSE OPEN MENU ||============ */
.wrapBtnCtrMenuHeader {
    display: none;
}

@media only screen and (max-width: 1220px) {
    .wrapBtnCtrMenuHeader {
        display: block;
        transition: 0.5s;
        float: left;
        right: 0;
        cursor: pointer;
    }

        .wrapBtnCtrMenuHeader .btnCtrMenu {
            display: block;
            width: 25px;
            height: 25px;
            position: relative;
            display: block;
        }

            .wrapBtnCtrMenuHeader .btnCtrMenu i {
                font-size: 35px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: 0.5s;
                color: #1b0c08;
            }

            .wrapBtnCtrMenuHeader .btnCtrMenu svg.iconClose {
                opacity: 0;
            }
}
/* ====== || OVERIDE MENU MOBILE ======= */
@media only screen and (min-width: 1221px) {
    .wrapCloseMenuHeaderMobile {
        display: none;
    }
}

.wrapperBtncloseMobile {
    display: none;
}

@media only screen and (max-width: 1220px) {
    .wrapperBtncloseMobile {
        display: block;
        position: absolute;
        top: 10px;
        left: 100%;
        color: #ffff;
        padding-left: 10px;
    }
}

@media only screen and (max-width: 390px) {
    .wrapperBtncloseMobile {
        top: 5px;
        padding-left: 0;
    }
}

.wrapperBtncloseMobile .icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transform: 0.4s;
}

    .wrapperBtncloseMobile .icon i {
        font-size: 40px;
        color: #ffff;
    }

@media only screen and (max-width: 376px) {
    .wrapperBtncloseMobile .icon i {
        font-size: 34px;
    }
}

@media only screen and (max-width: 1220px) {
    .listMenuHeader {
        border-bottom: 1px solid #eeeeee;
    }

        .listMenuHeader .itemMenuHeader {
            border-top: 1px solid #eeeeee;
        }

            .listMenuHeader .itemMenuHeader:first-child {
                border-top: none;
            }

            .listMenuHeader .itemMenuHeader.menuSub {
                position: relative;
            }

                .listMenuHeader .itemMenuHeader.menuSub .menuSub .btnDropdownMenuSub svg {
                    width: 12px;
                }

                .listMenuHeader .itemMenuHeader.menuSub > .linkMenuHeader {
                    padding-right: 0;
                    width: 100%;
                }

                .listMenuHeader .itemMenuHeader.menuSub > .wrapMenuHeader {
                    display: none;
                }

    .wrapCloseMenuHeaderMobile {
        position: fixed;
        top: 0px;
        right: -100%;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 993;
        transition: 0.5s;
    }

    .wrapMenuMainHeader {
        position: fixed;
        top: 0px;
        left: -100%;
        height: 100%;
        max-width: 350px;
        width: 90%;
        background-color: #ffff;
        z-index: 993;
        transition: 0.5s;
    }
}

@media only screen and (max-width: 1220px) and (max-width: 576px) {
    .wrapMenuMainHeader {
        max-width: 350px;
    }
}

@media only screen and (max-width: 1220px) {
    .showMenu .wrapMenuMainHeader {
        left: 0;
    }
}

@media only screen and (max-width: 1220px) {
    .showMenu .wrapCloseMenuHeaderMobile {
        right: 0;
    }
}

@media only screen and (max-width: 1220px) {
    .showMenu .wrapBtnCtrMenuHeader .btnCtrMenu {
        color: #4c148d;
    }
}

@media only screen and (max-width: 1220px) {
    .showMenu .wrapBtnCtrMenuHeader .btnCtrMenu svg.iconOpen {
        opacity: 0;
    }
}

@media only screen and (max-width: 1220px) {
    .showMenu .wrapBtnCtrMenuHeader .btnCtrMenu svg.iconClose {
        opacity: 1;
    }
}
/*======|| OVERIDE MENU DESKTOP || ======= */
@media only screen and (min-width: 1221px) {
    .itemMenuHeader:hover > .btnDropdownMenuSub,
    .itemMenuHeader:hover > .linkMenuHeader {
        color: #e9e9ef;
    }

    .linkMenuHeader {
        padding: 10px 0;
    }

    .wrapMenuMainHeader > .wrapMenuHeader.setMenuCenter {
        opacity: 0;
    }

    .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader {
        margin-left: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader > .linkMenuHeader {
            position: relative;
        }

        .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader:hover > .btnDropdownMenuSub svg:first-child {
            display: none;
        }

        .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader:hover > .btnDropdownMenuSub svg:last-child {
            display: block;
            color: #4c148d;
        }

        .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader:first-child {
            margin-left: 0;
        }

        .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader.left {
            margin-right: 82px;
        }

        .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader.right {
            margin-left: 82px;
        }

        .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader.logo {
            margin: 0;
        }

        .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader .itemMenuHeader:hover {
            color: #4c148d;
        }

            .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader .itemMenuHeader:hover > .btnDropdownMenuSub,
            .wrapMenuMainHeader > .wrapMenuHeader > .listMenuHeader > .itemMenuHeader .itemMenuHeader:hover > .linkMenuHeader {
                color: #e9e9ef;
            }

    .menuSub {
        position: relative;
        padding-right: 15px;
    }

        .menuSub .menuSub {
            padding-right: 22px;
        }

            .menuSub .menuSub .btnDropdownMenuSub {
                transform: translate(0, -50%) rotate(-90deg);
                right: 0;
            }

        .menuSub .wrapMenuHeader {
            position: absolute;
            top: 100%;
            left: -20px;
            z-index: 991;
            display: none;
            padding-top: 19px;
            min-width: calc(100% + 30px);
        }

            .menuSub .wrapMenuHeader .wrapMenuHeader {
                top: -5px;
                left: 100%;
                padding: 0 0 0 25px;
            }

        .menuSub .listMenuHeader {
            background-color: #fff;
            border-radius: var(--bs-border-radius);
            box-shadow: var(--bs-box-shadow);
            white-space: nowrap;
        }
}
/*=========|| OVERIDE STYLE FIXED ||========== */
@media (min-width: 1221px) {
    .fixedMenu .wrapMenuMainHeader > .wrapMenuHeader {
        top: 12px;
    }

    .fixedMenu .menuSub .wrapMenuHeader {
        padding-top: 18px;
    }

        .fixedMenu .menuSub .wrapMenuHeader .wrapMenuHeader {
            padding-top: 0;
        }

    .fixedMenu .wrapLanguage {
        top: 24px;
    }
}

.wrapperMenuTopMobile {
    display: none;
}

@media only screen and (max-width: 1220px) {
    .wrapperMenuTopMobile {
        display: flex;
        flex-direction: row-reverse;
        background-color: #ffff;
        z-index: 99;
        width: 100%;
    }
}

@media only screen and (max-width: 456px) {
    .wrapperMenuTopMobile {
        width: 100%;
    }
}

.wrapperMenuTopMobile .logoMobile {
    display: block;
    max-width: 200px;
    height: auto;
}

    .wrapperMenuTopMobile .logoMobile img {
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

.headerBottom {
    background-color: var(--bs-primary);
}

.wrapMenuHeader .listMenuHeader.Rootmenu {
    display: flex;
    justify-content: start;
    gap: 15px;
}

@media only screen and (max-width: 1220px) {
    .wrapMenuHeader .listMenuHeader.Rootmenu {
        margin-left: 10px;
        flex-direction: column;
        gap: 0px;
    }
}

.wrapMenuHeader .listMenuHeader.Rootmenu .itemMenuHeader.menuSub .btnDropdownMenuSub i {
    left: -1px;
}

.wrapMenuHeader .listMenuHeader.Rootmenu .itemMenuHeader.menuSub .itemMenuHeader:hover > .linkMenuHeader {
    color: var(--bs-primary);
}

.wrapMenuHeader .listMenuHeader.Rootmenu .btn-show-more {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .wrapMenuHeader .listMenuHeader.Rootmenu .btn-show-more i {
        font-size: 25px;
        color: #ffff;
    }

@media only screen and (max-width: 1220px) {
    .wrapMenuHeader .listMenuHeader.Rootmenu .btn-show-more {
        display: none;
    }
}

.itemMenuHeader {
    white-space: nowrap;
}

    .itemMenuHeader .linkMenuHeader {
        padding-left: 19px;
    }

        .itemMenuHeader .linkMenuHeader i {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

.menuSetting {
    position: absolute;
    top: 60px;
    right: 0;
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
    overflow: hidden;
}

    .menuSetting .show-menu {
        background-color: var(--bs-primary);
        padding: 15px;
        display: block;
        max-height: 700px;
        overflow-y: auto;
        min-width: 250px;
    }

@media only screen and (max-width: 1600px) {
    .menuSetting .show-menu {
        max-height: 500px;
    }
}

.menuSetting .show-menu.hidden {
    display: none;
}

.menuSetting .itemMenuHeader {
    list-style: none;
}

    .menuSetting .itemMenuHeader .linkMenuHeader {
        padding-left: 30px;
        font-size: 16px;
    }

    .menuSetting .itemMenuHeader .linkMenuHeader {
        color: #ffff !important;
        position: relative;
        font-weight: 500;
    }

    .menuSetting .itemMenuHeader.menuSub {
        font-size: 14px;
        padding: 0px;
    }

        .menuSetting .itemMenuHeader.menuSub .wrapMenuHeader .itemMenuHeader {
            background-color: #ffff !important;
        }

        .menuSetting .itemMenuHeader.menuSub .linkMenuHeader {
            position: relative;
            font-size: 16px;
            margin-right: 19px;
            color: #ffff !important;
            font-weight: 500;
            display: block;
            width: 100%;
            padding-left: 30px;
        }

            .menuSetting .itemMenuHeader.menuSub .linkMenuHeader .btnDropdownMenuSub {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 10px;
            }

        .menuSetting .itemMenuHeader.menuSub .wrapMenuHeader {
            position: relative;
            left: 0;
            opacity: 1;
            visibility: visible;
            min-width: -webkit-fit-content;
            min-width: -moz-fit-content;
            min-width: fit-content;
            padding-top: 0px;
            transform: unset;
            overflow: hidden;
        }

            .menuSetting .itemMenuHeader.menuSub .wrapMenuHeader .listMenuHeader {
                flex-direction: column;
                box-shadow: none;
            }

                .menuSetting .itemMenuHeader.menuSub .wrapMenuHeader .listMenuHeader .linkMenuHeader {
                    color: var(--bs-primary) !important;
                }

    .menuSetting .itemMenuHeader:hover > .linkMenuHeader {
        color: var(--bs-primary);
    }

body[data-style=ios] .wrapHeader,
body[data-style=google] .wrapHeader {
    height: 70px;
}

@media only screen and (max-width: 576px) {
    body[data-style=ios] .wrapHeader .wrapBtnCtrMenuHeader,
    body[data-style=google] .wrapHeader .wrapBtnCtrMenuHeader {
        left: 35px;
    }
}

body[data-style=ios] .wrapHeader .contentHeader,
body[data-style=google] .wrapHeader .contentHeader {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    position: relative;
}

body[data-style=ios] .wrapHeader .headerTop,
body[data-style=google] .wrapHeader .headerTop {
    box-shadow: var(--bs-box-shadow);
    border: 1px solid #52586633;
    border-top-left-radius: var(--bs-radius);
    border-top-right-radius: var(--bs-radius);
}

@media only screen and (max-width: 1220px) {
    body[data-style=ios] .wrapHeader .headerTop,
    body[data-style=google] .wrapHeader .headerTop {
        position: unset;
    }
}

@media only screen and (max-width: 992px) {
    body[data-style=ios] .wrapHeader .headerTop,
    body[data-style=google] .wrapHeader .headerTop {
        border-radius: 0;
        border: none;
    }
}

@media only screen and (min-width: 1221px) {
    body[data-style=ios] .wrapHeader .headerBottom,
    body[data-style=google] .wrapHeader .headerBottom {
        position: absolute;
        width: 70%;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
    }
}

@media only screen and (max-width: 1400px) {
    body[data-style=ios] .wrapHeader .headerBottom,
    body[data-style=google] .wrapHeader .headerBottom {
        width: 50%;
    }
}

body[data-style=ios] .wrapHeader .listMenuHeader.Rootmenu,
body[data-style=google] .wrapHeader .listMenuHeader.Rootmenu {
    justify-content: center;
}

body[data-style=ios] .wrapHeader .wrapMenuHeader .listMenuHeader .linkMenuHeader,
body[data-style=google] .wrapHeader .wrapMenuHeader .listMenuHeader .linkMenuHeader {
    color: var(--bs-color-text);
    font-size: 16px;
}

body[data-style=ios] .wrapHeader .wrapMenuHeader .listMenuHeader .itemMenuHeader .btnDropdownMenuSub,
body[data-style=google] .wrapHeader .wrapMenuHeader .listMenuHeader .itemMenuHeader .btnDropdownMenuSub {
    color: var(--bs-color-text);
}

body[data-style=ios] .wrapHeader .wrapMenuHeader .listMenuHeader.Rootmenu .btn-show-more i,
body[data-style=google] .wrapHeader .wrapMenuHeader .listMenuHeader.Rootmenu .btn-show-more i {
    color: var(--bs-color-text);
}

body[data-style=ios] .wrapHeader .menuSetting,
body[data-style=google] .wrapHeader .menuSetting {
    border: 1px solid #52586633;
}

    body[data-style=ios] .wrapHeader .menuSetting .show-menu,
    body[data-style=google] .wrapHeader .menuSetting .show-menu {
        background-color: #ffff;
    }

    body[data-style=ios] .wrapHeader .menuSetting .itemMenuHeader.menuSub .linkMenuHeader,
    body[data-style=google] .wrapHeader .menuSetting .itemMenuHeader.menuSub .linkMenuHeader {
        color: var(--bs-color-text) !important;
    }

    body[data-style=ios] .wrapHeader .menuSetting .itemMenuHeader .linkMenuHeader,
    body[data-style=google] .wrapHeader .menuSetting .itemMenuHeader .linkMenuHeader {
        color: var(--bs-color-text) !important;
    }

body.fixedMenu[data-style=ios] .headerTop,
body.fixedMenu[data-style=google] .headerTop {
    position: fixed;
    width: 100%;
    z-index: 999;
    top: 0;
    left: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

    body.fixedMenu[data-style=ios] .headerTop .contentHeader,
    body.fixedMenu[data-style=google] .headerTop .contentHeader {
        padding: 0px;
    }

    body.fixedMenu[data-style=ios] .headerTop .headerTop,
    body.fixedMenu[data-style=google] .headerTop .headerTop {
        -webkit-backdrop-filter: blur(60px);
        backdrop-filter: blur(60px);
        border-radius: 0px !important;
    }

    body.fixedMenu[data-style=ios] .headerTop .container-fluid,
    body.fixedMenu[data-style=google] .headerTop .container-fluid {
        padding: 0 75px;
    }

@media screen and (max-width: 1600px) {
    body.fixedMenu[data-style=ios] .headerTop .container-fluid,
    body.fixedMenu[data-style=google] .headerTop .container-fluid {
        padding: 0 45px;
    }
}

@media only screen and (max-width: 992px) {
    body.fixedMenu[data-style=ios] .headerTop .container-fluid,
    body.fixedMenu[data-style=google] .headerTop .container-fluid {
        padding: 0 15px;
    }
}

body.fixedMenu[data-style=ios] .layout-content .wrapHeader .headerTop,
body.fixedMenu[data-style=google] .layout-content .wrapHeader .headerTop {
    background-color: rgba(255, 255, 255, 0.95);
}

.footer.wrapperFooter {
    background-color: var(--bs-primary);
    height: auto;
    padding: 15px 0px;
    position: unset !important;
}

    .footer.wrapperFooter .wrapperContent {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

@media only screen and (max-width: 768px) {
    .footer.wrapperFooter .wrapperContent {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media only screen and (max-width: 576px) {
    .footer.wrapperFooter .wrapperContent {
        gap: 5px;
    }
}

.footer.wrapperFooter .wrapperContent .text {
    color: var(--bs-color-text);
    display: inline-block;
    font-size: 16px;
}

@media only screen and (max-width: 576px) {
    .footer.wrapperFooter .wrapperContent .text {
        font-size: 14px;
    }
}

.footer.wrapperFooter .wrapperContent .text .link {
    color: var(--bs-color-text);
}

.footer.wrapperFooter.fixFooter {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #ffff;
}

*::-webkit-scrollbar {
    width: 7px;
    background-color: #ffff;
}

*::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: var(--bs-primary);
}

.dt-responsive tr {
    position: relative;
}

.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-day.today.selected.startRange {
    background-color: var(--bs-primary) !important;
    color: #ffff !important;
}

.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-day.inRange {
    background-color: var(--bs-secondary-border-subtle) !important;
}

.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-day.nextMonthDay.selected.endRange.inRange {
    background-color: var(--bs-primary) !important;
    color: #ffff !important;
}

.modalLockSreen .modal-content {
    position: relative;
}

    .modalLockSreen .modal-content::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1;
    }

    .modalLockSreen .modal-content .wrapperTextContent {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
        align-items: center;
        max-width: 800px;
        z-index: 10;
    }

@media only screen and (max-width: 992px) {
    .modalLockSreen .modal-content .wrapperTextContent {
        width: 90%;
    }
}

.modalLockSreen .modal-content .wrapperTextContent .title {
    color: #ffff;
    font-weight: 900;
}

.modalLockSreen .wrapperImage {
    overflow: hidden;
    height: 100%;
}

    .modalLockSreen .wrapperImage img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.page-content {
    height: 100%;
}

    .page-content .container-fluid {
        height: 100%;
    }

        .page-content .container-fluid .row {
            height: 100%;
        }

            .page-content .container-fluid .row .col-12 {
                height: 100%;
            }

.signupForm .form-control.is-invalid {
    background-color: #fee2e2 !important;
}

.signupForm .text-valid {
    position: absolute;
    bottom: -22px;
    left: 10px;
    font-size: 13px !important;
}

.wrapHeader.fullscreen {
    display: none;
}

.footer.fullscreen {
    display: none;
}

.row {
    margin-right: -7px !important;
    margin-left: -7px !important;
}

.colItem {
    padding-right: 7px !important;
    padding-left: 7px !important;
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

.wrapperBgPage {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

a {
    color: var(--bs-text-primary);
    font-weight: 600;
}

body.showMenu {
    overflow: hidden;
}

body.loadingPage {
    opacity: 0;
    overflow: hidden;
}

box-icon {
    flex-shrink: 0;
}

.headingPage {
    text-align: center;
}

    .headingPage h1 {
        font-size: 25px;
        margin-bottom: 0px;
    }

@media only screen and (max-width: 768px) {
    .headingPage h1 {
        font-size: 18px;
    }
}

body[data-style=ios] .sticky-table-header {
    top: 70px !important;
    background-color: var(--bs-primary) !important;
}

    body[data-style=ios] .sticky-table-header .toggle-column svg {
        fill: #ffff;
    }

body[data-style=google] .sticky-table-header {
    top: 70px !important;
    background-color: var(--bs-primary) !important;
}

    body[data-style=google] .sticky-table-header .toggle-column svg {
        fill: #ffff;
    }

body.fullscreen .sticky-table-header {
    top: 0px !important;
}

.focus-on .selected td {
    background-color: var(--bs-warning-bg-subtle);
}

.sticky-table-header .datatable .fixed-column > * {
    color: #000 !important;
}

.sticky-table-header .datatable .fixed-column svg {
    fill: #000 !important;
}

.table-striped.focus-on > tbody > tr.selected:nth-of-type(odd) > * {
    --bs-table-bg-type: unset;
}

#datatable {
    width: 100%;
    border-collapse: collapse;
}

.toggle-column {
    position: relative;
}

@media only screen and (max-width: 576px) {
    .toggle-column {
        display: none;
    }
}

.toggle-column svg {
    width: 18px;
}

.toggle-column .keep {
    display: none;
}

.toggle-column .keep-none {
    display: block;
}

.toggle-column.active .keep {
    display: block;
}

.toggle-column.active .keep-none {
    display: none;
}

.datatable th.fixed-column,
.datatable td.fixed-column {
    position: -webkit-sticky !important;
    position: sticky !important;
    background-color: var(--bs-warning-bg-subtle);
    z-index: 10;
    left: 0;
    --bs-table-color-type: var(--bs-warning-bg-subtle) !important;
    --bs-table-bg-type: var(--bs-warning-bg-subtle) !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.datatable.autoFixedColumn td:last-child,
.datatable.autoFixedColumn th:last-child {
    position: -webkit-sticky !important;
    position: sticky !important;
    background-color: var(--bs-warning-bg-subtle);
    z-index: 10;
    right: 0;
    --bs-table-color-type: var(--bs-warning-bg-subtle) !important;
    --bs-table-bg-type: var(--bs-warning-bg-subtle) !important;
}

    .datatable.autoFixedColumn td:last-child .toggle-column,
    .datatable.autoFixedColumn th:last-child .toggle-column {
        display: none;
    }

    .datatable.autoFixedColumn td:last-child th.desc,
    .datatable.autoFixedColumn td:last-child th.asc,
    .datatable.autoFixedColumn th:last-child th.desc,
    .datatable.autoFixedColumn th:last-child th.asc {
        display: none;
    }

.datatable td:last-child > *,
.datatable th:last-child > * {
    color: #000 !important;
}

.datatable th.asc:after {
    content: "";
    display: block;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAIBJREFUSEvdlEsOgCAMROHk6sn9hSZVp2rtkCBsWPEezAA5VR65Mj/1KxhLdDJ/ThJFtEGHQpzWWUtmh2lnnwUaLiwtCQkQHEkch7ieQBbLTsO3zAJYgjcRHZjNCVz5o1vUdAcwbmYHFEGfHdw+RkYHVAGtAzfIWhD+zJ528n/BAj7hGxlIA71KAAAAAElFTkSuQmCC);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 45%;
    right: 2px;
    transform: translateY(-50%);
    z-index: 10;
}

.datatable th.desc:after {
    content: "";
    display: block;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAIZJREFUSEvdldEOgCAIRfHLqy+vaLGhQwfhXZs9qtwjh80Kgb8Czqd1Aeerru1Q1j1mn9qeot8AnptXZ6IdwAGeGVSXjnYAB8AVwQEjRabumTOYAoArSgF2Ito6Cce9zvvWDIYvcrtpQSSc2WkAh2iIDg/rGb2mDBHYp2ApWvePltKii+GKLsVLGxkLet9xAAAAAElFTkSuQmCC);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 45%;
    right: 2px;
    transform: translateY(-50%);
    z-index: 10;
}

.table-responsive {
    overflow: auto;
}

    .table-responsive .table > :not(caption) > * > * {
        color: var(--bs-color-text);
    }

    .table-responsive::-webkit-scrollbar {
        height: 7px;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: var(--bs-secondary-border-subtle);
    }

    .table-responsive .description {
        white-space: normal !important;
    }

    .table-responsive .wrapperContentTable th {
        text-align: center;
    }

    .table-responsive th {
        white-space: nowrap;
        font-weight: 700;
    }

    .table-responsive td {
        white-space: nowrap;
    }

    .table-responsive .sticky-table-header .table tr th {
        color: #ffff;
    }

    .table-responsive .focus-on .unfocused.focused {
        background-color: transparent !important;
    }

        .table-responsive .focus-on .unfocused.focused td * {
            color: unset !important;
        }

    .table-responsive .table-striped.focus-on > tbody tr:nth-of-type(odd) > * {
        --bs-table-bg-type: unset;
    }

    .table-responsive .dataTables_info {
        display: none;
    }

.btn-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

    .btn-toolbar .btn-group .btn {
        font-size: 16px;
        border: 2px solid var(--bs-primary);
        color: var(--bs-primary);
        background-color: #ffff;
        font-weight: 600;
        display: flex;
        gap: 5px;
    }

        .btn-toolbar .btn-group .btn.btn-primary {
            background-color: var(--bs-primary);
            color: #ffff;
        }

        .btn-toolbar .btn-group .btn:hover {
            background-color: var(--bs-primary);
            color: #ffff;
        }

        .btn-toolbar .btn-group .btn.btn-primary {
            color: #ffff !important;
        }

        .btn-toolbar .btn-group .btn.dropdown-toggle.show {
            background-color: var(--bs-primary);
            color: #ffff;
        }

    .btn-toolbar .btn-group .btn-check:checked + .btn-outline-primary,
    .btn-toolbar .btn-group .btn-check:active + .btn-outline-primary,
    .btn-toolbar .btn-group .btn-outline-primary:active,
    .btn-toolbar .btn-group .btn-outline-primary.active,
    .btn-toolbar .btn-group .btn-outline-primary.dropdown-toggle.show {
        color: #fff !important;
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
    }

    .btn-toolbar .btn-group .dropdown-menu {
        width: 100%;
        max-height: 600px !important;
        overflow: auto;
        z-index: 99;
        transform: translateY(50px) !important;
    }

        .btn-toolbar .btn-group .dropdown-menu .checkbox-row label::before {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

        .btn-toolbar .btn-group .dropdown-menu .checkbox-row label::after {
            top: -4px;
        }

.table-rep-plugin .checkbox-row input[type=checkbox]:checked + label::before {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background-color: var(--bs-primary) !important;
}

body {
    -webkit-font-smoothing: antialiased;
    background-color: var(--bs-bg-page);
}

    body[data-layout=horizontal] .page-content {
        padding: 25px 0px;
        margin-top: 0px;
    }

@media only screen and (max-width: 768px) {
    body[data-layout=horizontal] .page-content {
        margin-top: 30px;
    }
}

@media only screen and (max-width: 576px) {
    body[data-layout=horizontal] .page-content {
        margin-top: 0px;
    }
}

body.showMenuSlide {
    overflow: hidden;
}

    body.showMenuSlide .layout-wrapper {
        position: relative;
    }

.colItem {
    margin-bottom: 15px;
}

@media only screen and (max-width: 576px) {
    .colItem {
        margin-bottom: 15px;
    }
}

.flatpickr-calendar .flatpickr-days {
    background-color: #ffff;
}

.flatpickr-calendar .flatpickr-months {
    background-color: var(--bs-primary);
}

.flatpickr-calendar .flatpickr-weekdays {
    background-color: var(--bs-primary);
}

.flatpickr-calendar .flatpickr-days .flatpickr-day.selected {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.card {
    padding: 15px;
    border-radius: 10px;
    background-color: #ffff;
    height: 100%;
}

    .card .card-header {
        background-color: transparent;
        padding: 15px 0px;
    }

        .card .card-header .card-title {
            font-size: 20px;
        }

@media only screen and (max-width: 576px) {
    .card .card-header .card-title {
        font-size: 16px;
    }
}

.card .card-body {
    padding: 1.25rem 0px;
}

    .card .card-body .colItem {
        margin-bottom: 0px;
    }

@media only screen and (max-width: 1220px) {
    .card .card-body .colItem {
        margin-bottom: 25px;
    }
}

.card .tab-content {
    padding: 0px;
}

.wrapTitle {
    font-size: 18px;
    font-weight: 600;
}

.avatar__image-box {
    position: relative;
    padding: 5px 0px;
    border-radius: 50px;
}

    .avatar__image-box h3 {
        color: var(--bs-primary);
    }

    .avatar__image-box .avatar__image {
        width: 45px;
        height: auto;
        cursor: pointer;
    }

        .avatar__image-box .avatar__image img {
            width: 100%;
            height: auto;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .avatar__image-box .dropdown-menu {
        z-index: 999;
    }

        .avatar__image-box .dropdown-menu .dropdown-divider {
            border-top: 1px solid var(--bs-primary);
        }

input[switch] + label {
    width: 80px;
}

input[switch]:checked + label:after {
    left: 60px;
}

.edit label {
    margin-bottom: 0px;
    top: 8px;
}

input[switch]:checked + label {
    background-color: var(--bs-primary);
}

.select2.select2-container {
    width: 100% !important;
}

.offcanvas-form-search {
    width: 700px !important;
}

@media only screen and (max-width: 768px) {
    .offcanvas-form-search {
        width: 400px !important;
    }
}

.offcanvas .btn-close.hidden {
    display: block !important;
}

.modal .btn-close.hidden {
    display: block !important;
}

@media (max-width: 767.98px) {
    .modal .modal-dialog:not(.modal-fullscreen) {
        padding-left: 0 !important;
    }
}

@media only screen and (max-width: 576px) {
    .modal-dialog {
        padding: 0px !important;
        padding-left: 0px !important;
    }
}

.modal-dialog .modal-body {
    overflow-x: hidden;
}

@media only screen and (max-width: 768px) {
    .modal-dialog .modal-body {
        padding: 15px 15px;
    }
}

.modal-dialog .modal-content .modal-header {
    border-bottom: 1px solid var(--bs-secondary-border-subtle);
}

.btn {
    position: relative;
    white-space: nowrap;
}

    .btn.loadingBtn box-icon {
        display: none;
    }

    .btn.loadingBtn::after {
        box-sizing: border-box;
        content: "";
        position: relative;
        display: block;
        width: 16px;
        height: 16px;
        border: solid 2px transparent;
        border-top-color: #fff;
        border-left-color: #fff;
        border-radius: 50%;
        -webkit-animation: pace-spinner 0.4s linear infinite;
        animation: pace-spinner 0.4s linear infinite;
    }

.spinner {
    display: block;
    width: 34px;
    height: 34px;
    position: absolute;
    top: 8px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background: transparent;
    box-sizing: border-box;
    border-top: 4px solid white;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-radius: 100%;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-animation: spin 0.6s ease-out infinite;
    animation: spin 0.6s ease-out infinite;
    transition: all ease 0.5s;
}

@-webkit-keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

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

.form-label {
    margin-bottom: 0px;
    font-weight: bold;
    position: relative;
    padding-left: 20px;
    padding-bottom: 8px;
    text-transform: unset;
}

@media only screen and (max-width: 456px) {
    .form-label {
        font-size: 12px;
    }
}

.form-label::after {
    content: "\f05a";
    position: absolute;
    color: var(--bs-primary);
    top: 3px;
    left: 0;
    font-family: "Font Awesome 5 Free" !important;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 600;
}

.form-label.label-valid::after {
    color: red;
}

.input-group {
    position: relative;
}

    .input-group .form-control {
        position: relative;
        z-index: 10;
        background-color: #ffff;
    }

    .input-group .input-group-text {
        border: unset !important;
    }

.select2.select2-container--open .select2-selection {
    border-color: var(--bs-primary);
}

.select2-container.select2-container--default.select2-container--open .select2-dropdown {
    border-color: var(--bs-primary);
}

.select2-container .select2-selection--single {
    height: auto;
    padding: 0.3rem 0.875rem;
    border: 1px solid #c7cdd4;
}

.select2-selection__arrow {
    height: 100% !important;
}

.select2-dropdown .select2-search.select2-search--dropdown .select2-search__field {
    outline: none;
}

.select2-results .select2-results__options .select2-results__option:hover {
    background-color: var(--bs-primary);
}

.select2-container .selection .select2-selection {
    border-radius: var(--bs-border-radius);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bs-primary);
}

.multipleSelect2Form {
    position: relative;
    max-width: 500px;
}

    .multipleSelect2Form .icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 25px;
        font-weight: bold;
    }

    .multipleSelect2Form .select2-search {
        display: flex;
        align-items: center;
    }

    .multipleSelect2Form .select2-search__field {
        margin-top: 0px !important;
    }

    .multipleSelect2Form .select2-container .select2-selection--multiple {
        padding: 0.65rem 0.875rem !important;
        border: 1px solid #c7cdd4;
    }

        .multipleSelect2Form .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
            background-color: var(--bs-primary);
        }

            .multipleSelect2Form .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span {
                color: #ffff;
            }

            .multipleSelect2Form .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
                background-color: var(--bs-primary);
            }

            .multipleSelect2Form .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
                color: #ffff;
            }

        .multipleSelect2Form .select2-container .select2-selection--multiple .select2-search {
            width: 100%;
        }

.wrapper-404 .wrapper-image-404 {
    max-width: 800px;
    height: auto;
    margin: auto;
}

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

.wrapper-404 .text-bottom {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    text-align: center;
}

    .wrapper-404 .text-bottom .btn {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: auto;
    }

.breadcrumb-list .breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
}

.breadcrumb-list .breadcrumb-item {
    font-size: 12px;
    color: var(--bs-color-text);
}

@media only screen and (max-width: 576px) {
    .breadcrumb-list .breadcrumb-item {
        font-size: 14px;
    }
}

.breadcrumb-list .breadcrumb-item::before {
    position: relative;
    top: 7px;
}

.breadcrumb-list .breadcrumb-item a {
    color: var(--bs-color-text);
    font-weight: 500;
}

.breadcrumb-list .breadcrumb-item .flex-center {
    border-radius: 10px 20px;
    padding: 5px;
}

.breadcrumb-list .breadcrumb-item.active {
    font-weight: bold;
}

    .breadcrumb-list .breadcrumb-item.active::before {
        position: unset;
    }

.top-header {
    background-color: transparent;
    box-shadow: none !important;
}

    .top-header .top-header-item {
        gap: 15px;
    }

    .top-header .wrap-image img {
        width: 80px;
    }

    .top-header .title {
        font-size: 25px;
        color: var(--bs-color-text);
    }

@media only screen and (max-width: 576px) {
    .top-header .title {
        font-size: 18px;
    }
}

.top-header .breadcrumb-item {
    color: var(--bs-color-text);
}

    .top-header .breadcrumb-item a {
        color: var(--bs-color-text);
    }

#toast-container .toast {
    opacity: 1 !important;
}

#toast-container .toast-success {
    background-color: var(--bs-success) !important;
}

#toast-container .toast-info {
    background-color: var(--bs-info) !important;
}

#toast-container .toast-error {
    background-color: var(--bs-danger) !important;
}

#toast-container .toast-warning {
    background-color: var(--bs-warning) !important;
}

.wrapperTableAccessLog .card-header {
    border-bottom: 0px;
}

.wrapperTableAccessLog .table-responsive::-webkit-scrollbar {
    height: 7px;
    background-color: #ffff;
}

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

.clearfix.wrapPaggingList {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 0px;
}

@media only screen and (max-width: 456px) {
    .clearfix.wrapPaggingList {
        gap: 5px;
    }
}

.clearfix.wrapPaggingList .linkPagging {
    background-color: #ffff;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    font-weight: 700;
    transition: all 0.5s ease;
    border: 1px solid var(--bs-primary);
    text-decoration: none;
    border-radius: 4px;
}

@media only screen and (max-width: 576px) {
    .clearfix.wrapPaggingList .linkPagging {
        width: 30px;
        height: 30px;
    }
}

@media only screen and (max-width: 456px) {
    .clearfix.wrapPaggingList .linkPagging {
        font-size: 12px;
        width: 25px;
        height: 25px;
    }
}

.clearfix.wrapPaggingList .linkPagging.active {
    background-color: var(--bs-primary);
    color: #ffff;
}

.clearfix.wrapPaggingList .linkPagging:hover {
    background-color: var(--bs-primary);
    color: #ffff;
}

    .clearfix.wrapPaggingList .linkPagging:hover box-icon {
        fill: #ffff;
    }

.clearfix.wrapPaggingList .linkPagging box-icon {
    fill: var(--bs-primary);
}

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

    .wrapperFilterForm box-icon {
        fill: #ffff;
        width: 18px;
    }

    .wrapperFilterForm .input-group .btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .wrapperFilterForm .input-group .btn box-icon {
            fill: #ffff;
            width: 18px;
        }

@media only screen and (max-width: 1220px) {
    .wrapperFilterForm {
        flex-direction: column;
        align-items: start;
        gap: 16px;
    }
}

.wrapperFilterForm .wrapperAddNew {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wrapperFilterForm .wrapperListAcctions {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .wrapperFilterForm .wrapperListAcctions box-icon {
        fill: #ffff;
        width: 18px;
    }

.wrapperFilterForm .input-group {
    width: 500px;
}

@media only screen and (max-width: 768px) {
    .wrapperFilterForm .input-group {
        width: 100%;
    }
}

@media only screen and (max-width: 456px) {
    .filter-form .btn {
        font-size: 10px;
    }
}

.filter-form .input-group .input-group-text box-icon {
    fill: #ffff;
}

.filter-form .card-body {
    padding: 16px !important;
    margin-bottom: 0px;
    border-radius: 0px;
}

    .filter-form .card-body .title {
        font-size: 20px;
        color: var(--bs-primary);
    }

    .filter-form .card-body .select2 {
        width: 100% !important;
        border-radius: 4px;
        overflow: hidden;
    }

    .filter-form .card-body .wrapperActionFilter .wrapperList {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 32px;
    }

@media only screen and (max-width: 576px) {
    .filter-form .card-body .wrapperActionFilter .wrapperList {
        flex-direction: column;
        align-items: unset;
    }
}

.filter-form .card-body .wrapperActionFilter .wrapperList svg {
    width: 16px;
    height: 16px;
}

@media only screen and (min-width: 1221px) {
    .filter-form-modal {
        padding: 30px 0px;
    }
}

.filter-form-modal .input-group .input-group-text box-icon {
    fill: #ffff;
}

@media only screen and (max-width: 456px) {
    .filter-form-modal .btn {
        font-size: 10px;
    }
}

.filter-form-modal .card-body {
    padding: 16px !important;
    margin-bottom: 0px;
    border-radius: 0px;
}

    .filter-form-modal .card-body .title {
        font-size: 20px;
        color: var(--bs-primary);
    }

    .filter-form-modal .card-body .select2 {
        width: 100% !important;
        border-radius: 4px;
        overflow: hidden;
    }

    .filter-form-modal .card-body .wrapperActionFilter .wrapperList {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 32px;
    }

@media only screen and (max-width: 576px) {
    .filter-form-modal .card-body .wrapperActionFilter .wrapperList {
        flex-direction: column;
        align-items: unset;
    }
}

.transition-3 {
    transition: all 0.3s;
    cursor: pointer;
}

    .transition-3:hover {
        transform: translateY(-5px);
    }

.h-sreen {
    height: 100vh;
}

.min-h-sreen {
    min-height: 100vh;
}

.hidden {
    display: none;
}

.max-w-500 {
    max-width: 350px;
}

@media only screen and (max-width: 576px) {
    .block-sm {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .block-md {
        display: block;
    }
}

@media only screen and (max-width: 576px) {
    .hidden-sm {
        display: none !important;
    }
}

@media only screen and (max-width: 768px) {
    .hidden-md {
        display: none;
    }
}

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

.text-color-erorr {
    color: #fd625e;
}

.text-white {
    color: #ffff !important;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.relative {
    position: relative;
}

.fit-content {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.border-width-none {
    border-width: 0px !important;
}

.w-auto {
    width: auto;
}

.mt-25 {
    margin-top: 25px;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.cursor-pointer {
    cursor: pointer;
}

.border-none {
    border: none !important;
}

.overflow-hidden {
    overflow: hidden;
}

.color-1 {
    color: var(--bs-primary);
}

.text-page {
    color: var(--bs-color-text) !important;
}

.text-primary {
    color: var(--bs-text-primary) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

.box-shadow-none {
    box-shadow: none !important;
}

.flex-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

    .flex-btn box-icon {
        flex-shrink: 0;
        fill: #ffff;
    }

.image-user-table {
    max-width: 45px;
    flex-shrink: 0;
    height: auto;
}

    .image-user-table img {
        width: 100%;
        height: auto;
        flex-shrink: 0;
    }

.flex-btn-column {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    flex-direction: column;
}

    .flex-btn-column box-icon {
        flex-shrink: 0;
        width: 13px;
        height: 13px;
    }

.flex-justify-center {
    display: flex;
    justify-content: center;
}

.flex-center {
    display: flex;
}

.flex-start {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.flex {
    display: flex;
}

.flex-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 768px) {
    .flex-between.md {
        flex-direction: column;
        gap: 10px;
    }
}

@media only screen and (max-width: 576px) {
    .flex-between.sm {
        flex-direction: column;
        gap: 10px;
    }
}

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

@media only screen and (max-width: 1220px) {
    .flex-between-xl {
        flex-direction: column;
    }
}

.flex-col {
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 1220px) {
    .flex-col-xl {
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 576px) {
    .flex-column-start-sm {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }
}

.font-light {
    font-weight: 300 !important;
}

.font-regular {
    font-weight: 400 !important;
}

.font-media {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-18 {
    font-size: 18px;
    font-weight: 700;
}

.font-16 {
    font-size: 16px;
    font-weight: 700;
}

.font-14 {
    font-size: 10px;
    font-weight: 700;
}

@media only screen and (max-width: 456px) {
    .font-mobile-small {
        font-size: 12px;
    }
}

.w-40 {
    width: 10rem;
}

.bg-secondary.toast,
.bg-secondary.bs-toast {
    color: #fff;
    background-color: rgba(133, 146, 163, 0.85) !important;
    box-shadow: 0 0.25rem 1rem rgba(133, 146, 163, 0.4);
}

    .bg-secondary.toast .toast-header,
    .bg-secondary.bs-toast .toast-header {
        color: #fff;
    }

        .bg-secondary.toast .toast-header .btn-close,
        .bg-secondary.bs-toast .toast-header .btn-close {
            background-color: #8592a3 !important;
            background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            box-shadow: 0 0.1875rem 0.375rem 0 rgba(133, 146, 163, 0.4) !important;
        }

.bg-success.toast,
.bg-success.bs-toast {
    color: #fff;
    background-color: rgba(113, 221, 55, 0.85) !important;
    box-shadow: 0 0.25rem 1rem rgba(113, 221, 55, 0.4);
}

    .bg-success.toast .toast-header,
    .bg-success.bs-toast .toast-header {
        color: #fff;
    }

        .bg-success.toast .toast-header .btn-close,
        .bg-success.bs-toast .toast-header .btn-close {
            background-color: #71dd37 !important;
            background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            box-shadow: 0 0.1875rem 0.375rem 0 rgba(113, 221, 55, 0.4) !important;
        }

.bg-info.toast,
.bg-info.bs-toast {
    color: #fff;
    background-color: rgba(3, 195, 236, 0.85) !important;
    box-shadow: 0 0.25rem 1rem rgba(3, 195, 236, 0.4);
}

    .bg-info.toast .toast-header,
    .bg-info.bs-toast .toast-header {
        color: #fff;
    }

        .bg-info.toast .toast-header .btn-close,
        .bg-info.bs-toast .toast-header .btn-close {
            background-color: #03c3ec !important;
            background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            box-shadow: 0 0.1875rem 0.375rem 0 rgba(3, 195, 236, 0.4) !important;
        }

.bg-warning.toast,
.bg-warning.bs-toast {
    color: #fff;
    background-color: rgba(255, 171, 0, 0.85) !important;
    box-shadow: 0 0.25rem 1rem rgba(255, 171, 0, 0.4);
}

    .bg-warning.toast .toast-header,
    .bg-warning.bs-toast .toast-header {
        color: #fff;
    }

        .bg-warning.toast .toast-header .btn-close,
        .bg-warning.bs-toast .toast-header .btn-close {
            background-color: #ffab00 !important;
            background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            box-shadow: 0 0.1875rem 0.375rem 0 rgba(255, 171, 0, 0.4) !important;
        }

.bg-danger.toast,
.bg-danger.bs-toast {
    color: #fff;
    background-color: rgba(255, 62, 29, 0.85) !important;
    box-shadow: 0 0.25rem 1rem rgba(255, 62, 29, 0.4);
}

    .bg-danger.toast .toast-header,
    .bg-danger.bs-toast .toast-header {
        color: #fff;
    }

        .bg-danger.toast .toast-header .btn-close,
        .bg-danger.bs-toast .toast-header .btn-close {
            background-color: #ff3e1d !important;
            background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            box-shadow: 0 0.1875rem 0.375rem 0 rgba(255, 62, 29, 0.4) !important;
        }

.bg-light.toast,
.bg-light.bs-toast {
    color: #fff;
    background-color: rgba(252, 253, 253, 0.85) !important;
    box-shadow: 0 0.25rem 1rem rgba(252, 253, 253, 0.4);
}

    .bg-light.toast .toast-header,
    .bg-light.bs-toast .toast-header {
        color: #fff;
    }

        .bg-light.toast .toast-header .btn-close,
        .bg-light.bs-toast .toast-header .btn-close {
            background-color: #fcfdfd !important;
            background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            box-shadow: 0 0.1875rem 0.375rem 0 rgba(252, 253, 253, 0.4) !important;
        }

.bg-dark.toast,
.bg-dark.bs-toast {
    color: #fff;
    background-color: rgba(35, 52, 70, 0.85) !important;
    box-shadow: 0 0.25rem 1rem rgba(35, 52, 70, 0.4);
}

    .bg-dark.toast .toast-header,
    .bg-dark.bs-toast .toast-header {
        color: #fff;
    }

        .bg-dark.toast .toast-header .btn-close,
        .bg-dark.bs-toast .toast-header .btn-close {
            background-color: #233446 !important;
            background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            box-shadow: 0 0.1875rem 0.375rem 0 rgba(35, 52, 70, 0.4) !important;
        }

.bg-gray.toast,
.bg-gray.bs-toast {
    color: #fff;
    background-color: rgba(67, 89, 113, 0.85) !important;
    box-shadow: 0 0.25rem 1rem rgba(67, 89, 113, 0.4);
}

    .bg-gray.toast .toast-header,
    .bg-gray.bs-toast .toast-header {
        color: #fff;
    }

        .bg-gray.toast .toast-header .btn-close,
        .bg-gray.bs-toast .toast-header .btn-close {
            background-color: rgba(67, 89, 113, 0.1) !important;
            background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            box-shadow: 0 0.1875rem 0.375rem 0 rgba(67, 89, 113, 0.4) !important;
        }

.bs-toast[class^=bg-],
.bs-toast[class*=" bg-"] {
    border: none;
}

.toast.bs-toast {
    background-color: rgba(255, 255, 255, 0.85);
    z-index: 1095;
}

    .toast.bs-toast.top-30 {
        top: 30px;
    }

    .toast.bs-toast.left-30 {
        left: 30px;
    }

    .toast.bs-toast.right-30 {
        right: 30px;
    }

    .toast.bs-toast .toast-header {
        padding-bottom: 0.5rem;
        position: relative;
        background-color: transparent;
        border-bottom: 0px;
        display: flex;
        gap: 15px;
        align-items: center;
    }

        .toast.bs-toast .toast-header box-icon {
            fill: #ffff;
        }

        .toast.bs-toast .toast-header .btn-close {
            position: absolute;
            top: -8px;
            border-radius: 0.375rem;
            padding: 0.45rem;
            background-size: 0.625em;
            transition: all 0.23s ease 0.1s;
            background-color: #fff;
            box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4);
            right: 2px;
            opacity: 1;
        }

            .toast.bs-toast .toast-header .btn-close:hover,
            .toast.bs-toast .toast-header .btn-close:focus,
            .toast.bs-toast .toast-header .btn-close:active {
                opacity: 1;
                outline: none;
            }

        .toast.bs-toast .toast-header ~ .toast-body {
            padding: 15px;
            font-size: 18px;
        }

.toast-container {
    --bs-toast-zindex: 9;
}

.toast-ex {
    position: fixed;
    top: 4.1rem;
    right: 2.5rem;
}

.toast-placement-ex {
    position: fixed;
}

.nav-tabs-custom {
    border-bottom: 1px solid #e9e9ef;
}

    .nav-tabs-custom .nav-item {
        position: relative;
        color: #343a40;
    }

        .nav-tabs-custom .nav-item .nav-link {
            border: none;
        }

            .nav-tabs-custom .nav-item .nav-link:hover {
                color: #696cff;
            }

            .nav-tabs-custom .nav-item .nav-link::after {
                content: "";
                background: #696cff;
                height: 1px;
                position: absolute;
                width: 100%;
                left: 0;
                bottom: -1px;
                transition: all 250ms ease 0s;
                transform: scale(0);
            }

            .nav-tabs-custom .nav-item .nav-link.active {
                color: #696cff;
            }

                .nav-tabs-custom .nav-item .nav-link.active:after {
                    transform: scale(1);
                }

    .nav-tabs-custom.card-header-tabs {
        border-bottom: none;
    }

        .nav-tabs-custom.card-header-tabs .nav-link {
            padding: 1.25rem 1rem;
            font-weight: 500;
        }

.row-15 {
    margin-left: -15px;
    margin-right: -15px;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.p-15 {
    padding: 15px;
}

.wrapUpdateAvatar {
    position: relative;
}

    .wrapUpdateAvatar .wrapImgResize {
        background-color: #4c148d;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

        .wrapUpdateAvatar .wrapImgResize img {
            transition: 0.5s;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -ms-transition: 0.5s;
            -o-transition: 0.5s;
        }

    .wrapUpdateAvatar .wrapIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        color: #f9faf5;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .wrapUpdateAvatar:hover .wrapIcon {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .wrapUpdateAvatar:hover .wrapImgResize img {
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

.contentHeader {
    height: 140px;
}

@media screen and (max-width: 1220px) {
    .contentHeader {
        height: 80px;
    }
}

@media screen and (max-width: 1220px) {
    .wrapMenuHeader .listMenuHeader.Rootmenu {
        margin-left: 0;
        border-bottom: none;
    }
}

@media screen and (max-width: 1220px) {
    .wrapMenuHeader .listMenuHeader .itemMenuHeader.menuSub .listMenuHeader {
        padding: 5px 15px;
    }
}

@media screen and (max-width: 1220px) {
    .wrapMenuHeader > .listMenuHeader > .itemMenuHeader > .linkMenuHeader {
        font-size: 16px;
        font-weight: 700;
        padding: 10px 15px 10px 40px;
    }
}

.itemMenuHeader .linkMenuHeader {
    display: inline-block;
}

@media screen and (max-width: 1220px) {
    .itemMenuHeader .linkMenuHeader i {
        left: 15px;
    }
}

@media screen and (max-width: 1220px) {
    .itemMenuHeader .linkMenuHeader .btnDropdownMenuSub i {
        position: static;
        display: block;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
    }
}

.menuSetting .show-menu {
    max-height: calc(100vh - 160px);
    max-height: -ms-calc(100vh - 160px);
    max-height: -o-calc(100vh - 160px);
}

.fixedMenu .menuSetting .show-menu {
    max-height: calc(100vh - 80px);
    max-height: -ms-calc(100vh - 80px);
    max-height: -o-calc(100vh - 80px);
}

body[data-style=ios].fullHeightBox .main-content {
    height: calc(100vh - 155px);
    height: -ms-calc(100vh - 155px);
    height: -o-calc(100vh - 155px);
}

body[data-style=google].fullHeightBox .main-content {
    height: calc(100vh - 125px);
    height: -ms-calc(100vh - 125px);
    height: -o-calc(100vh - 125px);
}

.wrapper-login-page {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

    .wrapper-login-page .form-group {
        position: relative;
    }

        .wrapper-login-page .form-group .showPass {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 25px;
            cursor: pointer;
            display: flex;
            justify-content: center;
        }

@media only screen and (max-width: 992px) {
    .wrapper-login-page .col-1 {
        display: none;
    }
}

@media only screen and (max-width: 992px) {
    .wrapper-login-page .col-2 {
        width: 100%;
    }
}

.wrapper-login-page .wrapper-login-form-center {
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .wrapper-login-page .wrapper-login-form-center .wrapper-image {
        height: 100%;
    }

        .wrapper-login-page .wrapper-login-form-center .wrapper-image img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .wrapper-login-page .wrapper-login-form-center .wrapper-form-container {
        position: relative;
    }

    .wrapper-login-page .wrapper-login-form-center .wrapper-image-right {
        position: absolute;
        top: -30%;
        right: -100px;
        max-width: 300px;
        z-index: 1;
        height: auto;
    }

@media only screen and (max-width: 1600px) {
    .wrapper-login-page .wrapper-login-form-center .wrapper-image-right {
        top: -10%;
        right: -200px;
    }
}

.wrapper-login-page .wrapper-login-form-center .wrapper-image-right img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
}

.wrapper-login-page .wrapper-login-form-center .wrapper-image-left {
    position: absolute;
    bottom: -30%;
    left: -100px;
    max-width: 300px;
    z-index: 1;
    height: auto;
}

@media only screen and (max-width: 1600px) {
    .wrapper-login-page .wrapper-login-form-center .wrapper-image-left {
        bottom: -10%;
        left: -200px;
    }
}

.wrapper-login-page .wrapper-login-form-center .wrapper-image-left img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
}

.wrapper-login-page .wrapper-login-form-center .wrapper-content {
    width: 550px;
    position: relative;
    padding: 60px 40px;
    border-radius: var(--bs-radius);
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: var(--bs-box-shadow);
    z-index: 10;
}

@media only screen and (max-width: 768px) {
    .wrapper-login-page .wrapper-login-form-center .wrapper-content {
        width: 90%;
        margin: auto;
    }
}

@media only screen and (max-width: 576px) {
    .wrapper-login-page .wrapper-login-form-center .wrapper-content {
        width: 95%;
    }
}

.wrapper-login-page .wrapper-login-form-center .wrapper-content .wrapper-logo {
    max-width: 300px;
    height: auto;
    margin: 0px auto;
    margin-bottom: 50px;
}

    .wrapper-login-page .wrapper-login-form-center .wrapper-content .wrapper-logo img {
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

.wrapper-login-page .wrapper-login-form-center .wrapper-content .title {
    color: #000;
    margin-top: 15px;
}

.wrapper-login-page .wrapper-login-form-center .wrapper-content .form .form-control {
    background-color: #ffff;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

.wrapper-login-page .wrapper-login-form-center .wrapper-content .form .form-label {
    text-transform: unset;
    color: var(--bs-color-text);
}

.wrapper-login-page .wrapper-login-form-center .wrapper-content .form-check label {
    color: #000;
    font-size: 16px;
}

.wrapper-login-page .wrapper-login-form-center .wrapper-content small {
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

.wrapper-login-page .wrapper-text-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}

.wrapper-login-page .wrapper-login-form-right {
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-position: center;
    display: flex;
    justify-content: end;
    align-items: center;
}

    .wrapper-login-page .wrapper-login-form-right .wrapper-image {
        height: 100%;
    }

        .wrapper-login-page .wrapper-login-form-right .wrapper-image img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .wrapper-login-page .wrapper-login-form-right .wrapper-form-container {
        position: relative;
        height: 80%;
    }

    .wrapper-login-page .wrapper-login-form-right .wrappe-image-blur {
        position: absolute;
        bottom: -150px;
        left: -173px;
        width: 500px;
        z-index: 100;
    }

@media only screen and (max-width: 1600px) {
    .wrapper-login-page .wrapper-login-form-right .wrappe-image-blur {
        width: 350px;
    }
}

@media only screen and (max-width: 576px) {
    .wrapper-login-page .wrapper-login-form-right .wrappe-image-blur {
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%);
        bottom: -200px;
    }
}

.wrapper-login-page .wrapper-login-form-right .wrappe-image-blur img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
}

.wrapper-login-page .wrapper-login-form-right .wrapper-content {
    width: 550px;
    height: 100%;
    position: relative;
    padding: 60px 40px;
    background-color: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--bs-box-shadow);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top-left-radius: 70px;
    border-bottom-left-radius: 70px;
}

@media only screen and (max-width: 576px) {
    .wrapper-login-page .wrapper-login-form-right .wrapper-content {
        width: 100%;
        padding: 60px 30px;
    }
}

@media only screen and (max-width: 456px) {
    .wrapper-login-page .wrapper-login-form-right .wrapper-content {
        margin-left: 15px;
    }
}

.wrapper-login-page .wrapper-login-form-right .wrapper-content .wrapper-logo {
    max-width: 300px;
    height: auto;
    margin: 0px auto;
    margin-bottom: 50px;
}

@media only screen and (max-width: 1600px) {
    .wrapper-login-page .wrapper-login-form-right .wrapper-content .wrapper-logo {
        margin-bottom: 15px;
    }
}

.wrapper-login-page .wrapper-login-form-right .wrapper-content .wrapper-logo img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
}

.wrapper-login-page .wrapper-login-form-right .wrapper-content .title {
    color: #000;
    margin-top: 15px;
}

.wrapper-login-page .wrapper-login-form-right .wrapper-content .form .form-control {
    background-color: #ffff;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

.wrapper-login-page .wrapper-login-form-right .wrapper-content .form .form-label {
    text-transform: capitalize;
    color: var(--bs-color-text);
}

.wrapper-login-page .wrapper-login-form-right .wrapper-content .form-check label {
    color: #000;
    font-size: 16px;
}

.wrapper-login-page .wrapper-login-form-right .wrapper-content small {
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

@media only screen and (max-width: 768px) {
    .tabs-horizontal {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        background-color: white;
        overflow: hidden;
    }
}

.tabs-horizontal .card-header-pills {
    margin-right: unset;
    margin-left: unset;
    border-radius: var(--bs-radius);
    border: 1px solid var(--bs-primary);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
}

@media only screen and (max-width: 576px) {
    .tabs-horizontal .card-header-pills {
        border-radius: 0px;
    }
}

.tabs-horizontal .card-header-pills .nav-item {
    width: 100%;
    border-right: 1px solid var(--bs-primary);
}

@media only screen and (max-width: 576px) {
    .tabs-horizontal .card-header-pills .nav-item {
        width: 100%;
        border-right: 0px;
    }
}

.tabs-horizontal .card-header-pills::-webkit-scrollbar {
    height: 5px;
    background-color: #ffff;
}

.tabs-horizontal .card-header-pills .nav-item .nav-link {
    white-space: nowrap;
    border-radius: 0px;
    font-size: 16px;
}

@media only screen and (max-width: 576px) {
    .tabs-horizontal .card-header-pills .nav-item .nav-link {
        font-size: 10px;
        flex-direction: column;
        gap: 0px !important;
        padding: 5px;
    }
}

.tabs-horizontal .card-header-pills .nav-item .nav-link:hover {
    color: var(--bs-primary);
}

@media only screen and (max-width: 768px) {
    .tabs-horizontal .card-header-pills .nav-item .nav-link {
        font-size: 16px;
    }
}

.tabs-horizontal .card-header-pills .nav-item .nav-link.active {
    background-color: var(--bs-primary);
    color: var(--bs-primary);
    color: #ffff;
}

.tab-menu-vertical {
    height: 500px;
    position: relative;
    z-index: 99;
}

@media only screen and (max-width: 1220px) {
    .tab-menu-vertical {
        height: auto;
    }
}

.tab-menu-vertical .card {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    box-shadow: none !important;
}

@media only screen and (max-width: 1220px) {
    .tab-menu-vertical .card {
        width: 100%;
    }
}

.tab-menu-vertical .menu {
    width: 67px;
    height: 100%;
    background-color: #ffffff;
    border-radius: var(--bs-radius);
    overflow: hidden;
    transition: 0.5s;
    z-index: 99;
    border: 1px solid var(--bs-primary);
}

@media only screen and (max-width: 1220px) {
    .tab-menu-vertical .menu {
        width: 100%;
    }
}

@media only screen and (max-width: 576px) {
    .tab-menu-vertical .menu {
        border: none;
        border-radius: 0px;
    }
}

.tab-menu-vertical .menu.active {
    width: 225px;
}

    .tab-menu-vertical .menu.active .nav-item span {
        visibility: visible;
        opacity: 1;
    }

.tab-menu-vertical .nav-pills {
    position: relative;
    width: 100%;
    padding: 0px;
    display: block;
    margin-top: 30px;
    border-radius: var(--bs-radius);
}

@media only screen and (max-width: 1220px) {
    .tab-menu-vertical .nav-pills {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin-top: 0px;
    }
}

@media only screen and (max-width: 576px) {
    .tab-menu-vertical .nav-pills {
        flex-wrap: wrap;
        border-radius: unset;
    }
}

.tab-menu-vertical .nav-pills li {
    position: relative;
    list-style: none;
    height: 50px;
    width: 100%;
    cursor: pointer;
    color: var(--bs-primary);
}

@media only screen and (max-width: 1220px) {
    .tab-menu-vertical .nav-pills li {
        height: 50px;
        border-right: 1px solid var(--bs-primary);
    }
}

@media only screen and (max-width: 576px) {
    .tab-menu-vertical .nav-pills li {
        border-right: 0px;
    }
}

.tab-menu-vertical .nav-pills li:hover i {
    color: var(--bs-primary);
}

.tab-menu-vertical .nav-pills li:hover span {
    color: var(--bs-primary);
}

.tab-menu-vertical .nav-pills li .nav-item {
    display: flex;
    align-items: center;
    height: 100%;
}

@media only screen and (max-width: 1220px) {
    .tab-menu-vertical .nav-pills li .nav-item {
        justify-content: center;
    }
}

.tab-menu-vertical .nav-pills li .nav-item.active {
    background-color: var(--bs-primary);
    color: #ffff;
}

    .tab-menu-vertical .nav-pills li .nav-item.active:hover i {
        color: #ffff !important;
    }

    .tab-menu-vertical .nav-pills li .nav-item.active:hover span {
        color: #ffff !important;
    }

    .tab-menu-vertical .nav-pills li .nav-item.active span {
        color: #ffff;
    }

.tab-menu-vertical .nav-pills li .nav-item span {
    margin-left: 5px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
}

@media only screen and (max-width: 1220px) {
    .tab-menu-vertical .nav-pills li .nav-item span {
        visibility: visible;
        opacity: 1;
    }
}

.tab-menu-vertical .nav-pills li i {
    padding-left: 18px;
    font-size: 25px;
}

@media only screen and (max-width: 1220px) {
    .tab-menu-vertical .nav-pills li i {
        padding-left: 0px;
    }
}

@media only screen and (max-width: 1220px) {
    .tab-menu-vertical .nav-pills li span {
        visibility: visible;
        opacity: 1;
    }
}

.tab-menu-vertical .nav-pills li:hover {
    background-color: #dddddd;
}

.tab-menu-vertical .toggle {
    position: absolute;
    top: -8px;
    right: -8px;
    height: 30px;
    width: 30px;
    border-radius: 10px;
    z-index: 1;
    background-color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media only screen and (max-width: 1220px) {
    .tab-menu-vertical .toggle {
        display: none;
    }
}

.tab-menu-vertical .toggle .bx {
    font-size: 30px;
    color: #ffff;
}

.tab-overide {
    position: relative;
    overflow: hidden;
}

    .tab-overide.tab-content > .tab-pane {
        display: block !important;
        position: absolute;
        width: 100%;
        height: auto;
        opacity: 0;
        transition: 0.3s;
    }

    .tab-overide.tab-content > .active {
        position: static;
        opacity: 1;
    }

.fieldsetBox {
    border: 1px solid var(--bs-primary);
    padding: 16px;
    display: block;
    border-radius: var(--bs-radius);
}

    .fieldsetBox legend {
        font-size: 18px;
        font-weight: bold;
        color: var(--bs-primary);
    }

    .fieldsetBox .wrapperForm .textBottom {
        color: var(--bs-primary);
        font-weight: bold;
        font-size: 12px;
    }

    .fieldsetBox .wrapperForm .form-control {
        border: 1px solid var(--bs-primary);
    }

    .fieldsetBox .wrapperForm .input-group-text {
        border: 1px solid var(--bs-primary);
    }

    .fieldsetBox .wrapperForm .btn-toolbar .btn-group .btn {
        font-weight: bold;
    }

    .fieldsetBox thead tr th {
        white-space: nowrap !important;
        text-align: center;
    }

@media only screen and (max-width: 992px) {
    .fieldsetBox thead tr th {
        white-space: nowrap !important;
    }
}

.fieldsetBox tbody tr td {
    white-space: nowrap !important;
    text-align: center;
}

@media only screen and (max-width: 768px) {
    .fieldsetBox tbody tr td {
        white-space: nowrap !important;
    }
}

.fieldsetBox tfoot tr {
    white-space: normal;
}

    .fieldsetBox tfoot tr td {
        font-weight: bold;
    }

fieldset {
    height: 100%;
}

fieldset,
legend {
    all: revert;
    min-inline-size: unset;
}

legend {
    display: flex;
    align-items: center;
    gap: 16px;
}

    legend .btn-primary {
        padding: 4px 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
    }

@media only screen and (max-width: 576px) {
    legend .btn-primary {
        padding: 8px;
        white-space: nowrap;
    }
}

legend .btn-primary svg {
    fill: #ffff;
}

.table-edit-detail .wrapper {
    margin: 5px auto;
}

.table-edit-detail .common_table {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: var(--bs-radius);
    overflow: hidden;
}

    .table-edit-detail .common_table thead {
        border-bottom: 1px solid #ced4da;
    }

    .table-edit-detail .common_table tbody tr {
        border-bottom: 1px solid #ced4da;
    }

    .table-edit-detail .common_table thead th {
        background-color: #cffafe;
        padding: 10px 5px;
        font-size: 14px;
        color: var(--bs-primary);
    }

    .table-edit-detail .common_table tbody td {
        background-color: #cffafe;
        padding: 10px 5px;
        color: var(--bs-primary);
    }

.table-edit-detail .template_row:first-child {
    margin: 0 auto;
}

.table-edit-detail .template_row input {
    border-radius: 5px;
    width: 100%;
    outline: none;
    border: 1px solid #ced4da;
    padding: 5px;
}

.table-edit-detail .no_entries_row {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    color: var(--bs-primary);
}

.table-edit-detail .controls a {
    text-decoration: none;
}

.table-edit-detail .list_add {
    text-decoration: none;
}

.table-edit-detail .action_btn {
    text-align: center;
}

    .table-edit-detail .action_btn input {
        width: 120px;
        padding: 5px;
        border-radius: 10px;
        margin: 10px;
    }

        .table-edit-detail .action_btn input:first-child {
            background-color: black;
            color: white;
        }

        .table-edit-detail .action_btn input:nth-child(2) {
            background-color: gray;
            color: white;
        }

.table-edit-detail .popup {
    visibility: hidden;
    /* Hidden by default. Visible on click */
}

.table-edit-detail .show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
    min-width: 300px;
    margin-left: -125px;
    background-color: #acdf87;
    color: #1e5631;
    text-align: center;
    border-radius: 5px;
    padding: 10px 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

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

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

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

.table-edit-detail .fa-times {
    font-size: 1rem;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: var(--bs-primary);
    color: #ffff;
}

    .bg-primary:hover {
        color: #ffff;
    }

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: var(--bs-secondary) !important;
}

.bg-success {
    --bs-bg-opacity: 1;
    background-color: var(--bs-success) !important;
    color: #ffff;
}

    .bg-success:hover {
        color: #ffff;
    }

.bg-info {
    --bs-bg-opacity: 1;
    background-color: var(--bs-info) !important;
    color: #ffff;
}

    .bg-info:hover {
        color: #ffff;
    }

.bg-warning {
    --bs-bg-opacity: 1;
    background-color: var(--bs-warning) !important;
    color: #ffff;
}

    .bg-warning:hover {
        color: #ffff;
    }

.bg-danger {
    --bs-bg-opacity: 1;
    background-color: var(--bs-danger) !important;
    color: #ffff;
}

    .bg-danger:hover {
        color: #ffff;
    }

.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light)) !important;
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark)) !important;
    color: #ffff;
}

    .bg-dark:hover {
        color: #ffff;
    }

.bg-gray {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-gray)) !important;
}

.bg-black {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-black)) !important;
    color: #ffff;
}

    .bg-black:hover {
        color: #ffff;
    }

.bg-white {
    --bs-bg-opacity: 1;
    background-color: #fff !important;
}

.bg-body {
    --bs-bg-opacity: 1;
    background-color: #f5f5f9 !important;
}

.bg-transparent {
    --bs-bg-opacity: 1;
    background-color: transparent !important;
}

.bg-lighter {
    --bs-bg-opacity: 1;
    background-color: rgba(67, 89, 113, 0.05) !important;
}

.bg-lightest {
    --bs-bg-opacity: 1;
    background-color: rgba(67, 89, 113, 0.025) !important;
}

.bg-opacity-10 {
    --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
    --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
    --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
    --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
    --bs-bg-opacity: 1;
}

.setting-page {
    width: 50px;
    height: 50px;
    border-radius: 0 50px 50px 0;
    -webkit-border-radius: 0 50px 50px 0;
    -moz-border-radius: 0 50px 50px 0;
    -ms-border-radius: 0 50px 50px 0;
    -o-border-radius: 0 50px 50px 0;
    font-size: 25px;
    color: #ffff;
    position: fixed;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    z-index: 900;
    background-color: var(--bs-primary);
}

    .setting-page:hover {
        background-color: var(--bs-primary);
        color: #ffff;
    }

.setting-page-sidebar .setting-color .setting-color-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-radius: 50px;
    cursor: pointer;
}

    .setting-page-sidebar .setting-color .setting-color-item.active {
        border: 2px solid var(--bs-primary);
    }

    .setting-page-sidebar .setting-color .setting-color-item .badge {
        width: 90%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffff;
        font-size: 18px;
        border-radius: 50px;
    }

        .setting-page-sidebar .setting-color .setting-color-item .badge.color-1 {
            background-color: #223e9c;
        }

        .setting-page-sidebar .setting-color .setting-color-item .badge.color-2 {
            background-color: #6b21a8;
        }

        .setting-page-sidebar .setting-color .setting-color-item .badge.color-3 {
            background-color: #0090e7;
        }

.setting-page-sidebar .setting-fonts .setting-font-item {
    background-color: var(--bs-body-bg);
    width: 100%;
    height: 50px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 18px;
    font-weight: 500;
    border: 1px solid var(--bs-primary);
}

    .setting-page-sidebar .setting-fonts .setting-font-item.active {
        background-color: var(--bs-primary);
        color: #ffff;
    }

.setting-page-sidebar .setting-style .setting-style-item {
    background-color: var(--bs-body-bg);
    width: 100%;
    height: 50px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 18px;
    font-weight: 500;
    border: 1px solid var(--bs-primary);
}

    .setting-page-sidebar .setting-style .setting-style-item.active {
        background-color: var(--bs-primary);
        color: #ffff;
    }

.setting-page-sidebar .setting-bg-page .change-bg {
    white-space: nowrap;
}

@media only screen and (max-width: 390px) {
    .setting-page-sidebar .setting-bg-page .change-bg {
        font-size: 14px;
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.setting-page-sidebar .setting-bg-page .change-bg.active {
    background-color: var(--bs-primary) !important;
    color: #ffff !important;
}

body[data-style=google] .setting-page {
    color: #ffff;
    background-color: var(--bs-primary);
}

    body[data-style=google] .setting-page:hover {
        opacity: 0.6;
        filter: alpha(opacity=60);
    }

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .pace .pace-progress {
        background: linear-gradient(to right, #5156be 20%, #2ab57d 40%, #4ba6ef 60%, #ffbf53 80%, #fd625e 100%);
        position: fixed;
        z-index: 2000;
        top: 0;
        right: 100%;
        width: 100%;
        height: 5px;
    }

.pace-inactive .pace-progress {
    display: none;
}

.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: var(--bs-primary);
    transition: transform 0.3s;
    transform: translateX(100%) translateY(-100%) rotate(45deg);
    pointer-events: none;
    border: 1px solid #ffff;
}

.pace.pace-active .pace-activity {
    transform: translateX(50%) translateY(-50%) rotate(45deg);
}

.pace .pace-activity::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    display: block;
    bottom: 18px;
    left: 65px;
    width: 30px;
    height: 30px;
    border: solid 2px transparent;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 50%;
    -webkit-animation: pace-spinner 0.4s linear infinite;
    animation: pace-spinner 0.4s linear infinite;
}

@-webkit-keyframes pace-spinner {
    0% {
        transform: rotate(0);
    }

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

@keyframes pace-spinner {
    0% {
        transform: rotate(0);
        transform: rotate(0);
    }

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

.loader-content {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 999;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

    .loader-content.show {
        display: flex;
    }

.jimu-primary-loading:before,
.jimu-primary-loading:after {
    position: absolute;
    top: 0;
    content: "";
}

.jimu-primary-loading:before {
    left: -19.992px;
}

.jimu-primary-loading:after {
    left: 19.992px;
    -webkit-animation-delay: 0.32s !important;
    animation-delay: 0.32s !important;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after,
.jimu-primary-loading {
    background: var(--bs-primary);
    -webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
    animation: loading-keys-app-loading 0.8s infinite ease-in-out;
    width: 15px;
    height: 40px;
}

.jimu-primary-loading {
    text-indent: -9999em;
    margin: auto;
    position: absolute;
    right: calc(50% - 6.8px);
    top: calc(50% - 16px);
    -webkit-animation-delay: 0.16s !important;
    animation-delay: 0.16s !important;
}

@-webkit-keyframes loading-keys-app-loading {
    0%, 80%, 100% {
        opacity: 0.75;
        box-shadow: 0 0 var(--bs-primary);
        height: 32px;
    }

    40% {
        opacity: 1;
        box-shadow: 0 -8px var(--bs-primary);
        height: 40px;
    }
}

@keyframes loading-keys-app-loading {
    0%, 80%, 100% {
        opacity: 0.75;
        box-shadow: 0 0 var(--bs-primary);
        height: 32px;
    }

    40% {
        opacity: 1;
        box-shadow: 0 -8px var(--bs-primary);
        height: 40px;
    }
}

.alert {
    background: #bbf7d0;
    padding: 20px 40px;
    min-width: 450px;
    position: fixed;
    right: 0;
    bottom: 10px;
    border-radius: 4px;
    border-left: 15px solid var(--bs-success);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    box-shadow: var(--bs-box-shadow);
}

    .alert.showAlert {
        opacity: 1;
        pointer-events: auto;
    }

    .alert.show {
        -webkit-animation: show_slide 1s ease forwards;
        animation: show_slide 1s ease forwards;
    }

@-webkit-keyframes show_slide {
    0% {
        transform: translateX(100%);
    }

    40% {
        transform: translateX(-10%);
    }

    80% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-10px);
    }
}

@keyframes show_slide {
    0% {
        transform: translateX(100%);
    }

    40% {
        transform: translateX(-10%);
    }

    80% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-10px);
    }
}

.alert.hide {
    -webkit-animation: hide_slide 1s ease forwards;
    animation: hide_slide 1s ease forwards;
}

@-webkit-keyframes hide_slide {
    0% {
        transform: translateX(-10px);
    }

    40% {
        transform: translateX(0%);
    }

    80% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes hide_slide {
    0% {
        transform: translateX(-10px);
    }

    40% {
        transform: translateX(0%);
    }

    80% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(100%);
    }
}

.alert .bx-check-circle {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-success);
    font-size: 30px;
}

.alert .msg {
    padding: 0 20px;
    font-size: 18px;
    color: var(--bs-success);
}

.alert .close-btn {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(34, 197, 94, 0.6);
    padding: 20px 18px;
    cursor: pointer;
}

    .alert .close-btn:hover {
        background: var(--bs-success);
    }

    .alert .close-btn .bx-x {
        color: #bbf7d0;
        font-size: 30px;
        line-height: 40px;
    }

body[data-style=ios] .table-responsive {
    background-color: rgba(255, 255, 255, 0.65);
}

body[data-style=ios] .wrapperTopBanner.dashboard {
    display: none;
}

body[data-style=ios] .topHeder {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

    body[data-style=ios] .topHeder .card {
        box-shadow: 4px 4px 0 -1px var(--bs-primary);
        border: 1px solid var(--bs-primary);
        background-color: rgba(255, 255, 255, 0.1);
    }

body[data-style=ios] .layout-wrapper {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-position: center;
    padding: 15px 60px;
}

@media only screen and (max-width: 1600px) {
    body[data-style=ios] .layout-wrapper {
        padding: 15px 30px;
    }
}

@media only screen and (max-width: 992px) {
    body[data-style=ios] .layout-wrapper {
        padding: 0px;
    }
}

body[data-style=ios] .layout-content {
    background-color: rgb(214 228 253 / 70%);
    border-radius: var(--bs-radius);
}

    body[data-style=ios] .layout-content .wrapHeader .headerTop {
        background-color: rgba(249, 250, 245, 0.7);
    }

body[data-style=ios] .footer.wrapperFooter {
    background-color: transparent !important;
    padding: 0px;
    border-top: none;
    border-bottom-left-radius: var(--bs-radius);
    border-bottom-right-radius: var(--bs-radius);
    overflow: hidden;
}

@media only screen and (max-width: 992px) {
    body[data-style=ios] .footer.wrapperFooter {
        border-radius: 0px;
    }

    .footer {
        padding: 15px !important;
    }
}

body[data-style=ios] .footer.wrapperFooter .container-fluid {
    background-color: #f9faf5;
    height: 100%;
}

    body[data-style=ios] .footer.wrapperFooter .container-fluid .wrapperContent {
        height: 100%;
        padding: 15px 0px;
    }

body[data-style=ios] .card {
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-box-shadow);
    padding: var(--padding);
    background-color: rgba(255, 255, 255, 0.65);
}

    body[data-style=ios] .card .card .tab-content {
        padding: 0px;
    }

    body[data-style=ios] .card .card .card {
        box-shadow: none;
        border: none;
        padding: 0px;
    }

body[data-style=google] .wrapperTopBanner.dashboard {
    border-radius: 0px;
    position: relative;
}

    body[data-style=google] .wrapperTopBanner.dashboard .bgBanner {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body[data-style=google] .wrapperTopBanner.dashboard .breacrumb-banner {
        position: relative;
        z-index: 10;
    }

        body[data-style=google] .wrapperTopBanner.dashboard .breacrumb-banner .title {
            color: #ffff !important;
        }

        body[data-style=google] .wrapperTopBanner.dashboard .breacrumb-banner .breadcrumb .breadcrumb-item {
            color: #ffff !important;
        }

            body[data-style=google] .wrapperTopBanner.dashboard .breacrumb-banner .breadcrumb .breadcrumb-item .text-page {
                color: #ffff !important;
            }

body[data-style=google] .topHeder {
    margin-top: -45px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px !important;
    border: 0px !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    margin-bottom: 0px !important;
}

    body[data-style=google] .topHeder .breacrumb-ios {
        display: none;
    }

body[data-style=google] .layout-wrapper .container-fluid {
    padding: 0px 60px;
}

@media only screen and (max-width: 1600px) {
    body[data-style=google] .layout-wrapper .container-fluid {
        padding: 0px 30px;
    }
}

@media only screen and (max-width: 1220px) {
    body[data-style=google] .layout-wrapper .container-fluid {
        padding: 0px 15px;
    }
}

body[data-style=google] .wrapperBgPage {
    display: none;
}

body[data-style=google] .wrapHeader .headerTop {
    border-radius: 0px;
}

body[data-style=google] .footer.wrapperFooter .container-fluid .wrapperContent .text {
    color: #ffff;
}

    body[data-style=google] .footer.wrapperFooter .container-fluid .wrapperContent .text .link {
        color: #ffff;
    }

body[data-style=google] .card {
    background-color: #f3f6f8;
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-box-shadow);
    padding: var(--padding);
    border-color: #52586633;
    border-width: 1px;
}

.wrapperTopBanner {
    height: 200px;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

    .wrapperTopBanner .bgBanner {
        height: 100%;
        width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

        .wrapperTopBanner .bgBanner .bgGradient {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to top left, #7928ca, #ff0080);
            opacity: 0.6;
        }

.bottomHeader {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 15px;
    border-radius: var(--bs-border-radius);
    margin-top: -100px;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    position: relative;
    margin-left: 30px;
    margin-right: 30px;
}

@media only screen and (max-width: 576px) {
    .bottomHeader {
        margin-left: 0px;
        margin-right: 0px;
    }
}

.topHeder {
    margin-bottom: 15px;
    margin-top: -150px;
    margin-left: 15px;
    margin-right: 15px;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

.page-404 {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .page-404 .card {
        height: auto;
        padding: 100px 30px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

@media only screen and (max-width: 768px) {
    .page-404 .card {
        margin: 0px 15px;
    }
}

.page-404 .card .heading {
    font-size: 150px;
    margin-bottom: 30px;
}

@media only screen and (max-width: 768px) {
    .page-404 .card .heading {
        font-size: 70px;
        margin-bottom: 15px;
    }
}

.page-404 .card .btn {
    margin-top: 30px;
}

@media only screen and (max-width: 768px) {
    .page-404 .card .btn {
        margin-top: 15px;
    }
}

.wrapperNodata .wrapImage {
    max-width: 500px;
}

    .wrapperNodata .wrapImage img {
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

/* Hide the default checkbox */
.checkbox-style-1 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-style-1 {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Create a custom checkbox */
.checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    background-color: #ccc;
    border-radius: 0.2pc;
    box-shadow: 3px 3px grey;
}

/* When the checkbox is checked, add a blue background */
.checkbox-style-1 input:checked ~ .checkmark {
    background-image: linear-gradient(90deg, aqua, blue);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-style-1 input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-style-1 .checkmark:after {
    left: 0.45em;
    top: 0.25em;
    width: 11px;
    height: 0.5em;
    border: solid white;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}

.checkbox-style-2 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 30px;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 2px solid black;
    position: relative;
    transition: all 0.2s ease-in-out;
}

    .checkbox-style-2::before {
        font-family: "Quicksand", sans-serif;
        position: absolute;
        bottom: -12px;
        left: 1px;
        content: "✔";
        font-size: 40px;
        color: #ff9900;
        transform: scale(0);
        transition: all 0.2s ease-in-out;
    }

    .checkbox-style-2:checked::before {
        -webkit-animation: zoom 0.5s ease-in-out;
        animation: zoom 0.5s ease-in-out;
        transform: scale(1);
    }

@-webkit-keyframes zoom {
    0% {
        transform: scale(0);
    }

    20% {
        transform: scale(1.5);
    }

    40% {
        transform: scale(0.5);
    }

    50% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.2);
    }

    90% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zoom {
    0% {
        transform: scale(0);
    }

    20% {
        transform: scale(1.5);
    }

    40% {
        transform: scale(0.5);
    }

    50% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.2);
    }

    90% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

.checkbox-style-3 {
    box-sizing: border-box;
    --background-color: #fff;
    --checkbox-height: 20px;
}

@-webkit-keyframes dothabottomcheck-19 {
    0% {
        height: 0;
    }

    100% {
        height: calc(var(--checkbox-height) / 2);
    }
}

@keyframes dothabottomcheck-19 {
    0% {
        height: 0;
    }

    100% {
        height: calc(var(--checkbox-height) / 2);
    }
}

@keyframes dothatopcheck-19 {
    0% {
        height: 0;
    }

    50% {
        height: 0;
    }

    100% {
        height: calc(var(--checkbox-height) * 1.2);
    }
}

@-webkit-keyframes dothatopcheck-19 {
    0% {
        height: 0;
    }

    50% {
        height: 0;
    }

    100% {
        height: calc(var(--checkbox-height) * 1.2);
    }
}

.checkbox-style-3 input[type=checkbox] {
    display: none;
}

.checkbox-style-3 .check-box {
    height: var(--checkbox-height);
    width: var(--checkbox-height);
    background-color: #ffff;
    border: calc(var(--checkbox-height) * 0.1) solid #000;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    transition: border-color ease 0.2s;
    cursor: pointer;
}

    .checkbox-style-3 .check-box::before,
    .checkbox-style-3 .check-box::after {
        box-sizing: border-box;
        position: absolute;
        height: 0;
        width: calc(var(--checkbox-height) * 0.2);
        background-color: #34b93d;
        display: inline-block;
        transform-origin: left top;
        border-radius: 5px;
        content: " ";
        transition: opacity ease 0.5;
    }

    .checkbox-style-3 .check-box::before {
        top: calc(var(--checkbox-height) * 0.72);
        left: calc(var(--checkbox-height) * 0.41);
        box-shadow: 0 0 0 calc(var(--checkbox-height) * 0.05) var(--background-color);
        transform: rotate(-135deg);
    }

    .checkbox-style-3 .check-box::after {
        top: calc(var(--checkbox-height) * 0.37);
        left: calc(var(--checkbox-height) * 0.05);
        transform: rotate(-45deg);
    }

    .checkbox-style-3 input[type=checkbox]:checked + .check-box,
    .checkbox-style-3 .check-box.checked {
        border-color: #34b93d;
    }

        .checkbox-style-3 input[type=checkbox]:checked + .check-box::after,
        .checkbox-style-3 .check-box.checked::after {
            height: calc(var(--checkbox-height) / 2);
            -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
            animation: dothabottomcheck-19 0.2s ease 0s forwards;
        }

        .checkbox-style-3 input[type=checkbox]:checked + .check-box::before,
        .checkbox-style-3 .check-box.checked::before {
            height: calc(var(--checkbox-height) * 1.2);
            -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
            animation: dothatopcheck-19 0.4s ease 0s forwards;
        }

.checkbox-style-4 .round {
    position: relative;
}

    .checkbox-style-4 .round label {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        height: 28px;
        width: 28px;
        display: block;
    }

        .checkbox-style-4 .round label:after {
            border: 2px solid #fff;
            border-top: none;
            border-right: none;
            content: "";
            height: 6px;
            left: 8px;
            opacity: 0;
            position: absolute;
            top: 9px;
            transform: rotate(-45deg);
            width: 12px;
        }

    .checkbox-style-4 .round input[type=checkbox] {
        visibility: hidden;
        display: none;
        opacity: 0;
    }

        .checkbox-style-4 .round input[type=checkbox]:checked + label {
            background-color: #66bb6a;
            border-color: #66bb6a;
        }

            .checkbox-style-4 .round input[type=checkbox]:checked + label:after {
                opacity: 1;
            }

.checkbox-style-5 *,
.checkbox-style-5 *:after,
.checkbox-style-5 *:before {
    box-sizing: border-box;
}

.checkbox-style-5 input {
    position: absolute;
    opacity: 0;
}

    .checkbox-style-5 input:checked + label svg path {
        stroke-dashoffset: 0;
    }

    .checkbox-style-5 input:focus + label {
        transform: scale(1.03);
    }

    .checkbox-style-5 input + label {
        display: block;
        border: 2px solid #333;
        width: var(--size);
        height: var(--size);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .checkbox-style-5 input + label:active {
            transform: scale(1.05);
            border-radius: 12px;
        }

        .checkbox-style-5 input + label svg {
            pointer-events: none;
            padding: 5%;
        }

            .checkbox-style-5 input + label svg path {
                fill: none;
                stroke: #333;
                stroke-width: 4px;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 100;
                stroke-dashoffset: 101;
                transition: all 250ms cubic-bezier(1, 0, 0.37, 0.91);
            }

.checkbox-style-6 *,
.checkbox-style-6 ::after,
.checkbox-style-6 ::before {
    box-sizing: border-box;
}

.checkbox-style-6 [type=checkbox].substituted {
    margin: 0;
    width: 0;
    height: 0;
    display: inline;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    .checkbox-style-6 [type=checkbox].substituted + label:before {
        content: "";
        display: inline-block;
        vertical-align: top;
        height: 20px;
        width: 20px;
        margin-right: 0.6em;
        color: rgba(0, 0, 0, 0.275);
        border: solid 0.06em;
        box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em inset, 0 0 0 0.07em transparent inset;
        border-radius: 0.2em;
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="white" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>') no-repeat center, white;
        background-size: 0;
        will-change: color, border, background, background-size, box-shadow;
        transform: translate3d(0, 0, 0);
        transition: color 0.1s, border 0.1s, background 0.15s, box-shadow 0.1s;
    }

    .checkbox-style-6 [type=checkbox].substituted:enabled:active + label:before,
    .checkbox-style-6 [type=checkbox].substituted:enabled + label:active:before {
        box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset;
        background-color: #f0f0f0;
    }

    .checkbox-style-6 [type=checkbox].substituted:checked + label:before {
        background-color: #3b99fc;
        background-size: 0.75em;
        color: rgba(0, 0, 0, 0.075);
    }

    .checkbox-style-6 [type=checkbox].substituted:checked:enabled:active + label:before,
    .checkbox-style-6 [type=checkbox].substituted:checked:enabled + label:active:before {
        background-color: #0a7ffb;
        color: rgba(0, 0, 0, 0.275);
    }

    .checkbox-style-6 [type=checkbox].substituted:focus + label:before {
        box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset, 0 0 0 3.3px rgba(65, 159, 255, 0.55), 0 0 0 5px rgba(65, 159, 255, 0.3);
    }

    .checkbox-style-6 [type=checkbox].substituted:focus:active + label:before,
    .checkbox-style-6 [type=checkbox].substituted:focus + label:active:before {
        box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset, 0 0 0 3.3px rgba(65, 159, 255, 0.55), 0 0 0 5px rgba(65, 159, 255, 0.3);
    }

    .checkbox-style-6 [type=checkbox].substituted:disabled + label:before {
        opacity: 0.5;
    }

    .checkbox-style-6 [type=checkbox].substituted.dark + label:before {
        color: rgba(255, 255, 255, 0.275);
        background-color: #222;
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="rgba(34, 34, 34, 0.999)" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>');
    }

    .checkbox-style-6 [type=checkbox].substituted.dark:enabled:active + label:before,
    .checkbox-style-6 [type=checkbox].substituted.dark:enabled + label:active:before {
        background-color: #444;
        box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(255, 255, 255, 0.1) inset;
    }

    .checkbox-style-6 [type=checkbox].substituted.dark:checked + label:before {
        background-color: #a97035;
        color: rgba(255, 255, 255, 0.075);
    }

    .checkbox-style-6 [type=checkbox].substituted.dark:checked:enabled:active + label:before,
    .checkbox-style-6 [type=checkbox].substituted.dark:checked:enabled + label:active:before {
        background-color: #c68035;
        color: rgba(0, 0, 0, 0.275);
    }

.checkbox-wrapper-46 input[type=checkbox] {
    display: none;
    visibility: hidden;
}

.checkbox-wrapper-46 .cbx {
    margin: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

    .checkbox-wrapper-46 .cbx span {
        display: inline-block;
        vertical-align: middle;
        transform: translate3d(0, 0, 0);
    }

        .checkbox-wrapper-46 .cbx span:first-child {
            position: relative;
            width: 18px;
            height: 18px;
            border-radius: 3px;
            transform: scale(1);
            vertical-align: middle;
            border: 1px solid #9098a9;
            transition: all 0.2s ease;
        }

            .checkbox-wrapper-46 .cbx span:first-child svg {
                position: absolute;
                top: 3px;
                left: 2px;
                fill: none;
                stroke: #ffffff;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 16px;
                stroke-dashoffset: 16px;
                transition: all 0.3s ease;
                transition-delay: 0.1s;
                transform: translate3d(0, 0, 0);
            }

            .checkbox-wrapper-46 .cbx span:first-child:before {
                content: "";
                width: 100%;
                height: 100%;
                background: #506eec;
                display: block;
                transform: scale(0);
                opacity: 1;
                border-radius: 50%;
            }

        .checkbox-wrapper-46 .cbx span:last-child {
            padding-left: 8px;
        }

    .checkbox-wrapper-46 .cbx:hover span:first-child {
        border-color: #506eec;
    }

.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
    background: #506eec;
    border-color: #506eec;
    -webkit-animation: wave-46 0.4s ease;
    animation: wave-46 0.4s ease;
}

    .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child svg {
        stroke-dashoffset: 0;
    }

    .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child:before {
        transform: scale(3.5);
        opacity: 0;
        transition: all 0.6s ease;
    }

@-webkit-keyframes wave-46 {
    50% {
        transform: scale(0.9);
    }
}

@keyframes wave-46 {
    50% {
        transform: scale(0.9);
    }
}

.wrapperBgProfile .wrapperBg {
    width: 100%;
    height: 300px;
    position: relative;
    background-color: #ff3cac;
    background-image: linear-gradient(225deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
    border-radius: var(--bs-radius);
    opacity: 0.5;
    z-index: 0;
}

@media only screen and (max-width: 768px) {
    .wrapperBgProfile .wrapperBg {
        display: none;
    }
}

.wrapperBgProfile .wrapperFormContent {
    position: relative;
    max-width: 1200px;
    margin-top: -230px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffff;
    border-radius: var(--bs-radius);
    padding: 15px;
    z-index: 10;
}

@media only screen and (max-width: 768px) {
    .wrapperBgProfile .wrapperFormContent {
        margin-top: 0;
    }
}

body[data-style=google] .wrapperBgProfile .wrapperFormContent {
    background-color: #f3f6f8;
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-box-shadow);
    padding: var(--padding);
    border-color: #52586633;
    border-width: 1px;
}

.avatar-upload {
    position: relative;
    max-width: 300px;
    margin: 50px auto;
}

@media only screen and (max-width: 768px) {
    .avatar-upload {
        margin: 25px auto;
    }
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: 45px;
    z-index: 1;
    top: 10px;
}

    .avatar-upload .avatar-edit input {
        display: none;
    }

        .avatar-upload .avatar-edit input + label {
            width: 34px;
            height: 34px;
            margin-bottom: 0;
            border-radius: 100%;
            background: var(--bs-primary);
            border: 1px solid transparent;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
            cursor: pointer;
            font-weight: normal;
            transition: all 0.2s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .avatar-upload .avatar-edit .icon-edit {
        font-size: 18px;
        color: #ffff;
    }

.avatar-upload .avatar-preview {
    width: 250px;
    height: 250px;
    position: relative;
    border-radius: 100%;
    border: 6px solid #f8f8f8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    margin: auto;
}

    .avatar-upload .avatar-preview > div {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

.loader-content {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 999;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

    .loader-content.show {
        display: flex;
    }

.jimu-primary-loading:before,
.jimu-primary-loading:after {
    position: absolute;
    top: 0;
    content: "";
}

.jimu-primary-loading:before {
    left: -19.992px;
}

.jimu-primary-loading:after {
    left: 19.992px;
    -webkit-animation-delay: 0.32s !important;
    animation-delay: 0.32s !important;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after,
.jimu-primary-loading {
    background: var(--bs-primary);
    -webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
    animation: loading-keys-app-loading 0.8s infinite ease-in-out;
    width: 15px;
    height: 40px;
}

.jimu-primary-loading {
    text-indent: -9999em;
    margin: auto;
    position: absolute;
    right: calc(50% - 6.8px);
    top: calc(50% - 16px);
    -webkit-animation-delay: 0.16s !important;
    animation-delay: 0.16s !important;
}

@-webkit-keyframes loading-keys-app-loading {
    0%, 80%, 100% {
        opacity: 0.75;
        box-shadow: 0 0 var(--bs-primary);
        height: 32px;
    }

    40% {
        opacity: 1;
        box-shadow: 0 -8px var(--bs-primary);
        height: 40px;
    }
}

@keyframes loading-keys-app-loading {
    0%, 80%, 100% {
        opacity: 0.75;
        box-shadow: 0 0 var(--bs-primary);
        height: 32px;
    }

    40% {
        opacity: 1;
        box-shadow: 0 -8px var(--bs-primary);
        height: 40px;
    }
}

.loading-page-animation {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, var(--bs-primary) 0.1%, #005e78 94.2%);
    background-size: 100%;
    z-index: 9999999;
    overflow: hidden;
}

    .loading-page-animation.show {
        display: flex;
    }

.loading-container {
    width: 100%;
    max-width: 520px;
    text-align: center;
    color: #fff;
    position: relative;
    margin: 0 32px;
}

    .loading-container:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #fff;
        bottom: 0;
        left: 0;
        border-radius: 10px;
        -webkit-animation: movingLine 2.4s infinite ease-in-out;
        animation: movingLine 2.4s infinite ease-in-out;
    }

@-webkit-keyframes movingLine {
    0% {
        opacity: 0;
        width: 0;
    }

    33.3%, 66% {
        opacity: 0.8;
        width: 100%;
    }

    85% {
        width: 0;
        left: initial;
        right: 0;
        opacity: 1;
    }

    100% {
        opacity: 0;
        width: 0;
    }
}

@keyframes movingLine {
    0% {
        opacity: 0;
        width: 0;
    }

    33.3%, 66% {
        opacity: 0.8;
        width: 100%;
    }

    85% {
        width: 0;
        left: initial;
        right: 0;
        opacity: 1;
    }

    100% {
        opacity: 0;
        width: 0;
    }
}

.loading-text {
    font-size: 5vw;
    line-height: 64px;
    letter-spacing: 10px;
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
}

    .loading-text span {
        -webkit-animation: moveLetters 2.4s infinite ease-in-out;
        animation: moveLetters 2.4s infinite ease-in-out;
        transform: translatex(0);
        position: relative;
        display: inline-block;
        opacity: 0;
        text-shadow: 0px 2px 10px rgba(46, 74, 81, 0.3);
    }

        .loading-text span:nth-child(1) {
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
        }

        .loading-text span:nth-child(2) {
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        .loading-text span:nth-child(3) {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }

        .loading-text span:nth-child(4) {
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }

        .loading-text span:nth-child(5) {
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
        }

        .loading-text span:nth-child(6) {
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
        }

        .loading-text span:nth-child(7) {
            -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
        }

@-webkit-keyframes moveLetters {
    0% {
        transform: translateX(-15vw);
        opacity: 0;
    }

    33.3%, 66% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(15vw);
        opacity: 0;
    }
}

@keyframes moveLetters {
    0% {
        transform: translateX(-15vw);
        opacity: 0;
    }

    33.3%, 66% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(15vw);
        opacity: 0;
    }
}

.listSearchTagBox {
    padding: 15px 0px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

    .listSearchTagBox .searchTag {
        display: flex;
        align-items: center;
        border: 1px solid var(--bs-primary);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        padding: 0.4375rem 0.875rem;
        border-radius: var(--bs-border-radius);
        position: relative;
        gap: 15px;
    }

        .listSearchTagBox .searchTag .searchTagItem {
            color: var(--bs-color-text);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .listSearchTagBox .searchTag .searchTagAction {
            background-color: var(--bs-primary);
            display: flex;
            align-items: center;
            padding: 5px;
            border-radius: var(--bs-border-radius);
            color: #ffff;
            font-size: 20px;
        }

.action-button {
    position: relative;
}

    .action-button .list-action-dropdown {
        padding-left: 0px;
        margin-bottom: 0px;
    }

    .action-button .list-btn-action {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .action-button .dropdown-menu {
        padding: 15px;
    }

        .action-button .dropdown-menu .btn {
            margin-top: 10px;
        }

.action-button-reponesive {
    position: relative;
}

    .action-button-reponesive .list-action-dropdown-reponesive {
        padding-left: 0px;
        margin-bottom: 0px;
    }

    .action-button-reponesive .list-btn-action-reponesive {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .action-button-reponesive .dropdown-menu {
        padding: 15px;
    }

        .action-button-reponesive .dropdown-menu .btn {
            margin-top: 10px;
        }

.dropdown-toggle-action {
    position: relative;
}

    .dropdown-toggle-action .list-action-dropdown {
        padding-left: 0px;
        margin-bottom: 0px;
    }

    .dropdown-toggle-action .list-btn-action {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .dropdown-toggle-action .dropdown-menu {
        padding: 15px;
    }

        .dropdown-toggle-action .dropdown-menu .btn {
            margin-top: 10px;
        }

.wrapperGalleryItem .galleryItems {
    margin-bottom: 25px;
}

.wrapperGalleryItem .wrapperImageItem {
    border-radius: var(--bs-border-radius);
    position: relative;
    z-index: 10;
}

    .wrapperGalleryItem .wrapperImageItem:hover .svgImage {
        opacity: 1;
    }

    .wrapperGalleryItem .wrapperImageItem .svgImage {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 0;
        color: #ffff;
        font-size: 40px;
        opacity: 0;
        transition: 0.3s;
        cursor: pointer;
    }

    .wrapperGalleryItem .wrapperImageItem .btn-close {
        position: absolute;
        top: -10px;
        right: -10px;
        background-color: #ffff;
        padding: 10px;
        border-radius: var(--bs-border-radius);
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        cursor: pointer;
        z-index: 10;
    }

    .wrapperGalleryItem .wrapperImageItem .wrapImgResize {
        border-radius: var(--bs-border-radius);
        cursor: pointer;
    }


.accordion-custom {
    border-radius: var(--bs-radius);
    overflow: hidden;
}

    .accordion-custom .accordion-item {
        background-color: rgba(255, 255, 255, 0.65);
        border-bottom: 1px solid var(--bs-secondary-border-subtle);
    }

        .accordion-custom .accordion-item .accordion-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px;
            font-size: 24px;
            background-color: var(--bs-warning-bg-subtle);
        }

@media only screen and (max-width: 576px) {
    .accordion-custom .accordion-item .accordion-header {
        font-size: 18px;
        flex-wrap: wrap;
        gap: 10px;
    }
}

.accordion-custom .accordion-item .accordion-header .wrapActionList {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .accordion-custom .accordion-item .accordion-header .wrapActionList .accordion-button {
        background-color: transparent;
        border-radius: var(--bs-radius);
    }

        .accordion-custom .accordion-item .accordion-header .wrapActionList .accordion-button:hover {
            background-color: white;
        }

.accordion-custom .accordion-item .accordion-body {
    padding: 15px;
}

@media only screen and (max-width: 1220px) {
    .wrapActionTable .filter-search-table {
        width: 100%;
    }
}

.wrapActionTable .filter-search-table .input-group {
    width: 100%;
}

@media only screen and (min-width: 1221px) {
    .wrapActionTable .filter-search-table .input-group {
        width: 500px;
    }
}

@media only screen and (max-width: 768px) {
    .wrapActionTable .filter-search-table .btn {
        font-size: 0px;
    }

        .wrapActionTable .filter-search-table .btn i {
            font-size: 16px;
        }
}

@media only screen and (max-width: 768px) {
    .wrapActionTable #btnFullscreen {
        display: none;
    }
}

@media only screen and (max-width: 456px) {
    .wrapActionTable .wrap-left {
        width: 100%;
    }
}

@media only screen and (max-width: 456px) {
    .wrapActionTable .wrap-right {
        display: none !important;
    }
}

.wrapActionTable .wrap-right .btn {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .wrapActionTable .md-w-full {
        width: 100%;
    }
}

.wrapActionTable .md-flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

@media only screen and (max-width: 768px) {
    .updateCardTable .sticky-table-header {
        display: none;
    }
}

.updateCardTable .sticky-table-header thead {
    background-color: var(--bs-primary);
}

    .updateCardTable .sticky-table-header thead tr th.fixed-table-column-auto {
        position: -webkit-sticky !important;
        position: sticky !important;
        color: black;
    }

        .updateCardTable .sticky-table-header thead tr th.fixed-table-column-auto .toggle-column {
            display: none;
        }

    .updateCardTable .sticky-table-header thead tr th.fixed-column {
        color: black;
    }

        .updateCardTable .sticky-table-header thead tr th.fixed-column svg {
            fill: black;
        }

    .updateCardTable .sticky-table-header thead tr th {
        color: white;
    }

        .updateCardTable .sticky-table-header thead tr th .toggle-column {
            fill: white;
        }

.updateCardTable .btn-toolbar {
    display: none;
}

@media only screen and (max-width: 768px) {
    .updateCardTable .btn-toolbar {
        display: none;
    }
}

.updateCardTable .selected-tr {
    background-color: var(--bs-highlight-bg) !important;
}

.table-rep-plugin-sweetsoft table th,
.table-rep-plugin-sweetsoft table td {
    color: #1e293b;
}

    .table-rep-plugin-sweetsoft table th.fixed-table-column-auto,
    .table-rep-plugin-sweetsoft table td.fixed-table-column-auto {
        position: -webkit-sticky;
        position: sticky;
        background-color: var(--bs-warning-bg-subtle);
        z-index: 10;
        right: 0;
        --bs-table-color-type: var(--bs-warning-bg-subtle) !important;
        --bs-table-bg-type: var(--bs-warning-bg-subtle) !important;
    }

        .table-rep-plugin-sweetsoft table th.fixed-table-column-auto .toggle-column,
        .table-rep-plugin-sweetsoft table td.fixed-table-column-auto .toggle-column {
            display: none;
        }

.table-rep-plugin-sweetsoft table thead {
    background-color: white;
}

.table-rep-plugin-sweetsoft table th .table-head {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 5px;
    justify-content: start;
}

    .table-rep-plugin-sweetsoft table th .table-head .toggle-column {
        background-color: var(--bs-light-bg-subtle);
        cursor: pointer;
        border-radius: 5px;
    }

        .table-rep-plugin-sweetsoft table th .table-head .toggle-column:hover {
            background-color: var(--bs-secondary-border-subtle);
        }

    .table-rep-plugin-sweetsoft table th .table-head .thTable {
        position: relative;
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        padding-right: 25px;
    }

.table-rep-plugin-sweetsoft table th.asc .thTable::after {
    content: "";
    display: block;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAIBJREFUSEvdlEsOgCAMROHk6sn9hSZVp2rtkCBsWPEezAA5VR65Mj/1KxhLdDJ/ThJFtEGHQpzWWUtmh2lnnwUaLiwtCQkQHEkch7ieQBbLTsO3zAJYgjcRHZjNCVz5o1vUdAcwbmYHFEGfHdw+RkYHVAGtAzfIWhD+zJ528n/BAj7hGxlIA71KAAAAAElFTkSuQmCC);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 45%;
    right: -5px;
    transform: translateY(-50%);
    z-index: 10;
}

.table-rep-plugin-sweetsoft table th.desc .thTable::after {
    content: "";
    display: block;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAIZJREFUSEvdldEOgCAIRfHLqy+vaLGhQwfhXZs9qtwjh80Kgb8Czqd1Aeerru1Q1j1mn9qeot8AnptXZ6IdwAGeGVSXjnYAB8AVwQEjRabumTOYAoArSgF2Ito6Cce9zvvWDIYvcrtpQSSc2WkAh2iIDg/rGb2mDBHYp2ApWvePltKii+GKLsVLGxkLet9xAAAAAElFTkSuQmCC);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 45%;
    right: -5px;
    transform: translateY(-50%);
    z-index: 10;
}

.table-rep-plugin-sweetsoft table tr,
.table-rep-plugin-sweetsoft table td {
    white-space: nowrap;
}

    .table-rep-plugin-sweetsoft table tr.fixed-column,
    .table-rep-plugin-sweetsoft table td.fixed-column {
        color: black;
    }

.table-rep-plugin-sweetsoft .table-admin-sweetsoft {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}

    .table-rep-plugin-sweetsoft .table-admin-sweetsoft::-webkit-scrollbar-track {
        background-color: white;
        border-radius: 15px;
    }

    .table-rep-plugin-sweetsoft .table-admin-sweetsoft::-webkit-scrollbar {
        height: 7px;
        background-color: white;
    }

    .table-rep-plugin-sweetsoft .table-admin-sweetsoft::-webkit-scrollbar-thumb {
        background-color: #a8a29e;
        border-radius: 15px;
    }

@media only screen and (max-width: 768px) {
    .table-rep-plugin-sweetsoft .table-admin-sweetsoft {
        border: none;
        background-color: transparent !important;
    }
}

.table-rep-plugin-sweetsoft .top-header {
    background-color: var(--bs-border-color);
    padding: 10px 10px;
    border-radius: 5px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    color: black;
    display: none;
}

@media only screen and (max-width: 768px) {
    .table-rep-plugin-sweetsoft .top-header {
        display: flex;
    }
}

.table-rep-plugin-sweetsoft .top-header .toggle-row {
    padding: 0px;
    height: 25px;
    width: 25px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .table-admin-sweetsoft.table-admin-sweetsoft-mobile table {
        border: 0;
        background-color: transparent;
    }

        .table-admin-sweetsoft.table-admin-sweetsoft-mobile table tr,
        .table-admin-sweetsoft.table-admin-sweetsoft-mobile table td {
            white-space: normal;
        }

        .table-admin-sweetsoft.table-admin-sweetsoft-mobile table caption {
            font-size: 1.3em;
        }

        .table-admin-sweetsoft.table-admin-sweetsoft-mobile table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .table-admin-sweetsoft.table-admin-sweetsoft-mobile table tr {
            border: 1px solid #ccc;
            display: block;
            margin-bottom: 0.625em;
            border-radius: 10px;
            overflow: hidden;
            background-color: white;
        }

            .table-admin-sweetsoft.table-admin-sweetsoft-mobile table tr.selected-tr {
                background-color: var(--bs-highlight-bg);
            }

        .table-admin-sweetsoft.table-admin-sweetsoft-mobile table td {
            border: unset;
            border-bottom: 1px solid #ccc;
            display: block;
            text-align: right;
            display: flex;
            justify-content: space-between;
        }

            .table-admin-sweetsoft.table-admin-sweetsoft-mobile table td::before {
                content: attr(data-label);
                float: left;
                font-weight: 500;
                text-transform: uppercase;
                white-space: nowrap;
                color: black;
                font-size: 12px;
                margin-right: 13px;
            }

            .table-admin-sweetsoft.table-admin-sweetsoft-mobile table td:last-child {
                border-bottom: 0;
            }
}

.filter-table-data {
    max-width: 320px;
}

    .filter-table-data .offcanvas-header {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: start;
        position: relative;
    }

        .filter-table-data .offcanvas-header .btn-close-slider {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: var(--bs-highlight-bg);
        }

    .filter-table-data .wrapFocus {
        background-color: var(--bs-primary);
        color: white;
    }

        .filter-table-data .wrapFocus.active {
            background-color: var(--bs-success);
        }

    .filter-table-data .showAll {
        background-color: var(--bs-primary);
        color: white;
    }

        .filter-table-data .showAll.active {
            background-color: white;
            border: 1px solid var(--bs-primary);
            color: var(--bs-primary);
        }

    .filter-table-data .list-item {
        margin-top: 15px;
    }

@media only screen and (max-width: 768px) {
    .table-mobile table {
        border: 0;
        background-color: transparent;
    }

        .table-mobile table tr,
        .table-mobile table td {
            white-space: normal;
        }

        .table-mobile table caption {
            font-size: 1.3em;
        }

        .table-mobile table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .table-mobile table tr {
            border: 1px solid #ccc;
            display: block;
            margin-bottom: 0.625em;
            border-radius: 10px;
            overflow: hidden;
            background-color: white;
        }

            .table-mobile table tr.selected-tr {
                background-color: var(--bs-highlight-bg);
            }

        .table-mobile table td {
            border: unset;
            border-bottom: 1px solid #ccc;
            display: block;
            text-align: right;
            display: flex;
            justify-content: space-between;
        }

            .table-mobile table td::before {
                content: attr(data-label);
                float: left;
                font-weight: 500;
                text-transform: uppercase;
                white-space: nowrap;
                color: black;
                font-size: 12px;
                margin-right: 13px;
            }

            .table-mobile table td:last-child {
                border-bottom: 0;
            }
}

.accordion-custom {
    border-radius: var(--bs-radius);
    overflow: hidden;
}

    .accordion-custom .accordion-item {
        background-color: rgba(255, 255, 255, 0.65);
        border-bottom: 1px solid var(--bs-secondary-border-subtle);
    }

        .accordion-custom .accordion-item .accordion-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px;
            font-size: 24px;
            background-color: var(--bs-warning-bg-subtle);
        }

@media only screen and (max-width: 576px) {
    .accordion-custom .accordion-item .accordion-header {
        font-size: 18px;
        flex-wrap: wrap;
        gap: 10px;
    }
}

.accordion-custom .accordion-item .accordion-header .wrapActionList {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .accordion-custom .accordion-item .accordion-header .wrapActionList .accordion-button {
        background-color: transparent;
        border-radius: var(--bs-radius);
    }

        .accordion-custom .accordion-item .accordion-header .wrapActionList .accordion-button:hover {
            background-color: white;
        }

.accordion-custom .accordion-item .accordion-body {
    padding: 15px;
}

@media only screen and (max-width: 768px) {
    .table-action-mobile {
        display: none;
    }
}

.offcanvas-form-search .offcanvas-header {
    display: unset;
}

.offcanvas-header .offcanvas-title {
    padding-left: 20px;
}

@media only screen and (max-width: 456px) {
    .offcanvas-form-search .offcanvas-header {
        padding: 10px 5px;
    }
}

@media only screen and (max-width: 456px) {
    .offcanvas-form-search .offcanvas-body {
        padding: 25px 10px;
    }

        .offcanvas-form-search .offcanvas-body .card {
            padding: 0px !important;
        }
}

.offcanvas-form-search .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
}

.bottomBarMobile {
    position: fixed;
    width: 100%;
    background-color: white;
    padding: 10px 5px;
    left: 0;
    bottom: 0;
    z-index: 100;
    display: none;
}

@media only screen and (max-width: 768px) {
    .bottomBarMobile {
        display: inline-block;
        padding: 0px;
    }
}

.bottomBarMobile .wrapList {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .bottomBarMobile .wrapList {
        gap: 0px;
    }
}

.bottomBarMobile .wrapList .btn {
    width: 100%;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
}

@media only screen and (max-width: 768px) {
    .bottomBarMobile .wrapList .btn {
        border-radius: 0px;
        border-right: 1px solid white;
    }

        .bottomBarMobile .wrapList .btn:last-child {
            border-right: 0px;
        }
}

@media only screen and (max-width: 456px) {
    .bottomBarMobile .wrapList .btn {
        padding: 2px 5px !important;
    }
}

.bottomBarMobile .wrapList .btn span {
    font-size: 10px;
}

.wrapDataErrorContainer {
    max-width: 600px;
    margin: auto;
}

    .wrapDataErrorContainer .wrapImage {
        width: 100%;
        height: auto;
    }

        .wrapDataErrorContainer .wrapImage img {
            width: 100%;
            height: auto;
            -o-object-fit: cover;
            object-fit: cover;
        }