:host {
  display: inline-block; width: 500px; --font-size: 12px; --height: 30px; --options-max-height: 360px; --option-background-color-hover: #eee; --input-border-color: #d1d1d1; --input-border-color-focus: #5b9dd9; --input-box-shadow-focus: rgba(30, 140, 190, 0.8); --checked-border-color: #3e868f; --unchecked-border-color: #d1d1d1; --selected-item-color: #3e868f; --z-index: 1000
}
.container {
  width: 100%; min-height: 30px; display: block !important; position: relative; z-index: var(--z-index); user-select: none
}
.container input {
  box-sizing: border-box; outline: none
}
.container input.text {
  width: calc(100% - 30px); height: var(--height); background: transparent; padding: 0px 0px 0px 10px; border: 0px; border-radius: 0px; position: relative; z-index: 200; pointer-events: none; display: none
}
.container div.selected {
  max-width: calc(100% - 30px); display: inline-block; padding: 3px 0px 3px 4px; position: relative; z-index: 200
}
.container div.selected span {
  display: inline-flex; align-items: center; box-sizing: border-box; margin: 2px 4px 2px 0px; padding: 0px 6px; line-height: 18px; background: var(--selected-item-color); border: var(--selected-item-color) 1px solid; border-radius: 4px; cursor: pointer
}
.container div.selected span:last-child {
  margin-right: 0px
}
.container div.selected span em {
  display: inline-block; font-size: var(--font-size); font-style: normal; color: #fff
}
.container div.selected span jtbc-svg {
  display: inline-block; margin-left: 4px; width: 8px; height: 8px; --fore-color: #fff
}
.container div.selected:empty {
  display: none
}
.container div.selected:empty + input.text {
  display: inline-block
}
.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 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.options {
  width: 100%; max-height: var(--options-max-height); overflow: auto; box-sizing: border-box; padding: 5px 0px; 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.options ul {
  margin: 0px; padding: 0px; list-style: none; background: #ffffff; position: relative
}
.container div.selector div.options ul li {
  width: 100%; box-sizing: border-box; position: relative
}
.container div.selector div.options ul li em {
  display: block; box-sizing: border-box; width: 14px; height: 14px; background: #fff; border: var(--unchecked-border-color) 1px solid; position: absolute; top: 50%; left: 7px; transform: translate(0, -50%)
}
.container div.selector div.options ul li span {
  display: block; width: 100%; box-sizing: border-box; line-height: calc(var(--item-height) - 2px); padding: 0px 10px 0px 20px; color: var(--font-color); white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis
}
.container div.selector div.options ul li.locked > div.option,
.container div.selector div.options ul li.disabled > div.option {
  cursor: default; filter: grayscale(100%)
}
.container div.selector div.options ul li.locked > div.option *,
.container div.selector div.options ul li.disabled > div.option * {
  color: #ccc !important
}
.container div.selector div.options ul li.selected > div.option em {
  border-color: var(--checked-border-color)
}
.container div.selector div.options ul li.selected > div.option em::after {
  content: ''; display: block; box-sizing: border-box; width: 5px; height: 8px; border-bottom: var(--checked-border-color) 2px solid; border-right: var(--checked-border-color) 2px solid; background: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 1px)) rotate(45deg)
}
.container div.selector div.options ul li.selected > div.option span {
  color: var(--checked-border-color) !important
}
.container div.selector div.options ul ul {
  padding-left: 30px
}
.container div.selector div.options ul ul::before {
  content: ''; position: absolute; top: 0px; left: 16px; width: 0px; height: 100%; border-left: #d1d1d1 1px solid; z-index: 100
}
.container div.selector div.options ul ul li::before {
  content: ''; position: absolute; top: 12px; left: -14px; width: 12px; height: 0px; border-top: #d1d1d1 1px solid; z-index: 500
}
.container div.selector div.options ul ul li:last-child::after {
  content: ''; width: 2px; background: #fff; height: calc(100% - 12px); position: absolute; left: -14px; bottom: 0px; z-index: 200
}
.container div.selector div.options ul:empty {
  display: none
}
.container div.selector div.option {
  padding: 5px 10px; font-size: calc(var(--font-size) + 2px); transition: background-color .3s ease; cursor: pointer
}
.container div.selector div.option:hover {
  background-color: var(--option-background-color-hover)
}
.container div.selector div.option span[key=text] {
  display: block; color: #333; line-height: 120%
}
.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
}