@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
        
        /* ---------------------------- */
        /* -- New dashboard wip CSS -- */
        /* ---------------------------- */
        
        .dark-theme h1, .h1, .dark-theme h2, .h2, .dark-theme h3, .h3, .dark-theme h4, .h4, .dark-theme h5, .h5, .dark-theme h6, .h6, .dark-theme p, .dark-theme span, .dark-theme li, .dark-theme a, .dark-theme tr, .dark-theme td, .dark-theme th, .dark-theme b, .dark-theme strong, .dark-theme small, .dark-theme button, .dark-theme label, .dark-theme input {
          font-family: "Manrope", serif !important;
          
        }
        .dark-theme h1, .h1, .dark-theme h2, .h2, .dark-theme h3, .h3, .dark-theme h4, .h4, .dark-theme h5, .h5, .dark-theme h6, .h6 {
            color: #fff;
        }
        .dark-theme p, span, li, a, tr, td, th, b, strong, small, button, label, input { 
            
        }
        body.dark-theme {
            background-color: #2e3458 !important;
            font-family: "Manrope", serif !important;
        }
        
        .dark-theme .main-content {
            background-color: transparent;
        }
        
        .dark-theme a {
            color: #fff;
        }
        .dark-theme a:hover {
            text-decoration: none !important;    
        }
        
        .dark-theme #header-info .icon-shape {
            min-width: 48px;
        }
        
        .dark-theme div.bg-gradient-primary .ni {
            color: #fff;
        }
        
        .dark-theme .card {
            border: 1px solid transparent;
            box-shadow: none;
            transition: all 0.5s ease;
            background-color: #222643;
        }
        
        .dark-theme .card .card-body {
            font-family: "Manrope", serif !important;
        }
        .dark-theme .card:hover {
            box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
            border: 1px solid #70aeff;
        }
        
        .dark-theme .card:hover a {
            /*color: #c9d9fa;*/
        }
        
        .dark-theme .card .card-header {
            background-color: transparent;
        }
        
        .dark-theme .card .tooltip > i {
            vertical-align: baseline;
            padding-left: 2px;
        }
        
        .dark-theme .card label {
            color: #fff !important;
        }
        
        .dark-theme .table> :not(:last-child)> :last-child>*, .dark-theme .table> :not(caption)>*>* {
            border-bottom-color: #34395b;
        }
        
        .dark-theme .form-switch .form-check-input:checked {
            /*border-color: rgba(58, 65, 111, 0.95);*/
            /*background-color: rgb(33 38 71 / 95%);*/
            border-color: rgb(205 205 205 / 95%);
            background-color: rgb(45 177 253);
        }
        
        .dark-theme .form-control:disabled, .dark-theme .form-control[readonly], .dark-theme .form-control, .dark-theme .items-dropdown > label > .items-selector  {
            background-color: #15182d !important;
            border: 1px solid #15182d !important;
            color: #fff !important;
        }
        
        .dark-theme .page-link {
            background-color: #1c1f37 !important;
            border: unset !important;
            transition: all 0.5s ease;
        }
        
        .dark-theme .page-link:hover {
            background-color: #2f3359 !important;
        }
        
        .dark-theme .profile .card .list-group-item {
            background-color: #15182d;
        }
        
        .dark-theme .swal2-popup, .dark-theme .swal2-html-container {
            background-color: #15182d;
            color: #fff;
        }
        
        /* ---------------------------- */
        /* -- New dashboard wip CSS END-- */
        /* ---------------------------- */
        
        /* ---------------------------- */
        /* -- New light CSS -- */
        /* ---------------------------- */
        
        .light-theme h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, span, li, a, tr, td, th, b, strong, small, button, label, input {
          font-family: "Manrope", serif !important;
          
        }
        .light-theme h1, .h1, .light-theme h2, .h2, .light-theme h3, .h3, .light-theme h4, .h4, .light-theme h5, .h5, .light-theme h6, .h6 {
            color: #191e4a !important;
        }
        .light-theme p, span, li, a, tr, td, th, b, strong, small, button, label, input { 
            
        }
        body.light-theme {
            background-color: #f8f9fa !important;
            font-family: "Manrope", serif !important;
        }
        
        
        .light-theme a {
            color: #191e4a;
        }
        .light-theme a:hover {
            text-decoration: none !important;    
        }
        
        .light-theme #header-info .icon-shape {
            min-width: 48px;
        }
        
        .light-theme div.bg-gradient-primary .ni {
            color: #fff;
        }
        
        .light-theme .card {
            border: 1px solid transparent;
            box-shadow: none;
            transition: all 0.5s ease;
            background-color: #fff;
            
        }
        
        .light-theme .card .card-body {
            font-family: "Manrope", serif !important;
        }
        
        .light-theme .card:hover {
            box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
            border: 1px solid #70aeff;
        }
        
        .light-theme .card:hover a {
            color: #191e4a;
        }
        
        .light-theme .card label {
            color: #191e4a !important;
        }
        
        .light-theme .card .card-header {
            background-color: transparent;
        }
        
        .light-theme .card .tooltip > i {
            vertical-align: baseline;
            padding-left: 2px;
        }
        
        .light-theme .table> :not(:last-child)> :last-child>*, .light-theme .table> :not(caption)>*>* {
            border-bottom-color: #efefef;
        }
        
        .light-theme .profile .card .list-group-item {
            background-color: #f7f7f7;
        }
        
        /* ---------------------------- */
        /* -- New light CSS END-- */
        /* ---------------------------- */
        
        
        
        /* ---------------------------- */
        /* -- Sidenav Dark Start-- */
        /* ---------------------------- */
        
        .dark-theme .sidenav {
            z-index: 998;
            background-color: #363d68 !important;
            transition: all 0.4s ease;
        }
        
        .dark-theme .sidenav:hover {
            border: 1px solid #70aeff;
        }
        
        .dark-theme .sidenav-header {
            height: unset;
        }
        .dark-theme .sidenav .nav {
            background-color: #2e3458;
            border-radius: 0.5rem;
            margin-top: 4px;
        }
        
        .dark-theme .sidenav .navbar-nav .nav-link .icon {
            background-color: #2db1fd !important;
            background-image: unset !important;
        }
        
        .dark-theme .collapse .nav .nav-item {
            padding-left: 0 !important;
            
        }
        .dark-theme .collapse .nav .nav-item a span {
            transition: all 0.5s ease;
            color: #d5d5d5 !important;
        }
        .dark-theme .collapse .nav .nav-item a:hover span, .dark-theme .collapse .nav .nav-item .active span {
            color: #fff !important;
        }
        .dark-theme .collapse .nav-link:hover .icon {
            transition: all 0.4s ease;
            background-color: #2db1fd !important;
        }
        .dark-theme .sidenav .nav .nav-item .nav-link:before {
            display: none;
        }
        .dark-theme .sidenav .nav .nav-item .nav-link:hover {
            background-color: #2e3458;
        }
    
        
        .dark-theme .navbar-brand {
            margin: 0 !important;
            display: flex !important;
            justify-content: center;
            align-items: center;
        }
        
        .dark-theme .navbar-vertical .navbar-nav>.nav-item .nav-link.active div.icon, .dark-theme div.bg-gradient-primary {
            background-image: none;
            background-color: #2db1fd !important;
        }
        
        .dark-theme .navbar-vertical .navbar-nav>.nav-item .nav-link.active .icon svg .color-background, .navbar-vertical .navbar-nav>.nav-item .nav-link.active .icon svg .color-foreground, .dark-theme .navbar-vertical.navbar-expand-xs .navbar-nav>.nav-item>.nav-link .icon svg .color-background {
            fill: #fff;
        }
        
        .dark-theme .navbar-vertical .navbar-nav>.nav-item .nav-link.active {
            background-color: #2e3458;
            color: #fff;
        }
        .dark-theme .navbar-vertical .navbar-nav>.nav-item .nav-link:hover {
            background-color: #2e3458;
        }
        .dark-theme .navbar-vertical .navbar-nav>.nav-item .nav-link {
            color: #fff;
            border-radius: 0.5rem;
        }
        .dark-theme .navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after {
            color: rgb(255 255 255 / 50%) !important;
        }
        .dark-theme .navbar .sidenav-toggler-inner .sidenav-toggler-line {
            background: #222643;
        }
        
        /* ---------------------------- */
        /* -- Sidenav Dark end-- */
        /* ---------------------------- */
        
        /* ---------------------------- */
        /* -- Sidenav LIGHT Start-- */
        /* ---------------------------- */
        
        .light-theme .sidenav {
            z-index: 998;
            background-color: #edf3ff !important;
        }
        .light-theme .sidenav-header {
            height: unset;
        }
        .light-theme .sidenav .show {
        
        }
        .light-theme .sidenav .nav {
            background-color: #fff;
            border-radius: 0.5rem;
            margin-top: 10px;
        }
        .light-theme .collapse .nav .nav-item {
            padding-left: 0 !important;
        }
        .light-theme .collapse .nav .nav-item a span {
            transition: all 0.5s ease;
        }
        .light-theme .collapse .nav .nav-item a:hover span {
            color: #344767;
        }
        .light-theme .collapse .nav-link .icon {
            background-color: #062557 !important;
            color: #fff !important;
            background-image: unset !important;
        }
        .light-theme .collapse .nav-link {
            border-radius: 0.5em;
            transition: all 0.4s ease;
        }
        .light-theme .collapse .nav-link:hover {
            background-color: #fff !important;
        }
        .light-theme .sidenav .nav .nav-item .nav-link:before {
            display: none;
        }
        
        .light-theme .navbar-vertical .navbar-nav .nav-link, .light-theme .navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link.active {
            color: #344767;
        }
        .light-theme .navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link, .light-theme .navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item .nav-link {
            color: rgba(58, 65, 111, 0.5);
        }
        
        
        /* Sidenav CSS End*/
        
        .light-theme .navbar-brand {
            margin: 0 !important;
            display: flex !important;
            justify-content: center;
            align-items: center;
        }
        
        .light-theme .navbar-vertical .navbar-nav>.nav-item .nav-link.active div.icon, .light-theme div.bg-gradient-primary {
            background-image: none;
            background-color: #062557 !important;
        }
        
        .light-theme .navbar-vertical .navbar-nav>.nav-item .nav-link.active .icon svg .color-background, .light-theme .navbar-vertical .navbar-nav>.nav-item .nav-link.active .icon svg .color-foreground {
           fill: #ffffff !important;
        }
        
        .light-theme .navbar-vertical.navbar-expand-xs .navbar-nav>.nav-item>.nav-link .icon svg .color-background {
            fill: #ffffff !important;
        }
        
        /* ---------------------------- */
        /* -- Sidenav LIGHT End-- */
        /* ---------------------------- */
        
        .list-group {
            --bs-list-group-bg: unset !important;
        }
        
        /* ---------------------------- */
        /* -- Swal -- */
        /* ---------------------------- */
        .swal-container-highest-z {
            z-index: 999999999 !important;
        }
        
        /* ---------------------------- */
        /* -- Charts -- */
        /* ---------------------------- */
        .bg-chart {
            border: 1px solid rgb(6 37 87 / 8%);
            border-radius: 12px;
        }
        
        .dark-theme .bg-chart {
            border: 1px solid rgba(112, 173, 254, 0.12);
            background-color: #1a1d35;
        }
        
        .text-secondary {
            color: #7987a3 !important;
        }