@charset "UTF-8";
/*!
<--!----------------------------------------------------------------!-->
<--!----------------------------------------------------------------!-->
 * Template Name: NEXEL - CRM Admin Dashboard Template
 * Description: Fully Responsive MultipurposeCRM  Admin Dashboard Template.
 * Copyright: WRAPCODERS
 * Author: WRAPCODERS
 * Version: 1.0.0
 * File: theme.min.css
<--!----------------------------------------------------------------!-->
<--!----------------------------------------------------------------!-->
*/

body {
    line-height: 1.6;
    color: #6b7885;
    overflow-x: hidden;
    font-size: .84rem;
    scroll-behavior: smooth;
    font-family: Inter, sans-serif;
    transition: all .3s ease;
    -webkit-font-smoothing: antialiased;
    background-color: #f3f4f6
}

a {
    color: #283c50;
    text-decoration: none;
    font-weight: 600;
    transition: all .3s ease
}

a:hover {
    color: #3454d1;
    text-decoration: none
}

a:not([href]) {
    color: inherit
}

b, strong {
    font-weight: 600
}

.c-pointer {
    cursor: pointer
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #283c50;
    font-weight: 700
}

img {
    border-radius: 3px
}

.avatar-image, .avatar-text {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    min-width: 40px;
    min-height: 40px;
    overflow: hidden;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background-color: #fff;
    border: 1px solid #dcdee4
}

.avatar-xs {
    width: 12px;
    height: 12px;
    max-width: 12px;
    max-height: 12px;
    min-width: 12px;
    min-height: 12px
}

.avatar-xs * {
    font-size: 8px
}

.avatar-sm {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    min-width: 20px;
    min-height: 20px
}

.avatar-sm * {
    font-size: 10px
}

.avatar-md {
    width: 30px;
    height: 30px;
    max-width: 30px;
    max-height: 30px;
    min-width: 30px;
    min-height: 30px
}

.avatar-md * {
    font-size: 12px
}

.font-body {
    font-size: .84rem
}

.fs-6 {
    font-size: 6px
}

.fs-8 {
    font-size: 8px
}

.fs-9 {
    font-size: 9px
}

.fs-10 {
    font-size: 10px
}

.fs-11 {
    font-size: 11px
}

.fs-12 {
    font-size: 12px
}

.fs-13 {
    font-size: 13px
}

.fs-18 {
    font-size: 18px
}

.fs-20 {
    font-size: 20px
}

.text-primary {
    color: #3454d1 !important
}

.text-success {
    color: #17c666 !important
}

.text-danger {
    color: #ea4d4d !important
}

.text-dark {
    color: #283c50 !important
}

.text-gray-600 {
    color: #64748b !important
}

.text-spacing-1 {
    letter-spacing: .5px
}

.text-spacing-2 {
    letter-spacing: 1px
}

.bg-white {
    background-color: #fff !important
}

.bg-primary {
    background-color: #3454d1 !important
}

.bg-success {
    background-color: #17c666 !important
}

.bg-info {
    background-color: #3dc7be !important
}

.bg-danger {
    background-color: #ea4d4d !important
}

.bg-dark {
    background-color: #283c50 !important
}

.bg-warning {
    background-color: #ffa21d !important
}

.bg-light {
    background-color: #eff0f6 !important
}

.bg-gray-200 {
    background-color: #e9ecef !important
}

.bg-gray-300 {
    background-color: #e5e7eb !important
}

.bg-gray-500 {
    background-color: #91a1b6 !important
}

.bg-soft-primary {
    background-color: #ebeefa !important
}

.bg-soft-success {
    background-color: #e1fbed !important
}

.bg-soft-danger {
    background-color: #fdeded !important
}

.bg-soft-info {
    background-color: #dbf5f3 !important
}

.bg-soft-warning {
    background-color: #ffebd0 !important
}

.border-gray-1 {
    border-color: #e6e9ed !important
}

.border-gray-2 {
    border-color: #e3e7eb !important
}

.border-gray-5 {
    border-color: #dadfe4 !important
}

.border-dashed {
    border-style: dashed !important
}

.border-bottom-dashed {
    border-bottom-style: dashed !important
}

.wd-5 {
    width: 5px;
    max-width: 5px;
    min-width: 5px
}

.wd-8 {
    width: 8px;
    max-width: 8px;
    min-width: 8px
}

.wd-10 {
    width: 10px;
    max-width: 10px;
    min-width: 10px
}

.wd-20 {
    width: 20px;
    max-width: 20px;
    min-width: 20px
}

.wd-30 {
    width: 30px;
    max-width: 30px;
    min-width: 30px
}

.wd-50 {
    width: 50px;
    max-width: 50px;
    min-width: 50px
}

.ht-5 {
    height: 5px;
    max-height: 5px;
    min-height: 5px
}

.ht-5 {
    height: 5px;
    max-height: 5px;
    min-height: 5px
}

.ht-8 {
    height: 8px;
    max-height: 8px;
    min-height: 8px
}

.ht-10 {
    height: 10px;
    max-height: 10px;
    min-height: 10px
}

.ht-50 {
    height: 50px;
    max-height: 50px;
    min-height: 50px
}

.ht-60 {
    height: 60px;
    max-height: 60px;
    min-height: 60px
}

.ht-80 {
    height: 80px;
    max-height: 80px;
    min-height: 80px
}

.shadow-lg {
    box-shadow: 0 10px 25px rgba(40, 60, 80, .15)
}

.stretch {
    height: 100%;
    display: flex;
    align-items: stretch;
    flex-direction: column
}

.stretch.stretch-full {
    height: calc(100% - 24px)
}

.tooltip {
    font-size: 10px;
    font-family: inherit;
    font-weight: 500;
    text-transform: uppercase
}

hr {
    margin: 25px auto;
    border-color: #91a1b6
}

.text-truncate-1-line {
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

@supports (-webkit-line-clamp:1) {
    .text-truncate-1-line {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: initial;
        display: -webkit-box !important;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical
    }
}

.text-truncate-2-line {
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

@supports (-webkit-line-clamp:2) {
    .text-truncate-2-line {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: initial;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
}

body .full-screen-switcher a .maximize {
    display: block
}

body .full-screen-switcher a .minimize {
    display: none
}

body.full-screen-helper .full-screen-switcher a .maximize {
    display: none
}

body.full-screen-helper .full-screen-switcher a .minimize {
    display: block
}

:not(:root):fullscreen::backdrop {
    background: 0 0
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    border-radius: 15px
}

::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 15px
}

::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    border-radius: 15px
}

::-webkit-scrollbar-thumb:hover {
    background-color: #001327;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.nxl-container {
    position: relative;
    top: 80px;
    margin-left: 280px;
    min-height: calc(100vh - 80px);
    transition: all .3s ease
}

.nxl-container .nxl-content .main-content {
    overflow-x: hidden;
    padding: 30px 30px 5px
}

.nxl-container .nxl-content .main-content .content-area, .nxl-container .nxl-content .main-content .content-sidebar {
    width: 100%;
    height: 100vh;
    position: relative
}

.nxl-container .nxl-content .main-content .content-sidebar {
    overflow-y: auto;
    background-color: #fff;
    border-right: 1px solid #e5e7eb
}

.nxl-container .nxl-content .main-content .content-sidebar .content-sidebar-header {
    height: 75px;
    padding: 25px 30px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center
}

.nxl-container .page-header + .nxl-content {
    padding-top: 95px
}

.nxl-container .footer {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-top: 1px solid #e5e7eb
}

.minimenu .nxl-container {
    margin-left: 100px
}

.minimenu .page-header {
    left: 100px
}

.page-header {
    display: flex;
    align-items: center;
    top: 80px;
    left: 280px;
    right: 0;
    z-index: 1023;
    min-height: 65px;
    padding: 0 30px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1)
}

.page-header .page-header-title {
    display: inline-block
}

.page-header h5 {
    margin-bottom: 0;
    margin-right: 8px;
    padding-right: 10px;
    color: #283c50;
    font-weight: 600;
    border-right: 1px solid #cdd4e8
}

.page-header .breadcrumb {
    padding: 0;
    display: inline-flex;
    margin-bottom: 0;
    background: 0 0;
    font-size: 13px;
    color: #7587a7;
    font-weight: 800
}

.page-header .breadcrumb a {
    color: #283c50
}

.page-header .breadcrumb .breadcrumb-item a:hover {
    color: #3454d1
}

.page-header .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    position: relative;
    top: 2px
}

.page-header .breadcrumb .breadcrumb-item:last-child {
    opacity: .75;
    font-weight: 400
}

.page-header .breadcrumb svg {
    width: 14px;
    height: 14px;
    vertical-align: baseline
}

.hamburger {
    display: inline-block;
    cursor: pointer;
    transition: filter .15s linear;
    width: 20px;
    height: 20px
}

.hamburger.is-active .hamburger-inner {
    background-color: #000
}

.hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before {
    background-color: #000
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
    width: 18px;
    height: 2px;
    background-color: #2c3344;
    border-radius: 4px;
    position: absolute;
    transition: transform .15s ease
}

