@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-qdjefjh6mx] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-qdjefjh6mx] {
    flex: 1;
}

.sidebar[b-qdjefjh6mx] {
    background-image: linear-gradient(180deg,#615f5e 0%, #615f5e 70%);
}

.top-row[b-qdjefjh6mx] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-qdjefjh6mx]  a, .top-row[b-qdjefjh6mx]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-qdjefjh6mx]  a:hover, .top-row[b-qdjefjh6mx]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-qdjefjh6mx]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-qdjefjh6mx] {
        justify-content: space-between;
    }

    .top-row[b-qdjefjh6mx]  a, .top-row[b-qdjefjh6mx]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-qdjefjh6mx] {
        flex-direction: row;
    }

    .sidebar[b-qdjefjh6mx] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-qdjefjh6mx] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-qdjefjh6mx]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-qdjefjh6mx], article[b-qdjefjh6mx] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-52mmtms9nf] {
    background-color: #484847;
}

.top-row[b-52mmtms9nf] {
    height: 3.5rem;
    
    background-color: #f8f8f8;
}

.navbar-brand[b-52mmtms9nf] {
    font-size: 1.1rem;
}

.bi[b-52mmtms9nf] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-52mmtms9nf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-home-menu[b-52mmtms9nf] {
    -webkit-filter: invert(1);
    background-image: url("/images/home.png");
}


.bi-history-menu[b-52mmtms9nf] {
    -webkit-filter: invert(1);
    background-image: url("/images/baseline_dynamic_feed_black_48dp.png");
}

.bi-vacation-menu[b-52mmtms9nf] {
    -webkit-filter: invert(1);
    background-image: url("/images/baseline_deck_black_48dp.png");
}

.bi-overtime-menu[b-52mmtms9nf] {
    -webkit-filter: invert(1);
    background-image: url("/images/baseline_timelapse_black_48dp.png");
}

.bi-bookings-menu[b-52mmtms9nf] {
    -webkit-filter: invert(1);
    background-image: url("/images/baseline_how_to_vote_black_48dp.png");
}

.bi-settings-menu[b-52mmtms9nf] {
    -webkit-filter: invert(1);
    background-image: url("/images/sett_icon.png");
}


.bi-logout-menu[b-52mmtms9nf] {
    background-image: url("/images/Logout_icon_white.png");
}



.bi-plus-square-fill-nav-menu[b-52mmtms9nf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-52mmtms9nf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-52mmtms9nf] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-52mmtms9nf] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-52mmtms9nf] {
        padding-bottom: 1rem;
    }

    .nav-item[b-52mmtms9nf]  a {
        color: #F2F2F2;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item[b-52mmtms9nf]  a.active {
            background-color: #484847;
            color: white;
        }

        .nav-item[b-52mmtms9nf]  a:hover {
            background-color: #484847;
            color: white;
        }

@media (min-width: 641px) {
    .navbar-toggler[b-52mmtms9nf] {
        display: none;
    }

    .collapse[b-52mmtms9nf] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-52mmtms9nf] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Bookings/BookingsPage.razor.rz.scp.css */
/* Header for the current date */
.date-header[b-t8dak6br6m] {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
}

    /* Flex container for the date content */
    .date-header .date[b-t8dak6br6m] {
        display: flex;
        align-items: center;
        width: 100%; /* Ensures the date section spans the full width */
        gap: 10px; /* Adds spacing between elements */
    }


    /* Styling for the day */
    .date-header .day[b-t8dak6br6m] {
        font-size: 36px;
        font-weight: bold;
        color: #333;
    }

    /* Styling for the date details */
    .date-header .date-details[b-t8dak6br6m] {
        display: flex;
        flex-direction: column; /* Stacks the month and weekday vertically */
        width: 80%;
    }

        /* Month text styling */
        .date-header .date-details .month[b-t8dak6br6m] {
            font-size: 16px;
            color: #555;
        }

        /* Weekday text styling */
        .date-header .date-details .weekday[b-t8dak6br6m] {
            font-size: 14px;
            color: #777;
        }

    .date-header .datepicker[b-t8dak6br6m] {
        margin-left: auto; /* Push the datepicker to the far right */
        width: auto; /* Allow the date picker to size dynamically */
        padding: 0; /* Remove any unnecessary padding */
        display: flex; /* Ensure the content inside aligns properly */
        align-items: center; /* Vertically align the content with other items in the header */
    }

