/* Описание стилей для встраивания видео с разных площадок */
/* Стиль для контейнера */
.container-wrapper {
	display: flex;
	align-items: center; /* Выравнивание элементов по горизонтали по центру */
	justify-content: center; /* Распределение пространства между элементами по вертикали по центру */
	width: 100%;
	max-width: 35rem; /* Максимальная ширина обертки */
}
/* Устанавливаем отступы справа и слева */
.mr-2 {
	margin-right: 0.5rem;
}
.ml-2 {
	margin-left: 0.5rem;
}
/* Стиль для кастомного элемента выбора с иконкой */
.custom-control-iconSelect {
	position: relative;
	display: block;
	min-height: 1.5rem;
	width: 100%;
}
/* Стиль для скрытого input элемента */
.custom-control-iconSelect .custom-control-input {
	position: absolute;
	left: 0;
	z-index: -1; /* Отправляем input за другие элементы */
	width: 1rem;
	height: 1.25rem;
	opacity: 0; /* Скрываем input */
}
/* Стиль для иконки */
.iconSelect-icon {
	width: 3rem;
	height: 3rem;
}
/* Стиль для SVG иконок */
.custom-control-label svg {
	fill: currentColor;
}
/* Стиль для label при выборе input */
.custom-control-iconSelect .custom-control-input:checked ~ .custom-control-label {
	background: #FF6300;
	color: #fff;
}
/* Стиль для label элемента */
.custom-control-label {
	display: inline-block;
	position: relative;
	margin-bottom: 0;
	vertical-align: top;
	background-color: #eee;
	width: 100%;
	text-align: center;
	border-radius: 0.2rem;
	padding: 1rem 0 1rem;
	font-size: 1.4rem;
	transition: background-color 0.1s linear, color 0.1s linear; /* Анимация изменения цвета фона и текста */
}
/* Стиль для label при наведении */
.custom-control-label:hover {
	background-color: #ccc;
}
/* Стиль для иконки после выбора input */
.custom-control-input:checked ~ .custom-control-label::before {
	color: #fff;
	border-color: #007bff;
	background-color: #007bff;
	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");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 70% 70%;
}

.video-container {
	max-width: 800px;
	margin: 20px auto;
	position: relative;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* соотношение 16:9 */
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-selector {
	margin-bottom: 20px;
}

.video-selector label {
	margin-right: 10px;
}