@charset "UTF-8";
:root {
  font-size: 16px;
  --bgc-dark: #2c3e50;
  --text-color: #66A5B0;
  --text-color-light: #ecf0f1;
  --text-color-dark: #2c3e50;
  --default-view-width: 100%;
  --default-view-max-width: 1280px;
  --default-view-margin: 0 auto;
}

body {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: auto;
}
body > main {
  display: block;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: auto;
}
body.mobile-mode main {
  overflow: hidden auto;
}

.main-viewport .viewport-wrapper {
  display: grid;
  grid-template: auto auto 1fr/1fr;
}
.main-viewport .page-view {
  width: 100%;
}
.main-viewport .page-view > * {
  display: block;
  width: var(--default-view-width);
  max-width: var(--default-view-max-width);
  margin: var(--default-view-margin);
}
.main-viewport .page-view > *:not(.active) {
  display: none !important;
}

.overlay-wrapper, .overlay {
  display: flex;
  overflow: hidden auto;
  align-items: flex-start;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
}
.overlay-wrapper.hide, .overlay.hide {
  display: none;
}

.dialog {
  border: 1px solid #9BC5CD;
  padding: 0.5rem;
  border-radius: 0.8rem;
  background: #FFF;
  margin: 3rem auto;
}
.dialog .title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-size: 1.3rem;
  border-bottom: 1px solid #9BC5CD;
  color: var(--text-color);
}
.dialog .body {
  padding: 1rem;
}
.dialog .buttons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem 0;
  column-gap: 1rem;
}
.dialog .buttons button {
  font-weight: bolder;
  padding: 0.2rem 1.2rem;
  pointer-events: auto;
}

div.radio-selector label,
div.radio-selector input[type=radio] {
  cursor: pointer;
}

button.habtn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  border-radius: 2.5rem;
  border: 1px solid #67A5B2;
  color: #67A5B2;
  min-width: 6rem;
  background: #FFF;
  padding: 0 1.2rem;
}
button.habtn.no-br {
  border-radius: 0;
}
button.habtn:hover {
  background: #67A5B2;
  color: #FFF;
}
button.habtn.btn-danger {
  border-color: #b26767;
}
button.habtn.btn-danger:hover {
  background: #b26767;
}
button.habtn.solid {
  border: none;
  background: #67A5B2;
  color: #FFF;
}
button.habtn.solid:hover {
  background: #558993;
  color: #FFF;
}
button.habtn.solid.btn-danger {
  background: #b26767;
}
button.habtn.solid.btn-danger:hover {
  background: #9f5c5c;
}

.okx-logo {
  --logo-size: 100px;
  width: var(--logo-size);
  padding-top: var(--logo-size);
  background: #000 url("./public/img/okx-logo.png") no-repeat;
  background-size: 90% 90%;
  background-position: center center;
  border-radius: 100%;
  overflow: hidden;
}

.ecoin-logo {
  --width:8rem;
  display: block;
  width: var(--width);
  height: calc(var(--width) * 0.498);
  background: url("./public/img/logo-ecoin.jpg") no-repeat center center/contain;
}

.g-table {
  --border-color: #66A5B0;
  font-size: 1em;
}
.g-table .g-thead {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.2rem;
}
.g-table .g-thead.filled {
  background: var(--border-color);
  color: #FFF;
}
.g-table .g-thead .g-trow:last-child {
  border-bottom: 0;
}
.g-table .g-thead .g-tcol {
  font-weight: bolder;
  font-size: 1.1em;
}
.g-table .g-tbody .g-trow {
  margin-bottom: 0.2rem;
  padding-bottom: 0.2rem;
}
.g-table .g-tbody .g-trow:last-child {
  margin-bottom: 0;
}
.g-table .g-tfoot {
  border-top: 1px solid var(--border-color);
}
.g-table .g-trow {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 0.5rem;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}
.g-table .g-trow .g-tcol {
  padding: 0.2rem 0.5rem;
  word-break: break-all;
}
.g-table .g-trow.g-trow-span {
  grid-template-columns: 1fr !important;
}
.g-table .g-trow.g-trow-span .g-tcol {
  text-align: center !important;
  font-size: 1.111em;
}

/* HTML: <div class="loader"></div> */
.loader {
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  mask: var(--_m);
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}

.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: "Roboto", arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
  transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
}
.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}
.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}
.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: "Roboto", arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity 0.218s;
  transition: opacity 0.218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.gsi-material-button:disabled {
  cursor: default;
  background-color: rgba(255, 255, 255, 0.3803921569);
  border-color: rgba(31, 31, 31, 0.1215686275);
}
.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}
.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}
.gsi-material-button:not(:disabled):active .gsi-material-button-state, .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}
.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}

body {
  background-color: #ffffff;
}

.container-fluid .row .col-12 {
  padding: 7px 0;
}

.bg-primary {
  background-color: rgb(71, 157, 171) !important;
}

.price-ticker:before,
.price-ticker:after {
  background: linear-gradient(-90deg, rgb(0, 71, 103) 0%, rgba(255, 255, 255, 0) 70%);
}

.navbar-nav .nav-link.active:before {
  background: rgba(0, 71, 103, 0.4);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--text-color);
}

.loaded.modal-open .nav-link.active {
  color: var(--text-color) !important;
}

.btn-mobile-navbar i {
  color: var(--text-color);
}

.btn-mobile-navbar {
  box-shadow: inset 0px 0px 0px 1px var(--text-color);
}

.btn-mobile-navbar.show {
  box-shadow: inset 0px 0px 0px 1px var(--text-color);
}

#slideshow {
  background: none;
}

#slideshow .image-slide {
  z-index: 0;
}

.carousel-control-prev,
.carousel-control-next {
  background: var(--text-color);
}

.carousel-indicators .active {
  background: var(--text-color);
}

.link-secondary {
  color: var(--text-color) !important;
}

.btn-primary,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--text-color);
  border: 1px solid var(--text-color);
}

.btn-outline-primary {
  border: 1px solid var(--text-color);
  color: var(--text-color);
}

.btn-outline-primary:active,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--text-color);
  border: 1px solid var(--text-color);
}

#slideshow h1,
#slideshow .h1 {
  color: var(--text-color);
}

.icon-wrap.bg-primary {
  background-color: #e1ecee !important;
}

.in-avo-2 .active-col {
  background: linear-gradient(148deg, rgb(0, 71, 103) 0%, rgba(0, 71, 103, 0.5) 86%);
  box-shadow: rgba(0, 71, 103, 0.6) 0px 7px 42px 0px;
  border-radius: 30px;
}

.in-avo-2 .active-col .icon-wrap.bg-primary {
  background-color: #e1ecee !important;
}

.in-avo-3 .card {
  border-color: #e1ecee;
}

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

.link-primary,
.link-primary:hover,
.link-primary:focus {
  color: var(--text-color) !important;
}

.in-avo-4 .card-body h6,
.in-avo-4 .card-body .h6 {
  color: var(--text-color);
}

.in-avo-5 .btn-outline-secondary {
  padding: 8px 25px 8px 10px;
  position: relative;
}

.in-avo-5 .btn-outline-secondary:focus {
  background: #f1f1f1;
  border-color: #f1f1f1;
}

.in-avo-5 a > div > div {
  font-size: 10px;
  bottom: 2px;
  position: absolute;
  right: 7px;
  color: #ff9138;
  font-weight: 600;
}

.in-avo-5 a > div > div span.start-using {
  letter-spacing: 0.2em;
}

.in-avo-5 a h6 {
  font-size: 5px;
}

.in-avo-5 .btn-outline-secondary img {
  margin-right: 0;
}

.in-avo-footer .footer-email {
  color: var(--text-color);
}

.in-avo-footer .social-media-list div {
  background-color: rgba(0, 71, 103, 0.1);
}

.in-avo-footer .social-media-list a i,
.in-avo-footer .social-media-list a i:hover {
  color: rgba(0, 71, 103, 0.7);
}

.in-avo-footer .trade-warning {
  color: rgba(255, 0, 0, 0.7);
  border: 1px solid rgba(255, 0, 0, 0.4);
}

.in-avo-footer .trade-warning h6,
.in-avo-footer .trade-warning .h6 {
  color: rgba(255, 0, 0, 0.7);
}

.to-top {
  background-color: var(--text-color);
}

.breadcrumb {
  background-color: rgba(0, 71, 103, 0.8);
}

.section-breadcrumb {
  border-top: none;
  box-shadow: none;
}

.section-breadcrumb h1,
.section-breadcrumb .h1 {
  color: var(--text-color);
}

.border-primary {
  border-color: rgb(0, 71, 103) !important;
}

.accordion-button:not(.collapsed) {
  color: var(--text-color);
}

.accordion-style-5 .accordion-button:not(.collapsed)::after {
  color: var(--text-color);
}

.bg-secondary {
  background-color: rgba(0, 71, 103, 0.6) !important;
}

.text-secondary {
  color: rgba(0, 71, 103, 0.6) !important;
}

.btn-outline-secondary {
  border: 1px solid rgba(0, 71, 103, 0.6);
  color: rgba(0, 71, 103, 0.6);
}

.btn-outline-secondary:active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: rgba(0, 71, 103, 0.6);
  border: 1px solid rgba(0, 71, 103, 0.6);
  color: var(--text-color);
}

.button-live-stream {
  background-image: url("img/button-live-stream-1.png");
  width: 175px;
  height: 63.5572139303px;
  background-repeat: no-repeat;
  background-size: contain;
}

.tutorials .tutorial {
  padding: 10px 5px;
}

.tutorials .tutorial .preview {
  background: #016d9b;
  width: 240px;
  height: 160px;
  margin: auto;
  position: relative;
}

.tutorials .tutorial .preview .play {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #5b565c;
  font-size: 40px;
}

.table {
  border-color: rgba(0, 71, 103, 0.1);
}

.table thead {
  background: rgba(0, 71, 103, 0.2);
}

.table thead > :not(caption) > * {
  color: var(--text-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 71, 103, 0.1);
}

.navbar {
  --bs-navbar-nav-link-padding-x:.8rem;
}

[is=alert-dialog], [is=confirm-dialog] {
  padding: 0.5rem;
  width: 500px;
  border: 1px solid #9BC5CD;
  border-radius: 0.8rem;
  background: #FFF;
}
[is=alert-dialog] .title, [is=confirm-dialog] .title {
  padding: 1rem;
  font-size: 1.3rem;
  color: #66A5B0;
  text-align: center;
  border-bottom: 1px solid #9BC5CD;
}
[is=alert-dialog].no-title .title, [is=confirm-dialog].no-title .title {
  display: none;
}
[is=alert-dialog] .body, [is=confirm-dialog] .body {
  padding: 1rem;
}
[is=alert-dialog] .body .description, [is=confirm-dialog] .body .description {
  font-size: 1.1rem;
  padding: 1.5rem 2rem;
  color: #000;
  line-height: 1.6em;
}
[is=alert-dialog] .body .btn-container, [is=confirm-dialog] .body .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
[is=alert-dialog] .body .btn-container:last-child, [is=confirm-dialog] .body .btn-container:last-child {
  margin-bottom: 0;
}

unit-assist2-confirm-dialog {
  padding: 0.5rem;
  width: 640px;
}
unit-assist2-confirm-dialog .title {
  border-bottom: 0;
}
unit-assist2-confirm-dialog .body {
  padding: 1rem;
  margin: 0 1rem;
}
unit-assist2-confirm-dialog .body .description {
  padding: 1.5rem 2rem;
  color: #999999;
  line-height: 1.3rem;
}
unit-assist2-confirm-dialog .body .confirms {
  padding: 1rem 3rem 2rem;
  font-size: 0.8rem;
  color: #A00;
  line-height: 1.5;
}
unit-assist2-confirm-dialog .body .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 1rem;
}
unit-assist2-confirm-dialog .body .btn-container:last-child {
  margin-bottom: 0;
}
unit-assist2-confirm-dialog .body .confirms label {
  cursor: pointer;
}

unit-expand-confirm-dialog {
  padding: 0.5rem;
  width: 640px;
}
unit-expand-confirm-dialog .title {
  border-bottom: 0;
}
unit-expand-confirm-dialog .body {
  padding: 1rem;
  margin: 0 1rem;
}
unit-expand-confirm-dialog .body .description {
  padding: 1.5rem 2rem;
  color: #999999;
  line-height: 1.3rem;
}
unit-expand-confirm-dialog .body .confirms {
  padding: 1rem 3rem 2rem;
  font-size: 0.8rem;
  color: #A00;
  line-height: 1.5;
}
unit-expand-confirm-dialog .body .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 1rem;
}
unit-expand-confirm-dialog .body .btn-container:last-child {
  margin-bottom: 0;
}
unit-expand-confirm-dialog .body .confirms label {
  cursor: pointer;
}

unit-symbol-exceed-confirm-dialog {
  padding: 0.5rem;
  width: 640px;
}
unit-symbol-exceed-confirm-dialog .title {
  border-bottom: 0;
}
unit-symbol-exceed-confirm-dialog .body {
  padding: 1rem;
  margin: 0 1rem;
}
unit-symbol-exceed-confirm-dialog .body .description {
  padding: 1.5rem 2rem;
  color: #999999;
  line-height: 1.3rem;
}
unit-symbol-exceed-confirm-dialog .body .confirms {
  padding: 1rem 3rem 2rem;
  font-size: 0.8rem;
  color: #A00;
  line-height: 1.5;
}
unit-symbol-exceed-confirm-dialog .body .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 1rem;
}
unit-symbol-exceed-confirm-dialog .body .btn-container:last-child {
  margin-bottom: 0;
}
unit-symbol-exceed-confirm-dialog .body .confirms label {
  cursor: pointer;
}

grid-table {
  --border-color:#66A5B0;
  font-size: 1em;
}
grid-table, grid-table grid-table-head, grid-table grid-table-body, grid-table grid-table-foot, grid-table grid-table-row, grid-table grid-table-col {
  display: block;
}
grid-table grid-table-head grid-table-row:last-child {
  border-bottom: 0;
}
grid-table grid-table-head grid-table-col {
  font-weight: bolder;
  font-size: 1.1em;
}
grid-table grid-table-body grid-table-row:last-child {
  margin-bottom: 0;
}
grid-table grid-table-row {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 0.5rem;
  align-items: center;
}
grid-table grid-table-row grid-table-col {
  padding: 0 0.5rem;
}
grid-table grid-table-row[grid-row-span] {
  grid-template-columns: 1fr !important;
}
grid-table grid-table-row[grid-row-span] grid-table-col {
  text-align: center;
  font-size: 1.1em;
}
grid-table.bordered {
  border: 1px solid var(--border-color);
}
grid-table.bordered grid-table-head {
  border-bottom: 1px solid var(--border-color);
}
grid-table.bordered grid-table-foot {
  border-top: 1px solid var(--border-color);
}
grid-table.bordered grid-table-row {
  border-bottom: 1px solid var(--border-color);
}
grid-table.bordered grid-table-row:last-child {
  border: none;
}

