html, body, .screen, .layout {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	width: 100%;
	max-width: 100vw;
	height: 100%;
	color: black;
	font-family: Calibri, Helvetica;
	padding: 0;
	margin: 0;
	text-align: center;
	border: 0px;
	border-collapse: collapse;
	user-select: none;
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

body { font-size: 3vmin; overflow-x: hidden; background-color: white; }
@media screen and (max-height: 400px) { body { font-size: 12px; } }
@media screen and (max-width: 400px) { body { font-size: 12px; } }

fieldset { margin: 1em; padding: 1em; text-align: left; }
legend { padding: 0 1em; font-weight: bold; text-align: left; }
ul { margin-top: 0; }
h1 { font-size: 2.5em; margin: 0; }
h2 { font-size: 2.2em; margin: 0; }
h3 { font-size: 1.8em; margin: 0; }

.sublayout { margin: auto; width: auto; border-collapse: collapse; }
.textblock { display: inline-block; text-align: left; margin: auto; }

input[type=button] {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	font-size: 1.2em;
	font-weight: bold;
	padding: 0.5em 1em;
	margin: 0.5em;
	box-shadow: 0.2em 0.2em 0.2em gray;
	border: 0.2em solid black;
	background-color: #16d;
	color: white;
	font-weight: bold;
}
input:disabled { background-color: #999; border: 3px outset #ddd; }
input:focus { outline: none; }

input[type=radio] { display: none; }
input[type=radio]+label {
	display: inline-block; 
	font-weight: bold;
	font-size: 120%;
	margin: 1em;
	padding: 0.5em 1em;
	background: #f7be81;
	border: 0.2em solid black;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: 0.2em 0.2em 0.2em gray;
}
input[type=radio]:checked+label { background: #FF8000; }

input[type=checkbox] { display: none; }
input[type=checkbox]+label {
	display: inline-block; 
	font-weight: bold;
	margin: 0.5em;
	padding: 0.05em 0.2em;
	background-color: #fcc;
	border: 0.2em solid black;
	border-radius: 0.2em;
	appearance: none;
	-webkit-appearance: none;
}
input[type="checkbox"]:checked + label { background: #cfc; }
input[type="checkbox"] + label:before { content: '\2714'; opacity: 0; }
input[type="checkbox"]:checked + label:before { opacity: 1; }

input.small { font-size: 90%; }

input[type=text], input[type=password], input[type=number] {
	width: 8em;
	font-size: 1em;
	padding: 0.2em 0.4em;
	margin: 1em;
	border: 1px solid black;
}

input.error { background-color: #faa; }

#SWbuttons input[type=button] { font-size: 0.9em; }

.version { font-size: small; }
.offline .versionText { background-color: #f99; }


.dragLabel {
	position: absolute;
	z-index: 4;
	transition-property: top, left;
	transition-duration: 0.5s;
	-webkit-transition-property: top, left;
	-webkit-transition-duration: 0.5s;
	-moz-transition-property: top, left;
	-moz-transition-duration: 0.5s;
}
.dragLabel.moving  {
	transition-property: none;
	-webkit-transition-property: none;
	-moz-transition-property: none;
	z-index: 6;
}

.dragLabel.fixed  {
	transition-property: none;
	-webkit-transition-property: none;
	-moz-transition-property: none;
}


.topleft { position: absolute; top: 10px; left: 10px; }
.topright { position: absolute; top: 10px; right: 10px; }

.menutable { border-spacing: 20px; margin: auto; width: 80%; }
.menutable td { font-weight: bold; padding: 10px; text-align: left; border-radius: 5px; cursor: pointer; }
.menutable p { margin: 0px; font-size: 22px; color: #000; }
.menutable h3 { margin: 0px; font-size: 40px; color: #fff; }
.menu1 { background-color: #f72; } /* .menu1 { background-color: #f60; } */
.menu2 { background-color: #999; }

.menutable td img { float: left; margin-right: 10px; }

/********/
/* HOME */
/********/

#topbar {
	height: 6%;
	height: 6vh;
	width: 100vw;
	background-color: #ddd;
	border-bottom: 0.2vh solid black;
}
#topbar img { height: 100%; height: 5.6vh; width: auto; margin: 0.2vh; vertical-align: middle; }
#topbar div { display: inline-block; height: 6vh; font-size: 2vmin; line-height: 6vh; }
#topbar div:nth-of-type(1) { float: left; }
#topbar div:nth-of-type(3) { float: right; }
#topbar_text {
	display: inline-block;
	height: 6vh;
	font-size: 3.5vmin!important;
	font-weight: bold;
}

.gameScreen {
	display: none;
	height: 93.8%;
	height: 93.8vh;
	width: 100vw;
}

#parameters_div table { font-size: 90%; width: 90%; }
#parameters_div th { text-align: right; width: 25%; padding: 0.3em; font-size: 90%; }
#parameters_div td { text-align: left; padding: 0.3em 1em; }
#parameters_div legend { text-align: center; }
#parameters_div table input { margin: 0; }
#parameters_div input[type=radio]+label {
	margin: 0.2em; 
	padding: 0.2em 0.5em;
	box-shadow: 0.2em 0.2em 0.2em gray;
}
#parameters_div .sublayout input[type=radio]+label {
	font-size: 80%;
	box-shadow: none;
}
#parameters_div input[type=text] { width: 90%; }
#parameters_div .noUi-target { border-color: black; }
#parameters_div .noUi-handle { width: 2em; height: 1.5em; line-height: 1.5em; border: 1px solid black; background-color: #def; }
#parameters_div .noUi-handle .noUi-tooltip { top: 0; background-color:transparent; padding: 0; width: 100%; height: 1.5em; }
#parameters_div .sliderlong .noUi-handle { width: 3em; }
.noUi-handle::before, .noUi-handle::after { content: none!important; }

#parameters_div .noUi-handle.noUi-active .noUi-tooltip  { 
	padding: 0.2em 0.4em;
	font-size: 120%;
	line-height: 1em;
	width: 150%;
	left: -25%;
	top: -1.5em;
	bottom: initial;
	border: 1px solid gray;
	background-color:white; 
}

#instructions_bloc {
	margin: 1em auto;
	min-height: 50%;
}
#instructions_bloc th { text-align: left; font-size: 1.5em; padding: 0.2em 0.5em; border-bottom: 0.5vh dotted black; }
#instructions_main {
	display: inline-block;
	margin: 0.5em auto 0.2em;
	font-size: 1.5em;
	font-weight: bold;
	border: 1px solid black;
	padding: 0.5em 1em;
	background-color: #fc8;
}
#instructions_examples { border-collapse: collapse; /*border-spacing: 1em 0.4em;*/ }
#instructions_examples tr:nth-of-type(1) td { background-size: contain; background-repeat: no-repeat; background-position: center; border: 1px solid black; }
#instructions_examples tr:nth-of-type(2) td { text-align: center; border: 1px solid black; background-color: #eee; padding: 0.4em; }
#instructions_avatar { margin-top: 5vh; height: 70vh; width: auto; }

#results_score { font-size: 1.8em; text-align: left; padding-left: 1em; }
#results_points { font-size: 2em; text-shadow: 1px 1px 10px gray; font-weight: bold; vertical-align: -10%; }
#results_details {
	position: relative;
	width: 15em;
	height: 15em;
	overflow: auto;
	background-image: url(assets/post-it-note.jpg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	text-align: left;
	vertical-align: top;
}
#results_details h4 { margin: 8vh 5.5vh 0.5vh; }
#results_detailsText { margin: 2vh 5.5vh 0; font-size: 0.8em; }
#results_detailsText.smaller { font-size: 0.7em; }
#results_detailsSuccess { 
    position: absolute;
    top: 2vmin;
    right: 2vmin;
    font-size: 120%;
    border: 3px outset gray;
    border-radius: 10vmin;
    width: 10vmin;
    height: 10vmin;
    line-height: 10vmin;
    text-align: center;
    background-color: gray; /* cahnged by javascript */
}
#results_avatar {
	position: absolute;
	top: 75vh;
	left: 2vh;
	height: 25vh;
	width: 10vw;
	background-position: top center;
	background-size: cover;
}
#results_message { border: 3px solid black; border-radius: 1em; padding: 1em; font-weight: bold; width: 70vw; margin-left: 20vw; }
#results_graph { margin-right: 0.5em; height: 15em; width: calc(100vw-16em); } /* like results_details */
#results_graph .highcharts-container { width: 100%; height: 100%; }


#notification {
	display: none;
	position: absolute;
	bottom: 0;
	right: 1em;
	padding: 0.2em 1em;
	background-color: #fdd;
	border-width: 1px 1px 0 1px;
	border-color: black;
	border-style: solid;
	border-radius: 5px 5px 0 0;
	z-index: 11;
	min-width: 100px;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 1s linear;
	cursor: default;
}

#notificationsList { display: inline-block; text-align: left; }
#notificationsList dt { font-weight: bold; }
#notificationsList dd { font-size: 0.8em; }
#notificationsList dd+dt { margin-top: 1em; }
#errorList { font-size: 0.8em; }
#errorList .error { color:red; font-weight:bold; }
#errorList .stack { color:gray; font-size:small; font-weight:normal;}

.alertify { z-index: 9; }