/* CSS following ESL Style Guide */
/* Should be used by every ESL page, with specific page CSS loaded afterwards */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700,900|Roboto+Condensed:300,400,700');
body
{
    font-family: Roboto, sans-serif;
	/* for the navbar */
	padding-top: 65px;
}
#main {
	margin: 0px 0px 0px 250px;  	/* to cater for the sidenav */
	padding: 20px;
}
@media (max-width: 767px) {
	#main {
		margin: 0px;  	/* sidenav hides */
	}
}
.row.no-pad {
    margin-right:0;
    margin-left:0;
}
.row.no-pad > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}
.esl-status-list {
	overflow:hidden;
}
.esl-status-list .label {
	margin-right: 5px;
	margin-bottom: 5px;
}
/* Unknown Mode */
.label-255 { background-color: #d9534f; }
/* External Switch Mode */
.label-15 { background-color: #b8a4a0; }
/* Magnetometer Mode */
.label-14 { background-color: #807b70; }
.label-13 { background-color: #938c80; }
.label-12 { background-color: #a59e90; }
.label-11 { background-color: #b8b0a0; }
/* Hall Effect Mode */
.label-10 { background-color: #707580; }
.label-9  { background-color: #808693; }
.label-8  { background-color: #9097a5; }
.label-7  { background-color: #a0a8b8; }
/* Reed Switch Mode */
.label-6  { background-color: #b9c6b3; }
.label-5  { background-color: #b0bfa9; }
.label-4  { background-color: #a8b8a0; }
/* Vibration Mode */
.label-0  { background-color: #b0a0b8; }

/*--- Modal Images ---*/
/* The Modal (background) */
.modal-image {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-image-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
.modal-image-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-image-content, .modal-image-caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}
/* The Close Button */
.modal-image-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.modal-image-close:hover,
.modal-image-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-image-content {
        width: 100%;
    }
}
/*--- end Modal Images ---*/
/*--- Map Fullscreen from http://brunob.github.io/leaflet.fullscreen/ ---*/
/* one selector per rule as explained here : http://www.sitepoint.com/html5-full-screen-api/ */
#projectmap:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
#projectmap:-ms-fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; }
#projectmap:full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
#projectmap:fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; }
.leaflet-pseudo-fullscreen { position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999; }
.leaflet-control-zoom-fullscreen { background-image: url(../images/fullscreen.png); }
.leaflet-control-zoom-fullscreen:hover { background-image: url(../images/fullscreen_black.png); }
.leaflet-retina .leaflet-control-zoom-fullscreen { background-image: url(../images/fullscreen-2x.png); background-size: 26px 26px; }
.leaflet-retina:hover .leaflet-control-zoom-fullscreen:hover { background-image: url(../images/fullscreen-2x_black.png); background-size: 26px 26px; }
/*--- End Map Fullscreen from http://brunob.github.io/leaflet.fullscreen/ ---*/
mark {
    background-color: none;
    font-weight: bold;
    color: #AD2329;
    padding: 0;
}
div[class*='other'],
span[class*='other'] {
	background-color: #777777;
}
.img-app-esl {
	margin: auto;
	max-height: 150px;
}
.form-group.required .label-esl:after {
	content: "*";
	color: #AD2329;
}
/*--- ESL Style Guide Colors ---*/
.esl-red {
	color: #AD2329;
}
.esl-white {
	color: #FFFFFF
}
.esl-no-border {
	border: none !important;
}
.esl-line-height-normal {
	line-height: normal !important;
}
.esl-height-30 {
	height: 30px;
}
.esl-line-height-30 {
	line-height: 30px;
}
.esl-m-r-10 {
	margin-right: 10px;
}
.loading-chart-span {
    display: inline-block;
    font-family: Roboto;
    font-size: 14px;
    margin-top: 30px;
    padding: 14px;
}
.blinkon {
	background-color: #AD2329;
	color: #FFFFFF !important;
}
div.progress {
	margin-bottom: 0px;
}
.progress-bar-esl {
	background-color: #AD2329;
	border: 1px solid #FFFFFF;
}
.panel {
	margin-bottom: 0px;
}
.project-logo {
    height: 100px;
    margin: auto;
    font-family: Roboto;
    font-size: 36px;
    font-weight: 700;
    margin-right: 10px;
    float: left;
}
svg.project-logo {
    font-family: Roboto;
    font-size: 18px;
    font-weight: 700;
    height : 100px;
    width : 100px;
}
.project-title {
    text-align: left;
}
.project-subtitle {
    text-align: center;
}
@media (max-width: 767px) {
	.project-logo {
		max-height: 50px;
        margin: auto;
        float: none;
    }
    svg.project-logo {
        height: 50px;
        width: 100%;
    }
    .project-title {
        float: none;
		text-align: center;
	}
    .project-subtitle {
        float: none;
    }
}
label {
	font-family: Roboto;
	font-size: 15px;
	color: #777777;
}
.form-inline > * {
	margin: 5px 7px;
}
.label-esl {
	margin-right: 10px;
}
@media (max-width: 767px) {
	.label-esl {
		margin-right: 0px;
		text-align: center;
		width: 100%;
	}
}
.esl-nav-tabs-popup > li > a,
.esl-nav-tabs-popup > li.active > a {
	background-color: #3C3D3C !important;
	padding: 5px;
}
.esl-nav-tabs-popup > li > a {
	border: none !important;
	color: #A3A3A3;
}
.esl-nav-tabs-popup > li.active > a,
.esl-nav-tabs-popup > li.active > a:hover,
.esl-nav-tabs-popup > li.active > a:focus {
	color: #FFFFFF;
}
.esl-nav-tabs-popup > li.active > a {
	font-weight: 700;
}
.esl-nav-tabs-popup .tab-pane,
.esl-nav-tabs-popup .tab-pane.active {
	background-color: #3C3D3C !important;
	padding: 5px;
}
/*-- Dots -- */
.dot {
    border: 2px solid white;
    border-radius: 50%;
    display: inline-block;
    height: 15px;
    width: 15px;
}
.green {
    background-color: #78bd20;
}
.yellow {
    background-color: #f08c32;
}
.red {
    background-color: #dc231f;
}
.grey {
    background-color: #808080;
}
/*--- Help CSS ---*/
.jumptarget {
	/* to adjust for the navbar padding-top above */
	padding-top: 65px;
	margin-top: -65px;
}
#gotoTopBtn {
    display: none; 			/* Hidden by default */
    position: fixed; 		/* Fixed/sticky position */
    bottom: 20px; 			/* Place the button at the bottom of the page */
    right: 100px; 			/* Place the button 100px from the right */
    z-index: 9999; 			/* Make sure it does not overlap */
    border: none; 			/* Remove borders */
    outline: none; 			/* Remove outline */
    cursor: pointer; 		/* Add a mouse pointer on hover */
    padding: 15px;			/* Some padding */
    border-radius: 10px; 	/* Rounded corners */
}
#gotoTopBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}
.vimeo-esl {
	width: 600px;
	height: 338px;
}
@media (max-width: 767px) {
	.vimeo-esl {
		width: 300px;
		height: 169px;
	}
}
.powerpoint-esl {
	height: 565px;
	width: 962px;
}
@media (max-width: 767px) {
	.powerpoint-esl {
		width: 610px;
		height: 367px;
	}
}
.esl-app-dark {
	background-color: #3C3D3C;
}
.esl-app-dark:hover {
	background-color: #202020;
}
.esl-app-light {
	background-color: #EDEBE8;
}
.esl-app-light:hover {
	background-color: #A3A3A3;
}
/*--- End Help CSS ---*/
/*--- Floating Project Tool Buttons ---*/
.floating-tools {
    position: fixed; 		/* Fixed/sticky position */
    top: 65px; 				/* Place the button at the top of the page */
    z-index: 1001; 			/* Make sure it does not overlap */
}
.floating-tools-right {
	right: 50px;
}
.floating-tools-left {
	left: 300px;
}
.floating-tools .btn {
	outline: none; 			/* Remove outline */
    cursor: pointer; 		/* Add a mouse pointer on hover */
    padding: 15px;			/* Some padding */
	border-radius: 50% !important; 	/* Round */
	box-shadow: 0px 3px 5px 0px #777777;
	margin-left: 2px !important;
	margin-right: 2px !important;
	height: 50px;
	width: 50px;
}
.floating-tools-left .tooltip.bottom,
.floating-tools-right .tooltip.bottom {
	margin-top: 10px !important;
}
/*.floating-tools .btn-group-vertical {
	margin-right: 4px !important;
}*/
.btn-group-vertical .btn {
	margin-bottom: 4px !important;
	transition: 0.5s;
}
.btn-group-vertical .tooltip.left {
	margin-right: 70px !important;
}
@media (max-width: 767px) {
	.floating-tools-right {
		right: 50px;
	}
	.floating-tools-left {
		left: 50px;
	}
}
/*--- End Floating Project Tool Buttons ---*/
/*--- D3 Force Directed Graph CSS ---*/
.links line {
	stroke: #999;
	stroke-opacity: 0.6;
}
.chart-container {
	width: 100%;
	height: 600px;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
    .chart-container {
		width: 100%;
		height: 250px;
	}
}
.tooltip-inner {
	background-color: #3C3D3C;
}
.tooltip.top .tooltip-arrow {
	bottom: -5px;
	border-top-color: #3C3D3C;
}
.tooltip.bottom .tooltip-arrow {
	top: -5px;
	border-bottom-color: #3C3D3C;
}
.tooltip.left .tooltip-arrow {
	right: -5px;
	border-left-color: #3C3D3C;
}
.tooltip {
	position: absolute;
	text-align: left;
	padding: 5px;
	font-family: Roboto;
	font-size: 16px;
	border-radius: 5px;
	pointer-events: none;
	background: transparent;
	color: #FFFFFF;
	z-index: 1050;
}
/*--- end D3 Force Directed Graph CSS ---*/
/*--- popover overrides ---*/
.popover-title-map {
	padding: 0px !important;
}
.leaflet-popup-content-wrapper .popover-title {
	padding: 4px;
}
.popover.left .arrow:after {
	border-left-color: #3C3D3C;
}
.popover.right .arrow:after {
	border-right-color: #3C3D3C;
}
.popover.bottom .arrow:after {
	border-bottom-color: #3C3D3C;
}
.popover.top .arrow:after {
	border-top-color: #3C3D3C;
}
.tooltip,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.popover,
.popover-title {
	font-family: Roboto;
	font-size: 13px;
	background-color: #3C3D3C;
	border: 1px solid #3C3D3C;
	color: #FFFFFF;
}
.popover-content .list-group,
.popover-content .list-group-item,
.popover-content .list-group-item .badge,
.popover-content .list-group-item.active,
.popover-content .list-group-item.active:hover,
.popover-content .list-group-item.active .badge {
	font-size: 12px;
}
.popover-content .list-group-item .badge {
	padding: 2px;
}
/*--- custom ESL CSS class ---*/
.space-below-20 {
	margin-bottom: 20px;
}
.space-above-20 {
	margin-top: 20px;
}
.green {
	color: #11D92C;
	font-weight: 700;
}
.red {
	color: #ff0000;
	font-weight: 700;
}
.popover-link {
	font-family: Roboto;
}
.well-esl {
	background-color: #EDEBE8;
	border-color: #FFFFFF;
	margin-bottom: 0px;
	box-shadow: none;
}
.well-esl-dark {
	background-color: #777777;
	border-color: #777777;
	color: #FFFFFF;
	margin-bottom: 0px;
}
@media screen and (max-width: 767px) {
	.table-responsive {
		border: none;
	}
}
/* --- for LOGIN and CRUD pages --- */
button.btn-login,
input.btn-login {
	font-family: Roboto;
	font-size: 16px;
	line-height: 16px;
	color: #FFFFFF;
	text-transform: uppercase;
	background: #AD2329;
	border: 2px solid #AD2329;
	border-radius: 5px;
	padding: 15px 20px 15px 20px;
	transition: all .2s;
}
button.btn-login:hover,
button.btn-login:focus,
input.btn-login:hover,
input.btn-login:focus {
	background: #600A0E;
	border: 2px solid #600A0E;
	padding: 15px 20px 15px 20px;
}
/* --- for LOGIN and CRUD pages --- */
/* --- ESL dropdown --- */
.dropdown-menu > .active > a {
	background-color: #777777;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > .active > a:hover {
	background-color: #A3A3A3;
}
/* --- end ESL dropdown --- */
/* --- ESL Buttons --- */
.dataTables_wrapper {
	background-color: #777777 !important;
	border-radius: 5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	background: #EDEBE8;
	border: 1px solid #EDEBE8;
	font-family: Roboto;
	font-size: 14px;
	color: #777777 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: #A3A3A3;
	border: 1px solid #A3A3A3;
	color: #3C3D3C !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: #AD2329;
	border: 1px solid #AD2329;
	font-family: Roboto;
	font-size: 14px;
	color: #FFFFFF !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: #600A0E;
	border: 1px solid #600A0E;
	color: #FFFFFF !important;
}
.btn-esl-pri {
	font-family: Roboto;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 14px;
	text-transform: uppercase;
	background: #AD2329;
	border: 2px solid #AD2329;
	border-radius: 5px;
	transition: all .2s;
}
.btn-esl-pri:hover,
.btn-esl-pri:focus {
	background: #600A0E;
	border: 2px solid #600A0E;
	color: #FFFFFF;
}
.btn-esl-sec {
	font-family: Roboto;
	font-size: 14px;
	color: #777777;
	line-height: 14px;
	text-transform: uppercase;
	background: transparent;
	border: 2px solid #777777;
	border-radius: 5px;
	transition: all .2s;
}
.btn-esl-sec:hover,
.btn-esl-sec:focus {
	color: #FFFFFF;
	background: #777777;
	border: 2px solid #777777;
}
.list-group-item.active > .badge,
.btn-esl-ter {
	font-family: Roboto;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 14px;
	text-transform: uppercase;
	background: #26ADF9;
	border: 2px solid #26ADF9;
	border-radius: 5px;
	transition: all .2s;
}
.list-group-item.active > .badge:hover,
.btn-esl-ter:hover,
.btn-esl-ter:focus {
	background: #0C527A;
	border: 2px solid #0C527A;
	color: #FFFFFF;
}
.btn-esl-icon {
	padding: 3px 5px 3px 5px;
}
.btn-esl-small {
	font-size: 10px;
	line-height: 10px;
	padding: 3px 6px;
}
/* --- end ESL Buttons --- */
/* --- ESL Nav Pills --- */
.nav-pills-esl > li > a {
	background-color: #EDEBE8;
	border: 1px solid #FFFFFF;
	font-family: Roboto;
	font-size: 16px;
	font-weight: 500;
	color: #777777;
}
.nav-pills-esl > li > a:hover {
	background-color: #A3A3A3;
	color: #3C3D3C;
}
.nav-pills-esl > li.active > a,
.nav-pills-esl > li.active > a:focus {
	background-color: #AD2329;
	color: #FFFFFF;
}
.nav-pills-esl > li.active > a:hover {
	background-color: #600A0E;
	color: #FFFFFF;
}
.tab-pane.active {
	background-color: #FFFFFF;
}
/* --- end ESL Nav Pills --- */
/* --- ESL Icons --- */
div.icon-vibration {
	background: url(../images/vibration.svg) no-repeat center;
	background-size: contain;
	height: 15px;
	width: 15px;
	margin: 0;
	padding: 0;
}
/* --- end ESL Icons --- */
/* --- ESL list-group --- */
.list-group-item {
	font-family: Roboto;
}
.list-group-item.active,
.list-group-item.active:hover {
	background-color: #777777;
	border-color: #777777;
	color: white;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 500;
}
/* --- end ESL list-group --- */
/* --- Typography --- */
h1, h1 a {
	font-family: Roboto Condensed, sans-serif;
	font-size: 36px;
	font-weight: 700;
	color: #AD2329;
	line-height: 1.2;
	text-transform: uppercase;
}
@media (max-width: 767px) {
	h1, h1 a {
		font-size: 27px;
	}
}
h2, h2 a {
	font-family: Roboto Condensed, sans-serif;
	font-size: 32px;
	color: #AD2329;
	line-height: 1.2;
}
@media (max-width: 767px) {
	h2, h2 a {
		font-size: 24px;
	}
}
h3, h3 a {
	font-family: Roboto Condensed, sans-serif;
	font-size: 28px;
	color: #AD2329;
	line-height: 1.2;
}
@media (max-width: 767px) {
	h3, h4 a {
		font-size: 21px;
	}
}
h4, h4 a {
	color: #AD2329;
	font-family: Roboto Condensed, sans-serif;
	font-size: 24px;
	line-height: 1.2;
}
@media (max-width: 767px) {
	h4, h4 a {
		font-size: 18px;
	}
}
subtitle {
	color: #A3A3A3;
	font-family: Roboto;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.25;
}
p, p.large, p.small {
	color: #777777;
	font-family: Roboto;
	line-height: 1.4;
}
.large,
p.large {
	font-size: 18px;
}
p {
	font-size: 15px;
}
p.small {
	font-size: 12px;
}
/* --- end Typography --- */
/* --- ESL Table --- */
.child-row-esl .row {
	margin: 0px;
	padding-bottom: 5px;
}
tr.child-row-esl,
tr.child-row-esl td {
	border-top: none !important;
}
tr.child-row-esl td {
	padding: 0px !important;
}
caption > .well {
	border: none;
	box-shadow: none;
	font-family: Roboto;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: -5px;
	margin-top: -8px;
}
.table-esl img {
	height: 20px;
	width: 20px;
}
.table-esl caption > .well,
.table-esl th {
	background-color: #777777;
	color: white;
	font-size: 14px;
}
.table-esl tr {
	background-color: #FFFFFF;
	border-top: 1px solid #C8CBCE;
}
.table-esl td {
	color: #3C3D3C;
	font-size: 14px;
}
.table-esl .tr-drill {
	cursor: pointer;
}
.table-esl tr:hover {
	background-color: #C8CBCE;
}
.table-esl thead input {
	color: #3C3D3C;
	height: 30px;
	margin-bottom: 0px;
	padding: 5px;
	width: 100%;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter {
	font-family: Roboto;
	font-size: 14px;
	background-color: #777777;
	color: #FFFFFF;
	padding: 5px;
}
.dataTables_wrapper .dataTables_filter label {
	color: #FFFFFF;
}
.dataTables_wrapper .dataTables_filter input {
	color: #777777;
}
.dataTables_wrapper .dataTables_paginate {
	background-color: #EDEBE8;
	border-radius: 2px;
	color: #777777;
	padding: 0px;
}
.esl_header {
	background-color: #777777;
	color: #FFFFFF;
	overflow: auto;
	margin-bottom: 3px;
}
table.dataTable thead th {
	border-bottom: none;
}
table.dataTable.no-footer {
	border-bottom: 1px solid #777777;
}
/* --- end ESL Table --- */
/* --- Navbar ESL --- */
/* for in page navbar */
.navbar-header-esl {
	background-color: #EDEBE8;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	margin: 0px !important;
}
.navbar-collapse-esl {
	margin-left: -15px !important;
	margin-right: -15px !important;
}
.navbar-toggle-esl {
	border: 1px solid #AD2329;
	background-color: #AD2329;
	color: #A3A3A3;
}
.navbar-toggle-esl:hover {
	border: 1px solid #600A0E;
	background: #600A0E;
	color: #FFFFFF;
}
.navbar-toggle-esl .icon-bar {
	border: 1px solid #A3A3A3;
}
/* end for in page navbar */
.navbar-default {
	background-color: #AD2329;
	border-color: #FFFFFF;
	z-index: 1049;
}
/* Title */
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    background-color: #3C3D3C;
}
.navbar-brand {
	padding: 0px;
	border-right: 1px solid #FFFFFF;
}
.navbar-brand > img {
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
    width: auto;
}
/* Link */
.navbar-nav {
	background-color: #AD2329;
	color: #FFFFFF;
	font-family: Roboto;
	font-size: 15px;
}
.navbar-default .navbar-nav > li > a {
    color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: #A3A3A3;
	color: #3C3D3C;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #FFFFFF;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #3C3D3C;
    background-color: #A3A3A3;
}
.navbar-right {
	background-color: #AD2329;
}
.navbar-right .open .dropdown-menu {
	background-color: #EDEBE8;
	color: #777777;
}
.navbar-right .dropdown-menu > li a:hover,
.navbar-right .open .dropdown-menu > li > a:hover {
	background-color: #A3A3A3;
	color: #3C3D3C;
}
.dropdown-menu, .dropdown-menu > li a,
.navbar-right .dropdown-menu {
	background-color: #EDEBE8;
	font-family: Roboto;
	font-size: 15px;
	color: #777777;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
	ul.nav.navbar-nav {
		margin-top: 0;
		margin-bottom: 0;
	}
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #3C3D3C;
    }
}

@media (max-width: 767px) {
	.navbar-nav .open .dropdown-menu {
		background-color: #EDEBE8;
	}
	.navbar-default .navbar-nav .open .dropdown-menu>.active > a,
	.navbar-default .navbar-nav .open .dropdown-menu>.active > a:focus,
	.navbar-default .navbar-nav .open .dropdown-menu>.active > a:hover {
		background-color: #A3A3A3;
	}
}
/*--- SIDEBAR --- */
/* button to show/hide sidebar */
.navbar-btn,
.navbar-btn:active,
.navbar-btn:hover,
.navbar-btn:focus {
    background-color: #AD2329;
    border: none;
    color: #FFFFFF;
    font-family: Roboto;
    font-size: 30px;
	margin: 2px 0px 0px 10px;
	outline: 0;
	padding: 2px;
	outline-style: none;
	-moz-outline-style: none;
}
/* side navigation menu */
.sidenav {
    background-color: #3C3D3C;
    height: 100%;               /* 100% Full-height */
    left: 0;
    overflow-x: hidden;         /* Disable horizontal scroll */
    padding-top: 50px;          /* Place content 50px from the top */
    position: fixed;            /* Stay in place */
	top: 0;
    transition: 0.5s;           /* 0.5 second transition effect to slide in the sidenav */
    width: 0; 					/* chnage using javascript */
    z-index: 1048;                 /* Stay on top */
}
/* navigation menu links */
.sidenav a,
.sidenav span {
	display: block;
	text-decoration: none;
    transition: 0.3s
}
.sidenav-item .badge {
	background: #26ADF9;
	border: 2px solid #26ADF9;
	border-radius: 5px;
	color: #0C527A;
	display: inline !important;
	font-family: Roboto;
	font-size: 10px;
}
.sidenav-title {
    background: #202020;
    border-top: 2px solid #777777;
    box-shadow: inset 0px -1px 0px 0px #777777;
    color: #A3A3A3;
    font-family: Roboto Condensed, sans-serif;
    font-size: 13px;
	font-weight: 700;
	overflow-x: hidden;
    padding: 8px 8px 8px 16px;
	text-transform: uppercase;
	white-space: nowrap;
}
.sidenav-panel {
    border: none;
    border-radius: 0px;
	display: none;
}
.sidenav-item {
    background-color: #3C3D3C;
    border-bottom: 1px solid #777777;
    border-right: 5px solid #777777;
    color: #FFFFFF;
    font-family: Roboto;
	font-size: 12px;
	overflow-x: hidden;
    padding: 8px 8px 8px 16px;
	text-decoration: none;
	white-space: nowrap;
}
.sidenav-input {
    border: none;
    font-family: Roboto;
    font-size: 12px;
    height: 33px !important;
    line-height: 14px !important;
    padding: 0px 10px !important;
}
.sidebar-item-input {
    padding-left: 20px !important;
}
.sidenav-item.active {
	background-color: #777777;

}
.sidenav-item:focus {
    color: #FFFFFF;
}
.sidenav-item:hover {
    background: #A3A3A3;
    color: #3C3D3C;
}
.accordion {
    transition: 0.4s;
}
.sidenav-width {
	width: 250px;
}
@media (max-width: 767px) {
	.sidenav {
		top: 40px;
	}
	.sidenav-width {
		width: 100%;
	}
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav { padding-top: 15px; }
    .sidenav a { font-size: 18px; }
}
/*--- end SIDEBAR --- */
/* -- custom checkboxes --- */
.checkbox label:after {
	content: '';
	display: table;
	clear: both;
}
.checkbox .cr {
	position: relative;
	display: inline-block;
	border: 1px solid #A3A3A3;
	border-radius: .25em;
	width: 2em;
	height: 2em;
	margin-right: .5em;
	vertical-align: middle;
}

.checkbox .cr .cr-icon {
	position: absolute;
	font-size: 1em;
	line-height: 0;
	top: 50%;
	left: 20%;
}

.checkbox label input[type="checkbox"] {
	display: none;
}

.checkbox label input[type="checkbox"]+.cr>.cr-icon {
	opacity: 0;
}

.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
	opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled+.cr {
	opacity: .5;
}
/*--- end custom checkboxes ---*/
/*--- PRINTING CSS ---*/
@media print {

	#main,
	.container-fluid {
		margin: 0px !important;
		padding: 0px !important;
	}
	th,
	td {
		font-size: 10px !important;
	}
	/*#project-header-title {
		text-align: center !important;
	}*/
	/* from https://gist.github.com/donnierayjones/6fd9802d992b2d8d6cfd */
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
	float: left;
	}
	.col-sm-12 {
	width: 100%;
	}
	.col-sm-11 {
	width: 91.66666667%;
	}
	.col-sm-10 {
	width: 83.33333333%;
	}
	.col-sm-9 {
	width: 75%;
	}
	.col-sm-8 {
	width: 66.66666667%;
	}
	.col-sm-7 {
	width: 58.33333333%;
	}
	.col-sm-6 {
	width: 50%;
	}
	.col-sm-5 {
	width: 41.66666667%;
	}
	.col-sm-4 {
	width: 33.33333333%;
	}
	.col-sm-3 {
	width: 25%;
	}
	.col-sm-2 {
	width: 16.66666667%;
	}
	.col-sm-1 {
	width: 8.33333333%;
	}
	.col-sm-pull-12 {
	right: 100%;
	}
	.col-sm-pull-11 {
	right: 91.66666667%;
	}
	.col-sm-pull-10 {
	right: 83.33333333%;
	}
	.col-sm-pull-9 {
	right: 75%;
	}
	.col-sm-pull-8 {
	right: 66.66666667%;
	}
	.col-sm-pull-7 {
	right: 58.33333333%;
	}
	.col-sm-pull-6 {
	right: 50%;
	}
	.col-sm-pull-5 {
	right: 41.66666667%;
	}
	.col-sm-pull-4 {
	right: 33.33333333%;
	}
	.col-sm-pull-3 {
	right: 25%;
	}
	.col-sm-pull-2 {
	right: 16.66666667%;
	}
	.col-sm-pull-1 {
	right: 8.33333333%;
	}
	.col-sm-pull-0 {
	right: auto;
	}
	.col-sm-push-12 {
	left: 100%;
	}
	.col-sm-push-11 {
	left: 91.66666667%;
	}
	.col-sm-push-10 {
	left: 83.33333333%;
	}
	.col-sm-push-9 {
	left: 75%;
	}
	.col-sm-push-8 {
	left: 66.66666667%;
	}
	.col-sm-push-7 {
	left: 58.33333333%;
	}
	.col-sm-push-6 {
	left: 50%;
	}
	.col-sm-push-5 {
	left: 41.66666667%;
	}
	.col-sm-push-4 {
	left: 33.33333333%;
	}
	.col-sm-push-3 {
	left: 25%;
	}
	.col-sm-push-2 {
	left: 16.66666667%;
	}
	.col-sm-push-1 {
	left: 8.33333333%;
	}
	.col-sm-push-0 {
	left: auto;
	}
	.col-sm-offset-12 {
	margin-left: 100%;
	}
	.col-sm-offset-11 {
	margin-left: 91.66666667%;
	}
	.col-sm-offset-10 {
	margin-left: 83.33333333%;
	}
	.col-sm-offset-9 {
	margin-left: 75%;
	}
	.col-sm-offset-8 {
	margin-left: 66.66666667%;
	}
	.col-sm-offset-7 {
	margin-left: 58.33333333%;
	}
	.col-sm-offset-6 {
	margin-left: 50%;
	}
	.col-sm-offset-5 {
	margin-left: 41.66666667%;
	}
	.col-sm-offset-4 {
	margin-left: 33.33333333%;
	}
	.col-sm-offset-3 {
	margin-left: 25%;
	}
	.col-sm-offset-2 {
	margin-left: 16.66666667%;
	}
	.col-sm-offset-1 {
	margin-left: 8.33333333%;
	}
	.col-sm-offset-0 {
	margin-left: 0%;
	}
	.visible-xs {
	display: none !important;
	}
	.hidden-xs {
	display: block !important;
	}
	table.hidden-xs {
	display: table;
	}
	tr.hidden-xs {
	display: table-row !important;
	}
	th.hidden-xs,
	td.hidden-xs {
	display: table-cell !important;
	}
	.hidden-xs.hidden-print {
	display: none !important;
	}
	.hidden-sm {
	display: none !important;
	}
	.visible-sm {
	display: block !important;
	}
	table.visible-sm {
	display: table;
	}
	tr.visible-sm {
	display: table-row !important;
	}
	th.visible-sm,
	td.visible-sm {
	display: table-cell !important;
	}
}
/*--- END PRINTING CSS ---*/
/*--- AJAX Loading CSS --- */
/* from https://stackoverflow.com/questions/1964839/how-can-i-create-a-please-wait-loading-animation-using-jquery */
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.waiting {
	display:    none;
	position:   fixed;
	z-index:    1051;
	top:        0;
	left:       0;
	height:     100%;
	width:      100%;
	background: rgba( 255, 255, 255, .8 )
				url(../images/loading.gif)
				50% 50%
				no-repeat;
}
/* When the body has the loading class, we turn the scrollbar off with overflow:hidden */
body.loading {
	overflow: hidden;
}
/* Anytime the body has the loading class, our modal element will be visible */
body.loading .waiting {
	display: block;
}
/*--- End AJAX Loading CSS --- */