/* no more table css */

@media only screen and (max-width: 824px) {
    
    /* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables tr { border: 1px solid #ccc; }
 
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 60%; 
		white-space: normal;
		text-align:left;
	}
 
	#no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 55%;
		/* padding-right: 10px; */ 
		white-space: normal;
		text-align:left; 
		font-weight: bold;
	}
 	
	/*
	Label the data
	*/
	#no-more-tables td:before { content: attr(data-title); }
}
@media screen and (max-device-width: 668px) and (orientation: landscape){
	.nav.nav-tabs {
		margin-left: 6.5rem !important;
	}
	.header_content{
		width: 95%;
	}
	.pieChart {
    	height: 240px;
    	width: 240px;
	}
}
@media only screen and (max-width: 600px) {
	.nav.nav-tabs {
		margin-left: 0rem !important;
	}
	.header{
		height: auto;
	}
	.header_content{
		width: 100%;
		height: auto;
		margin: 1%;
	}
	.header_content .row{ 
		margin: 0%; 
	}
	.loginForm .col-sm-4,.form-style .col-sm-4{
		width: 35%;
	}
	.loginForm .col-sm-8, .form-style .col-sm-8{
		width: 65%;
	}
	.header_content .loginName{
		width: 70%;
	}
	.header_content .locale{
		width: 30%;
	} 
	.instruction-status, .form-style{
		width: auto;
	}
	.table tr th{
		background-image: none;
	}
	.acknowledgement tbody tr td{ 
		padding-left: 0% !important;
	}
	.next{
		padding-left: 0px; 
		border-left: none;
	}
	.nav.nav-tabs{
		max-width: 100%
	}
	.nosidebar{
		max-width: 90% !important;	
		margin: auto;
	}
	.memberDatailTable{
		width: 100%;
	}
	.memberDatailForm{
		width: 100% !important;
	}
	.content_box{
		width: 90% !important;
	}
} 
@media screen and (max-device-width: 824px){
	.header_content{
 		width: 100% !important;
 	}
	.header-logo{
		margin-top:5px;
		max-width: 300px;
	}
	.logo{
		max-width: 300px;
	}
	.memberDatailForm {
		width: 100%;
	}
}
@media screen and (orientation:landscape) 
and (max-device-width: 824px) {
	.nav.nav-tabs {
		margin-left: 0rem !important;
	}
	.wrapper{
 		height: 80% !important;
 	}
 	.header_content .row{
 		width: 100%;
 	}
 	.three_steps .step1, .three_steps .step2, .three_steps .step3{
		width: 40vh;
	}
	.d-md-none{
		display: block!important;
	}
	.four_new_steps .step1, .four_new_steps .step2, .four_new_steps .step3, .four_new_steps .step4{
		width: 35vh; 
	}
	.next{
		padding-left: 0px;
		border-left: none; 
	}
	.total{
		text-align: left !important;
	}
	.memberDatailTable{
		width: 100%;
	}
	.steps_eng{
		padding-top: 19px !important; 
	}
	.loginName{
		max-width: 200px;
	}
	.header_content .locale{
		min-width: 100px;
	}
	..header_content .locale{
		width: 30%;
	}
}
@media screen and (orientation: portrait) {
	.loginForm{
		width: 90% !important;
	}
	.col-sm-6{
		flex-basis: auto;
	}
	.col-sm-3{
		width: 50%;
	}
	.wrapper{
		padding: 0px !important;
		height: 100%;
	}
	.wrapper .login-background{
		background-size: auto !important;
	} 
	.fixed-table-layout{
	   	table-layout: fixed;
	}
	.table {
	 	font-size: 0.9rem !important;
	}
	.form-wizard-step.active .form-wizard-step-icon{
		width: 35px;
    	height: 35px;
    	font-size: 16px;
    	line-height: 36px;
    	margin-top: 6px;
	}
	.form-wizard-step-icon{
		width: 30px;
    	height: 30px;s
    	font-size: 16px;
    	line-height: 30px;
    	margin-top: 9px;
	}
	.form-wizard-step p{
		font-size: 0.85rem;
	}
	.form-wizard-step.activated .form-wizard-step-icon{
	    line-height: 28px;
	}
}
@media screen and (max-device-width: 375px){
	.pieChart{
		height:240px;
		width:240px;
    		margin: auto;
	}
}
@media screen and (min-width: 600px) and (max-device-width: 824px){
	.form-style{
		width: 70%;
	}
}
@media screen and (orientation:landscape) and (max-height: 630px){
	.wrapper{
		height: 100%;
	}
	.wrapper .login-background{
		height: 100%;
	}
}
@media screen and (max-width: 824px){
	.nav.nav-tabs {
		margin-left: 0px; 
	}
}