/* 

// THIS SITE USES A MINIFIED VERSION OF THIS FILE // 

SJA Official colours
--------------------			-----------------
SJA Official colours			WAB Added colours
--------------------			-----------------
Black		#000000				Grey Med	#999999
White		#FFFFFF				Red Lt		#F5A9A9
Green 100%	#006633				Orange Lt	#FFCC66
Green 80%	#008364				Yellow Lt	#F4FA58
Green 60%	#4C9B81				Green Lt	#BCD7CB (SJA 20%)
Green 40%	#83B6A4
Green 20%	#BCD7CB
Green 10%	#D9E8E1
Grey 20%	#D1D1D1
Grey 10%	#E7E7E7
*/

html { height: 100%; }
img { max-width: 100%; }

.sja-header { 
	margin:5px 0px 0px 0px;
}

/* .loading {
	color:#BDBDBD;
	font-size: 60px;
} */

.hidden-table {
    display: none;
}

p {
	text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
	color: #006633;
	padding:0px 0px 0px 0px;
	margin:5px 0px 5px 0px;
}

h5, h6 {
	font-weight: bold;
}

a {
	font-weight: bold;	
	color: #006633;
}

.alert-primary a {
	color: #FFFFFF !important;
}

a:hover,
a:focus {
	color: #006633;
}

.well-xs {
    padding: 6px;
    border-radius: 3px;
}

