::-moz-selection { background: rgba(0,0,0,0.2); }
::selection { background: rgba(0,0,0,0.2); }

/*body {
  background: white;
  background-size: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  color: #053150;
}
*/

.button {
  padding: 0.5em;
  color: #fff;
  border: 1px solid rgba(0,0,0,0.2);
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}




/* dev/uat env */

body.env-dev {
  background: url('../images/env-dev.jpg') repeat-x;
  background-attachment: fixed;
}
body.env-uat {
  background: url('../images/env-uat.jpg') repeat-x;
  background-attachment: fixed;
}
#header-wrapper .box-sizing, #qg-coa {
  background: none;
}
#header-wrapper .box-sizing .max-width {
  background: rgba(0,0,0,.04);
}

/* ------------------ */
/*  ICTDB front page  */
/* ------------------ */
#content-container .article .box-sizing .border {
margin-left: 1em !important;
margin-right: 1em !important;
}


#ictdb .actions {
  margin: 1em 0;
  clear: left;
  float: left; width: 100%;
}
#ictdb .actions ul {
  margin: 1em 0;
  padding: 0;
}
#ictdb h2 {
    margin: 0.2em 0 0 0;
}

#overview-status {
  width: 48%; float:inherit; padding-right: 2%;
}
#overview-expenditure {
  width: 48%; float: left; padding-left: 2%;                                
}
#ictdb.mobile #overview-status, #ictdb.mobile #overview-expenditure {
  padding: 0;                               
}
#overview-status h3, #overview-expenditure h3 {
  margin: 0 0 0.9em 0;                              
}
#overview-expenditure .graph li span, #overview-status .graph li span {
    text-shadow: 1px 1px 3px rgba(70, 70, 90, 1);
}
#overview-status, #overview-expenditure {
  text-align: center;
}
#ictdb.small #overview-expenditure{ padding-left: 0; }

#overview-status .graph {
  margin: 0;
  padding: 0;
}
#overview-status .graph li, #overview-expenditure .graph li {
  float: left;
  list-style-type: none; 
  display: block;
  text-align: center;
  margin: 0;
  height: 2em;
  font-weight: 900;
  font-size: 1.3em
}
#overview-status .graph span {
  outline: rgba(0,0,0,0.5)solid 1px;  
  padding: 0.4em 0;
}

#overview-status .graph li span {
  padding: .4em 0;
  display: block;
  color: #fff;
}

#overview-status .graph .g1 {
  width: 100%;
  background: #007eb1;
  box-shadow: inset 0 0 0 1000px #007eb1;
  transition: all 1s ease;
}

#overview-status .graph .g2 {
  width: 0%;
  background: rgba(120, 186, 0, 1);
  box-shadow: inset 0 0 0 1000px rgba(120, 186, 0, 1);
  transition: all 1s ease;
}

#overview-status .graph .g3 {
  width: 0%;
  background: #cccc00 ;
  box-shadow: inset 0 0 0 1000px #cccc00 ;
  transition: all 1s ease;
}


#overview-status .graph .g4 {
  width: 0%;
  background:rgba(255, 165, 0, 1);
  box-shadow: inset 0 0 0 1000px rgba(255, 165, 0, 1);
  transition: all 1s ease;
}

#overview-status .graph .g5 {
  width: 0%;
  background: red;
  box-shadow: inset 0 0 0 1000px #red;
  transition: all 1s ease;
}


#overview-status img {
  position: absolute;
  left: 0;
}
#overview-status .gkey .g1, #overview-status .gkey .g2, #overview-status .gkey .g3 {
  position: relative;
  padding-left: 3px;
}


