:root {
  --lighter: hsl(0, 0%, 98%);
  --light: hsl(0, 0%, 88%);
  --dark: hsl(0, 0%, 12%);
  --darker: hsl(0, 0%, 6%);
  --positive-lighter: hsl(205, 100%, 88%);
  --positive-light: hsl(205, 100%, 66%);
  --positive: hsl(205, 100%, 39%);
  --positive-dark: hsl(205, 100%, 22%);
  --positive-darker: hsl(205, 100%, 12%);
  --balanced-lighter: hsl(160, 100%, 88%);
  --balanced-light: hsl(160, 100%, 66%);
  --balanced: hsl(160, 100%, 22%);
  --balanced-dark: hsl(160, 100%, 12%);
  --balanced-darker: hsl(160, 100%, 6%);
  --energized-lighter: hsl(40, 100%, 88%);
  --energized-light: hsl(40, 100%, 66%);
  --energized: hsl(40, 100%, 55%);
  --energized-dark: hsl(40, 100%, 22%);
  --energized-darker: hsl(40, 100%, 12%);
  --assertive-lighter: hsl(346, 100%, 88%);
  --assertive-light: hsl(346, 100%, 66%);
  --assertive: hsl(346, 100%, 44%);
  --assertive-dark: hsl(346, 100%, 22%);
  --assertive-darker: hsl(346, 100%, 12%);
  --juicy-lighter: hsl(323, 100%, 88%);
  --juicy-light: hsl(323, 100%, 66%);
  --juicy: hsl(323, 100%, 28%);
  --juicy-dark: hsl(323, 100%, 22%);
  --juicy-darker: hsl(323, 100%, 12%);
  --neutral-lighter: hsl(0, 0%, 88%);
  --neutral-light: hsl(0, 0%, 66%);
  --neutral: hsl(0, 0%, 44%);
  --neutral-dark: hsl(0, 0%, 22%);
  --neutral-darker: hsl(0, 0%, 12%);
  --alert-index: 99;
  --modal-index: 98;
  --modal-backdrop-index: 97;
  --small-breakpoint: 500px;
  --medium-breakpoint: 700px;
  --large-breakpoint: 900px;
  --wide-breakpoint: 1200px;
  --wider-breakpoint: 1600px;
}
/**
	This class removes the 'old-style' numerics on Raleway font
 */
