html {
    scroll-behavior: smooth;
}

.form-control.text-area {
    height: 30rem !important
}

.form-control.custom-textarea {
    resize: none;
    overflow: hidden scroll;
    overflow-wrap: break-word;
    width: 100%;
    height: auto;
    max-height: 180px;
}

.label-importe {
    margin-top: 4px;
    font-weight: bold;
    font-size: 17px;
}

.div-hidden {
    visibility: hidden;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
}

.texto-lila {
    color: #2E86C1;
}

.texto-opcional {
    color: gray !important;
    font-size: 10.5px !important;
}


/*Color que se usa en las referencias para las tablas*/
.text-orange {
    color: #ff851b;
}

.form-control {
    display: block;
    width: 100%;
    height: 30px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.mb {
    margin-bottom: .5rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-2 {
    margin-bottom: 2rem;
}

.contenedor-etiquetas {
    margin: .5rem 0;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.alert.custom-alert {
    position: fixed;
    margin: 0;
    bottom: 3.3rem;
    z-index: 10;
    width: 400px;
    max-width: 75vw;
    box-shadow: 0 2px 5px #ccc;
    transition: transform .15s cubic-bezier(.95,.1,.59,.6);
}
    .alert.custom-alert.ocultar {
        display: block !important;
        transform: translateY(calc(3.3rem + 100%));
    }

/* ==========================================================================
Clases para los SWEET ALERT
========================================================================== */
/* Botones */
.botonVerdeSweetAlert {
    background-color: #378A60;
    border-color: #0B7541;
}

    .botonVerdeSweetAlert:active {
        background-color: #378A60 !important;
        border-color: #0B7541 !important;
    }

    .botonVerdeSweetAlert:hover {
        background-color: #378A60 !important;
        border-color: #0B7541 !important;
        box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(55 138 96 / 29%);
    }

    .botonVerdeSweetAlert:focus {
        box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(55 138 96 / 29%);
    }


.swal-footer {
    background-color: rgb(245, 248, 250);
    margin-top: 32px;
    border-top: 1px solid #E9EEF1;
    overflow: hidden;
}

.botonRojoSweetAlert {
    background-color: #E64942 !important;
    border-color: #C0392B;
    color: #fff !important;
}

    .botonRojoSweetAlert:active {
        background-color: #E64942 !important;
        border-color: #C0392B !important;
        color: #fff;
    }

    .botonRojoSweetAlert:hover {
        background-color: #C70039 !important;
        border-color: #C0392B !important;
        /*box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(55 138 96 / 29%);*/
    }

 /*   .botonRojoSweetAlert:focus {
        box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(242 215 213 / 29%);
    }*/


/* ==========================================================================
Para la IMAGEN del Producto al eliminar
========================================================================== */
.imagenProductoEliminar {
    width: 95%;
    /*height: 30%;*/
}

.margenTablaEliminarProd {
    margin: 10px;
}


/* ==========================================================================
Fondo LILA para la tabla de Ajuste de STOCK
========================================================================== */
.fondoLila {
    background-color: rgba(87,22,125, 0.08);
}



/* ==========================================================================
Para la IMAGEN del Producto al eliminar
========================================================================== */
.circuloColor {
    width: 40px;
    height: 40px;
    border-radius: 40px;
}


/* ==========================================================================
Para los BOTONES DENTRO DE LAS TABLAS
========================================================================== */
.btn-tabla {
    cursor: pointer;
    margin: 0;
    border: 0;
    display: inline-flex;
    position: relative;
    user-select: none;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-tabla {
    color: rgba(0, 0, 0, 0.54);
    font-size: 1.6rem;
    text-align: center;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0px 0px;
}

    .btn-tabla:hover,
    .btn-tabla:focus,
    .btn-tabla:active,
    .btn-tabla.active,
    .open .dropdown-toggle.btn-tabla {
        background-color: rgba(0,0,0, 0.08);
        color: rgba(0, 0, 0, 0.54);
    }

.btn-tablaFlechas {
    color: rgba(87,22,125, 0.7);
    font-size: 1.5rem;
}

/* ==========================================================================
Para los BOTONES OVALADOS del Sistema.
========================================================================== */
/*.btn-ovalo {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    background-color: transparent;
    border: 2px solid #57167d;
    border-radius: 30px;
    color: #57167d;
    padding: 5px 18px 4px 18px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}*/

  /*  .btn-ovalo:hover,
    .btn-ovalo:focus,
    .btn-ovalo:active,
    .btn-ovalo.active,
    .open .dropdown-toggle.btn-ovalo {
        background-color: rgba(87,22,125, 0.08);
        color: #57167d;
        border-color: #57167d;
    }*/

.btn-ovalo {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    background-color: transparent;
    border: 2px solid #166EBB;
    border-radius: 30px;
    color: #166EBB;
    padding: 5px 18px 4px 18px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

    .btn-ovalo:hover,
    .btn-ovalo:focus,
    .btn-ovalo:active,
    .btn-ovalo.active,
    .open .dropdown-toggle.btn-ovalo {
        background-color: rgba(87,22,125, 0.08);
        color: #166EBB;
        border-color: #166EBB;
    }
    /* ==========================================================================
Para los BOTONES OVALADOS del Sistema.
========================================================================== */
.btn-ovaloNuevo {
    color: black;
    cursor: pointer;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 100px;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: rgba(142,142,142, 0.55) 0px 2px 10px;
    background-color: white;
    transition: all .25s;
}

    .btn-ovaloNuevo.conectado:hover,
    .btn-ovaloNuevo.conectado:focus,
    .btn-ovaloNuevo.conectado:active,
    .btn-ovaloNuevo.conectado.active,
    .open .dropdown-toggle.btn-ovaloNuevo {
        background-color: rgba(0,128,0, 0.025);
        color: #57167d;
    }

    .btn-ovaloNuevo.conectar:hover,
    .btn-ovaloNuevo.conectar:focus,
    .btn-ovaloNuevo.conectar:active,
    .btn-ovaloNuevo.conectar.active,
    .open .dropdown-toggle.btn-ovaloNuevo {
        background-color: rgba(0,0,255, 0.015);
        color: #57167d;
    }

    .btn-ovaloNuevo i.fa-check {
        font-size: 18px;
        padding: 10px;
        background-color: rgba(0,128,0, 0.2);
        color: green;
        border-radius: 100px;
        margin-left: 12px;
    }

    .btn-ovaloNuevo i.fa-refresh {
        font-size: 18px;
        padding: 10px;
        background-color: rgba(0,0,255, 0.15);
        color: blue;
        border-radius: 100px;
        margin-left: 12px;
    }

.imgTiendaNube {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 100px;
    margin-right: 12px;
}

.imgTiendaNubeIndexProducto {
    width: 27px;
    height: 17px;
    object-fit: contain;
}

.imgPediloOnline {
    width: 65px;
    height: 50px;
    object-fit: contain;
    border-radius: 100px;
    margin-right: 12px;
}

.imgPediloOnlineIndexProducto {
    width: 35px;
    height: 20px;
    object-fit: contain;
}

.imgMercadoLibre {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 100px;
    margin-right: 12px;
}


/* ==========================================================================
Para los INDEX dejamos un margen inferior al final por el boton flotante.
========================================================================== */
.margenInfIndex {
    margin-bottom: 200px;
}


/* ==========================================================================
Para los CHECK y el LABEL de cada CHECK.
========================================================================== */
.check {
    float: left;
    margin-right: 5px;
    margin-top: 7px;
}

.divCheck {
    margin-top: 27px;
}


/* ==========================================================================
Propiedades de los Buscadores y los combos
========================================================================== */
.buscador {
    font-size: 16px;
    width: 100%;
    max-width: 340px;
    font-weight: bold;
    color: #216978;
    margin-top: 5px;
    margin-bottom: 5px;
    float: left;
    margin-right: 10px;
}

.combos {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    max-width: 340px;
    margin-right: 10px;
}


/* ==========================================================================
Definimos el alto de las filas quew no tienen botones de eliminar o consultar.
========================================================================== */
.altoBotonesTabla {
    height: 35px;
}

/* ==========================================================================
Definimos que las culumnas que se puedan ordenar tengan el cursor pointer.
========================================================================== */
#columna1, #columna2, #columna3, #columna4, #columna5, #columna6, #columna7, #columna8, #columna9, #columna10 {
    cursor: pointer;
}


/* ==========================================================================
Propiedades de los Buscadores y los combos
========================================================================== */
.paddingEncabezadosTablas > thead > tr > th {
    padding: 5px 5px !important;
}


/* ==========================================================================
Clase para mostrar u Ocultar el simbolo de Carga
========================================================================== */
.ocultar {
    display: none !important;
}

.ocultarCarga {
    display: none;
}


/* ==========================================================================
para acomodar los botones de agregar producto al lado del Buscar Rápido.
========================================================================== */
@media (max-width: 991px) {
    .margen-agregar-producto {
        margin-top: 15px;
    }
}

/* ==========================================================================
para acomodar los combos al lado del Buscar.
========================================================================== */
@media (min-width: 991px) {
    .ubicacion-tipopersona {
        float: left;
    }
}


/* ==========================================================================
Quitamos el Margen de los col.
========================================================================== */
.quitarMargenColPersona {
    padding: 0px;
}

@media (max-width:991px) {
    .quitarMargenColUsuarios {
        padding: 0px;
    }
}


/* ==========================================================================
Botones flotantes
========================================================================== */
.btnPosicion1 {
    width: 50px;
    height: 50px;
    padding: 11px;
    border-radius: 50%;
    position: fixed;
    overflow: hidden;
    text-align: center;
    bottom: 15px;
    right: 15px;
    font-size: 2rem;
    z-index: 1;
    box-shadow: 0px 0px 6px 5px #fff;
    border: 0px;
    justify-content: center;
    color: #ffffff;
    background-color: #3350b9;
    background: linear-gradient(150deg, #026FA2, #03A9F4);
}

    .btnPosicion1:hover,
    .btnPosicion1:focus,
    .btnPosicion1:active,
    .btnPosicion1.active,
    .open .dropdown-toggle.btnPosicion1 {
        color: #ffffff;
        background-color: #3350b9;
        opacity: 0.9;
        border: none;
    }

.btnPosicion2 {
    cursor: pointer;
    width: 50px;
    height: 50px;
    padding: 11px;
    border-radius: 50%;
    position: fixed;
    overflow: hidden;
    text-align: center;
    bottom: 80px;
    right: 15px;
    font-size: 2rem;
    z-index: 1;
    box-shadow: 0px 0px 6px 5px #fff;
    border: 0px;
    justify-content: center;
    color: #ffffff;
    background-color: #3350b9;
    background: linear-gradient(150deg, #026FA2, #03A9F4);
}

    .btnPosicion2:hover,
    .btnPosicion2:focus,
    .btnPosicion2:active,
    .btnPosicion2.active,
    .open .dropdown-toggle.btnPosicion2 {
        color: #ffffff;
        background-color: #3350b9;
        opacity: 0.9;
        border: none;
    }

/*.btnPosicion3 {
    cursor: pointer;
    width: 50px;
    height: 50px;
    padding: 11px;
    border-radius: 50%;
    position: fixed;
    overflow: hidden;
    text-align: center;
    bottom: 145px;
    right: 15px;
    font-size: 2rem;
    z-index: 1;
    box-shadow: 0px 0px 6px 5px #fff;
    border: 0px;
    justify-content: center;
    color: #ffffff;
    background-color: #3350b9;
    background: linear-gradient(150deg, #57167d, #b135cf);
}

    .btnPosicion3:hover,
    .btnPosicion3:focus,
    .btnPosicion3:active,
    .btnPosicion3.active,
    .open .dropdown-toggle.btnPosicion3 {
        color: #ffffff;
        background-color: #3350b9;
        opacity: 0.9;
        border: none;
    }*/

.btnPosicion3 {
    cursor: pointer;
    width: 50px;
    height: 50px;
    padding: 11px;
    border-radius: 50%;
    position: fixed;
    overflow: hidden;
    text-align: center;
    bottom: 145px;
    right: 15px;
    font-size: 2rem;
    z-index: 1;
    box-shadow: 0px 0px 6px 5px #fff;
    border: 0px;
    justify-content: center;
    color: #ffffff;
    background-color: #3350b9;
    background: linear-gradient(150deg, #026FA2, #03A9F4);
}

    .btnPosicion3:hover,
    .btnPosicion3:focus,
    .btnPosicion3:active,
    .btnPosicion3.active,
    .open .dropdown-toggle.btnPosicion3 {
        color: #ffffff;
        background-color: #3350b9;
        opacity: 0.9;
        border: none;
    }

/* ==========================================================================
Boton de Loguin
========================================================================== */
.btn-success {
    /*background-color: #00a65a;
  border-color: #008d4c;*/
    color: #fff;
    background-color: #0B7541;
    border-color: #0B7541;
}

    .btn-success:hover,
    .btn-success.hover,
    .btn-success:active,
    .btn-success.active,
    .btn-success:focus,
    .btn-success.focus {
        color: #fff;
        background-color: #378A60;
        border-color: #0B7541;
    }

.olvidoContraseña {
    color: #0B7541;
}

    .olvidoContraseña:hover,
    .olvidoContraseña:active,
    .olvidoContraseña:focus {
        color: #0B7541;
    }


/* ==========================================================================
Cambiamos el espaciado entre elementos en un formulario para que cuando se achique queden con el mismo espacio
========================================================================== */
@media (max-width: 992px) {
    .espacioCol {
        margin-top: 10px;
    }
}

.espaciadoEnForm {
    margin-bottom: 10px;
}

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
    padding-top: 7px;
    margin-top: 0;
    margin-bottom: 0;
}

.labelSaldoPersona {
    padding-top: 0px !important;
}

.panel-bodySaldoPersona {
    padding: 12px 15px !important;
}


/* ==========================================================================
Clase para los input con borde verde o rojo para saber si el dato ingresado es válido o no
========================================================================== */
.custom-select.is-valid, .form-control.is-valid, .was-validated .custom-select:valid, .was-validated .form-control:valid {
    border-color: #28a745;
}

.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid {
    border-color: #dc3545;
}

/* ==========================================================================
Clase para las lineas laterales de los input del modal de talles por color
========================================================================== */
.lineasLateralesInput {
    border-left: 0.5px solid #ccc;
    border-right: 0.5px solid #ccc;
    padding-left: 15px;
    padding-right: 15px
}


/* ==========================================================================
Cambiamos el color de las Pestañas.
========================================================================== */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    /*color: #57167d; ANTERIOR*/
    color: #841ebf;
    cursor: default;
    font-weight: bold;
    border: 1px solid #57167d;
    border-bottom-color: transparent;
}


/* ==========================================================================
Cambiamos las propiedades de las TABLAS.
========================================================================== */
.tdBotones {
    width: 0.3%;
    padding: 1px 1px 1px 1px !important;
}

table {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
}

    table caption {
        font-size: 1.5em;
        margin: .5em 0 .75em;
    }

    table th.asc::after,
    table th.desc::after {
        content: "\f077";
        /*font: normal normal normal 14px/1 FontAwesome;*/
        font-family: FontAwesome;
        font-weight: normal;
        font-size: 10px;
        text-rendering: auto;
        margin-left: 7px;
        color: #959595;
    }

    table th.desc::after {
        content: "\f078";
    }

    table tr {
        background: #fff;
        border: 1px solid #ddd;
        /*padding: .35em;*/
    }

        table tr.fade {
            opacity: 0;
            transition: all 500ms ease-in-out;
        }

        table tr.tr-seleccionada {
            outline: 1px dashed #49a844;
            outline-offset: -4px;
            background-color: rgb(73 168 68 / 6%);
        }
        table tr.tr-seleccionada:hover {
            outline-style: solid;
        }

    table th,
    table td {
        padding: .625em;
        border: 1px solid #ececec;
    }

    table td[onclick] {
        cursor: pointer;
    }

        table td > a.text-bold:not(.btn-tabla),
        table td > a.detalletituloindex:not(.btn-tabla) {
            position: relative;

        }
        table td > a.text-bold:not(.btn-tabla)::after,
        table td > a.detalletituloindex:not(.btn-tabla)::after {
            content: '\f002';
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            font-size: 1.35rem;
            opacity: 0;
            transition: all .25s ease-in-out;
            position: absolute;
            transform: translateX(-3px);
        }
        table td > a.text-bold:hover::after,
        table td > a.detalletituloindex:hover::after {
            opacity: 1;
            transform: translateX(5px);
        }
        /* ==========================================================================
Clase para mostrar los contactos de una Persona.
========================================================================== */
        .contactosPersonas {
            padding: 6px !important;
            padding-left: 34px !important;
            font-size: 12px;
        }


/* ==========================================================================
Clase para eliminar COLUMNAS de las TABLAS.
========================================================================== */
@media (max-width: 1100px) {
    .descarto1100 {
        display: none;
    }
}

@media (max-width: 990px) {
    .descarto {
        display: none;
    }
}
@media (max-width: 800px) {

    .panelBcoFondo {
        min-height: 86vh;
    }
}
@media (max-width: 766px) {

    .panelBcoFondo {
        height: 150vh !important;
    }
}

@media (min-width: 551px) {
    .mostrar550 {
        display: none;
    }
    .panelTabla{
        padding: 15px!important;
    }
}

@media (max-width: 550px) {
    .descarto550 {
        display: none;
    }

    .col-12 {
        width: 100% !important
    }

    .contenedor-etiquetas {
        justify-content: flex-start;
    }

    .panelTabla {
        padding: 15px !important;
    }
    .panelBcoFondo {
        height: 150vh!important;
    }
}


/* ==========================================================================
preloader section
========================================================================== */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.sk-spinner-circle.sk-spinner {
    width: 150px;
    height: 150px;
    position: relative;
}

.sk-spinner-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

    /*.sk-spinner-circle .sk-circle:before {
        content: '';
        display: block;
        margin: 0 auto;
        width: 20%;
        height: 20%;
        background-color: #3350b9;*/ /*azul oscuro: #2668ba, azul claro: #3c8dbc, lila:#605ca8;*/
        /*background: linear-gradient(150deg, #57167d, #b135cf);
        border-radius: 100%;
        -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
        animation: sk-circleBounceDelay 1.2s infinite ease-in-out;*/
        /* Prevent first frame from flickering when animation starts */
        /*-webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }*/

    .sk-spinner-circle .sk-circle:before {
        content: '';
        display: block;
        margin: 0 auto;
        width: 20%;
        height: 20%;
        background-color: #3350b9; /*azul oscuro: #2668ba, azul claro: #3c8dbc, lila:#605ca8;*/
        background: linear-gradient(150deg, #2668ba, #3c8dbc);
        border-radius: 100%;
        -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
        animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
        /* Prevent first frame from flickering when animation starts */
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

.sk-spinner-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.sk-spinner-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

.sk-spinner-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sk-spinner-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}

.sk-spinner-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
}

.sk-spinner-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.sk-spinner-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
}

.sk-spinner-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
}

.sk-spinner-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.sk-spinner-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
}

.sk-spinner-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg);
}

