.clear{
	clear:both;
}

.chrome {
	margin: 0px 0px 0px 0px;
}

#game_board{
	width: 100%;
	margin: 0px auto;
	background: #66cc66;
	background: rgba(40,40,40,0.2);
	-webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-ms-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-o-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
}

h2 a {
	text-decoration:none;
}

#game {
	width:353px
}

#player_won{
	display: none;
	background: #669966 url(images/game/animals/game_complete.png) no-repeat center center;
	height: 120px;
	margin: 10px auto;
}

.blinker {
    color: #45F045 !important;
	color: #00f7ef !important;
	border:1px solid #eee !important;
}

#player_won ol {
	padding-left: 0;
}

#player_won ol li {
	list-style-type: none;
	font-family: 'Droid Sans', Helvetica, sans-serif;
	font-size: 1.1em;
    margin: 5px 3px 5px 0px;
	padding: 0;
}

#gamecredits, #terms {
	position:absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	top:50px;
	width: 260px;
	height:350px;
	display: none;
	overflow: auto;
	margin: 2px auto;
	color: #eeeeee;
	padding: 16px 6px;
	font-size: 0.8em;
	cursor:pointer;
	border: 2px solid #999;
	border-radius:0.4em;
	background: #2c3e50;
}

#disclaim {
	position:absolute;
	top:80px;
	width: 290px;
	left: 50%;
	transform: translate(-50%, 0%);
	display: none;
	margin: 3px auto;
	color: #ffffff;
	padding: 16px 12px;
	font-size: 0.8em;
	cursor:pointer;
	background: #2c3e50;
	height:333px;
	overflow:auto;
	text-align:left;
}

#disclaim p {
	padding-top:12px;
}

#splash {
	height: 440px;
	margin: 6px 4px 0 4px;
	background: rgba(46, 46, 46, 0.0);
	padding:2px;
	color:#fff;
	text-align:center;
	font-size: 1.0em;
	display:none;
}

#play {
	width: 200px;
	margin: 0px auto;
	padding-top: 12px;
	font-size: 0.8em;
}

#play a {
	background: #9BFF7A;
	color: #3B993B;
	border: 1px solid;
	padding: 6px 10px;
	text-decoration: none;
	display: inline-block;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#play a:hover{
	background: #3B993B;
	color: #9BFF7A;
}

#levels {
	width: 200px;
	margin: 0px auto;
	padding-top: 12px;
	font-size: 0.8em;
}

#levels a {
	background: #9BFF7A;
	color: #3B993B;
	border: 1px solid;
	padding: 6px 10px;
	text-decoration: none;
	display: inline-block;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#levels a:hover {
	background: #3B993B;
	color: #9BFF7A;
}

#start_again {
	width: 200px;
	margin: 0px auto;
	display: none;
}

#start_again a {
	background: #9BFF7A;
	color: #3B993B;
	border: 1px solid;
	padding: 10px;
	text-decoration: none;
	display: inline-block;
}

#start_again a:hover {
	background: #3B993B;
	color: #ffffff;
}

#again{
	padding-left:2px;
	padding-top:2px;
	opacity:0.6;
	transition: all 0.13s linear;
	&:hover {
		opacity: 1;
		transition: all 0.13s linear;
	}
	animation: 0.5s enter linear;
}

#control {
	background-color: #2c3e50;
	padding: 1px 2px 0px 2px;
	-webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-ms-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-o-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
}

.label2 {
	margin: 0px 4px 0px 2px;
	vertical-align: middle;
	font-size: 0.7em;
	color: #00d6ff;
	font-weight: 500;
	padding: 3px 4px 2px 4px;
	text-transform: uppercase;
	background: rgba(46, 46, 46, 0.5);
	border-radius: 0.3em;
}

