@font-face {
	font-family: Dicier;
	src:
		url('../../../includes/fonts/dicier/woff2/Dicier-Round-Heavy.woff2'),
		url('../includes/fonts/dicier/woff2/Dicier-Round-Heavy.woff2');
}
.dicier {
	font-family: Dicier, sans-serif;
	font-feature-settings: "liga" 1, "kern" 1, "calt" 1;
	font-size:30px;
}

@font-feature-values "Dicier" {
	@character-variant {card10:10;}
	@character-variant {card11:11;}
	@character-variant {card12:12;}
	@character-variant {dice26:26;}
	@character-variant {rps37:37;}
}
.cv10 {font-variant-alternates: character-variant(card10);}
.cv11 {font-variant-alternates: character-variant(card11);}
.cv12 {font-variant-alternates: character-variant(card12);}
.cv26 {font-variant-alternates: character-variant(dice26);}
.cv37 {font-variant-alternates: character-variant(rps37);}

.bold{	font-weight:bold; }
.italic{ font-style:italic; }
.highlight{ color:black; background-color:white; }
.centre { text-align:center; }
.right { text-align:right; }
.left { text-align:left; }
.hidden{
	visibility:hidden;
	display:none;
}
.noDisplay{
	display:none;
}
.nowrap{ white-space:nowrap;}
.wrap{ white-space:pre-wrap;}
.floatRight{ float: right; }
.floatLeft{ float: left; }
.clear { clear: both; }
.noBorder { border: none; }
body{ background:#ebf4fb; }

header{
	display:block;
	clear:both;
	width:auto;
	text-align:center;
}

h1, header h1{
	font-size:calc(30px + 10 * ((100vw - 300px) / 980));
	font-weight:bold;
	color:#ffffff;
	background-color:#0063a4;
	text-align:center;
	border-radius:1vh;
}
@media screen and (max-width: 600px){
	header h1{ font-size:5vw; }
}
h1{ margin-bottom:0.43vh; font-size:2em; padding:1px;}
h2, h3{margin-bottom:0.43vh;}
main{
	margin-left:auto;
	margin-right:auto;
	display:inline;
	vertical-align:middle;
}

details {
	font: 16px "Open Sans", Calibri, sans-serif;
}

p{
	text-align:left;
	margin-top:0;
	margin-left:0.39vw;
	margin-bottom:0;
	margin-right:0.39vw;
}
ol, ul{
	text-align:left;
	margin-top:0;
	margin-left:0.39vw;
	margin-bottom:0;
}

div{
	background:#ebf4fb;
	margin: 0px 0px 2px 2px;
	padding: 0;
}

fieldset, .formRow {
	border: 0.11vh #0063a4 solid;
	border-radius:0.99vh;
	padding:0.33vh;
}
fieldset {	margin: 0.3vh 0.3vw; }
.formRow{ 	margin: 0.3vh 0.3vw; max-width: 93vW;}
@media screen and (max-width: 600px){
	fieldset.fieldset-main {
		width:100%;
	}
}
legend{
	font-size:calc(14px + 8 * ((100vw - 600px) / 980));
	font-weight:bold;
	color:#0063a4;
	margin-left:0.66vh;
	line-height:1;
}

.formRow:after {
  content: "";
  display: table;
  clear: both;
}

input:optional, .input, input[readonly], select[readonly], textarea[readonly]{
	background-color: #F7F7F7;
	color: #000000;
}
input:focus, select:focus, textarea:focus{
	background-color: #000000;
	color: #F7F7F7;
}
input{ width:95%; max-width: 95%;}
select{ width:50% ; max-width: 95%;}
input, select{
	color:#222;
	background-color:#fff5a1;
	font-weight:normal;
	padding:0.77vh;
	border:solid 0.11vh #aacfe4;
	border-radius:3.74vh;
	box-sizing:border-box;
	resize:vertical;
	position:relative;
}
input[type="color"] {width:6em;	height:3.2vh; padding:0.5vmin;}
input[type="number"]{width:20%; text-align:right;}

@media screen and (max-width: 600px){
	input[type="checkbox"], input[type="radio"]{ margin-top:0;}
}
input[type="checkbox"], input[type="radio"]{				/* Hide default HTML checkbox */
	opacity:0;
	width:0;
	height:0;
	margin:1.1vh 0 1.1vh 0;
}
input[type="checkbox"]:checked + .slider, input[type="radio"]:checked + .slider{
	background-color: #1142D7;
}
input[type="checkbox"]:focus + .slider, input[type="radio"]:focus + .slider{
		box-shadow:0 0 0.11vh #1142D7;
}
input[type="checkbox"]:checked + .slider:before, input[type="radio"]:checked + .slider:before{
	-webkit-transform: translateX(22px);
	-ms-transform: translateX(22px);
	transform: translateX(22px);
}
.switch{					 /* The switch - the box around the slider */
	position:relative;
	display:inline-block;
	width:55px;
	height:31px;
	top:0.5px;
}
div.formLabel.switch{
	margin:0;
}
.slider{					/* The slider */
	position:absolute;
	cursor:pointer;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#2fb6df;
	-webkit-transition:.4s;
	transition:.4s;
}
.slider:before{
	position:absolute;
	content:"";
	height:24px;
	width:24px;
	left:1px;
	bottom:2px;
	background-color:white;
	-webkit-transition:.4s;
	transition:.4s;
	border:1px solid #1142D7;
}
div.formLabel.slider:before{
	left:5px;
	bottom:4px;
}
.slider.round{				border-radius:32px;			}
.slider.round:before{		border-radius:50%;			}

input:required:valid{
	background-color:#B2AC71;
}
input:invalid{
	color:#ff0000;
}
input:required:valid:focus{ color:#B2AC71; background-color:#000000; }
.warning { color:#FF7F00; }
.info { color:#0000ff; }
.preferred{ background-color:#fff5a1; }
.preferred:focus{ color:#000000; background-color:#fff5a1; }

select:required{
	background-color:#B2AC71;
}
.formButtons {
	border: none;
	text-align:center;
	padding:0;
	margin:0;
	position:fixed;
	bottom: 0.1vh;
	width: 98vw
}
.modalButtons {
	background-color: #fefefe;
	border: none;
	text-align:center;
	padding:0;
	margin:0;
}
button{
	margin:0.55vh 0.78vw 0.55vh 0.78vw;
	color:white;
	background-color:#0063a4;
	font-weight:bold;
	width:auto;
	text-align:center;
	border-radius:3.74vh;
	border:none;
	cursor:pointer;
	line-height:1;
	padding: 1vh 2vw;
}

button:disabled, button.Navigate:disabled, button.Danger:disabled, button.Go:disabled, button.Warning:disabled, button.Update:disabled, button.Print:disabled {
					color: GrayText;background:#444444; font-weight:normal; }
button.Navigate {	color:#FFFFFF;	background:#0000ff; }
button.Danger 	{	color:#FFFFFF;	background:#ff0000; }
button.Go 		{	color:#000000;	background:#00ff00; }
button.Warning 	{	color:#000000;	background:#ffff00; }
button.Update 	{	color:#000000;	background:#ffff00; }

.formLabel{ float:left; width:20%; margin-top:0.66vh; padding-right: 0.2vW; text-align:right; word-wrap:break-word;}
.formLabel.checkbox{ margin-top:0;}
.formInput{ float:left; width:79%; margin-top:0.66vh; }

@media screen and (max-width: 600px) {
	.formLabel{ width:auto; padding-right: 0; text-align:left;}
	.formInput{ width:100%; }
}

.panel{
	padding-bottom:4.1vh;
}

#profilesList, #rangesList{
	list-style-type: none; 
	margin: 0;
	padding: 0;
	text-align:center;
}

.bigButtons{
	display:flex;
	justify-content:center;
	align-items:center;
}
button.bigButton{
	width:30vH;
	height:30vH;
	border-radius: 50%;
	text-align:center;
	margin:0 0 9px 0;
	padding:0;
}
#thisHistory ol{
	text-align:center;
}

p.raffle{
	font-size:20vH;
	margin-bottom:0;
}

.number.pending{
	font-weight:lighter;
}
.number.used{
	font-weight:bolder;
}

.pending{
	opacity:0.4;
}
ul li span.used{
	font-size:7vH;
}
ul li span.pending{
	font-size:7vH;
}
#drawResultNote{
	height:4vH;
	max-height:4vH;
	text-align:center;
	white-space:pre-line;
	margin: 0;
}
#drawResultTextGrid{
	display:grid;
	grid-template-columns: 1fr 1fr;
}
#drawResultDivGrid{
	display:grid;
	grid-gap:20px;
	grid-template-columns: 1fr 1fr;
}
#drawResultDrawn{
	text-align:left;
}
#drawResultRemaining{
	text-align:right;
}
@media (orientation: landscape){
	#drawResultDivGrid{grid-template-columns: 1fr 1fr; }
	.result.bingo{max-width:58vmin;	max-height:58vmin;}
	.result.die{max-width:58vmin;	max-height:58vmin;}
	.result.cards{max-height:56vh;}
}
@media (orientation: portrait){
	#drawResultDivGrid{grid-template-columns: 1fr;}
	.result.cards{max-height:44vh;}
}
#thisResult{
	font-weight:bolder;
	text-align:center;
	margin:0;
	clear:both;
}
.result{
	margin-left:auto;
	margin-right:auto;
}
.result.bingo{
	border-radius: 50%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.result.cards{
	max-width:300px;
}
.result.coin{
	border-radius: 50%;
	line-height:1;
	display:inline-block;
	margin:1vmin;
}
.result.die{
	border-radius: 20%;
	font-weight: normal;
	line-height:1;
	display:inline-block;
	margin:1vmin;
}
.result.number{
	display:inline-block;
	margin:1vmin;
	padding: 1vmin;
}

div.history.bingo{
	float:left;
	padding:2vmin;
}
.history.bingo div{
	border-radius: 50%;
	width: 38vmin;
	height: 38vmin;
	font-size:29vmin;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-left:auto;
	margin-right:auto;
}
.history.cards img{
	max-width:min(40vmin ,180px);
}
.history.coin div{
	border-radius:50%;
	font-weight: normal;
	line-height:1;
	display:inline-block;
	margin:1vmin;
	font-size:12vmin;
}
.history.die div{
	border-radius:20%;
	font-weight: normal;
	font-size:12vmin;
	line-height:1;
	display:inline-block;
	margin:1vmin;
}
.history.number div{
	display:inline-block;
	font-size:10vH;
	margin: 1vmin;
	text-align:center;
}
.history.rps div{
	font-size:12vmin;
}
div.history.cards,
div.history.coin,
div.history.die,
div.history.number,
div.history.rps{
	float:left;
}
.drawn.number li span{
	display:inline-block;
	font-size:10vH;
	margin: 1vmin;
	text-align:center;
}
.drawn.bingo table,
.drawn.cards table{
	text-align:center;
	margin-left:auto;
	margin-right:auto;	
}
.drawn.bingo td{
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size:20px;
	text-align:center;
}
.drawn.cards.portrait img{
	width: 60%;
}
.drawn.cards.landscape img{
	width: 100%;
}
.drawn ul{
	padding:0;
}
.drawn li{
	list-style:none;
	float:left;
}

#colourSelectItems {
  position: absolute;
  border:  1px solid grey;
  border-radius:  5px;
  background-color: white;
  width:  100%;
  z-index:  1;
  font-weight: bolder;
}

.colourSelectItem {
  padding:  1em;
  cursor: pointer;
}

.modal{
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
	justify-content:center;
	align-items:center;
}
.modalContent{
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width:78vw;
}
.modalHeader{
	text-align:center;
}
.modalText{
	color:orange;
	font-size:large;
	font-weight:bold;
	margin: 5vh 0.39vw;
}
.modalButton{
	font-size: 28px;
}