.sk-spinner-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.sk-spinner-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.sk-spinner-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.sk-spinner-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.sk-spinner-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.sk-spinner-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.sk-spinner-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.sk-spinner-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.sk-spinner-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.sk-spinner-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.sk-spinner-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}


/* ==========================================================================
Clase para bajar el texto del titulo en la Vista LayoutMenuSimple porque al achicarse la pantalla se hace doble el menú y se superpone.
========================================================================== */
@media only screen and (max-width: 767px) {
    .margenDeCelu {
        margin-top: 100px;
        margin-left: -15px;
        margin-right: -15px;
    }
}


/* ==========================================================================
Clase para el modulo de registro de usuario, eleccion de plan y carga de empresa.
========================================================================== */
.stepwizard-step p {
    margin-top: 10px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    /*background-color: #57167d;*/
    background-color: #2E86C1;
}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 50%;
    /*background-color: #f5f6f7;*/
    background-color: #2E86C1;
    /*border: 1px #57167d solid;*/
    border: 1px #2E86C1 solid;
    /*color: #57167d;*/
    color: #fff;
    margin-bottom: 0;
    font-weight: 400;
    white-space: nowrap;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
}

    .btn-circle:hover {
        background: rgba(87,22,125, 0.08);
        border: 1px solid transparent;
    }


