.notice-box {
  position: relative;
  border-radius: 7px;
  padding: 5px 25px 5px 5px;
  direction: rtl;
  margin: 3px;
}
.notice-box > img {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 17px;
  right: 20px;
}
.notice-box > h3{
  color: inherit;
  margin: 12px 25px 0 0;
}
.notice-box > p {
  color: inherit;
  margin-right: 25px;
}
.notice-box > span {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 6px;
  display: block;
  border-radius: 0 5px 5px 0;
}
.notice-box.error {
  color: #5f0c0c;
  background-color: #ffdddd;
}
.notice-box.error > span {
  background-color: #5f0c0c;
}
.notice-box.warning {
  color: #6e6225;
  background-color: #ede4a2;
}
.notice-box.warning > span {
  background-color: #6e6225;
}
.notice-box.notice {
  color: #0a414e;
  background-color: #88c8d7;
}
.notice-box.notice > span {
  background-color: #0a414e;
}
.notice-box.success {
  color: #165c2c;
  background-color: #caffdf;
}
.notice-box.success > span {
  background-color: #165c2c;
}