@layer spd {
    :root {
        /* Overrides the brand primary colors */
        --rz-primary-light: #d73339;
        --rz-primary-lighter: rgba(205, 0, 7, 0.12);
        --rz-primary-dark: #a40006;
        --rz-primary-darker: #8b0005;
        /* Overrides brand secondary colors */
        --rz-secondary-light: #33a9e4;
        --rz-secondary-lighter: rgba(15, 131, 189, 0.12);
        --rz-secondary-dark: #0076b1;
        --rz-secondary-darker: #006496;
        /* Overrides the colors for the text when they are "on" the following brand colors */
        --rz-on-primary-lighter: #E72222;
        --rz-on-primary-dark: #ffffff;
        --rz-on-primary-darker: #ffffff;
        --rz-on-secondary-lighter: #0093DD;
        --rz-on-secondary-dark: #ffffff;
        --rz-on-secondary-darker: #ffffff;
        /* Overrides the selected item colors to use a neutral gray */
        --rz-dropdown-item-selected-background-color: var(--rz-base-300); /* Light Gray */
        --rz-dropdown-item-selected-hover-background-color: var(--rz-base-200); /* Slightly Lighter Gray */
        --rz-dropdown-item-selected-color: #000000; /* Black Text */
        --rz-dropdown-item-selected-hover-color: #000000; /* Black Text on Hover */
        --rz-dropdown-item-selected-border-color: #9ca3af; /* Medium Gray Border */
        /* Overrides the warning color */
        --rz-warning: oklch(64.6% 0.222 41.116);

        /* Centers the second level navmenu items (in line with the top-level items) */
        --rz-panel-menu-item-2nd-level-margin-inline: 6px;

        /* Makes the selected tab's text color a little bit lighter and more readable in dark mode */
        --rz-tabs-tab-selected-color: var(--rz-on-primary-lighter);

        /* Slows down the dialog opening */
        --rz-dialog-transition: 0.3s ease-in-out;

        /* Ensures the chip outline stays the brand color */
        --rz-chip-selected-outline: var(--rz-outline-width) solid var(--rz-primary);
    }

    /* Overrides the icon font to ours (on components that use this class)
     * and allows us to use our Wuerth icon library */
    .use-wuerth-icons {
        --rz-icon-font-family: 'Wuerthicons';
    }

    /* This lets the down arrow icon be from Radzen's icon font */
    i.notranslate.rzi.rz-navigation-item-icon-children {
        font-family: Material Symbols, serif;
    }

    /* Make (only) the primary and secondary buttons change background on hover */
    .rz-button.rz-secondary:not(.rz-variant-outlined):not(.rz-state-disabled):not(:active):hover {
        background-color: var(--rz-secondary-light);
    }

    .rz-button.rz-primary:not(.rz-variant-outlined):not(.rz-state-disabled):not(:active):hover {
        background-color: var(--rz-primary-light);
    }

    .rz-button.rz-variant-outlined.rz-primary.rz-shade-default {
        color: var(--rz-on-primary-lighter);
    }

    .rz-button.rz-warning:not(.rz-variant-outlined):not(.rz-state-disabled):not(:active):hover {
        background-color: var(--color-orange-500) !important;
    }

    .rz-dropdown-item {
        color: var(--rz-text-secondary-color);
    }

    /* Makes the checkbox have a squircle shape and makes it a bit smaller
     * (it was s circle before and quite big)
     */
    .rz-chkbox-box:after {
        border-radius: 20%;
        width: 2rem;
        height: 2rem;
    }

    /* Makes a checkbox align to the company colors */
    .rz-chkbox-box.rz-state-active {
        background-color: var(--rz-primary-light);
        border: var(--rz-primary-light);
    }

    .rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled):after {
        background-color: var(--rz-secondary-light);
    }

    .rz-form-field.rz-floating-label.rz-state-focused .rz-form-field-label {
        color: var(--rz-secondary-light);
    }

    .rz-form-field.rz-variant-outlined.rz-state-focused .rz-form-field-label {
        color: var(--rz-secondary-light);
    }

    /* Changes the icon color for the RadzenPassword*/
    #changeIconColour {
        color: var(--rz-secondary-light);
        background-color: var(--rz-on-primary-darker);
    }

    /* Prevents the navmenu text from wrapping */
    .rz-navigation-item-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* On microsoft edge, this will remove the additional eye icon in the password field */
    input[type="password"]::-ms-reveal,
    input[type="password"]::-ms-clear {
        display: none !important;
    }

    /* Makes the column filter text readable */
    .rz-listbox {
        color: var(--rz-text-color);
    }

    /* Makes the search icon used in many menus readable */
    .rzi-search {
        color: var(--rz-text-tertiary-color);
    }

    /* Makes the text in the column picker readable */
    .rz-multiselect-item {
        color: var(--rz-text-color);
    }

    /* Makes the text input when autofilled look better in dark mode */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        &:where(.dark, .dark *) {
            -webkit-text-fill-color: var(--rz-text-color) !important;
            -webkit-box-shadow: 0 0 0 1000px #02131c80 inset !important;
            transition: background-color 5000s ease-in-out 0s;
        }
    }

    /* Makes the eye on the spd password in the correct position */
    .rz-form-field-end {
        position: absolute;
        right: 8px;
        padding-right: 0;
    }

    /* Helps to make a cell in a data grid look disabled */
    .table-disabled .rz-cell-data {
        color: var(--rz-text-tertiary-color);
    }

    /* Makes a table group header bold */
    td[colspan="4"] .rz-cell-data {
        font-weight: bold;
    }

    /* Removes the bottom border of the empty text in a datagrid to avoid a double-border */
    .rz-datatable-emptymessage {
        border-bottom: none;
    }

    .no-spinner .rz-numeric-button {
        display: none !important;
    }

    .rz-tabview-panel {
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
    }

    .no-border-datepicker .rz-inputtext {
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
        padding: 0 !important;
    }

    /* Override RadzenTabs header text */
    .rz-tabview .rz-tabview-nav li button {
        font-weight: 600;
        text-transform: none;
        letter-spacing: normal;
    }

    /* Add the `required-field` class to a RadzenFormField to get the red star next to the label */
    .required-field label::after {
        content: " *";
        color: red;
    }

    /* When we add the 'delete-dialog' class, the titlebar fits better with everything else */
    .delete-dialog > .rz-dialog-titlebar {
        padding: 0;
    }

    /* Add this to make the radzen buttons look like the figma designs */
    .spd-text-button {
        text-transform: capitalize;
        font-weight: 600;
        font-size: var(--rz-text-body1-font-size);
        letter-spacing: 0;
        padding-inline: 16px;
        padding-block: 8px;
        min-height: 0;
        height: fit-content;

        i {
            font-weight: normal;
        }
    }

    .dropdown-select {
        width: 100%;
        padding-right: 2rem;
        appearance: none;
        background-repeat: no-repeat;
        background-position: right center;
        background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    }

    /* Overrides the dialog opening animation's starting scale from 0.5 -> 0.8 */
    @keyframes rz-dialog-open-scale-override {
        from {
            scale: 0.8;
        }
        to {
            scale: 1;
        }
    }

    /* Makes the radzen dialog open from 80% scale */
    .rz-dialog.rz-open {
        animation: var(--rz-dialog-transition) rz-dialog-open-opacity, var(--rz-dialog-transition) rz-dialog-open-scale-override !important;
    }

    /* Removes the outline that the chips have in a chiplist */
    .rz-chip-list .rz-chip {
        outline: none;
    }

    /* Makes unselected chips have a neutral background color, and makes the text to match */
    .rz-chip-list .rz-chip:not(.rz-chip-selected) {
        background-color: var(--rz-base-300);
        color: var(--rz-text-color);
    }

    /* Makes the close button on a chip the same color as the text */
    .rz-chip .rzi {
        color: var(--rz-text-color);
    }

    /* table without a header row */
    .rz-data-grid.no-header thead {
        display: none !important;
    }

    /* makes the <details> element use the spd icon */
    .spd-details-icon::before {
        font-family: 'Wuerthicons', sans-serif !important;
        font-weight: normal;
        content: '\eb14'; /* icon-interface-right */
        display: inline-block;
        transition: transform 0.2s ease;
        transform: rotate(0deg);
    }

    /* makes the <details> element's icon animate */
    details[open] .spd-details-icon::before {
        transform: rotate(90deg);
    }

    /* animates the height of a <details> element when opening and closing */
    details.spd-details::details-content   {
        interpolate-size: allow-keywords;
        height: 0;
        overflow: clip;
        transition: height .3s ease, content-visibility .3s ease allow-discrete;
    }

    details[open].spd-details::details-content   {
        height: auto;
    }

    /* Without this, a notification on something else than the primary background color,
    will look as if it didn't have rounded corners*/
    .rz-notification-item-wrapper {
        border-radius: var(--rz-notification-border-radius);
    }
}

/* When a rule in the 'rz' layer uses '!important', then the layer order *reverses*
 * This means that those rules will override the rules in the 'spd' layer. Therefore,
 * we make a new layer that goes before the 'rz' layer and can be used to override
 * those '!important' styles.
 * If a css rule from radzen is defined with !important, it's likely that you'll
 * need to use this layer to override it. If you don't, then the rule will not be applied.
 */
@layer rz.important {

    /* makes a radio button list use a grid layout instead of flex */
    .rz-radio-button-list.rz-radio-button-list-grid > div {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10rem !important;
        row-gap: 1rem !important;
        white-space: nowrap !important;
    }
}