#lhkexw-marketturnover{color: #00426c;}

#lhkexw-marketturnover .leftpane{
    flex: 40% 1 1;
    margin-right: 10px;
}
#lhkexw-marketturnover .rightpane{
    flex: 60% 1 1;
    margin-left: 10px;
}

#lhkexw-marketturnover .tnover{
    font-size: 2em;
    font-weight: 600;
}

#lhkexw-marketturnover .boardbox .label{
    font-size: 0.8em;
    font-weight: 100;
}

#lhkexw-marketturnover .marketbox .label{
    position: relative;
    white-space: nowrap;
}

#lhkexw-marketturnover .marketbox .day .label, #lhkexw-marketturnover .marketbox .night .label{padding-left: 10px;}

#lhkexw-marketturnover .marketbox .day .label:before{
    content: '';
    width: 10px;
    height: 10px;
    background: url(../images/Sun.png) no-repeat center center;
    display: inline-block;
    margin-right: 10px;
}

#lhkexw-marketturnover .marketbox .night .label:before{
    content: '';
    width: 10px;
    height: 10px;
    background: url(../images/Moon.png) no-repeat center center;
    display: inline-block;
    margin-right: 10px;
}

#lhkexw-marketturnover .type.nm{font-weight: 600; white-space: nowrap;}

#lhkexw-marketturnover .markettable{width: 100%; border-collapse: separate; border-spacing: 0px; padding: 5px 0px;}
#lhkexw-marketturnover .markettable th{text-align: left; border-bottom: 3px solid #163e63; padding-top: 15px; padding-bottom: 15px;}
#lhkexw-marketturnover .markettable td{padding: 10px;}
#lhkexw-marketturnover .markettable tr:nth-child(even) td{background-color: #f2f6f9;}
#lhkexw-marketturnover .mainboard{margin-right: 40px;}
#lhkexw-marketturnover .boardbox{margin-top: 20px;}

#lhkexw-marketturnover .titlesct{font-weight: 100;}

#lhkexw-marketturnover .legend .label{
    margin-left: 20px;
}
#lhkexw-marketturnover .legend .label:before{
    content: '';
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
}
#lhkexw-marketturnover .legend .label.bal:before{background-color: #fdc82e; }
#lhkexw-marketturnover .legend .label.buy:before{background-color: #05822b;}
#lhkexw-marketturnover .legend .label.sell:before{background-color: #e52741;}

#lhkexw-marketturnover .ssconnectbox .title, #lhkexw-marketturnover .szconnectbox .title{font-weight: 600; white-space: nowrap;}



#lhkexw-marketturnover .titlestock{
    margin: 20px 0px;
}

#lhkexw-marketturnover .szconnectbox{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 3px solid #163e63;
    margin-bottom: 5px;
}

#lhkexw-marketturnover .row.balance .bound, #lhkexw-marketturnover .row.balance .value{
    margin-left: 10px;
}

/*#lhkexw-marketturnover .sell, #lhkexw-marketturnover .buy{width:15%;}

#lhkexw-marketturnover .barWrapper{width:70%}*/
#lhkexw-marketturnover .sell.val{margin-right: 5px;transform: translate(0, -50%);}
#lhkexw-marketturnover .buy.val{margin-left: 5px;transform: translate(0, -50%);}

#lhkexw-marketturnover .markettable .day, #lhkexw-marketturnover .markettable .night{text-align: right;}
#lhkexw-marketturnover .sb_pers div{display: inline-block; vertical-align: middle; position:relative;}
#lhkexw-marketturnover .lineSep{width: 1px;height: 1em;background: black;z-index: 100;top: -0.1rem;}
#lhkexw-marketturnover .sell.bar{background-color: #e52741; height: 0.5em;}
#lhkexw-marketturnover .buy.bar{background-color: #05822b; height: 0.5em;}

#lhkexw-marketturnover .balance .sb_pers span{background-color: #fdc82e; height: 10px; display:block;}
#lhkexw-marketturnover .balance .sb_pers{background-color: #f1f5f8; height: 10px; margin-left: 10px;}
#lhkexw-marketturnover .sb_val{margin-left: 10px;}
#lhkexw-marketturnover .balance{padding: 5px 0px;}
#lhkexw-marketturnover .cb_header{padding: 5px 0px;} 
#lhkexw-marketturnover .northbound .bound, #lhkexw-marketturnover .southbound .bound, #lhkexw-marketturnover .northbound .value, #lhkexw-marketturnover .southbound .value{flex: 20% 1 1; max-width:100px;}
#lhkexw-marketturnover .southbound .value, #lhkexw-marketturnover .northbound .value{text-align: right;}
#lhkexw-marketturnover .northbound .sb_pers, #lhkexw-marketturnover .southbound .sb_pers{flex: 60% 1 1; position: relative; height: 1em;}
#lhkexw-marketturnover .type.sb_pers div{position: absolute; top:50%;}
#lhkexw-marketturnover .type.sb_pers .lineSep{left: 50%; transform: translate(-50%,-50%)}
#lhkexw-marketturnover .buy.bar{ transform:translate(0,-50%); left: 50%;}
#lhkexw-marketturnover .sell.bar{ transform:translate(0,-50%); right: 50%;}
#lhkexw-marketturnover .barWrapper .sb_val{display: inline-block; font-weight: 600;}
#lhkexw-marketturnover .barWrapper .sb_pers{display: inline-block;}
#lhkexw-marketturnover .balance.flex, #lhkexw-marketturnover .northbound.flex, #lhkexw-marketturnover .southbound.flex {justify-content:end; -webkit-justify-content: end;}
#lhkexw-marketturnover .rightpane .sb_outer{flex: 60% 1 1; display:inline-block;}
#lhkexw-marketturnover .rightpane .sb_outer .sb_val{display:inline-block;}
#lhkexw-marketturnover .balance .sb_pers{width: 90%; max-width: 250px; top: 1px; display: inline-block;}
#lhkexw-marketturnover .balance .barWrapper{max-width: 300px; width: 100%;}
#lhkexw-marketturnover .leftpane .mainboard, #lhkexw-marketturnover .leftpane .gemboard{display: inline-block;}

