.dashboard-card,
.dashboard-card-wrapper .col-12:not(:first-child) .dashboard-card {
    color: #000000;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0 0 0/0.3);
}
.item-value-wrapper h6 {
    font-weight: 600;
}
h2, .h2 {
    font-weight: 600
}

.main-layout a,
.main-header-message > a,
.nav-item.full-screen > a,
.main-header-notification > a {
    line-height: 34px !important;
} 
/* --------------Button CSS START -------------------- */
.btn {
    position: relative;
    display: inline-block;
    padding: 8px 25px;
    font-size: 15px;
    overflow: hidden;
    line-height: inherit;
    transition: color 0.4s ease-in-out;
    font-family: var(--button-font-family);
}
    .btn:hover {
        background-color: transparent !important;
    }
    .btn::before {
        content: "";
        position: absolute;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 0.4s ease-in-out;
        z-index: 0;
    }
    .btn:hover::before {
        left: 0;
    }
    .btn span {
        position: relative;
        z-index: 1;
    }
    .btn span i {
        margin-right: 6px;
    }
    /* Button Primary CSS STRAT */
    .btn.btn-primary {
        background: var(--btn-primary-color) !important;
        border: 1px solid var(--btn-primary-color);
    }
        .btn.btn-primary span {
            color: var(--primary-button-text-color);
        }
    .btn.btn-outline-primary {
        color: var(--btn-primary-color);
        border: 1px solid var(--btn-primary-color);
    }
        .btn.btn-primary:hover {
            background-color: white !important
        }
        .btn.btn-primary:hover::before,
        .btn.btn-outline-primary:hover::before {
            background-color: color-mix(in srgb, var(--btn-primary-color), transparent 20%);
        }
    /* Button Primary CSS END */
    /* Button Success CSS STRAT */
    .btn.btn-success {
        background-color: var(--btn-success-bg-color);
        border: 1px solid var(--btn-success-bg-color);
    }
    .btn.btn-outline-success {
        color: var(--btn-success-bg-color);
        border: 1px solid var(--btn-success-bg-color);
    }
        .btn.btn-success:hover::before,
        .btn.btn-outline-success:hover::before {
            background-color: color-mix(in srgb, var(--btn-success-bg-color), transparent 20%);
        }
    /* Button Success CSS END */
    /* Button Success CSS STRAT */
    .btn.btn-danger {
        background-color: var(--btn-danger-bg-color);
        border: 1px solid var(--btn-danger-bg-color);
    }
    .btn.btn-outline-danger {
        color: var(--btn-danger-bg-color);
        border: 1px solid var(--btn-danger-bg-color);
    }
    .btn[class*="btn-outline-"]:not(:hover) {
        background-color: white !important
    }
    .btn[class*="btn-outline-"]:hover {
        color: #ffffff;
    }
        .btn.btn-outline-danger:hover::before,
        .btn.btn-danger:hover::before {
            background-color: color-mix(in srgb, var(--btn-danger-bg-color), transparent 20%);
        }

    .btn.btn-outline-edit:hover::before,
    .btn.btn-edit:hover::before {
        background-color: color-mix(in srgb, var(--primary-bg-color), transparent 20%);
    }
    /* Button Success CSS END */
    .btn.btn-outline-info:hover::before,
    .btn.btn-info:hover::before {
        background-color: color-mix(in srgb, #00b9ff 80%, transparent);
    }

.modal-header .close,
.modal-header .close:hover {
    color: #ffffff;
}
/* --------------Button CSS END -------------------- */
/* --------------Header CSS START -------------------- */
.color-header .main-header,
.gradient-header .main-header {
    background: var(--header-bg-color) !important;
}
/* --------------Header CSS END -------------------- */
/* Sidebar CSS START */
.sidebar-mini .side-menu > li {
    margin-bottom: 1px;
}
.sidebar-logo-content {
    color: #080809;
}
.sidebar-logo-content span {
    color: #818181;
}
.sidebar-mini .side-menu > li {
    padding-left: 4px;
}
    .sidebar-mini .side-menu > li > a {
        border-radius: 3px;
    }
.sub-side-menu__item {
    padding: 9px 0;
}
.menu-expand.sub-angle,
.mainmenuH .slide a span,
.mainmenuH .slide:hover .angle,
.mainmenuH .slide:hover .side-menu__label,
.mainmenuH .slide.active .side-menu__item,
.mainmenuH .side-menu__item.active .side-menu__label {
    color: var(--sidebaritem-color) !important;
    font-weight: 600;
}
.sidebar-mini .side-menu > li > a .menu-icon,
.sidebar-mini .side-menu > li > a .side-menu__icon {
    color: var(--sidebaritem-color);
    font-size: 20px;
}

.sidebar-mini .side-menu > li:hover > a .menu-icon, 
.sidebar-mini .side-menu > li > a.active .menu-icon,
.sidebar-mini .side-menu > li.open > a .side-menu__icon,
.sidebar-mini .side-menu > li:hover > a .side-menu__icon, 
.sidebar-mini .side-menu > li > a.active .side-menu__icon, 
.sidebar-mini .side-menu > li:hover > a .sub-side-menu__icon, 
.sidebar-mini .side-menu > li > a.active .sub-side-menu__icon {
    background-color: transparent;
}
.side-menu .slide.open .side-menu__label,
.side-menu .slide.is-expanded .side-menu__label,
.mainmenuH .slide:hover .side-menu__icon,
.app-sidebar .slide.active .side-menu__icon,
.app-sidebar .slide.is-expanded .side-menu__icon,
.app-sidebar .side-menu > li > ul.slide-menu > li > a[data-bs-toggle="slide"]:hover,
.app-sidebar .side-menu > li > ul.slide-menu > li > a[data-bs-toggle="slide"].active span,
.app-sidebar .side-menu > li > ul.slide-menu > li.is-expanded > a[data-bs-toggle="slide"] span {
    fill: var(--sidebaritem-color) !important;
    color: var(--sidebaritem-color) !important;
}
.sidebar-mini .side-menu > li:hover > a,
.sidebar-mini .side-menu > li.is-expanded:not(.open) > a,
.sidebar-mini .side-menu > li.is-expanded:not(.active) > a {
    background-color: #e2e5e9;
}

.slide.is-expanded .sub-side-menu__item:before,
.sidebar-mini .side-menu > li > ul > li > a::before,
.sidebar-mini .side-menu > li > ul > li > a::after {
    background-color: #080809 !important;
}
.side-menu > li > ul > li .sub-side-menu__item:not(.active):hover {
    background: rgb(188 186 186 / 19%);
}
.sidebar-mini .side-menu > li.open > a,
.sidebar-mini .side-menu > li.active > a,
.side-menu.mainmenuH > .slide > a.side-menu__item.active {
    background-color: #0866ff;
}

    .sidebar-mini .side-menu > li.open > a .side-menu__icon,
    .sidebar-mini .side-menu > li > a.active .side-menu__icon,
    .sidebar-mini .side-menu > li.open > a .side-menu__label,
    .sidebar-mini .side-menu > li > a.active .side-menu__label,
    .sidebar-mini .side-menu > li.open > a .menu-expand,
    .sidebar-mini .side-menu > li > a.active .menu-expand {
        color: #ffffff !important;
    }
    .mainmenuH .slide a.active span,
    .sidebar-mini .side-menu > li > a.active > .menu-text,
    .sidebar-mini .side-menu > li.active > a > .menu-icon {
        color: var(--select-sidebaritem-color) !important;
    }

/* Sidebar CSS END */
/* Header CSS START */
.navbar-nav-right a {
    cursor: pointer;
}
.navbar-nav-right > li > a,
.nav-item.full-screen > a {
    background-color: #e2e5e9;
    border-radius: 50%;
    border: 1px solid #e2e5e9;
}
.navbar-nav-right .header-icon-svgs {
    width: 22px;
    height: 22px;
}
/* Header CSS END */

/* Accordion CSS START */
.productContent .accordion-button {
    background-color: white !important;
    color: var(--accordion-text-color);
}

.productContent .accordion-button.accordion-light {
    background: white !important;
    color: var(--accordion-text-color);
}

.productContent .accordion-button.accordion-fill {
    background: var(--accordion-header-color) !important;
    color: var(--accordion-text-color);
}
    .productContent .accordion-button[aria-expanded="false"]:not(.accordion-fill) {
        color: var(--accordion-header-color) !important;
        border: 1px solid var(--accordion-header-color);
        border-radius: 10px;
    }
.productContent .accordion-button.accordion-light[aria-expanded="false"]:not(.accordion-fill) {
    color: var(--primary-bg-color);
}
.productContent .accordion-button[aria-expanded="true"] {
    background: var(--accordion-header-color) !important;
}
.animatedTabs .accordion .tab-content,
.productContent .tab-content-area {
    margin: 0;
    background: #ffffff;
    border: 1px solid var(--primary-bg-color);
    border-radius: 0 0 10px 10px !important;
}
/* Accordion CSS END */

/* Table CSS START */
.commontble {
    padding: 1rem;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--primary-bg-color);
}
    .commontble table {
        font-family: var(--table-font-family);
    }
