:root {
  --salti-white: #ffffff;
  --salti-background: #eef1f7b2;
  --salti-secondary-text: #506286;
  --salti-primary-text: #2b354a;
  --salti-primary-main: #006aeb;
  --salti-primary-hover: #192e83;
  --salti-text-hover: rgba(0, 106, 235, 0.15);
  --salti-border-stroke: #7b8fb7;
  --salti-error-main: #d53f50;
  --salti-success-main: #2F854B;
  --salti-error-light: rgb(245,207,211);
  --salti-success-light: rgb(176, 209, 182);
  --salti-warning-light: rgb(255, 221, 169);
  --salti-info-light: rgb(168, 228, 255);
  --salti-info-dark: #007FAC;
  --salti-link-hover: #0099d3;
  --salti-error-dark-text: rgb(95, 28, 36);
  --salti-success-dark-text: rgb(21, 59, 33);
  --salti-warning-dark-text: rgb(114, 72, 13);
  --salti-info-dark-text: rgb(21, 84, 103);
  --salti-background-ripple: rgb(0, 106, 235, 0.15);
  --salti-outlined-button-border: #006aeba6;

  --default-background-transition: background-color 250ms
      cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

body {
  background: var(--salti-background) !important;
  padding: 40px;
  height: unset !important;
}

footer {
  margin: 48px auto;
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 32px;
}

.footer-content > p {
  margin: 4px 0 0 0 !important;
}

.footer-logo {
  width: 128px;
  margin: auto 0 auto auto;
}

.overline {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  font-family: "Public Sans";
}

.subtitle1 {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  font-family: "Public Sans";
}

.body1 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-family: "Public Sans";
}

.body2 {
  font-size: 14px;
  line-height: 20px;
  font-family: "Public Sans";
}

.h2 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  font-family: "Sora";
}

.link {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--salti-info-dark);
  text-decoration: none !important;
  border-bottom: 2px solid var(--salti-info-dark);
}

.link:hover {
  border-bottom: 2px solid var(--salti-link-hover);
}

.text-center {
  text-align: center;
}

.helper-text {
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  font-family: "Public Sans";
}

.m-0 {
  margin: 0 !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mt-28 {
  margin-top: 28px !important;
}

.mt-36 {
  margin-top: 36px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.text-secondary {
  color: var(--salti-secondary-text);
}

.text-primary {
  color: var(--salti-primary-text);
}

.text-success-main-color {
  color: var(--salti-success-main);
}

.text-error-main-color {
  color: var(--salti-error-main);
}

.text-error-light-color {
  color: var(--salti-error-light);
}

.text-success-light-color {
  color: var(--salti-success-light);
}

.text-warning-light {
  color: var(--salti-warning-light);
}

.text-info-light {
  color: var(--salti-info-light);
}

.text-error-dark-color {
  color: var(--salti-error-dark-text);
}

.text-success-dark-color {
  color: var(--salti-success-dark-text);
}

.text-warning-dark-color {
  color: var(--salti-warning-dark-text);
}

.text-info-dark-color {
  color: var(--salti-info-dark-text);
}

.salti-card {
  background-color: var(--salti-white);
  border-radius: 8px;
  padding: 48px 24px !important;
  width: 424px;
  box-shadow: 0px 1px 1px 0px #50628638;
  border: none;
  margin: 0 auto !important;
}

.header-logo-wrapper {
  margin: 28px auto 28px auto;
  display: flex;
  justify-content: center;
}

.header-logo {
  max-width: 180px;
  max-height: 86px;
  width: auto;
  height: auto;
  margin: auto 24px;
}

.primary-button {
  width: 100%;
  height: 48px;
  background-color: var(--salti-primary-main);
  color: var(--salti-white);
  font-size: 15px;
  font-weight: 700;
  font-family: "Public Sans";
  text-transform: uppercase;
  border-radius: 8px;
  border: none;
  transition: var(--default-background-transition);
  display: flex;
  justify-content: center;
  align-items: center;
}

.primary-button:hover {
  background-color: var(--salti-primary-hover);
}

.text-button,
.outlined-button {
  width: 100%;
  height: 48px;
  color: var(--salti-primary-main);
  font-size: 15px;
  font-weight: 700;
  font-family: "Public Sans";
  text-transform: uppercase;
  border-radius: 8px;
  border: none;
  transition: var(--default-background-transition);
  text-decoration: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.text-button:hover,
.outlined-button:hover {
  background-color: var(--salti-text-hover);
}

.outlined-button {
  border: 1px solid var(--salti-outlined-button-border);
}

.disable-link-styles {
  text-decoration: none !important;
}

.salti-form-group {
  position: relative;
  padding: 15px 0 0 0;
  margin-top: 10px;
}

.form-field {
  font-family: "Public Sans";
  width: 100%;
  border: 1px solid var(--salti-border-stroke);
  outline: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--salti-secondary-text);
  padding: 8px 0;
  background: transparent;
  transition: border-color 0.2s;
  height: 40px;
  border-radius: 8px;
  padding: 0 8px;
}

.form-field-error {
  border-color: var(--salti-error-main) !important;
}

.form-field-error {
  border-color: var(--salti-error-main) !important;
}

.salti-form-group {
  margin-bottom: 0px;
  margin-top: 0px;
}

.form-field::placeholder {
  color: transparent;
}

.form-field:placeholder-shown ~ .form-label {
  font-size: 16px;
  cursor: text;
  top: 30px;
  font-weight: 400;
  left: 12px;
  padding: 0;
}

.salti-form-group > label,
.form-field:focus ~ .form-label {
  position: absolute;
  top: 8px;
  left: 8px;
  display: block;
  transition: 0.2s;
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--salti-secondary-text);
  background-color: var(--salti-white);
  padding: 0 4px;
  font-family: "Public Sans";
}

.form-field-error:focus ~ .form-label {
  color: var(--salti-error-main);
}

.form-label::after {
  content: "*";
  margin-left: 2px;
  color: var(--salti-error-main);
}

.form-field:focus {
  border: 2px solid var(--salti-primary-main);
  padding: 0 8px 0 7px;
}

.salti-checkbox-label {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: 32px;
}

.salti-checkbox-label:hover::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--salti-background-ripple);
  top: 0;
  left: -32px;
  transform: translate(-25%, -25%);
  position: absolute;
}

