.card{
  transition: 0.3s;
}
.tbl-scroll{
	overflow:scroll !important;
}
.tbl-scroll tr td{
	 white-space:nowrap;
}
@media(min-width: 50px) and (max-width: 320px)  {
    
}   

@media (min-width: 320px) and (max-width: 380px){

}
@media (min-width: 381px) and (max-width: 480px){
   
}
@media (min-width: 481px) and (max-width: 500px) {
.home-page{
	height:auto;
	margin-top:10vh;
	padding:0px 0px 20px 0px;
}
.loginPage{
		width:80%;
	}
.tbl-scroll{
	overflow:scroll !important;
}
}
@media (min-width: 501px) and (max-width: 767px) {
   .home-page{
	height:auto;
	margin-top:10vh;
	padding:0px 0px 20px 0px;
}
.card{
  width:90%;
}
.loginPage{
		width:80%;
	}
}

@media (min-width: 768px) and (max-width:979px) {
   .home-page{
	height:auto;
	margin-top:10vh;
	padding:0px 0px 20px 0px;
}
.card{
  width:60%;
}
}
@media (min-width: 979px) and (max-width: 1024px) {
 
}
@media (min-width: 1024px) and (max-width: 1280px) {
.loginPage{
		width:40%;
	}
}

@media (min-width: 1280px) and (max-width: 1360px) {
	.loginPage{
		width:40%;
	}
}

@media (min-width: 1360px) and (max-width: 1400px) {
.loginPage{
		width:40%;
	}
}
@media (min-width: 1400px) and (max-width: 1600px) {
.loginPage{
		width:40%;
	}
}
@media (min-width: 1600px) and (max-width: 1920px) {
.loginPage{
		width:40%;
	}
}
@media (min-width: 1920px) and (max-width:2400px) {
.loginPage{
		width:40%;
	}
}
@media only screen and (orientation: landscape) {
.loginPage{
		width:40%;
	}
}
@media (max-width: 767px) {
 .loginPage{
		width:80%;
	}
}
@media only screen and (max-width: 800px) {
 .loginPage{
		width:40%;
	}
 @media screen and (min-width:800px) {
 .loginPage{
		width:40%;
	}
}
 @media only screen and (min-width: 210px) and (max-width: 1186px) {
 .loginPage{
		width:80%;
	}
}