:root {
    --font-family: 'RobotoRegular';
    /*--bb-layout-header-height: 50px;*/
    --bb-layout-header-height: 40px;
    --bb-layout-header-backgound: #f90;
    --bb-layout-headerbar-backgound: #f90;
    /*--bb-layout-headerbar-border-color: #1ab394;*/
    --bb-layout-headerbar-border-color: #f90;
    --bb-layout-footer-backgound: #5b6e84;
    --bb-layout-footer-height: 40px;
    --bb-layout-user-height: 65px;
    /*--bb-layout-sidebar-width: 214px;*/
    --bb-layout-sidebar-width: 240px !important;
    --bb-layout-sidebar-collapse-width: 50px !important;
    /*--bb-layout-sidebar-banner-background: #367fa9;*/
    --bb-layout-sidebar-banner-background: #63f;
    --bb-layout-sidebar-scrollbar-background: #c1c1c1;
    --bb-layout-sidebar-backgound: #343a40;
    --bb-layout-sidebar-color: #c2c7d0;
    --bb-layout-title-color: #e9ecef;
    --bb-tabs-page-active-bg: #fddc7f;
}

.layout {
    --bb-layout-header-height: 40px;
    --bb-layout-header-backgound: #e8e8e8;
    --bb-layout-sidebar-width: 240px !important;
    /*--bb-layout-sidebar-width: 214px;*/
    /*--bb-layout-header-backgound: #f90 #ff7435;*/
}

    .layout.is-page .layout-side .layout-banner {
        background-color: #e8e8e8;
    }

        .layout.is-page .layout-side .layout-banner .layout-logo {
            width: 36px;
            border-radius: var(--bs-border-radius);
            /*margin-left: -6px;*/
        }

    .layout.is-page .layout-header {
        color: #4f46e5;
    }

    /*.layout.is-page .layout-main {
        padding: 1rem 1rem 0;*/
    /*  position: relative;
        min-height: calc(100vh - var(--bb-layout-header-height) - var(--bb-layout-footer-height));*/
    /*}*/

    .layout.is-page .layout-side .layout-menu {
        overflow: hidden;
        height: calc(100vh - var(--bb-layout-header-height)) !important;
        /* padding: .5rem 0;
        height: calc(100vh - var(--bb-layout-header-height) - var(--bb-layout-user-height));*/
    }

.dropdown-logout .logout-text {
    color: #4f46e5;
    font-weight: 500;
}

.widget .dropdown-toggle {
    color: #4f46e5;
}

.page-layout-demo-footer-link {
    color: #ebeef5;
}

    .page-layout-demo-footer-link:hover {
        color: #fff;
    }

.layout.is-page .is-collapsed .layout-title {
    opacity: 1;
}

