:root {
  --brushworksRed: #8F4438;
  --brushworksRedHighlight: #A24C3F;
  --brushworksWhite: #F5F5F5;
  --brushworksWhiteHighlight: #FFFFFF;
  --brushworksGrey: #5A5A5A;
  --brushworksGreyHighlight: #6E6E6E;
  --brushworksBlack: #000000;
  --brushworksBlackHighlight: #171717;
  --brushworksAccentYellow: #FFC000;
  --brushworksAccentYellowHighlight: #FFD408;
  --brushworksAccentBlue: #2196F3;
  --brushworksAccentBlueHighlight: #37A8FF;
  --swatchGrey1: #E8E8E8;
  --swatchGrey2: #E0E0E0;
  --swatchGrey3: #D8D8D8;
  --swatchGrey4: #D0D0D0;
  --swatchGrey5: #C8C8C8;
  --blackOpacity20: rgba(0, 0, 0, 0.2);
  --accentYellow: rgb(255, 192, 0);
  --accentYellowHighlight: rgb(255, 212, 8);
  --neutralDark: rgb(90, 90, 90);
  --neutralDarkHighlight: rgb(110, 110, 110);
  --neutralDarkTransparent: rgba(90, 90, 90, 0.85);
  --neutralLight: rgb(200, 200, 200);
  --neutralLightHighlight: rgb(220, 220, 220);
  --screenSizeMax: 2560px;
  --headerFontSize: calc(28px + 0.5vw);
  --defaultFontSize: calc(16px + 0.5vw);
  --secondaryFontSize: calc(10px + 0.5vw);
}

hr {
  border: 0;
  border-bottom: 1px solid;
  border-color: inherit;
}

/* Forms */
fieldset {
  margin: 1em 0;
  padding: 0;
  border: none;

  display: flex;
}

fieldset > div.labels, fieldset > div.inputs {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
fieldset > div.labels {margin-right: 1em;}
fieldset > div.inputs {flex-grow: 1;}

legend {
  margin: 0.5em 0;
  padding: 0;

  font-family: "Assistant", "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-size: calc(20px + 0.5vw);
}

/* Tables */
table {
  width: 100%;
  margin: 1em 0;
  border-spacing: 0;

  font-size: var(--secondaryFontSize);
  color: var(--brushworksBlack);
  background-color: var(--brushworksWhite);
}
tbody > tr:nth-of-type(odd) {background-color: #e8e8e8}

th, td {text-align: right;}
th:first-of-type, td:first-of-type {text-align: left;}

/* Contained Buttons */
button.containedButton {
  color: var(--brushworksWhite);
  background-color: var(--brushworksAccentBlue);
}
button.containedButton:hover:enabled, button.containedButton:focus:enabled {
  color: var(--brushworksWhiteHighlight);
  background-color: var(--brushworksAccentBlueHighlight);
}

/* Tabbed Navigation */
button.tab {
  color: var(--brushworksWhite);
  background-color: var(--brushworksGrey);
}
button.tab:hover:enabled, button.tab:focus:enabled {
  color: var(--brushworksWhiteHighlight);
  background-color: var(--brushworksGreyHighlight);
}
button.tab:active {transform: scaleY(0.99);}
button.tab.selected {
  font-weight: 700;

  background-color: var(--brushworksBlack);
}
button.tab.selected:disabled {opacity: 1;}

/* Link Buttons - styled to look and behave as true buttons */
a.linkButton {
  display: inline-block;
  padding: 1em;

  user-select: none;
  color: inherit;
  text-decoration: none;
}
a.linkButton:hover, a.linkButton:focus {
  background-color: var(--blackOpacity20);
}
a.linkButton:active {
  transform: scale(0.99);
}

a.linkButton.containedLinkButton {
  color: var(--brushworksWhite);
  background-color: var(--brushworksAccentBlue);
}
a.linkButton.containedLinkButton:hover, a.linkButton.containedLinkButton:focus {
  color: var(--brushworksWhiteHighlight);
  background-color: var(--brushworksAccentBlueHighlight);
}

/* Content Divs - styling designed to increase readability and improve aesthetics */
div.contentDiv {
  padding: 2em;

  color: var(--brushworksBlack);
  background-color: var(--brushworksWhite);
}

/* UTILITY CLASSES */

/* Flexbox Modifiers */
.flex {
  display: flex;
  flex-direction: column;
}
.flex.rowLayout {flex-direction: row;}
.flex.justifySpaceBetween {justify-content: space-between;}
.flex.justifyEnd {justify-content: flex-end;}

.flex-alignSelf-flexEnd {align-self: flex-end;}

/* SITEWIDE DESIGN COMPONENTS */

.contentFrame {
  margin: 1em;
  padding: 1em;
}

/* Buttons */
.button {
  display: inline-block;

  padding: 1em;
  
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
}
.button:hover {background-color: rgba(0, 0, 0, 0.2);}

.button.containedButtonLight {
  color: var(--brushworksBlack);
  background-color: var(--brushworksAccentYellow);
}
.button.containedButtonLight:hover {
  color: var(--brushworksBlackHighlight);
  background-color: var(--brushworksAccentYellowHighlight);
}

.button.containedButtonDark {
  color: var(--brushworksWhite);
  background-color: var(--brushworksGrey);
}
.button.containedButtonDark:hover {
  color: var(--brushworksWhiteHighlight);
  background-color: var(--brushworksGreyHighlight);
}

.button.iconButton > img {display: block;}

.button.roundButton {border-radius: 50%;}

/* Overlay Form */
div.overlayForm {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;

  height: 100%;
  width: 100%;

  background-color: rgba(0, 0, 0, 0.8);
}

div.overlayForm > form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 2em;

  display: flex;
  flex-direction: column;

  color: var(--brushworksBlack);
  background-color: var(--brushworksWhite);
}

.breadcrumbs {
  margin: 1em;

  font-size: var(--secondaryFontSize);
}