@font-face {
    font-family: 'Inter';
    src: url('../../fonts/Inter.woff2') format('woff2');
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url('../../fonts/MaterialSymbolsOutlined.woff2') format('woff2');
}

:root {
    /* Shared */
    --background-danger: #200b0b;
    --button-border: #3f3f46;
    --red: #ff0000;
    --green: #00ff00;
    --danger-button-background-hover: color-mix(in srgb, #550000 70%, black);
    --danger-button-foreground-hover: #aaaaaa;
    --danger-button-border: #3f3f46;
    --danger-button-foreground: #ffffff;
    --danger-button-background: #550000;
    --button-background-disabled: #3f3f46;
    --batch-0: rgba(200, 200, 200, 0.3);
    --batch-1: rgba(200, 200, 200, 0.3);
    --popup-back: var(--background);
    /* Common overrides */
    --button-background-hover: color-mix(in srgb, var(--button-background) 70%, white) !important;
    --button-foreground-hover: var(--button-text);
    --qbutton: var(--emphasis);
    --box-selected-background: color-mix(in srgb, var(--emphasis) 20%, transparent);
    --box-selected-background-stronger: color-mix(in srgb, var(--emphasis) 30%, transparent);
    --box-selected-border: color-mix(in srgb, var(--emphasis) 70%, transparent);
    --box-selected-border-stronger: color-mix(in srgb, var(--emphasis) 80%, transparent);

    /* Theme specific */
    --panel-gap: 7px;
    --scrollbar: rgba(100, 100, 100, 0.5);
}

#Text2Image .basic-button:not(.image_editor_newlayer_button) {
    color: var(--button-text);
    padding: 2px 8px;
    box-shadow: var(--button-shadow);
    transition: background .2s;
}

.nav-tabs, #currentimagecontent, #inputsidebartab_content, #rightsidebarcontent, #t2i_bottom_bar {
    background-color: var(--background-panel);
    background-image: url('../../imgs/noise.png');
}

.auto-input-qbutton {
    text-align: center;
    border-color: var(--border-color) !important;
    color: var(--border-color) !important;
    align-self: center;
    width: 20px;
    height: 20px;
    line-height: 18px;
}

.t2i-area-quicktools,
.input-group-header,
.auto-input-name,
.nav-tabs,
.basic-button:not(.image_editor_newlayer_button),
.simpletab-workflow-header,
.simpletabbrowserwrapper .image-preview-text,
.simpletabbrowserwrapper .model-descblock {
    font-family: "Inter", sans-serif, var(--bs-font-sans-serif);
    font-weight: 500;
}
.auto-input-name {
    font-weight: normal !important;
}
.comfy_workflow_buttons {
    font-family: var(--bs-body-font-family) !important;
}
.comfy_workflow_buttons .basic-button {
    font-family: var(--bs-body-font-family) !important;
}

.nav-tabs {
    margin-bottom: calc(var(--panel-gap) - 2px);
    border-bottom: none;
    font-size: 20px;
}

.nav-tabs .nav-item a {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.small-window .nav-tabs .nav-item a {
    padding-left: 8px;
    padding-right: 8px;
}

.nav-tabs .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    background-color: transparent;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: var(--text-color);
}

.nav-tabs .nav-link {
    border-radius: 0;
    color: var(--text-soft);
}

.nav-tabs .nav-item:last-child .nav-link {
    border-right: none;
}

.welcome-message-wrapper {
    font-size: 1rem;
    width: 100% !important;
}

#welcome_message {
    margin: 0;
    width: 100%;
}

#top_status_bar:not(:empty)~.tab-hundred .t2i-area-quicktools {
    top: 28px !important;
}

.t2i-area-quicktools {
    margin-top: -6px;
    padding: 5px 20px 5px 15px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5) !important;
    border-radius: 55px !important;
}

.batch-gear-button {
    top: 0.2rem !important;
}

.splitter-bar {
    background-color: var(--background) !important;
}

.large-window .splitter-bar:hover {
    background-color: var(--emphasis) !important;
}

#t2i-top-split-bar {
    width: var(--panel-gap);
}

#t2i-top-2nd-split-bar {
    width: var(--panel-gap);
    position: relative;
    z-index: 1;
}

/* Left panel */
#main_inputs_area_wrapper {
    padding: 30px;
    transition: padding 0.2s;
    padding-left: calc(clamp(5px, (100% - 400px) / 2, 30px));
    padding-right: calc(clamp(15px, (100% - 350px) / 2, 30px));
}

#main_inputs_filter {
    border: none;
    border-bottom: 2px solid var(--border-color);
    border-radius: 0;
    margin-bottom: 15px;
}

#main_inputs_filter:focus {
    border-bottom: 2px solid var(--emphasis);
    outline: none;
}

#input_negativeprompt {
    padding: 5px;
    margin-top: 8px;
}

.input-group.input-group-open {
    border: none;
    position: relative;
    background-color: transparent;
}

.input-group.input-group-open .input-group-content {
    background-color: var(--background-panel-subtle);
    margin-left: 0 !important;
    width: 100% !important;
    border-radius: 10px !important;
}

.input-group .header-label-wrap {
    position: relative;
    top: unset;
    left: unset;
    margin: unset;
    width: 100% !important;
}

.input-group .header-label {
    font-size: 15px;
}

.input-group .input-group-header {
    position: unset;
    margin: 0;
    height: auto;
    color: var(--text);
    user-select: none;
}

.input-group .input-group-header-shrinkable:hover {
    color: var(--button-foreground-hover);
}

.input-group .input-group-header-activated {
    background: transparent !important;
}

