style.css

:root {
  --ae-main-bg-color: hsl(0deg 0% 10%);
  --ae-primary-color: hsl(168deg 97% 41%);
  --ae-input-bg-color: hsl(225deg 6% 13%);
  --ae-input-border-color: hsl(214deg 5% 30%);
  --ae-panel-bg-color: hsl(225deg 5% 17%);
  --ae-panel-border-color: hsl(214deg 5% 30%);
  --ae-panel-border-radius: 0px;
  --ae-subgroup-bg-color: hsl(0deg 0% 10%);
  --ae-subgroup-input-bg-color: hsl(225deg 6% 13%);
  --ae-subgroup-input-border-color: hsl(214deg 5% 30%);
  --ae-subpanel-bg-color: hsl(220deg 4% 14%);
  --ae-subpanel-border-color: hsl(214deg 5% 30%);
  --ae-subpanel-border-radius: 8px;
  --ae-textarea-focus-color: hsl(210deg 3% 36%);
  --ae-input-focus-color: hsl(168deg 97% 41%);
  --ae-outside-gap-size: 8px;
  --ae-inside-padding-size: 8px;
  --ae-tool-button-size: 34px;
  --ae-tool-button-radius: 16px;
  --ae-generate-button-height: 70px;
  --ae-cancel-color: hsl(0deg 84% 60%);
  --ae-max-padding: max(
    var(--ae-outside-gap-size),
    var(--ae-inside-padding-size)
  );
  --ae-icon-color: hsl(168deg 97% 41%);
  --ae-icon-hover-color: hsl(0deg 0% 10%);
  --ae-icon-size: 22px;
  --ae-nav-bg-color: hsl(0deg 0% 4%);
  --ae-nav-color: hsl(210deg 4% 80%);
  --ae-nav-hover-color: hsl(0deg 0% 4%);
  --ae-input-color: hsl(210deg 4% 80%);
  --ae-label-color: hsl(210deg 4% 80%);
  --ae-subgroup-input-color: hsl(210deg 4% 80%);
  --ae-placeholder-color: hsl(214deg 5% 30%);
  --ae-text-color: hsl(210deg 4% 80%);
  --ae-mobile-outside-gap-size: 2px;
  --ae-mobile-inside-padding-size: 2px;
  --ae-frame-bg-color: hsl(225deg 6% 13%);
  --ae-modal-bg-color: hsl(0deg 0% 10%);
  --ae-modal-icon-color: hsl(168deg 97% 41%);
} /*BREAKPOINT_CSS_CONTENT*/

/*
Theme Name: DarkUX
Author: anapnoe
Author URI: https://github.com/anapnoe/stable-diffusion-webui
Version: 1.0
License: GNU General Public License
*/
:root {
  --ae-extra-networks-card-size: 1;
  --ae-extra-networks-card-real-size: calc(
    var(--ae-extra-networks-card-size) * 14vh
  );
  --ae-extra-networks-visible-rows: 2;
  --ae-extra-networks-height: calc(
    (
        var(--ae-extra-networks-card-real-size) *
          var(--ae-extra-networks-visible-rows)
      ) + (var(--ae-inside-padding-size) * 2)
  );
  --ae-extra-networks-name-size: calc(var(--ae-extra-networks-card-size) * 1em);

  --ae-top-header-padding-top: 16px;
  --ae-top-header-padding-bottom: 16px;
  --ae-top-header-inner-height: 38px;
  --ae-top-header-height: calc(
    var(--ae-top-header-padding-top) + var(--ae-top-header-inner-height) +
      var(--ae-top-header-padding-bottom)
  );

  --ae-container-padding: 16px;
  --ae-footer-height: calc(32px + (var(--ae-container-padding) * 2));
  --ae-gallery-bottom-height: calc(
    24px + (var(--ae-max-padding) * 2) + 16px +
      (var(--ae-inside-padding-size) * 2) + (var(--ae-outside-gap-size) * 3)
  );

  --ae-subtract-total: calc(
    var(--ae-top-header-height) + var(--ae-footer-height)
  );
  --ae-container-height: calc(100vh - var(--ae-subtract-total));
  --ae-container-total-height: calc(
    var(--ae-container-height) - (var(--ae-outside-gap-size) * 2) -
      (var(--ae-inside-padding-size) * 2)
  );
  --ae-container-height-gap: calc(
    var(--ae-container-height) - (var(--ae-outside-gap-size) * 2)
  );
  --ae-container-height-pad: calc(
    var(--ae-container-height) - (var(--ae-inside-padding-size) * 2)
  );

  --ae-processing-border: 2px;
  --ae-processing-border-double: var(--ae-processing-border) * 2;

  --ae-slider-bg-overlay: transparent;

  --ae-border-width: 1px;
  --ae-accordion-vertical-padding: max(8px, var(--ae-inside-padding-size));
  --ae-accordion-horizontal-padding: max(4px, var(--ae-inside-padding-size));
  --ae-accordion-line-height: 24px;
  --ae-accordion-header-height: calc(
    var(--ae-accordion-line-height) + var(--ae-accordion-vertical-padding) * 2
  );

  --ae-results-height: calc(
    100vh -
      (
        var(--ae-top-header-height) + var(--ae-footer-height) +
          var(--ae-accordion-header-height) + var(--ae-outside-gap-size) * 4 +
          36px
      )
  );
}

@media only screen and (max-width: 860px) {
  :root {
    --ae-outside-gap-size: var(--ae-mobile-outside-gap-size);
    --ae-inside-padding-size: var(--ae-mobile-inside-padding-size);
  }
}

body {
  background-color: var(--ae-main-bg-color) !important;
}

.hidden {
  display: none !important;
}

.app.svelte-1mya07g.svelte-1mya07g {
  position: relative;
  margin: auto;
  padding: var(--size-4);
  padding-top: 0;
  width: 100%;
  min-height: 100vh !important;
  min-width: unset !important;
  max-width: unset !important;
  background-color: var(--ae-main-bg-color);
}

.block.svelte-mppz8v {
  line-height: 16px !important;
}

/*********/
/* Icons */
/*********/
[id*="2img_generate_forever"],
[id^="refresh_"],
[id$="_refresh"],
[id$="_clear_prompt"],
[id$="2img_style_create"],
[id$="2img_style_apply"],
[id$="2img_extra_networks"],
[id$="paste"],
#img2img_actions_column [id$="interrogate"],
#img2img_actions_column [id$="deepbooru"],
[id^="open_folder"],
[id*="2img_random"],
[id*="2img_reuse"],
[id^="save_"],
[id^="save_zip_"],
[id="extras_tab"],
[id="img2img_tab"],
[id="inpaint_tab"],
[id="txt2img_tab"] {
  /*background-color: var(--ae-panel-bg-color);*/
  position: relative;
  font-size: 0 !important;
}
[id*="2img_generate_forever"]::before,
[id$="_refresh"]::before,
[id^="refresh_"]::before,
[id$="_clear_prompt"]::before,
[id$="2img_style_create"]::before,
[id$="2img_style_apply"]::before,
[id$="2img_extra_networks"]::before,
[id$="paste"]::before,
#img2img_actions_column [id$="interrogate"]::before,
#img2img_actions_column [id$="deepbooru"]::before,
[id^="open_folder"]::before,
[id*="2img_random"]::before,
[id*="2img_reuse"]::before,
[id^="save_"]::before,
[id^="save_zip_"]::before,
[id="extras_tab"]::before,
[id="img2img_tab"]::before,
[id="inpaint_tab"]::before,
[id="txt2img_tab"]::before {
  content: " ";
  display: inline-block;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--ae-icon-color);
  width: var(--ae-icon-size);
  height: var(--ae-icon-size);
  position: absolute;
}

[id*="2img_random"]::before,
[id*="2img_reuse"]::before {
  background-color: var(--ae-icon-color);
  border-radius: var(--ae-panel-border-radius);
}
[id*="2img_generate_forever"]:hover::before,
[id$="_refresh"]:hover::before,
[id^="refresh_"]:hover::before,
[id$="_clear_prompt"]:hover::before,
[id$="2img_style_create"]:hover::before,
[id$="2img_style_apply"]:hover::before,
[id$="2img_extra_networks"]:hover::before,
[id$="paste"]:hover::before,
#img2img_actions_column [id$="interrogate"]:hover::before,
#img2img_actions_column [id$="deepbooru"]:hover::before,
[id^="open_folder"]:hover::before,
[id*="2img_random"]:hover::before,
[id*="2img_reuse"]:hover::before,
[id^="save_"]:hover::before,
[id^="save_zip_"]:hover::before,
[id="extras_tab"]:hover::before,
[id="img2img_tab"]:hover::before,
[id="inpaint_tab"]:hover::before,
[id="txt2img_tab"]:hover::before {
  background-color: var(--ae-icon-hover-color);
}

[id$="2img_extra_networks"] {
  border: 1px solid var(--ae-input-border-color) !important;
  border-radius: var(--ae-panel-border-radius) !important;
  background: var(--ae-input-bg-color) !important;
}

[id$="2img_extra_networks"]:hover {
  background-color: var(--ae-icon-color) !important;
}

[id$="_refresh"]::before,
[id^="refresh_"]::before {
  -webkit-mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%;
}
[id$="2img_generate_forever"]::before {
  -webkit-mask: url(./file=html/svg/infinity-fill.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/infinity-fill.svg) no-repeat 50% 50%;
  width: 90%;
  height: 90%;
}
[id$="_clear_prompt"]::before {
  -webkit-mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%;
}

[id$="2img_style_create"]::before {
  -webkit-mask: url(./file=html/svg/save-3-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/save-3-line.svg) no-repeat 50% 50%;
}

[id$="2img_style_apply"]::before {
  -webkit-mask: url(./file=html/svg/clipboard-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/clipboard-line.svg) no-repeat 50% 50%;
}

[id$="paste"]::before {
  -webkit-mask: url(./file=html/svg/magic-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/magic-line.svg) no-repeat 50% 50%;
}

[id$="2img_extra_networks"]::before {
  -webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%;
}

#img2img_actions_column [id$="interrogate"]::before {
  -webkit-mask: url(./file=html/svg/question-answer-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/question-answer-line.svg) no-repeat 50% 50%;
}

#img2img_actions_column [id$="deepbooru"]::before {
  -webkit-mask: url(./file=html/svg/question-answer-fill.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/question-answer-fill.svg) no-repeat 50% 50%;
}

[id^="open_folder"]::before {
  -webkit-mask: url(./file=html/svg/folder-open-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/folder-open-line.svg) no-repeat 50% 50%;
}

[id*="2img_random"]::before {
  -webkit-mask: url(./file=html/svg/dice-1.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/dice-1.svg) no-repeat 50% 50%;
}

[id*="2img_reuse"]::before {
  -webkit-mask: url(./file=html/svg/recycle-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/recycle-line.svg) no-repeat 50% 50%;
}

[id^="save_"]::before {
  -webkit-mask: url(./file=html/svg/save-2-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/save-2-line.svg) no-repeat 50% 50%;
}

[id^="save_zip_"]::before {
  -webkit-mask: url(./file=html/svg/file-zip-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/file-zip-line.svg) no-repeat 50% 50%;
}

[id="extras_tab"]::before {
  -webkit-mask: url(./file=html/svg/picture-in-picture-exit-line.svg) no-repeat
    50% 50%;
  mask: url(./file=html/svg/picture-in-picture-exit-line.svg) no-repeat 50% 50%;
}

[id="img2img_tab"]::before {
  -webkit-mask: url(./file=html/svg/landscape-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/landscape-line.svg) no-repeat 50% 50%;
}

[id="inpaint_tab"]::before {
  -webkit-mask: url(./file=html/svg/paint-brush-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/paint-brush-line.svg) no-repeat 50% 50%;
}

[id="txt2img_tab"]::before {
  -webkit-mask: url(./file=html/svg/t-box-fill.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/t-box-fill.svg) no-repeat 50% 50%;
}

/*************/
/* TopHeader */
/*************/

#tabs {
  margin-top: calc(var(--ae-top-header-height));
  min-height: var(--ae-container-height);
}

