body {
  height: 100%;
  width: 100%;
  font-family: Cordia New;
  background: linear-gradient(#ffe89f 60%, #ffc40c) !important;
  background-repeat: repeat;
  display: flex;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  position: relative;
  background-size: 100%;
  padding-left: unset;
  justify-content: center;
}

.menubtn {
  width: 142px;
  height: 22px;
  color: white;
  border: 0px;
  background-color: #fdbd04;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  margin: 0 2px;
  border: none !important;
}

.menubtn:hover,
.box-10-right .box-10-button button:hover,
.box-11-right .box-11-button button:hover,
.btn-class button:hover,
.k-dialog-buttongroup.k-dialog-button-layout-stretched button.k-button:hover,
button.btn-search:hover {
  background-color: #f0b002;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

#header-img {
  width: 1025px;
  padding-right: 5px;
  padding-left: 1px;
}

.header-welcome {
  padding-top: 5px;
  padding-left: 10px;
  font-family: tahoma;
  font-weight: bold;
  font-size: 15px;
  color: white;
}

.header-name {
  padding-left: 30px;
  font-family: tahoma;
  color: white;
  font-size: 14px;
  height: 25px !important;
}

.price-height {
  height: 50px;
}

div#txtItem1OfferMain:hover,
div#txtItem2OfferMain:hover {
  background-color: #f57676;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

div#txtItem1BidMain:hover,
div#txtItem2BidMain:hover {
  background-color: #77b777;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.navbar {
  padding: 0 !important;
}

.nav-link {
  display: block;
  padding: 0rem 0.2rem !important;
}

.dropdown-item {
  padding: 0.25rem 0rem !important;
  vertical-align: middle;
}

.dropdown-menu {
  background-color: transparent !important;
  border: 0px solid rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dropdown-menu::before,
.dropdown-menu::after {
  border: none;
  content: none;
}

.btn {
  display: contents !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: transparent !important;
}

.dropdown .dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
}

.dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
}

.dropdown {
  display: inline-block;
}

.mkt-div {
  float: right;
  margin-right: 50px;
}

.mkt-div > .mkt_status {
  width: 15px;
  height: 15px;
}

.mkt_lab {
  color: #3acc04;
  font-family: tahoma;
  font-size: 16px;
  font-weight: bold;
  line-height: 0;
  margin: 0;
  vertical-align: middle;
}

.white_space {
  white-space: nowrap;
}

.nav-fill .nav-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 2 2 auto;
  text-align: center;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.tab-content > .active {
  display: block;
}

.tab-content > .tab-pane {
  display: none;
}

.fade.show {
  opacity: 1;
}

.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.bg {
  border-radius: 10px;
  background-color: white;
  padding: 2px 8px 8px 8px;
}

.pd_left {
  padding-left: 5px;
  font-size: 14px;
}

.pd_top {
  padding-top: 5px;
}

.height290 {
  height: 290px;
}

label.accinfo {
  font-weight: bold;
  font-size: 13px;
  padding-left: 10px;
  font-family: tahoma;
  line-height: 1.22;
}

label.accinfo.accinfo_head {
  color: #c18e01;
}

label.accinfo.accinfo_value {
  color: #3f3f3f;
}

.separate {
  border: 1px solid #cec4a6;
  line-height: 0;
  padding: 0;
  margin: 5px;
}

.display_flex {
  display: flex;
}

.head_symbol {
  width: 82.5px;
  height: 27px;
  padding-top: 1;
}

