<!-- start Simple Custom CSS and JS -->
<style type="text/css">
:root {
  --donut-size: 100%;
  --transition-speed: 0.3s;
  --bg-main: transparent;     /* pozadie „scény“ */
  --text-main: #fff;   /* hlavný text */
  --text-muted: rgb(255 255 255 / 80%);  /* sekundárny text */
  --hover: white;        /* hover */
}

/* hlavný wrapper – bez karty, nech to splýva s pozadím */
.chart-wrapper {
  width: 100%;
}

.chart-wrapper .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.chart-wrapper .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 10px 12px;
}

/* Legenda */

.chart-wrapper .legend {
    list-style: none;
    margin: 0;
	display: flex;
    flex-direction: column;
	padding-inline-start: 0;
	gap: 20px;
	max-width: 100%;
    width: 480px;
}

.chart-wrapper .legend-item {
  display: flex;
  align-items: flex-start;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition-speed), transform var(--transition-speed);
}

.chart-wrapper .legend-item:last-child {
  margin-bottom: 0;
}

.chart-wrapper .legend-item:hover,
.chart-wrapper .legend-item.is-active{

}

.chart-wrapper .legend-item.is-active .legend-label,
.chart-wrapper .legend-item.is-active .legend-value{
  color: var(--hover);
  font-weight: 600;
}

.chart-wrapper .legend-item.is-active .legend-value {
  color: var(--hover);
}

.chart-wrapper .legend-color {
  	width: 40px;
  	height: 12px;
  	border-radius: 999px;
  	margin: 14px 20px 0 0;
  	flex-shrink: 0;
}

.chart-wrapper .legend-item.is-active .legend-color{
	background: white!important;
}

.chart-wrapper .legend-text {
  	display: flex;
  	flex-direction: column;
	width: 100%;
	gap: 0px;
}

.chart-wrapper .legend-topline {
	display: flex;
  	align-items: baseline;
  	justify-content: space-between;
  	gap: 12px;
}

.chart-wrapper .legend-label, .chart-wrapper .legend-value {
    font-size: 28px;
    font-weight: 300;
    color: var(--text-main);
    font-family: var(--e-global-typography-primary-font-family);
	line-height: normal;
}

.chart-wrapper span.legend-value {
    white-space: nowrap;
}

.chart-wrapper .legend-extra {
    font-size: 17px;
    color: var(--text-muted);
    padding-right: 80px;
}

.chart-wrapper .legend-group-title {
    font-size: 28px;
	font-weight: 300;
    color: white;
    font-family: var(--e-global-typography-primary-font-family);
	padding-left: 60px;
}

/* Donut graf */

.donut-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 480px;
	max-width: 100%;
  height: auto;
	aspect-ratio: 1 / 1;
  margin: 0 auto;
}

svg.donut {
  width: 80%;
    height: auto;
    aspect-ratio: 1 / 1;
  transform: rotate(-90deg);
  overflow: visible;
}

.donut-bg {
  fill: none;
  stroke: white;
  stroke-width: 0; /* hrúbka vnútorného „tieňa“ */
	opacity: .1;
}

.donut-segment {
  fill: none;
  stroke-width: 50px; /* default – reálna hrúbka sa prepíše v JS */
  stroke-linecap: butt;
  transition: opacity var(--transition-speed), stroke var(--transition-speed), stroke-width var(--transition-speed);
  cursor: pointer;
}

/* stred grafu */

.donut-center {
  position: absolute;
  width: 45%;
  height: 45%;
  border-radius: 50%;
  background: transparent; /* rovnaké ako pozadie – vnútorný kruh */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
	border: 0px solid white;
	opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.donut-center.is-visible {
  opacity: 1;
  transform: scale(1);
}

.donut-center .center-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
	  font-size: 58px;
  font-weight: 600;
  color: white;
  line-height: 1;
	font-family: var(--e-global-typography-primary-font-family);
}

.donut-center .center-number {
  font-size: 70px;
  font-weight: 600;
  color: white;
  line-height: 1;
	font-family: var(--e-global-typography-primary-font-family);
}

.donut-center .center-percent {
  font-size: 36px;       /* menšie percento */
  font-weight: 600;
  color: white;
  line-height: 1.1;      /* jemné dorovnanie vertikálne */
	font-family: var(--e-global-typography-primary-font-family);
}

.donut-center .center-label {
  margin-top: 10px;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-main);
    opacity: 0.9;
}


@media (min-width:768px) and (max-width: 1400px){
	.sec-donut > .elementor-container{
		flex-wrap: wrap;
	}
	.sec-donut-col1, .sec-donut-col2{
		width: 100%!important;
	}
}

@media(max-width:767px){
	.chart-wrapper .col-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.chart-wrapper .legend-label, .chart-wrapper .legend-value {
		font-size: 24px;
	}
	.chart-wrapper .legend-color {
		width: 20px;
		height: 10px;
		margin: 12px 15px 0 0;
	}
	.chart-wrapper .legend-group-title{
		padding-left: 35px;
	}
	.chart-wrapper .legend{
		gap: 12px;
	}
	.donut-center .center-number{
		font-size: 50px;
	}
	.donut-center .center-percent{
		font-size: 25px;
	}
}

@media(min-width:768px){
	.chart-wrapper .legend {
    	padding-left: 60px;
	}
}</style>
<!-- end Simple Custom CSS and JS -->
