@import "../../../css/chart-v2.0.css";
@font-face {
    font-family: 'CheiSbold';
    src: url('./fonts/CHei2HKS-Bold.eot');
    src: url('./fonts/CHei2HKS-Bold?#iefix') format('embedded-opentype'),
        url('./fonts/CHei2HKS-Bold.woff') format('woff'),
        url('./fonts/CHei2HKS-Bold.ttf') format('truetype'),
        url('./fonts/CHei2HKS-Bold.svg#CHei2HKS-Bold') format('svg');
}
@font-face {
    font-family: 'CheiTbold';
    src: url('./fonts/CHei2HK-Bold.eot');
    src: url('./fonts/CHei2HK-Bold?#iefix') format('embedded-opentype'),
        url('./fonts/CHei2HK-Bold.woff') format('woff'),
        url('./fonts/CHei2HK-Bold.ttf') format('truetype'),
        url('./fonts/CHei2HK-Bold.svg#CHei2HKS-Bold') format('svg');
}

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?8m4p2m');
    src:  url('fonts/icomoon.eot?8m4p2m#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?8m4p2m') format('truetype'),
    url('fonts/icomoon.woff?8m4p2m') format('woff'),
    url('fonts/icomoon.svg?8m4p2m#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 24px;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-icon-download:before {
    content: "\e901";
}
.icon-icon-png:before {
    content: "\e903";
}
.pika-table abbr {
    cursor: default;
}
.icon-icon-pdf:before {
    content: "\e902";
}
.icon-icon-print:before {
    content: "\e904";
}
.icon-icon-calendar:before {
    content: "\e900";
}

.history-download a i{
    font-size: 16px;
    vertical-align: middle;
}
#chartexport a i {
    font-size: 33px;
}
.range-wrap i {
    color: #a41719;
    font-size: 20px;
}

body {
    color: #606060;
    font: 18px/1.6 Arial,Helvetica,sans-serif,Verdana;
    -webkit-text-size-adjust: none;
}
.dropdown select, .dropdown .exchange-select{
    font-family: Arial;
    font-size: 18px;
}
#chart[data-highcharts-chart] {
    
}
.chinesesimple{
    // font-family: "noto_sansregular",Arial, sans-serif !important;
}
.chinesetraditional{
    // font-family: "noto_sansregular",Arial,sans-serif !important;
}
#top,#chart,#bottom,#range-selector,#range-input,#chart-footer,#footer,#chartexport{
    border: 0;		
}
#wrapper{
    border:0;
    padding:0;
}
#error-wrapper{
    display:none;
}
#range-selector ul {
    border: none ;
}
#range-selector ul li {
    border-right: none;
}
#range-selector a {
    background-color: #ffffff;
    border: 1px solid #919191;
    color: #606060;   
    margin:0 2px 2px 0 !important;
    font-size: 18px;
}
#range-selector .active a,#range-selector a:hover,#range-input .submit,#range-input .submit:active, #range-input .submit:hover,#chart-footer .history-download a,#chart-footer .history-download a:hover {
    background-color: #c11e24;
    color: #fff;  
}
#chartexport a{
    background: #fff;
}
#chartexport a:hover {
    background-color: #c11e24;
    color: #fff;
}
#range-input .range-wrap input{
    height: 35px;
    font-size: 18px;
    font-family: Arial;
    color: #606060;
    -webkit-appearance: none;
}
.history-download {
    display: block;
    float: left;
    width: 30%;
}
.history-download span.title{
    display: block;
}
.history-download .select-format {
    float: left;
    width: 50%;
}
#chart-footer .history-download a {
    background-color: #c11e24;
    color: #ffffff;
    display: block;
    height: 39px;
    line-height: 22px;
    overflow: hidden;
    padding: 8px 30px;
    text-decoration: none;
    width: auto;
    float: left;
    overflow: hidden;
    position: relative;
    border: 1px solid #919191;
    text-align: center;

}
.dropdown select{
    height:34px;
    padding-left:4px;
}
#range-input .range-wrap .calendar-icon{
    bottom:1px;
}
.history-download .select-format {
    max-width: 240px;
    display: none;
} 
.calendar-icon i{
    color: #606060;
}
.pika-single{
    font-family: "Arial";
}
.is-today .pika-button{
    color:#a41719;
}
.is-selected .pika-button{
    background: #a41719 none repeat scroll 0 0;
    color: #fff;
}
.pika-button:hover{
    background: #a41719 none repeat scroll 0 0 !important;
}
.is-today,
.is-today.is-selected{
    border-radius: 5px;
    background-color: #a41719;
    color: #ffffff;
}
.top-info h3{
    display: block;
    font-size: 62px;
    font-weight: inherit;
    text-align: center;
    float:left;
    width:100%;
    line-height: 150px;
}
#chart-footer h3{
    font-size: 14px;
    color:#606060;
    font-weight: 600;
}
#chart-footer > div {
    padding-left: 0 !important;
    padding-right: 10px !important;
}

