#kc-otp-reset-form-description {
  margin-bottom: 1rem;
}

.kcFormGroupClass hr {
  display: none
}

label.kcLoginOTPListClass {
  display: inline;
  margin-right: 1rem;
}

.kcFormCardClass {
  box-shadow: var(--quickstart-card-shadow);
  border-radius: var(--quickstart-border-radius);
}

.kcLoginMain {
  background: var(--quickstart-card-bg-color, #ffffff);
  border-radius: var(--quickstart-border-radius);
  padding: 2rem 2rem;
  box-shadow: var(--quickstart-card-shadow);
  border: none;
}

html.pf-v5-theme-dark .kcLoginMain,
body.pf-v5-theme-dark .kcLoginMain,
html.kcDarkModeClass .kcLoginMain {
  background: var(--quickstart-card-bg-color-dark, #26292d);
  box-shadow: var(--quickstart-card-shadow);
}

@media (max-width: 768px) {
  .kcLoginMain {
    padding: 1.5rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .kcLoginMain {
    padding: 1.25rem 1rem;
  }
}

.pf-c-alert.pf-m-warning,
.alert-warning {
  border-left: 4px solid #f59e0b;
  gap: 12px;

  border-radius: var(--quickstart-border-radius);
  background-color: #fffbeb;
  padding: 12px 16px;
  color: #92400e;
}

html.pf-v5-theme-dark .pf-c-alert.pf-m-warning p,
html.pf-v5-theme-dark .alert-warning p {
  color: var(--quickstart-text-primary-light) !important;
}

html.pf-v5-theme-dark #kc-recovery-codes-list {
  background: var(--quickstart-input-bg-color-dark, #141516);
}

html.pf-v5-theme-dark #kc-recovery-codes-list li span {
  color: var(--quickstart-text-secondary-dark);
}

.pf-c-alert__icon {
  display: inline;
}

.pf-c-alert.pf-m-warning h4  {
  color: #92400e;
  display: inline;
}

.form-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#kc-user-verify-device-user-code-form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#kc-user-verify-device-user-code-form > .kcFormGroupClass:last-child {
  margin-top: auto;
}

#kc-form-buttons,
.form-actions,
#kc-form-passkey-button,
#kc-webauthn-settings-form,
#kc-totp-settings-form,
#kc-recovery-codes-settings-form,
.kcSelectAuthListClass {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#kc-form-buttons,
.form-actions,
#kc-form-passkey-button,
#kc-webauthn-settings-form,
#kc-totp-settings-form,
#kc-recovery-codes-settings-form,
#confirmOverride,
#kc-try-again,
#registerWebAuthn,
.kcSelectAuthListClass {
  margin-top: 1.25rem;
}

#kc-form-buttons > div,
.form-actions > div {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#kc-form-buttons button,
#kc-form-buttons input[type="submit"],
.form-actions button,
.form-actions input[type="submit"],
#kc-webauthn-settings-form button,
#kc-webauthn-settings-form input[type="submit"],
#kc-totp-settings-form button,
#kc-totp-settings-form input[type="submit"],
#kc-recovery-codes-settings-form button,
#kc-recovery-codes-settings-form input[type="submit"] {
  width: 100% !important;
}

.kcSelectAuthListItemClass {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1rem;
  min-height: 52.5px;
  border: 1px solid #d1d5db;
  border-radius: var(--quickstart-border-radius);
  background: #ffffff;
  color: var(--quickstart-text-primary-light);
  font: inherit;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.kcSelectAuthListItemClass:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.kcSelectAuthListItemClass:focus-visible {
  outline: 2px solid var(--quickstart-primary-color);
  outline-offset: 2px;
}

html.pf-v5-theme-dark p, 
html.pf-v5-theme-dark ul {
  color: var(--quickstart-text-primary-dark) !important;
}

div:nth-of-type(2) > p:nth-of-type(1) {
  margin-bottom: 1rem;
}

p,
ul {
  color: var(--quickstart-text-primary-light) !important;
}

#instruction1 {
  line-height: 2rem;
}

#kc-delete-text {
  color: var(--quickstart-text-primary-light);
}

html.pf-v5-theme-dark  #kc-delete-text {
  color: var(--quickstart-text-primary-dark);
}

#kc-link-text {
  color: var(--quickstart-text-primary-light);
}

html.pf-v5-theme-dark #kc-link-text {
  color: var(--quickstart-text-primary-dark);
}

.control-label {
  display: inline;
}

.kcLabelWrapperClass,
.kcFormGroupClass > div:has(> label + span.required) {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.subtitle {
  justify-content: flex-end;
}

.kcLabelWrapperClass > label,
.kcFormGroupClass > div:has(> label + span.required) > label {
  margin-bottom: 0;
}

span.required {
  color: var(--quickstart-text-secondary-light);
}

html.pf-v5-theme-dark span.required {
  color: var(--quickstart-text-secondary-dark);
}

.checkbox,
.kcCheckboxClass {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0;
}

.checkbox label,
.kcCheckboxClass label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0;
}

.checkbox input[type="checkbox"],
.kcCheckboxClass input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
}

#kc-totp-supported-apps,
ul {
  list-style: disc inside;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#kc-totp-supported-apps > li{
  background: transparent;
  border-radius: 0;
  padding: 0;
}

html.pf-v5-theme-dark #kc-totp-supported-apps > li,
html.pf-v5-theme-dark form > ul > li,
html.pf-v5-theme-dark form > div > ul > li,
html.pf-v5-theme-dark #kc-content-wrapper > ul > li,
html.pf-v5-theme-dark #kc-content-wrapper > div > ul > li,
html.kcDarkModeClass #kc-totp-supported-apps > li,
html.kcDarkModeClass form > ul > li,
html.kcDarkModeClass form > div > ul > li,
html.kcDarkModeClass #kc-content-wrapper > ul > li,
html.kcDarkModeClass #kc-content-wrapper > div > ul > li {
  background: color-mix(in srgb, var(--quickstart-secondary-color) 12%, transparent);
}

html.pf-v5-theme-dark #kc-totp-supported-apps > li,
html.kcDarkModeClass #kc-totp-supported-apps > li {
  background: transparent;
}

.kcLogin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 2rem;
  background-color: transparent;
  background-image: var(--quickstart-bg-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@media (max-width: 768px) {
  .kcLogin {
    padding: 1rem;
  }
}

html:not(.pf-v5-theme-dark):not(.kcDarkModeClass) body .kcLogin,
html:not(.pf-v5-theme-dark):not(.kcDarkModeClass) body#keycloak-bg .kcLogin,
html:not(.pf-v5-theme-dark):not(.kcDarkModeClass) body .kcLoginClass,
html:not(.pf-v5-theme-dark):not(.kcDarkModeClass) body#keycloak-bg .kcLoginClass {
  background-color: var(--quickstart-bg-color);
  background-image: var(--quickstart-bg-image);
}

html.pf-v5-theme-dark body .kcLogin,
html.pf-v5-theme-dark body#keycloak-bg .kcLogin,
html.pf-v5-theme-dark body .kcLoginClass,
html.pf-v5-theme-dark body#keycloak-bg .kcLoginClass,
html.kcDarkModeClass body .kcLogin,
html.kcDarkModeClass body#keycloak-bg .kcLogin,
html.kcDarkModeClass body .kcLoginClass,
html.kcDarkModeClass body#keycloak-bg .kcLoginClass {
  background-color: var(--quickstart-bg-color-dark);
  background-image: var(--quickstart-bg-image);
}

#confirmOverride {
  margin-top: 1rem;
}

#updateProfile {
  margin-bottom: 1rem;
}

