@import './header.css';

/* esitlos para el contenido de la página */

body {
    background-color: #ffffff;
    overflow-x: hidden !important;
    padding-top: 70px;
}

main {
    min-height: calc( 100vh - 142px);
}


/* estilos para los botones de la pagina */

.button,
.button-secundary {
    border: none;
    box-shadow: 0px 2px 3px #999;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: .64rem;
    padding: .5rem 1.6rem;
}

.button.big,
.button-secundary.big {
    align-items: center;
    border: none;
    box-shadow: 0px 2px 3px #999;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    height: 40px;
    font-size: 14px;
    justify-content: center;
    outline: none;
    padding: .2rem 1.2rem;
}


/* estilos para los botones de la pagina cuando le hagan hover */

.button:hover,
.button-secundary:hover {
    box-shadow: 0px 2px 3px #333;
    color: #fff;
}


/* esitlos para los botones, cabecera de ventana modal cuando el fondo de la web sea azul */

body.bg-orange .button,
body.bg-orange .modal-header {
    background-color: var(--active-button-color);
}


/* esitlos para los botones cuando el fondo de la web sea azul */

body.bg-blue .button,
body.bg-blue .modal-header {
    background-color: var(--color-blue);
}


/* esitlos para los botones cuando el fondo de la web sea verde */

body.bg-green .button,
body.bg-green .modal-header {
    background-color: var(--color-green);
}

/* esitlos para los badge cuando el fondo de la web sea verde */
.badge.bg-green{ background: var(--color-green);}

/* esitlos para los botones, cabecera de ventana modal cuando el fondo de la web sea azul */

body.bg-orange .button-secundary,
body.bg-orange .footer {
    background-color: var(--color-grey);
}


/* esitlos para los botones cuando el fondo de la web sea verde */

body.bg-green .button-secundary,
body.bg-green .footer {
    background-color: var(--color-yellow-green);
}


/* esitlos para los botones cuando el fondo de la web sea verde */

body.bg-blue .button-secundary,
body.bg-blue .footer {
    background-color: var(--color-lime-green);
}


/* estilos para el boton cuando sea outline */

body.bg-green .button.outline {
    background-color: transparent;
    border-radius: 20px;
    border: 3px solid var(--color-green);
    color: var(--color-green);
}


/* estilos para el boton cuando sea outline */

body.bg-orange .button.outline {
    background-color: transparent;
    border-radius: 20px;
    border: 3px solid var(--color-orange);
    color: var(--color-orange);
}


/* estilos para el boton cuando sea outline */

body.bg-green .button.white {
    color: var(--color-green);
}


/* estilos para el boton cuando sea outline */

body.bg-orange .button.white {
    color: var(--color-orange);
}


/******************* estilos para la función nueva oportunidad y documentos de usuario *******************/


/* estilos para el botón de nueva publicación */

.btn-new-opportunity {
    bottom: 30px;
    position: fixed;
    right: 50px;
    z-index: 99;
}


/* estilos para contenido del botón de nueva publicación */

.btn-new-opportunity .content-new-opportunity {
    align-items: center;
    background-color: var(--color-orange);
    border-radius: 50%;
    box-shadow: 0 0 8px #999;
    display: flex;
    height: 60px;
    justify-content: center;
    transition-duration: .5s;
    width: 60px;
}


/* estilos para el boton cuando sea el color verde  */

body.bg-green .btn-new-opportunity .content-new-opportunity {
    background-color: var(--color-green);
}

.btn-new-opportunity.expanded .content-new-opportunity {
    border-radius: 50px;
    color: white;
    width: 300px !important;
}


/* estilos para contenido del botón de nueva publicación cuando le hagan hover */

.btn-new-opportunity .content-new-opportunity:hover {
    background-color: var(--color-grey);
    transition-duration: .5s;
}


/* estilos para contenido del botón de nueva publicación cuando le hagan hover */

body.bg-green .btn-new-opportunity .content-new-opportunity:hover {
    background-color: var(--color-lime-green);
}


/* estilos para el contenedor del invitado */

#new_opportunity_modal .guest {
    align-items: center;
    background-color: var(--color-orange);
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    display: flex;
    margin: 7px;
    padding: 5px 10px;
    padding-right: 13px;
    transition-duration: .3s;
    width: auto;
}


/* estilos para el contenedor del invitado cuando le hagan hover */

#new_opportunity_modal .guest:hover {
    background-color: #E75151;
    box-shadow: 0 1px 4px #666;
    transition-duration: .3s;
}


/* estilos para el label de subir un archivo para la porpuesta de nueva publicación */

label.file-proposal,
label.file-postulate,
label.file-label-upload {
    border: 2px dashed #ccc;
    border-radius: 5px;
    color: #999;
    padding: 15px 10px;
    text-align: center;
    width: 100%;
}


/* estilos para cuando sea pdf para orange */

body.bg-orange .file-proposal.pdf,
body.bg-orange .file-postulate.pdf,
body.bg-orange .file-label-upload.pdf,
body.bg-orange .file-upload.pdf {
    background-color: var(--color-orange);
    border: 2px solid var(--color-orange);
    color: white;
}


/* estilos para cuando sea word para orange */

body.bg-orange .file-proposal.word,
body.bg-orange .file-postulate.word,
body.bg-orange .file-label-upload.word,
body.bg-orange .file-upload.word {
    background-color: var(--color-grey);
    border: 2px solid var(--color-grey);
    color: white;
}


/* estilos para cuando sea pdf para green */

body.bg-green .file-proposal.pdf,
body.bg-green .file-postulate.pdf,
body.bg-green .file-label-upload.pdf,
body.bg-green .file-upload.pdf {
    background-color: var(--color-green);
    border: 2px solid var(--color-green);
    color: white;
}


/* estilos para cuando sea word para green */