/* ==========================================================================
Clase para cambiar de color el seleccion de empresa y los planes de usuario.
========================================================================== */

.contenedor-empresas .empresas-por-titular {
    margin-bottom: 2rem;
}

    .contenedor-empresas .empresas-por-titular .titulo {
        font-size: 1.65rem;
        font-weight: bold;
        /*color: #605ca8;*/
        color: #1E88E5;
        margin-bottom: 2rem;
        position: relative;
    }

        .contenedor-empresas .empresas-por-titular .titulo::after {
            content: '';
            height: 2px;
            width: 100%;
            /*background-color: #605ca8;*/
            background-color: #1E88E5;
            position: absolute;
            left: 0;
            bottom: -.65rem;
            border-radius: 10px;
        }

        .contenedor-empresas .empresas-por-titular .titulo i {
            margin-right: 1.5rem;
        }

    .contenedor-empresas .empresas-por-titular .empresa {
        background-color: #fff;
        border-radius: 1rem;
        margin-bottom: 1.5rem;
        color: #777;
        display: flex;
        justify-content: space-around;
        gap: 5px;
        height: 160px;
        padding: 1rem;
        box-shadow: 0 2px 5px;
        transition: color .25s ease-in-out, background-color .25s ease-in-out, transform .15s ease;
    }

       /* .contenedor-empresas .empresas-por-titular .empresa:hover,
        .contenedor-empresas .empresas-por-titular .empresa:active,
        .contenedor-empresas .empresas-por-titular .empresa:focus {
            box-shadow: 0 2px 5px, 0 0 0 2px #605ca8;
            color: #605ca8;
            background-color: #fafaff;
            transform: scale(1.015);
        }

        .contenedor-empresas .empresas-por-titular .empresa:active,
        .contenedor-empresas .empresas-por-titular .empresa:focus {
            box-shadow: 0 2px 10px, 0 0 0 3px #605ca8;
            outline: none;
        }*/

        .contenedor-empresas .empresas-por-titular .empresa:hover,
        .contenedor-empresas .empresas-por-titular .empresa:active,
        .contenedor-empresas .empresas-por-titular .empresa:focus {
            box-shadow: 0 2px 5px, 0 0 0 2px #DBEAFE;
            color: #2E86C1;
            background-color: #fafaff;
            transform: scale(1.015);
        }

        .contenedor-empresas .empresas-por-titular .empresa:active,
        .contenedor-empresas .empresas-por-titular .empresa:focus {
            box-shadow: 0 2px 10px, 0 0 0 3px #DBEAFE;
            outline: none;
        }

