:root {
    --thumb-size-healthmeter-1: 18px;
    --bar-height-healthmeter-1: 18px;
    --slider-border-1: 10px solid transparent;
}

/*@media (min-width: 1200px) {*/
    :root {
        --slider-fill-color-1: rgba(0,177,181,0.87);
        --slider-fill-color-2: rgba(0,177,181,0.87);
        --slider-background-1: grey;
        --thumb-size-1: 22px;
        --thumb-color-1: none;
        --bar-height-1: 22px;
        --slider-border-1: 10px solid transparent;
    }
/*}*/

.img-container-hm input[type='range'] {
    background-color: var(--slider-background-1);
    border-top: var(--slider-border-1);
    border-bottom: var(--slider-border-1);
    border-radius: 10px;
}


.img-container-hm  input[type='range'] {
    background-color: var(--slider-background-1);
    border-top: var(--slider-border-1);
    border-bottom: var(--slider-border-1);
    border-radius: 10px;
}

.img-container-hm input[type='range']::-webkit-slider-runnable-track {
    height: var(--bar-height);
    border-radius: 0;
    background: linear-gradient(90deg, var(--slider-fill-color-1), var(--slider-fill-color-2)) 0 100% no-repeat content-box;
}

.img-container-hm input[type='range']::-webkit-slider-thumb {
    width: 0 !important;
    height: 0 !important;
    /* round button */
    border-radius: 50%;
    transform: translateY( calc( var(--bar-height-1) - var(--thumb-size-1) / 2)) !important;
    /*background-color: var(--thumb-color);*/
    border: none;
}







.wrap-healthmeter-1 {
    /*float: left;*/
    position: relative;
    margin: 0 0.5em 0.5em;
    padding: 0.5em;
    height: 330px;
    /*width: 72px;*/
    background: url('../img/healthmeter-3.png');
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 576px) {
    .wrap-healthmeter-1 {
        /*float: left;*/
        position: relative;
        margin: 0 0.5em 0.5em;
        padding: 0.5em;
        height: 330px;
        /*width: 72px;*/
        background: url('../img/healthmeter-3.png');
        background-repeat: no-repeat;
        background-position: center;
        margin-top: 15px;
    }
}

.healthmeter-1 input[type='range'] {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    width: 280px;
    height: 1.5em;
    transform: translate(-50%, -50%) rotate(-90deg);
    background: transparent;
    font: 1em arial, sans-serif;
    margin-left: -8px;
    margin-top: -1px;
}

.healthmeter-1 input[type='range'], [type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
}

    .healthmeter-1 input[type='range']::-webkit-slider-runnable-track {
        box-sizing: border-box;
        border: none;
        width: 12.5em;
        height: 0.25em;
        background: transparent;
    }

    .healthmeter-1 input[type='range']::-moz-range-track {
        box-sizing: border-box;
        border: none;
        width: 12.5em;
        height: 0.25em;
        background: transparent;
    }

    .healthmeter-1 input[type='range']::-ms-track {
        box-sizing: border-box;
        border: none;
        width: 12.5em;
        height: 0.25em;
        background: transparent;
    }

    .healthmeter-1 input[type='range']::-webkit-slider-thumb {
        margin-top: -0.625em;
        box-sizing: border-box;
        border: none;
        width: 1.2em;
        height: 1.2em;
        border-radius: 50%;
        background: red;
    }

    .healthmeter-1 input[type='range']::-moz-range-thumb {
        box-sizing: border-box;
        border: none;
        width: 1.2em;
        height: 1.2em;
        border-radius: 50%;
        background: red;
    }

    .healthmeter-1 input[type='range']::-ms-thumb {
        margin-top: 0;
        box-sizing: border-box;
        border: none;
        width: 1.2em;
        height: 1.2em;
        border-radius: 50%;
        background: red;
    }

    .healthmeter-1 input[type='range']::-ms-tooltip {
        display: none;
    }





