.hidden {
	visibility: hidden;
	display: none;
	height: 0;
	padding: 0;
	margin: 0 !important;
}

.error {
	color: #990000;
	font-style: italic;
}
.question .required {
	color: darkgray;
}
.question.requiredError {
	border: solid #990000 2px;
	background-color: rgba(153,0,0,0.2);
}
.question.requiredError .required {
	color: #990000;
}

.loading {
	text-align: center;
}
#loadError {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto 0 auto;
	text-align: center;
}

.right {
	float: right;
}
.clear {
	float: clear;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: lightgrey;
  opacity: 0.6; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: lightgrey;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: lightgrey;
}

/* =========================================================== */

.footer {
	color: #999999;
	padding-top: 20px;
	/*
	position: absolute;
	bottom: 10px;
	*/
}
#copyright {
	text-align: center;
}

#title, #subtitle {
	text-align: center;
	font-family: sans-serif;
}
#instructions, .instructions {
	text-align: center;
	margin: 0 auto;
	max-width: 512px;
	display: block;
}
#logo-wrapper {
	text-align: center;
}
#logo {
	margin: 5px auto 0px auto;
	max-width: 90%;
	max-height: 150px;
}

#questions {
	width: 100%;
	max-width: 512px;
	margin: 0 auto 0 auto;
}
.survey-wide {
	max-width: 1024px !important;
}

#report {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto 0 auto;
}

/* TODO: Clean up compTitle from JS code, then CSS  */
#compTitle {
	visibility: hidden;
	display: none;
}
/* NOTE: Only shown when printing */
.compInstructions {
	visibility: hidden;
	display: none;
	text-align: center;
}
.compContainer {
	margin-top: 50px;
	page-break-before: always;
}
.compContainer h2 {
	color: red;
}
.chartTitle {
	text-align: left;
	margin-top: 50px;
}
.chartContainer {
	width: calc(100% - 40px);
	height: 640px; /* changed dynamically for some charts */
	page-break-inside: avoid;
}

.reportContainer {
	width: 100%;
	margin-top: 50px;
}

strong {
	color: black;
}
em {
	/*color: darkorange;*/
	font-weight: bold;
}

a {
	/*font-size: 9pt;*/
	font-family: sans-serif;
	text-decoration: none;
	color: slateblue;
}

/* =========================================================== */

.submit-wrapper {
	text-align: center;
}

.enterCode {
	text-align: center;
}
.accessCode {
	text-align: center;
	background: lightgrey;
}

/* =========================================================== */

.question {
	border: solid black 2px;
	margin: 40px;
	padding: 20px;
	page-break-inside: avoid;
	overflow: auto;
}

.stimulus {
	padding-top: 0px;
	padding-bottom: 5px;
}

.stimulus > img {
	width: 100%;
	max-width: 320px;
	float: right;
	/*border: solid #999999 4px;*/
}

#scoreTitle, #nineBoxTitle {
	text-align: center;
	padding-top: 10px
}
#report .scoreWrapper {
	text-align: center;
	margin: 0 auto 20px auto;
	padding: 5px 5px 20px 5px;
	border-bottom: lightgrey 0px solid;
}
#report .scoreBox {
	display: inline-block;
	padding: 15px;
	min-width: 90px;
	margin: 2px;
}
#report .scoreBoxMain {
	background-color: #cccccc;
}
#report .score {
	font-size: 24pt;
	margin-top: 5px;
	padding: 10px 15px 10px 20px;
	background-color: #999999;
	border-radius: 50%;
	display: inline-block;
}
#report .scoreBoxMain .score {
	font-size: 48pt;
}

.nextStepInstructions {
	border-top: lightgrey 1px solid;
	margin-top: 20px;
}

