.cleaning-submission-view {
    font-family: Roboto, Arial, sans-serif;
}

.cleaning-submission-view > .cleaning-submission-item {
    margin-bottom: 10px; /* Add spacing between each root element */
    border: 1px solid lightgray; /* Thin light border */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Small drop shadow */
    border-radius: 5px; /* Optional: Add rounded corners */
    padding: 5px; /* Optional: Add padding inside the box */
    background-color: white; /* Optional: Add background color */
}

.cleaning-submission-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    height: 40px; /* Set a fixed height to match the height of items with the toggle icon */
}

.cleaning-submission-header.root-item {
    font-weight: 800; /* Most bold text for root items */
}

.cleaning-submission-header.line-item {
    font-weight: 600; /* Medium bold text for line items */
}

.cleaning-submission-header.leaf-item {
    font-weight: normal; /* Standard text for leaf items */
}

.calendar-icon {
    margin-top: auto;
    margin-bottom: auto;
    width: 30px; /* Set width to match SVG */
    height: 30px; /* Set height to match SVG */
    padding: 5px;
    display: inline-flex; /* Use inline-flex to center the icon */
    align-items: center; /* Center vertically */

}
.calendar-icon > svg {
    fill: var(--rz-primary) !important;
}



.toggle-icon:hover {
    background-color: lightgray;
}
.description {
    flex-grow: 1;
}

.actions {
    display: flex;
    align-items: center;
    margin-right:5px;
}

.dots-icon {
     background: none;
     border: none;
     cursor: pointer;
     margin-right: 10px;
     display: flex; /* Use flex to center the SVG */
     align-items: center; /* Center vertically */
     justify-content: center; /* Center horizontally */
     border-radius: 50%; /* Make the highlight circular */
     padding: 0; /* Remove padding */
     width: 24px; /* Set width to match SVG */
     height: 24px; /* Set height to match SVG */
 }
.dots-icon-disabled {
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 10px;
    display: flex; /* Use flex to center the SVG */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    border-radius: 50%; /* Make the highlight circular */
    padding: 0; /* Remove padding */
    width: 24px; /* Set width to match SVG */
    height: 24px; /* Set height to match SVG */
}
.dots-icon:hover {
    background-color: lightgray;
}

.cleaning-submission-children {
    display: none;
    margin-left: 20px;
}

.cleaning-submission-children.visible {
    display: block;
}

.cleaning-submission-view > .cleaning-submission-item > .cleaning-submission-children {
    border-top: 2px solid gray; /* Slightly harder border on the top edge */
    padding-top: 5px; /* Add padding to ensure spacing between the border and child items */
    margin-top: 5px; /* Add margin to ensure spacing between the line text and the child items */
    position: relative; /* Ensure the pseudo-element is positioned relative to this element */
}
.cleaning-submission-view > .cleaning-submission-item > .cleaning-submission-children > .cleaning-submission-item > .cleaning-submission-children.visible::before {
    content: '';
    position: absolute;
    top: 0;
    left: -7px; /* Adjust this value to align the line with the child items */
    width: 2px;
    height: 100%; /* Span the height of the child elements */
    background-color: gray; /* Color of the vertical line */
}
.cleaning-submission-view > .cleaning-submission-item > .cleaning-submission-children > .cleaning-submission-item > .cleaning-submission-children.visible {
    position: relative; /* Ensure the pseudo-element is positioned relative to this element */
    padding-left: 10px; /* Add padding to ensure spacing between the line and child items */
    /*margin-bottom: 5px;*/
}

.rz-chkbox-box.rz-state-active {
    background-color: var(--rz-primary);
    border: 1px solid #00070c;
}