.kcButtonClass,
button.kcButtonClass,
input.kcButtonClass,
a.kcButtonClass {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1.5rem;
  min-height: 52.5px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--quickstart-border-radius);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  border: 1px solid transparent;
  background: transparent;
  color: var(--quickstart-text-primary-light);
  font-family: system-ui, -apple-system, sans-serif;
  text-decoration: none;
  text-align: center;
}

#printRecoveryCodes:hover,
#downloadRecoveryCodes:hover,
#copyRecoveryCodes:hover {
  color: var(--quickstart-secondary-color);
}

.kcInputGroup .kcInputClass {
  flex: 1;
}

.kcInputGroup :is(
  input.kcInputClass,
  .kcInputClass input,
  .kcInputGroupItemClass.kcFill > input,
  .kcInputGroupItemClass.kcFill > .kcInputClass,
  .kcInputGroupItemClass.kcFill > .kcInputClass input,
  input[type="password"],
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"]
) {
  border-top-left-radius: var(--quickstart-border-radius);
  border-bottom-left-radius: var(--quickstart-border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
  border-inline-end-width: 0;
}

.kcInputGroup :is(
  input.kcInputClass:focus,
  .kcInputClass input:focus,
  .kcInputGroupItemClass.kcFill > input:focus,
  .kcInputGroupItemClass.kcFill > .kcInputClass input:focus,
  input[type="password"]:focus,
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="number"]:focus,
  input.kcInputClass[aria-invalid="true"],
  .kcInputClass input[aria-invalid="true"],
  .kcInputGroupItemClass.kcFill > input[aria-invalid="true"],
  .kcInputGroupItemClass.kcFill > .kcInputClass input[aria-invalid="true"]
) {
  box-shadow: none;
}

.kcInputClass {
  display: block;
  width: 100%;
  position: relative;
}

.kcInputClass input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: var(--quickstart-border-radius);
  color: #1a1a2e;
  font-size: 15px;
  font-family: system-ui, -apple-system, sans-serif;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.kcInputClass input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #9ca3af;
}

.kcInputClass input:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: #9ca3af;
}

.kcInputClass input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--quickstart-primary-color);
  box-shadow: 0 0 0 0.1px var(--quickstart-primary-color) !important;
  outline: none;
}

.kcInputGroup .kcInputClass {
  flex: 1;
}

.kcButtonPrimaryClass,
button.kcButtonPrimaryClass,
a.kcButtonPrimaryClass,
input.kcButtonPrimaryClass {
  background: var(--quickstart-primary-color);
  border: 1px solid var(--quickstart-primary-color);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.kcButtonBlockClass,
button.kcButtonBlockClass,
a.kcButtonBlockClass {
  display: block;
  width: 100%;
}

.kcButtonPrimaryClass,
button.kcButtonPrimaryClass,
a.kcButtonPrimaryClass {
  border-color: var(--quickstart-primary-color);
}

.kcButtonPrimaryClass:hover,
button.kcButtonPrimaryClass:hover,
a.kcButtonPrimaryClass:hover:hover {
  filter: brightness(0.9);
}

.kcButtonPrimaryClass:active,
button.kcButtonPrimaryClass:active,
a.kcButtonPrimaryClass:active:active {
  filter: brightness(0.8);
  transform: translateY(1px);
}

.kcButtonPrimaryClass:focus-visible,
button.kcButtonPrimaryClass:focus-visible,
a.kcButtonPrimaryClass:focus-visible:focus-visible {
  outline: 2px solid var(--quickstart-primary-color);
  outline-offset: 2px;
}

#code {
  background: transparent;
  border: 1px solid var(--quickstart-primary-color);
  border-radius: 8px;
  padding: 12px 0px;
  font-family: monospace;
  font-size: 1.5rem;
  color: var(--quickstart-primary-color);
  text-align: center;
  width: 100%;
  max-width: 300px;
  transition: all 0.3s ease;
}

#kc-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.kcLoginContainer {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

html.pf-v5-theme-dark #kc-realm-name,
html.pf-v5-theme-dark #kc-client-name,
body.pf-v5-theme-dark #kc-realm-name,
body.pf-v5-theme-dark #kc-client-name,
html.kcDarkModeClass #kc-realm-name,
html.kcDarkModeClass #kc-client-name,
body.kcDarkModeClass #kc-realm-name,
body.kcDarkModeClass #kc-client-name {
  color: var(--quickstart-text-primary-dark);
}

html.pf-v5-theme-dark .kcLoginMainTitle,
body.pf-v5-theme-dark .kcLoginMainTitle,
html.pf-v5-theme-dark #kc-page-title,
body.pf-v5-theme-dark #kc-page-title {
  color: var(--quickstart-text-secondary-dark);
}

html.pf-v5-theme-dark .kcFormLabelClass,
html.pf-v5-theme-dark label,
html.kcDarkModeClass .kcFormLabelClass,
html.kcDarkModeClass label {
  color: var(--quickstart-text-secondary-dark);
}

html.pf-v5-theme-dark .kcInputClass.kcError input,
html.pf-v5-theme-dark .kcInputClass input[aria-invalid="true"],
html.pf-v5-theme-dark form input.kcError,
html.pf-v5-theme-dark form input[aria-invalid="true"] {
  border-color: #ef4444;
}

html.pf-v5-theme-dark .kcInputClass input,
html.pf-v5-theme-dark input[type="text"],
html.pf-v5-theme-dark input[type="email"],
html.pf-v5-theme-dark input[type="password"],
html.pf-v5-theme-dark input[type="tel"],
html.pf-v5-theme-dark input[type="number"],
html.pf-v5-theme-dark select,
html.pf-v5-theme-dark textarea,
html.kcDarkModeClass .kcInputClass input,
html.kcDarkModeClass input[type="text"],
html.kcDarkModeClass input[type="email"],
html.kcDarkModeClass input[type="password"],
html.kcDarkModeClass input[type="tel"],
html.kcDarkModeClass input[type="number"],
html.kcDarkModeClass select,
html.kcDarkModeClass textarea {
  background: var(--quickstart-input-bg-color-dark, #141516);
  border-color: var(--quickstart-input-border-color-dark, #2b2c2e);
  color: var(--quickstart-text-primary-dark);
}

html.pf-v5-theme-dark .kcInputClass input::placeholder,
html.pf-v5-theme-dark input::placeholder,
html.pf-v5-theme-dark textarea::placeholder,
html.kcDarkModeClass .kcInputClass input::placeholder,
html.kcDarkModeClass input::placeholder,
html.kcDarkModeClass textarea::placeholder {
  color: var(--quickstart-muted-text-color-dark, #9aa0a6);
}

.kcInputClass.kcError input,
.kcInputClass input[aria-invalid="true"],
input.kcError,
input[aria-invalid="true"] {
  border-color: #ef4444;
  background: #fef2f2;
}

.kcLoginMainHeader {
  border-top: none;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
  display: block;
  width: 100%;
  position: relative;
}

#kc-header-wrapper {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 0 0.75rem 0;
  visibility: visible;
  opacity: 1;
}

#kc-header-wrapper > * {
  margin: 0;
}

#kc-header-wrapper > * + * {
  margin-top: 0.25rem;
}

#kc-realm-name,
#kc-client-name {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--quickstart-text-primary-light);
  font-size: 32px;
  display: block;
  line-height: 1.2;
}

.kcLoginMainTitle,
#kc-page-title {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--quickstart-text-primary-light);
  font-size: 20px;
  margin: 0;
  display: block;
  line-height: 1.25;
  width: 100%;
  text-align: center;
}

@media (max-width: 480px) {
  .kcLoginMainTitle {
    font-size: 28px;
  }
}

h1, h2, h3, h4, h5, h6,
#kc-header-wrapper,
#kc-realm-name,
#kc-client-name,
.kcLoginMainTitle {
  font-family: var(--quickstart-heading-font-family);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--quickstart-text-primary-light);
}

