.dashboard-container {
    display: flex; /* Align children in a row */
    flex-wrap: nowrap; /* Prevent wrapping to the next line */
    justify-content: space-between; /* Distribute space between items */
    align-items: stretch; /* Align items to the top */
    padding: 0; /* Add padding around the container */
}

/* Individual dashboard items */
.dashboard-item {
    flex: 1 1 calc(33.333% - 1rem); /* Give each item equal width, accounting for margins */
    max-width: calc(33.3333% - 1rem); /* Maximum width to a third of the container width minus the gap */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 1rem; /* Padding inside each dashboard item */
    margin: 0; /* Space between items */
    border: 1px solid #ccc; /* Border for each item */
    border-radius: 4px; /* Rounded corners for each item */
    background-color: #fff; /* White background for each item */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Shadow for each item */
    /* Remove the margin-bottom if it's no longer needed */
}

/* Style specifically for the client-selector dropdown */
.client-selector {
    color: black; /* Sets the text color to black */
    background-color: #ffffff; /* Sets a white background */
    border: 1px solid #000000; /* Adds a black border */
    padding: 10px 15px; /* Padding for visual space inside the dropdown */
    font-size: 16px; /* Font size for legibility */
    cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
    border-radius: 4px; /* Rounded corners */
    -webkit-appearance: none; /* Removes default styling for Chrome/Safari */
    -moz-appearance: none; /* Removes default styling for Firefox */
    appearance: none; /* Removes default styling for modern browsers */
    display: flex; /* Use flex layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    width: auto; /* Allows the dropdown to fit its content or specified width */
    margin: 0 5px; /* Margin for spacing between controls */
}

    /* Ensures the text is black for each option within the client-selector */
    .client-selector option {
        color: black; /* Ensures the text is black */
        background-color: #ffffff; /* White background for dropdown options */
    }

    /* Style for the client-selector when it is focused or active */
    .client-selector:focus {
        outline: none; /* Removes the default focus outline */
        border-color: #000000; /* Changes the border color to black when the select is focused */
    }

    /* Style for the client-selector when it is hovered */
    .client-selector:hover {
        background-color: #f0f0f0; /* Light grey background color on hover for a visual cue */
    }


