.si-indicator .si-tooltip-wrap {
  position: relative;
  cursor: default;
}

.si-indicator .si-items {
  font-size: 12px;
  font-weight: 600;
  margin: 3px 0;
}

.si-indicator .si-tooltip {
  color: #484848;
  background: white;
  white-space: nowrap;
  position: absolute;
  padding: 7px 10px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0, 0, 0.2, 1);
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
  z-index: 1000;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.si-indicator .si-tooltip.si-tooltip-dark {
  color: #ebebeb;
  background: #2b2b2b;
}

.si-indicator .si-tooltip::after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  bottom: -7px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: white transparent transparent transparent;
}

.si-indicator .si-tooltip.si-tooltip-dark::after {
  border-color: #2b2b2b transparent transparent transparent;
}

.si-indicator .si-outer:hover ~ .si-tooltip {
  visibility: visible;
  opacity: 1;
}

/** Bar design */

.si-indicator.si-bar .si-outer {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-bg);
  width: 100px;
  border-radius: 1000em;
  overflow: hidden;
  height: 16px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.si-bar .si-inner {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
  width: 0;
  height: 100%;
}

.si-bar .si-inner.si-lvl-1 {
  width: 20%;
}

.si-bar.si-colors .si-inner.si-lvl-1 {
  background-color: #e84c3d;
  background-color: var(--advsi-color-low-min);
}

.si-bar .si-inner.si-lvl-2 {
  width: 40%;
}

.si-bar.si-colors .si-inner.si-lvl-2 {
  background-color: #e67e22;
  background-color: var(--advsi-color-low);
}

.si-bar .si-inner.si-lvl-3 {
  width: 60%;
}

.si-bar.si-colors .si-inner.si-lvl-3 {
  background-color: #f1c40f;
  background-color: var(--advsi-color-medium);
}

.si-bar .si-inner.si-lvl-4 {
  width: 80%;
}

.si-bar.si-colors .si-inner.si-lvl-4 {
  background-color: #96d940;
  background-color: var(--advsi-color-high);
}

.si-bar .si-inner.si-lvl--1,
.si-bar .si-inner.si-lvl-0,
.si-bar .si-inner.si-lvl-5 {
  width: 100%;
}

.si-bar.si-colors .si-inner.si-lvl-5 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-bar .si-inner.si-lvl--1 {
  background-color: #3ca0d8;
  background-color: var(--advsi-color-preorder);
}

.si-bar.si-colors .si-inner.si-lvl-0 {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-oos);
}

/** Bar thin design */

.si-indicator.si-bar.si-bar-thin .si-outer {
  height: 6px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/** Stripes design */

.si-stripes .si-outer {
  width: 50px;
  margin-left: auto;
  margin-right: auto;
}

.si-stripes .si-inner {
  font-size: 0;
  line-height: 0;
  height: 20px;
}

.si-stripes .si-inner > span {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-bg);
  display: inline-block;
  margin: 0 1px;
  width: 8px;
  height: 100%;
}

.si-stripes .si-inner.si-lvl-1 > .si-bar-1 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-stripes.si-colors .si-inner.si-lvl-1 > .si-bar-1 {
  background-color: #e84c3d;
  background-color: var(--advsi-color-low-min);
}

.si-stripes .si-inner.si-lvl-2 > .si-bar-1,
.si-stripes .si-inner.si-lvl-2 > .si-bar-2 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-stripes.si-colors .si-inner.si-lvl-2 > .si-bar-1,
.si-stripes.si-colors .si-inner.si-lvl-2 > .si-bar-2 {
  background-color: #e67e22;
  background-color: var(--advsi-color-low);
}

.si-stripes .si-inner.si-lvl-3 > .si-bar-1,
.si-stripes .si-inner.si-lvl-3 > .si-bar-2,
.si-stripes .si-inner.si-lvl-3 > .si-bar-3 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-stripes.si-colors .si-inner.si-lvl-3 > .si-bar-1,
.si-stripes.si-colors .si-inner.si-lvl-3 > .si-bar-2,
.si-stripes.si-colors .si-inner.si-lvl-3 > .si-bar-3 {
  background-color: #f1c40f;
  background-color: var(--advsi-color-medium);
}

.si-stripes .si-inner.si-lvl-4 > .si-bar-1,
.si-stripes .si-inner.si-lvl-4 > .si-bar-2,
.si-stripes .si-inner.si-lvl-4 > .si-bar-3,
.si-stripes .si-inner.si-lvl-4 > .si-bar-4 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-stripes.si-colors .si-inner.si-lvl-4 > .si-bar-1,
.si-stripes.si-colors .si-inner.si-lvl-4 > .si-bar-2,
.si-stripes.si-colors .si-inner.si-lvl-4 > .si-bar-3,
.si-stripes.si-colors .si-inner.si-lvl-4 > .si-bar-4 {
  background-color: #96d940;
  background-color: var(--advsi-color-high);
}

.si-stripes .si-inner.si-lvl-5 > span {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-stripes .si-inner.si-lvl--1 > span {
  background-color: #3ca0d8;
  background-color: var(--advsi-color-preorder);
}

.si-stripes.si-colors .si-inner.si-lvl-0 > span {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-oos);
}

/** Squares design */

.si-stripes.si-squares .si-outer {
  width: 90px;
}

.si-stripes.si-squares .si-inner {
  height: 16px;
}

.si-stripes.si-squares .si-inner > span {
  width: 16px;
  border-radius: 1px;
}

/** Circles design */

.si-stripes.si-circles .si-outer {
  width: 100px;
}

.si-stripes.si-circles .si-inner {
  height: 16px;
}

.si-stripes.si-circles .si-inner > span {
  width: 16px;
  border-radius: 100rem;
  margin: 0 2px;
}

/** Diamonds design */

.si-diamonds .si-outer {
  width: 120px;
  margin-left: auto;
  margin-right: auto;
}

.si-diamonds .si-inner {
  font-size: 0;
  line-height: 0;
  height: 20px;
}

.si-diamonds .si-inner > span {
  display: inline-block;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #d5d5e5;
  border-bottom-color: var(--advsi-color-bg);
  border-width: 0 5px 5px 5px;
  box-sizing: content-box;
  height: 0;
  width: 10px;
  position: relative;
  margin: 0 2px 15px;
}

.si-diamonds .si-inner > span::after {
  border-style: solid;
  border-color: transparent;
  border-top-color: #d5d5e5;
  border-top-color: var(--advsi-color-bg);
  content: '';
  position: absolute;
  top: 5px;
  left: -5px;
  width: 0;
  height: 0;
  border-width: 15px 10px 0 10px;
}