.label3 {
	margin: 0px 4px 0px 2px;
	vertical-align: middle;
	font-size: 0.7em;
	color: #FFd700;
	font-weight: 500;
	padding: 3px 4px 2px 4px;
	text-transform: uppercase;
	background: rgba(46, 46, 46, 0.5);
	border-radius: 0.3em;
}

#credit, #disclaimer{
	cursor:pointer;
	padding-left:8px;
}

#restartBtn {
	padding-bottom:3px;
	opacity:0.6;
	transition: all 0.13s linear;
	&:hover {
		opacity: 1;
		transition: all 0.13s linear;
	}
	animation: 0.5s enter linear;
}

#splash_low {
	position:absolute;
	top: 94%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align:center;
	color:#ffd700;
	font-size:0.9em;
	width:95%;
}

#best_moves {
	color: #FFD700;
	vertical-align: baseline;
	margin:0px 4px;
}

#num_of_moves{
	color:#ffffff;
	background: #222;
	padding: 0 5px;
	border-bottom: 1px solid #2c3e50;
	border-right: 1px solid #233140;
	border-top: 1px solid #666666;
	border-left: 1px solid #666666;
	font-weight: 500;
	vertical-align: baseline;
	margin-top:1px;
	border-radius:0.3em;
}

#score {
	color: #ffffff;
	background: #222;
	padding: 0px 5px;
	border-radius:0.3em;
	border-bottom: 1px solid #2c3e50;
	border-right: 1px solid #233140;
	border-top: 1px solid #666666;
	border-left: 1px solid #666666;
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
	font-weight: 500;
	vertical-align: baseline;
	margin-top:1px;
}

#showlevel {
	margin: 0px 4px 0px 2px;
	vertical-align: middle;
	font-size: 0.8em;
	color: #FFD700;
	font-weight: 500;
	padding: 2px 4px 1px 4px;
	text-transform: uppercase;
	background: rgba(46, 46, 46, 0.7);
	border-radius: 0.3em;
}

#mutebutton {
	vertical-align: baseline;
}

#affiliate {
	position:absolute;
    left:0;
    bottom:24px;
	padding: 4px;
	color: #FFD700;
	border: 1px solid #66cc66;
	margin: 6px auto;
	font-size: 0.8em;
	background: rgba(76, 175, 80, 0.5); 
	background: rgba(46, 46, 46, 0.5);
	border-radius: 0.6em;
}

#affiliate p {
	margin-top: 6px;
}

#affiliate a {
	color:#fff;
}

h2 {
	text-align: center;
	background-color:#46637F;
	background-color:#2c3e50;
	padding: 6px;
	color: #FFD700;
}

.recall {
	animation: bgColor 5s infinite linear;
	border-radius:0.4em;
}

.instrux {
	clear: left;
	font-size: 9px;
	color: #939191;
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
	font-size: 90%;
	padding: 2px 0 0 5px;
}

.no-glow-button {
	border: none;
	color: #eee;
	padding: 6px 8px;
	border-radius: 0.4em;
	background-color: #2c3e50;	
	transition: all 0.2s ease;
}

.neon-glow-picker {
	border:1px solid #fff;
	color: #fff;
	padding: 0px 0px;
	border-radius: 0.4em;
	background-color: #2c3e50;	
	box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
	box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
	transition: all 0.2s ease;
	width: 22px;
	height:22px;
	
}

.neon-glow-button {
	border:1px solid #fff;
	color: #fff;
	padding: 6px 12px;
	border-radius: 0.4em;
	background-color: #2c3e50;	
	box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
	box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
	transition: all 0.2s ease;
}
   
.neon-glow-button:hover, .neon-glow-picker:hover {
	animation: pulse 0.8s infinite;
}

.neon-pulse {
	animation: pulse 1.6s infinite;
	border: 1px solid #eee;
	color: #fff;
	padding: 6px 12px;
	border-radius: 0.4em;
	cursor: pointer;
	background-color: #2c3e50;	
	box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
	transition: all 0.2s ease;
}

