body, html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    background-color: #fafafa;
    /* background-image: -webkit-gradient(linear, left bottom, left top, from(#e6e9f0), to(#eef1f5));
    background-image: -webkit-linear-gradient(bottom, #e6e9f0 0%, #eef1f5 100%);
    background-image: -o-linear-gradient(bottom, #e6e9f0 0%, #eef1f5 100%);
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); */
}

#container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.sliderContainer {
    position: absolute;
}

.progress {
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: relative;
}

.progress__meter,
.progress__value {
  fill: none;
}

.progress__meter {
  stroke: #e6e6e6;
}

.progress__value {
  stroke: #f77a52;
}

.dial {
    background-color: whitesmoke;
    border-radius: 50%;
    box-shadow: 0 0 3px black;
    cursor: pointer;
    height: 26px;
    margin-left: -13px;
    position: absolute;
    top: -13px;
    width: 26px;
    z-index: 124;
}

input {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: -1;
    opacity: 0;
}

.price {
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translate(-15%, -50%);
}

.price .pricing {
    color: black;
    font-size: 3.5rem;
}

.price .box {
    width: 20px;
    height: 15px;
    display: inline-block;
    margin: 0 10px;
    border-radius: 25px;
}

.price .text {
    color: black;
}

@media screen and (max-width: 1140px) {

    .price {
        position: absolute;
        display: inline-block;
        top: 120%;
        left: 50%;
        transform: translate(-50%, -120%);
    }

}

@media screen and (max-width: 768px) {

    .price .pricing {
        font-size: 2.5rem;
    }

}
