_res/_custom.css

body {
	position: relative !important;

	/* MARK: Modal warning resolution  */
	& #resolution_modal_wrapper {
		--opacity-value: 1;
		position: absolute !important;
		inset: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 200;
		transition: opacity 0.6s ease-in-out, backdrop-filter 0.7s ease-in-out;
		backdrop-filter: blur(var(--blur-value));
		opacity: (--opacity-value);

		& #alertModal {
			position: absolute !important;
			top: 50%;
			left: 50%;
			width: 400px;
			max-width: 80vw !important;
			min-height: 140px;
			transform: translate(-50%, -50%);
			padding: var(--size-4) var(--size-8);
			background-color: var(--neutral-900) !important;
			transition: opacity 0.6s ease-in-out;
			opacity: (--opacity-value);

			border-top-width: 8px;
			border-right-width: 1px;
			border-bottom-width: 1px;
			border-left-width: 1px;
			border-top-style: solid;
			border-right-style: solid;
			border-bottom-style: solid;
			border-left-style: solid;
			border-top-color: var(--primary-600);
			border-right-color: var(--primary-600);
			border-bottom-color: var(--primary-600);
			border-left-color: var(--primary-600);
			border-radius: var(--container-radius);

			& #alertModalP {
				display: flex;
				justify-content: center;

				& span {
					color: var(--neutral-50);
					margin-top: 0rem;
					line-height: 1.4;
				}

				& svg {
					font-size: 4rem;
					margin-right: 1rem;
					color: var(--cat-red);
					fill: var(--cat-red);
				}
			}
		}
		& button {
			color: var(--text-color-by-luminance) !important;
		}
	}
	& > gradio-app {
		padding-top: 30px;
		position: relative;
	}
	& > gradio-app::before {
		position: absolute;
		content: "";
		background: var(--primary-900);
		background: linear-gradient(6deg, var(--primary-900) 0%, var(--primary-700) 100%);
		width: 100%;
		height: 355px;
		top: 0;
		z-index: 0;
		transition: filter 0.8s ease-in-out;
		filter: blur(var(--blur-value));
	}
}

body div.tabs > div.tab-nav {
	border-bottom: none !important;
	padding: 0 0.25rem 0 0.25rem !important;
	flex-wrap: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
}

div.tabs > div.tab-nav > button {
	color: var(--neutral-800);
	background: var(--primary-800) !important;
	opacity: 0.7 !important;
	min-width: 145px !important;
}

div.tabs > div.tab-nav > button.selected {
	border-width: 0 !important;
	background: var(--primary-600) !important;
	color: var(--neutral-950) !important;
	font-weight: 600;
}

div.tabs div.tabitem {
	background-color: var(--neutral-900) !important;
	border-top: 8px solid var(--primary-600) !important;
	border-radius: var(--container-radius) !important;
}

#input_column div.tabs > div.tab-nav > button {
	color: var(--neutral-50) !important;
	background: var(--neutral-800) !important;
	opacity: 0.7 !important;
	min-width: 145px !important;
}

#input_column div.tabs > div.tab-nav > button.selected {
	border-width: 0 !important;
	background: var(--primary-600) !important;
	color: var(--neutral-950) !important;
	font-weight: 600;
}

#input_column {
	& div.tabs div.tabitem {
		background-color: var(--neutral-800) !important;
		border: 0 solid var(--neutral-800) !important;
		border-top: 8px solid var(--primary-600) !important;
		border-right: 0 solid var(--neutral-800) !important;
		border-bottom: 0 solid var(--neutral-800) !important;
		border-left: 0 solid var(--neutral-800) !important;
		border-radius: var(--container-radius) !important;
		padding: 0 !important;
	}
}

.radio-btn-group {
	& label {
		font-weight: bold !important;
	}

	& label:has(input[type="radio"]:checked),
	label:has(input[type="radio"]:not(:checked)):hover {
		transition: color 0.4s ease-out, background 0.4s ease-out;
		color: var(--neutral-900) !important;
	}
}

.top-description h1 {
	color: var(--neutral-400);
	font-size: 2rem;
}

/* MARK: Toggle Button Checkbox */
/* INFO: gr.Checkbox elem_classes".toggle-btn" */

.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: 57px;
		height: 27px;
		display: inline-block;
		border-radius: 13px;
		background: var(--neutral-700);
		box-shadow: var(--shadow-inset);
		transition: background-color 0.3s, cursor 0.3s;
		border: solid 0.4px var(--border-color-primary);
		cursor: pointer;

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

		& > span {
			position: absolute;
			left: 60px;
			height: 27px;
			min-width: 140px;
			line-height: 27px;
		}
	}

	& > label:has(input[type="checkbox"])::after {
		content: "";
		position: absolute;
		top: 3px;
		left: 3px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--neutral-900);
		box-shadow: var(--shadow-inset);
		transition: left 0.2s ease-in-out, background 0.2s ease-in-out;
	}

	& > label:has(input[type="checkbox"]:checked)::after {
		content: "";
		position: absolute;
		background: var(--neutral-900);
		opacity: 0.8;
		left: 32px;
	}

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

/* MARK: Range Input */
input[type="range"].svelte-pc1gm4 {
	accent-color: var(--slider-color);
	background: var(--neutral-700) !important;
	background-image: linear-gradient(var(--slider-color), var(--slider-color)) !important;
	background-size: 0% 100%;
}

input[type="range"].svelte-pc1gm4::-webkit-slider-thumb {
	background-color: var(--primary-600);
	border-width: 0;
}

input[type="range"].svelte-pc1gm4::-webkit-slider-thumb:hover {
	background-color: var(--primary-500);
}

/* MARK: Text-Color Override */
label.svelte-1b6s6s,
label.svelte-9gxdi0,
span.svelte-1gfkn6j,
span.svelte-1gfkn6j,
.primary.svelte-cmf5ev,
label.selected.svelte-1k4wjf2.svelte-1k4wjf2.svelte-1k4wjf2 {
	color: var(--text-color-by-luminance) !important;
}

.md-header {
	& h1 {
		color: var(--primary-950) !important;
	}

	& p {
		color: var(--neutral-800) !important;
		line-height: 1.5 !important;
		font-size: 1.1rem !important;

		& i {
			display: inline-flex;
			align-items: center;
			justify-content: center;

			& svg {
				font-size: inherit !important;
				width: 16px !important;
				height: 16px !important;
			}
		}
	}
}