#header-top {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 10000;
  min-height: var(--ae-top-header-inner-height);
  background-color: var(--ae-main-bg-color);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: var(--ae-top-header-padding-top);
  padding-bottom: var(--ae-top-header-padding-bottom);
}

#nav_menu_header_tabs {
  position: relative;
  height: 34px;
  align-self: center;
  flex-grow: 2;
  line-height: 14px;
}

#nav_menu_header_tabs button {
  font-size: 14px;
  flex: 1 1 auto;
  flex-grow: 0;
  min-width: unset;
  padding-bottom: 0;
  padding-right: 0;
  padding-top: 0;
  border: 0;
  color: var(--ae-nav-color);
  background: 0 !important;
  padding-left: 10px;
  opacity: 0.75;
}

#nav_menu_header_tabs button.selected {
  color: var(--ae-primary-color);
  opacity: 1;
}

#nav_menu_header_tabs button:hover {
  opacity: 1;
}

.container {
  padding: var(--ae-container-padding);
  color: var(--ae-input-color);
}

#quicksettings {
  align-items: center;
  width: auto;
  background: 0;
  padding: 0;
  position: relative;
  max-height: 34px;
  align-self: center;
  min-width: min(60px, 100%);
}

#extra_networks_menu,
#quick_menu {
  z-index: 9999;
  background-color: var(--ae-input-bg-color);
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  cursor: pointer;
  min-width: unset;
  max-width: 38px;
  align-self: center;
}

#extra_networks_menu::before,
#quick_menu::before {
  content: " ";
  display: inline-block;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--ae-icon-color);
  width: var(--ae-icon-size);
  height: var(--ae-icon-size);
  -webkit-mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%;
  cursor: pointer;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
}

#extra_networks_menu::before {
  -webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%;
}

#extra_networks_menu.fixed,
#extra_networks_menu:hover,
#quick_menu:hover {
  background-color: var(--ae-icon-color);
}

#extra_networks_menu.fixed::before,
#extra_networks_menu:hover::before,
#quick_menu:hover::before {
  background-color: var(--ae-icon-hover-color);
}

[id$="nav_menu"] {
  z-index: 9999;
  background-color: var(--ae-input-bg-color);
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  cursor: pointer;
  max-width: 38px;
  min-width: unset !important;
  align-self: center;
}

[id$="nav_menu"]::before {
  content: " ";
  display: inline-block;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--ae-icon-color);
  width: var(--ae-icon-size);
  height: var(--ae-icon-size);
  -webkit-mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%;
  cursor: pointer;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
}

[id$="nav_menu"]:hover {
  background-color: var(--ae-icon-color);
}

[id$="nav_menu"]:hover::before {
  background-color: var(--ae-icon-hover-color);
}

#clone_nav_menu {
  position: fixed;
  z-index: 10000;
  left: 1rem;
  top: var(--ae-top-header-padding-top);
}

/***********************************/
/* Progressbar */
/***********************************/

.progressDiv {
  background-color: var(--ae-main-bg-color) !important;
  border-radius: 0 !important;
  height: 16px;
  position: fixed;
  z-index: 10000;
  top: 0px;
  /* width: calc(100% - 16px) !important; */
  left: 0;
  width: 100% !important;
  /* border: 1px solid var(--ae-panel-border-color); */
}

.progressDiv .progress {
  width: 0%;
  height: 3px;
  background-color: var(--ae-primary-color);
  color: var(--ae-input-color);
  line-height: 20px;
  text-align: right;
  border-radius: 0;
  padding: 0 2px;
  font-size: 12px;
  white-space: nowrap;
  font-weight: 600;
}

/****************/
/* Live preview */
/****************/

.livePreview {
  position: absolute !important;
  width: calc(100% - (var(--ae-outside-gap-size) * 2)) !important;
  max-height: calc(var(--ae-container-height-gap)) !important;
  top: var(--ae-outside-gap-size);
  left: var(--ae-outside-gap-size);
  right: 0;
  bottom: 0;
  pointer-events: all;
  overflow: hidden !important;
  background-color: var(--ae-main-bg-color);
  z-index: 300;
  box-sizing: border-box;
  padding: var(--ae-processing-border);
  border: 1px solid var(--ae-panel-border-color);
  height: calc(var(--ae-container-height-gap)) !important;
}

.livePreview img {
  background-color: var(--ae-main-bg-color) !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  position: absolute;
  width: calc(100% - var(--ae-processing-border-double));
  height: calc(100% - var(--ae-processing-border-double));
  object-fit: scale-down;
  margin: auto;
}

div.svelte-10ogue4 > *:first-child.livePreview {
  border-radius: 0 !important;
}

@keyframes rotate {
  100% {
    transform: scale(2) rotate(1turn);
  }
}

.livePreview:not(.dropPreview)::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: var(--ae-main-bg-color);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    transparent,
    var(--ae-primary-color),
    transparent 30%
  );
  animation: rotate 4s linear infinite;
}

.livePreview::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--ae-processing-border);
  top: var(--ae-processing-border);
  width: calc(100% - var(--ae-processing-border-double));
  height: calc(100% - var(--ae-processing-border-double));
  background: var(--ae-main-bg-color);
  border-radius: 0;
}

.livePreview::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: var(--ae-main-bg-color);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    transparent,
    var(--ae-primary-color),
    transparent 30%
  );
  animation: rotate 4s linear infinite;
}

.livePreview.dropPreview::before,
.livePreview.dropPreview::after {
  display: none;
}

.livePreview img {
  object-position: center !important;
  border-radius: 0 !important;
  position: relative;
  top: 0 !important;
  left: 0 !important;
  width: calc(100%) !important;
  height: calc(100%) !important;
}

.livePreview img:nth-child(2) {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
  width: calc(100% - var(--ae-processing-border-double)) !important;
  height: calc(100% - var(--ae-processing-border-double)) !important;
}

.livePreview.init,
.livePreview:not(.init) + div {
  display: none;
}

.livePreview {
  max-height: unset !important;
  position: relative !important;
  left: 0;
  top: 0;
  width: auto !important;
}

[id^="download_files_"] div.float:not(.float) {
  position: absolute !important;
}

#image_buttons_txt2img + div,
#image_buttons_img2img + div,
#image_buttons_extras_2img + div {
  margin-top: calc(var(--ae-outside-gap-size) * -0.5);
  margin-bottom: calc(var(--ae-outside-gap-size) * -0.5);
}

button.svelte-1p4r00v {
  background-color: var(--ae-input-bg-color);
  color: var(--ae-icon-color);
  border-radius: var(--ae-panel-border-radius);
}

button.svelte-1p4r00v:hover {
  background-color: var(--ae-primary-color);
  color: var(--ae-icon-hover-color);
}

/* [id$="2img_gallery"] div.modify-upload{
	position:absolute;
}
[id$="2img_gallery"],	
[id$="2img_gallery"] div>img,
[id$="2img_gallery"] div.backdrop-blur,
[id$="2img_gallery"] img+div.overflow-x-scroll{
	position:relative;
	height: auto !important;
	min-height: auto;
	border-radius: 0 !important;
}
[id$="2img_gallery"],	
[id$="2img_gallery"] div>img,
[id$="2img_gallery"] div.backdrop-blur
{
	max-height: unset !important;
}
[id$="2img_gallery"] div>img{
	object-fit: contain;
}
[id$="2img_gallery"] .overflow-y-auto {
	min-height: auto !important;
} */
[id^="img2img_copy_to_"] {
  padding: 0 !important;
  margin-bottom: var(--ae-outside-gap-size) !important;
  background: transparent !important;
}

[id^="img2img_label_copy_to_"] {
  min-width: unset !important;
}

[id^="img2img_copy_to_"] > * {
  font-size: 100% !important;
  white-space: nowrap;
  align-self: center;
}

.image-container {
  min-height: 25vh;
}

.spl-pane div.svelte-s6ybro,
.spl-pane .wrap.svelte-p4aq0j.svelte-p4aq0j {
  display: none;
}

.spl-pane .wrap.svelte-yigbas {
  position: unset;
}

.center.boundedheight.flex {
  width: 100% !important;
  height: 100% !important;
}

div.svelte-1oo81b7 > *:first-child,
div.svelte-1oo81b7 > *:last-child {
  border-radius: 0 !important;
}

/* small info upload*/
div.float {
  background: var(--ae-main-bg-color) !important;
  border: 0 !important;
  color: var(--ae-primary-color) !important;
}

#img2img_inpaint_upload_tab > div:first-child {
  flex-direction: row;
}

/****************/
/* Results View */
/****************/
.main > .wrap > .contain > div {
  gap: 0px !important;
}

[id$="2img_results"] {
  /*flex-direction: row !important;*/
  overflow-x: hidden !important;
  max-height: calc(var(--ae-container-height));
  overflow-y: auto !important;
  height: 100%;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

[id$="2img_gallery"] {
  display: flex;
  flex-direction: row;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

[id$="2img_gallery"] .grid-wrap,
[id$="2img_gallery"] .empty {
  width: 100%;
  /* 	max-height: calc(var(--ae-container-height-gap) - 2px - var(--ae-gallery-bottom-height))!important;
    min-height: calc(var(--ae-container-height-gap) - 2px - var(--ae-gallery-bottom-height))!important; */
  max-height: var(--ae-results-height) !important;
  min-height: var(--ae-results-height) !important;
  overflow-x: hidden !important;
}

[id$="2img_gallery"] .preview.fixed-height {
  max-height: unset;
  background-color: var(--ae-main-bg-color) !important;
}

[id$="2img_gallery"] .thumbnails {
  background-color: var(--ae-panel-bg-color);
  height: 60px !important;
}

.thumbnails button {
  margin: auto;
}

.thumbnails {
  justify-content: unset !important;
}

[id$="2img_gallery"] .thumbnail-small {
  height: auto !important;
}

[id$="2img_gallery"] .thumbnail-small.selected {
  --ring-color: var(--ae-primary-color) !important;
  border-color: var(--ae-primary-color) !important;
}

[id$="2img_results"] .preview + img {
  cursor: pointer;
}

[id$="2img_gallery"] .preview.fixed-height {
  height: auto;
  min-height: auto;
  width: 100%;
  min-width: 100%;
  max-height: calc(var(--ae-container-height) - 4px);
}

[id$="2img_override_settings_row"] > div.form.show,
[id$="2img_override_settings_row"]
  > div.form.show
  > [id$="2img_override_settings"] {
  display: block !important;
}

/* [id$="2img_gallery"] .overflow-y-auto>div:first-child
{
    height: calc(var(--ae-container-total-height) - (var(--ae-outside-gap-size) * 2) - var(--ae-gallery-bottom-height) );
}
[id$="2img_gallery"] div>img
{
    height: calc(100% - 60px);
    width: auto;
    object-fit: scale-down;
	background-color: var(--ae-main-bg-color) !important;
} */

/* 
[id$="2img_gallery"] .backdrop-blur 
{
    height: auto;
    min-height: auto;
    width: 100%;
    min-width: 100%;
    max-height: calc(var(--ae-container-height) - 4px);
	
	
}
[id$="2img_gallery"] img+div
{
    background-color: var(--ae-input-bg-color) !important;
}
[id$="2img_gallery"] div>div
{
    min-height: auto;
}
.gallery-item.svelte-1g9btlg.svelte-1g9btlg {
    position: relative;
    aspect-ratio: unset !important;
    border-radius: 0 !important; 
    background-color: var(--ae-main-bg-color) !important;
    --tw-ring-color: var(--ae-panel-border-color) !important;
}
.file-preview{
	margin:0;
	color: var(--ae-text-color);
}
.file-preview > div > div:first-child{
	flex-grow:1;
}
.w-3\/12 {width: auto;}
a{color:var(--ae-primary-color)!important;}
#image_buttons_txt2img + div,
#image_buttons_img2img + div,
#image_buttons_extras_2img + div
{
	margin-top: calc(var(--ae-outside-gap-size) * -0.5);
	margin-bottom: calc(var(--ae-outside-gap-size) * -0.5);
}
 */
/*
#top_row_sd_model_checkpoint {
    position: absolute;
    z-index: 9999;
    max-width: 290px;
    right: 0;
}
#top_row_sd_model_checkpoint div {
    border: 0;
    background: 0;
    padding: 0 !important;
}
#top_row_sd_model_checkpoint span {
display:none;
}
#top_row_sd_model_checkpoint .gr-input {
padding-right: 37px;
min-height: 34px;
}
*/
.gradio-dropdown:not(.multiselect) .token-remove {
  display: none !important;
}

#top_row_sd_model_checkpoint div {
  max-height: unset;
  min-width: min(20px, 100%);
}

#top_row_sd_model_checkpoint {
  position: absolute;
  z-index: 9999;
  max-width: 290px;
  right: 0;
  max-height: 34px;
}

