.controls{
    /* display: flex; */
    width: 24%;
    float: left;
}

.ControlsComponent{
display: grid;
/* grid-template-columns: auto auto auto; */
}
.ControlInput{
    /* border: none; */
    width: 30%;
}
.NameInput{
    /* margin: 0 auto; */
    display: flex;
}
.EntityinputField{
    /* border: none; */
    width: 30%;
    display: flex;
}
.flex{
    display: flex  !important;

}

.ControlHeader{
float: left;
width: 50%;
}
.ControlLineHeader
{
    float: left;
    width: 100%;
}
.LineHeader{
    display: flex;
    float: left;
}
.sizedSelect{
    width: 50% !important;
}

.NumberInputs{
    width: 4.3em;
}
.NumberInputsGroup
{
    flex-wrap: inherit !important;
}

.ControlValues{
float: left;
display: contents;
}

/* .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3 2em);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
    .div1 { grid-area: 1 / 1 / 2 / 3; }
    .div2 { grid-area: 2 / 1 / 3 / 2; }
    .div3 { grid-area: 2 / 2 / 3 / 3; }
    .div4 { grid-area: 3 / 2 / 4 / 3; }
    .div5 { grid-area: 3 / 1 / 4 / 2; } */


    .parent {
        display: grid;
        grid-template-columns: repeat(3, 2fr);
        grid-template-rows: repeat(6, 3em);
        grid-column-gap: 0px;
        grid-row-gap: 0px3
        }
        
    .div1 { grid-area: 1 / 1 / 2 / 4; }
    .div2 { grid-area: 2 / 1 / 3 / 4; }
    .div3 { grid-area: 3 / 1 / 4 / 4; }
    .div4 { grid-area: 4 / 1 / 5 / 4; }
    .div5 { grid-area: 5 / 1 / 6 / 2; }
    .div6 { grid-area: 5 / 2 / 6 / 3; }
    .div7 { grid-area: 6 / 1 / 7 / 2; }
    .div8 { grid-area: 6 / 2 / 7 / 3; }
    .div9 { grid-area: 6 / 3 / 7 / 4; }