.separate_order {
  border: 1px solid #cec4a6;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

label.order {
  font-weight: bold;
  font-size: 16px;
  font-family: Cordia New;
  line-height: 1.5;
}

label.order.order_head {
  color: #c18e01;
  font-weight: bold;
}

label.order.order_head.sell {
  color: red;
  float: right;
}

label.order.order_head.buy {
  color: green;
  float: left;
}

label.order.order_head.unit {
  float: right;
}

.price_symbol {
  width: 165px;
  text-align: center;
}

.price {
  font-weight: bold;
  font-size: 62px;
  font-family: "Cordia New";
  line-height: 0.8;
  padding: 0;
  color: #4d4d4d;
  margin-bottom: unset !important;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.header-box-left,
.header-box-right {
  color: #c18e01;
  font-weight: bold;
  font-size: 16px;
  font-family: Cordia New;
  line-height: 1;
  width: 100%;
}

.div-box-1,
.div-box-2,
.div-box-3,
.div-box-4 {
  display: flex;
  width: 100%;
}

.div-box-right,
.div-box-left {
  width: 50%;
}

.text-box-left label,
.text-box-right label,
.header-box-left label,
.header-box-right label {
  margin-bottom: 0.1rem !important;
  padding: 4px 5px;
}

.text-box-left,
.text-box-right {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25 !important;
}

.header-box-right {
  padding-right: 3px;
}

.div-center-subgrp1 {
  padding-right: 5px;
}

.div-center-subgrp2 {
  padding-right: 10px;
  padding-left: 2px;
}

.div-symbol-menu {
  text-align: right;
  font-weight: 700;
  font-size: 15px;
  height: 25px;
  padding-right: 5px;
}

.header-height {
  height: 25px;
}

.header-height-info {
  height: 20px;
}

.nowrap {
  white-space: nowrap;
}

.text-box-right {
  padding-left: 15px;
}

.boxright-label {
  color: #c18e01;
  font-size: 13px;
  line-height: 1;
  font-weight: bold;
  width: 50%;
}

.boxright-label.color {
  color: #4d4d4d;
  font-size: 13px;
  line-height: 1.2;
  font-weight: bold;
  text-align: right;
  width: 50%;
}

.div-boxright-4,
.div-boxright-5,
.div-boxright-3,
.div-boxright-7,
.div-boxright-8,
.div-boxright-9,
.div-boxright-10 {
  display: flex;
}

.div-boxright-3 .boxright-label,
.div-boxright-4 .boxright-label,
.div-boxright-5 .boxright-label,
.div-boxright-8 .boxright-label,
.div-boxright-7 .boxright-label,
.div-boxright-9 .boxright-label {
  width: 35%;
  line-height: 1;
  vertical-align: middle;
  padding: 2px 0 1px 0;
}

.boxright-input input {
  line-height: 0.1 !important;
  font-size: 14px;
  border: 1px solid #ccc8c8;
  background: #ffd155;
  color: white;
  text-align: right;
  padding: 0;
  outline: none;
}

.div-boxright-3,
.div-boxright-4,
.div-boxright-5,
.div-boxright-6,
.div-boxright-8 {
  padding: 2px 0;
  line-height: 1;
  vertical-align: middle;
}

.boxright-input {
  line-height: 1;
  vertical-align: middle;
}

.div-boxright-2 {
  padding: 4px 0 2px 0;
}

.boxright-label label {
  margin-bottom: 0.2rem !important;
}

.boxright-text {
  text-align: right;
  width: 65%;
  /* padding-right: 10px; */
  vertical-align: middle;
}

.boxright-text label {
  margin-bottom: 0rem !important;
}

input.box-10-input {
  width: 60%;
}

.box-10-left .checkbox-text {
  font-size: 12px;
  line-height: 1;
}

.box-10-checkbox {
  display: flex;
  padding: 3 5;
  color: #c18e01;
  font-weight: bold;
}

.box-10-left .boxright-input {
  display: flex;
}

.box-10-left {
  margin: 3px auto;
}

.box-10-right .box-10-button button {
  width: 66px;
  border: 0;
  height: 35px;
  color: white;
  background: #fdbd04;
  border-radius: 3px;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
}

.box-10-right {
  line-height: 1;
  vertical-align: middle;
  margin: 6px 2px auto 0;
}

/* Kendo Grid */

.k-grid {
  border-color: rgb(255, 255, 255) !important;
}

.k-dialog-titlebar {
  border-color: inherit !important;
  border-top-right-radius: 5px !important;
  color: #c18e01 !important;
  border-top-left-radius: 5px !important;
  font-weight: bold !important;
  padding: 8px 16px !important;
  background-color: #fdbd04 !important;
}

.k-window {
  border-color: rgb(250, 197, 55) !important;
  color: #ff9800 !important;
  background-color: #fdbd04 !important;
  border-radius: 5px !important;
  width: 310px !important;
  height: auto !important;
  background-clip: padding-box !important;
  box-shadow: 0 3px 3px 0 rgb(49, 40, 40) !important;
}

button.k-button {
  width: 10% !important;
}

.k-window-content {
  background: #fff3d4  !important;
  margin: auto 10px auto 10px !important;
  padding: 4% 4% 18% 4% !important;
  color: #c18e01 !important;
  /* min-height: 19vh !important; */
  font-size: 12px !important;
  height: auto;
}

.k-dialog-buttongroup.k-dialog-button-layout-stretched button.k-button {
  background-color: #fdbd04 !important;
  color: white !important;
  text-align: center !important;
  height: 2.5vh !important;
  margin: 2 !important;
  font-weight: bold !important;
  line-height: 1 !important;
  padding: 0 0 !important;
  border-radius: 10px;
  border-width: 1 !important;
  outline: unset !important;
}

.k-dialog-button-layout-stretched .k-button:focus {
  box-shadow: unset !important;
}

.div-alert {
  display: inline-flex;
  justify-content: center;
  width: initial;
  font-weight: bold;
  font-size: 14px;
  vertical-align: middle;
}

span.imgAlert {
  /* display: flex; */
  padding: 0 15px 0 5px;
  margin: auto 0;
  line-height: unset;
  vertical-align: middle;
}

span.alert-content {
  display: flex;
}

.k-alert .k-dialog-buttongroup.k-dialog-button-layout-stretched {
  display: inherit;
  position: absolute;
  width: 20%;
  border-width: 0;
  justify-content: center;
  bottom: 3vh;
  left: 40%;
  right: auto;
  flex: auto !important;
}

.k-widget.k-window.k-dialog.k-alert {
  padding-bottom: 10px !important;
}

.k-dialog-buttongroup .k-button {
  width: auto !important;
  max-width: 70%;
}

.k-dialog-buttongroup {
  justify-content: center;
}

img#success_alert,
img#pin_err_alert {
  margin-bottom: 0;
  height: 30;
  width: 30;
}

span.alert-content .success-show {
  line-height: 1.89;
}

span.alert-content.err-show {
  line-height: 2;
  padding-top: 0;
  padding-bottom: 7px;
  text-align: center;
}

/* Confirm */

a#nav-logout-tab .k-dialog-buttongroup.k-dialog-button-layout-stretched button.k-button.k-primary {
  background: red !important;
  max-width: 20% !important;
  margin-right: 1vw !important;
}

