.sec-personal-request{
  position: relative;
  .personal-card{
    position: relative;
    min-height: 100vh;
    padding: 204px 0 174px;
    background: $cool-gray-01;
    @media screen and (max-width: $screen-xs) {
      padding: 100px 0 130px;
    }
    &.step-1, &.step-2, &.step-3, &.step-4 {
      //display: none;
      &.active{
        //display: block;
      }
    }
    .need-wrapper{
      .form-wrapper{
        .form{
          max-width: 500px;
          &.w-700{
            max-width: 700px;
            .form-group{
              margin-bottom: 25px;
            }
          }
          .form-group{
            margin-bottom: 10px;
          }
        }
        .date-picker-wrapper{
          display: grid;
          grid-template-columns: 352px 396px;
          align-items: self-start;
          column-gap: 32px;
          @media screen and (max-width: 991px) and (min-width: 768px) {
            grid-template-columns: 352px 258px;
          }
          @media screen and (max-width: $screen-xs) {
            grid-template-columns: 1fr;
            row-gap: 32px;
          }
          .calendar-container{
            #personal-calendar{
              display: none;
            }

            .flatpickr-calendar {
              width: 100%;
              max-width: 352px;
              padding: 24px;
              background: $white;
              border-radius: 16px;
              box-shadow: $box-shadow-01;
              .flatpickr-innerContainer{
                justify-content: center;
                .flatpickr-rContainer{
                  display: block;
                  //width: 100%;
                  .flatpickr-weekdays{
                    .flatpickr-weekdaycontainer{
                      span{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        @include font-size(18, 500, $cool-gray-09);
                      }
                    }
                  }
                  .flatpickr-days{
                    //width: 100%;
                    justify-content: center;
                    .dayContainer{
                      //width: 100%;
                      max-width: max-content;
                      span{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        @include font-size(18, 400);
                      }
                    }
                  }
                }
              }
            }
          }
          ul.time-slot-list{
            display: grid;
            grid-template-columns: repeat(3, 102px);
            column-gap: 12px;
            row-gap: 12px;
            li{
              a.slot-tag{
                height: 44px;
                min-width: 102px;
                padding: 16px 24px;
                border-radius: 100px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: $cool-gray-02;
              }
            }
          }
        }
      }
      .confirm-card{
        padding: 16px;
        max-width: 720px;
        border-radius: 8px;
        background: rgba(198, 248, 225, 0.5);
        p{
          color: $green-09;
        }
      }
      .thanks-card{
        padding: 32px;
        max-width: 849px;
        border-radius: 8px;
        background: $primary-green-02;
        h2{
          display: grid;
          grid-template-columns: 32px 1fr;
          align-items: center;
          column-gap: 16px;
          color: $green-05;
          @media screen and (max-width: $screen-xs) {
            grid-template-columns: 1fr;
            row-gap: 16px;
            align-items: self-start;
          }
        }
        p{
          color: $green-09;
        }
      }
    }
  }

  .request-form-steps{
    width: 100%;
    padding: 16px 16px 16px 64px;
    margin: auto;
    max-width: 1280px;
    border-radius: 100px;
    box-shadow: $box-shadow-03;
    background: rgba(255, 255, 255, 0.95);
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    transition: $transition-01;
    @media screen and (max-width: 991px) {
      position: fixed;
      bottom: 0;
      padding: 16px 0;
      border-radius: 0;
    }
    .steps-grid{
      display: grid;
      //grid-template-columns: 1fr 468px;
      grid-template-columns: 1fr auto;
      align-items: center;
      column-gap: 12px;
      @media screen and (max-width: $screen-xs) {
        grid-template-columns: 1fr;
      }
      ul.steps-list{
        height: 6px;
        overflow: hidden;
        border-radius: 16px;
        background: $cool-gray-02;
        box-shadow: 0 1px 2px 0 rgba(139, 139, 140, 0.25) inset;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
        li{
          display: block;
          vertical-align: middle;
          &.active{
            background: $primary-green-03;
          }
          span{
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 16px;
          }
        }
      }
      ul.btn-list{
        text-align: right;
        @media screen and (max-width: $screen-xs) {
          margin-top: 20px;
          text-align: center;
        }
        li{
          display: inline-block;
          vertical-align: middle;
          &:not(:last-of-type){
            margin: 0 32px 0 0;
            @media screen and (max-width: 991px) {
              margin: 0 5px 0 0;
            }
          }
          .btn-style{
            @media screen and (max-width: 991px) {
              height: 36px;
              font-size: 18px;
              line-height: 24px;
              font-weight: 600;
              padding: 10px 16px 10px;
            }
            &.text-gray{
              color: $cool-gray-11;
            }
          }
        }
      }
    }
  }
}