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: #3465a4;
}
a:hover {
	color: black;
}

.header {
	background: #E7E7E7;
	height: 4em;
	width: 100%;
	color: black;
	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;
}

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

div.tab__content {
	margin: 0.5em;
	padding: 0;
}
table.tab__content {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	margin: 0;
}
table.tab__content td {
	vertical-align: middle;
	text-align: center;
	width: 100%;
	height: 100%;
	padding: 0.5em;
}


@media (max-width: 480px), (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;
	}
	.tab {
		top: 3em;
	}
}

.button {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
	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: #3465a4;
	color: white;
	border: none;
	box-sizing: border-box;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
}
.button.emphasis:hover {
	cursor: pointer;
	background: #6791c7;
}
.button--emphasis {
	background: #3465a4;
	color: white;
	border: none;
	box-sizing: border-box;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
}
.button--emphasis:hover {
	cursor: pointer;
	background: #6791c7;
}
.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.emphasis {
	background: #D6D6D6;
	color: white;
	border: none;
	box-sizing: border-box;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
}
.button.disabled.emphasis:hover {
	cursor: default;
	background: #D6D6D6;
}
.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: none;
	box-sizing: border-box;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
}
.button--disabled.button--emphasis:hover {
	cursor: default;
	background: #D6D6D6;
}


.consent__options {
	border: none;
	max-width: 47rem;
	margin: 1rem auto;
	display: table;
	border-collapse: separate;
	border-spacing: 1rem;
}
.consent__option {
	display: table-cell;
	vertical-align: middle;
	width: 30%;
	max-width: 15rem;
	background: #3465a4;
	font-family: HelvBold;
	color: black;
	cursor: pointer;
	padding: 0.5rem;
}
.consent__option:hover {
	background: #6791c7;
	color: white;
}
.consent__option.consent--clicked, .consent__option.consent--clicked:hover {
	background: #D6D6D6;
	color: black;
}
.consent__option a {
	display: block;
	width: 100%;
	height: 100%;
	color: black;
}
.consent__option a:hover {
	color: white;
}
.consent--comment {
	font-family: HelvRoman;
	font-size: 0.9rem;
}
.link--available { display: block; }
.link--copied { display: none; }
.bookmark--copied .link--available { display: none; }
.bookmark--copied .link--copied { display: block; }
/* Hide underline from consent buttons that are <a> elements */
.consent__option a { text-decoration: none; }
.link--u { text-decoration: underline; }

.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;
}



.tab--cropped { bottom: 3rem; }

.tab__content .par {
	margin-top: 0.5rem;
}
.tab__results, .tab__questionnaire {
	max-width: 56rem;
	margin: 0.5rem auto !important;
}
.tab__results {
	padding: 0.5rem !important;
}


@media (max-width: 680px) {
.tab--cropped { bottom: 6rem; }
}
#questionnaire {
	bottom: 3rem;
}
.questionnaire__intro {
	padding: 0.5rem;
}

#progress {
	position: absolute;
	height: 3rem;
	left: 0; right: 0;
	bottom: 0;
	text-align: center;
	background: #D6D6D6;
}
#progress.progress--complete {
	background: #32C832;
}
#progress .button {
	background: #D6D6D6;
	border: none;
	color: white;
}
.progress--complete .button {
	background: #0A6E31 !important;
}
.progress__frame {
	width: 100%;
	height: 3rem;
	border-collapse: collapse;
	border-spacing: 0;
}
.progress__scale {
	padding: 0 1rem;
}
.progress__submit {
	padding: 0;
	width: 20rem;
}
#submit { margin: 0 !important; }
.progress__bar {
	border-collapse: separate;
	border-spacing: 0.25rem;
	font-size: 1rem;
	width: 100%;
}
.progress__bar td {
	background: #eeeeee;
	height: 0.5rem;
}
.progress__bar td.progress--done {
	background: #0A6E31;
}

.qn__head {
	font-family: HelvBold;
}

.qn__label, .qn__option {
	background: #D9D9D9;
	text-align: center;
	border: solid white;
	padding: 0.5rem 0.25rem;
	border-width: 0.25rem;
	box-sizing: border-box;
	vertical-align: middle;
}
.qn__label {
	font-family: HelvBold;
	background: #F4F4F4;
	text-align: left;
}
.qn__joker {
	background: #8F8F8F;
	color: white;
	width: 10%;
}

.qn--nojoker .qn__joker {
	background: #f0f0f0;
	color: #e0e0e0;
}

em {
	font-style: normal;
	font-size: 2rem;
	display: block;
	text-align: center;
}

.qn--selected {
	background: black !important;
	color: #3465a4 !important;
}
.qn__option:hover {
	background: black;
	color: white;
	cursor: pointer;
}

.questions { display: block; width: 100%; max-width: 1000px; margin: 0 auto }
.qn__head { display: block; width: 100%; }
.qn__list { display: block; }
.questions { width: 100%; }
.qn { display: block; margin: 1rem 0; }
.qn--noanswer .qn__label {
	background-color: #CD3C14;
	color: white;
	transition: background-color 2s, color 2s;
}
.qn__label {
	display: block; width: 100%;
	transition: background-color 0.5s, color 0.5s;
}
.qn__options { display: table; width: 100%; }
.qn__options > div { display: table; width: 100%; }
.qn__option { display: table-cell; width: 23%; }
.qn__joker { display: table-cell; width: 8%; }
em { font-size: 1.5rem; }

