/* 
* =============================================
* Bubble 
* =============================================
*/
[class*='bubble-'] {
  color: #9fa2a7;
  background-color: #eee;
  padding: 0.5rem 1rem;
  position: relative;
  border-radius: 0.25rem;
}
[class*='bubble-']:after {
  content: '';
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
  border-color: #eee transparent;
}

.bubble-top {
  margin-top: 20px;
}

.bubble-bottom {
  margin-bottom: 20px;
}

.bubble-left {
  margin-left: 20px;
}

.bubble-right {
  margin-right: 20px;
}

/* bubble-effect */
.bubble-top:after {
  top: -20px;
  left: 20px;
  border-width: 0 30px 20px 0;
}

.bubble-bottom:after {
  bottom: -20px;
  left: 20px;
  border-width: 20px 0 0 30px;
}

.bubble-left:after {
  top: 10px;
  left: -20px;
  border-width: 20px 0 0 20px;
}

.bubble-right:after {
  top: 10px;
  right: -20px;
  border-width: 20px 20px 0px 0px;
}

.bubble-primary {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(27, 154, 247, var(--bs-bg-opacity));
}
.bubble-primary:after {
  border-color: rgba(27, 154, 247, var(--bs-bg-opacity)) transparent;
  border-color: rgba(27, 154, 247, var(--bs-bg-opacity)) transparent;
}

.bubble-secondary {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(108, 117, 125, var(--bs-bg-opacity));
}
.bubble-secondary:after {
  border-color: rgba(108, 117, 125, var(--bs-bg-opacity)) transparent;
  border-color: rgba(108, 117, 125, var(--bs-bg-opacity)) transparent;
}

.bubble-success {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(72, 199, 142, var(--bs-bg-opacity));
}
.bubble-success:after {
  border-color: rgba(72, 199, 142, var(--bs-bg-opacity)) transparent;
  border-color: rgba(72, 199, 142, var(--bs-bg-opacity)) transparent;
}

.bubble-warning {
  --bs-bg-opacity: 1;
  color: #212529;
  background-color: rgba(255, 224, 138, var(--bs-bg-opacity));
}
.bubble-warning:after {
  border-color: rgba(255, 224, 138, var(--bs-bg-opacity)) transparent;
  border-color: rgba(255, 224, 138, var(--bs-bg-opacity)) transparent;
}

.bubble-danger {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(241, 70, 104, var(--bs-bg-opacity));
}
.bubble-danger:after {
  border-color: rgba(241, 70, 104, var(--bs-bg-opacity)) transparent;
  border-color: rgba(241, 70, 104, var(--bs-bg-opacity)) transparent;
}

.bubble-info {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(62, 142, 208, var(--bs-bg-opacity));
}
.bubble-info:after {
  border-color: rgba(62, 142, 208, var(--bs-bg-opacity)) transparent;
  border-color: rgba(62, 142, 208, var(--bs-bg-opacity)) transparent;
}

.bubble-dark {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(85, 85, 85, var(--bs-bg-opacity));
}
.bubble-dark:after {
  border-color: rgba(85, 85, 85, var(--bs-bg-opacity)) transparent;
  border-color: rgba(85, 85, 85, var(--bs-bg-opacity)) transparent;
}

.bubble-light {
  --bs-bg-opacity: 1;
  color: #212529;
  background-color: rgba(247, 248, 250, var(--bs-bg-opacity));
}
.bubble-light:after {
  border-color: rgba(247, 248, 250, var(--bs-bg-opacity)) transparent;
  border-color: rgba(247, 248, 250, var(--bs-bg-opacity)) transparent;
}

.bubble-white {
  --bs-bg-opacity: 1;
  color: #000000;
  background-color: rgba(255, 255, 255, var(--bs-bg-opacity));
}
.bubble-white:after {
  border-color: rgba(255, 255, 255, var(--bs-bg-opacity)) transparent;
  border-color: rgba(255, 255, 255, var(--bs-bg-opacity)) transparent;
}

.bubble-black {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(0, 0, 0, var(--bs-bg-opacity));
}
.bubble-black:after {
  border-color: rgba(0, 0, 0, var(--bs-bg-opacity)) transparent;
  border-color: rgba(0, 0, 0, var(--bs-bg-opacity)) transparent;
}

.bubble-transparent {
  --bs-bg-opacity: 1;
  color: #212529;
  background-color: #eee;
}
.bubble-transparent:after {
  border-color: rgba(0, 0, 0, var(--bs-bg-opacity)) transparent;
  border-color: #eee transparent;
}

