:root{
  --surveypage-bgcolor: #ffffff;
  --surveypage-textcolor: #232323;
  --surveybox-bgcolor: #F3F3F3;
  --surveybox-textcolor: #232323;
	--surveybutton-bg-color: #E1D5EA;
	--surveybutton-text-color: #580D87;
	--surveybutton-bg-hover: #580D87;
	--surveybutton-text-hover: #ffff;

}

.button,
.answerbox .optdata
{
	cursor:hand;
	cursor:pointer;
}

.surveypage
{
  background-color: var(--surveypage-bgcolor);
  color: var(--surveypage-textcolor);
  min-height:100vh;
}
.surveypage .topbar,
.surveypage .main,
.surveypage .bottombar
{
  margin:0px auto;
  max-width:760px;
  width:90%;
}
.surveypage .topbar .header
{
}
.surveypage .topbar .intro
{
}

.surveycontainer
{
  background-color: var(--surveybox-bgcolor);
  color: var(--surveybox-textcolor);
  padding:12px 20px;
	border-radius:10px;
}
#surveypanels
{
	padding: 6px 0px;
}
.panel
{
  display:none;
}
.panel.active
{
}




.answerbox
{
	display:flex;
	flex-wrap: wrap;
}
.questionbox
{
	background-color:#fff;
	padding:12px 15px;
	border-radius:10px;
  margin:12px 0px;

}
.answerbox label
{
	flex:1;
	padding:0px;
	text-align:center;
	border:2px solid transparent;
  transition: all 0.5s;
}
[type=radio],
[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.section.unselected > .selected,
.button.next.nonactive,
[type=radio] + div,
[type=checkbox] + div {
  cursor: pointer;
	min-width:30px;
	background-color:var(--surveybutton-bg-color); /*#244690;*/
	color:var(--surveybutton-text-color);
	border-radius:10px;
}

[type=radio] + div:hover,
[type=checkbox] + div:hover
{
	background-color: var(--surveybutton-bg-color);
	border:2px solid var(--surveybutton-text-color);
	margin:-2px;
}
.section > .selected,
.button.next:hover,
[type=radio]:checked + div,
[type=checkbox]:checked + div
{
  background-color:var(--surveybutton-bg-hover);
	color:var(--surveybutton-text-hover);
}

.section > .selected,
[type=radio] + div,
[type=checkbox] + div
{
	padding:10px;
	cursor:pointer;
}

.button.next
{
  width:100px;
  margin:4px auto;
  padding:4px;
  text-align:center;
  border-radius:5px;
  background-color:#E1D5EA;
  transition: all 500ms ease-out;
}

.button.next.nonactive
{
  opacity:0.8;
  pointer-events: none;
}



.panelnav
{
  position:relative;
  width:100%;
  text-align:center;
}

.panelnav .buttonrow
{
  position:relative;
}
.panelnav .buttonrow > div
{
  display:inline-block;
  font-size:0.5em;
  width:16px;
  height:24px;
  margin-right:4px;
  background-color:#E1D5EA;
  border-radius:4px;
  transition: all 500ms ease-out;
}
.panelnav .buttonrow > div.active
{
  height:32px;
}
.panelnav .buttonrow > div.done
{
  height:32px;
  background-color:#8655A6;
}