.salti-checkbox-label input:checked ~ .salti-checkbox-icon {
  background-color: var(--salti-primary-main);
}

.salti-checkbox-icon:after {
  content: "";
  position: absolute;
  display: none;
}

.salti-checkbox-label input:checked ~ .salti-checkbox-icon:after {
  display: block;
}

.salti-checkbox-label .salti-checkbox-icon:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.salti-checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.salti-checkbox-icon {
  position: absolute;
  top: 0;
  left: -32px;
  height: 20px;
  width: 20px;
  border: 1px solid var(--salti-border-stroke);
  border-radius: 4px;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.remember-me-section {
  margin-top: 32px;
}

.error-color {
  color: var(--salti-error-main);
}

.salti-alert-error,
.salti-alert-success,
.salti-alert-warning,
.salti-alert-info {
  padding: 12px 16px;
  display: flex;
  flex-direction: row;
  border-radius: 8px;
}

.salti-alert-success {
  background-color: var(--salti-success-light);
  color: var(--salti-success-dark-text);
}

.salti-alert-info {
  background-color: var(--salti-info-light);
  color: var(--salti-info-dark-text);
}

.salti-alert-warning {
  background-color: var(--salti-warning-light);
  color: var(--salti-warning-dark-text);
}

.salti-alert-error {
  background-color: var(--salti-error-light);
  color: var(--salti-error-dark-text);
}

.alert-icon-wrapper {
  margin: auto 14px auto 2px;
  height: 20px;
  width: 20px;
}

.alert-message,
.alert-title {
  width: fit-content;
  font-family: "Public Sans";
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin-bottom: 4px;
}

.alert-title {
  font-weight: 700;
}

.partners-option.closed {
  display: none;
}

.social-login-option-text {
  display: none;
}

/* Media Queries */

@media (max-width: 600px) {
  .salti-card {
    width: 100%;
  }

  footer {
    grid-template-columns: repeat(1, auto);
  }

  .footer-logo {
    margin: auto auto auto 0;
  }

  .alert-icon-wrapper {
    display: none;
  }
}

@media (max-width: 960px) {
  .form-field {
    height: 48px;
  }

  .form-field:placeholder-shown ~ .form-label {
    top: 34px;
  }
}

.password-requirement [data-id="password-requirement-icon"] {
  height: 16px;
  width: 16px;
}

.password-requirement:not(.valid) [data-id="password-requirement-icon"] {
  visibility: hidden;
}

.password-requirement:not(.valid) [data-id="password-requirement-msg"] {
  color: var(--salti-secondary-text);
}

.password-requirement.valid [data-id="password-requirement-icon"] {
  visibility: visible;
}

.password-requirement.valid [data-id="password-requirement-msg"] {
  color: var(--salti-success-main);
}

input[type="submit"]:disabled {
  background-color: var(--salti-secondary-text);
}

/* CSS Classes for CSP Compliance - Replacing inline styles */

/* Hide elements without inline styles */
.kc-hidden {
  display: none;
}

/* Link with underline */
.salti-link-underline {
  text-decoration: underline;
}

/* Hide security error element */
#security-error {
  display: none;
  text-align: center;
  margin-top: 10px;
}