/*.searchfieldcontainer, #outputarea, #modecontainer, #countcontainer
 {
  font-size: 9pt;
 }*/

.searchfieldcontainer.vertical
 {
  display: flex;
  flex-direction: column;
  margin-top: 3px;
 }

#searchform, #outputarea
 {
  font-size: 0.7524rem;
 } 

.preamble
 {
  font-size: 1rem;
 }

#searchform input:focus-within
 {
  outline: solid 2px black;
 } 

#countcontainer
 {
  display: flex;
  flex-direction: column;
  align-items:flex-start;
 }

#synswitchcontainer,#pickercontainer
 {
  background-color: #eeeeee;
  padding: 3px;
  border-radius: 5px;
  margin-bottom: 3px;
 }

#modecontainer
 {
   border: solid 1px #cccccc;
   border-radius: 5px;
   padding: 5px;
   margin-top: 2px;
 }

#modebuttoncontainer, #pickerbuttoncontainer
 {
   display: flex;
   border: solid 1px #eeeeee;
   border-radius: 5px;
   padding: 5px;
   margin-top: 2px;
 }

.modeoption
 {
  display: flex;
  align-items: center;
  border: solid 1px #cccccc;
  border-radius: 5px;
  padding: 2px;
  margin-right: 2px;
 }

.modeoption:focus-within
 {
  outline: solid 1px darkgray;
 } 

#pickerlist
 {
  max-height: 300px;
  overflow-y: auto;
  position: relative;
 } 
 
#pickerlist div
 {
  cursor: pointer;
  margin-bottom:2px;
  background-color: lightgrey;
  border: solid 1px lightgrey;
  padding-left: 3px;
 } 
 
#pickerlist div:hover
 {
  background-color: lightblue;
  border: solid 1px lightblue;
 }

#pickerlist div.selected
 {
  background-color: lightblue;
  border: solid 1px grey;
 }

#pickerfilter, #level, #shapepicker, #subsetlist
 {
  /*width: 100%;*/
  border-radius: 5px;
  border: solid 1px #cccccc;
 }

#shapepicker, #subsetlist
 {
  font-size: 9pt;
 }
   
#downloadbutton
 {
  border-radius: 5px;
  border: solid 1px #cccccc;
  margin-left: 10px;
  vertical-align: middle;
 } 
 
div.helptext, div.helptexttitle
 {
  margin-bottom: 5px;
 }
 
div.helptexttitle
 {
  font-weight: bold;
  margin-top: 30px;
 } 

div.helptexttitle:nth-of-type(1)
 {
  margin-top: 0px;
 }    

#columncontainer h1:nth-of-type(1)
 {
  margin-bottom: 10px;
 }