input{
    color:#fff !important;

}
div#nextPayment {
    background: #ff158c;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    cursor:pointer;
    box-shadow: 0px 4px 6px black;
}

.circle-big {
    position: relative;
    width: 114px;
    height: 114px;
    margin: 30px auto 25px auto;
    box-shadow: -4px 7px 5px 0 #191a1d;
    border-radius: 180px;
}

.circle-big svg {
    width: 114px;
    height: 114px;
}

.circle-big .bg {
    fill: none;
    stroke-width: 10px;
    stroke: #343035;
}

.circle-big .progress {
    fill: none;
    stroke-width: 10px;
    stroke: #e00f87;
    stroke-linecap: round;
    stroke-dasharray: 326.56;
    stroke-dashoffset: 60;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: big 1.5s ease-in-out;
}

.circle-big .text {
    position: absolute;
    width: 100%;
    top: 37px;
    font-size: 24px;
    text-align: center;
    font-weight: 400;
    line-height: 22px;
}

.circle-big .text .small {
    font-size: 14px;
    color: #fff;
}

span.notseen {
    background: #356caf;
    color: #fff;
    padding: 3px 7px;
    border-radius: 180px;
    font-size: 12px;
}

.dayDisplay {
    font-size: 24px;
    position: absolute;
    top: 40%;
    text-align: center;
    color: #fff;
    font-weight: bold;
    left: 37%;
}


@media screen and (min-width: 780px) {
    .hideDesktop {
        display: none;
    }
}



@media screen and (max-width: 780px) {
    .hideMobile {
        display: none;
    }
}