#charts
{
    display: block;
    position: absolute;
    top: calc(var(--sz_icons) + 10px);
    left: -1px;
    z-index: 1000;
    height: calc(100% - ((var(--sz_icons) * 2) + var(--sz_margin)));
    width: calc(100% - (var(--sz_icons) * 1));
}
#charts.this_month
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 25px;
    grid-gap: calc(2 * var(--sz_margin));
}
    #charts.this_month > div:nth-child(2)
    {
        border: 1px solid gray;
        overflow-y: auto;
    }

#charts .point_type_list > div,
#charts .point_type_list_total
{
    display: grid;
    grid-template-columns: 1fr 50px 50px;
    grid-gap: calc(1 * var(--sz_margin));
    min-height: 25px;
    margin-bottom: calc(1 * var(--sz_margin));
}
    #charts .point_type_list > div:nth-child(even)
    {
        background-color: var(--color_bg);
    }
    #charts .point_type_list > div > *,
    #charts .point_type_list_total > *
    {
        display: flex;
        align-items: center;
    }
    #charts .point_type_list > div > *:nth-child(1),
    #charts .point_type_list_total > *:nth-child(1)
    {
        /* Desc */
        padding-left: calc(2 * var(--sz_margin));
    }
    #charts .point_type_list > div > *:nth-child(2),
    #charts .point_type_list > div > *:nth-child(3),
    #charts .point_type_list_total > *:nth-child(2),
    #charts .point_type_list_total > *:nth-child(3)
    {
        justify-content: center;
        color: white;
    }
    #charts .point_type_list > div > *:nth-child(2),
    #charts .point_type_list_total > *:nth-child(2)
    {
        /* Positive */
        background-color: green;
    }
    #charts .point_type_list > div > *:nth-child(3),
    #charts .point_type_list_total > *:nth-child(3)
    {
        /* Negative */
        background-color: red;
    }
    #charts .point_type_list_total
    {
        border: 1px solid black;
    }