/**
 * Version: 0.2
 * Author: Otto Salminen - 2020
 * Github: https://github.com/rotvalli/css-gauge
 * License: MIT
 */
.gauge{position:relative;background:var(--gauge-bg);border:.05em solid #222;border-radius:50%;min-width:300px;min-height:300px;font-weight:700;font-size:34px}.gauge .ticks{position:absolute;width:100%;height:100%;top:0;left:0}.gauge .ticks .min{background:#000;position:relative;left:0;top:50%;width:100%;height:1%;margin-bottom:-1%;background:linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 4%,#000 4%,#000 15%,rgba(0,0,0,0) 15%);transform:rotate(-45deg)}.gauge .ticks .mid{background:#000;position:relative;left:0;top:50%;width:100%;height:1%;margin-bottom:-1%;background:linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 4%,#000 4%,#000 15%,rgba(0,0,0,0) 15%);transform:rotate(90deg)}.gauge .ticks .max{background:#000;position:relative;left:0;top:50%;width:100%;height:1%;margin-bottom:-1%;background:linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 4%,#000 4%,#000 15%,rgba(0,0,0,0) 15%);transform:rotate(225deg)}.gauge .ticks .tithe{transform:rotate(calc(27deg * var(--gauge-tithe-tick) - 45deg));background:#000;position:relative;left:0;top:50%;width:100%;height:1%;margin-bottom:-1%;background:linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 10%,#000 10%,#000 15%,rgba(0,0,0,0) 15%)}.gauge .tick-circle{position:absolute;top:15%;left:15%;width:calc(70% - .1em);height:calc(70% - .1em);border-left:.1em solid;border-top:.1em solid;border-right:.1em solid;border-bottom:.1em solid transparent;border-radius:50%}.gauge .needle{transform:rotate(calc(270deg * calc(var(--gauge-value,0deg)/ 100) - 45deg));background:#000;position:relative;left:0;top:49%;width:100%;height:4%;margin-bottom:-4%;background:linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 24%,#000 24%,#000 30%,rgba(0,0,0,0) 50%)}.gauge .needle .needle-head{position:relative;top:15%;left:22.5%;width:2.7%;height:70%;background-color:#000;transform:rotate(-45deg)}.gauge .labels{position:absolute;width:100%;height:100%}.gauge .labels .value-label{position:relative;top:75%;left:51%;width:10%;height:0}.gauge .labels .value-label::after{counter-reset:gauge-value var(--gauge-display-value);content:counter(gauge-value);text-align:right;float:right;width:3em}.guide-x,.guide-y{background-color:orange;visibility:visible;position:absolute;left:50%;top:0;width:1px;height:100%}.guide-y{left:0;top:50%;width:100%;height:1px}