@charset "utf-8";

/* My Policies start */

.selectFunction { float: right; }
.chartContainer .tabChart { display: none; }
.chartContainer .chartWrapper { position: relative; }
.chartContainer .btnHideAll  {display:none;}

.myPolicies .tableList .btnContainer { position: absolute; right: 10px; top: 10px; }
.myPolicies .tableList table th.col1 { width: 23%; }
.myPolicies .tableList table th.col2 { width: 10%; }
.myPolicies .tableList table th.col3 { width: 10%; }
.myPolicies .tableList table th.col4 { width: 14%; }
.myPolicies .tableList table th.col5 { width: 15%; }
.myPolicies .tableList table th.col6 { width: 15%; }
.myPolicies .tableList table th.col7 { width: 13%; }

.myPolicies .tableContainer .ad img { margin: 0 auto;  }
.myPolicies .tableContainer .ad .fragmentContent { padding: 40px 0 0 0; }
.myPolicies .myPrudentialClub .tableList table th.col1 { width: 25%; }
.myPolicies .myPrudentialClub .tableList table th.col2 { width: 75%; }

.tableList .tableContent .number { display:  block;}
/* .myPolicies .myPrudentialClub .btnContainer.btn2 { width: 370px;} */

/* Buttons */
.btnIcon.btnTransactionRecord { background-image: url(../images/my-policies/btn_transition.png);}
.btnIcon.btnRedeem { background-image: url(../images/my-policies/btn_redeem.png);}

/* Table hover */
.tableList table tr:hover td { background: #FAFAFA;}
/* .tableList table tr:hover td:first-child { background: #FDF1F2;} */

/* last login */
.myPolicies .lastLogin { display: table-cell;}
.myPolicies .lastLogin.mobile { display: none;}

/* pie chart */
.chartContent .chartT { z-index:12; position:relative; }
.chart1 .legendItem .legendText{ cursor:pointer; }
.chart1 .legendItem{ position:static; z-index:auto; }
.tableContainer h2{ padding-right:10px; }
.chartContent a.chartT{ color:#333333; } 

.tableContainer a.redBorder{ font-weight: bold; padding-right: 10px;    padding-bottom: 10px;
    font-size: 20px;
    color: #333333;
    border-bottom: 1px solid #999999;
    line-height: 28px; display:block; }
.tableContainer a.redBorder:before{display: block;
    width: 4px;
    background: #F2606F;
    content: '';
    height: 28px;
    float: left;
    margin-right: 10px;}

@media only screen and (max-width:1023px) {
	.desktop .chartWrapper { display: block;}
	.desktop .chartWrapper { display: none;}
	.desktop .chartWrapper.active { display: block;}

	.chartWrapper { padding-bottom: 40px; overflow: hidden;}
	.chartWrapper .chartTitle { display: none;}

	.chartWrapper.active { background: #F5F5F5; display: block; border: 0;}
	.chartWrapper { display: none;}
	
	.chartContainer { border: 1px solid #EEE;  border-radius: 6px; overflow: hidden;}
	.chartContainer .tabChart { display: table;  background: #CCCCCC; width: 100%;}

	.chartContainer .tabChart .chartTitle.active { background: #F5F5F5; }
	.chartContainer .tabChart .chart1 { width: 35%; border: 0; border-radius: 0;}
	.chartContainer .tabChart .chart2 { width: 65%; border: 0; border-radius: 0;}

	.chart2 .chartV { min-width: 80px;}

	.chartContainer .tabChart.chart2Active { background: #F5F5F5;}
	
	.chartContainer .chart1, .chartContainer .chart2 { width: 100%;}

	.chart1 .legendText, .chart2 .legendText { width: 100%;}
	/*.chart1 .chartT { width: 60% !important;}*/
	/*.chart2 .chartT { width: 60% !important;}*/
	
	/* Buttons */
	.btnIcon.btnTransactionRecord { background-image: url(../images/mobile/my-policies/btn_transition.png);}
	.btnIcon.btnRedeem { background-image: url(../images/mobile/my-policies/btn_redeem.png); }
	
}
@media only screen and (max-width: 860px) {
	.myPolicies .tableContainer .ad img { width: 100%;}
}
@media only screen and (max-width:767px) {
	.mainContent {padding-top: 30px;}
	.tableContainer, .chartContainer { margin-bottom: 30px;}
	
	.mobile .chartWrapper { display: block;}
	.mobile .chartWrapper { display: none;}
	.mobile .chartWrapper.active { display: block;}
	
	/*.chartContainer .chart1.mobile.active, .chartContainer .chart2.mobile.active { display: block;}*/
	.chartContainer .tabChart .chartTitle { padding: 10px;}
	.chartContainer .chartWrapper a.arrow.red { right: 10px;}
	.chartContent .chartPie { width: 200px; height: 200px;}

	.chart2 .chartV { min-width: 60px;}

	.myPolicies .tableContainer.active .tableList .tableContent table { border-bottom: 1px solid #CCCCCC;}
	.myPolicies .tableContainer.active .tableList .tableContent { border-bottom:  5px solid #FDF1F2;}
	.myPolicies .tableContainer.active .tableList .tableContent::after { display: block; content: ''; border-bottom: 0;}
	.myPolicies .myPrudentialClub.tableContainer.active .tableList .tableContent table { border-bottom: 0;}
	.myPolicies .myPrudentialClub.tableContainer.active .tableList .tableContent { border-bottom:  5px solid #FDF1F2;}
	
	/* last login */
	.myPolicies .lastLogin { display: none}
	.myPolicies .lastLogin.mobile { display: block; padding-top: 65px;}
	
	.myPolicies .myPrudentialClub .btnContainer.btn2 { position: static; width: 100%; left: 0; padding-bottom: 10px; border-bottom: 1px solid #CCCCCC;}

	.myPolicies .btnContainer.btn2 .btnIcon {padding-left: 28px;}

	.btnContainer.btn2 > div a { padding-right: 10px;}
	.myPolicies .myPrudentialClub .btnContainer.btn2 > div a.btnTransactionRecord {padding-left: 26px;}
	.myPolicies .myPrudentialClub .btnContainer.btn2 > div a.btnRedeem { padding-left:32px;}

	.myPolicies .tableContainer .ad { padding: 20px 0 0 0;}
	.myPolicies .tableContainer .ad img {width: 100%;}

	.tableContainer td:first-child .responsive::before { display: none;}
	.tableContainer td:first-child .text { float: none; text-align: left;}

	.myPrudentialClub.tableContainer td:first-child .responsive::before { display: table-cell;}
	.myPrudentialClub.tableContainer td:first-child .text { float: right; text-align: left;}
	
	/* pie chart */
	.tableContainer a.redBorder{     line-height: 36px;
    padding-bottom: 6px;
    min-height: 34px; font-size: 15px;}
	.tableContainer a.redBorder::before {
    height: 36px;
    width: 6px;
    }
}


		
/* My Policies end */