@mixin alert-variant($background, $border, $color) {
  color: $color;
  background-color: $background;
  border-color: $border;

  hr {
    border-top-color: darken($border, 5%);
  }

  .alert-link {
    color: darken($color, 10%);
  }
}

.msg{
  position:relative;
  transition:0.3s;
  padding: 1em 1.5em;
  margin-bottom:1em;
  border: 1px solid transparent;
  border-radius:0.25rem;
  min-height: 1em;
  line-height:1.5;
  opacity: 0.7;
  background-color:#f7f7f7;
  color: #333;
}
.rtl .msg{
  line-height: 2;
}
.msg:empty{
  display:none
}
.msg.special{
  opacity: 1;
  border-radius:1rem;
  box-shadow: 0 0px 3em 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0px 3em 0px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0px 3em 0px rgba(0, 0, 0, 0.15);
  -o-box-shadow: 0 0px 3em 0px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 0px 3em 0px rgba(0, 0, 0, 0.15);
}

.msg .title{
  font-size:120%;
  font-weight: bold;
}

.msg ul{
  margin-top: 0.5em;
}


.msg > a{
  font-weight: bold;
}

.msg h2{margin-bottom:0}
.msg h3{margin-bottom:0}
.msg h4{margin-bottom:0}

.msg:hover{
  border-color: rgba(0,0,0,0.1);
}
.msg:focus{
  border-color: rgba(0,0,0,0.2);
  opacity: 0.8;
}
.msg:active, .msg.active{
  border-color: rgba(0,0,0,0.2);
  opacity: 0.85;
}