/* Container for rows */
.table-container[b-t8dak6br6m] {
    padding: 10px;
    background-color: #f9f9f9;
}

/* Each row styled as a card */
.row-container[b-t8dak6br6m] {
    min-height: 40px; /* Ensures each row has a minimum height */
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for better separation */
    position: relative; /* Allows for absolute positioning of children */
}

    /* Default status indicator (base styling) */
    .row-container .status-indicator[b-t8dak6br6m] {
        position: absolute; /* Positioned relative to the row */
        left: 0; /* Aligns the indicator to the left edge */
        top: 0; /* Starts at the top of the row */
        height: 100%; /* Spans the full height of the row */
        width: 5px; /* Width of the vertical bar */
        border-radius: 3px 0 0 3px; /* Rounded corners on the left side */
    }

    /* Dynamic colors for the status indicator */
    .row-container .status-indicator-blue[b-t8dak6br6m] {
        background-color: blue; /* PauseStart and Pause */
    }

    .row-container .status-indicator-green[b-t8dak6br6m] {
        background-color: green; /* Kommen and Buchen */
    }

    .row-container .status-indicator-yellow[b-t8dak6br6m] {
        background-color: yellow; /* Everything else */
    }

    /* Content within a row */
    .row-container .content[b-t8dak6br6m] {
        display: flex;
        flex-direction: column; /* Stacks elements vertically */
        flex-grow: 1; /* Takes up remaining space */
        margin-left: 15px; /* Creates space between the indicator and the content */
    }

        /* Title inside the row (e.g., "Work started") */
        .row-container .content .title[b-t8dak6br6m] {
            font-size: 16px; /* Larger font size for the title */
            font-weight: bold;
            color: #333;
            margin-bottom: 5px; /* Adds spacing below the title */
        }

        /* Stacked details below the title */
        .row-container .content .stacked-details[b-t8dak6br6m] {
            display: flex;
            flex-direction: column; /* Stack vertically */
            font-size: 14px; /* Adjust font size */
            color: #555;
            gap: 5px; /* Add spacing between items */
            margin-bottom: 10px; /* Spacing below details */
        }

        /* Row details (time and date) */
        .row-container .content .details[b-t8dak6br6m] {
            display: flex;
            justify-content: space-between; /* Spreads elements evenly across the row */
            font-size: 14px;
            color: #666;
        }

            /* Icon styling for details */
            .row-container .content .details .icon[b-t8dak6br6m] {
                display: flex;
                align-items: center; /* Aligns icons and text vertically */
                gap: 5px; /* Adds spacing between the icon and the text */
            }

                /* Calendar icon inside details */
                .row-container .content .details .icon img[b-t8dak6br6m] {
                    width: 16px; /* Consistent size for the icon */
                    height: 16px;
                }

.accordion[b-t8dak6br6m] {
    --bs-accordion-bg: #f8f9fa; /* Background color for the accordion */
    --bs-accordion-color: #6c757d; /* Text color for the accordion items */
    --bs-accordion-active-color: #495057; /* Text color for active accordion items */
    --bs-accordion-active-bg: #fff; /* Background color for active accordion items */
    --bs-accordion-border-color: #fff; /* Border color for accordion */
    --bs-accordion-border-color: #fff; /* Border color for accordion */
}

.accordion-item[b-t8dak6br6m] {
    border: 1px solid var(--bs-accordion-border-color); /* Border color for each item */
}

.accordion-button[b-t8dak6br6m] {
    color: var(--bs-accordion-color); /* Text color for the button */
    background-color: var(--bs-accordion-bg); /* Background color for the button */
    border-color: var(--bs-accordion-border-color); /* Border color for the button */
}

    .accordion-button:not(.collapsed)[b-t8dak6br6m] {
        color: var(--bs-accordion-active-color); /* Text color for active button */
        background-color: var(--bs-accordion-active-bg); /* Background color for active button */
        border-color: var(--bs-accordion-border-color); /* Border color for active button */
    }

    .accordion-button:focus[b-t8dak6br6m] {
        box-shadow: none; /* Removes the blue outline on focus */
        border-color: var(--bs-accordion-color); /* Ensures the border remains white */
    }

