#basemap-canvas{
    width: 100%;
    height: 100%;
}

#basemap-mask{
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: white;
    opacity: 0.5;
    z-index: 1000;
}

/** Common for buttons **/
#basemap-styles-button, .basemap-styles-button, .basemap-control{
    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.5);
}

#basemap-styles-button:hover, .basemap-styles-button:hover, .basemap-control:hover{
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
}

/********* STYLES ****************************************/
#basemap-styles {
    float: left;
    margin-right: 5px;
}

#basemap-styles-panel{
    display: none;
    bottom: -3px;
    right: 35px;
    width: 220px;
    position: absolute;
}


/********* STYLES ****************************************/


/********* CONTROLS ****************************************/
#basemap-v-controls{
    /*width: 24px;*/
    bottom: 23px;
    right: 6px;
    position: absolute;
    z-index: 500;
}

/* TODO */
#basemap-h-controls{
    bottom: 30px;
    left: 5px;
    position: absolute;
    z-index: 500;
}

.basemap-control-panel{
    width: 100%;
    height: 100%;
    z-index: 501;
}


#basemap-controls-zoom-in{
    /*margin-bottom: 1px !important;*/
    /*background-image: url('../imgs/map-controls/zoom-in.png');*/
}

#basemap-controls-zoom-in:hover{
    /*background-image: url('../imgs/map-controls/zoom-in-hover.png');*/
}

#basemap-controls-zoom-out{
    /*background-image: url('../imgs/map-controls/zoom-out.png');*/
}

#basemap-controls-zoom-out:hover{
    /*background-image: url('../imgs/map-controls/zoom-out-hover.png');*/
}


.locate-me-active{
    background-image: url('../imgs/map-controls/locate-me-active.png');
}

.locate-me-inactive{
    background-image: url('../imgs/map-controls/locate-me.png');
}

.locate-me-inactive:hover{
    background-image: url('../imgs/map-controls/locate-me-hover.png');
}

.basemap-control{
    width: 24px;
    height: 24px;
    /*border: 2px solid white;*/
    margin-bottom: 5px;
    background-size: contain;
    background-color: white;
    background-repeat: no-repeat;
    background-position: center center;
    /*border-radius: 25%;*/
    cursor: pointer;
}
/********* CONTROLS ****************************************/


/********* LOGO ****************************************/
#platform-overlay1{
    height: 26px;
    width: 130px;
    bottom: 0px;
    left: 72px;
    position: absolute;
    background-position: 0 0;
    background-size: contain;
    background-size: cover;
    overflow: hidden;
    z-index: 501;
    cursor: pointer;
}

#platform-overlay2{
    height: 90px;
    width: 90px;
    bottom: 11px;
    right: 45px;
    position: absolute;
    background-position: 0 0;
    background-size: contain;
    background-size: cover;
    overflow: hidden;
    z-index: 501;
    cursor: pointer;
}


/********* LOGO ****************************************/


/********* MEASUREMENT ****************************************/
#basemap-controls-measure-button {
    float:left;
    margin-right: 1px;
}

#basemap-controls-measure-button:hover{ background-image: url('../imgs/icons/blue/measure.png'); }

.basemap-controls-measure-button-inactive{ background-image: url('../imgs/icons/gray/measure.png'); }

.basemap-controls-measure-button-active{ background-image: url('../imgs/icons/red/measure.png'); }

#basemap-controls-measure-container{ float: left; }

#basemap-controls-measure-panel{
    display: none;
    bottom: -1px;
    right: 107px;
    width: 160px;
    position: absolute;
    background-color: #A479E2;
    border-radius: 2px;
    border: 1px solid white;
    padding: 2px;
    color: white;
    font-size: 8pt;
}

/********* MEASUREMENT ****************************************/




/********* COORDINATES ****************************************/
#basemap-controls-coordinates-button {
    float:left;
    margin-right: 1px;
}

#basemap-controls-coordinates-button:hover { background-image: url('../imgs/icons/blue/coordinates.png'); }

.basemap-controls-coordinates-button-inactive { background-image: url('../imgs/icons/gray/coordinates.png'); }

.basemap-controls-coordinates-button-active { background-image: url('../imgs/icons/red/coordinates.png'); }

#latlng-control {
    background: #4285F4;
    border: 1px solid white;
    border-radius: 2px;
    font-size: 0.8em;
    padding: 2px 4px;
    position: absolute;
    color: white
}
/********* COORDINATES ****************************************/


/********* ELEVATION PROFILE **********************************/
#basemap-controls-elevation-button { float:left; }

#basemap-controls-elevation-button:hover { background-image: url('../imgs/icons/blue/elevation-profile.png'); }

.basemap-controls-elevation-button-inactive { background-image: url('../imgs/icons/gray/elevation-profile.png'); }

.basemap-controls-elevation-button-active { background-image: url('../imgs/icons/red/elevation-profile.png'); }

#basemap-controls-elevation-chart{
    width: 100%;
    height: 100%;
}
/********* ELEVATION PROFILE **********************************/