/* MOBILE DISPLAY SETTINGS (DEFAULT) */
body {
  font-family: 'Arial', sans-serif;
  background-color: lightblue;
}
.flex-container {
  overflow: hidden;
  /* padding: 2%; */
  line-height:150%;
  background-color: #fdf105;
  font-family:   'Gill Sans MT', ' Calibri', 
  'Trebuchet MS', 'sans-serif';
  font-size: large;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-item {
  margin:2%;
  height:200vm;
}
select {
/*-webkit-appearance: none;*/
/*-moz-appearance: none;*/
/*appearance: none; */
font-size: medium;
text-align: center;
padding: 4px;
font:tahoma;
}


.queryDescription {
  background-color:white;
  font-size:150%;
  font-family: 'ariel';
  margin: 4px;
  padding: 1px;
  text-align: center;
}
table {
  width: 95%;
  /* height: auto; */
  margin: auto;
  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 {
    overflow: hidden;
    padding: 0%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: large;
    /* line-height:1%; */

  }

  .flex-item {
    /* margin:2%; */
    margin-bottom: 3%;
    height:1vmax;
  }
  .queryDescription {
    margin: 5px;
    padding:5px;
    /* margin-bottom:10px; */
  }
  table {
    margin: 2%;
    margin-top:2px;
  }

}



/* Main content */
.main {
  margin-top: 0%; /* 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;
}


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;
  /* align-items: center;
  justify-content: space-between; */
}