.si-diamonds .si-inner.si-lvl-1 > .si-bar-1 {
  border-bottom-color: #5fd841;
  border-bottom-color: var(--advsi-color-high-max);
}

.si-diamonds .si-inner.si-lvl-1 > .si-bar-1::after {
  border-top-color: #5fd841;
  border-top-color: var(--advsi-color-high-max);
}

.si-diamonds.si-colors .si-inner.si-lvl-1 > .si-bar-1 {
  border-bottom-color: #e84c3d;
  border-bottom-color: var(--advsi-color-low-min);
}

.si-diamonds.si-colors .si-inner.si-lvl-1 > .si-bar-1::after {
  border-top-color: #e84c3d;
  border-top-color: var(--advsi-color-low-min);
}

.si-diamonds .si-inner.si-lvl-2 > .si-bar-1,
.si-diamonds .si-inner.si-lvl-2 > .si-bar-2 {
  border-bottom-color: #5fd841;
  border-bottom-color: var(--advsi-color-high-max);
}

.si-diamonds .si-inner.si-lvl-2 > .si-bar-1::after,
.si-diamonds .si-inner.si-lvl-2 > .si-bar-2::after {
  border-top-color: #5fd841;
  border-top-color: var(--advsi-color-high-max);
}

.si-diamonds.si-colors .si-inner.si-lvl-2 > .si-bar-1,
.si-diamonds.si-colors .si-inner.si-lvl-2 > .si-bar-2 {
  border-bottom-color: #e67e22;
  border-bottom-color: var(--advsi-color-low);
}

.si-diamonds.si-colors .si-inner.si-lvl-2 > .si-bar-1::after,
.si-diamonds.si-colors .si-inner.si-lvl-2 > .si-bar-2::after {
  border-top-color: #e67e22;
  border-top-color: var(--advsi-color-low);
}

.si-diamonds .si-inner.si-lvl-3 > .si-bar-1,
.si-diamonds .si-inner.si-lvl-3 > .si-bar-2,
.si-diamonds .si-inner.si-lvl-3 > .si-bar-3 {
  border-bottom-color: #5fd841;
  border-bottom-color: var(--advsi-color-high-max);
}

.si-diamonds .si-inner.si-lvl-3 > .si-bar-1::after,
.si-diamonds .si-inner.si-lvl-3 > .si-bar-2::after,
.si-diamonds .si-inner.si-lvl-3 > .si-bar-3::after {
  border-top-color: #5fd841;
  border-top-color: var(--advsi-color-high-max);
}

.si-diamonds.si-colors .si-inner.si-lvl-3 > .si-bar-1,
.si-diamonds.si-colors .si-inner.si-lvl-3 > .si-bar-2,
.si-diamonds.si-colors .si-inner.si-lvl-3 > .si-bar-3 {
  border-bottom-color: #f1c40f;
  border-bottom-color: var(--advsi-color-medium);
}

.si-diamonds.si-colors .si-inner.si-lvl-3 > .si-bar-1::after,
.si-diamonds.si-colors .si-inner.si-lvl-3 > .si-bar-2::after,
.si-diamonds.si-colors .si-inner.si-lvl-3 > .si-bar-3::after {
  border-top-color: #f1c40f;
  border-top-color: var(--advsi-color-medium);
}

.si-diamonds .si-inner.si-lvl-4 > .si-bar-1,
.si-diamonds .si-inner.si-lvl-4 > .si-bar-2,
.si-diamonds .si-inner.si-lvl-4 > .si-bar-3,
.si-diamonds .si-inner.si-lvl-4 > .si-bar-4 {
  border-bottom-color: #5fd841;
  border-bottom-color: var(--advsi-color-high-max);
}

.si-diamonds .si-inner.si-lvl-4 > .si-bar-1::after,
.si-diamonds .si-inner.si-lvl-4 > .si-bar-2::after,
.si-diamonds .si-inner.si-lvl-4 > .si-bar-3::after,
.si-diamonds .si-inner.si-lvl-4 > .si-bar-4::after {
  border-top-color: #5fd841;
  border-top-color: var(--advsi-color-high-max);
}

.si-diamonds.si-colors .si-inner.si-lvl-4 > .si-bar-1,
.si-diamonds.si-colors .si-inner.si-lvl-4 > .si-bar-2,
.si-diamonds.si-colors .si-inner.si-lvl-4 > .si-bar-3,
.si-diamonds.si-colors .si-inner.si-lvl-4 > .si-bar-4 {
  border-bottom-color: #96d940;
  border-bottom-color: var(--advsi-color-high);
}

.si-diamonds.si-colors .si-inner.si-lvl-4 > .si-bar-1::after,
.si-diamonds.si-colors .si-inner.si-lvl-4 > .si-bar-2::after,
.si-diamonds.si-colors .si-inner.si-lvl-4 > .si-bar-3::after,
.si-diamonds.si-colors .si-inner.si-lvl-4 > .si-bar-4::after {
  border-top-color: #96d940;
  border-top-color: var(--advsi-color-high);
}

.si-diamonds .si-inner.si-lvl-5 > span {
  border-bottom-color: #5fd841;
  border-bottom-color: var(--advsi-color-high-max);
}

.si-diamonds .si-inner.si-lvl-5 > span::after {
  border-top-color: #5fd841;
  border-top-color: var(--advsi-color-high-max);
}

.si-diamonds .si-inner.si-lvl--1 > span {
  border-bottom-color: #3ca0d8;
  border-bottom-color: var(--advsi-color-preorder);
}

.si-diamonds .si-inner.si-lvl--1 > span::after {
  border-top-color: #3ca0d8;
  border-top-color: var(--advsi-color-preorder);
}

.si-diamonds.si-colors .si-inner.si-lvl-0 > span {
  border-bottom-color: #d5d5e5;
  border-bottom-color: var(--advsi-color-oos);
}

.si-diamonds.si-colors .si-inner.si-lvl-0 > span::after {
  border-top-color: #d5d5e5;
  border-top-color: var(--advsi-color-oos);
}

/** Hearts design */

.si-hearts .si-outer {
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5px;
}

.si-hearts .si-inner {
  font-size: 0;
  line-height: 0;
  height: 16px;
}

.si-hearts .si-inner > span {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-bg);
  display: inline-block;
  margin: 0 6px;
  width: 12px;
  height: 12px;
  position: relative;
  transform: rotate(-45deg);
}

.si-hearts .si-inner > span::before,
.si-hearts .si-inner > span::after {
  position: absolute;
  width: 12px;
  height: 12px;
  content: '';
  border-radius: 50%;
  background-color: inherit;
}

