html {
	min-height: 100%;
	}
	body {
	/*background-image: linear-gradient(146deg, rgba(240,240,240,1), rgba(210,210,210,1));*/
	background-image: url(/images/background-50.svg);
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0;
	background-attachment: fixed;
	font-family: "Roboto";
    font-size: 16px;
	color: #333;
	padding-top: 60px;
	margin-bottom: 0;
	min-height: 100%;
	}
	h1 {
	}
	h2 {
	font-size: 23px;
	line-height: 40px;
	font-weight: normal;
	margin-bottom: 5px;
	}
	hh {
	font-size: 23px;
	line-height: 40px;
	}
	p {
	font-size: 1em;
	margin-block-start: 0em;
    margin-block-end: 0em;
	}
	.welldone {
	font-size: 30px;
	font-weight: bold;
	}
	.p1 {
	font-size: 1.15em;
	display: inline-block;
	}
	.p3 {
	font-size: 1.15em;
	padding-bottom: 10px;
	}
	pp {
	font-size: 0.9em;
	display: inline-block;
	}
	ppp {
	line-height: 30px;
	}
	.p2 {
	font-size: 1em;
	text-align: center;
	padding: 20px 0px 10px;
	}
	a {
	text-decoration: none;
	color: #8CC63F;
	}
	ol {
		list-style-type: square;
		list-style-position: inside;
		margin-block-start: 5px;
		margin-block-end: 5px;
		margin-inline-start: 0;
		margin-inline-end: 0px;
		padding-inline-start: 0;
	}
	#counter,#total,#timer,#gen-name,#timer-score,#currentcount, .txt {
		display:inline;
	}
    .box {
	margin: 10px 0px 0px 10px;
	padding: 11px 10px 10px 10px;
	background: rgba(255, 255, 255, 0.85);
	min-height: 30px;
	line-height: 30px;
	}
	.bigbox {
	padding: 20px;
	width: 100%;
	}
	.bigbox2 {
		padding: 20px 10px 0px 10px;
	}
	.rounded {
	border-radius: 3px 10px 3px 20px;
	}
	.roundedb {
	border-radius: 3px 20px;
	}
	.roundedc {
	border-radius: 3px;
	}
	.roundedc2 {
	border-radius: 13px 3px 13px 3px;
	}
	.roundedd {
	border-radius: 3px 3px 0px 0px;
	}
	.roundede {
	border-radius: 20px 3px 0px 0px;	
	}
	.roundedf {
	border-radius: 0px 0px 20px 3px;
	}
	.roundedg {
	border-radius: 3px 20px 3px 3px;
	}
	.roundedh {
	border-radius: 3px 3px 3px 20px;
	}
	.roundedg2 {
	border-radius: 0px 20px 3px 0px;
	}
	.roundedh2 {
	border-radius: 3px 0px 0px 20px;
	}
	.roundedi {
	border-radius: 35px 5px 15px 35px;
	}
	.roundedleft {
	border-radius: 10px 3px 3px 10px;
	}
	.roundedright {
	border-radius: 3px 10px 10px 3px;
	}
	.unleft {
	margin-left: -4px !important;
	}
	.lime {
	background: #8CC63F !important;
	color: #fff !important;
	}
	.limelight {
	background: #e4f7ca;
	color: #333;
	border: 2px solid #8CC63F;
	border-bottom: 2px dotted #8CC63F;
	}
	.outline {
	border: 2px solid #8CC63F;
	padding: 9px 8px 8px 8px;
	}
	.greyer {
	background: #222;
	color: #fff;
	}
	.grey {
	background: #999;
	color: #fff;
	}
	.red {
	background: #D00;
	color: #fff;
	}
	.winbutton {
	background-color: rgb(0,0,0,0.1);
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 10px;
	border-radius: 4px 20px;
	}
	.highlight {
	font-weight: bold;
	color: #333;
	}
	.form {
	
	}
	.padded {
	padding-left: 18px;
	padding-right: 18px;
	}
	.padded-left {
	padding-left: 20px;
	}
	.padded-left2 {
	padding-left: 10px;
	}
	.lpad {
	padding-left: 7px;
	}
	.padright {
	padding-right: 14px;
	}
	.padleft {
	padding-left: 18px;
	padding-right: 10px;
	}
	.padtop {
		padding-top: 10px;
	}
	.slightpad {
	padding-left: 14px;
	padding-right: 14px;
	}
	.topedge {
	margin-top: -2px;
	border-top: 2px dotted #8CC63F;
	}
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		line-height: 20px;
	  }
	.centeredbox {
	margin: 0 auto;
	/*max-width: 1474px;*/
	/*max-width: 1529px;*/
	max-width: 1613px;
	/*max-width: 1697px;*/
	/*max-width: 1781px;*/
	overflow-x: hidden;
	}
	input {
	margin-left: 5px;
	box-sizing: border-box;
	font-family: "Roboto";
    font-size: 16px;
	color: #333;
	background-color: #EEE;
	}
	input:focus {
	outline: none;
	border: 2px solid #444;
	background-color: #fff;
	}
	.input-name {
	padding: 2px 2px 2px 4px;
	width: 150px;
	border-radius: 4px 10px 4px 4px;
	border: 2px solid #444;
	margin: -4px -5px 0px 5px;
	position: relative;
	top: 2px;
	font-size: 21px !important;
	}
	.input-twitch {
	padding: 3px;
	width: 275px;
	border-radius: 6px 3px 3px 3px;
	border: 2px solid #8CC63F;
	}
	.input-twitch:disabled {
	background-color: #8CC63F;
	}
	.input-user {
	width: 150px !important;
	border-radius: 6px 0px 0px 3px !important;
	}
	.input-timer {
	padding: 3px 33px 3px 3px;
	width: 68px;
	border-radius: 6px 0px 0px 3px;
	border: 2px solid #8CC63F;
	text-align: right;
	}
	.minute {
	margin-left: -36px;
	padding-right: 10px;
	display: inline-block;
	color: #333;
	}
	input[type=number]::-webkit-inner-spin-button, 
	input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none !important; 
  margin: 0; 
	}
	input[type=number] {
		-moz-appearance: textfield;
	}
	.attached {
	margin-left: -10px !important;
	border-radius: 0px 3px 6px 0px !important;
	padding-left: 5px !important;
	}
	.atchright {
	margin-left: -4px !important;
    border-radius: 0px 3px 6px 0px !important;
    padding-left: 4px !important;
	}
	.atchleft {
	border-radius: 6px 0px 0px 3px !important;
	padding-right: 4px !important;
	}
	.atchleft2 {
	margin-left: -6px !important;
	border-radius: 0px 3px 6px 0px !important;
	padding-left: 4px !important;
	}
	.atchcent {
	margin-left: -6px !important;
	margin-right: -2px !important;
	border-radius: 0px 0px 0px 0px !important;
	padding-right: 4px !important;
    padding-left: 4px !important;
	}
	.attentionshake {
	animation: shake 0.5s;
	animation-iteration-count: 2;
	animation-delay: 0.3s;
	}
	@keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
	}
	.bgpattern {
		display: none;
		position: fixed;
		bottom: 24%;
		left: 10%;
		width: 18%;
		opacity: 0.9;
		z-index: -2;
	}
	.bgpattern2 {
		display: none;
		position: fixed;
		bottom: calc(100px + 40%);
		right: 14%;
		width: 33%;
		opacity: 0.2;
		z-index: -2;
	}
	.centered {
	margin: 0 auto;
	}
	.sprite {
	margin: -36px -19px -12px -20px;
	}
	.spritew {
	margin: -24px -15px -7px;
	}
	.spritet {
	margin: -24px -16px -7px;
	}
	.spritel {
	margin: -26px -11px -6px -15px;
	}
	.spriteb {
	margin: -30px -20px -9px -22px;
	}
	.spritec {
	margin: -3px -10px 0px 0px;
	padding-right: 2px;
	float: right;
	}
	@keyframes zoomExample {
		from {transform: matrix(2,0,0,2,0,-10);}
		to {transform:matrix(1,0,0,1,0,0);}
	}
	
	 @keyframes revealZoom {
		from {transform: matrix(2,0,0,2,0,0);}
		to {transform:matrix(1,0,0,1,0,0);}
	}
	.fixed-width {
	width: 154px;
	}
	.revealed {
	filter: brightness(50%);
	animation-name: revealZoom;
	animation-duration:750ms;
	}
	.zoom {
	animation-name: zoomExample;
	animation-duration:1500ms;
	}
	.recentsprite {
	margin: -27px -20px -10px 1px;
    width: 64px;
    height: 56px;
    object-fit: none;
    object-position: 100% 0;
	}
	.column {
	float: left;
	}
	.columnr {
	float: right;
	}
	.eighth {
	width: 12.5%;
	}
	.sixth {
	width: 16.66%;
	}
	.fifth {
	width: 20%
	}
	.quarter {
	width: 25%;
	}
	.third {
	width: 33.33%
	}
	.half {
	width: 50%;
	}
	.half-fixed {
	width: 480px;	
	}
	.threefifths {
	width: 60%;	
	}
	.twofifths {
	width: 40%;
	}
	.fiveeighth {
	width:62.5%;
	}
	.twothirds {
	width: 66%;
	}
	.unknownbox {
	max-width: 82px;
	}
	.allbox {
	max-width: 1566px;
	}
	.smol {
	width: 170px;
	text-align: center;
	}
	.smoler {
	width: 135px;
	text-align: center;
	}
	.decent {
	width: 235px;
	}
	.wider {
	min-width: 158px;
	}
	.namelist {
	width: 183px;
	}
	.wide {
	width: 90%;
	}
	.full {
	width: 100%;
	}
	/* Clear floats after the columns */
	.row:after {
	content: "";
	display: table;
	clear: both;
	}
	.row {
	margin-right: 10px;
	}
	/* Clear floats after the columns */
	.row2:after {
	content: "";
	display: table;
	clear: both;
	}
	.bottommargin {
	margin-bottom: 10px;
	}
	.bottomless {
	padding: 11px 10px 5px 10px !important;
	margin-bottom: 10px;
	}
	.header {
	position: fixed;
	top: 0px;
	z-index: 2;
	padding-bottom: 10px;
	}
	.footer {
	bottom: 0px;
	position: relative;
	width: 100%
	}
	.marr {
	margin-right: 10px;
	}
	.button {
		background-color: #8cc63f;
		border: solid #65ae04 2px;
	color: white;
	padding: 9px 8px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 10px 0px 0px 10px;
	cursor: pointer;
	min-width: 100px;
	min-height: 30px;
	line-height: 30px;
	font-family: "Roboto";
    font-size: 16px;
	}
	.button-s {
		color: white;
		padding: 14px 20px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		margin: 3px 1px;
		cursor: pointer;
		min-height: 30px;
		line-height: 30px;
		font-family: "Roboto";
		font-size: 18px;
		min-width: 80px;
	}
	.noborder {
		border:0px !important;
		min-height: 34px;
	}
	.button:hover {
	background-color: #D00;
	border: solid #D00 2px;
	}
	.button-i {
	display: inline-block;
	cursor: pointer;
	margin: 10px 0px 0px 10px;
	padding: 0px;
	border: none;
	height: 51px;
	width: 38px;
	}
	.button-e {
		display: inline-block;
		cursor: pointer;
		margin: 10px 0px 0px 10px;
		border: none;
		padding: 9px 14px 8px;
		text-align: center;
		min-height: 30px;
		line-height: 30px;
		font-family: "Roboto";
		font-size: 16px;
		min-width: 90px;
	}
	.btL {
		border-radius: 13px 0px 0px 3px !important;
		border-right-style: dotted !important;
	}
	.btR {
		margin: 10px 0px 0px -6px !important;
		border-radius: 0px 3px 13px 0px !important;
		border-left-style: dotted !important;
	}
	.btC {
		margin: 10px 0px 0px -6px !important;
		border-radius: 0px 0px 0px 0px !important;
		border-left-style: dotted !important;
		border-right-style: dotted !important;
	}
	.grborder {
		border: 2px solid rgba(255, 255, 255, 0.85);
	}
	.moonc {
	background: #3f3972;
	border: 2px solid #3f3972;
	}
	.sunc {
	background: #ed9a1e;
	border: 2px solid #ed9a1e;
	}
	.spbutton {
		background:rgba(255, 255, 255, 0.85);
	}
	.iconc {
		min-width: 1px !important;
		padding-bottom: 2px !important;
	}
	.shinyc {
	width: 46px;
	}
	.shadowc {
	}
	.moonc:hover {
	background: #302d50;
	}
	.sunc:hover {
		background: #eeac4a;
	}
	.shinyc:hover {
		background: #ff7b9a !important;
		border: solid 2px #ff7b9a !important;
	}
	.shadowc:hover {
		background: #65ae04;
		color: #fff;
		border: 2px solid #65ae04;
	}
	.check {
	display: inline-block;
	}
	.hint {
	display: none;
	font-size: 21px !important;
	vertical-align: bottom;
	}
	.hovg {
	background-color: #8CC63F;
	border: 2px solid #8CC63F;
	}
	.hovn {
	border: 2px solid #3C3C3C;
	}
	.hovn:hover {
	border: 2px solid #ffffff;
	}
	.hovg:hover {
	background: #65ae04;
	border-color: #65ae04;
	}
	.hovr:hover {
	background-color: #666;
	border-color: #666;
	}
	.hovt:hover {
	background-color: #666;	
	}
