/* messages */

.ui-messages > div {
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid transparent;
  border-radius: @default-border-radius;
  color: white;
  font-size: 16px;
}

div.ui-message-error {
  background-color: @red;
  color: #fff;
  min-height: 30px;
}

div.ui-messages-fatal {
  border-color: darken(@dark-red, 10%);
  background-color: @dark-red;
}

div.ui-messages-error {
  border-color: darken(@red, 10%);
  background-color: @red;
}

div.ui-messages-warn {
  border-color: darken(@yellow, 10%);
  background-color: @yellow;
}

div.ui-messages-info {
  border-color: darken(@aqua, 10%);
  background-color: @aqua;
}

.ui-messages ul {
  margin: 0 !important;
}

.ui-messages span.ui-messages-info-icon,
.ui-messages span.ui-messages-warn-icon,
.ui-messages span.ui-messages-fatal-icon,
.ui-messages span.ui-messages-error-icon {
  display: none;
}

div.ui-messages-warn-summary,
div.ui-messages-error-summary,
div.ui-messages-info-summary {
  margin-left: 0;
  font-weight: 600;
}

span.ui-message-info-icon, span.ui-message-warn-icon, span.ui-message-error-icon, span.ui-message-fatal-icon {
  width: 24px;
}

div.ui-message-icon-only {
  width: 32px;
  height: 32px;
}

div.ui-message-info, div.ui-message-error, div.ui-message-warn, div.ui-message-fatal {
  padding: 4px 4px;
}

div.ui-messages ul {
  text-align: center;
}

div.ui-messages .ui-icon {
  
  &.icon-ripple {
  	left:-4px;
  	opacity:1;
  	
  	&:before {
  	    color:#fff!important;
  	}
  }
  
}

span.ui-message-error-icon {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  background-image: none;
  &:before {
    font-family: 'Glyphicons Halflings';
    color: #fff;
    position: relative;
    font-size: 22px;
    top: -5px;
    overflow: hidden;
    content: "\e101" !important;
  }
  &:hover:before {
    color: @gray-lte;
  }
}

div.ui-messages span.ui-icon-close {
  background-image: none !important;
  display: inline;
  &:before {
    font-family: 'Glyphicons Halflings';
    color: #fff;
    display: inline !important;
    position: relative;
    font-size: @font-awesome-icon-size;
    margin-left: 5px;
    top: -5px;
    overflow: hidden;
    content: "\e014" !important;
  }
  &:hover:before {
    color: @hover-icon-color;
  }
}

@media (max-width: @screen-xs) {
  div.ui-messages span.ui-icon-close {
    &:before {
      font-size: @font-awesome-icon-size + 1;
    }
  }
}

div.ui-messages .ui-messages-close {
  width: 20px;
  margin-right: -10px;
  height: 0;
  margin-top: -8px;
}