.login-avatar{
    height:50px; 
    width:50px; 
    border-radius:100%; 
    margin:0px 0px 15px 0px;
}
.banner-img{
    height:450px; 
    width:100%; 
    border-radius:5px; 
    border:0px;
}

.result-box{
    height:auto; 
    width:40%; 
    border-radius:5px; 
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    padding:20px;
    margin:30px 0px 25px 0px;
    display: inline-block;
    text-align:left;
}

.msg-box{
    height: 40px;
    width: 40%;
    background: lightcoral;
    color:white !important;
    border-radius:5px;
    display:inline-block;
    margin-top:10px;
}


.report-card-header1{
    width:100%;
    height:115px;
     color:black;
     background: white;
     border-radius:5px;
     padding:5px;
     text-align:center;
     margin-bottom: 15px;
     font-size: 15px;
     float:left;
}

.report-card-header2{
    width:100%;
    height:100px;
     color:black;
     background: white;
     border-radius:5px;
     padding:5px;
     text-align:center;
     margin-bottom: 15px;
     font-size: 15px;
     float:left;
}

.school-logo{
    height:100px;
    width:100px;
    margin:10px 0px 0px 50px;
    padding:5px;
    float:left;
}

.school-info{
    height:80px;
    margin:10px;
    padding:5px;
}

.student-profile{
    height:100px;
    width:100px;
    margin:10px 50px 0px 0px;
    padding:5px;
    float:right;
}

.result-table{
    text-align:center;
    width:85%;
    font-size:12px;
}

.perform-table-div{
    text-align: center;
    width:30%;
    float:left;
    margin:5px;
}

.perform-table{
    text-align: center;
    width:70%;
    font-size:12px;
}


@media (max-width: 768px) {
    .result-box{
        height:auto; 
        width:60%; 
        padding:10px;
        margin:15px 10px 15px 10px;
    }

    .msg-box{
        height: 40px;
        width: 60%;
       
    }

    .report-card-header1{
        width:100%;
        height:60px;
        border-radius:5px;
        text-align:center;
        margin-bottom: 15px;
        font-size: 10px;
        float:left;
    }

    .report-card-header2{
        width:100%;
        height:60px;
         border-radius:5px;
         padding:5px;
         font-size: 10px;
         float:left;
    }
    
    .school-logo{
        height:50px;
        width:50px;
        margin:10px;
        padding:5px;
        float:left;
    }
    
    .school-info{
        height:40px;
        width:100%;
        margin:10px;
        float:right;
        line-height: 1;
    }
    
    .student-profile{
        height:50px;
        width:50px;
        margin:10px;
        padding:5px;
        float:right;
    }

    .perform-table-div{
        text-align: center;
        width:100%;
        float:left;
        margin:5px;
    }
    
    .perform-table{
        text-align: center;
        width:70%;
        font-size:12px;
    }

    .result-table{
        text-align:center;
        width:95%;
        font-size:12px;
    }

    }

@media (max-width: 480px) {
    .result-box{
        height:auto; 
        width:90%; 
        padding:10px;
        margin:15px 10px 15px 10px;
    }

    .report-card-header1{
        width:100%;
        height:60px;
        border-radius:5px;
        text-align:center;
        margin-bottom: 15px;
        font-size: 10px;
        float:left;
    }

    .report-card-header2{
        width:100%;
        height:60px;
         border-radius:5px;
         padding:5px;
         font-size: 10px;
         float:left;
    }
    
    .school-logo{
        height:50px;
        width:50px;
        margin:10px;
        padding:5px;
        float:left;
    }
    
    .school-info{
        height:40px;
        width:100%;
        margin:10px;
        float:right;
        line-height: 1;
    }
    
    .student-profile{
        height:50px;
        width:50px;
        margin:10px;
        padding:5px;
        float:right;
    }

    .perform-table-div{
        text-align: center;
        width:100%;
        float:left;
        margin:5px;
    }
    
    .perform-table{
        text-align: center;
        width:70%;
        font-size:12px;
    }

    .result-table{
        text-align:center;
        width:95%;
        font-size:12px;
    }
    }


@media (max-width: 351px) {
    .banner-img{
        height:350px; 
        width:100%; 
        border-radius:5px; 
        border:0px;
    }

    .result-box{
        height:auto; 
        width:90%; 
        padding:10px;
        margin:15px 10px 15px 10px;
    }

    .report-card-header1{
        width:100%;
        height:60px;
        border-radius:5px;
        text-align:center;
        margin-bottom: 15px;
        font-size: 10px;
        float:left;
    }

    .report-card-header2{
        width:100%;
        height:60px;
         border-radius:5px;
         padding:5px;
         font-size: 10px;
         float:left;
    }
    
    .school-logo{
        height:50px;
        width:50px;
        margin:10px;
        padding:5px;
        float:left;
    }
    
    .school-info{
        height:40px;
        width:100%;
        margin:10px;
        float:right;
        line-height: 1;
    }
    
    .student-profile{
        height:50px;
        width:50px;
        margin:10px;
        padding:5px;
        float:right;
    }

    .perform-table-div{
        text-align: center;
        width:100%;
        float:left;
        margin:5px;
    }
    
    .perform-table{
        text-align: center;
        width:70%;
        font-size:12px;
    }

    .result-table{
        text-align:center;
        width:95%;
        font-size:12px;
    }
    
}