.smart-alert-box {
  position: fixed;
	display: flex;
  margin: 0 15px;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  justify-content: center;
	z-index: 111;
}

.smart-alert-wrapper {
  position: relative;
	display: flex;
	flex-flow: column nowrap;
  /*text-align: left;*/
}

#smart-alert {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.6em;
  color: #333;
  background-color: #f9f9f9;
  position: relative;
  padding: 10px 15px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 20px;
  border: 1px solid rgb(131, 131, 131);
  border-top: none;
  border-left-width: 5px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  transition: transform ease .5s;
}

.slideup {
  transform: translate(0, -110%);
}

#smart-alert figure {
  /*border: 1px solid green;*/
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background-color: rgb(180, 180, 180);
}

#smart-alert a {
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
  background: url(images/circle.png) no-repeat 0 0 rgb(180, 180, 180);
  background-size: contain;
  border-radius: 50%;
}

/* alert type success */
#smart-alert.success {
  color: #3ea80d;
  background-color: #ebf6e0;
  border-color: #3ea80d;
}

#smart-alert.success figure {
  background-image: url(images/alert-success.png);
  background-size: contain;
  background-color: transparent !important;
}

#smart-alert.success a {
  background-color: #3ea80d;
}

/* alert type notice */
#smart-alert.notice {
  color: #1173c4;
  background-color: #e9f7fe;
  border-color: #1173c4;
}
#smart-alert.notice figure {
  background-image: url(images/alert-notice.png);
  background-size: contain;
  background-color: transparent !important;
}

#smart-alert.notice a {
  background-color: #1173c4;
}

/* alert type warning */
#smart-alert.warn {
  color: #eb8500;
  background-color: #fbfadd;
  border-color: #eb8500;
}
#smart-alert.warn figure {
  background-image: url(images/alert-warn.png);
  background-size: contain;
  background-color: transparent !important;
}

#smart-alert.warn a {
  background-color: #eb8500;
}

/* alert type error */
#smart-alert.error {
  color: #de3747;
  background-color: #fde9ea;
  border-color: #de3747;
}
#smart-alert.error figure {
  background-image: url(images/alert-error.png);
  background-size: contain;
  background-color: transparent !important;
}

#smart-alert.error a {
  background-color: #de3747;
}