.worko-tabs .state {
    position: absolute;
    left: -10000px;
}

.worko-tabs .flex-tabs {
    display: flex;
    flex-wrap: wrap;
}

    .worko-tabs .flex-tabs .tab {
        flex-grow: 1;
        max-height: 40px;
    }

    .worko-tabs .flex-tabs .panel {
        height: auto;
        display: none;
        width: 100%;
        flex-basis: auto;
    }

.worko-tabs .tab {
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    cursor: hand;
    cursor: pointer;
    border-left: 10px solid #ccc;
}

    .worko-tabs .tab:hover {
        background-color: #fff;
    }

#tab-one:checked ~ .tabs #tab-one-label,
#tab-two:checked ~ .tabs #tab-two-label,
#tab-three:checked ~ .tabs #tab-three-label,
#tab-four:checked ~ .tabs #tab-four-label {
    background-color: #fff;
    cursor: default;
}

#tab-one:checked ~ .tabs #tab-one-panel,
#tab-two:checked ~ .tabs #tab-two-panel,
#tab-three:checked ~ .tabs #tab-three-panel,
#tab-four:checked ~ .tabs #tab-four-panel {
    display: block;
}



.containerbar {
    margin: -50px auto;
    width: 400px;
    position: relative;
    background-color: #fcfcfc;
    padding: 20px;
    box-shadow: 1px 0 10px 0 black;
    margin-top: 20px;
}

.progress {
    border-radius: 30px;
    background-color: #fff;
    margin-top: 10px;
}

.progress-bar-main {
    height: 10px;
    border-radius: 30px;
    transition: 0.34s linear;
    transition-property: width, background-color;
}

