.custom-option {
        border: 2px solid #333; /* Border color */
        padding: 10px;
        margin: 5px;
        border-radius: 5px; /* Contoured edges */
        cursor: pointer;
    }

    .custom-option:hover {
        background-color: #eee; /* Highlight on hover */
    }

    .custom-option.selected {
        background-color: rgba(0, 123, 255, 0.12); /* Highlight when selected */
        color: #fff; /* Text color when selected */
    }

    .options-div {
        display: flex; /* Ensure horizontal stacking */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the options horizontally */
    }

    /* Your existing CSS for light mode */

    /* Add this rule to highlight borders on dark mode */
    [data-bs-theme=dark] .custom-option:hover {
        background-color: transparent;
        border: 2px solid #eee; /* Border color for dark mode */
    }

    /* Add this rule to handle the selected state in dark mode */
    [data-bs-theme=dark] .custom-option.selected {
        background-color: rgba(0, 123, 255, 0.12);  /* Highlight when selected */
        color: #fff; /* Text color when selected */
        border: 2px solid #007bff; /* Border color for dark mode */
    }

  /* highlight the question the user is viewing */
    #progress-container .progress-item.current-question {
        border: 2px solid #007bff;   /* your requested highlight */
        box-shadow: 0 0 0 2px rgba(0,123,255,0.07);
    }

    #progress-container a {
    all: unset;
    cursor: pointer;
    }