/* Higher than 1200 (desktop devices)
===================================================================== */
@media (min-width: 1200px) {
	.container-fluid-full {
		overflow: hidden;
		position: relative;
		height: 100%;
	}
	#content {
		width: 85.578%;
		padding: 28px;
		margin-top:70px;
		margin-left: 14.422% !important;
	}
	#sidebar-left {
		background: #565656;
		margin-left: 0px !important;
		overflow: scroll;
		position: fixed;
		height: calc(100% - 50px);
		top:70px;
	}
	::-webkit-scrollbar {
		width: 4px;
	  }
	  /* Track */
	  ::-webkit-scrollbar-track {
		background: #f1f1f1; 
	  }
	   
	  /* Handle */
	  ::-webkit-scrollbar-thumb {
		background: rgb(109, 159, 179); 
	  }
	  
	  /* Handle on hover */
	  ::-webkit-scrollbar-thumb:hover {
		background: #555; 
	  }
	.sidebar-nav > ul{

		margin: 0px;

	}

	

	footer {

		margin: 0px 0px 0px 0px;

		padding: 10px 20px;

	}

	

}



/* Higher than 960 (desktop devices)

====================================================================== */

@media only screen and (min-width: 980px) and (max-width: 1199px){

	

	.container-fluid-full {

		overflow: hidden;

		position: relative;

		height: 100%;

	}

	

	#content {

		width: 85.578%;

		padding: 20px;

		margin: 0px;

		margin-left: 14.422% !important;

	}

	

	.dark {

		padding: 20px;

		top: -20px;

		right: -12px;

		margin-bottom: -56px;

		margin-right: -30px;	

	}

	

	

	#sidebar-left {

		background: #565656;

		margin-left: 0px !important;

		position: absolute;

		height: 100%;

	}

	

	.sidebar-nav > ul{

		margin: 0px;

	}

	

	.sparkLineStats {

		position: relative; 

		padding-bottom: 4px;

	}

	

	.sparkLineStats li {

		font-size: 10px;

		line-height: 42px;

	}

	

	.sparkLineStats li .number {

		font-size: 16px;

		font-weight: 700; 

		padding:0 0px; 

	}

	

	.breadcrumb {

		margin: -20px -20px 20px -20px;	

	}

	

	.statbox,

	.widget,

	.box,

	.circleStatsItemBox {

		margin-bottom: 20px;

	}

	

	/* Page: Tasks

	=================================================================== */



	.task .desc {

		display: inline-block;

		width: 70%;

		padding: 10px 10px;

		font-size: 12px;

	}



	.task .desc .title {

		font-size: 16px;

		margin-bottom: 5px;

	}



	.task .time {

		display: inline-block;

		float: right;

		width: 20%;

		padding: 10px 10px;

		font-size: 12px;

		text-align: right;

	}



	.task .time .date {

		font-size: 16px;

		margin-bottom: 5px;	

	}



	footer {

		margin: 0px;

		padding: 10px 20px;

	}

	

}



/* Tablet Portrait (devices and browsers)

====================================================================== */

@media only screen and (min-width: 768px) and (max-width: 979px) {

	

	.container-fluid-full {

		overflow: hidden;

		position: relative;

		height: 100%;

	}

	

	#content {

		width: 91.666%;

		padding: 22px;

		margin: 0px 0px;

		margin-left: 8.334% !important;

	}

	

	.dark {

		padding: 20px;

		top: -22px;

		right: -15px;

		margin-bottom: -56px;

		margin-right: -30px;

	}

	

	.breadcrumb {

		margin: -22px -22px 22px -22px;	

	}

	

	.statbox,

	.widget,

	.box,

	.circleStatsItemBox {

		margin-bottom: 22px;

	}

		

	#sidebar-left {

		background: #565656;

		margin-left: 0px !important;

		position: absolute;

		height: 100%;

		width: 8.334% !important;

	}

	

	.sidebar-nav > ul{

		margin: 0px;

	}

	

	.nav-tabs.nav-stacked > li > a,

	.nav-tabs.nav-stacked > li > ul > li > a {

		text-align: center;

		margin-top: -2px;	

	}

		

	.noMargin {

		margin-left: 0px !important;

	}

	

	.btn-navbar {

		display: none !important;

	}

	

	.nav-collapse,

  	.nav-collapse.collapse {

    	height: auto !important;

    	overflow: visible !important;

		margin-left: 0px !important;

  	}

	

	

	.stats-date .range {

		font-size: 16px;

		font-weight: 300;

	}





	.stat .left .number {

		font-size: 16px;

		font-weight: 300;

	}



	.stat .left .title {

		font-size: 9px;

	}



	.stat .right .percent {

		text-align: center;

		font-size: 12px;

		line-height: 16px;

	}

	

	.box-small-link {

		font-size: 20px;

	}

	

	.sparkLineStats {

		padding-bottom: 10px;

	}

	

	.sparkLineStats li {

		font-size: 10px;

		line-height: 43px;

	}

	

	.sparkLineStats li .number {

		font-size: 12px;

		font-weight: 700; 

		padding:0 0px; 

	}

	

	/* Page: Tasks

	=================================================================== */



	.task {

		border-bottom: 1px solid #f9f9f9;

		margin-bottom: 1px;

	}



	.task.high {

		border-left: 2px solid rgba(250,96,61,1);

	}



	.task.medium {

		border-left: 2px solid rgba(250,187,61,1);

	}



	.task.low {

		border-left: 2px solid rgba(120,205,81,1);

	}



	.task .desc {

		display: inline-block;

		width: 65%;

		padding: 10px 10px;

		font-size: 10px;

		margin-right: -20px;

	}



	.task .desc .title{

		font-size: 14px;

		margin-bottom: 5px;

	}



	.task .time {

		display: inline-block;

		float: right;

		width: 25%;

		padding: 10px 10px;

		font-size: 10px;

		text-align: right;

	}



	.task .time .date {

		font-size: 14px;

		margin-bottom: 5px;	

	}



	.timeslot .task span {

		border: 2px solid rgba(103, 194, 239, 1);

		background: rgba(103, 194, 239, .1);

		padding: 5px;

		display: block;

		font-size: 10px;

	}



	.timeslot .task span span{

		border: 0px;

		background: transparent;

		padding: 0px;

	}



	.timeslot .task span span.details{

		font-size: 14px;

		margin-bottom: 0px;

	}



	.timeslot .task span span.remaining{

		font-size: 12px;

	}

	

	footer {

		margin: 0px;

		padding: 10px 20px;

	}

	

}



