body, html{
	overflow: hidden;
}
body {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#Table {
	border: solid black 2px;
}
#Table label > input {
	visibility: hidden; /* Makes input not-clickable */
	position: absolute; /* Remove input from document flow */
}
#Table label > input + p {

    overflow: none;
}
#Table label {
	width: 28px;
	height: 28px;
	border: solid lightgray 1px
}

.hide {
	display: none !important;
}

.row {
	padding: 0;
	display: flex;
}

.row div {
	padding: 0;
	margin: 0;
	width: 30px;
	height: 30px;
	position: relative;
}
.grid_button {
	width:30px;
	border: solid black 1px;
}

#Game_Setup table, td, th {
	padding: 5px;
	font-size: 20px;
	text-align: center;
}
#Game_Setup th {
	font-weight: 700;
	padding: 5px;
}
#Game_Setup input {
	border: none;
}

table, td, th {
	border: solid black 1px;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
    border-spacing: 0;
}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
  }

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:hover {
	cursor: pointer;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: green;
}

input:focus + .slider {
box-shadow: 0 0 1px green;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}
#Main {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#Scores_div {
	width: 100%;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}
#Scores_div div, #Message, #Game_Message, #Grid .buttons button, #Game_Setup, #Requirements_div, #Start_Game_button, #Requirements_div button {
	padding: 5px;
	margin: 5px;
	border-radius: 5px;
	font-size: 20px;
	text-align: center;
}

#Requirements_div, #Game_Message {
	margin-bottom: 0;
	margin-top: 0;
}

#Grid .buttons button:hover, label:hover, #Start_Game_button:hover, #Requirements_div button:hover {
	cursor: pointer !important;
}


#Grid {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#Grid button {
	width: 200px;
	margin-top: 10px;
}

.Green, .score_Green {
	background-color: lightgreen;
	border-color: green;
}
.Blue, .score_Blue {
	background-color: lightblue;
}
.Red, .score_Red {
	background-color: red;
}
.Pink, .score_Pink {
	background-color: pink;
}
.this_turn {
	background: yellow;
}

.Green:hover, .Blue:hover, .Red:hover, .Pink:hover {
	cursor:not-allowed !important;
}

.buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}
.disabled {
	opacity: 0.2;
	z-index: -1;
}
.disabled:hover {
	cursor: not-allowed !important;
}
.how_to_play {
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 5px;
}
.eliminated {
	opacity: 0.3;
}
#Table label.top_border_Green {
	border-top: solid green 1px;
}
#Table label.bottom_border_Green {
	border-bottom: solid green 1px;
}
#Table label.left_border_Green {
	border-left: solid green 1px;
}
#Table label.right_border_Green {
	border-right: solid green 1px;
}
#Table label.top_border_Blue {
	border-top: solid blue 1px;
}
#Table label.bottom_border_Blue {
	border-bottom: solid blue 1px;
}
#Table label.left_border_Blue {
	border-left: solid blue 1px;
}
#Table label.right_border_Blue {
	border-right: solid blue 1px;
}