body {
	font-family: Arial, sans-serif;
	padding: 20px;
}


.filterRow{
	display:inline-block;
	margin-right: 100pt;
	margin-top:0.25em;
}
.filterRow button{
	  border-radius: 10pt;
	  padding: 1pt;
	  margin-left:1em;
}
input[type=text]{
	height:2em;
	width: calc(100% - 8pt );
	border-radius: .5em;
}
stat,
input[type=checkbox]{
	
  cursor: pointer;
}
span.player{
	padding:2pt;
	display: inline-block;
}
.match{
	background-color:yellow;
}
#listContainer{
	list-style: none;
	max-height:calc( 100% - 10pt - 8em );
	overflow-y: auto;
	margin-bottom:none;
    

}
.profile_link{
	color:inherit;
	text-decoration: none;
	display:inline-block;
	white-space: nowrap;
}
.profile_link:hover, .profile_link:active{
	
  font-weight: bold;
}
img.inline_face{
	height:1.75em;
	  vertical-align: middle;
	image-rendering: pixelated; 
	padding-right: 0.5em;
}
radio{
	padding-right:4pt;
}
radio label{
	cursor: pointer;
}
button{
	background: #00c0ff;
    padding: 0.5em;
    border-radius: 1em;    
	display: block;
    float: right;
	cursor: pointer;
}
.total{
		display:block;
		float:left;
	width:10em;
	height:calc( 100% - 2em);    
	position: absolute;
    left: 1em;
    top: 2em;
}
.total *{
	display:flex;
	height:100%; 
    align-items: center;
	justify-content: center;
}


ul.inline li {
  display:inline;
  margin-right:1em
}
.inline{
  display:inline-block;
  width: calc( 100% - 15em);
}
.stathead{
	clear:both;
	display:block;
	width: fit-content;
	padding-left: 0.5em;
	padding-right: 0.5em;
}
div.players{
	display:inline-block;
	margin-left:10em;
	width: calc( 100% - 10em);
}
.minimax{
	margin:3pt;
	display:block;
	max-width:100%;
}

.minimax > span{
	padding:1pt;
	display:inline-block;
	width:10em;
}
#listContainer > li >stat{
	color:#000;
	text-decoration: none;
    overflow: hidden;
    position: relative;
    display: block;
    box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
    border-radius: 1em;
    padding: 1em;
    font-size: 18px;
	margin:1em;
}
#listContainer > li >stat:hover, #listContainer > li >stat:focus{
	box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,255,.4),
        inset 0 0 3px 5px rgba(0,0,255,.10),
        8px 8px 8px 0 rgba(0,0,255,.5);
}
header{
	
	position: sticky;
    top: 0;
	z-index:10;
	background: white;
	padding-top: 1em;
	padding-bottom: 1em;
}


/* Adjust the width and positioning for 3 positions */
/* The switch - the box around the slider */
radio {
  /* ... (other styles) */
  /*width: 90px; /* Adjusted width for three positions */
  display:block;
  float:right;
}

/* The slider */
radio .slider {
  /* ... (other styles) */
  width: 30px; /* Width for each position */
  height:30px;
  top:1px;
  position:absolute;
  display:block;
}
radio input{
	display:none;
	height:0;
	width:0;
	opacity:0;
}

radio label{
	display:block;
	float:left;
	height:1em;
	width:1em;
}

radio label.sanemode{
	background-color:#fff;
	border-radius:1em 0em 0em 1em;
	border:solid black 2pt;
}
radio label.darkmode{

	border-radius:0em 0em 0em 0em;
	border:solid black 2pt;
}
radio label.amoledmode{
	
	border-radius:0em 1em 1em 0em;
	border:solid black 2pt;
}
/* Position the slider for each radio button */
radio input:nth-of-type(1):checked ~ .sanemode {
 box-shadow: 0 0 0 2px #000;
}

radio input:nth-of-type(2):checked ~ .darkmode {
 box-shadow: 0 0 0 2px #B6AEA9;
}

radio input:nth-of-type(3):checked ~ .amoledmode {
 box-shadow: 0 0 0 2px #FFF;
}