:root {
    --color-principal: #ffffff;
    --color-secundario: #ffffff;
    --color-pie: #ffffff;
    --color-fuente: #ffffff;
}

body {
    font-family: 'Roboto', sans-serif !important;
}


.container {
    width: 90% !important;
}

.container-catalogo {
    width: 95% !important;
}

.btn-categoria-modal {
    width: 120px;
}

.checkbox {
    padding-left: 20px;
    margin: 0;
}

    .checkbox label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-left: 5px;
        font-size: 16px;
    }

        .checkbox label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 15px;
            height: 15px;
            left: 0;
            margin-left: -18px;
            border: 1px solid #cccccc;
            border-radius: 3px;
            top: 2px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }

        .checkbox label::after {
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            top: 0;
            margin-left: -19px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555;
        }

    .checkbox input[type="checkbox"],
    .checkbox input[type="radio"] {
        opacity: 0;
        z-index: 1;
        cursor: pointer;
        position: relative;
        margin: 0;
    }

        .checkbox input[type="checkbox"]:focus + label::before,
        .checkbox input[type="radio"]:focus + label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .checkbox input[type="checkbox"]:checked + label::after,
        .checkbox input[type="radio"]:checked + label::after {
            font-family: 'Tupper-Name';
            content: "\e013";
        }

        .checkbox input[type="checkbox"]:indeterminate + label::after,
        .checkbox input[type="radio"]:indeterminate + label::after {
            display: block;
            content: "";
            width: 10px;
            height: 3px;
            background-color: #555555;
            border-radius: 2px;
            margin-left: -16.5px;
            margin-top: 7px;
        }

        .checkbox input[type="checkbox"]:disabled,
        .checkbox input[type="radio"]:disabled {
            cursor: not-allowed;
        }

            .checkbox input[type="checkbox"]:disabled + label,
            .checkbox input[type="radio"]:disabled + label {
                opacity: 0.65;
            }

                .checkbox input[type="checkbox"]:disabled + label::before,
                .checkbox input[type="radio"]:disabled + label::before {
                    background-color: #eeeeee;
                    cursor: not-allowed;
                }

    .checkbox.checkbox-circle label::before {
        border-radius: 50%;
    }

    .checkbox.checkbox-inline {
        margin-top: 0;
    }

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
.checkbox-primary input[type="radio"]:indeterminate + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
.checkbox-primary input[type="radio"]:indeterminate + label::after {
    background-color: #fff;
}

.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
.checkbox-danger input[type="radio"]:indeterminate + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
.checkbox-danger input[type="radio"]:indeterminate + label::after {
    background-color: #fff;
}

.checkbox-info input[type="checkbox"]:indeterminate + label::before,
.checkbox-info input[type="radio"]:indeterminate + label::before {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:indeterminate + label::after,
.checkbox-info input[type="radio"]:indeterminate + label::after {
    background-color: #fff;
}

.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
.checkbox-warning input[type="radio"]:indeterminate + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.checkbox-warning input[type="radio"]:indeterminate + label::after {
    background-color: #fff;
}

.checkbox-success input[type="checkbox"]:indeterminate + label::before,
.checkbox-success input[type="radio"]:indeterminate + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:indeterminate + label::after,
.checkbox-success input[type="radio"]:indeterminate + label::after {
    background-color: #fff;
}



input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
    font-family: 'Tupper-Name';
    content: "\f00c";
}

input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
    color: #fff;
}

input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
    color: #fff;
}

.lead {
    font-size: 18px;
    margin-bottom: 10px;
}
/* Style the Image Used to Trigger the Modal here */
.myImg {
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    width: 30%;
}

    .myImg:hover {
        opacity: 0.7;
    }

/* The Modal (background) */
.modal-imagen {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.35); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content-imagen {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption-imagen, #caption-imagen-cat {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #fff;
    padding: 10px 0;
    height: 150px;
    font-size: 18px;
}

/* Add Animation - Zoom in the Modal */
.modal-content-imagen, #caption-imagen, #caption-imagen-cat {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
    }
}

