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

#title {
	float:left;
}

#title h1 {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    padding: 9px;
    text-transform: uppercase;
}

#log {
	position:absolute;
	left:0;
	top:100px;
	border:1px solid black;
	width:auto;
	height:auto;
	display:none;
}

.combo {
	display:inline-block;
	padding-top: 5px;
	width:33%;
}

.super_big_row_label div:nth-of-type(1) {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
	height:30px;
	background-color:#1B80BF;
	color:white;
}

.super_big_row_label div:nth-of-type(2), .super_big_row_label div:nth-of-type(3) {
    float: left;
    width: 50%;
    text-align: center;
    font-size: 60px;
    font-weight: 400;
	height:90px;
	line-height:90px;
}

body {
	font-family: 'Signika', sans-serif;
	font-weight:300;
	background-color:#c4d3f6;
	margin:0;
	padding:0;	
}

nav {
	width:100%;
	position:fixed;
	background-color:white;	
	z-index:25;
}

#filters {
	width:100%;
	max-width:530px;
	min-width:305px;
	margin:auto;
	height:36px;	
	font-size:14px;
}

#position_filter,
#player1_filter {
	float:left;
	line-height:36px;
	margin-left:1%;	
}

#time_filter,
#player2_filter {
	float:right;
	line-height:36px;
	margin-right:1%;
}

#position_filter div,
#time_filter div {
    display: inline-block;
}

#subnav {
	position:fixed;
	top:40px;
	background-color: #E2E2E2;
	height:38px;
	width:100%;
	z-index:15;
}

#players {
	padding-top:78px;
	z-index:1;
}

.player,
#compare {
	overflow:hidden;
	height:1%;
	background-color:white;
	width:100%;
	max-width:530px;
	min-width:305px;
	margin:auto;
	padding:8px;
}

#player1,
#player2 {
	position:relative;
	width:48%;
	float:left;
	padding:1%;
}

#player1 {
	/*border-right:1px solid #D3DEE7;*/
}

#player2 {
	/*border-left:1px solid #D3DEE7;*/
}

#player1 .profilepic,
#player2 .profilepic {
	width:120px;
	height:120px;
	margin:auto;
	overflow:hidden;
	border-radius:50%;
	background-color:#D3DEE7;
}

.player_info img {
	width:auto;
	height:100%;
	display:block;
}

#player1 .player_info,
#player2 .player_info {
    margin: -30px auto 0 auto;
    width: 120px;
    height: 38px;
	position:relative;
}

.compare_row {
	font-size:35px;
    height: 45px;
    margin-top: 15px;
	position:relative;
}

.info_box {
    width: 140px;
    height: 35px;
    border-radius: 17px;
    position: absolute;
    padding: 0;
}

#player1 .info_box {
	border-radius: 17px 0 0 17px;
}

#player2 .info_box {
	border-radius: 0 17px 17px 0;
}

.g {
    background-color: #97FFB1;
}

.r {
    background-color: #FFD5D5;
}

.o {
    background-color: #FFEEBC;
}

#player2 .info_box {
	right:0;
}

.info_box i {
    position: absolute;
}

#player2 .info_box i {
	right:0;
}

.info_box > span {
    width: 130px;
    text-align: right;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    position: absolute;
    padding-right: 5px;
    font-size: 14px;
}

.info_box > span > span {
	font-size:11px;
}

#player2 .info_box span {
	text-align:left;
	left:10px;
}

.info {
    font-size: 11px;
}

#player2 .info {
	text-align:right;
}

.next_opponent {
	position:relative;
	height:38px;
}

.next_opponent div {
    left: 45%;
    width: 45%;
    height: 38px;
    position: absolute;
    top: 0;
    line-height: 38px;
}

.next_opponent div:nth-of-type(1) {
	text-align:right;
	left:0;
}

.next_opponent img {
	width:38px;
	height:38px;
	margin-left:10px;
}

.row_label {
    position: absolute;
    right: -75px;
    margin-top: -44px;
    width: 150px;
    text-align: center;
    line-height: 30px;
    background-color: white;
    border: 1px solid #91ACC4;
	/*border-radius:5px;*/
    height: 30px;
	z-index:10;
	font-size:14px;
}

.summary_row {
	height:140px;
}

.super_big_row_label {
	width:400px;
	right:-200px;
	height:120px;
	margin-top:-134px;
	border:none;
}

.big_row_label {
	width:300px;
	right:-150px;
	text-transform:uppercase;
	font-weight:400;
	background-color:#BF2C47;
	border:1px solid #BF2C47;
	color:white;
}

.playername {
	font-size:22px;
	text-align:center;
	margin-top:15px;
}

.player:nth-child(odd) {
	background-color:#F4F4F4;
}

.context {
	width:20px;
	margin-right:10px;
	float:left;
}

.team img {
	width:20px;
	height:20px;
}

.picture {
	background-color:#D3DEE7;
	width:45px;
	height:45px;
	border-radius:50%;
	overflow:hidden;
	margin-right:10px;
	float:left;
}

.picture img,
.profilepic img {
    display: block;
    width: 94%;
    height: auto;
    margin-top: 6%;
    margin-left: 3%;
}