#kc-header-wrapper #kc-client-name {
  display: block;
}

.kcLoginMainHeader p {
  color: #6b7280;
  font-size: 15px;
  margin: 0.5rem 0 0 0;
}

.kcFormGroupClass {
  margin-bottom: 1rem;
}

.kcFormGroupClass:has(> label):has(:is(input.kcInputClass, .kcInputClass input, select.kcInputClass, textarea.kcInputClass, .kcInputGroup)) {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 1rem;
}

.kcFormLabelClass,
label {
  display: block;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem !important;
  font-size: 14px;
}

#kc-totp-settings {
  margin: 0 0 1.25rem 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#kc-totp-settings > li {
  margin: 0;
}

#kc-totp-settings p {
  margin: 0 0 0.5rem;
}

#kc-totp-settings p:last-child {
  margin-bottom: 0;
}

#kc-totp-settings ul {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#kc-totp-settings-form {
  margin-top: 1.25rem;
}

#saveTOTPBtn,
#cancelTOTPBtn,
#saveRecoveryAuthnCodesBtn,
#cancelRecoveryAuthnCodesBtn {
  margin-top: 0;
}

input[type="radio"][name="selectedCredentialId"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

label.kcLoginOTPListClass {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: var(--quickstart-border-radius);
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

label.kcLoginOTPListClass::before {
  content: '';
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="radio"][name="selectedCredentialId"]:checked + label.kcLoginOTPListClass {
  border-color: var(--quickstart-primary-color);
  background: color-mix(in srgb, var(--quickstart-primary-color) 6%, transparent);
}

input[type="radio"][name="selectedCredentialId"]:checked + label.kcLoginOTPListClass::before {
  border-color: var(--quickstart-primary-color);
  box-shadow: inset 0 0 0 3px var(--quickstart-primary-color);
}

label.kcLoginOTPListClass:hover {
  border-color: var(--quickstart-primary-color);
}

input[type="radio"][name="selectedCredentialId"]:focus-visible + label.kcLoginOTPListClass {
  outline: 2px solid var(--quickstart-primary-color);
  outline-offset: 2px;
}

.kcLoginOTPListItemHeaderClass {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kcLoginOTPListItemIconBodyClass {
  display: none;
}

.kcLoginOTPListItemTitleClass {
  font-weight: 500;
}

html.pf-v5-theme-dark label.kcLoginOTPListClass,
html.kcDarkModeClass label.kcLoginOTPListClass {
  border-color: var(--quickstart-input-border-color-dark, #2b2c2e);
}

html.pf-v5-theme-dark label.kcLoginOTPListClass::before,
html.kcDarkModeClass label.kcLoginOTPListClass::before {
  border-color: var(--quickstart-input-border-color-dark, #2b2c2e);
}

html.pf-v5-theme-dark input[type="radio"][name="selectedCredentialId"]:checked + label.kcLoginOTPListClass,
html.kcDarkModeClass input[type="radio"][name="selectedCredentialId"]:checked + label.kcLoginOTPListClass {
  background: color-mix(in srgb, var(--quickstart-primary-color) 10%, transparent);
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em;
  padding-right: 2.5rem;
}

.kcButtonSecondaryClass,
.kcButtonDefaultClass,
button.kcButtonSecondaryClass,
button.kcButtonDefaultClass,
input.kcButtonSecondaryClass,
input.kcButtonDefaultClass,
a.kcButtonSecondaryClass,
a.kcButtonDefaultClass,
.kcButtonClass[name="cancel-aia"],
.kcButtonClass[name="cancel"],
#kc-cancel,
#kc-decline,
#backToApplication,
#cancelTOTPBtn,
#cancelRecoveryAuthnCodesBtn,
#cancelWebAuthnAIA {
  background: transparent;
  border: 1px solid var(--quickstart-primary-color);
  color: var(--quickstart-primary-color);
  text-decoration: none;
  padding: 0.875rem 1.5rem;
  min-height: 52.5px;
  font-weight: 600;
  font-size: 15px;
  margin: 0;
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  border-radius: var(--quickstart-border-radius);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.kcButtonSecondaryClass:hover,
.kcButtonDefaultClass:hover,
button.kcButtonSecondaryClass:hover,
button.kcButtonDefaultClass:hover,
input.kcButtonSecondaryClass:hover,
input.kcButtonDefaultClass:hover,
a.kcButtonSecondaryClass:hover,
a.kcButtonDefaultClass:hover,
.kcButtonClass[name="cancel-aia"]:hover,
.kcButtonClass[name="cancel"]:hover,
#kc-cancel:hover,
#kc-decline:hover,
#backToApplication:hover,
#cancelTOTPBtn:hover,
#cancelRecoveryAuthnCodesBtn:hover,
#cancelWebAuthnAIA:hover {
  background: color-mix(in srgb, var(--quickstart-primary-color) 8%, transparent);
  text-decoration: none;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

.kcButtonSecondaryClass:active,
.kcButtonDefaultClass:active,
button.kcButtonSecondaryClass:active,
button.kcButtonDefaultClass:active,
input.kcButtonSecondaryClass:active,
input.kcButtonDefaultClass:active,
a.kcButtonSecondaryClass:active,
a.kcButtonDefaultClass:active,
.kcButtonClass[name="cancel-aia"]:active,
.kcButtonClass[name="cancel"]:active,
#kc-cancel:active,
#kc-decline:active,
#backToApplication:active,
#cancelTOTPBtn:active,
#cancelRecoveryAuthnCodesBtn:active,
#cancelWebAuthnAIA:active {
  background: color-mix(in srgb, var(--quickstart-primary-color) 16%, transparent);
}

.kcButtonClass:not(.kcButtonPrimaryClass):not(.kcButtonSecondaryClass):not(.kcButtonDefaultClass):not([name="cancel-aia"]):not([name="cancel"]),
button.kcButtonClass:not(.kcButtonPrimaryClass):not(.kcButtonSecondaryClass):not(.kcButtonDefaultClass):not([name="cancel-aia"]):not([name="cancel"]),
input.kcButtonClass:not(.kcButtonPrimaryClass):not(.kcButtonSecondaryClass):not(.kcButtonDefaultClass):not([name="cancel-aia"]):not([name="cancel"]),
a.kcButtonClass:not(.kcButtonPrimaryClass):not(.kcButtonSecondaryClass):not(.kcButtonDefaultClass):not([name="cancel-aia"]):not([name="cancel"]) {
  background: #ffffff;
  border-color: #d1d5db;
  color: var(--quickstart-text-primary-light);
  box-shadow: none;
}

.kcButtonClass:not(.kcButtonPrimaryClass):not(.kcButtonSecondaryClass):not(.kcButtonDefaultClass):not([name="cancel-aia"]):not([name="cancel"]):hover,
button.kcButtonClass:not(.kcButtonPrimaryClass):not(.kcButtonSecondaryClass):not(.kcButtonDefaultClass):not([name="cancel-aia"]):not([name="cancel"]):hover,
input.kcButtonClass:not(.kcButtonPrimaryClass):not(.kcButtonSecondaryClass):not(.kcButtonDefaultClass):not([name="cancel-aia"]):not([name="cancel"]):hover,
a.kcButtonClass:not(.kcButtonPrimaryClass):not(.kcButtonSecondaryClass):not(.kcButtonDefaultClass):not([name="cancel-aia"]):not([name="cancel"]):hover {
  background: #f9fafb;
  border-color: #9ca3af;
  text-decoration: none;
}

.kcInputGroup {
  display: flex;
  position: relative;
  gap: 0;
}

.kcInputGroupItemClass {
  display: flex;
}

.kcInputGroupItemClass.kcFill {
  flex: 1;
}

.kcFormPasswordVisibilityButtonClass,
button.kcFormPasswordVisibilityButtonClass {
  width: auto;
  flex: 0 0 auto;
  padding: 0.875rem 1rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kcFormPasswordVisibilityButtonClass:hover {
  color: #374151;
  background: #f9fafb;
}

.kcFormPasswordVisibilityButtonClass i {
  display: none;
}

.kcFormPasswordVisibilityButtonClass::before {
  content: '';
  width: 1rem;
  height: 1rem;
  display: block;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='black'%3E%3Cpath%20d='M12%205c-5%200-9.27%203.11-11%207%201.73%203.89%206%207%2011%207s9.27-3.11%2011-7c-1.73-3.89-6-7-11-7zm0%2011a4%204%200%201%201%200-8%204%204%200%200%201%200%208z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='black'%3E%3Cpath%20d='M12%205c-5%200-9.27%203.11-11%207%201.73%203.89%206%207%2011%207s9.27-3.11%2011-7c-1.73-3.89-6-7-11-7zm0%2011a4%204%200%201%201%200-8%204%204%200%200%201%200%208z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.kcFormPasswordVisibilityButtonClass[data-password-visible="true"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'black'%3E%3Cpath%20d%3D'M12%205c-5%200-9.27%203.11-11%207%201.73%203.89%206%207%2011%207s9.27-3.11%2011-7c-1.73-3.89-6-7-11-7zm0%2011a4%204%200%201%201%200-8%204%204%200%200%201%200%208z'%2F%3E%3Cpath%20d%3D'M3%203l18%2018'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'black'%3E%3Cpath%20d%3D'M12%205c-5%200-9.27%203.11-11%207%201.73%203.89%206%207%2011%207s9.27-3.11%2011-7c-1.73-3.89-6-7-11-7zm0%2011a4%204%200%201%201%200-8%204%204%200%200%201%200%208z'%2F%3E%3Cpath%20d%3D'M3%203l18%2018'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

@supports selector(.kcInputGroup:has(input[type="text"])) {
  .kcInputGroup:has(input[type="text"]) .kcFormPasswordVisibilityButtonClass::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'black'%3E%3Cpath%20d%3D'M12%205c-5%200-9.27%203.11-11%207%201.73%203.89%206%207%2011%207s9.27-3.11%2011-7c-1.73-3.89-6-7-11-7zm0%2011a4%204%200%201%201%200-8%204%204%200%200%201%200%208z'%2F%3E%3Cpath%20d%3D'M3%203l18%2018'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'black'%3E%3Cpath%20d%3D'M12%205c-5%200-9.27%203.11-11%207%201.73%203.89%206%207%2011%207s9.27-3.11%2011-7c-1.73-3.89-6-7-11-7zm0%2011a4%204%200%201%201%200-8%204%204%200%200%201%200%208z'%2F%3E%3Cpath%20d%3D'M3%203l18%2018'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  }
}

html.pf-v5-theme-dark .kcFormPasswordVisibilityButtonClass,
body.pf-v5-theme-dark .kcFormPasswordVisibilityButtonClass,
html.kcDarkModeClass .kcFormPasswordVisibilityButtonClass {
  background: #141516;
  border-color: #2b2c2e;
  color: #cbd5e1;
}

html.pf-v5-theme-dark .kcFormPasswordVisibilityButtonClass:hover,
body.pf-v5-theme-dark .kcFormPasswordVisibilityButtonClass:hover,
html.kcDarkModeClass .kcFormPasswordVisibilityButtonClass:hover {
  background: #1a1b1c;
  color: #e8eaed;
}

.kcCheckboxInputClass {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--quickstart-primary-color);
  margin: 0;
  flex-shrink: 0;
}

.kcCheckboxLabelClass {
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  line-height: 16px;
  margin: 0;
}

a {
  color: var(--quickstart-primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--quickstart-primary-color);
  outline-offset: 2px;
  border-radius: 2px;
}

.kcFormSocialAccountListButtonClass:focus-visible,
a.kcFormSocialAccountListButtonClass:focus-visible {
  outline: 2px solid var(--quickstart-primary-color);
  outline-offset: 2px;
}

.kcInputHelperTextClass {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  font-size: 14px;
  color: #6b7280;
  flex-wrap: nowrap;
  gap: 1rem;
}

.kcInputHelperTextClass > * {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  line-height: 16px;
}

.kcFormSettingClass {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

.kcFormSettingClass > * {
  flex: 0 0 auto;
  width: auto;
}

.kcFormSettingClass label {
  margin: 0;
}

.kcFormSettingClass input {
  margin-bottom: 0;
}

#kc-reset-password-form .kcFormSettingClass {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

#kc-reset-password-form .kcFormSettingClass > * {
  width: 100%;
}

#kc-register-form .kcFormGroupClass:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#kc-reset-password-form #kc-form-buttons,
#kc-register-form #kc-form-buttons {
  order: 1;
  margin-top: 0;
}

#kc-reset-password-form #kc-form-options,
#kc-register-form #kc-form-options {
  order: 2;
  margin-top: 0;
}

#kc-reset-password-form .kcFormOptionsWrapperClass,
#kc-register-form #kc-form-options .kcFormOptionsWrapperClass {
  margin-bottom: 0;
}

.kcInputHelperTextItemClass {
  color: #6b7280;
  line-height: 16px;
}

.kcFormControlUtilClass {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.kcInputErrorIconClass {
  color: #ef4444;
  font-size: 1rem;
}

.kcInputErrorMessageClass {
  display: block;
  color: #dc2626;
  font-size: 13px;
  margin-top: 0;
  font-weight: 500;
  line-height: 1.35;
}

.kcFormGroupClass:has(> label):has(:is(input.kcInputClass, .kcInputClass input, select.kcInputClass, textarea.kcInputClass, .kcInputGroup)) > .kcInputErrorMessageClass {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
}

.kcAlertClass {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: #fef2f2;
  border-radius: 8px;
  border-left: 3px solid #ef4444;
  margin-bottom: 1.5rem;
  font-size: 14px;
}

.kcFeedbackInfoIcon::before {
  content: "\2139";
}

.kcFeedbackWarningIcon::before {
  content: "\26A0";
}

.kcFeedbackErrorIcon::before {
  content: "\2715";
}

.kcFeedbackSuccessIcon::before {
  content: "\2713";
}

.pficon-warning-triangle-o {
  font-style: normal;
}

.pficon-warning-triangle-o::before {
  content: "\26A0";
}

.kcAlertClass.pf-m-danger,
.kcAlertClass.kcError {
  background: #fef2f2;
  border-left-color: #ef4444;
}

.kcAlertClass.pf-m-danger .kcAlertTitleClass,
.kcAlertClass.pf-m-danger .kc-feedback-text,
.kcAlertClass.kcError .kcAlertTitleClass,
.kcAlertClass.kcError .kc-feedback-text {
  color: #b42318;
}

.kcAlertClass.pf-m-info,
.kcAlertClass.kcInfo {
  background: #eff6ff;
  border-left-color: #0f766e;
}

.kcAlertClass.pf-m-success,
.kcAlertClass.kcSuccess {
  background: #f0fdf4;
  border-left-color: #10b981;
}

.kcAlertTitleClass {
  color: #1a1a2e;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}

html.pf-v5-theme-dark .kcAlertClass.pf-m-danger .kcAlertTitleClass,
html.pf-v5-theme-dark .kcAlertClass.pf-m-danger .kc-feedback-text,
body.pf-v5-theme-dark .kcAlertClass.pf-m-danger .kcAlertTitleClass,
body.pf-v5-theme-dark .kcAlertClass.pf-m-danger .kc-feedback-text,
html.kcDarkModeClass .kcAlertClass.pf-m-danger .kcAlertTitleClass,
html.kcDarkModeClass .kcAlertClass.pf-m-danger .kc-feedback-text,
html.pf-v5-theme-dark .kcAlertClass.kcError .kcAlertTitleClass,
html.pf-v5-theme-dark .kcAlertClass.kcError .kc-feedback-text,
body.pf-v5-theme-dark .kcAlertClass.kcError .kcAlertTitleClass,
body.pf-v5-theme-dark .kcAlertClass.kcError .kc-feedback-text,
html.kcDarkModeClass .kcAlertClass.kcError .kcAlertTitleClass,
html.kcDarkModeClass .kcAlertClass.kcError .kc-feedback-text {
  color: #fb7185;
}

.pf-v5-c-alert.pf-m-warning,
.pf-c-alert.pf-m-warning,
.alert-warning,
.kcAlertClass.pf-m-warning,
.kcAlertClass.kcWarning {
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 4px solid #f59e0b;
  color: #9a3412;
}

.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon,
.pf-c-alert.pf-m-warning .pf-c-alert__icon,
.alert-warning .pf-c-alert__icon,
.kcAlertClass.pf-m-warning .kcAlertIconClass,
.kcAlertClass.kcWarning .kcAlertIconClass {
  color: #d97706;
}

.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description,
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description p,
.pf-c-alert.pf-m-warning .pf-c-alert__title,
.pf-c-alert.pf-m-warning h4,
.pf-c-alert.pf-m-warning .pf-c-alert__description,
.pf-c-alert.pf-m-warning .pf-c-alert__description p,
.alert-warning h4,
.alert-warning p,
.kcAlertClass.pf-m-warning .kcAlertTitleClass,
.kcAlertClass.pf-m-warning .kc-feedback-text,
.kcAlertClass.kcWarning .kcAlertTitleClass,
.kcAlertClass.kcWarning .kc-feedback-text {
  color: #9a3412;
}

.kcAlertClass.pf-m-danger,
.kcAlertClass.kcError {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #ef4444;
}

.kcAlertClass.pf-m-danger .kcAlertIconClass,
.kcAlertClass.kcError .kcAlertIconClass {
  color: #dc2626;
}

.kcAlertClass.pf-m-danger .kcAlertTitleClass,
.kcAlertClass.pf-m-danger .kc-feedback-text,
.kcAlertClass.kcError .kcAlertTitleClass,
.kcAlertClass.kcError .kc-feedback-text {
  color: #b42318;
}

.kcAlertClass.pf-m-info,
.kcAlertClass.kcInfo {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-left: 4px solid #3b82f6;
}

.kcAlertClass.pf-m-info .kcAlertIconClass,
.kcAlertClass.kcInfo .kcAlertIconClass {
  color: #2563eb;
}

.kcAlertClass.pf-m-info .kcAlertTitleClass,
.kcAlertClass.pf-m-info .kc-feedback-text,
.kcAlertClass.kcInfo .kcAlertTitleClass,
.kcAlertClass.kcInfo .kc-feedback-text {
  color: #1d4ed8;
}

html.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning,
body.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning,
html.kcDarkModeClass .pf-v5-c-alert.pf-m-warning,
html.pf-v5-theme-dark .pf-c-alert.pf-m-warning,
body.pf-v5-theme-dark .pf-c-alert.pf-m-warning,
html.kcDarkModeClass .pf-c-alert.pf-m-warning,
html.pf-v5-theme-dark .alert-warning,
body.pf-v5-theme-dark .alert-warning,
html.kcDarkModeClass .alert-warning,
html.pf-v5-theme-dark .kcAlertClass.pf-m-warning,
body.pf-v5-theme-dark .kcAlertClass.pf-m-warning,
html.kcDarkModeClass .kcAlertClass.pf-m-warning,
html.pf-v5-theme-dark .kcAlertClass.kcWarning,
body.pf-v5-theme-dark .kcAlertClass.kcWarning,
html.kcDarkModeClass .kcAlertClass.kcWarning {
  background: #2f2414;
  border-color: #b45309;
  border-left-color: #f59e0b;
  color: #fcd34d;
}

html.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon,
body.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon,
html.kcDarkModeClass .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon,
html.pf-v5-theme-dark .pf-c-alert.pf-m-warning .pf-c-alert__icon,
body.pf-v5-theme-dark .pf-c-alert.pf-m-warning .pf-c-alert__icon,
html.kcDarkModeClass .pf-c-alert.pf-m-warning .pf-c-alert__icon,
html.pf-v5-theme-dark .alert-warning .pf-c-alert__icon,
body.pf-v5-theme-dark .alert-warning .pf-c-alert__icon,
html.kcDarkModeClass .alert-warning .pf-c-alert__icon,
html.pf-v5-theme-dark .kcAlertClass.pf-m-warning .kcAlertIconClass,
body.pf-v5-theme-dark .kcAlertClass.pf-m-warning .kcAlertIconClass,
html.kcDarkModeClass .kcAlertClass.pf-m-warning .kcAlertIconClass,
html.pf-v5-theme-dark .kcAlertClass.kcWarning .kcAlertIconClass,
body.pf-v5-theme-dark .kcAlertClass.kcWarning .kcAlertIconClass,
html.kcDarkModeClass .kcAlertClass.kcWarning .kcAlertIconClass {
  color: #fbbf24;
}

html.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
html.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description,
html.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description p,
body.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
body.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description,
body.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description p,
html.kcDarkModeClass .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
html.kcDarkModeClass .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description,
html.kcDarkModeClass .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description p,
html.pf-v5-theme-dark .pf-c-alert.pf-m-warning .pf-c-alert__title,
html.pf-v5-theme-dark .pf-c-alert.pf-m-warning h4,
html.pf-v5-theme-dark .pf-c-alert.pf-m-warning .pf-c-alert__description,
html.pf-v5-theme-dark .pf-c-alert.pf-m-warning .pf-c-alert__description p,
body.pf-v5-theme-dark .pf-c-alert.pf-m-warning .pf-c-alert__title,
body.pf-v5-theme-dark .pf-c-alert.pf-m-warning h4,
body.pf-v5-theme-dark .pf-c-alert.pf-m-warning .pf-c-alert__description,
body.pf-v5-theme-dark .pf-c-alert.pf-m-warning .pf-c-alert__description p,
html.kcDarkModeClass .pf-c-alert.pf-m-warning .pf-c-alert__title,
html.kcDarkModeClass .pf-c-alert.pf-m-warning h4,
html.kcDarkModeClass .pf-c-alert.pf-m-warning .pf-c-alert__description,
html.kcDarkModeClass .pf-c-alert.pf-m-warning .pf-c-alert__description p,
html.pf-v5-theme-dark .alert-warning h4,
html.pf-v5-theme-dark .alert-warning p,
body.pf-v5-theme-dark .alert-warning h4,
body.pf-v5-theme-dark .alert-warning p,
html.kcDarkModeClass .alert-warning h4,
html.kcDarkModeClass .alert-warning p,
html.pf-v5-theme-dark .kcAlertClass.pf-m-warning .kcAlertTitleClass,
html.pf-v5-theme-dark .kcAlertClass.pf-m-warning .kc-feedback-text,
body.pf-v5-theme-dark .kcAlertClass.pf-m-warning .kcAlertTitleClass,
body.pf-v5-theme-dark .kcAlertClass.pf-m-warning .kc-feedback-text,
html.kcDarkModeClass .kcAlertClass.pf-m-warning .kcAlertTitleClass,
html.kcDarkModeClass .kcAlertClass.pf-m-warning .kc-feedback-text,
html.pf-v5-theme-dark .kcAlertClass.kcWarning .kcAlertTitleClass,
html.pf-v5-theme-dark .kcAlertClass.kcWarning .kc-feedback-text,
body.pf-v5-theme-dark .kcAlertClass.kcWarning .kcAlertTitleClass,
body.pf-v5-theme-dark .kcAlertClass.kcWarning .kc-feedback-text,
html.kcDarkModeClass .kcAlertClass.kcWarning .kcAlertTitleClass,
html.kcDarkModeClass .kcAlertClass.kcWarning .kc-feedback-text {
  color: #fcd34d;
}

html.pf-v5-theme-dark .kcAlertClass.pf-m-danger,
body.pf-v5-theme-dark .kcAlertClass.pf-m-danger,
html.kcDarkModeClass .kcAlertClass.pf-m-danger,
html.pf-v5-theme-dark .kcAlertClass.kcError,
body.pf-v5-theme-dark .kcAlertClass.kcError,
html.kcDarkModeClass .kcAlertClass.kcError {
  background: #34161b;
  border-color: #b91c1c;
  border-left-color: #f87171;
}

html.pf-v5-theme-dark .kcAlertClass.pf-m-danger .kcAlertIconClass,
body.pf-v5-theme-dark .kcAlertClass.pf-m-danger .kcAlertIconClass,
html.kcDarkModeClass .kcAlertClass.pf-m-danger .kcAlertIconClass,
html.pf-v5-theme-dark .kcAlertClass.kcError .kcAlertIconClass,
body.pf-v5-theme-dark .kcAlertClass.kcError .kcAlertIconClass,
html.kcDarkModeClass .kcAlertClass.kcError .kcAlertIconClass {
  color: #f87171;
}

html.pf-v5-theme-dark .kcAlertClass.pf-m-info,
body.pf-v5-theme-dark .kcAlertClass.pf-m-info,
html.kcDarkModeClass .kcAlertClass.pf-m-info,
html.pf-v5-theme-dark .kcAlertClass.kcInfo,
body.pf-v5-theme-dark .kcAlertClass.kcInfo,
html.kcDarkModeClass .kcAlertClass.kcInfo {
  background: #14263d;
  border-color: #1d4ed8;
  border-left-color: #60a5fa;
}

html.pf-v5-theme-dark .kcAlertClass.pf-m-info .kcAlertIconClass,
body.pf-v5-theme-dark .kcAlertClass.pf-m-info .kcAlertIconClass,
html.kcDarkModeClass .kcAlertClass.pf-m-info .kcAlertIconClass,
html.pf-v5-theme-dark .kcAlertClass.kcInfo .kcAlertIconClass,
body.pf-v5-theme-dark .kcAlertClass.kcInfo .kcAlertIconClass,
html.kcDarkModeClass .kcAlertClass.kcInfo .kcAlertIconClass {
  color: #60a5fa;
}

html.pf-v5-theme-dark .kcAlertClass.pf-m-info .kcAlertTitleClass,
html.pf-v5-theme-dark .kcAlertClass.pf-m-info .kc-feedback-text,
body.pf-v5-theme-dark .kcAlertClass.pf-m-info .kcAlertTitleClass,
body.pf-v5-theme-dark .kcAlertClass.pf-m-info .kc-feedback-text,
html.kcDarkModeClass .kcAlertClass.pf-m-info .kcAlertTitleClass,
html.kcDarkModeClass .kcAlertClass.pf-m-info .kc-feedback-text,
html.pf-v5-theme-dark .kcAlertClass.kcInfo .kcAlertTitleClass,
html.pf-v5-theme-dark .kcAlertClass.kcInfo .kc-feedback-text,
body.pf-v5-theme-dark .kcAlertClass.kcInfo .kcAlertTitleClass,
body.pf-v5-theme-dark .kcAlertClass.kcInfo .kc-feedback-text,
html.kcDarkModeClass .kcAlertClass.kcInfo .kcAlertTitleClass,
html.kcDarkModeClass .kcAlertClass.kcInfo .kc-feedback-text {
  color: #93c5fd;
}

.kcLoginMainFooter {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

#kc-registration-container {
  text-align: center;
  margin-top: 0;
  padding: 0;
  color: #6b7280;
  font-size: 14px;
}

#kc-registration {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
}

#kc-registration > span {
  display: block;
  width: 100%;
  font-size: 0;
}

#kc-registration > span > a {
  font-size: 15px;
}

#kc-registration-container a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52.5px;
  padding: 0.875rem 1.5rem;
  border-radius: var(--quickstart-border-radius);
  border: 1px solid var(--quickstart-primary-color);
  color: var(--quickstart-primary-color);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  background: transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-sizing: border-box;
  margin: 0;
}

