body { 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  --font: "Neue Helvetica",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica Neue,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  display: flex;
  flex-direction: column;
  background-color: #000;
}


:root,
body.light {
  --primary: #F04600;
  --on-primary: #ffffff;
  --on-surface: #888;
  --surface: #ffffff;
  --outline: #888;
}

body.dark {
  --primary: #ffffff;
  --on-primary: #000;
  --on-surface: #ffffff;
  --surface: #ffffff;
  --outline: #ffffff;
}

body.dark {
  background: url(../img/bg-digital-web-white-black-2560x1440-lossy-95.webp) no-repeat center center fixed;
  background-size: cover;
}
body.light {
  background: url(../img/bg-light-lossy-95.webp) no-repeat center center fixed; 
  background-size: cover;
}


main.responsive {
  max-width: 575px;
  padding-inline: 1.5rem;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  letter-spacing: normal;
}

main~footer {
  min-block-size: initial;
}
body > footer {
  background-color: #000000cc;
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  align-content: center;
  position: sticky;
  bottom: 0;
  margin: 0;
  padding: 0;
}

body > footer .links {
  padding: 1rem 0.5rem;
  text-align: center;
}

body > footer .cookie-banner {
  display: none;
  border-top: 1px solid #333;
  padding: 1.75rem 0.5rem 0 0.5rem;
  text-align: center;
}
body > footer .cookie-banner span.txt {
  vertical-align: initial;
}
body > footer .cookie-banner button {
  margin: 0.5rem;
}

div#kc-header-wrapper {
  flex-grow: 2;
  text-align: center;
  margin: 30px 0;
}
div#kc-header-wrapper img {
  max-width: 175px;
  padding: 2.5rem 0 2rem 0;
}

#main-card {
  border: 3px solid #fff;
  backdrop-filter: blur(15px) saturate(0.5) brightness(1.05);
  -webkit-backdrop-filter: blur(15px) saturate(0.5) brightness(1.05);
  font-size: .75rem;
  font-weight: 600;
}
body.light #main-card {
  box-shadow: 0px 6px 15px #ccc;
}

#main-card .main-card-content {
  margin: 0 35px 0 35px;
}
@media only screen and (max-width: 550px) {
  #main-card .main-card-content {
    margin: 0 10px 0 10px;
  }
  .field>:is(input) {
    font-size: 0.85rem;
  }
  .field.label.prefix>label,
  .field.label.round>label {
    font-size: 0.85rem;
  }

  .field.label.prefix>i {
    display: none;
  }
  .field.label.prefix>i.btn-toggle-password-visibility {
    display: inline-flex;
  }
  .field.prefix>:is(input,textarea,select) {
    padding-inline-start: 1.5rem;
  }
  .field.prefix>:is(input,textarea,select):focus {
    padding-inline-start: 1.5rem;
  }
  .field.label.prefix>label {
    inset-inline-start: 1.5rem;
  }

  #kc-info-wrapper {
    margin: 1rem 0.5rem !important;
  }
}
@media only screen and (max-width: 425px) {
  div#kc-header-wrapper img {
    max-width: 100px;
  }
}

.checkbox>span:before {
  content: "radio_button_unchecked";
  color: var(--on-surface);
  font-size: 18px;
  line-height: 26px;
}

.checkbox>input:checked+span:before {
  content: "radio_button_checked";
  font-variation-settings: "FILL" 0
}

:is(.checkbox,.radio,.switch)>span {
  font-size: inherit;
}

.field.round>:is(input,textarea,select) {
  border: 2px solid var(--outline);
}
.field.label.border:not(.fill) > label::after {
	border-block-start: 2px solid var(--outline);
}
*+.field {
  margin-block-start: 0 !important;
  margin-bottom: 1.25rem;
}

form {
  padding-bottom: 0.75rem;
}
form button {
  margin: 0;
}
form button[type="submit"] {
  font-weight: bold;
}
form .field i {
  font-size: 1rem;
}
form i.btn-toggle-password-visibility {
  cursor: pointer !important;
  z-index: 100 !important;
}

form .error-multiline {
  color: var(--error) !important;
  padding-left: 1.5rem;
  margin-top: -1.85rem;
  margin-bottom: 0.25rem;
}
button.cancel {
  border: none;
  background: none;
  color: var(--on-surface);
  font-weight: normal !important;
  padding-left: 1.25rem;
  /* text-decoration: underline; */
}
button.cancel:hover {
  box-shadow: none !important;
}

