_res/_custom_image_edit.css

html,
body {
  min-height: 101vh !important;
}

:root {
  --layout-gap: 22px !important;
}

input[type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--slider-color) var(--range_progress),
    var(--neutral-600) var(--range_progress)
  ) !important;
}

input[type='range']::-webkit-slider-thumb {
  background-color: var(--primary-700) !important;
  box-shadow:
    0 0 0 1px var(--neutral-600),
    1px 1px 4px #0000001a !important;
  transition: transform 0.3s ease-in-out !important;
}

input[type='range']:hover::-webkit-slider-thumb {
  transform: scale(1.3);
}

.storyboard-column,
.regieanweisung-column,
.profi-einstellungen-column,
.output-column,
.info-column {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: calc(2 * var(--spacing-xxl));
  border-radius: var(--radius-xl);
  background: var(--block-background-fill);
}

.storyboard-column {
  position: relative;
  z-index: 10;
  background-color: var(--block-background-fill);
  transition: background-color 4s ease-in-out;

  &:focus,
  &:focus-within {
    background-color: rgba(18, 21, 29, 0.1);
  }

  &::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background:
      linear-gradient(
        139deg,
        rgb(from var(--primary-950) r g b / 0.08) 0%,
        rgb(from var(--neutral-900) r g b / 0.2) 50%
      ),
      rgb(from var(--primary-950) r g b / 0.03) 100%;
    top: 0;
    left: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
  }

  &:focus::before,
  &:focus-within::before {
    opacity: 1;
  }
}

/* .storyboard-column:hover {
	background: var(--block-background-fill);
	transition: all 4s ease-in-out;
	background: linear-gradient(328deg, rgb(from var(--primary-950) r g b / 0.12) 0%, rgb(from var(--neutral-900) r g b / 0.16) 100%);
} */

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.output-column::after,
.output-column::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(
    from var(--angle),
    #ff4545,
    #00ff99,
    #006aff,
    #ff0095,
    #ff4545
  );
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: var(--radius-xl);
  animation: 3s spin linear infinite;
}
.output-column::before {
  filter: blur(1.5rem);
  opacity: 0.5;
}
@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

.info-column {
  margin-top: var(--spacing-xxl);
}

.logo-html h1 {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  fill: var(--primary-600);
}

.logo-html svg {
  color: var(--primary-600) !important;
}

.row-logo,
.row-logo .html-container {
  padding: var(--spacing-xl) calc(var(--spacing-xxl) + 2px) !important;
}

.md-header {
  .headline {
    display: flex;
    text-align: center;
    font-size: var(--text-xl);
    max-width: 90%;
    justify-content: center;
  }
  .sub-headline {
    display: none !important;
  }

  p.like-request {
    font-size: clamp(0.7rem, 0.61rem + 0.48vw, 0.85rem) !important;
  }

  @media (min-width: 768px) {
    .sub-headline {
      display: flex !important;
      max-width: 90%;
      text-align: center;
    }
  }
}

.markdown-label {
  flex-grow: 0 !important;
  padding: 0 var(--spacing-xl);

  & h1 {
    font-size: clamp(1.2rem, 0.8rem + 1.6vw, 1.6rem) !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  & strong {
    font-family: 'Font Awesome 7 Free' !important;
    /* font-size: 1.4rem !important; */
    font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.4rem) !important;
  }
}

.profi-einstellungen-column {
  padding: var(--spacing-xxl) calc(2 * var(--spacing-xxl));

  & .profi-einstellungen-inner-column:nth-child(2) div.form:nth-child(2) {
    gap: var(--layout-gap);
    background: transparent !important;
  }

  & .profi-einstellungen-inner-row {
    margin-top: 1rem;
  }
}

.profi-einstellungen-accordion {
  padding: var(--spacing-xl) 0 !important;
  overflow: hidden !important;

  & > button > span {
    font-size: 1.3rem !important;
  }
}

