.file-manager {

    // Lazy loading
    img {
        opacity: 1;
        transition: opacity 0.3s;
    }

    img[data-src] {
        opacity: 0;
    }

    .col-xs-12 {
        padding-right: 5px; // reduced by 10px to offset #navpage-content's unsymmetrical padding.
    }

    td {
        vertical-align: inherit;

        &.filename {
            width: 100%;

            .disabled {
                color: #999;
            }
        }

        &.listthumb {
            padding: 0;
            @media (max-width: 767px) {
                width: 1%;
            }
            @media (max-width: 640px) {
                padding: 0;
            }
        }

        &.file-meta {
            min-width: 160px;
        }
        &.folder-meta {
            min-width: 100px;
        }

        &.actions {
            .btn-group {
                @media (max-width: 767px) {
                    margin-top: inherit;
                    margin-bottom: inherit;
                }
            }
            .btn-group > .btn:first-child:not(:last-child) {
                @media (max-width: 767px) {
                    border-bottom-right-radius: 3px;
                    border-top-right-radius: 3px;
                }
            }
        }
    }
}

body.dropzone-active {
    position:relative;
    transition: all 500ms ease-in-out;

    &:before {
        content:'';
        position:fixed;
        height:100%;
        width:100%;
        z-index:99999999;
        background:rgba($boltblue, .6);
    }

    &:after {
        content:'\f093';
        font-family: FontAwesome;
        font-size:80px;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        position:absolute;
        top:50%;
        left:50%;
        z-index:999999999;
        transform:translate3d(-50%,-50%,0);
        color:#fff;
    }
}


.panel-fileupload {

    .panel-heading .label {
        float:right;
    }

    .dragdrop-hint {
        border: 3px dashed $lightgrey;
        display: block;
        text-align: center;
        padding: 10px 0;
        margin-bottom:10px;
        border-radius:3px;
        font-weight:bold;
    }

    form[name=file_upload] {
        .fa {
            display: inline-block !important; // TODO sort out this hacky solution
        }

        .file-input-wrapper {
            display: inline-block;
            margin-bottom:10px;
        }

        button:disabled {
            opacity:.3;
        }
    }
}

.panel-uploadprogress {

    .dropzone {
        padding:0;
        border:0;

        .dz-preview {
            margin: 0 5px 5px 0;
            min-height: 50px;
            position:relative;

            .dz-success-mark,
            .dz-error-mark {
                margin-left:-15px;
                margin-top:-15px;
                svg {
                    width:30px !important;
                    height:30px !important;
                }
            }
        }

        .dz-image {
            width:50px;
            height:50px;
            border-radius:5px !important;
        }

        .dz-details {
            display: none !important;
            visibility: hidden !important;
            opacity:0;
        }

        .dz-progress {
            width: 40px;
            height: 10px;
            top:20px;
            left:5px;
            border-radius: 3px;
            margin-top: 0;
            margin-left: 0;
        }

        .dz-upload {
            background:$boltblue;
        }

    }
}