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

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

/* Removing random defauolt blue outline on buttons */
.btn-primary {
    border: none;
}

.custom-info-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 5px;
    border: none;
}



.custom-report-btn {
    border-radius: 10px;           /* matches style prop */
    padding: 5px;
    width:100%;        /* size of button */
    font-size: var(--font-size-body);
    font-weight: 600;
    margin:5px;             /* adjust font size */
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.custom-report-btn:hover:hover {
    transform: scale(1.01);
}

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

}

.custom-scatter-info-btn {
    border-radius: 5px;
    position: absolute;
    bottom: 1%;
    left: 8px;
}

.custom-scatter-expand-btn {
    border-radius: 5px;
    position: absolute;
    bottom: 1%;
    right: 8px;
}
.custom-generate-charts-btn {
    border-radius: 5px;
    position: absolute;
    bottom: 1%;
    right: 60px;
}

.custom-difference-info-btn {
    border-radius: 5px;
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 5px;
}


/* LIGHT MODE STYLES */

.light-mode .custom-info-btn {
    background-color: #10335b;
    color: white;
}

.light-mode .custom-info-btn:hover,
.light-mode .mr-3:hover {
    background-color: rgb(10, 30, 54); /* darker blue on hover */
    color: #fff;
}

.light-mode .custom-report-btn {
    background-color: #fecd28;    /* modern blue */
    color: rgb(16, 51, 91);
    border: none;
}

.light-mode .custom-report-btn:hover {
    background-color: rgb(16, 51, 91);    /* darker blue on hover */
    color: white;
}

.light-mode .custom-map-info-btn,
.light-mode .custom-scatter-info-btn,
.light-mode .custom-scatter-expand-btn,
.light-mode .custom-generate-charts-btn,
.light-mode .custom-info-btn,
.light-mode .custom-difference-info-btn {
    background-color: rgb(16, 51, 91);
    border-color: #10335b;
    color:white;
}



.light-mode {
    --nav-button-color: #10335b;
    --nav-button-color-disabled: #616161;

}

/* DARK MODE STYLES */

.dark-mode {
    --nav-button-color: #0277BD;
    --nav-button-color-disabled: #3f3f3f;
}

.dark-mode .custom-info-btn:hover,
.dark-mode .mr-3:hover {
    background-color: #546E7A; /* darker blue on hover */
    color: #fff;
}

.dark-mode .custom-report-btn {
    background-color: #fecd28;    /* modern blue */
    color: #212121;
    border: none;
}

.dark-mode .custom-report-btn:hover {
    background-color: #ac8a1b;    /* darker blue on hover */
    color: white;
}

.dark-mode .custom-map-info-btn,
.dark-mode .custom-scatter-info-btn,
.dark-mode .custom-scatter-expand-btn,
.dark-mode .custom-generate-charts-btn,
.dark-mode .custom-info-btn,
.dark-mode .custom-difference-info-btn {
    background-color: #616161;
    border-color: #424242;
    color:white;
}