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

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

        /* 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) !important;

        /* Overrides the colors of the steps items at the top */
        --rz-steps-number-selected-background: var(--rz-primary) !important;
        --rz-steps-title-selected-color: var(--rz-primary) !important;
    }

    /* 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 !important;
    }

    /* 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) !important;
    }

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

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

    .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) !important;
    }

    /* 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% !important;
        width: 2rem !important;
        height: 2rem !important;
    }

    .rz-chkbox-box.rz-state-active {
        background-color: var(--rz-primary-light) !important;
        border: var(--rz-primary-light) !important;
    }

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

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

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

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

    /* 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;
    }

    /* This will add the colour to the delete icon on license dialog */
    .i.rz-button-icon-left.rzi.special-icon {
        color: var(--rz-on-primary-lighter) !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) !important;
    }

    /* 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 !important;
        right: 8px !important;
        padding-right: 0px !important;
    }

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

    td[colspan="4"] .rz-cell-data {
        font-weight: bold;
    }

    .rz-datatable-emptymessage {
        border-bottom: none !important;
    }

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

    /* Override RadzenTabs header text */
    .rz-tabview .rz-tabview-nav li a {
        font-family: 'Inter', sans-serif !important;
        font-size: 18px !important;
        text-transform: none !important;
    }

    .centered-tabs .rz-tabview-nav {
        justify-content: center;
    }

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

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

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

    /* Adds a border between the list box items */
    .rz-listbox-list > li + li {
        border-top: 1px solid var(--color-border-harder);
    }

    /* Prevents the steps content from scrolling when we don't want it to scroll */
    .rz-steps.overflow-hidden .rz-widget-content {
        overflow: hidden !important;
    }

    /* Makes the pager elements in a datagrid smaller */
    .small-pager .rz-pager-element {
        padding: 0 !important;
        margin: 0 !important;
        height: 28px !important;
        width: 32px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
    }

    /* Makes the navigation icons in the pager smaller */
    .small-pager .rz-pager-icon {
        font-size: 16px !important;
    }

    .no-today-highlight.rz-state-focused {
        background: transparent !important;
        box-shadow: none !important;
    }

    .rz-calendar .rz-calendar-today.disabled-date {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .rz-calendar .rz-calendar-today.disabled-date.rz-state-focused {
        background: transparent !important;
        box-shadow: none !important;
    }
}