:root {
  --color-black: #000;
  --color-white: #fff;
  --color-orange: #ff6600;
  --color-yellow: yellow;
}

.contrates-banner-SS { filter: contrast(200%); }
html .bg-SS-black { background-color: var(--color-black) !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; }
.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 {
  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 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);
}
.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; }
}