.page-info-btn {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 19990;

}

.page-info {
    color: white;
    position: fixed;
    left: 0;
    margin: 0;
    z-index: 9999;
    padding: 0;
    list-style: none;
    align-items: flex-start;
}


.page-info{
    transform: translateX(-100%); /* Start off-screen */
    visibility: hidden; /* Hidden by default */
    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s linear 1.2s; /* Delay visibility */
    justify-content: space-between;
}

.page-info.active {
    transform: translateX(0); /* Slide into view */
    visibility: visible; /* Make visible */
    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s linear 0s; /* No delay */
}


.page-info_container {
    background-color: var(--background-grey-color);
    height: calc(100dvh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
    display: flex;
}



.page-info__map-container {
    margin-right: calc(100% / 17.2);
    width: calc(253 / 334 * 100%); /* 263px when 334px */
    flex-grow: 1;
}

.ltr .page-info__map-container{
    margin-right: unset;
    margin-left: 83px;
    padding-right: 23px;
}

.page-info__header{
    text-shadow: 1px 1px black;
    color: var(--text-red-color);
}

.page-info__title{
    font-size: 1.30em;
    font-weight: bold;
}

.page-info__body{
    /*font-size: 1.25em;*/
}


.page-info {
    width:calc(17.4vw); /* 334px when screen is 1920px wide */
    max-width: 334px;
}

@media (max-width: 1200px) {
    .page-info_container {
        background-color: #000000;
    }

    .page-info {
        opacity: 0.89;
        max-width: unset!important;
    }
}
@media (max-width: 768px) {
    .page-info_container {
        background-color: #000000;
    }

    .page-info {
        width: 100%;
        opacity: 0.89;
        max-width: unset!important;
    }
    .page-info__legend{
        margin: unset !important;
    }

    .page-info__legend ul li {
        margin-bottom: 5px !important;
    }

    .ltr .page-info_container{
        padding-right: 9px;
    }

    .page-info-btn img,
    .page-info-btn svg {
        transform: scale(0.8);
    }
}

/* Ensure only the correct elements are hidden initially */
.page-info-btn img,
.page-info-btn svg {
    cursor: pointer;
    pointer-events: none;
    display: none;
    transform-origin: left;
}

.page-info-btn.active img:first-child,
.page-info-btn.active svg:first-child {
    display: none;
}

.page-info-btn.active img:last-child,
.page-info-btn.active svg:last-child {
    display: block;
    pointer-events: visiblePainted; /* Ensure interaction is enabled */
}

.page-info-btn img:first-child,
.page-info-btn svg:first-child {
    display: block;
    pointer-events: visiblePainted; /* Ensure interaction is enabled */
}

.page-info-btn img:last-child,
.page-info-btn svg:last-child {
    display: none;
}

/* Fix the hover issue */
.page-info-btn svg:hover {
    cursor: pointer;
}



.page-info__legend {
    margin: clamp(30px, 9.43vh, 75px) 0;
    /*margin-top: 255px;*/
}


.page-info__legend ul {
    list-style-type: none; /* Remove default list bullets */
    padding-left: 0;
    padding-right: 10px;
    text-align: right; /* Align text to the right */
}


.ltr .page-info__legend{
    margin: 55px 0 0 0;
}

.ltr .page-info__legend ul{
    text-align: left;
    padding-left: 10px;
    padding-right: 0;
    direction: ltr;
}

.page-info__legend ul li {
    position: relative;
    margin-bottom: 20px;
}

.page-info__legend ul li img {
    height: 20px;
    width: auto;
    margin: auto;
    display: block;
}

.page-info__legend ul li div{
    display: inline-block;
    margin-left: 8px;
    margin-right: -8px;
}

.ltr .page-info__legend ul li div{
    margin-left: -8px;
    margin-right: 8px;
}

.page-info__button_container{
    margin: 4px;
}

.page-info__button_container .button-heading {
    font-size: 1.1rem;
    font-weight: bold;
    display: block;     /* Makes it behave like a block element */
}


.page-info__button_container button{
    width: 100%;
    background-color: var(--grey-color);
    padding: 7px 10px;
    color: var(--white-color);
    text-align: right;

    border: none;
    font-size: 1rem;
    cursor: pointer;
}

.page-info__button_container button:hover{
    color: var(--text-red-color);
}

.ltr .page-info__button_container button{
    text-align: left;
}


/*!* Add transition for smooth sliding *!*/
/*.page-info_container {*/
/*    transform: translateX(-100%); !* Start off-screen to the left *!*/
/*    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); !* Slower and smoother *!*/
/*    will-change: transform;*/
/*}*/

/*!* When active, slide into view *!*/
/*.page-info_container.active {*/
/*    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s linear 0s; !* Remove delay *!*/
/*    visibility: visible; !* Make visible *!*/
/*    transform: translateX(0); !* Slide to visible position *!*/
/*    display: flex; !* Change display to flex *!*/
/*}*/