/** @format */
.videos_wrapper {
	color: var(--text-color-black);
	margin-top: 20px;
	/* background-color: #888; */
}

.videos_container {
	display: flex;
	justify-content: left;
	align-items: center;
	margin: 20px;
	box-shadow: var(--shadow);
	border-radius: 10px;
	font-weight: bold;
	padding: 10px;
}

.navigation {
	height: 50px;
	/* box-shadow: var(--shadow); */
	/* background-color: var(--background-color-light); */
	width: 90%;
	margin: auto;
}

.info_talent {
	width: 10%;
}

.video-cont {
	position: relative;

	padding-bottom: 56.25%;
	width: 100%;
	height: 0;
}

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

.video_file {
	height: 100px;
	width: 180px;
	display: flex;
	justify-content: center;
	align-items: center;
	/* border: 3px var(--primary-color) solid; */
	background-color: black;
}

.video_file video {
	height: 100%;
	margin: auto;
}

.video_file img {
	height: 100px;
	width: 180px;
}

.video_window {
	/* border: 3px var(--primary-color) solid; */
	width: 100%;
}

.video_player {
	width: 100%;
	background-color: black;
	display: flex;
	justify-content: center;
	align-items: center;
}

.video_player video {
	max-width: 100%;
	min-height: 40vh;
	max-height: 80vh;
}

.play_buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--primary-color);
	padding: 20px 0;
}

.video_title {
	background-color: var(--primary-color);
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	padding: 20px;
	font-weight: bolder;
}

.play_buttons button {
	outline: none;
	border: none;
	padding: 10px 20px;
	color: var(--text-color);
	background-color: transparent;
	margin: 0 20px;
	cursor: pointer;
}

.wrapper {
	display: flex;
	justify-content: center;
	background-color: var(--background-color-Transparant);
	;
	min-height: 60vh;
}

.uplaod_date {
	margin-left: 20%;
	width: 20%;
	background-color: var(--background-color-Transparant);
	text-align: right;
}

.talent_name {
	width: 30%;
	margin-left: 10px;
}

.video_side_and_comments {
	width: 60%;
}

.talent_name p:nth-child(1),
.contestant_number {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	color: rgb(38, 69, 105);
	font-weight: bolder;
}

.talent_name p:nth-child(2),
.talent_name p:nth-child(5),
.talent_name p:nth-child(4),
.talent_name p:nth-child(3) {
	font-size: small;
	color: rgb(38, 69, 105);
	font-weight: bold;
}

.video_home_wrapper {
	height: 800px;
	overflow: hidden;
	scroll-behavior: smooth;
	overflow-y: scroll;
}

.video_home_wrapper::-webkit-scrollbar {
	width: 8px;
}

.video_home_wrapper::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}

.video_home_wrapper::-webkit-scrollbar-thumb {
	background-color: #888;
	border-radius: 4px;
}

.video_home_wrapper::-webkit-scrollbar-thumb:hover {
	background-color: #55555531;
}

.comments_wrapper {
	min-height: 400px;
	background-color: #d6d6d62f;
	padding: 20px;
	/* margin-top: 50px; */
}

.comments_form {
	background-color: white;
	border-radius: 20px;
	padding: 20px;
	display: none;
}

.comment_input {
	border: none;
	outline: none;
	width: 90%;
	margin: 10px auto;
	padding: 10px;
	font-size: medium;
}

.comment_submit {
	border: none;
	outline: none;
	background-color: var(--text-color);
	padding: 5px 25px;
	border-radius: 10px;
	/* cursor: pointer; */
	color: white;
}

.emojis_and_stuff {
	position: relative;
	display: flex;
	justify-content: space-between;
}

.emoji-grid {
	position: absolute;

	transform: scaleY(0);
	display: grid;
	grid-template-columns: repeat(10,
			1fr);
	/* Adjust the number of columns as needed */
	gap: 10px;
	/* Adjust the gap between emojis */
	margin-bottom: 20px;
	transition: 0.5s;
	background-color: white;
	padding: 20px;
}

.emoji {
	font-size: 24px;
	/* Adjust the font size as needed */
	cursor: pointer;
}

.emoji_dis {
	cursor: pointer;
}

.see_comments {
	color: rgb(65, 125, 255);
	font-weight: bold;
	margin-top: 10px;
	display: flex;
	align-items: center;
}

.see_comments p {
	display: flex;
	align-items: center;
}

.see_comments p span {
	font-size: medium;
}

.comments_from {
	color: rgb(38, 69, 105);
	font-weight: bold;
	margin-top: 10px;
}

.name_date {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	font-weight: bold;
}

.comment_text {
	background-color: rgb(243, 242, 242);
	padding: 10px;
	border-radius: 5px;
}

.name_date {
	font-size: small;
}

@media screen and (max-width: 756px) {
	.wrapper {
		display: block;
	}

	/* .entry_header {
		width: 92vw;
	} */
	.navigation {
		width: 100%;
	}

	.video_side_and_comments {
		width: 98vw;
	}

	.video_wrapper {
		width: 98vw;
	}

	.video_file {
		display: flex;
		justify-content: center;
		align-items: center;
		/* border: 3px var(--primary-color) solid; */
		background-color: black;
	}

	.talent_name {
		width: 70%;
	}

	.video_side_and_comments {
		width: 100%;
	}

	.video_player video {
		max-width: 100%;
		min-height: 20vh;
		max-height: 80vh;
	}

	.videos_container {
		display: flex;
		justify-content: left;
		align-items: center;
		margin: 10px 0px;
		box-shadow: var(--shadow);
		border-radius: 10px;
		font-weight: bold;
		padding: 5px;
		width: 95vw;
	}

	.comments_wrapper {
		min-height: 100px;
		background-color: #d6d6d62f;
		padding: 15px 0;
		/* margin-top: 50px; */
	}

	.emoji-grid {
		left: -20px;
		grid-template-columns: repeat(5,
				1fr);
		/* Adjust the number of columns as needed */
	}
}