#overview-status .gkey {
    width: 100%;
}
#overview-status .gkey .gtotal {
    font-weight: 900;
    float: right;
}
#overview-status .gkey .gtotal a {
    font-weight: normal;
}
#overview-status .graph a {
    text-decoration: none;
} 
#overview-status .graph .g1 span:hover, #overview-status .graph .g2 span:focus  {
    outline: #9be90e solid 3px;
} 
#overview-status .graph .g2 span:hover, #overview-status .graph .g2 span:focus  {
    outline: #ffd249 solid 3px;
} 
#overview-status .graph .g3 span:hover, #overview-status .graph .g3 span:focus  {
    outline: #ff8181 solid 3px;
} 
#overview-expenditure .graph {
  position: relative;
  float: left;
  background: #959595;
  box-shadow: inset 0 0 0 1000px #959595;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  outline: rgba(0,0,0,0.5)solid 1px;  
}
#overview-expenditure .graph li span {
  position: absolute;
  top: 0;
  margin: .25em .5em;
  color: #fff;
}
#overview-expenditure .graph .g1 span {
  left: 0;
}
#overview-expenditure .graph .g2 span {
  right: 0;
  color: #fff;
}
#overview-expenditure .graph .g1  {
  transition: all 1s ease;
  float: left;
  width: 0%;
  background: #007EB1;
  box-shadow: inset 0 0 0 1000px #007EB1;
  margin: .4em 0;
  height: 1.2em;
  outline: rgba(0,0,0,0.2)solid 1px;  
}
#overview-expenditure a:hover, #overview-expenditure a:focus {
    outline: #00b6ff solid 3px;
    display: block;
    height: 2.6em;
}
#overview-status .gkey, #overview-expenditure .gkey {
  float: left; 
  margin: 0; 
  padding: 0;
}
#overview-status .gkey li, #overview-expenditure .gkey li {
  float: left; 
  margin-top: 0.5em;
  list-style-type: none;
  padding: 0;
  margin-right: 1em;
}
#overview-status .gkey li span, #overview-expenditure .gkey li span {
  float: left; 
  padding: 0;
  margin: 0.25em 0.4em 0 0;
  width: 1em;
  height: 1em;
  outline: rgba(0,0,0,0.5)solid 1px;  
}
#overview-status .gkey .g3 span {
  background: #f00;
  box-shadow: inset 0 0 0 1000px #f00;
}
#overview-status .gkey .g2 span {
  background: #FFA500;
  box-shadow: inset 0 0 0 1000px #FFA500;
}
#overview-status .gkey .g1 span {
  background:#78BA00 ;
  box-shadow: inset 0 0 0 1000px #78BA00;
}

#overview-expenditure .gkey .g1 span {
  background: #007EB1;
  box-shadow: inset 0 0 0 1000px #007EB1;
}
#overview-expenditure .gkey .g2 span {
  background: #959595;
  box-shadow: inset 0 0 0 1000px #959595;
}
.col-chart-label {
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
    padding: 0;
    z-index: 0;
}
#projects {
    width: 100%;
    float: left;

}
#projects h2 {
    float: left;
    top: 0.35em;
    position: relative;
    margin-bottom: 0;
}
#projects p {
    float: left;
    padding: 0 .5em;
    margin-left: .5em;
    border-left: 1px solid #000;
    margin-bottom: 0;
}
#project-status {
    width: 50%;
    float: left;
    padding-right: 0%; 
    clear: left;
}
#containerProjectStatus {
    width: 90%; 
    min-width: 310px; 
    height: 550px; 
    float: left
}
#project-expenditure {
    width: 50%;
    float: left
}
#containerProjectExpenditure {
    width: 90%; 
    min-width: 310px; 
    height: 550px; 
    float: left
}

/* graph tooltip */
.highcharts-tooltip span {
    margin-top: 50px;
}
#highcharts-0 a { /*fix for Cross Gov */
  white-space: nowrap;
}
.ictdbTooltip {
    z-index: 50;
    padding: 0;
    margin: 0;
    height: auto !important;
    min-width:200px;
}
.ictdbTooltip .group, .ictdbTooltip .grouptitle {
    clear: right;
    display: block;
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}
.ictdbTooltip .grouptitle {
    font-weight: 800;
}
.ictdbTooltip .group {
    color: #000;
}
.ictdbTooltip .group.g0 strong{
    color:  #78BA00;
}
.ictdbTooltip .group.g1 strong{
    color: #FFA500;
}
.ictdbTooltip .group.g2 strong{
    color: #f00;
}

/* search */
#feature-search-db {
  width: 48%; min-width: 400px; float: right; margin-top: 0.5em; text-align: right;  
}
#ictdb.small  #feature-search-db {
  width: 100%; min-width: 200px; 
}
#ictdb.small .search-wrapper {
    width: 100% !important;
    min-width: 200px !important;
    border: 1px solid #ccc;
    text-align: right;
    background: white;
}
#ictdb.small .search-wrapper {
    width: 100%;
    border: 1px solid #ccc;
    text-align: right;
}
#ictdb.small .search-wrapper input {
    border: none;
}
#ictdb.small .search-wrapper .submit {
    float: right !important;
}


/* --------------- */
/* Mobile overides */
/* --------------- */
#ictdb.small #overview-status {
    width: 100%; 
    padding-right: 0
}
#ictdb.small #overview-expenditure {
    width: 100%; 
    padding-right: 0                            
}

#ictdb.small #project-status {
    width: 100%;
}
#ictdb.small #containerProjectStatus {
    width: 100%; 
    height: 800px;
}
#ictdb.small #project-expenditure {
    width: 100%;
}
#ictdb.small #containerProjectExpenditure {
    height: 800px; 
}
#ictdb.small .desktop-view, #ictdb .mobile-view {
    display: none;
}
#ictdb.small .mobile-view {
    display: list-item;
}
#ictdb ul {
    margin-left: 4%;
}
#ictdb.small ul {
    margin-left: inherit;
}
#ictdb-search {
    clear: both;
    width: 60%;
    margin: auto;
    min-width: 500px;
    text-align: center;
}

