.screenbox-confirm {
    height: 18em;
    width: 15em;
    position: fixed;
    left: 50%;
    top: 50%;
    display: grid;
    grid-template-rows: 13em 5em;
    opacity: 0;
    border: var(--container-border-bold);
    color: var(--container-text-color);
    font-family: var(--font-family);
    transition: opacity 300ms, transform 300ms, var(--screenbox-bezier) 300ms;
    z-index: 4;
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center;
    box-shadow: var(--container-shadow);
}
.screenbox-confirm-ready {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.screenbox-confirm-text {
    text-align: center;
    padding: 1em;
    border: var(--container-border);
    background-color: var(--container-background-color);
}
.screenbox-confirm-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.screenbox-confirm-buttons > div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--container-background-color);
    transition: filter 500ms;
    border: var(--screenbox-confirm-button-border);
}
.screenbox-confirm-buttons > div:hover {
    filter: invert(1);
}
#page_screenboxConfirmScreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 300ms;
}
.screenbox-confirm-screen-ready {
    opacity: 1 !important;
}

.screenbox-achievement {
    height: 10em;
    width: 20em;
    position: fixed;
    right: -20em;
    bottom: 2em;
    opacity: 0;
    border: var(--screenbox-border);
    border-style: var(--screenbox-achievement-border-style);
    background-color: var(--container-background-color);
    color: var(--container-text-color);
    font-family: var(--font-family);
    text-align: left;
    padding: 1em;
    transition: opacity 300ms, transform 300ms, var(--screenbox-bezier) 300ms;
    z-index: 4;
    box-shadow: var(--container-shadow);
}
.screenbox-achievement-ready {
    opacity: 1;
    transform: translateX(-22em);
}

.screenbox-notification {
    height: 10em;
    width: 16em;
    position: fixed;
    top: -10em;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    border: var(--screenbox-border);
    border-style: var(--screenbox-notification-border-style);
    background-color: var(--container-background-color);
    color: var(--container-text-color);
    font-family: var(--font-family);
    text-align: left;
    padding: 1em;
    transition: opacity 300ms, transform 300ms, var(--screenbox-bezier) 300ms;
    z-index: 4;
    box-shadow: var(--container-shadow);
}
.screenbox-notification-ready {
    opacity: 1;
    transform: translateX(-50%) translateY(12em);
}