.dataTables_wrapper .dataTables_filter {
    color: #080809;
}
.commontble .table th,
.color-table .commontble .table th {
    background-color: var(--table-background-color);
}
.commontble .table thead tr {
    background-image: var(--table-background-color);
}
.light-table .commontble .table th {
    background-color: white;
    color: var(--dark-theme);
    white-space: normal;
}
.commontble table.dataTable.nowrap th,
.commontble table.dataTable.nowrap td {
    white-space: normal;
}
.commontble .table a {
    color: var(--table-link-color);
}
table.dataTable.display > tbody > tr td button {
    padding: 6px 6px;
    line-height: 1;
}
    table.dataTable.display > tbody > tr td button i {
        margin: 0;
    }
.text-truncate-three-line {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.commontble .dataTables_wrapper .dataTables_paginate span > *,
.commontble .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled) {
    color: var(--primary-bg-color) !important;
}
.commontble .dataTables_wrapper .dataTables_paginate span .paginate_button.current {
    color: #ffffff !important
}
/* Table CSS END */
/* Input Radio START */
.searchInput .addonIcon {
    height: 40px;
    line-height: 38px;
}
input[type=submit].btn-block, 
input[type=reset].btn-block, 
input[type=button].btn-block {
    letter-spacing: 1px;
}