.si-hearts .si-inner > span::before {
  top: -6px;
  left: 0;
}

.si-hearts .si-inner > span::after {
  left: 6px;
  top: 0;
}

.si-hearts .si-inner.si-lvl-1 > .si-bar-1 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-hearts.si-colors .si-inner.si-lvl-1 > .si-bar-1 {
  background-color: #e84c3d;
  background-color: var(--advsi-color-low-min);
}

.si-hearts .si-inner.si-lvl-2 > .si-bar-1,
.si-hearts .si-inner.si-lvl-2 > .si-bar-2 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-hearts.si-colors .si-inner.si-lvl-2 > .si-bar-1,
.si-hearts.si-colors .si-inner.si-lvl-2 > .si-bar-2 {
  background-color: #e67e22;
  background-color: var(--advsi-color-low);
}

.si-hearts .si-inner.si-lvl-3 > .si-bar-1,
.si-hearts .si-inner.si-lvl-3 > .si-bar-2,
.si-hearts .si-inner.si-lvl-3 > .si-bar-3 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-hearts.si-colors .si-inner.si-lvl-3 > .si-bar-1,
.si-hearts.si-colors .si-inner.si-lvl-3 > .si-bar-2,
.si-hearts.si-colors .si-inner.si-lvl-3 > .si-bar-3 {
  background-color: #f1c40f;
  background-color: var(--advsi-color-medium);
}

.si-hearts .si-inner.si-lvl-4 > .si-bar-1,
.si-hearts .si-inner.si-lvl-4 > .si-bar-2,
.si-hearts .si-inner.si-lvl-4 > .si-bar-3,
.si-hearts .si-inner.si-lvl-4 > .si-bar-4 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-hearts.si-colors .si-inner.si-lvl-4 > .si-bar-1,
.si-hearts.si-colors .si-inner.si-lvl-4 > .si-bar-2,
.si-hearts.si-colors .si-inner.si-lvl-4 > .si-bar-3,
.si-hearts.si-colors .si-inner.si-lvl-4 > .si-bar-4 {
  background-color: #96d940;
  background-color: var(--advsi-color-high);
}

.si-hearts .si-inner.si-lvl-5 > span {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-hearts .si-inner.si-lvl--1 > span {
  background-color: #3ca0d8;
  background-color: var(--advsi-color-preorder);
}

.si-hearts.si-colors .si-inner.si-lvl-0 > span {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-oos);
}

/** Hearts pixel design */
/** Thanks: https://codepen.io/BerkTurgut/pen/ExyjYJB */

.si-hearts-pixel .si-outer {
  width: 125px;
  margin-left: auto;
  margin-right: auto;
}

.si-hearts-pixel .si-inner {
  font-size: 0;
  line-height: 0;
  height: 18px;
}

.si-hearts-pixel .si-inner > span {
  display: inline-block;
  width: 21px;
  height: 18px;
  margin: 0 2px;
}

.si-hearts-pixel .si-inner > span::after {
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  box-shadow: 3px 0 #d5d5e5, 6px 0 #d5d5e5, 12px 0 #d5d5e5, 15px 0 #d5d5e5,
    0 3px #d5d5e5, 3px 3px #d5d5e5, 6px 3px #d5d5e5, 9px 3px #d5d5e5,
    12px 3px #d5d5e5, 15px 3px #d5d5e5, 18px 3px #d5d5e5, 0 6px #d5d5e5,
    3px 6px #d5d5e5, 6px 6px #d5d5e5, 9px 6px #d5d5e5, 12px 6px #d5d5e5,
    15px 6px #d5d5e5, 18px 6px #d5d5e5, 3px 9px #d5d5e5, 6px 9px #d5d5e5,
    9px 9px #d5d5e5, 12px 9px #d5d5e5, 15px 9px #d5d5e5, 6px 12px #d5d5e5,
    9px 12px #d5d5e5, 12px 12px #d5d5e5, 9px 15px #d5d5e5;
  box-shadow: 3px 0 var(--advsi-color-bg), 6px 0 var(--advsi-color-bg),
    12px 0 var(--advsi-color-bg), 15px 0 var(--advsi-color-bg),
    0 3px var(--advsi-color-bg), 3px 3px var(--advsi-color-bg),
    6px 3px var(--advsi-color-bg), 9px 3px var(--advsi-color-bg),
    12px 3px var(--advsi-color-bg), 15px 3px var(--advsi-color-bg),
    18px 3px var(--advsi-color-bg), 0 6px var(--advsi-color-bg),
    3px 6px var(--advsi-color-bg), 6px 6px var(--advsi-color-bg),
    9px 6px var(--advsi-color-bg), 12px 6px var(--advsi-color-bg),
    15px 6px var(--advsi-color-bg), 18px 6px var(--advsi-color-bg),
    3px 9px var(--advsi-color-bg), 6px 9px var(--advsi-color-bg),
    9px 9px var(--advsi-color-bg), 12px 9px var(--advsi-color-bg),
    15px 9px var(--advsi-color-bg), 6px 12px var(--advsi-color-bg),
    9px 12px var(--advsi-color-bg), 12px 12px var(--advsi-color-bg),
    9px 15px var(--advsi-color-bg);
}

