:host {
  display: inline-block; width: 500px; --height: 30px; --icon-width: 24px; --icons-max-height: 360px; --icon-selected-color: #3e868f; --icon-hover-color: #666666; --input-border-color: #d1d1d1; --input-border-color-focus: #5b9dd9; --input-box-shadow-focus: rgba(30, 140, 190, 0.8); --z-index: 1000
}
.container {
  width: 100%; display: flex !important; position: relative; z-index: var(--z-index); user-select: none
}
.container span.svg {
  display: flex; align-items: center; padding-left: 10px; position: relative; z-index: 200
}
.container span.svg jtbc-svg {
  width: 16px; height: 16px; --fore-color: #333
}
.container span.svg:empty {
  display: none
}
.container input {
  box-sizing: border-box; outline: none
}
.container input.text {
  width: calc(100% - 60px); height: var(--height); background: transparent; padding: 0px 0px 0px 10px; border: 0px; border-radius: 0px; position: relative; z-index: 200; pointer-events: none
}
.container span.box {
  display: block; width: 100%; height: 100%; box-sizing: border-box; background: url(../../../../svg/select.svg) #fff calc(100% - 4px) center no-repeat; background-size: 20px; border: var(--input-border-color) 1px solid; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.08); cursor: pointer; position: absolute; top: 0px; left: 0px; z-index: 100; transition: all .3s ease
}
.container span.empty {
  display: block; width: 20px; height: 20px; background: #fff; opacity: 0; border-radius: 100%; transform: translate(0, -50%); position: absolute; right: 5px; top: 50%; z-index: 80; transition: opacity .3s ease
}
.container span.empty::before {
  content: ''; width: 60%; height: 1px; background: #666; transform: translate(-50%, -50%) rotate(45deg); position: absolute; top: 50%; left: 50%; z-index: 100
}
.container span.empty::after {
  content: ''; width: 60%; height: 1px; background: #666; transform: translate(-50%, -50%) rotate(-45deg); position: absolute; top: 50%; left: 50%; z-index: 100
}
.container span.empty.on {
  z-index: 1000
}
.container span.empty.on:hover {
  opacity: 1; background-color: #f2f2f2; cursor: pointer
}
.container div.selector {
  display: none; width: 100%; opacity: 0; position: absolute; left: 0px; top: 100%; z-index: 100; transition: all .3s ease
}
.container div.selector::before {
  content: ''; display: block; width: 0px; height: 0px; border: 6px solid; border-color: transparent transparent #d1d1d1 transparent; position: absolute; top: -12px; left: 8px; z-index: 100
}
.container div.selector::after {
  content: ''; display: none; width: 0px; height: 0px; border: 6px solid; border-color: #d1d1d1 transparent transparent transparent; position: absolute; top: 100%; left: 8px; z-index: 100
}
.container div.selector div.icons {
  width: 100%; display: flex; flex-wrap: wrap; gap: 4px; max-height: var(--icons-max-height); overflow: auto; box-sizing: border-box; padding: 10px; background: #ffffff; box-sizing: border-box; border: #d1d1d1 1px solid; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1)
}
.container div.selector div.icons span.icon {
  display: block; width: var(--icon-width); height: var(--icon-width); padding: 4px; border: #d1d1d1 1px solid; cursor: pointer; position: relative
}
.container div.selector div.icons span.icon jtbc-svg {
  width: 100%; height: 100%; --fore-color: #999999
}
.container div.selector div.icons span.icon:hover {
  border-color: var(--icon-hover-color)
}
.container div.selector div.icons span.icon:hover jtbc-svg {
  --fore-color: var(--icon-hover-color)
}
.container div.selector div.icons span.icon.on {
  border-color: var(--icon-selected-color)
}
.container div.selector div.icons span.icon.on jtbc-svg {
  --fore-color: var(--icon-selected-color)
}
.container div.selector div.icons span.icon.on::after {
  content: ''; width: 0px; height: 0px; border-style: solid; border-width: 0 0 calc(var(--icon-width) / 4) calc(var(--icon-width) / 4); border-color: transparent transparent var(--icon-selected-color) transparent; position: absolute; bottom: 0px; right: 0px; z-index: 100
}
.container div.selector.on {
  opacity: 1; top: calc(100% + 8px)
}
.container div.selector.upper {
  top: auto; bottom: 100%
}
.container div.selector.upper::before {
  display: none
}
.container div.selector.upper::after {
  display: block
}
.container div.selector.upper.on {
  opacity: 1; bottom: calc(100% + 8px)
}
.container div.mask {
  width: 100%; height: 100%; background: #dddddd; opacity: .3; position: absolute; top: 0px; left: 0px; z-index: -100
}
.container.disabled {
  cursor: default
}
.container.disabled div.mask {
  z-index: 10000
}
.container.pickable span.box {
  border-color: var(--input-border-color-focus); box-shadow: 0px 0px 2px var(--input-box-shadow-focus)
}
.container.pickable div.selector {
  display: block
}