@charset "utf-8";
/* Reset start */
html, body {margin:0; padding:0; border:0; width:100%; font-family:Calibri, Arial, microsoft jhenghei, 微軟正黑體, sans-serif, sans-serif; font-size:12px; color:#333333; line-height:125%; -webkit-text-size-adjust:none;/*  -webkit-tap-highlight-color:rgba(0,0,0,0);*/}
html{ height: 100%; }
body { min-height: 100%; }

body{ overflow:auto; -webkit-overflow-scrolling: touch; background:rgb(250, 250, 250);}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0; outline:0;}
a {outline: 0; text-decoration:none; padding:0; margin:0;}
table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
ol,ul {list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q::before,q::after { content:''; }
abbr,acronym { border:0; }
input, select, textarea {font-family:Calibri, Arial, microsoft jhenghei, 微軟正黑體, sans-serif, sans-serif; font-size:12px; color:#666; border-radius:0;}
.floatLeft {float:left !important;}
.floatRight {float:right !important;}
.center {text-align:center;}
.clearfix {display: inline-block;}
.clearfix::after {content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}
.clearfix {display: block;}
.verMidOut {width:100%; height:100%; display:table; position:relative;}
.verMidMid {width:100%; display:table-cell; top:50%; vertical-align:middle; *position:absolute;}
.verMidIn {width:100%; position:relative; top:-50%;}
.fixed {position:fixed !important; left:0; top:0;}
/* Reset end */

/* Common Structure start */

.nowrap {white-space: nowrap;}

.mainContainer { width: 1024px; margin: 0 auto; position: relative; background:#FFF; /*min-height: 820px;*/ }

a:hover, a:active { text-decoration: none;}
p { padding-bottom: 20px;}

/* overlay */
body .overlay { display: none; position: fixed; top: 40px; left: 0; width: 100%; height: 100%; z-index: 995; background: #FFF; opacity: .8; -moz-opacity: .8; filter: alpha(opacity=80); }
.tempOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 998;}

body.navOpen .overlay { display: block;  }
body.navOpen .navContainer { width: 230px;}

body.dropdown .dropDownList .dropDownContent{display:block;}

.mainWrapper::after { display: block; content: ''; border-bottom: 8px solid #EC1A2D; }

.mobile { display: none;}
.desktop { display: block;}

.displayNone {display: none; }

.numericContent { word-break: break-all; display: inline-block; }


/* Common Structure end */

/* Main Content start */
.contentContainer { margin-left: 84px; padding: 0 20px; position: relative; min-height: 851px; }
.header { padding: 20px 0; border-bottom: 1px solid #CCCCCC; position: relative;}
.logo { max-width: 126px; text-indent: -9999px; margin-right: 30px;  display: table-cell;  vertical-align: bottom;}
.logo img { width:100%; }
.lastLogin { padding-left: 30px; display: table-cell;  vertical-align: bottom; position: relative;  bottom: -3px; display: none;}

h1 { font-size: 32px; color: #333333; float: left; display: inline-block; font-weight: bold; line-height: 36px;}
h2 { font-size: 20px; color: #333333; line-height: 20px;}
h3 { font-size: 14px;}

.mainWrapper { background: #FAFAFA; }

/* overlay content */
.overlaymain { position:absolute; top:0; left:0; width:100%; height:100%; display:none; z-index:1021; }
.overlaymain:before { content:""; display: block; width: 100%; height: 100%; position: fixed; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.7); z-index: -1; }
.overlaycontent { width:470px; background-color:#FFF; padding:30px 40px; border-radius:5px; margin-left:auto; margin-right:auto; box-shadow: 5px 5px 5px #333333;  margin-top: 10%;  }
.overlaycontent h2{ font-size:1.4rem; color:#969696; margin-bottom:20px; font-weight:bold; }
.overlaycontent h3{ font-size:1.2rem; color:#999999; margin-bottom:10px; padding-bottom:0; }
.overlaycontent .btnContainer{ margin-bottom:0; }
.overlaycontent .btnContainer .btn{ margin-bottom:0; }
.btnContainer input.btn{ border:none; cursor:pointer; }
.btnContainer input.btn:hover{background-color: #BD1121;}
.btnContainer input.btn.gray:hover{ background-color: #666666;}
.overlaycontent .left{ float:left; }
.overlaycontent .right{ float:right; }
.overlaycontent .innerMessage{ margin-bottom:30px; }
.overlaycontent .innerMessage h3{ padding-bottom:0; line-height:20px; color:#000000; font-weight: normal; }
.overlaycontent .btnContainer .btn2 .btn { min-width: 0; width: 120px; margin: 0; }


.btn-close { display:block; width:22px; height:22px; position:absolute; right:10px; top:10px; z-index:101; overflow:hidden; cursor:pointer; }
.btn-close:before { content:""; display:block; width:150%; height:3px; position:absolute; left:-28%; top:40%; transform:rotateZ(45deg); -webkit-transform:rotateZ(45deg); background-color:#333333; }
.btn-close:after { content:""; display:block; width:150%; height:3px; position:absolute; left:-21%; top:40%; transform:rotateZ(-45deg); -webkit-transform:rotateZ(-45deg); background-color:#333333; }

/* for popup alert */
.popupalertcontent .innerMessage h3, .popupalertcontent .innerMessage ul{ color: black; font-weight: normal;padding-bottom:0; line-height:20px; padding-left:30px; font-size: 1.2rem; list-style-type: decimal; }
.popupalertcontent .innerMessage ul{ padding-left:50px;}

.popupalertoverlay .overlaycontent .innerMessage{
background-color:#FCDDE2;
margin-bottom:30px;
padding:20px;
border-radius:5px;
}
.popupalertoverlay .overlaycontent .innerMessage h3{ padding-bottom:0; line-height:20px; padding-left:30px; background:url('../images/icon_error.png') no-repeat 0 3px; color:#ED1B2E; font-weight: normal; }

.popupalertBody {padding-left:30px;font-size: 1.2rem;}
.popupalertBody li {padding: 0px; line-height:20px;}
.popupalertBody ol {list-style-type:decimal;padding-left:20px; margin-left: 0px;}
.popupalertBody ul {list-style-type:disc !important;padding-left:20px !important; margin-left: 0px;}
/* for popup alert */

.popupalertcontent .btnContainer .btn2 .btn {
    width: 130px;
}
.messageboxoverlay { position: fixed; }
.messageboxoverlay .btnContainer .btn2 .btn { min-width: 130px; width: auto; }

.innerHeader {padding: 30px 0;}
.pageDes { padding-bottom: 20px;}

.tableContainer, .chartContainer, .tableCol2 { margin-bottom: 60px;}

.code { display: inline; padding: 0 5px 0 0;}

.loading { display: none; width: 100%; }
.loading img { max-width: 100px; }
.blockOverlay { background-color: #FFF !important; position: fixed !important; top: 0 !important; left: 0 !important;  }
.blockMsg { border: 0px !important; background-color: transparent !important; top: 33% !important; margin: 5% auto !important; left: 0 !important; right: 0 !important; width: 100% !important; }


/* Top Nav start */
.topNavContainer { background: #BCBCBA; width: 100%; height: 40px;}
.topNavContainer .functionContainer { float: left; margin: 11px 17px 0px 100px; }
.topNavContainer .topNav { float: right; margin: 10px 17px 0 0; font-size: 14px;}
.topNavContainer .topNav ul li { display: inline-block; color: #FFFFFF; padding-right: 20px;}
.topNavContainer .topNav ul li.topNavDate, .topNavContainer .topNav ul li.lang, .topNavContainer .topNav ul li.logout {position: relative; top: 3px;}
.topNavContainer .topNav ul li.last { padding-right: 0;}
.topNavContainer a { color: #FFFFFF;}
.clientSearch a, .contact a, .print a { display: block; background: url(../images/nav/top_nav.png) no-repeat; width: 19px; height: 19px; text-indent: -9999px;}
.clientSearch a { background-position: 0 -181px;}
.contact a { background-position: 0 2px;}
.print a { background-position: 0 -97px;}
/* Top Nav end */

/* Left Nav start */
.navContainer { background: #BCBCBA; width: 80px; position: absolute; left: 0; top: 0; /*overflow: hidden;*/ z-index: 999; height: 100%; /*min-height: 820px;*/}
.navContainer .nav {margin-top:40px;}
.navContainer .nav li { color: #FFFFFF; height: 70px; position: relative; overflow: hidden; margin: 1px 0;}
.navContainer .nav li a { width: 100%; height: 100%; background: url(../images/nav/nav.png) no-repeat; display: table; position: relative; color: #FFFFFF; background-size: 50px;}
.navContainer .nav li .navText { display: table-cell; top: 50%; vertical-align: middle;  width: 100%;}
.navContainer .nav li .navText span { display: inline-block; font-size: 13px; padding-left: 83px; position: relative;  line-height: 110%; width: 130px;}
.navContainer .nav li.active { background: url(../images/nav/nav_bg.jpg) 0 0 repeat-y;}
.navContainer .nav li.active:hover { background: url(../images/nav/nav_bg.jpg) 0 0 repeat-y; border-radius: 0;}
.navContainer .nav li.active:hover::after { display: block; content: ''; width: 0; height: 0; position: absolute; right: 0; top: 50%; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #FFFFFF;}
.navContainer .nav li.hover { background: #333333; width: 230px; margin-right: 1px;}
.navContainer .nav li.topNav.hover{border-radius:0;}
.navContainer .nav li.active::after { display: block; content: ''; width: 0; height: 0; position: absolute; right: 0; top: 50%; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #FFFFFF; }
.navContainer .nav li:hover::after { display: none;}

/* nav item start */
.navContainer .nav a.navMenu { background-position: 12px 0;}
.navContainer .nav a.navPolicies { background-position: 12px -70px;}
.navContainer .nav a.navInvestment { background-position: 12px -140px;}
.navContainer .nav a.navTargetPrice { background-position: 12px -210px;}
.navContainer .nav a.navContract { background-position: 12px -280px;}
.navContainer .nav a.navPolicyContracteCopy { background-position: 12px -280px;}
.navContainer .nav a.navEstatement { background-position: 12px -350px;}
.navContainer .nav a.navSelectedHospitals { background-position: 12px -420px;}
.navContainer .nav a.navPaymentInstructions { background-position: 12px -490px;}
.navContainer .nav a.navChangeRequestsProcessing { background-position: 12px -560px;}
.navContainer .nav a.navToolsUsefulLinks { background-position: 12px -630px;}
.navContainer .nav a.navContactFinancialConsultant { background-position: 12px -700px;}
.navContainer .nav a.navMyPrudentialClub { background-position: 12px -770px;}
.navContainer .nav a.navEclaims { background-position: 12px -840px;}
/* nav item end */

/* Left Nav end */

/* Footer start */
.backToTopWrapper {position: fixed; right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 1px; width: 1024px; bottom: 100px; display: none; }
.backToTopWrapper a{ position: absolute; top: 0; right: 0; z-index: 101; background: url(../images/btn_top.png) no-repeat 0 0; width: 50px; height: 50px; text-indent: -5000px; }
.footerContainer { border-top: 1px solid #CCCCCC; padding: 20px 0; width: 100%; box-sizing: border-box; background: #FFFFFF;}

.footerContainer .footer .copyright { display: block; padding-bottom: 10px;}
.footerContainer .footer a { color: #333333;  margin-left: 10px;}
.footerContainer .footer a::before { display: inline-block; content: ''; width: 1px; height: 12px; background: #333; margin: -2px 10px -2px 0; }
.footerContainer .footer a:hover{text-decoration: underline;}
.footerContainer .footer a.first::before{ display: none;}
.footerContainer .footer a.first { margin-left: 0;}
.footerContainer .footer a:active{background-color: transparent;}
/* Footer end */


/* Dropdown List start */
.dropDownList { display: table; height: 100%; width: 100%;font-size: 14px;}
.dropDownList .arrow { background: url(../images/arrow_small.png) 50% -200px no-repeat; width: 18px; height: 18px; display: block; position: absolute; right: 10px; top: 50%; margin-top: -9px;}
.dropDownList.active .arrow { background-position: 50% -300px;}
.dropDownList.active { z-index: 996;}
.dropDownList .dropDownListHeader {  border: 1px solid transparent; width: 100%; box-sizing: border-box; cursor: pointer;}
.dropDownList.active .dropDownListHeader { display: table; vertical-align: middle; border: 1px solid #BCBCBA; border-radius: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.dropDownList.disabled .dropDownListHeader { background: #E0E0E0; cursor: auto; }
.dropDownList .dropDownContent { display: none;}
.dropDownList .dropDownContent ul {padding-bottom: 0;}
.dropDownList .dropDownContent ul li a { padding:15px 20px 15px 20px; display: block; color: #333333; height:auto;}
.dropDownList .dropDownContent ul li a:hover, .dropDownList .dropDownContent ul li a:active{background:#F6F6F6;}
.dropDownList .dropDownContent ul li a span.out{display:table; height:100%;}
.dropDownList .dropDownContent ul li a span.in{display:table-cell; height:50%; vertical-align: middle; line-height: 15px;}

.dropDownList .dropDownListHeader {border: 1px solid #EEEEEE; border-radius: 6px;}
.dropDownList .dropDownListHeader:hover{background: #FAFAFA;}
.dropDownList.disabled .dropDownListHeader:hover { background: #E0E0E0; }
.dropDownList.active .dropDownListHeader { display: table; vertical-align: middle; border: 1px solid #BCBCBA !important;  border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: #F6F6F6;}

.dropDownList { font-size: 14px;position: relative;}
.dropDownList .dropDownListHeader {  padding: 0 40px 0 20px; float: left; position: relative;  height: 40px; display: table; background: #FFFFFF;}
.numRed {display: inline-block; background: #F2606F; color: #FFF; text-align: center; border-radius: 20px; height: 17px; width: auto; font-size: 11px; padding: 0 5px; line-height: 17px; vertical-align: middle;}
.dropDownListHeader .numRedWrapper { display: inline-block; position: absolute; left: 5px; top: 23px; width: 30px;}
.dropDownListHeader .numRed { float: right;}
.dropDownListHeader .text { display: table-cell; vertical-align: middle;}
.dropDownList .dropDownContent { border: 1px solid #CCCCCC; border-radius: 6px; border-top-left-radius: 0; border-top-right-radius: 0; background: #FFFFFF; z-index: 998; position: absolute; width: 100%; top: 39px; box-sizing: border-box; overflow: hidden;}
.dropDownList .dropDownContent ul {overflow: hidden;}
.dropDownList .dropDownContent ul li { display: block;}
.dropDownList .dropDownContent ul li .numRed { float: right;}

.dropDownList .dropDownListHeader:hover{background:#F6F6F6;}
/* Dropdown List end */

/* expand area start */
.expandContainer.active { border-bottom: 0;}
.expandContainer .expandTitle { cursor: pointer; position: relative;}
.expandContent { display: none;}
.expandContainer.active > .expandContent { display: block;}
.expandContainer .expandTitle.arrow.red::after { content:''; background: url(../images/arrow_large.png) 0 0 no-repeat; width: 18px; height: 8px; display: inline-block; position: absolute; right: 10px; top: 50%; margin-top: -4px;}

.expandContainer.active .expandTitle.arrow.red::after { background-position: 0 -100px;}

/* expand area end */

/* Account Nav start */
.accountNav { position: absolute; right: 0; top: 45%; margin-top: -18px; height: 51px; max-width: 300px; width: auto;}
.accountNav .dropDownList { position: relative; height: 0;}
.accountNav .dropDownList .dropDownListHeader { padding: 0 30px 0 60px; float: left; position: relative; height: 50px; display: table; background: #FFFFFF; border: 1px solid #FFF;}
.accountNav .dropDownList .dropDownListHeader:hover, .accountNav .dropDownList.active .dropDownListHeader {background:#F6F6F6;}
.accountNav .dropDownListHeader .iconPerson { background: url(../images/icon_person.png) 0 0 no-repeat; width: 28px; height: 28px; position: absolute; left: 26px; top: 5px;}
.accountNav .numRed {display: inline-block; background: #F2606F; color: #FFF; text-align: center; border-radius: 20px; height: 17px; width: auto; font-size: 13px; padding: 0 5px;  line-height: 17px;}
.accountNav .dropDownListHeader .numRedWrapper { display: inline-block;  width: 30px; position: absolute; top: 18px; left: -18px;}
.accountNav .dropDownListHeader .numRed { float: right;}
.accountNav .dropDownListHeader .text { display: table-cell; vertical-align: middle;}
.accountNav .dropDownList .dropDownContent .text {display: block; padding: 15px 20px;}
.accountNav .dropDownList .dropDownContent .text.mobile {display:none;}
.accountNav .dropDownList .dropDownContent { border: 1px solid #CCCCCC; border-radius: 6px; border-top-left-radius: 0; border-top-right-radius: 0; background: #FFFFFF; z-index: 998; position: absolute; width: 100%; top: 49px; box-sizing: border-box; overflow:hidden;}
.accountNav .dropDownList .dropDownContent ul li { display: block;}
.accountNav .dropDownList .dropDownContent ul li .numRed { position: absolute; right: 20px; top: 50%; margin-top: -8px;}
.accountNav .dropDownList .dropDownContent ul li a { position: relative;}
.accountNav .dropDownList .dropDownContent ul li a:hover { background: #F6F6F6; }
.accountNav .userName { text-transform: capitalize; }


/* Account Nav end */

/*  Select Function start  */
.selectFunction {  height: 40px; width: 240px;}
.selectFunction.active {  z-index:999;}

/*  Select Function end  */

/* button or icon links start */

.btn { border-radius: 6px; padding: 10px; display: inline-block; box-sizing: border-box; text-decoration: none; font-size: 14px; line-height: 14px; text-align: center; width: 100%; background-repeat: no-repeat; box-sizing: border-box;}
.btn.red { background-color: #EC1A2D; color: #FFFFFF;}
.btn.gray { background-color: #BCBCBA; color: #FFFFFF;}
.btn.gray.hover, .btn.gray:active { background-color: #666666;}
.btn.red.hover, .btn.red:active { background-color: #BD1121;}
.btnIcon { padding-left: 36px; background-repeat: no-repeat; background-position: 10px 50%;}

.btnContainer { position: relative;}
.btnContainer.btn2 > div { float: left; margin: 0; box-sizing: border-box;}
.btnContainer.btn2 > div .btn { display: block; text-align: center;}
.btnContainer.btn2 > div:first-child { padding-right: 7px;}
.btnContainer.btn2 > div:last-child { padding-left: 7px;}

.arrow::after { position: relative;}
a.arrow.red { line-height: 18px;}
.arrow.red::after { display: block; content: ''; background: url(../images/arrow_small.png) 50% 0 no-repeat; width: 18px; height: 18px; float: right;}
.arrow.orange::after { display: block; content: ''; background: url(../images/arrow_orange.png) 50% -200px no-repeat; width: 13px; height: 13px;  margin-left: 10px; position: absolute; top: 50%; right: 10px; margin-top: -6px;}

.iconLinkContainer { display: block;}
.iconLinkContainer .iconLink { margin-right: 10px; text-indent: -9999px; display: inline-block;   text-align: left;}
.iconLinkContainer .iconLink:last-child { margin-right: 0;}
/* button or icon links end */

/* table style start */
.label { border-radius: 3px; width: 60px; display: inline-block; font-size: 12px; color: #FFFFFF; text-align: center;}
.label.red { background: #EB192C;}
.label.yellow { background: #FD9B3B;}
.label.orange { background: #FD9B3B;}
.label.pink { background: #E75265;}

.tableContainer table { width: 100%;border-bottom: 1px solid #CCCCCC;}
.tableContainer h2 { padding-bottom: 10px; border-bottom: 1px solid #999999; position: relative;padding-right: 40px; line-height: 28px;}
.tableContainer h2.redBorder {  font-weight: bold;}
.tableContainer h2.redBorder::before { display: block; width: 4px; background: #F2606F; content: ''; height: 28px; float: left;  margin-right: 10px; }
.tableContainer h2 .remarks { line-height: 125%; font-size: 12px; display: block; margin-top: 20px;}

.tableContainer a { color: #333333;}


.tableContainer { border-bottom: 5px solid #FDF1F2; }
.tableContainer::after { border-bottom: 2px solid #FFF; }
.tableContainer.active { border-bottom: 0; }
.tableContainer.active::after { border-bottom: 0; }
.tableContainer.active .tableList .tableContent { border-bottom: 5px solid #FDF1F2;}
.tableContainer.active .tableList .tableContent::after { display: block; content: ''; border-bottom:0;}

/* table - no expand function start */
.tableContainer.noExpand { border-bottom: 0 !important;}
.tableContainer.noExpand::after { display: none !important;}
.tableContainer.noExpand .tableContent {border-bottom: 5px solid #FDF1F2;}
/* table - no expand function end */

.tableList { position: relative;}
.tableList table th { padding: 10px; background: #FDF1F2; vertical-align: bottom;  border-bottom: 1px solid #CCCCCC;  box-sizing: border-box; }
.tableList table td { padding: 10px 10px; border-bottom: 1px solid #CCCCCC; box-sizing: border-box;}
.tableList table td .code { display: block;}
.tableList table tr:hover td td {background: #FFFFFF;}
.tableList table tr:last-child { border-bottom: 0;}

/* colspan start */
.tableList .colspan span.colspanHead { display: block; text-align: center;}
.tableList th.colspan span.colspanText { width: 50%; display: block; float: left; text-align: center;}
.tableList td.colspan span.colspanText { width: 50%; display: block; float: left;}
.tableList td.colspan div.colspanHead::before { display: block; padding-bottom: 10px;}
/* colspan end */

/* 2 colums fake table start */
.tableCol2 { width: 100%; border-top: 1px solid #969696; border-bottom: 1px solid #CCCCCC;}
.tableCol2 .tableRow { border-bottom: 1px solid #EEEEEE;}
.tableCol2 .tableRow:last-child { border-bottom: 0;}
.tableCol2 .colLeft { display: block; width: 30%; padding: 10px 10px 10px 0; box-sizing: border-box; float: left;}
.tableCol2 .colRight { display: block; width: 70%; padding: 10px 0 10px 10px; box-sizing: border-box; float: left;}
.tableCol2 .colSpan { display: block; padding: 10px 0px; box-sizing: border-box; }
.tableCol2.equalWidth .colLeft, .tableCol2.equalWidth .colRight { width: 50%; }
.tableContent .tableCol2 { margin-bottom: 0; border-top: 0;}
.tableContent .tableCol2 .colLeft { padding-left: 10px;}
.tableContent .tableCol2 .colRight { padding-right: 10px;}
/* 2 colums fake table end */

/* 3 colums fake table start */
.tableCol3 { width: 100%; border-top: 1px solid #969696; border-bottom: 1px solid #CCCCCC;}
.tableCol3 .tableRow { border-bottom: 1px solid #EEEEEE;}
.tableCol3 .tableRow:last-child { border-bottom: 0;}
.tableCol3 .colLeft { display: block; width: 33%; padding: 10px 10px 10px 0; box-sizing: border-box; float: left;}
.tableCol3 .colMiddle { display: block; width: 34%; padding: 10px 0px; box-sizing: border-box; float: left;}
.tableCol3 .colRight { display: block; width: 33%; padding: 10px 0 10px 10px; box-sizing: border-box; float: left;}
.tableCol3 .colSpan { display: block; padding: 10px 0px; box-sizing: border-box; }
.tableContent .tableCol3 { margin-bottom: 0; border-top: 0;}
.tableContent .tableCol3 .colLeft { padding-left: 10px;}
.tableContent .tableCol3 .colRight { padding-right: 10px;}
/* 3 colums fake table end */

/* multi layer header table start */
.convertMultiLayerHeaderTable table tr.bottomLayer th { padding-top: 5px; }
.convertMultiLayerHeaderTable table tr th[class^="groupedHeader"],
.convertMultiLayerHeaderTable table tr th[class*=" groupedHeader"] { border-bottom: 0px; padding-bottom: 0px; text-align: center; font-weight: bold; }
.convertMultiLayerHeaderTable table tr th[class^="groupedHeader"] > div,
.convertMultiLayerHeaderTable table tr th[class*=" groupedHeader"] > div { border-bottom: 1px solid #333333; }
.convertMultiLayerHeaderTable table tr td[class^="groupedContent"] .responsive:before,
.convertMultiLayerHeaderTable table tr td[class*=" groupedContent"] .responsive:before { padding-left: 10px; }
/* multi layer header table end */

/* table style end */

/* list item */
ol { list-style-type: decimal; margin: 0 0 0 17px;}
ol li { padding: 0 0 10px 0;}
ol li:last-child { padding: 0;}

/* scroll bar */
.jspVerticalBar, .jspTrack { width: 8px !important;}
.jspTrack, .jspVerticalBar { background: transparent !important;}
.jspDrag { width: 8px; border-radius: 10px; background: #CCC !important;}
.jspPane { width: 100% !important; box-sizing: border-box; }

.dropDownList .dropDownContent.scroll-pane { height: 300px;}
.dropDownContent.scroll-pane .jspVerticalBar { right: 6px;}

/* select */
.customSelect { width: 100%;  padding: 0;  height: 36px;  font-size: 12px;  text-align: left; box-sizing: border-box; cursor: pointer; display: block; user-select: none; -webkit-user-select: none; /*position: relative;*/  z-index: 10; background: url(../images/arrow_small.png) 100% -190px no-repeat #FFFFFF;}
.customSelect.active { background-position: 100% -290px;}
.customSelect .display { color: #666; line-height: 32px;  display: block; overflow: hidden; text-overflow: ellipsis; border: 2px solid #CCCCCC; -webkit-box-shadow: inset 3px 3px 6px 0px rgba(0,0,0,.1);  box-shadow: inset 3px 3px 6px 0px rgba(0,0,0,.1);height:100%;}
.customSelect.active .listContainer { z-index: 999;}
.customSelect.active .arrow { background-position: 50% -300px;}

.listContainer { padding: 0 12px; box-sizing: border-box;}
.listContainer ul li:first-child { display: none;}
.inputDiv, .display { padding: 0 12px; box-sizing: border-box; }


.listContainer { background: #FFFFFF; border: 2px solid #CCCCCC; position: relative;margin-top: -5px; border-top-left-radius: 0; border-top-right-radius: 0; overflow: hidden;padding: 0;}
.listContainer.resetPos { border-bottom-left-radius:0 !important; border-bottom-right-radius: 0 !important; position: relative; bottom: 146px;}
.listContainer ul  { background: #FFFFFF; }
.listContainer ul li { cursor: pointer; padding: 10px 12px; -webkit-user-select: none; color: #666;}
.listContainer ul li:hover { background-color: #ED1B2E;  color: #FFF; }

/* input */
.inputDiv { height:36px; text-align:left; border-radius: 6px; border:#CCCCCC 2px solid; -webkit-box-shadow: inset 3px 3px 6px 0px rgba(0,0,0,.1); box-shadow: inset 3px 3px 6px 0px rgba(0,0,0,.1); background: #FFFFFF;display: block; }
.inputDiv input { border: none; background: 0; padding: 0; margin: 0 !important; width: 100%; height:32px; line-height: 32px;}

.inputDiv.disabled { background: #E0E0E0;}
.inputDiv.disabled .inputPlaceHolder { display: none;}

input[type=text]::-ms-clear { display: none; width : 0; height: 0; }

input::placeholder { color: #A9A9B1; opacity: 1; }
input::-webkit-input-placeholder { color: #A9A9B1; }
input:-moz-placeholder { color: #A9A9B1; opacity: 1; } /* FF 4-18 */
input::-moz-placeholder { color: #A9A9B1; opacity: 1; } /* FF 19+ */
input:-ms-input-placeholder { color: #A9A9B1; }  /* IE 10+ */

input:focus::placeholder { color:transparent; }
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

input:disabled::placeholder { color:transparent; }
input:disabled::-webkit-input-placeholder { color:transparent; }
input:disabled:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:disabled::-moz-placeholder { color:transparent; } /* FF 19+ */
input:disabled:-ms-input-placeholder { color:transparent; } /* IE 10+ */

/* float area start */
body.overlayOpen .overlay { display: block; top: 0;}
body.overlayOpen .navContainer { z-index: 995;}

.floatArea { position: absolute; right: -1373px; top: 20px; box-sizing: border-box; display: none; z-index: 999; display: none;}

.floatArea .btnClose { background: url(../images/btn_close.png) 0 0 no-repeat; width: 16px; height: 16px; text-indent: -9999px; display: block; position: absolute; z-index: 999; }

.floatArea h2 { font-size: 20px; padding-bottom: 20px;}

.hiddenLayer{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1020; display: none; overflow: hidden; min-height: 960px;}
.hiddenLayer > div { position: relative; max-width: 1024px; width: 100%; height: 100%; margin: 0 auto; overflow:hidden;}
.hiddenLayer.fullHeight, .hiddenLayer.fullHeight > div  { overflow:visible; }

/* float area end */

/* remarks */
.tableContainer .remarks .red { color: #EB192C;}
/*.tableContainer .remarks */.remarksLabel {margin-right: 5px; float: left;}
/*.tableContainer .remarks */.remarksContent { display: inline-block; float: left;}


/* Hints start */
.btnHints { display: inline-block; width: 18px; height: 19px;}
.btnHints img { width: 100%;}
.hintsContainer { position: absolute; width: 260px; height: auto; z-index: 995; margin-left: -130px;
 left: 50%; bottom: 100%; margin-bottom: 15px;}
h4 { color: #333333; padding: 0 20px 15px 0; font-weight: bold;  }
.hintsContainer .hintsArea { border-radius: 6px; background: #EEEEEE; width: 260px; position: relative; padding: 20px; box-sizing: border-box; display: block;}
.hintsContainer .btnHintsClose { position: absolute; right: 10px; top: 10px; display: block; width: 16px; height: 16px; background: url(../images/btn_close_hints.png) 0 0 no-repeat; text-indent: -9999px; text-align: left;}
.hintsContainer .hintsTitle { display: block; box-sizing: border-box; padding: 0 25px 10px 0; font-weight: bold; text-align: left; font-size: 12px; color: #333333;}
.hintsContainer .hintsContent { background: #FFFFFF; padding: 10px; width: 100%; height: 100%; box-sizing: border-box;  text-align: left; display: block; font-size: 12px; color: #333333; font-weight:normal;}

.hintsWrapper {display: inline-block; position: relative; vertical-align: bottom; margin-left: 5px; margin-top: -2px;}
.hintsContainer .arrow { left: 50%; border: solid transparent; position: absolute; pointer-events: none; border-top-color: #EEEEEE; border-width: 10px; margin-left: -10px;}
.btnHints::before { display: none; left: 50%; top: -15px; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: #EEEEEE; border-width: 10px; margin-left: -9px;}
.hintsWrapper.active .btnHints::before { display: block;}

/*** Long Description PopUp ***/
.longDescWrapper .hintsContainer .hintsArea, .longDescWrapper .hintsContainer { width: 401px; }
.longDescWrapper .hintsContainer { margin-left: -200px; }

td.hintsWithIcon .mobileHints { display: none; }

.tableList .tableContent td .responsive { position: relative;}
.tableList .tableContent td.hints .hintsWrapper { display: none; position: absolute; width: 16px; }
/* Hints end */

/* Disc */
.tableCol2 .listRow { border-bottom: 0; }
.tableCol2 .tableRow.listRow span { padding-bottom: 0;}
.tableCol2 li { margin-bottom: 10px;}
.tableCol2 li:last-child { margin-bottom: 0;}

.discPt { position: relative; padding-left: 20px; display: block;}
.discPt::before { display: block; content: ''; border: 2px solid #333333; border-radius: 100%;  float: left; margin-top: 4px; position: absolute; left: 3px; top: 2px;}

/* List */
ul.disc { list-style: disc; margin-left: 20px;}

/* Custom checkbox start */
.checkboxRow { display: block; margin-bottom: 20px; white-space: nowrap; position: relative;}
.checkboxRow:last-child { margin-bottom: 0;}
.checkboxDiv input[type=checkbox] { opacity: 0; width: 20px; height: 20px; cursor: pointer; display: inline-block; vertical-align: middle; }
.checkboxDiv { display: inline-block; width: 20px; height: 20px; border: 2px solid #CCCCCC; border-radius: 6px; margin: 0; text-overflow: ellipsis; border: 2px solid #CCCCCC; -webkit-box-shadow: inset 3px 3px 6px 0px rgba(0,0,0,.1);  box-shadow: inset 3px 3px 6px 0px rgba(0,0,0,.1); background: #FFFFFF no-repeat 50% 50%;}
.checkboxDiv.checked { background-image: url(../images/icon_checkbox_tick.png);}
.checkboxLabel { cursor: pointer; margin: 5px 0 5px 10px; display: inline-block; white-space: normal; vertical-align: top; }
.checkboxDiv.disabled { background-color: #E0E0E0;}
.checkboxDiv.disabled input[type=checkbox] { cursor: default;}

.agreement .checkboxDiv { left: 0; top: 0; position: absolute;}
.agreement .checkboxLabel {  padding-left: 25px; box-sizing: border-box;}
/* Custom checkbox end */

/* Custom radio start */
input[type='radio'] { width: 20px; height:  20px; opacity: 0; float: left; cursor: pointer;}

input[type='radio'] + label { margin: 0; clear: none; padding: 0 0 0 30px; cursor: pointer; display: inline-block; line-height: 20px; width: auto;}

input[type='radio'] + label {background-repeat:no-repeat; background-position:0 0;}
input[type='radio'] + label {background-image:url(../images/icon_radio.png);}

input[type='radio']:checked + label {background-position:0 -100px;}
input[type='radio']:disabled + label {background-position:0 -200px; cursor: default; }

.radioContainer input[type=radio] { opacity: 0; width: 20px; height: 20px; cursor: pointer; display: inline-block; vertical-align: middle; visibility: hidden; }
.radioContainer input[type='radio']:disabled { cursor: default; }
/* Custom radio end */
/* Main Content end */

.backToTopWrapper {z-index: 1;}

/* select policy */
.selectPolicy .subTitle { display: block; padding: 20px 0 15px 0; margin: 0 25px; box-sizing: border-box; border-bottom: 1px solid #333333; font-weight: bold; }
.selectPolicy .listRow { padding: 0 25px; box-sizing: border-box;}
.selectPolicy .listRow:hover { background: #F6F6F6;}
.selectPolicy .listRow a { color: #333333;}
.selectPolicy .listConatiner:last-child { padding-bottom: 20px; box-sizing: border-box;}
.selectPolicy .number { display: block; width: 30%; float: left; padding: 15px 10px 15px 0;  box-sizing: border-box;}
.selectPolicy .name { display: block; width: 70%; float: left; padding: 15px 0; text-align: right;}
.selectPolicy .dropDownListHeader .text { max-width: 332px; }
.selectPolicy .dropDownListHeader .number, .selectPolicy .dropDownListHeader .name { padding: 0px; }
.selectPolicy .dropDownListHeader .number { width: 33%; }
.selectPolicy .dropDownListHeader .name { width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selectPolicy { float: left; width: 394px;}
.selectViewMode { float: right; width: 244px;}
.selectPolicy .pointer{cursor: pointer;}
.selectPolicy .pointer:hover{background:#F6F6F6;}

/* error msg */
.msgError a { color: #ED1B2E !important;}

table .msgError { background: transparent; padding: 0; margin: 10px 0 0 0; }
table .msgError::before { display: none; }

.break-line{ display:block; height:5px; background-color:#FDF1F2; border-top: 1px solid #CCCCCC; }
.financialSummary .break-line{ display:none; }
.financialSummary.active .break-line{ display:block; }
.dividendPayoutSummary .break-line{ display:none; }
.dividendPayoutSummary.active .break-line{ display:block; }

/* Acknowledge policy contract */
.contractAckBtnContainer .btn.arrow.orange::after { background-position: 50% 0; right: 0; }
.contractAckBtnContainer .btnContractAck { text-align: right; padding: 0; color: #F26D31; padding-right: 22px; width: auto; float: right; position: relative; font-size: 12px; }
.contractAckContainer { position: relative; }
.contractAckContainer .contractAckTitle { display: inline-block; border: 1px solid #F26D31; padding: 5px 33px 5px 10px; border-radius: 4px; color: #F26D31; position: relative; top: 1px; background: #FFFFFF; cursor: pointer; }
.contractAckTitle.arrow.orange::after { display: block; content: ''; background: url(../images/arrow_orange.png) 50% 0 no-repeat; width: 13px; height: 13px; margin-left: 10px; position: absolute; top: 50%; right: 10px; margin-top: -6px; }
.contractAckTitle.arrow.orange:hover { background-color: #F0F0F0; }
.tableContent table tr.hasContractAck td { border-bottom: 0; }
.tableContent table tr.contractAckRow td { background: none; padding: 0 0 10px 10px; border-bottom: 1px solid #CCCCCC;}
.tableContent table tr.contractAckRow td:hover { background: #FAFAFA; }

/* new add */
.mainWrapper { min-height: 891px;}
.mainContainer { height: 100%;}
.mainContent { height: 100%; background: #FFFFFF;}
.contentContainer { background: #FFFFFF; }

.mainWrapper::after {position: relative; bottom: 0; left: 0; width: 100%; z-index: 995;}
.footerContainer { margin-left: 104px; margin-right: 20px; width: auto; position: relative;  bottom: 0; display: block;}

.errorMessageContainer { background-color:#FCDDE2; margin-bottom:30px; padding:20px; border-radius:10px; }
.errorMessageContainer h3 { padding-bottom:20px; line-height:20px; padding-left:30px; color:#ED1B2E; font-weight: normal; }
.errorMessageContainer h3:first-child { background:url('../images/icon_error.png') no-repeat 0 3px; }
.errorMessageContainer h3:last-child { padding-bottom:0; }
.errorMessageContainer:lang(en) h3 { font-style: italic; }
.errorMessageContainer:lang(zh) h3 { font-style: normal; }
.errorMessageContainer h3 a { color: #ED1B2E; text-decoration: underline; }

.errorMessage h3 { font-weight: bold }

/* pages */
.pagesContainer { padding: 20px 0; }
.pages { float: right; padding: 0 15px 0 0; }
.pages .pagesIcon { background: url(../images/icon_pages.png) no-repeat; width: 10px; height: 12px; display: block; float: left; margin-right: 15px; }
.pages .pagesIcon:last-child { margin-right: 0; }
.pages .pagesIcon.pagesFirst { background-position: 0 0; }
.pages .pagesIcon.pagesLast { background-position: 0 -100px; }
.pages .pagesIcon.pagesPrevious { background-position: 0 -200px; }
.pages .pagesIcon.pagesNext { background-position: 0 -300px; }
.pages .pagesNum { display: block; float: left; width: 12px; color: #333333; margin-right: 15px; text-align: center; }
.pages .pagesNum.active { font-weight: bold; font-size: 16px; cursor: default; }

/*General error Message */
div.vld-error { background-color: #FCDDE2;  padding: 20px; border-radius: 10px; margin-bottom: 30px; }
p.vld-error { padding-bottom: 0px; line-height: 20px; padding-left: 30px; color: #ED1B2E; font-weight: normal; font-size: 14px; display:block; }
p.vld-error:lang(en) { font-style: italic; }
p.vld-error:lang(zh) { font-style: normal; }
div.vld-error > p.vld-error-img { background: url(../images/icon_error.png) 0 3px no-repeat; }
span.vld-error { clear: both; color: #F00 !important; font-weight: normal !important; font-size: 12px !important; }
span.vld-error:lang(en) { font-style: italic; }
span.vld-error:lang(zh) { font-style: normal; }

/* date picker */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { vertical-align: middle; }
.ui-datepicker .ui-datepicker-today a.ui-state-highlight { background-color: inherit; color: inherit; }
.ui-datepicker .ui-datepicker-current-day a.ui-state-highlight,
.ui-datepicker .ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight { background-color: #ccc; color: #363636; }

.bold { font-weight: bold; }

@media print {
.topNavContainer { display: none;}

html {overflow: visible; height: auto; position:static; }

body { background: none; }

}

@media only screen and (min-width:0px){
/* check window size */
	body::after { content:'desktop'; display:none; }
}

@media only screen and (min-width:767px) {
	.m-t-20 {margin: 20px 0 10px 0!important;}
	.m-t-10 {margin: 10px 0 10px 0!important;}
	.m-r-10 {margin-right:10px!important;
}
	
.headerDropdownContainer.revampWidth { min-width: 65%; float: right;
}