html, body {
	transition: background-color 0.4s ease, color 0.4s ease;
	scroll-behavior: smooth;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
	font-synthesis: weight style small-caps;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-stretch: expanded;

	font-variant: oldstyle-nums;
	scroll-behavior: smooth;
	text-wrap: balance;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@keyframes bodyFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

html {
	min-height:100%;
	outline: none;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	font-size: 14px;
	font-family: sans-serif;
}

.less_transparent_glass_box {
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.glass_box {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}


body {
	margin: 0px;
	cursor: default;
	height: fit-content;
	min-height: 100%;
	opacity: 0;
	animation: bodyFadeIn 1s ease forwards;
}

.container {
	margin: auto;
	padding: 10px;
}

.left {
	width: 15%;
	float: left;
	height: auto;
}

.right {
	margin-left: 15%;
	height: auto;
}

#error {
	color: red;
	background-color: white;
}

#logout {
	color: red;
}

.configtable {
	width: 100%;
}

#output {
	max-width: 120px;
	max-height: 120px;
}

.layer {
	min-height: 40px;
	margin-bottom: 5px;
	transition: opacity 0.4s var(--ease-physics), transform 0.4s var(--ease-physics), margin 0.4s var(--ease-physics);
}

.current {
	overflow: auto;
}

#progressbar {
	margin-top: 20px;
}

.progress-label {
	font-weight: bold;
	text-shadow: 1px 1px 0 #fff;
}

.ui-dialog-titlebar-close {
	display: none;
}

.layer_data {
	overflow-y: auto;
}

#predict_error {
	color: white;
	background-color: red;
}

.kernel_layer_image {
	image-rendering: crisp-edges;
	margin: 5px;
}

.layer_image {
	image-rendering: crisp-edges;
	margin: 5px;
	border: 1px black dotted;
}

.image_grid {
	overflow-y: auto;
}

.upload-btn-wrapper {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.btn {
	border: 2px solid gray;
	color: gray;
	background-color: white;
	padding: 8px 5px;
	font-weight: bold;
}

.upload-btn-wrapper input[type="file"] {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

.side_by_side_container {
	width: 99%;
	margin: 10px;
	margin-bottom: 30px;
}

.left_side {
	min-width: 500px;
	float: left;
	margin-left: -40px;
}

.right_side {
	overflow: hidden;
	margin-bottom: 50px;
	opacity: 0.95;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.draggable_item {
	padding: 0px;
}

.ribbon-toolbar {
	margin: auto;
	text-align: center;
}

.optimizer_metadata_input {
	max-width: 100px;
}

.ribbon_tab_content {
}

.warning_container {
	background-color: red;
}

.warning_layer {
}

.placeholder {
	outline: 1px dashed #0f0f0f;
}

.input_image_grid {
	overflow-y: auto;
}

.add_remove_layer_button {
	width: 30px;
	margin-left: 1px;
	margin-right: -5px;
	cursor: pointer;
}

.add_category {
	color: #00ff00;
	font-size: 2vw !important;
}

.remove_layer {
	color: #00ff00;
	font-size: 20px;
}

.add_layer {
	color: #00ff00;
	font-size: 20px
}

.remove_layer {
	color: red;
}

.layer_data_visualizations {
	display: flex;
	align-items: center;
}

.symbol_button {
	user-select: none;
}

.enabled_symbol {
	color: #4272c5;
	cursor: pointer;
}

.disabled_symbol {
	cursor: not-allowed;
	opacity: 0.7;
	mix-blend-mode: luminosity;
}

.popup {
	position: absolute;
	min-width: 600px;
	width: 99%;
	z-index: 999;
	display: none;
	top: 0;
	left: 0;
	border: 1px solid #ddd;
	overflow: hidden;
	margin: 10px;
	transform: translateY(-10px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.layer_setting {
	width: 350px;
}

.input_field {
	width: 100%;
}

.layer_type {
}

.vg-tooltip-hidden {
	display: none !important;
}

.kernel_initializer_tr {
	background-color: rgba(16, 255, 147, 0.4);
}

.activity_initializer_tr {
	background-color: rgba(10, 190, 6, 0.4);
}

.gamma_initializer_tr {
	background-color: rgba(10, 255, 16, 0.4);
}

.recurrent_initializer_tr{
	background-color: rgba(0, 3, 231, 0.4);
}

.moving_mean_initializer_tr {
	background-color: rgba(122, 35, 255, 0.4);
}

.moving_variance_initializer_tr {
	background-color: rgba(122, 35, 16, 0.4);
}

.beta_initializer_tr {
	background-color: rgba(102, 205, 206, 0.4);
}

.bias_initializer_tr {
	background-color: rgba(147, 255, 16, 0.4);
}

.depthwise_initializer_tr {
	background-color: rgba(255, 128, 0, 0.4);
}

.pointwise_initializer_tr {
	background-color: rgba(0, 200, 255, 0.4);
}

.bias_regularizer_tr {
	background-color: rgba(255, 147, 16, 0.4);
}

.activity_regularizer_tr {
	background-color: rgba(125, 11, 125, 0.4);
}

.kernel_regularizer_tr {
	background-color: rgba(50, 10, 155, 0.4);
}

.beta_regularizer_tr {
        background-color: rgba(0, 200, 100, 0.4); /* grünlich */
}

.gamma_regularizer_tr {
        background-color: rgba(200, 0, 200, 0.4); /* violettlich */
}

.activation_tr {
	background-color: rgba(52, 120, 155, 0.4);
}

.medium_vskip {
	height: 15px;
}

.small_vskip {
	height: 5px;
}

#last_layer_shape_warning {
	background-color: white;
	color: red;
}

#demomode {
	width: 100%;
	padding: 10px;
	margin: 10px;
}

.layer_type {
	width: 180px;
}

#ribbon {
	width:100%;
	height: 165px;
	overflow-y: hidden;
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	border-bottom: 1px solid gray;
	text-transform: capitalize;
	z-index: 99999;
}

#maindiv {
	position: relative;
	width: 98%;
	-moz-transform: scale(1);
	-moz-transform-origin: 0 0;
	margin-top: 0vw;
}

#history_table>table, #history_table>th, #history_table>td {
	border: 1px solid ;
}

