.wcag-black,
.wcag-black * {
  color: white !important;
  /*background-color: black !important;*/
  border-color: white !important;
  /*background-image: none !important;*/
}
.wcag-black *:after,
.wcag-black *:before {
  border-color: white !important;
  color: white !important;
}
.wcag-black input,
.wcag-black button {
  border: 1px solid white !important;
}
.wcag-black, .wcag-black a:hover,
.wcag-black, .wcag-black a:hover *,
.wcag-black, .wcag-black button:hover,
.wcag-black, .wcag-black button:hover *,
.wcag-black, .wcag-black input:hover,
.wcag-black, .wcag-black input:hover *,
.wcag-black, .wcag-black *:hover:after,
.wcag-black, .wcag-black *:hover:before {
  border-color: #ff0 !important;
  color: #ff0 !important;
}
.wcag-black img {
  filter: grayscale(100%);
}
.wcag-black *::selection {
  background: white !important;
}


.wcag-yellow,
.wcag-yellow * {
  color: #ff0 !important;
  /*background-color: black !important;*/
  border-color: #ff0 !important;
  /*background-image: none !important;*/
}
.wcag-yellow *:after,
.wcag-yellow *:before {
  border-color: #ff0 !important;
  color: #ff0 !important;
}
.wcag-yellow input,
.wcag-yellow button {
  border: 1px solid #ff0 !important;
}
.wcag-yellow, .wcag-yellow a:hover,
.wcag-yellow, .wcag-yellow a:hover *,
.wcag-yellow, .wcag-yellow button:hover,
.wcag-yellow, .wcag-yellow button:hover *,
.wcag-yellow, .wcag-yellow input:hover,
.wcag-yellow, .wcag-yellow input:hover *,
.wcag-yellow, .wcag-yellow *:hover:after,
.wcag-yellow, .wcag-yellow *:hover:before {
  border-color: white !important;
  color: white !important;
}
.wcag-yellow img {
  filter: grayscale(100%);
}

/* CUSTOMS */
.wcag-black .nav-link::before,
.wcag-yellow .nav-link::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
}
.wcag-black .nav-link::after,
.wcag-yellow .nav-link::after {
  display: none !important;
}
.wcag-black [class*="u-nav-v8"] .nav-link.active .u-nav-v8__icon::before,
.wcag-yellow [class*="u-nav-v8"] .nav-link.active .u-nav-v8__icon::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 50%;
}
.wcag-black .u-heading-v10__upper,
.wcag-yellow .u-heading-v10__upper {
  color: white !important;
}
.wcag-black #map, #map *,
.wcag-yellow #map, #map * {
  background-color: transparent !important;
}
.wcag-black .site-main article .g-bg-white,
.wcag-yellow .site-main article .g-bg-white {
  background-color: black !important;
}
/*.wcag-black img, .wcag-yellow img {
  background-color: white !important;
}*/
.wcag-yellow *::selection {
  background: white !important;
}




.wcag {
  position: fixed;
  top: 150px;
  right: -200px;
  z-index: 999;
  transition: right .3s;
  display: flex;
}

.wcag.open {
  right: 0px;
}

.wcag .button {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black !important;
  color: #ff0 !important;
  cursor: pointer;
  font-size: 1.5rem;
  margin-top: 20px;
}

.wcag .button svg path {
  color: #ff0 !important;
}

.wcag .button:hover {
  color: white !important;
}

.wcag .button svg {
  transform: scale(1);
  transition: transform .3s;
  width: 30px;
}

.wcag .button:hover svg {
  transform: scale(1.2);
}

.wcag .body {
  border: 1px solid black !important;
  background-color: white !important;
  padding: 20px;
  width: 200px;
  height: 180px;
}

.wcag .body > div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50%;
  background-color: white !important;
}

.wcag .body > div .option {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid black !important;
  padding: 6px;
  cursor: pointer;
  height: 36px;
  width: 36px;
}

.wcag .body > div .option svg {
  width: 20px;
}

.wcag .body > div .option-normal,
.wcag .body > div .option-normal svg path {
  background-color: white !important;
  color: black !important;
}
.wcag .body > div .option-normal svg {
  background-color: white !important;
}

.wcag .body > div .option-black,
.wcag .body > div .option-black svg path {
  background-color: black !important;
  color: white !important;
}

.wcag .body > div .option-yellow,
.wcag .body > div .option-yellow svg path {
  background-color: black !important;
  color: #ff0 !important;
}

.wcag .body > div .option.active {
  border-color: #ff0 !important;
}


.wcag .button:focus-visible{
    outline:solid 3px red !important;
}
.wcag > div .option:focus-visible{
    outline:solid 3px red !important;
}
/*END WCAG 2.1*/