:root {
  --color-black: #000;
  --color-white: #fff;
  --color-orange: #ff6600;
  --color-gray: #333;
  --color-dark-gray: #777;
}

.contrates-banner-SS {
  filter: contrast(200%);
}
html .bg-SS-black {
  background-color: var(--color-black) !important;
}
html .bg-SS-white {
  background-color: var(--color-white) !important;
}
.text-SS-white {
  color: var(--color-white) !important;
  opacity: 1 !important;
}
.text-SS-black {
  color: var(--color-black) !important;
  opacity: 1 !important;
}
.text-AC-orange {
  color: var(--color-orange) !important;
}
.text-AC-yellow {
  color: var(--color-yellow) !important;
}
.text-AC-gray {
  color: var(--color-gray) !important;
}
.background-AC-dark-gray {
  background-color: var(--color-dark-gray) !important;
}
.desktop .main-menu__item .main-menu__itemHeading.text-AC-yellow:focus,
.desktop .main-menu__item .main-menu__itemHeading.text-AC-yellow:hover,
.desktop .main-menu__item.active .main-menu__itemHeading.text-AC-yellow,
.desktop .main-menu__item.active .main-menu__itemHeading.text-AC-yellow:hover {
  background-color: var(--color-orange) !important;
  color: var(--color-white) !important;
}
.bg-SS-black .desktop .main-menu__item.active .main-menu__submenu,
.bg-SS-black .desktop .main-menu__item .main-menu__submenu,
.bg-SS-black header .perfil__usuario,
.bg-SS-black header .header__container .perfil,
.bg-SS-black header .perfil__lista .perfil__lista__item .open ul,
.bg-SS-black .loadingPage,
.bg-SS-black .loadingWraper,
.bg-SS-black .compensarLoading::after,
.bg-SS-black .compensarLoading::before,
.bg-SS-black .container-gris .thumbnail,
.bg-SS-black .inicio-afiliacion .documentos,
.bg-SS-black .popUp .inner_popUp,
.bg-SS-black .afiliacionReanudar,
.bg-SS-black .panel-doblerol,
.bg-SS-black .custom-miga-pan .breadcrumb,
.bg-SS-black .nuevo-subsidio .subsidio-resultado,
.bg-SS-black .swiper .swiper-caption,
.bg-SS-black #confirmacion-modal .form-extra-data {
  background-color: var(--color-black) !important;
}
.bg-SS-black header .perfil__lista li .menu-item,
.bg-SS-black header .perfil__lista > li .open a,
.bg-SS-black header .perfil__lista li summary.menu-item,
.bg-SS-black .card-beneficiario .info {
  color: var(--color-yellow);
}
.bg-SS-black .highlight-products__link,
.bg-SS-black header .perfil__lista__item details::after,
.bg-SS-black .inner_popUp .inner_popUp__body p,
.bg-SS-black
  .inicio-afiliacion
  .table-compensar-striped
  > tbody
  > tr:nth-of-type(even),
.bg-SS-black #seccionSolicitudes h3,
.bg-SS-black #seccionSolicitudes p,
.bg-SS-black .nuevo-subsidio .breadcrumb > .active,
.bg-SS-black .resultado-busqueda-trabajador .table-bordered > thead > tr > th,
.bg-SS-black .nuevo-subsidio .card-beneficiario h4,
.bg-SS-black.modal .modal-content p:not(.error),
.bg-SS-black #confirmacion-modal .form-extra-data .correo_cliente,
.bg-SS-black #confirmacion-modal .form-extra-data .celular_cliente {
  color: var(--color-white);
}
.bg-SS-black .default-error-message-class,
.bg-SS-black .has-error p.error {
  background-color: var(--color-white);
}

.bg-SS-black
  .acordeonComponent__lista__body
  .acordeonComponent__lista__body__title
  h4,
.bg-SS-black
  .acordeonComponent__lista__body
  .acordeonComponent__lista__body__title::after {
  color: var(--color-orange);
}

.bg-SS-black.modal .modal-content {
  background-color: var(--color-black);
  border: 1px solid var(--color-white);
}

.bg-SS-black .table > tbody > tr > td,
.bg-SS-black .table > tbody > tr > th,
.bg-SS-black .table > tfoot > tr > td,
.bg-SS-black .table > tfoot > tr > th,
.bg-SS-black .table > thead > tr > td,
.bg-SS-black .table > thead > tr > th,
.bg-SS-black .certificaciones .paso-contenedor strong,
.bg-SS-black .certificaciones label {
  color: var(--color-white);
}
.bg-SS-black .table-hover > tbody > tr:hover td,
.bg-SS-black .swiper .swiper-slide .swiper-caption a.btn-orange,
.bg-SS-black .swiper .glyphicon,
.bg-SS-black .swiper .swiper-button .glyphicon-chevron-left,
.bg-SS-black .swiper .swiper-button .glyphicon-chevron-right {
  color: var(--color-black);
}
.bg-SS-black .controlTabs .compensarDetalleTab,
.bg-SS-black .contenedorTabs ul li .tab.active {
  background-color: var(--color-black);
}
.bg-SS-black a.text-SS-white:not(.main-menu__itemHeading):hover,
.bg-SS-black a.text-SS-white:not(.main-menu__itemHeading):hover > * {
  color: var(--color-orange) !important;
}
.contraste-SS {
  background-color: var(--color-white);
  min-width: 6rem;
  position: fixed;
  font-size: 4rem;
  top: 17rem;
  box-shadow: 0 0 5px var(--color-black);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 3;
  text-align: center;
  left: 0;
  padding: 0;
}
.buttonAccessibility {
  background-color: #000 !important;
  color: #fff !important;
}

@media (max-width: 480px) {
  #contraste-SS {
    top: 14rem;
  }
}

.accesibility {
  background-color: #fff;
  width: 4.3rem;
  position: fixed;
  top: 13rem;
  box-shadow: 0 0 0.188rem #000;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-style: solid solid solid none;
  border-color: #777;
  border-width: 0.1rem;
  z-index: 3;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0.8rem;
}

.accesibility .list-unstyled {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.accesibility .list-unstyled li {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.accesibility .separator {
  width: 100%;
  display: flex;
  border: 0.1rem solid #777;
}

.accesibility .action {
  width: 100%;
  min-width: 0;
  padding: 0.7rem 0;
  margin: 0;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  font-family: "Roboto Light", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2.125rem;
  color: #777;
  background-color: var(--color-white);
}

.accesibility .action:active,
.accesibility .action:focus,
.accesibility .action:hover {
  background-color: unset;
  border-color: unset;
}

@media only screen and (max-width: 767.98px) {
  .accesibility {
    width: calc(4.5rem - 1rem);
    top: calc(12rem - 1rem);
    padding: 0.5rem calc(0.7rem - 0.1rem);
  }

  .accesibility .action {
    font-size: calc(1.8rem - 0.313rem);
    padding: calc(0.7rem - 0.1rem) 0;
  }
}

.menu__interno
  ul.menu_interno__ul--Padre.bg-SS-black
  li.menu_interno__li--Padre.itmes-child.abre {
  background-color: var(--color-dark-gray) !important;
}

.nav-stacked.tabs .nav-link.text-SS-white {
  color: var(--color-orange) !important;
}