.bubble-blue {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(0, 0, 255, var(--bs-bg-opacity));
}
.bubble-blue:after {
  border-color: rgba(0, 0, 255, var(--bs-bg-opacity)) transparent;
  border-color: rgba(0, 0, 255, var(--bs-bg-opacity)) transparent;
}

.bubble-brown {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(165, 42, 42, var(--bs-bg-opacity));
}
.bubble-brown:after {
  border-color: rgba(165, 42, 42, var(--bs-bg-opacity)) transparent;
  border-color: rgba(165, 42, 42, var(--bs-bg-opacity)) transparent;
}

.bubble-cyan {
  --bs-bg-opacity: 1;
  color: #212529;
  background-color: rgba(0, 255, 255, var(--bs-bg-opacity));
}
.bubble-cyan:after {
  border-color: rgba(0, 255, 255, var(--bs-bg-opacity)) transparent;
  border-color: rgba(0, 255, 255, var(--bs-bg-opacity)) transparent;
}

.bubble-fuchsia {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(255, 0, 255, var(--bs-bg-opacity));
}
.bubble-fuchsia:after {
  border-color: rgba(255, 0, 255, var(--bs-bg-opacity)) transparent;
  border-color: rgba(255, 0, 255, var(--bs-bg-opacity)) transparent;
}

.bubble-gray {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(128, 128, 128, var(--bs-bg-opacity));
}
.bubble-gray:after {
  border-color: rgba(128, 128, 128, var(--bs-bg-opacity)) transparent;
  border-color: rgba(128, 128, 128, var(--bs-bg-opacity)) transparent;
}

.bubble-green {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(0, 128, 0, var(--bs-bg-opacity));
}
.bubble-green:after {
  border-color: rgba(0, 128, 0, var(--bs-bg-opacity)) transparent;
  border-color: rgba(0, 128, 0, var(--bs-bg-opacity)) transparent;
}

.bubble-indigo {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(75, 0, 130, var(--bs-bg-opacity));
}
.bubble-indigo:after {
  border-color: rgba(75, 0, 130, var(--bs-bg-opacity)) transparent;
  border-color: rgba(75, 0, 130, var(--bs-bg-opacity)) transparent;
}

.bubble-lime {
  --bs-bg-opacity: 1;
  color: #212529;
  background-color: rgba(0, 255, 0, var(--bs-bg-opacity));
}
.bubble-lime:after {
  border-color: rgba(0, 255, 0, var(--bs-bg-opacity)) transparent;
  border-color: rgba(0, 255, 0, var(--bs-bg-opacity)) transparent;
}

.bubble-orange {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(255, 165, 0, var(--bs-bg-opacity));
}
.bubble-orange:after {
  border-color: rgba(255, 165, 0, var(--bs-bg-opacity)) transparent;
  border-color: rgba(255, 165, 0, var(--bs-bg-opacity)) transparent;
}

.bubble-pink {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(255, 192, 203, var(--bs-bg-opacity));
}
.bubble-pink:after {
  border-color: rgba(255, 192, 203, var(--bs-bg-opacity)) transparent;
  border-color: rgba(255, 192, 203, var(--bs-bg-opacity)) transparent;
}

.bubble-purple {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(128, 0, 128, var(--bs-bg-opacity));
}
.bubble-purple:after {
  border-color: rgba(128, 0, 128, var(--bs-bg-opacity)) transparent;
  border-color: rgba(128, 0, 128, var(--bs-bg-opacity)) transparent;
}

.bubble-red {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(255, 0, 0, var(--bs-bg-opacity));
}
.bubble-red:after {
  border-color: rgba(255, 0, 0, var(--bs-bg-opacity)) transparent;
  border-color: rgba(255, 0, 0, var(--bs-bg-opacity)) transparent;
}

.bubble-teal {
  --bs-bg-opacity: 1;
  color: #ffffff;
  background-color: rgba(0, 128, 128, var(--bs-bg-opacity));
}
.bubble-teal:after {
  border-color: rgba(0, 128, 128, var(--bs-bg-opacity)) transparent;
  border-color: rgba(0, 128, 128, var(--bs-bg-opacity)) transparent;
}

.bubble-yellow {
  --bs-bg-opacity: 1;
  color: #212529;
  background-color: rgba(255, 255, 0, var(--bs-bg-opacity));
}
.bubble-yellow:after {
  border-color: rgba(255, 255, 0, var(--bs-bg-opacity)) transparent;
  border-color: rgba(255, 255, 0, var(--bs-bg-opacity)) transparent;
}

/*# sourceMappingURL=bubble.css.map */