.delete-account-buttons {
  margin-top: 1rem;
}

#rememberMe {
  margin-left: 0.85rem;
}
#bottom-keyvisual {
  margin-top: 3rem;
  max-width: 75%;
  border-radius: .5rem;
}

#lang-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#lang-btn {
  padding: 0;
  block-size: 2.1rem;
  min-inline-size: 2.1rem;
}
#lang-btn img {
  ---tmp-size: 2rem;
  min-inline-size: var(---tmp-size);
  max-inline-size: var(---tmp-size);
  min-block-size: var(---tmp-size);
  max-block-size: var(---tmp-size);
}
#lang-dropdown {
  z-index: 200;
  inset: -2px -2px auto auto;
}
#lang-dropdown i {
  width: 32px;
}
#lang-dropdown img {
  ---tmp-size: unset;
  min-inline-size: var(---tmp-size);
  max-inline-size: var(---tmp-size);
  min-block-size: var(---tmp-size);
  max-block-size: var(---tmp-size);
}
#lang-menu .arrow {
  margin-top: 3px;
  width: 0; 
  height: 0; 
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--outline);
}

#main-card nav {
  align-items: flex-start;
  margin: 3px 7px;
}

#nav-burger-button {
  border-radius: 4px !important;
}

#main-card nav>button.icon-wrapper>img  {
  ---icon-size: 2rem;
  min-inline-size: var(---icon-size);
  max-inline-size: var(---icon-size);
  min-block-size: var(---icon-size);
  max-block-size: var(---icon-size);
  /*
  svg color can't be easily set via css.
  that why we use a filter-trick.
  the exact filter for #888 has been generated via https://isotropic.co/tool/hex-color-to-css-filter
  */
  /* filter: invert(53%) sepia(13%) saturate(0%) hue-rotate(236deg) brightness(98%) contrast(85%); */
  filter: invert(100%);
}

#kc-info-wrapper {
  display: flex;
  margin: 1rem;
  justify-content: space-between;
}

#kc-info-wrapper a,
body > footer a {
  text-decoration: underline;
  text-decoration-style: dotted;
  font-size: .75rem;
  font-weight: 600;
}
body > footer a {
  margin: 0 0.5rem 0 0.5rem;
}

#kc-forgot-password {
  text-align: right;
}


#kc-passwd-update-form .password-confirm {
  margin-bottom: 1rem;
}
#kc-passwd-update-form #kc-form-buttons,
#kc-update-profile-form #kc-form-buttons {
  display: flex;
  justify-content: space-between;
}

#kc-register-form #kc-form-options {
  margin-top: 1.5rem;
}

#kc-passwd-update-form .btn-outline-secondary,
#kc-update-profile-form .btn-outline-secondary {
  background-color: transparent;
  border: 2px solid var(--outline);
  color: var(--on-surface);
}

#password-checklist {
  display: flex;
  flex-direction: column;
  margin: 0 0 2rem 0;
}

#kc-passwd-update-form #password-checklist {
  margin: 0 0 1rem 0;
}

#password-checklist .rule {
  display: flex;
  flex-direction: row;
  padding-left: 1.35rem;
}
#password-checklist .rule .icon {
  min-width: 1.5rem;
  margin-right: 0.25rem;
  text-align: center;
}
#password-checklist .rule .icon::before {
  color: #d2ffc0;
  content: '✓';
  font-weight: bold;
}
#password-checklist .rule.invalid .icon::before {
  color: red;
  content: '❌';
}
#password-checklist .rule .description {
  font-weight: normal;
}
#password-checklist .rule.invalid .description {
  font-weight: bold;
}

/* Select authentication (Try Another Way) list */
#kc-select-credential-form .list-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  width: 100%;
}
#kc-select-credential-form .list-group-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 2px solid var(--outline, #fff);
  border-radius: 999px;
  padding: 1.5rem 1.5rem;
  background: transparent;
  color: var(--on-surface, #fff);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  width: 70%;
  max-width: 400px;
}
#kc-select-credential-form .list-group-item:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--primary, #fff);
}
#kc-select-credential-form .list-group-item .fw-bold {
  color: var(--on-surface, #fff);
  font-size: 0.875rem;
  font-weight: 700;
}
#kc-select-credential-form .list-group-item > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}
#kc-select-credential-form .list-group-item > div:nth-child(2) > div:last-child {
  color: var(--on-surface, #fff);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
}
/* Hide empty icon divs */
#kc-select-credential-form .list-group-item > div:has(> i:empty) {
  display: none;
}

