html, body{height:100%;}
body{
font-size:16px;
font-family:'Montserrat',"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#FFFFFF;
}
form{margin:0px;}
select{outline:none;}
input{outline:none;}
ul {list-style-type:none; padding:0; margin:0}
.mainFrame{width:100%; height:100%;}
/* Display Control */
.visible-mb, .mobile-view {display:none;}
/* table color styles */
.greybg01 {
background-color: #52677B;
}
.greybg02 {
background-color: #e0e0e0;
}
.greybg03 {
background-color: #F3F5F8;
}
.infobg01 {
background-color: #FFFFFF;
}
.infobg02 {
background-color: #1cb3de;
}
.infobg03 {
background-color: #d8eaf6;
}
/* font type and color styles */
.bluecolor {
color: #0B1325;
}
.redcolor {
color: #ed1c24;
}
.quotefont02 {
font-size: 16px;
color: #57636F;
font-weight: bold
}
.quotefont03 {
font-size: 16px;
color: #FFFFFF;
font-weight: bold
}
.quotefont04 {
font-size: 14px;
color: #FFFFFF;
font-weight: bold
}
/* Common */
.boldTxt{font-weight:bold;}
.clear{clear:both;}
.pt20{font-size:20px;}
.pt15{font-size:15px;}
.pt12{font-size:12px;}
.center{text-align: center;}
.font-color-grey{color:#0B1325}
.pointer {cursor:pointer}
/* Display: Table */
.table {display:table; width:100%}
.tableRow {display:table-row}
.tableCell {display:table-cell; text-align:center; vertical-align:middle}
.tableCell.left {text-align:left}
.tableCell.right {text-align:right}
/* overlay effects */
.overlayContent {display: none; position: fixed; background:#FFF; border: 1px solid #555; box-shadow: 2px 2px 40px #222; z-index: 999999;}
.overlayContent iframe { border: none; }
.overlayContent .OverlayTabStyleA{width:100%; height:43px; padding:0px; background-color:#1cb3de;}
.overlayContent .OverlayTabStyleA ul{width:100%; display:table; table-layout:fixed; margin:0px; padding:0px; list-style:none;}
.overlayContent .OverlayTabStyleA ul li{display:table-cell; height:31px; line-height:31px; text-align:center; padding:4px 0px; font-size:14px; font-weight:bold; color:#A9A9A9; cursor:pointer;}
.overlayContent .OverlayTitle {color:#FFF; font-size:14pt}
#overlayMask {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none; z-index:999998;}
.overlayCloseBtn {
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
box-shadow: none;
font: bold 131% sans-serif;
padding: 5px 10px;
position: absolute;
right: 0px;
z-index: 2;
}
/* chart */
.divDynChart{width:100%; float:left;}
.dynChartTable{width:100%; align:left; vertical-align:top;}
.chartSetting{width:100%;}
.chartSetting table td{padding:2px 0px 2px 5px;}
.chartTitle{color:#ff5d1d; font-weight:bold; padding-left:5px;}
.tiOption{width:200px;}
.drawButton{padding-right:10px;}
.cmb_fontsize{
font-size:12px !important;
}
.imgautosize{
max-width:100%;
max-height:100%;
}
/* quote.php */
.mainFrame .mainFrameInner {padding:15px; float:left;}
.mainFrame .mainFrameInner .quote_section {display:block; position:relative; width:96%; margin:0 auto;}
.mainFrame .mainFrameInner .quote_section .stock_values {display:inline-block; width:36%; float:left; color: #1c7fd1;}
.mainFrame .mainFrameInner .quote_section .stock_values .nominal {width:100%; display:inline-block; float:left; font-size:100px; line-height:100px; color:#4099da;}
.mainFrame .mainFrameInner .quote_section .stock_values .change_percent_change {width:100%; display:inline-block; float:left; font-size:22px; line-height:28px; color:#3f3f3f; font-weight:700;}
.mainFrame .mainFrameInner .quote_section .stock_values .up {color:#00ab34;}
.mainFrame .mainFrameInner .quote_section .stock_values .down {color:#ed0012;}
.mainFrame .mainFrameInner .quote_section .stock_values .unchanged {color:#3f3f3f;}
.mainFrame .mainFrameInner .quote_section .stock_values .sub_section {width:100%; position:relative; float:left;}
.mainFrame .mainFrameInner .quote_section .stock_values .sub_section .title {width:45%; display:inline-block; float:left; font-size:14px; line-height:16px; color:#3f3f3f; font-weight:700;}
.mainFrame .mainFrameInner .quote_section .stock_values .sub_section .value {width:45%; display:inline-block; float:left; font-size:14px; line-height:16px; color:#3f3f3f;}
.mainFrame .mainFrameInner .quote_section .info_section {display:inline-block; width:64%; float:left; color: #000000; padding-top:7px;}
.mainFrame .mainFrameInner .quote_section .info_section .sub_section {width:100%; position:relative; float:left;}
.mainFrame .mainFrameInner .quote_section .info_section .sub_section .title {width:53%; display:inline-block; float:left; font-size:22px; line-height:37px; color:#3f3f3f; font-weight:700;}
.mainFrame .mainFrameInner .quote_section .info_section .sub_section .value {width:45%; display:inline-block; float:left; font-size:22px; line-height:37px; color:#3f3f3f;text-alig: right;}
.mainFrame .mainFrameInner .more_information {width:96%;font-size:19px; line-height:23px; color:#0c5fa5;}
.mainFrame .mainFrameInner .more_information > span {
display: inline-block;
float: left;
vertical-align: bottom;
height: 29px;
line-height: 29px;
}
.mainFrame .mainFrameInner .more_icon{
background-image: url(../images/bb1_on.png);
width: 30px;
height: 29px;
background-size: 300px;
margin-top: 2px;
display: inline-block;
background-position: -267px -3px;
background-repeat: no-repeat;
}
.mainFrame .mainFrameInner .more_information > i {padding-left:5px;}
.mainFrame .mainFrameInner .hidden_area {width:100%; height:15px; background-color:#ffffff; position:absolute; z-index:2; text-align:left; font-size:14px}
.mainFrame .mainFrameInner .chart_section {width:96%;margin:5px auto; z-index:1;}
.mainFrame .mainFrameInner .chart_section .divDynChart table {/*margin-top:-7px;*/}
.mainFrame .mainFrameInner .chart_section .divDynChart #chart {width:100%; max-height:275px;}
/* hkex_news_others.php */
.section-title {color:#0B1325; font-weight:bold}
.hkex_news .section-title {padding:0 10px; text-decoration:underline; font-size:16px; line-height:20px}
.hkex_news .document-list {padding:0 15px}
.hkex_news .document-list li {cursor:pointer; margin:10px 0; text-decoration:underline}
.hkex_news .document-list li img {margin-right:5px; width:13px; height:16px}
/* Stock Name Header */
.stock-header-info {padding:30px 0 30px; text-align:center}
.stock-header-info .stock-name,
.stock-header-info .stock-code {font-size:20px; line-height:24px}
.stock-header-info .stock-name {font-weight:bold}
.stock-header-info .stock-code,
.stock-header-info .listed-exchange {margin-top:10px}
.stock-header-info .listed-exchange {font-size:16px; line-height:22px}
.LANG_ENG .stock-header-info .stock-name,
.LANG_ENG .stock-header-info .stock-code {font-size:18px; line-height:22px}
.LANG_ENG .stock-header-info .listed-exchange {font-size:14px; line-height:20px}
/* Footer */
.Footer.paddingTop{width:96%; margin:10px auto; padding-top:0px !important;}
.Footer > table > tbody > tr > td.logo {width:52px;}
.Footer > table > tbody > tr > td.texts > .texts_detail {font-size:14px;}
.Footer > table > tbody > tr > td.texts > .texts_detail > a {font-size:14px;}
a#overlayPopupBtn {color:#3f3f3f; text-decoration:none;}
a.etnet{color:#3f3f3f; text-decoration:none;}
/* quote_inner.php */
.data-table-info {padding:0 10px; max-width:1500px; margin:0 auto}
.data-table-info td {text-align:center; vertical-align:middle}
.data-table-info table,
.data-table-info tr,
.data-table-info td {border:1px solid #ccc; border-collapse:collapse}
.data-table-info .mobile-view {display:none}
.data-table-info .top-info {padding:0 0 10px}
.data-table-info .top-info .float {float:left}
.data-table-info .top-info .float.timestamp {float:right}
.data-table-info .bid-ask-table .value {height:40px}
.data-table-info .normal-table td {width:16%}
.data-table-info .normal-table td.desktop-view {width:18%}
.data-table-info .normal-table td.desktop-view.merged-2-col-cell {width:36%}
.chart-settings,
.chart-settings * {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
.chart-settings {padding:20px; width:100%; max-width:950px; margin:10px auto; background-color:#f8f9fa; border-radius:8px}
.chart-settings .settings-row {display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:20px; justify-content:space-evenly}
.chart-settings .chart-setting-item {display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0}
.chart-settings .chart-setting-title {text-align:center; margin-bottom:0; font-size:14px; font-weight:bold; color:#0B1325}
.chart-settings .chart-setting-control {width:auto}
.chart-settings .chart-setting-dropdown {width:150px; padding:8px 12px; border:1px solid #ddd; border-radius:4px; background-color:#fff; font-size:14px; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 8px center; background-size:16px; padding-right:30px}
.chart-settings .chart-setting-dropdown:focus {outline:none; border-color:#1cb3de; box-shadow:0 0 0 2px rgba(28, 179, 222, 0.2)}
.chart-settings .chart-setting-indicators .indicators-container {display:flex; gap:15px; flex-wrap:nowrap}
.chart-settings .indicator-block {width:auto}
.chart-settings .chart-setting-indicators .chart-setting-dropdown {width:120px}
.chart-settings .drawButtonGroup {display:flex; justify-content:flex-end; gap:10px; margin-top:20px}
.chart-settings .drawButtonGroup .btn {display:inline-block; padding:10px 20px; border-radius:20px; color:#fff; cursor:pointer; font-weight:bold; border:none; transition:background-color 0.2s; font-size:14px}
.chart-settings .drawButtonGroup .drawBtn {background-color:#FF753E}
.chart-settings .drawButtonGroup .drawBtn:hover {background-color:#e65a2b}
.chart-settings .drawButtonGroup .resetBtn {background-color:#6c757d}
.chart-settings .drawButtonGroup .resetBtn:hover {background-color:#5a6268}
/* Listing View */
.listing-view .listing-no-record .border-layer { width:80%; border-bottom:1px solid #d2d2d2; margin:0 auto }
.listing-view .listing-no-record .text {text-align:center; font-size:14px; line-height:200px; color:rgba(0,0,0,.502)}
/* Listing View (Desktop) */
.desktop-view.listing-view {padding:0 10px; max-width:1500px; margin:0 auto}
.desktop-view.listing-view tr:nth-child(even) {background-color:#F3F5F8}
.desktop-view.listing-view th,
.desktop-view.listing-view td {padding:10px 10px 10px 0}
.desktop-view.listing-view th:first-child,
.desktop-view.listing-view td:first-child {padding-left:10px}
.desktop-view.listing-view th {color:#0B1325; font-weight:bold; border-bottom:1px solid #d2d2d2}
.desktop-view.listing-view td {}
/* Listing View (Mobile) */
.mobile-view.listing-view .listing-item {padding-bottom:10px}
.mobile-view.listing-view .listing-item .title {font-size:14px; color:#0B1325; font-weight:bold; padding:20px 20px 10px}
.mobile-view.listing-view .listing-item:nth-child(even) {background-color:#F3F5F8}
.mobile-view.listing-view .listing-item td {padding:10px 20px}
.mobile-view.listing-view .listing-item td.value {text-align:right}
@media only screen and (max-width: 959px) {
body {font-size:14px}
.mobile-view {display:block}
.desktop-view {display:none}
.mainFrame .mainFrameInner .quote_section .stock_values .nominal {font-size:35px; line-height:37px;}
.mainFrame .mainFrameInner .quote_section .stock_values .change_percent_change {font-size:18px; line-height:20px;}
.mainFrame .mainFrameInner .quote_section .stock_values .sub_section .title {font-size:16px; line-height:20px}
.mainFrame .mainFrameInner .quote_section .info_section .sub_section .title {font-size:18px; line-height:22px; width:50%;}
.mainFrame .mainFrameInner .quote_section .info_section .sub_section .value {font-size:18px; line-height:22px; width:50%;}
.mainFrame .mainFrameInner .more_information {font-size:16px; line-height:18px;}
.mainFrame .mainFrameInner .quote_section .stock_values {width:100%;}
.mainFrame .mainFrameInner .quote_section .info_section {width:100%;}
.mainFrame .mainFrameInner .chart_section .divDynChart #chart {width:100%; height:auto;}
.mainFrame .mainFrameInner .chart_section .divDynChart table {/*margin-top:-7px;*/}
.mainFrame .mainFrameInner .hidden_area { font-size:12px /*height:15px;*/}
/* quote_inner.php */
.data-table-info .mobile-view {display:block}
.data-table-info .desktop-view {display:none}
.data-table-info .normal-table td {width:25%}
.chart-settings {padding:15px}
.chart-settings .settings-row {flex-direction:column; gap:15px; align-items:stretch}
.chart-settings .chart-setting-item {flex-direction:column; align-items:flex-start; gap:8px; width:100%}
.chart-settings .chart-setting-title {min-width:auto; margin-bottom:0;}
.chart-settings .chart-setting-control {width:100%}
.chart-settings .chart-setting-dropdown {width:100%}
.chart-settings .chart-setting-indicators .indicators-container {flex-direction:column; gap:10px; width:100%}
.chart-settings .indicator-block {width:100%}
.chart-settings .chart-setting-indicators .chart-setting-dropdown {width:100%}
.chart-settings .drawButtonGroup {flex-direction:column; align-items:stretch}
.chart-settings .drawButtonGroup .btn {width:100%; text-align:center}
.LANG_ENG .chart-settings .set .radio {width:150px}
/* Stock Name Header */
.stock-header-info .stock-name,
.stock-header-info .stock-code {font-size:16px; line-height:20px}
.stock-header-info .listed-exchange {font-size:12px; line-height:18px}
.LANG_ENG .stock-header-info .stock-name,
.LANG_ENG .stock-header-info .stock-code {font-size:16px; line-height:20px}
.LANG_ENG .stock-header-info .listed-exchange {font-size:12px; line-height:18px}
}
@media only screen and (max-width: 959px) {
.mainFrame .mainFrameInner .chart_section .divDynChart table {/*margin-top:-6px;*/}
.mainFrame .mainFrameInner .hidden_area { font-size:12px /*height:12px;*/}
}