body {
  --page-max-width: 1400px; --page-gap: 20px; --page-outer-padding: 0px var(--page-gap); --page-inner-padding: var(--page-gap) 0px;
  --button-primary-border-color: #3fb074;
  --button-primary-background-color: #3fb07c;
  --button-primary-hover-background-color: #2ba471;
  --button-primary-hover-border-color: #2ba471;
  --button-primary-focus-border-color: #008858;
  --input-radio-checked-border-color:#3fb074;
}

img {
  border: 0px
}
/* a {
  color: #000; text-decoration: none
}
a:hover {
  color: #000; text-decoration: none
} */
a[href=''],
a:not([href]) {
  cursor: default
}
var {
  display: none !important
}
jtbc-script {
  display: none
}
jtbc-view {
  display: block; box-sizing: border-box
}
jtbc-full-height-container {
  display: block; box-sizing: border-box; width: 100%
}
.hand {
  cursor: pointer
}
.hide {
  display: none !important
}

/* container {
  display: block; box-sizing: border-box; width: 100%; padding: var(--page-outer-padding); background: #fff
}
container[bg=variety] {
  background: #f9f9f9
}
container box {
  display: flex; box-sizing: border-box; width: 100%; max-width: var(--page-max-width); margin: auto; padding: var(--page-inner-padding); align-items: flex-start; justify-content: space-between; gap: var(--page-gap)
}
container box div.main {
  width: 100%; padding-bottom: var(--page-gap)
}
container box main {
  display: block; flex: 1
}
container box sidebar {
  display: block; width: 25%
}
container box sidebar section {
  display: block; box-sizing: border-box; padding: var(--page-gap); margin-bottom: var(--page-gap); background: #f8f8f8; border: #eee 1px solid
}
container box sidebar section h3 {
  font-size: 1.6rem
}
container box sidebar section ul {
  list-style: square; padding: 10px 0px 0px 20px
}
container box sidebar section ul li {
  box-sizing: border-box; padding: calc(var(--page-gap) / 5) 0px; line-height: 160%
}
container box sidebar section:last-child {
  margin-bottom: 0px
} */

