* {
  box-sizing:border-box;
}  
body {
  margin: 0;
}
.flex-box {

  display: flex;
  
  justify-content: space-between;     

  height: 100%;
  padding: 15px;
  gap: 5px;

  font-family: sans-serif;
  color:white;
}
.flex-box h2 {
  margin: 0;
}

.flex-box > section {
  background: #044;
  border: 3px solid #077;
  border-radius: 5px;
  padding: 8px;
  min-width: 10rem;
  max-width: 14rem;
}
.flex-box > main {
  background: #fff;
  border: 3px solid #077;
  border-radius: 5px;
  padding: 8px;
  width: 100%;
  flex-grow:2;
}
.flex-container-controls,
.flex-item-controls {
  display:flex;
  flex-direction: column;  
}
.flex-container-controls > .item,
.flex-item-controls > .item {
  background: #066;
  color:white;
  
}
.flex-container-control-properties,
.flex-item-control-properties {
  gap:0.25rem;
  margin: 0.2rem;
  padding: 0.2rem;
}
.flex-container-control-properties > .item,
.flex-items-control-properties > .item {
  background: #066;
  color:white;
  margin: 0.1rem;
  padding: 0.1rem;
  border-radius: 0.25rem;
  border: 1px solid #055;
  justify-content: space-between;     
}


.fields {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}
.fields > .field {
/*   flex: 0 0 30%; */  
  flex-grow:0;
  flex-shrink:0;
  width:25%;
  font-size: 0.65rem;
  margin: 0.2rem;
  padding: 0.1rem;
}
.field-item-title,
.field-title {
  flex-grow: 0;
  flex-shrink: 0;
  max-width:100%;
  width:100%;
  /* flex-basis: 100%; */
  /* flex: 0 0 100%; */
}

select {
  max-width:100%;
  font-size: 0.65rem;
  background: #044;
  color:white;
}
input {
  max-width:100%;
  font-size: 0.55rem;
  background: #044;
  color:white;
}