/* General layout styles */

.fl-html {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overscroll-behavior-y: contain;
  height: fit-content;
}

.fl-body {
  width: 100%;
  padding: var(--s-space-16);
  padding-top: var(--safe-area-inset-top, 0px);
  padding-bottom: var(--safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-space-24);
  flex-shrink: 0;
  justify-content: space-between;
  font-size: var(--s-font-size-base);
  font-family: var(--s-font-family-text);
  min-height: 100vh;
}

.fl-container {
  margin: var(--s-space-16) 0;
  width: 100%;
  background: var(--s-background-default);
}

/* Desktop styles */
@media only screen and (min-width: 1024px) {
  .fl-body {
    padding: 0 var(--s-space-40);
    background: var(--s-surface-sunken-default);
  }
  .fl-container {
    margin: auto 0;
    border-radius: var(--s-border-radius-l);
    padding: var(--s-space-24) var(--s-space-40);
  }

  .fl-form-card {
    padding: var(--s-space-16);
    padding-top: 0;
  }
}

/* General element styles */

.fl-body a {
  color: var(--s-interactive-primary-default);
  font-weight: 400;
  line-height: var(--s-line-height-lg);
  text-decoration-line: underline;
}

.fl-button {
  width: 100%;
  padding: var(--s-space-8) var(--s-space-12);
  justify-content: center;
  align-items: center;
  gap: var(--s-space-6);
  align-self: stretch;
  border: none;
  border-radius: var(--s-border-radius-sm);
  background: var(--s-action-primary-default);
  color: var(--s-text-on-action-primary);
  font-size: var(--s-font-size-base);
}

.fl-button--outlined {
  border-radius: var(--s-border-radius-sm);
  border: var(--s-border-width-default) solid var(--s-border-strong);
  background: var(--background-default, #fff);
  color: var(--s-text-default);
  display: flex;
  gap: var(--s-space-8);
}

.fl-button--ghost {
  border: none;
  background: none;
  color: var(--s-text-subdued);
}

h1 {
  color: var(--s-text-default);
  text-align: center;
  font-size: var(--s-font-size-2xl);
  font-style: normal;
  font-weight: var(--s-font-weight-bold);
}

p {
  text-align: center;
}

.fl-hidden {
  display: none;
}

.instruction {
  text-align: center;
}

/* Form styles */

.fl-form__header {
  text-align: center;
  margin-bottom: var(--s-space-8);
}

.fl-form__header * {
  float: unset;
}

#kc-page-title {
  margin-top: var(--s-space-40);
}

