.file {
	width: 2.5em;
	height: 3em;
	line-height: 3em;
	text-align: center;
	border-radius: 0.25em;
	color: #FFF;
	display: inline-block;
	margin: 0.9em 1.2em 0.8em 1.3em;
	position: relative;
	overflow: hidden;
	box-shadow: 1.74em -2.1em 0 0 #A4A7AC inset;
    font-size: 1.2em;
}
/* .file:first-line {
	font-size: 13px;
	font-weight: 700;
}
.file:after {
	content: '';
	position: absolute;
	z-index: -1;
	border-width: 0;
	border-bottom: 2.6em solid #DADDE1;
	border-right: 2.22em solid rgba(0, 0, 0, 0);
	top: -34.5px;
	right: -4px;
} */

.hide {
    display: none;
}

.file.f-avi,
.file.f-flv,
.file.f-mkv,
.file.f-mov,
.file.f-mpeg,
.file.f-mpg,
.file.f-mp4,
.file.f-m4v,
.file.f-wmv {
	box-shadow: 1.74em -2.1em 0 0 #7e70ee inset;
}
.file.f-avi:after,
.file.f-flv:after,
.file.f-mkv:after,
.file.f-mov:after,
.file.f-mpeg:after,
.file.f-mpg:after,
.file.f-mp4:after,
.file.f-m4v:after,
.file.f-wmv:after {
	border-bottom-color: #5649c1;
}

.file.f-mp2,
.file.f-mp3,
.file.f-m3u,
.file.f-wma,
.file.f-xls,
.file.f-xlsx {
	box-shadow: 1.74em -2.1em 0 0 #5bab6e inset;
}
.file.f-mp2:after,
.file.f-mp3:after,
.file.f-m3u:after,
.file.f-wma:after,
.file.f-xls:after,
.file.f-xlsx:after {
	border-bottom-color: #448353;
}

.file.f-doc,
.file.f-docx,
.file.f-psd{
	box-shadow: 1.74em -2.1em 0 0 #03689b inset;
}

.file.f-doc:after,
.file.f-docx:after,
.file.f-psd:after {
	border-bottom-color: #2980b9;
}

.file.f-pdf {
	box-shadow: 1.74em -2.1em 0 0 #e15955 inset;
}
.file.f-pdf:after {
	border-bottom-color: #c6393f;
}

.file.f-gif,
.file.f-jpg,
.file.f-jpeg,
.file.f-png {
	box-shadow: 1.74em -2.1em 0 0 #994718 inset;
}
.file.f-gif:after,
.file.f-jpg:after,
.file.f-jpeg:after {
	border-bottom-color: #b0521c;
}

.file.f-deb,
.file.f-dmg,
.file.f-gz,
.file.f-rar,
.file.f-zip,
.file.f-7z {
	box-shadow: 1.74em -2.1em 0 0 #867c75 inset;
}
.file.f-deb:after,
.file.f-dmg:after,
.file.f-gz:after,
.file.f-rar:after,
.file.f-zip:after,
.file.f-7z:after {
	border-bottom-color: #685f58;
}

.file.f-html,
.file.f-rtf,
.file.f-xml,
.file.f-xhtml {
	box-shadow: 1.74em -2.1em 0 0 #a94bb7 inset;
}
.file.f-html:after,
.file.f-rtf:after,
.file.f-xml:after,
.file.f-xhtml:after {
	border-bottom-color: #d65de8;
}

.file.f-js {
	box-shadow: 1.74em -2.1em 0 0 #d0c54d inset;
}
.file.f-js:after {
	border-bottom-color: #a69f4e;
}

.file.f-css,
.file.f-saas,
.file.f-scss {
	box-shadow: 1.74em -2.1em 0 0 #44afa6 inset;
}
.file.f-css:after,
.file.f-saas:after,
.file.f-scss:after {
	border-bottom-color: #30837c;
}

.filebox.selected {
    background-color:#8c8c8c !important;
}

.filebox.selected:hover {
    background-color: #8c8c8c !important;
}

.filebox:hover {
    background-color: #696969 !important;
}
/* ---------------------------------------------------------------------------
   Document explorer — progressive columns with a preview pane.
   Replaces a flat dropdown of every document in the system.
   --------------------------------------------------------------------------- */

.doc-explorer-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
    flex-wrap: wrap;
}
.doc-explorer-browse-label {
    font-size: .8rem;
    opacity: .75;
    margin: 0;
}
.doc-explorer-toolbar select { max-width: 18rem; }
.doc-explorer-hint {
    font-size: .78rem;
    opacity: .6;
    margin-left: auto;
}

.doc-explorer {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(128, 128, 128, .28);
    border-radius: 6px;
    overflow: hidden;
    height: 26rem;
}

.doc-explorer-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(128, 128, 128, .22);
}
.doc-explorer-preview { flex: 1.2 1 0; min-width: 0; display: flex; flex-direction: column; }

.doc-explorer-col-head { padding: .5rem; border-bottom: 1px solid rgba(128, 128, 128, .22); }
.doc-explorer-col-list { flex: 1; overflow-y: auto; }

.doc-explorer-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(128, 128, 128, .12);
    padding: .5rem .6rem;
    font-size: .84rem;
    color: inherit;
    position: relative;
}
.doc-explorer-item:hover { background: rgba(128, 128, 128, .12); }
.doc-explorer-item.is-selected { background: rgba(52, 58, 102, .55); }

.doc-explorer-item-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-explorer-item-sub {
    display: block;
    font-size: .72rem;
    opacity: .6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-explorer-count {
    position: absolute;
    top: .5rem;
    right: .5rem;
    font-size: .68rem;
    background: rgba(128, 128, 128, .28);
    border-radius: 999px;
    padding: 0 .38rem;
}

.doc-explorer-empty {
    padding: .9rem .6rem;
    font-size: .8rem;
    opacity: .55;
    text-align: center;
}

.doc-explorer-preview-image { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; display: block; }
.doc-explorer-preview-pdf { width: 100%; height: 100%; }
.doc-explorer-preview-meta { margin: auto; text-align: center; padding: 1rem; }
.doc-explorer-preview-name { font-weight: 600; margin-bottom: .2rem; }
.doc-explorer-preview-sub { font-size: .78rem; opacity: .6; }

.doc-explorer-selection { font-size: .82rem; opacity: .75; }

@media (max-width: 900px) {
    .doc-explorer { height: auto; flex-direction: column; }
    .doc-explorer-col, .doc-explorer-preview { border-right: 0; border-bottom: 1px solid rgba(128,128,128,.22); }
    .doc-explorer-col-list { max-height: 11rem; }
    .doc-explorer-preview { min-height: 12rem; }
}