@media only screen and (min-width:280px) and (max-width:575px){



    #download_result{
        padding-left:0px !important;
    }

    #closemodal {
        right: 10px;
        top: 10px;
    }
    #msform{
        margin-top:50px;
    }
    #jquery-steps .modal-header{
        padding-left:0px;
    }
    .hide_homepage, #home_page, .hide_whole_page {
        opacity: 1 !important;
    }
    .modal button img {
        width: 25px;
    }
    .container.hide_front_page {
        display: none;
    }
    #box_animation{
        display:none;
    }
    #msform fieldset:nth-child(2) .next{
        margin-top:40px;
    }
    .right_text p:nth-child(2){
        margin-top: 30px;
    }
    .chart span, .chart_2 span, .chart_3 span, .chart_4 span, .chart_5 span, .chart_6 span, .chart_5 span, .chart_66 span {
        font-size: 22px;
    }
    .result_progress .score_chart .box canvas{
        left: 28%;
    }
    .result_progress .score_chart {
        height: 350px;
    }
    .result_progress .score_chart .box canvas {
        height: 160px !important;
        width: 160px !important;
    }
    .right_text {
        width: 100%;
    }
    .download_res{
        margin: auto;
        margin-top: 40px;
    }
    #download_result .col-lg-5{
        text-align: center;
    }
    #popupDialog .chart_7 .score_result {
        top: -4px;
        left: -3px;
    }
    #popupDialog canvas{
        left: 50%;
    }
    #msform .action-button-previous, #msform .action-button{
        width: 46%;
        height: 60px;
    }
    #msform .action-button{
        margin-top: 40px;
        margin-bottom: 30px;
    }
    .result_progress .score_result {
        left: 32%;
        top: 94px;
    }
    .score_chart .box canvas{
        left: 30%;
        top: 30px;
    }
    .first_row_animation{
        display: block;
        text-align: center;
    }
    #box_animation{
        height: auto !important;
    }
    .l_1, .l_2, .l_3, .l_4{
        line-height: 36px;
        font-size: 40px;
    }
    .l_5{
        font-size: 60px;
    }
    .last_row_animation{
        margin-top: 0px;
    }
    fieldset .col-lg-3::before{
        display: none;
    }
    .score_chart h5{
        margin-top: 20px;
        font-size: 16px;
    }
    .score_chart{
        height: 300px;
    }
    .score_result {
        top: 74px;
        /*left:110px;*/
        left: 31.6%;
    }
    #label_p p {
        margin-bottom: 30px;
        font-size: 14px;
    }
    .greatForm > label, .greatForm > span{
        padding: 9px 16px;
        /*height: 48px;*/
        /*width: 48px;*/
    }
    .question_wrap{
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left:20px;
        padding-right:10px;
    }
    .txt_desc {
        font-size: 12px;
        padding-right: 0px;
        line-height: 22px;
        margin-bottom: 40px;
    }
    #progressbar li:after{
        left: -23%;
        width: 45%;
    }
    #next_form{
        overflow: scroll;
    padding-left:0px !important;
        
    }
    #progressbar li{
        font-size: 0px;
    }
    .box_wrap p{
        font-size: 15px;
        width: 100%;
    }
    .start_buttons p {
        display: none;
    }
    .brand_title h1 {
        font-size: 30px;
        margin-top: 60px;
    }
    .three_box{
        position: relative;
    }
    .multi_color_line{
        bottom: 0px;
        position: fixed;
    }
    #download_result .row{
        max-width: 100%;
    }
    #foo {
        width: 100% !important;
        height: 100% !important;
        position: relative;
    top: -20px;
    }
    .result_progress {
        display: block;
    }
    #download_result .row:nth-child(n+3) .score_chart {
        width: 100%;
        margin: 20px auto;
    }
    #download_result .row:nth-child(4) .score_chart:nth-child(1) {
        margin-left: auto;
        margin-top: 0px;
    }
    #download_result .row:nth-child(4){
        padding-top: 0px;
    }
    .brand_title p{
        width: auto;
        padding: 0px 31px;
    }
    .brand_title {
        padding-top: 60px;
        position: relative;

    }
    .box_wrap {
        width: 100%;
        margin: auto;
        display: block;
    }
    .box_wrap:nth-child(2) {
        border-right: 1px solid rgba(112, 112, 112, 0.5);
        border-left: 1px solid rgba(112, 112, 112, 0.5);
        border-top: 0px;
        border-bottom: 0px;
    }
    #login .modal-header {
        top: -70px;
        right: 0px;
    }
    #login .modal-body {
    padding: 0px 20px;
    }

 }


