.marketWatch h1, .marketWatch h2, .marketWatch h3, .symbol-information h1, .symbol-information h2, .symbol-information h3, .funds h1, .funds h3, .fund h1, .fund h3, .indices h1, .indices h3, .index h1, .index h3, .statBourse h1 {background: #dce7f2; line-height: 30px; padding:10px; margin-bottom:10px; text-align:center}
ul.filterGroup {display:flex; margin-bottom:10px;}
ul.filterGroup li, ul.listGroup li {flex:1; display: inline-block; padding: 0px 10px; line-height:35px; border: 1px solid #aaa; border-radius: 4px; margin: 0 5px; text-align: center; cursor:pointer}
ul.listGroup {display:unset}
ul.listGroup li {width: 16.26%; white-space: nowrap; overflow: hidden;}
ul.filterGroup li.active {background:#120844; color:#fff; border:1px solid #120844}
ul.filterGroup li.active a {color:#fff}
ul.filterGroup li:not(.active):hover {background: #ccc;}
ul.filterGroup li a, ul.listGroup li a {display:block}
ul.filterGroup li.groupList {padding: 0px 3px;}
ul.filterGroup li.groupList select {height:30px; width:100%}
.red {color: #db524b}
.green {color: #1bbf89}
g[aria-labelledby*="id-"][aria-labelledby$='-title']:not([aria-valuetext]):not([role]) {display:none !important}

/* market-information */
.market-information, .market-graph {display:flex}
.market-information > div, .market-graph > div {flex:1}
.market-information > div:nth-child(2) {border-left:1px solid #eee}
.market-information .info > div {display:flex; background: #b1d0e3; margin: 2px; color: #171066; line-height: 30px; text-align: center;}
.market-information .info > div > div {flex:1; direction:ltr;}
.market-information.all-info {display:none}
.market-information .info > div > div:last-child, .all-info .info > div > div:nth-child(odd) {color:#222; background:#fff; margin:1px}
.market-information .info .status::before {font-family:FontAwesome !important}
.market-information .info .status.close::before {content:"\f05c"; color:red; padding:0 10px}
.market-information .info .status.open::before {content:"\f05d"; color:green; padding:0 10px}
.market-information .index {font-size:16px !important; font-weight:bold !important; text-align:center; direction:ltr; line-height:40px; padding-top:10px}
.market-information .index .value{font-size:18px}
.market-information .index .change {font-size:13px; font-weight:normal; line-height:30px}
.market-information .index.up .value, .market-information .index.up .change {color:green}
.market-information .index.down .value, .market-information .index.down .change {color: red}
.market-information .index .value::before {font-family:FontAwesome !important; content:"\f077"; font-size:20px; line-height:35px; display:block}
.market-information .index.down .value::before {content:"\f078";}
.market-information .index .time {font-size:12px; font-weight:normal}
.market-information .index .time::after{font-family:FontAwesome !important; content:"\f017"; padding-left: 10px;}
.market-graph {margin:10px 0}
.market-graph > div {height: 190px; direction: ltr; padding-bottom:15px; margin-left:30px; border: 1px solid #eee}
.market-graph > div:last-child {margin-left:0}

/* marketwatch list */
.table-wrapper {overflow: auto}
.marketWatch h1 {display:none;}
.marketWatch .table-wrapper {max-height: calc(-100px + 100vh);}
table#marketWatch {width:100%; color: #222; table-layout: fixed; border-collapse: collapse;}
#marketWatch tr.even {background: #eee}
#marketWatch th, #marketWatch td {text-align:center ; padding:0 10px; line-height:40px; white-space: nowrap; overflow: hidden}
#marketWatch th {position: sticky; top: 0; z-index: 2; width: 80px; line-height:50px; background: #38558c; color: #fff; font-size: 11px;}
#marketWatch .symbol {width:100px; text-align:right;}
#marketWatch td.closePercent, #marketWatch td.lastPercent, #marketWatch td.valueTrade {direction: ltr}
#marketWatch th i {padding: 0 3px; cursor: pointer}
#marketWatch tr.hidden {display:none}
#marketWatch td.closePrice, #marketWatch td.closePercent {background: rgba(120, 215, 215, 0.1)}
#marketWatch td.lastPrice, #marketWatch td.lastPercent {background: rgba(142, 147, 223, 0.1)}
#marketWatch td.numberTrade, #marketWatch td.volumeTrade, #marketWatch td.valueTrade {}
.filters td.valueFilter {direction:ltr; background: rgba(141, 150, 168, 0.1)}
.filters table tr:nth-child(even) {background:#eee}


/* Symbol */
.symbol-information h1 {display:none;}
.symbol-information {padding: 2px 8px}
.symbol-box {border:1px solid #ddd; margin: 2px; padding: 10px;}
.symbol-bar {display:flex; padding: 10px 20px !important;}
.symbol-bar > div {white-space: nowrap}
.symbol-bar > div:nth-child(1) {width: -moz-available; width: -webkit-fill-available; overflow:hidden}
.symbol-bar > div:last-child {float:left; width:100px; direction:ltr;}
.symbol-bar > div > div:nth-child(1) {margin-bottom:5px}
.symbol-bar .symbol-name {font-size:20px; font-weight:bold}
.symbol-bar .num {font-size:15px}
.symbol-bar .price {font-size:20px; font-weight:bold; margin-right:5px}
.symbol-info div {flex:1;}
.symbol-row {display:flex; padding: 0 10px;}
.symbol-row > div {color: #222; border-bottom: 1px solid #eee; line-height:50px}
.symbol-row > div > span.lbl {color:blue; font-weight:bold;}
.symbol-row > div > span.txt {margin-right:20px;}
.symbol-row > div > span.num {display: inline-block; direction:ltr; margin-right:20px;}
.symbol-row a {color: #222 !important;}
.symbol-container {display:flex}
.today-information {flex:1}
.today-information > div {color: #222; line-height:40px; border-bottom: 1px solid #eee; overflow: hidden}
.today-information span.num {display: inline-block; direction:ltr; float:left; margin-left:10px}
.today-information span.lbl {float:right; margin-right:10px}
.group-information {flex:1}
.group-information table {width: 100%; color: #222; border-spacing: 0; margin-top: 10px}
.group-information th {color:#fff; line-height: 30px; background: #38558c}
.group-information th i {padding: 0 3px; cursor: pointer}
.group-information table td {line-height: 30px; text-align:center; border-bottom: 1px solid #eee; direction:ltr}
.group-information table tr:last-child td {border-bottom: unset}
.group-information table tr:nth-child(even) {background: #eee}
.group-information table .symbolName {text-align:right;padding-right:10px; line-height:40px}
.symbol-traders, .symbol-table {flex:1}
.symbol-traders .header-traders, .symbol-traders .traders, .symbol-traders .voltraders{display:flex}
.symbol-traders .header-traders > div {flex:1; text-align:center; line-height:40px; margin:0 5px; background:#d90c92; color:#fff;}
.symbol-traders .header-traders .real-traders {background:#09bfbf;}
.symbol-traders .traders > div {flex:1; text-align:center}
.symbol-traders .traders > div:not([class]) {flex:0.3}
.symbol-traders .traders .bar-traders {flex:2}
.symbol-traders .voltraders {margin-top:10px; color: #222}
.symbol-traders .voltraders > div{flex:1; text-align:center; direction:ltr}
.symbol-traders .bar-traders {margin: 5px; border-radius: 5px; overflow:hidden} 
.symbol-traders .bar-traders label {display: list-item; float: right; list-style: none; height: 100%;}
.symbol-traders .real-buy, .symbol-traders .real-sell {background:#09bfbf}
.symbol-traders .legal-buy, .symbol-traders .legal-sell {background:#d90c92}
.symbol-traders .legal_real {line-height: 35px; margin: 10px 5px 0 5px; text-align: center; color: #222; border: 1px solid #ccc; border-radius: 5px;}
.symbol-traders .legalbuy, .symbol-traders .legalsell {color:#d90c92; direction:ltr; display: inline-block; margin-right:20px;}
.symbol-traders .legalsell {color:#09bfbf;}
.symbol-table .header-trade {display:flex}
.symbol-table .header-trade > div {flex:1; text-align:center; line-height:40px; margin:0 5px; color:#fff; background:#049b78}
.symbol-table .header-trade .sell-trade {background:#f03a3d}
.symbol-table .row-trade {display:flex; line-height: 40px}
.symbol-table .row-trade > div {flex:1; padding: 0 5px; text-align:center; color: #222;}
.symbol-table .row-trade .vol-trade {flex:2}
.symbol-table .row-trade .price-trade.buy {color:green}
.symbol-table .row-trade .price-trade.sell {color:red}
.symbol-table .price_range {line-height: 35px; margin: 30px 10px 10px;}
#price-range-bar {width:100%; position:relative}
#price-range-bar span.range {position: absolute; left: 0; bottom: 0; color: #949ba2; padding-bottom: 5px; font-size: 12px; display: inline-block; z-index: 1;}
#price-range-bar span.range:before {position: absolute; left: 0; bottom: 0; content: ""; width: 1px; height: 9px; background-color: #686971}
#price-range-bar span.yesterday {margin-left:-15px}
#price-range-bar span.yesterday:before {left: 15px;}
#price-range-bar span.high {left: auto; right:0}
#price-range-bar span.high:before {left: auto; right: 0;}
#price-range-bar .line-bar {position: relative; height: 4px; background-color: #e1e1e1;}
#price-range-bar .base-bar {position: absolute; top: 0; bottom: 0; z-index: 3; -webkit-transition: width .2s ease; -moz-transition: width .2s ease; -o-transition: width .2s ease; transition: width .2s ease;}
#price-range-bar .plus-bar {background-color: green;}
#price-range-bar .minus-bar {background-color: red;}
#price-range-bar .endpoint {position: absolute; top: -3px; width: 6px; height: 6px; background:#fff; border-radius: 50%; border: 2px solid #949ba2; z-index: 4}
#price-range-bar span.price {position: absolute; bottom: -25px;}
#price-range-bar span.price.close {bottom:-12px}
#price-range-bar span.price:before {content: "\f0d8"; font-family: Fontawesome; font-size: 20px}
#price-range-bar span.price.close:before {content: "\f0d7";}
#price-range-bar .modal {display:none; width: max-content; position: absolute; top:5px; left:0; padding:3px; background:#fff; border:1px solid #38558c; border-radius: 5px;}
#price-range-bar .modal-cover {padding:5px 10px; background:#38558c;}
#price-range-bar .modal > div > div {line-height:25px; font-size:12px; color: #fff; overflow:hidden}
#price-range-bar .modal span {background: #fff; padding: 2px 0; margin:1px 0; border-radius: 4px; display: block; float:left; width: 55px; text-align: center}
#price-range-bar .modal div > span:last-child {color: #222; margin:1px 5px}
#price-range-bar .modal .red {color:red; direction: ltr;}
#price-range-bar .modal .green {color:green}
.legal_real_info {display:flex; text-align:center; line-height:40px; margin-bottom:5px}
.legal_real_info:last-child {margin-bottom:0}
.legal_real_info > div {flex: 1; background: #38558c; border-radius: 5px; overflow: hidden}
.legal_real_info > div:last-child {margin-right:5px}
.legal_real_info > div.real {background: #049b78}
.legal_real_info > div.legal {background: #f03a3d}
.legal_real_info > div.none {background: #717171}
.legal_real_info > div > span {display: block; color:#fff; white-space: nowrap;}
.legal_real_info > div > span:last-child {margin: 2px; background: #fff;}
.legal_real_info > div > span:last-child {border-radius: 0 0 5px 5px}
.legal_real_info div > span:last-child {color:unset}
.legal_real_info div.legal > span:last-child {color:red}
.legal_real_info div.real > span:last-child {color:green}
.increase_asset_info > div {display:flex; border-bottom: 1px solid #eee; line-height: 45px; color:#222}
.symbol-message {display:block; text-align:center; line-height: 45px; color:#222}
.increase_asset_info .header {background: #38558c; color:#fff; line-height:40px}
.increase_asset_info > div > span {flex:1; text-align:center; direction:ltr; white-space: nowrap; overflow: hidden;}
.revenue_info > div {margin:-5px; overflow:hidden}
.revenue_info > div > div {float: right; width: calc( 16.66% - 10px ); text-align: center; background: #717171; margin: 5px; border-radius: 5px}
.revenue_info .rev_plus {background: #049b78; color:green;}
.revenue_info .rev_minus {background:#f03a3d; color:red}
.revenue_info > div > div > span {display:block}
.revenue_info > div > div > span:nth-child(1) {color:#fff}
.revenue_info > div > div > span:last-child {background:#fff; margin: 1px; border-radius: 0 0 5px 5px; direction:ltr}
.transparent {opacity:0.5}

.symbol-stats {flex:2; display:flex; flex-direction: column}
.chartdiv {flex:2; direction: ltr; position:relative}
#chartdiv {height:calc( 100% - 50px )}
#chartpopup {position: absolute; top: 40px; left: 150px; background: #fff; width: 120px; height: 50px; text-align: center; border: 1px solid #ddd; border-radius: 3px; z-index:1000}
.btns-adjust {position:absolute; top:15px; right: 0; left: 0; margin: 5px 20px; z-index:10}
.btn-adjust {float:right; width: 70px; padding:2px; text-align:center; border: 1px solid #aaa; border-radius: 3px; cursor:pointer;}
.btn-adjust.btn-active {background:#38558c; color:#fff; border: 1px solid #38558c}


/* funds list */
.funds h1 {display:none}
.funds ul.filterGroup li {width: 60px;}
.funds .table-wrapper {max-height: calc(-100px + 100vh);}
table#fundsList {width:100%; table-layout: fixed; border-collapse: collapse;}
#fundsList tr {}
#fundsList tr.even {background: #eee}
#fundsList th, #fundsList td {text-align:center; line-height:20px; height:50px; vertical-align: middle; padding:0 10px}
#fundsList th {position: sticky; top: 0; z-index: 2; width:60px; background: #38558c; color: #fff; font-size: 11px;}
#fundsList td {border-left: 1px solid #eee;}
#fundsList th.name {width:150px}
#fundsList td.name {text-align:right}
#fundsList .number {direction: ltr}
#fundsList th i {padding: 0 3px; cursor: pointer}
#fundsList tr.hidden {display:none}

/* funds one */
.fund h1, .fund h2 {text-align:right !important}
.combinationAssets, .chartHistory {flex:1}
.combinationAssets h3, .chartHistory h3 {text-align:center}
.fund-information div {flex:1; color:#222}
.fund-container {display:flex}
.fund-info {display:flex; padding: 0 10px;}
.fund-info > div {border-bottom: 1px solid #eee; line-height:50px; padding: 15px 0;}
.fund-info > div > span.lbl {display:block; text-align:center; color:blue; font-weight:bold;}
.fund-info > div > span.txt {display:block; text-align:center;}
.fund-info > div > span.num {display: block; text-align:center; direction:ltr; font-size:15px;}
.fund #chartHistory, .fund #pieAssets {direction: ltr; height:300px}


/* indexes list */
.indices h1 {display:none}
table#indexWatch {width:100%; table-layout: fixed; border-collapse: collapse;}
#indexWatch tr:nth-child(even) {background: #eee}
#indexWatch th, #indexWatch td {text-align:center ; padding:0 10px; line-height:40px; white-space: nowrap; overflow:hidden}
#indexWatch th {width:80px; line-height:50px; background: #38558c; color: #fff; font-size: 11px;}
#indexWatch .indexName {width:120px; text-align:right}
#indexWatch td.indexValue, #indexWatch td.indexDifference, #indexWatch td.indexPercent, #indexWatch td.lastUpdate{direction: ltr}
#indexWatch th i {padding: 0 3px; cursor: pointer}

/* indexes One */
.index #chartHistory {flex:2; direction: ltr; margin: 2px; padding: 10px 10px 20px; height:500px; overflow:hidden}
.index .influence {display:flex}
.index .influence > div {flex:1; border: 1px solid #eee; border-radius: 3px; margin:0 10px 0 0; text-align: center;}
.index .influence > div.infplus {margin:0 0 0 10px;}
.index .influence h3 {margin:0 !important}
.index .influence .inftable {max-height:500px; overflow-y:scroll}
.index .influence table {width:100%; border-collapse: collapse; line-height:35px}
.index .influence tr {border-bottom:1px solid #eee}
.index .influence td {width:60%}
.index .influence td.symbol {width:20%; text-align:left; padding-left:20px}
.index .influence td.value {direction:ltr; width:20%; text-align:right; padding-right:20px}
.index .influence .infplus .value {color:green}
.index .influence .infminus .value {color:red}
.index .influence .procbar span {float:right; height:10px}
.index .influence .infplus .procbar span {background:green}
.index .influence .infminus .procbar span {background:red}

/* statistics */
.statBourse h1 {display:none}
.statBourse h3, .statContainer .statDate {background: #456975; color:#fff; line-height: 30px; padding: 5px; margin-bottom: 10px; text-align: center;}
.statBourse .statList h3 {background: #b84c4c;}
.statBourse .statList:nth-child(odd) h3 {background: #018a80;}
.statContainer {display:flex; overflow:hidden}
.statContainer > div, .stat-header > * {flex:1; color: #333}
.statContainer .statDate {flex: 0.33; text-align:left; padding-left:10px}
.statContainer .statBox {text-align: center; margin:0 4px 4px 0; padding:2px; border: 1px solid #ccc;; border-radius: 5px; overflow: hidden;}
.statContainer .statBox:first-child {margin-right:0}
.statContainer .statBox > div {direction:ltr; line-height:30px}
.statContainer .statBox .boxHeader {background:#659fb5; color:#fff; white-space:nowrap}
.statContainer .statBox .boxBody {background:#b2d0da; font-weight: bold; font-size:15px}
.statContainer .statBox .boxFooter {background:#d0eef8; font-weight: bold}
.statContainer .statBox span {font-size:9px; line-height: 25px; font-weight:normal}
.statContainer .statBox:nth-child(6) .boxFooter, .statContainer .statBox:nth-child(7) .boxFooter {font-size:15px}
.statContainer .boxFooter {color:#427888}
.statContainer .green {color:green !important}
.statContainer .red {color:red !important}
.statContainer .statGraph, .statContainer .statNumber {border:1px solid #ccc; margin:5px 0 0 5px}
.statContainer .statGraph {flex:2.55; margin-left:0}
.statNumber .rowNumber {display:flex; line-height:45px; margin: 5px; border-radius: 5px; color: #171066; background: #b1d0e3; /*background: #033a6a;*/}
.statNumber .rowNumber > div {flex:1; text-align:center}
.statNumber .rowNumber .numNumber {flex:0.8; background: #fff; color:#555; margin: 2px; border-radius: 5px;}

.statLists {display:flex}
.statList {flex:1; margin:5px 0 0 5px; padding-bottom: 10px;}
.valueChart, .investChart {margin-top:5px; margin-right:5px}
.statContainer .statList, .statContainer .valueChart,  .statContainer .investChart {border:1px solid #ccc;}
.barGraph {max-height: 446px; overflow-y: auto;}
.barGraph .barRow {display:flex; line-height:25px;}
.barGraph .barRow .label {flex:1; white-space: nowrap; margin: 2px 5px; overflow: hidden;}
.barGraph .barRow .bar {flex:4; margin: 2px 5px; overflow:hidden}
.barGraph .barRow .bar > div {overflow:hidden}
.barGraph .barRow .bar > div > div {float:right; direction: ltr; line-height:20px; margin-top:3px}
.barGraph .barRow .bar span {padding:0 5px}
.statList.group .barGraph .barRow .label {font-size:11px}
.statList.group .barGraph .bar{flex:2;}
.statList:nth-child(odd) .barGraph .barRow .bar > div > div {background: #36c7ba;color: #fff;}
.statList:nth-child(odd) .barGraph .barRow:first-child .bar > div > div {background: #008e7d;}
.statList:nth-child(even) .barGraph .barRow .bar > div > div {background: #f97978; color: #fff;}
.statList:nth-child(even) .barGraph .barRow:first-child .bar > div > div {background: #b94b4a;}
.statList:last-child {margin-left:0}

#barGraph, #groupValueBar {height: 380px; direction: ltr}
#daily-invest {margin-top:10px}
#valueGraph, #investGraph {height: 200px; direction: ltr}
.statBourse .statGroup {border:1px solid #ccc; margin-top:10px}
.statGraph .index-group {padding-left: 5px}
.statGraph .index-group > div {position: absolute !important; top:310px !important; left: 15px !important; width:unset !important; height:unset !important}