#summary {
	overflow: auto;
	text-align: center;
}

.remove_layer {
	position: absolute;
	left: 46px;
}

.layer_identifier {
	position: absolute;
	left: 85px;
	margin-top: 6px;
	font-variant-numeric: oldstyle-nums;
}

#optimizer_table {
	margin-top: -10px;
}

.class_download_img {
	margin: 1px;
}

.max_prediction {
	color: #0FFF50 !important;
}

.own_image_span {
	user-select: none;
	display: inline-block;
	margin-right: 5px;
	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

button:disabled {
	color: #555555;
}

button:disabled:hover {
	color: #555555;
	background-color: red;
	cursor: not-allowed;
}

.ui-tabs-tab, .ribbon-toolbar, .ribbon-group-title, .descriptions_of_layers, .layer_identifier, .layer_options_internal, .layer_setting {
	user-select: none;
}

.loss_explanation {
	width: 100%;
}

#wizard_lr {
	display: flex;                  /* establish flex container */
	flex-direction: row;            /* default value; can be omitted */
	flex-wrap: nowrap;              /* default value; can be omitted */
	justify-content: space-between; /* switched from default (flex-start, see below) */
}

#tensor_number_debugger {
	color: white;
}

.layer_nr_desc {
	display: none;
}

.descriptions_of_layers {
	opacity: 0;
	transform: scaleY(0.8);
	font-size: 12px;
	border-radius: 5px;
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;
	writing-mode: vertical-rl;
	background-color: white;
	width: 55px;
	text-align: center;
	transition:
	top 200ms ease,
	left 200ms ease,
	height 200ms ease,
	opacity 200ms ease,
	transform 200ms ease,
	background-color 0.3s ease;
}

#webcam_prediction {
	font-size: 20px;
}

#prediction {
	font-size: 20px;
}

#handdrawn_predictions {
	font-size: 20px;
}

.predict_demo_result {
	font-size: 20px;
}

