#calendar {
    width: 60%;
    /* Adjust the width as per your design requirements */
    margin: 20px auto;
    /* Adjusted the top margin to 20px and removed bottom margin */
}

@media (max-width: 768px) {
    #calendar {
        width: 100%;
        /* Typically, on smaller screens, elements can take up full width for better visibility */
        margin-top: 10px;
        /* Reduced the top margin for smaller screens */
    }
}

/* Styles for the keyword list */
#keywordList {
    list-style-type: none;
    /* Remove bullets */
    padding: 0;
    /* Remove padding */
}

.keyword-item {
    cursor: pointer;
    /* Change cursor on hover */
    padding: 8px 12px;
    /* Add padding */
    border: 1px solid #ccc;
    /* Add border */
    margin-bottom: 4px;
    /* Add margin between items */
    border-radius: 4px;
    /* Optional: for rounded corners */
    user-select: none;
    /* Prevent text selection */
    transition: background 0.3s;
    /* Optional: for smooth color transition */
}

.keyword-item:hover {
    background-color: #e0e0e0;
    /* Change background color on hover */
}

.selected {
    background-color: #007bff;
    /* Change background color for selected items */
    color: #fff;
    /* Change text color for selected items */
}

/* Change primary color */
:root {
    --bs-primary: #4CAF50;
    /* Change to your desired green color */
}

/* Depending on your needs, you may also need to customize other components 
   like buttons, links, etc., to reflect the new color. For example: */
.btn-primary {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #45a047;
    /* Slightly darker shade of green */
    border-color: #45a047;
}