.fancybox__container{z-index: 1060;}
#fm *{transition: all 0.15s;}
#fm-modal .modal-header.controls{ flex-direction: column; align-items: flex-start; padding: 10px 1rem 0; border: 0; box-shadow:0 10px 10px 0px #EEE; position: relative; z-index: 1;}
#fm-modal .modal-title span{ cursor: pointer; transition: all 0.15s;}
#fm-modal .modal-title i{display: inline-block; margin: 0 5px; color: #666; font-size: 16px;}
#fm-modal .modal-title span:hover{ color: #0e7fe1;}

.fm-page{ color: #666; min-height: 235px; flex-flow: column; display: flex;}
.fm-page .no-file{ font-size: 32px; font-weight: bold; flex: 1;}
.fm-header{ display: flex; width: 100%; align-items: center; justify-content: space-between; padding-bottom: 10px;}
.fm-control{ display: flex; width: 100%; justify-content: space-between; margin: 0 -1rem; padding: 10px 1rem; border-top: 1px solid #EEE; box-sizing: content-box;}
.fm-control .right .input-group{ width: 250px;}
.fm-file{display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px;}
.fm-file .item{ position: relative; margin: 10px; width: 117px; border: #EEE thin solid; cursor: pointer; border-radius: 3px; overflow: hidden;}
.fm-file .item .flash-view{display: block; color: #000; padding: 0 7px;}
.fm-file .item .thumb{position: relative; height: 120px; display: flex; justify-content: center; align-items: center; border-top: #eee thin solid; border-bottom: #eee thin solid}
.fm-file .item .thumb img{ max-width: 100%; max-height: 100%;}
.fm-file .item .thumb .duration{ position: absolute; right: 0; bottom: 0; padding: 2px 8px; background-color: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: normal; }
.fm-file .item .info{ background-color: #FFF; font-size: 14px; padding: 5px; display: flex; justify-content: center;}
.fm-file .item .info .name{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #000;}
.fm-file .item .info .date{ font-size: 10px; color: #666;}
.fm-file .item .info .size{ font-size: 10px; color: #666;}
.fm-file .item:hover{ border-color: #CCC;}
.fm-file .item.active{ box-shadow: 0 0 0 2px #43a8bf; border-color: #43a8bf;}
.fm-file .item.files .thumb{flex-flow: column; text-transform: uppercase; font-size: 16px; font-weight: bold; color: #666;}
.fm-file .item.files .thumb.thumb-img img{width: 120px; height: 120px; object-fit: cover;}
.fm-file.not-item{ align-items: center; justify-content: center;}
.fm-file.not-item .msg{ color: #CCC; font-size: 30px; padding: 100px 0;}

.fm-folder{ padding: 0 1px; display: flex; margin-left: -10px; margin-right: -10px; flex-flow: wrap;}
.fm-folder .item{ margin: 10px; width: 235px; background-color: #EEE; cursor: pointer; border-radius: 3px; padding: 12px 15px; display: flex; align-items: center; overflow: hidden;}
.fm-folder .item i{ font-size: 22px; margin-right: 10px;}
.fm-folder .item span{ font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: bold;}
.fm-folder .item.active{ background-color: #e8f0fe; box-shadow: 0 0 0 2px #43a8bf;}

/* Multil layout */
.fm-box .input-group .thumb img{ margin: 1px; height: 34px; cursor: pointer;}
.fm-box .list-thumb{margin-left: -5px; margin-right: -5px; display: flex; flex-wrap: wrap;}
.item-fm{ cursor: move; position: relative; display: inline-block; width: 120px; margin: 5px;}
.item-fm i{ cursor: pointer; position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 12px; background-color: rgba(0,0,0,0.6); color: #FFF; border-radius: 50%; padding: 2px; }
.item-fm .thumb img{width: 120px; height: 120px; object-fit: cover;}
.item-fm.item-file {border: #eee thin solid;}
.item-fm.item-file .thumb{background-color: #fff; height: 120px; display: flex; flex-flow: column; flex:1; justify-content: center; align-items: center; border-top: #eee thin solid; border-bottom: #eee thin solid; text-transform: uppercase; font-size: 24px; font-weight: bold; color: #666; overflow: hidden;}
.item-fm.item-file .thumb .hostname{font-size: 10px; text-transform: none;}
.item-fm.item-file .info{ background-color: #FFF; font-size: 12px; padding: 5px; display: flex; justify-content: center;}
.item-fm.item-file .info .name{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #000;}

.fm-youtube{display: flex; flex-direction: wrap;}
.video-item{flex-basis: 20%;}

@media (max-width: 767.98px) {
    .fm-control{ flex-wrap: wrap; justify-content: center;}
    .fm-control .left{ width: 100%; justify-content: center; margin-bottom: 5px;}
    .fm-control .right{ width: 100%; justify-content: center;}
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1500px) {
}