h1:focus {
    outline: none;
}

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    padding: 1rem;
    color: white;
    background: #b32121;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Popups are rendered under body, outside component CSS isolation. */
.rz-dropdown-panel {
    overflow: hidden;
    border: var(--border-default) var(--color-control-border);
    border-radius: var(--radius-popup);
    background: var(--color-page-background);
    box-shadow: var(--shadow-popup);
}

.rz-dropdown-items-wrapper,
.rz-dropdown-items {
    background: var(--color-page-background);
}

.rz-dropdown-item {
    padding: 12px 14px;
    color: var(--color-text-control);
    background: transparent;
    font-size: var(--font-size-body);
}

.rz-dropdown-item:hover,
.rz-dropdown-item.rz-state-hover {
    color: var(--color-text-primary);
    background: var(--color-control-hover);
}

.rz-dropdown-item.rz-state-highlight,
.rz-state-highlight {
    color: var(--color-text-primary);
    background: var(--color-control-selected);
}

.rz-dropdown,
.rz-dropdown:not(.rz-state-disabled):hover,
.rz-dropdown:not(.rz-state-disabled):focus,
.rz-dropdown.rz-state-focused,
.rz-dropdown.rz-state-focus,
.rz-dropdown.rz-state-active,
.rz-dropdown .rz-dropdown-label,
.rz-dropdown .rz-dropdown-label.rz-inputtext,
.rz-dropdown .rz-dropdown-label.rz-placeholder,
.rz-dropdown .rz-inputtext,
.rz-dropdown .rz-dropdown-trigger {
    color: var(--color-text-control);
    border-color: transparent !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.rz-dropdown .rz-dropdown-label.rz-placeholder,
.rz-dropdown .rz-placeholder {
    color: var(--color-text-placeholder) !important;
    opacity: 1;
}

.field .app-date-picker.rz-datepicker,
.field .app-date-picker.rz-datepicker:hover,
.field .app-date-picker.rz-datepicker:focus,
.field .app-date-picker.rz-datepicker:focus-within,
.field .app-date-picker.rz-datepicker.rz-state-focused,
.field .app-date-picker.rz-datepicker.rz-state-focus,
.field .app-date-picker.rz-datepicker.rz-state-active {
    position: relative;
    display: flex !important;
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    height: 100%;
    align-items: center;
    border: 0 !important;
    border-color: transparent !important;
    color: var(--color-text-control) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.field .app-date-picker .app-date-picker-input,
.field .app-date-picker .app-date-picker-input:hover,
.field .app-date-picker .app-date-picker-input:focus,
.field .app-date-picker .app-date-picker-input:active,
.field .app-date-picker .rz-inputtext,
.field .app-date-picker .rz-inputtext:hover,
.field .app-date-picker .rz-inputtext:focus,
.field .app-date-picker .rz-inputtext:active {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    height: 100% !important;
    padding: 0 42px 0 0 !important;
    border: 0 !important;
    border-color: transparent !important;
    color: var(--color-text-control) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.field .app-date-picker .app-date-picker-input::placeholder,
.field .app-date-picker .rz-inputtext::placeholder {
    color: var(--color-text-placeholder) !important;
    opacity: 1;
}

.field .app-date-picker .app-date-picker-button,
.field .app-date-picker .app-date-picker-button:hover,
.field .app-date-picker .app-date-picker-button:focus,
.field .app-date-picker .app-date-picker-button:focus-visible,
.field .app-date-picker .rz-datepicker-trigger,
.field .app-date-picker .rz-datepicker-trigger:hover,
.field .app-date-picker .rz-datepicker-trigger:focus,
.field .app-date-picker .rz-datepicker-trigger:focus-visible,
.field .app-date-picker .rz-button,
.field .app-date-picker .rz-button:hover,
.field .app-date-picker .rz-button:focus,
.field .app-date-picker .rz-button:focus-visible {
    position: absolute;
    top: 50%;
    right: 0;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    margin: 0;
    border: 0 !important;
    border-color: transparent !important;
    border-radius: var(--radius-control);
    color: var(--color-control-icon) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: translateY(-50%);
}

.field .app-date-picker .app-date-picker-button:hover,
.field .app-date-picker .app-date-picker-button:focus,
.field .app-date-picker .app-date-picker-button:focus-visible,
.field .app-date-picker .rz-datepicker-trigger:hover,
.field .app-date-picker .rz-datepicker-trigger:focus,
.field .app-date-picker .rz-datepicker-trigger:focus-visible,
.field .app-date-picker .rz-button:hover,
.field .app-date-picker .rz-button:focus,
.field .app-date-picker .rz-button:focus-visible {
    color: var(--color-text-control) !important;
    background: var(--color-control-hover) !important;
    background-color: var(--color-control-hover) !important;
}

.field .app-date-picker .app-date-picker-button:focus-visible,
.field .app-date-picker .rz-datepicker-trigger:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
}

.rz-datepicker-popup-container,
.rz-datepicker-popup-container.rz-popup,
.rz-datepicker-calendar-container,
.rz-datepicker-calendar,
.rz-calendar,
.rz-calendar-view {
    border: var(--border-default) var(--color-control-border) !important;
    border-radius: var(--radius-popup);
    color: var(--color-text-control) !important;
    background: var(--color-page-background) !important;
    background-color: var(--color-page-background) !important;
    background-image: none !important;
    box-shadow: var(--shadow-popup);
}

.rz-calendar,
.rz-calendar table,
.rz-calendar th,
.rz-calendar td,
.rz-calendar-title,
.rz-calendar-header,
.rz-calendar-footer {
    color: var(--color-text-control);
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.rz-calendar table,
.rz-calendar thead,
.rz-calendar tbody,
.rz-calendar tr,
.rz-calendar th,
.rz-calendar td {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.rz-calendar .rz-button,
.rz-calendar .rz-calendar-cell,
.rz-calendar .rz-calendar-cell .rz-button,
.rz-calendar td .rz-state-default {
    border-color: transparent !important;
    color: var(--color-text-control) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.rz-calendar td .rz-calendar-other-month {
    color: var(--color-text-secondary) !important;
}

.rz-calendar .rz-button:hover,
.rz-calendar .rz-button:focus,
.rz-calendar .rz-calendar-cell:hover,
.rz-calendar .rz-calendar-cell.rz-state-hover,
.rz-calendar .rz-calendar-cell .rz-button:hover,
.rz-calendar .rz-calendar-cell .rz-button:focus,
.rz-calendar td:hover .rz-state-default,
.rz-calendar td .rz-state-default:hover,
.rz-calendar td .rz-state-default:focus {
    color: var(--color-text-primary) !important;
    background: var(--color-control-hover) !important;
    background-color: var(--color-control-hover) !important;
    background-image: none !important;
}

.rz-calendar .rz-state-highlight,
.rz-calendar .rz-calendar-cell.rz-state-highlight,
.rz-calendar .rz-calendar-cell.rz-state-selected,
.rz-calendar .rz-calendar-cell.rz-state-selected .rz-button,
.rz-calendar td .rz-state-highlight,
.rz-calendar td .rz-state-selected {
    color: var(--color-text-primary) !important;
    background: var(--color-control-selected) !important;
    background-color: var(--color-control-selected) !important;
    background-image: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    background-color: transparent !important;
    background-image: none !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--color-text-control) !important;
    color: var(--color-text-control) !important;
    caret-color: var(--color-text-control);
    transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s;
}

input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus,
input:-moz-autofill:active,
textarea:-moz-autofill,
textarea:-moz-autofill:hover,
textarea:-moz-autofill:focus,
textarea:-moz-autofill:active {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--color-text-control) !important;
    caret-color: var(--color-text-control);
}

@supports selector(input:autofill) {
    input:autofill,
    input:autofill:hover,
    input:autofill:focus,
    input:autofill:active,
    textarea:autofill,
    textarea:autofill:hover,
    textarea:autofill:focus,
    textarea:autofill:active {
        background-color: transparent !important;
        background-image: none !important;
        color: var(--color-text-control) !important;
        caret-color: var(--color-text-control);
    }
}