@import "tailwindcss";
@import "maplibre-gl/dist/maplibre-gl.css";

.layers-control {
    line-height: 1.5;
}

.layer-group-name {
    margin-bottom: .2em;
    margin-left: 3px;
    font-weight: 700;
}

.layer-group {
    margin-bottom: .5em;
}

  .layers-control label {
    font-size: 1.08333em;
    display: block;
  }

  .layers-control radio {
    margin-top: 2px;
    position: relative;
    top: 1px;
  }

  .layers-control-separator {
    border-top: 1px solid #ddd;
    height: 0;
    margin: 5px -10px 5px -6px;
  }

        /* used to prevent ui flicker before vuejs loads */
      [v-cloak] {
          display: none;
      }

      .maplibregl-ctrl-basemaps:not(.closed) > .hidden {
        display: unset !important;
      }

      .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;
      }