:root {
  --gel-light-blue-100: #DEF2FB;
  --gel-blue-300: #3ba9ff;
  --gel-green-100: #afe7a5;
  --gel-green-900: #1a4412;
  --gel-red-100: #f1c2c2;
  --gel-red-600: #CD2F2FFF;
  --gel-red-900: #821e1e;
  --gel-yellow-100: #fdebbe;
  --gel-yellow-900: #775603;
  --gel-blue-100: #cce0ef;
  --gel-blue-900: #001423;
  --gel-slate: #8299ae;
  --gel-slate-300: #bac6d2;
  --gel-slate-700: #2f3d49;
  /* move these out of here and fix the usages of them */;
  --stage-gray: #536A81;
  --linkedin-primary: #0077B5;
  --text-grey: #8299ae;
}

#gel_header {
  clear: both;
  background-color: white;
  padding: 1.25rem 0;
  transition: padding 0.5s ease;
  border-bottom: solid 1px var(--gel-slate-300);

  h1.page-title {
    margin: 0;
    transition: font-size 0.5s ease;
  }

  h6 {
    font-size: 12px;
  }
}

/* alerts */
.alert {
  --bs-alert-padding-x: 3rem;
  min-height: 3.25rem;
  ul,
  ol {
    padding: 0;
    margin: 1rem 0 0 1rem;
  }
}

.alert-success {
  --bs-alert-bg: var(--gel-green-100);
  --bs-alert-border-color: var(--gel-green-100);
  --bs-alert-color: var(--gel-green-900);
}

.alert-danger {
  --bs-alert-bg: var(--gel-red-100);
  --bs-alert-border-color: var(--gel-red-100);
  --bs-alert-color: var(--gel-red-900);
}

.alert-warning {
  --bs-alert-bg: var(--gel-yellow-100);
  --bs-alert-border-color: var(--gel-yellow-100);
  --bs-alert-color: var(--gel-yellow-900);
}

.alert-info {
  --bs-alert-bg: var(--gel-blue-100);
  --bs-alert-border-color: var(--gel-blue-100);
  --bs-alert-color: var(--gel-blue-900);
}

/* breadcrumbs */
.breadcrumb {
  background: none;
  padding: 0;
  margin: 0;

  & > li {
    height: 32px;
    line-height: 32px;

    &+ li:before {
      content: "\f054";
      font-family: "Font Awesome 7 Free";
      font-weight: 900;
      vertical-align: top;
      color: #ffffff;
      margin: 0 0.25rem;
    }

    &.dropdown {
      &:hover {
        ul.dropdown-menu {
          display: block;
          margin-top: 0;
          margin-left: 8px;
        }
      }
    }
  }
}