/*



.dropzone,

.dropzone * {

    box-sizing: border-box;

}



.dropzone {

    min-height: 190px;

    border: 1px solid #e5e5e5;

    background: white;

    padding: 5px;

    width: 100%;

    max-height: 190px;

    overflow: auto;

}



.dropzone.dz-clickable {

    cursor: pointer;

}



.dropzone.dz-clickable * {

    cursor: default;

}



.dropzone.dz-clickable .dz-message,

.dropzone.dz-clickable .dz-message * {

    cursor: pointer;

}



.dropzone.dz-started .dz-message {

    display: none;

}



.dropzone.dz-drag-hover {

    border-style: solid;

}



.dropzone.dz-drag-hover .dz-message {

    opacity: 0.5;

}



.dropzone .dz-message {

    text-align: center;

    margin: 2em 0;

}



.dropzone .dz-preview {

    position: relative;

    display: inline-block;

    vertical-align: top;

    margin: 16px;

    min-height: 100px;

}



.dropzone .dz-preview:hover {

    z-index: 1000;

}



.dropzone .dz-preview:hover .dz-details {

    opacity: 1;

}



.dropzone .dz-preview.dz-file-preview .dz-image {

    border-radius: 20px;

    background: #999;

    background: linear-gradient(to bottom, #eee, #ddd);

}



.dropzone .dz-preview.dz-file-preview .dz-details {

    opacity: 1;

}



.dropzone .dz-preview.dz-image-preview {

    background: white;

}



.dropzone .dz-preview.dz-image-preview .dz-details {

    -webkit-transition: opacity 0.2s linear;

    -moz-transition: opacity 0.2s linear;

    -ms-transition: opacity 0.2s linear;

    -o-transition: opacity 0.2s linear;

    transition: opacity 0.2s linear;

}



.dropzone .dz-preview .dz-remove {

    font-size: 14px;

    text-align: center;

    display: block;

    cursor: pointer;

    border: none;

}



.dropzone .dz-preview .dz-remove:hover {

    text-decoration: underline;

}



.dropzone .dz-preview:hover .dz-details {

    opacity: 1;

}



.dropzone .dz-preview .dz-details {

    z-index: 20;

    position: absolute;

    top: 0;

    left: 0;

    opacity: 0;

    font-size: 13px;

    min-width: 100%;

    max-width: 100%;

    padding: 2em 1em;

    text-align: center;

    color: rgba(0, 0, 0, 0.9);

    line-height: 150%;

}



.dropzone .dz-preview .dz-details .dz-size {

    margin-bottom: 1em;

    font-size: 16px;

}



.dropzone .dz-preview .dz-details .dz-filename {

    white-space: nowrap;

}



.dropzone .dz-preview .dz-details .dz-filename:hover span {

    border: 1px solid rgba(200, 200, 200, 0.8);

    background-color: rgba(255, 255, 255, 0.8);

}



.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {

    overflow: hidden;

    text-overflow: ellipsis;

}



.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {

    border: 1px solid transparent;

}



.dropzone .dz-preview .dz-details .dz-filename span,

.dropzone .dz-preview .dz-details .dz-size span {

    background-color: rgba(255, 255, 255, 0.4);

    padding: 0 0.4em;

    border-radius: 3px;

}



.dropzone .dz-preview:hover .dz-image img {

    -webkit-transform: scale(1.05, 1.05);

    -moz-transform: scale(1.05, 1.05);

    -ms-transform: scale(1.05, 1.05);

    -o-transform: scale(1.05, 1.05);

    transform: scale(1.05, 1.05);

    -webkit-filter: blur(8px);

    filter: blur(8px);

}



.dropzone .dz-preview .dz-image {

    border-radius: 20px;

    overflow: hidden;

    width: 120px;

    height: 120px;

    position: relative;

    display: block;

    z-index: 10;

}



.dropzone .dz-preview .dz-image img {

    display: block;

}



.dropzone .dz-preview.dz-success .dz-success-mark {

    -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

    -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

    -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

    -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

    animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

}



.dropzone .dz-preview.dz-error .dz-error-mark {

    opacity: 1;

    -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

    -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

    -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

    -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

    animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

}



.dropzone .dz-preview .dz-success-mark,

.dropzone .dz-preview .dz-error-mark {

    pointer-events: none;

    opacity: 0;

    z-index: 500;

    position: absolute;

    display: block;

    top: 50%;

    left: 50%;

    margin-left: -27px;

    margin-top: -27px;

}



.dropzone .dz-preview .dz-success-mark svg,

.dropzone .dz-preview .dz-error-mark svg {

    display: block;

    width: 54px;

    height: 54px;

}



.dropzone .dz-preview.dz-processing .dz-progress {

    opacity: 1;

    -webkit-transition: all 0.2s linear;

    -moz-transition: all 0.2s linear;

    -ms-transition: all 0.2s linear;

    -o-transition: all 0.2s linear;

    transition: all 0.2s linear;

}



.dropzone .dz-preview.dz-complete .dz-progress {

    opacity: 0;

    -webkit-transition: opacity 0.4s ease-in;

    -moz-transition: opacity 0.4s ease-in;

    -ms-transition: opacity 0.4s ease-in;

    -o-transition: opacity 0.4s ease-in;

    transition: opacity 0.4s ease-in;

}



.dropzone .dz-preview:not(.dz-processing) .dz-progress {

    -webkit-animation: pulse 6s ease infinite;

    -moz-animation: pulse 6s ease infinite;

    -ms-animation: pulse 6s ease infinite;

    -o-animation: pulse 6s ease infinite;

    animation: pulse 6s ease infinite;

}



.dropzone .dz-preview .dz-progress {

    opacity: 1;

    z-index: 1000;

    pointer-events: none;

    position: absolute;

    height: 16px;

    left: 50%;

    top: 50%;

    margin-top: -8px;

    width: 80px;

    margin-left: -40px;

    background: rgba(255, 255, 255, 0.9);

    -webkit-transform: scale(1);

    border-radius: 8px;

    overflow: hidden;

}

.dropzone .dz-preview .dz-progress .dz-upload {

    background: #333;

    background: linear-gradient(to bottom, #666, #444);

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    width: 0;

    -webkit-transition: width 300ms ease-in-out;

    -moz-transition: width 300ms ease-in-out;

    -ms-transition: width 300ms ease-in-out;

    -o-transition: width 300ms ease-in-out;

    transition: width 300ms ease-in-out;

}



.dropzone .dz-preview.dz-error .dz-error-message {

    display: block;

}



.dropzone .dz-preview.dz-error:hover .dz-error-message {

    opacity: 1;

    pointer-events: auto;

}



.dropzone .dz-preview .dz-error-message {

    pointer-events: none;

    z-index: 1000;

    position: absolute;

    display: block;

    display: none;

    opacity: 0;

    -webkit-transition: opacity 0.3s ease;

    -moz-transition: opacity 0.3s ease;

    -ms-transition: opacity 0.3s ease;

    -o-transition: opacity 0.3s ease;

    transition: opacity 0.3s ease;

    border-radius: 8px;

    font-size: 13px;

    top: 130px;

    left: -10px;

    width: 140px;

    background: #be2626;

    background: linear-gradient(to bottom, #be2626, #a92222);

    padding: 0.5em 1.2em;

    color: white;

}



.dropzone .dz-preview .dz-error-message:after {

    content: '';

    position: absolute;

    top: -6px;

    left: 64px;

    width: 0;

    height: 0;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #be2626;

}







*/





