/* COMMON CSS STARTS */

:root, :host {
	/**/
	--radius: 10px;
	--control-radius: 8px;
	--menubutton-radius: 5px;
	--border: 0px;
	--margin: 15px;
	--toolbar-padding: 5px;
	--hoverbartop-height: 30px;
	--toolbar-height: 40px;
	--top-toolbar-height: 40px;
	--bottom-toolbar-height: 0px;
	--left-toolbar-width: 0px;
	--bar-font-size0: 13px;
	--bar-icon-size0: 30px;
	--bar-font-size: 13px;
	--bar-icon-size: 30px;
	--toolbar-border: none;
	--base-font: Verdana;
	--header-font: 'Blinker'; /*Segoe UI*/
	/**/
	--drag-range: 10px;
	/*svg*/
	--animation-time: 0.5s;
	--svg-stroke-width: 1.5px;
	--load-mode: eager;
	/* scrollbar-bg-color,scrollbar-thumb-color
		--themed: 
			bg-color,bg-hl-color,toolbar-bg-color,highlight-color,highlight-bg,overlay-bg-color,border-color,
			text-color,text-color-fade,
			menu-bg-color,menubutton-hover-bg,menubutton-hover,menu-shadow,menubutton-color,
			svg-stroke,svg-fill,svg-hover-stroke,svg-hover-fill,svg-disable-fill,svg-disable-stroke,
			form-bg-color,textarea-bg-color,textarea-font-color,content-alt-bg-color,app-bg-color,content-header-bg-color,
			graph-color,graph-grid-color,graph-text-color,graph-high-color,graph-low-color,
			drop-shadow;
	*/
	--themed: bg-color,bg-hl-color,toolbar-bg-color,highlight-color,highlight-bg,overlay-bg-color,border-color,text-color,text-color-fade,menu-bg-color,menubutton-hover-bg,menubutton-hover,menu-shadow,menubutton-color,svg-stroke,svg-fill,svg-hover-stroke,svg-hover-fill,svg-disable-fill,svg-disable-stroke,form-bg-color,textarea-bg-color,textarea-font-color,content-alt-bg-color,app-bg-color,content-header-bg-color,graph-color,graph-grid-color,graph-text-color,graph-high-color,graph-low-color,drop-shadow;
	--dark-theme: 2;
	/**/
	--theme-count: 2;
	/*theme1 light*/
	/*--scrollbar-bg-color1: oklch(0.733 0.02 0); --scrollbar-thumb-color1: oklch(0.607 0.02 0/1.0);*/
	--app-bg-color1: oklch(0.598 0.02 0);
	--content-header-bg-color1: oklch(0.892 0.02 0/1);
	--content-bg-color1: oklch(0.869 0.02 0);
	--content-alt-bg-color1: oklch(0.829 0.02 0/1);
	--bg-color1: oklch(0.954 0 0);
	--bg-hl-color1: oklch(0.91 0 0);
	--toolbar-bg-color1: oklch(0.845 0 0);
	--highlight-color1: black;
	--highlight-bg1: oklch(0.975 0.25 107.8); /*yellow*/
	--overlay-bg-color1: oklch(0.869 0 0);
	--border-color1: oklch(0.845 0.02 0);
	--text-color1: oklch(0.39 0 0);
	--text-color-fade1: oklch(0.598 0 0);
	--menu-bg-color1: white;
	--menu-shadow1: oklch(0.321 0 0);
	--menubutton-color1: oklch(0.714 0 245.8);
	--menubutton-hover-bg1: oklch(0.773 0 0/0.7);
	--menubutton-hover1: oklch(0.714 0.13 245.8);
	--svg-fill1: oklch(0.138 0 0/0.01);
	--svg-hover-fill1: oklch(0.138 0 0/0.01);
	--svg-disable-fill1: oklch(0.138 0 0/0.01);
	--svg-stroke1: oklch(0.598 0.02 0);
	--svg-hover-stroke1: oklch(0.216 0.01 0);
	--svg-disable-stroke1: oklch(0.773 0.02 0/1);
	--form-bg-color1: white;
	--textarea-bg-color1: white;
	--textarea-font-color1: black;
	/* graphs */
	--graph-color1: oklch(0.714 0.13 245.8);
	--graph-grid-color1: oklch(0.714 0.13 245.8);
	--graph-text-color1: oklch(0.714 0.13 245.8);
	--graph-high-color1: oklch(0.56 0.22 38.7/1);
	--graph-low-color1: oklch(0.827 0.29 139.5/1);
	--drop-shadow1: oklch(0.598 0.02 0/0.8);
	/*theme2 dark*/
	/*--scrollbar-bg-color2: oklch(0.428 0.01 0);
	--scrollbar-thumb-color2: oklch(0.6 0.02 0);*/
	--app-bg-color2: oklch(0.598 0.02 0);
	--content-header-bg-color2: oklch(0.892 0.02 0/1);
	--content-bg-color2: oklch(0.428 0.01 0/1);
	--content-alt-bg-color2: oklch(0.501 0.01 0/1);
	--bg-color2: oklch(0.331 0.01 0);
	--bg-hl-color2: oklch(0.641 0.02 0);
	--toolbar-bg-color2: oklch(44.64% 0 0);
	--highlight-color2: black;
	--highlight-bg2: oklch(0.975 0.25 107.8); /*yellow*/
	--overlay-bg-color2: oklch(0.869 0.02 0);
	--border-color2: oklch(0.428 0.01 0);
	--text-color2: oklch(0.923 0.02 0);
	--text-color-fade2: oklch(0.683 0.02 0);
	--menu-bg-color2: oklch(0.321 0.01 0);
	--menu-shadow2: oklch(0.185 0 0);
	--menubutton-color2: oklch(0.765 0.02 0);
	--menubutton-hover-bg2: oklch(0.428 0.01 0);
	--menubutton-hover2: oklch(0.765 0.02 0);
	--svg-fill2: oklch(0.138 0 0/0.01);
	--svg-disable-fill2: oklch(0.138 0 0/0.01);
	--svg-hover-fill2: oklch(0.138 0 0/0.01);
	--svg-stroke2: oklch(0.845 0.02 0);
	--svg-hover-stroke2: oklch(1 0.03 0);
	--svg--disable-stroke2: oklch(0.535 0.19 138.9);
	--form-bg-color2: white;
	--textarea-bg-color2: oklch(0.483 0.01 0);
	--textarea-font-color2: white;
	/* graphs */
	--graph-color2: oklch(0.66 0.12 247.8/1);
	--graph-grid-color2: oklch(0.598 0.02 0);
	--graph-text-color2: oklch(0.885 0.02 0);
	--graph-high-color2: oklch(0.61 0.17 42/1);
	--graph-low-color2: oklch(0.719 0.17 68.7);
	--drop-shadow2: oklch(0.169 0 0/0.8);
	/*gallery*/
	--galleryWidth: 300px;
	/*font sizes*/
	--fs5: clamp(4.2rem, calc(3.16 * 3.5vw), 5.7rem);
	--fs4: clamp(3.16rem, calc(2.37 * 3.5vw), 4.2rem);
	--fs3: clamp(2.37rem, calc(1.77 * 3.5vw), 3.3rem);
	--fs2: clamp(1.77rem, calc(1.33 * 3.5vw), 2.4rem);
	--fs1: clamp(1.33rem, 3.5vw, 1.8rem);
	--fs0: clamp(0.9rem, 3vw, 1.2rem);
	overflow:hidden;
}

