html {
  font-family: "Poppins", sans-serif;
  line-height: normal;
  font-size: 14px;
}

@media screen and (max-width: 700px) {
  html {
    font-size: 12px;
  }
}

.container {
  position: relative;
  float: left;
  display: inline-block;
  width: 100%;
  margin: 5px 0px;
  text-align: center;
}

/* style settings for map based inputs */
.mapouter {
  display: inline-block;
  text-align: center;
  width: 100%;
  height: 600px;
  transition: 0.2s;
}
.mainmapbox {
  width: 70%;
}
.mapimages1 {
  display: inline-block;
  background-image: url("../search/birdimage1.jpg");
  background-position: center;
  background-size: auto 600px;
  text-align: center;
  width: 14%;
  height: 600px;
  transition: 0.2s;
}
.mapimages2 {
  display: inline-block;
  background-image: url("../search/birdimage2.jpg");
  background-position: center;
  background-size: auto 600px;
  text-align: center;
  width: 14%;
  height: 600px;
  transition: 0.2s;
}
@media screen and (max-width: 1200px) {
  .mapimages1 {
    display: none;
    transition: 0.2s;
  }
  .mapimages2 {
    width: 16%;
    transition: 0.2s;
  }
  .mainmapbox {
    width: 83%;
    transition: 0.2s;
  }
}
@media screen and (max-width: 1000px) {
  .mapouter {
    height: 550px;
    transition: 0.2s;
  }
  .mainmapbox {
    width: 100%;
    transition: 0.2s;
  }
  .mapimages1 {
    display: none;
    transition: 0.2s;
  }
  .mapimages2 {
    display: none;
    transition: 0.2s;
  }
}

@media screen and (max-width: 800px) {
  .mapouter {
    height: 500px;
    transition: 0.2s;
  }
}
@media screen and (max-width: 640px) {
  .mapouter {
    width: 95%;
    height: 450px;
    transition: 0.2s;
  }
}
.mapbuttondiv {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  align-self: center;
  text-align: center;
  margin-left: 5%;
  width: 90%;
  height: 40px;
  transition: 0.2s;
}
.buttonaction {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  align-self: center;
  text-align: center;
  height: 40px;
  transition: 0.2s;
}


/* Advance searchbox properties */

.advsearchbox {
  margin: 0px 5px;
  width: calc (100% - 10px);
  text-align: center;
  height: 0px;
  overflow: hidden;
  transition-duration: 0.2s;
}
#asearch-button2 {
  display: none;
}
#asearch-button2:checked ~ .advsearchbox {
  height: auto;
  transition-duration: 0.2s;
}

#advsearchmenues1 {
  width: 34%;
  display: inline-block;
  vertical-align: top;
  border: 1px rgba(0, 0, 0, 0.2) solid;
}
#advsearchmenues2 {
  width: 30%;
  display: inline-block;
  vertical-align: top;
  border: 1px rgba(0, 0, 0, 0.2) solid;
}
#advsearchmenues3 {
  width: 34%;
  display: inline-block;
  vertical-align: top;
  border: 1px rgba(0, 0, 0, 0.2) solid;
}

.SrchPop {
  text-align: center;
  font-family: "Poppins", sans-serif;
  color: var(--font_black);
  font-size: 14px;
}
/* region, district and season selection selector for the map */
.SrchTools input[type="radio"] {
  display: none;
}

/* buttons colors*/

:root {
  --green_norm: #4caf50;
  --green_chec: #2c652f;
  --blue_norm: #008cba;
  --blue_chec: #005f7d;
  --red_norm: #f44336;
  --red_chec: #a5150a;
  --font_norm: #ffffff;
  --font_chec: #000000;
}

/* green buttons*/
.SrchTools label {
  display: inline-block;
  padding: 1px 1px;
  margin: 3px 2px;
  text-align: center;
  font-size: 12px;
  background-color: var(--green_norm);
  color: var(--font_norm);
  transition: 0.3s;
  cursor: pointer;
  width: 100px;
}
.SrchTools input[type="radio"]:hover + label {
  color: var(--font_chec);
  opacity: 0.7;
}
.SrchTools input[type="radio"]:checked + label {
  background-color: var(--green_chec);
}