.k-confirm .k-window-content {
  min-height: 12vh;
  text-align: center;
  font-size: 20px;
}

.k-confirm .k-dialog-buttongroup.k-dialog-button-layout-stretched {
  display: inherit;
  position: absolute;
  top: 57%;
  width: 50% !important;
  border-width: 0;
  margin: auto !important;
  justify-content: center;
  left: 28% !important;
  right: auto !important;
  flex: auto !important;
}

.k-confirm button.k-button.k-primary {
  margin-right: 1vw !important;
}

.k-widget.k-window.k-dialog.k-confirm {
  padding-bottom: 1% !important;
}

/*  ########### Change Password & Change Pin Class ############## */

.div1-header-img img {
  width: auto;
}

.div1-header-img {
  width: 55vw;
}

.div1-title-label label {
  font-size: 14px;
  font-weight: bold;
  color: #c18e01;
  line-height: 2;
}

.label-class label {
  font-size: 14px;
  color: #c18e01;
}

.label-class {
  text-align: right;
  margin-right: 30px;
}

.label-grp {
  width: 46%;
}

.input-grp {
  width: auto;
  margin-right: 20px;
}

.field1-grp,
.field2-grp,
.field3-grp,
.field4-grp,
.field5-grp,
.field6-grp,
.field7-grp,
.field8-grp {
  width: 100%;
  display: flex;
  line-height: 1.5;
  vertical-align: middle;
  margin: 2 0;
}

