ul.list-group {
  min-height: 130px;
}

body {
  font-family: "Open Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Staatliches", sans-serif;
}

.btn-add, .btn-save {
  background-color: #2bff88;
  background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
  transition: all .5s ease-out;
  background-size: 1px 100px;
  background-position: 0 -10px;
}

.btn-delete, .btn-close {
  background-color: #ea0028;
  background-image: linear-gradient(180deg, #ff9a8b 0%, #ea0028 100%);
  transition: all .5s ease-out;
  background-size: 1px 100px;
  background-position: 0 -10px;
}

.btn-add:hover, .btn-save:hover, .btn-delete:hover, .btn-close:hover {
  background-position: 1px -50px;
}

.badge-primary {
  background-color: #61a3fe;
}

.dropover {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0 0 0.25rem 0.25rem;
}

.dropover-active {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0 0 0.25rem 0.25rem;
}

.bottom-trash {
  opacity: 0;
  color: #f1f1f1;
  font-size: 2.3rem;
  font-family: "Staatliches", sans-serif;
  transform: translateY(150px);
  transition: all .5s ease-in-out;
  background-color: rgba(234, 0, 39, 0.7);
}

.bottom-trash-drag {
  transform: translateY(0);
  opacity: 1;
}

.bottom-trash-active {
  background-color: rgba(234, 0, 39, 1);
}