* {
  padding: 0;
  margin: 0;
  color: #1a1f36;
  box-sizing: border-box;
  word-wrap: break-word;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
}
body {
    min-height: 100%;
    background-color: #ffffff;
}
h1 {
    letter-spacing: -1px;
}
a {
  color: rgb(0 71 255);;
  text-decoration: unset;
}
.login-root {
    background: #fff;
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}
.loginbackground {
    min-height: 692px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    overflow: hidden;
}
.flex-flex {
    display: flex;
}
.align-center {
  align-items: center; 
}
.center-center {
  align-items: center;
  justify-content: center;
}
.box-root {
    box-sizing: border-box;
}
.flex-direction--column {
    -ms-flex-direction: column;
    flex-direction: column;
}
.loginbackground-gridContainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: [start] 1fr [left-gutter] (86.6px)[16] [left-gutter] 1fr [end];
    grid-template-columns: [start] 1fr [left-gutter] repeat(16,86.6px) [left-gutter] 1fr [end];
    -ms-grid-rows: [top] 1fr [top-gutter] (64px)[8] [bottom-gutter] 1fr [bottom];
    grid-template-rows: [top] 1fr [top-gutter] repeat(8,64px) [bottom-gutter] 1fr [bottom];
    justify-content: center;
    margin: 0 -2%;
    transform: rotate(-12deg) skew(-12deg);
}
.box-divider--light-all-2 {
    box-shadow: inset 0 0 0 2px #e3e8ee;
}
.box-background--blue {
    background-color: rgb(0, 71, 255);
}
.box-background--white {
  background-color: #ffffff; 
}
.box-background--blue800 {
    background-color: #212d63;
}
.box-background--gray100 {
    background-color: #e3e8ee;
}
.box-background--cyan200 {
    background-color: #7fd3ed;
}
.padding-top--64 {
  padding-top: 64px;
}
.padding-top--24 {
  padding-top: 24px;
}
.padding-top--48 {
  padding-top: 48px;
}
.padding-bottom--24 {
  padding-bottom: 24px;
}
.padding-horizontal--48 {
  padding: 48px;
}
.padding-bottom--15 {
  padding-bottom: 15px;
}


.flex-justifyContent--center {
  -ms-flex-pack: center;
  justify-content: center;
}

.formbg {
    margin: 0px auto;
    width: 100%;
    max-width: 448px;
    background: white;
    border-radius: 4px;
    box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
}
span {
    display: block;
    font-size: 20px;
    line-height: 28px;
    color: #1a1f36;
}
label {
    margin-bottom: 10px;
}
.reset-pass a,label {
    font-size: 14px;
    font-weight: 600;
    display: block;
}
.reset-pass > a {
    text-align: right;
    margin-bottom: 10px;
}
.grid--50-50 {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}

.field input {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

input[type="submit"] {
    background-color: rgb(0, 71, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, 
                rgb(0, 71, 255) 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.field-checkbox input {
    width: 20px;
    height: 15px;
    margin-right: 5px; 
    box-shadow: unset;
    min-height: unset;
}
.field-checkbox label {
    display: flex;
    align-items: center;
    margin: 0;
}
a.ssolink {
    display: block;
    text-align: center;
    font-weight: 600;
}
.footer-link span {
    font-size: 14px;
    text-align: center;
}
.listing a {
    color: #697386;
    font-weight: 600;
    margin: 0 10px;
}

.animationRightLeft {
  animation: animationRightLeft 2s ease-in-out infinite;
}
.animationLeftRight {
  animation: animationLeftRight 2s ease-in-out infinite;
}
.tans3s {
  animation: animationLeftRight 3s ease-in-out infinite;
}
.tans4s {
  animation: animationLeftRight 4s ease-in-out infinite;
}

@keyframes animationLeftRight {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(1000px);
  }
  100% {
    transform: translateX(0px);
  }
} 

@keyframes animationRightLeft {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0px);
  }
}