.storyboard-image {
  border: 3px dashed rgba(255, 255, 255, 0.1) !important;
  padding: 0 !important;
  border-radius: var(--radius-xl);
  background: var(--block-background-fill);
  /* min-height: 300px; */
  transition:
    border-color 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
  /* height: 700px; */
  /* height: min(500px, 100%); */
  min-height: var(--size-52);

  & > div.gallery-container > div {
    overflow-y: auto !important;

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

    &::-webkit-scrollbar-track {
      background-color: var(--neutral-800);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--primary-600);
      border-radius: 4px;
    }
  }

  & > button > div.wrap {
    /* display: none !important; */
    opacity: 0;
  }

  &:has(.image-frame) {
    border-color: var(--primary-600) !important;
  }

  div.upload-container button div.wrap {
    /* display: none !important; */
    opacity: 0;
  }

  & div.upload-container.reduced-height {
    height: 100% !important;
  }

  & label[data-testid='block-label'] {
    display: flex;
    justify-content: center;
    width: 100%;
    background: transparent;
    font-weight: 800;
    font-size: var(--text-xl);
    text-align: center;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    border-width: 0;
    & span {
      display: none !important;
    }

    &::before {
      content: 'Hochladen';
      font-weight: 400;
      font-size: 0.8rem;
      position: absolute;
      top: 260%;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      transition:
        border-color 0.3s ease-in-out,
        background-color 0.6s ease-in-out 0.4s;
      width: 110px;
      height: 40px;
      border: var(--button-border-width) solid
        var(--button-secondary-border-color);
      background: var(--button-secondary-background-fill);
      color: var(--button-secondary-text-color);
      box-shadow: var(--button-secondary-shadow);
      border-radius: var(--button-large-radius);
      padding: var(--button-large-padding);
      font-weight: var(--button-large-text-weight);
      font-size: var(--button-large-text-size);
      pointer-events: all !important;
    }

    &::after {
      content: 'Bild hierher ziehen oder klicken zum Hochladen';
      font-weight: 400;
      font-size: 0.8rem;
      position: absolute;
      top: 38px;
      left: 50%;
      transform: translateX(-50%);
      width: 95%;
    }
  }

  &:hover label[data-testid='block-label'] {
    &::before {
      background-color: var(--primary-500) !important;
    }
  }

  &:has(.gallery-item) label[data-testid='block-label'],
  &:has(.wrap.progress) label[data-testid='block-label'],
  &:has(.image-frame) label[data-testid='block-label'] {
    display: none !important;
  }

  /* & label[data-testid="block-label"]::after {
		content: "akölfj asöf asd";
		position: relative;
	} */

  & button[aria-label='Upload file'] {
    position: absolute;
    transition:
      border-color 0.3s ease-in-out,
      background-color 0.6s ease-in-out 0.4s;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 40px;
    border: var(--button-border-width) solid
      var(--button-secondary-border-color);
    background: var(--button-secondary-background-fill);
    color: var(--button-secondary-text-color);
    box-shadow: var(--button-secondary-shadow);
    border-radius: var(--button-large-radius);
    padding: var(--button-large-padding);
    font-weight: var(--button-large-text-weight);
    font-size: var(--button-large-text-size);
    pointer-events: all !important;
    /* padding: var(--spacing-lg) calc(2 * var(--spacing-lg)); */

    & svg {
      display: none;
    }
  }

  button[data-testid='file-upload'] {
    z-index: 20 !important;
    pointer-events: all;
  }

  div.image-container:has(.gallery-item) span.source-selection {
    display: none !important;
  }

  & span.source-selection {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;

    & button[aria-label='Upload file']::after {
      content: 'Hochladen';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    & button[aria-label='Capture from camera'],
    button[aria-label='Paste from clipboard'] {
      bottom: 0;
      position: absolute;
      pointer-events: all;
    }
    & button[aria-label='Capture from camera'] {
      left: 42%;
    }

    & button[aria-label='Paste from clipboard'] {
      right: 42%;
    }
  }

  &:has(.gallery-item),
  &:hover {
    border-color: var(--primary-600) !important;

    & button[aria-label='Upload file'] {
      background-color: var(--primary-500) !important;
    }
  }
}

