@charset "utf-8";
@import "../css/font.css?a=3";

*[data-before]:before{content:attr(data-before);}
*[data-after]:after{content:attr(data-after);}

/* CSS Document */
div#popup{width:440px;position:fixed;top:50%;left:50%;margin: -125px auto auto -220px;font-size:1.5em;line-height:120%;text-align:right;}
/* edited 20180103 end */
div#popup:before{content:""; background:rgba(0,0,0,.7); position:fixed; top:0; left:0; bottom:0; right:0; display:block;}
div#popup:after{content:""; display:block; position:absolute; border-radius:2px; background:url(../style/img/popup_bg.png) no-repeat; top:0; left:0; right:0; bottom:0;}
div#popup>*{position:relative;}
div#popup strong{display:block; margin:0 25px 0 auto; color:rgba(0,0,0,.7);}
div#popup strong b{display:block; font-size:1.5em; margin-bottom:.35em;}
div#popup p{border-bottom-left-radius:2px; border-bottom-right-radius:2px; background:#FFF; padding:10px;}
div#popup button{background:none; border:1px #DDD solid; color:#008888; background:#f4f4f4; margin:0; padding:10px; cursor:pointer; display:table-cell;}
div#popup button:hover {}

div#popup.msg{text-align:center; margin:0 auto auto -25% !important; top:20% !important; width:50% !important;}
div#popup.msg *{margin:0 auto; padding:0;}
div#popup.msg:after{background:#FFF;}
div#popup.confirm:after{background-color:#ffde00; background-position:0 0;}
div#popup.confirm strong{width:250px; height:180px; padding:0.8em 0 0 0;}

div#popup.start_test:after{background-position:0 -250px; background-color:#ffae00;}
div#popup.start_test strong{width:220px; height:180px; padding:0.5em 0 0 0; }
div#popup.start_test strong>b{text-align:left; font-size:1.2em;line-height:130%;}
div#popup.start_test strong>b>var{display:inline; font:inherit; font-size:1.1em; line-height:1em;}
div#popup.start_test strong>b>var:before,div#popup.start_test strong>b>var:after{font-size:.7em; vertical-align:bottom;}
div#popup.start_test strong>b>var:before{display:inline; font-size:.8em;}
div#popup.start_test strong>b>var:first-of-type:before,div#popup.start_test strong>b>var:last-of-type{display:block;}
div#popup.start_test strong>b>var:last-of-type{font-size:.8em; margin-top:.1em}

div#popup.emptylist:after{background-position:0 -500px; background-color:#ffae00;}
div#popup.emptylist strong{width:240px; height:200px; padding:1.5em 0 0 0; margin:0 20px 0 auto;}
div#popup.emptylist strong>b{line-height:110%; margin-bottom:.1em;}

div#popup.select_option{min-height:180px; height:auto;}
div#popup.select_option:after{background-color:#ffde00; background-image:none;}
div#popup.select_option strong{width:auto; height:auto; padding:1.1em .25em 1em .25em; margin:0 auto; text-align:center; font-size:1.2em;}
div#popup.select_option strong var{font-size:.9em; padding:0 0 1em 0;}
div#popup.select_option strong var q{quotes:"" "";}
div#popup.select_option strong var q:before{position:relative; left:-.2em; top:-.4em; font-size:.8em; opacity:.8;}
div#popup.select_option strong var q:after{position:relative; right:-.2em; bottom:-.25em; font-size:.8em; opacity:.8;}
div#popup.select_option strong var:before{display:block; font-size:.7em; opacity:.9;}
div#popup.select_option strong>b{margin:0 auto; padding-bottom:.5em; line-height:100%; font-size:1.15em;}

div#popup.create_success{height:auto;}
div#popup.create_success:after{background-color:#ffde00; background-image:none;}
div#popup.create_success strong{text-align:center; margin:2em auto 1.25em auto;}

div#popup.popform:after{background:none #FFF;border: 3px solid #01A09A;}
div#popup.popform{width:90%; max-width:900px; height:auto; margin:0 auto; padding:1em .5em .5em 1em; top:10%; left:0; right:0; background:#FFF;}
div#popup.popform>*{display:block; position:relative; margin:0; padding:0; text-align:left; height:auto; max-height:55vh;}
div#popup.popform>form{line-height:150%; min-height:150px; overflow:auto; font-size:.7em;}
div#popup.popform>form>*{font-weight:normal;}
div#popup.popform>h2{font-size:1.3em; color:#01A09A; padding:0 0 .2em 0;}
div#popup.popform>h2>small{color:#01A09A; font-size:.8em; padding-bottom:.5em; vertical-align:baseline;font-family:"cssFontOpenSansHKBold";font-size:40px;font-weight:bold;}
div#popup.popform>h2>small:before,div#popup.popform>h2>small:after{font-size:.75em; vertical-align:bottom;}
div#popup.popform[data-step=null]>h2>small{display:none;}
div#popup.popform>h2:empty~div{word-break:break-all; word-wrap:break-word;}