@keyframes zoom {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* The Close Button */
.close-imagen {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

    .close-imagen:hover,
    .close-imagen:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }



/* 100% Image Width on Smaller Screens to here*/
@media only screen and (max-width: 700px) {
    .modal-content-imagen {
        width: 100%;
    }
}


@media only screen and (max-width: 767px) {

    .text-sm-left {
        text-align: left !important;
    }
}

@media (min-width:360px) and (max-width : 767.98px) {
    .tblBodega {
        width: 180%;
        max-width: 180%;
        margin-bottom: 20px;
    }

    .tblLote {
        width: 240%;
        max-width: 240%;
        margin-bottom: 20px;
    }
}

@media (max-width:359.98px) {
    .tblBodega {
        width: 220%;
        max-width: 220%;
        margin-bottom: 20px;
    }

    .tblLote {
        width: 295%;
        max-width: 295%;
        margin-bottom: 20px;
    }
}

/*estilo param indicar ellipse minimo tamaño que debe tener los fselect*/
.fs-wrap {
    min-width: 100% !important;
    max-width: 100% !important;
    width: auto !important;
}

.radio-mante tr {
    padding-right: 50px;
}

.radio-mante tbody {
    display: flex;
}

.scroll {
    position: fixed;
    top: 50%;
    right: 0;
    width: 70px;
    height: 70px;
    display: block;
    background: #000;
    text-align: center;
    line-height: 70px;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    z-index: 10000;
}

    .scroll.whatsapp {
        top: calc(89% - 0px);
        background: #25D366;
        border-radius: 40px;
        font-size: 50px;
        -webkit-box-shadow: 0px 0px 30px 5px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 30px 5px rgba(255,255,255,1);
        box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
        margin-right: 18px;
    }



    .scroll.tienda {
        top: calc(88% - 0px);
        background: #c71d46;
        border-radius: 40px;
        font-size: 40px;
        -webkit-box-shadow: 0px 0px 30px 5px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 30px 5px rgba(255,255,255,1);
        box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
        margin-right: 18px;
    }

    .scroll.tienda_master {
        top: calc(88% - 0px);
        background: #c71d46;
        border-radius: 40px;
        font-size: 40px;
        -webkit-box-shadow: 0px 0px 30px 5px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 30px 5px rgba(255,255,255,1);
        box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
        margin-right: 18px;
    }

    .scroll.trackin_master {
        top: calc(60% - 0px);
        background: #1d80c7;
        border-radius: 40px;
        font-size: 40px;
        -webkit-box-shadow: 0px 0px 30px 5px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 30px 5px rgba(255,255,255,1);
        box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
        margin-right: 18px;
    }





.minicolors-theme-default .minicolors-input {
    height: 30px !important;
    width: 100% !important;
    text-align: center;
}


/*BEGIN COLORS*/
.btnColorTexto:focus, .btnColorTexto:active, a:focus, .input-group-addon, .credits a, .credits p, .credits h1,
.navbar-default .navbar-nav > li > a, .dropdown-menu > li > a, .nav-tabs li.active a, .btn, .ajax__fileupload_selectFileButton,
table > thead > tr, .pagination > .active > a, .pnlColor, .headerColor, .panel-primary > .panel-heading, .mini-cart2 a > span, .mini-cart a > span, .grid_selectet_row, .color-fuente-diasdisponibles {
    color: var(--color-fuente) !important;
}

    .opcionContacto .contImagen i, .credits a:hover, #ingreso span, #works #menu a:focus, .menuRegistroTemporal, .tupper-name, .panel-group .panel-title a:focus {
        color: var(--color-principal) !important;
    }

    .navbar, .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus,
    .btn-primary, table > thead > tr, .nav-tabs li.active > div, .nav-tabs li.active a,
    .nav-tabs li.active a:hover, .nav-tabs li.active a:active, .nav-tabs li.active a:focus,
    .ajax__fileupload_selectFileButton, .pnlColor, .headerColor {
        background-color: #2c3e50 !important;
    }

.widget {
    border-top-color: var(--color-principal) !important;
}

    .widget.Categories a:hover, .widget.Menu a:hover, .widget.Categories a:focus, .widget.Menu a:focus {
        background-color: var(--color-principal) !important;
        color: var(--color-fuente) !important;
    }

.nav-tabs {
    /*border-bottom-color: var(--color-principal) !important;*/
}

.panel-primary, .product-info .product-images .thumbs .thumbs-list li a.active, .borderColor {
    border-color: var(--color-principal) !important;
}

    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover,
    .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus,
    .panel-primary > .panel-heading {
        background-color: var(--color-principal) !important;
        border-color: var(--color-principal) !important;
    }

.panel-heading {
    border-radius: 15px 15px 0px 0px;
}

.navbar-default .navbar-nav > li > a:hover, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, a.link-color-amarillo,
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .terminos:focus, .busqueda:focus, .color-secundario-diasdisponibles {
    color: var(--color-secundario) !important;
}

.mini-cart2 a > span, .title-widget::before, .mini-cart a > span, .grid_selectet_row {
    background-color: var(--color-secundario) !important;
}

.credits {
    background-color: var(--color-pie) !important;
}

.frmlogin .box .input-group span {
    color: var(--color-principal) !important;
}

