smart-file-upload {
    display: inline-block;
    width: var(--smart-file-upload-default-width);
    font-size: var(--smart-file-upload-font-size);
    font-family: var(--smart-file-upload-font-family);
    color: var(--smart-file-upload-color);
    overflow: hidden;
    box-sizing: border-box;
    border: var(--smart-file-upload-border-width) dashed var(--smart-file-upload-border);
    background-color: var(--smart-file-upload-background);
    min-width: calc(3*var(--smart-file-upload-footer-button-width) + 20px);
    min-height: calc(var(--smart-file-upload-browse-button-height) + 2*var(--smart-file-upload-border-width) + 10px + var(--smart-file-upload-footer-button-height) + 2*var(--smart-file-upload-border-width) + var(--smart-file-upload-container-min-height) + 10px + var(--smart-file-upload-total-files-min-height));
}

    smart-file-upload[disabled] {
        opacity: 0.55;
        cursor: default;
    }

        .smart-file-upload[disabled] .smart-file-upload-container {
            pointer-events: none;
            user-select: none;
        }

    .smart-file-upload .smart-file-upload-header,
    .smart-file-upload .smart-file-upload-container,
    .smart-file-upload .smart-file-upload-footer {
        padding: 5px;
        width: 100%;
        box-sizing: border-box;
    }

    .smart-file-upload[hide-footer] .smart-file-upload-footer {
        display: none;
    }

    .smart-file-upload .smart-browse-button {
        display: block;
        margin: 4px;
        width: var(--smart-file-upload-browse-button-width);
        height: var(--smart-file-upload-browse-button-height);
    }

    .smart-file-upload .smart-upload-all-button,
    .smart-file-upload .smart-cancel-all-button,
    .smart-file-upload .smart-pause-all-button {
        width: var(--smart-file-upload-footer-button-width);
        height: var(--smart-file-upload-footer-button-height);
        margin: 4px;
    }

    .smart-file-upload .smart-browse-input {
        display: none;
    }

.smart-drop-zone {
    width: 100%;
    height: 100%;
    background-color: var(--smart-background);
    position: relative;
    box-sizing: border-box;
    border: lightgray dotted 1px;
}

    .smart-drop-zone:after {
        font-family: var(--smart-font-family-icon);
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        width: 100%;
        text-align: center;
        content: var(--smart-file-upload-text-content-drop-zone);
        color: var(--smart-ui-state);
        box-sizing: border-box;
        border: dashed 5px transparent;
        transition: border 0.5s ease-out;
    }

    .smart-drop-zone.smart-drag-over:after {
        content: var(--smart-file-upload-text-content-drop-zone-over);
        font-size: 50px;
        border: dashed 3px var(--smart-background-border);
        transition: border 0.5s ease-out;
        animation: drop-zone 1s ease-in infinite;
    }

@-webkit-keyframes drop-zone {
    0% {
        color: #b1b1b100;
    }

    50% {
        color: #b1b1b199;
    }

    100% {
        color: #b1b1b100;
    }
}

.smart-file-upload .smart-drop-zone {
    display: none;
    width: 100%;
    height: 100px;
}

.smart-file-upload[drop-zone] .smart-drop-zone {
    display: block;
}

.smart-file-upload[drop-zone] .smart-overflow .smart-drop-zone {
    display: none;
}

.smart-selected-files {
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    padding: 2px;
}

.smart-file-upload .smart-total-files {
    font-family: 'arial';
    font-size: 12px;
    color: gray;
    display: block;
    box-sizing: border-box;
    padding: 0px 0px 2px 5px;
}

    .smart-file-upload .smart-total-files:empty {
        display: none;
    }

.smart-selected-files .smart-file {
    height: auto;
    position: relative;
    display: block;
    box-sizing: border-box;
    border: lightgray solid 1px;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 1px;
    background-color: #fafafa;
    transition: border-color 0.5s ease;
}



.smart-selected-files .smart-item-name,
.smart-selected-files .smart-item-upload-button,
.smart-selected-files .smart-item-pause-button,
.smart-selected-files .smart-item-cancel-button {
    display: inline-block;
    box-sizing: border-box;
    height: 16px;
    position: relative;
}

.smart-selected-files .smart-item-name {
    width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
}

.smart-selected-files .smart-uploading .smart-item-name {
    width: calc(100% - 60px);
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
}

.smart-selected-files .smart-item-upload-button,
.smart-selected-files .smart-item-pause-button,
.smart-selected-files .smart-item-cancel-button {
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    color: #999;
    transition: color 0.5s ease;
}

.smart-selected-files .smart-item-pause-button {
    display: none;
}

.smart-selected-files .smart-item-upload-button:hover,
.smart-selected-files .smart-item-cancel-button:hover {
    cursor: pointer;
    color: green;
    transition: color 0.5s ease;
}

.smart-selected-files .smart-item-cancel-button:hover {
    color: orange;
}

.smart-selected-files .smart-item-upload-button:after,
.smart-selected-files .smart-item-pause-button:after,
.smart-selected-files .smart-item-cancel-button:after {
    font-family: var(--smart-font-family-icon);
    content: var(--smart-icon-up);
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 16px;
    text-shadow: 2px 2px 2px lightgray;
}