/* .storyboard-image:hover {
	border-color: var(--primary-600) !important;

	& button[aria-label="Upload file"] {
		background-color: var(--primary-500) !important;
	}
} */

.regieanweisung-textbox {
  ::-webkit-scrollbar {
    width: 20px;
  }

  ::-webkit-scrollbar-thumb {
    border: 8px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0);
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: var(--radius-xl) !important;
    overflow: hidden;
  }

  padding: 0 !important;
  min-height: var(--size-52);

  & label {
    height: 100% !important;

    & .input-container {
      height: 100% !important;
    }
  }

  & textarea {
    padding: var(--spacing-xxl);
    transition:
      height 0.3s ease-in-out,
      border 0.3s ease-in-out;
    height: 100% !important;
  }

  & textarea:not(::placeholder),
  &:focus-within textarea {
    /* height: 300px !important; */
    border: 1px solid var(--primary-600) !important;
  }
}
.regieanweisung-textbox:hover {
  ::-webkit-scrollbar {
    width: 20px;
  }

  ::-webkit-scrollbar-thumb {
    border: 8px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: var(--primary-600);
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: var(--radius-xl) !important;
    overflow: hidden;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-800);
  }
}

.regieanweisung-column .form {
  gap: var(--layout-gap) !important;
  background: var(--block-background-fill);
}

.regieanweisung-textbox textarea,
.negative-prompt-textbox textarea,
.einstellungen-seed input[type='number'] {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-xl) !important;
  font-size: 1.2rem !important;
}

.regieanweisung-textbox:focus-within textarea,
.regieanweisung-textbox textarea:not(:placeholder-shown),
.einstellungen-seed:focus-within input[type='number'],
.negative-prompt-textbox:focus-within textarea,
.negative-prompt-textbox textarea:not(:placeholder-shown):not(:disabled) {
  border: 1px solid var(--primary-600) !important;
}

span[data-testid='block-info'] {
  font-size: clamp(1rem, 0.82rem + 0.96vw, 1.3rem) !important;
  font-weight: 600 !important;
  color: var(--body-text-color) !important;
  background: transparent !important;
  padding: 4px 0px !important;
}

.einstellungen-seed {
  padding: 0 !important;
  & input {
    transition: color 0.3s ease-in-out;
  }
  &:has(input:disabled) {
    & input {
      color: var(--neutral-500) !important;
    }
  }
}

.regieanweisung-videolaenge {
  padding: var(--spacing-xl) 0 !important;
  gap: var(--layout-gap) !important;
}

.negative-prompt-textbox {
  padding: 0 !important;
  & textarea {
    transition: color 0.3s ease-in-out;
  }
  &:has(textarea:disabled) {
    & textarea {
      color: var(--neutral-500) !important;
    }
  }
}

.einstellungen-slider,
.lora-adapter-dropdown {
  background: transparent !important;
}

.regieanweisung-videolaenge div > div > label > span,
.einstellungen-slider div > div > label > span,
.einstellungen-seed > label > span,
.einstellungen-rewrite-prompt > label > span {
  font-size: clamp(1rem, 0.82rem + 0.96vw, 1.3rem) !important;
  font-weight: 600 !important;
  color: var(--body-text-color) !important;
  background: transparent !important;
  padding: 4px 0 !important;
}

.einstellungen-steps > div.wrap > div.head > div.tab-like-container,
.einstellungen-slider > div.wrap > div.head > div.tab-like-container {
  align-self: end;
}

.einstellungen-steps
  > div.wrap
  > div.head
  > div.tab-like-container
  > input[type='number'] {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--primary-600);
  padding: var(--size-1) 0;
}
.einstellungen-steps > div.wrap > div.head > div.tab-like-container {
  height: unset;
}

.einstellungen-steps > div.wrap > div.head > div.tab-like-container > button {
  display: none;
}

