.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-modal .modal-body{ padding-top: 0;}

.fm-page{ padding-top: 5px; padding-bottom: 5px;}
.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{ padding: 0 1px; display: flex; flex-wrap: wrap;}
.fm-file .item{ position: relative; margin: 15px 15px 0 0; width: 120px; box-shadow: 0 0 0 1px #EEE; cursor: pointer; border-radius: 3px; overflow: hidden;}
.fm-file .item .flash-view{display: block; color: #000; padding: 0 7px;}
.fm-file .item .thumb{ 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 .info{ background-color: #FFF; font-size: 12px; 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 #0e7fe1;}
.fm-file .item.files .thumb{ text-transform: uppercase; font-size: 30px; font-weight: bold; color: #666;}
.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;}
.fm-folder .item{ margin: 15px 15px 0 0; width: 255px; 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; border-color: #185abc;}

.fm-box .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.item-image .thumb img{width: 100px; height: 100px; object-fit: cover;}
.item-fm.item-file {border: #eee thin solid;}
.item-fm.item-file .thumb{ height: 100px; display: flex; 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;}
.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;}

@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) {
}