html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

.bg-patient {
  background-image: -webkit-image-set(
    url('../img/bg-patient.webp') type('image/webp'),
    url('../img/bg-patient.avif') type('image/avif'),
    url('../img/bg-patient.jpg') type('image/jpeg')
  );
  background-image: image-set(
    url('../img/bg-patient.avif') type('image/avif'),
    url('../img/bg-patient.webp') type('image/webp'),
    url('../img/bg-patient.jpg') type('image/jpeg')
  );
}

.bg-practitioner {
  background-image: -webkit-image-set(
    url('../img/bg-practitioner.webp') type('image/webp'),
    url('../img/bg-practitioner.avif') type('image/avif'),
    url('../img/bg-practitioner.jpg') type('image/jpeg')
  );
  background-image: image-set(
    url('../img/bg-practitioner.avif') type('image/avif'),
    url('../img/bg-practitioner.webp') type('image/webp'),
    url('../img/bg-practitioner.jpg') type('image/jpeg')
  );
}

.body-container {
  display: flex;
  justify-content: end;
  align-items: center;
}

.login-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  gap: var(--size-xl);

  background-color: var(--primary-sand-50);
  color: var(--primary-graphite-600);
  padding: var(--size-xxl);
  overflow-y: auto;
  width: 30rem;
  height: 100%;
}

.help-trouble {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: var(--size-s);
  margin: 0 auto;
}

/* || Login Form */

.form-content {
  width: 100%;
  background-color: var(--primary-sand-50);
}

.form-header-description {
  margin-bottom: var(--size-xl);
}

.form-input-container {
  display: flex;
  flex-direction: column;
  gap: var(--size-xs);

  margin-bottom: var(--size-m);
}

.form-input-group {
  display: contents;
}

.form-input-container:last-of-type {
  margin-bottom: 0;
}

.form-input {
  --border-width: 1px;
  border: solid var(--border-width) var(--primary-graphite-100);
  border-radius: var(--size-radius-xs);

  background-color: white;
  padding: var(--size-m) var(--size-l);
  height: 2.5rem;
}

.form-input::placeholder {
  opacity: 0.5;
}

.password-input-container {
  display: inline-flex;
  position: relative;
  width: 100%;
}

.password-input {
  flex-grow: 1;
}

.password-show-button-container {
  position: absolute;
  right: var(--size-l);
  border: 0;

  background: none;
  padding: 0;
  height: 100%;
}

.password-show-button-container img {
  display: block;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
}

.kc-flex-row-class {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: var(--size-xl) 0;
}

/* || Submit Button */

.form-buttons-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--size-l);
}

.form-buttons-wrapper > button:not(:first-child),
.form-buttons-wrapper > input:not(:first-child) {
  --bg-form-button-color: #FEFEFC;
  border: solid #1d2f71;
  color: #041861;
}

.form-submit-button-container {
  margin: var(--size-xl) 0;
}

.form-submit-button {
  --bg-form-button-color: #1d2f71;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--size-s);
  cursor: pointer;
  border: none;
  border-radius: var(--size-xl);

  background-color: var(--bg-form-button-color);
  padding: var(--size-m) var(--size-xxl);
  width: 100%;
  color: var(--primary-sand-50);
  line-height: normal;
  text-decoration: none;
}

.form-submit-button:disabled {
  --bg-form-button-color: #c3c5d1;
  cursor: not-allowed;
}

.form-submit-button img {
  width: var(--size-xl);
  height: var(--size-xl);
}

/* || SSO container */
.sso-list-container {
  display: flex;
  flex-flow: wrap;
  gap: var(--size-l);
  padding-inline: 0;
  list-style: none;
}

.sso-list-container > li {
  display: flex;
  flex: 1;
}

.sso-separator {
  display: flex;
  align-items: center;
  margin: var(--size-xl) 0;

  --color: var(--primary-graphite-400);
  text-align: center;
}

.sso-separator::before,
.sso-separator::after {
  flex: 1;
  border-bottom: 1px solid var(--primary-graphite-100);
  content: '';
}

.sso-separator:not(:empty)::before {
  margin-right: var(--size-xl);
}

.sso-separator:not(:empty)::after {
  margin-left: var(--size-xl);
}

/* || Login Form Errors */

[class*='error'] {
  color: var(--secondary-red-800);
}

input[aria-invalid='true'] {
  border-color: var(--secondary-red-600);
}

.form-message-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--size-s);

  margin: var(--size-xl) 0;

  border-radius: var(--size-radius-xs);
  padding: var(--size-s);
}

.form-message-container span {
  flex: 1;
}

.form-message-container.error {
  background: var(--secondary-red-100);
  color: var(--secondary-red-800);
}

.form-message-container.success {
  background: var(--secondary-green-100);
  color: var(--secondary-green-700);
}

.form-message-container.warning {
  background: var(--secondary-yellow-100);
  color: var(--secondary-yellow-900);
}

.error-template-container {
  display: flex;
  flex-direction: column;
  gap: var(--size-m);
  margin: var(--size-xl) 0;
}

.error-template-container > p {
  display: flex;
}

/* || Responsive */

@media (max-width: 770px) {
  .login-container {
    flex: 1;
  }
}

#social-psc {
  width: 220px;
  background-image: url("../img/psc_button.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 50px;
}

#kc-social-providers {
  display: flex;
  justify-content: center;
}

/* || Password Constraints */

.password-constraints {
  margin-top: var(--size-m);
  margin-bottom: var(--size-m);
}

.password-constraints-list {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
}

.password-constraints-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--size-s);
  margin-bottom: var(--size-xs);
  color: var(--primary-graphite-500);
}

.password-constraints-list li::before {
  content: '→';
  flex-shrink: 0;
  color: var(--secondary-text);
}

.password-constraints-list li:last-child {
  margin-bottom: 0;
}