#top_row_sd_model_checkpoint > div,
#row_setting_sd_model_checkpoint > div,
#setting_sd_model_checkpoint > div,
#setting_sd_model_checkpoint {
  border: 0;
  padding: 0 !important;
}

#setting_sd_model_checkpoint > label > span,
#row_setting_sd_model_checkpoint > div:nth-child(2) {
  display: none;
}

#setting_sd_model_checkpoint > label > .wrap > .wrap-inner:first-child {
  flex-wrap: nowrap;
  padding: 0;
  height: 32px;
}

#setting_sd_model_checkpoint > label > .wrap > .wrap-inner:first-child > span {
  white-space: nowrap;
  overflow: hidden;
}

#top_row_sd_model_checkpoint button {
  min-width: unset;
  height: 34px;
  max-width: 34px;
}

#top_row_sd_model_checkpoint > div.form {
  overflow: visible;
}

#top_row_sd_model_checkpoint div {
  border-radius: var(--ae-panel-border-radius) !important;
}

div.svelte-b6y5bg,
div.gradio-row > .form {
  overflow: visible !important;
}

.dropdown-arrow {
  min-width: var(--size-5);
}

/* .gradio-dropdown{
	position:relative!important;
} */

.gradio-dropdown input {
  color: var(--ae-input-color) !important;
}

ul.options {
  width: auto;
  background: var(--ae-input-bg-color) !important;
  border-radius: var(--ae-panel-border-radius) !important;
  border-color: var(--ae-input-border-color);
  border-width: var(--ae-border-width);
  max-height: 25vh !important;
  padding: 1px;
  z-index: 9999 !important;
}

ul.options li {
  width: 100% !important;
  display: inline-block !important;
  overflow-wrap: break-word !important;
  color: var(--ae-label-color) !important;
}

ul {
  margin: 0 !important;
  list-style: none !important;
}

ul.options li:hover {
  background: var(--ae-input-color) !important;
  color: var(--ae-input-bg-color) !important;
}

ul.options li.selected {
  background: var(--ae-panel-bg-color) !important;
  color: var(--ae-label-color) !important;
  pointer-events: none;
}

ul.options li span {
  display: none !important;
}

/* [id$="2img_override_settings"] .token span {
    top: 0px !important;
}
[id$="2img_override_settings"] div > input, [id$="2img_override_settings"] .token + div > input {
    min-height: 22px !important;
}
.wrap-inner.svelte-a6vu2r.svelte-a6vu2r.svelte-a6vu2r {
    gap: 0;
    padding: 0;
} */

div.token {
  border-radius: var(--ae-panel-border-radius) !important;
  background: var(--ae-input-bg-color) !important;
  border: 1px solid var(--ae-input-border-color) !important;
  padding: 3px !important;
  margin: 1px;
  padding-top: 4px !important;
  color: var(--ae-input-color) !important;
}

div.token-remove {
  fill: var(--ae-label-color) !important;
  border-radius: var(--radius-full) !important;
  background: var(--ae-input-border-color) !important;
  border: 1px solid var(--ae-input-border-color) !important;
  /*border-radius: var(--ae-panel-border-radius);*/
}

.block.gradio-accordion {
  background-color: var(--ae-main-bg-color) !important;
  /*padding-bottom: 0 !important;*/
}

.block.gradio-accordion:hover {
  border-color: var(--ae-primary-color) !important;
}

.block.gradio-accordion .label-wrap {
  margin: calc(-1px + var(--ae-inside-padding-size) * -1);
  width: auto;
  padding: var(--ae-accordion-vertical-padding)
    var(--ae-accordion-horizontal-padding);
  border-radius: var(--ae-panel-border-radius);
  line-height: var(--ae-accordion-line-height);
  color: var(--ae-label-color);
  padding-left: max(8px, var(--ae-accordion-horizontal-padding));
  padding-right: max(8px, var(--ae-accordion-horizontal-padding));
  /*pointer-events: none !important;*/
}

.tab-nav {
  padding: 4px 4px 0;
}
#extras_params,
#extras_metadata {
  padding: 0px 4px 4px !important;
}

#pnginfo_html2_info > div > b {
  color: var(--ae-primary-color);
  text-transform: capitalize;
}

.block.gradio-accordion .hide + .open.label-wrap {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.block.gradio-accordion .label-wrap.open {
  margin-bottom: var(--ae-inside-padding-size);
  /*margin-bottom:0;*/
}

.block.gradio-accordion > .gap.svelte-vt1mxs > div:first-child {
  margin-top: calc(var(--ae-inside-padding-size) * 2) !important;
}

[id$="2img_extra_networks_row"].aside .gap.svelte-vt1mxs > div:first-child {
  margin-top: 0 !important;
}

#extras_resize_mode {
  flex-wrap: nowrap;
}

/* [id$="_subdirs"] select{
	width:100%;
	background-color:var(--ae-input-bg-color);
	border: 1px solid var(--ae-input-border-color);
	outline:0 !important;
}
[id$="_subdirs"]{
	margin-bottom: var(--ae-inside-padding-size)!important;
} */

.block.gradio-accordion:hover .label-wrap {
  color: var(--ae-main-bg-color) !important;
  background-color: var(--ae-primary-color) !important;
}

.block.gradio-accordion > div.wrap {
  pointer-events: none !important;
  cursor: pointer;
  width: auto !important;
  height: var(--ae-accordion-header-height) !important;
  z-index: 1;
  left: 0 !important;
  top: 0 !important;
  opacity: 0 !important;
}

.form > .gradio-row > .form {
  border: 0 !important;
}

.padded {
  padding: var(--ae-inside-padding-size) !important;
}

.gradio-row,
.gap {
  gap: var(--ae-outside-gap-size) !important;
}

button.tool {
  max-width: 34px;
  min-height: 34px;
  min-width: 34px !important;
}

div.block.padded {
  /*box-shadow: var(--block-shadow);*/
  border-width: var(--ae-border-width);
  border-color: var(--ae-panel-border-color);
  border-radius: var(--ae-panel-border-radius) !important;
  background: var(--ae-panel-bg-color);
  /*width: 100%;
    line-height: var(--line-sm);*/
}

fieldset.block.padded {
  background-color: var(--ae-panel-bg-color) !important;
  /*border-width: var(--ae-border-width) !important;*/
  /*border-color: var(--ae-panel-border-color) !important;*/
  border-radius: var(--ae-panel-border-radius) !important;
}

div.svelte-b6y5bg,
div.gradio-row > .form {
  /*box-shadow: var(--block-shadow);*/
  border-width: var(--ae-border-width) !important;
  border-color: var(--ae-panel-border-color) !important;
  border-radius: var(--ae-panel-border-radius) !important;
  background: var(--ae-panel-border-color) !important;
  box-shadow: none !important;
  /*width: 100%;
    line-height: var(--line-sm);*/
}

.block.gradio-dropdown,
.block.gradio-slider,
.block.gradio-checkbox,
.block.gradio-textbox,
.block.gradio-radio,
.block.gradio-checkboxgroup,
.block.gradio-number,
.block.gradio-colorpicker {
  border-width: 0;
  box-shadow: none !important;
}

.gradio-dropdown input {
  margin: 0 !important;
}

.block.gradio-dropdown span.single-select {
  color: var(--ae-input-color) !important;
}

.dropdown-arrow.svelte-p5edak {
  fill: var(--ae-input-color) !important;
}

.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label,
.wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label,
button.tool.secondary,
button.secondary,
.gradio-dropdown label .wrap,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
input[type="number"] {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid var(--ae-input-border-color) !important;
  border-radius: var(--ae-panel-border-radius) !important;
  background: var(--ae-input-bg-color) !important;
  color: var(--ae-input-color) !important;
  text-align: left !important;
  min-width: unset;
}

button.tool.secondary,
button.secondary {
  text-align: center !important;
}

.gradio-container-3-31-0 .prose * {
  color: var(--ae-label-color);
}

.gradio-container-3-23-0 .prose code {
  background-color: var(--ae-panel-bg-color);
  border-radius: var(--ae-panel-bg-color);
  border: 1px solid var(--ae-panel-border-color);
  padding: 0 !important;
  margin: 0 !important;
  white-space: break-spaces !important;
}

.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label,
.wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label,
.gradio-container-3-31-0 [type="text"],
.gradio-container-3-31-0 [type="email"],
.gradio-container-3-31-0 [type="url"],
.gradio-container-3-31-0 [type="password"],
.gradio-container-3-31-0 [type="number"],
.gradio-container-3-31-0 [type="date"],
.gradio-container-3-31-0 [type="datetime-local"],
.gradio-container-3-31-0 [type="month"],
.gradio-container-3-31-0 [type="search"],
.gradio-container-3-31-0 [type="tel"],
.gradio-container-3-31-0 [type="time"],
.gradio-container-3-31-0 [type="week"],
.gradio-container-3-31-0 [multiple],
.gradio-container-3-31-0 textarea,
.gradio-container-3-31-0 select {
  line-height: 1.5rem;
  padding: 4px 8px;
}

.gradio-container-3-31-0 [type="checkbox"],
.gradio-container-3-31-0 [type="radio"] {
  background-color: var(--ae-input-bg-color);
  border: 1px solid var(--ae-input-border-color);
  border-radius: var(--ae-panel-border-radius);
}

.gradio-container-3-31-0 [type="checkbox"]:checked,
.gradio-container-3-31-0 [type="radio"]:checked {
  background-color: var(--ae-primary-color);
}

.gradio-slider input[type="number"] {
  padding-right: 2px !important;
  max-height: 24px !important;
  width: 64px !important;
  margin-bottom: var(--ae-inside-padding-size);
}

.no-slider-layout .gradio-slider input[type="range"] {
  display: none;
}
.no-slider-layout .gradio-slider input[type="number"] {
  width: 100% !important;
  margin-bottom: 0;
  min-height: 34px;
  padding-right: 8px !important;
}
.no-slider-layout .head.svelte-1cl284s {
  flex-direction: column;
}
[id*="2img_toprow"] > div:first-child {
  min-width: unset !important;
}
.no-slider-layout [id$="2img_settings"] {
  min-width: min(420px, 100%) !important;
}

.no-slider-layout div.block.padded.gradio-slider {
  align-content: stretch;
}
[id*="2img_checkboxes"] > .form > div {
  min-width: unset !important;
  white-space: nowrap;
}
input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70 {
  align-self: flex-start;
  margin-top: 2px;
}
.thumbnail-small.svelte-g4rw9 > img.svelte-g4rw9 {
  object-fit: contain;
  max-height: 54px !important;
}
.thumbnail-small.svelte-g4rw9.svelte-g4rw9 {
  width: auto;
  max-height: 56px;
  max-width: 180px;
}
.no-slider-layout [id$="2img_res_switch_btn"] {
  height: 34px;
  align-self: flex-end;
  margin-bottom: var(--ae-inside-padding-size) !important;
}
.no-slider-layout [id$="2img_dimensions_row"] > .form {
  background-color: var(--ae-panel-bg-color) !important;
}

.gradio-dropdown:not(.multiselect) .wrap-inner {
  padding: 0px 5px !important;
  height: 32px !important;
}

fieldset span,
label > span {
  color: var(--ae-label-color) !important;
}

.gradio-radio label > span {
  color: var(--ae-input-color) !important;
}

input[type="number"],
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  height: 34px !important;
}

.gradio-slider input[type="range"] {
  align-self: flex-start;
}

span.svelte-1gfkn6j:not(.has-info) {
  margin-top: 1px;
  margin-left: 1px;
  margin-bottom: var(--ae-inside-padding-size);
}

/* input column alignment */
label.block {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 100%;
}

