@import '@/styles/_support';

input {
    padding: 0 2.083333rem;
    color: #333333;
  }
  
  .orange {
      color: $cOrange;
  }
  
  .gray {
      color: #747474;
  }
  
  .submit-btn{
      background: url("~@assets/images/vhis/vhis-btn.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 15rem;
      height: 2.5rem;
      line-height: 2.5rem;
      color: white;
      font-weight: 600;
      cursor: pointer;
      margin: 2.5rem auto;
      text-align: center;
    }

.reservation-container {
    @extend .bb;
    border-radius: .666667rem;
    border: solid .083333rem $cOrange;
    background-color: #ffffff;
    padding: 2.666667rem 10rem 2.833333rem 10rem;
  
    .title {
        font-size: 1.333333rem;
        color: $cOrange;
        text-align: center;
        margin: 1.666667rem auto 0 auto;
  
        span {
            padding: 0 .166667rem;
        }
    }
  
    .default-mt {
        margin-top: 2.666667rem;
    }
  
    .flex-top {
        display: flex;
        justify-content: left;
        align-items: flex-start;
    }
  
    .flex-start {
      display: flex;
      justify-content: left;
      align-items: flex-start;
      flex-wrap: wrap;
    }
  
    .check-item {
        display: flex;
        align-items: center;
        span {
            margin-left: .833333rem;
        }
    }
}
  
  


.form {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  
    &-name {
      font-size: 1.333333rem ;
      font-weight: 600;
      text-align: left;
      color: $cOrange;
      padding-left: 15px;
    }
  
    .ipt-date {
      width: 100%;
      border: 1px solid $cOrange !important;
      border-radius: .416667rem ;
      height: 3rem;
      align-items: center;
      padding-left: .833333rem;
    }
  
    &-item {
      width: 50%;
      display: flex;
      justify-content: center;
      padding: 0 $marginSmall;
      margin-bottom: 1.333333rem;
  
      .label {
        display: flex;
        align-items: center;
        min-width: 30%;
        justify-content: flex-start;
        padding-left: 5px;
        letter-spacing: .25rem;
      }
  
      .ipt-wrap {
        width: 70%;
        position: relative;
  
        // input和下拉
        .ipt {
            border: 1px solid $cOrange !important;
            border-radius: .416667rem ;
            height: 3rem;
            display:flex;
            align-items: center;
        }
  
        // 长文本
        .textarea {
          min-height: 8.75rem;
          @extend .bb;
          padding: .75rem;
        }
  
        .down-arrow {
          z-index: 10;
          position: absolute;
          top: 1.3rem;
          right: 1.2rem;
          background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
          background-size: 100% 100%;
          width: .633333rem;
          height: .433333rem;
          pointer-events: none;
          cursor: default;
        }
      }
  
      .validator {
        color: $cOrange;
        margin-top: 0.5rem;
        position: absolute;
        right: 1rem;
        display: flex;
        align-items: center;
        // bottom: 0;
  
        img {
          display: inline-block;
          margin-right: 0.4rem;
        }
      }
    }
  
  
    &-item-2 {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      padding: 0 $marginSmall;
      margin-bottom: 1.333333rem;
  
      .label {
        align-items: center;
        width: 25%;
        padding-left: 5px;
        letter-spacing: .25rem;
  
        .main-label {
            color: $cOrange;
        }
      }
  
      .date-container {
        width: 60%;
        position: relative;
      }
  
      .value {
          width: 75%;
          position: relative;
          .ipt-wrap {
  
          // input和下拉
          .ipt {
              border: 1px solid $cOrange !important;
              border-radius: .416667rem ;
              height: 3rem;
              display:flex;
              align-items: center;
          }
  
  
          .ipt2 {
              width: 100%;
              border-bottom: 1px solid #ccc;
              height: 3rem;
              display:flex;
              align-items: center;
              margin-bottom: .833333rem ;
          }
  
          // 长文本
          .textarea {
              min-height: 8.75rem;
              @extend .bb;
              padding: .75rem;
          }
  
          .down-arrow {
              z-index: 10;
              position: absolute;
              top: 1.3rem;
              right: 1.2rem;
              background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
              background-size: 100% 100%;
              width: .633333rem;
              height: .433333rem;
              pointer-events: none;
              cursor: default;
          }
        }
      }
    }
  }
  
  
  .notice {
    margin-top: 4rem;
    @extend .bb;
    padding: 0 1rem;
  
    &-item {
      position: relative;
      line-height: 2;
      letter-spacing: 1.2px;
      margin-bottom: 1rem;
  
      &-icon {
        width: 1.166667rem;
        position: absolute;
        top: .6rem;
      }
    }
  }

  
@media (max-width: 1200px) {
    .mobile-margin {
        margin-top: 2.5rem;
    }
}

@media (max-width: 1000px) {

    .form {
      &-item {
          width: 100%;
          .label {
            min-width: 30%;
          }
      
          .ipt-wrap {
            width: 70%;
          }
      }

      &-item-2 {
        .date-container {
          width: 80%;
        }
      }
    }
}  

@media (max-width: 600px) {
    .reservation-container {
        padding: 2.666667rem 2rem 2.833333rem 2rem;
    }

  .form {
    &-item {
        width: 100%;

        .label {
          min-width: 30%;
        }
    
        .ipt-wrap {
          width: 70%;
        }
    }

    &-item2 {
      display: block;

      .ipt-wrap {
        margin: 0;
      }
    }

    &-item-2 {
        .label {
            width: 30%;
        }
        .value {
            width: 70%;
        }

        .date-container {
          width: 100%;
        }
    }

    &-item3 {
      display: block;

      .ipt-wrap {
        margin: 0;
        width: 100%;
      }
    }
  }

  .notice {
    margin: 0;
  }
}