.align-center {
	text-align: center;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

.bg-cancelled { background: #D1D1D1 !important; }
.bg-yellow { background: #F4FA58 !important; }
.bg-yellowlt{ background: #FAEBCC !important; } 
.bg-orange { background: #FFCC66 !important; } 
.bg-orangelt { background: #FFD684 !important; } 
.bg-red { background: #F5A9A9 !important; } 
.bg-redlt { background: #F7BABA !important; } 
.bg-greenlt { background: #DFF0D8 !important; } 
.bg-bluelt { background: #D9EDF7 !important; } 
.bg-danger { background: #F2DEDE !important; } 
.bg-warning { background: #FCF8E3 !important; } 
.bg-success { background: #DFF0D8 !important; } 
.bg-info { background: #D9EDF7 !important; }
.required{ background: #FAEBCC }
.badge-danger { background-color: #D9534F; font-weight:bolder; }

/* If table is set to have a hover over effect and a row has a specific color set, change it slightly here to highlight when hovered over */
.hover > tbody > tr.bg-cancelled:hover { background: #DEDEDE !important; }
.hover > tbody > tr.bg-yellow:hover { background: #f7fb8a !important; }
.hover > tbody > tr.bg-yellowlt:hover { background: #fcf4e3 !important; }
.hover > tbody > tr.bg-orange:hover { background: #ffdd99 !important; }
.hover > tbody > tr.bg-orangelt:hover { background: #ffe7b7 !important; }
.hover > tbody > tr.bg-red:hover { background: #fad7d7 !important; }
.hover > tbody > tr.bg-redlt:hover { background: #fad1d1 !important; }
.hover > tbody > tr.bg-greenlt:hover { background: #eef7ea !important; }
.hover > tbody > tr.bg-bluelt:hover { background: #eef7fb !important; }
.hover > tbody > tr.bg-danger:hover { background: #f9f0f0 !important; }
.hover > tbody > tr.bg-warning:hover { background: #fefcf5 !important; }
.hover > tbody > tr.bg-success:hover { background: #eef7ea !important; }
.hover > tbody > tr.bg-info:hover { background: #eef7fb !important; }

.required > .selectize-input { /* Ensures required shows for selectize */
	 background: #FAEBCC !important;
}

.parsley-type, .parsley-required, .parsley-pattern, .parsley-minlength, .parsley-equalto , .parsley-range {
	color:#A94442;
	font-size: 11px;
	line-height:11px;
	margin: 0px 0px 0px;
    padding: 0px;
	text-align:left;
}

input.parsley-error, select.parsley-error, textarea.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE; !important
    border: 1px solid #EED3D7;
}

.boxed {
    border: 1px solid #ddd;
    padding: 5px;
	margin:5px;
}

.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
    padding: 10px;
}

.form-group {
	/* Added to fix select border issues caused by .tab-content */
	padding:1px;
}

 select::-ms-expand {
	   display: none;
	}

textarea {
    resize: none;
}

.nav-tabs {
    margin-bottom: -1px; /* was 0px; */
}

.table-setfont {
	font-size:14px !important;
}

.panel-grn {
  border-color: #008364;
}
.panel-grn > .panel-heading {
  color: #fff;
  background-color: #008364;
  border-color: #008364;
}
.panel-grn > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #008364;
}
.panel-grn > .panel-heading .badge {
  color: #008364;
  background-color: #fff;
}
.panel-grn > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #008364;
}

.btn-grn {
	color: #FFF;
	background-color: #008364;
	border-color: #008364;
}

.btn-grn:hover,
.btn-grn:focus,
.btn-grn.focus,
.btn-grn:active,
.btn-grn.active,
.open > .dropdown-toggle.btn-grn {
  color: #fff;
  background-color: #006633;
  border-color: #006633;
}

.alert-primary {
    color: #FFF;
    background-color: #337AB7;
    border-color: #337AB7;
}

.dash-doughnut {
	width: 140px;
	height: 140px;
}

.dash-line {
	height: 200px;
	padding-right:10px;
	/*Check size specific styles */
}

.glyphicon-grn-dot:before {
    content:"\25cf";
    font-size: 1.5em;
    color: #006633;
}

.glyphicon-grey-dot:before {
    content:"\25cf";
    font-size: 1.5em;
    color: #999999;
}

.glyphicon-blue-dot:before {
    content:"\25cf";
    font-size: 1.5em;
    color: #337AB7;
}

#icon-PDF {
    height: 20px;
    width: 20px;
}

#icon-PDF:hover {
    background-image: url('../images/icons/PDF-Filled.png');
    height: 20px;
    width: 20px;
}

.icon-question {
	height: 20px;
    width: 20px;
	color: #337AB7;
	cursor: pointer; 
	cursor: hand;
}

.snackbar {
    width:100%;
   /* height:20px; */
    height:auto;
	min-height:60px;
    position:fixed;
    left:0px; 
    /* margin-left:-10px; */
	font: 20px arial, sans-serif;
    top:0px;
    padding:15px; 
    text-align:center;
   /* border-radius: 5px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1); */
}

.snackbar-success { background-color: #5cb85c; color: #FFFFFF; }
.snackbar-warning { background-color: #f0ad4e; }
.snackbar-danger { background-color: #d9534f; }
.snackbar-info { background-color: #5bc0de; }
.snackbar-primary { background-color: #428bca; }
.snackbar-grn { background-color: #006633; color: #F0F0F0; }

.modal-header-success, .modal-header-warning, .modal-header-danger, .modal-header-info .modal-header-primary, .modal-header-grn  {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee; 
	-webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}

.modal-header-success h1, .modal-header-warning h1, .modal-header-danger h1, .modal-header-info h1, .modal-header-primary h1 , .modal-header-grn h1 { color:#fff; }

.modal-header-success { background-color: #5cb85c; }
.modal-header-warning { background-color: #f0ad4e; }
.modal-header-danger { background-color: #d9534f; }
.modal-header-info { background-color: #5bc0de; }
.modal-header-primary { background-color: #428bca; }
.modal-header-grn { background-color: #006633; }

.top_username { /* See size specific CSS */ }

.top_rounded { 
	background:#E6E6E6;
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px;
	padding:3px 10px 3px 10px;
}

#tile {
	margin:5px;
	float: left;
	font-family: arial, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #FFFFFF;
	background-repeat: no-repeat;
}

#tile.top {
	background-color: #008364;
	 /* Check size specific styles */
}

#tile.top:hover,
#tile.top:focus,
#tile.top.focus,
#tile.top:active,
#tile.top.active {
  color: #fff;
  background-color: #006633;
  border-color: #006633;
}

#tileCaption.top { 	/* Check size specific styles */ }
#tile.tile_dashboard { 	/* Check size specific styles */ }
#tile.tile_cyclists { 	/* Check size specific styles */ }
#tile.tile_events { 	/* Check size specific styles */ }
#tile.tile_fleet { 	/* Check size specific styles */ }
#tile.tile_procurement { 	/* Check size specific styles */ }
#tile.tile_tasks { 	/* Check size specific styles */ }

/* Side-social-nav (sits alongside the top tiles)
-----------------------------------------------------------------------------*/
.side-social-nav {
	float: left;
	margin:5px;
}

.side-social-nav ul { /* Check size specific styles */ }
.side-social-nav li { /* Check size specific styles */ }
.side-social-nav a { /* Check size specific styles */ }


.side-social-nav_settings {
	background: url('../images/tiles/Settings3-25-bk.png') no-repeat scroll 0% 0% transparent;
	text-indent: -9999px;
	height:25px;
} .side-social-nav_settings:hover { background-image: url('../images/tiles/Settings3-Filled-25-bk.png'); }

.side-social-nav_stock {
	background: url('../images/tiles/Box-25-bk.png') no-repeat scroll 0% 0% transparent;
	text-indent: -9999px;
	height:25px;
} .side-social-nav_stock:hover { background-image: url('../images/tiles/Box-Filled-25-bk.png'); }

.side-social-nav_import {
	background: url('../images/tiles/Import-25-bk.png') no-repeat scroll 0% 0% transparent;
	text-indent: -9999px;
	height:25px;
} .side-social-nav_import:hover { background-image: url('../images/tiles/Import-Filled-25-bk.png'); }

.side-social-nav_profile {
	background: url('../images/tiles/Edit-User-25-bk.png') no-repeat scroll 0% 0% transparent;
	text-indent: -9999px;
	height:25px;
} .side-social-nav_profile:hover { background-image: url('../images/tiles/Edit-User-Filled-25-bk.png'); }

.side-social-nav_blank {
	background: url('../images/tiles/Blank-25.png') no-repeat scroll 0% 0% transparent;
	text-indent: -9999px;
	height:25px;
} .side-social-nav_profile:hover { background-image: url('../images/tiles/Edit-User-Filled-25-bk.png'); }

#DIPSy {
	border:solid thin #999;
	width: 100%;
	height: calc( 100% - 210px );
	min-height: 500px;
} 

.clickable{
    cursor: pointer;   
}



/* Quick Shortcuts box used in admin panel */
.Quick-Shortcuts { text-align: center; margin:auto;} /* Check size specific styles */
.Quick-Shortcuts .btn:not(.btn-block) { width:110px; margin-bottom:10px; }

.tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none
}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-left:.5em
}
.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid
}
.tree li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    color:#369;
    font-weight:700;
    position:relative
}
.tree ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}
.tree ul li:last-child:before {
    background:#fff;
    height:auto;
    top:1em;
    bottom:0
}
.indicator {
    margin-right:5px;
}
.tree li a {
    text-decoration: none;
    color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color:#369;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}

/* Loading spinnner
-----------------------------------------------------------------------------*/

.floatingBarsExt {
	position: fixed;
	display: table-cell;
	vertical-align: middle;
    text-align: center;
	z-index: 999;
	height: 100%;
	width: 100%;
	background: #fff;
	opacity: 0.9;
}

/*.spinternal {
	margin-top: -0.5em;
	position: relative;
	text-align: center;
    top: 50%;
	font:  40px arial, sans-serif;	
	color: #063;
}*/

#floatingBarsG{
	position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
	width:45px;
	height:56px;
	/*margin:auto; */
}

.blockG{
	position:absolute;
	background-color:rgb(255,255,255);
	width:7px;
	height:17px;
	border-radius:6px 6px 0 0;
		-o-border-radius:6px 6px 0 0;
		-ms-border-radius:6px 6px 0 0;
		-webkit-border-radius:6px 6px 0 0;
		-moz-border-radius:6px 6px 0 0;
	transform:scale(0.4);
		-o-transform:scale(0.4);
		-ms-transform:scale(0.4);
		-webkit-transform:scale(0.4);
		-moz-transform:scale(0.4);
	animation-name:fadeG;
		-o-animation-name:fadeG;
		-ms-animation-name:fadeG;
		-webkit-animation-name:fadeG;
		-moz-animation-name:fadeG;
	animation-duration:0.732s;
		-o-animation-duration:0.732s;
		-ms-animation-duration:0.732s;
		-webkit-animation-duration:0.732s;
		-moz-animation-duration:0.732s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#rotateG_01{
	left:0;
	top:20px;
	animation-delay:0.2695s;
		-o-animation-delay:0.2695s;
		-ms-animation-delay:0.2695s;
		-webkit-animation-delay:0.2695s;
		-moz-animation-delay:0.2695s;
	transform:rotate(-90deg);
		-o-transform:rotate(-90deg);
		-ms-transform:rotate(-90deg);
		-webkit-transform:rotate(-90deg);
		-moz-transform:rotate(-90deg);
}

#rotateG_02{
	left:6px;
	top:7px;
	animation-delay:0.366s;
		-o-animation-delay:0.366s;
		-ms-animation-delay:0.366s;
		-webkit-animation-delay:0.366s;
		-moz-animation-delay:0.366s;
	transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
}

#rotateG_03{
	left:19px;
	top:2px;
	animation-delay:0.4525s;
		-o-animation-delay:0.4525s;
		-ms-animation-delay:0.4525s;
		-webkit-animation-delay:0.4525s;
		-moz-animation-delay:0.4525s;
	transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
}

#rotateG_04{
	right:6px;
	top:7px;
	animation-delay:0.549s;
		-o-animation-delay:0.549s;
		-ms-animation-delay:0.549s;
		-webkit-animation-delay:0.549s;
		-moz-animation-delay:0.549s;
	transform:rotate(45deg);
		-o-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
}

#rotateG_05{
	right:0;
	top:20px;
	animation-delay:0.6355s;
		-o-animation-delay:0.6355s;
		-ms-animation-delay:0.6355s;
		-webkit-animation-delay:0.6355s;
		-moz-animation-delay:0.6355s;
	transform:rotate(90deg);
		-o-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
}

#rotateG_06{
	right:6px;
	bottom:5px;
	animation-delay:0.732s;
		-o-animation-delay:0.732s;
		-ms-animation-delay:0.732s;
		-webkit-animation-delay:0.732s;
		-moz-animation-delay:0.732s;
	transform:rotate(135deg);
		-o-transform:rotate(135deg);
		-ms-transform:rotate(135deg);
		-webkit-transform:rotate(135deg);
		-moz-transform:rotate(135deg);
}

#rotateG_07{
	bottom:0;
	left:19px;
	animation-delay:0.8185s;
		-o-animation-delay:0.8185s;
		-ms-animation-delay:0.8185s;
		-webkit-animation-delay:0.8185s;
		-moz-animation-delay:0.8185s;
	transform:rotate(180deg);
		-o-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
}

#rotateG_08{
	left:6px;
	bottom:5px;
	animation-delay:0.905s;
		-o-animation-delay:0.905s;
		-ms-animation-delay:0.905s;
		-webkit-animation-delay:0.905s;
		-moz-animation-delay:0.905s;
	transform:rotate(-135deg);
		-o-transform:rotate(-135deg);
		-ms-transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
		-moz-transform:rotate(-135deg);
}



@keyframes fadeG{
	0%{
		background-color:rgb(0,131,100);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes fadeG{
	0%{
		background-color:rgb(0,131,100);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes fadeG{
	0%{
		background-color:rgb(0,131,100);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes fadeG{
	0%{
		background-color:rgb(0,131,100);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes fadeG{
	0%{
		background-color:rgb(0,131,100);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}


.DupliRed { 
	background: #F7BABA url('images/High Priority-18-red.png') no-repeat right;
}

.DupliOrange {
	background: #FFD684 url('images/High Priority-18-orange.png') no-repeat right;
} 

.DupliYellow {
	background: #f6fb79 url('images/High Priority-18-yellow.png') no-repeat right;
}


/* Footer
-----------------------------------------------------------------------------*/

.clearbottom {
	clear:both;
	padding-bottom:25px;
}

.footer {
	position: fixed;
	z-index: 999;
	bottom:0;
	left:0;
	right:0;
	height: 25px;
	background: #008364;
	padding: 5px 15px 5px 15px;
	font:  12px arial, sans-serif;	
	color: #FFFFFF;
	text-align: center;
}

.footer a {
	font:  12px arial, sans-serif;	
	color: #FFFFFF;
	text-decoration:none;
}

.progress.active.reverse .progress-bar,
.progress-bar.active.reverse{
    -webkit-animation-direction: reverse;
     -moz-animation-direction: reverse;
       -o-animation-direction: reverse;
          animation-direction: reverse;
}