/* ========================================
   RESPONSIVE MEDIA QUERIES
   ======================================== */

/* Tablet and below (768px and down) */
@media screen and (max-width: 768px) {
  
  /* Reduce heading size */
  h1 {
    font-size: 24px;
    line-height: 1.2;
  }
  
  /* Adjust padding for smaller screens */
  .padding-top--64 {
    padding-top: 32px;
  }
  
  .padding-top--48 {
    padding-top: 24px;
  }
  
  .padding-horizontal--48 {
    padding: 24px;
  }
  
  /* Form background adjustments */
  .formbg {
    max-width: 90%;
    margin: 0 auto;
  }
  
  .formbg-outer {
    padding: 0 16px;
  }
  
  /* Reduce animation distance to prevent overflow */
  @keyframes animationLeftRight {
    0% {
      transform: translateX(0px);
    }
    50% {
      transform: translateX(300px);
    }
    100% {
      transform: translateX(0px);
    }
  }
  
  @keyframes animationRightLeft {
    0% {
      transform: translateX(0px);
    }
    50% {
      transform: translateX(-300px);
    }
    100% {
      transform: translateX(0px);
    }
  }
  
  /* Adjust background grid for smaller screens */
  .loginbackground-gridContainer {
    grid-template-columns: [start] 1fr [left-gutter] repeat(8, 1fr) [left-gutter] 1fr [end];
    margin: 0 -5%;
  }
  
  /* Hide some background animations on mobile for performance */
  .loginbackground {
    min-height: 100vh;
  }
  
  /* Adjust footer text */
  .footer-link span {
    font-size: 12px;
  }
  
  .listing a {
    margin: 0 5px;
    font-size: 12px;
  }
}

/* Mobile (480px and down) */
@media screen and (max-width: 480px) {
  
  /* Further reduce heading size */
  h1 {
    font-size: 20px;
  }
  
  /* Tighter padding for mobile */
  .padding-top--64 {
    padding-top: 24px;
  }
  
  .padding-top--48 {
    padding-top: 16px;
  }
  
  .padding-top--24 {
    padding-top: 16px;
  }
  
  .padding-bottom--24 {
    padding-bottom: 16px;
  }
  
  .padding-horizontal--48 {
    padding: 20px;
  }
  
  /* Form adjustments */
  .formbg {
    max-width: 95%;
    border-radius: 8px;
  }
  
  span {
    font-size: 18px;
    line-height: 24px;
  }
  
  /* Input fields */
  .field input {
    font-size: 16px;
    padding: 10px 12px;
    min-height: 44px;
  }
  
  label, .reset-pass a {
    font-size: 13px;
  }
  
  /* Grid layout adjustment */
  .grid--50-50 {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .reset-pass > a {
    text-align: left;
    margin-bottom: 10px;
  }
  
  /* Minimal animation for very small screens */
  @keyframes animationLeftRight {
    0% {
      transform: translateX(0px);
    }
    50% {
      transform: translateX(100px);
    }
    100% {
      transform: translateX(0px);
    }
  }
  
  @keyframes animationRightLeft {
    0% {
      transform: translateX(0px);
    }
    50% {
      transform: translateX(-100px);
    }
    100% {
      transform: translateX(0px);
    }
  }
  
  /* Simplified background grid */
  .loginbackground-gridContainer {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
  
  /* Footer adjustments */
  .listing {
    flex-direction: column;
    gap: 8px;
  }
  
  .listing a {
    margin: 4px 0;
  }
}

/* Very small mobile (360px and down) */
@media screen and (max-width: 360px) {
  
  h1 {
    font-size: 18px;
  }
  
  .padding-horizontal--48 {
    padding: 16px;
  }
  
  .formbg {
    max-width: 98%;
  }
  
  span {
    font-size: 16px;
  }
  
  .field input {
    font-size: 14px;
    padding: 8px 10px;
  }
}