@font-face {
  font-family: "Open Sans";
  font-style: normal;
  src: url("../fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}

body {
  --hel-blue: #1566ac;
  --hel-bright-blue: #2586da;
  --hel-placeholder: #b3b3b3;
  --hel-border: #dddddd;
  --hel-brand-grey: #3a3c3c;
  --hel-danger-red: #ed0024;
  --hel-alert-yellow: #ffe100;
  --hel-label: #757575;
  --hel-blue-hover: #0072d4;
  --hel-gray-hover: #757575;
  --hel-muted-danger-red: #c91010;
  --hel-muted-danger-hover-red: #ed0024;

  --pf-v5-global--Color--light-100: var(--hel-brand-grey);
  --pf-v5-c-page__header--BackgroundColor: #ffffff;
  --pf-v5-c-page__sidebar--BackgroundColor: #f9f9f9;
  --pf-v5-c-page--BackgroundColor: #ffffff;

  /* --pf-global--Color--100: #004080; */
  --pf-v5-global--BackgroundColor--dark-200: #f9f9f9;
  --pf-v5-c-nav__link--hover--Color: #f9f9f9;
  --pf-v5-global--BackgroundColor--dark-400: var(--hel-placeholder);

  --pf-v5-global--FontSize--sm: 12px;
  --pf-v5-global--FontSize--md: 14px;
  --pf-v5-global--FontSize--lg: 16px;
  --pf-v5-c-form__label--LineHeight: 1.66666667;
  --pf-v5-global--gutter--md: 0.5rem;

  color: var(--hel-brand-grey) !important;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.pf-v5-c-masthead,
.pf-v5-c-toolbar {
  background-color: #ffffff;
}

.pf-v5-c-title {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 100 !important;
}

.pf-v5-c-masthead__brand {
  height: 100%;
  padding: 1px 0px 5px;
  img {
    height: unset;
  }
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(
    --pf-v5-global--BorderColor--300
  );
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(
    --pf-v5-global--BorderColor--300
  );
  --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(
    --pf-v5-global--BorderColor--300
  );
}

.pf-v5-c-avatar {
  display: none;
}

#nav-toggle {
  color: var(--hel-placeholder) !important;
  &:hover {
    color: var(--hel-blue) !important;
  }
}

.pf-v5-c-nav__link:active,
.pf-v5-c-nav__link:focus {
  font-weight: normal;
  background-color: unset;
}

.pf-v5-c-nav__link:after {
  border-color: var(--hel-blue) !important;
}

.pf-v5-c-nav__link:hover {
  border-color: var(--hel-gray-hover) !important;
  border-right: 4px solid;
  color: var(--hel-gray-hover);
}

.pf-v5-c-nav__link.pf-m-current {
  font-weight: bold;
  background-color: unset;
}

.pf-v5-c-nav__link.pf-m-current:hover {
  background-color: unset;
  color: var(--hel-gray-hover);
}

.pf-v5-c-masthead {
  border-bottom: 1px solid #dddddd;
}

.pf-v5-c-nav__toggle-icon,
.pf-v5-c-expandable-section__toggle-icon {
  color: var(--hel-blue) !important;
}

.pf-v5-c-expandable-section__toggle-text {
  color: var(--hel-blue);
  font-weight: 600;
  &:hover {
    text-decoration: underline;
  }
}

.pf-v5-c-form__label-text {
  color: var(--hel-label);
  font-size: var(--pf-v5-global--FontSize--sm);
  font-weight: 600 !important;
}

.pf-v5-c-button {
  color: #fff !important;
  font-weight: bold;

  &.pf-m-primary {
    background-color: var(--hel-blue);

    &:hover {
      background-color: var(--hel-blue-hover);
      border-color: var(--hel-blue);
    }
  }

  &.pf-m-secondary {
    color: var(--hel-blue) !important;
  }

  &.pf-m-link {
    background-color: var(--hel-placeholder);
    border: 0;

    &:hover {
      background-color: #cccccc;
      border-color: var(--hel-blue);
    }
  }
}

.pf-v5-c-jump-links {
  display: none;
}

.pf-v5-c-form-control > :is(input, select, textarea) {
  color: var(--hel-brand-grey);
  border-color: var(--hel-border);
  border: 1px solid #bbb;
  border-radius: 1px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.pf-v5-c-form-control:after {
  border-block-end: var(--pf-v5-c-form-control--after--BorderBottomWidth)
    var(--pf-v5-c-form-control--after--BorderStyle, solid) var(--hel-border);
}

.pf-v5-c-form-control > :is(input, select, textarea):focus,
.pf-v5-c-form-control > :is(input, select, textarea):hover {
  outline-offset: var(--pf-v5-c-form-control--OutlineOffset);
  border: 1px solid var(--hel-bright-blue);
  outline: none;
  box-shadow: none !important;
}

.pf-v5-c-alert.pf-m-danger {
  --pf-v5-c-alert--BorderTopColor: var(--hel-muted-danger-red);
  --pf-v5-c-alert__icon--Color: var(--hel-muted-danger-red);
  --pf-v5-c-alert__title--Color: var(--hel-muted-danger-red);
}

.pf-v5-c-button.pf-m-danger {
  background-color: var(--hel-danger-red);
}

input:read-only {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

#update-email-btn {
  background-color: var(--hel-blue);
  margin-left: 6px;

  &:hover {
    background-color: var(--hel-blue-hover);
    border-color: var(--hel-blue);
  }
}

#cancel-btn {
  color: var(--hel-blue) !important;
  background-color: var(--pf-v5-c-button--m-secondary--BackgroundColor);
  border-color: var(--hel-blue);
  &:after {
    border-color: var(--hel-blue);
  }
}

#delete-account-btn {
  background-color: var(--hel-muted-danger-red);
  &:hover {
    background-color: var(--hel-muted-danger-hover-red);
  }
}

.cred-title {
  font-weight: bold;
}