.toast-container {
    z-index: 9999;
    position: fixed;
    touch-action: none;
    max-width: 25%;
    min-width: 15%;
    display: flex;
    flex-direction: column;
}
.toast-container[position~='bottom'] {
    justify-content: flex-end;
    bottom: 0;
}
.toast-container[position~='top'] {
    top: 0;
}
.toast-container[position~='right'] {
    right: 5px;
}

.toast-container > .toast-notification {
    width: 100%;
}

.toast-notification {
    --toast-color: var(--info);
    margin: 10px 0;
    padding: 5px 10px;
    background: var(--light);
    border-bottom: 2px solid var(--toast-color);
    border-radius: 5px;
    box-shadow: 0px 0px 1px var(--dark);
    opacity: 0;
    transition: opacity .5s;
}
.toast-notification[type='success'] {
    --toast-color: var(--success);
}
.toast-notification[type='warn'] {
    --toast-color: var(--warning);
}
.toast-notification[type='error'] {
    --toast-color: var(--danger);
}
.toast-notification[type='load'] {
    --toast-color: var(--gray);
}

.toast-notification > .toast-head {
    display: flex;
    align-items: center;
}
.toast-notification > .toast-head:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.toast-notification > .toast-head > h4 {
    margin: 10px;
}

.toast-notification > .toast-head > i {
    font-size: medium;
}
.toast-notification > .toast-head > i:not(.toast-close-icon) {
    color: var(--toast-color);
}
.toast-notification > .toast-head > i.toast-close-icon {
    color: var(--gray);
    cursor: pointer;
}

.toast-notification > .toast-head > p {
    margin-bottom: 5px;
}

/* Mobile fixs */
@media only screen and (max-width: 1364px) {
    .toast-container {
        max-width: 50%;
    }
}
@media only screen and (max-width: 768px) {
    .toast-container {
        max-width: 97%;
    }
}