/************ ######## Outstanding CSS ######## ************/
div#nav-outstanding {
  height: 675px !important;
}

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

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

.outstd-sub-label {
  color: rgb(244, 125, 48);
  font-weight: bold;
  line-height: 0.8;
  font-size: 12px;
  padding: 0px;
  width: 50%;
}

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

div#gridOutstd2,
div#gridOutstd1,
div#gridMatchBuy,
div#gridMatchSell,
div#gridViewMatchBuySell,
div#gridViewMatchBuy,
div#gridViewMatchSell,
div#gridViewHistoryPayment,
div#gridViewDetailHistoryPayment,
div#gridOutstdPayment,
div#gridUnrealized {
  border: 0 !important;
}

#gridOutstd1 ::-webkit-scrollbar,
#gridOutstd2 ::-webkit-scrollbar,
#gridMatchBuy ::-webkit-scrollbar,
#gridMatchSell ::-webkit-scrollbar,
#gridViewMatchBuySell ::-webkit-scrollbar,
#gridViewMatchBuy ::-webkit-scrollbar,
#gridViewMatchSell ::-webkit-scrollbar,
#gridViewHistoryPayment ::-webkit-scrollbar,
#gridViewDetailHistoryPayment ::-webkit-scrollbar,
#gridOutstdPayment ::-webkit-scrollbar,
#gridUnrealized ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

#nav-outstanding .k-grid {
  height: 45% !important;
}

::-webkit-scrollbar-thumb {
  background: #ff9800;
}

/************ ######## Kendo Grid CSS ######## ************/
#gridOutstd1 .k-grid-header-wrap,
#gridOutstd2 .k-grid-header-wrap,
#gridMatchBuy .k-grid-header-wrap,
#gridMatchSell .k-grid-header-wrap,
#gridViewMatchBuySell .k-grid-header-wrap,
#gridViewMatchBuy .k-grid-header-wrap,
#gridViewMatchSell .k-grid-header-wrap,
#gridViewHistoryPayment .k-grid-header-wrap,
#gridViewDetailHistoryPayment .k-grid-header-wrap,
#gridOutstdPayment .k-grid-header-wrap,
#gridUnrealized .k-grid-header-wrap {
  border-right-color: white !important;
  background: white;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

#gridOutstd1 .k-grid-header,
#gridOutstd2 .k-grid-header,
#gridMatchBuy .k-grid-header,
#gridMatchSell .k-grid-header,
#gridViewMatchBuySell .k-grid-header,
#gridViewMatchBuy .k-grid-header,
#gridViewMatchSell .k-grid-header,
#gridViewHistoryPayment .k-grid-header,
#gridViewDetailHistoryPayment .k-grid-header,
#gridOutstdPayment .k-grid-header ,
#gridUnrealized .k-grid-header{
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

#gridOutstd1 .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar,
#gridOutstd2 .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar,
#gridMatchBuy .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar,
#gridMatchSell .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar,
#gridViewMatchBuySell .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar,
#gridViewMatchBuy .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar,
#gridViewMatchSell .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar,
#gridViewHistoryPayment .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar,
#gridViewDetailHistoryPayment .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar,
#gridOutstdPayment .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar,
#gridUnrealized .k-grid-content.k-auto-scrollable > ::-webkit-scrollbar {
  width: 5px !important;
}

#gridOutstd1 .k-widget,
#gridOutstd2 .k-widget,
#gridMatchBuy .k-widget,
#gridMatchSell .k-widget,
#gridViewMatchBuySell .k-widget,
#gridViewMatchBuy .k-widget,
#gridViewMatchSell .k-widget,
#gridViewHistoryPayment .k-widget,
#gridViewDetailHistoryPayment .k-widget,
#gridOutstdPayment .k-widget,
#gridUnrealized .k-widget {
  background-color: #fff !important;
  border-radius: 10px !important;
}

#gridOutstd1 .k-grid-header .k-header:first-child,
#gridOutstd2 .k-grid-header .k-header:first-child,
#gridMatchBuy .k-grid-header .k-header:first-child,
#gridMatchSell .k-grid-header .k-header:first-child,
#gridViewMatchBuySell .k-grid-header .k-header:first-child,
#gridViewMatchBuy .k-grid-header .k-header:first-child,
#gridViewMatchSell .k-grid-header .k-header:first-child,
#gridViewHistoryPayment .k-grid-header .k-header:first-child,
#gridViewDetailHistoryPayment .k-grid-header .k-header:first-child,
#gridOutstdPayment .k-grid-header .k-header:first-child,
#gridUnrealized .k-grid-header .k-header:first-child {
  border-top-left-radius: 10px !important;
}

