@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

* {
    font-size: 14px;
    font-family: Montserrat;
    color: white;
    padding: 0;
    margin: 0;
    user-select: none;
}

body {
    background-color: #1a1a1a;
}

table {
    border-collapse: separate;
    border-spacing: 0 1px;
    width: 100%; 
}

.top-title {
    font-size: 19px;
}

.steam-name-container {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.steam-icon {
    width: 9px;
    height: 9px;
    cursor: default;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-select: none;
}

.player-avatar {
    width: 25px;
    height: 25px;
    background-size: cover;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
}

td {
    padding: 2px;
    text-align: center;  
    background-color: #1a1a1a;
    transition: background-color 0.3s, border-color 0.3s;
}

table tr:nth-child(even) td {
    background-color: #2a2a2a;
}

td:nth-child(1) { width: 1%; }
td:nth-child(2) { width: 5%; }
td:nth-child(3) { width: 10%; }

tr:hover td {
    background-color: #222;
    border-color: #6b6b6b;
}

#td1 td {
    border-color: #aa9101;
}
#td1:hover td {
    border-color: #ffd700;
}

#td2 td {
    border-color: #a0a0a0;
}
#td2:hover td {
    border-color: #c8c8c8;
}

#td3 td {
    border-color: #7a3d00;
}
#td3:hover td {
    border-color: #b45a00;
}

.color {
    color: #0cd29d;
}

.img {
    width: 32px;
    height: 32px;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-container img {
    width: 28px;
    height: 28px;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s;
    display: block; 
    margin: 0 auto;
}

.tooltip-container:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(5px);
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: -30px; 
    left: 0; 
    background-color: #1e1e1e;
    color: #fff;
    text-align: center;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(12, 210, 157, 0.3);
    border: 1px solid #0cd29d;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    z-index: 20;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: #0cd29d transparent transparent transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(5px);
}

td.left-align {
    text-align: left;
    padding-left: 10px !important; 
}

td.points-col {
    padding-right: 2px;
}

td.nick-col {
    padding-left: -10px;
}

.player-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.player-online {
    background-image: url('./mRanks_Premium_Status_Player_Online.png');
}

.player-offline {
    background-image: url('./mRanks_Premium_Status_Player_Offline.png');
}

footer {
    text-align: center;
    font-family: Arial, sans-serif; 
    font-size: 12px;
    color: #888;
    margin: 10px 0;
}

footer .color {
    color: #0cd29d;
    font-weight: bold;
    font-family: inherit;
    font-size: inherit;
}

footer span {
    display: inline-block;
    vertical-align: middle;
}

footer:hover .color {
    color: #0beeb1;
    transition: color 0.3s ease;
}

.bottom-form {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
}

#reset-btn {
    background-color: #1a1a1a;
    border: 1px solid #ff0000;
    color: #ff6666;
    font-size: 15px;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.2);
}

#reset-btn:hover {
    background-color: #ff0000;
    color: white;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
}

form {
    text-align: center;
    margin-bottom: 15px;
}

.flag {
    width: 20px;
    height: 14px;
    background-size: cover;
    background-position: center;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 2px;
}

