.formian-form {
	.input-container.checkbox,
	.input-container.radio,
	.input-container.onoff {
		label {
			cursor: pointer;
			display: flex;
			align-items: center;
			line-height: 15px;
			vertical-align: middle;
			margin-left: 0;
		}

		input {
			opacity: 0;
			height: 12px;
			width: 25px;
			z-index: 2;
			position: absolute;
		}

		// text inside a 'buttony' radio or onoff box
		.radio-text,.off-text,.on-text {
			font-size: 20px;
			font-weight: normal;
		}

		.onoff-text, .checkbox-text {
			font-size: 1em;
			font-weight: normal;
		}

		.checkbox-custom,
		.onoff-custom,
		.radio-custom {
			cursor: pointer;
			margin: 0 5px 0 0;
			position: relative;
			border: 2px solid $gray-dark;
		}

		/* Hover and focus states */
		input:focus ~ .checkbox-custom,
		input:hover ~ .checkbox-custom,
		input:focus ~ .onoff-custom,
		input:hover ~ .onoff-custom,
		input:focus ~ .radio-custom,
		input:hover ~ .radio-custom {
			border-color: $color-info;
			.custom-icon { border-color: $color-info; }
		}


		/* Checked state */
		input:checked ~ .checkbox-custom,
		input:checked ~ .onoff-custom,
		input:checked ~ .readio-custom {
			.custom-icon,.fa { opacity: 1; }
		}

		/* Hover and focus states whilst checked */
		&:hover input:not([disabled]):checked ~ .checkbox-custom,
		&:hover input:not([disabled]):checked ~ .radio-custom,
		&:hover input:not([disabled]):checked ~ .onoff-custom,
		& input:checked:focus ~ .checkbox-custom,
		& input:checked:focus ~ .radio-custom,
		& input:checked:focus ~ .onoff-custom {
			border-color: $color-info;
		}
	}

	.input-container.checkbox {
	    margin: 5px 0 10px 0;

		label { width: fit-content; }

		.checkbox-custom {
			height: 25px;
			width: 25px;
			background-color: $white;

			.custom-icon,.fa {
				position: absolute;
				bottom: 5px;
				font-size: 30px;
				color: $color-info;
				opacity: 0;
			}

			&:hover,&:focus,&:active {
				border-color: $color-info;
			}
		}
	}

	.input-container.onoff {
		margin: 5px 0 10px 0;

		label { width: fit-content; }

		.onoff-custom {
			display: block;
			width: 80px;
			height: 30px;
			background: $trans;
			border-radius: 100px;
			overflow: hidden;

			.onoff-custom-wrapper {
				width: 150%;
				margin-left: -50%;
				transition: all 0.5s ease;

				.on-text,.custom-icon,.off-text {
					display: inline-block;
					position: relative;
					background-color: $trans;
				}

				.on-text {
					color: $trans;
					width: 35%;
					text-align: left;
				}

				.custom-icon {
					top: 3px;
					left: 3px;
					width: 20px;
					height: 20px;
					background: $trans;
					border-radius: 90px;
					opacity: 1;
					box-shadow: 0 0 0 2px $trans;
					border: 2px solid $gray-dark;
				}

				.off-text {
					color: $black;
					width: 35%;
					text-align: right;
				}
			}
		}

		/* Checked state */
		input:checked ~ .onoff-custom {
			background: $color-info;

			.onoff-custom-wrapper {
				margin-left: 10%;

				.custom-icon {
					border-color: $color-info;
					background: $white;
					box-shadow: 0 0 0 2px $white;
				}
				.on-text { color: $white; }
				.off-text { color: $trans; }
			}
		}
	}

	// custom syles for radio pills
	.input-container.radio {
		display: inline-block;
		width: auto;

		.radio-custom {
			min-width: 80px;
			background: $trans;
			border: 2px solid $gray-dark;
			display: block;
			border-radius: 100px;
			position: relative;
			padding: 0px 5px;

			.custom-icon {
				position: absolute;
				top: calc(50% - 9px);
				left: 4px;
				width: 18px;
				height: 18px;
				box-shadow: 0 0 0 2px $trans;
				border: 2px solid $gray-dark;
				background-color: $trans;
				border-radius: 90px;
			}
			.radio-text {
				color: $black;
				background-color: $trans;
				padding: 5px 5px 5px 30px;
			}
		}

		input:focus ~ .radio-custom {
			border-color: $color-info;

			.custom-icon {
				box-shadow: 0 0 0 2px $white;
				background-color: $white;
				border-color: $color-info;
			}
		}

		input:checked ~ .radio-custom {
			background-color: $color-info;
			border-color: $color-info;

			.custom-icon {
				border-color: $color-info;
				box-shadow: 0 0 0 2px white;
				background-color: white;
			}
			.radio-text {
				color: $white;
			}
		}
	}
}