@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'console';
    src: url(../../fonts/console.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'courier';
    src: url(../../fonts/Courier.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'courier';
    src: url(../../fonts/CourierBold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}

/*BODY*/
body {
    background-color: var(--color1) !important;
}

#container-sb {
    margin-top: -70px;
}

hr {
    border-top: 1px solid var(--color3);
}

h1, h2, h3, h4, h5 {
    color: var(--color6);
}

.view-description {
    color: rgba(245, 245, 245, .82);
    font-size: 1.05rem;
    line-height: 1.45;
    margin: -4px 0 24px 0;
    max-width: 1180px;
}

.view-description p {
    margin: 0;
}

@media (max-width: 768px) {
    .view-description {
        font-size: .95rem;
        margin-bottom: 18px;
    }
}



/*INPUTS*/

a {
    text-decoration: none;
}

select {
    height:38px;
    background-image: url(/images/icons/dropdownIcon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: right;
    padding-right: 10px;
}

:root {
    --aureo-control-radius: .25rem;
    --aureo-control-height: 40px;
}

.btn-success {
    border: 1px solid var(--color9);
    background-color: var(--color9);
}

.input-group {
    align-items: stretch;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
    border: 1px solid rgba(255, 255, 255, .85) !important;
    min-height: var(--aureo-control-height);
}

.btn-group .btn-sb,
.input-group .btn-sb {
    margin-top: 0;
}

.input-group .input-group-text {
    background-color: var(--color12);
    color: ghostwhite;
}

.btn-group {
    border-radius: 2px;
}

.btn-group > .btn {
    border-color: rgba(255, 255, 255, .85) !important;
    border-radius: 2px;
}

.btn-sec {
    border: 1px solid var(--color10);
    background-color: var(--color10);
    color: var(--color2);
}

.btn-ter {
    border: 1px solid var(--color11);
    background-color: var(--color11);
    color: var(--color2);
}


.btn-sb {
    --bs-btn-color: var(--color2);
    --bs-btn-bg: var(--color7);
    --bs-btn-border-color: var(--color7);
    --bs-btn-hover-color: var(--color2);
    --bs-btn-hover-bg: var(--color7);
    --bs-btn-hover-border-color: var(--color7);
    --bs-btn-focus-shadow-rgb: 0, 101, 169;
    --bs-btn-active-color: var(--color2);
    --bs-btn-active-bg: var(--color7);
    --bs-btn-active-border-color: var(--color7);
    --bs-btn-disabled-color: gray;
    --bs-btn-disabled-bg: var(--color7);
    --bs-btn-disabled-border-color: var(--color7);
    border: 1px solid var(--color7);
    background-color: var(--color7);
    color: var(--color2);
}
.btn-sm {
    height: 28px;
    padding-top: 2px !important;
}
.btn .icon {
    margin-top: -4px;
}

.btn-sb:hover {
    opacity: 0.9;
    color: var(--color2);
    background-color: var(--color7);
}

.btn-sb:active,
.btn-sb.active,
.btn-sb.show,
.btn-sb:first-child:active,
:not(.btn-check) + .btn-sb:active {
    color: var(--color2);
    background-color: var(--color7);
    border-color: var(--color7);
    opacity: 0.95;
}

.btn-outline-sb {
    background-color: var(--color1);
    border: 0px;
    color: var(--color2);
    font-weight: 700;
}

    .btn-outline-sb:hover {
        background-color: #111214;
        color: var(--color2);
    }
.btn-sb:disabled, .btn-sec:disabled, .btn-ter:disabled {
    opacity: 0.6;
    pointer-events: none;
    color: gray;
}
/*NAVBAR*/
#nvmenu::-webkit-scrollbar {
    display: none;
}
#NavMenu {
    background-color: var(--color5) !important;
    border-bottom: 1px solid var(--color3);
}
nav svg path {
    fill: currentcolor;
    color: var(--color2);
}
#UserConfig .nav-item{
    display:flex;
}
    #UserConfig .nav-item p {
        margin-right: 10px;
        text-align: right;
        line-height: 19px;
        margin-top: 10px;
    }
    #UserConfig .nav-item p strong {
        font-size:20px;
    }

button .icon, a .icon {
    width: 26px;
}

.alert-sb {
    background-color: var(--color2);
}