#nineBoxTitle {
	margin-bottom: 0;
}
.nineBoxInfo {
	margin: 0;
	text-align: center;
}
#report .nineBox {
	display: grid;
	grid-template-columns: 75px auto;
	grid-template-rows: auto 50px;
	padding-right: 75px;
	align-items: center;
	justify-items: center;
	margin: 20px auto;
	width: fit-content;
	page-break-inside: avoid;
}
#report .nineBox.hidden {
	page-break-after: avoid;
}
#report .nineBox h3 {
	text-align: center;
}
#report .nineBox .y-label h3 {
	transform: rotate(270deg);
	white-space: nowrap;
}
#report .nineBox .x-label {
	margin-right: 10px;
}
#report .nineBox .arrow:before {
	content: "Low ------------------------------------------------------------------- High";
	font-weight: normal;
	font-size: 16px;
}

#report .nineBox .grid {
	display: grid;
	grid-template-columns: [grid-left] repeat(3, min-content) [grid-right] ;
	grid-template-rows: [grid-top] repeat(3, min-content) [grid-bottom];
	background: transparent;
	background: linear-gradient(208deg, rgba(0,255,0,0.1) 0%, rgba(128,0,128,0.1) 35%, rgba(10,36,0,0.1) 100%);
	border: solid white 2px;
}
#report .nineBox .grid div {
	border: solid white 2px;
}

#report .nineBox .circle span {
	border: solid white 8px;
	border-radius: 50%;
	width: 150px;
	height: 150px;
	margin: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}
#report .nineBox .circle.low span {
	border-color: transparent;
}
#report .nineBox .circle.mid span {
	border-color: #b19cd9;
}
#report .nineBox .circle.high span {
	border-color: green;
}

#report .nineBox .circle span b {
	font-weight: normal;
}
#report .nineBox .circle span i {
	font-size: 1.2rem;
}
#report .nineBox .circle span i:before {
	content: '\00000A';
	display: block;
}

/*
.duplicateStimulus {
	display: none;
	visibility: hidden;
}
*/

.mcqOption {
	display: block;
	padding-left: 10px;
	padding-top: 7px;
}
.mcqOptionSideBySide {
	display: inline-block;
	white-space: nowrap;	
}

.crOption {
	display: block;
	margin-left: 10px;
}
.crOption textarea, .crOption input {
}
.narrow {
	width: calc(100% - 40px);
	max-width: 150px;
}
.moderate {
	width: calc(100% - 40px);
	max-width: 300px;
}
.wide {
	width: calc(100% - 40px);
	max-width: 600px;
}
.full {
	width: calc(100% - 40px);
	max-width: 1000px;
}

.inputChars {
	/* 20181111 CRB - hide input chars until we can make them show # of character left */
	/* display: inline-block; */
	display: none;
	visibility: hidden;

	vertical-align: top;
	color: #999999;
}

.likertStem {
	/*
	min-width: 150px;
	width: calc(100% - 210px);
	display: inline-block;
	*/
	width: 100%;
	display: block;
}

.likertOptionsBlock {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
}

/*.likertOptionsBlock span {*/
/*	display: inline-flex;*/
/*	flex-direction: column;*/
/*	justify-content: center;*/
/*	height: 1.5em;*/
/*	margin: 0;*/
/*	resize: vertical;*/
/*}*/


.likertOptionsBlock input, input[type='radio'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: solid 2px;
	border-radius: 50%;
	cursor: pointer;
	margin-right: 4px;
	outline: none;
	vertical-align: middle;
    margin-bottom: 0.25em;
    margin-top: 0;
    display: inline-block;
}

input[type='radio'] {
	border-color: darkgrey;
}
input[type='radio']:checked {
	background-color: darkgrey;
}


/* NOT WORKING CORRECTLY, source: http://www.tipue.com/blog/radio-checkbox/
.likertOptionsBlock input:checked::before {
	color: red;
	position: absolute;
	font: 13px/1 'Open Sans', sans-serif;
	left: 3px;
	top: 3px;
	content: '\02143';
	transform: rotate(40deg);
}
*/

