main {
    height:max-content;
}

.mech-calcs-section1 { /*mech calcs left menu container*/
    height:calc(100vh - 75px);
    width:fit-content;
    background-color: var(--header-color);
    text-wrap: nowrap;
    
}
.mech-calcs-section2 {
    width:100%;
    display:flex;
}
.mech-calcs-section3 {
    width:100%;
    display:flex;
    justify-content: center;
}
#mech_calcs_materialTable {
    
    width: fit-content;
    height: fit-content;
    
}



.leftnav {
    height: 100%;
    width: fit-content;

}

.leftnav ul{
    height: 100%;
    width: fit-content;
    list-style-type: none;

}

.leftnav ul li {
    background-color: VAR(--header-color);

    
}

.leftnav ul li:hover {
    background-color: VAR(--header-hover-color);
    color: VAR(--dark-text-color); /*this is just text color*/
    transition: all ease-in-out 300ms;
}

.leftnav ul li a {
    padding: 0px 10px;
    display: block;
    line-height: 45px;  /*this centers the text vertically. nothing else works*/
    font-weight: bold;


    
}


.calcbox {
    width:100%;
    height:fit-content;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    margin:10px;
    text-align:left;
}



.calcbox div {
    display:flex;
}

.calcbox label {
    color:#DDD;
    
}
.calcbox div input,
.calcbox div output,
.calcbox div select {
    flex-grow: 1;
}
.calcbox .unitToggler {
    display: flex;
    align-self: center;
}