.messages-list{
  list-style:none;
}[dir] .messages-list{
  margin-top:18px;
  margin-bottom:18px;
  padding:0;
}

.messages{
  min-height:68px;
  outline:solid 1px transparent;
}

[dir] .messages{
  padding:18px 27px;
  background-color:#0d1214;
}

[dir] .messages.messages-list__item{
    background-image:none;
  }

.messages__list{
  list-style:none;
}

[dir] .messages__list{
  margin:0;
  padding:0;
}

[dir] .messages:not(.hidden) ~ .messages{
  margin-top:18px;
}

[dir] .messages__item + .messages__item{
  margin-top:9px;
}

.messages__container{
  display:flex;
}

.messages__header{
  flex-shrink:0;
}

[dir=ltr] .messages__header{
  margin-right:18px;
}

[dir=rtl] .messages__header{
  margin-left:18px;
}

.messages__content{
  flex:1;
  color:#fff;
}

[dir] .messages__content{
  padding-top:3px;
}

.messages__button{
  flex-shrink:0;
}

[dir] .messages__button{
  padding-top:3px;
}

[dir=ltr] .messages__button{
  margin-left:18px;
}

[dir=rtl] .messages__button{
  margin-right:18px;
}

.messages__close{
  position:relative;
  width:25px;
  height:25px;
  vertical-align:top;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

[dir] .messages__close{
  padding:0;
  cursor:pointer;
  border:0;
  border-radius:50%;
  background:none;
}

.messages__close::before,
  .messages__close::after{
    position:absolute;
    top:50%;
    display:block;
    width:33px;
    height:2px;
    content:"";
  }

[dir] .messages__close::before, [dir] .messages__close::after{
    background-color:#7e96a7;
  }

[dir=ltr] .messages__close::before, [dir=ltr] .messages__close::after{
  left:50%;
  }

[dir=rtl] .messages__close::before, [dir=rtl] .messages__close::after{
    right:50%;
  }

[dir=ltr] .messages__close::before{
  transform:translate(-50%, -50%) rotate(45deg);
  }

[dir=rtl] .messages__close::before{
    transform:translate(50%, -50%) rotate(-45deg);
  }

[dir=ltr] .messages__close::after{
  transform:translate(-50%, -50%) rotate(-45deg);
  }

[dir=rtl] .messages__close::after{
    transform:translate(50%, -50%) rotate(45deg);
  }

[dir] .messages__close:hover::before, [dir] .messages__close:hover::after{
      background-color:#fff;
    }

.messages__close:focus{
    outline:2px solid #53b0eb;
    outline-offset:1px;
  }

.messages__icon{
  vertical-align:top;
}

.messages--error .messages__icon{
  fill:#e33f1e;
}

.messages--warning .messages__icon{
  fill:#fdca40;
}

.messages--status .messages__icon{
  fill:#3fa21c;
}

.messages--info .messages__icon{
  fill:#53b0eb;
}

.messages a{
  color:#fff;
}

[dir] .messages pre{
  margin:0;
}