.smart-selected-files .smart-item-pause-button:after,
.smart-selected-files .smart-item-cancel-button:after {
    content: var(--smart-icon-close);
}

.smart-file.smart-uploading-start::before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    font-family: 'arial';
    display: block;
    content: var(--smart-file-upload-text-content-uploading-start);
    background-color: #c1c1c169;
    opacity: 1;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    box-sizing: border-box;
    font-size: 11px;
    color: #737373;
    padding: 0px 0px 2px 5px;
    pointer-events: none;
    z-index: 1;
    animation: connecting 1s linear infinite;
}

@-webkit-keyframes connecting {
    0% {
        color: #73737350;
    }

    50% {
        color: #73737399;
    }

    100% {
        color: #73737350;
    }
}

.smart-file.smart-uploading::before {
    font-family: 'arial';
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    content: var(--smart-file-upload-text-content-uploading);
    width: 100%;
    height: 100%;
    background-color: #c1c1c169;
    opacity: 1;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    box-sizing: border-box;
    font-size: 11px;
    color: var(--smart-ui-state);
    padding: 0px 0px 2px 5px;
    pointer-events: none;
    z-index: 1;
}

@-webkit-keyframes rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.smart-file.smart-pause::before {
    font-family: 'arial';
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    content: var(--smart-file-upload-text-content-pause);
    width: 100%;
    height: 100%;
    background-color: #ff000030;
    border-radius: 3px;
    opacity: 0.8;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    box-sizing: border-box;
    font-size: 11px;
    color: #8a0000;
    padding: 0px 0px 2px 5px;
    pointer-events: none;
    z-index: 1;
}

.smart-file.smart-error::before {
    font-family: 'arial';
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    content: var(--smart-file-upload-text-content-error);
    width: 100%;
    height: 100%;
    background-color: var(-smart-error);
    border-radius: var(--smart-error-border-radius);
    opacity: 0;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    box-sizing: border-box;
    font-size: 11px;
    color: var(--smart-on-error);
    padding: 0px 0px 2px 5px;
    pointer-events: none;
    z-index: 1;
    animation: error 6s linear 1;
}

@-webkit-keyframes error {
    0% {
        opacity: 0.8;
        background-color: #ff000015;
    }

    3% {
        background-color: #ff000040;
    }

    6% {
        background-color: #ff000015;
    }

    9% {
        background-color: #ff000040;
    }

    12% {
        background-color: #ff000015;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}


.smart-file.smart-uploading .smart-item-upload-button {
    pointer-events: none;
}

.smart-selected-files .smart-uploading .smart-item-upload-button {
    opacity: 0.3;
}

.smart-file.smart-uploading .smart-item-name {
    opacity: 0.2;
    user-select: none;
}

.smart-selected-files .smart-uploading .smart-item-pause-button,
.smart-selected-files .smart-uploading .smart-item-cancel-button {
    display: inline-block;
    cursor: pointer;
    pointer-events: all;
    transition: color 0.5s, opacity 0.5s ease;
    color: #dc1919;
    opacity: 0.5;
}

.smart-selected-files .smart-uploading .smart-item-cancel-button {
    color: darkorange;
}

    .smart-selected-files .smart-uploading .smart-item-pause-button:hover,
    .smart-selected-files .smart-uploading .smart-item-cancel-button:hover {
        transition: color 0.5s, opacity 0.5s ease;
        color: red;
        opacity: 1;
    }

    .smart-selected-files .smart-uploading .smart-item-cancel-button:hover {
        transition: color 0.5s, opacity 0.5s ease;
        color: orange;
        opacity: 1;
    }

.smart-selected-files .smart-item-pause-button {
    pointer-events: none;
}

.smart-selected-files .smart-file:hover {
    transition: border-color 0.5s ease;
    border-color: gray;
}

.smart-file smart-progress-bar {
    display: none;
    width: 100%;
    height: 4px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

    .smart-file smart-progress-bar .smart-container {
        border-style: none;
    }

    .smart-file smart-progress-bar .smart-value {
        background-color: orange;
    }

smart-file-upload[show-progress] .smart-file smart-progress-bar {
    display: none;
}

    smart-file-upload[show-progress] .smart-file smart-progress-bar[value] {
        display: block;
    }

.smart-file.smart-error smart-progress-bar {
    opacity: 0.3;
}

/*smart-file-upload .smart-total-files{
    min-height:var(--smart-file-upload-total-files-min-height);
}

smart-file-upload .smart-file-upload-container{
    min-height:var(--smart-file-upload-container-min-height);
}*/

smart-file-upload .smart-total-files.smart-hidden,
smart-file-upload .smart-selected-files .smart-file.smart-hidden {
    display: none;
}

/* --- Right-To-Left --- */

smart-file-upload[right-to-left] > .smart-container,
.smart-file[right-to-left],
.smart-drop-zone[right-to-left] {
    direction: rtl;
}

/* --- */