.h3q-page-header {
  display: block;
  background: var(--color-base-active);
  margin: auto;
  height: 250px;
  width: 250px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url(../img/logo.svg);
  mask-image: url(../img/logo.svg);
}

.h3q-page-header-wrapper {
  display: none;
}

hr {
  display: none;
}

.h1,h1 {
  font-size: 20px;
}

.h2,h2 {
  font-size: 18px
}

.h3,h3 {
  font-size: 16px
}

.h4,h4 {
  font-size: 15px
}

.h5,h5 {
  font-size: 14px
}

.h6,h6 {
  font-size: 12px
}

.login-card {
  margin: auto;
  padding: 0;
  width: 375px;
}

.login-header .login-form-input-group {
  display: flex;
  justify-content: space-between;
}

.login-header label {
  color: var(--color-white);
  font-size: medium;
}

.login-input-group {
  display: flex;
  justify-content: space-between;
}

.login-input-control {
  background-color: var(--color-base-active);
  border: 1px solid var(--color-base-accent);
  border-radius: 4px;
  outline: 0;
  width: 100%;
  font-size: 16px;
  padding-top: 24px;
  padding-left: 10px;
  padding-bottom: 6px;
  margin: 0;
  z-index: 100;
}

.login-input-control:focus {
  background-color: var(--color-base-active);
}

#kc-content .login-form-input-group {
  position: relative;
  width: 100%;
  padding-top: 10px;
}

#kc-content .login-form-input-group label {
  color: var(--color-base-bright);
  position: absolute;
  font-size: 12px;
  margin-left: 10px;
  margin-top: 5px;
  z-index: 200;
}

#kc-content .login-form-input-group label {
  color: var(--color-base-bright);
  position: absolute;
  font-size: 12px;
  margin-left: 10px;
  margin-top: 5px;
  z-index: 200;
}

.login-input-control-wrapper .required {
  position: absolute;
  color: var(--color-base-bright);
  margin-top: 3px;
  margin-left: 3px;
  font-size: smaller;
}

.login-form-buttons {
  margin: 0;
}

.login-form-settings, .login-form-options {
  position: relative !important;
}

.login-form-settings label, .login-form-options label {
  position: relative !important;
  margin: 0 !important;
}

.login-form-settings .checkbox input, .login-form-options .checkbox input {
  accent-color: var(--color-primary-active);
}

.input-error {
  color: var(--color-red);
}

.kc-login-tooltip {
  display: flex;
  justify-content: space-between;
}

.icon-restart-flow {
  width: 14px;
  height: 14px;
  margin: auto;
  background: var(--color-primary);
  -webkit-mask-image: url(../img/restart.svg);
}

#try-another-way {
  display: block;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--color-secondary);
  color: var(--color-black);
  border: 1px solid var(--color-secondary-accent);
  text-align: center;
  padding: 5px;
}

#try-another-way:hover {
  background-color: var(--color-secondary-active);
}

/* Auth selector */
.select-auth-container {
  margin-top: 1em;
}

.select-auth-box {
  width: 100%;
  display: flex;
  color: var(--color-white);
  background-color: var(--color-base-active);
  border: 1px solid var(--color-base-accent);
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 1em;
  padding: 0.5em;
}

.select-auth-box:hover {
  background-color: var(--color-base-bright);
}

.select-auth-box-headline {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0.2em;
}

.select-auth-box-icon {
  width: fit-content;
}

.select-auth-box-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: start;
}

.auth-icon {
  width: 40px;
  height: 40px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 1em;
  margin-left: 0.5em;
  background: var(--color-white);
}

.icon-default {
   -webkit-mask-image: url(../img/key.svg);
   mask-image: url(../img/key.svg);
}

.icon-otp {
  -webkit-mask-image: url(../img/otp.svg);
  mask-image: url(../img/otp.svg);
 }

.icon-key {
   -webkit-mask-image: url(../img/key.svg);
   mask-image: url(../img/key.svg);
 }

.icon-bio {
   -webkit-mask-image: url(../img/bio.svg);
   mask-image: url(../img/bio.svg);
 }

.icon-password {
   -webkit-mask-image: url(../img/password.svg);
   mask-image: url(../img/password.svg);
 }

.icon-usb {
   -webkit-mask-image: url(../img/key.svg);
   mask-image: url(../img/key.svg);
}

.icon-nfc {
   -webkit-mask-image: url(../img/key.svg);
   mask-image: url(../img/key.svg);
}

.icon-ble {
   -webkit-mask-image: url(../img/key.svg);
   mask-image: url(../img/key.svg);
}