.color-bienvenido {
    border-bottom-color: var(--color-principal) !important;
}

/*FIN COLORS*/
#AtributosArticulo {
    display: inline-flex;
    opacity: 0.5;
    margin-top: 5px;
}

    #AtributosArticulo span {
        -webkit-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.75);
        box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.75);
        color: black;
        border-radius: 5px;
        padding-right: 5px;
        padding-left: 5px;
        margin-right: 5px;
    }

        #AtributosArticulo span:hover {
            cursor: default !important;
        }

#defaultCalendarExtender_daysTableHeaderRow {
    background-color: #eee !important;
}

#panelImportarArticulos .panel {
    -webkit-box-shadow: 7px 6px 8px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 7px 6px 8px -1px rgba(0,0,0,0.75);
    box-shadow: 7px 6px 8px -1px rgba(0,0,0,0.75);
}

.btnCatalogoColor {
    color: red !important;
}















/*ESTILOS PARA DESCUENTOS EN B2C */

.cuadradoE {
    width: 50px;
    height: 36px;
    background: #ffffff;
    float: left;
}



.trianguloE {
    width: 0;
    height: 0;
    border-left: 20px solid #bcfb04;    
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    float: right;
}



.encapsuladorFiguraE {
    position: absolute;
    width: 50px;
    top: 35%;
    right: 3%;
    /*  right: 0;*/
    margin: 0 auto;
    z-index: 2;
}



.textoFiguraE {
    position: absolute;
    margin: 0 auto;
    color: #26e022;
    font-size: 10pt;
    top: 0;
    left: 0;
    right: 0;
    width: 60px;
    FONT-VARIANT-CAPS: ALL-PETITE-CAPS;
}



.encapsuladorFiguraPequeñoE {
    position: absolute;
    width: 125px;
    top: 34%;
    left: 0;
    /*  right: 0;*/
    margin: 0 auto;
    z-index: 2;
}


.cuadradoPequeñoE {
    width: 75px;
    height: 25px;
    background: var(--color-secundario);
    float: left;
}

.trianguloPequeñoE {
    width: 0;
    height: 0;
    border-left: 20px solid var(--color-secundario);
    border-top: 13px solid transparent;
    border-bottom: 12px solid transparent;
    float: right;
}


.textoFiguraPequeñoE {
    position: absolute;
    margin: 0 auto;
    color: white;
    font-size: 14pt;
    top: 0;
    left: 0;
    right: 0;
    width: 60px;
}





















/*ESTILOS PARA DESCUENTOS EN B2C */

.cuadrado {
    width: 75px;
    height: 36px;
    background: var(--color-secundario);
    float: left;
}



.triangulo {
    width: 0;
    height: 0;
    border-left: 20px solid var(--color-secundario);
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    float: right;
}



.encapsuladorFigura {
    position: absolute;
    width: 125px;
    top: 35%;
    left: 0;
    /*  right: 0;*/
    margin: 0 auto;
    z-index: 2;
}



.textoFigura {
    position: absolute;
    margin: 0 auto;
    color: white;
    font-size: 20pt;
    top: 0;
    left: 0;
    right: 0;
    width: 60px;
}



.encapsuladorFiguraPequeño {
    position: absolute;
    width: 125px;
    top: 34%;
    left: 0;
    /*  right: 0;*/
    margin: 0 auto;
    z-index: 2;
}


.cuadradoPequeño {
    width: 75px;
    height: 25px;
    background: var(--color-secundario);
    float: left;
}

.trianguloPequeño {
    width: 0;
    height: 0;
    border-left: 20px solid var(--color-secundario);
    border-top: 13px solid transparent;
    border-bottom: 12px solid transparent;
    float: right;
}


.textoFiguraPequeño {
    position: absolute;
    margin: 0 auto;
    color: white;
    font-size: 14pt;
    top: 0;
    left: 0;
    right: 0;
    width: 60px;
}

span.badge-promo {
    position: absolute;
    right: 5px;
    top: 20px;
    background-color: #e08907;
    font-size: 12px;
    line-height: 12px;
    padding: 4px 8px;
    text-transform: uppercase;
    -webkit-border-radius: 2px 2px 0 2px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 2px 2px 0 2px;
    -moz-background-clip: padding;
    border-radius: 2px 2px 0 2px;
    background-clip: padding-box;
    z-index: 1;
}

.agotado {
    background-color: #bd0a0a !important;
}

    .agotado:hover {
        cursor: not-allowed;
    }



@media (max-width: 480px) {
    .owl-carousel {
        text-align: -webkit-center !important;
    }
}

#pagNosotros .bg9 {
    height: 400px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 40px;
}