/* Add border style to form group not input fields */
.fl-form__group:not(#kc-form-buttons, .fl-form__settings),
.fl-form__group--for-checkbox {
  margin: var(--s-space-8) 0;
  padding: var(--s-space-12) var(--s-space-16);
  border-radius: var(--s-border-radius-sm);
  border: var(--s-border-width-default) solid var(--s-border-strong);
}

/* Add focus style to form group */
.fl-form__group--for-checkbox:focus-within,
.fl-form__group--for-checkbox:not(#kc-form-buttons, .fl-form__settings):has(
    input[type="checkbox"]:checked
  ) {
  border: var(--s-border-width-default) solid var(--s-border-highlight);
}
.fl-form__group:not(#kc-form-buttons, .fl-form__settings):focus-within {
  border: var(--s-border-width-default) solid var(--s-border-highlight);
}

/* Remove focus style from input fields */
.fl-form__group:not(#kc-form-buttons, .fl-form__settings) input:focus,
.fl-form__group--for-checkbox input:focus {
  outline: none;
  box-shadow: none;
  border-color: inherit;
}

/* Remove border style of input fields */
.fl-input {
  border: none;
  width: 100%;
}

/* Add error border style around form group, not input field */
form:has([id^="input-error"])
  .fl-form__group:has(input[type="text"], input[type="password"]),
form.invalid
  .fl-form__group:not(#kc-form-buttons, .fl-form__settings):has(
    input[type="checkbox"]:not(:checked)
  ) {
  border: var(--s-border-width-default) solid var(--s-border-critical);
}
.fl-form--has-error .fl-form__group:not(#kc-form-buttons, .fl-form__settings) {
  border: var(--s-border-width-default) solid var(--s-border-critical);
}

.fl-form__group--for-checkbox {
  width: 100%;
  cursor: pointer;
  display: flex;
  gap: var(--s-space-8);
}

.fl-label,
.fl-input,
.control-label {
  font-style: normal;
  font-weight: var(--s-font-weight-normal);
  line-height: var(--s-line-height-lg);
  margin: 0;
  padding: 0;
  display: block;
}

.fl-label,
.control-label {
  color: var(--s-text-subdued);
  font-size: var(--s-font-size-sm);
  line-height: var(--s-line-height-sm);
  text-align: left;
}

.fl-label-wrapper {
  display: flex;
  gap: var(--s-space-2);
}

input[type="checkbox"].fl-checkbox__input {
  margin: 0;
  accent-color: var(--s-interactive-primary-default);
}

.fl-checkbox__label {
  font-weight: var(--s-font-weight-normal);
}

.fl-form__settings,
.fl-form__options {
  text-align: center;
  margin-bottom: var(--s-space-24);
}

/* Hide remember me from login form */
#kc-form-login .fl-form__settings #kc-form-options {
  display: none;
}

/* Error message styles */
.fl-form__helper-text {
  color: var(--s-text-critical);
  font-size: var(--s-font-size-sm);
  display: flex;
  gap: var(--s-space-2);
  line-height: var(--s-font-size-sm);
  margin-bottom: var(--s-space-8);
}

/* Add warning icon before error message */
.fl-form__helper-text::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3E%3Cpath d="M6.05 14C5.87222 14 5.70267 13.9667 5.54133 13.9C5.38044 13.8333 5.23889 13.7389 5.11667 13.6167L2.38333 10.8833C2.26111 10.7611 2.16667 10.6196 2.1 10.4587C2.03333 10.2973 2 10.1278 2 9.95V6.05C2 5.87222 2.03333 5.70267 2.1 5.54133C2.16667 5.38044 2.26111 5.23889 2.38333 5.11667L5.11667 2.38333C5.23889 2.26111 5.38044 2.16667 5.54133 2.1C5.70267 2.03333 5.87222 2 6.05 2H9.95C10.1278 2 10.2973 2.03333 10.4587 2.1C10.6196 2.16667 10.7611 2.26111 10.8833 2.38333L13.6167 5.11667C13.7389 5.23889 13.8333 5.38044 13.9 5.54133C13.9667 5.70267 14 5.87222 14 6.05V9.95C14 10.1278 13.9667 10.2973 13.9 10.4587C13.8333 10.6196 13.7389 10.7611 13.6167 10.8833L10.8833 13.6167C10.7611 13.7389 10.6196 13.8333 10.4587 13.9C10.2973 13.9667 10.1278 14 9.95 14H6.05ZM8 11.3333C8.18889 11.3333 8.34733 11.2693 8.47533 11.1413C8.60289 11.0138 8.66667 10.8556 8.66667 10.6667C8.66667 10.4778 8.60289 10.3193 8.47533 10.1913C8.34733 10.0638 8.18889 10 8 10C7.81111 10 7.65289 10.0638 7.52533 10.1913C7.39733 10.3193 7.33333 10.4778 7.33333 10.6667C7.33333 10.8556 7.39733 11.0138 7.52533 11.1413C7.65289 11.2693 7.81111 11.3333 8 11.3333ZM8 8.66667C8.18889 8.66667 8.34733 8.60267 8.47533 8.47467C8.60289 8.34711 8.66667 8.18889 8.66667 8V5.33333C8.66667 5.14444 8.60289 4.986 8.47533 4.858C8.34733 4.73044 8.18889 4.66667 8 4.66667C7.81111 4.66667 7.65289 4.73044 7.52533 4.858C7.39733 4.986 7.33333 5.14444 7.33333 5.33333V8C7.33333 8.18889 7.39733 8.34711 7.52533 8.47467C7.65289 8.60267 7.81111 8.66667 8 8.66667ZM6.06667 12.6667H9.93333L12.6667 9.93333V6.06667L9.93333 3.33333H6.06667L3.33333 6.06667V9.93333L6.06667 12.6667Z" fill="%23D50636"/%3E%3C/svg%3E');
  background-size: contain;
  vertical-align: middle;
}