/*	.hovl {
	background-color: #777;
	}
	.hovl:hover {
	background-color: #bbb;
	}
	.hovli{
	background-color: #a7d567;
	}
	.hovli:hover {
	background-color: #8CC63F;
	}*/
	.notready {
	opacity: 0.2;
	background-color: #666 !important;
	border: 2px solid #666 !important;
	}
	.button:focus {
	outline: none;
	}
	.close {
		text-align: right;
		color:#8CC63F;
		cursor: pointer;
		float: right;
		font-size: 1.5em;
		line-height: 22px;
	}
	.close:hover {
		color: #65ae04;
	}
	.smolbutton {
	background-color: #fff;
	border: solid #8CC63F 2px;
	border-radius: 6px 3px 6px 3px;
	color: #8CC63F;
	text-align: center;
	text-decoration: none;
	display: inline;
	margin: 0px 0px 0px 5px;
	padding: 3px 5px 3px 5px;
	cursor: pointer;
	font-family: "Roboto";
    font-size: 16px;
	}
	.smolbuttonSwap {
	background-color: #8CC63F;
	border: solid #8CC63F 2px;
	border-radius: 5px;
	color: #fff;
	padding: 0px;
	text-align: center;
	text-decoration: none;
	display: inline;
	margin: 0px 0px 0px 5px;
	padding: 3px 5px 3px 5px;
	cursor: pointer;
	font-family: "Roboto";
    font-size: 16px;
	}
	.smolbutton:hover {
	background-color: #65ae04;
	border-color: #65ae04;
	color: #fff;
	}
	.smolbuttonx {
	background-color: #8CC63F;
	color: #fff;
	border-color: #8CC63F;
	}
	.langbutton {
		font-size: 12px !important;
		font-family: Roboto Condensed !important;
		padding: 6px 4px 4px 3px !important;
		margin: 0px 0px 0px 4px !important;
	}
	.commabutton {
		padding-right: 7px !important;
		padding-left: 12px !important;
		margin: 0px 4px 0px 1px !important;
	}
	.ppbutton {
	border: solid #65ae04 1px;
	border-radius: 4px;
	background-color: #65ae04;
	color: #fff;
	padding: 0px;
	text-align: center;
	text-decoration: none;
	display: inline;
	padding: 0px 2px;
	margin: 0px 2px 0px 1px;
	cursor: pointer;
	font-family: "Roboto";
	}
	.ppbutton:hover {
	background-color: #8CC63F;
	border-color: #8CC63F;
	color: #fff;
	}
	.radio-item {
	display: inline-block;
	position: relative;
	margin-right: 8px;
	}
	.first {
	margin-left: 8px;
	}
	.mleft {
	margin-left: 9px;
	}
	.last {
	margin-right: 0px;
	}
	.langright {
	float:right;
	display: inline-block;
	}
	.right {
	float:right;
	display: inline-block;	
	}
	.inlinetext {
	display: inline-block;
	margin-left: 10px;
	}
	.region {
    margin-top: -6px;
	padding-left: 4px;
	display: block;
    min-width: 79px;
	}
	.regionb {
    margin-bottom: 3px;    
	margin-top: -4px;
	padding-left: 7px;
	display: block;
	}
	.center {
	text-align: center;
	}
	.lmarg {
		margin-left: 10px;
	}
	.tmarg {
		margin-top: 20px;
	}
	.tmarg2 {
		margin-top: 50px;
		padding: 15px 30px;
	}
	.rank {
	padding: 0px 4px;
	margin-top: -2px;
	margin-bottom: -2px;
	border-radius: 3px 13px;
	border: 2px solid;
	color: #333 !important;
	}
	.rankone{
	background-color: #fce63a;
	border-color: #b8a300;
	}
	.ranktwo{
	background-color: #e8eded;
	border-color: #9ea8a8;
	}
	.rankthree{
	background-color: #f5b942;
	border-color: #d4920f;
	}
	.quizmaster:before {
	content: "\2605 \20";
	}
	.board{
	margin: 0px auto 6px;
	}
	.rankusers {
	display: inline-block;
	margin-right: -10px;
	}
	.inblock {
	display:inline-block;
	}
	.inlinebox {
	display: inline-block;
	background-color: #deefc7;
	padding: 6px 6px;
	margin: 0px 3px;
	}
	.place {
	width: 42px;
	border-radius: 13px 3px 3px 3px;
	text-align: right;
	padding-right: 10px;
	}
	.twitchname {
	width: calc(100% - 172px);
	border-radius: 3px;
	text-align: left;
	padding-left: 10px;
	}
	.number {
	width: 64px;
	border-radius: 3px 3px 13px 3px;
	text-align: left;
	padding-left: 10px;
	}
	/*dark mode classes*/
	/*add class to body*/
	.bodydark {
	background-image: url(/images/background-dark.svg);
	color: #fff !important;
	}
	/*add class to elements with class .box, etc*/
	.boxdark {
	background: rgb(17, 17, 17, 0.90);
	}
	.smolbuttondark {
	background-color: #111;
	}
	.buttondark {
	background-color:#111;
	border: 2px solid #8CC63F;
	}
	.smolbuttonxdark {
	color: #111;
	background-color: #8CC63F;
	}
	.greyerdark {
	background-color: #111;
	}
	.limelightdark {
	color: #fff;
	background: #111;
	border: 2px solid #639422;
	border-bottom: 2px dotted #639422;
	}
	.inlineboxdark {
	background-color: #8CC63F;
	}
	.blenddark {
	background-image: url(/images/background-dark-grey.svg);
	background-blend-mode: hard-light !important;
	}
	/*dark mode classes end*/
	.radio-item input[type='radio'] {
	display: none;
	}
	.blocked {
	opacity: 0.3;
	}
	.radio-item label:before {
	content: " ";
	display: inline-block;
	position: relative;
	top: 3px;
	margin-right: 0px;
	margin-left: 0px;
	width: 14px;
	height: 14px;
	border-radius: 5px;
	border: 2px solid #8CC63F;
	background-color: transparent;
	cursor: pointer;
	}
	.radio-item input[type=radio]:checked + label:after {
	border-radius: 3px;
	width: 10px;
	height: 10px;
	position: absolute;
	top: 9px;
	left: 4px;
	content: " ";
	display: block;
	background: #8CC63F;
	cursor: pointer;
	}
	.loader {
	display: block;
	}
	.playtext, .inputbar {
	opacity: 0;
	}
	.padfull {
	padding: 16px 0px 8px;
	}
	.hidden {
	display: none;
	}
	.twitch-coll, .order-coll {
	display: none;
	}
	.twitchbar, .orderbar {
		cursor: pointer;
		display: inline-block;
	}
	.notxt {
		cursor: default;
	}
	.url {
		padding: 3px 0px 11px 39px;
		opacity: 1;
		font-size: 20px;
		position: relative;
		right: 0;
		top: 0;
		z-index: 10;
		font-family: 'Roboto';
		margin: 10px 10px 10px -5px;
		border-top: 3px dotted;
		border-color: #8CC63F;
		float: right;
	}
	.bdots {
	border-color: #fff;
	}
	.overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(16,17,14,0.8);
	z-index: 4;
	}
	.overlay2 {
	position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, rgb(16 17 14 / 10%) 20%, rgb(16 17 14 / 30%) 50%, rgba(16,17,14,0.8015581232492998) 100%);
    z-index: 6;
	cursor: pointer;
	}
	.pauseoverlay {
		background-color: rgba(16,17,14,1) !important;
	}
	.pointer {
	cursor: pointer;
	}
	.cursor {
	cursor: default;
	}
	.press {
	background-color: rgb(17 17 17 / 5%);
	margin: -4px -8px;
    width: 98px;
    padding: 4px;
    border-radius: 8px 17px 8px 8px;
	}
	.arrow {
	border: solid #8CC63F;
	border-width: 0px 5px 5px 0;
	display: inline-block;
	padding: 4px;
	border-radius: 2px;
	border-style: solid;
	}
	.aright {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	}
	.aleft {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	}
	.aup {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	position: relative;
	top: 3px;
	}
	.adown {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);	
	position: relative;
	bottom: 2px;
	}
	.arrowbutton {
	cursor: pointer;
	display: inline-block;
	}
	.ableft {
		padding-left: 5px;
	}
	.abright {
		padding-right: 5px;
	}
	.abupdown {
		padding: 0px 5px;
	}
	::-webkit-scrollbar {
	width: 15px;
  	}
	::-webkit-scrollbar-track {
	background: #fff; 
 	}
    ::-webkit-scrollbar-thumb {
	background: #8cc63f; 
 	}
    ::-webkit-scrollbar-thumb:hover {
	background: rgb(70, 143, 46);
    }
	.popup {
		cursor: pointer;
		color: #8CC63F;
		display:inline;
	}
	.popuptext {
		visibility: hidden;
		min-width: 500px;
		height: 70%;
		contain: content;
		background-color: rgba(255, 255, 255, 0.9);
		color: #333;
		padding: 10px 10px;
		position: fixed;
		z-index: 3;
		left: calc(50% - 300px);
		top: 10%;
		border: #8CC63F solid 2px ;
	}
	.popupscrl {
		overflow: auto;
		height: 95.5%;
	}
	.scrollbox {
		overflow: auto;
		height: calc(100% - 205px);
	}
	.suppbox {
		height: calc(100% - 350px);
	}
	.popuptext::after {
		content: "";
		position: fixed;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #666;
	}
	td {
		border-top: 2px dotted #8CC63F;
		padding-bottom: 5px;	
	}
	table {
		width: 100%;
	}
	td:nth-child(even) {
		padding-left: 5px;
		vertical-align: baseline;
		padding-top: 5px;
	}
	td:nth-child(odd) {
	border-right: 2px dotted #dcdcdc;
    padding-right: 1px;
    padding-top: 5px;
	}
	.show {
		visibility: visible;
	}
	.tooltip {
	position: relative;
	display: inline-block;
	}
	.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	padding: 10px 15px;
	text-align: center;
	background-color: #444;
	color: #fff;
	border-radius: 4px;
	position: absolute;
	z-index: 3;
	bottom: 100%;
	left: 50%;
	margin-left: -70px;
	}
	.tooltip:hover .tooltiptext {
	visibility: visible;
	}
	.prompt {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	color: #fff;
	transform: translate(-50%,-70%);
	}
	.prompt2 {
	position: absolute;
    right: 0;
    text-align: center;
    color: #fff;
    width: 330px;
	height: 100%;
	}
	.fullwidth {
	width: 100%;
	}
	.cropped {
	width: 30px;
	height: 30px;
	object-fit: none;
	object-position: 50% 100%;
	}
	.panel {
	display: none;
	overflow: hidden;
	}
	.titlecard {
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 30%;
    max-width: 600px;
	}
	.mshow {
	display: none;
	}
	.mhide {
	display: inline-block;
	}
	.tshow {
	display: none;
	}
	.thide {
	display: inline-block;
	min-width: 65px;
	padding: 5px 0px 5px 15px;
	margin: 0px -5px 0px 0px;
	vertical-align: top;
	}
	.inputlong {
	display: inline;
	}
	.inputshort {
	display: none;
	}
	.headermargin {
	margin-right: 159px;
	}
	.snackbar {
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	background-color: rgba(51, 51, 51, 0.9);
	color: #fff;
	text-align: center;	
	border-radius: 20px 3px 20px 3px;
	padding: 16px;
	position: fixed;
	z-index: 6;
	left: 50%;
	top: 70px;
	}
	.snackbarshow {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  	animation: fadein 0.5s, fadeout 0.5s 2.5s;
	}

	.imagemessage {
		visibility: hidden;
		opacity: 0;
		min-width: 250px;
		margin-left: -125px;
		text-align: center;	
		border-radius: 20px 3px 20px 3px;
		padding: 16px;
		position: fixed;
		z-index: 6;
		left: 50%;
		top: 70px;

	}


	@-webkit-keyframes fadein {
	from {top: 0; opacity: 0;}
	to {top: 70px; opacity: 1;}
	}
	@keyframes fadein {
	from {top: 0; opacity: 0;}
	to {top: 70px; opacity: 1;}
	}
	@-webkit-keyframes fadeout {
	from {top: 70px; opacity: 1;}
	to {top: 0; opacity: 0;}
	}
	@keyframes fadeout {
	from {top: 70px; opacity: 1;}
	to {top: 0; opacity: 0;}
	}

	@media only screen and (max-width: 1600px) {
	.twothirds {
	width: 100%;
	}		
	}
	@media only screen and (max-width: 1080px) {
	.quarter, .sixth, .eighth, .third, .half, .half-fixed, .fiveeighth, .fifth {
    width: 100%;
	}
	}
	@media only screen and (max-width: 768px) {
	.mshow {
	display: inline-block;
	}
	.mhide {
	display: none;
	}
	.button-s {
	min-width: 1px;
	}
	.tshow {
	display:none;
	}
	}
	@media only screen and (min-width: 769px) and (max-width: 918px) {
	.tshow {
	display: inline-block;
	min-width: 1px;
	padding: 5px 0px 5px 15px;
	margin: 0px -5px 0px 0px;
	vertical-align: top;
	}
	}
	@media only screen and (max-width: 918px) {
	.threefifths, .twofifths {
	width: 100%;
	}
	.thide {
	display: none;
	}
	}
	@media only screen and (max-width:634px) {
	.inputlong {
	display: none;
	}
	.inputshort {
	display: inline;
	}
	}
	@media only screen and (max-width: 536px) {
	.langright {
	float: none;
	display: block;
	padding: 10px 0px 0px 0px !important;
	}
	}
	@media only screen and (max-width: 916px) {
	body {
	padding-top: 122px;
	}	
	}
	@media only screen and (max-width: 527px) {
	.url {
	display: none;
	}
	}
	@media only screen and (max-width: 352px) {
	.recentsprite {
	display: none;
	}
	}	
	@media only screen and (max-width: 303px) {
	.lightswitch {
	display: none;
	}
	}
	@media only screen and (max-width: 320px) {
	.count {
	display: none;
	}
	}
	@media only screen and (max-width: 255px) {
	.inputshort {
	display: none;
	}
	}	normal
	/*type-color-changing classes*/
	.anormal {
		color: #ddddcc ;
	}
	.limenormal {
		background: #ddddcc !important;
		color: #646464 !important;
	}
	.limelightnormal {
		background: #c0c0b3 ;
		color: #111;
		border-color: #ddddcc !important;
	}
	.outlinenormal {
		border: 2px solid #ddddcc;
		padding: 9px 8px 8px 8px;
	}
	.topedgenormal {
		border-top-color: #ddddcc ;
	}
	.input-twitchnormal, .input-timernormal {
		border-color: #ddddcc ;
	}
	.input-twitchnormal:disabled {
		background-color: #ddddcc ;
	}
	.buttonnormal {
		background-color: #ddddcc;
		border: solid #c0c0b3 2px;
		color: #555;
	}
	.smolbuttonnormal {
		border-color: #ddddcc ;
	   color: #ddddcc;
		color: #555;
	}
	.smolbuttonSwapnormal {
		background-color: #ddddcc;
		border-color: #ddddcc;
	}
	.smolbuttonnormal:hover {
		background-color: #c0c0b3;
		border-color: #c0c0b3;
		color: #fff;
	}
	.smolbuttonxnormal {
		background-color: #ddddcc;
		color: #fff;
		border-color: #ddddcc;
	}
	.inlineboxnormal {
		background-color: #f0f0e6;
	}
	.smolbuttonxdarknormal {
		color: #111;
		background-color: #ddddcc ;
	}
	.buttondarknormal {
		border-color: #b3b3a6 ;
	}
	.limelightdarknormal {
		color: #fff;
		background: #111;
		border-color: #b3b3a6;
		border-bottom-color: #b3b3a6;
	}
	.inlineboxdarknormal {
		background-color: #ddddcc ;
	}
	.arrownormal {
		border-color: #ddddcc;
	}
	.afire {
		color: #ff6611;
	}
	.limefire {
		background: #ff6611 !important;
		color: #fff !important;
	}
	.limelightfire {
		background: #ff8844;
		color: #111;
		border-color: #ff6611 !important;
	}
	.outlinefire {
		border: 2px solid #ff6611;
		padding: 9px 8px 8px 8px;
	}
	.topedgefire {
		border-top-color: #ff6611;
	}
	.input-twitchfire, .input-timerfire {
		border-color: #ff6611;
	}
	.input-twitchfire:disabled {
		background-color: #ff6611;
	}
	.buttonfire {
		background-color: #ff6611;
		border: solid #d1550e 2px;
	}
	.smolbuttonfire {
		border-color: #ff6611;
		color: #ff6611;
	}
	.smolbuttonSwapfire {
		background-color: #ff6611;
		border-color: #ff6611;
	}
	.smolbuttonfire:hover {
		background-color: #d1550e;
		border-color: #d1550e;
		color: #fff;
	}
	.smolbuttonxfire {
		background-color: #ff6611;
		color: #fff;
		border-color: #ff6611;
	}
	.inlineboxfire {
		background-color: #ffaa77;
	}
	.smolbuttonxdarkfire {
		color: #111;
		background-color: #ff6611;
	}
	.buttondarkfire {
		border-color: #b3480f;
	}
	.limelightdarkfire {
		border-color: #b3480f;
		border-bottom-color: #b3480f;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkfire {
		background-color: #ff6611;
	}
	.arrowfire {
		border-color: #ff6611;
	}
	.awater {
		color: #3377ff;
	}
	.limewater {
		background: #3377ff !important;
		color: #fff !important;
	}
	.limelightwater {
		background: #66aaff;
		color: #111;
		border-color: #3377ff !important;
	}
	.outlinewater {
		border: 2px solid #3377ff;
		padding: 9px 8px 8px 8px;
	}
	.topedgewater {
		border-top-color: #3377ff;
	}
	.input-twitchwater, .input-timerwater {
		border-color: #3377ff;
	}
	.input-twitchwater:disabled {
		background-color: #3377ff;
	}
	.buttonwater {
		background-color: #3377ff;
		border: solid #2856b3 2px;
	}
	.smolbuttonwater {
		border-color: #3377ff;
		color: #3377ff;
	}
	.smolbuttonSwapwater {
		background-color: #3377ff;
		border-color: #3377ff;
	}
	.smolbuttonwater:hover {
		background-color: #2856b3;
		border-color: #2856b3;
		color: #fff;
	}
	.smolbuttonxwater {
		background-color: #3377ff;
		color: #fff;
		border-color: #3377ff;
	}
	.inlineboxwater {
		background-color: #99ccff;
	}
	.smolbuttonxdarkwater {
		color: #111;
		background-color: #3377ff;
	}
	.buttondarkwater {
		border-color: #1c3d99;
	}
	.limelightdarkwater {
		border-color: #1c3d99;
		border-bottom-color: #1c3d99;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkwater {
		background-color: #3377ff;
	}
	.arrowwater {
		border-color: #3377ff;
	}
	.agrass {
		color: #11cc33;
	}
	.limegrass {
		background: #11cc33 !important;
		color: #fff !important;
	}
	.limelightgrass {
		background: #44dd66;
		color: #111;
		border-color: #11cc33 !important;
	}
	.outlinegrass {
		border: 2px solid #11cc33;
		padding: 9px 8px 8px 8px;
	}
	.topedgegrass {
		border-top-color: #11cc33;
	}
	.input-twitchgrass, .input-timergrass {
		border-color: #11cc33;
	}
	.input-twitchgrass:disabled {
		background-color: #11cc33;
	}
	.buttongrass {
		background-color: #11cc33;
		border: solid #0e9e2f 2px;
	}
	.smolbuttongrass {
		border-color: #11cc33;
		color: #11cc33;
	}
	.smolbuttonSwapgrass {
		background-color: #11cc33;
		border-color: #11cc33;
	}
	.smolbuttongrass:hover {
		background-color: #0e9e2f;
		border-color: #0e9e2f;
		color: #fff;
	}
	.smolbuttonxgrass {
		background-color: #11cc33;
		color: #fff;
		border-color: #11cc33;
	}
	.inlineboxgrass {
		background-color: #77dd88;
	}
	.smolbuttonxdarkgrass {
		color: #111;
		background-color: #11cc33;
	}
	.buttondarkgrass {
		border-color: #0c8023;
	}
	.limelightdarkgrass {
		border-color: #0c8023;
		border-bottom-color: #0c8023;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkgrass {
		background-color: #11cc33;
	}
	.arrowgrass {
		border-color: #11cc33;
	}
	.aelectric {
		color: #ffdd11 !important;
	}
	.limeelectric {
		background: #ffdd11 !important;
		color: #646464 !important;
	}
	.limelightelectric {
		background: #d0bb0c;
		color: #111;
		border-color: #ffdd11 !important;
	}
	.outlineelectric {
		border: 2px solid #ffdd11;
		padding: 9px 8px 8px 8px;
	}
	.topedgeelectric {
		border-top-color: #ffdd11;
	}
	.input-twitchelectric, .input-timerelectric {
		border-color: #ffdd11;
	}
	.input-twitchelectric:disabled {
		background-color: #ffdd11;
	}
	.buttonelectric {
		background-color: #ffdd11;
		border: solid #ffee66 2px;
		color: #555;
	}
	.smolbuttonelectric {
		border-color: #ffdd11;
		color: #555;
	}
	.smolbuttonSwapelectric {
		background-color: #ffdd11;
		border-color: #ffdd11;
	}
	.smolbuttonelectric:hover {
		background-color: #ffee66;
		border-color: #ffee66;
		color: #fff;
	}
	.smolbuttonxelectric {
		background-color: #ffdd11;
		color: #333;
		border-color: #ffdd11;
	}
	.inlineboxelectric {
		background-color: #b3a10a;
	}
	.smolbuttonxdarkelectric {
		color: #111;
		background-color: #ffdd11;
	}
	.buttondarkelectric {
		border-color: #776600;
	}
	.limelightdarkelectric {
		border-color: #776600;
		border-bottom-color: #776600;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkelectric {
		background-color: #ffdd11;
		color: #333;
	}
	.arrowelectric {
		border-color: #ffdd11;
	}
	.aice {
		color: #33ddff;
	}
	.limeice {
		background: #33ddff !important;
		color: #fff !important;
	}
	.limelightice {
		background: #66eeff;
		color: #111;
		border-color: #33ddff !important;
	}
	.outlineice {
		border: 2px solid #33ddff;
		padding: 9px 8px 8px 8px;
	}
	.topedgeice {
		border-top-color: #33ddff;
	}
	.input-twitchice, .input-timerice {
		border-color: #33ddff;
	}
	.input-twitchice:disabled {
		background-color: #33ddff;
	}
	.buttonice {
		background-color: #33ddff;
		border: solid #33aaee 2px;
	}
	.smolbuttonice {
		border-color: #33ddff;
		color: #33ddff;
	}
	.smolbuttonSwapice {
		background-color: #33ddff;
		border-color: #33ddff;
	}
	.smolbuttonice:hover {
		background-color: #33aaee;
		border-color: #33aaee;
		color: #fff;
	}
	.smolbuttonxice {
		background-color: #33ddff;
		color: #fff;
		border-color: #33ddff;
	}
	.inlineboxice {
		background-color: #99eeff;
	}
	.smolbuttonxdarkice {
		color: #111;
		background-color: #33ddff;
	}
	.buttondarkice {
		border-color: #1c4055;
	}
	.limelightdarkice {
		border-color: #1c4055;
		border-bottom-color: #1c4055;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkice {
		background-color: #33ddff;
	}
	.arrowice {
		border-color: #33ddff;
	}
	.afighting {
		color: #bb1122;
	}
	.limefighting {
		background: #bb1122 !important;
		color: #fff !important;
	}
	.limelightfighting {
		background: #dd3344;
		color: #111;
		border-color: #bb1122 !important;
	}
	.outlinefighting {
		border: 2px solid #bb1122;
		padding: 9px 8px 8px 8px;
	}
	.topedgefighting {
		border-top-color: #bb1122;
	}
	.input-twitchfighting, .input-timerfighting {
		border-color: #bb1122;
	}
	.input-twitchfighting:disabled {
		background-color: #bb1122;
	}
	.buttonfighting {
		background-color: #bb1122;
		border: solid #9f0f20 2px;
	}
	.smolbuttonfighting {
		border-color: #bb1122;
		color: #bb1122;
	}
	.smolbuttonSwapfighting {
		background-color: #bb1122;
		border-color: #bb1122;
	}
	.smolbuttonfighting:hover {
		background-color: #9f0f20;
		border-color: #9f0f20;
		color: #fff;
	}
	.smolbuttonxfighting {
		background-color: #bb1122;
		color: #fff;
		border-color: #bb1122;
	}
	.inlineboxfighting {
		background-color: #dd6677;
	}
	.smolbuttonxdarkfighting {
		color: #111;
		background-color: #bb1122;
	}
	.buttondarkfighting {
		border-color: #890c1d;
	}
	.limelightdarkfighting {
		border-color: #890c1d;
		border-bottom-color: #890c1d;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkfighting {
		background-color: #bb1122;
	}
	.arrowfighting {
		border-color: #bb1122;
	}
	.apoison {
		color: #cc22cc;
	}
	.limepoison {
		background: #cc22cc !important;
		color: #fff !important;
	}
	.limelightpoison {
		background: #dd55dd;
		color: #111;
		border-color: #cc22cc !important;
	}
	.outlinepoison {
		border: 2px solid #cc22cc;
		padding: 9px 8px 8px 8px;
	}
	.topedgepoison {
		border-top-color: #cc22cc;
	}
	.input-twitchpoison, .input-timerpoison {
		border-color: #cc22cc;
	}
	.input-twitchpoison:disabled {
		background-color: #cc22cc;
	}
	.buttonpoison {
		background-color: #cc22cc;
		border: solid #b21cb2 2px;
	}
	.smolbuttonpoison {
		border-color: #cc22cc;
		color: #cc22cc;
	}
	.smolbuttonSwappoison {
		background-color: #cc22cc;
		border-color: #cc22cc;
	}
	.smolbuttonpoison:hover {
		background-color: #b21cb2;
		border-color: #b21cb2;
		color: #fff;
	}
	.smolbuttonxpoison {
		background-color: #cc22cc;
		color: #fff;
		border-color: #cc22cc;
	}
	.inlineboxpoison {
		background-color: #dd77dd;
	}
	.smolbuttonxdarkpoison {
		color: #111;
		background-color: #cc22cc;
	}
	.buttondarkpoison {
		border-color: #9e179e;
	}
	.limelightdarkpoison {
		border-color: #9e179e;
		border-bottom-color: #9e179e;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkpoison {
		background-color: #cc22cc;
	}
	.arrowpoison {
		border-color: #cc22cc;
	}
	.aground {
		color: #eebb77;
	}
	.limeground {
		background: #eebb77 !important;
		color: #646464 !important;
	}
	.limelightground {
		background: #ffeeaa;
		color: #111;
		border-color: #eebb77 !important;
	}
	.outlineground {
		border: 2px solid #eebb77;
		padding: 9px 8px 8px 8px;
	}
	.topedgeground {
		border-top-color: #eebb77;
	}
	.input-twitchground, .input-timerground {
		border-color: #eebb77;
	}
	.input-twitchground:disabled {
		background-color: #eebb77;
	}
	.buttonground {
		background-color: #eebb77;
		border: solid #d4a663 2px;
		color: #555;
	}
	.smolbuttonground {
		border-color: #eebb77;
		color: #eebb77;
		color: #555;
	}
	.smolbuttonSwapground {
		background-color: #eebb77;
		border-color: #eebb77;
	}
	.smolbuttonground:hover {
		background-color: #d4a663;
		border-color: #d4a663;
		color: #fff;
	}
	.smolbuttonxground {
		background-color: #eebb77;
		color: #fff;
		border-color: #eebb77;
	}
	.inlineboxground {
		background-color: #ffeebb;
	}
	.smolbuttonxdarkground {
		color: #111;
		background-color: #eebb77;
	}
	.buttondarkground {
		border-color: #ba954f;
	}
	.limelightdarkground {
		border-color: #ba954f;
		border-bottom-color: #ba954f;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkground {
		background-color: #eebb77;
	}
	.arrowground {
		border-color: #eebb77;
	}
	.aflying {
		color: #ccbbff;
	}
	.limeflying {
		background: #ccbbff !important;
		color: #fff !important;
	}
	.limelightflying {
		background: #ddccff;
		color: #111;
		border-color: #ccbbff !important;
	}
	.outlineflying {
		border: 2px solid #ccbbff;
		padding: 9px 8px 8px 8px;
	}
	.topedgeflying {
		border-top-color: #ccbbff;
	}
	.input-twitchflying, .input-timerflying {
		border-color: #ccbbff;
	}
	.input-twitchflying:disabled {
		background-color: #ccbbff;
	}
	.buttonflying {
		background-color: #ccbbff;
		border: solid #b6a4dd 2px;
	}
	.smolbuttonflying {
		border-color: #ccbbff;
		color: #ccbbff;
	}
	.smolbuttonSwapflying {
		background-color: #ccbbff;
		border-color: #ccbbff;
	}
	.smolbuttonflying:hover {
		background-color: #b6a4dd;
		border-color: #b6a4dd;
		color: #fff;
	}
	.smolbuttonxflying {
		background-color: #ccbbff;
		color: #fff;
		border-color: #ccbbff;
	}
	.inlineboxflying {
		background-color: #ddccff;
	}
	.smolbuttonxdarkflying {
		color: #111;
		background-color: #ccbbff;
	}
	.buttondarkflying {
		border-color: #9e8bcc;
	}
	.limelightdarkflying {
		border-color: #9e8bcc;
		border-bottom-color: #9e8bcc;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkflying {
		background-color: #ccbbff;
	}
	.arrowflying {
		border-color: #ccbbff;
	}
	.apsychic {
		color: #ff3377;
	}
	.limepsychic {
		background: #ff3377 !important;
		color: #fff !important;
	}
	.limelightpsychic {
		background: #ff5599;
		color: #111;
		border-color: #ff3377 !important;
	}
	.outlinepsychic {
		border: 2px solid #ff3377;
		padding: 9px 8px 8px 8px;
	}
	.topedgepsychic {
		border-top-color: #ff3377;
	}
	.input-twitchpsychic, .input-timerpsychic {
		border-color: #ff3377;
	}
	.input-twitchpsychic:disabled {
		background-color: #ff3377;
	}
	.buttonpsychic {
		background-color: #ff3377;
		border: solid #d12261 2px;
	}
	.smolbuttonpsychic {
		border-color: #ff3377;
		color: #ff3377;
	}
	.smolbuttonSwappsychic {
		background-color: #ff3377;
		border-color: #ff3377;
	}
	.smolbuttonpsychic:hover {
		background-color: #d12261;
		border-color: #d12261;
		color: #fff;
	}
	.smolbuttonxpsychic {
		background-color: #ff3377;
		color: #fff;
		border-color: #ff3377;
	}
	.inlineboxpsychic {
		background-color: #ff5599;
	}
	.smolbuttonxdarkpsychic {
		color: #111;
		background-color: #ff3377;
	}
	.buttondarkpsychic {
		border-color: #b12351;
	}
	.limelightdarkpsychic {
		border-color: #b12351;
		border-bottom-color: #b12351;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkpsychic {
		background-color: #ff3377;
	}
	.arrowpsychic {
		border-color: #ff3377;
	}
	.abug {
		color: #aaee33;
	}
	.limebug {
		background: #aaee33 !important;
		color: #646464 !important;
	}
	.limelightbug {
		background: #ccee66;
		color: #111;
		border-color: #aaee33 !important;
	}
	.outlinebug {
		border: 2px solid #aaee33;
		padding: 9px 8px 8px 8px;
	}
	.topedgebug {
		border-top-color: #aaee33;
	}
	.input-twitchbug, .input-timerbug {
		border-color: #aaee33;
	}
	.input-twitchbug:disabled {
		background-color: #aaee33;
	}
	.buttonbug {
		background-color: #aaee33;
		border: solid #84b329 2px;
		color: #555;
	}
	.smolbuttonbug {
		border-color: #aaee33;
		color: #aaee33;
		color: #555;
	}
	.smolbuttonSwapbug {
		background-color: #aaee33;
		border-color: #aaee33;
	}
	.smolbuttonbug:hover {
		background-color: #84b329;
		border-color: #84b329;
		color: #fff;
	}
	.smolbuttonxbug {
		background-color: #aaee33;
		color: #fff;
		border-color: #aaee33;
	}
	.inlineboxbug {
		background-color: #bbee66;
	}
	.smolbuttonxdarkbug {
		color: #111;
		background-color: #aaee33;
	}
	.buttondarkbug {
		border-color: #6d9f1e;
	}
	.limelightdarkbug {
		border-color: #6d9f1e;
		border-bottom-color: #6d9f1e;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkbug {
		background-color: #aaee33;
	}
	.arrowbug {
		border-color: #aaee33;
	}
	.arock {
		color: #664433;
	}
	.limerock {
		background: #664433 !important;
		color: #fff !important;
	}
	.limelightrock {
		background: #775544;
		color: #111;
		border-color: #664433 !important;
	}
	.outlinerock {
		border: 2px solid #664433;
		padding: 9px 8px 8px 8px;
	}
	.topedgerock {
		border-top-color: #664433;
	}
	.input-twitchrock, .input-timerrock {
		border-color: #664433;
	}
	.input-twitchrock:disabled {
		background-color: #664433;
	}
	.buttonrock {
		background-color: #664433;
		border: solid #523328 2px;
	}
	.smolbuttonrock {
		border-color: #664433;
		color: #664433;
	}
	.smolbuttonSwaprock {
		background-color: #664433;
		border-color: #664433;
	}
	.smolbuttonrock:hover {
		background-color: #523328;
		border-color: #523328;
		color: #fff;
	}
	.smolbuttonxrock {
		background-color: #664433;
		color: #fff;
		border-color: #664433;
	}
	.inlineboxrock {
		background-color: #887766;
	}
	.smolbuttonxdarkrock {
		color: #111;
		background-color: #664433;
	}
	.buttondarkrock {
		border-color: #452820;
	}
	.limelightdarkrock {
		border-color: #452820;
		border-bottom-color: #452820;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkrock {
		background-color: #664433;
	}
	.arrowrock {
		border-color: #664433;
	}
	.aghost {
		color: #663388;
	}
	.limeghost {
		background: #663388 !important;
		color: #fff !important;
	}
	.limelightghost {
		background: #774499;
		color: #111;
		border-color: #663388 !important;
	}
	.outlineghost {
		border: 2px solid #663388;
		padding: 9px 8px 8px 8px;
	}
	.topedgeghost {
		border-top-color: #663388;
	}
	.input-twitchghost, .input-timerghost {
		border-color: #663388;
	}
	.input-twitchghost:disabled {
		background-color: #663388;
	}
	.buttonghost {
		background-color: #663388;
		border: solid #522f64 2px;
	}
	.smolbuttonghost {
		border-color: #663388;
		color: #663388;
	}
	.smolbuttonSwapghost {
		background-color: #663388;
		border-color: #663388;
	}
	.smolbuttonghost:hover {
		background-color: #522f64;
		border-color: #522f64;
		color: #fff;
	}
	.smolbuttonxghost {
		background-color: #663388;
		color: #fff;
		border-color: #663388;
	}
	.inlineboxghost {
		background-color: #886699;
	}
	.smolbuttonxdarkghost {
		color: #111;
		background-color: #663388;
	}
	.buttondarkghost {
		border-color: #45274f;
	}
	.limelightdarkghost {
		border-color: #45274f;
		border-bottom-color: #45274f;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkghost {
		background-color: #663388;
	}
	.arrowghost {
		border-color: #663388;
	}
	.adragon {
		color: #1144aa;
	}
	.limedragon {
		background: #1144aa !important;
		color: #fff !important;
	}
	.limelightdragon {
		background: #3377cc;
		color: #111;
		border-color: #1144aa !important;
	}
	.outlinedragon {
		border: 2px solid #1144aa;
		padding: 9px 8px 8px 8px;
	}
	.topedgedragon {
		border-top-color: #1144aa;
	}
	.input-twitchdragon, .input-timerdragon {
		border-color: #1144aa;
	}
	.input-twitchdragon:disabled {
		background-color: #1144aa;
	}
	.buttondragon {
		background-color: #1144aa;
		border: solid #0d3a91 2px;
	}
	.smolbuttondragon {
		border-color: #1144aa;
		color: #1144aa;
	}
	.smolbuttonSwapdragon {
		background-color: #1144aa;
		border-color: #1144aa;
	}
	.smolbuttondragon:hover {
		background-color: #0d3a91;
		border-color: #0d3a91;
		color: #fff;
	}
	.smolbuttonxdragon {
		background-color: #1144aa;
		color: #fff;
		border-color: #1144aa;
	}
	.inlineboxdragon {
		background-color: #4499cc;
	}
	.smolbuttonxdarkdragon {
		color: #111;
		background-color: #1144aa;
	}
	.buttondarkdragon {
		border-color: #0b2c7e;
	}
	.limelightdarkdragon {
		border-color: #0b2c7e;
		border-bottom-color: #0b2c7e;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkdragon {
		background-color: #1144aa;
	}
	.arrowdragon {
		border-color: #1144aa;
	}
	.aevil {
		color: #334466;
	}
	.limeevil {
		background: #334466 !important;
		color: #fff !important;
	}
	.limelightevil {
		background: #446688;
		color: #111;
		border-color: #334466 !important;
	}
	.outlineevil {
		border: 2px solid #334466;
		padding: 9px 8px 8px 8px;
	}
	.topedgeevil {
		border-top-color: #334466;
	}
	.input-twitchevil, .input-timerevil {
		border-color: #334466;
	}
	.input-twitchevil:disabled {
		background-color: #334466;
	}
	.buttonevil {
		background-color: #334466;
		border: solid #28394d 2px;
	}
	.smolbuttonevil {
		border-color: #334466;
		color: #334466;
	}
	.smolbuttonSwapevil {
		background-color: #334466;
		border-color: #334466;
	}
	.smolbuttonevil:hover {
		background-color: #28394d;
		border-color: #28394d;
		color: #fff;
	}
	.smolbuttonxevil {
		background-color: #334466;
		color: #fff;
		border-color: #334466;
	}
	.inlineboxevil {
		background-color: #667788;
	}
	.smolbuttonxdarkevil {
		color: #111;
		background-color: #334466;
	}
	.buttondarkevil {
		border-color: #1c2a3b;
	}
	.limelightdarkevil {
		border-color: #1c2a3b;
		border-bottom-color: #1c2a3b;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkevil {
		background-color: #334466;
	}
	.arrowevil {
		border-color: #334466;
	}
	.asteel {
		color: #558888;
	}
	.limesteel {
		background: #558888 !important;
		color: #fff !important;
	}
	.limelightsteel {
		background: #77aaaa;
		color: #111;
		border-color: #558888 !important;
	}
	.outlinesteel {
		border: 2px solid #558888;
		padding: 9px 8px 8px 8px;
	}
	.topedgesteel {
		border-top-color: #558888;
	}
	.input-twitchsteel, .input-timersteel {
		border-color: #558888;
	}
	.input-twitchsteel:disabled {
		background-color: #558888;
	}
	.buttonsteel {
		background-color: #558888;
		border: solid #3a5757 2px;
	}
	.smolbuttonsteel {
		border-color: #558888;
		color: #558888;
	}
	.smolbuttonSwapsteel {
		background-color: #558888;
		border-color: #558888;
	}
	.smolbuttonsteel:hover {
		background-color: #3a5757;
		border-color: #3a5757;
		color: #fff;
	}
	.smolbuttonxsteel {
		background-color: #558888;
		color: #fff;
		border-color: #558888;
	}
	.inlineboxsteel {
		background-color: #88aaaa;
	}
	.smolbuttonxdarksteel {
		color: #111;
		background-color: #558888;
	}
	.buttondarksteel {
		border-color: #324040;
	}
	.limelightdarksteel {
		border-color: #324040;
		border-bottom-color: #324040;
		color: #fff;
		background: #111;
	}
	.inlineboxdarksteel {
		background-color: #558888;
	}
	.arrowsteel {
		border-color: #558888;
	}
	.afairy {
		color: #ff88bb;
	}
	.limefairy {
		background: #ff88bb !important;
		color: #fff !important;
	}
	.limelightfairy {
		background: #ffaacd;
		color: #111;
		border-color: #ff88bb !important;
	}
	.outlinefairy {
		border: 2px solid #ff88bb;
		padding: 9px 8px 8px 8px;
	}
	.topedgefairy {
		border-top-color: #ff88bb;
	}
	.input-twitchfairy, .input-timerfairy {
		border-color: #ff88bb;
	}
	.input-twitchfairy:disabled {
		background-color: #ff88bb;
	}
	.buttonfairy {
		background-color: #ff88bb;
		border: solid #d9538a 2px;
	}
	.smolbuttonfairy {
		border-color: #ff88bb;
		color: #ff88bb;
	}
	.smolbuttonSwapfairy {
		background-color: #ff88bb;
		border-color: #ff88bb;
	}
	.smolbuttonfairy:hover {
		background-color: #d9538a;
		border-color: #d9538a;
		color: #fff;
	}
	.smolbuttonxfairy {
		background-color: #ff88bb;
		color: #fff;
		border-color: #ff88bb;
	}
	.inlineboxfairy {
		background-color: #ffbbcc;
	}
	.smolbuttonxdarkfairy {
		color: #111;
		background-color: #ff88bb;
	}
	.buttondarkfairy {
		border-color: #b53473;
	}
	.limelightdarkfairy {
		border-color: #b53473;
		border-bottom-color: #b53473;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkfairy {
		background-color: #ff88bb;
	}
	.arrowfairy {
		border-color: #ff88bb;
	}
	.aspecial {
		color: #ffbb11;
	}
	.limespecial {
		background: #ffbb11 !important;
		color: #fff !important;
	}
	.limelightspecial {
		background: #ffbf1e;
		color: #111;
		border-color: #ffbb11 !important;
	}
	.outlinespecial {
		border: 2px solid #ffbb11;
		padding: 9px 8px 8px 8px;
	}
	.topedgespecial {
		border-top-color: #ffbb11;
	}
	.input-twitchspecial, .input-timerspecial {
		border-color: #ffbb11;
	}
	.input-twitchspecial:disabled {
		background-color: #ffbb11;
	}
	.buttonspecial {
		background-color: #ffbb11;
		border: solid #c99000 2px;
	}
	.smolbuttonspecial {
		border-color: #ffbb11;
		color: #ffbb11;
	}
	.smolbuttonSwapspecial {
		background-color: #ffbb11;
		border-color: #ffbb11;
	}
	.smolbuttonspecial:hover {
		background-color: #c99000;
		border-color: #c99000;
		color: #fff;
	}
	.smolbuttonxspecial {
		background-color: #ffbb11;
		color: #fff;
		border-color: #ffbb11;
	}
	.inlineboxspecial {
		background-color: #ffcd50;
	}
	.smolbuttonxdarkspecial {
		color: #111;
		background-color: #ffbb11;
	}
	.buttondarkspecial {
		border-color: #ac7b00;
	}
	.limelightdarkspecial {
		border-color: #ac7b00;
		border-bottom-color: #ac7b00;
		color: #fff;
		background: #111;
	}
	.inlineboxdarkspecial {
		background-color: #ffbb11;
	}
	.arrowspecial {
		border-color: #ffbb11;
	}
	/*end of type-color-changing classes*/
