<style type="text/css">

/* start: */
/* https://codepen.io/noleli/pen/zYNvEwJ */

:root {
  --deg: 10deg;
  --transtime: 1s;
  --needlecolor: #444444;
  --bordercolor: #555555;
}

.div-2 {
    /*border: 10px solid var(--bordercolor);
    box-shadow: inset 3px 5px 7px 8px rgba(0, 0, 0, .9);*/
    width: 250px;
    height: 115px;
    position: relative;
    overflow: hidden;
    	/**/
	  border-style: inset;
	  border-color:#606060;
	  border-bottom-color:#B0B0B0;
	  border-width:5px;
}

.div-2::before {
    content: "";
    /*content: attr(level_info);*/
    /*place-content: end;*/
    white-space: pre;
    color:#FFB90E; font-size: 12px; font-family: Lucida Console, Monaco, monospace;
    position: absolute;
    width: 100%;
    height: 100%;
	  bottom: 0px;
	  left: calc(0% - 0px);
	  background-image: url("Smeter_gray_light_warm.jpg");
    /*background-image: url("Smeter_dark.jpg");*/
}

.div-2::after {
    content: "";
    bottom: 0px;
    left: calc(47% + 0px);
    position: absolute;
    width: 1.5px;
	  top: 0px;
    /* filter: drop-shadow(2px -2px 4px rgba(0, 0, 0, .6));  /* light S meter */
    filter: drop-shadow(2px -2px 4px rgba(0, 0, 0, .6));  /* dark S meter */
    border-top: 30px solid transparent;
	  /* set color of the needle and rotation point*/
	  border-bottom: 180px solid var(--needlecolor);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    /*transform: rotate(-30deg);*/
    transform-origin: center bottom;
	  transition: var(--transtime) ease-out;
	  transform: rotate(var(--deg));
	/*animation: metermove 3s ease-out infinite;*/
}

/* overlapping elements*/
.container {
  position: relative;
}

.Smeter-text {
    position: absolute;
    left: 5px;
    bottom: 8px;
    background-color: transparent;
    /*color: #DDCC88; /* dark S meter */
    color: #444444; /* light S meter */
    width:250px;
    height:20px;
    font-size: 16px;
    font-family: Lucida Console, Monaco, monospace;
}


</style>

