#bottom_buttons
{
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: calc(2 * var(--sz_margin));
    justify-content: center;
    align-items: flex-end;
    height: var(--sz_icons);
    padding-top: calc( 0.75 * var(--sz_icons) );
}
    #bottom_buttons:after
    {
        content: "";
        display: block;
        position: absolute;
        bottom: calc(-2 * var(--sz_margin));
        left: -8px;
        height: calc((1 * var(--sz_icons)) + (4 * var(--sz_margin)));
        width: calc(100% + (2 * 8px) );
        background-color: var(--color_gray);
        z-index: -1;
    }
    #bottom_buttons > div
    {
        display: flex;
        position: relative;
        height: 100%;
        background-color: #EAFFEA;
        border-radius: calc(2 * var(--sz_margin));
        background-position: center center;
        background-size: calc(0.8 * var(--sz_icons));
        background-repeat: no-repeat;
    }
        #bottom_buttons > div[data-points]:before
        {
            content: "";
            display: block;
            width: 50%;
            height: 100%;
            border-top-left-radius: 75px;
            border-top-right-radius: 75px;
            background-color: var(--color_gray);
            bottom: calc(100% + -6px);
            position: absolute;
            z-index: -1;
            left: 50%;
            transform: translateX(-50%);
        }
        #bottom_buttons > div[data-points]:after
        {
            content: attr(data-points);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
            height: 100%;
            bottom: calc(100% + -6px);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-family: kids_points_bold;
            text-shadow: 1px 1px 3px black;
            font-size: 2em;
        }

    #bottom_buttons > div.spanks
    {
        background-color: red;
        background-image: url(kidspoints/icon_minus.png);
    }
    #bottom_buttons > div.praise
    {
        background-color: var(--color_green);
        background-image: url(kidspoints/icon_plus.png);
    }
    #bottom_buttons > div.fluids
    {
        background-color: var(--color_blue);
        background-image: url(kidspoints/icon_fluids.png);
        background-size: 25px;
    }
    #bottom_buttons > div.meds
    {
        background-color: deeppink;
        background-image: url(kidspoints/icon_meds.png);
    }