@keyframes passing-through {
  0% {
    opacity: 0;
    transform: translateY(40px)
  }

  30%,70% {
    opacity: 1;
    transform: translateY(0px)
  }

  100% {
    opacity: 0;
    transform: translateY(-40px)
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(40px)
  }

  30% {
    opacity: 1;
    transform: translateY(0px)
  }
}

@keyframes pulse {
  0% {
    transform: scale(1)
  }

  10% {
    transform: scale(1.1)
  }

  20% {
    transform: scale(1)
  }
}

.dropzone, .dropzone * {
  box-sizing: border-box
}

.dropzone {
  min-height: 150px;
  border: 1px solid rgba(0,0,0,.8);
  border-radius: 5px;
  padding: 20px 20px
}

  dz-clickable {
    cursor: pointer
  }

    dz-clickable * {
      cursor: default
    }

    dz-clickable .dz-message, dz-clickable .dz-message * {
      cursor: pointer
    }

  dz-started .dz-message {
    display: none
  }

  dz-drag-hover {
    border-style: solid
  }

    dz-drag-hover .dz-message {
      opacity: .5
    }

  .dz-message {
    text-align: center;
    margin: 2em 0
  }

    .dz-message .dz-button {
      background: none;
      color: inherit;
      border: none;
      padding: 0;
      font: inherit;
      cursor: pointer;
      outline: inherit
    }

  .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px
  }

    .dz-preview:hover {
      z-index: 1000
    }

      .dz-preview:hover .dz-details {
        opacity: 1
      }

    .dz-preview.dz-file-preview .dz-image {
      border-radius: 20px;
      background: #999;
      background: linear-gradient(to bottom, #eee, #ddd)
    }

    .dz-preview.dz-file-preview .dz-details {
      opacity: 1
    }

    .dz-preview.dz-image-preview {
      background: #fff
    }

      .dz-preview.dz-image-preview .dz-details {
        transition: opacity .2s linear
      }

    .dz-preview .dz-remove {
      font-size: 14px;
      text-align: center;
      display: block;
      cursor: pointer;
      border: none
    }

      .dz-preview .dz-remove:hover {
        text-decoration: underline
      }

    .dz-preview:hover .dz-details {
      opacity: 1
    }

    .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,.9);
      line-height: 150%
    }

      .dz-preview .dz-details .dz-size {
        margin-bottom: 1em;
        font-size: 16px
      }

      .dz-preview .dz-details .dz-filename {
        white-space: nowrap
      }

        .dz-preview .dz-details .dz-filename:hover span {
          border: 1px solid rgba(200,200,200,.8);
          background-color: rgba(255,255,255,.8)
        }

        .dz-preview .dz-details .dz-filename:not(:hover) {
          overflow: hidden;
          text-overflow: ellipsis
        }

          .dz-preview .dz-details .dz-filename:not(:hover) span {
            border: 1px solid transparent
          }

        .dz-preview .dz-details .dz-filename span, .dz-preview .dz-details .dz-size span {
          background-color: rgba(255,255,255,.4);
          padding: 0 .4em;
          border-radius: 3px
        }

    .dz-preview:hover .dz-image img {
      transform: scale(1.05, 1.05);
      filter: blur(8px)
    }

    .dz-preview .dz-image {
      border-radius: 20px;
      overflow: hidden;
      width: 120px;
      height: 120px;
      position: relative;
      display: block;
      z-index: 10
    }

      .dz-preview .dz-image img {
        display: block
      }

    .dz-preview.dz-success .dz-success-mark {
      animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1)
    }

    .dz-preview.dz-error .dz-error-mark {
      opacity: 1;
      animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)
    }

    .dz-preview .dz-success-mark, .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;
      background: rgba(0,0,0,.8);
      border-radius: 50%
    }

      .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
        display: block;
        width: 54px;
        height: 54px;
        fill: #fff
      }

    .dz-preview.dz-processing .dz-progress {
      opacity: 1;
      transition: all .2s linear
    }

    .dz-preview.dz-complete .dz-progress {
      opacity: 0;
      transition: opacity .4s ease-in
    }

    .dz-preview:not(.dz-processing) .dz-progress {
      animation: pulse 6s ease infinite
    }

    .dz-preview .dz-progress {
      opacity: 1;
      z-index: 1000;
      pointer-events: none;
      position: absolute;
      height: 20px;
      top: 50%;
      margin-top: -10px;
      left: 15%;
      right: 15%;
      border: 3px solid rgba(0,0,0,.8);
      background: rgba(0,0,0,.8);
      border-radius: 10px;
      overflow: hidden
    }

      .dz-preview .dz-progress .dz-upload {
        background: #fff;
        display: block;
        position: relative;
        height: 100%;
        width: 0;
        transition: width 300ms ease-in-out;
        border-radius: 17px
      }

    .dz-preview.dz-error .dz-error-message {
      display: block
    }

    .dz-preview.dz-error:hover .dz-error-message {
      opacity: 1;
      pointer-events: auto
    }

    .dz-preview .dz-error-message {
      pointer-events: none;
      z-index: 1000;
      position: absolute;
      display: block;
      display: none;
      opacity: 0;
      transition: opacity .3s ease;
      border-radius: 8px;
      font-size: 13px;
      top: 130px;
      left: -10px;
      width: 140px;
      background: #b10606;
      padding: .5em 1em;
      color: #fff
    }

      .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 #b10606
      }