/* .regieanweisung-videolaenge > div.wrap > div.head > div > input[type="number"]::-webkit-outer-spin-button,
.regieanweisung-videolaenge > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button,
.einstellungen-seed > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button,
.einstellungen-slider > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-outer-spin-button,
.einstellungen-seed > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button,
.einstellungen-slider > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button {
	display: none;
} */

.einstellungen-slider > div.wrap > div.head > div > input[type='number'] {
  background: transparent !important;

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    display: none;
  }
  &:focus {
    border: 0px solid var(--primary-600) !important;
    box-shadow: none !important;
  }
}

.regieanweisung-videolaenge input[type='number'],
.einstellungen-slider input[type='number'] {
  text-align: right;
}

body > gradio-app > div > main,
.fillable.svelte-99kmwu:not(.fill_width),
.fillable:not(.fill_width) {
  max-width: 1200px !important;
}

@media (min-width: 1920px) {
  body > gradio-app > div > main,
  .fillable.svelte-99kmwu:not(.fill_width),
  .fillable:not(.fill_width) {
    max-width: 1200px !important;
  }
}

.merged-video,
.result-video {
  border-radius: var(--radius-xl) !important;
  aspect-ratio: 16/9 !important;
}

.run-button {
  padding: var(--spacing-xxl) calc(2 * var(--spacing-xxl)) !important;
  border-radius: var(--radius-xl) !important;
}

.tab-container {
  height: calc(2 * var(--size-8)) !important;
}

.tab-container * {
  font-family: var(--font), 'Font Awesome 7 Free' !important;
}

.tab-container button {
  font-size: clamp(1rem, 0.82rem + 0.96vw, 1.3rem) !important;
  font-weight: 600 !important;
  padding: 0 var(--size-3) !important;
}

.tab-container::after {
  background-color: var(--neutral-600) !important;
}

.tab-wrapper {
  padding: 0 calc(2 * var(--spacing-lg)) var(--size-2)
    calc(2 * var(--spacing-lg)) !important;
}

.storyboard-arrow {
  display: none;
}

.storyboard-row {
  /* height: 100%; */
  min-height: 400px;
  flex-direction: column !important;
}

@media (min-width: 768px) {
  .storyboard-row {
    /* height: 500px !important; */
    flex-direction: row !important;
  }
}

.profi-einstellungen-accordion > button {
  & > span:nth-child(1) {
    font-size: 1rem !important;
    line-height: 1.5;
  }
  @media (min-width: 768px) {
    & > span:nth-child(1) {
      font-size: 1.3rem !important;
    }
  }
}

.einstellungen-seed-row {
  padding: 10px 0 !important;
  & .form {
    background: transparent !important;
    gap: 0 !important;
  }

  &:has(input[type='checkbox']:checked) {
    & .einstellungen-seed > label > span::after {
      content: '(zuf\00E4llig \2713)';
      color: var(--primary-600);
      font-size: 0.8rem;
    }
  }
}

.einstellungen-seed,
.einstellungen-random-seed {
  padding: 0 !important;
}

.einstellungen-seed {
  flex: 1 0 0;
  min-width: min(140px, 100%) !important;
  overflow: visible !important;

  & label > div {
    width: calc(100% + 47px) !important;
  }

  & input[type='number'] {
    transition: color 0.3s ease-in-out;
    height: 47px !important;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl) !important;
  }

  & input[type='number']::-webkit-outer-spin-button,
  & input[type='number']::-webkit-inner-spin-button {
    display: none;
  }
}

.einstellungen-guidance-scale-1 {
  padding: 10px 0 !important;
}

