@import url("https://fonts.googleapis.com/css2?family=Lexend&display=swap");

:root {
  --font: "Lexend", sans-serif !important;
  --dark-purple: #242038 !important;
  --button-secondary-background-fill: #c5b0fc !important;
  --button-secondary-background-fill-hover: #a288e3 !important;
  --button-secondary-border-color: var(--dark-purple) !important;
  --border-color-primary: #9067c6 !important;

  --slider-color: #c5b0fc !important;
  --block-title-text-color: #fafaff !important;
  --input-background-fill: var(--dark-purple) !important;
  --neutral-800: #fafaff !important;

  --checkbox-label-background-fill: var(--dark-purple) !important;
  --checkbox-label-background-fill-hover: var(--dark-purple) !important;
  --checkbox-background-color: #a288e3 !important;
  --checkbox-border-color: #a288e3 !important;
  --checkbox-background-color-hover: #c5b0fc !important;
  --checkbox-background-color-selected: var(--dark-purple) !important;
  --checkbox-border-color-focus: var(--dark-purple) !important;
  --checkbox-border-color-selected: #c5b0fc !important;
  --shadow-spread: 3px !important;
  --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset !important;
  --shadow-drop: 0px !important;
  --input-shadow-focus: 0 0 0 var(--shadow-spread) #c5b0fc, var(--shadow-inset) !important;
  --input-border-color-focus: #c5b0fc !important;

  --background-fill-primary: var(--dark-purple) !important;

  --block-background-fill: var(--dark-purple) !important;
}

@-webkit-keyframes popUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dark {
  --font: "Lexend", sans-serif !important;
  --dark-purple: #242038 !important;
  --button-secondary-background-fill: #c5b0fc !important;
  --button-secondary-background-fill-hover: #a288e3 !important;
  --button-secondary-border-color: var(--dark-purple) !important;
  --border-color-primary: #9067c6 !important;

  --slider-color: #c5b0fc !important;
  --block-title-text-color: #fafaff !important;
  --input-background-fill: var(--dark-purple) !important;
  --neutral-800: #fafaff !important;

  --checkbox-label-background-fill: var(--dark-purple) !important;
  --checkbox-label-background-fill-hover: var(--dark-purple) !important;
  --checkbox-background-color: #a288e3 !important;
  --checkbox-border-color: #a288e3 !important;
  --checkbox-background-color-hover: #c5b0fc !important;
  --checkbox-background-color-selected: var(--dark-purple) !important;
  --checkbox-border-color-focus: var(--dark-purple) !important;
  --checkbox-border-color-selected: #c5b0fc !important;
  --shadow-spread: 3px !important;
  --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset !important;
  --shadow-drop: 0px !important;
  --input-shadow-focus: 0 0 0 var(--shadow-spread) #c5b0fc, var(--shadow-inset) !important;
  --input-border-color-focus: #c5b0fc !important;

  --background-fill-primary: var(--dark-purple) !important;
  --block-background-fill: var(--dark-purple) !important;
}

.gradio-container {
  background-color: var(--dark-purple) !important;
}

.svelte-vt1mxs {
  background-color: var(--dark-purple) !important;
}

.block.svelte-mppz8v {
  background-color: var(--dark-purple) !important;
}

.selected.svelte-1g805jl {
  background: var(--border-color-primary) !important;
}

.svelte-1g805jl button:focus {
  background: var(--dark-purple) !important;
}
.svelte-1g805jl button {
  background: #211a1d !important;
}
.svelte-1g805jl button:hover {
  color: #ffff !important;
}

[class*="form"][class*="svelte"] {
  border: none !important;
  border-radius: 0px !important;
}

#filtering > span,
#pixiv > span,
#pixiv-filters > span,
#imageControl > span,
#zeroAIhover > span {
  position: relative;
  z-index: 0;
}

#filtering [data-testid="checkbox-group"] > label > span,
#pixiv [data-testid="checkbox-group"] > label > span,
#pixiv-filters [data-testid="checkbox-group"] > label > span,
#imageControl [data-testid="checkbox-group"] > label > span,
#zeroAIhover [data-testid="checkbox-group"] > label > span {
  position: relative;
}

