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

#component-list li {
   padding: 5px 10px;
   border: 1px solid silver;
   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: gray;
}

.lightgray {
   color: silver;
}

#component-list li:hover {
   /* fixed invalid rgb() */
   background: rgba(245, 245, 245, 1) !important;
   color: lightslategray;
   border: 1px solid silver;
   cursor: pointer;
}

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

/* Delete icon (the red "x") */
span.del {
   color: #dc3545;
   /* Bootstrap danger red */
   opacity: .75;
   margin-right: 1rem;
   padding-right: .5rem;
   border-right: 1px dotted lightslategray;
}

/* Make sure the "x" is fully red and opaque when either it or the li is hovered */
span.del:hover,
#component-list li:hover .del {
   color: #dc3545;
   opacity: 1;
   z-index: 1000;
}

/* If using Font Awesome Duotone (fad), ensure both layers go red */
span.del i.fad {
   --fa-primary-color: #dc3545;
   --fa-secondary-color: #dc3545;
   --fa-secondary-opacity: 0.75;
   /* matches base opacity */
}

span.del:hover i.fad,
#component-list li:hover .del i.fad {
   --fa-secondary-opacity: 1;
}

.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-grip-dots-vertical {
   float: right;
   padding-top: .25rem;
}

/* Bouncing arrow icon */
.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;
   /* was '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;
   }
}