/**
 * Step by step calendar view
 */
.step-by-step-view {
  padding: 10px;
  background-color: $white;
  .ml-20{
    margin-left: 20px;
  }
  .hidden{
    display: none;
  }

  button {
    height: 45px;
    min-width: 130px;
    border: none;
    border-radius: 4px;
    color: $white;
    background-color: $base-color;
    cursor: pointer;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    i{
      width: 8px;
      height: 13px;
      &.left-icon {
        background: $base-color;
        -webkit-mask-image: url("../icons/arrow-left.svg");
        mask-image: url("../icons/arrow-left.svg");
        margin-right: 10px;
      }
      &.right-icon {
        margin-left: 10px;
        background: url("../icons/arrow-right.svg") no-repeat center;
      }
      &.revert-icon {
        width: 16px;
        height: 14px;
        margin: 0 10px;
        background: url("../icons/revert.svg") no-repeat center;
      }
      &.print-icon {
        width: 20px;
        height: 18px;
        margin-right:10px;
        background: url("../icons/print.svg") no-repeat center;
      }
      &.calendar-icon {
        width: 16px;
        height: 16px;
        margin-right:10px;
        background: url("../../dashboard/icons/calendar.svg") no-repeat center;
      }
    }
    &.light{
      border: 1px solid $base-color;
      color: $base-color;
      background-color: $white;
      i{
        &.right-icon {
          background: $base-color;
          -webkit-mask-image: url("../icons/arrow-right.svg");
          mask-image: url("../icons/arrow-right.svg");
        }
      }
    }
    &:disabled{
      opacity: 0.6;
      cursor: not-allowed;
    }
    &:hover {
      opacity: 0.9;
    }
    &:focus{
      border:none;
      outline: none;
    }
  }
  .calendar-header-navbar{
    position: relative;
    width: 100%;

    .navbar{
      border: 1px solid #dddddd;
      border-radius: 4px;
      background-color: $white;
      display: inline-flex;
      width: 100%;
      align-items: center;
      .prev-step{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-left: 15px;
        cursor: pointer;
        border:1px solid #0b6665;
        border-radius: 50px;
        .left-icon{
          display: block;
          width: 12px;
          height: 12px;
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-position: center;
          background: $base-color;
          -webkit-mask-image: url("../icons/select-arrow.svg");
          mask-image: url("../icons/select-arrow.svg");
          mask-size: 12px 12px;
          -webkit-mask-size: 12px 12px;
          transform: rotate(90deg);
          /* All browsers support */
          -moz-transform: rotate(90deg);
          -webkit-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
        }
        &.disabled{
          opacity: 0.6;
          cursor: not-allowed;
        }
        &:hover, &:focus{
          opacity: 0.7;
        }
      }
      button{
        &.right{
          margin-left: auto;
          margin-right: 7.5px;
        }
        &:disabled{
          opacity: 0.6;
          cursor: not-allowed;
        }
      }
    }
    .calendar-step-nav{
      display: inline-flex;
      align-items: center;
      height: 60px;
      color: $black;
      width: calc( 100% - 190px);
      margin-left: 20px;
      .calendar-step-item{
        height: 60px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        cursor: pointer;
        flex-grow: 1;
        .step{
          display: flex;
          position: relative;
          width: 100%;
          justify-content: center;
          align-items: center;
          height: 30px;
          line-height: 20px;
          font-size: 14px;
          font-weight: 400;
          border-right:1px solid rgba(255, 255, 255, 0.2);
          .step-num{
            display: flex;
            position: absolute;
            left: 0;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 102, 102, 0.1);
            color: $base-color;
            border-radius: 50%;
            width: 24px;
            height: 24px;
          }
          .step-title{
            width: calc(100% - 24px);
            margin-left: 34px;
          }
          .selected-icon {
            position: absolute;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 102, 102, 0.1);
            color: $base-color;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            &:after{
              position: absolute;
              content: '';
              width: 12px;
              height: 9px;
              background-color: $base-color;
              -webkit-mask-image: url("../icons/validation-success.svg");
              mask-image: url("../icons/validation-success.svg");
              -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
              -webkit-mask-position: center;
              mask-position: center;
              mask-size: 12px 9px;
              -webkit-mask-size: 12px 9px;
              z-index:1;
            }
          }
        }
        &:last-child{
          .step{
            border-right: none;
          }
        }
        &.active{
          color: $base-color;
          .step{
            .step-num{
              background-color: #ffd400;
            }
          }
        }
        &:hover{
          .step{
            .step-num{
              background-color: #ffd400;
            }
          }
        }
        &.disabled{
          cursor: not-allowed;
        }
      }
    }
    .result-confirmation{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: $white;
      padding-top: 20px;
      width: 100%;
      .success-icon{
        background: url("../icons/success.svg") no-repeat center;
        background-size: contain;
        width: 60px;
        height: 60px;
      }
      p{
        line-height: 20px;
        color: #6c6c6c;
        font-size: 14px;
        font-weight: 400;
        &.success-title{
          line-height: 29px;
          color: $base-color;
          font-size: 24px;
          font-weight: 400;
        }
      }
    }
  }
  .calendar-content{
    background-color: $white;
    position: relative;
    &.no-border{
      border: none;
    }
    .step-title{
      padding-top: 20px;
      color: $base-color;
      font-size: 24px;
      font-weight: 400;
      text-align: center;
      min-height: 60px;
      display: flex;
      justify-content: center;
    }
    .step-content{
      position: relative;
      width: 100%;
      margin-top: 20px;
      &.pb-40{
        padding-bottom: 40px;
      }
      &.no-padding{
        padding: 0;
      }
      .error-tip {
        position: absolute;
        right: 0;
        padding: 5px 20px;
        top: -5px;
        width:max-content;
        max-width: 100%;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        background-color: $red;
        text-align: center;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        color: $white;
        &::after {
          content: '';
          width: 0;
          height: 0;
          display: block;
          position: absolute;
          z-index: 10;
          border: 0;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-top: 10px solid $red;
          right: 0;
          margin-right: 15px;
        }
      }
      .errors{
        width: 100%;
        color: $red;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 14px;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 30px;
        .error{
          width: 100%;
          background-color: rgba(217, 65, 65, 0.1);
          margin-bottom: 3px;
          padding: 5px 0;
          text-align: center;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          span{
            flex-basis: calc(100% - 25px);
          }
        }
        .close-icon{
          display: block;
          width: 10px;
          height: 10px;
          background: url("../icons/cross.svg") no-repeat center;
          cursor: pointer;
        }
      }
      ul{
        display: inline-flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
        /** Base li rules **/
        li{
          position: relative;
          background-color: $base-bg-color;
          border-radius: 4px;
          display: inline-flex;
          flex-wrap: wrap;
          align-items: center;
          font-size: 14px;
          font-weight: 700;
          line-height: 14px;
          cursor: pointer;
          padding: 0 20px;
          list-style-type: none;
          &.active{
            border: 2px solid #fed330;
            background-color: rgba(255, 212, 0, 0.2);
            .selected-icon {
              position: absolute;
              right: 5px;
              display: inline-block;
              background: url("../icons/selected_front.svg") no-repeat center;
              background-size: contain;
              color: $base-color;
              width: 28px;
              height: 28px;
            }
          }
          &.disabled{
            opacity: 0.6;
            cursor: not-allowed;
          }
          &:not(.active):hover{
            opacity: 0.7;
          }
          .title{
            text-transform: capitalize;
          }
        }

        &.step-category{
          li{
            padding: 0;
            box-sizing: border-box;
            align-content: center;
            height: 80px;
            width: calc(33% - 10.5px);
            margin: 0 20px 20px 0;
            color: $black;
            &:nth-child(3n){
              margin-right: 0;
            }
            .services {
              margin-top: 5px;
              margin-left:10px;
              width: calc(100% - 15px);
              color: #6c6c6c;
              font-size: 12px;
              font-weight: 400;
            }
            span{
              margin-left:10px;
              line-height: 16px;
              width: 100%;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              /* <integer> values */
              -webkit-line-clamp: 3;
            }
          }
        }
        &.step-payment{

          &.medium{
            max-width: 580px;
          }
          &.small{
            max-width: 270px;
          }
          li{
            position: relative;
            height: 140px;
            flex-grow: 1;
            flex-basis: 0;
            flex-direction: column;
            margin-bottom: 20px;
            margin-right: 20px;
            color: $black;
            display: flex;
            align-items: center;
            justify-content: center;
            &:last-child{
              margin-right: 0;
            }
            &.active{
              .selected-icon {
                position: absolute;
                top:10px;
                right: 10px;
              }
            }
            .icon{
              height: 40px;
              &.locally{
                background: url("../icons/payments/locally.svg") no-repeat center;
                width: 40px;
              }
              &.paypal{
                background: url("../icons/payments/paypal.svg") no-repeat center;
                width: 113px;
              }
              &.stripeConnect,
              &.stripe{
                background: url("../icons/payments/stripe.svg") no-repeat center;
                width: 118px;
              }
              &.woocommerce{
                background: url("../icons/payments/woocommerce.svg") no-repeat center;
                width: 174px;
              }
            }
            .custom-icon{
              height: 40px;
              object-fit: contain;
            }
            .title{
              font-size: 14px;
              font-weight: 400;
              padding-top: 5px;
              text-align: center;
            }
            .is-pro{
              position: absolute;
              top: 10px;
              left: 10px;
            }
          }
        }
        &.step-service{
          li{
            height: 80px;
            width: calc(33% - 10.5px);
            margin: 0 20px 20px 0;
            color: $black;
            padding: 0;
            box-sizing: border-box;
            &:nth-child(3n){
              margin-right: 0;
            }
            .service-icon{
              width: 40px;
              height: 40px;
              overflow: hidden;
              image{
                width: 100%;
              }
            }
            .info{
              margin-left: 10px;
              display: flex;
              flex-direction: column;
              width: calc( 100% - 50px );
              .title{
                height: 20px;
                width: 100%;
                line-height: 16px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .price{
                color: #6c6c6c;
                font-size: 12px;
                font-weight: 400;
                line-height: 15px;
              }
            }
          }
        }
      }
      .datetime{
        width: 100%;
        height: 104px;
        border-radius: 4px;
        background-color: $base-bg-color;
        display: flex;
        padding: 0 50px;
        div{
          &.hidden{
            display: none;
          }
          &.date{
            display: flex;
            position: relative;
            flex-direction: column;
            padding-top: 20px;
            max-width: 330px;
            width: 330px;
            &.mobile{
              cursor: pointer;
            }
            .calendar-select  {
              position: absolute;
              width: 100%;
              min-height: 240px;
              box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.16);
              box-sizing: border-box;
              border-radius: 4px;
              background-color: $white;
              top:80px;
              padding: 10px 22px;
              z-index: 2;
              .month-slide-control{
                height: 30px;
                display: flex;
                div{
                  background-color: $base-color;
                  color: $white;
                  &.slider-title{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #ffd400;
                    text-transform: uppercase;
                    width: calc(100% - 58px);
                    height: 30px;
                    margin: 0 1px;
                    font-size: 14px;
                    font-weight: 700;
                  }
                  &.next, &.prev {
                    width: 30px;
                    height: 30px;
                    cursor: pointer;
                    .right-icon{
                      display: block;
                      width: 30px;
                      height: 30px;
                      -webkit-mask-repeat: no-repeat;
                      mask-repeat: no-repeat;
                      -webkit-mask-position: center;
                      mask-position: center;
                      background: $white;
                      -webkit-mask-image: url("../icons/select-arrow.svg");
                      mask-image: url("../icons/select-arrow.svg");
                      transform: rotate(-90deg);
                      /* All browsers support */
                      -moz-transform: rotate(-90deg);
                      -webkit-transform: rotate(-90deg);
                      -o-transform: rotate(-90deg);
                      -ms-transform: rotate(-90deg);
                    }
                    .left-icon{
                      display: block;
                      width: 30px;
                      height: 30px;
                      -webkit-mask-repeat: no-repeat;
                      mask-repeat: no-repeat;
                      -webkit-mask-position: center;
                      mask-position: center;
                      background: $white;
                      -webkit-mask-image: url("../icons/select-arrow.svg");
                      mask-image: url("../icons/select-arrow.svg");
                      transform: rotate(90deg);
                      /* All browsers support */
                      -moz-transform: rotate(90deg);
                      -webkit-transform: rotate(90deg);
                      -o-transform: rotate(90deg);
                      -ms-transform: rotate(90deg);
                    }
                    &:hover{
                      background-color: #ffd400;
                      color: $base-color;
                      .right-icon, .left-icon{
                        background: $base-color;
                      }
                    }
                  }
                }
              }
              .day-list{
                .week-titles{
                  position: relative;
                  display: inline-flex;
                  width: 100%;
                  .title{
                    line-height: 15px;
                    color: #6c6c6c;
                    font-size: 12px;
                    font-weight: 400;
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    box-sizing: border-box;
                    flex: 1 1 13%; /*grow | shrink | basis */
                    justify-content: center;
                    height: auto;
                    width: 40px;
                    margin: 1px;
                  }
                }
                .week{
                  display: inline-flex;
                  margin-bottom: 1px;
                  color: $base-color;
                  width: 100%;
                  position: relative;
                  box-sizing: border-box;
                  .day{
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    flex: 1 1 13%; /*grow | shrink | basis */
                    height: auto;
                    margin: 1px;
                    background-color: #f0f8f8;
                    color: $base-color;
                    border-radius: 2px;
                    box-sizing: border-box;
                    line-height: 15px;
                    font-size: 12px;
                    font-weight: 700;
                    &:before{
                      content: "";
                      display: block;
                      padding-top: 100%;  /* initial ratio of 1:1*/
                    }
                    &.active{
                      border: 2px solid #fed430;
                      background-color: rgba(254, 212, 48, 0.2);
                    }
                    &:not(.day-off, .inactive):hover,&:focus{
                      border: 2px solid #fed430;
                      cursor: pointer;
                    }
                    &.inactive{
                      opacity: 0.4;
                      cursor: not-allowed;
                    }
                    &.day-off{
                      cursor: not-allowed;
                      color: $black;
                      font-weight: 400;
                    }
                  }
                }
                .info{
                  position: relative;
                  display: inline-flex;
                  flex-direction: column;
                  width: 100%;
                  p{
                    color: #6c6c6c;
                    font-size: 12px;
                    font-weight: 400;
                  }
                  span{
                    height: 6px;
                    width: 6px;
                    border-radius: 50%;
                    display: inline-block;
                    margin-right: 3%;
                    &.available{
                      background-color: $base-color;
                    }
                    &.unavailable{
                      background-color: $black;
                    }
                  }
                }
              }
            }
          }
          &.time{
            display: flex;
            position: relative;
            flex-direction: column;
            margin-left: 30px;
            padding-top: 20px;
            max-width: 550px;
            width: 550px;
            &.mobile{
              cursor: pointer;
            }
            .time-select{
              position: absolute;
              display: flex;
              width: 100%;
              max-height: 310px;
              box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.16);
              box-sizing: border-box;
              border-radius: 4px;
              background-color: $white;
              top:80px;
              padding-bottom: 20px;
              z-index: 2;
              &.hidden{
                display: none;
              }
              .time-list{
                display: flex;
                flex-wrap: wrap;
                overflow-y: scroll;
                padding: 10px 22px;
                width: 100%;
                &.empty{
                  overflow:unset;
                }
                .time-slot{
                  position: relative;
                  display: inline-flex;
                  align-items: center;
                  height: 35px;
                  flex-basis: calc(25% - 8.5px);
                  margin-right: 10px;
                  margin-bottom: 10px;
                  background-color: #f0f8f8;
                  border-radius: 4px;
                  line-height: 17px;
                  font-size: 14px;
                  font-weight: 400;
                  text-align: left;
                  padding-left: 10px;
                  padding-right: 5px;
                  flex-shrink: 1;
                  box-sizing: border-box;
                  &.not-available{
                    flex-basis: 100%;
                    cursor: not-allowed;
                  }
                  .selected-icon {
                    position: absolute;
                    right:2px;
                    background: url("../icons/selected_front.svg") no-repeat center;
                    background-size: contain;
                    color: $base-color;
                    width: 18px;
                    height: 18px;
                  }
                  &:nth-child(4n){
                    margin-right: 0;
                  }
                  &.active{
                    border: 2px solid #fed430;
                    background-color: rgba(254, 212, 48, 0.2);
                  }
                  &:not(.not-available):hover,&:focus{
                    border: 2px solid #fed430;
                    cursor: pointer;
                  }
                }
              }
            }
          }
          .select {
            display: flex;
            align-items: center;
            background: #fff url("../icons/select-arrow.svg") no-repeat right 18px top 50%;
            box-sizing: border-box;
            cursor: pointer;
            border-radius: 4px;
            border: solid 1px #dddddd;
            color: $black;
            background-color: $white;
            height: 45px;
            width: 100%;
            max-width: 100%;
            line-height: normal;
            font-size: 16px;
            font-weight: 400;
            padding-left: 20px;
            &.open{
              border: none;
              box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.16);
              background: #fff url("../../dashboard/icons/select-arrow-open.svg") no-repeat right 18px top 50%;
            }
            &.error{
              border: 1px solid $red;
            }
          }
          .error-tip{
            top: 10px;
          }
          label{
            line-height: 15px;
            color: $black;
            font-size: 12px;
            font-weight: 400;
            text-align: left;
            margin: 0 0 5px 0;
          }
        }
      }
      .staff-content{
        width: 100%;
        padding-top: 45px;
        overflow: hidden;
        overflow-y: auto;
        height: 240px;
        p{
          height: 20px;
          color: #6c6c6c;
          font-size: 16px;
          font-weight: 400;
          text-align: left;
          margin-bottom: 30px;
        }
        ul{
          &.staff{
            li{
              height: 60px;
              width: calc(25% - 15px);
              margin: 0 20px 20px 0;
              color: $black;
              padding:0;
              box-sizing: border-box;
              &:nth-child(4n){
                margin-right: 0;
              }
              .info{
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                .price{
                  color: #6c6c6c;
                  font-size: 12px;
                  font-weight: 400;
                  line-height: 15px;
                  padding-top:5px;
                }
              }
            }
          }
        }
      }
      .details{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .row{
          display: flex;
          min-width: 640px;
          margin-bottom: 20px;
          width: 100%;
          .detail-form{
            display: flex;
            position: relative;
            flex-direction: column;
            flex-basis: 100%;
            &.col-1{
              flex-basis: 8.33%;
            }
            &.col-2{
              flex-basis: 16.66%;
            }
            &.col-3{
              flex-basis: 25%;
            }
            &.col-4{
              flex-basis:33.33%;
              padding-right: 20px;
              &:nth-child(3n){
                padding-right: 0;
                .error-tip{
                  right: 0;
                }
              }
            }
            &.col-6{
              flex-basis: 50%;
            }
            &.col-12{
              flex-basis: 100%;
            }
            &.half{
              flex-basis: calc(50% - 10px);
              margin-right: 20px;
              &:last-child{
                margin-right: 0;
              }
            }
            .error-tip{
              right: 20px;
              top: -9px;
            }
            label{
              line-height: 15px;
              color: $black;
              font-size: 12px;
              font-weight: 700;
              margin-bottom: 5px;
            }
            input, textarea{
              -webkit-appearance: none;
              -moz-appearance: none;
              appearance: none;
              outline: none;

              height: 45px;
              width: 100%;
              border-radius: 4px;
              border: 1px solid #dddddd;
              background-color: $white;
              margin: 0;
              text-indent:20px;
              padding:0;
              color: $black;
              font-size: 16px;

              box-shadow: none;
              &::placeholder {
                opacity: 0.3;
              }
              &.error{
                border: 1px solid $red;
              }
              &:focus{
                outline: none;
              }
            }
            textarea{
              height: 80px;
              resize:none;
              font-style: inherit;
              font-family: inherit;
              padding-top: 10px;
            }
          }
        }
      }
      .payment-methods{
        display: flex;
        justify-content: center;
        flex-direction: column;
      }
      .confirmation{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        position: relative;
        overflow:hidden;
        .errors{
          width: 770px;
          margin-bottom: 0;
        }
        .redirect-url{
          color: $base-color;
          font-size: 22px;
          font-weight: 400;
          .payment-method{
            font-width: 700;
            text-transform: capitalize;
            padding: 0 5px;
          }
        }
        p{
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 400;
          color: $black;
          &.date{
            font-size: 24px;
            padding-top: 10px;
            margin:0;
          }
          &.time{
            font-size: 14px;
          }
        }
        .edit-icon{
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 102, 102, 0.1);
          color: $base-color;
          border-radius: 50%;
          width: 24px;
          height: 24px;
          margin-left: 5px;
          cursor: pointer;
          i{
            display: inline-block;
            background: $base-color;
            -webkit-mask-image: url("../../dashboard/icons/edit.svg");
            mask-image: url("../../dashboard/icons/edit.svg");
            background-size: contain;
            mask-size: 14px 14px;
            width: 14px;
            height: 14px;
          }
        }
        .appointment-info{
          width: 770px;
          height: 140px;
          margin:22px 0;
          border-top: 1px solid #dddddd;
          border-bottom: 1px solid #dddddd;
          display: inline-flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          .appointment-detail{
            display: flex;
            height: 70px;
            width: 33%;
            .detail-icon{
              display: flex;
              align-items: center;
              padding-right: 10px;
              .icon{
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: $highlight-color;
                border-radius: 50%;
                width: 30px;
                height: 30px;
                i{
                  display: inline-block;
                  background-size: contain;
                  width: 18px;
                  height: 18px;
                }
                &.service{
                  i{ background: url("../icons/service.svg") no-repeat center; }
                }
                &.user{
                  i{ background: url("../icons/step-user.svg") no-repeat center; }
                }
                &.price{
                  i{ background: url("../icons/money.svg") no-repeat center; }
                }
                &.payment{
                  i{ background: url("../../dashboard/icons/price.svg") no-repeat center;}
                }
              }

            }
            .info{
              display: flex;
              flex-direction: column;
              justify-content: center;
              .title{
                color: #6c6c6c;
                font-size: 12px;
                line-height: 12px;
              }
              .value{
                line-height: 16px;
                font-size: 16px;
                font-weight: 400;
              }
            }
            .edit-icon{
              margin-top: 15px;
            }
          }
        }
        .total{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: 100%;
          label{
            line-height: 17px;
            color: #6c6c6c;
            font-size: 14px;
            font-weight: 400;
            margin: 0;
          }
          span{
            line-height: 29px;
            color: #272727;
            font-size: 24px;
            font-weight: 400;
          }
        }
      }
      .stripe-card{
        margin-top:20px;
        width: 50%;
        margin-left: 25%;
        height: 45px;
        border-radius: 4px;
        border: 1px solid #dddddd;
        background-color: $white;
        padding: 13px 20px 0;
        margin-bottom: 40px;
        box-sizing: border-box;
      }
    }
    // Loader
    @import '../components/loader';
    .loader{
      height: 100%;
    }
  }
  .calendar-footer{
    padding: 20px 0;
    background-color:$white ;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    .footer{
      display: flex;
      width: 100%;
      .left{
        flex-basis: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .right{
        flex-basis: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      button {
        height: 45px;
        min-width: 130px;
        border: none;
        border-radius: 4px;
        color: $white;
        background-color: $base-color;
        cursor: pointer;
        text-decoration: none;
        text-transform: capitalize;
        font-size: 14px;
        font-weight: 400;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        &.light{
          border: 1px solid $base-color;
          color: $base-color;
          background-color: $white;
        }
        i{
          width: 8px;
          height: 13px;
          &.left-icon {
            background: $base-color;
            -webkit-mask-image: url("../icons/arrow-left.svg");
            mask-image: url("../icons/arrow-left.svg");
            margin-right: 10px;
          }
          &.right-icon {
            margin-left: 10px;
            background: url("../icons/arrow-right.svg") no-repeat center;
          }
          &.revert-icon {
            width: 16px;
            height: 14px;
            margin: 0 10px;
            background: url("../icons/revert.svg") no-repeat center;
          }
          &.print-icon {
            width: 20px;
            height: 18px;
            margin-right:10px;
            background: url("../icons/print.svg") no-repeat center;
          }
          &.calendar-icon {
            width: 16px;
            height: 16px;
            margin-right:10px;
            background: url("../../dashboard/icons/calendar.svg") no-repeat center;
          }
        }
        &:disabled{
          opacity: 0.6;
          cursor: not-allowed;
        }
        &:hover {
          opacity: 0.9;
        }
      }
      .custom-select {
        position: relative;
        display: inline-flex;
        flex-basis: 0;
        align-items: center;
        box-sizing: border-box;
        height: 45px;
        border: 1px solid $base-color;
        border-radius: 4px;
        color: $base-color;
        background: $white url("../icons/select-arrow.svg") no-repeat right 15px top 50%;
        margin: 0;
        min-width: 200px;
        cursor: pointer;
        &.open{
          border-bottom:none;
          border-bottom-right-radius: 0;
          border-bottom-left-radius:0;
        }
        .value{
          flex-basis: 80%;
          text-decoration: none;
          text-transform: capitalize;
          font-size: 14px;
          line-height: 14px;
          font-weight: 400;
          margin-left:15px;
          display: inline-flex;
          align-items: center;
          i{
            width: 8px;
            height: 13px;
            &.calendar-icon {
              width: 18px;
              height: 18px;
              margin-right:5px;
              background: url("../../dashboard/icons/calendar.svg") no-repeat center;
            }
          }
        }
        .custom-options{
          display: none;
          box-sizing: border-box;
          &.open{
            z-index: 2;
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            width: calc(100% + 2px);
            margin-left: -1px;
            box-sizing: border-box;
            top: 44px;
            background-color: #fff;
            border: 1px solid $base-color;
            border-top: none;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            padding-top: 10px;
            min-height: 70px;
            span{
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding-left: 17px;
              padding-bottom: 5px;
              cursor: pointer;
              color:$base-color;
              text-decoration: none;
              text-transform: capitalize;
              font-size: 14px;
              font-weight: 400;
              box-sizing: border-box;
              &:focus, &:hover{
                background-color: #f0f8f8;
                color:$base-color;
              }
            }
          }
        }
      }
    }
  }

  /** part if parent block is < 850px **/
  &.small-block{
    .calendar-header-navbar{
      .prev-step{
        margin-right: 10px;
        margin-left: 10px;
      }
      .calendar-step-nav{
        .calendar-step-item{
          flex-grow: 0;
          padding: 0 10px;
          .step{
            .step-num{
              margin-right: 0;
            }
          }
        }
      }
    }
    .calendar-content{
      .step-content{
        max-height: 510px;
        padding-bottom: 20px;
        ul{
          height: max-content;
          padding: 0;
          li{
            box-sizing: border-box;
            width: calc(50% - 10px);
            margin: 10px 10px 0 0;
            &:nth-child(2n){
              margin-right: 0;
            }
          }
          &.step-payment{
            li{
              flex-basis: unset;
            }
          }
          &.step-category, &.step-service{
            li{
              box-sizing: border-box;
              width: calc(50% - 10px);
              margin: 10px 10px 0 0;
              &:nth-child(2n){
                margin-right: 0;
              }
              &:nth-child(3n){
                margin-right: 10px;
              }
            }
          }
        }
        .datetime{
          padding: 0 20px;
          div{
            &.date{
              max-width: 360px;
              width: 360px;
            }
            &.time{
              width: 50%;
              .time-select{
                .time-list{
                  .time-slot{
                    flex-basis: calc(50% - 6.5px);
                    padding-left: 5px;
                    margin-right: 5px;
                    margin-bottom: 5px;
                    &.active{
                      border: 1px solid #fed430;
                      background-color: rgba(254, 212, 48, 0.2);
                    }
                    &:nth-child(2n){
                      margin-right: 0px;
                    }
                    .selected-icon{
                      display: none;
                    }
                  }
                }
              }
            }
          }
        }
        .staff-content{
          ul{
            &.staff{
              li{
                box-sizing: border-box;
                flex-basis: calc(33% - 7.5px);
                margin: 0 10px 10px 0;
                &:nth-child(3n){
                  margin-right: 0;
                }
                &:nth-child(4n){
                  margin-right: 10px;
                }
              }
            }
          }
        }
        .confirmation{
          .total{
            margin-top:20px;
          }
        }
      }
    }
  }
}

@media screen
and (max-device-width: 1132px)
and (min-device-width: 836px){
  .step-by-step-view {
    .calendar-header-navbar{}
    .calendar-content{
      .step-content{
        ul{
          height: max-content;
          &.step-payment{
            li{
              margin: 10px 10px 0 0;
              width: calc(50% - 10px);
              flex-basis: unset;
              &:nth-child(2n){
                margin-right: 0;
              }
            }
          }
        }
      }
    }
    .calendar-footer{}
  }
}

@media screen
and (max-device-width: 836px)
and (min-device-width: 760px){
  .step-by-step-view {
    .calendar-header-navbar{
      .navbar{
        button{
          font-size: 12px;
          height: 40px;
          min-width: 50px;
          width: 80px;
          padding: 0 5px;
          i{
            &.right-icon{
              display: none;
            }
          }
        }
        .prev-step{
          width: 20px;
          height: 20px;
          margin-left: 8px;
          .left-icon{
            width: 8px;
            height: 8px;
            mask-size: 8px 8px;
            -webkit-mask-size: 8px 8px;
          }
        }
      }
      .calendar-step-nav{
        width: calc(100% - 113px);
        padding-left: 10px;
        margin-left: 0;
        .calendar-step-item{
          min-width: 80px;
          padding: 0;
          .step{
            font-size: 12px;
            .step-num{
              width: 22px;
              height: 22px;
            }
            .step-title{
              width: calc(100% - 22px);
              padding-left: 5px;
            }
            .selected-icon {
              margin-right: 5px;
              width: 22px;
              height: 22px;
            }
          }
        }
      }
    }
    .calendar-content{
      .step-content{
        max-height: 510px;
        overflow: hidden;
        overflow-y: auto;
        padding-bottom: 20px;
        ul{
          height: max-content;
          padding: 0;
          li{
            box-sizing: border-box;
            width: calc(50% - 10px);
            margin: 10px 10px 0 0;
            &:nth-child(2n){
              margin-right: 0;
            }
          }
          &.step-payment{
            li{
              flex-basis: unset;
            }
          }
          &.step-category, &.step-service{
            li{
              box-sizing: border-box;
              width: calc(50% - 10px);
              margin: 10px 10px 0 0;
              &:nth-child(2n){
                margin-right: 0;
              }
              &:nth-child(3n){
                margin-right: 10px;
              }
            }
          }
        }
        .datetime{
          padding: 0 20px;
          div{
            &.time{
              width: 50%;
              .time-select{
                .time-list{
                  .time-slot{
                    font-size: 12px;
                    flex-basis: calc(33% - 6.5px);
                    padding-left:5px;
                    padding-right: 0;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    &.active{
                      border: 1px solid #fed430;
                      background-color: rgba(254, 212, 48, 0.2);
                    }
                    &:nth-child(4n){
                      margin-right: 10px;
                    }
                    &:nth-child(3n){
                      margin-right: 0;
                    }
                    .selected-icon{
                      display: none;
                    }

                  }
                }
              }
            }
          }
        }
        .staff-content{
          ul{
            &.staff{
              li{
                box-sizing: border-box;
                flex-basis: calc(33% - 7.5px);
                margin: 0 10px 10px 0;
                &:nth-child(3n){
                  margin-right: 0;
                }
                &:nth-child(4n){
                  margin-right: 10px;
                }
              }
            }
          }
        }
        .confirmation{
          .total{
            margin-top:20px;
          }
        }
      }
    }
  }
}

@media screen
and (max-device-width: 760px)
and (min-device-width: 0px){
  .step-by-step-view {
    .calendar-header-navbar{
      .navbar{
        border: none;
      }
      .calendar-step-nav{
        display: inline-flex;
        height: 45px;
        background-color: $base-color;
        color: $white;
        width: 100%;
        margin-left: 0;
        &.hidden{
          display: none;
        }
        .calendar-step-item{
          height: 45px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $white;
          flex-grow: 1;
          line-height: 20px;
          font-size: 16px;
          font-weight: 400;
          &.first{
            padding-left: 45px;
          }
          .step-num{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffd400;
            margin-right: 15px;
            color: $base-color;
            border-radius: 50%;
            width: 24px;
            height: 24px;
          }
        }
        .next-step, .prev-step{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 45px;
          height: 45px;
          cursor: pointer;
          .right-icon{
            display: block;
            width: 30px;
            height: 30px;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            background: $white;
            -webkit-mask-image: url("../icons/select-arrow.svg");
            mask-image: url("../icons/select-arrow.svg");
            transform: rotate(-90deg);
            /* All browsers support */
            -moz-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
          }
          .left-icon{
            border-right:1px solid rgba(255, 255, 255, 0.2);
            display: block;
            width: 30px;
            height: 30px;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            background: $white;
            -webkit-mask-image: url("../icons/select-arrow.svg");
            mask-image: url("../icons/select-arrow.svg");
            transform: rotate(90deg);
            /* All browsers support */
            -moz-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
          }
          &.disabled{
            opacity: 0.6;
            cursor: not-allowed;
          }
          &:hover, &:focus{
            opacity: 0.7;
          }
        }
        .next-step{
          border-left:1px solid rgba(255, 255, 255, 0.2);
        }
        .prev-step{
          border-right:1px solid rgba(255, 255, 255, 0.2);
          border-radius: unset;
          margin: 0;
          padding: 0;
        }
      }
      .result-confirmation{
        p{
          text-align: center;
          padding-bottom: 10px;
          &.success-title{
            line-height: 24px;
            font-size: 20px;
          }
        }
      }
    }
    .calendar-content{
      max-height: 450px;
      .step-title{
        font-size: 20px;
      }
      .step-content{
        max-height: 450px;
        overflow: hidden;
        overflow-y: auto;
        padding-top: 0;
        padding-bottom: 20px;
        ul{
          height: max-content;
          padding: 0;
          li{
            width: 100%;
            margin: 10px 0 0 0;
            box-sizing: border-box;
            margin-top: 0;
            list-style-type: none;
            &.active{
              .selected-icon {
                right: 15px;
              }
            }
          }
          &.step-category, &.step-service{
            li{
              width: 100%;
              margin: 10px 0 0 0;
              &:nth-child(3n){
                margin-right: 0;
              }
            }
          }
        }
        .datetime-content{
          height: max-content;
          .datetime{
            display: flex;
            flex-direction: column;
            padding: 0;
            height: 120px;
            &.hidden{
              display: none;
            }
            .date, .time{
              min-width: unset;
              max-width: 100%;
              width: 100%;
              height: 60px;
              flex-direction: row;
              align-items: center;
              padding: 0;
              box-sizing: border-box;
              border-bottom: 1px solid rgba(0, 0, 0, 0.1);
              .round-arrow{
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: $base-color;
                width: 26px;
                height: 26px;
                margin-right: 20px;
                border-radius: 50%;
                .right-icon{
                  display: block;
                  width: 26px;
                  height: 26px;
                  -webkit-mask-repeat: no-repeat;
                  mask-repeat: no-repeat;
                  -webkit-mask-position: center;
                  mask-position: center;
                  background: $white;
                  -webkit-mask-image: url("../icons/select-arrow.svg");
                  mask-image: url("../icons/select-arrow.svg");
                  transform: rotate(-90deg);
                  /* All browsers support */
                  -moz-transform: rotate(-90deg);
                  -webkit-transform: rotate(-90deg);
                  -o-transform: rotate(-90deg);
                  -ms-transform: rotate(-90deg);
                }
              }
            }
            .date{
              .selected-date{
                flex-grow: 1;
                color: #6c6c6c;
                font-size: 16px;
                font-weight: 400;
                span{
                  color:$black;
                  font-width: 700;
                }
              }
              .calendar-icon {
                width: 20px;
                height: 20px;
                margin-right:10px;
                margin-left: 20px;
                background: url("../../dashboard/icons/calendar.svg") no-repeat center;
              }
            }
            .time{
              margin: 0;
              .selected-time{
                flex-grow: 1;
                color: #6c6c6c;
                font-size: 16px;
                font-weight: 400;
                span{
                  color:$black;
                  font-width: 700;
                }
              }
              .time-icon {
                width: 20px;
                height: 20px;
                margin-right:10px;
                margin-left: 20px;
                background: url("../icons/clock.svg") no-repeat center;
              }
            }
          }
          .staff-content{
            padding-top: 20px;
            max-height: max-content;
            min-height: unset;
            p{
              margin-bottom: 20px;
            }
            ul{
              padding: 0;
              display: contents;
              li{
                width: 100%;
                margin: 10px 0 0 0;
                box-sizing: border-box;
                &:first-of-type{
                  margin-top: 0;
                }
              }
            }
          }
          .select-datetime-mobile{
            display: flex;
            flex-direction: column;
            position: relative;
            min-height: 510px;
            &.hidden{
              display: none;
            }
            .select-datetime{
              display: inline-flex;
              height: 45px;
              background-color: #f0f8f8;
              color: $base-color;
              width: 100%;
              border: 1px solid rgba(0, 0, 0, 0.1);
              .title{
                height: 45px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                text-transform: capitalize;
                flex-grow: 1;
                line-height: 20px;
                font-size: 16px;
                font-weight: 400;
              }
              .close{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 45px;
                height: 45px;
                cursor: pointer;
                border-left: 1px solid rgba(0, 0, 0, 0.1);
                .close-icon{
                  display: block;
                  width: 30px;
                  height: 30px;
                  background: url("../icons/cross.svg") no-repeat center;
                }
                &:hover, &:focus{
                  opacity: 0.7;
                }
              }
              .select-date{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 45px;
                height: 45px;
                cursor: pointer;
                border-right: 1px solid rgba(0, 0, 0, 0.1);
                .left-icon{
                  width: 45px;
                  height: 45px;
                  -webkit-mask-repeat: no-repeat;
                  mask-repeat: no-repeat;
                  -webkit-mask-position: center;
                  mask-position: center;
                  background: $base-color;
                  -webkit-mask-image: url("../icons/select-arrow.svg");
                  mask-image: url("../icons/select-arrow.svg");
                  transform: rotate(90deg);
                  /* All browsers support */
                  -moz-transform: rotate(90deg);
                  -webkit-transform: rotate(90deg);
                  -o-transform: rotate(90deg);
                  -ms-transform: rotate(90deg);
                }
                &:hover, &:focus{
                  opacity: 0.7;
                }
              }
            }
            .calendar-select  {
              position: relative;
              width: 322px;
              min-height: 310px;
              box-sizing: border-box;
              padding-top: 20px;
              margin-left: calc(50% - 161px);
              .month-slide-control{
                height: 30px;
                display: flex;
                div{
                  background-color: $base-color;
                  color: $white;
                  &.slider-title{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #ffd400;
                    text-transform: uppercase;
                    width: calc(100% - 58px);
                    margin: 0 1px;
                    font-size: 14px;
                    font-weight: 700;
                  }
                  &.next, &.prev {
                    width: 30px;
                    height: 30px;
                    cursor: pointer;
                    .right-icon{
                      display: block;
                      width: 30px;
                      height: 30px;
                      -webkit-mask-repeat: no-repeat;
                      mask-repeat: no-repeat;
                      -webkit-mask-position: center;
                      mask-position: center;
                      background: $white;
                      -webkit-mask-image: url("../icons/select-arrow.svg");
                      mask-image: url("../icons/select-arrow.svg");
                      transform: rotate(-90deg);
                      /* All browsers support */
                      -moz-transform: rotate(-90deg);
                      -webkit-transform: rotate(-90deg);
                      -o-transform: rotate(-90deg);
                      -ms-transform: rotate(-90deg);
                    }
                    .left-icon{
                      display: block;
                      width: 30px;
                      height: 30px;
                      -webkit-mask-repeat: no-repeat;
                      mask-repeat: no-repeat;
                      -webkit-mask-position: center;
                      mask-position: center;
                      background: $white;
                      -webkit-mask-image: url("../icons/select-arrow.svg");
                      mask-image: url("../icons/select-arrow.svg");
                      transform: rotate(90deg);
                      /* All browsers support */
                      -moz-transform: rotate(90deg);
                      -webkit-transform: rotate(90deg);
                      -o-transform: rotate(90deg);
                      -ms-transform: rotate(90deg);
                    }
                    &:hover{
                      background-color: #ffd400;
                      color: $base-color;
                      .right-icon, .left-icon{
                        background: $base-color;
                      }
                    }
                  }
                }
              }
              .day-list{
                width: 322px;
                .week-titles{
                  position: relative;
                  display: inline-flex;
                  width: 322px;
                  .title{
                    line-height: 15px;
                    color: #6c6c6c;
                    font-size: 12px;
                    font-weight: 400;
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    box-sizing: border-box;
                    flex: 1 1 13%; /*grow | shrink | basis */
                    justify-content: center;
                    height: auto;
                    height: 45px;
                    margin: 1px;
                  }
                }
                .week{
                  display: inline-flex;
                  height: 45px;
                  margin-bottom: 1px;
                  color: $base-color;
                  position: relative;
                  box-sizing: border-box;
                  .day{
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    flex: 1 1 13%; /*grow | shrink | basis */
                    height: 45px;
                    width: 45px;
                    margin-left: 1px;
                    background-color: #f0f8f8;
                    color: $base-color;
                    border-radius: 2px;
                    box-sizing: border-box;
                    line-height: 15px;
                    font-size: 12px;
                    font-weight: 700;
                    &.active{
                      border: 2px solid #fed430;
                      background-color: rgba(254, 212, 48, 0.2);
                    }
                    &:not(.day-off, .inactive):hover,&:focus{
                      border: 2px solid #fed430;
                      cursor: pointer;
                    }
                    &.inactive{
                      opacity: 0.4;
                      cursor: not-allowed;
                    }
                    &.day-off{
                      cursor: not-allowed;
                      color: $black;
                      font-weight: 400;
                    }
                  }
                }
                .info{
                  position: relative;
                  display: inline-flex;
                  flex-direction: column;
                  width: 100%;
                  p{
                    color: #6c6c6c;
                    font-size: 12px;
                    font-weight: 400;
                  }
                  span{
                    height: 6px;
                    width: 6px;
                    border-radius: 50%;
                    display: inline-block;
                    margin-right: 3%;
                    &.available{
                      background-color: $base-color;
                    }
                    &.unavailable{
                      background-color: $black;
                    }
                  }
                }
              }
            }
            .time-select{
              position: relative;
              display: flex;
              width: 100%;
              max-height: 400px;
              box-sizing: border-box;
              border-radius: 4px;
              padding-bottom: 20px;
              .time-list{
                display: flex;
                flex-wrap: wrap;
                overflow-y: scroll;
                padding: 10px;
                width: 100%;
                .time-slot{
                  display: inline-flex;
                  align-items: center;
                  height: 35px;
                  flex-basis: calc(50% - 5px);
                  margin-right: 10px;
                  margin-bottom: 10px;
                  background-color: #f0f8f8;
                  border-radius: 4px;
                  line-height: 17px;
                  font-size: 14px;
                  font-weight: 400;
                  padding-left: 20px;
                  &.not-available{
                    flex-basis: 100%;
                    cursor: not-allowed;
                  }
                  .selected-icon {
                    display: inline-block;
                    background: url("../icons/selected_front.svg") no-repeat center;
                    background-size: contain;
                    color: $base-color;
                    width: 18px;
                    height: 18px;
                    margin-left: auto;
                    margin-right: 10px;
                  }
                  &:nth-child(2n){
                    margin-right: 0;
                  }
                  &.active{
                    border: 2px solid #fed430;
                    background-color: rgba(254, 212, 48, 0.2);
                  }
                  &:not(.not-available):hover,&:focus{
                    border: 2px solid #fed430;
                    cursor: pointer;
                  }
                }
              }
            }
            .select-time{
              position: absolute;
              bottom: -10px;
              width: 100%;
              button {
                height: 45px;
                width: 100%;
                border: none;
                border-radius: 4px;
                color: $white;
                background-color: $base-color;
                cursor: pointer;
                text-decoration: none;
                text-transform: capitalize;
                font-size: 14px;
                font-weight: 400;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0 20px;
                .right-icon{
                  width: 8px;
                  height: 13px;
                  margin-left: 10px;
                  background: url("../icons/arrow-right.svg") no-repeat center;
                }
                &:hover {
                  opacity: 0.9;
                }
              }
            }
          }
        }
        .details{
          height: max-content;
          padding-bottom: 20px;
          div{
            width: 100%;
            display: contents;
            position: relative;
            padding-top: 5px;
          }
          .row{
            width: 100%;
            min-width: min-content;
            min-height: 0;
          }
        }
        .payment-methods{
          .step-payment{
            li{
              margin-right: 0;
              flex-basis: 100%;
              &:first-of-type{
                margin-top: 0;
              }
            }
          }
        }
        .confirmation{
          .redirect-url{
            text-align: center;
            line-height: 16px;
            display: block;
            padding-top: 10px;
            .payment-method{
              padding: 0;
            }
          }
          .date{
            padding-top: 10px;
            line-height: 24px;
          }
          .appointment-info{
            height: max-content;
            padding: 20px 0;
            .appointment-detail{
              width: 100%;
              height: 40px;
              margin-bottom: 10px;
              &:last-child{
                margin-bottom: 0;
              }
            }
          }
          .total{
            margin-top:20px;
            &.no-margin{
              margin-top: 0;
            }
          }
          .download-pdf{
            flex-basis: 100%;
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: $base-color;
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;
            cursor: pointer;
            margin-top: 25px;
            .download-icon{
              background: url("../icons/download-arrow.svg") no-repeat center;
              background-size: contain;
              width: 16px;
              height: 16px;
              margin-right: 5px;
            }
          }
        }
        .stripe-card{
          width: 100%;
          margin-left: 0;
          margin-bottom: 0;
        }
      }
      .loader{
        overflow: hidden;
      }
    }
    .mobile{
      height: max-content;
      .stripe-card{
        width: 100%;
        margin-top: 20px;
        height: 45px;
        border-radius: 4px;
        border: 1px solid #dddddd;
        background-color: $white;
        padding: 15px 20px 0;
      }
      .calendar-footer{
        justify-content:center;
        align-items: center;
        &.hidden{
          display: none;
        }
        div{
          width: 100%;
          button{
            min-width: calc(100% - 5px);
            &.disabled{
              opacity: 0.6;
              cursor: not-allowed;
            }
            i{
              &.revert-icon{
                margin: 0 7px;
              }
            }
          }
          &.navigation{
            display: flex;
            .custom-select{
              position: relative;
              display: inline-flex;
              flex-basis: 0;
              align-items: center;
              box-sizing: border-box;
              height: 45px;
              border-radius: 4px;
              margin: 0;
              cursor: pointer;
              min-width: 150px;
              width: calc(100% - 5px);
              background: $base-color url("../icons/select-arrow.svg") no-repeat right 8px top 50%;
              color:$white;
              border: none;
              justify-content: center;
              &.open{
                border-bottom:none;
                border-bottom-right-radius: 0;
                border-bottom-left-radius:0;
              }
              .value{
                flex-basis: 90%;
                margin-left: 10px;
                text-decoration: none;
                text-transform: capitalize;
                font-size: 14px;
                line-height: 14px;
                font-weight: 400;
                display: inline-flex;
                align-items: center;
                i{
                  width: 8px;
                  height: 13px;
                  &.calendar-icon {
                    background-color: $white;
                    -webkit-mask-image: url("../../dashboard/icons/calendar.svg");
                    mask-image: url("../../dashboard/icons/calendar.svg");
                    -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
                    -webkit-mask-position: center;
                    mask-position: center;
                    mask-size: 18px 18px;
                    -webkit-mask-size: 18px 18px;
                    z-index:1;
                    width: 18px;
                    height: 18px;
                    margin-right: 10px;
                  }
                }
              }
              .custom-options{
                display: none;
                box-sizing: border-box;
                background-color: $base-color;
                margin-left: 0;
                &.open{
                  width: 100%;
                  z-index: 2;
                  position: absolute;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: flex-start;
                  box-sizing: border-box;
                  top: 44px;
                  background-color: $base-color;
                  border-top: none;
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                  padding-top: 10px;
                  min-height: 70px;
                }
                .custom-option{
                  color:$white;
                  padding-left: 20px;
                  width: 100%;
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  padding-bottom: 5px;
                  cursor: pointer;
                  text-decoration: none;
                  text-transform: capitalize;
                  font-size: 14px;
                  font-weight: 400;
                  &:focus, &:hover{
                    background-color: #f0f8f8;
                    color:$base-color;
                  }
                }
              }
            }
            button{
              padding: 0;
            }
          }
        }
      }
    }
  }
}