.hamburger-inner::after, .hamburger-inner::before {
    width: 18px;
    height: 2px;
    background-color: #2c3344;
    border-radius: 4px;
    position: absolute;
    transition: transform .15s ease
}

.hamburger-inner::after, .hamburger-inner::before {
    content: "";
    display: block
}

.hamburger-inner::before {
    top: -6px
}

.hamburger-inner::after {
    bottom: -6px
}

.hamburger--arrowturn.is-active .hamburger-inner {
    transform: rotate(-180deg)
}

.hamburger--arrowturn.is-active .hamburger-inner::before {
    transform: translate3d(4px, 2px, 0) rotate(45deg) scale(.7, 1)
}

.hamburger--arrowturn.is-active .hamburger-inner::after {
    transform: translate3d(4px, -2px, 0) rotate(-45deg) scale(.7, 1)
}

.ps {
    touch-action: auto;
    overflow-anchor: none;
    overflow: hidden !important
}

@supports (-ms-overflow-style:none) {
    .ps {
        overflow: auto !important
    }
}

@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {
    .ps {
        overflow: auto !important
    }
}

.navbar-content {
    position: relative
}

.nxl-header {
    right: 0;
    z-index: 1025;
    position: fixed;
    left: 280px;
    color: #eaebef;
    background: #fff;
    min-height: 80px;
    border-bottom: 1px solid #e5e7eb
}

.nxl-header .header-wrapper {
    display: flex;
    padding: 0 30px
}

.nxl-header .header-wrapper ul {
    margin-bottom: 0;
    display: inline-flex
}

.nxl-header .header-wrapper .nxl-lavel-mega-menu-toggle, .nxl-header .header-wrapper .nxl-navigation-toggle {
    line-height: normal
}

.nxl-header .header-wrapper .nxl-lavel-mega-menu-toggle a, .nxl-header .header-wrapper .nxl-navigation-toggle a {
    color: #283c50
}

.nxl-header .header-wrapper .nxl-lavel-mega-menu-toggle i, .nxl-header .header-wrapper .nxl-navigation-toggle i {
    line-height: 1;
    font-size: 24px
}

.nxl-header .header-wrapper .nxl-lavel-mega-menu-toggle i.feather-arrow-left, .nxl-header .header-wrapper .nxl-navigation-toggle i.feather-arrow-left {
    font-size: 20px
}

.nxl-header .header-wrapper .nxl-h-item {
    min-height: 79px;
    display: flex;
    align-items: center;
    position: relative
}

.nxl-header .header-wrapper .nxl-head-link {
    margin-left: 3px;
    padding: 12px 12px;
    position: relative;
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #6b7280;
    border-radius: 50px
}

.nxl-header .header-wrapper .nxl-head-link > i {
    font-size: 20px
}

.nxl-header .header-wrapper .nxl-head-link.active, .nxl-header .header-wrapper .nxl-head-link:active, .nxl-header .header-wrapper .nxl-head-link:focus, .nxl-header .header-wrapper .nxl-head-link:hover {
    color: #3454d1;
    text-decoration: none;
    background: #eaebef
}

.nxl-header .header-wrapper .nxl-head-link.active .hamburger .hamburger-inner, .nxl-header .header-wrapper .nxl-head-link:active .hamburger .hamburger-inner, .nxl-header .header-wrapper .nxl-head-link:focus .hamburger .hamburger-inner, .nxl-header .header-wrapper .nxl-head-link:hover .hamburger .hamburger-inner {
    background-color: #3454d1
}

.nxl-header .header-wrapper .nxl-head-link.active .hamburger .hamburger-inner::after, .nxl-header .header-wrapper .nxl-head-link.active .hamburger .hamburger-inner::before, .nxl-header .header-wrapper .nxl-head-link:active .hamburger .hamburger-inner::after, .nxl-header .header-wrapper .nxl-head-link:active .hamburger .hamburger-inner::before, .nxl-header .header-wrapper .nxl-head-link:focus .hamburger .hamburger-inner::after, .nxl-header .header-wrapper .nxl-head-link:focus .hamburger .hamburger-inner::before, .nxl-header .header-wrapper .nxl-head-link:hover .hamburger .hamburger-inner::after, .nxl-header .header-wrapper .nxl-head-link:hover .hamburger .hamburger-inner::before {
    background-color: #3454d1
}

.nxl-header .header-wrapper .nxl-head-link.nxl-language-link {
    padding: 15px 12px
}

.nxl-header .header-wrapper .nxl-head-link .nxl-h-badge {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 9px;
    border-radius: 50px
}

.nxl-header .header-wrapper .nxl-head-link .nxl-h-badge.dots {
    top: 8px;
    right: 12px;
    padding: 0;
    width: 8px;
    height: 8px
}

.nxl-header .header-wrapper .nxl-h-dropdown {
    width: 225px;
    top: 100% !important;
    transition: all .3s ease-in-out
}

.nxl-header .header-wrapper .nxl-h-dropdown.dropdown-menu-end {
    right: 0 !important;
    left: auto !important
}

.nxl-header .header-wrapper .nxl-h-dropdown.nxl-user-dropdown {
    width: 300px
}

.nxl-header .header-wrapper .nxl-h-dropdown .dropdown-header {
    margin-bottom: 10px;
    padding-bottom: 20px;
    padding-left: 25px;
    padding-right: 25px;
    border-bottom: 1px solid #e5e7eb
}

.nxl-header .header-wrapper .nxl-h-dropdown .dropdown-item {
    margin: 0 10px;
    border-radius: 5px;
    width: -webkit-fill-available
}

.nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown {
    width: 425px;
    padding-top: 0;
    overflow-x: hidden;
    max-height: calc(100vh - 150px)
}

.nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown .search-form {
    padding: 7px 10px
}

.nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown .search-form .input-group-text, .nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown .search-form .search-input-field {
    border: none;
    padding: 15px 10px;
    background: #fff
}

.nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown .search-form .input-group-text:active, .nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown .search-form .input-group-text:focus, .nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown .search-form .search-input-field:active, .nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown .search-form .search-input-field:focus {
    box-shadow: none
}

.nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown .search-form .input-group-text .btn-close {
    opacity: 1;
    position: relative;
    background: 0 0
}

.nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown .search-form .input-group-text .btn-close:after {
    content: "Esc";
    position: absolute;
    top: 0;
    right: 0;
    height: 1.35rem;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 9px;
    color: #283c50;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .25px;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center
}

.nxl-header .header-wrapper .nxl-header-search .nxl-search-dropdown .search-items-wrapper {
    max-height: 415px
}

.nxl-header .header-wrapper .nxl-header-language .nxl-language-dropdown {
    width: 425px;
    padding-top: 0;
    overflow-x: hidden;
    max-height: calc(100vh - 150px)
}

.nxl-header .header-wrapper .nxl-header-language .nxl-language-dropdown .language_select a {
    color: #283c50;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    border-radius: 5px;
    border: 1px dashed #e5e7eb;
    transition: all .3s ease
}

.nxl-header .header-wrapper .nxl-header-language .nxl-language-dropdown .language_select a:hover {
    background-color: #eaebef
}

.nxl-header .header-wrapper .nxl-header-language .nxl-language-dropdown .language_select.active a {
    position: relative
}

.nxl-header .header-wrapper .nxl-header-language .nxl-language-dropdown .language_select.active a:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    content: "✓";
    color: #3454d1;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eaebef
}

.nxl-header .header-wrapper .nxl-timesheets-menu {
    padding: 0;
    min-width: 20rem
}

.nxl-header .header-wrapper .nxl-timesheets-menu .timesheets-head {
    padding: 20px;
    border-radius: 2px 2px 0 0;
    border-bottom: 1px solid #e5e7eb
}

.nxl-header .header-wrapper .nxl-timesheets-menu .timesheets-body {
    padding: 30px 20px
}

.nxl-header .header-wrapper .nxl-timesheets-menu .timesheets-footer {
    padding: 15px 20px;
    border-radius: 0 0 2px 2px;
    border-top: 1px solid #e5e7eb
}

.nxl-header .header-wrapper .nxl-notifications-menu {
    padding: 0;
    min-width: 20rem
}

.nxl-header .header-wrapper .nxl-notifications-menu .notifications-head {
    padding: 20px;
    border-radius: 2px 2px 0 0;
    border-bottom: 1px solid #e5e7eb
}

.nxl-header .header-wrapper .nxl-notifications-menu .notifications-item {
    display: flex;
    cursor: pointer;
    padding: 15px 20px;
    transition: all .3s ease
}

.nxl-header .header-wrapper .nxl-notifications-menu .notifications-item + .notifications-item {
    border-top: 1px dashed #e5e7eb
}

.nxl-header .header-wrapper .nxl-notifications-menu .notifications-item img {
    width: 60px;
    height: 60px
}

.nxl-header .header-wrapper .nxl-notifications-menu .notifications-item .notifications-desc {
    flex: 1
}

.nxl-header .header-wrapper .nxl-notifications-menu .notifications-item .notifications-date {
    font-size: 11px
}

.nxl-header .header-wrapper .nxl-notifications-menu .notifications-footer {
    padding: 15px 20px;
    border-radius: 0 0 2px 2px;
    border-top: 1px solid #e5e7eb
}