op-tag-list {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
op-tag-list op-tag {
  display: inline-block;
  cursor: pointer;
}
op-tag-list op-tag-divider {
  display: inline-block;
  margin: 0 0.2rem;
  pointer-events: none;
}
op-tag-list op-tag-divider:after {
  content: "/";
}

tab-view tab-list {
  display: flex;
  column-gap: 5px;
  border-bottom: 2px solid var(--text-color);
  padding: 0 0.5rem;
}
tab-view tab-list > tab-item {
  cursor: pointer;
  color: var(--text-color);
  padding: 0.1rem 0.5rem 0;
}
tab-view tab-list > tab-item.active {
  cursor: default;
  background: var(--text-color);
  color: #FFF;
}
tab-view tab-list > tab-item.hidden {
  display: none;
}
tab-view tab-viewport > * {
  display: none;
}
tab-view tab-viewport > *.active {
  display: block;
}

announce-dialog.overlay-wrapper .dialog {
  padding: 2rem;
  width: 1024px;
  height: 80%;
}
announce-dialog.overlay-wrapper .dialog .title {
  border-bottom: 0;
}
announce-dialog.overlay-wrapper .dialog .body {
  padding: 0;
  display: grid;
  height: 100%;
  grid-template-rows: 1fr auto;
}
announce-dialog.overlay-wrapper .dialog .body div:first-child {
  padding-bottom: 1rem;
}
announce-dialog.overlay-wrapper .dialog .body iframe {
  width: 100%;
  height: 100%;
}
announce-dialog .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
announce-dialog .btn-container:last-child {
  margin-bottom: 0;
}

body.mobile-mode announce-dialog .dialog {
  width: calc(100% - 2rem);
  padding: 0 0 2rem;
}

announce-overlay.overlay-wrapper {
  z-index: 99999;
}
announce-overlay .dialog {
  padding: 0;
  width: 80vw;
  height: 80vh;
  position: relative;
  border: none;
}
announce-overlay .dialog .body {
  padding: 0;
  display: grid;
  height: 100%;
  grid-template-rows: 1fr auto;
}
announce-overlay .dialog .body iframe {
  width: 100%;
  height: 100%;
}
announce-overlay .btn-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

body main.main-viewport main.page-view > announce-view {
  display: grid;
  grid-template-columns: 1fr 300px;
  column-gap: 0.7rem;
  width: 100%;
  height: calc(100vh - 174px - 2rem);
  overflow: hidden;
  margin-bottom: 2rem;
}
body main.main-viewport main.page-view > announce-view .section {
  height: 100%;
  padding: 0.7rem;
  display: grid;
  grid-template-rows: 2rem 1fr;
  row-gap: 5px;
  border: 2px solid #D6D6D6;
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
}
body main.main-viewport main.page-view > announce-view .section .title {
  color: #555;
  text-decoration: underline;
  font-size: 1.3rem;
  font-weight: bolder;
  text-align: center;
}
body main.main-viewport main.page-view > announce-view .section .content {
  padding: 0.7rem;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
body main.main-viewport main.page-view > announce-view .noti-item {
  padding: 5px;
  border-bottom: 1px solid #555;
}
body main.main-viewport main.page-view > announce-view .noti-item:first-child {
  color: #2980b9;
  font-weight: bold;
}

body main.main-viewport main.page-view > broker-info-view {
  display: block;
  width: 1100px;
  max-width: 1100px;
  padding: 2rem 0 4rem;
}
body main.main-viewport main.page-view > broker-info-view .attachment-wrapper {
  pointer-events: none;
}
body main.main-viewport main.page-view > broker-info-view .attachment-wrapper.detached {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1100px;
  margin: 0 calc((100vw - 1100px) / 2);
}
body main.main-viewport main.page-view > broker-info-view .attachment-wrapper > div {
  width: var(--default-view-width);
  max-width: var(--default-view-max-width);
  margin: var(--default-view-margin);
}
body main.main-viewport main.page-view > broker-info-view .attachment-wrapper > div .btn-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 2rem 0;
  column-gap: 1rem;
}
body main.main-viewport main.page-view > broker-info-view .attachment-wrapper > div .btn-container button {
  font-weight: bolder;
  padding: 0.2rem 1.2rem;
  pointer-events: auto;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list {
  padding-top: 1rem;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list grid-table {
  color: #999;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list grid-table grid-table-row {
  grid-template-columns: 6rem 1fr 9rem 5rem 18rem;
  padding: 0 1rem;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list grid-table grid-table-col {
  padding: 0.5rem;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list grid-table grid-table-col:nth-child(1) {
  text-align: center;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list grid-table grid-table-col:nth-child(2) {
  text-align: left;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list grid-table grid-table-col:nth-child(3) {
  text-align: left;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list grid-table grid-table-col:nth-child(4) {
  text-align: center;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list grid-table grid-table-col:nth-child(5) {
  text-align: left;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list grid-table input {
  width: 100%;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list .serial-number {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 5px;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list .serial-number button {
  font-size: 0.6rem;
  color: #555;
  background: #FFF;
  border: 1px solid #AAA;
  border-radius: 5px;
  cursor: pointer;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list .serial-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 5px;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list .serial-status.valid {
  color: #0A0;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list .serial-status.used .used-date {
  font-size: 0.7rem;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list .serial-comment {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 5px;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list .serial-comment button {
  color: #555;
  background: #FFF;
  border: 1px solid #AAA;
  border-radius: 5px;
  cursor: pointer;
}
body main.main-viewport main.page-view > broker-info-view broker-serial-list .serial-comment button:disabled {
  color: #999;
}
body main.main-viewport main.page-view > broker-info-view broker-management {
  padding-top: 1rem;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table {
  color: #999;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-row {
  grid-template-columns: 7rem 1fr 1.5fr 4rem 7rem 7rem 6rem;
  padding: 0 1rem;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-col {
  padding: 0.5rem;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-col:nth-child(1) {
  text-align: center;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-col:nth-child(2) {
  text-align: left;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-col:nth-child(3) {
  text-align: left;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-col:nth-child(4) {
  text-align: center;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-col:nth-child(5) {
  text-align: center;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-col:nth-child(6) {
  text-align: center;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-col:nth-child(7) {
  text-align: center;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-col:nth-child(7) [data-role=inspect] {
  color: #00A;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table grid-table-col:nth-child(7) [data-role=delete] {
  color: #A00;
}
body main.main-viewport main.page-view > broker-info-view broker-management grid-table input {
  width: 100%;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list {
  padding: 1rem;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: nowrap;
  column-gap: 1rem;
  margin-bottom: 2rem;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel .filter-option {
  width: 12rem;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel .filter-option label {
  display: block;
  width: 100%;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel .filter-option select, body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel .filter-option input[type=text] {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 2.2rem;
  padding: 0 1rem;
  border: 1px solid #AAA;
  border-radius: 0.5rem;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel .value-display span {
  line-height: 2rem;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel .value-display button {
  cursor: pointer;
  border: 1px solid #AAA;
  height: 2.2rem;
  border-radius: 0.5rem;
  color: #000;
  background: #FFF;
  padding: 0 1rem;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel .value-display button.rounded {
  border-radius: 2.2rem;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel .value-display button:hover {
  background: #EEE;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel .value-display button:disabled {
  cursor: not-allowed;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .filter-panel .padding {
  margin-left: auto;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table {
  color: #999;
  border-bottom: 1px solid #000;
  margin-bottom: 1rem;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-head grid-table-row {
  border-bottom: 1px solid #000;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-head grid-table-row grid-table-col {
  color: #000;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-row {
  grid-template-columns: 4rem 17rem 7rem 4rem 1fr 8rem 6rem;
  padding: 0 1rem;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-col {
  padding: 0.5rem;
  color: #555;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-col:nth-child(1) {
  text-align: center;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-col:nth-child(2) {
  text-align: left;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-col:nth-child(3) {
  text-align: left;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-col:nth-child(4) {
  text-align: center;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-col:nth-child(5) {
  text-align: left;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-col:nth-child(6) {
  text-align: left;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list grid-table grid-table-col:nth-child(7) {
  text-align: left;
}
body main.main-viewport main.page-view > broker-info-view referred-order-list .paging-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

body.mobile-mode main.main-viewport main.page-view > broker-info-view {
  width: calc(100% - 2rem);
  min-width: unset;
  margin: 0 1rem;
}

broker-profile-info {
  padding: 1rem 1rem 0;
}
broker-profile-info .upper {
  display: grid;
  grid-template-columns: 1fr 20rem;
  column-gap: 2rem;
}
broker-profile-info .upper .highlight-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  font-weight: bolder;
}
broker-profile-info .upper .highlight-info .date-info {
  padding: 0.5rem 1rem;
  font-size: 1.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #70AAB7;
}
broker-profile-info .upper .highlight-info .price-info {
  display: flex;
  flex-wrap: nowrap;
  padding: 0.5rem;
  border: 2px solid #70AAB7;
  border-top: none;
}
broker-profile-info .upper .highlight-info .price-info .desc {
  flex-grow: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}
broker-profile-info .upper .highlight-info .price-info .price {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #1464B3;
}
broker-profile-info .upper .highlight-info .price-info .price span {
  line-height: 1em;
  border-bottom: 2px solid #1464B3;
}
broker-profile-info .upper .highlight-info .price-info .unit {
  flex-grow: 2;
  font-size: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center;
}
broker-profile-info .highlight-info .date-info span:nth-child(1) {
  display: none;
}
broker-profile-info .highlight-info[data-user-role=broker] .date-info span:nth-child(1) {
  display: block;
}
broker-profile-info .highlight-info[data-user-role=broker] .date-info span:nth-child(2) {
  display: none;
}
broker-profile-info .highlight-info[data-user-role=normal] .price-info {
  opacity: 0;
}
broker-profile-info .refer-state .g-table .g-trow {
  grid-template-columns: 7rem 1fr 8rem 20rem;
}
broker-profile-info .refer-state .g-table .g-trow .g-tcol {
  padding: 0.2rem 0.5rem;
}
broker-profile-info .refer-state .g-table .g-trow .g-tcol:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
broker-profile-info .dealer-info *:first-child .fa {
  display: none;
  color: #BBB;
}
broker-profile-info .dealer-info *:first-child.collapsable {
  display: flex;
  align-items: cneter;
  column-gap: 0.5rem;
  cursor: pointer;
}
broker-profile-info .dealer-info *:first-child.collapsable:not(.expanded) .arrow-up {
  display: block;
}
broker-profile-info .dealer-info *:first-child.collapsable.expanded .arrow-down {
  display: block;
}
broker-profile-info .dealer-info *:first-child.collapsable ~ .advanced-broker-content {
  display: none;
}
broker-profile-info .dealer-info *:first-child.collapsable.expanded ~ .advanced-broker-content {
  display: block;
}
broker-profile-info .dealer-info .advanced-broker-content .broker-content, broker-profile-info .dealer-info .advanced-broker-content .invite-content {
  display: none;
}
broker-profile-info .dealer-info .advanced-broker-content .invite-content {
  line-height: 1.8rem;
}
broker-profile-info .dealer-info .advanced-broker-content .invite-content img {
  width: 100%;
}
broker-profile-info .dealer-info .advanced-broker-content[data-user-role=broker] .broker-content {
  display: block;
}
broker-profile-info .dealer-info .advanced-broker-content[data-user-role=normal] .invite-content {
  display: block;
}

body.mobile-mode broker-profile-info {
  width: 100%;
  min-width: unset;
  padding: 1rem 0;
}
body.mobile-mode broker-profile-info .upper {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 1rem;
}
body.mobile-mode broker-profile-info .upper ol {
  margin-bottom: 0;
}
body.mobile-mode broker-profile-info .upper div:nth-child(2) {
  margin-bottom: 1rem;
}
body.mobile-mode broker-profile-info .upper div:nth-child(2) .price-info {
  margin-bottom: 0;
}
body.mobile-mode broker-profile-info .refer-state .g-thead {
  display: none;
}
body.mobile-mode broker-profile-info .refer-state .g-trow {
  display: block;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.2rem;
  margin-bottom: 0.5rem;
}
body.mobile-mode broker-profile-info .refer-state .g-trow .g-tcol {
  display: grid;
  grid-template-columns: 5rem 1fr;
}
body.mobile-mode broker-profile-info .refer-state .g-trow .g-tcol span:first-child {
  text-align: justify;
  font-weight: bold;
}
body.mobile-mode broker-profile-info .refer-state .g-trow.g-trow-span .g-tcol {
  display: block;
}

body main.main-viewport main.page-view > broker-invite-view {
  display: block;
  width: 1100px;
  max-width: 1100px;
  padding: 2rem 0 4rem;
}
body main.main-viewport main.page-view > broker-invite-view img {
  width: 100%;
}
body main.main-viewport main.page-view > broker-invite-view .content {
  line-height: 1.8rem;
}

body.mobile-mode main.main-viewport main.page-view > broker-invite-view {
  width: 100%;
  min-width: unset;
}

body main.main-viewport main.page-view > edu-view {
  display: block;
  width: 100%;
  height: calc(100vh - 174px - 2rem);
  overflow: hidden;
  margin-bottom: 2rem;
  color: var(--text-color);
}
body main.main-viewport main.page-view > edu-view .section {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  height: 100%;
  padding: 0.7rem;
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid #D6D6D6;
  border-radius: 5px;
}
body main.main-viewport main.page-view > edu-view .section .menu {
  overflow: auto;
  padding: 0;
  border-right: 2px solid #D6D6D6;
}
body main.main-viewport main.page-view > edu-view .section .menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body main.main-viewport main.page-view > edu-view .section .menu ul ul {
  margin-left: 1rem;
}
body main.main-viewport main.page-view > edu-view .section .menu ul li > a {
  display: block;
  text-decoration: none;
  cursor: pointer;
  color: var(--text-color);
  line-height: 1.5em;
  white-space: nowrap;
  word-break: keep-all;
}
body main.main-viewport main.page-view > edu-view .section .menu ul li > a.active {
  color: var(--text-color-dark);
}
body main.main-viewport main.page-view > edu-view .section .menu > ul {
  padding: 0.5rem 1rem;
}
body main.main-viewport main.page-view > edu-view .section .viewport {
  overflow: hidden;
}
body main.main-viewport main.page-view > edu-view .section .viewport iframe {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
}

footer-view {
  display: block;
}

body main.main-viewport main.page-view > home-view {
  display: block;
  max-width: unset;
}
body main.main-viewport main.page-view > home-view .super-hide {
  display: none !important;
}
body main.main-viewport main.page-view > home-view .row.statistics-values {
  border: 1px solid #96A6B2;
  border-radius: 10px;
  padding: 1rem 0;
}
body main.main-viewport main.page-view > home-view .row.statistics-values .text-muted {
  margin-bottom: 0;
}
body main.main-viewport main.page-view > home-view .row.statistics-values .col {
  padding: 0;
}
body main.main-viewport main.page-view > home-view .logo-btn-start {
  padding: 8px 1.5rem !important;
}
body main.main-viewport main.page-view > home-view .logo-btn-start .slogan {
  bottom: 0;
  top: -5px;
  right: 20px;
}
body main.main-viewport main.page-view > home-view .logo-btn-start img {
  width: 120px;
}
body main.main-viewport main.page-view > home-view .feature-blocks .col.active-col {
  background: linear-gradient(148deg, var(--text-color) 0%, rgba(0, 71, 103, 0.5) 86%);
}
body main.main-viewport main.page-view > home-view #slideshow {
  margin-top: unset;
}
body main.main-viewport main.page-view > home-view #slideshow .carousel-inner {
  top: 0;
}
body main.main-viewport main.page-view > home-view .marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100vw;
  overflow: hidden;
}
body main.main-viewport main.page-view > home-view .marquee {
  display: inline-block;
  animation: marquee 20s linear infinite;
  font-size: 1.5rem;
  color: #F00;
}
body main.main-viewport main.page-view > home-view .marquee div {
  display: inline-block;
  margin-right: 50px; /* 每段之間的間距 */
}
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

live-market-info {
  display: block;
  width: 100%;
}

body > loading-overlay {
  display: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}
body > loading-overlay .loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

login-dialog .description {
  font-size: 1.2rem;
  padding: 1.5rem 2rem;
  color: #999999;
  line-height: 1.8rem;
}
login-dialog .login-container {
  margin: 2rem 0;
}
login-dialog .login-container > div {
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
login-dialog .login-container > div .btn-okx-login {
  width: 183px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  background: #FFF;
  border-radius: 0.25rem;
  border: 1px solid #747775;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.3rem;
}
login-dialog .login-container > div .btn-okx-login:hover {
  background: #EFEFEF;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
login-dialog .login-container > div .btn-okx-login .okx-logo {
  --logo-size:1.5rem;
}
login-dialog .login-container > div .btn-okx-login .btn-text {
  color: #000;
  line-height: 1.5rem;
  text-align: left;
}
login-dialog .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.3rem;
}

main-nav {
  display: block;
  width: 100%;
}
main-nav a.navbar-brand {
  cursor: pointer;
}
main-nav a.navbar-brand img {
  width: 135px;
}
main-nav ul.navbar-nav li.nav-item a.nav-link {
  font-size: 1.2em;
  font-weight: bolder;
  color: var(--text-color);
  cursor: pointer;
}
main-nav ul.navbar-nav li.nav-item.active a.nav-link {
  color: #347b6a;
  text-decoration: underline;
}
main-nav div.optional-link {
  display: grid !important;
  grid-template-columns: auto auto;
}
main-nav div.optional-link.logged-in {
  grid-template-columns: 10rem auto;
}
main-nav div.optional-link a.display-name {
  font-size: 1.2em;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}
main-nav div.optional-link a.display-name i.fa-user-plus {
  display: none;
}
main-nav div.optional-link a.display-name.invitee i.fa-user {
  display: none;
}
main-nav div.optional-link a.display-name.invitee i.fa-user-plus {
  display: block;
}

#mobile-navbar {
  margin-bottom: 2rem !important;
}
#mobile-navbar .nav-item {
  display: block;
  width: 100%;
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  background-color: #FFF;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  margin-bottom: 1rem;
}
#mobile-navbar .nav-item:last-child {
  margin-bottom: 0;
}
#mobile-navbar .nav-item a {
  padding: 0.7rem 1.4rem;
  color: var(--text-color);
  text-decoration: none;
}
#mobile-navbar ~ a.btn {
  margin-top: 0 !important;
}

.mobile-mode header.navbar .btn-mobile-navbar i {
  font-size: 1.4rem;
}
.mobile-mode header.navbar .btn-mobile-navbar.expanded {
  z-index: 999999;
  background: var(--bs-red);
  border: none;
}
.mobile-mode header.navbar .btn-mobile-navbar.expanded i {
  color: #FFF;
}
.mobile-mode header.navbar .btn-mobile-navbar.expanded i:first-child {
  display: none;
}
.mobile-mode header.navbar .btn-mobile-navbar.expanded i:last-child {
  display: block;
}
.mobile-mode header.navbar .btn-mobile-navbar i:first-child {
  display: block;
}
.mobile-mode header.navbar .btn-mobile-navbar i:last-child {
  display: none;
}

order-delete-dialog.overlay-wrapper .dialog {
  padding: 2rem;
  width: 450px;
}
order-delete-dialog .description {
  padding: 1.5rem 2rem;
  color: #999999;
  line-height: 1.3rem;
}
order-delete-dialog .confirm-msg {
  padding: 0 2rem 1.5rem;
  color: #A00;
}
order-delete-dialog .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
order-delete-dialog .btn-container:last-child {
  margin-bottom: 0;
}

body.mobile-mode order-delete-dialog .dialog {
  width: calc(100% - 2rem);
  padding: 2rem 0 0;
}
body.mobile-mode order-delete-dialog tab-list tab-item {
  font-size: 1rem;
}
body.mobile-mode order-delete-dialog .description {
  padding: 1rem;
}
body.mobile-mode order-delete-dialog .confirm-msg {
  text-align: center;
}
body.mobile-mode order-delete-dialog .btn-container {
  padding-bottom: 1rem;
}

order-pay-dialog {
  --viewport-padding:.5rem;
}
order-pay-dialog .dialog.pay-dialog {
  padding: 2rem;
  width: 900px;
  position: relative;
}
order-pay-dialog .dialog.pay-dialog .content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
  padding: 1rem 0 1rem;
}
order-pay-dialog .section-label {
  font-size: 1.1rem;
  font-weight: bolder;
}
order-pay-dialog .order-info {
  margin: 0 2rem;
}
order-pay-dialog .order-info .order-info-desc {
  display: flex;
  align-items: center;
  justify-content: center;
}
order-pay-dialog .order-info .order-info-desc ul.order-content {
  padding: 1rem 1rem;
  margin: 0;
}
order-pay-dialog .order-info .order-info-desc ul.order-content li {
  list-style: none;
  margin-bottom: 0.5rem;
}
order-pay-dialog .order-info .order-info-desc ul.order-content li:last-child {
  margin-bottom: 0;
}
order-pay-dialog .order-info .order-info-desc ul.order-content li .label {
  font-size: 1.1rem;
  font-weight: bolder;
  color: #AAA;
}
order-pay-dialog .order-info .order-info-desc ul.order-content li .content {
  font-size: 1rem;
  padding-left: 1.5rem;
  font-weight: bolder;
}
order-pay-dialog .pay-info .method-selector .order-info-label {
  margin-bottom: 0.5rem;
}
order-pay-dialog .pay-info .method-selector select {
  cursor: pointer;
  width: 100%;
  height: 2rem;
  text-align: center;
}
order-pay-dialog .pay-info .method-selector .noti-text {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: #FEF9EE;
  font-weight: bolder;
}
order-pay-dialog .pay-info .method-selector .noti-text i {
  color: #F3B443;
}
order-pay-dialog .pay-info .method-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}
order-pay-dialog .pay-info .method-content .option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
order-pay-dialog .pay-info .method-content .option.hide {
  display: none;
}
order-pay-dialog .pay-info .method-content .option .item {
  height: 10rem;
}
order-pay-dialog .pay-info .method-content .option .item:not(.image) {
  display: grid;
  grid-template-columns: 1fr 6rem;
  column-gap: 0.5rem;
  align-items: center;
  width: 100%;
}
order-pay-dialog .pay-info .method-content .option .item.image, order-pay-dialog .pay-info .method-content .option .item .image {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
order-pay-dialog .pay-info .method-content .option .item.image {
  width: 13rem;
}
order-pay-dialog .pay-info .method-content .option .item .image {
  width: 6rem;
  height: 6rem;
}
order-pay-dialog .pay-info .method-content .option .item textarea {
  --comp-height:5rem;
  display: block;
  width: 100%;
  height: var(--comp-height);
  max-height: var(--comp-height);
  min-height: var(--comp-height);
  font-size: 1rem;
  padding: 0.5rem;
}
order-pay-dialog .pay-info .method-content .option .item .addr-copy {
  font-size: 0.8rem;
  cursor: pointer;
}
order-pay-dialog .payment-info {
  padding: 0 0 1rem 2rem;
}
order-pay-dialog .payment-info .section-label {
  margin-bottom: 0.5rem;
}
order-pay-dialog .payment-info .input-info label {
  display: block;
  font-size: 1rem;
  font-weight: bolder;
  margin-bottom: 0.5rem;
  color: #AAA;
}
order-pay-dialog .payment-info .input-info input, order-pay-dialog .payment-info .input-info select {
  height: 2rem;
  font-size: 1rem;
}
order-pay-dialog .payment-info .input-info .okx-payment-info {
  margin-bottom: 0.5rem;
}
order-pay-dialog .payment-info .input-info .okx-payment-info input {
  width: 100%;
}
order-pay-dialog .payment-info .input-info .chain-payment-info .chain-info {
  display: grid;
  grid-template-columns: 10rem 1fr auto;
  column-gap: 0.5rem;
}
order-pay-dialog .payment-info .input-info .chain-payment-info .chain-info select {
  cursor: pointer;
  text-align: center;
}
order-pay-dialog .payment-info .input-info .chain-payment-info .chain-info .op-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 0.5rem;
}
order-pay-dialog .payment-info .input-info .chain-payment-info .chain-info .op-buttons button {
  border-radius: 0.5rem;
  height: 2rem;
  min-width: 0;
  padding: 1rem;
}
order-pay-dialog .payment-info ul.txn-hist {
  --item-margin: .3rem;
  display: block;
  padding: 0;
  margin: 0.5rem 0.5rem;
}
order-pay-dialog .payment-info ul.txn-hist li.txn-info-desktop {
  display: grid;
  column-gap: 0.3rem;
  grid-template-columns: 5rem 1fr 8rem;
  align-items: center;
  font-size: 0.8rem;
  color: #999;
  margin-bottom: var(--item-margin);
}
order-pay-dialog .payment-info ul.txn-hist li.txn-info-desktop .txn-id {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 5px;
}
order-pay-dialog .payment-info ul.txn-hist li.txn-info-desktop .txn-id div {
  overflow: hidden;
  text-overflow: ellipsis;
}
order-pay-dialog .payment-info ul.txn-hist li.txn-info-desktop .txn-status.is-error {
  color: #A00;
}
order-pay-dialog .payment-info ul.txn-hist li.txn-info-desktop .txn-status.is-ok {
  color: #0A0;
}
order-pay-dialog button {
  border: 1px solid #000;
}
order-pay-dialog .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
order-pay-dialog .btn-container:last-child {
  margin-bottom: 0;
}

.mobile-mode order-pay-dialog .dialog {
  width: calc(100% - 2rem);
  padding: 1rem;
}
.mobile-mode order-pay-dialog .dialog .body {
  padding: 1rem;
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper {
  display: block;
  padding: 0;
  border-bottom: 2px solid var(--text-color);
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper .order-info {
  margin: 0;
  padding-bottom: 2rem;
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper .order-info .order-info-desc {
  display: block;
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper .pay-info {
  margin-bottom: 1.3rem;
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper .pay-info .option[data-rel=none] {
  display: none;
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper .pay-info .option .item {
  display: flex;
  flex-direction: column-reverse;
  height: unset;
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper .pay-info .option .item .addr-info {
  width: 100%;
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper .pay-info .option .item .addr-info label {
  font-size: 1.2rem;
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper .pay-info .option .item .addr-info textarea {
  font-size: 1.1rem;
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper .pay-info .option .item .addr-info .addr-copy {
  margin-top: 0.5rem;
  display: block;
  width: 100%;
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  background-color: var(--text-color);
  color: #FFF;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  padding: 0.7rem 1.4rem;
  font-size: 1.2rem;
}
.mobile-mode order-pay-dialog .dialog .body .content-wrapper .pay-info .option .item .image {
  width: 80%;
  padding-top: 80%;
  margin-bottom: 1rem;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info {
  padding: 1.3rem 0 0;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info .input-info {
  margin-bottom: 2rem;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info .input-info .chain-info {
  display: block;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info .input-info .chain-info select {
  display: block;
  margin-bottom: 0.5rem;
  width: 100%;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info .input-info .chain-info input[type=text] {
  display: block;
  margin-bottom: 0.5rem;
  width: 100%;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info .input-info .chain-info textarea {
  display: block;
  margin-bottom: 0.5rem;
  width: 100%;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info .input-info .chain-info .op-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 0.5rem;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info ul.txn-hist > li.txn-info-mobile {
  display: grid;
  grid-template-columns: 8rem 1fr;
  column-gap: 0.5rem;
  margin-bottom: 1rem;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info ul.txn-hist > li.txn-info-mobile:last-child {
  margin-bottom: 0;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info ul.txn-hist > li.txn-info-mobile > div:first-child > div:first-child {
  display: flex;
  column-gap: 0.5rem;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info ul.txn-hist > li.txn-info-mobile > div:first-child > div:last-child {
  display: flex;
  justify-content: flex-end;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info ul.txn-hist > li.txn-info-mobile .txn-id {
  word-break: break-all;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info ul.txn-hist > li.txn-info-mobile .txn-status {
  border-bottom: 1px solid var(--bs-body-color);
}
.mobile-mode order-pay-dialog .dialog .body .payment-info ul.txn-hist > li.txn-info-mobile .txn-status.is-error {
  color: #A00;
  border-bottom-color: #A00;
}
.mobile-mode order-pay-dialog .dialog .body .payment-info ul.txn-hist > li.txn-info-mobile .txn-status.is-ok {
  color: #0A0;
  border-bottom-color: #0A0;
}

personal-info-view {
  --base-margin:6rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  column-gap: 0.7rem;
  margin-bottom: 10rem !important;
}
personal-info-view .profile-zone {
  margin: 1rem var(--base-margin) 2rem;
  border-bottom: 2px solid var(--text-color);
}
personal-info-view .profile-zone .zone-head {
  display: flex;
  column-gap: 5px;
  border-bottom: 2px solid var(--text-color);
  padding: 0 0.5rem;
}
personal-info-view .profile-zone .zone-head .title {
  color: var(--text-color);
  padding: 0.1rem 0.5rem 0;
  text-align: right;
  cursor: default;
  background: var(--text-color);
  color: #FFF;
}
personal-info-view .profile-zone .profile-info {
  position: relative;
  padding: 2rem 1.5rem;
}
personal-info-view .profile-zone .profile-info .property-display {
  display: grid;
  grid-template-columns: 5rem 1fr;
  color: var(--text-color);
  line-height: 1em;
  margin-bottom: 0.8rem;
  column-gap: 0.5rem;
}
personal-info-view .profile-zone .profile-info .property-display i {
  cursor: pointer;
}
personal-info-view .profile-zone .profile-info .property-display span.no-op ~ i {
  display: none;
}
personal-info-view .profile-zone .profile-info .logout-btn {
  position: absolute;
  top: 2rem;
  right: 1.5rem;
}
personal-info-view .noti-conf-zone {
  margin: 1rem calc(var(--base-margin) + 1.5rem) 1.6rem;
}
personal-info-view .noti-conf-zone:last-child {
  margin-bottom: 0;
}
personal-info-view .noti-conf-zone .zone-title {
  display: flex;
  column-gap: 1rem;
  align-items: center;
  color: var(--text-color);
}
personal-info-view .noti-conf-zone .zone-title .icon {
  font-size: 1.6em;
}
personal-info-view .noti-conf-zone .zone-options {
  width: 40%;
  margin: 1.6rem 1rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.8rem;
}
personal-info-view .noti-conf-zone .zone-options label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.5rem;
  min-width: 6rem;
  font-weight: bolder;
  cursor: pointer;
}
personal-info-view .noti-conf-zone .zone-options label span {
  flex-grow: 1;
}
personal-info-view .noti-conf-zone[data-state=unbound] .zone-options {
  display: none;
}
personal-info-view .noti-conf-zone .icon {
  display: block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
personal-info-view .noti-conf-zone .icon.line-notify {
  background-image: url("/public/img/logo.line-notify.png");
}
personal-info-view .noti-conf-zone .icon.tg-notify {
  background-image: url("/public/img/logo.telegram.svg");
}
personal-info-view .noti-conf-zone button {
  display: none;
  border: none;
  border-radius: 1em;
  color: #FFF;
  background: #000;
  padding: 0.1rem 0.5rem;
}
personal-info-view .noti-conf-zone button[data-role=unbind] {
  background: #B63535;
}
personal-info-view .noti-conf-zone[data-social=line] button[data-role=bind] {
  background: #53B635;
}
personal-info-view .noti-conf-zone[data-social=tg] button[data-role=bind] {
  background: #53A6E2;
}
personal-info-view .noti-conf-zone[data-state=bound] button[data-role=unbind] {
  display: unset;
}
personal-info-view .noti-conf-zone[data-state=unbound] button[data-role=bind] {
  display: unset;
}

body.mobile-mode personal-info-view .profile-zone {
  margin: 1rem;
}
body.mobile-mode personal-info-view .profile-zone .profile-info {
  padding: 1rem 0.6rem;
}
body.mobile-mode personal-info-view .profile-zone .profile-info .logout-btn {
  position: unset;
  margin-top: 2rem;
  width: 100%;
  border-radius: 0.5rem;
}
body.mobile-mode personal-info-view .noti-conf-zone {
  margin: 1rem;
}
body.mobile-mode personal-info-view .noti-conf-zone .zone-options {
  width: unset;
  justify-content: space-between;
  row-gap: 0.3rem;
}

body main.main-viewport > rwd-barricade-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #66A5B0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body main.main-viewport > rwd-barricade-overlay:hide {
  display: none;
}
body main.main-viewport > rwd-barricade-overlay .center-wrapper {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}
body main.main-viewport > rwd-barricade-overlay .center-wrapper .icon {
  width: calc(30vw + 2rem);
  height: calc(30vw + 2rem);
  border-radius: 100%;
  overflow: hidden;
  background: #FFF;
}
body main.main-viewport > rwd-barricade-overlay .center-wrapper .icon .logo {
  margin: 1rem;
  width: 30vw;
  height: 30vw;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #FFF;
  background-image: url("/public/img/logo-no-text.png");
}
body main.main-viewport > rwd-barricade-overlay .center-wrapper .message {
  margin-top: 1rem;
  color: #FFF;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
}
body main.main-viewport > rwd-barricade-overlay .center-wrapper .message label {
  font-size: 1.1em;
  font-weight: 900;
}

social-bind-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
social-bind-view .view-area {
  border: 2px solid #D6D6D6;
  padding: 0.5rem;
  width: 500px;
  margin: 1rem auto 2rem;
  border-radius: 0.8rem;
  background: #FFF;
}
social-bind-view .view-area .title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1.3rem;
  color: #000;
  text-decoration: underline;
}
social-bind-view .view-area .content {
  padding: 0 2rem 2rem;
}
social-bind-view .view-area .content .desc {
  display: none;
  font-size: 1rem;
  color: #AAA;
  text-align: center;
}
social-bind-view .view-area .content .desc .prod-name {
  color: #00A;
  font-size: 1.2rem;
}
social-bind-view .view-area .content .desc .redir-msg {
  color: #A00;
  font-size: 0.8em;
}
social-bind-view .view-area .content .desc .redir-msg span.redir {
  cursor: pointer;
  color: #000;
}
social-bind-view .view-area .content .desc.hide {
  display: none;
}
social-bind-view .view-area .content .desc > div {
  margin-bottom: 0.5rem;
}
social-bind-view .view-area .content .desc > div:last-child {
  margin-bottom: 0;
}
social-bind-view .view-area .content.proc .desc:nth-child(1) {
  display: block;
}
social-bind-view .view-area .content.succ .desc:nth-child(2) {
  display: block;
}
social-bind-view .view-area .content.eror .desc:nth-child(3) {
  display: block;
}

sunit-control-start-dialog.overlay .dialog {
  width: 700px;
  height: 450px;
  padding: 2rem 5rem;
}
sunit-control-start-dialog.overlay .dialog .title {
  border-bottom: 0;
  padding-bottom: 3rem;
}
sunit-control-start-dialog.overlay .dialog .title .ecoin-logo {
  --width:5rem;
}
sunit-control-start-dialog.overlay .dialog .body {
  padding: 1rem;
}
sunit-control-start-dialog.overlay .dialog .body .head-line {
  font-size: 1.3rem;
  font-weight: bolder;
  color: var(--text-color);
}
sunit-control-start-dialog.overlay .dialog .body .content {
  padding: 1rem 0 3rem;
}
sunit-control-start-dialog.overlay .dialog .body .confirmations {
  padding: 0 3rem;
  font-size: 0.8rem;
  color: #A00;
  line-height: 1.5;
}
sunit-control-start-dialog.overlay .dialog .body .confirmations .confirmation {
  cursor: pointer;
  display: grid;
  align-items: flex-start;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
}
sunit-control-start-dialog.overlay .dialog .body .confirmations .confirmation input {
  margin-top: 3px;
}
sunit-control-start-dialog.overlay .dialog .body .confirmations .confirmation div {
  text-align: justify;
}
sunit-control-start-dialog.overlay .dialog .buttons {
  padding: 2rem 7rem 2rem;
}

.mobile-mode sunit-control-start-dialog .dialog {
  width: calc(100% - 2rem);
  height: unset;
  padding: 1rem;
}
.mobile-mode sunit-control-start-dialog .dialog .body {
  padding: 1rem;
}
.mobile-mode sunit-control-start-dialog .dialog .body .content {
  padding: 1rem 0;
  text-align: justify;
}
.mobile-mode sunit-control-start-dialog .dialog .body .confirmations {
  padding: 1rem 0 0;
}
.mobile-mode sunit-control-start-dialog .dialog .buttons {
  padding: 0 1rem 1rem;
  justify-content: center;
  column-gap: 0.5rem;
}

sunit-control-stop-dialog.overlay .dialog {
  width: 700px;
  padding: 2rem 5rem;
}
sunit-control-stop-dialog.overlay .dialog .title {
  border-bottom: 0;
  padding-bottom: 3rem;
}
sunit-control-stop-dialog.overlay .dialog .title .ecoin-logo {
  --width:5rem;
}
sunit-control-stop-dialog.overlay .dialog .body {
  padding: 0;
}
sunit-control-stop-dialog.overlay .dialog .body .head-line {
  font-size: 1.3rem;
  font-weight: bolder;
  color: var(--text-color);
}
sunit-control-stop-dialog.overlay .dialog .body .content div.option-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 6rem 0;
  margin-bottom: 1rem;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.option-container .option {
  position: relative;
  cursor: pointer;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.option-container .option:first-child {
  margin-right: 1rem;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.option-container .option:last-child {
  margin-left: 1rem;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.option-container .option input[type=radio] {
  opacity: 0;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.option-container .option button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2.5rem;
  border: 1px solid #67A5B2;
  color: #67A5B2;
  min-width: 6rem;
  background: #FFF;
  padding: 0 1.2rem;
  font-size: 1.5rem;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.option-container .option input[type=radio]:checked + button {
  color: #FFF;
  background: #60B257;
  border-color: rgba(0, 0, 0, 0);
}
sunit-control-stop-dialog.overlay .dialog .body .content div.amount-input {
  padding: 0 6rem 2rem;
  margin-top: 1rem;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.amount-input > label {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.amount-input > .input-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.amount-input > .input-panel .head-line {
  font-size: 1.1rem;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.amount-input > .input-panel .close-input-container input[type=number] {
  display: block;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.amount-input > .max-amount-hint {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: #999;
}
sunit-control-stop-dialog.overlay .dialog .body .content div.amount-input label.checkbox-option {
  cursor: pointer;
}
sunit-control-stop-dialog.overlay .dialog .body .confirmations {
  padding: 0 3rem;
  font-size: 0.8rem;
  color: #A00;
  line-height: 1.5;
}
sunit-control-stop-dialog.overlay .dialog .body .confirmations .confirmation {
  cursor: pointer;
  display: grid;
  align-items: flex-start;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
}
sunit-control-stop-dialog.overlay .dialog .body .confirmations .confirmation input {
  margin-top: 3px;
}
sunit-control-stop-dialog.overlay .dialog .body .confirmations .confirmation div {
  text-align: justify;
}
sunit-control-stop-dialog.overlay .dialog .buttons {
  padding: 2rem 7rem 0;
}

.mobile-mode sunit-control-stop-dialog .dialog {
  width: calc(100% - 2rem);
  height: unset;
  padding: 1rem;
}
.mobile-mode sunit-control-stop-dialog .dialog .body {
  padding: 1rem;
}
.mobile-mode sunit-control-stop-dialog .dialog .body .content {
  padding: 1rem 0;
  text-align: justify;
}
.mobile-mode sunit-control-stop-dialog .dialog .body .confirmations {
  padding: 1rem 0 0;
}
.mobile-mode sunit-control-stop-dialog .dialog .buttons {
  padding: 0 1rem 1rem;
  justify-content: center;
  column-gap: 0.5rem;
}

sunit-control-view {
  --base-margin: 6rem;
  --viewport-padding:.5rem;
  position: relative;
  display: block;
  overflow-y: auto;
  padding-bottom: 3rem;
}
sunit-control-view .logo-banner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 2rem var(--base-margin);
}
sunit-control-view .top-bar {
  display: grid;
  grid-template-columns: auto 8rem;
  column-gap: 1rem;
  margin: 2rem var(--base-margin);
}
sunit-control-view .top-bar .unit-status {
  display: grid;
  grid-template-columns: 28rem 1fr;
  border: 1px solid var(--text-color);
  border-radius: 2rem;
}
sunit-control-view .top-bar .unit-status .statistics {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: bolder;
  margin: 1.5rem 0 1.5rem 1.5rem;
  border-right: 2px solid var(--text-color);
}
sunit-control-view .top-bar .unit-status .statistics .stuffing {
  flex-grow: 1;
  padding-right: 3rem;
}
sunit-control-view .top-bar .unit-status .statistics .stuffing div:nth-child(1) {
  font-size: 1rem;
}
sunit-control-view .top-bar .unit-status .statistics .stuffing div:nth-child(2) {
  padding-top: 2rem;
  font-size: 2.6rem;
  text-align: center;
  line-height: 1em;
}
sunit-control-view .top-bar .unit-status .statistics .stuffing div:nth-child(3) {
  font-weight: bolder;
  font-size: 1.8rem;
  text-align: right;
}
sunit-control-view .top-bar .unit-status .profile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 1.5rem 1.5rem 1.5rem 3rem;
  padding: 1rem 0;
  font-weight: bolder;
}
sunit-control-view .top-bar .unit-status .profile .stuffing > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.5rem;
  margin-bottom: 0.7em;
  font-size: 1.2rem;
}
sunit-control-view .top-bar .unit-status .profile .stuffing > div:last-child {
  margin-bottom: 0;
}
sunit-control-view .top-bar .unit-status .profile .stuffing > div label {
  font-weight: bolder;
}
sunit-control-view .top-bar .unit-status .profile .stuffing .expired-info {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
sunit-control-view .top-bar .unit-status .profile .stuffing .expired-info .expired-time.warning {
  color: #ce8600;
}
sunit-control-view .top-bar .unit-status .profile .stuffing .expired-info .expired-time.expired {
  color: #c40a00;
}
sunit-control-view .top-bar .unit-status .profile .stuffing .expired-info .btn-expand {
  color: #00A;
  cursor: pointer;
}
sunit-control-view .top-bar .unit-control {
  display: flex;
  align-items: center;
}
sunit-control-view .top-bar .unit-control .stuffing {
  flex-grow: 1;
}
sunit-control-view .top-bar .unit-control .stuffing > div {
  margin-bottom: 1rem;
}
sunit-control-view .top-bar .unit-control .stuffing > div:nth-child(2) {
  margin-bottom: 0.5rem;
}
sunit-control-view .top-bar .unit-control .stuffing > div:last-child {
  margin-bottom: 0;
}
sunit-control-view .top-bar .unit-control .stuffing > div button {
  margin: 0 auto;
}
sunit-control-view .top-bar .unit-control .stuffing > div button.btn-config {
  border: none;
  column-gap: 0.3rem;
}
sunit-control-view .log-panel {
  display: grid;
  grid-template-columns: 28rem 1fr;
  margin: 2rem var(--base-margin);
  border: 1px solid var(--text-color);
  border-radius: 2rem;
  position: relative;
  height: 22rem;
}
sunit-control-view .log-panel .state {
  position: absolute;
  top: 1rem;
  right: 1.3rem;
  font-size: 1.5rem;
}
sunit-control-view .log-panel .state.active {
  display: block !important;
  color: #0A0 !important;
}
sunit-control-view .log-panel .state.inactive {
  display: block !important;
  color: #A00 !important;
}
sunit-control-view .log-panel .panel {
  display: grid;
  grid-template: auto 1fr/1fr;
  overflow: hidden;
  padding: 1.5rem;
}
sunit-control-view .log-panel .panel label {
  font-weight: bolder;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
sunit-control-view .log-panel .panel ul {
  display: block;
  margin: 0;
  padding: 0;
  overflow: auto;
}
sunit-control-view .log-panel .panel ul li {
  display: grid;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: 0.5rem;
  margin: 0 0.3rem 0.2rem 0;
  font-size: 1rem;
}
sunit-control-view .log-panel .panel ul li .date {
  text-align: left;
}
sunit-control-view .log-panel .panel ul li .type {
  text-align: center;
}
sunit-control-view .log-panel .panel.trade-history {
  padding-right: 0;
}
sunit-control-view .log-panel .panel.trade-history li {
  grid-template-columns: 9rem 3rem 1fr 3rem;
}
sunit-control-view .log-panel .panel.trade-history li .profit {
  text-align: right;
}
sunit-control-view .log-panel .panel.trade-history li .unit {
  text-align: right;
}
sunit-control-view .log-panel .panel.system-history {
  padding-left: 3rem;
}
sunit-control-view .log-panel .panel.system-history li {
  grid-template-columns: 9rem 3rem 1fr;
}
sunit-control-view .log-panel .panel.system-history li .desc {
  overflow: hidden;
  word-break: break-all;
}

.mobile-mode sunit-control-view {
  --base-bleading: 2rem;
}
.mobile-mode sunit-control-view .logo-banner {
  display: none;
}
.mobile-mode sunit-control-view .top-bar {
  margin: 3rem 0 1rem;
  display: flex;
  flex-direction: column-reverse;
}
.mobile-mode sunit-control-view .top-bar .unit-control {
  display: block;
  margin: 0 var(--base-bleading) 1rem;
}
.mobile-mode sunit-control-view .top-bar .unit-control .stuffing {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-mode sunit-control-view .top-bar .unit-control .stuffing > div {
  margin-bottom: 0;
}
.mobile-mode sunit-control-view .top-bar .unit-status {
  display: block;
  margin: 0 var(--base-bleading);
}
.mobile-mode sunit-control-view .top-bar .unit-status .statistics {
  margin: 1.5rem;
  padding-bottom: 0.5rem;
  border-right: none;
  border-bottom: 2px solid var(--text-color);
}
.mobile-mode sunit-control-view .top-bar .unit-status .statistics .stuffing {
  padding-right: 0;
}
.mobile-mode sunit-control-view .top-bar .unit-status .statistics .stuffing > div:nth-child(2) {
  padding-top: 1rem;
  font-size: 2.3rem;
}
.mobile-mode sunit-control-view .top-bar .unit-status .statistics .stuffing > div:nth-child(3) {
  font-size: 1.3rem;
}
.mobile-mode sunit-control-view .top-bar .unit-status .profile {
  margin: 1.5rem;
  padding: 0;
  justify-content: center;
}
.mobile-mode sunit-control-view .top-bar .unit-status .profile .stuffing > div {
  font-size: 1rem;
}
.mobile-mode sunit-control-view .log-panel {
  display: block;
  margin: 1rem var(--base-bleading);
  height: unset;
}
.mobile-mode sunit-control-view .log-panel .panel.trade-history {
  padding: 1.5rem 1.5rem 0;
}
.mobile-mode sunit-control-view .log-panel .panel.trade-history ul {
  overflow: hidden;
}
.mobile-mode sunit-control-view .log-panel .panel.trade-history ul li {
  width: 100%;
  font-size: 0.75rem;
  grid-template-columns: 7rem 2.5rem 1fr 2.5rem;
}
.mobile-mode sunit-control-view .log-panel .panel.system-history {
  padding: 1.5rem;
}
.mobile-mode sunit-control-view .log-panel .panel.system-history ul {
  overflow: hidden;
}
.mobile-mode sunit-control-view .log-panel .panel.system-history ul li {
  width: 100%;
  font-size: 0.75rem;
  grid-template-columns: 7rem 2.5rem 1fr;
}

sunit-issue-dialog--order-list-view {
  padding: 2rem;
}
sunit-issue-dialog--order-list-view .description {
  padding-bottom: 1rem;
  color: #999999;
  line-height: 1.3rem;
}
sunit-issue-dialog--order-list-view .input-panel {
  padding: 0 var(--h-padding) 1rem;
}
sunit-issue-dialog--order-list-view .input-panel .input-grp {
  margin-bottom: 0.5rem;
}
sunit-issue-dialog--order-list-view .input-panel .input-grp label {
  display: block;
}
sunit-issue-dialog--order-list-view .input-panel .input-grp input {
  width: 100%;
}
sunit-issue-dialog--order-list-view .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
sunit-issue-dialog--order-list-view .btn-container:last-child {
  margin-bottom: 0;
}
sunit-issue-dialog--order-list-view table {
  --border-color:var(--text-color);
  width: 100%;
  border: 1px solid var(--border-color);
}
sunit-issue-dialog--order-list-view table td {
  padding: 0 0.5rem;
}
sunit-issue-dialog--order-list-view table td:nth-child(1) {
  width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
sunit-issue-dialog--order-list-view table td:nth-child(2) {
  --col-width:8rem;
  width: var(--col-width);
}
sunit-issue-dialog--order-list-view table td:nth-child(2) > div {
  width: var(--col-width);
}
sunit-issue-dialog--order-list-view table td:nth-child(2) > div .order-kind {
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
sunit-issue-dialog--order-list-view table td:nth-child(3) {
  width: 10rem;
}
sunit-issue-dialog--order-list-view table td:nth-child(4) {
  width: 10rem;
}
sunit-issue-dialog--order-list-view table td:nth-child(7) {
  width: auto;
}
sunit-issue-dialog--order-list-view table thead {
  border-bottom: 1px solid var(--border-color);
}
sunit-issue-dialog--order-list-view table tbody {
  border-bottom: 1px solid var(--border-color);
}
sunit-issue-dialog--order-list-view table tbody td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
sunit-issue-dialog--order-list-view table tbody tr:nth-child(2n+1) {
  background: #e8f4f6;
}
sunit-issue-dialog--order-list-view table tfoot td {
  text-align: right !important;
}
sunit-issue-dialog--order-list-view table .order-op-container [data-role] {
  cursor: pointer;
}
sunit-issue-dialog--order-list-view table .order-op-container [data-role=pay-order] {
  color: #00A;
}
sunit-issue-dialog--order-list-view table .order-op-container [data-role=del-order] {
  color: #A00;
}

.mobile-mode sunit-issue-dialog--order-list-view {
  padding: 1rem 0.5rem;
}
.mobile-mode sunit-issue-dialog--order-list-view .description {
  padding-bottom: 0;
}
.mobile-mode sunit-issue-dialog--order-list-view .order-list {
  margin-top: 1rem;
}
.mobile-mode sunit-issue-dialog--order-list-view .order-list .data-row {
  --vertical-padding:.5rem;
  --horizontal-padding:0;
  border-top: 1px solid var(--text-color);
  padding: var(--vertical-padding) var(--horizontal-padding);
  position: relative;
}
.mobile-mode sunit-issue-dialog--order-list-view .order-list .data-row:last-child {
  border-bottom: 1px solid var(--text-color);
}
.mobile-mode sunit-issue-dialog--order-list-view .order-list .data-row > div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  column-gap: 0.5rem;
}
.mobile-mode sunit-issue-dialog--order-list-view .order-list .data-row > div.op-container {
  display: block;
  font-size: 1.2em;
  position: absolute;
  right: var(--horizontal-padding);
  bottom: var(--vertical-padding);
}
.mobile-mode sunit-issue-dialog--order-list-view .order-list .data-row > div.op-container span[data-role=pay-order] {
  color: #00A;
}
.mobile-mode sunit-issue-dialog--order-list-view .order-list .data-row > div.op-container span[data-role=del-order] {
  color: #A00;
}
.mobile-mode sunit-issue-dialog--order-list-view .buttons {
  padding-bottom: 0;
}

sunit-issue-dialog--order-view {
  padding: 3rem 4rem;
}
sunit-issue-dialog--order-view .description {
  padding-bottom: 3rem;
  color: #999999;
  line-height: 1.3rem;
}
sunit-issue-dialog--order-view .input-panel {
  padding: 0 var(--h-padding) 1rem;
}
sunit-issue-dialog--order-view .input-panel .input-grp {
  margin-bottom: 0.5rem;
}
sunit-issue-dialog--order-view .input-panel .input-grp label {
  display: block;
}
sunit-issue-dialog--order-view .input-panel .input-grp input {
  width: 100%;
}
sunit-issue-dialog--order-view .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
sunit-issue-dialog--order-view .btn-container:last-child {
  margin-bottom: 0;
}
sunit-issue-dialog--order-view table {
  --border-color:var(--text-color);
  width: 100%;
  padding: 0 var(--h-padding);
  border: 1px solid var(--border-color);
}
sunit-issue-dialog--order-view table td {
  padding: 0 0.5rem;
}
sunit-issue-dialog--order-view table td:nth-child(1) {
  padding-left: 1rem;
  text-align: center;
}
sunit-issue-dialog--order-view table td:nth-child(2) {
  width: 20%;
}
sunit-issue-dialog--order-view table td:nth-child(3) {
  width: auto;
}
sunit-issue-dialog--order-view table td:nth-child(4) {
  width: 10rem;
}
sunit-issue-dialog--order-view table td:nth-child(5) {
  width: 10rem;
}
sunit-issue-dialog--order-view table td select {
  cursor: pointer;
  width: 100%;
  text-align: center;
}
sunit-issue-dialog--order-view table thead {
  border-bottom: 1px solid var(--border-color);
}
sunit-issue-dialog--order-view table tbody {
  border-bottom: 1px solid var(--border-color);
}
sunit-issue-dialog--order-view table tbody td {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
sunit-issue-dialog--order-view table tfoot td {
  text-align: right !important;
}
sunit-issue-dialog--order-view .confirmations {
  font-size: 0.8rem;
  color: #A00;
  line-height: 1.5;
}
sunit-issue-dialog--order-view .confirmations .confirmation {
  cursor: pointer;
  display: grid;
  align-items: flex-start;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
}
sunit-issue-dialog--order-view .confirmations .confirmation input {
  margin-top: 3px;
}
sunit-issue-dialog--order-view .confirmations .confirmation div {
  text-align: justify;
}

.mobile-mode sunit-issue-dialog--order-view {
  padding: 1rem 0.5rem;
}
.mobile-mode sunit-issue-dialog--order-view .description {
  padding-bottom: 1rem;
}
.mobile-mode sunit-issue-dialog--order-view .mobile-panel .product-info {
  padding: 1rem;
}
.mobile-mode sunit-issue-dialog--order-view .mobile-panel .product-info > div {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  column-gap: 0.5rem;
  padding: 1rem 0;
}
.mobile-mode sunit-issue-dialog--order-view .mobile-panel .product-info > div > div:nth-child(1) {
  text-align: center;
}
.mobile-mode sunit-issue-dialog--order-view .mobile-panel .product-info > div > div:nth-child(2) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
}
.mobile-mode sunit-issue-dialog--order-view .mobile-panel .product-info .product-select select {
  width: 100%;
}
.mobile-mode sunit-issue-dialog--order-view .mobile-panel .price-info {
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem;
}
.mobile-mode sunit-issue-dialog--order-view .mobile-panel .price-info > div {
  border-bottom: 1px solid var(--text-color);
}

sunit-issue-dialog .dialog {
  padding: 2rem;
  width: 1024px;
}
sunit-issue-dialog .dialog .title {
  border-bottom: 0;
  font-size: 2rem;
}
sunit-issue-dialog .dialog tab-list tab-item {
  font-size: 0.8rem;
}

.mobile-mode sunit-issue-dialog .dialog {
  width: calc(100% - 2rem);
  padding: 2rem 0 0;
}
.mobile-mode sunit-issue-dialog tab-list tab-item {
  font-size: 1rem;
}

sunit-list-view {
  --base-margin: 8rem;
  display: block;
}
sunit-list-view .status-zone {
  position: relative;
  margin: 2rem calc(var(--base-margin) + 2rem) 0;
}
sunit-list-view .status-zone .ecoin-logo {
  position: absolute;
  top: 0;
  right: 0;
}
sunit-list-view .status-zone .summary-overview {
  font-weight: bolder;
  margin-top: 2rem;
}
sunit-list-view .status-zone .summary-overview > div {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
sunit-list-view .status-zone .summary-overview > div:last-child {
  margin-bottom: 0;
}
sunit-list-view .status-zone .summary-overview > div.curr-total-assets {
  margin-right: 8rem;
  font-weight: bolder;
}
sunit-list-view .status-zone .summary-overview > div.curr-total-assets > *:nth-child(1) {
  align-self: flex-start;
}
sunit-list-view .status-zone .summary-overview > div.curr-total-assets .wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: 0.5rem;
  flex-grow: 1;
}
sunit-list-view .status-zone .summary-overview > div.curr-total-assets .wrapper > *:nth-child(1) {
  line-height: 1em;
  padding: 3rem 0 0;
  flex-grow: 1;
  font-size: 5rem;
  text-align: center;
}
sunit-list-view .status-zone .summary-overview > div.curr-total-assets .wrapper > *:nth-child(2) {
  align-self: flex-end;
  font-size: 1.2em;
}
sunit-list-view .status-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 1rem;
  font-size: 1.2rem;
  line-height: 1em;
  border-bottom: 5px solid var(--text-color);
  margin: 1rem var(--base-margin) 1.5rem;
  padding-bottom: 0.6rem;
}
sunit-list-view .status-bar > * {
  font-weight: bolder;
  padding: 0.2rem 0;
}
sunit-list-view .status-bar > *.disabled-count {
  color: #EC6E68;
}
sunit-list-view .status-bar > *.enabled-count {
  color: #0A0;
}
sunit-list-view .status-bar > *.stuffing {
  width: 1rem;
}
sunit-list-view .status-bar > *.counter {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
sunit-list-view .sunit-list {
  --gap-size:.5rem;
  margin: 1rem var(--base-margin) 1rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap-size);
  row-gap: var(--gap-size);
}
sunit-list-view .sunit-list .sunit-item {
  position: relative;
  font-weight: bolder;
  width: calc((100% - var(--gap-size)) / 2);
  padding: 1rem 3rem 1rem 1rem;
  border: 1px solid var(--text-color);
  border-radius: 1.5rem;
}
sunit-list-view .sunit-list .sunit-item .link-icon {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  line-height: 1em;
  font-size: 1.5rem;
  color: var(--text-color);
  cursor: pointer;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div {
  --item-gap:.5rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: var(--item-gap);
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div:last-child {
  margin-bottom: 0;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.total-invested-assets {
  margin-bottom: 0.8rem;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.total-invested-assets > *:nth-child(2) {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--item-gap);
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.total-invested-assets > *:nth-child(3) {
  display: none;
  margin-right: 3rem;
  font-size: 1em;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.curr-total-assets {
  margin-bottom: 0.8rem;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.curr-total-assets > *:nth-child(1) {
  align-self: flex-start;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.curr-total-assets > *:nth-child(2) {
  flex-grow: 1;
  text-align: center;
  margin-top: 0.8rem;
  line-height: 1em;
  font-size: 2em;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.curr-total-assets > *:nth-child(3) {
  line-height: 1em;
  align-self: flex-end;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.expired-date .expired-info {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.expired-date .expired-info .expired-time.warning {
  color: #ce8600;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.expired-date .expired-info .expired-time.expired {
  color: #c40a00;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.expired-date .expired-info .btn-expand {
  color: #00A;
  cursor: pointer;
}
sunit-list-view .sunit-list .sunit-item .trading-states > div.expired-date .expired-info .btn-delete {
  color: #A00;
  cursor: pointer;
}
sunit-list-view .sunit-list .sunit-item.active .active-state {
  display: block !important;
  color: #0A0 !important;
}
sunit-list-view .sunit-list .sunit-item.inactive .active-state {
  display: block !important;
  color: #A00 !important;
}
sunit-list-view .sunit-list.empty .sunit-item {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 8rem 0;
}
sunit-list-view .sunit-list.empty .sunit-item label {
  font-size: 2rem;
  line-height: 1em;
  color: #007458;
  margin: 0 0 1.2rem;
}
sunit-list-view .sunit-list.empty .sunit-item .desc {
  color: #AAA;
  line-height: 1.3em;
  font-size: 1.2rem;
  text-align: center;
}
sunit-list-view .op-buttons {
  margin: 1rem var(--base-margin) 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
sunit-list-view .op-buttons button {
  font-weight: bold;
  border-width: 2px;
}

.mobile-mode sunit-list-view {
  --base-bleading:2rem;
}
.mobile-mode sunit-list-view .ecoin-logo {
  display: none;
}
.mobile-mode sunit-list-view .status-zone {
  margin: 4rem var(--base-bleading) 1rem;
}
.mobile-mode sunit-list-view .status-zone .summary-overview {
  margin: 0;
}
.mobile-mode sunit-list-view .status-zone .summary-overview .curr-total-assets {
  display: block;
  margin-right: 0;
}
.mobile-mode sunit-list-view .status-zone .summary-overview .curr-total-assets .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 4rem;
}
.mobile-mode sunit-list-view .status-zone .summary-overview .curr-total-assets .wrapper > *:nth-child(1) {
  padding: 1rem 0 0;
  font-size: 3rem;
}
.mobile-mode sunit-list-view .status-bar {
  margin: 0 var(--base-bleading);
  justify-content: center;
}
.mobile-mode sunit-list-view .sunit-list {
  margin: 1rem var(--base-bleading);
  display: block;
}
.mobile-mode sunit-list-view .sunit-list .sunit-item {
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
}
.mobile-mode sunit-list-view .sunit-list .sunit-item:last-child {
  margin-bottom: 0;
}
.mobile-mode sunit-list-view .sunit-list .sunit-item .trading-states > div {
  font-size: 1rem;
}
.mobile-mode sunit-list-view .sunit-list .sunit-item .trading-states > div.total-invested-assets {
  padding-right: 2rem;
}
.mobile-mode sunit-list-view .sunit-list .sunit-item .trading-states > div.total-invested-assets .active-state {
  margin: 0;
}
.mobile-mode sunit-list-view .op-buttons {
  margin: 1rem var(--base-bleading);
  justify-content: center;
}

okx-sunit-config-tab {
  --template-layout:6rem 1fr;
}
okx-sunit-config-tab .description .info {
  display: grid;
  grid-template-columns: var(--template-layout);
  column-gap: 0.5rem;
  margin-bottom: 0.5rem;
}
okx-sunit-config-tab .description .info:last-child {
  margin-bottom: 0;
}
okx-sunit-config-tab .input-grp {
  display: grid;
  grid-template-columns: var(--template-layout);
  column-gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}
okx-sunit-config-tab .input-grp label {
  display: block;
}
okx-sunit-config-tab .input-grp input {
  width: 100%;
}
okx-sunit-config-tab .confirm-wrapper {
  padding: 1rem 6rem;
  font-size: 0.8rem;
  color: #A00;
  line-height: 1.5;
}
okx-sunit-config-tab .confirm-wrapper .confirm-option {
  cursor: pointer;
  display: grid;
  align-items: flex-start;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
}
okx-sunit-config-tab .confirm-wrapper .confirm-option input {
  margin-top: 3px;
}
okx-sunit-config-tab .btn-container {
  display: flex;
  justify-content: space-evenly;
}

.mobile-mode okx-sunit-config-tab .description {
  padding: 1.5rem 1rem;
}
.mobile-mode okx-sunit-config-tab .trade-info-inputs {
  padding: 0 1.5rem 1rem;
}
.mobile-mode okx-sunit-config-tab .noti-text {
  padding: 0 2rem 1rem;
  font-size: 0.9rem;
}
.mobile-mode okx-sunit-config-tab .confirm-wrapper {
  padding: 1rem 1rem;
}

sunit-setup-dialog .dialog {
  padding: 2rem;
  width: 950px;
}
sunit-setup-dialog .dialog .title {
  border-bottom: 0;
}
sunit-setup-dialog .dialog .tab-list {
  display: flex;
  column-gap: 5px;
  border-bottom: 2px solid var(--text-color);
  padding: 0 0.5rem;
  font-size: 0.8rem;
}
sunit-setup-dialog .dialog .tab-list > .tab-item {
  cursor: pointer;
  color: var(--text-color);
  padding: 0.1rem 0.5rem 0;
}
sunit-setup-dialog .dialog .tab-list > .tab-item.active {
  cursor: default;
  background: var(--text-color);
  color: #FFF;
}
sunit-setup-dialog .dialog .view-container .tab-view {
  display: none;
}
sunit-setup-dialog .dialog .view-container .tab-view.active {
  display: block;
}
sunit-setup-dialog .init-options {
  padding: 1.5rem 3rem;
}
sunit-setup-dialog .init-options > div {
  margin-bottom: 1.5rem;
}
sunit-setup-dialog .init-options > div:last-child {
  margin-bottom: 0;
}
sunit-setup-dialog .init-options > div > label {
  display: block;
  margin-bottom: 0.5rem;
}
sunit-setup-dialog .init-options > div > label:last-child {
  margin-bottom: 0;
}
sunit-setup-dialog .init-options > div .usage-options {
  padding-left: 2rem;
}
sunit-setup-dialog .trade-info-inputs {
  padding: 0 2rem 1rem;
}
sunit-setup-dialog .noti-text {
  padding: 0 3rem 1rem;
  font-size: 0.7rem;
}
sunit-setup-dialog .description {
  padding: 1.5rem 2rem;
  color: #999999;
  line-height: 1.3rem;
}
sunit-setup-dialog .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
sunit-setup-dialog .btn-container:last-child {
  margin-bottom: 0;
}
sunit-setup-dialog .confirm-option {
  cursor: pointer !important;
}
sunit-setup-dialog .strategy-options {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 3rem;
}
sunit-setup-dialog .strategy-options .options {
  padding: 0 1rem;
}
sunit-setup-dialog .strategy-options .options:last-child {
  border-left: var(--text-color) 1px solid;
}
sunit-setup-dialog .strategy-options .options > div {
  margin-bottom: 1.5rem;
  cursor: pointer;
}
sunit-setup-dialog .strategy-options .options > div:last-child {
  margin-bottom: 0;
}
sunit-setup-dialog input:disabled, sunit-setup-dialog button:disabled {
  cursor: not-allowed;
}

.mobile-mode sunit-setup-dialog .dialog {
  padding: 1rem;
  width: calc(100% - 2rem);
}

tools-view {
  display: block;
  padding: 1rem;
}
tools-view .link-item {
  border-top: 1px solid #CCC;
  padding: 0.3rem 0.5rem;
  display: grid;
  grid-template-rows: repeat(3, auto);
  row-gap: 5px;
}
tools-view .link-item:last-child {
  border-bottom: 1px solid #CCC;
}
tools-view .link-item .label {
  color: #000;
}
tools-view .link-item .desc {
  color: #999;
  font-size: 0.8em;
}
tools-view .link-item .download-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
tools-view .link-item .download-btn a {
  display: inline-block;
  background: #EEE;
  cursor: pointer;
  color: #2980b9;
  padding: 0.2rem 1rem;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.8rem;
}

dialog[is=unit-activate-dialog] {
  border: 1px solid #9BC5CD;
  padding: 0.5rem;
  border-radius: 0.8rem;
  background: #FFF;
}
dialog[is=unit-activate-dialog] .title {
  border-bottom: 0;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1rem 0 0;
}
dialog[is=unit-activate-dialog] .body {
  padding: 0 1rem 1rem;
}
dialog[is=unit-activate-dialog] .body .message {
  padding: 0.5rem 0;
  color: #999999;
  line-height: 1.3rem;
  text-align: center;
}
dialog[is=unit-activate-dialog] .body .note {
  padding: 0.5rem 0;
  font-size: 0.7rem;
  color: #AAA;
  text-align: center;
}
dialog[is=unit-activate-dialog] .body .note span.highlight {
  color: #900;
}
dialog[is=unit-activate-dialog] .body .user-input select {
  width: 100%;
  padding: 0.5rem;
  text-align: center;
  cursor: pointer;
}
dialog[is=unit-activate-dialog] .body .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  column-gap: 0.5rem;
}
dialog[is=unit-activate-dialog] .body .btn-container:last-child {
  margin-bottom: 0;
}

unit-authorize-dialog .dialog {
  width: 640px;
}
unit-authorize-dialog .description {
  font-size: 1.1rem;
  padding: 1.5rem 2rem;
  line-height: 1.3rem;
  text-align: center;
  color: #999999;
}
unit-authorize-dialog .url-info button {
  width: 100%;
}
unit-authorize-dialog .url-info button[data-action=deauth] {
  display: none;
}
unit-authorize-dialog .url-info.authed button[data-action=copy] {
  display: none;
}
unit-authorize-dialog .url-info.authed button[data-action=deauth] {
  display: block;
}
unit-authorize-dialog .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
unit-authorize-dialog .btn-container:last-child {
  margin-bottom: 0;
}
unit-authorize-dialog .g-table {
  margin-bottom: 1rem;
}
unit-authorize-dialog .g-table .g-trow {
  grid-template-columns: 7rem 1fr 7rem;
}
unit-authorize-dialog .g-table .g-trow .g-tcol:nth-child(3) {
  padding: 0;
}
unit-authorize-dialog .g-table .g-tbody .g-tcol {
  font-size: 0.9em;
}

unit-authorize-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
unit-authorize-view .view-area {
  border: 2px solid #D6D6D6;
  padding: 0.5rem;
  width: 500px;
  margin: 1rem auto 2rem;
  border-radius: 0.8rem;
  background: #FFF;
}
unit-authorize-view .view-area .title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1.3rem;
  color: #000;
  text-decoration: underline;
}
unit-authorize-view .view-area .content {
  padding: 0 2rem 2rem;
}
unit-authorize-view .view-area .content .desc {
  display: none;
  font-size: 1rem;
  color: #AAA;
  text-align: center;
}
unit-authorize-view .view-area .content .desc .prod-name {
  color: #00A;
  font-size: 1.2rem;
}
unit-authorize-view .view-area .content .desc .redir-msg {
  color: #A00;
  font-size: 0.8em;
}
unit-authorize-view .view-area .content .desc .redir-msg span.redir {
  cursor: pointer;
  color: #000;
}
unit-authorize-view .view-area .content .desc.hide {
  display: none;
}
unit-authorize-view .view-area .content .desc > div {
  margin-bottom: 0.5rem;
}
unit-authorize-view .view-area .content .desc > div:last-child {
  margin-bottom: 0;
}
unit-authorize-view .view-area .content.proc .desc:nth-child(1) {
  display: block;
}
unit-authorize-view .view-area .content.succ .desc:nth-child(2) {
  display: block;
}
unit-authorize-view .view-area .content.eror .desc:nth-child(3) {
  display: block;
}

unit-control-view {
  --viewport-padding:.5rem;
  position: relative;
  display: block;
  overflow-y: auto;
  padding-bottom: 3rem;
}
unit-control-view button {
  border: 1px solid #000;
}
unit-control-view div.unit-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  column-gap: 2rem;
}
unit-control-view div.unit-summary.detached {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  margin-bottom: 0;
  z-index: 999;
  background: rgb(255, 255, 255);
}
unit-control-view div.unit-summary div.unit-conf {
  cursor: pointer;
}
unit-control-view div.unit-summary div.unit-conf#hover {
  color: var(--text-color);
}
unit-control-view div.unit-summary div.unit-conf span.text {
  margin-left: 0.5rem;
}
unit-control-view div.unit-summary.detached div.summary-info {
  border: none;
  background: none;
}
unit-control-view div.unit-summary div.summary-info {
  display: inline-grid;
  grid-template-columns: 13rem 13rem 13rem 13rem 13rem;
  column-gap: 1rem;
  height: 3rem;
  padding: 0 1rem;
  border: 1px solid var(--text-color);
  border-radius: 4rem;
  background: #FFF;
}
unit-control-view div.unit-summary div.summary-info .summary-field {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.5rem;
}
unit-control-view div.unit-summary div.summary-info .summary-field label {
  font-weight: bolder;
  font-size: 1.1rem;
  text-align: right;
}
unit-control-view div.unit-summary div.summary-info .summary-field div {
  text-align: left;
}
unit-control-view div.summary-stuffing.enabled {
  height: 3rem;
  margin-bottom: 1rem;
}
unit-control-view div.list-op-tools {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: end;
  width: 95%;
  margin: 0 auto 0.5rem;
  font-size: 0.7rem;
}
unit-control-view div.list-op-tools.single-column {
  grid-template-columns: 1fr;
}
unit-control-view div.list-op-tools.single-column .left {
  display: none;
}
unit-control-view div.list-op-tools .left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.3rem;
  font-size: 1rem;
}
unit-control-view div.list-op-tools .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 0.3rem;
}
unit-control-view div.list-op-tools .right div.tool-item {
  display: block;
  cursor: pointer;
  color: #00A;
}
unit-control-view div.list-op-tools .right div.tool-item:hover {
  color: #A00;
}
unit-control-view div.list-op-tools .right div.tool-item:before {
  content: "[";
  color: #000;
}
unit-control-view div.list-op-tools .right div.tool-item:after {
  content: "]";
  color: #000;
}
unit-control-view ul.symbol-list {
  --list-padding:1rem;
  display: block;
  width: 95%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
unit-control-view ul.symbol-list.hide {
  display: none;
}
unit-control-view ul.symbol-list > li {
  position: relative;
  width: 100%;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  padding: 1rem;
  background: #2980b9;
  color: #FFF;
}
unit-control-view ul.symbol-list > li:last-child {
  margin-bottom: 0;
}
unit-control-view ul.symbol-list > li.warning {
  background: #f39c12;
}
unit-control-view ul.symbol-list > li.locked {
  background: #c0392b;
}
unit-control-view ul.symbol-list > li.stopped {
  background: #7f8c8d !important;
}
unit-control-view ul.symbol-list > li.waiting-to-trade {
  background: #36b263;
}
unit-control-view ul.symbol-list li.collapsed .panel-title {
  padding-bottom: 0;
}
unit-control-view ul.symbol-list li.collapsed .panel-title .collapse-control > span:first-child {
  display: unset;
}
unit-control-view ul.symbol-list li.collapsed .panel-title .collapse-control > span:last-child {
  display: none;
}
unit-control-view ul.symbol-list .panel-title {
  display: grid;
  grid-template-columns: 1fr 8rem 17rem;
  padding-bottom: 1rem;
  align-items: center;
  column-gap: 0.5rem;
  font-size: 1rem;
}
unit-control-view ul.symbol-list .panel-title > .symbol-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.5rem;
}
unit-control-view ul.symbol-list .panel-title > .layout-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.5rem;
}
unit-control-view ul.symbol-list .panel-title > .symbol-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 0.5rem;
}
unit-control-view ul.symbol-list .panel-title .collapse-control {
  cursor: pointer;
}
unit-control-view ul.symbol-list .panel-title .collapse-control > span:first-child {
  display: none;
}
unit-control-view ul.symbol-list .panel-title .collapse-control > span:last-child {
  display: unset;
}
unit-control-view ul.symbol-list .panel-title .monitor-button button {
  margin-left: 0.5rem;
}
unit-control-view ul.symbol-list .panel-title label {
  font-weight: bolder;
  font-size: 1.2em;
}
unit-control-view ul.symbol-list .panel-title label.symbol-name {
  font-size: 1.2em;
}
unit-control-view ul.symbol-list .panel-title button {
  font-size: 1.1em;
}
unit-control-view ul.symbol-list .panel-title .layout-control label {
  font-size: 1.5rem;
}
unit-control-view ul.symbol-list li.collapsed .panel-wrapper {
  display: none;
}
unit-control-view ul.symbol-list .panel-wrapper {
  display: grid;
  grid-template-columns: 18rem auto 1fr;
  gap: 0.5rem;
  padding: 0 1rem;
}
unit-control-view ul.symbol-list .panel-wrapper .position-info .pos-info-item {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
unit-control-view ul.symbol-list .panel-wrapper .position-info .pos-info-item:last-child {
  margin-bottom: 0;
}
unit-control-view ul.symbol-list .panel-wrapper .position-info .pos-info-item label {
  font-weight: bolder;
}
unit-control-view ul.symbol-list .panel-wrapper .panel-content .option-group {
  margin-bottom: 0.5rem;
}
unit-control-view ul.symbol-list .panel-wrapper .panel-content .option-group:last-child {
  margin-bottom: 0;
}
unit-control-view ul.symbol-list .panel-wrapper .panel-content .option-group > div:first-child {
  display: block;
  font-weight: bolder;
  margin-bottom: 0.2rem;
}
unit-control-view ul.symbol-list .panel-wrapper .panel-content .option-group > div:last-child {
  padding-left: 1rem;
}
unit-control-view ul.symbol-list .panel-wrapper .symbol-meta .option-group {
  margin-bottom: 0.5rem;
}
unit-control-view ul.symbol-list .panel-wrapper .symbol-meta .option-group:last-child {
  margin-bottom: 0;
}
unit-control-view ul.symbol-list .panel-wrapper .symbol-meta .order-list {
  white-space: pre;
  overflow-wrap: normal;
  width: 100%;
  color: #000;
  background: #FFF;
  box-sizing: border-box;
  min-height: 5rem;
}
unit-control-view .unit-name-container {
  position: fixed;
  left: 0;
  bottom: 1rem;
  width: 100vw;
  pointer-events: none;
}
unit-control-view .unit-name-container > div {
  width: var(--default-view-width);
  max-width: var(--default-view-max-width);
  margin: var(--default-view-margin);
}
unit-control-view .unit-name-container > div .unit-name-hover {
  padding: 0.5rem 1.5rem;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-color);
  border-radius: 1rem;
  background: #FFF;
  cursor: pointer;
}
unit-control-view .empty-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rem 0;
}
unit-control-view .empty-display.hide {
  display: none;
}
unit-control-view .empty-display .highlight-text {
  font-size: 2rem;
  color: #367D6A;
  margin-bottom: 1rem;
}
unit-control-view .empty-display .sub-text {
  font-size: 0.8rem;
  color: #9B9B9B;
  text-align: center;
}
unit-control-view .working-state {
  display: inline-flex;
  align-items: center;
  column-gap: 1rem;
  margin-right: 1rem;
}
unit-control-view .working-state .overall-state {
  display: inline-flex;
  align-items: center;
  column-gap: 5px;
}
unit-control-view .working-state .overall-state.inactive {
  color: #666;
}
unit-control-view .working-state .overall-state.active {
  color: #77A0C1;
}
unit-control-view .working-state .overall-state.fulled {
  color: #E5C283;
}
unit-control-view .working-state .overall-state.locked {
  color: #DB5D57;
}
unit-control-view .working-state .overall-state.waiting-to-trade {
  color: #36b263;
}

body.mobile-mode unit-control-view .unit-summary {
  --base-bleeding:1rem;
  position: relative;
  display: block;
  width: calc(100% - 2 * var(--base-bleeding));
  margin: var(--base-bleeding) auto;
  position: relative;
}
body.mobile-mode unit-control-view .unit-summary .summary-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
  height: unset;
  border-radius: 1rem;
  padding: 0.6rem;
}
body.mobile-mode unit-control-view .unit-summary .summary-info .summary-field {
  grid-template-columns: 3rem 1fr;
}
body.mobile-mode unit-control-view .unit-summary .summary-info .summary-field label {
  font-size: unset;
  text-align-last: justify;
  word-break: break-all;
  white-space: normal;
}
body.mobile-mode unit-control-view .unit-summary .summary-info .summary-field div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
body.mobile-mode unit-control-view .unit-summary .unit-conf {
  position: absolute;
  bottom: 0.2rem;
  right: 1rem;
}
body.mobile-mode unit-control-view .list-op-tools {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  width: 100%;
}
body.mobile-mode unit-control-view .list-op-tools .left {
  width: 95%;
  margin: 1rem auto 0;
}
body.mobile-mode unit-control-view .list-op-tools .left button {
  width: 100%;
}
body.mobile-mode unit-control-view .list-op-tools .right {
  width: 100%;
  display: flex;
  justify-content: center;
}
body.mobile-mode unit-control-view .list-op-tools .right .working-state {
  display: flex;
  margin-right: 0;
  font-size: 0.9rem;
  justify-content: space-evenly;
}
body.mobile-mode unit-control-view .list-op-tools .right .working-state .overall-state {
  flex-direction: column;
}
body.mobile-mode unit-control-view .list-op-tools .right .tool-item {
  display: none;
}
body.mobile-mode unit-control-view .symbol-list li {
  padding: 0.5rem 0.8rem;
}
body.mobile-mode unit-control-view .symbol-list li .panel-title {
  display: block;
  font-size: 0.8rem;
}
body.mobile-mode unit-control-view .symbol-list li .panel-title > div {
  margin-bottom: 0.5rem;
}
body.mobile-mode unit-control-view .symbol-list li .panel-title > div:last-child {
  margin-bottom: 0;
}
body.mobile-mode unit-control-view .symbol-list li .panel-title .symbol-summary {
  flex-wrap: wrap;
  column-gap: 0.2rem;
}
body.mobile-mode unit-control-view .symbol-list li .panel-title .symbol-summary .symbol-name {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}
body.mobile-mode unit-control-view .symbol-list li .panel-title .op-control {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
}
body.mobile-mode unit-control-view .symbol-list li .panel-wrapper {
  display: none;
}
body.mobile-mode unit-control-view .empty-display > div {
  width: 15rem;
  text-align: center;
}

unit-issue-dialog--order-list-view {
  padding: 2rem;
}
unit-issue-dialog--order-list-view .description {
  padding: 0;
  color: #999999;
  line-height: 1.3rem;
}
unit-issue-dialog--order-list-view .input-panel {
  padding: 0 var(--h-padding) 1rem;
}
unit-issue-dialog--order-list-view .input-panel .input-grp {
  margin-bottom: 0.5rem;
}
unit-issue-dialog--order-list-view .input-panel .input-grp label {
  display: block;
}
unit-issue-dialog--order-list-view .input-panel .input-grp input {
  width: 100%;
}
unit-issue-dialog--order-list-view .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
unit-issue-dialog--order-list-view .btn-container:last-child {
  margin-bottom: 0;
}
unit-issue-dialog--order-list-view table {
  --border-color:var(--text-color);
  width: 100%;
  border: 1px solid var(--border-color);
}
unit-issue-dialog--order-list-view table td {
  padding: 0 0.5rem;
}
unit-issue-dialog--order-list-view table td:nth-child(1) {
  width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
unit-issue-dialog--order-list-view table td:nth-child(2) {
  --col-width:8rem;
  width: var(--col-width);
}
unit-issue-dialog--order-list-view table td:nth-child(2) > div {
  width: var(--col-width);
}
unit-issue-dialog--order-list-view table td:nth-child(2) > div .order-kind {
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
unit-issue-dialog--order-list-view table td:nth-child(3) {
  width: 10rem;
}
unit-issue-dialog--order-list-view table td:nth-child(4) {
  width: 10rem;
}
unit-issue-dialog--order-list-view table td:nth-child(7) {
  width: auto;
}
unit-issue-dialog--order-list-view table thead {
  border-bottom: 1px solid var(--border-color);
}
unit-issue-dialog--order-list-view table tbody {
  border-bottom: 1px solid var(--border-color);
}
unit-issue-dialog--order-list-view table tbody td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
unit-issue-dialog--order-list-view table tbody tr:nth-child(2n+1) {
  background: #e8f4f6;
}
unit-issue-dialog--order-list-view table tfoot td {
  text-align: right !important;
}
unit-issue-dialog--order-list-view table .order-op-container [data-role] {
  cursor: pointer;
}
unit-issue-dialog--order-list-view table .order-op-container [data-role=pay-order] {
  color: #00A;
}
unit-issue-dialog--order-list-view table .order-op-container [data-role=del-order] {
  color: #A00;
}

.mobile-mode unit-issue-dialog--order-list-view {
  padding: 1rem 0.5rem;
}
.mobile-mode unit-issue-dialog--order-list-view .description {
  padding-bottom: 1rem;
}
.mobile-mode unit-issue-dialog--order-list-view .order-list {
  margin-top: 1rem;
}
.mobile-mode unit-issue-dialog--order-list-view .order-list .data-row {
  --vertical-padding:.5rem;
  --horizontal-padding:0;
  border-top: 1px solid var(--text-color);
  padding: var(--vertical-padding) var(--horizontal-padding);
  position: relative;
}
.mobile-mode unit-issue-dialog--order-list-view .order-list .data-row:last-child {
  border-bottom: 1px solid var(--text-color);
}
.mobile-mode unit-issue-dialog--order-list-view .order-list .data-row > div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  column-gap: 0.5rem;
}
.mobile-mode unit-issue-dialog--order-list-view .order-list .data-row > div label {
  text-align-last: justify;
}
.mobile-mode unit-issue-dialog--order-list-view .order-list .data-row > div.op-container {
  display: block;
  font-size: 1.2em;
  position: absolute;
  right: var(--horizontal-padding);
  bottom: var(--vertical-padding);
}
.mobile-mode unit-issue-dialog--order-list-view .order-list .data-row > div.op-container span[data-role=pay-order] {
  color: #00A;
}
.mobile-mode unit-issue-dialog--order-list-view .order-list .data-row > div.op-container span[data-role=del-order] {
  color: #A00;
}
.mobile-mode unit-issue-dialog--order-list-view .order-list .data-row > div > div {
  word-break: break-all;
  white-space: normal;
}
.mobile-mode unit-issue-dialog--order-list-view .buttons {
  padding-bottom: 0;
}

unit-issue-dialog--order-view .description {
  padding: 1.5rem 2rem;
  color: #999999;
  line-height: 1.3rem;
}
unit-issue-dialog--order-view .rule-text {
  padding: 3rem 3rem;
  font-size: 0.8rem;
  color: #A00;
  line-height: 1.5;
}
unit-issue-dialog--order-view .radio-selector {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding-bottom: 1rem;
}
unit-issue-dialog--order-view .radio-selector label input[type=radio] {
  margin-right: 0.2rem;
}
unit-issue-dialog--order-view .input-panel {
  padding: 0 2rem 1rem;
}
unit-issue-dialog--order-view .input-panel .input-grp {
  margin-bottom: 0.5rem;
}
unit-issue-dialog--order-view .input-panel .input-grp label {
  display: block;
}
unit-issue-dialog--order-view .input-panel .input-grp input {
  width: 100%;
}
unit-issue-dialog--order-view .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
unit-issue-dialog--order-view .btn-container:last-child {
  margin-bottom: 0;
}
unit-issue-dialog--order-view table {
  --border-color:var(--text-color);
  width: 100%;
  padding: 0 var(--h-padding);
  border: 1px solid var(--border-color);
}
unit-issue-dialog--order-view table td {
  padding: 0 0.5rem;
}
unit-issue-dialog--order-view table td:nth-child(1) {
  padding-left: 1rem;
  text-align: center;
}
unit-issue-dialog--order-view table td:nth-child(2) {
  width: 20%;
}
unit-issue-dialog--order-view table td:nth-child(3) {
  width: auto;
}
unit-issue-dialog--order-view table td:nth-child(4) {
  width: 10rem;
}
unit-issue-dialog--order-view table td:nth-child(5) {
  width: 10rem;
}
unit-issue-dialog--order-view table td select {
  cursor: pointer;
  width: 100%;
  text-align: center;
}
unit-issue-dialog--order-view table thead {
  border-bottom: 1px solid var(--border-color);
}
unit-issue-dialog--order-view table tbody {
  border-bottom: 1px solid var(--border-color);
}
unit-issue-dialog--order-view table tbody td {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
unit-issue-dialog--order-view table tfoot td {
  text-align: right !important;
}
unit-issue-dialog--order-view .confirmations {
  font-size: 0.8rem;
  color: #A00;
  line-height: 1.5;
}
unit-issue-dialog--order-view .confirmations .confirmation {
  cursor: pointer;
  display: grid;
  align-items: flex-start;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
}
unit-issue-dialog--order-view .confirmations .confirmation input {
  margin-top: 3px;
}
unit-issue-dialog--order-view .confirmations .confirmation div {
  text-align: justify;
}

.mobile-mode unit-issue-dialog--order-view {
  padding: 1rem 0.5rem;
}
.mobile-mode unit-issue-dialog--order-view .description {
  padding: 0 0 1rem;
}
.mobile-mode unit-issue-dialog--order-view .input-panel {
  padding: 0 0 1rem;
}
.mobile-mode unit-issue-dialog--order-view .rule-text {
  padding: 1rem 1rem 3rem;
}
.mobile-mode unit-issue-dialog--order-view .radio-selector {
  flex-direction: column;
  align-items: flex-start;
  padding: 0 1rem 1rem;
}
.mobile-mode unit-issue-dialog--order-view .mobile-panel .product-info > div {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  column-gap: 0.5rem;
  padding: 1rem 0;
}
.mobile-mode unit-issue-dialog--order-view .mobile-panel .product-info > div > div:nth-child(1) {
  text-align: center;
}
.mobile-mode unit-issue-dialog--order-view .mobile-panel .product-info > div > div:nth-child(2) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
}
.mobile-mode unit-issue-dialog--order-view .mobile-panel .product-info > div:nth-child(1) > div:nth-child(2) {
  grid-template-columns: 1fr;
}
.mobile-mode unit-issue-dialog--order-view .mobile-panel .product-info .product-select {
  padding: 0 0 1rem;
}
.mobile-mode unit-issue-dialog--order-view .mobile-panel .product-info .product-select select {
  width: 100%;
}
.mobile-mode unit-issue-dialog--order-view .mobile-panel .price-info {
  display: flex;
  justify-content: flex-end;
}
.mobile-mode unit-issue-dialog--order-view .mobile-panel .price-info > div {
  border-bottom: 1px solid var(--text-color);
}

unit-issue-dialog .dialog {
  padding: 2rem;
  width: 1024px;
}
unit-issue-dialog .dialog .title {
  border-bottom: 0;
  font-size: 2rem;
}
unit-issue-dialog .dialog tab-list tab-item {
  font-size: 0.8rem;
}

.mobile-mode unit-issue-dialog .dialog {
  width: calc(100% - 2rem);
  padding: 2rem 0 0;
}
.mobile-mode unit-issue-dialog tab-list tab-item {
  font-size: 1rem;
}

body main.main-viewport main.page-view > unit-list-view {
  display: block;
  min-width: var(--default-view-max-width);
}
body main.main-viewport main.page-view > unit-list-view div.unit-list {
  --data-column-dist:
  	4rem auto 8rem 6rem 6rem 6rem
  	6rem 6rem 4rem 4rem 5rem
  	5rem 3rem;
  font-size: 1rem;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-header .l-row {
  border-bottom: 1px solid #9A9A9A;
  margin-bottom: 0.2rem;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-header .l-row .l-col {
  font-size: 1.1em;
  font-weight: bolder;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-header .l-row .l-col:nth-child(9) {
  color: #9E9E9E;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-header .l-row .l-col:nth-child(10) {
  color: #88B1D2;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-header .l-row .l-col:nth-child(11) {
  color: #F6D394;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-header .l-row .l-col:nth-child(12) {
  color: #EC6E68;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-body {
  font-size: 0.8rem;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-body .l-row {
  padding-top: 1.2rem;
  border-bottom: 3px solid #000;
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-body .l-row.inactive {
  border-bottom-color: #000;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-body .l-row.active {
  border-bottom-color: #88B1D2;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-body .l-row.fulled {
  border-bottom-color: #EC6E68;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-body .l-row.locked {
  border-bottom-color: #F6D394;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-body .l-row .l-col.ctrl-items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.2rem;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-body .l-row .l-col.ctrl-items > div {
  cursor: pointer;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-body .l-row .l-col.ctrl-items > div:nth-child(1) {
  color: #00A;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .list-body .l-row .l-col.ctrl-items > div:nth-child(3) {
  color: #0A0;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row {
  display: grid;
  grid-template-columns: var(--data-column-dist);
  column-gap: 0.5rem;
  padding: 0 0.5rem;
  align-items: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col {
  padding-bottom: 0.2rem;
  text-overflow: ellipsis;
  word-break: keep-all;
  overflow: hidden;
  white-space: nowrap;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(1) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(2) {
  text-align: left;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(3) {
  text-align: left;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(4) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(5) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(6) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(7) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(8) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(9) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(10) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(11) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(12) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view div.unit-list .l-row .l-col:nth-child(13) {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper {
  margin: 1rem auto;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper.mobile {
  display: none;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper.mobile {
  width: 100%;
  max-width: unset;
  margin: 0;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper {
  --wrapper-margin:1rem;
  width: calc(100vw - 2 * var(--wrapper-margin));
  margin: var(--wrapper-margin) auto;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item {
  display: grid;
  grid-template-rows: auto auto;
  padding: 1.5rem;
  margin-bottom: var(--wrapper-margin);
  border: 2px solid #000;
  border-radius: 0.5rem;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item.inactive {
  border-color: #000;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item.active {
  border-color: #88B1D2;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item.fulled {
  border-color: #EC6E68;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item.locked {
  border-color: #F6D394;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .top {
  display: grid;
  grid-template-columns: 1fr 8rem;
  column-gap: 0.5rem;
  margin-bottom: 1rem;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .top .top-left {
  overflow: hidden;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .top .top-left .unit-info {
  display: grid;
  grid-template-columns: 5em 1fr;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .top .top-left .unit-info label {
  font-weight: bolder;
  text-align: right;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .top .top-left .unit-info span {
  text-overflow: ellipsis;
  overflow: hidden;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .top .top-right div:not(.divider) {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .top .top-right div:not(.divider):last-child {
  margin-bottom: 0;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .top .top-right .divider {
  display: none;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .symbol-summary .data-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .symbol-summary .data-row div {
  text-align: center;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .symbol-summary .data-row.header {
  font-weight: bolder;
  font-size: 1.2rem;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .symbol-summary .data-row.header div:nth-child(1) {
  color: #9E9E9E;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .symbol-summary .data-row.header div:nth-child(2) {
  color: #88B1D2;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .symbol-summary .data-row.header div:nth-child(3) {
  color: #F6D394;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper div.unit-item .symbol-summary .data-row.header div:nth-child(4) {
  color: #EC6E68;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .ctrl-items > * {
  cursor: pointer;
  font-weight: bolder;
  word-break: keep-all;
}
body main.main-viewport main.page-view > unit-list-view .view-wrapper .ctrl-items .dropdown-menu {
  min-width: 10rem;
}
body main.main-viewport main.page-view > unit-list-view .unit-item .ex-logo-small {
  --logo-size:1rem;
  width: var(--logo-size);
  height: var(--logo-size);
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("./public/img/logo-no-text.png");
}
body main.main-viewport main.page-view > unit-list-view .unit-item[data-exchange=binance] .ex-logo-small {
  background-image: url("./public/img/exchange/binance-logo.svg");
}
body main.main-viewport main.page-view > unit-list-view .unit-item[data-exchange=gate] .ex-logo-small {
  background-image: url("./public/img/exchange/gate-logo.svg");
}
body main.main-viewport main.page-view > unit-list-view .unit-item[data-exchange=okx] .ex-logo-small {
  background-image: url("./public/img/exchange/okx-logo.svg");
}
body main.main-viewport main.page-view > unit-list-view .unit-item[data-exchange=bybit] .ex-logo-small {
  background-image: url("./public/img/exchange/bybit-logo.jpg");
}
body main.main-viewport main.page-view > unit-list-view .attachment-wrapper {
  pointer-events: none;
}
body main.main-viewport main.page-view > unit-list-view .attachment-wrapper.detached {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
}
body main.main-viewport main.page-view > unit-list-view .attachment-wrapper > div {
  width: var(--default-view-width);
  max-width: var(--default-view-max-width);
  margin: var(--default-view-margin);
}
body main.main-viewport main.page-view > unit-list-view .attachment-wrapper > div .btn-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 2rem 0;
  column-gap: 1rem;
}
body main.main-viewport main.page-view > unit-list-view .attachment-wrapper > div .btn-container button {
  font-weight: bolder;
  padding: 0.2rem 1.2rem;
  pointer-events: auto;
}
body main.main-viewport main.page-view > unit-list-view .action-item {
  cursor: pointer;
}
body main.main-viewport main.page-view > unit-list-view .renew-item {
  color: #00A;
}
body main.main-viewport main.page-view > unit-list-view .delete-item {
  color: #A00;
}
body main.main-viewport main.page-view > unit-list-view .expired-time.warning {
  color: #ce8600;
}
body main.main-viewport main.page-view > unit-list-view .expired-time.expired {
  color: #c40a00;
}

body.mobile-mode main.main-viewport main.page-view > unit-list-view {
  width: 100%;
  min-width: unset;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper.desktop {
  display: none;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper.mobile {
  display: block;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper {
  margin: 0 var(--wrapper-margin);
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item {
  padding: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  position: relative;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .op-wrapper {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  position: absolute;
  top: 0.3em;
  right: 0.3rem;
  top: 0.3em;
  right: 0.3rem;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .attr {
  display: grid;
  grid-template-columns: 6rem 1fr;
  column-gap: 1rem;
  line-height: 1.3em;
  margin-bottom: 0.2rem;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .attr.op-shrink {
  padding-right: 2rem;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .attr > div:nth-child(1) {
  text-align: justify;
  text-align-last: justify;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .attr > div:nth-child(2) {
  word-break: break-all;
  white-space: normal;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .states {
  margin-top: 1rem;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .states > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .states > div:nth-child(1) span:nth-child(1) {
  color: #9E9E9E;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .states > div:nth-child(1) span:nth-child(2) {
  color: #88B1D2;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .states > div:nth-child(1) span:nth-child(3) {
  color: #F6D394;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .states > div:nth-child(1) span:nth-child(4) {
  color: #EC6E68;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item .ex-name-display .ex-logo-small {
  margin-right: 0.5rem;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item[data-exchange=binance] .ex-name-display > div:nth-child(2):after {
  display: inline-block;
  content: "Binance";
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item[data-exchange=gate] .ex-name-display > div:nth-child(2):after {
  display: inline-block;
  content: " Gate";
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item[data-exchange=okx] .ex-name-display > div:nth-child(2):after {
  display: inline-block;
  content: " OKX";
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .unit-wrapper .unit-item[data-exchange=bybit] .ex-name-display > div:nth-child(2):after {
  display: inline-block;
  content: " Bybit";
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .view-wrapper .ctrl-items .dropdown-menu {
  font-size: 1.2rem;
  border: 1px solid #AAA;
}
body.mobile-mode main.main-viewport main.page-view > unit-list-view .attachment-wrapper > div .btn-container {
  padding: 1rem;
}

body main.main-viewport main.page-view > unit-profit-view {
  max-width: 1100px;
  height: auto;
  margin-bottom: 2rem;
}
body main.main-viewport main.page-view > unit-profit-view .data-meta {
  padding: 0.5rem 1rem;
}
body main.main-viewport main.page-view > unit-profit-view .data-meta .hist-data-time {
  text-align: right;
  color: #000;
  font-size: 0.8rem;
  font-weight: bolder;
}
body main.main-viewport main.page-view > unit-profit-view .profit-statistics {
  display: grid;
  grid-template-columns: repeat(3, 20rem) 1fr;
  column-gap: 1rem;
  margin-bottom: 2rem;
}
body main.main-viewport main.page-view > unit-profit-view .profit-statistics .profit-info {
  margin-left: 1px solid #000;
  padding: 2rem;
}
body main.main-viewport main.page-view > unit-profit-view .profit-statistics .profit-info .title {
  color: #000;
  font-size: 1.1em;
}
body main.main-viewport main.page-view > unit-profit-view .profit-statistics .profit-info .content {
  color: #000;
  font-weight: bolder;
  font-size: 1.1em;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}
body main.main-viewport main.page-view > unit-profit-view .profit-statistics .profit-info .content.gain {
  color: #0A0;
}
body main.main-viewport main.page-view > unit-profit-view .profit-statistics .profit-info .content.lose {
  color: #A00;
}
body main.main-viewport main.page-view > unit-profit-view .profit-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  margin-bottom: 4rem;
}
body main.main-viewport main.page-view > unit-profit-view .profit-charts .chart-container canvas {
  width: 100%;
  height: 100%;
}
body main.main-viewport main.page-view > unit-profit-view .profit-list .g-table {
  --border-color:#999;
}
body main.main-viewport main.page-view > unit-profit-view .profit-list .g-table .g-thead .g-tcol {
  color: #999;
}
body main.main-viewport main.page-view > unit-profit-view .profit-list .g-table .g-trow {
  grid-template-columns: 6fr 10fr 10fr 10fr;
}
body main.main-viewport main.page-view > unit-profit-view .profit-list .g-table .g-trow .g-tcol:nth-child(3) {
  padding: 0;
}
body main.main-viewport main.page-view > unit-profit-view .profit-list .g-table .g-tbody .g-tcol {
  font-size: 0.9em;
}
body main.main-viewport main.page-view > unit-profit-view .profit-list .g-table .g-tcol {
  padding: 0.5rem;
  text-align: right;
}

body.mobile-mode main.main-viewport main.page-view > unit-profit-view .profit-statistics {
  display: block;
}
body.mobile-mode main.main-viewport main.page-view > unit-profit-view .profit-statistics .profit-info {
  padding: 1rem 2rem;
}
body.mobile-mode main.main-viewport main.page-view > unit-profit-view .profit-charts {
  display: block;
  margin: 0 1rem 4rem;
}
body.mobile-mode main.main-viewport main.page-view > unit-profit-view .profit-charts .chart-container {
  margin-bottom: 1rem;
}
body.mobile-mode main.main-viewport main.page-view > unit-profit-view .profit-charts .chart-container:last-child {
  margin-bottom: 0;
}
body.mobile-mode main.main-viewport main.page-view > unit-profit-view .profit-list {
  margin: 0 1rem;
}
body.mobile-mode main.main-viewport main.page-view > unit-profit-view .profit-list .g-table .g-trow {
  column-gap: 0.2rem;
}

unit-recover-dialog .description {
  font-size: 1.1rem;
  padding: 1.5rem 2rem;
  color: #999999;
  line-height: 1.3rem;
}
unit-recover-dialog .input-panel {
  padding: 0 2rem 1rem;
}
unit-recover-dialog .input-panel .input-grp {
  margin-bottom: 0.5rem;
}
unit-recover-dialog .input-panel .input-grp label {
  display: block;
}
unit-recover-dialog .input-panel .input-grp input {
  width: 100%;
}
unit-recover-dialog .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
unit-recover-dialog .btn-container:last-child {
  margin-bottom: 0;
}

body.mobile-mode unit-recover-dialog .dialog {
  width: calc(100% - 2rem);
  padding: 1rem 0 0;
}

custom-symbol-add-dialog.overlay {
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
}
custom-symbol-add-dialog .title {
  border-bottom: 0;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1rem 0 0;
}
custom-symbol-add-dialog .body {
  padding: 0 1rem 1rem;
}
custom-symbol-add-dialog .body .message {
  padding: 0.5rem 0;
  color: #999999;
  line-height: 1.3rem;
  text-align: center;
}
custom-symbol-add-dialog .body .note {
  padding: 0.5rem 0;
  font-size: 0.7rem;
  color: #AAA;
  text-align: center;
}
custom-symbol-add-dialog .body .note .highlight {
  display: unset;
  color: #900;
}
custom-symbol-add-dialog .body .note .highlight.hide {
  display: none;
}
custom-symbol-add-dialog .body .user-input input[type=text] {
  width: 100%;
  padding: 0.5rem;
  text-align: center;
  cursor: text;
}
custom-symbol-add-dialog .body .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  column-gap: 0.5rem;
}
custom-symbol-add-dialog .body .btn-container:last-child {
  margin-bottom: 0;
}

body.mobile-mode custom-symbol-add-dialog {
  padding: 0;
}
body.mobile-mode custom-symbol-add-dialog .dialog {
  width: calc(100% - 2rem);
}

unit-init-confirm-dialog.overlay {
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
}
unit-init-confirm-dialog .dialog {
  width: 700px;
}
unit-init-confirm-dialog .dialog .title {
  border-bottom: 0;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1rem 0 0;
}
unit-init-confirm-dialog .dialog .body {
  padding: 0 1rem 1rem;
}
unit-init-confirm-dialog .dialog .body .message {
  padding: 0.5rem 0;
  color: #999999;
  line-height: 1.3rem;
  text-align: center;
}
unit-init-confirm-dialog .dialog .body .symbol-info-list {
  display: grid;
  grid-template-columns: repeat(5, calc((100% - 2rem) / 5));
  gap: 0.5rem;
  margin: 1rem 0 2rem;
}
unit-init-confirm-dialog .dialog .body .symbol-info-list .symbol_info {
  border: 1px solid #000;
  padding: 0.5rem 1rem;
  text-align: center;
}
unit-init-confirm-dialog .dialog .body .symbol-info-list .symbol_info .name {
  font-weight: bolder;
}
unit-init-confirm-dialog .dialog .body .symbol-info-list .symbol_info .margin {
  font-size: 0.8em;
  color: #67A5B2;
}
unit-init-confirm-dialog .dialog .body .symbol-info-list .symbol_info .margin span.unit {
  font-size: 0.8em;
}
unit-init-confirm-dialog .dialog .body .symbol-info-list .symbol_info.danger {
  border-color: red;
}
unit-init-confirm-dialog .dialog .body .symbol-info-list .symbol_info.danger .margin {
  color: red;
  font-weight: bolder;
}
unit-init-confirm-dialog .dialog .body .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  column-gap: 0.5rem;
}
unit-init-confirm-dialog .dialog .body .btn-container:last-child {
  margin-bottom: 0;
}

body.mobile-mode custom-symbol-add-dialog {
  padding: 0;
}
body.mobile-mode custom-symbol-add-dialog .dialog {
  width: calc(100% - 2rem);
}

unit-setup-dialog.overlay-wrapper .dialog {
  padding: 2rem;
  width: 950px;
}
unit-setup-dialog.overlay-wrapper .dialog .title {
  border-bottom: 0;
}
unit-setup-dialog.overlay-wrapper .dialog .tab-list {
  display: flex;
  column-gap: 5px;
  border-bottom: 2px solid var(--text-color);
  padding: 0 0.5rem;
  font-size: 0.8rem;
}
unit-setup-dialog.overlay-wrapper .dialog .tab-list > .tab-item {
  cursor: pointer;
  color: var(--text-color);
  padding: 0.1rem 0.5rem 0;
}
unit-setup-dialog.overlay-wrapper .dialog .tab-list > .tab-item.active {
  cursor: default;
  background: var(--text-color);
  color: #FFF;
}
unit-setup-dialog.overlay-wrapper .dialog .view-container .tab-view {
  display: none;
}
unit-setup-dialog.overlay-wrapper .dialog .view-container .tab-view.active {
  display: block;
}
unit-setup-dialog .init-options {
  padding: 1.5rem 2rem;
}
unit-setup-dialog .init-options > div {
  margin-bottom: 1.5rem;
}
unit-setup-dialog .init-options > div:last-child {
  margin-bottom: 0;
}
unit-setup-dialog .init-options > div > label {
  display: block;
  margin-bottom: 0.5rem;
}
unit-setup-dialog .init-options > div > label:last-child {
  margin-bottom: 0;
}
unit-setup-dialog .init-options > div .usage-options {
  padding-left: 2rem;
}
unit-setup-dialog .trade-info-inputs {
  padding: 0 2rem 1rem;
}
unit-setup-dialog .trade-info-inputs .input-grp {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: center;
  column-gap: 0.5rem;
  margin-bottom: 0.5rem;
}
unit-setup-dialog .trade-info-inputs .input-grp label {
  display: block;
}
unit-setup-dialog .trade-info-inputs .input-grp input {
  width: 100%;
}
unit-setup-dialog .trade-info-inputs .input-grp .public-key-display {
  display: grid;
  grid-template-rows: 1frauto;
  row-gap: 0.5rem;
}
unit-setup-dialog .trade-info-inputs .input-grp .public-key-display textarea {
  font-size: 0.8rem;
  min-height: 100px;
  max-height: 100px;
}
unit-setup-dialog .trade-info-inputs .input-grp .public-key-display button {
  cursor: pointer;
  border: 1px solid #000;
  font-size: 1rem;
  background: #DDD;
}
unit-setup-dialog .trade-info-inputs .input-grp .public-key-display button:hover {
  background: #CCC;
}
unit-setup-dialog .trade-info-inputs .input-grp.password {
  width: 60%;
}
unit-setup-dialog .noti-text {
  padding: 0 3rem 1rem;
  font-size: 0.7rem;
}
unit-setup-dialog .rule-text {
  padding: 1rem 6rem;
  font-size: 0.8rem;
  color: #A00;
  line-height: 1.5;
}
unit-setup-dialog .description {
  padding: 1.5rem 2rem;
  color: #999999;
  line-height: 1.3rem;
}
unit-setup-dialog .description div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  align-items: center;
  column-gap: 0.5rem;
}
unit-setup-dialog .description div span:first-child {
  text-align-last: justify;
}
unit-setup-dialog .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  column-gap: 0.5rem;
}
unit-setup-dialog .btn-container:last-child {
  margin-bottom: 0;
}
unit-setup-dialog .confirm-option {
  cursor: pointer !important;
}
unit-setup-dialog .strategy-options {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 3rem;
}
unit-setup-dialog .strategy-options .options {
  padding: 0 1rem;
  flex-grow: 1;
}
unit-setup-dialog .strategy-options .options label {
  display: flex;
  column-gap: 0.5rem;
}
unit-setup-dialog .strategy-options .options label.input-wrapper {
  cursor: pointer;
}
unit-setup-dialog .strategy-options .options:last-child {
  border-left: var(--text-color) 1px solid;
}
unit-setup-dialog .strategy-options .options > div {
  margin-bottom: 1.5rem;
  cursor: pointer;
}
unit-setup-dialog .strategy-options .options > div:last-child {
  margin-bottom: 0;
}
unit-setup-dialog .strategy-options .options .option-desc {
  margin-left: 1rem;
  font-size: 0.9em;
}
unit-setup-dialog select.assets-config-selector {
  max-width: 100%;
}
unit-setup-dialog label.symbol-mode-select {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  cursor: pointer;
}
unit-setup-dialog label.symbol-mode-select span.hint {
  font-size: 0.8em;
  color: #999;
}
unit-setup-dialog .symbol-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.5rem;
  margin: 0.5rem 0 0 1rem;
}
unit-setup-dialog .symbol-selector .symbol-add, unit-setup-dialog .symbol-selector .symbol-item {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--bs-body-color);
  min-width: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.2rem;
}
unit-setup-dialog .symbol-selector .symbol-add span, unit-setup-dialog .symbol-selector .symbol-item span {
  flex: 1;
  text-align: center;
}
unit-setup-dialog .symbol-selector .symbol-add {
  cursor: pointer;
}
unit-setup-dialog .symbol-selector .symbol-add div {
  color: var(--text-color);
}
unit-setup-dialog .symbol-selector .symbol-add span {
  text-align: center;
}
unit-setup-dialog .symbol-selector .symbol-item div {
  color: #F00;
  cursor: pointer;
}
unit-setup-dialog input:disabled, unit-setup-dialog button:disabled {
  cursor: not-allowed;
}

body.mobile-mode unit-setup-dialog .dialog {
  width: calc(100% - 2rem);
  padding: 2rem 0 0;
}
body.mobile-mode unit-setup-dialog tab-list tab-item {
  font-size: 1rem;
}
body.mobile-mode unit-setup-dialog .description {
  padding: 1rem;
}
body.mobile-mode unit-setup-dialog .noti-text {
  padding: 0 1rem 1rem;
}
body.mobile-mode unit-setup-dialog .rule-text {
  padding: 1rem 2rem;
}
body.mobile-mode unit-setup-dialog .trade-info-inputs {
  padding: 0 1rem 1rem;
}
body.mobile-mode unit-setup-dialog .init-options {
  padding: 1rem;
}
body.mobile-mode unit-setup-dialog .strategy-options {
  display: block;
  padding: 1rem;
}
body.mobile-mode unit-setup-dialog .strategy-options .options {
  margin-bottom: 1rem;
}
body.mobile-mode unit-setup-dialog .strategy-options .options:last-child {
  border: none;
}
body.mobile-mode unit-setup-dialog .btn-container {
  padding-bottom: 1rem;
}
body.mobile-mode unit-setup-dialog select.assets-config-selector {
  width: 100%;
}