/* jQuery Testosterone Range slider in the form of gauge style colors */
:root {
    --red: #f70000;
    --yellow: #e7e700;
    --green: #3abf00;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Apply above gradient to back bar of slider */
.back-bar {
    background: linear-gradient(to right, var(--red), var(--yellow), var(--green)) !important;
    height: 3rem !important;
    border-radius: 20px !important;
}

.pointer {
    background: var(--red) !important;
    height: 100% !important;
    margin-top: 5px !important;
    border: 2px solid white !important;
    border-radius: 0px !important;
    width: 10px !important;
}

.selected-bar {
    background: transparent !important;
}

.pointer-label {
    color: black !important;
    font-size: 15px !important;
    background: transparent !important;
    top: -30px !important;
    font-weight: 400 !important;
}


/* Gauge */

.wrapper {
    display: table;
    margin: 0 auto;
    padding: 35px 40px 40px;
}

.gauge {
    font-family: Arial, Helvetica, sans-serif;
    background: #e7e7e7;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    position: relative;
    overflow: hidden;
    /* safari fix */
    -webkit-transform-style: flat;
    -webkit-transform: translateZ(0px);
}

.gauge.min-scaled {
    transform: scale(0.5);
}

.gauge-center {
    content: attr(data-before);
    color: #fff;
    width: 60%;
    height: 60%;
    background: #15222e;
    border-radius: 100px 100px 0 0;
    position: absolute;
    box-shadow: 0 -13px 15px -10px rgba(0, 0, 0, 0.28);
    right: 21%;
    bottom: 0;
}

.gauge-center .counter {
    color: #fff;
    font-size: 1.5em;
    width: 100%;
    padding: 20px 0 0 0;
    text-align: center;
    float: left;
    -webkit-font-smoothing: antialiased;
}

.needle {
    width: 78px;
    height: 7px;
    background: #15222e;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 100%;
    border-top-right-radius: 5px;
    position: absolute;
    bottom: 4px;
    left: 20px;
    transform-origin: 100% 4px;
    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.38);
    transition: transform 0.8s;
    transition-timing-function: cubic-bezier(0.65, 1.95, 0.03, 0.32);
}

.slice-colors .st {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 200px;
}

.slice-colors .st.slice-item:nth-child(1) {
    background-color: var(--yellow);
    left: -100px;
    transform-origin: bottom right;
    transform: rotate(0deg);
}

.slice-colors .st.slice-item:nth-child(2) {
    background-color: var(--green);
    left: 54px;
    transform: rotate(-51deg);
}

.slice-colors .st.slice-item:nth-child(3) {
    background-color: var(--yellow);
    transform: rotate(33deg);
    transform-origin: bottom left;
    left: 100px;
}

.slice-colors .st.slice-item:nth-child(4) {
    background-color: var(--red);
    transform: rotate(55deg);
    transform-origin: bottom left;
    left: 100px;
}

.s-box {
    margin: 0 auto;
    width: 200px;
    text-align: center;
}

/* PSA */
.psa .slice-colors .st.slice-item:nth-child(2) {
    transform: rotate(263deg);
    left: 75px;
}

.psa .slice-colors .st.slice-item:nth-child(4) {
    transform: rotate(28deg);
}

/* Estrogen */
.estrogen .slice-colors .st.slice-item:nth-child(1) {
    background-color: var(--green);
}

.estrogen .slice-colors .st.slice-item:nth-child(3) {
    transform: rotate(15deg);
}

.estrogen .slice-colors .st.slice-item:nth-child(4) {
    transform: rotate(38deg);
}

/* BMI */
.bmi .slice-colors .st.slice-item:nth-child(2) {
    left: 69px;
    transform: rotate(-26deg);
}

.bmi .slice-colors .st.slice-item:nth-child(4) {
    transform: rotate(24deg);
}

/* A1C */

.a1c .slice-colors .st.slice-item:nth-child(1) {
    background-color: var(--green);
}

.a1c .slice-colors .st.slice-item:nth-child(3) {
    transform: rotate(-28deg);
}

.a1c .slice-colors .st.slice-item:nth-child(4) {
    transform: rotate(24deg);
}

/* Canvas */ 
canvas {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    height: 100vh;
    width: 100%;
    border: 1px solid #000;
    background-color: #c0c6cb;
    background-image: url('/img/human.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
}