@font-face {
  font-family: 'Aspekta';
  src: local('Aspekta-400'), local('Aspekta-400'), url('/static/fonts/Aspekta/Aspekta-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Aspekta';
  src: local('Aspekta-450'), local('Aspekta-450'), url('/static/fonts/Aspekta/Aspekta-450.ttf') format('truetype');
  font-weight: 450;
  font-style: normal;
}

@font-face {
  font-family: 'Aspekta';
  src: local('Aspekta-500'), local('Aspekta-500'), url('/static/fonts/Aspekta/Aspekta-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Aspekta';
  src: local('Aspekta-700'), local('Aspekta-700'), url('/static/fonts/Aspekta/Aspekta-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

body {
  margin: 0px;
  font-family: Aspekta, sans-serif;
  font-weight: 400;
  color: #1e3774;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.container .left-block {
  text-align: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  display: flex;
  min-width: 468px;
  height: 100vh;
  background: #f0f5fe;
}
.container .left-block h2 {
  margin: 0 auto;
  max-width: 222px;
  margin-top: 40px;
}
.container .left-block .mobile-logo {
  padding: 14px 20px;
  padding-bottom: 32px;
}
.container .left-block .logo {
  position: absolute;
  left: 32px;
  top: 32px;
}
.container .right-block {
  width: 100%;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.container .right-block .sign-form {
  margin: 0 auto;
  min-width: 380px;
  max-width: 380px;
  padding: 0 20px;
  padding-bottom: 20px;
}

.container .right-block .sign-form.sign-in {
  padding: 0;
  display: flex;
  flex-flow: column;
}
.container .right-block .sign-form.sign-up h1 {
  margin-bottom: 32px;
}
.container .right-block .sign-form.sign-up form {
  margin-bottom: 0px;
}
.container .right-block .sign-form.sign-up form .primary-button {
  margin-top: 24px;
  margin-bottom: 0px;
}
.container .right-block .sign-form h1 {
  font-family: Aspekta, sans-serif;
  font-size: 24px;
  font-style: normal;
  color: #356fff;
  font-weight: 450;
  line-height: 38px;
  letter-spacing: 0em;
  text-align: center;
}

.text-normal-weight {
  font-weight: 400;
}

.container .right-block .sign-form .divider {
  border-top: 1px solid #ced7de;
  margin-top: 48px;
  margin-bottom: 32px;
}
.container .right-block .sign-form .divider .divider-or {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  top: -12px;
  background: white;
  max-width: 40px;
  margin: 0 auto;
  color: #435b6c;
}
.container .right-block .sign-form input,
.container .right-block .sign-form input:autofill,
.container .right-block .sign-form input:autofill:hover,
.container .right-block .sign-form input:autofill:focus,
.container .right-block .sign-form input:-webkit-autofill,
.container .right-block .sign-form input:-webkit-autofill:hover,
.container .right-block .sign-form input:-webkit-autofill:focus {
  font-family: Aspekta, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: left;
  display: block;
  width: 100%;
  background: #f0f5fe;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid transparent;
  margin-bottom: 4px;
  color: #1e3774 !important;
  transition: all 500ms ease-out;
}
/* https://stackoverflow.com/questions/41871618/how-to-change-safari-autofill-yellow-background-color */
.container .right-block .sign-form input:autofill,
.container .right-block .sign-form input:autofill:hover,
.container .right-block .sign-form input:autofill:focus,
.container .right-block .sign-form input:-webkit-autofill,
.container .right-block .sign-form input:-webkit-autofill:hover,
.container .right-block .sign-form input:-webkit-autofill:focus {
  webkit-box-shadow: 0 0 0 1000px #f0f5fe inset !important;
  box-shadow: 0 0 0 1000px #f0f5fe inset !important;
  background-clip: content-box !important;
  /* disables the background animation on auto complete
  however. if user decides to type something the background will animate
  due to previous selector taking place. */
  transition: none;
}
/* 1password changes the colour of the input this is the only way for the color to remain as we want it to */
.container .right-block .sign-form input:not([type='checkbox']) {
  webkit-box-shadow: 0 0 0 1000px #f0f5fe inset !important;
  box-shadow: 0 0 0 1000px #f0f5fe inset !important;
}
.container .right-block .sign-form input:not(:first-of-type) {
  margin-top: 16px;
}
.container .right-block .sign-form input:focus,
.container .right-block .sign-form input:autofill:focus,
.container .right-block .sign-form input:-webkit-autofill:focus {
  outline: none;
}
.container .right-block .sign-form input:disabled {
  cursor: not-allowed;
}
.container .right-block .sign-form input::placeholder {
  color: #1e3774;
}

.container .right-block .sign-form.sign-in .sign-form-sso {
  display: flex;
  flex-flow: column;
  gap: 16px;
  /*
   * we toggle the fields using display: none.
   * in order to avoid any jumping of elements we need to force a height
   */
  min-height: 320px;
}
.container .right-block .sign-form.sign-in .sign-form-sso input,
.container .right-block .sign-form.sign-in .sign-form-sso .primary-button,
.container .right-block .sign-form.sign-in .sign-form-sso .btn-oauth,
.container .right-block .sign-form.sign-in .sign-form-sso .alert {
  margin: 0;
}
.container .right-block .sign-form.sign-in .sign-form-sso #okta-login-container,
.container .right-block .sign-form.sign-in .sign-form-sso #saml-login-container {
  display: contents;
}
.container .right-block .sign-form.sign-in .sign-form-footer {
  display: flex;
  flex-flow: column;
  margin-top: auto;
  gap: 16px;
}

.container .right-block .sign-form .forgot-password {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 16px;
}
.container .right-block .sign-form .try-sign-up {
  text-align: center;
  color: #3a4560;
  font-size: 14px;
  line-height: 160%;
  margin-top: 32px;
}
.container .right-block .sign-form.sign-in .forgot-password,
.container .right-block .sign-form.sign-in .try-sign-up {
  margin: 0;
}

input#agree_terms {
  float: left;
  width: 30px;
}

input#marketing_opt_in {
  float: left;
  width: 30px;
}

label#agree_terms_label {
  display: inline-block;
  vertical-align: middle;
}

label#marketing_opt_in_label {
  display: inline-block;
  vertical-align: middle;
}

