.screen-content[data-css-name="Leaderboard"] {
  color: #E6E6E6;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  /******************* EXTERNAL SCROLLBAR *******************/
  /*.scrollbar-external_wrapper > .scroll-x .scroll-arrow {
        background-image: url('skins/vista-x.png');
        background-repeat: repeat-x;
    }

    .scrollbar-external_wrapper > .scroll-y .scroll-arrow {
        background-image: url('skins/vista-y.png');
        background-repeat: repeat-y;
    }*/
  /* SCROLL ARROWS */
  /* PROCEED OFFSET IF ANOTHER SCROLL VISIBLE */
  /* PROCEED OFFSET IF ARROWS & ANOTHER SCROLL */
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] {
    background-color: #332F2E;
  }
}
.screen-content[data-css-name="Leaderboard"] .btn-finish {
  position: absolute;
  bottom: 14.11vh;
  right: calc(50vw - 440px - 38px);
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .btn-finish {
    bottom: 20px;
    right: unset;
    left: calc(50vw - 161.74px / 2);
  }
}
.screen-content[data-css-name="Leaderboard"] .btn-restart {
  position: absolute;
  bottom: 14.11vh;
  left: calc(50vw - 440px - 38px);
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .btn-restart {
    bottom: 70px;
    right: unset;
    left: calc(50vw - 161.74px / 2);
  }
}
.screen-content[data-css-name="Leaderboard"] h1 {
  font-size: 60px;
  font-weight: lighter;
  margin-top: 14.44vh;
  margin-bottom: 30px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] h1 {
    font-size: 20px;
    margin-top: 100px;
  }
}
.screen-content[data-css-name="Leaderboard"] h2 {
  font-size: 30px;
  font-weight: lighter;
  margin: 0;
  margin-bottom: 20px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] h2 {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank-header {
  height: 30px;
  width: 1050px;
  margin: auto;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .table-rank-header {
    width: 100vw;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank-header > div {
  float: left;
  color: #878788;
  font-size: 20px;
  height: 30px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .table-rank-header > div {
    font-size: 12px;
    line-height: 30px;
  }
}
.screen-content[data-css-name="Leaderboard"] .header-rank-number,
.screen-content[data-css-name="Leaderboard"] .col-rank-number {
  width: 120px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .header-rank-number,
  .screen-content[data-css-name="Leaderboard"] .col-rank-number {
    width: 15vw;
  }
}
.screen-content[data-css-name="Leaderboard"] .header-country-code,
.screen-content[data-css-name="Leaderboard"] .col-country-code {
  width: 340px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .header-country-code,
  .screen-content[data-css-name="Leaderboard"] .col-country-code {
    display: none;
  }
}
.screen-content[data-css-name="Leaderboard"] .header-accuracy,
.screen-content[data-css-name="Leaderboard"] .col-accuracy {
  width: 160px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .header-accuracy,
  .screen-content[data-css-name="Leaderboard"] .col-accuracy {
    width: 20vw;
  }
}
.screen-content[data-css-name="Leaderboard"] .header-xp-point,
.screen-content[data-css-name="Leaderboard"] .col-xp-point {
  width: 140px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .header-xp-point,
  .screen-content[data-css-name="Leaderboard"] .col-xp-point {
    width: 25vw;
  }
}
.screen-content[data-css-name="Leaderboard"] .header-player-name,
.screen-content[data-css-name="Leaderboard"] .col-player-name {
  width: 290px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .header-player-name,
  .screen-content[data-css-name="Leaderboard"] .col-player-name {
    width: 40%;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank {
  display: block;
  width: 1364px;
  margin: auto;
  padding: 0px 138px;
  border-spacing: 7px;
  box-sizing: border-box;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .table-rank {
    width: 100vw;
    padding: unset;
    border-spacing: 3px;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row {
  color: white;
  height: 60px;
  box-sizing: border-box;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .table-rank tbody .row {
    height: 35px;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-rank-number {
  width: 120px;
  font-size: 30px;
  color: #332F2E;
  background-color: #E6E6E6;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-rank-number {
    width: 15vw;
    font-size: 14px;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail {
  width: 960px;
  border: 2px solid #E6E6E6;
  background-color: #332F2E;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail {
    width: 85vw;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail > div {
  float: left;
  height: 30px;
  line-height: 30px;
  padding: 0;
  box-sizing: border-box;
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail .col-country-code {
  font-size: 19px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail .col-country-code {
    display: none;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail .col-accuracy {
  font-size: 30px;
  border-left: 2px solid #878788;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail .col-accuracy {
    font-size: 14px;
    border-left: none;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail .col-xp-point {
  font-size: 30px;
  border-left: 2px solid #878788;
  border-right: 2px solid #878788;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail .col-xp-point {
    font-size: 14px;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail .col-player-name {
  font-size: 19px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .table-rank tbody .row .col-group-detail .col-player-name {
    font-size: 14px;
  }
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row.highlight .col-rank-number {
  color: white;
  background-color: #C21720;
  border: 2px solid #B5161E;
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row.highlight .col-group-detail {
  background-color: #B5161E;
  border: 2px solid #C21720;
}
.screen-content[data-css-name="Leaderboard"] .table-rank tbody .row.template-row {
  display: none;
}
.screen-content[data-css-name="Leaderboard"] .scroll-wrapper {
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
  margin: auto;
}
.screen-content[data-css-name="Leaderboard"] .scroll-wrapper > .scroll-content {
  border: none !important;
  box-sizing: content-box !important;
  height: auto;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: none !important;
  overflow: scroll !important;
  padding: 0;
  position: relative !important;
  top: 0;
  width: auto !important;
}
.screen-content[data-css-name="Leaderboard"] .scroll-wrapper > .scroll-content::-webkit-scrollbar {
  height: 0;
  width: 0;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper {
  height: 450px !important;
  position: relative;
  width: auto !important;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper {
    height: calc(100vh - 450px) !important;
  }
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external {
  height: 400px;
  overflow: auto;
  width: 1364px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Leaderboard"] .scrollbar-external {
    height: calc(100vh - 450px);
    width: 100%;
  }
}
.screen-content[data-css-name="Leaderboard"] .external-scroll_x,
.screen-content[data-css-name="Leaderboard"] .external-scroll_y {
  border: solid 1.5px #707070;
  cursor: pointer;
  display: none;
  position: absolute;
}
.screen-content[data-css-name="Leaderboard"] .external-scroll_x.scroll-scrollx_visible {
  display: block;
  height: 10px;
  left: 0;
  top: 410px;
  width: 200px;
}
.screen-content[data-css-name="Leaderboard"] .external-scroll_y.scroll-scrolly_visible {
  display: block;
  height: 266px;
  right: 340px;
  top: 70px;
  width: 0px;
}
.screen-content[data-css-name="Leaderboard"] .external-scroll_x div,
.screen-content[data-css-name="Leaderboard"] .external-scroll_y div {
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
}
.screen-content[data-css-name="Leaderboard"] .external-scroll_x .scroll-bar,
.screen-content[data-css-name="Leaderboard"] .external-scroll_y .scroll-bar {
  background: #9999fc;
  z-index: 12;
}
.screen-content[data-css-name="Leaderboard"] .external-scroll_x .scroll-bar {
  width: 100px;
}
.screen-content[data-css-name="Leaderboard"] .external-scroll_y .scroll-bar {
  height: 30px;
  width: 30px;
  border: 2px solid #B5161E;
  border-radius: 16px;
  background-color: #C21720;
  box-shadow: black 0 5px 10px;
  left: -17px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-arrow {
  display: none;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-element_arrows_visible .scroll-arrow {
  display: block;
  z-index: 12;
  width: 60px;
  height: 60px;
  border: 2px solid #E6E6E6;
  border-radius: 30px;
  box-sizing: border-box;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-x.scroll-element_arrows_visible .scroll-arrow_less {
  height: 100%;
  width: 17px;
  background-position: 0px -51px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-x.scroll-element_arrows_visible .scroll-arrow_more {
  height: 100%;
  left: auto;
  right: 0;
  width: 17px;
  background-position: 17px -51px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-x.scroll-element_arrows_visible .scroll-element_outer {
  left: 17px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-x.scroll-element_arrows_visible .scroll-element_inner {
  left: -34px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-x.scroll-element_arrows_visible .scroll-element_size {
  left: -34px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-y.scroll-element_arrows_visible .scroll-arrow_less {
  background: url(/images/arrow-up.png) center no-repeat black;
  top: -50px;
  left: -30px;
  box-shadow: black 0 10px 20px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-y.scroll-element_arrows_visible .scroll-arrow_more {
  top: auto;
  bottom: -50px;
  left: -30px;
  background: url(/images/arrow-down.png) center no-repeat black;
  box-shadow: black 0 -10px 20px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-y.scroll-element_arrows_visible .scroll-element_outer {
  top: 17px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-y.scroll-element_arrows_visible .scroll-element_inner {
  top: -34px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-y.scroll-element_arrows_visible .scroll-element_size {
  top: -34px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -17px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -17px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-x.scroll-scrolly_visible .scroll-element_inner {
  left: -17px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-y.scroll-scrollx_visible .scroll-element_inner {
  top: -17px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-arrow_more {
  right: 17px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_inner {
  left: -51px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_size {
  left: -51px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-arrow_more {
  bottom: 17px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_inner {
  top: -51px;
}
.screen-content[data-css-name="Leaderboard"] .scrollbar-external_wrapper > .scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_size {
  top: -51px;
}
.no-background .screen-content[data-css-name="Leaderboard"] {
  background-color: #000000;
}