/** system message **/
#mbsmessage, .system_message{position:fixed;text-align: center; left: 0px; width: 100%;margin: 0;-webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.07);box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.07);z-index: 101;z-index: 999;}
#mbsmessage .mbs_link{text-decoration: underline; color: #fff;opacity: 0.9;}
#mbsmessage .mbs_link:hover{color: #fff;opacity:1;}
#flash .mbs_link{text-decoration: underline; color: #fff;opacity: 0.9;}
#flash .mbs_link:hover{color: #fff;opacity:1;}


.div_error{text-align:left;padding:27px 40px 27px 60px;position:relative; color: #fff; font-size: 0; line-height: normal;background:#f35f5f;}
.div_error li{font-weight: 500;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:#02b4d1;}
.div_info li{font-weight: 500; 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:27px 40px 27px 60px;position:relative;color: #fff;background:#00b6ad;}
.div_msg li{font-weight: 500; 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;}

.div_error, .div_msg {position: fixed;left: 0;right: 0;top: 0;z-index: 9999;text-align: center;}


/* 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;}


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

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

.close-icon{ z-index: 1; width:20px; height: 20px; position:absolute; right: 10px; top: 10px; text-align: center; line-height: 18px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.close-icon:before{width:3px; height: 15px; left: 50%; margin: 0 0 0 -2px; position: absolute; top:2px; content: ""; background: #fff;}
.close-icon: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:#00b6ad;}
.alert--info {background:#02b4d1;}
.alert--warning {background:#f3c532;}
.alert--danger {background: #f35f5f;}
.alert--process{background:#333;}


.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);
  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);
  }
}


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