* {
	box-sizing: border-box;
}

body {
	background-color: #f1f1f1;
}

#reqForm {
	background-color: #ffffff;
	margin: 0px auto;
	font-family: Raleway;
	padding: 5px;
	width: 40%;
	min-width: 300px;
}

h1 {
	text-align: center;
}

input select {
	padding: 10px;
	width: 100%;
	font-size: 12px;
	font-family: Raleway;
	border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
	background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
	display: none;
}

button {
	background-color: #04AA6D;
	color: #ffffff;
	border: none;
	padding: 10px 20px;
	font-size: 17px;
	font-family: Raleway;
	cursor: pointer;
}

button:hover {
	opacity: 0.8;
}

#prevBtn {
	background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbbbbb;
	border: none;
	border-radius: 50%;
	display: inline-block;
	opacity: 0.5;
}

.step.active {
	opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
	background-color: #04AA6D;
}


*,
*::before,
*::after {
	box-sizing: border-box;
}

/* To remove the spin arow from the input fiend of type "numbre" */
/*  See https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box */
/*
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
}

input[type=number] {
		-moz-appearance:textfield;
}
*/

/* For the checkbox and radio button */
/* https://www.sliderrevolution.com/resources/css-checkbox/ */
.inputGroup {
		background-color: #fff;
		display: block;
		margin: 10px 0;
		position: relative;

		label {
			padding: 12px 30px;
			width: 100%;
			display: block;
			text-align: left;
			color: #3C454C;
			cursor: pointer;
			position: relative;
			z-index: 2;
			transition: color 200ms ease-in;
			overflow: hidden;

			&:before {
				width: 20px;
				height: 10px;
				border-radius: 50%;
				content: '';
				background-color: #5562eb;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%) scale3d(1, 1, 1);
				transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
				opacity: 0;
				z-index: -1;
			}

			&:after {
				width: 32px;
				height: 32px;
				content: '';
				border: 2px solid #D1D7DC;
				background-color: #fff;
				background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
				background-repeat: no-repeat;
				background-position: 2px 3px;
				border-radius: 50%;  /* don't use this for checkbox type, only for the radio types */
				z-index: 2;
				position: absolute;
				right: 30px;
				top: 50%;
				transform: translateY(-50%);
				cursor: pointer;
				transition: all 200ms ease-in;
			}
		}

		input:checked ~ label {
			color: #fff;

			&:before {
				transform: translate(-50%, -50%) scale3d(56, 56, 1);
				opacity: 1;
			}

			&:after {
				background-color: #54E0C7;
				border-color: #54E0C7;
			}
		}

		input {
			width: 32px;
			height: 32px;
			order: 1;
			z-index: 2;
			position: absolute;
			right: 30px;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
			visibility: hidden;
		}
	}


// codepen formatting
/*
.form {
	padding: 0 16px;
	max-width: 550px;
	margin: 50px auto;
	font-size: 18px;
	font-weight: 600;
	line-height: 36px;
}
*/

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

code {
	background-color: #9AA3AC;
	padding: 0 8px;
}

.question {
		font-size: 1.1em;
		font-weight: bold;
		color: #000000;
}
.answer {
		font-size: 1em;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.answer-date {
		font-size: 1em;
		width: 50%;
}

.btn-enabled {
    background-color: green;
    cursor: pointer;
}

.btn-disabled {
    background-color: gray;
    cursor: not-allowed;
}

/* h5 styles? */
/*
question {
		display: block;
		font-size: .83em;
		margin-top: 1.67em;
		margin-bottom: 1.67em;
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
}
*/