*, *:before, *:after {
	box-sizing: border-box;
}

body {
	/*font-size: 10px;  this is here because chrome in some androids leaks this font size to svg text*/
	-webkit-user-select: none;
	user-select: none;
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: var(--base-font),sans-serif;
	margin: 0px;
}

h1,h2,h3,h4,h5,h6{font-family:var(--header-font),Arial,sans-serif;font-weight:400;margin-top:1vh;margin-bottom: 1vh;}
.wide{letter-spacing:4px}

.contentclass {
	border-radius: var(--radius);
	background: var(--content-bg-color);
}

.margin {margin: var(--margin);}

h1 {
	font-size: var(--fs5);
}
h2 {
	font-size: var(--fs4);
}
h3 {
	font-size: var(--fs3);
}
h4 {
	font-size: var(--fs2);
}
h5 {
	font-size: var(--fs1);
}
h6 {
	font-size: var(--fs0);
	font-weight: 600;
}

.round{border-radius:4px}.round-large{border-radius:8px}.round-xlarge{border-radius:16px}
.input{padding:8px;display:block;border:none;border-bottom:1px solid oklch(0.845 0.02 0);width:100%}
.card,.hover-shadow:hover{box-shadow:0 4px 10px 0 oklch(0.138 0 0/0.2),0 4px 20px 0 oklch(0.138 0 0/0.19)}

