/* V1.28Beta-premium-select-controls3
   Painted controls for the opened character card. */

html body:not(.maintenance-mode)
  #appRoot.app.character-select-app
  #characterSelect.character-select {
  --select-control-ink: #173b57;
  --select-control-gold: #c6a45f;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect.character-select
  #previewJobButton.preview-job-button {
  box-sizing: border-box !important;
  display: inline-grid !important;
  grid-template-columns: 30px auto !important;
  place-items: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 104px !important;
  min-height: 42px !important;
  padding: 4px 13px 4px 7px !important;
  border: 1px solid rgba(177, 145, 78, .78) !important;
  border-radius: 6px !important;
  background: rgba(248, 253, 255, .96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .94),
    inset 0 -3px 8px rgba(84, 166, 210, .12),
    0 5px 12px rgba(12, 48, 74, .2) !important;
  color: var(--select-control-ink) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode)
  #appRoot.app.character-select-app
  #characterSelect.character-select
  #previewJobButton.preview-job-button::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 28px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/ui/character-select-job-change-emblem-v1.png?v=V1.28Beta-premium-select-controls3") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 3px rgba(28, 84, 117, .24)) !important;
  opacity: 1 !important;
  transform: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview.character-preview:not([hidden])
  #previewJobButton#previewJobButton#previewJobButton.preview-job-button {
  display: inline-grid !important;
  grid-template-columns: 28px auto !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  gap: 4px !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 3px 10px 3px 6px !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview.character-preview:not([hidden])
  #previewJobButton#previewJobButton#previewJobButton.preview-job-button::before {
  content: "" !important;
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: block !important;
  width: 28px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/ui/character-select-job-change-emblem-v1.png?v=V1.28Beta-premium-select-controls3") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 3px rgba(28, 84, 117, .24)) !important;
  opacity: 1 !important;
  transform: none !important;
}

html body:not(.maintenance-mode)
  #previewJobButton.preview-job-button > span {
  color: var(--select-control-ink) !important;
  -webkit-text-fill-color: var(--select-control-ink) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .92) !important;
}

html body:not(.maintenance-mode)
  #previewJobButton.preview-job-button > small {
  display: none !important;
}

html body:not(.maintenance-mode)
  #previewJobButton.preview-job-button:hover:not(:disabled),
html body:not(.maintenance-mode)
  #previewJobButton.preview-job-button.open {
  translate: 0 -1px !important;
  border-color: rgba(171, 127, 42, .9) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .98),
    inset 0 -4px 10px rgba(84, 166, 210, .16),
    0 7px 15px rgba(12, 48, 74, .25),
    0 0 0 2px rgba(208, 179, 112, .18) !important;
}

html body:not(.maintenance-mode)
  #previewJobButton.preview-job-button.active::before {
  background: url("assets/ui/character-select-job-change-emblem-v1.png?v=V1.28Beta-premium-select-controls3") center / contain no-repeat !important;
  filter:
    drop-shadow(0 2px 3px rgba(28, 84, 117, .24))
    drop-shadow(0 0 6px rgba(89, 200, 242, .46)) !important;
}