.si-hearts-pixel .si-inner.si-lvl-1 > .si-bar-1::after,
.si-hearts-pixel .si-inner.si-lvl-2 > .si-bar-1::after,
.si-hearts-pixel .si-inner.si-lvl-2 > .si-bar-2::after,
.si-hearts-pixel .si-inner.si-lvl-3 > .si-bar-1::after,
.si-hearts-pixel .si-inner.si-lvl-3 > .si-bar-2::after,
.si-hearts-pixel .si-inner.si-lvl-3 > .si-bar-3::after,
.si-hearts-pixel .si-inner.si-lvl-4 > .si-bar-1::after,
.si-hearts-pixel .si-inner.si-lvl-4 > .si-bar-2::after,
.si-hearts-pixel .si-inner.si-lvl-4 > .si-bar-3::after,
.si-hearts-pixel .si-inner.si-lvl-4 > .si-bar-4::after,
.si-hearts-pixel .si-inner.si-lvl-5 > span::after {
  box-shadow: 3px 0 #5fd841, 6px 0 #5fd841, 12px 0 #5fd841, 15px 0 #5fd841,
    0 3px #5fd841, 3px 3px #5fd841, 6px 3px #5fd841, 9px 3px #5fd841,
    12px 3px #5fd841, 15px 3px #5fd841, 18px 3px #5fd841, 0 6px #5fd841,
    3px 6px #5fd841, 6px 6px #5fd841, 9px 6px #5fd841, 12px 6px #5fd841,
    15px 6px #5fd841, 18px 6px #5fd841, 3px 9px #5fd841, 6px 9px #5fd841,
    9px 9px #5fd841, 12px 9px #5fd841, 15px 9px #5fd841, 6px 12px #5fd841,
    9px 12px #5fd841, 12px 12px #5fd841, 9px 15px #5fd841;
  box-shadow: 3px 0 var(--advsi-color-high-max),
    6px 0 var(--advsi-color-high-max), 12px 0 var(--advsi-color-high-max),
    15px 0 var(--advsi-color-high-max), 0 3px var(--advsi-color-high-max),
    3px 3px var(--advsi-color-high-max), 6px 3px var(--advsi-color-high-max),
    9px 3px var(--advsi-color-high-max), 12px 3px var(--advsi-color-high-max),
    15px 3px var(--advsi-color-high-max), 18px 3px var(--advsi-color-high-max),
    0 6px var(--advsi-color-high-max), 3px 6px var(--advsi-color-high-max),
    6px 6px var(--advsi-color-high-max), 9px 6px var(--advsi-color-high-max),
    12px 6px var(--advsi-color-high-max), 15px 6px var(--advsi-color-high-max),
    18px 6px var(--advsi-color-high-max), 3px 9px var(--advsi-color-high-max),
    6px 9px var(--advsi-color-high-max), 9px 9px var(--advsi-color-high-max),
    12px 9px var(--advsi-color-high-max), 15px 9px var(--advsi-color-high-max),
    6px 12px var(--advsi-color-high-max), 9px 12px var(--advsi-color-high-max),
    12px 12px var(--advsi-color-high-max), 9px 15px var(--advsi-color-high-max);
}

.si-hearts-pixel.si-colors .si-inner.si-lvl-1 > .si-bar-1::after {
  box-shadow: 3px 0 #e84c3d, 6px 0 #e84c3d, 12px 0 #e84c3d, 15px 0 #e84c3d,
    0 3px #e84c3d, 3px 3px #e84c3d, 6px 3px #e84c3d, 9px 3px #e84c3d,
    12px 3px #e84c3d, 15px 3px #e84c3d, 18px 3px #e84c3d, 0 6px #e84c3d,
    3px 6px #e84c3d, 6px 6px #e84c3d, 9px 6px #e84c3d, 12px 6px #e84c3d,
    15px 6px #e84c3d, 18px 6px #e84c3d, 3px 9px #e84c3d, 6px 9px #e84c3d,
    9px 9px #e84c3d, 12px 9px #e84c3d, 15px 9px #e84c3d, 6px 12px #e84c3d,
    9px 12px #e84c3d, 12px 12px #e84c3d, 9px 15px #e84c3d;
  box-shadow: 3px 0 var(--advsi-color-low-min), 6px 0 var(--advsi-color-low-min),
    12px 0 var(--advsi-color-low-min), 15px 0 var(--advsi-color-low-min),
    0 3px var(--advsi-color-low-min), 3px 3px var(--advsi-color-low-min),
    6px 3px var(--advsi-color-low-min), 9px 3px var(--advsi-color-low-min),
    12px 3px var(--advsi-color-low-min), 15px 3px var(--advsi-color-low-min),
    18px 3px var(--advsi-color-low-min), 0 6px var(--advsi-color-low-min),
    3px 6px var(--advsi-color-low-min), 6px 6px var(--advsi-color-low-min),
    9px 6px var(--advsi-color-low-min), 12px 6px var(--advsi-color-low-min),
    15px 6px var(--advsi-color-low-min), 18px 6px var(--advsi-color-low-min),
    3px 9px var(--advsi-color-low-min), 6px 9px var(--advsi-color-low-min),
    9px 9px var(--advsi-color-low-min), 12px 9px var(--advsi-color-low-min),
    15px 9px var(--advsi-color-low-min), 6px 12px var(--advsi-color-low-min),
    9px 12px var(--advsi-color-low-min), 12px 12px var(--advsi-color-low-min),
    9px 15px var(--advsi-color-low-min);
}

.si-hearts-pixel.si-colors .si-inner.si-lvl-2 > .si-bar-1::after,
.si-hearts-pixel.si-colors .si-inner.si-lvl-2 > .si-bar-2::after {
  box-shadow: 3px 0 #e67e22, 6px 0 #e67e22, 12px 0 #e67e22, 15px 0 #e67e22,
    0 3px #e67e22, 3px 3px #e67e22, 6px 3px #e67e22, 9px 3px #e67e22,
    12px 3px #e67e22, 15px 3px #e67e22, 18px 3px #e67e22, 0 6px #e67e22,
    3px 6px #e67e22, 6px 6px #e67e22, 9px 6px #e67e22, 12px 6px #e67e22,
    15px 6px #e67e22, 18px 6px #e67e22, 3px 9px #e67e22, 6px 9px #e67e22,
    9px 9px #e67e22, 12px 9px #e67e22, 15px 9px #e67e22, 6px 12px #e67e22,
    9px 12px #e67e22, 12px 12px #e67e22, 9px 15px #e67e22;
  box-shadow: 3px 0 var(--advsi-color-low), 6px 0 var(--advsi-color-low),
    12px 0 var(--advsi-color-low), 15px 0 var(--advsi-color-low),
    0 3px var(--advsi-color-low), 3px 3px var(--advsi-color-low),
    6px 3px var(--advsi-color-low), 9px 3px var(--advsi-color-low),
    12px 3px var(--advsi-color-low), 15px 3px var(--advsi-color-low),
    18px 3px var(--advsi-color-low), 0 6px var(--advsi-color-low),
    3px 6px var(--advsi-color-low), 6px 6px var(--advsi-color-low),
    9px 6px var(--advsi-color-low), 12px 6px var(--advsi-color-low),
    15px 6px var(--advsi-color-low), 18px 6px var(--advsi-color-low),
    3px 9px var(--advsi-color-low), 6px 9px var(--advsi-color-low),
    9px 9px var(--advsi-color-low), 12px 9px var(--advsi-color-low),
    15px 9px var(--advsi-color-low), 6px 12px var(--advsi-color-low),
    9px 12px var(--advsi-color-low), 12px 12px var(--advsi-color-low),
    9px 15px var(--advsi-color-low);
}