@media only screen and (min-width:280px) and (max-width:767){
    
    .press_enter{
    display:none;   
}
    
    .sent_report{
        display:block;
        padding-top: 26px;
    }
    
    .sent_report p{
        margin-top:10px;
    }
    .otp_form .close {
    right: 30px;
    top: 120px;
    }
    
    .otp_form {
    padding-left:0px !important;
    }
    div#msform fieldset:last-child .chart_7 .score_result p{
        margin-left: -22px;
    }
    #popupDialog canvas{
        left: 50%;
    }
    #popupDialog .chart_7 .score_result {
        left: 0px;
    }
    #msform fieldset:nth-child(2) .next {
        margin-top: 24px;
    }
    .score_chart_desc {
        padding-bottom: 0px;
        height: auto;
    }
    .score_result {
        top: 46px;
        left: 0px;
        width: 100%;
    }
    .score_chart canvas {
        left: 50% !important;
        transform: translate(-50%, 10%);
    }
    .txt_desc {
        padding-right: 0px;
    }
    .question_wrap{
        padding-left: 15px;
        padding-right: 15px;
    }
    #label_p p {
        font-size: 14px;
    }
    #progressbar li:before{
        width: 18px;
        height: 18px;
        font-size: 6px;
        line-height: 18px
    }
    #progressbar li:after{
        top: 10px;
    }
    #progressbar li{
        width: 14%;
        font-size: 6px;
    }
    #jquery-steps{
        padding: 0px;
    }
    #next_form{
        overflow: scroll;
    }
    #next_form .modal{
        padding: 0px 15px;
    }
}

 @media only screen and (min-width:576px) and (max-width:767px){


    
    #download_result{
        padding-left:0px !important;
    }
    #download_result .modal-header {
        position: absolute;
        right: 10px;
        top: 0px;
    }


    #closemodal {
        right: 10px;
        top: 10px;
    }
    #msform{
        margin-top:80px;
    }
    .first_row_animation{
        display: flex;
        text-align: center;
    }
    #box_animation{
        height: auto !important;
    }
    .l_1, .l_2, .l_3, .l_4{
        line-height: 36px;
        font-size: 40px;
    }
    .l_5{
        font-size: 60px;
    }
    .last_row_animation{
        margin-top: 0px;
    }
    .three_box, .multi_color_line{
        position: relative;
    }
    .multi_color_line{
        bottom: 13px;
    }
    .brand_title p{
        width: auto;
    }
    .brand_title {
        padding-top: 60px;
        position: relative;
    }
    .box_wrap {
        width: 70%;
        margin: auto;
        display: block;
    }
    .box_wrap:nth-child(2) {
        border-right: 1px solid rgba(112, 112, 112, 0.5);
        border-left: 1px solid rgba(112, 112, 112, 0.5);
        border-top: 0px;
        border-bottom: 0px;
    }
    #login .modal-header {
        top: 0px;
        right: -70px;
    }
    #download_result .row{
        max-width: 100%;
    }
    #foo {
        width: 100% !important;
        height: 100% !important;
    }
    .result_progress {
        display: block;
    }
    #download_result .row:nth-child(n+3) .score_chart {
        width: 47%;
        margin: 20px auto;
    }
    #download_result .row:nth-child(4) .score_chart:nth-child(1) {
        margin-left: auto;
        margin-top: 0px;
    }
    #download_result .row:nth-child(4){
        padding-top: 0px;
    }

 }


 @media only screen and (min-width:768px) and (max-width:991px){


.press_enter{
    display:none;   
}
     #download_result{
        padding-left:0px !important;
    }
    .otp_form .close {
    right: 30px;
    top: 200px;
    }
    #closemodal {
        right: 10px;
        top: 10px;
    }
    #msform{
        margin-top:40px;
    }
    .right_text p:nth-child(2){
        margin-bottom: 30px;
    }
    .right_text .result_title {
        margin: 20px 0px 30px 0px;
    }
    .download_res{
        margin: auto;
    }
    #download_result .row:nth-child(1){
        text-align: center;
    }
    #popupDialog .chart_7 .score_result {
        top: -20px;
        left: -25px;
    }
    #popupDialog canvas{
        transform: translate(-50%, -60%);
    }
    #next_form{
        overflow: hidden;
    }
    #msform .action-button-previous, #msform .action-button{
        width: 29%;
        height: 60px;
    }
    #msform .action-button{
        margin: 40px 0px;
    }
    .score_chart h5 {
        font-size: 13px;
        margin-bottom: 23px;
        margin-top: 11px;
    }
    .score_chart .box canvas{
        left: 102px;
            height: 120px !important;
    width: 120px !important;
    }
    #next_form{
        /* overflow-y: scroll; */
    }
    #label_p p {
        margin-bottom: 25px;
    }
    .txt_desc {
        padding-right: 0px;
        margin-bottom: 13px;
        line-height: 22px;
    }
    #msform fieldset{
        margin-top: 25px;
    }
    #progressbar{
        padding-bottom: 10px;
    }
    #progressbar li{
        font-size: 0px;
    }
    .greatForm > label{
        /*width: 47px;*/
        /*height: 47px;*/
        /*line-height: 47px;*/
        padding: 11px 19px;
    }
    .question_wrap{
        padding:13px 30px;
    }
    .brand_title h1 {
        font-size: 40px;
    }
    .last_row_animation {
        margin-top: -20px;
    }
    .l_1, .l_2, .l_3, .l_4 {
        font-size: 40px;
        font-weight: 500;
        padding: 0px 22px;
    }
    .l_5{
        font-size: 100px;
    }
    #msform fieldset:nth-child(2) .next {
        margin-top: 14px;
    }
    
    #next_form fieldset .col-lg-3{
        display: flex;
    }
    #next_form .col-lg-3 .score_chart, #next_form .col-lg-3 .score_chart_desc{
        width: 50%;
        height: 205px;
    }
    #next_form .col-lg-3 .score_chart_desc{
        margin-top: 0px;
        margin-left: 2%;
    }
    #next_form .col-lg-3 .box ol {
        display: block;
    }
    #next_form .col-lg-3 .box ol li {
        list-style: inherit;
    }
    #next_form .col-lg-3 .txt_desc {
        font-size: 15px;
    }
    #next_form .col-lg-3 .score_result{
        left: 98px;
        top: 33px;
    }
    .score_chart_desc li {
        font-size: 15px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .multi_color_line {
        bottom: 0px;
    }
    .three_box {
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
    .brand_title p{
        width: auto;
    }
    .brand_title {
        /* padding-top: 220px; */
        top: 25%;
    }
    .box_wrap {
        width: 33%;
        padding-right: 30px;
        padding-left: 30px;
    }
    #login .modal-header {
        top: -70px;
        right: 0px;
    }
    #foo {
        /* margin-left: -41px; */
    }
    .result_progress .score_chart{
        margin: 0px 7px;
    }
    .result_progress .score_chart canvas {
        height: 100px !important;
        width: 100px !important;
        left: 25px;
    }
    .result_progress .score_result {
        top: 34px;
        left: 12px;
    }
    .score_result {
        left: 12px;
    }
    .right_text {
        width: 100%;
    }

    
 }


 @media only screen and (min-width:992px) and (max-width:1200px){
     
     
     
.press_enter{
    display:none;   
}
#download_result{
    padding-left:0px !important;
}
 .otp_form .close {
    right: 110px;
    top: 80px;
    }

