$font-family-A:"Helvetica Neue",Tahoma,"PingFang SC","Hiragino Sans GB",SimSun,STHeitiSC,sans-serif;


.clearfix {
  &:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    overflow: hidden;
  }
}

.formUploader {
  width: 100%;
  font-family: $font-family-A;
  .field-left {
    float: left;
    max-width: 120px;
    margin-top: 10px;
    line-height: 24px;
    margin-right: 25px;
    font-family: $font-family-A;
    font-size: 14px;
    color: #667580;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
    .left-label {
      line-height: 25px; 
    }
    .pc-sys-bitian-nomal-svg {
      display: inline-block;
      width: 8px;
      height: 10px;
      margin-right: 5px;
    }
  }
  .field-right {
    width: 9999px;
    display: table-cell;
    height: inherit;
    padding-left: 5px;
  }
  .uploader-edit {
    width: 100%;
    /*line-height: 40px;*/
    a {
      text-decoration: none;
      display: inline-block;
      position: relative;
      font-size: 12px;
      padding: 3px 13px;
      margin: 5px 0;
      font-family: $font-family-A;
      background-color: #1687d9;
      line-height: 20px;
      color: #ffffff;
      border-radius: 2px;
      text-align: center;
      min-width: 0;
      box-shadow: 0 1px 2px rgba(0,0,0,.3);
      transition: box-shadow .28s cubic-bezier(0.4,0,0.2,1),background-color .3s;
      cursor: pointer;
      &:hover,
      &:active {
        background-color: #1687d9;
        box-shadow: 0 3px 5px rgba(0,0,0,.3);
        transition: box-shadow .28s cubic-bezier(0.4,0,0.2,1),background-color .3s;
      }
    }
    .base-button-component {
      margin-top: 8px;
      .base-bg-ripple {
        margin-bottom: 0;
      }
      span {
        font-size: 12px;
      }
    }
    p {
      font-size: 12px;
      /*line-height: 20px;*/
      padding: 3px 0;
      color: #acb7bf;
      display: inline-block;
      margin: 0 0 0 5px;
    }
    p.error-message {
      display: block;
      margin-top: 5px;
      color: #cc4763;
    }
    input[type='file'] {
      cursor: pointer;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .uploader-files {
    width: 100%;
    margin-top: 5px;
    ul {
      width: 100%;
    }
    li {
      position: relative;
      box-sizing: border-box;
      width: inherit;
      padding: 5px 5px 0 10px;
      list-style: none;
      border-radius: 2px;
      float: left;
      margin-right: 5px;
      margin-bottom: 5px;
      max-width: 250px;
      min-width: 170px;
      height: 40px;
      background-color: #f5f8fa;
      color: #999999;
      font-size: 12px;
      cursor: pointer;
      padding-left: 35px;
      padding-right: 48px;
      div {
        display: inline-block;
      }
      .filenameBox{
        float: left;
      }
      .file-left {
        width: 30px;
        float: left;
        margin-left: -30px;
        line-height: 0;
      }
      .file-right {
        float: right;
        margin-right: -44px;
        position: absolute;
        right: 48px;
        background-color: #f5f8fa;
      }
      .file-center {
        position: absolute;
        max-width: calc(100% - 60px);
        box-sizing: border-box;
        padding-left: 5px;
        /*padding-right: 10px;*/
        float: left;
        /*max-width: 246px;*/
        min-width: 180px;
        .filenameBox{
          p{
            max-width: 280px;
          }
        }
        p {
          /*max-width: 225px;*/
          margin-top: 0px;
          margin-bottom: 0px;
          color: #667580;
        }
        .file-downIcon{
          display: none;
          padding-left: 10px;
          background-color: #fff;
        }
        .file-downIcon-over{
          margin-left: -30px;
          padding-left: 10px;
          background-color: #fff;
        }
        .file-downIcon-img{
          display: none;
          padding-left: 10px;
          background-color: #fff;
        }
        .file-downIcon-img-over{
          margin-left: -30px;
          padding-left: 10px;
          background-color: #fff;
        }
      }
      .file-icon {
        -moz-transform: scale(0.5);
        -moz-transform-origin: top left;
        display: inline-block;
        zoom: 0.5;
      }
      img {
        width: 30px;
        height: 30px;
        border-radius: 2px;
      }
      p {
        display: inline-block;
        float: left;
        line-height: 20px;
        padding: 5px 0;
      }
      .file-info {
        /**/
        max-width: calc(100% - 32px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .pic-type a {
        width: 100%;
        margin-right: 0px;
        padding: 0px;
        display: inline-block;
        color: #acb7bf;
      }
      .img-download{
        padding-left:0;
      }
      a {
        float: left;
        line-height: 20px;
        // padding: 5px 0;
        text-decoration: none;
        // padding-left: 5px;
      }
      &:hover {
        a {
          /*visibility: visible;*/
          display: inline-block;
          color: #005999;
        }
        p {
          color: #005999;
        }
      }
      .sys-icon-close {
        display: inline-block;
        font-size: 14px;
        float: right;
        margin-top: 8px;
        color: #acb7bf;
        &:hover {
          &:before {
            color: #cc2929;
          }
        }
      }
    }
    .form-uploader-show {
      font-size: 0;
      min-height: 35px;
      max-width: 900px;
      .file-right {
        position: absolute;
        right: 44px;
        background-color: white;
        padding-left: 10px;
      }
      .file-center {
        .show-file-right{
          padding-left: 10px;
          margin-left: -12px;
          background-color: #fff;
        }
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
      }
      li {
        position: relative;
        background-color: #fff;
        max-width: 390px;
        margin: 0 50px 5px 0;
        padding: 0 0px 0 35px;
        height: 32px;
        &:hover {
          background-color: #fff;
          .file-downIcon{
            display: inline-block;
          }
          .file-downIcon-img{
            display: inline-block;
          }

        }
      }
      .file-preview {
        cursor: pointer;
      }
    }
  }
  progress {
    /*width: 120px;*/
    width: 100%;
    padding-right: 14px;
    height: 6px;
    display: inline-block;
    margin: 5px;
    transform: translateY(100%);
    -webkit-appearance: none;
    border: none;
  }

  .form-uploader-edit progress {
      width: 180px;
      padding-right: 0px;
    }

  progress::-webkit-progress-bar {
    background: #fff;
    border-radius: 2px;
    background: #f5f8fa;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3);
  }

  progress::-webkit-progress-value {
    border-radius: 2px;
    background: repeating-linear-gradient(-45deg, #1687d9 0, #1687d9 8px, #96d0fa 0px, #96d0fa 16px);
  }

  .file-sprite,
  .file-aac,
  .file-ape,
  .file-asf,
  .file-avi,
  .file-doc,
  .file-docx,
  .file-exe,
  .file-file,
  .file-flac,
  .file-flv,
  .file-folder,
  .file-folder2,
  .file-gif,
  .file-image,
  .file-jpeg,
  .file-jpg,
  .file-m4a,
  .file-m4v,
  .file-mkv,
  .file-mmap,
  .file-mov,
  .file-mp3,
  .file-mp4,
  .file-mpeg,
  .file-mpg,
  .file-music,
  .file-none,
  .file-ogg,
  .file-pdf,
  .file-pic,
  .file-png,
  .file-ppt,
  .file-pptx,
  .file-rar,
  .file-rm,
  .file-rmvb,
  .file-tif,
  .file-ts,
  .file-txt,
  .file-video,
  .file-wav,
  .file-wma,
  .file-wmv,
  .file-xls,
  .file-xlsx,
  .file-zip {
    background: url(./filetype.png) no-repeat;
    background-repeat: no-repeat;
  }
  .file-aac {
    background-position: 0 -1296px;
    height: 60px;
    width: 60px
  }
  .file-ape {
    background-position: 0 -1416px;
    height: 60px;
    width: 60px
  }
  .file-asf {
    background-position: 0 -876px;
    height: 60px;
    width: 60px
  }
  .file-avi {
    background-position: 0 -1236px;
    height: 60px;
    width: 60px
  }
  .file-doc {
    background-position: 0 -2196px;
    height: 60px;
    width: 60px
  }
  .file-docx {
    background-position: 0 -1536px;
    height: 60px;
    width: 60px
  }
  .file-exe {
    background-position: 0 -1896px;
    height: 60px;
    width: 60px
  }
  .file-file {
    background-position: 0 -192px;
    height: 48px;
    width: 48px
  }
  .file-flac {
    background-position: 0 -1596px;
    height: 60px;
    width: 60px
  }
  .file-flv {
    background-position: 0 -1956px;
    height: 60px;
    width: 60px
  }
  .file-folder {
    background-position: 0 -144px;
    height: 48px;
    width: 48px
  }
  .file-folder2 {
    background-position: 0 -2556px;
    height: 32px;
    width: 46px
  }
  .file-gif {
    background-position: 0 -588px;
    height: 48px;
    width: 48px
  }
  .file-image {
    background-position: 0 -540px;
    height: 48px;
    width: 48px
  }
  .file-jpeg {
    background-position: 0 -384px;
    height: 48px;
    width: 48px
  }
  .file-jpg {
    background-position: 0 -432px;
    height: 48px;
    width: 48px
  }
  .file-m4a {
    background-position: 0 -1776px;
    height: 60px;
    width: 59px
  }
  .file-m4v {
    background-position: 0 -996px;
    height: 60px;
    width: 60px
  }
  .file-mkv {
    background-position: 0 -936px;
    height: 60px;
    width: 60px
  }
  .file-mmap {
    background-position: 0 -240px;
    height: 48px;
    width: 48px
  }
  .file-mov {
    background-position: 0 -816px;
    height: 60px;
    width: 60px
  }
  .file-mp3 {
    background-position: 0 -1476px;
    height: 60px;
    width: 60px
  }
  .file-mp4 {
    background-position: 0 -1056px;
    height: 60px;
    width: 60px
  }
  .file-mpeg {
    background-position: 0 -480px;
    height: 60px;
    width: 60px
  }
  .file-mpg {
    background-position: 0 -636px;
    height: 60px;
    width: 60px
  }
  .file-music {
    background-position: 0 -48px;
    height: 48px;
    width: 48px
  }
  .file-none {
    background-position: 0 -2016px;
    height: 60px;
    width: 60px
  }
  .file-ogg {
    background-position: 0 -1356px;
    height: 60px;
    width: 60px
  }
  .file-pdf {
    background-position: 0 -2316px;
    height: 60px;
    width: 60px
  }
  .file-pic {
    background-position: 0 0;
    height: 48px;
    width: 48px
  }
  .file-png {
    background-position: 0 -288px;
    height: 48px;
    width: 48px
  }
  .file-ppt {
    background-position: 0 -2256px;
    height: 60px;
    width: 60px
  }
  .file-pptx {
    background-position: 0 -1656px;
    height: 60px;
    width: 60px
  }
  .file-rar {
    background-position: 0 -2436px;
    height: 60px;
    width: 60px
  }
  .file-rm {
    background-position: 0 -2076px;
    height: 60px;
    width: 60px
  }
  .file-rmvb {
    background-position: 0 -696px;
    height: 60px;
    width: 60px
  }
  .file-tif {
    background-position: 0 -336px;
    height: 48px;
    width: 48px
  }
  .file-ts {
    background-position: 0 -1836px;
    height: 60px;
    width: 60px
  }
  .file-txt {
    background-position: 0 -2496px;
    height: 60px;
    width: 60px
  }
  .file-video {
    background-position: 0 -96px;
    height: 48px;
    width: 48px
  }
  .file-wav {
    background-position: 0 -1176px;
    height: 60px;
    width: 60px
  }
  .file-wma {
    background-position: 0 -1116px;
    height: 60px;
    width: 60px
  }
  .file-wmv {
    background-position: 0 -756px;
    height: 60px;
    width: 60px
  }
  .file-xls {
    background-position: 0 -2136px;
    height: 60px;
    width: 60px
  }
  .file-xlsx {
    background-position: 0 -1716px;
    height: 60px;
    width: 60px
  }
  .file-zip {
    background-position: 0 -2376px;
    height: 60px;
    width: 60px
  }
}
p.error-message {
  font-size: 12px;
  margin: 0px;
  display: block;
  color: #cc4763;
}
#field-right .uploader-edit {
  margin-top: 0;
  margin-bottom: -5px;
}
.show-item .formUploader .field-left {
  margin-top: 3px;
}
.formpart .fields .show-item{
  padding: 10px 0;
}