div.block.padded.gradio-slider {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

/* checkbox container */
.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt,
.wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 {
  gap: var(--ae-inside-padding-size);
}

input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked,
input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked:hover,
input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked:focus {
  border-color: var(--ae-input-focus-color);
  background-image: var(--radio-circle);
  background-color: var(--ae-primary-color);
}

input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked,
input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked:hover,
input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked:focus,
input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked,
input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked:hover,
input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked:focus {
  border-color: var(--ae-input-focus-color);
  background-image: var(--checkbox-check);
  background-color: var(--ae-primary-color);
}

input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70,
input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt,
input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 {
  box-shadow: none;
  border: 1px solid var(--ae-input-border-color);
  border-radius: var(--ae-panel-border-radius);
  background-color: var(--ae-input-bg-color);
  line-height: var(--line-sm);
}

input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:hover,
input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:hover,
input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:hover {
  border-color: var(--ae-input-focus-color);
  background-color: var(--ae-input-bg-color);
}

label.svelte-1p9xokt > .svelte-1p9xokt + .svelte-1p9xokt,
label.svelte-1qxcj04 > .svelte-1qxcj04 + .svelte-1qxcj04 {
  margin-right: var(--size-1);
}

input.svelte-56zyyb {
  background: none;
}

.gradio-colorpicker label.block {
  flex-direction: row;
}

/*
.gradio-slider input[type=number] {
    align-self: self-end;
}
*/
.gradio-dropdown.multiselect .wrap-inner {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  min-height: 32px;
}

[id$="2img_styles_row"].gradio-column > .form {
  flex-wrap: nowrap;
  flex-direction: row;
  border: 0;
}

[id$="2img_styles"] {
  padding: 0 !important;
}

[id$="2img_styles"] label {
  flex-direction: row;
  display: flex;
  flex-grow: 1;
  background-color: var(--ae-main-bg-color) !important;
}

[id$="2img_styles"] label .wrap {
  flex-grow: 1;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: -2px;
}

[id$="2img_styles"] label > span {
  padding-right: 5px;
  margin-bottom: 0 !important;
}

[id$="2img_token_counter"].block,
[id$="2img_negative_token_counter"].block {
  position: absolute !important;
  text-align: right;
  z-index: 99;
}

[id$="2img_actions_column"] {
  flex-grow: 0 !important;
  flex-direction: column !important;
  min-width: unset !important;
}

[id$="2img_tools"] > .form.svelte-b6y5bg {
  background: 0 !important;
  border: 0 !important;
}

[id$="2img_prompt"],
[id$="2img_neg_prompt"] {
  padding: 0 !important;
  border: 0 !important;
  background: 0;
}

[id$="2img_token_counter"].block,
[id$="2img_negative_token_counter"].block,
[id$="2img_prompt"] label span,
[id$="2img_neg_prompt"] label span {
  padding: 4px !important;
  margin: 0 !important;
}

[id$="2img_prompt"] textarea,
[id$="2img_neg_prompt"] textarea {
  margin: -1px;
  width: calc(100% + 2px);
}

/*frame*/
.compact.svelte-vt1mxs,
.panel.svelte-vt1mxs {
  border: solid var(--ae-panel-border-width) var(--ae-panel-border-color);
  border-radius: var(--ae-panel-border-radius);
  background: var(--ae-panel-bg-color);
  padding: var(--ae-outside-gap-size);
  background: var(--ae-frame-bg-color);
}

.compact.svelte-15lo0d8 {
  border-radius: var(--ae-panel-border-radius);
  background: var(--ae-panel-border-color);
  padding: 0;
  gap: 1px !important;
}

[id$="-collapse"],
[id$="-collapse-one"] > div {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  overflow: visible !important;
  outline: 0 !important;
}

[id$="-collapse-one"] > div.form {
  background: 0 !important;
}

[id$="-collapse-one"] > div.form > div {
  padding: 0 !important;
}

[id^="row_setting_"] {
  gap: 0px !important;
}

[id^="row_setting_"] > div + div.form {
  flex-grow: 0;
  min-width: unset;
}

[id*="2img_seed_row"] label {
  flex-direction: row;
}

[id$="2img_seed"] label span {
  margin-bottom: 0 !important;
  margin-right: 8px !important;
  align-self: center;
}

[id$="2img_group_seed"] {
  gap: 0 !important;
}

[id$="2img_subseed_show"] label {
  margin-top: 6px;
}

#subseed_show_box-collapse-all {
  margin-left: -1px;
  min-width: unset;
  flex-grow: 0;
}

div.svelte-15lo0d8 > .form > * {
  min-width: min(100px, 100%);
}

label {
  pointer-events: none !important;
}

label > * {
  pointer-events: all;
}

span.ml-2 {
  margin-left: 0 !important;
  padding-left: var(--size-2);
}

/* gradio preloader*/
.svelte-j1gjts {
  pointer-events: none !important;
  width: 5px !important;
  height: 5px !important;
  background-color: var(--ae-primary-color) !important;
  top: 2px !important;
  left: 2px !important;
}

.svelte-j1gjts > * {
  display: none !important;
}

/* [id$="-collapse-all"] div:not([class*="input"])
{
    border:none !important;	
	margin:0!important;
	padding:0!important;
	border-radius:0!important;
	background-color:transparent!important;
	outline: 0 !important;
} */

#txtimg_hr_finalres {
  min-height: 0 !important;
  outline: 0;
  position: absolute;
  margin-top: 2px;
  margin-left: 60px;
}

#txtimg_hr_finalres .resolution {
  font-weight: bold;
}

#txt2img_hr_upscaler {
  max-width: 100%;
}

#txtimg_hr_finalres .prose.gradio-html {
  padding: var(--ae-inside-padding-size) !important;
}

.gradio-container-3-31-0 .prose {
  min-height: unset !important;
}

#header-top > .gradio-row:not(#nav_menu, #nav_menu_header_tabs) {
  margin-left: max(4px, var(--ae-outside-gap-size));
}

#header-top {
  gap: 1px !important;
}

[id$="_prompt_image"] + div {
  gap: 1px !important;
}

[id*="2img_toprow"],
[id*="2img_toprow"] .gap {
  gap: 1px !important;
}

.script-group,
[id*="_sub-group"] {
  padding: var(--ae-inside-padding-size) !important;
  background-color: var(--ae-subgroup-bg-color) !important;
  border-radius: var(--ae-panel-border-radius);
  border: 1px solid var(--ae-subpanel-border-color) !important;
  margin-top: calc(-1px + var(--ae-outside-gap-size) * -1);
  padding-bottom: calc(var(--ae-inside-padding-size) + 2px) !important;
}

.script-group > div,
[id*="_sub-group"] > div {
  border-radius: var(--ae-subpanel-border-radius);
}

.script-group div.block,
[id*="_sub-group"] div.block {
  background-color: var(--ae-subpanel-bg-color) !important;
  border: 0px solid var(--ae-subpanel-border-color) !important;
  border-radius: var(--ae-subpanel-border-radius) !important;
  margin: 0px;
}

.script-group fieldset.block.padded,
.script-group div.gradio-row > .form,
[id*="_sub-group"] div.gradio-row > .form {
  background-color: var(--ae-subpanel-bg-color) !important;
  border-radius: var(--ae-subpanel-border-radius) !important;
}

.script-group div.svelte-b6y5bg,
.script-group div.gradio-row > .form,
[id*="_sub-group"] div.gradio-row > .form {
  border: 0;
  padding: 1px;
  background: var(--ae-subpanel-border-color) /*transparent*/ !important;
  gap: 1px !important;
  margin: 0px;
  border-radius: var(--ae-subpanel-border-radius) !important;
}

[id*="_sub-group"] div.gradio-row > .form {
  border: 0;
  padding: 0px;
}

.compact.svelte-15lo0d8,
.panel.svelte-15lo0d8 {
  border-radius: var(--ae-panel-border-radius);
  background: var(--ae-panel-bg-color);
  padding: 0;
  gap: 1px !important;
}

.script-group .compact,
.script-group .gradio-column {
  gap: 1px !important;
  padding: 0;
}

.script-group button.secondary,
.script-group .wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label,
.script-group .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label,
.script-group input[type="checkbox"],
.script-group input[type="radio"] {
  border-radius: var(--ae-subpanel-border-radius) !important;
}

.script-group div.block.gradio-html {
  background: transparent !important;
}

.script-group input[type="number"],
.script-group input[type="range"],
.script-group textarea,
.script-group button.tool.secondary,
[id*="_sub-group"] button.tool.secondary,
[id*="_sub-group"] input:not(.border-none) {
  border-radius: var(--ae-subpanel-border-radius) !important;
  border: 1px solid var(--ae-subgroup-input-border-color) !important;
  background: var(--ae-subgroup-input-bg-color) !important;
  color: var(--ae-subgroup-input-color) !important;
}

.script-group button.tool.secondary:hover,
button.tool.secondary:hover,
[id*="_sub-group"] button.tool.secondary:hover {
  background: var(--ae-icon-color) !important;
  /*color: var(--ae-subgroup-input-color)!important;*/
}

#png_2img_results button.secondary:hover,
[id^="image_buttons_"] button.secondary:hover {
  background: var(--ae-icon-color) !important;
  color: var(--ae-icon-hover-color) !important;
}

.script-group > div.gradio-row,
[id*="_sub-group"] > div.gradio-row {
  gap: 1px !important;
  border: 1px solid var(--ae-subpanel-border-color) !important;
  margin: -1px;
  background: var(--ae-subpanel-border-color) !important;
  border-radius: var(--ae-subpanel-border-radius) !important;
  /* padding: var(--ae-inside-padding-size); */
  position: relative;
  left: 1px;
  top: 1px;
}

[id*="_sub-group"] div.gradio-row:not(:last-child) > .form {
  /*margin-bottom: 1px;*/
}

.script-group + div.form,
[id*="_group_"] + div.form {
  margin-top: calc(-1px + var(--ae-outside-gap-size) * -1);
}

[id$="-collapse-all"] div:not([class*="wrap"]) {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  outline: 0 !important;
}

[id*="_sub-group"] [id$="-collapse-all"] > div.form {
  background-color: transparent !important;
}

.script-group .gradio-dropdown label .wrap,
[id*="_sub-group"] .gradio-dropdown label .wrap {
  border-radius: var(--ae-subpanel-border-radius) !important;
  background: var(--ae-subgroup-input-bg-color) !important;
  border-color: var(--ae-subgroup-input-border-color) !important;
}

.script-group .gradio-dropdown label .wrap span,
[id*="_sub-group"] .gradio-dropdown label .wrap span {
  color: var(--ae-subgroup-input-color) !important;
}

.script-group .dropdown-arrow,
[id*="_sub-group"] .dropdown-arrow {
  fill: var(--ae-subgroup-input-color) !important;
}

[id*="_controls_sub-group"] {
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 2px !important;
}

.script-alwayson-group .gradio-html + .form {
  padding-top: 1px;
}

#mode_img2img > .form {
  border: 0 !important;
}

[id$="-collapse"] button,
[id$="-collapse-one"] button,
[id$="-collapse-all"] button {
  align-self: flex-end;
}

[id$="-collapse"] fieldset,
[id$="-collapse-one"] fieldset,
[id$="-collapse-all"] fieldset {
  padding: 0;
}

.block.gradio-file,
.block.gradio-image {
  border-radius: 0;
  background: var(--ae-input-bg-color);
  border-color: var(--ae-input-border-color);
}

.gradio-tabs {
  background-color: var(--ae-main-bg-color);
  padding: var(--ae-inside-padding-size);
  border-radius: var(--ae-panel-border-radius);
}

.gradio-accordion .gradio-tabs {
  padding: 0;
}

#img2img_dimensions_row{
  min-width:unset !important;
  max-width:34px;
}

[id$="2img_detect_image_size_btn"],
[id$="2img_res_switch_btn"] {
  margin: -1px !important;
}

#dim_controls > div:nth-child(2) {
  margin-top: -1px !important;
  margin-bottom: -1px !important;
}

/***************************/
/* Generate Interrupt Skip */
/***************************/
.gradio-button.generate-box-skip,
.gradio-button.generate-box-interrupt {
  display: none;
}