#closemodal {
    right: 30px;
    top: 10px;
}
#msform{
    margin-top:50px;
}

.l_1, .l_2, .l_3, .l_4 {
    font-size: 60px;
}
.l_5{
    font-size:200px;
  
}
.l_5 p{
     margin-top:70px; 
}
.score_chart_desc {
    height: 132px;
}
    #next_form .col-lg-3 .box canvas{
        left: 42px;
    }
    #next_form .col-lg-3 .score_result{
        left: 47px;
            top: 42px;
    }
    .brand_title {
        padding-top: 40px;
    }
        .multi_color_line {
            bottom: 0px;
        }
        .three_box {
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }
        .brand_title p{
            width: auto;
        } 
        .box_wrap {
            width: 33%;
            padding-right: 30px;
            padding-left: 30px;
        }

}

@media only screen and (min-width:1201px) and (max-width:1300px){


#download_result{
    padding-left:0px !important;
}
.question_wrap{
    padding-top:15px;
    padding-bottom:15px;
}
.score_result {
    top: 40px;
    left: 69px;
}
.l_1, .l_2, .l_3, .l_4 {
    font-size: 60px;
}
.l_5{
    font-size:200px;
  
}
.l_5 p{
     margin-top:70px; 
}
.score_chart_desc {
    height: 125px;
}
    #download_result .score_result {
    top: 57px;
    left: 68px;
}

    #next_form{
        overflow: scroll;
    }
    #login .modal-header {
        top: -30px;
        right: -90px;
    }
    .box_wrap {
        width: 33%;
        padding-right: 30px;
        padding-left: 30px;
    }
  
    .box_wrap{
        height:160px;
            padding-top: 30px;
            padding-bottom: 30px;
    }
    
    .brand_title {
    padding-top: 56px;
    top: 8%;
    }

}


