.toasts, .toasts * {
    box-sizing: border-box;
}

.toasts {
    position: fixed;
    top: 0.75em;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 3;
}

.toasts > div {
    animation: toast-in-out 5s ease-in 0s forwards;
    box-sizing: border-box;
    margin-top: 0.75em;
    display: flex;
    justify-content: flex-end;
    padding-right: 1.5em;
    transform: translateX(32em);
    transition: transform 0.2s ease-out, height 0.2s linear;
}

.toasts > div.toast-in {
    transform: translateX(0);
}

.toasts div .toast {
    padding: 0.75em;
    border-radius: 0.3em;
    visibility: visible;
    box-shadow: 0 0.25em 0.75em #343a4045, 0 0.25em 1em #343a407a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    min-width: 15em;
    max-width: 30em;
    word-wrap: break-word;
    position: relative;
}

.toasts div .toast .fa {
    font-size: 1.25em;
    font-weight: 900;
}

.toasts div .toast .toast-button {
    display: flex;
    align-items: center;
}

.toasts div .toast .end-icon {
    font-weight: 400;
}

.toasts div .toast .toast-content {
    display: flex;
    align-items: center;
}

.toasts div .toast .no-progress {
    padding-bottom: 0.75em;
}

.toasts div .toast .toast-title, .toast-message {
    margin: 0;
}

.toasts div .toast .toast-title {
    font-size: 1em;
    font-weight: 600;
    color: #343a40;
    margin: 0 0 0.25em 0;
}

.toasts div .toast .toast-body {
    padding: 0 0.75em;
}

.toasts div .toast .toast-message, .end-icon {
    color: #626d78;
}

.toasts div .toast .toast-button {
    padding: 0.75em;
}

.toasts div .toast .toast-progress {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 0.25em;
    left: 0;
    border-bottom-right-radius: 0.3em;
    background-color: #f7f7f7;
}

.toasts div .toast .toast-progress .actual-progress {
    background-color: #343a40;
    width: 0;
    height: 100%;
    animation: progress-bar 5s ease-in 0s forwards;
}

.toasts div.toast-success .toast {
    border-left: 6px solid #009030;
}

.toasts div.toast-success .toast .fa:not(.end-icon) {
    color: #009030;
}

.toasts div.toast-warning .toast {
    border-left: 6px solid#FFC000;
}

.toasts div.toast-warning .toast .fa:not(.end-icon) {
    color: #FFC000;
}

.toasts div.toast-error .toast, .toasts div.toast-alarm .toast {
    border-left: 6px solid #C00000;
}

.toasts div.toast-error .toast .fa:not(.end-icon) {
    color: #C00000;
}

.toasts div.toast-info .toast {
    border-left: 6px solid #20669c;
}

.toasts div.toast-info .toast .fa:not(.end-icon) {
    color: #20669c;
}

@keyframes toast-in-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes progress-bar {
    0% {
        width: 0;
    }

    100% {
        width: 99%;
    }
}