div#toast {
    visibility: hidden;
    box-sizing: border-box;
    position: fixed;
    top: 160px;
    right: 0;
    width: 400px;
    padding-left: 10px;
}

div#toast.info button,
div#toast.warning button,
div#toast.error button {
    display: none;
}

div#toast.info {
    visibility: visible;
    border-left: 10px lawngreen solid;
    background-color: rgba(133, 255, 0, 0.50);
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
    animation: fadein 0.5s, fadeout 0.5s 4.5s;
}

div#toast.info h1#toast_header,
div#toast.info p#toast_content {
    color: #003300;
}

div#toast.warning {
    visibility: visible;
    border-left: 10px #ffd800 solid;
    background-color: rgba(255, 216, 0, 0.50);
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
    animation: fadein 0.5s, fadeout 0.5s 4.5s;
}

div#toast.warning h1#toast_header,
div#toast.warning p#toast_content {
    color: #4b3400;
}

div#toast.error {
    visibility: visible;
    border-left: 10px red solid;
    background-color: rgba(255, 0, 0, 0.50);
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
    animation: fadein 0.5s, fadeout 0.5s 4.5s;
}

div#toast.error h1#toast_header,
div#toast.error p#toast_content {
    color: #4b0000;
}

div#toast.cookie {
    visibility: visible;
    border-left: 10px sandybrown solid;
    background-color: rgba(255, 174, 103, 0.50);
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
}

div#toast.cookie h1#toast_header,
div#toast.cookie p#toast_content {
    color: #4b2d20;
}

div#toast.cookie button {
    margin-bottom: 5px;
    padding: 3px 8px;
    font-size: 1.25em;
    font-weight: bold;
    border: 2px sandybrown solid;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    color: #4b2d20;
    background-color: transparent;
    transition: 0.3s;
}

div#toast.cookie button:hover {
    border-color: black;
    background-color: #4b2d20;
    color: sandybrown;
    text-decoration: none;
}

@-webkit-keyframes fadein {
    from {
        right: -400px;
    }
    to {
        right: 0;
    }
}

@keyframes fadein {
    from {
        right: -400px;
    }
    to {
        right: 0;
    }
}

@-webkit-keyframes fadeout {
    from {
        right: 0;
    }
    to {
        right: -400px;
    }
}

@keyframes fadeout {
    from {
        right: 0;
    }
    to {
        right: -400px;
    }
}