@media all and (orientation: portrait) {
/*for 768 device width example ipad when vertically handed*/
@media only screen and (max-width: 768px) {

	div.index div.loginWrap div.infoWrap{
		display: none;
		opacity: 0;
	}
	div.index div.loginWrap div.loginTxt{
		width: 90%;
		display: block;
		border:none;
		margin: 10% 0 0 10%;
	}
	div.index{
	height:97.5vh;
	}
	div.index div.loginWrap div.loginTxt div.switch-btn{
    width:80px;
    height:40px;
	}
	div.index div.loginWrap div.loginTxt div.switchOn:before{
    left:43px;
	}
	div.index div.loginWrap div.loginTxt div#rememberMe{
		font-size: 1.5em;
		line-height: 17px;
	}
	.nav-bar ul li.profile-part{
	width: 63%;
	margin-left:50px;
	}
	.nav-bar img{
	margin-top: 3.7%;
	}
	.nav-bar .profile-detail{
	top: 80px;
  	right: -1%;
	}
	div.sideBar ul li{
	width: 142px;
	}
	div.sideBar ul li i.icon{
	width: 8%;
	font-size: 1em;
	}
	div.sideBar ul li i.has-sub{
	font-size: 0.8em;
	}
	div.sideBar ul li a{
	width: 90%;
	font-size: 0.7em;
	}
	div.dashboard div.middleBar {
		height: 100vh;
		padding-bottom: 30%;
	}
	div.graph .chart.area{
		width: 97% !important;
	}
	div.graph div.chart.line{
		width: 97% !important;
		height: 40% !important;
		border: 1px dotted #cccccc;
		padding: 1%;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.lftPrt{
	width: 25%;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt label.addNew{
	
	left: 205px;
	}
	div#popUpForm div.modal-content{
    width: 90% !important;
	}
	div#popUpForm.modal div.modal-content div.popUpBody span.uploadspan{
		padding: 5% 23.5% !important;
	}
	div#popUpForm.modal div.modal-content div.popUpBody div.row{
		width: 50%;
	}
	div.workplace div.contentBar div.content div.theForm div.suggest{		
	margin-top: -20px;
	}	
	div.workplace div.contentBar div.content div.theForm div.suggest div#time p{
		padding: 2% 10% 0 0;
		margin: -55% 0 25% 0;
		box-sizing: border-box;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt #txtWidth {
		padding-left: 12%;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt #txtHeight{
		padding-left: 11%;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt span#x{
		line-height: 75px;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt span#y{
	right: 80px;
	line-height: 75px;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt i{
		left: 130px;
		top: 15px;
	}
	div.workplace div.showRecord div.show-actions  {
		margin-top: 25%;
  		height: 3.5%;
  		width: 25%;

	}

}
}
@media all and (orientation: landscape) {
/*for 1024 device width example ipad when horizentally handed*/

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

	div.index{
	height:97.5vh;
	}
	div.index div.loginWrap div.loginTxt div.record i{
	width: 8%;
	}
	div.index div.loginWrap div.loginTxt div.switch-btn{
    width:40px;
    height:25px;
	}
	div.index div.loginWrap div.loginTxt div.switch-btn:before{
    height: 90%;
    width: 55%;
    left:2px;
    top:1px;
    border-radius: 20px;
	}
	div.index div.loginWrap div.loginTxt div.switchOn:before{
	    left:16px;
	}
	div.index div.loginWrap div.loginTxt div#rememberMe{
		 margin-top: -6.5%;
	}
	.nav-bar ul li.profile-part{
	width: 90%;
	margin-left:50px;
	}
	.nav-bar img{
	margin-top: 3.7%;
	}
	.nav-bar .profile-detail{
	top: 80px;
  	right: -1%;
	}
	div.sideBar ul li{
	width: 195px;
	}
	div.sideBar ul li i.icon{
	width: 10%;
	font-size: 1.2em;
	}
	div.sideBar ul li i.has-sub{
	font-size: 1em;
	}
	div.sideBar ul li a{
	width: 88%;
	font-size: 0.9em;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt label.addNew{	
	left: 270px;
	top: 2px;
	}
	div#popUpForm div.modal-content{
    width: 70% !important;
	}
	div#popUpForm.modal div.modal-content div.popUpBody span.uploadspan{
		padding: 5% 24.4% !important;
	}
	div#popUpForm.modal div.modal-content div.popUpBody div.row{
		width: 50%;
	}
	div.workplace div.contentBar div.content div.theForm div.suggest{		
	margin-top: -20px;
	}	
	div.workplace div.contentBar div.content div.theForm div.suggest div#time p{
		padding: 2% 10% 0 0;
		margin: -42% 0 18% 0;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt #txtWidth {
		padding-left: 12%;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt #txtHeight{
		padding-left: 11%;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt span#x{
		line-height: 75px;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt span#y{
	right: 112px;
	line-height: 75px;
	}
	div.workplace div.contentBar div.content div.theForm div.record div.column div.rghtPrt i{
		left: 180px;
		top: 15px;
	}
	div.workplace div.showRecord div.show-actions  {
		margin-top: 20%;
		margin-left: 52%;
  		height: 5%;
  		width: 20%;


	}

}

}

