/*     */
  .zTooltip {
    position: absolute;
    padding: 4px 20px 4px 20px;
    border-radius:5px;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  }
  .zMarker {
    transition: transform .5s;
    border-width: 3px;
    border-style: solid;
    font-weight:bold;
    text-align:center;
    border-radius:50%;
    line-height:30px;
    object-fit: cover;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);

    -webkit-animation-name: placeBound;
    -webkit-animation-duration: 1.5s;
    animation-name: placeBound;
    animation-duration: 1.5s;
  }
  .zMarker:hover {
    -webkit-animation-name: placeZoom;
    -webkit-animation-duration: 0.3s;
    animation-name: placeZoom;
    animation-fill-mode: forwards;
    animation-duration: 0.3s;
  }
  .zColorPlace {
    border-color: rgba(10, 92, 124, 0.85);
    background-color: rgba(255, 255, 255, 0.95);
    color: rgba(10, 92, 124, 0.85);
  }
  .zColorEvent {
    border-radius:10%;
    border-color: rgba(10, 124, 18, 0.85);
    background-color: rgba(255, 255, 255, 0.95);
    color: rgba(10, 124, 18, 0.85);
  }
  .zColorService {
    border-radius:10%;
    border-color: rgba(246, 153, 63, 0.85);
    background-color: rgba(255, 255, 255, 0.95);
    color: rgba(246, 153, 63, 0.85);
  }
  .zColorOnTrack {
    border-style: dashed;
  }
  .zPolyline {
    stroke: rgba(255, 153, 0, 0.95);
    color: rgba(255, 153, 0, 0.95);
    stroke-dasharray: 10,10; 
    stroke-width: 3;  
  }
  /*     */

  @keyframes placeBound {
      from { opacity: 0.0; }
      to { opacity: 1.0; }
  }
  @-webkit-keyframes placeBound {
      from { opacity: 0.0; }
      to { opacity: 1.0; }
  }

  @keyframes placeZoom {
    from { width: 48px; height: 48px; margin-left: -24px; margin-top: -24px; border-radius:50%; }
    to { width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; border-radius:10%; }
  }
  @-webkit-keyframes placeZoom {
    from { width: 48px; height: 48px; margin-left: -24px; margin-top: -24px; border-radius:50%; }
    to { width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; border-radius:10%; }
  }

  @keyframes serviceZoom {
    from { width: 48px; height: 48px; margin-left: -24px; margin-top: -24px; border-radius:50%; }
    to { width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; border-radius:10%; }
  }
  @-webkit-keyframes serviceZoom {
    from { width: 48px; height: 48px; margin-left: -24px; margin-top: -24px; border-radius:50%; }
    to { width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; border-radius:10%; }
  }

  @keyframes eventZoom {
    from { width: 48px; height: 48px; margin-left: -24px; margin-top: -24px; border-radius:50%; }
    to { width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; border-radius:10%; }
  }
  @-webkit-keyframes eventZoom {
    from { width: 48px; height: 48px; margin-left: -24px; margin-top: -24px; border-radius:50%; }
    to { width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; border-radius:10%; }
  }

  .leaflet-sidebar > .leaflet-control
  {
      background-color: white;
      color: black;
      padding: 0px;
      border: 0px solid rgba(15, 91, 125, 1) !important;
      z-index: 1001;

      -webkit-border-radius: 0px;
      border-radius: 0px;
  }
  .leaflet-sidebar.left {
      padding: 0px;
      max-width: 50%;
  }


  ::-webkit-scrollbar {
      width: 4px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey;
      border-radius: 2px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
      background: #30AFBE;
      border-radius: 2px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
      background: #30AFBE;
  }