icon {
  display: inline-flex; width: 40px; height: 40px; background: #ffffff; box-sizing: border-box; padding: 7px; border: #d1d1d1 1px solid
}
icon jtbc-svg {
  display: block; width: 100%; height: 100%; --fore-color: #666666; opacity: 1
}
icon.button {
  width: 30px; height: 30px; padding: 4px; opacity: .8; transition: all .3s ease
}
icon.button jtbc-svg {
  --fore-color: #333333; cursor: pointer
}
icon.button jtbc-svg:hover {
  opacity: 1
}
icons {
  display: inline-flex; flex-wrap: wrap; align-items: center
}
icons jtbc-svg {
  display: block; width: 16px; height: 16px; margin-right: 5px; opacity: 0.6; cursor: pointer; transition: all .3s ease
}
icons jtbc-svg:hover {
  opacity: 1
}
icons.small jtbc-svg {
  width: 14px; height: 14px; margin-right: 4px
}
.ash {
  color: #999999
}
.hand {
  cursor: pointer
}
.hide {
  display: none !important
}
.circlenumber {
  width: 24px; box-sizing: border-box; aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center; color: #000; border: #000 2px solid; border-radius: 100%; font-family: var(--font-family-monospaced)
}
.circlenumber[group='0'] {
  border-color: var(--color-group-0)
}
.circlenumber[group='1'] {
  border-color: var(--color-group-1)
}
.circlenumber[group='2'] {
  border-color: var(--color-group-2)
}
.circlenumber[group='3'] {
  border-color: var(--color-group-3)
}
.circlenumber[group='4'] {
  border-color: var(--color-group-4)
}
.filegroup {
  display: inline-block; box-sizing: border-box; margin-right: 4px; padding: 4px 8px; background: #000; color: #fff; border-radius: 6px; text-transform: uppercase; font-family: var(--font-family-monospaced)
}
.filegroup[filegroup='1'] {
  background: #0f6974
}
.filegroup[filegroup='2'] {
  background: #cb8119
}
.filegroup[filegroup='3'] {
  background: #779028
}
.filegroup[filegroup='4'] {
  background: #5b0233
}
.filegroup[filegroup='5'] {
  background: #9b0909
}
.highlight {
  display: inline-block; line-height: 100%; padding: 4px; background: #000000; color: #ffffff
}
.highlight[group='0'] {
  background-color: var(--color-group-0)
}
.highlight[group='1'] {
  background-color: var(--color-group-1)
}
.highlight[group='2'] {
  background-color: var(--color-group-2)
}
.highlight[group='3'] {
  background-color: var(--color-group-3)
}
.highlight[group='4'] {
  background-color: var(--color-group-4)
}
.originaltext {
  white-space: pre-wrap
}
.status {
  display: inline-block; width: 16px; height: 16px; background: none; vertical-align: middle
}
.status[status='0'] {
  background-image: url(../svg/status.0.svg)
}
.status[status='1'] {
  background-image: url(../svg/status.1.svg)
}
.status[status='2'] {
  background-image: url(../svg/status.2.svg)
}
.status[status='3'] {
  background-image: url(../svg/status.3.svg)
}
.tagslist {
  display: inline-flex; flex-wrap: wrap; gap: 4px
}
.tagslist a {
  display: inline-block; padding: 4px 6px; background: #f6f6f6; color: #333333; border: #e1e1e1 1px solid
}
.tagslist a:hover {
  background: #ececec; color: #000000
}
.tips {
  background: url(../svg/info.svg) left center no-repeat; color: #999999; padding-left: 20px
}
.tiptext {
  display: inline-block; padding-left: 6px; border-left: #000000 3px solid
}
.tiptext[group='0'] {
  border-left-color: var(--color-group-0)
}
.tiptext[group='1'] {
  border-left-color: var(--color-group-1)
}
.tiptext[group='2'] {
  border-left-color: var(--color-group-2)
}
.tiptext[group='3'] {
  border-left-color: var(--color-group-3)
}
.tiptext[group='4'] {
  border-left-color: var(--color-group-4)
}
.underline {
  display: inline-block; line-height: normal; padding-bottom: 2px; border-bottom: #000000 1px solid
}
.underline[group='0'] {
  border-bottom-color: var(--color-group-0)
}
.underline[group='1'] {
  border-bottom-color: var(--color-group-1)
}
.underline[group='2'] {
  border-bottom-color: var(--color-group-2)
}
.underline[group='3'] {
  border-bottom-color: var(--color-group-3)
}
.underline[group='4'] {
  border-bottom-color: var(--color-group-4)
}
.wordbreakall {
  word-break: break-all
}