* { font-family: 'Muli-Regular', sans-serif; font-size: 14px; line-height: 20px;; }
html, body, div, span, embed, object, iframe, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, output, q, samp, small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, form, fieldset, legend, label, main, section, article, aside, canvas, details, summary, figure, figcaption, header, footer, hgroup, menu, nav, time, mark, audio, video { font-weight: normal; }
body { background: white; color: #1c2e36; font-family: 'Muli' , sans-serif; font-size: 100%; line-height: 1.5; font-weight: 400; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke: 1px transparent; }
main, section, article, aside, details, summary, figure, figcaption, header, footer, hgroup, menu, nav { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
ol, ul { list-style: none; }
table, caption, tbody, thead, tfoot, tr, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
input, select { vertical-align: middle; }
select, button { text-transform: none; }
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="file"], input[type="checkbox"] { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-family: 'Muli-ExtraBold', sans-serif; font-size: 41px; line-height: 50px; }
h2 { font-family: 'Muli-ExtraBold', sans-serif; font-size: 24px; line-height: 24px; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
b, strong, optgroup { font-weight: bold; }
hr { display: block; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #ccc; }
a { text-decoration: none; color: inherit; }
a:hover { color: #21409a; }
p { margin-bottom: 10px; }
body { /*max-width: 1220px;*/ width: auto; }

.sub-note { font-size: 12px; }
.btn-blue { line-height: 44px; display: inline-block; border-radius: 4px; padding: 2px 30px; background-color: #21409a; border: 1px solid #21409a; color: #FFF; text-align: center; position: relative; }
.paging { margin-top: 20px; }
.paging-nav a { font-weight: normal !important; background-color: #F5F5F5 !important; color: #b3b3b3 !important; border-color: #fff !important; padding: 5px 0px 0px 0px !important; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; margin: 0 3px; border-radius: 50%; width: 30px; height: 30px; text-align: center; }
.paging-nav a:hover, .paging-nav a.paging-current { background-color: #21409A !important; color: #fff !important; }

.stock-main h1 { margin-bottom: 40px; }
.stock-main h2 { border-bottom: 3px solid #e0e0e0; max-width: 100%; padding-bottom: 10px; margin-bottom: 10px; float: left; clear: both; margin-bottom: 30px; }
.stock-main .icon-h1 { height: 23px; margin-left: 40px; }
.layout-page-footer a { color: #2880c4 !important; }
.embed-box { margin-bottom: 40px; clear: both; width: 100%; }
.embed-box table td { padding: 15px 5px; }
.embed-box tbody tr, .embed-box tbody tr th { border-bottom: 1px solid #e0e0e0; }
.embed-box .trHead, .embed-box tbody tr:last-child { border-bottom-width: 3px; }
.embed-box .local-bar { margin-bottom: 20px; }
.embed-box .local-bar div { float: left; margin-right: 20px; }
.embed-box .local-bar .btn-blue { text-transform: uppercase; }
.embed-box .local-bar input[type="text"] { margin-right: 5px; height: 35px; line-height: 35px; width: 198px; background-color: #FFF; border: 0px solid #E0E0E0; }
.embed-box .local-bar img, .compare-filter-container .icon-arrow-down { width: 20px; position: absolute; top: 12px; left: 20px; }
.embed-box .divExport { color: #9e9e9e; float: left; padding-left: 10px;}
.embed-box .divExport img { height: 22px; margin-right: 4px; top: -1px; position: relative; }
/*--------------------------------------------------- ForeignInvestor ------------------------------*/
.stock-foreigninvestor { width: 45%; margin-bottom: 80px; }
.stock-block-chart { height: 250px; width: 50%; float: right; }
.stock-block-chart .stock-block-title { border-bottom-color: #e0e0e0 !important; color: #1c2e36; text-transform: uppercase; }
.stock-block-table { border: 1px solid #c1c1c1; margin-top: 10px; }
.stock-block-table > div:first-child { border-bottom: 3px solid #e0e0e0; }
.stock-block-table > div > div { width: 17%; display: inline-block; text-align: right; padding: 10px 0; font-size: 14px !important; }
.stock-block-table > div:first-child > div { width: 40%; text-align: center; font-weight: bold; }
.stock-block-table > div > div:first-child { width: 14%; border-right: 1px solid #c1c1c1; padding-left: 1%; text-align: left; }
.stock-block-table > div:first-child > div:first-child { border-right: 0px; }
.stock-block-table > div > div.col-2 { width: 22%; }
.stock-block-table > div > div.col-2-first { border-right: 1px solid #c1c1c1; padding-right: 1%; }
.stock-block-table-title { background: #f2f2f2; font-weight: bold; }

#top3_ownershipstructure { width: 45%; }

.embed-box .overview-left-pricerealtime-container { width: 25%; float: left; }
.embed-box .home-chart { width: 74%; float: right; margin-bottom: 10px; }
.highstock-chart-event { width: 100%; }
.embed-box .highstock-info { display: none; }
.embed-box .fromDate, .embed-box .toDate, .embed-box .dropdown-compare { display: inline-block; padding: 7px 35px 7px 15px; position: relative; line-height: 1.3; cursor: pointer; background-color: #FFF; border: 1px solid #E0E0E0; border-radius: 4px; }
.embed-box .fromDate, .embed-box .toDate { width: 365px; }
.embed-box .fromDate span, .embed-box .toDate span { margin-left: 40px; }
.embed-box .fromDate .icon-arrow-down { left: 330px !important; }
.embed-box .toDate .icon-arrow-down { left: 330px !important; }

.embed-realtime { background: #f7f9fb; border-radius: 4px; padding: 22px 30px; font-size: 18px; min-height: 375px; }
.embed-realtime .first { font-size: 2.4rem !important; color: #345DD4; font-weight: bold; }
.embed-realtime .ticker { font-size: 1.5rem; color: #21409a; font-weight: bold; margin-top: 30px; margin-bottom: 0px; }
.embed-realtime .price { font-size: 3.6rem !important; line-height: 1.4; font-weight: bold; float: left; }
.embed-realtime .price-change { float: right; margin-top: 10px; }
.embed-realtime .last { clear: both; color: #9e9e9e; border-bottom: 2px solid #e0e0e0; padding-bottom: 20px; margin-top: 20px; }
.embed-realtime article { margin-top: 20px; }
.embed-realtime article span, .embed-realtime article label { float: right; margin-left: 3px; }

.embed-p-foreign-investor-overview td, .embed-p-foreign-investor-overview th { padding: 10px 0; text-align: right; }
.embed-p-foreign-investor-overview tr td { border-bottom: 1px solid #e0e0e0; }
.embed-p-foreign-investor-overview tr th, .embed-p-foreign-investor-overview tr:last-child td { border-bottom: 3px solid #e0e0e0; }
.embed-p-foreign-investor-overview tr:first-child th:first-child { border-bottom: 0px; }
.embed-p-foreign-investor-overview tr:first-child th { text-align: center; }
.embed-p-foreign-investor-overview tr td:first-child { text-align: left; }

.embed-chart-foreign .stock-block-title { position: relative; float: left; width: 100%; }
.embed-chart-foreign .stock-block-title div { float: right; text-transform: capitalize; line-height: 17px; }
.embed-chart-foreign .stock-block-title div:first-child { float: left; text-transform: uppercase; font-weight: bold; }
.embed-chart-foreign .stock-block-title div span { width: 25px; height: 16px; background-color: #ed1d24; float:right; margin-left: 5px; }
.embed-chart-foreign .stock-block-title div span.value-increase { background-color: #21409a; }

.embed-box .tblTransaction tr th { padding: 8px 5px; }
#stock_ownershipstructure_chart { height: 320px; }
.tblTransaction tr td.up { color: #48c04c; }
.tblTransaction tr td.down { color: #FF0000; }
.tblTransaction tr td span.up { background: url(../images/bg.png) no-repeat -67px -40px; display: block; float: right; height: 13px; margin-left: 3px; margin-top: 5px; width: 13px; }
.tblTransaction tr td span.down { background: url(../images/bg.png) no-repeat -52px -40px; display: block; float: right; height: 13px; margin-left: 3px; margin-top: 5px; width: 13px; }
.stock-ownershipstructure p { clear:both; }
#top3_ownershipstructure h2 { width: 100%; }

.home-chart select { height:35px; line-height: 35px; }
.home-chart .embed-box .local-bar { margin-bottom: 10px !important; }
.embed-box .home-chart .btn-blue { height:40px; line-height: 40px; }

.home-chart-mobile { float: right; width: 74%; display:none; }
.home-chart-mobile .chart-mobile-container, .home-chart-mobile .chart-compare-container { display: none; }
.home-chart-mobile .chart-web-container { display: block; }
    .home-chart-mobile .fromDate .icon-arrow-down, .home-chart-mobile .toDate .icon-arrow-down { left:230px !important; }
.chart-mobile { clear:both; }
.chart-mobile .chart-mobile-form { clear:both; }
.chart-mobile .chart-mobile-form .home-chart-mobile-form-filter {float:left; clear:both; margin-top: 10px;}
.chart-mobile .chart-mobile-form .home-chart-mobile-form-filter span { border-left: 1px solid #9e9e9e; padding: 0px 5px; float: left; }
.chart-mobile .chart-mobile-form .home-chart-mobile-form-filter span:hover { cursor: pointer; color:#21409a; }
.chart-mobile .chart-mobile-form .home-chart-mobile-form-filter span.selected { background: #345dd4; color: #fff; }
.chart-mobile .chart-mobile-form .home-chart-mobile-form-filter span:first-child { border-left: 0px; }
.chart-mobile .chart-mobile-form .home-chart-mobile-form-search {float:right; width: 70%;} 
.chart-mobile .chart-mobile-form .home-chart-mobile-form-search div { float: right; margin-right:5px; }

#stock_ownershipstructure_chart { display: block; }
#mobile_stock_ownershipstructure_chart { display: none; }
.mobile-table { display: none; }
.web-table { display: block; width: 100%; }
.trOdd { background: #f8f8f8; }

.green-arrow-up { background: transparent url("../images/green-arrow-up.png") no-repeat; }
.red-arrow-down { background: transparent url("../images/red-arrow-down.png") no-repeat; }
.embed-realtime-icon { width: 25px; float: left; margin-top: 12px; margin-right: 5px; }

.compare-filter-container { position: relative; clear: both; }
.dropdown-compare { height: 40px !important; line-height: 45px !important; width: 500px; }
select.dropdown-compare span { padding: 10px; display: inline-block; }
#tbCompareTicker option[value='TCB'], #tbCompareTicker option[value='HDB'] {display:none;}
.compare-filter-container .icon-arrow-down { left: 475px;  }
.compare-filter-container .icon-filter { position:absolute; left: 12px; top:2px;  }

.slCompareTicker { cursor:pointer; float:left; position: relative; margin-right: 5px; margin-bottom: 5px; width: 500px; height: 46px; line-height: 35px; border: 1px solid #E0E0E0; border-radius: 4px; padding: 7px 20px; display:inline-block;}
.slCompareTickerList { position: absolute; display: none; top: 45px; left:0px; background: white; z-index: 3; border: 1px solid #E0E0E0; border-radius: 4px; width: 500px; }
.slCompareTickerList li { background: white; padding: 5px 20px; }
#tbCompareTicker { display: block; width: 100%; height: 50px; line-height: 35px; }
/*.slCompareTicker:hover .slCompareTickerList { display: block; }*/
.slCompareTickerList li:hover{ background:#e0e0e0; cursor: pointer; }
#btnCompare { float:left; height:46px; }
#hdChangeDate { display:none; }
input.highcharts-range-selector { line-height: 10px; }

@media only screen and (max-width: 768px) /*and (max-height: 768px)*/ {
    * { font-size: 1.02em; }
    h1 { font-size: 2.8em; line-height: 40px; }
    h2 { font-size: 2.0em; line-height: 24px; }
    .btn-blue { line-height: 30px; }
    .sub-note { font-size: 0.92em !important; }
    .stock-main .icon-h1 { margin-left: 20px; }
    .embed-box table td,.embed-box table th  { padding: 10px 3px !important; }
    table th { line-height: 20px; }
    /*.embed-box table tr.trOdd { background: #f0f0f0; }*/
	.stock-main { padding: 0px 5px; }
	.stock-foreigninvestor, .stock-block-chart { width: 100%; margin-bottom: 40px; }
    .embed-box .overview-left-pricerealtime-container { width: 100%; }
    .embed-box .fromDate, .embed-box .toDate { padding: 2px 20px 2px 2px; height: 40px; }
    .embed-box .fromDate .hasDatepicker, .embed-box .toDate .hasDatepicker {position: relative; top: 3px; height: 30px !important;}        
    .embed-box .fromDate>span, .embed-box .toDate>span { position: relative; top: 3px; }
        .embed-box .fromDate .icon-arrow-down, .embed-box .toDate .icon-arrow-down { left: 96% !important; top: 9px; }		
    .embed-box .local-bar input[type="text"] { width: 70%; }
    .home-chart-mobile .chart-mobile-container { display: block; }
    .home-chart-mobile .chart-web-container { display: none; }
    .home-chart-mobile-form-search .fromDate .icon-arrow-down, .home-chart-mobile-form-search .toDate .icon-arrow-down { left: 95px !important; }
    .embed-box .chart-mobile input[type="text"] { width: 95px; height: 20px; }
    .embed-box .home-chart-mobile-form-search div { width: 120px !important; }
    .embed-box .local-bar { margin-bottom: 0px; }
    .embed-box .local-bar img { top: 9px; left: 14px; }
    .embed-box .local-bar div { width: 100%; margin-bottom: 5px; }
    .paging { text-align: center; }
        .paging .paging-nav a { width: 25px; height: 25px; padding-top: 4px; line-height: 13px; }
    .mobile-column-hide { display:none; }
    .embed-chart-foreign .stock-block-title div:first-child { width: 60%; }
    #top3_ownershipstructure { width: 100%; margin-bottom: 0px; }
    #top3_ownershipstructure p { font-size: 1.2em; }
    #stock_ownershipstructure_chart { height: 250px; }
    #stock_ownershipstructure_chart { display: none; }
    #mobile_stock_ownershipstructure_chart { display: block; height: 380px; }
    .embed-realtime * { font-size: 0.95em !important; }
    .chart-mobile * { font-size: 1.05em !important; }
    .mobile-table { display: block; }
    .web-table { display: none; }
    .embed-box tbody tr { border-bottom: 0px; }
    .mobile-table { width: 100%; margin-top: 20px; }
    .mobile-table .last { border-bottom: 1px solid #e0e0e0 !important; }
    .mobile-table ul, .mobile-table li { width: 100%; padding: 5px; font-size: 1.2em; }
    .mobile-table tr td, .mobile-table span { float: right }
    .home-chart-mobile { float: right; width: 100%; display: block; }
    .chart-mobile .chart-mobile-form .home-chart-mobile-form-search {float:right; width: 55%;}
    .chart-mobile .chart-mobile-form .home-chart-mobile-form-filter { margin-top: 3px; }
    .home-chart { width: 100% !important; display:none; }
    .home-chart #btnCompare1 { margin-top: 5px; }
    .embed-box .divExport {width: 100%; margin-bottom: 10px;}
    .embed-box .divExport span { width: 100%; display: none; }
    .embed-box .divExport span:first-child{display:block;}
    .embed-box .paging-stock { width: 100%; clear:both; }
    .embed-box .paging { text-align: center; }
}
@media only screen and (max-width: 700px) {
    .embed-box .fromDate .icon-arrow-down, .embed-box .toDate .icon-arrow-down { left: 93% !important; }
    .home-chart-mobile-form-search .fromDate .icon-arrow-down, .home-chart-mobile-form-search .toDate .icon-arrow-down { left: 95px !important; }
}
@media only screen and (max-width: 465px) {
    .chart-mobile .chart-mobile-form .home-chart-mobile-form-search { width: 40%; }
    .embed-box .local-bar input[type="text"] { width: 60%; }
    .embed-box .chart-mobile input[type="text"] { width: 90px !important; }
}