html,
body {
	min-height: 101vh !important;
}

:root {
	--layout-gap: 22px !important;
}

input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(to right, var(--slider-color) var(--range_progress), var(--neutral-600) var(--range_progress)) !important;
}

input[type="range"]::-webkit-slider-thumb {
	background-color: var(--primary-700) !important;
	box-shadow: 0 0 0 1px var(--neutral-600), 1px 1px 4px #0000001a !important;
	transition: transform 0.3s ease-in-out !important;
}

input[type="range"]:hover::-webkit-slider-thumb {
	transform: scale(1.3);
}

.storyboard-column,
.regieanweisung-column,
.profi-einstellungen-column,
.output-column,
.info-column {
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	padding: calc(2 * var(--spacing-xxl));
	border-radius: var(--radius-xl);
	background: var(--block-background-fill);
}

.storyboard-column {
	position: relative;
	z-index: 10;
	background-color: var(--block-background-fill);
	transition: background-color 4s ease-in-out;

	&:focus,
	&:focus-within {
		background-color: rgba(18, 21, 29, 0.1);
	}

	&::before {
		content: "";
		position: absolute;
		height: 100%;
		width: 100%;
		background: linear-gradient(139deg, rgb(from var(--primary-950) r g b / 0.08) 0%, rgb(from var(--neutral-900) r g b / 0.2) 50%), rgb(from var(--primary-950) r g b / 0.03) 100%;
		top: 0;
		left: 0;
		z-index: 5;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.6s ease-in-out;
	}

	&:focus::before,
	&:focus-within::before {
		opacity: 1;
	}
}

/* .storyboard-column:hover {
	background: var(--block-background-fill);
	transition: all 4s ease-in-out;
	background: linear-gradient(328deg, rgb(from var(--primary-950) r g b / 0.12) 0%, rgb(from var(--neutral-900) r g b / 0.16) 100%);
} */

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.output-column::after,
.output-column::before {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	z-index: -1;
	padding: 3px;
	border-radius: var(--radius-xl);
	animation: 3s spin linear infinite;
}
.output-column::before {
	filter: blur(1.5rem);
	opacity: 0.5;
}
@keyframes spin {
	from {
		--angle: 0deg;
	}
	to {
		--angle: 360deg;
	}
}

.info-column {
	margin-top: var(--spacing-xxl);
}

.logo-html h1 {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	fill: var(--primary-600);
}

.logo-html svg {
	color: var(--primary-600) !important;
}

.row-logo,
.row-logo .html-container {
	padding: var(--spacing-xl) calc(var(--spacing-xxl) + 2px) !important;
}

.md-header {
	.headline {
		display: flex;
		text-align: center;
		font-size: var(--text-xl);
		max-width: 90%;
		justify-content: center;
	}
	.sub-headline {
		display: none !important;
	}

	p.like-request {
		font-size: clamp(0.7rem, 0.61rem + 0.48vw, 0.85rem) !important;
	}

	@media (min-width: 768px) {
		.sub-headline {
			display: flex !important;
			max-width: 90%;
			text-align: center;
		}
	}
}

.markdown-label {
	flex-grow: 0 !important;
	padding: 0 var(--spacing-xl);

	& h1 {
		font-size: clamp(1.2rem, 0.8rem + 1.6vw, 1.6rem) !important;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	& strong {
		font-family: "Font Awesome 7 Free" !important;
		/* font-size: 1.4rem !important; */
		font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.4rem) !important;
	}
}

.profi-einstellungen-column {
	padding: var(--spacing-xxl) calc(2 * var(--spacing-xxl));

	& .profi-einstellungen-inner-column:nth-child(2) div.form:nth-child(2) {
		gap: var(--layout-gap);
		background: transparent !important;
	}

	& .profi-einstellungen-inner-row {
		margin-top: 1rem;
	}
}

.profi-einstellungen-accordion {
	padding: var(--spacing-xl) 0 !important;
	overflow: hidden !important;

	& > button > span {
		font-size: 1.3rem !important;
	}
}