.neon-glow-button:focus, .neon-glow-picker:focus {
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.pulse {
	animation: bluepulse 0.8s infinite;
	border: none;
	color: #fff;
	padding: 0px 0px;
	border-radius: 0.4em;
	cursor: pointer;
	background-color: #2c3e50;	
	box-shadow: 0 0 10px rgba(43, 238, 252, 0.5);
	transition: all 0.2s ease;
}

.pulseclock {
	animation: pulse 1.0s infinite;
	border: none;
	color: #fff;
	padding: 0px 0px;
	border-radius: 0.4em;
	cursor: pointer;
	background-color: #2c3e50;	
	box-shadow: 0 0 10px rgba(43, 238, 252, 0.5);
	transition: all 0.2s ease;
}
   
  @keyframes pulse {
	0% {
	  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
	}
	50% {
	  box-shadow: 0 0 20px rgba(255, 215, 0, 1);
	}
	100% {
	  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
	}
  }

  @keyframes bluepulse {
	0% {
	  box-shadow: 0 0 10px rgba(43, 238, 252, 0.5);
	}
	50% {
	  box-shadow: 0 0 20px rgba(43, 238, 252, 1);
	}
	100% {
	  box-shadow: 0 0 10px rgba(43, 238, 252, 0.5);
	}
  }

  h3 {
	margin: 6px 0px auto;


  }

  #sidebar {
	width: 270px;
	text-align:left;
	background: #2c3e50;
	position: absolute;
	height: 55%;
	bottom: 20px;
	z-index:9;
	left: -270px;
	transition: left 0.5s ease;
	font-size: 0.8em;
	border-radius:0.3em;
  }
  
  #sidebar.visible {
	left: 0px;
	transition: left 0.7s ease;
  }

  #sidebar p {
	padding:4px;
  }

  #sidebar-donate {
	width: 270px;
	text-align:left;
	background: rgba(27, 81, 29, 1.0);;
	position: absolute;
	height: 55%;
	z-index:8;
	bottom: 20px;
	left: -270px;
	transition: left 0.5s ease;
	font-size: 0.8em;
	border-radius:0.3em;
  }

  #sidebar-donate.visible {
	left: 0px;
	transition: left 0.7s ease;
  }

  ul {
	margin: 0;
	padding: 0;
  }

  li {
	padding: 5px 0px;
  }

  #sidebar-donate li {
	background: #467f57;
	border-bottom: 0px solid #233140;
  }
  
  #sidebar li {
	list-style: none;
	padding: 10px 0 10px 10px;
	background: #46637F;
	border-bottom: 1px solid #233140;
  }
  #sidebar-donate li {
	list-style: none;
	padding: 10px 0 10px 10px;
	border-bottom: 1px solid #233140;
  }
  
  #sidebar li a, #sidebar-donate li a {
	text-decoration: none;
	color: white;
  }
  
  #donate-btn {
	display: inline-block;
	width: 100px;
	height: 14px;
	padding: 3px;
	cursor: pointer;
	margin: -1px;
	position: absolute;
	left: 229px;
	bottom: 200px;
	z-index:8;
	color: #ffffff;
	background: rgba(76, 175, 80, 0.6);
  }

  #sidebar-btn {
	display: inline-block;
	width: 130px;
	height: 14px;
	padding: 3px;
	cursor: pointer;
	margin: 1px;
	position: absolute;
	left: 209px;
	bottom: 64px;
	color: #ffffff;
	text-transform: uppercase;
	background: rgba(44, 62, 80, 0.6);
  }
  
  #sidebar p {
	padding: 8px;
	color: #ffffff;
  }

  .rotate {
  transform: rotate(-90deg);
  /* Legacy vendor prefixes that you probably don't need... */
  
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);
  
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  
  }

  #levelselected {
	margin-left:15px;
  }

  #toggleSound{
	padding-left: 3px;
	cursor:pointer;
	opacity:0.6;
	transition: all 0.13s linear;
	&:hover {
		opacity: 1;
		transition: all 0.13s linear;
	}
	animation: 0.5s enter linear;
  }

  #levelSelected {
	vertical-align: baseline; 
	color: #ddd;
  }

  #levelselect{
	margin-top:10px;
  }

  #playAgain {
	visibility: hidden;
	border:1px solid #fff;
	text-transform: uppercase;
	z-index:16;
	font-size:1.3em;
	pointer-events: auto;

	  
  }

  #options {
	display: none;
  }

  .customSelect select{
	appearance:none;
	color:#fff;
	background-color: #2c3e50;
	padding:1px 12px;
	font-size:0.9em;
	margin-left:0px;
	cursor:pointer;
  }
  
  #qr{
	text-align:center;
	margin:20px auto;
  }
  
  #display {
	color:#fff;
	background: #222;
	padding: 0 4px;
	border-radius: 0.3em;
	border-top: 1px solid #666666;
    border-left: 1px solid #666666;
}