/* ----------------- */
/*  ICTDB data page  */
/* ----------------- */
div.highcharts-axis-labels.highcharts-xaxis-labels span span {
	text-decoration: underline;
	color: #007EB1; 
}
div.highcharts-axis-labels.highcharts-xaxis-labels span span:hover, div.highcharts-axis-labels.highcharts-xaxis-labels span span.active {
	text-decoration: underline;
	color: #007EB1;
	cursor: pointer;
	font-weight: 900;
}
div.highcharts-axis-labels.highcharts-xaxis-labels span span:focus {
	text-decoration: underline;
	color: #00f;
	cursor: pointer;
	font-weight: 900;
}
.highcharts-axis-labels.highcharts-xaxis-labels span {
	z-index: 1 !important;
}
.highcharts-tooltip span  {
	z-index:9999 !important;
	background: #ffffff;
	background: rgba(255,255,255,1);
	padding: 10px !important;
  -webkit-box-shadow: inset 0px 0px 4px 2px rgba(142,150,158,1);
  -moz-box-shadow: inset 0px 0px 4px 2px rgba(142,150,158,1);
  box-shadow: inset 0px 0px 4px 2px rgba(142,150,158,1);
}

/* -- table -- */
table#example tr th a {
  display: inline-block;
  width: 96%;
  padding-right: 2em;
}

.thminwid { 
  width: 6em;  
}

table#example td.details-control { background: url('../images/details_open.png') no-repeat left 17px; padding-left: 35px;}
#ictdb.small table#example td.details-control { padding-left: 25px; background-position: left 9px;}
table#example tr.shown td.details-control{ background: url('../images/details_close.png') no-repeat left 17px; }
table#example tr.shown td.details-title { font-weight: 900;}
table#example tr.shown { border-top: 1px solid;}
table#example tr.detailedInfoRow.open { border-bottom: 1px solid;}
table#example .even td.details-control,tr.shown.even td.details-control { background-color: white; }

table#example tr.summary { cursor: pointer; cursor: hand; }

table#example .detailedInfoRow td {
	padding: 0 1em 0 1em;
}
table#example .detailedInfoRow td p {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
table#example p .button {
    padding-bottom: 0.5em !important;
    padding-top: 0.5em !important;
}
table#example p.actions {
    text-align: right !important;
}
table#example tr.even td.sorting_1 {
    background-color: #cfdde7;
}
table#example tr.odd td.sorting_1 {
    background-color: #c6d3de;
}
table#example tr.odd.shown td {
    background-color: #F3F3F3;
}
table#example tr.even.shown td {
    background-color: #fff;
}
.toggle-sort {
  position: relative;
  width: 100%;
}
#toggleInformation{
  position: absolute;
  right: 0;
  top: .5em;
}


#example th {
	background:url(images/sort_both.png) no-repeat center right #13578b !important;
    padding-right: 0 !important;
	vertical-align: middle !important;
}
#example th.asc {
    background: url(images/sort_asc.png) no-repeat center right #13578b !important;
}
#example th.desc {
    background: url(images/sort_desc.png) no-repeat center right #13578b !important;
}
#example ul {
  margin-left: 0;
}
#example ul ul, #ictdb.small #example .detailedInfoRow td ul ul {
  padding-left: 1.7em;
}
#ictdb.small #example .detailedInfoRow td ul {
  padding-left: 1em;
}

#ictdb.small .desktop-view, #ictdb .small-view {
	display: none;
}
#ictdb.small .small-view {
	display: list-item;
}

#ictdb.small td, #ictdb.small th { 
  padding: 0.5em;
}

#example td {
  white-space: nowrap;
}
#example td.details-title, #example .detailedInfoRow td {
  white-space: normal;
}


.actions li {
  margin: 0 0.5em 0.5em 0 !important;
}
/* -- aside overides -- */ 

#asides li.hide {
    display: none !important;
}
#asides .advancedsearch {
    text-decoration: underline;
    color: #13578b;
    cursor: pointer;
}

#ictdb .aside {
  padding: 1px;
  margin: 0;
}

#ictdb .actions {
  padding: 0;
  margin: 0;
}

#ictdb .aside h2 {
  position: absolute;
  left: -9999em;
}
#ictdb.small .aside h2 {
  position: relative;
  left: 0;
}
#ictdb .aside .actions a {
  color: #fff;
}

#ictdb .aside .actions a:hover {
  color: #000;
}

#asides .status.warn h2 {
  position: absolute;
  left: -9999em;
}
#asides .status.warn ol {
  margin: 0;
  padding: 0;
}
#asides .status.warn li {
  margin: 0;
  display: block;
  min-height: 3em;
}

