html{
	scroll-behavior: smooth;
}
body{
	background-color: #eee;
	margin: 0;
	padding: 0;

  /*font-size: 20px*/
}
.number{
  font-weight: 700
}
.container.border{
  border: 3px solid #eee !important;
  /*background-color: #eee;*/

}
.names{
  line-height: 3;
}
.flip-card {
  background-color:transparent;
  width: 100%;
  height: calc(1.6em + 1.75rem + 175px);
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  /*width: 100%;*/
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  /*background-color: white;  */
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: white;
  color: black;
  transform: rotateY(180deg);
}

.flex-wrapper {
  display: block;
  flex-flow: row nowrap;
}

.single-chart {

  width: 100%;
  /*height: calc(0.8em + 0.875rem + 82.5px);*/
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  /*margin: 2px auto;*/
  padding: 10px auto;
  max-width: 100%;
  max-height: calc(0.8em + 0.75rem + 65.5px);
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.red .circle {
  stroke: #dc3545;
}

.circular-chart.green .circle {
  stroke: #28a745;
}

.circular-chart.worning .circle {
  stroke: #ffc107;
}

.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

.per{
  font-size: 20px!important;
}
/*var today = new Date();*/
/*var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();*/
.flip{
  position: absolute;
  border-radius: 50%;

}

.valid-tooltip{

  top: calc(0.8em + 1.75rem + 62.5px);
  left:38%;
  width: calc(100% - 76%);
  z-index: 5;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top:0rem;
  /*border-radius:0% 50% ;*/
}
.machineName{
  font-size: 14px;
}