/*
FILE FORMAT ICONS
by Greg Schoppe (http://gschoppe.com)
USAGE: include FontAwesome on page, as shown on http://fontawesome.io
       then include this css file, and target links by adding the link-icon
       class.  Note: try to avoid or manually label links to websites, as that
       detection code is necessarily janky. when in doubt, just end all external
       links with a trailing slash (/), a query string (?), or a link target (#)
*/

.divUploadingAudio {
    display: none;
    position: fixed;
    height: 100%;
    vertical-align: middle;
    padding-top: 35vh;
    width: 100%;
    bottom: 5px;
    left: 1px;
    z-index: 999999999;
    margin: 0 !important;
    direction: ltr !important;
    pointer-events: none;
    background-color: #b1b1b1;
}


.divUploading {
    display: none;
    position: fixed;
    visibility: visible !important;
    height: 30px;
    width: 100%;
    bottom: 5px;
    left: 1px;
    z-index: 999999999;
    margin: 0 !important;
    direction: ltr !important;
}

.divUploadingInner {
    display: block;
    position: relative;
    height: 30px;
    background-color: gray;
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.divUploadPercent {
    display: block;
    position: relative;
    height: 30px;
    background-color: green;
    width: 0;
}



.divUploadPercent_Shadow {
    display: block;
    position: relative;
    height: 26px;
    background-color: green;
    width: 100%;
}



.DeleteBTN:before {
    content: "\f00d";
    color: white;
}

.DeleteBTN {
    background-color: red;
    display: block !important;
    float: left !important;
    width: 25px;
    max-width: 25px;
    max-height: 25px;
    height: 25px;
    font-family: FontAwesome !important;
    font: normal normal normal 22px/1 FontAwesome !important;
    cursor: pointer !important;
    font-size: 30px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}

.link-icon {
    float: left;
}

.divUploaderBTNS {
    margin-left: 5px !important;
    margin-right: 5px !important;
    display: block;
    font-size: 30px !important;
    line-height: 35px !important;
    height: 40px !important;
}

.Files-Parent {
    border: 1px solid #aeaeae;
    /*display:none !important;
    visibility: hidden !important;*/
}

.files-Container {
    display: block !important;
}

.divUploaderBTNS a {
    display: inline-block;
    margin: 5px !important;
    cursor: pointer !important;
}


.divDeleteFile div {
    text-align: center !important;
    margin-top: 40vh !important;
    display: block;
}

.divDeleteFile {
    display: none;
    background-color: white;
    width: 100% !important;
    z-index: 9999;
    position: fixed;
    top: 1px;
    left: 1px;
    max-height: 100%;
    height: 100% !important;
}


.files_ul {
    display: block !important;
    list-style: none;
    padding: 5px !important;
}

    .files_ul a {
        text-decoration: none;
        font-size: 13px;
        line-height: 20px !important;
        color: black;
        height: 75px;
        overflow: hidden;
    }

.files_li {
    direction: ltr !important;
    display: inline-grid !important;
    position: relative;
    margin: 5px;
    padding: 0;
    text-align: center !important;
    max-width: 100px;
    width: 100px;
    border: 1px solid #aeaeae;
    vertical-align: top !important;
}

    .files_li:hover {
        background-color: #fbffee;
    }

.files_ul .link-icon {
    cursor: pointer;
}

    .files_ul .link-icon:before {
        content: "\f016"; /* generic file icon */
        display: block;
        font-family: FontAwesome !important;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 30px;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
    }

.files_ul div[tag$=".txt"].link-icon:before,
.files_ul a.link-icon.link-text[href]:before {
    content: "\f15c"; /*Text*/
    color: #9d91e8;
}

.files_ul div[tag$=".pdf"].link-icon:before,
.files_ul a.link-icon.link-pdf[href]:before {
    content: "\f1c1"; /*PDF*/
    color: #E14045;
}

.files_ul div[tag$=".doc"].link-icon:before,
.files_ul div[tag$=".docx"].link-icon:before,
.files_ul a.link-icon.link-word[href]:before {
    content: "\f1c2"; /*Word*/
    color: #2b57d3;
}

.files_ul div[tag$=".xls"].link-icon:before,
.files_ul div[tag$=".xlsx"].link-icon:before,
.files_ul a.link-icon.link-excel[href]:before {
    content: "\f1c3"; /*Excel*/
    color: #197e3a;
}

.files_ul div[tag$=".ppt"].link-icon:before,
.files_ul div[tag$=".pptx"].link-icon:before,
.files_ul div[tag$=".pps"].link-icon:before,
.files_ul div[tag$=".ppsx"].link-icon:before,
.files_ul a.link-icon.link-powerpoint[href]:before {
    content: "\f1c4"; /*Powerpoint*/
    color: #f64016;
}

.files_ul div[tag$=".gif"].link-icon:before,
.files_ul div[tag$=".jpg"].link-icon:before,
.files_ul div[tag$=".jpeg"].link-icon:before,
.files_ul div[tag$=".png"].link-icon:before,
.files_ul div[tag$=".bmp"].link-icon:before,
.files_ul div[tag$=".tif"].link-icon:before,
.files_ul a.link-icon.link-image[href]:before {
    content: "\f1c5"; /*Image*/
    color: #77dfe2;
}

.files_ul div[tag$=".zip"].link-icon:before,
.files_ul div[tag$=".zipx"].link-icon:before,
.files_ul div[tag$=".rar"].link-icon:before,
.files_ul div[tag$=".tar"].link-icon:before,
.files_ul div[tag$=".gz"].link-icon:before,
.files_ul div[tag$=".dmg"].link-icon:before,
.files_ul div[tag$=".iso"].link-icon:before,
.files_ul a.link-icon.link-archive[href]:before {
    content: "\f1c6"; /*Archive*/
    color: #975319;
}

.files_ul div[tag$=".wav"].link-icon:before,
.files_ul div[tag$=".mp3"].link-icon:before,
.files_ul div[tag$=".fla"].link-icon:before,
.files_ul div[tag$=".flac"].link-icon:before,
.files_ul div[tag$=".ra"].link-icon:before,
.files_ul div[tag$=".rma"].link-icon:before,
.files_ul div[tag$=".aif"].link-icon:before,
.files_ul div[tag$=".aiff"].link-icon:before,
.files_ul div[tag$=".aa"].link-icon:before,
.files_ul div[tag$=".aac"].link-icon:before,
.files_ul div[tag$=".aax"].link-icon:before,
.files_ul div[tag$=".ac3"].link-icon:before,
.files_ul div[tag$=".au"].link-icon:before,
.files_ul div[tag$=".ogg"].link-icon:before,
.files_ul div[tag$=".avr"].link-icon:before,
.files_ul div[tag$=".3ga"].link-icon:before,
.files_ul div[tag$=".flac"].link-icon:before,
.files_ul div[tag$=".mid"].link-icon:before,
.files_ul div[tag$=".midi"].link-icon:before,
.files_ul div[tag$=".m4a"].link-icon:before,
.files_ul div[tag$=".mp4a"].link-icon:before,
.files_ul div[tag$=".amz"].link-icon:before,
.files_ul div[tag$=".mka"].link-icon:before,
.files_ul div[tag$=".asx"].link-icon:before,
.files_ul div[tag$=".pcm"].link-icon:before,
.files_ul div[tag$=".m3u"].link-icon:before,
.files_ul div[tag$=".wma"].link-icon:before,
.files_ul div[tag$=".xwma"].link-icon:before,
.files_ul a.link-icon.link-audio[href]:before {
    content: "\f1c7"; /*Audio*/
}

.files_ul div[tag$=".avi"].link-icon:before,
.files_ul div[tag$=".mpg"].link-icon:before,
.files_ul div[tag$=".mp4"].link-icon:before,
.files_ul div[tag$=".mkv"].link-icon:before,
.files_ul div[tag$=".mov"].link-icon:before,
.files_ul div[tag$=".wmv"].link-icon:before,
.files_ul div[tag$=".vp6"].link-icon:before,
.files_ul div[tag$=".264"].link-icon:before,
.files_ul div[tag$=".vid"].link-icon:before,
.files_ul div[tag$=".rv"].link-icon:before,
.files_ul div[tag$=".webm"].link-icon:before,
.files_ul div[tag$=".swf"].link-icon:before,
.files_ul div[tag$=".h264"].link-icon:before,
.files_ul div[tag$=".flv"].link-icon:before,
.files_ul div[tag$=".mk3d"].link-icon:before,
.files_ul div[tag$=".gifv"].link-icon:before,
.files_ul div[tag$=".oggv"].link-icon:before,
.files_ul div[tag$=".3gp"].link-icon:before,
.files_ul div[tag$=".m4v"].link-icon:before,
.files_ul div[tag$=".movie"].link-icon:before,
.files_ul div[tag$=".divx"].link-icon:before,
.files_ul a.link-icon.link-video[href]:before {
    content: "\f1c8"; /*Video*/
    color: #d56f6f;
}

.files_ul div[tag$=".css"].link-icon:before,
.files_ul div[tag$=".js"].link-icon:before,
.files_ul div[tag$=".py"].link-icon:before,
.files_ul div[tag$=".git"].link-icon:before,
.files_ul div[tag$=".py"].link-icon:before,
.files_ul div[tag$=".cpp"].link-icon:before,
.files_ul div[tag$=".h"].link-icon:before,
.files_ul div[tag$=".ini"].link-icon:before,
.files_ul div[tag$=".config"].link-icon:before,
.files_ul a.link-icon.link-code[href]:before {
    content: "\f1c9"; /*code*/
}

.files_ul div[tag$=".exe"].link-icon:before,
.files_ul div[tag$=".jar"].link-icon:before,
.files_ul div[tag$=".dll"].link-icon:before,
.files_ul div[tag$=".bat"].link-icon:before,
.files_ul div[tag$=".pl"].link-icon:before,
.files_ul div[tag$=".scr"].link-icon:before,
.files_ul div[tag$=".msi"].link-icon:before,
.files_ul div[tag$=".app"].link-icon:before,
.files_ul div[tag$=".deb"].link-icon:before,
.files_ul div[tag$=".apk"].link-icon:before,
.files_ul div[tag$=".jar"].link-icon:before,
.files_ul div[tag$=".vb"].link-icon:before,
.files_ul div[tag$=".prg"].link-icon:before,
.files_ul div[tag$=".sh"].link-icon:before,
.files_ul a.link-icon.link-exe[href]:before {
    content: "\f085"; /*Executable*/
}

.files_ul div[tag$=".com"].link-icon:before,
.files_ul div[tag$=".net"].link-icon:before,
.files_ul div[tag$=".org"].link-icon:before,
.files_ul div[tag$=".edu"].link-icon:before,
.files_ul div[tag$=".gov"].link-icon:before,
.files_ul div[tag$=".mil"].link-icon:before,
.files_ul div[tag$="/"].link-icon:before,
.files_ul div[tag$=".html"].link-icon:before,
.files_ul div[tag$=".htm"].link-icon:before,
.files_ul div[tag$=".xhtml"].link-icon:before,
.files_ul div[tag$=".jhtml"].link-icon:before,
.files_ul div[tag$=".php"].link-icon:before,
.files_ul div[tag$=".php3"].link-icon:before,
.files_ul div[tag$=".php4"].link-icon:before,
.files_ul div[tag$=".php5"].link-icon:before,
.files_ul div[tag$=".phtml"].link-icon:before,
.files_ul div[tag$=".asp"].link-icon:before,
.files_ul div[tag$=".aspx"].link-icon:before,
.files_ul div[tag$=".cfm"].link-icon:before,
.files_ul a[href*="?"].link-icon:before,
.files_ul a[href*="#"].link-icon:before,
.files_ul a.link-icon:not([href*='.']):before,
.files_ul a.link-icon.link[href]:before {
    content: "\f0c1"; /*link*/
}


/*For CodePen test*/