/* 
	The questionnaire needs to work on mobile devices.  
	Specifically, because ~30% of Fortnite developers access their dev portal on mobile (they're kids!).
	But we have killed mobile formatting on RAD, where it just doesn't work. So we keep it alive in this file for the qnaire. 
*/


/* Override what's in site.css.  */

@media (min-width: 768px) {
	footer a, footer .copyright {
		margin: 10px;
		padding: 10px;
	}
}

/* overwrite what's in Site.css */
.iarcQuestionTitle, .questionCategory {
	font-weight:bold;
	color: inherit;
	text-transform: none; /* no more all-caps, now that gambling title is like 20 words long */
}
.iarcQuestionTitle {
	display: inline;
}
.text-success {
	color: #1dbb14;
}

.glyph-large {
	font-size: 20px;
}

.questionnaire .pointer {
	cursor: pointer;
}

.response-block {
	display: block;
	margin: 5px 25px 0px 35px;
}
.questionAnswerBlock {
	padding: 10px 20px;
}

.questionnaire .edit-icon-container {
	margin-left: 0;
	position: absolute;
}

.questionnaire .edit-icon {
	cursor: pointer;
	font-size: 22px; /* edit glyph is wider than collapse glyph when at same font size */
	padding: 5px 10px 5px 0px;
}

.questionnaire .collapse-icon {
	padding-right: 12px;
	cursor: pointer;
	top: 3px;
	font-size: 23px;
}

.questionnaire .panel-body {
	padding: 8px 10px;
}

.questionnaire .help-icon {
	margin-left: 5px;
	font-size: 20px;
	color: #888;
}
.questionnaire .questionnaire-blue {
	color: #2196F3;
}

.apptype-hr {
	border-top: 1px solid #516d77;
}

#termsOfUseLabel {
	font-size: 12px;
	font-weight: normal;
	margin-bottom: 24px;
}

/* mobile-friendly radio and checkboxes, which we'll use on non-mobile as well ******************************************/

.custom-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 18px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	/* hide the default boxes/buttons */
	.custom-container input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

.custom-input {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	transition: all 250ms ease;
}

	/* this is required for our little simulated checkmark, which is actually a border turned  */
	.custom-input:before, .custom-input:after {
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}


/* blue background when the input is selected */
.custom-container input:checked ~ .custom-input {
	background-color: #2196F3;
}

/* create the checkmark/indicator (hidden when not checked) */
.custom-input:after {
	content: "";
	position: absolute;
	display: none;
}

/* show the checkmark when checked */
.custom-container input:checked ~ .custom-input:after {
	display: block;
}

/* checkbox-specific styles for the checkmark */
.custom-container input[type="checkbox"] ~ .custom-input:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* radio-specific styles */
.custom-container input[type="radio"] ~ .custom-input {
	border-radius: 50%;
}

	/* the dot/circle for radio buttons */
	.custom-container input[type="radio"] ~ .custom-input:after {
		top: 9px;
		left: 9px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: white;
	}


/* begin formatting specifically for mobile size */

@media (max-width: 767px) {
	.form-group > div:not(:last-child) {
		margin-bottom: 15px;
	}

	.form-horizontal .form-group {
		text-align: center !important;
	}

		.form-horizontal .form-group .panel-body {
			text-align: left !important;
		}

	.questionnaire .blockResponses {
		display: block;
	}

	.container {
		width: auto;
	}

	.questionAnswerBlock {
		padding: 5px 0px; /*kill indentation on mobile phones*/
		margin: 8px 0px;
	}

	.failedValidation {
		padding: 5px 10px !important;
	}

	body, .list-group-item, .questionnaire li.list-group-item, #termsOfUseLabel {
		font-size: 15px;
	}

	footer a {
		display: inline-block;
		font-size: 15px;
		margin: 10px 20px;
		padding: 15px;
	}

	footer .copyright {
		display: block;
		font-size: 12px;
		margin-top: 20px;
	}

	.qnaire-terms {
		font-size:13px;
	}




}