.ml-10 {
  margin-left: 20rpx !important;
}

.mt-10 {
  margin-top: 20rpx !important;
}

.mb-10 {
  margin-bottom: 20rpx !important;
}

.mr-10 {
  margin-right: 20rpx !important;
}

.m-10 {
  margin: 20rpx !important;
}

.p-10 {
  padding: 20rpx !important;
}

.pl-10 {
  padding-left: 20rpx !important;
}

.pr-10 {
  padding-right: 20rpx !important;
}

.pt-10 {
  padding-top: 20rpx !important;
}

.pb-10 {
  padding-bottom: 20rpx !important;
}

.w100 {
  width: 100%;
}

.flex1 {
  flex: 1;
}

.pr {
  position: relative;
}

.border {
  border: 1px solid #e5e5e5;
}

.content {
  position: relative;
  min-height: 100vh;
  background-color: $uni-bg-color-grey;
}

.card {
  padding: 20rpx;
  background-color: #FFFFFF;
}

.search {
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: row;

  .u-text {
    width: 100rpx !important;
    flex: none !important;
  }

  .u-button {
    height: 68rpx !important;
  }

  .u-input__content__field-wrapper__field {
    height: 42rpx !important;
  }
}

.flex-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.flex-warp {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.main-title {
  color: #333333;
  font-size: 30rpx;
}

.subtitle {
  color: #888888;
  font-size: 26rpx;
}

.title {
  font-weight: bold;
  color: #000000;
  font-size: 28rpx;
}

.required {
  &:before {
    content: '*';
    position: absolute;
    left: 0;
    color: #f56c6c;
    font-size: 40rpx;
    font-weight: normal;
  }
}