.graph-ui-3 {
    position: absolute;
    top: 20%;
    right: -20px;
    width: 35%;
}
.graph-ui-3 .big-values {
    width: 100%;
    padding: 3vh 0 3vh 2%;
    /* background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.2)); */
    border: none;
    border-radius: 20px;
    margin: 0 auto;
}
.graph-3-avg {
    color: #fff;
    margin: -2vw 0 1.5vw;
    font-size: 0.7vw;
}

/* new legend style (2021-09-22) */

.g3-group {
    overflow: hidden;
}
.g3-group > .g3-group-value {
    font-size: 0.7em;
    margin-top: 0.3em;
    float: right;
    font-weight: normal;
}

.graph-ui-3 .line {
    margin-bottom: 0;
}

/* end new legend style */


.g3bigvalue {
    position: absolute;
    width: 6%;
    text-align: center;
    margin: -1.3vw 0 0 -2.7vw;
    font-size: 1vw;
}
.line-container {
    background: #464857;
    margin-bottom: 0px;
}

.graph-ui-3 .value .hdr {
    color: #fff;
    font-weight: 100;
    font-size: 1vw;
    margin-bottom: 10px;
}
.graph-ui-3 .value {
    display: inline-block;
    width: 40%;
    margin: 0 3% 2%;
    vertical-align: top;
}
.val-1.g3bigvalue {
    background-clip: text;
    /* text-transform: uppercase; */
    background: -webkit-gradient(linear, left top, right top, from(#30CFD0), to(#330867));
    background: linear-gradient(to right, #4C4CE2 0%, #FE6EEA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.val-2.g3bigvalue {
    background-clip: text;
    /* text-transform: uppercase; */
    background: -webkit-gradient(linear, left top, right top, from(#30CFD0), to(#330867));
    background: linear-gradient(to right, #FF4996 0%, #FF9C58 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.val-3.g3bigvalue {
    background-clip: text;
    /* text-transform: uppercase; */
    background: -webkit-gradient(linear, left top, right top, from(#30CFD0), to(#330867));
    background: linear-gradient(to right, #009EFF 0%, #2ACC6C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.val-4.g3bigvalue {
    background-clip: text;
    /* text-transform: uppercase; */
    background: -webkit-gradient(linear, left top, right top, from(#30CFD0), to(#330867));
    background: linear-gradient(to right, #FF4996 0%, #FF9C58 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.val-5.g3bigvalue {
    background-clip: text;
    /* text-transform: uppercase; */
    background: -webkit-gradient(linear, left top, right top, from(#30CFD0), to(#330867));
    background: linear-gradient(to right, #009EFF 0%, #2ACC6C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.val-6.g3bigvalue {
    background-clip: text;
    /* text-transform: uppercase; */
    background: -webkit-gradient(linear, left top, right top, from(#30CFD0), to(#330867));
    background: linear-gradient(to right, #FF4996 0%, #FF9C58 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.val-7.g3bigvalue {
    background-clip: text;
    /* text-transform: uppercase; */
    background: -webkit-gradient(linear, left top, right top, from(#30CFD0), to(#330867));
    background: linear-gradient(to right, #009EFF 0%, #2ACC6C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.g3value {
    position: absolute;
    display: none;
    width: 6%;
    text-align: center;
    margin: -2.2vw 0 0 -2.9vw;
    font-size: 2vw;
    color: #fff;
}

@media only screen and (max-width: 500px) {
    .g3bigvalue {
        font-size: 12px;
    }
    .graph-ui-3 .value .hdr {
        font-size: 12px;
    }
    .graph-3-avg {
        font-size: 11px;
    }
    
}

@media only screen and (max-width: 700px) {
    .graph-ui-3 {
        top: 0;
        width: 30%;
        right:  0;
    }
    .g3bigvalue {
        font-size: 13px;
        width: 7em;
        margin-left: -3.5em;
    }
    .graph-ui-3 .value .hdr {
        font-size: 13px;
        font-weight: bold;
        margin: 0 0 0.25rem;
    }
    .graph-ui-3 .value {
        width: calc(100% - 1em);
    }
    .big-values .line-container {
        margin-bottom: 0.25rem;
    }
    .graph-3-avg {
        font-size: 12px;
        margin: 0 0 1rem;
    }
    .graph-ui-3 .line {
        margin-bottom: 0;
    }
}