.ratesGraphSection{border:1px solid #aaa;border-radius:12px;overflow:visible}
.ratesGraphTitle{color:#111}
.ratesGraphTitle h2{margin-bottom:0 !important}
.karatToggle{padding:2px;border-radius:40px;background-color:#fdc;margin-top:7px;margin-bottom:7px}
.karatSelectionButton{border-radius:40px;background-color:transparent;color:#111}
.karatSelectionButton.selected{background-color:#f50;color:#fff}
.cityDropdown{border:solid 1px #aaa;background-color:#fff5e5;padding-top:17px;padding-bottom:17px;width:22vw}
.topControlsSection{gap:16px;align-items:center !important}
.leftControlsSection{min-width:0}
.rightControlsSection{margin-left:auto;min-width:0}
.selectCityText{color:#666}
.cityDropdown.citySelected{padding-top:8px;padding-bottom:8px;background-color:var(--neutral-colours-super-silver-neutral)}
.cityDropdown.citySelected .selectCityText{font-size:12px !important}
.cityDropdown.cityDropdown.citySelected .cityDropdownTextSection{gap:4px !important}
.cityDropdown.focus{border:solid 1px #007bff;background-color:#f2f9ff}
.cityDropdown.focus .selectCityText{color:#007bff}
.cityDropdown.focus .dropdownArrowSection img{transform:rotate(180deg)}
.citySelectionSection{width:100%;position:relative}
.cityDropdown.focus ~ .updatedDateText{margin-top:-16px}
.dropdownCitySelectionSection{top:calc(100% + 8px);right:0;gap:12px;width:100%;box-shadow:0 2px 8px 0 rgba(17,17,17,0.25);z-index:3}
.searchbarTextbox{padding:8.5px 12px;font-size:14px;border:solid 1px #aaa;border-right:0;background-color:#fff;border-radius:4px 0 0 4px;height:36px}
.searchbarImageSection{background-color:#fff2ea;padding:10px;border:solid 1px #aaa;border-left:0;border-radius:0 4px 4px 0;height:36px}
.searchbarImage{height:16px;width:16px}
.cityOptionsSection{row-gap:12px;overflow-y:scroll;scroll-behavior:smooth;max-height:122px}
.cityOptionsSection::-webkit-scrollbar{width:4px;height:auto;margin-right:-8px}
.cityOptionsSection::-webkit-scrollbar-thumb{background-color:#005dac;border-radius:2px}
.cityOptionsSection::-webkit-scrollbar-thumb:hover{background-color:#005dac}
.cityOptionsSection::-webkit-scrollbar-track{background-color:#cce6ff;border-radius:2px}
.cityOption{font-size:14px;color:#111}
.updatedDateText{color:#666}
.detailsTodaySection{padding-top:12px;padding-bottom:12px;border-radius:12px}
.arrowImage{height:46px;width:46px}
.detailsTodayUpperText{color:#111}
.detailsTodayLowerText{color:#111;font-size:32px}
.graph-fallback-container{min-height:277px;display:flex;align-items:center;justify-content:center;border:1px solid #e3e3e3;border-radius:12px;background-color:#fafafa}
.graph-fallback-message{color:#7d7d7d;font-size:16px;font-weight:700;text-align:center}
.graph-fallback-image{max-height:277px}
.ratesGraphCanvasWrap{padding-left:0;padding-right:0}
.ratesGraphSection #tooltip{position:absolute;top:0;left:-16px;background:#fff;color:#111;border-radius:3px;transition:all .1s ease;pointer-events:none;padding:8px;margin:auto;font-size:12px;white-space:nowrap;z-index:2;opacity:0;box-shadow:0 4px 12px rgba(17,17,17,0.16)}
.ratesGraphSection #tooltip::after{content:" ";position:absolute;left:37%;top:96%;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff;clear:both}
.ratesGraphSection #tooltip.caret-pos::after{top:50%;left:96%;transform:rotate(-90deg)}
.durationButtonsSection{gap:12px}
.durationButton{background-color:#fff;color:#111;padding-left:12px;padding-right:12px;border:solid 1px #666}
.durationButton.selected{background-color:#f50;color:#fff;border:0}
.mt-n3{margin-top:-16px}
@media only screen and (max-width:767px){.ratesGraphSection{gap:12px !important}
.topControlsSection{gap:12px;flex-direction:column !important;align-items:stretch !important}
.karatToggle{margin-top:0;margin-bottom:0;width:fit-content}
.karatSelectionButton{font-size:14px !important;width:auto}
.cityDropdown{width:100%}
.rightControlsSection{width:100%;margin-left:0;align-items:stretch}
.dropdownCitySelectionSection{min-width:100%;width:100%}
.graph-fallback-container{min-height:220px}
.graph-fallback-image{max-height:220px}
.detailsTodaySection{gap:12px !important;border-radius:8px}
.detailsTodayUpperText{font-size:14px !important}
.detailsTodayLowerText{font-size:26px}
.durationButton{font-size:14px !important}
.arrowImage{height:36px;width:36px}
.durationButtonsSection{justify-content:flex-start !important}
}