<script>
$(document).ready(function(){

setTimeout(function(){

    $('.t-input-group_fr[data-input-lid="1655639220455"]').closest('.t-form__screen-wrapper').addClass('finallist');

    $('.finallist').find('.t-input-group_fr:eq(0)').addClass('critical-title');
    $('.finallist').find('.t-input-group_fr:eq(1)').addClass('system-title');
    $('.finallist').find('.t-input-group_fr:eq(2)').addClass('creative-title');



    $('.t678').on( "click", ".t-form__screen-btn-next", function() {
  
        let step = $('.t678 .t-form__screen-number-container span:first').text();
      
        if (step=='6'){
      
            setTimeout(function(){
            
                let critical = $('input[name="critical"]').val();
                let system = $('input[name="system"]').val();
                let creative = $('input[name="creative"]').val();
                
                
                let tScore = {
                    '1'   : '1',
                    '1.5' : '1',
                    '2'   : '2',
                    '2.5' : '3',
                    '3'   : '4',
                    '3.5' : '5',
                    '4'   : '6',
                    '4.5' : '7',
                    '5'   : '8',
                    '5.5' : '9',
                    '6'   : '10'
                };
                
                creative = tScore[creative];
            
                let score = `<div class="score-wrapper"> <div class="score t-name"> <span>${critical}</span> <span>/</span> <span>${system}</span> <span>/</span> <span>${creative}</span> </div> </div>`;
                $('.score-wrapper').remove();
                $('.finallist').prepend(score);
            
                let scoreLine = `<div class="score-line-wrapper"> <div class="score-line t-name"> <div class="score-num"></div> </div> </div>`;
            
                $('.score-line-wrapper').remove();
                $('.finallist .t-input-group_fr').after(scoreLine);
                
                $('.finallist .score-line:eq(0)').addClass('score-critical');
                $('.finallist .score-line:eq(1)').addClass('score-system');
                $('.finallist .score-line:eq(2)').addClass('score-creative');
                
                $('.score-critical .score-num').text(critical).css('left', critical*10+'%');
                $('.score-system .score-num').text(system).css('left', system*10+'%');
                $('.score-creative .score-num').text(creative).css('left', creative*10+'%');
                
                $('.score-critical').css('width', critical*10+'%');
                $('.score-system').css('width', system*10+'%');
                $('.score-creative').css('width', creative*10+'%');
            
                $('.t678  .t-submit').click();
                
            }, 100);
    
        };


    });   

}, 1000);
   
  
});
</script> <style>
.finallist .t-input-group_fr .t-input-title {
    text-align: center;
    text-transform: uppercase;
    color: #fff !important;
    font-size: 30px;
    font-weight: 600;
    padding: 10px 0;
    border-radius: 5%;
}
.critical-title .t-input-title {
    background-color: #03A2DA;
}
.system-title .t-input-title {
    background-color: #E52B2C;
}
.creative-title .t-input-title {
    background-color: #512932;
}

.creative-title , .system-title {
    margin-top: 50px;
}

.finallist .score-line-wrapper+div.t-input-group_tx {
    background-color: #f5f5f5;
    border-radius: 5%;
    padding-top: 60px;
}

.finallist .t-input-group_tx {
    padding:  0px 20px 20px 20px;
}    

.score {
    width: fit-content;
    margin: 0 auto;
    font-size: 40px;
    color: #03A2DA;
    border: 1px solid #000;
    padding: 15px 50px;
    margin-bottom: 40px;
}


.score-line-wrapper {
    background-color: #e3e3e3;
    border-radius: 20px;
    height: 40px;
    font-family: 'TildaSans',Arial,sans-serif;
    margin-bottom: -20px;
    position: relative;
    z-index: 1;
    margin-top: 50px;
}

.score-line {
    height: 100%;
    border-radius: 20px;
    width: 50%;
}

.score-num {
    width: 70px;
    height: 70px;
    background-color: #03A2DA;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 0 0 5px #000;
    position: absolute;
    transform: translate(-50% , -25%);
    top: 0;
    left: 50%;
}
.score-line.score-critical {
    background-color: rgb(3 162 218 / 20%);
}
.score-line.score-system {
    background-color: rgb(229 43 44 / 20%);
}
.score-line.score-creative {
    background-color: rgb(81 41 50 / 20%);
}

.finallist .t-calc__wrapper {
    display: none;
}

.finallist  .t-calc__wrapper {
    display: none;
}





.t678 .js-form-proccess.js-send-form-success  .t-form__inputsbox.t-form__screen{
    overflow: auto;
    display: block;
    max-height: none;
    opacity: 1;
}

.t678 .js-form-proccess.js-send-form-success .t-form__inputsbox.t-form__screen .t-form__submit {
    display: none;
}

.t-form__screen-wrapper.finallist {
    opacity: 0;
}

.t678 .js-form-proccess.js-send-form-success .t-form__inputsbox.t-form__screen .t-form__screen-wrapper.finallist {
    opacity: 1;
}





.score-critical .score-num {
    background-color: #03A2DA;
}
.score-system .score-num {
    background-color: #E52B2C;
}
.score-creative .score-num {
    background-color: #512932;
}

@media screen and (max-width:640px){

.score {
    font-size: 30px;
    padding: 10px 30px;
    margin-bottom: 30px;
}
.finallist .t-input-group_fr .t-input-title {
    font-size: 20px;
}

.score-line-wrapper {
   
    border-radius: 20px;
    height: 30px;
    margin-bottom: -15px;
    margin-top: 35px;
}

.score-num {
    width: 40px;
    height: 40px;
    font-size: 18px;
    box-shadow: 0 0 0 3px #000;
    position: absolute;
    transform: translate(-50% , -15%);
    top: 0;
    left: 50%;
}
    
}


</style>