.theme-default {
  --main-color: #2b9d86;
  --main-color-rgb: 43, 157, 134;
  --header-bg: #2b9d86;
  --card-bg: #fff;
  --text-color: #fff;
  --selected-color: #2b9d86;
  --special-color: #2f86f6;
}

.theme-green {
  --main-color: #54ab3c;
  --main-color-rgb: 84, 171, 60;
  --header-bg: #54ab3c;
  --card-bg: #fff;
  --text-color: #fff;
  --selected-color: #54ab3c;
  --special-color: #2f86f6;
}

.theme-orange {
  --main-color: #c05d20;
  --main-color-rgb: 192, 93, 32;
  --header-bg: #c05d20;
  --card-bg: #fff;
  --text-color: #fff;
  --selected-color: #c05d20;
  --special-color: #012cf9;
}

.theme-deepblue {
  --main-color: #1e6cc7;
  --main-color-rgb: 30, 108, 199;
  --header-bg: #1e6cc7;
  --card-bg: #fff;
  --text-color: #fff;
  --selected-color: #1e6cc7;
  --special-color: #2f86f6;
}

body[class^="theme-"] .stats-cards,
body[class^="theme-"] .chart-container,
body[class^="theme-"] .data-tabs,
body[class^="theme-"] .table-container {
  background: var(--card-bg) !important;
  color: var(--text-color) !important;
}


.theme-default input[type="checkbox"]:checked,
.theme-default input[type="radio"]:checked {
  accent-color: #2b9d86;
  color: #2b9d86;
}

.theme-green input[type="checkbox"]:checked,
.theme-green input[type="radio"]:checked {
  accent-color: #54ab3c;
  color: #54ab3c;
}

.theme-orange input[type="checkbox"]:checked,
.theme-orange input[type="radio"]:checked {
  accent-color: #c05d20;
  color: #c05d20;
}

.theme-deepblue input[type="checkbox"]:checked,
.theme-deepblue input[type="radio"]:checked {
  accent-color: #1e6cc7;
  color: #1e6cc7;
}


input::placeholder,
textarea::placeholder {
  color: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
  opacity: 1;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
}


body[class^="theme-"] .theme-btn-main {
  background: var(--main-color) !important;
  color: #fff !important;
  border-color: var(--main-color) !important;
  transition: background 0.2s, border-color 0.2s;
}

body[class^="theme-"] .theme-btn-main-tab {
  background: #fff !important;
  color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  transition: background 0.2s, border-color 0.2s;
}

body[class^="theme-"] .theme-title-main {
  background: var(--main-color) !important;
  color: #fff !important;
  border-color: var(--main-color) !important;
  transition: background 0.2s, border-color 0.2s;
}



body[class^="theme-"] .theme-btn-main-1 {
  background: rgba(var(--main-color-rgb, 10, 169, 255), 0.58) !important;
  color: #fff !important;
  border-color: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
  transition: background 0.2s, border-color 0.2s;
}

body[class^="theme-"] .theme-btn-main-optical {
  background: var(--main-color) !important;
  color: #fff !important;
  border-color: var(--main-color) !important;
  transition: background 0.2s, border-color 0.2s;
  opacity: 0.5;
}

body[class^="theme-"] .theme-text-main {
  color: var(--main-color) !important;
}


.theme-gradient-bg {
  background: linear-gradient(to right,
      var(--main-color) 0%,
      rgba(var(--main-color-rgb, 10, 169, 255), 0.7) 40%,
      rgba(var(--main-color-rgb, 10, 169, 255), 0.3) 75%,
      rgba(var(--main-color-rgb, 10, 169, 255), 0.08) 100%) !important;
}


.theme-gradient-vertical-bg {
  background: linear-gradient(180deg,
      rgba(var(--main-color-rgb, 10, 169, 255), 0.6) 1%,
      var(--main-color) 99%) !important;
  border: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
  color: #fff !important;
}

.theme-gradient-vertical-bg-light {
  background: linear-gradient(180deg,
      rgba(var(--main-color-rgb, 10, 169, 255), 0.3) 10%,
      rgba(var(--main-color-rgb, 10, 169, 255), 0.7) 90%) !important;
  border: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
  color: #fff !important;
}

.theme-gradient-vertical-bg-light-more {
  background: linear-gradient(180deg,
      rgba(var(--main-color-rgb, 10, 169, 255), 0.1) 10%,
      rgba(var(--main-color-rgb, 10, 169, 255), 0.2) 90%) !important;
  border: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
  color: #fff !important;
}


