.results{
    background-color:#fff;
    padding:55px 0 10px 0;
    
}
a:hover{
    text-decoration:none;
}
/* .results .form-group{
    width:25%;
    margin:0 auto;
    
} */
::placeholder{
    font-size:14px;
    font-weight:400;
    color:#272626;
}
.results .form-control{
    font-size:14px;
    color:#272726;
    padding:10px 22px;
    background-color:#fff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 7px;
    margin:0;
}
.results .form-control:focus{
   border-color:transparent;
   outline:0;
}
.results .form-group .submit{
    font-size:16px;
    font-weight:400;
    color:#fff;    margin-top: 2.1rem !important;
    padding:3px 12px;
    background: linear-gradient(180deg, #4596C9 0%, #065494 100%);
    border-radius:9px;
    border:none;
    cursor:pointer;
    background: transparent linear-gradient(260deg, #E61D1D 0%, #7B0202 100%) 0% 0% no-repeat padding-box;
    
    
}
.form-group label{
    background: transparent;
}
.results .form-group .submit:focus{
    border:none;
    outline:0;
}
.final-registration{
    display:flex;
    
    
}
.submit{
    margin-left:20px;
    margin-top:5px;
}

.results .form-group .submit:hover{
    background:#000;
    color: #fff;
}
.congratz img{
    width:100%;
}
.congratz{
    width:13%;
    margin:0 auto 10px;
}

.final-result{
    padding:10px 0;
}
.final-result .form-group{
    
    padding: 10px;
    display:flex;
    align-items:center;
}
.form-group{
    margin-bottom:0;
}


.horizontal-line{
    width:100%;
    height:1px;
    opacity:0.3;
    background-color:#000;
    
}
.final-result .form-control{
    font-size:18px;
    border:none;
    border-left:0.7px solid rgba(22, 22, 22, 0.6);
    border-radius:0;
    background-color:transparent;
    cursor:context-menu;
    letter-spacing:1px;
    font-weight:bold;
}
.final-result .form-control:focus{
   box-shadow:none;
}
.final-result-inner{
    background: rgba(224, 223, 223, 0.06);
    border-top: 2px solid rgba(11, 88, 138, 0.85);
    border-bottom:2px solid rgba(11, 88, 138, 0.85);
    border-radius:5px;
    margin:0 0 10px;
}
.final-result label{
    font-size:16px;
    font-weight:600;
    background:transparent;
}
.marks-scored{
    font-size:19px;
    color:#393838;
    font-weight:500;
    font-family: "Mulish-Bold";
}
.score{
    width: 90px;
    height:90px;
    border-radius:50%;
    background: rgba(241, 238, 238, 1);
    margin:0 auto;
    padding:20px;
    border:4px solid #fff;

    
    
}
.score h2{
    font-size:35px;
    /* font-weight:800; */
    font-family: "ProximaNova-Bold";
    background: linear-gradient(180deg, #0f4c75 22.04%, #055A9F 93.68%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.error{
    color: red;
    font-size: 12px;
}
.outer-circle{
    width:102px;
    height:102px;
    border-radius:100%;
    padding:6px;
    background-image:linear-gradient(180deg, #F36F2F 2.84%, #F3201D 51.3%, #EEBB25 100%);
    background-clip: border-box;
    margin:0 auto 14px;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.23));
}
.horz-line{
    width:100%;
    opacity:0.2;
    height:1px;
    border-top:1px dashed #000;
    margin:0 0 10px;

}
.pdf{
    display:flex;
    align-items:center;
    justify-content:center;
}
.pdf-image{
    width:5%;
}
.pdf-image img{
    width:100%;
}
.view{
    font-size:14px;
    font-weight:400;
    opacity:0.8;
    color:#1E1E1F;
    margin:0 0 0 12px;
}
#my-canvas{
    width:375px;
    position:absolute;
    top:0;
    left:20px;
    scale:1.9;
    
}





@media(min-width:992px) and (max-width:1199px){
    .results{
        background-color:#fff;
        padding:40px 0 10px 0;
    }
    
    .results .form-control{
        
        margin:0;
    }
    .final-result{
        padding:10px 0;
    }
    .banner-title{
        left: 26px;
        bottom: 72px;
    }
    .banner-bg img{
        /* height:200px; */
        width:100%;
    }
    .outer-box{
        width:70%;
        margin:auto;
        padding:40px;
        box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.16);
    }
    #my-canvas{
        width: 340px;
        position: absolute;
        top: 0;
        left: 20px;
        scale: 1.8;
    }
    .banner .vert-center img {
        width: 270px;
      }

}
@media(min-width:768px) and (max-width:991px){
    .results{
        background-color:#fff;
        padding:40px 0 10px 0;
    }
    .final-result{
        padding:10px 0;
    }
   
    .banner-title{
        left: 26px;
        bottom: 60px;
    }
    .congratz{
        width:10%;
    }
    .banner-bg img{
        width:100%;
        height: 200px;
    }
    .banner .vert-center img {
        width: 245px;
      }
    .outer-box{
        width:80%;
        margin:auto;
        padding:40px;
        box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.16);
    }
    #my-canvas{
        width: 249px;
        position: absolute;
        top: 0;
        left: 20px;
        scale: 2.3;
    }
}

@media(min-width:600px) and (max-width:767px){
    .results{
        background-color:#fff;
        padding:40px 0 10px 0;
    }
    .final-result{
        padding:10px 0;
    }
    
   
    .banner-title{
        font-size:28px;
        left: 16px;
        bottom: 60px;
    }
    .congratz{
        width:10%;
    }
    .banner-bg img{
        width:100%;
        height:225px;
      }
    .banner .vert-center img {
        width: 245px;
      }
    .outer-box{
        width:95%;
        margin:auto;
        padding:40px;
        box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.16);
    }
    #my-canvas{
        width: 275px;
        position: absolute;
        top: 0;
        left: 20px;
        scale: 1.8;
    }
}

@media(min-width:360px) and (max-width:559px){
    .final-result .form-control{
        font-size:14px;
    }
    .results{
        padding:20px 0 10px 0;
    }
    .final-result{
        padding:10px 0;
    }
    .results .form-control{
        padding:10px;
      
    }
    .banner-title{
        font-size:20px;
        left: 12px;
        bottom: 40px;
    }
    .congratz{
        width:10%;
    }
    .final-result label{
        font-size:13px;
    }
    .banner-bg img{
        width:100%;
        height:125px;
    }
    .outer-box{
        width:100%;
        margin:auto;
        padding:30px 3px 0;
        box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.16);
    }
    #my-canvas{
        width: 150px;
        position: absolute;
        top: 0;
        left: 70px;
        scale: 2.1;
    }
}
@media(max-width:359px){
    .banner-title{
        font-size:20px;
        left: 12px;
        bottom: 40px;
    }
    .results{
        padding:20px 0 10px 0;
    }
    .final-result{
        padding:10px 0;
    }
    
    .results .form-control{
        margin:0 0 15px;
        padding:10px 4px;
    }
    .final-result .form-control{
        font-size:11px;
    }
    .final-result label{
        font-size:10px;
    }
    .congratz{
        width:10%;
    }
    .banner-bg img{
        width:100%;
        height:115px;
    }
    .outer-box{
        width:100%;
        margin:auto;
        padding:30px 12px 0;
        box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.16);
    }
    #my-canvas{
        width: 140px;
        position: absolute;
        top: 0;
        left: 60px;
        scale: 1.8;
    }
}