@import (reference) '~antd/es/style/themes/index';

@paper-primary-color: #3d8bf5;

.container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: #f2f2f2;

  .content {
    flex: 1;
    text-align: center;

    .header {
      width: 300px;
      margin-top: 50px;
    }

    .card {
      width: 800px;
      min-height: 80vh;
      margin: -4px auto 50px;
      background: white;
      border: #d8d8d8 0.2px solid;
      border-radius: 10px;
      box-shadow: 3px 6px #10000000;

      .title {
        margin-top: 28px;
        color: @paper-primary-color;
        font-weight: bold;
        font-size: 16px;
      }

      .count {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
        line-height: 18px;

        .icon {
          width: 16px;
          margin-right: 6px;
          margin-left: 24px;
        }

        .hint {
          margin-right: 6px;
          color: #868686;
          font-size: 14px;
          line-height: 16px;
        }

        .text {
          margin-right: 24px;
          color: #2f2f32;
          font-size: 14px;
          line-height: 16px;
        }
      }

      .desc {
        margin: 16px auto;
        margin-right: 32px;
        margin-left: 32px;
        color: #2f2f32;
        font-size: 14px;
        white-space: pre-wrap;
        text-align: left;
      }

      .submit {
        width: 250px;
        height: 40px;
        margin-bottom: 20px;
      }

      .question {
        width: calc(100% - 64px);
        margin: 32px;
        padding: 16px;
        text-align: left;
        border: #eee 0.2px solid;
        border-radius: 10px;
        box-shadow: 3px 6px #10000000;

        .type {
          margin-left: 8px;
          padding: 2px 4px;
          color: white;
          font-size: 10px;
          text-align: center;
          background: @paper-primary-color;
          border-radius: 4px;
        }

        .questionTitle {
          color: #2f2f32;
          font-weight: bold;
          font-size: 14px;
        }

        .questionHint {
          margin-top: 8px;
          color: grey;
          font-size: 12px;
        }

        .questionContent {
          margin-top: 12px;
          margin-bottom: 12px;

          .rate {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 6px;
            line-height: 26px;
            text-align: center;
            border: #ddd 1px solid;
            border-radius: 13px;
            cursor: pointer;
            user-select: none;
            //--active-color: @paper-primary-color;
            //--star-size: 20px;
          }

          .rateSelected {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 6px;
            color: white;
            line-height: 26px;
            text-align: center;
            background: @paper-primary-color;
            border-radius: 13px;
            cursor: pointer;
            user-select: none;
          }

          .textArea {
            padding: 6px;
            color: #2f2f32;
            border: #ddd 1px solid;
            border-radius: 10px;
          }

          .optionInput {
            width: 300px;
            margin-top: 12px;
            padding: 6px;
            color: #2f2f32;
            border: #ddd 1px solid;
            border-radius: 10px;
          }

          .checkWrapper {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 12px;

            .checkGroup {
              width: 600px;
            }
          }
        }
      }
    }
  }
}

.dialog {
  border: #ddd 1px solid;
  border-radius: 20px;
}

.loginWrapper {
  text-align: center;

  .logoWrapper {
    width: 90px;
    margin: 0 auto;

    .logo {
      width: 90px;
      margin-top: 20px;
    }
  }

  .title {
    margin-top: 16px;
    color: @primary-color;
    font-size: medium;
  }

  .changeLogin {
    margin-right: 2px;
    color: @primary-color;
    font-size: small;
    text-align: right;
  }

  .phone {
    height: 48px;
    margin-top: 8px;
    border: 1px #ddd solid;
    border-radius: 8px;
  }

  .captcha {
    height: 48px;
    margin-top: 8px;
    border: 1px #ddd solid;
    border-radius: 8px;
  }

  .getCaptcha {
    height: 48px;
    margin-top: 8px;
    border: 1px #ddd solid;
    border-radius: 8px;
  }

  .submit {
    width: 330px;
    height: 44px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
