.checkbox-button {
    display: inline-block;
    margin: 5px;
}

    .checkbox-button input[type="checkbox"] {
        display: none;
    }

    .checkbox-button .button-label {
        display: inline-block;
        padding: 10px 20px;
        border: 2px solid #007bff;
        background-color: #fff;
        color: #007bff;
        cursor: pointer;
        border-radius: 5px;
        user-select: none;
        transition: background-color 0.3s, color 0.3s;
    }

    .checkbox-button input[type="checkbox"]:checked + .button-label {
        background-color: #007bff;
        color: #fff;
    }

.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Adjust the gap between buttons as needed */
}

.button-item {
    flex: 1 1 auto; /* Allow the items to grow and shrink */
    min-width: 100px; /* Set a minimum width for the buttons */
}

.SelectedOption {
    background-color: #d1e7dd; /* Example selected style */
    border: 1px solid #0f5132;
    border-radius: 5px;
    cursor: pointer;
    padding: 8px;
    text-align: center;
}

.UnselectedSegment {
    background-color: #f8d7da; /* Example unselected style */
    border: 1px solid #842029;
    border-radius: 5px;
    cursor: pointer;
    padding: 8px;
    text-align: center;
}

.GridData th {
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 8px;
    text-align: center;
}