.controls-container {
    color: black; /* This will make the text color black */
    display: flex; /* Align children in a row */
    align-items: center; /* Align items vertically in the center */
    justify-content: space-between; /* Distribute space evenly between items */
    padding: 0; /* No padding around the container */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

    .controls-container > * {
        color: black; /* This will make the text color black */
        flex: 1; /* All children will flex equally */
        margin: 0 5px; /* Provide some space between the controls */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
        text-align: center; /* Center the text for all controls */
        display: flex; /* Use flexbox layout for further alignment */
        justify-content: center; /* Center horizontally inside the flex container */
        align-items: center; /* Center vertically inside the flex container */
    }

    .controls-container select {
        color: black; /* Sets the text color to black */
        background-color: #ffffff; /* Sets a white background */
        border: 1px solid #000000; /* Adds a black border */
        padding: 10px 15px; /* Padding for visual space inside the dropdown */
        font-size: 16px; /* Font size for legibility */
        cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
        border-radius: 4px; /* Rounded corners */
        -webkit-appearance: none; /* Removes default styling for Chrome/Safari */
        -moz-appearance: none; /* Removes default styling for Firefox */
        appearance: none; /* Removes default styling for modern browsers */
        display: flex; /* Use flex layout */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        width: auto; /* Allows the dropdown to fit its content or specified width */
        margin: 0 5px; /* Margin for spacing between controls */
    }

        /* Ensures the text is black for each option within the select element */
        .controls-container select option {
            color: black; /* Ensures the text is black */
            background-color: #ffffff; /* White background for dropdown options */
        }

        /* Style for the select elements when they are focused or active */
        .controls-container select:focus {
            outline: none; /* Removes the default focus outline */
            border-color: #000000; /* Optional: changes the border color to black when the select is focused */
        }

        /* Style for the select elements when they are hovered */
        .controls-container select:hover {
            background-color: #f0f0f0; /* Light grey background color on hover for a visual cue */
        }

/* Additional specific styles for the dropdown */
.date-range-dropdown {
    color: black; /* Text color */
    background-color: #ffffff; /* Background color */
    border: 1px solid #000000; /* Black border */
    padding: 10px 15px;
    text-decoration: none;
    display: inline-block; /* Inline-block for text-align to work */
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    -webkit-appearance: none; /* Removes default chrome and safari styling */
    -moz-appearance: none; /* Removes default Firefox styling */
    appearance: none; /* Necessary to remove default styling */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: if you want to keep the shadow effect */
    /* Add any other styles you wish to keep */
}

    /* For the arrow icon */
    .date-range-dropdown::-ms-expand {
        display: none; /* For IE11: Removes default down arrow */
    }

/* If you want to ensure the date pickers don't grow too large */
.date-picker {
    flex: 1;
    /* Each date picker will take one-sixth of the space */
    /* Other styles remain the same */
}


/* Additional styling if needed for the select elements */
.dashboard-selector, .date-range-dropdown {
    color: black;
    background-color: #ffffff; /* Optional: in case you need to set a background color */
    -webkit-appearance: none; /* Removes default chrome and safari styling */
    -moz-appearance: none; /* Removes default Firefox styling */
    appearance: none; /* Necessary to remove default styling */
    flex: 2; /* Use flex layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

    /* Ensures the text is black for each option within the select element */
    .dashboard-selector option,
    .date-range-dropdown option {
        color: black; /* Ensures the text is black */
        background-color: #ffffff; /* Ensures the background of the option is white or any other color that makes the text visible */
    }

    /* Add this rule to style the select elements when they are focused or active */
    .dashboard-selector:focus,
    .date-range-dropdown:focus {
        color: black;
        background-color: #ffffff;
        border-color: #000000; /* Optional: sets the border color to black or any other visible color when the select is focused */
    }

    /* Add this rule to style the select elements when they are hovered */
    .dashboard-selector:hover,
    .date-range-dropdown:hover {
        color: black;
        background-color: #f0f0f0; /* Optional: changes the background color slightly on hover for a visual cue */
    }

/* Header for each dashboard item */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* Space below the header */
}

/* The statistics area within an item */
.dashboard-stat {
    text-align: center;
}

/* Large number representing the total opportunities, value, and conversion rate */
.total-opportunities, .total-value, .conversion-rate-value {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 10px; /* Space below the number */
}

.opportunities-details,
.value-details {
    display: grid;
    grid-template-columns: 1fr auto; /* allocate space for label and number */
    gap: 10px; /* space between the label and number */
}

    .opportunities-details span,
    .value-details span {
        text-align: left; /* aligns text to the left */
        align-self: start; /* align the items to the start of their cell */
    }

.opportunity-count,
.value-amount {
    text-align: right; /* right align the text for the numbers */
}

.date-range {
    color: blue; /* Change the text color to blue */
}

/* If the labels have their own class or are otherwise targeted, ensure they have this property */
.detail-label {
    text-align: left; /* Ensures text is aligned to the left */
}

/* Styling for each count and amount */
.opportunity-count,
.value-amount {
    justify-self: end; /* align the numbers to the end of the grid area */
    text-align: right; /* right align the text for the numbers */
}

/* Styling for label */
.detail-label {
    text-align: left;
    justify-self: start;
}

/* Styling for each count */
.detail-value {
    justify-self: end; /* Align the numbers to the end of the grid area */
    text-align: right; /* Right align the text for the numbers */
}


/* Opportunities Details Label Colors */
.opportunities-details span:nth-of-type(odd) {
    color: #00cc00;
}
    /* For "Langsgkomen" */
    .opportunities-details span:nth-of-type(odd):nth-child(3) {
        color: #00b3ff;
    }
    /* For "Nieuw" */
    .opportunities-details span:nth-of-type(odd):nth-child(5) {
        color: #ff9966;
    }
    /* For "Nutteloos" */
    .opportunities-details span:nth-of-type(odd):nth-child(7) {
        color: #ff0000;
    }
/* For "Open" */

/* Value Details Label Colors */
.value-details span:nth-of-type(odd) {
    color: #00cc00;
}

    .value-details span:nth-of-type(odd):nth-child(3) {
        color: #00b3ff;
    }

    .value-details span:nth-of-type(odd):nth-child(5) {
        color: #ff9966;
    }

    .value-details span:nth-of-type(odd):nth-child(7) {
        color: #ff0000;
    }

/* Media query for smaller screens */
@media (max-width: 900px) {
    .dashboard-container {
        flex-wrap: wrap; /* Allow wrapping */
    }

    .dashboard-item {
        flex: 1 0 100%; /* Make each item take full width and not shrink */
        max-width: 100%; /* Maximum width to 100% */
        margin: 0.5rem 0; /* Margin just on top and bottom */
    }

    .opportunities-details,
    .value-details {
        grid-template-columns: 1fr; /* Make it single column on small screens */
        text-align: left; /* Left align the content on small screens */
    }

    .opportunity-count,
    .value-amount {
        justify-self: start; /* Align the counts and amounts to the start */
    }
}