/*!*******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/client/styles/theme.css ***!
  \*******************************************************************************/
:root {
	--gray: rgb(240, 240, 240);
	--light-gray: rgb(140, 140, 140);
}

html {
	backdrop-filter: sepia(1) hue-rotate(-58deg);
	filter: invert(0.94);
}

body {
	/* background: rgba(255, 255, 255, 0.999); */
	background: linear-gradient(to right, white, rgb(253, 253, 253), rgb(250, 250, 250), rgb(250, 250, 250), rgb(253, 253, 253), white);
	color: black;
	filter: saturate(1.4);
}

/* body > * *:not(.true-color) {
	backdrop-filter: sepia(1) hue-rotate(-58deg);
} */

input {
	filter: invert(0.92) !important;
}

hr {
	border-color: var(--gray);
	border-width: 1px;
}

select {
	background-color: buttonface;
}

.true-color *:empty {
	filter: invert(1) !important;
}

.true-color label, .true-color span {
	color: black;
}

/*!************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/client/styles/components.css ***!
  \************************************************************************************/
app {
	background: linear-gradient(to right, white 0%, rgba(225, 225, 225, 0.1) 10%, rgba(225, 225, 225, 0.1) 90%, white 100%);
	display: block;
	margin-bottom: 8px;
	margin-left: 8px;
	margin-right: 8px;
}

*:fullscreen canvas {
	height: min-content;
	display: block;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

*:fullscreen {
	filter: invert(1);
	height: 100%;
}

/* *:has(> .global-tooltip-section):hover { */
.global-tooltip-section:hover {
	box-shadow: 0 0 2px 2px transparent, 0 0 4px 4px rgba(255, 255, 255, 0.25) !important;
}

/* .true-color *:has(> .global-tooltip-section):hover { */
.global-tooltip-section:hover {
	filter: unset;
}

.pure-g div.input-component-wrapper, .pure-g div.output-component-wrapper {
	height: inherit;
	max-height: 21px;
}

@media screen and (width < 720px) {
	.pure-u-0 {
		display: none;
	}
}

pre {
	font-family: sans-serif;
}

label {
	font-size: 14px;
}

button {
	height: 100%;
	position: relative;
}

hr {
	margin: 8px 0;
}

hr.dashed {
	border-color: var(--light-gray);
	border-style: dashed;
}

hr.separator {
	border-color: transparent;
	margin: 4px 8px;
}

.logo {
	filter: drop-shadow(rgba(0, 0, 0, 0.25) 0 0 3px);
	margin-right: 0;
}

.input-component-wrapper, .output-component-wrapper {
	margin: 0;
}

.input-component-wrapper + .input-component-wrapper {
	margin-left: 8px;
}

.input-component-wrapper {
	margin-top: 1px; margin-bottom: 1px;
}

.input-component-wrapper > .input-component-wrapper {
	margin-bottom: 0;
	margin-top: 0;
}

*:not(.input-component-wrapper) {
	vertical-align: unset !important;
}

.input-component-wrapper > select {
	vertical-align: top !important;
}

.output-component-wrapper {
	margin-right: 8px;
}

.transcript-segment:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.audio-source-slice:hover {
	background: rgba(0, 0, 0, 0.9);
}

#options-row {
	background-color: rgba(0, 0, 0, 0.01);
}

.separate + .separate {
	margin-right: 6px;
}

.separate + *:not(.separate) {
	margin-right: unset;
}

.separate, .separate-vertical {
	margin-bottom: 3px;
	margin-top: 3px;
}

.strike {
	text-decoration: line-through;
}