/* required by usingComponents */
/* pages/breakdown/breakdown.wxss */
page {
  background-color: #f7f7f7;
}

.breakdown {
  padding: 30rpx 40rpx;
}

.card_no {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  border-radius: 15rpx;
  display: flex;
}

.card-left {
  flex: 1;
  width: 200rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
}

.card-title1 {
  font-size: 28rpx;
  color: #999999;
}

.input-no {
  margin-top: 10rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.no-placeholder {
  font-size: 28rpx;
  color: #999999;
  font-weight: bold;
}


.card-right {
  flex: 0 0 230rpx;
  width: 300rpx;
  height: 90rpx;
  color: #fff;
  line-height: 90rpx;
  text-align: center;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: 600;
  background-color: #1a1a1a;
}

.iconfont {
  display: inline-block;
  margin-right: 10rpx;
}

.problem {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 20rpx 0;
  border-radius: 15rpx;
}

.problem-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 0 30rpx;
}

.problem-bike {
  height: 350rpx;
  margin-top: 20rpx;
  padding: 0 30rpx;
}

.item1 {
  background-color: #fff;
  text-align: center;
}

.item1 image {
  width: 90%;
  height: 250rpx;
  margin: 0 auto;
  margin-top: 50rpx;
}

.item2 {
  background-color: rgb(228, 216, 49);
}

.option {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30rpx;
  text-align: center;
}

.option-item-left,
.active {
  flex: 0 0 40%;
  width: 45%;
  border: solid 1rpx #d0d0d0;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 50rpx;
  margin: 0 4%;
  margin-bottom: 20rpx;
  font-size: 26rpx;
  color: #343434;
}

.active {
  border: solid 1rpx var(--globleColor);
  color: var(--globleColor);
  background-color: var(--fillColor);
}

.input-problem {

  margin: 20rpx 30rpx;
  position: relative;
}

.input-problem textarea {
  border: solid 1rpx #d0d0d0;
  border-radius: 15rpx;
  width: auto;
  height: 150rpx;
  padding: 10rpx 20rpx;
  font-size: 26rpx;
}

.count {
  position: absolute;
  bottom: 14rpx;
  right: 31rpx;
  color: #999;
  font-size: 24rpx;
}

.placeholder {
  color: #818181;
  font-size: 24rpx;
}

.bike-photo {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  padding: 20rpx 30rpx;
}

.photo {
  display: flex;
  background-color: #f6f6f6;
  border-radius: 15rpx;
  padding: 30rpx 20rpx;
  margin-top: 30rpx;
}

.photo-image {
  height: 150rpx;
  display: inline-block;
  vertical-align: middle;
  width: 150rpx;
  border-radius: 15rpx;
  line-height: 130rpx;
  text-align: center;
  font-size: 100rpx;
  font-weight: 500;
  color: #cfcfcf;
  border: solid 1rpx #d0d0d0;
  margin-top: 20rpx;

}

.photoList {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: 150rpx;
  width: 150rpx;
  margin-top: 20rpx;
  margin-right: 5rpx;
}

.cha-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  /* text-align: center; */
  line-height:40rpx;
  font-size: 400;
  height:40rpx;
  display: inline-block;
  z-index: 999;
  /* width: 40rpx; */
  padding-left: 10rpx;
  background-color: rgba(0, 0, 0, 0.7);
}

.photo-left {
  flex: 1;
}

.photo-title {
  color: #6f6f6f;
  font-size: 30rpx;
  font-weight: bold;
}

.photo-text {
  color: #9f9f9f;
  font-size: 24rpx;
  margin-top: 20rpx;
}

.photo-right {
  flex: 0 0 120rpx;
  height: 120rpx;
  background-color: bisque;
}

.problem-bt {
  width: 70%;
  margin: 0 auto;
  background-color: var(--globleColor);
   color: var(--fontColor);
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 50rpx;
  margin-top: 50rpx;
  font-size: 34rpx;
}