.empresas-por-titular .empresa div.detalles-empresa,
.empresas-por-titular .empresa div.img {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 3 5;
}

.empresas-por-titular .empresa .nombre-empresa-manage {
    font-size: 16px;
    height: 60px;
    display: block;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empresas-por-titular .empresa div.detalles-empresa .detalles p {
    font-size: 12px;
    margin: 0;
    line-height: 1.75em;
}

.empresas-por-titular .empresa div.img {
    flex: 2 5;
}

    .empresas-por-titular .empresa div.img img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        border-radius: 1rem;
        box-shadow: 1px 1px 3px;
    }

.contenedor-empresas .cuadro-plan {
    background-color: #f5f6f7;
    border: 1px #1091EC solid;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
}

.cuadro-plan:hover {
    color: #1091EC;
    background: rgba(87,22,125, 0.08);
    border: 1px solid transparent;
}

.NoSubrayar:link {
    cursor: pointer;
    text-decoration: none;
}
/*Fin codigo del modulo de usuario*/


/* ==========================================================================
Clase para cambiar de color las tiendas virtuales.
========================================================================== */

.contenedor-empresas .empresas-por-titular {
    margin: 0 2rem 2rem 2rem;
}

    .contenedor-empresas .empresas-por-titular .tituloTiendas {
        font-size: 1.65rem;
        font-weight: bold;
        margin-bottom: 2rem;
        position: relative;
    }

        .contenedor-empresas .empresas-por-titular .tituloTiendas::after {
            content: '';
            height: 2px;
            width: 100%;
            background-color: #000;
            position: absolute;
            left: 0;
            bottom: -.65rem;
            border-radius: 10px;
        }

        .contenedor-empresas .empresas-por-titular .tituloTiendas i {
            margin-right: 1.5rem;
        }


/* ==========================================================================
Clase para que el textarea ocupe todo el ancho y que tenga bordes redondeado similar a un input.
========================================================================== */
.textarea-control {
    max-width: 1920px;
    width: 100%;
    resize: vertical;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}


/* ==========================================================================
Modificamos el color de los campos desabilitados.
========================================================================== */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1;
}

/* ==========================================================================
Clase para modificar el color de fondo de los Registros de las Tablas.
========================================================================== */
.fondoRojoTabla {
    background-color: rgba(255, 0, 0, 0.15) !important;
}

    .fondoRojoTabla:first-child {
        box-shadow: inset 3px 0 #ff0000;
    }

.fondoNaranjaTabla {
    background-color: rgba(183, 78, 0, 0.15) !important;
}

    .fondoNaranjaTabla:first-child {
        box-shadow: inset 3px 0 #ff851b;
    }

.fondoVerdeTabla {
    background-color: rgba(0, 138, 39, 0.15) !important;
}

    .fondoVerdeTabla:first-child {
        box-shadow: inset 3px 0 #008A27;
    }

.fondoAmarilloTabla {
    background-color: rgba(183, 168, 0, 0.20) !important;
}

    .fondoAmarilloTabla:first-child {
        box-shadow: inset 3px 0 #f39c12;
    }

.fondoAzulTabla {
    background-color: rgba(0, 115, 183, 0.15) !important;
}

    .fondoAzulTabla:first-child {
        box-shadow: inset 3px 0 #0073b7;
    }

.fondoRosaTabla {
    background-color: rgba(255,192,203, 0.30) !important;
}

    .fondoRosaTabla:first-child {
        box-shadow: inset 3px 0 #FFC0CB;
    }

.fondoSalmonTabla {
    background-color: rgba(254,195,172, 0.35) !important;
}

    .fondoSalmonTabla:first-child {
        box-shadow: inset 3px 0 #FEC3AC;
    }

