.view-full{ background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(39, 39, 39, 1) 100%); height:100%; }
.text-center{ text-align:center; }
.top-panel{ padding:25px 0; margin:auto; display:flex; flex-direction:column; align-items: center; background:rgba(70, 70, 70, .9); }
.head-txt{ font-family: 'hanson', sans-serif; font-size:35px; letter-spacing:25px; color:#fff; font-weight:800; }
.header-top{ display:flex; align-items:center; justify-content:center; gap:10px; background:#151515 url(../images/bg-texture.png) no-repeat; height:53px; background-size:contain; }
.header-top span{ font-family: 'hanson', sans-serif; color:#fff; font-weight:700; letter-spacing:2px; }
.search-box-input{ background:#0d0d0d url(../images/icon-search.png) no-repeat; display:flex; align-items:center; background-size: 18px 18px; background-position:92% center; width:280px; margin-left:auto; padding: 8px 10px 8px 60px; border-radius: 20px; position:Relative; }
.search-box-input input[type="text"]{ background:transparent; border:0; color:#fff; }
.search-box-input input[type="text"]:focus{outline:0; }
.search-box-input::before{ width:1px; height:100%; background:rgba(255, 255, 255, .4); content:''; top:0; position:absolute; right:55px; }
.head-stats{ background:#0d0d0d; color:#fff; margin:15px 0; padding:8px 15px; border:1px solid #000; border-radius:50px; }
.head-one{ width:25%; }
.head-title{ font-size:13px; font-weight:600; letter-spacing:.05rem; }
.head-middle{ width:50%; }
.list-data{ margin:0 0 30px; height:240px; padding:0; list-style:none; display:flex; width:100%; flex-direction: column; gap: 10px; position:sticky; top:380px; }
.odd-list{ width:100%; background:#2e2e2e; gap: 13%; display:flex; align-items:center; padding:0 0 0 20px; color:#fff; }
.even-list{ width:100%; background:#1e1e1e; gap: 13%; display:flex; align-items:center; padding:0 0 0 20px; color:#fff; box-shadow:0 2px 4px rgba(0, 0, 0, .25); }
.vote-txt{ background:#e25b25; padding:8px 20px; border-radius:0 10px 10px 0; margin-left: auto; font-size: 14px; font-weight:700; }
.serial-data{ margin:2px 0; }
.serial-data img{ margin-right:30px; }
.right-records{ display: flex; margin-left: auto; gap: 85px; }
.votes{ color:#c7c7c7; font-weight: 700; }
.serial{ min-width:20px; position:relative; font-weight: 700; }
.list-data{ width:100%; height:240px; overflow: auto; padding-right:4px; }
.list-data::-webkit-scrollbar-thumb {
        border: 5px solid #f2f2f2;
        border-radius: 10px;
        background-clip: content-box;
       -webkit-background-clip: content-box;
    }

.list-data::-webkit-scrollbar-thumb:hover {
        background-color: #f2f2f2;
        background-clip: border-box;
       -webkit-background-clip: border-box;
    }

.list-data::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
    }
.list-data:hover::-webkit-scrollbar-track {
    background: #000;
}
.list-data li{ position:relative; border-radius:15px; }
.serial-list{ gap:50px; align-items:center; }
.odd-list:before{ background:url(../images/bg-rank.png) no-repeat; content:''; width:80px; height:40px; position:absolute; top:0; left:0; }
.even-list:before{ background:url(../images/bg-rank-new.png) no-repeat; content:''; width:80px; height:40px; position:absolute; top:0; left:0; }
.singer-name{ font-weight:700; }
.header{ position:sticky; top: 0; z-index:99; }
.search-Div{ position:sticky; top: 270px; z-index:99; }
.ad-content{ position:sticky; top: 270px; }
@media screen and (max-width:767px){
.list-data li{ position:relative; min-height:40px; }
.serial-data{ margin:0; position:relative; }
.serial-list{ gap:10px; }
.right-records{ gap:15px; }
.serial{ min-width:20px; }
.odd-list,.even-list{ gap:10%; }
.vote-txt{ font-size:13px; padding:8px 15px; }
.serial-data img{ margin-right:20px; }
.head-txt{ font-size:16px; }
.top-panel{ padding:25px 10px; }
.head-txt { font-size:16px; padding-left:10px; }
.serial-data img{ width:32px; height:32px; }
.list-data li{ font-size:13px; }
.right-records { height:100%; } 
}