:root{
	--cell: #388E3C;
	--hover: #66BB6A;
	--darker: #163b18;
	--header: #4CAF50;
}

@keyframes slideleft {
  from { background-position: 1400%; }
  to { background-position: 0%; }
}

@media only screen and (min-width: 981px) {
body {
	background-color: #3366cc;
	background-image: url("/images/clouds2.png");
	background-repeat: repeat-x;
	background-attachment: fixed;
	animation: slideleft 600s infinite linear;
	margin-bottom: 200px;
}

img.Badge {
	max-width: 60px;
}

div.BadgeContainer {
	max-width:60px;
	max-height:60px;
	display:inline-block;
}

}

@media only screen and (max-width: 980px) {
body {
	background-color: #3366cc;
	background-image: url("/images/clouds2.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center bottom;
	margin-bottom: 200px;
}

img.Badge {
	max-width: 55px;
}

div.BadgeContainer {
	max-width:55px;
	max-height:55px;
	display:inline-block;
}

}



table.mainTable {
	width: 80% !important;
	margin: 30px auto;
	border-collapse: separate;   /* Important: allows gaps */
	border-spacing: 10px;         /* Creates the gaps between cells */
	font-family: Arial, sans-serif;
}

.mainTable td { height: 170px; }
.mainTable th { height: 50px; }

th, td {
	background-color: var(--header);
	color: white;
	padding: 15px 20px;
	text-align: left;
	border: none;                 
	border-radius: 8px;          
	box-shadow: 2px 2px 8px rgba(0, 32, 1, 0.628)!important;
	transition: background 0.3s;
}

#myTable_wrapper {	
    margin-top: 50px;
    margin-bottom: 50px;

}

div.dt-search {
	background-color: var(--cell);
	color: white !important;
	padding: 16px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	font-family: Arial, sans-serif !important;
	position:absolute;
	left:11%;
}

div.dt-info {
	background-color: var(--cell);
	color: white !important;
	padding: 21px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	font-family: Arial, sans-serif !important;
	position:absolute;
	left:11%;
}

div.dt-paging {
	background-color: var(--cell);
	color: white !important;
	padding: 15px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	font-family: Arial, sans-serif !important;
	position:absolute;
	right:11%;
}

div.dt-container .dt-paging .dt-paging-button:hover {
	background-color: var(--cell);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--cell)), color-stop(100%, var(--darker)));
    background: -webkit-linear-gradient(top, var(--cell) 0%, var(--darker) 100%);
    background: -moz-linear-gradient(top, var(--cell) 0%, var(--darker) 100%);
    background: -ms-linear-gradient(top, var(--cell) 0%, var(--darker) 100%);
    background: -o-linear-gradient(top, var(--cell) 0%, var(--darker) 100%);
    background: linear-gradient(to bottom, var(--cell) 0%, var(--darker) 100%)
}

th.Rank {
	width: 50px;
	text-align: center !important;
}

td.Rank {
	text-align: center !important;
	font-size: 24px;
}

td.Name {
	font-family: Verdana, sans-serif;
	font-size:36px;
}

p.Name {
	margin-bottom: 16px;
	margin-top:16px;
}

th.Level {
	width: 50px;
}

th.Badges {
	width: 270px;
}

th.Image {
	width: 100px;
}

td.Level {
	text-align: center !important;
	font-size: 24px;
}

th {
	background-color: var(--cell);    
	text-transform: capitalize;
}

tr:hover td {
	background-color: var(--hover);  
}

img.portrait {
	object-fit: cover;
	border-radius: 4px;
	background-color: #eee;
}

p.BadNews {
	color:#750c0c;
	font-size:18px;
}

p.Alias {
	font-size:18px;
}

p.Alt {
	font-size:18px;
}

td.Image > img {
	max-height:150px;
}

td.Badges {
	position:relative;
	min-height:170px;
	max-height:170px;
	display: block;
	overflow-x:visible;
	overflow-y:scroll;
	scrollbar-color: var(--header) var(--hover);
	scrollbar-width: none;
}

div.BadgeContainer {
	overflow:visible;
	display: inline-block;
}

