html,
body {
  height: 100%;
  margin: 0;
  font-family: "Whyte Book";
  font-size: 15px;
  background-color: #fff7f0;
}

/* Vera fonts */
@font-face {
  font-family: "Whyte Black";
  src: url(../fonts/ABCWhyte-Black.woff) format("woff");
  font-style: normal;
}

@font-face {
  font-family: "Whyte Bold";
  src: url(../fonts/ABCWhyte-Bold.woff) format("woff");
  font-style: normal;
}

@font-face {
  font-family: "Whyte Bold Italic";
  src: url(../fonts/ABCWhyte-BoldItalic.woff) format("woff");
  font-style: italic;
}

@font-face {
  font-family: "Whyte Medium";
  src: url(../fonts/ABCWhyte-Medium.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Whyte Book Italic";
  src: url(../fonts/ABCWhyte-BookItalic.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Whyte Book";
  src: url(../fonts/ABCWhyte-Book.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "GT Sectra Bold";
  src: url(../fonts/gt-sectra-bold-webfont.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}

#wrap {
  margin: 0 auto;
  width: 1000px;
}

.intro {
  width: 840px;
  margin: 0 auto 30px;
  font-size: 17px;
}

#intro {
  width: 840px;
  margin: -50px auto 0px;
  font-size: 17px;
}

p,
h3 {
  margin: 30px 0;
}

div.row:nth-child(odd) {
  background-color: #fffefd;
}

h1 {
  color: #2E1D97;
}

h3 {
  font-family: "GT Sectra Bold";
  font-size: 26px;
}

strong {
  font-family: "Whyte Bold";

}

#scrollDownAbout {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #2E1D97;
}

a:hover {
  text-decoration: underline;
  color: #2E1D97;
}

.data-source {
  font-size: 17px;
}

#var_choice {
  width: 84.7%;
  margin-right: 0px;
  display: flex;
  margin-left: auto;
  background-color: #160643;
  color: #fff;
  text-align: center;
  border-bottom: 1px solid #fff;
}

#type {
  display: flex;
  width: 847px;
  /* width: calc(100% - 100%/ 8); */
  margin-left: auto;
  margin-right: 0;
}

.thgroup {
  width: calc(100% / 2.5 + 145px) !important;
  padding: 10px 5px;
  background-color: #160643;
  color: #fff;
  text-align: center;
  font-weight: bold;
  border-right: 1px solid #fff;
}

.thgroup:last-of-type {
  width: calc(100%/8 + 67px) !important;
  border-right: 0px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.grid>div {
  display: flex;
  flex-basis: calc(100%/8 - 5.9px) !important;
  justify-content: center;
  flex-direction: column;
  padding: 5px;
}

.grid>div:last-of-type {
  display: flex;
  flex-basis: calc(100%/8 + 7px) !important;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
}

.box {
  margin: 0;
}

.box {
  color: #000;
  border: .2px solid #ddd;
}

.hrbox.order,
.grid>div.box:first-of-type {
  flex-basis: calc(100% / 31) !important;
}

.box.hrbox.selectProceedings {
  padding: 0 9px 0 0 !important;
  flex-basis: calc(100%/8 - 14px) !important;
}

.hrbox.state,
.grid>.box:nth-of-type(2) {
  text-align: left;
  flex-basis: calc(100% / 9 + 10px) !important;
}

/* .hrbox.totalProceedings,
.grid>.box:nth-of-type(3) {
  flex-basis: calc(100% / 12 + 14px) !important;
}

.hrbox.detainedTotalProceedings,
.grid>.box:nth-of-type(6) {
  flex-basis: calc(100% / 11 + 6px) !important;
} */

.grid>.box {
  text-align: right;
}

.hrbox {
  /* padding: 10px 10px 10px 0px !important; */
  font-weight: bold;
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position: center right;
  /* background-image: url('both.png'); */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f4f4f' d='M16.29 14.29L12 18.59l-4.29-4.3a1 1 0 00-1.42 1.42l5 5a1 1 0 001.42 0l5-5a1 1 0 00-1.42-1.42zM7.71 9.71L12 5.41l4.29 4.3a1 1 0 001.42 0 1 1 0 000-1.42l-5-5a1 1 0 00-1.42 0l-5 5a1 1 0 001.42 1.42z'/%3E%3C/svg%3E");
  text-align: left !important;
}

.hrbox.sortAsc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f4f4f' d='M11.29 11.46a1 1 0 001.42 0l3-3A1 1 0 1014.29 7L12 9.34 9.71 7a1 1 0 10-1.42 1.46zm3 1.08L12 14.84l-2.29-2.3A1 1 0 008.29 14l3 3a1 1 0 001.42 0l3-3a1 1 0 00-1.42-1.42z'/%3E%3C/svg%3E");
}

