@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap");

:root {
  /* Colors */
  --action-bg-color: #ffa500;
  --action-text-color: #000000;
  --action-bg-color-hover: #ffb31b;
  --primary-input-focus: #e38702;

  --text-white-color: #ffffff;
  --action-dark-grey-color: #383838;
  --secondary-light-grey-color: #f3f2f2;
  --secondary-border-grey-color: #dddbda;

  --section-sub-headline-color: #080707;

  --form-title-color: #525252;
  --input-value-color: #525252;

  --primary-link-color: #1a65ee;
  --secondary-link-color: #949494;
  --secondary-link-color-hover: #ffa500;

  --secondary-button-background-hover: #fef7ea;

  /* Spacing */
  --container-outer-spacing: 14px;
  --container-desktop-spacing: 18%;
  --container-inner-spacing: 60px;
  --nav-row-height: 48px;
  --button-padding-side: 60px;
  --button-padding-side-small: 48px;

  /* Sizes */
  --font-size-header: 2.15rem;
  --font-size-header-small: 1.75rem;
  --font-size-subheader: 1.6rem;
  --font-size-subheader-small: 1.125rem;
  --font-size-subtitles: 1.075rem;
  --font-size-button: 1rem; /* 16px */
  --font-size-section-sub-headline: 1rem;
  --font-size-footer-links: 1rem;
  --font-size-footer-links-small: 0.875rem;

  --font-size-single-card-content: 1.75rem;
  --font-size-single-card-content-small: 1rem;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --input-max-width-desktop: 248px;

  /* Dynamic Logo */
  --logo-background-color: rgba(255, 165, 0, 1);
  --logo-background-color-mobile: rgba(255, 165, 0, 1);
}

* {
  margin: 0;
  padding: 0;
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif,
    "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol" !important;

  box-sizing: border-box;
}

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  left: 0;
  min-width: 285px;
  /* width: 100vw; */
  min-height: 100vh;
}

a {
  /* a-Reset */
  text-decoration: none;
  color: var(--primary-link-color);
}

a:hover {
  color: var(--secondary-link-color-hover);
}

/* utility */
.utl-hidden {
  display: none !important;
}


/* Styles */
.inner-body-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.footer-wrapper {
  margin-top: auto;
}

.form-container,
.slds-card.form-container {
  margin-left: var(--container-outer-spacing);
  margin-right: var(--container-outer-spacing);
  border-color: var(--secondary-border-grey-color);
}

.form-header,
.slds-card__header.form-header {
  background: var(--secondary-light-grey-color);
  background-clip: border-box;
  border-bottom: 1px solid var(--secondary-border-grey-color);
  padding: 0;
}

.form-header-title {
  font-weight: var(--font-weight-bold);
  color: var(--form-title-color);
}

.forgot-pw-form-link-group {
  margin-bottom: 110px;
}

.forgot-pw-confirm-link-button, .slds-button_brand.forgot-pw-confirm-link-button {
  background-color: var(--action-bg-color);
  color: var(--action-text-color);
  border-color: var(--action-bg-color);
  font-size: var(--font-size-button);
  padding-left: var(--button-padding-side);
  padding-right: var(--button-padding-side);
  width: max-content;
}

.forgot-pw-confirm-card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 420px;
  padding-top: 4px;
  padding-bottom: 30px;
}

.forgot-pw-confirm-card-content p {
  font-size: var(--font-size-single-card-content-small);
  line-height: 1.375em;
  font-weight: var(--font-weight-semibold);
}

.login-form-welcome-text,
p.login-form-welcome-text {
  font-size: 16px;
  margin-top: 16px;
  margin-bottom: 8px;
  color: var(--form-title-color);
}

.login-form-welcome-text a,
p.login-form-welcome-text a {
  color: var(--primary-link-color);
}

.ct-input,
.slds-input.ct-input {
  color: var(--input-value-color);
}

.ct-input:focus,
.ct-input:active,
.slds-input.ct-input:focus,
.slds-input.ct-input:active {
  border-color: var(--primary-input-focus);
  box-shadow: none;
  color: var(--input-value-color);
}

