@use "sass:color";
@use "../components/alerts";
@use "../utils/mixins";
@use "../utils/variables";

.layout-box-mode {
    .main-wrapper {
        max-width: 1320px;
        margin: auto;
        @include mixins.respond-below(custom1399) {
            max-width: 1170px;
        }
        @include mixins.respond-below(custom1199) {
            max-width: 950px;
        }
        @include mixins.respond-below(custom991) {
            max-width: 100%;
        }
    }
}

@mixin use-css-variable($variable-name) {
    #{$variable-name}: var(#{$variable-name});
}
:root {
    --primary-rgb-picr: var(--primary-rgb);
    --sidebar--rgb-picr: var(--sidebar-rgb);
    --topbar--rgb-picr: var(--topbar-rgb);
    --topbarcolor--rgb-picr: var(--topbarcolor-rgb);
}
[data-layout="default"][data-width="box"],
[data-layout="mini"][data-width="box"] {
    .layout-box-mode {
        .mini-sidebar {
            .header {
                max-width: 1320px;
                left: 0;
                @include mixins.respond-below(custom1399) {
                    max-width: 1170px;
                }
                @include mixins.respond-below(custom1199) {
                    max-width: 950px;
                }
                @include mixins.respond-below(custom991) {
                    max-width: 100%;
                }
            }
            &.expand-menu {
                .header {
                    max-width: 1320px;
                    left: 0;
                    @include mixins.respond-below(custom1399) {
                        max-width: 1170px;
                    }
                    @include mixins.respond-below(custom1199) {
                        max-width: 950px;
                    }
                    @include mixins.respond-below(custom991) {
                        max-width: 100%;
                    }
                }
            }
        }        
        .header {
            margin: auto;
            max-width: 1320px;
            left: 0;
            @include mixins.respond-below(custom1399) {
                max-width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                max-width: 950px;
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
                left: 0;
            }
            .header-left {
                display: flex;
                @include mixins.respond-below(custom991) {
                    padding-left: 0;
                }
            }
        }
        .sidebar {
            left: unset;
            top: 65px;
            .sidebar-logo {
                display: none;
            }
            .slimScrollDiv {
                top: 0;
            }
        }
        .header-left #toggle_btn {
            top: 15px;
        }
    }
}
[data-layout="twocolumn"][data-width="box"],
[data-layout="modern"][data-width="box"]{
    .layout-box-mode {
        .sidebar {
            left: unset;
            .sidebar-logo {
                display: none;
            }
        }
        .header {
            margin: 0 auto;
            max-width: calc(1320px - 252px);
            @include mixins.respond-above(custom991) {
                left: 252px;
            }
            @include mixins.respond-below(custom1399) {
                max-width: calc(1170px - 252px);
            }
            @include mixins.respond-below(custom1199) {
                max-width: calc(950px - 252px);
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
                left: 0;
            }
        }
        &.mini-sidebar {
            .header {
                max-width: calc(1320px - 72px);
                @include mixins.respond-above(custom991) {
                    left: 72px;
                }
                @include mixins.respond-below(custom1399) {
                    max-width: calc(1170px - 72px);
                }
                @include mixins.respond-below(custom1199) {
                    max-width: calc(950px - 72px);
                }
                @include mixins.respond-below(custom991) {
                    max-width: 100%;
                    left: 0;
                }
            }
            &.expand-menu {
                .header {
                    max-width: calc(1320px - 252px);
                    @include mixins.respond-above(custom991) {
                        left: 252px;
                    }
                    @include mixins.respond-below(custom1399) {
                        max-width: calc(1170px - 252px);
                    }
                    @include mixins.respond-below(custom1199) {
                        max-width: calc(950px - 252px);
                    }
                    @include mixins.respond-below(custom991) {
                        max-width: 100%;
                        left: 0;
                    }
                }
            }
        }
    }
}
[data-layout="horizontal"][data-width="box"],
[data-layout="horizontal-overlay"][data-width="box"] {
    .main-wrapper {
        .header {
            margin: auto;
            max-width: 1320px;
            @include mixins.respond-below(custom1399) {
                max-width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                max-width: 950px;
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
            }
        }
        &::before {            
            width: 1320px;
            margin: 0 auto;
            left: 0;
            right: 0;
            @include mixins.respond-below(custom1399) {
                width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                width: 950px;
            }
            @include mixins.respond-below(custom991) {
                width: 100%;
            }
        }
        &::after { 
            left: 0;
            right: 0;
            margin: 0 auto;
            @include mixins.respond-below(custom1399) {
                width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                width: 950px;
            }
            @include mixins.respond-below(custom991) {
                width: 100%;
            }
        }
    }
    .header {
        padding: 0 16px;
        .main-header {
            max-width: 1320px;
            margin: 0 auto;
            @include mixins.respond-below(custom1399) {
                max-width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                max-width: 950px;
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
            }
            .user-menu {
                padding-right: 0;
            }
        }
        .header-left {
            display: block;
        }
    }     
    .sidebar {
        &.sidebar-horizontal {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 16px !important;
            left: auto;
            @include mixins.respond-below(custom1399) {
                max-width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                max-width: 950px;
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
            }
            .sidebar-menu {
                .nav-menu {
                    > li {
                        &.submenu {
                            & > a {
                                padding: 8px 30px 8px 8px;
                            }
                        }
                    }
                }
            }
        }
    }
}
[data-layout="detached"][data-width="box"] {
    .header {
        max-width: 1320px;
        margin: 0 auto;
        @include mixins.respond-below(custom1399) {
            max-width: 95%;
        }
    } 
}
[data-layout="without-header"][data-width="box"] {
    .sidebar {
        left: auto;
    }
}
[data-layout="detached"] {
    .main-wrapper {
            margin: 0 auto;
        @include mixins.respond-above(custom1399) {
            max-width: 1320px;
        }
        @include mixins.respond-above(custom991) {
            max-width: 95%;
        }
    }
    .header {
        left: 0;
        .header-left {
            display: flex;
            padding-left: 0;
            text-align: left;
        }
        .header-user .user-menu {
            padding-right: 0;
        }
        .main-header {
            margin: 0 auto;
            @include mixins.respond-above(custom1399) {
                max-width: 1320px;
            }
            @include mixins.respond-above(custom991) {
                max-width: 95%;
            }
        }
        #toggle_btn {
            top: 15px;
        }
    }
    .expand-menu{
        .header-left {
            width: auto;
        }
        &.mini-sidebar{
            .header {
                left: 0;
                .header-left {
                    width: auto;
                }
            }
        }
    }
    .sidebar {
        top: 74px;
        left: unset;
        bottom: 24px;
        border: 1px solid variables.$secondary-transparent;
        border-radius: 5px;
        .slimScrollDiv {
            height: 100% !important;
            top: 0;
            .sidebar-inner {
                height: 100% !important;
            }
            .sidebar-menu {
                margin-top: 0;
                padding-bottom: 0;
            }
        }
        .sidebar-menu {
            margin-top: 16px;
        }
        .sidebar-logo {
            display: none;
        }
        @include mixins.respond-below(custom991) {
            top: 50px;
            bottom: 0;
        }
    }
    .page-wrapper {
        @include mixins.respond-above(custom991) {
            padding: 74px 0 0;
        }
        .head-icons{
            display: none;
        }
    }

}
[data-layout=twocolumn],[data-size=twocol] {
    .sidebar.navbar-menu {
        display: none;

        @include mixins.respond-below(custom991) {
            display: block;
        }
    }   
    .sidebar-twocol.sidebar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    #two-col-sidebar {
        display: block;
        @include mixins.respond-below(custom991) {
            display: none;
        }
    }  
}
[data-layout=horizontal] {   
    #horizontal-menu {
        display: block;
    }
    .header {
        left: 0;
        .main-header {
            max-width: 1320px;
            margin: 0 auto;
            @include mixins.respond-below(custom1399) {
                max-width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                max-width: 950px;
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
            }
            .user-menu {
                padding-right: 0;
            }
        }
        .header-left {
            display: block;
        }
    }  
}
[data-layout="modern"] {
    .header {
        background-color: variables.$white;
        border-color: rgba(variables.$white, 0.8);
        .bar-icon {
            span {
                background-color: variables.$white;
            }
        }
        .input-group {
            @include mixins.respond-below(custom1199) {
                width: 200px;
            }
        }
        .header-left {
            .logo-white {
                display: none;
            }
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$gray-500;
                    &:hover, &:active, &.active {
                        background-color: variables.$primary-100;
                        border-color: variables.$primary-100;
                        color: variables.$gray-900 !important;
                    }
                }
            }
        }
    }
    .sidebar {
        display: block;
        .sidebar-logo {
            display: none;
        }
        .slimScrollDiv {
            top: 0;
            height: calc(100% - 150px) !important;            
        }
        .sidebar-inner {
            height: 100% !important;
        }
        .sidebar-menu {
            margin-top: 0;
        }
        .modern-profile {
            display: block;
        }
    }
    .page-wrapper {
        &::before {
            content: "";
            height: 168px;
            background: variables.$white;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        &::after {
            content: none;
            height: 168px;
            background: url('../img/bg/modern-bg.png');
            background-repeat: no-repeat;
            width: 60%;
            position: absolute;
            top: 0;
            right: 0;
            z-index: -1;
        }
    }
    .mini-sidebar {
        .modern-profile {
            .user-profile {
                padding: 0 !important;
                margin-bottom: 0 !important;
                background: transparent !important;
                border-color: transparent !important;
                .avatar {
                    width: 32px;
                    height: 32px;
                }
            }
            h6, p, .sidebar-nav {
                display: none;
            }
        }
        .slimScrollDiv {
            height: calc(100% - 70px) !important;
        }
        &.expand-menu {            
            .modern-profile {
                .user-profile {
                    padding: 16px !important;
                    margin-bottom: 24px !important;
                    background: variables.$light !important;
                    .avatar {
                        width: 40px;
                        height: 40px;
                    }
                }
                h6, p, .sidebar-nav {
                    display: block;
                }
            }
            .slimScrollDiv {
                height: calc(100% - 220px) !important;
            }
        }
    }
}
[data-layout="horizontal-overlay"] {   
    #horizontal-menu {
        display: block;
    }
    .header {
        left: 0;
        background-color: variables.$white;
        border-color: color.adjust(variables.$white, $lightness: 10%);
        .main-header {
            max-width: 1320px;
            margin: 0 auto;
            @include mixins.respond-below(custom1399) {
                max-width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                max-width: 950px;
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
            }
            .user-menu {
                padding-right: 0;
            }
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$gray-500;
                    &:hover {
                        background: variables.$primary-100;
                        color: variables.$gray-900;
                    }
                }
            }
        }
        .header-left {
            display: block;
            border: 0;
            width: auto;
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }      
    .mode-toggle {
        color: variables.$gray-700;
    }
    .sidebar-horizontal {
        &.sidebar {
            background-color: variables.$white;
            border-bottom: 1px solid color.adjust(variables.$white, $lightness: 10%);
            &::before {
                content: none;
                height: 100%;
                background: url('../img/bg/overlay-bg.png');
                background-repeat: no-repeat;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
            .sidebar-menu {
                .nav-menu {
                    > li {     
                        &.submenu {
                            & > a {
                                color: variables.$gray-900;
                                &.active, &:hover,  &.subdrop {
                                    background-color: variables.$primary-100;
                                    color: variables.$gray-900;
                                    .menu-arrow {
                                        &::before {
                                            border-color: variables.$gray-900;
                                        }
                                    }
                                }
                                .menu-arrow {
                                    &::before {
                                        border-color: variables.$gray-900;;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .main-wrapper {
        max-width: 1320px;
        margin: 0 auto;
        @include mixins.respond-below(custom1399) {
            max-width: 1170px;
        }
        @include mixins.respond-below(custom1199) {
            max-width: 950px;
        }
        @include mixins.respond-below(custom991) {
            max-width: 100%;
        }
        &::before {
            content: "";
            height: 168px;
            background: variables.$white;
            width: 100%;
            position: absolute;
            top: 96px;
            left: 0;
            z-index: -1;
            @include mixins.respond-below(custom991) {
                top: 50px;
                height: 100px;
            }
        }
        &::after {
            content: "";
            height: 168px;
            background-repeat: no-repeat;
            width: 100%;
            position: absolute;
            top: 96px;
            left: 0;
            z-index: -1;
            @include mixins.respond-below(custom991) {
                top: 50px;
                height: 100px;
            }
        }
    }
    .page-breadcrumb {
        h2 {
            color: variables.$white;
        }
    }
}
[data-layout="horizontal-box"] {
    #horizontal-menu {
        display: block;
    }
    .main-wrapper {
        max-width: 1320px;
        margin: auto;
        @include mixins.respond-below(custom1399) {
            max-width: 1170px;
        }
        @include mixins.respond-below(custom1199) {
            max-width: 950px;
        }
        @include mixins.respond-below(custom991) {
            max-width: 100%;
        }
        .header {
            max-width: 1320px;
            margin: auto;
            @include mixins.respond-below(custom1399) {
                max-width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                max-width: 950px;
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
            }
        }
    }
    .header {
        left: 0;
        padding: 0 16px;
        .main-header {
            max-width: 1320px;
            margin: 0 auto;
            @include mixins.respond-below(custom1399) {
                max-width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                max-width: 950px;
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
            }
            .user-menu {
                padding-right: 0;
            }
        }
        .header-left {
            display: block;
            .logo-white {
                display: block;
            }
        }
    }     
    .sidebar {
        &.sidebar-horizontal {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 16px !important;
            left: auto;
            @include mixins.respond-below(custom1399) {
                max-width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                max-width: 950px;
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
            }
            .sidebar-menu {
                .nav-menu {
                    > li {
                        &.submenu {
                            & > a {
                                padding: 8px 30px 8px 8px;
                            }
                        }
                    }
                }
            }
        }
    }
}

[data-layout="horizontal-fullwidth"] {     
    #horizontal-menu {
        display: block;
    }
    .header {
        padding: 0 24px;
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                max-width: 100%;
                padding: 0 24px !important;
                .nav-menu {
                    > li {
                        &.submenu {
                            & > a {
                                padding: 8px 24px 8px 8px;
                                @include mixins.respond-above(custom1399) {
                                    padding: 8px 30px 8px 8px;
                                }
                                @include mixins.respond-above(custom1199) {
                                    padding: 8px 28px 8px 8px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
[data-layout="without-header"] { 
    .header {
        @include mixins.respond-above(custom991) {
           width: 0;
           .user-menu {
            display: none;
           }
           #toggle_btn {
            display: none;
           }
        }
    }
    .sidebar.sidebar-horizontal {
        display: none;
    }
    .sidebar.two-col-sidebar {
        display: none;
    }
    .page-wrapper {
        padding: 0;
        .head-icons{
            display: none;
        }
    }
    .modern-profile {
        .user-profile {
            display: none;
        }
    }
    .modern-profile, .sidebar-header {
        display: block;
    }
    .sidebar {
        display: block;
        .sidebar-logo {
            position: relative;
        }
    }
    .slimScrollDiv {
        top: 0;
        height: calc(100% - 150px) !important;
        .sidebar-inner {
            height: 100% !important;
        }
    }
    .mini-sidebar {
        .sidebar-nav {
            display: none;
        }
        .sidebar-header {
            .input-group, .menu-item  {
                display: none !important;
            }
        }
        .sidebar-profile {
            padding: 0 !important;
            background: transparent !important;
            border-color: transparent !important;;
            .sidebar-profile-info {
                display: none;
            }
        }
        .slimScrollDiv {
            height: calc(100% - 110px) !important;
            .sidebar-inner {
                height: 100% !important;
            }
        }
        &.expand-menu {
            .sidebar-nav {
                display: block;
            }
            .sidebar-header {
                .input-group, .menu-item  {
                    display: flex !important;
                }
            }
            .sidebar-profile {
                padding: 8px !important;
                background: variables.$light !important;
                border-color: variables.$light !important;;
                .sidebar-profile-info {
                    display: block;
                }
            }
        }
    }
}

[data-layout="horizontal-single"] { 
    #horizontal-menu {
        display: none;
    }
    #horizontal-single {
        position: relative;
        top: -12px;
        width: auto !important;
        box-shadow: none;
        display: block;
    }
    #header-search {
        display: none !important;
    }
    .header {
        padding: 0 24px;
        @include mixins.respond-below(custom1199) {
            padding: 0 16px;
        }
    }
    .menu-horizontal {
        .header {
            .main-header .user-menu {
                @include mixins.respond-below(custom1199) {
                    padding-left: 16px;
                }
            }
        }
        .page-wrapper {
            padding-top: 50px;    
            max-width: 100%;
            margin: 0 24px;
        }
        .header-collapse{
            .header-user{
                display: block;
            }
        }
    }
    .footer {
        margin: 0 -24px;
    }
    .sidebar-horizontal.sidebar {
        .sidebar-menu {
            padding:  0 !important;
            height: 46px;
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: 100%;
            ul li.submenu > a {
                padding: 8px 21px 8px 8px;
                @include mixins.respond-above(custom1199) {
                    padding: 8px 30px 8px 8px;
                }
            }
            .nav-menu {
                & > li {
                    margin-right: 8px;     
                    @include mixins.respond-below(custom1199) {
                        margin-right: 1px;
                    }
                    a {
                        .menu-arrow {
                            @include mixins.respond-below(custom1199) {
                                right: 2px;
                            }                            
                        }
                    }
                }
            }
        }
    }
    .sidebar-menu {
        .nav-menu {
            & > li {
                margin-right: 8px;  
                &:last-child {
                    margin-right: 0;
                }
                &.submenu {
                    > ul {
                        max-height: 350px;
                        overflow-x: hidden;
                        overflow-y: auto;
                    }
                }
                @include mixins.respond-below(custom1399) {
                    margin-right: 2px;
                }
            }
        }
    }
}
[data-layout="transparent"],.data-layout-transparent { 
    body {
        background-color: variables.$primary-transparent;
    }
    .header {
        left: 0;
        border-bottom: 3px solid variables.$primary;
        .header-left {
            display: block;
            padding-left: 24px;
        }
    }
    .sidebar {
        top: 50px;
        background-color: variables.$primary-transparent;
        .sidebar-logo {
            display: none;
            .logo {
                display: none;
            }
        }
        .slimScrollDiv {
            top: 0;
        }
    }
    .mini-sidebar {
        &.expand-menu {
            @include mixins.respond-above(custom991) {
                .header {
                    left: 0;
                }
            }
        }
    }
    .page-wrapper{
        .head-icons{
            display: none;
        }
    }
}
body.data-layout-transparent {
    background-color: variables.$primary-transparent;
    .header {
        left: 0;
        border-bottom: 3px solid variables.$primary;
        .header-left {
            display: block;
            padding-left: 24px;
        }
    }
    .sidebar {
        top: 50px;
        background-color: variables.$primary-transparent;
        .sidebar-logo {
            display: none;
            .logo {
                display: none;
            }
        }
        .slimScrollDiv {
            top: 0;
        }
    }
    .mini-sidebar {
        &.expand-menu {
            @include mixins.respond-above(custom991) {
                .header {
                    left: 0;
                }
            }
        }
    }
    .page-wrapper{
        .head-icons{
            display: none;
        }
    }
}
[data-layout="horizontal-sidemenu"] { 
    .header {
        left: 0;
        background-color: variables.$gray-900;
        border-color: variables.$gray-800;
        .main-header {
            max-width: 1320px;
            margin: 0 auto;
            @include mixins.respond-below(custom1399) {
                max-width: 1170px;
            }
            @include mixins.respond-below(custom1199) {
                max-width: 950px;
            }
            @include mixins.respond-below(custom991) {
                max-width: 100%;
            }
            .user-menu {
                padding-right: 0;
            }
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover {
                        background: variables.$gray-600;
                    }
                }
            }
        }
        .header-left {
            display: block;
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }   
    .main-wrapper {
        margin: 0 auto;
        @include mixins.respond-above(custom1399) {
            max-width: 1320px;
        }
        @include mixins.respond-above(custom991) {
            max-width: 95%;
        }
        &::before {
            content: "";
            height: 168px;
            background: variables.$gray-900;
            width: 100%;
            position: absolute;
            top: 50px;
            left: 0;
            z-index: -1;
            @include mixins.respond-below(custom991) {
                top: 50px;
                height: 100px;
            }
        }
        &::after {
            content: "";
            height: 168px;
            background-repeat: no-repeat;
            width: 100%;
            position: absolute;
            top: 50px;
            left: 0;
            z-index: -1;
            @include mixins.respond-below(custom991) {
                top: 50px;
                height: 100px;
            }
        }
    }  
    .sidebar {
        top: 74px;
        left: unset;
        bottom: 24px;
        .slimScrollDiv {
            height: 100% !important;
            top: 0;
            .sidebar-inner {
                height: 100% !important;
            }
            .sidebar-menu {
                margin-top: 0;
                padding-bottom: 0;
            }
        }
        .sidebar-menu {
            margin-top: 16px;
        }
        .sidebar-logo {
            display: none;
        }
        @include mixins.respond-below(custom991) {
            top: 50px;
            bottom: 0;
        }
    }
    .page-wrapper {
        @include mixins.respond-above(custom991) {
            padding: 74px 0 0;
        }
        .head-icons{
            display: none;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .header {
                left: 0;
            }
        }
    }
}
[data-sidebar="sidebarcolorone"]{
    .header .header-left {
        background: variables.$sidebar-color-1;
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
        }
    }
    .sidebar {
        background: variables.$sidebar-color-1;
        .logo-white {
            display: block;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$gray-600;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-900;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$gray-600;
                                }
                                span {
                                    color: variables.$gray-900;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$gray-600;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .sidebar-right {
                background: variables.$sidebar-color-1;
                border-color: variables.$sidebar-color-1;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
            }
        }
        .twocol-mini {
            background: variables.$sidebar-color-1;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}
[data-sidebar="sidebarcolortwo"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-2;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-2;
        border-color: variables.$sidebar-color-2;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                            &.active {
                                background: variables.$gray-600;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-2;
                border-color: variables.$sidebar-color-2;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcolorthree"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-3;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-3;
        border-color: variables.$sidebar-color-3;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-3;
                border-color: variables.$sidebar-color-3;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcolorfour"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-4;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-4;
        border-color: variables.$sidebar-color-4;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-4;
                border-color: variables.$sidebar-color-4;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcolorfive"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-5;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-5;
        border-color: variables.$sidebar-color-5;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-5;
                border-color: variables.$sidebar-color-5;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcolorsix"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-6;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-6;
        border-color: variables.$sidebar-color-6;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-6;
                border-color: variables.$sidebar-color-6;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcolorseven"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-7;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-7;
        border-color: variables.$sidebar-color-7;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-7;
                border-color: variables.$sidebar-color-7;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcoloreight"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-8;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-8;
        border-color: variables.$sidebar-color-8;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-8;
                border-color: variables.$sidebar-color-8;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcolornine"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-9;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-9;
        border-color: variables.$sidebar-color-9;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-9;
                border-color: variables.$sidebar-color-9;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcolorten"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-10;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-10;
        border-color: variables.$sidebar-color-10;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-10;
                border-color: variables.$sidebar-color-10;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcoloreleven"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-11;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-11;
        border-color: variables.$sidebar-color-11;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-11;
                border-color: variables.$sidebar-color-11;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcolortwelve"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-12;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-12;
        border-color: variables.$sidebar-color-12;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-12;
                border-color: variables.$sidebar-color-12;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcolorthirteen"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-13;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-13;
        border-color: variables.$sidebar-color-13;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-13;
                border-color: variables.$sidebar-color-13;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}
[data-sidebar="sidebarcolorfourteen"]{
    .sidebar .sidebar-logo {
        border-color: #E6EAED1A;
    }
    .header .header-left {
        background: variables.$sidebar-color-14;
        .logo-normal {
            display: none;
        }
        .logo-white {
            display: block !important;
        }
    }
    .menu-horizontal {
        .header .header-left {
            background: variables.$white;
            .logo-white {
                display: none !important;
            }
            .logo-normal {
                display: block;
            }
        }
    }
    .sidebar {
        background: variables.$sidebar-color-14;
        border-color: variables.$sidebar-color-14;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    .submenu {
                        > a {
                            i {
                                color: variables.$light;
                            }
                            &.subdrop {
                                background: #FFFFFF1A;
                            }
                            &.active {
                                background: #FFFFFF1A;
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$light;
                                }
                                span {
                                    color: variables.$white;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$light;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
            }
            .sidebar-right {
                background: variables.$sidebar-color-14;
                border-color: variables.$sidebar-color-14;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                h6, p {
                    color: variables.$white;
                }
                .bg-light {
                    background-color: variables.$gray-600 !important;
                    border-color: variables.$gray-600 !important;
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-600;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-600;
                            &:hover {
                                color: variables.$white !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-600;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-600;
                                    color: variables.$white !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-600;
                                     color: variables.$white !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: variables.$dark-green;
            border-color: variables.$gray-800;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .sidebar .sidebar-menu .submenu-open .submenu ul li a{
        color: variables.$light;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul {
        border-color: #E6EAED1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu .menu-arrow {
        background: #FFFFFF33;
    }
    .header .header-left {
        border-color: #E6EAED1A;
    }
    .mini-sidebar {
        .header .header-left .logo-white {
            display: none !important;
        }
        &.expand-menu {
            .header .header-left .logo-white {
                display: flex !important;
            }
        }
    }
}

[data-sidebar="all"]{
    $primarybg: rgb(var(--sidebar--rgb-picr));
    .sidebar {
        background: $primarybg;
        border-color: $primarybg;
        .logo-white {
            display: block !important;
        }
        .logo {
            display: none;
        }
        .sidebar-menu {
            > ul {
                > li {
                    > ul {
                        > li {
                            > a {
                                &:hover {
                                    background: variables.$gray-100;
                                    span, i {
                                        color: variables.$gray-700;
                                    }
                                }
                            }
                        }
                    }
                    .submenu {
                        > a {
                            i {
                                color: variables.$gray-200;
                            }
                            &.subdrop {
                                background: variables.$gray-100;
                                span, i {
                                    color: variables.$gray-700;
                                }
                                .menu-arrow {
                                    &::before {
                                        border-color: variables.$gray-700;
                                    }
                                }
                            }
                            &:hover, &.active {
                                background: variables.$gray-100;
                                span, i {
                                    color: variables.$gray-700;
                                }
                                .menu-arrow {
                                    &::before {
                                        border-color: variables.$gray-700;
                                    }
                                }
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                color: variables.$primary;
                            }
                        }
                    }
                    ul {
                        li {
                            &.active {
                                a {
                                     i {
                                        color: variables.$primary;
                                    }
                                }
                            }
                            a {
                                color: variables.$gray-300;
                                &:hover, &.active{
                                    color:variables.$primary;
                                }
                                i {
                                    color: variables.$gray-200;
                                }
                                span {
                                    color: variables.$gray-300;
                                }
                            }
                            &.active {
                                a {
                                    background: variables.$gray-700;
                                    i {
                                        color: variables.$gray-200;
                                    }
                                }
                            }
                            .submenu {
                                > ul {
                                    li {
                                        a {
                                            color: variables.$gray-300;
                                            &.active, &:hover {
                                                color: variables.$primary;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                li {                    
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active, &:hover {
                                background: transparent;
                             }
                        }
                    }
                }
            }
            .menu-arrow {
                &::before {
                    border-color: variables.$gray-200;
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .nav-link { 
                color: variables.$white;
                &.active, &:hover {
                    background: variables.$gray-100;
                    color: variables.$gray-700;
                }
            }
            .sidebar-right {
                background: $primarybg;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                }
                .sidebar-scroll {
                    & > h6 {
                        color: variables.$white;
                    }
                }
                ul {
                    li {
                        a {
                            color: variables.$white;
                            &.subdrop {
                                background: variables.$gray-100;
                                color: variables.$gray-700;
                            }
                        }
                        &.subdrop {
                            background: variables.$gray-100;
                            &:hover {
                                color: variables.$gray-700 !important;
                            }
                        }
                        &.active{
                            a {
                                background: variables.$gray-100;
                                color: variables.$gray-700;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$gray-100;
                                    color: variables.$gray-700 !important;
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                    & > ul {                
                         & > li {
                             > a {
                                 &:hover {
                                     background: variables.$gray-100;
                                     color: variables.$gray-700 !important;
                                 }
                             }
                         }
                     }
     
                 }
            }
        }
        .twocol-mini {
            background-color: $primarybg;
            border-color: variables.$gray-400;
        }
    }
    .expand-menu {
        &.mini-sidebar {
            .sidebar-twocol {
                &.sidebar {
                    .logo {
                        @include mixins.respond-above(custom991) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .sidebar-stacked {
        .stacked-mini {
            background-color: $primarybg;
            border-color: variables.$gray-400;
        }
        .btn-menubar {
            color: variables.$white;
            border-color: $primarybg;
            &:hover, &.active {
                background: variables.$gray-100;
                color: variables.$gray-700;
            }
        }
        .sidebar-right {
            background: $primarybg;
            h6 {
                color: variables.$white;
            }
            .sidebar-profile {
                h6 {
                    color: $primarybg;
                }
            }
            a {
                color: variables.$white;
                &:hover {
                    color: $primarybg;
                }
            }
        }
        .nav-link {
            color: variables.$white;
            background: rgba(var(--sidebar--rgb-picr), 0.7);
            border-color: rgba(var(--sidebar--rgb-picr), 0.7);
            p, i {
                color: variables.$white;
            }
            &:hover, &.active {
                color: variables.$white;
                background: rgba(var(--sidebar--rgb-picr), 0.4);
                border-color: rgba(var(--sidebar--rgb-picr), 0.4);
                p {
                    color: variables.$white;
                }
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolorone"],
[data-layout="mini"][data-topbar="topbarcolorone"],
[data-layout="horizontal"][data-topbar="topbarcolorone"],
[data-layout="detached"][data-topbar="topbarcolorone"],
[data-layout="twocolumn"][data-topbar="topbarcolorone"] {
    .header {
        background: variables.$sidebar-color-1;
        border-bottom-color: variables.$sidebar-color-1;
        .bg-white {
            background: transparent  !important;
        }
        .header-left {
            background: variables.$sidebar-color-1;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover, &.active {
                        color: variables.$gray-700;
                    }
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-1;
                .nav-menu {
                    & > li.submenu {
                        & > a {
                            color: variables.$white;
                            .menu-arrow {
                                &::before {
                                    border-color: variables.$white;
                                }
                            }
                            &:hover, &.active, &.subdrop {
                                color: variables.$gray-700;
                                .menu-arrow {
                                    &::before {
                                        border-color: variables.$gray-700;
                                    }
                                }
                            }
                        }
                    }
                } 
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolortwo"],
[data-layout="mini"][data-topbar="topbarcolortwo"],
[data-layout="horizontal"][data-topbar="topbarcolortwo"],
[data-layout="detached"][data-topbar="topbarcolortwo"],
[data-layout="twocolumn"][data-topbar="topbarcolortwo"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-2;
        border-bottom-color: variables.$sidebar-color-2;
        .bg-white {
            background: transparent  !important;
        }
        .header-left {
            background: variables.$sidebar-color-2;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$gray-900;
                    &:hover, &.active {
                        background: variables.$white;
                    }
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-2;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolorthree"],
[data-layout="mini"][data-topbar="topbarcolorthree"],
[data-layout="horizontal"][data-topbar="topbarcolorthree"],
[data-layout="detached"][data-topbar="topbarcolorthree"],
[data-layout="twocolumn"][data-topbar="topbarcolorthree"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .header {
        background: variables.$sidebar-color-3;
        border-bottom-color: variables.$sidebar-color-3;
        .bg-white {
            background: transparent  !important;
        }
        .header-left {
            background: variables.$sidebar-color-3;
            border-color: variables.$gray-100;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$gray-900;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-3;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolorfour"],
[data-layout="mini"][data-topbar="topbarcolorfour"],
[data-layout="horizontal"][data-topbar="topbarcolorfour"],
[data-layout="detached"][data-topbar="topbarcolorfour"],
[data-layout="twocolumn"][data-topbar="topbarcolorfour"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-4;
        border-bottom-color: variables.$sidebar-color-4;
        .bg-white {
            background: transparent  !important;
        }
        .header-left {
            background: variables.$sidebar-color-4;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$gray-900;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-4;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolorfive"],
[data-layout="mini"][data-topbar="topbarcolorfive"],
[data-layout="horizontal"][data-topbar="topbarcolorfive"],
[data-layout="detached"][data-topbar="topbarcolorfive"],
[data-layout="twocolumn"][data-topbar="topbarcolorfive"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-5;
        border-bottom-color: variables.$sidebar-color-5;
        .bg-white {
            background: transparent  !important;
        }
        .header-left {
            background: variables.$sidebar-color-5;
            border-color: variables.$sidebar-color-5;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-5;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolorsix"],
[data-layout="mini"][data-topbar="topbarcolorsix"],
[data-layout="horizontal"][data-topbar="topbarcolorsix"],
[data-layout="detached"][data-topbar="topbarcolorsix"],
[data-layout="twocolumn"][data-topbar="topbarcolorsix"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-6;
        border-bottom-color: variables.$sidebar-color-6;
        .bg-white {
            background: transparent  !important;
        }
        .header-left {
            background: variables.$sidebar-color-6;
            border-color: variables.$sidebar-color-6;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-6;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolorseven"],
[data-layout="mini"][data-topbar="topbarcolorseven"],
[data-layout="horizontal"][data-topbar="topbarcolorseven"],
[data-layout="detached"][data-topbar="topbarcolorseven"],
[data-layout="twocolumn"][data-topbar="topbarcolorseven"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-7;
        border-bottom-color: variables.$sidebar-color-7;
        .bg-white {
            background: transparent  !important;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-7;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcoloreight"],
[data-layout="mini"][data-topbar="topbarcoloreight"],
[data-layout="horizontal"][data-topbar="topbarcoloreight"],
[data-layout="detached"][data-topbar="topbarcoloreight"],
[data-layout="twocolumn"][data-topbar="topbarcoloreight"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-8;
        border-bottom-color: variables.$sidebar-color-8;
        .bg-white {
            background: transparent  !important;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-8;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolornine"],
[data-layout="mini"][data-topbar="topbarcolornine"],
[data-layout="horizontal"][data-topbar="topbarcolornine"],
[data-layout="detached"][data-topbar="topbarcolornine"],
[data-layout="twocolumn"][data-topbar="topbarcolornine"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-9;
        border-bottom-color: variables.$sidebar-color-9;
        .bg-white {
            background: transparent  !important;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-9;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolorten"],
[data-layout="mini"][data-topbar="topbarcolorten"],
[data-layout="horizontal"][data-topbar="topbarcolorten"],
[data-layout="detached"][data-topbar="topbarcolorten"],
[data-layout="twocolumn"][data-topbar="topbarcolorten"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-10;
        border-bottom-color: variables.$sidebar-color-10;
        .bg-white {
            background: transparent  !important;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-10;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcoloreleven"],
[data-layout="mini"][data-topbar="topbarcoloreleven"],
[data-layout="horizontal"][data-topbar="topbarcoloreleven"],
[data-layout="detached"][data-topbar="topbarcoloreleven"],
[data-layout="twocolumn"][data-topbar="topbarcoloreleven"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-11;
        border-bottom-color: variables.$sidebar-color-11;
        .bg-white {
            background: transparent  !important;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-11;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolortwelve"],
[data-layout="mini"][data-topbar="topbarcolortwelve"],
[data-layout="horizontal"][data-topbar="topbarcolortwelve"],
[data-layout="detached"][data-topbar="topbarcolortwelve"],
[data-layout="twocolumn"][data-topbar="topbarcolortwelve"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-12;
        border-bottom-color: variables.$sidebar-color-12;
        .bg-white {
            background: transparent  !important;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-12;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolorthirteen"],
[data-layout="mini"][data-topbar="topbarcolorthirteen"],
[data-layout="horizontal"][data-topbar="topbarcolorthirteen"],
[data-layout="detached"][data-topbar="topbarcolorthirteen"],
[data-layout="twocolumn"][data-topbar="topbarcolorthirteen"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-13;
        border-bottom-color: variables.$sidebar-color-13;
        .bg-white {
            background: transparent  !important;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-13;
            }
        }
    }
}
[data-layout="default"][data-topbar="topbarcolorfourteen"],
[data-layout="mini"][data-topbar="topbarcolorfourteen"],
[data-layout="horizontal"][data-topbar="topbarcolorfourteen"],
[data-layout="detached"][data-topbar="topbarcolorfourteen"],
[data-layout="twocolumn"][data-topbar="topbarcolorfourteen"]{
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: variables.$sidebar-color-14;
        border-bottom-color: variables.$sidebar-color-14;
        .bg-white {
            background: transparent  !important;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: variables.$sidebar-color-14;
            }
        }
    }
}

[data-layout="default"][data-topbar="all"],
[data-layout="mini"][data-topbar="all"],
[data-layout="horizontal"][data-topbar="all"],
[data-layout="horizontal-single"][data-topbar="all"],
[data-layout="detached"][data-topbar="all"],
[data-layout="twocolumn"][data-topbar="all"],
[data-layout="stacked"][data-topbar="all"],
[data-layout="transparent"][data-topbar="all"] {
    $primary: rgb(var(--topbar--rgb-picr));
    .user-menu.nav > li > a.select-store .user-info .user-name {
        color: variables.$white;
    }
    .user-menu .nav-item-box > a {
        background: #FFFFFF1A;
        color: variables.$white;
    }
    .user-menu.nav > li > a.select-store {
        border-color: #FFFFFF1A;
    }
    .searchinputs input {
        background: #FFFFFF1A;
        color: variables.$white;
        border-color: #FFFFFF1A;
        &::placeholder {
            color: variables.$light;
        }
    }
    .input-group-text {
        background: #FFFFFF1A;
        border-color: #FFFFFF1A;
    }
    .header {
        background: $primary;
        border-bottom-color: $primary;
        .bg-white {
            background: transparent  !important;
        }
        .header-left {
            background: $primary;
            border-color: $primary;
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover, &.active {
                        color: variables.$gray-700;
                    }
                }
            }
        }
        .sidebar-horizontal.sidebar {
            .sidebar-menu {
                background: $primary;
                .nav-menu {
                    & > li.submenu {
                        & > a {
                            color: variables.$white;
                            .menu-arrow {
                                &::before {
                                    border-color: variables.$white;
                                }
                            }
                            &:hover, &.active, &.subdrop {
                                color: variables.$gray-700;
                                .menu-arrow {
                                    &::before {
                                        border-color: variables.$gray-700;
                                    }
                                }
                            }
                        }
                    }
                } 
            }
        }
    }
    .menu-horizontal {
        .header {
            .header-left {
                .logo {
                    display: none;
                }
                .logo-white {
                    display: block;
                }
            }
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="dark"],
[data-layout="horizontal-sidemenu"][data-topbarcolor="dark"]  {   
    .header {
        left: 0;
        background-color: variables.$gray-900;
        border-color: variables.$gray-800;
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover {
                        background: variables.$gray-600;
                    }
                }
            }
        }
        .header-left {
            display: block;
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }      
    .mode-toggle {
        color: variables.$white;
    }
    .sidebar-horizontal {
        &.sidebar {
            background-color: variables.$gray-900;
            border-bottom: 1px solid variables.$gray-800;
            .sidebar-menu {
                .nav-menu {
                    > li {     
                        &.submenu {
                            & > a {
                                color: variables.$white;
                                &.active, &:hover {
                                    background: variables.$gray-600;
                                }
                                .menu-arrow {
                                    &::before {
                                        border-right: 2px solid variables.$white;
                                        border-bottom: 2px solid variables.$white;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .main-wrapper {
        &::before {
            background: variables.$gray-900;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="primary"] {
    .header {
        left: 0;
        background-color: variables.$sidebar-color-1;
        border-color: variables.$gray-100;
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover {
                        background: variables.$primary-600;
                    }
                }
            }
        }
        .header-left {
            display: block;
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }      
    .mode-toggle {
        color: variables.$white;
    }
    .sidebar-horizontal {
        &.sidebar {
            background-color: variables.$sidebar-color-1;
            border-bottom: 1px solid variables.$gray-100;
            .sidebar-menu {
                .nav-menu {
                    > li {     
                        &.submenu {
                            & > a {
                                &.active, &:hover {
                                    background: variables.$gray-300;
                                }
                                .menu-arrow {
                                    &::before {
                                        border-right: 2px solid variables.$white;
                                        border-bottom: 2px solid variables.$white;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .main-wrapper {
        &::before {
            content: "";
            background: variables.$sidebar-color-1
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="blackpearl"] {
    .header {
        left: 0;
        background-color: variables.$sidebar-color-3;
        border-color: variables.$gray-800;
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover {
                        background: variables.$gray-600;
                    }
                }
            }
        }
        .header-left {
            display: block;
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }      
    .mode-toggle {
        color: variables.$white;
    }
    .sidebar-horizontal {
        &.sidebar {
            background-color: variables.$sidebar-color-3;
            border-bottom: 1px solid variables.$gray-800;
            .sidebar-menu {
                .nav-menu {
                    > li {     
                        &.submenu {
                            & > a {
                                color: variables.$white;
                                &.active, &:hover,  &.subdrop {
                                    background: variables.$gray-600;
                                }
                                .menu-arrow {
                                    &::before {
                                        border-right: 2px solid variables.$white;
                                        border-bottom: 2px solid variables.$white;
                                    }
                                }
                            }
                        }
                    }
                    .menu-arrow {
                        &::before {
                            border-color: variables.$gray-700;
                        }
                    }
                }
            }
        }
    }
    .main-wrapper {
        &::before {
            content: "";
            background: variables.$sidebar-color-3;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="maroon"] {
    .header {
        left: 0;
        background-color: variables.$sidebar-color-5;
        border-color: color.adjust(variables.$sidebar-color-5, $lightness: 10%);
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover {
                        background: variables.$primary-100;
                        color: variables.$gray-700;
                    }
                }
            }
        }
        .header-left {
            display: block;
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }      
    .mode-toggle {
        color: variables.$white;
    }
    .sidebar-horizontal {
        &.sidebar {
            background-color: variables.$sidebar-color-5;
            border-bottom: 1px solid color.adjust(variables.$sidebar-color-5, $lightness: 10%);
            .sidebar-menu {
                .nav-menu {
                    > li {     
                        &.submenu {
                            & > a {
                                color: variables.$white;
                                &.active, &:hover,  &.subdrop {
                                    background-color: variables.$primary-100;
                                    color: variables.$gray-900;
                                    .menu-arrow {
                                        &::before {
                                            border-color: variables.$gray-900;
                                        }
                                    }
                                }
                                .menu-arrow {
                                    &::before {
                                        border-right: 2px solid variables.$white;
                                        border-bottom: 2px solid variables.$white;
                                    }
                                }
                            }
                        }
                    }
                    .menu-arrow {
                        &::before {
                            border-color: variables.$gray-700;
                        }
                    }
                }
            }
        }
    }
    .main-wrapper {
        &::before {
            content: "";
            background: variables.$sidebar-color-5;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="white"],
[data-layout="horizontal-sidemenu"][data-topbarcolor="white"] {
    .header {
        left: 0;
        background-color: variables.$white;
        border-color: color.adjust(variables.$white, $lightness: 10%);
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$gray-500;
                    &:hover {
                        background: variables.$primary-100;
                        color: variables.$gray-900;
                    }
                }
            }
        }
        .header-left {
            display: block;
            .logo {
                display: block;
            }
            .logo-white {
                display: none;
            }
        }
    }      
    .mode-toggle {
        color: variables.$gray-700;
    }
    .sidebar-horizontal {
        &.sidebar {
            background-color: variables.$white;
            border-bottom: 1px solid color.adjust(variables.$white, $lightness: 10%);
            .sidebar-menu {
                .nav-menu {
                    > li {     
                        &.submenu {
                            & > a {
                                color: variables.$gray-900;
                                &.active, &:hover,  &.subdrop {
                                    background-color: variables.$primary-100;
                                    color: variables.$gray-900;
                                    .menu-arrow {
                                        &::before {
                                            border-color: variables.$gray-900;
                                        }
                                    }
                                }
                                .menu-arrow {
                                    &::before {
                                        border-color: variables.$gray-900;;
                                    }
                                }
                            }
                        }
                    }
                    .menu-arrow {
                        &::before {
                            border-color: variables.$gray-900;
                        }
                    }
                }
            }
        }
    }
    .main-wrapper {
        &::before {
            content: "";
            background: variables.$white;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="bluegem"]{
    .header {
        left: 0;
        background-color: variables.$sidebar-color-4;
        border-color: color.adjust(variables.$sidebar-color-4, $lightness: 10%);
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover {
                        background: variables.$primary-100;
                        color: variables.$gray-700;
                    }
                }
            }
        }
        .header-left {
            display: block;
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }      
    .mode-toggle {
        color: variables.$white;
    }
    .sidebar-horizontal {
        &.sidebar {
            background-color: variables.$sidebar-color-4;
            border-bottom: 1px solid color.adjust(variables.$sidebar-color-4, $lightness: 10%);
            .sidebar-menu {
                .nav-menu {
                    > li {     
                        &.submenu {
                            & > a {
                                color: variables.$white;
                                &.active, &:hover,  &.subdrop {
                                    background-color: variables.$primary-100;
                                    color: variables.$gray-900;
                                    .menu-arrow {
                                        &::before {
                                            border-color: variables.$gray-900;
                                        }
                                    }
                                }
                                .menu-arrow {
                                    &::before {
                                        border-right: 2px solid variables.$white;
                                        border-bottom: 2px solid variables.$white;
                                    }
                                }
                            }
                        }
                    }
                    .menu-arrow {
                        &::before {
                            border-color: variables.$gray-700;
                        }
                    }
                }
            }
        }
    }
    .main-wrapper {
        &::before {
            content: "";
            background: variables.$sidebar-color-4;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="all"],
[data-layout="horizontal-sidemenu"][data-topbarcolor="all"]  {
    $primary: rgb(var(--topbarcolor--rgb-picr));   
    .header {
        left: 0;
        background-color: $primary;
        border-color: $primary;
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover {
                        background: variables.$primary-100;
                        color: variables.$gray-700;
                    }
                }
            }
        }
        .header-left {
            display: block;
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }      
    .mode-toggle {
        color: variables.$white;
    }
    .sidebar-horizontal {
        &.sidebar {
            background-color: $primary;
            border-bottom: 1px solid $primary;
            .sidebar-menu {
                .nav-menu {
                    > li {     
                        &.submenu {
                            & > a {
                                color: variables.$white;
                                &.active, &:hover,  &.subdrop {
                                    background-color: variables.$primary-100;
                                    color: variables.$gray-900;
                                    .menu-arrow {
                                        &::before {
                                            border-color: variables.$gray-900;
                                        }
                                    }
                                }
                                .menu-arrow {
                                    &::before {
                                        border-right: 2px solid variables.$white;
                                        border-bottom: 2px solid variables.$white;
                                    }
                                }
                            }
                        }
                    }
                    .menu-arrow {
                        &::before {
                            border-color: variables.$gray-700;
                        }
                    }
                }
            }
        }
    }
    .main-wrapper {
        &::before {
            content: "";
            background: $primary;
        }
    }
}
[data-sidebarbg="sidebarbg1"]{
    #sidebar {
        background-image: url(../img/theme/bg-01.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        background-color: transparent;
        &::before  {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}
[data-sidebarbg="sidebarbg6"]{
    #sidebar {
        background-image: url(../img/theme/bg-06.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        background-color: transparent;
        &::before  {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="firefly"]{
    .header {
        left: 0;
        background-color: variables.$sidebar-color-7;
        border-color: variables.$gray-100;
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover {
                        background: variables.$gray-600;
                    }
                }
            }
        }
        .header-left {
            display: block;
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }      
    .mode-toggle {
        color: variables.$white;
    }
    .sidebar-horizontal {
        &.sidebar {
            background-color: variables.$sidebar-color-7;
            border-bottom: 1px solid variables.$gray-100;
            .sidebar-menu {
                .nav-menu {
                    > li {     
                        &.submenu {
                            & > a {
                                color: variables.$white;
                                &.active, &:hover,  &.subdrop {
                                    background: variables.$gray-600;
                                }
                                .menu-arrow {
                                    &::before {
                                        border-right: 2px solid variables.$white;
                                        border-bottom: 2px solid variables.$white;
                                    }
                                }
                            }
                        }
                    }
                    .menu-arrow {
                        &::before {
                            border-color: variables.$gray-100;
                        }
                    }
                }
            }
        }
    }
    .main-wrapper {
        &::before {
            content: "";
            background: variables.$sidebar-color-7;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="firefly2"]{
    .header {
        left: 0;
        background-color: variables.$sidebar-color-2;
        border-color: variables.$darkmode-gray-100;
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover {
                        background: variables.$gray-600;
                    }
                }
            }
        }
        .header-left {
            display: block;
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }      
    .mode-toggle {
        color: variables.$white;
    }
    .sidebar-horizontal {
        &.sidebar {
            background-color: variables.$sidebar-color-2;
            border-bottom: 1px solid variables.$darkmode-gray-100;
            .sidebar-menu {
                .nav-menu {
                    > li {     
                        &.submenu {
                            & > a {
                                color: variables.$white;
                                &.active, &:hover,  &.subdrop {
                                    background: variables.$gray-600;
                                }
                                .menu-arrow {
                                    &::before {
                                        border-right: 2px solid variables.$white;
                                        border-bottom: 2px solid variables.$white;
                                    }
                                }
                            }
                        }
                    }
                    .menu-arrow {
                        &::before {
                            border-color: variables.$gray-100;
                        }
                    }
                }
            }
        }
    }
    .main-wrapper {
        &::before {
            content: "";
            background: variables.$sidebar-color-2;
        }
    }
}
[data-sidebarbg="sidebarbg1"]{
    #sidebar {
        background-image: url(../img/theme/bg-01.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        background-color: transparent;
        &::before  {
            content: "";
            background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;    
            z-index: -1;
            opacity: 0.9;
        }
    }
}
[data-sidebarbg="sidebarbg2"]{
    #sidebar {
        background-image: url(../img/theme/bg-02.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        background-color: transparent;
        &::before  {
            content: "";
            background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            opacity: 0.9;
        }
    }
}
[data-sidebarbg="sidebarbg3"]{
    #sidebar {
        background-image: url(../img/theme/bg-03.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        background-color: transparent;
        &::before  {
            content: "";
            background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            opacity: 0.5;
        }
    }
}
[data-sidebarbg="sidebarbg4"]{
    #sidebar {
        background-image: url(../img/theme/bg-04.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        background-color: transparent;
        &::before  {
            content: "";
            background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            opacity: 0.9;
        }
    }
}
[data-sidebarbg="sidebarbg5"]{
    #sidebar {
        background-image: url(../img/theme/bg-05.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        background-color: transparent;
        &::before  {
            content: "";
            background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            opacity: 0.9;
        }
    }
}
[data-sidebarbg="sidebarbg6"] {
    #sidebar {
        background-image: url(../img/theme/bg-06.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        background-color: transparent;
        &::before  {
            content: "";
            background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            opacity: 0.9;
        }
    }
}
[data-sidebar="light"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="light"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="light"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="light"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="light"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="light"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        // background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
       }
    }
}
[data-sidebar="sidebarcolorone"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolorone"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolorone"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolorone"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolorone"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolorone"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolortwo"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolortwo"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolortwo"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolortwo"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolortwo"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolortwo"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolorthree"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolorthree"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolorthree"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolorthree"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolorthree"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolorthree"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolorfour"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolorfour"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolorfour"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolorfour"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolorfour"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolorfour"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolorfive"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolorfive"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolorfive"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolorfive"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolorfive"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolorfive"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: rgba(variables.$sidebar-color-5, 0.85);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolorsix"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolorsix"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolorsix"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolorsix"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolorsix"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolorsix"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolorseven"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolorseven"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolorseven"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolorseven"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolorseven"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolorseven"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcoloreight"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcoloreight"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcoloreight"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcoloreight"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcoloreight"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcoloreight"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolornine"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolornine"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolornine"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolornine"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolornine"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolornine"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolorten"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolorten"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolorten"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolorten"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolorten"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolorten"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcoloreleven"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcoloreleven"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcoloreleven"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcoloreleven"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcoloreleven"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcoloreleven"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolortwelve"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolortwelve"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolortwelve"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolortwelve"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolortwelve"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolortwelve"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolorthirteen"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolorthirteen"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolorthirteen"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolorthirteen"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolorthirteen"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolorthirteen"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="sidebarcolorfourteen"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="sidebarcolorfourteen"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="sidebarcolorfourteen"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="sidebarcolorfourteen"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="sidebarcolorfourteen"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="sidebarcolorfourteen"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-sidebar="all"] [data-sidebarbg="sidebarbg1"],
[data-sidebar="all"] [data-sidebarbg="sidebarbg2"],
[data-sidebar="all"] [data-sidebarbg="sidebarbg3"],
[data-sidebar="all"] [data-sidebarbg="sidebarbg4"],
[data-sidebar="all"] [data-sidebarbg="sidebarbg5"],
[data-sidebar="all"] [data-sidebarbg="sidebarbg6"] {
    #sidebar {
       &::before  {
        background: linear-gradient(180deg, #4B749F 0%, #243748 22.14%);
        opacity: 0.9;
        z-index: -1;
       }
    }
}
[data-layout="horizontal-overlay"] [data-topbarbg="pattern1"],
[data-layout="horizontal-sidemenu"] [data-topbarbg="pattern1"] {
    .main-wrapper {
        &::after {
            background: url('../img/theme/pattern-01.png');
        }
    }
}
[data-layout="horizontal-overlay"] [data-topbarbg="pattern2"],
[data-layout="horizontal-sidemenu"] [data-topbarbg="pattern2"] {
    .main-wrapper {
        &::after {
            background: url('../img/theme/pattern-01.png');
        }
    }
}
[data-layout="horizontal-overlay"] [data-topbarbg="pattern3"],
[data-layout="horizontal-sidemenu"] [data-topbarbg="pattern3"] {
    .main-wrapper {
        &::after {
            background: url('../img/theme/pattern-03.png');
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="maroon"] [data-topbarbg="pattern3"],
[data-layout="horizontal-sidemenu"][data-topbarcolor="maroon"] [data-topbarbg="pattern3"] {
    .main-wrapper {
        &::before {
            background: rgba(variables.$maroon, 0.85);
            z-index: 1;
        }
        .page-wrapper {
            z-index: 2;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="white"] [data-topbarbg="pattern3"],
[data-layout="horizontal-sidemenu"][data-topbarcolor="white"] [data-topbarbg="pattern3"] {
    .main-wrapper {
        &::before {
            background: rgba(variables.$white, 0.85);
            z-index: 1;
        }
        .page-wrapper {
            z-index: 2;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="primary"] [data-topbarbg="pattern3"],
[data-layout="horizontal-sidemenu"][data-topbarcolor="primary"] [data-topbarbg="pattern3"] {
    .main-wrapper {
        &::before {
            background: rgba(variables.$primary, 0.85);
            z-index: 1;
        }
        .page-wrapper {
            z-index: 2;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="blackpearl"] [data-topbarbg="pattern3"],
[data-layout="horizontal-sidemenu"][data-topbarcolor="blackpearl"] [data-topbarbg="pattern3"] {
    .main-wrapper {
        &::before {
            background: rgba(variables.$blackpearl, 0.85);
            z-index: 1;
        }
        .page-wrapper {
            z-index: 2;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="bluegem"] [data-topbarbg="pattern3"],
[data-layout="horizontal-sidemenu"][data-topbarcolor="bluegem"] [data-topbarbg="pattern3"] {
    .main-wrapper {
        &::before {
            background: rgba(variables.$bluegem, 0.85);
            z-index: 1;
        }
        .page-wrapper {
            z-index: 2;
        }
    }
}
[data-layout="horizontal-overlay"][data-topbarcolor="firefly"] [data-topbarbg="pattern3"],
[data-layout="horizontal-sidemenu"][data-topbarcolor="firefly"] [data-topbarbg="pattern3"] {
    .main-wrapper {
        &::before {
            background: rgba(variables.$firefly, 0.85);
            z-index: 1;
        }
        .page-wrapper {
            z-index: 2;
        }
    }
}
[data-layout="modern"][data-topbarcolor="white"] {
    .header {
        background-color: variables.$white;
        border-color: rgba(variables.$white, 0.8);
        .bar-icon {
            span {
                background-color: variables.$white;
            }
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$gray-500;
                    &:hover, &:active, &.active {
                        background-color: variables.$primary-100;
                        border-color: variables.$primary-100;
                        color: variables.$gray-900 !important;
                    }
                }
            }
        }
        .header-left {
            .logo {
                display: block;
            }
            .logo-white {
                display: none;
            }
        }
    }
    .page-wrapper {
        &::before {
            background: variables.$white;
        }
        .head-icons{
            display: none;
        }
    }    
}
[data-layout="modern"][data-topbarcolor="blue"] {
    .header {
        background-color: variables.$white;
        border-color: rgba(variables.$white, 0.8);
        .bar-icon {
            span {
                background-color: variables.$white;
            }
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$gray-500;
                    &:hover, &:active, &.active {
                        background-color: variables.$primary-100;
                        border-color: variables.$primary-100;
                        color: variables.$gray-900 !important;
                    }
                }
            }
        }
        .header-left {
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }
    .page-wrapper {
        &::before {
            background: variables.$white;
        }
    }    
}
[data-layout="modern"][data-topbarcolor="primary"] {
    .header {
        background-color: variables.$primary;
        border-color: variables.$primary-800;
        .bar-icon {
            span {
                background-color: variables.$white;
            }
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$white;
                    &:hover, &:active, &.active {
                        background-color: variables.$white;
                        color: variables.$gray-700 !important;
                    }
                }
            }
        }
        .header-left {
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
    }
    .page-wrapper {
        &::before {
            background: variables.$primary;
        }
    }    
}
[data-color="primary"]{
    $primary: #FE9F43;
    .sidebar {
        .sidebar-menu > ul {
            &  > li {
                ul {
                    li {
                        a {
                            &.active {
                                color: $primary;
                            }
                        }
                    }
                    & > li {
                        &.active a{
                            .menu-arrow {
                                &::before {
                                    border-right: 2px solid $primary;
                                    border-bottom: 2px solid $primary;
                                }
                            }
                            &.subdrop{
                                color: $primary;
                                span {
                                    color: $primary;
                                    
                                }
                            }
                        }
                    }
                }
            }
            li {
                .submenu > {
                    ul{
                        li{
                            a{
                                &:before {
                                    background: $primary;
                                }
                                &.active {
                                    color: $primary;
                                }
                                &:hover {                                    
                                    color: $primary;
                                }
                            }
                        }
                    }
                }
                .submenu.submenu-two {
                    a {
                        &.subdrop, &.active {
                            color: $primary;
                        }
                    }
                }
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .sidebar-right {
                ul {
                    li {
                        &.submenu {    
                            ul {
                                & > li {
                                    & > a{
                                         &:hover, &.active {
                                             color: $primary;
                                         }
                                     }
                                 }
                            }
                        }
                    }
                }
            }
        }
    }
    .btn.btn-primary,.page-header .btn-added {
        background-color: $primary !important;
        border: 1px solid $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust($primary, $lightness: -7%);
            border: 1px solid color.adjust($primary, $lightness: -7%);
        }
    }
    .btn-check:checked+.btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check)+.btn:active {
        background-color: $primary;
        border-color: $primary;
    }
    .link-primary {
        color: $primary !important;
        &:hover,
        &:focus,
        &:active {
          color: color.adjust($primary, $lightness: -7%);
        }
    }
    .text-primary {
        color: $primary !important;
    }
    .badge {
        &.badge-primary {
            background: $primary;
        }
    }
    .dataTables_paginate .pagination li.active a.page-link {
        background: $primary;
        border-color: $primary;
    }
    .bg-primary {
        background-color: $primary !important;
        border: 1px solid $primary !important;
    }
    .border-bottom.border-primary {
        border-color: $primary !important;
    }
    .border-primary {
        border-color: $primary !important;
    }
    .nav-tabs.nav-tabs-bottom li a.active, .nav-tabs.nav-tabs-bottom li a:hover {
        border-bottom-color: $primary;
        color: $primary;
    }
    .badge {
        &.badge-soft-primary {
            background: rgba($primary, 0.1);
            color: $primary;

        }
    }
    a {
        &.video-expand { 
            &:hover {
                color: variables.$white;
            }
        }
    }
    .btn-outline-primary {
        border: 1px solid $primary !important;
        color: $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: $primary !important;
            border:1px solid $primary !important;
            color: variables.$white !important;
        }
    }
    .select2-container--default {
        &.select2-container--open.select2-container--below .select2-selection--single {
            border-color: $primary;
        }
        .select2-results__option--highlighted[aria-selected] {
            background: $primary;
        }
    }
    .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a {
        &.active {
            background-color: $primary;
            border-color: $primary;
        }
    }
    .nav-tabs .nav-link {
        &:hover {
            color: $primary;
        }
    }
    .form-check-input {
        &:checked {
          background-color: $primary;
          border-color: $primary;
        }
    }
    .sidebar-contact .toggle-theme {
        background-color: $primary;
        @include mixins.respond-below(custom991) {
            display: none;
        }
    }
    .header .header-user .user-menu {
        .profile-dropdown {
            .dropdown-item:hover {
                color: $primary;
            }
        }
    }  
    #sales-purchase,  #revenue-income,  #leads_stage, #s-col, #s-col-stacked {
        .apexcharts-bar-series {
            .apexcharts-series:nth-child(1) path {
                fill: $primary;
            }
        }
    }
    #deals_stage, #emp-department, #s-bar, #mixed-chart  {
        .apexcharts-bar-series {
            .apexcharts-series path {
                fill: $primary;
            }
        }
    }
    #mixed-chart, #s-col-stacked, #s-col {
        .apexcharts-legend-series:first-child .apexcharts-legend-marker {
            fill: $primary; 
        }
    }
    #s-line  {
        .apexcharts-line-series {
            .apexcharts-series path {
                stroke: $primary;
            }
            .apexcharts-marker {
                fill: $primary;
            }
        }
    }
    #chart-bar-stacked, #chart-bar, #chart-bar-rotated {
        .c3-target-data2 .c3-bar {
            fill: $primary !important; 
        }
    }
    #chart-spline-rotated .c3-target-data2 {
        .c3-line {
            stroke: $primary !important;
        } 
        .c3-circle {
            fill: $primary; 
        }
    }  
    .nav.tab-style-1 .nav-link.active {
        background-color: $primary !important;
    }
    .table tbody tr td a:hover {
        color: $primary;
    }
}
[data-color="brightblue"]{
    $primary: #009688;
    .sidebar .sidebar-logo #toggle_btn {
        background: $primary;
    }
    .sidebar {
        .sidebar-menu > ul {
            &  > li {
                ul {
                    li {
                        a {
                            &.active {
                                color: $primary;
                            }
                        }
                        &.active {                
                            a {
                                span, i {
                                    color: $primary;
                                }
                            }
                        }
                    }
                    & > li {
                        &.active a{
                            .menu-arrow {
                                &::before {
                                    border-right: 2px solid $primary;
                                    border-bottom: 2px solid $primary;
                                }
                            }
                            &.subdrop{
                                color: $primary;
                                span {
                                    color: $primary;
                                    
                                }
                            }
                        }
                    }
                }
            }
            li {
                .submenu > {
                    ul{
                        li{
                            a{
                                &:before {
                                    background: $primary;
                                }
                                &.active {
                                    color: $primary;
                                }
                                &:hover {                                    
                                    color: $primary;
                                }
                            }
                        }
                    }
                }
                .submenu.submenu-two {
                    a {
                        &.subdrop, &.active {
                            color: $primary;
                        }
                    }
                }
            }
        }
        .nav-link {
            &.active {
                color: $primary;
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .sidebar-right {
                ul {
                    li {
                        &.submenu {    
                            ul {
                                & > li {
                                    & > a{
                                         &:hover, &.active {
                                             color: $primary;
                                         }
                                     }
                                 }
                            }
                        }
                    }
                }
            }
        }
    }
    .btn.btn-primary,.page-header .btn-added {
        background-color: $primary !important;
        border: 1px solid $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust($primary, $lightness: -7%);
            border: 1px solid color.adjust($primary, $lightness: -7%);
        }
    }
    .btn-check:checked+.btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check)+.btn:active {
        background-color: $primary;
        border-color: $primary;
    }
    .link-primary {
        color: $primary !important;
        &:hover,
        &:focus,
        &:active {
          color: color.adjust($primary, $lightness: -7%);
        }
    }
    .text-primary {
        color: $primary !important;
    }
    .badge {
        &.badge-primary {
            background: $primary;
        }
    }
    .dataTables_paginate .pagination li.active a.page-link {
        background: $primary;
        border-color: $primary;
    }
    .bg-primary {
        background-color: $primary !important;
        border: 1px solid $primary !important;
    }
    .border-bottom.border-primary {
        border-color: $primary !important;
    }
    .border-primary {
        border-color: $primary !important;
    }
    .nav-tabs.nav-tabs-bottom li a.active, .nav-tabs.nav-tabs-bottom li a:hover {
        border-bottom-color: $primary;
        color: $primary;
    }
    .badge {
        &.badge-soft-primary {
            background: rgba($primary, 0.1);
            color: $primary;

        }
    }
    a {
        &:hover {
            color: $primary;
        }
    }
    .btn-outline-primary {
        border: 1px solid $primary !important;
        color: $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: $primary !important;
            border:1px solid $primary !important;
        }
    }
    .select2-container--default {
        &.select2-container--open.select2-container--below .select2-selection--single {
            border-color: $primary;
        }
        .select2-results__option--highlighted[aria-selected] {
            background: $primary;
        }
    }
    .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a {
        &.active {
            background-color: $primary;
            border-color: $primary;
        }
    }
    .nav-tabs .nav-link {
        &:hover {
            color: $primary;
        }
    }
    .form-check-input {
        &:checked {
          background-color: $primary;
          border-color: $primary;
        }
    }
    .sidebar-contact .toggle-theme {
        background-color: $primary;
    }
    .header .header-user .user-menu {
        .profile-dropdown {
            .dropdown-item:hover {
                color: $primary;
            }
        }
    }
    #sales-purchase {
        .apexcharts-bar-series {
            .apexcharts-series {
                &[rel="1"] {
                    path {
                        fill: $primary;
                    }
                }
                &[rel="2"] {
                    path {
                        fill: rgba($primary, 0.4);
                    }
                }
            }
          
        }
    }
    #heat_chart {
        .apexcharts-series {
            rect {
                fill: $primary;
            }
        }
    }
    #deals_stage, #emp-department, #s-bar, #mixed-chart  {
        .apexcharts-bar-series {
            .apexcharts-series path {
                fill: $primary;
            }
        }
    }
    #mixed-chart, #s-col-stacked, #s-col {
        .apexcharts-legend-series:first-child .apexcharts-legend-marker {
            fill: $primary; 
        }
    }
    #s-line  {
        .apexcharts-line-series {
            .apexcharts-series path {
                stroke: $primary;
            }
            .apexcharts-marker {
                fill: $primary;
            }
        }
    }
    #chart-bar-stacked, #chart-bar, #chart-bar-rotated {
        .c3-target-data2 .c3-bar {
            fill: $primary !important; 
        }
    }
    #chart-spline-rotated .c3-target-data2 {
        .c3-line {
            stroke: $primary !important;
        } 
        .c3-circle {
            fill: $primary; 
        }
    }  
    .nav.tab-style-1 .nav-link.active {
        background-color: $primary !important;
    }
    .table tbody tr td a:hover {
        color: $primary;
    }
}
[data-color="lunargreen"]{
    $primary: #D63031;
    .sidebar .sidebar-logo #toggle_btn {
        background: $primary;
    }
    .sidebar {
        .sidebar-menu > ul {
            &  > li {
                ul {
                    li {
                        a {
                            &.active {
                                color: $primary;
                            }
                        }
                        &.active {                
                            a {
                                span, i {
                                    color: $primary;
                                }
                            }
                        }
                    }
                    & > li {
                        &.active a{
                            .menu-arrow {
                                &::before {
                                    border-right: 2px solid $primary;
                                    border-bottom: 2px solid $primary;
                                }
                            }
                            &.subdrop{
                                color: $primary;
                                span {
                                    color: $primary;
                                    
                                }
                            }
                        }
                    }
                }
            }
            li {
                .submenu > {
                    ul{
                        li{
                            a{
                                &:before {
                                    background: $primary;
                                }
                                &.active {
                                    color: $primary;
                                }
                                &:hover {                                    
                                    color: $primary;
                                }
                            }
                        }
                    }
                }
                .submenu.submenu-two {
                    a {
                        &.subdrop, &.active {
                            color: $primary;
                        }
                    }
                }
            }
        }
        .nav-link {
            &.active {
                color: $primary;
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .sidebar-right {
                ul {
                    li {
                        &.submenu {    
                            ul {
                                & > li {
                                    & > a{
                                         &:hover, &.active {
                                             color: $primary;
                                         }
                                     }
                                 }
                            }
                        }
                    }
                }
            }
        }
    }
    .btn.btn-primary,.page-header .btn-added {
        background-color: $primary !important;
        border: 1px solid $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust($primary, $lightness: -7%);
            border: 1px solid color.adjust($primary, $lightness: -7%);
        }
    }
    .btn-check:checked+.btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check)+.btn:active {
        background-color: $primary;
        border-color: $primary;
    }
    .link-primary {
        color: $primary !important;
        &:hover,
        &:focus,
        &:active {
          color: color.adjust($primary, $lightness: -7%);
        }
    }
    .text-primary {
        color: $primary !important;
    }
    .badge {
        &.badge-primary {
            background: $primary;
        }
    }
    .dataTables_paginate .pagination li.active a.page-link {
        background: $primary;
        border-color: $primary;
    }
    .bg-primary {
        background-color: $primary !important;
        border: 1px solid $primary !important;
    }
    .border-bottom.border-primary {
        border-color: $primary !important;
    }
    .border-primary {
        border-color: $primary !important;
    }
    .nav-tabs.nav-tabs-bottom li a.active, .nav-tabs.nav-tabs-bottom li a:hover {
        border-bottom-color: $primary;
        color: $primary;
    }
    .badge {
        &.badge-soft-primary {
            background: rgba($primary, 0.1);
            color: $primary;

        }
    }
    a {
        &:hover {
            color: $primary;
        }
    }
    .btn-outline-primary {
        border: 1px solid $primary !important;
        color: $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: $primary !important;
            border:1px solid $primary !important;
        }
    }
    .select2-container--default {
        &.select2-container--open.select2-container--below .select2-selection--single {
            border-color: $primary;
        }
        .select2-results__option--highlighted[aria-selected] {
            background: $primary;
        }
    }
    .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a {
        &.active {
            background-color: $primary;
            border-color: $primary;
        }
    }
    .nav-tabs .nav-link {
        &:hover {
            color: $primary;
        }
    }
    .form-check-input {
        &:checked {
          background-color: $primary;
          border-color: $primary;
        }
    }
    .sidebar-contact .toggle-theme {
        background-color: $primary;
    }
    .header .header-user .user-menu {
        .profile-dropdown {
            .dropdown-item:hover {
                color: $primary;
            }
        }
    }
    #sales-income,  #revenue-income,  #leads_stage, #s-col, #s-col-stacked {
        .apexcharts-bar-series {
            .apexcharts-series:nth-child(1) path {
                fill: $primary;
            }
        }
    }
    #deals_stage, #emp-department, #s-bar, #mixed-chart  {
        .apexcharts-bar-series {
            .apexcharts-series path {
                fill: $primary;
            }
        }
    }
    #mixed-chart, #s-col-stacked, #s-col {
        .apexcharts-legend-series:first-child .apexcharts-legend-marker {
            fill: $primary; 
        }
    }
    #s-line  {
        .apexcharts-line-series {
            .apexcharts-series path {
                stroke: $primary;
            }
            .apexcharts-marker {
                fill: $primary;
            }
        }
    }
    #chart-bar-stacked, #chart-bar, #chart-bar-rotated {
        .c3-target-data2 .c3-bar {
            fill: $primary !important; 
        }
    }
    #chart-spline-rotated .c3-target-data2 {
        .c3-line {
            stroke: $primary !important;
        } 
        .c3-circle {
            fill: $primary; 
        }
    }  
    .nav.tab-style-1 .nav-link.active {
        background-color: $primary !important;
    }
    .table tbody tr td a:hover {
        color: $primary;
    }
}
[data-color="lavendar"]{
    $primary: #6C5CE7;
    .sidebar .sidebar-logo #toggle_btn {
        background: $primary;
    }
    .sidebar {
        .sidebar-menu > ul {
            &  > li {
                ul {
                    li {
                        a {
                            &.active {
                                color: $primary;
                            }
                        }
                        &.active {                
                            a {
                                span, i {
                                    color: $primary;
                                }
                            }
                        }
                    }
                    & > li {
                        &.active a{
                            .menu-arrow {
                                &::before {
                                    border-right: 2px solid $primary;
                                    border-bottom: 2px solid $primary;
                                }
                            }
                            &.subdrop{
                                color: $primary;
                                span {
                                    color: $primary;
                                    
                                }
                            }
                        }
                    }
                }
            }
            li {
                .submenu > {
                    ul{
                        li{
                            a{
                                &:before {
                                    background: $primary;
                                }
                                &.active {
                                    color: $primary;
                                }
                                &:hover {                                    
                                    color: $primary;
                                }
                            }
                        }
                    }
                }
                .submenu.submenu-two {
                    a {
                        &.subdrop, &.active {
                            color: $primary;
                        }
                    }
                }
            }
        }
        .nav-link {
            &.active {
                color: $primary;
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .sidebar-right {
                ul {
                    li {
                        &.submenu {    
                            ul {
                                & > li {
                                    & > a{
                                         &:hover, &.active {
                                             color: $primary;
                                         }
                                     }
                                 }
                            }
                        }
                    }
                }
            }
        }
    }
    .btn.btn-primary,.page-header .btn-added {
        background-color: $primary !important;
        border: 1px solid $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust($primary, $lightness: -7%);
            border: 1px solid color.adjust($primary, $lightness: -7%);
        }
    }
    .btn-check:checked+.btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check)+.btn:active {
        background-color: $primary;
        border-color: $primary;
    }
    .link-primary {
        color: $primary !important;
        &:hover,
        &:focus,
        &:active {
          color: color.adjust($primary, $lightness: -7%);
        }
    }
    .text-primary {
        color: $primary !important;
    }
    .badge {
        &.badge-primary {
            background: $primary;
        }
    }
    .dataTables_paginate .pagination li.active a.page-link {
        background: $primary;
        border-color: $primary;
    }
    .bg-primary {
        background-color: $primary !important;
        border: 1px solid $primary !important;
    }
    .border-bottom.border-primary {
        border-color: $primary !important;
    }
    .border-primary {
        border-color: $primary !important;
    }
    .nav-tabs.nav-tabs-bottom li a.active, .nav-tabs.nav-tabs-bottom li a:hover {
        border-bottom-color: $primary;
        color: $primary;
    }
    .badge {
        &.badge-soft-primary {
            background: rgba($primary, 0.1);
            color: $primary;

        }
    }
    a {
        &:hover {
            color: $primary;
        }
    }
    .btn-outline-primary {
        border: 1px solid $primary !important;
        color: $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: $primary !important;
            border:1px solid $primary !important;
        }
    }
    .select2-container--default {
        &.select2-container--open.select2-container--below .select2-selection--single {
            border-color: $primary;
        }
        .select2-results__option--highlighted[aria-selected] {
            background: $primary;
        }
    }
    .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a {
        &.active {
            background-color: $primary;
            border-color: $primary;
        }
    }
    .nav-tabs .nav-link {
        &:hover {
            color: $primary;
        }
    }
    .form-check-input {
        &:checked {
          background-color: $primary;
          border-color: $primary;
        }
    }
    .sidebar-contact .toggle-theme {
        background-color: $primary;
    }
    .header .header-user .user-menu {
        .profile-dropdown {
            .dropdown-item:hover {
                color: $primary;
            }
        }
    }
    #sales-income,  #revenue-income,  #leads_stage, #s-col, #s-col-stacked {
        .apexcharts-bar-series {
            .apexcharts-series:nth-child(1) path {
                fill: $primary;
            }
        }
    }
    #deals_stage, #emp-department, #s-bar, #mixed-chart  {
        .apexcharts-bar-series {
            .apexcharts-series path {
                fill: $primary;
            }
        }
    }
    #mixed-chart, #s-col-stacked, #s-col {
        .apexcharts-legend-series:first-child .apexcharts-legend-marker {
            fill: $primary; 
        }
    }
    #s-line  {
        .apexcharts-line-series {
            .apexcharts-series path {
                stroke: $primary;
            }
            .apexcharts-marker {
                fill: $primary;
            }
        }
    }
    #chart-bar-stacked, #chart-bar, #chart-bar-rotated {
        .c3-target-data2 .c3-bar {
            fill: $primary !important; 
        }
    }
    #chart-spline-rotated .c3-target-data2 {
        .c3-line {
            stroke: $primary !important;
        } 
        .c3-circle {
            fill: $primary; 
        }
    }  
    .nav.tab-style-1 .nav-link.active {
        background-color: $primary !important;
    }
    .table tbody tr td a:hover {
        color: $primary;
    }
}
[data-color="magenta"]{
    $primary: #0984E3;
    .sidebar .sidebar-logo #toggle_btn {
        background: $primary;
    }
    .sidebar {
        .sidebar-menu > ul {
            &  > li {
                ul {
                    li {
                        a {
                            &.active {
                                color: $primary;
                            }
                        }
                        &.active {                
                            a {
                                span, i {
                                    color: $primary;
                                }
                            }
                        }
                    }
                    & > li {
                        &.active a{
                            .menu-arrow {
                                &::before {
                                    border-right: 2px solid $primary;
                                    border-bottom: 2px solid $primary;
                                }
                            }
                            &.subdrop{
                                color: $primary;
                                span {
                                    color: $primary;
                                    
                                }
                            }
                        }
                    }
                }
            }
            li {
                .submenu > {
                    ul{
                        li{
                            a{
                                &:before {
                                    background: $primary;
                                }
                                &.active {
                                    color: $primary;
                                }
                                &:hover {                                    
                                    color: $primary;
                                }
                            }
                        }
                    }
                }
                .submenu.submenu-two {
                    a {
                        &.subdrop, &.active {
                            color: $primary;
                        }
                    }
                }
            }
        }
        .nav-link {
            &.active {
                color: $primary;
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .sidebar-right {
                ul {
                    li {
                        &.submenu {    
                            ul {
                                & > li {
                                    & > a{
                                         &:hover, &.active {
                                             color: $primary;
                                         }
                                     }
                                 }
                            }
                        }
                    }
                }
            }
        }
    }
    .btn.btn-primary,.page-header .btn-added {
        background-color: $primary !important;
        border: 1px solid $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust($primary, $lightness: -7%);
            border: 1px solid color.adjust($primary, $lightness: -7%);
        }
    }
    .btn-check:checked+.btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check)+.btn:active {
        background-color: $primary;
        border-color: $primary;
    }
    .link-primary {
        color: $primary !important;
        &:hover,
        &:focus,
        &:active {
          color: color.adjust($primary, $lightness: -7%);
        }
    }
    .text-primary {
        color: $primary !important;
    }
    .badge {
        &.badge-primary {
            background: $primary;
        }
    }
    .dataTables_paginate .pagination li.active a.page-link {
        background: $primary;
        border-color: $primary;
    }
    .bg-primary {
        background-color: $primary !important;
        border: 1px solid $primary !important;
    }
    .border-bottom.border-primary {
        border-color: $primary !important;
    }
    .border-primary {
        border-color: $primary !important;
    }
    .nav-tabs.nav-tabs-bottom li a.active, .nav-tabs.nav-tabs-bottom li a:hover {
        border-bottom-color: $primary;
        color: $primary;
    }
    .badge {
        &.badge-soft-primary {
            background: rgba($primary, 0.1);
            color: $primary;

        }
    }
    a {
        &:hover {
            color: $primary;
        }
    }
    .btn-outline-primary {
        border: 1px solid $primary !important;
        color: $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: $primary !important;
            border:1px solid $primary !important;
        }
    }
    .select2-container--default {
        &.select2-container--open.select2-container--below .select2-selection--single {
            border-color: $primary;
        }
        .select2-results__option--highlighted[aria-selected] {
            background: $primary;
        }
    }
    .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a {
        &.active {
            background-color: $primary;
            border-color: $primary;
        }
    }
    .nav-tabs .nav-link {
        &:hover {
            color: $primary;
        }
    }
    .form-check-input {
        &:checked {
          background-color: $primary;
          border-color: $primary;
        }
    }
    .sidebar-contact .toggle-theme {
        background-color: $primary;
    }
    .header .header-user .user-menu {
        .profile-dropdown {
            .dropdown-item:hover {
                color: $primary;
            }
        }
    }
    #sales-income,  #revenue-income,  #leads_stage, #s-col, #s-col-stacked {
        .apexcharts-bar-series {
            .apexcharts-series:nth-child(1) path {
                fill: $primary;
            }
        }
    }
    #deals_stage, #emp-department, #s-bar, #mixed-chart  {
        .apexcharts-bar-series {
            .apexcharts-series path {
                fill: $primary;
            }
        }
    }
    #mixed-chart, #s-col-stacked, #s-col {
        .apexcharts-legend-series:first-child .apexcharts-legend-marker {
            fill: $primary; 
        }
    }
    #s-line  {
        .apexcharts-line-series {
            .apexcharts-series path {
                stroke: $primary;
            }
            .apexcharts-marker {
                fill: $primary;
            }
        }
    }
    #chart-bar-stacked, #chart-bar, #chart-bar-rotated {
        .c3-target-data2 .c3-bar {
            fill: $primary !important; 
        }
    }
    #chart-spline-rotated .c3-target-data2 {
        .c3-line {
            stroke: $primary !important;
        } 
        .c3-circle {
            fill: $primary; 
        }
    }  
    .nav.tab-style-1 .nav-link.active {
        background-color: $primary !important;
    }
    .table tbody tr td a:hover {
        color: $primary;
    }
}
[data-color="chromeyellow"]{
    $primary: #00B894;
    .sidebar .sidebar-logo #toggle_btn {
        background: $primary;
    }
    .sidebar {
        .sidebar-menu > ul {
            &  > li {
                ul {
                    li {
                        a {
                            &.active {
                                color: $primary;
                            }
                        }
                        &.active {                
                            a {
                                span, i {
                                    color: $primary;
                                }
                            }
                        }
                    }
                    & > li {
                        &.active a{
                            .menu-arrow {
                                &::before {
                                    border-right: 2px solid $primary;
                                    border-bottom: 2px solid $primary;
                                }
                            }
                            &.subdrop{
                                color: $primary;
                                span {
                                    color: $primary;
                                    
                                }
                            }
                        }
                    }
                }
            }
            li {
                .submenu > {
                    ul{
                        li{
                            a{
                                &:before {
                                    background: $primary;
                                }
                                &.active {
                                    color: $primary;
                                }
                                &:hover {                                    
                                    color: $primary;
                                }
                            }
                        }
                    }
                }
                .submenu.submenu-two {
                    a {
                        &.subdrop, &.active {
                            color: $primary;
                        }
                    }
                }
            }
        }
        .nav-link {
            &.active {
                color: $primary;
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .sidebar-right {
                ul {
                    li {
                        &.submenu {    
                            ul {
                                & > li {
                                    & > a{
                                         &:hover, &.active {
                                             color: $primary;
                                         }
                                     }
                                 }
                            }
                        }
                    }
                }
            }
        }
    }
    .btn.btn-primary,.page-header .btn-added {
        background-color: $primary !important;
        border: 1px solid $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust($primary, $lightness: -7%);
            border: 1px solid color.adjust($primary, $lightness: -7%);
        }
    }
    .btn-check:checked+.btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check)+.btn:active {
        background-color: $primary;
        border-color: $primary;
    }
    .link-primary {
        color: $primary !important;
        &:hover,
        &:focus,
        &:active {
          color: color.adjust($primary, $lightness: -7%);
        }
    }
    .text-primary {
        color: $primary !important;
    }
    .badge {
        &.badge-primary {
            background: $primary;
        }
    }
    .dataTables_paginate .pagination li.active a.page-link {
        background: $primary;
        border-color: $primary;
    }
    .bg-primary {
        background-color: $primary !important;
        border: 1px solid $primary !important;
    }
    .border-bottom.border-primary {
        border-color: $primary !important;
    }
    .border-primary {
        border-color: $primary !important;
    }
    .nav-tabs.nav-tabs-bottom li a.active, .nav-tabs.nav-tabs-bottom li a:hover {
        border-bottom-color: $primary;
        color: $primary;
    }
    .badge {
        &.badge-soft-primary {
            background: rgba($primary, 0.1);
            color: $primary;

        }
    }
    a {
        &:hover {
            color: $primary;
        }
    }
    .btn-outline-primary {
        border: 1px solid $primary !important;
        color: $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: $primary !important;
            border:1px solid $primary !important;
        }
    }
    .select2-container--default {
        &.select2-container--open.select2-container--below .select2-selection--single {
            border-color: $primary;
        }
        .select2-results__option--highlighted[aria-selected] {
            background: $primary;
        }
    }
    .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a {
        &.active {
            background-color: $primary;
            border-color: $primary;
        }
    }
    .nav-tabs .nav-link {
        &:hover {
            color: $primary;
        }
    }
    .form-check-input {
        &:checked {
          background-color: $primary;
          border-color: $primary;
        }
    }
    .sidebar-contact .toggle-theme {
        background-color: $primary;
    }
    .header .header-user .user-menu {
        .profile-dropdown {
            .dropdown-item:hover {
                color: $primary;
            }
        }
    }
    #sales-income,  #revenue-income,  #leads_stage, #s-col, #s-col-stacked {
        .apexcharts-bar-series {
            .apexcharts-series:nth-child(1) path {
                fill: $primary;
            }
        }
    }
    #deals_stage, #emp-department, #s-bar, #mixed-chart  {
        .apexcharts-bar-series {
            .apexcharts-series path {
                fill: $primary;
            }
        }
    }
    #mixed-chart, #s-col-stacked, #s-col {
        .apexcharts-legend-series:first-child .apexcharts-legend-marker {
            fill: $primary; 
        }
    }
    #s-line  {
        .apexcharts-line-series {
            .apexcharts-series path {
                stroke: $primary;
            }
            .apexcharts-marker {
                fill: $primary;
            }
        }
    }
    #chart-bar-stacked, #chart-bar, #chart-bar-rotated {
        .c3-target-data2 .c3-bar {
            fill: $primary !important; 
        }
    }
    #chart-spline-rotated .c3-target-data2 {
        .c3-line {
            stroke: $primary !important;
        } 
        .c3-circle {
            fill: $primary; 
        }
    }  
    .nav.tab-style-1 .nav-link.active {
        background-color: $primary !important;
    }
    .table tbody tr td a:hover {
        color: $primary;
    }
}
[data-color="orange"]{
    $primary: #E04F16;
    .sidebar .sidebar-logo #toggle_btn {
        background: $primary;
    }
    .sidebar {
        .sidebar-menu > ul {
            &  > li {
                ul {
                    li {
                        a {
                            &.active {
                                color: $primary;
                            }
                        }
                        &.active {                
                            a {
                                span, i {
                                    color: $primary;
                                }
                            }
                        }
                    }
                    & > li {
                        &.active a{
                            .menu-arrow {
                                &::before {
                                    border-right: 2px solid $primary;
                                    border-bottom: 2px solid $primary;
                                }
                            }
                            &.subdrop{
                                color: $primary;
                                span {
                                    color: $primary;
                                    
                                }
                            }
                        }
                    }
                }
            }
            li {
                .submenu > {
                    ul{
                        li{
                            a{
                                &:before {
                                    background: $primary;
                                }
                                &.active {
                                    color: $primary;
                                }
                                &:hover {                                    
                                    color: $primary;
                                }
                            }
                        }
                    }
                }
                .submenu.submenu-two {
                    a {
                        &.subdrop, &.active {
                            color: $primary;
                        }
                    }
                }
            }
        }
        .nav-link {
            &.active {
                color: $primary;
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .sidebar-right {
                ul {
                    li {
                        &.submenu {    
                            ul {
                                & > li {
                                    & > a{
                                         &:hover, &.active {
                                             color: $primary;
                                         }
                                     }
                                 }
                            }
                        }
                    }
                }
            }
        }
    }
    .btn.btn-primary,.page-header .btn-added {
        background-color: $primary !important;
        border: 1px solid $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust($primary, $lightness: -7%);
            border: 1px solid color.adjust($primary, $lightness: -7%);
        }
    }
    .btn-check:checked+.btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check)+.btn:active {
        background-color: $primary;
        border-color: $primary;
    }
    .link-primary {
        color: $primary !important;
        &:hover,
        &:focus,
        &:active {
          color: color.adjust($primary, $lightness: -7%);
        }
    }
    .text-primary {
        color: $primary !important;
    }
    .badge {
        &.badge-primary {
            background: $primary;
        }
    }
    .dataTables_paginate .pagination li.active a.page-link {
        background: $primary;
        border-color: $primary;
    }
    .bg-primary {
        background-color: $primary !important;
        border: 1px solid $primary !important;
    }
    .border-bottom.border-primary {
        border-color: $primary !important;
    }
    .border-primary {
        border-color: $primary !important;
    }
    .nav-tabs.nav-tabs-bottom li a.active, .nav-tabs.nav-tabs-bottom li a:hover {
        border-bottom-color: $primary;
        color: $primary;
    }
    .badge {
        &.badge-soft-primary {
            background: rgba($primary, 0.1);
            color: $primary;

        }
    }
    a {
        &:hover {
            color: $primary;
        }
    }
    .btn-outline-primary {
        border: 1px solid $primary !important;
        color: $primary !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: $primary !important;
            border:1px solid $primary !important;
        }
    }
    .select2-container--default {
        &.select2-container--open.select2-container--below .select2-selection--single {
            border-color: $primary;
        }
        .select2-results__option--highlighted[aria-selected] {
            background: $primary;
        }
    }
    .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a {
        &.active {
            background-color: $primary;
            border-color: $primary;
        }
    }
    .nav-tabs .nav-link {
        &:hover {
            color: $primary;
        }
    }
    .form-check-input {
        &:checked {
          background-color: $primary;
          border-color: $primary;
        }
    }
    .sidebar-contact .toggle-theme {
        background-color: $primary;
    }
    .header .header-user .user-menu {
        .profile-dropdown {
            .dropdown-item:hover {
                color: $primary;
            }
        }
    }
    #sales-income,  #revenue-income,  #leads_stage, #s-col, #s-col-stacked {
        .apexcharts-bar-series {
            .apexcharts-series:nth-child(1) path {
                fill: $primary;
            }
        }
    }
    #deals_stage, #emp-department, #s-bar, #mixed-chart  {
        .apexcharts-bar-series {
            .apexcharts-series path {
                fill: $primary;
            }
        }
    }
    #mixed-chart, #s-col-stacked, #s-col {
        .apexcharts-legend-series:first-child .apexcharts-legend-marker {
            fill: $primary; 
        }
    }
    #s-line  {
        .apexcharts-line-series {
            .apexcharts-series path {
                stroke: $primary;
            }
            .apexcharts-marker {
                fill: $primary;
            }
        }
    }
    #chart-bar-stacked, #chart-bar, #chart-bar-rotated {
        .c3-target-data2 .c3-bar {
            fill: $primary !important; 
        }
    }
    #chart-spline-rotated .c3-target-data2 {
        .c3-line {
            stroke: $primary !important;
        } 
        .c3-circle {
            fill: $primary; 
        }
    }  
    .nav.tab-style-1 .nav-link.active {
        background-color: $primary !important;
    }
    .table tbody tr td a:hover {
        color: $primary;
    }
}
[data-color="all"]{
    $primary: var(--primary-rgb-picr);
    .sidebar {
        .sidebar-menu > ul {
            &  > li {
                ul {
                    li {
                        a {
                            &.active {
                                color: rgba($primary, 1);
                            }
                        }
                        &.active {                
                            a {
                                span, i {
                                    color: rgba($primary, 1);
                                }
                            }
                        }
                    }
                    & > li {
                        &.active a{
                            .menu-arrow {
                                &::before {
                                    border-right: 2px solid rgba($primary, 1);
                                    border-bottom: 2px solid rgba($primary, 1);
                                }
                            }
                            &.subdrop{
                                color: rgba($primary, 1);
                                span {
                                    color: rgba($primary, 1);
                                    
                                }
                            }
                        }
                    }
                }
            }
            li {
                .submenu > {
                    ul{
                        li{
                            a{
                                &:before {
                                    background: rgba($primary, 1);
                                }
                                &.active {
                                    color: rgba($primary, 1);
                                }
                                &:hover {                                    
                                    color: rgba($primary, 1);
                                }
                            }
                        }
                    }
                }
                .submenu.submenu-two {
                    a {
                        &.subdrop, &.active {
                            color: rgba($primary, 1);
                        }
                    }
                }
            }
        }
        .nav-link {
            &.active {
                color: rgba($primary, 1);
            }
        }
    }
    .sidebar-twocol {
        &.sidebar {
            .sidebar-right {
                ul {
                    li {
                        &.submenu {    
                            ul {
                                & > li {
                                    & > a{
                                         &:hover, &.active {
                                             color: rgba($primary, 1);
                                         }
                                     }
                                 }
                            }
                        }
                    }
                }
            }
        }
    }
    .btn.btn-primary,.page-header .btn-added {
        background-color: rgba($primary, 1) !important;
        border: 1px solid rgba($primary, 1) !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: rgba($primary, 2);
           border: 1px solid rgba($primary, 2);
        }
    }
    .btn-check:checked+.btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check)+.btn:active {
        background-color: rgba($primary, 1);
        border-color: rgba($primary, 1);
    }
    .link-primary {
        color: rgba($primary, 1) !important;
        &:hover,
        &:focus,
        &:active {
          color: rgba($primary, 1);
        }
    }
    .text-primary {
        color: rgba($primary, 1) !important;
    }
    .badge {
        &.badge-primary {
            background: rgba($primary, 1);
        }
    }
    .dataTables_paginate .pagination li.active a.page-link {
        background: rgba($primary, 1);
        border-color: rgba($primary, 1);
    }
    .bg-primary {
        background-color: rgba($primary, 1) !important;
        border: 1px solid rgba($primary, 1) !important;
    }
    .border-bottom.border-primary {
        border-color: rgba($primary, 1) !important;
    }
    .border-primary {
        border-color: rgba($primary, 1) !important;
    }
    .nav-tabs.nav-tabs-bottom li a.active, .nav-tabs.nav-tabs-bottom li a:hover {
        border-bottom-color: rgba($primary, 1);
        color: rgba($primary, 1);
    }
    .badge {
        &.badge-soft-primary {
            background: rgba($primary, 0.1);
            color: rgba($primary, 1);

        }
    }
    a {
        &:hover {
            color: rgba($primary, 1);
        }
    }
    .btn-outline-primary {
        border: 1px solid rgba($primary, 1) !important;
        color: rgba($primary, 1) !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: rgba($primary, 1) !important;
            border:1px solid rgba($primary, 1) !important;
        }
    }
    .select2-container--default {
        &.select2-container--open.select2-container--below .select2-selection--single {
            border-color: rgba($primary, 1);
        }
        .select2-results__option--highlighted[aria-selected] {
            background: rgba($primary, 1);
        }
    }
    .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a {
        &.active {
            background-color: rgba($primary, 1);
            border-color: rgba($primary, 1);
        }
    }
    .nav-tabs .nav-link {
        &:hover {
            color: rgba($primary, 1);
        }
    }
    .form-check-input {
        &:checked {
          background-color: rgba($primary, 1);
          border-color: rgba($primary, 1);
        }
    }
    .sidebar-contact .toggle-theme {
        background-color: rgba($primary, 1);
    }
    .header .header-user .user-menu {
        .profile-dropdown {
            .dropdown-item:hover {
                color: rgba($primary, 1);
            }
        }
    }
    #sales-income,  #revenue-income,  #leads_stage, #s-col, #s-col-stacked {
        .apexcharts-bar-series {
            .apexcharts-series:nth-child(1) path {
                fill: rgba($primary, 1);
            }
        }
    }
    #deals_stage, #emp-department, #s-bar, #mixed-chart  {
        .apexcharts-bar-series {
            .apexcharts-series path {
                fill: rgba($primary, 1);
            }
        }
    }
    #mixed-chart, #s-col-stacked, #s-col {
        .apexcharts-legend-series:first-child .apexcharts-legend-marker {
            fill: rgba($primary, 1);
        }
    }
    #s-line  {
        .apexcharts-line-series {
            .apexcharts-series path {
                stroke: rgba($primary, 1);
            }
            .apexcharts-marker {
                fill: rgba($primary, 1);
            }
        }
    }
    #chart-bar-stacked, #chart-bar, #chart-bar-rotated {
        .c3-target-data2 .c3-bar {
            fill: rgba($primary, 1) !important; 
        }
    }
    #chart-spline-rotated .c3-target-data2 {
        .c3-line {
            stroke: rgba($primary, 1) !important;
        } 
        .c3-circle {
            fill: rgba($primary, 1);
        }
    }  
    .nav.tab-style-1 .nav-link.active {
        background-color: rgba($primary, 1);
    }
    .table tbody tr td a:hover {
        color: rgba($primary, 1);
    }
}
body {
    &.layout-mode-rtl {
        direction: rtl;
        .slide-nav .sidebar {
            margin-right: 0;
        }
        .sidebar {
            right: 0;
            left: unset;
            border-right: 0;
            border-left: 1px solid variables.$border-color;
            .sidebar-menu {
                > ul > li {
                    .submenu {
                        ul {
                            &::before {
                                right: 14px;
                                left: unset;
                            }                            
                        }
                        > ul {
                            li {
                                a {
                                    padding: 8px 32px 8px 8px;
                                    &::before {
                                        right: 13px;
                                        left: unset;
                                    }   
                                }
                            }
                        }
                    }
                    ul li a span  {
                        margin-right: 10px;
                        margin-left: 0;
                    }
                }
                .menu-arrow {
                    left: 10px;
                    right: unset;
                }
                > ul > li .submenu-hdr::after {
                    margin-right: 8px;
                    margin-left: 0;
                }
            }
            @include mixins.respond-below(custom991) {
                margin-right: -575px;
            }
        }
        .header-left {
            float: right;
            border-right: 0;
            border-left: 1px solid variables.$border-color;
        }
        .page-wrapper {
            margin-right: 252px;
            margin-left: 0;
            @include mixins.respond-below(custom991) {
                margin-right: 0;
            }
        }
        &.mini-sidebar {
            .page-wrapper {
                margin-right: 80px;
            }
        }
        .header {
            .input-group {
                input {
                    border-right: 1px solid variables.$gray-200 !important;
                    border-top-right-radius: 5px !important;
                    border-bottom-right-radius: 5px !important;
                    border-left: 0 !important;
                    padding: 0.5rem 1.875rem 0.5rem 0.625rem;
                }
                .input-group-text {
                    border-right: 0;
                    border-radius: 5px !important;
                    border-left: 1px solid variables.$border-color;
                    &:last-child {
                        padding-left: 10px;
                        padding-right: 0;
                    }
                }
            }
            .mobile_btn {
                @include mixins.respond-below(custom991) {
                    right: 0;
                    left: unset;
                }
            }
            .mobile-user-menu {
                left: 0;
                right: auto;
                text-align: left;
            }
        }
        .input-icon-addon {
            right: 0;
            left: unset;
        }
        .input-icon .form-control {
            padding-left: 0;
            padding-right: 30px;
        }
        .nav-list::before {
            left: 0;
            right: unset;
        }
    }
}
[data-theme="dark"] {
    $text-color: variables.$darkmode-gray-500;    
    $border-color: #1F2228;
    $default-border: #1F2228;
    .bg-white {
        background-color: variables.$darkmode-white;
    }
    body {
        background: variables.$darkmode-light;
    }
    .header {
        background: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;        
        .header-left {
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
        .header-user {
            .user-menu {
                .btn-menubar {
                    color: variables.$darkmode-gray-500;
                    &:hover, &:active, &.active {
                        background-color: variables.$darkmode-dark-transparent;
                        border-color: variables.$darkmode-dark-transparent;
                        color: variables.$darkmode-gray-900;
                    }
                }
                .profile-dropdown {
                    .avatar img {
                        border-color: variables.$darkmode-gray-100;
                    }
                }
            }
        }
        .input-group {
            input {
                border-color: variables.$darkmode-gray-200 !important;
            }
        }
        
    }
    .head-icons a{
        background: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
        &:hover{
            background: variables.$primary;
        }
    }
    .sidebar {
        background: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
        .sidebar-logo {
            .logo {
                display: none;
            }
            .logo-white {
                display: block;
            }
        }
        .sidebar-menu{
            > ul{
                > li{
                    & > a {
                        &:hover {
                            span, i {
                                color: variables.$darkmode-gray-900;
                            }
                        }
                    }
                    > ul {
                        > li {
                            > a {
                                &:hover {
                                    background: variables.$darkmode-dark-transparent;
                                    i, span {
                                        color: variables.$darkmode-gray-900;
                                    }
                                }
                            }
                            &.submenu {
                                > a {
                                    &:hover, &.active, &.subdrop {
                                        background: variables.$darkmode-dark-transparent;
                                        span, i {
                                            color: variables.$darkmode-gray-900;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-900;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &.active{
                        a{
                            color: variables.$white;
                        }
                    }
                    > a{
                        span{
                            color: variables.$darkmode-gray-600;
                        }
                    }
                    ul{
                        li{
                            a {
                                color: variables.$darkmode-gray-900;
                                i{
                                    color: variables.$darkmode-gray-500;
                                }
                                span {
                                    color: variables.$darkmode-gray-900;
                                }
                                &.active{
                                    color: variables.$primary;
                                }
                            }  
                        }
                        & > li {
                            &.active a{
                                background: variables.$darkmode-dark-transparent;
                                color: variables.$white;
                                .menu-arrow {
                                    &::before {
                                        border-right: 2px solid variables.$primary;
                                        border-bottom: 2px solid variables.$primary;
                                    }
                                }
                                &.subdrop{
                                    background: variables.$darkmode-primary-transparent;
                                    color: variables.$primary;
                                    i{
                                        color:variables.$darkmode-white;
                                        background:variables.$darkmode-white;
                                    }
                                    span {
                                        color: variables.$primary;
                                        
                                    }
                                }
                            }
                        }
                    }
                    .submenu {
                        ul {
                            &::before {
                                background: variables.$darkmode-gray-100;
                            }
                        }
                    }
                }
                li {              
                    &.menu-title {
                        color: variables.$darkmode-gray-400;
                    }
                    .submenu > {
                        ul{
                            li{
                                a{
                                    color: variables.$darkmode-gray-500;
                                    &:before {
                                        background: variables.$primary;
                                    }
                                    &.active {
                                        color: variables.$primary;
                                    }
                                    &:hover {                                    
                                        color: variables.$primary;
                                    }
                                }
                            }
                        }
                        
                        a {
                            &.subdrop {
                                background: variables.$darkmode-dark-transparent;
                                i {
                                    color: variables.$darkmode-gray-900;
                                }
                            }
                            &.active {
                                background: variables.$darkmode-dark-transparent;
                                i {
                                    color: variables.$darkmode-gray-900;
                                }
                            }
                        }
                    }
                    .submenu.submenu-two {
                        a {
                            &.subdrop, &.active {
                                background: transparent;
                                color: variables.$primary;
                            }
                        }
                    }
                }
    
            }            
            .menu-arrow {
                &::before {
                    border-right: 2px solid variables.$darkmode-gray-900;
                    border-bottom: 2px solid variables.$darkmode-gray-900;
                }
            }
        }
        .nav-link {
            color: variables.$darkmode-gray-700;
        }
        .btn-menubar { 
            border: 1px solid variables.$darkmode-gray-100;   
            color: variables.$darkmode-gray-500;
            &:hover, &:active, &.active {
                background-color: variables.$darkmode-dark-transparent;
                border-color: variables.$darkmode-dark-transparent;
                color: variables.$darkmode-gray-900;
            }
        }
        .input-group {
            input {
                border-color: variables.$darkmode-gray-200 !important;
            }
        }
    }
    .mini-sidebar {
        .sidebar {
            .sidebar-logo {
                .logo-white  {
                    display: none;
                }
            }
        }
        &.expand-menu {
            .sidebar {
                .sidebar-logo {
                    .logo-white  {
                        display: block;
                    }
                    .logo-small, .logo {
                        display: none;
                    }
                }
            }
        }
    }
    .form-control {
        background-color: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
    }
    .input-group-text {
        background-color: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
        color: variables.$darkmode-gray-900;
    }
    .sidebar-stacked {
        .stacked-mini {
            border-right: 1px solid variables.$darkmode-gray-100;
            background-color: variables.$darkmode-light-transparent;
        }
        &.sidebar {
            background-color: transparent;
            .nav-link {
                border: 1px solid variables.$darkmode-gray-100;
                color: variables.$darkmode-gray-900;
                &.active, &:hover {
                    background: variables.$darkmode-light;
                    color: variables.$darkmode-gray-900;
                }
                p {
                    color: variables.$darkmode-gray-900;
                }
            }
            .sidebar-right {
                background: variables.$darkmode-white;
                border-right: 1px solid variables.$darkmode-gray-200;
                .logo {
                    text-align: center;
                }
                .stack-submenu {
                    background: variables.$darkmode-white;
                }
                ul {
                    li {
                        a {
                            color: variables.$darkmode-gray-500;
                            &.subdrop {
                                background: variables.$darkmode-dark-transparent;
                                i {
                                    color: variables.$darkmode-gray-700;
                                }
                            }
                            &.active {
                                background: variables.$darkmode-dark-transparent;
                                i {
                                    color: variables.$darkmode-gray-700;
                                }
                            }
                        }                    
                        &.active{
                            a {
                                background: variables.$darkmode-dark-transparent;
                            }
                        }
                        &.submenu {
                            > a {
                                &:hover {
                                    background: variables.$darkmode-dark-transparent;
                                    color: variables.$darkmode-gray-500 !important;
                                }
                            }
                            ul {
                                & > li {
                                   & > a{
                                        &:hover, &.active {
                                            color: variables.$primary;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                   & > ul {                
                        & > li {
                            > a {
                                &:hover {
                                    background: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
    
                }
            }
        }
    }   
    .sidebar-horizontal {
        &.sidebar {
            .sidebar-menu {
                ul {
                    li {
                        &.submenu  {
                            & > a {
                                color: variables.$darkmode-gray-900;
                                &:hover {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                            ul {
                                li {
                                    a {
                                        color: variables.$darkmode-gray-500;
                                        &:hover, &.active {
                                            background-color: variables.$darkmode-dark-transparent;
                                        }
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-500;
                                            }
                                        }
                                    }
                                }
                            }
                        }                    
                    }
                    ul {
                        background-color: variables.$darkmode-white;
                    }
                }
            }     
            .sidebar-menu {
                    ul {
                        li {
                            &.submenu  {
                            & > a {
                                &.active, &.subdrop {
                                    background-color: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .menu-horizontal {
        .header {
            .header-left {
                .logo {
                    display: none;
                }
                .logo-white {
                    display: block;
                }
            }
        }
    }
    .sidebar-twocol{
        .twocol-mini {
            border-right: 1px solid variables.$darkmode-gray-200;
            background-color: variables.$darkmode-white;
        }
        &.sidebar {
            background-color: transparent;
            .nav-link {
                color: variables.$darkmode-gray-700;
                &.active, &:hover {
                    background: variables.$darkmode-light;
                    color: variables.$darkmode-gray-700;
                }
                &::before {
                    background: variables.$success;
                }
            }
            .sidebar-right {
                background: variables.$darkmode-white;
                border-right: 1px solid variables.$darkmode-gray-200;
                .sidebar-logo {
                    .logo-white {
                        display: block;
                    }
                    .logo {
                        display: none;
                    }
                }
                ul {
                    li {
                        &.menu-title {
                            color: variables.$darkmode-gray-400;
                        }
                        a {
                            color: variables.$darkmode-gray-500;
                            &.subdrop {
                                background: variables.$darkmode-dark-transparent;
                                i {
                                    color: variables.$darkmode-gray-700;
                                }
                                &:hover {
                                    color: variables.$darkmode-gray-500 !important;
                                }
                            }
                            &.active {
                                background: variables.$darkmode-dark-transparent;
                                i {
                                    color: variables.$darkmode-gray-700;
                                }
                            }
                        }                    
                        &.active{
                            a {
                                background: variables.$darkmode-dark-transparent;
                            }
                        }
                        &.submenu {                        
                            & > a {
                                &:hover {
                                    background: variables.$darkmode-dark-transparent;
                                    color: variables.$darkmode-gray-500 !important;
                                }
                            }
                            ul {
                                & > li {
                                   & > a{
                                        &:hover, &.active {
                                            color: variables.$primary;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .tab-pane {
                   & > ul {                
                        & > li {
                            > a {
                                &:hover {
                                    background: variables.$darkmode-dark-transparent;
                                }
                            }
                        }
                    }
    
                }
                .menu-arrow {
                    &:before {
                        content: "\f105";
                    }
                }
            }
        }
    }   
    .sidebar-nav {
        background: variables.$darkmode-light;
    }
    h1, h2, h3, h4, h5, h6 {
        color: variables.$darkmode-gray-900;
    }
    .bg-light {
        background-color: variables.$darkmode-light !important;
        border-color: variables.$darkmode-light !important;
    }
    a {
        color: variables.$darkmode-gray-900;
    }
    kbd {
        background-color: variables.$darkmode-dark-transparent;
        color: variables.$darkmode-gray-500;
    }
    .input-group-flat {
        &:focus-within {      
            .form-control,
            .input-group-text {
                border-color: variables.$darkmode-gray-200 !important;
            }
        }
    }
    .card {
        background-color: variables.$darkmode-white;
        border:1px solid variables.$darkmode-gray-200;    
        .card-title {  
            color: variables.$darkmode-gray-900;   
        }
        .card-header {
            border-color: variables.$darkmode-gray-200;
        }
        .card-footer {
            border-color: variables.$darkmode-gray-200;
        }    
    }
    .alert-light {
        background-color: variables.$darkmode-light;
        color: $text-color;
        border-color: variables.$darkmode-light;
        .alert-link {
          color: $text-color;
        }
        .btn-close {
          color: $text-color;
          &.custom-close {
            @include alerts.custom-close(variables.$darkmode-light);
          }
        }
    }
    .custom-alert1 {
        background-color: variables.$darkmode-white;
    }
    .alert-primary, .alert-secondary, .alert-warning, .alert-danger  {
        &.custom-alert-icon {
            background-color: variables.$darkmode-white;
            border-color: variables.$darkmode-gray-200;
        }
    }
    &[data-layout="horizontal-overlay"][data-topbarcolor="white"],
    &[data-layout="horizontal-sidemenu"][data-topbarcolor="white"]  {   
        .header {
            left: 0;
            background-color: variables.$darkmode-white;
            border-color: color.adjust(variables.$darkmode-white, $lightness: 10%);
            .header-user {
                .user-menu {
                    .btn-menubar {
                        color: variables.$darkmode-gray-500;
                        &:hover {
                            background: variables.$darkmode-dark-transparent;
                            color: variables.$darkmode-gray-500;
                        }
                    }
                }
            }
            .header-left {
                display: block;
                .logo {
                    display: none;
                }
                .logo-white {
                    display: block;
                }
            }
        }      
        .mode-toggle {
            color: variables.$darkmode-gray-500;
        }
        .sidebar-horizontal {
            &.sidebar {
                background-color: variables.$darkmode-white;
                border-bottom: 1px solid color.adjust(variables.$darkmode-white, $lightness: 10%);
                .sidebar-menu {
                    .nav-menu {
                        > li {     
                            &.submenu {
                                & > a {
                                    color: variables.$darkmode-gray-900;
                                    &.active, &:hover,  &.subdrop {
                                        background-color: variables.$darkmode-dark-transparent;
                                        color: variables.$darkmode-gray-900;
                                        .menu-arrow {
                                            &::before {
                                                border-color: variables.$darkmode-gray-900;
                                            }
                                        }
                                    }
                                    .menu-arrow {
                                        &::before {
                                            border-color: variables.$darkmode-gray-900;;
                                        }
                                    }
                                }
                            }
                        }
                        .menu-arrow {
                            &::before {
                                border-color: variables.$darkmode-gray-900;
                            }
                        }
                    }
                }
            }
        }
        .main-wrapper {
            &::before {
                content: "";
                background: variables.$darkmode-white;
            }
        }
    }
    .page-wrapper {
        &::before {
            background: variables.$darkmode-white;
        }
    }
    .accordion-button {
        background-color: variables.$darkmode-white;
        color: $text-color;
        &:not(.collapsed) {
        }
        &:after {
            content: "\f078";
            background-color: variables.$darkmode-white;
            color: $text-color;
        }
    }  
    .accordion-body {
        color: variables.$text-muted;
    }
    .accordion-item {
        color: $text-color;
        background-color: variables.$darkmode-white;
        border-color: variables.$darkmode-light-900;
    }
    .accordion {
        &.accordion-primary, &.accordion-secondary {
            .accordion-button.collapsed {
                background-color: variables.$darkmode-white;
                color: $text-color;
                &::after {
                    background-color: variables.$darkmode-white;
                    color: $text-color;
                }
            }
        }
        &.accordion-solid-primary, &.accordion-solid-secondary,
        &.accordion-solid-warning, &.accordion-solid-info, &.accordion-solid-success, &.accordion-solid-danger {
            .accordion-button {
                color: variables.$darkmode-white;;
                &.collapsed {
                    background-color: variables.$darkmode-white;
                    color: $text-color;
                    &::after {
                        background-color: variables.$darkmode-white;
                        color: $text-color;
                    }
                }
            }   
        }
        &.accordion-border-primary, &.accordion-border-secondary,
        &.accordion-border-warning, &.accordion-border-info, &.accordion-border-success, &.accordion-border-danger {
            .accordion-button {
                background-color: variables.$darkmode-white;
                &::after {
                    background-color: variables.$darkmode-white;
                }
            }
        }
    }
    .bg-outline-primary, .bg-outline-secondary, .bg-outline-success,
    .bg-outline-danger, .bg-outline-warning, .bg-outline-info, .bg-outline-light, .bg-outline-light {
        background-color: variables.$darkmode-white;
    }    
    .bg-outline-light {
        border: 1px solid variables.$darkmode-light !important;
        color: variables.$darkmode-gray-900 !important;
    }
    .border-container {
        background-color: variables.$darkmode-light;
    }
    .border {
        border-color: $border-color !important;
        &.border-primary {
            border: 1px solid variables.$primary !important;
        }
        &.border-secondary {
            border: 1px solid variables.$secondary !important;
        }
        &.border-success {
            border: 1px solid variables.$success !important;
        }
        &.border-warning {
            border: 1px solid variables.$warning !important;
        }
        &.border-danger {
            border: 1px solid variables.$danger !important;
        }
        &.border-info {
            border: 1px solid variables.$info !important;
        }
        &.border-light {
            border: 1px solid variables.$darkmode-light !important;
        }
        &.border-white {
            border: 1px solid variables.$darkmode-white !important;
        }
    }
    .border-top {
        border-top: 1px solid $border-color !important;
    }
    .border-end {   
        border-inline-end: 1px solid $border-color !important;
    }
    .border-bottom {
        border-bottom: 1px solid $border-color !important;
    }
    .border-start {
        border-inline-start: 1px solid $border-color !important;
    }
    .list-group-item {
        background-color: variables.$darkmode-white;
        border-color: variables.$darkmode-light-900 !important;
    }
    .toast {
        background-color: variables.$darkmode-white;
    }
    .avatar.online:before, .avatar.offline:before {
        border-color: variables.$darkmode-white !important;
    }
    .swal2-popup {
        background-color: variables.$darkmode-white;
    }
    .progress, .progress-stacked {
        background-color: variables.$darkmode-light-900;
    }
    .popover {
        background-color: variables.$darkmode-white;
        border: 1px solid $default-border;
        box-shadow: none;
        .popover-header {
          background-color: variables.$darkmode-white;
          border-block-end: 1px solid $default-border;
        }
        .popover-body {
          color: $text-color;
        }
      }
      .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
      .bs-popover-top > .popover-arrow::after,
      .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
      .bs-popover-top > .popover-arrow::before {
        border-top-color: variables.$darkmode-light;
      }
      .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
      .bs-popover-end > .popover-arrow::after,
      .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
      .bs-popover-end > .popover-arrow::before {
        border-right-color: variables.$darkmode-light;
      }
      .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
      .bs-popover-start > .popover-arrow::after,
      .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
      .bs-popover-start > .popover-arrow::before {
        border-left-color: variables.$darkmode-light;
      }
      .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
      .bs-popover-bottom > .popover-arrow::after,
      .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
      .bs-popover-bottom > .popover-arrow::before,
      .bs-popover-auto[data-popper-placement^="bottom"] .popover-header::before,
      .bs-popover-bottom .popover-header::before {
        border-bottom-color: variables.$darkmode-light;
    }
    .page-link {
        color: $text-color;
        background-color: variables.$darkmode-white;
        border: 1px solid $border-color;
        &:focus {
            background-color: variables.$darkmode-light;
        }
        &:hover {
            background-color: variables.$darkmode-light;
            border-color: $border-color;
        }
    }
    .pagination-style-2 .pagination .page-item.active .page-link {
        background-color: variables.$darkmode-light;
    }
    .pagination-style-1 .pagination .page-item:hover .page-link {
        background-color: variables.$darkmode-light;
    }
    .pagination-style-3 .pagination .page-item:hover .page-link {
        background-color: variables.$darkmode-light;
    }
    .offcanvas {
        background-color: variables.$darkmode-white;
        color: $text-color;
    }
    .modal-content {
        background-color: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
        .modal-header {
            border-color: variables.$darkmode-gray-200;
        }
        .modal-footer {
            border-color: variables.$darkmode-gray-200;
        }
    }
    .figure-caption {
        color: $text-color;
    }
    .text-dark {
        color: variables.$darkmode-dark !important;
    }
    .nav-tabs li a {
        color: variables.$darkmode-gray-900;
    }
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        background-color: variables.$darkmode-white;
        color:  variables.$darkmode-gray-900;
    }
    .nav-tabs .nav-link.active {
        border-color: variables.$darkmode-gray-200;
    }
    .nav-tabs.nav-tabs-solid {
        background-color: variables.$darkmode-white;
    }
    .nav.tab-style-1 {
        background-color: variables.$darkmode-light;
    }
    .vertical-tabs-2 .nav-item .nav-link {
        background-color: variables.$darkmode-light;
        border-color: variables.$darkmode-gray-200;
        &.active {
            background-color: variables.$primary;
        }
    }
    .tab-style-2 {
        .nav-item .nav-link {            
            i {
                background-color: variables.$darkmode-light;
                color: variables.$darkmode-gray-500;
            }
        }
    }
    .nav-tabs.nav-tabs-top {
        li{
            a{
                &.active{
                    border-top-color: variables.$primary;      
                }
            }
        }
    }
    .tab-style-3 {
        .nav-item {
            .nav-link {
                &::after {
                    background-color: variables.$darkmode-white;
                    border-color: variables.$darkmode-gray-200;
                }
                &:before { 
                    background-color: variables.$darkmode-light;
                }
                &.active{
                    &:before {
                        background-color: variables.$primary;
                      }
                      &:after {
                        border-color: variables.$primary;
                        color: variables.$primary;
                      }
                }
            }
        }
    }
    .tab-style-6 {
        background-color: variables.$darkmode-white;
    }
    .bg-white {
        background-color: variables.$darkmode-white !important;
    }
    .card.card-bg-primary .card-body, .text-fixed-white {
        color: variables.$darkmode-white;
    }
    .btn {
        &.btn-light {
            background-color: variables.$darkmode-light-900;
            border: 1px solid variables.$darkmode-light-900;
            color: variables.$darkmode-gray-500;
            &:hover,
            &:focus,
            &.focus,
            &:active,
            &.active {
                background-color: color.adjust(variables.$darkmode-light-900, $lightness: -3%);
                border: 1px solid variables.$darkmode-light-900;
                color: variables.$darkmode-gray-500;
            }
        }
    }
    .scroll-demo {
        border-color: variables.$darkmode-gray-200;
    }
    .timeline  {
        &::before {
            background-color: variables.$darkmode-gray-200;
        }
        & > li {
            & > .timeline-panel {
                border-color: variables.$darkmode-gray-200;
                &::after, &::before { 
                    border-color: variables.$darkmode-gray-200;
                }
            }
        }
    }
    .callout {
        background-color: variables.$darkmode-light;
    }
    .icons-list {
        li {
            border-color: variables.$darkmode-gray-200;
            box-shadow: none;
        }
    }
    .btn-outline-light {
        border: 1px solid variables.$darkmode-light !important;
        color: variables.$darkmode-gray-700 !important;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: variables.$darkmode-light !important;
            border: 1px solid variables.$darkmode-light !important;
            color: variables.$darkmode-gray-700 !important;
        }
    }
    .bg-dark {
        background-color: variables.$darkmode-dark !important;
        border-color: variables.$darkmode-dark !important;
        color: variables.$darkmode-white;
    }
    .twitter-bs-wizard .twitter-bs-wizard-nav {
        .nav-link::after {
            background-color: variables.$darkmode-gray-200;
        }
    }
    .form-check-input {
        background-color: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
    }
    .alert-outline-primary, .alert-outline-secondary, .alert-outline-warning, .alert-outline-danger,
    .alert-outline-info, .alert-outline-dark, .alert-outline-success, .alert-outline-light {
        background-color: variables.$darkmode-white;
    }
    .text-light {
        color: variables.$darkmode-light !important;
      }
    .table {
        thead {
            tr {
                border-color: variables.$darkmode-gray-200;
                    th {
                        border-color: variables.$darkmode-gray-200;
                        background-color: variables.$darkmode-gray-200;
                        color: variables.$darkmode-gray-900;
                    }
            }
        }
        tbody {
            tr {
                border-color: variables.$darkmode-gray-200;
                th {
                    border-color: variables.$darkmode-gray-200;
                        background-color: variables.$darkmode-gray-200;
                        color: variables.$darkmode-gray-900;
                }
                td {
                    background-color: variables.$darkmode-white;
                    color: variables.$darkmode-gray-500;
                    border-color: variables.$darkmode-gray-200;
                }
            }
        }
        .thead-primary th {
            background-color: variables.$primary;
        }
        .thead-secondary th {
            background-color: variables.$secondary;
        }
        .thead-info th {
            background-color: variables.$info;
        }
        .thead-warning th {
            background-color: variables.$warning;
        }
        .thead-danger th {
            background-color: variables.$danger;
        }
        .thead-success th {
            background-color: variables.$success;
        }
        .thead-dark th {
            background-color: variables.$darkmode-dark;
        }
        .thead-light th {
            background-color: variables.$darkmode-light-600;
        }
    }
    table.table.dataTable {
        & > tbody {
            > tr {
                border-color: variables.$darkmode-gray-200;
                td {
                    color: variables.$darkmode-gray-500;                
                    border-color: variables.$darkmode-gray-200;
                }
            } 
        }
        & > thead > tr {
            border-color: variables.$darkmode-gray-200;
                th {
                    color: variables.$darkmode-gray-900;
                }
        }
    }
    .dataTables_length {
        label {
            color: variables.$darkmode-gray-700;    
            .form-select {
                border: 1px solid variables.$darkmode-gray-200;
                color: variables.$darkmode-gray-900;
            }
        }
    }
    .form-label {
        color: variables.$darkmode-gray-900;
    }
    .form-control {
        color: variables.$darkmode-gray-900;
    }
    .form-select {
        background-color: variables.$darkmode-white;
        color: variables.$darkmode-gray-900;
        border-color: variables.$darkmode-gray-200;
        option {
            background-color: variables.$darkmode-white;
        }
    }
    .select2-container--default {
        .select2-selection--single {
            border-color: variables.$darkmode-gray-200;
            background: variables.$darkmode-white;
            .select2-selection__rendered {
                color: variables.$darkmode-gray-900 !important;
            }
            .select2-selection__arrow {
                b {
                    border-color: variables.$darkmode-gray-900;
                }
            }
        }
        .select2-results__option--highlighted[aria-selected] {
            color: variables.$darkmode-white;
        }
    }
    .select2-container--focus  {
        .select2-selection--single{
            background: variables.$darkmode-white !important;
            border-color: variables.$darkmode-gray-200;
        }
    }
    .select2-container--classic .select2-selection--single,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--default .select2-selection--single .select2-selection__arrow,
    .select2-container--default .select2-selection--multiple,
    .select2-container--classic .select2-selection--single .select2-selection__arrow,
    .select2-container--classic .select2-selection--single .select2-selection__rendered {
        border-color: variables.$darkmode-gray-200;
        color: variables.$darkmode-gray-500;
    }
    .select2-dropdown {
        border-color: variables.$darkmode-gray-200;
        background: variables.$darkmode-white;
    }
    .select2-container--classic .select2-selection--multiple .select2-selection__choice,
    .select2-container--default .select2-selection--multiple .select2-selection__choice,
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: variables.$darkmode-white;
    }
    .form-floating > .form-control-plaintext ~ label::after, 
    .form-floating > .form-control:focus ~ label::after, 
    .form-floating > .form-control:not(:placeholder-shown) ~ label::after, 
    .form-floating > .form-select ~ label::after {
        background-color: variables.$darkmode-white;
    }
    .select2-container--default .select2-selection--multiple {
        background-color: variables.$darkmode-white;
    }
    .custom-file-container {
        .custom-file-container__custom-file__custom-file-control {
            background-color: variables.$darkmode-gray-100;
            border-color: variables.$darkmode-gray-100;
        }
    }
    .dropdown-menu {
        background-color: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
        color: variables.$darkmode-gray-900;
        .dropdown-item {
            color: variables.$darkmode-gray-900;
            &:not(.active) {
                &:hover,
                &:focus,
                &:active {
                  color: variables.$darkmode-gray-900;
                  background-color: variables.$darkmode-light-500;
                }
              }
              &.active {
                background-color: variables.$darkmode-light-500;
              }
        }
    }
    .dropdown-divider {
        border-color: variables.$darkmode-gray-200;
    }
    &[data-sidebar="light"] [data-sidebarbg="sidebarbg1"],
    &[data-sidebar="light"] [data-sidebarbg="sidebarbg2"],
    &[data-sidebar="light"] [data-sidebarbg="sidebarbg3"],
    &[data-sidebar="light"] [data-sidebarbg="sidebarbg4"],
    &[data-sidebar="light"] [data-sidebarbg="sidebarbg5"],
    &[data-sidebar="light"] [data-sidebarbg="sidebarbg6"] {
        #sidebar {
            &::before  {
                background: rgba(variables.$darkmode-white, 0.85);
            }
        }
    }
    .theme-width {
        input[type="radio"]{
            &:checked{
                ~ label{
                    border-color: variables.$primary;
                    &::before {
                        border-color: variables.$primary;
                    }
                }
            }
        }
        label {
            border-color: variables.$darkmode-gray-200;
            color: variables.$darkmode-gray-500;
            &::before {
                border-color: variables.$darkmode-gray-200;
                background: variables.$darkmode-white;
            }
            &::after {
                background: variables.$primary;
            }
        }
    }
    .theme-sidebarcolor {
        input[type="radio"]{
            &:checked{
                ~ label{                
                    border-color: variables.$primary !important;
                    &:after{
                        color: variables.$primary;
                    }
                    &.bg-dark {
                        &:after{
                            color: variables.$darkmode-white;
                        }
                    }
                }
            }
        }
        label {        
            border-color: variables.$darkmode-gray-200;
        }
    }
    .theme-sidebarbg {
        input[type="radio"]{
            &:checked{
                ~ label{
                    &:after{
                        color: variables.$primary;
                        background: variables.$white;
                        border-color: variables.$darkmode-gray-200;
                    }      
                }
            }
        }
        label { 
            img { 
                border-color: variables.$darkmode-gray-200;
            }
        }
    }
    .theme-colorselect {
        input[type="radio"]{
            &:checked{
                ~ label{
                    outline-color: variables.$primary;
                    &:after{
                        color: variables.$primary;
                        background: variables.$white;
                        border-color: variables.$darkmode-gray-200;
                    }
                    &.primary-topbar,   &.dark-topbar {
                        &:after{
                            color: variables.$darkmode-white;
                        }
                    }
                }
            }
        }
        label {
            outline-color: variables.$darkmode-gray-200;
            &.white-topbar {
                background: variables.$darkmode-white;
                border-color: variables.$darkmode-gray-200;
            }
        }
        .pickr-container-background, .pickr-topbar, .pickr-topbarcolor { 
            outline-color: variables.$darkmode-gray-200;
        }
    }
    .theme-colorsset{
        label{
            border-color: variables.$darkmode-gray-200;
            &.primary-clr{
                &::before {
                    background: variables.$primary;
                }
            }
            &.brightblue-clr{
                &::before {
                    background: variables.$brightblue;
                }
            }
            &.lunargreen-clr{
                &::before {
                    background: variables.$lunargreen;
                }
            }
            &.lavendar-clr{
                &::before {
                    background: variables.$lavendar;
                }
            }
            &.magenta-clr{
                &::before {
                    background: variables.$magenta;
                }
            }
            &.chromeyellow-clr{
                &::before {
                    background: variables.$chromeyellow;
                }
            }
            &.lavared-clr{
                &::before {
                    background: variables.$lavared;
                }
            }
        }
        input[type="radio"]{
            &:checked{
                ~ label{
                    &:after{
                        color: variables.$darkmode-white;
                    }
                }
            }
        }
    }    
    .theme-mode {
        input[type="radio"]{
            &:checked{
                ~ label{
                    border-color: variables.$primary;
                    .avatar {
                        color: variables.$warning;
                        background-color: variables.$warning-transparent;
                    }
                }
            }
        }
        label {
            border-color: variables.$darkmode-gray-200;
            color: variables.$darkmode-gray-700;
            .avatar {
                background-color: variables.$darkmode-dark-transparent;
                color: variables.$darkmode-dark;
            }
        }        
        .pickr-container-primary {
            border-color: variables.$darkmode-gray-200;
        }
    }
    .theme-layout {
        &.active {
            img {
                border: 1px solid variables.$primary;
            }
        }
        input[type="radio"]{
            &:checked{
                ~ label{
                    .layout-img {
                        img {
                            border-color: variables.$primary;
                        }
                    }
                }
            }
        }
        label {
            .layout-img {
                img {
                    border-color: variables.$darkmode-gray-200;
                }
            }            
            .layout-type { 
                color: variables.$darkmode-gray-900;
            }
        }
    }
    &[data-layout=modern][data-topbarcolor=white] {
        .header {
            background-color: variables.$darkmode-white;
            border-color: rgba(variables.$darkmode-white, 0.8);
            .bar-icon {
                span {
                    background-color: variables.$darkmode-white;
                }
            }
            .header-user {
                .user-menu {
                    .btn-menubar {
                        color: variables.$darkmode-gray-500;
                        &:hover, &:active, &.active {
                            background-color: variables.$darkmode-white;
                            color: variables.$darkmode-gray-500 !important;
                        }
                    }
                }
            }
            .header-left {
                .logo {
                    display: none;
                }
                .logo-white {
                    display: block;
                }
            }
        }
        .page-wrapper {
            &::before {
                background: variables.$darkmode-white;
            }
        }   
    }
    &[data-layout="modern"][data-topbarcolor="firefly"],
    &[data-layout="modern"][data-topbarcolor="bluegem"],
    &[data-layout="modern"][data-topbarcolor="blackpearl"],
    &[data-layout="modern"][data-topbarcolor="maroon"],
    &[data-layout="modern"][data-topbarcolor="primary"]     {
        .header {
            .bar-icon {
                span {
                    background-color: variables.$darkmode-white;
                }
            }
            .header-user {
                .user-menu {
                    .btn-menubar {
                        color: variables.$darkmode-gray-500;
                        &:hover, &:active, &.active {
                            background-color: variables.$darkmode-white;
                            color: variables.$darkmode-gray-500 !important;
                        }
                    }
                }
            }
        }
    }
    .policy-upload {
        border-color: $border-color;
    }
    .bootstrap-tagsinput {
        background-color: variables.$darkmode-white;
        border-color: $border-color;
    }
    .note-toolbar, .note-dropdown-menu, .note-modal-content, .note-input {
        background-color: variables.$darkmode-light;
        border-color: $border-color;
        color: variables.$darkmode-gray-900;
    }
    .note-btn {
        background-color: variables.$darkmode-white;
        border-color: $border-color;
        color: variables.$darkmode-gray-900;
    }
    .note-modal-header, .file-drop {
        border-color: $border-color;
    }
    .close {
        color: variables.$darkmode-gray-900;
    }
    .video-wrap {
        .video-content {
            background-color: variables.$darkmode-white;
        }
    }
    .bg-black {
        .text-white {
            color: variables.$darkmode-gray-900 !important;
        }
    }
    .bg-transparent-light {
        background: variables.$darkmode-light !important;
    }
    .contact-grids-tab .nav-underline {
        border-color: $border-color;
        .nav-item .nav-link {
            &.active, &:hover {
                background-color: variables.$darkmode-white;
            }
        }
    }
    .bg-primary-100 {
        a {
            color: variables.$darkmode-white;
            &:hover {
                color: variables.$primary;
            }
        }
    }
    .notification-dropdown {
        .dropdown {
            .dropdown-toggle {
                color: variables.$darkmode-gray-900;
                &.show {
                    color: variables.$darkmode-gray-900;
                }
            }
        }
    }
    .bootstrap-datetimepicker-widget {
        table {
            th {
                color: variables.$darkmode-gray-900;
            }
        }
    }
    .crm-link {
        color: variables.$darkmode-gray-900;
        background: variables.$darkmode-light;
        border: $border-color;

    }
}

[data-theme="dark"] {
    .breadcrumb .breadcrumb-item.active {
        color: variables.$darkmode-gray-800;
    }
    .table tbody tr td a {
        color: variables.$darkmode-gray-800;
    }
    .btn.btn-icon.active.bg-white {
        border-color: variables.$darkmode-gray-200;
        color: variables.$darkmode-gray-800;
    }
    .btn.btn-white {
        background: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
        color: variables.$darkmode-gray-800;
    }
    .todo-item .form-check-label {
        color: variables.$darkmode-gray-800;
    }
    .bg-transparent-secondary,.bg-transparent-dark,.bg-light-500 {
        background: variables.$darkmode-gray-700 !important;
    }
    .text-gray-9, .text-title {
        color: variables.$darkmode-gray-800 !important;
    }
    .attendance-bg {
        background: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200 !important;
    }
    .chat-wrapper .sidebar-group {
        background: variables.$darkmode-gray-200;
    }
    .chat-wrapper .chat-users-wrap .chat-user-list,.chat-wrapper .chat .chat-header,.chat-wrapper .chat {
        background: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
    }
    .chat-wrapper .search-wrap .input-group-text {
        background: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200
    }
    .chat-wrapper .search-wrap .form-control {
        border-color: variables.$darkmode-gray-200
    }
    .chat-wrapper .chat .chat-footer .footer-form {
        background: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
    }
    .chat-wrapper .chat .chat-footer .footer-form .chat-footer-wrap {
        background: variables.$darkmode-gray-200;
    }
    .chat-wrapper .chat .chat-body .messages .chats .chat-content .message-content {
        background: variables.$darkmode-gray-200;
    }
    .chat-wrapper .chat .chat-header .chat-options > ul > li > a {
        background: variables.$darkmode-gray-200;
    }
    #calendar {
        .fc-scroller-harness th {
            background: variables.$darkmode-white;
            border-color: variables.$darkmode-gray-200;
        }
        .fc-col-header-cell-cushion,.fc-daygrid-day-number {
            color: variables.$darkmode-gray-800;
        }
        .fc-daygrid-body tbody td {
            background: variables.$darkmode-white;
            border-color: variables.$darkmode-gray-200;
        }
        .fc-daygrid .fc-scrollgrid {
            border-color: variables.$darkmode-gray-200;
        }
    }
}
.sidebar-horizontal {
    margin: 0 auto;
    box-shadow: variables.$box-shadow-sm;
    &.sidebar {
        width: 100% !important;
        bottom: inherit;
        top: 64px;
        border-right: 0;
        z-index: 20;
        .sidebar-logo {
            display: none;
        }
        .sidebar-menu ul li span {
            display: inline-block !important;
        }
        .slimScrollDiv {
            top: 0;
            height: auto !important;
            overflow: inherit !important;
            padding: 0;
        }
        .sidebar-inner {
            height: auto !important;
            overflow: inherit !important;
        }
        .hidden{
            display: none !important;
        }
        .sidebar-menu {
            padding:  0 !important;
            height: 46px;
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: 100%;
            .nav-menu {
                & > li {
                    margin-right: 8px;
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
            ul {
                display: flex;
                align-items: center;
                -webkit-align-items: center;
                li {
                    position: relative;
                    &.submenu  {
                        & > a {
                            font-size: variables.$font-size-12;
                            color: variables.$gray-900;
                            @include mixins.rounded(5px);
                            padding: 8px 30px 8px 8px;
                            i {
                                margin-right: 4px;
                            }
                            &:hover {
                                color: variables.$primary;
                            }
                        }
                        .noti-dot {
                            &:before {
                                display: none;
                            }
                        }
                        ul {
                            li {
                                &.submenu {
                                    a {
                                        font-size: variables.$font-size-12;
                                    }
                                }
                                a {
                                    color: variables.$gray-700;
                                    @include mixins.rounded(5px);
                                    &:hover, &.active {
                                       color: variables.$primary;
                                    }
                                }
                            }
                        }
                        &.submenu-two {
                            ul {
                                max-height: none;
                            }
                        }
                    }                    
                }
                ul {
                    display: none;
                    width: 170px;
                    background-color: variables.$white;
                    position: absolute;
                    top: 30px;
                    left: 0;
                    padding: 8px;
                    li {
                        a {
                            .menu-arrow {
                                right: 15px;
                            }
                        } 
                    }
                    a {
                        padding: 8px 15px;
                    }
                }
            }
            .menu-title{
                display: none !important;
            }
        }
        .sidebar-vertical{
            display: none !important;
        }
        .sidebar-menu ul li a {
            flex-direction: inherit;
            text-align: left;
            padding: 7px 8px;
            font-size: variables.$font-size-12;
            font-weight: variables.$font-weight-medium;
            display: block;
            position: relative; 
        }
        ul li span {
            display: inline-block !important;
        }           
        .sidebar-menu ul {
            ul {
                & > li {
                    &.submenu {
                        & > ul {
                            position: relative;
                            top: 0;
                            padding: 0;
                            width: 100%;
                        }
                    }
                }
            }
        }
        ul ul li {
            display: inline-block !important;
            width:100%;
        }
    
    .sidebar-menu {
        max-width: 1320px;
        @include mixins.respond-below(custom1399) {
            max-width: 1170px;
        }             
        @include mixins.respond-below(custom1199) {
            max-width: 950px;
        }
        .main-menu {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
            ul {
                li {
                    &.submenu  {
                    & > a {
                        &.active, &.subdrop {
                            color: variables.$primary;
                        }
                        @include mixins.respond-above(custom1199) {
                            font-size: variables.$font-size-14;
                            padding: 8px 30px 8px 8px;
                            i {
                                margin-right: 5px;
                            }
                            .menu-arrow {
                                right: 8px;
                            }
                        }
                    }
                }
            }
        }
    }
    @include mixins.respond-below(custom991) {
        display: none !important;
        }
    }
}
.menu-horizontal {    
    #toggle_btn{
        display: none;
    }
    .page-wrapper {
        margin: 0;
        padding-top: 110px;
        max-width: 1320px;
        margin: 0 auto;
        @include mixins.respond-below(custom1399) {
            max-width: 1170px;
        }
        @include mixins.respond-below(custom1199) {
            max-width: 950px;
        }
        @include mixins.respond-below(custom991) {
            max-width: 100%;
        }
        .content {
            padding-left: 0;
            padding-right: 0;
            @include mixins.respond-below(custom991) {
                padding: 20px;
            }
        }
    }
    #sidebar {
        @include mixins.respond-above(custom991) {
            display: none;
        }
    }
    
    .header {
        left: 0;
        .main-header {
            margin: 0 auto;
            .user-menu {
                padding-right: 0;
            }
        }
        .header-left {
            display: flex;
            padding-left: 0;
            text-align: left;
            width: auto;
            .logo { 
                display: block;
            }
            .logo-white {
                display: none;
            }
        }
    }  
} 
.main-header {
    height: inherit;
}
body.mini-sidebar {
    .sidebar .sidebar-menu > ul > li.submenu-open ul li.submenu > a {
        padding: 8px 16px;
        i {
            margin-right: 0 !important;
        }
    } 
    &.expand-menu {
        .sidebar .sidebar-menu > ul > li.submenu-open ul li.submenu > a {
            padding: 8px;
            i {
                margin-right: 8px !important;
            }
        } 
    }
} 
.modern-profile {
    display: none;
}
.sidebar-twocol{
    .twocol-mini {
        border-right: 1px solid variables.$border-color;
        padding-top: 16px;
        width: 72px !important;
        background-color: variables.$white;
        .logo-small {
            display: block;
            text-align: center;
            margin-bottom: 24px;
        }
    }
    .slide-nav{
        .sidebar {
            margin-left: 0;
        }
    }
    &.sidebar {
        background-color: transparent;
        border-right: 0;
        margin-top: 0;
        z-index: 1001;
        position: fixed;
        top: 0;
        left: 0;
        @include mixins.transition(all 0.2s ease);
        display: none;
        @include mixins.respond-below(lg) {
            margin-left: -225px;
            width: 225px;
            @include mixins.transition(all 0.4s ease);
            z-index: 1041;
        }
        .slimScrollDiv {
            top: 0;
        }
        .nav-link {
            width: 26px;
            height: 26px;
            margin-bottom: 16px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            justify-content: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            color: variables.$gray-700;
            position: relative;
            &.active, &:hover {
                background: variables.$primary-100;
                color: variables.$gray-700;
            }
        }
        .sidebar-left {
            width: 72px;
        }
        .sidebar-right {
            background: variables.$white;
            width: 180px;
            height: 100%;
            border-right: 1px solid variables.$border-color;
            @include mixins.transition(all 0.2s ease);
            .sidebar-scroll {
                height: calc(100% - 50px);
                overflow: auto;
                padding: 0 16px 16px;
            }
            .sidebar-logo {
                text-align: center;
                position: relative;
                padding: 0;
                .logo-white {
                    display: none;
                }
            }
            .tab-content {
                padding-top: 0;
            }
            ul {
                padding: 0;
                margin: 0;
                list-style: none;
                li {
                    &.menu-title {
                        margin-bottom: 12px;
                        font-size: variables.$font-size-10;
                        text-transform: uppercase;
                        font-weight: variables.$font-weight-bold;
                        color: variables.$gray-400;
                    }
                    margin-bottom: 4px;
                    a {
                        font-weight: variables.$font-weight-medium;
                        font-size: variables.$font-size-12;
                        color: variables.$gray-500;
                        padding: 7px 8px;
                        display: block;
                        position: relative;
                        @include mixins.rounded(5px);
                        &.subdrop {
                            background: variables.$primary-100;
                            color: variables.$primary;
                            i {
                                color: variables.$gray-700;
                            }
                            &:hover {
                                color: variables.$primary;
                            }
                        }
                        &.active {
                            background: variables.$primary-100;
                            border-radius: 5px;
                            color: variables.$primary;
                            i {
                                color: variables.$gray-700;
                            }
                        }
                    }                    
                    &.active{
                        a {
                            background: variables.$primary-100;
                        }
                    }
                    &.submenu {                        
                        & > a {
                            &:hover {
                                background: variables.$primary-100;
                                color: variables.$gray-500 !important;
                            }
                        }
                        ul {
                            display: none;
                            margin-bottom: 10px;
                            margin-top: 5px;
                            & > li {
                               & > a{
                                padding-left: 15px;
                                    &:hover, &.active {
                                        color: variables.$primary;
                                    }
                                }
                            }
                        }
                        & > ul {
                            & > li {
                                & > a {
                                    &.active {
                                        background-color: transparent;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .tab-pane {
               & > ul {                
                    & > li {
                        > a {
                            &:hover {
                                background: variables.$primary-100;
                            }
                        }
                    }
                }

            }
            .menu-arrow {
                -webkit-transition: -webkit-transform 0.15s;
                -o-transition: -o-transform 0.15s;
                transition: transform .15s;
                display: inline-block;
                font-family: 'Font Awesome 5 Free';
                text-rendering: auto;
                line-height: 40px;
                font-size: variables.$font-size-12;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                line-height: 0;
                top: 50%;
                @include mixins.transform(translateY(-50%));
                position: absolute;
                right: 8px;
                font-weight: variables.$font-weight-bold;
                @include mixins.transform(translate(0, 0));
                &:before {
                    content: "\f105";
                }
            }
        }
        .sub-menu a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            -ms-flex-pack: space-between;
        }
        li {
            a.subdrop {
                .menu-arrow {
                    @include mixins.transform(rotate(90deg));
                }
            }
        }
    }
    @include mixins.respond-above(lg) {
        .mini-sidebar {
            .page-wrapper {
                margin-left: 60px;
            }
            #toggle_btn {
                margin-left: 10px;
            }
            .sidebar-right {
                display: none;
            }
        }
        .expand-menu{
            .sidebar-right {
                display: block;
                @include mixins.transition(all 0.2s ease);
            }
        }
    }
} 
body.layout-mode-rtl {
    .sidebar {
        .sidebar-menu {
          .submenu-open {
            .submenu {
              ul {
                li {
                  a {
                    &::after {
                      right: 15px;
                      left: unset;
                    }
                  }
                }
              }
            }
          }
        }
    }
    .header-left #toggle_btn {
        left: -13px;
        right: unset;
        margin-right: 15px;
        margin-left: 0;
    }
    .user-menu {
        .nav-searchinputs {
            margin-right: 25px;
            margin-left: auto;
        }
        li {
            margin-right: 12px;
            margin-left: 0;
            @include mixins.respond-below(custom1199) {
                margin-right: 7px;
        
            }
        }
    } 
    .user-info {
        padding: 0 0 0 30px;
    }
}

.sidebar-horizontal,.sidebar-header,.two-col-sidebar {
    display: none;
}
.btn-white:hover {
    &::after {
        color: variables.$white;
    }
}
.sidebar-right {
    .user-profile {
        h6 {
            font-weight: 600 !important;
        }
    }
}
.layout-mode-rtl {
    .user-menu {
        padding-left: 24px;
        padding-right: 0;
    }
    .searchinputs .search-addon span {
        right: 8px;
        left: auto;
    }
    .user-menu.nav > li > a.select-store .user-info:after {
        left: 0;
        right: auto;
    }
    .user-menu.nav > li > a.select-store .user-info .user-letter {
        margin-left: 8px;
        margin-right: 0;
    }
    .user-menu.nav > li > a.select-store .user-info {
        padding: 0 0 0 20px;
    }
    .select-store-dropdown .dropdown-menu .dropdown-item img {
        margin-left: 8px;
        margin-right: 0;
    }
    &.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul > li.submenu-open ul li a {
        justify-content: right;
    }
    .input-icon-start .form-control {
        padding-right: 30px;
        padding-left: 0.85rem;
    }
    .notifications .notification-list li .avatar {
        margin: 0 0 0 8px;
    }
    .user-menu.nav > li.flag-nav .dropdown-menu a img {
        margin: 0 0 0 10px;
    }
    

}
.modern-profile {
    .sidebar-nav {
        display: none !important;
    }
    
}
.badge-dark-transparent {
    background: variables.$dark-transparent;
    color: variables.$dark;
}
.file-manager {
    .table tbody tr td .dropdown {
        a {
            border: 0;
        }
    }
}
.sidebar.sidebar-horizontal {
    .main-menu {
        ul {
            
            li.submenu {
                &:hover {
                    > ul {
                        display: block !important;
                    }
                    a.active.subdrop ~ ul {
                        display: block !important;
                    }
                }
                a.active.subdrop ~ ul {
                    display: none !important;
                }
                > ul {
                    li.submenu {
                        .menu-arrow {
                            &::before {
                                transform: rotate(-45deg);
                            }
                        }
                        > ul {
                            position: absolute;
                            left: 100%;
                            background: variables.$white;
                            padding: 8px;
                            display: none;
                        }
                        &:hover {
                            > ul {
                                display: block;
                            }
                        }
                    }
                }
            }
        }
    }
    li a .menu-arrow, .settings-sidebar li a .menu-arrow {
        background: transparent;
        &::before {
            transform: rotate(45deg);
        }
    }
    li a.subdrop .menu-arrow, .settings-sidebar li a.subdrop .menu-arrow {
        transform: none;
    }
}
[data-sidebarbg="sidebarbg1"],[data-sidebarbg="sidebarbg2"],[data-sidebarbg="sidebarbg3"],
[data-sidebarbg="sidebarbg4"],[data-sidebarbg="sidebarbg5"],[data-sidebarbg="sidebarbg6"] {
    .sidebar .sidebar-menu > ul > li.submenu-open ul li a {
        color: variables.$white;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul li a.active {
        background: #FFFFFF1A;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul li a span {
        color: variables.$white;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open .submenu-hdr {
        color: variables.$white;
    }
    .sidebar .sidebar-menu > ul > li.submenu-open ul li a i, .settings-sidebar .sidebar-menu > ul > li.submenu-open ul li a i {
        color: variables.$white;
    }
}
.sidebar {
    &.horizontal-sidebar {
        display: none;
    }
}
.header {
    &.pos-header {
        left: 0;
        .header-left {
            display: flex;
            height: 64px;
            padding: 0 24px;
        }
    }
}
@include mixins.respond-above(custom992) {
    .layout-mode-rtl {
        .header {
            left: 0;
            right: 252px;
        }
        .sidebar {
            top: 0;
        }
        &.mini-sidebar {
            .header {
                right: 86px;
                left: 0;
            }
            &.expand-menu {
                .header {
                    right: 252px;
                    left: 0;
                }
            }
        }
        .sidebar .sidebar-logo #toggle_btn {
            left: -13px;
            right: unset;
            margin-right: 15px;
            margin-left: 0;
        }
    }
}
.menu-horizontal {
    #collapse-header {
        display: none;
    }
}
[data-theme=dark] {
    .pos-category5 .owl-item h6 a {
        color: variables.$darkmode-gray-900;
    }
    .pos-category5 .owl-item li,.tab-wrap {
        border-color: variables.$darkmode-gray-200;
    }
    .pos-products .product-info .pro-img {
        background: variables.$darkmode-light-100;
    }
    .product-order-list .table {
        background: transparent !important;
    }
    aside.product-order-list .payment-method .methods .payment-item {
        border-color: variables.$darkmode-gray-200;
    }
    .pos-category .owl-item li {
        border-color: variables.$darkmode-gray-200;
        box-shadow: none;
    }
    .pos-category,aside.product-order-list .selling-info {
        border-color: variables.$darkmode-gray-200;
    }
    .product-wrap .product-list .product-info .pro-img {
        background: variables.$darkmode-light-100;
    }
    .product-wrap .product-list {
        border-color: variables.$darkmode-gray-200;
    }
    .pos-three aside.product-order-list .order-method .order-total {
        background: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
    }
    .pos-three aside.product-order-list .order-method .order-total table tr:last-child td {
        background: variables.$darkmode-white;
        border-color: variables.$darkmode-gray-200;
    }
    .pos-category3 li {
        border-color: variables.$darkmode-gray-200; 
    }
}
[data-theme=dark] {
    .sidebar .sidebar-logo {
        border-color: variables.$darkmode-gray-200;
        .logo-white {
            display: block !important;
        }
    }
}
[data-topbar="topbarcolortwo"],[data-topbar="topbarcolorthree"],[data-topbar="topbarcolorfour"],
[data-topbar="topbarcolorfive"],[data-topbar="topbarcolorsix"],[data-topbar="topbarcolorseven"],
[data-topbar="topbarcoloreight"],[data-topbar="topbarcolornine"],[data-topbar="topbarcolorten"],
[data-topbar="topbarcoloreleven"],[data-topbar="topbarcolortwelve"],[data-topbar="topbarcolorthirteen"],
[data-topbar="topbarcolorfourteen"],[data-topbar="all"] {
    .pos-page {
        .header  {
            .header-left {
                .logo {
                    display: none;
                    &.logo-white {
                        display: flex !important;
                    }
                }
            }
        }
    }
}
[data-sidebar="sidebarcolortwo"],[data-sidebar="sidebarcolorthree"],[data-sidebar="sidebarcolorfour"],
[data-sidebar="sidebarcolorfive"],[data-sidebar="sidebarcolorsix"],[data-sidebar="sidebarcolorseven"],
[data-sidebar="sidebarcoloreight"],[data-sidebar="sidebarcolornine"],[data-sidebar="sidebarcolorten"],
[data-sidebar="sidebarcoloreleven"],[data-sidebar="sidebarcolortwelve"],[data-sidebar="sidebarcolorthirteen"],
[data-sidebar="sidebarcolorfourteen"],[data-sidebar="all"] {
    @include mixins.respond-above(custom992) {
        .mini-sidebar .sidebar .sidebar-logo .logo.logo-white {
            display: none !important;
        }
        .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo {
            display: none;
        }
        .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo.logo-white {
            display: block !important;
        }
        .sidebar .sidebar-menu > ul > li ul li a svg {
            color: variables.$light;
        }
        .pos-page {
            .header  {
                .header-left {
                    background: transparent !important;
                }
            }
        }
    }
}