/**
 * Variables
 */
@media screen and (min-width: 1200px) {
  :root {
    --ekz-logo__size: 8rem;
  }
}

@font-face {
    font-family: 'Univers LT W01_55 Roman1475956';
    src: url('../fonts/9fa24f1f-00d8-4d28-910f-78e925eaead6.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Univers LT W01_55 Roman1475956';
    src: url('../fonts/8a711a0d-3f17-4bfe-887b-6229858332b3.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ekz-logo__size: 6rem;
  --qs-color-primary: #008bca;
  --qs-color-primary--dark: #005ea1;
  --qs-color-primary--darker: #002954;
  --pf-global--root--FontSize: 100%;
  --pf-global--BoxShadow--lg: 0 4px 72px 0 rgba(0, 0, 0, 0.08);
  --pf-global--danger-color--200: red;
  --pf-global--FontFamily--sans-serif: "Univers LT W01_55 Roman1475956",
    sans-serif;
  --pf-global--FontFamily--heading--sans-serif: "Univers LT W01_55 Roman1475956",
    sans-serif;
  --pf-c-form__helper-text--FontSize: 1.2rem;
  --pf-c-alert__icon--FontSize: 2.4rem;
  --pf-c-title--m-xl--FontWeight: 700;
  --pf-c-dropdown__toggle--m-plain--Color: white;
  --pf-c-dropdown__toggle-icon--Color: white;
  --pf-c-dropdown__toggle-icon--MarginRight: 0;
}

/**
 * General EKZ Styles
 */
#app {
  color: black;
  padding: 2.5rem;
  margin: 0;
  padding: 0;
  font-family: "Univers LT W01_55 Roman1475956", sans-serif;
  font-weight: 200;
}

.pf-c-content h1:first-child {
  margin-top: calc(var(--ekz-logo__size) + 2.5rem);
}

.pf-c-content {
  .pf-c-title {
    --pf-c-content--heading--FontFamily: "Univers LT W01_55 Roman1475956",
      sans-serif;

    margin-top: 3.2rem;
    font-family: "Univers LT W01_55 Roman1475956", sans-serif;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
  }

  & h1 {
    font-size: 2.5rem;
  }

  & h2 {
    font-size: 1.75rem;
  }

  & h3 {
    font-size: 1.25rem;
  }

  & h4 {
    font-size: 1.25rem;
  }

  & h5 {
    font-size: 1rem;
  }
}

@media screen and (min-width: 1600px) {
  .pf-c-content h1.pf-m-2xl {
    font-size: 3.5rem;
  }

  .pf-c-content h2 {
    font-size: 2.5rem;
  }

  .pf-c-content h3 {
    font-size: 1.5rem;
  }

  .pf-c-content p {
    font-size: 1.25rem;
  }
}

.pf-c-page {
  --pf-global--BackgroundColor--light-300: white;
  --pf-c-page__header--MinHeight: 41px;
  --pf-c-page__header-tools--MarginRight: 1rem;
}

.pf-c-page__header,
.pf-c-page__main {
  position: relative;
  margin: 0 auto;
  padding: 0 2.5rem;
  max-width: 659px;
  width: 100%;
}

.pf-c-page__main-section .pf-c-title {
    font-weight: 700;
}

.pf-c-page__header-tools-group {
  gap: 1.25rem;
  flex-direction: row-reverse;
}

@media screen and (min-width: 768px) {
  .pf-c-page__header-tools-group {
    flex-direction: row;
  }
}

.pf-c-page__header-tools-item .pf-c-button.pf-m-link.pf-m-inline {
  color: var(--qs-color-primary);
  text-decoration: none;

  &:hover {
    color: var(--qs-color-primary--dark);
  }

  &:active {
    color: var(--qs-color-primary--darker);
  }

  .pf-c-button__icon {
    display: none;
  }
}

@media screen and (min-width: 700px) {

  .pf-c-page__header,
  .pf-c-page__main {
    max-width: 839px;
  }
}

@media screen and (min-width: 900px) {

  .pf-c-page__header,
  .pf-c-page__main {
    max-width: 1119px;
  }
}

@media screen and (min-width: 1200px) {

  .pf-c-page__header,
  .pf-c-page__main {
    max-width: 1120px;
    padding: 0;
  }
}

@media screen and (min-width: 1600px) {

  .pf-c-page__header,
  .pf-c-page__main {
    max-width: 1360px;
  }
}

.pf-c-select {
  --pf-c-select__toggle--before--BorderTopColor: transparent;
  --pf-c-select__toggle--before--BorderRightColor: transparent;
  --pf-c-select__toggle--before--BorderBottomColor: black;
  --pf-c-select__toggle--before--BorderLeftColor: transparent;
}

.pf-c-form-control {
  --pf-c-form-control--BorderTopColor: transparent;
  --pf-c-form-control--BorderRightColor: transparent;
  --pf-c-form-control--BorderBottomColor: black;
  --pf-c-form-control--BorderLeftColor: transparent;
}

.pf-c-avatar,
#nav-toggle,
#page-sidebar,
.pf-c-jump-links,
.pf-c-form>.pf-c-form__group:first-child,
.pf-c-form>.pf-c-form__group:nth-child(2):not(.pf-m-action),
#cancel-btn {
  display: none;
}

/**
 * Header Styles
 */
.pf-c-page__header {
  background: white;
  position: relative;
  height: 2.5rem;
}

.pf-c-page__header .pf-c-button {
  --pf-c-button--m-primary--Color: var(--qs-color-primary);
  --pf-c-button--m-primary--hover--Color: var(--qs-color-primary--dark);
  --pf-c-button--m-primary--active--Color: var(--qs-color-primary--darker);
}

.pf-c-page__header-brand {
  position: relative;
}

.pf-c-page__header-brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2rem;

  & .pf-c-brand {
    width: var(--ekz-logo__size);
    height: var(--ekz-logo__size);
    max-height: unset;
    max-width: unset;
  }
}

.pf-c-page__header .pf-c-dropdown {
  background-color: var(--qs-color-primary);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;

  &:hover {
    background-color: var(--qs-color-primary--dark);
  }

  &:active {
    background-color: var(--qs-color-primary--darker);
  }
}

.pf-c-dropdown__toggle.pf-m-plain {
  --pf-c-dropdown__toggle-icon--Color: white;
  min-height: var(--pf-c-page__header--MinHeight);
  box-sizing: border-box;
}

/**
 * Form Styles
 */
.pf-c-form-control {
  font-size: 1.25rem;
}

.pf-c-button.pf-m-primary {
  background-color: var(--qs-color-primary);
  color: white;
  border-radius: 0;
  padding: 1rem 2.5rem;
  font-weight: 700;
  font-size: 1.25rem;

  &:hover {
    background-color: var(--qs-color-primary--dark);
  }

  &:active {
    background-color: var(--qs-color-primary--darker);
  }
}

.pf-c-page__main,
.pf-c-page__drawer {
  overflow: initial;
}

.pf-c-page__header-tools {
  position: fixed;
  right: 1.25rem;
}

@media screen and (min-width: 768px) {
  .pf-c-page__header-tools {
    right: 2.25rem;
  }
}

@media screen and (min-width: 1200px) {
  .pf-c-page__header-tools {
    right: calc((100vw - 1120px) / 2);
  }
}

@media screen and (min-width: 1600px) {
  .pf-c-page__header-tools {
    right: calc((100vw - 1360px) / 2);
  }
}
