.line2{
  display: inline-block;
}

h3 {
  text-align: left;
  color: rgb(117, 56, 56);
  margin-left: 2px;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}
  
thead,
  tfoot {
  background-color: rgb(228 240 245);
}
  
th,td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}
  
td:last-of-type {
  text-align: center;
}
  
tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}
  
tfoot th {
  text-align: right;
}
  
tfoot td {
  font-weight: bold;
}

#milk, #milklist{
  margin: auto;
  width: 50%;
  border: 3px solid yellowgreen;
  padding: 10px;
  border-radius: 20%;
  border-color: blue;
}

#panel{     
  width: 150px;
  height: 150px;
  background-color: #3498db;
  transform: rotate(45deg); /* Rotate square to make diamond */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  margin: auto;
  margin-top: 70px;
  border-radius: 10%;
}

#panel span {
  transform: rotate(-45deg); /* Rotate text back to normal */
  align-items: center;
}
  
#topbar1, #topbar2, #topbar3, #topbar4 {
  margin: auto;
  width: 100px;
  height: 55px;
  color:wheat;
  position: relative;
  position: center;
  background: rgb(51, 168, 177);
  border-color: black;
  border-radius: 30%;
  border-style: double;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left-width: 1;
  border-top-left-radius: var(--r);
  border-right-width: 1;
  border-top-right-radius: var(--r);
}

#square1, #square2, #square3, #square4{
  width:60px;
  margin-top: 5px;
  height:60px;
  border-radius: 40%;
  background-color: rgb(142, 165, 42);
  position: relative;
  border-style: double;
}

#hidden,#visible, #btn{
  border-color: blue;
  border-radius: 30%;
}

#clk1, #clk2, #clk3, #clk4{
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-right: 10px;
}

#drag{ 
  width: 100px;
  height: 100px;
  background-color: rgb(209, 180, 15);
  transform: rotate(0deg); /* Rotate square to make diamond */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(109, 131, 31, 0.2);
  margin: auto;
  border-radius: 10%;
  margin-top: 70px;
  cursor: move;
}

#accordion{
  margin-bottom: 15px;
}

#button1,#button2,#addItem1, #addItem2{
  border-color: red;
  margin-bottom : 15px;
  margin-top : 15px;
}
 
.useCSSStyle{
  font-size: x-large;
  font-weight: bold;
}