.ubuntu-sans-<uniquifier > {
    font-family: 'Ubuntu Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: 'wdth' 100;
}

.jost-<uniquifier > {
    font-family: 'Jost', sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: 'wdth' 100;
}

body {
    font-family: 'Ubuntu Sans', sans-serif;
    font-size: 14px;
}

.skin-blue .content-wrapper .content-header-custom,
.skin-blue-light .content-wrapper .content-header-custom {
    background: #f9f9fe !important;
}

.skin-blue .content-wrapper .content-header-custom a,
.skin-blue .content-wrapper .content-header-custom h1,
.skin-blue .content-wrapper .content-header-custom small,
.skin-blue-light .content-wrapper .content-header-custom a,
.skin-blue-light .content-wrapper .content-header-custom h1,
.skin-blue-light .content-wrapper .content-header-custom small {
    color: #000 !important;
}

.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar {
    background: #f9f9fe;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #000 !important;
}

.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar {
    background: #f9f9fe;
    box-shadow: 0px 0px 0px rgb(0 0 0 / 44%);
    color: #000 !important;
}

.skin-blue-light .main-header .navbar .nav > li > a {
    color: #000;
}

.skin-blue-light .main-header .navbar .nav .open > a,
.skin-blue-light .main-header .navbar .nav .open > a:focus,
.skin-blue-light .main-header .navbar .nav .open > a:hover,
.skin-blue-light .main-header .navbar .nav > .active > a,
.skin-blue-light .main-header .navbar .nav > li > a:active,
.skin-blue-light .main-header .navbar .nav > li > a:focus,
.skin-blue-light .main-header .navbar .nav > li > a:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
}

.skin-blue-light .main-header .navbar .sidebar-toggle {
    color: #000;
}

.box,
.info-box {
    margin-bottom: 30px;
    box-shadow: 0 8px 2rem 2px rgb(136 152 170 / 38%) !important;
    border-radius: 15px;
}

.sidebar {
    padding-bottom: 10px;
    background: #f9f9fe;
}

.skin-blue-light .sidebar a {
    color: #637381;
}

.skin-black-light .main-sidebar,
.skin-blue-light .main-sidebar,
.skin-green-light .main-sidebar,
.skin-purple-light .main-sidebar,
.skin-red-light .main-sidebar,
.skin-yellow-light .main-sidebar {
    background: #f9f9fe !important;
    border-right: 0 !important;
}

.main-sidebar {
    box-shadow: none !important;
    padding-top: 62px;
}

.skin-black-light .sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li.menu-open > a,
.skin-black-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li.active > a,
.skin-blue-light .sidebar-menu > li.menu-open > a,
.skin-blue-light .sidebar-menu > li:hover > a,
.skin-green-light .sidebar-menu > li.active > a,
.skin-green-light .sidebar-menu > li.menu-open > a,
.skin-green-light .sidebar-menu > li:hover > a,
.skin-purple-light .sidebar-menu > li.active > a,
.skin-purple-light .sidebar-menu > li.menu-open > a,
.skin-purple-light .sidebar-menu > li:hover > a,
.skin-red-light .sidebar-menu > li.active > a,
.skin-red-light .sidebar-menu > li.menu-open > a,
.skin-red-light .sidebar-menu > li:hover > a,
.skin-yellow-light .sidebar-menu > li.active > a,
.skin-yellow-light .sidebar-menu > li.menu-open > a,
.skin-yellow-light .sidebar-menu > li:hover > a {
    background: linear-gradient(90deg, #007bff, #007bff) !important;
    color: rgba(0, 0, 0, 0.9);
}

.skin-black-light .sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li.menu-open > a,
.skin-black-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li.active > a,
.skin-blue-light .sidebar-menu > li.menu-open > a,
.skin-blue-light .sidebar-menu > li:hover > a,
.skin-green-light .sidebar-menu > li.active > a,
.skin-green-light .sidebar-menu > li.menu-open > a,
.skin-green-light .sidebar-menu > li:hover > a,
.skin-purple-light .sidebar-menu > li.active > a,
.skin-purple-light .sidebar-menu > li.menu-open > a,
.skin-purple-light .sidebar-menu > li:hover > a,
.skin-red-light .sidebar-menu > li.active > a,
.skin-red-light .sidebar-menu > li.menu-open > a,
.skin-red-light .sidebar-menu > li:hover > a,
.skin-yellow-light .sidebar-menu > li.active > a,
.skin-yellow-light .sidebar-menu > li.menu-open > a,
.skin-yellow-light .sidebar-menu > li:hover > a {
    background: #63748121 !important;
    color: #637381;
    border-radius: 60px;
    border-left-color: #637381;
    margin-left: 5px;
}

.skin-black-light .sidebar-menu > li > .treeview-menu,
.skin-blue-light .sidebar-menu > li > .treeview-menu,
.skin-green-light .sidebar-menu > li > .treeview-menu,
.skin-purple-light .sidebar-menu > li > .treeview-menu,
.skin-red-light .sidebar-menu > li > .treeview-menu,
.skin-yellow-light .sidebar-menu > li > .treeview-menu {
    background: #f9f9fe !important;
}

.skin-blue-light .sidebar-menu .treeview-menu > li > a {
    color: #637481;
}

.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
    border-bottom: #637481 3px solid;
    color: #637481;
    border-radius: 0px;
    padding: 10px;
}

