:root {
  --contrast: #121817;
  --font-white: white;
  --font-black: black;
}

body.contrast {
  background: var(--contrast) !important;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 13px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--background);
  border-radius: 50px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--Primary0);
  border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--Primary0);
}

.scrollbar-color::-webkit-scrollbar-thumb {
  background-color: #474A4D !important;
}

.contrast div,
.contrast section,
.contrast header,
.contrast footer,
.contrast ol,
.contrast ul,
.contrast li,
.contrast li {
  background: var(--contrast) !important;

}

.contrast a,
.contrast span,
.contrast input,
.contrast textarea,
.contrast legend,
.contrast ol,
.contrast ul,
.contrast li,
.contrast li,
.contrast legend,
.contrast em,
.contrast p,
.contrast b,
.contrast strong,
.contrast div,
.contrast h1,
.contrast h2,
.contrast h3,
.contrast h4,
.contrast h5,
.contrast h6 {
  color: var(--font-white) !important;
  box-shadow: var(--contrast) !important;
}

.contrast input::placeholder {
  color: #ffffff80;
}

.contrast ul li {
  border-color: var(--font-white);
}

.contrast i, .contrast iframe {
  filter: grayscale(1) !important;
}

.contrast a:hover, .contrast button:hover {
  background: var(--contrast) !important;
  border-color: var(--font-white) !important;
}

.contrast div,
.contrast button,
.contrast input,
.contrast textarea,
.contrast fieldset,
.contrast span,
.contrast p,
.contrast option,
.contrast select,
.contrast a,
.contrast form {
  background: var(--contrast) !important;
  border-color: var(--font-white) !important;
}

.constrast table,
.constrast table>tbody tr,
.constrast table>tbody tr>a,
.constrast table>tbody td,
.constrast table>tbody td>a,
.constrast table>tbody th,
.constrast table>tbody th>a,
.contrast table>tbody:first-child>tr:first-child th,
.contrast table>tbody:first-child>tr:first-child td,
.contrast tbody>tr:nth-child(odd)>td,
.contrast tbody>tr:nth-child(odd)>th,
.constrast tbody,
.constrast thead {
  background-color: var(--contrast) !important;
  color: var(--font-white) !important;
}

.contrast img {
filter: grayscale(1) !important;
}

.contrast #acessibilidade span, .contrast #acessibilidade i {
  color: initial !important;
}

.contrast select, .contrast textarea {
  background: transparent !important;
  color:  var(--font-white);
}

.contrast #acessibilidade a span {
  background-color: white !important;
}

.contrast .panel-primary>.panel-heading {
  background-color: var(--contrast) !important;
}

.contrast .panel-primary>.panel-heading *{
  color: var(--font-white) !important;
}