#makesuccess {
    position: fixed;
    min-width: 300px;
    height: 50px;
    left: 50%;
    top: -65px;
    margin-left: -150px;
    z-index: 10001;
    text-align: center;
}

#makesuccess div {
    display: inline-block;
    height: 36px;
    background: #2bc155;
    color: #fff;
    border-radius: 5px;
    font-size: 13px;
    line-height: 36px;
    padding: 0 12px;
}


#makesuccess div i {
    font-size: 16px;
    vertical-align: middle;
}

#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1000000;
    display: none;
}

.sk-three-bounce {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.sk-three-bounce .sk-child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #c6000b;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}

.sk-three-bounce .sk-bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.sk-three-bounce .sk-bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-three-bounce {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-three-bounce {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


.widthp100 {
    width:100%;
}

/*占比*/
.wp10 {
    width:10%;
  }
  .wp20 {
    width:20%;
  }
  .wp30 {
    width:30%;
  }
  .wp40 {
    width:40%;
  }
  .wp50 {
    width:50%;
  }
  .wp60 {
    width:60%;
  }
  .wp70 {
    width:70%;
  }
  .wp80 {
    width:80%;
  }
  .wp90 {
    width:90%;
  }
  .wp100 {
    width:100%;
  }

.width60 {
    width:60px;
}

.width100 {
    width:100px;
}

.width120 {
    width:120px;
}

.width150 {
    width:150px;
}

.width180 {
    width:180px;
}

.width200 {
    width:200px;
}

.width300 {
    width:300px;
}

.margin0 {
    margin:0;
}

.padding0 {
    padding:0;
}

.fa-disabled {
    color:#999;
}

.card-topline {
    border:solid 1px red;
}


.datemask {
    position: absolute;
    z-index: 100000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display:none;
}

.upxlsfile {
    width: 100%;
    display: flex;
  }

  .upxlsfile .xlsfile {
    position: relative;
    float: left;
    width:120px;
    height: 100px;
    border:solid 1px #eaeaea;
    border-radius: 3px;
    text-align: center;
    margin:0px 25px 15px 0;
  }

  .upxlsfile .xlsfile .upi {
    position: absolute;
    left:35px;
    top:20px;
    width:30px;
    height: 30px;
    background: url(/assets/images/upload.png) 0 0 no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }

  .upxlsfile .xlsfile .upn {
    position: absolute;
    left:20px;
    top:55px;
    height: 30px;
    width:60px;
    text-align: center;
    font-style: normal;
    text-align: center;
    cursor: pointer;
  }

  .upxlsfile .uploadXlsFile {
    position:absolute;
    left:0;
    top:0;
    z-index: 10;
    width:100px;
    height:100px;
    opacity: 0;
    cursor: pointer;
  }

  .upxlsfile .input-group {
    height:36px;
    vertical-align: middle;
  }

  .upxlsfile .input-group {
    height:36px;
    vertical-align: middle;
    margin-top:32px;
  }

  /*
   * 上传图片
   */
  .photosingle {
      width:100%;height:50px;
  }

  .photosingle .photo {
      float:left;position: relative; width:50px;height:50px;border:solid 1px #eaeaea;border-radius: 3px;text-align: center;
  }

.photosingle .photo .upi {
    position: absolute;left:15px;top:6px;padding:0;width:20px;height: 20px;background: url(/assets/images/upload.png) 0 0 no-repeat;background-size: 100% 100%;cursor: pointer;
}

.photosingle .photo .upn {
    position: absolute;padding:0;width:50px;text-align: center;font-size:12px;bottom:3px;left:0;
}

.photosingle .photo .uploadPicButton {
    position: absolute;left:0;top:0;right:0;bottom:0; opacity: 0;cursor: pointer
}

.photosingle .photo .uploadPicButton .uploadPicFile {
    width:100%;height: 100%
}

.photosingle .preview {
    float:left;display:none;width:50px;height:50px;margin-left:10px;border:solid 1px #eaeaea;border-radius: 3px;position: relative
}

.photosingle .preview img {
    width:48px;
    height:48px;
    overflow: hidden;
}

.photosingle .preview span {
    position:absolute;display:block;
    top:-6px; right:-6px; width:18px; height: 18px; border-radius: 18px; background:#FFF url(/assets/images/del.png) 0 0 no-repeat; background-size: 100% 100%;
    cursor: pointer;
}

.photosingle .tips {
    float:left;margin-top:8px;margin-left:10px;
}

.photosingle .tips .font12 {
    font-size:12px;
}

.photosingleactive .preview {
    display: block;
}

/*
   * 上传附件
   */
.attachedsingle {
    width:100%;height:50px;
}

.attachedsingle .attached {
    float:left;position: relative; width:50px;height:50px;border:solid 1px #eaeaea;border-radius: 3px;text-align: center;
}

.attachedsingle .attached .upi {
    position: absolute;left:15px;top:6px;padding:0;width:20px;height: 20px;background: url(/assets/images/upload.png) 0 0 no-repeat;background-size: 100% 100%;cursor: pointer;
}

.attachedsingle .attached .upn {
    position: absolute;padding:0;width:50px;text-align: center;font-size:12px;bottom:3px;left:0;
}

.attachedsingle .attached .uploadAttachedButton {
    position: absolute;left:0;top:0;right:0;bottom:0; opacity: 0;cursor: pointer
}

.attachedsingle .attached .uploadAttachedButton .uploadAttachedFile {
    width:100%;height: 100%
}

.attachedsingle .preview {
    float:left;display:none;width:50px;height:50px;margin-left:10px;border:solid 1px #eaeaea;border-radius: 3px;position: relative
}

.attachedsingle .preview img {
    width:48px;
    height:48px;
    overflow: hidden;
}

.attachedsingle .preview span {
    position:absolute;display:block;
    top:-6px; right:-6px; width:18px; height: 18px; border-radius: 18px; background:#FFF url(/assets/images/del.png) 0 0 no-repeat; background-size: 100% 100%;
    cursor: pointer;
}

.attachedsingle .tips {
    float:left;margin-top:8px;margin-left:10px;
}

.attachedsingle .tips .font12 {
    font-size:12px;
}

.attachedsingleactive .preview {
    display: block;
}

/**
 * 上传的报销文件列表
 */
.attachedlist {
    margin:10px auto 0 auto;
}

.attachedlist .item {
    position: relative;
    display: flex;
    width:100%;
    height:50px;
    border:solid 1px #eaeaea;
    margin: 10px auto 0 auto;
    border-radius: 5px;
    overflow: hidden;
}

.attachedlist .item img {
    width:30px;
    height: 30px;
    margin:10px 0 0 10px;
    cursor: pointer;
}

.attachedlist .item input {
    position: absolute;
    left:50px;
    top:0;
    right:100px;
    bottom: 0;
    border:none;
    height: 50px;
}

.attachedlist .item .preview {
    position: absolute;
    right:80px;
    top:0;
    bottom: 0;
    height: 50px;
    text-align: center;
    width: 80px;
    line-height: 50px;
    color:#fff;
    background:#d1d1d1;
    display: block;
    cursor: pointer;
    background:#c6000b;
    border-right: solid 1px #FFF;
}

.attachedlist .item .del {
    position: absolute;
    right:0;
    top:0;
    bottom: 0;
    height: 50px;
    text-align: center;
    width: 80px;
    line-height: 50px;
    color:#fff;
    background:#d1d1d1;
    display: block;
    cursor: pointer;
    background:#c6000b
}

.tiperror {
    position: relative;
    padding:8px 15px 8px 50px;
    background:#c6000b;
    border-radius: 5px;
    color:#FFF;
    margin-bottom: 25px;
}

.tiperror .error {
    position: absolute;
    font-size:24px;
    left:10px;
    top:16px;
}

.tiperror .time {
    font-size:12px;
}


.detailMaterialList {

}

.detailMaterialList .item {
    position: relative;
    float: left;
    display: flex;
    width:48%;
    height:50px;
    border:solid 1px #eaeaea;
    margin: 0px auto 10px auto;
    border-radius: 5px;
    overflow: hidden;
    float: left;
    margin-right: 4%;
}

.detailMaterialList .item:nth-child(2n){
    margin-right: 0%;
}

.detailMaterialList .item img {
    width:30px;
    height: 30px;
    margin:10px 0 0 10px;
    cursor: pointer;
}

.detailMaterialList .item .name {
    position: absolute;
    left:50px;
    top:0;
    right:100px;
    bottom: 0;
    border:none;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
}

.detailMaterialList .item .materialPreview {
    position: absolute;
    right:80px;
    top:0;
    bottom: 0;
    height: 50px;
    text-align: center;
    width: 80px;
    line-height: 50px;
    color:#fff;
    background:#d1d1d1;
    display: block;
    cursor: pointer;
    background:#c6000b;
    border-right: solid 1px #FFF;
    z-index: 1;
}

.detailMaterialList .item .materialDownload {
    position: absolute;
    right:0;
    top:0;
    bottom: 0;
    height: 50px;
    text-align: center;
    width: 80px;
    line-height: 50px;
    color:#fff;
    background:#d1d1d1;
    display: block;
    cursor: pointer;
    background:#c6000b;
    z-index: 1;
}

.detailMaterialList .clearfix {
    clear:both;
}

.dataele .disableded {
    background:#f4f4f4;
}

.date-modal .mask {
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    z-index: 10000;
    background:#000;
    opacity: 0.6;
}

.date-modal .dialog {
    width:500px;
    height:360px;
    position: fixed;
    left:50%;
    top:50%;
    margin-left:-250px;
    margin-top:-180px;
    background:#FFF;
    z-index: 10001;
}

.date-modal .dialog .title {
    width:450px;
    height:100px;
    line-height: 100px;
    margin: 0 auto;
    font-size:16px;
    font-weight: bold;
}

.date-modal .dialog .date {
    width:450px;
    margin:0px auto 0 auto;
}

.date-modal .dialog .date input {
    width:100%;
    height:40px;
}

.date-modal .dialog .bottom {
    width:450px;
    margin:100px auto 0 auto;
}

.date-modal .dialog .bottom .cancel {
    width:100px;
    height:40px;
    border:solid 1px #e5e5e5;
    line-height: 40px;
    text-align: center;
    float: right;
    cursor: pointer;
}

.date-modal .dialog .bottom .confirm {
    width:100px;
    height:40px;
    border:solid 1px #11a1fd;
    line-height: 40px;
    text-align: center;
    float: right;
    margin-left: 10px;
    cursor: pointer;
    background: #11a1fd;
    color:#FFF;
}

.date-modal .dialog .bottom  .clear {
    clear:both;
}

.upload-modal .mask {
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    z-index: 10000;
    background:#000;
    opacity: 0.6;
}

.upload-modal .dialog {
    width:800px;
    height:auto;
    position: fixed;
    left:50%;
    top:200px;
    height:600px;
    margin-left:-400px;
    background:#FFF;
    z-index: 10001;
}

.upload-modal .dialog .title {
    width:750px;
    height:60px;
    line-height: 60px;
    margin: 0 auto;
    font-size:16px;
    font-weight: bold;
}

.upload-modal .dialog .subname {
    width:750px;
    margin: 0 auto;
    display: flex;
}

.upload-modal .dialog .subname .uploader {
    position: relative;
    display: inline-block;
    overflow:hidden;
}

.upload-modal .dialog .subname .uploader .file {
    position: absolute;
    left:0;
    top:0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}

.upload-modal .dialog .list {
    padding:0 25px;
    height:400px;
    margin:15px auto 0 auto;
    overflow-y: auto;
}

.upload-modal .dialog .bottom {
    width:750px;
    margin:20px auto 0 auto;
}

.upload-modal .dialog .bottom .cancel {
    width:100px;
    height:40px;
    border:solid 1px #e5e5e5;
    line-height: 40px;
    text-align: center;
    float: right;
    cursor: pointer;
}

.upload-modal .dialog .bottom .confirm {
    width:100px;
    height:40px;
    border:solid 1px #11a1fd;
    line-height: 40px;
    text-align: center;
    float: right;
    margin-left: 10px;
    cursor: pointer;
    background: #11a1fd;
    color:#FFF;
}

.upload-modal .dialog .bottom  .clear {
    clear:both;
}

.uploadertip-modal .mask {
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    z-index: 10010;
    background:#000;
    opacity: 0.6;
}

.uploadertip-modal .uploadertip {
    position: fixed;
    left:50%;
    top:50%;
    z-index: 10011;
    background:#fff;
    width:220px;
    height:60px;
    border-radius: 5px;
    margin-left: -110px;
    margin-top: -30px;
    line-height: 60px;
    text-align: center;
}

.uploadertip-modal .uploadertip img {
    width:20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}


.import-modal .mask {
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    z-index: 10000;
    background:#000;
    opacity: 0.6;
}

.import-modal .dialog {
    width:800px;
    height:auto;
    position: fixed;
    left:50%;
    top:200px;
    height:600px;
    margin-left:-400px;
    background:#FFF;
    z-index: 10001;
}

.import-modal .dialog .title {
    width:750px;
    height:60px;
    line-height: 60px;
    margin: 0 auto;
    font-size:16px;
    font-weight: bold;
}

.import-modal .dialog .subname {
    width:750px;
    margin: 0 auto;
    display: flex;
}

.import-modal .dialog .subname .uploader {
    position: relative;
    display: inline-block;
    overflow:hidden;
}

.import-modal .dialog .subname .uploader .file {
    position: absolute;
    left:0;
    top:0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}

.import-modal .dialog .list {
    padding:0 25px;
    height:400px;
    margin:15px auto 0 auto;
    overflow-y: auto;
}

.import-modal .dialog .bottom {
    width:750px;
    margin:20px auto 0 auto;
}

.import-modal .dialog .bottom .cancel {
    width:100px;
    height:40px;
    border:solid 1px #e5e5e5;
    line-height: 40px;
    text-align: center;
    float: right;
    cursor: pointer;
}

.import-modal .dialog .bottom .confirm {
    width:100px;
    height:40px;
    border:solid 1px #11a1fd;
    line-height: 40px;
    text-align: center;
    float: right;
    margin-left: 10px;
    cursor: pointer;
    background: #11a1fd;
    color:#FFF;
}

.import-modal .dialog .bottom  .clear {
    clear:both;
}

.newuploader {
    float: left;
    position: relative;
    display: inline-block;
    overflow:hidden;
}

.newdowner {
    display: inline-block;
    float: left;
}

.newuploader .file {
    position: absolute;
    left:0;
    top:0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}

.carduser {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:#edf6ff;
    border-radius: 6px;
    overflow: hidden;
}

.carduser .inner {
    position: relative;
    width:100%;
    height: 100%;
}

.carduser .userhead {
    position: absolute;
    left:0;
    top:0;
    right:0;
    height:40px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    display: flex;
}

.carduser .userhead .item {
    width:25%;
    height: 40px;
    color:#333;
    font-size:16px;
    cursor: pointer;
}

.carduser .userhead .active {
    background:#00acee;
    color:#FFF;
    font-size:16px;
}

.carduser .userlist {
    position: absolute;
    left:0;
    top:40px;
    right:0;
    bottom: 0;
    overflow-y: auto;
    overflow-x:hidden;
    padding: 0 0 20px 0;
}

.carduser .userlist .user {
    position: relative;
    float:left;
    width:206px;
    margin: 10px 0 0 10px;
    border-bottom: solid 1px #fff;
    padding:10px 10px;
    border-radius: 5px;
    cursor: pointer;
    background: #FFF;
}

.carduser .userlist .user:nth-child(5n){

}

.carduser .userlist .user .avator {
    position: absolute;
    width:30px;
    height:37px;
    right:35px;
    top:12px;
}

.carduser .userlist .user .avator img {
    width:30px;
    height:37px;
    border-radius: 3px;
}

.carduser .userlist .user .serial {
    background:#def6ff;
    position: absolute;
    right:0;
    top:0;
    padding:3px 10px;
    border-bottom-left-radius: 8px;
    color:#333;
    font-weight: bold;
}



.carduser .userlist .user .name {
    font-size:16px;
    font-weight: bold;
}

.carduser .userlist .user .name span {
    margin-right: 10px;
}

.carduser .userlist .user .inf {
    font-size:11px;
    color:#666;
}

.carduser .userlist .active {
    background: #00acee;
    border-bottom: solid 1px #00acee;
}

.carduser .userlist .active .name {
    color:#FFF
}

.carduser .userlist .active .inf {
    color:#FFF
}

/*
.carduser .userlist .user:hover {
    background: #00acee;
    border-bottom: solid 1px #00acee;
}

.carduser .userlist .user:hover .name {
    color:#FFF
}

.carduser .userlist .user:hover .inf {
    color:#FFF
}

.carduser .userlist .user:hover .serial {
    background:#FFF;
    color:#00acee;
    font-weight: bold;
}*/

.cardpreview {
    position: absolute;
    top:0;
    right:0;
    left:280px;
    bottom: 0;
    background:#f4f4f4;
    border-radius: 6px;
    overflow: hidden;
}

.cardpreview .inner {
    position: relative;
    width:100%;
    height: 100%;
}

.cardpreview .prevhead {
    position: absolute;
    left:0;
    top:0;
    height:40px;
    right:0;
    background:#07a8ff;
    color:#FFF;
    text-align: center;
    line-height: 40px;
    font-size:16px;
    font-weight: bold;
}


.stat-tips {
    background:#F6F6F6;
    border-radius: 5px;
    padding:20px;
    margin-top:15px;
    border:solid 1px #e5e5e5;
}

.stat-tips span {
    font-size:14px;
    color:#333;
}

.stat-tips .info {
    font-size:14px;
    color:#333;
}


.display-none {
    display: none;
}


/*开放*/
.usertrain-wrapper .title {
    width:100%;
    height:100px;
    background:#1a202c;
    color:#FFF;
    font-weight: bold;
    line-height: 100px;
    text-align: center;
    font-size:20px;
}

.usertrain-wrapper .content {
    width:80%;
    margin:0 auto;
    padding:100px 0;
}

.opendaylist {
    display: block;
}

.opendaylist .openday {
    position: relative;
    display: inline-block;
    width:160px;
    height:40px;
    border:solid 1px #d1d1d1;
    border-radius: 3px;
    margin-right: 10px;
    margin-bottom: 8px;
    vertical-align: middle;
    line-height: 40px;
    text-indent: 10px;
    overflow: hidden;
}

.opendaylist button {
}

.opendaylist .openday span {
    display: block;
    position:absolute;
    right:0;
    top:0;
    bottom: 0;
    width:50px;
    background:#f2f2f2;
    border-left: solid 1px #d1d1d1;
    text-align: center;
    text-indent: 0;
    cursor: pointer;
}

.openday-modal {
    display: none;
}

.openday-modal .mask {
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    background:#000;
    opacity: 0.6;
    z-index: 1000;
}

.openday-modal .openday {
    position: fixed;
    left:50%;
    top:50%;
    right:0;
    width:450px;
    height:290px;
    margin-top: -180px;
    margin-left: -225px;
    background:#FFF;
    z-index: 1001;
    border-radius: 5px;
    overflow: hidden;
}

.openday-modal .openday .title {
    height:50px;
    border-bottom: solid 1px #d1d1d1;
    font-size:16px;
    line-height: 50px;
    padding:0 15px
}

.openday-modal .openday .content {
    padding:50px 20px;
}

.openday-modal .openday .bottom {
    height:50px;
    border-top: solid 1px #d1d1d1;
    padding:15px 20px 15px 0;
    text-align: right;
}