@-webkit-keyframes slide-in {  0% {   opacity: 0;   -webkit-transform: translateY(40px);   -moz-transform: translateY(40px);   -ms-transform: translateY(40px);   -o-transform: translateY(40px);   transform: translateY(40px)  }  30% {   opacity: 1;   -webkit-transform: translateY(0px);   -moz-transform: translateY(0px);   -ms-transform: translateY(0px);   -o-transform: translateY(0px);   transform: translateY(0px)  } } @-moz-keyframes slide-in {  0% {   opacity: 0;   -webkit-transform: translateY(40px);   -moz-transform: translateY(40px);   -ms-transform: translateY(40px);   -o-transform: translateY(40px);   transform: translateY(40px)  }  30% {   opacity: 1;   -webkit-transform: translateY(0px);   -moz-transform: translateY(0px);   -ms-transform: translateY(0px);   -o-transform: translateY(0px);   transform: translateY(0px)  } } @keyframes slide-in {  0% {   opacity: 0;   -webkit-transform: translateY(40px);   -moz-transform: translateY(40px);   -ms-transform: translateY(40px);   -o-transform: translateY(40px);   transform: translateY(40px)  }  30% {   opacity: 1;   -webkit-transform: translateY(0px);   -moz-transform: translateY(0px);   -ms-transform: translateY(0px);   -o-transform: translateY(0px);   transform: translateY(0px)  } } @-webkit-keyframes pulse {  0% {   -webkit-transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1)  }  10% {   -webkit-transform: scale(1.1);   -moz-transform: scale(1.1);   -ms-transform: scale(1.1);   -o-transform: scale(1.1);   transform: scale(1.1)  }  20% {   -webkit-transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1)  } } @-moz-keyframes pulse {  0% {   -webkit-transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1)  }  10% {   -webkit-transform: scale(1.1);   -moz-transform: scale(1.1);   -ms-transform: scale(1.1);   -o-transform: scale(1.1);   transform: scale(1.1)  }  20% {   -webkit-transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1)  } } @keyframes pulse {  0% {   -webkit-transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1)  }  10% {   -webkit-transform: scale(1.1);   -moz-transform: scale(1.1);   -ms-transform: scale(1.1);   -o-transform: scale(1.1);   transform: scale(1.1)  }  20% {   -webkit-transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1)  } } .dropzone, .dropzone * {  box-sizing: border-box } .dropzone {  min-height: 150px;  border: 1px solid #dee2e6; border-radius: .25rem;  background: #fff; padding: 0;  display: flex; justify-content: center; } .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: .5 } .dropzone .dz-message {  text-align: center;  padding: 1rem;  border: none; } .dropzone .dz-message .dz-button {  background: none;  color: inherit;  border: none;  padding: 0;  font: inherit;  cursor: pointer;  outline: inherit } .dropzone .dz-preview {  position: relative; display: flex;  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: #fff } .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; opacity: 0;  font-size: 13px; padding: 2em 1em;  color: rgba(0, 0, 0, .9);  line-height: 150% } .dropzone .dz-preview .dz-details .dz-size { margin-bottom: .25em; 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, .8);  background-color: rgba(255, 255, 255, .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, .4);  padding: 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 {  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-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;  left:40px; top:50%; margin-top:-20px; } .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg { display: block; width: 40px; height: 40px; } .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;  width:80px; height:16px;  left:20px; bottom:20px;  background: rgba(255, 255, 255, .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; opacity: 0;  position: absolute;  display: block; display: none;  -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;  font-size: 12px;  top:80px; left:140px;  padding:.75em; color: #be2626 }