<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

h3.alertinfo{
  font-family: 'Poppins', cursive;
  font-weight: 900;
  color: #fff;
  font-size: 20px;
  margin-left: 0px;
  margin-right: 0px;  
  text-align: center;
  margin-top:10px;
  margin-bottom:10px;
}

.alert{
  width:100%;
  margin:20px auto;
  padding:30px;
  position:relative;
  border-radius:5px;
  box-shadow:0 0 15px 5px #ccc;
}

.alert-warning {
    color: #fff;
    background-color: #dd711d;
    border-color: #dd711d;
}
.close{
  position:absolute;
  width:30px;
  height:30px;
  opacity:0.5;
  border-width:1px;
  border-style:solid;
  border-radius:50%;
  right:15px;
  top:25px;
  text-align:center;
  font-size:1.6em;
  cursor:pointer;
}
@mixin alert($name,$bgColor){
  $accentColor:darken($bgColor,50);
  .#{$name}{
    background-color:#{$bgColor};
    border-left:5px solid $accentColor;
    .close{
      border-color:$accentColor;
      color:$accentColor;
    }
  }
}
@include alert(simple-alert,#ebebeb);
@include alert(success-alert,#a8f0c6);
@include alert(danger-alert,#f7a7a3);
@include alert(warning-alert,#9e689c);</pre></body></html>