body{
    font-family: 'Inter', 'sans-serif';
    background-color: #c2c2c0;
}

.img1{
    /* background-color: rgb(0, 0, 0); */
    height: 50px;
    weight: 50px;
    border-radius: 10px;
}

.box{
    padding: 15px;
    background: #ffffff;
    color: #000000;
    margin: 10px 0px;
    text-align: center;
    border-radius: 10px;
}

.box1{
    padding-bottom: 15px;
    background: #0e380e;
    color: #ffffff;
    margin: 10px 0px;
    text-align: center;
    border-radius: 10px;
}

.box2{
    padding: 15x;
    background: #0e380e;
    color: #ffffff;
    margin: 10px 0px;
    text-align: center;
    border-radius: 10px;}

.box3{
    padding: 15px;
    background: #0e380e;
    color: #ffffff;
    margin: 10px 0px;
    text-align: center;
    border-radius: 10px;
}

.box4{
    padding: 15px;
    background: #0e380e;
    color: #ffffff;
    margin: 10px 0px;
    text-align: center;
    border-radius: 10px;
}

.box5{
    padding: 15px;
    background: #0e380e;
    color: #ffffff;
    margin: 10px 0px;
    text-align: center;
    border-radius: 10px;
}

.box6{
    padding: 75px;
    background: #187a18;
    color: #ffffff;
    margin: 10px 0px;
    text-align: center;
    border-radius: 10px;
}

.progress{
    width: 200px;
    height: 200px;
    line-height: 200px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}
.progress:after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 12px solid #175a0e;
    position: absolute;
    top: 0;
    left: 0;
}
.progress > span{
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
.progress .progress-left{
    left: 0;
}
.progress .progress-bar{
    width: 100%;
    height: 100%;
    background: none;
    border-width: 12px;;
    border-style: solid;
    position: absolute;
    top: 0;
}
.progress .progress-left .progress-bar{
    left: 100%;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
.progress .progress-right{
    right: 0;
}
.progress .progress-right .progress-bar{
    left: -100%;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1(180) 1.8s linear forwards;
}
.progress .progress-value{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #187a18;
    font-size: 60px;
    color: #ffffff;
    line-height: 170px;
    text-align: center;
    position: absolute;
    top: 5%;
    left: 5%;
}
.progress.blue .progress-bar{
    border-color: #e3fc05;
}
.progress.blue .progress-left .progress-bar{
    animation: loading-2 1.8s linear forwards 1.8s;
}

table {
  font-size: 1.8em;
}


@keyframes loading-1(param){
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate((param)deg);
        transform: rotate((param)deg);
    }
}
@keyframes loading-2{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}

.box_utj{
    height: 38vh;
    background: rgb(117, 0, 242);
        background: -moz-linear-gradient(143deg, rgba(117, 0, 242, 1) 0%, rgba(0, 95, 242, 1) 100%);
        background: -webkit-linear-gradient(143deg, rgba(117, 0, 242, 1) 0%, rgba(0, 95, 242, 1) 100%);
        background: linear-gradient(143deg, rgba(117, 0, 242, 1) 0%, rgba(0, 95, 242, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7500f2", endColorstr="#005ff2", GradientType=1);
}

.box-akad{
    height: 38vh;
    background: rgb(2, 170, 106);
        background: -moz-linear-gradient(143deg, rgba(2, 170, 106, 1) 0%, rgba(2, 170, 20, 1) 100%);
        background: -webkit-linear-gradient(143deg, rgba(2, 170, 106, 1) 0%, rgba(2, 170, 20, 1) 100%);
        background: linear-gradient(143deg, rgba(2, 170, 106, 1) 0%, rgba(2, 170, 20, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#02aa6a", endColorstr="#02aa14", GradientType=1);
}