span#marketing_opt_in_text {
  padding-left: 37px;
  display: block;
}

.btn-oauth {
  display: block;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #cccede;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(30, 55, 116, 0.05);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  width: 100%;
  font-family: Aspekta, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  color: #3a4560;
}
.btn-oauth img {
  vertical-align: middle;
  padding-right: 16px;
  margin-bottom: 2px;
  height: 21px;
}
.btn-oauth.disabled {
  color: #99a2b9;
  cursor: not-allowed;
}
.btn-oauth.disabled img {
  filter: grayscale(100%) opacity(50%);
}

.primary-button {
  cursor: pointer;
  background: #356fff;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 10px 15px;
  border: 0px;
  width: 100%;
  font-family: Aspekta, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0em;
  color: white;
  margin-top: 20px;
  transition: background-color 300ms ease;
}
.primary-button:hover {
  background: #3263dc;
}
.primary-button:disabled {
  background: #99a2b9;
  cursor: not-allowed;
}
.primary-button img {
  vertical-align: middle;
  padding-right: 16px;
  margin-bottom: 2px;
  height: 21px;
}

/* email input with loading spinner from ant design */
#email-container {
  position: relative;
}
#email-container::after {
  position: absolute;
  content: '';
  display: none;
  width: 1em;
  height: 1em;
  top: 1em;
  right: -2em;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' focusable='false' data-icon='loading' width='1em' height='1em' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z'%3E%3C/path%3E%3C/svg%3E");
  background-color: #1677ff;
  animation: loadingCircle 0.3s infinite linear;
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), visibility 0s linear;
}

#email-container.loading::after {
  display: block;
}
#email-container.loading #email {
  transition: color 0s linear;
  color: #99a2b9 !important;
  cursor: progress;
}
@keyframes loadingCircle {
  100% {
    transform: rotate(360deg);
  }
}

/* hide all disabled fields to make sign-in flow easier to understand */
.container .right-block .sign-form.sign-in #login-button:disabled,
.container .right-block .sign-form.sign-in #login-password:disabled,
.container .right-block .sign-form.sign-in #okta-btn.disabled,
.container .right-block .sign-form.sign-in #saml-btn.disabled {
  color: #99a2b9;
  cursor: not-allowed;
  display: none;
}

.validation-error {
  font-size: 0.7em;
  font-weight: 300;
  color: #ee6352;
  margin-bottom: 16px;
  margin-left: 8px;
  visibility: hidden;
}

.primary-link {
  color: #356fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  transition: color 300ms ease;
}
.primary-link:hover {
  color: #3263dc;
}
.forgot-password,
.disabled .primary-link {
  color: #99a2b9;
  cursor: not-allowed;
}

.primary-link-button {
  color: #356fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  transition: color 300ms ease;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.primary-link-button:hover {
  color: #3263dc;
}

.inline-link-button {
  color: #356fff;
  transition: color 300ms ease;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.inline-link-button:hover {
  color: #3263dc;
}

.alert {
  background-color: #ffe0e0;
  line-height: 27px;
  width: 100%;
  padding: 10px 15px;
  margin-top: 12px;
  margin-bottom: 12px;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(30, 55, 116, 0.05);
  border-radius: 8px;
}

.success {
  background-color: #e0ffe0;
  line-height: 27px;
  width: 100%;
  padding: 10px 15px;
  margin-top: 12px;
  margin-bottom: 12px;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(30, 55, 116, 0.05);
  border-radius: 8px;
}

#password-tooltip span.fail img.check {
  display: none;
}
#password-tooltip span.fail img.dis {
  display: inline;
}
#password-tooltip span.fail span.lbl {
  color: #1e3774;
}

#password-tooltip span.pass img.check {
  display: inline;
}
#password-tooltip span.pass img.dis {
  display: none;
}
#password-tooltip span.pass span.lbl {
  color: #5cc08d;
}

@media screen and (max-width: 1024px) {
  .container .left-block {
    display: none;
  }
  .container .right-block .mobile-logo {
    padding: 14px 20px;
    padding-bottom: 32px;
  }
}

@media screen and (max-width: 400px) {
  .container .right-block .sign-form {
    min-width: 320px;
  }
}

@media screen and (min-width: 1025px) {
  .container .right-block .mobile-logo {
    display: none;
  }
}