html body:not(.maintenance-mode)
  #appRoot.app.character-select-app
  #characterSelect.character-select
  .character-option.has-job-change:not(.placeholder)
  > span > .job-change-tip {
  box-sizing: border-box !important;
  display: inline-grid !important;
  grid-template-columns: 15px auto !important;
  place-items: center !important;
  gap: 3px !important;
  width: 58px !important;
  height: 22px !important;
  padding: 1px 5px 1px 3px !important;
  border: 1px solid rgba(177, 145, 78, .82) !important;
  border-radius: 5px !important;
  background: rgba(247, 253, 255, .96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .92),
    0 3px 8px rgba(15, 52, 78, .22) !important;
  color: var(--select-control-ink) !important;
  -webkit-text-fill-color: var(--select-control-ink) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode)
  #characterSelect.character-select
  .character-option.has-job-change
  .job-change-tip::before {
  content: "" !important;
  display: block !important;
  flex: none !important;
  width: 15px !important;
  height: 17px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/ui/character-select-job-change-emblem-v1.png?v=V1.28Beta-premium-select-controls3") center / contain no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode)
  #characterSelect.character-select
  .character-option.has-job-change
  .job-change-tip.active {
  width: 58px !important;
  border-color: rgba(170, 127, 43, .92) !important;
  color: #684d1f !important;
  -webkit-text-fill-color: #684d1f !important;
  background: rgba(255, 253, 245, .97) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil {
  width: 48px !important;
  height: 54px !important;
  border: 0 !important;
  background: url("assets/ui/character-select-job-change-emblem-v1.png?v=V1.28Beta-premium-select-controls3") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 7px rgba(22, 80, 113, .3)) !important;
  transform: none !important;
  animation: premium-job-sigil-pulse 2.6s ease-in-out infinite !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil > i {
  display: none !important;
}

@keyframes premium-job-sigil-pulse {
  0%, 100% { filter: drop-shadow(0 4px 7px rgba(22, 80, 113, .28)); }
  50% { filter: drop-shadow(0 4px 9px rgba(71, 180, 227, .52)); }
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill.preview-skill.preview-skill {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-rows: clamp(20px, 2.1vw, 28px) minmax(0, 1fr) !important;
  gap: 0 !important;
  width: min(100%, 340px) !important;
  min-width: 0 !important;
  max-width: 340px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1688 / 764 !important;
  margin: 0 auto !important;
  padding: clamp(29px, 2.8vw, 39px) clamp(26px, 2.45vw, 35px) clamp(16px, 1.5vw, 21px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/ui/character-select-skill-panel-crystal-v2.png?v=V1.28Beta-premium-select-controls3") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 7px 10px rgba(17, 58, 86, .2)) !important;
  color: var(--select-control-ink) !important;
  overflow: visible !important;
  pointer-events: auto !important;
  justify-self: center !important;
  align-self: center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill.preview-skill::before,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill.preview-skill::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill > #previewSkill#previewSkill#previewSkill.preview-skill-tip {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  place-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 5px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #173f5e !important;
  -webkit-text-fill-color: #173f5e !important;
  font-size: clamp(12px, 1.05vw, 14px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .96) !important;
  clip-path: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill > #previewDescription#previewDescription#previewDescription {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 2px 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #17364f !important;
  -webkit-text-fill-color: #17364f !important;
  font-size: clamp(11.5px, .92vw, 13px) !important;
  font-weight: 760 !important;
  line-height: 1.32 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .96) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter {
  box-sizing: border-box !important;
  width: clamp(142px, 11.4vw, 174px) !important;
  min-width: 0 !important;
  max-width: 174px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1754 / 468 !important;
  padding: 0 14px 1px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/ui/character-select-lock-button-crystal-v1.png?v=V1.28Beta-premium-select-controls3") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 8px rgba(14, 50, 76, .24)) !important;
  color: #173b57 !important;
  -webkit-text-fill-color: #173b57 !important;
  font-size: clamp(13px, 1.05vw, 15px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .96) !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode)
  #characterPreview.character-preview #lockCharacter:hover:not(:disabled) {
  translate: 0 -1px !important;
  filter: brightness(1.035) drop-shadow(0 7px 10px rgba(14, 50, 76, .28)) !important;
}

html body:not(.maintenance-mode)
  #characterPreview.character-preview #lockCharacter:disabled {
  filter: grayscale(.12) drop-shadow(0 4px 6px rgba(14, 50, 76, .16)) !important;
  opacity: .66 !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect.character-select
    #previewJobButton.preview-job-button {
    min-width: 92px !important;
    min-height: 38px !important;
    grid-template-columns: 26px auto !important;
    gap: 4px !important;
    padding: 3px 10px 3px 5px !important;
  }

  html body:not(.maintenance-mode) #previewJobButton.preview-job-button::before {
    width: 25px !important;
    height: 29px !important;
  }

  html body:not(.maintenance-mode) #previewJobButton.preview-job-button > span {
    font-size: 13px !important;
  }

  html body:not(.maintenance-mode)
    #appRoot.app.character-select-app
    #characterSelect.character-select
    .character-option.has-job-change:not(.placeholder)
    > span > .job-change-tip,
  html body:not(.maintenance-mode)
    #characterSelect.character-select
    .character-option.has-job-change
    .job-change-tip.active {
    width: 54px !important;
    height: 20px !important;
    grid-template-columns: 13px auto !important;
    font-size: 8.5px !important;
  }

  html body:not(.maintenance-mode)
    #characterSelect.character-select
    .character-option.has-job-change
    .job-change-tip::before {
    width: 13px !important;
    height: 15px !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil {
    width: 35px !important;
    height: 40px !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    .preview-skill.preview-skill.preview-skill.preview-skill {
    width: min(98%, 244px) !important;
    max-width: 244px !important;
    height: 112px !important;
    max-height: 112px !important;
    aspect-ratio: auto !important;
    grid-template-rows: 20px minmax(0, 1fr) !important;
    padding: 27px 22px 10px !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    .preview-skill.preview-skill > #previewSkill#previewSkill#previewSkill.preview-skill-tip {
    font-size: clamp(11.5px, 3.25dvw, 13px) !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    .preview-skill.preview-skill > #previewDescription#previewDescription#previewDescription {
    font-size: 10.8px !important;
    line-height: 1.24 !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter {
    width: 136px !important;
    max-width: 136px !important;
    padding: 0 12px 1px 24px !important;
    font-size: 13px !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview.character-preview:not([hidden])
    #previewJobButton#previewJobButton#previewJobButton.preview-job-button {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    grid-template-columns: 25px auto !important;
    padding: 2px 9px 2px 5px !important;
  }
}