@import url(styles-elements.css);
@import url(color.css);

@import url(single-classes.css);

@import url(layout/login-reset-password.css);

@import url(elements/dialog.css);
@import url(elements/header.css);
@import url(elements/input.css);
@import url(elements/password-policy.css);

html {
  height: 100%;
  color: var(--aok-black-1);
  min-width: 1000px;
  font-variant-ligatures: none;
}

.alert-message {
  color: #f74054;
}

.alert-message .required::after {
  color: var(--aok-error);
}

.required::after {
  content: " *";
}

body {
  background: var(--aok-white);
  margin: 0;
  height: 100%;
}

#page-wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: min-content auto min-content;
}

#header-wrapper {
  background-color: var(--aok-white);
  position: sticky;
  top: 0;
  z-index: +2;
}

#kc-form-wrapper input {
  width: 100%;
}

.hidden {
  display: none !important;
}

input::-ms-reveal,
input::-ms-clear {
  display: none;
}

.hide-element {
  visibility: hidden;
  display: none;
}

.alert-info-hidden {
  display: none;
}

input[type="password"] {
  letter-spacing: 2px;
}

.alert-info {
  /* Global alert styling? */
  visibility: visible;
  margin: 0;
}

/* Set Style of prefilled input fields
 * https://stackoverflow.com/questions/57195620/css-autocomplete-font-size
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-animation: autofill 0s forwards;
  animation: autofill 0s forwards;
}

@keyframes autofill {
  100% {
    background: var(--aok-white);
    font-family: AOKBuenosAiresTextRegular;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
  }
}

@-webkit-keyframes autofill {
  100% {
    background: var(--aok-white);
    font-family: AOKBuenosAiresTextRegular;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
  }
}

.logo {
  margin-right: 1rem;
}

#password-toggle-new,
#password-toggle-confirm,
#password-toggle {
  position: absolute;
  bottom: 16px;
  right: 14px;
  cursor: pointer;
}

#password-toggle-new:focus-visible,
#password-toggle-confirm:focus-visible,
#password-toggle:focus-visible {
  outline: 1px solid var(--aok-light-green-constrast);
  outline-offset: 2px;
  border-radius: 4px;
}

.toast-container {
  position: fixed;
  top: 32px;
  right: 32px;
  z-index: 20;
}

.register-button {
  margin: 8px 0;
}

.mandatory-label {
  color: var(--aok-grey-4);
  margin-top: 50px;
}

aok-popover:not(:defined) {
  display: none;
}

.invalid-link {
  justify-content: center;
}

.invalid-link h3 {
  color: var(--aok-green-8);
}

.cross-circle-icon svg {
  fill: var(--aok-green-8) !important;
  margin-bottom: 24px;
}

.invalid-link .d-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.d-flex button {
  margin: inherit !important;
}

.inline {
  display: inline;
}

aok-footer {
  margin-top: 64px;
}