/******************
Standard Styles
******************/
:root {
  --primary-fg: #03335F;
  --secondary-fg: #58ACCD;
  --highlight: #FFFEEA;
  --bg: #F7F7F7;
  --fg: #2F2F2F;
}

body {
  font-family: sans-serif;
  color: var(--fg);
  background: var(--bg);
}

div.header {
  padding-bottom: .5%;
}

.header img {
  width: 50%;
}

/* header icons */
.header .controls {
  float: right;
  padding-right: 1%;
  padding-top: 1%;
}

.header .controls label.menu-button-label {
  display: inline-block;
}
.header .controls label.menu-button-label input[type=checkbox], 
.header .controls label.menu-button-label input[type=checkbox] + i.menu + div.menu-display {
  display: none;
}
.header .controls label.menu-button-label input[type=checkbox]:checked + i.menu + div.menu-display {
  display: inline-block;
  width: min-content;
}
.header .controls label.menu-button-label input[type=checkbox]:checked + i.menu {
  background: var(--highlight);
}

.header .controls a.social-ig, 
.header .controls a.social-fb, 
.header .controls a.social-yt, 
.header .controls label.menu-button-label i.menu {
  color: var(--primary-fg);
}

.header .controls a.social-fb, 
.header .controls a.social-ig, 
.header .controls a.social-yt {
  font-size: xx-large;
  vertical-align: top;
}
.header .controls i.menu {
  font-size: xxx-large;
  margin-left: 20px;
}

div.content-body {
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: 65% 35%;
}

/******************
Menu
******************/
.header  .controls label.menu-button-label input[type=checkbox] + i.menu + div.menu-display {
  z-index: 1;
  position: absolute;
  top: .5%;
  right: 4%;
  border: 2px solid var(--primary-fg);
  border-radius: 10%;
  background: var(--highlight);
  font-weight: bold;
  font-size: larger;
  padding: 1%;
  width: min-content;
}
div.menu-display {
  white-space: nowrap;
}
div.menu-display div.menu-item.pending a {
  border: 1px red solid;
}
div.menu-display div.menu-item.pending i {
  color: red;
}

/******************
Mission Statement
******************/
div.mission-statement {
  display: none;
  z-index: 2;
  position: absolute;
  top: 10%;
  left: 5%;
  right: 5%;
  bottom: 2%;
  height: fit-content;
  width: fit-content;
  padding: 1%;
  border: 2px var(--primary-fg) solid;
  border-radius: 15px;
  font-weight: bold;
  background: var(--highlight);
}
div.mission-statement i.close-button {
  position: relative;
  float: right;
  padding: 3px;
  border: 1px var(--primary-fg) solid;
  border-radius: 5px;
}
.mission-statement-open {
  color: var(--secondary-fg);
}
.mission-statement-open:hover {
  color: var(--primary-fg);
}

/******************
Socials Icons (not in header)
******************/
i.social-fb, 
i.social-ig, 
i.social-yt,
i.social-x,
i.social-tt,
i.social-other {
  font-size: xx-large;
}


/******************
Some Generic Branding Styles
******************/
a {
  color: var(--secondary-fg);
}
a:hover {
  color: var(--primary-fg);
}
a:visited {
  color: var(--secondary-fg);
}

.header-dark {
  font-family: Impact, sans-serif;
  font-size: xx-large;
  text-align: center;
  color: var(--secondary-fg);
  background: var(--primary-fg);
}

.header-light {
  font-family: Impact, sans-serif;
  font-size: xx-large;
  text-align: center;
  color: var(--primary-fg);
  background: var(--secondary-fg);
}

.subheader-dark,
.subheader-dark a {
  font-family: Impact, sans-serif;
  font-size: large;
  font-weight: normal;
  color: var(--secondary-fg);
  background: var(--primary-fg);
  padding-left: 1%;
}

.subheader-light,
.subheader-light a {
  font-family: Impact, sans-serif;
  font-size: large;
  font-weight: normal;
  color: var(--primary-fg);
  background: var(--secondary-fg);
  padding-left: 1%;
}