.btn-grp {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: relative;
  right: 18%;
  margin: 0.5vw 0;
}

.btn-class button {
  /* width: 5vw; */
  width: 60px;
  border: 1px solid #ffde83;
  background: #fdbd04;
  text-align: center !important;
  border-radius: 5px;
  line-height: 1.5;
  vertical-align: middle;
}

button,
input {
  outline: 0 !important;
}

.input-class input {
  line-height: 1.5;
  font-size: 14px;
  border: 1px solid #d4d3d3;
  background: #ffc82d;
  color: white;
  text-align: left;
  padding: 0 4px;
  width: 90%;
}

.btn-left {
  margin-right: 9px;
}

.btn-left .btn-class button {
  color: white;
}

.btn-right .btn-class button {
  color: white;
}

.div-box {
  padding: 0.5vw 2vw;
}

div.chgpwdForm,
div.chgpinForm,
div.repwdForm,
div.editOrderForm,
div.cancelOrderForm {
  /* left: 32%; */
  /* top: 10vh; */
  position: absolute;
  z-index: 10004;
  color: #ff9800 !important;
  background-color: #ffedbb !important;
  height: auto !important;
  box-shadow: 0 5px 10px 0 rgb(49, 40, 40) !important;
}

div#chgpwdForm.chgpwdForm,
div#chgpinForm.chgpinForm,
div#repwdForm.repwdForm,
div#editOrderForm.editOrderForm,
div#cancelOrderForm.cancelOrderForm {
  width: 460px;
}

.chgpinForm .label-grp {
  width: 41.5%;
}

.chgpinForm .btn-grp {
  right: 22.6%;
}

#div_confirm_order label.countdown-label {
  color: black;
  font-size: 14px;
  font-weight: normal;
}

#div_confirm_order .boxright-label {
  white-space: nowrap;
  width: 25%;
  text-align: left;
}

#div_confirm_order .boxright-text {
  /* width: 70%; */
  font-weight: bold;
  text-align: left;
  margin-left: 3vw;
}

#div_confirm_order .boxright-text label.sub-confirm {
  width: 5.75vw;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
}

#div_confirm_order .boxright-text label.sub-unit {
  width: 100%;
  text-align: left;
  margin-left: 20px;
  white-space: nowrap;
}

#div_confirm_order label.countdown-label {
  color: black;
  font-size: 14px;
  font-weight: normal;
  width: unset;
  text-align: right;
}

#div_confirm_order .boxright-text {
  width: 33%;
  font-weight: bold;
  text-align: left;
  margin-left: 0.1vw;
}

label.sub-unit {
  font-weight: normal;
}

.title-countdown {
  width: 100%;
  font-size: 14px;
  line-height: 1;
  font-weight: bold;
  text-align: center;
}

div.countdown_clock {
  font-size: 63px;
  margin: 0 0 6px 0;
  min-height: 22px;
  height: 60px;
  line-height: 1;
}

.countdown-class {
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

.title-count-label {
  margin: 0;
  padding: 0;
}

.div-boxright-10 {
  justify-content: center;
  margin-top: 0px;
}

/* #### Edit Order Form #### */

.editOrderForm .label-grp {
  width: 30%;
  text-align: right;
}

.editOrderform .data-grp .label-class {
  width: auto;
  text-align: left;
  margin-right: 0;
}

.editOrderForm .label-grp {
  text-align: right;
  line-height: 2;
}

.editOrderform .unit-grp {
  width: 30%;
  justify-content: left;
}

.editOrderForm input[type="text"] {
  width: 90%;
  padding: 0 6px;
}

label.order-val-class {
  width: 80%;
}

.data-grp {
  width: 35%;
  margin-left: 0;
}

.unit-grp .label-class {
  text-align: left;
}

label.order-val-class {
  padding: 4;
}

.editOrderform .btn-grp {
  right: 35%;
  margin: 17px 0 2px 0;
}

.editOrder-grp .div-form-grp {
  margin-left: 2em;
}

button#ok_editOrder {
  color: white;
}