#gridOutstd1 .k-grid-header .k-header:last-child,
#gridOutstd2 .k-grid-header .k-header:last-child,
#gridMatchBuy .k-grid-header .k-header:last-child,
#gridMatchSell .k-grid-header .k-header:last-child,
#gridViewMatchBuySell .k-grid-header .k-header:last-child,
#gridViewMatchBuy .k-grid-header .k-header:last-child,
#gridViewMatchSell .k-grid-header .k-header:last-child,
#gridViewHistoryPayment .k-grid-header .k-header:last-child,
#gridViewDetailHistoryPayment .k-grid-header .k-header:last-child,
#gridOutstdPayment .k-grid-header .k-header:last-child,
#gridUnrealized .k-grid-header .k-header:last-child {
  border-top-right-radius: 10px !important;
}

#gridViewMatchBuy .k-grid-header .k-header:last-child,
#gridViewMatchSell .k-grid-header .k-header:last-child {
  /* padding: 5px !important; */
  border-top-right-radius: 10px !important;
  color: #dfac1e !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

#gridOutstd1 .k-grid-content td,
#gridOutstd2 .k-grid-content td,
#gridMatchBuy .k-grid-content td,
#gridMatchSell .k-grid-content td,
#gridViewMatchBuySell .k-grid-content td,
#gridViewMatchBuy .k-grid-content td,
#gridViewMatchSell .k-grid-content td,
#gridViewHistoryPayment .k-grid-content td,
#gridViewDetailHistoryPayment .k-grid-content td,
#gridOutstdPayment .k-grid-content td,
#gridUnrealized .k-grid-content td {
  background: unset;
  border-color: #aba832d6 !important;
  border-width: 0 0 1 0 !important;
  white-space: nowrap !important;
}

#gridOutstd1 .k-grid-header .k-header > .k-link,
#gridOutstd2 .k-grid-header .k-header > .k-link,
#gridMatchBuy .k-grid-header .k-header > .k-link,
#gridMatchSell .k-grid-header .k-header > .k-link,
#gridViewMatchBuySell .k-grid-header .k-header > .k-link,
#gridViewMatchBuy .k-grid-header .k-header > .k-link,
#gridViewMatchSell .k-grid-header .k-header > .k-link,
#gridViewHistoryPayment .k-grid-header .k-header > .k-link,
#gridViewDetailHistoryPayment .k-grid-header .k-header > .k-link,
#gridOutstdPayment .k-grid-header .k-header > .k-link,
#gridUnrealized .k-grid-header .k-header > .k-link {
  /* white-space: pre-wrap !important; */
  line-height: 1.2 !important;
  vertical-align: middle !important;
  padding: 2px 2px !important;
  /* color: #dfac1e !important; */
  font-size: 9px !important;
  margin: -5px -5px !important;
  font-weight: bold;
}

#gridOutstd1 .k-grid-header th:not(td),
#gridOutstd2 .k-grid-header th:not(td),
#gridMatchBuy .k-grid-header th:not(td),
#gridMatchSell .k-grid-header th:not(td),
#gridViewMatchBuySell .k-grid-header th:not(td),
#gridViewMatchBuy .k-grid-header th:not(td),
#gridViewMatchSell .k-grid-header th:not(td),
#gridViewHistoryPayment .k-grid-header th:not(td),
#gridViewDetailHistoryPayment .k-grid-header th:not(td),
#gridOutstdPayment .k-grid-header th:not(td),
#gridUnrealized .k-grid-header th:not(td) {
  background: white !important;
  border-bottom-color: #c7c7c7;
  border-width: 0 0 1 0;
}

#gridOutstd1 .k-grid table,
#gridOutstd2 .k-grid table,
#gridMatchBuy .k-grid table,
#gridMatchSell .k-grid table,
#gridViewMatchBuySell .k-grid table,
#gridViewMatchBuy .k-grid table,
#gridViewMatchSell .k-grid table,
#gridViewHistoryPayment .k-grid table,
#gridViewDetailHistoryPayment .k-grid table,
#gridOutstdPayment .k-grid table,
#gridUnrealized .k-grid table {
  font-size: 10px !important;
}

