.azo-thin {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.azo-thin-italic {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.azo-light {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.azo-light-italic {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.azo-regular {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.azo-regular-italic {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.azo-medium {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.azo-medium-italic {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.azo-bold {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.azo-bold-italic {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.azo-black {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.azo-black-italic {
    font-family: "azo-sans-web", sans-serif;
    font-weight: 900;
    font-style: italic;
}

.azo-uber {
    font-family: "azo-sans-uber", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.futura-book {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.futura-book-oblique {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.futura-heavy {
    font-family: "futura-pt", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.futura-heavy-oblique {
    font-family: "futura-pt", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.futura-bold {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.futura-bold-oblique {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

.canv {
    height: 100% !important;
    width: 100% !important;
}

.topo-container {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.viewer-backdrop {
    background-color: black !important;
}

.vjs-picture-in-picture-control {
    display: none !important;
}

.leaflet-top {
    display: none !important;
}

/*@media screen and (orientation: landscape) {
    body {
        transform: rotate(-90deg) translate(-100dvh, 0vw);
        transform-origin: top left;
        width: 100dvh;
        height: 100dvw;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }
}

@media screen and (orientation: portrait) {
    body {
        transform: rotate(0deg);
        transform-origin: center; 
        width: 100%;
        height: 100%;
        position: relative;
    }
}*/


.scrollable-content::-webkit-scrollbar {
    width: 4px; /* Width of the vertical scrollbar */
    height: 4px; /* Height of the horizontal scrollbar (if any) */
}

/* 2. Style the track (the bar the thumb slides along) */
.scrollable-content::-webkit-scrollbar-track {
    background: #F4F4F4; /* Color of the track */
    border-radius: 10px; /* Rounded edges for the track. Use half of width/height for fully rounded ends */
}

/* 3. Style the thumb (the draggable part of the scrollbar) */
.scrollable-content::-webkit-scrollbar-thumb {
    background: #E1E5EA; /* Color of the thumb */
    border-radius: 10px; /* Rounded edges for the thumb */
    /* The thumb width is effectively controlled by ::-webkit-scrollbar's width.
               If you made ::-webkit-scrollbar wider and wanted a thinner thumb,
               you could use border: solid transparent; border-width: 0 2px; for example.
               But for a 4px scrollbar, the thumb will naturally be 4px. */
}

    /* 4. Style the thumb on hover (optional, for better UX) */
    .scrollable-content::-webkit-scrollbar-thumb:hover {
        background: #d1d5da; /* Slightly darker color on hover */
    }

/* 5. Hide the scrollbar buttons (up and down arrows) */
.scrollable-content::-webkit-scrollbar-button {
    display: none; /* Hide the buttons */
    width: 0;
    height: 0;
}

.scrollable-content::-webkit-scrollbar-button {
    display: none; /* Hide the buttons */
    width: 0;
    height: 0;
}

.marker {
    height: 30px;
    width: 30px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

    .marker.undiscovered {
        background-image: url(../images/svg/maps/unknown-marker.svg);
    }

    .marker.discovered {
        background-image: url(../images/svg/maps/toponimia-marker.svg);
    }

/* Animation Keyframes for Sparkle/Glow Effect */
@keyframes sparkle-glow {
    0% {
        box-shadow: none; /* No glow initially */
    }

    70% { /* Short moment of peak glow */
        box-shadow: 0 0 15px 7px rgba(255, 215, 0, 0.7); /* Bright golden glow */
    }

    100% {
        box-shadow: none; /* Glow fades away */
    }
}

/* Animation Keyframes for Ripple Effect */
@keyframes ripple-in {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 128, 255, 0); /* Start with no shadow */
    }

    50% { /* Start the ripple and colorize */
        box-shadow: 0 0 0 30px rgba(0, 128, 255, 1); /* Ripple starts small and visible */
    }

    100% {
        box-shadow: 0 0 0 0px rgba(0, 128, 255, 0); /* Ripple expands and fades to transparent */
    }
}

/* Animation Keyframes for Brightness Pulse */
@keyframes brightness-pulse {
    0% {
    }

    50% {
        filter: brightness(2.0) contrast(1.5); /* Bright and high contrast flash */
    }

    100% {
        filter: none; /* Return to normal brightness */
    }
}


/* Class to trigger the animation */
.marker.animate-discovery {
    /*animation: sparkle-glow 1.5s ease-out forwards;*/ /* 'forwards' to keep final state */
    animation: ripple-in 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;/* Ease-out cubic bezier for natural feel */
/*    animation: brightness-pulse 0.6s ease-out forwards;*/

}


#arvideo {
    margin-top: 0 !important;
    margin-left: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    width: 100vw !important;
    height: 100vh !important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
}