#kc-registration-container a:hover {
  background: color-mix(in srgb, var(--quickstart-primary-color) 8%, transparent);
  text-decoration: none;
  opacity: 1;
}

#kc-registration-container a:active {
  background: color-mix(in srgb, var(--quickstart-primary-color) 16%, transparent);
}

.kc-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  margin-top: 0;
  padding: 0;
  color: #6b7280;
  font-size: 14px;
  width: 100%;
}

.kc-footer-row > .kc-footer-legal-links,
.kc-footer-row > .kc-footer-language {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.kc-footer-language {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  width: auto;
  text-align: left;
  margin-top: 0;
  padding: 0;
  color: #6b7280;
  font-size: 14px;
}

.kc-footer-language select,
select.kc-language-select {
  background: transparent;
  border: none;
  color: var(--quickstart-primary-color);
  font-weight: 500;
  font-size: 14px;
  padding: 0 0 0 1.25rem;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%230f766e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 6l4 4-4 4'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 1em;
}

.kc-footer-language select:focus,
select.kc-language-select:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%230f766e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.kc-footer-language select:hover,
select.kc-language-select:hover {
  opacity: 0.8;
  box-shadow: none;
  border: none;
  outline: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html.pf-v5-theme-dark .kc-footer-language select,
body.pf-v5-theme-dark .kc-footer-language select,
html.kcDarkModeClass .kc-footer-language select,
html.pf-v5-theme-dark select.kc-language-select,
body.pf-v5-theme-dark select.kc-language-select,
html.kcDarkModeClass select.kc-language-select {
  box-shadow: none;
}

.kcInputHelperTextItemClass a,
.kcInputHelperTextClass a,
.kcFormSettingClass a,
.kcFormOptionsWrapperClass a {
  font-size: 14px;
  line-height: 16px;
}

.kc-footer-legal-links {
  text-align: left;
  margin-top: 0;
  padding: 0;
  color: #6b7280;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-direction: row;
}

.kc-footer-legal-links:empty {
  display: none;
}

.kcLoginMainFooterBand {
  margin-top: 0;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
}

.kcLoginMainFooterBand.kc-footer-row {
  margin-top: 1.5rem;
}

.kcLoginMainFooterBandItem {
  color: #6b7280;
}

.kcFormSocialAccountSectionClass {
  width: 100%;
}

.kcFormSocialAccountListClass {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.kcFormSocialAccountListClass.kcFormSocialAccountListGridClass {
  grid-template-columns: repeat(2, 1fr);
}

.kcFormSocialAccountListClass > li {
  width: 100%;
}

.kcFormSocialAccountGridItem {
  width: 100%;
  display: block;
}

.kcFormSocialAccountListButtonClass,
a.kcFormSocialAccountListButtonClass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: var(--quickstart-border-radius);
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.kcFormSocialAccountListButtonClass:hover,
a.kcFormSocialAccountListButtonClass:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

html.pf-v5-theme-dark .kcFormSocialAccountListButtonClass,
html.pf-v5-theme-dark a.kcFormSocialAccountListButtonClass,
body.pf-v5-theme-dark .kcFormSocialAccountListButtonClass,
body.pf-v5-theme-dark a.kcFormSocialAccountListButtonClass {
  background: var(--quickstart-input-bg-color-dark, #141516);
  border-color: var(--quickstart-input-border-color-dark, #2b2c2e);
  color: var(--quickstart-text-primary-dark);
}

html.pf-v5-theme-dark .kcFormSocialAccountListButtonClass:hover,
html.pf-v5-theme-dark a.kcFormSocialAccountListButtonClass:hover,
body.pf-v5-theme-dark .kcFormSocialAccountListButtonClass:hover,
body.pf-v5-theme-dark a.kcFormSocialAccountListButtonClass:hover {
  background: #1a1c1e;
  border-color: #3a3d41;
  color: var(--quickstart-text-primary-dark);
}

html.pf-v5-theme-dark .kcFormSocialAccountListButtonClass:focus-visible,
html.pf-v5-theme-dark a.kcFormSocialAccountListButtonClass:focus-visible,
body.pf-v5-theme-dark .kcFormSocialAccountListButtonClass:focus-visible,
body.pf-v5-theme-dark a.kcFormSocialAccountListButtonClass:focus-visible {
  outline: 2px solid var(--quickstart-primary-color);
  outline-offset: 2px;
}

.kcFormSocialAccountListButtonClass svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.kcFormSocialAccountNameClass {
  flex: 0 1 auto;
  text-align: left;
}

@media (max-width: 768px) {
  .kcLoginContainer {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .kcFormSocialAccountListClass {
    grid-template-columns: 1fr;
  }
}

#kc-recovery-codes-list {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0 0.5rem 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

#kc-recovery-codes-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#kc-recovery-codes-list li span {
  color: #6b7280;
  font-weight: 400;
  font-size: 13px;
  min-width: 2ch;
}

#printRecoveryCodes,
#downloadRecoveryCodes,
#copyRecoveryCodes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0 0.25rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  font-size: 0;
  overflow: hidden;
  position: relative;
}

#printRecoveryCodes:hover,
#downloadRecoveryCodes:hover,
#copyRecoveryCodes:hover {
  background: #f3f4f6;
}

#printRecoveryCodes:active,
#downloadRecoveryCodes:active,
#copyRecoveryCodes:active {
  background: #e5e7eb;
}

#printRecoveryCodes i,
#downloadRecoveryCodes i,
#copyRecoveryCodes i {
  display: none;
}

#printRecoveryCodes::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V4h12v5'%3E%3C/path%3E%3Cpath d='M6 18h12v2H6z' fill='black' stroke='none'%3E%3C/path%3E%3Cpath d='M6 14h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V4h12v5'%3E%3C/path%3E%3Cpath d='M6 18h12v2H6z' fill='black' stroke='none'%3E%3C/path%3E%3Cpath d='M6 14h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
}

