footer a{
    text-decoration: none;
    color: white;
}
footer a:hover{
    color: orange;
}
.cookies-layout{
    display: none;
    position: fixed;
    bottom: 0;
    padding: 15px;
    background-color: ghostwhite;
    z-index: 200 !important;
}
ul.no-list-style{
    list-style: none !important;
}
.bg-amarillo{
    background-color: #FFED00 !important;
    color: black !important;
}
.text-amarillo{
    color: #FFED00 !important;
}
.bg-black{
    background-color: black !important;
}
h3.movingLeftToRigth {
    animation: move2 2s;
    -webkit-animation: move2 2s;

    transition: color 12s, font-size 12s;
    -webkit-transition: color 12s, font-size 12s;
    -moz-transition: color 12s, font-size 12s;
    -o-transition: color 12s, font-size 12s;
    transition: color 12s, font-size 12s;
}
h3.movingRigthToLeft {
    animation: move1 2s;
    -webkit-animation: move1 2s;
}

@keyframes move1 {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}
@-webkit-keyframes move1 {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

@keyframes move2 {
    to {
        margin-left: 0%;
        width: 100%;
    }

    from {
        margin-left: -300%;
        width: 100%;
    }
}
@-webkit-keyframes move2 {
    to {
        margin-left: 0%;
        width: 100%;
    }

    from {
        margin-left: -300%;
        width: 100%;
    }
}

header.top-bar-fixed{
    position: sticky !important;
    top: 0;
    width: 100%;
    z-index: 300;
    max-height: 70px;
    padding-left: 60px !important;
}
div.header-space{
    background-color: red;
    margin-top: 20px;
}
footer.dark{
    background-color: black !important;
    color: white !important;
    border-top: 10px solid yellow;
    padding-top: 20px;
}
footer.dark h6{
    text-transform: uppercase;
}
footer.dark ul{
    list-style: none;
}
div.modal.document-viewer-modal.modal-content{
    height: 100%;
    overflow-y: scroll;
}
div.modal.document-viewer-modal.modal-content iframe{
    height: 100%;
    width: 100%;
}

#preloader{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #ffff00;
    top: 0;
    left: 0;
    z-index: 2000;
    padding-top: 15%;
}

#modal-promocial-home{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #ffff004a;
    top: 0;
    left: 0;
    z-index: 60000000;
    padding-top: 5%;
}

div.configuration-layout-scrollables{
    /*height: 600px;*/
    overflow-y: auto;
    overflow-x: hidden;
    /*min-width: 360px;*/
}
div.configuration-layout-scrollables img.configuracion{
    width: 75%;
}
div.configuration-layout-scrollables img.horizontal{
    width: 85%;
}
div.configuration-layout-scrollables small{
    font-stretch: condensed;
}
div.configuration-layout-scrollables strong{
    font-stretch: condensed;
}
div.configuration-layout-scrollables strong.encoger{
    font-size: 13px;
}
div.configuration-option-title strong{
    font-size: 12px;
}

div.card-copisteria{
    max-width: 200px;
}


div.trash-configuration-icon{
    font-size: 18px;
    margin-left: 10px;
    margin-top: 5px;
}
div.trash-configuration-icon i{
    cursor: pointer;
}
div.hr-configuration-manager{
    position: fixed;
    top: 68px;
    /* margin: 0; */
    height: 1px;
    background-color:  #FFED00;
    right: 34px;
    z-index: 1000;
    width: 650px;
}
div.configuration-manager{
    position: fixed;
    top: 70px;
    right: 3px;
    background-color: black;
    /*border-radius: 0px 0px 0px 15px;*/
    min-height: 60px;
    padding: 5px 3px 3px 3px;
    width: 100%;
    z-index: 25;
    height: 68px;
}
label.numero-elementos-cart{
    background-color: #f8f8f800;
    border: 3px solid black;
    padding: 0px 4px 18px 4px;
    border-radius: 15px;
    height: 24px;
    color: white;
    font-style: initial;
    font-weight: bolder;
    position: relative;
}


.tooltip-main {
    width: 15px;
    border-radius: 50%;
    font-weight: 700;
    background: #f3f3f3;
    border: 1px solid #737373;
    color: #737373;
    margin: 4px 121px 0 5px;
    float: right;
    text-align: left !important;
}
.tooltip-inner {
    max-width: 236px !important;
    min-width: 236px !important;
    font-size: 12px;
    padding: 10px 15px 10px 20px;
    background: #FFFFFF;
    color: rgba(0, 0, 0, .7);
    border: 1px solid #737373;
    text-align: left;
}

div.cart-item-container{
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 5px;
}

::-webkit-scrollbar {
    width: 5px;
    overflow: scroll;
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px grey;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 15px;
}
::-webkit-scrollbar-thumb:hover {
    background: grey;
}

div.aparecible div.eventos{
    width: 100%;
    align-content: center;
    z-index: 30;
    border-top: 1px solid #d3d3d3;
}

.lista-labels-configuracion{
    max-width: 525px;
}
.label-configuracion{
    font-size: 17px;
    margin-right: 3px;
    margin-bottom: 2px;
    font-weight: bolder;
    padding: 5px;
    height: 24px;
    background-color: #ffed00 !important;
}
@media (min-width: 300px) {
    div.aparecible{
        position: absolute;
        top: 50%;
        transition: bottom 2s ease 0s;
        z-index: 20;
    }
    div.aparecible div.eventos{
        display: block;
        z-index: 30;
    }

    div.configuration-manager{
        /*min-width: 560px;*/
        /*max-width: 560px;*/
    }
    .texto_grande_1{
        font-size: 33px !important;
    }
    .texto_grande_2{
        font-size: 28px !important;
    }
    .lista-labels-configuracion{
        max-width: 525px;
    }


}

@media (min-width: 900px) {
    div.aparecible{
        position: relative;
        bottom: auto;
    }
    div.aparecible div.eventos{
        display: none !important;
    }

    div.configuration-manager{
        /*min-width: 700px;*/
        /*max-width: none;*/
    }
    .texto_grande_1{
        font-size: unset;
    }
    .texto_grande_2{
        font-size: unset;
    }
    .lista-labels-configuracion{
        max-width: none;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 950px) {

    div.configuration-layout-scrollables{
        height: auto;
    }
}

/*X-Large devices (large desktops, 1200px and up)*/
/*@media (min-width: 1200px) { ... }*/

/*XX-Large devices (larger desktops, 1400px and up)*/
/*@media (min-width: 1400px) { ... }*/

:root {
    --prm-color: #FFED00;
    --prm-gray: #b1b1b1;
}

/* CSS */
.steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}

.step-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: var(--prm-gray);
    transition: .4s;
}

.step-button[aria-expanded="true"] {
    width: 60px;
    height: 60px;
    background-color: var(--prm-color);
    color: #fff;
}

.done {
    background-color: var(--prm-color);
    color: #fff;
}

.step-item {
    z-index: 10;
    text-align: center;
    max-width: 50px;
}
.step-title-carrito{
    margin-left: 5%;
}
.step-title-resumen{
    margin-left: -13%;
}
.step-title-completado{
    margin-left: -33%;
}

#progress {
    -webkit-appearance:none;
    position: absolute;
    width: 95%;
    z-index: 5;
    height: 10px;
    margin-left: 18px;
    margin-bottom: 18px;
}

/* to customize progress bar */
#progress::-webkit-progress-value {
    background-color: var(--prm-color);
    transition: .5s ease;
}

#progress::-webkit-progress-bar {
    background-color: var(--prm-gray);

}