.ramadda-map-bubble .ramadda-map-header {
    text-align:center;
    font-size:120%;
    font-weight:bold;
}

.ramadda-map-small .ramadda-map-header {
    font-size:100%;
}


.ramadda-map-message {
    position:absolute;
    top:10px;
    left:100px;
    background:#FFFEEC;
    z-index:1000;
    border:var(--basic-border);
    padding:5px;
}

.ramadda-map-features .ramadda-map-feature {
    border-bottom:var(--basic-border);
    max-height:100px;
    overflow-y:auto;
}

.ramadda-map-features .ramadda-map-feature:hover {
    background:var(--highlight-background);
    text-decoration:none;
}

/* Add this so when we show a graticule it doesn't pick up the mouse clicks */
.olLayerDiv canvas {
    pointer-events:none;
}

.olLayerGoogleCopyright {
/*jeffmc: use display:none to fix the mouse controls not responding
    top:-1000px;
    display: none;
*/
}

.olControlOverviewMapElement {
    padding:0px;
    border:1px solid #aaa;
    background-color:#ccc; 
}


.olControlAttribution, .olControlMousePosition {
    font-size: 10px !important;
    background:rgba(255,255,255,0.90);
    padding:4px !important;
    padding-top:2px !important;
    padding-bottom:2px !important;    
}

.olControlAttribution {
    right: auto;
    bottom: 2px;
    right: 5px;
    padding:0px;
    display:inline-block;
    max-width:400px;
}


.olControlMousePosition {
    display:inline-block !important;
    font-size: 11px !important;
    right:auto !important;
    bottom:2px !important;
    left:50% !important;
    transform: translateX(-50%);
}

.olControlScaleLine {
    bottom:5px;
    font-size: 9px !important;
}

.olLayerGooglePoweredBy.olLayerGoogleV3.gmnoprint {
   visibility:hidden;
}


.olAlphaImg {
    cursor: pointer;
}

.olControlLayerSwitcher  {
    
}

.olControlLayerSwitcher .layersDiv {
    padding-left:0px;
    padding-right:0px;    
    background:#fff !important;
    border:1px solid #aaa;
    color: #000;
    border-radius:var(--default-radius);    
}


.baseLayersDiv {
    border-bottom:1px solid #000;
    padding-left:0px !important;
}


/* avoid pink tiles */
.olImageLoadError {
    background-color: transparent !important;
    display:none;
}

.olButton, div.olMap {
    z-index:var(--ol-z-index);
    position:relative;
}

.olPopup, .olFramedCloudPopupContent {
    z-index:var(--ol-popup-z-index)  !important;
}

div.olControlZoom a {
    background: #aaa !important;
}

div.olControlZoom {
    background: transparent !important;
}


.olPopup {
    padding:5px;
    border:1px solid #aaa !important;
    border-radius:var(--default-radius);
    max-height:400px;
    box-shadow:  8px 8px 10px 0px rgba(136,136,136, 0.75);
    box-shadow:  6px 6px 20px 0px rgba(136,136,136, 0.75);     
}

.dataLayersDiv, .baseLayersDiv {
    max-height:150px !important;
}

.dataLayersDiv {
    max-height:150px !important;
    height:150px !important;    
}

.olPopupContent {
    font-size:8pt;
    padding:0px !important;
    padding-right:8px !important;
    padding-bottom:8px !important;        
    z-index:var(--ol-popup-z-index)  !important;
    overflow-y:auto;
}

.olPopupCloseBox {
    background: url("icons/close.gif") no-repeat !important;
    right:0px !important;
}

.olPopupContent h3 {
    margin-top:0px;
}
.olFramedCloudPopupContent {
    font-size:8pt;
}

.ramadda-map {
}

.ramadda-map-inner {
    border:1px #aaa solid;
    border: var(--basic-border);
    background-color:#7391ad; 
}


mapheader {
    display:block;
    text-align:center;
    font-weight:bold;
    font-size:130%;
}

.ramadda-map-toc-outer {
    border:1px solid #ccc;
    position:absolute;
    left:50px;
    top:10px;
    background:#fff;
}

.ramadda-map-toc-inner {
    padding:5px;
    margin-right:5px;
    max-width:200px;
    overflow-x:overlay;
    max-height:500px;
    overflow-y:auto;
    white-space:nowrap;
}

.ramadda-map-toc-header {
    min-width:200px;
    padding:5px;
    font-weight:bold;
    background:lightcyan;
    background:var(--header-background);
    border-bottom: var(--basic-border);
}

.ramadda-map-header {
    text-align:center;
}

.ramadda-map-slider {
    position:absolute;
    top:0px;
    background:#ffffff;
    border:1px solid #ccc; 
}


.ramadda-map-container {
    position:relative;
}


.ramadda-map-loc:hover {
    background:#eee;
}

.ramadda-map-loc {
    border-bottom: var(--basic-border);
    padding-left:4px;
    padding-right:4px;
    padding-bottom:2px;
    padding-top:2px;
    max-width: 300px;
    overflow-x:hidden;
    white-space:nowrap;
    cursor: pointer;
}

.ramadda-map-loc-input {
    border:1px #aaa solid;
}

.ramadda-map-latlonreadout {
}

.ramadda-map-animation {
}

.ramadda-map-credits  {
    z-index: 1000;
    position:absolute;
    bottom:2px;
    left:50%;
    transform: translateX(50%, -10px);
    border:1px solid #aaa;
    background:rgba(255,255,255,0.8);
    font-size:8pt;
    padding-left:2px;
    padding-right:2px;    
}

.ramadda-map-features {
}

.ramadda-map-feature {
    cursor:pointer;
}
.ramadda-map-feature:hover {
    text-decoration: underline;
}



.ramadda-map-animation-ticks {
    position:relative;
    height:21px;
    border-bottom: 1px #aaa solid;
}

.ramadda-map-animation-tick-reset {
    cursor:pointer;
}

.ramadda-map-animation-tick-reset:hover {
    text-decoration: underline;
}

.ramadda-map-animation-tick {
    width:5px;
    position:absolute;
    height:20px;
    background-color:#888;
    display:inline-block;
    z-index:var(--animation-tick-z-index);
}
.ramadda-map-animation-tick:hover {
    background-color:blue;
    z-index:var(--animation-tick-hover-z-index);
}

.ramadda-map-search {
    margin-bottom:0px;
}

.ramadda-map-search  input {
    border:1px #aaa solid;
}


.ramadda-popup .baseLayersDiv {
    max-height: 100px !important;
}

.ramadda-map-layer-item {
    white-space:nowrap;
    margin-left:10px;
}

.ramadda-map-layer-item .labelSpan {
    display:inline-block;
    width:90%;
    font-size:8pt;
    padding-left:1.75em;

}

.ramadda-map-layer-item .labelSpan:hover {
    background:var(--highlight-background);
}

.baseLayersDiv, .dataLayersDiv {
    max-height:150px;
    overflow-y: auto;
}

.olControlLayerSwitcher .layersDiv .baseLayersDiv, .olControlLayerSwitcher .layersDiv .dataLayersDiv {
  padding-left: 0px !important;
}