/* table css*/ 
  

.table{display: flex; align-items: center; justify-content: center; overflow: scroll; color: black}

div table{  
    text-align: center;
    font-weight: normal; 
    width: 100%; 
    height:50vh;
    border-collapse: collapse;
    margin-top: 100px;
    margin-bottom: 10%;   
}
table caption {font-family:monospace;
  font-size: 9dvh;}


table tbody td {border-width: thin; border-style: solid ; background-color: #E5ECF9e7;  }
table tbody th {border-width: thin;border-style: solid; vertical-align: center ; background-color: #CBD7EB; }
table thead th {border-width: thin;border-style: solid;  vertical-align: top; background-color:#CBD7EB; }

.gray{ background-color: #BDC0C6;}



/* parent css*/ 

#flexbox-header{
  display:flex;
  margin: 9%; 
  width: 80%;  
  background-color: #acbad2;
  justify-content: center;
  margin-bottom: 0%;
  font-family: Arial, Helvetica, sans-serif;
  color: #141e30;

}
.flexbox { 
display: flex;
  margin: 9%; 
  width: 80%;  
  background-color: #768bb0;
  margin-top: .0%;
  overflow-x: scroll;
  height: max-content;
  }

.flexbox-items{
align-items: center;
margin: 3%; 
width: 50%; 
min-height: 70%; 
border: 1.5% solid rgb(94, 150, 181); 
background-color: #C7D4EA;
text-align: center;
color: #141e30;}

h1{text-align: center; margin-top: 3%;
  margin-bottom: 3%;}
  

.control-button{ 
    width: 50%;
	margin-left: 40%;
  
  }

  .button{
    border: none;
    color: rgb(144, 161, 209);
    padding: 5vh 3.2vh;
    text-align: center;
    text-decoration:none;
    flex-direction: column;
    margin: 2vh;
    cursor: pointer;
    background-color:#768bb0;
    border-radius:8%; 
	width:25%;
}


   

@media (max-width: 768px) {
  
.control-button{ 
    width: 75%;
	margin-left: 0px;
	margin-right: 0px;
  }

  .button{ 
	width:100%;
}

}