#gridOutstd1 table,
#gridOutstd2 table,
#gridMatchBuy table,
#gridMatchSell table,
#gridViewMatchBuySell table,
#gridViewMatchBuy table,
#gridViewMatchSell table,
#gridViewHistoryPayment table,
#gridViewDetailHistoryPayment table,
#gridOutstdPayment table,
#gridUnrealized table {
  font-size: 10px !important;
}

#gridOutstd1 .k-grid-header,
#gridOutstd2 .k-grid-header,
#gridMatchBuy .k-grid-header,
#gridMatchSell .k-grid-header,
#gridViewMatchBuySell .k-grid-header,
#gridViewMatchBuy .k-grid-header,
#gridViewMatchSell .k-grid-header,
#gridViewHistoryPayment .k-grid-header,
#gridViewDetailHistoryPayment .k-grid-header,
#gridOutstdPayment .k-grid-header,
#gridUnrealized .k-grid-header {
  padding-right: 2px !important;
}

#gridOutstd1 .k-grid-content.k-auto-scrollable {
  height: 89% !important;
  overflow-y: scroll;
  position: absolute;
  scroll-behavior: smooth;
  overflow-x: scroll;
}

#gridOutstd2 .k-grid-content.k-auto-scrollable {
  height: 85% !important;
  overflow-y: scroll;
  position: absolute;
  scroll-behavior: smooth;
  overflow-x: scroll;
}

#gridMatchBuy .k-grid-content.k-auto-scrollable,
#gridMatchSell .k-grid-content.k-auto-scrollable {
  height: 205% !important;
  overflow-y: scroll;
  position: absolute;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

#gridViewDetailHistoryPayment .k-grid-content.k-auto-scrollable {
  height: 95% !important;
  overflow-y: scroll;
  position: absolute;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

#gridOutstdPayment .k-grid-content.k-auto-scrollable {
  height: 210% !important;
  overflow-y: scroll;
  position: absolute;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

#gridViewMatchBuySell .k-grid-content.k-auto-scrollable,
#gridViewHistoryPayment .k-grid-content.k-auto-scrollable,
#gridUnrealized .k-grid-content.k-auto-scrollable {
  height: 100% !important;
  overflow-y: scroll;
  position: absolute;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

#gridViewMatchBuy .k-grid-content.k-auto-scrollable,
#gridViewMatchSell .k-grid-content.k-auto-scrollable {
  height: 98% !important;
  overflow-y: scroll;
  position: absolute;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

#gridOutstd1 tr.k-state-selected,
#gridOutstd2 tr.k-state-selected,
#gridMatchBuy tr.k-state-selected,
#gridMatchSell tr.k-state-selected,
#gridViewMatchBuySell tr.k-state-selected,
#gridViewMatchBuy tr.k-state-selected,
#gridViewMatchSell tr.k-state-selected,
#gridViewHistoryPayment tr.k-state-selected,
#gridViewDetailHistoryPayment tr.k-state-selected,
#gridOutstdPayment tr.k-state-selected,
#gridUnrealized tr.k-state-selected {
  background-color: #fbc122 !important;
  color: black !important;
}

#gridOutstd1 .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover,
#gridOutstd2 .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover,
#gridMatchBuy .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover,
#gridMatchSell .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover,
#gridViewMatchBuySell .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover,
#gridViewMatchBuy .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover,
#gridViewMatchSell .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover,
#gridViewHistoryPayment .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover,
#gridViewDetailHistoryPayment .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover,
#gridOutstdPayment .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover,
#gridUnrealized .k-grid tbody tr.k-state-hover,
.k-grid tbody tr:hover {
  color: black !important;
  background-color: #ffedbb !important;
}

.k-grid tr.k-alt {
  background-color: white !important;
}

#gridOutstd1 .k-grid-content td,
#gridOutstd2 .k-grid-content td,
#gridMatchBuy .k-grid-content td,
#gridMatchSell .k-grid-content td,
#gridViewMatchBuySell .k-grid-content td,
#gridViewMatchBuy .k-grid-content td,
#gridViewMatchSell .k-grid-content td,
#gridViewHistoryPayment .k-grid-content td,
#gridViewDetailHistoryPayment .k-grid-content td,
#gridOutstdPayment .k-grid-content td,
#gridUnrealized .k-grid-content td {
  background: unset;
  border-color: rgba(171, 168, 50, 0.84) !important;
  border-width: 0 0 1 0 !important;
  font-size: 11px;
  padding: 7px 5px !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
}

