@import url("https://fonts.googleapis.com/css?family=Roboto:&display=swap");
@import url("https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@100;500&family=Yantramanav&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap");

:root {
	--DARK: #000;
	--DARK-BG: #000;
	--LIGHT-BG: #c5c5c5;
	--LIGHT: #d2d2d2;
	--light-color: #e6e9ff;
	--success-color: #5cb85c;
	--error-color: #d9534f;

	/* --SECONDARY: #34afa3; */
	--SECONDARY: #ff9a6d;
	/* --PRIMARY: #b53e2b; */
	--PRIMARY-LIGHT: #f74c31;
	/* --PRIMARY-DARK: #654eff; */
	--PRIMARY-DARK: #005633;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	overflow: hidden;
}

body {
	font-family: "Yantramanav", sans-serif;
	font-size: 16px;
	margin: 0;
	height: 100%;
	overflow-x: hidden;
}

body.dark {
	background: #000;
	/* background: radial-gradient(circle, rgb(21 21 33) 27%, rgb(4 4 4) 100%); */
}

#overlay {
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: #000;
	transition: 1s 0.4s;
}

#progress {
	height: 1px;
	background: var(--PRIMARY-DARK);
	position: absolute;
	width: 0;
	top: 50%;
}

#progstat {
	font-size: 0.7em;
	letter-spacing: 3px;
	position: absolute;
	top: 50%;
	margin-top: -40px;
	width: 100%;
	text-align: center;
	color: var(--PRIMARY-DARK);
}

body.light {
	background: var(--LIGHT-BG);
}

.join-video {
	object-fit: contain;
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
}

.video-logo {
	height: 60px;
	width: 100%;
}

.chat-video {
	object-fit: cover;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
	top: 0;
	
}

@media screen and (min-width:992px) {
	.chat-video {

	width: 500px;

	
}
}

h1 {
	font-family: "East Sea Dokdo", cursive;
	font-size: 3rem;
	/* text-transform: uppercase; */
	height: 50px;
	line-height: 45px;
}

