.question-container {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.question-container.active {
    display: block;
    opacity: 1;
}

.navigation-buttons {
    text-align: center;
}

.error-message {
    color: red;
    font-size: 1rem;
    display: none ;
    padding-top: 1.5rem !important;
}

.progress-bar {
    transition: width 0.3s ease;
}

.btn:disabled {
    opacity: 0.15;
    cursor: not-allowed;
}


h5{
    font-size: 1.15rem;
    font-weight: bold;
    color: #313131;
    padding-bottom:0.5rem;
}


/* Estilos para el botón "Siguiente" */
#nextBtn {
    border: 1px solid #83C667;
    background-color: #83C667;
    color: #FFF;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#nextBtn:hover {
    background-color: #FF3360; /* Color más oscuro al pasar el ratón */
}

/* Estilos para el botón "Atrás" */
#backBtn {
    border: 1px solid #83C667;
    background-color: transparent;
    color: #83C667;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#backBtn:hover {
    background-color: rgba(255, 78, 106, 0.1); /* Fondo suave al pasar el ratón */
}

/* Estilos para el botón "enviar" */
#submitBtn {
    border: 1px solid #83C667;
    background-color: #83C667;
    color: #FFF;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative; /* Para colocar correctamente el pseudoelemento */
}

/* Agregar check al botón */
#submitBtn::after {
    content: '✓'; /* Check */
    font-size: 18px;
    margin-left: 8px; /* Separación entre el texto y el check */
    transition: margin-left 0.3s ease;
}

/* Efecto hover para que el check se desplace ligeramente a la derecha */
#submitBtn:hover::after {
    margin-left: 12px;
}

.progress {
    display: -ms-flexbox;
    display: flex;
    height: 0.25rem;
    overflow: hidden;
    line-height: 0;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: 1rem;
}

.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #19009B;
    transition: width .6s ease;
}


label {
    font-size: 1.1rem;
    display: inline-block;
    margin-bottom: .5rem;
    padding-left: 0.75rem;
}


/* Aumentar el tamaño de los radio buttons */
input[type="radio"] {
    transform: scale(1.5); /* Escalar el tamaño */
    margin-right: 10px; /* Espacio entre el radio button y el label */
    cursor: pointer; /* Cambiar el cursor a pointer */
}

/* Estilo personalizado cuando el radio button está marcado */
input[type="radio"]:checked {
    accent-color: #19009B; /* Cambiar el color del radio button cuando está seleccionado */
}

/* Aumentar el tamaño de los checkboxes */
input[type="checkbox"] {
    transform: scale(1.5); /* Escalar el tamaño */
    margin-right: 10px; /* Espacio entre el checkbox y el label */
    cursor: pointer; /* Cambiar el cursor a pointer */
}

/* Estilo personalizado cuando el checkbox está marcado */
input[type="checkbox"]:checked {
    accent-color: #19009B; /* Cambiar el color del checkbox cuando está seleccionado */
}



/* Opcional: Cambiar el color del texto del label al seleccionar */
input[type="radio"]:checked + label {
    color: #19009B;
}


.form-check-input {
    position: absolute;
    margin-top: 0.425rem;
    margin-left: -1.25rem;
}


.form-check {
    position: relative;
    display: block;
    padding-left: 2rem;
    padding-top: 0.7rem;
}


/* Ocultar el input file original */
input[type="file"] {
    display: none; /* Ocultar el input nativo */
}

/* Estilo para el label que actúa como botón */
.custom-file-upload {
    display: inline-block;
    padding: 10px 20px;
    background-color: #19009B; /* Color de fondo azul */
    color: #FFF; /* Color de texto blanco */
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer; /* Cursor en forma de mano */
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #19009B;
    transition: background-color 0.3s ease; /* Transición suave */
}

/* Efecto hover para el label */
.custom-file-upload:hover {
    background-color: #150075; /* Fondo más oscuro en hover */
}

/* Mostrar el nombre del archivo seleccionado */
.file-name {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}



.buscarBtn {
    border: 1px solid #83C667;
    background-color: #83C667;
    color: #FFF;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.buscarBtn:hover {
    background-color: #FF3360; /* Color más oscuro al pasar el ratón */
}