#gridOutstd1 .k-grid th,
#gridOutstd2 .k-grid th,
#gridMatchBuy .k-grid th,
#gridMatchSell .k-grid th,
#gridViewMatchBuySell .k-grid th,
#gridViewMatchBuy .k-grid th,
#gridViewMatchSell .k-grid th,
#gridViewHistoryPayment .k-grid th,
#gridViewDetailHistoryPayment .k-grid th,
#gridOutstdPayment .k-grid th,
#gridUnrealized .k-grid th {
  padding: 8px 2px !important;
}

.k-grid th,
#gridOutstd1 .k-grid td,
#gridOutstd2 .k-grid td,
#gridMatchBuy .k-grid td,
#gridMatchSell .k-grid td,
#gridViewMatchBuySell .k-grid td,
#gridViewMatchBuy .k-grid td,
#gridViewMatchSell .k-grid td,
#gridViewHistoryPayment .k-grid td,
#gridViewDetailHistoryPayment .k-grid td,
#gridOutstdPayment .k-grid td,
#gridUnrealized .k-grid td {
  padding: 8px 2px !important;
}

.outstd-sub-label {
  color: rgb(244, 125, 48);
  font-weight: bold;
  line-height: 0.8;
  font-size: 12px;
  padding: 0px;
  padding-top: 3px;
}

.outstd-sub4.bg {
  background: #ffffff;
}

.outstd-sub2.bg,
.outstd-sub3.bg,
.outstd-sub1.bg,
.outstd-sub4.bg {
  margin-bottom: 5px !important;
  padding: 5px 8px !important;
}

.outstd-sub5.bg {
  height: 38.6%;
  margin-bottom: 5px !important;
  padding: 3px 8px !important;
}

.outstd-sub6.bg {
  height: 17%;
  margin-bottom: 5px !important;
  padding: 7px 5px !important;
}

.outstd-sub7.bg {
  margin-bottom: 5px !important;
  padding: 1px 350px !important;
}

.outstd-sub8.bg {
  height: 100%;
  margin-bottom: 5px !important;
  padding: 3px 8px !important;
}

.outstd-sub9 {
  height: 150px;
  padding: 5px;
  margin-bottom: 5px !important;
}

.outstd-sub10.bg {
  height: 77%;
  margin-bottom: 5px !important;
  padding: 3px 8px !important;
}

.outstd-sub11.bg {
  height: 40%;
  margin-bottom: 5px !important;
  padding: 7px 37px !important;
}

.outstd-sub12.bg {
  height: 55%;
  margin-bottom: 5px !important;
  padding: 3px 8px !important;
}

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

.outstd-sub-label label {
  margin-bottom: 0.2rem !important;
  color: #e5ac1e;
}

.arrow_view_match {
  width: 6%;
  padding-top: 50px;
  padding-left: 5px;
}

.detail_view_match {
  width: 95%;
  padding-top: 10px;
  color: #dfac1e;
}

.detail_payment {
  width: 95%;
  padding-top: 10px;
}

.w_match_detail,
.w_payment_detail {
  width: 32%;
  padding: 5px;
}

.w_match_detail1,
.w_payment_detail1 {
  width: 60%;
  padding: 5px;
}

.w_payment_detai2,
.w_payment_detail3 {
  width: 40%;
  padding: 5px;
}

.w_headpayment_detail {
  width: 100%;
  padding: 5px;
}

.headpayment_buy {
  width: 100%;
  color: #01ac50;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  padding-right: 15px;
}

.headerdetail_payment {
  font-weight: bold;
  font-size: 20px;
  font-family: tahoma;
  line-height: 1.22;
  height: 33%;
  text-align: center;
  padding-right: 65px;
}

.txt_detail_match {
  font-weight: bold;
  font-size: 13px;
  font-family: tahoma;
  line-height: 1.22;
  text-align: left;
  height: 28%;
}

.txt_total_match {
  font-weight: bold;
  font-size: 13px;
  font-family: tahoma;
  line-height: 1.22;
  text-align: center;
}

