.file_modal, .file_notify {
    position:fixed;
    z-index:999;
    box-shadow:0 0 40px rgba(0,0,0,.2);
    border-radius:4px;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    width:32vw;
    background:rgba(255,255,255,.95);
    display: none;
    min-width:360px;
}
body.d .file_modal, body.d .file_notify {
    background:rgba(25,25,25,.98);
}
.file_notify {
    z-index: 1000;
    padding: 20px 40px;
}
.file_notify.on {
    display: block;
}
.file_modal.hover {
    opacity:.7;
}
.file_modal.hover:after {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    border:2px dashed #000;
    content:'';
    background:rgba(255,255,255,.75);
}
.file_modal .no_uploaded_files {
    padding: 20%;
    width:100%;
    text-align: center;
    letter-spacing: 2px;
    outline: 1px dashed #aaa;
    outline-offset: -25px;
}
.file_modal.hover:before {
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    font-size:22px;
    content:"Drop File to Upload";
    width:100%;
    text-align: center;
    z-index:999;
}
.file_modal .files_head {
    background:#333;
    position: relative;
    color:#fff;
}
body.d .file_modal .files_head {
    background:rgb(35,35,35);
}
.file_modal .files_head h3 {
    display: block;
    margin: 0;
    padding: 15px;
    text-align: center;
}
.files_head input {
    display: none;
}
/*.files_head .browse_file {
    padding:10px;
    margin: 0;
    display: block;
    position: relative;
    color:#fff;
    text-align: center;
    background:rgba(255,255,255,.05);
    font-size: 16px;
    font-weight: lighter;
    text-transform: none;
    cursor: pointer;
}
.files_head .browse_file i {
    margin-right: 10px;
}*/
.files_head>.close {
    background:url('../images/icons/close.svg') no-repeat center / 40%;
    position: absolute;
    right:4px;
    top:4px;
    width:40px;
    height:40px;
    cursor: pointer;
    padding: 0;
    z-index:10;
}
#aio_up .fi span:nth-child(3), #aio_up .fi.multiple span:nth-child(2) {
    display: none;
}
#aio_up .fi.multiple span:nth-child(3) {
    display: inline-block;
}
.files_head .ico.file.browse {
    background:url('../images/icons/browse.svg') no-repeat center;
}
.fup_icon.uploaded_files {
    background:url('../images/icons/uploads.svg') no-repeat center 15px / 45px;
}
.fup_icon.camera_upload {
    background:url('../images/icons/camera.svg') no-repeat center 15px / 45px;
}
.file_modal .files_body {
    max-height:50vh;
    overflow-y:auto;
}
.file_modal .uploaded_files {
    min-height:260px;
    display: flex;
    flex-wrap:wrap;
    align-content:flex-start;
}
#aio_up .f, .uploaded_files>.uploading {
    font-size:12px;
    padding:50px 10px 15px 10px;
    background-image:url('../images/icons/file.svg');
    background-repeat: no-repeat;
    background-size:40px;
    background-position:50% 5px;
    cursor: pointer;
    white-space: nowrap;
    overflow:hidden;
    position: relative;
    flex:0 0 33.3337%;
    max-width:33.3337%;
    height:86px;
    text-align: center;
}
#aio_up .f.gif {
    background-image:url('../images/icons/files/gif.svg');
}
#aio_up .f.txt {
    background-image:url('../images/icons/files/txt.svg');
}
#aio_up .f.zip, #aio_up .f.rar, #aio_up .f.tar {
    background-image:url('../images/icons/files/zip.svg');
}
#aio_up .f.xls {
    background-image:url('../images/icons/files/xls.svg');
}
#aio_up .f.xlsx {
    background-image:url('../images/icons/files/xlsx.svg');
}
#aio_up .f.doc {
    background-image:url('../images/icons/files/doc.svg');
}
#aio_up .f.docx {
    background-image:url('../images/icons/files/docx.svg');
}
#aio_up .f.ppt {
    background-image:url('../images/icons/files/ppt.svg');
}
#aio_up .f.pdf {
    background-image:url('../images/icons/files/pdf.svg');
}
#aio_up .f.mp3 {
    background-image:url('../images/icons/files/mp3.svg');
}
#aio_up .f .name {
    overflow:hidden;
}
#aio_up .f .size, #aio_up .uploading .perc {
    font-size: 10px;
    color:#aaa;
}
#aio_up .f.on {
    background-color:rgba(0,0,0,.1) !important;
}
body.d #aio_up .f.on {
    background-color:rgba(0,0,0,.2) !important;
}
#aio_up .f.new {
    background-color:rgba(73, 146, 255, 0.24) !important;
    animation:new_file linear 1s infinite;
    -webkit-animation:new_file linear 1s infinite;
}
@keyframes new_file {
    0% {background-color:rgba(0, 0, 0, 0)}
    25% {background-color:rgba(73, 146, 255, 0.24)}
    50% {background-color:rgba(73, 146, 255, 0.24)}
    100% {background-color:rgba(0, 0, 0, 0)}
}
@-webkit-keyframes new_file {
    0% {background-color:rgba(0, 0, 0, 0)}
    25% {background-color:rgba(73, 146, 255, 0.24)}
    50% {background-color:rgba(73, 146, 255, 0.24)}
    100% {background-color:rgba(0, 0, 0, 0)}
}
#aio_up .f:after {
    content: '';
    position: absolute;
    background: url(../images/icons/uncheck.svg) no-repeat center;
    width: 20px;
    height: 20px;
    left: 10px;
    top: 10px;
}
#aio_up .f.on:after {
    background: url(../images/icons/check.svg) no-repeat center;
}
.uploaded_files .uploading .progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    outline:1px solid #eee;
    outline-offset: -1px;
    z-index: -1;
}
.uploaded_files .uploading .progress>div {
    height:100%;
    background: #eee;
    transition:1s;
    width:0;
}
.files_actions {
    display: flex;
    border-top:1px solid #eee;
}
body.d .files_actions {
    border-top:1px solid rgb(35,35,35);
}
.files_actions>div, .files_actions>label {
    height:45px;
    margin:0 auto;
    cursor: pointer;
    flex-grow:1;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    text-transform: none;
    font-weight: lighter;
    color: #000;
}
body.d .files_actions>div, body.d .files_actions>label {
    color:#fff;
}
.files_actions>div:hover, .files_actions>label:hover {
    background:rgba(0,0,0,.05)
}
.files_actions .df.disabled {
    opacity:.3;
    pointer-events: none;
}
.files_actions .ico {
    display: inline-block;
    width:22px;
    height:22px;
    margin: 0 6px 0 0;
}
.files_actions .ico.file.select {
    background:url('../images/icons/select.svg') no-repeat center;
}
.files_actions .ico.file.trash {
    background:url('../images/icons/delete.svg') no-repeat center;
}
.files_actions .ico.file.browse {
    background:url('../images/icons/browse.svg') no-repeat center;
}
.aio_fsp {
    /*box-shadow: 0 0 10px rgba(0,0,0,.05) inset;*/
    border-radius: 10px;
    position:relative;
    min-height:40px;
    margin-bottom: 15px;
    border:1px solid #888;
    padding: 10px 10px 0 10px;
}
.empty + .aio_fsp {
    box-shadow: 0 0 1px 1px firebrick inset;
}
td .aio_fsp {
    margin: 0;
}
.aio_fsp>.w>.f, .aio_fp>.f {
    display:block;
    padding:4px 8px;
    border: 1px solid #888;
    border-radius: 4px;
    position: relative;
    margin-right: 15px;
    text-align: center;
}
.aio_fsp>.w {
    display: flex;
    flex-wrap: wrap;
    margin-right: 50px;
}
.aio_fsp>.w>.f {
    flex:0 0 calc(25% - 10px);
    max-width:calc(25% - 10px);
    margin:0 10px 10px 0;
}
/* .aio_fsp>.w>.f:nth-child(4n) {
    margin-right: 0;
} */
.aio_fsp button {
    position: absolute;
    top: -1px;
    right: -1px;
    height: calc(100% + 2px);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 0 !important;
    background:#888;
    color:#fff !important;
    font-size:24px;
    width: 60px;
}
.aio_fp {
    width:100%;
    min-height:40px;
    margin-bottom: 15px;
    border-radius:4px;
    position: relative;
}
.aio_fp>.f {
    display: block;
    margin: 0;
    padding: 8px;
}
.aio_fsp .f>.f, .aio_fp .f>.f {
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
    height: 16px;
}
.aio_fsp .ico.file {
    margin:6px auto;
}
.aio_fp .ico.file {
    height:20px;
    width:20px;
}
.aio_fsp .trash,.aio_fp .trash {
    position:absolute;
    top:5px;
    right: 5px;
    width: 15px;
    height: 15px;
}
.aio_fp>button {
    width:100%;
    height:100%;
}