@import '~antd/es/style/themes/default.less';

.login-form-wapper {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: -32px;
  background: url(http://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/login-background.png) no-repeat;
  background-size: 100% 100%;

  .main {
    width: 840px;
    margin: 20vh auto 0;
    background: rgba(17, 40, 81, 0.41);
    box-shadow: 0px 8px 38px 0px rgba(4, 0, 0, 0.12);
    border-radius: 24px;
    box-sizing: border-box;
    padding: 87px 0 80px;
    display: flex;
    @media screen and (max-width: @screen-sm) {
      width: 95%;
    }

    & > div {
      flex: none;
      width: 50%;
      box-sizing: border-box;
    }

    .login-wedget {
      text-align: center;

      h3 {
        color: #f8f8f8;
        font-size: 24px;
        line-height: 52px;
      }

      img {
        width: 300px;
        display: block;
        margin: 0 auto;
      }
    }

    .login-form {
      background: url('@/assets/login/light.png') no-repeat;
      background-size: auto 100%;
      padding-top: 30px;
    }

    .icon {
      margin-left: 16px;
      color: rgba(0, 0, 0, 0.2);
      font-size: 24px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: @primary-color;
      }
    }

    .other {
      margin-top: 24px;
      line-height: 22px;
      text-align: left;

      .register {
        float: right;
      }
    }

    .login-form-button {
      width: 100%;
      font-size: 18px;
      line-height: 48px;
      height: 48px !important;
      color: #fff !important;
      background: #1548B6 !important;
      border-radius: 48px;
      border: none !important;
      margin-top: 50px;
    }

    :global {
      .ant-form {
        width: 260px;
        margin-left: 60px;
      }

      .ant-form-item {
        border-bottom: 2px solid #fff;
      }

      .ant-form-item-label > label {
        color: #fff;
      }

      .ant-input {
        color: #fff;
        border: none;
        background: transparent;
        outline: none;

        &:focus {
          box-shadow: none;
        }
      }

      .antd-pro-login-submit {
        width: 100%;
        margin-top: 24px;
      }
    }
  }
}