.login-form-link-group,
.forgot-pw-form-link-group,
.change-pw-form-link-group {
  width: 100%;
}

.login-form-link-group a,
.forgot-pw-form-link-group a,
.change-pw-form-link-group a {
  display: block;
  color: var(--secondary-link-color);
  text-decoration: underline;
  width: max-content;
}

.login-form-link-group a:hover,
.login-form-link-group a:focus,
.login-form-link-group a:active,
.forgot-pw-form-link-group a:hover,
.forgot-pw-form-link-group a:focus,
.forgot-pw-form-link-group a:active,
.change-pw-form-link-group a:hover,
.change-pw-form-link-group a:focus,
.change-pw-form-link-group a:active {
  color: var(--secondary-link-color-hover);
}

.ct-button,
.slds-button_brand.ct-button {
  background-color: var(--action-bg-color);
  color: var(--action-text-color);
  border-color: var(--action-bg-color);
  font-size: var(--font-size-button);
  padding-left: var(--button-padding-side);
  padding-right: var(--button-padding-side);
  margin-left: auto !important;
  margin-right: auto !important;
}

.ct-button:hover,
.slds-button_brand.ct-button:hover,
.forgot-pw-confirm-link-button:hover,
.slds-button_brand.forgot-pw-confirm-link-button:hover {
  /* background-color: var(--primary-input-focus); */
  /* border-color: var(--primary-input-focus); */
  /* color: rgb(255, 255, 255); */
  background-color: var(--action-bg-color-hover);
  border-color: var(--action-bg-color-hover);
  color: var(--action-text-color);
}

.ct-button--login:hover:enabled{
  background-color: var(--action-bg-color-hover);
  border-color: var(--action-bg-color-hover);
  color: var(--action-text-color);
}

.ct-button--login:hover:disabled{
  background-color: rgb(201, 199, 197);
  border-color: rgb(201, 199, 197);
  color: rgb(255, 255, 255);
}

.ct-button:active,
.ct-button:focus,
.slds-button_brand.ct-button:active,
.slds-button_brand.ct-button:focus,
.forgot-pw-confirm-link-button:active,
.forgot-pw-confirm-link-button:focus,
.slds-button_brand.forgot-pw-confirm-link-button:active,
.slds-button_brand.forgot-pw-confirm-link-button:focus {
  /* background-color: var(--primary-input-focus); */
  /* border-color: var(--primary-input-focus); */
  /* color: rgb(255, 255, 255); */
  background-color: var(--primary-input-focus);
  border-color: var(--primary-input-focus);
  color: var(--action-text-color);
}

/* Desktop */
@media screen and (min-width: 576px) {
  .forgot-pw-confirm-card-content {
    justify-content: space-evenly;
    align-items: center;
  }

  .forgot-pw-confirm-card-content p {
    font-size: var(--font-size-single-card-content);
    line-height: 1.075em;
    font-weight: var(--font-weight-regular);
  }

  .form-header-title-wrapper,
  .slds-card__header-title.form-header-title-wrapper {
    justify-content: flex-start;
    padding-left: calc((var(--container-inner-spacing) - 2px) - 0.5rem);
  }

  .form-container,
  .slds-card.form-container {
    margin-left: calc(
      var(--container-desktop-spacing) - (var(--container-inner-spacing) + 1px)
    );
    margin-right: calc(
      var(--container-desktop-spacing) - (var(--container-inner-spacing) + 1px)
    );
  }

  .card-body-container,
  .slds-card__body_inner.card-body-container {
    padding-left: calc(var(--container-inner-spacing) - 1px);
    padding-right: calc(var(--container-inner-spacing) - 1px);
  }

  .ct-input,
  .slds-input.ct-input {
    max-width: var(--input-max-width-desktop);
  }

  .login-button,
  .slds-button_brand.login-button,
  .submit-forgot-button,
  .slds-button_brand.submit-forgot-button {
    justify-content: flex-start;
    margin-left: unset;
    margin-right: unset;
  }

  .forgot-pw-form-link-group {
    margin-bottom: 0;
  }

  .ct-button,
  .slds-button_brand.ct-button{
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}