#the_reason
{
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    border-radius: calc(5 * var(--sz_margin));
    z-index: 1000;
    height: 80%;
}
    #the_reason > *
    {
    }
    #the_reason[data-for]:before
    {
        content: "";
        font-family: kids_points;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: absolute;
        top: 0px;
        left: 0;
        width: 100%;
        height: calc((1.5 * var(--sz_icons)) + (5 * var(--sz_margin)));
        font-size: 1.8em;
        border-top-left-radius: calc(3 * var(--sz_margin));
        border-top-right-radius: calc(3 * var(--sz_margin));
    }
        #the_reason[data-for="for"]:before
        {
            content: "Select a GOOD reason for the point!";
            background-color: var(--color_green);
            text-shadow: 1px 1px 3px black;
            color: white;
        }
        #the_reason[data-for="not"]:before
        {
            content: "Select a Not so good reason for the point";
            background-color: var(--color_red);
            color: white;
        }
    #the_reason .reasons
    {
        display: block;
        position: relative;
        top: calc(1.5 * var(--sz_icons));
        height: calc(100% - (1.5 * var(--sz_icons)));
        overflow-y: auto;
    }
        #the_reason .reasons > div
        {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            min-height: var(--sz_icons);
            font-family: kids_points_bold;
            font-size: 2em;
            padding: 10px;
            text-align: center;
            border-radius: calc(10 * var(--sz_margin));
        }
            #the_reason[data-for="for"] .reasons > div:nth-child(even)
            {
                background-color: var(--color_green);
            }
            #the_reason[data-for="not"] .reasons > div:nth-child(even)
            {
                background-color: var(--color_red_50);
            }


#the_reason .close,
#the_reason .save
{
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    height: var(--sz_icons);
    width: var(--sz_icons);
    border: 2px solid white;
    bottom: -65px;
    transform: translateX(-50%);
    border-radius: 50%;
}

    #the_reason .close
    {
        background-color: var(--color_red);
        color: white;
        left: calc(100% - (1.5 * var(--sz_icons)));
    }
    #the_reason .save
    {
        background-color: green;
        color: white;
        left: calc(1.5 * var(--sz_icons));
    }