button.secondary,
button.primary {
  border: 1px solid var(--ae-input-border-color) !important;
  border-radius: var(--ae-panel-border-radius) !important;
  background: var(--ae-input-bg-color) !important;
  color: var(--ae-input-color) !important;
}

button.secondary:hover,
button.primary:hover {
  background: var(--ae-primary-color) !important;
  color: var(--ae-input-bg-color) !important;
}

[id$="_generate"],
[id$="2img_settings"] > button:first-child {
  min-height: var(--ae-generate-button-height);
}

button[id$="_generate_forever"] {
  flex-grow: 0;
  min-width: unset;
}

button[id$="_generate_forever"].active {
  background: var(--ae-primary-color) !important;
  color: var(--ae-input-bg-color) !important;
}

button[id$="_generate_forever"].active:before {
  background: var(--ae-icon-hover-color) !important;
}

[id$="_interrupt"].secondary,
[id$="_skip"].secondary {
  min-height: var(--ae-generate-button-height);
  background-color: var(--ae-input-bg-color);
  /*
  position: absolute;
  width: 50%;
  height: 100%;
  */
  display: none;
}

[id$="_interrupt"].secondary:hover,
[id$="_skip"].secondary:hover {
  background-color: var(--ae-cancel-color) !important;
}

[id$="2img_generate_box"] {
  position: relative;
}

[id$="_interrupt"] {
  left: 0;
}

[id$="_skip"] {
  right: 0;
}

[id$="2img_generate_box"] button {
  display: flex;
}

.inactive {
  opacity: 0.5;
}

.performance {
  font-size: 0.85em;
  color: var(--ae-primary-color) !important;
}

.performance p {
  display: inline-block;
}

.performance .time {
  margin-right: 0;
}

/***************************/
/* Context Menu */
/***************************/

.image-buttons button {
  min-width: auto;
}

.infotext {
  overflow-wrap: break-word;
}

#img2img_unused_scale_by_slider {
  visibility: hidden;
  width: 0.5em;
  max-width: 0.5em;
  min-width: 0.5em;
}

/* settings */

.context-menu-items a:hover {
  color: var(--ae-nav-bg-color);
  background-color: var(--ae-primary-color);
}

.context-menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-menu-items a {
  display: block;
  padding: 5px;
  cursor: pointer;
}

/**********************/
/* splitter and views */
/**********************/

[id$="2img_settings"]::before {
  pointer-events: none;
  content: "";
  position: absolute;
  z-index: 999;
  height: calc(
    var(--ae-container-height-gap) - var(--ae-generate-button-height)
  );
  top: calc(
    var(--ae-generate-button-height) + (var(--ae-outside-gap-size) * 2)
  );
  left: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(
    0deg,
    var(--ae-main-bg-color),
    transparent 0%,
    transparent 99%,
    var(--ae-main-bg-color) 100%
  );
}

[id$="2img_settings"] {
  min-width: min(490px, 100%) !important;
  flex: 1 1 0%;
  /*display: block !important;*/
}

[id$="2img_settings_scroll"] {
  /* need to calculate this */
  height: calc(
    var(--ae-container-height-gap) - var(--ae-generate-button-height) -
      (var(--ae-outside-gap-size))
  );
  overflow-y: auto !important;
  overflow-x: hidden;
  /*margin-top: var(--ae-outside-gap-size);*/
  /*padding-left: 1px;
    padding-right: 1px;*/
  margin: 0;
  padding-top: var(--ae-outside-gap-size) !important;
}

[id$="_prompt_image"] + div {
  flex-wrap: nowrap;
}

[id$="2img_settings"] {
  flex-grow: 1;
  flex-shrink: 0;
  /*overflow-x: auto;*/
  flex-basis: 50%;
}

[id$="2img_results"] {
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  flex-basis: 50%;
}

[id$="_splitter"] {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  /* background-color: var(--ae-input-bg-color); */
  cursor: col-resize;
  margin: 0 0 0 auto;
  min-width: 1px !important;
  max-width: 1px !important;
  align-self: stretch;
  /*border: 1px dashed var(--ae-input-bg-color);*/
  padding: 0px 2px !important;
  background-image: linear-gradient(
    0deg,
    var(--ae-input-bg-color),
    var(--ae-input-bg-color) 60%,
    transparent 60%,
    transparent 100%
  );
  background-size: 1px 5px;
  background-repeat-x: no-repeat;
  background-position: 2px;
  border: none;
}

#tabs [id$="2img_results"] {
  flex: 1 1 50%;
}

/***********/
/* PngInfo */
/***********/

[id$="png_2img_settings"]::before {
  display: none;
}

[id$="png_2img_settings_scroll"] {
  padding: 0 !important;
  height: calc(100vh - 170px);
}

[id$="png_2img_settings_scroll"] div[data-testid="image"] img {
  max-height: unset !important;
}

#pnginfo_image div[data-testid="image"] > div {
  max-height: calc(100vh - 175px) !important;
  height: 100% !important;
}

#pnginfo_image {
  height: 100% !important;
}

#pnginfo_image div[data-testid="image"] {
  max-height: unset;
  height: 100% !important;
}

[id$="png_2img_results"] > div:nth-child(3) {
  display: none;
}

button.secondary {
  min-height: 34px;
  padding: 4px !important;
}

.thumbnail-item {
  box-shadow: none !important;
  border: 1px solid var(--ae-panel-border-color) !important;
  border-radius: 0 !important;
  background: var(--ae-main-bg-color) !important;
  aspect-ratio: unset !important;
  overflow: visible !important;
  object-fit: contain !important;
}

.block.gradio-gallery.svelte-mppz8v {
  background: var(--ae-main-bg-color);
  border-color: var(--ae-panel-border-color);
}

/*********/
/* Train */
/*********/
[id$="png_2img_results"] > div:nth-child(3) {
  display: none;
}

[id$="train_tabs_2img_settings"]::before {
  display: none;
}

[id$="train_tabs_2img_settings"] .tabitem {
  background-color: var(--ae-input-bg-color) !important;
  border-radius: var(--ae-panel-border-radius) !important;
  padding: var(--ae-outside-gap-size) !important;
  max-width: 100%;
}

[id$="train_tabs_2img_settings"] > div:first-child {
  margin: 0;
  padding: 0;
  width: calc(100vw - (var(--ae-container-padding) * 2) - 4px);
}

[id$="train_tabs_2img_settings"] [id$="_2img_settings_scroll"] {
  padding-top: 0 !important;
  height: calc(
    var(--ae-container-height-gap) - var(--ae-generate-button-height) -
      (var(--ae-outside-gap-size)) + 50px
  );
}

#ti_2img_splitter,
#ti_2img_results {
  margin-top: 28px;
  max-height: calc(var(--ae-container-height) - 28px);
}

#ti_output {
  padding: 0 !important;
  border: 0;
  background: 0;
}

#ti_output label span {
  display: none;
}

#ti_error + div *:not(.progressDiv, .progress),
#ti_error + div {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 0;
}

#ti_error,
#ti_output,
#ti_progress {
  padding: 0 8px !important;
}

#ti_gallery_container .livePreview {
  height: calc(var(--ae-container-height-gap) - 150px) !important;
}

#tabs,
#tabs_extensions,
#tab_settings,
#tab_settings .tabs,
[id$="train_tabs_2img_settings"] {
  padding: 0 !important;
}

#train_tabs_2img_settings .primary.gradio-button {
  min-height: var(--ae-generate-button-height);
}

#train_2img_settings_scroll .gradio-row.svelte-15lo0d8:not(:last-child) {
  gap: 1px !important;
}

[id^="train_process_"] {
  min-width: 180px !important;
}

.gradio-html,
#settings_result {
  height: auto !important;
  width: 100%;
  color: var(--ae-primary-color);
  padding: 0 !important;
}

.block.svelte-mppz8v {
  box-shadow: none;
  border-color: var(--ae-panel-border-color);
  border-radius: 0;
  background: var(--ae-input-bg-color);
}

#tabs {
  flex-grow: 1;
}

/******************/
/* extra-network-cards */
/******************/

[id$="2img_extra_networks_row"].aside {
  position: fixed;
  top: var(--ae-top-header-height);
  width: 90%;
  right: 0;
  height: calc(100% - var(--ae-top-header-height));
  max-width: 50%;
  min-width: 320px;
  z-index: 9999;
  transform: translateX(100%);
  transition: all 0.25s ease 0s;
  box-shadow: rgba(0, 0, 0, 0) -30px 0 30px -30px;
  padding: calc(1rem - var(--ae-outside-gap-size));
  background-color: var(--ae-main-bg-color) !important;
  display: block !important;
}

[id$="2img_extra_networks_row"].aside.open {
  transform: translateX(0);
  box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px -30px;
}

[id$="2img_extra_networks_row"].aside > div:first-child {
  border: 0 !important;
  padding-top: 0 !important;
}

[id$="2img_extra_networks_row"].aside > div:first-child > div:first-child {
  display: none;
  border: 0;
}

[id$="2img_extra_networks_row"].aside.\!hidden,
[id$="2img_extra_networks_row"].aside > div:first-child > div:last-child {
  display: block !important;
  padding-top: 0;
}

[id$="2img_extra_close"] {
  display: none;
}

[id$="_subdirs"] button {
  max-height: 34px;
  margin-bottom: var(--ae-inside-padding-size) !important;
}

[id$="2img_extra_networks_row"].aside .gradio-accordion > .label-wrap {
  display: none !important;
}

/* [id$="_subdirs"] {
    margin-top: var(--ae-inside-padding-size) !important;
} */
.extra-network-cards .nocards,
.extra-network-thumbs .nocards {
  margin: 1.25em 0.5em 0.5em;
}

.extra-network-cards .nocards h1,
.extra-network-thumbs .nocards h1 {
  font-size: 1.5em;
  margin-bottom: 1em;
}

.extra-network-cards .nocards li,
.extra-network-thumbs .nocards li {
  margin-left: 0.5em;
}

.extra-networks div {
  margin: 0;
  padding: 0;
  border: 0;
}

.extra-networks > div:first-child > * {
  margin-bottom: 0;
}

.extra-networks .tabitem .block.gradio-html {
  padding: 0 !important;
}

.extra-networks .search,
[id$="2img_extra_refresh"],
[id$="2img_extra_close"] {
  max-height: 32px;
  margin-right: 4px;
  border: 0;
  flex-grow: 1;
  padding-bottom: 0px !important;
  min-height: 34px !important;
}

.extra-networks .search {
  width: 60%;
}

.extra-networks [id$="2img_extra_clear"] {
  position: relative;
  border-radius: 50% !important;
  margin-left: -25px !important;
  margin-top: 8px;
  right: 8px;
  height: fit-content;
}

.extra-networks + * {
  display: none !important;
}

.extra-network-cards {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, var(--ae-extra-networks-card-real-size));  
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	*/
  grid-gap: var(--ae-inside-padding-size);

  max-height: calc(var(--ae-extra-networks-height) * 1.33);

  grid-template-rows: repeat(
    var(--ae-extra-networks-visible-rows),
    calc(var(--ae-extra-networks-card-real-size) * 1.33)
  );
  grid-auto-columns: var(--ae-extra-networks-card-real-size);
  grid-auto-flow: column;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

[id$="2img_extra_networks_row"].aside .extra-network-cards {
  /*grid-template-columns: repeat(auto-fill, var(--ae-extra-networks-card-real-size)); */
  /*grid-template-columns: repeat(calc( var(--ae-extra-networks-card-size) * 4), calc( var(--ae-extra-networks-card-size) * 25%));*/
  grid-template-columns: repeat(
    auto-fit,
    minmax(calc(var(--ae-extra-networks-card-size) * 25%), 1fr)
  );
  /* overflow-y: auto; */
  /* scroll-snap-type: y mandatory; */
  overflow-x: hidden;
  grid-template-rows: auto;
  grid-auto-flow: row;
  max-height: unset;
  /* max-height: calc(100vh - 230px); */
}

[id$="2img_extra_networks_row"].aside .tabitem {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 160px);
  border-radius: 0;
}

.extra-networks .tab-nav {
  padding-bottom: var(--ae-inside-padding-size);
}

