.amaran.awesome {
  width: 300px;
  min-height: 65px;
  background: #f3f3f3;
  color: #222;
  margin: 15px;
  padding: 5px 5px 5px 70px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 1px 1px 1px #000; }
  .amaran.awesome .icon {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 10px;
    background: #000;
    margin-top: -25px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 22px; }
  .amaran.awesome p {
    padding: 0;
    margin: 0; }
    .amaran.awesome p span {
      font-weight: 300; }
      .amaran.awesome p span.light {
        font-size: 13px;
        display: block;
        color: #777; }
  .amaran.awesome.ok p.bold {
    color: #178B13; }
  .amaran.awesome.ok .icon {
    background-color: #178B13;
    color: #fff; }
  .amaran.awesome.error p.bold {
    color: #D82222; }
  .amaran.awesome.error .icon {
    background-color: #D82222;
    color: #fff; }
  .amaran.awesome.warning p.bold {
    color: #9F6000; }
  .amaran.awesome.warning .icon {
    background-color: #9F6000;
    color: #fff; }
  .amaran.awesome.yellow p.bold {
    color: #CFA846; }
  .amaran.awesome.yellow .icon {
    background-color: #CFA846;
    color: #fff; }
  .amaran.awesome.blue p.bold {
    color: #2980b9; }
  .amaran.awesome.blue .icon {
    background-color: #2980b9;
    color: #fff; }
  .amaran.awesome.green p.bold {
    color: #27ae60; }
  .amaran.awesome.green .icon {
    background-color: #27ae60;
    color: #fff; }
  .amaran.awesome.purple p.bold {
    color: #5B54AA; }
  .amaran.awesome.purple .icon {
    background-color: #5B54AA;
    color: #fff; }