.mdp-drop-zone
  border: 2px dashed #d3d7db
  border-radius: 8px
  text-align: center
  color: #a5a5a5
  cursor: pointer
  position: relative
  display: flex
  flex-wrap: wrap
  align-items: center
  align-content: center
  justify-content: center
  height: 80px
  transition: 1s

  &:hover
    height: 160px
    transition: 1s
    border: 2px dashed lighten( #0274e6, 20% )

  &.mdp-key-uploaded
    width: 100%
    height: 80px
    padding: 0
    border: 1px solid #d3d7db
    transition: 1s
    color: #0274e6
    -webkit-font-smoothing: antialiased

    .mdp-drop-zone-hover
      display: none
      opacity: 0
      color: rgb(170, 170, 170)
      width: 100%
      font-size: 13px
      margin-top: 12px
      transition: 1s

    &:hover,
    &:focus
      width: 100%
      height: 160px
      border: 2px dashed lighten( #0274e6, 20% )
      justify-content: center
      justify-items: center
      color: rgb(170, 170, 170)

      .mdp-drop-zone-hover
        display: block
        opacity: 1

  &.mdp-hover
    width: 100%
    height: 200px
    border: 2px dashed #d3d7db
    transition: 1s
    color: rgb(170, 170, 170)
    align-items: center
    justify-content: center

    .mdp-drop-zone-hover
      display: block
      opacity: 1

  &.mdp-busy
    pointer-events: none

    &:before
      content: ''
      display: block
      position: absolute
      left: -2px
      top: -2px
      bottom: -2px
      right: -2px
      background: #fff
      opacity: 0.7
      z-index: 1

    &:after
      content: 'refresh'
      font-size: 22px
      color: rgba(10,33,56,.6)
      font-family: 'Material Icons', sans-serif
      font-weight: normal
      font-style: normal
      line-height: 1
      letter-spacing: normal
      text-transform: none
      display: block
      position: absolute
      top: 50%
      left: 50%
      width: 22px
      height: 22px
      margin-left: -11px
      margin-top: -11px
      z-index: 1
      animation: mdp-rotate 2s infinite linear

.mdp-dnd

  .material-icons
    margin: 0 8px 0 16px
    font-size: 18px

  .mdp-messages
    font-size: 12px

    &.mdp-error
      color: #ff495c

    &.mdc-text-field-helper-line
      display: block

@keyframes mdp-rotate
  0%
    transform: rotate(0)
  100%
    transform: rotate(359deg)

.mdp-key-error
  background: #fff1f0
  color: #d85030
  border: 1px solid rgba(216, 80, 48, .3)
  padding: 10px
  border-radius: 4px
  text-shadow: 0 1px 0 #fff

#mdp-export-btn
  margin: 1.5rem 0
  min-width: 300px