.progress-moved .progress-bar-green {
    animation: progress1 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-90 {
    animation: progress2 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-70 {
    animation: progress70 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-green-85 {
    animation: progress-bar-green-85 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-80-orange {
    animation: progress-bar-80-orange 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar4 {
    animation: progress4 5s normal forwards ease-in-out;
}

.progress-moved .progress-red-10 {
    animation: progress-red-10 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-90-orange {
    animation: progress-bar-90-orange 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-red-50 {
    animation: progress-bar-red-50 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-green-85 {
    animation: progress-bar-green-85 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-75-orange {
    animation: progress-bar-75-orange 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-70-orange {
    animation: progress-bar-70-orange 5s normal forwards ease-in-out;
}

.low-high {
    margin-top: -25px;
    margin-bottom: 5px;
}

.bartext {
    font-size: 14px;
}

.level .low-high1 {
    margin-top: -25px;
}


@keyframes progress1 {
    0% {
        width: 0%;
        background: #e7e7e7;
    }

    100% {
        width: 100%;
        background: #1e9600;
    }
}

@keyframes progress2 {
    0% {
        width: 0%;
        background: #e7e7e7;
    }

    100% {
        width: 90%;
        background: #1e9600;
    }
}

@keyframes progress-bar-green-85 {
    0% {
        width: 0%;
        background: #e7e7e7;
    }

    100% {
        width: 80%;
        background: #1e9600;
    }
}




@keyframes progress-bar-80-orange {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 80%;
        background: #ffa620;
    }
}

@keyframes progress4 {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 50%;
        background: #ffa620;
    }
}

@keyframes progress-bar-90-orange {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 85%;
        background: #ffa620;
    }
}

@keyframes progress-bar-75-orange {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 75%;
        background: #ffa620;
    }
}

@keyframes progress-bar-70-orange {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 70%;
        background: #ffa620;
    }
}




@keyframes progress-bar-red-50 {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 35%;
        background: red;
    }
}



@keyframes progress-red-10 {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 10%;
        background: red;
    }
}






.loader {
    --p: 0;
    animation: p 5s steps(100) infinite;
    counter-reset: p var(--p);
    font-size: 2.1em;
    position: absolute;
    bottom: 45px;
    left: 0;
    color: #272727;
}

    .loader:after {
        content: counter(p) "%";
    }

.loader1 {
    --p: 0;
    animation: p 5s steps(100) infinite;
    counter-reset: p var(--p);
    font-size: 1.1em;
    position: absolute;
    bottom: 45px;
    left: 325px;
    color: #272727;
}

    .loader1:after {
        content: counter(p) "%";
    }

@keyframes p {
    90%, 100% {
        --p: 100;
    }
}


@media screen and (max-width: 460px) {
    .containerbar {
        margin: -43px -23px;
        width: 335px;
        position: relative;
        background-color: #fcfcfc;
        padding: 11px;
        box-shadow: 1px 0 10px 0 black;
    }

    .bartext {
        font-size: 10px;
    }
}




.service-check-option span input:after {
    border: 2px solid #005407;
}


.containerbar {
    margin: -50px auto;
    width: 400px;
    position: relative;
    background-color: #fcfcfc;
    padding: 20px;
    box-shadow: 1px 0 10px 0 black;
    margin-top: 20px;
}

.progress {
    border-radius: 30px;
    background-color: #fff;
    margin-top: 10px;
}

.progress-bar-main {
    height: 10px;
    border-radius: 30px;
    transition: 0.34s linear;
    transition-property: width, background-color;
}

.progress-moved .progress-bar-green {
    animation: progress1 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-90 {
    animation: progress2 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-70 {
    animation: progress70 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-green-85 {
    animation: progress-bar-green-85 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-80-orange {
    animation: progress-bar-80-orange 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar4 {
    animation: progress4 5s normal forwards ease-in-out;
}

.progress-moved .progress-red-10 {
    animation: progress-red-10 5s normal forwards ease-in-out;
}

.progress-moved .progress-red-25 {
    animation: progress-red-25 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-90-orange {
    animation: progress-bar-90-orange 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-red-50 {
    animation: progress-bar-red-50 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-green-85 {
    animation: progress-bar-green-85 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-75-orange {
    animation: progress-bar-75-orange 5s normal forwards ease-in-out;
}

.progress-moved .progress-bar-70-orange {
    animation: progress-bar-70-orange 5s normal forwards ease-in-out;
}

.low-high {
    margin-top: -25px;
    margin-bottom: 5px;
}

.bartext {
    font-size: 14px;
}

.level .low-high1 {
    margin-top: -25px;
}


@keyframes progress1 {
    0% {
        width: 0%;
        background: #e7e7e7;
    }

    100% {
        width: 100%;
        background: #1e9600;
    }
}

@keyframes progress2 {
    0% {
        width: 0%;
        background: #e7e7e7;
    }

    100% {
        width: 90%;
        background: #1e9600;
    }
}

@keyframes progress-bar-green-85 {
    0% {
        width: 0%;
        background: #e7e7e7;
    }

    100% {
        width: 80%;
        background: #1e9600;
    }
}




@keyframes progress-bar-80-orange {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 80%;
        background: #ffa620;
    }
}

@keyframes progress4 {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 50%;
        background: #ffa620;
    }
}

@keyframes progress-bar-90-orange {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 85%;
        background: #ffa620;
    }
}

@keyframes progress-bar-75-orange {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 75%;
        background: #ffa620;
    }
}

@keyframes progress-bar-70-orange {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 70%;
        background: #ffa620;
    }
}




@keyframes progress-bar-red-50 {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 40%;
        background: red;
    }
}



@keyframes progress-red-10 {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 10%;
        background: red;
    }
}


@keyframes progress-red-25 {
    0% {
        width: 0%;
        background: #d8d8d8;
    }

    100% {
        width: 25%;
        background: red;
    }
}





.loader {
    --p: 0;
    animation: p 5s steps(100) infinite;
    counter-reset: p var(--p);
    font-size: 2.1em;
    position: absolute;
    bottom: 45px;
    left: 0;
    color: #272727;
}

    .loader:after {
        content: counter(p) "%";
    }

.loader1 {
    --p: 0;
    animation: p 5s steps(100) infinite;
    counter-reset: p var(--p);
    font-size: 1.1em;
    position: absolute;
    bottom: 45px;
    left: 325px;
    color: #272727;
}

    .loader1:after {
        content: counter(p) "%";
    }

@keyframes p {
    90%, 100% {
        --p: 100;
    }
}


@media screen and (max-width: 400px) {
    .containerbar {
        margin: -43px -23px;
        width: 335px;
        position: relative;
        background-color: #fcfcfc;
        padding: 11px;
        box-shadow: 1px 0 10px 0 black;
    }

    .bartext {
        font-size: 10px;
    }

    .typewriter {
        position: absolute;
        bottom: -26px;
        right: 25% !important;
    }
}

@media screen and (max-width: 460px) {
    .containerbar {
        margin: -43px -23px;
        width: 335px;
        position: relative;
        background-color: #fcfcfc;
        padding: 11px;
        box-shadow: 1px 0 10px 0 black;
    }

    .bartext {
        font-size: 10px;
    }

    .typewriter {
        position: absolute;
        bottom: -26px;
        right: 30%;
    }
}

@media screen and (min-width: 460px) and (max-width:1200px) {
    .typewriter {
        position: absolute;
        bottom: -50px;
        right: 43%;
    }
}

@media screen and (min-width: 460px) and (max-width:600px) {
    .typewriter {
        position: absolute;
        bottom: -50px;
        right: 35% !important;
    }
}




.service-check-option span input:after {
    border: 2px solid #005407;
}


.step-box-content:hover {
    box-shadow: 5px 5px 15px -5px #005407;
}


.step-box-content:hover {
    box-shadow: 5px 5px 15px -5px #005407;
}

@media screen and (max-width: 767px) {
    .low-high1 span {
        font-size: 12px;
    }
}