/* Main */
main {
  min-height: calc(100vh - 96px);
}

.min-full-height {
  min-height: calc(100vh - 96px);
}


main[data-theme="dark"] {
  /* background: var(--black); */
}

main[data-theme="light"] {
  background: var(--white);
  --btn_border: 2px solid var(--black);
  --btn_color: var(--black);
  --theme_bg_color: var(--black);
  --theme_color: var(--black);
}

/* a { color: #336633; } */
a:hover {
  cursor: pointer;
  /* color: #336633; */
  /* font-weight: bold; */
}

.btn,
.btn-style {
  background: transparent;
  border: var(--btn_border);
  border-radius: var(--default_border_radius);
  color: var(--btn_color);
  font-size: .9375em;
  letter-spacing: 0.125em;
  padding: .6375em 1.375em;
}

  .btn:hover {
    background: var(--primary_a);
    color: var(--btn_color);
  } 

.arrow-right,
.arrow-left {
  background: var(--theme_color);
  display: inline-flex;
  height: 2px;
  position: relative;
  vertical-align: middle;
  width: 24px;
}

.arrow-right {
  margin-left: 4px;
}

.arrow-left {
  margin-right: 4px;
}

  .arrow-right::before,
  .arrow-right::after,
  .arrow-left::before,
  .arrow-left::after {
    background: var(--theme_color);
    content: "";
    height: 2px;
    position: absolute;
    transform-origin: 50% 50%;
    width: 10px;
  }

  .arrow-right::before,
  .arrow-right::after {
    right: -3px;
  }

  .arrow-left::before,
  .arrow-left::after {
    left: -3px;
  }

  .arrow-right::before,
  .arrow-left::before {
    top: -3px;
  }

  .arrow-right::before {
    transform: rotate(45deg);
  }

  .arrow-left::before {
    transform: rotate(-45deg);
  }

  .arrow-right::after,
  .arrow-left::after {
    bottom: -3px;
  }

  .arrow-right::after {
    transform: rotate(-45deg);
  }

  .arrow-left::after {
    transform: rotate(45deg);
  }

img {
  height: auto;
  max-width: 100%;
}

p {
  font-size: 1.125em;
  letter-spacing: 0.025em;
  line-height: 1.75;
  margin-bottom: var(--margin_bottom);
}

hr {
  margin: var(--margin_top) 0 var(--margin_bottom);
}

h1 {
  font-size: 2.5em;
  font-family: var(--font-sans-serif-bold);
  letter-spacing: var(--letter_spacing);
  line-height: 1.4375;
  margin-bottom: var(--margin_bottom);
  text-align: left;
}

h2 {
  font-size: 2.5em;
  font-family: var(--font-sans-serif-bold);
  letter-spacing: var(--letter_spacing);
  line-height: 1.4375;
}

h3 {
  color: var(--secondary_a);
  font-family: var(--font-sans-serif-extrabold);
  font-size: 1em;
  letter-spacing: var(--letter_spacing);
  margin: var(--margin_top) 0 var(--margin_bottom);
  text-transform: uppercase;
}

h2 span {
  font-size: .5em;
  font-family: var(--font-sans-serif);
}

h4 {
  font-size: 2em;
  font-family: var(--font-sans-serif-bold);
  letter-spacing: var(--letter_spacing);
  margin: 0 0 var(--margin_bottom);
}

h5 {
  font-size: 1.25em;
}

.accent-bg {
  background: var(--accent_bg);
}

.white-bg {
  background: var(--white);
}

#search-icon-label {
  border-color: var(--secondary_a);
  border-radius: 2em 0 0 2em;
  border-right: none;
  border-width: 2px;
  background: var(--white);
  padding: .375rem 1.125rem;
}

#search-text {
  border-radius: 0 2em 2em 0;
  border-left: none;
}


#export-links {
  list-style-type: none;
}
#export-links li a,
#export-links a,
#export-links li span{
  color: var(--link_color);
}

.text-right {
  text-align: right;  
}

.query-input-group::after {
  background: var(--secondary_a);
  content: '';
  height: 2em;
  position: absolute;
  right: 6em;
  top: .625em;
  width: 1px;
}

.arrow-right.search-arrow,
.arrow-right.search-arrow::before,
.arrow-right.search-arrow::after {
  background: var(--primary_a);
}

.arrow-right.search-arrow {
  position: absolute;
  right: 2.5em;
  top: 1.5625em;
  pointer-events: none;
}

.query-input-group {
  position: relative;
}

#query-form-submit {
  height: 100%;
  opacity: 0;
  pointer-events: all;
  position: absolute;
  right: 0;
  top: 0;
  width: 5em;
  z-index: 9;
}

/* Filter Category Checkboxs */
#filter-checkboxes {
  margin: var(--margin_top) auto;
}

#filter-checkboxes div {
  font-family: var(--font-sans-serif-extrabold);
  letter-spacing: 0.05em;
  position: relative;
}

#filter-checkboxes div p {
  font-family: var(--font-sans-serif);
  font-size: .875em;
}

#filter-checkboxes input[type=checkbox] {
  height: 80%;
  opacity: 0;
  position: absolute;
  width: 80%;
  z-index: 9;
}

#filter-checkboxes input[type=checkbox]:checked ~ label {
  background-color: var(--secondary_a);
}

#filter-checkboxes input[type=checkbox]:focus ~ label,
#filter-checkboxes input[type=checkbox]:active ~ label {
  outline: 2px solid var(--secondary_c);
}

#filter-checkboxes label {
  background: var(--white);
  border: 2px solid var(--secondary_a);
  display: inline-block;
  margin-bottom: 2px;
  margin-right: 4px;
  padding: 6px;
  vertical-align: middle;
}