/* Oldschool vars */
/* We can't use a css var here (https://www.w3.org/TR/css-variables-1/#using-variables)
 * "The var() function can not be used as property names, selectors, or anything else besides property values."
 * And in media queries.
 * We are waiting for:
 * https://www.w3.org/TR/mediaqueries-5/#custom-mq
 * or
 * https://drafts.csswg.org/css-env-1/
*/
/* Cyan and orange */
@font-face {
  font-family: 'PTRootUI';
  src: url('/static/files/fonts/PT_Root_UI_Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'PTRootUI';
  src: url('/static/files/fonts/PT_Root_UI_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'PTRootUI';
  src: url('/static/files/fonts/PT_Root_UI_Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'PTRootUI';
  src: url('/static/files/fonts/PT_Root_UI_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
/* */
@font-face {
  font-family: 'ALS_Hauss';
  src: url('/static/files/fonts/als_hauss_medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'ALS_Hauss';
  src: url('/static/files/fonts/als_hauss_light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'ALS_Hauss';
  src: url('/static/files/fonts/als_hauss_regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'ALS_Hauss';
  src: url('/static/files/fonts/als_hauss_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
/* fallback theme */
:root {
  /* Oldschool vars */
  --ff: Tahoma, sans-serif;
  --main-fs: 12px;
  --main-color: #555;
  --control-radius: 0;
  --header-height: 55px;
  --aside-width: 360px;
  --logo-width: 250px;
  --grey-filter: invert(52%) sepia(1%) saturate(0%) hue-rotate(4deg) brightness(95%) contrast(91%);
  --orange-filter: invert(78%) sepia(44%) saturate(1792%) hue-rotate(334deg) brightness(103%) contrast(91%);
  /* Cyan and orange */
  --accent-high: #e79824;
  --main-high: #009688;
  --main-medium: #0DB99F;
  --background-color: #F2FAF9;
  --default-font: PTRootUI, sans-serif;
  --border-radius: 4px;
  --border-radius-circle: 50%;
  --box-shadow: 0 2px 5px rgba(0, 150, 136, 0.15);
}
html,
body {
  font-family: var(--default-font);
}
body {
  overflow-y: scroll;
}
input {
  outline-color: var(--accent-high);
}
.auth {
  min-height: 100vh;
  min-width: 320px;
}
.auth-list {
  padding: 30px 25px;
}
@media (min-width: 768px) {
  .auth-list {
    max-width: 540px;
    margin: 0 auto;
  }
}
.auth-list .logo {
  width: 155px;
  display: block;
  margin: 0 auto;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .auth-list .logo {
    position: absolute;
    left: 44px;
    margin-top: -16px;
  }
}
.auth-list .welcome-text {
  font-size: 18px;
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}
@media (min-width: 768px) {
  .auth-list .welcome-text {
    margin-top: 80px;
    margin-bottom: 32px;
    font-size: 24px;
    line-height: 32px;
  }
}
.auth-list input.filter-oauth {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px 13px 48px;
  border: 0;
  border-radius: var(--border-radius);
  font-family: inherit;
  margin-top: 16px;
  background: url('/static/img/icons/search.svg') 16px center no-repeat;
  background-color: #F8F8F8;
  margin-bottom: 21px;
}
@media (min-width: 768px) {
  .auth-list input.filter-oauth {
    padding-top: 21px;
    padding-bottom: 23px;
  }
}
.auth-list .oauth {
  margin-bottom: 30px;
  border: 1px solid var(--main-high);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.auth-list .oauth .link,
.auth-list .oauth .hardlink {
  display: block;
  padding: 19px 24px;
  font-size: 19px;
  line-height: 24px;
  color: var(--main-high);
  border-bottom: 1px solid var(--main-high);
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.auth-list .oauth .link:hover,
.auth-list .oauth .hardlink:hover {
  background-color: var(--background-color);
}
.auth-list .oauth .link.hidden,
.auth-list .oauth .hardlink.hidden {
  display: none;
}
.auth-list .oauth .hardlink {
  border-bottom: 0;
}
.auth-form {
  min-height: 100vh;
  box-sizing: border-box;
  background-color: var(--background-color);
  padding: 25px;
  padding-top: 112px;
}
.auth-form .back {
  position: absolute;
  width: 44px;
  height: 44px;
  left: 30px;
  top: 30px;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius-circle);
  background: url('/static/img/icons/auth_back.svg') 45% center no-repeat;
  background-color: #FFFFFF;
}
.auth-form .form {
  padding: 25px 16px 35px;
  background: #FFFFFF;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  max-width: 540px;
  margin: 0 auto;
}
@media (min-width: 540px) {
  .auth-form .form {
    padding-left: 46px;
    padding-right: 46px;
  }
}
.auth-form .form .logo {
  display: block;
  margin: 0 auto;
  max-width: 180px;
  margin-bottom: 15px;
}
@media (min-width: 540px) {
  .auth-form .form .logo {
    max-width: 250px;
    margin-bottom: 30px;
  }
}
.auth-form .form .auth-error {
  text-align: center;
  color: #EC062F;
  margin-bottom: 25px;
}
.auth-form .form .auth-field {
  margin-bottom: 12px;
}
@media (min-width: 540px) {
  .auth-form .form .auth-field {
    margin-bottom: 16px;
  }
}
.auth-form .form .auth-field .input {
  box-sizing: border-box;
  width: 100%;
  background: #F8F8F8;
  border: 0;
  border-radius: var(--border-radius);
  font-size: 16px;
  line-height: 24px;
  font-family: inherit;
  padding: 9px 12px 11px;
}
.auth-form .form .auth-field .label {
  padding-left: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}
.auth-form .form .field-error {
  color: #EC062F;
  padding: 4px 12px;
}
.auth-form .form .message {
  text-align: center;
  margin-bottom: 25px;
  padding: 4px 12px;
}
.auth-form .form .message .info {
  color: #000;
}
.auth-form .form .auth-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 32px;
}
.auth-form .form .auth-actions .button {
  font-family: inherit;
  font-size: 19px;
  line-height: 24px;
  color: #FFFFFF;
  border: 0;
  background-color: var(--main-high);
  border-radius: var(--border-radius);
  padding: 11px 45px 13px;
  transition: all 0.3s ease;
}
.auth-form .form .auth-actions .button:hover {
  background-color: var(--main-medium);
  box-shadow: var(--box-shadow);
}
.auth-form .action-link {
  margin-top: 16px;
  text-align: center;
}
.auth-form .action-link a {
  color: var(--main-high);
  text-decoration: none;
}
.auth-form .language-picker {
  width: 100%;
  margin: 0;
}
.auth-form .language-picker select {
  display: block;
  width: 80%;
  margin: 32px auto;
}
@media (min-width: 768px) {
  .auth-form .language-picker {
    width: auto;
  }
  .auth-form .language-picker select {
    width: auto;
    margin: 0;
  }
}
.tech-problem {
  margin: 70px 30px;
  text-align: center;
}
.keycloak-login {
  text-decoration: none;
  padding: 20px;
  color: #ccc;
  margin-top: -60px;
  float: right;
}
.language-picker {
  margin-bottom: 32px;
}
.language-picker select {
  width: 100%;
  box-shadow: var(--box-shadow);
}
@media (min-width: 768px) {
  .language-picker {
    position: absolute;
    left: auto;
    right: 30px;
    top: 30px;
  }
}
.hidden {
  display: none;
}
.maintenance {
  margin-block-start: 130px;
  display: flex;
  justify-self: center;
  color: var(--main-high);
}
.maintenance__container {
  width: 680px;
}
.maintenance__icon {
  margin-block-end: 33px;
  margin-inline-start: 19px;
  height: auto;
}
.maintenance__title {
  font-size: 32px;
  font-weight: 500;
  margin-block-end: 24px;
}
.maintenance__message {
  font-size: 18px;
  font-weight: 400;
}