/*TITULO*/
.list-01{
    padding-left: 3rem;
    padding-right: 3rem;
}
.list-01 h3{
    font-weight: 500;
    color: var(--color-texto-base)!important;
}

/*COLUMNA BUSCAR*/
.list-02{
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}
.col_buscar label{
    font-size: 1.2rem!important;
    font-weight: 500;
    color: black;    
}
.btn_buscar{
    color: var(--color-temp-btn)!important;
    font-size: 14px!important;
    background-color: var(--color-primario)!important;
    border-color: var(--color-primario)!important;
    --hover: var(--color-primario)!important;
    margin-bottom: 1rem;
}
.col_ruleta img{
    max-height: 5rem;
}
/*FIN COLUMNA BUSCAR*/


/*VENTA CERRADA*/
.venta-cerrada{
    padding-top: 2rem!important;
    padding-bottom: 2rem!important;
}
.venta-cerrada h1{
    color: var(--color-texto-base)!important;
    font-size: 2rem;
    font-weight: 500;
}
.venta-cerrada h2{
    color: var(--color-texto-base)!important;
    font-size: 1.5rem;
    font-weight: 500;
}       
.venta-cerrada h3{
    color: var(--color-primario)!important;
    font-size: 2.5rem;
    font-weight: 500;
}



/*CONTENEDOR LISTA DE NUMEROS*/
.list-03{
    padding-left: .1rem;
    padding-right: .1rem;
}
.play-card-body button{
    font-weight: 600;
    border-radius: 10px;
    font-size: 0.9rem;
    background-color: #fff;
    color:  var(--color-primario);
    margin-right: 2px;
    margin-bottom: 2px;
    cursor: pointer;
    width: 3.5rem;
    height: 2rem;
    border: solid 1px var(--color-primario);
    padding: 0.2rem 0.3rem;
}

.btn_active{
    background-color: var(--color-primario)!important;
    color: var(--color-temp-btn)!important;
}

/*NUMERACION*/
.play-card-body ul{
    padding-left: 0!important;
}
.number-list li {
    color: var(--color-primario);
    border: 1px solid #9fa1a7;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    margin: 1px;
      margin-top: 1px;
      margin-bottom: 1px;
    border-radius: 15%;
    -webkit-border-radius: 15%;
}


/*PAGINACION LISTA*/
.pagination {
    --bs-pagination-padding-x: 0.6rem!important;
    --bs-pagination-active-bg: var(--color-primario)!important;
    --bs-pagination-active-border-color: var(--color-primario)!important;
    display: inline-flex!important;
  }
  .pagination > a, .pagination > a:hover, .pagination > a:focus, .pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    color: var(--color-primario)!important;
  }
  .pagination > .active > a, body.dark .pagination > .active > a {
    color: var(--color-texto) !important;
  }
  .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .pagination .page-item.active .page-link {
    background-color: var(--color-primario)!important;
    border-color: var(--color-primario)!important;
    color: var(--color-temp-btn)!important; 
  }

  .info_paginacion h5,h6{
    color: var(--color-primario)!important;
  }
/*SCROLL BOLETERA
.contenedor_numeros{
    overflow: auto;
    height: 600px;
    margin-bottom: 1rem;
}
*/


/*BOLETERO SUPERIOR*/
.boletero{
    background-color: var(--color-primario)!important;    
    position: fixed;
    padding-bottom: .4rem!important;
    padding-top: .4rem!important;
    bottom: 0;
    width: 100%;
    z-index: 100;
    display: none;
}
.boletero_boletos h4{
    color: var(--color-temp-btn) !important;
    font-weight: 600;
}
.boletero_boletos p{
    color: var(--color-temp-btn) !important;
    font-weight: 400;    
    font-size: 1rem;
    margin: 0;
}

.listado_numeros{
    background-color:var(--color-secundario)!important;
    padding-top: 1rem;
    padding-bottom: 1rem;    
}
.boletero_seleccionados{
    max-height: 60px;
    overflow: auto; 
}
.boletero_seleccionados .number-list li {
    width: 60px;
    height: 26px;
    line-height: 25px;
    background-color: #fff;
    margin-top: 1px;
    margin-bottom: 1px;
    color: rgba(51, 55, 69, 0.8);
    cursor: pointer;
}
.boletero-oportunidades{
    color: var(--color-menu) !important;
    max-height: 50px;
    overflow: auto;    
}

/*BOLETERO INFERIOR*/
.boletero_footer p{
    color: var(--color-temp-btn) !important;
    margin-bottom: .4rem!important;
}
.btn_apartar{
    background-color:var(--color-secundario)!important;
    border-color: var(--color-secundario)!important;
    --hover: var(--color-secundario)!important;
    color: var(--color-menu) !important;
    margin-top: .5rem;
    font-size: 1rem!important;
}
/*FIN BOLETERO*/




.lista_numeros_azar{
    background-color: var(--color-primario)!important;
    color: var(--color-temp-btn) !important;
    text-align: center;
    padding: .5rem;
    font-weight: 500;
}
.lista_numeros_azar p{
    color: var(--color-temp-btn) !important;
    font-weight: 500;
    font-size: 1rem;
}
.selected_numbers_modal{
    max-height:200px;
    overflow: auto;
}

/*MODAL RULETA*/
.ruleta{
    text-align: center;
}
.ruleta img{
    max-width: 20rem;
}


/*ESTILOS DEL MODAL PAGO*/
    .info_boleto p{
        color:black;
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: 500;
        text-align: center;
    }

    .form-group input::placeholder{
        color: #8a8a8a;    
    }

    .aviso_whats p{
        color: green;
        margin: 0;
        font-weight: 500;
    }

    .aviso_apartado p{
        color:red;
        margin: 0;
        font-weight: 500;
    }

    .modal_boton{
        background-color: var(--color-primario)!important;
        color: var(--color-temp-btn) !important;
        margin-top: 2rem;
        font-size: 1.2rem;
    }
/*FIN ESTILOS DEL MODAL PAGO*/


/*SWAL ALERT*/
.swal2-title{
    color: black!important;
}


.form-switch .form-check-input:checked {
    background-color: var(--color-primario)!important;
    border-color: var(--color-primario)!important;
  }