/* Alternating table colors */
div.table-responsive table tbody tr:nth-child(even) {
  background: var(--highlight);
}

/* Colors */
.fg-dark {
  color: var(--primary-fg) !important;
}
.fg-light {
  color: var(--secondary-fg) !important;
}
.fg-highlight {
  color: var(--highlight) !important;
}

.bg-dark {
  background: var(--primary-fg);
}
.bg-light {
  background: var(--secondary-fg);
}
.bg-highlight {
  background: var(--highlight);
}

.good {
  color: green;
}
.bad {
  color: red;
}


/* Alignment */
.left {
  text-align: left;
  padding-left: 1%;
}
legend.left {
  text-align: left;
  padding-left: 1%;
}
.right {
  text-align: right;
}
.center {
  margin-left: auto;
  margin-right: auto;
}

/* border */
.border-thin-dark {
  border: 1px var(--primary-fg) solid;
}
.border-thick-dark {
  border: 1px var(--primary-fg) solid;
}
.border-thin-light {
  border: 1px var(--secondary-fg) solid;
}
.border-thick-light {
  border: 1px var(--secondary-fg) solid;
}

/* Width */
.w-100 {
  width: 100%;
}
.w-50 {
  width: 50%;
}
.w-25 {
  width: 25%;
}
.w-10 {
  width: 10%;
}
.row {
  width: 100%;
}

/* Weight */
.bold {
  font-weight: bold;
}
.italic {
  text-style: italic;
}

/* Size */
.small {
  font-size: small;
}
.smaller {
  font-size: smaller;
}
.big {
  font-size: large;
}
.bigger {
  font-size: larger;
}
.xl {
  font-size: x-large;
}
.xxl {
  font-size: xx-large;
}
.xxl {
  font-size: xxx-large;
}

/* Icons */
i.x-mark {
  color: red;
}
i.check-mark {
  color: green;
}

/* Button */
.button-dark {
  background: var(--primary-fg);
  text-transform: uppercase;
  text-align: center;
  width: max-content;
  padding: 1% 3%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  margin-bottom: 1%;
  border: 2px var(--secondary-fg) solid;
  border-radius: 5px;
}

.button, a.button {
  background: var(--secondary-fg);
  color: var(--primary-fg);
  font-size: small;
  border: 2px var(--primary-fg) solid;
  border-radius: 5px;
  padding: 0% .5%;
}
.button:hover, a.button:hover, button-dark:hover {
  background: var(--primary-fg);
  color: var(--highlight);
}

.clickable:hover {
  cursor: pointer;
}



/******************
 Filtered Headers
******************/
div.content-body div h3.filtered {
  font-family: Impact, sans-serif;
  font-size: xx-large;
  text-align: center;
  color: var(--secondary-fg);
  background: var(--primary-fg);
  width: 100%;
}

div.content-body div h3.filtered i.filter {
  float: left;
  margin-top: 1%;
  margin-left: 1%;
  font-size: smaller;
}
div.content-body div div.filters {
  display: inline-grid;
  grid-template-columns: 75% 25%;
  position: relative;
  border: 2px var(--primary-fg) solid;
  border-radius: 15px;
  height: fit-content;
  width: 100%;
  padding: 1%;
  margin-top: -2%;
  font-weight: bold;
  top: -.5%;
  background: var(--highlight);
  overflow: auto;
}
div.content-body div div.filters span {
  display: inline-block;
}
div.content-body div div.filters span.filter {
  display: inline-block;
  font-size: smaller;
  white-space: nowrap;
}
div.content-body div div.filters span.filter input {
  margin-bottom: unset;
}
div.content-body div div.filters span.filter input[type="button"],
div.content-body div div.filters span.filter input[type="submit"] {
  background-color: unset;
  border-color: unset;
  background-color: var(--secondary-fg);
  color: var(--primary-fg);
}