@media only screen and ( max-width: 480px ){

.fieldblock span.rgt2{ width:16% !important;}

}

@media only screen and ( max-width: 320px ) {

    .fieldblock span.rgt2 { width: 17.5% !important; }
    .fieldblock span.rgt1 { width: 20% !important;}
    .fieldblock span.lftTxt {
        padding: 5px !important;
        text-align: left !important;
        width: 100% !important;
        float: none;
    }

    .fieldblock span.rgt {
        width: 85% !important;
    }
    .qus_sec h4 {
        font-size: 11px !important;
    }
    .form.password .row .label {
        display: block !important;
        text-align: left !important;
        width: 100% !important;
    }

    .form.password select {
        height: 25px;
        line-height: 25px;
        padding: 4px 1px 4px 4px;
        width: 100%;
    }

    .form .row .fields {
        display: inline-block;
        width: 96%;
    }
    .content ul.inner-nav li a {}
}

@media only screen and ( max-width: 768px ){
	/* iPade Portrait View Styles */
	nav { padding: 0 10px; }	
	/*#nav { text-transform: capitalize; }*/
	#nav > ul > li > a {font-size: 12px; }
	#nav li ul a { font-size: 11px; }
	
	aside.quick-view { clear:both; float: inherit; margin: 0 auto; }
	.wrapper { width: auto; }
	#pnlMainContent { padding:0 0 0 40px; width:95% !important; }
	#pnlFooterNav { margin-left:20px }
	#ql-container .quick-links { margin-left: 12px }
	.links .controls { position: relative; width: 745px; }

    .fieldblock span.rgt2{width: 17.5%;}
    .rgt2 select{ width:100%;}
}

.mobileviewdisplay {display: none !important;}