#bottom-table td{
    -webkit-text-size-adjust: none;
}
#top-table td.isin{
    text-align:left;
}
#bottom-table td, .bottom-table td{
    border-top: 1px solid #919191;
}
#bottom-table td::before, .bottom-table td::before{
    color:#606060;
}
#top-table td {
    border-bottom: 1px solid #919191;
    font-size:18px;

    padding: 0.4em 0;
}
#bottom-table td, .bottom-table td,
#bottom-table th, .bottom-table th{
    font-size:18px;
    text-align:center;
    color:#606060;
}
#bottom-table td:first-child, .bottom-table td:first-child,
#bottom-table th:first-child, .bottom-table th:first-child{
    text-align:left;
}
.pika-table abbr {
    cursor: default;
}
#bottom-table thead tr:last-child th, .bottom-table thead tr:last-child th{
    color:#606060;
    font-weight: 600;
}
#error-wrapper {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    display: block;
    float: left;
    padding: 0;
    width: 100%;
}
strong{
    color:#606060;
    font-weight:normal;
}
#range-input .title{
    color:#606060;
    font-weight:normal;
}

#range-input .submit {
    float:left;
    margin-top: 29px;
    height: 35px;
}
#bottom-table .row1 td{
    background-color:#d13233;
}
.history-download h3{
    color: #606060;
    font-size: 17px;
}
#chart-header{
    position:relative;
}
#range-input .range-wrap {
    display: block;
    float: left;
    margin-right: 7px;
    max-width: 240px;
}
.chinesesimple #bottom-table th, .bottom-table th{
    font-family: 'noto_sansbold';
}
.chinesetraditional #top-table .row1 .col2 strong,
.chinesesimple #top-table .row1 .col2 strong,
.english #top-table .row1 .col2 strong{
    font-weight: bold;
}
#top .top-company-info{
    
    font-size: 20px;
    font-weight: 500;
    width:70%;
    color: #aa0000;
    font-weight: bold;
}
.top-info h3{
    font-size: 72px;
}
#chart-info{
    padding:0.4em 1.4em
}

.disclaimer {
    clear: both;
    display: block;
    float: left;
    font-size: 15px;
    padding: 0.4em 1em;
}

#chartexport {
    padding: 0.8em 1em;
    position: absolute;
    right: 0;
    text-align: right;
    top: 101px;
    width: auto;
}
#chartexport a{
    padding:10px 6px 3px 10px;
    color: #606060;
}
#chartexport .fa{
    font-size:24px;
}
#bottom-table td::before, .bottom-table td::before{
    font-weight:normal;
}
.alteration-right{
    color:grey;
}
.alteration-up{
    color:#65962E;
}
.alteration-down{
    color:#D31145;
}
#range-selector{
    font-size:14px;
    padding: 0.4em 1.3em;
}

