.navbar-default {
			background-color: #3949AB;
		}
		
		.navbar-default .navbar-nav>.active>a,
		.navbar-default .navbar-nav>.active>a:hover,
		.navbar-default .navbar-nav>.active>a:focus {
			color: #e5e5e5;
			background-color: #283593;
		}
		
		.panel-body {
			margin: 0px;
			padding: 0px;
		}
		
		.timeText {
			padding-top: 5px;
			margin: 0px;
			font-size: 13px;
		}
		
		.statusText {
			font-size: 14px;
		}
		
		.imgAlign {
			margin-left: -10px;
			position: relative;
			z-index: 1;
		}
		.timeGraph {
			padding: 5px;
			height: 115px;
			width: 115px;
		}

		.timeGraph2 {
			padding: 5px;
			height: 110px;
			width: 105px;
			margin-left: -3px;
		}	
		
		.appointmentIcon {
			position: absolute;
			z-index: 10;
			top: 65px;
			left: 43px;
			font-size: 14px;
		}		
		
		.timeColumn {
			height: 175px;
		}
		
		.statusColumn {
			height: 175px;
		}

		/* Colors */
		.red-darken-1 {
			background-color: #e53935;
			color: #fff;
		}
		
		.red-darken-3 {
			background-color: #c62828;
			color: #fff;
		}
		
		.yellow-darken-1 {
			background-color: #fdd835;
            color: #666;
		}
		
		.yellow-darken-3 {
			background-color: #f9a825;
            color: #666;
		}
		
		.green-darken-1 {
			background-color: #43a047;
            color: #fff;
		}
		
		.green-darken-3 {
			background-color: #2e7d32;
            color: #fff;
		}

		
		
		@media only screen and (min-width: 1625px ) and (max-width : 1860px) {
			.timeColumn {
			height: 185px;
			}
		
			.statusColumn {
			height: 185px;
			}

			.statusText {
			font-size: 14px;
			white-space: nowrap;
			}
			
			.timeGraph {
			padding: 5px;
			height: 105px;
			width: 105px;
			}

		.timeGraph2 {
			padding: 5px;
			height: 100px;
			width: 95px;
			margin-left: -3px;
			}	
		}

		@media only screen and (min-width: 1200px ) and (max-width : 1626px) {
			.timeColumn {
			height: 200px;
			}
		
			.statusColumn {
			height: 200px;
			}

			.statusText {
			font-size: 12px;
			
			}
			
			.timeGraph {
			padding: 5px;
			height: 75px;
			width: 75px;
			margin-left: -18px;
			}

			.timeGraph2 {
			padding: 5px;
			height: 80px;
			width: 75px;
			margin-left: -17px;
			}	

			.appointmentIcon {
			position: absolute;
			z-index: 10;
			top: 70px;
			left: 20px;
			font-size: 12px;
		}	
		}

		@media only screen and (min-width: 768px ) and (max-width : 1024px) {
			body {
				margin-top: 150px;
			}
			.timeGraph {
				height: 125px;
				width: 125px;
				margin-left: -10px;				
			}

			.timeGraph2 {
				height: 125px;
				width: 120px;
				margin-left: -10px;				
			}
			.timeText {
				font-size: 18px;	
			}

			.statusText {
				font-size: 16px;			
			}
			.timeColumn {
				height: 215px;
			}
		
			.statusColumn {
				height: 215px;
			}
			.appointmentIcon {
				position: absolute;
				z-index: 10;
				top: 80px;
				left: 52px;
				font-size: 18px;
			}
		
		}

		@media only screen and (min-width: 320px ) and (max-width : 767px) {
			.timeGraph {
				height: 115px;
				width: 115px;
				margin-left: 10px;				
			}

			.timeGraph2 {
				height: 115px;
				width: 110px;
				margin-left: 10px;				
			}

			.appointmentIcon {
				position: absolute;
				z-index: 10;
				top: 70px;
				left: 60px;
				font-size: 16px;
			}
			

			.timeText {
				font-size: 14px;	
			}

			.statusText {
				font-size: 14px;			
			}
		}