/* likert button sizes */
.likertInput7, .likertInput1 {
	height: 27px;
	width: 27px;
	margin-left: 0px;
	margin-right: 0px;
}
.likertInput6, .likertInput2 {
	height: 22px;
	width: 22px;
	margin-left: 0px;
	margin-right: 0px;
}
.likertInput5, .likertInput4, .likertInput3, .likertNA {
	height: 18px;
	width: 18px;
	margin-left: 0px;
	margin-right: 0px;
}

/* likert button & label colors */
.likertInput7, .likertInput6, .likertInput5 {
	border-color: green !important;
}
.likertInput4 {
	border-color: darkgray !important;
}
.likertNA {
	border-color: #333399 !important;
	margin-left: 18px !important;
	margin-right: 9px !important;
}
.likertInput3, .likertInput2, .likertInput1 {
	border-color: purple !important;
}
.likertInput7:checked, .likertInput6:checked, .likertInput5:checked {
	background-color: green !important;
}
.likertInput4:checked {
	background-color: darkgrey !important;
}
.likertInput3:checked, .likertInput2:checked, .likertInput1:checked {
	background-color: purple !important;
}
.likertNA:checked {
	background-color: #333399 !important;
}
.likertLabelHigh {
	color: green;
}
.likertLabelLow {
	color: purple;
}
.likertLabelNA {
	color: #333399;
}
.likertButtonsWrapper {
	margin-left: 9px !important;
	margin-right: 9px !important;
}


/*
.form-radio
{
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #f1f1f1;
     color: #666;
     top: 10px;
     height: 30px;
     width: 30px;
     border: 0;
     border-radius: 50px;
     cursor: pointer;     
     margin-right: 7px;
     outline: none;
}
.form-radio:checked::before
{
     position: absolute;
     font: 13px/1 'Open Sans', sans-serif;
     left: 11px;
     top: 7px;
     content: '\02143';
     transform: rotate(40deg);
}
.form-radio:hover
{
     background-color: #f7f7f7;
}
.form-radio:checked
{
     background-color: #f1f1f1;
}
*/

.questionAlt {
	background-color: #eeeeee;
}

.sectionTitle {
	text-align: center;
	font-weight: bold;
	padding-top: 12px;
	margin-top: 12px;
}

.sectionScale {
	text-align: center;
}

.instructions {
	text-align: center;
	font-style: italic;
	padding: 0 12px 6px 12px;
}

.todo {
	background-color: darkred;
	color: white;
}

/* =========================================================== */

.cool-button {
	margin: 15px;
	/* blue: #3D94F6, #1E62D0 */
	background: green;
	background-image: -webkit-linear-gradient(top, green, darkgreen);
	background-image: -moz-linear-gradient(top, green, darkgreen);
	background-image: -ms-linear-gradient(top, green, darkgreen);
	background-image: -o-linear-gradient(top, green, darkgreen);
	background-image: linear-gradient(to bottom, green, darkgreen);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	color: #ffffff;
	font-weight: 100;
	padding: 15px;
	box-shadow: 1px 1px 20px 0px #aaaaaa;
	-webkit-box-shadow: 1px 1px 20px 0px #aaaaaa;
	-moz-box-shadow: 1px 1px 20px 0px #aaaaaa;
	text-shadow: 1px 1px 20px #aaaaaa;
	border: solid darkgreen 1px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

.cool-button:hover {
	background: darkgreen;
	background-image: -webkit-linear-gradient(top, darkgreen, green);
	background-image: -moz-linear-gradient(top, darkgreen, green);
	background-image: -ms-linear-gradient(top, darkgreen, green);
	background-image: -o-linear-gradient(top, darkgreen, green);
	background-image: linear-gradient(to bottom, darkgreen, green);
	text-decoration: none;
}

/* =========================================================== */
/* ===== TABLES ===== */

#dimensionsTitle {
	margin-top: 50px;
	margin-bottom: -35px;
	page-break-after: avoid;
}