.nxl-header .header-wrapper .user-avtar {
    width: 40px;
    margin-right: 15px;
    border-radius: 50%
}

html.minimenu .nxl-header {
    left: 100px
}

.nxl-navigation {
    top: 0;
    bottom: 0;
    z-index: 1026;
    position: fixed;
    background: #fff;
    width: 280px;
    transition: all .3s ease
}

.nxl-navigation .m-header {
    z-index: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    padding: 15px 30px;
    align-items: center;
    height: 80px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb
}

.nxl-navigation .m-header .logo-sm {
    display: none
}

.nxl-navigation .navbar-content {
    padding: 10px 0;
    position: relative;
    border-right: 1px solid #e5e7eb;
    height: calc(100vh - 80px)
}

.nxl-navigation .navbar-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0
}

.nxl-navigation .navbar-content .nxl-caption {
    display: block;
    color: #7587a7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    padding: 15px 20px 10px;
    text-transform: uppercase
}

.nxl-navigation .navbar-content .nxl-caption label {
    margin-bottom: 0
}

.nxl-navigation .navbar-content .nxl-caption span:not(.badge) {
    display: block;
    color: #67758a;
    text-transform: capitalize;
    font-size: 10px;
    font-weight: 500
}

.nxl-navigation .navbar-content .nxl-micon {
    margin-right: 12px;
    display: inline-block;
    vertical-align: middle
}

.nxl-navigation .navbar-content .nxl-micon i {
    font-size: 18px
}

.nxl-navigation .navbar-content .nxl-link {
    display: block;
    line-height: 1.2;
    padding: 10px 15px;
    font-size: 13px;
    color: #283c50;
    font-weight: 600;
    transition: all .3s ease
}

.nxl-navigation .navbar-content .nxl-link.active, .nxl-navigation .navbar-content .nxl-link:hover {
    text-decoration: none;
    color: #283c50;
    transition: all .3s ease
}

.nxl-navigation .navbar-content .nxl-link.active .nxl-micon i, .nxl-navigation .navbar-content .nxl-link:hover .nxl-micon i {
    color: #283c50;
    transition: all .3s ease
}

.nxl-navigation .navbar-content .nxl-arrow {
    float: right;
    transition: all .2s ease-in-out
}

.nxl-navigation .navbar-content .nxl-badge {
    margin-left: 8px
}

.nxl-navigation .navbar-content .nxl-submenu .nxl-link {
    font-size: .8rem;
    padding: 10px 20px;
    margin-left: 35px !important;
    margin-right: 5px !important
}

.nxl-navigation .navbar-content .nxl-submenu .nxl-submenu .nxl-link {
    margin-left: 45px !important
}

.nxl-navigation .navbar-content .nxl-submenu .nxl-submenu .nxl-submenu .nxl-link {
    margin-left: 55px !important
}

.nxl-navigation .navbar-content .nxl-item.disabled a {
    cursor: not-allowed;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.nxl-navigation .navbar-content .nxl-item.active > .nxl-link, .nxl-navigation .navbar-content .nxl-item:hover > .nxl-link {
    color: #001327;
    background-color: #eaebef;
    transition: all .3s ease
}

.nxl-navigation .navbar-content .nxl-item.active > .nxl-link .nxl-micon i, .nxl-navigation .navbar-content .nxl-item:hover > .nxl-link .nxl-micon i {
    color: #001327;
    transition: all .3s ease
}

.nxl-navigation .navbar-content .nxl-navbar > .nxl-item.active > .nxl-link, .nxl-navigation .navbar-content .nxl-navbar > .nxl-item:hover > .nxl-link {
    color: #001327;
    background-color: #eaebef;
    transition: all .3s ease
}

.nxl-navigation .navbar-content .nxl-hasmenu.nxl-trigger > .nxl-submenu {
    display: block
}

.nxl-navigation .navbar-content .nxl-hasmenu.nxl-trigger > .nxl-link > .nxl-arrow {
    transform: rotate(90deg)
}

.nxl-navigation .navbar-content .card {
    margin: 20px;
    color: #283c50;
    background: #eff0f6;
    border-color: #e5e7eb
}

.nxl-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    background: rgba(0, 0, 0, .2)
}

html:not(.minimenu) .nxl-navigation .nxl-link {
    margin: 3px 15px;
    border-radius: 5px
}

html:not(.minimenu) .nxl-navigation .nxl-submenu {
    position: relative
}

html:not(.minimenu) .nxl-navigation .nxl-submenu .nxl-item {
    margin: 3px 10px;
    border-radius: 5px
}

html:not(.minimenu) .nxl-navigation .nxl-submenu .nxl-submenu > .nxl-item:before {
    left: 60px
}

html:not(.minimenu) .nxl-navigation .nxl-submenu .nxl-submenu .nxl-submenu > .nxl-item:before {
    left: 80px
}

html.minimenu .nxl-navigation {
    width: 100px;
    transition: all .3s ease
}

html.minimenu .nxl-navigation .logo-sm {
    width: 42px;
    display: block;
    transition: all .3s ease
}

html.minimenu .nxl-navigation .card, html.minimenu .nxl-navigation .logo-lg, html.minimenu .nxl-navigation .nxl-arrow, html.minimenu .nxl-navigation .nxl-mtext {
    display: none;
    transition: all .3s ease
}

html.minimenu .nxl-navigation .navbar-content {
    width: 100px;
    transition: all .3s ease
}

html.minimenu .nxl-navigation .navbar-content .nxl-link {
    margin: 0 20px;
    padding: 12px 20px;
    border-radius: 6px 6px
}

html.minimenu .nxl-navigation .navbar-content .nxl-hasmenu.nxl-trigger > .nxl-submenu {
    display: none
}

html.minimenu .nxl-navigation .navbar-content .nxl-caption {
    position: relative
}

html.minimenu .nxl-navigation .navbar-content .nxl-caption:before {
    top: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
    padding-left: 20px;
    content: "...";
    position: absolute;
}

html.minimenu .nxl-navigation .navbar-content .nxl-caption label {
    display: none
}

html.minimenu .nxl-navigation:hover .navbar-content {
    position: absolute !important;
    width: 280px;
    background-color: #fff;
    border-right: 1px solid #e5e7eb;
    transition: all .3s ease
}

html.minimenu .nxl-navigation:hover .navbar-content .card, html.minimenu .nxl-navigation:hover .navbar-content .nxl-arrow, html.minimenu .nxl-navigation:hover .navbar-content .nxl-caption, html.minimenu .nxl-navigation:hover .navbar-content .nxl-mtext {
    display: inline-block;
    transition: all .3s ease
}

html.minimenu .nxl-navigation:hover .navbar-content .nxl-link {
    margin: 0 15px;
    margin-bottom: 3px;
    padding: 10px 20px
}

html.minimenu .nxl-navigation:hover .navbar-content .nxl-submenu .nxl-link {
    margin-bottom: 3px;
    padding-left: 20px;
    margin-left: 50px !important;
    margin-right: 15px !important
}

html.minimenu .nxl-navigation:hover .navbar-content .nxl-submenu .nxl-submenu .nxl-link {
    margin-left: 65px !important
}

html.minimenu .nxl-navigation:hover .navbar-content .nxl-submenu .nxl-submenu .nxl-submenu .nxl-link {
    margin-left: 80px !important
}

html.minimenu .nxl-navigation:hover .navbar-content .nxl-hasmenu.nxl-trigger > .nxl-submenu {
    display: block
}

html.minimenu .nxl-navigation:hover .navbar-content .nxl-caption:before {
    content: none
}

html.minimenu .nxl-navigation:hover .navbar-content .nxl-caption label {
    display: block
}

.main-content .content-sidebar.content-sidebar-md {
    max-width: 300px
}

.main-content .content-sidebar.content-sidebar-lg {
    max-width: 350px
}

.main-content .content-sidebar.content-sidebar-xl {
    max-width: 400px
}

.main-content .content-sidebar .content-sidebar-body .nxl-content-sidebar-item {
    margin: 15px 0
}

.main-content .content-sidebar .content-sidebar-body .nxl-content-sidebar-item .nav-item {
    margin: 0 15px 5px 15px
}

.main-content .content-sidebar .content-sidebar-body .nxl-content-sidebar-item .nav-item .nav-link {
    gap: 15px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #283c50;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    transition: all .3s ease
}

.main-content .content-sidebar .content-sidebar-body .nxl-content-sidebar-item .nav-item .nav-link.active, .main-content .content-sidebar .content-sidebar-body .nxl-content-sidebar-item .nav-item .nav-link:hover {
    color: #001327;
    background-color: #eaebef;
    transition: all .3s ease
}

@keyframes wave {
    0%, 100%, 60% {
        transform: initial
    }
    30% {
        transform: translateY(-5px)
    }
}

@keyframes animation-infinite {
    0% {
        box-shadow: 0 0 0 0 #e5e7eb
    }
    100% {
        box-shadow: 0 0 0 25px transparent
    }
}

.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 6px;
    border-radius: 3px
}

.btn i, button i {
    font-size: 16px
}

.btn[class*=btn-light-], button[class*=btn-light-] {
    box-shadow: none
}

.btn.btn-sm i, button.btn-sm i {
    font-size: 10px
}

