body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.header {
	margin: 0px auto;
	/*	width: 790px;*/
	display: grid;
	grid-gap: 15px;
	grid-template-columns: 645px auto;
}

.header .left {
	text-align: center;
	background-color: white;
}

.header .mid {
	background-color: white;
}

.header .right {
	background-color: white;
}

.top {
	margin: 0px auto;
	display: grid;
	grid-gap: 0px;
	grid-template-columns: auto auto;
}

.stats {
	grid-row: span 4;
	display: grid;
	grid-gap: 1px;
	grid-template-columns: repeat(8, 15px);
	border-left: 1px solid #3d0;
}

.stats #spin {
	grid-column: span 8;
	line-height: 30px;
	height: 30px;
	border-radius: 4px;
	background-color: green;
	font-size: 18px;
}

.stats .head,
#unhit,
#unique,
#repeater,
#repeatersum,
.free {
	grid-column: span 2;
	background-color: green;
	border-radius: 4px;
	font-size: 10px;
	line-height: 30px;
	height: 30px;
	font-size: 14px;
}

.stats .head {
	font-size: 10px;
}

.stats .head:hover {
	background-color: yellow;
	color: black;
	cursor: pointer;
}

.stats .mark1 {
	background-color: antiquewhite;
	color: black;
}

.stats .mark2 {
	background-color: burlywood;
	color: black;
}

.stats .mark3 {
	background-color: aquamarine;
	color: black;
}

#unhunqdiff,
#unqrepdiff,
#unqunqdiff {
	grid-column: span 3;
	background-color: green;
	border-radius: 4px;
	line-height: 30px;
	height: 30px;
	font-size: 14px;
}

#unqrepdiff {
	grid-column: span 2;
}


.roulettetable {
	margin-bottom: 5px;
	display: inline-grid;
	grid-gap: 1px;
	grid-template-columns: 128px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 60px;
	text-align: center;
	background-color: #3d0;
	border-top: 1px solid #3d0;
	color: white;
	/*	width: 560px;*/
}

.doublecol {
	grid-column: span 2;
	border-bottom: 1px solid #3d0;
	line-height: 24px;
	height: 24px;
	border-radius: 4px;
	background-color: green;
	font-size: 12px;
}

.dozen {
	line-height: 30px;
	height: 30px;
	border-right: 1px solid #3d0;
	border-radius: 4px;
	background-color: green;
	font-size: 14px;
}

.column {
	grid-column: span 4;
	font-size: 14px;
	line-height: 30px;
	height: 30px;
	border-radius: 4px;
	background-color: green;
}

#zero {
	/*	font-size: 12px;*/
	line-height: 30px;
	height: 30px;
	border-radius: 4px;
	background-color: green;
	font-size: 14px;
}

.step {
	line-height: 34px;
	border-right: 1px solid #3d0;
	border-bottom: 1px solid #3d0;
	border-radius: 4px;
	background-color: green;
	font-size: 14px;
	grid-row: span 2;
}

.step:hover {
	background-color: yellow;
	color: black;
	cursor: pointer;
}

#stepsLeft {
	font-size: 12px;
	line-height: 12px;
	
}



.board {
	grid-column: 2 / span 13;
	grid-row: 1 / span 3;
	display: grid;
	grid-gap: 1px;
	grid-template-columns: repeat(13, 30px);
	/*	grid-template-columns: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;*/
	grid-template-rows: 30px;
	text-align: center;
	background-color: #3d0;
	/*	border: 1px solid #3d0;*/
	border-radius: 4px;
}

.board .box {
	border-radius: 4px;
	line-height: 30px;
	cursor: pointer;
}

.board .box:hover {
	background-color: yellow;
	color: black;
	font-weight: bold;
}

.board .zero {
	grid-row: 1 / span 3;
	width: 30px;
	height: 92px;
	line-height: 92px;
	background-color: green;
}

.board .mark1 {
	background-color: antiquewhite;
	color: black;
	font-weight: bold;
}

.board .mark2 {
	background-color: burlywood;
	color: black;
	font-weight: bold;
}

.board .mark3 {
	background-color: aquamarine;
	color: black;
	font-weight: bold;
}

.nav {
	margin: 0px auto;
}

ul.nav {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	padding: 0px;
	margin-bottom: 9px;
}

.nav li {
	display: block;
	flex: 0 1 auto;
	list-style-type: none;
	font-weight: bold;
	text-align: center;
	padding: 5px;
	border: 2px solid green;
	cursor: pointer;
	border-radius: 4px;
	background-color: white;
	color: black;
}

.nav li:hover {
	color: white;
	background-color: green;
}

.history {
/*	margin-top: 5px;*/
/*	margin: 5px 0px 10px 0px;*/
	margin-bottom: 10px;
/*	width: 628px;*/
	height: 16px;
	display: inline-grid;
	grid-gap: 1px;
	grid-template-columns: 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px;
	text-align: center;
}

.history .box {
	font-size: 10px;
	color: white;
	line-height: 16px;
	height: 16px;
	border-radius: 4px;
}

.history .zero {
	background-color: green;
}

.table {
	/*	margin: 0px auto;*/
	width: 645px;
	display: grid;
	grid-gap: 1px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	text-align: center;
	border: 1px solid black;
	background-color: black;
	min-height: 33px;
	height: 33px;
	max-height: 271px;
	overflow: hidden;

}

.table .hits {
	width: 16px;
	display: grid;
	grid-gap: 1px;
	max-height: 271px;
}

.table .hits .box {
	width: 16px;
	font-weight: bold;
	font-size: 10px;
	line-height: 16px;
	height: 16px;
	background-color: white;
}


