/** system message **/
#mbsmessage, .system_message{position:fixed; left: 50%; transform:translate(-50%,0); -webkit-transform:translate(-50%,0); -ms-transform:translate(-50%,0); bottom:25px;width: auto;margin: 0;box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.07);z-index: 1001;}
#mbsmessage .msg-content{
	min-width:200px;
	/* max-width:250px; */
	}

.div_error{text-align:left;padding:20px 40px 20px 60px;position:relative; color: #fff; line-height: normal;
background: url(../images/icon--attention.svg) no-repeat 15px 15px #f35f5f; background-size:30px;}
.div_error li{font-weight: 300;font-size: 14px; color:inherit; position: relative; padding:0 0 5px 0;}


.div_info{font-weight: normal;padding:20px 40px 20px 60px;position:relative; color: #fff;
background: url(../images/icon--info.svg) no-repeat 15px 15px #02b4d1; background-size:30px;}
.div_info li{font-weight: 300; font-size: 1em; position: relative;padding:0 0 5px 0;color: inherit; }
.div_info li a{font-weight: normal;text-decoration: none; color: #fff; cursor: default;}

.div_msg{font-weight: normal;padding:20px 40px 20px 60px;position:relative;color: #fff;
background: url(../images/icon--success.svg) no-repeat 15px 15px #00b6ad; background-size:30px;}
.div_msg li{font-weight: 300; font-size: 1em; position: relative;padding:0 0 5px 0;color: inherit; }
.div_msg li a{font-weight: normal; font-size: 13px; text-decoration: none; color: #fff; cursor: default;}

.div_info li:last-child, .div_error li:last-child, .div_msg li:last-child{padding-bottom:0;}


/* validation error messages */
.error{border-color: #f25454!important;}
.errorlist{margin: 0; list-style: none; padding:2px 10px 4px; position: relative; background: #fdf7f6;}
.errorlist li a{color: #f44336;font-size:11px; text-transform:uppercase; text-decoration: none;}
.errorlist li:last-child{padding-bottom:0;}
.errorlist li{font-size:12px;position:relative;text-align: left;}


/* alerts */
.alert {font-size: 1em; color:#fff; width: 100%; position: relative;padding:10px 40px 10px 44px;margin-bottom: 18px;border: 1px solid transparent;}
.alert.alert--positioned-bottom {left: 20px; bottom:25px;}
.alert.alert--positioned-top {right: 20px; top:25px; left: auto!important; bottom:auto!important;}

.alert p{color: inherit;}
.alert h5{font-size: 18px;font-weight: 500;  padding: 0;color: inherit;}
.alert .close, .system_message .close{opacity: 0.3;}
.alert .close:hover,.system_message .close:hover{opacity:1;}

.close{ z-index: 1; width:20px; height: 20px; position:absolute; right: 10px; top: 10px; text-align: center; line-height: 18px;
-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.close:before{width:3px; height: 15px; left: 50%; margin: 0 0 0 -2px; position: absolute; top:2px; content: ""; background: #fff;}
.close:after{width:15px; height:3px; left:2px; top: 50%; margin:-2px 0 0 0; position: absolute; content: ""; background: #fff;}



.alert h4, .alert p {margin: 0;color: inherit;}
.alert > p,.alert > ul {margin-bottom: 0;}
.alert > p + p {margin-top: 5px;}

.alert--success {background: url(../images/icon--success.svg) no-repeat 15px 16px #60B5EE; background-size:30px;}
.alert--info {background: url(../images/icon--info.svg) no-repeat 15px 16px #02b4d1; background-size:30px;}
.alert--warning {background: url(../images/icon--warning.svg) no-repeat 15px 16px #f3c532; background-size:30px;}
.alert--danger {background: url(../images/icon--attention.svg) no-repeat 15px 16px #f35f5f; background-size:30px;}
.alert--process{background:#333;}


.alert--process:before {content:"";  border-radius: 50%;
  width:20px;
  height: 20px;display: inline-block;
  position: absolute; left:15px;top:10px;
  border-top:3px solid rgba(255, 255, 255, 0.2);
  border-right:3px solid rgba(255, 255, 255, 0.2);
  border-bottom:3px solid rgba(255, 255, 255, 0.2);
  border-left:3px solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.alert--small.alert--info{background: url(../images/icon--info-colored.svg) no-repeat 0 2px; background-size:14px; color: #02b4d1;
    padding: 0 0 0 20px;display: block;font-size:85%;margin: 0 0 5px 0;}

.alert--small.alert--danger{background: url(../images/icon--attention-colored.svg) no-repeat 0 2px; background-size:14px; color: #f35f5f;
    padding: 0 0 0 20px;display: block;font-size:85%;margin: 0 0 5px 0;}

.alert--small.alert--warning{background: url(../images/icon--warning-colored.svg) no-repeat 0 2px; background-size:14px; color: #f3c532;
    padding: 0 0 0 20px;display: block;font-size:85%;margin: 0 0 5px 0;}

.alert--small.alert--success{background: url(../images/icon--success-colored.svg) no-repeat 0 2px; background-size:14px; color: #00b6ad;
    padding: 0 0 0 20px;display: block;font-size:85%;margin: 0 0 5px 0;}




@media(max-width:767px){
    #mbsmessage, .system_message{ left: 10px; right: 10px; width: auto; transform: none; -webkit-transform: none;}
	
	
}