@charset "UTF-8";

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

	.mainContainer { width: 100%;}
	.lastLogin { max-width: 400px;}
	
	.pageDes { padding-bottom: 15px;}
	
	/* button or icon links start */
	.btnIcon { background-repeat: no-repeat; background-size: 16px;}
	
	.arrow.red::after { background-image: url(../images/mobile/arrow_small.png); background-size: 33px; }
	.arrow.orange::after { background-image: url(../images/mobile/arrow_orange.png); background-size: 23px;   background-position: 50% -100px;}
	/* button or icon links end */
	
	/* custom select start */
	.customSelect { background-image: url(../images/mobile/arrow_small.png); background-size: 33px; background-position: 100% -85px;}
	.customSelect.active {background-position: 100% -137px;}
	/* custom select end */
	
	/* hints start */
	.hintsContainer .btnHintsClose {  background: url(../images/mobile/btn_close_hints.png) 0 0 no-repeat; background-size: 12px;}
	/* hints end */
	
	/* Main Nav start */
	.navContainer .topNav.mobile span.clientSearch a { background: url(../images/mobile/nav/search.png) no-repeat; font-size: 0px; }
	.navContainer .topNav.mobile span.contact a { background: url(../images/mobile/nav/top_nav.png) no-repeat; font-size: 0px; }
	
	/* Main Nav end */
	
	/* Account Nav */
	.accountNav .dropDownList .dropDownListHeader .iconPerson { background: url(../images/mobile/icon_person.png) 0 0 no-repeat; background-size: 28px;}
	
	/* Dropdown */
	.dropDownList .arrow { background: url(../images/mobile/arrow_small.png) 50% -95px no-repeat; background-size: 33px;}
	.dropDownList.active .arrow { background-position: 50% -145px;}
	
	/* Expand Area */
	.expandContainer .expandTitle.arrow.red::after { background-image: url(../images/mobile/arrow_large.png); background-size: 15px; }
	.expandContainer.active .expandTitle.arrow.red::after { background-position: 0 -50px;}
	
	.hintsContainer .btnHintsClose { background-size: 12px;}

	/* float area */
	.floatArea .btnClose { background-image: url(../images/mobile/btn_close.png); background-size: 16px;}

	.backToTopWrapper { width: 100%;}
	.backToTopWrapper a { right: 10px;}
}
@media only screen and (max-width: 830px){
	.lastLogin { max-width: 250px;}
}
@media only screen and (max-width:767px){
	
	.header {position: fixed; left: 0; top: 0; width: 100%; background-color: #FFF; z-index:996;}
	.backToTopWrapper {width: 100%; bottom: 110px;}
	.backToTopWrapper a { background-image: url(../images/mobile/btn_top.png); background-size: 35px; width: 35px; height: 35px; right: 20px;}
	.navContainer .nav a.navPolicyContracteCopy {
		background-position: 12px -205px;
	}
	
	/* check window size */
	body::after{content:'mobile'; display:none;}
	
	/* error msg */
	.msgError::before { background-image: url(../images/mobile/icon_error.png); background-size: 18px;}

	/* overlay and fix scroll */
	html {overflow:visible; position:absolute; width:100%; height:100%; }
	body {position:absolute; height: 100%; width: 100%; overflow: auto;}
	
	html.hiddenScroll body {overflow: hidden;}
	html.hiddenScroll .overlay { background: #FFF; opacity: .5; -moz-opacity: .5; filter: alpha(opacity=50);}
	body .overlay.transparentOverlay { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=100); }
	body.overlayOpen { overflow: hidden;position:absolute; width:100%; height:100%; background: #FFF; opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100);}	
	
	.mobile { display: block;}
	.desktop { display: none;}
	
	/* Common Structure start */
	p { padding-bottom: 10px; }
	a, a:hover { text-decoration: none;}
	
	.mainContainer { width: 100%;}
	.blockMsg { margin: 5% auto !important; left: 0 !important; right: 0 !important; }
	
	.tableContainer, .chartContainer, .tableCol2 { margin-bottom: 25px;}

	.code { display: block;}
	
	/* overlay */
	body .overlay { top: 0 !important;}
	body.navOpen .mainContainer { left: 230px;}
	body.navOpen .overlay { display: block; top: 0;}
	body.dropdown .overlay { display: block; top: 0;}
	 
	/* button or icon links start */
	.btn { border-radius: 5px; font-size: 12px; line-height: 12px; text-align: center;}
	.btnIcon { padding-left: 36px; }
	.btn.gray.hover, .btn.gray:active { background-color: #999999;}
	.btn.btnContainer .btnIcon {padding-left: 30px;}
	.btnContainer.btn2 > div { width: 50%;}
	.btnContainer.btn2 > div:first-child { padding-right: 4px;}
	.btnContainer.btn2 > div:last-child { padding-left: 4px;}
	.btnContainer.btn2 > div .btn { width: 100%; }
	/* button or icon links end */
	
	/* input */
	.inputDiv {  border-radius: 6px; display: block;}

	/* Common Structure end */
	
	/* Main nav start */
	.topNavContainer { display: none;}
	
	.navContainer { position: absolute; right: 100%; left: auto; top: 0; width: 230px; z-index: 999;}
	.navContainer .topNav.mobile {display: table; width: 100%;}
	.navContainer .topNav.mobile span.clientSearch a { width: 15px; height: 15px; background-size: 100%; margin-top: 2px;}
	.navContainer .topNav.mobile span.contact a { width: 15px; height: 15px; background-size: 100%; margin-top: 2px;}
	.navContainer .topNav.mobile span.lang a, .navContainer .topNav.mobile span.logout a {margin-top:2px;}
	.navContainer .topNav.mobile:hover { background: none;}
	.navContainer .topNav.mobile:hover::after { border: 0;}
	.navContainer .topNav.mobile span { float: left; display: table-cell; vertical-align: middle; padding: 20px 15px;}
	.navContainer .topNav.mobile span.hover{background:rgb(51, 51, 51);}

	.navContainer .topNav.mobile .lang { font-size: 15px;}
	.navContainer .topNav.mobile .logout { float: right;}
	.navContainer .nav li { height: 57px;}
	.navContainer .nav li a { background: url(../images/mobile/nav/nav.png) no-repeat; background-size: 50px;}
	.navContainer .nav li .navText span { font-size: 14px; padding-left: 70px;}
	.navContainer .nav li.hover { width: 100%;}
	.navContainer .nav a.navPolicies { background-position: 12px -52px;}
	.navContainer .nav a.navInvestment { background-position: 12px -104px;}
	.navContainer .nav a.navTargetPrice { background-position: 12px -156px;}
	.navContainer .nav a.navContract { background-position: 12px -208px;}
	.navContainer .nav a.navEclaims { background-position: 12px -624px;}
	.navContainer .nav a.navEstatement { background-position: 12px -260px;}
	.navContainer .nav a.navSelectedHospitals { background-position: 12px -312px;}
	.navContainer .nav a.navPaymentInstructions { background-position: 12px -364px;}
	.navContainer .nav a.navChangeRequestsProcessing { background-position: 12px -416px;}
	.navContainer .nav a.navToolsUsefulLinks { background-position: 12px -468px;}
	.navContainer .nav a.navContactFinancialConsultant { background-position: 12px -520px;}
	.navContainer .nav a.navMyPrudentialClub { background-position: 12px -572px;}

	.navContainer .nav li:active { background: #333333; width: 230px; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;}
	.accountNav .dropDownList .dropDownContent .text.mobile {display:block;}
		
	.header { border-color: #AAAAAA;}
	.header a.mobileNav { width: 20px; height: 15px; background: url(../images/mobile/icon_menu.png) 50% 50% no-repeat; background-size: 100%; display: block; float: left; text-indent: -9999px; margin: 8px; margin-left:11px; z-index: 997; cursor: pointer;  position: relative;}
	.header .logo { width: 126px; height: 30px; display: block; position: absolute; left: 50%; margin-left: -53px; z-index: 998;}
	.header .logo img { width: 100%;}
	.lastLogin { max-width: 100%; padding: 15px 10px; border-bottom: 1px solid #AAAAAA;} 
	
	.accountNav { width: 100%; /* right: 10px; */ padding: 10px; padding-top:0;max-width: 100%; top: 20px; box-sizing: border-box;}
	.accountNav .dropDownList { top: 50px;}
	.accountNav .dropDownList .dropDownListHeader { border: 0; width: 30px; float: right; padding: 0 10px 10px 20px; height: 47px; border: 1px solid #FFFFFF; margin-top: -48px;}
	.accountNav .dropDownList.active .dropDownListHeader { background: #F6F6F6;  border: 1px solid #BCBCBA; border-bottom: 1px solid #F6F6F6 !important; z-index: 999;}
	.accountNav .dropDownList .dropDownListHeader .iconPerson { float: right; position: relative; left: 0; top: 4px; }
	.accountNav .dropDownList .dropDownListHeader .text { display: none;}
	.accountNav .dropDownList .arrow { display: none;}
	.accountNav .dropDownList .dropDownContent { border: 1px solid #BCBCBA; border-top-left-radius: 6px; top:-2px;}
	.accountNav .dropDownList.active .dropDownContent .text { background: #F6F6F6; border-top-left-radius: 6px;}
	.accountNav .numRed { font-size: 12px;}
	
	.selectFunction .dropDownList { font-size: 12px;}
	.header {padding:10px 0;}
	/* .logo {background-position:0 5px;} */
	.navContainer .nav {margin-top:0;}
	/* Main nav end */
	
	/* Main Content start */
	.innerHeader { padding: 0 0 20px 0;}
	.innerHeaderNew { padding: 0 0 20px 0;}
	h1 { display: block; float: none; font-size: 20px; line-height: 20px;}
	h2 { font-size: 15px; }
	.lastLogin.mobile { display: none;}

	.selectFunction { float: none; width: 100%; margin-top: 10px;}
	
	.contentContainer { margin: 0; padding: 0; position: relative; min-height: auto;}
	
	.mainContent { padding: 72px 10px 0 10px; }
	
	
	/* Footer start */
	.footerContainer { padding: 20px 10px 15px 10px; width: 100%; box-sizing: border-box; position: absolute; bottom: 0;}
	/* Footer end */
	
	/* Dropdown List start */
	.dropDownList {font-size: 12px;}
	.dropDownList.active { z-index: 999;}
	.dropDownList .dropDownContent ul { padding-bottom: 0px;}
	.dropDownList .dropDownContent ul li a { padding:15px 20px 15px 20px; height:auto;}
	.paymentAmountLayout .paymentAmountInputContainer .dropDownList .dropDownContent ul li a { padding:15px 40px 15px 20px; height:auto;}
	/* Dropdown List end */
	
	/* convert table start */
	table tr:nth-child(1){display:none;}
	table td div{display:table; width:100%;}
	table td > div::before,
	.convertMultiLayerHeaderTable table td > .colspanHead > div::before {content:attr(data-label); min-width: 70px; color: #333333; left: 10px; top: 10px; text-align: left; width: 50%; display:table-cell; vertical-align: top;}
	table td div::after { content: ''; clear: both; display: block;}
	table td span.text { text-align: right; display:table-cell; vertical-align: middle;float: right;}
	.tableList { width: 100%;}
	
	.tableList table th { border-bottom: 0;}

	.tableList table tr td:last-child { border-bottom: 0;}
	.tableContainer.active .tableList table tr:nth-child(2) td { border-top: 0;}

	.tableList table tr:hover td { background: none;}
	.tableList table td { width: 100%; display: block;/* border-bottom: 1px solid #ddd;*/ padding: 10px; position: relative; box-sizing: border-box;}
	.tableList table td span.text a { text-decoration: underline;}
	.tableContent table td:first-child { background: #FDF1F2;  border-bottom: 0;  }
	.tableContent table td:first-child.whiteBackground { background: #FFFFFF;  border-bottom: 0;  }
	.tableList table tr:hover td:first-child { background: #FDF1F2;}
	.tableList table tr:hover td:first-child.whiteBackground { background: #FFFFFF;  border-bottom: 0;  }
	.tableList table tr:not(:nth-child(2)) td:first-child {border-top: 1px solid #CCCCCC;}
	.tableList table tr:last-child td:last-child { border-bottom: 0;}
	/* colspan */
	.tableList td.colspan .colspanText::before{content:attr(data-label); min-width: 70px; color: #333333; left: 10px; top: 10px; text-align: left; width: 50%; display: inline-block;  float: left;}
	.tableList td.colspan span.colspanText { text-align: right; display:block; vertical-align: middle; width: 100%; padding-bottom: 10px;}
	.tableList td.colspan span.colspanText:last-child { padding-bottom: 0;}
	.tableList td.colspan div.colspan { display: table;}
	.tableList td.colspan div.colspan::before { display: none;}
	.tableList td.colspan span.colspanHead { display: block;}
	.tableList td.colspan div.colspan::before { display: block; content: attr(data-label); width: 100%; padding-bottom: 10px;}
	.tableList td.colspan span.text { display: block;}
	/* convert table end */
	
	/* 2 colums fake table start */
	.tableCol2 { width: 100%;}
	.tableCol2 .tableRow { border-bottom: 1px solid #EEEEEE; margin: 0 10px; }
	.tableCol2 .colLeft { width: 50%; text-align: left; }
	.tableCol2 .colRight { width: 50%; text-align: right; }
	.expandContent .tableCol2 .colLeft { padding-left: 0;}
	.expandContent .tableCol2 .colRight { padding-right: 0;}
	/* 2 colums fake table end */
	
	/* 3 colums fake table start */
	.tableCol3 { width: 100%;}
	.tableCol3 .tableRow { border-bottom: 1px solid #EEEEEE; margin: 0 10px; }
	.tableCol3 .colLeft { width: 33%; text-align: left; }
	.tableCol3 .colRight { width: 33%; text-align: left; }
	.expandContent .tableCol3 .colLeft { padding-left: 0;}
	.expandContent .tableCol3 .colRight { padding-right: 0;}
	/* 3 colums fake table end */
		
	/* No Convert Table start */
	.tableList.noConvertTable table td:first-child { background: #FFFFFF;}
	.tableList.noConvertTable table tr:nth-child(1) { display: table-row;}
	.tableList.noConvertTable table tr td:last-child { border-bottom: 1px solid #CCCCCC;}
	.tableList.noConvertTable table td { display: table-cell; }
	.tableList.noConvertTable table td { width: auto;}
	.tableList.noConvertTable table tr:hover td:first-child { background: #FFFFFF;}	
	.tableList.noConvertTable table .responsive::before { display: none;}
	.tableList.noConvertTable table .responsive span.text { float: left; text-align: left;}
	/* No Convert Table end */
	
	/* multi layer header table start */
	.convertMultiLayerHeaderTable table tr.responsiveHeader { display: none; }
	.convertMultiLayerHeaderTable table tr td > div.colspanHead::before { width: 100%; display: block; font-weight: bold; }
	.convertMultiLayerHeaderTable table tr td > div.colspanHead > div { margin-top: 20px; }
	.convertMultiLayerHeaderTable table tr td[class^="groupedContent"],
	.convertMultiLayerHeaderTable table tr td[class*=" groupedContent"] { border-bottom: 0px; }
	.convertMultiLayerHeaderTable table tr td[class^="groupedContent"].lastItem + td,
	.convertMultiLayerHeaderTable table tr td[class*=" groupedContent"].lastItem + td { border-top: 1px solid #CCCCCC; }
	/* multi layer header table end */
		
	/* table style start */
	.tableContainer h2 { line-height: 36px; padding-bottom: 6px; min-height:34px;}
	.tableContainer h2.redBorder::before {height: 36px; width: 6px;}	
	
	/* table style end */
	
	/* float area */
	.floatArea { position: fixed; top: 0;  width: 100% !important; height: 100% !important;  box-sizing: border-box; }
	.hiddenLayer { position: fixed; top: 0 !important; left: 0;}
	.hiddenLayer.fullHeight, .hiddenLayer.fullHeight > div  { overflow:hidden; }
	
	/* Scroll bar */
	.jspDrag { width: 5px !important;}
	.jspPane { width: 100% !important; box-sizing: border-box; padding: 0 !important;}
	.jspVerticalBar, .jspTrack { width: 5px !important;}
	.jspVerticalBar { right: 0 !important;}

	.dropDownContent.scroll-pane .jspVerticalBar { right: 5px !important;}
	.dropDownList .dropDownContent.scroll-pane { height:  180px;}
	
	/* Hints start */
	.btnHints { width: 16px; height: 16px;}
	.tableList .tableContent th.hints .hintsWrapper { display: none;}
	.tableList .tableContent td.hints .hintsWrapper { display: block;}
	.hintsContainer .hintsArea { padding: 10px;}
	.hintsContainer .btnHintsClose { width: 12px; height: 12px;}
	/* Hints end */


	/* Custom checkbox start */
	.checkboxRow { margin-bottom: 5px;}
	.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%; cursor: pointer;}
	.checkboxDiv.checked { background-image: url(../images/mobile/icon_checkbox_tick.png); background-size: 12px;}
	.checkboxLabel { /*width: 90%;*/ width: auto;}

	.agreement .checkboxLabel { padding-left: 30px; margin-left: 0; /*width: 100%;*/ width: auto;}
	/* Custom checkbox end */

	/* custom radio start */
	input[type='radio'] + label {background-image:url(../images/mobile/icon_radio.png); background-size: 20px;}
	input[type='radio']:checked + label {background-position:0 -50px;}
	input[type='radio']:disabled + label {background-position:0 -100px;}

	.radioDiv { background-image: url(../images/mobile/icon_radio.png); background-size: 20px;}
	.radioDiv.checked { background-position: 0 -50px;}
	

	/* select policy */
	.selectPolicy { margin-bottom: 10px;}
	.selectPolicy, .selectViewMode { width: 100%; float: left !important;}
	/*.selectViewMode { float: none; width: 100%; margin-top: 10px;}*/
	.selectPolicy .subTitle { margin: 0 20px 0 10px;}
	.selectPolicy .listRow { padding: 0 20px 0 10px; margin-right: 20px;}
	.selectPolicy .number { width: 100%; padding-bottom: 5px;}
	.selectPolicy .name { width: 100%; text-align: left; padding-top: 0;}
	.selectPolicy .dropDownListHeader .name { text-align: right; }
	.selectPolicy, .selectViewMode { width: 100%;}

	/*testing*/
	body.noHeight {overflow: hidden !important;}
	body.navOpen .navContainer {position: fixed; top: 0; height: 100%; left: 0; height: 100%; overflow: auto; overflow-x: hidden;}
	.navContainer .nav {padding-bottom: 50px;}
	
	
	/* overlay content */
	.overlaycontent{ width:90%; padding:5%; margin-top:5%; max-height: 90%; overflow-y: auto;  }
	.overlaycontent table tr{ display:table-row; }
	.overlaycontent .left, .overlaycontent .right { float: none; text-align: center; }
	.overlaycontent .left { margin-bottom: 15px; }
	
	/* hints */
	.tableList .tableContent td.hintsWithIcon div:before { content:''; width: 0px; display: none; }
	.tableList .tableContent td.hintsWithIcon .mobileHints { display: block; min-width: 70px; color: #333333; left: 10px; top: 10px; text-align: left; width: 50%; display: table-cell; vertical-align: top; }
	.tableList .tableContent td.hintsWithIcon .mobileHints .hintsWrapper { display: inline-block; position: relative; }
	

	/* new add*/
	.footerContainer { padding: 0 10px; position: relative; display: inline-block;  margin: 0; border: 0; }
	.mainWrapper { min-height: 695px;height: 100%;}
	.mainWrapper::after { display: none;}
	.contentContainer { min-height: 100%;margin-bottom: -86px;}
	.contentContainer:after { display: block; content: ''; height: 86px;}
	.mainContainer { margin-bottom: -8px;}

	.footerContainer::before { display: block; content: ''; border-bottom: 8px solid #EC1A2D; position: absolute; bottom: 0; left: 0; width: 100%;}
	.footer { margin: 0 0 15px 0;  border-top: 1px solid #CCCCCC; padding-top: 20px;}
		
	/* message box overlay */
	.messageboxoverlay .btnContainer .left { float: left; width: 50%;}
	.messageboxoverlay .btnContainer .right { float: right; width: 50%;}
	.messageboxoverlay .btnContainer .left .btn { width: 120px; float: left;}
	.messageboxoverlay .btnContainer .right .btn { width: 120px; float: right;}
	
	/* pages */
	.pagesContainer { padding: 10px 0; text-align: center; }
	.pages { float: none; padding: 0; display: inline-block; }
	.pages .pagesIcon { width: 10px; height: 14px; background-size: 10px; margin-right: 20px; background-image: url(../images/mobile/icon_pages.png); }
	.pages .pagesIcon.pagesFirst { background-position: 0 0; }
	.pages .pagesIcon.pagesLast { background-position: 0 -33px; }
	.pages .pagesIcon.pagesPrevious { background-position: 0 -66px; }
	.pages .pagesIcon.pagesNext { background-position: 0 -100px; }
	.pages .pagesNum { font-size: 12px; width: 15px;}
	
	/* Main Content end */

	/* Acknowledge policy contract */
	.btnContractAck.arrow.orange::after { background-image: url(../images/mobile/arrow_orange.png); background-size: 23px; background-position: 50% 0; }
	.contractAckBtnContainer a.btnContractAck.btn.arrow.orange { text-decoration: none; }
	.contractAckRow .contractAckContainer { display: none; }
	.tableContent table tr.contractAckRow td:first-child { background: none; }
	.tableContent table tr.hasContractAck td { border-bottom: 1px solid #CCCCCC; }
	.tableContent table tr.hasContractAck td:last-child { border-bottom: 0; }
	.tableList table tr.contractAckRow:not(:nth-child(2)) td:first-child { border: 0; padding: 15px 0; }
	.tableList table tr.contractAckRow:not(:nth-child(2)) td:first-child:hover { background: #FAFAFA; }
}