.bgDark {
    background-color: rgba(0, 0, 0, 0.51);
    position: absolute;
    width: 100%;
    height: 400px;
}

#pagNosotros .bg9 h1 {
    font-size: 70px !important;
    font-weight: bold !important;
}

#pagNosotros .main {
    background: rgb(189,215,217);
    background: linear-gradient(90deg, var(--color-principal) -10%, var(--color-secundario) 30%, rgba(189,215,217,1) 100%);
}

#pagNosotros .main {
    min-height: 580px !important;
}

    #pagNosotros .main .container {
        padding-top: 120px;
    }

        #pagNosotros .main .container .owl-item .info, #pagNosotros .main .container .owl-item .image {
            height: 350px;
            margin-bottom: 20px;
        }

        #pagNosotros .main .container .owl-item .info {
            border-radius: 10px;
            -webkit-box-shadow: 10px 10px 8px -3px rgba(0,0,0,0.62) !important;
            -moz-box-shadow: 10px 10px 8px -3px rgba(0,0,0,0.62) !important;
            box-shadow: 10px 10px 8px -3px rgba(0,0,0,0.62) !important;
            background-color: white !important;
        }

            #pagNosotros .main .container .owl-item .info hr {
                width: 40px;
                float: left;
                border-color: var(--color-secundario) !important;
                margin-top: 30px;
                margin-right: 20px;
            }

            #pagNosotros .main .container .owl-item .info h1 {
                text-align: start;
            }

        #pagNosotros .main .container .owl-item .image {
            margin-left: 20px;
            margin-right: -20px;
        }

            #pagNosotros .main .container .owl-item .image img {
                -webkit-box-shadow: 10px 10px 8px -3px rgba(0,0,0,0.62) !important;
                -moz-box-shadow: 10px 10px 8px -3px rgba(0,0,0,0.62) !important;
                box-shadow: 10px 10px 8px -3px rgba(0,0,0,0.62) !important;
                width: 99%;
                position: absolute;
                height: 350px;
                margin-left: -14px;
                object-fit: cover;
                border-radius: 10px;
            }

                #pagNosotros .main .container .owl-item .image img:hover {
                    border-radius: 10px;
                }






.legendPantallas {
    padding-left: 30px;
}


#pagContacto .bg {
    height: 400px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 40px;
}

.bgDark {
    background-color: rgba(0, 0, 0, 0.51);
    position: absolute;
    width: 100%;
    height: 400px;
}

#pagContacto .bg h1 {
    font-size: 70px !important;
    font-weight: bold !important;
}

#pagContacto #informacion span {
    margin-right: 10px;
}


#pagContacto .bg h1 {
    font-size: 38px !important;
    font-weight: bold !important;
}


#pagNosotros .bg9 h1 {
    font-size: 38px !important;
    font-weight: bold !important;
}

@media (max-width: 480px) {
    #pagContacto #formulario {
        padding-top: 30px;
    }

    #pagNosotros .main .container {
        width: 100% !important;
    }

        #pagNosotros .main .container .owl-carousel .info {
            width: 100% !important;
            height: auto;
        }

        #pagNosotros .main .container .owl-carousel .image, #pagNosotros .main .container .owl-carousel .image img {
            width: 100% !important;
            padding: 0;
            margin: 0;
        }

            #pagNosotros .main .container .owl-carousel .image img {
                block-size: auto;
            }

        #pagNosotros .main .container .owl-carousel .image {
            height: 275px;
        }
}

#registro #divFormularioIframeRegistro .form-control {
    width: 100%;
}




/*TALLAS Y COLORES*/
.figcaption-articulo {
    position: relative;
}

    .figcaption-articulo h6 {
        font-size: 14px !important;
    }

.card-size-color {
    display: none;
    opacity: 100;
    -webkit-transition: height 0.4s ease-in-out, opacity 1s linear;
    -moz-transition: height 0.4s ease-in-out, opacity 1s linear;
    -o-transition: height 0.4s ease-in-out, opacity 1s linear;
    -ms-transition: height 0.4s ease-in-out, opacity 1s linear;
    transition: height 0.4s ease-in-out, opacity 1s linear;
}

.color-info ul {
    display: none;
    margin: auto;
    width: 100%;
    list-style-type: none;
    overflow-x: auto;
    /*  border-left: 1px solid var(--color-principal);*/
    /*  padding-top: 10px;*/
}