.accordion-body[b-t8dak6br6m] {
    border-top: 1px solid var(--bs-accordion-border-color); /* Border above accordion content */
}

#innerAccordion[b-t8dak6br6m] {
    display: none; /* Initially hidden */
}

#panelsStayOpen-collapseOne.show #innerAccordion[b-t8dak6br6m] {
    display: block; /* Visible only when outer accordion is expanded */
}

/* /Pages/Dashboard/MainInfoElement.razor.rz.scp.css */
/* >>>> Main Info Panel auf Landing Page */

.main-info-panel[b-75m4cr2g0e] {
    display: grid;
    align-items: center;
    margin: 1px;
    padding: 1px;
    background-color: transparent;
    color: white;
    text-align: center;
    box-sizing: border-box;
    vertical-align: middle;
}

    .main-info-panel .date-string[b-75m4cr2g0e] {
        font-size: 1.3em;
        padding-top: 25px;
        margin: 0px;
        vertical-align: middle;
    }

    .main-info-panel .time-string[b-75m4cr2g0e] {
        margin: 0px;
        font-size: 3em;
    }

    .main-info-panel .untracked[b-75m4cr2g0e] {
        background: #f39100;
    }

    .main-info-panel .tracked[b-75m4cr2g0e] {
        background: #31cf00;
    }

    .main-info-panel .break[b-75m4cr2g0e] {
        background: #0065ac;
    }

    .main-info-panel .control-interface[b-75m4cr2g0e] {
        display: flex;
        margin: 0px;
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        line-height: 250%;
        text-align: justify;
    }

        .main-info-panel .control-interface table[b-75m4cr2g0e] {
            width: 100%;
            height: 100%;
            table-layout: fixed;
        }


        .main-info-panel .control-interface .start-track[b-75m4cr2g0e] {
            margin: 0px;
            margin-top: 1px;
            background: #484847;
            text-align: center;
        }


        .main-info-panel .control-interface .stop-track[b-75m4cr2g0e] {
            margin: 0px;
            margin-top: 1px;
            background: #484847;
            text-align: center;
        }


        .main-info-panel .control-interface .start-break[b-75m4cr2g0e] {
            margin: 0px;
            margin-top: 1px;
            background: #484847;
            text-align: center;
        }

        .main-info-panel .control-interface .stop-break[b-75m4cr2g0e] {
            margin: 0px;
            margin-top: 1px;
            background: #484847;
            text-align: center;
        }



/* <<<<< Main Info Panel auf Landing Page */
/* /Pages/Dashboard/OverviewDetails.razor.rz.scp.css */

.detail-info-panel table[b-6fvm9bvuew] {
    width: 100%;
    height: 100%;
    table-layout: auto;
    background: #f8f8f8;
}

.detail-info-panel .header[b-6fvm9bvuew] {
    font-size: 1.3em;
    margin: 1px;
}

/* /Pages/Dashboard/OverviewElement.razor.rz.scp.css */

.day-info-panel[b-wd0gg8ckmn] {

}

    .day-info-panel table[b-wd0gg8ckmn] {
        width: 100%;
        height: 100%;
        table-layout: auto;
        background: #f8f8f8;
    }

    .day-info-panel .header[b-wd0gg8ckmn] {
        font-size: 1.3em;
        margin: 1px;
    }


#progressbar[b-wd0gg8ckmn] {
    background-color: #787675;
    border-radius: 13px;
    /* (height of inner div) / 2 + padding */
    padding: 3px;
}

    #progressbar > div[b-wd0gg8ckmn] {
        background-color: orange;
        width: var(--val);
        /* Adjust with JavaScript */
        height: 20px;
        border-radius: 10px;
    }

/* /Pages/Dashboard/OverviewMonth.razor.rz.scp.css */

.month-info-panel[b-0g7yyjy6zg] {
}

    .month-info-panel table[b-0g7yyjy6zg] {
        width: 100%;
        height: 100%;
        table-layout: auto;
        background: #f8f8f8;
    }

    .month-info-panel .header[b-0g7yyjy6zg] {
        font-size: 1.3em;
        margin: 1px;
    }


