/**
 * fileuploader
 * Copyright (c) 2021 Innostudio.de
 * Website: https://innostudio.de/fileuploader/
 * Version: 2.2 (12-Mar-2020)
 * Requires: jQuery v1.7.1 or later
 * License: https://innostudio.de/fileuploader/documentation/#license
 */

// Variables
$fileuploader-font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
$fileuploader-distance: 16px;
$fileuploader-background: #fafbfd;
$fileuploader-theme-color-1: #3A8FFE;
$fileuploader-theme-color-2: #9658FE;
$fileuploader-color-active: #789BEC;
$fileuploader-color-error: #FE7676;
$fileuploader-color-success: #43D084;
$fileuploader-color-action: #c0c6d2;
$fileuploader-borderRadius: 6px;

$fileuploader-button-background: #e6ebf4;
$fileuploader-button-color: #90a0bc;

$fileuploader-input-caption-color: $fileuploader-color-active;
$fileuploader-input-caption-background: #fff;
$fileuploader-input-caption-border: 1px solid #ebeef1;

$fileuploader-item-borderBottom: $fileuploader-input-caption-border;
$fileuploader-item-color: #74809D;
$fileuploader-item-mutedColor: #979fb8;
$fileuploader-item-actionSize: 20px;
$fileuploader-item-thumbnailSize: 36px;

$fileuploader-popup-zIndex: 1090;
$fileuploader-popup-padding: 16px;
$fileuploader-popup-headerHeight: 64px;
$fileuploader-popup-footerHeight: 56px;
$fileuploader-popup-content-color: #fdfdfd;
$fileuploader-popup-content-muted: #80868b;
$fileuploader-popup-move-width: 56px;
$fileuploader-cropper-pointWidth: 24px;
$fileuploader-popup-moveSmall-width: 30px;

// SVG Images
$icon-loader: "PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTAgNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjZGRlNGY2IiBkPSJNNDMuOTM1LDI1LjE0NWMwLTEwLjMxOC04LjM2NC0xOC42ODMtMTguNjgzLTE4LjY4M2MtMTAuMzE4LDAtMTguNjgzLDguMzY1LTE4LjY4MywxOC42ODNoNC4wNjhjMC04LjA3MSw2LjU0My0xNC42MTUsMTQuNjE1LTE0LjYxNWM4LjA3MiwwLDE0LjYxNSw2LjU0MywxNC42MTUsMTQuNjE1SDQzLjkzNXoiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMjUgMjUiIHRvPSIzNjAgMjUgMjUiIGR1cj0iMC42cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4gPC9wYXRoPiA8L3N2Zz4=";
$icon-file: "PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiA8Zz4gIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4gIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPiA8L2c+IDxnPiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjYmJjYWNmIiBpZD0ic3ZnXzIiIGQ9Im00OSwxNi44NDJsMCw0Mi4xMDVjMCwyLjc5MSAtMi4yNyw1LjA1MyAtNS4wNjksNS4wNTNsLTM4Ljg2MiwwYy0yLjgsMCAtNS4wNjksLTIuMjYyIC01LjA2OSwtNS4wNTNsMCwtNTMuODk0YzAsLTIuNzkxIDIuMjY5LC01LjA1MyA1LjA2OSwtNS4wNTNsMjcuMDM0LDBsMTYuODk3LDE2Ljg0MnoiIGNsYXNzPSJjbHMtMSIvPiAgPHBhdGggZmlsbD0iI2RmZWFlZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ic3ZnXzQiIGQ9Im00OSwxNS44OTlsMCwyLjA5NmwtMTMuODEzLDBjLTIuODYsMCAtNC4xNzksLTIuMzIgLTQuMTc5LC01LjE4MWwwLC0xMi44MTRsMi4wOTIsMGwxNS45LDE1Ljg5OXoiIGNsYXNzPSJjbHMtMyIvPiA8L2c+PC9zdmc+";

// Mixins
@mixin gradient-background($from, $to, $degrees: -45deg) {
    background: $to;
	background: -moz-linear-gradient($degrees, $from 0%, $to 100%);
	background: -webkit-linear-gradient($degrees, $from 0%, $to 100%);
	background: linear-gradient(180deg + $degrees, $from 0%, $to 100%);
}
@mixin fileuploader-range-track() {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: none;
    background: $fileuploader-color-active;
    border-radius: 6px;
}
@mixin fileuploader-range-thumb() {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}

