@charset "utf-8";
/* CSS Document */
/* static bars*/
.levels {
/* inside meter css*/
  position: absolute;
  top:0px;
  left:0;
  height: 40px;
  width: 222px;
  background-color: #999;
  border-radius: 2px;
  display: flex;
  flex-direction: row;
  padding: 0 ;
  margin-top: 0px;
}
.level-1 {
  position: absolute; 
  vertical-align: text-bottom;
  top:0px;
  left: 0;
  width:220px;
  height:18px;
  margin: 0px 0 0 0 ;
  flex-grow: 1;
  z-index: 3;
  background-color: transparent;
  background-repeat: repeat-y;
  background-image:linear-gradient(to right, #666 3px, transparent 1px);
  background-size: 100% 4px;
  border-bottom:1px solid white;
}
.level-2 {
  position: absolute; 
  vertical-align: text-bottom;
  top:20px;
  left: 0;
  width:220px;
  height:20px;
  margin: 0px;
  flex-grow: 1;
  z-index: 3;
  background-color: transparent;
  background-repeat: repeat-y;
  background-image:linear-gradient(to right, #666 3px, transparent 1px);
  background-size: 100% 4px;
  border-top:1px solid white;
}
.level-1:before{
  width: 100%;
  height: 100%;
  content: ' ';
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2;
  margin-top: 3px;
  background-image:linear-gradient(to left, #333 1px, transparent 1px);
  background-repeat: repeat-y;
  background-size: 100% 4px; 
  background-color: transparent;
}
.level-2:before{
  width: 100%;
  height: 100%;
  content: ' ';
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2;
  margin-top: 3px;
  background-image:linear-gradient(to left, #333 1px, transparent 1px);
  background-repeat: repeat-y;
  background-size: 100% 4px; 
  background-color: transparent;
}
.level-1::after {
  width: 100%;
  height: 100%;
  content: ' ';
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  background-repeat: no-repeat;
  background-image:linear-gradient(to right, green 0%, yellow 80%, red 100%); /*top*/
  background-size: 100% 100%;
  clip-path: inset(0% 0 0 0); 
  -webkit-clip-path: inset(0% 0 0 0); 
  animation: level-animation 2000ms alternate infinite;
}
.level-2::after {
  width: 100%;
  height: 100%;
  content: ' ';
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  background-repeat: no-repeat;
  background-image:linear-gradient(to right, green 0%, yellow 80%, red 100%); /*top*/
  background-size: 100% 100%;
  clip-path: inset(0% 0 0 0); 
  -webkit-clip-path: inset(0% 0 0 0);
  animation: level-animation 2000ms alternate infinite;
}
@keyframes level-animation {
  0% { clip-path: inset(0 0% 0 0); -webkit-clip-path: inset(0 0% 0 0);  }
  50% { clip-path: inset(0 40% 0 0); -webkit-clip-path: inset(0 40% 0 0);  }
  100% { clip-path: inset(0 20% 0 0); -webkit-clip-path: inset(0 20% 0 0); }
}