.draggableBuckets {
  display: block;
  gap: 1rem;
  margin: 2px;
}

.elements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 2rem;
  min-height: 3.75rem;
  margin-top: 2px;
  margin-bottom: 2px;
  height: auto;
}

.element {
  display: flex;
  justify-content: center;
  min-width: 1.5rem;
  background-color: hsl(0, 0%, 95%);
  border: solid 1px darkgrey;
  border-radius: 3px;
  cursor: grab;
  padding: 0px 1px 1px 1px;
}

.bucket {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 2rem;
  min-height: 3.75rem;
  margin-top: 2px;
  margin-bottom: 2px;
  height: auto;
}

.draggableBuckets-invalid {
  border: solid 1px #a94442;
  margin-bottom: 48px;
}

.draggableBuckets-invalid::after {
  content: attr(data-error-message);
  display: block;
  color: #a94442;
  position: absolute;
  margin-top: 8px;
}
