a {
  color: var(--q-primary);
}

.login-root {
  background-image: linear-gradient(to top, var(--my-grey-6) 0%, var(--my-grey-9) 100%);
  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 var(--my-grey-9);
}

.box-background--blue {
  background-color: var(--q-primary);
}

.box-background--white {
  background-color: var(--my-white);
}

.box-background--blue800 {
  background-color: var(--q-blue-1);
}

.box-background--gray100 {
  background-color: var(--my-grey-9);
}

.box-background--cyan200 {
  background-color: var(--my-blue-2);
}

.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: var(--my-grey-9) 0px 7px 14px 0px, rgba($color: #000000, $alpha: 0.12) 0px 3px 6px 0px;
}

span {
  display: block;
  font-size: 20px;
  line-height: 28px;
  color: var(--q-blue-1);
}

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: rgba(var(--q-primary), 0.5);
  background-color: var(--my-white);
  box-shadow: rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, var(--my-grey-9) 0px 0px 0px 1px,
  rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px;
}

.login-submit-button {
  box-shadow: rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0.12) 0px 1px 1px 0px, var(--q-primary) 0px 0px 0px 1px,
  rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, var(--my-grey-9) 0px 2px 5px 0px;
  color: var(--my-white);
  font-weight: 600;
  cursor: pointer;
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  text-align: center;
  border-radius: 4px;
  outline-color: rgba(var(--q-primary), 0.5);
  box-shadow: rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, var(--my-grey-6) 0px 0px 0px 1px,
  rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px, rgba($color: #000000, $alpha: 0) 0px 0px 0px 0px;
}

.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 {
  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);
  }
}
