@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300&display=swap');
* {
    font-size: 10px;
    font-family: 'Merriweather Sans', sans-serif;
    box-sizing: border-box;
}
body {
    max-width:100%;
    min-width: 1550px;
    margin: auto;
    background: #171717;
}
a {
    text-decoration: none;
    cursor: pointer;
}
.contenedor {
    width:95%;
    margin:auto;
}
.content_left, .content_right {
    margin-top: 1.5%;
    margin-bottom: 1%;
}
.content_left {
    width: 35%;
    float: left;
}
.content_right {
    width: 63%;
    float: right;
    padding-bottom: 1%;
    background: #151515;
}
.banner img {
    width: 100%;
    display:flex;
}
.menu {
    width: 100%;
    background: #0F0F0F;
    display: flex;
}
.menu a span {
    display: flex;
}
.menu a span p {
    color: white;
    font-size: 12px;
    margin: 0;
    padding-left: 4px;
    font-family: 'Russo One', sans-serif;
}
.menu .menu_left a span {
    float: left;
}
.menu .menu_right a span {
    float: right;
}
.menu a span {
    padding: 1.4%;
    color:#CD821C;
    font-size: 13px;
}
.menu_right a span {
    padding: 3.3%;
}
.menu .active span, .menu a span:hover { 
    background: #171717;
}
.menu_left {
    width:70%;
    float:left;
}
.menu_right {
    width: 30%;
}
.box_title {
    width: 100%;
    padding: 1% 0;
    font-size: 12px;
    display:flow-root;
    background: #0F0F0F;
    color:#CD821C;
    display: flex;
}
.box_title span {
    width: 100%;
    padding: .5% 1%;
    font-size: 11px;
    display: flex;
}
.box_title p {
    color: white;
    margin: 0;
    font-size: 11px;
    padding-left:1%;
}
.content_right .title {
    width: 97%;
    float: left;
    padding: .5% 0;
    font-size: 10px;
    display:flow-root;
    background: #0F0F0F;
    display: flex;
    color: white;
    font-weight: 100;
    margin: 0;
}
.title_top {
    display: flow-root;
}
.actualizar-button {
    float: left;
    width: 3%;
    padding: .46%;
    text-align: center;
    background: #CD821C;
    cursor:default;
    font-weight: bold;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
}
.ic-button {
    padding: 1% 0;
    cursor: pointer;
}
.content_right .title span {
    padding: .1% .3% .1% 1%;
    color: #CD821C;
}
.box_info {
    margin-bottom:1.5%;
}
.box_info table {
    text-align: center;
    width: 100%;
    border-collapse: collapse;
}
.box_info table tr {
    border-bottom: 1px solid #0F0F0F;
}
.box_info table a {
    color: white;
}
.box_info table img {
    width: 100px;
    border-right: 1px solid #2D2D2D;
    float: left;
}
.box_info table td {
    background: rgb(25, 25, 25, 1);
    color: white;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
}
.box_info table td p{
    margin: 0;
    color: #CD821C;
}
.box_info .display_scoreboard {
    background: #CD821C;
    padding:4% 8% 4% 10%;
    -webkit-border-top-left-radius: 100px;
    -webkit-border-bottom-left-radius: 100px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-bottomleft: 100px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}
.box_info .display_scoreboard span {
    font-size: 13px;
    vertical-align: middle;
}
.box_info .connect {
    font-size: 9px;
    padding: 5%;
    background: #2D2D2D;
    -webkit-border-top-right-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-topright: 100px;
    -moz-border-radius-bottomright: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}