.size-info ul {
    display: block;
    margin: auto;
    width: 100%;
    list-style-type: none;
    overflow-x: auto;
    border-left: 1px solid var(--color-principal);
    /*  padding-top: 10px;*/
}

    .size-info ul::-webkit-scrollbar, .color-info ul::-webkit-scrollbar {
        height: 5px;
    }

    .size-info ul::-webkit-scrollbar-track, .color-info ul::-webkit-scrollbar-track {
        border: 1px solid #000;
        padding: 2px 0;
        background-color: #757575;
    }

    .size-info ul::-webkit-scrollbar-thumb, .color-info ul::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: white;
        border: 1px solid #000;
    }

        .size-info ul::-webkit-scrollbar-thumb:hover, .color-info ul::-webkit-scrollbar-thumb:hover {
            background: var(--color-principal);
        }

    .size-info ul li {
        min-width: 40px;
        height: 30px;
        background-color: #FFF;
        border-right: 1px solid var(--color-principal);
        border-top: 1px solid var(--color-principal);
        border-bottom: 1px solid var(--color-principal);
        display: inline-table;
        text-align: center;
    }

        .size-info ul li:hover, .size-info ul li[data-state=check] {
            background-color: var(--color-secundario);
            /*    border: 1px solid #FFF;*/
            color: #FFF;
        }

        .size-info ul li span {
            line-height: 30px;
            font-family: ui-sans-serif;
            padding-right: 5px;
            padding-left: 5px;
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
        }

.color-info ul li {
    width: 35px;
    height: 30px;
    border-right: 2px solid #ffffff;
    /* border-top: 1px solid var(--color-principal);
  border-bottom: 1px solid var(--color-principal);*/
    display: inline-table;
    /*  text-align: center;*/
}

    .color-info ul li:hover i::before, .color-info ul li[data-state=check] i::before {
        content: "\f00c";
        font-family: FontAwesome;
        font-style: normal;
        text-decoration: none;
        color: var(--color-secundario);
        font-size: 20px;
        position: absolute;
        padding-left: 0.8rem;
    }

.card-size-color button {
    margin-top: 7px;
}

.botonAgregarCarritoTCBloqueado {
    margin-top: 8% !important;
    background-color: grey !important;
}

.agotadoTC {
    margin-top: 8% !important;
}

.botonAgregarCarritoTC {
    margin-top: 8% !important;
}

.botonAgregar {
    width: 100%;
    margin-top: 2%;
}


#lista-articulos figure:hover .figcaption-articulo .card-size-color .size-info ul,
#lista-articulos figure .figcaption-articulo .card-size-color .color-info ul {
    /*  display: inline-flex;*/
}

#lista-articulos figure .figcaption-articulo .card-size-color.modo3 .color-info ul {
    display: none;
}

    #lista-articulos figure .figcaption-articulo .card-size-color.modo3 .color-info ul[data-display=active] {
        /*  display: inline-flex;*/
    }

@keyframes cf3FadeInOut {
    100% {
        opacity: 1;
    }

    55% {
        opacity: 0.2;
    }

    45% {
        opacity: 0.2;
    }

    0% {
        opacity: 1;
    }
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-secundario) !important;
}

.carrusel .owl-carousel {
    background-color: #f7f7f7;
    padding-top: 2%;
    padding-bottom: 2%;
}


.carrusel .owl-item {
    width: 245px !important;
}

.carrusel .owl-stage-outer {
    height: 320px !important;
}
/*ESTILO MODALES BASICAS*/
.modal-header {
    background-color: var(--color-principal) !important;
    font-family: 'Tupper-Name' !important;
    text-align: center !important;
}

    .modal-header .hgroup.title h1:first-child, .hgroup.title h2:first-child, .hgroup.title h3:first-child, .hgroup.title h4:first-child, .hgroup.title h5:first-child, .hgroup.title h6:first-child {
        font-size: 16px;
        line-height: 24px;
        color: white !important;
        font-weight: 700;
    }


    .modal-header label {
        color: white !important;
    }


    .modal-header span {
        color: white !important;
    }


    .modal-header .hgroup {
        background-color: transparent !important;
    }

.breadcrumb > li + li::before {
    content: "/\00a0" !important;
}

.pagination > li > a, .pagination > li > span {
    color: var(--color-secundario) !important;
}



/*DISEÑO param PAGINA defs ERROR METODO defs PAGO */
#divFondoEncabezado {
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*  margin-bottom: 40px;*/
}

#errorMetodoPago .bgDark {
    background-color: rgba(0, 0, 0, 0.51);
    position: absolute;
    width: 100%;
    height: 100%;
}

#errorMetodoPago .texto {
    font-size: 50px !important;
    font-weight: bold !important;
    color: var(--color-principal) !important;
}

#errorMetodoPago .container:before {
    display: block !important;
}

#errorMetodoPago .container:after {
    clear: inherit !important;
}

.btnErrorBanco {
    margin: 5% 0% 5% 0%;
    width: 50%;
    font-size: 11pt;
}