.einstellungen-random-seed {
  padding: 0 !important;
  min-width: min(47px, 100%) !important;
  flex: 0;
  display: flex;
  flex-direction: column-reverse;
  background: transparent !important;

  & > label:has(input[type='checkbox'])::after {
    content: '\f522';
    font-family: 'Font Awesome 7 Free' !important;
    font-weight: 900;
    position: absolute;
    top: 3px;
    left: 2px !important;
    width: 40px;
    height: 40px;
    /* border-radius: 50%; */
    border-radius: var(--radius-lg) !important;
    background: transparent !important;
    /* box-shadow: var(--shadow-inset); */
    transition:
      left 0.2s ease-in-out,
      background 0.2s ease-in-out;
    color: var(--neutral-900) !important;
    text-align: center;
    line-height: 2.5rem;
    font-size: 1.4rem;
  }

  & > label:has(input[type='checkbox']:checked)::after {
    content: '\f522';
    font-family: 'Font Awesome 7 Free' !important;
    font-weight: 900;
    position: absolute;
    background: transparent !important;
    opacity: 1 !important;
    left: 2px !important;
  }

  & > label {
    position: relative;
    width: 47px !important;
    height: 47px;
    display: inline-block;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0 !important;
    background: var(--neutral-600) !important;
    box-shadow: var(--shadow-inset);
    transition: background 0.3s ease-in-out !important;
    /*border: 0.4px solid var(--border-color-primary);*/
    border: 1px solid var(--neutral-600) !important;
    cursor: pointer;

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

    & > span {
      display: none;
    }
  }

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

.einstellungen-rewrite-prompt {
  padding: 10px 0 !important;
  min-width: min(78px, 100%) !important;
  flex: 0;

  & > label:has(input[type='checkbox'])::after {
    content: '\f00d';
    font-family: 'Font Awesome 7 Free' !important;
    font-weight: 900;
    position: absolute;
    background: transparent !important;
    left: 0;
    top: 0;
    font-family: 'Font Awesome 7 Free' !important;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50% !important;
    text-align: center;
    color: var(--neutral-900) !important;
  }

  & > label:has(input[type='checkbox']:checked)::after {
    content: '\f00c';
    font-weight: 900;
    position: absolute;
    background: transparent !important;
    left: 0;
    top: 0;
    font-family: 'Font Awesome 7 Free' !important;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50% !important;
    text-align: center;
    color: var(--neutral-900) !important;
  }

  & > label:has(input[type='checkbox'])::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--neutral-600) !important;
    border: 1px solid var(--neutral-600) !important;
    border-radius: 50% !important;
  }

  & > label:has(input[type='checkbox']:checked)::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--primary-600) !important;
    border: 1px solid var(--primary-600) !important;
    border-radius: 50% !important;
  }

  & > label {
    position: relative;
    width: 100%;
    height: 30px;
    display: inline-block;
    box-shadow: var(--shadow-inset);
    background: transparent;
    transition:
      background-color 0.3s,
      cursor 0.3s;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--body-text-color);
    border: 0px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 1.3rem !important;

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

    & > span {
      height: 27px;
      min-width: 100px;
      line-height: 0.5;
      white-space: nowrap;
      padding-left: 84px;
      /* font-size: 1.3rem !important; */
      /* justify-self: center; */
      /* align-self: center; */
      /* min-height: 47px; */
      overflow: hidden;
      padding: 4px 0px !important;
      padding-left: 8px !important;
    }
  }
}

@media (min-width: 768px) {
  .storyboard-arrow {
    /* display: block; */
    align-self: center;
    max-width: 30px;
    min-width: 30px;
    display: flex;
    justify-content: center;

    & .html-container {
      padding: 0 !important;
      margin: 0 auto;
      text-align: center;
      display: flex;
      justify-content: center;
    }
  }
}

