.topper-top{
    font-size: 16px;
    position: absolute;    
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    min-width: 50vw;
    height: 76px;
    background-color: transparent;
    color: #fff;
    z-index: 1000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/*  */
.topper-success{
background-color:#2ecc71;
color:#fff;
}

.topper-info{
background-color:#3498db;
color:#fff;
}

.topper-warning{
background-color:#f39c12;
color:#1f1f1f;
}

.topper-danger, .topper-critical, .topper-error{
background-color:#ff1d4d;
color:#fff;
}

/* Topper-top */

.topper-top .topper-title{
float:left;
font-weight:bold;
}

.topper-top .topper-text{
float:left;
margin-left:15px;
}

.topper-top .topper-close{
position:absolute;
right:25px;
top:15px;
font-size:28px;
cursor:pointer;
transition:opacity 200ms ease;
}

.topper-top .topper-close:hover{
opacity:0.7;
}

.topper-top .topper-content:after{
content:"";
display:table;
clear:both;
}

.topper-top .topper-content{
display: flex;
align-items: center;
justify-content: flex-start;
height: 76px;
padding: 12px;
}