/* * Load this stylesheet LAST (see App.razor — link at end of body). * RadzenTheme injects material.css into after static links; body CSS wins in cascade order. * Also: popup calendar may not inherit variables from the input’s .rz-datepicker — use :root + direct rules. */ :root, html { --rz-primary: var(--primarycolor, #70CAB9) !important; --rz-primary-light: #8fd4c8 !important; --rz-primary-lighter: rgba(112, 202, 185, 0.16) !important; --rz-primary-dark: #5ab5aa !important; --rz-primary-darker: #4a9d8f !important; --rz-on-primary: #ffffff !important; --rz-on-primary-light: #ffffff !important; --rz-on-primary-lighter: #ffffff !important; --rz-on-primary-dark: #ffffff !important; --rz-on-primary-darker: #ffffff !important; } /* Floating panel subtree */ .rz-datepicker:not(.rz-datepicker-inline) { --rz-primary: var(--primarycolor, #70CAB9) !important; --rz-datepicker-calendar-selected-background-color: var(--primarycolor, #70CAB9) !important; --rz-datepicker-calendar-selected-color: #ffffff !important; --rz-datepicker-calendar-selected-hover-background-color: #8fd4c8 !important; --rz-timepicker-button-background-color: var(--primarycolor, #70CAB9) !important; --rz-timepicker-button-color: #ffffff !important; } /* Selected day — match with or without .rz-datepicker ancestor (portal) */ .rz-datepicker-calendar td .rz-state-active, .rz-datepicker-calendar td .rz-state-default.rz-state-active, .rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { background-color: var(--primarycolor, #70CAB9) !important; background-image: none !important; color: #ffffff !important; } .rz-datepicker-calendar td .rz-state-active:hover, .rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { background-color: #8fd4c8 !important; background-image: none !important; color: #ffffff !important; } /* OK in time row: Radzen 9 DatePicker uses rz-secondary for the OK button, not rz-primary */ .rz-timepicker .rz-button.rz-secondary { background-color: var(--primarycolor, #70CAB9) !important; background-image: none !important; border-color: var(--primarycolor, #70CAB9) !important; color: #ffffff !important; box-shadow: none !important; } .rz-timepicker .rz-button.rz-secondary:hover:not(:active), .rz-timepicker .rz-button.rz-secondary:focus-visible:not(:active) { background-color: #8fd4c8 !important; border-color: #8fd4c8 !important; color: #ffffff !important; } /* If any build still uses primary for the footer OK */ .rz-datepicker .rz-button.rz-primary, .rz-datepicker .rz-timepicker .rz-button.rz-primary, .rz-timepicker .rz-button.rz-primary { background-color: var(--primarycolor, #70CAB9) !important; background-image: none !important; border-color: var(--primarycolor, #70CAB9) !important; color: #ffffff !important; box-shadow: none !important; } .rz-datepicker .rz-button.rz-primary:hover:not(:active), .rz-timepicker .rz-button.rz-primary:hover:not(:active) { background-color: #8fd4c8 !important; border-color: #8fd4c8 !important; color: #ffffff !important; }