.flag.nn { background-image: url('./countries/nn.png'); }
.flag.ad { background-image: url('./countries/ad.png'); }
.flag.ae { background-image: url('./countries/ae.png'); }
.flag.af { background-image: url('./countries/af.png'); }
.flag.ag { background-image: url('./countries/ag.png'); }
.flag.ai { background-image: url('./countries/ai.png'); }
.flag.al { background-image: url('./countries/al.png'); }
.flag.am { background-image: url('./countries/am.png'); }
.flag.ao { background-image: url('./countries/ao.png'); }
.flag.aq { background-image: url('./countries/aq.png'); }
.flag.ar { background-image: url('./countries/ar.png'); }
.flag.as { background-image: url('./countries/as.png'); }
.flag.at { background-image: url('./countries/at.png'); }
.flag.au { background-image: url('./countries/au.png'); }
.flag.aw { background-image: url('./countries/aw.png'); }
.flag.az { background-image: url('./countries/az.png'); }
.flag.ba { background-image: url('./countries/ba.png'); }
.flag.bb { background-image: url('./countries/bb.png'); }
.flag.bd { background-image: url('./countries/bd.png'); }
.flag.be { background-image: url('./countries/be.png'); }
.flag.bf { background-image: url('./countries/bf.png'); }
.flag.bg { background-image: url('./countries/bg.png'); }
.flag.bh { background-image: url('./countries/bh.png'); }
.flag.bi { background-image: url('./countries/bi.png'); }
.flag.bj { background-image: url('./countries/bj.png'); }
.flag.bm { background-image: url('./countries/bm.png'); }
.flag.bn { background-image: url('./countries/bn.png'); }
.flag.bo { background-image: url('./countries/bo.png'); }
.flag.br { background-image: url('./countries/br.png'); }
.flag.bs { background-image: url('./countries/bs.png'); }
.flag.bt { background-image: url('./countries/bt.png'); }
.flag.bw { background-image: url('./countries/bw.png'); }
.flag.by { background-image: url('./countries/by.png'); }
.flag.bz { background-image: url('./countries/bz.png'); }
.flag.ca { background-image: url('./countries/ca.png'); }
.flag.cc { background-image: url('./countries/cc.png'); }
.flag.cd { background-image: url('./countries/cd.png'); }
.flag.cf { background-image: url('./countries/cf.png'); }
.flag.cg { background-image: url('./countries/cg.png'); }
.flag.ch { background-image: url('./countries/ch.png'); }
.flag.ci { background-image: url('./countries/ci.png'); }
.flag.ck { background-image: url('./countries/ck.png'); }
.flag.cl { background-image: url('./countries/cl.png'); }
.flag.cm { background-image: url('./countries/cm.png'); }
.flag.cn { background-image: url('./countries/cn.png'); }
.flag.co { background-image: url('./countries/co.png'); }
.flag.cr { background-image: url('./countries/cr.png'); }
.flag.cu { background-image: url('./countries/cu.png'); }
.flag.cw { background-image: url('./countries/cw.png'); }
.flag.cx { background-image: url('./countries/cx.png'); }
.flag.cy { background-image: url('./countries/cy.png'); }
.flag.cz { background-image: url('./countries/cz.png'); }
.flag.de { background-image: url('./countries/de.png'); }
.flag.dj { background-image: url('./countries/dj.png'); }
.flag.dk { background-image: url('./countries/dk.png'); }
.flag.dm { background-image: url('./countries/dm.png'); }
.flag.do { background-image: url('./countries/do.png'); }
.flag.dz { background-image: url('./countries/dz.png'); }
.flag.ec { background-image: url('./countries/ec.png'); }
.flag.ee { background-image: url('./countries/ee.png'); }
.flag.eg { background-image: url('./countries/eg.png'); }
.flag.eh { background-image: url('./countries/eh.png'); }
.flag.er { background-image: url('./countries/er.png'); }
.flag.es { background-image: url('./countries/es.png'); }
.flag.et { background-image: url('./countries/et.png'); }
.flag.fi { background-image: url('./countries/fi.png'); }
.flag.fj { background-image: url('./countries/fj.png'); }
.flag.fk { background-image: url('./countries/fk.png'); }
.flag.fo { background-image: url('./countries/fo.png'); }
.flag.fr { background-image: url('./countries/fr.png'); }
.flag.ga { background-image: url('./countries/ga.png'); }
.flag.gb { background-image: url('./countries/gb.png'); }
.flag.gd { background-image: url('./countries/gd.png'); }
.flag.ge { background-image: url('./countries/ge.png'); }
.flag.gg { background-image: url('./countries/gg.png'); }
.flag.gh { background-image: url('./countries/gh.png'); }
.flag.gi { background-image: url('./countries/gi.png'); }
.flag.gl { background-image: url('./countries/gl.png'); }
.flag.gm { background-image: url('./countries/gm.png'); }
.flag.gn { background-image: url('./countries/gn.png'); }
.flag.gq { background-image: url('./countries/gq.png'); }
.flag.gr { background-image: url('./countries/gr.png'); }
.flag.gt { background-image: url('./countries/gt.png'); }
.flag.gu { background-image: url('./countries/gu.png'); }
.flag.gw { background-image: url('./countries/gw.png'); }
.flag.gy { background-image: url('./countries/gy.png'); }
.flag.hk { background-image: url('./countries/hk.png'); }
.flag.hn { background-image: url('./countries/hn.png'); }
.flag.hr { background-image: url('./countries/hr.png'); }
.flag.ht { background-image: url('./countries/ht.png'); }
.flag.hu { background-image: url('./countries/hu.png'); }
.flag.id { background-image: url('./countries/id.png'); }
.flag.ie { background-image: url('./countries/ie.png'); }
.flag.il { background-image: url('./countries/il.png'); }
.flag.im { background-image: url('./countries/im.png'); }
.flag.in { background-image: url('./countries/in.png'); }
.flag.io { background-image: url('./countries/io.png'); }
.flag.iq { background-image: url('./countries/iq.png'); }
.flag.ir { background-image: url('./countries/ir.png'); }
.flag.is { background-image: url('./countries/is.png'); }
.flag.it { background-image: url('./countries/it.png'); }
.flag.je { background-image: url('./countries/je.png'); }
.flag.jm { background-image: url('./countries/jm.png'); }
.flag.jo { background-image: url('./countries/jo.png'); }
.flag.jp { background-image: url('./countries/jp.png'); }
.flag.ke { background-image: url('./countries/ke.png'); }
.flag.kg { background-image: url('./countries/kg.png'); }
.flag.kh { background-image: url('./countries/kh.png'); }
.flag.ki { background-image: url('./countries/ki.png'); }
.flag.km { background-image: url('./countries/km.png'); }
.flag.kn { background-image: url('./countries/kn.png'); }
.flag.kp { background-image: url('./countries/kp.png'); }
.flag.kr { background-image: url('./countries/kr.png'); }
.flag.kw { background-image: url('./countries/kw.png'); }
.flag.ky { background-image: url('./countries/ky.png'); }
.flag.kz { background-image: url('./countries/kz.png'); }
.flag.la { background-image: url('./countries/la.png'); }
.flag.lb { background-image: url('./countries/lb.png'); }
.flag.lc { background-image: url('./countries/lc.png'); }
.flag.li { background-image: url('./countries/li.png'); }
.flag.lk { background-image: url('./countries/lk.png'); }
.flag.lr { background-image: url('./countries/lr.png'); }
.flag.ls { background-image: url('./countries/ls.png'); }
.flag.lt { background-image: url('./countries/lt.png'); }
.flag.lu { background-image: url('./countries/lu.png'); }
.flag.lv { background-image: url('./countries/lv.png'); }
.flag.ly { background-image: url('./countries/ly.png'); }
.flag.ma { background-image: url('./countries/ma.png'); }
.flag.mc { background-image: url('./countries/mc.png'); }
.flag.md { background-image: url('./countries/md.png'); }
.flag.me { background-image: url('./countries/me.png'); }
.flag.mg { background-image: url('./countries/mg.png'); }
.flag.mh { background-image: url('./countries/mh.png'); }
.flag.mk { background-image: url('./countries/mk.png'); }
.flag.ml { background-image: url('./countries/ml.png'); }
.flag.mm { background-image: url('./countries/mm.png'); }
.flag.mn { background-image: url('./countries/mn.png'); }
.flag.mp { background-image: url('./countries/mp.png'); }
.flag.mr { background-image: url('./countries/mr.png'); }
.flag.ms { background-image: url('./countries/ms.png'); }
.flag.mt { background-image: url('./countries/mt.png'); }
.flag.mu { background-image: url('./countries/mu.png'); }
.flag.mv { background-image: url('./countries/mv.png'); }
.flag.mw { background-image: url('./countries/mw.png'); }
.flag.mx { background-image: url('./countries/mx.png'); }
.flag.my { background-image: url('./countries/my.png'); }
.flag.mz { background-image: url('./countries/mz.png'); }
.flag.na { background-image: url('./countries/na.png'); }
.flag.ne { background-image: url('./countries/ne.png'); }
.flag.ng { background-image: url('./countries/ng.png'); }
.flag.ni { background-image: url('./countries/ni.png'); }
.flag.nl { background-image: url('./countries/nl.png'); }
.flag.np { background-image: url('./countries/np.png'); }
.flag.nr { background-image: url('./countries/nr.png'); }
.flag.nu { background-image: url('./countries/nu.png'); }
.flag.nz { background-image: url('./countries/nz.png'); }
.flag.om { background-image: url('./countries/om.png'); }
.flag.pa { background-image: url('./countries/pa.png'); }
.flag.pe { background-image: url('./countries/pe.png'); }
.flag.pf { background-image: url('./countries/pf.png'); }
.flag.pg { background-image: url('./countries/pg.png'); }
.flag.ph { background-image: url('./countries/ph.png'); }
.flag.pk { background-image: url('./countries/pk.png'); }
.flag.pl { background-image: url('./countries/pl.png'); }
.flag.pn { background-image: url('./countries/pn.png'); }
.flag.pr { background-image: url('./countries/pr.png'); }
.flag.pt { background-image: url('./countries/pt.png'); }
.flag.pw { background-image: url('./countries/pw.png'); }
.flag.py { background-image: url('./countries/py.png'); }
.flag.qa { background-image: url('./countries/qa.png'); }
.flag.ro { background-image: url('./countries/ro.png'); }
.flag.rs { background-image: url('./countries/rs.png'); }
.flag.ru { background-image: url('./countries/ru.png'); }
.flag.rw { background-image: url('./countries/rw.png'); }
.flag.sa { background-image: url('./countries/sa.png'); }
.flag.sb { background-image: url('./countries/sb.png'); }
.flag.sc { background-image: url('./countries/sc.png'); }
.flag.sd { background-image: url('./countries/sd.png'); }
.flag.se { background-image: url('./countries/se.png'); }
.flag.sg { background-image: url('./countries/sg.png'); }
.flag.sh { background-image: url('./countries/sh.png'); }
.flag.si { background-image: url('./countries/si.png'); }
.flag.sj { background-image: url('./countries/sj.png'); }
.flag.sk { background-image: url('./countries/sk.png'); }
.flag.sl { background-image: url('./countries/sl.png'); }
.flag.sm { background-image: url('./countries/sm.png'); }
.flag.sn { background-image: url('./countries/sn.png'); }
.flag.so { background-image: url('./countries/so.png'); }
.flag.sr { background-image: url('./countries/sr.png'); }
.flag.ss { background-image: url('./countries/ss.png'); }
.flag.st { background-image: url('./countries/st.png'); }
.flag.sv { background-image: url('./countries/sv.png'); }
.flag.sx { background-image: url('./countries/sx.png'); }
.flag.sy { background-image: url('./countries/sy.png'); }
.flag.sz { background-image: url('./countries/sz.png'); }
.flag.tc { background-image: url('./countries/tc.png'); }
.flag.td { background-image: url('./countries/td.png'); }
.flag.tg { background-image: url('./countries/tg.png'); }
.flag.th { background-image: url('./countries/th.png'); }
.flag.tj { background-image: url('./countries/tj.png'); }
.flag.tk { background-image: url('./countries/tk.png'); }
.flag.tm { background-image: url('./countries/tm.png'); }
.flag.tn { background-image: url('./countries/tn.png'); }
.flag.to { background-image: url('./countries/to.png'); }
.flag.tr { background-image: url('./countries/tr.png'); }
.flag.tt { background-image: url('./countries/tt.png'); }
.flag.tv { background-image: url('./countries/tv.png'); }
.flag.tw { background-image: url('./countries/tw.png'); }
.flag.tz { background-image: url('./countries/tz.png'); }
.flag.ua { background-image: url('./countries/ua.png'); }
.flag.ug { background-image: url('./countries/ug.png'); }
.flag.us { background-image: url('./countries/us.png'); }
.flag.uy { background-image: url('./countries/uy.png'); }
.flag.uz { background-image: url('./countries/uz.png'); }
.flag.vc { background-image: url('./countries/vc.png'); }
.flag.ve { background-image: url('./countries/ve.png'); }
.flag.vn { background-image: url('./countries/vn.png'); }
.flag.vu { background-image: url('./countries/vu.png'); }
.flag.wf { background-image: url('./countries/wf.png'); }
.flag.ws { background-image: url('./countries/ws.png'); }
.flag.ye { background-image: url('./countries/ye.png'); }
.flag.yt { background-image: url('./countries/yt.png'); }
.flag.xk { background-image: url('./countries/xk.png'); }
.flag.za { background-image: url('./countries/za.png'); }
.flag.zm { background-image: url('./countries/zm.png'); }
.flag.zw { background-image: url('./countries/zw.png'); }

