/* File dropbox */

.dropbox {
    border-radius: 10px;
    padding: 80px 20px;
    position: relative;
    width: 75%;
    max-width: 700px;
    margin: 30px auto;
    overflow-x: auto;
    text-align: center;

    background: rgba(181, 204, 167, 0.3);
    font-size: 1.25rem;

    outline: 2px dashed var(--background-color);
    outline-offset: -10px;

    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
}

.dropbox a:hover, .dropbox a:focus {
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropbox.is-dragover {
    outline-offset: -20px;
    outline-color: var(--outline-color);
    background-color: var(--off-white-color);
}

.dropbox-dragndrop {
    display: inline;
}
.dropbox-icon {
    width: 100%;
    height: 100px;
    margin-bottom: 20px;

    > iconify-icon {
        color: rgba(94, 80, 63, 0.5);
        font-size: 100px;
    }
}

@media screen and (max-width: 565px) {
    .dropbox {
        width: 90%;
        padding: 60px 10px;
    }
    .dropbox-icon {
        height: 80px;
        margin-bottom: 10px;
        > iconify-icon {
            font-size: 80px;
        }
    }
}

.dropbox.is-uploading .dropbox-input, .dropbox.is-processing .dropbox-input, .dropbox.is-success .dropbox-input, .dropbox.is-error .dropbox-input {
    visibility: hidden;
}

.dropbox-uploading, .dropbox-processing, .dropbox-success, .dropbox-error {
    display: none;
}

.dropbox.is-uploading .dropbox-uploading, .dropbox.is-processing .dropbox-processing, .dropbox.is-success .dropbox-success, .dropbox.is-error .dropbox-error {
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
    left: 0px;

    -webkit-transform: translateY( -50% );
    transform: translateY( -50% );
}

.dropbox-uploading, .dropbox-processing {
    font-style: italic;
}

.dropbox-success {
    -webkit-animation: appear-from-inside .25s ease-in-out;
    animation: appear-from-inside .25s ease-in-out;
}

@-webkit-keyframes appear-from-inside {
    from    { -webkit-transform: translateY(-50%) scale(0); }
    75%     { -webkit-transform: translateY(-50%) scale(1.1); }
    to      { -webkit-transform: translateY(-50%) scale(1); }
}
@keyframes appear-from-inside {
    from    { -webkit-transform: translateY(-50%) scale(0); }
    75%     { -webkit-transform: translateY(-50%) scale(1.1); }
    to      { -webkit-transform: translateY(-50%) scale(1); }
}

.dropbox-restart {
    font-weight: bold;
}
.dropbox-restart:focus, .dropbox-restart:hover, .dropbox-file + label:hover strong,
.dropbox-file:focus + label strong, .dropbox-file.has-focus + label strong {
    color: var(--hover-color);
}
.dropbox-file {
    width: .1px;
    height: .1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.dropbox-file + label {
    max-width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
}
.dropbox-file:focus + label, .dropbox-file.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}