.box_info table .p, .box_info .community_players .p {
    width: 100%;
    border: 1px solid #0F0F0F;
    background: #2D2D2D;
    position: relative;
}
.box_info .community_players .p2  {
    padding:1% 0;
    text-align: center;
    background:#0F0F0F;
    color: #909090;
    margin: auto;
    font-size:15px;
    font-family: 'Russo One', sans-serif;
}
.box_info table .p2 {
    background-color:#0F0F0F;
    padding: 3% 0;
    font-size: 10px;
    font-weight: bold;
}
.box_info .chat_live {
    background: #131313;
    text-align: center;
}
#loginform {
    padding: 15% 0;
}
#loginform form input[type="text"] {
    padding: 1% 1% 1% 2%;
    color: white;
    background: #232323;
    border: 0px;
    width: 40%;
   -webkit-border-top-left-radius: 100px;
    -webkit-border-bottom-left-radius: 100px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-bottomleft: 100px;
    border-top-left-radius: 100px;
   border-bottom-left-radius: 100px;
}
#loginform form input[type="text"]::placeholder {
    padding: 1% 1% 1% 2%;
    font-weight: bold;
}
#loginform form input[type="submit"] {
    padding: 1% 2% 1% 1%;
    color: white;
    background: #CD821C;
    border: 0px;
    -webkit-border-top-right-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-topright: 100px;
    -moz-border-radius-bottomright: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    cursor: pointer;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
}

#loginform p {
    width: 100%;
}
.box_players {
    max-height: 250px;
    overflow-y: scroll;
}
.box_players table td {
    text-align: left;
}
.box_players table td .point_green {
    color:lawngreen;
}
.box_players table td img {
    width: 40px;
}
.box_players table .country {
    width: 25px;
    padding: 0 1% 0 2%;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #333;
}
::-webkit-scrollbar-thumb {
    background: #0F0F0F;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.box_community_stats, .box_players {
    border-bottom:2px solid #101010;
    border-left:1px solid #101010;
    border-right:1px solid #101010;
}
.box_community_stats table tr td {
    text-align: left;
    padding: 1%;
    font-size: 12px;
}
.box_community_stats table tr {
    border: none;
}
.box_community_stats table .tr_2 td {
    background: rgb(30, 30, 30);
}
.box_community_stats table .tr_1 td {
    background: rgb(25, 25, 25);
}
.global_chat {
    width: 100;
    color:white;
    background: rgba(16,35,56,0.9);
    margin-bottom: 2%;
}
.global_chat a {
    text-decoration: none;
    color: white;
    font-size: 15px;
    border: 10%;
    background: rgba(2,15,26, 0.8);
}
#logout {
    color:white;
    width: 90%;
    margin: auto;
    padding-top: 3%;
    margin-bottom: 3%;
    display: flow-root;
}
.login_chat {
    padding: 10% 0;
}
.login_steam_button img {
    width: 200px;
    border-radius: 20px;
}
.logout_steam_button button {
    margin: 2% 0;
    float: right;
    font-size: 12px;
    padding: 1% 2%;
    color: white;
    width: 120px;
    background: #CD821C;
    -webkit-border-top-left-radius: 100px;
    -webkit-border-bottom-left-radius: 100px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-bottomleft: 100px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
    border: none;
    cursor: pointer;
    margin: 0;
}
.logout_steam_button button span {
    font-weight: 100;
    padding: 0 4%;
}
#logout p, #loginform p {
    font-size: 12px;
    padding: 0 1%;
    color:#fff;
    float: left;
    margin: 0;
}
#logout b {
    color:#CD821C;
    font-size: 14px;
}
#chatbox {
    border-radius: 1%;
    width: 90%;
    display: flow-root;
    text-align: left;
    margin: 0 auto;
    padding: 10px;
    height:250px;
    border: 1px solid #0F0F0F;
    overflow: auto;
    border-bottom: 4px solid #0F0F0F;
    color: black;
    background: #202020;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#chatbox .chat_icon {
    color: yellow;
}
.box_send form {
    text-align: center;
    width: 90%;
    padding: 2% 0;
    display: flex;
    margin: auto;
}
.box_send form input[type='text'] {
    width: 80%;
    float: left;
    color: white;
    padding: 0 1%;
    background: #202020;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 1px solid #232323;
}
.box_send form input[type='submit'] {
    width: 20%;
    float: right;
    padding: 1%;
    color:white;
    background: #CD821C;
    border:none;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
}
.chat_player {
    display: flex;
    padding: .5% 0;
    color: white;
    border-bottom: 1px dashed #151515;
}
.chat_player h3 {
    margin: 0;
    color: #fff;
    font-weight: normal;
    font-size: 11px;
    padding:2.3% 0 0 1%;
}
.chat_player span {
    color: white;
    color: #BEBEBE;
}
.chat_player img {
    width: 30px;
    border: 1px solid #101010;
    display: flex;
}
.chat_player .chat_hour {
    font-size:8px;
    padding: 0 4px;
    margin: 0;
    color: #909090;
}
.chat_admin h3 {
    animation: rainbow 2.5s linear;
    animation-iteration-count: infinite;
}
@keyframes rainbow {
		100%,0%{color: rgb(255,0,0);}
		8%{color: rgb(255,127,0);}
		16%{color: rgb(255,255,0);}
		25%{color: rgb(127,255,0);}
        33% {color: rgb(0,255,0);}
		41%{color: rgb(0,255,127);}
		50%{color: rgb(0,255,255);}
		58%{color: rgb(0,127,255);}
		66%{color: rgb(0,0,255);}
		75%{color: rgb(127,0,255);}
		83%{color: rgb(255,0,255);}
		91%{color: rgb(255,0,127);}
}
.footer {
    width: 100%;
    margin:.5% auto 1% auto;
    text-align: center;
    color: white;
    display: flow-root;
} 
.footer p {
    font-size: 12px;
    color: #808080;
    margin: .5%;
    width: 100%;
    background: #101010;
    padding: 1%;
    margin: auto;
}
.footer a {
    font-size: 12px;
    color: rgba(205, 130, 28, 0.5);
    font-weight: bold;
}
.footer a:hover {
    color: rgba(205, 130, 28, 1);
}
.comentarios {
    width: 100%; 
    color: #C1C1C1;
}
.comentarios p {
    padding: 1%;
    margin: 0;
}
.comentarios span {
    color: #CD821C;
}
.ct {
    color: #448CE2;
}
.tt {
    color: #C41D1D;
}
.search_user_box form {
    display: flex;
    width: 35%;
    margin: 0;
    padding: 0 1%; 
}
.search_user_box label {
    color: black;
    width: 30%;
    margin-bottom: .5%;
    font-weight: bold;
    padding: 2%;
    background: #CD821C;
    text-align: center;
    margin: 0;
    -webkit-border-top-left-radius: 100px;
    -webkit-border-bottom-left-radius: 100px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-bottomleft: 100px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}
