/* Bootstrap Buttons Custom Colors */

/* PURPLE */
.btn-purple {
    background-color: var(--bs-purple-500) !important;
    color: #fff !important;
  }
  .btn-purple:hover {
    background-color: var(--bs-purple-600) !important;
  }
  .btn-light-purple {
    background-color: var(--bs-purple-300) !important;
    color: #fff !important;
  }
  .btn-light-purple:hover {
    background-color: var(--bs-purple-400) !important;
  }
  .btn-dark-purple {
    background-color: var(--bs-purple-700) !important;
    color: #fff !important;
  }
  .btn-dark-purple:hover {
    background-color: var(--bs-purple-800) !important;
  }
  .btn-outline-purple {
    background-color: transparent !important;
    border: 1px solid var(--bs-purple-500) !important;
    color: var(--bs-purple-500) !important;
  }
  .btn-outline-purple:hover {
    background-color: var(--bs-purple-500) !important;
    color: #fff !important;
  }

  .btn-outline-light-purple {
    background-color: transparent;
    border: 1px solid var(--bs-purple-300) !important;
    color: var(--bs-purple-300) !important;
  }
  .btn-outline-light-purple:hover {
    background-color: var(--bs-purple-300) !important;
    color: #fff !important;
  }

  .btn-outline-dark-purple {
    background-color: transparent !important;
    border: 1px solid var(--bs-purple-700) !important;
    color: var(--bs-purple-700) !important;
  }
  .btn-outline-dark-purple:hover {
    background-color: var(--bs-purple-700) !important;
    color: #fff !important;
  }

  /* Backgrounds */
  .bg-light-purple {
    background-color: var(--bs-purple-300) !important;
  }
  .bg-purple {
    background-color: var(--bs-purple-500) !important;
  }
  .bg-dark-purple {
    background-color: var(--bs-purple-700) !important;
  }

  /* Text */
  .text-purple {
    color: var(--bs-purple-500) !important;
  }

  /* Repeat similar rules for all colors */

  /* Example for Pink */
  .btn-pink {
    background-color: var(--bs-pink-500) !important;
    color: #fff !important;
  }
  .btn-pink:hover {
    background-color: var(--bs-pink-600) !important;
  }
  .btn-light-pink {
    background-color: var(--bs-pink-300) !important;
    color: #fff !important;
  }
  .btn-light-pink:hover {
    background-color: var(--bs-pink-400) !important;
  }
  .btn-dark-pink {
    background-color: var(--bs-pink-700) !important;
    color: #fff !important;
  }
  .btn-dark-pink:hover {
    background-color: var(--bs-pink-800) !important;
  }
  .btn-outline-pink {
    background-color: transparent !important;
    border: 1px solid var(--bs-pink-500) !important;
    color: var(--bs-pink-500) !important;
  }
  .btn-outline-pink:hover {
    background-color: var(--bs-pink-500) !important;
    color: #fff !important;
  }
  .bg-light-pink {
    background-color: var(--bs-pink-300) !important;
  }
  .bg-pink {
    background-color: var(--bs-pink-500) !important;
  }
  .bg-dark-pink {
    background-color: var(--bs-pink-700) !important;
  }
  .text-pink {
    color: var(--bs-pink-500) !important;
  }

  /* Repeat for other colors -red, -orange, -yellow, -green, -teal, -cyan, -grey, etc. */





  /* Example for RED */
  .btn-red {
    background-color: var(--bs-red-500) !important;
    color: #fff !important;
  }
  .btn-red:hover {
    background-color: var(--bs-red-600) !important;
  }
  .btn-light-red {
    background-color: var(--bs-red-300) !important;
    color: #fff !important;
  }
  .btn-light-red:hover {
    background-color: var(--bs-red-400) !important;
  }
  .btn-dark-red {
    background-color: var(--bs-red-700) !important;
    color: #fff !important;
  }
  .btn-dark-red:hover {
    background-color: var(--bs-red-800) !important;
  }
  .btn-outline-red {
    background-color: transparent !important;
    border: 1px solid var(--bs-red-500) !important;
    color: var(--bs-red-500) !important;
  }
  .btn-outline-red:hover {
    background-color: var(--bs-red-500) !important;
    color: #fff !important;
  }
  .bg-light-red {
    background-color: var(--bs-red-300) !important;
  }
  .bg-red {
    background-color: var(--bs-red-500) !important;
  }
  .bg-dark-red {
    background-color: var(--bs-red-700) !important;
  }
  .text-red {
    color: var(--bs-red-500) !important;
  }






  /* Example for ORANGE */
  .btn-orange {
    background-color: var(--bs-orange-500) !important;
    color: #fff !important;
  }
  .btn-orange:hover {
    background-color: var(--bs-orange-600) !important;
  }
  .btn-light-orange {
    background-color: var(--bs-orange-300) !important;
    color: #fff !important;
  }
  .btn-light-orange:hover {
    background-color: var(--bs-orange-400) !important;
  }
  .btn-dark-orange {
    background-color: var(--bs-orange-700) !important;
    color: #fff !important;
  }
  .btn-dark-orange:hover {
    background-color: var(--bs-orange-800) !important;
  }
  .btn-outline-orange {
    background-color: transparent !important;
    border: 1px solid var(--bs-orange-500) !important;
    color: var(--bs-orange-500) !important;
  }
  .btn-outline-orange:hover {
    background-color: var(--bs-orange-500) !important;
    color: #fff !important;
  }
  .bg-light-orange {
    background-color: var(--bs-orange-300) !important;
  }
  .bg-orange {
    background-color: var(--bs-orange-500) !important;
  }
  .bg-dark-orange {
    background-color: var(--bs-orange-700) !important;
  }
  .text-orange {
    color: var(--bs-orange-500) !important;
  }




  /* Example for GREEN */
  .btn-green {
    background-color: var(--bs-green-500) !important;
    color: #fff !important;
  }
  .btn-green:hover {
    background-color: var(--bs-green-600) !important;
  }
  .btn-light-green {
    background-color: var(--bs-green-300) !important;
    color: #fff !important;
  }
  .btn-light-green:hover {
    background-color: var(--bs-green-400) !important;
  }
  .btn-dark-green {
    background-color: var(--bs-green-700) !important;
    color: #fff !important;
  }
  .btn-dark-green:hover {
    background-color: var(--bs-green-800) !important;
  }
  .btn-outline-green {
    background-color: transparent !important;
    border: 1px solid var(--bs-green-500) !important;
    color: var(--bs-green-500) !important;
  }
  .btn-outline-green:hover {
    background-color: var(--bs-green-500) !important;
    color: #fff !important;
  }
  .bg-light-green {
    background-color: var(--bs-green-300) !important;
  }
  .bg-green {
    background-color: var(--bs-green-500) !important;
  }
  .bg-dark-green {
    background-color: var(--bs-green-700) !important;
  }
  .text-green {
    color: var(--bs-green-500) !important;
  }






  /* Example for YELLOW */
  .btn-yellow {
    background-color: var(--bs-yellow-500) !important;
    color: #fff !important;
  }
  .btn-yellow:hover {
    background-color: var(--bs-yellow-600) !important;
  }
  .btn-light-yellow {
    background-color: var(--bs-yellow-300) !important;
    color: #fff !important;
  }
  .btn-light-yellow:hover {
    background-color: var(--bs-yellow-400) !important;
  }
  .btn-dark-yellow {
    background-color: var(--bs-yellow-700) !important;
    color: #fff !important;
  }
  .btn-dark-yellow:hover {
    background-color: var(--bs-yellow-800) !important;
  }
  .btn-outline-yellow {
    background-color: transparent !important;
    border: 1px solid var(--bs-yellow-500) !important;
    color: var(--bs-yellow-500) !important;
  }
  .btn-outline-yellow:hover {
    background-color: var(--bs-yellow-500) !important;
    color: #fff !important;
  }
  .bg-light-yellow {
    background-color: var(--bs-yellow-300) !important;
  }
  .bg-yellow {
    background-color: var(--bs-yellow-500) !important;
  }
  .bg-dark-yellow {
    background-color: var(--bs-yellow-700) !important;
  }
  .text-yellow {
    color: var(--bs-yellow-500) !important;
  }






  /* Example for TEAL */
  .btn-teal {
    background-color: var(--bs-teal-500) !important;
    color: #fff !important;
  }
  .btn-teal:hover {
    background-color: var(--bs-teal-600) !important;
  }
  .btn-light-teal {
    background-color: var(--bs-teal-300) !important;
    color: #fff !important;
  }
  .btn-light-teal:hover {
    background-color: var(--bs-teal-400) !important;
  }
  .btn-dark-teal {
    background-color: var(--bs-teal-700) !important;
    color: #fff !important;
  }
  .btn-dark-teal:hover {
    background-color: var(--bs-teal-800) !important;
  }
  .btn-outline-teal {
    background-color: transparent !important;
    border: 1px solid var(--bs-teal-500) !important;
    color: var(--bs-teal-500) !important;
  }
  .btn-outline-teal:hover {
    background-color: var(--bs-teal-500) !important;
    color: #fff !important;
  }
  .bg-light-teal {
    background-color: var(--bs-teal-300) !important;
  }
  .bg-teal {
    background-color: var(--bs-teal-500) !important;
  }
  .bg-dark-teal {
    background-color: var(--bs-teal-700) !important;
  }
  .text-teal {
    color: var(--bs-teal-500) !important;
  }


  /* Example for CYAN */
  .btn-cyan {
    background-color: var(--bs-cyan-500) !important;
    color: #fff !important;
  }
  .btn-cyan:hover {
    background-color: var(--bs-cyan-600) !important;
  }
  .btn-light-cyan {
    background-color: var(--bs-cyan-300) !important;
    color: #fff !important;
  }
  .btn-light-cyan:hover {
    background-color: var(--bs-cyan-400) !important;
  }
  .btn-dark-cyan {
    background-color: var(--bs-cyan-700) !important;
    color: #fff !important;
  }
  .btn-dark-cyan:hover {
    background-color: var(--bs-cyan-800) !important;
  }
  .btn-outline-cyan {
    background-color: transparent !important;
    border: 1px solid var(--bs-cyan-500) !important;
    color: var(--bs-cyan-500) !important;
  }
  .btn-outline-cyan:hover {
    background-color: var(--bs-cyan-500) !important;
    color: #fff !important;
  }
  .bg-light-cyan {
    background-color: var(--bs-cyan-300) !important;
  }
  .bg-cyan {
    background-color: var(--bs-cyan-500) !important;
  }
  .bg-dark-cyan {
    background-color: var(--bs-cyan-700) !important;
  }
  .text-cyan {
    color: var(--bs-cyan-500) !important;
  }








  /* Example for GREY */
  .btn-grey {
    background-color: var(--bs-grey-500) !important;
    color: #fff !important;
  }
  .btn-grey:hover {
    background-color: var(--bs-grey-600) !important;
  }
  .btn-light-grey {
    background-color: var(--bs-grey-300) !important;
    color: #fff !important;
  }
  .btn-light-grey:hover {
    background-color: var(--bs-grey-400) !important;
  }
  .btn-dark-grey {
    background-color: var(--bs-grey-700) !important;
    color: #fff !important;
  }
  .btn-dark-grey:hover {
    background-color: var(--bs-grey-800) !important;
  }
  .btn-outline-grey {
    background-color: transparent !important;
    border: 1px solid var(--bs-grey-500) !important;
    color: var(--bs-grey-500) !important;
  }
  .btn-outline-grey:hover {
    background-color: var(--bs-grey-500) !important;
    color: #fff !important;
  }
  .bg-light-grey {
    background-color: var(--bs-grey-300) !important;
  }
  .bg-grey {
    background-color: var(--bs-grey-500) !important;
  }
  .bg-dark-grey {
    background-color: var(--bs-grey-700) !important;
  }
  .text-grey {
    color: var(--bs-grey-500) !important;
  }