/* components/paste-form/paste-form.wxss */

.p-form {
  display: block;
  position: relative;
}

.p-form-group {
  position: relative;
}

.p-form-line {
  position: relative;

  &::after {
    position: absolute;
    content: '';
    left: 32rpx;
    right: 32rpx;
    height: 1px;
    background: #f2f2f2;
  }

  &:last-child {
    &::after {
      height: 0;
    }
  }
}

.p-checkbox-item {
  position: relative;
  border-bottom: 1px dashed rgb(209, 209, 209);

  &:last-child {
    border-bottom: none;
  }
}

.p-form-title {
  font-size: 28rpx;
  color: #555;
}

.p-flex-h {
  display: flex;
  flex-direction: row;
}

.covers{
  position:relative;
  flex-wrap: wrap;
  .cimg{
    height: 160rpx;
    width:160rpx;
    padding:1px;
    box-sizing: border-box;
    margin-right: 4px;
    border-radius: 4px;
  }
  .active{
    border:2px solid rgb(23, 45, 167);
    padding:0;
  }
}

.p-flex-v {
  display: flex;
  flex-direction: column;
  .p-form-head{
    width:100%;
  }
}

.p-form-desc {
  font-size: 22rpx;
  color: #999;
}

.p-placeholder {
  color: #999;
  font-size: 28rpx;
}

.placeholder{
  font-size: 24rpx;
  color:#999;
  text-overflow: ellipsis;
  text-align: left;
  flex:1;
  width:50%;
  padding-top:48rpx;
}

.p-input {
  padding: 32rpx;
}

.p-input-text {
  outline: none;
}

.displayarea{
  display:block;
  color:#444;
  .vitem{
    display:flex;
    flex-direction: row;
    padding:10rpx 10rpx;
    box-sizing: border-box;
    position:relative;
    border-bottom: 1px dashed #888;
    &:last-child{
      border-bottom: 0px;
    }
    .ival{
      width:100%;
      flex:1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .ibtn{
      width:40rpx;
      position:absolute;
      right:4px;
    }
  }
}

.p-form-head {
  width: 200rpx;
}

.p-form-content {
  flex: 1;
}

.p-form-label {
  display: inline-block;
  padding: 32rpx;
  color: #444;
  font-family: UICTFontTextStyleBody;
  font-weight: 500;
  box-sizing: border-box;
  text-align: right;
  width:200rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  &::after{
    content: ':';
    position:absolute;
  }
}

.p-form-need {
  color: rgb(216, 21, 21)
}

.p-textalign-r {
  text-align: right;
}

.p-textarea{
  width:100%;
  box-sizing: border-box;
}

.p-textarea-counter {
  text-align: right;
  font-size: 24rpx;
  color: #d0d0d0;
  padding-right: 32rpx;
  position:absolute;
  right:4px;
  bottom: 4px;
}

.p-checkboxhead {
  background: #fff;
  width: 30rpx;
  height: 30rpx;
  display: inline-block;
  border: 1px solid #888;
  border-radius: 50% 50%;
}

.p-checkbox {
  display: none;
}

.p-unit {
  padding:32rpx;
  color:#999;
}

.p-checkboxlabel[aria-checked=true]+.p-checkboxhead {
  color: red;
  border-bottom: 1px solid #333;
  border-left: 1px solid #333;
  transform: rotate(45deg);
}

// <div class="div2">
//   <div class="div1"></div>
// </div>
// https://developer.mozilla.org/zh-CN/play

.p_round_i {
  width: 60rpx;
  height: 60rpx;
  display: inline-block;
  border: solid #999;
  border-radius: 50% 50%;
  overflow: hidden;
  transition: all 0.5s;
  box-sizing: border-box;
}

.p-checkboxlabel[aria-checked=true]+.p_round_i {
  background: #4CAF50;
  border: 1px solid #f2f2f2;

  .p_round_gou {
    border: 6rpx solid #f2f2f2;
    border-radius: 12rpx;
    display: inline-block;
    top: 0;
    left: 0;
    transform: translate(-8px, -20px) rotate(225deg);
    width: 30px;
    height: 30px;
  }
}
.p-form-head-add {
  width: 120rpx;
  height: 120rpx;
  display: inline-block;
  line-height: 100rpx;
  text-align: center;
  font-size: 68rpx;
  color: #777;
  border-radius: 6rpx;
  background: #f2f2f2;
}
.p-form-img-head{
  width:120rpx;
  height: 120rpx;
  border-radius: 6rpx;
}
.p-form-images {
  position: relative;
  flex-wrap: wrap;
  justify-content: first baseline;
  padding: 0 32rpx 32rpx 32rpx;

  .p-form-img-add {
    width: 200rpx;
    height: 200rpx;
    text-align: center;
    font-size: 96rpx;
    line-height: 200rpx;
    color: #777;
    background-color: #f2f2f2;
    border-radius: 8rpx;
    display: inline-block;
    margin-right: 8rpx;
  }
  .p-form-imgitem {
    width: 200rpx;
    height: 200rpx;
    position: relative;
    margin-right: 8rpx;
    margin-bottom: 8rpx;
  }

  .p-form-img {
    width: 100%;
    height: 100%;
  }

  .p-img-close {
    position: absolute;
    top: 4rpx;
    right: 4rpx;
    font-size: 28rpx;
  }
}

.p-form-warning {
  position: absolute;
  font-size: 11px;
  color: #E91E63;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.form-submit{
  width:80vw;
  margin:auto;
  position:relative;
}