@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/CourierB.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);
}



/*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;
}

.btn {
    border-radius: 2px;
}

.btn-success {
    border: 1px solid var(--color9);
    background-color: var(--color9);
}

.input-group .btn, .input-group span {
    border: 1px solid white !important;
}
.btn-group .btn-sb, .input-group .btn-sb {
    margin-top: 0px;
}

.input-group .input-group-text {
    background-color: var(--color12);
    color: ghostwhite;
}

.btn-group {
    border-radius: 2px;
}

.btn-group .btn {
    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 {
    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-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;
}
.table td .btn {
    margin-top: -6px;
    margin-bottom: 2px;
}

    .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;
}

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);
}



input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], input[type=email], textarea, select {
    background-color: var(--color6) !important;
    border: 1px solid var(--color6) !important;
    color: #545657 !important;
}

    input[type=text]:disabled, input[type=password]:disabled, input[type=email]:disabled, input[type=number]:disabled, input[type=date]:disabled, input[type=time]:disabled, textarea:disabled, select:disabled {
        background-color: var(--color3) !important;
        border: 1px solid rgba(255,255,255,0.7) !important;
        color: rgba(255,255,255,0.7) !important;
    }









.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;
}

.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: -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: -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;
        }
    }