.search_user_box input[type="search"], .search_user_box input[type="search"]:root, .search_user_box input[type="search"]:focus{
    width: 70%;
    border:1px solid #CD821C;
    background: #151515;
    padding: 2%;
    color: white;
    outline: none;
    box-shadow: 0;
}
.search_user_box input[type="search"]::-webkit-search-cancel-button {
    display: none;
}
.search_user_box button {
    background: #CD821C;
    border: none;
    padding: 0 4%;
    font-weight: bold;
    color: black;
    -webkit-border-top-right-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-topright: 100px;
    -moz-border-radius-bottomright: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    cursor: pointer;
}
.no_registros {
    text-align: center;
    color: #909090;
    padding: 6% 0;
    margin: 0 1%;
    background: #181818;
}
.no_registros span, .no_registros p  {
    font-size: 13px;
}
.s_color {
    color: #CD821C;
}
.login_steam_button:hover {
    -webkit-box-shadow: 5px 5px 24px 2px #000000; 
    box-shadow: 5px 5px 24px 2px #000000;
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #171717;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s all;
}
.lds-default {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin:20% 40%;
}
.lds-default div {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #cef;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 37px;
  left: 66px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22px;
  left: 62px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11px;
  left: 52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7px;
  left: 37px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11px;
  left: 22px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22px;
  left: 11px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 37px;
  left: 7px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 52px;
  left: 11px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62px;
  left: 22px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66px;
  left: 37px;
}        
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62px;
  left: 52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 52px;
  left: 62px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
@-webkit-keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}