.si-hearts-pixel.si-colors .si-inner.si-lvl-3 > .si-bar-1::after,
.si-hearts-pixel.si-colors .si-inner.si-lvl-3 > .si-bar-2::after,
.si-hearts-pixel.si-colors .si-inner.si-lvl-3 > .si-bar-3::after {
  box-shadow: 3px 0 #f1c40f, 6px 0 #f1c40f, 12px 0 #f1c40f, 15px 0 #f1c40f,
    0 3px #f1c40f, 3px 3px #f1c40f, 6px 3px #f1c40f, 9px 3px #f1c40f,
    12px 3px #f1c40f, 15px 3px #f1c40f, 18px 3px #f1c40f, 0 6px #f1c40f,
    3px 6px #f1c40f, 6px 6px #f1c40f, 9px 6px #f1c40f, 12px 6px #f1c40f,
    15px 6px #f1c40f, 18px 6px #f1c40f, 3px 9px #f1c40f, 6px 9px #f1c40f,
    9px 9px #f1c40f, 12px 9px #f1c40f, 15px 9px #f1c40f, 6px 12px #f1c40f,
    9px 12px #f1c40f, 12px 12px #f1c40f, 9px 15px #f1c40f;
  box-shadow: 3px 0 var(--advsi-color-medium), 6px 0 var(--advsi-color-medium),
    12px 0 var(--advsi-color-medium), 15px 0 var(--advsi-color-medium),
    0 3px var(--advsi-color-medium), 3px 3px var(--advsi-color-medium),
    6px 3px var(--advsi-color-medium), 9px 3px var(--advsi-color-medium),
    12px 3px var(--advsi-color-medium), 15px 3px var(--advsi-color-medium),
    18px 3px var(--advsi-color-medium), 0 6px var(--advsi-color-medium),
    3px 6px var(--advsi-color-medium), 6px 6px var(--advsi-color-medium),
    9px 6px var(--advsi-color-medium), 12px 6px var(--advsi-color-medium),
    15px 6px var(--advsi-color-medium), 18px 6px var(--advsi-color-medium),
    3px 9px var(--advsi-color-medium), 6px 9px var(--advsi-color-medium),
    9px 9px var(--advsi-color-medium), 12px 9px var(--advsi-color-medium),
    15px 9px var(--advsi-color-medium), 6px 12px var(--advsi-color-medium),
    9px 12px var(--advsi-color-medium), 12px 12px var(--advsi-color-medium),
    9px 15px var(--advsi-color-medium);
}

.si-hearts-pixel.si-colors .si-inner.si-lvl-4 > .si-bar-1::after,
.si-hearts-pixel.si-colors .si-inner.si-lvl-4 > .si-bar-2::after,
.si-hearts-pixel.si-colors .si-inner.si-lvl-4 > .si-bar-3::after,
.si-hearts-pixel.si-colors .si-inner.si-lvl-4 > .si-bar-4::after {
  box-shadow: 3px 0 #96d940, 6px 0 #96d940, 12px 0 #96d940, 15px 0 #96d940,
    0 3px #96d940, 3px 3px #96d940, 6px 3px #96d940, 9px 3px #96d940,
    12px 3px #96d940, 15px 3px #96d940, 18px 3px #96d940, 0 6px #96d940,
    3px 6px #96d940, 6px 6px #96d940, 9px 6px #96d940, 12px 6px #96d940,
    15px 6px #96d940, 18px 6px #96d940, 3px 9px #96d940, 6px 9px #96d940,
    9px 9px #96d940, 12px 9px #96d940, 15px 9px #96d940, 6px 12px #96d940,
    9px 12px #96d940, 12px 12px #96d940, 9px 15px #96d940;
  box-shadow: 3px 0 var(--advsi-color-high), 6px 0 var(--advsi-color-high),
    12px 0 var(--advsi-color-high), 15px 0 var(--advsi-color-high),
    0 3px var(--advsi-color-high), 3px 3px var(--advsi-color-high),
    6px 3px var(--advsi-color-high), 9px 3px var(--advsi-color-high),
    12px 3px var(--advsi-color-high), 15px 3px var(--advsi-color-high),
    18px 3px var(--advsi-color-high), 0 6px var(--advsi-color-high),
    3px 6px var(--advsi-color-high), 6px 6px var(--advsi-color-high),
    9px 6px var(--advsi-color-high), 12px 6px var(--advsi-color-high),
    15px 6px var(--advsi-color-high), 18px 6px var(--advsi-color-high),
    3px 9px var(--advsi-color-high), 6px 9px var(--advsi-color-high),
    9px 9px var(--advsi-color-high), 12px 9px var(--advsi-color-high),
    15px 9px var(--advsi-color-high), 6px 12px var(--advsi-color-high),
    9px 12px var(--advsi-color-high), 12px 12px var(--advsi-color-high),
    9px 15px var(--advsi-color-high);
}

.si-hearts-pixel .si-inner.si-lvl--1 > span::after {
  box-shadow: 3px 0 #3ca0d8, 6px 0 #3ca0d8, 12px 0 #3ca0d8, 15px 0 #3ca0d8,
    0 3px #3ca0d8, 3px 3px #3ca0d8, 6px 3px #3ca0d8, 9px 3px #3ca0d8,
    12px 3px #3ca0d8, 15px 3px #3ca0d8, 18px 3px #3ca0d8, 0 6px #3ca0d8,
    3px 6px #3ca0d8, 6px 6px #3ca0d8, 9px 6px #3ca0d8, 12px 6px #3ca0d8,
    15px 6px #3ca0d8, 18px 6px #3ca0d8, 3px 9px #3ca0d8, 6px 9px #3ca0d8,
    9px 9px #3ca0d8, 12px 9px #3ca0d8, 15px 9px #3ca0d8, 6px 12px #3ca0d8,
    9px 12px #3ca0d8, 12px 12px #3ca0d8, 9px 15px #3ca0d8;
  box-shadow: 3px 0 var(--advsi-color-preorder),
    6px 0 var(--advsi-color-preorder), 12px 0 var(--advsi-color-preorder),
    15px 0 var(--advsi-color-preorder), 0 3px var(--advsi-color-preorder),
    3px 3px var(--advsi-color-preorder), 6px 3px var(--advsi-color-preorder),
    9px 3px var(--advsi-color-preorder), 12px 3px var(--advsi-color-preorder),
    15px 3px var(--advsi-color-preorder), 18px 3px var(--advsi-color-preorder),
    0 6px var(--advsi-color-preorder), 3px 6px var(--advsi-color-preorder),
    6px 6px var(--advsi-color-preorder), 9px 6px var(--advsi-color-preorder),
    12px 6px var(--advsi-color-preorder), 15px 6px var(--advsi-color-preorder),
    18px 6px var(--advsi-color-preorder), 3px 9px var(--advsi-color-preorder),
    6px 9px var(--advsi-color-preorder), 9px 9px var(--advsi-color-preorder),
    12px 9px var(--advsi-color-preorder), 15px 9px var(--advsi-color-preorder),
    6px 12px var(--advsi-color-preorder), 9px 12px var(--advsi-color-preorder),
    12px 12px var(--advsi-color-preorder), 9px 15px var(--advsi-color-preorder);
}