.statementTable {
	display: grid;
	grid-template-columns: auto repeat(6, 100px);
	margin-top: 50px;
	page-break-inside: avoid;
}
.statementTable.dimension {
	grid-template-columns: auto 100px 200px;
}
.statementTable.averageOnly {
	grid-template-columns: auto 100px;
}
.statementTable.year-over-year {
	grid-template-columns: auto repeat(4, 100px);
}

.statementTable:first-child {
}
.statementTable:last-child {
	page-break-after: always;
}

.statementTable .header-row {
	white-space: nowrap;
}
.statementTable .title {
	font-weight: bold;
	background: purple;
	color: white;
}
.statementTable .n-value {
	font-size: smaller;
	font-weight: normal;
}
.statementTable h2 {
	margin: 8px 0 !important;
	text-align: left;
}
.statementTable div {
	border-bottom: solid black 2px;
	text-align: center;
	padding: 8px;
}
.statementTable div.statement {
	text-align: left;
}
.statementTable div.statement .dimension {
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
}

.statementTable div.equals {
	font-weight: bold;
	font-size: 18px;
	line-height: 1;
}
.statementTable img.arrow.small {
	width: 24px;
	height: 24px;
}
.statementTable img.arrow.moderate {
	width: 32px;
	height: 32px;
}
.statementTable img.arrow.large {
	width: 48px;
	height:48px;
}

/* =========================================================== */

/* MOBILE */
/*
.mcqOption { 
	display: block !important;
}
.likertOptionsBlock span {
	display: block !important;
}


#title {
	font-size: 96px;
}
body, input, textarea, select, button {
	font-size: 48px;
}
.sectionTitle {
	font-size: 80px;
}
.footer {
	font-size: 32px;
}

input[type='radio'] {
     height: 48px;
     width: 48px;
}

.likertInput7, .likertInput1 {
     height: 96px !important;
     width: 96px !important;
}
.likertInput6, .likertInput2 {
     height: 80px !important;
     width: 80px !important;
}
.likertInput5, .likertInput4, .likertInput3, .likertNA {
     height: 64px !important;
     width: 64px !important;
}
/*
.likertInput7, .likertInput1 {
     height: 144px !important;
     width: 144px !important;
}
.likertInput6, .likertInput2 {
     height: 125px !important;
     width: 125px !important;
}
.likertInput5, .likertInput4, .likertInput3, .likertNA {
     height: 96px !important;
     width: 96px !important;
}
/**/

/*
body {
	background-color: olive;
}
@media (max-resolution: 96dpi) {
	body {
		background-color: red;
	}
}
@media (min-resolution: 97dpi) and (max-resolution: 192dpi) {
	body {
		background-color: green;
	}
}
@media (min-resolution: 193dpi) and (max-resolution: 386dpi) {
	body {
		background-color: blue;
	}
}
@media (min-resolution: 387dpi) {
	body {
		background-color: orange;
	}
}
/**/
/*
@media screen and (min-width: 600px) {
	.question {
		background-color: cyan;
	}
}
@media screen and (min-width: 800px) {
	.question {
		background-color: magenta;
	}
}
@media screen and (min-width: 1000px) {
	.question {
		background-color: yellow;
	}
}
*/

@media screen and (min-width: 1024px) {
	/*.mcqOption { */
	/*	display: inline-block !important;*/
	/*}*/
	.likertOptionsBlock span {
		display: inline-flex !important;
	}

	/*
	.question {
		background-color: red;
	}
	*/
	/**/

	/*
	.duplicateStimulus {
		display: block;
		visibility: visible;
	}
	*/
	/*
	.likertStem {
		width: 100%;
	}
	.likertOptionsBlock {
		display: block;
	}
	*/
}
/**/


