#main-container {
	input[type="radio"],
	input[type="checkbox"] {
		position: relative;
		align-self: flex-start;
		flex: 0 0 17px;
		width: 17px !important;
		height: 17px !important;
		margin: 2px 1em 2px 0;
		cursor: pointer;
		appearance: none;
		border: var(--formBorderSize) solid var(--radioCheckboxInitialColor);

		&:before {
			position: absolute;
			content: '';
			z-index: 2;
			display: block;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
			margin: auto;
		}

		&:checked {
			border-color: var(--radioCheckboxAccentColor);
			background: var(--radioCheckboxAccentColor);

			&:before, &:after {
				opacity: 1;
			}
		}

		&:focus {
			outline: none;
		}
	}

	input[type="checkbox"] {
		display: inline-flex;
		justify-content: center;
		border-radius: 2px;

		&:before {
			top: -2px;
			width: 8px;
			height: 5px;
			border: 2px solid #fff;
			border-top: none;
			border-right: none;
			transform: rotate(-45deg);
		}
	}

	input[type="radio"] {
		border-radius: 100%;

		&:before {
			width: 5px;
			height: 5px;
			background: #fff;
			border-radius: inherit;
		}
	}
}