﻿
.gauge-container {
    display: inline-block;
    position: relative;
    width: 70%;
    max-width: 235pt;
}

    .gauge-container .gauge {
        position: relative;
        display: block;
    }

        .gauge-container .gauge circle {
            stroke-width: 15;
        }

        .gauge-container .gauge .rail {
            fill: transparent;
        }

        .gauge-container .gauge .progress {
            fill: transparent;
            stroke-linecap: round;
        }

    .gauge-container .center {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 300;
    }

        .gauge-container .center.percentage {
            font-size: 2vw;
        }

        .gauge-container .center.icon {
            font-size: 3vw;
        }

        .gauge-container .center .percentSymbol {
            font-size: 0.8em;
        }

        .gauge-container .center .value {
            font-size: 50pt;
            font-weight: 700;
            color: black;
        }

    .gauge-container .rail {
        stroke: white;
    }

    .gauge-container .progress {
        stroke: #487383;
    }

    .gauge-container .percentage {
        color: #f5ca99;
    }
