:root {
    /* Default icon color is same as theme 'red' */
    --dp-required-color: var(--rz-danger, darkred);
}


/* Adds * to labels inside RadzenFormField */
/* Adds * to <label class="dp-required"></label> */
label.dp-required::after,
.dp-required.rz-form-field .rz-form-field-label::after {
    /* use material star */
    content: '\f0ec';
    /* Radzen 4 = Material Icons */
    font-family: "Material Symbols";
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    padding-left: 0.125rem; 
    color: var(--dp-required-color);
    font-size: x-small; 
}

/* Match most of what's above for legend */
.dp-required-icon::before {
    content: '\f0ec';
    /* Radzen 4 = Material Icons */
    font-family: "Material Symbols";
    font-style: normal; 
    font-weight: 700;
    line-height: 1;
    color: var(--dp-required-color);
    font-size: small;
}

/* Style the inline help dialog */
.dp-inline-help {
    /* Inherit colors from the header */
    --rz-dialog-title-background-color: var(--rz-header-background-color);
    --rz-dialog-title-color: var(--rz-header-color);
    --rz-dialog-close-color: var(--rz-header-color);
    /* reduce the padding */
    --rz-dialog-title-padding: 0.5rem;
    --rz-dialog-content-padding: 0.5rem;
}

.dp-inline-help > .rz-dialog {
    /* Push help up closer to the top */
    top: 80px;
}