/*****
 * LINECO Widget: Gauge Graph
 *
 * Note:
 *      Do not edit this directly; it comes from an external widget.
 *      Edit in the Widgets: Forms CSS file.
******/


/****
 * Gauge Graph v1.3.2
****/

.gauge-graph {
    max-width: 100%;
}

.gauge-graph-proper-container {
    overflow: hidden;
}

.gauge-graph-proper {
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: auto;
    padding-top: 100%;
}

.gauge-graph-proper::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    margin: -35% 0 0 -35%;
    background-color: white;
    border-radius: 100%;
}

.gauge-graph-ends {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* SIZE NOTE: Not perfect percentage. Needs adjusting on size change. */

.gauge-graph-ends::before,
.gauge-graph-ends::after {
    content: '';
    display: block;
    background-color: transparent;

    border: 18px solid white;  /* 18px is based on 15rem; js resizes now */
    border-color: transparent transparent white white;
    border-radius: 50%;

    position: absolute;
    top: 52%;               /* SIZE NOTE */
    left: -4%;              /* SIZE NOTE */

    width: 15%;             /* SIZE NOTE */
    height: 15%;            /* SIZE NOTE */

    rotate: -72deg;
}

.gauge-graph-ends::after {
    left: auto;
    right: -4%;             /* SIZE NOTE */
    rotate: -18deg;         /* SIZE NOTE */
}


/*
@media screen and ( max-width: 39.9375em ) {

    .gauge-graph.gauge-graph--mobile-linear {
    }

}
*/