.normal {
background-color: #ddddcc;
}
.fire {
background-color: #ff6611;
}
.water {
background-color: #3377ff;
}
.grass {
background-color: #11cc33;
}
.electric {
background-color: #ffdd11;
}
.ice {
background-color: #33ddff;
}
.fighting {
background-color: #bb1122;
}
.poison {
background-color: #cc22cc;
}
.ground {
background-color: #eebb77;
}
.flying {
background-color: #ccbbff;
}
.psychic {
background-color: #ff3377;
}
.bug {
background-color: #aaee33;
}
.rock {
background-color: #664433;
}
.ghost {
background-color: #663388;
}
.dragon {
background-color: #1144aa;
}
.evil {
background-color: #334466;
}
.steel {
background-color: #558888;
}
.fairy {
background-color: #ff88bb;
}
.special {
background-color: #ffbb11;
}
.blend {
background-image: url(/images/background-50-grey.svg);
background-blend-mode: hard-light;
}
.symbol {
width: 42px;
margin: 0px -5px -10px -5px;
/*margin: -5px 0px -10px -10px;*/
filter: brightness(0) invert(1);
}
.symbol2 {
width: 42px;
margin: -5px -12px -15px 8px;
filter: brightness(0) invert(1);
}
.icon {
width: 75%;
vertical-align: text-top;
}
.icont {
height: 28px;
margin: 0px 7px -10px 0px;
}
.iconq {
height: 28px;
margin: 0px -2px -8px 7px;
}
.icono {
height: 28px;
margin: 0px 2px -8px 2px;
}
.icon2 {
	margin: -6px -7px -3px -4px;
    float: right;
    width: 52px;
    height: 39px;
	object-fit: none;
	object-position: 50% 100%;
	filter: brightness(0) invert(0.7);
}
.iconf {
	height: 20px;
    margin-bottom: -5px;
}
.kofi {
	height: 26px;
    margin: 0px 0px -8px 0px;
}
.kofi2 {
	height: 50px;
	margin-top: 10px;
}
.white {
filter: brightness(0) invert(1);
}
.twitchp {
color: #9146ff;	
display: inline;
}
.twitb {
color: #1da1f2;
display: inline;
}
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #8CC63F;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
	transform: scale(0);
}
100% {
	transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
	transform: scale(1);
}
100% {
	transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
	transform: translate(0, 0);
}
100% {
	transform: translate(24px, 0);
}
}

.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.2em
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.4em 0.75em;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter {
  background-color: #55acee
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--tumblr {
  background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
  background-color: #222d3c
}

.resp-sharing-button--reddit {
  background-color: #5f99cf
}

.resp-sharing-button--reddit:hover {
  background-color: #3a80c1
}

.resp-sharing-button--google {
  background-color: #dd4b39
}

.resp-sharing-button--google:hover {
  background-color: #c23321
}

.resp-sharing-button--email {
  background-color: #777
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--email {
  background-color: #777777;
  border-color: #777777;
}

.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
  background-color: #5e5e5e;
  border-color: #5e5e5e;
}


.transition-element {
    /* Transition only specific properties */
    transition: background-color 0.5s linear, color 0.5s linear, border-color 0.5s linear, background-image 0.5s linear, opacity 0.25s linear;
}
.slow-transition-element {
    /* Transition only specific properties */
	transition: background-color 1.5s ease-in, color 1.5s ease-in, border-color 1.5s ease-in, background-image 1.5s ease-in, opacity 1.5s ease-in;
}