.slide-in-fwd-center {
        -webkit-animation: slide-in-fwd-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-fwd-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-fwd-center {
        0% {
                -webkit-transform: translateZ(-1400px);
                transform: translateZ(-1400px);
                opacity: 0;
        }

        100% {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                opacity: 1;
        }
}

@keyframes slide-in-fwd-center {
        0% {
                -webkit-transform: translateZ(-1400px);
                transform: translateZ(-1400px);
                opacity: 0;
        }

        100% {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                opacity: 1;
        }
}

.bounce-in-top {
        -webkit-animation: bounce-in-top 1.1s both;
        animation: bounce-in-top 1.1s both;
}

@-webkit-keyframes bounce-in-top {
        0% {
                -webkit-transform: translateY(-500px);
                transform: translateY(-500px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
                opacity: 0;
        }

        38% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
                opacity: 1;
        }

        55% {
                -webkit-transform: translateY(-65px);
                transform: translateY(-65px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        72% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }

        81% {
                -webkit-transform: translateY(-28px);
                transform: translateY(-28px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        90% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }

        95% {
                -webkit-transform: translateY(-8px);
                transform: translateY(-8px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        100% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }
}

@keyframes bounce-in-top {
        0% {
                -webkit-transform: translateY(-500px);
                transform: translateY(-500px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
                opacity: 0;
        }

        38% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
                opacity: 1;
        }

        55% {
                -webkit-transform: translateY(-65px);
                transform: translateY(-65px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        72% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }

        81% {
                -webkit-transform: translateY(-28px);
                transform: translateY(-28px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        90% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }

        95% {
                -webkit-transform: translateY(-8px);
                transform: translateY(-8px);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        }

        100% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        }
}

.slide-in-bottom {
        -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bottom {
        0% {
                -webkit-transform: translateY(1000px);
                transform: translateY(1000px);
                opacity: 0;
        }

        100% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                opacity: 1;
        }
}

@keyframes slide-in-bottom {
        0% {
                -webkit-transform: translateY(1000px);
                transform: translateY(1000px);
                opacity: 0;
        }

        100% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                opacity: 1;
        }
}

/* SIRVE PARA PONER UN IV SEMI TRANSPARENTE EN TODA LA PANTALLA*/
#overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Fondo semi transparente */
        background: rgba(0, 0, 0, 0.5);
        z-index: 10;
}

#contentDiv {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgb(13,29,65);
        padding: 20px;
        border-radius: 8px;
        z-index: 20;
}

#mensajeDiv, #mensaje_vendido_Div, #mensaje_no_existente_Div, #mensaje_cobro_rechazado_Div {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        /*left: 50%;*/
        /*transform: translate(-50%, -50%);*/
        /*background: rgb(13,29,65);*/
        padding: 20px;
        border-radius: 8px;
        z-index: 20;
}

.card_contador {
        position: relative;
        padding: 1.6rem 3.8rem 1.6rem 1.8rem;
        border: 1px solid #222;
        font-size: 1.4rem;
        line-height: 1.75;
        background-color: transparent;
        border-style: dashed;
        border-color: #cacbcc;
        color: #0d1c40;
}



@import url('//fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap');

.cargando {
        position: relative;
        color: #FFF;
        margin-top: 12em;
        margin: 1em;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        /*font-size-adjust: 10;*/
}

#contenedor {
        background-color: #00000000;
        display: grid;
        place-content: center;
        height: 15vh;
        width: 15vh;
        color: #000;
}

.contenedor-loader {
        height:8em;
}

.loader,
.loader:before,
.loader:after {
        background: #FFF;
        animation: cargando 1s infinite ease-in-out;
        width: 1em;
        height: 1em;
}

.loader:before,
.loader:after {
        position: absolute;
        top: 0;
        content: '';
}

.loader:before {
        left: -1.5em;
}

.loader {
        text-indent: -9999em;
        margin: 40% auto;
        position: relative;
        font-size: 11px;
        animation-delay: 0.16s;
}

.loader:after {
        left: 1.5em;
        animation-delay: 0.32s;
}

@keyframes cargando {

        0%,
        80%,
        100% {
                box-shadow: 0 0 #FFF;
                height: 4em;
        }

        40% {
                box-shadow: 0 -2em #ffffff;
                height: 5em;
        }
}


.loader_sm,
.loader_sm:before,
.loader_sm:after {
  background: #FFF;
  animation: cargando_sm 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader_sm:before,
.loader_sm:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader_sm:before {
  left: -1.5em;
}
.loader_sm {
  text-indent: -9999em;
  /*margin: 10% auto;*/
  position: relative;
  font-size: 3px;
  animation-delay: 0.16s;
}
.loader_sm:after {
  left: 1.5em;
  animation-delay: 0.32s;
}
        @keyframes cargando_sm {

                0%,
                80%,
                100% {
                        box-shadow: 0 0 #FFF;
                        height: 4em;
                }

                40% {
                        box-shadow: 0 -2em #ffffff;
                        height: 5em;
                }
        }


/* HTML: <div class="loader"></div> */
.loader_sm2 {
        width: 13px;
        aspect-ratio: 1;
        border-radius: 50%;
        clip-path: inset(-45px);
        box-shadow: -60px 15px,-60px 15px,-60px 15px;
        transform: translateY(-15px);
        animation: l19 1s infinite linear;
      }
      @keyframes l19{ 
        16.67% {box-shadow:-60px 15px,-60px 15px,19px 15px}
        33.33% {box-shadow:-60px 15px,  0px 15px,19px 15px}
        40%,60%{box-shadow:-19px 15px,  0px 15px,19px 15px}
        66.67% {box-shadow:-19px 15px,  0px 15px,60px 15px}
        83.33% {box-shadow:-19px 15px, 60px 15px,60px 15px}
        100%   {box-shadow: 60px 15px, 60px 15px,60px 15px}
      }


 

  #reader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* Usa porcentaje para adaptarse al ancho de la pantalla */
    max-width: 640px; /* Limita el ancho máximo en pantallas grandes */
    aspect-ratio: 1 / 1; /* Mantiene el div como un cuadrado */
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1000;
    margin: 0 ;
    /* Asegura que no se salga de la pantalla en móviles */
    max-height: 90vh;
    overflow: auto;
    display: none;
  }

  /* Media query para ajustes específicos en móviles */
  @media screen and (max-width: 480px) {
    #reader {
      width: 95%; /* Aumenta ligeramente el ancho en móviles */
      margin: 10px auto;
    }
  }

  /* Media query para pantallas medianas (tabletas y PC pequeñas) */
  @media screen and (min-width: 768px) and (max-width: 1024px) {
        #reader {
            width: 50%; /* Reduce el ancho en pantallas medianas */
            max-width: 600px; /* Ajusta el tamaño máximo */
        }
    }
    
    /* Media query para pantallas grandes (PC) */
    @media screen and (min-width: 1025px) {
        #reader {
            width: 50%; /* Reduce el ancho en pantallas grandes */
            max-width: 640px; /* Ajusta el tamaño máximo para una mejor visualización */
        }
    }


.alert-sticky-top-end {
        position: fixed;
        right: 10px;
        top: 10px;
        z-index: 2023;
        width: fit-content;
      }
@media (max-width: 767px) {
        .alert-sticky-top-end
        {
                display: inline-block;
        }
}