.btn {
    display: flex;
    padding: 12px 16px;
    font-size: 10px;
    line-height: normal;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 3px;
    transition: all .3s ease
}

.btn-check:active + .btn:active, .btn-check:active + .btn:focus, .btn-check:active + .btn:hover, .btn-check:checked + .btn:active, .btn-check:checked + .btn:focus, .btn-check:checked + .btn:hover, .btn-check:focus + .btn:active, .btn-check:focus + .btn:focus, .btn-check:focus + .btn:hover, .btn.active:active, .btn.active:focus, .btn.active:hover, .btn.show:active, .btn.show:focus, .btn.show:hover, .btn:active:active, .btn:active:focus, .btn:active:hover, .btn:focus:active, .btn:focus:focus, .btn:focus:hover, .btn:hover:active, .btn:hover:focus, .btn:hover:hover {
    color: #fff;
    outline: 0;
    box-shadow: none;
    transition: all .3s ease
}

.btn-light-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #283c50;
    border: 1px solid #dcdee4
}

.btn-light-brand.show, .btn-light-brand:active, .btn-light-brand:focus, .btn-light-brand:hover {
    color: #283c50 !important;
    border: 1px solid #ced4da !important;
    transition: all .3s ease
}

.btn-close:active, .btn-close:focus {
    outline: 0;
    box-shadow: none
}

button:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
    transition: all .3s ease
}

.btn-sm {
    padding: 7px 15px;
    font-size: 9px
}

.btn-lg {
    padding: 15px 20px;
    font-size: 11px
}

.btn-primary, .btn-primary:hover, .btn.bg-soft-primary:focus, .btn.bg-soft-primary:hover {
    color: #fff !important;
    border-color: #3454d1 !important;
    background-color: #3454d1 !important
}

.btn-secondary, .btn-secondary:hover, .btn.bg-soft-secondary:focus, .btn.bg-soft-secondary:hover {
    color: #fff !important;
    border-color: #64748b !important;
    background-color: #64748b !important
}

.btn-success, .btn-success:hover, .btn.bg-soft-success:focus, .btn.bg-soft-success:hover {
    color: #fff !important;
    border-color: #17c666 !important;
    background-color: #17c666 !important
}

.btn-danger, .btn-danger:hover, .btn.bg-soft-danger:focus, .btn.bg-soft-danger:hover {
    color: #fff !important;
    border-color: #ea4d4d !important;
    background-color: #ea4d4d !important
}

.btn-info, .btn-info:hover, .btn.bg-soft-info:focus, .btn.bg-soft-info:hover {
    color: #fff !important;
    border-color: #3dc7be !important;
    background-color: #3dc7be !important
}

.btn-warning, .btn-warning:hover, .btn.bg-soft-warning:focus, .btn.bg-soft-warning:hover {
    color: #fff !important;
    border-color: #ffa21d !important;
    background-color: #ffa21d !important
}

.card {
    margin-bottom: 24px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all .3s ease;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1)
}

.card:hover {
    transition: all .3s ease
}

.card:hover .card-footer[class*=bg-] {
    box-shadow: none
}

.card:hover .card-header-btn {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: all .3s ease
}

.card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    background-color: transparent
}

.card .card-header .card-title {
    margin-bottom: 0;
    color: #283c50;
    font-size: 16px;
    font-weight: 700
}

.card .card-header .card-title + p, .card .card-header .card-title + small {
    margin-top: 10px
}

.card .card-header .card-title + p:last-child, .card .card-header .card-title + small:last-child {
    margin-bottom: 0
}

.card .card-footer {
    color: #283c50;
    transition: box-shadow .2s ease-in-out;
    border-top: 1px solid #e5e7eb;
    background-color: transparent
}

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

.card .card-header-btn {
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition: all .3s ease
}

.card.card-expand {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    position: fixed !important;
    overflow-x: hidden;
    overflow-y: scroll;
    border-radius: 0;
    height: calc(100% - 0px);
    transition: all .3s ease
}

.card.card-expand.card-loading {
    position: absolute
}

.card.card-expand.card-expand .card-body {
    flex: 1 0 0
}

.card.bg-primary {
    box-shadow: 0 10px 10px -1px rgba(52, 84, 209, .3)
}

.card.bg-success {
    box-shadow: 0 10px 10px -1px rgba(23, 198, 102, .3)
}

.card.bg-info {
    box-shadow: 0 10px 10px -1px rgba(61, 199, 190, .3)
}

.card.bg-warning {
    box-shadow: 0 10px 10px -1px rgba(255, 162, 29, .3)
}

.card.bg-danger {
    box-shadow: 0 10px 10px -1px rgba(234, 77, 77, .3)
}

.card.bg-light {
    box-shadow: 0 10px 10px -1px rgba(239, 240, 246, .3)
}

.card.bg-dark {
    box-shadow: 0 10px 10px -1px rgba(40, 60, 80, .3)
}

.dropdown-menu {
    padding: 15px 0;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 24px 0 rgba(62, 57, 107, .18)
}

.nxl-header .dropdown-menu {
    animation: .4s ease-in-out 0s normal forwards 1 fadein
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0)
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.dropdown .dropdown-menu {
    width: 225px
}

.dropdown .dropdown-menu .dropdown-item {
    margin: 3px 10px;
    padding: 10px 15px;
    color: #283c50;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    border-radius: 5px;
    transition: all .3s ease;
    width: -webkit-fill-available
}

.dropdown .dropdown-menu .dropdown-item.active, .dropdown .dropdown-menu .dropdown-item:active, .dropdown .dropdown-menu .dropdown-item:focus, .dropdown .dropdown-menu .dropdown-item:hover {
    color: #001327;
    background-color: #eaebef;
    transition: all .3s ease
}

.dropdown .dropdown-menu .dropdown-item.active i.bg-gray-500, .dropdown .dropdown-menu .dropdown-item:active i.bg-gray-500, .dropdown .dropdown-menu .dropdown-item:focus i.bg-gray-500, .dropdown .dropdown-menu .dropdown-item:hover i.bg-gray-500 {
    background-color: #001327 !important;
    transition: all .3s ease
}

.dropdown .dropdown-menu .dropdown-item i {
    font-size: 16px;
    margin-right: 15px
}

.form-control, input {
    color: #283c50;
    padding: 12px 15px;
    border-color: #e5e7eb;
    border-radius: 5px
}

.form-control.active, .form-control.focus, .form-control:active, .form-control:focus, input.active, input.focus, input:active, input:focus {
    outline: 0;
    color: #283c50;
    border-color: #3454d1 !important;
    box-shadow: none !important
}

.form-control::-moz-placeholder, input::-moz-placeholder {
    color: #91a1b6 !important
}

.form-control::placeholder, input::placeholder {
    color: #91a1b6 !important
}

.form-control::-ms-placeholder, input::-ms-placeholder {
    color: #91a1b6 !important
}

.form-control::-moz-placeholder, input::-moz-placeholder {
    color: #91a1b6 !important
}

.form-control::-webkit-placeholder, input::-webkit-placeholder {
    color: #91a1b6 !important
}

.input-group-text {
    color: #283c50;
    padding: 0 15px;
    font-weight: 600;
    border-radius: 5px;
    border-color: #e5e7eb;
    background-color: #ecedf4
}

input[type=search]::-webkit-search-cancel-button {
    display: none
}

input[type=checkbox], input[type=radio] {
    padding: 0;
    box-sizing: border-box
}

.custom-control {
    display: block;
    min-height: 1.8px;
    position: relative;
    padding-left: .75rem
}

.custom-control-input {
    left: 10px;
    opacity: 0;
    z-index: -1;
    width: 1.25rem;
    height: 1.375rem;
    position: absolute
}

.custom-control-label {
    left: 15px;
    cursor: pointer;
    margin-bottom: 0;
    position: relative;
    color: #283c50;
    font-size: 13px;
    vertical-align: top;
    font-weight: 500;
    text-transform: inherit
}

.custom-checkbox .custom-control-label:before {
    content: "";
    width: 18px;
    height: 18px;
    top: 1px;
    left: -28px;
    display: block;
    border-width: 3px;
    position: absolute;
    border-radius: 3px;
    border: 1px solid #e5e7eb;
    background-color: #ecedf4
}

.custom-checkbox .custom-control-label:after {
    top: 1px;
    content: "";
    left: -1.65rem;
    display: block;
    width: .75rem;
    height: .75rem;
    position: absolute;
    background-size: 0;
    background-repeat: no-repeat;
    background: no-repeat 50%/50% 50%;
    transition: background-size .15s ease-in-out
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-size: 100%;
    transition: background-size .15s ease-in-out
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    top: 1px;
    left: -26px;
    color: #fff;
    content: "\f272";
    position: absolute;
    font-family: bootstrap-icons !important
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #3454d1;
    background-color: #3454d1
}

.custom-control-label:before {
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-size 5s ease-in-out
}

body.modal-open .nxl-container, body.modal-open .nxl-header, body.modal-open .nxl-navigation, body.modal-open .page-header {
    filter: blur(3px);
    transition: all .2s linear
}

.modal .modal-content {
    border-radius: 10px
}