.padding-small{padding:4px 8px!important}.padding{padding:8px 16px!important}.padding-large{padding:12px 24px!important}
.padding-16{padding-top:16px!important;padding-bottom:16px!important}.padding-24{padding-top:24px!important;padding-bottom:24px!important}
.padding-32{padding-top:32px!important;padding-bottom:32px!important}.padding-48{padding-top:48px!important;padding-bottom:48px!important}
.padding-64{padding-top:64px!important;padding-bottom:64px!important}

.border-0{border:0!important}.border{border:1px solid oklch(0.845 0.02 0)!important}
.border-top{border-top:1px solid oklch(0.845 0.02 0)!important}.border-bottom{border-bottom:1px solid oklch(0.845 0.02 0)!important}
.border-left{border-left:1px solid oklch(0.845 0.02 0)!important}.border-right{border-right:1px solid oklch(0.845 0.02 0)!important}

.ul{list-style-type:none;padding:0;margin:0}
.ul li{padding:8px 16px;border-bottom:1px solid #ddd}
.ul li:last-child{border-bottom:none}
.table,.table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table;margin-bottom:10px;}.table-all{border:1px solid oklch(0.845 0.02 0);margin-bottom:10px;}
.bordered tr,.table-all tr{border-bottom:1px solid #ddd}.striped tbody tr:nth-child(even){background-color:#f1f1f1}
.table-all tr:nth-child(odd){background-color:#fff}.table-all tr:nth-child(even){background-color:#f1f1f1}
.hoverable tbody tr:hover,.ul.hoverable li:hover{background-color:oklch(0.845 0.02 0)}.centered tr th,.centered tr td{text-align:center}
.table td,.table th,.table-all td,.table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.table th:first-child,.table td:first-child,.table-all th:first-child,.table-all td:first-child{padding-left:16px}
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.center{text-align:center!important;text-align-last:center;}
.right{text-align:right!important;text-align-last:right;}
.highlighttext{color:white}

.container:after,.container:before{content:"";display:table;clear:both;}
.container{padding:0.01em 16px}
.content{max-width:980px;margin:auto}
.hide{display:none!important}

/*to be removed*/
.top{position:fixed;width:100%;z-index:1;top:0}
.left-align{text-align:left!important}
/* w3 end*/

p, li {
	font-size: var(--fs0);
	text-align: justify;
	text-align-last: left;
}

@supports (margin-block-start: 0em) {
	p {
		margin-block-start: 0em;
	}
}

/* display modes, exclusive, hide is the third*/
.inline {
	display: inline;
}

.bspacer {
	width: calc(var(--bar-icon-size) / 4);
}

.bspan {
	font-size: var(--bar-font-size);
	font-weight: bold;
	pointer-events: none;
	text-decoration: none;
	color: var(--svg-stroke);
	text-align: center;
}

svg {
	stroke-linecap: round;
	stroke-linejoin: round;
	width: auto;
	-webkit-touch-callout: none; /* prevent selecting text within svg in various browsers */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

svg-icon, .icon {
	height: var(--bar-icon-size);
	width: var(--bar-icon-size);
	margin: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
	flex-grow: 0;
	transform-origin: 50% 50%;
	z-index: 3;
}

svg.icon, svg-icon {
	fill: var(--svg-fill);
	stroke: var(--svg-stroke);
	color: var(--svg-stroke);
	stroke-width: var(--svg-stroke-width);
	-webkit-tap-highlight-color: transparent;
	outline: 0;
	text-anchor: middle;
	dominant-baseline: middle;
	font-weight: 600;
	font-size: 12px;
}

p svg-icon {
	color: var(--text-color);
	stroke: var(--text-color);
	height: calc( var(--fs0) + 5px );
	width: calc( var(--fs0) + 5px );
	vertical-align: -20%;
	display: inline-block;
}

/* svg.icon text, svg.icon > use > text { fill: var(--svg-fill-text); stroke-width: 0; text-anchor: middle; font-weight: bold; font-size: 12px; }
svg.icon:hover:not(.disable) text, svg:focus:not(.disable) text { fill: var(--svg-hover-stroke); } */

	svg.icon.disable, svg-icon.disable {
		color: var(--svg-disable-stroke);
	stroke: var(--svg-disable-stroke);
	fill: var(--svg-disable-fill);
		pointer-events: none;
	}

/* svg.icon.disable text { fill: var(--svg-disable-stroke); } */
video {
	width: 100%;
	 height: 100%;
	 object-fit:contain;
}

.pointer {
	cursor: pointer;
}

@media screen {
	.fullscreen {
		position: absolute;
		top: var(--top-toolbar-height);
		left: var(--left-toolbar-width);
		height: calc(100% - var(--top-toolbar-height) - var(--bottom-toolbar-height));
		width: calc(100% - var(--left-toolbar-width));
		min-width: 100px;
		min-height: 100px;
		background-color: var(--bg-color);
		/*padding: calc(var(--margin) / 2 );*/
	}
	.scroll-y {
		overflow-y: auto;
	}
	.scroll-x {
		overflow-x: auto;
	}
	.noscroll-y { overflow-y: hidden; }
}

#hovertopbar {
	position: fixed;
	top: 0;
	height: var(--hoverbartop-height);
	width: 100%;
	text-align: center;
	z-index: 2;
	display: flex;
	border-radius: var(--control-radius);
	& div {
	position: relative;
	height: var(--hoverbartop-height);
	display: flex;
}
}

.controlbar svg-icon:focus:not(.disable), .controlbar svg-icon:hover:not(.disable) {
	fill: var(--svg-hover-fill);
	stroke: var(--svg-hover-stroke);
	color: var(--svg-hover-stroke);
	cursor: pointer;
}

.lefttoolbar {
	position: absolute;
	left: 0;
	top: var(--top-toolbar-height);
	height: calc(100% - var(--top-toolbar-height));
	width: var(--left-toolbar-width);
	transition: width 0.4s;
	display: flex;
	flex-direction: column;
}

.toptoolbar, .bottomtoolbar {
	position: absolute;
	width: 100%;
	transition: height 0.4s;
	display: flex;
	padding-left: var(--left-toolbar-width);
	z-index: 2;
}

.toptoolbar > input, .bottomtoolbar > input {
	max-width: 120px;
}

.toptoolbar {
	height: var(--top-toolbar-height);
}

.bottomtoolbar {
	bottom: 0;
	height: var(--bottom-toolbar-height);
}

.toolbarcont {
	background-color: var(--bg-color);
}

.toolbar > a {
	height: var(--bar-icon-size) !important;
	width: var(--bar-icon-size) !important;
}

.toolbar {
	flex-grow: 0;
	flex-shrink: 0;
	flex-wrap: wrap;
	gap: 2px;
	display: flex;
	background-color: var(--toolbar-bg-color);
	padding: var(--toolbar-padding) !important;
	border: var(--toolbar-border) !important;
	border-radius: var(--radius);
	max-width: 100%;
	svg.icon:hover:not(.disable), svg.icon:focus:not(.disable), svg-icon:hover:not(.disable), svg-icon:focus:not(.disable) {
			fill: var(--svg-hover-fill);
			stroke: var(--svg-hover-stroke);
			color: var(--svg-hover-stroke);
			cursor: pointer;
			border-radius: var(--control-radius);
		}
	select {
		font-size: 14px;
		background-color: var(--bg-hl-color);
		color: var(--svg-stroke);
		border-color: transparent;
		-webkit-box-shadow: none;
		box-shadow: none;
		outline: none;
		margin-right: 4px;
		border-radius: var(--control-radius);
	}
select:hover {
		color: var(--svg-hover-stroke);
	}
}

.grid {
	display:grid;
}

.flex {
	display: flex;
}

.flexnogrow {
	display: flex;
}

.flexnogrow > * {
	flex-grow: 0;
	flex-shrink: 0;
}
.flex_start {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
}

.flex_center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex_center2 {
	display: flex;
	justify-content: center;
}

.flex_end {
	justify-content: flex-end;
	align-items: center;
}

.flex_column {
	flex-direction: column;
}

.flex_grow {
	flex-grow: 1;
}

.flex_shrink {
	flex-shrink: 1;
}

.flex_wrap {
	flex-wrap: wrap;
}

.flex_gap {
	gap: 15px;
}

.content_fit {
	width: -moz-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: fit-content;
}
/* Classes to tile elements */
.full {
	width: 98%;
	height: auto !important;
	padding: 5px;
}

.half {
	width: 48%;
	height: auto !important;
	padding: 5px;
}

/*
@media only screen and (max-width: 768px) {
	.half {
		width: initial;
	}
}
*/
.quarter {
	width: 24%;
	height: auto !important;
	padding: 5px;
}

.min-width {
	width: auto
}

@media print {
	.toolbar {
		display: none;
	}
	.vertical {
		height:auto;
	}
}

.padding16 {
	padding: 16px;
}

.contain {
	background: url() no-repeat center center fixed;
	background-size: contain;
}

.marginspacer {
	width: var(--margin) !important;
	height: var(--margin) !important;
	flex-grow: 0 !important;
	flex-shrink: 0;
}

.hide + .marginspacer {
	display: none;
}

/*
@keyframes flip1 {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0,1);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes flip2 {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0,1);
	}

	100% {
		transform: scale(1);
	}
}

.flip1 {
	animation-name: flip1;
	animation-duration: 0.4s;
}

.flip2 {
	animation-name: flip2;
	animation-duration: 0.4s;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px oklch(0.138 0 0/0.3);
	border-radius: var(--control-radius);
	background-color: var(--scrollbar-bg-color);
}

::-webkit-scrollbar {
	border-radius: var(--control-radius);
	width: 12px;
	background-color: var(--scrollbar-bg-color);
	height: 12px;
}

::-webkit-scrollbar-thumb {
	border-radius: var(--control-radius);
	box-shadow: inset 0 0 6px oklch(0.138 0 0/.3);
	background-color: var(--scrollbar-thumb-color);
	cursor: pointer;
}
*/
.menubg {
	width: auto;
	background-color: var(--menu-bg-color);
	z-index: 15;
	box-shadow: 10px 10px 5px var(--menu-shadow);
	border-radius: 8px;
	position: fixed;
	padding: 2px;
	display: inline-grid;
	grid-template-columns: auto;
	max-height: 90vh;
	overflow-y: auto;
}

.helpbg {
	width: 85vw;
	max-height: 85vh;
	background-color: var(--bg-color);
	box-shadow: 10px 10px 5px oklch(0.321 0.01 0);
	border-radius: 8px;
	padding: 16px;
	max-width: 700px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	/*position: relative;*/
	p	{
		margin: 10px;
	}
	h2 {
		border-bottom: 1px solid oklch(0.888 0.02 0);
	}
}

.logindialog {
	max-width: 400px;
}

.helprow * {
	pointer-events: none;
}

.overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
	background-color: oklch(0.138 0 0/0);
	transition: background-color 0.4s ease;
	transform: scale(0);
}

.overlay.active {
	transform: scale(1);
	background-color: oklch(0.138 0 0/0.5);
}

.menubutton {
	display: flex;
	align-items: center;
	background-color: var(--menu-bg-color);
	color: var(--menubutton-color);
	padding: 0.2em .8em;
	margin: 0 0.3em 0 0.3em;
	border-radius: var(--menubutton-radius);
	cursor: pointer;
	text-decoration: none;
	font-size: var(--fs0);
	border: none;
	font-family: var(--base-font);
}

.menubutton p {
	color: var(--text-color);
}

.menubg a {
	text-decoration: none;
}

.helpbg .menubutton {
	max-width: -moz-fit-content;
	max-width: fit-content;
}
.helpbg .menubutton.radiotoggle {
	background-color:transparent;
}
/*#menubg .menubutton { border-top: 1px dotted var(--text-color); }*/

.menubutton:hover:not(.radiotoggle), .menubutton:focus:not(.radiotoggle), .uncheckedradio:hover, .checkedradio:hover {
	background: var(--menubutton-hover-bg);
	color: var(--menubutton-hover);
	outline: none;
}

.twocols {
	column-count: 2;
	margin-bottom: 12px;
}

/*
:focus:not(:focus-visible) {
	outline: none;
	box-shadow: 1px 1px 5px oklch(0.14 0 0/.7);
}
*/
.bubble {
	margin-bottom: 25px;
	font-family: sans-serif;
	font-size: var(--fs0);
	line-height: 24px;
	width: 320px;
	background: var(--bg-hl-color);
	border-radius: 40px;
	padding: 28px;
	text-align: left;
	color: var(--text-color);
	display: inline-flex;
	padding-top: 45px;
}

.bubble-bottom-left:before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 24px solid var(--bg-hl-color);
	border-right: 12px solid transparent;
	border-top: 12px solid var(--bg-hl-color);
	border-bottom: 20px solid transparent;
	left: 32px;
	bottom: -24px;
}

