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

table#myTable{table-layout:fixed;/* overflow:hidden; *//* border-radius:10px 10px 0 0; *//* box-shadow: 1px 1px 1px #000; */}
#myTable thead{border-radius:20px 20px 0 0;overflow:hidden}
td.trank{width:75px;text-align:center;font-size: 24px;font-weight:800;background-color:#cccccc29;font-family: 'Staatliches', cursive;}
th.colrank{width:75px;text-align:center;color:#CCC}
#myTable th{background-color:#FFF;height:60px;border-bottom-color: #efab59 !important;}
th.colrating{color: #8c8d8e;}
td.trating, td.bteam{padding:18px 0;font-weight:400;font-size:14px;text-align:center;color: #000;}
td.bteam{
    text-align: left;
    color: #999;
    font-size: 12px;
    padding: 21px 0 0 0;
}
td.tkills, td.tdmg, td.theal{padding: 22px 0;font-weight:400;font-size: 12px;text-align:center;color: #999;width: auto;}
#myTable th.colrating{text-align:center;width:100px;padding:.75rem;text-transform: uppercase;color: #000;}
#myTable th.colbody{width: 200px;}
#myTable th.colkills, #myTable th.coldmg, #myTable th.colheal{text-align:center;width: 80px;padding:.75rem;color: #636363;text-transform: uppercase;font-size: 10px;}
td.trankbody{padding: 10px 0;font-size:14px;min-width: 200px;}
#myTable.table-striped tbody tr{border-bottom:2px solid #e6e6e6}
#myTable.table tr:hover, #myTable.table tr:hover td{background-color: #e5f3ff !important;color:#000;}
#myTable.table tr:hover td{color:#000}
#myTable.table td.top{font-weight: 600;color:#000;}
h1 span {
    color: #9c9c9c;
    margin: 0 12px;
    letter-spacing: -2px;
}
h1 a{color:#CCC}
h1 a:hover{color: #f78540;}
h1 i {
    font-size: 30px;
    margin: 0 0 0 0px;
}
h1.h1nav a{white-space:nowrap;}

.statuslegend span.hili:before {background-color: #ffd5a2;}
.statuslegend span.hili a {color: #ff8b00;}
span#runTour1:before {background-color: #2c9611;}
span#runTour1{cursor: pointer}
.mainrank .table-responsive {
border-radius: 10px;
background: #e0e0e0;
box-shadow:  4px 4px 8px #bebebe,
             -8px -8px 14px #ffffff;
}

h1 {
    font-family: 'Staatliches', cursive;
    letter-spacing:1px
}

.bg-image-holder, .bg-slideshow-holder {
    background-position: top 60px center;
}
section#informations {
    min-height: 200px;
    padding: 50px 0 0 0;
}

.statuslegend span.ranksys:before {
    background-color: #ff9800;
}
.statuslegend a { color: #000}
.statuslegend a:hover { color: #999}

#myTable th.colbody {
  color: #b4b4b4;
  letter-spacing: 1px;
}
:root {
  --primary: #efab59;
}

.page__numbers.active a {
    color: #FFF;
}
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.page__numbers a{text-decoration:none !important;}
.page__numbers, .page__btn, .page__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
  font-size: 1.4rem;
  cursor: pointer;
}
.page__dots {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--greyLight);
  cursor: initial;
}
.page__numbers {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.4rem;
}
.page__numbers:hover {
  color: var(--primary);
}
.page__numbers.active {
  color: #ffffff;
  background: var(--primary);
  font-weight: 600;
  border: 10px solid var(--primary);
}
.page__btn {
  color: var(--greyLight);
  pointer-events: none;
}
.page__btn.active {
  color: var(--greyDark);
  pointer-events: initial;
}
.page__btn.active:hover {
  color: var(--primary);
}
.page__numbers a{color:#999}

  .player {width: 210px;display: inline-block;font-size: 12px;font-weight: 400;color: #000;line-height: 40px;margin: 0 10px 0 0;text-overflow: ellipsis;white-space: nowrap;}
  .player img {width: 36px;float: left;margin: 2px 8px 0 0;border-radius:50px;border: 2px solid #fff;background-color:#c6c6c6;box-shadow: 0 1px 1px #5f5f5f59;}  
  .player a{color:#000}
  .player a:hover{color:#333}
  
  .mcontainer.friends.players, .mcontainer.requesting.players {/* border-left: 5px solid #b7b7b7ab; */padding: 0 0 0 15px;clear: both;}
  .mcontainer.requesting.players {border-left:5px dotted #b7b7b7ab;}
  
  .icostatus {position: relative;}
  .icostatus:before {content: '';width: 14px;height: 14px;position: absolute;left: -2px;top: -2px;background-color: #6b6b6b;border-radius: 50%;border: 1px solid #FFF;box-shadow: 1px 1px 2px #33333385;}

  .icostatus.availableToPlay.online.busy:before {background-color: #0898ff;}
  .icostatus.availableToPlay.online.busy img{border-color: #0898ff;}

  .icostatus.availableToPlay.online.playing:before {background-color: #61d227;}
  .icostatus.availableToPlay.online.playing img{border-color: #5bcc20;}

  .icostatus.availableToPlay.online.idle:before {background-color: #ff9f1b;}
  .icostatus.availableToPlay.online.idle img{border-color:#ff9f1b}
  /*
  .icostatus.unavailable.offline {opacity: 0.25;display: none;}
  .icostatus.null.null {opacity: 0.25;display: none;}
  */

  .statuslegend {display: block;text-align: center;margin: 5px auto 19px auto;border: 1px solid #CCC;padding: 8px 4px;border-radius: 4px;background-color: #FFF;max-width: 470px;}
  .statuslegend span {font-size: 11px;padding: 4px;font-weight: 600;margin: 0 12px;position: relative;}

  .statuslegend span:before {content: '';width: 10px;height: 10px;border-radius: 50px;background-color: #ccc;display: inline-block;margin: 0 7px 0 0;}
  .statuslegend span.playing:before{ background-color:#61d126}
  .statuslegend span.idle:before{ background-color:#ff9e19}
  .statuslegend span.playingothers:before{ background-color:#0499fe}
  
  .icostatus em{font-size: 11px;font-style: normal;color: #FFF;background-color: #444444;letter-spacing: 0px;width: 24px;height: 24px;line-height: 23px;border-radius: 50%;position: absolute;top: -5px;left: 37px;border: 1px solid #FFF;text-align: center;font-weight: 400;text-shadow: 1px 1px 1px #272727;padding: 0 0 0 1px;}
  img.trophy {
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    width: 37px;
    margin: 0 4px 0 0;
    box-shadow: none;
  }
td.baction{padding: 20px 0 0 10px;}
td.baction a {
    border: 1px solid #999;
    padding: 5px 10px;
    border-radius: 40px;
    font-size: 12px;
    font-variant: all-petite-caps;
    color: #000; 
}
td.baction a:hover{
    background-color:#efab59; border-color:#efab59;
    color:#FFF
}
td.bvehicle1 img, td.bvehicle2 img {
    width: 90px;
}

td.bvehicle1, td.bvehicle2 {
    width: 100px;
    padding: 5px 0 0 0;
}

th.colvehicle1, th.colvehicle2 {
    width: 100px;
}
th.collev {
    color: #999;
    font-weight: 400;
    width: 100px;
    text-align: left;
    padding-left: 12px;
}

td.blevel {
    padding: 20px 0 0 15px;
    text-align: left;
}

tr.ra1 td {background-color: #ffeaea;}
tr.ra1 td.trank {background-color: #f9d9d9;}
tr.ra2 td {background-color: #fff8e9;}
tr.ra2 td.trank {background-color: #ffefce;}
tr.ra3 td {background-color: #fffbe9;}
tr.ra3 td.trank {background-color: #fdf8da;}

img.trophy.type_legend {width: 50px;margin: -5px -1px -5px -8px;}

.statuslegend.topgames div {
    float: left;
    font-size: 10px;
    line-height: 25px;
    padding: 0px 12px;
    background-color: #898989;
    color: #FFF;
    font-weight: 600;
    width: 64px;
}
.statuslegend.topgames.active{border-color: #e37204;}
.statuslegend.topgames.active div {background-color: #e37204;}

.statuslegend.topgames span {
    margin: 0 6px;
    padding: 10px 5px;
}

.statuslegend.topgames {
    padding: 0 0;
}

.team #myTable th.colteam {
    width: 80px;
}

.team .player {
    width: 150px;
}

.team #myTable th.colbody {
    width: auto;
    color: #000;
    font-weight: 600;
    min-width: 240px;
}

.team .player img {
    margin: 0 5px 0 0;
}

@media (max-width: 576px) {
  table#myTable{ table-layout:inherit}

}

@media (max-width: 510px) {
  span.sitetour {
      display: none;
  }
}