BLACK FRIDAY SPECIAL!
Apply Coupon:BLFCM2022to Get 40% Flat Discount!🔥
Alert Primary Light
<!-- start single alert -->
<div class="alert alert-primary-light d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-primary-light {
  background: var(--primary-light);
}
.alert.alert-primary-light::before {
  background: var(--primary);
}
.alert.alert-primary-light .alert-icon {
  color: var(--primary);
}
Alert Accent Light
<!-- start single alert -->
<div class="alert alert-accent-light d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-accent-light {
  background: var(--accent-light);
}
.alert.alert-accent-light::before {
  background: var(--accent);
}
.alert.alert-accent-light .alert-icon {
  color: var(--accent);
}
Alert Secondary Light
<!-- start single alert -->
<div
   class="alert alert-secondary-light d-flex align-items-center"
   >
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-secondary-light {
  background: var(--secondary-light);
}
.alert.alert-secondary-light::before {
  background: var(--secondary);
}
.alert.alert-secondary-light .alert-icon {
  color: var(--secondary);
}
Alert Success Light
<!-- start single alert -->
<div class="alert alert-success-light d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-success-light {
  background: var(--success-light);
}
.alert.alert-success-light::before {
  background: var(--success);
}
.alert.alert-success-light .alert-icon {
  color: var(--success);
}
Alert Info Light
<!-- start single alert -->
<div class="alert alert-info-light d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-info-light {
  background: var(--info-light);
}
.alert.alert-info-light::before {
  background: var(--info);
}
.alert.alert-info-light .alert-icon {
  color: var(--info);
}
Alert Caution Light
<!-- start single alert -->
<div class="alert alert-caution-light d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-caution-light {
  background: var(--caution-light);
}
.alert.alert-caution-light::before {
  background: var(--caution);
}
.alert.alert-caution-light .alert-icon {
  color: var(--caution);
}
Alert Error Light
<!-- start single alert -->
<div class="alert alert-error-light d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-error-light {
  background: var(--error-light);
}
.alert.alert-error-light::before {
  background: var(--error);
}
.alert.alert-error-light .alert-icon {
  color: var(--error);
}
Alert Dark Light
<!-- start single alert -->
<div class="alert alert-dark-light d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-dark-light {
  background: var(--light-3);
}
.alert.alert-dark-light::before {
  background: var(--dark-1);
}
.alert.alert-dark-light .alert-icon {
  color: var(--dark);
}
Alert Primary
<!-- start single alert -->
<div class="alert alert-primary d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-primary {
  background: var(--primary);
}
.alert.alert-primary::before {
  background: var(--primary-dark);
}
.alert.alert-primary .alert-icon {
  color: var(--white);
}
.alert.alert-primary .alert-message h5 {
  color: var(--white);
}
.alert.alert-primary .alert-message p {
  color: var(--white);
}
Alert Accent
<!-- start single alert -->
<div class="alert alert-accent d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-accent {
  background: var(--accent);
}
.alert.alert-accent::before {
  background: var(--accent-dark);
}
.alert.alert-accent .alert-icon {
  color: var(--white);
}
.alert.alert-accent .alert-message h5 {
  color: var(--white);
}
.alert.alert-accent .alert-message p {
  color: var(--white);
}
Alert Secondary
<!-- start single alert -->
<div class="alert alert-secondary d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-secondary {
  background: var(--secondary);
}
.alert.alert-secondary::before {
  background: var(--secondary-dark);
}
.alert.alert-secondary .alert-icon {
  color: var(--white);
}
.alert.alert-secondary .alert-message h5 {
  color: var(--white);
}
.alert.alert-secondary .alert-message p {
  color: var(--white);
}
Alert Success
<!-- start single alert -->
<div class="alert alert-success d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-success {
  background: var(--success);
}
.alert.alert-success::before {
  background: var(--success-dark);
}
.alert.alert-success .alert-icon {
  color: var(--white);
}
.alert.alert-success .alert-message h5 {
  color: var(--white);
}
.alert.alert-success .alert-message p {
  color: var(--white);
}
Alert Info
<!-- start single alert -->
<div class="alert alert-info d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-info {
  background: var(--info);
}
.alert.alert-info::before {
  background: var(--info-dark);
}
.alert.alert-info .alert-icon {
  color: var(--white);
}
.alert.alert-info .alert-message h5 {
  color: var(--white);
}
.alert.alert-info .alert-message p {
  color: var(--white);
}
Alert Caution
<!-- start single alert -->
<div class="alert alert-caution d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-caution {
  background: var(--caution);
}
.alert.alert-caution::before {
  background: var(--caution-dark);
}
.alert.alert-caution .alert-icon {
  color: var(--white);
}
.alert.alert-caution .alert-message h5 {
  color: var(--white);
}
.alert.alert-caution .alert-message p {
  color: var(--white);
}
Alert Error
<!-- start single alert -->
<div class="alert alert-error d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-error {
  background: var(--error);
}
.alert.alert-error::before {
  background: var(--error-dark);
}
.alert.alert-error .alert-icon {
  color: var(--white);
}
.alert.alert-error .alert-message h5 {
  color: var(--white);
}
.alert.alert-error .alert-message p {
  color: var(--white);
}
Alert Dark
<!-- start single alert -->
<div class="alert alert-dark d-flex align-items-center">
   <div class="alert-icon">
      <i class="lni lni-play"></i>
   </div>
   <div class="alert-message">
      <h5 class="message-title">This is a default message</h5>
      <p class="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
         consectetur adipisicing.
      </p>
   </div>
</div>
<!-- end single alert -->
.alert {
  padding: 32px;
  padding-left: 0;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.alert.alert-dismissible {
  padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
  padding: 0px 12px 0 36px;
  line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
  margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
  background: none;
  padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
  box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
  color: var(--black);
}
.alert.alert-dismissible .btn-close i {
  color: var(--white);
  font-weight: 700;
}
.alert .alert-icon {
  padding: 32px;
}
.alert .alert-icon i {
  font-size: 20px;
  font-weight: 700;
}
.alert .alert-message h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.alert .alert-message p {
  color: var(--black);
  opacity: 0.88;
}
.alert.alert-dark {
  background: var(--dark-3);
}
.alert.alert-dark::before {
  background: var(--dark-1);
}
.alert.alert-dark .alert-icon {
  color: var(--white);
}
.alert.alert-dark .alert-message h5 {
  color: var(--white);
}
.alert.alert-dark .alert-message p {
  color: var(--white);
}