ul.messagelist  {
	float: right;
    position: fixed;
    right: 50px;
    top: 70px;
	margin: 0px 0px;
	padding: 0px;
    z-index: 10000;
    /* background-color: #fff8; */
    width: 400px;
}

ul.messagelist li {
	border: 1px solid #cccccc;
	border-radius: 4px;
	color: #666666;
    font-size: 14px;
    margin: 5px 0 3px;
    /* padding: 8px 10px 8px 29px; */
    padding: 16px 10px 16px 10px;
    line-height: 19px;
    background-color:#ffffbb; /* url(/static/f4django/icons/icon_alert.gif) no-repeat scroll 5px center;*/
    color: #555;

    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #fffcfc; 
    border: 1px solid hsl(44, 100%, 44%);
    box-shadow: 5px 4px 5px #00000035;
}

ul.messagelist li::before {
    font-family: 'Material Symbols Rounded';
    content: "warning";
    padding: 0 20px 0 10px;
    font-size: 28px;
    font-weight: 800;
    color: hsl(44, 100%, 44%);
  }

ul.messagelist li.success::before {
    content: "check_circle";
    color: rgb(30, 126, 0);

}
ul.messagelist li.info::before, ul.messagelist li.note::before {
    content: "info";
    color: rgb(0, 43, 214);

}
ul.messagelist li.error::before {
    content: "error";
    color: var(--error-fg);
}

ul.messagelist li.success { 
    background-color: #ffffff; 
    border: 1px solid rgb(30, 126, 0);
}
ul.messagelist li.info, ul.messagelist li.note { 
    background-color: #ffffff; 
    border: 1px solid rgb(0, 43, 214);
}
ul.messagelist li.error { 
    background-color: #fffdfd; 
    border: 1px solid var(--error-fg);

}

ul.messagelist li h3::first-letter {
    text-transform:capitalize;
}
ul.messagelist li h3 {
    margin: 0px 0px 6px;
    font-size: 16px;
}