html {
	max-height: 100vh;
}

#bodyColor {
	background: var(--gray-04);
}

.fs-6 {
	font-size: 0.8rem !important;
}

.video-grid {
	display: flex;
	overflow: hidden;
	position: relative;
	max-height: 80dvh;
}

.loading-svg {
	height: 80px;
	width: 80px;
}

.loading-animation {
  animation: rotation 1s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.userVideoBlackBars {
	width: 100%;
	height: 65vh;
	background-color: var(--black);
	display: flex;
	align-items: center;
	overflow: hidden;
	justify-content: center;
	border-radius: 20px;
}

.userVideoBackground {
	width: 100%;
	height: 65vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	justify-content: center;
	object-fit: cover;
	border-radius: 20px;
}

.userHideVideo {
	display: none;
	width: 100%;
	height: 65vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	justify-content: center;
	border-radius: 20px;
}

#videoContainer {
    position: absolute;
    box-shadow: 0px 4px 8px 0px #00000040;
    border-radius: 15px;
    background: var(--black);
    width: 300px;
    height: 200px;
	inset: auto 25px 25px auto;
}

.popup-msg {
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
	user-select: none;
	text-align: center;
}

#myVideo {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.status-indicators {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 10;
    pointer-events: none;
}

.status-icon {
    border-radius: 50%;
    background: var(--white-transparent);
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 12px;
}

.status-icon svg {
    width: 24px;
    height: 24px;
}

.bottom-right {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.peer-status {
	position: absolute;
	right: 0;
	margin: 25px;
	gap: 8px;
	z-index: 0;
}

.peer-status i {
	display: none;
	background: var(--white-transparent);
	border-radius: 40px;
	padding: 12px;
	z-index: 2;
}

.timer {
	position: absolute;
	color: #fff;
	background-color: var(--white-transparent);
	padding: 12px 16px;
	border-radius: 40px;
	margin: 25px;
	gap: 10px;
	width: 131px;
	user-select: none;
	z-index: 1;
}

.icon-button {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.35em;
	border-radius: 50%;

  &__icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
}
.settingsOption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	gap: 8px;
}

.settingsOption:last-child {
	margin-bottom: 0;
}

#debugMenu {
	display: none;
	position: absolute;
	right: 0;
	padding: 20px;
	width: 300px;
	height: 400px;
	border-radius: 12px;
	background: var(--white);
	margin: 25px;
	box-shadow: 0px 4px 8px 0px #E1E1E140;
}

.debug-timer {
	background: var(--gray-03);
	border-radius: 20px;
	padding: 4px 12px;
	width: 80px;
	display: flex;
	justify-content: center;
}

.debug-table {
	width: 100%;
	border-collapse: collapse;
}

.debug-table td {
	vertical-align: top;
}

.debug-table td:last-child {
	word-break: break-word;
}

.debug-padding {
	margin-bottom: 24px;
}

.debug-content {
	height: 100%;
	overflow-y: scroll;
	padding-right: 10px;
}

.debug-content::-webkit-scrollbar {
	width: 20px;
}

.debug-content::-webkit-scrollbar-track {
	background: var(--gray-04);
}

.debug-content::-webkit-scrollbar-thumb {
	background: transparent;
}