.slide-in {
	z-index: 20; /* to position it in front of the other content */
	position: absolute;
	overflow: hidden; /* to prevent scrollbar appearing */
	top: calc( var(--top-toolbar-height) + 20px);
}

.slide-in.from-left {
	left: 0;
}

.slide-in.from-right {
	right: 0;
}

.slide-in-content {
	transition: transform .5s ease; /* our nice transition */
}

.slide-in.from-left .slide-in-content {
	transform: translateX(-100%);
}

.slide-in.from-right .slide-in-content {
	transform: translateX(100%);
}

.slide-in.show .slide-in-content {
	transform: translateX(0);
}

.transbg {
	background-color: oklch(0.138 0 0/0);
}

.trans {
	opacity: 0;
}

.opaq {
	opacity: 1;
}

.transslow {
	opacity: 0;
	transition: opacity var(--animation-time);
}

.opaqslow {
	opacity: 1;
    transition: opacity var(--animation-time);
}

.highlight {
	background-color: var(--highlight-bg);
	color: var(--highlight-color);
	border-radius: 3px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.bigloader {
	width: 120px;
	height: 120px;
	top: calc(50% - 60px);
	left: calc(50% - 60px);
	position: fixed;
}

.baseloader {
	border: 16px solid oklch(0.964 0.03 0);
	border-radius: 50%;
	border-top: 16px solid var(--toolbar-bg-color);
	animation: spin 2s linear infinite;
	position: absolute;
	pointer-events: none;
}

.load-wrapd {
	position: fixed;
	width: 200px;
	height: 320px;
	background: transparent;
	top: calc(50% - 130px);
	left: calc(50% - 100px);
}

input[type="color" i] {
	padding: 0px;
}

form input[type="submit"] {
	display: block;
	margin: 20px;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid;
	border-radius: var(--control-radius);
	border-color: var(--svg-stroke);
	color: var(--svg-stroke);
}

form input[type="submit"]:hover {
	border-color: var(--svg-hover-stroke);
	color: var(--svg-hover-stroke);
}

form input[type="number"] {
	max-width:100px;
}

.radiotoggle input[type="radio"] {
	/*appearance: none;*/
	color: var(--svg-stroke);
	border: 0.15em solid var(--svg-stroke);
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	margin-top: 0.5em;
	transform: translateY(0.18em);
	display: grid;
	place-content: center;
}


input + label {
	transform: translateY(-1.8em);
	transform-origin: 0 0;
	transition: all var(--animation-time);
	margin-left: 5px;
}

input[type=checkbox] + label {
	transform: translate(1em,-1.2em);
}

/*
input[type=text][type=password]:focus + label {
	transform: translateY(-3.1em) scale(0.9);
}
*/

.radiotoggle input[type="radio"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--form-control-color);
}

