body {
  --font-family: Lato, Helvetica;
  --primary-color: #075290;
  --dark-primary-color: #053861;
  --black-color: #333;
  --nav-bar-bg-color: #e7f3fe;
  --nav-bar-text-color: #333;
  --nav-bar-active-link: var(--black-color);
  --help-color: var(--primary-color);
  --help-hover-color: var(--primary-color);
  --main-header-bg-color: #fff;
  --search-header-bg-color: #f5f5f5;
  --term-header-bg-color: #f5f5f5;
  --section-header-bg-color: #666;
  --search-header-button-bg-color: white;
  --search-header-button-text-color: var(--black-color);;
  --button-bg-color: #666;
  --button-bg-color: white;
  --back-button-bg-color: var(--primary-color);
  --back-button-text-color: white;
}

/***********************************
  Control Overrides
***********************************/

/* Select Controls */
mat-select:focus .mat-select-placeholder {
  color: #075290;
}

mat-select:focus .mat-select-arrow {
  color: #075290 !important;
}

mat-select:focus .mat-select-underline {
  background-color: #075290 !important;
}

.mat-select-panel.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
  color: #075290;
}

/* Input Control */
mat-form-field.mat-focused .mat-input-placeholder {
  color: #075290;
}

mat-input-container.mat-focused .mat-input-placeholder {
  color: #075290;
}

.mat-form-field .mat-form-field-ripple {
  background-color: #075290 !important;
}

/* Checkbox Control */
mat-checkbox.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: #075290;
}

.mat-checkbox-ripple .mat-ripple-element {
  background-color: #075290 !important;
  opacity: .26;
}

/* Spinner */
mat-spinner.mat-progress-spinner circle, md-spinner.mat-spinner circle {
  stroke: #075290;
}

.mat-form-field.mat-focused label.mat-form-field-label {
    color: #053861;
}

/***********************************
  Main Header
***********************************/

.main-header[_ngcontent-c1] .mat-toolbar[_ngcontent-c1] {
  background-color: #fff;
}

.main-header .logo {
    height: 60px !important;
}

/***********************************
  Navigation Tab
***********************************/
nav .mat-tab-links {
  background-color: #e7f3fe;
}

nav .mat-tab-links a.mat-tab-link {
  color: #333;
}

nav .mat-tab-link.activeLink[_ngcontent-c0], nav .mat-tab-link.activeLink[_ngcontent-c1], nav .mat-tab-link.activeLink[_ngcontent-c2], nav .mat-tab-link.activeLink[_ngcontent-c3] {
  border-bottom: 2px solid #333;
}

.help-tab i {
  color: #075290 !important;
}

.help-tab:hover i {
  color: #075290 !important;
}

.nav-icon {
    color: black !important;
}

/***********************************
  Term Details
***********************************/
.term-header {
  background-color: #f5f5f5 !important;
}

.backButton {
  background-color: #075290 !important;
  color: #fff !important;
}

div.section-header-bar {
  background-color: #666;
}

/***********************************
  Search Grids
***********************************/

.base-table .base-cell {
  padding-bottom: 1em;
}

.base-cell.icon-cell {
  color: #075290 !important;
}

.fa-bullseye {
  color: #075290 !important;
}

/***********************************
  Custom Titlebar & Footer
***********************************/

.ca-custom-titlebar {
  background-color: #075290;
  color: white;
  display: flex;
  align-items: center;
  padding: 15px 25px;
  font-weight: bold;
  font-size: 18px;
}

.custom-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.custom-footer .footer-wrapper {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-flow: wrap;
  background-color: #333;
  color: white;
  padding: 15px;
}

.custom-footer .footer-subWrapper {
  background-color: white;
  color: #333;
  padding-top: 5px;
}

.custom-footer strong {
  font-weight: 900;
}

.custom-footer .col {
  padding-left: 15px;
  padding-right: 15px;
  flex: 0 0 100%;
}

.custom-footer .footer-wrapper:not(.footer-subWrapper) .col:first-of-type {
  margin-bottom: 30px;
}

.custom-footer ul {
  list-style: none;
}

.custom-footer .item {
  margin-top: 10px;
}

.custom-footer .footer-wrapper a, .custom-footer .footer-wrapper a:visited {
  color: white;
  text-decoration: none;
}

.custom-footer .footer-subWrapper a, .custom-footer .footer-subWrapper a:visited {
  color: #333;
}

@media (min-width: 768px) {
  .col {
      flex: 0 0 33.33%;
      max-width: 33.33%;
      margin-bottom: 0;
  }
}