div#viewer {
  position: relative;
  min-height: 570px;
  min-width: 100%;
  background-color: #eee;
  margin-bottom: 50px;
}

div#mc_top {
  color: #fff0c5;
  background-color: #2f3818;
}

div#coords {
  display: none;
  text-align: left;
  background-color: #999;
  padding: 4px;
}

div#mcc {
  position: absolute;
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
}

div#mc_container {
  position: absolute;
  height: 100%;
  width: 100%;
}

div#mc_left_opts {
  min-height: 100%;
  background-color: #2f3818;
}

div#mc_right_opts {
  display: none;
  min-width: 60px;
  min-height: 100%;
  background-color: #2f3818;
}

div#mc_left_vars,
div#mc_right_vars {
  padding-left: 5px;
  padding-right: 5px;
  min-width: 110px;
  background-color: #fff0c5;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
}

div#xslider {
  padding-top: 5px;
  background-color: #fff0c5;
}

.btn-tools,
.btn-overlays {
  margin-bottom: 3px;
}

#left_tool,
#left_overlay {
  background-color: #ffe189;
}

div#mc_right_vars {
  direction: rtl;
}

div.selected {
  background-color: #ffc416 !important;
}

div#map_col {
  display: table;
  width: 100%;
  height: 100%;
}

div#compare_wrap {
  display: none;
}

div#mapid {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  z-index: 9;
}

div.btn-wrap {
  background-color: #d1d5c7;
  color: #1c1b54;
  margin-bottom: 1px;
  text-align: center;
  white-space: nowrap;
  padding-left: 3px;
  padding-right: 3px;
}

div.left-btn-wrap {
  width: auto;
  background-color: #a3a892;
  color: #1c1b54;
  margin-top: 1px;
  min-width: 60px;
  text-align: right;
  padding-left: 5px;
  padding-right: 5px;
}

div.right-btn-wrap {
  width: auto;
  background-color: #a3a892;
  min-width: 100px;
  color: #1c1b54;
  margin-top: 1px;
  min-width: 60px;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
}

a.btn-option,
a.btn-var {
  text-decoration: none;
}

div.btn-wrap:hover,
div.left-btn-wrap:hover {
  color: #1c1b54;
  background-color: #ffc416;
}

a.pull_ctrl {
  position: absolute;
  color: #ffc414 !important;
  background-color: #ffc414;
  z-index: 1001;
}

a#left_ctrl {
  top: 30%;
  width: 30px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-right: 2px solid #1c1b54;
  border-top: 2px solid #1c1b54;
  border-bottom: 2px solid #1c1b54;
  cursor: w-resize;
}

a#top_ctrl {
  top: 0px;
  left: 50%;
  width: 24px;
  height: 28px;
  text-align: center;
  line-height: .8em;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left: 2px solid #1c1b54;
  border-bottom: 2px solid #1c1b54;
  border-right: 2px solid #1c1b54;
  cursor: n-resize;
}

a#right_ctrl {
  display: none;
  top: 30%;
  right: 0px;
  width: 30px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top: 2px solid #1c1b54;
  border-left: 2px solid #1c1b54;
  border-bottom: 2px solid #1c1b54;
  cursor: e-resize;
}

div.left_sel {
  display: none;
  color: #1c1b54;
  background-color: #fff0c5;
  margin-left: 4px;
  margin-bottom: 2px;
  padding-right: 4px;
  font-size: .8em;
  text-align: right;
  border-bottom-left-radius: 10px;
}

div.right_sel {
  display: none;
  color: #1c1b54;
  background-color: #fff0c5;
  margin-right: 4px;
  margin-bottom: 2px;
  padding-left: 4px;
  font-size: .8em;
  text-align: left;
  border-bottom-right-radius: 10px;
}

div#measure-container h3 {
  margin-top: 5px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

div#measure-container p {
  margin-left: 5px;
  font-size: 10px;
}

div#measure-container ul {
  margin-left: 0px;
  padding-inline-start: 0px;
  margin-block-start: 0em;
  list-style-type: none;
}