.details {
	float:left;
	width:160px;
}

#mobile_menu {
	display:none;
	width:40px;
}

#menu,
#mobile_menu {
	float:right;
	z-index:1;
}

#menu ul,
#mobile_menu ul {
	margin:0;
    padding: 0;
}

#menu li,
#mobile_menu li {
	height:40px;
	line-height:40px;
	padding:0 10px;
	float:left;
	list-style:none;
	margin:0;
	cursor:pointer;
}

#menu a,
#mobile_menu a {
	text-decoration:none;
	color:black;
}

#menu li.menuitem:hover,
#mobile_menu li.menuitem:hover {
	background-color:#77BDD9;
}

.evolution {
	float:right;
}

.position {
	width:20px;
	height:20px;
	border-radius:50%;
	overflow:hidden;
    color: white;
    text-align: center;
    font-size: 10px;
    line-height: 21px;
    font-weight: 400;
}

#player1 .position,
#player2 .position {
	width:38px;
	height:38px;
	font-size:16px;
    line-height: 38px;
	position:absolute;
	right:0;
	top:0;
}

.position_1,
.nochange {
	background-color:#F93;
}

.position_2 {
	background-color:#03C;
}

.position_3,
.positive {
	background-color:#00a229;
}

.position_4,
.negative {
	background-color:#F33;
}

.green {
	color:#00a229;
}

.orange {
	color:#F93;
}

.red {
	color:#F33;
}

.name {
	color:#003;
	font-weight:400;
	font-size:14px;
}

.value {
	color:#069;
	font-weight:300;
	font-size:12px;
}

.evolution span {
	font-size:12px;
}

.evolution span i {
	font-size:14px;
}

.nowrap {
	white-space:nowrap;
}	

table {
	border-collapse: collapse;
	margin-bottom:2px;
}

td, th {
	font-weight:300;
	font-size:13px;
	text-align:center;
	border:1px solid white;
	width:74px;
	padding:3px;
}

td {
	color:white;
}

#logo {
	float:left;
	padding:8px;
}

#logo img {
	display:block;
	height:24px;
	width:auto;
}

#t1,
#t3,
#t7 {
	background-color:#7A7A7A;
}

#t1 a,
#t3 a,
#t7 a {
	color:white;
	text-decoration:none;
}

#t1:hover,
#t3:hover,
#t7:hover {
	cursor:pointer;
	background-color:#BF2C47!important;
}

.selected {
	background-color:#BF2C47!important;
}

#publi_izquierda {
	width:160px;
	position:fixed;
	left:50%;
	margin-left:-443px;
	top:78px;
}

#publi_derecha {
	width:160px;
	position:fixed;
	left:50%;
	margin-left:283px;
	top:78px;
}

.publi_vertical {
	width:160px;
	height:600px;
	margin-top:10px;
	background-color:#666;
}

.ad-row {
    overflow: hidden;
    height: 1%;
    background-color: #666;
    width: 100%;
    max-width: 530px;
    min-width: 305px;
    margin: auto;
    padding: 8px;
	height:100px;
}

/* start toggle buttons */

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

input[type="checkbox"].filter:checked + label,
input[type="radio"].filter:checked + label {
  background-image: linear-gradient(to top,#969696,#727272);
  box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
                    0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: default;
  color: #E6E6E6;
  border-color: transparent;
  text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
}

input[type="checkbox"].filter:checked + label.btn:hover,
input[type="radio"].filter:checked + label.btn:hover {
  background-color: inherit;
  background-position: 0 0;
  transition: none;
}

input[type="checkbox"].filter-left + label,
input[type="radio"].filter-left + label {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

input[type="checkbox"].filter-right + label,
input[type="radio"].filter-right + label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* end toggle buttons */

/* start bootstrap buttons */

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 8px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 11px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #cccccc;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  color: #333333;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
}

.btn:active,
.btn.active {
  background-color: #cccccc \9;
}

.btn:first-child {
  *margin-left: 0;
}

.btn:hover,
.btn:focus {
  color: #333333;
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}

.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.btn.active,
.btn:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.btn-large {
  padding: 11px 19px;
  font-size: 17.5px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
  margin-top: 4px;
}

.btn-small {
  padding: 2px 10px;
  font-size: 11.9px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
  margin-top: 0;
}

.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
  margin-top: -1px;
}

.btn-mini {
  padding: 0 6px;
  font-size: 10.5px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.btn-block {
  display: block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

/* end bootstrap buttons*/

/* start select */

.select-css {
	display: block;
	font-size: 11px;
	font-weight: 100;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 180px;
	max-width: 180px;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}

.select-css::-ms-expand {
	display: none;
}

.select-css:hover {
	border-color: #888;
}

.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}

.select-css option {
	font-weight:normal;
}

.XI2 {

}
/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
	color: graytext;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
	border-color: #aaa;
}

.combo .select-css {
	width:100%;
}

/* end select */

/* start menu burger */

.container {
  display: inline-block;
  cursor: pointer;
  padding-top:4px;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 3px;
  background-color: #333;
  margin: 6px 0 0 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

/* end menu burger*/