.dialog {
	position: absolute;
	width:fit-content;
    background: light-dark(var(--color-light-bg), var(--color-dark-grey));
	padding: 10px 15px;
	border-radius: var(--radius-big);
	box-shadow: var(--shadows);
	z-index:10;

}

.dialog.middle {
	left:unset;
	top:unset;
	bottom:unset;
	right:unset;
	left: 50%;
	top: var(--toolbar-height);
	transform: translate(-50%);
}

/* setting dialog */
.settings {
	/* position: absolute; */
	/* right:var(--toolbar-width);
	bottom:5px; */
	display: grid;
	gap: 2px 5px;
	align-items: center;
	grid-template-columns: 90px 200px 200px;

}

#settingsDialog::after {
	position: absolute;
	bottom:15px;
	right:-20px;
	content: "";
	border: 10px solid transparent;
	border-color: transparent transparent transparent light-dark(var(--color-light-bg), var(--color-dark-grey));
}

#settingsDialog.hidearrow::after {
	display: none;
}

.settings-section {
	margin: 5px 0px 5px 0px;
}

.settings-preview-session {
	grid-column: 3;
	grid-row: span 4;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-self: end;
}

.settings-preview {
	grid-column: 3;
	grid-row: span 4;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-self: end;
}

.videosource {
	width:200px;
	height:165px;
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
	border-radius: var(--radius-big);
	padding-right:10px;
}

.vu-meter {
	position: absolute;
	overflow: hidden;
	right :20px;
	width:10px;
	height:165px;
	background-color: light-dark(var(white), var(--color-mid-grey));
	border-radius: var(--radius-big);
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
	border-left:2px solid light-dark(var(--color-light-bg), var(--color-dark-grey));
}

.meter {	
	--vu: 0;
	position: absolute;
	display: inline-block;
	bottom: 0px;
	width:100%;
	background-color: var(--color-blue);
}

/* History popup */
.history-heading{
		display:inline-block;
		position: absolute;
		left: 5px;
		bottom: 5px;
		padding:10px 20px 20px 20px;
		background: light-dark(var(--color-light-bg), var(--color-dark-grey));
		z-index:12;
		/* padding: 10px 10px; */
		border-top: 2px solid light-dark(var(--color-light-white), var(--color-mid-grey));
}

.history-item{
	display:inline-block;
}

.history-date{
	display:inline-block;
	position: absolute;
	right:0px;
	width:130px;
}

/* sharing dialog */
.sharing {
	position: absolute;
	right:55px;
	top:10px;
	padding:10px;
}

.sharing::after {
	position: absolute;
	top:60px;
	right:-20px;
	content: "";
	border: 10px solid transparent;
	border-color: transparent transparent transparent light-dark(var(--color-light-bg), var(--color-dark-grey));
}

.link, #smartTV{
	position: relative;
	text-align: left;
	margin: 0px;
	padding: 10px;
	border: 0px;
	width: 100%;
	height: fit-content;
	border-radius: var(--radius-big);
	color: light-dark(var(--color-dark-bg), var(--color-light-grey));
	cursor: pointer;
}

.link:active {
	color: light-dark(var(--color-dark-bg), var(--color-light-white));
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}
@media (hover: hover) and (pointer: fine) {
  .link:hover {
	color: light-dark(var(--color-dark-bg), var(--color-light-white));
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
  }
}
.smartTVcode {
	color: light-dark(var(--color-dark-bg), var(--color-light-white));
	font-family: ui-monospace, monospace;
	font-size: 15px;
	letter-spacing: 5px;
}

/* error for devices blocked or mobile browser */
.dialog.error {
	position: absolute;
	display: unset;
	left: 50%;
	top: 10%;
	justify-content:center;
	transform: translate(-50%);
    min-width: fit-content;
    /* max-width: 400px; */
	text-align: center;
    padding: 10px 30px;
    border-radius: var(--radius-big);
    pointer-events: auto;
	background: light-dark(var(--color-light-bg), var(--color-dark-grey));
	box-shadow: var(--shadows);
	z-index:20;
}