.circleBNerror {
    background-image: url("../img/imagen_error.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
    border-radius: 100%;
    height: 200px;
    width: 220px;
}

#contenedorVideoHero {
    height: 500px;
}

#contenedorInfoVideo {
    background-color: var(--color-principal);
    height: 500px;
    opacity: 1;
}

    #contenedorInfoVideo #contenedorTexto {
        text-align: center;
    }

        #contenedorInfoVideo #contenedorTexto h1 {
            color: var(--color-secundario);
        }

        #contenedorInfoVideo #contenedorTexto h6 {
            color: #fff;
            text-align: justify;
        }

/* 100% Image Width on Smaller Screens to here*/
@media only screen and (max-width: 700px) {
    #contendorSelectorHero {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        /* optional */
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    #contenedorVideoHero {
        height: 250px;
        width: 100%;
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
    }

    #contenedorInfoVideo {
        background-color: var(--color-principal);
        height: auto;
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
    }

        #contenedorInfoVideo #contenedorTexto {
            text-align: center;
        }

            #contenedorInfoVideo #contenedorTexto h1 {
                color: var(--color-secundario);
            }

            #contenedorInfoVideo #contenedorTexto h6 {
                color: #fff;
                text-align: justify;
                font-size: smaller;
            }
}

#listaMovimientoTracking .w3-card-4 {
    width: 100%;
    height: 25rem;
    position: relative;
}

#listaMovimientoTracking hr {
    border: 0;
    border-top: 1px solid var(--color-secundario);
    margin: 10px 0;
}

#listaMovimientoTracking .btn {
    /*position: absolute;*/
    border-radius: 0px !important;
    bottom: 0px;
    height: 40px;
    width: 100%;
    margin-top: -100px;
}

.containerTiempoDistancia {
    font-size: 10px;
    margin: 0;
    margin-top: 14px;
}

    .containerTiempoDistancia p {
        margin: 0;
        font-size: 10px;
    }

@media only screen and (max-width: 700px) {
    #tituloTiempoDistancia {
        margin: 0;
    }

    .containerTiempoDistancia {
        margin: 0;
        margin-bottom: 8px;
    }
}

.containerCategoriaTienda {
    height: 300px;
    display: contents;
}

    .containerCategoriaTienda .containerCategoriaTiendaLogo {
        text-align-last: center;
        height: 300px;
        box-shadow: 11px 10px 23px -12px rgba(0,0,0,0.75);
        -webkit-box-shadow: 11px 10px 23px -12px rgba(0,0,0,0.75);
        -moz-box-shadow: 11px 10px 23px -12px rgba(0,0,0,0.75);
    }

        .containerCategoriaTienda .containerCategoriaTiendaLogo #imgCategoriaTienda {
            padding-top: 20px;
            height: 120px;
            transition: 0.3s ease-in;
        }

        .containerCategoriaTienda .containerCategoriaTiendaLogo .containerCategoriaTiendaLogoInfo {
            display: inline-grid;
        }

            .containerCategoriaTienda .containerCategoriaTiendaLogo .containerCategoriaTiendaLogoInfo span, .containerCategoriaTienda .containerCategoriaTiendaLogo .containerCategoriaTiendaLogoInfo label {
                padding-bottom: 10px;
                font-weight: normal;
                font-size: inherit;
            }

            .containerCategoriaTienda .containerCategoriaTiendaLogo .containerCategoriaTiendaLogoInfo a {
                color: var(--color-secundario);
            }

                .containerCategoriaTienda .containerCategoriaTiendaLogo .containerCategoriaTiendaLogoInfo a:focus {
                    color: var(--color-secundario) !important;
                }

        .containerCategoriaTienda .containerCategoriaTiendaLogo .containerCategoriaTiendaLogoRedes {
            padding-top: 26px;
        }

            .containerCategoriaTienda .containerCategoriaTiendaLogo .containerCategoriaTiendaLogoRedes input {
                margin: 0 4px;
                height: 30px;
                transition: 0.3s ease-in;
            }

                .containerCategoriaTienda .containerCategoriaTiendaLogo .containerCategoriaTiendaLogoRedes input:hover {
                    height: 40px;
                }

    .containerCategoriaTienda .containerCategoriaTiendaBackground {
    }

        .containerCategoriaTienda .containerCategoriaTiendaBackground .categoriaTiendaBackground {
            height: 300px;
        }

