.notification_container {
    display: block;
    position: fixed;
    right: 2%;
    top: 5%;
    width: 15%;
}

.notification {
    display: block;
    position: relative;
    float: right;
    margin: 5% 5% 0 0;
    width: 100%;
    padding: 10px;
    text-shadow: none;
    border-radius: 5px;
}

.notification hr {
    border-color: inherit;
}

.notification_heading {
    display: inline-block;
    font-weight: bold;
    font-size: 1.2em;
    width: 90%;
}

.notification_close {
    display: inline-block;
    float: right;
    cursor: pointer;
    height: 10px;
    width: 5%;
    vertical-align: top;
}

.notification_text {}

.notification_info {
    background-color: var(--notification-info-background);
    border: 2px var(--notification-info-border) solid;
    color: var(--notification-info-text);
    box-shadow: 0 0 2px var(--notification-info-border);
}

.notification_affirm {
    background-color: var(--notification-affirm-background);
    border: 2px var(--notification-affirm-border) solid;
    color: var(--notification-affirm-text);
    box-shadow: 0 0 2px var(--notification-affirm-border);
}

.notification_warn {
    background-color: var(--notification-warn-background);
    border: 2px var(--notification-warn-border) solid;
    color: var(--notification-warn-text);
    box-shadow: 0 0 2px var(--notification-warn-border);
}

.notification_deny {
    background-color: var(--notification-deny-background);
    border: 2px var(--notification-deny-border) solid;
    color: var(--notification-deny-text);
    box-shadow: 0 0 2px var(--notification-deny-border);
}

@media only screen and (max-width: 800px) {
    .notification_container {
        position: absolute;
        box-sizing: border-box;
        right: 0;
        width: 100%;
    }

    .notification {
        display: block;
        position: relative;
        float: revert;
        margin: 2% auto 0;
        width: 90%;
        padding: 10px;
        text-shadow: none;
        border-radius: 5px;
    }
}