.rp-upload {
  .rp-upload-main {
    > div {
      height: 100%;
      vertical-align: middle;
    }
    .rp-upload-left {
      padding: 0;
      .rp-drop-file {
        border: 1px dashed #ccc;
        height: 100%;
        display: inline-block;
        width: 100%;
        text-align: center;
        line-height: 110px;
      }
      .rp-list-image {
        position: relative;
        .owl-controls {
          .owl-next,
          .owl-prev {
            background: transparent;
            zoom: normal;
            position: absolute;
            top: 50%;
            margin: 0;
            padding: 0;
            height: 100%;
            line-height: 110px;
            .translate(0, -50%);
            .border-radius(0);
            .opacity(1);
            i {
              background: @brand-primary;
              color: #fff;
              display: inline-block;
              width: 36px;
              line-height: 36px;
              text-align: center;
              .transition(all .4s ease 0s);
              &:before {
                font-size: 20px;
                .translate(0, 4px);
              }
              &:hover {
                background: @secondary-color;
              }
            }
          }
          .owl-prev {
            left: 0;
          }
          .owl-next {
            right: -1px;
          }
        }
      }
      .owl-item {
        cursor: move;
        padding-left: 6px;
        img {
          width: 100%;
          height: 110px;
        }
        i {
          font-size: 20px;
          line-height: 36px;
          text-align: center;
          position: absolute;
          top: 10px;
          right: 10px;
          color: #ebebeb;
          border: 1px solid #ebebeb;
          border-radius: 3px;
          width: 36px;
          height: 36px;
          .transition (all 0.4s ease);
          &:hover {
            cursor: pointer;
            color: #fff;
            background-color: @brand-primary;
          }
          &.success {
            right: 0;
            left: auto !important;
            top: 20px !important;
            color: @secondary-color !important;
            cursor: initial !important;
            .opacity(1) !important;
          }
          &.item-featured {
            top: 20px !important;
            left: 20px !important;
            color: @secondary-color !important;
            cursor: initial !important;
            background: #fff;
            padding: 3px 12px;
            .transition(all .4s ease .4s);
            .opacity(1) !important;
            .translate(-4px, -9px);
          }
        }
        &:first-child {
          padding-left: 0;
        }
        &:last-child {
          padding-right: 0;
        }
        .item-image {
        }
      }
      &:after {
        clear: both;
        content: '';
        display: table;
      }
    }
    .rp-upload-right {
      background: #ebebeb;
      line-height: 120px;
      text-align: center;
      width: 23%;
      float: right;
      .btn-upload {
        i {
          background: #fff;
          cursor: pointer;
          display: inline-block;
          text-align: center;
          width: 30px;
          height: 30px;
          line-height: 30px;
          .border-radius(50%);
          &:before {
            font-size: 23px;
            color: #ebebeb;
            font-weight: 600;
            .transition(all .4s ease 0s);
          }
          &:hover {
            &:before {
              color: @secondary-color;
            }
          }
        }
      }
    }
  }
  .rp-upload-action {
    &:after {
      clear: both;
      content: '';
      display: table;
    }
  }
  .rp-button {
    float: left;
  }
  .process-upload-media {
    display: inline-block;
    line-height: 24px;
    padding: 10px;
    margin-top: 25px;
  }
  &.slider {
    .rp-upload-main {
      border: 1px solid @border-color;
      padding: 15px;
      height: 145px;
      position: relative;
    }
    .upload-show-more {
      display: none;
      position: absolute;
      bottom: 0;
      font-size: 20px;
      left: 38%;
      cursor: pointer;
      .translate(-38%, 9px);
      &:hover {
        color: @secondary-color;
      }
    }
    .rp-upload-left {
      &.upload-show-box-more {
        position: relative;
        width: 100%;
        .owl-wrapper-outer {
          overflow: visible !important;
        }
        .owl-wrapper {
          max-width: 660px !important;
          z-index: 9999;
          background: #fff;
          padding: 25px 30px;
          .owl-item {
            padding: 0 !important;
            margin: 5px !important;
          }
        }
        .upload-close-more {
          position: absolute;
          top: 7px;
          right: 10px;
          color: #3a2323;
          font-size: 22px;
          cursor: pointer;
          .transition(all .4s ease 0s);
          &:hover {
            color: @secondary-color;
          }
        }
      }
    }
    .notice {
      display: table;
      font-style: italic;
      padding: 15px 0 0;
    }
  }
  &.normal {
    .rp-upload-thumbnail {
      border: 1px solid @border-color;
      padding: 5px;
      display: table;
      img {
        width: 100%;
      }
    }
    .notice {
      display: inline-block;
      font-size: 14px;
      line-height: 26px;
      margin-bottom: -3px;
    }
  }
}

@media (max-width: 767px) {
  .rp-upload {
    .rp-upload-main {
      .rp-upload-right {
        background: transparent;
      }
    }
  }
}