/*
para la implemetacion del dark mode se toma como referencia siempre desde el body si contiene la clase "dark-mode-active"
a partir de ahi se realizan los cambios en las etiquedas correspondientes
*/

/* Define tus colores fijos */
:root {
    --color-dark-grey: #3B3F51;
    --color-dark-black: #1A1D2B;
    --color-dark-white: #ffffff;
  }

body.dark-mode-active, /* body */
body.dark-mode-active header /* nav bar */ {
      background-color:#3B3F51 !important;
}

body.dark-mode-active .hrc-btn-referent /* boton outline */{
    background-color:#1A1D2B !important;
    color:           #ffffff !important;
    border-color:    #ffffff !important;
}

body.dark-mode-active .hrc-btn-outline-dark /* botones dark mode*/ {
    background-color:#1A1D2B !important;
    color:           #ffffff !important;
    border-color:    #ffffff !important;
    font-weight: 600 !important;
}


body.dark-mode-active .paginationLabel, /* contador de paginacion de vacante */
body.dark-mode-active .name__vacancy,   /* nombre de vacante */
body.dark-mode-active .hr-Options,  /* icon mas filtros */
body.dark-mode-active .Hero__text *,   /* nombre empresa  */
body.dark-mode-active .btn-toggle-section,  /* toogle mobile x */
body.dark-mode-active .hr-Cross,/* icono x */
body.dark-mode-active .hr-menu-burger, /* icono burger */
body.dark-mode-active .hr-Question, /* icono question */
body.dark-mode-active #button-faqs, /* boton preguntas frecuentes*/
body.dark-mode-active .hrc-black, /* todas las fuentes */
body.dark-mode-active .hrLinkPortalDark /* link externos nav bar*/ {
    color:            #FFFFFF !important;
}

body.dark-mode-active .Hero__logo /* borde logo empresa */ {
    border: 5px solid #3B3F51  !important;
    background-color: #3B3F51  !important;
}

body.dark-mode-active .vacancy-time /* tiempo de la vacante */ {
    color:            #DADADA !important;
}


body.dark-mode-active .tag-vacancy, /* tag de la vacantes */
body.dark-mode-active .tag-vacancy * {
    color:             #ffffff !important;
    background :       #3B3F51  !important;
}

/* boton de filtros mobile*/
body.dark-mode-active .hr-Options {
    background-color:            #1A1D2B  !important;
    color:             #ffffff !important;
}

/* paginacion */
body.dark-mode-active [id^="paginator_id_buton"],
body.dark-mode-active .dd_previo,
body.dark-mode-active .dd_siguiente {
    background-color:            #1A1D2B  !important; 
}

body.dark-mode-active .pagination .actual a {
    background-color: #ffffff !important;
    color: #1A1D2B !important;
}

body.dark-mode-active .pagination li a {
    color: #ffffff !important;
}

body.dark-mode-active #openFilter {
    color:           #DADADA !important;
    border-color:    #DADADA !important;
}


body.dark-mode-active .hrc-btn-black * {
    color:           white !important;
}

body.dark-mode-active  input[type="text"],
body.dark-mode-active .hrc-select,
body.dark-mode-active textarea {
    background-color:#1A1D2B !important;
    color:          #DADADA !important;
}

/* Card de vacante */
body.dark-mode-active .vacancyDataContainer a > div {
    background-color:#1A1D2B !important;
}

body.dark-mode-active .text-color,
body.dark-mode-active .text-color * {
    color:            #DADADA !important;
}

/* inforamcion de empresa */
body.dark-mode-active #section-empresa .card  {
    background-color:#1A1D2B !important;
    color:            #FFFFFF !important;
}

/* fondo del modal */
body.dark-mode-active .modal__wrapper,
body.dark-mode-active .modal-content{
    background:            #1A1D2B  !important; 
}

/* menu movile */
body.dark-mode-active .MenuMobile {
    background:            #3B3F51  !important; 
    color:              #ffffff  !important; 
}

/* opciones del select */
body.dark-mode-active .optWrapper {
    background-color:#1A1D2B !important;
}

/* barra de filtros */
body.dark-mode-active .container_filter,
body.dark-mode-active .buttons {
    background-color:#1A1D2B !important;
}

