h1 {
    text-align: center;
}
.container {
    display: grid;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.monday, .tuesday, .wednesday, .thursday, .friday, .saturday, .sunday {
    display: grid;
    grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px;
    grid-template-columns: 1fr 1fr 3fr 1fr 3fr;
    grid-gap: 7px;
    text-align: center;
    font-weight: bold;
    padding-bottom: 30px;
    padding-top: 20px;
}

#mondayTxt, #tuesdayTxt, #wednesdayTxt, #thursdayTxt, #fridayTxt, #saturdayTxt, #sundayTxt {
    grid-area: 1 / 1 / 1 / 6;
    font-weight: bold;
    font-size: 22px;
}

#in {
    grid-area: 2 / 1 / 2 / 3;
}

#inInput {
    grid-area: 2 / 3 / 2 / 3;
}

#rest1{
    grid-area: 3 / 1 / 3 / 1;
}

#rest1From{
    grid-area: 3 / 2 / 3 / 2;
}

#rest1FromInput{
    grid-area: 3 / 3 / 3 / 3;
}

#rest1To{
    grid-area: 3 / 4 / 3 / 4;
}
#rest1ToInput{
    grid-area: 3 / 5 / 3 / 5;
}

#meal1{
    grid-area: 4 / 1 / 4 / 1;
}

#meal1From{
    grid-area: 4 / 2 / 4 / 2;
}

#meal1FromInput{
    grid-area: 4 / 3 / 4 / 3;
}

#meal1To{
    grid-area: 4 / 4 / 4 / 4;
}
#meal1ToInput{
    grid-area: 4 / 5 / 4 / 5;
}

#rest2{
    grid-area: 5 / 1 / 5 / 1;
}

#rest2From{
    grid-area: 5 / 2 / 5 / 2;
}

#rest2FromInput{
    grid-area: 5 / 3 / 5 / 3;
}

#rest2To{
    grid-area: 5 / 4 / 5 / 4;
}
#rest2ToInput{
    grid-area: 5 / 5 / 5 / 5;
}

#meal2{
    grid-area: 6 / 1 / 6 / 1;
}

#meal2From{
    grid-area: 6 / 2 / 6 / 2;
}

#meal2FromInput{
    grid-area: 6 / 3 / 6 / 3;
}

#meal2To{
    grid-area: 6 / 4 / 6 / 4;
}
#meal2ToInput{
    grid-area: 6 / 5 / 6 / 5;
}

#out {
    grid-area: 7 / 1 / 7 / 3;
}

#outInput {
    grid-area: 7 / 3 / 7 / 3;
}

#totals {
    grid-area: 8 / 1 / 8 / 3;
}

#monTotalHours, #tueTotalHours, #wedTotalHours, #thurTotalHours, #friTotalHours, #satTotalHours, #sunTotalHours, #sumHoursBox {
    grid-area: 8 / 3 / 8 / 3;
    background-color: whitesmoke;
    height: 31px;
    padding: 3px 7px;
    line-height: normal;
    border: 1px solid #a6a6a6;
    border-top-color: #949494;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgb(255 255 255 / 50%), 0 1px 0 rgb(0 0 0 / 7%) inset;
    outline: 0;
    color: #111;
    font-size: 16px;
}

#sumHours {
    padding-top: 20px;
    padding-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}
.timepicker, #employeeField{
    
    background-color: #fff;
    height: 31px;
    padding: 3px 7px;
    line-height: normal;
    border: 1px solid #a6a6a6;
    border-top-color: #949494;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgb(255 255 255 / 50%), 0 1px 0 rgb(0 0 0 / 7%) inset;
    outline: 0;
    color: #111;
    font-size: 16px;
}
.timepicker:focus{
        border-color: #e77600;
        box-shadow: 0 0 3px 2px rgb(228 121 17 / 50%);
}

#resetbtn1 {
    grid-area: 1/ 5 / 1 / 6;
    text-align: center;
}

#employee {
    font-size: 20px;
    font-weight: 700;
}


#newCalcLink {
    float: right;
    padding: 1%;
}

@media print{
    @page{
        size:300mm;
    }
    head, main {
        display: none;
    }
    html {
        zoom:40%;
    }
}