.fondoFucsiaTabla {
    background-color: rgba(255,0,255, 0.15) !important;
}

    .fondoFucsiaTabla:first-child {
        box-shadow: inset 3px 0 #FF00FF;
    }

.fondoBordoTabla {
    background-color: rgba(150,0,0, 0.15) !important;
}

    .fondoBordoTabla:first-child {
        box-shadow: inset 3px 0 #960000;
    }

.fondoGrisTabla {
    background-color: rgba(128,128,128, 0.15) !important;
}

    .fondoGrisTabla:first-child {
        box-shadow: inset 3px 0 #808080;
    }

.fondoOroTabla {
    background-color: rgba(255,215,0, 0.15) !important;
}

    .fondoOroTabla:first-child {
        box-shadow: inset 3px 0 #FFD700;
    }

.fondoAzulOscuroTabla {
    background-color: rgba(0,0,128, 0.10) !important;
}

    .fondoAzulOscuroTabla:first-child {
        box-shadow: inset 3px 0 #000080;
    }

.fondoTurquesaTabla {
    background-color: rgba(48,213,200, 0.15) !important;
}

    .fondoTurquesaTabla:first-child {
        box-shadow: inset 3px 0 #30D5C8;
    }

.fondoGrisFila_1 {
    background-color: #ebebeb;
}

.fondoGrisFila_2 {
    background-color: #dcdcdc;
}

.fondoGrisFila_3 {
    background-color: #cecece;
}

.fondoGrisFila_4 {
    background-color: #E1E1E8;
}

.totalTablas {
    font-weight: 800;
    font-size: 17px;
    padding-left: 20px !important;
}

.totalTablas1 {
    font-weight: 700;
    font-size: 15px;
    padding-left: 20px !important;
}


/* ==========================================================================
Clase para modificar el color de fondo de los Importes.
========================================================================== */
.importeRojo {
    background-color: rgba(255, 0, 0, 0.05) !important;
}

.bordeRojoImporte {
    border: 1px solid #e13f3f !important;
}

.importeVerde {
    background-color: rgba(0, 138, 39, 0.08) !important;
}

.bordeVerdeImporte {
    border: 1px solid #008A27 !important;
}

.importeAzul {
    background-color: rgba(0, 115, 183, 0.08) !important;
}

.bordeAzulImporte {
    border: 1px solid #0073b7 !important;
}

.importeNaranja {
    background-color: rgba(183, 78, 0, 0.08) !important;
}

.bordeNaranjaImporte {
    border: 1px solid #b74e00 !important;
}

.importeAmarillo {
    background-color: rgba(183, 168, 0, 0.08) !important;
}

.bordeAmarilloImporte {
    border: 1px solid #b7a800 !important;
}


/* ==========================================================================
Ponemos en negro un tachado para los comprobantes anulados.
========================================================================== */
.tachadoNegro {
    text-decoration: line-through;
    color: #000;
}

.sinTachado {
    text-decoration: none;
}


/* ==========================================================================
Clase para darle el color al mensaje.
========================================================================== */
.mensajeDanger {
    color: #d73925;
}

.mensajeSuccess {
    color: #008d4c;
}

.mensajeInfo {
    color: #00acd6;
}



/* ==========================================================================
Cambiamos el tamaño de los label en CTACTE del Nombre y el Saldo del cliente.
========================================================================== */
.nombrepersona-movimiento {
    float: left;
    font-weight: bold;
    color: #57167d /*white*/;
    font-size: 18px;
}

.saldopersona-movimiento {
    float: right;
    font-weight: bold;
    color: #57167d /*white*/;
    font-size: 18px;
}



/* ==========================================================================
Estilo para Formulario Emergente para cargar detalle en Factura Electrónica.
========================================================================== */
.BordeRojo {
    border: 2px solid #ff6e6c;
}



/* ==========================================================================
VENTANA FLOTANTE DE AGREGAR Y EDITAR PRODUCTO.
========================================================================== */
.titulo-popup {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: -10px;
    margin-top: -15px;
    font-size: 22px;
    font-weight: bold;
}

.popup {
    opacity: 0;
    margin-top: -300px;
}

    .popup:target {
        visibility: visible;
        opacity: 1;
        background-color: rgba(0,0,0,0.8);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        z-index: 9999;
    }

.popup-contenedor {
    position: relative;
    margin: 30px auto;
    padding: 10px 10px;
}

@media screen and (max-width: 768px) {
    .popup-contenedor {
        margin: 0px auto;
        height: 450px;
        overflow-y: scroll;
    }

    .titulo-popup {
        font-size: 18px;
    }

    .contenedor-empresas .empresas-por-titular .empresa {
        flex-direction: column;
        height: auto;
    }

    .contenedor-empresas .empresas-por-titular .titulo {
        text-align: center;
    }

    .contenedor-empresas .empresas-por-titular .empresa div.detalles-empresa {
        text-align: center
    }
}

a.popup-cerrar {
    text-decoration: none;
    line-height: 1;
    color: #c3c0c0;
}

    a.popup-cerrar:hover,
    a.popup-cerrar:focus,
    a.popup-cerrar:active {
        color: #aaaaaa;
    }

.ventana_flotante {
    z-index: 15;
    max-width: 800px;
    margin-top: 20px;
    width: 100%;
    position: relative;
    margin: 0px auto;
    border: none;
    padding: 10px 0px 20px 0px;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 6px 6px 6px 6px
}

.form-articulo-factura {
    padding: 0px 20px 0px 20px;
}

.aclaracion-input {
    color: #696969;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: -10px;
}

.aclaracion-formulario {
    color: #696969;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 15px;
}

.btn-desactivar {
    background-color: #bc3c3c;
    color: white;
    border-color: #bc3c3c;
}

    .btn-desactivar:hover,
    .btn-desactivar:focus,
    .btn-desactivar:active,
    .btn-desactivar.active {
        background-color: #aa3737;
        color: white;
        border-color: #aa3737;
    }


/* ==========================================================================
Código para visualizar el listado de productos de manera emergente en manejo de mesas y pedidos
========================================================================== */
#seleccionar-productos {
    visibility: hidden;
    opacity: 0;
    margin-top: -300px;
}

    #seleccionar-productos:target {
        visibility: visible;
        opacity: 1;
        background-color: rgba(0,0,0,0.8);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        z-index: 9999;
        transition: all 1s;
    }

.ventana_flotante1 {
    z-index: 15;
    max-width: 1200px;
    margin-top: 20px;
    width: 100%;
    position: relative;
    margin: 0px auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 6px 6px 6px 6px
}


/* ==========================================================================
Editamos el z-index cuando tenemos juntos los input-group y los form-control.
========================================================================== */
.input-group .form-control {
    position: relative;
    z-index: 0;
    float: left;
    width: 100%;
    margin-bottom: 0;
}