div#popup.popform dt, div#popup.popform dd{padding:.4em 0;}
div#popup.popform form#download_paper dt, div#popup.popform form#download_paper dd{padding:.4em 0;}
div#popup.popform dt{display:block; clear:both;}
div#popup.popform dt:before,div#popup.popform dt+dd:before{display:inline-block; position:relative; width:20%; white-space:normal; float:left;}
div#popup.popform dd~dd, div#popup.popform dt+dd{display:table-cell;}
div#popup.popform *>label{display:inline-block;font-weight:normal;}
div#popup.popform dt[data-before]:hover{background:#F9F9F9;}
div#popup.popform dt[data-before]>select{width:78%; margin:0 0 0 auto; border-color:#CCC;}
div#popup.popform dt[data-before]>select+select{margin-top:.5em; margin-left:20%;}
div#popup.popform dt#question_type>label{width:32%;}
div#popup.popform dd>select{width:150px; margin-right:2em;}
div#popup.popform *:after, div#popup.popform *:before{font-size:inherit; white-space:nowrap;}
div#popup.popform dt input[data-after]{margin-right:20px;}
div#popup.popform dd input[data-after]{margin-right:20px;}
div#popup.popform input[data-after]:after{margin-left:1.2em; font-size:.7em; line-height:100%;}
/*
div#popup.popform form#download_paper dt[data-before]{padding-left:200px;}
div#popup.popform form#download_paper dt[data-before]:first-of-type{padding-left:200px;}
*/
div#popup.popform form#create_question div#text_editor{height:10em; border:1px solid #DDD; display:block;}
div#popup.popform form#download_paper dt>label{font-size:inherit; white-space:nowrap;}
div#popup.popform form#create_question h3.expand~div>div#text_editor{margin-bottom:.5em;}

/*font-size:.85em*/
div#popup.popform>form a{color:#82b800; font-size:1em; text-decoration:underline; margin-right:1em; display:inline-block;}
div#popup.popform>form a:hover{opacity:.7;}
div#popup.popform>form h3{display:block; margin:.3em 0 .25em 0; color:#00a09a; font-size:1.1em;}
div#popup.popform div.buttons{text-align:center; padding:.2em 0 0 0;}
div#popup.popform div.buttons>button{
    background-color:#1A4F90; 
    color:#ffffff; 
    padding:6px 31px; 
    width:auto; 
    display:inline-block;
    border-radius:24px;
    font-family: "cssFontOpenSansHKRegular";
    font-size: 18px;
}
div#popup.popform button:nth-of-type(1){border-bottom-left-radius:2px; border-top-left-radius:2px;}
div#popup.popform button:nth-last-of-type(1){border-right:0; border-bottom-right-radius:2px; border-top-right-radius:2px;}
div#popup.popform div#finish_msg{display:none; text-align:center;}
div#popup.popform div#finish_msg.show{display:block; padding:2em 0;}
div#popup.popform div#finish_msg.show:before{display:block; height:80%; text-align:center; font-size:2.2em; margin:.5em auto; color:#00a09a;}
div#popup.popform div#finish_msg.show>span>a{background:#82b800; color:#FFF; border:0 none; font-size:1em; border-top:.35em solid #82b800; border-bottom:.35em solid #82b800; padding:0 1.5em; margin:.5em auto; display:inline-block; width:auto; border-radius:2px; position:relative;}
div#popup.popform div#finish_msg.loading{background:url(../style/img/loading.svg) no-repeat top center; background-size:auto 80%;}
div#popup.popform div#finish_msg.loading:before{color:rgba(0,0,0,0)}
div#popup.popform div#finish_msg.loading>span:first-of-type{display:inline;}
div#popup.popform div#finish_msg.loading>span:last-of-type{display:none;}
div#popup.popform div#finish_msg:not(.loading)>span:first-of-type{display:none;}
div#popup.popform div#finish_msg:not(.loading)>span:last-of-type{display:inline;}

