:root {
  --primary: #303030;
  --secondary: #9a0c16;
}

body {
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--primary);
  font-size: 16px;
}

.bg-secondary {
  background-color: var(--secondary);
}

.preview-noupload {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

.remove-file {
  background-color: var(--secondary);
  color: #fff;
  position: absolute;
  top: -40px;
  right: 15px;
  padding: 5px 15px;
  border-radius: 5px;
}

.preview-file {
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.preview-file .file-type {
  background-color: #414141;
  color: white;
  display: inline-block;
  font-size: 12px;
  padding: 3px 15px;
  border-radius: 5px;
}
.preview-file .size {
  font-size: 12px;
}
.preview-file .title {
  margin-bottom: 5px;
}
.preview-file:not(:last-of-type) {
  border-bottom: 1px solid #ddd;
}

.preview-upload {
  flex-wrap: wrap;
}
.animate-wobble {
  animation: wobble 1s;
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}