#asides form fieldset {
	border: none;
	padding: .35em 0;
}
.aside.search {
	background: #f2f7f9;
}
#asides form.hide {
	display: none;
}
#asides form .choices label {
    position: relative;
    top: -4px;
}

#status-list label{
    display: inline-block;
}

#status-list label img{
    pointer-events: none;
}

#asides form .choices img {
    position: relative;
    top: 5px;
    padding-right: 0.5em;
}

/* -- sliders -- */ 
.extra-controls.unminimised {
    position: relative;
    border-top: 1px solid #eee;
    border-bottom: 3px solid #ccc;
    padding: 1em 0 0;
    height: 4em;
    margin: 1em 0 2.5em 0;
}
.extra-controls {
    position: relative;
    border-top: 1px solid #eee;
    border-bottom: 3px solid #eee;
    padding:0;
    height: 0px;
    overflow: hidden;
    margin: 1em 0 0 0;
    clear: both;
}
body #asides form .questions input.inp {
    width: 45%;
    text-align: center;
    padding: 5px;
}
.lbls {
  width: 100%;

}
.lbl {
  float: left;
}
.inp + .inp, .lbl + .lbl {
    float: right;
}
.lbl {
    font-size: 80%;
    padding: .5em 5px;
}
.irs-slider.to:before {
position: absolute;
display: block;
content: "";
top: -120%;
left: -20%;
width: 150%;
height: 256%;
background: rgba(0,0,0,0.0);
}
.range-slider {
  margin: 0 1em 0 0 !important;
}
.lbl.js-from, .lbl.js-to {
  text-decoration: underline;
  color: #13578B;
}

#asides select {
  overflow: auto;
}

#ictdb.dataTable {
  width: 75%;
  float: left;
}

#ictdb.dataTable.small, #ictdb.dataTable.medium {
  width: 100%;
}

#asides.medium {
  width: 100%
}
#content-container .article .box-sizing #asides.small div.border, #content-container .article .box-sizing #asides.medium div.border {
  margin: 0;
}
.search-widget .widget-header .action a.up:before, .search-widget .widget-header .action a:before {
  position: absolute;
  top: 0;
  left: 0;
}
.search-widget .widget-header .action a:hover:before, .search-widget .widget-header .action a.up:hover:before {
  color: #0066cc;
}

#content-container .article .box-sizing .border {
  margin-left: 2.9em;
}

#ictdb.dataTable.small .desktop-view, #ictdb.dataTable .mobile-view {
  display: none;
}

#ictdb.dataTable.small .mobile-view {
  display: list-item;
}
#ictdb.dataTable .projectStatusCol {
  text-align: center;
}
#ictdb.dataTable .projectStatusCol span {
  position: absolute;
  left: -9999em;
}

/* temp pagination */ 
#pagination ul {
  padding: 0;
  text-align: center;
}
#pagination li {
  display: inline-block;
  list-style: none;
  margin: 1em;
}


/* Print overrides -webkit-print-color-adjust: exact; */


@media print {
  #overview-status .print-link-url, #overview-expenditure .print-link-url, #ui-controls, #nav-site, #tools, #feature-search-db, .aside.search, .toggle-sort {
    display: none !important;
  }

  .franchise-index-with-asides h1, #results-table th, #results-table td, #content-container .article .box-sizing .box-sizing, #content-container .article .box-sizing .border {
    left-padding: 0 !important;
    margin-left: 0 !important;
  }
  #ictdb.dataTable {
    width: 100%;
  }

  #overview-expenditure .graph li span, #overview-status .graph li span {
    color: #000 !important;
  }
  #overview-expenditure .graph li span, #overview-status .graph li span {
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 1);
  }

  body #example thead tr th a {
    color: #000000 !important;
  }
  table#example td.details-control{
    padding-left: 0;
  }
  #ictdb.dataTable .projectStatusCol span {
    position: relative;
    left: 0;
    top: -0.2em;
    margin: 0 0 0 .6em;
  }

  #asides {
    clear: left;
  }
}

.vwProj{
	margin:20px 0 0 10px !important;	
}

.circle-blue {
	width: 20px;
	height: 20px;
	background: #007EB1;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	float:left;
	margin-right: 5px;
}

.circle-green {
	width: 20px;
	height: 20px;
	background: rgba(120,186,0,1);
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	float:left;
	margin-right: 5px;
}

.circle-yellow {
	width: 20px;
	height: 20px;
	background: #CCCC00;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	float:left;
	margin-right: 5px;
}

.circle-orange {
	width: 20px;
	height: 20px;
	background: rgba(255,165,0,1);
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	float:left;
	margin-right: 5px;
}

.circle-red {
	width: 20px;
	height: 20px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	float:left;
	margin-right: 5px;
}