@media (max-width: 540px) {
.questions { display: block; width: 100%; }
.qn { display: block; margin: 1rem 0; }
.qn__label { display: block; width: 100%; background: #595959; color: white; }
.qn__options { display: block; width: 100%; }
.qn__option { display: block; width: 100%; background: #f7f7f7; }
.qn__option:last-child { background: #e7e7e7; color: black; }
em { font-size: 1rem; font-family: HelvBold; display: inline-block }
em:after { content: '-'; padding: 0 0.25rem; }
.consent__options {
	max-width: 100%;
	display: block;
}
.consent__option {
	display: block;
	margin: 1rem;
	width: auto;
	max-width: none;
}
}


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


#results a {
	text-decoration: underline;
	border: none;
	color: #3465a4;
}
#results a:hover {
	color: black;
}
.results__title {
	font-family: HelvBold;
	font-size: 1.2rem;
	text-align: center;
	margin: 1rem 0;
}
.results__subtitle {
	font-size: 1.1rem;
	font-family: HelvBold;
	text-align: left;
	margin: 1rem 0;
}
.results__intro {
	margin-top: 0.5rem;
}
.results__warning {
	margin: 1rem 0;
	padding: 0.5rem 1rem;
	font-family: HelvBold;
	border: solid black 1px;
}

.recommendation {
	margin: 1rem 0;
	padding: 1rem;
	background: #f5f5f5;
	border: solid #808080 1px;
}
.results__feedbacks {
	padding: 0 1rem 1rem 1rem;
	border: solid #808080 1px;
	background: #F9F9F9;
}
.feedback__content {
}
.feedback__title {
	color: black;
	margin: 1rem 0;
	font-family: HelvBold;
}
.feedback__indicator {
}
.results__share {
	margin: 1rem 0;
}

.results__link {
	margin: 1rem 2rem;
	cursor: pointer;
}


.results__pies {
	text-align: center;
}
.pie {
	width: 15rem;
	margin: 1rem;
	position: relative;
	display: inline-block;
	vertical-align: top;
	padding: 0.5rem;
	background: #F9F9F9;
	border: solid #eeeeee 2px;
}
.pie__name {
	font-family: HelvBold;
}
.pie__graph {
	width: 100%;
	box-sizing: border-box;
	display: inline-block;
}

.pie_P { fill: red; stroke: darkred; }
.pie_A { fill: green; stroke: darkgreen; }
.pie_M { fill: blue; stroke: darkblue; }
/*
.pie_Soi { fill: #FFD200; stroke: #FFB400; background-color: #FFF6B6; color:#FFB400; }
.pie_Sns { fill: #50BE87; stroke: #0A6E31; background-color: #B8EBD6; color:#0A6E31; }
.pie_Bus { fill: #4BB4E6; stroke: #085EBD; background-color: #B5E8F7; color:#085EBD; }
.pie_Pot { fill: #A885D8; stroke: #492191; background-color: #D9C2F0; color:#492191; }
.pie_Agi { fill: #FFB4E6; stroke: #FF8AD4; background-color: #FFE8F7; color:#FF8AD4; }
*/
.pie_Soi { fill: #FFD200; stroke: #FFB400; background-color: #FFD200; border-color:#FFB400; }
.pie_Sns { fill: #50BE87; stroke: #0A6E31; background-color: #50BE87; border-color:#0A6E31; }
.pie_Bus { fill: #4BB4E6; stroke: #085EBD; background-color: #4BB4E6; border-color:#085EBD; }
.pie_Pot { fill: #A885D8; stroke: #492191; background-color: #A885D8; border-color:#492191; }
.pie_Agi { fill: #FFB4E6; stroke: #FF8AD4; background-color: #FFB4E6; border-color:#FF8AD4; }

.pie__gauge {
	fill: #F0F0F0;
}

.legend {
	margin: auto;
	max-width: 500px;
	border-spacing: 0.5rem;
}
.legend td {
	text-align: center;
	vertical-align: middle;
}
.legend__title {
	font-family: HelvBold;
	font-size: 0.75rem;
}
.legend__item {
	font-size: 0.6rem;
	color: black;
	border-width: 0px;
	border-style: solid;
	width: 2000px;
	text-align: center;
	vertical-align: middle;
	padding: 0.25rem;
}

.results__back {
	margin: 1rem 0;
	text-align: center;
}

.results__disclaimer {
	margin-top: 2.5rem;
	font-size: 0.8rem;
}

@media (min-width: 600px) {
.results__graph {
	width: 50%;
	float: right;
}
}

.csod {
	padding: 0 0.5rem 0 1.7rem;
	background: #eeeeee url(/i/csod.png) no-repeat 0.5rem center;
	background-size: 1rem;
	border-radius: 0.25rem;
	text-decoration: underline;
	color: #6791c7;
}