/* The MIT License */



.dropzone,

.dropzone *,

.dropzone-previews,

.dropzone-previews * {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}



.dropzone {

    min-height: 190px;

    border: 1px solid #e5e5e5;

    background: white;

    padding: 5px;

    width: 100%;

    max-height: 190px;

    overflow-y: auto;

    overflow-x: hidden;

    position: relative;

}



.dropzone.dz-clickable {

    cursor: pointer;

}



.dropzone.dz-clickable .dz-message,

.dropzone.dz-clickable .dz-message span {

    cursor: pointer;

}



.dropzone.dz-clickable * {

    cursor: default;

}



.dropzone .dz-message {

    opacity: 1;

    -ms-filter: none;

    filter: none;

}



.dropzone.dz-drag-hover {

    border-color: rgba(0, 0, 0, 0.15);

    background: rgba(0, 0, 0, 0.04);

}



.dropzone.dz-started .dz-message {

    display: none;

}



.dropzone .dz-preview,

.dropzone-previews .dz-preview {

    background: rgba(255, 255, 255, 0.8);

    position: relative;

    display: inline-block;

    margin: 17px;

    vertical-align: top;

    border: 1px solid #acacac;

    padding: 6px 6px 6px 6px;

}



.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],

.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {

    display: none;

}



.dropzone .dz-preview .dz-details,