@media (min-width: 1200px) {
    #range-hm {
        /*width: 338px;
        left: -265px;
        border-radius: 10px;
        position: relative;
        top: 20px; */
        width: 454px;
        left: -420px;
        border-radius: 10px;
        position: relative;
        top: 36px;
        max-width: 700px;
        height: 44px;
    }

    #range-hm-healthmeter {
        width: 371px;
        left: -355px;
        border-radius: 10px;
        position: relative;
        top: 23px;
    }

    .card-img-overlay {
        position: absolute;
        top: 86px;
        /* right: 300px; */
        bottom: 0;
        left: 336px;
        padding: 1.25rem;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #range-hm {
        /*width: 338px;
        left: -265px;
        border-radius: 10px;
        position: relative;
        top: 20px;*/
        width: 454px;
        left: -420px;
        border-radius: 10px;
        position: relative;
        top: 36px;
        max-width: 700px;
        height: 44px;
    }

    #range-hm-healthmeter {
        width: 371px;
        left: -355px;
        border-radius: 10px;
        position: relative;
        top: 23px;
    }

    .card-img-overlay {
        position: absolute;
        top: 69px;
        /* right: 300px; */
        bottom: 0;
        left: 336px;
        padding: 1.25rem;
    }

    :root {
        /* TIP: use same color to disable gradient */
        --slider-fill-color1: rgba(0,177,181,0.87);
        --slider-fill-color2: rgba(0,177,181,0.87);
        --slider-background: grey;
        --thumb-size: 22px;
        --thumb-color: none;
        --bar-height: 22px;
        /* add more clickable area to trigger
         INFO: use 'none' to disable  */
        --slider-border: 10px solid transparent;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #range-hm {
        /*width: 338px;
        left: -265px;
        border-radius: 10px;
        position: relative;
        top: 20px;*/
        width: 454px;
        left: -420px;
        border-radius: 10px;
        position: relative;
        top: 36px;
        max-width: 700px;
        height: 44px;
    }

    #range-hm-healthmeter {
        width: 371px;
        left: -355px;
        border-radius: 10px;
        position: relative;
        top: 23px;
    }

    .card-img-overlay {
        position: absolute;
        top: 45px;
        /* right: 300px; */
        bottom: 0;
        left: 336px;
        padding: 1.25rem;
    }

    :root {
        /* TIP: use same color to disable gradient */
        --slider-fill-color1: rgba(0,177,181,0.87);
        --slider-fill-color2: rgba(0,177,181,0.87);
        --slider-background: grey;
        --thumb-size: 22px;
        --thumb-color: none;
        --bar-height: 22px;
        /* add more clickable area to trigger
         INFO: use 'none' to disable  */
        --slider-border: 10px solid transparent;
    }
}

@media (max-width: 767px) {
    #range-hm {
        /*width: 338px;
        left: -265px;
        border-radius: 10px;
        position: relative;
        top: 20px;*/
        width: 454px;
        left: -420px;
        border-radius: 10px;
        position: relative;
        top: 36px;
        max-width: 700px;
        height: 44px;
    }

    #range-hm-healthmeter {
        width: 371px;
        left: -355px;
        border-radius: 10px;
        position: relative;
        top: 23px;
    }

    .card-img-overlay {
        position: absolute;
        top: 28px;
        /* right: 300px; */
        bottom: 0;
        left: 336px;
        padding: 1.25rem;
    }

    :root {
        /* TIP: use same color to disable gradient */
        --slider-fill-color1: rgba(0,177,181,0.87);
        --slider-fill-color2: rgba(0,177,181,0.87);
        --slider-background: grey;
        --thumb-size: 22px;
        --thumb-color: none;
        --bar-height: 22px;
        /* add more clickable area to trigger
         INFO: use 'none' to disable  */
        --slider-border: 10px solid transparent;
    }
}



.card {
    border: 0px solid #fff;
}

.card-img {
    border: none !important;
}

.img-container-hm {
    position: relative;
    display: inline-block;
    height: 600px;
}

    .img-container-hm .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 500ms ease-in-out;
    }

    .img-container-hm .overlay {
        opacity: 1;
    }

.overlay span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
}



.alert {
    padding: 0px;
    color: #f44336;
    background-color: #ffffff;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
}


p.groove {
    border-style: none;
    /*border-style: groove;*/
    padding: 15px;
    font-size: 16px;
    /*font-family: Chancery;*/
}

big {
    font-size: 20px;
}

small {
    font-size: 12px;
}

.scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    height: 100px;
}