.pika-table abbr {
    cursor: default;
    text-decoration: none;
}
#error-wrapper {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    display: block;
    float: left;
    padding: 0;
    width: 100%;
}
#range-selector li:last-child a {
    margin-right: 2px;
}
#top-table{
    padding: 5px 0px;
}
#top-table .row2 td{padding-top:0;}

#bottom-table td, .bottom-table td,
#bottom-table th, .bottom-table th{
    text-align:center;
}
#bottom-table td.col1, .bottom-table td.col1,
#bottom-table th.col1, .bottom-table th.col1{
    text-align:left;
}

#top-table .row4 td, #top-table .row5 td, #top-table .row6 td, #top-table .row7 td, #top-table .row8 td, #top-table .row9 td, #top-table .row10 td, #top-table .row11 td, #top-table .row12 td {
    height: auto;
}
#tr_end::-ms-clear {
    display: none;
}
#tr_beg::-ms-clear {
    display: none;
}
.dropdown{
    height: 40px;
    margin-top: -1px;
    border:1px solid #919191;
}
.dropdown select, .dropdown .exchange-select {
    height: 36px;
    padding-left: 9px;
}
.dropdown select option, .dropdown .exchange-select option{
    //background-color: #a41719;
    //color: #ffffff;
}
.dropdown select option:hover, .dropdown .exchange-select option:hover{
    //background-color: #a41719;
    //color: #ffffff;
}
.exchange-select {
    background-color: #fff !important;
    padding-top: 4px;
}
.stock-code{
    //font-weight: 600;
    
}

#top-table .row3 td{
    padding-bottom: 0;
}

#chart[data-highcharts-chart] {
    background: rgba(0, 0, 0, 0) url("images/logo_black.png") no-repeat scroll 48.7% 35%;
    box-sizing: border-box;
    padding-right: 10px;
    width: 100%;
}

/*Media Queries*/
@media screen and (min-width:1024px){
    #chart-footer > div:nth-child(2n+3) {
        clear: none;
    }

}

@media screen and (max-width:1024px){
    .history-download {
        width: 31%;      
    } 
    #top-table tr{
        width: 50%;
    }

    #top-table .row4 td:last-child,
      #top-table .row6 td:last-child,
      #top-table .row8 td:last-child,
      #top-table .row10 td:last-child {
        width: 46%;
        margin-right: 4%;
      }
      #top-table .row5 td:first-child,
      #top-table .row7 td:first-child,
      #top-table .row9 td:first-child,
      #top-table .row6 td:first-child,
      #top-table .row10 td:first-child,
      #top-table .row11 td:first-child,
      #top-table .row13 td:first-child {
        width: 50%;
        margin-left: 0%;
      }

      #top-table .row5 td:last-child, #top-table .row9 td:last-child, #top-table .row12 td:last-child, #top-table .row13 td:last-child{
        width: 50%;
        margin-right: 0;
      }

}
@media screen and (max-width:1023px){
    #chartexport{top: 150px;}
}
@media screen and (max-width:974px){
    .history-download .select-format {
        width: 39%;
    }
    .history-download a{
        width: 103px;
        font-size: 18px;
    }    
}

@media screen and (max-width:800px){
    .top-info h3{
        font-size: 48px;
    }
    .history-download {
        display: block;
        float: left;
        width:100%;
        padding:0px;
        margin-left:0px;        
    } 
    #chart[data-highcharts-chart] {
        
    }
}

@media screen and (max-width:768px){
    .top-info h3{
        font-size: 48px;
    }
    .highcharts-axis-labels.highcharts-xaxis-labels{
        margin-top: 10px;
    }
    #top .top-company-info{width: 100%;}
    #top .top-share-info{float: left;}
    #range-input .range-wrap{width: 50%;}
    #chartexport{position: relative;top: 0;float: left;padding: 0.2em 0 0.2em 0.2em;}
    #range-input .range-wrap {
        float: left;
        margin-right: 0;
        max-width: 100%;
        padding-right: 0;
        width: 50%;
    }
    #range-input .range-wrap.range-begin {
        padding-right: 5px;
    }
    #range-input .range-wrap.range-begin .calendar-icon {
        right: 10px;
    }
    #range-input .range-wrap .calendar-icon {
        bottom: 1px;
    }
    #range-input .submit{margin-top: 10px;}

    #chart[data-highcharts-chart]{
        background: rgba(0, 0, 0, 0) url("images/logo_black.png") no-repeat scroll 43% 35%;
        background-size: 40%;
    }
}


