:root {
  --primary-color: #1E477A; /* Navy Blue from "CHANNING" text */
  --secondary-color: #3A7CA5; /* Medium Blue complementary to navy */

  --primary-color_light: #4ABED9; /* Teal Blue from network nodes */
  --secondary-color_light: #6B9BC0; /* Lighter version of Medium Blue */

  /* Accent color for the central node in the network diagram */
  --accent-color: #D63B3B; /* Red from central node */
  --accent-color_light: #E67A7A; /* Lighter red */

  --g3-color__bg-cloud: #F5F7FA; /* Light Gray */
  --g3-color__bg-coal: #4A5568; /* Dark Gray */
  --g3-color__gray: #606060; /* Medium-dark gray */
  --g3-color__lightgray: #D0D7E2; /* Medium Gray */
  --g3-color__smoke: #D0D7E2; /* Medium Gray */
  --g3-color__silver: #E7E7E7; /* Slightly lighter gray */
  --g3-color__black: #000000; /* Black */
  --g3-color__white: #FFFFFF; /* White */

  --g3-primary-btn__color: var(--g3-color__white);
  --g3-primary-btn__bg-color: var(--secondary-color);
  --g3-primary-btn__bg-color--hover: var(--secondary-color_light);
  --g3-primary-btn__border-color: var(--g3-color__lightgray);
  --g3-primary-btn__border-color--hover: var(--g3-color__gray);
  --g3-primary-btn__border-color--active: var(--g3-color__lightgray);

  --g3-secondary-btn__color: var(--g3-color__white);
  --g3-secondary-btn__bg-color: var(--secondary-color);
  --g3-secondary-btn__bg-color--hover: var(--secondary-color_light);
  --g3-secondary-btn__border-color: var(--g3-color__lightgray);
  --g3-secondary-btn__border-color--hover: var(--g3-color__gray);
  --g3-secondary-btn__border-color--active: var(--g3-color__lightgray);

  --g3-default-btn__color: var(--g3-color__gray);
  --g3-default-btn__color--hover: var(--g3-color__black);
  --g3-default-btn__color--active: var(--g3-color_lightgray);
  --g3-default-btn__bg-color: var(--g3-color__white);
  --g3-default-btn__border-color: var(--g3-color__gray);
  --g3-default-btn__border-color--hover: var(--g3-color__black);

  --g3-disabled-btn__color: var(--g3-color__lightgray);
  --g3-disabled-btn__bg-color: var(--g3-color__white);
  --g3-disabled-btn__border-color: var(--g3-color__silver);

  --g3-dropdown-item__bg-color: var(--g3-color__gray);
  --g3-dropdown-item__color: var(--g3-color__white);
  --g3-dropdown-menu__border-color: var(--g3-color__gray);

  --g3-footer-color: var(--g3-color__bg-coal);
  --g3-font__medium-weight: 500;
  --g3-font__semi-bold-weight: 600;
}

h1, h2, h3, h4,
.caption,
.form-h1, .form-h2, .form-caption {
    font-family: 'Martel', serif;
}

body,
.introduction,
.body,
.special-number,
.form-body,
.form-special-number {
    font-family: 'Roboto', sans-serif;
}

/* Buttons */

.data-dictionary__switch-button--active,
.popup__title {
  background-color: var(--primary-color);
}

/* Nav Bars and Footer */

.top-bar,
.top-bar__header,
.top-icon-button.body-typo {
  background-color: var(--secondary-color);
}

.top-bar__link {
  border-right: 2px solid #fff;
}

.nav-button:hover,
.button-active {
  border-bottom: 3px solid var(--primary-color);
}

.nav-bar__logo {
  padding: 15px 0;
}

.nav-bar__logo-img {
  height: 50px;
}

.nav-bar__link--home {
  padding-top: 4px;
  font-size: x-large;
  color: var(--primary-color);
}

.nav-bar__link--home:hover {
  color: var(--primary-color);
  opacity: 1;
  border-bottom: 0;
}

/* Login Page */

.login-page__side-box {
  min-height: 0;
}

.protected-content {
  min-height: 0;
}

/* Index Page */

.index-page__top {
  display: inline-flex;
  width: 80%;
  justify-content: space-between;
}

.index-page__bar-chart {
  max-width: 770px;
  width: 100%;
}

/* Introduction Page */

.introduction {
  width: 100%;
  position: relative;
}

.introduction__text {
  text-align: justify;
}

.introduction ul > li {
  list-style: disc;
  margin: 0 0 0 20px;
  padding: 5px 0;
}

/* Style for indents and attention */

.pl-8 {
  padding-left: 2rem;
}

/* Using Channing's accent color */
.border-nct-red {
  border-left: 8px solid var(--accent-color);
}

.border-l-8 {
  border-left-width: 8px;
}

.ml-1 {
  margin-left: 0.25rem;
}

/* Using Channing's accent color */
.text-nct-red {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.75;
  font-family: Montserrat, sans-serif;
}

.mr-5 {
  margin-right: 1.25rem;
}

.nct-btn {
  display: inline-block;
  text-align: center;
  padding: 0.375rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  border: 4px solid transparent;
  border-radius: 7px;
  background-color: var(--secondary-color);
}

.nct-btn a {
  color: inherit;
  text-decoration: inherit;
}

.nct-btn-rev,
.nct-btn:focus,
.nct-btn:hover {
  background-color: var(--secondary-color_light);
  border-color: var(--secondary-color_light);
  color: #fff;
}