.e-schedule .e-timeline-month-view .e-appointment {
    width: 70px;
}

.e-schedule .e-timeline-month-view .e-appointment,
.e-schedule .e-timeline-view .e-appointment {
    font-size: 10px;
    width: auto; /* Allows the width to grow based on content */
    height: 65px;
    overflow: hidden; /* Prevents content from overflowing the element */
    padding: 1px; /* Optional: Add padding to create some space around the content */
    box-sizing: border-box; /* Ensures padding and borders are included in the element's total height and width */
}

    .e-schedule .e-timeline-view .e-appointment.show-more,
    .e-schedule .e-timeline-month-view .e-appointment.show-more {
        height: 20px;
        background: #58bfea;
        cursor: pointer; /* Add a pointer on hover */
    }

    .e-schedule .e-timeline-view .e-appointment .e-right-icon, .e-schedule .e-timeline-month-view .e-appointment .e-right-icon
    {
        padding-top: 10px;
        padding-right: 0px;
    }


/* Your existing status backgrounds */
.e-schedule .e-timeline-view .e-appointment.Scheduled,
.e-schedule .e-timeline-month-view .e-appointment.Scheduled {
    background: #b9baa3;
}

.e-schedule .e-timeline-view .e-appointment.Missed,
.e-schedule .e-timeline-month-view .e-appointment.Missed {
    background: #f22b29;
}

.e-schedule .e-timeline-view .e-appointment.InProgress,
.e-schedule .e-timeline-month-view .e-appointment.InProgress {
    background: #4e878c;
}

.e-schedule .e-timeline-view .e-appointment.Completed,
.e-schedule .e-timeline-month-view .e-appointment.Completed {
    background: #7fb800;
}

.e-schedule .e-timeline-view .e-appointment.SubmittedLate,
.e-schedule .e-timeline-month-view .e-appointment.SubmittedLate {
    background: #FFA500;
}

/* Conditional borders */
.e-schedule .e-timeline-view .e-appointment:has(.status-success),
.e-schedule .e-timeline-month-view .e-appointment:has(.status-success) {
    border: 1px solid white !important;
    box-shadow: inset 0 0 0 2px #28a745 !important;
}

.e-schedule .e-timeline-view .e-appointment:has(.status-error),
.e-schedule .e-timeline-month-view .e-appointment:has(.status-error) {
    border: 1px solid white !important;
    box-shadow: inset 0 0 0 2px #FFFF00 !important;
}

/* Updated status indicator positioning - moved to bottom right and made responsive */
.e-schedule .e-appointment .status-indicator {
    position: absolute;
    bottom: 3px; /* Moved to bottom */
    right: -1px; /* Moved to right */
    z-index: 10;
    border-radius: 50%;
    width: 14px; /* Slightly smaller for better fit */
    height: 14px; /* Slightly smaller for better fit */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Ensure status icons are appropriately sized */
.e-schedule .e-appointment .status-icon {
    font-size: 8px; /* Smaller font for better fit */
    font-weight: bold;
    line-height: 1;
}

    .e-schedule .e-appointment .status-icon.tick {
        color: #28a745;
    }

    .e-schedule .e-appointment .status-icon.cross {
        color: #dc3545;
    }

/* Additional responsive adjustments for smaller appointments */
.e-schedule .e-timeline-month-view .e-appointment .status-indicator {
    width: 12px;
    height: 12px;
    bottom: -1px;
    right: -1px;
}

.e-schedule .e-timeline-month-view .e-appointment .status-icon {
    font-size: 7px;
}

/* Rest of your existing styles... */
.fab-portal {
    position: relative !important;
    top: inherit;
    left: inherit;
    width: auto;
    height: 45px;
    z-index: 1000;
    display: flex;
    justify-content: flex-end; /* Aligns items to the right */
    gap: 10px; /* Adds space between buttons */
    align-items: center; /* Centers buttons vertically */
}



.e-fab.e-btn,
.e-fab.e-btn:hover {
    width: 130px;
    border-color: transparent;
    border-radius: 5px;
    min-height: 30px;
    position: static; /* Keep relative positioning */
}

    .e-fab.e-btn.e-fab-fixed {
        position: static;
    }

    .e-fab.e-btn.status-Unsynced {
        bottom: 20px;
        right: 845px;
        background: white;
        border: 4px solid #FFFF00;
        height: 26px;
        width: 126px;
    }

    .e-fab.e-btn.status-Synced {
        bottom: 20px;
        right: 710px;
        background: white;
        border: 4px solid #28a745;
        width: 126px;
    }

    .e-fab.e-btn.status-SubmittedLate {
        bottom: 20px;
        right: 570px;
        background: #FFA500;
    }

    .e-fab.e-btn.status-Scheduled {
        bottom: 20px;
        right: 430px;
        background: #b9baa3;
    }

    .e-fab.e-btn.status-InProgress {
        bottom: 20px;
        right: 290px;
        background: #4e878c;
    }

    .e-fab.e-btn.status-Missed {
        bottom: 20px;
        right: 150px;
        background: #f22b29;
    }

    .e-fab.e-btn.status-Completed {
        bottom: 20px;
        right: 10px;
        background: #7fb800;
    }

    .e-fab.e-btn .e-label {
        color: white;
    }

    .e-fab.e-btn.status-Scheduled .e-label,
    .e-fab.e-btn.status-Unsynced .e-label,
    .e-fab.e-btn.status-Synced .e-label,
    .e-fab.e-btn.status-Missed .e-label,
    .e-fab.e-btn.status-Completed .e-label,
    .e-fab.e-btn.status-InProgress .e-label {
        color: black;
        white-space: nowrap;
    }

    .e-fab.e-btn.status-Unsynced .e-checkbox-wrapper .e-label,
    .e-fab.e-btn.status-Synced .e-checkbox-wrapper .e-label {
        white-space: nowrap;
    }

.e-checkbox-wrapper.showReoccurranceSchedules .e-frame + .e-label,
.e-css.e-checkbox-wrapper.showReoccurranceSchedules .e-frame + .e-label {
    max-width: fit-content !important;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #0d6efd;
}


.page-title {
    font-size: 24px;
    margin-bottom: 10px; /* Reduced from 20px */
    margin-top: 0; /* Ensure no top margin */
    color: var(--f13-secondary);
}

.container-fluid {
    padding: 0.75rem 1rem; /* Reduced padding for a more compact look */
}

/* For showing progress more prominently */
.progress-indicator {
    font-weight: 500;
    color: #0d6efd;
    font-size: 1.1rem;
}

/* Add to your existing styles */
.cursor-pointer {
    cursor: pointer;
}

.list-group-item {
    transition: background-color 0.15s ease-in-out;
}

    .list-group-item:hover {
        background-color: #f8f9fa;
    }

    /* Making the list more condensed */
    .list-group-item.p-2 {
        padding: 0.5rem 0.75rem !important;
    }

    .list-group-item .small {
        margin-bottom: 0.25rem;
    }

/* Reduced margins */
.me-1 {
    margin-right: 0.25rem !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}