div#popup.popform dl.dropdown{margin:0; display:inline-block;}
div#popup.popform dl.dropdown dt, div#popup.popform dl.dropdown dd{margin:0; padding:0;}
div#popup.popform dl.dropdown dt, div#popup.popform dl.dropdown dt>input, div#popup.popform dl.dropdown>dd{width:270px;}
div#popup.popform dl.dropdown>dd.show{height:8em;}
div#popup.popform dl.dropdown dt>input{}
div#popup.popform dl.dropdown dd{opacity:1; position:absolute; background:rgba(255,255,255,.95); border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-top:0 none; margin:-1px 0 0 0; height:0; overflow:auto;}
div#popup.popform dl.dropdown dd:empty{border:0 none;}
div#popup.popform dl.dropdown dd.show{border:1px solid #CCC;}
div#popup.popform dl.dropdown dd>*{display:block; padding:.25em 1em; border-top:1px solid #EEE;}
div#popup.popform dl.dropdown dd>*:hover{background:#DDD;}
div#popup>form p.two_column{display:inline-block; width:640px; line-height:130%; padding:.3em 0; vertical-align:top;}
div#popup>form p.two_column>label{width:32%; margin:0; display:inline-block;}
div#popup>form#upload_resources>p{font-size:.85em; display:block; opacity:.6;}
div#popup>form#upload_resources:after{font-size:.85em; display:block; opacity:.6;}
div#popup>form>span{font-size:.75em;}
div#popup>form input[type=file]{border:1px solid #DDD;}
div#popup>form>h3[class]{margin-top:1em; line-height:120%;}
div#popup>form>h3[class]:after, div#popup>form>h3[class]:before{border-bottom:1px solid; cursor:pointer;}
div#popup>form>h3[class]:after{background:#00a09a; color:#FFF; display:inline-block; width:1em; height:1em; text-align:center; padding:.1em; margin-left:.2em; border-radius:1em;}
div#popup>form>h3.collapse:after{content:"+";line-height:1.1em;}
div#popup>form>h3.collapse+*{display:none;}
div#popup>form>h3.expand:after{content:"?";}
div#popup>form>h3.expand+*{display:block; padding:0; line-height:inherit; font:inherit; padding-bottom:.5em;}
div#popup>form#download_paper label>*{font-weight:normal;}
div#popup>form#gen_question dt,div#popup>form#gen_question dd{display:inline-block; width:18%; padding:0.6em 0; margin:0; border-bottom:1px dashed #CCC;}
div#popup>form#gen_question dt{width:25%; padding-left:0.5em}
div#popup>form#gen_question dd:before, div#popup>form#gen_question dd:after{position:static;display:inline;}
div#popup>form#gen_question>:nth-last-child(1),div#popup>form#gen_question>:nth-last-child(2),div#popup>form#gen_question>:nth-last-child(3),div#popup>form#gen_question>:nth-last-child(4),div#popup>form#gen_question>:nth-last-child(5){border-bottom:0 none;}
div#popup>form#gen_question input[type=number]{line-height:100%; text-align:center;}

/* Contact Form*/
div#popup>form#contact_form, div#popup>form#contact_form~dl{font-size:17px;}
div#popup>form#contact_form{width:73%; display:inline-block; margin:0 1%;}
div#popup>form#contact_form~dl{font-size:13px; letter-spacing:0; width:22%; float:left; padding:1em 1em 2em 0; border-right:1px solid #DDD; opacity:.7; position:absolute; top:45px; bottom:10px;}
html[lang=ch] div#popup>form#contact_form~dl{font-size:16px;}
div#popup>form#contact_form~dl:before{text-transform:uppercase; opacity:.25; font-size:1em; display:block; white-space:normal;}
div#popup>form#contact_form~dl>*{display:block; margin:0 0 .75em 0; padding:.2em 0 0 0; line-height:135%; white-space:normal;}
html[lang=en] div#popup>form#contact_form~dl>dt:before, html[lang=ch] div#popup>form#contact_form~dl>dt:after{content:attr(data-dept); position:static; display:block; font:inherit !important; text-shadow:inherit !important;}
html[lang=en] div#popup>form#contact_form~dl>dt:before{content:attr(data-dept)", ";}
div#popup>form#contact_form~dl>dd{font-weight:normal !important; font-size:13px; padding-left:1.75em; position:relative;}
div#popup>form#contact_form~dl>dd:before{content:""; display:inline-block; opacity:.5; position:absolute; left:0; top:0; width:1.5em; height:1.5em; background:url(../style/img/icon_contact.svg) no-repeat; background-size:cover; padding:0; margin:0;}
div#popup>form#contact_form~dl>dd:nth-of-type(1):before{background-position:0 0;}
div#popup>form#contact_form~dl>dd:nth-of-type(2):before{background-position:0 25%;}
div#popup>form#contact_form~dl>dd:nth-of-type(3):before{background-position:0 50%;}
div#popup>form#contact_form~dl>dd:nth-of-type(4):before{background-position:0 75%;}
div#popup>form#contact_form dt{display:block; width:auto; margin:0 auto 0 0;}
div#popup>form#contact_form dt:not(:last-child):not(:first-child)>*{width:95%; margin:0;}
div#popup>form#contact_form dt>textarea{margin:.5em 0 !important;}
div#popup>form#contact_form dt:last-child{padding-bottom:10px;}
div#popup>form#contact_form dt:last-child>*{vertical-align:middle; margin:0 5px 0 0; height:40px;}
div#popup>form#contact_form dt input#captcha_code{width:6em;}
div#popup>form#contact_form dt img#captcha_image{display:inline-block; height:40px; width:auto;}
div#popup>form#contact_form dt img#captcha_image+a{display:inline-block; background:url(../../securimage/images/refresh.png) no-repeat #82b800; margin-right:1em; border-radius:25px; width:25px; height:25px; background-size:cover;}