#progressbar[b-0g7yyjy6zg] {
    background-color: #787675;
    border-radius: 13px;
    /* (height of inner div) / 2 + padding */
    padding: 3px;
}

    #progressbar > div[b-0g7yyjy6zg] {
        background-color: orange;
        width: var(--val);
        /* Adjust with JavaScript */
        height: 20px;
        border-radius: 10px;
    }
/* /Pages/Overtime/OvertimePage.razor.rz.scp.css */
/* General Styles */
body[b-z5monu6o4i] {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

/* Header Section */
.header[b-z5monu6o4i] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #666; /* Dark gray background */
    padding: 15px 0;
    border-bottom: 1px solid #ccc; /* Subtle divider below header */
}

    .header span[b-z5monu6o4i] {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
    }

/* Table Container */
.table-container[b-z5monu6o4i] {
    padding: 15px;
    background-color: #fff;
}

/* Row Container */
.row-container[b-z5monu6o4i] {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 10px;
    background-color: #fff;
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
    position: relative;
    overflow: hidden; /* Ensures the status-indicator doesn't overflow the container */
}

    /* Gray vertical indicator bar on the left */
    .row-container .status-indicator[b-z5monu6o4i] {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 5px; /* Width of the vertical bar */
        background-color: #666; /* Corrected to set the background color */
        border-radius: 3px 0 0 3px; /* Rounded corners */
    }

    /* Title and description container */
    .row-container .content[b-z5monu6o4i] {
        flex-grow: 1; /* Take up remaining horizontal space */
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 20px; /* Add space for the status-indicator */
    }

        /* Main title styling */
        .row-container .content .title[b-z5monu6o4i] {
            font-size: 16px;
            color: #333;
        }

    /* Clock icon and value on the right */
    .row-container .details[b-z5monu6o4i] {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .row-container .details img[b-z5monu6o4i] {
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }

        .row-container .details span[b-z5monu6o4i] {
            font-size: 14px;
            color: #666;
        }

/* Sum Row Styling */
.sum-row[b-z5monu6o4i] {
    display: flex;
    justify-content: space-between; /* Align items to opposite ends */
    align-items: center; /* Vertically align the text */
    font-size: 16px; /* Match the font size of the rows above */
    color: #000;
    padding: 10px 10px 0px 40px; /* Match the padding of .row-container */
    border-top: 2px solid #e0e0e0;
    margin-top: 15px;
}

    .sum-row img[b-z5monu6o4i] {
        width: 20px; /* Match the size of the clock icon above */
        height: 20px; /* Match the size of the clock icon above */
        vertical-align: middle;
        margin-right: 5px; /* Add spacing between the icon and text */
    }
/* /Pages/TimeStamp/HistoryPage.razor.rz.scp.css */
/* Header for the current date */
.date-header[b-pghnwby2qj] {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    background-color: #fff;
}

    /* Flex container for the date content */
    .date-header .date[b-pghnwby2qj] {
        display: flex;
        align-items: center;
        width: 100%; /* Ensures the date section spans the full width */
        gap: 10px; /* Adds spacing between elements */
    }


    /* Styling for the day */
    .date-header .day[b-pghnwby2qj] {
        font-size: 36px;
        font-weight: bold;
        color: #333;
    }

    /* Styling for the date details */
    .date-header .date-details[b-pghnwby2qj] {
        display: flex;
        flex-direction: column; /* Stacks the month and weekday vertically */
        width: 80%;
    }

        /* Month text styling */
        .date-header .date-details .month[b-pghnwby2qj] {
            font-size: 16px;
            color: #555;
        }

        /* Weekday text styling */
        .date-header .date-details .weekday[b-pghnwby2qj] {
            font-size: 14px;
            color: #777;
        }

    .date-header .datepicker[b-pghnwby2qj] {
        margin-left: auto; /* Push the datepicker to the far right */
        width: auto; /* Allow the date picker to size dynamically */
        padding: 0; /* Remove any unnecessary padding */
        display: flex; /* Ensure the content inside aligns properly */
        align-items: center; /* Vertically align the content with other items in the header */
    }

/* Container for rows */
.table-container[b-pghnwby2qj] {
    padding: 10px;
    background-color: #f9f9f9;
}

/* Each row styled as a card */
.row-container[b-pghnwby2qj] {
    min-height: 40px; /* Ensures each row has a minimum height */
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for better separation */
    position: relative; /* Allows for absolute positioning of children */
}

    /* Default status indicator (base styling) */
    .row-container .status-indicator[b-pghnwby2qj] {
        position: absolute; /* Positioned relative to the row */
        left: 0; /* Aligns the indicator to the left edge */
        top: 0; /* Starts at the top of the row */
        height: 100%; /* Spans the full height of the row */
        width: 5px; /* Width of the vertical bar */
        border-radius: 3px 0 0 3px; /* Rounded corners on the left side */
    }

    /* Dynamic colors for the status indicator */
    .row-container .status-indicator-blue[b-pghnwby2qj] {
        background-color: blue; /* PauseStart and Pause */
    }

    .row-container .status-indicator-green[b-pghnwby2qj] {
        background-color: green; /* Kommen and Buchen */
    }

    .row-container .status-indicator-yellow[b-pghnwby2qj] {
        background-color: yellow; /* Everything else */
    }

    /* Content within a row */
    .row-container .content[b-pghnwby2qj] {
        display: flex;
        flex-direction: column; /* Stacks elements vertically */
        flex-grow: 1; /* Takes up remaining space */
        margin-left: 15px; /* Creates space between the indicator and the content */
    }

        /* Title inside the row (e.g., "Work started") */
        .row-container .content .title[b-pghnwby2qj] {
            font-size: 16px; /* Larger font size for the title */
            font-weight: bold;
            color: #333;
            margin-bottom: 5px; /* Adds spacing below the title */
        }

        /* Row details (time and date) */
        .row-container .content .details[b-pghnwby2qj] {
            display: flex;
            justify-content: space-between; /* Spreads elements evenly across the row */
            font-size: 14px;
            color: #666;
        }

            /* Icon styling for details */
            .row-container .content .details .icon[b-pghnwby2qj] {
                display: flex;
                align-items: center; /* Aligns icons and text vertically */
                gap: 5px; /* Adds spacing between the icon and the text */
            }

                /* Calendar icon inside details */
                .row-container .content .details .icon img[b-pghnwby2qj] {
                    width: 16px; /* Consistent size for the icon */
                    height: 16px;
                }



/* /Pages/Vacation/VacationPage.razor.rz.scp.css */
/* Pie Chart Section */
.summary-container[b-oiywtkifcx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.pie-container[b-oiywtkifcx] {
    width: 300px;
    height: 300px;
    aspect-ratio: 1;
}

.pie[b-oiywtkifcx] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient( 
        #F49100 var(--requested, 0%), 
        #E8E8E8 var(--requested, 0%) 
    );
}

.legend[b-oiywtkifcx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
}

.legend-item[b-oiywtkifcx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-color[b-oiywtkifcx] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

    .legend-color.requested[b-oiywtkifcx] {
        background-color: #F49100;
    }

    .legend-color.remaining[b-oiywtkifcx] {
        background-color: #E8E8E8;
    }

.total[b-oiywtkifcx] {
    margin-top: 20px;
    font-weight: bold;
    font-size: 18px;
}

/* Tile Section */
.details-section[b-oiywtkifcx] {
    margin-top: 20px;
}

    .details-section h4[b-oiywtkifcx] {
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: bold;
    }

.tile-container[b-oiywtkifcx] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal-width columns */
    gap: 20px; /* Add spacing between tiles */
    width: 100%; /* Ensure it spans full width */
}

.tile[b-oiywtkifcx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFF;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 15px;
}

    .tile img[b-oiywtkifcx] {
        max-width: 40px;
        max-height: 40px;
        margin-bottom: 10px;
    }

    .tile p[b-oiywtkifcx] {
        margin: 0;
        font-size: 14px;
        color: #333;
    }

        .tile p strong[b-oiywtkifcx] {
            font-size: 16px;
            color: #000;
        }

    .tile:hover[b-oiywtkifcx] {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

@media (max-width: 600px) {
    .pie-container[b-oiywtkifcx] {
        max-width: 200px; /* Smaller on mobile */
        max-height: 200px;
    }
}

@media (max-width: 400px) {
    .pie-container[b-oiywtkifcx] {
        max-width: 150px;
        max-height: 150px;
    }
}