.lds-ring { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 64px; height: 64px; margin: 8px; border: 8px solid #fdd; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fdd transparent transparent transparent; } .lds-ring div:nth-child(1) { animation-delay: -0.45s; } .lds-ring div:nth-child(2) { animation-delay: -0.3s; } .lds-ring div:nth-child(3) { animation-delay: -0.15s; } @keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1} .highcharts-container { width: 100% !important; height: 100% !important; } .highcharts-root { width: 99%; height: 99%; max-height: 80vh; margin-bottom: -4px; } .highcharts-background { fill: rgba(0, 0, 0, 0); } /* #280 sign-off round 4 #8: the numbered value inside each 2x2 matrix bubble is set to a fixed 15px inline by Highcharts (ChartConfig sharedDataLabels / buildAggregateSeries). On phones the matrix shrinks but the number doesn't, so it reads oversized. Shrink the data-label text (only the bubble values — axis labels use .highcharts-axis-labels, untouched) at <=700. !important is required to beat Highcharts' inline font-size on the element. */ @media (max-width: 700px) { .highcharts-data-label text { font-size: 12px !important; } } /* .highcharts-plot-border { fill: cyan; } */ .recharts-cartesian-axis-line { stroke: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .vote-circle { opacity: 0; } .vote-circle-enter { opacity: 0; animation: fadeIn 0.5s 0.5s linear forwards; } .vote-circle-exit { animation: fadeOut 0.2s linear forwards; } #chart:hover .vote-circle { animation: fadeIn 0.3s linear forwards; } #chart:not(:hover) .vote-circle { animation: fadeOut 0.2s linear forwards; } /* NO html/body background here, deliberately (#481). This stylesheet is the LAST element in the built - after the , which is where the served shell injects its boot \3c style> - so a background declared here outranks the shell's on source order and a dark brand gets a white page for as long as it is open. The page's fill is written by `brandShell.injectBrand` before the bundle runs and by `applyBrandIdentity` afterwards. `src/pageBackground.unit.test.js` and `shell/verifyBuild.js` are the two halves of the gate. */ body { margin: 0; overflow: auto; /* or overflow: overlay for modern browsers */ font-family: -apple-system, BlinkMacSystemFont, "Open Sans", "Montserrat", "Work Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* ADD these iOS-specific fixes */ -webkit-overflow-scrolling: touch; position: relative; height: 100%; width: 100%; } html { font-size: 12px; /* ADD these */ height: 100%; position: fixed; /* Prevents elastic scrolling */ width: 100%; overflow: hidden; } /* iOS-specific viewport fix */ @supports (-webkit-touch-callout: none) { html, body { height: 100dvh; height: -webkit-fill-available; } } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: rgb(175, 175, 175); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: rgb(122, 122, 122); } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } .MuiCard-root { overflow: visible !important; }