/* ==========================================
   ECEM LIVE LEADERBOARD
========================================== */


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


body{

    font-family:

    Arial,

    Helvetica,

    sans-serif;

    background:#eef4fb;

    color:#111827;

}


/* MAIN */

.leaderboard-container{

    min-height:100vh;

    display:flex;

    flex-direction:column;

}


/* HEADER */

.leaderboard-header{

    background:#1554a5;

    color:white;

    padding:18px 8%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    box-shadow:

    0 4px 12px

    rgba(0,0,0,0.20);

}


.brand-box{

    display:flex;

    align-items:center;

    gap:25px;

}


.brand-box img{

    width:105px;

    height:105px;

    object-fit:contain;

    background:white;

}


.brand-box h1{

    font-size:42px;

    font-weight:700;

}


.brand-box p{

    font-size:25px;

    margin-top:5px;

}


/* BACK BUTTON */

.back-btn{

    color:white;

    text-decoration:none;

    font-size:18px;

    padding:12px 18px;

    border-radius:7px;

    transition:0.3s;

}


.back-btn:hover{

    background:#0d3d7a;

}


/* MAIN */

.leaderboard-main{

    flex:1;

    padding:65px 3%;

}


/* CARD */

.leaderboard-card{

    background:white;

    border-radius:30px;

    padding:45px 50px;

    box-shadow:

    0 10px 30px

    rgba(0,0,0,0.12);

}


.leaderboard-card h2{

    text-align:center;

    color:#1554a5;

    font-size:55px;

    margin-bottom:50px;

}


/* TABLE */

.table-wrapper{

    width:100%;

    overflow-x:auto;

}


table{

    width:100%;

    border-collapse:collapse;

    min-width:950px;

}


thead{

    background:#1554a5;

    color:white;

}


th{

    padding:20px 15px;

    font-size:20px;

}


td{

    padding:15px;

    text-align:center;

    font-size:18px;

    border-bottom:1px solid #e5e7eb;

}


tbody tr:hover{

    background:#f1f5f9;

}


/* PHOTO */

.student-photo{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #1554a5;

}


.default-photo{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#dbeafe;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    color:#1554a5;

    font-size:25px;

}


/* RANK */

.rank-1{

    font-size:25px;

    font-weight:bold;

}


.rank-2{

    font-size:23px;

    font-weight:bold;

}


.rank-3{

    font-size:22px;

    font-weight:bold;

}


/* NO DATA */

.no-data{

    padding:35px;

    font-size:20px;

    color:#64748b;

}


/* FOOTER */

footer{

    background:#1554a5;

    color:white;

    text-align:center;

    padding:25px;

    font-size:20px;

}


/* RESPONSIVE */

@media(max-width:900px){

    .leaderboard-header{

        padding:20px;

        flex-direction:column;

        gap:20px;

        align-items:flex-start;

    }


    .brand-box h1{

        font-size:28px;

    }


    .brand-box p{

        font-size:20px;

    }


    .leaderboard-card h2{

        font-size:35px;

    }


}


@media(max-width:600px){

    .brand-box img{

        width:75px;

        height:75px;

    }


    .brand-box h1{

        font-size:20px;

    }


    .brand-box p{

        font-size:16px;

    }


    .leaderboard-main{

        padding:25px 15px;

    }


    .leaderboard-card{

        padding:25px 15px;

    }

}