.toasts-container{
    display: block;
    position: fixed;
    bottom:0;
    right:0;
    width: 350px;
    height: auto;
    padding: 0px 25px 25px 0px;
    z-index: 9999999;
}

.toast{
    display: none;
    background: var(--main-elements-3);
    padding: 8px 15px;
    width: auto;
    border-radius: 15px;
    margin-top: 10px;
}

.toast-error{
    border: 2px solid orangered;
}
.toast-error .showdetails{
    color: orangered;
}
.toast-warn{
    border: 2px solid orange;
}
.toast-warn .showdetails{
    color: orange;
}
.toast-success{
    border: 2px solid limegreen;
}
.toast-success .showdetails{
    color: limegreen;
}
.toast-info{
    border: 2px solid var(--main-elements-4);
}
.toast-info .showdetails{
    color: var(--main-elements-4);
}

.toast p {
    padding: 0px;
    margin: 0px;
    font-family: russia;
}

.toast .title{
    font-size: 16px;
}
.toast .message{
    font-size: 14px;
}
.toast .showdetails{
    margin-top: 10px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}

.toast .details{
    display: none;
    margin: 10px;
    padding: 10px;
    background: var(--main-elements-5);
    font-size: 12px;
}
.toast .close {
    float: right;
    margin-top: -20px;
    cursor: pointer;
    font-weight: bold;
    color: #aaa;
}