.radiotoggle input[type="radio"]:checked::before {
	transform: scale(1);
}

.uncheckedradio::before {
	content: "\25CE";
}

.checkedradio::before {
	content: "\25C9";
}

.uncheckedradio::before, .checkedradio::before {
	font-size: var(--fs0);
    padding-right: 3px;
    color: var(--svg-stroke);
    padding-left: calc( ( var(--bar-icon-size) - 18px ) / 2 );
    padding-right: calc( ( var(--bar-icon-size) - 18px ) / 2 );
    /*width: var(--bar-icon-size);
	/*	color: var(--text-color);*/
}

.checkedradio, .uncheckedradio {
	align-items: baseline;
}
/*
.checkedradio, .uncheckedradio {
	display: flex;
	height: 24px;
	flex-direction: row;
	align-items: end;
	border-radius: 3px;
}

	.checkedradio::before {
		color: var(--svg-stroke);
		font-size: 20.5px;
		content: "\2b24\a0";
		width: 24px;
	}

	.uncheckedradio::before {
		color: var(--svg-stroke);
		font-size: 17px;
		content: "\25ef\a0";
		width: 24px;
	}
*/
.form-control {
	box-shadow: none;
	background-color: white;
	border-radius: 0px;
	border-color: oklch(0.845 0.02 0);
	border-style: none none solid none;
	transition: all var(--animation-time);
	padding: 5px;
	border-radius: 2px;
	background-color: var(--textarea-bg-color);
	color: var(--textarea-font-color);
	width:98%;
	/*min-width: 12em;*/
}