@media only screen and (min-width:1366px) and (max-width:1367px){
    
    
    #popupDialog .chart_7 .score_result {
    top: -1px !important;
    left: -25px !important;
    }
    #login .modal-content::after{
        height:auto !important;
    }
    .brand_title {
        padding-top: 0px !important;
    }
    .start_buttons {
    margin-top: 20px !important;
    }
    #login .modal-header {
        top: -20px !important; 
    }
    .brand_title h1 {
    font-size: 43px !important;
    }
    #progressbar{
        /*padding: 14px 0px*/
    }

   #closemodal {
    right: 30px !important;
    top: 20px !important;
    }
    #next_form{
        overflow-y:scroll !important;
    }
     #download_result .score_result {
        top: 57px !important;
        left: 69px !important;
    }
      #msform fieldset{
        position:relative !important;
    }
        .first_set .score_chart .box canvas{
        height: 120px !important;
    width: 120px !important;
    }
    
     .first_set .score_result {
        top: 34px !important;
        left: 61px !important;
    }
    .first_set .score_chart_desc {
        height: 133px !important;
    }
    
    .sec_set .score_result, .third_set .score_result,  .fourth_set .score_result, .fifth_set .score_result, .sixth_set .score_result, .seventh_set .score_result {
        top: 33px !important;
        left: 59px !important;
    }
    .sec_set .score_chart .box canvas, .third_set .score_chart .box canvas,  .fourth_set .score_chart .box canvas,
    .fifth_set .score_chart .box canvas, .sixth_set .score_chart .box canvas, .seventh_set .score_chart .box canvas {
    height: 120px !important;
    width: 120px !important;
    }
    
    

}

@media only screen and (min-width:1301px) and (max-width:1400px){



        #download_result{
            padding-left:0px !important;
        }
    .score_result {
        top: 44px;
        left: 69px;
    }
    .brand_title {
        padding-top: 100px;
    }
    .multi_color_line {
        bottom: 0px;
    }
    .three_box {
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
    .box_wrap {
        width: 33%;
        padding-right: 30px;
        padding-left: 30px;
    }

}


