#leadModel {
  // display: none;
  // position: absolute;
  // top: 0;
  // left: 0;
  // z-index: 999;
  // color: #000;
  // font-family: 'Prompt';
  // font-size: $font-size-normal;
  .close-container {
    position: sticky;
    top: 0;
    width: 100%;
    height: initial;
    text-align: right;
    z-index: 1;
    padding: 20px;
    margin-bottom: -62px;
  }

  .BGmodel {
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-close {
    // position: absolute;
    // right: 40px;
    // top: 20px;

    // position: sticky;
    // float: right;
    // top: 0;
    // background: #fff;
  }

  .popup {
    background: #fff;
    padding: 30px 40px;
    position: relative;
    width: 100%;
    max-width: 100%;
    // max-height: 100%;
    // width: 767px;
    // max-width: 90%;
    // max-height: 90%;
    overflow-y: auto;
    border-radius: 6px;
    // margin-top: -62px;

    &__title {
      font-size: 20px;
      font-weight: bold;
    }

    &__date {
      color: #666;
      font-size: 12px;
      margin-top: 6px;
    }

    &__call {
      padding: 10px 30px;
      background: #e6e6e6;
      float: right;
      margin-top: 0;
      font-weight: bold;
      -webkit-box-shadow: 1px 1px 2px #666;
      box-shadow: 1px 1px 2px #666;
      position: absolute;
      right: 40px;
      top: 60px;

      // padding: 10px 30px;
      // background: #e6e6e6;
      // float: right;
      // margin-top: -45px;
      // font-weight: bold;
      // box-shadow: 1px 1px 2px #666;

      &--icon {
        width: 15px;
        margin-right: 5px;
      }
    }

    &__status {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;

      &--radio {
        cursor: pointer;
        width: 33.33%;
        margin-top: 8px;
        text-align: center;

        input[type="radio"] {
          margin: 4px 5px 0 0;
          display: none;
        }

        input[type="radio"] + label {
          margin: 0;
          padding: 12px 10px;
          font-weight: normal;
          width: 90%;
          text-align: left;
          border-radius: 0.2em;
          cursor: pointer;
        }

        input[type="radio"] + label span {
          display: inline-block;
          width: 12px;
          height: 12px;
          margin: -1px 7px 0 0;
          vertical-align: middle;
          cursor: pointer;
          -moz-border-radius: 50%;
          border-radius: 50%;
        }

        input[type="radio"]:checked + label {
          cursor: pointer;
          box-shadow: 1px 1px 2px #666;
          font-weight: bold;
          text-align: center;
        }
      }
    }

    &__tabs{
      margin-top: 20px;
    }

    &__note {
      // margin-top: 20px;
      // border-top: 1px solid #ddd;
      padding-top: 30px;

      &--input {
        border: 1px solid #ddd;
        padding: 10px 15px;
        width: 75%;
      }

      &--submit {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5%;
        background: #00bcd4;
        border-radius: 3px;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        padding: 12px 0;
      }

      &--list {
        margin-top: 20px;
        width: 100%;
        max-height: 30vh;
        overflow-y: auto;
      }

      &--item {
        display: flex;
        margin-bottom: 15px;
      }

      &--status {
        width: 12px;
        height: 12px;
        border-radius: 50%;
      }

      &--text {
        width: 85%;
        margin-left: 3%;
      }

      &--date {
        color: #7e7e7e;
        font-size: 9px;
        line-height: 1;
      }

      &--messages {
        font-weight: bold;
      }

      &--delete {
        width: 10%;
        text-align: center;

        img {
          width: 30%;
          cursor: pointer;
        }
      }

      .flex {
        align-items: flex-start;
      }
    }

    &__order{
      table{
        width: 100%;
        border-top: 1px solid #ddd;
        margin-top: 30px;
        tr{
          border-bottom: 1px solid #ddd;
        }
        td{
          padding: 5px;
        }
      }
    }

    #data-register_pickup{
      color: #004f9c;
      font-weight: 500;
    }

    #data-register_info {
      padding-top: 10px;
    }

    #lead_payslip {
      img {
        width: 100%;
      }
    }

    // #skootar{
    //   display: flex;
    //   margin-top: 10px;
    //   align-items: center;

    //   .callSkootar{
    //     padding: 10px 20px;
    //     background: #00BCD4;
    //     border-radius: 5px;
    //     color: #fff;
    //     cursor: pointer;
    //     &.disabled{
    //       background: #ddd;
    //     }
    //   }
    //   .cancelSkootar{
    //     display: none;
    //     padding: 10px 20px;
    //     background: #F44336;
    //     border-radius: 5px;
    //     color: #fff;
    //     cursor: pointer;
    //   }

    //   .skootarStatus{
    //     margin-left: 20px;
    //     color: #888;
    //   }
    // }

    &__delivery{
      #data-register_delivery_info{
        margin-top: 10px;
      }
      #data-register_transportation{
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .transportation{
          padding: 12px;
          border-radius: 3px;
          box-shadow: 1px 1px 5px #ddd;
          display: flex;
          align-items: center;
          margin-left: 10px;
          cursor: pointer;
          &.disable{
            opacity: 0.5;
            .transportation__info--btn{
              color: red;
            }
          }

          &__logo{
            width: 55px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
              max-width: 100%;
              max-height: 100%;
            }
          }
          &__detail{
            padding-left: 12px;
            &--status{
              font-weight: bold;
              font-size: 16px;
            }
            &--driver{
              font-size: 14px;
            }
            &--calldriver{
              font-size: 14px;
            }
          }
          &__info{
            height: 55px;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding-left: 12px;
            &--price{
              font-weight: bold;
              text-align: right;
              font-size: 20px;

              &::before{
                content: '฿ '
              }
            }
            &--btn{
              font-size: 12px;
              color: #808080;
            }
          }

          &.indetail{
            .transportation__info{
              height: 3.8em;
              padding-left: 20px;
            }
            .transportation__info--price{
              font-size: 18px;
            }
            .transportation__info--btn{
              text-align: right;
              color: #db6969;
              text-decoration: underline;
            }
          }
        }
        .skootar {
          .transportation__info--price,
          .transportation__detail--status{
            color: #00babc;
          }
        }
        .lalamove {
          .transportation__info--price,
          .transportation__detail--status{
            color: #f16622;
          }
        }
        .sentdi {
          .transportation__info--price,
          .transportation__detail--status{
            color: #bc071c;
          }
        }
      }
      #data-register_credit{
        font-weight: 500;
        text-align: right;
        margin-top: 10px;
        span{
          font-weight: 100;
          color : #888;
        }
      }
    }

  }

  .order__options {
    font-size: 12px;
    color: #808080;
  }

  @media only screen and (max-width: 500px) {
    .popup__tabs {
      display: flex;
    }
    li {
      max-width: 25%;
      a {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  @media only screen and (max-width: 992px) {
    .popup {
      // max-height: 90vh;
      border-radius: 6px;
      overflow-y: unset;
      // overflow-y: scroll;
      padding: 25px 20px;

      &__call {
        display: block;
        float: unset;
        text-align: center;
        position: unset;
        margin: 10px 0;
      }

      &__status {
        &--radio {
          position: relative;
          width: 50%;
          text-align: left;

          input[type="radio"] + label {
            width: 100%;
            font-size: $font-size-normal;
          }
        }
      }

      &__note {
        &--list {
          max-height: unset;
          overflow-y: unset;
        }

        &--delete {
          img {
            width: 45%;
          }
        }
      }
      &__delivery{

        margin-top: 20px;

        #data-register_transportation{
          display: block;

          .transportation{
            margin: 10px auto;
            justify-content: space-between;
          }
        }
      }
    }
  }
}