.console {
    font-family: 'console';
}

#alertMessageText{
    color:dimgray;
}
a {
    color: lightskyblue;
}
body {
    font-family: Montserrat;
    font-weight: 300;
}
.hidden{
    display:none;
}
.money {
    text-align: right;
}

.form-control {
    font-family: Montserrat;
    font-weight: 400;
    border-radius: .05rem;
}

caption {
    margin-left: 20px;
    font-weight: bold;
}

.comment {
    color: darkgray;
    font-size: 13px;
    margin-left: 14px;
}

table {
    margin-top: 20px;
}

.table td {
    padding-top: 8px;
    padding-bottom: 3px;
}
.sb_td_btn {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-right: 3px !important;
    text-align: right;
}

    .SB_View div {
        margin-left: 15px;
        margin-right: 15px;
        padding-top: 1px;
        margin-bottom: -2px;
    }

    .SB_View i {
        font-size: 26px;
        color: #343a40;
    }

.SB_new div {
    background-color: seagreen;
    border-radius: 15px;
    height: 25px;
    width: 25px;
    margin-left: 5px;
    margin-right: 10px;
    margin-top: -30px;
}

.SB_new i {
    color: #FFF;
    font-size: 26px;
}

#bt_SBRefresh {
    border-left: 1px solid dimgray;
}

.table thead th {
    font-family: 'Montserrat';
    font-weight: 600;
    padding-bottom: 8px;
    padding-top: 8px;
    font-size: 16px;
    color: rgba(255,255,255,.9);
}

#SB_help {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 36px;
    margin-right: 25px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.8);
    font-weight: 500 !important;
}

/* Paginator ------------------------------------------- */
#paginator .page-item.active .page-link {
    background-color: #343a40;
    border-color: #343a40;
}

#paginator .page-link, #paginator .page-link:hover {
    color: #343a40;
}

#paginator .pag_elements {
    text-align: center;
    color: gray;
    margin-top: -10px;
    font-size: 12px;
}

#paginator .active a {
    color: white !important;
}
/* ----------------------------------------------------- */
.p12{
    padding-left:10px;
    padding-right:10px;
}
label {
    margin-bottom: .1rem;
}

.titulo {
    font-size: 20px;
    color: #1d1d1b;
    text-transform: uppercase;
}

.white {
    color: white;
}

.red {
    color: red;
}

.tituloDiv {
    padding-top: 25px;
    padding-left: 25px;
}

.btn-container {
    float: right;
}

.BarraBaja {
    margin-bottom: 15px;
}

.fix {
    padding-left: 0px;
    padding-right: 0px;
}

.divFooter {
    margin-top: 50px;
    text-align: center;
}

.aguacate {
    width: 100px;
}

.textFooter {
    color: dimgray;
    text-transform: uppercase;
    font-size: 11px;
}

.iconNav {
    width: 100px;
    max-height: 100px;
}

.closePreview {
    position: absolute;
    top: 20px;
    right: 20px;
}

.pass {
    background-color: lightyellow;
}

.modal-content {
    border-radius: 0rem;
}

.modal-header {
    background-color: #343a40;
    border-radius: 0;
    color: white;
    height: 40px;
    padding: 0.3rem 1rem;
}

.close {
    color: #fff;
}

h4, .SB_title {
    font-size: 1.3rem;
    font-family: 'Montserrat';
    color: darkslategrey;
}
.user-img img {
    width: 60px;
    border-radius: 50%;
    border: 2px solid whitesmoke;
}
.user-img strong {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 80px;
    margin-right: 20px;
    color: #2b2b2c;
    margin-top: -25px;
    z-index: -1;
}
/*-------------------------------------------------------*/
.simple-switch-outter {
    width: 40px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #dfdfdf;
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    border-radius: 20px;
    box-sizing: content-box;
    background-clip: content-box;
}

    .simple-switch-outter .simple-switch {
        display: none;
    }

    .simple-switch-outter .simple-switch-circle {
        background: #fff;
        border-radius: 100%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        height: 20px;
        position: absolute;
        top: 0;
        width: 20px;
    }

    .simple-switch-outter.unchecked {
        box-shadow: red 0px 0px 0px 0px inset;
        border-color: #dfdfdf;
        transition: border 0.4s, box-shadow 0.4s;
        background-color: red;
    }

        .simple-switch-outter.unchecked .simple-switch-circle {
            left: 0px;
            transition: background-color 0.4s, left 0.2s;
        }

    .simple-switch-outter.checked {
        border-color: #343a40;
        box-shadow: green 0px 0px 0px 16px inset;
        transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
        background-color: green;
    }

        .simple-switch-outter.checked .simple-switch-circle {
            left: 20px;
            transition: background-color 0.4s, left 0.2s;
            background-color: #ffffff;
        }

