*{ box-sizing: border-box; 
   padding: 0;
   margin: 0;
 font-family: sans-serif;}


#leaderboard-navbar{padding:4px 2px;
                background: rgba(200 ,200, 200,0.06);
                color:lightblue;
                margin-bottom: 0;}


#leaderboard-links-wrapper{
                       text-align: center;
                   list-style: none;
                 display: grid;
                 grid-gap:10px;
              grid-template-columns:repeat(3, 1fr);
              align-items: center;}


#leaderboard-links-wrapper li{
                       font-size: 12.5px;
                   font-weight: bold;
                 cursor:pointer;
                 padding:5px;
               word-spacing: 1.9px;}


.leaderboard-count{font-size: 11px;
               font-weight: normal;
               color: rgba(255, 255, 255, 0.8);
              padding-left: 2px;}


.leaderboard-active_link{color:aqua;
                   border: 1px solid teal;
                   border-radius: 3px;
                   box-shadow:0 2px 4px 0 rgba(0, 0, 0, 1) ;}


.leaderboard-header-wrapper{display: grid;
                     grid-gap: 10px;
                     grid-template-columns:repeat(4, 1fr);
                    border-bottom: 1px solid rgba(255, 255,255, 0.07);
                 padding: 15px 2px;
                 color: rgba(255, 255, 255, 0.9);

                 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
                 }


.leaderboard-header-wrapper .header-item{ font-weight: bold;
 text-transform: capitalize;
 font-size: 13px; }



.leaderboard-wrapper{display: grid;
                     grid-gap: 10px;
                     grid-template-columns:repeat(4, 1fr);
                    border-bottom: 1px solid rgba(255, 255,255, 0.08);
                 padding: 15px 2px;
                 color: rgba(255, 255, 255, 0.9);

                 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
                 overflow-x: auto;
                 align-items: center;
                 }


.leaderboard-wrapper .position{}

.leaderboard-wrapper .position span{padding-left: 10px;
       font-weight: bold;
       font-size: 17px;
      color: whitesmoke;}



.leaderboard-wrapper .friend-name{cursor: pointer;}

.leaderboard-wrapper .friend-name img{width: 35px;
                                     height: 35px;
                                      object-fit: cover;
                                      padding: 1px;
                                      border-radius: 50%;
                                     border: 1px solid rgba(255, 255, 255, 0.5);
                                     }

.leaderboard-wrapper .friend-name span{
   margin-left: 2px; 
   text-transform: capitalize;
 word-spacing: 1.9px;
padding-top: 2px;
display: block;
font-size: 14px;}

.leaderboard-wrapper .points{}

.leaderboard-wrapper .points span{color: aqua;}


.leaderboard-wrapper .level{}

.leaderboard-wrapper .level span{color: lightblue;}


.user-leaderboard-wrapper{display: none;}