.energyCostChart { height: 1px; flex: 1; padding-top: 8px; } .energyCostChart .titleBar { width: 400px; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; color: white; } .energyCostChart .titleBar h2 { margin: 0; font-size: 18px; line-height: 32px; letter-spacing: 1.2px; color: #52fff8; } .energyCostChart .titleBar .legend { display: flex; align-items: center; } .energyCostChart .titleBar .legend * { font-size: 14px; line-height: 14px; color: #dff1fe; } .energyCostChart .titleBar .legend ul { display: flex; margin: 0; margin-left: 8px; padding: 0; list-style: none; align-items: center; } .energyCostChart .titleBar .legend ul li { position: relative; margin: 4px; padding-left: 16px; } .energyCostChart .titleBar .legend ul li::before { content: ''; position: absolute; left: 2px; top: 2px; display: inline-block; width: 12px; height: 12px; border-radius: 2px; } .energyCostChart .titleBar .legend ul li:first-child::before { background-color: #ffd160; } .energyCostChart .titleBar .legend ul li:nth-child(2)::before { background-color: #12fff5; } .energyCostChart .titleBar .legend ul li:nth-child(3)::before { background-color: #2760ff; } .choiceBar { margin: 4px 0; } .radioGroup * { border: none !important; border-radius: 0 !important; } .radioGroupShort * { border: none !important; border-radius: 6px !important; } .radioGroup *:focus-within { box-shadow: none !important; } .radioGroup *::before { width: 0 !important; } .radioGroup_button_wrapper { color: #fff !important; background: #03233c !important; } .radioGroup_button_wrapper.ant-radio-button-wrapper-checked { background: #02457e !important; }