:root {
    --spacer: 1rem;
    --bs-border-radius: 0.375rem;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


.max-vh-50 {
    max-height: 50vh;
}

.min-vh-50 {
    min-height: 50vh;
}

.max-vh-75 {
    max-height: 75vh;
}

.min-vh-75 {
    min-height: 75vh;
}

.contain {
    /* Image is scaled to fit within the container. */
    /* Aspect ratio IS maintained */
    object-fit: contain;
}

.container-v-flex {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.content-v-flex {
    flex-grow: 1;
}

.btn-trail {
    margin: var(--spacer);
    color: #ccc;
}

    .btn-trail > .card-img-overlay {
        background-color: #0000009a;
    }


    .btn-check:checked + .btn-trail,
    .btn-trail.active,
    .btn-trail.show,
    .btn-trail:first-child:active,
    :not(.btn-check) + .btn-trail:active {
        color: #fff;
    }

        .btn-check:checked + .btn-trail > .card-img-overlay,
        .btn-trail.active > .card-img-overlay,
        .btn-trail.show > .card-img-overlay,
        .btn-trail:first-child:active > .card-img-overlay,
        :not(.btn-check) + .btn-trail:active > .card-img-overlay {
            background-color: #08429880;
        }


        .btn-check:checked + .btn-trail::after, .btn-trail::before {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: -1;
            padding: 3px;
            border-radius: var(--bs-border-radius);
            background-image: conic-gradient(from var(--angle), #0940c3, transparent, #0940c3);
            animation: 3s spin linear infinite;
        }

        .btn-check:checked + .btn-trail::before {
            filter: blur(1rem);
            opacity: 0.7;
        }


#map {
    /* configure the size of the map */
    width: 100%;
    /*    height: 80vh;
*/
}


@keyframes spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}