.total_match_kg {
  width: 25%;
  color: #dfac1e;
  padding: 10px;
}

.overdue_width {
  width: 25%;
}

.pin_match_width {
  /* width: 25%; */
}

.overdue_match {
  color: #c52923;
}

.bookbank {
  width: 50%;
  color: #7b81de;
  padding: 10px 5px;
}

.total_amount {
  color: #229c5c;
}

.total_net {
  color: #7b2a7c;
}

.pin_matchBS {
  color: #dfac1e;
}

.pin_match_input-grp {
  width: auto;
}

select#symbolComboInput {
  color: #aba832d6;
  font-weight: 600;
  border: 1.4px solid #dfac1e;
  border-radius: 3px;
}

select#bookbankComboInput {
  color: black;
  font-weight: 600;
  border: 1.4px solid #aba832d6;
  border-radius: 3px;
  width: 300px;
  height: 25px;
}

#bookbank_lbl {
  padding-top: 5px;
}

div#bookBankComboBox {
  padding-left: 5px;
}

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

.div-boxright-11 {
  display: flex;
  padding: 15px;
  width: 11%;
}

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

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

.quantityTextArea {
  text-align: right;
  width: 65px;
}

.div-payment {
  width: 50%;
  text-align: end;
}

#btnPayment,
#btnPaymentBack,
input.btn-send,
#btnDeposite,
#btnDepositeBack,
#btnDepositeSummary {
  width: 88px;
  height: 19px;
  color: white;
  border: 0px;
  background-color: #ffc317;
  border-radius: 10px;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

#btnDepositeSummary,
input.btn-send {
  width: 165px !important;
  height: 30px !important;
  border-radius: 30px !important;
  font-size: 15px !important;
}

#btnPayment:hover,
#btnPaymentBack:hover,
#btnDeposite:hover,
#btnDepositeBack:hover,
#btnDepositeSummary:hover,
input.btn-send:hover {
  background-color: #f0b002;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

#btnDeposite:focus,
#btnDepositeBack:focus,
#btnDepositeSummary:focus,
#btnPayment:focus,
#btnPaymentBack:focus,
input.btn-send:focus {
  border: none;
  outline: none;
}

/* #btnPayment:focus,
#btnDeposite:focus,
#btnPaymentBack:focus,
#btnDepositeBack:focus,
#btnDepositeSummary:focus {
  outline: 0;
} */

.btn-payment-sum {
  margin: auto;
  display: flex;
}

.btn-div {
  padding: 5px;
}

/* --- payment summary ---*/
.headpayment-summary {
  font-size: 15px;
}

.headpayment-sum {
  text-align: center;
  font-size: 20px;
  padding: 5px;
  font-weight: 600;
}

.sub-payment {
  display: flex;
  /* padding: 0px 65px; */
  font-size: 14px;
  font-weight: 600;
}

.sub-payment-sum {
  display: flex;
  width: 50%;
  padding: 0px 13px;
}

.lb-payment-sum {
  width: 50%;
}

.val-payment-sum {
  width: 50%;
  text-align: right;
}

.co-payment {
  color: #ed232d;
}

.lb-payment-totalsum {
  width: 50%;
  text-align: right;
  padding-right: 10px;
}

.val-payment-totalsum {
  width: 50%;
  text-align: left;
  padding-left: 10px;
}

.sub-payment-total {
  padding: 7px;
  font-size: 14px;
  font-weight: 600;
}

select#paymentChComboInput,
select#depositeChComboInput,
input#paymentPINInput,
input#depositePINInput,
input#depositePhoneInput,
input#paymentPhoneInput {
  width: 135px;
  height: 27px;
}

.header-deposite {
  color: #aba832d6;
  font-weight: bold;
  line-height: 0.8;
  font-size: 12px;
  padding: 0px;
  width: 50%;
}

.header-deposite label {
  margin-bottom: 0.2rem !important;
  padding-top: 3px;
}

.sub-header-deposite {
  color: #b05e22;
  width: 100%;
  height: 30%;
  font-size: 20px;
  text-align: center;
  padding-top: 60px;
}

.val-deposite {
  height: 40%;
  width: 100%;
  text-align: center;
  font-size: 20px;
}

input#depositeInput {
  text-align: center;
  font-weight: 600;
}