:root {
  --inceptia-green-50: #f5fffb;
  --inceptia-green: #006d3f;
  --inceptia-green-hover: #004b2b;
  --link-color: #0277bd;
  --link-hover-color: #01578b;
  --text-color: #41484d;
  --input-border-color: #b8b8b8;
}
body {
  color: var(--text-color);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--inceptia-green);
}
/* COMMON TO ALL PAGES ======================================================== */
.login-pf body {
  background: #f8f9fc none;
}
#kc-header {
  background: transparent url("../img/logo_inceptia.png") no-repeat center center;
  /* Height of the logo image */
  height: 49px;
}
/* Hide the realm name from the keycloak theme - using the Inceptia logo (above) instead */
#kc-header-wrapper {
  display: none;
}
/* h1 page header */
#kc-page-title {
  font-size: 18px;
  font-weight: 500;
  line-height: inherit;
  margin: 0 !important;
  padding-block: 17px;
  visibility: hidden;
}
#kc-content-wrapper {
  /* Labels */
  --pf-c-form__label--FontSize: 1rem;
  --pf-c-form__label--LineHeight: 1.5;
  --pf-c-form__label-text--FontWeight: 500;
  margin-top: 0;
  padding-inline: 30px;
}
.login-pf-page {
  display: flow-root;
  margin-bottom: 2em;
}
.login-pf-page .card-pf {
  background-color: #fff;
  border-top: none;
  box-shadow: 0 1px 2px 2px rgba(207, 216, 220, 0.32);
  padding: 0 0 40px;
  position: relative;
}
@media (min-width: 768px) {
  .login-pf-page {
    /* Increase the padding above the Inceptia logo */
    padding-top: 57px;
  }
  .login-pf-page .login-pf-page-header {
    /* Increase the margin below the Inceptia logo */
    margin-bottom: 46px;
  }
}
.pf-c-alert.pf-m-inline {
  margin-bottom: 20px;
}
/* FORMS ====================================================================== */
.form-group {
  margin-bottom: 30px;
}
/* Form Labels */
.pf-c-form__label.pf-c-form__label-text {
  margin-bottom: 0.5em;
}
/* Form Inputs */
.pf-c-form-control {
  border: solid 1px var(--input-border-color);
  border-radius: 3px;
  padding-block: 0.6em;
}
.pf-c-form-control:focus {
  border-bottom-width: 1px;
  padding-block: 0.6em;
}
.pf-c-form-control:not(textarea) {
  height: revert;
}
/* Form Buttons */
.pf-c-button {
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  padding-block: 0.75em;
  transition: all 0.2s;
}
.pf-c-button.pf-m-primary {
  background-color: var(--inceptia-green);
  color: #fff;
}
.pf-c-button.pf-m-primary:hover, .pf-c-button.pf-m-primary:focus-visible {
  background-color: var(--inceptia-green-hover);
}
/* Form Input Groups */
.pf-c-input-group input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.pf-c-input-group .pf-c-button {
  border-radius: 0 3px 3px 0;
  border: 1px solid var(--input-border-color);
  padding-block: 0.6em;
  transition: all 0.2s;
}
.pf-c-input-group .pf-c-button.pf-m-control {
  border-color: var(--input-border-color);
}
.pf-c-input-group .pf-c-button:hover, .pf-c-input-group .pf-c-button:focus-visible {
  background-color: var(--inceptia-green-50);
}
.pf-c-input-group .pf-c-button:after {
  display: none;
}
.pf-c-input-group .pf-c-button .fa {
  color: var(--input-border-color);
}
/* SIGN IN PAGE =============================================================== */
/* h1 - Sign in to your account / Sign In */
.inceptia-kc-sign-in #kc-page-title {
  border-top: 3px solid var(--inceptia-green);
  color: var(--inceptia-green);
  padding-block-start: 14px;
  width: 50%;
}
.inceptia-kc-sign-in #kc-page-title.visible {
  visibility: visible;
}
.inceptia-kc-sign-in #kc-page-title.full-width {
  border-top: none;
  color: var(--text-color);
  font-size: 24px;
  padding-block-start: 36px;
  width: 100%;
}
/* Container for "Forgot your password?" */
.inceptia-kc-sign-in #kc-form-login .form-group.login-pf-settings {
  display: none;
  font-weight: 500;
  justify-content: space-evenly;
  text-align: center;
}
.inceptia-kc-sign-in #kc-form-login .form-group.login-pf-settings.visible {
  display: flex;
}
.inceptia-kc-sign-in #kc-form-login .form-group.login-pf-settings a {
  color: var(--link-color);
}
.inceptia-kc-sign-in #kc-form-login .form-group.login-pf-settings a:hover, .inceptia-kc-sign-in #kc-form-login .form-group.login-pf-settings a:focus-visible {
  color: var(--link-hover-color);
}
.inceptia-kc-sign-in #kc-form-options .checkbox {
  margin: 0;
}
/* New user? Register link (lots of CSS tied to IDs) */
.inceptia-kc-sign-in #kc-info {
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
}
.inceptia-kc-sign-in #kc-info-wrapper {
  border-top: none;
  padding: 0;
}
/* "New user?" text - hide it, JS will move the "Register" link outside of it */
.inceptia-kc-sign-in #kc-registration span {
  display: none;
}
/* Want the "Register"/"Create Account" link to "fill" the tab */
.inceptia-kc-sign-in #kc-registration a {
  background-color: #fcfcfc;
  color: #424242;
  display: block;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  padding-block: 17px;
  transition: all 0.2s;
}
.inceptia-kc-sign-in #kc-registration a:hover {
  background-color: var(--inceptia-green-50);
  text-decoration: none;
}
/* CREATE ACCOUNT PAGE ======================================================== */
/* h1 - Register / Create Account */
.inceptia-kc-create-account #kc-page-title {
  border-top: 3px solid var(--inceptia-green);
  color: var(--inceptia-green);
  padding-block-start: 14px;
  width: 50%;
  /* Move to the right of the header */
  align-self: flex-end;
}
.inceptia-kc-create-account #kc-page-title.visible {
  visibility: visible;
}
/* "Back to Login" link */
.inceptia-kc-create-account #kc-form-options {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  text-align: center;
}
/* Want the "Back to Login"/"Sign In" link to "fill" the tab */
.inceptia-kc-create-account #kc-form-options a {
  background-color: #fcfcfc;
  color: #424242;
  display: block;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  padding-block: 17px;
  transition: background 0.2s;
}
.inceptia-kc-create-account #kc-form-options a:hover {
  background-color: var(--inceptia-green-50);
  text-decoration: none;
}
/* Hide first and last name fields on "Register"/"Create Account" page (changed them to optional in Realm settings-->User profile) */
.inceptia-kc-create-account .form-group:has([id="firstName"]), .inceptia-kc-create-account .form-group:has([id="lastName"]) {
  display: none;
}
/* Remove the top/bottom margins around the "Register"/"Create Account" button */
.inceptia-kc-create-account .form-group:has([id="kc-form-buttons"]) {
  margin-bottom: 0;
}
.inceptia-kc-create-account .form-group:has([id="kc-form-buttons"]) #kc-form-buttons {
  margin-top: 0;
}
/* mfa-choice tweaks */
.inceptia-kc-create-account label[for="mfa-choice"] {
  margin-bottom: 0;
}
.inceptia-kc-create-account #form-help-text-before-mfa-choice {
  font-size: 0.875rem;
  margin-bottom: 1em;
}
.inceptia-kc-create-account .pf-c-radio {
  display: flex;
  align-items: center;
  margin-bottom: 0.75em;
}
.inceptia-kc-create-account .pf-c-radio + .pf-c-radio {
  margin-bottom: 0.25em;
}
.inceptia-kc-create-account .pf-c-radio input {
  margin: 0;
}
.inceptia-kc-create-account .pf-c-radio label {
  font-size: 0.875rem;
}
/* FORGOT YOUR PASSWORD/ENTER PHONE NUMBER/ENTER SMS CODE PAGES =============== */
.inceptia-kc-forgot-phone-code .card-pf {
  padding-block-start: 36px;
}
/* h1 - Forgot your password? */
.inceptia-kc-forgot-phone-code #kc-username, .inceptia-kc-forgot-phone-code #kc-page-title {
  font-size: 24px;
  padding: 0;
  visibility: visible;
}
.inceptia-kc-forgot-phone-code #kc-username {
  margin-bottom: 0;
}
.inceptia-kc-forgot-phone-code .login-pf-header {
  margin-bottom: 20px;
}
/* Instruction text */
.inceptia-kc-forgot-phone-code #kc-info {
  margin: 0 0 20px;
}
.inceptia-kc-forgot-phone-code #kc-info-wrapper {
  background-color: transparent;
  color: var(--text-color);
  font-size: 1rem;
  padding: 0;
  text-wrap: balance;
}
/* "Back to Login/Sign In" link */
.inceptia-kc-forgot-phone-code #kc-form-options {
  text-align: center;
}
.inceptia-kc-forgot-phone-code #kc-form-options.kc-form-options-left {
  text-align: left;
}
.inceptia-kc-forgot-phone-code #kc-form-options a,
.inceptia-kc-forgot-phone-code #kc-select-try-another-way-form a {
  color: var(--link-color);
  font-weight: 500;
}
.inceptia-kc-forgot-phone-code #kc-form-options a:hover, .inceptia-kc-forgot-phone-code #kc-form-options a:focus-visible,
.inceptia-kc-forgot-phone-code #kc-select-try-another-way-form a:hover, .inceptia-kc-forgot-phone-code #kc-select-try-another-way-form a:focus-visible {
  color: var(--link-hover-color);
}
/* Submit button */
.inceptia-kc-forgot-phone-code #kc-form-buttons {
  margin-top: 5px;
  /* 5px + 30px from preceding .form-group = 35px from "Auth - Verify Email" Figma screen */
}
/* Hide the empty div just after the form that would normally contain the instructions (mobile_number_form.ftl) */
.inceptia-kc-forgot-phone-code form + #kc-info {
  display: none;
}
.inceptia-kc-forgot-phone-code #kc-select-try-another-way-form {
  float: right;
  margin-top: -1.5em;
  width: fit-content;
}
.inceptia-kc-forgot-phone-code #kc-select-try-another-way-form .form-group {
  margin-bottom: 0;
}
/* TOTP SETTINGS & EMAIL VERIFICATION PAGES =================================== */
.inceptia-kc-totp-settings .card-pf, .inceptia-kc-email-verification .card-pf {
  padding-block-start: 36px;
}
/* h1 - Mobile Authenticator Setup */
.inceptia-kc-totp-settings #kc-page-title, .inceptia-kc-email-verification #kc-page-title {
  font-size: 24px;
  padding: 0;
  visibility: visible;
}
.inceptia-kc-totp-settings .login-pf-header, .inceptia-kc-email-verification .login-pf-header {
  margin-bottom: 20px;
}
.inceptia-kc-totp-settings a, .inceptia-kc-email-verification a {
  color: var(--link-color);
}
.inceptia-kc-totp-settings a:hover, .inceptia-kc-email-verification a:hover, .inceptia-kc-totp-settings a:focus-visible, .inceptia-kc-email-verification a:focus-visible {
  color: var(--link-hover-color);
}
/* EMAIL VERIFICATION PAGE ==================================================== */
.inceptia-kc-email-verification .card-pf {
  text-align: center;
}
.inceptia-kc-email-verification .instruction {
  text-wrap: balance;
}
.inceptia-kc-email-verification a {
  display: inline-block;
  font-weight: 500;
  margin-top: 25px;
}
/* ONE-TIME CODE LOGIN PAGE =================================================== */
.inceptia-kc-otp-login .card-pf {
  padding-block-start: 36px;
}
.inceptia-kc-otp-login #kc-page-title {
  font-size: 24px;
  padding: 0;
  visibility: visible;
}
.inceptia-kc-otp-login .login-pf-header {
  margin-bottom: 20px;
}
.inceptia-kc-otp-login #otp-instructions {
  color: var(--text-color);
  font-size: 1rem;
  margin-bottom: 20px;
  text-align: center;
  text-wrap: balance;
}
/* Remove the top margin above the "Continue" button */
.inceptia-kc-otp-login #kc-form-buttons {
  margin-top: 0;
}
.inceptia-kc-otp-login .reset-login-wrapper {
  text-align: center;
}
.inceptia-kc-otp-login .reset-login-wrapper-left {
  text-align: left;
}
.inceptia-kc-otp-login .reset-login-wrapper a,
.inceptia-kc-otp-login #kc-select-try-another-way-form a {
  color: var(--link-color);
  font-weight: 500;
}
.inceptia-kc-otp-login .reset-login-wrapper a:hover, .inceptia-kc-otp-login .reset-login-wrapper a:focus-visible,
.inceptia-kc-otp-login #kc-select-try-another-way-form a:hover, .inceptia-kc-otp-login #kc-select-try-another-way-form a:focus-visible {
  color: var(--link-hover-color);
}
.inceptia-kc-otp-login #kc-select-try-another-way-form {
  float: right;
  margin-top: -1.5em;
  width: fit-content;
}
.inceptia-kc-otp-login #kc-select-try-another-way-form .form-group {
  margin-bottom: 0;
}
/* UPDATE PASSWORD PAGE ======================================================= */
.inceptia-kc-update-password .card-pf {
  padding-block-start: 36px;
}
/* h1 - Update password */
.inceptia-kc-update-password #kc-page-title {
  font-size: 24px;
  padding: 0;
  visibility: visible;
}
.inceptia-kc-update-password .login-pf-header {
  margin-bottom: 20px;
}
/* Remove the bottom margin below the "Submit" button */
.inceptia-kc-update-password .form-group:has([id="kc-form-buttons"]) {
  margin-bottom: 0;
}
/* UPDATE PROFILE PAGE ======================================================== */
.inceptia-kc-update-profile .card-pf {
  padding-block-start: 36px;
}
/* h1 - Update Account Information - changed to "Update Email Address" */
.inceptia-kc-update-profile #kc-page-title {
  font-size: 24px;
  padding: 0;
  visibility: visible;
}
/* UPDATE PASSWORD/PROFILE PAGE =============================================== */
/* Adjust the Save/Cancel buttons to fill the space using flexbox */
.inceptia-kc-update-password #kc-form-buttons,
.inceptia-kc-update-profile #kc-form-buttons {
  display: flex;
  gap: 1rem;
}
.inceptia-kc-update-password #kc-form-buttons [type="submit"],
.inceptia-kc-update-profile #kc-form-buttons [type="submit"] {
  min-width: 50%;
}
/* Tweak the Cancel button to match other Cancel buttons in the React app */
.inceptia-kc-update-password #kc-form-buttons .btn-default[type="submit"],
.inceptia-kc-update-profile #kc-form-buttons .btn-default[type="submit"] {
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--inceptia-green);
  color: var(--inceptia-green);
}
.inceptia-kc-update-password #kc-form-buttons .btn-default[type="submit"]:hover,
.inceptia-kc-update-password #kc-form-buttons .btn-default[type="submit"]:focus-visible,
.inceptia-kc-update-profile #kc-form-buttons .btn-default[type="submit"]:hover,
.inceptia-kc-update-profile #kc-form-buttons .btn-default[type="submit"]:focus-visible {
  background-color: rgba(0, 109, 63, 0.06);
}
/* REAUTHENTICATE PAGE ======================================================== */
.inceptia-kc-reauthenticate .card-pf {
  padding-block-start: 36px;
}
.inceptia-kc-reauthenticate #kc-attempted-username {
  font-size: 24px;
  margin-bottom: 20px;
  padding: 0;
}
.inceptia-kc-reauthenticate .reset-login-wrapper {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  text-align: center;
}
.inceptia-kc-reauthenticate .reset-login-wrapper a {
  color: var(--link-color);
  font-weight: 500;
}
.inceptia-kc-reauthenticate .reset-login-wrapper a:hover, .inceptia-kc-reauthenticate .reset-login-wrapper a:focus-visible {
  color: var(--link-hover-color);
}
/* CUSTOM MESSAGES ============================================================ */
#custom-messages {
    .card-pf {
        background-color: transparent;
        box-shadow: none;
        padding: 0;
    }

    .pf-c-alert {
        box-shadow: 0 1px 2px 2px rgba(207, 216, 220, 0.32);
    }
}