.dropzone-previews .dz-preview .dz-details {

    width: 100px;

    height: 100px;

    position: relative;

    background: #ebebeb;

    padding: 5px;

    margin-bottom: 22px;

}



.dropzone .dz-preview .dz-details .dz-filename,

.dropzone-previews .dz-preview .dz-details .dz-filename {

    overflow: hidden;

    height: 100%;

}



.dropzone .dz-preview .dz-details img,

.dropzone-previews .dz-preview .dz-details img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100px;

    height: 100px;

}



.dropzone .dz-preview .dz-details .dz-size,

.dropzone-previews .dz-preview .dz-details .dz-size {

    position: absolute;

    bottom: -28px;

    left: 3px;

    height: 28px;

    line-height: 28px;

}



.dropzone .dz-preview.dz-error .dz-error-mark,

.dropzone-previews .dz-preview.dz-error .dz-error-mark {

    display: block;

}



.dropzone .dz-preview.dz-success .dz-success-mark,

.dropzone-previews .dz-preview.dz-success .dz-success-mark {

    display: block;

}



.dropzone .dz-preview:hover .dz-details img,

.dropzone-previews .dz-preview:hover .dz-details img {

    display: none;

}



.dropzone .dz-preview .dz-success-mark,

.dropzone-previews .dz-preview .dz-success-mark,

.dropzone .dz-preview .dz-error-mark,

.dropzone-previews .dz-preview .dz-error-mark {

    display: none;

    position: absolute;

    width: 40px;

    height: 40px;

    font-size: 30px;

    text-align: center;

    right: -10px;

    top: -10px;

}



.dropzone .dz-preview .dz-success-mark,

.dropzone-previews .dz-preview .dz-success-mark {

    color: #8cc657;

}



.dropzone .dz-preview .dz-error-mark,

.dropzone-previews .dz-preview .dz-error-mark {

    color: #ee162d;

}



.dropzone .dz-preview .dz-progress,

.dropzone-previews .dz-preview .dz-progress {

    position: absolute;

    top: 100px;

    left: 6px;

    right: 6px;

    height: 6px;

    background: #d7d7d7;

    display: none;

}



.dropzone .dz-preview .dz-progress .dz-upload,

.dropzone-previews .dz-preview .dz-progress .dz-upload {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    width: 0%;

    background-color: #8cc657;

}



.dropzone .dz-preview.dz-processing .dz-progress,

.dropzone-previews .dz-preview.dz-processing .dz-progress {

    display: block;

}



.dropzone .dz-preview .dz-error-message,

.dropzone-previews .dz-preview .dz-error-message {

    display: none;

    position: absolute;

    top: 0px;

    left: 0px;

    background: rgba(245, 245, 245, 0.8);

    padding: 8px 10px;

    color: #800;

    min-width: 100%;

    max-width: 100%;

    z-index: 500;

}



.dropzone .dz-preview:hover.dz-error .dz-error-message,