#downloadRecoveryCodes::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
}

#copyRecoveryCodes::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
}

#kcRecoveryCodesConfirmationCheck,
label[for="kcRecoveryCodesConfirmationCheck"] {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

label[for="kcRecoveryCodesConfirmationCheck"] {
  gap: 0.5rem;
}

body[data-page-id="login-login-recovery-authn-code-config"] #kc-recovery-codes-settings-form {
  margin-top: 0.375rem;
  gap: 0.5rem;
}

body[data-page-id="login-login-recovery-authn-code-config"] #kc-recovery-codes-settings-form #kc-form-options,
body[data-page-id="login-login-recovery-authn-code-config"] #kc-recovery-codes-settings-form .kcFormOptionsWrapperClass,
body[data-page-id="login-login-recovery-authn-code-config"] #kc-recovery-codes-settings-form .checkbox {
  margin-top: 0;
  margin-bottom: 0;
}

html.pf-v5-theme-dark body[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
html.pf-v5-theme-dark body[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description,
html.pf-v5-theme-dark body[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description p,
html.kcDarkModeClass body[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
html.kcDarkModeClass body[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description,
html.kcDarkModeClass body[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description p,
body.pf-v5-theme-dark[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
body.pf-v5-theme-dark[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description,
body.pf-v5-theme-dark[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description p,
body.kcDarkModeClass[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
body.kcDarkModeClass[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description,
body.kcDarkModeClass[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__description p {
  color: #ffffff !important;
}

html.pf-v5-theme-dark body[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon,
html.kcDarkModeClass body[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon,
body.pf-v5-theme-dark[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon,
body.kcDarkModeClass[data-page-id="login-login-recovery-authn-code-config"] .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon {
  color: #ffffff !important;
}

#authenticateWebAuthnButton {
  margin: 0;
}

#updateProfile,
#linkAccount {
  background: var(--quickstart-primary-color);
  border-color: var(--quickstart-primary-color);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#updateProfile:hover,
#linkAccount:hover {
  filter: brightness(0.9);
}

#updateProfile:active,
#linkAccount:active {
  filter: brightness(0.8);
  transform: translateY(1px);
}

#confirmOverride {
  background: var(--quickstart-primary-color);
  border-color: var(--quickstart-primary-color);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#confirmOverride:hover {
  filter: brightness(0.9);
}

#confirmOverride:active {
  filter: brightness(0.8);
  transform: translateY(1px);
}

div#kc-registration > span:nth-of-type(1) > a:nth-of-type(1) {
  margin-bottom: 1.5rem;
}

div#kc-social-providers > h2:nth-of-type(1) {
  margin-top: 0;
}

#kc-oauth h3 {
  margin: 0 0 1rem;
}

#kc-social-providers {
  margin-bottom: 1.5rem;
  text-align: center;
}

#kc-social-providers > h2,
#kc-social-providers > h4 {
  margin: 0 0 1rem;
  text-align: center;
  font-weight: 400;
}

#kc-social-providers > hr {
  margin: 1rem 0;
}

@media (max-width: 480px) {
  #kc-recovery-codes-list {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}

.kc-horizontal-card-subtitle,
.kc-horizontal-card-client-name,
.kc-horizontal-card-realm-name {
  color: var(--quickstart-secondary-color);
}

#kc-registration > span > a,
#kc-registration-container #kc-registration > a {
  font-size: 15px;
}

#kc-register-form #kc-form-options .kcFormOptionsWrapperClass a,
#kc-reset-password-form .kcFormOptionsWrapperClass a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1.5rem;
  min-height: 52.5px;
  border: 1px solid var(--quickstart-primary-color);
  border-radius: var(--quickstart-border-radius);
  background: transparent;
  color: var(--quickstart-primary-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

#kc-register-form #kc-form-options .kcFormOptionsWrapperClass a:hover,
#kc-reset-password-form .kcFormOptionsWrapperClass a:hover {
  background: color-mix(in srgb, var(--quickstart-primary-color) 8%, transparent);
  text-decoration: none;
}

#kc-register-form #kc-form-options .kcFormOptionsWrapperClass a:active,
#kc-reset-password-form .kcFormOptionsWrapperClass a:active {
  background: color-mix(in srgb, var(--quickstart-primary-color) 16%, transparent);
}

#kc-registration-container #kc-registration > a,
#kc-registration-container #kc-registration > span > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52.5px;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--quickstart-primary-color);
  border-radius: var(--quickstart-border-radius);
  color: var(--quickstart-primary-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  background: transparent;
  box-sizing: border-box;
}

#kc-registration-container #kc-registration > a:hover,
#kc-registration-container #kc-registration > span > a:hover {
  background: color-mix(in srgb, var(--quickstart-primary-color) 8%, transparent);
  text-decoration: none;
}

#kc-registration-container #kc-registration > a:active,
#kc-registration-container #kc-registration > span > a:active {
  background: color-mix(in srgb, var(--quickstart-primary-color) 16%, transparent);
}

#kc-social-providers > h2,
#kc-social-providers > h4 {
  font-weight: 400 !important;
}