/* Legal: terms + privacy */
div.legal{height:65vh; overflow:auto; line-height:150%; padding:.5em 1em 2em .25em !important; margin:1em 0 0 0; position:relative;}
div.legal, div.legal *{font-weight:normal !important; font-size:16pt !important; line-height:24pt;}
div.legal>*{display:block;}
div.legal>*:before{display:block; font-weight:bold; margin:1.5em 0 .25em 0;}
div.legal ol{padding:.25em 0 0 1.6em;}
div.legal li{margin:0 0 .25em .5em;}
div.legal>*>li{margin:0 0 1em .5em;}
div.legal ol ol{list-style:lower-latin;}
html[lang=en] div.legal{font-size:.6em; line-height:140%;letter-spacing:0 !important;}
html[lang=en] div.legal>*:before{zoom:1.2;}

div#popup:before{z-index:1;}
div#popup>*{z-index:3;}
div#popup:after{z-index:2;}
div#popup{z-index:9999999;}
div#popup.popform dl.dropdown dd{z-index:9999;}
div#popup>form input,div#popup>form select{z-index:2;}

div#finish_msg{
	text-align:center;
}

div#finish_msg.show:before{display:block; height:80%; text-align:center; font-size:1.3em; line-height:1em; margin:.5em auto; color:#00a09a;}

div#finish_msg.show>span>a{
	background:#82b800;
	color:#FFF;
	border:0 none;
	font-size:1em;
	border-top:.35em solid #82b800;
	border-bottom:.35em solid #82b800;
	padding:0 1.5em;
	margin:.5em auto;
	display:inline-block;
	width:auto;
	border-radius:2px;
	position:relative;
	transition:all 0.2s;
	opacity:1;
}
div#finish_msg.show>span>a:hover{
	opacity:0.6;
}
div#finish_msg.loading{background:url(../style/img/loading.svg) no-repeat top center; background-size:auto 80%;}
div#finish_msg.loading:before{color:rgba(0,0,0,0)}
div#finish_msg.loading>span:first-of-type{display:inline;}
div#finish_msg.loading>span:last-of-type{display:none;}
div#finish_msg:not(.loading)>span:first-of-type{display:none;}
div#finish_msg:not(.loading)>span:last-of-type{display:inline;}

div#finish_msg.show:before {font-family:PMingLiU, Microsoft JhengHei, sans-serif; font-weight:normal; text-shadow:none;}
html[lang=en] div#finish_msg.show:before {font-family:Arial, Times New Roman, PMingLiU, sans-serif; text-shadow:none;}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    color: #ffffff !important;
    background-color: #00C1DE;
	border: 1px solid #808080 !important;
}

#pagination-demo {
	display: inline-block;
	padding: 0px;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	clear: both;
}
#pagination-demo li {
    display: inline-block;
}

