.modal-title {
    background-color: #ffffff;
    color: #333;
}

.modal-header {
    background-color: #ffffff;
    color: #333;
    border-bottom: 2px solid #ddd;
}

/* Estilos para los tabs */
.nav-tabs > li > a {
    color: #555;
    font-weight: bold;
    background: #f8f8f8;
    border-radius: 5px 5px 0 0;
}

.nav-tabs > li.active > a {
    background: #28a745 !important; /* Verde */
    color: #fff !important;
}

/* Botón de siguiente */
.btn-next {
    background-color: #28a745; /* Verde */
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-next:hover {
    background-color: #218838;
}

/* Checkbox */
.modal-body input[type="checkbox"] {
    margin-right: 5px;
}

/* Contenedor principal del paso a paso */
.step-container {
    display: flex;
}

/* Barra lateral con los pasos */
.step-sidebar {
    width: 25%;
    background: #f8f8f8;
    padding: 15px;
    border-right: 2px solid #ddd;
}

/* Estilos de los pasos */
.step-sidebar ul {
    list-style: none;
    padding: 0;
}

.step-sidebar ul li {
    display: flex;
    align-items: center;
    padding: 10px;
    font-weight: bold;
    color: #555;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.form-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}


.form-control 
{
	width: 100% !important;
}
    
/* Contenido del paso */
.step-content {
    width: 75%;
    padding: 20px;
    background: #fff;
}

.step-sidebar {
    width: 25%;
    background: #f8f8f8;
    padding: 15px;
    border-right: 2px solid #ddd;
    margin-right: 0; /* Reducir o eliminar el margen derecho */
}

/* Numeración de los pasos */
.step-sidebar ul li .step-number {
    width: 40px; /* Ancho del círculo */
    height: 40px; /* Altura del círculo (igual al ancho para mantener la forma circular) */
    background-color: #ddd; /* Color de fondo del círculo para pasos inactivos */
    color: #fff; /* Color del texto del número (blanco para contraste) */
    font-weight: bold;
    border-radius: 50%; /* Hace que el fondo sea un círculo perfecto */
    display: flex;
    justify-content: center; /* Centra horizontalmente el número */
    align-items: center; /* Centra verticalmente el número */
    margin-right: 5px; /* Reducir el margen derecho para acercar el texto al círculo */
    font-size: 16px; /* Tamaño del número (un poco más grande para ajustarse al círculo más grande) */
    border: 4px solid transparent; /* Borde transparente por defecto */
    transition: all 0.3s ease; /* Transición suave para efectos hover */
    
}

/* Cambio de estilo cuando el paso está activo */
.step-sidebar ul li.active .step-number {
    background-color: #28a745; /* Fondo verde para el círculo activo */
    color: #fff; /* Texto blanco para contraste */
    border: 4px solid #28a745; /* Borde verde más grueso para resaltar */
}

/* Efecto hover sobre los pasos no activos */
.step-sidebar ul li:not(.active):hover .step-number {
    background-color: #f0f0f0; /* Cambia el fondo del círculo al pasar el mouse */
    color: #555; /* Cambia el color del número */
    border: 4px solid #ddd; /* Borde gris claro al pasar el mouse */
}

/* Ajustar el espaciado entre el círculo y el texto */
.step-sidebar ul li {
    display: flex;
    align-items: center; /* Alinear verticalmente el círculo y el texto */
    padding: 10px;
    font-weight: bold;
    color: #555;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
    text-align: left; /* Alinear el texto a la*/
}