.surveys .survey.content {
	width: 100%;
}

.surveys label.questionText {
	display: block;
	font-size: 1rem;
}

.surveys .missingControl {
	position: relative;
	color: darkred;
	font-size: 0.6rem;
}

.surveys .missingControl:hover {
	color: transparent;
}

.surveys .missingControl .details {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	color: black;
	opacity: 0;
}

.surveys .missingControl:hover .details {
	opacity: 1;
}


/* Radio buttons */
.surveys .buttonContainer {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 20px;
}

.surveys [radio-button] .button {
	margin: 5px;
	background: #666666;
	color: white;
	font-size: 0.85rem;
	line-height: 55px;
	height: 55px;
	padding: 10px;
}

.surveys [radio-button].checked .button {
	background: #92278F;
}

.surveys .checkboxGroup,
.surveys .radioGroup {
	display: inline-block;
	text-align: left;
}

.surveys [checkbox]::after,
.surveys [radio-button]::after {
	content: " ";
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}

.surveys [checkbox] .indicator,
.surveys [radio-button] .indicator {
	content: ' ';
	display: inline-block;
	vertical-align: middle;
	width: 70px;
	height: 70px;
	background-image: url(/images/slimCheckmark.svg);
	background-position: 0 0;
	background-size: 200% 100%;
	background-repeat: no-repeat;
}

.surveys [radio-button] .indicator {
	background-image: url(/images/slimRadioButton.svg);
}

.surveys [checkbox].checked .indicator,
.surveys [radio-button].checked .indicator {
	background-position: 100% 0;
}

.surveys [checkbox] .label,
.surveys [radio-button] .label {
	display: inline-block; /* Prevents an issue where the labels would only display one word per line. Not sure why, but it works so I won't complain. */
	vertical-align: middle;
	font-size: 0.85rem;
}

.surveys .submitButton {
	position: relative;
	overflow: hidden;
	border-radius: 15px;
	max-width: 60%;
	margin: auto;
	margin-top: 20px;
}

.surveys .submitButton .background {
	position: absolute;
	
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.surveys .submitButton .inner {
	position: relative;
	
	border: 8px solid rgba(255, 255, 255, 0.3);
	border-radius: 15px;
}

.surveys .submitButton .inner.focused,
.surveys .submitButton.tizenhovered .inner {
	background: rgba(255, 255, 255, 0.3);
}

.surveys .submitButton.submitted .inner {
	background: #666666;
}

.surveys .submitButton.submitting .inner {
	background-color: transparent !important;
	background-size: 160px 160px;
	background-image: url('/images/loadingStripe.png') !important;
	-webkit-animation: loadingStripes 1s linear 0s infinite;
	border: 8px solid transparent;
}

.surveys .submitButton .inner .text {	
	color: white;
	
	margin: 25px;
	font-size: 0.7rem;
	
	text-align: center;
}