#kid
{
    display: block;
}
    #kid > div
    {
        display: none;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        width: 100%;
    }
    #kid > div.selected
    {
        display: block;
        height: 100%;
    }

#kid.popup
{
    display: block;
    position: absolute;
    top: 50%;
    max-height: 80%;
    width: 80%;
    background-color: white;
    border: 3px solid black;
    z-index: 1000;
    border-radius: calc(5 * var(--sz_margin));
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: calc(1.5 * var(--sz_icons) );
    overflow-y: auto;
}
    #kid.popup:before
    {
        content: "Select a child to continue";
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(1.5 * var(--sz_icons));
        background-color: var(--color_green);
        position: absolute;
        font-size: 1.8em;
        text-align: center;
        font-family: kids_points;
    }
    #kid.popup > div
    {
        height: calc(3 * var(--sz_icons));
        display: block;
    }
.kaysen
{
    background-image: url('kids/kaysen.png');
}
.luca
{
    background-image: url('kids/luca.png');
}
.oliver
{
    background-image: url('kids/oliver.png');
}
.ryan
{
    background-image: url('kids/ryan.png');
}

.error
{
    outline: 3px dashed red;
    outline-offset: 2px;
    border-radius: calc(2 * var(--sz_margin));
}
.found
{
    outline: 3px dashed green;
    outline-offset: -2px;
    border-radius: calc(2 * var(--sz_margin));
    position: relative;
}
    .found:after
    {
        content: "There is already an open illness.";
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        justify-content: center;
        align-items: center;
        border-radius: calc(2 * var(--sz_margin));
    }