// Extends
%fileuploader-transition-soft {
    -webkit-transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
         -o-transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
            transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
%fileuploader-animation {
    -webkit-animation: fileuploaderFadeIn 0.2s ease;
    		animation: fileuploaderFadeIn 0.2s ease;
}
%fileuploader-button {
    display: inline-block;
    margin: 0;
    padding: 14px 22px;
    border: none;
    border-radius: 30px;
    outline: 0;
    font-weight: bold;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    @extend %fileuploader-transition-soft;
    @extend %user-select-none;
}
%fileuploader-button-default {
    @extend %fileuploader-button;
    background: $fileuploader-button-background;
    color: $fileuploader-button-color;

    &:hover {
        background: lighten($fileuploader-button-background, 2%);
        transform: translateY(-1px);
    }
    &:active {
        background: darken($fileuploader-button-background, 2%);
        transform: translateY(1px);
    }
}
%fileuploader-button-theme {
    @extend %fileuploader-button;
    @include gradient-background($fileuploader-theme-color-1, $fileuploader-theme-color-2);
    background-size: 140% auto;
    background-position: center;
    color: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .04);

    &:hover {
        background-position: left;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
        transform: translateY(-2px);
    }
    &:active {
        background-position: right;
        box-shadow: 0 4px 25px rgba(0, 0, 0, .15);
        transform: translateY(2px);
    }
}
%fileuploader-loader {
    content: '';
    position: absolute;
    min-width: 24px;
    min-height: 24px;
    max-width: 48px;
    max-height: 48px;
    background: url('data:image/svg+xml;base64,#{$icon-loader}') no-repeat center;
    background-size: contain;
}
%transform-to-center {
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}
%transform-to-vertical-center {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
%user-select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* configuration */
.fileuploader,
.fileuploader *,
.fileuploader :before,
.fileuploader :after,
.fileuploader-popup,
.fileuploader-popup *,
.fileuploader-popup :before,
.fileuploader-popup :after {
    box-sizing: border-box;
}

.fileuploader,
.fileuploader-popup {
    font-family: $fileuploader-font-family;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    text-align: left;
}

.fileuploader button,
.fileuploader-popup button {
    display: inline-block;
    padding: 0;
    margin: 0;
	border: 0;
	font: inherit;
    background: none;
	box-shadow: none;
}
.fileuploader button:focus,
.fileuploader-popup button:focus {
	outline: 0;
}

/* main */
.fileuploader {
    display: block;
    width: 100%;
    padding: $fileuploader-distance;
    margin: $fileuploader-distance 0;
    background: $fileuploader-background;
    border-radius: $fileuploader-borderRadius;
}

.fileuploader-icon-main {
	display: inline-block;
	font-size: 18px;
	color: $fileuploader-color-active;
}

/* input */
.fileuploader-input {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid transparent;
    border-radius: 30px;
    cursor: pointer;

    .fileuploader-input-caption {
        position: relative;
        display: inline-block;
        -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
        -ms-flex-item-align: start;
            align-self: flex-start;

        padding: 13px $fileuploader-distance;
        margin-right: $fileuploader-distance;
        background: $fileuploader-input-caption-background;
        border: $fileuploader-input-caption-border;
        border-radius: 30px;
        color: $fileuploader-input-caption-color;
        box-shadow: 0 4px 18px rgba(0, 0, 0, .01);
        font-weight: bold;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        @extend %fileuploader-transition-soft;

        .fileuploader-focused & {
            border-color: $fileuploader-input-caption-color;
        }

        /*
        .fileuploader.fileuploader-is-uploading & {
            padding-left: 40px;

            &:after {
                @extend %fileuploader-loader;
                left: 10px;
                top: 50%;
                margin-top: -12px;
            }
        }
        */

        .fileuploader-pending-loader {
            @extend %fileuploader-loader;
            position: relative;
            display: inline-block;
            vertical-align: middle;
            min-height: 22px;
            margin-right: 6px;
        }
    }

    .fileuploader-input-button {
        @extend %fileuploader-button-theme;
    }

    &.fileuploader-dragging {
        background: #fff;
        border: $fileuploader-input-caption-border;
        border-style: dashed;

        .fileuploader-input-caption {
            border-color: transparent;
        }
        .fileuploader-input-button {
            -webkit-transform: translateX(100%);
                    transform: translateX(100%);
            opacity: 0;
        }
    }

    .fileuploader-disabled & {
        opacity: 0.7;
        cursor: default;
        pointer-events: none !important;
    }
}

/* items */
.fileuploader-items {
    .fileuploader-items-list {
        display: block;
        margin: 0 $fileuploader-distance*-1;
        padding: 0;
        list-style: none;
    }

    .fileuploader-item {
        position: relative;
        margin: 0;
        padding: 20px $fileuploader-distance 20px $fileuploader-distance + 6px;
        border-bottom: $fileuploader-item-borderBottom;
        @extend %fileuploader-animation;
        animation-duration: 0.6s;

        &:last-child {
            border-bottom: 0;
            margin-bottom: $fileuploader-distance*-1;
        }

        &.upload-failed {
            background: rgba(254, 84, 111, 0.06);
        }

        &.upload-pending .fileuploader-action-remove:after {
            @extend %fileuploader-loader;
            position: absolute;
            left: -8px;
            top: -8px;
            width: 36px;
            height: 36px;
        }

        .columns {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            z-index: 2;
        }

        .column-thumbnail {
            position: relative;
            width: $fileuploader-item-thumbnailSize;
            height: $fileuploader-item-thumbnailSize;
        }

        .column-title {
            -webkit-box-flex: 1;
                    -ms-flex: 1;
                        flex: 1;
            padding-left: $fileuploader-distance;
            padding-right: $fileuploader-distance;
            color: $fileuploader-item-color;
            overflow: hidden;

            a {
                display: inline-block;
                width: 100%;
                height: 100%;
                color: $fileuploader-item-color;
                text-decoration: none;
            }

            div {
                width: 100%;
                font-weight: bold;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            span {
                font-size: 12px;
                color: $fileuploader-item-mutedColor;
            }
        }

        .column-actions {
            margin: 0 $fileuploader-distance;
        }

        .fileuploader-item-image {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: $fileuploader-borderRadius;
            overflow: hidden;

            &.fileuploader-loading {
                &:after {
                    content: '';
                    @extend %fileuploader-loader;
                    @extend %transform-to-center;

                    width: 50%;
                    height: 50%;
                }
            }

            img,
            canvas {
                position: absolute;
                max-width: none;
                max-height: 100%;
                background: #fff;

                @extend %transform-to-center;
                @extend %fileuploader-animation;
            }
        }

        .fileuploader-item-icon {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            color: #fff;
            font-size: 11px;
            border-radius: 4px;
            cursor: default;
            background-color: #ddd;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 28px;
            @extend %user-select-none;
            @extend %fileuploader-animation;

            &.is-bright-color {
                color: #888;
            }

            i {
                position: absolute;
                display: block;
                width: 90%;
                font-style: normal;
                font-weight: bold;
                overflow: hidden;
                white-space: nowrap;
                @extend %transform-to-center;
            }
        }

        span.fileuploader-action-popup {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(43, 56, 71, 0.2);
            border-radius: $fileuploader-borderRadius;
            cursor: pointer;
            opacity: 0;

            @extend %fileuploader-transition-soft;

            &:hover {
                opacity: 1;
            }

            &:active {
                background: rgba(43, 56, 71, 0.4);
            }
        }

        .fileuploader-action {
            position: relative;
            display: inline-block;
            width: $fileuploader-item-actionSize;
            height: $fileuploader-item-actionSize;
            color: $fileuploader-color-action;
            cursor: pointer;
            vertical-align: top;
			text-align: center;

            @extend %transform-to-vertical-center;
			@extend %fileuploader-transition-soft;
            @extend %fileuploader-animation;

            & + .fileuploader-action {
                margin-left: $fileuploader-distance;
            }

            &:hover {
                color: $fileuploader-color-active;
            }

            &:active {
                color: darken($fileuploader-color-active, 4%);
            }

            i {
                width: 100%;
                height: 100%;
                font-size: $fileuploader-item-actionSize;
                line-height: $fileuploader-item-actionSize;
            }

            &.fileuploader-action-remove {
                color: #fff;
                background: $fileuploader-color-error;
				border-radius: 50%;
                box-shadow: -1px 1px 6px rgba($fileuploader-color-error, 0.8);

				i {
					font-size: 14px;
					text-shadow: none;
				}

                &:hover {
                    background-color: lighten($fileuploader-color-error, 4%);
                }
                &:active {
                    background-color: darken($fileuploader-color-error, 4%);
                }
            }
            &.fileuploader-action-success {
                color: #fff;
                background: $fileuploader-color-success;
				border-radius: 50%;
                box-shadow: -1px 1px 6px rgba($fileuploader-color-success, 0.8);

				i {
					font-size: 14px;
					text-shadow: none;
				}

                &:hover {
                    background-color: lighten($fileuploader-color-success, 4%);
                }
                &:active {
                    background-color: darken($fileuploader-color-success, 4%);
                }
            }

			&.fileuploader-action-remove.fileuploader-action-success {
				i:before {
					content: "\e904";
				}
				&:hover,
				&:active {
                    background: $fileuploader-color-error;
                    box-shadow: -1px 1px 6px rgba($fileuploader-color-error, 0.8);

					i:before {
						content: "\e923";
					}
                }
                &:active {
                    background-color: darken($fileuploader-color-error, 4%);
                }
			}
        }

        &.file-has-popup span.fileuploader-action-popup {
            display: block;
        }

        .fileuploader-progressbar {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 4px;
            border-radius: $fileuploader-borderRadius;

            .bar {
                position: absolute;
                left: 0;
                top: 0;
                width: 0%;
                height: 100%;
                border-radius: $fileuploader-borderRadius;
                background: $fileuploader-color-active;
				box-shadow: 0 4px 8px -1px rgba($fileuploader-color-active, 0.6);
                @extend %fileuploader-transition-soft;
            }
        }

        .progress-bar2 {
            .fileuploader-progressbar {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
				overflow: hidden;
                z-index: 1;
                @extend %user-select-none;

                .bar {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 0%;
                    height: 100%;
                    border-radius: 0;
                    background: rgba(104, 125, 219, 0.08);
					box-shadow: none;
                    @extend %fileuploader-transition-soft;
                }
            }

            span {
                position: absolute;
                @extend %transform-to-vertical-center;
                right: $fileuploader-distance;
                color: rgba(151, 159, 184, 0.16);
                font-size: 48px;
            }
        }

        &.sorting {
            background: $fileuploader-background;
            border-radius: $fileuploader-borderRadius;
            opacity: 0.8;
            box-shadow: 0 1px 4px rgba(0,0,0,0.2);
            z-index: 799;
        }

        &.sorting,
        &.sorting .fileuploader-item-image img,
        &.sorting .fileuploader-item-image canvas,
        &.sorting .fileuploader-item-icon,
        &.sorting .fileuploader-action {
            -webkit-animation: none;
                    animation: none;
        }
    }

    .fileuploader-sorter-placeholder {
        background: rgba(0, 0, 0, 0.03);
        margin: 0;
        padding: 0;
        -webkit-animation: none;
                animation: none;
    }
}

/* file extensions */
.file-type-image .fileuploader-item-icon {
    background-color: #3982fe !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7,8.5C7,7.119,8.119,6,9.5,6S12,7.119,12,8.5S10.881,11,9.5,11S7,9.881,7,8.5z M14.5,11l-4,6l-2-3L5,19h15L14.5,11z'/%3E%3C/svg%3E");

    i {
        visibility: hidden;
        color: #fff;
    }
}

.file-type-audio .fileuploader-item-icon {
    background-color: #66d043 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13.21,5h-1.07v9.613c-0.685-0.381-1.62-0.504-2.58-0.271c-1.687,0.405-2.812,1.753-2.511,3.007c0.3,1.254,1.913,1.939,3.6,1.533c1.544-0.369,2.615-1.527,2.558-2.682h0.003V8.34c1.752,1.296,3.29,1.123,3.575,4.21C20.188,7.362,13.354,7.498,13.21,5z'/%3E%3C/svg%3E");

    i {
        visibility: hidden;
        color: #fff;
    }
}

.file-type-video .fileuploader-item-icon {
    background-color: #9868ff !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M16.81 11.28L8.487 6.107a.622.642 0 0 0-.326-.1c-.326 0-.592.28-.592.623h-.003l.003 10.738c0 .344.266.623.592.623.123 0 .225-.044.335-.106l8.315-5.166a.91.94 0 0 0 .323-.72.96.96 0 0 0-.323-.721z'/%3E%3C/svg%3E");

    i {
        visibility: hidden;
        color: #fff;
    }
}

.file-ext-rar .fileuploader-item-icon,
.file-ext-zip .fileuploader-item-icon {
    background-color: #ffd236 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M6,11h12v2H6V11z M6,15h8v2H6V15z M6,7h12v2H6V7z'/%3E%3C/svg%3E");

    i {
        visibility: hidden;
        color: #fff;
    }
}

.file-ext-pdf .fileuploader-item-icon {
    background-color: #ef5350 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M17.61 13.224c-.336-.115-.752-.16-1.242-.15l-.84.06-.952.158-.906-.958c-.662-.808-1.23-1.684-1.732-2.6l.257-.608.283-.825c.153-.528.227-.985.192-1.37-.117-1.353-.86-2.218-1.9-2.127S9.164 5.88 9.28 7.23c.03.354.16.752.37 1.196a8.11 8.11 0 0 0 .396.743l.56.846-.132.35-1.12 2.846-.705 1.628-.068.012-.797.17-.838.24c-.52.178-.937.38-1.232.63-1.04.87-1.324 1.978-.658 2.77s1.807.707 2.848-.164c.272-.23.523-.563.77-.988a8.87 8.87 0 0 0 .381-.75c.078-.17.137-.35.207-.522l.173-.364 3.614-1 1.18-.256.47.502.64.595c.42.354.808.606 1.174.733 1.283.442 2.376.115 2.712-.862s-.326-1.917-1.6-2.36zM10.88 5.94c.314-.028.595.3.663 1.09.02.215-.034.546-.15.95l-.263.79-.454-.83c-.156-.333-.248-.613-.265-.807-.068-.79.154-1.162.47-1.2zM7.683 16.947c-.183.32-.36.555-.5.68-.606.508-1.04.54-1.242.298s-.096-.66.51-1.168c.166-.14.467-.286.864-.42l.8-.24-.423.85zm5.104-3.19l-2.74.735.353-.847.193-.475.807-2.082c.417.673.878 1.344 1.4 1.976l.5.58-.524.114zm5.35 1.452c-.103.298-.517.422-1.265.163-.203-.07-.484-.254-.805-.524l-.617-.562.947-.075c.367-.01.66.022.844.086.748.258.998.612.896.912z'/%3E%3C/svg%3E");

    i {
        visibility: hidden;
        color: #fff;
    }
}

.file-ext-doc .fileuploader-item-icon,
.file-ext-docx .fileuploader-item-icon,
.file-ext-rtf .fileuploader-item-icon {
    background-color: #2372ba !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 17.33V6.67L15 4v16L5 17.33zM7.974 8.5h-1.33l.922 7h1.708l.73-5.22.702 5.22h1.714l.938-7h-1.26l-.645 5.613L10.72 8.5h-1.4l-.77 5.613L7.974 8.5zM19 6h-3v12h3V6z'/%3E%3C/svg%3E");

    i {
        visibility: hidden;
        color: #fff;
    }
}

.file-ext-xls .fileuploader-item-icon,
.file-ext-xlsx .fileuploader-item-icon {
    background-color: #14a73c !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 17.33V6.67L15 4v16L5 17.33zM19 6h-3v12h3V6zm-6.148 9.5l-2.08-3.5 2.043-3.5H11.57l-1.244 2.246c-.047.196-.125.382-.232.554-.088-.173-.158-.354-.21-.54l-1.2-2.26H7.338L9.33 12l-2.182 3.5h1.338l1.396-2.416c.066-.14.117-.385.14-.385a1.58 1.58 0 0 1 .131.385l1.38 2.416h1.32z'/%3E%3C/svg%3E");

    i {
        visibility: hidden;
        color: #fff;
    }
}

.file-ext-pps .fileuploader-item-icon,
.file-ext-ppsx .fileuploader-item-icon,
.file-ext-ppt .fileuploader-item-icon,
.file-ext-pptx .fileuploader-item-icon {
    background-color: #f26522 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M11,13h6.975c-0.256,3.355-3.054,6-6.475,6C7.91,19,5,16.09,5,12.5c0-3.421,2.645-6.219,6-6.475V13zM13,5.025V11h5.975C18.731,7.811,16.189,5.269,13,5.025z'/%3E%3C/svg%3E");

    i {
        visibility: hidden;
        color: #fff;
    }
}

.file-ext-psd .fileuploader-item-icon {
    background-color: #3172eb !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.853 11.374h.61c.57 0 .997-.112 1.28-.338s.424-.553.424-.983c0-.435-.12-.755-.356-.962S9.2 8.78 8.695 8.78h-.842v2.595zm4.183-1.387c0 .94-.293 1.66-.88 2.157s-1.424.747-2.507.747h-.796V16H6V7.262h2.79c1.06 0 1.867.228 2.417.683s.83 1.137.828 2.042zM18 14.016c0 .686-.238 1.207-.714 1.565s-1.188.538-2.137.538a6.63 6.63 0 0 1-1.243-.098c-.33-.063-.652-.16-.96-.29v-1.506c.367.17.75.303 1.144.4a4.66 4.66 0 0 0 1.122.161c.66 0 .99-.2.99-.573.005-.13-.042-.256-.13-.35a1.93 1.93 0 0 0-.454-.305c-.214-.112-.5-.244-.86-.397-.514-.215-.892-.414-1.133-.597-.225-.164-.405-.38-.526-.63-.11-.24-.163-.53-.163-.877 0-.594.23-1.053.69-1.377s1.112-.487 1.958-.487c.804 0 1.588.175 2.35.525l-.552 1.315c-.307-.134-.62-.25-.938-.353-.287-.092-.588-.138-.89-.138-.54 0-.807.146-.807.437 0 .163.085.305.26.424s.552.297 1.14.532c.52.21.904.408 1.147.592s.422.395.537.633.173.527.173.858z'/%3E%3C/svg%3E");

    i {
        visibility: hidden;
        color: #fff;
    }
}

.file-ext-ai .fileuploader-item-icon {
    background-color: #ff9e00 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12.58 16l-.6-2.072H8.964L8.364 16h-1.89l2.922-8.738h2.145L14.473 16H12.58zm-1.02-3.618l-.937-3.185-.15-.582-1.07 3.767h2.155zm3.452-4.756c0-.59.328-.886.986-.886s.986.294.986.886c0 .282-.078.502-.244.656-.164.16-.412.238-.742.238-.658 0-.986-.298-.986-.894zM16.908 16h-1.816V9.347h1.816V16z'/%3E%3C/svg%3E");

    i {
        visibility: hidden;
        color: #fff;
    }
}

.file-ext-txt .fileuploader-item-icon {
    background-color: #454545 !important;

    i {
        color: #fff !important;
    }
}

.file-ext-css .fileuploader-item-icon {
    background-color: #26a69a !important;

    i {
        color: #fff !important;
    }
}

.file-ext-html .fileuploader-item-icon {
    background-color: #cf33a8 !important;

    i {
        color: #fff !important;
    }
}

/* popup */
.fileuploader-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #191d1e;
	z-index: $fileuploader-popup-zIndex;
    @extend %fileuploader-animation;
    animation-duration: 0.4s;

    &.loading:after {
        @extend %fileuploader-loader;
        @extend %transform-to-center;
        width: 48px;
        height: 48px;
        z-index: 8;
    }

    .fileuploader-popup-preview {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: auto;
        z-index: 2;
    }

    .fileuploader-popup-node {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        max-width: 100%;
        height: 100%;
        min-width: 20px;
        min-height: 20px;
        padding: $fileuploader-popup-headerHeight + $fileuploader-popup-padding $fileuploader-popup-move-width $fileuploader-popup-footerHeight + $fileuploader-popup-padding/2;
        overflow: hidden;
        @extend %fileuploader-animation;

		&.is-zoomed {
			display: block;
		}

        .reader-node {
            position: relative;
            max-width: 100%;
            max-height: 100%;
            text-align: center;
            -webkit-transform: translateZ(0);
                    transform: translateZ(0);

            &.is-movable {
                cursor: grab;
            }

            &.is-moving,
            &.is-amoving:hover {
                cursor: grabbing;

                .area-move,
                .point {
                    cursor: grabbing !important;
                }
            }
        }

        &.node-image .reader-node > img,
        &.node-video .reader-node > video,
        &.node-audio .reader-node > audio,
        &.node-astext .reader-node > div {
            width: auto;
            max-width: 100%;
            max-height: 100%;
            min-width: 0;
            margin: 0;
            padding: 0;
            color: #47525d;
            background: #fafafa;
            box-shadow: 0 0 18px rgba(0,0,0,0.4);
            -webkit-transform: translateZ(0);
                    transform: translateZ(0);
            border-radius: 0;
            outline: 0;
        }

        &.node-audio .reader-node audio {
            width: 450px;
            border-radius: 34px;
        }

		&.node-application .reader-node iframe {
            width: 100%;
            height: 100%;
			border: 0;
			border-radius: 3px;
        }

        &.node-astext .reader-node div {
            max-width: 992px;
            padding: 20px;
            margin: 0 auto;
            font-size: 14px;
            line-height: 16px;
            text-align: left;
            overflow-y: auto;
            white-space: pre-wrap;
        }

        &.has-node-centered {
            display: block;

            .reader-node {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }
        }

        .fileuploader-popup-file-icon {
            position: relative;
            display: inline-block;
            width: 80px;
            height: 80px;
            background: url("data:image/svg+xml;base64,#{$icon-file}") no-repeat center;
            background-size: contain;
            @extend %user-select-none;

            div {
                position: absolute;
                bottom: 14px;
                left: 0;
                padding: 4px 6px;
                border-radius: 4px;
                color: #fff;
                max-width: 100%;
                background-image: none;
                word-wrap: break-word;

                &.is-bright-color {
                    color: #888;
                }

                i {
                    text-transform: uppercase;
                    font-style: normal;
                    font-weight: bold;
                    white-space: nowrap;
                    visibility: visible;
                }
            }
        }
    }

    .fileuploader-popup-content {
        color: $fileuploader-popup-content-color;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.4);

         ul {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                display: inline-block;
                padding: 0;
                margin: 0;

                & + li {
                    margin-left: $fileuploader-popup-padding;
                }
            }
        }
    }

    .fileuploader-popup-header {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding: $fileuploader-popup-padding;
        @include gradient-background(rgba(#000, 0), rgba(#000, 0.8), 180deg);
        z-index: 2;

        .fileuploader-popup-meta {
            display: flex;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;

            li:first-child {
                overflow: hidden;
            }

            span {
                display: block;
                color: $fileuploader-popup-content-muted;
                font-size: 14px;
            }

            h5 {
                max-width: 100%;
                margin: 4px 0 0;
                font-size: 14px;
                font-weight: bold;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        .fileuploader-popup-info:not(:empty) {
            flex: 1;
            margin-left: $fileuploader-popup-padding;
        }

        .fileuploader-popup-buttons {
            margin-left: $fileuploader-popup-padding;
        }

        .fileuploader-popup-button {
            @extend %fileuploader-button-default;
            padding: 14px 24px;
            text-shadow: none;

            &.button-success {
                @extend %fileuploader-button-theme;
            }
        }
    }

    .fileuploader-popup-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        @include gradient-background(rgba(#000, 0), rgba(#000, 0.8), 0deg);
        z-index: 2;

        .fileuploader-popup-tools {
            li {
                [data-action] {
                    display: inline-block;
                    padding: $fileuploader-popup-padding;
                    padding-bottom: $fileuploader-popup-padding - 3px;
                    cursor: pointer;
                    text-decoration: none;
                    color: $fileuploader-popup-content-color;
                    border-bottom: 3px solid transparent;
                    @extend %fileuploader-transition-soft;
                    @extend %user-select-none;

                    i {
                        display: inline-block;
                        font-size: 18px;
						margin-top: -4px;
                        margin-right: 6px;
                        vertical-align: middle;
                    }

                    &:hover {
                        border-bottom-color: $fileuploader-color-active;
                        color: #fff;
                    }
                }
            }
        }

        .fileuploader-popup-zoomer {
            font-size: 14px;

            button[data-action] {
                width: 24px;
                height: 24px;
                line-height: 24px;
                font-size: 16px;
                border: none;
                border-radius: 50%;
                padding: 0;
                vertical-align: middle;
                color: $fileuploader-popup-content-color;
                background: rgba(#fff, 0.1);
                text-shadow: none;
                @extend %fileuploader-transition-soft;

                &:hover {
                    background: rgba(#fff, 0.3);
                }
            }

            input {
                display: inline-block;
                -webkit-appearance: none;
                width: 130px;
                padding: 0;
                margin: 0 16px;
                vertical-align: middle;
                background: transparent;

                &:focus {
                    outline: none;
                }

                &::-webkit-slider-runnable-track {
                    @include fileuploader-range-track();
                }

                &::-webkit-slider-thumb {
                    @include fileuploader-range-thumb();
                }

                &::-moz-range-track {
                    @include fileuploader-range-track();
                }

                &::-moz-range-thumb {
                    @include fileuploader-range-thumb();
                }
            }

            span {
                display: inline-block;
                min-width: 40px;
                text-align: center;
                margin-left: 6px;
                color: #fff;
                vertical-align: middle;
            }
        }
    }

    .fileuploader-popup-move {
        position: absolute;
        display: none;
        width: $fileuploader-popup-move-width;
        height: 100%;
        font-size: 24px;
        bottom: 0;
        left: 0;
        color: #fff;
        opacity: 0.4;
        cursor: pointer;
        z-index: 1;
        @extend %user-select-none;

        &:hover {
            opacity: 1;
        }

        &:after {
            position: absolute;
            @extend %transform-to-center;
        }

        &[data-action="next"] {
            left: auto;
            right: 0;
        }

    }

    .fileuploader-popup-has-arrows .fileuploader-popup-move {
        display: inline-block;
    }

    .fileuploader-cropper,
    .fileuploader-cropper * {
        @extend %user-select-none;
    }

    .fileuploader-cropper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(17,20,27,.65);
        z-index: 9;

        .fileuploader-cropper-area {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            z-index: 2;
            -webkit-transform: translateZ(0);
               -moz-transform: translateZ(0);
                -ms-transform: translateZ(0);
                 -o-transform: translateZ(0);
                    transform: translateZ(0);

            &.has-grid:before,
            &.has-grid:after {
                content: '';
                position: absolute;
                border: 1px solid rgba(250, 250, 250, 0.8);
                opacity: 0;
                -webkit-transition: all 0.4s ease;
                        transition: all 0.4s ease;
                z-index: 1;
            }

            &.has-grid:before {
                top: 0;
                left: 50%;
                height: 100%;
                width: 34%;
                border-top: 0;
                border-bottom: 0;
                -webkit-transform: translateX(-50%);
                        transform: translateX(-50%);
            }

            &.has-grid:after {
                top: 50%;
                left: 0;
                height: 34%;
                width: 100%;
                border-left: 0;
                border-right: 0;
                -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
            }

            &.has-grid.moving:before,
            &.has-grid.moving:after {
                opacity: 1;
            }

            .point {
                position: absolute;
                width: $fileuploader-cropper-pointWidth;
                height: $fileuploader-cropper-pointWidth;
                z-index: 3;

                &:after {
                    content: '';
                    width: $fileuploader-cropper-pointWidth/2;
                    height: $fileuploader-cropper-pointWidth/2;
                    position: absolute;
                    background: #fff;
                    box-shadow: 0 0 6px rgba(0,0,0,0.4);
                    border-radius: 50%;
                    @extend %transform-to-center;
                }

                &.point-a {
                    top: $fileuploader-cropper-pointWidth/2 * -1;
                    left: $fileuploader-cropper-pointWidth/2 * -1;
                    cursor: nw-resize;
                }
                &.point-b {
                    top: $fileuploader-cropper-pointWidth/2 * -1;
                    left: 50%;
                    margin-left: $fileuploader-cropper-pointWidth/2 * -1;
                    cursor: n-resize;
                }
                &.point-c {
                    top: $fileuploader-cropper-pointWidth/2 * -1;
                    right: $fileuploader-cropper-pointWidth/2 * -1;
                    cursor: ne-resize;
                }
                &.point-d {
                    top: 50%;
                    right: $fileuploader-cropper-pointWidth/2 * -1;
                    margin-top: $fileuploader-cropper-pointWidth/2 * -1;
                    cursor: w-resize;
                }
                &.point-e {
                    bottom: $fileuploader-cropper-pointWidth/2 * -1;
                    right: $fileuploader-cropper-pointWidth/2 * -1;
                    cursor: nw-resize;
                }
                &.point-f {
                    bottom: $fileuploader-cropper-pointWidth/2 * -1;
                    left: 50%;
                    margin-left: $fileuploader-cropper-pointWidth/2 * -1;
                    cursor: s-resize;
                }
                &.point-g {
                    bottom: $fileuploader-cropper-pointWidth/2 * -1;
                    left: $fileuploader-cropper-pointWidth/2 * -1;
                    cursor: sw-resize;
                }
                &.point-h {
                    left: $fileuploader-cropper-pointWidth/2 * -1;
                    top: 50%;
                    margin-top: $fileuploader-cropper-pointWidth/2 * -1;
                    cursor: w-resize;
                }
            }

            .area-move {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 2;
                cursor: move;

                &:after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border: 1px solid rgba(#fff, 0.8);
                }
            }

            .area-image {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 100%;

                img {
                    width: auto;
                    height: auto;
                    max-width: none;
                    max-height: none;
                    position: absolute;
                    left: 0;
                    top: 0;
                    -webkit-transform-origin: top left;
                            transform-origin: top left;
                }
            }

            .area-info {
                position: absolute;
                bottom: -12px;
                left: 50%;
                color: #fff;
                font-family: sans-serif;
                line-height: 1;
                font-size: 12px;
                text-align: center;
                padding: 4px 8px;
                background: rgba(#000, 0.6);
                border-radius: 14px;
                white-space: nowrap;
                opacity: 0;
                -webkit-transform: translateX(-50%) translateY(100%);
                        transform: translateX(-50%) translateY(100%);
                -webkit-transition: all 0.4s ease;
                        transition: all 0.4s ease;
                z-index: 2;
            }

            &.show-info .area-info {
                opacity: 0;
            }
        }
    }
}

/* responsive */
@media all and (max-width: 768px) {
    .fileuploader-popup {
        .fileuploader-popup-header {
            display: block;
            padding: 0;

            .fileuploader-popup-meta {
                padding: $fileuploader-popup-padding;
            }

            .fileuploader-popup-buttons {
                position: fixed;
                left: 0;
                bottom: $fileuploader-popup-padding;
                width: 100%;
                margin: 0;
                text-align: center;
            }
        }

        .fileuploader-popup-node {
            padding-left: $fileuploader-popup-padding;
            padding-right: $fileuploader-popup-padding;
            padding-bottom: 117px;
        }

        .fileuploader-popup-footer {
            bottom: 61px;
            background: none;

            .fileuploader-popup-zoomer {
                display: none;
            }

            .fileuploader-popup-tools li a:hover {
                border-color: transparent;
            }
        }

        .fileuploader-popup-move {
            width: $fileuploader-popup-moveSmall-width;
        }

        .fileuploader-popup-has-arrows .fileuploader-popup-node {
            padding-left: $fileuploader-popup-moveSmall-width;
            padding-right: $fileuploader-popup-moveSmall-width;
        }
    }
}

/* animation */
@-webkit-keyframes fileuploaderFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fileuploaderFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}