#scoreboard {
	color:#ddd ;
	background: #111;
	padding: 0px 10px;
	margin:auto;
	font-size:0.8em;
	border:2px solid #555;
	animation: animateTop 8.5s;
}

th {
	border-bottom:1px solid #555;
}

#scoreboard td:first-child{
	text-align:left;
}

#donate-msg {
    padding: 8px;
    color: #fff;
	margin:2px;
	z-index:15;
}

#startgame, #options, #donate-btn {
	text-transform: uppercase;
}

#creditroll{
	text-align:left;
	padding:2px;
	font-size:1.0em;
	margin-top:9px;
	margin-bottom:0px;
}

#creditroll td {
	padding:3px 0px;
}

#creditroll a,a:visited{
	color:#ddd;
}

#rateus {
	display:none;
	width:290px;

}

#alertMatch {
	font-size:0.9em;
	position:absolute;
	top:10px;
	left:120px;
	display:none;
	color:rgba(255, 215, 0, 0.7);
}

#WarnNoJS {
	text-align: center;
	height: 300px;
	padding: 25px;
	font-size: 0.9em;
	color: #000;
	font-size: 90%;
	padding-left: 5px;
}

@keyframes bgColor {
	12.5% {
	  background-color: #FF0000;
	}
	25% {
	  background-color: #FFA500;
	}
	37.5% {
	  background-color: #FFFF00;
	}
	50% {
	  background-color: #7FFF00;
	}
	62.5% {
	  background-color: #00FFFF;
	}
	75% {
	  background-color: #0000FF;
	}
	87.5% {
	  background-color: #9932CC;
	}
	100% {
	  background-color: #FF1493;
	}
}


@-moz-keyframes bgColor {
	12.5% {
	  background-color: #FF0000;
	}
	25% {
	  background-color: #FFA500;
	}
	37.5% {
	  background-color: #FFFF00;
	}
	50% {
	  background-color: #7FFF00;
	}
	62.5% {
	  background-color: #00FFFF;
	}
	75% {
	  background-color: #0000FF;
	}
	87.5% {
	  background-color: #9932CC;
	}
	100% {
	  background-color: #FF1493;
	}
}

@-webkit-keyframes bgColor {
	12.5% {
	  background-color: #FF0000;
	}
	25% {
	  background-color: #FFA500;
	}
	37.5% {
	  background-color: #FFFF00;
	}
	50% {
	  background-color: #7FFF00;
	}
	62.5% {
	  background-color: #00FFFF;
	}
	75% {
	  background-color: #0000FF;
	}
	87.5% {
	  background-color: #9932CC;
	}
	100% {
	  background-color: #FF1493;
	}
}

.fullscreen-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 1.0); /* Semi-transparent background */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 800; /* Ensure it's on top */
  }
  
  .fullscreen-image {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	visibility: visible;
  }
  #cashapp {
	cursor:pointer;
  }