
.qui-project-media-folderViewer {
    float: left;
    height: 100%;
    position: relative;
    width: 100%;
}

/** buttons
 * ====================================================== */

.qui-diashow-image-buttons {
    z-index: 1;
}

.qui-project-media-folderViewer-buttons {
    background: none repeat scroll 0 0 #e1e4e9;
    float: left;
    height: 50px;
    width: 100%;
}

.qui-project-media-folderViewer-buttons button {
    background: none repeat scroll 0 0 transparent;
    border-color: #e1e4e9;
    border-radius: 0;
    border-style: solid;
    border-width: 0 1px 0 0;
    box-shadow: none;
    color: #8f9399;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    margin: 0;
    padding: 0 10px;
}

.qui-project-media-folderViewer-buttons button {
    border-left: 1px solid #cccfd5;
}

.qui-project-media-folderViewer-buttons button[name="open-folder"],
.qui-project-media-folderViewer-buttons button[name="upload"] {
    border-left: 0;
}

.qui-project-media-folderViewer-buttons button.qui-button-active {
    background: none repeat scroll 0 0 #c3c3c3 !important;
    color: #222;
}

.qui-project-media-folderViewer-buttons button:hover {
    background: none repeat scroll 0 0 #d1d4da;
}

.qui-project-media-folderViewer-buttons .qui-button-text-image {
    line-height: 50px;
}

.qui-project-media-folderViewer-buttons .qui-button-text {
    white-space: nowrap;
}

.qui-project-media-folderViewer-buttons .qui-select {
    margin: 10px;
}

.qui-project-media-folderViewer-buttons .qui-buttons-separator {
    border-left: 2px solid #cccfd5;
    float: left;
    height: 40px;
    margin: 5px 4px 2px 7px;
}

/** items / container
 * ====================================================== */

.qui-project-media-folderViewer-container {
    float: left;
    height: calc(100% - 50px);
    overflow: auto;
    width: 100%;
}

.qui-project-media-folderViewer-item {
    border: 1px solid #dedede;
    cursor: zoom-in;
    float: left;
    height: 150px;
    margin: 20px 0 0 20px;
    overflow: hidden;
    position: relative;
    width: 150px;
}

.qui-project-media-folderViewer-item-active {
    border-top: 4px solid #77AB13;
}

.qui-project-media-folderViewer-item-inactive {
    border-top: 4px solid #AE432E;
}

.qui-project-media-folderViewer-item.selected,
.qui-project-media-folderViewer-item:hover {
    background-color: #2F8FC6;
}

.qui-project-media-folderViewer-item-title {
    background: #000;
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    color: #fff;
    height: 30px;
    left: 0;
    overflow: hidden;
    padding: 5px;
    position: absolute;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    z-index: 3;
}

.qui-project-media-folderViewer-item-image {
    background-position: center 10px;
    background-repeat: no-repeat;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

.qui-project-media-folderViewer-upload-message {
    background: #fff;
    height: 150px;
    max-width: 90%;
    padding: 20px;
    position: absolute;
    text-align: center;
    width: 300px;
    z-index: 10;
}

.qui-project-media-folderViewer-upload-background {
    background: #000;
    height: 100%;
    opacity: 0.6;
    position: absolute;
    width: 100%;
    z-index: 9;
}

.qui-project-media-folderViewer-item-action {

}
