div#viewer {
    position: relative;
    min-height: 650px;
    min-width: 100%;
    background-color: #eee;
}
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%;
    # left: 0;
    # top: 0;
    # right: 0;
    # bottom: 0;
    # overflow: auto;
}
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 {
    # position: absolute;
    # left: 100px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 65px;
    background-color: #fff0c5;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
}
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 {
    # position: relative;
    display: table;
    width: 100%;
    height: 100%;
}
div#compare_wrap {
    display: none;
    # display: table-row;
}
div#mapid {
    border: 1px solid black;
    # position: relative;
    # top: 0px;
    # bottom: 0px;
    # left: 0px;
    # right: 0px;
    width: 100%;
    height: 100%;
    z-index: 9;
}
div.btn-wrap {
    width: auto;
    background-color: #d1d5c7;
    color: #1c1b54;
    margin-bottom: 1px;
    text-align: center;
    # padding-left: 5px;
    # padding-right: 5px;
    white-space: nowrap;
}
div.left-btn-wrap {
    width: auto;
    background-color: #a3a892;
    color: #1c1b54;
    # margin-bottom: 1px;
    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 {
    # font-size: 2em;
    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;
    # text-align: center;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid gray;
    z-index: 1001;
}







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;
}
# div.leaflet-control-zoom {
#     margin-left: 90px !important;
#     margin-top: 30px !important;
# }
# a.leaflet-control-measure-toggle {
#     width: 30px !important;
#     height: 30px !important;
# }
/*
.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;
#     position: absolute;
#     left: 50px;
#     top: 5px;
#     width: 90%;
#     background-color: #475426;
}
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;
}
# div#measure-container {
#     left: 5px;
#     height: 235px;
#     width: 148px;
#     font-size: .8em;
#     color: #475426;
#     z-index: 9999999999;
#     text-align: left;
# }
.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;
}
.leaflet-top.leaflet-left {
    # z-index: 9999999999;
}
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;
}
/* 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;}