input[type=radio], input[type=checkbox] {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: inline-block;
	margin: 0 12px;
	margin-right: 22px;
	cursor: pointer;
	width: 20px;
	height: 20px;
  	position: relative;
	top: 3px;
	&:before,
	&:after{
		content: "";
		position: absolute;
		-moz-transition: all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);
		-o-transition: all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);
		-webkit-transition: all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);
		transition: all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);
	}
	&:before{
		height: 100%;
		-moz-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		-webkit-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
	}
	&[type=radio] {
		border-radius: 30px;
		&:before{
			width: 100%;
			border-radius: 30px;
			background-color: #2c3f52;
			box-shadow: 0 0 0 1px #2c3f52;
		}
		&::after {
			width: 100%;
			height: 100%;
			border-radius: 30px;
			background-color: #15202a;
			-moz-transform: scale(0, 0);
			-ms-transform: scale(0, 0);
			-webkit-transform: scale(0, 0);
			transform: scale(0, 0);
		}
		&:checked{
			&:after {
				-moz-transform: scale(0.75, 0.75);
				-ms-transform: scale(0.75, 0.75);
				-webkit-transform: scale(0.75, 0.75);
				transform: scale(0.75, 0.75);
			}
			&::before {
				background-color: #85ff7a;
				box-shadow: 0 0 0 1px #85ff7a;
			}
		}
	}
	&[type=checkbox] {
		&:before {
			width: 200%;
			background-color: var(--global-section-color);
			box-shadow: 0 0 0 2px var(--global-border-color);
			-moz-transform: translate(-25%, 0);
			-ms-transform: translate(-25%, 0);
			-webkit-transform: translate(-25%, 0);
			transform: translate(-25%, 0);
			border-radius: 30px;
		}
		&:after {
			width: 80%;
			height: 80%;
			margin-top: 10%;
			margin-left: 10%;
			background-color: var(--global-link-color);
			border-radius: 30px;
			-moz-transform: translate(-60%, 0);
			-ms-transform: translate(-60%, 0);
			-webkit-transform: translate(-60%, 0);
			transform: translate(-60%, 0);
		}
		&:hover{
			&:before {
				background-color: var(--global-section-color);
			}
			&:after {
				background-color: var(--global-link-active);
			}
		}
		&:checked{
			&:before {
				background-color: var(--global-link-color);
				box-shadow: 0 0 0 1px var(--global-link-color);
			}
			&:after {
				-moz-transform: translate(60%, 0);
				-ms-transform: translate(60%, 0);
				-webkit-transform: translate(60%, 0);
				transform: translate(60%, 0);
				background-color: var(--global-link-brighter);
			}
			&:hover{
				&:before {
					background-color: var(--global-link-active);
					box-shadow: 0 0 0 1px var(--global-link-active);
				}
				&:after {
					background-color: var(--global-link-brighter);
				}
			}
		}
	}
}