[data-status="low"] .bar span { background: var(--low) !important; } [data-status="mid"] .bar span { background: var(--mid) !important; } [data-status="high"] .bar span { background: var(--high) !important; } [data-status="critical"] .bar span { background: var(--critical) !important; }  [data-status="low"].hospitals-cards__percentage { color: var(--low); background: var(--low-20); } [data-status="mid"].hospitals-cards__percentage { color: var(--mid); background: var(--mid-20); } [data-status="high"].hospitals-cards__percentage { color: var(--high); background: var(--high-20); } [data-status="critical"].hospitals-cards__percentage { color: var(--critical); background: var(--critical-20); }  [data-status="low"].hospitals-cards__dep-card { color: var(--low); background: var(--low-20); } [data-status="mid"].hospitals-cards__dep-card { color: var(--mid); background: var(--mid-20); } [data-status="high"].hospitals-cards__dep-card { color: var(--high); background: var(--high-20); } [data-status="critical"].hospitals-cards__dep-card { color: var(--critical); background: var(--critical-20); } <style>  [data-status="low"].total-rate { color: var(--low); border-color:var(--low) ;background: var(--low-20); } [data-status="mid"].total-rate { color: var(--mid); border-color:var(--mid) ;background: var(--mid-20); } [data-status="high"].total-rate { color: var(--high); border-color:var(--high) ;background: var(--high-20); } [data-status="critical"].total-rate { color: var(--critical); border-color:var(--critical) ;background: var(--critical-20); } </style>