.storyboard-image {
	border: 3px dashed rgba(255, 255, 255, 0.1) !important;
	padding: 0 !important;
	border-radius: var(--radius-xl);
	background: var(--block-background-fill);
	/* min-height: 300px; */
	transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
	/* height: 700px; */
	/* height: min(500px, 100%); */
	min-height: var(--size-52);

	& > div.gallery-container > div {
		overflow-y: auto !important;

		&::-webkit-scrollbar {
			height: 8px;
			width: 8px;
		}

		&::-webkit-scrollbar-track {
			background-color: var(--neutral-800);
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: var(--primary-600);
			border-radius: 4px;
		}
	}

	& > button > div.wrap {
		/* display: none !important; */
		opacity: 0;
	}

	&:has(.image-frame) {
		border-color: var(--primary-600) !important;
	}

	div.upload-container button div.wrap {
		/* display: none !important; */
		opacity: 0;
	}

	& div.upload-container.reduced-height {
		height: 100% !important;
	}

	& label[data-testid="block-label"] {
		display: flex;
		justify-content: center;
		width: 100%;
		background: transparent;
		font-weight: 800;
		font-size: var(--text-xl);
		text-align: center;
		left: 50%;
		top: 30%;
		transform: translate(-50%, -50%);
		border-width: 0;
		& span {
			display: none !important;
		}

		&::before {
			content: "Hochladen";
			font-weight: 400;
			font-size: 0.8rem;
			position: absolute;
			top: 260%;
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
			transition: border-color 0.3s ease-in-out, background-color 0.6s ease-in-out 0.4s;
			width: 110px;
			height: 40px;
			border: var(--button-border-width) solid var(--button-secondary-border-color);
			background: var(--button-secondary-background-fill);
			color: var(--button-secondary-text-color);
			box-shadow: var(--button-secondary-shadow);
			border-radius: var(--button-large-radius);
			padding: var(--button-large-padding);
			font-weight: var(--button-large-text-weight);
			font-size: var(--button-large-text-size);
			pointer-events: all !important;
		}

		&::after {
			content: "Bild hierher ziehen oder klicken zum Hochladen";
			font-weight: 400;
			font-size: 0.8rem;
			position: absolute;
			top: 38px;
			left: 50%;
			transform: translateX(-50%);
			width: 95%;
		}
	}

	&:hover label[data-testid="block-label"] {
		&::before {
			background-color: var(--primary-500) !important;
		}
	}

	&:has(.gallery-item) label[data-testid="block-label"],
	&:has(.wrap.progress) label[data-testid="block-label"],
	&:has(.image-frame) label[data-testid="block-label"] {
		display: none !important;
	}

	/* & label[data-testid="block-label"]::after {
		content: "akölfj asöf asd";
		position: relative;
	} */

	& button[aria-label="Upload file"] {
		position: absolute;
		transition: border-color 0.3s ease-in-out, background-color 0.6s ease-in-out 0.4s;
		top: 62%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 110px;
		height: 40px;
		border: var(--button-border-width) solid var(--button-secondary-border-color);
		background: var(--button-secondary-background-fill);
		color: var(--button-secondary-text-color);
		box-shadow: var(--button-secondary-shadow);
		border-radius: var(--button-large-radius);
		padding: var(--button-large-padding);
		font-weight: var(--button-large-text-weight);
		font-size: var(--button-large-text-size);
		pointer-events: all !important;
		/* padding: var(--spacing-lg) calc(2 * var(--spacing-lg)); */

		& svg {
			display: none;
		}
	}

	button[data-testid="file-upload"] {
		z-index: 20 !important;
		pointer-events: all;
	}

	div.image-container:has(.gallery-item) span.source-selection {
		display: none !important;
	}

	& span.source-selection {
		position: absolute;
		width: 100% !important;
		height: 100% !important;
		top: 0 !important;
		left: 0 !important;
		z-index: 1 !important;
		pointer-events: none !important;

		& button[aria-label="Upload file"]::after {
			content: "Hochladen";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		& button[aria-label="Capture from camera"],
		button[aria-label="Paste from clipboard"] {
			bottom: 0;
			position: absolute;
			pointer-events: all;
		}
		& button[aria-label="Capture from camera"] {
			left: 42%;
		}

		& button[aria-label="Paste from clipboard"] {
			right: 42%;
		}
	}

	&:has(.gallery-item),
	&:hover {
		border-color: var(--primary-600) !important;

		& button[aria-label="Upload file"] {
			background-color: var(--primary-500) !important;
		}
	}
}

/* .storyboard-image:hover {
	border-color: var(--primary-600) !important;

	& button[aria-label="Upload file"] {
		background-color: var(--primary-500) !important;
	}
} */

.regieanweisung-textbox {
	padding: 0 !important;
	min-height: var(--size-52);

	& label {
		height: 100% !important;

		& .input-container {
			height: 100% !important;
		}
	}

	& textarea {
		padding: var(--spacing-xxl);
		transition: height 0.3s ease-in-out, border 0.3s ease-in-out;
		height: 100% !important;
	}

	& textarea:not(::placeholder),
	&:focus-within textarea {
		/* height: 300px !important; */
		border: 1px solid var(--primary-600) !important;
	}
}

.regieanweisung-column .form {
	gap: var(--layout-gap) !important;
	background: var(--block-background-fill);
}

.regieanweisung-textbox textarea,
.negative-prompt-textbox textarea,
.einstellungen-seed input[type="number"] {
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: var(--radius-xl) !important;
	font-size: 1.2rem !important;
}

.regieanweisung-textbox:focus-within textarea,
.regieanweisung-textbox textarea:not(:placeholder-shown),
.einstellungen-seed:focus-within input[type="number"],
.negative-prompt-textbox:focus-within textarea,
.negative-prompt-textbox textarea:not(:placeholder-shown):not(:disabled) {
	border: 1px solid var(--primary-600) !important;
}

span[data-testid="block-info"] {
	font-size: clamp(1rem, 0.82rem + 0.96vw, 1.3rem) !important;
	font-weight: 600 !important;
	color: var(--body-text-color) !important;
	background: transparent !important;
	padding: 4px 0px !important;
}

.einstellungen-seed {
	padding: 0 !important;
	& input {
		transition: color 0.3s ease-in-out;
	}
	&:has(input:disabled) {
		& input {
			color: var(--neutral-500) !important;
		}
	}
}

.regieanweisung-videolaenge {
	padding: var(--spacing-xl) 0 !important;
	gap: var(--layout-gap) !important;
}

.negative-prompt-textbox {
	padding: 0 !important;
	& textarea {
		transition: color 0.3s ease-in-out;
	}
	&:has(textarea:disabled) {
		& textarea {
			color: var(--neutral-500) !important;
		}
	}
}

.einstellungen-slider,
.lora-adapter-dropdown {
	background: transparent !important;
}

.regieanweisung-videolaenge div > div > label > span,
.einstellungen-slider div > div > label > span,
.einstellungen-seed > label > span,
.einstellungen-rewrite-prompt > label > span {
	font-size: clamp(1rem, 0.82rem + 0.96vw, 1.3rem) !important;
	font-weight: 600 !important;
	color: var(--body-text-color) !important;
	background: transparent !important;
	padding: 4px 0 !important;
}

.einstellungen-steps > div.wrap > div.head > div.tab-like-container,
.einstellungen-slider > div.wrap > div.head > div.tab-like-container {
	align-self: end;
}

.einstellungen-steps > div.wrap > div.head > div.tab-like-container > input[type="number"] {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--primary-600);
	padding: var(--size-1) 0;
}
.einstellungen-steps > div.wrap > div.head > div.tab-like-container {
	height: unset;
}

