.data-box {
	padding: 0.5rem;
	margin: 0.5rem;
	border: 2px solid #bdcad4;
	border-radius: 0.3rem;
}

.data-container > .row {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
	margin: 0.3rem;
	border: 1px solid #808080;
}

.data-title {
	font-size: 130%;
	background-color: #0099cc;
	color:#ffffff;
	text-align: center;
	padding: 0.5rem;
	border-radius: 0.5rem;
}

.data-label {
	font-weight:bold;
	color:#3c3c3c;
}

.data-container .data-value {
	font-weight:bold;
}

.energy-container > .row {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
	margin: 0.2rem;
	border: 1px solid #808080;
}

.energy-container span {
	line-height: 5rem;
}

.energy-container .data-value {
	font-weight:bold;
}

.panoramic-container {
}

.distribution-container {
	font-size:80%;
}

.cci-gauge {
	--size: 8rem;
	--cutout: 50%;
	--color: red;
	--background: white;
	width:var(--size);
	height:var(--size);
	border-radius:calc(var(--size) / 2);
	background:
	radial-gradient(
		var(--background) 0 var(--cutout),
		transparent var(--cutout) 100%),
	conic-gradient(from -135deg, 
		var(--color) calc(270deg*var(--value)),
		grey calc(270deg*var(--value)) 270deg, 
		transparent 270deg);
	text-align: center;
	line-height: var(--size);
}

.cci-gauge2 {
  width: 160px;
  height: 80px;
  display: inline-flex;
  justify-content: center;
  align-items: flex-end;

  font-size: 1.4rem;
  font-weight: bold;

  border-radius: 160px 160px 0 0;
  overflow: hidden;

  background:
    conic-gradient(
      from 180deg,
      #4caf50 0deg,
      #4caf50 calc((var(--value) / var(--max)) * 180deg),
      #e0e0e0 0deg
    );
}

.overflowy-hidden
{
	overflow-y: hidden !important;
}