html, body {
	margin: 0;
	height: 100%;
	font-family: HelvRoman,Arial,Helvetica,sans-serif;
	font-size: 16px;
}

body {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: white;
}


a { color: #FF7900; }
a:hover { color: black; }

.buttons {
	text-align: center;
}
.button {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	background: white;
	border: solid black 1px;
	color: black;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
	line-height: 1em;
}
.button:hover {
	cursor: pointer;
	background: #D6D6D6;
}
.button--emphasis {
	background: #FF7900;
	color: white;
	border: solid #FF7900 1px;
	box-sizing: border-box;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
}
.button--emphasis:hover {
	cursor: pointer;
	background: #F16E00;
}
.button--wide {
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.button--disabled {
	background: white;
	color: #D6D6D6;
	border: solid #D6D6D6 1px;
	box-sizing: border-box;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
}
.button--disabled:hover {
	cursor: default;
	background: white;
}
.button--disabled.button--emphasis {
	background: #D6D6D6;
	color: white;
	border: solid #D6D6D6 1px;
	box-sizing: border-box;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
}
.button--disabled.button--emphasis:hover {
	cursor: default;
	background: #D6D6D6;
}


.header {
	background: black;
	height: 4em;
	width: 100%;
	color: white;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	font-size: 1.5rem;
}
.header__icon {
	text-decoration: none;
	padding: 0;
	background: transparent url(i/logo.png) no-repeat center;
	background-size: 2em;
	width: 4em;
	height: 4em;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}
.header__title {
	position: absolute;
	margin: 0;
	bottom: 0;
	padding: 1em 4em;
	line-height: 0.9em;
	overflow: hidden;
}

.screen {
	position: absolute;
	top: 6em;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}
.screen--active {
	display: block;
	z-index: 1;
}
.screen--hidden {
	display: none;
}

.tab {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: white;
	overflow: auto;
}
.tab__content {
	padding: 0;
}
.tab__content .par {
	margin-top: 0.5rem;
}
table.tab__content {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	margin: 0;
}
table.tab__content .tab__cell {
	vertical-align: middle;
	text-align: center;
	height: 100%;
	padding: 0.5em;
}


@media (max-width: 540px), (max-height: 30em) {
	.header { font-size: 0.75em; }
	.header__title {
		padding-bottom: 0.75em;
	}
	.header__icon {
		background-image: url(/i/logo_small.png);
		background-size: 2.5em;
	}
	.screen {
		top: 3em;
	}
}



.error {
        background-color: #CD3C14;
        color: white;
        position: fixed;
        width: 100%;
        padding: 1em;
        left: 0;
        bottom: 0;
        text-align: center;
        display: none;
}
.error a {
        color: white;
}
.warning {
        padding-left: 2.5em;
        background: transparent url(/i/warning.png) no-repeat left center;
        line-height: 1em;
        background-size: 2em;
        font-family: Bold, HelvBold;
        display: inline-block;
}


/**** SCREENS ****/

#intro { text-align: center; }
.intro__title {
	font-family: HelvBold;
	font-size: 1.2rem;
	text-align: center;
	margin: 2vh auto;
	max-width: 56rem;
}
.intro__content {
	text-align: left;
	margin: 2vh auto;
	max-width: 56rem;
}
.intro__browsers {
	margin: 4vh auto 1rem auto;
	text-align: left;
	font-family: HelvBold;
	color: #FF7900;
	max-width: 56rem;
}


/*****************/


.quizz__content {
	width: 100%;
	height: calc( 100% - 6rem );
	position: relative;
}
.quizz__question {
	position: absolute;
	left: 1rem; right: 1rem;
	top: 0; bottom: 0;
	text-align: center;
}
.quizz__select {
	height: 6rem;
	position: absolute;
	bottom: 0; left: 0; right: 0;
}

.quizz__nav {
	width: 4rem;
	height: 4rem;
	position: absolute;
	top: 50%;
}
.quizz__forward { right: 1rem; }
.quizz__backward { left: 1rem; }
.quizz__nav circle {
	fill: #D9D9D9;
}
.quizz__nav polyline {
	fill: none;
	stroke: black;
	stroke-width: 10;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.quizz__nav.nav--disabled circle {
	fill: #eeeeee;
}
.quizz__nav.nav--disabled polyline {
	stroke: white;
}
.quizz__nav:hover {
	cursor: pointer;
}
.quizz__nav:hover circle {
	fill: #FF7900;
}
.quizz__nav:hover polyline {
	stroke: white;
}
.quizz__nav.nav--disabled:hover {
	cursor: default;
}
.quizz__nav.nav--disabled:hover circle {
	fill: white;
}

div.quizz__text {
	position: relative;
	height: 33%;
}
svg.quizz__text {
	width: 100%;
	height: 100%;
}
.quizz__text text {
	font-size: 200%;
}

.quizz__img {
	max-height: 50%;
	max-width: calc( 100% - 1rem );
	aspect-ratio: initial;
	margin: 0 auto;
	background: #eeeeee;
	border: solid #eeeeee 1vh;
}
.quizz__select {
	text-align: center;
}
.quizz__option {
	display: inline-block;
	width: 20vw;
	height: 5rem;
	min-height: 4rem;
	background: #D9D9D9;
	margin: 0.25rem;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	border-radius: 0.25rem;
	font-weight: normal;
	font-size: 120%;
	position: relative;
}
.quizz__option .icon {
	font-weight: bold;
}
.quizz__option .strings {
	width: 100%;
	padding: 0.5rem;
	box-sizing: border-box;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}
.quizz__option .strings div {
}
.quizz__option .strings div.label {
	line-height: 0.8em;
}
.quizz__option:hover, .quizz__option:active {
	cursor: pointer;
	background: #FF7900;
	color: white;
	font-weight: normal;
}

@media(hover: none) {
	.quizz__option:hover {
		cursor: default;
		background: #D9D9D9;
		color: black;
	}
}

@media(any-pointer: coarse) {
	.quizz__option:hover {
		cursor: default;
		background: #D9D9D9;
		color: black;
	}
}

@media (max-width: 540px) {
	.intro__content, .intro__browsers { text-align: center; }
	.quizz__content {
		width: 100%;
		height: calc( 100% - 10.5rem );
		position: relative;
	}
	.quizz__select {
		height: 10.5rem;
	}
	.quizz__text text {
		font-size: 150%;
	}
	.quizz__option {
		display: block;
		width: calc( 100vw - 2rem );
		margin: 0.5rem 1rem;
		height: 2rem;
		min-height: 2rem;
	}
	.quizz__option .strings div {
		padding: 0 1rem;
		display: inline;
	}
	.modal .button { font-size: 0.8rem; }
}



#results table.tab__content .tab__cell { padding: 0.5rem 0; }
.results__title {
	font-family: HelvBold;
	font-size: 1.5rem;
	text-align: center;
	margin: 2vh auto;
	max-width: 800px;
}

.results__conclusion {
	max-width: 800px;
	text-align: left;
	margin: 0 auto;
	padding: 0.5rem 1rem;
	box-sizing: border-box;
}
.results__conclusion div {
	margin: 0.5rem 0;
}
.results__intro {
	max-width: 800px;
	text-align: left;
	margin: 0 auto;
	padding: 0.5rem 1rem;
	box-sizing: border-box;
}
.results__intro .par {
	margin: 0.5rem 0;
}

.results__feedbacks {
	max-width: 800px;
	text-align: left;
	margin: 0 auto;
}

.results__pie {
	text-align: center;
}
.results__pie svg {
	max-width: 100vw;
	width: 66vh;
	height: 66vh;
}

.results__icon {
	width: 8rem;
	height: auto;
	float: left;
	margin-right: 1em;
}

.results__type {
	display: inline;
	font-weight: bold;
}

.results__decode {
	margin-bottom: 1rem;
}

.results__advice {
	margin-bottom: 1rem;
}

.results__p {
	margin: 0.5rem 0;
	padding: 0.5rem 1rem;
	color: #51400B;
	background: #FFFAEB;
}

.results__c {
	margin: 0.5rem 0;
	padding: 0.5rem 1rem;
	color: #8E0000;
	background: #FFEBEB;
}

.results__t {
	margin: 0.5rem 0;
	padding: 0.5rem 1rem;
	color: #1C6568;
	background: #F2FBFC;
}

.results__recall {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	box-sizing: border-box;
	border: solid #dedede 1px;
}
.results__recall .par {
	max-width: 100%;
}
.results__menu {
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0.5em;
}
.results__menu > div {
	display: table-row;
}
.results__recall .par {
	text-align: center;
	margin: 0 0.5em !important;
}
.results__print_button, .results__print_email {
	display: table-cell;
	text-decoration: none;
	box-sizing: border-box;
	background: white;
	color: black;
	padding: 0.5rem 1rem;
	vertical-align: middle;
	text-align: center;
	width: 50%;
	cursor: pointer;
	background: #FF7900;
	color: white;
	font-family: HelvBold;
}
.results__print_button:hover, .results__print_email:hover {
	background: #F16E00;
}

.results__share {
	font-family: HelvBold;
}

.results__link {
	max-width: calc( 100vw - 2em) !important;
	white-space: pre;
	text-overflow: ellipsis;
	overflow: hidden;
	text-align: center;
}



/*** PRINT ***/

#print { display: none; }

@media print {
	.screen { display: none; }
	#print { display: block; }
	.results__pie svg { max-width: 80vw; }
}