.theme-border-bottom {
  border-bottom: 2px solid var(--main-color) !important;
}


.theme-gradient-vertical-bg-1 {
  background: linear-gradient(180deg,
      rgba(var(--main-color-rgb, 10, 169, 255), 0.3) 1%,
      var(--main-color) 99%) !important;
  border: rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
}


.theme-background {
  background: rgba(var(--main-color-rgb, 10, 169, 255), 0.05) !important;
  border: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
}

.theme-background-no-border {
  background: rgba(var(--main-color-rgb, 10, 169, 255), 0.05) !important;
}

.theme-background-1 {
  background: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
  border: red !important;
}

.theme-background-8 {
  background: rgba(var(--main-color-rgb, 10, 169, 255), 0.8) !important;
  border: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
}

.theme-first-amount {
  border: 1px solid rgba(var(--main-color-rgb, 10, 169, 255), 0.3) !important;
}

.theme-text {
  color: var(--main-color) !important;
}


.layui-table tr:hover,
.table-edit-flex .layui-table tr:hover {
  background: rgba(var(--main-color-rgb, 10, 169, 255), 0.1);
}


body[class^="theme-"] .layui-table,
body[class^="theme-"] .layui-table td,
body[class^="theme-"] .layui-input {
  border-color: rgba(var(--main-color-rgb, 10, 169, 255), 0.5) !important;
}


body[class^="theme-"] .layui-table th {
  background: rgba(var(--main-color-rgb, 10, 169, 255), 0.1) !important;
  border-color: rgba(var(--main-color-rgb, 10, 169, 255), 0.5) !important;
}

.some-class {
  color: var(--special-color);
}

.fixedColor {
  color: #012cf9;
  cursor: pointer;
}

.text-danger {
  color: red;
}

.text-blue {
  color: #1594f5;
}

.btn-disabled {
  background: #f5f5f5 !important;
  color: #bbb !important;
  border-color: #eee !important;
  cursor: not-allowed !important;
}