@media only screen and (min-width:1601px){

    #next_form{
        overflow-y:scroll;
    }
    .box_wrap{
        height: 230px;
    }
    .container .box p{
        font-size: 13px;
        
    }
    .chart span, .chart_2 span, .chart_3 span, .chart_4 span, .chart_5 span, .chart_6 span, .chart_5 span, .chart_66 span  {
        font-size: 25px;
        }
    .score_result {
        top: 39px;
        left: 64px;
    }
    .container .box canvas{
  
        left: 57px;
    }
    .greatForm > label, .greatForm > span{
        height: 37px;
        width: 37px;
    }
    #label_p p{
        font-size: 16px;
    }
    #jquery-steps h4{
        font-size: 22px;
    }
    .txt_desc{
        font-size: 14px;
    }
    .brand_title{
        top: 25%;
    }
    .box_wrap p{
        font-size: 16px;
        width: 210px;
    }
    #msform fieldset{
        margin-top: 20px;
    }
    #jquery-steps h4{
        margin: 13px 0px;
    }
    .txt_desc{
        margin-bottom: 30px;
    }

   
    .score_chart h5{
        margin-bottom: 30px;
        margin-top: 10px;
    }
    .score_chart_desc {
        padding: 16px 0px 20px 0px;
        height: 146px;
    }
    .score_chart{
        height: 265px;
    }
    #progressbar{
        padding: 20px 0px;
    }
    #next_form .modal-content{
        top: 12%;
    }
    .modal button img {
        width: 38px;
    }
    #jquery-steps .modal-header {
        padding-top: 0px;
        position: relative;
        top: -60px;
        right: 1%;
    }
    .question_wrap{
        padding: 20px 30px;
    }
    #msform{
        /*margin-top:-40px;*/
    }
    #download_result #closemodal {
        right: 50px;
        top: 10px;
    }
 

 
}


@media only screen and (min-width:1401px) and (max-width:1500px){
    
    
    
    #download_result .modal-header{
    right: 40px;
    top: 50px;
    }
    #download_result{
    padding-left:0px !important;
}

        #next_form .score_chart .box canvas {
    height: 120px !important;
    width: 120px !important;
        }
    .score_result {
        top: 30px;
        left: 61px;
    }
         #download_result .score_result {
        top: 54px !important;
        left: 70px !important;
    }
        
        

}




@media only screen and (min-width:1501px) and (max-width:1535px){
    
            
      #download_result .score_result {
        top: 54px !important;
        left: 70px !important;
    }
            
        
    #next_form .score_chart .score_result {
        top: 60px;
        left: 64px;
    }
    #next_form .score_chart .box canvas{
        left: 56px;
    }
     fieldset .score_chart .box canvas{
        top:20px;
    }
     fieldset .score_chart .score_result{
        top:60px;
            left: 60px;
            
    }
    .score_chart .box canvas{
        top:0px;
    }
  .score_result {
    top: 60px;
    left: 70px;
}
    #next_form .modal-content{
        top: 5%;
    }
    #next_form .modal-header{
        position: relative;
    top: -17px;
    }
    .question_wrap{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .score_chart_desc {
        padding: 16px 0px 20px 0px;
        height: 140px;
    }
    .score_chart{
        height: 256px;
    }
    #progressbar{
        padding: 20px 0px;
    }
    .modal button img {
        width: 28px;
    }

}


@media only screen and (min-width:1536px) and (max-width:1600px){
    
            
      #download_result .score_result {
        top: 54px !important;
        left: 70px !important;
    }
            
        
    #next_form .score_chart .score_result {
      top: 20px;
        left: 52px;
    }
    #next_form .score_chart .box canvas{
        left: 56px;
         top:-10px;
    }
     #next_form .score_chart .box canvas{
        /*left: 21px;*/
        /* top:51px;*/
    }
     fieldset .score_chart .box canvas{
        top:20px;
        height: 120px !important;
    width: 120px !important;
    }
     fieldset .score_chart .score_result{
        top:50px;
    left: 50px;
            
    }
    .score_chart .box canvas{
        top:0px;
    }
  .score_result {
    top: 60px;
    left: 70px;
}
    #next_form .modal-content{
        top: 5%;
    }
    #next_form .modal-header{
        position: relative;
    top: -17px;
            padding-bottom: 0px;
    }
    .question_wrap{
        /*padding-top: 20px;*/
        /*padding-bottom: 20px;*/
    }
    .score_chart_desc {
        padding: 16px 0px 20px 0px;
        /*height: 111px;*/
    }
    .score_chart{
        /*height: 256px;*/
    }
    #progressbar{
        padding: 12px 0px;
    }
    .modal button img {
        width: 28px;
    }

}




@media only screen and (min-width:2001px){

    #next_form .modal-content {
        top: 16%;
    }
    #next_form .modal-header{
        position: relative;
    top: -57px;
    right: 0px;
    }

}