.linedNumbers {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum" 1;
  -moz-font-feature-settings: "lnum=1";
  -o-font-feature-settings: "lnum" 1;
  -webkit-font-feature-settings: "lnum" 1;
  font-feature-settings: "lnum" 1;
}
.flex {
  display: flex;
}
.flex-row-wrap {
  flex-flow: row wrap;
}
.flex-row-nowrap {
  flex-flow: row nowrap;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-column {
  flex-flow: column;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}
.grid {
  --minimum-col-size: 100px;
  display: grid;
}
.grid-col-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(var(--minimum-col-size), 1fr));
}
.grid-col-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(var(--minimum-col-size), 1fr));
}
.grid-col-1 {
  grid-template-columns: 1fr;
}
.grid-col-2 {
  grid-template-columns: repeat(2, minmax(var(--minimum-col-size), 1fr));
}
.grid-col-3 {
  grid-template-columns: repeat(3, minmax(var(--minimum-col-size), 1fr));
}
.grid-col-4 {
  grid-template-columns: repeat(4, minmax(var(--minimum-col-size), 1fr));
}
.grid-col-5 {
  grid-template-columns: repeat(5, minmax(var(--minimum-col-size), 1fr));
}
.grid-col-6 {
  grid-template-columns: repeat(6, minmax(var(--minimum-col-size), 1fr));
}
.align-center {
  align-items: center;
}
.align-start {
  align-items: start;
}
.align-end {
  align-items: end;
}
.align-self-center {
  align-self: center;
}
.align-self-start {
  align-self: start;
}
.align-self-end {
  align-self: end;
}
.justify-center {
  justify-content: center;
}
.justify-start {
  justify-content: start;
}
.justify-end {
  justify-content: end;
}
.justify-space-between {
  justify-content: space-between;
}
.justify-space-around {
  justify-content: space-around;
}
.justify-space-evenly {
  justify-content: space-evenly;
}
.text-center {
  text-align: center;
}
.text-end {
  text-align: end;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-start {
  text-align: start;
}
.text-justify {
  text-align: justify;
}
/**
	For use with flexbox and grid layouts
	Will apply a gap on the vertical and horizontal axis unless otherwise specified
 */
.gap-4 {
  gap: 4px;
}
.gap-8 {
  gap: 8px;
}
.gap-16 {
  gap: 16px;
}
.gap-24 {
  gap: 24px;
}
.gap-48 {
  gap: 48px;
}
.container-300 {
  max-width: 300px;
}
.container-500 {
  max-width: 500px;
}
.container-700 {
  max-width: 700px;
}
.container-900 {
  max-width: 900px;
}
.container-1100 {
  max-width: 1100px;
}
.container-centered {
  margin-left: auto;
  margin-right: auto;
}
.container-padded {
  padding: 8px;
}
.padding-4 {
  padding: 4px;
}
.padding-8 {
  padding: 8px;
}
.padding-12 {
  padding: 12px;
}
.padding-16 {
  padding: 16px;
}
.padding-24 {
  padding: 24px;
}
.padding-32 {
  padding: 32px;
}
.padding-64 {
  padding: 64px;
}
.padding-top {
  padding-top: 8px;
}
.padding-bottom {
  padding-bottom: 8px;
}
.padding-right {
  padding-right: 8px;
}
.padding-left {
  padding-left: 8px;
}
.font-100 {
  font-weight: 100;
}
.font-200 {
  font-weight: 200;
}
.font-300 {
  font-weight: 300;
}
.font-400 {
  font-weight: 400;
}
.font-500 {
  font-weight: 500;
}
.font-600 {
  font-weight: 600;
}
.font-700 {
  font-weight: 700;
}
.font-800 {
  font-weight: 800;
}
.font-900 {
  font-weight: 900;
}
.font-italic {
  font-style: italic;
}
.positive-lighter {
  color: var(--positive-lighter);
}
.positive-light {
  color: var(--positive-light);
}
.positive {
  color: var(--positive);
}
.positive-dark {
  color: var(--positive-dark);
}
.positive-darker {
  color: var(--positive-darker);
}
.balanced-lighter {
  color: var(--balanced-lighter);
}
.balanced-light {
  color: var(--balanced-light);
}
.balanced {
  color: var(--balanced);
}
.balanced-dark {
  color: var(--balanced-dark);
}
.balanced-darker {
  color: var(--balanced-darker);
}
.assertive-lighter {
  color: var(--assertive-lighter);
}
.assertive-light {
  color: var(--assertive-light);
}
.assertive {
  color: var(--assertive);
}
.assertive-dark {
  color: var(--assertive-dark);
}
.assertive-darker {
  color: var(--assertive-darker);
}
.energized-lighter {
  color: var(--energized-lighter);
}
.energized-light {
  color: var(--energized-light);
}
.energized {
  color: var(--energized);
}
.energized-dark {
  color: var(--energized-dark);
}
.energized-darker {
  color: var(--energized-darker);
}
.juicy-lighter {
  color: var(--juicy-lighter);
}
.juicy-light {
  color: var(--juicy-light);
}
.juicy {
  color: var(--juicy);
}
.juicy-dark {
  color: var(--juicy-dark);
}
.juicy-darker {
  color: var(--juicy-darker);
}
.lighter {
  color: var(--lighter);
}
.light {
  color: var(--light);
}
.dark {
  color: var(--dark);
}
.darker {
  color: var(--darker);
}
.bg-positive-lighter {
  background-color: var(--positive-lighter);
}
.bg-positive-light {
  background-color: var(--positive-light);
}
.bg-positive {
  background-color: var(--positive);
}
.bg-positive-dark {
  background-color: var(--positive-dark);
}
.bg-positive-darker {
  background-color: var(--positive-darker);
}
.bg-balanced-lighter {
  background-color: var(--balanced-lighter);
}
.bg-balanced-light {
  background-color: var(--balanced-light);
}
.bg-balanced {
  background-color: var(--balanced);
}
.bg-balanced-dark {
  background-color: var(--balanced-dark);
}
.bg-balanced-darker {
  background-color: var(--balanced-darker);
}
.bg-assertive-lighter {
  background-color: var(--assertive-lighter);
}
.bg-assertive-light {
  background-color: var(--assertive-light);
}
.bg-assertive {
  background-color: var(--assertive);
}
.bg-assertive-dark {
  background-color: var(--assertive-dark);
}
.bg-assertive-darker {
  background-color: var(--assertive-darker);
}
.bg-energized-lighter {
  background-color: var(--energized-lighter);
}
.bg-energized-light {
  background-color: var(--energized-light);
}
.bg-energized {
  background-color: var(--energized);
}
.bg-energized-dark {
  background-color: var(--energized-dark);
}
.bg-energized-darker {
  background-color: var(--energized-darker);
}
.bg-juicy-lighter {
  background-color: var(--juicy-lighter);
}
.bg-juicy-light {
  background-color: var(--juicy-light);
}
.bg-juicy {
  background-color: var(--juicy);
}
.bg-juicy-dark {
  background-color: var(--juicy-dark);
}
.bg-juicy-darker {
  background-color: var(--juicy-darker);
}
.bg-lighter {
  background-color: var(--lighter);
}
.bg-light {
  background-color: var(--light);
}
.bg-dark {
  background-color: var(--dark);
}
.bg-darker {
  background-color: var(--darker);
}
.hid {
  display: none;
}
:root {
  --button-light-text: var(--lighter);
  --button-dark-text: var(--darker);
}
.button {
  font-size: 14px;
  color: var(--dark);
  background-color: var(--neutral-lighter);
  border: 2px solid var(--neutral-light);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  min-width: 42px;
  min-height: 42px;
  cursor: pointer;
  padding: 8px 16px;
}
.button:hover {
  opacity: 0.8;
}
.button-positive {
  background-color: var(--positive);
  color: var(--button-light-text);
  border: 2px solid var(--positive);
}
.button-positive.shade-lighter {
  background-color: var(--positive-lighter);
  color: var(--button-dark-text);
}
.button-positive.shade-light {
  background-color: var(--positive-light);
  color: var(--button-dark-text);
}
.button-positive.shade-dark {
  background-color: var(--positive-dark);
  color: var(--button-light-text);
}
.button-positive.shade-darker {
  background-color: var(--positive-darker);
  color: var(--button-light-text);
}
.button-positive.isGhost {
  background-color: var(--lighter);
  color: var(--positive);
}
.button-positive.isTransparent {
  background-color: transparent;
  color: var(--positive);
}
.button-balanced {
  background-color: var(--balanced);
  color: var(--button-light-text);
  border: 2px solid var(--balanced);
}
.button-balanced.shade-lighter {
  background-color: var(--balanced-lighter);
  color: var(--button-dark-text);
}
.button-balanced.shade-light {
  background-color: var(--balanced-light);
  color: var(--button-dark-text);
}
.button-balanced.shade-dark {
  background-color: var(--balanced-dark);
  color: var(--button-light-text);
}
.button-balanced.shade-darker {
  background-color: var(--balanced-darker);
  color: var(--button-light-text);
}
.button-balanced.isGhost {
  color: var(--balanced);
  background-color: var(--lighter);
}
.button-balanced.isTransparent {
  background-color: transparent;
  color: var(--balanced);
}
.button-assertive {
  background-color: var(--assertive);
  color: var(--button-light-text);
  border: 2px solid var(--assertive);
}
.button-assertive.shade-lighter {
  background-color: var(--assertive-lighter);
  color: var(--button-dark-text);
}
.button-assertive.shade-light {
  background-color: var(--assertive-light);
  color: var(--button-dark-text);
}
.button-assertive.shade-dark {
  background-color: var(--assertive-dark);
  color: var(--button-light-text);
}
.button-assertive.shade-darker {
  background-color: var(--assertive-darker);
  color: var(--button-light-text);
}
.button-assertive.isGhost {
  color: var(--assertive);
  background-color: var(--lighter);
}
.button-assertive.isTransparent {
  background-color: transparent;
  color: var(--assertive);
}
.button-energized {
  background-color: var(--energized);
  color: var(--button-dark-text);
  border: 2px solid var(--energized);
}
.button-energized.shade-lighter {
  background-color: var(--energized-lighter);
  color: var(--button-dark-text);
}
.button-energized.shade-light {
  background-color: var(--energized-light);
  color: var(--button-dark-text);
}
.button-energized.shade-dark {
  background-color: var(--energized-dark);
  color: var(--button-light-text);
}
.button-energized.shade-darker {
  background-color: var(--energized-darker);
  color: var(--button-light-text);
}
.button-energized.isGhost {
  color: var(--energized-dark);
  background-color: var(--lighter);
}
.button-energized.isTransparent {
  background-color: transparent;
  color: var(--energized);
}
.button-juicy {
  background-color: var(--juicy);
  color: var(--button-light-text);
  border: 2px solid var(--juicy);
}
.button-juicy.shade-lighter {
  background-color: var(--juicy-lighter);
  color: var(--button-dark-text);
}
.button-juicy.shade-light {
  background-color: var(--juicy-light);
  color: var(--button-dark-text);
}
.button-juicy.shade-dark {
  background-color: var(--juicy-dark);
  color: var(--button-light-text);
}
.button-juicy.shade-darker {
  background-color: var(--juicy-darker);
  color: var(--button-light-text);
}
.button-juicy.isGhost {
  color: var(--juicy);
  background-color: var(--lighter);
}
.button-juicy.isTransparent {
  background-color: transparent;
  color: var(--juicy);
}
.button-neutral {
  background-color: var(--neutral);
  color: var(--button-light-text);
  border: 2px solid var(--neutral);
}
.button-neutral.shade-lighter {
  background-color: var(--neutral-lighter);
  color: var(--button-dark-text);
}
.button-neutral.shade-light {
  background-color: var(--neutral-light);
  color: var(--button-dark-text);
}
.button-neutral.shade-dark {
  background-color: var(--neutral-dark);
  color: var(--button-light-text);
}
.button-neutral.shade-darker {
  background-color: var(--neutral-darker);
  color: var(--button-light-text);
}
.button-neutral.isGhost {
  color: var(--neutral);
  background-color: var(--lighter);
}
.button-neutral.isTransparent {
  background-color: transparent;
  color: var(--neutral);
}