@media only screen and (min-width: 300px) and (max-width: 700px) {

	div.index div.loginWrap div.infoWrap{
		display: none;
		opacity: 0;
	}
	div.index div.loginWrap div.loginTxt{
		width: 90%;
		display: block;
		border:none;
		margin: 10% 0 0 10%;
	}
	div.index div.loginWrap div.loginTxt div.record button{
		margin-top: -3%;
	}
}
@media only screen and (max-width: 700px) and (orientation:portrait) {

	label.error{
	width: 90% !important;
	}		
	div.index div.loginWrap{
		height: 350px !important;
		position: absolute !important;
	}
	div.index div.loginWrap div.loginTxt div.record i{
		width: 10%;
	}
	div.index div.loginWrap div.loginTxt div.switch-btn{
    width:40px;
    height:25px;
	}
	div.index div.loginWrap div.loginTxt div.switch-btn:before{
		height: 80%;
		width: 50%;
	}
	div.index div.loginWrap div.loginTxt div.switchOn:before{
    left:18px;
	}
	div.index div.loginWrap div.loginTxt div#rememberMe{
		width: 80%;
		font-size: 0.8em;
    	margin-top: -8%;
	}
	div.index div.loginWrap div.loginTxt div.record button{
		margin-top: 3%;
	}
	.nav-bar ul{
	  width: 300px;
	  margin: 0;
	}
	.nav-bar .profile-detail{
	  top: 60px;
	  right: 0;
	  width: 200px;
  	  height: 100px;
	}
	.nav-bar .profile-detail div.user div.user-img{
		width: 50px;
	height: 50px;
	}
	.nav-bar .profile-detail div.user div.user-img img{
	width: 50px;
	height: 50px;
	}
	.nav-bar .profile-detail div.user div.user-info{
		margin: -50px 0 0 -49px;
	}
	.nav-bar .profile-detail button{		
  		margin:-50px 5px 0 -6px;

	}/*
	div.sideBar ul {
		margin: 100% 0 0 0;
		display: none;
	}
	div.sideBar ul li{
		width: 64px;
		height: 50px;
	}
	div.sideBar ul li i.icon{
		font-size: 2.5em;
		text-align: center;
		padding-left: 20%;
	}
	div.sideBar ul li a span{
		display: none;
	}
	div.sideBar ul li ul{
		position: absolute;
		left:1%;
		display: none;
		opacity: 0;
		visibility: hidden;
	}
	div.sideBar ul li ul li{
		display: none;
		opacity: 0;
		visibility: hidden;
		margin-left: 10px !important;
	}
	div.sideBar ul li ul li a{
		display: none;
		opacity: 0;
		visibility: hidden;
		margin-left: 10px !important;
	}
	div.sideBar ul li ul li{
	}*/
	div.system-icon{
		width: 18% !important;
		background-color: #FFF;
		margin: 2% 0 0 0;
	}
	 div.system-icon img.logo.small{ 
 	display: block;
 	}
 	 div.system-icon img.logo.large{ 
 	display: none;
 	}
	 div.system-icon img{
	 	width: 80%;
	 }
	div.sideBar{
		display: none;
	}
	div.dashboard div.middleBar {
		width: 98%;
	}
	div.dashboard div.middleBar div.graph div.chart.area {
		height: 50%
	}
	div.dashboard div.middleBar div.lastBar {
		display: none;
	}

}
@media only screen and (max-width: 700px) and (orientation:landscape) {
	div.system-icon{
		width: 20% !important;
		background-color: #FFF;
	}
	 div.system-icon img.logo.small{ 
 	display: block;
 	}
 	 div.system-icon img.logo.large{ 
 	display: none;
 	}
	 div.system-icon img{
	 	width: 80%;
	 }
	div.sideBar{
		display: none;
	}
	div.dashboard div.middleBar {
		width: 98%;
	}
	div.dashboard div.middleBar div.graph div.chart.area {
		height: 100%
	}
	div.dashboard div.middleBar div.lastBar {
		display: none;
	}
	.nav-bar ul{
	  width: 450px;
	   margin: -1.5% 0 0 0;
	}
	.nav-bar .profile-detail{
	  top: 70px;
	  right: 0;
	  width: 200px;
  	  height: 100px;
	}
	.nav-bar .profile-detail div.user div.user-img{
		width: 50px;
	height: 50px;
	}
	.nav-bar .profile-detail div.user div.user-img img{
	width: 50px;
	height: 50px;
	}
	.nav-bar .profile-detail div.user div.user-info{
		margin: -50px 0 0 -49px;
	}
	.nav-bar .profile-detail button{		
  		margin:-50px 5px 0 -6px;

	}

}