.extra-network-cards .card {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  cursor: pointer;
  border: 1px dashed var(--ae-panel-bg-color);
  display: block !important;
}

.extra-network-cards .card::after {
  display: block;
  content: "";
  padding-bottom: 133%;
}

.extra-network-cards .card-container {
  position: relative;
}

.extra-network-cards .image-icon {
  background-color: var(--ae-panel-border-color);
  -webkit-mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%) translateY(-50%);
}

.card-container .description {
  display: none !important;
}

.extra-network-cards .card .actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5em;

  background: rgba(0, 0, 0, 0.5);
  /*box-shadow: 0 0 .25em .25em rgba(0, 0, 0, .5);*/
  /*text-shadow: 0 0 .2em #000;*/
  text-shadow: none;
  box-shadow: none;
}

.extra-network-cards .card .actions:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.extra-network-cards .card .actions .name {
  font-size: var(--ae-extra-networks-name-size);
  font-weight: 700;
  line-break: anywhere;
  color: var(--ae-text-color);
}

.extra-network-cards .card .actions:hover .additional {
  display: block;
}

.extra-network-cards .card ul {
  margin: 0.25em 0 0.75em 0.25em;
  cursor: unset;
}

.extra-network-cards .card ul a {
  cursor: pointer;
}

.extra-network-cards .card .metadata-button:before,
.extra-network-thumbs .card .metadata-button:before {
  content: "🛈";
}

.extra-network-cards .card .metadata-button,
.extra-network-thumbs .card .metadata-button {
  display: none;
  position: absolute;
  right: 8px;
  top: 8px;
  color: white;
  text-shadow: 2px 2px 3px black;
  font-size: 22pt;
}

.extra-network-cards .card:hover .metadata-button,
.extra-network-thumbs .card:hover .metadata-button {
  display: inline-block;
}

.extra-network-cards .card .metadata-button:hover,
.extra-network-thumbs .card .metadata-button:hover {
  color: var(--ae-primary-color);
}

.extra-network-cards .card {
  overflow: hidden;
}

.extra-network-cards .card img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/************/
/* MainTabs */
/************/
.tabitem {
  background-color: var(--ae-main-bg-color) !important;
  padding: 0 !important;
  border: 0 !important;
}

.tabs .border-b-2 {
  border-color: var(--ae-input-bg-color);
}

.tabs > div > button {
  padding: 8px;
  padding-top: 0;
  padding-right: 10px;
  padding-left: 0;
  color: var(--ae-label-color);
  border: 0;
  opacity: 0.75;
}

.tabs > div > button:hover {
  color: var(--ae-label-color);
  opacity: 1;
}

.tabs > div > .selected {
  background: transparent;
  border: 0;
  color: var(--ae-primary-color);
}

#tabs > div:first-child > button.selected {
  color: var(--ae-primary-color);
}

/* offcanvas menu */
#tabs > div:first-child {
  position: fixed;
  z-index: 10000;
  display: block;
  width: 90%;
  height: 100%;
  background-color: var(--ae-nav-bg-color) !important;
  top: 0;
  padding-top: var(--ae-top-header-height);
  left: 0;
  max-width: 320px;
  transform: translateX(-100%);
  transition: all 0.25s ease 0s;
  box-shadow: rgba(0, 0, 0, 0)-30px 0 30px 30px;
  overflow-y: auto;
  overflow-x: hidden;
}

#tabs > div:first-child.open {
  transform: translateX(0);
  box-shadow: rgba(0, 0, 0, 0.4)-30px 0 30px 30px;
}

#tabs > div:first-child > button {
  display: block;
  width: 320px;
  text-align: left;
  background-color: transparent !important;
  border-top: 2px !important;
  border-bottom: 2px !important;
  border-left: 0;
  border-right: 0;
  border-radius: 0 !important;
  padding: 0px;
  padding-left: 20px;
  min-height: 37px;
  color: var(--ae-nav-color);
}

#tabs > div:first-child > button:hover {
  background-color: var(--ae-primary-color) !important;
  color: var(--ae-main-bg-color) !important;
}

#tabs > div {
  padding: 0;
  border: 0;
}

.tab-nav.svelte-1g805jl {
  border: 0;
  /*padding-bottom: var(--ae-inside-padding-size);*/
}

#dim_controls > div:first-child {
  margin-bottom: max(7px, var(--ae-outside-gap-size)) !important;
}

input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt,
input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 {
  background-color: var(--ae-panel-bg-color);
}

label.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt,
label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 {
  pointer-events: all !important;
}

/*****************/
/* Quicksettings */
/*****************/

/* offcanvas quicksettings menu */
#quicksettings_overflow {
  position: fixed;
  z-index: 9999;
  display: block;
  width: 90%;
  background-color: var(--ae-main-bg-color) !important;
  top: var(--ae-top-header-height);
  bottom: 0px;
  padding: 16px;
  /*padding-top: 0px;*/
  right: 0;
  max-width: 480px;
  transform: translateX(100%);
  transition: all 0.25s ease 0s;
  box-shadow: rgba(0, 0, 0, 0) -30px 0 30px -30px;
  overflow: hidden;
  padding-top: 0;
}

#quicksettings_overflow_container {
  overflow-y: auto;
  height: calc(100% - 45px);
}

#quicksettings_overflow.open {
  transform: translateX(0);
  box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px -30px;
}

#quicksettings_overflow > div {
  margin-bottom: var(--ae-outside-gap-size);
}

#quicksettings_actions > div {
  background-color: transparent !important;
  border: 0;
}

#quicksettings_actions > div > div,
[id*="add2quick_"] {
  min-width: unset !important;
  flex-grow: 0 !important;
  padding: 4px !important;
  border: 1px solid var(--ae-panel-border-color) !important;
}

#quicksettings_actions > div label,
[id*="add2quick_"] label {
  display: block;
  position: relative;
  cursor: pointer;
  line-height: 25px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: auto !important;
  padding: 0 !important;
  min-width: 25px;
  min-height: 25px;
}

/* Hide the browser's default checkbox */
#quicksettings_actions > div input,
[id*="add2quick_"] input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
#quicksettings_actions > div span,
[id*="add2quick_"] span {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: var(--ae-input-color);
  padding: 0;
  margin: 0 !important;
  opacity: 0.5;
}

[id*="add2quick_"] span {
  -webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
}

/* On mouse-over, add a grey background color */
#quicksettings_draggable label input:checked ~ span,
#quicksettings_actions > div label:hover input ~ span,
[id*="add2quick_"] label:hover input ~ span {
  background-color: var(--ae-icon-color);
  opacity: 1;
}

/* When the checkbox is checked, add a blue background */

[id*="add2quick_"] label input:checked ~ span {
  -webkit-mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%;
  background-color: var(--ae-input-color);
  opacity: 0.5;
}

#quicksettings_draggable span {
  -webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%;
}

#quicksettings_sort_asc span {
  -webkit-mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%;
}

#quicksettings_sort_desc span {
  -webkit-mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%;
}

#quicksettings_overflow_container > div.marker-bottom:after,
#quicksettings_overflow_container > div.marker-top:before {
  content: " ";
  display: inline-block;
  background-color: var(--ae-primary-color);
  width: 100%;
  height: 2px;
  position: relative;
  margin-top: calc((1px + (var(--ae-outside-gap-size) / 2)) * -1);
}

#quicksettings_overflow_container > div.marker-bottom:after {
  top: calc((var(--ae-outside-gap-size) / 2) - 1px);
}

#quicksettings_overflow_container > div > div:nth-child(2),
[id$="settings_2img_settings"] > div > div:nth-child(2) {
  flex-shrink: 1 !important;
  flex-grow: 0 !important;
  flex-basis: 0% !important;
  min-width: unset;
  position: relative;
  margin-left: -1px;
}

/*
#quicksettings_overflow_container > div:first-child {
    margin-top: var(--ae-outside-gap-size);
}
*/

#quicksettings_overflow_container.no-scroll {
  /*overflow:hidden;
	width:100%;*/
}

/* #quicksettings_actions{
	 margin-bottom:0 !important;
} */

#quicksettings_overflow_container > div.dragging {
  opacity: 0.4 !important;
}

[draggable="true"] [id*="add2quick_"] {
  pointer-events: none;
}

[draggable="true"] [id*="add2quick_"] label input:checked ~ span {
  -webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%;
  mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%;
  background-color: var(--ae-input-color);
  opacity: 0.5;
}

#quicksettings_actions > div label input:checked ~ span:after,
#quicksettings_actions > div label:hover input:checked ~ span,
[id*="add2quick_"] label:hover input:checked ~ span {
  background-color: var(--ae-icon-color);
  opacity: 1;
}

/* Create the checkmark/indicator (hidden when not checked) */
#quicksettings_actions > div label span:after,
[id*="add2quick_"] label span:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
#quicksettings_actions > div label input:checked ~ span:after,
[id*="add2quick_"] label input:checked ~ span:after {
  display: block;
}

#ui_add2quick_setting_hidden_tabs,
[id*="add2quick_setting_quicksettings"] {
  display: none;
}

/****************/
/* modelmerger  */
/****************/
#modelmerger_models {
  gap: 1px !important;
}

#modelmerger_config_method {
  margin: -1px;
  width: auto;
  margin-bottom: calc(var(--ae-outside-gap-size) * -1);
}

/******************/
/* extensions tab */
/******************/
#tabs_extensions .block {
  padding: 0 !important;
}

#tab_extensions table {
  border-collapse: collapse;
  width: 100%;
}

#tab_extensions table td,
#tab_extensions table th {
  padding: 0.25em 0.5em;
  border: 1px solid var(--ae-panel-border-color);
  overflow-wrap: anywhere;
  min-width: 75px;
}
#tab_extensions table tr {
  background-color: var(--ae-main-bg-color);
}
#tab_extensions table tr:nth-child(even) {
  background-color: var(--ae-frame-bg-color);
}

#tab_extensions table input[type="checkbox"] {
  margin-right: 0.5em;
  top: -3px;
}

#tab_extensions table button {
  max-width: 5em;
  min-width: 5em;
}

#extensions_installed_top div {
  /*display: none;*/
}

#tab_extensions input[disabled="disabled"] {
  opacity: 0.5;
}

.extension-tag {
  font-weight: 700;
  font-size: 95%;
}

#available_extensions .info {
  margin: 0;
}

#available_extensions .date_added {
  opacity: 0.85;
  font-size: 90%;
}

/*************/
/* settings  */
/*************/
#row_setting_quicksettings_list,
#row_setting_gradio_theme,
#row_setting_hidden_tabs
{
display:none !important;
}
pre {
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
}

[id$="settings_2img_settings"] {
  max-height: calc(100vh - 245px);
  overflow-y: auto;
}

[id$="settings_2img_settings"]::before {
  display: none;
}

#settings_result {
  height: auto !important;
  width: 100%;
  text-align: center;
  color: var(--ae-primary-color);
  min-height: unset;
}

#settings_sd #row_setting_sd_model_checkpoint {
  display: none;
}

#settings {
  display: block;
}

#settings > div {
  border: none;
  margin-left: 10em;
}

#settings > div.tab-nav {
  float: left;
  display: block;
  margin-left: 0;
  width: 12em;
}

#settings > div.tab-nav button {
  display: block;
  border: none;
  text-align: left;
  white-space: initial;
  height: 27px;
  padding: 0px;
  padding-right: 10px;
  /*
	width: 100%;
	padding: 5px;
    border: 1px solid var(--ae-frame-bg-color);
    border-radius: 0;
    border-top-left-radius: var(--ae-panel-border-radius);
    border-bottom-left-radius: var(--ae-panel-border-radius);
	*/
}

#settings > div.tab-nav button.selected {
  /*background: var(--ae-frame-bg-color);*/
  border-left: 2px solid;
  border-radius: 0;
  padding-left: 5px;
}

.global-popup-inner {
  top: 50px;
  position: relative;
  overflow-y: auto;
  height: calc(100% - 50px);
  width: 100%;
}

.global-popup-close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 25px;
  height: 25px;
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%;
}

