.snack{
    position:fixed;
    box-sizing:border-box;
    bottom:90px;
    left:50%;
    transform: translateX(-50%);
    width:100%;
    max-width:600px;
    background:var(--maintxt);
    padding:20px;
    border-radius:4px;
    color:white;
    transition:all 0.4s;
    opacity:1;
    margin-top:-10px;
    padding-left:70px;
    z-index:1000;
}

.snack i{
    position:absolute;
    left:16px;
    top:16px;
    font-size:2.0rem;
    color:white;

}

.snack.start{
    bottom:-100px;
    opacity:0;
}

.snack-inline{
    display:block;
    box-sizing: border-box;
    position:relative;
    padding:0px;
    font-size:0.8rem;
    line-height:1.0rem;
    color:var(--txt-less);
    padding-left:35px;
    margin-bottom:10px;
}

.snack-inline span{
    padding:0;
    margin:0;
}

.snack-inline:before{
    position:absolute;
    top:0px;
    left:0px;
    font-size:1.3rem;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: "\f05a";
    color:var(--light);

}

.snack-inline.info:before{
    color:var(--light);
}


.snack-inline.alert{
    color:var(--alert);
    
}

.snack-inline.alert:before{
    color:var(--alert);
    content: "\f071";
}

.snack-inline.warn{
    color:var(--warn);
    content: "\f071";
}

.snack-inline.warn{
    color:var(--warn);
}

.snack-inline.warn:before{
    color:var(--warn);
    content: "\f071";
}