/* Try another way link */
#try-another-way {
  display: inline-block;
  color: var(--on-surface, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  margin-top: 0.5rem;
}
#try-another-way:hover {
  text-decoration: underline;
}

/* Social providers */
#kc-social-providers hr {
  border-color: var(--outline, #fff);
  opacity: 0.3;
  margin: 1rem 0;
}
#kc-social-providers h4 {
  color: var(--on-surface, #fff);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
#kc-social-providers a {
  color: var(--on-surface, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* Keycloak renders Sign In as <input type="submit"> on login page */
input#kc-login {
  border: none !important;
  border-radius: 1.25rem !important;
  padding: 0 1.5rem !important;
  background: var(--primary, #fff) !important;
  color: var(--on-primary, #000) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  height: 3rem !important;
  width: 100% !important;
  text-align: center !important;
  cursor: pointer !important;
  outline: none !important;
  transition: opacity 0.2s !important;
  box-sizing: border-box !important;
}
input#kc-login:hover {
  opacity: 0.85;
}

/* Username+password page uses <button class="responsive large"> */
button#kc-login,
button.responsive.large {
  border: none !important;
  border-radius: 1.25rem !important;
  padding: 0 1.5rem !important;
  background: var(--primary, #fff) !important;
  color: var(--on-primary, #000) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  height: 3rem !important;
  width: 100% !important;
  inline-size: 100% !important;
  text-align: center !important;
  cursor: pointer !important;
  outline: none !important;
  transition: opacity 0.2s !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
}
button#kc-login:hover,
button.responsive.large:hover {
  opacity: 0.85;
}

/* Only apply to Keycloak default template (has .form-label), NOT beer CSS template (has .field) */
#kc-form-login > div:not(.field) {
  position: relative;
  width: 100%;
  margin-bottom: 0.75rem;
}

/* Add icon prefix using ::before - only for Keycloak default template */
#kc-form-login > div:not(.field):has(label[for="username"])::before {
  content: "@";
  position: absolute;
  left: 1rem;
  top: 0.55rem;
  color: var(--on-surface, #fff);
  font-size: 1rem;
  z-index: 3;
  pointer-events: none;
}
#kc-form-login > div:not(.field):has(label[for="password"])::before {
  content: "***";
  position: absolute;
  left: 1rem;
  top: 0.55rem;
  color: var(--on-surface, #fff);
  font-size: 0.875rem;
  z-index: 3;
  pointer-events: none;
}

/* Form label - inside input like beer CSS - only for Keycloak default template */
#kc-form-login > div:not(.field) .form-label {
  position: absolute;
  top: 0.55rem;
  left: 2rem;
  color: var(--on-surface, #fff);
  font-size: 0.875rem;
  font-weight: 600;
  pointer-events: none;
  transition: all 0.2s;
  z-index: 2;
  background: transparent;
  padding: 0 0.25rem;
}

/* Label jumps up when input focused or has value - only for Keycloak default template */
#kc-form-login > div:not(.field).has-value .form-label {
  top: -0.75rem;
  transform: none;
  font-size: 0.65rem;
  z-index: 10;
  background: #111;
  padding: 0 0.35rem;
}

/* Form input styling - full width pill like production - only for Keycloak default template */
#kc-form-login > div:not(.field) .form-control {
  border: 2px solid var(--outline, #fff) !important;
  border-radius: 1.25rem !important;
  padding: 0.75rem 1rem 0.75rem 2.5rem !important;
  background: transparent !important;
  color: var(--on-surface, #fff) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  height: 3rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#kc-form-login > div:not(.field) .form-control:focus {
  border-color: var(--outline, #fff) !important;
  box-shadow: none !important;
  outline: none !important;
}



/* Form group spacing - match production vertical padding */
#kc-form-login > div {
  margin-bottom: 1.25rem;
}

/* Spacing around form buttons */
#kc-form-buttons {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* Spacing for Try Another Way */
#kc-form-options {
  margin-top: 0.5rem;
}

/* Try another way link */
#try-another-way {
  color: var(--on-surface, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}
#try-another-way:hover {
  text-decoration: underline;
}

/* Error messages - no background, pinkish text matching username+password page */
#kc-form-login span.error,
#kc-form-login .error {
  background: none !important;
  color: #f87171 !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  display: block !important;
}