.einstellungen-steps > div.wrap > div.head > div.tab-like-container > button {
	display: none;
}

/* .regieanweisung-videolaenge > div.wrap > div.head > div > input[type="number"]::-webkit-outer-spin-button,
.regieanweisung-videolaenge > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button,
.einstellungen-seed > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button,
.einstellungen-slider > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-outer-spin-button,
.einstellungen-seed > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button,
.einstellungen-slider > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button {
	display: none;
} */

.einstellungen-slider > div.wrap > div.head > div > input[type="number"] {
	background: transparent !important;

	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button {
		display: none;
	}
	&:focus {
		border: 0px solid var(--primary-600) !important;
		box-shadow: none !important;
	}
}

.regieanweisung-videolaenge input[type="number"],
.einstellungen-slider input[type="number"] {
	text-align: right;
}

body > gradio-app > div > main,
.fillable.svelte-99kmwu:not(.fill_width),
.fillable:not(.fill_width) {
	max-width: 1200px !important;
}

@media (min-width: 1920px) {
	body > gradio-app > div > main,
	.fillable.svelte-99kmwu:not(.fill_width),
	.fillable:not(.fill_width) {
		max-width: 1200px !important;
	}
}

.merged-video,
.result-video {
	border-radius: var(--radius-xl) !important;
	aspect-ratio: 16/9 !important;
}