.table-responsive .table {
    color: #283c50;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-color: #e5e7eb;
    vertical-align: middle
}

.table-responsive .table:not(caption) > * {
    border-color: #e5e7eb !important
}

.table-responsive .table thead th {
    border-bottom: 1px solid #e5e7eb
}

.table-responsive .table thead th {
    padding: 8px 15px;
    color: #283c50;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase
}

.table-responsive .table thead th:first-child {
    padding-left: 30px
}

.table-responsive .table thead th:last-child {
    padding-right: 30px
}

.table-responsive .table tbody tr:last-child * {
    border-bottom: transparent
}

.table-responsive .table tr td {
    padding: 15px 15px;
    white-space: nowrap;
    vertical-align: middle
}

.table-responsive .table tr td:first-child {
    padding-left: 30px
}

.table-responsive .table tr td:last-child {
    padding-right: 30px
}

.table-responsive .table.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgb(244 244 249)
}

.table-responsive table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: none;
    transition: all .3s ease;
    background-color: #f2f3f8
}

.table-responsive table.dataTable tbody > tr.selected > * {
    color: #283c50;
    box-shadow: inset 0 0 0 #eeeef5
}

.table-responsive table.dataTable tbody > tr.selected > * a {
    color: #283c50
}

.table-responsive div.dataTables_wrapper div.dataTables_filter input, .table-responsive div.dataTables_wrapper div.dataTables_filter select, .table-responsive div.dataTables_wrapper div.dataTables_length input, .table-responsive div.dataTables_wrapper div.dataTables_length select {
    padding: 8px 15px
}

.table-responsive .dataTables_paginate .page-link {
    color: #283c50;
    font-size: 12px;
    box-shadow: none !important;
    border-color: #ecedf4
}

.table-responsive .dataTables_paginate .active > .page-link, .table-responsive .dataTables_paginate .page-link.active {
    color: #fff !important;
    background-color: #3454d1
}

.table-responsive .dataTables_paginate .disabled > .page-link, .table-responsive .dataTables_paginate .page-link.disabled {
    color: #ced4da
}

.table-responsive div.dataTables_info {
    font-size: 11px
}

.generate-pass .field .show-pass {
    width: 45px;
    position: relative
}

.generate-pass .field .show-pass:before {
    top: 13px;
    left: 16.5px;
    content: "<i data-feather="eye"></i><script>feather.replace();</script>";
    position: absolute;
}

.generate-pass div.progress-bar {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between
}

.generate-pass div.progress-bar div {
    width: 23%;
    height: 4px;
    border-radius: 25px;
    background-color: #ecedf4
}

@keyframes fadeInCheckbox {
    from {
        opacity: 0;
        transform: rotateZ(-20deg)
    }
    to {
        opacity: 1;
        transform: rotateZ(0)
    }
}

.team-progress-1 .circle-progress, .team-progress-2 .circle-progress {
    width: 50px;
    height: 50px
}

.auth-creative-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

.auth-creative-wrapper .auth-creative-inner {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0
}

.auth-creative-wrapper .auth-creative-inner:after {
    top: 0;
    bottom: 0;
    width: 50%;
    content: "";
    position: fixed;
    background: #e9ecef
}

.auth-creative-wrapper .auth-creative-inner .creative-card-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: auto auto
}

.auth-creative-wrapper .auth-creative-inner .creative-card-wrapper .creative-card-body {
    width: 100%;
    max-width: 450px;
    margin: auto auto
}

.customers-nav-tabs {
    margin-bottom: -1px
}

.customers-nav-tabs .nav-item .nav-link {
    border: none;
    padding: 20px 30px;
    color: #283c50;
    font-weight: 600;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    transition: all .3s ease
}

.customers-nav-tabs .nav-item .nav-link.active {
    color: #3454d1;
    border-bottom: 3px solid #3454d1;
    background-color: rgba(52, 84, 209, .075);
    transition: all .3s ease
}

.customers-nav-tabs {
    margin-bottom: -1px
}

.customers-nav-tabs .nav-item .nav-link {
    border: none;
    padding: 20px 30px;
    color: #283c50;
    font-weight: 600;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    transition: all .3s ease
}

.customers-nav-tabs .nav-item .nav-link.active {
    color: #3454d1;
    border-bottom: 3px solid #3454d1;
    background-color: rgba(52, 84, 209, .075);
    transition: all .3s ease
}

.team-progress-1 .circle-progress, .team-progress-2 .circle-progress {
    width: 50px;
    height: 50px
}

.calendar {
    height: 500px;
    overflow: hidden;
    position: relative;
    text-transform: capitalize;
    text-align: center;
    font: 15px/1em inherit;
    color: #283c50
}

.calendar a {
    color: inherit;
    text-decoration: none
}

.calendar header {
    padding: 25px 15px 20px;
    border-bottom: 1px solid #e5e7eb
}

.calendar header .month {
    padding: 0;
    margin: 0;
    font-size: 14px;
    text-transform: uppercase
}

.calendar header .month .year {
    margin-top: 5px;
    color: #7587a7;
    font-size: 12px;
    font-weight: 400
}

.calendar table {
    width: 100%;
    border-spacing: 0
}

.calendar thead {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase
}

.calendar td {
    padding: 15px 5px
}

.calendar .day {
    color: #283c50;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer
}

.calendar .day:hover {
    border: 2px solid #3454d1
}

.calendar .day.today {
    background: #3454d1;
    color: #fff
}

.calendar .day.disabled {
    cursor: default
}

.calendar .day.disabled:hover {
    border: 2px solid transparent
}

.calendar .filler {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #e9ecef;
    transform: translate(-50%, -50%)
}

.daterangepicker {
    top: 133px
}

.dataTables_wrapper .row:first-child, .dataTables_wrapper .row:last-child {
    padding: 25px 25px
}

.dataTables_wrapper .row:first-child {
    border-bottom: 1px solid #dcdee4
}

.dataTables_wrapper .row:last-child {
    border-top: 1px solid #dcdee4
}

.dataTables_paginate .active > .page-link, .dataTables_paginate .page-link, .dataTables_paginate .page-link.active {
    border-radius: 5px
}

.wizard > .content {
    margin: auto;
    max-width: 600px;
    padding: 70px 0
}

.wizard .steps {
    transform: translateY(0);
    transition: all .3s ease
}

.wizard > .steps > ul > li {
    float: left;
    flex: 0 0;
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
    border-top: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb
}

.wizard > .steps > ul > li:last-child {
    border-right: none
}

.wizard > .steps a, .wizard > .steps a:active, .wizard > .steps a:hover {
    margin: 0 0;
    padding: 30px 25px 25px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.wizard ul[role=tablist] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    border-bottom: 1px solid #e5e7eb
}

/*!
<--!----------------------------------------------------------------!-->
* Customizer CSS
<--!----------------------------------------------------------------!-->
*/
.theme-customizer {
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    z-index: 1025;
    position: fixed;
    background-color: #fff;
    border-left: 1px solid #e5e7eb;
    transform: translateX(100%);
    transition: all .3s ease
}

.theme-customizer .customizer-handle {
    top: 48%;
    left: -48px;
    position: absolute
}

.theme-customizer .customizer-handle .cutomizer-open-trigger {
    padding: 15px;
    color: #fff;
    border: 1px solid #3454d1;
    border-radius: 6px 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(40, 60, 80, .15)
}

.theme-customizer .customizer-handle .cutomizer-open-trigger i {
    animation-name: spin;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes spin {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body {
    height: calc(100vh - 140px)
}

.theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set {
    border-radius: 5px
}

.theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items .single-option .options-label {
    overflow: hidden;
    border-radius: 5px;
    transition: all .5s ease;
    display: flex;
    align-items: center;
    justify-content: center
}

.theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items .single-option .options-label:hover {
    transition: all .5s ease;
    background-color: #ecedf4
}

.theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items .single-option input:checked + .options-label:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    font-size: 12px;
    color: #3454d1;
    content: "\f272";
    position: absolute;
    align-items: center;
    cursor: not-allowed;
    font-weight: 400;
    justify-content: center;
    transition: all .5s ease;
    background-color: #ecedf4;
    font-family: bootstrap-icons !important
}

.theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items .single-option.active {
    display: block !important
}

.theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items .single-option.active:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 5px;
    width: 94%;
    height: 100%;
    z-index: 9999;
    display: flex;
    font-size: 12px;
    color: #3454d1;
    content: "\f272";
    position: absolute;
    align-items: center;
    cursor: not-allowed;
    font-weight: 400;
    justify-content: center;
    transition: all .5s ease;
    background-color: #ecedf4;
    font-family: bootstrap-icons !important
}

.theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items.app-theme .single-option {
    position: relative
}

.theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items.app-theme .single-option .palette-card {
    width: 100%;
    height: 100%;
    padding: 3px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items.app-theme .single-option .palette-card span {
    width: 100%;
    height: 100%
}

html.app-navigation-dark .nxl-navigation {
    background: #0f172a
}

html.app-navigation-dark .nxl-navigation .m-header {
    background: #0f172a;
    border-right: 1px solid #1b2436;
    border-bottom: 1px solid #16213d
}

html.app-navigation-dark .nxl-navigation .m-header .logo-lg {
    filter: invert(1)
}

html.app-navigation-dark .nxl-navigation .navbar-content {
    border-right: 1px solid #1b2436
}

html.app-navigation-dark .nxl-navigation .navbar-content .nxl-caption {
    color: #fff
}

html.app-navigation-dark .nxl-navigation .navbar-content .nxl-link {
    color: #b1b4c0
}

html.app-navigation-dark .nxl-navigation .navbar-content .nxl-link:active, html.app-navigation-dark .nxl-navigation .navbar-content .nxl-link:focus, html.app-navigation-dark .nxl-navigation .navbar-content .nxl-link:hover {
    color: #fff
}

html.app-navigation-dark .nxl-navigation .navbar-content .nxl-link:active .nxl-micon i, html.app-navigation-dark .nxl-navigation .navbar-content .nxl-link:focus .nxl-micon i, html.app-navigation-dark .nxl-navigation .navbar-content .nxl-link:hover .nxl-micon i {
    color: #fff
}

html.app-navigation-dark .nxl-navigation .navbar-content .nxl-navbar > .nxl-item.active > .nxl-link, html.app-navigation-dark .nxl-navigation .navbar-content .nxl-navbar > .nxl-item:focus > .nxl-link, html.app-navigation-dark .nxl-navigation .navbar-content .nxl-navbar > .nxl-item:hover > .nxl-link {
    background-color: #1c2438
}

html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item.active > .nxl-link, html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item:focus > .nxl-link, html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item:hover > .nxl-link {
    color: #fff;
    background-color: #1c2438
}

html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item.active > .nxl-link .nxl-micon i, html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item:focus > .nxl-link .nxl-micon i, html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item:hover > .nxl-link .nxl-micon i {
    color: #fff
}

html.app-navigation-dark .nxl-navigation .navbar-content .card {
    margin: 20px;
    border-color: #283c50;
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15)
}

html.app-navigation-dark .nxl-navigation .navbar-content .card .text-dark {
    color: #fff !important
}

html.app-navigation-dark.minimenu .nxl-navigation:hover .navbar-content {
    background-color: #0f172a;
    border-right: 1px solid #1b2436
}

html.app-header-dark .nxl-navigation .m-header {
    background: #0f172a;
    border-bottom: 1px solid #1b2436;
    border-right: 1px solid #1b2436
}

html.app-header-dark .nxl-navigation .m-header .logo-lg {
    filter: invert(1)
}

html.app-header-dark .nxl-header {
    color: #fff;
    background: #0f172a;
    border-bottom: 1px solid #1b2436
}

html.app-header-dark .nxl-header .header-wrapper .hamburger-inner {
    background-color: #fff
}

html.app-header-dark .nxl-header .header-wrapper .hamburger-inner:after, html.app-header-dark .nxl-header .header-wrapper .hamburger-inner:before {
    background-color: #fff
}

html.app-header-dark .nxl-header .header-wrapper .nxl-navigation-toggle a#menu-expend-button, html.app-header-dark .nxl-header .header-wrapper .nxl-navigation-toggle a#menu-mini-button {
    color: #fff
}

html.app-header-dark .nxl-header .header-wrapper .nxl-lavel-mega-menu-toggle a#nxl-lavel-mega-menu-open {
    color: #fff
}

html.app-header-dark .nxl-header .header-wrapper .nxl-head-link {
    color: #fff
}

html.app-header-dark .nxl-header .header-wrapper .nxl-head-link.active, html.app-header-dark .nxl-header .header-wrapper .nxl-head-link:active, html.app-header-dark .nxl-header .header-wrapper .nxl-head-link:focus, html.app-header-dark .nxl-header .header-wrapper .nxl-head-link:hover {
    color: #3454d1;
    background-color: #1c2438 !important
}

html.app-skin-dark .btn, html.app-skin-dark .custom-control-label, html.app-skin-dark .daterangepicker .ranges li, html.app-skin-dark .dropdown-item, html.app-skin-dark .form-control, html.app-skin-dark .h1, html.app-skin-dark .h2, html.app-skin-dark .h3, html.app-skin-dark .h4, html.app-skin-dark .h5, html.app-skin-dark .h6, html.app-skin-dark .input-group-text, html.app-skin-dark .list-group-item, html.app-skin-dark .table thead th, html.app-skin-dark .text-dark, html.app-skin-dark a, html.app-skin-dark h1, html.app-skin-dark h2, html.app-skin-dark h3, html.app-skin-dark h4, html.app-skin-dark h5, html.app-skin-dark h6, html.app-skin-dark input {
    color: #fff !important
}

html.app-skin-dark .table, html.app-skin-dark .text-muted, html.app-skin-dark body {
    color: #b1b4c0 !important
}

html.app-skin-dark .dropdown-item.active, html.app-skin-dark .dropdown-item:active, html.app-skin-dark .dropdown-item:focus, html.app-skin-dark .dropdown-item:hover {
    color: #3454d1 !important
}

html.app-skin-dark .avatar-image, html.app-skin-dark .avatar-text, html.app-skin-dark .input-group-text, html.app-skin-dark .language_select.active a:before, html.app-skin-dark .page-header, html.app-skin-dark body {
    background-color: #121a2d !important
}

html.app-skin-dark .bg-white, html.app-skin-dark .card, html.app-skin-dark .dropdown-menu, html.app-skin-dark .footer, html.app-skin-dark .list-group-item, html.app-skin-dark .modal-content, html.app-skin-dark .nxl-header, html.app-skin-dark .page-header-right-items {
    background-color: #0f172a !important
}

html.app-skin-dark .btn-light-brand {
    background-color: #1c2438 !important
}

html.app-skin-dark .avatar-image, html.app-skin-dark .avatar-text, html.app-skin-dark .border, html.app-skin-dark .border-bottom, html.app-skin-dark .border-start, html.app-skin-dark .border-top, html.app-skin-dark .btn-light-brand, html.app-skin-dark .card, html.app-skin-dark .card-footer, html.app-skin-dark .card-header, html.app-skin-dark .dropdown-divider, html.app-skin-dark .dropdown-header, html.app-skin-dark .dropdown-menu, html.app-skin-dark .footer, html.app-skin-dark .form-control, html.app-skin-dark .input-group-text, html.app-skin-dark .language_select a, html.app-skin-dark .list-group-item, html.app-skin-dark .modal-content, html.app-skin-dark .modal-footer, html.app-skin-dark .modal-header, html.app-skin-dark .notifications-footer, html.app-skin-dark .notifications-head, html.app-skin-dark .notifications-item, html.app-skin-dark .nxl-header, html.app-skin-dark .page-header, html.app-skin-dark .page-header-right-close-toggle, html.app-skin-dark .page-header-right-items, html.app-skin-dark .table thead th, html.app-skin-dark .table tr td, html.app-skin-dark .timesheets-footer, html.app-skin-dark .timesheets-head {
    border-color: #1b2436 !important
}

html.app-skin-dark .form-control, html.app-skin-dark input, html.app-skin-dark textarea {
    background-color: transparent !important;
    border-color: #1b2436 !important
}

html.app-skin-dark .form-control.active, html.app-skin-dark .form-control:active, html.app-skin-dark .form-control:focus, html.app-skin-dark .form-control:hover, html.app-skin-dark input.active, html.app-skin-dark input:active, html.app-skin-dark input:focus, html.app-skin-dark input:hover, html.app-skin-dark textarea.active, html.app-skin-dark textarea:active, html.app-skin-dark textarea:focus, html.app-skin-dark textarea:hover {
    border-color: #3454d1 !important
}

html.app-skin-dark .daterangepicker .ranges li.active, html.app-skin-dark .daterangepicker .ranges li:active, html.app-skin-dark .daterangepicker .ranges li:focus, html.app-skin-dark .daterangepicker .ranges li:hover, html.app-skin-dark .daterangepicker td.available.active, html.app-skin-dark .daterangepicker td.available:active, html.app-skin-dark .daterangepicker td.available:focus, html.app-skin-dark .daterangepicker td.available:hover, html.app-skin-dark .daterangepicker th.available.active, html.app-skin-dark .daterangepicker th.available:active, html.app-skin-dark .daterangepicker th.available:focus, html.app-skin-dark .daterangepicker th.available:hover, html.app-skin-dark .dropdown-item.active, html.app-skin-dark .dropdown-item:active, html.app-skin-dark .dropdown-item:focus, html.app-skin-dark .dropdown-item:hover, html.app-skin-dark .nxl-header .nxl-head-link.active, html.app-skin-dark .nxl-header .nxl-head-link:active, html.app-skin-dark .nxl-header .nxl-head-link:focus, html.app-skin-dark .nxl-header .nxl-head-link:hover {
    background-color: #1c2438 !important
}