div#measure-container {
  display: none;
  position: absolute;
  bottom: 0px;
  left: 3px;
  width: 160px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid gray;
  z-index: 1001;
}

div#mc_cont {
  float: left;
  padding-left: 5px;
}



div#search_container {
  height: 42px;
  width: 100%;
}

div#map_container {
  width: 100%;
  height: 100%;
}

div#map_controls {
  display: inline-block;
  vertical-align: top;
}

div#tool_container {
  display: inline-block;
  height: 550px;
  vertical-align: top;
  text-align: left;
  padding: 0px;
}

div#leaflet_container {
  position: relative;
  display: inline-block;
  top: 1px;
  vertical-align: top;
}

div.ext-search .container {
  margin-left: 25px;
  margin-bottom: 3px;
  font-size: .8em;
}

div.search-label {
  width: 75px;
  text-align: right;
  display: inline-block;
}

/*
.thin::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}   
.thin::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}   
.thin::-webkit-scrollbar-thumb {
    background-color: #ffc416; 
}
*/
div#left_years {
  position: absolute;
  top: 30px;
  left: 10px;
}

div#right_years {
  position: absolute;
  top: 30px;
  right: 10px;
}

div#left_years,
div#right_years {
  z-index: 4;
  font-size: 12px;
  color: #475426;
  padding: 5px;
  background-color: #000;
  height: 450px;
  border-radius: 4px;
}

div#left_year_aerial_select,
div#right_year_aerial_select {
  text-align: center;
  overflow: auto;
  height: 190px;
  width: 60px;
  margin-bottom: 3px;
}

div#left_year_topo_select,
div#right_year_topo_select {
  text-align: center;
  overflow: auto;
  height: 190px;
  width: 60px;
}

div.year_header {
  padding: 3px;
  border-radius: 2px;
  text-align: center;
  color: #475426;
  background-color: #CFD4C5;
  margin-bottom: 3px;
}

div a.selected {
  background-color: #ffc416 !important;
}

a.ypick {
  text-decoration: none !important;
  color: #475426 !important;
  background-color: #fff !important;
}

div.ysel {
  color: #ffc416 !important;
  background-color: #fff !important;
}

div.selected,
a.selected {
  color: black !important;
  background-color: #ffc416 !important;
}

div#slider,
div#diffuse {
  display: none;
}

div#select_option {
  margin-left: 5px;
}

div#save_gallery {
  display: none;
  margin-left: 5px;
}

div#purchase_selection {
  display: none;
  margin-left: 5px;
}

span.ctrl {
  color: #475426;
  padding: 3px;
  font-size: .8em;
}

.help {
  color: #1c1b54;
}

.ui-tooltip,
.arrow:after {
  background: #8c8da9;
  border: 2px solid #1c1b54;
}

.ui-tooltip {
  opacity: 1;
  padding: 10px 20px;
  color: white;
  border-radius: 10px;
  font: 12px "Helvetica Neue", Sans-Serif;
  box-shadow: 0 0 7px black;
}

.arrow_left {
  position: absolute;
  left: 0px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 10px solid #f00;
  vertical-align: middle;
  background-color: #2f3818;
}

.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}

.arrow.top {
  top: -16px;
  bottom: auto;
}

.arrow.left {
  left: 20%;
}

.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top:after {
  bottom: -20px;
  top: auto;
}

.tool_wrapper {
  text-align: left;
  width: 110px;
  background-color: #CFD4C5;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.tool_title {
  display: inline-block;
  background-color: #CFD4C5;
  font-weight: normal;
  padding-left: 3px;
  font-size: .9em;
  width: 88px;
  text-align: left;
  vertical-align: top;
}

.tool_help {
  display: inline-block;
  text-align: right;
  line-height: 2.71em;
  font-size: .8em;
  background-color: #CFD4C5;
  padding-bottom: 4px;
}

.leaflet-control-measure {
  box-shadow: 0px !important;
}

