@charset "utf-8";

/* Switch Existing Investment Choices start */

.headerDropdownContainer { width: 650px; float: right; margin: 30px 0 10px 0;}
.hiddenTemplete  { display:none; }
.top-error { display: none; } 
.confirmNext { display: none; margin-top: 60px; }
.hidden { display:none !important; }

/* note */
h3 { padding-bottom: 20px; font-weight: bold;}
ol li { padding: 0 0 10px 0;}
.note { margin-bottom: 40px;}
.note h3 { padding-bottom: 10px; }
.note p a { color: #333333; text-decoration: underline;}

h2 { font-weight: bold;}

/* policy no */
.policyNo { margin-bottom: 40px;}

/* step */
.stepContainer { width: 654px; margin: 0 auto; margin-bottom: 60px;}
.stepContainer img { width: 100%;}

/* code */
.tableCol2 .code { display: inline;}

/* mobile phone no */
.mobilePhoneNo { margin-bottom: 60px; padding: 20px 25px;}
.grayBorderDiv { border: 1px solid #CCCCCC;}

.mobilePhoneNo h2, .mobilePhoneNo .iconText { margin-bottom: 25px;}
.iconText { font-size: 14px; color: #EB1C30; padding-left: 40px; background: 0 0 no-repeat; height: 28px; line-height: 28px; display: block;}
.iconText.iconMobile { background-image: url(../images/switch-investment/icon_mobile.png);}

/* Please select account */
.selectAccount { margin-bottom: 60px; display: none;}
.selectAccount h2 { margin-bottom: 25px; }

.radioContainer span {float:left; font-size:14px; }
.radioContainer span:first-child { margin-right: 80px;}

/* Switch Existing start */
.switchExisting h2 .orange { color: #F26C31;}
.switchExisting .tableContainer { margin-bottom: 5px; }
.switchExisting .tableList table { border-top:  1px solid #999999; border-collapse: inherit;}
.switchExisting .tableList table th.col1 { width: 45%; }
.switchExisting .tableList table th.col2 { width: 25%; }
.switchExisting .tableList table th.col3 { width: 15%; }
.switchExisting .tableList table th.col4 { width: 15%; }
.switchExisting .tableList table th { height: auto;}
.switchExisting .tableList table tr:last-child td { border-bottom: 0;}
.switchExisting .tableList table tr.total td { text-align: left; font-weight: bold;}
.switchExisting .tableList table tr.total td:last-child { text-align: left;}

.switchExisting .tableList table td:first-child.whiteBackground { border-bottom: 0px; }
/* Switch Existing end */


/* Switch New start */
.switchNew { margin-bottom: 60px; }
.switchNew h2 .orange { color: #F26C31;}
.switchNew .tableContainer { margin-bottom: 5px; }
.switchNew .tableList table { border-top:  1px solid #999999;}
.switchNew .tableList table th.col1 { width: 25%; }
.switchNew .tableList table th.col2 { width: 15%; }
.switchNew .tableList table th.col3 { width: 10%; }
.switchNew .tableList table th.col4 { width: 10%; }
.switchNew .tableList table th.col5 { width: 10%; }
.switchNew .tableList table th.col6 { width: 10%; }
.switchNew .tableList table tr.total td { text-align: left; font-weight: bold;}
.switchNew .tableList table tr.total td:last-child { text-align: left;}
.switchNew .tableCol2 { margin-bottom: 0;}
.switchNew .tableCol2 .total { font-weight: bold; }

.switchNew .valuationDateContainer .valuationDateLabel { display: none; }

.pageEndBtn .btnContainer .btn2.left > div { width: auto;}
.pageEndBtn .btnContainer .btn2.left .btn:first-child { margin: 0;}
/* Switch New end */

/* button */
.btnIcon.btnSelectInvestmentChoices { background-image: url(../images/switch-investment/btn_select_choices.png); width: 223px; float: left; margin-right: 20px;}

/* Receive Notification */
.receiveNotification h2 { margin-bottom: 10px; } 
.receiveNotification .tableList table { border-top:  1px solid #999999;}
.receiveNotification .tableCol2 { margin-bottom: 0;}

/* declaration */
.declaration { margin-bottom: 20px;}
.declaration > p { padding-bottom: 0px; }
/*
.declaration > ol { margin: 0px;}
.declaration > ol li { margin-left: 12px; }
*/

/* agreement */
.agreement { margin-bottom: 20px;}
.agreement > div { margin-top: 35px;}
.agreement > div:first-child { margin-top: 0;}
.agreement a { text-decoration:  underline; color: #333333;}
.agreement .checkboxRow:last-of-type { margin-bottom: 25px;}
.agreement .row:last-child { margin-bottom: 0;}
.agreement label a { text-decoration: underline; color: #333333;}
.agreement ol { margin: 10px 0 20px 17px;}

.declaration h3, .agreement h3 { padding-bottom: 10px; }

/* Page end button */
.pageEndBtn { margin-bottom: 60px;}
.pageEndBtn .btnContainer.btn2 .btn { width: 120px;}
.pageEndBtn .btnContainer.btn2 > div { width: 50%;}
.pageEndBtn .btnContainer.btn2 .btnNext { float: right;}
.pageEndBtn .btnContainer .btnCancel { width: 120px;}

/* float area */
.floatArea { /*height: 800px; */width: auto; background: #F6F6F6; border-radius: 6px; border-top-right-radius: 0; border-bottom-right-radius: 0;left:0px;}
.floatArea .btnClose { top: 20px; right: 20px;}

.floatArea .topFixed {padding: 20px 20px 0 20px; box-sizing: border-box; width: 100%;}
.floatArea .topFixed h2 { padding-bottom: 0;}
.floatArea .topDes { padding: 10px 20px 20px 20px;}
.floatArea .topDes .left { float: left; width: 80%;}
.floatArea .topDes .right { float: right; width: 20%;  font-size: 14px;}
.floatArea .topDes .right .text { float: right; /*width: 200px;*/ line-height: 20px; padding: 0 10px 0 0;}
.floatArea .topDes .right .popUpTableChoice { float: right; width: auto; color: #EC1A2D; font-weight: bold; margin-top: 3px; margin-right: 12px; }
.floatArea .bottomFixed { padding: 10px 20px 20px 20px; box-sizing: border-box; width: 100%;}

.btnIcon.btnLastestPerformance { background-image: url(../images/switch-investment/btn_performance.png); width: 255px; float: right}

/* select investment choices table start */
.selectInvestmentTable { border-top: 1px solid #999999; border-bottom: 1px solid #CCCCCC;}
.scroll-pane { /*height: 502px;*/ height: 300px; width: 895px; padding-right: 12px;}
.selectInvestmentTable th { background: #FDF1F2; padding: 10px; vertical-align: bottom; }
.selectInvestmentTable th[class^="groupedHeader"],
.selectInvestmentTable th[class*=" groupedHeader"] { border-bottom: 0px; padding-bottom: 0px; text-align: center; font-weight: bold; }
.selectInvestmentTable th[class^="groupedHeader"] > div,
.selectInvestmentTable th[class*=" groupedHeader"] > div { border-bottom: 1px solid #333333; }
.selectInvestmentTable th.col1 { padding: 10px 10px 10px 80px; text-align: left; }
.selectInvestmentTable td.col1 { text-align: right; padding: 10px 10px 10px 80px;}
.selectInvestmentTable .col1 { width: 30%;}
.selectInvestmentTable .col2 { width: 6%;}
.selectInvestmentTable .col3 { width: 9%;}
.selectInvestmentTable .col4 { width: 10%;}
.selectInvestmentTable .col5 { width: 10%;}
.selectInvestmentTable .col6 { width: 10%;}
.selectInvestmentTable .col7 { width: 10%;}
.selectInvestmentTable .col8 { width: 15%;}
.selectInvestmentTable .bottomLayer th { padding-top: 5px; }

.sectionTitle { background: #CCCCCC; padding: 10px; display: block; font-weight: bold;}
.innerTable table { }
.innerTable table th { display: none;}
.innerTable td { padding: 20px 10px; text-align: left; vertical-align: top; /*vertical-align: middle;*/ position: relative; border-bottom: 1px solid #CCCCCC; background-color: #FFFFFF; /* bugfix for IE and firefox start */ background-clip: padding-box; /* bugfix for IE and firefox end */ /* bugfix for IE start */vertical-align: top\0; /* bugfix for IE end */}
.innerTable tr:hover td { background: #FAFAFA; background-clip: padding-box; /* bugfix for IE and firefox */}
.innerTable td.col1 { padding: 10px 10px 10px 60px; text-align: left; position: relative;}
.innerTable table tr.active td { /* background: #FAC4AD; bugfix for IE and firefox start */ background-clip: padding-box; /* bugfix for IE and firefox end */}
.innerTable table tr.disabled td { background: #FAFAFA; /* bugfix for IE and firefox start */ background-clip: padding-box; /* bugfix for IE and firefox end */ }
.innerTable.closedFund table tr.disabled td { background: #FFFFFF; /* bugfix for IE and firefox start */ background-clip: padding-box; /* bugfix for IE and firefox end */ }
.innerTable td.col1 .text {
    clear: both;
    top: 22px;
    position: absolute;
}
.innerTable table tr.reSelect td, .popUpTableItem.reSelect{background: #FAC4AD;}


/* .innerTable td.currentChoice .text::before { display: block; content: ''; float:left; width: 10px; height: 10px; background: #F2606F; border-radius: 50%; margin: 1px 0 0 -19px;}  */
/* .innerTable td.currentChoice .checkboxDiv::after { content: '\f02e';float:left;font-weight: 1000;font-family: "Font Awesome 5 Free";color: #68737a;padding-left:20px;position: absolute;}  */
.innerTable .remindInconContainer {
    float: left;
    margin-right: 5px;
    font-weight: 1000;
    color: #68737a;
    display: inline-flex;
    height: 40px;
    width:12px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.innerTable .remindInconContainer img{width:12px; margin-bottom:3px;}
.innerTable .remindInconContainer .fa{display:block; margin-bottom:3px;}
.innerTable .remindInconContainer .fa-exclamation-triangle,
.innerTable .remindInconContainer .fa-ban{color:red;}
.innerTable .remindInconContainer .fa-exchange::before{content: "\f362";}
.innerTable .checkboxDiv { position: absolute; left: 10px; top: 50%; margin-top: -14px; }


.remindIcon { position: relative; display: block; margin-bottom: 10px;}
.remindIcon div {float:left;}
.remindIcon img{width: 12px;transform: translate(0%, 10%);padding-right: 5px;}
.remindIcon.remindCheckbox { display: block; padding-left: 24px; margin-bottom: 10px;}
.remindIcon.remindCheckbox::before { display: block; content: ''; float: left; width: 14px; height: 14px; background: #E0E0E0; border: 2px solid #CCCCCC; border-radius: 5px; position: absolute; left: -2px; top: -2px; -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);}
.remindIcon:last-child { margin-bottom: 0;   display: block;}
.remindIcon.remindCheckbox { background-position: 0 0; }
/* .remindIcon.remindCurrent::before { 
	display: block;
    content: '\f02e';
    float: left;
    position: absolute;
    left: 3px;
    top: 2px;
    font-weight: 1000;
    font-family: "Font Awesome 5 Free";
    color: #68737a;}
.remindIcon.remindChosen::before { 
	display: block;
    content: '\f362';
    font-weight: 1000;
    font-family: "Font Awesome 5 Free";
    float: left; 
    color:#68737a;
    position: absolute;
    left: 3px;
    top: 2px;}
.remindIcon.remindOverRisk::before { 
	display: block;
    content: '\f071';
    font-weight: 1000;
    font-family: "Font Awesome 5 Free";
    float: left; 
    color:red;
    position: absolute;
    left: 3px;
    top: 2px;}
.remindIcon.remindNoRQP::before { 
	display: block;
    content: '\f05e';
    font-weight: 1000;
    font-family: "Font Awesome 5 Free";
    float: left; 
    color:red;
    position: absolute;
    left: 3px;
    top: 2px;} */

/* bottom button */
.btnContainer.text { margin: 0 0 25px 0;}
.btnContainer.text .btnViewLatestInvestment { display: block; width: 335px; line-height: 18px; float: right; color: #333333;}

/* button divided in left and right parts */
.btnContainer .left { float: left; width: 50%;}
.btnContainer .right { float: right; width: 50%;}
.btnContainer .left .btn { width: 120px; float: left;}
.btnContainer .left .btn:first-child { margin-right: 20px;}
.btnContainer .right .btn { width: 220px; float: right;}

/* icon link start */
.iconLinkContainer { /*margin-top: 5px;*/}
.iconLinkContainer .iconLink.iconLinkFactsheet { background: url(../images/switch-investment/icon_factsheet.png) 0 0 no-repeat; width: 23px; height: 26px;}
.iconLinkContainer .iconLink.iconLinkFactsheet.hover { background-position: 0 -100px;}
.iconLinkContainer .iconLink.iconLinkPerformance { background: url(../images/switch-investment/icon_performance.png) 0 0 no-repeat; width: 23px; height: 26px;margin-left:5px;}
.iconLinkContainer .iconLink.iconLinkPerformance.hover { background-position: 0 -100px;}
.iconLinkContainer .iconLink.iconLinkHistory { background: url(../images/switch-investment/icon_history.png) 0 0 no-repeat; width: 24px; height: 26px;}
.iconLinkContainer .iconLink.iconLinkHistory.hover { background-position: 0 -100px;}
/* icon link end */

/* select investment choices table end */


/* remarks */
.remarksLabel { position: absolute; }
.remarks a { color: #333333; text-decoration: underline;}
.otpRemark { font-weight: bold; }

.allocationContainer .inputDiv { margin-right: 15px; }
.percentageSymbol { display: inline-block; position: absolute; right: 0; top: 0; line-height: 36px; }

/* step1 start */

/* note */
.note.step1a {margin-bottom: 30px;}
.note.step1a p {padding: 0 5px 20px 5px;}
.note.step1a p:last-child { padding-bottom: 0;}
.note.step1b {margin-bottom: 17px;}

/* Switch New start */
.step1 .switchNew .tableTopDes { margin-bottom: 10px;}
.step1 .switchNew .tableTopDes .left { float: left; width: 395px; padding-top: 15px;}
.step1 .switchNew .tableTopDes .right { float: right;}
.step1 .switchNew .tableTopDes .right .text { float: right; padding-top: 19px;}
.step1 .switchNew .tableTopDes .switchNo { color: #EC1A2D; font-weight: bold;}

.step1 .switchNew .tableList table th.col1 { width: 20%; }
.step1 .switchNew .tableList table th.col2 { width: 15%; }
.step1 .switchNew .tableList table th.col3 { width: 10%; }
.step1 .switchNew .tableList table th.col4 { width: 15%; }
.step1 .switchNew .tableList table th.col5 { width: 10%; }
.step1 .switchNew .tableList table th.col6 { width: 20%; }

.step1 .switchNew .fundRemarks p { padding-bottom: 5px; }
.step1 .switchNew .fundRemarks p:last-child { padding-bottom: 0px; }
.step1 .switchNew .fundRemarks .hiddenFundRemark { display: none; }
.switchNew .fundRemarks { margin-top: 5px; }
.switchNew .fundRemarks p { padding-bottom: 5px; }
.switchNew .fundRemarks p:last-child { padding-bottom: 0px; }
.switchNew .fundRemarks .hiddenFundRemark { display: none; }

/* checked */
/* .switchExisting .switchOutTable .switchOutTableItem.active td { background: #FAC4AD;}
.switchNew .switchInfoNewTable .switchInfoNewTableItem.active td { background: #FAC4AD;} */

/* Switch New end */

/* Switch Existing start */
.step1 .switchExisting { margin-bottom: 60px; }
.step1 .switchExisting .tableContainer { margin-bottom: 0px; }
.step1 .switchExisting .switchOutTable { position: relative;}
.step1 .switchExisting .tableTopDes { margin-bottom: 10px;}
.step1 .switchExisting .tableTopDes .left { float: left;}
.step1 .switchExisting .tableTopDes .right { float: right;}
.step1 .switchExisting .tableTopDes .switchNo { color: #EC1A2D; font-weight: bold;}
.step1 .switchExisting .tableList table th.col1 { width: 30%; }
.step1 .switchExisting .tableList table th.col2 { width: 20%; }
.step1 .switchExisting .tableList table th.col3 { width: 20%; }
.step1 .switchExisting .tableList table th.col4 { width: 16%; }
.step1 .switchExisting .tableList table th.col5 { width: 14%; }
.step1 .switchExisting .tableList table th .btn { margin-top: 10px;}
.step1 .switchExisting .switchOutTable table th.col4 { padding-top: 8px; }
.step1 .switchExisting .switchOutTable table th.col5 { padding-bottom: 5px; }
.step1 .switchExisting .fundRemarks { margin-top: 5px; }
.step1 .switchExisting .fundRemarks p { padding-bottom: 5px; }
.step1 .switchExisting .fundRemarks p:last-child { padding-bottom: 0px; }
.switchExisting .fundRemarks { margin-top: 5px; }
.switchExisting .fundRemarks p { padding-bottom: 5px; }
.switchExisting .fundRemarks p:last-child { padding-bottom: 0px; }


.step1 .switchExisting th:last-child .colspanHead { font-weight: bold; /*text-decoration: underline;*/ border-bottom: 1px solid #333333; margin: 0 0 5px 0;}
.step1 .switchExisting th:last-child .colspanText .checkboxDiv { display: inline-block; float: left; margin: 0 5px 0 0;}
.step1 .switchExisting th:last-child .colspanText {text-align: left !important; line-height: 24px;}
.step1 .switchExisting th:last-child .colspanText,
.step1 .switchExisting td:last-child .colspanText:first-child { width: 55% !important; padding: 0 10px 0 0;  box-sizing: border-box; }
.step1 .switchExisting th:last-child .colspanText:last-child,
.step1 .switchExisting td:last-child .colspanText:last-child { width: 45% !important; box-sizing: border-box; text-align: left; padding: 0 0 0 10px;}

.step1 .switchExisting .tableList table td { background: #FFFFFF;}
/* Switch Existing end */

/* select policy detail */
.selectPolicyDD {margin:17px 0;}
.step1b .selectPolicy { float: left; width: 420px;}
.seePolicyDetail {width: auto; display: inline-block;}
.seePolicyDetail a {color: #000000; font-weight: bold;  padding: 0 5px 0 0; font-size: 14px;}

.mobilePhoneNo {margin-bottom: 20px; position: relative;}
.confirmMNum {width: 200px; position: absolute; top: 60px; right: 26px;}
.confirmLNum {width: auto; position: absolute; top: 60px; left: 140px;}
.step1d {margin-bottom: 20px;}

.confirmEAddr {width: 200px; position: absolute; top: 60px; right: 26px;}

.step1b h2 { font-weight: bold;}
.mobilePhoneNo h2 { font-weight: bold;}

.step1 .emptyMsg.hidden, .step1 .total.hidden, .step1 .tableCol2.mobile.hidden { display: none; }

.step1 .receiveNotification .left { max-width: 100px; margin: 0 20px 0 0; float: left;}
.step1 .receiveNotification .right { display: inline-block; float: left; width: 760px;}
.step1 .receiveNotification .right > div { padding-bottom: 10px; }
.step1 .receiveNotification .right > div:last-child { padding-bottom: 0px; }
.step1 .receiveNotification .right .inputDiv { width: 360px; /* margin: 0 0 10px 0;  */}
.step1 .receiveNotification .byEmail .right .remarks { margin: 0;}
.dfundJustification { margin-bottom: 60px; border-bottom: 5px solid #FDF1F2;}
.dfundJustification div { margin-bottom: 10px;}
.dfundJustification .dfundRadioContainer {margin-bottom: 0px;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #999999;
    padding-top: 10px;}
.dfundJustification .dfundRadioContainer { padding-left: 10px;}
.dfundJustification .title { font-weight: bold; font-size:14px;}
.dfundJustification .radioDfundR { width:0px; height:0px}
.dfundJustification .inputDiv { display:inline-block; width:360px;}
.dfundJustification .dfundRadioContainer .vld-error {display: block;}
.dfundJustification .vld-error p{ padding-bottom: 10px;}
.step1 .dfundJustification .dfundOtherReason .left { float:left;}
.step1 .dfundJustification .dfundOtherReason .right { float:left;padding-left: 10px; margin-bottom: 0px;}


/* step1 end */

/* step 2 start */
.step2 .tableCol2 { margin-bottom: 0;}
.step2 .remarks { margin: 10px 0 60px 0;}

.step2 .switchExisting h2,
.step2 .switchNew h2 { margin-bottom: 10px;}

/* receive Notification */
.step2 .receiveNotification h2 { margin-bottom: 10px;}
/* step 2 end */

/* step 3 start */
.step3 h3 { padding: 0 0 10px 0; font-size: 20px; line-height: 100%;}
.step3 h4 { font-size: 14px; padding: 0;}
.step3 .pageDes { padding: 0 0 10px 0;}

.tableCol2 .emailAddress { display: inline;}

.step3 .switchExisting h2,
.step3 .switchNew h2 { margin-bottom: 10px;}

.step3 .note h3 { padding: 40px 0px 0px 0px; }

.confirmNotification { margin:  0 0 20px 0;}
.confirmNotification h3 { margin: 0 0 20px 0;}
.confirmNotification p { padding: 0;}
.btnViewDetails { width: 220px; float: right;}
/* step 3 end */


/* new add */
.selectedAccount { display: none;}
.btnContainer.btn2 > div .btn.btnReset, .btnNext { display: none;}
.pageEndBtn .btnReset, .pageEndBtn .btnNext { display: none;}
.whiteSpace{padding-left:34px; padding-bottom: 0px;}

/* fund expand add*/
.searchTable{margin: 20px 20px 0 20px;}
.searchTable .searchRow{margin-bottom: 10px;margin-top: 10px;}
.searchTable .btnSearchInvestment{width: 120px;float: right;}
.searchRow .colLeft{width: 40%;float: left;}
.searchRow .colRight{width: 40%;float: right;}
.searchRow .conditionName{width: 20%;float: left;padding: 10px 0 0 0;}
.searchRow .conditionList{width: 80%;float: right;}
.btnContainer .btnShowAllInvestment {width: 120px;float: right;}
.investmentTableTitle{font-weight: bold; margin:5px 20px 5px 10px;}
h2.searchResultNum {padding-bottom:5px; border-bottom:1px solid #999999;}
.expandDetails.expandContainer .expandTitle { display: inline-block; border: 1px solid #F26D31; padding: 5px 33px 5px 10px; border-radius: 4px; color: #F26D31;}
.expandDetails.active .expandTitle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: #F0F0F0; border-color: #BCBCBA;}
.expandDetails.active .expandTitle::after { background-position: 50% -300px;}
.expandDetails .expandTitle { top: 1px; background: #FFFFFF;}
.expandDetails .expandTitle:hover {background-color: #F0F0F0;}
.selectedInvestmentTable .tableContainer.active {border-bottom: 5px solid #FDF1F2; margin-bottom: 40px;}
.selectedInvestmentTable .tableContainer {margin-bottom: 0px; padding-top: 30px; text-align:right; border-bottom: 0px;}
.selectInvestmentChoices .tableContainer {margin:0 20px 20px 10px;}
.expandContainer .selectClues { padding: 10px; text-align: left;}
.searchNotFound {padding: 10px;}

/*.step1 .switchOutInvestmentTable .inputDiv { height: 36px; } not find switchOutInvestmentTable */
/*.step1 .switchInfoInvestmentNewTable .inputDiv { height: 36px; } not find switchInfoInvestmentNewTable*/
.right > div > .inputDiv { display: block; }
/*span.vld-error { float: right; }*/
.customTableList .switchOutContainer .switchingAll { padding-left: 10px; vertical-align: middle; }
.customTableList .switchOutContainer .switchOutOr { padding:5px 0px; display: block; } /*checked*/
.switchExisting { margin-bottom: 60px; } /*checked*/

.step2 .switchExisting .tableList table th.col1 { width: 21%; }
.step2 .switchExisting .tableList table th.col2 { width: 20%; }
.step2 .switchExisting .tableList table th.col3 { width: 10%; }
.step2 .switchExisting .tableList table th.col4 { width: 12%; }
.step2 .switchExisting .tableList table th.col5 { width: 21%; }

/*.step1 .switchExisting .tableContainer { margin-bottom: 5px; } not use*/

/* 12/24/2018 new version without responsiveheader and noCovert */

.switchExisting .customTableList table th.col1 { width: 21%; }
.switchExisting .customTableList table th.col2 { width: 15%; }
.switchExisting .customTableList table th.col3 { width: 10%; }
.switchExisting .customTableList table th.col4 { width: 17%; }
.switchExisting .customTableList table th.col5 { width: 17%; }
.switchExisting .customTableList table th.col6 { width: 20%; }
.customTableList .tableContent td .responsive { border-collapse: separate; position: relative; display: table;}

/* switchOut content */
.switchOutContainer .content div { display: table; border-collapse: separate; table-layout: fixed; width: 100%;}
.switchOutContainer .content div .inputDiv { display: table-cell; width: 70%; }
.switchOutContainer .content div .switchingUnit { display: table-cell; padding-left: 10px; padding-top: 10px; }
.switchOutContainer .content div .switchingPercent { padding-left: 10px; padding-top: 10px; }
.switchOutContainer .content div .switchingAll.desktop { display: inline; }

/* switchInto */
.switchNew .customTableList table th.col1 { width: 30%; }
.switchNew .customTableList table th.col2 { width: 25%; }
.switchNew .customTableList table th.col3 { width: 19%; }
.switchNew .customTableList table th.col4 { width: 26%; }

/* switchIntoAllocationContainer */
.switchIntoAllocationContainer .content div { display: table; border-collapse: separate; table-layout: fixed; width: 100%;}
.switchIntoAllocationContainer .content div .inputDiv { display: table-cell; width: 85%; }
.switchIntoAllocationContainer .content div .switchingUnit { padding-left: 10px; padding-top: 10px; }

/* switchExisting investment choices table new table header */
.switchExisting .customTableList th[class^="groupedHeader"],
.switchExisting .customTableList th[class*=" groupedHeader"] { border-bottom: 0px; padding-bottom: 0px; text-align: center; font-weight: bold; }
.switchExisting .customTableList th[class^="groupedHeader"] > div,
.switchExisting .customTableList th[class*=" groupedHeader"] > div { border-bottom: 1px solid #333333; }

.switchNew .customTableList th[class^="groupedHeader"],
.switchNew .customTableList th[class*=" groupedHeader"] { border-bottom: 0px; padding-bottom: 0px; text-align: center; font-weight: bold; }
.switchNew .customTableList th[class^="groupedHeader"] > div,
.switchNew .customTableList th[class*=" groupedHeader"] > div { border-bottom: 1px solid #333333; }

.customTableList .btnHints, .customTableList .btnHints img { vertical-align: bottom; }
.receiveNotification .tableContainer { margin-bottom: 30px; }

@media only screen and (max-width:1023px){
	.whiteSpace{ padding-left:30px; white-space: normal; padding-bottom: 0px;}
	/* step */
	.stepContainer { max-width: 600px; width: 100%;}

	/* Switch Exising */
	.switchExistingInvestmentChoices .step1 .switchExisting .tableTopDes .left { width: 100%; margin-bottom: 5px;}
	.switchExistingInvestmentChoices .step1 .switchExisting .tableTopDes .right { width: 100%;}
	.switchExistingInvestmentChoices .step1 .switchExisting .tableTopDes .right .text { float: left; line-height: 24px;}

	.selectAllUnitsDiv { float: right; display: inline-block;}
	.selectAllUnitsDiv .checkboxDiv { float: right;}
	.selectAllUnitsDiv .checkboxLabel { float: left; width: auto; margin: 0 10px 0 0; line-height: 24px;}
	
	/* checked */
	.switchExisting .switchOutTable .switchOutTableItem.active td:first-child,
	.switchNew .switchInfoNewTable .switchInfoNewTableItem.active td:first-child { background: #FDF1F2;}

	/* Switch New start */
	/*.switchNew .tableTopDes .right { width: 400px;}*/
	/* Switch New end */

	/* float area */
	.floatArea { width: auto; }
	.scroll-pane { width: 630px;}
	
	/* receive Notification */
	.step1 .receiveNotification .left { margin: 0 20px 0 0; }
	.step1 .receiveNotification .right { width: 82%;}
	.active .arrow.orange::after { background-position: 50% -150px;}
	.selectInvestmentTable th.col1 { padding: 10px 5px 10px 50px;}
    .selectInvestmentTable td.col1 { padding: 10px 10px 10px 80px;}
    .selectInvestmentTable .col1 {width: 26%;}
    .selectInvestmentTable .col2 {width: 10%;}
    .selectInvestmentTable .col3 {width: 7%;}
    .selectInvestmentTable .col4 {width: 13%;}
    .selectInvestmentTable .col5 { width: 13%;}
    .selectInvestmentTable .col6 { width: 13%;}
    .selectInvestmentTable .col7 { width: 17%;}
    .innerTable td.col1 { padding: 10px 5px 10px 50px;}

    .searchRow .conditionName{width: 30%;}
    .searchRow .conditionList{width: 70%;}
    
    .iconLinkContainer .iconLink { margin-right: 2px;}
    
    /* investmentChoiceNameContainer */
    .customTableList .investmentChoiceNameContainer .content .nameContainer { max-width: 70%; }
    .customTableList .investmentChoiceNameContainer .content .iconLinkContainer { max-width: 29% }
    .customTableList .investmentChoiceNameContainer .content > div { display: inline-block; }
    .customTableList table .iconLinkContainer { float: right; width: auto; margin: 0; position: relative; }
    .step1 .iconLinkContainer { position: absolute; width: auto; top: 0; right: 0; margin: 0; margin-top: 0px; }

    /* hintsWrapper  */
    .customTableList table td .mobileTitle .hintsWrapper { float: none; width: auto; display: inline-block; }
    .customTableList table .btnHints { width: 18px; height: 18px; }
    .tableCol2 .tableRow .colLeft .btnHints { vertical-align: bottom; }

    /* switchOut content */
    .customTableList table .checkboxDiv { width: 20px; float: right;}
    .switchOutContainer .content div .inputDiv { width: 85%; }
    .switchOutContainer .content div .switchingUnit { display: table-cell; width: 10%; padding-left: 5%; }
    .switchOutContainer .content div .switchingPercent { display: table-cell; width: 10%; padding-left: 5%; }
    .switchOutContainer .content div .switchingAll.desktop { display: none; }

    /* hidden the destop version total */
    .tableContainer .customTableList table { border-bottom: 0px; }
    .customTableList table .totalBalanceRow { display: none; }

    /* mobile total */
    /* switch Out */
    .step1 .switchExisting .customTableList table .totalSwitchOutContainer { display: none;}
    .step1 .switchExisting .customTableList .totalSwitchOutContainer .tableRow { border-bottom: 0px; padding-bottom: 10px; }
    .step1 .switchExisting .customTableList .totalSwitchOutContainer > div:first-child { padding-top: 10px; padding-bottom: 0px; }
    .step1 .switchExisting .customTableList .totalSwitchOutContainer > div:last-child { padding-bottom: 10px; }
    .step1 .switchExisting .customTableList .totalSwitchOutContainer .colRight { padding: 0px 10px; }
	
    .switchExisting .customTableList .mobile, .switchNew .customTableList .mobile { display: block; }
    .switchExisting .tableCol2.switchOutTotal .tableRow, .switchNew .tableCol2.switchOutTotal .tableRow { border-bottom: 0; }
    .tableCol2 .colspanHead{ display: block; padding: 0px 10px 10px 10px; }
    .tableRow div:first-child span { /*padding: 10px;*/ } 
    .switchExisting .tableCol2 .colLeft, .switchNew .tableCol2 .colLeft { width: 50%; text-align: left; }
    .step1 .tableCol2 .colLeft { padding-top: 0; padding-bottom: 0; }
    .switchExisting .tableCol2 .colLeft:last-child, .switchExisting .tableCol2 .colRight:last-child { padding-bottom: 10px; }
    .switchExisting .tableCol2 .colRight, .switchNew .tableCol2 .colRight { width: 50%; text-align: right; padding-top:0px; }

    /* switch into */
    .customTableList table .hiddenTemplete { display: none; }
    .customTableList table td.whiteBackground { background: white !important; border-top: 1px solid #CCCCCC; }
    .switchOutContainer.allocationContainer .inputDiv { margin-right: 0px; }
    .customTableList table .total { display: none; }
    .switchExisting .tableCol2 .colRight:last-child { padding-bottom: 10px; }
    .tableRow div.totalSwitchIntoAllocation span { padding-right: 0px; }
    /*.totalReferentialValueInUnitAvailable { padding-top: 5px; }
    .totalReferentialValueSwitchOut { padding-top: 5px; }*/
	  
    /* mobile total */
    .step1 .switchNew .customTableList table .totalSwitchIntoContainer { display: none; }
    .step1 .switchNew .customTableList .totalSwitchIntoContainer .tableRow { border-bottom: 0px; padding-bottom: 10px; font-weight: normal; }
    .step1 .switchNew .customTableList .totalSwitchIntoContainer > div:first-child { padding-top: 10px; padding-bottom: 0px; }
    .step1 .switchNew .customTableList .totalSwitchIntoContainer > div:last-child { padding-bottom: 10px; }
    .step1 .switchNew .customTableList .totalSwitchIntoContainer .colRight { padding: 0px 10px; }
	
    /* switchInto content */
    .switchIntoAllocationContainer .content div .switchingUnit { display: table-cell; width: 10%; padding-left: 5%; }
	  
    /* first td border-top for tableList convert to customTableList */
    /* .customTableList table tr td:first-child { border-top: 1px solid #CCCCCC; } */
	
    /* referentialValueForSwitchOutContainer of switch out table */
    .referentialValueForSwitchOutContainer .valueInHkd .text { width: auto; }
    .referentialValueForSwitchOutContainer .valueInOriginalCurrency .text { width: auto; }
    .referentialValueForSwitchOutContainer .valueInOriginalCurrency .text { float: unset; display: inline; } 
    .referentialValueForSwitchOutContainer .valueInHkd .text { float: unset; display: inline; } 
	
    /* lastReferentialPriceSwitchIntoContainer of switch into table */
    .lastReferentialPriceSwitchIntoContainer .valueInHkd .text { width: auto; }
    .lastReferentialPriceSwitchIntoContainer .valueInOriginalCurrency .text { width: auto; }
    .lastReferentialPriceSwitchIntoContainer .valueInOriginalCurrency .text { float: unset; display: inline; }
    .lastReferentialPriceSwitchIntoContainer .valueInHkd .text { float: unset; display: inline; }
    
    /* switchExisting investment choices table new table header */
    .switchExisting .customTableList .bottomLayer { display: none; }
    .switchNew .customTableList .bottomLayer { display: none; }
    
    .step2 .investmentChoiceName { width: auto; }
    .step2 .investmentChoiceCode { width: auto; }
    .step2 .switchExisting .tableCol2 .colLeft, .step2 .switchNew .tableCol2 .colLeft { padding-top: 0px; padding-bottom: 0px; } 
    /*  .step2 .tableCol2 div:last-child { padding-top: 5px; }*/
	
    /* mobile total */
    /* switch Out */
    .step2 .switchExisting .customTableList table .totalSwitchOutContainer { display: none;}
    .step2 .switchExisting .customTableList .totalSwitchOutContainer .tableRow { border-bottom: 0px; padding-bottom: 10px; }
    .step2 .switchExisting .customTableList .totalSwitchOutContainer > div:first-child { padding-top: 10px; padding-bottom: 0px; }
    .step2 .switchExisting .customTableList .totalSwitchOutContainer > div:last-child { padding-bottom: 10px; }
    .step2 .switchExisting .customTableList .totalSwitchOutContainer .colRight { padding: 0px 10px; }
	
    /* mobile total */
    .step2 .switchNew .customTableList table .totalSwitchIntoContainer { display: none; }
    .step2 .switchNew .customTableList .totalSwitchIntoContainer .tableRow { border-bottom: 0px; padding-bottom: 10px; font-weight: normal; }
    .step2 .switchNew .customTableList .totalSwitchIntoContainer .tableRow .colspanHead { font-weight: bold; }
    .step2 .switchNew .customTableList .totalSwitchIntoContainer > div:first-child { padding-top: 10px; padding-bottom: 0px; }
    .step2 .switchNew .customTableList .totalSwitchIntoContainer > div:last-child { padding-bottom: 10px; }
    .step2 .switchNew .customTableList .totalSwitchIntoContainer .colRight { padding: 0px 10px; }
	
    /* investmentChoiceNameContainer without iconLink */
    .step2 .customTableList .investmentChoiceNameContainer .content .nameContainer { max-width: 100%; }
	
    /* switch Out */
    .step3 .switchExisting .customTableList table .totalSwitchOutContainer { display: none;}
    .step3 .switchExisting .customTableList .totalSwitchOutContainer .tableRow { border-bottom: 0px; padding-bottom: 10px; }
    .step3 .switchExisting .customTableList .totalSwitchOutContainer > div:first-child { padding-top: 10px; padding-bottom: 0px; }
    .step3 .switchExisting .customTableList .totalSwitchOutContainer > div:last-child { padding-bottom: 10px; }
    .step3 .switchExisting .customTableList .totalSwitchOutContainer .colRight { padding: 0px 10px; }
	
    /* mobile total */
    .step3 .switchNew .customTableList table .totalSwitchIntoContainer { display: none; }
    .step3 .switchNew .customTableList .totalSwitchIntoContainer .tableRow { border-bottom: 0px; padding-bottom: 10px; font-weight: normal; }
    .step3 .switchNew .customTableList .totalSwitchIntoContainer .tableRow .colspanHead { font-weight: bold; }
    .step3 .switchNew .customTableList .totalSwitchIntoContainer > div:first-child { padding-top: 10px; padding-bottom: 0px; }
    .step3 .switchNew .customTableList .totalSwitchIntoContainer > div:last-child { padding-bottom: 10px; }
    .step3 .switchNew .customTableList .totalSwitchIntoContainer .colRight { padding: 0px 10px; }
	
    .step3 .switchExisting .tableCol2 .colLeft { padding : 0px 0px 0px 10px; }
    .step3 .switchNew .tableCol2 .colLeft { padding : 0px 0px 0px 10px; }
}
@media only screen and (max-width:940px){
	/* Switch New start */
	.step1 .switchNew .tableTopDes .left { padding-top: 40px; width: 365px;}
	.step1 .switchNew .tableTopDes .right { width: 300px;}
	.step1 .switchNew .tableTopDes .right .btn { float:right; margin: 0;}
	.step1 .switchNew .tableTopDes .right .text { padding-top: 10px; width: 100%;  text-align: right;}
	/* Switch New end */
}
@media only screen and (max-width:806px){
	/* Switch New start */
	.step1 .switchNew .tableTopDes .left { width: 350px;}
	.step1 .switchNew .tableTopDes .right { width:250px;}
}

@media only screen and (max-width:767px){
	
	.mobilePhoneNo .mobileNumContainer .iconText{float: left;}
	.mobilePhoneNo .mobileNumContainer {display: flow-root;}

	h3 { padding-bottom: 10px; }
	.selectAccount h2 { margin-bottom: 10px;}
	
	.innerTable table tr.active td:first-child { background: #FDF1F2;}

	.headerDropdownContainer { margin: 20px 0 0 0; width: 100%;}
	
	.tableContent table td:first-child > div::before{ display:none; }
	.tableContent table td:first-child span.text{ text-align:left; float:left; }
	.tableContainer .tableList .tableContent table td:first-child.whiteBackground { background: #FFFFFF; }
	
	.tableList:not(.noConvertTable) table tr td:first-child {border-top: 1px solid #CCCCCC;}
	
	.tableList.noConvertTable table tr th:first-child {border-top: 1px solid #CCCCCC;}
	.tableList.noConvertTable table tr td:last-child {border-bottom: 0;}

	/* code */
	.tableCol2 .code { display: block;}
	
	/* step */
	.stepContainer { margin-bottom: 20px;}

	/* note */
	.note, .policyNo { margin-bottom: 30px;}


	/* mobile phone no */
	.mobilePhoneNo { padding: 15px; margin-bottom: 30px;}
	.mobilePhoneNo h2 { font-weight: bold;}
	.mobilePhoneNo h2, .mobilePhoneNo .iconText { margin-bottom: 15px;}
	.iconText.iconMobile { background-image: url(../images/mobile/switch-investment/icon_mobile.png); background-size: 28px;}

	/* Please select account */
	.selectAccount { margin-bottom: 30px;}
	.radioContainer span { display: block; width: 100%;}
	.radioContainer span:first-child { margin-right: 0; margin-bottom: 10px;}

	/* Switch Existing start */	
	.step1 .switchExisting .tableList table td:last-child { line-height: 24px;}
	.step1 .switchExisting .tableList table td:first-child { background: #FDF1F2;}
	.step1 .switchExisting td .colspanHead::before { width: 100%; font-weight: bold;}
	.step1 .switchExisting td.colspan .colspanHead::before { width: 100%; font-weight: bold;}

	.step1 .switchExisting td.colspan .inputDiv { float: right; width: 50%;}

	.step1 .switchExisting td:last-child .colspanText:first-child { width: 100% !important; padding: 0;}
	.step1 .switchExisting td:last-child .colspanText:last-child { width: 100% !important; padding: 10px 0 0 0; text-align: right;}

	.switchExisting .tableList table { border-top: 0; }

	.switchExisting .tableList table tr:last-child td:first-child { border-bottom: 0;}
	.switchExisting .tableList table tr:last-child td { border-bottom: 1px solid #CCCCCC;}
	.switchExisting .tableList table tr:last-child td:last-child { border-bottom: 0;}
	
	.switchExisting .tableCol2 .tableRow { margin: 0;}
	
	.switchExisting .tableList table tr.total { display: none;}

	.switchExisting .colspan .checkboxDiv { float: right;}

	/* Switch Existing end */

	/* Switch New start */
	.switchNew { /* margin-bottom: 25px; */ }
	.step1 .switchNew .tableTopDes .left { width: 100%; margin-bottom: 10px; padding-top: 0;}
	.step1 .switchNew .tableTopDes .right { width: 100%; float: left;}
	.step1 .switchNew .tableTopDes .right .btn { float: left;}
	.step1 .switchNew .tableTopDes .right .text { float: left; display: block; width: 100%; text-align: left;}

	.switchNew .tableList table { border-top: 0; }
	.btnIcon.btnSelectInvestmentChoices { background-image: url(../images/mobile/switch-investment/btn_select_choices.png); background-size: 14px;} 
	tr.noContent .responsive::before { display: none;}
	tr.noContent td span.text { text-align: left; float: none;}
	.tableContent table tr.noContent td:first-child {background: #FFF;}

	.switchNew .tableCol2 .tableRow { margin: 0;}
	.switchNew .tableCol2 .colLeft { width: 50%; text-align: left;}
	.switchNew .tableCol2 .colRight { width: 50%; text-align: right;}

	.switchNew .tableList table td:nth-child(n-2) .text { width: 100%;}

	.switchNew .tableList table tr.total { display: none;}

	.switchNew .valuationDateContainer .colspanRow { padding-top: 20px; padding-left: 10px; box-sizing: border-box; display: inline-block; }
	.switchNew .valuationDateContainer .colspanRow:before { display: none; }
	.switchNew .valuationDateContainer .valuationDateLabel { width: 50%; display: inline-block; float: left; }
	.switchNew .valuationDateContainer .valuationDateContent { width: 50%; display: inline-block; text-align: right; }
	/* Switch New end */

	/* ReceiveNotification start*/
	.receiveNotification .tableList table { border-top: 0; border-collapse: inherit; }
	/* ReceiveNotification end*/
	
	/* Page end button*/
	.pageEndBtn .btnContainer.btn2 .btn { width: auto;}
	.pageEndBtn .btnContainer.btn2 .btnNext { float: none;}

	/* icon link start */
	.iconLinkContainer .iconLink.iconLinkPerformance { background: url(../images/mobile/switch-investment/icon_performance.png) 0 50% no-repeat; width: 21px; height: 21px; background-size: 21px;}
	.iconLinkContainer .iconLink.iconLinkHistory { background: url(../images/mobile/switch-investment/icon_history.png) 0 50% no-repeat; width: 21px; height: 21px; background-size: 21px;}
	/* icon link end */


	/* Page end button */
	.pageEndBtn { margin-bottom: 20px;}

	/* float area */
	.floatArea .topFixed .left { display: none;}
	.floatArea .topFixed .right { float: none; width: 100%; font-size: 12px;}


	/* step 1 */
	.note.step1a {margin-bottom: 0px;}
	.step1b h2 {font-weight: bold;}
	.step1b .selectPolicy { width: 100%;}
	.confirmMNum {position: relative; top: 0; right: auto; left: 0; margin-bottom: 15px; width: auto;float: right;}
	.confirmLNum {position: relative; top: 0; right: auto; left: 0; margin-bottom: 15px; width: auto;float: right;}
	.step1 .receiveNotification .byEmail .left { width: 100%;}
	.step1 .receiveNotification .byEmail .right { padding-left: 36px; width: auto; }
	.step1 .receiveNotification .right .inputDiv { width: 100%;}
	.step1 .receiveNotification .bySMS .right { width: auto;}
	.step1 .receiveNotification .checkboxLabel { width: auto;}
	.step1 .checkboxRow { margin: 0 0 10px 0;}

	/* step 2 start */

	.pageEndBtn .btnContainer .left { width: 100%; margin: 0 0 10px 0;}
	.pageEndBtn .btnContainer .left.btn2 > div { width: 50%;}
	.pageEndBtn .btnContainer .left.btn2 > div > .btn { width: 100%;}
	.pageEndBtn .btnContainer .right { padding-left: 4px; box-sizing: border-box;}
	.pageEndBtn .btnContainer .right .btn { width: 100%;}
	
	/* step 2 end */

	/* step 3 */
	.tableCol2 .emailAddress { display: block;}

	/* float area */
	.floatArea .btnClose { top: 15px; right: 15px;}
	.scroll-pane { width: 100%; height: 100%; padding-right: 12px;} 
	h2 .btnHints { width: 20px; height: 20px;}
	h2 .btnHints::before { top: 10px; border-bottom-color: #EEEEEE; border-top-color: transparent;}
	h2 .hintsContainer { top: 30px;}
	.hintsContainer .remindIcon.remindCheckbox::before { top: 0; left: 0;}
	.hintsContainer .remindIcon.remindCurrent::before { top: 6px;}

	.floatArea { background: #FFFFFF; padding: 70px 0 63px 0;}
	.floatArea .topFixed { padding: 15px 10px; border-bottom: 1px solid #AAAAAA; position: absolute; top: 0; left: 0;}
	.floatArea .topDes { padding: 15px 10px; position: absolute; top: 51px; width: 100%; box-sizing: border-box;}
	.floatArea .topDes .left { display: none;}
	.floatArea .topDes .right { width: 100%;border-bottom: 1px solid #CCCCCC;} 
	.floatArea .topDes .right .text { float: left; /*width: auto;*/ }
	.floatArea .bottomFixed { position: fixed; bottom: 0; left: 0; border-top: 1px solid #CCC; background: #F6F6F6; padding: 15px 10px;}
	.floatArea .bottomRemarks { margin: 0 10px 0 0;}
	.floatArea .bottomRemarks .expandTitle { border-bottom: 1px solid #999999; padding: 0 0 10px 0; margin: 0 0 10px 0;}
	.floatArea .btnContainer.text .btnViewLatestInvestment { width: auto; margin: 0 10px 0 0;}

	.btnIcon.btnLastestPerformance { background-image: url(../images/mobile/switch-investment/btn_performance.png); width: auto;}

	.btnContainer .left .btn { width: 65px;}
	.btnContainer .right .btnConfirm { width: 120px;}
	.btnContainer .left .btn:first-child { margin-right: 5px;}

	.slideTable { padding: 0 20px 0 10px; width: 100%; height: 100%; box-sizing: border-box;}
	.slideTable .slideTitle { display: block; padding: 10px 40px 10px 10px; box-sizing: border-box; background: #CCCCCC; font-weight: bold;}
	.slideItem { width: 100%; border-bottom: 1px solid #CCCCCC;}
	.slideItem:last-child { border-bottom: 0;}
	.slideItem .text { white-space: normal; float: left; width: 70%;}
	.slideItem .remindInconContainer {float: right;width: 30%;text-align: right;color: #68737a;}
	.slideItem .remindInconContainer img{width:12px; float:right; padding-left:3px;}
	.slideItem .remindInconContainer .fa-exchange::before{content: "\f362";}
	.slideItem .remindInconContainer .fa-exclamation-triangle,
	.slideItem .remindInconContainer .fa-ban{color: red;}
	.slideItem .text span { display: block;}
	.slideItem .text span.fundName, .slideItem .text span.fundName span { display: inline;}
	.slideItem .date { float: left; color: #888888; width: 50%;}
	.slideItem .currency { float: right; color: #888888; width: 50%; text-align: right;}
	.slideItem .riskLevel { float: left; color: #888888; width: 50%;}
/* 	.slideItem.active { background: #FAC4AD;} */
	.slideItem.currentChoice .middle { /*background: #F6F6F6;*/ }
	.slideItem .middle {/* float: left;*/ padding: 8px 10px 8px 54px; box-sizing: border-box; width: 100%; position: relative; display: inline-block; vertical-align: top;}
	.slideItem .middle span { cursor: pointer;}
	.slideItem .middle .checkboxDiv { position: absolute; left: 10px; top: 10px;}
	.slideItem .right { padding: 0; /*display: inline-block;*/ display: block; float: left; position: relative; right: 0; top: 100%; border: solid #CCCCCC; border-width: 0 1px; width: 100%; height: 41px; display: none;}
	.slideItem .right a:first-child { border: solid #CCCCCC; border-width: 0 1px 0 0 ; margin-right: -1px;}
	.slideItem .right a { text-indent: -9999px; display: block; width: 33.3%; height: 100%; float: left; padding: 10px 0; box-sizing: border-box;}
	.slideItem .right .slidePerformance { background: url(../images/mobile/switch-investment/icon_slide-performance.png) 50% 50% no-repeat #1874A0; background-size: 19px;}
	.slideItem .right .slideFactsheet  { background: url(../images/mobile/switch-investment/icon_slide-factsheet.png) 50% 50% no-repeat #2BAB7F; background-size: 19px;}
	.slideItem .right .slideHistory { background: url(../images/mobile/switch-investment/icon_slide-history.png) 50% 50% no-repeat #FD9B3B; background-size: 21px;}

/* 	.slideItem.currentChoice .text::before { display: block; content: ''; float:left; width: 8px; height: 8px; background: #F2606F; border-radius: 50%; margin: 2px 0 0 -13px;} */

	.closedFund .slideItem:last-child {  border-bottom: 1px solid #CCCCCC; }

	.btnContainer.text { margin: 10px 0; padding: 0 10px 0 0;}

	.scrollWrapper { z-index: 1; overflow: hidden;}
	.scroller { z-index: 1; white-space: nowrap; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none;	-moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none;	text-size-adjust: none;}
	
	/* new add */
	input[type=checkbox].CkbSelectInvestment { position: absolute; top: 50%; margin: -22px; left: 10px; width: 50px; height: 50px;}
	span.errorPlacement.mobile > span.vld-error:first-child { float:right; }
	.inputFieldContainer .text { width: 100%; }
	
	/* Fund Expansion */
	.searchTableMobile {margin: 0 10px 20px 0}
	.searchTableMobile .searchRow{border-bottom: 1px solid #EEEEEE;}
	.selectedInvestTableMobile{margin: 0px 5px 0 0}
	.btnContainer .btnShowAllInvestment {margin: 5px 0 10px 0;float:left}
	.slideTable .searchResultNum {border-bottom: 1px solid #999999; padding-bottom:0px; font-size:18px;}
	.searchNotFound {border-bottom: 1px solid #CCCCCC;}
	.slideTable .tableContainer{margin: 0 10px 20px 0}
	.searchRow .selectText{padding: 10px 0;}
	.searchRow .keyword{width: 100%!important;text-align: left!important;padding: 10px 0;box-sizing: border-box; float: left;}
    .searchRow .conditionName{width: 100%!important;text-align: left!important;padding: 10px 0;box-sizing: border-box;}
	
	.subFloatArea { position: fixed; top: 0;  width: 100% !important; height: 100% !important;  box-sizing: border-box; padding: 51px 0 0 0;}
	.subHiddenLayer {position: fixed; top: 0 !important;; left: 0; width: 100%; height: 100%; z-index: 1021; display: none; overflow: hidden; min-height: 960px; background:#FFF;}
	.subFloatArea .topFixed { position: absolute; top: 0; left: 0;padding: 15px; box-sizing: border-box; width: 100%; border-bottom: 1px solid #F26D31; background: #F6F6F6;}
	.subFloatArea .topFixed h2 {color:#F26D31;}
	.subFloatArea .btnClose { background: url(../images/mobile/btn_close_orange.png) 0 0 no-repeat; height: 16px; width: 16px; background-size: 16px; top: 15px; right: 15px;text-indent: -9999px; display: block; position: absolute; z-index: 999;}
	.detailsContainer .detailsContent { height: 100%; width: 100%; overflow: hidden; box-sizing: border-box; background: #FFFFFF;}
	.btnContainer .btnDetails { text-align: right; padding: 0; color: #F26D31;  padding-right: 22px;  width: auto; float: right; position: relative; font-size: 12px; margin: 10px 5px;}
	.btnContainer .btn.arrow.orange::after { background-position: 50% 0; right: 0;}
	.subHiddenLayer .selectClues {border-bottom:1px solid #EEEEEE; padding:10px 5px;}
	h4 {padding : 0 0 10px 0; border-bottom:1px solid #EEEEEE}
	.step3 .pageDes h4 {border-bottom: 0px;}
	
	.iconLinkContainer .iconLink.iconLinkPerformance { background: url(../images/mobile/investment-portfolio/icon_performance.png) 0 50% no-repeat; width: 21px; height: 21px; background-size: 21px; margin-right: 5px; }
	.iconLinkContainer .iconLink.iconLinkHistory { background: url(../images/mobile/investment-portfolio/icon_history.png) 0 50% no-repeat; width: 21px; height: 21px; background-size: 21px; margin-right: 5px; }
	.iconLinkContainer .iconLink.iconLinkFactsheet { background: url(../images/mobile/investment-portfolio/icon_factsheet.png) 0 50% no-repeat; width: 21px; height: 21px; background-size: 21px; margin-right: 5px; }

	.iconLinkContainer .iconLink.iconLinkPerformance.hover,
	.iconLinkContainer .iconLink.iconLinkHistory.hover,
	.iconLinkContainer .iconLink.iconLinkFactsheet.hover { background-position: unset; }

	.customTableList table .btnHints { width: 16px; height: 16px; }

	.switchOutContainer .content div .switchingAll.desktop { display: none; }
	
	/* switchOut content */
	.switchOutContainer .content div .inputDiv { width: 80%; }
	.switchOutContainer .content div .switchingUnit {  width: 15%; }	
	.switchOutContainer .content div .switchingPercent { padding-left: 10%; }
	.tipInconContainer {margin:5px;}
	
	.dfundJustification #dfundR1 + label{line-height:15px}
	.dfundJustification .inputDiv {width: auto;}
	.step1 .dfundJustification .dfundOtherReason .right {padding-left: 36px;padding-right: 10px;}
	.dfundJustification input[type='radio'] + label {height:20px!important;}
}

/* Switch Existing Investment Choices end */