.global-popup {
  position: fixed;
  z-index: 99999;
  top: 0px;
  left: 0px;
  background: var(--ae-main-bg-color);
  color: var(--ae-primary-color);
  line-break: anywhere;
  height: 100%;
  width: 100%;
  opacity: 0.98;
}

@media only screen and (max-width: 860px) {
  /* For tablets: */
  [id$="_splitter"] {
    display: none !important;
  }

  [id$="2img_settings_scroll"] {
    height: auto !important;
  }

  [id$="2img_results"] {
    max-height: unset !important;
  }

  [id$="2img_settings"]::before {
    display: none;
  }

  [id$="2img_actions_column"] {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  [id$="2img_settings_scroll"] {
    padding-top: 0;
  }

  .gr-block,
  .dark .gr-block,
  .gr-form,
  #txt2img_seed,
  #img2img_seed,
  #txt2img_subseed,
  #img2img_subseed,
  #txt2img_seed_row > div,
  #img2img_seed_row > div,
  #txt2img_subseed_row > div,
  #img2img_subseed_row > div {
    min-width: 70px;
  }

  [id$="2img_gallery"] {
    margin-bottom: 0px;
  }

  [id$="2img_tools"] {
    gap: 2px;
  }

  [id$="2img_results"] {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    overflow-x: hidden;
  }

  #splitter {
    display: none;
  }

  [id$="2img_prompt_image"] + div {
    flex-wrap: wrap;
  }

  [id$="2img_results"] {
    flex-grow: 1 !important;
  }

  .token-counter span {
    position: relative;
    top: 3px;
    right: 3px;
  }

  #settings > div {
    margin-left: 0;
  }

  #settings > div.tab-nav {
    float: none;
    display: flex !important;
    margin-left: 0;
    width: auto;
    margin-bottom: 8px;
  }

  [id$="2img_hr_scale"] {
    flex-basis: 100% !important;
  }

  /* 
	[id$="2img_gallery"] div.modify-upload{
		position:absolute;
	}
	*/

  [id$="2img_gallery"],
  [id$="2img_gallery"] div.preview.fixed-height > img,
  [id$="2img_gallery"] .preview.fixed-height,
  [id$="2img_gallery"] img + div.thumbnails {
    position: relative !important;
    height: auto !important;
    min-height: auto;
    border-radius: 0 !important;
  }

  [id$="2img_gallery"],
  [id$="2img_gallery"] div.preview.fixed-height > img,
  [id$="2img_gallery"] .preview.fixed-height {
    max-height: unset !important;
  }

  [id$="2img_gallery"] div > img {
    object-fit: contain;
  }

  [id$="2img_gallery"] .preview.fixed-height,
  [id$="2img_gallery"] .grid-wrap,
  [id$="2img_gallery"] .empty {
    min-height: auto !important;
  }

  [id$="2img_gallery"] img + div.thumbnails {
    height: 60px !important;
  }

  .livePreview img {
    object-position: top;
    border-radius: 0 !important;
    position: relative;
    width: 100%;
  }

  .livePreview.init,
  .livePreview:not(.init) + div {
    display: none;
  }

  .livePreview {
    /*width: calc(100% - (var(--ae-outside-gap-size) * 2)) !important; */
    max-height: unset !important;
    /*bottom:60px;*/
    position: relative !important;
    left: 0;
    top: 0;
    width: auto !important;
    height: auto !important;
  }

  div.svelte-10ogue4 > *:first-child.livePreview {
    /*height: calc(100% - 60px - var(--ae-outside-gap-size) - 2px) !important;*/
    /*height: auto !important;*/
  }

  div.svelte-10ogue4 > *:first-child.livePreview > img {
    /*height: auto !important;*/
  }

  [id$="png_2img_results"] {
    order: 1;
  }

  [id$="settings_2img_settings"] {
    max-height: none;
  }

  #nav_menu_header_tabs,
  #tab_extensions td,
  #tab_extensions th {
    display: none !important;
  }

  #tab_extensions td:nth-child(2),
  #tab_extensions td:nth-child(2),
  #tab_extensions th:nth-child(2),
  #tab_extensions th:nth-child(2),
  #tab_extensions td:nth-child(5),
  #tab_extensions td:nth-child(5),
  #tab_extensions th:nth-child(5),
  #tab_extensions th:nth-child(5),
  #tab_extensions td:first-child,
  #tab_extensions td:last-child,
  #tab_extensions th:first-child,
  #tab_extensions th:last-child {
    display: table-cell !important;
  }

  #ti_2img_splitter,
  #ti_2img_results {
    margin-top: 0;
  }

  #train_tabs_2img_settings > div:first-child {
    width: 100%;
  }

  #tab_ti .livePreview,
  #tab_ti .livePreview.init {
    min-height: unset !important;
  }

  #ti_gallery_container {
    max-height: unset !important;
  }

  #ti_error,
  #ti_output,
  #ti_progress {
    padding: 0 !important;
  }
}

/************/
/* Footer */
/************/
.gradio-container.app {
  min-height: 100vh !important;
}

.main > .wrap > .contain {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

footer {
  display: none !important;
}

#tabs + div {
  position: relative;
  z-index: 999;
  padding: 0px !important;
}

.footer-wrapper {
  display: flex;
}

.footer-links {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.footer-links > li {
  display: inline-block;
  width: 32px;
  height: 32px;
  text-align: center;
  float: left;
  border-radius: 100%;
  position: relative;
  display: flex;
  margin: 0 !important;
}

.footer-links > li > div,
.footer-links > li > a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  fill: var(--ae-primary-color);
}

.footer-links > li:last-child {
  position: absolute;
  top: 0;
  right: 0;
}

a:hover,
a:visited,
a {
  color: var(--ae-primary-color) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--ae-primary-color) !important;
  text-decoration: underline !important;
}

/************/
/* Tooltips */
/************/

a[data-tooltip].top:before,
a[data-tooltip].top:after {
  transform: translateY(10px);
}

a[data-tooltip].top:hover:after,
a[data-tooltip].top:hover:before {
  transform: translateY(0px);
}

a[data-tooltip].right:before,
a[data-tooltip].right:after {
  transform: translateX(0px);
}

a[data-tooltip].right:hover:after,
a[data-tooltip].right:hover:before {
  transform: translateX(10px);
}

a[data-tooltip].bottom:before,
a[data-tooltip].bottom:after {
  transform: translateY(-10px);
}

a[data-tooltip].bottom:hover:after,
a[data-tooltip].bottom:hover:before {
  transform: translateY(0px);
}

a[data-tooltip].left:before,
a[data-tooltip].left:after {
  transform: translateX(0px);
}

a[data-tooltip].left:hover:after,
a[data-tooltip].left:hover:before {
  transform: translateX(-10px);
}

a[data-tooltip] {
  position: relative;
  max-width: 320px;
}

a[data-tooltip]:after,
a[data-tooltip]:before {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 99;
}

a[data-tooltip]:before {
  content: attr(data-tooltip);
  background-color: var(--ae-main-bg-color);
  /*color: #fff;*/
  font-size: 10px;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 5px;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

a[data-tooltip]:after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: "";
}

a[data-tooltip]:hover:after,
a[data-tooltip]:hover:before {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}

a[data-tooltip][data-position="top"]:before {
  bottom: 100%;
  left: -130%;
  margin-bottom: 10px;
}

a[data-tooltip][data-position="top"]:after {
  border-top-color: var(--ae-main-bg-color);
  border-bottom: none;
  bottom: 101%;
  left: calc(50% - 6px);
  margin-bottom: 4px;
}

a[data-tooltip][data-position="left"]:before {
  top: -12%;
  right: 100%;
  margin-right: 10px;
}

a[data-tooltip][data-position="left"]:after {
  border-left-color: var(--ae-main-bg-color);
  border-right: none;
  top: calc(50% - 3px);
  right: 100%;
  margin-top: -6px;
  margin-right: 4px;
}

a[data-tooltip][data-position="right"]:before {
  top: -5%;
  left: 100%;
  margin-left: 10px;
}

a[data-tooltip][data-position="right"]:after {
  border-right-color: var(--ae-main-bg-color);
  border-left: none;
  top: calc(50% - 6px);
  left: calc(100% + 4px);
}

a[data-tooltip][data-position="bottom"]:before {
  top: 100%;
  left: -130%;
  margin-top: 10px;
}

a[data-tooltip][data-position="bottom"]:after {
  border-bottom-color: var(--ae-main-bg-color);
  border-top: none;
  top: 100%;
  left: 5px;
  margin-top: 4px;
}

.tooltip-html {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
}

.tooltip-html i {
  position: relative;
  display: block;
}

.tooltip-html .icon-info {
  fill: var(--ae-primary-color);
  scale: 0.9;
}

li.coffee-circle {
  /*background: #FFDD00;*/
  margin-left: 5px;
  margin-right: 5px;
}

.coffee-circle .tooltip-html .top {
  width: 220px;
  max-width: 220px;
  text-align: left;
  padding: 16px;
}

li.coffee-circle p {
  color: var(--ae-text-color);
  float: inherit;
  padding: 0;
  font-size: 14px;
  line-height: 16px !important;
  /*text-align: justify;*/
  padding-bottom: 4px;
}
li.coffee-circle p b {
  color: var(--ae-primary-color) !important;
  font-weight: normal;
}
.coffee-circle .tooltip-html .top > svg,
.coffee-circle .tooltip-html .top > img {
  /*float: left;
  margin-right: 5px;*/
  margin: auto;
  margin-bottom: 8px;
  /*width: 60%;*/
}
.coffee-circle .tooltip-html .top blockquote {
  background: var(--ae-frame-bg-color);
  padding: 10px;
  quotes: "\201C""\201D""\2018""\2019";
  border: 0;
  margin: 8px 0 !important;
}
.coffee-circle .tooltip-html .top blockquote:before {
  opacity: 0.5;
  content: open-quote;
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.15em;
  vertical-align: -0.4em;
}
.coffee-circle .tooltip-html .top blockquote p {
  display: inline;
}

.coffee svg path {
  fill: var(--ae-primary-color) !important;
}

.tooltip-html .coffee {
  fill: var(--ae-main-bg-color);
}

.tooltip-html .top {
  min-width: 200px;
  max-width: 400px;
  top: -20px;
  left: 50%;
  transform: translate(-90%, -100%);
  padding: 10px 20px;
  background-color: var(--ae-main-bg-color);
  font-weight: normal;
  font-size: 14px;
  border-radius: var(--ae-panel-border-radius);
  position: absolute;
  z-index: 99;
  box-sizing: border-box;
  box-shadow: 0 1px 8px rgb(0 0 0 / 50%);
  display: none;
}

.tooltip-html .top.center {
  transform: translate(-50%, -100%);
}

.tooltip-html:hover .top {
  display: block;
}

.tooltip-html .top i {
  position: absolute;
  top: 100%;
  left: 90%;
  margin-left: -15px;
  width: 30px;
  height: 15px;
  overflow: hidden;
}

.tooltip-html .top.center i {
  left: 50%;
}

.tooltip-html .top i::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: var(--ae-main-bg-color);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.tooltip-html span {
  opacity: 0.5;
}

.tooltip-html a {
  color: var(--ae-primary-color);
}

/**********************/
/* Sliders Scrollbars */
/**********************/

::-webkit-scrollbar {
  width: 10px;
}

[id$="2img_settings_scroll"]::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 10px 10px var(--ae-main-bg-color);
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 10px 10px var(--ae-panel-bg-color);
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border-left: solid 6px var(--ae-main-bg-color);
  border-radius: 0;
}

[id$="2img_settings_scroll"]::-webkit-scrollbar-thumb,
[id$="2img_settings_scroll"]::-webkit-scrollbar-track {
  border-left: solid 8px transparent;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="range"] {
    overflow: hidden;
    width: 100%;
    -webkit-appearance: none;
    background-color: var(--ae-input-bg-color);
    border: 1px solid var(--ae-input-border-color);
    position: relative;
    border-radius: var(--ae-panel-border-radius);
  }

  input[type="range"]::after {
    content: "";
    position: absolute;
    height: 13px;
    background-image: var(--ae-slider-bg-overlay);
    opacity: 0.15;
    width: 100%;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 14px;
    -webkit-appearance: none;
    color: var(--ae-primary-color);
    margin-top: -1px;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 0px;
    -webkit-appearance: none;
    height: 14px;
    cursor: ew-resize;
    background-color: var(--ae-primary-color);
    box-shadow: -1024px 0 0 1024px var(--ae-primary-color);
  }

  [id$="_sub-group"] input[type="range"] {
    background-color: var(--ae-subgroup-input-bg-color);
    border: 1px solid var(--ae-subgroup-input-border-color);
  }
}