.run-button {
	padding: var(--spacing-xxl) calc(2 * var(--spacing-xxl)) !important;
	border-radius: var(--radius-xl) !important;
}

.tab-container {
	height: calc(2 * var(--size-8)) !important;
}

.tab-container * {
	font-family: var(--font), "Font Awesome 7 Free" !important;
}

.tab-container button {
	font-size: clamp(1rem, 0.82rem + 0.96vw, 1.3rem) !important;
	font-weight: 600 !important;
	padding: 0 var(--size-3) !important;
}

.tab-container::after {
	background-color: var(--neutral-600) !important;
}

.tab-wrapper {
	padding: 0 calc(2 * var(--spacing-lg)) var(--size-2) calc(2 * var(--spacing-lg)) !important;
}

.storyboard-arrow {
	display: none;
}

.storyboard-row {
	/* height: 100%; */
	min-height: 400px;
	flex-direction: column !important;
}

@media (min-width: 768px) {
	.storyboard-row {
		/* height: 500px !important; */
		flex-direction: row !important;
	}
}

.profi-einstellungen-accordion > button {
	& > span:nth-child(1) {
		font-size: 1rem !important;
		line-height: 1.5;
	}
	@media (min-width: 768px) {
		& > span:nth-child(1) {
			font-size: 1.3rem !important;
		}
	}
}

.einstellungen-seed-row {
	padding: 10px 0 !important;
	& .form {
		background: transparent !important;
		gap: 0 !important;
	}

	&:has(input[type="checkbox"]:checked) {
		& .einstellungen-seed > label > span::after {
			content: "(zuf\00E4llig \2713)";
			color: var(--primary-600);
			font-size: 0.8rem;
		}
	}
}

.einstellungen-seed,
.einstellungen-random-seed {
	padding: 0 !important;
}

.einstellungen-seed {
	flex: 1 0 0;
	min-width: min(140px, 100%) !important;
	overflow: visible !important;

	& label > div {
		width: calc(100% + 47px) !important;
	}

	& input[type="number"] {
		transition: color 0.3s ease-in-out;
		height: 47px !important;
		border-radius: var(--radius-xl) 0 0 var(--radius-xl) !important;
	}

	& input[type="number"]::-webkit-outer-spin-button,
	& input[type="number"]::-webkit-inner-spin-button {
		display: none;
	}
}

.einstellungen-guidance-scale-1 {
	padding: 10px 0 !important;
}

.einstellungen-random-seed {
	padding: 0 !important;
	min-width: min(47px, 100%) !important;
	flex: 0;
	display: flex;
	flex-direction: column-reverse;
	background: transparent !important;

	& > label:has(input[type="checkbox"])::after {
		content: "\f522";
		font-family: "Font Awesome 7 Free" !important;
		font-weight: 900;
		position: absolute;
		top: 3px;
		left: 2px !important;
		width: 40px;
		height: 40px;
		/* border-radius: 50%; */
		border-radius: var(--radius-lg) !important;
		background: transparent !important;
		/* box-shadow: var(--shadow-inset); */
		transition: left 0.2s ease-in-out, background 0.2s ease-in-out;
		color: var(--neutral-900) !important;
		text-align: center;
		line-height: 2.5rem;
		font-size: 1.4rem;
	}

	& > label:has(input[type="checkbox"]:checked)::after {
		content: "\f522";
		font-family: "Font Awesome 7 Free" !important;
		font-weight: 900;
		position: absolute;
		background: transparent !important;
		opacity: 1 !important;
		left: 2px !important;
	}

	& > label {
		position: relative;
		width: 47px !important;
		height: 47px;
		display: inline-block;
		border-radius: 0 var(--radius-xl) var(--radius-xl) 0 !important;
		background: var(--neutral-600) !important;
		box-shadow: var(--shadow-inset);
		transition: background 0.3s ease-in-out !important;
		/*border: 0.4px solid var(--border-color-primary);*/
		border: 1px solid var(--neutral-600) !important;
		cursor: pointer;

		& > input[type="checkbox"] {
			width: 0;
			height: 0;
			opacity: 0;
		}

		& > span {
			display: none;
		}
	}

	& > label:has(input[type="checkbox"]:checked) {
		background: var(--primary-600) !important;
	}
}