/* ==========================================================================
Editamos el color del texto "MENU DE NAVEGACION"
========================================================================== */
.skin-blue .sidebar-menu > li.header {
    color: #6c8c9b;
    background: #181f23;
}


/* ==========================================================================
Le damos color al Texto de la Empresa Seleccionada
========================================================================== */
.empresaActual {
    color: #ffffff;
    float: left;
}

    .empresaActual > li {
        color: #ffffff;
        float: left;
    }

.hidden-empresaActual {
    display: block !important;
}

@media (max-width: 991px) {
    .empresaActual .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 20px;
    }
}

@media (min-width: 1025px) {
    .acortarTexto {
        word-wrap: break-word;
        max-width: 520px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (max-width: 1024px) {
    .acortarTexto {
        word-wrap: break-word;
        max-width: 310px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (max-width: 810px) {
    .acortarTexto {
        word-wrap: break-word;
        max-width: 265px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    .acortarTexto {
        word-wrap: break-word;
        max-width: 500px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (max-width: 640px) {
    .acortarTexto {
        word-wrap: break-word;
        max-width: 310px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (max-width: 450px) {
    .acortarTexto {
        word-wrap: break-word;
        max-width: 260px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (max-width: 449px) {
    .acortarTexto {
        word-wrap: break-word;
        max-width: 160px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    /*CAMBIAMOS EL TAMAÑO DE LOS BOTONES DE SUMA Y RESTA DE CANTIDAD EN LAS TABLAS EN MODO CELULAR*/
    table .input-group-addon {
        padding: .6rem;
    }
}


/* ==========================================================================
Cambiamos el Color de la seleccion de los input.
========================================================================== */
*::selection {
    background: #E1E1E8;
    color: #555;
    font-weight: bold;
}

/*Cambiamos el color del borde de los Input*/
input:focus, input[type=text]:focus, input[type=password]:focus {
    background-color: #fff; /*background-color:#eee7fc;*/
    border-color: #787878;
    outline: 0 none;
}


/* ==========================================================================
Cambiamos el Color de la sumatoria en consulta de movimientos de caja.
========================================================================== */
.sumatoria-borderojo {
    border: 1px solid #d92323 !important;
}

.sumatoria-bordeverde {
    border: 1px solid #008A27 !important;
}

.sumatoria-bordeazul {
    border: 1px solid #0073b7 !important;
}

.sumatoria {
    background-color: #fff;
    border-radius: 50px;
    padding: 10px 15px;
    position: fixed;
    overflow: hidden;
    text-align: right;
    bottom: 15px;
    right: 15px;
    font-weight: bold;
    font-size: 20px;
    z-index: 950;
    border: 0px;
    justify-content: center;
}


/* ==========================================================================
Para los BOTONES QUE REPRESENTAN CADA MESA
========================================================================== */
.boton-mesa {
    max-width: 350px;
    width: 100%;
}

.btn-group-part1 {
    height: 75px;
    text-decoration: none;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
    width: 80%;
    color: #f8f8f8;
    border: 1px solid #cbcbcb;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}

    .btn-group-part1:hover,
    .btn-group-part1:focus,
    .btn-group-part1:active {
        color: #f8f8f8;
    }

.btn-group-mesa {
    height: 50px;
    margin: 0px 0px;
    text-decoration: none;
    padding: 11px 16px;
    font-size: 18px;
    font-weight:bold;
 /*   line-height: 1.53;*/
    border-radius: 6px;
    width: 100%;
    color: #f8f8f8;
    border: 1px solid #cbcbcb;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}

    .btn-group-mesa:hover,
    .btn-group-mesa:focus,
    .btn-group-mesa:active {
        color: #f8f8f8;
    }

.btn-group-part2 {
    height: 75px;
    text-decoration: none;
    padding: 10px 10px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
    width: 20%;
    color: #000;
    border: 1px solid #cbcbcb;
}

.divOriginal {
    height: 51px;
    border: 1px solid #d0d0d0;
    border-radius: 7px;
}

.divOriginalRojo {
    height: 51px;
    max-width: 220px;
    width: 100%;
    border: 1px solid #e15454;
    border-radius: 7px;
}


/* ==========================================================================
Para las VENTANAS FLOTANTES
========================================================================== */
.modal-open {
    overflow: hidden;
}

    .modal-open .modal {
        overflow-x: hidden;
        overflow-y: auto;
        padding-TOP: 50px;
    }

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -webkit-transform: translate(0, -50px);
    transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

.modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none;
}

.modal-dialog-scrollable {
    max-height: calc(100% - 1rem);
}

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 5rem);
        overflow: hidden;
    }

    .modal-dialog-scrollable .modal-header,
    .modal-dialog-scrollable .modal-footer {
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    .modal-dialog-scrollable .modal-body {
        overflow-y: auto;
    }

.modal-dialog-centered {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - 1rem);
}

    .modal-dialog-centered::before {
        display: block;
        height: calc(100vh - 1rem);
        content: "";
    }

    .modal-dialog-centered.modal-dialog-scrollable {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
        height: 100%;
    }

        .modal-dialog-centered.modal-dialog-scrollable .modal-content {
            max-height: none;
        }

        .modal-dialog-centered.modal-dialog-scrollable::before {
            content: none;
        }

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

    .modal-backdrop.fade {
        opacity: 0;
    }

    .modal-backdrop.show {
        opacity: 0.5;
    }

.modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
}

    .modal-header .close {
        padding: 1rem 1rem;
        margin: -1rem -1rem -1rem auto;
    }

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    margin-left: 5px;
    font-size: 20px;
    font-weight: bold;
}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
}

.modal-footer {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

    .modal-footer > :not(:first-child) {
    }

    .modal-footer > :not(:last-child) {
    }

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
        /*margin: 15.75rem auto;*/
    }

    .modal-dialog-scrollable {
        max-height: calc(100% - 3.5rem); /*ver*/
    }

        .modal-dialog-scrollable .modal-content {
            max-height: calc(100vh - 3.5rem); /*ver*/
        }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }

        .modal-dialog-centered::before {
            height: calc(100vh - 3.5rem);
        }

    .modal-sm {
        max-width: 300px;
    }   
    
}

@media (min-width: 767px) {
    .modal-lg {
        max-width: 700px;
    }
}

.modal-xl {
    max-width: 1140px;
}

@media (max-width: 1165px) {
    .modal-xl {
        margin-left: 10px;
        margin-right: 10px;
    }
}


/* ==========================================================================
CSS PARA ACERCA DE Y VIDEOS TUTORIALES
========================================================================== */
.hr-lila {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #3c8dbc !important;
    height: 100%;
    min-height: 1px;
}

.cabeceraAcercaDe {
    height: 100%;
    min-height: 90px;
    background-color: #3c8dbc;
}

.modalVideosTutoriales {
    z-index: 15;
    max-width: 600px;
    margin-top: 20px;
    width: 100%;
    position: relative;
    margin: 0px auto;
    border: none;
    padding: 0px 0px 0px 0px;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #0046be;
}

.cabeceraVideosTutoriales {
    height: 100%;
    min-height: 15px;
    background-color: #605ca8;
}

.modalImagen {
    margin-top: -5px;
}

.copyRightModal {
    margin-top: 50px;
    text-align: right;
}

.versionProducto {
    text-align: right;
}

@media (max-width: 768px) {
    .popup-contenedor {
        position: relative;
        margin: 10px auto;
        padding: 10px 10px;
    }

    .modalImagen {
        margin-top: 5px;
    }

    .copyRightModal {
        margin-top: 20px;
        margin-bottom: 15px;
        text-align: left;
    }

    .versionProducto {
        text-align: left;
    }
}

.text-gris333 {
    color: #333;
}


/* ==========================================================================
CSS PARA BOTONES DE IMAGENES DE PRODUCTOS
========================================================================== */
.btn-buscar-img {
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
    margin-right: -1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    text-shadow: 0 1px 0 #fff;
    background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -o-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#e0e0e0));
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #dbdbdb;
    border-color: #ccc;
}

    .btn-buscar-img:hover {
        background-color: #e0e0e0;
        background-position: 0 -15px;
    }

.btn-guardar-img {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    background-color: transparent;
    border: 2px solid #57167d;
    color: #57167d;
    padding: 5px 18px 4px 18px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
    margin-right: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    text-shadow: 0 1px 0 #fff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
}

    .btn-guardar-img:hover {
        background-color: rgba(87,22,125, 0.08);
        color: #57167d;
    }


.input-group-addon2 {
    border-radius: 0px 4px 4px 0px !important;
    border-color: #d2d6de;
    background-color: #eee;
}

.cantidadProdRapida {
    text-align: right;
}


@media (max-width: 767px) {
    .margenBuscarRapido {
        margin-top: 10px;
    }
}

.pointer {
    cursor: pointer;
}

.notAllowed {
    cursor: not-allowed;
}

.numeroNotificacion {
    background-color: #841ebf;
    padding: 3px 6px;
    font-size: 11px;
    border-radius: 10px;
    margin-left: 3px;
    color: white;
}


/* ESTE ES EL SPINNER PARA LOS BOTONES A LA HORA DE MOSTRAR EL CARGANDO O ESPERE. */
.centrarSpinner {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.spinner {
    display: inline-block;
    min-width: 21px;
    min-height: 21px;
    border-radius: 50px;
    margin-left: 5px;
    /*border: 3px solid #9c24ff;*/
    border: 3px solid #57167d;
    border-top-color: transparent;
    border-right-color: transparent;
    animation: rotar_spinner 0.75s linear infinite;
}

/* ESTE ES EL SPINNER PARA LOS CONTENEDORES QUE SE CARGAN CON JS, MUESTRA UNA RUEDA QUE GIRA EXPRESANDO UNA CARGA. */
.contenedor-spinner {
    width: 100%;
    height: auto;
    text-align: center;
}

    .contenedor-spinner.boton {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.spinner-rueda {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: rotar_spinner .75s linear infinite;
    animation: rotar_spinner .75s linear infinite;
}

.contenedor-spinner.boton .spinner-rueda {
    width: 3rem;
    height: 3rem;
}

.contenedor-spinner.spinner-tabla {
    padding: 1em 0;
    color: #605ca8;
    vertical-align: middle;
    background-color: #E8E6FF;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: .5em;
}

.imagen-lista-precios {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

/*Botón para abre el modal de creado rápido cuando se tipea en una barra de búsqueda*/
.agregar-busqueda {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #57167d;
    background-color: #57167d21;
    position: absolute;
    top: calc(2.08em - 0.5px);
    right: 1.5em;
    width: 75px;
    padding: .35em .7em;
    border-radius: 100px;
    cursor: pointer;
    transition: all .2s ease-in;
}

    .agregar-busqueda:hover {
        background-color: #e0caef;
        color: #57167d;
    }


.btn-buscar-ProductoRapido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #57167d;
    background-color: #57167d21;
    position: absolute;
    top: calc(0.25em - 0.5px);
    right: 1.5em;
    width: 75px;
    padding: .35em .7em;
    border-radius: 100px;
    cursor: pointer;
    transition: all .2s ease-in;
}

    .btn-buscar-ProductoRapido:hover {
        background-color: #e0caef;
        color: #57167d;
    }

.btn-buscar-Producto {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #57167d;
    background-color: #57167d21;
    position: absolute;
    top: calc(2.30em - 0.5px);
    right: 1.5em;
    width: 75px;
    padding: .35em .7em;
    border-radius: 100px;
    cursor: pointer;
    transition: all .2s ease-in;
}

    .btn-buscar-Producto:hover {
        background-color: #e0caef;
        color: #57167d;
    }


.badge_cantidad_img {
    font-size: .7em;
    font-weight: 600;
    background: #fbb73b;
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
}

.destello {
    transition: all .15s ease-in;
    opacity: 1;
    bottom: 0;
    animation: .5s destello ease;
    animation-delay: .05s;
}

.centrar_conFlexbox {
    display: flex;
    justify-content: center;
    align-content: center;
}

.mayusculas {
    text-transform: uppercase !important;
}
/**|| ANIMACIONES ||**/
@-webkit-keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes rotar_spinner {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes destello {
    0% {
        opacity: 0;
        bottom: -10px;
    }

    100% {
        opacity: 1;
        bottom: 0;
    }
}
/**|| ANIMACIONES ||**/


.panel {
    margin-bottom: 15px !important;
}


/* ACTUALIZACIONES */

.contenedorActualizacion {
    border: 1px solid #ccc;
    border-radius: 1rem;
    margin: 1rem auto;
    overflow: hidden;
    box-shadow: 0 2px 9px #cacaca;
}

    .contenedorActualizacion.nuevaAct {
        border-color: #605ca8;
        box-shadow: 0 0 0 4px #a4a0ff;
    }

    .contenedorActualizacion .fecha {
        padding: .8rem;
        background-color: #eee;
        margin-bottom: 0;
    }

    .contenedorActualizacion.nuevaAct .fecha {
        background-color: #dcdbff;
        color: #605ca8;
    }

        .contenedorActualizacion.nuevaAct .fecha span.nuevo {
            float: right;
            margin-top: -.2rem;
            padding: .1rem 0.8rem;
            color: #fff;
            background-color: #605ca8;
            border-radius: 1000px;
        }

    .contenedorActualizacion .detalle {
        padding: 1rem 2rem;
    }

    .contenedorActualizacion.nuevaAct .detalle {
        color: #605ca8;
    }



    .contenedorActualizacion .detalle h1,
    .contenedorActualizacion .detalle h2,
    .contenedorActualizacion .detalle h3,
    .contenedorActualizacion .detalle h4,
    .contenedorActualizacion .detalle h5,
    .contenedorActualizacion .detalle h6 {
        margin-top: 0
    }

/*EDITOR*/
.contenedor_editor {
    margin-top: 1rem
}

.p-0 {
    padding: 0;
}

.py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.contenedor-fijo-modal {
    position: sticky;
    background-color: #fff;
    padding: 1rem;
    top: 0;
    z-index: 10;
    transition: all .25s ease-in-out;
}

    .contenedor-fijo-modal.sombra {
        box-shadow: 0 2px 6px #131313;
    }


/*ESTAS CLASES SON PARA LOS CAMPOS REQUERIDOS.*/
.requerido:not(.form-control) {
    font-size: 12px;
    color: red;
}

.requerido:focus {
    border-color: #e13f3f !important;
    outline: 0 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(225,63,63,.5) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(225,63,63,.5) !important;
}


/*ESTAS CLASES SON PARA EL CONTADOR DE CARACTERES.*/
.caracteresMaximos {
    position: absolute;
    top: 1em;
    right: 3em;
}


/*POSICIÓN RELATIVA EN ELEMENTOS.*/
.posicionRelativa {
    position: relative;
}

/*TAMAÑO DE LETRA EN TITULOS DE CABECERA DE TABLA INTERNA.*/
.subTitulosTabla {
    font-size: 11px;
}


/*CABECERA FORMULARIO CON BOTONES DE TIPO SWICH*/
.cuadro-cabercera-formulario {
    height: 100%;
    min-height: 32px;
    padding: 0px 15px;
}

.div-swich-cabeceraComision {
    width: 100%;
    max-width: 165px;
    padding-left: 0px;
    float: right;
    margin-top: 5px;
}

.div-swich-cabeceraRemito {
    width: 100%;
    max-width: 155px;
    padding-left: 0px;
    float: right;
    margin-top: 5px;
}

.div-swich-cabeceraVenta {
    width: 100%;
    max-width: 132px;
    padding-left: 0px;
    float: right;
    margin-top: 5px;
}

.div-swich-cabeceraFactura {
    width: 100%;
    max-width: 110px;
    padding-left: 0px;
    float: right;
    margin-top: 5px;
}


/*ESTILO DEL INDEX DE ABONO*/
#DetallesAbono .seccion {
    padding: .2rem;
    border: 1px solid #e8e8e8;
    margin-bottom: 1.5rem;
    border-radius: .3rem;
}

.contenedor_barra_modal {
    position: relative;
}

    .contenedor_barra_modal .label_barra_modal {
        padding: 1rem 1rem 1rem 3.3rem;
        background-color: #e8e8e8;
        border-radius: .3rem;
        margin: 0;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.25s ease-in-out;
        width: 100%;
    }

    .contenedor_barra_modal .input_barra_modal {
        position: absolute;
        top: 25%;
        left: 1rem;
        width: 1.8rem;
        height: 1.8rem;
        margin: 0
    }

    .contenedor_barra_modal,
    .contenedor_barra_modal .input_barra_modal,
    .contenedor_barra_modal .label_barra_modal {
        cursor: pointer;
    }

        .contenedor_barra_modal.deshabilitado,
        .contenedor_barra_modal.deshabilitado .input_barra_modal,
        .contenedor_barra_modal.deshabilitado .label_barra_modal {
            cursor: not-allowed;
        }

        .contenedor_barra_modal .input_barra_modal:checked ~ .label_barra_modal {
            background-color: #cecece;
        }

.contenedor_detalles {
    margin: 0 .5rem;
    height: 0;
    overflow: hidden;
    transition: all 0.25s ease-in-out;
}

    .contenedor_detalles.mostrar {
        height: auto;
        padding: 0 0 1rem 0;
    }

    .contenedor_detalles table {
        margin-top: 1rem;
    }

.btn-ovalo:disabled {
    cursor: not-allowed;
}


/* ESTA CLASE desc param CENTRAR LOS MALDITOS SWITCHS. */
.centrarSwitch {
    display: flex;
    justify-content: center;
}


.float-right {
    float: right !important;
}

.badge-success {
    color: #fff;
    background-color: #28a745;
}


/* PROPIEDADES PARA LA PAGINACION. */
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: #841ebf;
    border-color: #841ebf;
}
.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
    color: #57167d;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}


.mostrarVentas .importeVenta {
    display:normal;
}

.mostrarVentas .porcDescuento {
    display: none;
}

.mostrarDescuentos .importeVenta {
    display: none;
}

.mostrarDescuentos .porcDescuento {
    display: normal;
}

/* ==========================================================================
CSS PARA NUEVA VENTA RÁPIDA
========================================================================== */

.tamanioImg {
    height: 100%;
    width: 100%;
}

.imgProductoVista {
    width: 100%;
    object-fit: cover;
    object-position: bottom;
    cursor: pointer;
}

.imgPadding {
    padding: 0px 10px;
    margin: 10px 0px;
}

.caja {
    position: relative;
    display: inline-block;
}

.textPrecioCaf {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 14px;
    color: white;
    background-color: mediumslateblue;
    max-width: 90%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
    height: 20px;
    padding: 0px 3px;
    cursor: pointer;
}

.textCaf {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 14px;
    color: black;
    background-color: white;
    max-width: 90%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0px 3px;
    height: 20px;
    font-weight: bold;
    cursor: pointer;
}

.caja:hover .imgProductoVista {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    /*box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);*/
    box-shadow: 8px 8px 5px 0px rgba(107,104,107,1);
}

.caja .imgProductoVista {
    box-shadow: rgb(61, 61, 61, 0.54) 6px 6px 5px 0px;
}


.scrollPanel {
    height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.eliminarBtn{
    color: red;
}

.novisiblepantalla {
    display: none;
}


.btnNaranja:hover {
    background-color: #FF7F50;
    border: 1px solid black;
}

/* ==========================================================================
para el Buscar Rápido Producto. Vista tablet
========================================================================== */


.producto-detalles {
    margin: 5px 0;
    overflow: hidden;
    padding: 30px;
    height: 100%;
    background-color: lavender;
    border-radius: 5px;
}
/* 	Producto Nombre */
.descripcionProductoRapido {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    position: relative;
    font-size: 28px;
    color: #344055;
    font-weight: bold;
    margin: 0;
}

/* producto imagen  */
.producto-imagen {
    margin: 5px 0;
    border-radius: 5px;
}

.imagenProductoRapido {
    max-width: 100%;
}

.spanPrecioCodBarra {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 20px;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
}