@import "tailwindcss";
@import "leaflet/dist/leaflet.css";
@import "leaflet.markercluster/dist/MarkerCluster.css";
@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
@import "leaflet-groupedlayercontrol/dist/leaflet.groupedlayercontrol.min.css";
        /* used to prevent ui flicker before vuejs loads */
      [v-cloak] {
          display: none;
      }

      .icon-mqtt-connected {
          background-color: #16a34a;
          border-radius: 25px;
          border: 1px solid white;
      }

      .icon-mqtt-disconnected {
          background-color: #2563eb;
          border-radius: 25px;
          border: 1px solid white;
      }

      .icon-offline {
          background-color: #dc2626;
          border-radius: 25px;
          border: 1px solid white;
      }

      .icon-position-history {
          background-color: #a855f7;
          border-radius: 25px;
          border: 1px solid white;
      }

      .waypoint-label {
          font-size: 26px;
          background-color: transparent;
      }

      .link {
          color: #2563eb;
      }

      .link:hover {
          text-decoration: underline;
      }

      .tooltip {
          position: relative;
          display: inline-block;
      }

      .tooltip .tooltip-text {
          visibility: hidden;
          width: 80px;
          background-color: black;
          color: #fff;
          text-align: center;
          padding: 4px 0;
          border-radius: 6px;
          position: absolute;
          z-index: 10000;
          top: 100%;
          left: 50%;
          margin-top: 8px;
          margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
      }

      .tooltip .tooltip-text::after {
          content: " ";
          position: absolute;
          bottom: 100%;  /* At the top of the tooltip */
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: transparent transparent black transparent;
      }

      .tooltip:hover .tooltip-text {
          visibility: visible;
      }

      .z-search {
          z-index: 1001;
      }

      .z-sidebar {
          z-index: 1002;
      }