
.mapButton {
    position: fixed;
    z-index: 4000;
}

.control {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 20px;
}

.ol-mouse-position {
    width: 100%;
    top: unset;
    bottom: 10px; 
    left: unset; 
    right:unset; 
    text-align: center;
    color: rgb(30,30,30);
    font-family: roboto; 
}

.ol-zoom {
    position: fixed; 
    top:10px; 
    left:60px; 
    color: rgb(30,30,30);
    font-family:roboto; 
    background-color: transparent;  
    height: 45px;
}

::ng-deep .ol-dragbox {
  background-color: rgba(255,255,255,0.4) !important;
  border-color: rgba(100,150,0,1) !important;
  border-style: solid;
  border-width: 1px;
}

/* Marks the point the cursor bearing/distance/ETA readout is pinned to. Fades
   from the moment it appears, over the user's "Tap fade speed" — the template
   binds animation-duration per marker, so the duration here is only a fallback.
   The pin lasts exactly as long, so the readout never outlives the mark.
   The ring and shadow keep it legible over both light and dark chart tiles. */
.cursor-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(255,87,34,0.9);
    border: 2px solid rgba(255,255,255,0.95);
    box-shadow: 0 0 3px rgba(0,0,0,0.6);
    pointer-events: none;
    animation: cursor-marker-fade 1.5s linear forwards;
}

@keyframes cursor-marker-fade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.nosmall {
    display: block;
} 

@media only screen and (max-width: 650px) { 
}

@media only screen and (max-width: 400px) { 
    .nosmall {
        display: none;
    }
    .ol-mouse-position {
        bottom: 2px;
    }
}
