@font-face {
	font-family:"std";
	src:url("./adobe-clean-400.woff") format('woff2');
	font-style:normal;
	font-weight:400;
}
@font-face {
	font-family:"bold";
	src:url("./adobe-clean-700.woff") format('woff2');
	font-style:normal;
	font-weight:700;
}
@font-face {
	font-family:"alert";
	src:url("./SourceCodePro-Regular.woff") format('woff2');
	font-style:normal;
	font-weight:400;
}
body {
	--bg:#1d1d1d;
	--bgDark: #101010;
	--bgLight: #333333;
	--input: #212324; /*#232323 #363636 #313131;*/
	--txt: #ffffff;
	--value: #8e8e8e;
	--alert: #f26600;
	--confirm: #A981DB; /*2695cf*/
	--error: #B53838; /*b24e4e*/
	user-select: none !important;
	cursor: default;
	font-family: "std", "LucidaGrande", sans-serif;
	font-size: 12px;
	line-height: 20px;
	text-indent: 2px;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	color: var(--txt);
	background-color: var(--bg);
}
a {
	text-decoration: none;
	color: var(--txt);
}
div {
	margin: 0px;
	padding: 0px;
	justify-content: center;
}
img {
	width: 26px;
	height: 26px;
}
input[type="text"], input[type="number"], .text {
	font-family: "alert";
	font-size: 10px;
	flex-grow: 1;
	text-indent: 2px;
	color: var(--txt);
	background-color: var(--bgDark);
	outline: none;
	border: 1px solid var(--bgLight);
	border-radius: 2px;
	height: 20px;
}
/* input[type="number"] arrows*/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	outline: none;
}
.disable {
	opacity: 0.33;
}
.grp {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin: 2px;
	gap: 0px;
	height: auto;
}
.btn {
	flex-grow: 0;
	flex-shrink: 0;
	align-items: center;
	position: relative;
	width: 22px;
	height: 22px;
	opacity: .8;
	margin: 4px 0px;
}
.btn:hover {
	opacity: 1;
}
.btn:active {
	transform: translate(0px, 1.5px);
}
.tool::after {
	content: "";
	position: absolute;
	right: 0%;
	bottom: 0%;
	width: 26%;
	height: 26%;
	clip-path: shape(from 100% 0%,line to 100% 100%,line to 0% 100%,line to 100% 0%,close);
	background: var(--value);
}
.confirm {
	font-family: "alert", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', monospace;
	display: flex;
	flex-direction: row;
	line-height: 24px;
	margin: 12px 4px 2px 4px;
	padding: 0px 8px;
	align-items: flex-start;
	justify-content: center;
	width: auto;
	height: auto;
	float: left;
	left: 25%;
	color: var(--txt);
	background-color: var(--bgDark);
	border: 3px solid var(--confirm);
	border-radius: 22px;
}
#error {
	font-family: "alert", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', monospace;
	display: flex;
	flex-direction:row-reverse;
	margin: 2px 4px;
	padding: 0px 12px 0px 6px;
	align-items:center;
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0,0,0,0.86);
	border: 3px solid transparent;
	border-radius: 22px;
	z-index: 99999;
}
.alert {
	clip-path: shape(from 97.5% 100%,curve to 99.7% 95.7% with 100.9% 100%,line to 52% 1.7%,curve to 49.2% 0.3% with 50.6% -0.8%,line to 48% 1.7%,line to 0.2% 95.7%,curve to 2% 100% with -0.6% 100%,line to 97.5% 100%,move to 49.9% 25.7%,curve to 57% 33.5% with 57% 26%,line to 57% 60.6%,curve to 49.9% 68.7% with 57% 68%,curve to 42.5% 60.6% with 42.5% 68.7%,line to 42.5% 33.5%,curve to 49.9% 25.7% with 42.5% 25.5%,move to 42.8% 82.7%,curve to 49.7% 74.6% with 42.5% 74.6%,curve to 56.6% 82.7% with 56.8% 74.6%,curve to 49.7% 90.8% with 56.1% 90.8%,curve to 42.8% 82.7% with 43% 90.8%,close);
}
.complete {
	clip-path: shape(from 87.7% 15.6%,curve to 50.1% 0% with 73.7% 0%,curve to 12.6% 15.6% with 26.6% 0%,curve to 0% 50% with 0% 29.7%,curve to 12.6% 84.4% with 0% 70.3%,curve to 50.4% 100% with 26.3% 100%,curve to 87.4% 84.4% with 73.7% 100%,curve to 100% 50% with 100% 70.3%,curve to 87.7% 15.6% with 100% 29.7%,move to 69.5% 29.2%,curve to 78.2% 25.8% with 74.8% 23.3%,curve to 86.8% 38% with 88.8% 33.9%,curve to 62.2% 62.8% with 85.4% 41.1%,curve to 44% 80.6% with 52.4% 72%,curve to 35.9% 79.2% with 40% 83.6%,curve to 15.7% 57.8% with 16.5% 58.9%,curve to 20.5% 49.4% with 14% 54.7%,curve to 30.3% 45.8% with 28% 43%,curve to 41.2% 57.8% with 38.1% 55.8%,curve to 69.5% 29.2% with 53.5% 46.7%,close)
}

.scroll {
	overflow-y: auto;
	overflow-x: hidden;
}
div::-webkit-scrollbar {
	height: 8px;
	width: 8px;
	background-color: transparent;
}
div::-webkit-scrollbar-thumb {
	min-height: 36px;
	border: 2px solid var(--bg);
	border-radius: 11px;
	background-color: var(--bgLight);
}
div::-webkit-scrollbar-corner {
	background-color: transparent;
}

.radio {
    position: relative;
    width: 16px;
    height: 16px;
    margin: 10px, 10px;
    background-color: var(--bg);
    border: 2px solid var(--txt);
    border-radius: 100%;
}
.radio:hover {
    border-color: var(--value);
}
.radioActive {
	background-color: var(--confirm);
	border-color: var(--txt);
	outline: 2px solid var(--bg);
	outline-offset: -4px;
}
.title {
	filter: grayscale(100%);
	display: flex;
	flex-direction: row;
	align-items: center;
	/* justify-content: left; */
	width: auto;
}
.title:hover {
	background-color: transparent;
	border-color: transparent;
}
.titleShare {
	font-size: 22px;
	padding: calc(1vh) 0px;
}
.video {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0vh auto 0px auto;
	width: calc(99%);
	height: calc(100vh - 54px);
	min-width: calc(20%);
	min-height: calc(20vh);
	background-color: var(--bgDark);
	border: 2px solid var(--bgLight);
	border-radius: 8px;
	box-shadow: 0px 0px 4px 3px rgba(0,0,0,0.16);
	z-index: 999;
}
.info {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
	margin: .2vh auto 2px auto;
	padding: 0px 8px;
	gap: 2px;
	width: calc(40%);
	min-width: 480px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--bgDark);
	border-radius: 10px;
	border: 1px solid var(--bgLight);
}
#share {
	z-index: 2001;
	position: fixed;
	inset: 0px 0px 0px 0px;
	background-color: rgba(0,0,0,0.96);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*padding: 0px 38vw;*/
}