.no-show{
				display:none;
			}
			td .bg-black, tr .bg-black, th .bg-black  {
				/*background-color:#555555;*/ 
				background: rgba(52, 73, 94, 0.94);
				color: #ECF0F1;
				}
			td .bg-ash, tr .bg-ash, th .bg-ash  {
				background-color:#efefef;
				}
			td .bg-skye,tr .bg-skye, th .bg-skye{
				background-color:skye-blue;
			}
			.pointer{
				cursor:pointer; 
				}
			div.align-right,td.align-right,
				th.align-right{
				text-align:right;
			}
			
			div.align-left,td.align-left,
				th.align-left{
				text-align:left;
			}			
			.bold{font-weight:bolder;}
			.font-5{font-size:5px;}
			.font-6{font-size:6px;}
			.font-7{font-size:7px;}
			.font-8{font-size:8px;}
			.font-9{font-size:9px;}
			.font-10{font-size:10px;}
			.font-11{font-size:11px;}
			.font-12{font-size:12px;}
			.font-13{font-size:13px;}
			.font-14{font-size:14px;}
			.font-15{font-size:15px;}
			.font-16{font-size:16px;}
			.font-17{font-size:17px;}
			.font-18{font-size:18px;}
			.font-19{font-size:19px;}
			.font-20{font-size:20px;}
			
			.white {color:#FFF;}
			.black{color:#000;}
			.green{color:green;}
			.red{color:red;}
			.blue{color:blue;}
			.text-capitalize{text-transform:capitalize;}
			.text-italic{ font-style:italic;}
			.text-uppercase{text-transform:uppercase;}
			.text-lowercase{text-transform:lowercase;}
			
			span .black{ color:#000;}
			span .white{color:#FFF;}
			select > option, select optgroup > option ,option {font-size:14px; line-height:25px; }
			input[type=text]{font-size:16px;}

			table.jambo_table {
				border: 1px solid rgba(221, 221, 221, 0.78);
			}

			table.jambo_table thead {
				background: rgba(52, 73, 94, 0.94);
				color: #ECF0F1;
			}

			table.jambo_table tbody tr:hover td {
				background: rgba(38, 185, 154, 0.07);
				border-top: 1px solid rgba(38, 185, 154, 0.11);
				border-bottom: 1px solid rgba(38, 185, 154, 0.11);
			}

			table.jambo_table tbody tr.selected {
				background: rgba(38, 185, 154, 0.16);
			}

			table.jambo_table tbody tr.selected td {
				border-top: 1px solid rgba(38, 185, 154, 0.40);
				border-bottom: 1px solid rgba(38, 185, 154, 0.40);
			}
			
-			.skyeblue{
				background: rgba(38, 185, 154, 0.07);
				border-top: 1px solid rgba(38, 185, 154, 0.11);
				border-bottom: 1px solid rgba(38, 185, 154, 0.11);
			}
			.white{ color:#FFF; }
			.text-capitalize{ text-transform:capitalize; }
			.text-italics{ text-decoration:italics; }
			.pad-left-5{ padding-left:5px; margin-left:5px;}
			.pad-left-6{ padding-left:6px; margin-left:6px;}
			.pad-left-7{ padding-left:7px; margin-left:7px;}
			.pad-left-8{ padding-left:8px; margin-left:8px;}
			.pad-left-9{ padding-left:9px; margin-left:9px;}
			.pad-left-10{ padding-left:10px; margin-left:10px;}
			.pad-left-11{ padding-left:11px; margin-left:11px;}
			.pad-left-12{ padding-left:12px; margin-left:12px;}
			.pad-left-13{ padding-left:13px; margin-left:13px;}
			.pad-left-14{ padding-left:14px; margin-left:14px;}
			.pad-left-15{ padding-left:15px; margin-left:15px;}

			.pointer{ cursor:pointer;}
			.btn-hide {opacity:0.2;}
			.btn-hide:hover{ opacity:1.0;}
			
			fieldset.scheduler-border {
				border: 1px groove #ddd !important;
				padding: 0 1.4em 1.4em 1.4em !important;
				margin: 0 0 1.5em 0 !important;
				-webkit-box-shadow:  0px 0px 0px 0px #000;
						box-shadow:  0px 0px 0px 0px #000;
			}

			legend.scheduler-border {
				font-size: 1.2em !important;
				font-weight: bold !important;
				text-align: left !important;

			}

			 label.yellow { color:#FF0; }
/**
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
@import "http://fonts.googleapis.com/css?family=Roboto:400,500";**/ 
.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #63B76C; vertical-align: middle; }
.box > .icon:hover > .image { background: #333; }
.box > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box > .icon:hover > .image > i { color: white !important; }
.box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; }
.box > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white; }
.box > .icon > .info > h3.title { font-family: "Roboto",sans-serif !important; font-size: 16px; color: #222; font-weight: 500; }
.box > .icon > .info > p { font-family: "Roboto",sans-serif !important; font-size: 13px; color: #666; line-height: 1.5em; margin: 20px;}
.box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; }
.box > .icon > .info > .more a { font-family: "Roboto",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; }
.box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #63B76C; }
.box .space { height: 30px; }

	.search-box{padding: 10px;border: #F0F0F0 1px solid;}
	
	.form-group .name_list,.form-group .num_list{
		display: none; 	position: absolute;
	z-index: 9;
	}
	
	.form-group .name_list,.form-group .num_list{float:left;list-style:none;margin:0;padding:0;width:250px;}
	.form-group .name_list li,.form-group .num_list li{padding: 2px; background:#FAFAFA;border-bottom:#F0F0F0 1px solid;}
	.form-group .name_list li:hover,.form-group .num_list li:hover{background:#F0F0F0;}

	a.white:hover, .white:hover{color:#FFF;}
	td.td-right { text-align:right; }
	
	.naira {
		content: "/20A6";  /* for html use :  ₦ */
	}
	.highlight {
		background-color: #FFFF88;
	}
	
	tbody.mid-reading  > tr >  td {height:25px; padding:none; margin:none;}
	tr.mid-reading {height:25px; padding:none; margin:none;}
		
	div.shift-down {
		marging-top:0.8em; padding-top:0.8em;
		
	}
		
	/* Progress Bar */
		.progress {
		  position: relative;
		  height: 4px;
		  display: block;
		  width: 100%;
		  background-color: #acece6;
		  border-radius: 2px;
		  background-clip: padding-box;
		  margin: 0.5rem 0 1rem 0;
		  overflow: hidden; }
		  .progress .determinate {
			position: absolute;
			background-color: inherit;
			top: 0;
			bottom: 0;
			background-color: #26a69a;
			transition: width .3s linear; }
		  .progress .indeterminate {
			background-color: #26a69a; }
			.progress .indeterminate:before {
			  content: '';
			  position: absolute;
			  background-color: inherit;
			  top: 0;
			  left: 0;
			  bottom: 0;
			  will-change: left, right;
			  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
					  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
			.progress .indeterminate:after {
			  content: '';
			  position: absolute;
			  background-color: inherit;
			  top: 0;
			  left: 0;
			  bottom: 0;
			  will-change: left, right;
			  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
					  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
			  -webkit-animation-delay: 1.15s;
					  animation-delay: 1.15s; }

		@-webkit-keyframes indeterminate {
		  0% {
			left: -35%;
			right: 100%; }
		  60% {
			left: 100%;
			right: -90%; }
		  100% {
			left: 100%;
			right: -90%; } }
		@keyframes indeterminate {
		  0% {
			left: -35%;
			right: 100%; }
		  60% {
			left: 100%;
			right: -90%; }
		  100% {
			left: 100%;
			right: -90%; } }
		@-webkit-keyframes indeterminate-short {
		  0% {
			left: -200%;
			right: 100%; }
		  60% {
			left: 107%;
			right: -8%; }
		  100% {
			left: 107%;
			right: -8%; } }
		@keyframes indeterminate-short {
		  0% {
			left: -200%;
			right: 100%; }
		  60% {
			left: 107%;
			right: -8%; }
		  100% {
			left: 107%;
			right: -8%; } }
		/** end linear progress-bar **/
		
		
		/** circular progress-bar **/
			$green: #008744;
			$blue: #0057e7;
			$red: #d62d20;
			$yellow: #ffa700;
			$white: #eee;

			 
			body {
			  /** background-color: $white;  **/
			}

			/** demo-specific **/ 
			.showbox {
			  position: absolute;
			  top: 0;
			  bottom: 0;
			  left: 0;
			  right: 0;
			  padding: 5%;
			}
			/** end demo-specific ***/

			.loader {
			  position: relative;
			  margin: 0 auto;
			  width: $width;
			  &:before {
				content: '';
				display: block;
				padding-top: 100%;
			  }
			}

			.circular {
			  animation: rotate 2s linear infinite;
			  height: 100%;
			  transform-origin: center center;
			  width: 100%;
			  position: absolute;
			  top: 0;
			  bottom: 0;
			  left: 0;
			  right: 0;
			  margin: auto;
			}

			.path {
			  stroke-dasharray: 1, 200;
			  stroke-dashoffset: 0;
			  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
			  stroke-linecap: round;
			}

			@keyframes rotate {
			  100% {
				transform: rotate(360deg);
			  }
			}

			@keyframes dash {
			  0% {
				stroke-dasharray: 1, 200;
				stroke-dashoffset: 0;
			  }
			  50% {
				stroke-dasharray: 89, 200;
				stroke-dashoffset: -35px;
			  }
			  100% {
				stroke-dasharray: 89, 200;
				stroke-dashoffset: -124px;
			  }
			}

			@keyframes color {
			  100%,
			  0% {
				stroke: $red;
			  }
			  40% {
				stroke: $blue;
			  }
			  66% {
				stroke: $green;
			  }
			  80%,
			  90% {
				stroke: $yellow;
			  }
			}
			/** how to use circular progress for loading page
			***********************************************************
			<div class="showbox">
				  <div class="loader">
					<svg class="circular" viewBox="25 25 50 50">
					  <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
					</svg>
				  </div>
				</div>
			***********************************************************/
			
			div.no-margin, h3.no-margin,h2.no-margin,h1.no-margin,p.no-margin {
				margin-top:0em; margin-bottom:0em; 
			}
			div.small-margin, h3.small-margin,h2.small-margin,h1.small-margin,p.small-margin {
				margin-top:0.2em; margin-bottom:0.2em; 
			}