.form-label {
	font-size: 1em;
	display: block;
	opacity: 0.6;
	padding-left: 5px;
	transform-origin: 0 0;
	transition: all var(--animation-time);
}

input[type=checkbox] + .form-label {
	opacity:1;
}

.form-control::placeholder {
	color: transparent;
}

.form-control:focus {
	box-shadow:none;
	outline:none;
	border-color: var(--brand-color);
}

textarea {
	font-size: 18px;
	font-family: var(--base-font), sans-serif;
	margin-bottom: var(--marin);
	color: var(--textarea-font-color);
	margin-left: 3px;
}

input {
	font-size: 18px;
	font-family: var(--base-font), sans-serif;
}

input[type="text"], input[type="email"], input[type="date"], input[type="number"], input[type="password"] {
	background-color: var(--textarea-bg-color) !important;
	color: var(--svg-stroke);
}

input.form-control:focus + .form-label,
input.form-control:not(:placeholder-shown) + .form-label {
	transform:translateY(-3.1em) scale(0.9);
	opacity:1;
}

input[type=checkbox i].form-control, input[type=radio i].form-control, input[type=date]{
	width: initial;
}

input:-webkit-autofill, :-webkit-autofill:hover,  :-webkit-autofill:focus, :-webkit-autofill:active {
	appearance:none;
	background-color: var(--textarea-bg-color) !important;
	color: var(--textarea-font-color) !important;
}

	input[type="checkbox"] {
		/* Add if not using autoprefixer */
		-webkit-appearance: none;
		/* Remove most all native input styles */
		appearance: none;
		/* For iOS < 15 */
		background-color: var(--bg-color);
		/* Not removed via appearance */
		margin: 0;
		color: var(--svg-stroke);
		width: 1.15em;
		height: 1.15em;
		border: 0.15em solid currentColor;
		border-radius: 0.15em;
		transform: translateY(-0.075em);
		display: grid;
		place-content: center;
	}

		input[type="checkbox"]::before {
			content: "";
			width: 0.65em;
			height: 0.65em;
			clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
			transform: scale(0);
			transform-origin: bottom left;
			transition: 120ms transform ease-in-out;
			box-shadow: inset 1em 1em var(--svg-stroke);
			/* Windows High Contrast Mode */
			background-color: CanvasText;
		}

		input[type="checkbox"]:checked::before {
			transform: scale(1);
		}

		input[type="checkbox"]:focus {
			outline: max(1px, 0.1em) solid currentColor;
			outline-offset: max(2px, 0.15em);
		}

		input[type="checkbox"]:disabled {
			--svg-stroke: var(--svg-disable-stroke);
			color: var(--svg-disable-stroke);
			cursor: not-allowed;
		}

