@media (max-width: 576px) {
    .text-sm-truncate {
        display: inline-block;
        max-width: 15ch; /* Limit to 15 characters */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-sm-truncate-50 {
        display: inline-block;
        max-width: 50ch; /* Limit to 50 characters */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-sm-truncate-40 {
        display: inline-block;
        max-width: 40ch; /* Limit to 40 characters */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-sm-truncate-30 {
        display: inline-block;
        max-width: 30ch; /* Limit to 30 characters */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-sm-truncate-25 {
        display: inline-block;
        max-width: 25ch; /* Limit to 25 characters */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-sm-truncate-20 {
        display: inline-block;
        max-width: 20ch; /* Limit to 20 characters */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-sm-truncate-15 {
        display: inline-block;
        max-width: 15ch; /* Limit to 15 characters */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-sm-truncate-10 {
        display: inline-block;
        max-width: 10ch; /* Limit to 10 characters */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-sm-truncate-5 {
        display: inline-block;
        max-width: 5ch; /* Limit to 5 characters */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.workout-select {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}



#calendar-wrap {
    padding: 8px;
}

full-calendar {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Only affects this calendar instance */
    full-calendar#calendar {
        --fc-button-bg-color: #0d6efd;
        --fc-button-text-color: #fff;
        --fc-button-border-color: #0d6efd;
        --fc-button-hover-bg-color: #0b5ed7;
        --fc-button-hover-border-color: #0a58ca;
        --fc-button-active-bg-color: #0a58ca;
        --fc-button-active-border-color: #0a53be;
    }

/* Accessibility helper if you're not already loading Bootstrap's .visually-hidden */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.fc .fc-list-event-time, /* FC v5+ */
.fc .fc-list-item-time { /* some builds use this class */
    display: none !important;
}

/* Make buttons compact on mobile */
@media (max-width: 600px) {
    .fc .fc-toolbar-title {
        font-size: 1rem;
    }

    .fc .fc-toolbar-chunk {
        gap: 4px;
    }

    .fc .fc-button {
        padding: 4px 6px;
    }

        .fc .fc-button i.bi {
            font-size: 1rem; /* icon size on phones */
            line-height: 1;
        }
}