.number-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
    margin: 0 10px;
    cursor: pointer; /* Asegura que el hover sea interactivo */
}

.placeholder2::placeholder{
    opacity: 0.6;
}

.placeholder2{
    opacity: 1;
}

.number-circle span {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background-color: var(--primary--color); /* Asegúrate de que esta variable esté definida */
    text-align: center;
    font-weight: bold;
    margin-right: 10px;
    color: white;
    font-size: 3rem;
}
.circle-step-border {
    border: 3px solid var(--secundary--color); ;
}
.title-step::after {
    content: '';
    position: absolute;
    bottom: 19px; /* Ajusta la distancia desde la parte inferior del texto */
    left: 90px;
    width: 12%; /* La línea abarcará  */
    height: 5px;
    background-color: var(--primary--color); /* Color predeterminado */
}


.slick-colegios-container .prev,
.slick-colegios-container .next {
    position: absolute;
    top: 59%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajusta para que el centro del elemento esté alineado */
    z-index: 1; /* Asegura que las flechas estén por encima del contenido */
}


.title-step.active-line::after {
    background-color: var(--secundary--color); /* Cambia al color amarillo */
}

.div-sidebar-step {
    position: relative; /* Necesario para posicionar el pseudo-elemento */
}
.number-circle a {
    text-decoration: none; 
    color: inherit; /* Hereda el color del elemento padre */
    display: block;
}
.box-yellow{
    background-color: var(--secundary--color);
    
}
#numbers .formcolor{
    background-color: var(--primary--color);
    color: white;
    font-weight: bold;
    box-shadow: none;
}

#numbers .fa-calendar{
    display: inline-block;
    background-color: var(--secundary--color);
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    color: white;
    text-align: center;

}
#numbers li{
    font-family: "MontserratBold";

}
.modal-content {
    border-radius: 20px; /* Ajusta el valor para hacer los contornos más redondeados */
}
.btn-modal{
    border-radius: 20px !important;
    
   
}
.student-card{
    background-color: #EBEBEB;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!NUMBERSl!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.btnforms{
    border-radius: 25px !important;
    width: 14rem !important;
   
}
.img-map{
    padding: 6rem;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!INFORMATIONl!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!form1!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.separator {
  
    height: 6px; /* Ajusta el grosor de la línea */
    background: var(--primary--color) ; /* Color de la línea */ ;
    border: none; /* Elimina cualquier borde predeterminado */
    margin: 1rem 0; /* Ajusta el espacio alrededor de la línea */
    opacity: 1;
   
}
.acudiente-form .form-check-input:checked{
    background-color: var(--secundary--color);
    border-color: var(--secundary--color) ;
}

.agregar{
    color: var(--secundary--color);
} 
.link{
    text-decoration: none;
    color: var(--secundary--color);
}
.card-subt{
 font-weight: bold;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!form2!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
#folios .card{
    border-left: 4px solid var(--secundary--color);
   border-radius: 0;
}
#folios p {
    font-family: 'MontserratMedium';
}
.line-card{
    width: 10%;
    border-top: 10px solid var(--secundary--color);
    opacity: 1;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!form3!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.form-separator{
    background-color: var(--primary--color);
    color: white;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!Fform5!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.card-line{
    border-left: 4px solid var(--secundary--color);
    border-radius: 0;
}
.newstullink{
 align-items: center !important;
}

.scroll-container {
    height: 500px !important; /* Aumenta la altura del contenedor */
    overflow-y: auto; /* Habilita el desplazamiento vertical */
    border: 1px solid #ddd; /* Opcional: agrega un borde */
    padding: 15px; /* Espaciado interno */
    background-color: #f8f9fa; /* Fondo claro */
}

/*========== SELECT2 CUSTOMIZATION ==========*/
.select2-container .select2-selection--single {
    height: auto !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid var(--bs-border-color);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
}

.stepOne span.select2-container--default .select2-selection--single{
    background: var(--primary--color);
}

.stepOne span.select2-container--default span.select2-selection--single span.select2-selection__rendered,
.stepOne span.select2-container--default span.select2-selection--single span.select2-selection__placeholder,
.stepOne span.select2-container--default span.select2-selection--single span.select2-selection__arrow b,
.stepOne span.select2-container--default span.select2-selection--single span button span{
    color: var(--background--color);
}

/*.stepOne span.select2-container--default li.select2-results__option--highlighted.select2-results__option--selectable {*/
/*    background-color: var(--secundary--color) !important;*/
/*}*/

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    /*background-color: var(--primary--text--color) !important;*/
    background-color: var(--secundary--color) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 43px !important;
}

.select2-container {
    width: 100% !important;
}

.select2-search__field {
    border-radius: 4px !important;
}

.select2-dropdown {
    border-radius: 8px !important;
}

/*=========AUTOCOMPLETE CUSTOMIZATION===================*/

.autocomplete {
    position: relative;
    width: 100%;
}

.autocomplete input {
    width: 100%;
    box-sizing: border-box;
}

.autocomplete .list-group {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 1000;
    margin-top: 2px;
    padding: 0;
}

.autocomplete .list-group-item-action {
    padding: 10px;
    cursor: pointer;
}

.autocomplete .list-group-item-action:hover,
.autocomplete .list-group-item-action.active {
    background-color: #007bff;
    color: white;
}

/*TAB BTN*/

button.tab-btn{
    color: var(--primary--color);
}

button.tab-btn.active{
    color: var(--background--color);
    background: var(--primary--color);
}