@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /********************************************************
* COMPANY LOGO
*********************************************************/
  --company-logo-img-url: url("https://www.salliemae.com/content/dam/global/global/logos/sallie-mae-logo-web.svg");

  --company-logo-max-height: 50px;
  /********************************************************
* PAGE BACKGROUND
*********************************************************/
  --background-image-url: url("");
  /********************************************************
* CARD BODY
*********************************************************/
  --card-background-color: rgb(255, 255, 255);
  --card-shadow-color: transparent;
  /********************************************************
* BODY
*********************************************************/
  --body-font-family: "Open Sans", sans-serif;
  --body-font-size: 1rem;
  /********************************************************
* TEXT FONT COLORS
*********************************************************/
  /* PRIMARY FONT COLOR (RGB) */
  --text-color-primary: rgba(12, 0, 52, 1);
  /* HEADING FONT COLR (RGB) */
  --heading-text-color: 12, 0, 52;
  /* MUTED TEXT ALPHA */
  --text-color-muted-apha: 0.75;
  /* ERROR FONT COLOR */
  --text-color-error: rgb(198, 40, 40);
  /********************************************************
* BUTTON ATTRIBUTES
*********************************************************/
  /* BUTTON FONT COLOR */
  --button-primary-text-color: rgb(255, 255, 255);
  /* BUTTON BACKGROUND COLOR (RGB) */
  --button-primary-background-color: rgba(0, 77, 232, 1);
  --button-primary-hover-background-color: rgba(51, 113, 237, 1);
  --button-border-radius: 50px;
  /* BUTTON HOVER ALPHA */
  --button-hover-alpha: 0.7;
  /* BUTTON ACTIVE ALPHA */
  --button-font-size: 14px;
  --button-active-alpha: 1;
  /* BUTTON DISABLED ALPHA */
  --button-disabled-alpha: 1;
  --button-disabled-bg: rgba(238, 242, 247, 1);
  --button-disabled-color: rgba(152, 174, 199, 1);
  --button-disabled-border-color: rgba(238, 242, 247, 1);
  /* BUTTON VERTICAL PADDING */
  --button-padding-y: 17.5px; /*NEW*/

  /* LINK BUTTON FONT COLOR (RGB) */
  --link-button-primary-color: 12, 0, 52;
  /* LINK BUTTON HOVER FONT COLOR (RGBA) */
  --link-button-primary-hover: 0, 77, 232, 1;
  /* BUTTON BORDER RADIUS */
  --link-button-primary-disabled: rgba(152, 174, 199, 1);
  /********************************************************
* FORM CONTROLS
*********************************************************/
  --form-control-border-radius: 15px;
  --card-body-border-radius: 0px;
  --focus-highlight-color: rgba(0, 77, 232, 1);
  --form-control-border-color: rgb(152, 174, 199); /*NEW*/
  --form-control-text-color: rgb(111, 123, 157); /*NEW*/
  --form-control-label-color: rgba(111, 123, 157, 1);
  /********************************************************
* ACTIVITY INDICATOR & BUTTON SPINNER COLOR
*********************************************************/
  --activity-indicator-color: rgb(68, 98, 237);
  --polling-indicator-color: rgb(68, 98, 237);
  /********************************************************
* APPLYING TEXT COLOR - DO NOT CHANGE
*********************************************************/
  /* H1,H2, H3, Body text color */
  --bs-body-color: rgb(var(--text-color-main)) !important;
  --bs-danger-rgb: var(--text-color-error);
}
/********************************************************
* CLASSES BELOW ARE DERIVED FROM VALUES ABOVE
* DO NOT CHANGE UNLESS YOU HAVE CSS 'SKILLZ' :)
*********************************************************/
/* COMPANY LOGO */
.card-body.p-5.d-flex.flex-column > img:first-child,
.companyLogo {
  content: var(--company-logo-img-url) !important;
  height: var(--company-logo-max-height) !important;
  width: auto !important;
}

/* BACKGROUND IMAGE */
div.bg-light {
  background-image: var(--background-image-url);
  background-size: cover;
  background-repeat: no-repeat;
}

/* HEADING TEXT */
h1,
h2,
h3,
h4 {
  color: rgb(var(--heading-text-color)) !important;
}

/* BODY FONT & COLOR */
.card-body {
  font-family: var(--body-font-family) !important;
  font-size: var(--body-font-size) !important;
  color: var(--text-color-primary) !important;
  background-color: var(--card-background-color) !important;
}

/* MUTED PARAGRAPH */
p.text-muted {
  color: var(--text-color-primary) !important;
}
/* ERROR MESSAGE PARAGRAPH */
.card .text-danger {
  color: var(--text-color-error) !important;
}