.btn-check:active + html.app-skin-dark .btn:active, .btn-check:active + html.app-skin-dark .btn:focus, .btn-check:active + html.app-skin-dark .btn:hover, .btn-check:checked + html.app-skin-dark .btn:active, .btn-check:checked + html.app-skin-dark .btn:focus, .btn-check:checked + html.app-skin-dark .btn:hover, .btn-check:focus + html.app-skin-dark .btn:active, .btn-check:focus + html.app-skin-dark .btn:focus, .btn-check:focus + html.app-skin-dark .btn:hover, html.app-skin-dark .btn.active:active, html.app-skin-dark .btn.active:focus, html.app-skin-dark .btn.active:hover, html.app-skin-dark .btn.show:active, html.app-skin-dark .btn.show:focus, html.app-skin-dark .btn.show:hover, html.app-skin-dark .btn:active:active, html.app-skin-dark .btn:active:focus, html.app-skin-dark .btn:active:hover, html.app-skin-dark .btn:focus:active, html.app-skin-dark .btn:focus:focus, html.app-skin-dark .btn:focus:hover, html.app-skin-dark .btn:hover:active, html.app-skin-dark .btn:hover:focus, html.app-skin-dark .btn:hover:hover {
    color: #fff !important
}

html.app-skin-dark .daterangepicker {
    box-shadow: 0 4px 24px 0 rgba(4, 0, 40, .8)
}

html.app-skin-dark .btn-close {
    filter: invert(1)
}

html.app-skin-dark hr {
    border-color: #25324a !important
}

html.app-skin-dark .bg-gray-200 {
    background-color: #151e34 !important
}

html.app-skin-dark .bg-gray-300 {
    background-color: #162038 !important
}

html.app-skin-dark .bg-gray-500 {
    background-color: #19253f !important
}

html.app-skin-dark .bg-primary {
    background-color: #3454d1 !important
}

html.app-skin-dark .bg-success {
    background-color: #17c666 !important
}

html.app-skin-dark .bg-danger {
    background-color: #ea4d4d !important
}

html.app-skin-dark .bg-warning {
    background-color: #ffa21d !important
}

html.app-skin-dark .bg-info {
    background-color: #3dc7be !important
}

html.app-skin-dark .bg-soft-primary {
    background-color: rgba(52, 84, 209, .075) !important
}

html.app-skin-dark .bg-soft-success {
    background-color: rgba(23, 198, 102, .075) !important
}

html.app-skin-dark .bg-soft-danger {
    background-color: rgba(234, 77, 77, .075) !important
}

html.app-skin-dark .bg-soft-info {
    background-color: rgba(61, 199, 190, .075) !important
}

html.app-skin-dark .bg-soft-warning {
    background-color: rgba(255, 162, 29, .075) !important
}

html.app-skin-dark .text-primary {
    color: #3454d1 !important
}

html.app-skin-dark .text-success {
    color: #17c666 !important
}

html.app-skin-dark .text-danger {
    color: #ea4d4d !important
}

html.app-skin-dark .hamburger-inner {
    background-color: #fff
}

html.app-skin-dark .hamburger-inner:after, html.app-skin-dark .hamburger-inner:before {
    background-color: #fff
}

html.app-skin-dark .daterangepicker {
    color: #b1b4c0;
    border-color: #1b2436;
    background-color: #121a2d
}

html.app-skin-dark .daterangepicker td.off {
    opacity: .1;
    background-color: #121a2d
}

html.app-skin-dark .daterangepicker:after, html.app-skin-dark .daterangepicker:before {
    border-bottom-color: #1b2436
}

html.app-skin-dark .calendar {
    color: #fff
}

html.app-skin-dark .calendar header {
    border-color: #1b2436
}

html.app-skin-dark .calendar header .month .year {
    color: #b1b4c0
}

html.app-skin-dark .calendar .day {
    color: #b1b4c0
}

html.app-skin-dark .calendar .filler {
    background-color: #121a2d
}

html.app-skin-dark .wizard > .steps > ul > li {
    border-color: #1b2436
}

html.app-skin-dark .wizard ul[role=tablist] {
    border-color: #1b2436
}

html.app-skin-dark .wizard > .content > .body label.error {
    background-color: rgba(255, 53, 91, .0784313725);
    border: 1px dashed rgba(255, 97, 113, .2784313725)
}

html.app-skin-dark .dropdown .dropdown-menu {
    box-shadow: 0 10px 20px rgba(5, 0, 38, .8)
}

html.app-skin-dark .dropdown .dropdown-menu .dropdown-item i.bg-gray-500 {
    background-color: #fff !important
}

html.app-skin-dark .dropdown .dropdown-menu .dropdown-item.active i.bg-gray-500, html.app-skin-dark .dropdown .dropdown-menu .dropdown-item:active i.bg-gray-500, html.app-skin-dark .dropdown .dropdown-menu .dropdown-item:focus i.bg-gray-500, html.app-skin-dark .dropdown .dropdown-menu .dropdown-item:hover i.bg-gray-500 {
    background-color: #3454d1 !important
}

html.app-skin-dark .card {
    box-shadow: 0 0 20px rgba(14, 32, 56, .3)
}

html.app-skin-dark .table.table-hover > tbody > tr:hover > *, html.app-skin-dark .table > tbody > tr:hover > *, html.app-skin-dark .table > tbody > tr:nth-of-type(odd) > * {
    color: #fff !important;
    --bs-table-accent-bg: #121b2e !important
}

html.app-skin-dark .table:not(caption) > * {
    border-color: #1b2436 !important
}

html.app-skin-dark .custom-checkbox .custom-control-label:before {
    border-color: #1b2436;
    background-color: #19253f
}

html.app-skin-dark .nav-item .nav-link {
    color: #fff
}

html.app-skin-dark .nav-item .nav-link.active, html.app-skin-dark .nav-item .nav-link:hover {
    color: #3454d1;
    background-color: #1c2438 !important
}

html.app-skin-dark .customers-nav-tabs {
    border-color: #1b2436
}

html.app-skin-dark .customers-nav-tabs .nav-item .nav-link {
    border-radius: 0 0;
    color: #fff !important;
    border-color: transparent !important
}

html.app-skin-dark .customers-nav-tabs .nav-item .nav-link.active, html.app-skin-dark .customers-nav-tabs .nav-item .nav-link.hover {
    color: #3454d1 !important;
    border-bottom-color: #3454d1 !important;
    border-color: #1b2436;
    background-color: #1c2438
}

html.app-skin-dark .nxl-container .nxl-content .main-content .content-sidebar {
    border-color: #1b2436;
    background-color: #121a2d
}

html.app-skin-dark .nxl-container .nxl-content .main-content .content-sidebar .content-sidebar-header {
    border-color: #1b2436;
    background-color: #121a2d !important
}

html.app-skin-dark .nxl-container .nxl-content .main-content .content-sidebar .content-sidebar-body .sidebar-search input {
    background-color: #121a2d
}

html.app-skin-dark .nxl-navigation {
    background: #0f172a
}

html.app-skin-dark .nxl-navigation .m-header {
    background: #0f172a;
    border-right: 1px solid #1b2436;
    border-bottom: 1px solid #16213d
}

html.app-skin-dark .nxl-navigation .m-header .logo-lg {
    filter: invert(1)
}

html.app-skin-dark .nxl-navigation .navbar-content {
    border-right: 1px solid #1b2436
}

html.app-skin-dark .nxl-navigation .navbar-content .nxl-caption {
    color: #fff
}

html.app-skin-dark .nxl-navigation .navbar-content .nxl-link {
    color: #b1b4c0
}

html.app-skin-dark .nxl-navigation .navbar-content .nxl-link:active, html.app-skin-dark .nxl-navigation .navbar-content .nxl-link:focus, html.app-skin-dark .nxl-navigation .navbar-content .nxl-link:hover {
    color: #fff
}

html.app-skin-dark .nxl-navigation .navbar-content .nxl-link:active .nxl-micon i, html.app-skin-dark .nxl-navigation .navbar-content .nxl-link:focus .nxl-micon i, html.app-skin-dark .nxl-navigation .navbar-content .nxl-link:hover .nxl-micon i {
    color: #fff
}

html.app-skin-dark .nxl-navigation .navbar-content .nxl-navbar > .nxl-item.active > .nxl-link, html.app-skin-dark .nxl-navigation .navbar-content .nxl-navbar > .nxl-item:focus > .nxl-link, html.app-skin-dark .nxl-navigation .navbar-content .nxl-navbar > .nxl-item:hover > .nxl-link {
    background-color: #1c2438
}

html.app-skin-dark .nxl-navigation .navbar-content .nxl-item.active > .nxl-link, html.app-skin-dark .nxl-navigation .navbar-content .nxl-item:focus > .nxl-link, html.app-skin-dark .nxl-navigation .navbar-content .nxl-item:hover > .nxl-link {
    color: #fff;
    background-color: #1c2438
}

html.app-skin-dark .nxl-navigation .navbar-content .nxl-item.active > .nxl-link .nxl-micon i, html.app-skin-dark .nxl-navigation .navbar-content .nxl-item:focus > .nxl-link .nxl-micon i, html.app-skin-dark .nxl-navigation .navbar-content .nxl-item:hover > .nxl-link .nxl-micon i {
    color: #fff
}

html.app-skin-dark .nxl-navigation .navbar-content .card {
    margin: 20px;
    border-color: #283c50;
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15)
}

html.app-skin-dark .nxl-navigation .navbar-content .card .text-dark {
    color: #fff !important
}

html.app-skin-dark.minimenu .nxl-navigation:hover .navbar-content {
    background-color: #0f172a;
    border-right: 1px solid #1b2436
}

