html,
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
main {
width: 80%;
margin: 0 auto;
}
#status {
background-color: bisque;
}
.form {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
align-items: center;
margin-top: 20px;
}
input[type='submit'] {
grid-column: 1 / -1;
}
input,
select {
min-width: 150px;
width: 100%;
}
#root {
display: flex;
flex-wrap: wrap;
/* border: 1px solid black; */
justify-content: space-around;
}
#root > div {
margin: 10px 6px;
/* border: 1px solid red; */
}
.component {
min-width: 300px;
flex: 1;
padding: 10px;
}
.chartComponent {
min-width: 500px;
}
@media screen and (max-width: 800px) {
main {
width: 100%;
}
}