/* Disable horizontal scrolling */
html, body {
    overflow-x: hidden;
}




h1 {
    text-align: center;
    color: rgb(25, 25, 112);
    padding: 40px 0px 0px;
}

#outer-flex-container {
    display: flex;
    flex-direction: column; 	
}

#inner-flex-container {
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

#mainpanel {
    margin-bottom: 40px;
    margin-right: 40px;
}

#aside {
    width: 1000px;
    align-items: center;
}
.tab-content {
    padding: 10px;
}

@media screen and ( max-width: 1500px) {
    #inner-flex-container  { 
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
     }
    #mainpanel { height: 100vh; }
    #mainpanel { height: auto;  }
    #aside { height: auto;  }
}

.formset-row input {
    height:30px;
    width: 70px;
}

.formset-row select {
    height:30px;
    width: 80px;
}

label {
    font-weight: bold;
}

/* Apply the same styles to each case-sensitive variant */
.Coordinate, 
.coordinate, 
.load, 
.Load, 
.Force, 
.Torque, 
.Angle, 
.Support {
    font-weight: 400;
    font-size: 12px;
}

/* Different styles for mobile view */
@media only screen and (max-width: 800px) {
    .Coordinate, 
    .coordinate, 
    .load, 
    .Load, 
    .Force, 
    .Torque, 
    .Angle, 
    .Support {
        font-weight: 400;
        font-size: 14px;
    }
}

/* Base styles for .Beam-div */
/* Default style for larger screens */
.Beam-div input {
    width: 100%; /* Full width within the container */
    max-width: 300px; /* Limit the width on larger screens */
}

.Beam-div .col-form-label {
    font-size: 14px;
}

/* Responsive style for smaller screens */
@media only screen and (max-width: 449px) {
    .Beam-div input {
        width: 100%; /* Full width on smaller screens */
        max-width: 200px; /* Adjust max-width for mobile view */
        font-size: 12px;
    }
}



/* Font Awesome */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap; /* 👈 fix is here */
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/webfonts/fa-solid-900.woff2") format("woff2"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/webfonts/fa-solid-900.woff") format("woff");
}