/* Photo Upload Component Styles */

.autoupload-dropzone {
    position: relative;
    border: 2px dashed #acacac;
    /*transition: background-color .3s ease, border-color .3s ease;*/
    transition: background-color .3s ease, border-color .3s ease, box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}

    .autoupload-dropzone.highlight {
        background-color: #f9f9f9;
        border-color: #3A3633;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

@media(min-width: 768px) {
    .autoupload-dropzone {
        width: 80%;
        margin: 0 auto;
    }
}

.autoupload-dropzone .autoupload {
    display: none;
}

.autoupload-dropzone .autoupload-fileupload-label {
    font-weight: bold;
    padding: 4px 7px;
    margin-right: 8px;
}

.autoupload-header,
.autoupload-body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
    padding: 8px;
}

    .autoupload-header .autoupload-icon {
        font-size: 3em;
        color: #b1b3b7;
    }

.autoupload-dropzone .preview-container {
    background-color: #f3f3f3;
}

.photo-comment-row {
    display: flex;
    padding: 4px 8px;
}

    .photo-comment-row .photo {
        display: flex;
    }

        .photo-comment-row .photo .thumbnail-link {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            width: 100px;
            height: 50px;
        }

        .photo-comment-row .photo img {
            max-width: 100%;
            max-height: 100%;
        }

    .photo-comment-row .comment {
        padding: 0 8px;
        flex: 1 0 auto;
    }

        .photo-comment-row .comment textarea {
            height: 100%;
        }

.autoupload-dropzone .snackbar-ct {
    position: absolute;
    left: 0;
    top: 0;
}