/* All Mobile Sizes (devices and browser)

====================================================================== */

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

	

	#content {

		overflow: hidden;

		margin: -10px 0px 0px 0px;

	}

	

	.breadcrumb {

		margin: -5px -5px 5px -5px;

	}

	

	.nav-tabs.nav-stacked > li > a,

	.nav-tabs.nav-stacked > li > ul > li > a {

		margin-top: -2px;	

	}

		

	.dark {

		padding: 5px;

		top: 5px;

		right: 0px;

		margin-bottom: 0px;

		margin-right: 0px;

		position: relative;

		border: 0px;

	}

	

	.statbox,

	.widget,

	.box,

	.circleStatsItemBox {

		margin-bottom: 20px !important;

	}

	

	/* Page: Tasks

	=================================================================== */



	.task {

		border-bottom: 1px solid #f9f9f9;

		margin-bottom: 1px;

	}



	.task.high {

		border-left: 2px solid rgba(250,96,61,1);

	}



	.task.medium {

		border-left: 2px solid rgba(250,187,61,1);

	}



	.task.low {

		border-left: 2px solid rgba(120,205,81,1);

	}



	.task .desc {

		display: inline-block;

		width: 65%;

		padding: 10px 10px;

		font-size: 10px;

		margin-right: -20px;

	}



	.task .desc .title{

		font-size: 14px;

		margin-bottom: 5px;

	}



	.task .time {

		display: inline-block;

		float: right;

		width: 25%;

		padding: 10px 10px;

		font-size: 10px;

		text-align: right;

	}



	.task .time .date {

		font-size: 14px;

		margin-bottom: 5px;	

	}



	.timeslot .task span {

		border: 2px solid rgba(103, 194, 239, 1);

		background: rgba(103, 194, 239, .1);

		padding: 5px;

		display: block;

		font-size: 10px;

		-webkit-border-radius: 4px;

		   -moz-border-radius: 4px;

				border-radius: 4px;

	}



	.timeslot .task span span{

		border: 0px;

		background: transparent;

		padding: 0px;

	}



	.timeslot .task span span.details{

		font-size: 14px;

		margin-bottom: 0px;

	}



	.timeslot .task span span.remaining{

		font-size: 12px;

	}

	

	h1{font-size:22px;line-height:22px;}

	h2{font-size:14px;line-height:14px;}

	select{width:90%;}

	.dataTables_length select{width:25%;}

	.login-box{

		width:90%;

	}

	.login-box input[type="text"], .login-box input[type="password"]{border:1px solid #9a9a9a !important;}

	.login-box .add-on{border:1px solid #9a9a9a !important;}

	.login-box h2{font-size:14px;line-height:14px;}

	.login-box .error input{border-color:#b94a48 !important;}

	.navbar .brand{font-size:22px;line-height:11px;}

	.form-horizontal .control-label{width:100px;}

	.form-horizontal .controls{margin-left:110px;}

	.input-xlarge{width:90%;}

	.form-horizontal .form-actions{padding-left:115px;}

	.login-box{margin:25% auto;}

	.checkOutDate{width:100px;}

	.table p{line-height:14px;margin-bottom:5px;}

}



/* Mobile Landscape Size to Tablet Portrait (devices and browsers)

====================================================================== */

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

	

	body {

		padding: 0px;

	}

	

	#content {

		padding: 5px;

	}

	

	.stat {

		width: 50%;

		margin: 10px 0% 0% 0%;

		float: left;

	}

		

	.quick-button,

	.quick-button-small {

		margin-bottom: 20px;

	}

	

	.pull-right {

		width: 100%;

		margin: 10px auto;

		text-align: center;

	}

	

	.fc-button-today,

	.fc-button-month,

	.fc-button-agendaWeek,

	.fc-button-agendaDay {

		display: none;

	}

	

	footer {

		padding: 10px 20px;

	}

	

}



/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers)

=================================================================== */

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

	

	body {

		padding: 0px;

	}

	

	#content {

		padding: 5px;
		margin-top: 114px;

	}

	

	.stat {

		width: 100%;

		margin: 1% 0% 0% 0%;

		float: left;

	}

		

	.quick-button,

	.quick-button-small {

		margin-bottom: 20px;

	}

	

	.pull-right {

		width: 100%;

		margin: 10px auto;

		text-align: center;

	}

	

	.fc-button-today,

	.fc-button-month,

	.fc-button-agendaWeek,

	.fc-button-agendaDay {

		display: none;

	}

	

	table,

	.pagination {

		font-size: 10px;

	}

	

	.pagination {

		padding: 5px;

	}

	

	.ui-slider-handle {

		margin-top: 1px !important;

	}



	.sliderVertical .ui-slider-handle {

		margin: 0px 0px -10px 1px !important;

	}

	

	

	footer {

		padding: 10px 20px;

	}

	

}

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

	.form-actions{margin-right:5px;}

}