button#ok_editOrder {
  color: white;
}

.editOrderForm label.unit-class {
  white-space: nowrap;
}

.editOrderForm {
  border: 5px solid #ffc425;
}

.editOrderForm img {
  width: 450px;
}

.editOrderForm .input-grp {
  width: 35%;
  text-align: left;
}

.editOrderform .input-grp .label-class {
  padding: 0 3px;
  width: 81%;
  text-align: left;
}

/* #### Cancel Order Form #### */

.cancelOrderForm .label-grp {
  width: 30%;
  text-align: right;
}

.cancelOrderForm .data-grp .label-class {
  width: auto;
  text-align: left;
  margin-right: 0;
}

.cancelOrderForm .label-grp {
  text-align: right;
  line-height: 2;
}

.cancelOrderForm .unit-grp {
  width: 30%;
  justify-content: left;
}

.cancelOrderForm input[type="text"],
.cancelOrderForm input[type="password"] {
  width: auto;
  padding: 0 6px;
  margin-left: 1em;
  font-size: 16px;
}

input[type="password"] {
  text-align: left;
}

label.order-val-class {
  width: 80%;
}

.data-grp {
  width: 35%;
  margin-left: 0;
}

.unit-grp .label-class {
  text-align: left;
}

label.order-val-class {
  padding: 4;
}

.cancelOrderForm .btn-grp {
  right: 35%;
  margin: 17px 0 2px 0;
}

.editOrder-grp .div-form-grp {
  margin-left: 2em;
}

button#ok_editOrder {
  color: white;
}

button#ok_editOrder {
  color: white;
}

.cancelOrderForm label.unit-class {
  white-space: nowrap;
}

.cancelOrderForm {
  border: 5px solid #ffc425;
}

.cancelOrderForm img {
  width: 450px;
}

.cancelOrderForm .input-grp {
  width: 35%;
  text-align: left;
}

.cancelOrderForm .input-grp .label-class {
  padding: 0;
  width: 100%;
  text-align: left;
}

#ok_cancelOrder {
  color: white;
}

.cancelOrderForm .div-form-grp {
  margin-left: 2em;
}

.cancelOrderForm label.order-val-class {
  width: 100%;
}

.cancelOrderForm label.order-val-class {
  color: #c18e01;
  font-weight: bold;
  margin-left: 1em;
}

.cancelOrderForm input[type="password"] {
  letter-spacing: 3px;
}

input#priceInputRealTime {
  border: unset;
  color: black;
  width: 97%;
  padding-right: 3px;
  text-align: right;
}

input#priceInputRealtime:focus {
  outline-color: #ccc8c8;
  padding-right: 5px;
  margin: auto 5 auto 5px;
  line-height: 0.1 !important;
  font-size: 14px;
  border: 1px solid #ccc8c8;
  background: #ffc425;
  color: white;
  text-align: right;
  padding: 0;
  outline: none;
}

.fieldEdit {
  width: 100%;
}

div#priceBox .boxright-label label {
  width: 100%;
}

.div-boxright-8 .boxright-input {
  font-size: 14px !important;
  width: unset;
}

.div-boxright-8 .boxright-input span.k-widget.k-datepicker {
  font-size: 14px !important;
  width: 92%;
  margin-left: 13px;
}

div#priceBox .boxright-label {
  width: 44%;
  white-space: nowrap;
}

/* ###### Progress Bar ###### */

#myProgress {
  width: 95%;
  background-color: #ffc317;
  height: 16px;
  margin: 10;
  border: 1px solid #909090;
  z-index: 10004;
  padding: 1 0;
}

#myBar {
  /* width: 10%; */
  height: 100%;
  background-color: #dba501;
  z-index: 10004;
}

