/* ------------------- Default Style ------------------------- */

.gauge-container {
    width: auto;
    height: auto;
    display: block;
    /* float: left; */
    padding: 10px;
    overflow: hidden;
    max-width: 200px;
    align-self: center;
    width: 100%;
}

    .gauge-container.one > .gauge > .dial {
        stroke: #334455;
        stroke-width: 2;
    }

    .gauge-container.one > .gauge > .value {
        stroke: rgb(47, 227, 255);
        stroke-width: 2;
    }

    .gauge-container.one > .gauge > .value-text {
        fill: rgb(47, 227, 255);
        font-family: sans, 'sans-serif';
        font-weight: bold;
        font-size: 0.6em;
    }

    /* ------------------- Alternate Style ------------------------- */

    .gauge-container.two {
        height: auto;
    }

        .gauge-container.two > .gauge > .dial {
            stroke: #334455;
            stroke-width: 10;
        }

        .gauge-container.two > .gauge > .value {
            /*stroke: orange;*/
            stroke-dasharray: none;
            stroke-width: 5;
        }

        .gauge-container.two > .gauge > .value {
            /*fill: orange;*/
        }


    /* ------------------- Alternate Style 2 ------------------------- */

    .gauge-container.three {
    }

        .gauge-container.three > .gauge > .dial {
            stroke: #334455;
            stroke-width: 2;
            /*stroke-dasharray: 125, 20;*/
        }

        .gauge-container.three > .gauge > .value {
            stroke: #C9DE3C;
            stroke-width: 5;
            /*stroke-dasharray: 125, 20;*/
        }

        .gauge-container.three > .gauge > .value-text {
            fill: #C9DE3C;
        }


    /* ------------------- Alternate Style 2 ------------------------- */

    .gauge-container.four > .gauge > .dial {
        stroke: #334455;
        fill: "#334455";
        stroke-width: 5;
    }

    .gauge-container.four > .gauge > .value {
        stroke: #BE80FF;
        stroke-dasharray: none;
        stroke-width: 5;
    }

    .gauge-container.four > .gauge > .value-text {
        fill: #BE80FF;
    }

    .gauge-container.four .text-container {
        transform: translate3d(-13%, -11%, 0)
    }



    .gauge-container.five .text-container {
        transform: translate3d(0, 7%, 0);
    }

    .gauge-container.five > .gauge > .dial {
        stroke: #334455;
        fill: "#334455";
        stroke-width: 5;
    }

    .gauge-container.five > .gauge > .value {
        stroke: #F8774B;
        stroke-dasharray: none;
        stroke-width: 5;
    }

    .gauge-container.five > .gauge > .value-text {
        fill: #F8774B;
        font-size: 0.7em;
    }



    .gauge-container.six > .gauge > .dial {
        stroke: #334455;
        fill: "#334455";
        stroke-dasharray: 110 10;
        stroke-width: 5;
    }

    .gauge-container.six > .gauge > .value {
        stroke: #FF6DAF;
        stroke-dasharray: 10 1;
        stroke-width: 5.2;
    }

    .gauge-container.six > .gauge > .value-text {
        fill: #FF6DAF;
        font-size: 0.7em;
    }