.sea-graph-spinner{max-width:600px;min-height:340px;transform:scale(.75)}.sea-graph-spinner>IonSpinner{position:relative}.svg-graph-container{opacity:0;animation:.2s ease-out forwards graphIn;animation-delay:calc(var(--graph)*.1s)}.svg-graph-container.dashboard{max-width:100%}.svg-graph-container.modal{padding:0px var(--modal-padding-horizontal)0px var(--modal-padding-horizontal)}@keyframes graphIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1}}.svg-graph{--graph-transition:all .2s ease-in-out;font-family:var(--sea-font-family);color:#fff;user-select:none;transition:var(--graph-transition)}.svg-graph.light{color:var(--text-on-white)}.svg-graph .container{width:100%;height:100%}.svg-graph.light .container{fill:#fff}.svg-graph .title{font-size:18px;font-weight:600}.svg-graph .sub-title{opacity:.8;font-size:13px;font-weight:400}.svg-graph .label text{font-size:13px;font-weight:400}.svg-graph .pie-value{text-anchor:middle;font-size:14px;font-weight:600}.svg-graph .center{text-anchor:middle}.svg-graph .pie-value.percentage{opacity:.9;font-size:11px;font-weight:400}.svg-graph .pie-piece{transition:var(--graph-transition)}.svg-graph .pie-piece .in{opacity:0;animation:.4s ease-out forwards pieIn;animation-delay:calc(var(--graph)*.1s + .1s + var(--order)*50ms)}@keyframes pieIn{0%{opacity:0;transform:translate(var(--hover-move-x),var(--hover-move-y))}to{opacity:1}}.svg-graph .pie-piece.active{transform:translate(var(--hover-move-x),var(--hover-move-y))}.svg-graph .pie-piece.active .fill{-webkit-svg-shadow:0px 0px 6px #00000080;filter:drop-shadow(0 0 6px #00000080)}.svg-graph.light .pie-piece.active .fill{-webkit-svg-shadow:0px 0px 6px rgba(0,0,6px,.5);filter:drop-shadow(0 0 6px #00000080)}.svg-graph .label{transition:var(--graph-transition)}.svg-graph .label .in{opacity:0;animation:.2s ease-out forwards labelIn;animation-delay:calc(var(--graph)*.1s + .1s + var(--order)*0s)}.svg-graph .label.active{transform:translate(8px)}.svg-graph .label.active rect{stroke:#fff;stroke-width:2px}.svg-graph.light .label.active rect{stroke:var(--text-on-white)}@keyframes labelIn{0%{opacity:0;transform:translate(16px)}to{opacity:1}}.svg-graph .active-name{text-anchor:middle;color:#fff;font-size:13px;font-weight:500}.svg-graph.light .active-name{color:var(--text-on-white)}.svg-graph .active-name.percentage{font-size:13px;font-weight:500}