/* Input CSS END */
/*-----------------------------------------------
    Light Theme CSS START
-------------------------------------------------*/
.app-sidebar, .main-sidemenu, .main-sidebar-header {
    background-color: var(--sidebar-bg-color);
}
.color-menu .app-sidebar,
.gradient-menu .app-sidebar,
.color-menu .main-sidebar-header,
.gradient-menu .main-sidebar-header,
.color-menu .app-sidebar.sidebar-scroll .main-sidebar-header,
.gradient-menu .app-sidebar.sidebar-scroll .main-sidebar-header {
    background: var(--menu-bg-color) !important;
}
.animatedTabs .nav-pills .nav-link {
    background: var(--tab-inactive-bg);
    color: var(--tab-inactive-text);
    transition: 0.3s;
}
.animatedTabs .nav-pills .nav-link.active {
    background: var(--tab-active-bg);
    color: var(--tab-active-text);
}
.animatedTabs .nav-tabs, .animatedTabs .tab-pane, .animatedTabs .tab-content {
    font-family: var(--tab-font-family);
}
.btn-edit,
.btn-slide,
.sidebar-mini .side-menu > li.open > a,
.sidebar-mini .side-menu > li.active > a,
.side-menu.mainmenuH > .slide > a.side-menu__item.active,
.sidebar-mini .side-menu > li.is-expanded:not(.open) > a,
.sidebar-mini .side-menu > li.is-expanded:not(.active) > a {
    background-color: var(--primary-bg-color);
}
.sidebar-mini .side-menu > li ul li.active .sub-side-menu__item.active {
    background: rgb(10 102 194 / 50%);
}
.accordion, .accordion-item, .accordion-body {
    font-family: var(--accordion-font-family);
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    color: var(--primary-bg-color);
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* Input Radio START */
.theme-radio {
    padding: 0;
    background: transparent;
}

    .theme-radio label {
        color: var(--tab-inactive-text) !important;
        font-size: 16px;
        font-weight: 500;
        padding: 8px 25px;
        border-radius: 100px;
        background: var(--tab-inactive-bg);
    }

    .theme-radio input:checked + label {
        color: var(--tab-active-text) !important;
        background: var(--tab-active-bg);
    }
/* Input Radio END */

/*-----------------------------------------------
    Light Theme CSS END
-------------------------------------------------*/



/*-----------------------------------------------
    Dark Theme CSS START
-------------------------------------------------*/
.dark-theme .dashboard-card,
.dark-theme .dashboard-card-wrapper .col-12:not(:first-child) .dashboard-card {
    color: white !important;
    background-color: var(--dark-theme);
}
.dark-theme .dashboard-card .icon-wrapper,
.dark-theme .commontble,
.dark-theme .main-sidemenu,
.dark-theme .navbar-nav-right a,
.dark-theme .nav-item.full-screen > a,
.dark-theme .animatedTabs, .dark-theme .tab-content,
.dark-theme .productContent .tab-content-area {
    background-color: var(--dark-theme);
}

.dark-theme .sidebar-logo-content,
.dark-theme .menu-expand.sub-angle,
.dark-theme .mainmenuH .slide a span,
.dark-theme .mainmenuH .slide:hover .angle,
.dark-theme .mainmenuH .slide:hover .side-menu__label,
.dark-theme .mainmenuH .slide.active .side-menu__item,
.dark-theme.sidebar-mini .side-menu > li > a .menu-icon,
.dark-theme.sidebar-mini .side-menu > li > a .side-menu__icon,
.dark-theme .app-sidebar .slide.is-expanded .side-menu__icon,
.dark-theme.sidebar-mini .side-menu > li > a .side-menu__icon,
.dark-theme .mainmenuH .side-menu__item.active .side-menu__label {
    color: white !important;
}

.dark-theme .slide.open .side-menu__label,
.dark-theme .side-menu .slide.is-expanded .side-menu__label {
    color: white !important;
    fill: white !important;
}

.dark-theme .slide.is-expanded .sub-side-menu__item:before,
.dark-theme.sidebar-mini .side-menu > li > ul > li > a::after,
.dark-theme.sidebar-mini .side-menu > li > ul > li > a::before {
    background-color: white !important
}

.dark-theme .animatedTabs .nav-pills .nav-link {
    color: white;
    background: #141b2d;
}
/* Select2 CSS STRAT */
.dark-theme .select2-container--open .select2-dropdown {
    background: var(--dark-theme);
}
.dark-theme .select2-results .select2-results__option {
    color: #dde3ea;
}
/* Select2 CSS END */
/* Tabs CSS START */
.dark-theme .productContent .accordion-button[aria-expanded="false"]:not(.accordion-fill) {
    background: var(--dark-theme) !important;
}
/* Tabs CSS END/
/* Table CSS START */
.dark-table .commontble .table th {
    background: var(--dark-theme);
}
.dark-theme.simple-table .table-bordered thead th {
    background-color: var(--table-background-color);
}
.dark-theme.gradient-table .table-bordered thead th {
    background-color: transparent;
}
.dark-theme .dataTables_wrapper .dataTables_filter,
.dark-theme .dataTables_wrapper .dataTables_length label {
    color: #dde3ea;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--primary-bg-color);
}
.dark-theme .commontble .dataTables_wrapper .dataTables_length select {
    color: #dde3ea;
    background: var(--dark-theme);
}
.dark-theme .btn[class*="btn-outline-"]:not(:hover) {
    background: var(--dark-theme) !important;
}
/* Table CSS END */
/*-----------------------------------------------
    Dark Theme CSS END
-------------------------------------------------*/
/*-----------------------------------------------
    Gradient Theme CSS START
-------------------------------------------------*/
.gradient-table .commontble .table thead tr {
    background: var(--table-background-color);
}
.gradient-table .commontble .table th {
    background: transparent;
}
/*-----------------------------------------------
    Gradient Theme CSS END
-------------------------------------------------*/