.btn.btn-flat {
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-width: 1px;
    border-radius: 60px;
}

.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    padding: 0px;
    border-radius: 20px !important;
}

.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
    background-color: #f9f9fe;
}

.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
    color: #637481 !important;
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    background: #2ece89;
    margin: 3px;
    border-radius: 8px;
    color: white;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    background: #2ece89;
    margin: 3px;
    border-radius: 8px;
    color: white;
    padding: 8px;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: red;
    margin: 3px;
    border-radius: 8px;
    color: white;
    padding: 8px;
}

div.dataTables_scrollHead table.table-bordered {
    border-bottom-width: 0;
    background: #12303b;
    border-radius: 10px;
    color: white;
}

.scroll {
    background: #12303b;
    padding: 15px;
    z-index: 1000;
    color: #fff;
}

.scroll .fas {
    color: white;
}

.skin-blue .main-header .logo,
.skin-blue-light .main-header .logo {
    background: #f9f9fe;
    color: #637481;
}

.btn-primary {
    border-radius: 11px;
}

.daterangepicker {
    border-radius: 15px !important;
}

.daterangepicker .ranges li.active {
    border-radius: 10px;
}

button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
    padding: 8px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #12313b17;
}

.btn {
    padding: 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.skin-blue .main-header .logo:hover,
.skin-blue-light .main-header .logo:hover {
    background: #f9f9fe;
}

.text-warning,
.text-yellow {
    color: #12313b !important;
}

.box.box-warning {
    border-top-color: #12313b;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    height: auto;
    padding: 10px;
    text-align: center;
}

.btn-success {
    background-color: #00a65a;
    border-color: #008d4c;
}

.skin-blue-light .main-header .navbar .nav .open > a,
.skin-blue-light .main-header .navbar .nav .open > a:focus,
.skin-blue-light .main-header .navbar .nav .open > a:hover,
.skin-blue-light .main-header .navbar .nav > .active > a,
.skin-blue-light .main-header .navbar .nav > li > a:active,
.skin-blue-light .main-header .navbar .nav > li > a:focus,
.skin-blue-light .main-header .navbar .nav > li > a:hover {
    background: rgba(0, 0, 0, 0);
    color: #000;
}

.treeview-menu a::before {
    content: '';
}

.menu-open2 li {
    list-style-type: none; /* Remueve los bullets de los items */
}

.menu-open2 li a {
    display: block; /* Hace que el enlace ocupe toda la línea */
    color: #000; /* Color del texto */
    padding: 12px 16px; /* Espaciado interno */
    text-decoration: none; /* Remueve el subrayado del texto */
}

.menu-open2 li a:hover {
    background-color: #f1f1f1; /* Color de fondo al pasar el mouse */
}
.info-box-new-style .info-box-icon {
    box-shadow: 0 0 0rem 0 rgba(136, 152, 170, 0.15) !important;
}

.skin-black .main-sidebar,
.skin-blue .main-sidebar,
.skin-green .main-sidebar,
.skin-purple .main-sidebar,
.skin-red .main-sidebar,
.skin-yellow .main-sidebar {
    background: #f5f5fb !important;
    border-right: 0 !important;
}

.skin-blue .main-header .navbar .nav > li > a {
    color: #12313b;
}

.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:focus,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav > .active > a,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav > li > a:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #12313b;
}

