[data-page=login] {
  overflow: hidden;
}

page-login {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background-color: black;
  background-size: cover;

  .login_1 {
    background-image: url(~@images/login-3.jpg);
  }

  .login-box {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: .60;
    background-size: cover;
  }

  .login-dialog {
    width: 240px;
    margin: 0 auto;
    top: 30%;
    position: relative;

    button, input {
      width: 100%;
    }

    .eoi-logo {
      display: var(--global-eoiIcon-display, block);
      width: 150px;
      height: 64px;
      background: url(~@images/eoi_logo.svg) no-repeat center center;
      position: fixed;
      left: 60px;
      top: 47px;
    }

    .sharplook-logo {
      display: var(--global-sharpLookIcon-display, block);
      width: var(--global-customerIconLogo-width, 200px);
      height: var(--global-customerIconLogo-height, 53px);
      margin: var(--login-customerLogo-margin, 20px auto 20px);
      background: var(--global-login-customerLogo-url, url(~@images/sharplook_logo.svg) no-repeat center center);
      transform: var(--login-sharplookLogo-transform, scale(1));
      background-size: var(--global-customerIconLogo-bgSize, inherit);
    }

    .login-control {
      width: 240px;
      padding: 10px 8px;
      background: var(--pageLogin-control-bgColor, rgba(255, 255, 255, 0.2));
      border: 0.5px solid var(--pageLogin-control-borderColor, rgba(255, 255, 255, 0.65));
      border-radius: 3px;
      font-size: 12px;
      font-weight: 200;
      margin-bottom: 22px;
      color: var(--pageLogin-control-color, white);

      &::placeholder {
        color: var(--pageLogin-control-color, rgba(255, 255, 255, 0.9));
      }

      &:-webkit-autofill {
        -webkit-text-fill-color: var(--pageLogin-control-color, white);
        transition: background-color 99999s ease-in-out, color 99999s ease-in-out;
      }
    }

    .btn {
      width: 240px;
      background-color: var(--global-theme-color-light, #00c8c1);
      background-image: var(--pageLogin-btn-bgImage, linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1)));
      box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.51);
      border-radius: 3px;
      font-size: 14px;
      color: white;

      &:hover {
        background-color: var(--global-theme-color-light, #00c8c1);
      }
    }

    .btn-validation-group {
      display: flex;
      text-align: center;
      margin-bottom: 22px;
    }

    .btn-validation {
      width: 120px;
      line-height: 30px;
      border: var(--pageLogin-btn-validation-border, none);
      background: rgba(255, 255, 255, 0);
      color: var(--pageLogin-control-color, rgba(255, 255, 255, 0.2));
      box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.51);
      transition: 0.2s all;

      &:first-child {
        border-top-left-radius: 14px;
        border-bottom-left-radius: 14px;
        border-right-color: var(--global-theme-color-deep, transparent);
      }

      &:last-child {
        border-top-right-radius: 14px;
        border-bottom-right-radius: 14px;
        border-left-color: var(--global-theme-color-deep, transparent);
        margin-left: -1px;
      }

      &.active, &.active:hover {
        background: var(--pageLogin-btn-validation-activeColor, rgba(255, 255, 255, 0.2));
        color: var(--global-theme-color-deep, white);
        border-color: var(--global-theme-color-deep, white);
      }
    }
  }

  .copyright {
    display: var(--login-copyright-display, block);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 23px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
  }

  .login-title {
    font-size: var(--pageLogin-loginTitle-fontSize);
    text-align: var(--pageLogin-loginTitle-textAlign);
    color: var(--pageLogin-loginTitle-color);
    margin-bottom: var(--pageLogin-loginTitle-marginBottom);
  }
}