.right {
    text-align: right;
}
.table-btn {
    width: 100%;
    text-align: right;
}


.bg-dark {
    background-color: #242526 !important;
    border-bottom: 1px solid #3a3b3c;
}



.db_value {
    border: none !important;
    color: var(--color2) !important;
    background-color: #303031 !important;
}

h4, #salir, label, .table-btn a i, p {
    color: var(--color2) !important;
}

.textFooter, small, #SB_help {
    color: ghostwhite;
}

table {
    margin-bottom: 0rem;
    border-spacing: 0px;
}

.card > .table-responsive {
    margin-top: 0;
}

.card > .table-responsive > table {
    margin-top: 0;
}

table thead tr th {
    background-color: var(--color12) !important;
    color: var(--color2) !important;
}

.table-hover .table-sb:hover {
    background-color: #555b62 !important;
}

table tbody tr {
    background-color: var(--color1);
    color: var(--color2);
}

table td, table th {
    border: 0px solid black !important;
}

table tr td {
    border-top: 1px solid #3a3b3c !important;
}

table .sb-active {
    background-color: cadetblue;
    color: ghostwhite;
    font-weight: bold;
}

.table-warning td {
    color: var(--color1) !important;
    font-weight: 700;
}

.table-hover tbody tr:hover {
    background-color: #464646;
    color: var(--color2);
}



.form-control,
.form-select,
input:not([type]),
input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
input[type=email],
input[type=search],
input[type=tel],
input[type=url],
input[type=file],
textarea,
select {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: var(--aureo-control-radius) !important;
    color: #212529 !important;
    color-scheme: light;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
    min-height: var(--aureo-control-height);
}

.input-group > .input-group-text,
.input-group > .btn {
    display: flex;
    align-items: center;
}

    .form-control:focus,
    .form-select:focus,
    input:not([type]):focus,
    input[type=text]:focus,
    input[type=password]:focus,
    input[type=number]:focus,
    input[type=date]:focus,
    input[type=time]:focus,
    input[type=email]:focus,
    input[type=search]:focus,
    input[type=tel]:focus,
    input[type=url]:focus,
    textarea:focus,
    select:focus {
        background-color: #fff !important;
        color: #212529 !important;
    }

    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: #6c757d !important;
        opacity: 1;
    }

    .form-control:disabled,
    .form-control[readonly],
    .form-select:disabled,
    input:not([type]):disabled,
    input[type=text]:disabled,
    input[type=password]:disabled,
    input[type=email]:disabled,
    input[type=number]:disabled,
    input[type=date]:disabled,
    input[type=time]:disabled,
    input[type=search]:disabled,
    input[type=tel]:disabled,
    input[type=url]:disabled,
    textarea:disabled,
    select:disabled {
        background-color: #f8f9fa !important;
        border: 1px solid #ced4da !important;
        color: #6c757d !important;
        opacity: 1;
    }









.nav-icon {
    color: var(--color2) !important;
    font-size: 28px;
}

#navbarSupportedContent ul li .nav-link.dropdown-toggle {
    color: var(--color2);
}

.dropdown-menu.show {
    background-color: #242526 !important;
    border: 1px solid #464646;
}

    .dropdown-menu.show a {
        color: var(--color2) !important;
    }

        .dropdown-menu.show a:hover {
            background-color: #464646;
            color: var(--color2);
        }

.dropdown-divider {
    border-top: 1px solid #3a3b3c;
}

#salir:hover {
    color: darkred;
}

.modal-body {
    background: var(--color5);
}


.modal-header {
    background-color: #303031;
    color: var(--color2);
    border-bottom: 1px solid #3a3b3c;
}

.modal-dialog {
    margin-top: 130px;
}

