/* POSPAY 兴业银行后台主题 */
:root {
  --cib-red: #d71920;
  --cib-red-dark: #8f1018;
  --cib-red-soft: #fff1f2;
  --cib-ink: #211316;
  --cib-ink-soft: #604348;
  --cib-gold: #b98b3a;
  --cib-gold-light: #f5d89c;
  --cib-surface: rgba(255, 255, 255, .78);
  --cib-surface-solid: #fffafa;
  --cib-border: rgba(143, 16, 24, .14);
  --cib-shadow: 0 18px 45px rgba(82, 14, 20, .12);
}
html,
body {
  color: var(--cib-ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  letter-spacing: 0;
}
body {
  background:
    linear-gradient(135deg, rgba(215, 25, 32, .08), rgba(185, 139, 58, .08)),
    repeating-linear-gradient(45deg, rgba(143, 16, 24, .035) 0, rgba(143, 16, 24, .035) 1px, transparent 1px, transparent 18px),
    #f8f3ef;
}
.wrapper,
.content-wrapper,
.right-side,
#main,
#content,
.tab-content {
  background: transparent;
}
.content-wrapper,
.right-side,
#main {
  background:
    linear-gradient(135deg, rgba(255, 250, 250, .92), rgba(255, 246, 236, .72)),
    repeating-linear-gradient(135deg, rgba(143, 16, 24, .035) 0, rgba(143, 16, 24, .035) 1px, transparent 1px, transparent 20px),
    #f8f3ef;
}
.content {
  padding: 16px;
}
.hold-transition[class*="skin-"] .main-header,
.skin-black-blue .main-header,
.skin-blue .main-header {
  background: rgba(255, 250, 250, .74);
  box-shadow: 0 10px 32px rgba(82, 14, 20, .10);
}
.hold-transition[class*="skin-"] .main-header .logo,
.skin-black-blue .main-header .logo,
.skin-blue .main-header .logo {
  background:
    linear-gradient(135deg, var(--cib-red-dark), var(--cib-red) 68%, #ee4c4f);
  border-right: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-weight: 700;
}
.hold-transition[class*="skin-"] .main-header .logo:hover,
.skin-black-blue .main-header .logo:hover,
.skin-blue .main-header .logo:hover {
  background:
    linear-gradient(135deg, #761017, var(--cib-red) 70%, #f15a5f);
}
.hold-transition[class*="skin-"] .main-header .navbar,
.skin-black-blue .main-header .navbar,
.skin-blue .main-header .navbar {
  background: rgba(255, 250, 250, .78);
  border-bottom: 1px solid rgba(143, 16, 24, .10);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.hold-transition[class*="skin-"] .main-header .navbar .nav > li > a,
.hold-transition[class*="skin-"] .main-header .navbar .sidebar-toggle,
.skin-black-blue .main-header .navbar .nav > li > a,
.skin-black-blue .main-header .navbar .sidebar-toggle,
.skin-blue .main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .sidebar-toggle {
  color: var(--cib-ink-soft);
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
.hold-transition[class*="skin-"] .main-header .navbar .nav > li > a:hover,
.hold-transition[class*="skin-"] .main-header .navbar .nav > li > a:active,
.hold-transition[class*="skin-"] .main-header .navbar .nav > li > a:focus,
.hold-transition[class*="skin-"] .main-header .navbar .nav .open > a,
.hold-transition[class*="skin-"] .main-header .navbar .nav .open > a:hover,
.hold-transition[class*="skin-"] .main-header .navbar .nav .open > a:focus,
.hold-transition[class*="skin-"] .main-header .navbar .nav > .active > a,
.hold-transition[class*="skin-"] .main-header .navbar .sidebar-toggle:hover,
.skin-black-blue .main-header .navbar .nav > li > a:hover,
.skin-black-blue .main-header .navbar .nav > li > a:active,
.skin-black-blue .main-header .navbar .nav > li > a:focus,
.skin-black-blue .main-header .navbar .nav .open > a,
.skin-black-blue .main-header .navbar .nav .open > a:hover,
.skin-black-blue .main-header .navbar .nav .open > a:focus,
.skin-black-blue .main-header .navbar .nav > .active > a,
.skin-black-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus,
.skin-blue .main-header .navbar .nav > .active > a,
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background: rgba(215, 25, 32, .08);
  color: var(--cib-red-dark);
}
.main-header .navbar .nav-addtabs > li > a {
  border-radius: 6px 6px 0 0;
}
.main-header .navbar .nav-addtabs > li.active > a {
  border-top: 2px solid var(--cib-red);
  color: var(--cib-red-dark);
}
.hold-transition[class*="skin-"] .main-sidebar,
.hold-transition[class*="skin-"] .left-side,
.skin-black-blue .main-sidebar,
.skin-black-blue .left-side,
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background:
    linear-gradient(180deg, #2b1115 0%, #160b0e 100%);
  border-right: 1px solid rgba(245, 216, 156, .18);
  box-shadow: 10px 0 32px rgba(82, 14, 20, .18);
}
.hold-transition[class*="skin-"] .main-sidebar:before,
.skin-black-blue .main-sidebar:before,
.skin-blue .main-sidebar:before {
  background:
    repeating-linear-gradient(135deg, rgba(245, 216, 156, .08) 0, rgba(245, 216, 156, .08) 1px, transparent 1px, transparent 18px);
  bottom: 0;
  content: "";
  left: 0;
  opacity: .56;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}
.hold-transition[class*="skin-"] .user-panel,
.skin-black-blue .user-panel,
.skin-blue .user-panel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  margin: 12px 10px;
  overflow: hidden;
}
.hold-transition[class*="skin-"] .user-panel > .info,
.hold-transition[class*="skin-"] .user-panel > .info > a,
.skin-black-blue .user-panel > .info,
.skin-black-blue .user-panel > .info > a,
.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
  color: #fff5f0;
}
.hold-transition[class*="skin-"] .sidebar-form,
.skin-black-blue .sidebar-form,
.skin-blue .sidebar-form {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  margin: 10px;
}
.hold-transition[class*="skin-"] .sidebar-form input[type="text"],
.hold-transition[class*="skin-"] .sidebar-form .btn,
.skin-black-blue .sidebar-form input[type="text"],
.skin-black-blue .sidebar-form .btn,
.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
  background: transparent;
  border: none;
  color: #fff3ed;
}
.hold-transition[class*="skin-"] .sidebar-form input[type="text"]::placeholder,
.skin-black-blue .sidebar-form input[type="text"]::placeholder,
.skin-blue .sidebar-form input[type="text"]::placeholder {
  color: rgba(255, 243, 237, .60);
}
.hold-transition[class*="skin-"] .sidebar a,
.skin-black-blue .sidebar a,
.skin-blue .sidebar a {
  color: rgba(255, 243, 237, .78);
}
.hold-transition[class*="skin-"] .sidebar-menu > li,
.skin-black-blue .sidebar-menu > li,
.skin-blue .sidebar-menu > li {
  margin: 4px 10px;
}
.hold-transition[class*="skin-"] .sidebar-menu > li > a,
.skin-black-blue .sidebar-menu > li > a,
.skin-blue .sidebar-menu > li > a {
  border-left: 0;
  border-radius: 8px;
  color: rgba(255, 243, 237, .78);
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
.hold-transition[class*="skin-"] .sidebar-menu > li:hover > a,
.hold-transition[class*="skin-"] .sidebar-menu > li.active > a,
.hold-transition[class*="skin-"] .sidebar-menu > li.menu-open > a,
.hold-transition[class*="skin-"] .sidebar-menu li.treeview.active > a,
.hold-transition[class*="skin-"] .sidebar-menu li.treeview.treeview-open > a,
.skin-black-blue .sidebar-menu > li:hover > a,
.skin-black-blue .sidebar-menu > li.active > a,
.skin-black-blue .sidebar-menu > li.menu-open > a,
.skin-black-blue .sidebar-menu li.treeview.active > a,
.skin-black-blue .sidebar-menu li.treeview.treeview-open > a,
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a,
.skin-blue .sidebar-menu li.treeview.active > a,
.skin-blue .sidebar-menu li.treeview.treeview-open > a {
  background:
    linear-gradient(135deg, rgba(215, 25, 32, .94), rgba(143, 16, 24, .88));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
  color: #fff;
}
.hold-transition[class*="skin-"] .sidebar-menu > li.active > a:before,
.skin-black-blue .sidebar-menu > li.active > a:before,
.skin-blue .sidebar-menu > li.active > a:before {
  background: var(--cib-gold-light);
  border-radius: 0 4px 4px 0;
  bottom: 10px;
  content: "";
  left: 0;
  position: absolute;
  top: 10px;
  width: 3px;
}
.hold-transition[class*="skin-"] .sidebar-menu > li > .treeview-menu,
.hold-transition[class*="skin-"] .sidebar-menu .treeview-menu,
.skin-black-blue .sidebar-menu > li > .treeview-menu,
.skin-black-blue .sidebar-menu .treeview-menu,
.skin-blue .sidebar-menu > li > .treeview-menu,
.skin-blue .sidebar-menu .treeview-menu {
  background: rgba(0, 0, 0, .16);
  border-radius: 8px;
  margin-top: 4px;
  padding: 4px 0;
}
.hold-transition[class*="skin-"] .treeview-menu > li > a,
.skin-black-blue .treeview-menu > li > a,
.skin-blue .treeview-menu > li > a {
  border-radius: 7px;
  color: rgba(255, 243, 237, .68);
  margin: 2px 8px;
}
.hold-transition[class*="skin-"] .treeview-menu > li.active > a,
.hold-transition[class*="skin-"] .treeview-menu > li > a:hover,
.skin-black-blue .treeview-menu > li.active > a,
.skin-black-blue .treeview-menu > li > a:hover,
.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
  background: rgba(245, 216, 156, .13);
  color: #fff;
}
.panel.panel-default,
.panel-intro,
.box,
.bootstrap-table,
.fixed-table-container,
.layui-layer,
.modal-content,
.dropdown-menu {
  background: var(--cib-surface);
  border: 1px solid var(--cib-border);
  border-radius: 8px;
  box-shadow: var(--cib-shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.panel-intro > .panel-heading,
.panel-default > .panel-heading,
.box-header {
  background: rgba(255, 250, 250, .82);
  border-bottom: 1px solid rgba(143, 16, 24, .10);
  border-radius: 8px 8px 0 0;
  color: var(--cib-ink);
}
.panel-body,
.box-body,
.modal-body,
.layui-layer-content {
  color: var(--cib-ink);
}
#ribbon,
.breadcrumb {
  background: rgba(255, 250, 250, .70);
  border-color: rgba(143, 16, 24, .10);
  color: var(--cib-ink-soft);
}
.table {
  color: var(--cib-ink);
}
.table > thead > tr > th,
.bootstrap-table .fixed-table-container .table thead th {
  background: rgba(255, 241, 242, .92);
  border-color: rgba(143, 16, 24, .12);
  color: var(--cib-red-dark);
  font-weight: 700;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th,
.fixed-table-container {
  border-color: rgba(143, 16, 24, .10);
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 250, 250, .52);
}
.table-hover > tbody > tr:hover,
.bootstrap-table .table-hover > tbody > tr:hover {
  background: rgba(215, 25, 32, .06);
}
.fixed-columns,
.fixed-columns-right,
.fix-sticky thead {
  background: #fffafa;
  box-shadow: 0 8px 24px rgba(82, 14, 20, .10);
}
.form-control,
.bootstrap-select .btn,
.input-group-addon,
.selectpage,
.sp_container .sp_input {
  background-color: rgba(255, 255, 255, .84);
  border-color: rgba(143, 16, 24, .16);
  border-radius: 7px;
  color: var(--cib-ink);
  box-shadow: none;
}
.form-control:focus,
.bootstrap-select.open > .dropdown-toggle,
.selectpage:focus,
.sp_container .sp_input:focus {
  border-color: rgba(215, 25, 32, .56);
  box-shadow: 0 0 0 3px rgba(215, 25, 32, .10);
}
.btn {
  border-radius: 7px;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
}
.btn-primary,
.btn-success,
.btn-info,
.bootstrap-table .fixed-table-toolbar .btn-primary {
  background:
    linear-gradient(135deg, var(--cib-red), var(--cib-red-dark));
  border-color: var(--cib-red);
  color: #fff;
  box-shadow: 0 8px 18px rgba(215, 25, 32, .20);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus,
.bootstrap-table .fixed-table-toolbar .btn-primary:hover,
.bootstrap-table .fixed-table-toolbar .btn-primary:focus {
  background:
    linear-gradient(135deg, #ee3b40, var(--cib-red-dark));
  border-color: var(--cib-red-dark);
  color: #fff;
}
.btn-danger {
  background: #8f1018;
  border-color: #8f1018;
  color: #fff;
}
.btn-warning {
  background: var(--cib-gold);
  border-color: var(--cib-gold);
  color: #fff;
}
.btn-default {
  background: rgba(255, 255, 255, .80);
  border-color: rgba(143, 16, 24, .16);
  color: var(--cib-ink-soft);
}
.btn-default:hover,
.btn-default:focus {
  background: rgba(255, 241, 242, .92);
  border-color: rgba(215, 25, 32, .24);
  color: var(--cib-red-dark);
}
.text-primary,
a,
.pagination > li > a,
.pagination > li > span {
  color: var(--cib-red-dark);
}
a:hover,
a:focus {
  color: var(--cib-red);
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:hover {
  background: var(--cib-red);
  border-color: var(--cib-red);
}
.nav-tabs > li > a {
  color: var(--cib-ink-soft);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: rgba(255, 250, 250, .86);
  border-top: 2px solid var(--cib-red);
  color: var(--cib-red-dark);
}
.label-primary,
.badge.bg-blue {
  background-color: var(--cib-red) !important;
}
.label-success,
.badge.bg-green {
  background-color: #138a55 !important;
}
.label-warning,
.badge.bg-yellow {
  background-color: var(--cib-gold) !important;
}
.label-danger,
.badge.bg-red {
  background-color: var(--cib-red-dark) !important;
}
.dropdown-menu > li > a {
  color: var(--cib-ink-soft);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: rgba(215, 25, 32, .08);
  color: var(--cib-red-dark);
}
.control-sidebar {
  background: rgba(33, 19, 22, .96);
  color: #fff5f0;
}
.control-sidebar-bg {
  background: rgba(33, 19, 22, .94);
}
.layui-layer-title,
.modal-header {
  background: rgba(255, 241, 242, .92);
  border-bottom-color: rgba(143, 16, 24, .12);
  color: var(--cib-red-dark);
  font-weight: 700;
}
.layui-layer-btn .layui-layer-btn0 {
  background: var(--cib-red);
  border-color: var(--cib-red);
}
.pospay-dashboard {
  background:
    linear-gradient(135deg, rgba(255, 250, 250, .76), rgba(255, 247, 236, .64)),
    repeating-linear-gradient(45deg, rgba(143, 16, 24, .035) 0, rgba(143, 16, 24, .035) 1px, transparent 1px, transparent 18px);
}
.pospay-stat,
.pospay-panel {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(143, 16, 24, .13);
  box-shadow: 0 16px 36px rgba(82, 14, 20, .10);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.pospay-stat .icon {
  background: rgba(215, 25, 32, .10);
  color: var(--cib-red);
}
.pospay-stat .value,
.pospay-panel-title,
.pospay-recent .main {
  color: var(--cib-ink);
}
.pospay-stat .name,
.pospay-stat .sub,
.pospay-recent .meta {
  color: var(--cib-ink-soft);
}
.panel-intro .panel-body {
  padding: 20px;
}
.panel-intro .widget-body.no-padding {
  padding: 0 !important;
}
.bootstrap-table {
  padding: 18px;
}
.bootstrap-table .commonsearch-table,
.bootstrap-table .fixed-table-toolbar,
.bootstrap-table .fixed-table-pagination {
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(143, 16, 24, .10);
  border-radius: 8px;
}
.bootstrap-table .commonsearch-table {
  margin-bottom: 20px;
  padding: 20px 22px 4px;
}
.bootstrap-table .form-commonsearch .row {
  margin-left: -10px;
  margin-right: -10px;
}
.bootstrap-table .form-commonsearch .row > .form-group {
  margin-bottom: 16px;
  padding-left: 10px;
  padding-right: 10px;
}
.bootstrap-table .form-commonsearch .row > .form-group > .control-label {
  color: var(--cib-ink);
  padding-right: 12px;
  padding-top: 9px;
}
.bootstrap-table .form-commonsearch .form-control,
.bootstrap-table .form-commonsearch .bootstrap-select .btn {
  min-height: 38px;
}
.bootstrap-table .form-commonsearch .btn {
  margin-right: 8px;
  min-height: 38px;
  padding-left: 18px;
  padding-right: 18px;
}
.bootstrap-table .form-commonsearch .row > .form-group:last-child > div {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  max-width: none;
  min-width: 190px;
  white-space: nowrap;
}
.bootstrap-table .form-commonsearch .row > .form-group:last-child .btn {
  flex: 0 0 auto;
  margin-right: 0;
  min-width: 86px;
}
.bootstrap-table .fixed-table-toolbar {
  display: flow-root;
  margin-bottom: 20px;
  min-height: 48px;
  padding: 10px 12px 0;
}
.bootstrap-table .fixed-table-toolbar .bs-bars {
  margin-bottom: 12px;
}
.bootstrap-table .fixed-table-toolbar .toolbar {
  margin: 0;
}
.bootstrap-table .fixed-table-toolbar .toolbar .btn,
.bootstrap-table .fixed-table-toolbar .columns .btn,
.bootstrap-table .fixed-table-toolbar .search .form-control {
  min-height: 38px;
}
.bootstrap-table .fixed-table-toolbar .columns,
.bootstrap-table .fixed-table-toolbar .search {
  margin-bottom: 12px;
}
.bootstrap-table .fixed-table-container {
  background: rgba(255, 255, 255, .70);
  margin-top: 0;
  overflow: hidden;
}
.bootstrap-table .fixed-table-container .table {
  margin-bottom: 0;
}
.bootstrap-table .fixed-table-pagination {
  display: flow-root;
  margin-top: 20px;
  padding: 12px 14px 6px;
}
@media (max-width: 767px) {
  .content {
    padding: 10px;
  }
  .panel-intro .panel-body {
    padding: 12px;
  }
  .bootstrap-table {
    padding: 12px;
  }
  .bootstrap-table .commonsearch-table {
    padding: 14px 14px 2px;
  }
  .bootstrap-table .fixed-table-toolbar,
  .bootstrap-table .fixed-table-pagination {
    padding-left: 10px;
    padding-right: 10px;
  }
  .bootstrap-table .form-commonsearch .row > .form-group {
    margin-bottom: 12px;
  }
  .bootstrap-table .form-commonsearch .row > .form-group:last-child > div {
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }
  .hold-transition[class*="skin-"] .main-header .navbar,
  .skin-black-blue .main-header .navbar,
  .skin-blue .main-header .navbar {
    background: var(--cib-red-dark);
  }
  .hold-transition[class*="skin-"] .main-header .navbar .nav > li > a,
  .hold-transition[class*="skin-"] .main-header .navbar .sidebar-toggle,
  .skin-black-blue .main-header .navbar .nav > li > a,
  .skin-black-blue .main-header .navbar .sidebar-toggle,
  .skin-blue .main-header .navbar .nav > li > a,
  .skin-blue .main-header .navbar .sidebar-toggle {
    color: #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}