@font-face {
	font-display: block;
	font-family: "Open Sans";
	
	src: url('/fonts/OpenSans.ttf') format('truetype');
}

:root {
	--scrollbarWidth: 6px;
	--selectedColor: #366ede;
	--selectorLinesColor: #d6d6d6;
	--btBorderRad: 0.4em;
	--btColorTrans: background 0.1s ease;
}

* {
	font-family: 'Open Sans';
	font-weight: 500;
}
body {
	padding: 0px;
	margin: 0px;
}

button {
	font-size: 0.9em;
	background: #ebebeb;
	outline: none;
	cursor: pointer;
	
	padding: 0.5em 1em;
	border: none;
	border-radius: var(--btBorderRad);
	margin: 0px;
	
	transition: var(--btColorTrans);
}
@media (hover: hover) {
	button:hover {
		background: #d9d9d9;
	}
}
button:active {
	background: #c7c7c7;
}
button:disabled {
	pointer-events: none;
}
button:disabled img {
	opacity: 40%;
}
button.selected {
	color: white;
	background: var(--selectedColor) !important;
}
.selected img.invertOnSelected {
	filter: brightness(10);
}


progress {
	appearance: none;
	height: 6px;
}
progress::-webkit-progress-bar {
	background: #bbbbbb;
}
progress::-webkit-progress-value {
	background: #3d7dff;
}


input {
	outline: none;
	border: none;
	background: #eee;
	
	padding: 0.6em 0.9em;
	border-radius: var(--btBorderRad);
	margin: 0px;
	
	transition: background 0.15s ease;
}

input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
}
input[type="number"], input[type="text"] {
	border: 1px solid #a1a1a1;
}
input:focus[type="number"], input:focus[type="text"] {
	background: #e2e2e2;
	border-color: #686868;
}

input[type="color"] {
	cursor: pointer;
	display: block;
	
	box-shadow: 0px 0px 5px grey;
	padding: 0px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0px;
}
input[type="color"]::-webkit-color-swatch {
	border-style: none;
}
input[type="color"]::-moz-color-swatch {
	border-style: none;
}

input[type="checkbox"] {
	--checkboxWidth: 4em;
	
	cursor: pointer;
	appearance: none;
	background: #afafaf;
	
	display: block;
	position: relative;
	width: var(--checkboxWidth);
	height: 2em;
	border-radius: 1em;
}
input[type="checkbox"]:checked {
	background: var(--selectedColor);
}
input[type="checkbox"]::before {
	--circleMargin: 0.4em;
	
	content: "";
	background: white;
	
	position: absolute;
	left: 0px;
	top: 50%;
	height: calc(100% - var(--circleMargin) * 2);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	
	transform: translateX(var(--circleMargin)) translateY(-50%);
	transition: transform 0.1s ease-out;
}
input[type="checkbox"]:checked::before {
	transform: translateX(calc(var(--checkboxWidth) - var(--circleMargin) - 100%)) translateY(-50%);
}

input::placeholder {
	color: #888;
	transition: color 0.15s ease;
}

input:focus::placeholder {
	color: transparent;
}

img.xflipped {
	transform: scaleX(-1);
}

.buttonsSelector button {
	border-radius: 0px;
}
.buttonsSelector button:first-child {
	border-radius: var(--btBorderRad) 0px 0px var(--btBorderRad);
}
.buttonsSelector button:last-child {
	border-radius: 0px var(--btBorderRad) var(--btBorderRad) 0px;
}
.buttonsSelector button:not(:last-child) {
	border: solid var(--selectorLinesColor);
	border-width: 0px 1px 0px 0px;
}

.tooltip {
	--yOffset: 0px;
	--translateX: -50%;
	--translateY: -100%;
	
	pointer-events: none;
	color: black;
	background: white;
	box-shadow: 0px 0px 10px -2px black;
	
	font-size: 0.8em;
	line-height: 125%;
	text-wrap: nowrap;
	
	display: block;
	position: absolute;
	top: var(--yOffset);
	left: 50%;
	transform: translateX(var(--translateX)) translateY(var(--translateY));
	
	padding: 0.15em 0.4em;
	border: 1px solid black;
	
	z-index: 1;
	opacity: 0;
	transition: opacity 0.15s ease;
	transition-delay: 0s;
}
.tooltip.bottom {
	top: auto;
	bottom: var(--yOffset);
	--translateY: 100%;
}
.tooltip.alignLeft {
	left: 0%;
	--translateX: 0px;
}
@media (hover: hover) {
	button:hover > .tooltip, div:hover > .tooltip {
		transition-delay: 1.1s;
		opacity: 1;
	}
}

.shadowScroll {
	position: relative;
	overflow-y: hidden;
}
.shadowScroll > div {
	height: 100%;
}
.shadowScroll::before, .shadowScroll::after {
	--shadowBoxHeight: 80px;
	
	content: "";
	position: absolute;
	left: 0px;
	width: 100%;
	height: var(--shadowBoxHeight);
	
	transition: box-shadow 0.1s ease;
	z-index: 1;
}
.shadowScroll::before {
	top: calc(var(--shadowBoxHeight) * -1);
	box-shadow: 0px 9px 9px -11px black;
}
.shadowScroll::after {
	bottom: calc(var(--shadowBoxHeight) * -1);
	box-shadow: 0px -9px 9px -11px black;
}
.shadowScroll.scrollTop::before {
	box-shadow: 0px 4px 3px -5px black;
}
.shadowScroll.scrollBottom::after {
	box-shadow: 0px -4px 3px -5px black;
}


::-webkit-scrollbar {
	width: var(--scrollbarWidth);
	height: var(--scrollbarWidth);
}
::-webkit-scrollbar-track {
	background: #bbb;
	border-radius: calc(var(--scrollbarWidth) / 2);
	margin-block: 7px;
}
::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: calc(var(--scrollbarWidth) / 2);
}