.einstellungen-rewrite-prompt {
	padding: 10px 0 !important;
	min-width: min(78px, 100%) !important;
	flex: 0;

	& > label:has(input[type="checkbox"])::after {
		content: "\f00d";
		font-family: "Font Awesome 7 Free" !important;
		font-weight: 900;
		position: absolute;
		background: transparent !important;
		left: 0;
		top: 0;
		font-family: "Font Awesome 7 Free" !important;
		width: 30px;
		height: 30px;
		line-height: 30px;
		border-radius: 50% !important;
		text-align: center;
		color: var(--neutral-900) !important;
	}

	& > label:has(input[type="checkbox"]:checked)::after {
		content: "\f00c";
		font-weight: 900;
		position: absolute;
		background: transparent !important;
		left: 0;
		top: 0;
		font-family: "Font Awesome 7 Free" !important;
		width: 30px;
		height: 30px;
		line-height: 30px;
		border-radius: 50% !important;
		text-align: center;
		color: var(--neutral-900) !important;
	}

	& > label:has(input[type="checkbox"])::before {
		content: "";
		position: absolute;
		width: 30px;
		height: 30px;
		background: var(--neutral-600) !important;
		border: 1px solid var(--neutral-600) !important;
		border-radius: 50% !important;
	}

	& > label:has(input[type="checkbox"]:checked)::before {
		content: "";
		position: absolute;
		width: 30px;
		height: 30px;
		background: var(--primary-600) !important;
		border: 1px solid var(--primary-600) !important;
		border-radius: 50% !important;
	}

	& > label {
		position: relative;
		width: 100%;
		height: 30px;
		display: inline-block;
		box-shadow: var(--shadow-inset);
		background: transparent;
		transition: background-color 0.3s, cursor 0.3s;
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--body-text-color);
		border: 0px solid rgba(255, 255, 255, 0.1) !important;
		font-size: 1.3rem !important;

		& > input[type="checkbox"] {
			/* width: 0;
			height: 0; */
			opacity: 0;
		}

		& > span {
			height: 27px;
			min-width: 100px;
			line-height: 0.5;
			white-space: nowrap;
			padding-left: 84px;
			/* font-size: 1.3rem !important; */
			/* justify-self: center; */
			/* align-self: center; */
			/* min-height: 47px; */
			overflow: hidden;
			padding: 4px 0px !important;
			padding-left: 8px !important;
		}
	}
}

@media (min-width: 768px) {
	.storyboard-arrow {
		/* display: block; */
		align-self: center;
		max-width: 30px;
		min-width: 30px;
		display: flex;
		justify-content: center;

		& .html-container {
			padding: 0 !important;
			margin: 0 auto;
			text-align: center;
			display: flex;
			justify-content: center;
		}
	}
}

.result-gallery div.gallery-container div.grid-wrap {
	/* padding: 0;
	padding-bottom: var(--spacing-md);
	overflow-y: hidden;
	overflow-x: scroll; */

	& .icon-button-wrapper {
		display: none;
		position: fixed !important;
		top: unset !important;
		right: unset !important;
		margin: var(--spacing-xxl);

		& button.icon-button > div {
			width: 22px !important;
			height: 22px !important;
		}
	}

	&::-webkit-scrollbar {
		height: 8px;
		width: 0;
	}

	&::-webkit-scrollbar-track {
		background-color: var(--neutral-800);
		border-radius: 4px;
	}

	&::-webkit-scrollbar-thumb {
		background-color: var(--primary-600);
		border-radius: 4px;
	}

	& .grid-container {
		/* display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		width: auto;
		height: 200px; */

		& .gallery-item {
			max-width: 280px !important;
		}

		& button.delete-button {
			/* top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%); */
			left: unset !important;
			right: var(--block-label-margin);
			top: var(--block-label-margin);
			border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) var(--radius-sm);
			border: 1px solid var(--border-color-primary);
		}

		& .gallery-item button.delete-button {
			opacity: 1;
		}

		& .gallery-item button.delete-button::after {
			content: "entfernen";
			padding-left: var(--spacing-md);
		}

		@media (min-width: 768px) {
			& .gallery-item:hover button.delete-button {
				opacity: 1 !important;
			}
			& .gallery-item button.delete-button {
				opacity: 0 !important;
			}
			& button.delete-button {
				opacity: 0 !important;
			}
		}
	}
}