.fl-signup {
  text-align: center;
  margin-top: var(--s-space-16);
}

.fl-content-wrapper div {
  width: 100%;
}

/* Custom Footer styles */

.fl-footer {
  text-align: center;
  padding: var(--s-space-16);
  font-size: var(--s-font-size-sm);
}
.fl-footer a {
  text-decoration: none;
  color: var(--s-text-subdued);
}

/* Alert styles */

.fl-alert {
  border: none;
  border-radius: var(--s-border-radius-sm);
  display: flex;
  column-gap: var(--s-space-8);
  padding: var(--s-space-16);
  line-height: var(--s-line-height-sm);
}

.fl-alert.alert-success {
  background: var(--s-surface-success-subdued);
}

.fl-alert.alert-error {
  background: var(--s-surface-critical-subdued);
}

.fl-alert.alert-warning {
  background: var(--s-surface-warning-subdued);
}

.fl-alert.alert-info {
  background: var(--s-surface-info-subdued);
}

/* Registration styles */

#fl-register .fl-container {
  height: unset;
}

#fl-register .fl-label-wrapper.subtitle {
  display: none;
}

/* Hide standard back link */
#kc-register-form .fl-form__options * {
  display: none;
}

/* Hide asterisk */
#kc-register-form .fl-label-wrapper {
  font-size: 0;
}
#kc-register-form .fl-label {
  font-size: var(--s-font-size-sm);
}

/* Custom header styles */

#fl-header-wrapper {
  position: relative;
}

#fl-header-back-link {
  position: absolute;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}

button#fl-header-back-link {
  color: var(--s-interactive-primary-default);
  padding: 0;
}

/* Add back icon to back button */
#fl-header-back-link::before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41z' fill='%23003DAF'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.fl-logo {
  max-height: 36px;
  max-width: 184px;
}

/* Hide "logout on other devices" checkbox */
#kc-passwd-update-form .fl-form__options * {
  display: none;
}

.fl-info-wrapper {
  color: var(--s-text-subdued);
}

/* Reset password form */

#fl-login-reset-password #fl-info-wrapper {
  text-align: center;
  margin-bottom: var(--s-space-8);
  color: var(--s-text-subdued);
}

#fl-login-reset-password #kc-info-wrapper {
  display: none;
}

/* Hide back link */
#kc-reset-password-form .fl-form__options * {
  display: none;
}

/* Custom support link */
.fl-support-link-wrapper {
  margin-top: var(--s-space-16);
  text-align: center;
}

#fl-support-link {
  margin-top: var(--s-space-8);
  text-align: center;
}

/* Terms and privacy policy styles */

/* Info message when clicking on link in email to accept terms and conditions */
#kc-info-message {
  text-align: center;
}

#fl-terms input[name="cancel"] {
  display: none;
}

#kc-terms-text {
  text-align: center;
  color: var(--s-text-subdued);
  margin-top: var(--s-space-8);
  margin-bottom: var(--s-space-24);
}

#kc-accept {
  margin: var(--s-space-24) 0;
}

/* Custom password policy styles */

#fl-password-policy-info {
  border-radius: var(--s-border-radius-sm);
  background: var(--s-surface-raised-default);
  padding: var(--s-space-12) var(--s-space-16);
  color: var(--s-text-subdued);
  font-size: var(--s-font-size-sm);
}