.container.bar-class {
  height: 7.65em;
  position: absolute;
  top: 40%;
  padding: 0;
  justify-content: center;
  width: 464px;
  background-color: #ffedbb;
  border: 2px solid #bfbfbf;
  box-shadow: 1px 1px 10px 1px #969696;
  z-index: 10004;
}

#initProgress {
  /* width: 95%; */
  background-color: #ffc422;
  height: 6px;
  margin: 0px 15px;
  border: 1px solid #909090;
  /* padding: 1 0; */
  z-index: 2;
}

/* ###### init Progress Bar ###### */
#initBar {
  /* width: 10%; */
  height: 100%;
  background-color: #dba501;
  z-index: 1000;
}

label.initialLabel {
  font-size: 12px;
  padding-top: 5px;
  font-weight: 400;
}

.initdiv {
  background-color: #fdecc0;
  /* box-shadow: 1px 1px 10px 1px #dedede; */
  height: 100%;
}

.container.initbar-class {
  height: 5em;
  position: absolute;
  top: 45%;
  padding: 0;
  justify-content: center;
  width: 170px;
  background-color: #ffdb7b;
  /* border: 2px solid #bfbfbf; */
  box-shadow: 1px 1px 10px 1px #969696;
  border-radius: 6px;
  /* border-top-right-radius: 10px; */
  padding: 20px 8px 8px 8px;
  z-index: 10004;
}

.container.bar-class .content-header {
  padding: 0;
}

div#login {
  right: 0;
  justify-content: center;
  position: absolute;
  left: 0;
  margin-left: 0;
  top: 10vh;
  z-index: 2;
}

div#trading {
  justify-content: center;
  position: absolute;
  width: 1066px;
  left: auto;
  z-index: 0;
}

div#trading_2 {
  margin-top: 3%;
}

.footter {
  position: fixed;
  display: flex;
  bottom: 0;
  background: white;
  line-height: 0.7;
  width: 100%;
  justify-content: center;
  font-weight: bold;
  left: 0;
  vertical-align: middle;
  padding-top: 5px;
  font-size: 10px;
  z-index: 0;
}

.sub-footer1 {
  left: 1vw;
}

.sub-footer1,
.sub-footer2,
.sub-footer3 {
  width: 100%;
  padding-left: 5px;
  flex-wrap: nowrap;
  min-width: 150px;
  position: relative;
  left: 0;
}

.sub-footer4 {
  text-align: center;
  width: 160px;
  min-width: 160px;
}

.sub-footer5 .footer-credit {
  text-align: right;
  width: 100%;
  padding-right: 5px;
}

.sub-footer5 {
  width: 505px;
  text-align: right;
  min-width: 350px;
  position: relative;
  right: 0;
}

label.footer-chanel {
  color: #0068bb;
  padding-left: 5px;
}

label.footer-status {
  color: #c18e01;
  padding-left: 5px;
}

label.footer-session {
  color: #c18e01;
  padding-left: 5px;
}

.break-time {
  color: #f58942;
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
  font-weight: bold;
  vertical-align: middle;
  padding: 8px;
}

.container.bar-class.break-class {
  height: 11em;
  top: 40%;
  position: absolute;
  left: 33vw;
  padding-right: 0 !important;
  padding-left: 0 !important;
  width: 464px;
  background-color: #ffedbb;
  border: 2px solid #bfbfbf;
  box-shadow: 1px 1px 10px 1px #969696;
  z-index: 10004;
}

.qrcode {
  top: 33%;
  position: absolute;
  z-index: 10005;
  color: #ff9800 !important;
  background-color: #ffb649 !important;
  box-shadow: 0 5px 10px 0 rgb(49 40 40) !important;
  padding: 5px;
  border-radius: 5px;
  width: 230px;
  height: 300px;
}

img#qrcode {
  width: 200px;
  height: 200px;
}

.qrdiv {
  text-align: center;
  padding: 10px;
}

img#qrclose {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

div#imgqrclose {
  width: 100%;
  text-align: right;
}

label.qrlabel {
  color: white;
  text-align: center;
}