.page-layout-demo-option {
    margin-top: 1.5rem;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 4px;
    padding: 1.5rem 1rem 1rem 1rem;
    position: relative;
}

    .page-layout-demo-option > p {
        position: absolute;
        top: -10px;
        padding: 0 0.5rem;
        background: #fff;
    }

    .page-layout-demo-option .page-layout-demo-option-height {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .page-layout-demo-option .tabs-body-content {
        margin: 0 -1rem -2rem -1rem;
    }

.layout-drawer {
    padding: 10px;
    margin-right: -1rem;
    cursor: pointer;
}

    .layout-drawer:hover {
        background-color: #1893a7;
    }

.layout-drawer-body {
    padding: 1rem;
}

.layout-item {
    cursor: pointer;
    border: 2px solid #e9ecef;
    padding: 4px;
    border-radius: 4px;
    height: 80px;
    width: 120px;
    transition: border .3s linear;
}

    .layout-item:hover,
    .layout-item.active {
        border: 2px solid #28a745;
    }

    .layout-item .layout-left {
        width: 30%;
    }

        .layout-item .layout-left .layout-left-header {
            height: 16px;
            background-color: #367fa9;
        }

        .layout-item .layout-left .layout-left-body,
        .layout-item .layout-body .layout-left {
            background-color: #2f4050;
        }

    .layout-item .layout-right .layout-right-header, .layout-item .layout-top {
        background-color: #17a2b8;
        height: 16px;
    }



/*FOOTER*/
.layout.is-page .has-sidebar .layout-side.is-fixed-header, .layout.is-page .layout-footer.is-fixed {
    /* z-index: 1020;*/
    display: none;
}

/*.layout-item .layout-right .layout-right-footer,
    .layout-item .layout-footer {
        background-color: #5b6e84;
        height: 12px;
    }

    .layout-item .layout-top,
    .layout-item .layout-body,
    .layout-item .layout-footer {
        width: 100%;
    }*/

.layout.is-page .layout-right {
    background-color: #fff;
}

.color {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    cursor: pointer;
    border: 2px solid #e9ecef;
    border-radius: 4px;
    transition: border .3s linear;
}

    .color:hover {
        border: 2px solid #28a745;
    }

.color1,
.layout.is-page.color1 .layout-header {
    background-color: #409eff;
}

.layout.is-page.color1 .layout-side .layout-banner {
    background-color: #3e84d0
}

.layout.is-page.color1 .layout-side {
    background-color: #212529;
    color: #ebeef5;
}

.layout.is-page.color1 .layout-footer {
    background-color: #343a40;
}

.layout.is-page.color1 .layout-header-bar {
    background-color: #2b7cd0;
    border-color: #014186;
}

.layout.is-page.color1 .layout-drawer:hover {
    background-color: #3184dc;
}

.color2,
.layout.is-page.color2 .layout-header {
    background-color: #28a745;
}

.layout.is-page.color2 .layout-side .layout-banner {
    background-color: #24903d
}

.layout.is-page.color2 .layout-side {
    background-color: #212529;
    color: #ebeef5;
}

.layout.is-page.color2 .layout-footer {
    background-color: #343a40;
}

.layout.is-page.color2 .layout-header-bar {
    background-color: #258c3c;
    border-color: #014186;
}

.layout.is-page.color2 .layout-drawer:hover {
    background-color: #24903d;
}

.color3,
.layout.is-page.color3 .layout-header {
    background-color: #e83e8c;
}

.layout.is-page.color3 .layout-side .layout-banner {
    background-color: #c5417e
}

.layout.is-page.color3 .layout-side {
    background-color: #212529;
    color: #ebeef5;
}

.layout.is-page.color3 .layout-footer {
    background-color: #343a40;
}

.layout.is-page.color3 .layout-header-bar {
    background-color: #c73477;
    border-color: #014186;
}

.layout.is-page.color3 .layout-drawer:hover {
    background-color: #c5417e;
}

.color4,
.layout.is-page.color4 .layout-header {
    background-color: #ffc107;
}

.layout.is-page.color4 .layout-side .layout-banner {
    background-color: #e4af10
}

.layout.is-page.color4 .layout-side {
    background-color: #212529;
    color: #ebeef5;
}

.layout.is-page.color4 .layout-footer {
    background-color: #343a40;
}

.layout.is-page.color4 .layout-header-bar {
    background-color: #e2b221;
    border-color: #014186;
}

.layout.is-page.color4 .layout-drawer:hover {
    background-color: #e4af10;
}

.color5,
.layout.is-page.color5 .layout-header {
    background-color: #17a2b8;
}

.color6,
.layout.is-page.color6 .layout-header {
    background-color: #6610f2;
}

.layout.is-page.color6 .layout-side .layout-banner {
    background-color: #4b0cb3
}

.layout.is-page.color6 .layout-side {
    background-color: #212529;
    color: #ebeef5;
}

.layout.is-page.color6 .layout-footer {
    background-color: #343a40;
}

.layout.is-page.color6 .layout-header-bar {
    background-color: #4b0ab5;
    border-color: #014186;
}

.layout.is-page.color6 .layout-drawer:hover {
    background-color: #4b0cb3;
}



.widget .dropdown-body h3 {
    color: #666666;
    font-size: 12px;
    margin-bottom: 10px;
}

.widget .dropdown-body h4 {
    color: #444444;
    font-size: 15px;
    margin: 0;
}

.widget .dropdown-body small {
    color: #999999;
    font-size: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.widget .dropdown-item > div:not(.progress):last-child {
    width: calc(100% - 40px);
}

.widget .dropdown-item {
    padding: 0.5rem 1rem;
}

.widget .progress {
    height: 7px;
}

.widget .dropdown-item.active,
.widget .dropdown-item:active {
    color: inherit;
}

.widget .dropdown-item:not(:nth-of-type(odd)):active {
    background-color: inherit;
}

.authentication-form {
    width: 95vw;
    max-width: 400px;
    background-color: #ffffffa6;
    border-radius: 4px;
}

.e-btn-sb-icons {
    text-transform: none !important;
    text-align: left;
}

/*Thay đổi lại chiều cao view Report*/
.e-reportviewer-viewer .e-rv-scroller,
.e-reportviewer-viewer .e-list-parent.e-ul,
.e-reportviewer-viewer .e-content.e-dropdownbase,
.e-reportviewer-dialog-container .e-dlg-content,
.e-reportviewer-viewer .e-treeview,
.e-reportviewer-error-content,
.e-reportviewer-viewerblock-parentdiv,
.e-reportviewer-scrollcontainer.e-reportviewer-viewercontainer {
    height: 100% !important;
}