styles.css

input[type=text],
	select {
		width: 100%;
		padding:8px 0px;
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-sizing: border-box;
    min-width: 45px;
    text-align: center;
	}

	button {
    background-color: #df8e24;
		color: white;
		padding: 8px 2px;
		margin: 0px;
		border: 1px solid black;
		border-radius: 8px;
		cursor: pointer;
		box-sizing: border-box;
	}

	button:hover {
    background: #e0af43;
    font-weight: bold;
	}

.buttonBox{
  display:flex;
  width: 100%;
  justify-content: center;
}

.buttonStart{
  display:flex;
  background-color: #df8e24;
  color: white;
  height: 30px;
  width: 40px;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-radius: 8px 0px 0px 8px;
  cursor: pointer;
  box-sizing: border-box;
}

.buttonMid{
  display:flex;
  background-color: #df8e24;
  color: white;
  height: 30px;
  width: 40px;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  margin-left: -1px;
  cursor: pointer;
  box-sizing: border-box;
}

.buttonEnd{
  display:flex;
  background-color: #df8e24;
  color: white;
  height: 30px;
  width: 40px;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  margin-left: -1px;
  border-radius: 0px 8px 8px 0px;
  cursor: pointer;
  box-sizing: border-box;
}

.buttonStart:hover{
    background: #e0af43;
    font-weight: bold;    
    transform: translateY(-2px);
}

.buttonStart:active{
    background: #e0af43;
    font-weight: bold;
    transform: translateY(+2px);
}

.buttonMid:hover{
    background: #e0af43;
    font-weight: bold;
    transform: translateY(-2px);
}
.buttonMid:active{
    background: #e0af43;
    font-weight: bold;
    transform: translateY(+2px);
}

.buttonEnd:hover{
    background: #e0af43;
    font-weight: bold;
    transform: translateY(-2px);
}
.buttonEnd:active{
    background: #e0af43;
    font-weight: bold;
    transform: translateY(+2px);
}

.mainbox{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
align-items: stretch;
justify-content: space-around;
margin: 0px;
box-sizing: border-box;
}
  
.box1{
display: flex;
flex-direction: column;
flex-wrap: wrap;
background: #f2f2f2;
width: 30%;
height: 200px ;
border: 1px solid black;
align-items: center;
justify-content: center;
margin: 5px;
}

.matinput{
display: flex;
flex-direction: row;
background: none;
height: 30px;
padding: 5px;
margin: 10px 0px;
align-items: center;
width: 170px;
justify-content: center;
box-sizing: border-box;
}

.box2{
display: flex;
flex-direction: column;
background: #f2f2f2;
margin: 5px;
align-items: center;
justify-content: center;
width: 66%;
border: 1px solid black;
padding: 5px;

}

.subbox2{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}

.levelfact{
display: flex;
flex-direction: row;
height: 30px;
padding: 5px;
justify-content:center;
width: 170px ;
align-items: center;
}

.box3{
display: flex;
flex-direction: column;
background: #f2f2f2;
align-items: center;
justify-content: center;
width: 66%;
border: 1px solid black;
padding: 5px;
margin-right:5px;
margin: 5px;
}

.subbox3{
display: flex;
flex-wrap: wrap;
flex-direction: row; 
justify-content: center;
border: 0px solid blueviolet;
width: 100%;
}

.box3direct{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; 
  border: 0px solid green;
  width: 100%;
}

.box3substance{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  border: 0px solid orange;
  box-sizing: border-box;
  width: 30%;
}

.box3rawmat{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  border: 0px solid orange; 
  box-sizing: border-box;
  width: 70%;
}

.box3intermediate{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  border: 0px solid blueviolet; 
  box-sizing: border-box;
  width: 100%;
}
.matsum{
	display:flex;
  align-items: center;
	min-width:54px;
	margin: 5px;
}

.matout{
  display: flex;
  min-width: 38px;
}

.ico{
	max-width: 35px;
}

.headIco{
  max-width: 50px;
  max-height:50px;
  border: 2px solid rgb(109, 60, 5)
}

.treeBox{
  display: flex;
  border: 0px solid black;
  padding: 5px;
  /*overflow-x: auto;*/
  /*width: 100%;*/
}

.matBox{
  display: flex;
  cursor: pointer;
}

.matIco{
  display:flex;
  width:30px;
  height:70px;
  box-sizing: border-box;
  border: 1px solid black;
  border-right: none;
  align-content: center;
  align-items: center;
}

.plusMinus{
  display:flex;
  width:15px;
  height:70px;
  border: none;
  justify-content: center;
  align-items: center;
}

.matDetail{
  display: flex;
  flex-wrap: wrap;
  width: 190px;
  height:85px;
}

.matName{
  display: flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height: 35px;
  border: 1px solid black;
  background:  #df8e24;
  box-sizing: border-box;
}

.factoryName{
  display: flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height: 35px;
  border: 1px solid black;
  border-top: none;
  background:  rgb(206, 191, 126);
  box-sizing: border-box;
  text-align: center;
}

.matRate{
  display: flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height: 35px;
  border: 1px solid black;
  border-left: none;
  background:  #FFFFFF;
  box-sizing: border-box;
}

.factoryNum{
  display: flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height: 35px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  background:  #FFFFFF;
  box-sizing: border-box;
}

.spacer{
  display: flex;
  width: 190px;
  height: 15px;

}

.branchBox{
  display: flex;
  align-content: stretch;
  flex-direction: column;
  width: 10px;
}

.branchOut{
  width:10px;
  height: 35px;
  border-bottom: 1px solid black;
  box-sizing: border-box;
}

.branchSimple{
  width:10px;
  height: 35px;
  border-bottom: 1px solid black;
  box-sizing: border-box;
}

.branchEnd{
  width:10px;
  height: 35px;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  box-sizing: border-box;
}

.branchDown{
  width:10px;
  flex-grow: 2;
  border-left: 1px solid black;
  box-sizing: border-box;
}

.matRecipe{
  display: flex;
  box-sizing: border-box;
}

.matChildren{
  display: flex;
  flex-direction:column;
  box-sizing: border-box;
}

.treeLevel{
  display: flex;
  box-sizing: border-box;
  }

@media screen and (max-width: 800px){
  .mainbox{
  flex-direction: column;
  width: 100%; 
  align-items: stretch;
  }
  .box1{
	flex-direction: row;
  height: 150px;
	width: 100%;
  margin: 5px 0px;
  }
  .box2{
  flex-direction: column;
  width: 100%;
  margin: 5px 0px;
  padding: 0px;
  }
  .box3{
  width: 100%;
  margin: 5px 0px;
  padding: 0px;
  }
  .levelfact{
    width: 153px;
  }
}