.waitpayment {
  top: 42%;
  position: absolute;
  z-index: 10004;
}

div#divimg {
  text-align: center;
}

img#imgwait {
  width: 50px;
  height: 50px;
}

div#imgqrcode {
  text-align: center;
  padding: 10px;
}

label.waitlabel {
  color: #ff9800;
  text-align: center;
  padding: 20px;
  font-weight: bold;
}

.trading_2_grp {
  display: flex;
  height: 100%;
  width: 1066px;
  margin-left: unset;
}

div#chgpwdForm,
div#repwdForm {
  top: 28vh;
}

div#chgpinForm {
  top: 28vh;
}

.div-content {
  display: contents;
  position: relative;
  /* line-height: 6; */
  margin: auto auto;
  height: auto;
  vertical-align: middle;
}

.k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover {
  color: #656565;
  background-color: #ededed !important;
}

#overlay {
  position: fixed;
  z-index: -100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cccccc93;
  z-index: 1;
}

#initBG {
  position: fixed;
  z-index: -100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e2d6b8;
  z-index: 3;
}

.k-window-title {
  font-size: 13px !important;
  height: 17px !important;
}

/* systen info */

div#systeminfo {
  top: 26%;
  z-index: 10004;
}

div#systeminfo.systeminfo {
  width: 550px;
}

.div-info-header-img img {
  width: 550px;
}

.div-info-header-img {
  width: 55vw;
}

div.systeminfo {
  left: 27%;
  /* top: 10vh; */
  position: absolute;
  z-index: 10004;
  color: #ff9800 !important;
  background-color: #ffedbb !important;
  height: auto !important;
  box-shadow: 0 5px 10px 0 rgb(49, 40, 40) !important;
}

.field1-info-grp,
.field2-info-grp,
.field3-info-grp,
.field4-info-grp {
  width: 100%;
  display: flex;
  line-height: 1;
  vertical-align: middle;
  margin: 2 0;
}

.btn-info-grp {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: relative;
  right: 32%;
  margin: 1.5vw 0;
}

textarea.textarea-class {
  background-color: #fcb12b;
  width: 250px;
  font-size: 12px;
}

label.system-class.offline {
  color: red;
}

.label-info-class {
  text-align: right;
  margin-right: 10px;
}

form#sform {
  margin-block-end: 0em !important;
}

button#close_btn:disabled {
  filter: grayscale(1);
  opacity: 0.6;
  color: white;
}

button#restart_btn:disabled {
  filter: grayscale(1);
  opacity: 0.6;
  color: white;
}

button#btnSetPwd:disabled {
  filter: grayscale(1);
  opacity: 0.6;
  color: white;
}

.k-dateinput .k-dateinput-wrap .k-select,
.k-dateinput .k-picker-wrap .k-select,
.k-datepicker .k-dateinput-wrap .k-select,
.k-datepicker .k-picker-wrap .k-select,
.k-datetimepicker .k-dateinput-wrap .k-select,
.k-datetimepicker .k-picker-wrap .k-select,
.k-timepicker .k-dateinput-wrap .k-select,
.k-timepicker .k-picker-wrap .k-select {
  padding: 3px !important;
  margin: 0px !important;
  align-items: unset !important;
}

@media only screen and (max-width: 500px) {
  body {
    padding-left: 1.38% !important;
    /* background-image: unset !important;
    background-color: #000000 !important; */
  }
  header > img {
    left: 5%;
    width: 1025px !important;
    position: absolute;
  }
  #trading {
    margin-left: 65% !important;
  }
}

@media only screen and (min-width: 501px) and (max-width: 550px) {
  body {
    padding-left: 1.38% !important;
    margin-left: 62% !important;
    /* background-image: unset !important;
    background-color: #00BCD4 !important; */
  }
}

@media only screen and (min-width: 551px) and (max-width: 600px) {
  body {
    padding-left: 1.38% !important;
    margin-left: 50% !important;
    /* background-image: unset !important;
    background-color: pink !important; */
  }
}