.skin-black .sidebar-menu > li.active > a,
.skin-black .sidebar-menu > li.menu-open > a,
.skin-black .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a,
.skin-blue .sidebar-menu > li:hover > a,
.skin-green .sidebar-menu > li.active > a,
.skin-green .sidebar-menu > li.menu-open > a,
.skin-green .sidebar-menu > li:hover > a,
.skin-purple .sidebar-menu > li.active > a,
.skin-purple .sidebar-menu > li.menu-open > a,
.skin-purple .sidebar-menu > li:hover > a,
.skin-red .sidebar-menu > li.active > a,
.skin-red .sidebar-menu > li.menu-open > a,
.skin-red .sidebar-menu > li:hover > a,
.skin-yellow .sidebar-menu > li.active > a,
.skin-yellow .sidebar-menu > li.menu-open > a,
.skin-yellow .sidebar-menu > li:hover > a {
    background: #63748121 !important;
    color: #637381;
    border-radius: 60px;
    border-left-color: #637381;
    margin-left: 5px;
}

.skin-blue .sidebar a {
    color: #637481;
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
    color: #637481;
}

.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
    color: #637481;
}

.skin-black .sidebar-menu > li > .treeview-menu,
.skin-blue .sidebar-menu > li > .treeview-menu,
.skin-green .sidebar-menu > li > .treeview-menu,
.skin-purple .sidebar-menu > li > .treeview-menu,
.skin-red .sidebar-menu > li > .treeview-menu,
.skin-yellow .sidebar-menu > li > .treeview-menu {
    background: #f9f9fe !important;
}

.sidebar-menu li > a > .fa-angle-left,
.sidebar-menu li > a > .pull-right-container > .fa-angle-left {
    width: 10px;
    height: 10px;
}

.skin-blue .main-header .navbar .sidebar-toggle {
    color: #000;
}

.btn {
    display: inline-block !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    border: 1px solid #63748100 !important;
    border-radius: 10px !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 2px 2px 2px rgb(0 0 0 / 42%) !important;
}
.btn:hover,
.btn:focus {
    text-decoration: none!important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)!important;
}

.btn-primary {
    color: #fff!important;
    background-color: #007bff!important;
    border-color: #007bff!important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0056b3!important;
    border-color: #004085!important;
}

.btn-secondary {
    color: #fff!important;
    background-color: #6c757d!important;
    border-color: #6c757d!important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #545b62!important;
    border-color: #4e555b!important;
}

.btn-success {
    color: #fff!important;
    background-color: #28a745!important;
    border-color: #28a745!important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #218838!important;
    border-color: #1e7e34!important;
}

.btn-danger {
    color: #fff!important;
    background-color: #dc3545!important;
    border-color: #dc3545!important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #c82333!important;
    border-color: #bd2130!important;
}

.btn-warning {
    color: #212529!important;
    background-color: #ffc107!important;
    border-color: #ffc107!important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #e0a800!important;
    border-color: #d39e00!important;
}

.btn-info {
    color: #fff!important;
    background-color: #17a2b8!important;
    border-color: #17a2b8!important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #117a8b!important;
    border-color: #10707f!important;
}

.btn-light {
    color: #212529!important;
    background-color: #f8f9fa!important;
    border-color: #f8f9fa!important;
}

.btn-light:hover,
.btn-light:focus {
    background-color: #e2e6ea!important;
    border-color: #dae0e5!important;
}

.btn-dark {
    color: #fff!important;
    background-color: #343a40!important;
    border-color: #343a40!important;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: #23272b!important;
    border-color: #1d2124!important;
}

.table {
    width: 100% !important;
    margin-bottom: 1rem !important;
}

.table th,
.table td {
    padding: 1rem !important;
    vertical-align: top !important;
    border-top: 0px solid #dee2e6 !important;
}

.table thead th {
    vertical-align: bottom !important;
    border-bottom: 2px solid #dee2e6 !important;
}

