:root {
    --rz-primary: var(--primary) !important;
    /*    --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light);
    --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter);
    --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark);
    --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker);
    --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary);
    --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light);
    --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter);
    --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark);
    --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker);*/
}

.rz-paginator-last,
.rz-paginator-next,
.rz-paginator-prev,
.rz-paginator-first {
    background-color: var(--primary);
    color: #ffffff !important;
}

    .rz-paginator-last:hover,
    .rz-paginator-next:hover,
    .rz-paginator-prev:hover,
    .rz-paginator-first:hover {
        color: #ffffff !important;
    }


.rz-cell-filter .rz-cell-filter-label > input:hover {
    box-shadow: inset 0 4px 7px 0 rgb(0 0 0 / 3%);
    border: 1px solid #cecece;
    border-radius: 3px;
    padding: 1px;
}

.rz-tooltip-content {
    background: var(--brand-color-3);
}

.rz-panel-content {
    margin: 0;
}

.rz-progressbar-primary .rz-progressbar-value {
    background-color: var(--brand-color-3);
}

    .rz-progressbar-primary .rz-progressbar-value:before {
        background-color: var(--brand-color-5) !important;
    }

    .rz-progressbar-primary .rz-progressbar-value:after {
        background-color: var(--brand-color-5) !important;
    }

.rz-multiselect-panel {
    width: auto !important;
}

.rz-arc-gauge-scale-value {
    fill: var(--brand-color-1);
}

.rz-form .rz-messages-error {
    position: relative;
}


.rz-panel-menu .rz-navigation-item-wrapper:hover {
    background-color: var(--special-highlight) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper-active {
    background-color: var(--special-highlight) !important;
}

    .rz-panel-menu .rz-navigation-item-active:before, .rz-panel-menu .rz-navigation-item-wrapper-active:before {
        background-color: var(--special-highlight-solid) !important;
    }

.mp-rz-empty-filter {
    height: calc(53px - (2 * var(--rz-grid-filter-padding)));
}


/*The default Radzen theme removes the bottom border on the table. That looks a bit funny when the last item in the row is white. It blends in with our background and makes the table look like it's hanging.*/
.rz-datatable-data tr:last-child > td,
.rz-grid-table tr:last-child > td {
    border-bottom: var(--rz-grid-cell-border);
}


.rz-chart-tooltip{
    z-index: 4;
}

.rz-dialog-content{
    height: 100%;
}


.rz-textarea {
    resize: none;
}

.rz-slider-handle:before {
    content: attr(Value); /*"\f337"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left: -5px;
    position: absolute;
    top: 0;
}

.rz-panel-content .rz-card {
    margin: 3px;
}

#heroTitleEditor .rz-html-editor-content {
    background-color: #213469 !important;
}
.rz-dropdown-label.rz-inputtext span {
    overflow: clip;
    text-overflow: ellipsis;
}
#bodyContent .rz-html-editor-content {
    padding-left: 20px !important;
    overflow: unset !important;
}