.messagebleft-container{
    transition:all .5s ease;
    transition-property:top,right,bottom,left,opacity;
    font-family:Roboto,sans-serif;
    font-size:12px;
    min-height:14px;
    background-color:#070b0e;
    position:fixed;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:rgb(255, 255, 255);
    line-height:22px;
    padding:5px 10px;
    bottom:-100px;
    top:-100px;
    opacity:0;
    z-index:9999;
}
.messagebleft-container .action{
    background:inherit;
    display:inline-block;
    border:none;
    font-size:inherit;
    text-transform:uppercase;
    color:#4caf50;
    margin:0 0 0 24px;
    padding:0;
    min-width:min-content;
    cursor:pointer
}
@media (min-width:640px){
    .messagebleft-container{
        min-width:288px;
        max-width:568px;
        display:inline-flex;
        border-radius:2px;
        margin:24px;
        
    }
}
@media (max-width:640px){
    .messagebleft-container{
        left:0;
        right:0;
        width:100%;
        margin-bottom: 49px;
    }
}
.messagebleft-pos.bottom-center{
    top:auto!important;
    bottom:0;
    left:50%;
    transform:translate(-50%,0)
}
.messagebleft-pos.bottom-left{
    top:auto!important;
    bottom:0;
    left:0
}
.messagebleft-pos.bottom-right{
    top:auto!important;
    bottom:0;
    right:0
}
.messagebleft-pos.top-left{
    bottom:auto!important;
    top:0;
    left:0
}
.messagebleft-pos.top-center{
    bottom:auto!important;
    top:0;
    left:50%;
    transform:translate(-50%,0)
}
.messagebleft-pos.top-right{
    bottom:auto!important;
    top:0;
    right:0
}
@media (max-width:640px){
    .messagebleft-pos.bottom-center,.messagebleft-pos.top-center{
        left:0;
        transform:none;

    }
}
.messagebleft{
    border: 1px solid black;
}