.magical-charts-widget {
  width: 100%;
}

/* Donut Chart */

.magical-donut-chart-widget {
  width: 100%;
}

.magical-donut-chart__title {
  margin: 0 0 25px;
  color: #777777;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}


.magical-donut-chart {
  display: flex;
  align-items: center;
  gap: 72px;
}

.magical-donut-chart__svg {
  display: block;
  width: 230px;
  height: 180px;
  min-width: 1px;
  min-height: 1px;
  overflow: visible;
  flex: 0 0 auto;
}

.magical-donut-chart__segment {
  fill-opacity: 1;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.magical-donut-chart__segment:hover {
  opacity: 0.78;
}

.magical-donut-chart__segment.is-animated {
  animation: magicalDonutChartFadeIn 0.35s ease both;
}

.magical-donut-chart__overlay {
  pointer-events: none;
}

.magical-donut-chart__legend {
  min-width: 340px;
}

.magical-donut-chart__legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.2;
}

.magical-donut-chart__legend-color {
  width: 13px;
  height: 13px;
  display: block;
}

.magical-donut-chart__legend-label {
  color: #333333;
}

.magical-donut-chart__legend-value {
  color: #9f4f58;
  font-weight: 700;
  text-align: right;
  min-width: 64px;
}

@keyframes magicalDonutChartFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Semi Gauge Chart */

.magical-semi-gauge-chart-widget {
  width: 100%;
}

.magical-semi-gauge-chart {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
}

.magical-semi-gauge-chart__title {
  width: 100%;
  margin: 0 0 10px;
  color: #777777;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.magical-semi-gauge-chart__svg {
  display: block;
  width: auto;
  height: auto;
  min-width: 1px;
  min-height: 1px;
  overflow: visible;
}

.magical-semi-gauge-chart__track,
.magical-semi-gauge-chart__progress {
  fill: none;
  stroke-linecap: butt;
}

.magical-semi-gauge-chart__value {
  fill: #8d3f45;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  dominant-baseline: middle;
}

.magical-semi-gauge-chart__value-symbol {
  font-size: 0.62em;
  baseline-shift: -0.05em;
}

.magical-semi-gauge-chart__marker-line {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 1.5 2;
  stroke-linecap: round;
}

.magical-semi-gauge-chart__marker-arrow {
  stroke: none;
}

@media (max-width: 720px) {
  .magical-donut-chart {
    align-items: flex-start;
    flex-direction: column;
    gap: 28px;
  }

  .magical-donut-chart__svg {
    width: 180px;
  }

  .magical-donut-chart__legend {
    width: 100%;
    min-width: 0;
  }
}


/* Horizontal Bars Chart */

.magical-horizontal-bars-chart-widget {
  width: 100%;
}

.magical-horizontal-bars-chart {
  display: block;
  width: 100%;
}

.magical-horizontal-bars-chart__title {
  margin: 0 0 25px;
  color: #777777;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.magical-horizontal-bars-chart__items {
  display: flex;
  flex-direction: column;
  gap: var(--magical-bars-item-gap, 12px);
}

.magical-horizontal-bars-chart__item {
  min-width: 0;
}

.magical-horizontal-bars-chart__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.2;
}

.magical-horizontal-bars-chart__label {
  color: #333333;
  font-weight: 700;
}

.magical-horizontal-bars-chart__value {
  color: #9f4f58;
  font-weight: 700;
  white-space: nowrap;
}

.magical-horizontal-bars-chart__bar-track {
  position: relative;
  width: 100%;
  height: var(--magical-bars-height, 21px);
  background: transparent;
}

.magical-horizontal-bars-chart__bar {
  display: block;
  height: 100%;
  min-width: 1px;
  background: #8f8a82;
}

.magical-horizontal-bars-chart--stacked .magical-horizontal-bars-chart__bar-track {
  width: var(--magical-bars-width, 230px);
}

.magical-horizontal-bars-chart--inline {
  --magical-bars-label-x: 150px;
  --magical-bars-value-x: 225px;
  --magical-bars-inline-row-width: 230px;
}

.magical-horizontal-bars-chart--inline .magical-horizontal-bars-chart__item {
  position: relative;
}

.magical-horizontal-bars-chart__overlay-row {
  position: relative;
  width: var(--magical-bars-inline-row-width, 230px);
  height: var(--magical-bars-height, 21px);
  overflow: visible;
}

.magical-horizontal-bars-chart__bar-overlay {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  height: 100%;
  min-width: 1px;
  overflow: hidden;
}

.magical-horizontal-bars-chart__text {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  height: 100%;
  font-size: 12px;
  line-height: var(--magical-bars-height, 21px);
  white-space: nowrap;
  pointer-events: none;
}