body.dark-mode-active .container_filter .section,
body.dark-mode-active .container_filter .buttons__delete,
body.dark-mode-active .container_filter .postulantDisc {
    color: #ffffff !important;
}


body.dark-mode-active #emptyVacancies {
    background-color: #1A1D2B !important;
    color: #ffffff !important;
}


body.dark-mode-active .hero__container {
    border: 2px solid  #3B3F51 !important;
    background-color: #1A1D2B !important;
}

body.dark-mode-active .hero__title h2  {
    color:            #FFFFFF !important;
}

body.dark-mode-active .hero__area-ubication *,
body.dark-mode-active .hero__time--old {
    color:            #DADADA !important;
}

body.dark-mode-active .hero__tag {
    color:            #ffffff !important;
    background-color: #3B3F51 !important;
}

body.dark-mode-active .main__description,
body.dark-mode-active .main__details  {
    background-color: #1A1D2B !important;
    color:            #DADADA !important;
}

body.dark-mode-active .main__tags-item  {
    color:            #1A1D2B !important;
}

body.dark-mode-active .main__right .main__info,
body.dark-mode-active .main__right .main__list-vacancies{
    background-color: #1A1D2B !important;
}

body.dark-mode-active .main__list-vacancies-items,
body.dark-mode-active .main__title{
    border-color: #3B3F51 !important;
}

body.dark-mode-active .main__list-vacancies-items:hover {
    background-color: #f4f4f41b !important;
}

body.dark-mode-active .hrc-btn-black-outline {
    border:1px solid #ffffff !important;
    color: #ffffff !important;
    background-color: #1A1D2B !important;
}

body.dark-mode-active #profileUpdate,
body.dark-mode-active .modalUpdated {
    background-color: rgba(137, 137, 137, 0.3) !important;
}


body.dark-mode-active .modal-body-container,
body.dark-mode-active .close,
body.dark-mode-active .modal__wrapper {
    color: #ffffff !important;
}

body.dark-mode-active #updateEmail  {
    background-color: #1A1D2B !important;
    color: #ffffff;
}

body.dark-mode-active hr {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode-active .form-rounded input[type="checkbox"]  {
    --background: transparent;
}


/* check box de los filtros*/
body.dark-mode-active .SumoSelect > .optWrapper.multiple > .options li.opt span i {
    background-color: transparent;
}

body.dark-mode-active .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i {
    background-color: rgb(17, 169, 17);
}

body.dark-mode-active .hrc-btn-black-outline:hover {
    background-color: #26293A !important;
}

body.dark-mode-active .hrc-btn-black-outline:active i {
    color: white !important;
}

body.dark-mode-active .hrc-btn-outline-dark:hover {
    background-color: #26293A !important;
}

body.dark-mode-active .SumoSelect > .optWrapper > .options li.opt:hover label { 
    color: #3b3f51 !important; 
}

body.dark-mode-active .hrc-btn-green-outline:hover {
    background-color: #0B2A1B !important;
}

body.dark-mode-active .hrc-btn-green-outline {
    border: 1px solid #24bb72 !important;
}

body.dark-mode-active .descjobs {
    color: white !important;
    background-color: transparent !important;
}

body.dark-mode-active .tooltip-share,
body.dark-mode-active .tooltip-share::after {
    background-color: #1A1D2B !important;
}

body.dark-mode-active .hrc-btn-twitter {
    background-color: black !important;
    border: 1px solid white !important;
}

.placeholder14::-webkit-input-placeholder{
    font-size: 14px !important;
    line-height: 4;
}

.placeholder14::-moz-placeholder {
    font-size: 14px !important;
    line-height: 4;
}

.placeholder15::-webkit-input-placeholder{
    font-size: 15px !important;
    line-height: 4;
}

.placeholder15::-moz-placeholder {
    font-size: 15px !important;
    line-height: 4;
}

.placeholder16::-webkit-input-placeholder{
    font-size: 16px !important;
    line-height: 4;
}

.placeholder16::-moz-placeholder {
    font-size: 16px !important;
    line-height: 4;
}

.disabled {
    opacity: 0.40 !important;
    cursor:  not-allowed !important;
}