/* blue buttons*/
.SrchTools .bluelabel {
  display: inline-block;
  padding: 1px 1px;
  margin: 3px 2px;
  text-align: center;
  font-size: 12px;
  background-color: var(--blue_norm);
  color: var(--font_norm);
  transition: 0.3s;
  cursor: pointer;
  width: 100px;
}
.SrchTools input[id="dstRad11"]:checked + label {
  background-color: var(--blue_chec);
}
.SrchTools input[id="Season13"]:checked + label {
  background-color: var(--blue_chec);
}
.SrchTools input[id="Season14"]:checked + label {
  background-color: var(--blue_chec);
}
.SrchTools input[id="Season15"]:checked + label {
  background-color: var(--blue_chec);
}
.SrchTools input[id="Season16"]:checked + label {
  background-color: var(--blue_chec);
}
/* Red buttons*/
.SrchTools .resetlabel {
  display: inline-block;
  padding: 1px 1px;
  margin: 3px 2px;
  text-align: center;
  font-size: 12px;
  background-color: var(--red_norm);
  color: var(--font_norm);
  transition: 0.3s;
  cursor: pointer;
  width: 100px;
}
.SrchTools input[id="dstRad12"]:checked + label {
  background-color: var(--red_chec);
}
.SrchTools input[id="Season17"]:checked + label {
  background-color: var(--red_chec);
}
.SrchTools input[id="otherbutton"]:checked + label {
  background-color: var(--red_chec);
}

/* stlye settings for text based inputs */
.filter3 {
  width: 50%;
  padding: 2px 2px;
  margin: 3px 0;
  display: inline-block;
  border: 1px solid var(--nav_mid);
  border-radius: 2px;
  box-sizing: border-box;
  outline: none;
}

@media screen and (max-width: 700px) {
  #advsearchmenues1 {
    width: 100%;
  }
  #advsearchmenues2 {
    width: 100%;
  }
  #advsearchmenues3 {
    width: 100%;
  }
}

/* main data table style settings */
table {
  border-collapse: collapse;
  font-family: "Poppins", sans-serif;
  font-size: small;
  text-align: center;
}
@media screen and (max-width: 640px) {
  table {
    font-size: 12px;
  }
}

.TabFamRow {
  background-color: var(--page_head_l);
}

.TabNam,
.TabR0,
.TabR1,
.TabR2,
.TabR3,
.TabR6 {
  border-spacing: 0px;
  border-style: solid;
  border-width: 1px 0px 1px 0px;
}
.TabSce {
  border-spacing: 0px;
  border-style: solid;
  border-width: 1px 0px 1px 0px;
  font-style: oblique;
}
.TabNam > a:link,
.TabNam > a:visited,
.TabSce > a:link,
.TabSce > a:visited {
  color: var(--font_black);
  padding: 0px 5px;
  background-color: var(--bird_box2);
  text-decoration: none;
}
.TabNam > a:hover,
.TabSce > a:hover {
  background-color: var(--bird_box1);
}

.TableHeader,
.TabR0H,
.TabR1H,
.TabR2H,
.TabR3H,
.TabR6H {
  text-align: center;
  font-weight: bold;
  border-width: 2px 0px 3px 0px;
  border-color: var(--page_nav);
  background-color: var(--page_head_d);
  color: var(--font_white);
}
.TabFam {
  border-spacing: 0px;
  border-style: solid;
  border-width: 0px;
  border-color: var(--page_nav);
  font-weight: bold;
  color: var(--font_white);
  text-align: center;
  background-color: var(--page_head_l);
}

.Tabhid {
  font-size: 1px;
  visibility: hidden;
}

@media screen and (max-width: 1920px) {
  .Tabhid {
    font-size: 0px;
    visibility: hidden;
  }
}

@media screen and (max-width: 1200px) {
  .TabR1H,
  .TabR1 {
    font-size: 0px;
    visibility: hidden;
  }
}

@media screen and (max-width: 1100px) {
  .TabR2H,
  .TabR2 {
    font-size: 0px;
    visibility: hidden;
  }
}

@media screen and (max-width: 1000px) {
  .TabR3H,
  .TabR3 {
    font-size: 0px;
    visibility: hidden;
  }
}

@media screen and (max-width: 850px) {
  .TabR6H,
  .TabR6 {
    font-size: 0px;
    visibility: hidden;
  }
}

.heading1 {
  display: inline-block;
  background-color: var(--page_head_d);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: "Titillium Web", sans-serif;
  color: var(--font_white);
  font-size: 24px;
  font-weight: bold;
  padding-top: 2px;
  padding-bottom: 2px;
  margin: 3px 0px;
  width: 100%;
}
.heading2 {
  display: inline-block;
  background-color: var(--page_head_d);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: "Titillium Web", sans-serif;
  color: var(--font_white);
  font-size: 20px;
  font-weight: bold;
  padding: 1px 15px;
  margin: 3px 0px;
  width: 100%;
}