.container{
    background-color: #f3ece6;
    border-radius: 20px;
}
.pad {
    padding:15px;
}
.bigPad {
    padding:30px;
}
.center {
    position: absolute;
    width: 100%;
    height: 100%;
    align-content: center;
    overflow: hidden;
}
/* grid n flexstyle sheet*/
.grid {
    display: grid;
    max-width: 1600px;
    margin: 0px auto;
    grid-template-columns: repeat(4, 1fr);
} 
.gap {
    display: grid;
    gap: 15px;
}

/* grid item sizes */
.sidebar {
    display: grid;
    grid-column: span 4;
    grid-template-columns: repeat(4, 1fr);
    
    div {
        grid-column: span 2;
    }
    nav {
        grid-column: span 4;
    }
    .backlog {
        height:260px;
    }
}
.main  {
    display: flex;
    flex-direction: column;
    grid-column: span 4;
    .calendar, .planner {
        height: 750px;
        padding-top:10px;
    }
    #calendar {
        height: 100%!important;

    }    
}
#calendar tr{
    height: 40px!important;
}
#plannerCalendarTop, #plannerCalendarBottom {
    height:50%!important;
}
.gridItem-3  {
    grid-column: span 2;
}
.gridHeightS {
    height:260px;
}
.bodyPad {
    margin:15px;
}
.hideUnder-768 {
    display: none;
}/* flex */
.flex {
    display: flex;
    justify-content: space-between;
    div {
        flex:1;
    }
}

@media (min-width: 900px) {/*768px*/
    .bodyPad {
        margin:30px;
    }
    .gap {
        gap:30px;    
    }
    .grid {
        grid-template-columns: repeat(12, 1fr);
    } 
    .backlog {
        align-self: stretch;
        flex-grow: 2;
    }
    .sidebar {
        height: 95vh;
        grid-column: span 3;
        display: flex;
        flex-direction: column;
    }
    .main  {
        height: 95vh;
        grid-column: span 9;

        .calendar {
            flex-grow: 2;
        }
        .planner {
            flex-grow: 1;
        }
    }
    .gridItem-3  {
        grid-column: span 3;
    }
    .hideUnder-768 {
        display: block;
    }
}

/*@media (min-width: 1200px) {

}*/