@media only screen and (min-width: 601px) and (max-width: 650px) {
  body {
    padding-left: 1.38% !important;
    margin-left: 40% !important;
    /* background-image: unset !important;
    background-color: #9E9E9E !important; */
  }
}

@media only screen and (min-width: 651px) and (max-width: 700px) {
  body {
    padding-left: 1.38% !important;
    margin-left: 35% !important;
    /* background-image: unset !important;
    background-color: #c7ffe8 !important; */
  }
}

@media only screen and (min-width: 701px) and (max-width: 768px) {
  body {
    padding-left: 1.38% !important;
    margin-left: 30% !important;
    /* background-image: unset !important;
    background-color: #ea0000 !important; */
  }
}

@media only screen and (min-width: 769px) and (max-width: 799px) {
  body {
    padding-left: 1.38% !important;
    margin-left: 20% !important;
    /* background-image: unset !important;
    background-color: #795548 !important; */
  }
}

@media only screen and (min-width: 800px) and (max-width: 819px) {
  body {
    padding-left: 1.38% !important;
    margin-left: 17.5% !important;
    /* background-image: unset !important;
    background-color: #E91E63 !important; */
  }
}

@media only screen and (min-width: 820px) and (max-width: 868px) {
  body {
    padding-left: 1.38% !important;
    margin-left: 15% !important;
    /* background-image: unset !important;
    background-color: #009688 !important; */
  }
}

@media only screen and (min-width: 869px) and (max-width: 920px) {
  body {
    padding-left: 0.5% !important;
    margin-left: 13% !important;
    /* background-image: unset !important;
    background-color: #673AB7 !important; */
  }
}

@media only screen and (min-width: 921px) and (max-width: 999px) {
  body {
    padding-left: 0.5% !important;
    margin-left: 10% !important;
    /* background-image: unset !important;
    background-color: lightblue !important; */
  }
}

@media only screen and (min-width: 1000px) and (max-width: 1050px) {
  body {
    padding-left: 0.5% !important;
    margin-left: 5% !important;
    /* background-image: unset !important;
    background-color: #8BC34A !important; */
  }
}

@media only screen and (min-width: 1051px) and (max-width: 1100px) {
  body {
    padding-left: 0.5% !important;
    margin-left: 3.5% !important;
    /* background-image: unset !important;
    background-color: #ffc927 !important; */
  }
}

@media only screen and (min-width: 1101px) and (max-width: 1600px) {
  .content-div-class {
    width: 97%;
  }
  body {
    padding-left: 2.5% !important;
  }
}

@media only screen and (min-width: 1601px) and (max-width: 1919px) {
  body {
    padding-left: 2% !important;
  }
}

@media only screen and (min-width: 1920px) {
  body {
    padding-left: 2% !important;
  }
}

@media only screen and (width: 1366px) {
  body {
    padding-left: 3.5% !important;
  }
}

span.alert-content.success-show {
  padding-top: 6px !important;
}

/* Add this attribute to the element that needs a tooltip */

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: -60%;
  left: 80%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 110px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: #ffffce;
  box-shadow: 0 3px 3px 0 rgb(104, 100, 100) !important;
  color: #000;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */

[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: “ “;
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
}

.header-payment {
  text-align: center;
  font-size: 17px;
  font-weight: 600;
}

.detail-payment {
  display: block;
  height: 60%;
  padding: 15px;
}

.txt-right {
  text-align: right;
}

.div-unit {
  width: 25%;
}

.div-val-50 {
  width: 50%;
}

.div-lbl-100 {
  width: 50%;
}

.detail-flex {
  display: flex;
}

.paynow {
  top: 40%;
  right: 38%;
  position: absolute;
  z-index: 10004;
  color: #000000 !important;
  background-color: #ffffff !important;
  height: 333px;
  width: 295px;
  box-shadow: 0 5px 10px 0 rgb(49 40 40) !important;
  padding: 21px;
  border-radius: 5px;
  font-size: 13px;
}

.line {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid #a2a2a2;
}

.lbl-total {
  font-weight: 600;
}