.kcButtonSecondaryClass,
.kcButtonDefaultClass,
a.kcButtonSecondaryClass,
a.kcButtonDefaultClass,
button.kcButtonSecondaryClass,
button.kcButtonDefaultClass,
.kcButtonSecondaryClass.kcButtonSecondaryClass {
  border-color: var(--quickstart-primary-color);
  color: var(--quickstart-primary-color);
}

#printRecoveryCodes:hover,
#downloadRecoveryCodes:hover,
#copyRecoveryCodes:hover {
  color: var(--quickstart-secondary-color);
}

.kcCheckboxInputClass,
input[type="checkbox"].kcCheckboxInputClass,
.kcCheckboxClass input[type="checkbox"],
input[type="checkbox"] {
  accent-color: var(--quickstart-secondary-color);
}

.kcCheckboxInputClass,
input[type="checkbox"] {
  accent-color: var(--quickstart-primary-color);
}

hr {
  border: none;
  border-top: none;
  height: 2px;
  background: var(--quickstart-primary-color);
  opacity: 1;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--quickstart-font-family);
  color: var(--quickstart-text-primary-light);
}

html.pf-v5-theme-dark body,
html.kcDarkModeClass body {
  color: var(--quickstart-text-primary-dark);
}

html.pf-v5-theme-dark h1, html.pf-v5-theme-dark h2, html.pf-v5-theme-dark h3,
html.pf-v5-theme-dark h4, html.pf-v5-theme-dark h5, html.pf-v5-theme-dark h6,
html.kcDarkModeClass h1, html.kcDarkModeClass h2, html.kcDarkModeClass h3,
html.kcDarkModeClass h4, html.kcDarkModeClass h5, html.kcDarkModeClass h6 {
  color: var(--quickstart-text-primary-dark);
}

