:root {
   --map-breakpoint: 1150px;
}


#actualMap {
   position: absolute;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
   z-index: 0; /* make sure it's below filters/lists if needed */
}

#actualMap canvas {
   width: 100% !important;
   height: 100% !important;
   display: block;
}



#SVGMapControls{
   display: none !important;
}


#ticket-popover{
   z-index: 10000000;
}


.map-controls {
   position: absolute;
   padding: 16px;
   border-radius: 8px;
   background-color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
   top:  0;
   right: 0;
}

/* When viewport is less than the breakpoint, move right to 256px */
@media (min-width: 1150px) {
   .map-controls {
      right: 220px;
      top: 40px;
   }
}



.map-controls button {
   border-radius: 50%;
   font-size: 14px;
   width: 40px;
   height: 40px;
   cursor: pointer;
   text-align: center;
   color: #000000;
   display: block;
   margin-bottom: 4px;
   background: white;
   border: 1px solid #CCC;
   padding: unset;
   webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);   
}



.map-controls button:hover {
   color: #0066CC;
   box-shadow: #0066CC 0px 0px 7px;
}




.map-controls button[data-disabled='true'] {
   box-shadow: none;
   color: #999;
   border-color: #F1F1F1;
   cursor: default;
}

.map-controls button.zoom-out{
   top: 44px;
}

.map-controls button.reset-map{
   top: 88px;
   display: none;
}

.map-controls button i{
   line-height: 40px;
}


[data-dragged='true'] .map-controls button.reset-map, [data-zoomed='true'] .map-controls button.reset-map{
   display: unset;
}


[data-zoomed^='false']  .map-controls button.zoom-out, [data-zoommax='true']  .map-controls button.zoom-in{
   box-shadow: none !important;
   color: #999 !important;
   border-color: #F1F1F1;
   cursor:default;
}

[data-zoomed='true'] #map-user-msg{
   display: none !important;
}

[data-dragged='true'] #map-user-msg{
   display: none !important;
}

body.mode-ticket #header, body.mode-ticket .map-controls {
   display: none !important;
}