footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}

/* Estilos específicos para pantallas más pequeñas (responsive) */
@media (max-width: 768px) {
header, footer {
padding: 5px;
}

.content {
padding: 10px;
}
}
header {
background-color: #333;
color: #fff;
text-align: center;
}


/* Contenido principal */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.card {
margin-top: 20px;
}

.card-title {
font-weight: bold;
}
/* public/css/login.css */

/* Estilos para el contenedor del formulario */
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}

/* Estilos para los campos de entrada */
.login-container input[type="email"],
.login-container input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}

/* Estilos para el bot贸n de inicio de sesi贸n */
.login-container button[type="submit"] {
width: 100%;
padding: 10px;
background: #0a66c2;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.bg-image {
background-size: cover;
background-position: center;
height: 300px;
color: #fff;
display: flex;
align-items: center;
}


/* Estilos adicionales para el formulario */
#registration-form {
max-width: 400px;
margin: 0 auto;
height: 200px;
}

#registration-form label {
margin-top: 10px;
}

#registration-form button[type="submit"] {
margin-top: 20px;
}


body {
font-family: 'Montserrat', sans-serif;
background-image: url('/style/img/fondo3.jpg'); /* Reemplaza 'ruta-de-la-imagen.jpg' con la ubicación de tu imagen */
background-size: cover; /* Ajusta el tamaño de la imagen al contenedor */
background-repeat: no-repeat; /* Evita la repetición de la imagen */
background-position: center center; /* Centra la imagen en el cuerpo */
margin: 0;
padding: 0;

}


.u-form-group button{
width:50%;
background-color: #1CB94E;
border: none;
outline: none;
color: #fff;
font-size: 14px;
font-weight: normal;
padding: 14px 0;
border-radius: 2px;
text-transform: uppercase;
}

/*estilos del registro de candidato*/

@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

.registrobody {
padding-bottom: 100px; /* Agrega un margen inferior para el footer */
}

#footeregistro {
position: fixed;
bottom: 0;
left: 0; /* Agrega esta l铆nea para alinear el footer a la izquierda */
width: 100%;
height: 100px;
background-color: #f5f5f5;
}

/*form styles*/
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;

/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea, #msform select{
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px;
margin: 10px 5px;
text-decoration: none;
font-size: 14px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {

content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}

.social-icons a {
margin-right: 10px;
}

.icon {
font-size: 30px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}


#button-search {
    background-color: #D45500;
    height: 30px;
    color: white;
    text-align: center;
     line-height: 10px;
}
/*PORGRESS---------------------------------------*/
 .step-indicator {
        list-style: none;
        padding: 0;
        display: flex;
        justify-content: center;
    }

    .step-indicator div {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20px;
    }

    .step {
        width: 30px;
        height: 30px;
        background: #eee;
        border: 1px solid #ccc;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        font-weight: bold;
    }

    .completed {
        background: #5cb85c;
        /* Green color for completed steps */
        color: #fff;
        border: none;
    }

    .proceso {
        background: #0106ff;
        /* Green color for completed steps */
        color: #fff;
        border: none;
    }

    .inscrito {
        background: #ffffff;
        /* Green color for completed steps */
        color: #000000;
        border: none;
    }

    .cvvisto {
        background: #706f6f;
        /* Green color for completed steps */
        color: #fff;
        border: none;
    }
        .descartado {
      background: #ff0101; /* Green color for completed steps */
        /* Green color for completed steps */
        color: #fff;
        border: none;
    }
    
    
    /* Para pantallas con un ancho máximo de 770px */
@media (max-width: 770px) {
    .no-gutters .col-md-2 {
        flex-basis: auto !important; /* Establecer el ancho automático para que las columnas se muestren horizontalmente */
        max-width: auto !important;
    }
    .no-gutters .col-md-2 .contenedorImg {
       /* width: 100% !important;
        height: auto !important;*/
    }

    .no-gutters .d-flex.flex-column {
        flex-direction: row; /* Cambiar la dirección del flex-container a fila */
    }
    
}

/* Asegura que las imágenes tengan un tamaño máximo en pantallas pequeñas */
@media (max-width: 770px) {
    .no-gutters .col-md-2 img {
       /* max-width: 100%;  Las imágenes ocuparán todo el ancho de su contenedor */
        /*height: auto;  La altura se ajustará automáticamente para mantener la proporción */
    }
    
}
@media (max-width: 770px) {
    .no-gutters {
        --tw-bg-opacity: 1;
        background-color: rgb(255, 255, 255);
    }
    .no-gutters div p,
    .no-gutters div h4,
    .no-gutters div span {
        text-align: left !important;
    }
    .no-gutters div h4 {
        color: #333 !important;
        font-weight: 300;
    }
    .no-gutters div span {
        color: grey !important;
        font-size: small;
    }
    .no-gutters .ocultar-col-sm {
        display: none !important;
    }
    .no-gutters {
        margin-left: 5px !important;
    }
     .no-gutters .column_logo_sm{
        justify-content: start!important;
        padding: 0 10px 0 10px !important;
    }
    
}

@media (max-width: 577px) {
    .no-gutters .col-md-2 {
        /* background-color: #b91c7a !important; */
    }
    .no-gutters .col-sm-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .no-gutters .ocultar-col-sm {
        display: none !important;
    }
    .no-gutters {
        margin-left: 5px !important;
    }
    .col-sm-9 p {
        /* color: red !important; */
        font-size: 13px !important;
    }
    .card-body {
        padding: 0 !important;
    }
    [role="main"] {
        padding: 0 !important;
    }
}

/* Personalización para que el modal aparezca de derecha a izquierda */
.modal.modalDetallesOfertaClass.show {
    transition: transform 0.5s;
    transform: translateX(0);
}
.modalDialogDetallesOferta .contentModal-dOferta{
    position: relative !important;
}
.conatinerHeaderOferta {
    background-color:white;
    position: sticky !important;
    top: 0;
    z-index: 100;
    /* border-bottom: 1.8px solid #d2d2d2 !important; */
}
.modalHeader-dOferta{
    border: none !important;
    /* background-color: #27ae60; */
    padding: 1rem 2rem 5px 2rem !important;
}
.btnAplicarOferta{
    font-size: 14px !important;
}
.modal.modalDetallesOfertaClass {
    transform: translateX(100%);
}
.subEncabezadoModal{
    padding: 0 2rem 1rem;
    border-bottom: 2px solid #ccc !important;
    
}
.modalDialogDetallesOferta {
    height: 100vh;
    margin-right: 0 !important;
    margin-top: 0 !important;
    background-color: white;
}

.contentModal-dOferta {
    height: auto;
}

.card100vh {
    height: 100vh;
}

@media (min-width: 576px) {
    .modalDialogDetallesOferta {
        max-width: 50% !important;
        margin: 1.75rem auto;
        transition: max-width 0.3s ease, margin 0.3s ease;
    }
}

.pl-6 {
    padding-left: 2rem !important /* 24px */;
}
.formBtnAplicarOferta{
    display: inline-block !important;
    /* background: blue !important; */
}
.containerDatosEmpresa{
    display: inline-block !important;
    
}