.si-hearts-pixel.si-colors .si-inner.si-lvl-0 > span::after {
  box-shadow: 3px 0 #d5d5e5, 6px 0 #d5d5e5, 12px 0 #d5d5e5, 15px 0 #d5d5e5,
    0 3px #d5d5e5, 3px 3px #d5d5e5, 6px 3px #d5d5e5, 9px 3px #d5d5e5,
    12px 3px #d5d5e5, 15px 3px #d5d5e5, 18px 3px #d5d5e5, 0 6px #d5d5e5,
    3px 6px #d5d5e5, 6px 6px #d5d5e5, 9px 6px #d5d5e5, 12px 6px #d5d5e5,
    15px 6px #d5d5e5, 18px 6px #d5d5e5, 3px 9px #d5d5e5, 6px 9px #d5d5e5,
    9px 9px #d5d5e5, 12px 9px #d5d5e5, 15px 9px #d5d5e5, 6px 12px #d5d5e5,
    9px 12px #d5d5e5, 12px 12px #d5d5e5, 9px 15px #d5d5e5;
  box-shadow: 3px 0 var(--advsi-color-oos), 6px 0 var(--advsi-color-oos),
    12px 0 var(--advsi-color-oos), 15px 0 var(--advsi-color-oos),
    0 3px var(--advsi-color-oos), 3px 3px var(--advsi-color-oos),
    6px 3px var(--advsi-color-oos), 9px 3px var(--advsi-color-oos),
    12px 3px var(--advsi-color-oos), 15px 3px var(--advsi-color-oos),
    18px 3px var(--advsi-color-oos), 0 6px var(--advsi-color-oos),
    3px 6px var(--advsi-color-oos), 6px 6px var(--advsi-color-oos),
    9px 6px var(--advsi-color-oos), 12px 6px var(--advsi-color-oos),
    15px 6px var(--advsi-color-oos), 18px 6px var(--advsi-color-oos),
    3px 9px var(--advsi-color-oos), 6px 9px var(--advsi-color-oos),
    9px 9px var(--advsi-color-oos), 12px 9px var(--advsi-color-oos),
    15px 9px var(--advsi-color-oos), 6px 12px var(--advsi-color-oos),
    9px 12px var(--advsi-color-oos), 12px 12px var(--advsi-color-oos),
    9px 15px var(--advsi-color-oos);
}

/** Signal design */

.si-signal .si-outer {
  width: 35px;
  margin-left: auto;
  margin-right: auto;
}

.si-signal .si-outer .si-inner {
  font-size: 0;
  line-height: 0;
  height: 20px;
}

.si-signal .si-outer .si-inner > span {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-bg);
  display: inline-block;
  margin: 0 1px;
  width: 5px;
  height: 0;
}

.si-signal .si-outer .si-inner > .si-signal-1 {
  height: 20%;
}

.si-signal .si-outer .si-inner > .si-signal-2 {
  height: 40%;
}

.si-signal .si-outer .si-inner > .si-signal-3 {
  height: 60%;
}

.si-signal .si-outer .si-inner > .si-signal-4 {
  height: 80%;
}

.si-signal .si-outer .si-inner > .si-signal-5 {
  height: 100%;
}

.si-signal .si-outer .si-inner.si-lvl-1 > .si-signal-1 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-signal.si-colors .si-outer .si-inner.si-lvl-1 > .si-signal-1 {
  background-color: #e84c3d;
  background-color: var(--advsi-color-low-min);
}

.si-signal .si-outer .si-inner.si-lvl-2 > .si-signal-1,
.si-signal .si-outer .si-inner.si-lvl-2 > .si-signal-2 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-signal.si-colors .si-outer .si-inner.si-lvl-2 > .si-signal-1,
.si-signal.si-colors .si-outer .si-inner.si-lvl-2 > .si-signal-2 {
  background-color: #e67e22;
  background-color: var(--advsi-color-low);
}

.si-signal .si-outer .si-inner.si-lvl-3 > .si-signal-1,
.si-signal .si-outer .si-inner.si-lvl-3 > .si-signal-2,
.si-signal .si-outer .si-inner.si-lvl-3 > .si-signal-3 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-signal.si-colors .si-outer .si-inner.si-lvl-3 > .si-signal-1,
.si-signal.si-colors .si-outer .si-inner.si-lvl-3 > .si-signal-2,
.si-signal.si-colors .si-outer .si-inner.si-lvl-3 > .si-signal-3 {
  background-color: #f1c40f;
  background-color: var(--advsi-color-medium);
}

.si-signal .si-outer .si-inner.si-lvl-4 > .si-signal-1,
.si-signal .si-outer .si-inner.si-lvl-4 > .si-signal-2,
.si-signal .si-outer .si-inner.si-lvl-4 > .si-signal-3,
.si-signal .si-outer .si-inner.si-lvl-4 > .si-signal-4 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-signal.si-colors .si-outer .si-inner.si-lvl-4 > .si-signal-1,
.si-signal.si-colors .si-outer .si-inner.si-lvl-4 > .si-signal-2,
.si-signal.si-colors .si-outer .si-inner.si-lvl-4 > .si-signal-3,
.si-signal.si-colors .si-outer .si-inner.si-lvl-4 > .si-signal-4 {
  background-color: #96d940;
  background-color: var(--advsi-color-high);
}

.si-signal .si-outer .si-inner.si-lvl-5 > span {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-signal .si-outer .si-inner.si-lvl--1 > span {
  background-color: #3ca0d8;
  background-color: var(--advsi-color-preorder);
}

.si-signal.si-colors .si-outer .si-inner.si-lvl-0 > span {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-oos);
}

/** Battery design */

.si-battery .si-outer {
  width: 52px;
  margin-left: auto;
  margin-right: auto;
}

.si-battery .si-outer .si-inner {
  border-width: 3px;
  border-style: solid;
  border-color: #d5d5e5;
  border-color: var(--advsi-color-bg);
  padding: 3px;
  font-size: 0;
  line-height: 0;
  height: 20px;
  position: relative;
  margin-right: 4px;
}

.si-battery .si-outer .si-inner::before {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-bg);
  width: 3px;
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: -7px;
}

.si-battery .si-outer .si-inner > span {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-bg);
  display: inline-block;
  margin: 0 1px;
  width: 5px;
  height: 100%;
}

