@import url('https://fonts.googleapis.com/css2?family=Alata&family=Kumbh+Sans&family=Nunito:wght@200&display=swap');
body,html {
background: url('../img/bg2.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; 
-moz-background-size: cover;
-ms-background-size: cover; 
-o-background-size: cover;
font-family: "Nunito", sans-serif;
font-size: 1em;
line-height: 1.5;
color: rgb(229, 235, 239);
}


*:focus {
outline: none;
}
::placeholder { 
color: rgba(255, 255, 255, 0.3);
opacity: 1; 
}

.navbar {
font-family: 'Kumbh Sans', sans-serif;
background-color: rgb(14, 23, 38);
}
.navbar-toggler {
color: #fff;
line-height: none;
}
.nav-item a {
color: rgb(121, 134, 163);
margin-left: 30px;
}

.nav-item a:hover {
color: #dc3545;;
}
.form-control {
	background: #142135;
	color: #fff;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus,select:active {   
	background: #142135;
	color: #fff;
	border:1px solid #0E1726;

}
.alert {
margin-bottom: 0
}
.alert-primary {
font-family: 'Alata', sans-serif;
background: rgb(32, 43, 67, 0.5);
border:1px solid #0E1726;
border-radius: 2px;
padding: 20px;
color: rgb(187, 201, 224);
}
.alert h4, .alert b {
color: #dc3545;
font-weight: normal;
}
.alert .badge {
font-weight: normal;
font-family: 'Nunito', sans-serif;
}

.filtros {
width: 100%;
margin-top: 15px;
color: rgb(229, 235, 239);
border-radius: 5px
}

.tabelas {
width: 100%;
margin-top: 20px;
padding: 20px;
color: rgb(229, 235, 239);
background: #0a193a;
}

.topo {
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
height: 50px;
line-height: 1.5;
margin-top: 50px;
}

.pag {
display: flex;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
font-size: 24px;
color: rgb(229, 235, 239);
}

.pag_right {
display: flex;
flex-direction: column;
}

.att_1 {
text-align: right;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgb(187, 201, 224);
}
.att_2 {
text-align: right;
font-size: 14px;
color: rgb(229, 235, 239);
}

input[type=search] {
width: 300px;
font-family: "Nunito", sans-serif;
margin-right: 10px;
height: 33px;
font-size: 14px;
box-sizing: border-box;
border: none;
border-radius: 2px;
color: white;
background-color: rgb(52, 63, 87);
background-image: url('../img/searchicon.png');
background-position: 10px 6px; 
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=search]:focus  {
width: 400px;
}

.btn-rank{
font-family: "Alata", sans-serif;
height: 35px;
background: rgb(39, 53, 82);
opacity: 1;
padding: 5px 15px 15px 15px;
margin-top: -5px;
border: none;
}

.color1 {
color: rgb(164, 197, 230);
}

.color2 {
color: rgb(214, 156, 170);
}
.color3 {
color: rgb(255, 88, 89);
font-weight: 700;
}
.color4 {
color: rgb(73, 180, 255);
font-weight: 700;
}
.rank_load {
font-family: "Alata", sans-serif;
-webkit-box-align: center;
align-items: center;
margin: 1em;
color: rgb(121, 134, 163);
font-size: 0.75em;
}


table {
border-collapse: collapse;
width: 100%;
text-align: center;
}
table a {
color: #fff;
}
table a:hover, table a:focus {
color: rgb(214, 156, 170);
text-decoration: none;
}

td, th {
padding: 10px;

}
th {
background-color: none;
color: rgb(187, 201, 224);
font-weight: bold;
font-size: 13px;
}
td {
color: #fff;
}
tr {
background-color: #182338;
}
tr:nth-child(odd) {
background-color: #202B43;
}
.pagination {
list-style-type: none;
padding: 10px 0;
margin-top: 25px;
display: inline-flex;
justify-content: space-between;
box-sizing: border-box;
}
.pagination li {
box-sizing: border-box;
padding-right: 10px;
}
.pagination li a {
box-sizing: border-box;
background-color: #182338;
padding: 8px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: rgb(164, 197, 200);
border-radius: 4px;
}
.pagination li a:hover {
background-color: #518acb;
color: #fff;
}
.pagination .next a, .pagination .prev a {
text-transform: uppercase;
font-size: 12px;
}
.pagination .currentpage a {
background-color: #518acb;
color: #fff;
}

a.disabled {
pointer-events: none;
cursor: default;
}

.place-1st {
background: linear-gradient(to right, rgba(238, 189, 105, 0.2), transparent);
}

.place-2st {
background: linear-gradient(to right, rgba(166, 172, 185, 0.2), transparent);
}

.place-3st {
background: linear-gradient(to right, rgba(174, 137, 103, 0.1), transparent);
}

.banido {
background: linear-gradient(to right, rgb(247, 32, 32, 0.1), transparent);
}

.perfil {
text-align: center;
}

.perfil .elo {
margin-bottom: 15px;
}

.perfil .personagem {
font-family: 'Nunito', sans-serif;
font-size: 30px;
}

.perfil .personagem img {
margin-top: -5px;
}

.perfil .kda {
display: flex;
list-style: none;
-webkit-box-pack: center;
justify-content: center;
margin: 0px;
padding: 0px;
margin-top: 15px;
}
.perfil .pd {
margin: 0px 1.5em;
}

.perfil .item {
box-sizing: border-box;
padding-top: 2px;
margin: 0px 0px 0.25em;
display: block;
font-size: 0.625rem;
font-weight: 500;
font-style: normal;
line-height: 1;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgb(121, 134, 163);
}
.perfil .icon {
margin-right: 5px;
width: 15px;
}

.detalhes-user {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}

.infor_ {
font-family: 'Alata', sans-serif;

color: rgb(187, 201, 224);
font-weight: 700;
box-sizing: border-box;
margin: 0px;
font-size: 1rem;
font-weight: normal;
font-style: normal;
}

.result_ {
flex: 1 1 0%;
text-align: right;
color: rgb(121, 134, 163);
box-sizing: border-box;
padding-top: 2px;
margin: 0px;
font-size: 1rem;
font-style: normal;

}


.header {
margin:0;
padding: 0;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
background: linear-gradient(to top, rgb(39, 54, 82) 0%, rgb(32, 43, 67) 100%);
box-shadow: rgba(229, 235, 239, 0.05) 0px -1px inset;
border-radius: 5px 5px 0px 0px;
padding: 0px 1.5rem;
min-height: 56px;
}

.header h3 {
box-sizing: border-box;
padding-top: 2px;
margin: 0px;
font-size: 1rem;
font-weight: normal;
font-style: normal;
}

.selecionar {
font-family: "Alata", sans-serif;
height: 35px;
background: rgb(39, 53, 82);
color: #fff;
padding-left: 5px;
margin-top: -5px;
border: none;
margin-right: 5px;

}

@keyframes blink {50% { color: transparent }}
.loader__dot { animation: 1s blink infinite }
.loader__dot:nth-child(2) { animation-delay: 250ms }
.loader__dot:nth-child(3) { animation-delay: 500ms }


.wrapper {
padding-top: 35px;
}
.wrapper:focus {
outline: 0;
}


.topclasse_card {
    font-family: 'Kumbh Sans', sans-serif;
background: none;
width: 270px;
height: 300px;
display: inline-block;
margin: auto;
border-radius: 5px;
position: relative;
text-align: center;

-webkit-box-shadow: 0px -1px 14px 3px #0E1726;
-moz-box-shadow: 0px -1px 14px 3px #0E1726;
box-shadow: 0px -1px 14px 3px #0E1726;

padding: 40px 1px 1px 1px;
}

.topclasse_card a {
	color: #fff;
}


.topclasse_player {
font-size: 26px;
color: #fff;
}

.topclasse_cla {
color: #fff;   
font-size: 14px;
}



.topclasse_status {
color: white;
font-weight: 700;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
.topclasse_status .one-third {
float: left;
margin-left: 6px;
padding: 11px 10px;
}

.topclasse_status .stat {
position: relative;
font-size: 15px;
margin-bottom: 10px;
margin-top: 80px;
}
.topclasse_status .stat-value {
text-transform: uppercase;
font-weight: 400;
font-size: 10px;
}
.topclasse_status .no-border {
border-right: none;
}


.elos_pw {
font-family: 'Alata', sans-serif;
text-align: center;
margin-top: 15px;
}

.elos_pw img {
	margin-bottom: 15px;
}



.elos_pw h3 {
font-family: 'Kumbh Sans', sans-serif;
font-size: 35px;
margin: 0;
padding: 0;
}

.elos_pw .pontos {
margin-top: -20px;
}

.elos_pw .mini {
margin-top: -60px;
margin-right: 20px;
text-align: right;
}

.funkyradio div {
  clear: both;
  overflow: hidden;
}

.funkyradio label {
	width: 115px;
  border-radius: 3px;
  border: 1px solid #D1D3D4;
  font-weight: normal;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
  display: none;
}

.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
  position: relative;
  line-height: 2.5em;
  text-indent: 3.25em;

  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '\2715';
  text-indent: .9em;
  color: #C2C2C2;	
  width: 2.5em;
   background: rgb(14, 23, 38, 0.5);
  border-right: 1px solid #ddd;
  border-radius: 3px 0 0 3px;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
  color: #888;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #C2C2C2;
}

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
  color: #fff;
    background: #0E1726;
}

.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #333;
  background-color: #ccc;
}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.funkyradio-rank input[type="radio"]:checked ~ label:before,
.funkyradio-rank input[type="checkbox"]:checked ~ label:before {
  color: rgb(8, 201, 130);
  background-color: #0E1726;
}


.footer {
font-family: 'Alata', sans-serif;
text-transform: uppercase;
text-align: center;
color: #ddd;
font-size: 0.9rem;
line-height: 1rem;
margin-bottom: 2.5rem;  
margin-top: 80px;  
}

.footer #dev {
color: #666;
font-family: 'Alata', sans-serif;
text-transform: none;
font-size: 14px;
margin-top: 5px;
}

.footer #dev a {
color: #666; 
}