@media only screen and (max-width: 700px) {
    .containerCategoriaTienda .containerCategoriaTiendaLogo {
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        height: auto;
    }

        .containerCategoriaTienda .containerCategoriaTiendaLogo .containerCategoriaTiendaLogoRedes {
            padding-top: 15px;
        }

    .containerCategoriaTienda .containerCategoriaTiendaBackground .categoriaTiendaBackground {
        background-image: url(../../Assets/img/categoriaTienda/Img/1.jpg);
        height: 200px;
        background-size: cover;
    }
}

.upFormStyle input {
    width: 100% !important;
}

#linkBtnInstagram, #linkBtnFacebook {
    display: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 0 6px;
    transition: 0.3s ease-in;
}

    #linkBtnInstagram.active, #linkBtnFacebook.active {
        display: inline;
    }

    #linkBtnInstagram:hover, #linkBtnFacebook:hover {
        width: 40px;
        height: 40px;
    }
/*#linkBtnInstagram {
    background-image: url(../../Assets/img/logo_insta.png);
}
#linkBtnFacebook {
    background-image: url(../../Assets/img/logo_face.png);
}*/
.imgCategoriaTiendaModal {
    height: 140px;
    width: 200px;
}

.badgeCategoriaTienda {
    background-color: var(--color-secundario) !important;
    color: var(--color-fuente) !important;
}


/*ESTILOS PARA FILTROS*/
.filtro-derecho {
    background-color: var(--color-principal);
    color: white;
}

.div-grupo-filtro-drecho {
    padding: 5%;
}

    .div-grupo-filtro-drecho:hover {
        background-color: var(--color-secundario);
        color: var(--color-principal);
    }

.div-grupo-filtro-drecho-active {
    background-color: var(--color-secundario);
    color: var(--color-principal);
}

.btn-filtro-atributo {
    font-size: 12pt;
    text-decoration: none;
    color: var(--color-principal);
}

    .btn-filtro-atributo:hover {
        text-decoration: none;
        color: var(--color-secundario);
    }

.contenedorBusquedaAvanzada {
    overflow: auto;
    height: 430px;
}

    .contenedorBusquedaAvanzada::-webkit-scrollbar {
        width: 8px; /* Tamaño del scroll en vertical */
        height: 8px; /* Tamaño del scroll en horizontal */
        display: none; /* Ocultar scroll */
    }

    /* Ponemos un color de fondo y redondeamos las esquinas del thumb */
    .contenedorBusquedaAvanzada::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }

        /* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
        .contenedorBusquedaAvanzada::-webkit-scrollbar-thumb:hover {
            background: #b3b3b3;
            box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
        }

        /* Cambiamos el fondo cuando esté en active */
        .contenedorBusquedaAvanzada::-webkit-scrollbar-thumb:active {
            background-color: #999999;
        }

a {
    cursor: pointer;
}

#divContenedor {
    width: 666px;
    border-radius: 1rem;
}

#contenedorTiendas {
    box-shadow: 0px 0px 25px 0px rgb(0 0 0 / 20%);
}

    #contenedorTiendas #divLetras {
        border-bottom-left-radius: 11px;
    }

    #contenedorTiendas #divTiendas {
        height: 100%;
        background-color: rgb(249 249 249);
        border-radius: 0 0 1rem 1rem;
        padding-bottom: 1rem;
    }

#contenedorTiendas h6 {
    color: var(--color-principal);
}

#contenedorTiendas #divLetras .row {
    text-align: center;
    background-color: rgb(249 249 249);
    color: white;
}


