/* Create reusable swatches
================================================== */
.background-color-dark-grey {
  background: var(--color-dark-grey);
}

.text-color-dark-grey {
  color: var(--color-dark-grey);
}

.background-color-background-grey {
  background: var(--color-background-grey);
}

.text-color-background-grey {
  color: var(--color-background-grey);
}

.background-color-teal {
  background: var(--color-teal);
}

.text-color-teal {
  color: var(--color-teal);
}

.background-color-dark-teal {
  background: var(--color-dark-teal);
}

.text-color-dark-teal {
  color: var(--color-dark-teal);
}

.background-color-blue {
  background: var(--color-blue);
}

.text-color-blue {
  color: var(--color-blue);
}

.background-color-white {
  background: #fff;
}

.text-color-white {
  color: #fff;
}

.background-color-dark-blue {
  background: var(--color-dark-blue);
}

.text-color-dark-blue {
  color: var(--color-dark-blue);
}

/* Color scheme
================================================= */
a {
  color: var(--color-teal);
}
a:visited {
  color: var(--color-teal);
}
a:focus {
  color: var(--color-dark-blue);
}
a:hover {
  color: var(--color-dark-blue);
}

::placeholder {
  color: var(--color-dark-blue);
  opacity: 1;
}

.reverse-text-color {
  color: #FFF;
}
.reverse-text-color * {
  color: #FFF;
}
.reverse-text-color input,
.reverse-text-color select {
  background-color: #FFF;
  color: var(--color-dark-blue);
}
.reverse-text-color option {
  color: #000;
}
.reverse-text-color .gfield_validation_message {
  color: #FFF;
}
.reverse-text-color a {
  color: #FFF;
}
@media (hover: hover) {
  .reverse-text-color a:hover {
    color: var(--color-dark-grey);
  }
}