* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  line-height: normal;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}

a.back {
  display: inline-flex;
  padding: 8px;
  align-items: flex-start;
  border-radius: 18px;
  width: 36px;
  height: 36px;
  background: var(--Neutral-Background, #f2f3f7);
  border: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M8.375 18.375l1.75-1.75L4.75 11.25H20v-2.5H4.75l5.375-5.375-1.75-1.75L0 10l8.375 8.375z" fill="%230b1c37"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  align-self: flex-start;
  flex-shrink: 0;
  position: absolute;
  top: 24px;
  left: 16px;
}

form,
div.inner,
div.content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 80px 16px 24px;
  width: 100%;
  border-radius: 20px;
  background-color: white;
  height: 100%;
  position: relative;
  justify-content: flex-start;
}

div.content {
  padding: 24px;
  justify-content: center;
}

div.extra-padding {
  padding: 60px 24px;
}

h2 {
  color: var(--Neutral-Black, #0b1c37);
  font-size: 24px;
  font-weight: 600;
}

h3 {
  color: var(--Neutral-Black, #0b1c37);
  font-size: 20px;
  font-weight: 600;
}

span.subtitle {
  color: var(--Neutral-Light, #8891ab);
  /* Content/Body */
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  /* 125% */
}

label {
  color: var(--Neutral-Black, #0b1c37);
  /* Content/Body Bold */
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  /* 125% */
}

input {
  padding: 16px;
  border-radius: 12px;
  border: 1px;
  gap: 8px;
  display: flex;
  align-items: center;
  width: 100%;
  align-self: stretch;
  border: 1px solid var(--Neutral-Lightest, #e5e8f2);
  background: var(--Neutral-White, #fff);
  color: var(--Neutral-Black, #0b1c37);
  margin-top: 3px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  /* 125% */
}

input::placeholder {
  color: var(--Neutral-Light, #8891ab);
}

input.email {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M13.333 2.667H2.667c-.733 0-1.327.6-1.327 1.333l-.007 8a1.34 1.34 0 0 0 1.333 1.333h10.667A1.34 1.34 0 0 0 14.667 12V4a1.34 1.34 0 0 0-1.333-1.333zm0 2.667L8 8.667 2.667 5.334V4L8 7.334 13.333 4v1.333z" fill="%238891ab"/></svg>');
  background-repeat: no-repeat;
  background-position: 16px center;
  padding-left: 40px;
}

input.tenant {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M15.2 2.02l-10-2a1 1 0 0 0-.833.205A1 1 0 0 0 4 1v5H1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-.8-.98zM2 14v-2h4v2H2zm0-6v2h4V8H2zm12 6H8V7a1 1 0 0 0-1-1H6V2.22l8 1.6V14zm-2-8h-2v6h2V6z" fill="%238891ab"/></svg>');
  background-repeat: no-repeat;
  background-position: 16px center;
  padding-left: 40px;
}

input.password {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M12 7.151V4c0-2.206-1.794-4-4-4S4 1.794 4 4v3.151c-.827.94-1.333 2.169-1.333 3.516A5.34 5.34 0 0 0 8 16a5.34 5.34 0 0 0 5.333-5.333c0-1.347-.506-2.576-1.333-3.516zm-3.333 4.727v1.456H7.333v-1.456C6.559 11.601 6 10.868 6 10c0-1.103.897-2 2-2s2 .897 2 2c0 .868-.559 1.601-1.333 1.877zm2-5.823C9.881 5.599 8.972 5.333 8 5.333s-1.881.265-2.667.721V4A2.67 2.67 0 0 1 8 1.333 2.67 2.67 0 0 1 10.667 4v2.055z" fill="%238891ab"/></svg>');
  background-repeat: no-repeat;
  background-position: 16px center;
  padding-left: 40px;
}

input.visitor {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C9.1 0 10 0.9 10 2V4H6V2C6 0.9 6.9 0 8 0ZM16 7C16 6.4 15.6 6 15 6H1C0.4 6 0 6.4 0 7V15C0 15.6 0.4 16 1 16H15C15.6 16 16 15.6 16 15V7ZM7 13H3V9H7V13ZM9 13H13V12H9V13ZM13 10H9V9H13V10Z" fill="%238891ab"/></svg>');
  background-repeat: no-repeat;
  background-position: 16px center;
  padding-left: 40px;
}

input.invalid {
  border-color: #dc3412;
  color: #dc3412;
}

input.invalid:focus {
  outline: none;
}

input.submit {
  display: flex;
  padding: 16px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 12px;
  border: none;
  background: var(--Primary-0, #00a4b3);
  color: var(--Neutral-White, #fff);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  /* 125% */
  cursor: pointer;
}

.resend {
  display: flex;
  padding: 16px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 12px;
  border: none;
  background: var(--Primary-0, #f2f3f7);
  color: var(--Neutral-White, #0b1c37);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  text-decoration: none;
}

input.submit:disabled {
  background-color: #80d2d9;
  cursor: initial;
}

span.terms {
  color: var(--Primary-0, #8891ab);
  /* Content/Footnote */
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
}

span.terms a {
  color: var(--Primary-0, #00a4b3);
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  /* 125% */
  text-decoration: none;
}

div.spacer-big {
  height: 150px;
  flex-shrink: 2;
}

div.spacer-small {
  height: 50px;
  flex-shrink: 1;
}

a.link {
  color: var(--Primary-0, #00a4b3);
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: none;
}

div.inner {
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}

img.inner-image {
  max-height: 200px;
  width: unset;
}

img.check-image {
  height: 100px;
}

.login-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  width: 345px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--Neutral-Black, #0b1c37);
  text-decoration: none;
  background: var(--Neutral-Background, #f2f3f7);
  border-radius: 8px;
  padding: 16px 12px;
}
.login-button .login-icon {
  display: inline-block;
  height: 20px;
  width: 20px;
  border: none;
  background-size: 100%;
}
.login-button .ms-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' xmlns:v='https://vecta.io/nano'%3e%3cpath d='M9.474 0H0v9.474h9.474V0z' fill='%23f25022'/%3e%3cpath d='M9.474 10.526H0V20h9.474v-9.474z' fill='%2300a4ef'/%3e%3cpath d='M20 0h-9.474v9.474H20V0z' fill='%237fba00'/%3e%3cpath d='M20 10.526h-9.474V20H20v-9.474z' fill='%23ffb900'/%3e%3c/svg%3e");
}
.login-button .google-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' fill='none' xmlns:v='https://vecta.io/nano'%3e%3cg clip-path='url(%23A)'%3e%3cpath d='M19.991 10.426c0-.839-.068-1.451-.215-2.085h-9.576v3.785h5.621c-.113.941-.725 2.357-2.085 3.309l-.019.127 3.028 2.345.21.021c1.926-1.779 3.037-4.397 3.037-7.502z' fill='%234285f4'/%3e%3cpath d='M10.199 20.398c2.754 0 5.066-.907 6.754-2.47l-3.218-2.493c-.861.601-2.017 1.02-3.536 1.02-2.697 0-4.986-1.779-5.802-4.238l-.12.01-3.148 2.436-.041.114c1.677 3.332 5.122 5.621 9.111 5.621z' fill='%2334a853'/%3e%3cpath d='M4.397 12.216a6.28 6.28 0 0 1-.34-2.017c0-.703.125-1.383.329-2.017l-.006-.135-3.188-2.476-.104.05A10.21 10.21 0 0 0 0 10.199c0 1.643.397 3.196 1.088 4.578l3.309-2.561z' fill='%23fbbc05'/%3e%3cpath d='M10.199 3.944c1.915 0 3.207.827 3.944 1.519l2.878-2.81C15.254 1.009 12.953 0 10.199 0 6.21 0 2.765 2.289 1.088 5.621l3.298 2.561c.827-2.459 3.116-4.238 5.814-4.238z' fill='%23eb4335'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='A'%3e%3cpath fill='%23fff' d='M0 0h20v20.469H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}
.login-button .okta-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' xmlns:v='https://vecta.io/nano'%3e%3cg clip-path='url(%23A)'%3e%3cpath d='M10 0A10 10 0 0 0 0 10c0 5.542 4.459 10 10 10s10-4.459 10-10A10 10 0 0 0 10 0zm0 15a4.99 4.99 0 0 1-5-5 4.99 4.99 0 0 1 5-5 4.99 4.99 0 0 1 5 5 4.99 4.99 0 0 1-5 5z' fill='%23007dc1'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='A'%3e%3cpath fill='%23fff' d='M0 0h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}
.login-button .onelogin-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' xmlns:v='https://vecta.io/nano'%3e%3cg clip-path='url(%23A)'%3e%3cpath d='M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10z' fill='%231f1f1f'/%3e%3cpath d='M8.9 6.846H7.606a.37.37 0 0 0-.369.369v1.659a.37.37 0 0 0 .369.369H8.9v4.179a.37.37 0 0 0 .369.369h1.659a.37.37 0 0 0 .369-.369V7.215a.37.37 0 0 0-.369-.369H8.9z' fill='%23fff'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='A'%3e%3cpath fill='%23fff' d='M0 0h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}

p.text {
  color: var(--Primary-0, #3b4764);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

p.info-text {
  color: var(--Primary-0, #3b4764);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.center {
  text-align: center;
}

@media (min-width: 768px) {
  body {
    background-color: #f6f7f9;
  }
  a.back {
    left: 24px;
  }
  form,
  div.inner,
  div.content {
    max-width: 466px;
    max-height: 568px;
    padding: 24px;
    margin: auto;
    justify-content: center;
  }
  div.extra-padding {
    padding: 48px 60px;
  }
  img.inner-image {
    max-height: 200px;
    width: unset;
  }
}