/*表单*/
input, button, select, textarea {
  margin: 0px; padding: 0px; box-sizing: border-box; font-family: Arial, Verdana; font-size: 12px; color: #000; resize: none; outline: none
}
select, input[type=color], input[type=radio], input[type=checkbox] {
  appearance: none; outline: none
}
select {
  display: inline-flex; align-items: center; padding-left: 10px; padding-right: 30px; height: 30px; border: #d1d1d1 1px solid; background: #ffffff url(./svg/select.svg) calc(100% - 4px) center no-repeat; background-size: 20px; border-radius: 0px; appearance: base-select; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.08); transition: all .3s ease
}
select:focus {
  border-color: #5b9dd9; box-shadow: 0px 0px 2px rgba(30, 140, 190, 0.8)
}
select:open {
  border-color: #5b9dd9; box-shadow: 0px 0px 2px rgba(30, 140, 190, 0.8)
}
select:disabled {
  background-color: #fafafa !important; color: #666666 !important
}
select::checkmark {
  display: none
}
select::picker-icon {
  display: none
}
select::picker(select) {
  appearance: base-select; top: calc(anchor(bottom) - 1px); border: #5b9dd9 1px solid; box-shadow: 0px 0px 2px rgba(30, 140, 190, 0.8)
}
select option {
  display: flex; align-items: center; height: 30px; padding: 0px 10px; background: #ffffff; color: #333; white-space: nowrap; transition: all 0.3s ease
}
select option:hover {
  background: #eeeeee; color: #000
}
select option::checkmark {
  display: none
}
select[type=select] {
  width: 500px
}
input[type=radio] {
  width: 14px; height: 14px; background: #fff; border: #666 1px solid; border-radius: 100%; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.08)
}
input[type=radio]:checked {
  background: #ffffff; border-color: var(--input-radio-checked-border-color, #3e868f); border-width: 4px
}
input[type=checkbox] {
  width: 14px; height: 14px; background: none center center no-repeat; background-color: #fff; border: #666 1px solid; border-radius: 0; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.08)
}
input[type=checkbox]:checked {
  background-image: url(./svg/checkbox_checked.svg); background-size: 10px; background-color: var(--input-checkbox-checked-background-color, #3e868f); border-color: var(--input-checkbox-checked-border-color, #3e868f)
}
input[type=radio]:disabled,
input[type=checkbox]:disabled {
  background-color: #fafafa !important; opacity: .5
}
input[type=text],
input[type=password] {
  /*width: 500px; height: 30px;*/ padding: 0px 10px; border: #d1d1d1 1px solid; border-radius: 0px; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.08); outline: none; transition: all .3s ease 
}
input[type=text]:focus,
input[type=password]:focus {
  border-color: #5b9dd9; box-shadow: 0px 0px 2px rgba(30, 140, 190, 0.8)
}
input[type=text]:disabled,
input[type=password]:disabled {
  background-color: #fafafa !important; color: #666666 !important
}
input[type=color] {
  width: 60px; height: 30px; background: #fff; border: #d1d1d1 1px solid; padding: 3px; border-radius: 0px
}
input[type=color]::-webkit-color-swatch {
  border: 0px
}
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0px
}
input[type=range] {
  width: 500px; height: 30px
}
textarea {
  width: 500px; height: 200px; line-height: 150%; padding: 10px; border: #d1d1d1 1px solid; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.08); border-radius: 0px; outline: none; transition: all .3s ease
}
textarea:focus {
  border-color: #5b9dd9; box-shadow: 0px 0px 2px rgba(30, 140, 190, 0.8)
}
textarea:disabled {
  background-color: #fafafa !important; color: #666666 !important
}
button {
  display: inline-block; height: 30px; padding: 0px 16px; border: 0px; line-height: 100%; font-size: 14px; color: #fff; border: #666 1px solid; cursor: pointer; border-radius: 0px; transition: all .1s ease
}
button.b1,
button.secondary {
  background-color: var(--button-secondary-background-color, #555); border-color: var(--button-secondary-border-color, #555); color: var(--button-secondary-color, #fff)
}
button.b1:hover,
button.secondary:hover {
  background-color: var(--button-secondary-hover-background-color, #333); border-color: var(--button-secondary-hover-border-color, #333)
}
button.b1:focus,
button.secondary:focus {
  border-color: var(--button-secondary-focus-border-color, #000)
}
button.b2,
button.primary {
  background-color: var(--button-primary-background-color, #e7505a); border-color: var(--button-primary-border-color, #e7505a); color: var(--button-primary-color, #fff)
}
button.b2:hover,
button.primary:hover {
  background-color: var(--button-primary-hover-background-color, #e12330); border-color: var(--button-primary-hover-border-color, #e12330)
}
button.b2:focus,
button.primary:focus {
  border-color: var(--button-primary-focus-border-color, #94000a)
}
button.b3,
button.tertiary {
  background-color: var(--button-tertiary-background-color, #e1e5ec); border-color: var(--button-tertiary-border-color, #e1e5ec); color: var(--button-tertiary-color, #333)
}
button.b3:hover,
button.tertiary:hover {
  background-color: var(--button-tertiary-hover-background-color, #c2cad8); border-color: var(--button-tertiary-hover-border-color, #c2cad8)
}
button.b3:focus,
button.tertiary:focus {
  border-color: var(--button-tertiary-focus-border-color, #9499a1)
}
button.b4,
button.quaternary {
  background-color: var(--button-quaternary-background-color, #5cb85c); border-color: var(--button-quaternary-border-color, #5cb85c); color: var(--button-quaternary-color, #fff)
}
button.b4:hover,
button.quaternary:hover {
  background-color: var(--button-quaternary-hover-background-color, #449d44); border-color: var(--button-quaternary-hover-border-color, #449d44)
}
button.b4:focus,
button.quaternary:focus {
  border-color: var(--button-quaternary-focus-border-color, #275727)
}
button.tiny {
  height: 20px; padding: 0px 4px; font-size: 12px
}
button.locked,
button:disabled,
button.locked:hover,
button.locked:focus {
  background-color: #bbb !important; border-color: #bbb !important
}
label.radio,
label.checkbox {
  display: inline-flex; height: 30px; align-items: center; margin-right: 12px; color: #666
}
label.radio input[type=radio],
label.checkbox input[type=checkbox] {
  margin-right: 5px
}
label.radio input[type=radio]:checked + span,
label.checkbox input[type=checkbox]:checked + span {
  color: #000
}
label.radio input[type=radio]:disabled + span,
label.checkbox input[type=checkbox]:disabled + span {
  color: #999
}

/*表格*/
table.table {
  width: 100%; border-collapse: separate; border-spacing: 0px
}
table.table thead.sticky {
  position: sticky; top: 0px; z-index: 30
}
table.table thead tr:first-of-type th,
table.table thead tr:first-of-type td {
  border-top: #e1e1e1 1px solid
}
table.table tbody:first-child tr:first-of-type th,
table.table tbody:first-child tr:first-of-type td {
  border-top: #e1e1e1 1px solid
}
table.table tbody:empty {
  display: none
}
table.table tbody:empty + tfoot {
  display: table-footer-group
}
table.table tfoot {
  display: none
}
table.table tfoot.sticky {
  position: sticky; bottom: 0px; z-index: 10
}
table.table tr th:last-child,
table.table tr td:last-child {
  border-right: #e1e1e1 1px solid
}
table.table th,
table.table td {
  padding: 10px; border-left: #e1e1e1 1px solid; border-bottom: #e1e1e1 1px solid
}
table.table th {
  text-align: left; background: #f6f6f6
}
table.table th[min-width='20'] {
  min-width: 20px
}
table.table th[min-width='40'] {
  min-width: 40px
}
table.table th[min-width='60'] {
  min-width: 60px
}
table.table th[min-width='80'] {
  min-width: 80px
}
table.table th[min-width='100'] {
  min-width: 100px
}
table.table th[min-width='120'] {
  min-width: 120px
}
table.table th[min-width='200'] {
  min-width: 200px
}
table.table th[min-width='300'] {
  min-width: 300px
}
table.table th[orderby] {
  position: relative
}
table.table th[orderby] span.asc,
table.table th[orderby] span.desc {
  width: 0px; height: 0px; border: #ccc 5px solid; position: absolute; right: 10px; cursor: pointer; transition: border-color .3s ease
}
table.table th[orderby] span.asc {
  top: 50%; margin-top: -6px; border-top: 0px; border-left-color: transparent; border-right-color: transparent
}
table.table th[orderby] span.asc:hover {
  border-bottom-color: #333
}
table.table th[orderby] span.desc {
  bottom: 50%; margin-bottom: -6px; border-bottom: 0px; border-left-color: transparent; border-right-color: transparent
}
table.table th[orderby] span.desc:hover {
  border-top-color: #333
}
table.table th[orderby=asc] span.asc {
  border-bottom-color: #000
}
table.table th[orderby=desc] span.desc {
  border-top-color: #000
}
table.table td {
  text-align: left; background: #fff
}
table.table td.multiline {
  line-height: 160%
}
table.table th.center,
table.table td.center {
  text-align: center
}
table.table th.right,
table.table td.right {
  text-align: right
}
table.table th.sticky,
table.table td.sticky {
  position: sticky; z-index: 10
}
table.table td[role=draghandle] {
  background-image: url(./svg/draghandle.svg); background-position: center center; background-repeat: no-repeat; background-size: 20px; cursor: move
}
table.table tbody tr:hover td,
table.table tbody tr.selected td,
table.table tbody tr.draging td {
  background-color: #f9f9f9
}
table.table tfoot td {
  color: #999999
}
table.table[pin-head=true] thead {
  box-shadow: 0px 2px 0px rgba(225, 225, 225, .6)
}
table.table[pin-left=true] th[fence=left],
table.table[pin-left=true] td[fence=left] {
  box-shadow: 2px 0px 0px rgba(225, 225, 225, .6)
}
table.table[pin-right=true] th[fence=right],
table.table[pin-right=true] td[fence=right] {
  box-shadow: -2px 0px 0px rgba(225, 225, 225, .6)
}
table.table[pin-foot=true] tfoot {
  box-shadow: 0px -2px 0px rgba(225, 225, 225, .6)
}
table.table.skinny {
  border: 0px !important
}
table.table.skinny th {
  background: #ffffff; padding: 10px 5px; border: 0px !important
}
table.table.skinny td {
  padding: 5px; border: 0px !important
}
table.table:has(tr.draging) {
  user-select: none
}