a.leaflet-control-measure-interaction {
  font-size: .8em;
}

a.js-start,
a.js-cancel,
a.js-finish {
  color: #475426;
}

div.js-results {
  line-height: .8em !important;
}

div.js-results p {
  font-size: .8em;
  font-weight: bold;
  margin-top: 4px;
}

div.js-startprompt h3,
div.js-measuringprompt h3 {
  font-size: .8em;
  margin-bottom: 3px;
}

p.lastpoint.heading {
  font-size: .8em;
}

#search_address {
  border: 1px solid #475426;
}

button.select_mode {
  padding: 0px;
  height: 32px;
  width: 32px;
}

span.ui-slider-handle {
  background: #ffc416 !important;
}

div#tile_wait_left,
div#tile_wait_right {
  position: fixed;
  z-index: 9999999999;
}

div#viewer_cap_tools {
  display: inline-block;
  vertical-align: top;
  padding-top: 3px;
}

div#comparison_controls {
  padding-top: 4px;
}

div#overlay_controls {
  padding-top: 4px;
}

div#search_bar {
  display: inline-block;
  padding-top: 3px;
  padding-left: 160px;
  /* z-index: 9999999999; */
}

div#dd_coords {
  border: 1px solid #afb4a5;
  background: #CFD4C5;
  color: #1c1b54;
  z-index: 99;
  display: none;
  position: absolute;
  margin-left: 160px;
  width: 600px;
  padding: 5px;
  box-shadow: 10px 10px 5px #888;
  border-radius: 4px;
  font-size: .8em;
}

div#help_bucket {
  display: inline-block;
  top: 25px;
  padding: 0px;
  vertical-align: top;
}

.micro {
  font-size: .8em !important;
  height: 24px !important;
}

/* leaflet sbs control */
.leaflet-sbs-range {
  -webkit-appearance: none;
  display: inline-block !important;
  vertical-align: middle;
  height: 0;
  padding: 0;
  top: 15px !important;
  margin: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.25);
  min-width: 100px;
  cursor: pointer;
  pointer-events: none;
  z-index: 999;
}

.leaflet-sbs-range::-ms-fill-upper {
  background: transparent;
}

.leaflet-sbs-range::-ms-fill-lower {
  background: rgba(255, 255, 255, 0.25);
}

/* Browser thingies */
.leaflet-sbs-range::-moz-range-track {
  opacity: 0;
}

.leaflet-sbs-range::-ms-track {
  opacity: 0;
}

.leaflet-sbs-range::-ms-tooltip {
  display: none;
}

/* For whatever reason, these need to be defined
 * on their own so dont group them */
.leaflet-sbs-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  background: #fff;
  height: 20px;
  width: 20px;
  border-radius: 15px;
  cursor: ew-resize;
  pointer-events: auto;
  border: 1px solid #ddd;
  background-image: url("images/slider_20.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

.leaflet-sbs-range::-ms-thumb {
  margin: 0;
  padding: 0;
  background: #fff;
  height: 20px;
  width: 20px;
  border-radius: 15px;
  cursor: ew-resize;
  pointer-events: auto;
  border: 1px solid #ddd;
  background-image: url("images/slider_20.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

.leaflet-sbs-range::-moz-range-thumb {
  padding: 0;
  right: 0;
  background: #fff;
  height: 20px;
  width: 20px;
  border-radius: 15px;
  cursor: ew-resize;
  pointer-events: auto;
  border: 1px solid #ddd;
  background-image: url("images/slider_20.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

.leaflet-sbs-range:disabled::-moz-range-thumb {
  cursor: default;
}

.leaflet-sbs-range:disabled::-ms-thumb {
  cursor: default;
}

.leaflet-sbs-range:disabled::-webkit-slider-thumb {
  cursor: default;
}

.leaflet-sbs-range:disabled {
  cursor: default;
}

.leaflet-sbs-range:focus {
  outline: none !important;
}

.leaflet-sbs-range::-moz-focus-outer {
  border: 0;
}