@media only screen and ( max-width: 568px ) and (orientation: portrait), screen and (max-width:767px) and (orientation:landscape) /* 640 */ {
	html { background: #fff; }
	/* Begin - Custom dropdown nav styles  */
	
    .mobileviewdisplay {display: inline !important;}
    .desktopviewdisplay {display: none !important;}

	#nav{  border-bottom: 1px solid #adb0b3; }
	#nav .classic-view { display: none !important; }
	#nav .mobile-view { visibility: visible; height: auto !important; z-index: 1000; }
	
	header.login .col4 { float: none !important; }
	header.login .logo { height: auto !important; }
	
	header h2.plan-name { display: inline-block !important; font-size: 18px; left: 55px; position: absolute; top: 25px; text-align: left !important; }
	header .login-plan-dd .plan span { display: none; }
	header .login-plan-dd .plan select { left: 55px; position: absolute; top: 12px; z-index: 10000; }
	#nav { position: relative; top: auto; left: auto; padding: 0 0 25px 0; }
	#nav > a { width: 2.94em; /* 50 */ height: 2.94em; /* 50 */ text-align: left; text-indent: -9999px; background-color: #929699; position: relative; }
	#nav > a:before  { border-bottom: 12px double #fff; border-top: 4px solid #fff; content:""; height: 4px; position: absolute; left: .3em; top:  .6em; width: 2.205em; }
	#nav > a:after { top: 60%; }
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type { display: block; }
	
	/* first level */
	#nav > ul { height: auto; display: none; position: absolute; left: 0; right: 0; z-index: 9999; }
	#nav > ul > li { width: 100%; float: none; }
	#nav > ul > li > a { height: auto; text-align: left; padding: 0 0.833em; /* 20 (24) */}
	#nav > ul > li:not( :last-child ) > a { border-right: none; border-bottom: 1px solid #fff; }
	
	/* second level */
	#nav li ul { position: static; padding: 1.25em; /* 20 */ padding-top: 0; display: none !important; }		
	#nav span:after { display: none !important; }	
	
	/* End - Custom dropdown nav styles */
	
	#pnlMainContent { padding: 0; } 
    /* #hCaption{ display:none;} /*NUI-199*/
    #divTopContentMaster{display:none;}/*NUI-199*/
	.wrapper, header{ width: 100%; }
	#cphBodyMain_pnlPortfolioSummary, .login-wrapper, .quick-links, .print-wrapper, aside, .TPALogo, .transfer-menu option.schedule, .mobile-hide { display: none; }
	
	/* Home/Landing Page View Styles */
	.content .main-content #home-container { display: none; }
	.content .main-content #mobile-dashboard { display: block; }
	
	/* Home/Landing Content Display Styles */
	#mobile-dashboard .section.top { padding: 0 0 15px 0 !important; }
	#mobile-dashboard .section { padding: 15px 0; border-bottom: 1px solid #adb0b3; }
	#mobile-dashboard .section h3 { color: #6e6e6e; font-size: 20px; }
	#mobile-dashboard .section h3.current-cont-rate { margin-bottom: 0; font-size: 19px; }
	#mobile-dashboard .section h3.current-cont-rate .rate { float: right; color: #000 !important; }
	#mobile-dashboard ul.account-summary { margin: 0 0 10px 0; list-style-type: none !important; padding: 0 !important; }
	#mobile-dashboard ul.account-summary li { margin: 0 0 6px 0; list-style-type: none !important; }
	#mobile-dashboard ul.account-summary li span,
	#mobile-dashboard .account-summary-totals span { display: inline-block; }
	#mobile-dashboard ul.account-summary li .name { font-weight: bold; width: 69%; }
	#mobile-dashboard ul.account-summary li .value { width: 29%; text-align: right; vertical-align: top; }
	#mobile-dashboard .account-summary-totals { padding: 8px 0 0; text-transform: uppercase; font-size: 12px; font-weight: bold; }
	#mobile-dashboard .account-summary-totals .name { width: 69%; }
	#mobile-dashboard .account-summary-totals .value { width: 29%; text-align: right; }
	#mobile-dashboard .section.top .account-summary li:not(:last-child){ border-bottom:1px dotted #9f9f9f; padding-bottom:5px; }
	
	/* Main Contnet Styles */
	article { /*text-align: center;*/ }
	.content { padding: 20px 10px; }
	
	.content .main-content iframe.calculator { width: 470px; }
	
	.tabs-content { display: none; padding: 2%; width: 96%; }
	
	.content .main-content .mobile-loan { display: none; }
	
	#nav li.mobile-view { display: block !important; }
	/* Force table to not be like tables anymore */
	.rd-table table, .rd-table thead, .rd-table tbody, .rd-table th, .rd-table td, .rd-table tr { display: block; }
	/* Hide table headers (but not display: none;, for accessibility) */
	
	.datatable_bg { border: 0; }
	.rd-table tr.first-row { position: absolute; top: -9999px; left: -9999px; }
	.rd-table tr { padding: 0 5px 5px 0; }
	/* Behave like a "row" */
	.rd-table tr td { border: 0; position: relative; padding: 2% 0 2% 50% !important; text-align: left !important; }
	.rd-table tr td[data-label]:before {
        content: attr(data-label) "\00A0"; text-align-last: left !important;
		/* Now like a table header */
		position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 5px; /*white-space: nowrap; */
	}
	.rd-table tr td.fund-name { font-weight: bold; }
	
	.datatable.rd-table td.fund-name, .datatable.rd-table td.items-15, .datatable.rd-table td.items-20 { width: 51% !important; }
	.main-content.col8 { width: 100% !important; }
	
	.cw-container .chart-wrapper { width: 100%; margin: 0 auto; }
	
	.rd-table tr td.hidden-elements { visibility: hidden; text-indent: -9999px; line-height: 0; height: 0; display: inline; }
	
	.cw-container { font-size: inherit !important; text-align: center; }
	.cw-container .chart-wrapper  { width: auto !important; }
	.form .row { text-align: center; }
	.form.transaction { background: #d8d8d8; padding: 10px; }
	.form.transaction .row { margin: 0; text-align: left; }
	.button-wrapper.right { text-align: center; }
	.button-wrapper,
	.button-wrapper.right { width: 100% !important; float: left; }
	.button-wrapper .button-link,
	.button-wrapper.right .button-link { width: 100% !important; margin: 0 0 8px 0 !important; display: block; padding: 8px 0 !important; }
	
	
	/* Login Styles */
	.landing-wrapper.login { width: 100%; }
	.landing-wrapper.login .container { width: 90%; padding: 40px 5%; }
	.landing-wrapper.login .login-wrapper { width: 100%; margin: 0 auto; display: block; }
	.landing-wrapper.login .login-wrapper .button-link { display: block; text-align: center; width: 268px !important; padding: 8px 5px; float: none; margin: 0; }
	.landing-wrapper.login .login-info { margin: 0 auto; display: block; width: 96% !important; padding: 0 2% !important; }
	.landing-wrapper.login .login-info p { font-size: 11px !important; }
	header.login .time-out, .content .main-content .message-box { margin: 40px auto 20px; display: block; }
	header.login .logo { margin: 0 auto; }
	.landing-wrapper .col4, .landing-wrapper .col5 { float: none !important; }
	
	#toast-container > div { width: 110% !important; }
	.toast-top-middle{ top:15% !important; left:10% !important;}
	
	p#footerright{ text-align: left; margin-left: 20px; font-size: 8px; }
	footer ul li{ font-size: 10px; }
	footer .col6 { width: auto !important; }
	
	/*misc Loan balance page*/
	.form.transaction .row .label { width:140px; font-size: 13px; }
	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ 

	.landing-wrapper.login .login-info { margin: 0 10px 0 20px !important; width: 365px !important; }
	header .col8 { width: 390px !important; }
	
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	body { padding: 0; margin: 0; width: auto; }
    .col12{width:98%;}
    .confDivSQ {
        float: none !important;
        width: 100% !important;
    }
  .padinputTxt{padding: 5px 0;
width: 35%;
display: block;}  
  #sAgreeText{margin: 0 5px 0 10px !important;
padding: 5px !important;
width: 65% !important;}


    .inputWidth_2{width:65px!important; padding:5px; margin-top:5px; }

.button-link{ padding:6px;font-size: 11px !important;} 

.highlight_txt{ font-size:11px !important;}

.margTop10btn{margin-top:10px;}

.padConfirmTxt{ padding:8px;font-size:11px !important;}
.padinputTxt{width: 80px !important;display:block;}
.fieldBox{ width:80% !important;}
.rgt input{ padding:5px;}
.fieldblock span.lft{ font-size:11px !important;}
.fieldblock span.lft{ padding:5px;}
.fieldblock span.rgt{ width:71%;}

}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	header, footer { width: auto; }
	.landing-wrapper.login .login-info { margin: 0 10px 0 20px !important; width: 365px !important; }
     .col12{width:98%;}
    .confDivSQ {
        float: none;
        width: 100%;
    }
  
    
    #divMainContent{ width:95% !important;}
   .fieldBox{ width:70%;}
   
}