.mr-3:hover {
        background-color: black;
        /* Add any other styles you want to apply on hover */
    }

.mr-3:hover {
    transition: transform 0.3s ease-in-out; /* Specify the property, duration, and timing function */
}

.mr-3:hover:hover {
    transform: scale(1.15); /* Scale up on hover */
    /* Add any other styles you want to apply on hover */
}

.custom-info-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 5px;
    background-color: #10335b; /* modern blue */
    color: white;
    border: none;
}

.custom-info-btn:hover {
    background-color: #357ABD; /* darker blue on hover */
    color: #fff;
}

.custom-report-btn {
    border-radius: 10px;           /* matches style prop */
    padding: 0.5rem 1.2rem;        /* size of button */
    font-size: 1rem;               /* adjust font size */
    background-color: rgb(124, 2, 250);    /* modern blue */
    color: white;
    border: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.custom-report-btn:hover {
    background-color: black;    /* darker blue on hover */
    color: white;
}

.custom-map-info-btn {
    border-radius: 5px;
    background-color: #10335b;
    border-color: #10335b;
    position: absolute;
    bottom: 1%;
    right: 8px;
    z-index: 100;

}

.custom-scatter-info-btn {
    border-radius: 5px;
    background-color: #10335b;
    position: absolute;
    bottom: 1%;
    left: 8px;
    /* Add other styles as needed */
}

.custom-scatter-expand-btn {
    border-radius: 5px;
    background-color: #10335b;
    position: absolute;
    bottom: 1%;
    right: 8px;
    /* Add other styles as needed */
}
.custom-generate-charts-btn {
    border-radius: 5px;
    background-color: #10335b;
    position: absolute;
    bottom: 1%;
    right: 60px;
    /* Add other styles as needed */
}


.custom-difference-info-btn {
    border-radius: 5px;
    background-color: #10335b;
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 5px;
    /* Add other styles as needed */
}