
/** system message **/
#mbsmessage, .system_message,.alert.alert--positioned{ left: 40%;width: auto;box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.07);z-index: 1000;transform: translate(-50%,0);}
.alert.alert--positioned{display: none;box-shadow: 0;}
.div_error{text-align:left;padding:20px 40px 20px 60px;position:relative; color: #fff; font-size: 0; line-height: normal;
 background-size:30px; }
.div_error li{font-weight: 300;font-size: 14px; color:inherit; position: relative; padding:0 0 5px 0; list-style:none;}
.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; list-style:none;}
.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;list-style:none; }
.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;}
.div_error ul,.div_msg ul,.div_info ul{color:#fff;}

/* validation error messages */
.error{border-color: rgba(242,84,84,0.1)!important;background: rgba(242,84,84,0.1)!important;}
.errorlist{margin: 0; list-style: none; padding:0 5px; position: relative;}
.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;}


/* alerts */
.alert {font-size: 1em; color:#fff; margin:auto;padding:20px 40px 20px 60px;margin-bottom: 18px;border: 1px solid transparent;min-width:300px;max-width:max-content;}
.alert.alert--positioned-bottom {left: 20px; bottom:25px;}

.alert.alert--positioned-top {
	position: fixed;
    left: 50%;
    bottom: 50px;
    width: auto;
    margin: 0;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.07);
    z-index: 1000;
    transform: translate(-50%,0);
}

.alert.alert--positioned-center {bottom: 20px;transform: translate(-50%,0);-webkit-transform: translate(-50%,0);-ms-transform: translate(-50%,0);}

.alert p{color: inherit!important;}
.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;}

.alert .close, .system_message .close{ z-index: 1; width:20px; height: 20px; position:absolute; right: 10px; top: 10px; text-align: center; line-height: 18px;cursor: pointer;
-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.alert .close:before, .system_message .close:before{width:3px; height: 15px; left: 50%; margin: 0 0 0 -2px; position: absolute; top:2px; content: ""; background: #fff;}
.alert .close:after,.system_message .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,.alert_success { background-size:30px;padding:20px 40px 20px 60px!important;}
.alert--info,.alert_info {background: url(images/icon--info.svg) no-repeat 15px 14px #02b4d1; background-size:30px;padding:20px 40px 20px 60px!important;}
.alert--warning,.alert_warning {background: url(images/icon--warning.svg) no-repeat 15px 14px #f3c532; background-size:30px;padding:20px 40px 20px 60px!important;}

.alert--process,.alert_process{background:rgba(0,0,0,0.9);padding:20px 40px 20px 60px!important;}
.alert_inverse{background: url(images/icon--info.svg) no-repeat 15px 20px rgba(51, 51, 51, 0.9); background-size:30px;color: #fff;padding:20px 40px 20px 60px!important;}

.alert--process:before {content:"";  border-radius: 50%;
  width:32px;
  height: 32px;display: inline-block;
  position: absolute; left:15px;top:14px;
  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;}


.alert_position{ position: fixed;opacity: 0; max-width: 500px;z-index:-1;}
.alert_position.animated{opacity: 1;z-index: 9999;}
.top_left{ top: 75px; left: 20px;}
.top_right{ top: 75px; right: 20px;}
.top_center{ top: 75px; left: 50%; margin: 0 0 0 -250px;}
.bottom_left{ bottom:10px; left: 20px;}
.bottom_right{ bottom: 10px; right: 20px;}
.bottom_center{ bottom: 10px; left: 50%; margin: 0 0 0 -250px;}

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