#webcam_data {
	position: fixed;
	left: 10px;
	bottom: 30px;
	z-index: 99999;
}

.fireworks-container {
	z-index: 10;
	top: 0;
	left: 0;
	position: fixed;
	height: 100%;
	width: 100%;
	display: none;
}

#imprint_span {
	line-break: normal !important;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

#status_bar {
	line-break: anywhere;
	user-select: none;
	height: 1.5em;
	width: 100%;
	position: fixed;
	bottom: 0px;
	border: 1px groove #626262;
	z-index: 99999;
	padding-bottom: 5px;
}

#data_progressbar {
	margin-top: 4px;
	display: none;
	height: 3px;
	background-color: #909090;
	padding: 3px;
	width: 100px;
}

#data_progressbar>div{
	background-color: orange;
	width: 0%;
	height: 3px;
}

#data_progressbar > div,
#training_progressbar > div,
.bar > span {
	transition: width 0.4s ease;
}

.bar {
	margin-top: 4px;
	display: inline-block;
	height: 3px;
	background-color: #909090;
	padding: 5px;
	width: 50px;
}

.bar>span{
	background-color: orange;
	width: 0%;
	height: 5px;
	display: block;
}

.highest_bar {
	background-color: #0FFF50 !important;
}

#training_progressbar {
	margin-top: 4px;
	display: inline-block;
	height: 3px;
	background-color: #909090;
	padding: 3px;
	width: 100px;
}

#training_progressbar>div{
	background-color: orange;
	width: 0%;
	height: 3px;
}

#status_bar_log {
	margin-top: 4px;
}

#layers_container {
	margin-bottom: 50px;
}

.graphs_here {
	margin-top: 6vh;
	padding-left: 30px;
	margin-left: 30px;
	margin-bottom: 30px;
}

.fenced {
	height: auto;
	width: auto;
	min-width: 1em;
	padding-left: 0.5em;
	display: inline flow-root;

	border-left: 3px solid;
	border-right: 3px solid;

	border-top-left-radius: 1em 5em;
	border-bottom-left-radius: 1em 5em;

	border-top-right-radius: 1em 5em;
	border-bottom-right-radius: 1em 5em;

	padding-left: 20px;
	padding-right: 20px;
}

.full_width_hr {
	width: 100%;
}

.layer_data_flow_item {
	margin: 3px;
}

.best_result {
	background-color: green !important;
	color: white;
}

.start_training {
	background-color: #9ACD32;
	color: black;
}

.stop_training {
	background-color: #ff9696;
	color: black;
}

.ribbon-group {
	margin: 0px;
	padding: 0px;
}

#memory_debugger_div {
	right: 5px;
	position: absolute;
}

#register {
	color: white;
	user-select: none;
}

.download_link {
	color: red;
}