.table tbody + tbody {
    border-top: 2px solid #dee2e6 !important;
}

.table-sm th,
.table-sm td {
    padding: 0.3rem !important;
}

.table-bordered {
    border: 1px solid #dee2e6 !important;
}

.table-bordered th,
.table-bordered td {
    border-bottom: 1px solid #dee2e6 !important;
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width: 2px !important;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
    border: 0 !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0) !important;
}

.table-hover tbody tr:hover {
    color: #212529 !important;
    background-color: rgba(0, 0, 0, 0.075) !important;
}

.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: #b8daff !important;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
    border-color: #7abaff !important;
}

.table-hover .table-primary:hover {
    background-color: #9fcdff !important;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
    background-color: #9fcdff !important;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
    background-color: #d6d8db !important;
}

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
    border-color: #b3b7bb !important;
}

.table-hover .table-secondary:hover {
    background-color: #c8cbcf !important;
}

.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
    background-color: #c8cbcf !important;
}

.table-success,
.table-success > th,
.table-success > td {
    background-color: #c3e6cb !important;
}

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
    border-color: #8fd19e !important;
}

.table-hover .table-success:hover {
    background-color: #b1dfbb !important;
}

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
    background-color: #b1dfbb !important;
}

.table-info,
.table-info > th,
.table-info > td {
    background-color: #bee5eb !important;
}

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
    border-color: #86cfda !important;
}

.table-hover .table-info:hover {
    background-color: #abdde5 !important;
}

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
    background-color: #abdde5 !important;
}

.table-warning,
.table-warning > th,
.table-warning > td {
    background-color: #ffeeba !important;
}

.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
    border-color: #ffdf7e !important;
}

.table-hover .table-warning:hover {
    background-color: #ffe8a1 !important;
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
    background-color: #ffe8a1 !important;
}

.table-danger,
.table-danger > th,
.table-danger > td {
    background-color: #f5c6cb !important;
}

.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
    border-color: #ed969e !important;
}

.table-hover .table-danger:hover {
    background-color: #f1b0b7 !important;
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
    background-color: #f1b0b7 !important;
}

.table-light,
.table-light > th,
.table-light > td {
    background-color: #fdfdfe !important;
}

.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
    border-color: #fbfcfc !important;
}

.table-hover .table-light:hover {
    background-color: #ececf6 !important;
}

.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
    background-color: #ececf6 !important;
}

.table-dark,
.table-dark > th,
.table-dark > td {
    background-color: #c6c8ca !important;
}

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
    border-color: #95999c !important;
}

.table-hover .table-dark:hover {
    background-color: #b9bbbe !important;
}

.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
    background-color: #b9bbbe !important;
}

.table-active,
.table-active > th,
.table-active > td {
    background-color: rgba(0, 0, 0, 0.075) !important;
}

.table-hover .table-active:hover {
    background-color: rgba(0, 0, 0, 0.075) !important;
}

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
    background-color: rgba(0, 0, 0, 0.075) !important;
}

.table .thead-dark th {
    color: #fff !important;
    background-color: #343a40 !important;
    border-color: #454d55 !important;
}

.table .thead-light th {
    color: #495057 !important;
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
}

.table-dark {
    color: #fff !important;
    background-color: #343a40 !important;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
    border-color: #454d55 !important;
}

.table-dark.table-bordered {
    border: 0 !important;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.table-dark.table-hover tbody tr:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.075) !important;
}

@media (max-width: 575.98px) {
    .table-responsive-sm {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .table-responsive-sm > .table-bordered {
        border: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .table-responsive-md {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .table-responsive-md > .table-bordered {
        border: 0 !important;
    }
}

@media (max-width: 991.98px) {
    .table-responsive-lg {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .table-responsive-lg > .table-bordered {
        border: 0 !important;
    }
}

@media (max-width: 1199.98px) {
    .table-responsive-xl {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .table-responsive-xl > .table-bordered {
        border: 0 !important;
    }
}

.table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.table-responsive > .table-bordered {
    border: 0 !important;
}

.table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.table-responsive > .table-bordered {
    border: 0 !important;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border: 0px solid #f4f4f4;
}


.info-box-number {
    color: white !important;
}