html:not(.pf-v5-theme-dark):not(.kcDarkModeClass),
html:not(.pf-v5-theme-dark):not(.kcDarkModeClass) body,
html:not(.pf-v5-theme-dark):not(.kcDarkModeClass) body#keycloak-bg {
  background-color: var(--quickstart-bg-color);
}

html.pf-v5-theme-dark,
html.pf-v5-theme-dark body,
html.pf-v5-theme-dark body#keycloak-bg,
html.kcDarkModeClass,
html.kcDarkModeClass body,
html.kcDarkModeClass body#keycloak-bg {
  background-color: var(--quickstart-bg-color-dark);
  background-image: var(--quickstart-bg-image);
}

#kc-registration-container a,
#authenticateWebAuthnButton.kcButtonSecondaryClass {
  border-radius: var(--quickstart-border-radius);
}

.kcInputGroup .kcFormPasswordVisibilityButtonClass {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--quickstart-border-radius);
  border-bottom-right-radius: var(--quickstart-border-radius);
}

:root {
  --quickstart-bg-logo-url: none;
  --keycloak-bg-logo-url: none;
}

html body .pf-v5-c-login {
  background-image: none;
}

#kc-info-message {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

#kc-logout-confirm > #kc-info-message {
  flex: 0 0 auto;
  margin-top: 0;
}

