:root {
    --war-color: #a5263b;
    --own-color: #df691a;
    --racket-color: #eeaa22;
    --neighbor-color: #e55fbb;
    --color-palette: #5700ad, #1b0091, #0050b3, #2695d1, #2ad7eb, #09edc7, #1cff7e;
}

.emoji {
    margin: 0;
    color: transparent;
    text-shadow: 0 0 3px #343a40;
    fill: #dee2e6;
    font-size: 100px;
    position: relative;
}

.link-alternative {
    color: #abb6c2;
}

.link-alternative:hover {
    color: #343a40;
}

svg {
    fill: #abb6c2;
}

.mapSVG {
    width: 1260px;
    height: 750px;
    background-color: #4e5d6c;
    border: 2px solid #df691a;
}

.tooltip {
    font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    position: absolute;
    background-color: #4e5d6c;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    /* Add a higher z-index value */
    z-index: 9999;
}


#mapSVG .war-highlighted circle {
    fill: var(--war-color);
    stroke: var(--war-color);
    stroke-width: 2;

}

#mapSVG .own-highlighted circle {
    fill: var(--own-color);
    stroke: var(--own-color);
    stroke-width: 2;

}

#mapSVG .racket-highlighted circle {
    stroke: var(--racket-color);
    stroke-width: 1.8;

}

#mapSVG .neighbor-highlighted circle {
    fill: var(--neighbor-color);
    stroke: var(--neighbor-color);
}

#mapSVG .map {
    opacity: 0.05;
}

#mapSVG .map2 {
    opacity: 0.25;
}

/* Add these CSS rules to your custom.css or create a new style block in the head section of your HTML */
#cardsContainer {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 0 0 100%;
    /* By default, each card will take 100% width */
}

/* For larger screens, you can adjust the width to create a multi-column layout */
@media (min-width: 576px) {
    .card {
        flex: 0 0 calc(25% - 1rem);
        /* 4 cards in a row with 1rem spacing between each card */
        margin: 0.5rem;
        /* Add a margin for spacing */
    }
}


.hidden {
    display: none;
}


.slider-styled .noUi-handle .noUi-touch-area {
    border: 1px solid transparent;
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    width: auto;
    height: auto;
}

/* Show a border when hovering the area the handle responds to */
.slider-styled .noUi-handle:hover .noUi-touch-area {
    border: 1px dashed #7f7f7f;
}

.noUi-connect,
.progress-bar {
    background-color: #5bc0de;
}

#slider {
    height: 10px;
}

#slider .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px;
    /* half the width */
    border-radius: 9px;
}

.noUi-handle:before, .noUi-handle:after {
    display: none;
    }


    .link-group {
        display: flex;
        align-items: center;
      }