@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 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;
    }

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

    .vfm-table .rz-data-row td:nth-child(1) span,
    .vfm-table .rz-column-title-content {
        font-weight: 600;
    }

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

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