.si-battery .si-outer .si-inner.si-lvl-1 > .si-battery-1 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-battery.si-colors .si-outer .si-inner.si-lvl-1 > .si-battery-1 {
  background-color: #e84c3d;
  background-color: var(--advsi-color-low-min);
}

.si-battery .si-outer .si-inner.si-lvl-2 > .si-battery-1,
.si-battery .si-outer .si-inner.si-lvl-2 > .si-battery-2 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-battery.si-colors .si-outer .si-inner.si-lvl-2 > .si-battery-1,
.si-battery.si-colors .si-outer .si-inner.si-lvl-2 > .si-battery-2 {
  background-color: #e67e22;
  background-color: var(--advsi-color-low);
}

.si-battery .si-outer .si-inner.si-lvl-3 > .si-battery-1,
.si-battery .si-outer .si-inner.si-lvl-3 > .si-battery-2,
.si-battery .si-outer .si-inner.si-lvl-3 > .si-battery-3 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-battery.si-colors .si-outer .si-inner.si-lvl-3 > .si-battery-1,
.si-battery.si-colors .si-outer .si-inner.si-lvl-3 > .si-battery-2,
.si-battery.si-colors .si-outer .si-inner.si-lvl-3 > .si-battery-3 {
  background-color: #f1c40f;
  background-color: var(--advsi-color-medium);
}

.si-battery .si-outer .si-inner.si-lvl-4 > .si-battery-1,
.si-battery .si-outer .si-inner.si-lvl-4 > .si-battery-2,
.si-battery .si-outer .si-inner.si-lvl-4 > .si-battery-3,
.si-battery .si-outer .si-inner.si-lvl-4 > .si-battery-4 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-battery.si-colors .si-outer .si-inner.si-lvl-4 > .si-battery-1,
.si-battery.si-colors .si-outer .si-inner.si-lvl-4 > .si-battery-2,
.si-battery.si-colors .si-outer .si-inner.si-lvl-4 > .si-battery-3,
.si-battery.si-colors .si-outer .si-inner.si-lvl-4 > .si-battery-4 {
  background-color: #96d940;
  background-color: var(--advsi-color-high);
}

.si-battery .si-outer .si-inner.si-lvl-5 > span {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-battery .si-outer .si-inner.si-lvl--1 > span {
  background-color: #3ca0d8;
  background-color: var(--advsi-color-preorder);
}

.si-battery.si-colors .si-outer .si-inner.si-lvl-0 > span {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-oos);
}

/** Ring design */
/** Thanks: https://codepen.io/lvwentao/pen/mEqXQX */

.si-indicator.si-ring .si-outer {
  position: relative;
  width: 32px;
  height: 32px;
  margin-left: auto;
  margin-right: auto;
}

.si-ring .si-progress-part {
  position: absolute;
  left: 0;
  top: 0;
  border: 7px solid;
  border-radius: 50%;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
}

.si-ring .si-progress-track,
.si-ring .si-progress-cover {
  border-color: #d5d5e5;
  border-color: var(--advsi-color-bg);
}

.si-ring .si-progress-left {
  border-color: #5fd841;
  border-color: var(--advsi-color-high-max);
  clip: rect(0, 16px, 32px, 0);
}

.si-ring .si-progress-right {
  border-color: #5fd841;
  border-color: var(--advsi-color-high-max);
  clip: rect(0, 16px, 32px, 0);
  transform: rotate(180deg);
}

.si-ring .si-progress-cover {
  clip: rect(0, 16px, 32px, 0);
}

.si-ring .si-inner.si-lvl-0 .si-progress-left,
.si-ring .si-inner.si-lvl-0 .si-progress-right {
  display: none;
}

.si-ring .si-inner.si-lvl-1 .si-progress-left {
  -webkit-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -o-transform: rotate(72deg);
  transform: rotate(72deg);
}

.si-ring .si-inner.si-lvl-1 .si-progress-right {
  display: none;
}

.si-ring .si-inner.si-lvl-2 .si-progress-left {
  -webkit-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -o-transform: rotate(144deg);
  transform: rotate(144deg);
}

.si-ring .si-inner.si-lvl-2 .si-progress-right {
  display: none;
}

.si-ring .si-inner.si-lvl-3 .si-progress-left {
  -webkit-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  -o-transform: rotate(216deg);
  transform: rotate(216deg);
}

.si-ring .si-inner.si-lvl-3 .si-progress-cover {
  display: none;
}

.si-ring .si-inner.si-lvl-4 .si-progress-left {
  -webkit-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  -o-transform: rotate(288deg);
  transform: rotate(288deg);
}

.si-ring .si-inner.si-lvl-4 .si-progress-cover {
  display: none;
}

.si-ring .si-inner.si-lvl-0 .si-progress-left,
.si-ring .si-inner.si-lvl-0 .si-progress-right {
  /** Fix excess green outlines */
  border-color: #d5d5e5;
  border-color: var(--advsi-color-bg);
}

.si-ring.si-colors .si-inner.si-lvl-1 .si-progress-left,
.si-ring.si-colors .si-inner.si-lvl-1 .si-progress-right {
  border-color: #e84c3d;
  border-color: var(--advsi-color-low-min);
}

.si-ring .si-inner.si-lvl-1 .si-progress-left {
  /** Fix excess red outlines */
  clip: rect(0, 16px, 16px, 0);
}

.si-ring.si-colors .si-inner.si-lvl-2 .si-progress-left,
.si-ring.si-colors .si-inner.si-lvl-2 .si-progress-right {
  border-color: #e67e22;
  border-color: var(--advsi-color-low);
}

.si-ring.si-colors .si-inner.si-lvl-3 .si-progress-left,
.si-ring.si-colors .si-inner.si-lvl-3 .si-progress-right {
  border-color: #f1c40f;
  border-color: var(--advsi-color-medium);
}

.si-ring.si-colors .si-inner.si-lvl-4 .si-progress-left,
.si-ring.si-colors .si-inner.si-lvl-4 .si-progress-right {
  border-color: #96d940;
  border-color: var(--advsi-color-high);
}

.si-ring .si-inner.si-lvl-5 .si-progress-left,
.si-ring .si-inner.si-lvl-5 .si-progress-right {
  display: none;
}

.si-ring .si-inner.si-lvl-5 .si-progress-track,
.si-ring .si-inner.si-lvl-5 .si-progress-cover {
  border-color: #5fd841;
  border-color: var(--advsi-color-high-max);
}

.si-ring .si-inner.si-lvl--1 .si-progress-left,
.si-ring .si-inner.si-lvl--1 .si-progress-right {
  display: none;
}