svg {
	position: absolute;
	top: 0;
	left: 0;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

.active-user {
	color: #199f68 !important;
}

.btn {
	cursor: pointer;
	padding: 10px 15px;
	color: #eee;
	border: 0;
	font-size: 17px;
	/* border: solid 1px var(--PRIMARY); */
	border-radius: 5px;
	transition-duration: 0.1s;
	/* border-top-left-radius: 0px;
	border-bottom-left-radius: 0px; */
	transition-duration: 0.3s;
}

.dark .btn {
	background-color: #000;
	border:solid 1px var(--PRIMARY-DARK);
}

.light .btn {
	background: var(--PRIMARY-LIGHT);
}

.btn--submit {
	/* width: 170px; */
}

.btn--drink {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.logout-btn {
	filter: brightness(160%);
	color: #c5c5c562;
	display: flex;
	align-items: center;
	transition-duration: 0.1s;
	font-size: 1rem;
}

.logout-btn i {
	padding-left: 10px;
}

.dark .logout-btn:hover {
	/* filter: brightness(120%); */
	color: var(--PRIMARY-DARK);
}

.light .logout-btn:hover {
	color: var(--PRIMARY-LIGHT);
}

.btn:hover {
	/* background-image: url('/img/waves.gif'); */
	background-size: contain;
	background-position: -305px;
	border: 1px solid  #199f68;
	/* color: var(--PRIMARY-DARK); */
		box-shadow: 0px 0px 10px var(--PRIMARY-DARK);

	
	/* transform: scale(0.95); */
}
 
/* Custom */

.l-container {
	max-width: 650px;
	margin: 0 auto;
}

.bubbly-button {
	font-family: "Helvetica", "Arial", sans-serif;
	display: inline-block;
	font-size: 1em;
	padding: 1em 2em;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--PRIMARY-DARK);
	color: #fff;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	position: relative;
	transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
	/* box-shadow: 0 2px 25px rgba(0, 255, 136, 0.5); */
}
.bubbly-button:focus {
	outline: 0;
}
.bubbly-button:before,
.bubbly-button:after {
	position: absolute;
	content: "";
	display: block;
	width: 140%;
	height: 100%;
	left: -20%;
	z-index: -1000;
	transition: all ease-in-out 0.5s;
	background-repeat: no-repeat;
}
.bubbly-button:before {
	display: none;
	top: -75%;
	background-image: radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, transparent 20%, var(--PRIMARY-DARK) 20%, transparent 30%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, transparent 10%, var(--PRIMARY-DARK) 15%, transparent 20%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.bubbly-button:after {
	display: none;
	bottom: -75%;
	background-image: radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, transparent 10%, var(--PRIMARY-DARK) 15%, transparent 20%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%),
		radial-gradient(circle, var(--PRIMARY-DARK) 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.bubbly-button:active {
	transform: scale(0.9);
	background-color: var(--PRIMARY-DARK);
}
.bubbly-button.animate:before {
	display: block;
	animation: topBubbles ease-in-out 0.75s forwards;
}
.bubbly-button.animate:after {
	display: block;
	animation: bottomBubbles ease-in-out 0.75s forwards;
}

@keyframes topBubbles {
	0% {
		background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
@keyframes bottomBubbles {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}

.u-opac-0 {
	opacity: 0;
	pointer-events: none;
}

.u-opac-1 {
	opacity: 1 !important;
}

.js-restart-check {
	color: var(--error-color) !important;
}

.u-btn-disabled {
	background-color: rgb(126, 126, 126) !important;
	pointer-events: none;
}

.chat-wrapper {
	justify-content: space-between;
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	z-index: 100;
	/* top: 50%;
	transform: translateY(-50%); */
	width: 100%;

	/* border: solid 1px #0e6743; */
	border-left: none;
	border-right: none;
}



@media screen and (min-width: 992px) {
	.chat-flex {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
	}
}

.youtube-container {
	width: 100%;
	height: 500px;
	padding: 15px;
	position: relative;
	border-radius: 10px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.dark .youtube-container {
	background: var(--DARK);
}

.light .youtube-container {
	background: var(--LIGHT);
}

iframe {
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 10;
	pointer-events: none;
	border-radius: 10px;
}


.youtube-hide-vol {
	width: 30px;
	height: 30px;
	background-color: #000;
	position: absolute;
	bottom: 20px;
	left: 30px;
	z-index: 100;
}

.youtube-controls {
	color: #c5c5c5;
	bottom: 0;
	left: 0;
	padding: 20px 0px;
	z-index: 10;
	justify-content: left;
	/* width: 98%; */
	margin: 0 auto;
	border-radius: 10px;
	margin: 20px 50px;
	position: relative;
	text-align: center;
	border: 1px solid var(--PRIMARY-DARK);
}

.dark .youtube-controls {
	background-color: var(--DARK);
}

.light .youtube-controls {
	background-color: var(--LIGHT);
}

/* .dark .youtube-controls {
    background: var(--PRIMARY-DARK);
}

.light .youtube-controls {
    background: var(--PRIMARY-LIGHT);
} */

.youtube-controls__btn {
	padding: 10px 20px;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	color: #b9b9b9;
	border: none;
	cursor: pointer;
	font-size: 1.2rem;
	transition-duration: 0.3s;
	margin: 10px;
}

.youtube-controls__btn--disabled {
	background-color: rgb(126, 126, 126);
	pointer-events: none;
}

.youtube-controls__btn--share {
	display: inline-block;
	width: 100%;
	text-align: center;
}

.youtube-controls__volume {
	width: 100%;
	filter: hue-rotate(-55deg) brightness(0.6);
	margin-top: 10px;
}

.share-link-icon {
	padding-left: 10px;
}

.youtube-controls__volume-btn {
	margin-left: 10px;
	padding: 0 20px;
	border: none;
	border-radius: 3px;
	color: #c5c5c5;
	background-color: var(--PRIMARY-DARK);
	cursor: pointer;
	font-size: 1rem;
	transition-duration: 0.3s;
}

.youtube-controls__volume-btn:hover {
	color: var(--DARK);
}

.youtube-controls__btn:hover {
	background-color: #121212;
	/* transform:  translateX(2px) translateY(-2px); */
}

.dark .youtube-controls__btn:hover,
.dark .youtube-controls__btn--active {
	filter: brightness(160%);
	color: var(--PRIMARY-DARK);
	/* transform:  translateX(2px) translateY(-2px); */
}

.light .youtube-controls__btn:hover {
	color: var(--PRIMARY-LIGHT);

	/* transform:  translateX(2px) translateY(-2px); */
}

.checkbox-text {
	color: var(--light-color);
	user-select: none;
}

.text {
	word-break: break-word;
}

.dark .text {
	color: #919191;
}

.light .text {
	color: #a03e2e;
}

#count_num {
	color: var(--PRIMARY-DARK);
	font-size: 10rem;
	position: fixed;
	text-align: center;
	width: 100%;
	top: 0;
	height: 100%;
	display: none;
	transition-duration: 0.3s;
	opacity: 0;
	justify-content: center;
	align-items: center;
	z-index: 100000;
	background: #000000b8;
	font-weight: 100;
}

.active-count {
	display: flex !important;
	opacity: 1 !important;
}

.version {
	color: var(--PRIMARY-DARK);
	position: absolute;
	bottom: 10px;
	right: 20px;
	font-size: 0.8rem;
	display: none;
}

/* Check box style */

/* Customize the label (the container) */
.checkbox__container {
	padding: 10px 20px;
	background-color: var(--PRIMARY-DARK);
	border-radius: 3px;
	color: #b9b9b9;
	/* font-weight: bold; */
	letter-spacing: 1px;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	transition-duration: 0.3s;
	user-select: none;
	display: inline-block;
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

.checkbox__container--restart {
	display: none !important;
}

.dark .checkbox__container:hover,
.dark .checkbox__container--active {
	filter: brightness(160%);
	color: var(--PRIMARY-DARK);
	background-color: rgba(0, 0, 0, 0.3);
}

.light .checkbox__container:hover {
	color: var(--PRIMARY-LIGHT);
}

/* Hide the browser's default checkbox */
.checkbox__container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 9px;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: var(--DARK-BG);
	border-radius: 100%;
	transition-duration: 0.3s;
	display: none;
}

/* On mouse-over, add a grey background color */
.checkbox__container:hover input ~ .checkmark {
	transform: scale(0.9);
}

/* When the checkbox is checked, add a blue background */
.checkbox__container input:checked ~ .checkmark {
	background-color: var(--DARK);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkbox__container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.checkbox__container .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid var(--PRIMARY-DARK);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Chat Page */
.chat-container {
	width: 100%;
	overflow: hidden;
	height: 100%;
	padding: 0 10px;
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}

.chat-header {
	color: var(--PRIMARY);
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
	z-index: 100;
	padding: 0 10px;
	height: 10vh;
	flex-direction: column;
	/* border-bottom: 1px solid var(--PRIMARY-DARK); */
}

@media screen and (min-width: 992px) {
	.chat-header {
		flex-direction: row;
	}
}

.chat-header h1 {
	letter-spacing: -3px;
	font-weight: 100;
	font-size: 2rem;
}

.dark .chat-header h1 {
	/* filter: brightness(160%); */
	color: var(--PRIMARY-DARK);
}

.light .chat-header h1 {
	color: var(--PRIMARY-LIGHT);
}

.chat-header i {
	font-size: 1.2rem;
}

.chat-main {
	position: absolute;
	grid-template-columns: 1fr;
	height: calc(100% - 65px);
	background: none;
	border-top-right-radius: 20px;
	overflow: hidden;
	border-bottom-right-radius: 20px;
	opacity: 0;
}

.chat-sidebar {
	color: var(--light-color);
	overflow-y: scroll;
	min-width: 200px;
	/* width: 100%; */
	position: relative;
	padding: 0 20px 20px;
}

.dark .chat-sidebar {
	
}

.light .chat-sidebar {
	background: var(--LIGHT);
}

.chat-sidebar::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.chat-sidebar::-webkit-scrollbar-track {
	background: var(--DARK-BG);
}

/* Handle */
.chat-sidebar::-webkit-scrollbar-thumb {
	background: var(--PRIMARY);
}

/* Handle on hover */
.chat-sidebar::-webkit-scrollbar-thumb:hover {
	background: var(--PRIMARY-DARK);
}

.chat-sidebar h2 {
	font-size: 20px;
	background: none;
	padding: 10px;
	margin-bottom: 20px;
}

.chat-sidebar h3 {
	margin-bottom: 8px;
}

.dark .chat-sidebar h3 {
	color: var(--PRIMARY-DARK);
}

.light .chat-sidebar h3 {
	color: var(--PRIMARY-LIGHT);
}

.chat-sidebar ul li {
	font-size: 1rem;
	padding: 10px 0;
	float: left;
	margin-right: 50px;
	position: relative;
}

.dark .chat-sidebar ul li {
	color: #c5c5c5;
}

.light .chat-sidebar ul li {
	color: var(--PRIMARY-LIGHT);
}

.chat-sidebar ul li i {
	position: absolute;
	right: -20px;
	padding-top: 3px;
	margin-left: 10px;
}

.dark .chat-sidebar ul li i {
	color: var(--PRIMARY-DARK);
}

.light .chat-sidebar ul li i {
	color: var(--PRIMARY-LIGHT);
}

.chat-messages {
	margin: 30px 0;
	max-height: 100%;
	overflow-y: scroll;
	width: 100%;
}

.dark .chat-messages {
	background: var(--DARK);
}

.light .chat-messages {
	background: var(--LIGHT);
}

.chat-messages::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.chat-messages::-webkit-scrollbar-track {
	background: var(--DARK-BG);
}

/* Handle */
.chat-messages::-webkit-scrollbar-thumb {
	background: var(--PRIMARY);
}

/* Handle on hover */
.chat-messages::-webkit-scrollbar-thumb:hover {
	background: var(--PRIMARY-DARK);
}

.chat-messages .message {
	padding: 10px;
	margin-bottom: 15px;
	background-color: none;
	border-radius: 5px;
	font-size: 0.9rem;
}

.chat-messages .message .meta {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 7px;
	position: relative;
}

.dark .chat-messages .message .meta {
	color: var(--PRIMARY-DARK);
}

.light .chat-messages .message .meta {
	color: var(--PRIMARY-LIGHT);
}

.chat-messages .message .meta span {
	position: absolute;
	right: 0;
}

.dark .chat-messages .message .meta span {
	color: var(--PRIMARY-DARK);
}

.light .chat-messages .message .meta span {
	color: var(--PRIMARY-LIGHT);
}

.chat-form-container {
	padding: 15px 0 0;
	background-color: none;
}

.chat-form-container form {
	display: flex;
	justify-content: space-between;
}

.chat-form-container input[type="text"] {
	font-size: 16px;
	padding: 20px 20px 20px 5px;
	height: 40px;
	flex: 1;
	border: none;
	color: var(--light-color);
	outline: none;
	transition-duration: 0.1s;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	padding: 20px;
	border: 1px solid var(--PRIMARY-DARK);
}

.dark .chat-form-container input[type="text"] {
	background: var(--DARK);
}

.light .chat-form-container input[type="text"] {
	background: var(--LIGHT);
}

.dark .chat-form-container input[type="text"]:valid {
	border-bottom: 1px solid var(--PRIMARY-DARK);
	color: #199f68;
}

.light .chat-form-container input[type="text"]:valid {
	border-bottom: 1px solid var(--PRIMARY-LIGHT);
	color: var(--PRIMARY-LIGHT);
}

.dark .chat-form-container input::placeholder {
	color: #199f68;
}

.light .chat-form-container input::placeholder {
	color: var(--PRIMARY-LIGHT);
}

.chat-form-container input:focus::placeholder {
	visibility: hidden;
}

/* Join Page */

.join-wrapper {
	justify-content: space-between;
	height: 100%;
}

.join-container {
	color: var(--light-color);
	padding: 50px;
}

.dark .join-container {
	background-color: var(--DARK);
}

.light .join-container {
	background-color: var(--PRIMARY-LIGHT);
}

.join-welcome {
	font-size: 5rem;
	font-weight: bold;
	text-transform: uppercase;
	align-items: center;
	/* padding: 50px; */
	background: url("../img/neon.mov");
	background-repeat: no-repeat;
	background-size: cover;
}

.dark .join-welcome {
	color: var(--PRIMARY-DARK);
}

.light .join-welcome {
	color: var(--PRIMARY-LIGHT);
}

.join-header {
	text-align: left;
	padding: 30px 50px;
	background: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	z-index: 100;
	position: absolute;
	width: 100%;
}

.join-header h1 {
	font-size: 1.5rem;
	color: #fff;
	text-transform: lowercase;
	letter-spacing: 3px;
	font-weight: 100;
}

.join-main {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom: 0;
	position: relative;
	z-index: 100;
	align-items: center;
	width: 100%;
}

.join-main form {
	width: 100%;
	max-width: 100%;
}

.join-main p {
	margin-bottom: 20px;
}

.join-main .form-control {
	margin-bottom: 20px;
}

.join-main label {
	display: block;
	margin-bottom: 10px;
	color: var(--PRIMARY-DARK);
}

.join-main input[type="text"] {
	font-size: 16px;
	padding: 5px;
	height: 60px;
	width: 100%;
	background: none;
	border: none;
	color: #c5c5c5;
	outline: none;
	padding: 20px;
	border-radius: 8px;
	background-color: #000;
	border: 1px solid var(--PRIMARY-DARK);
}



.join-main input[type="text"]:valid {
	border-bottom: 2px solid #199f68;
	color: #eee;
	box-shadow: 0 0 10px var(--PRIMARY-DARK);
	
}

.join-main input[type="text"]:focus {
	box-shadow: 0 0 10px var(--PRIMARY-DARK);
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	-webkit-text-fill-color: #199f68;
	transition: background-color 5000s ease-in-out 0s;
	border-bottom: 1px solid #199f68;
}

.join-main input[type="text"]::placeholder {
	color: #666666;
}

.join-main select {
	font-size: 16px;
	padding: 10px;
	width: 100%;
	background: none;
	border: none;
	color: #c5c5c5;
	outline: none;
	background-color: #000;
	border: 1px solid var(--PRIMARY-DARK);
	border-radius: 8px;
}

.join-main select option {
	border: 0 !important;
	padding: 10px !important;
	background: #101019 !important;
}

.join-main .btn {
	margin-top: 20px;
	width: 100%;
	padding: 20px;
}

@media screen and (min-width: 992px) {
	.video-logo {
		height: auto;
		
		/* display: flex; */
		width: 100%;
	}

	.chat-video {
		object-fit: cover;
		/* width: 600px; */
		height: 100%;
		/* margin: 0 auto; */
		position: relative;
		top: 0;
		left: -120px;
	}

	.l-container {
		max-width: 100%;
	}

	#count_num {
		font-size: 24.5rem;
	}
	/* JOIN */
	.join-wrapper {
		display: flex;
	}

	.join-welcome {
		display: flex;
		width: 70%;
		justify-content: flex-end;
	}

	.join-container {
		height: 100%;
		width: 50%;
	}

	.join-main {
		height: 100%;
		display: flex;
	}

	.join-main form {
		width: 400px;
	}

	.chat-header {
		padding: 0 50px;
	}

	.chat-header h1 {
		font-size: 3rem;
	}
	/* CHAT */
	.chat-sidebar {
		padding: 20px 0px 60px 20px;
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
	}

	.chat-sidebar h3 {
		margin-bottom: 10px;
	}

	.chat-sidebar ul li {
		float: none;
		margin-right: 0;
		padding-left: 20px;
	}

	.chat-sidebar ul li i {
		right: auto;
		left: -13px;
	}

	.youtube-container {
		height: 100%;
		border-right: none;
	}

	.chat-messages {
		padding: 30px;
		margin: 0;
	}

	.chat-container {
		width: 750px;
		display: block;
		border-left: none;
		padding: 0 0 0 30px;
		/* border-top-right-radius: 20px; */
		/* border-bottom-right-radius: 20px; */
	}

	.chat-main {
		display: grid;
		position: relative;
		opacity: 1;
	}

	.chat-wrapper {
		margin: 0 auto;
		padding: 20px;
		height: 70vh;
		flex-direction: unset;
		/* width: 90%; */
	padding: 50px;}

	.youtube-controls {
		display: flex;
	}

	.youtube-controls__btn {
		margin: 0 0 0 20px;
		width: auto;
	}

	.youtube-controls__volume {
		margin-left: 10px;
		margin-top: 0;
		width: auto;
	}

	.checkbox__container {
		margin: 0 0 0 20px;
		display: flex;
		align-items: center;
		width: auto;
	}
}

@media (min-width: 1250px) {
	.chat-sidebar {
		overflow-y: hidden;
		width: 150px;
		overflow: visible;
		max-height: 100%;
	}
}