ul.list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    width: 100%;

    li {
        flex: 1;
    }

    a {
        color: #666;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    h2, h4 {
        margin: 0.1rem 0 ;
    }
}

ul.plan {
    flex: 1;

    li {
        padding: 0 10px;
    }

    li.plan-list-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .day-info {
            flex: 1;
            padding: 0 10px;
        }

        .day-toggle {
            border-right: 1px solid var(--text-color);
            padding: 10px;
        }

        .day-controls {
            border-left: 1px solid var(--text-color);
            padding: 10px;
        }

        &.today {
            .day-date {
                color: var(--highlight-color);
            }
            
            border: 3px solid var(--text-color);
            padding: 7px;
        }

    }

    li.past {
        opacity: 0.2;
    }

    li.off {
        .day-info a {
            opacity: 0.2;
        }
    }
}


/*
ul#plan li:nth-child(1) { background-color: rgba(255, 99, 71, 0.1); }    
ul#plan li:nth-child(2) { background-color: rgba(135, 206, 235, 0.1); } 
ul#plan li:nth-child(3) { background-color: rgba(144, 238, 144, 0.1); }
ul#plan li:nth-child(4) { background-color: rgba(255, 182, 193, 0.1); }  
ul#plan li:nth-child(5) { background-color: rgba(255, 255, 224, 0.1); } 
ul#plan li:nth-child(6) { background-color: rgba(221, 160, 221, 0.1); } 
ul#plan li:nth-child(7) { background-color: rgba(176, 196, 222, 0.1); } 
*/