body.bg-green .file-proposal.word,
body.bg-green .file-postulate.word,
body.bg-green .file-label-upload.word,
body.bg-green .file-upload.word {
    background-color: var(--color-lime-green);
    border: 2px solid var(--color-lime-green);
    color: white;
}

body.bg-blue .file-label-upload.video,
body.bg-blue .file-upload.video {
    background-color: var(--color-blue);
    border: 2px solid var(--color-blue);
    color: white;
}


/* esitlos para el contenedor del archuvo subido */

.content-files-proposal .file-proposal,
.content-file-upload .file-upload {
    border-radius: 5px;
    padding: 20px 0px;
    text-align: center;
}


/* esitlos para el texto del contenedor del archuvo subido */

.content-files-proposal .file-proposal p,
.content-file-upload .file-upload p {
    font-size: 13px;
}


/* esitlos para el boton de eliminar el archivo subido */

.content-files-proposal .file-proposal span,
.content-file-upload .file-upload span {
    align-items: center;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 50%;
    color: #000;
    cursor: pointer;
    display: flex;
    height: 25px;
    justify-content: center;
    position: absolute;
    right: 20px;
    top: 5px;
    width: 25px;
}


/* esitlos para el boton de eliminar el archivo subido cuando le hagan hover */

.content-files-proposal .file-proposal span:hover,
.content-file-upload .file-upload span:hover {
    background-color: rgba(255, 255, 255, 1);
}


/* esitlos para los contenedores de documentos con datos */

.content-file-with-data,
.content-data-talent {
    border-bottom: 1px dashed #999;
    margin-bottom: 25px;
}


/* esitlos para los contenedores de documentos con datos ultimo registro */

.content-file-with-data:last-child,
.content-data-talent:last-child {
    border-bottom: none;
    margin-bottom: 0px;
    padding-bottom: 0;
}

.content-data-talent {
    padding-bottom: 25px;
}


/* estilos para el removedor de datos de talentos */

.content-data-talent .remove-data-talent {
    background-color: #FF7D7D;
    border-radius: 3px;
    color: black;
    cursor: pointer;
    display: block;
    padding: 7px;
    text-align: center;
    transition-duration: .3s;
    width: 100%;
}


/* estilos para el removedor de datos de talentos */

.content-data-talent .remove-data-talent:hover {
    background-color: #F93C3C;
    color: white;
    transition-duration: .3s;
}


/******************* fin estilos para la función nueva oportunidad y documentos de usuario *******************/


/******************* estilos para la función nueva oportunidad *******************/


/* estilos para la foto de la compañia de una tarjeta de publicación de oportunidades */

.photo-company-oportunity,
.photo-customer-postulation {
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    height: 60px;
    width: 60px;
}

.photo-customer-postulation {
    height: 80px;
    width: 80px;
    border: 7px solid #414544;
}


/* estilos para el estado de una tarjeta de publicación de oportunidades para el aliado saber su estado de postulación */

.status_application_allie,
.status_application_job {
    background-color: transparent;
    border-radius: 0 0 1.9rem 1.9rem;
    height: 10px;
    width: 50%;
    margin: auto;
}


/* estilos para el estado de una invitación privada */

.status_application_allie.invitation_private {
    background-color: var(--color-green);
    color: #fff;
    font-size: 13px;
    height: 28px;
    padding: 5px 10px;
}


/* estilos para el estado cuando se encuentra postulado el usuario desde la vista de aliado */

body.bg-green .status_application_allie.postulate,
body.bg-orange .status_application_allie.postulate,
body.bg-blue .status_application_job.postulate {
    background-color: var(--color-blue);
}


/* estilos para el estado cuando se encuentra aprovado el usuario desde la vista de aliado */

body.bg-green .status_application_allie.aproved {
    background-color: var(--color-green);
}


/* estilos para el estado cuando se encuentra rechazado el usuario desde la vista de aliado */

body.bg-green .status_application_allie.rejected {
    background-color: var(--color-lime-green);
}


/* estilos para el estado cuando se encuentra aprovado el usuario desde la vista de aliado */

body.bg-orange .status_application_allie.aproved {
    background-color: var(--color-orange);
}


/* estilos para el estado cuando se encuentra rechazado el usuario desde la vista de aliado */

body.bg-orange .status_application_allie.rejected {
    background-color: var(--color-grey);
}


/* estilos para el estado cuando se encuentra aprovado el usuario desde la vista de taletno */

.status_application_job.selected {
    background-color: #F7E83F;
}


/* estilos para el estado cuando se encuentra aprovado el usuario desde la vista de taletno */

.status_application_job.tested {
    background-color: #F79E3F;
}


/* estilos para el estado cuando se encuentra aprobado el usuario desde la vista de talento */

.status_application_job.aproved {
    background-color: #f1ac33;
}


/* estilos para el estado cuando se encuentra rechazado el usuario desde la vista de taletno */

.status_application_job.rejected {
    background-color: #866c35;
}


/******************* fin estilos para la función nueva oportunidad *******************/


/******************* estilos para las tarjetas de publicaciones *******************/


/* esitlos para los links de panels cuando están activos para green */

body.bg-green .nav-tabs .nav-item .nav-link,
body.bg-green .nav-tabs .nav-link {
    color: var(--color-green);
}


/* esitlos para los links de panels cuando están activos para orange */

body.bg-orange .nav-tabs .nav-item .nav-link,
body.bg-orange .nav-tabs .nav-link {
    color: var(--primary-text-color);
}
body.bg-orange .nav-tabs{
    background: var(--secondary-menu-color);
    border-radius: 20px;
}

/* esitlos para los links de panels cuando están activos para green */

body.bg-green .nav-tabs .nav-item.show .nav-link,
body.bg-green .nav-tabs .nav-link.active {
    background-color: var(--color-blue);
    color: #fff;
}


/* esitlos para los links de panels cuando están activos para orange */