.hrbox.sortDesc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f4f4f' d='M12.71 12.54a1 1 0 00-1.42 0l-3 3A1 1 0 009.71 17L12 14.66 14.29 17a1 1 0 001.42 0 1 1 0 000-1.42zm-3-1.08L12 9.16l2.29 2.3a1 1 0 001.42 0 1 1 0 000-1.42l-3-3a1 1 0 00-1.42 0l-3 3a1 1 0 001.42 1.42z'/%3E%3C/svg%3E");
}

.hrbox.order,
.hrbox.order.sortAsc,
.hrbox.order.sortDesc {
  background-image: none !important;
}

.hrbox.state,
.box0 {
  padding: 10px 5px !important;
}

#about ol {
  padding-inline-start: 16px !important;
}

#about ol li {
  margin-bottom: 14px;
  font-size: 17px;
}

ol li::marker {
  font-family: "Whyte Bold";
  color: #2E1D97;
  font-weight: bold;
  font-size: 16px;
}

#year-select,
#month-select,
#var-select,
#change-select,
#docket-select {
  background-color: #97DFD1;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: 15px;
  text-transform: none;
  color: #000;
  font-weight: normal;
}

#var-select {
  margin: 10px auto;
}

#search {
  display: flex;
  margin-left: auto;
  margin-right: 8px;
  margin-bottom: 20px;
  padding: 10px;
}

#docket-select {
  width: 121px;
  height: 72px;
  padding: 0 !important;
  white-space: initial;
}

.darkmint {
  background-color: #97DFD1;
}

ol li {
  margin: 5px 30px;
}

ol ul li {
  margin: 5px 60px;
}

/* accordion */

:root {
  --primary: #2E1D97;
  --secondary: #ff5252;
  --background: #fff7f0;
  --highlight: #ffda79;
  /* Theme color */
  --theme: var(--primary);
}

/* *,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    display: grid;
    place-content: center;
    grid-template-columns: repeat(auto-fit, min(100%, 0));
    min-height: 100vh;
    place-items: start;
    gap: 1rem;
    margin: 0;
    padding: 1rem;
    color: var(--primary);
    background: var(--background);
} */

/* Core styles/functionality */
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.2s;
  padding: 0px 20px;
}

.tab input:checked~.tab__content {
  max-height: 80rem;
  padding: 20px;
}

/* Visual styles */
.accordion {
  color: #000;
  border: 1px solid;
  border-radius: 0.3rem;
  overflow: hidden;
}

.tab__label,
.tab__close {
  display: flex;
  color: white;
  background: var(--theme);
  cursor: pointer;
}

.tab__label {
  justify-content: space-between;
  padding: .5rem 1rem;
}

.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}

.tab input:checked+.tab__label::after {
  transform: rotate(270deg);
}

.tab__content p {
  margin: 0;
  padding: 1rem;
}

.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.accordion--radio {
  --theme: var(--secondary);
}

/* Arrow animation */
.tab input:not(:checked)+.tab__label:hover::after {
  animation: bounce .5s infinite;
}

@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }

  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}