.form-switch .form-check-input.aureo-interactive-switch:not(:disabled) {
    cursor: pointer;
    opacity: 1;
}

.form-switch .form-check-input.aureo-interactive-switch:not(:checked):not(:disabled) {
    background-color: rgba(var(--bs-primary-rgb), .12);
    border-color: rgba(var(--bs-primary-rgb), .68);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .08);
}

.form-check:has(.aureo-interactive-switch:not(:disabled)) .form-check-label {
    cursor: pointer;
    opacity: 1;
}

.sb-alert btn-sb {
    border: 1px solid var(--color1) !important;
}

#DivSearchProducts .productsContainer {
    background-color: var(--color1) !important;
    border: 1px solid #3a3b3c !important;
}

.sb_alert p, .sb_alert h4, .table-success td {
    color: var(--color1) !important;
}

.icon_cobrar {
    color: var(--color1);
}
#hamburger {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
    padding: 8px 18px 0px 0px;
}
    #hamburger a {
        color: white;
        text-decoration: none;
        cursor: pointer;
        font-size: 32px;
    }
#nvmenu {
    transition: left 0.3s ease;
}
    /*-------------------------------------------------------*/
    @media (max-width: 575.98px) {
        #nvmenu {
            border-right: 2px solid var(--color1);
        }
        .dash-navbar-left.nb-visible {
            left: calc(-1 * var(--aureo-navbar-width, 250px));
        }
        .alertContainter {
            width: 300px;
        }
        body {
            
        }
        #hamburger {
            display: inline;
        }
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        #nvmenu {
            border-right: 2px solid var(--color1);
        }
        .dash-navbar-left.nb-visible {
            left: calc(-1 * var(--aureo-navbar-width, 250px));
        }
        .alertContainter {
            width: 330px;
        }
        body {
            
        }
        #hamburger {
            display: inline;
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .dash-navbar-left.nb-visible {
            left: 0px;
        }
        .alertContainter {
            width: 380px;
        }
        body {
            
        }
        .btn {
            padding: 4px 12px 4px 12px
        }

        .select {
            height: 32px;
            padding-top: 3px;
        }
        .btn svg {
            height:14px;
            width:14px;
        }
        table {
            font-size: 13px;
        }
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        .dash-navbar-left.nb-visible {
            left: 0px;
        }
        .alertContainter {
            width: 420px;
        }
        #container-sb {
            padding-left: 30px;
            padding-right: 30px;
        }
        body {
            
        }
        .btn {
            padding: 4px 12px 4px 12px
        }
        .select {
            height: 32px;
            padding-top: 3px;
        }
        .btn svg {
            height: 14px;
            width: 14px;
        }
        table {
            font-size: 13px;
        }

    }

    @media (min-width: 1200px) {
        .dash-navbar-left.nb-visible {
            left: 0px;
        }
        .alertContainter {
            width: 450px;
        }
        #container-sb {
            padding-left: 40px;
            padding-right: 40px;
        }
        .btn {
            padding: 6px 16px 6px 16px;
        }
    }

.select2-container--default .select2-selection--single {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: var(--aureo-control-radius) !important;
    height: 40px;
    color: #212529 !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #212529 !important;
        padding-top: 6px;
    }

.select2-container--default .select2-selection--multiple {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: var(--aureo-control-radius) !important;
    color: #212529 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
    background-color: #fff;
    border-radius: var(--aureo-control-radius);
    color: #212529;
}

.select2-results__option {
    color: black;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-left: -10px;
    margin-top: 4px;
}

/* Pending invoices: keep backorder rows readable in the light theme. */
body.theme-light .pending-backorder-row,
body.theme-light .pending-backorder-row > th,
body.theme-light .pending-backorder-row > td,
.theme-light .pending-backorder-row,
.theme-light .pending-backorder-row > th,
.theme-light .pending-backorder-row > td {
    --bs-table-bg: #fff6d8;
    --bs-table-color: #202428;
    background-color: #fff6d8 !important;
    color: #202428 !important;
}

body.theme-light .pending-backorder-row .text-muted,
.theme-light .pending-backorder-row .text-muted {
    color: #4f5963 !important;
}

body.theme-light .pending-backorder-row .btn-success,
.theme-light .pending-backorder-row .btn-success {
    color: #fff !important;
}
