.toast {
    display: none;
    position: fixed;
    width:auto;
    height:auto;
    max-width:250px;
    /* max-height:100px; */
    /* padding:10px 10px; */
    padding:8px;

    font-size:12px;
    border-radius:3px;
    background-color: #111;
    color:rgba(255,255,255,0.9);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    overflow:hidden;

    display:flex;
    align-items: center;
    justify-content: space-between;

}
.toast-bottom-left {
    left:20px;
    bottom:20px;
} 
.toast-bottom-right {
    right:20px;
    bottom:20px;
} 
.toast-bottom-center {
    left:50%;
    transform: translateX(-50%);
    bottom:20px;
} 

.toast-top-left {
    left:20px;
    top:20px;
} 
.toast-top-right {
    right:20px;
    top:20px;
} 
.toast-top-center {
    left:50%;
    transform: translateX(-50%);
    top:20px;
} 

.toast-message {
    text-align: left;
    max-width:180px;
}
.toast-checkmark {
    color:green;
    margin-right:12px;
    align-self: flex-start;
}

.toast-close-button {
    margin-left:12px;
    color:#CCC;
    align-self: flex-start;

    width:28px;
    height:28px;
    border-radius:50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    background-image: url('../../assets/pics/close-white-24.svg');

    cursor: pointer;
    transition: background-color 20ms;
}
.toast-close-button:hover {
    background-color: rgba(255,255,255,0.2);
}

.toast-info {
    align-self: flex-start;
    width:24px;
    height:24px;
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: 20px 20px;
    background-image: url('../../assets/pics/info-blue-24.svg');
    margin-right:8px;
}

.toast-success {
    align-self: flex-start;
    width:24px;
    height:24px;
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: 20px 20px;
    background-image: url('../../assets/pics/checkmark-green-24.svg');
    margin-right:8px;
}

.toast-warning {
    align-self: flex-start;
    width:24px;
    height:24px;
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: 20px 20px;
    background-image: url('../../assets/pics/warning-orange-24.svg');
    margin-right:8px;
}

.toast-error {
    align-self: flex-start;
    width:24px;
    height:24px;
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: 20px 20px;
    background-image: url('../../assets/pics/error-red-24.svg');
    margin-right:8px;
}