#sharedTooltip {
	position:fixed;
	text-align:center;
	top:50%;
	right:1%;
	width:200px;
	background: #163b18e5;
	padding: 10px 10px;
	border-radius: 8px;
	color:white;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	font-family: Arial, sans-serif !important;
	font-size: 10pt;
	z-index: 9999;	
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

#tooltipOwn {
	color:#3366cc;
}

#tooltipTitle {
	font-weight:bold;
}

#sharedTooltip.visible {
	opacity: 1;
  	visibility: visible;
}

#titleImage {
	display: block;
	margin: auto;
	width: 70%;
	max-width: 800px;
}

#footer {
	background-color: var(--cell);
	color: white !important;
	padding: 0px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	font-family: Arial, sans-serif !important;
	position:absolute;
	left:38%;
	p {
		display: flex;
		align-items: center;
		margin: 8px 0px;
	}
	img {
		margin: 8px 10px;
	}
}

div.scrolldiv {
	background-color: var(--cell);
	color: white !important;
	padding: 20px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	font-family: Arial, sans-serif !important;
	width: 906px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

div.scrollsim {
	background-image: url('images/scroll/background2.png');
	background-size: cover;
	position:relative;
	width: 946px;
	height: 480px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

div.baseTop {
	margin-left:10px;
	margin-top:10px;
}

div.baseBox {
	background-color:#131b6faa;
	width:230px;
	border-radius: 4px;
	outline: 1px solid #131b6faa;
	outline-offset: 1px;
}

div.scrollBox {
	background-color:#131b6faa;
	width:290px;
	border-radius: 4px;
	outline: 1px solid #131b6faa;
	outline-offset: 1px;
}

#gomuBox, #stripeMBox, #stripeFBox, #iceBox, #sweatBox, #wdanaBox, #witchBox, #broomBox, #wbeltRBox, #wbeltBBox, #wbeltPBox {
	visibility: hidden;
	position:fixed;
	pointer-events: none;
}

#gomuBox.visible, #stripeMBox.visible, #stripeFBox.visible, #iceBox.visible, #sweatBox.visible, #wdanaBox.visible, #witchBox.visible, #broomBox.visible, #wbeltRBox.visible, #wbeltBBox.visible, #wbeltPBox.visible {
	opacity: 1;
  	visibility: visible;
}

#scrollBox {
	visibility: hidden;
	position:fixed;
}

#scrollBox.visible {
	opacity: 1;
  	visibility: visible;
}

div.baseImgBox {
	width:68px;
	height:68px;
	background-color: #ffffffaa;
	float:left;
	position:relative;
}

img.baseImg {
	transform: scale(2);
	image-rendering: pixelated;
	position:absolute;
	top:32px;
	left:20px;
}

div.baseStats{
	color:white;
	font-family: monospace;
	font-size:10px;
	float:right;
	width:65%;
}

div.scrollStats{
	color:white;
	font-family: sans-serif;
	font-size:12px;
	float:right;
	width:65%;
	margin-top:5px;
}

div.scrollStats > p {
	margin-top: 3px;
	margin-bottom:3px;
}

span.itemTitle {
	color:white;
	font-family:sans-serif;
	font-weight:bold;
	font-size:12px;
}

ul.statList{
	list-style: none;
	color:#ffeecc;
	font-family: monospace;
	font-size:11px;
	margin-top:0px;
	padding-left:14px;
}

span.statValue{
	color:white;
	font-weight: bold;
}

ul.statList li::before {
	content:"+";
	font-family: sans-serif;
	color:#ff6600;
	font-size:8px;
	font-weight:800;
	position: absolute;
	left: 5px;
}


#badges-container {
	background-color: var(--cell);
	padding: 0px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	width:80%;
	height:500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 20px;
}

#navbar .navActive {
	background-color: var(--cell);
	color: white !important;
	padding: 5px 20px;
	border-radius: 18px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	font-family: Arial, sans-serif !important;
	margin-left: 10px;
	margin-right: 10px;
}

#navbar .navInactive {
	background-color: var(--darker);
	color: white !important;
	padding: 5px 20px;
	border-radius: 18px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	font-family: Arial, sans-serif !important;
	margin-left: 10px;
	margin-right: 10px;
}

#navbar > a {
	text-decoration: none;
}

#navbar {
	text-align: center;
}