@media screen and (max-width:600px){
    #bottom-table td, .bottom-table td, #bottom-table th, .bottom-table th {
        text-align: left!important;

    }
    #chart[data-highcharts-chart] {
        
    }
    #top-table .row2,
    #top-table .row1,
    #top-table tr{
        width: 100%;
    }
    #top-table .row1 td{width: 50%;}
    #top-table .row1 .col2 {
        text-align: right;
    }
    #top-table .row1 td,
    #top-table .row2 td{border-bottom: 1px solid #919191;vertical-align: middle;}
    #top-table .row2 .col2,
    #top-table .col2 {
        text-align: right;
    }
    #top-table .row4 td:last-child, #top-table .row6 td:last-child, #top-table .row8 td:last-child, #top-table .row10 td:last-child, #top-table .row12 td:last-child{
        margin-right: 0;
        width: 50%;
    }
    #top-table .row5 td:first-child, #top-table .row7 td:first-child, #top-table .row9 td:first-child, #top-table .row11 td:first-child, #top-table .row13 td:first-child{
        margin-left: 0;
        width: 50%;
    }
    #top-table .row1 td,
    #top-table td,
    #top-table tr{
        float: none;
        width: auto;
    }

    #top-table td{
        display: table-cell;
    }

    #top-table .row1 .col1{vertical-align: middle;}

}

@media screen and (max-width:580px){
    #bottom-table td, .bottom-table td,
    #bottom-table th, .bottom-table th{

        text-align:left!important;
    }

    #chart[data-highcharts-chart]{
        background: rgba(0, 0, 0, 0) url("images/logo_black.png") no-repeat scroll 43% 35%;
        background-size: 50%;
    }
}

@media screen and (max-width:567px){
    #bottom-table .row0 td{
        font-size:18px!important;
    }

}
@media screen and (max-width:480px){
    #bottom-table td, .bottom-table td,
    #bottom-table th, .bottom-table th{

        text-align:left!important;
    }
    #range-input .submit,
    #range-input .range-wrap{
        width: 100%;
        max-width: 100%;
    }

    #range-selector ul li{
        width: 25%;
    }

    #range-input .range-wrap.range-begin{
        padding-right: 0;
    }

    #chart[data-highcharts-chart]{
        background: rgba(0, 0, 0, 0) url("images/logo_black.png") no-repeat scroll 26% 35% / 60% auto;
    }

    #range-input .range-wrap .calendar-icon{
        right: 10px;
    }
}



@media screen and (max-width:479px){

    #top-table  .row3 .col2{

        text-align:left;
    }


}
@media screen and (max-width:360px){
    .history-download a{
        text-align:center;  
    }
    .top-info h3{
        font-size: 48px;
    }
    #top .top-share-info{
        padding-top: 5px!important;
    }
    #top .top-company-info {
        padding-bottom: 6px;

    }
    #chart-footer > div{width: 100%;padding-right: 0 !important;}
    .history-download{padding-top: 0;}

    #top-table td{
        white-space: nowrap;
    }
}

@media screen and (max-width:320px){
    #bottom-table td, .bottom-table td,
    #bottom-table th, .bottom-table th{

        text-align:left!important;
    }
    .history-download a{
        text-align:center;  

    }
    .top-info h3{
        font-size: 48px;
    }
    #top .top-share-info{
        padding-top: 5px!important;
    }
    #top .top-company-info {
        padding-bottom: 6px;

    }
}

































.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}