.table .col {
	width: 16px;
	display: grid;
	grid-gap: 1px;
	/*		height: 314px;*/
	overflow: hidden;
}

.table .col .box {
	width: 16px;
	font-size: 10px;
	line-height: 16px;
}

.table .col .boxsmall {
	width: 16px;
	font-size: 8px;
	line-height: 16px;
}

.table .fillbox {
	width: 16px;
	font-size: 10px;
	line-height: 16px;
	background-color: white;
}

.table .head {
	width: 16px;
	font-weight: bold;
	font-size: 10px;
	line-height: 16px;
	margin-bottom: 1px;
	/*	background-color: white;*/
}


.statsbox2 {
	/*	margin: 0px auto;*/
	width: 628px;
	margin-left: 17px;
	display: grid;
	grid-gap: 1px;
	grid-template-columns: 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px;
	text-align: center;
	border: 1px solid black;
	border-top-width: 0px;
	background-color: black;
	height: 20px;
	line-height: 20px;
	font-size: 12px
}

.statsbox2 div {
	font-weight: bold;
}

.statsbox2 .unhitleft,
.statsbox2 .unhitright,
.statsbox2 .uniqueleft,
.statsbox2 .uniqueright {
	grid-column: span 6;
}

.statsbox2 .repeaterleft,
.statsbox2 .repeaterright,
.statsbox2 .repeatertotalleft,
.statsbox2 .repeatertotalright {
	grid-column: span 3;
}


.statsbox2 .unhitleft,
.statsbox2 .unhitright {
	background-color: antiquewhite;
	color: black;
}

.statsbox2 .uniqueleft,
.statsbox2 .uniqueright {
	background-color: burlywood;
	color: black;
}

.statsbox2 .repeaterleft,
.statsbox2 .repeaterright,
.statsbox2 .repeatertotalleft,
.statsbox2 .repeatertotalright {
	background-color: aquamarine;
	color: black;
}

.hiddenBox {
	display: none;
}


.statsbox {
	display: inline-grid;
	grid-gap: 1px;
	grid-template-rows: auto auto;
	text-align: center;
	background-color: black;
	font-size: 12px;
	border: 1px solid black;
	width: 418px;
	margin-top: 5px;
}

.statsboxHead {
	display: grid;
	grid-gap: 1px;
	grid-template-columns: 24px 20px 22px 20px 22px 20px 22px 20px 22px 20px 22px 20px 22px 20px 22px 20px 22px 20px 20px;
	grid-template-rows: 20px 20px;
}

.statsboxHead .box {
	background-color: white;
/*	height: 20px;*/
	line-height: 20px;
	font-size: 9px;
}

.statsboxHead .col2 {
	grid-column: span 2;
}

.statsboxHead .row2 {
	grid-row: span 2;
	line-height: 41px;
}

.statsboxBody {
	display: grid;
	grid-gap: 1px;
	grid-template-columns: 24px 20px 22px 20px 22px 20px 22px 20px 22px 20px 22px 20px 22px 20px 22px 20px 22px 20px 20px;
}

.statsboxBody .col {
	display: grid;
	grid-gap: 1px;
}

.statsboxBody .box {
	width: 100%;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
}

#spins {
	font-weight: bold;
}

.scrollbox {
	width: 440px;
	max-height: 776px;
	overflow-y: scroll;
}


textarea {
	resize: none;
	display: block;
	margin-bottom: 5px;
	border: 1px solid grey;
	border-radius: 4px;
}

.dialog {
	border-radius: 10px;
	border: 3px solid green;
	background-color: white;
	padding: 10px;
}

.dialogButton {
	font-weight: bold;
	text-align: center;
	padding: 5px;
	border: 2px solid green;
	cursor: pointer;
	border-radius: 4px;
	margin-bottom: 10px;
}

.dialogButton:hover {
	color: white;
	background-color: green;
}

#maxSpins {
	border: 1px solid green;
	border-radius: 4px;
	line-height: 20px;
	height: 20px;
	text-align: center;
	width: 150px
}

.tmp {
	font-family: monospace;
	margin-top: 20px;
	display: grid;
	grid-template-columns: 40px auto;
	grid-gap: 5px;
	/*	word-wrap: break-word;*/
}


.red {
	background-color: red;
	color: white;
}

.black {
	background-color: black;
	color: white;
}

.green {
	background-color: green;
	color: white;
}

.white {
	background-color: white;
}

.color0,.colorL {
	background-color: #e6194b;
	color: white;
}

.color1,.colorH {
	background-color: #ffe119;
}

.color2 {
	background-color: #3cb44b;
	color: white;
}

.color3 {
	background-color: #0082c8;
	color: white;
}

.color4 {
	background-color: #f58231;
	color: white;
}

.color5 {
	background-color: #911eb4;
	color: white;
}

.color6 {
	background-color: #46f0f0;
}

.color7 {
	background-color: #f032e6;
	color: white;
}

.color8 {
	background-color: #0011cc;
	color: white;
}

.color9 {
	background-color: #fabebe;
}

.color10 {
	background-color: #008080;
	color: white;
}

.color11 {
	background-color: #e6beff;
}

.color12 {
	background-color: #aa6e28;
	color: white;
}

.color13 {
	background-color: #fffac8;
}

.color14 {
	background-color: #800000;
	color: white;
}

.color15 {
	background-color: #aaffc3;
}

.color16 {
	background-color: #808000;
	color: white;
}

.color17 {
	background-color: #808080;
	color: white;
}

/*
#toggleStatsbox {
	cursor: pointer;
}*/