select {
	font-size: 18px;
	font-family: var(--base-font), sans-serif;
	/*margin-bottom: var(--margin); these should depend on the container, not allowed in a toolbar
	margin-top: 0.2em;*/
}

select + .form-label {
	transform: translateY(-3.3em) scale(0.9);
}

.fs5 {
	font-size: var(--fs5);
}

.fs4 {
	font-size: var(--fs4);
}

.fs3 {
	font-size: var(--fs3);
}

.fs2 {
	font-size: var(--fs2);
}

.fs1 {
	font-size: var(--fs1);
}

.fs0 {
	font-size: var(--fs0);
}

.fw600 {
	font-weight: 600;
}

.fw500 {
	font-weight: 500;
}

.fw400 {
	font-weight: 400;
}

.rotated {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	display: inline-block;
	overflow: visible;
}

.overflowboth {
	overflow: auto;
}

/*
.overlay > audio {
	margin-top: max(var(--hoverbartop-height), var(--top-toolbar-height));
	margin-left: 40%;
}
*/

.helprow {
	display:flex;
}

.selector {
	flex-wrap: wrap;
	gap: 5px;
	color: var(--svg-stroke);
	justify-content: space-around;
	max-height: calc(85vh - 120px);
	overflow-y: auto;
}

.selectorbar {
	display: flex;
	justify-content: space-around;
}

