:root{
    --lgreen: #628B48;
    --beige: #DBD2AE;
    --borange: #DB5A39;
    --lblue: #297B95;
    --yellow: #F4BD50;
    --snow: #FFFAFA;
    --white: #F8F8FF;
    --tgrey: #7E7E7E33;
}

body{
    font-family: sans-serif;
    background-color: var(--beige);
    font-size: 16px;
}

.wrapper{
    background-color: var(--snow);
    margin-top: 2%;
    padding: 2.5%;
    box-shadow: 0 0 20px 10px #555555;
    max-width: 110em;
    border-radius: 15px;
}

.invalid-feedback{
    display: block;
}


.navbar-custom{
    background-color: var(--lgreen);
}

.navbar-brand{
    color: var(--beige) !important;
}

.contentRoot{
    max-width: 50em;
}

.addBtn, .btnModal{
    margin: 1em;
}

.mainTable{
    width: 100%;
    margin-top: 1em;
}

.tableHeader{
    background-color: var(--lgreen);
    color: var(--beige);
    height: 2em;
}

.tableRowCol, .tableHeaderItem{
    padding: 0.1em 0.1em 0.1em 0.5em;
}

.tableColEven{
    background-color: var(--tgrey);
}

.col-btn-2{
    min-width: 50px;
    max-width: 70px;
    text-align: right;
    padding-right: 1em;
}

.itemTowPlane{
    grid-area: towPlane;
    min-width: 87px;
}

.itemTowCrew{grid-area: towCrew;}
.itemTowTakeoff{grid-area: towTakeoff;}
.itemTowLanding{grid-area: towLanding;}
.itemAircraft{
    grid-area: aircraft;
    min-width: 87px;
}
.itemCrewOne{grid-area: crewOne;}
.itemCrewTwo{grid-area: crewTwo;}
.itemTakeoff{grid-area: takeoff;}
.itemLanding{grid-area: landing;}
.itemEdit{grid-area: edit;}
.itemDelete{grid-area: del;}

.grid-container-flight,
.grid-container-flight-solo,
.grid-container-tow,
.grid-container-tow-solo{
    display: grid;
    background-color: var(--lgreen);

    border-radius: 4px;
    padding: 3px;
    grid-gap: 1px;

    margin: 5px auto;
    width: 100%;
}

.grid-container-flight{
    grid-template-areas:
    'aircraft crewOne takeoff landing del'
    'aircraft crewTwo takeoff landing del';
}

.grid-container-flight-solo{
    grid-template-areas:
    'aircraft crewOne takeoff landing del'
    'aircraft crewOne takeoff landing del';
    background-color: var(--lgreen);
}

.grid-container-tow{
    grid-template-areas:
    'towPlane towCrew towTakeoff towLanding del'
    'aircraft crewOne takeoff landing del'
    'aircraft crewTwo takeoff landing del';
}

.grid-container-tow-solo{
    grid-template-areas:
    'towPlane towCrew towTakeoff towLanding del'
    'aircraft crewOne takeoff landing del'
    'aircraft crewOne takeoff landing del';
}

.grid-container-flight > div,
.grid-container-flight-solo > div,
.grid-container-tow > div,
.grid-container-tow-solo > div{
    background-color: var(--beige);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px;
}

.pAllign{
margin: 0;
}

.dayLine{
    background-color: var(--lgreen);
    color: var(--beige);

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

    border-radius: 4px;

    margin: 5px auto;
    width: 100%;
}

@media only screen and (max-width: 450px) {
    .contentRoot{
        padding: 0;
        width: 100%;
    }

    .col-btn-2, .delCol{
        display: none !important;
    }

    .tableFixed{
        table-layout: fixed;
    }

    .w10, .w30{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .grid-container-flight{
        grid-template-areas:
    'aircraft crewOne takeoff landing'
    'aircraft crewTwo takeoff landing';
    }

    .grid-container-flight-solo{
        grid-template-areas:
    'aircraft crewOne takeoff landing'
    'aircraft crewOne takeoff landing';
        background-color: var(--lgreen);
    }

    .grid-container-tow{
        grid-template-areas:
    'towPlane towCrew towTakeoff towLanding'
    'aircraft crewOne takeoff landing'
    'aircraft crewTwo takeoff landing';
    }

    .grid-container-tow-solo{
        grid-template-areas:
    'towPlane towCrew towTakeoff towLanding'
    'aircraft crewOne takeoff landing'
    'aircraft crewOne takeoff landing';
    }
}

@media print{
    .col-btn-2, .delCol{
        display: none !important;
    }

    .grid-container-flight{
        grid-template-areas:
    'aircraft crewOne takeoff landing'
    'aircraft crewTwo takeoff landing';
    }

    .grid-container-flight-solo{
        grid-template-areas:
    'aircraft crewOne takeoff landing'
    'aircraft crewOne takeoff landing';
        background-color: var(--lgreen);
    }

    .grid-container-tow{
        grid-template-areas:
    'towPlane towCrew towTakeoff towLanding'
    'aircraft crewOne takeoff landing'
    'aircraft crewTwo takeoff landing';
    }

    .grid-container-tow-solo{
        grid-template-areas:
    'towPlane towCrew towTakeoff towLanding'
    'aircraft crewOne takeoff landing'
    'aircraft crewOne takeoff landing';
    }
}