body {
    font-family: 'Arial', sans-serif;
    background-color: lightblue;
}
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    /* line-height: 200%; */
    background-color: #fdf105;
    font-size:4vw;
    /* font-weight:bold; */
    margin:2%;
    margin-top:0%;
}
.flex-item {
    margin:2%;
    height:200vm;
}
select {
  /*-webkit-appearance: none;*/
  /*-moz-appearance: none;*/
  /*appearance: none; */
  text-align: center;
  padding: 4px;
  font:tahoma;
}



.queryDescription {
background-color:white;
font-size:150%;
font-family: 'ariel';
margin: 5px;
padding: 3px;
text-align: center;
}
table {
    width: 95%;
    /* table-layout: fi */
    /* height: auto; */
    margin: auto;
    /* margin-top: 0%; */
    font-size: x-large, auto;
    border: 1px solid black;
}


@media screen and (max-width: 499px)  {
  .desktop-format {display: none; }
  .mobile-break {
      line-height:60%
  }
  select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; 
      }
}

/*  SETTINGS FOR DESKTOP BROWSER */
@media screen and (min-width: 500px)  {
  .mobile-break { display: none; 
  }
  .flex-container {
      font-size:larger;
      height:1%;
  }
.flex-item {
      margin:1vmin;
      height:1%;
      margin:2%;
      margin-top:1%;
      margin-bottom:1%;
      /* margin-right:5%; */
  }
  select {
      /*-webkit-appearance: none;*/
      /*-moz-appearance: none;*/
      /* appearance: none; */
      text-align: center;
      padding: 2px;
      /* font-weight:bolder; */
      font-size:90%;
  }

  .queryDescription {
      margin: 2%;
      margin-top:-1%;
      padding:5px;
      margin-bottom: -2%;
  }
  table {
      width: auto;
      min-width:75%;
  }
}






/* Main content */
.main {
  margin-top: 2%; /* Add a top margin to avoid content overlay */
}

img {
height:2em;
width: auto;
}
h1 {
text-align: center;
color: #006600;
font-size: xx-large, auto;
font-family: 'Gill Sans MT', ' Calibri', 'Trebuchet MS', 'sans-serif';
}

tr:nth-child(even) {
background-color: #37932f;
color: #f6f7f9;
border: 20px solid black;
}
tr:nth-child(odd) {
background-color: #c5c5c2;
border: 10px solid black;
}

th, td {
font-weight: bold;
border: 1px solid black;
padding: 0.2%;
text-align: center;
vertical-align: middle;
}

td {
  font-weight: normal;
  font-size: large;
}

td:nth-child(2) {
  padding: 1px;
} 

img.top {
  vertical-align: middle;
  /* size:10px; */
}

.tooltip {
  position: relative;
}
.tooltip .tooltiptext {
visibility: hidden;
line-height: 1.4 ;
width: max-content;
right: -250% auto;
background-color: rgb(255, 252, 252);
color: #0f0f0f;
text-align: center;
border-radius: 2%;
padding: 10px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  Opacity: 0.9;
}

.wrapper {
  display: inline-block; 
  line-height:normal;
  justify-content:space-evenly;
}