.map-toolbox {
  min-height: 30px;
  margin:     10px 0 10px 0;
}

/*==== legend ====*/
/*---- checktool ----*/
.map-toolbox #legend .checktool {
  margin-top: 10px;
}

.map-toolbox #legend div.checkall, .map-toolbox #legend div.uncheckall {
  display:       inline-block;
  margin-right:  10px;
  color:         blue;
  border:        1px solid #CCCCCC;
  font-size:     0.9rem;
  padding:       2px 5px;
  border-radius: 5px;
  background:    #CCCCCC;
}

.map-toolbox #legend div.checkall:hover, .map-toolbox #legend div.uncheckall:hover {
  cursor:     pointer;
  color:      #FFFFFF;
  background: darkorange;
}

/*---- item ----*/
.map-toolbox #legend div.radio {
  display:      inline-block;
  margin-right: 10px;
  border:1px solid transparent;
}

.map-toolbox #legend .radio > span.checkbox {
  display:                inline-block;
  text-rendering:         auto;
  -webkit-font-smoothing: antialiased;
  margin-right:           5px;
}

.map-toolbox #legend .radio > span.label {
  display:                inline-block;
  text-rendering:         auto;
  -webkit-font-smoothing: antialiased;
  margin-right:           5px;
}

.map-toolbox #legend div.notcheckable.radio {
  opacity: .5
}

.map-toolbox #legend div.checkable.radio:hover {
  border-bottom: 1px solid red;
  background:    #EEEEEE;
}

.map-toolbox #legend div.checkable.radio > span.checkbox {
  cursor: pointer;
}

.map-toolbox #legend div.checkable.radio > span.label {
  cursor: pointer;
}

.map-toolbox #legend .radio.checked > span.checkbox:before {
  font:    var(--fa-font-solid);
  content: "\f058";
}

.map-toolbox #legend .radio.notchecked > span.checkbox:before {
  font:    var(--fa-font-regular);
  content: "\f111";
}

.map-toolbox #legend .radio.notcheckable > span.checkbox:before {
  font:    var(--fa-font-regular);
  content: "\f111";
}

.map-toolbox > h2 {
  display:      inline-block;
  margin-right: 20px;
}

/*---- counties select dropdown ----*/

.counties-wrapper {
  position: relative;
  display:  inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color:            white;
  padding:          5px 16px;
  border:           none;
  width:            200px;
  cursor:           pointer;
}

.counties {
  display:          none;
  position:         absolute;
  background-color: #F9F9F9;
  min-width:        200px;
  z-index:          10000;
  height:           350px;
  padding:          15px 0;
  overflow:         auto;
}

.counties a {
  color:           black;
  padding:         5px 16px;
  text-decoration: none;
  display:         block;
}

.counties a:hover {
  background-color: #CCCCCC;
  text-decoration:  none;
}

.counties-wrapper:hover .counties {
  display: block;
}

.counties-wrapper:hover .dropbtn {
  background-color: #3E8E41;
}