@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
    #lhkexw-marketturnover .northbound .sb_pers, #lhkexw-marketturnover .southbound .sb_pers{margin-bottom: 10px;}
}




@media screen and (max-width: 1000px) {	
    #lhkexw-marketturnover .markettable td{padding: 5px;}
    #lhkexw-marketturnover .legend.flex{
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
    }
    #lhkexw-marketturnover .northbound .sb_pers, #lhkexw-marketturnover .southbound .sb_pers{margin-top: 5px; margin-bottom: 5px;}
    
    /* turnover */
    #lhkexw-marketturnover .balance .barWrapper{max-width: initial;}
    
    /* turnover */
    #lhkexw-marketturnover .sb_val{margin: 0px 5px 0px 0px; display: inline-block;}
    #lhkexw-marketturnover .balance .sb_pers{display: inline-block; width:80%; max-width: 300px;margin-left: 0px;}
    #lhkexw-marketturnover .balance .title{display: inline-block;}
    #lhkexw-marketturnover .rightpane{margin: 0px;}
    #lhkexw-marketturnover .legend .label{margin: 0px 5px 0px 0px;}
    #lhkexw-marketturnover{width:100%;}
    #lhkexw-marketturnover .row.balance .bound, #lhkexw-marketturnover .row.balance .value{margin: 0px;}
    #lhkexw-marketturnover .titlerow .title{padding-left: 18px;}
    #lhkexw-marketturnover .leftpane{background:#fff; width:100%; height:auto; border-right:0;}
    
    
    #lhkexw-marketturnover .titlestock{
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
    }
    
    
    #lhkexw-marketturnover .leftpane .lastupdate{ text-align:center; display:none; width:100%; position:absolute; bottom:-485px; z-index:5;}
    #lhkexw-marketturnover .rightpane{width:100%;height:auto;padding-bottom:10px;}
    #lhkexw-marketturnover .rightpane{ background:#fff;width:100%;}
    #lhkexw-marketturnover .rightpane .connectbox{ line-height:140%; height:55px; padding:15px 10px 0px 10px;}
    #lhkexw-marketturnover .rightpane .connectbox .connecttab{ font-size:0.6875rem; height:40px;}
    
    #lhkexw-marketturnover .rightpane .sb_outer{display:block;}
    #lhkexw-marketturnover .rightpane .ssconnectbox .header .legend{ font-size:0.6875rem; line-height:14px; text-align:center; width:100%; padding:0 10px;}
    #lhkexw-marketturnover .rightpane .ssconnectbox .header .legend div{ display:inline-block; float:none;}
    #lhkexw-marketturnover .rightpane .ssconnectbox .detail .row .bound{ display: inline-block; margin-right: 20px;}
    #lhkexw-marketturnover .rightpane .ssconnectbox .detail .row .value{ display: inline-block; margin: 0px;}
    
    
    
    #lhkexw-marketturnover .rightpane .szconnectbox .detail .row .bound{ display: inline-block; margin-right: 20px;}
    #lhkexw-marketturnover .rightpane .szconnectbox .detail .row .value{ display: inline-block; margin: 0px;}
    
    #lhkexw-marketturnover .rightpane .titlestock{float:none;height:auto;padding:0;}
    #lhkexw-marketturnover .rightpane .titlestock .titlesct{ text-align: center;float:none;padding:0;}
    #lhkexw-marketturnover .lastdate{text-align: center;width:100%;padding:5px 0;position: initial;}
    
    .sb_nr{ text-align:center; width:100%;}
    .sb_nr div{ display:inline-block; float:none !important;}
    .sb_pers{ text-align:center; width:100%;}
    .sb_pers .pers{display:inline-block; float:none !important;}
    .sb_pers .perb{display:inline-block; float:none !important;}
    
    .dqr_pers{ text-align:center; width:100%;}
    .dqr_pers .perval{display:inline-block; float:none !important;}
    .dqr_pers .loading{display:inline-block; float:none !important;}
    .rp_title{ font-size:0.6875rem; font-weight:bold; text-align:center; display:block; float:none !important; width:100%; padding-top:20px;}
    
    #lhkexw-marketturnover .loading_sb .sell span abbr{ position: initial;}
    #lhkexw-marketturnover .loading_sb .buy span abbr{ position: initial;}
    #lhkexw-marketturnover .loading_sb .sell, #lhkexw-marketturnover .loading_sb .buy{position: initial; display: inline-block;}
    #lhkexw-marketturnover .loading_sb .centerarea{position: initial; transform: none;}
    #lhkexw-marketturnover .loading_sb .centerbox{position: initial;}
    
    #lhkexw-marketturnover .marketbox .day .label, #lhkexw-marketturnover .marketbox .night .label {padding-left: 0px;}
    #lhkexw-marketturnover .marketbox .day .label:before, #lhkexw-marketturnover .marketbox .night .label:before{margin-right: 5px;}
    
}