/* COMPUTER */
/*
@media only screen and (min-width: 801px) {
*/
@media screen and (max-resolution: 192dpi) and (pointer: coarse) and (hover: none) {
	.footer {
		font-size: 13px;
	}
	#questions,  #instructions, .instructions {
		max-width: calc(100% - 100px);
	}

	input[type='radio'] {
		height: 45px;
		width: 45px;
		/*margin-left: 0px;*/
		/*margin-right: 0px;*/
	}

	.likertInput7, .likertInput1 {
	     height: 63px !important;
	     width: 63px !important;
	}
	.likertInput6, .likertInput2 {
	     height: 54px !important;
	     width: 54px !important;
	}
	.likertInput5, .likertInput4, .likertInput3, .likertNA {
	     height: 45px !important;
	     width: 45px !important;
	}

	.likertLabelLow, .likertLabelHigh, .likertLabelNA, input, button {
		font-size: 42px;
	}
	.narrow, .moderate, .wide, .full {
		max-width: 100%;
	}
}
/**/


/*
@media only screen and min-resolution: 2 and max-resolution: 4 {
*/
@media screen and (min-resolution: 193dpi) and (max-resolution: 386dpi) and (pointer: coarse) and (hover: none) {
	#questions,  #instructions, .instructions {
		max-width: calc(100% - 100px);
	}
	.footer {
		font-size: 13px;
	}

	input[type='radio'] {
		height: 45px;
		width: 45px;
		/*margin-left: 0px;*/
		/*margin-right: 0px;*/
	}


	.likertInput7, .likertInput1 {
	     height: 54px !important;
	     width: 54px !important;
	}
	.likertInput6, .likertInput2 {
	     height: 45px !important;
	     width: 45px !important;
	}
	.likertInput5, .likertInput4, .likertInput3, .likertNA {
	     height: 36px !important;
	     width: 36px !important;
	}

	.likertLabelLow, .likertLabelHigh, .likertLabelNA, input, button {
		font-size: 36px;
	}
	.narrow, .moderate, .wide, .full {
		max-width: 100%;
	}
}
/*
@media only screen and max-resolution> 4 {
	*/
@media screen and (min-resolution: 387dpi) and (pointer: coarse) and (hover: none) {
	#title {
		font-size: 80px;
	}
	body, input, textarea, select, button {
		font-size: 54px;
	}
	.sectionTitle {
		font-size: 68px;
	}
	.footer {
		font-size: 36px;
	}

	input[type='radio'] {
		height: 68px;
		width: 68px;
		/*margin-left: 0px;*/
		/*margin-right: 0px;*/
	}


	.likertInput7, .likertInput1 {
	     height: 92px !important;
	     width: 92px !important;
	}
	.likertInput6, .likertInput2 {
	     height: 80px !important;
	     width: 80px !important;
	}
	.likertInput5, .likertInput4, .likertInput3, .likertNA {
	     height: 68px !important;
	     width: 68px !important;
	}
}
/**/
/*
@media only screen and resolution: 4 {
	body {
		background-color: green;
	}
	#title {
		font-size: 96px;
	}
	body, input, textarea, select, button {
		font-size: 64px;
	}
	.sectionTitle {
		font-size: 80px;
	}
	.footer {
		font-size: 48px;
	}

	.likertOptionsBlock span {
		display: block;
	}
	input[type='radio'] {
	     height: 48px;
	     width: 48px;
	}

	.likertInput7, .likertInput1 {
	     height: 144px;
	     width: 144px;
	}
	.likertInput6, .likertInput2 {
	     height: 125px;
	     width: 125px;
	}
	.likertInput5, .likertInput4, .likertInput3, .likertNA {
	     height: 96px;
	     width: 96px;
	}
}
*/
h1, h2, h3 {
	page-break-after: avoid;
}
@media print {
	.nextStepInstructions, .submit-wrapper, .footer, #compTitle {
		visibility: hidden;
		display: none;
	}
	.question, .compInstructions {
		visibility: visible;
		display: block;
	}
	.compContainer {
		margin-top: 0;
	}
}