.form-floating {
  .form-control {
    color: var(--text-color-primary) !important;
    border: var(--bs-border-width) solid var(--form-control-border-color) !important;
    border-radius: var(--form-control-border-radius) !important;

    &:focus {
      --form-control-border-color: var(--focus-highlight-color);
      --bs-border-width: 3px;
      box-shadow: none !important;
    }

    &:not(:focus):hover {
      --form-control-border-color: var(--focus-highlight-color);
      --bs-border-width: 1px;
    }

    input + label {
      color: var(--form-control-label-color) !important;
    }
  }
       input:focus + label,
      input:not(:placeholder-shown) + label {
        height: 70%;
    }
}

/* PRIMARY BUTTON */
.btn-primary {
  --bs-btn-padding-y: var(--button-padding-y) !important;
  --bs-btn-color: var(--button-primary-text-color) !important;
  --bs-btn-hover-color: var(--button-primary-hover-background-color) !important;
  --bs-btn-border-color: var(--button-primary-background-color) !important;
  --bs-btn-bg: var(--button-primary-background-color) !important;
  --bs-btn-hover-bg: var(--button-primary-hover-background-color) !important;
  --bs-btn-font-size: var(--button-font-size) !important; /*NEW*/
  --bs-btn-active-bg: var(--button-primary-background-color) !important;
  --bs-btn-disabled-bg: var(--button-primary-background-color) !important;
  background-color: var(--button-primary-background-color) !important;
  border-color: rgb(var(--button-primary-background-color)) !important;
  color: var(--button-primary-text-color) !important;
  border-radius: var(--button-border-radius) !important;
}
.btn-primary {
  &:hover {
    background-color: var(--button-primary-hover-background-color) !important;
    border-color: var(--button-primary-hover-background-color) !important;
    color: var(--button-primary-text-color) !important;
  }
  &:focus-visible {
    outline-offset: 2px;
    outline: solid var(--button-primary-hover-background-color) 3px !important;
    background-color: var(--button-primary-hover-background-color) !important;
    box-shadow: none !important;
  }
  &:disabled {
    opacity: var(--button-disabled-alpha) !important;
    background: var(--button-disabled-bg) !important;
    color: var(--button-disabled-color) !important;
    border-color: var(--button-disabled-border-color) !important;
  }
}

/* LINK BUTTON */
.btn-link {
  --bs-btn-color: rgb(var(--link-button-primary-color)) !important;
  --bs-btn-active-color: rgba(var(--link-button-primary-color)) !important;
  --bs-btn-hover-color: rgba(var(--link-button-primary-hover)) !important;
  --bs-btn-disabled-color: var(--link-button-primary-disabled) !important;

  &:focus-visible {
    box-shadow: none !important;
    color: var(--bs-btn-hover-color) !important;
    text-decoration: underline;
  }
}

/* POLLING INDICATORS */
.css-11k6vsm,
.css-17zi2ag,
.css-139roxj {
  /* width: 20px; */
  /* height: 20px; */
  /* animation-duration: 0.75s; */
  /* circle background color */
  background-color: var(--polling-indicator-color) !important;
}
/* BUTTON ACTIVITY INDICATOR, PROGRESS SPINNER */
.css-sw2ho0 {
  /* spinning circle color */
  --primary-color: var(--activity-indicator-color) !important;
}
/* PROGRESS SPINNER */
.spinner-color {
  color: var(--polling-indicator-color) !important;
}
.card-body.p-5.d-flex.flex-column {
  border-radius: var(--card-body-border-radius);
}
.card.shadow.mb-5 {
  border-radius: var(--card-body-border-radius);
  box-shadow: 1px 1px 3px 1px var(--card-shadow-color) !important;
}

.end-user-nano .form-floating > .form-control,
.end-user-nano .form-floating > .form-control-plaintext,
.end-user-nano .form-floating > .form-select {
  height: calc(35px + 1em);
}

.end-user-nano .form-floating input + label {
  color: var(--form-control-label-color) !important;
}

.end-user-nano .form-floating label {
  padding: 16px 10px;
}
/********************************************************
* MOBILE CHANGES
*********************************************************/
/* 1. Reset the parent's flex-centering on mobile to allow natural scrolling */
@media (max-width: 600px) {
    .end-user-nano .bg-light.d-flex {
        display: block !important; /* Breaks the flex-center trap */
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* 2. Force the agreement box to be scrollable */
#agreementTextDiv {
    display: block !important;
    height: 300px !important; /* Explicit height is required */
    max-height: 300px !important;
    overflow-y: scroll !important; /* Force scrollbar */
    -webkit-overflow-scrolling: touch !important; /* Native iOS feel */
    touch-action: auto !important; /* Allow touch interactions */
    position: relative !important;
    z-index: 10;
}

/* 3. Ensure the text inside doesn't cause horizontal lock */
.prewrap {
    white-space: pre-wrap !important;
    word-break: break-word !important;
}