/* Preview mobile test */
.mobile__test-preview{
    position: relative; 
    display: flex; 
    justify-content: center;
}

.container__mobile-preview{
    position:absolute; 
    width:228px; 
    height: 455px; 
    top:40px; 
    overflow: hidden; 
    border-radius: 0px 0px 25px 25px;
}

.outside-frame{
    z-index: 1;
}

.mt-10rem{
    margin-top: 10rem!important;
}

.progress-container {
    position: relative;
    width: 125px;
    height: 125px;
    margin: 0 auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.progress-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: circle(50% at 50% 50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.progress-red{
    background: conic-gradient(
        #ff5656 var(--progress, 0%),
        #ffdddd var(--progress, 0%)
    );   
}

.progress-orange{
    background: conic-gradient(
        #fbc918 var(--progress, 0%),
        #fef4d1 var(--progress, 0%)
    );   
}

.progress-blue{
    background: conic-gradient(
        #18a0fb var(--progress, 0%),
        #84ceff var(--progress, 0%)
    );   
}

.progress-inner-circle {
    width: 85%;
    height: 85%;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-number {
    font-size: 24px;
    font-weight: bold;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.number-red{
    color: #ff5656;   
}

.number-orange{
    color: #fbc918;
}

.number-blue{
    color: #18a0fb;
}

#info-percentage-crawl{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}