/* content box alert */
.sb-alert {
   position: fixed;
   width: 40%;
   height: auto;
   margin: 0px;
   background: transparent;
   bottom: 10px;
   right: 10px;
   z-index: 999;
}
.sb-alert .box-alert {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   padding: 10px 18px;
   border-radius: 4px;
   right: 0px;
   float: right;

   background: #f7f7f9;
   font-size: 15px;
   color: #1b1b1d;
   min-height: 45px;
   width: 75%;
   max-width: 80%;
}


/* no border raduis */
.sb-alert .box-alert.nradius {
   border-radius: 0px;
}
/* border left optional */
.sb-alert .box-alert.lborder {
   border: none;
   border-left: solid 1px #d6d4dd;
}


/* general style*/
.sb-alert .box-alert > * {
   vertical-align: middle;
}

/* color by type [error] */
.sb-alert .box-alert.error {
   background: #fdf1f5;
   border-color: #e94170;
   color: #c7324f;
}
.sb-alert .box-alert.error .icon i.icon:hover svg path { fill: #c7324f }
.sb-alert .box-alert.error .icon i.icon { fill: #c7324f; }
.sb-alert .box-alert.error .s-close .icon svg:hover path { fill: #c7324f }

/* color by type [info] */
.sb-alert .box-alert.info {
   background: #f0fafc;
   border-color: #3eadf6;
   color: #217ab0;
}
.sb-alert .box-alert.info .icon i.icon:hover svg path { fill: #217ab0 }
.sb-alert .box-alert.info .icon i.icon { fill: #217ab0; }
.sb-alert .box-alert.info .s-close .icon svg:hover path { fill: #217ab0 }

/* color by type [danger] */
.sb-alert .box-alert.danger {
   background: #fdf1f5;
   border-color: #e94170;
   color: #c7324f;
}
.sb-alert .box-alert.danger .icon i.icon:hover svg path { fill: #c7324f }
.sb-alert .box-alert.danger .icon i.icon { fill: #c7324f; stroke: #c7324f; stroke-width: 3px; }
.sb-alert .box-alert.danger .s-close .icon svg:hover path { fill: #c7324f }

/* color by type [success] */
.sb-alert .box-alert.success {
   background: #eefbf2;
   border-color: #326c4a;
   color: #246a4c;
}
.sb-alert .box-alert.success .icon i.icon:hover svg path { fill: #246a4c }
.sb-alert .box-alert.success .icon i.icon { fill: #246a4c; }
.sb-alert .box-alert.success .s-close .icon svg:hover path { fill: #246a4c }


/* icon svg left */
.sb-alert .box-alert .icon { width: 10%; }
.sb-alert .box-alert .icon svg:hover path { fill: initial; }
.sb-alert .box-alert .icon svg {
   width: 18px;
   height: 18px;
   object-fit: cover;
}
.sb-alert .box-alert .icon i.icon {
   width: 18px;
   height: 18px;
   color: initial;
   display: block;

   background-size: cover;
}
.sb-alert .box-alert .icon i.icon {
   width: 18px;
   height: 18px;
}


/* content message */
.sb-alert .box-alert .message {
   width: 90%;
}


/* icon close right */
.sb-alert .box-alert .s-close {
   color: #8c8ea4;
   vertical-align: middle;
   float: right;
}
.sb-alert .box-alert .s-close .icon svg:hover path { fill: #6b6b77 }
.sb-alert .box-alert .s-close .icon svg path { fill: #8c8ea4; }
.sb-alert .box-alert .s-close .icon svg {
   width: 14px;
   height: 14px;
   cursor: pointer;
}