body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #222;
    color: #eee;
}
.windows-container {
    margin: 32px auto;
    max-width: 1200px;
    background: #222;
    border-radius: 8px;
    padding: 18px 18px 32px 18px;
    box-shadow: 0 8px 48px #000a;
}
.topbar {
    border-bottom: 1px solid #666;
    padding-bottom: 8px;
    margin-bottom: 14px;
}
.titlebar {
    font-size: 1.4em;
}
.view-switch .btn {margin-left:3px}

.drop-message { font-size: 1.2em; color: #6cf; }
#uploadProgress {margin-top:12px}
.progress-bar-area { margin:7px 0; color:#ccc;}
.progress {height: 22px; background: #444;}
.progress-bar {background: #3a6cff;}
.file-grid { width: 100%; clear:both; }
.file-tile {
    width: 150px;
    margin: 0 9px 16px 0;
    background: transparent;
    border: 1px solid #444;
    border-radius: 8px;
    float: left;
    padding: 10px 9px 12px 9px;
    text-align: center;
    min-height: 215px;
    position: relative;
    box-shadow: 0 2px 12px #0008;
}

.file-tile:hover {
	    background: #bbbbbb;
    border: 1px solid #000000;
    box-shadow: 0 2px 12px #000000;
}


.file-tile:hover .download-btn, .file-tile:hover .delete-btn  {
	opacity:1;
-moz-text-shadow:4px 4px 10px #000000; -webkit-text-shadow:4px 4px 10px #000000; text-shadow:4px 4px 10px #000000;
}




#fileListContainer {   background: #fdfdff; padding:15px; 
border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;
}

.file-tile .thumb, .file-tile .icon {
    margin-bottom: 7px;
    cursor: pointer;
    position: relative;

}
.file-tile .thumb img, .file-tile .icon img {
    width: 128px;
    border-radius: 4px;
	height: 128px;
}
.file-tile .mp3-icon .play-btn,
.file-tile .video-icon .play-btn {
    position: absolute;
    right: 37px;
  bottom: 30px;
  font-size: 3.6em; color: #fdfdff;
    background: #fff3; border-radius:50%;
    cursor:pointer;
    padding:2px 5px;
}
.fname { font-weight: 400; color:#000000;  font-size: 11px; overflow:hidden; height: 80px; }
.fmeta { font-size: 0.89em; color: #6a8; margin-top:6px;}
.factions {margin-top: 9px;}
.factions .btn {margin-right:4px;}
.file-table th, .file-table td {vertical-align:middle;}
.file-table .icon img, .file-table .thumb img { max-height: 32px; max-width: 36px; border-radius: 3px; }
.windows-modal .modal-content {
    border-radius:8px;
    box-shadow: 0 12px 40px #000c;
    border: 2px solid #3788f8;
    background: #292d34;
    color:#fff;
}
.windows-modal .modal-header {
    border-radius:6px 6px 0 0;
    background: linear-gradient(90deg, #156ae7, #3788f8 80%);
    color:#fff;
    border-bottom: 1px solid #222;
}
.windows-modal .modal-footer { border-top:1px solid #222;}
.windows-alert {background:#431818;border:1px solid #da2a2a;color:#fff;}
.btn-light.active { background: #0b8eff; color: #fff; border-color: #3a6cff;}

.modal-header { cursor:move }


.delete-btn { position:absolute; top:5px; right:10px; 	opacity:0;  }
.download-btn { position:absolute; top:5px; left:10px; 	opacity:0;  }

@media (max-width: 900px) {
    .file-tile {width: 45vw; min-height:160px;}
}
@media (max-width: 600px) {
    .file-tile {width: 96vw; min-height:120px;}
    .windows-container {padding: 7px;}
}

::-webkit-scrollbar {width:7px; background:#222;}
::-webkit-scrollbar-thumb {background:#3a6cff; border-radius:5px;}