@import "variables";
.view-payment-form {
  .block-alert {
    .jc-bs3-container {
      width: 100%;
      .jc-bs3-row {
        margin: auto;
        width: 100%;
        .jconfirm-box-container {
          width: 22%;
          transform: translateX(45%)!important;
          .jconfirm-box {
            height: 150px;
            padding: 20px;
            position: relative;
            overflow: unset;
            .jconfirm-content-pane {
              height: 100% !important;
              margin-bottom: 0;
              .jconfirm-content {
                height: 100%;
                position: relative;
                & > div {
                  position: absolute;
                  width: 100%;
                  top: 50%;
                  left: 0;
                  transform: translateY(-50%);
                  .wrapper-alert {
                    width: 100%;
                    display: flex;
                    flex-flow: column wrap;
                    align-items: flex-start;
                    padding-left: 80px;
                    span.title-box {
                      color: #FB646F;
                      font-size: 20px;
                      font-weight: 600;
                      display: inline-block;
                      margin-bottom: 10px;
                    }
                    span.content-box {
                      color: #666666;
                      font-size: 16px;
                    }
                  }
                  i.icon-nb-hand {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%) rotate(45deg);
                    color: #FB646F;
                    font-size: 56px;
                  }
                }
              }
            }
            .jconfirm-buttons {
              position: absolute;
              top: 50%;
              right: -21px;
              transform: translateY(-50%);
              width: 45px;
              height: 45px;
              button {
                border-radius: 50%;
                width: 45px;
                height: 45px;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                i {
                  font-size: 16px;
                }
              }
            }
          }
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
            width: 100%;
            margin: auto;
          }
          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) {
            width: 100%;
            margin: auto;
          }
          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            width: 60%;
            margin: auto;
          }
          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            width: 40%;
          }
          @media (min-width: @screen-md-min)  and (max-width: @screen-md-max) { // 992 ~ 1200
            width: 36%;
          }
        }
      }
    }
  }
  .form-select-payment {
    width: 30%;
    margin: 50px auto;
    border: 1px solid #999999;
    padding: 30px;
    .form-input-info-header {
      width: 100%;
      padding: 10px 30px;
      h4 {
        text-align: center;
        text-transform: uppercase;
      }
    }
    .form-input-info-body {
      width: 100%;
      padding: 30px;
      .list-folder-payment {
        list-style: none;
        margin: 0;
        li {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin: 0 0 15px 0;
          label {
            margin: 0 0 0 15px;
          }
        }
      }
    }
    .form-input-info-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .btn-close-modal {
        margin-right: 20px;
        padding: 6px 12px;
      }
      .btn-cancel {
        padding: 6px 12px;
        text-decoration: none;
        background-color: #ff9381;
        color: #ffffff;
        margin-right: 10px;
        border-radius: 4px;
        transition: 250ms all ease-in-out;
        border: 0.5px solid #ff9381;
        &:hover {
          background-color: #ff593d;
        }
      }
    }
  }
}