.alert-area {
  max-height: 100%;
  position: fixed;
  top: 49px;
  left: 20px;
  right: 20px;
  z-index: 2;
}

.alert-content {
  padding-right: 7px;
}

.alert-box {
  font-size: 12pt;
  line-height: 1.3em;
  padding: 10px 15px;
  margin: 5px 10px;
  position: relative;
  box-shadow: 0 0 6px -4px #000;
  border-radius: 0 3px 3px 0;
  transition: opacity 0.5s ease-in;
}
.alert-box-success {
  color: #155724;
  background-color: #d4edda;
  border-left: 4px solid #069112;
}
.alert-box-error {
  color: #721c24;
  background-color: #f8d7da;
  border-left: 4px solid #910606;
}
.alert-box-warning {
  color: #856404;
  background-color: #fff3cd;
  border-left:  4px solid #918906;
}


.alert-box.hide {
  opacity: 0;
}

.alert-close {
  background: transparent;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 15px;
  right: 15px;
}

.alert-close:before,
.alert-close:after {
  content: '';
  width: 15px;
  position: absolute;
  top: 0px;
  right: -7px;
  display: block;
}

.alert-close-success:before,
.alert-close-success:after {
   border-top: solid 2px #155724;
} 
.alert-close-error:before,
.alert-close-error:after {
   border-top: solid 2px #721c24;
} 
.alert-close-warning:before,
.alert-close-warning:after {
   border-top: solid 2px #856404;
} 
.alert-close:before {
  transform: rotate(45deg);
  padding: 0 !important;
}

.alert-close:after {
  transform: rotate(135deg);
  padding: 0 !important;
}

.alert-close-success:hover:before,
.alert-close-success:hover:after {
  border-top: solid 2px #069112;
}
.alert-close-error:hover:before,
.alert-close-error:hover:after {
  border-top: solid 2px #910606;
}
.alert-close-warning:hover:before,
.alert-close-warning:hover:after {
  border-top: solid 2px #918906;
}


@media (max-width: 767px) and (min-width: 481px) {
  .alert-area {
    left: 100px;
    right: 100px;
  }
}

@media (min-width: 768px) {
  .alert-area {
    width: 350px;
    left: auto;
    right: 0;
  }
}