#teamcalendar .fc-col-header-cell-cushion,
#teamcalendar .fc-daygrid-day-number,
#teamcalendar .fc-event-title {
    color: inherit; /* Use the default text color */
    text-decoration: none; /* Remove underline or link styles */
}

.team-calendar-wrapper {
    justify-content: center; /* Center the calendar */
    max-width: 800px; /* Maximum width of the calendar */
    margin: 20px auto;

}

#teamcalendar {
    width: 100%; /* Allow the calendar to shrink on smaller screens */
}

#teamcalendar_title {
    font-weight:bold;
    margin-bottom: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
    text-align: center;
    background-color: #e0f2ff;
    border-left: 4px solid var(--primary-color);
    border-radius: 4px;
    color: #333;
}

#teamcalendar .fc-sunday {
    color: red; /* Make the text red */
}

/* Saturday styles */
#teamcalendar .fc-saturday {
    color: blue !important; /* Make the text blue */
}

/* Holiday styles */
#teamcalendar .fc-holiday {
    color: red !important; /* Make the text red */
    font-style: normal !important;
}

.fc .fc-bg-event {
    background: transparent !important; /* making holiday bg transparent */
    font-size: normal !important;
}

.fc-daygrid-event .fc-event-title {
    white-space: normal; /* Allow text to wrap */
    overflow: visible;   /* Prevent truncation */
    text-overflow: clip; /* Remove ellipsis */
    word-break: break-word; /* Break words if necessary */
    line-height: 1.2;    /* Adjust line height for better readability */
}

.fc-holiday-title {
    font-weight: bold !important;
    font-style: normal !important;
}

/* Hide the buttons by default */
.teamcalendar-buttons {
    display: none;
}

/* Show the buttons only on mobile screens */
@media (max-width: 768px) {
    .teamcalendar-buttons {
        display: flex;
        justify-content: center;
        gap: 10px; /* Add space between buttons */
        margin: 10px 0;
    }

    .teamcalendar-view-switch {
        padding: 10px 15px;
        font-size: 12px;
        cursor: pointer;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        color: #333;
        border-radius: 5px;
    }

    .teamcalendar-view-switch.active {
        background-color: var(--primary-color); /* Base color */
        color: white;
    }
}