.toggle-btn {
	display: flex;
	flex-direction: column-reverse;

	& > div.wrap {
		display: none;
	}

	& > div:not(.wrap) {
		margin-top: var(--spacing-lg);
		margin-bottom: 0;
	}

	& > label {
		position: relative;
		width: 78px;
		height: 47px;
		display: inline-block;
		border-radius: 13px;
		background: var(--neutral-700);
		box-shadow: var(--shadow-inset);
		transition: background-color 0.3s, cursor 0.3s;
		/*border: 0.4px solid var(--border-color-primary);*/
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
		cursor: pointer;

		& > input[type="checkbox"] {
			width: 0;
			height: 0;
			opacity: 0;
		}
	}

	& > label:has(input[type="checkbox"]:checked) {
		background: var(--primary-600);
	}
}

#wink,
#heart {
	display: inline;
	width: 26px;
	margin-bottom: 8px;
}

#wink {
	animation: wink 3s ease-in-out infinite;
}

#heart {
	animation: beat 2s ease-in-out infinite;
}

/* Keyframes */
@keyframes wink {
	0%,
	60%,
	100% {
		transform: rotate(0deg);
	}
	10%,
	30%,
	70%,
	90% {
		transform: rotate(14deg);
	}
	20%,
	80% {
		transform: rotate(-8deg);
	}
	40% {
		transform: rotate(-4deg);
	}
	50% {
		transform: rotate(10deg);
	}
}

@keyframes beat {
	0% {
		transform: scale(1);
	}
	5% {
		transform: scale(0.75);
	}
	20% {
		transform: scale(1);
	}
	30% {
		transform: scale(1);
	}
	35% {
		transform: scale(0.75);
	}
	50% {
		transform: scale(1);
	}
	55% {
		transform: scale(0.75);
	}
	70% {
		transform: scale(1);
	}
}

.run-button {
	transition: border 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
	border: 3px solid var(--button-primary-background-fill);
	box-shadow: none;
}
.run-button:hover {
	/* box-shadow: rgba(12, 121, 196, 0.27) -5px -4px 20px 3px, rgba(196, 18, 195, 0.19) -7px 7px 16px 3px, rgba(119, 237, 242, 0.14) 5px 5px 19px 3px; */
	box-shadow: rgba(12, 121, 196, 0.17) -5px -4px 20px 3px, rgba(196, 18, 195, 0.1) -7px 7px 16px 3px, rgba(119, 237, 242, 0.08) 5px 5px 19px 3px;
	border: 3px solid var(--primary-900);
	background-color: var(--primary-700) !important;
}

.logo {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;

	h1 {
		font-size: clamp(1.2rem, 0.12rem + 5.76vw, 3rem) !important;

		span.icon {
			font-family: "Font Awesome 7 Free";
			font-weight: 900;
		}

		span.logo-icon-1 {
			color: var(--color-accent) !important;
			transform: rotate(-5deg);
		}

		span.logo-icon-2 {
			color: #ffd43b !important;
		}
	}
}

.einstellungen-seed input[type="number"],
.einstellungen-seed > label > input {
	color: var(--neutral-100) !important;
}

.einstellungen-seed:has(input[type="number"]:disabled) input[type="number"] {
	color: var(--neutral-500) !important;
}

/* MARK: EXAMPLES */

#examples_1 {
	table {
		thead {
			td {
				display: none;
			}
			td:nth-child(1),
			td:nth-child(2) {
				display: block;
			}
		}
		tbody {
			& .container.selected {
				border: 0 !important;
			}

			td {
				display: none;
			}
			td:nth-child(1),
			td:nth-child(2) {
				display: block;
			}
		}
	}
}