.si-ring .si-inner.si-lvl--1 .si-progress-track,
.si-ring .si-inner.si-lvl--1 .si-progress-cover {
  border-color: #3ca0d8;
  border-color: var(--advsi-color-preorder);
}

.si-ring.si-colors .si-inner.si-lvl-0 .si-progress-track,
.si-ring.si-colors .si-inner.si-lvl-0 .si-progress-cover {
  border-color: #d5d5e5;
  border-color: var(--advsi-color-oos);
}

/** Pie design */
/** Thanks: https://codepen.io/lvwentao/pen/mEqXQX */

.si-indicator.si-pie .si-outer {
  width: 32px;
  height: 32px;
  margin-left: auto;
  margin-right: auto;
}

.si-pie .si-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #d5d5e5;
  background-color: var(--advsi-color-bg);

  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(50%, transparent),
    color-stop(0, #5fd841)
  );
  background-image: -webkit-linear-gradient(left, transparent 50%, #5fd841 0);
  background-image: -o-linear-gradient(left, transparent 50%, #5fd841 0);
  background-image: linear-gradient(to right, transparent 50%, #5fd841 0);

  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(50%, transparent),
    color-stop(0, var(--advsi-color-high-max))
  );
  background-image: -webkit-linear-gradient(
    left,
    transparent 50%,
    var(--advsi-color-high-max) 0
  );
  background-image: -o-linear-gradient(
    left,
    transparent 50%,
    var(--advsi-color-high-max) 0
  );
  background-image: linear-gradient(
    to right,
    transparent 50%,
    var(--advsi-color-high-max) 0
  );
}

.si-pie .si-inner::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
}

.si-pie .si-inner.si-lvl-0 {
  /** Fix excess green outlines */
  background-image: none;
}

.si-pie .si-inner.si-lvl-1::before {
  -webkit-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -o-transform: rotate(72deg);
  transform: rotate(72deg);
}

.si-pie.si-colors .si-inner.si-lvl-1 {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(50%, transparent),
    color-stop(0, #e84c3d)
  );
  background-image: -webkit-linear-gradient(left, transparent 50%, #e84c3d 0);
  background-image: -o-linear-gradient(left, transparent 50%, #e84c3d 0);
  background-image: linear-gradient(to right, transparent 50%, #e84c3d 0);

  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(50%, transparent),
    color-stop(0, var(--advsi-color-low-min))
  );
  background-image: -webkit-linear-gradient(
    left,
    transparent 50%,
    var(--advsi-color-low-min) 0
  );
  background-image: -o-linear-gradient(
    left,
    transparent 50%,
    var(--advsi-color-low-min) 0
  );
  background-image: linear-gradient(
    to right,
    transparent 50%,
    var(--advsi-color-low-min) 0
  );
}

.si-pie .si-inner.si-lvl-2::before {
  -webkit-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -o-transform: rotate(144deg);
  transform: rotate(144deg);
}

.si-pie.si-colors .si-inner.si-lvl-2 {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(50%, transparent),
    color-stop(0, #e67e22)
  );
  background-image: -webkit-linear-gradient(left, transparent 50%, #e67e22 0);
  background-image: -o-linear-gradient(left, transparent 50%, #e67e22 0);
  background-image: linear-gradient(to right, transparent 50%, #e67e22 0);

  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(50%, transparent),
    color-stop(0, var(--advsi-color-low))
  );
  background-image: -webkit-linear-gradient(
    left,
    transparent 50%,
    var(--advsi-color-low) 0
  );
  background-image: -o-linear-gradient(
    left,
    transparent 50%,
    var(--advsi-color-low) 0
  );
  background-image: linear-gradient(
    to right,
    transparent 50%,
    var(--advsi-color-low) 0
  );
}

.si-pie .si-inner.si-lvl-3::before {
  -webkit-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  -o-transform: rotate(36deg);
  transform: rotate(36deg);
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-pie.si-colors .si-inner.si-lvl-3::before {
  background-color: #f1c40f;
  background-color: var(--advsi-color-medium);
}

.si-pie.si-colors .si-inner.si-lvl-3 {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(50%, transparent),
    color-stop(0, #f1c40f)
  );
  background-image: -webkit-linear-gradient(left, transparent 50%, #f1c40f 0);
  background-image: -o-linear-gradient(left, transparent 50%, #f1c40f 0);
  background-image: linear-gradient(to right, transparent 50%, #f1c40f 0);

  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(50%, transparent),
    color-stop(0, var(--advsi-color-medium))
  );
  background-image: -webkit-linear-gradient(
    left,
    transparent 50%,
    var(--advsi-color-medium) 0
  );
  background-image: -o-linear-gradient(
    left,
    transparent 50%,
    var(--advsi-color-medium) 0
  );
  background-image: linear-gradient(
    to right,
    transparent 50%,
    var(--advsi-color-medium) 0
  );
}

.si-pie .si-inner.si-lvl-4::before {
  -webkit-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  transform: rotate(108deg);
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
}

.si-pie.si-colors .si-inner.si-lvl-4::before {
  background-color: #96d940;
  background-color: var(--advsi-color-high);
}

.si-pie.si-colors .si-inner.si-lvl-4 {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(50%, transparent),
    color-stop(0, #96d940)
  );
  background-image: -webkit-linear-gradient(left, transparent 50%, #96d940 0);
  background-image: -o-linear-gradient(left, transparent 50%, #96d940 0);
  background-image: linear-gradient(to right, transparent 50%, #96d940 0);

  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(50%, transparent),
    color-stop(0, var(--advsi-color-high))
  );
  background-image: -webkit-linear-gradient(
    left,
    transparent 50%,
    var(--advsi-color-high) 0
  );
  background-image: -o-linear-gradient(
    left,
    transparent 50%,
    var(--advsi-color-high) 0
  );
  background-image: linear-gradient(
    to right,
    transparent 50%,
    var(--advsi-color-high) 0
  );
}

.si-pie .si-inner.si-lvl-5 {
  background-color: #5fd841;
  background-color: var(--advsi-color-high-max);
  background-image: none;
}

.si-pie .si-inner.si-lvl-5::before {
  display: none;
}

.si-pie .si-inner.si-lvl--1 {
  background-color: #3ca0d8;
  background-color: var(--advsi-color-preorder);
}

.si-pie.si-colors .si-inner.si-lvl-0 {
  background-color: #d5d5e5;
  background-color: var(--advsi-color-oos);
}

.si-pie .si-inner.si-lvl--1,
.si-pie.si-colors .si-inner.si-lvl-0 {
  background-image: none;
}

.si-pie .si-inner.si-lvl--1::before,
.si-pie.si-colors .si-inner.si-lvl-0::before {
  display: none;
}