.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {

    display: block;

}



.dropzone .dz-default.dz-message {

    opacity: 1;

    -ms-filter: none;

    filter: none;

    -webkit-transition: opacity 0.3s ease-in-out;

    -moz-transition: opacity 0.3s ease-in-out;

    -o-transition: opacity 0.3s ease-in-out;

    -ms-transition: opacity 0.3s ease-in-out;

    transition: opacity 0.3s ease-in-out;

    background-repeat: no-repeat;

    background-position: 0 0;

    position: absolute;

    width: 100%;

    height: 97%;

}



@media all and (-webkit-min-device-pixel-ratio: 1.5) {

    .dropzone .dz-default.dz-message {

        background-image: url("../images/spritemap@2x.png");

        -webkit-background-size: 428px 406px;

        -moz-background-size: 428px 406px;

        background-size: 428px 406px;

    }

}



.dropzone .dz-default.dz-message span {

    position: absolute;

    top: 43%;

    text-align: center;

    margin: 0 auto;

    display: block;

    width: 100%;

}



.dropzone.dz-square .dz-default.dz-message {

    background-position: 0 -123px;

    width: 268px;

    margin-left: -134px;

    height: 174px;

    margin-top: -87px;

}



.dropzone.dz-drag-hover .dz-message {

    opacity: 0.15;

    filter: alpha(opacity=15);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";

}



.dropzone.dz-started .dz-message {

    display: block;

    opacity: 0;

    filter: alpha(opacity=0);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

}



.dropzone .dz-preview,

.dropzone-previews .dz-preview {

    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);

    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);

    font-size: 14px;

}



.dropzone .dz-preview.dz-image-preview:hover .dz-details img,

.dropzone-previews .dz-preview.dz-image-preview:hover .dz-details img {

    display: block;

    opacity: 0.1;

    filter: alpha(opacity=10);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";

}



.dropzone .dz-preview.dz-success .dz-success-mark,

.dropzone-previews .dz-preview.dz-success .dz-success-mark {

    opacity: 1;

    -ms-filter: none;

    filter: none;

}



.dropzone .dz-preview.dz-error .dz-error-mark,

.dropzone-previews .dz-preview.dz-error .dz-error-mark {

    opacity: 1;

    -ms-filter: none;

    filter: none;

}



.dropzone .dz-preview.dz-error .dz-progress .dz-upload,

.dropzone-previews .dz-preview.dz-error .dz-progress .dz-upload {

    background: #ee1e2d;

}



.dropzone .dz-preview .dz-error-mark,

.dropzone-previews .dz-preview .dz-error-mark,

.dropzone .dz-preview .dz-success-mark,

.dropzone-previews .dz-preview .dz-success-mark {

    display: block;

    opacity: 0;

    filter: alpha(opacity=0);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    -webkit-transition: opacity 0.4s ease-in-out;

    -moz-transition: opacity 0.4s ease-in-out;

    -o-transition: opacity 0.4s ease-in-out;

    -ms-transition: opacity 0.4s ease-in-out;

    transition: opacity 0.4s ease-in-out;

    background-image: url("../images/spritemap.png");

    background-repeat: no-repeat;

}



@media all and (-webkit-min-device-pixel-ratio: 1.5) {

    .dropzone .dz-preview .dz-error-mark,

    .dropzone-previews .dz-preview .dz-error-mark,

    .dropzone .dz-preview .dz-success-mark,

    .dropzone-previews .dz-preview .dz-success-mark {

        background-image: url("../images/spritemap@2x.png");

        -webkit-background-size: 428px 406px;

        -moz-background-size: 428px 406px;

        background-size: 428px 406px;

    }

}



.dropzone .dz-preview .dz-error-mark span,

.dropzone-previews .dz-preview .dz-error-mark span,

.dropzone .dz-preview .dz-success-mark span,

.dropzone-previews .dz-preview .dz-success-mark span {

    display: none;

}