.result-gallery div.gallery-container div.grid-wrap {
  /* padding: 0;
	padding-bottom: var(--spacing-md);
	overflow-y: hidden;
	overflow-x: scroll; */

  & .icon-button-wrapper {
    display: none;
    position: fixed !important;
    top: unset !important;
    right: unset !important;
    margin: var(--spacing-xxl);

    & button.icon-button > div {
      width: 22px !important;
      height: 22px !important;
    }
  }

  &::-webkit-scrollbar {
    height: 8px;
    width: 0;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--neutral-800);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--primary-600);
    border-radius: 4px;
  }

  & .grid-container {
    /* display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		width: auto;
		height: 200px; */

    & .gallery-item {
      max-width: 280px !important;
    }

    & button.delete-button {
      /* top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%); */
      left: unset !important;
      right: var(--block-label-margin);
      top: var(--block-label-margin);
      border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm)
        var(--radius-sm);
      border: 1px solid var(--border-color-primary);
    }

    & .gallery-item button.delete-button {
      opacity: 1;
    }

    & .gallery-item button.delete-button::after {
      content: 'entfernen';
      padding-left: var(--spacing-md);
    }

    @media (min-width: 768px) {
      & .gallery-item:hover button.delete-button {
        opacity: 1 !important;
      }
      & .gallery-item button.delete-button {
        opacity: 0 !important;
      }
      & button.delete-button {
        opacity: 0 !important;
      }
    }
  }
}

.toggle-btn {
  display: flex;
  flex-direction: column-reverse;

  & > div.wrap {
    display: none;
  }

  & > div:not(.wrap) {
    margin-top: var(--spacing-lg);
    margin-bottom: 0;
  }

  & > label {
    position: relative;
    width: 78px;
    height: 47px;
    display: inline-block;
    border-radius: 13px;
    background: var(--neutral-700);
    box-shadow: var(--shadow-inset);
    transition:
      background-color 0.3s,
      cursor 0.3s;
    /*border: 0.4px solid var(--border-color-primary);*/
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    cursor: pointer;

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

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

#wink,
#heart {
  display: inline;
  width: 26px;
  margin-bottom: 8px;
}

#wink {
  animation: wink 3s ease-in-out infinite;
}

#heart {
  animation: beat 2s ease-in-out infinite;
}

/* Keyframes */
@keyframes wink {
  0%,
  60%,
  100% {
    transform: rotate(0deg);
  }
  10%,
  30%,
  70%,
  90% {
    transform: rotate(14deg);
  }
  20%,
  80% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(0.75);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.75);
  }
  50% {
    transform: scale(1);
  }
  55% {
    transform: scale(0.75);
  }
  70% {
    transform: scale(1);
  }
}

.run-button {
  transition:
    border 0.4s ease-in-out,
    box-shadow 0.4s ease-in-out;
  border: 3px solid var(--button-primary-background-fill);
  box-shadow: none;
}
.run-button:hover {
  /* box-shadow: rgba(12, 121, 196, 0.27) -5px -4px 20px 3px, rgba(196, 18, 195, 0.19) -7px 7px 16px 3px, rgba(119, 237, 242, 0.14) 5px 5px 19px 3px; */
  box-shadow:
    rgba(12, 121, 196, 0.17) -5px -4px 20px 3px,
    rgba(196, 18, 195, 0.1) -7px 7px 16px 3px,
    rgba(119, 237, 242, 0.08) 5px 5px 19px 3px;
  border: 3px solid var(--primary-900);
  background-color: var(--primary-700) !important;
}

.logo {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

  h1 {
    font-size: clamp(1.2rem, 0.12rem + 5.76vw, 3rem) !important;

    span.icon {
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
    }

    span.logo-icon-1 {
      color: var(--color-accent) !important;
      transform: rotate(-5deg);
    }

    span.logo-icon-2 {
      color: #ffd43b !important;
    }
  }
}

.einstellungen-seed input[type='number'],
.einstellungen-seed > label > input {
  color: var(--neutral-100) !important;
}

.einstellungen-seed:has(input[type='number']:disabled) input[type='number'] {
  color: var(--neutral-500) !important;
}

/* MARK: EXAMPLES */

#examples_1 {
  table {
    thead {
      td {
        display: none;
      }
      td:nth-child(1),
      td:nth-child(2) {
        display: block;
      }
    }
    tbody {
      & .container.selected {
        border: 0 !important;
      }

      td {
        display: none;
      }
      td:nth-child(1),
      td:nth-child(2) {
        display: block;
      }
    }
  }
}