html.app-skin-dark .nxl-header .header-wrapper .header-right .nxl-header-language .nxl-h-dropdown.nxl-search-dropdown .avatar-text, html.app-skin-dark .nxl-header .header-wrapper .header-right .nxl-header-search .nxl-h-dropdown.nxl-search-dropdown .avatar-text {
    color: #fff
}

html.app-skin-dark .nxl-header .header-wrapper .header-right .nxl-header-language .nxl-h-dropdown.nxl-language-dropdown .language_select a:hover, html.app-skin-dark .nxl-header .header-wrapper .header-right .nxl-header-search .nxl-h-dropdown.nxl-language-dropdown .language_select a:hover {
    background-color: #151e34
}

html.app-skin-dark .nxl-header .header-wrapper .header-right .timesheets-body i {
    color: #fff
}

html.app-skin-dark .auth-creative-wrapper .auth-creative-inner:after {
    background-color: #0c1322
}

html.app-skin-dark :-ms-input-placeholder, html.app-skin-dark ::-webkit-input-placeholder, html.app-skin-dark ::placeholder {
    color: #50566e !important
}

html.app-skin-dark ::-webkit-scrollbar-track {
    background-color: #121a2d !important
}

html.app-skin-dark ::-webkit-scrollbar-thumb {
    background-color: #19253f !important
}

html.app-skin-dark .dark-light-theme .light-button {
    display: inline-flex !important
}

html.app-skin-dark .dark-light-theme .dark-button {
    display: none !important
}

html.app-skin-dark .theme-customizer {
    background-color: #0f172a;
    border-color: #1b2436
}

html.app-skin-dark .theme-customizer .customizer-handle .cutomizer-open-trigger {
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5)
}

html.app-skin-dark .theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items .single-option .options-label:hover {
    background-color: #1c2438
}

html.app-skin-dark .theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items .single-option input:checked + .options-label:before {
    background-color: #1c2438
}

html.app-skin-dark .theme-customizer .customizer-sidebar-wrapper .customizer-sidebar-body .theme-options-set .theme-options-items .single-option.active:before {
    background-color: #1c2438
}

html.app-skin-dark .dataTables_wrapper .row:first-child, html.app-skin-dark .dataTables_wrapper .row:last-child {
    border-color: #1b2436 !important
}

html.app-skin-dark .dataTables_wrapper table.dataTable.table-hover > tbody > tr:hover > * {
    background-color: #1c2438
}

html.app-skin-dark .dataTables_wrapper .dataTables_paginate .page-link {
    border-color: #1b2436;
    background-color: #121a2d
}

html.app-skin-dark .dataTables_wrapper .dataTables_paginate .page-link.disabled {
    opacity: .3;
    background-color: #0f172a
}

.dark-button {
    display: inline-flex !important
}

html.app-font-family-lato body {
    font-family: Lato, sans-serif
}

html.app-font-family-rubik body {
    font-family: Rubik, sans-serif
}

html.app-font-family-inter body {
    font-family: Inter, sans-serif
}

html.app-font-family-cinzel body {
    font-family: Cinzel, sans-serif
}

html.app-font-family-nunito body {
    font-family: Nunito, sans-serif
}

html.app-font-family-roboto body {
    font-family: Roboto, sans-serif
}

html.app-font-family-ubuntu body {
    font-family: Ubuntu, sans-serif
}

html.app-font-family-poppins body {
    font-family: Poppins, sans-serif
}

html.app-font-family-raleway body {
    font-family: Raleway, sans-serif
}

html.app-font-family-system-ui body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

html.app-font-family-noto-sans body {
    font-family: "Noto Sans", sans-serif
}

html.app-font-family-fira-sans body {
    font-family: "Fira Sans", sans-serif
}

html.app-font-family-work-sans body {
    font-family: "Work Sans", sans-serif
}

html.app-font-family-open-sans body {
    font-family: "Open Sans", sans-serif
}

html.app-font-family-maven-pro body {
    font-family: "Maven Pro", sans-serif
}

html.app-font-family-quicksand body {
    font-family: Quicksand, sans-serif
}

html.app-font-family-montserrat body {
    font-family: Montserrat, sans-serif
}

html.app-font-family-josefin-sans body {
    font-family: "Josefin Sans", sans-serif
}

html.app-font-family-ibm-plex-sans body {
    font-family: "IBM Plex Sans", sans-serif
}

html.app-font-family-source-sans-pro body {
    font-family: "Source Sans Pro", sans-serif
}

html.app-font-family-montserrat-alt body {
    font-family: "Montserrat Alternates", sans-serif
}

html.app-font-family-roboto-slab body {
    font-family: "Roboto Slab", serif
}

/*!
<--!----------------------------------------------------------------!-->
* Responsive CSS
<--!----------------------------------------------------------------!-->
*/
@media (min-width: 576px) {
    .nxl-user-dropdown .dropdown-menu.show {
        display: block;
        left: -225px !important;
        top: -10px !important
    }
}

@media (min-width: 1024px) {
    .nxl-head-mobile-toggler {
        display: none
    }
}

@media (min-width: 1200px) {
    .nxl-container.apps-container .nxl-content.without-header .main-content .app-sidebar-close-trigger, .nxl-container.apps-container .nxl-content.without-header .main-content .app-sidebar-open-trigger {
        display: none !important
    }
}

@media (max-width: 424.98px) {
    .auth-container .wd-450 {
        width: 350px !important;
        min-width: 350px !important;
        max-width: 350px !important
    }
}

@media (max-width: 575.98px) {
    .nxl-header .header-wrapper {
        padding: 0 20px
    }

    .nxl-header .header-wrapper .nxl-h-item {
        position: static
    }

    .nxl-header .header-wrapper .nxl-h-item .nxl-h-dropdown {
        left: 0 !important;
        right: 0 !important;
        width: -webkit-fill-available
    }

    .nxl-header .header-wrapper .nxl-level-menu .dropdown-menu {
        left: 0;
        display: block;
        padding-left: 30px
    }

    .nxl-container .nxl-content .page-header {
        padding: 0 20px
    }

    .nxl-container .nxl-content .main-content {
        padding: 20px 20px 5px
    }

    .nxl-container .nxl-content .main-content .content-area .content-area-body, .nxl-container .nxl-content .main-content .content-area .content-area-header {
        padding: 20px 20px
    }

    .card {
        margin-bottom: 20px
    }
}

@media (max-width: 767.98px) {
    .nxl-header .header-wrapper .nxl-h-item {
        position: static
    }

    .nxl-header .header-wrapper .nxl-h-item .nxl-h-dropdown.nxl-language-dropdown, .nxl-header .header-wrapper .nxl-h-item .nxl-h-dropdown.nxl-search-dropdown {
        left: 0 !important;
        right: 0 !important;
        width: -webkit-fill-available
    }

    .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items {
        top: 79px;
        right: 0;
        z-index: 99;
        height: 100%;
        width: 280px;
        position: fixed;
        background-color: #fff;
        border-top: 1px solid #e5e7eb;
        border-left: 1px solid #e5e7eb;
        display: flex;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        transition: all .3s ease;
        transform: translateX(100%)
    }

    .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items.page-header-right-open {
        opacity: 1;
        visibility: visible;
        transition: all .3s ease;
        transform: translateX(0);
        box-shadow: 0 10px 25px rgba(40, 60, 80, .15)
    }

    .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items.page-header-right-open .btn, .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items.page-header-right-open .dropdown, .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items.page-header-right-open .reportrange-picker, .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items.page-header-right-open .reportrange-picker-field {
        width: 100%
    }

    .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items.page-header-right-open .dropdown .dropdown-menu {
        width: 240px;
        transform: translate3d(0, 40px, 0) !important
    }

    .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items .page-header-right-items-wrapper {
        padding: 20px 20px;
        flex-direction: column
    }

    .nxl-container .nxl-content .page-header .page-header-right .page-header-right-items .page-header-right-close-toggle {
        height: 65px;
        width: 100%;
        padding: 15px;
        display: flex;
        align-items: center;
        line-height: 0;
        border-bottom: 1px solid #e5e7eb
    }
}

@media (max-width: 1024px) {
    .nxl-header {
        top: 0;
        left: 0 !important;
        transition: all .15s ease-in-out
    }

    .nxl-header .nxl-head-link {
        display: inline-flex
    }

    .nxl-header .nxl-head-link#mobile-collapse {
        position: absolute;
        left: 15px
    }

    .nxl-header .nxl-head-mobile-toggler {
        display: inline-flex
    }

    .nxl-header .nxl-navigation-toggle {
        display: none
    }

    .nxl-navigation {
        left: -280px;
        box-shadow: none;
        transition: all .15s ease-in-out
    }

    .nxl-navigation.mob-navigation-active {
        left: 0 !important
    }

    .nxl-navigation.mob-navigation-active .navbar-wrapper {
        position: relative;
        z-index: 5;
        background: inherit
    }
}

@media (max-width: 1199.98px) {

    .nxl-container {
        margin-left: 0
    }

    .auth-creative-wrapper .auth-creative-inner .creative-card-wrapper {
        max-width: calc(100% - 60px)
    }
}