#fl-password-policy-info p {
  text-align: left;
  color: var(--s-text-default);
  font-weight: var(--s-font-weight-semibold);
  margin: 0;
}

#fl-password-policy-info ul {
  margin: 0;
}

#fl-password-policy-info ul li {
  list-style-type: none;
  padding-left: var(--s-space-16);
  position: relative;
}

#fl-password-policy-info ul li.password-policy-item--matched {
  list-style-type: none;
  position: relative;
}

#fl-password-policy-info ul li::before {
  position: absolute;
  left: 0;
}

#fl-password-policy-info ul li::before {
  content: "-";
}

#fl-password-policy-info ul li.valid {
  color: var(--s-text-success);
}
#fl-password-policy-info ul li.valid::before {
  content: "✓";
}

#kc-info-message > .instruction > b {
  display: block;
}

#kc-info-message a {
  width: 100%;
  padding: var(--s-space-8) var(--s-space-12);
  justify-content: center;
  align-items: center;
  gap: var(--s-space-6);
  align-self: stretch;
  border: none;
  border-radius: var(--s-border-radius-sm);
  background: var(--s-action-primary-default);
  color: var(--s-text-on-action-primary);
  font-size: var(--s-font-size-sm);
  text-decoration: none;
}

/* TOTP Config styles */
#totp-back-button {
  margin: var(--s-space-8) 0;
}

ol#kc-totp-settings {
  list-style-type: none;
  text-align: center;
  color: var(--s-text-subdued);
}

#fl-totp-support-link {
  width: 100%;
  text-align: center;
  margin: var(--s-space-8) 0;
}

#kc-totp-settings-form #kc-form-options {
  display: none;
}

#kc-totp-settings li[value="3"] p:last-child {
  display: none;
}

#kc-totp-secret-key {
  display: none;
}

p#fl-totp-secret-key-wrapper {
  border-radius: var(--s-border-radius-sm);
  background: var(--s-surface-sunken-default);
  padding: var(--s-space-16);
  text-align: left;
  font-size: var(--s-font-size-lg);
  color: var(--s-text-default);
}

#fl-totp-secret-key-container {
  display: flex;
  gap: var(--s-space-24);
  align-items: center;
}

#fl-totp-secret-key-container button {
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--s-space-8);
}

#fl-totp-secret-key-container #fl-totp-copy-button img {
  max-width: unset;
}

#kc-totp-supported-apps {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-16);
  margin: var(--s-space-24) 0;
}

#kc-totp-supported-apps img {
  height: 20px;
}

#kc-totp-supported-apps a {
  display: flex;
  gap: var(--s-space-4);
  align-items: center;
  text-decoration: none;
}

#kc-totp-type,
#kc-totp-algorithm,
#kc-totp-digits,
#kc-totp-period,
#kc-totp-counter {
  display: none;
}

/* Login Options */
.fl-separator {
  padding: 0 var(--s-space-12);
  color: var(--s-border-strong);
}

.fl-social-account__section {
  padding: var(--s-space-8) 0;
}
.fl-social-account__section hr,
.fl-social-account__section h2 {
  display: none;
}

.fl-social-account__list a.fl-button {
  display: flex;
  gap: var(--s-space-8);
  text-align: center;
  text-decoration-line: none;
  color: var(--s-text-on-action-primary);
  margin: var(--s-space-8) 0;
}

