/* /Pages/Home/DashboardComponent.razor.rz.scp.css */
.custom-legend[b-cn8q6zw800] {
    display: flex;
    gap: 20px; /* Adjust the spacing as needed */
    flex-wrap: wrap; /* Ensure items wrap when the screen size is reduced */
    justify-content: center; /* Center the legend items */
    width: 100%; /* Ensure the legend container is full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin: 0 auto; /* Center the container within its parent */
}

.legend-item[b-cn8q6zw800] {
    display: flex;
    align-items: center;
    position: relative;
}

    .legend-item span[b-cn8q6zw800] {
        margin-right: 10px;
    }

    .legend-item strong[b-cn8q6zw800] {
        cursor: help; /* Change cursor to indicate tooltip */
    }

.tooltip[b-cn8q6zw800] {
    visibility: hidden;
    width: 200px; /* Adjust width as needed */
    background-color: rgba(0, 119, 169, 0.95);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the text */
    left: 50%;
    margin-left: -100px; /* Use negative margin to center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
    word-wrap: break-word; /* Ensure the text wraps inside the tooltip */
}

.legend-item:hover .tooltip[b-cn8q6zw800] {
    visibility: visible;
    opacity: 1;
}

@media screen and (max-width: 600px) {
    .tooltip[b-cn8q6zw800] {
        width: 100px; /* Reduce width for smaller screens */
        margin-left: -50px; /* Adjust margin for centering */
    }
}

/* Scheduler navigation buttons */
.nav-button[b-cn8q6zw800] {
    background-color: #0071c1; /* primary brand */
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.nav-button:hover[b-cn8q6zw800] {
    background-color: #005c9a;
}

.nav-button:focus[b-cn8q6zw800] {
    outline: 2px solid #80bfff;
    outline-offset: 2px;
}

.previous-button i[b-cn8q6zw800],
.next-button i[b-cn8q6zw800] {
    margin: 0 4px;
}

/* DatePicker styling */
.rm-date-picker[b-cn8q6zw800] {
    --rm-accent: #0071c1;
}

/* Input size and look */
.rm-date-picker .k-input-inner[b-cn8q6zw800] {
    height: 38px;
    font-size: 0.95rem;
}

/* Calendar (toggle) button */
.rm-date-picker .k-input-button[b-cn8q6zw800],
.rm-date-picker .k-button.k-input-button[b-cn8q6zw800] {
    background-color: var(--rm-accent);
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
}

.rm-date-picker .k-input-button:hover[b-cn8q6zw800],
.rm-date-picker .k-button.k-input-button:hover[b-cn8q6zw800] {
    background-color: #005c9a;
}

/* Input border radius to match */
.rm-date-picker .k-input-solid .k-input-inner[b-cn8q6zw800],
.rm-date-picker .k-input .k-input-inner[b-cn8q6zw800] {
    border-radius: 6px 0 0 6px;
}

/* Ensure the overall wrapper looks compact */
.rm-date-picker .k-input[b-cn8q6zw800] {
    border-radius: 6px;
}
/* /Shared/Pager.razor.rz.scp.css */
/* Pagination Style */
.pagination .btn[b-yuzhleay6v] {
    background-color: darkgray;
}

.pagination span.btn[b-yuzhleay6v] {
    background-color: #000;
    color: #fff;
}

.pagination li[b-yuzhleay6v] {
    padding: 5px;
}