#component-list {
  margin-top: 0;
  /* border: 1px solid silver; */
  min-height: 10rem;
  /* padding: .5rem; */
  border-radius: 3px;
}

#component-list li {
  padding: 5px 10px;
  border: none;
  margin-bottom: 8px;
  background: white;
  border-radius: .25rem !important;
}

#add-form-component {
  height: 2.5rem;
}

.example-component {
  border: 1px dashed lightgray !important;
  color: silver;
}

#row-stack {
  padding: .5rem;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

#row-stack p {
  border-bottom: 1px solid lightgray;
  padding-bottom: .5rem;
  color: var(--graphite);
}

.lightgray {
  color: silver;
}

#component-list li:hover {
  background: rgb(245, 245, 245, .5) !important;
  color: lightslategray;
  border: 1px solid silver;
}

.delete-the-columns,
.example-component {
  cursor: pointer;
}

/* .delete-the-columns:before {
  font-family: "Font Awesome 5 Duotone";
  font-weight: 900;
  content: "\f000d\00a0\00a0" !important;
  color: #a94442;
} */

span.del {
  color: RGBA(255, 69, 0, .5);
  opacity: .75;
  margin-right: 1rem;
  padding-right: .5rem;
  border-right: 1px dotted lightslategray;
}

span.del:hover {
  color: orangered;
}

.mistyrose {
  border: 1px solid RGBA(255, 69, 0, .5) !important;
}

.list-examples-span {
  margin-left: .5rem;
  font-weight: 600;
}

/* Align the up-down arrows to the right */
.fa-ellipsis-v {
  float: right;
  padding-top: .25rem;
}

/* Bounding arrow icon -- thanks to https://codepen.io/dragoeco/pen/ZWpGqo */
.bounce {
  display: inline-block;
  position: relative;
  -moz-animation: bounce 0.5s infinite linear;
  -o-animation: bounce 0.5s infinite linear;
  -webkit-animation: bounce 0.5s infinite linear;
  animation: bounce 0.75s infinite linear;
  color: 000;
}

@-webkit-keyframes bounce {
  0% {
    top: 0;
  }

  50% {
    top: -0.2em;
  }

  70% {
    top: -0.3em;
  }

  100% {
    top: 0;
  }
}

@-moz-keyframes bounce {
  0% {
    top: 0;
  }

  50% {
    top: -0.2em;
  }

  70% {
    top: -0.3em;
  }

  100% {
    top: 0;
  }
}

@-o-keyframes bounce {
  0% {
    top: 0;
  }

  50% {
    top: -0.2em;
  }

  70% {
    top: -0.3em;
  }

  100% {
    top: 0;
  }
}

@-ms-keyframes bounce {
  0% {
    top: 0;
  }

  50% {
    top: -0.2em;
  }

  70% {
    top: -0.3em;
  }

  100% {
    top: 0;
  }
}

@keyframes bounce {
  0% {
    top: 0;
  }

  50% {
    top: -0.2em;
  }

  70% {
    top: -0.3em;
  }

  100% {
    top: 0;
  }
}