.alert {
  border-color: 1px solid;
  border-radius: 8px;
  border-width: 1px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  display: flex;
  width: 768px;
  color: #555;
  align-items: center;
}
.alert-warning {
  background-color: #fff3cd;
  border-color: #f2e4b9;
  color: #856404;
}
.alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}
.alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}
.alert-info {
  background-color: #e2e3e5;
  border-color: #d6d8db;
  color: #383d41;
}
.alert p {
  padding-inline-end: 40px;
  font-size: 16px;
}
.alert .icon-close {
  position: absolute;
  right: 1.25rem;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  color: #555;
  font-size: 14px;
  height: 14px;
  width: 14px;
}
[dir="rtl"] .alert .icon-close {
  left: 1.25rem;
  right: auto;
}
.alert i {
  font-size: 28px;
  padding-inline-end: 16px;
}
.alert-title {
  display: block;
  font-weight: bold;
  padding-inline-end: 8px;
  padding-bottom: 2px;
}

@media (max-width: 1200px) {

.alert {
  width: 632px;
}
.alert p {
  font-size: 16px;
}

}
@media (max-width: 992px) {

.alert {
  width: 100%;
}

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {

.alert p {
  font-size: 14px;
}

}