@media screen and (max-height: 900px) {
    * { font-size: 13px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 1px !important; }
    td { padding: 2px !important; font-size: 16px !important; }
    .top-title { font-size: 18px !important; }
    .player-avatar { width: 23px !important; height: 23px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 31px !important; height: 31px !important; }
    .rank { width: 99px !important; height: 24px !important; }
    .flag { width: 20px !important; height: 14px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 800px) {
    * { font-size: 13px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 1px !important; }
    td { padding: 2px !important; font-size: 13px !important; }
    .top-title { font-size: 18px !important; }
    .player-avatar { width: 23px !important; height: 23px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 31px !important; height: 31px !important; }
    .rank { width: 98px !important; height: 24px !important; }
    .flag { width: 20px !important; height: 14px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 700px) {
    * { font-size: 13px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 1px !important; }
    td { padding: 2px !important; font-size: 13px !important; }
    .top-title { font-size: 17px !important; }
    .player-avatar { width: 23px !important; height: 23px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 31px !important; height: 31px !important; }
    .rank { width: 97px !important; height: 23px !important; }
    .flag { width: 19px !important; height: 13px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 600px) {
    * { font-size: 17px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 1px !important; }
    td { padding: 0px !important; font-size: 15px !important; }
    .top-title { font-size: 17px !important; }
    .player-avatar { width: 23px !important; height: 23px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 30px !important; height: 30px !important; }
    .rank { width: 96px !important; height: 23px !important; }
    .flag { width: 19px !important; height: 13px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 515px) {
    * { font-size: 12px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 1px !important; }
    td { padding: 0px !important; font-size: 12px !important; }
    .top-title { font-size: 16px !important; }
    .player-avatar { width: 23px !important; height: 23px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 30px !important; height: 30px !important; }
    .rank { width: 95px !important; height: 23px !important; }
    .flag { width: 19px !important; height: 13px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 500px) {
    * { font-size: 12px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 1px !important; }
    td { padding: 0px !important; font-size: 12px !important; }
    .top-title { font-size: 16px !important; }
    .player-avatar { width: 23px !important; height: 23px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 30px !important; height: 30px !important; }
    .rank { width: 95px !important; height: 23px !important; }
    .flag { width: 19px !important; height: 13px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 495px) {
    * { font-size: 12px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 1px !important; }
    td { padding: 0px !important; font-size: 12px !important; }
    .top-title { font-size: 16px !important; }
    .player-avatar { width: 23px !important; height: 23px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 30px !important; height: 30px !important; }
    .rank { width: 90px !important; height: 22px !important; }
    .flag { width: 18px !important; height: 12px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 450px) {
    * { font-size: 12px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 1px !important; }
    td { padding: 0px !important; font-size: 12px !important; }
    .top-title { font-size: 16px !important; }
    .player-avatar { width: 13px !important; height: 13px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 28px !important; height: 28px !important; }
    .rank { width: 80px !important; height: 20px !important; }
    .flag { width: 17px !important; height: 12px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 435px) {
    * { font-size: 11px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 1px !important; }
    td { padding: 0px !important; font-size: 11px !important; }
    .top-title { font-size: 15px !important; }
    .player-avatar { width: 12px !important; height: 12px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 24px !important; height: 24px !important; }
    .rank { width: 70px !important; height: 18px !important; }
    .flag { width: 16px !important; height: 11px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 400px) {
    * { font-size: 10px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 1px !important; }
    td { padding: 0px !important; font-size: 10px !important; }
    .top-title { font-size: 14px !important; }
    .player-avatar { width: 11px !important; height: 11px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 20px !important; height: 20px !important; }
    .rank { width: 60px !important; height: 16px !important; }
    .flag { width: 14px !important; height: 10px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 385px) {
    * { font-size: 10px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 0px !important; }
    td { padding: 0px !important; font-size: 10px !important; }
    .top-title { font-size: 14px !important; }
    .player-avatar { width: 11px !important; height: 11px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 19px !important; height: 19px !important; }
    .rank { width: 55px !important; height: 14px !important; }
    .flag { width: 13px !important; height: 9px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 360px) {
    * { font-size: 9px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 0px !important; }
    td { padding: 0px !important; font-size: 9px !important; }
    .top-title { font-size: 13px !important; }
    .player-avatar { width: 10px !important; height: 10px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 18px !important; height: 18px !important; }
    .rank { width: 50px !important; height: 12px !important; }
    .flag { width: 12px !important; height: 8px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 332px) {
    * { font-size: 8px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 0px !important; }
    td { padding: 0px !important; font-size: 8px !important; }
    .top-title { font-size: 11px !important; }
    .player-avatar { width: 10px !important; height: 10px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 14px !important; height: 14px !important; }
    .rank { width: 40px !important; height: 10px !important; }
    .flag { width: 11px !important; height: 7px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 330px) {
    * { font-size: 8px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 0px !important; }
    td { border-top: none !important; border-bottom: none !important; padding: 0px !important; font-size: 8px !important; }
    .top-title { font-size: 11px !important; }
    .player-avatar { width: 10px !important; height: 10px !important; }
    .steam-icon { width: 9px !important; height: 9px !important; }
    .player-status { width: 8px !important; height: 8px !important; }
    .img { width: 14px !important; height: 14px !important; }
    .rank { width: 40px !important; height: 10px !important; }
    .flag { width: 11px !important; height: 7px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 288px) {
    * { font-size: 7px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 0px !important; }
    td { padding: 0px !important; font-size: 9px !important; }
    .top-title { font-size: 10px !important; }
    .player-avatar { width: 9px !important; height: 9px !important; }
    .steam-icon { width: 6px !important; height: 6px !important; }
    .player-status { width: 5px !important; height: 5px !important; }
    .img { width: 12px !important; height: 12px !important; }
    .rank { width: 35px !important; height: 9px !important; }
    .flag { width: 9px !important; height: 6px !important; }
    footer { font-size: 16px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}

@media screen and (max-height: 265px) {
    * { font-size: 8px !important; }
    body { overflow-x: hidden !important; }
    table { border-spacing: 0 0px !important; }
    td { padding: 0px !important; font-size: 7px !important; }
    .top-title { font-size: 8px !important; }
    .player-avatar { width: 8px !important; height: 8px !important; }
    .steam-icon { width: 5px !important; height: 5px !important; }
    .player-status { width: 4px !important; height: 4px !important; }
    .img { width: 10px !important; height: 10px !important; }
    .rank { width: 30px !important; height: 8px !important; }
    .flag { width: 8px !important; height: 5px !important; }
    footer { font-size: 6px !important; margin: 0px 0 !important; }
    footer .color { font-size: inherit !important; }
}