.tracking {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: yellow; */
}

.tracking div {
    /* these are critical! */
    width: 100%;
    height: 100%;
}

.tracking .header,
.tracking .downame,
.tracking .event {
    display: grid;
    grid-template-columns: 15rem repeat(31, minmax(1.15rem, 1.6rem));
    grid-template-rows: 2rem;
    align-items: center;
    justify-items: center;
}

/* --------- Header ------------------------------------------------------------------------- */

.tracking .header {
    margin-top: 1rem;
}

.tracking .header div {
    background-color: var(--head-main);
    font-size: 0.9rem;

    display: flex;
    align-items: center;
    justify-content: center;
}

.tracking .header div:first-child {
    font-weight: bold;
    font-size: 1.2rem;
    justify-content: flex-start;
}

.tracking div.next-month {
    font-weight: lighter;
    font-size: 0.8rem;
    /* color: hotpink; */
    color: blue;
    /* background-color: white; */
}

/* --------- downame ------------------------------------------------------------------------- */

.tracking .downame {
    grid-template-rows: 1.1rem;
}

.tracking .downame div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.tracking .downame div:not(:first-child) {
    background-color: var(--head-dow);
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}

/* --------- event ------------------------------------------------------------------------- */

.tracking .event.green input[type="checkbox"] {
    accent-color: var(--color-green);
}

.tracking .event.red input[type="checkbox"] {
    accent-color: var(--color-red);
}

.tracking .event.blue input[type="checkbox"] {
    accent-color: var(--color-blue);
}

.tracking .event.yellow input[type="checkbox"] {
    accent-color: var(--color-yellow);
}

.tracking .event.fuchsia input[type="checkbox"] {
    accent-color: var(--color-fuchsia);
}

.tracking .event.cyan input[type="checkbox"] {
    accent-color: var(--color-cyan);
}

.tracking .event.teal input[type="checkbox"] {
    accent-color: var(--color-teal);
}

.tracking .event div {
    /*
        Making this flex screws up the display.
        Somehow grid keeps a super long named with vertical scroll bar aligned
        to the top so the first line is showing.   Changing to flex makes 
        the super long name vertical align center so the first line is scrolled up 
        out of view.  I can't see how to get this to work the way I want
        with flex so I'll use grid for these divs.
    */
    display: grid;
    align-items: center;
    justify-content: center;
}

.tracking .event div:first-child {
    justify-content: right;
    padding-right: 0.5rem;
    overflow: auto;
}

/* --------- Weekend Highlight and Borders ------------------------------------------------------------------------- */

.tracking .header.Sun div:nth-child(7n + 1):not(:first-child),
.tracking .downame.Sun div:nth-child(7n + 1):not(:first-child),
.tracking .event.Sun div:nth-child(7n + 1):not(:first-child),
.tracking .header.Sun div:nth-child(7n + 2):not(:first-child),
.tracking .downame.Sun div:nth-child(7n + 2):not(:first-child),
.tracking .event.Sun div:nth-child(7n + 2):not(:first-child) {
    background-color: var(--weekend);
}

.tracking .header.Mon div:nth-child(7n + 0):not(:first-child),
.tracking .downame.Mon div:nth-child(7n + 0):not(:first-child),
.tracking .event.Mon div:nth-child(7n + 0):not(:first-child),
.tracking .header.Mon div:nth-child(7n + 1):not(:first-child),
.tracking .downame.Mon div:nth-child(7n + 1):not(:first-child),
.tracking .event.Mon div:nth-child(7n + 1):not(:first-child) {
    background-color: var(--weekend);
}

.tracking .header.Tue div:nth-child(7n + 6),
.tracking .downame.Tue div:nth-child(7n + 6),
.tracking .event.Tue div:nth-child(7n + 6),
.tracking .header.Tue div:nth-child(7n + 0),
.tracking .downame.Tue div:nth-child(7n + 0),
.tracking .event.Tue div:nth-child(7n + 0) {
    background-color: var(--weekend);
}

.tracking .header.Wed div:nth-child(7n + 5),
.tracking .downame.Wed div:nth-child(7n + 5),
.tracking .event.Wed div:nth-child(7n + 5),
.tracking .header.Wed div:nth-child(7n + 6),
.tracking .downame.Wed div:nth-child(7n + 6),
.tracking .event.Wed div:nth-child(7n + 6) {
    background-color: var(--weekend);
}

.tracking .header.Thu div:nth-child(7n + 4),
.tracking .downame.Thu div:nth-child(7n + 4),
.tracking .event.Thu div:nth-child(7n + 4),
.tracking .header.Thu div:nth-child(7n + 5),
.tracking .downame.Thu div:nth-child(7n + 5),
.tracking .event.Thu div:nth-child(7n + 5) {
    background-color: var(--weekend);
}

.tracking .header.Fri div:nth-child(7n + 3),
.tracking .downame.Fri div:nth-child(7n + 3),
.tracking .event.Fri div:nth-child(7n + 3),
.tracking .header.Fri div:nth-child(7n + 4),
.tracking .downame.Fri div:nth-child(7n + 4),
.tracking .event.Fri div:nth-child(7n + 4) {
    background-color: var(--weekend);
}

.tracking .header.Sat div:nth-child(7n + 2),
.tracking .downame.Sat div:nth-child(7n + 2),
.tracking .event.Sat div:nth-child(7n + 2),
.tracking .header.Sat div:nth-child(7n + 3),
.tracking .downame.Sat div:nth-child(7n + 3),
.tracking .event.Sat div:nth-child(7n + 3) {
    background-color: var(--weekend);
}