/*
.predict_table {
border: 1px solid #e5e5e5;
border-collapse: collapse;
}

.predict_table>tbody>tr>td {
border: 1px solid #e5e5e5;
border-collapse: collapse;
}
 */

	.atrament_buttons_small {
	}

	.atrament_buttons {
		font-size: 3vw;
	}

	.green_icon {
		filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
		-webkit-filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
		-moz-filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
		-o-filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
		-ms-filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
	}

	.dark_mode_inverted {
		filter: invert(100%);
		-webkit-filter: invert(100%);
		-moz-filter: invert(100%);
		-o-filter: invert(100%);
		-ms-filter: invert(100%);
	}

	.no_mark {
		user-select: none;
	}

	.glass_box:before {
		content: "";
		position: absolute;
		background: inherit;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.less_transparent_glass_box:before {
		content: "";
		position: absolute;
		background: inherit;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.ui-state-hover a,
	.ui-state-hover a:hover,
	.ui-state-hover a:link,
	.ui-state-hover a:visited,
	.ui-state-focus a,
	.ui-state-focus a:hover,
	.ui-state-focus a:link,
	.ui-state-focus a:visited,
	a.ui-button:hover,
	a.ui-button:focus {
		color: #0070a3;
		text-decoration: none;
	}

	hr {
		padding: 0;
		border: none;
	}

	input {
		line-height: 1.5em;
		background-color: rgba(255,255,255,0.5);
		border: none;
		border-radius: 5px;
	}

	.label_input_element {
		width: 130px;
		padding-left: 0px;
		box-shadow: none !important;
		outline: none;
	}

	#math_tab {
		overflow: scroll;
		width: 99%; 
		max-height: 100%; 
		font-size: 1vw;
	}

	.link:link, .link:active, .link:visited, .link:hover, .link:active {
		color: white;
	}

	select {
		border-radius: 5px;
		border: 1px solid rgba(50, 50, 50, 0);
		height: 20px;
	}

	.ui-state-active,
	.ui-widget-content .ui-state-active,
	.ui-widget-header .ui-state-active,
	a.ui-button:active,
	.ui-button:active,
	.ui-button.ui-state-active:hover {
		border: 1px solid #585858;
		font-weight: bold;
	}

	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default,
	.ui-button,
	html .ui-button.ui-state-disabled:hover,
	html .ui-button.ui-state-disabled:active {
		color: #2779aa;
	}

	.ui-state-default a,
	.ui-state-default a:link,
	.ui-state-default a:visited,
	a.ui-button,
	a:link.ui-button,
	a:visited.ui-button,
	.ui-button {
		color: #2779aa;
		text-decoration: none;
	}

	.ui-state-active a,
	.ui-state-active a:link,
	.ui-state-active a:visited {
		text-decoration: none;
	}

	.robot_large_button {
		font-size: 4em !important;
		border: 1px solid rgba(255,0,0,0);
		outline: none;
		border-radius: 5px;
		margin: 15px
	}

	.large_button {
		font-size: 2em !important;
		border: 1px solid rgba(255,0,0,0);
		outline: none;
		border-radius: 5px;
		margin: 15px
	}

	button {
		outline: none;
		border-radius: 5px;
	}

	button, select, input, textarea, checkbox, .large_button {
		margin: 1px;
		height: auto;
		border-color: transparent !important;
		box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
	}

	.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
	.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
	.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
		color: black;
	}

	.ui-state-default:hover {
		background: #c2c0c0;
		border: 1px solid #bababa;
		color: #2779aa;
	}

	.ui-tabs-active {
		border: 1px solid #bababa;
		color: #2779aa;
	}

	#save_model_content {
		background: rgba(0, 200, 140, 0.4);
		border: 2px solid rgba(0, 200, 140, 0.4);
	}

	#register_content {
		background: rgba(0, 200, 140, 0.4);
		border: 2px solid rgba(0, 200, 140, 0.4);
	}

	.inline_block {
		display: inline-block;
	}

	.display_contents {
		display: contents !important;
	}

	.block {
		display: block;
	}

	.full_example_image_prediction {
		width: fit-content;
		display: inline-block;
		margin: 20px;
		padding: 10px;
		text-align: center;
		margin-top: 10px;
		padding: 10px;
	}

	.rotate_90_deg {
		rotate: 90deg;
	}

	.only_when_webcam {
		display: none;
	}

	.only_when_webcam_on {
		display: none;
	}

	.no_box_shadow {
		box-shadow: none !important;
	}

	.only_show_when_predicting_image_file {
		display: none;
	}

	#custom_webcam_training_data {
		user-select: none;
	}

	#own_files {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.no_border_button {
		display: contents;
	}

	.overlay_each_other {
	}

	.overlay_each_other div {
		padding: 0px;
	}

	#canvas_grid_visualization {
		pointer-events: none;
		display: block ruby;
		z-index: 999999;
		position: absolute;
		top: 80px;
		left: 0px;
		opacity: 0.5;
	}

	.own_image_upload_container {
		border: 1px solid gray;
		margin: 10px;
		padding: 10px;
		width: fit-content;
		border-radius: 5px;
	}

	#robot_layer {
		box-shadow: none !important;
	}

	.fireworks-container {
		pointer-events: none;
	}

	#cosmo_presentation {
		margin-left: auto;
		margin-right: auto;
		display: block;
	}

	.slide {
		margin-left: auto;
		margin-right: auto;
		display: block;
		max-width: 100%;
		max-height: 100%;
		background-color: white;
		pointer-events: none;
		display: none;
	}

	.custom_image_data {
		display: inline;
		float: left;
	}

	.show_only_in_cosmo_mode {
		display: none;
	}

	.data_flow_visualization {
		user-select: none;
	}

	#layer_visualizations_tab {
		text-align: center;
	}

	.tt {
		font-family: monospace;
		background-color: #D3D3D3;
	}

	.width_250 {
		width: 250px;
	}

	.width_335 {
		width: 335px;
	}

	.width_254 {
		width: 254px;
	}

	.table_border_1px {
		border: 1px black;
	}

	#scads_logo_cosmo_mode {
		height: 5vw;
		position: absolute;
		left: 0.1vw;
		top: 0.1vw;
		display: none;
	}

	#emergency_button {
		display: none;
		z-index: 999999999999;
		width: 5vw;
		max-height: 6vw; 
		position: absolute; 
		top: 0.1vw; 
		right: 0.1vw; 
	}

	#asanai_logo_cosmo {
		display: none;
		z-index: 999999999999; 
		max-width: 4.5vw; 
		height: 4.5vw; 
		position: absolute; 
		margin: auto; 
		left: 0px; 
		right: 0px; 
		text-align: center; 
		top: 0.1vw;
	}

	.pen_size_slider {
		width: 100px;
	}

	#load_msg {
		position: absolute;
		bottom: 5%;
	}

	.green_bg {
		background-color: #4CAF50; /* Green */
	}

	.cosmo_button {
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
	}

	.cosmo_autoset_text {
		min-height: 50px;
		position: fixed;
		right: 100px;
		display: contents;
	}

	#webcam {
		display: contents;
		height: 332px;
	}

	#photos {
		user-select: none;
	}

	.h2_maximally_activated_layer_contents {
		margin: 0px;
	}

	hr {
		margin-top: 0;
		margin-bottom: 0;
	}

	.user_select_none {
		user-select: none;
	}

	.set_all_initializers_input {
		width: 80px;
	}

	.progressbar {
		text-align: right;
	}

	.label_element {
		text-align: left;
		height: 40px;
		min-width: 135px;
	}

	#hr_nav {
		width: 100%;
	}

	.error_msg {
		background-color: red;
		color: white;
	}

	.cosmo_hr {
		max-width: 500px;
		width: 50%;
		min-width: 100px;
		margin-top: 25px;
		margin-bottom: 25px;
	}

	.example_imgs_cosmo_mode {
		margin-left: 2em;
		margin-right: 2em;
	}

	.cosmo_example_table {
		text-align: center;
	}

	.force_display_flex {
		display: flex !important;
	}

	#skip_presentation_button {
		font-size: 2vw;
		width: 10vw;
		height: 4vw;
		background-color: #E42217;
		color: white;
		position: absolute;
		right: 12vw;
		bottom: 0.5vw;
		z-index: 10000;
	}

	.cosmo_labels_above_generated_images {
		margin-left: 100px; 
		margin-right: 100px; 
		display: inline-block;
	}

	.maximally_activated_predictions>.predict_table {
		width: 200px;
	}

	.no_mark {
		display: flex;
	}

	#toggle_layer_view_button {
		user-select: none;
		position: absolute;
		top: 6px;
		right: 10px;
	}

	.error_line {
		background-color: red;
		color: white;
	}

	#maximally_activated {
		user-select: none;
	}

	.tab {
		display: none;
	}

	.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
		font-variant-caps: petite-caps;
		letter-spacing: 0.03em;
	}

	::placeholder {
		color: rgb(127, 127, 127);
	}

	.confusion_matrix_tx {
		border: 1px rgb(127, 127, 127) solid;
	}

	.confusion_matrix_table {
		border-collapse: collapse;
	}

	#predictcontainer {
		overflow: auto;
	}

	.neurons_canvas_class {
		max-width: 100%;
		margin: 10px;
		border: 1px black dotted;
	}

	#overview_table_custom_imgs {
		position: absolute;
		top: 50px;
		right: 50px;
	}

	#layer_visualizations_tab {
		margin-bottom: 50px;
	}

	#csv_parse_errors {
		color: red;
	}

	#lenet {
		user-select: none;
	}

	#right_side {
		margin-bottom: 80px;
	}

	#custom_function_error {
		color: red;
	}

	#prediction_non_image {
		font-size: 1.5vw;
	}

	.ribbon_icon_large {
		height: 55px;
	}

	.icon_small {
		height: 15px;
	}

	.ribbon_icon {
		height: 20px;
	}

	.large_icon {
		height: 55px;
	}

	.force_small_letters {
		text-transform: lowercase;
	}

	#summary {
		font-variant-numeric: oldstyle-nums;
	}

	.typeset_me {
		font-variant-numeric: oldstyle-nums;
	}

	input, select {
		font-variant-numeric: oldstyle-nums;
	}

	#log {
		font-family: sans-serif;
		font-variant-numeric: oldstyle-nums;
	}

	.spinner {
		will-change: transform;
		border: 8px solid rgba(0, 0, 0, 0.1); /* Light mode spinner color */
		border-left: 8px solid #3498db; /* Spinner color */
		border-radius: 50%;
		width: 50px;
		height: 50px;
		animation: spin 1s linear infinite;
	}

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

	.undo_redo_button {
		display: none;
	}

	.labelSidebar {
		user-select: none;
	}

	.ui-tabs .ui-tabs-nav li.ui-tabs-active {
		cursor: pointer;
		user-select: none;
		transition: all 0.1s ease;
	}

	#math_tab_code {
		width: fit-content;
	}

	#example_predictions_parent {
		display: flex;
		justify-content: center;
	}

	.ui-tabs-tab {
		padding: 2px !important;
		border-radius: 5px 5px 0px 0px;
	}

	#predict_own_data {
		min-width: 50vw;
	}

	#summary {
		padding: 10px;
	}

	#summary_table {
		border-collapse: separate; /* nötig für runde Ecken */
		border-spacing: 0;
		border-radius: 4px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		font-family: Arial, sans-serif;
		width: 100%;
		max-width: 600px;
		margin: 20px 0;
	}

	#summary_table th, #summary_table td {
		padding: 5px;
	}

	#created_video_element {
		width: 100%;
		max-height: 120px;
	}

	.layer_data::after {
		content: "\A";
		white-space: pre;
	}

	#webcam_tab {
		text-align: center;
	}

	.custom_csv_table_td {
		vertical-align: baseline;
	}

	#custom_csv_settings_table {
		width: 100%;
		border-collapse: collapse;
	}

	#custom_csv_settings_table tr:nth-child(even) {
		background-color: rgba(120, 120, 120, 0.2);
	}

	#custom_csv_settings_table tr:nth-child(odd) {
		background-color: transparent;
	}

	#custom_csv_settings_table th,
	#custom_csv_settings_table td {
		padding: 2px;
		text-align: left;
	}

	#xy_display_data {
		text-align: center;
	}

	.atrament_form {
		margin-bottom: 20px;
		margin-top: 20px;
		white-space: nowrap;
	}

	.buttons_in_custom_images {
		margin: 10px;
	}

	#robot_layer {
		outline: none !important;
	}

	.ribbon_icon {
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.ribbon_icon:hover {
		transform: scale(1.1);
		filter: brightness(1.1);
		opacity: 0.8;
	}

	.symbol_button {
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.symbol_button:hover {
		transform: scale(1.1);
		filter: brightness(1.1);
		opacity: 0.8;
	}

	input, textarea, select {
		border: 1px solid #ccc;
		transition: box-shadow 0.2s ease, border-color 0.2s ease;
	}

	input:focus, textarea:focus, select:focus {
		border-color: #0078ff;
		box-shadow: 0 0 5px rgba(0,120,255,0.5);
		outline: none;
	}

	#summary_table tr {
		transition: background-color 0.15s ease;
	}

	#summary_table tr:hover {
		background-color: rgba(0, 120, 255, 0.08);
	}

	.layer_image:hover {
		cursor: pointer;
	}

	:root {
		--ease-physics: cubic-bezier(0.22, 1, 0.36, 1);
	}

	.mark_red_and_blink {
		filter: brightness(0) saturate(100%) invert(14%) sepia(88%) saturate(7497%) hue-rotate(354deg) brightness(96%) contrast(108%);
		animation: soft-blink 2s infinite ease-in-out;
	}

	@keyframes soft-blink {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.7; }
	}

	#math_tab {
		user-select: none;
	}

	#xy_display_data {
		user-select: none;
	}

	.temml_me {
		user-select: none;
	}

	:root {
		--img-scale: 1;
	}

	.layer_image {
		width: calc(var(--base-w, 100px) * var(--img-scale));
		height: calc(var(--base-h, 100px) * var(--img-scale));
		object-fit: contain;
	}

	.descriptions_of_layers.visible {
		opacity: 1;
		transform: scaleY(1);
	}

	.conv_visual_explanation {
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.dense_visual_explanation {
		max-width: 200px;
	}

	.visual_explanations {
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	@keyframes featureMapPulse {
		0%   { box-shadow: 0 0 6px 2px rgba(0, 170, 255, 0.6); }
		50%  { box-shadow: 0 0 18px 6px rgba(0, 170, 255, 1.0); }
		100% { box-shadow: 0 0 6px 2px rgba(0, 170, 255, 0.6); }
	}
	@keyframes featureMapBorderPulse {
		0%   { border-color: rgba(0, 170, 255, 0.5); }
		50%  { border-color: rgba(0, 170, 255, 1.0); }
		100% { border-color: rgba(0, 170, 255, 0.5); }
	}
	.feature-map-working {
		will-change: box-shadow, border-color;
		border: 3px solid rgba(0, 170, 255, 0.8);
		border-radius: 6px;
		animation: featureMapPulse 1.2s ease-in-out infinite,
		featureMapBorderPulse 1.2s ease-in-out infinite;
	}
	.feature-map-done {
		border: 3px solid transparent;
		border-radius: 6px;
		animation: none;
		transition: border-color 0.4s ease, box-shadow 0.4s ease;
		box-shadow: none;
	}

	#summary_table tr:nth-child(even) {
		background-color: rgba(0, 0, 0, 0.02);
	}

	#summary_table th {
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		font-size: 0.85em;
		opacity: 0.7;
	}

	:root {
		--plotly-font-color: #2d3436; /* Light Mode */
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--plotly-font-color: #dfe6e9; /* Dark Mode */
		}
	}

	/* ============================================================
	MATH EDITABLE VARIABLES - Popup & Inline Styles
	============================================================ */

	/* Inline editable number */
	.math-ed-wrap {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		vertical-align: baseline;
		margin: 0 2px;
	}

	.math-ed-num {
		display: inline-block;
		cursor: pointer;
		padding: 1px 5px;
		border-radius: 4px;
		transition: all 0.12s;
		font-family: "Temml", KaTeX_Main, "Times New Roman", serif;
		font-size: 1.05em;
		color: #53d8fb;
		vertical-align: baseline;
		min-width: 2.2em;
		text-align: center;
	}

	.math-ed-num:hover {
		background: rgba(83, 216, 251, 0.15);
		box-shadow: 0 0 8px rgba(83, 216, 251, 0.15);
	}

	.math-ed-num.math-ed-active {
		background: rgba(233, 69, 96, 0.22);
		box-shadow: 0 0 10px rgba(233, 69, 96, 0.25);
		color: #e94560;
	}

	.math-ed-label {
		font-size: 0.55em;
		color: #667;
		font-family: monospace;
		line-height: 1;
		margin-top: 1px;
		white-space: nowrap;
	}

	/* Popup editor */
	.math-pop-ed {
		position: fixed;
		z-index: 99999;
		background: #14142a;
		border: 1px solid #53d8fb;
		border-radius: 9px;
		padding: 12px 14px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
		display: none;
		min-width: 230px;
		font-family: 'Segoe UI', system-ui, sans-serif;
	}

	.math-pop-ed.math-pop-visible {
		display: block;
	}

	.math-pop-label {
		font-size: 0.78em;
		color: #889;
		display: block;
		margin-bottom: 4px;
		font-weight: bold;
	}

	.math-pop-row {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 6px;
	}

	.math-pop-row input[type=number] {
		width: 90px;
		background: #08080f;
		border: 1px solid #2a2a4a;
		color: #53d8fb;
		padding: 5px 7px;
		border-radius: 4px;
		font-family: monospace;
		font-size: 0.9em;
		text-align: center;
	}

	.math-pop-range {
		font-size: 0.65em;
		color: #445;
	}

	.math-pop-ed input[type=range] {
		width: 100%;
		-webkit-appearance: none;
		height: 5px;
		border-radius: 3px;
		background: #2a2a4a;
		outline: none;
		margin: 6px 0;
	}

	.math-pop-ed input[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #e94560;
		cursor: pointer;
		border: 2px solid #fff;
	}

	.math-pop-actions {
		display: flex;
		justify-content: flex-end;
		gap: 6px;
		margin-top: 6px;
	}

	.math-pop-btn {
		padding: 3px 10px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 0.75em;
	}

	.math-pop-btn-reset {
		background: #1a1a30;
		color: #889;
	}

	.math-pop-btn-reset:hover {
		background: #2a2a40;
	}

	.math-pop-btn-close {
		background: #301414;
		color: #e94560;
	}

	.math-pop-btn-close:hover {
		background: #501a1a;
	}

	/* Hybrid formula rows */
	.math-hybrid-row {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0;
		margin: 2px 0;
		line-height: 2.6;
	}

	.math-hybrid-row.math-hybrid-indent {
		padding-left: 20px;
	}

	.math-hybrid-tex {
		display: inline-block;
		vertical-align: baseline;
	}

	/* Light theme overrides */
	body:not(.darkmode) .math-ed-num {
		color: #0066cc;
	}

	body:not(.darkmode) .math-ed-num:hover {
		background: rgba(0, 102, 204, 0.1);
	}

	body:not(.darkmode) .math-pop-ed {
		background: #ffffff;
		border-color: #0066cc;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	}

	body:not(.darkmode) .math-pop-row input[type=number] {
		background: #f5f5f5;
		border-color: #ddd;
		color: #0066cc;
	}

	/* Dark mode (default for your app) */
	.math-pop-ed.math-pop-dark {
		background: #14142a;
		border: 1px solid #53d8fb;
		color: #eee;
	}

	.math-pop-dark .math-pop-label {
		color: #aab;
	}

	.math-pop-dark input[type=number] {
		background: #08080f;
		border: 1px solid #2a2a4a;
		color: #53d8fb;
	}

	.math-pop-dark input[type=range]::-webkit-slider-runnable-track {
		background: #2a2a4a;
	}

	.math-pop-dark .math-pop-btn-reset {
		background: #1a1a30;
		color: #889;
	}

	.math-pop-dark .math-pop-btn-close {
		background: #301414;
		color: #e94560;
	}

	/* Light mode */
	.math-pop-ed.math-pop-light {
		background: #ffffff;
		border: 1px solid #0066cc;
		color: #333;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	}

	.math-pop-light .math-pop-label {
		color: #555;
	}

	.math-pop-light input[type=number] {
		background: #f5f5f5;
		border: 1px solid #ccc;
		color: #0066cc;
	}

	.math-pop-light input[type=range]::-webkit-slider-runnable-track {
		background: #ddd;
	}

	.math-pop-light .math-pop-btn-reset {
		background: #f0f0f0;
		color: #555;
	}

	.math-pop-light .math-pop-btn-close {
		background: #fee;
		color: #c00;
	}

	/* Editable number colors adapt to theme */
	.math-pop-dark ~ .math-ed-num,
	.math-ed-num {
		color: #53d8fb;
	}

	.math-pop-light ~ .math-ed-num {
		color: #0066cc;
	}

	.math-pop-ed {
		position: fixed;
		z-index: 9999;
}