.fl-button--social-provider::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNOC43NTAwNCAxMi41SDExLjI1TDEwLjc3MDkgOS44MTI0NkMxMS4wNDg3IDkuNjczNTcgMTEuMjY3NCA5LjQ3MjE4IDExLjQyNzEgOS4yMDgyOUMxMS41ODY4IDguOTQ0NCAxMS42NjY3IDguNjUyNzQgMTEuNjY2NyA4LjMzMzI5QzExLjY2NjcgNy44NzQ5NiAxMS41MDM1IDcuNDgyNiAxMS4xNzcxIDcuMTU2MjFDMTAuODUwNyA2LjgyOTgyIDEwLjQ1ODQgNi42NjY2MyAxMCA2LjY2NjYzQzkuNTQxNzEgNi42NjY2MyA5LjE0OTM1IDYuODI5ODIgOC44MjI5NiA3LjE1NjIxQzguNDk2NTcgNy40ODI2IDguMzMzMzcgNy44NzQ5NiA4LjMzMzM3IDguMzMzMjlDOC4zMzMzNyA4LjY1Mjc0IDguNDEzMjMgOC45NDQ0IDguNTcyOTYgOS4yMDgyOUM4LjczMjY4IDkuNDcyMTggOC45NTE0MyA5LjY3MzU3IDkuMjI5MjEgOS44MTI0Nkw4Ljc1MDA0IDEyLjVaTTEwIDE4LjMzMzNDOC4wNjk0OCAxNy44NDcyIDYuNDc1NzMgMTYuNzM5NSA1LjIxODc5IDE1LjAxMDRDMy45NjE4NSAxMy4yODEyIDMuMzMzMzcgMTEuMzYxMSAzLjMzMzM3IDkuMjQ5OTZWNC4xNjY2M0wxMCAxLjY2NjYzTDE2LjY2NjcgNC4xNjY2M1Y5LjI0OTk2QzE2LjY2NjcgMTEuMzYxMSAxNi4wMzgyIDEzLjI4MTIgMTQuNzgxMyAxNS4wMTA0QzEzLjUyNDMgMTYuNzM5NSAxMS45MzA2IDE3Ljg0NzIgMTAgMTguMzMzM1pNMTAgMTYuNTgzM0MxMS40NDQ1IDE2LjEyNSAxMi42Mzg5IDE1LjIwODMgMTMuNTgzNCAxMy44MzMzQzE0LjUyNzggMTIuNDU4MyAxNSAxMC45MzA1IDE1IDkuMjQ5OTZWNS4zMTI0NkwxMCAzLjQzNzQ2TDUuMDAwMDQgNS4zMTI0NlY5LjI0OTk2QzUuMDAwMDQgMTAuOTMwNSA1LjQ3MjI2IDEyLjQ1ODMgNi40MTY3MSAxMy44MzMzQzcuMzYxMTUgMTUuMjA4MyA4LjU1NTYgMTYuMTI1IDEwIDE2LjU4MzNaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==");
  background-size: contain;
  vertical-align: middle;
}

#kc-form {
  display: none;
}

.fl-input-group:has(.fl-password-visibility__button) {
  display: flex;
  gap: var(--s-space-12);
}

.fl-input-group--password-visibility {
  display: flex;
  gap: var(--s-space-12);
}

/* TOTP Login */

#kc-username {
  display: none;
}

/* Hide warning messages */
#fl-login-update-password .alert-warning {
  display: none;
}
#fl-login-config-totp .alert-warning {
  display: none;
}

/* Only show the list item of the respecive totp step */
ol#kc-totp-settings > li {
  display: none;
}

#fl-login-config-totp.fl-active-step-1 ol#kc-totp-settings > li:first-child,
#fl-login-config-totp.fl-active-step-2 ol#kc-totp-settings > li:nth-child(2),
#fl-login-config-totp.fl-active-step-3 ol#kc-totp-settings > li:last-child {
  display: block;
}

/* Only show form in last totp step */
#kc-totp-settings-form {
  display: none;
}

#fl-login-config-totp.fl-active-step-3 #kc-totp-settings-form {
  display: block;
}

/* Hide continue button in last totp step */
#fl-login-config-totp.fl-active-step-3 #fl-totp-continue-button {
  display: none;
}

/* Hide back button in first totp step */
#fl-login-config-totp.fl-active-step-1 #fl-header-back-link {
  display: none;
}

#kc-totp-settings-form .required {
  display: none;
}

#fl-login-config-totp.fl-active-step-3 li > p:not(:first-child) {
  display: none;
}