.pagination-sm>li>a, .pagination-sm>li>span {
    padding: 6px 10px 4px 10px!important;
}
.pagination-sm .page-item:first-child .page-link {
    border-bottom-left-radius: 0rem;
    border-top-left-radius: 0rem;
}
.page-item a {
	min-width:45px;
}
.page-item a div {
	width: 25px;
    height: 30px;
}
.page-item a div.btn_next_page {
	background-image: url('../images/btn_next_page.png');
	background-repeat: no-repeat;
	background-position: center;
}
.page-item a div.btn_prev_page {
	background-image: url('../images/btn_next_page.png');
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(180deg);
}
.page-item a div.btn_last_page {
	background-image: url('../images/btn_last_page.png');
	background-repeat: no-repeat;
	background-position: center;
}
.page-item a div.btn_first_page {
	background-image: url('../images/btn_last_page.png');	
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(180deg);
}
.page-item.disabled .page-link {
    color: #fff;
    pointer-events: none;
    cursor: not-allowed;
    background-color:inherit;
    border-color: #ddd;
	opacity:0.3;
}
.page-item:first-child .page-link {
	border-bottom-left-radius: 0rem;
	border-top-left-radius: 0rem;
}
.page-link {
	position: relative;
	display: block;
	color: #898989;
	background-color: #FFFFFF;
	border: none;
	font-size: 14px;
	margin: 2px;
	line-height: 30px;
	padding: 0px 8px 0px 8px;
	transition:all 0.3s;
	border-radius:3px;
}
.page-link:hover {
	color: #148ead;
	background-color: #F6F6F6;
}
.pagination-sm .page-link {
	text-align: center;
	line-height: 30px;
	font-size:16px;
	color: #000000 !important;
	background-color: #ffffff !important;
}
.page-item.prev > .page-link, .page-item.next > .page-link, .page-item.first > .page-link, .page-item.last > .page-link {
	color: #00C1DE;
	background-color: #ffffff !important;
}
.page-item.active .page-link {
	font-size: 16px;
	z-index: 2;
	color: #fff;
	background-color: #148ead;
	border-color: #148ead;
	font-weight: bold;
}
.bar_area_bottom{
	width:100%;
	display:block;
	text-align: center;
}
.num_area_l{
	display: block;
	float: left;
	padding: 0px;
}
.num_area_r{
	display: block;
	float: right;
	padding: 0px;
	color: #000000;
	font-family: "cssFontOpenSansHKBold";
	font-size: 18px;
}
.num_area_r select{
	color:#000;
}
@media (max-width: 767px){
.bar_area_bottom{
	margin-bottom:70px;
	font-size:20px;
}
.num_area_l{
	padding-left: 15px;
}
.num_area_r{
	padding-right: 15px;
}
#pagination-demo {
	width:100%;
}
.pagination-sm .page-link {
	line-height: 45px;
	font-size:25px;
}
.page-item.active .page-link {
	font-size:25px;
}
.pagination{
	margin-top: 42px;
	margin-bottom: 0;
}
.pagination>li>a, .pagination>li>span {
	line-height: 35px;
	min-width: 45px;
	font-size: 16px;
}
.pagination>li>input {
	max-width: 50px;
	height: 34px;
}
.pagination>li>.prev-btn{
	width: 34px;
	height: 34px;
	background: url('../style/img/mobile/pages-arrow-left.png') no-repeat left top;
}
.pagination>li>.next-btn{
	width: 34px;
	height: 34px;
	background: url('../style/img/mobile/pages-arrow-right.png') no-repeat left top;
}
}

.htButton {
	background:#ff9900;
	color:#fff;
	border-radius:3px;
}
/* 20190503 edited end */

.chartPopupModal .modal-content {
	padding-top: 15px;
	padding-bottom: 15px;
	overflow: auto;
	max-height: 500px;
	max-width: 90%;
}
.chartPopupModal .modal-header {
    border-bottom: 0;
    padding-bottom: 0;
    padding-top: 0;
}
.chartPopupModal .modal-dialog {
    max-width: 800px;
}
.chartPopupModal .modal-header .modal-title{
	color: #01696c;
}

.chartPopupModal .modal-header .modal-title li + li{
	margin-left: 10px;
	padding-left: 20px;
	background: url('../style/img/desktop/path-arrow.png') no-repeat left center; 
}
.chartPopupModal .modal-body .answer-content {
	margin-bottom: 15px;
}
.chartPopupModal .modal-body .answer-content .label {
    padding: 0;
    font-size: 100%;
    font-weight: 400;
    color: #000000;
    text-align: left;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0;
}
.chartPopupModal .modal-body .total-label {
	margin-bottom: 10px;
}
.chartPopupModal .modal-content .wrapper.viewport .modal-body .row .col-md-6 .table.answer-status-table>thead>tr>th,
.chartPopupModal .modal-content .wrapper.viewport .modal-body .row .col-md-6 .table.answer-status-table>tbody>tr>td{
	width: 30%;
}
.chartPopupModal .modal-content .wrapper.viewport .modal-body .row .col-md-6 .table.answer-status-table>thead>tr>th:last-child,
.chartPopupModal .modal-content .wrapper.viewport .modal-body .row .col-md-6 .table.answer-status-table>tbody>tr>td:last-child{
	width: 40%;
}
.chartPopupModal .modal-content .wrapper.viewport .modal-body .row .col-md-6 +.col-md-6 .table.answer-status-table>thead{
	display: none;
}