body.bg-orange .nav-tabs .nav-item.show .nav-link,
body.bg-orange .nav-tabs .nav-link.active {
    background: var(--secondary-menu-color);
    color: var(--primary-text-color);
}


/* estilos para las fotos */

.container-photo-publication,
.container-photo-event {
    overflow: hidden;
    min-height: 0px;
    width: 100%;
}


/* función para validar si contiene imagenes */

.container-photo-publication.with-image,
.container-photo-event.with-image {
    overflow: hidden;
    height: 320px;
    margin-left: 6%;
    margin-right: 6%;
    border-radius: 2%;
}

.container-photo-publication.with-image img,
.container-photo-event.with-image img {
    height: 100%;
}


/* función para validar si contiene imagenes */

.container-photo-publication.with-image.allie,
.container-photo-event.with-image.allie {
    height: 200px;
}


/* estilos para las fotos */

.container-photo-publication .photo-publication,
.container-photo-event .photo-event {
    height: auto;
    width: 100%;
}

.photo-publication {
    margin-left: 6%;
    margin-right: 6%;
    /* margin: 6%; */
    width: inherit;
}


/* estilso para el titulo de la publicacion */

.container-photo-publication .title-publicacion,
.container-photo-event .title-publicacion {
    align-items: center;
    bottom: 0;
    color: #fff;
    display: flex;
    height: 60px;
    padding: 10px;
    position: absolute;
    width: 100%;
}


/* validamos si es para de fondo verde */

body.bg-green .container-photo-publication .title-publicacion {
    background-color: var(--color-green);
}


/* validamos si es para de fondo naranja */

body.bg-orange .container-photo-publication .title-publicacion {
    background-color: var(--color-orange);
}


/******************* fin estilos para las tarjetas de publicaciones *******************/


/* estilos para el textarea de nuevo comentario */

.textarea_new_comment {
    border: none;
    outline: none;
    resize: none;
    width: 100%;
}


/* estilos para el textarea de nueva respuesta */

.textarea_new_response {
    border: 1px solid #ccc;
    border-radius: 5px;
    min-height: 10px;
    outline: none;
    padding: 10px;
    resize: none;
    width: 100%;
}


/* esitlos para los links de propuestas ya vistas por el cliente*/

.link-proposal-attached:visited {
    color: #000;
}


/******************* estilos para las el centro de mensajes *******************/


/* contenedor del lsitado de contactos */

.col-contact-list {
    z-index: 8;
}


/* estilos para el contacto de contactos y chat */

.contact-list,
.content-chat {
    /* box-shadow: 0px 0px 4px #999; */
    box-shadow: none !important;
    background-color: #fff;
    overflow: hidden;
    border-radius: 0px 20px 0px 20px;
}


/* estilos para el contenedor de contactos*/

.contact-list {
    max-height: 350px;
    border-radius: 20px 0px 0px 20px;
}


/* estilos para el titulo de la cabecera de contactos */

.contact-list .title-contact-list,
.content-chat .title-content-chat {
    border: none;
    height: 50px;
}

.contact-list .title-contact-list p {
    color: var(--primary-text-color) !important;
}

/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea azul */

