/* для элемента input c type="checkbox" */
.checkbox-styled>input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

/* для элемента label, связанного с .checkbox-styled */
.checkbox-styled>span {
	user-select: none;
}

/* создание в label псевдоэлемента before со следующими стилями */
.checkbox-styled>span::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 1px solid #adb5bd;
	border-radius: 0.25em;
	margin-right: 0.5em;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50% 50%;
}

/* стили при наведении курсора на checkbox */
.checkbox-styled>input:not(:disabled ):not(:checked )+span:hover::before {
	border-color: rgba(223, 107, 124, 0.5);
}

/* стили для активного чекбокса (при нажатии на него) */
.checkbox-styled>input:not(:disabled ):active+span::before {
	background-color: rgba(223, 107, 124, 0.5);
	border-color: rgba(223, 107, 124, 0.5);
}

/* стили для чекбокса, находящегося в фокусе */
.checkbox-styled>input:focus+span::before {
	box-shadow: 0 0 0 0.2rem rgba(223, 107, 124, 0.35);
}

/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.checkbox-styled>input:focus:not(:checked )+span::before {
	border-color: #80bdff;
}

/* стили для чекбокса, находящегося в состоянии checked */
.checkbox-styled>input:checked+span::before {
	border-color: #df6b7c;
	background-color: #df6b7c;
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/* стили для чекбокса, находящегося в состоянии disabled */
.checkbox-styled>input:disabled+span::before {
	background-color: #e9ecef;
}

/* для элемента input c type="radio" */
.radio-styled>input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

/* для элемента label связанного с .radio-styled */
.radio-styled>span {
	user-select: none;
}

/* создание в label псевдоэлемента  before со следующими стилями */
.radio-styled>span::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 1px solid #adb5bd;
	border-radius: 50%;
	margin-right: 0.5em;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50% 50%;
}

/* стили при наведении курсора на радио */
.radio-styled>input:not(:disabled ):not(:checked )+span:hover::before
	{
	border-color: #b3d7ff;
}

/* стили для активной радиокнопки (при нажатии на неё) */
.radio-styled>input:not(:disabled ):active+span::before {
	background-color: rgba(223, 107, 124, 0.5);
	border-color: rgba(223, 107, 124, 0.5);
}

/* стили для радиокнопки, находящейся в фокусе */
.radio-styled>input:focus+span::before {
	box-shadow: 0 0 0 0.2rem rgba(223, 107, 124, 0.35);
}

/* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
.radio-styled>input:focus:not(:checked )+span::before {
	border-color: #80bdff;
}

/* стили для радиокнопки, находящейся в состоянии checked */
.radio-styled>input:checked+span::before {
	border-color: #df6b7c;
	background-color: #df6b7c;
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* стили для радиокнопки, находящейся в состоянии disabled */
.radio-styled>input:disabled+span::before {
	background-color: #e9ecef;
}

.radio label.radio-styled {
	padding-left: 0px;
}

.checkbox label.checkbox-styled {
	padding-left: 0px;
}

label.radio-styled {
	padding-left: 0px;
}

label.checkbox-styled {
	padding-left: 0px;
}