@charset "UTF-8";

@media only screen and (max-width: @width-sm){
	.@{prefix}{
		&body{
			background: @background-body-ti;
		}
		&container, &layout-header, &layout-menu, &layout-main{
			width: @layout-width-ti;
			margin-left:0;
		}
	 	&layout-sidebar{
	 		width: 100%;//@sidebar-width-ti;
 			position: fixed;
 			top: @header-pc-height;
 			left:0;
 			display: none;
	 	}
	 	&dialog{
	 		width: 88% !important;
	 	}
	 	&login-box{
	 		width: 100% !important;
	 	}

	 	&label-control{
			line-height: 1.2;
			text-align: left;
		}
	}
}
@media only screen and (min-width: @width-sm) and (max-width: @width-md){
	.@{prefix}{
		&body{
			background: @background-body-sm;
		}
		&container, &layout-header, &layout-menu, &layout-main{
			width: @layout-width-sm;
			margin-left: @sidebar-width-sm;
		}
		&layout-full{
			margin-left: 0 !important;
			width: 100% !important;
		}
		&layout-sidebar{
	 		width: @sidebar-width-sm;
	 	}
	}	
}
@media only screen and (min-width: @width-md) and (max-width: @width-lg){
	.@{prefix}{
		&body{
			background: @background-body-md;
		}
		&container, &layout-header, &layout-menu, &layout-main{
			width: @layout-width-md;
			margin-left: @sidebar-width-md; 
		}
		&layout-full{
			margin-left: 0 !important;
			width: 100% !important;
		}
		&layout-sidebar{
	 		width: @sidebar-width-md;
	 	}
	}
}

@media only screen and (min-width: @width-lg){
	.@{prefix}{
		&body{
			background: @background-body-lg;
		}
		&container, &layout-header, &layout-menu, &layout-main{
			width: @layout-width-lg;
			margin-left: @sidebar-width-lg; 
		}
		&layout-full{
			margin-left: 0 !important;
			width: 100% !important;
		}
		&layout-sidebar{
	 		width: @sidebar-width-lg;
	 	}
	}
}