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

.icon-longfast {
    background-color: #009016;
    border-radius: 25px;
    border: 1px solid #2C2D3C;
}

.icon-mediumfast {
    background-color: #326be7; 
    border-radius: 25px;
    border: 1px solid #2C2D3C;
}

.icon-shortslow {
    background-color: #0077e6;
    border-radius: 25px;
    border: 1px solid #2C2D3C;
}

.icon-mqtt-connected {
    background-color: #2563eb; /* Change to use same color as disconnected // #16a34a; */
    border-radius: 25px;
    border: 1px solid #2C2D3C;
}

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

.icon-offline {
    background-color: #e2286c;
    border-radius: 25px;
    border: 1px solid #2C2D3C;
}

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

.icon-traceroute-start {
    background-color: #16a34a; /* green */
    border-radius: 25px;
    border: 1px solid #2C2D3C;
}

.icon-traceroute-end {
    background-color: #dc2626; /* red */
    border-radius: 25px;
    border: 1px solid #2C2D3C;
}

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