.modal-card-head {
  background-color: var(--modal-header-color);
  border-bottom-color: #282828;
}
.modal-card-body {
  background-color: var(--modal-body-color);
}
.modal-card-foot {
  background-color: var(--modal-footer-color);
  border-top-color: #282828;
}
.modal-background {
  background-color: rgba(10,10,10,.56);
}



/* Manage Spells Modal */

.is-filled-spell-slot {
  background-color: hsl(0, 0%, 21%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-filled-red-spell-slot {
  background-color: hsl(0, 25%, 21%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-filled-green-spell-slot {
  background-color: hsl(144, 25%, 21%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-filled-blue-spell-slot {
  background-color: hsl(220, 25%, 21%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-filled-brown-spell-slot {
  background-color: hsl(53, 23%, 21%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-filled-turquoise-spell-slot {
  background-color: hsl(184, 63%, 19%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-filled-purple-spell-slot {
  background-color: hsl(286, 63%, 19%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-filled-multiple-spell-slot {
  background-color: hsl(53, 57%, 27%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-empty-spell-slot {
  background-color: hsl(0, 0%, 35%)!important;
  color: #dddddd!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-empty-red-spell-slot {
  background-color: hsl(0, 25%, 35%)!important;
  color: #dddddd!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-empty-green-spell-slot {
  background-color: hsl(144, 25%, 35%)!important;
  color: #dddddd!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-empty-blue-spell-slot {
  background-color: hsl(220, 25%, 35%)!important;
  color: #dddddd!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-empty-brown-spell-slot {
  background-color: hsl(53, 19%, 33%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-empty-turquoise-spell-slot {
  background-color: hsl(184, 23%, 39%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-empty-purple-spell-slot {
  background-color: hsl(285, 23%, 35%)!important;
  color: #cccccc!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.is-empty-multiple-spell-slot {
  background-color: hsl(53, 47%, 35%)!important;
  color: #dddddd!important;
  border-color: hsl(210, 3%, 23%)!important;
}

.has-empty-slot-background {
  background-color: hsl(0, 0%, 14%);
}