#filtering [data-testid="checkbox-group"] > label > span::after,
#pixiv [data-testid="checkbox-group"] > label > span::after,
#pixiv-filters [data-testid="checkbox-group"] > label > span::after,
#imageControl [data-testid="checkbox-group"] > label > span::after,
#zeroAIhover [data-testid="checkbox-group"] > label > span::after {
  position: absolute;
  z-index: 1;
  visibility: hidden;
  background-color: #c5b0fc;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

#filtering [data-testid="checkbox-group"] > label > span::before,
#pixiv [data-testid="checkbox-group"] > label > span::before,
#pixiv-filters [data-testid="checkbox-group"] > label > span::before,
#imageControl [data-testid="checkbox-group"] > label > span::before,
#zeroAIhover [data-testid="checkbox-group"] > label > span::before {
  content: "";
  position: absolute;
  visibility: hidden;
  bottom: 105%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #c5b0fc transparent transparent transparent;
}

#filtering [data-testid="checkbox-group"] > label:nth-child(6) > span::after,
#zeroAIhover [data-testid="checkbox-group"] > label:nth-child(1) > span::after,
#pixiv-filters [data-testid="checkbox-group"] > label:nth-child(4) > span::after {
  content: "AI to download 'good' images";
}

#filtering [data-testid="checkbox-group"] > label:nth-child(5) > span::after {
content: "General (SFW) images only";
}

#filtering [data-testid="checkbox-group"] > label:nth-child(4) > span::after {
  content: "Allows questionable images";
}

#filtering [data-testid="checkbox-group"] > label:nth-child(3) > span::after {
  content: "Removes explicit images only";
}

#filtering [data-testid="checkbox-group"] > label:nth-child(2) > span::after {
  content: "Images must include all tags given";
}

#filtering [data-testid="checkbox-group"] > label:nth-child(1) > span::after {
  content: "Order by score";
}

#filtering [data-testid="checkbox-group"] > label > span:hover::after,
#filtering [data-testid="checkbox-group"] > label > span:hover::before,
#pixiv [data-testid="checkbox-group"] > label > span:hover::after,
#pixiv [data-testid="checkbox-group"] > label > span:hover::before,
#pixiv-filters [data-testid="checkbox-group"] > label > span:hover::after,
#pixiv-filters [data-testid="checkbox-group"] > label > span:hover::before,
#imageControl [data-testid="checkbox-group"] > label > span:hover::after,
#imageControl [data-testid="checkbox-group"] > label > span:hover::before,
#zeroAIhover [data-testid="checkbox-group"] > label > span:hover::after,
#zeroAIhover [data-testid="checkbox-group"] > label > span:hover::before {
  visibility: visible;
  -webkit-animation: popUp 500ms;
  animation: popUp 500ms;
}

#filtering [data-testid="checkbox-group"] > label:nth-child(3):hover > span {
  color: #e71d36;
}
#filtering [data-testid="checkbox-group"] > label:nth-child(4):hover > span {
  color: #ffd151;
}
#filtering [data-testid="checkbox-group"] > label:nth-child(5):hover > span {
  color: #21fa90;
}

#pixiv [data-testid="checkbox-group"] > label:nth-child(1) > span::after {
  content: "Downloads the previews";
}

#pixiv [data-testid="checkbox-group"] > label:nth-child(2) > span::after {
  content: "Downloads through the grid";
}

#pixiv-filters [data-testid="checkbox-group"] > label:nth-child(1) > span::after {
  content: "Downloads native image resolution";
  font-size: 0.5rem;
}
#pixiv-filters [data-testid="checkbox-group"] > label:nth-child(2) > span::after,
#imageControl [data-testid="checkbox-group"] > label:nth-child(1) > span::after {
  content: "Continues Search if hangup occurs";
}

#pixiv-filters [data-testid="checkbox-group"] > label:nth-child(3) > span::after {
  content: "Starts from the oldest images";
}

#viewing-restrictions [data-testid="checkbox-group"] > label:nth-child(1):hover span {
  color: #21fa90;
}

#viewing-restrictions [data-testid="checkbox-group"] > label:nth-child(2):hover span {
  color: #e71d36;
}

#button-row {
  display: flex;
  justify-content: center;
  align-items: center;
}