/*Curves*/

svg.graph {
	color: var(--svg-stroke);
	flex-shrink: 0;
	flex-grow:0;
}

#barhelper {
	position: fixed;
	background-color: var(--bg-hl-color);
	border-radius: var(--control-radius);
	padding: var(--toolbar-padding) !important;
	border: var(--toolbar-border) !important;
}

.dropshadow {
	filter: drop-shadow(3px -3px 2px var(--drop-shadow));
}

rect.bar {
	stroke: none;
}

rect.bartransparent {
	fill: oklch(0.773 0.02 0/0.01);
	stroke: none;
}

rect.barhighlight {
	fill: oklch(0.773 0.02 0/0.7);
	stroke: none;
}

.scroll_snap_y_mandatory {
	scroll-snap-type: y mandatory;
}

.scroll_snap_x_mandatory {
	scroll-snap-type: x mandatory;
}

.scroll_snap_both {
	scroll-snap-type: both mandatory;
}

.snap_start_child > *, .snap_start {
	scroll-snap-align: start;
}

.powered {
	z-index: 10;
	position: absolute;
	padding: 10px;
	font-size: var(--fs0);
	background-color: transparent;
	height: var(--top-toolbar-height);
	bottom: 0;
	right: 0;
	color:var(--bg-hl-color);
	:last-child {
		color: red;
		font-weight: bold;
		font-stretch: condensed;
	}
}

.appheader {
	z-index: 10;
	position: absolute;
	background-color: transparent;
	color: var(--bg-color);
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 20vw;
}

.graph {
	transition: all 0.8s;
}

.blurwindow {
	backdrop-Filter: blur(10px);
	background-color:transparent;
	flex-direction:column;
	gap:10px;
}

.fullsize {
	width: 100%;
	height: 100%;
}

#loginform {
	max-width: 300px;
	margin: 0 auto;
	margin-top: 10px;
}

#loginmsg {
	color: red;
	text-align: center;
}

.dialogicon {
	width: var(--fs3) !important;
	height: auto !important;
	stroke: var(--text-color) !important;
}

@keyframes tilt-n-move-shaking {
	15% { transform: translate(6px, 6px) rotate(6deg); }
	30% { transform: translate(-5px, 5px) rotate(-5deg); }
	45% { transform: translate(4px, 4px) rotate(4deg); }
	60% { transform: translate(-3px, 3px) rotate(-3deg); }
	75% { transform: translate(2px, 2px) rotate(2deg); }
	90% { transform: translate(-1px, 1px) rotate(-1deg);}
	100% { transform: translate(0, 0) rotate(0deg);
	}
}

.shakeanim {
	animation: tilt-n-move-shaking 0.3s;
}

.captioncont {
	position: fixed;
	left: 2%;
	top: 10%;
	border-radius: 4px;
	background-color: var(--toolbar-bg-color);
	padding: 20px;
	max-width: 18%;
}
.headercont {
	position: fixed;
	top: calc( var(--top-toolbar-height) + 5px );
	margin-left: 40%;
	border-radius: 2px;
	background-color: var(--toolbar-bg-color);
	padding: 2px;
	width: 20%;
	text-align: center;
}

.gallery_active {
	opacity: 1;
	z-index: 5;
}

.gallery_inactive {
	opacity: 0;
	z-index: 1;
}

.select {
	font-family:monospace;
}

/*Gallery*/
.vertGallery {
	> div {
		width: var(--galleryWidth);
		display: flex;
		img {
			height: auto;
			width: 50%;
			transition: all .5s
		}
		div {
			width: 100%;
		}
		.helpbg {
			width: 50%;
			height: auto;
			background: var(--bg-hl-color);
		}
	}
}

.horzGallery {
	> div {
		position:relative;
		scroll-snap-align:center;
		overflow:auto;
		img {
			height: 90%;
			width: auto;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			margin-top: 2%;
			transition: all .5s
		}
.helpbg {
	height: 90%;
	width: auto;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	margin-top: 2%;
	background: var(--bg-hl-color);
}
	}
}
/* COMMON CSS ENDS */