.magical-horizontal-bars-chart__text-base {
  z-index: 1;
}

.magical-horizontal-bars-chart__text-in-bar {
  z-index: 3;
  color: #ffffff;
}

.magical-horizontal-bars-chart__text-in-bar .magical-horizontal-bars-chart__label,
.magical-horizontal-bars-chart__text-in-bar .magical-horizontal-bars-chart__value {
  color: inherit;
}


.magical-horizontal-bars-chart__text .magical-horizontal-bars-chart__label,
.magical-horizontal-bars-chart__text .magical-horizontal-bars-chart__value {
  position: absolute;
  top: 0;
  line-height: inherit;
}

.magical-horizontal-bars-chart--inline .magical-horizontal-bars-chart__label {
  left: var(--magical-bars-label-x);
  min-width: 70px;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.magical-horizontal-bars-chart--inline .magical-horizontal-bars-chart__value {
  left: var(--magical-bars-value-x);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.magical-horizontal-bars-chart--inline .magical-horizontal-bars-chart__label-base,
.magical-horizontal-bars-chart--inline .magical-horizontal-bars-chart__label-in-bar {
  left: var(--magical-bars-label-x);
}

.magical-horizontal-bars-chart--inline .magical-horizontal-bars-chart__value-base,
.magical-horizontal-bars-chart--inline .magical-horizontal-bars-chart__value-in-bar {
  left: var(--magical-bars-value-x);
}



/* Segmented Thermometer Chart */

.magical-segmented-thermometer-chart-widget {
  width: 100%;
}

.magical-segmented-thermometer-chart {
  display: block;
  width: 100%;
  --magical-thermo-value-col: 54px;
  --magical-thermo-arrow-col: 10px;
  --magical-thermo-axis-width: 3px;
  --magical-thermo-axis-gap: 9px;
  --magical-thermo-marker-axis-gap: 0px;
  --magical-thermo-marker-y-offset: 0px;
}

.magical-segmented-thermometer-chart__title {
  margin: 0 0 25px;
  color: #777777;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.magical-segmented-thermometer-chart__items {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  overflow: visible;
}

.magical-segmented-thermometer-chart__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(var(--magical-thermo-value-col) + var(--magical-thermo-arrow-col) + var(--magical-thermo-marker-axis-gap) + var(--magical-thermo-axis-width) + var(--magical-thermo-axis-gap) + 31px);
  min-width: calc(var(--magical-thermo-value-col) + var(--magical-thermo-arrow-col) + var(--magical-thermo-marker-axis-gap) + var(--magical-thermo-axis-width) + var(--magical-thermo-axis-gap) + 31px);
  overflow: visible;
}

.magical-segmented-thermometer-chart__label-row {
  padding-left: calc(var(--magical-thermo-value-col) + var(--magical-thermo-arrow-col) + var(--magical-thermo-marker-axis-gap) + var(--magical-thermo-axis-width) + var(--magical-thermo-axis-gap));
  margin: 0 0 10px;
  overflow: visible;
}

.magical-segmented-thermometer-chart__label {
  color: #333333;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.magical-segmented-thermometer-chart__body {
  position: relative;
  display: grid;
  grid-template-columns: var(--magical-thermo-value-col) var(--magical-thermo-arrow-col) var(--magical-thermo-axis-width) auto;
  column-gap: 0;
  align-items: stretch;
  overflow: visible;
}

.magical-segmented-thermometer-chart__axis {
  grid-column: 3;
  width: var(--magical-thermo-axis-width);
  min-height: 100%;
  background-color: #8f8a82;
}

.magical-segmented-thermometer-chart__scale {
  grid-column: 4;
  position: relative;
  width: 31px;
  margin-left: var(--magical-thermo-axis-gap);
  overflow: visible;
}

.magical-segmented-thermometer-chart__levels {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.magical-segmented-thermometer-chart__level {
  display: block;
  width: 31px;
  height: 2px;
  background-color: #d8d5d0;
}

.magical-segmented-thermometer-chart__marker {
  position: absolute;
  left: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--magical-thermo-value-col) var(--magical-thermo-arrow-col);
  column-gap: var(--magical-thermo-marker-axis-gap);
  align-items: center;
  height: 0;
  transform: translateY(calc(50% + var(--magical-thermo-marker-y-offset)));
  pointer-events: none;
}

.magical-segmented-thermometer-chart__value {
  color: #9f4f58;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.magical-segmented-thermometer-chart__arrow {
  justify-self: end;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid #9f4f58;
}

@media (max-width: 720px) {
  .magical-segmented-thermometer-chart__items {
    flex-wrap: wrap;
    row-gap: 28px;
  }
}


/* Proportional Circles Chart */
.magical-proportional-circles-chart-widget{width:100%}.magical-proportional-circles-chart{display:block;width:100%;--magical-circles-max-size:60px;--magical-circles-min-size:8px;--magical-circles-fixed-drop:10px}.magical-proportional-circles-chart__title{margin:0 0 25px;color:#777;font-size:14px;font-weight:700;line-height:1.25;text-align:left}.magical-proportional-circles-chart__plot{position:relative;width:100%;overflow:visible;display:flex;justify-content:center}.magical-proportional-circles-chart__axis-line{position:absolute;top:calc(var(--magical-circles-max-size)/2);left:0;right:0;z-index:1;height:1px;background-color:#bdb9b0;transform:translateY(-50%)}.magical-proportional-circles-chart__items{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:flex-start;gap:0;overflow:visible}.magical-proportional-circles-chart__item{position:relative;display:flex;flex-direction:column;align-items:center;width:72px;min-width:0;overflow:visible}.magical-proportional-circles-chart__axis-row{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--magical-circles-max-size)}.magical-proportional-circles-chart__circle{display:block;width:max(var(--magical-circles-min-size),calc((var(--magical-circles-max-size) * var(--magical-circle-max-factor)) - (var(--magical-circles-fixed-drop) * var(--magical-circle-drop-factor))));height:max(var(--magical-circles-min-size),calc((var(--magical-circles-max-size) * var(--magical-circle-max-factor)) - (var(--magical-circles-fixed-drop) * var(--magical-circle-drop-factor))));border-radius:999px;background-color:var(--magical-circle-color)}.magical-proportional-circles-chart__label-row{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:14px;text-align:center}.magical-proportional-circles-chart__label{display:block;width:72px;max-width:100%;box-sizing:border-box;color:#333;font-size:10px;font-weight:400;line-height:1.15;text-align:center;white-space:normal;overflow-wrap:break-word;word-break:normal}.magical-proportional-circles-chart__value{display:block;margin-top:4px;color:#9f4f58;font-size:10px;font-weight:700;line-height:1.15;text-align:center;white-space:nowrap}

@media (max-width:720px){
  .magical-proportional-circles-chart__plot{
    overflow:visible;
    padding-bottom:0;
  }

  .magical-proportional-circles-chart__axis-line{
    top:0;
    bottom:0;
    left:calc(var(--magical-circles-max-size) / 2);
    right:auto;
    width:1px;
    height:auto!important;
    transform:none;
  }

  .magical-proportional-circles-chart__items{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px!important;
    min-width:0;
    overflow:visible;
  }

  .magical-proportional-circles-chart__item{
    display:grid;
    grid-template-columns:var(--magical-circles-max-size) minmax(0,1fr);
    column-gap:22px;
    align-items:center;
    width:100%!important;
    min-width:0;
  }

  .magical-proportional-circles-chart__axis-row{
    width:var(--magical-circles-max-size);
    height:var(--magical-circles-max-size)!important;
    justify-content:center;
  }

  .magical-proportional-circles-chart__label-row{
    align-items:flex-start;
    width:auto;
    margin-top:0!important;
    text-align:left;
  }

  .magical-proportional-circles-chart__label{
    width:auto!important;
    max-width:180px;
    text-align:left;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
    line-height:1.15;
  }

  .magical-proportional-circles-chart__value{
    text-align:left;
    line-height:1.15;
  }
}
@media (max-width:720px){.magical-proportional-circles-chart__plot{display:flex;justify-content:center;overflow:visible;padding-bottom:0}.magical-proportional-circles-chart__axis-line{display:none}.magical-proportional-circles-chart__items{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px!important;width:max-content;min-width:0;margin:0 auto;overflow:visible}.magical-proportional-circles-chart__items::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--magical-circles-max-size)/2);z-index:1;width:1px;background-color:#bdb9b0;transform:translateX(-50%);pointer-events:none}.magical-proportional-circles-chart__item{position:relative;z-index:2;display:grid;grid-template-columns:var(--magical-circles-max-size) minmax(0,1fr);column-gap:22px;align-items:center;width:100%!important;min-width:0}.magical-proportional-circles-chart__axis-row{width:var(--magical-circles-max-size);height:var(--magical-circles-max-size)!important;justify-content:center}.magical-proportional-circles-chart__label-row{align-items:flex-start;width:auto;margin-top:0!important;text-align:left}.magical-proportional-circles-chart__label{width:auto!important;max-width:180px;text-align:left;white-space:normal;overflow-wrap:break-word;word-break:normal;line-height:1.15}.magical-proportional-circles-chart__value{text-align:left;line-height:1.15}}