.theme-default .header {
  background: linear-gradient(180deg, #69d8c4 0%, #32a38d 52%, #1c655a 100%) !important;
  color: #fff !important;
}

.theme-green .header {
  background: linear-gradient(180deg, #84cf72 0%, #4f9a3b 52%, #2c5f22 100%) !important;
  color: #fff !important;
}

.theme-orange .header {
  background: linear-gradient(180deg, #6b2f18 0%, #52200f 55%, #3d160d 100%) !important;
  color: #fff !important;
}

.theme-deepblue .header {
  background: linear-gradient(180deg, #4a97ec 0%, #1f6fc4 52%, #063f78 100%) !important;
  color: #fff !important;
}

.theme-default .custom-tab {
  background: linear-gradient(180deg, #43a491 1%, #16443c 99%) !important;
}

.theme-green .custom-tab {
  background: linear-gradient(180deg, #5c9c4b 1%, #21401a 99%) !important;
}

.theme-orange .custom-tab {
  background: #351c0c !important;
}

.theme-deepblue .custom-tab {
  background: linear-gradient(180deg, #1963b7, #023f77) !important;
}



.theme-default .theme-diff-background {
  background: linear-gradient(180deg, #5ccfb8 1%, #21554c 99%) !important;
  color: #fff !important;
}

.theme-green .theme-diff-background {
  background: linear-gradient(180deg, #7ac665 1%, #2d5125 99%) !important;
  color: #fff !important;
}

.theme-orange .theme-diff-background {
  background: #c05d20 !important;
  color: #fff !important;
}


.theme-orange #dynamic-tab-btns .custom-tab-title {
  color: #361f17;
}
.theme-orange #dynamic-tab-btns .custom-tab-title:hover {
  color: #c05d20;
}


.theme-orange .x8-board { background: #fff; }
.theme-orange .x8-cell { border-color: #ecdcc9; }


.theme-orange .x8-cell-inline {
  background: #f6f7fb !important;
  border: none !important;
  border-top: 0.8px solid #efba84 !important;
  border-left: 0.8px solid #efba84 !important;
  border-radius: 0 !important;
}
.theme-orange .x8-play-inline .x8-grid {
  gap: 0 !important;
  border-right: 0.8px solid #efba84;
  border-bottom: 0.8px solid #efba84;
}
.theme-orange .x8-side-left,
.theme-orange .x8-side-right { border-color: #ecdcc9; }
.theme-orange .x8-board-bar,
.theme-orange .x8-chipbar,
.theme-orange .x8-side-hd { border-color: #ecdcc9; }


.theme-orange .x8-play-inline .x8-grid-number .x8-cell-name {
  width: 28px; height: 28px; font-size: 14px; font-weight: 600; box-shadow: none;
}
.theme-orange .x8-wave-red .x8-cell-name { background: #f82525; }
.theme-orange .x8-wave-blue .x8-cell-name { background: #028aff; }
.theme-orange .x8-wave-green .x8-cell-name { background: #1fc26b; }


.theme-orange .x8-cell-inline .x8-cell-odds { color: #f82525; border-left: 0.8px solid #efba84; border-right: 0.8px solid #efba84; }


.theme-orange .x8-cell-amt { background: #eee8e3; border-color: #efba84; color: #361f17; border-radius: 4px; }


.theme-orange .x8-today { color: #6c3818; }


.theme-orange .x8-ball-red { background: #f82525; }
.theme-orange .x8-ball-blue { background: #028aff; }
.theme-orange .x8-ball-green { background: #1fc26b; }

.theme-orange .x8-btn-plain {
  background: linear-gradient(180deg, #fff, #e2e4ea 99%);
  border: 0.8px solid #c5cad5;
  color: #414654;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
}





.theme-orange .x8-table th,
.theme-orange .x8-table td { border-color: #efba84; }
.theme-orange .x8-table th { background: #eee8e3; color: #361f17; }
.theme-orange .x8-table td { color: #6c3818; }
.theme-orange .x8-table tbody tr:hover { background: rgba(239, 186, 132, .16); }
.theme-orange .x8-view-title { color: #6c3818; }


.theme-orange .x8-quick-sec.q-num,
.theme-orange .x8-quick-sec.q-color,
.theme-orange .x8-quick-sec.q-attr,
.theme-orange .x8-quick-sec.q-zodiac,
.theme-orange .x8-quick-sec.q-tail {
  gap: 0;
  border-right: 0.8px solid #efba84;
  border-bottom: 0.8px solid #efba84;
  border-radius: 0;
  margin-bottom: 6px;
}
.theme-orange .x8-quick-sec.q-num .x8-qcell,
.theme-orange .x8-quick-sec.q-color .x8-qcell,
.theme-orange .x8-quick-sec.q-attr .x8-qcell,
.theme-orange .x8-quick-sec.q-zodiac .x8-qcell,
.theme-orange .x8-quick-sec.q-tail .x8-qcell {
  border: none;
  border-top: 0.8px solid #efba84;
  border-left: 0.8px solid #efba84;
  border-radius: 0;
  background: transparent;
}



.theme-orange .x8-quick-sec .x8-qcell.active { background: #ffb135; color: #111626; }


.theme-orange .q-attr .x8-qcell,
.theme-orange .q-zodiac .x8-qcell,
.theme-orange .q-tail .x8-qcell { color: #6c3818; font-weight: 700; }
.theme-orange .q-color .x8-qcell { font-weight: 700; }
.theme-orange .q-color .x8-qcell.x8-qc-red { color: #d0291a; }
.theme-orange .q-color .x8-qcell.x8-qc-blue { color: #176aae; }
.theme-orange .q-color .x8-qcell.x8-qc-green { color: #178f4a; }


.theme-orange .x8-card { border: 0.8px solid #efba84; border-radius: 2px; }
.theme-orange .x8-card-v { color: #6c3818; }

.theme-deepblue .theme-diff-background {
  background: linear-gradient(180deg, #1963b7, #023f77) !important;
  color: #fff !important;
}



.theme-laypage .layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: var(--theme-color);
}

.theme-laypage .layui-laypage a:hover {
  color: var(--theme-color);
}


body.theme-default .theme-laypage .layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: #2b9d86;
}
body.theme-green .theme-laypage .layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: #54ab3c;
}
body.theme-orange .theme-laypage .layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: #c05d20;
}
body.theme-deepblue .theme-laypage .layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: #1e6cc7;
}



.theme-orange .x8-chzm { border-color: #efba84; background: linear-gradient(#fff, #f6e7d7 99%); color: #6c3818; }
.theme-orange .x8-chzm-r { border-left: none; }
.theme-orange .x8-chzm.active { background: linear-gradient(179deg, #fff 23%, #f4a269); color: #c05d20; }




.theme-orange .x8-subtab { background: linear-gradient(#fff, #f6e7d7 99%); color: #111626; }
.theme-orange .x8-subtab.active { background: linear-gradient(#ffecdf, #ffd5b9 99%); color: #c05d20; }
.theme-orange .x8-subtabs { border-color: #efba84; }
.theme-orange .x8-subtab { border-right-color: #efba84; }
.theme-orange .x8-combo-modes { border-color: #efba84; }
.theme-orange .x8-combo-mode { border-right-color: #efba84; background: linear-gradient(#fff, #f6e7d7 99%); color: #6c3818; }
.theme-orange .x8-combo-mode.active { background: linear-gradient(#ffecdf, #ffd5b9 99%); color: #c05d20; }



.theme-orange .x8-combo-pad-number .x8-combo-cell { border-color: #efba84; }
.theme-orange .x8-combo-pad-number .x8-combo-cell:nth-child(10n+1) { border-top-color: #efba84; }
.theme-orange .x8-combo-cell-odds { background: #f6f7fb; }
.theme-orange .x8-combo-ballbox { background: #fff7ef; }
.theme-orange .x8-combo-headcell { background: #eee8e3; color: #361f17; border-left-color: #efba84; border-right-color: #efba84; }
.theme-orange .x8-combo-headpick { border-left-color: #efba84; }
.theme-orange .x8-combo-cell-odds .x8-combo-cellodds { border-left-color: #efba84; }
.theme-orange .x8-combo-pad-rows .x8-combo-cell { border-color: #efba84; }









.theme-default {
  --x8-line: #9ec6be;
  --x8-namebg: #ebf4f3;
  --x8-nameink: #246156;
  --x8-cellbg: #f6f7fb;
  --x8-inpbg: #d3dedd;
  --x8-inpline: #7caea4;
  --x8-bargrad: linear-gradient(0deg, #d1efea, #fff);
  --x8-barink: #246156;
  --x8-limitink: #246156;
  --x8-btn-off: linear-gradient(#fff, #d1efea 99%);
  --x8-btn-on: linear-gradient(#fff 18%, #54d4b9 99%);
  --x8-btnline: #9ec6be;
  --x8-btnline-on: #9ec6be;
  --x8-btn-off-ink: #246156;
  --x8-btn-on-ink: #359f8a;
  --x8-pos-off: linear-gradient(#fff, #d1efea 99%);
  --x8-pos-off-ink: #246156;
  --x8-pos-on: linear-gradient(#fff, #7fd9c6 99%);
  --x8-pos-on-ink: #3d8e7e;
  --x8-headbg: #d3dedd;
  --x8-headink: #0e2f29;
  --x8-pick: #fbbb55;
  --x8-pick-ink: #111626;
  --x8-dlg-grad: linear-gradient(#5ccfb8 1%, #21554c 99%);
  --x8-dlg-foot: #ebf4f3;
  --x8-btn-pri: linear-gradient(#5ccfb8 1%, #21554c 99%);
  --x8-btn-pri-ink: #fff;
  --x8-hover: #d7ece8;
  --x8-fill: #fbbb55;
  --x8-inpline-on: #3d8e7e;
  --x8-btn-pri-line: #3d8e7e;
  --x8-btn-act-line: #57cfb4;
  --x8-btn-dis-line: #eef0f3;
  --x8-subink: #4f6f68;
  --x8-ok: #1fc26b;
}

.theme-green {
  --x8-line: #a8c3a1;
  --x8-namebg: #edf3ec;
  --x8-nameink: #335c29;
  --x8-cellbg: #f6f7fb;
  --x8-inpbg: #d5ddd4;
  --x8-inpline: #89aa80;
  --x8-bargrad: linear-gradient(0deg, #d8edd3, #fff);
  --x8-barink: #335c29;
  --x8-limitink: #335c29;
  --x8-btn-off: linear-gradient(#fff, #d8edd3 99%);
  --x8-btn-on: linear-gradient(#fff 18%, #76ca5e 99%);
  --x8-btnline: #a8c3a1;
  --x8-btnline-on: #a8c3a1;
  --x8-btn-off-ink: #335c29;
  --x8-btn-on-ink: #50973d;
  --x8-pos-off: linear-gradient(#fff, #d8edd3 99%);
  --x8-pos-off-ink: #335c29;
  --x8-pos-on: linear-gradient(#fff, #97d286 99%);
  --x8-pos-on-ink: #528843;
  --x8-headbg: #d5ddd4;
  --x8-headink: #2b3b12;
  --x8-pick: #fbbb55;
  --x8-pick-ink: #111626;
  --x8-dlg-grad: linear-gradient(#7ac665 1%, #2d5125 99%);
  --x8-dlg-foot: #edf3ec;
  --x8-btn-pri: linear-gradient(#7ac665 1%, #2d5125 99%);
  --x8-btn-pri-ink: #fff;
  
  --x8-hover: #dcead9;
  --x8-fill: #fbbb55;
  --x8-inpline-on: #528843;
  --x8-btn-pri-line: #528843;
  --x8-btn-act-line: #a5d853;
  --x8-btn-dis-line: #eef0f3;
  --x8-subink: #646d54;
  --x8-ok: #79ba00;
}

.theme-orange {
  --x8-line: #efba84;
  --x8-namebg: #fff7ef;
  --x8-nameink: #6c3818;
  --x8-cellbg: #f6f7fb;
  --x8-inpbg: #eee8e3;
  --x8-inpline: #efba84;
  --x8-bargrad: linear-gradient(0deg, #fadeca, #fff);
  --x8-barink: #6c3818;
  --x8-limitink: #6c3818;
  --x8-btn-off: linear-gradient(#fff, #f6e7d7 99%);
  --x8-btn-on: linear-gradient(179deg, #fff 23%, #f4a269);
  --x8-btnline: #efba84;
  --x8-btnline-on: #efba84;
  --x8-btn-off-ink: #6c3818;
  --x8-btn-on-ink: #c05d20;
  --x8-pos-off: linear-gradient(#fff, #f6e7d7 99%);
  --x8-pos-off-ink: #6c3818;
  --x8-pos-on: linear-gradient(#ffecdf, #ffd5b9 99%);
  --x8-pos-on-ink: #c05d20;
  --x8-headbg: #eee8e3;
  --x8-headink: #361f17;
  --x8-pick: #ffb135;
  --x8-pick-ink: #361f17;
  --x8-dlg-grad: linear-gradient(#6a3612, #351c0a);
  --x8-dlg-foot: #fff7ef;
  --x8-btn-pri: linear-gradient(#f68845, #a3521e);
  --x8-btn-pri-ink: #fff;
  
  --x8-hover: #ffd5b9;
  --x8-fill: #ffb135;
  --x8-inpline-on: #ffa141;
  --x8-btn-pri-line: #8c4417;
  --x8-btn-act-line: #da9f7b;
  --x8-btn-dis-line: #eef0f3;
  --x8-subink: #86756e;
  --x8-ok: #79ba00;
}

.theme-deepblue {
  --x8-line: #a6c0dd;
  --x8-namebg: #edf4fe;
  --x8-nameink: #414654;
  --x8-cellbg: #f6f7fb;
  --x8-inpbg: #a6c0dd;
  --x8-inpline: #bfc9d7;
  --x8-bargrad: linear-gradient(0deg, #a1b5d3, #fff);
  --x8-barink: #3f6ca7;
  --x8-limitink: #414654;
  --x8-btn-off: linear-gradient(0deg, #a1b5d3, #fff);
  --x8-btn-on: linear-gradient(#3b8be7 1%, #023f77 99%);
  --x8-btnline: #a6c0dd;
  --x8-btnline-on: #a6c0dd;
  --x8-btn-off-ink: #3f6ca7;
  --x8-btn-on-ink: #fff;
  --x8-pos-off: linear-gradient(#fff, #e2e4ea 98%);
  --x8-pos-off-ink: #414654;
  --x8-pos-on: linear-gradient(#5aa6ff, #1e6cc7 99%);
  --x8-pos-on-ink: #134c8f;
  --x8-headbg: #ebecf1;
  --x8-headink: #111626;
  --x8-pick: #fbbb55;
  --x8-pick-ink: #111626;
  --x8-dlg-grad: linear-gradient(#1963b7, #023f77);
  --x8-dlg-foot: #ecf4fe;
  --x8-btn-pri: linear-gradient(#1963b7, #023f77);
  --x8-btn-pri-ink: #fff;
  
  --x8-hover: #c3daf1;
  --x8-fill: #fbbb55;
  --x8-inpline-on: #1890ff;
  --x8-btn-pri-line: #1e6cc7;
  --x8-btn-act-line: #9dcbf5;
  --x8-btn-dis-line: #eef0f3;
  --x8-subink: #656b7b;
  --x8-ok: #1fc26b;
}