@font-face {
	font-family: "Geist Mono";
	src: url("file=_res/assets/webfonts/GeistMono-Thin.woff2") format("woff2");
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: "Geist Mono";
	src: url("file=_res/assets/webfonts/GeistMono-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Geist Mono";
	src: url("file=_res/assets/webfonts/GeistMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Geist Mono";
	src: url("file=_res/assets/webfonts/GeistMono-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: "Geist Mono";
	src: url("file=_res/assets/webfonts/GeistMono-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
}


/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

/* Track */
::-webkit-scrollbar-track {
    background: var(--neutral-900);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--primary-600);
    border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-800);
}


body>gradio-app {
    transition: opacity 0.4s linear;
    position: relative;
}

body>gradio-app::before {
    position: absolute;
    content: "";
    background: var(--primary-800);
    width: 100%;
    height: 355px;
    top: 0;
    z-index: 0;
    transition: filter 0.4s ease-out;
    filter: blur(var(--blur-value));
}

body>gradio-app.has-bg-image::before {
    background-image: var(--bg-image-path);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(12px);

}

gradio-app {
    padding-top: 30px !important;

    & #alertModal {
        position: absolute;
        top: 250px;
        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;

        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;
        }
    }
}

div.gradio-container {
    font-family: "Geist Mono", sans-serif !important;
	font-weight: 400;
    transition: filter 0.4s ease-out;
    /* max-width: 80% !important; */

    & div.row-main {
        background-color: var(--neutral-900) !important;
        border-right-width: 0px !important;
        border-bottom-width: 0px !important;
        border-left-width: 0px !important;
        border-top: 8px solid var(--primary-600) !important;
        border-radius: var(--container-radius) !important;
        padding: var(--size-4) var(--size-8);
    }

    & .inp-options {

        & div:last-child {
            display: flex;
            gap: var(--checkbox-label-gap);
            flex-direction: column;
        }

        & div>label>input {
            display: none;
        }

        & div>label>span {
            margin-left: 0;
        }

    }

    & span.has-info+div {
        margin-top: var(--spacing-lg);
    }

    & #examples .label {
        color: var(--neutral-50);
    }

    & .md-header {
    	padding: var(--size-2) var(--size-1);
    	& h1 {
    		color: var(--text-color-by-luminance) !important;
    	}
    
    	& p,
    	span {
    		color: var(--text-color-by-luminance) !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;
    			}
    		}
    	}
    }


}

div.gradio-container.blur-container {
    filter: blur(12px);
    pointer-events: none;
}

/* 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;
}

/* MARK: Run BTN switch Animation */
#run_btn {
  >dotlottie-player {
    display: none;
  }
}
#run_btn.run-btn-running {
  >svg {
    display: none;
  }
  >dotlottie-player {
    display: block;
  }
}