.dropzone .dz-preview .dz-error-mark,

.dropzone-previews .dz-preview .dz-error-mark {

    background-position: -268px -123px;

}



.dropzone .dz-preview .dz-success-mark,

.dropzone-previews .dz-preview .dz-success-mark {

    background-position: -268px -163px;

}



.dropzone .dz-preview .dz-progress .dz-upload,

.dropzone-previews .dz-preview .dz-progress .dz-upload {

    -webkit-animation: loading 0.4s linear infinite;

    -moz-animation: loading 0.4s linear infinite;

    -o-animation: loading 0.4s linear infinite;

    -ms-animation: loading 0.4s linear infinite;

    animation: loading 0.4s linear infinite;

    -webkit-transition: width 0.3s ease-in-out;

    -moz-transition: width 0.3s ease-in-out;

    -o-transition: width 0.3s ease-in-out;

    -ms-transition: width 0.3s ease-in-out;

    transition: width 0.3s ease-in-out;

    -webkit-border-radius: 2px;

    border-radius: 2px;

    position: absolute;

    top: 0;

    left: 0;

    width: 0%;

    height: 100%;

    background-image: url("../images/spritemap.png");

    background-repeat: repeat-x;

    background-position: 0px -400px;

}



@media all and (-webkit-min-device-pixel-ratio: 1.5) {

    .dropzone .dz-preview .dz-progress .dz-upload,

    .dropzone-previews .dz-preview .dz-progress .dz-upload {

        background-image: url("../images/spritemap@2x.png");

        -webkit-background-size: 428px 406px;

        -moz-background-size: 428px 406px;

        background-size: 428px 406px;

    }

}



.dropzone .dz-preview.dz-success .dz-progress,

.dropzone-previews .dz-preview.dz-success .dz-progress {

    display: block;

    opacity: 0;

    filter: alpha(opacity=0);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    -webkit-transition: opacity 0.4s ease-in-out;

    -moz-transition: opacity 0.4s ease-in-out;

    -o-transition: opacity 0.4s ease-in-out;

    -ms-transition: opacity 0.4s ease-in-out;

    transition: opacity 0.4s ease-in-out;

}



.dropzone .dz-preview .dz-error-message,

.dropzone-previews .dz-preview .dz-error-message {

    display: block;

    opacity: 0;

    filter: alpha(opacity=0);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    -webkit-transition: opacity 0.3s ease-in-out;

    -moz-transition: opacity 0.3s ease-in-out;

    -o-transition: opacity 0.3s ease-in-out;

    -ms-transition: opacity 0.3s ease-in-out;

    transition: opacity 0.3s ease-in-out;

}



.dropzone .dz-preview:hover.dz-error .dz-error-message,

.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {

    opacity: 1;

    -ms-filter: none;

    filter: none;

}



.dropzone a.dz-remove,

.dropzone-previews a.dz-remove {

    -webkit-border-radius: 2px;

    border-radius: 2px;

    border: 1px solid #eee;

    text-decoration: none;

    display: block;

    padding: 4px 5px;

    text-align: center;

    color: #aaa;

    margin-top: 26px;

    cursor: pointer;

}



.dropzone a.dz-remove:hover,

.dropzone-previews a.dz-remove:hover {

    color: #666;

}



@-moz-keyframes loading {

    0% {

        background-position: 0 -400px;

    }

    100% {

        background-position: -7px -400px;

    }

}



@-webkit-keyframes loading {

    0% {

        background-position: 0 -400px;

    }

    100% {

        background-position: -7px -400px;

    }

}



@-o-keyframes loading {

    0% {

        background-position: 0 -400px;

    }

    100% {

        background-position: -7px -400px;

    }

}



@-ms-keyframes loading {

    0% {

        background-position: 0 -400px;

    }

    100% {

        background-position: -7px -400px;

    }

}



@keyframes loading {

    0% {

        background-position: 0 -400px;

    }

    100% {

        background-position: -7px -400px;

    }

}