@import '~@/utils/utils.less';
@import '@/global.less';

@color: rgba(41, 105, 255, 1);

.loginBox {
  height: 100vh;

  .boxLeft {
    background-color: #F5F8FF;
    height: 100vh;
    position: relative;

    img {
      position: absolute;
      right: -60px;
      bottom: 10%;
      max-height: 80%;
      max-width: 80%;
    }
  }

  .boxRight {
    height: 100vh;
    overflow-y: auto;

    .loginForm {
      .formHeader {
        width: 100%;
        height: 80px;
        line-height: 80px;
      }

      .formContent {
        padding: 40px 0 0;

        .contentBox {
          width: 450px;
          margin: 0 auto;

          .contentHeader {
            margin: 0 auto;

            .headerName {
              color: @color;
              font-weight: 1000;
              font-size: 40px;
            }

            @media screen and (max-width: @screen-lg) {
              .headerName { font-size: 30px; }
            }

            @media screen and (min-width: @screen-xl) {
              .headerName { font-size: 40px; }
            }

            .headerSlogan {
              font-weight: 400;
              font-size: 16px;
              padding: 16px 0 40px;
            }
          }

          .contentBody {
            margin: 0 auto;

            .username, .password {
              margin-bottom: 20px;

              .ant-form-item-label {
                font-size: 14px;
                padding: 0 0 14px;
                letter-spacing: 1px;
              }

              .ant-input {
                padding: 12px 10px;
                font-size: 18px;
                border-radius: 5px;
              }

              .ant-input-password {
                padding: 0 10px 0 0;
              }
            }

            .isRemember {
              padding-top: 10px;
              padding-bottom: 24px;

              .ant-checkbox+span {
                padding: 0 8px;
                letter-spacing: 1px;
              }
            }

            .loginBtn {
              width: 100%;
              background-color: @color;
              padding: 12px;
              height: 54px;
              line-height: 1;
              border-radius: 5px;
            }

            .isForget {
              padding-top: 20px;
              text-align: center;

              span+a {
                padding: 0 8px;
                letter-spacing: 1px;
              }

              a {
                color: @color;
              }
            }
          }
        }
      }
    }
  }
}