body.bg-orange .contact-list .title-contact-list {
    background-color: var(--menu-bar-color);
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea azul */

body.bg-blue .contact-list .title-contact-list {
    background-color: var(--color-blue);
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea verde */

body.bg-green .contact-list .title-contact-list {
    background-color: var(--color-green);
}


/* estilos para el titulo de la cabecera de chat cuando el fondo de la web sea azul */

body.bg-orange .content-chat .title-content-chat {
    background-color: var(--menu-bar-color);
    color: #fff;
    border-radius: 0px 20px 20px 0px;
}


/* estilos para el titulo de la cabecera de chat cuando el fondo de la web sea azul */

body.bg-blue .content-chat .title-content-chat {
    background-color: #1B61A3;
    color: #fff;
}


/* estilos para el titulo de la cabecera de chat cuando el fondo de la web sea verde */

body.bg-green .content-chat .title-content-chat {
    background-color: #257072;
    color: #fff;
}


/* estilos para el contenedor de mensajes sin leer */

.content-messages-without-read {
    align-items: center;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    font-size: 10px;
    height: 30px;
    width: 30px;
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea azul */

body.bg-orange .content-messages-without-read {
    background-color: var(--color-orange);
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea azul */

body.bg-blue .content-messages-without-read {
    background-color: var(--color-blue);
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea verde */

body.bg-green .content-messages-without-read {
    background-color: var(--color-green);
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea azul */

body.bg-orange .contact-list .title-contact-list .content-messages-without-read {
    background-color: #fff;
    color: var(--color-orange);
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea azul */

body.bg-blue .contact-list .title-contact-list .content-messages-without-read {
    background-color: #fff;
    color: var(--color-blue);
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea verde */

body.bg-green .contact-list .title-contact-list .content-messages-without-read {
    background-color: #fff;
    color: var(--color-green);
}


/* estilos para el contenedor de la lista */

.contact-list .content-contact-list {
    max-height: 300px;
    overflow: auto;
}


/* contenedor de la caja de busqueda */

.content-search {
    border-bottom: 1px solid #eee;
    padding: 10px;
    height: 55px;
    background-color: var(--menu-bar-color) !important;
}


/* estilos para la caja de busqueda */
.content-search input {
    border: 1px solid var(--color-orange);
    border-radius: 20px;
    color: #666;
    display: block;
    font-size: 14px;
    outline: none;
    padding: 4px 15px;
    width: 100%;
    background-color: var(--color-orange) !important;
}
.content-search input::placeholder {
    color: white !important;
}

.accordion.md-accordion.accordion-1 .card .content-contacts {
    background-color: #F3F3F3;
    box-shadow: 0px 0px 3px inset #999;
    max-height: 350px;
    overflow: auto;
}

.content-my-messages .card {
    background-color: var(--menu-bar-color);
    padding: 5px;
}
.content-my-messages .card .card-header{
    background-color: white;
    border-radius: 25px !important;
}
/* estilos para cada item de los contactos de la lista */

.accordion.md-accordion.accordion-1 .card .card-header,
.accordion.md-accordion.accordion-1 .card .content-contacts .card-body .contact,
.contact-talent {
    border-bottom: 1px solid #eee;
    padding: 10px;
}


/* 3esitlos para el contato dela lista */

.accordion.md-accordion.accordion-1 .card .content-contacts .card-body .contact {
    border-color: #ddd;
    color: #666;
}


/* 3esitlos para el ultimo cotenedor de contactos y cada contato dela lista */

.accordion.md-accordion.accordion-1 .card .card-header:last-child,
.accordion.md-accordion.accordion-1 .card .content-contacts .card-body .contact:last-child {
    border-bottom: none;
}


/* estilos para cada item de los contactos de la lista cuando le hagan hover */

.accordion.md-accordion.accordion-1 .card .card-header:hover {
    background-color: #F4F4F4;
}


/* estilos para la imagen de perfil del chat */

.content-chat .title-content-chat img {
    border-radius: 50%;
    height: 32px;
    margin-right: 5px;
    width: 32px;
}


/* estilos para el mensaje de busqueda de mensajes alerta */

.content-chat .title-content-chat .content-search-new-messages {
    font-size: 9px;
}


/* estilos para el contenedor de mensajes del chat */

.content-chat .content-messages {
    min-height: 50px;
    max-height: 300px;
    overflow: auto;
    padding: 10px;
}


/* estilos para el contenedor de cada mensaje del chat */

.content-chat .content-messages .message {
    display: flex;
    margin-bottom: 10px;
    position: relative;
    text-align: left;
    width: 100%;
}


/* estilos para cuando el mensaje envaido sea del usuario logueado */

.content-chat .content-messages .message.me {
    justify-content: flex-end;
}


/* estilos para el texto del contenedor de cada mensaje del chat */

.content-chat .content-messages .message .text {
    font-size: 14px;
    background-color: var(--menu-bar-color);
    border-radius: 40px;
    padding: 15px;
    width: 80%;
}

.content-chat .content-messages .message .text small {
    display: block;
    font-size: 10px;
    font-style: italic;
    margin-top: 5px;
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea azul */

body.bg-orange .content-chat .content-messages .message.me .text {
    /* background-color: var(--color-orange);
    color: #fff; */
    font-size: 14px;
    background-color: var(--color-blue);
    border-radius: 40px;
    padding: 15px;
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea azul */

body.bg-blue .content-chat .content-messages .message.me .text {
    background-color: var(--color-blue);
    color: #fff;
}


/* estilos para el titulo de la cabecera de contactos cuando el fondo de la web sea verde */

body.bg-green .content-chat .content-messages .message.me .text {
    background-color: var(--color-green);
    color: #fff;
}


/* estilos para el contenedor de enviar mensaes */

.content-chat .content-send-message {
    border-top: 1px solid #eee;
    box-shadow: 0px -1px 2px #eee;
    padding: 10px;
}


/* estilos para el campo de nuevo mensaje */

.content-chat .content-send-message textarea {
    border: 0.1px solid #ede6e6;
    border-radius: 15px;
    color: #777;
    font-size: 15px;
    height: 55px;
    outline: none;
    padding: 5px;
    resize: none;
    width: 100%;
}


/* estilos para el boton de enviar mensaje */

.content-chat .content-send-message button {
    border: 0.1px solid #ede6e6;
    border-radius: 17px;
    height: 55px;
    outline: none;
    resize: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
}

.text_value {
    float: left;
    overflow: hidden;
    padding-right: 14px;
    white-space: nowrap;
    width: 100%;
}

.text_value span:last-child {
    background-color: white;
    position: absolute;
    right: 14px;
}

.text_value .label-dots::after {
    content: '.........................................................................................';
    color: #999;
    letter-spacing: 3px;
}


/* estilos para el contenedor de opciones de facturas */

.list-button-invoices,
.list-button-contacto {
    position: absolute;
    top: 6px;
    left: 100%;
    transform: translateX(-100%);
    width: 70%;
}


/* estilos para los items del contenedor de opciones de facturas */

.list-button-invoices li,
.list-button-contacto li {
    visibility: hidden;
    margin: 0;
    padding: 0 !important;
}


/* estilos para el primer item del contenedor de opciones de facturas */

.list-button-invoices li:first-child,
.list-button-contacto li:first-child {
    visibility: visible;
}


/* estilos para los vinculos los items del contenedor de opciones de facturas */

.list-button-invoices li a,
.list-button-contacto li a {
    border-radius: 0;
    margin: 0;
    text-align: left;
    width: 100%;
}


/* estilos para el icono de los vinculos los items del contenedor de opciones de facturas */

.list-button-invoices li a i,
.list-button-contacto li a i {
    text-align: center;
    width: 15px;
}

.window_mail {
    background-color: #fff;
    bottom: 0;
    border-radius: 5px 5px 0 0;
    box-shadow: 3px 3px 16px #999;
    height: 0;
    overflow: hidden;
    position: fixed;
    right: 30px;
    width: 600px;
    z-index: 99999;
    transition-duration: .2s;
}

.window_mail.show {
    height: 550px;
    transition-duration: .3s;
}

.window_mail_header {
    align-items: center;
    background-color: var(--color-green);
    border-radius: 5px 5px 0 0;
    color: white;
    display: flex;
    height: 50px;
    justify-content: space-between;
    padding: 10px 20px;
    width: 100%;
}

.window_mail_header a {
    color: #ccc;
}

.window_mail_header a:hover {
    color: #fff;
}

.window_mail_body {
    height: 510px;
    overflow: auto;
    padding: 10px 0px;
}

.switch label input[type=checkbox]:checked+.lever:after {
    background-color: var(--color-orange) !important;
}

#select_order_by {
    align-items: center;
    border: 1px solid #666;
    box-shadow: 0px 2px 3px #bbb;
    border-radius: 5px;
    color: #444;
    cursor: pointer;
    height: 40px;
    font-size: 14px;
    justify-content: center;
    outline: none;
    padding: .2rem 1.2rem;
}


/* estilos para el boton de cerrar el contenedor de filtros */

.btn-close-filter {
    color: #333;
    position: absolute;
    right: 25px;
    top: 22px;
    z-index: 999;
}


/* estilos para el contenedor de filtros */

.content-filters {
    left: -415px;
    overflow-y: auto;
    height: calc( 100vh - 50px);
    padding-right: 0;
    position: fixed;
    z-index: 99;
    top: 50px;
    transition-duration: .3s;
    width: 400px;
}


/* estilos para el contenedor de filtros */

.content-filters.show {
    left: -15px;
    transition-duration: .3s;
}


/* estilos para la tarjeta de filtros*/

.content-filters .card {
    height: 100%;
}

@media( min-width: 992px) {
    .contact-list,
    .content-chat {
        box-shadow: 0px 0px 4px #999;
        background-color: #fff;
        min-height: calc( 100vh - 200px);
        max-height: calc( 100vh - 200px);
    }
    /* estilos para el contenedor de contactos*/
    .contact-list {
        overflow: auto;
    }
    /* estilos para el contenedor de la lista */
    .contact-list .content-contact-list {
        min-height: calc( 100vh - 250px);
        max-height: calc( 100vh - 250px);
        overflow: auto;
    }
    /* estilos para el contenedor de mensajes del chat */
    .content-chat .content-messages {
        min-height: calc( 100vh - 327px);
        max-height: calc( 100vh - 327px);
        overflow: auto;
    }
}


/******************* fin estilos para las el centro de mensajes *******************/

@media( min-width: 1200px) {
    /* estilos para el contenedor de filtros */
    .content-filters {
        left: 0px;
        overflow-y: visible;
        height: auto;
        position: absolute;
        z-index: 1;
        top: 70px;
        width: auto;
    }
    /* estilos para el contenedor de filtros */
    .content-filters.show {
        left: -25%;
        transition-duration: .3s;
    }
    /* estilos para el contenedor de filtros */
    .content-jobs {
        min-height: 670px;
        left: 25%;
        top: 0px;
        transition-duration: .3s;
    }
    /* estilos para el contenedor de filtros */
    .content-jobs.show {
        left: 0;
        top: 0;
        transition-duration: .3s;
    }
}


/******************* estilos para funciones generales del sitio web *******************/


/* estilos para la card cuando se ejecute un formulario */

.content-loader {
    -ms-align-items: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}


/* estilos para la imagen edl perfil */

.content-image-profile {
    height: 120px;
    margin-bottom: 92px;
}


/* estilos para el contenedor de la imagen */

.content-image {
    background: #eee;
    border: 17px solid #353a40;
    border-radius: 50%;
    box-shadow: 0px 3px 10px #666;
    overflow: hidden;
    height: 220px;
    width: 220px;
    left: 52%;
    position: absolute;
    top: 78%;
    transform: translate(-50%, -50%);
}


/* esitlos para la imagen del usuario */

.content-image img {
    height: 100%;
    width: 100%;
}


/* estilos para el label de abrir modal */

.content-image label {
    background: rgba(0, 0, 0, .4);
    bottom: -50px;
    color: #ddd;
    cursor: pointer;
    left: 0%;
    padding: 7px;
    position: absolute;
    text-align: center;
    transition-duration: .3s;
    width: 100%;
}


/* estilos para el label de abrir modal cuando le hagan hover al contenedor de la imagen */

.content-image:hover label {
    bottom: -10px;
    transition-duration: .5s;
}


/* estilos para el label de abrir modal cuando le hagan hover */

.content-image label:hover {
    background: rgba(0, 0, 0, .7);
}


/* contenedor para mostrar las opciones con precarga */

.content_options {
    background-color: #fff;
    box-shadow: 0px 1px 3px #333;
    height: 130px;
    overflow-y: auto;
    position: absolute;
    width: calc( 100% - 30px);
    z-index: 1;
}


/* listado de los objetos del contenedor de opciones con precarga */

.list_content_options {
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
}


/* listado de los vinculos de objetos del contenedor de opciones con precarga */

.list_content_options a {
    align-items: center;
    border-bottom: 1px dashed #aaa;
    color: #666;
    display: flex;
    padding: 5px 10px;
    width: 100%;
}


/* listado de los vinculos de objetos del contenedor de opciones con precarga cuando le hagan hover */

.list_content_options a:hover {
    background: #efefef;
    color: #000;
}


/* esitlos para la imagen de la empresa en el listado de opciones */

.photo-company-option {
    border-radius: 50%;
    box-shadow: 0 1px 4px #666;
    height: 25px;
    margin-right: 7px;
    width: 25px;
}


/* estilos para la selección de plan cuando se expire la suscripción */

.modal-subscribed-until {
    align-items: center;
    background-color: rgba(0, 0, 0, .6);
    display: flex;
    height: 100vh;
    left: 0;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}


/* estilos para los switch de activo/inactivo en el listado de administrador */

.onoffswitch {
    position: relative;
    width: 90px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    /* border: 2px solid #999999; */
    border-radius: 20px;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 30px;
    padding: 0;
    line-height: 30px;
    font-size: 12px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}

.onoffswitch-inner:before {
    content: "Activo";
    padding-right: 10px;
    background-color: var(--active-button-color);
    color: #FFFFFF;
}

.onoffswitch-inner:after {
    font-size: 12px;
    content: "Inactivo";
    padding-right: 10px;
    background-color: var(--inactive-button-color);
    color: #FFFFFF;
    text-align: right;
}

.onoffswitch-inner.talent-available:before {
    background-color: #FFFFFF;
    color: #000000;
    content: "Disponi." !important;
    padding-left: 10px;
}

.onoffswitch-inner.talent-available:after {
    background-color: #E5E5E5;
    color: #000000;
    content: "No disp." !important;
}

.onoffswitch-switch {
    display: block;
    width: 18px;
    margin: 6px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 56px;
    /* border: 2px solid #999999; */
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
    right: 0px;
}


/* estilos para el icono del preload de opciones con precarga */

.fa-spinner {
    -webkit-animation: spin 1.8s linear infinite;
    -moz-animation: spin 1.8s linear infinite;
    animation: spin 1.8s linear infinite;
}


/* estilos para las animaciones */

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Estilos para los botones de compartir oportunidad */
.shared_button{
    font-size: 27px !important; 
    padding-bottom: .3rem !important; 
    padding-top: .4rem !important;
}
.gap-1 {
    gap: 10px !important;
}

/* Estilos para los botones flotantes */
.floating_container {
    right: 10px;
    width: 56px;
    position: fixed;            
    overflow: hidden;
    transition: width 0.4s ease;
    white-space: nowrap;
    background-color: var(--color-yellow-green);
    border-radius: 50px;
    z-index: 999;
}

body.bg-orange .floating_container{
    background-color: var(--menu-bar-color) !important;
}

.floating_container a {
    color: var(--primary-text-color) !important;
    display: inline-block;
    width: 100%;
}

.floating_container .icon {
    font-size: 24px;
}

.floating_container img {
    width: 25px;
}

.floating_text {
    margin: 0;
    padding: 10px;
}

/*Flotante menssage */
.floating_message {
    bottom: 245px;
}

.floating_message:hover {
    width: 14.5rem;
}

/*Flotante opportunity */
.floating_opportunity {
    bottom: 300px;
}
.floating_opportunity:hover {
    width: 18rem;
}

/* flotante avatar */
.floating_avatar{
    position: fixed;
    bottom: 28px;
    right: 140px;
    width: 99px;
    max-width: 100%;
}

.floating_avatar:hover + .floating_avatar_message{
    opacity: 1;
    visibility: visible;
}

.floating_avatar_message{
    z-index: 999;
    position: fixed;
    bottom: 212px;
    right: 206px;
    width: 300px;
    background-color: white;
    padding: 20px;
    border-radius: 20px 20px 0 20px;
    border: solid 1px #c7c3c3;
    box-shadow: 0.7px 3.4px 2.9px rgba(0, 0, 0, 0.012), 1.7px 8.1px 7.4px rgba(0, 0, 0, 0.021), 3.2px 14.9px 14.5px rgba(0, 0, 0, 0.029), 5.4px 25.5px 26.2px rgba(0, 0, 0, 0.037), 9.4px 44.4px 48px rgba(0, 0, 0, 0.046), 20px 94px 94px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transition: all .5s linear;
    visibility: hidden;
}

.floating_avatar_message p{
    margin-bottom: 0;
    font-size: 12px;
    text-align: justify;
}

.br-rounded-all {
    border-radius: 1.9rem !important;
}

.br-rounded {
    border-radius: 25px !important;
}

@media ( max-width: 768px )
{
    .floating_avatar{
        bottom: 10px;
        right: -32px;
        width: 80px;
        transform: rotate(345deg);
    }
    .floating_avatar_message{
        bottom: 175px;
        right: 64px;
        width: 235px;
    }
}

/* .card_jobs_opportunity .card{
    border-color: var(--color-grey);
    border: 1px solid !important;
}
*/

.card_jobs_opportunity .card {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.card_jobs_opportunity .card .card-body{
    background: var(--menu-bar-color);
    color: var(--primary-text-color);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.card_jobs_opportunity .card p a{
    color: var(--primary-text-color) !important;
}
.card_jobs_opportunity .card-footer{
    background-color: var(--color-white);
}


.bg-gradient-btn{ background: var(--bg-gradient) !important; }
.bg-gradient-btn:hover{ background: var(--bg-gradient-invert) !important; }

#bodyTalentSuugest .card{
    border-color: var(--color-grey);
    /* border: 1px solid !important; */
}

/* Container settings */
.container-settings .nav-link {
    color: #39465F !important;
    border-radius: 7px;
}
.container-settings .nav-link.active{
    /* background: rgba(57, 70, 95, 0.1); */
    background-color: #f1ac33db;
    color: white !important;
}

.container-settings .list-group-item{
    background: rgba(57, 70, 95, 0.1);
    color: #39465F;
}
.btn-bars-settings {
    background: #ebedef; 
    color: #39465F; 
    border-color: #ebedef; 
    width: 40px;
    height: 40px;
    font-size: 13px;
    border-radius: 5px;padding: 9px;
}
.container-settings .tab-content .tab-pane {
    max-height: 61vh;
    overflow: auto;
}
#hamburger-button-settings {
    display: block;
}
#settings-menu {
    display: none;
}

@media (min-width: 768px) {
    #hamburger-button-settings {
        display: none;
    }
    #settings-menu {
        display: block;
    }
    .container-settings .tab-content .tab-pane {
        max-height: 66vh;
    }
}
/* Container settings */


/*
==== Datatable ====
*/
table.dataTable {
    padding-bottom: 12px;
}

table.dataTable thead {
    border-radius: 20px;
    overflow: hidden;
    background: var(--secondary-menu-color);
    border: none !important;
}
table.dataTable thead th {
    border: none !important;
    color: var(--primary-text-color);
}
/* Primer th */
table.dataTable thead th:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
/* Último th */
table.dataTable thead th:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

table.dataTable tbody::before {
    content: "";
    display: block;
    height: 8px;
}

table.dataTable tbody td {
    background: #fcd581 !important;
}

/* Primer td de la primer fila*/
table.dataTable tbody tr:first-child td:first-child {
    border-top: none;
    border-top-left-radius: 20px;
}
/* Último td de la primer fila*/
table.dataTable tbody tr:first-child td:last-child {
    border-top: none;
    border-top-right-radius: 20px;
}

/* Primer td del último tr */
table.dataTable tbody tr:last-child td:first-child {
    border-bottom: none;
    border-bottom-left-radius: 20px;
}

/* Último td del último tr */
table.dataTable tbody tr:last-child td:last-child {
    border-bottom: none;
    border-bottom-right-radius: 20px;
}

.button, .button-secundary {
    font-size: 0.74rem !important;
}
table td, table th {
    font-size: .8rem !important;
}

.dataTables_length label {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
}

.dataTables_length label select{
    display: inline !important;
}
/*
==== End Datatable ====
*/

.btn-rounded{
    border-radius: 50% !important;
    padding: 9px 13px 9px 13px !important;
    font-size: 0.79rem !important;
}

img.icon {
    max-width: 15px;
    margin-right: 7px;
    padding-bottom: 3px;
}

/*
==== Custom Modal ====
*/
.modal-content {
    background-color: var(--primary-text-color);
    border-radius: 15px !important;
    border: none !important;
}
.modal-header {
    border-top-right-radius: 15px !important;
    border-top-left-radius: 15px !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
    background-color: var(--primary-text-color) !important;
}
.modal-title {
    color: white !important;
}
.modal .close {
    color: white !important;
}
.modal-body {
    background: var(--menu-bar-color);
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.modal-footer {
    border: none;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background: var(--menu-bar-color);
}
.modal input, .modal select, .modal textarea, .modal .mdb-select {
    /* border-radius: 1.55rem !important; */
    border-radius: 0.9rem !important;
}
.modal .mdb-select .caret {
    margin-right: 8px;
}
/*
==== End Custom Modal ====
*/

/*
==== Form Builder ====
*/

.form-builder .button, .button-secundary {
    font-size: 0.84rem !important;
}
.form-builder .card {
    border-radius: 12px;
}
.form-builder .stage-wrap {
    background-color: var(--menu-bar-color) !important;
    border: 3px dashed var(--inactive-button-color);
    padding: 15px !important;
    margin-right: 6px !important;
    border-radius: 14px !important;
}
.form-builder #build-wrap input[type=checkbox], input[type=radio] {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.form-builder #build-wrap .btn {
    margin: .09rem;
}
.form-builder .clear-all {
    background-color: var(--inactive-button-color) !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    padding: 8px 16px !important;
}
.form-builder .get-data {
    display: none !important;
}
.form-builder .save-template {
    background-color: var(--save-button-color) !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    padding: 8px 16px !important;
}
.form-builder .sticky-controls {
    padding: 14px 26px !important;
    margin-left: 10px !important;
    background-color: var(--menu-bar-color);
    border-radius: 14px;
}
.form-builder .sticky-controls li{
    border-radius: 19px !important;
    margin-bottom: 2px !important;
    font-size: 14px !important;
}
.form-builder .btn-group {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
}
/*
==== End Form Builder ====
*/

/*
==== Componente de Calificación ====
*/
.rating {
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse; /* Invertir el orden de las labels */
}

.rating input {
    display: none;
}

.rating label {
    font-size: 40px;
    color: #ccc;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.3s ease;
    transform: rotateY(180deg);

}

/* Hover: cuando se pasa el ratón sobre una estrella, todas las estrellas a la izquierda cambian a dorado */
.rating label:hover,
.rating label:hover ~ label {
    color: #ffcc00;
}

/* Cuando se selecciona una estrella (input:checked), todas las estrellas a la izquierda de la seleccionada deben ser doradas */
.rating input:checked ~ label {
    color: #ffcc00;
}

/* Aseguramos que cuando se hace clic en una estrella, las estrellas previas se coloreen de dorado */
.rating input:checked + label {
    color: #ffcc00;
}

/* Animación de transición de izquierda a derecha para la selección */
.rating input:checked ~ label {
    color: #ffcc00;
}

.rating input:checked + label,
.rating input:checked + label ~ label {
    color: #ffcc00;
}
/*
==== End Componente de Calificación ====
*/

/*
==== Custom nav-tabs ====
*/

.nav-tabs-custom {
    background: none !important;
    border-radius: none !important;
    border-bottom: none !important;
}
.nav-tabs-custom li {
    border-radius: 20px !important;
    margin-right: 4px;
}
.nav-tabs-custom li a{
    background: var(--secondary-menu-color);
}

.nav-tabs-custom .nav-link.active {
    background: #b3c3e1 !important;
}

/* Estilo para select2*/
.select2-selection__clear{
    left: -7px;
    top: -11px;
    color: #f1ac33 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #f1ac33 transparent transparent transparent !important;
    margin-left: -8px;
}
.select2-container--default .select2-selection--single {
    border-radius: 18px !important;
    padding-left: 5px !important;
}
.select2-search__field {
    padding-left: 10px !important;
}
.select2-search__field:focus {
    border-color: #f1ac33 !important;
    outline: none !important;
}
.select2-dropdown {
    border-radius: 20px !important;
    padding: 5px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 5px !important;
    right: 8px !important;
    width: 20px;
}
.select2-results__option{
    border-radius: 17px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    font-size: 15px !important;
}

/* Tooltip personalizado */
.tooltip-inner {
    background-color: #ffffff !important; /* Cambia el color de fondo */
    color: var(--primary-text-color) !important;               /* Cambia el color del texto */
    font-size: 1rem !important;           /* Opcional: cambiar el tamaño de la fuente */
}

/* Opcional: Personalizar el borde del tooltip */
.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--primary-text-color) !important; /* Cambia el color de la flecha superior */
}

.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--primary-text-color) !important; /* Cambia el color de la flecha inferior */
}

.tooltip.bs-tooltip-left .arrow::before {
    border-left-color: var(--primary-text-color) !important; /* Cambia el color de la flecha izquierda */
}

.tooltip.bs-tooltip-right .arrow::before {
    border-right-color: var(--primary-text-color) !important; /* Cambia el color de la flecha derecha */
}

/*================================
/** CUSTOM CHECKBOX **/
/*================================ */
.custom-checkbox {
    display: inline-block;
    position: relative;
    padding-left: 35px; /* Adjust as needed for image size */
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px; /* Adjust as needed */
    width: 25px;  /* Adjust as needed */
    background-image: url('../../img/icons/167.png'); /* Replace with your unchecked image */
    background-size: cover;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmark {
    background-image: url('../../img/icons/170.png'); /* Replace with your checked image */
    background-size: cover;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Clase base para asegurar el grosor y limpiar estilos si es necesario */
.status-select {
    border-width: 2px !important; /* Haz el borde un poco más grueso */
}

.status-border-pending {
    border-color: #fb3 !important;
}
.status-border-validating {
    border-color: #33b5e5 !important;
}
.status-border-completed {
    border-color: #00c851 !important;
}

.status-select.status-border-pending:focus {
    border-color: #fb3 !important;
}
.status-select.status-border-validating:focus {
    border-color: #33b5e5 !important;
}
.status-select.status-border-completed:focus {
    border-color: #00c851 !important;
}

.badge-custom {
    border: 2px solid;
}

/*
 *  DATATABLE OVERLAY
 */

/* 1. Mantenemos el contexto de posicionamiento */
div.dataTables_wrapper {
    position: relative;
}

/* 2. Reemplazamos completamente el estilo del _processing */
div.dataTables_wrapper div.dataTables_processing {
    /* Posicionamiento mágico para centrar sin importar el padre */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Quitamos las dimensiones que ocupaban toda la pantalla */
    width: auto !important;
    height: auto !important;
    
    /* Le damos un estilo de "tarjeta" o "modal" */
    background: #ffffff !important;
    padding: 20px 40px !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 1001 !important; /* Un z-index más alto por si acaso */

    /* Quitamos el borde por defecto de DataTables */
    border: none !important;
    margin: 0 !important;
}

/* 3. Tus estilos para el contenido del spinner (estos ya estaban bien) */
.processing-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
}

.processing-overlay .fa-spinner {
    margin-bottom: 10px;
    color: #F1AC33;
}

.processing-overlay span {
    font-size: 1.1em;
    font-weight: 500;
}

.dataTables_wrapper .dataTables_processing {font-size: 0.9em !important;}

/* Media query para dispositivos pequeños (max-width: 425px) */
@media (max-width: 425px) {
  .input-group {
    flex-direction: column;
    align-items: stretch;
  }

  .input-group .form-control {
    width: 100%;
    margin-bottom: 10px;
  }

  .input-group .btn-filter-list-talents {
    width: 100%;
  }

  .filters-container {
    flex-direction: column;
    gap: 8px;
  }

  .filters-container .badge-filter {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .filters-container .badge-filter .clear-filter-icon {
      right: 15px;
  }

  .filter-dropdown {
      max-width: calc(100vw - 20px) !important;
      left: 10px !important;
      right: 10px !important;
  }
}


/* Estilos para el contenedor de los badges */
.filters-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

/* Estilo base para cada badge-filter */
.badge-filter {
  background-color: #ffffff;
  border: 1px solid #000000;
  padding: 4px 15px;
  border-radius: 20px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 25px;
}

.badge-filter:hover {
  background-color: #f1f1f1;
}

/* Estilos para el icono de "limpiar" dentro de un badge activo */
.clear-filter-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #dc3545;
    font-size: 0.9em;
    margin-left: 5px;
    padding: 2px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    line-height: 1;
}

/* Estilo para el texto del filtro activo dentro del badge */
.active-filter-text {
    font-weight: bold;
    color: #007bff;
    margin-left: 5px;
}

/* Estilos para el dropdown de filtro (ubicaciones/empresa) */
.filter-dropdown {
    display: none;
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 10px;
    min-width: 250px;
    box-sizing: border-box;
}

.filter-dropdown.show {
    display: block;
}

/* Estilo para el input de búsqueda dentro del dropdown */
.filter-dropdown-search {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem; /* Asegura un tamaño de fuente legible para el input */
    line-height: 1.5; /* Asegura el espaciado para el texto del input */
    color: #333; /* Color de texto del input */
}

/* Contenedor de las opciones del dropdown - ¡AQUÍ ESTÁ EL CAMBIO CLAVE PARA EL SCROLL INTERNO! */
.filter-dropdown .filter-dropdown-options {
    display: flex;
    flex-direction: column;
    max-height: 200px; /* Ajusta esta altura según sea necesario para las opciones */
    overflow-y: auto; /* SOLO ESTE CONTENEDOR ahora hará scroll */
    background-color: #fff; /* Asegura un fondo blanco para las opciones */
}

/* Estilo para cada opción seleccionable en el dropdown - ¡Foco en la visibilidad del TEXTO! */
.filter-dropdown .filter-option {
    /* Propiedades de visualización */
    display: block; /* Asegura que cada opción ocupe su propio bloque */
    background: none;
    border: none;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    width: 100%;

    /* Propiedades del texto */
    font-family: inherit;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #333 !important;
    text-decoration: none !important;
}

.filter-dropdown .filter-option:hover,
.filter-dropdown .filter-option.active {
    background-color: #f0f0f0;
    color: #007bff !important;
}