#contenedorTiendas #divLetras .tipoTienda {
    padding-bottom: 2rem;
}

        #contenedorTiendas #divLetras .tipoTienda .selectorTipoTienda {
            WIDTH: 90%;
            COLOR: VAR(--color-secundario);
            font-size: 1.5rem;
        }

    #contenedorTiendas #divLetras #tablaLetras {
        padding-top: 10px;
    }

        #contenedorTiendas #divLetras #tablaLetras ul li {
            background: #fff;
            padding: 10px;
            display: inline-table;
            margin: 0;
            height: 40px;
            width: 40px;
            line-height: 0px;
            margin: 2px;
            text-align: center;
            color: #000;
        }

            #contenedorTiendas #divLetras #tablaLetras ul li:hover, #contenedorTiendas #divLetras #tablaLetras ul li.activa {
                background: var(--color-secundario);
                cursor: pointer;
            }

            #contenedorTiendas #divLetras #tablaLetras ul li.bloqueada {
                cursor: default;
                background: darkgrey;
            }

            #contenedorTiendas #divLetras #tablaLetras ul li p {
                margin: 0;
                line-height: 20px;
                font-weight: bold !important;
            }

    #contenedorTiendas #divTiendas #tablaLogos, #contenedorTiendas #divTiendas #tablaLogos ul {
        height: 100%;
        width: 100%
    }

        #contenedorTiendas #divTiendas #tablaLogos ul {
            overflow-y: scroll;
        }

            #contenedorTiendas #divTiendas #tablaLogos ul li {
                width: 30%;
                display: none;
                margin: 8px;
                text-align: -webkit-center;
                border-radius: 5px;
                padding-top: 1rem;
            }

                #contenedorTiendas #divTiendas #tablaLogos ul li.visible {
                    display: inline-table;
                }

                #contenedorTiendas #divTiendas #tablaLogos ul li:hover {
                    cursor: pointer;
                    border: 1px solid #c5c5c5;
                    transition: 0.5s;
                }


            #contenedorTiendas #divTiendas #tablaLogos ul::-webkit-scrollbar {
                -webkit-appearance: none;
            }

                #contenedorTiendas #divTiendas #tablaLogos ul::-webkit-scrollbar:vertical {
                    width: 14px;
                }

            #contenedorTiendas #divTiendas #tablaLogos ul::-webkit-scrollbar-button:increment, .contenedor::-webkit-scrollbar-button {
                display: none;
            }

            #contenedorTiendas #divTiendas #tablaLogos ul::-webkit-scrollbar:horizontal {
                height: 10px;
            }

            #contenedorTiendas #divTiendas #tablaLogos ul::-webkit-scrollbar-thumb {
                background-color: var(--color-principal);
                ;
                border-radius: 4px;
                border: 2px solid var(--color-secundario);
            }

            #contenedorTiendas #divTiendas #tablaLogos ul::-webkit-scrollbar-track {
                border-radius: 4px;
            }

.tiendaLogo, .tiendaLogo img {
    max-height: 70px;
    min-width: 70px;
    min-height: 70px;
    text-align: center;
}

.tiendaNombre {
    margin-top: 2rem;
    font-size: 1.3rem;
    text-align: center;
}

    .tiendaNombre p {
        color: var(--color-secundario);
        font-weight: bold !important;
        margin: 0;
    }



.tiendaNombre {
    cursor: pointer;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}


@media (min-width:150px) and (max-width : 1300px) {
    .tab-responsive {
        width: 400px !important;
    }
}


@media only screen and (max-width: 900) {
    #divContenedor {
        left: 0;
    }
}

@media (min-width:950px) and (max-width : 1300px) {
    #divContenedor {
        left: -200px;
    }
}

@media (max-width: 1024px){
    #divContenedor {
        width: 100%;
    }
}

.ajustePantallaTipoTienda {
    left: -450px;
}



/*TABLA EN RESPONSIVE*/



table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
    border: none !important;
    background-color: var(--color-principal) !important;
}


figure figcaption {
    padding: 3% !important;
    margin-top: 0;
    color: #666;
    /*height:320px;*/
}

    figure figcaption h6 span {
        font-size: 1.7rem !important;
    }

    figure figcaption p {
        font-size: 13px !important;
        margin-bottom: 0;
        margin-top: 1.3rem;
    }

    figure figcaption .informacion {
        height: 130px;
        padding: 1rem;
    }

.tituloCat {
    font-size: 11px !important;
}

.owl-theme .owl-dots {
    display: none;
}

.table .group {
    background-color: #969494;
    color: white;
    font-size: 12px;
}

    .table .group td {
        text-align: left !important;
        padding-left: 2%;
    }


#siteMapCategoria a {
    font-size: 14px !important;
}


.jrt tr {
    border: none !important;
    margin:0;
}


.carousel-indicators {
    z-index: 1 !important;
}


.btnSeleccionarTodos {
    background: var(--color-principal);
    width: 100%;
    padding: 5%;
    border: none;
}

    .btnSeleccionarTodos:hover {
        background-color: white;
        color: var(--color-principal);
    }
.TreeView i {
    color: #2f659a;
}

.TreeView label {
    color: #555555;
    font-size: 1.1em;
}

.TreeViewCheck {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.TreeView img {
    height: 20px !important;
}


.TreeView table {
    margin-bottom: 1%;
}



.TreeView input[type="checkbox"] {
    position: relative;
    right: 0px !important;
    width: 20px;
}












/* Hide the browser's default checkbox */
.TreeViewCheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #868686;
    border-radius: 15%;
}

/* On mouse-over, add a grey background color */
/*.TreeViewCheck:hover input ~ .checkmark {
  background-color: #ccc;
}
*/

/* When the checkbox is checked, add a blue background */
.TreeViewCheck input:checked ~ .checkmark {
    background-color: #2f659a;
    border: 2px solid #2f659a;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.TreeViewCheck input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.TreeViewCheck .checkmark:after {
    left: 5px;
    top: 1px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    border-radius: 10%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}