.auto-symbol {
    display: inline-block;
    text-align: center;
    font-size: 10px;
    width: 32px;
    height: 16px;
    background: var(--button-background);
    box-shadow: var(--button-shadow);
    border-radius: 4px;
    margin-right: 10px;
    transition: background .2s;
    color: var(--text) !important;

}

.input-group .input-group-header:hover .auto-symbol {
    background-color: var(--button-background-hover);
    background-position: 100%;
}

.input-group .input-group-header:hover .auto-symbol {
    color: var(--button-foreground-hover) !important;
}

.input-group-header-activated .auto-symbol {
    background: var(--box-selected-border-stronger) !important;
}

.input-group-header-activated:hover .auto-symbol {
    background: color-mix(in srgb, var(--emphasis) 70%, white) !important;
}

.input-group .input-group-content {
    --spacing: 30px;
    padding: 0;
    max-width: unset;
    margin-top: 10px;
}

.input-group .input-group-content>div {
    padding: 5px 10px;
    align-items: center;
}

.input-group .auto-input-name {
    margin-right: 10px;
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 5px;
    text-align: left;
}

.current_image_small {
    border: none;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    justify-content: start;
    padding-bottom: 50px;
    padding-top: 30px !important;
}

.current_image_small #current_image_img {
    min-height: 100px;
}

.current_image_small #current-image-extras-wrapper {
    width: auto !important;
    max-width: unset !important;
    min-width: unset !important;
    display: flex !important;
    flex-direction: column;
    flex: auto;
    justify-content: space-between;
}

.current-image-data {
    margin-top: 20px;
    color: transparent;
    text-align: center;
}

.current-image-data .param_view_block {
    padding: 1px 6px;
    font-size: 12px;
}

.current-image-buttons {
    font-size: 15px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    width: 100%;
}

.current_image_small .current-image-buttons {
    display: flex;
    margin-top: 10px;
}

.alt_prompt_region {
    background: var(--background-panel);
}

.alt_prompt_main_line {
    padding-right: 1rem;
}

.alt_prompt_textbox {
    background-color: var(--background);
    color: var(--text);
    border-radius: 12px;
    padding: 2px 8px;
    box-shadow: 0px 0px 4px 0px #000000 inset, 0px 1px 0px 0px #FFFFFF40, 0px -1px 0px 0px #00000080;
    border: none;
    min-width: 150px;
}

.alt-negativeprompt-textbox-invalid {
    background-color: var(--background-panel) !important;
    box-shadow: 0px 0px 4px 0px #000000 inset, 0px 1px 0px 0px var(--background-panel), 0px -1px 0px 0px #00000080;
}

.alt-text-tokencount-wrapper {
    left: calc(100% - 11rem) !important;
}

.alt_prompt_textbox::placeholder {
    color: var(--button-foreground);
    opacity: 0.6;
}

.alt-negativeprompt-textbox-invalid::placeholder {
    color: color-mix(in srgb, var(--text) 50%, var(--background-panel));
}

.alt-prompt-buttons {
    font-size: 20px;
}

#alt_generate_button {
    margin-left: 10px;
    padding: 0 10px;
    background: var(--emphasis-soft);
    color: var(--emphasis-text) !important;
}

#alt_center_button {
    background: var(--emphasis-soft);
    color: var(--emphasis-text) !important;
}

#alt_generate_button:hover,
#alt_center_button:hover {
    background: color-mix(in srgb, var(--emphasis) 70%, white);
    color: var(--button-foreground-hover);
}

#alt_center_button::after {
    font-size: 12px;
    padding: 0 2px;
}

#Text2Image .seed-button {
    width: 28px;
    height: 28px;
    font-size: 0px;
    padding: 0 !important;
}

.seed-button::after {
    text-align: center;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

.seed-random-button::after {
    content: "\e025";
}

.seed-reuse-button::after {
    content: "\e627";
}

.current_image_batch_core {
    max-height: calc(100% - 10px);
    overflow: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    padding: 20px;
    text-align: center;
}

.current_image_batch_core_small {
    padding-left: 0;
    padding-right: 0;
}

/* Bottom */
#bottombartabcollection {
    margin-bottom: 0;
    border-bottom: calc(var(--panel-gap) - 2px) solid var(--background);
}

.browser_container .browser-folder-tree-container {
    padding: 20px;
}
.small-window .browser-folder-tree-container {
    padding: 5px;
    padding-top: 20px;
}

.browser-header-bar select {
    border-radius: 0.5rem;
    margin-bottom: 0px;
    background-color: var(--background);
    border-color: transparent;
}

.browser-header-bar input {
    border: none;
    border-radius: 10px;
}

.browser-content-container img {
    border-radius: 5px;
}

.image-block.image-block-legacy {
    margin: .25rem;
}

.t2i-mid-split-quickbutton {
    height: 40px;
    line-height: 40px;
    top: -1rem !important;
}

.t2i-top-split-quickbutton {
    height: 40px;
    line-height: 35px;
}

.image-block {
    border: 1px solid transparent;
    border-radius: 10px;
}

.image-block:hover,
.model-selected {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--box-selected-border-stronger);
}

.model-block {
    border-radius: 10px;
}

/* Settings */
.settings-group {
    padding-left: 0 !important;
    margin-top: 0;
}

.settings_submit_confirmer button {
    font-size: unset;
}

.input-group .auto-text {
    border: 1px solid var(--border-color);
    padding: 5px 10px !important;
    margin-top: 5px;
}

.simple-outer-wall {
    background-color: var(--background) !important;
}
.simple-vertical-divider {
    background-color: var(--background) !important;
}
.manage-users-right, .manage-users-left {
    background: var(--background-panel);
}