#kc-logout-confirm > #kc-info-message > p {
  margin: 0;
}

#kc-info-message > p > a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1.5rem;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--quickstart-border-radius);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  border: none;
  font-family: system-ui, -apple-system, sans-serif;
  text-decoration: none;
  text-align: center;
  background: var(--quickstart-primary-color);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#kc-info-message > p > a:hover {
  filter: brightness(0.9);
  text-decoration: none;
}

#kc-info-message > p > a:active {
  filter: brightness(0.8);
  transform: translateY(1px);
}

#kc-info-message > p > a:focus-visible {
  outline: 2px solid var(--quickstart-primary-color);
  outline-offset: 2px;
}

#kc-logout-confirm #kc-info-message > p > a {
  background: transparent;
  border: 1px solid var(--quickstart-primary-color);
  color: var(--quickstart-primary-color);
  box-shadow: none;
  margin-top: 0;
}

#kc-logout-confirm #kc-info-message > p > a:hover {
  background: color-mix(in srgb, var(--quickstart-primary-color) 8%, transparent);
  filter: none;
}

#kc-logout-confirm #kc-info-message > p > a:active {
  background: color-mix(in srgb, var(--quickstart-primary-color) 16%, transparent);
  filter: none;
}

#kc-client-name,
.kc-client-name,
.kc-horizontal-card-client-name,
[data-kc-client="name"] {
  display: none !important;
}

#kc-info-message.kcAlertClass,
.kc-info-message,
[data-kc-i18n-key="infoMessage"] {
  display: none !important;
}

#kc-terms-text {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

#kc-terms-text > :last-child {
  margin-bottom: 0;
}

html.pf-v5-theme-dark #kc-terms-text,
html.kcDarkModeClass #kc-terms-text {
  background: var(--quickstart-input-bg-color-dark, #141516);
  border-color: var(--quickstart-input-border-color-dark, #2b2c2e);
}


/* @kte:visibility-start:hide-realm-name */
/* Hide realm name */
#kc-realm-name,
.kc-realm-name,
.kc-horizontal-card-realm-name {
  display: none !important;
}
/* @kte:visibility-end */

/* @kte:visibility-start:hide-client-name */
/* Hide client name */
#kc-client-name,
.kc-client-name,
.kc-horizontal-card-client-name,
[data-kc-client="name"] {
  display: none !important;
}
/* @kte:visibility-end */

/* @kte:visibility-start:hide-subtitle */
/* Hide subtitle row when both client and realm are disabled */
.kc-horizontal-card-subtitle {
  display: none !important;
}
/* @kte:visibility-end */

/* @kte:visibility-start:hide-info-message */
/* Hide info message */
#kc-info-message.kcAlertClass,
.kc-info-message,
[data-kc-i18n-key="infoMessage"] {
  display: none !important;
}
/* @kte:visibility-end */

/* @kte:visibility-start:hide-client-container */
/* Hide client container */
#kc-client,
.kc-client {
  display: none !important;
}
/* @kte:visibility-end */

:root {
  --uploaded-bg-bg-login: url("../img/backgrounds/bg-login.webp");
  --uploaded-logo-logo-cf: url("../img/logos/logo-cf.webp");
}

:root {
  --quickstart-bg-image: url("../img/backgrounds/bg-login.webp");
  --quickstart-bg-logo-url: url("../img/backgrounds/bg-login.webp");
  --keycloak-bg-logo-url: url("../img/backgrounds/bg-login.webp");
  --quickstart-logo-url: url("../img/logos/logo-cf.webp");
  --keycloak-logo-url: url("../img/logos/logo-cf.webp");
  --kc-applied-logo-url: url("../img/logos/logo-cf.webp");
}

.kcLogin {
  --quickstart-bg-image: url("../img/backgrounds/bg-login.webp");
  --quickstart-bg-logo-url: url("../img/backgrounds/bg-login.webp");
  --keycloak-bg-logo-url: url("../img/backgrounds/bg-login.webp");
}

body:not(#\9), html:not(#\9) {
  background: url("../img/backgrounds/bg-login.webp") no-repeat center center fixed;
  background-size: cover;
}

.kc-logo-text {
  background-image: url("../img/logos/logo-cf.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#kc-header-wrapper::before {
  content: "";
  display: block;
  background-image: url("../img/logos/logo-cf.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: var(--quickstart-logo-height, 63px);
  width: var(--quickstart-logo-width, 300px);
  max-width: 100%;
  margin: 0 auto;
}

#kc-otp-login-form .kcFormOptionsWrapperClass a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1.5rem;
  min-height: 52.5px;
  border: 1px solid var(--quickstart-primary-color);
  border-radius: var(--quickstart-border-radius);
  background: transparent;
  color: var(--quickstart-primary-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s !important;
}

.kcButtonClass:disabled, button.kcButtonClass:disabled, input.kcButtonClass:disabled {
  background-color: var(--quickstart-primary-color-light);
  border-color: var(--quickstart-primary-color-light) !important;
  color: #f9fafb;
  cursor: not-allowed !important;
  opacity: .65
}