@import url(https://fonts.googleapis.com/css?family=Inter:300,400,500,600);
@import "../reset.css";
@import '../components/button.css';
@import '../components/checkbox.css';
@import '../components/input.css';

.hidden { display: none; }
.guest-layout {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  font-family: 'Inter';
}
.guest-layout__content {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 64px);
  padding-bottom: 64px;
  position: relative;
}
.guest-layout__banner {
  display: block;
  width: 457px;
  margin-top: 20px;
}
.guest-layout__banner a {
  max-width: 100%;
  display: block;
  margin: 0;
}
.guest-layout__main {
  width: 45%;
  height: 100%;
  display: flex;
  align-items: center;
  background: #fff;
  flex-direction: column;
  align-self: center;
}
.guest-layout__form {
  width: 400px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  margin-bottom: 128px;
}
.guest-layout__form--is-reset-password {
  margin-top: 20px;
  margin-bottom: 20px;
}
.guest-layout__form .checkbox-control {
  margin-top: 20px;
}
.guest-layout__form .button-control {
  margin-top: 60px;
  margin-bottom: 40px;
}
.guest-layout__form-type {
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  color: #417FE4;
  border: 2px solid #417FE4;
  padding: 10px 15px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.guest-layout__forgot-password-title {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #211512;
  margin-top: 44px;
  margin-bottom: 17px;
}
.guest-layout__forgot-password-desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #667083;
  align-self: flex-start;
  margin-bottom: 30px;
}
.guest-layout__forgot-password-message {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #667083;
  margin-top: 45px;
  margin-bottom: 60px;
  align-self: flex-start;
}
.guest-layout__forgot-password-desc span {
  display: block;
}
.guest-layout__form-type--is-manager {
  color: #E34280;
  border: 2px solid #E34280;
}
.guest-layout__message-error {
  border: 1px solid #f1cad1;
  background: #f6dddd;
  width: calc(100% - 40px);
  justify-content: space-between;
  color: #ff5538;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 10px 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  display: none;
}
.guest-layout__message-success {
  border: 1px solid #D6E9C6;
  background: #DFF0D8;
  width: calc(100% - 40px);
  justify-content: space-between;
  color: #4B814C;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 10px 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  display: none;
}
.guest-layout__errors {
  white-space: pre-wrap;
}
.guest-layout__close-icon,.guest-layout__success-close-icon {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 40px;
  margin-left: 10px;
  cursor: pointer;
}
.guest-layout__close-icon::after,
.guest-layout__success-close-icon::after,
.guest-layout__close-icon::before,
.guest-layout__success-close-icon::before {
  content: '';
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 16px;
  height: 2px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 5px;
  top: 8px;
  left: 1px;
}
.guest-layout__close-icon::after,
.guest-layout__success-close-icon::after {
  transform: rotate(-45deg);
}
.guest-layout__form--is-reset-password .button-control {
  margin-bottom: 0;
}
.guest-layout__alert {
  width: 55%;
  background-image: url(/assets/login/staff-background.svg), linear-gradient(0deg, rgba(121, 207, 247, 0) 0%, rgba(121, 207, 247, 0.8) 26.7%, #4a80f2 76.3%);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-position-x: -2px;
}
.guest-layout__alert--is-manager {
  background-image: url(/assets/login/manager-background.svg), linear-gradient(0deg, rgba(121, 207, 247, 0) 0%, rgba(121, 207, 247, 0.8) 26.7%, #4a80f2 76.3%);
}
.guest-layout__ads {
 position: absolute;
 bottom: 0;
 right: 0;
 display: block;
}
.guest-layout__alert-title {
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: #fff;
  margin-top: 100px;
  text-align: center;
}
.guest-layout__alert-empty {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.guest-layout__alert-empty span {
  color: #e6e6e6;
}
.guest-layout__alert-empty span:first-of-type {
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.guest-layout__alert-empty span:last-of-type {
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
}
.guest-layout__alert-list {
  width: calc(100% - 150px);
  margin-top: 30px;
}
.guest-layout__alert-message {
  background: #fff;
  height: 72px;
  margin: 10px 0px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-right: 45px;
  justify-content: center;
  padding-left: 20px;
}
a.guest-layout__alert-message:after {
  position: absolute;
  top: 40%;
  right: 20px;
  content: '';
  border: solid #417FE4;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(-45deg);
}
a.guest-layout__alert-message:hover {
  background: #E1F2FF
}
.guest-layout__alert-message span {
  display: block;
}
.guest-layout__alert-message span:first-of-type {
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: #667083;
  margin-bottom: 5px;
}
.guest-layout__alert-message span:last-of-type {
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  color: #417FE4;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  height: 18px;
  white-space: nowrap;
}
.guest-layout__links {
  text-align: center;
}
.guest-layout__links a {
  color: #417FE4;
  text-decoration: underline;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  display: block;
  margin-bottom: 8px;
}
.guest-layout__login-with-sso {
  position: absolute;
  bottom: 80px;
  left: 20px;
}

.guest-layout__login-with-sso a:first-of-type {
  outline: none;
  text-decoration: none;
  color: #fff;
  background: #ba5d51;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  display: block;
  border-radius: 5px;
  margin-bottom: 10px;
  width: 265px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.guest-layout__login-with-sso a:last-of-type {
  background: url(/assets/login/login-sso.svg) no-repeat;
  width: 265px;
  height: 40px;
  cursor: pointer;
  display: block;
}
.guest-layout__login-with-sso-small {
  display: none;
}
.guest-layout__login-orther {
  display: none;
}
.guest-layout__footer {
  width: 100%;
  height: 64px;
  background: #211512;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 340px;
  margin-top: -64px;
  z-index: 9999;
}
.guest-layout__footer-links {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  display: flex;
}
.guest-layout__footer-links li {
  padding: 0 10px;
  border-left: 1px solid #fff;
}
.guest-layout__footer-links li a {
  display: inline-block;
  padding-right: 5px;
  color: #fff;
}
.guest-layout__footer-links li a:before {
  background: url(/assets/login/link-target.svg) no-repeat;
  content: '';
  width: 10px;
  height: 10px;
  display: inline-block;
  padding-right: 10px;
}
.guest-layout__footer p {
  color: #999;
  font-size: 12px;
  font-weight: 500;
  margin-top: 5px;
  line-height: 17px;
}

#login-form,
#forgot-password-form,
#mfa-form,
#reset-password-form {
  width: 100%;
}

@media only screen and (max-width: 430px) {
  .guest-layout__content {
    flex-direction: column;
    padding-bottom: 0;
  }
  .guest-layout__main {
    height: 100vh;
    width: 100%;
  }
  .guest-layout__alert {
    height: 100vh;
    width: 100%;
    background-image: url(/assets/login/staff-image.svg), linear-gradient(0deg, rgba(121, 207, 247, 0) 0%, rgba(121, 207, 247, 0.8) 26.7%, #4a80f2 76.3%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
  }
  .guest-layout__alert--is-manager {
    background-image: url(/assets/login/manager-background.svg), linear-gradient(0deg, rgba(121, 207, 247, 0) 0%, rgba(121, 207, 247, 0.8) 26.7%, #4a80f2 76.3%);
  }
  .guest-layout__alert-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    margin-top: 32px;
    align-self: flex-start;
    margin-left: 25px;
  }
  .guest-layout__alert-list {
    width: calc(100% - 50px);
    margin-top: 30px;
  }
  .guest-layout__form {
    width: calc(100% - 88px);
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .guest-layout__form img {
    width: 140px;
    height: 48px;
  }
  .guest-layout__form-type {
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    padding: 7px 8px;
    margin-top: 10px;
  }
  .guest-layout .input-control {
    margin-top: 15px;
  }
  .guest-layout .input-control__label {
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    margin-bottom: 4px;
  }
  .guest-layout .input-control__text-field {
    height: 35px;
  }
  .input-control__password-icon {
    top: 28px;
  }
  .guest-layout .checkbox-control__field + label {
    font-size: 12px;
    line-height: 15px;
  }
  .guest-layout .checkbox-control__field + label:before {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
  .guest-layout .checkbox-control__field:checked + label:after {
    left: 4px;
  }
  .guest-layout .button-control {
    height: 45px;
    border-radius: 22px;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    margin-top: 8px;
  }
  .guest-layout__links a {
    font-size: 11px;
    line-height: 13px;
  }
  .guest-layout__login-orther {
    position: relative;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    color: #667083;
    width: 100%;
    margin-top: 30px;
  }
  .guest-layout__login-orther:before {
    content: '';
    width: 40%;
    height: 1px;
    background: #e5e5e5;
    position: absolute;
    top: 6px;
    left: 0;
  }
  .guest-layout__login-orther:after {
    content: '';
    width: 40%;
    height: 1px;
    background: #e5e5e5;
    position: absolute;
    top: 6px;
    right: 0;
  }
  .guest-layout__login-with-sso-small {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
  }
  .guest-layout__login-with-sso-small a:first-of-type {
    outline: none;
    text-decoration: none;
    color: #fff;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    display: block;
    background: #ba5d51;
    border-radius: 5px;
    padding: 0px 10px;
    margin-bottom: 10px;
    width: 115px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .guest-layout__login-with-sso-small a:last-of-type {
    background: url(/assets/login/login-sso-small.svg) no-repeat;
    width: 135px;
    height: 58px;
    cursor: pointer;
    display: block;
  }
  .guest-layout__login-with-sso {
    display: none;
  }
  .guest-layout__login-orther {
    display: block;
  }
  .guest-layout__footer {
    display: none;
  }
  .guest-layout__ads {
    display: none;
  }
  .guest-layout__banner {
    display: none;
  }
}