/* Firefox */

input[type="range"]::-moz-range-progress {
  background-color: var(--ae-primary-color);
  height: 14px;
  border: 1px solid var(--ae-primary-color);
}

input[type="range"]::-moz-range-track {
  background-color: var(--ae-input-bg-color);
}

input[type=range]::after {
  content: "";
  position: absolute;
  height: 13px;
  background-image: var(--ae-slider-bg-overlay);
  opacity: 0.15;
  width: 100%;
}

#quicksettings_overflow_container,
#theme_overflow_container,
[id$="2img_checkpoints_cards"],
[id$="2img_results"],
[id$="2img_settings_scroll"] {
  scrollbar-color: var(--ae-panel-bg-color) var(--ae-main-bg-color) !important;
  scrollbar-width: thin !important;
  /*padding: 0 1px;*/
}

input[type="range"] {
  width: 100%;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  background-color: var(--ae-input-bg-color);
  border: none;
  border-radius: 0px;

  position: relative;
  height: 100%;
  background-image: var(--ae-slider-bg-overlay);
  opacity: 0.15;
  width: 100%;
}

input[type="range"]::-moz-range-thumb {
  border: 0px solid var(--ae-primary-color);
  width: 0px;
  border-radius: 0%;
  background-color: var(--ae-primary-color);
}

/*hide the outline behind the border*/
input[type="range"]:-moz-focusring {
  outline: 1px solid var(--ae-primary-color);
  outline-offset: -1px;
}

input[type="range"]:focus::-moz-range-track {
  background-color: var(--ae-input-bg-color);
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]:hover,
input[type="number"]:focus {
  -moz-appearance: initial;
}

/* IE maybe later  */

input[type="range"]::-ms-fill-lower {
  background-color: var(--ae-primary-color);
}

input[type="range"]::-ms-fill-upper {
  background-color: var(--ae-input-bg-color);
}

/*****************/
/* img2img fixes */
/*****************/
#img2img_scale_resolution_row .form {
  background: transparent !important;
  border: 0 !important;
}

#img2img_unused_scale_by_slider {
  display: none !important;
}

.center.boundedheight.flex {
  width: 100% !important;
  height: auto !important;
  max-height: 50vh;
}

.image-container img.absolute-img {
  position: relative !important;
}

.image-container img {
  max-height: 50vh !important;
}

.image-container {
  min-height: 25vh !important;
  height: auto !important;
  display: flex;
}

.absolute-img.svelte-rlgzoo {
  position: relative;
  opacity: 0;
}

.block.gradio-image {
  height: auto !important;
}

div[data-testid="image"] canvas {
  width: auto !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border: 0 !important;
}

#imageARPreview {
  position: absolute;
  top: 0;
  left: 0;
  outline: 2px solid red;
  background: rgba(255, 0, 0, 0.3);
  z-index: 900;
  pointer-events: none;
  display: none;
}

#tab_img2img div.center.boundedheight.flex {
  display: block !important;
}

/*************/
/* Spotlight */
/*************/

[id^="spotlight"] .no-point-events {
  pointer-events: none;
}

[id^="spotlight"] .move {
  cursor: move;
}

[id^="spotlight"] .z-50,
[id^="spotlight"] .block-hidden {
  display: none;
}

[id^="spotlight"] div {
  border: 0;
}

[id^="spotlight"] {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 99999;
  color: #fff;
  background-color: var(--ae-modal-bg-color);
  opacity: 0;
  overflow: hidden;
  user-select: none;
  transition: opacity 0.2s ease-out;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  contain: strict;
  touch-action: none;
  pointer-events: none;
}

[id^="spotlight"].show {
  opacity: 1;
  transition: none;
  pointer-events: auto;
}

[id^="spotlight"].relative {
  position: relative !important;
  width: auto;
  height: calc(50vh + 40px);
  z-index: 99;
  margin-bottom: 1px;
  padding-top: 40px;
}

[id^="spotlight"].relative .spl-pane {
  top: -20px;
}

[id^="spotlight"].relative .spl-pane > * {
  position: relative;
}

[id^="spotlight"].relative .spl-close {
  display: none;
}

[id^="spotlight"].relative .spl-page {
  display: none;
}

[id^="spotlight"].white {
  color: #212529;
  background-color: #fff;
}

[id^="spotlight"].white .spl-spinner,
[id^="spotlight"].white .spl-prev,
[id^="spotlight"].white .spl-next,
[id^="spotlight"].white .spl-page ~ * {
  filter: invert(1);
}

[id^="spotlight"].white .spl-progress {
  background-color: rgba(0, 0, 0, 0.35);
}

[id^="spotlight"].white .spl-header,
[id^="spotlight"].white .spl-footer {
  background-color: rgba(255, 255, 255, 0.65);
}

[id^="spotlight"].white .spl-button {
  background: #212529;
  color: #fff;
}

[id^="spotlight"] .cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

[id^="spotlight"] .contain {
  object-fit: contain;
  height: 100%;
  width: 100%;
}


[id^="spotlight"] .autofit {
  object-fit: none;
  width: auto;
  height: auto;
  max-height: none;
  max-width: none;
  transition: none;
}

.spl-track {
  position: absolute;
  width: 100%;
  height: 100%;
  contain: strict;
}

.spl-spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 42px;
  opacity: 0;
}

.spl-spinner.spin {
  background-image: url("./file=html/svg/spotlight/preloader.svg");
  transition: opacity 0.2s linear 0.25s;
  opacity: 1;
}

.spl-spinner.error {
  background-image: url("./file=html/svg/spotlight/error.svg");
  background-size: 128px;
  transition: none;
  opacity: 0.5;
}

.spl-scene {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.65s cubic-bezier(0.1, 1, 0.1, 1);
  contain: layout size;
  will-change: transform;
}

.spl-pane > * {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  left: 50%;
  top: 50%;
  margin: 0;
  padding: 0;
  border: 0;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1), opacity 0.65s ease;
  contain: layout style;
  will-change: transform, opacity;
  visibility: hidden;
}

.spl-pane {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1);
  contain: layout size;
  will-change: transform, contents;
}

.spl-pane.hide img {
  display: none !important;
}

.spl-pane.hide {
  background-size: 100%;
  transition: background-size 0.65s cubic-bezier(0.3, 1, 0.3, 1) !important;
  will-change: background-size !important;
  transform: translate(0, 0) !important;
}

.spl-header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 40px;
  text-align: right;
  background-color: rgba(0, 0, 0, 0.85);
  transform: translateY(-100px);
  transition: transform 0.35s ease;
  overflow: hidden;
  will-change: transform;
}

[id^="spotlight"].menu .spl-header,
.spl-header:hover {
  transform: translateY(0);
}

.spl-header div {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  width: 40px;
  height: 40px;
  opacity: 0.5;
  display: flex;
  align-items: center;
}

.spl-progress {
  position: absolute;
  top: 0;
  left: -1px;
  width: 100%;
  height: 3px;
  background-color: var(--ae-modal-icon-color);
  transform: translateX(-100%);
  transition: transform linear;
}

.spl-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
  padding: 20px 20px 0 20px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  transform: translateY(100%);
  transition: transform 0.35s ease;
  will-change: transform;
}

[id^="spotlight"].menu .spl-footer,
.spl-footer:hover {
  transform: translateY(0);
}

.spl-title {
  font-size: 22px;
  margin-bottom: 20px;
}

.spl-description {
  margin-bottom: 20px;
}

.spl-button {
  display: inline-block;
  background: #fff;
  color: #000;
  border-radius: 5px;
  padding: 10px 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

.spl-page {
  float: left;
  width: auto;
  line-height: 40px;
}

.spl-page ~ * {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 21px;
  float: right;
}

.spl-fullscreen {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/fullscreen-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/fullscreen-line.svg") no-repeat 50% 50%;
}

.spl-fullscreen.on {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/fullscreen-exit-line.svg") no-repeat 50%
    50%;
  mask: url("./file=html/svg/fullscreen-exit-line.svg") no-repeat 50% 50%;
}

.spl-autofit {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/aspect-ratio-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/aspect-ratio-line.svg") no-repeat 50% 50%;
}

.spl-zoom-out {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/zoom-out-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/zoom-out-line.svg") no-repeat 50% 50%;
  background-size: 22px;
}

.spl-zoom-in {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/zoom-in-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/zoom-in-line.svg") no-repeat 50% 50%;
  background-size: 22px;
}

.spl-download {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/file-download-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/file-download-line.svg") no-repeat 50% 50%;
  background-size: 20px;
}

.spl-theme {
  background-image: url("./file=html/svg/spotlight/theme.svg");
}

.spl-play {
  background-image: url("./file=html/svg/spotlight/play.svg");
}

.spl-play.on {
  background-image: url("./file=html/svg/spotlight/pause.svg");
  animation: pulsate 1s ease infinite;
}

.spl-close {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%;
}

.spl-like {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/heart-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/heart-line.svg") no-repeat 50% 50%;
  background-size: 22px;
}

.spl-like.on {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/heart-fill.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/heart-fill.svg") no-repeat 50% 50%;
}

.spl-tile {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/grid-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/grid-line.svg") no-repeat 50% 50%;
  background-size: 22px;
}

.spl-tile.on {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/grid-fill.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/grid-fill.svg") no-repeat 50% 50%;
}

.spl-undo {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/arrow-go-back-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/arrow-go-back-line.svg") no-repeat 50% 50%;
  background-size: 22px;
}

.spl-clear {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/delete-bin-2-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/delete-bin-2-line.svg") no-repeat 50% 50%;
  background-size: 22px;
  position: absolute;
  left: 0;
}

.spl-pan {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/drag-move-2-fill.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/drag-move-2-fill.svg") no-repeat 50% 50%;
  background-size: 22px;
}

.spl-pan.on {
  opacity: 1;
}

.spl-draw {
  background-color: var(--ae-modal-icon-color);
  -webkit-mask: url("./file=html/svg/ball-pen-line.svg") no-repeat 50% 50%;
  mask: url("./file=html/svg/ball-pen-line.svg") no-repeat 50% 50%;
  background-size: 22px;
}

.spl-color input {
  width: 42px;
  height: 42px;
  padding: 5px 6px;
  background: transparent;
  margin-top: -1px;
}

.spl-brush {
  width: 100px !important;
  margin-top: 0px;
}

.spl-prev,
.spl-next {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 50px;
  height: 50px;
  opacity: 0.65;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 100%;
  cursor: pointer;
  margin-top: -25px;
  transform: translateX(-100px);
  transition: transform 0.35s ease;
  background-image: url("./file=html/svg/spotlight/arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  will-change: transform;
}

.spl-next {
  left: auto;
  right: 20px;
  transform: translateX(100px) scaleX(-1);
}

[id^="spotlight"].menu .spl-prev {
  transform: translateX(0);
}

[id^="spotlight"].menu .spl-next {
  transform: translateX(0) scaleX(-1);
}

@media (hover: hover) {
  .spl-page ~ div {
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .spl-page ~ div:hover,
  .spl-prev:hover,
  .spl-next:hover {
    opacity: 1;
  }
}

@media (max-width: 500px) {
  .spl-header div {
    width: 32px;
  }

  .spl-footer .spl-title {
    font-size: 20px;
  }

  .spl-footer {
    font-size: 14px;
  }

  .spl-prev,
  .spl-next {
    width: 35px;
    height: 35px;
    margin-top: -17.5px;
    background-size: 15px 15px;
  }

  .spl-spinner {
    background-size: 30px 30px;
  }

  .spl-brush {
    width: 60px !important;
    padding-left: 10px;
  }

  .spl-fullscreen {
    display: inline-block !important;
  }
}

.hide-scrollbars {
  overflow: hidden !important;
}

@keyframes pulsate {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

/*BREAKPOINT_CSS_CONTENT*/