.debug-content::-webkit-scrollbar-button:single-button:vertical:decrement {
	height: 16px;
	background:var(--gray-04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'><path d='M4.26795 1C5.03775 -0.333335 6.96225 -0.333333 7.73205 1L11.1962 7C11.966 8.33333 11.0037 10 9.4641 10H2.5359C0.996296 10 0.0340474 8.33333 0.803848 7L4.26795 1Z' fill='%23B0B2BA'/></svg>") no-repeat center;
	border: none;
	border-radius: 4px 4px 0px 0px;
	margin: 20px 0px;
}

.debug-content::-webkit-scrollbar-button:single-button:vertical:increment {
	height: 16px;
	background:var(--gray-04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'><path d='M4.26795 9C5.03775 10.3333 6.96225 10.3333 7.73205 9L11.1962 3C11.966 1.66667 11.0037 0 9.4641 0H2.5359C0.996296 0 0.0340474 1.66667 0.803848 3L4.26795 9Z' fill='%23B0B2BA'/></svg>") no-repeat center;
	border: none;
	border-radius: 0px 0px 4px 4px;
	margin: 20px 0px;
}

.waiting-message {
	min-height: 65dvh;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	color: var(--gray-02);
}

/* **************** SWITCH ****************** */

.switch {
	--button-width: 2.5em;
	--button-height: 1em;
	--toggle-diameter: 1em;
	--button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
	--toggle-shadow-offset: 10px;
	--toggle-wider: 1.5em;
	--color-grey: #cccccc;
	--color-green: #10ccf4;
}

.slider {
	display: inline-block;
	position: relative;
	width: 56px;
	height: 32px;
	border-radius: 20px;
	background: var(--gray-03);
	padding: 4px 28px 4px 4px;
	transition: 0.3s all ease-in-out;
}

.slider::after {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: #fff;
	border-radius: 50px;
	position: absolute;
	box-shadow: 0px 4px 8px 0px #E1E1E140;
	transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider {
	background-color: var(--primary-blue);
}

.switch input[type="checkbox"]:checked + .slider::after {
	transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
	box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
	display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
	width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
	transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

/* **************** MODAL ****************** */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 999;
}

.modal-inner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 999;
}

.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 1rem;
	border: 1px solid #888;
	border-radius: 4px;
	width: calc(100% - 40px);
	max-width: 500px;
	min-width: 200px;
	animation: modalFadeIn 0.3s ease forwards;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* **************** SLIDER MODAL ****************** */

.popup-container {
	position: relative;
	display: inline-block;
}

.range-slider {
	position: absolute;
	padding: 10px;
	z-index: 999;
	display: none;
	animation: fadeIn 0.5s ease-in-out;
	bottom: calc(100% + 5px);
	left: 50%;
	transform: translateX(-50%);
}

.range-button {
	background: var(--white);
	box-shadow: 0px 4px 8px 0px #CBCBCB40;
	border-radius: 12px;
	padding: 12px 0px 6px 0px;
	width: 65px;
}

.input-range {
	-webkit-appearance: none;
	appearance: none;
	writing-mode: bt-lr;
	height: 160px;
	width: 160px;
	cursor: pointer;
	background: none;
	left: -47px;
	position: relative;
	--val: 100%;
}

.input-range::-webkit-slider-runnable-track {
	height: 8px;
	background: var(--gray-03);
	border-radius: 5px;
	rotate: 270deg;
	background: linear-gradient(
		to right,
		var(--primary-blue) 0%,
		var(--primary-blue) var(--val),
		var(--gray-03) var(--val),
		var(--gray-03) 100%
	);
}

.input-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background: var(--primary-blue);
	border-radius: 50%;
	border: none;
	margin-top: -5px; 
	position: relative;
	z-index: 2;
}

.input-range::-moz-range-track {
	width: 10px;
	background: var(--gray-03);
	border-radius: 5px;
}

.input-range::-moz-range-progress {
	background: var(--primary-blue);
	border-radius: 5px;
}

.input-range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--primary-blue);
	border-radius: 50%;
	border: none;
}

.volume-value {
	display: flex;
	justify-content: center;
	user-select: none;
	margin-bottom: 5px;
}

@keyframes fadeIn {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
}

/* **************** Mobile Toggle ****************** */

.controls-popup {
    display: none;
}

.controls-popup.active {
    display: flex;
	background: var(--white);
	box-shadow: 0px 4px 8px 0px #CBCBCB40;
	padding: 12px 8px;    flex-direction: column;
    padding: 16px 12px;
    position: absolute;
    bottom: calc(100% + 17px);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 12px;
	gap: 8px;
}

.mobile-btn {
	border-radius: 50px;
	background: var(--gray-04);
	padding: 12px;
}

@media (max-width: 1058px) {
	
	.settingsOption {
		margin-bottom: 24px;
	}
	
	.slider {
		width: 39px;
		height: 22px;
		padding: 3px 20px 3px 3px;
	}
	
	.slider::after {	
		width: 16px;
		height: 16px;
	}
	
	.switch input[type="checkbox"]:checked + .slider::after {
		transform: translateX(17px);
	}
}

@media (max-width: 768px) {
	
	.selfview-text {
		font-size: 12px !important;
		line-height: 18px !important;
	}
	
	.userHideVideo {
		height: calc(100vh - 376px);
	}
	
	.userVideoBackground {
		height: 55vh;
	}
	
	.userVideoBlackBars {
		height: calc(100vh - 376px);
	}
	
	.timer {
		width: 115px;
		gap: 6px;
		margin: 15px;
	}
	
	.peer-status {
		margin: 15px;
		gap: 6px;
	}
	
	.peer-status i {
		padding: 10px;
	}
	
	.waiting-message {
		min-height: 55dvh;
	}
	
	.range-button {
		padding: 6px 0px 3px 0px;
		width: 50px;
		height: 160px;
	}
	
	.input-range {
		width: 120px;
		left: -35px;
	}
	
	.input-range::-webkit-slider-thumb {
		width: 12px;
		height: 12px;
		margin-top: -3px;
	}
	
	.input-range::-webkit-slider-runnable-track {
		height: 6px;
	}
	
	.volume-value {
		margin-bottom: -17px;
	}
	
	.status-icon {
		padding: 8px;
	}
	
	.status-icon svg {
		width: 20px;
		height: 20px;
	}
	
	#debugMenu {
		width: 240px;
		height: 360px;
		padding: 16px;
		margin: 15px;
	}
	
	#videoContainer {
		width: 200px;
		height: 150px;
		inset: auto 15px 15px auto;
	}
	
	.debug-timer {
		padding: 4px 8px;
		width: 70px;
	}

	.debug-padding {
		margin-bottom: 20px;
	}
}

@media (max-width: 468px) {
  
  .icon-button {
    width: 2rem;
    height: 2rem;
    padding: 0;
  }
  
}

@media only screen and (max-width: 1216px) and (max-height: 966px) and (orientation: landscape) {
	
	#videoContainer {
		width: 200px;
		height: 150px;
	}

	#debugMenu {
		height: 40vh;
	}

}