/* styles related to searchers in the header area*/

/* redfine this here rather than rebuild the theme less*/
#headerbar {
  padding: 5px 10px;
}

.searcher .form-control {
  height: 24px;
  padding: 2px 9px;
  margin: 2px;
  background-color: #f0f0ff;
  font-size: 12px;
  border-radius: 1px;
}

.searcher label {
  color: white;
  opacity: .9;
  font-size: 12px;
  margin-bottom: 5px;
}

.searcher .btn {
  height: 30px;
  font-size: 12px;
  width: 100%;
  position: relative;
  text-align: right;
}

button.findNow:before {
  position: absolute;
  left: 5px;
  top: 1px;
  text-align: left;
  font-family: FontAwesome;
  font-size: 20px;
  content: "\F002";
}

button.clearSearch:before {
  position: absolute;
  left: 5px;
  top: 1px;
  text-align: left;
  font-family: FontAwesome;
  font-size: 20px;
  content: "\F00D";
}

/* 
  Leaving these old styles around until the current Indicators data grid and historical
  charts are all migrated to a dashboard with our latest architecture
*/

table.indicators {
  table-layout: fixed;
  font-family: Calibri;
  font-size: 10pt;
  border-collapse: collapse;
}

table.indicators .tblhdr {
  background-color: #f3f4f6;
  font-size: 14pt;
  color: #4b4b4b;
  font-weight: bold;
  text-align: left;
  /*border: none;*/
  padding: 0px;
}

table.indicators .tblhdrSub {
  background-color: #f3f4f6;
  font-size: 10pt;
  color: #4b4b4b;
  text-align: left;
  border: none;
  padding: 0px;
}

table.indicators .colhdr {
  background-color: #348bc6;
  background-image: -webkit-linear-gradient(top, #296f9f, #348bc6);
  background-image: -moz-linear-gradient(top, #296f9f, #348bc6);
  background-image: -o-linear-gradient(top, #296f9f, #348bc6);
  background-image: -ms-linear-gradient(top, #296f9f, #348bc6);
  background-image: linear-gradient(top, #296f9f, #348bc6);
  color: #efefef;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
}

table.indicators .colhdr td {
  text-align: left;
}

table.indicators .colhdr td.rowhdr {
  background-color: #f3f4f6;
  /*border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;*/
}

table.indicators .grouphdr {
  background-color: #f3f4f6;
  background-image: -webkit-linear-gradient(top, #a5b2ba, #f3f4f6);
  background-image: -moz-linear-gradient(top, #a5b2ba, #f3f4f6);
  background-image: -o-linear-gradient(top, #a5b2ba, #f3f4f6);
  background-image: -ms-linear-gradient(top, #a5b2ba, #f3f4f6);
  background-image: linear-gradient(top, #a5b2ba, #f3f4f6);
  color: #333;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

table.indicators .alt {
  font-style: italic;
  color: #333;
}

table.indicators .alt-light {
  font-style: italic;
  color: #efefef;
}

table.indicators .rowhdr {
  background-color: #f3f4f6;
  color: #4b4b4b;
  font-weight: normal;
  /*border-top: 1pt solid #f3f4f6;*/
  padding-right: 3px;
}

table.indicators .rowhdr .alt {
  color: #4b4b4b;
  /*border-top: 1pt solid #f3f4f6;*/
}

table.indicators tr {
  min-height: 30px;
}

table.indicators tbody tr:hover {
  background: #dae5f3;
}

table.indicators td {
  padding: 5px;
  text-align: right;
  /*border: 1px solid #D0D0D0;
  border: 1px solid #D0D0D0;
  border: 1px solid #D0D0D0;
  border: 1px solid #D0D0D0;*/
}

/* not applicable ie values that dont have gender breakdown*/
table.indicators .na {
  /* just leave blank*/
  /*background-color: #D0D0D0;*/
}

  /* section boundary */
table.indicators .sec {
  /*border-right: 1px solid #D0D0D0;*/
  /*font-size:12pt;*/
}

table.indicators .t {
  font-weight: bolder
}
table.kpigrid {
  table-layout: fixed;
  font-family: Calibri;
  font-size: 11pt;
}

table.kpigrid .colhdr {
  background-color: aqua;
}

table.kpigrid .colhdr.current {
  background-color: blue;
}

table.kpigrid .rowhdr {
  background-color: aqua;
}

table.kpigrid .colm {
  background-color: blanchedalmond;
}

table.kpigrid input {
  width: 40px;
  border: none;
  padding: 3px;
  background-color: inherit;
  text-align: right;
}

table.kpigrid .totg {
  text-align: right;
  color: gray;
}

table.kpigrid .tot {
  text-align: right;
  color: gray;
}

table.kpigrid input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

rect.enrol {
  fill: #69c;
  opacity: 0.5;
}

rect.enrolny {
  fill: #69c;
}

rect.repeatny {
  fill: #c69;
}

svg #d1 {
  text-align: center;
  display: none;
  line-height: 150px;
}

svg:hover #d1 {
  display: block;
}

svg .repeatny {
  stroke: #c69;
  fill: #c69;
  stroke-width: 2px;
  marker-start: url(#markerCircleR);
  marker-end: url(#markerArrowR);
}

svg .promoteny {
  stroke: #69c;
  fill: #69c;
  stroke-width: 2px;
  marker-start: url(#markerCircleP);
  marker-end: url(#markerArrowP);
}
/* Keep the "old" grid styling mostly gender grids. But simplified and theme neutral */

table.gendergrid {
	table-layout: fixed;
}

	table.gendergrid td {
		border: 1px solid #D0D0D0;
		padding-left: 6px;
		padding-right: 4px;
		padding-top: 2px;
		padding-bottom: 2px;
	}

		table.gendergrid td.current {
			background: #eee;
			color: #333;
		}

	table.gendergrid th {
		text-align: center;
		padding: 2px 2px 2px 2px;
	}

	table.gendergrid .colhdr {
		color: #333;
		text-align: center;
	}

	table.gendergrid th.colhdr {
		border: solid 1px #d4d4d4;
	}

	table.gendergrid .colhdr.current, table.gendergrid .colghdr.current {
		background-color: #eee;
		color: #333;
	}

	table.gendergrid th.colghdr {
		border-left: solid 1px #d4d4d4;
		border-right: solid 1px #d4d4d4;
	}

	table.gendergrid .rowhdr {
		font-size: 15px;
		font-weight: bold;
		color: #333;
		padding-left: 7px;
	}

		table.gendergrid .rowhdr.current {
			background-color: #eee;
			color: #333;
		}

	table.gendergrid td.current {
		background-color: #eee;
	}

	table.gendergrid .colm {
		border-left: solid 2px #ccc;
	}

	table.gendergrid input {
		width: 20px;
		border: none;
		padding-right: 2px;
		margin: 2px;
		background-color: white;
		text-align: right;
	}

		table.gendergrid input.hover {
			width: 40px;
			border: none;
			padding: 3px;
			background-color: lightyellow;
			text-align: right;
		}

	table.gendergrid .totg {
		text-align: right;
		font-weight: bold;
		background-color: #eee;
	}

	table.gendergrid .tot {
		text-align: right;
		font-weight: bold;
		background-color: none;
		padding-right: 3px;
		padding-left: 3px;
	}

	table.gendergrid input[type="number"]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

.gendergrid input:disabled, .gendergrid select:disabled, .gendergrid input[type=checkbox]:disabled {
	background-color: lightsteelblue !important;
}


/* additional styles and utilities for ui-grid 

	these are designed to be named as cellHeaderClass or cellClass
	these will only apply in a ui-grid
*/


/* for numbers to align right in a grid*/
/* these classes are widely in use, but probably should not be camelcase */
.ui-grid .gdAlignRight {
	text-align: right
}

.ui-grid .gdAlignCenter {
	text-align: center
}

.ui-grid .gdAlignLeft {
	text-align: left;
}

/* grids in 'list' views usually have an anchor column to open the item in the actionpane
	style this link;
*/
.ui-grid .gdAction,
a.gdAction {
	cursor: pointer
}

/* supergrid applies waiting style to the ui-grid div 
 Customise the grid accordingly
*/
.ui-grid.waiting {
	opacity: .7;
}

/* tracking style is applied to columns displaying the audit fields
	CreateUser, CreateDateTime, EditUser, EditDateTime 
	Make these less prominent
*/
.ui-grid .tracking {
	font-size: 9px;
	opacity: .8;
}

/* for editable grids - salvaged from tables-and-grids in <79a66543>
*/

div.ui-grid-cell input.grid-input {
	background-color: rgba(255,220,220,.5);
	height: 30px;
	padding: 5px;
}

div.ui-grid-cell select.grid-input {
	background-color: rgba(255,220,220,.5);
	height: 30px;
	padding: 5px;
}
/* some other miscellaneous for form b type grids 
	introduce the table level style cells, indicating that this table has borders around cells

*/


/* we should not need to disable these so explicilty, but there are some very general styles
	e.g. th in place elsewhere...
*/
table.table.cells.box {
	border-color: rgba(0,0,0,.12);
	border-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-style: solid;
}


table.table.cells tr {
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-right-style: none;
}

table.table.cells td,
table.table.cells th {
	border-color: rgba(0,0,0,.12);
	border-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-right-style: none;
}


table.table.cells tr td.leftedge,
table.table.cells tr th.leftedge {
	border-color: rgba(0,0,0,.12);
	border-width: 1px;
	border-left-style: solid;
}

table.table.cells tr td.rightedge,
table.table.cells tr th.rightedge {
	border-color: rgba(0,0,0,.12);
	border-width: 1px;
	border-right-style: solid;
}

table.table.cells tr td.cell,
table.table.cells tr th.cell {
	border-color: rgba(0,0,0,.12);
	border-width: 1px;
	border-style: solid;
}

table.table.cells tr td.no-border,
table.table.cells tr th.no-border {
	border-left-style: none;
	border-right-style: none;
	border-top-style: none;
	border-bottom-style: none;
}

table.table.cells tr td.leftedge-only,
table.table.cells tr th.leftedge-only {
	border-color: rgba(0,0,0,.12);
	border-width: 1px;
	border-left-style: solid;
	border-right-style: none;
	border-top-style: none;
	border-bottom-style: none;
}

table.table.cells tr td.rightedge-only,
table.table.cells tr th.rightedge-only {
	border-color: rgba(0,0,0,.12);
	border-width: 1px;
	border-right-style: solid;
	border-left-style: none;
	border-top-style: none;
	border-bottom-style: none;
}

table.table.cells tr.total td {
	background-color: rgba(0,0,0,.03);
}


/* list tables */

table.md-table.list.tight td,
table.md-table.list.tight th {
	padding-top: 8px;
	padding-bottom: 8px;
}

table.md-table.list.numbers td {
	text-align: right;
}

table.md-table.list.numbers th {
	text-align: center;
}

table.md-table.list td.text {
	text-align: left;
}

table.list td.text,
table.list.numbers th.text {
	text-align: left;
}

/* 
  Easiest to customize ui-grid for now is the provided customizer at http://ui-grid.info/customizer/ 
  ui-grid could be customized to adhere to Material Design Principal but would take too much effort
  A clean grid that matches the material theme is preferred for now.

 Note that becuase this file can be regenerated bythe tool (above), any further tweaks or additional styles 
	should go somehwere else - use grids.css to hold these
*/
.ui-grid {
  border: 1px solid #dddddd;
  box-sizing: content-box;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.ui-grid-vertical-bar {
  position: absolute;
  right: 0;
  width: 0;
}

.ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar,
.ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
  width: 1px;
}

.ui-grid-scrollbar-placeholder {
  background-color: transparent;
}

.ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar {
  background-color: #ffffff;
}

.ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
  background-color: #dddddd;
}

.ui-grid-header-cell:last-child .ui-grid-vertical-bar {
  right: -1px;
  width: 1px;
  background-color: #ffffff;
}

.ui-grid-clearfix:before,
.ui-grid-clearfix:after {
  content: "";
  display: table;
}

.ui-grid-clearfix:after {
  clear: both;
}

.ui-grid-invisible {
  visibility: hidden;
}

.ui-grid-contents-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

.ui-grid-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.ui-grid-icon-button {
  background-color: transparent;
  border: none;
  padding: 0;
}

.clickable {
  cursor: pointer;
}

.ui-grid-top-panel-background {
  background-color: #ffffff;
}

.ui-grid-header {
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
}

.ui-grid-top-panel {
  position: relative;
  overflow: hidden;
  font-weight: bold;
  background-color: #ffffff;
  -webkit-border-top-right-radius: -1px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: -1px;
  -moz-border-radius-topright: -1px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: -1px;
  border-top-right-radius: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: -1px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.ui-grid-header-viewport {
  overflow: hidden;
}

.ui-grid-header-canvas:before,
.ui-grid-header-canvas:after {
  content: "";
  display: -ms-flexbox;
  display: flex;
  line-height: 0;
}

.ui-grid-header-canvas:after {
  clear: both;
}

.ui-grid-header-cell-wrapper {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.ui-grid-header-cell-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.ui-grid-header-cell {
  position: relative;
  box-sizing: border-box;
  background-color: inherit;
  border-right: 1px solid;
  border-color: #ffffff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 0;
}

  .ui-grid-header-cell:last-child {
    border-right: 0;
  }

  .ui-grid-header-cell .sortable {
    cursor: pointer;
  }

  .ui-grid-header-cell .ui-grid-sort-priority-number {
    margin-left: -8px;
  }
  /* Fixes IE word-wrap if needed on header cells */
  .ui-grid-header-cell > div {
    -ms-flex-basis: 100%;
    flex-basis: 100%;
  }

.ui-grid-header .ui-grid-vertical-bar {
  top: 0;
  bottom: 0;
}

.ui-grid-column-menu-button {
  position: absolute;
  right: 1px;
  top: 0;
}

  .ui-grid-column-menu-button .ui-grid-icon-angle-down {
    vertical-align: sub;
  }

.ui-grid-header-cell-last-col .ui-grid-cell-contents,
.ui-grid-header-cell-last-col .ui-grid-filter-container,
.ui-grid-header-cell-last-col .ui-grid-column-menu-button,
.ui-grid-header-cell-last-col + .ui-grid-column-resizer.right {
  margin-right: 13px;
}

.ui-grid-render-container-right .ui-grid-header-cell-last-col .ui-grid-cell-contents,
.ui-grid-render-container-right .ui-grid-header-cell-last-col .ui-grid-filter-container,
.ui-grid-render-container-right .ui-grid-header-cell-last-col .ui-grid-column-menu-button,
.ui-grid-render-container-right .ui-grid-header-cell-last-col + .ui-grid-column-resizer.right {
  margin-right: 28px;
}

.ui-grid-column-menu {
  position: absolute;
}
  /* Slide up/down animations */
  .ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-add,
  .ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove {
    -webkit-transition: all 0.04s linear;
    -moz-transition: all 0.04s linear;
    -o-transition: all 0.04s linear;
    transition: all 0.04s linear;
    display: block !important;
  }

    .ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-add.ng-hide-add-active,
    .ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove {
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
    }

      .ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-add,
      .ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove.ng-hide-remove-active {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }
/* Slide up/down animations */
.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-add,
.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove {
  -webkit-transition: all 0.04s linear;
  -moz-transition: all 0.04s linear;
  -o-transition: all 0.04s linear;
  transition: all 0.04s linear;
  display: block !important;
}

  .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-add.ng-hide-add-active,
  .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }

    .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-add,
    .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove.ng-hide-remove-active {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -o-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }

.ui-grid-filter-container {
  padding: 4px 10px;
  position: relative;
}

  .ui-grid-filter-container .ui-grid-filter-button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
  }

    .ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"] {
      position: absolute;
      top: 50%;
      line-height: 32px;
      margin-top: -16px;
      right: 10px;
      opacity: 0.66;
    }

      .ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"]:hover {
        opacity: 1;
      }

  .ui-grid-filter-container .ui-grid-filter-button-select {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
  }

    .ui-grid-filter-container .ui-grid-filter-button-select [class^="ui-grid-icon"] {
      position: absolute;
      top: 50%;
      line-height: 32px;
      margin-top: -16px;
      right: 0px;
      opacity: 0.66;
    }

      .ui-grid-filter-container .ui-grid-filter-button-select [class^="ui-grid-icon"]:hover {
        opacity: 1;
      }

input[type="text"].ui-grid-filter-input {
  box-sizing: border-box;
  padding: 0 18px 0 0;
  margin: 0;
  width: 100%;
  border: 1px solid #dddddd;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

  input[type="text"].ui-grid-filter-input:hover {
    border: 1px solid #dddddd;
  }

select.ui-grid-filter-select {
  padding: 0;
  margin: 0;
  border: 0;
  width: 90%;
  border: 1px solid #dddddd;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

  select.ui-grid-filter-select:hover {
    border: 1px solid #dddddd;
  }

.ui-grid-filter-cancel-button-hidden select.ui-grid-filter-select {
  width: 100%;
}

.ui-grid-render-container {
  position: inherit;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

  .ui-grid-render-container:focus {
    outline: none;
  }

.ui-grid-viewport {
  min-height: 20px;
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

  .ui-grid-viewport:focus {
    outline: none !important;
  }

.ui-grid-canvas {
  position: relative;
  padding-top: 1px;
}

.ui-grid-row {
  clear: both;
}

  .ui-grid-row:nth-child(odd) .ui-grid-cell {
    background-color: #ffffff;
  }

  .ui-grid-row:nth-child(even) .ui-grid-cell {
    background-color: #f9f9f9;
  }

  .ui-grid-row:last-child .ui-grid-cell {
    border-bottom-color: #dddddd;
    border-bottom-style: solid;
  }

  .ui-grid-row:hover > [ui-grid-row] > .ui-grid-cell:hover .ui-grid-cell,
  .ui-grid-row:nth-child(odd):hover .ui-grid-cell,
  .ui-grid-row:nth-child(even):hover .ui-grid-cell {
    background-color: #e3edf7;
  }

.ui-grid-no-row-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 10%;
  background-color: #ffffff;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #dddddd;
  font-size: 2em;
  text-align: center;
}

  .ui-grid-no-row-overlay > * {
    position: absolute;
    display: table;
    margin: auto 0;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.66;
  }

.ui-grid-cell {
  overflow: hidden;
  float: left;
  background-color: inherit;
  border-right: 1px solid;
  border-color: #dddddd;
  box-sizing: border-box;
}

  .ui-grid-cell:last-child {
    border-right: 0;
  }

.ui-grid-cell-contents {
  padding: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 100%;
}

.ui-grid-cell-contents-hidden {
  visibility: hidden;
  width: 0;
  height: 0;
  display: none;
}

.ui-grid-row .ui-grid-cell.ui-grid-row-header-cell {
  background-color: #f0f0ee;
  border-bottom: solid 1px #dddddd;
}

.ui-grid-cell-empty {
  display: inline-block;
  width: 10px;
  height: 10px;
}

.ui-grid-footer-info {
  padding: 5px 10px;
}

.ui-grid-footer-panel-background {
  background-color: #ffffff;
}

.ui-grid-footer-panel {
  position: relative;
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  overflow: hidden;
  font-weight: bold;
  background-color: #ffffff;
  -webkit-border-top-right-radius: -1px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: -1px;
  -moz-border-radius-topright: -1px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: -1px;
  border-top-right-radius: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: -1px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.ui-grid-grid-footer {
  float: left;
  width: 100%;
}

.ui-grid-footer-viewport,
.ui-grid-footer-canvas {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
}

.ui-grid-footer-viewport {
  overflow: hidden;
}

.ui-grid-footer-canvas {
  position: relative;
}

  .ui-grid-footer-canvas:before,
  .ui-grid-footer-canvas:after {
    content: "";
    display: table;
    line-height: 0;
  }

  .ui-grid-footer-canvas:after {
    clear: both;
  }

.ui-grid-footer-cell-wrapper {
  position: relative;
  display: table;
  box-sizing: border-box;
  height: 100%;
}

.ui-grid-footer-cell-row {
  display: table-row;
}

.ui-grid-footer-cell {
  overflow: hidden;
  background-color: inherit;
  border-right: 1px solid;
  border-color: #dddddd;
  box-sizing: border-box;
  display: table-cell;
}

  .ui-grid-footer-cell:last-child {
    border-right: 0;
  }

.ui-grid-menu-button {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  background: #ffffff;
  border: 0;
  border-left: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  cursor: pointer;
  height: 32px;
  font-weight: normal;
}

  .ui-grid-menu-button .ui-grid-icon-container {
    margin-top: 5px;
    margin-left: 2px;
  }

  .ui-grid-menu-button .ui-grid-menu {
    right: 0;
  }

    .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid {
      overflow: scroll;
    }

.ui-grid-menu {
  overflow: hidden;
  max-width: 320px;
  z-index: 2;
  position: absolute;
  right: 100%;
  padding: 0 10px 20px 10px;
  cursor: pointer;
  box-sizing: border-box;
}

.ui-grid-menu-item {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-grid-menu .ui-grid-menu-inner {
  background: #ffffff;
  border: 1px solid #dddddd;
  position: relative;
  white-space: nowrap;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

  .ui-grid-menu .ui-grid-menu-inner ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

    .ui-grid-menu .ui-grid-menu-inner ul li {
      padding: 0;
    }

      .ui-grid-menu .ui-grid-menu-inner ul li .ui-grid-menu-item {
        color: #000000;
        min-width: 100%;
        padding: 8px;
        text-align: left;
        background: transparent;
        border: none;
        cursor: default;
      }

      .ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item {
        cursor: pointer;
      }

        .ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item:hover,
        .ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item:focus {
          background-color: #b3c4c7;
        }

        .ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item.ui-grid-menu-item-active {
          background-color: #9cb2b6;
        }

      .ui-grid-menu .ui-grid-menu-inner ul li:not(:last-child) > .ui-grid-menu-item {
        border-bottom: 1px solid #dddddd;
      }

.ui-grid-sortarrow {
  right: 5px;
  position: absolute;
  width: 20px;
  top: 0;
  bottom: 0;
  background-position: center;
}

  .ui-grid-sortarrow.down {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }

@font-face {
  font-family: 'ui-grid';
  src: url('fonts/ui-grid.eot');
  src: url('fonts/ui-grid.eot#iefix') format('embedded-opentype'), url('fonts/ui-grid.woff') format('woff'), url('fonts/ui-grid.ttf') format('truetype'), url('fonts/ui-grid.svg?#ui-grid') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'ui-grid';
    src: url('@{font-path}ui-grid.svg?12312827#ui-grid') format('svg');
  }
}
*/
[class^="ui-grid-icon"]:before,
[class*=" ui-grid-icon"]:before {
  font-family: "ui-grid";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.ui-grid-icon-blank::before {
  width: 1em;
  content: ' ';
}

.ui-grid-icon-plus-squared:before {
  content: '\c350';
}

.ui-grid-icon-minus-squared:before {
  content: '\c351';
}

.ui-grid-icon-search:before {
  content: '\c352';
}

.ui-grid-icon-cancel:before {
  content: '\c353';
}

.ui-grid-icon-info-circled:before {
  content: '\c354';
}

.ui-grid-icon-lock:before {
  content: '\c355';
}

.ui-grid-icon-lock-open:before {
  content: '\c356';
}

.ui-grid-icon-pencil:before {
  content: '\c357';
}

.ui-grid-icon-down-dir:before {
  content: '\c358';
}

.ui-grid-icon-up-dir:before {
  content: '\c359';
}

.ui-grid-icon-left-dir:before {
  content: '\c35a';
}

.ui-grid-icon-right-dir:before {
  content: '\c35b';
}

.ui-grid-icon-left-open:before {
  content: '\c35c';
}

.ui-grid-icon-right-open:before {
  content: '\c35d';
}

.ui-grid-icon-angle-down:before {
  content: '\c35e';
}

.ui-grid-icon-filter:before {
  content: '\c35f';
}

.ui-grid-icon-sort-alt-up:before {
  content: '\c360';
}

.ui-grid-icon-sort-alt-down:before {
  content: '\c361';
}

.ui-grid-icon-ok:before {
  content: '\c362';
}

.ui-grid-icon-menu:before {
  content: '\c363';
}

.ui-grid-icon-indent-left:before {
  content: '\e800';
}

.ui-grid-icon-indent-right:before {
  content: '\e801';
}

.ui-grid-icon-spin5:before {
  content: '\ea61';
}
/*
* RTL Styles
*/
.ui-grid[dir=rtl] .ui-grid-header-cell,
.ui-grid[dir=rtl] .ui-grid-footer-cell,
.ui-grid[dir=rtl] .ui-grid-cell {
  float: right !important;
}

.ui-grid[dir=rtl] .ui-grid-column-menu-button {
  position: absolute;
  left: 1px;
  top: 0;
  right: inherit;
}

.ui-grid[dir=rtl] .ui-grid-cell:first-child,
.ui-grid[dir=rtl] .ui-grid-header-cell:first-child,
.ui-grid[dir=rtl] .ui-grid-footer-cell:first-child {
  border-right: 0;
}

.ui-grid[dir=rtl] .ui-grid-cell:last-child,
.ui-grid[dir=rtl] .ui-grid-header-cell:last-child {
  border-right: 1px solid #dddddd;
  border-left: 0;
}

.ui-grid[dir=rtl] .ui-grid-header-cell:first-child .ui-grid-vertical-bar,
.ui-grid[dir=rtl] .ui-grid-footer-cell:first-child .ui-grid-vertical-bar,
.ui-grid[dir=rtl] .ui-grid-cell:first-child .ui-grid-vertical-bar {
  width: 0;
}

.ui-grid[dir=rtl] .ui-grid-menu-button {
  z-index: 2;
  position: absolute;
  left: 0;
  right: auto;
  background: #ffffff;
  border: 1px solid #dddddd;
  cursor: pointer;
  min-height: 27px;
  font-weight: normal;
}

  .ui-grid[dir=rtl] .ui-grid-menu-button .ui-grid-menu {
    left: 0;
    right: auto;
  }

.ui-grid[dir=rtl] .ui-grid-filter-container .ui-grid-filter-button {
  right: initial;
  left: 0;
}

  .ui-grid[dir=rtl] .ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"] {
    right: initial;
    left: 10px;
  }
/*
   Animation example, for spinners
*/
.ui-grid-animate-spin {
  -moz-animation: ui-grid-spin 2s infinite linear;
  -o-animation: ui-grid-spin 2s infinite linear;
  -webkit-animation: ui-grid-spin 2s infinite linear;
  animation: ui-grid-spin 2s infinite linear;
  display: inline-block;
}

@-moz-keyframes ui-grid-spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-webkit-keyframes ui-grid-spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-o-keyframes ui-grid-spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/*@-ms-keyframes ui-grid-spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}*/

@keyframes ui-grid-spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.ui-grid {
  color: #333;
}

.ui-grid-header {
  border-bottom-width: 2px;
}

.ui-grid-menu .ui-grid-menu-inner ul li:not(:last-child) > button {
  border: none;
}

.ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item-active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.ui-grid-menu .ui-grid-menu-inner ul li button:hover,
.ui-grid-menu .ui-grid-menu-inner ul li button:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: #ddd;
}

/* Navigator */
ul.navigator {
  font-weight: 800;
  cursor:pointer;
}

.navigator {
  white-space: normal;
  margin: 0 0 0 0;
  padding-left: 0 !important;
}

.navigator md-icon {
  color: #b9e0f2;
  margin-left: 1px;
  margin-right: 8px;
  min-width: 18px;
  text-align: center;
  display: inline-block;
}
.navigator .divider {
  height: 1px;
  width: 100%;
  margin: 10px 0px;
  overflow: hidden;
  background-color: #3582b5;
}
.navigator .divider:hover {
  background-color: #3582b5;
}
.navigator a {
  text-decoration: none;
}
.navigator ul {
  padding: 10px 0;
  list-style: none;
}
.navigator ul {
  padding-left: 0 !important;
}
.navigator ul,
.navigator ul li a {
  color: #ffffff;
}
.navigator li.active md-icon,
.navigator li.active a:hover md-icon {
  color: #ffffff;
}
.navigator li a {
  color: #ffffff;
  display: block;
  padding: 11px 10px;
  position: relative;
  font-weight: 400;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
  .navigator a:hover {
    background-color: #1D77D5;
    color: #ffffff;
  }
.navigator a:hover md-icon {
  color: #ffffff;
}
  .navigator > li.active > a {
    background: #1D77D5;
    color: #ffffff;
  }
.navigator > li.active > a:after {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 9px 9px 9px 0;
  border-color: transparent #f3f4f6 transparent transparent;
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -9px;
  right: 0px;
}
.navigator ul li.active {
  background-color: #1D77D5;
}
.navigator ul li.active > a {
  color: #ffffff !important;
}
.navigator ul li a {
  padding: 5px 10px 5px 37px;
}
.navigator ul li.active:not(.open) > a {
  font-weight: 400;
  color: #fff;
}
.navigator li ul {
  display: none;
  background-color: #06488c;
}
.navigator ul ul {
  padding: 0;
}
.navigator li li li a {
  padding-left: 60px;
}
.navigator ul ul ul li a {
  padding-left: 80px;
}
.navigator ul ul ul ul li a {
  padding-left: 100px;
}
.navigator li.hasChild > a {
  position: relative;
}
.navigator li.hasChild > a:before,
.navigator li.hasChild > a:after {
  content: " ";
  display: table;
}
.navigator li.hasChild > a:after {
  clear: both;
}
.navigator li.hasChild > a:before,
.navigator li.hasChild > a:after {
  content: " ";
  display: table;
}
.navigator li.hasChild > a:after {
  clear: both;
}
/* Remove the :hover from the following lines for arrows to appear always */
.navigator li.hasChild > a:before,
.navigator li.hasChild.open > a:before {
  content: "\f105";
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.navigator li.hasChild.open > a:before {
  content: "\f107";
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.navigator li.hasChild > a:before,
.navigator li.hasChild.open > a:before {
  font-family: Font Awesome\ 5 Free;
  /* https://stackoverflow.com/questions/47788847/fontawesome-5-font-family-not-work */
  font-weight: 900; /* Fix version 5.0.9 */
  font-style: normal;
  text-decoration: inherit;
  text-align: right;
  padding-right: 0px;
  display: inline-block;
  float: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.navigator li.hasChild li.hasChild a:before {
  top: 5px;
}
.navigator.collapsed > li.hasChild.open > a:before {
  content: "";
}
.navigator.collapsed > li.hasChild > a:before {
  content: "";
}
.navigator.collapsed > li.hasChild:hover > a:before {
  content: "\f107";
}
.navigator.collapsed > li {
  white-space: nowrap;
  z-index: 999;
  position: relative;
}
.navigator.collapsed > li span {
  display: none;
}
.navigator.collapsed > li > ul {
  position: absolute;
  width: 210px;
  left: 40px;
  display: none !important;
}
  .navigator.collapsed > li:hover,
  .navigator.collapsed > li.keep-open {
    background: #1D77D5;
    width: 250px;
  }


.navigator.collapsed > li.hasChild.open > a:before {
  content: "";
}
.navigator.collapsed > li.hasChild > a:before {
  content: "";
}
.navigator.collapsed > li.hasChild:hover > a:before {
  content: "\f107";
}
.navigator.collapsed > li:hover span,
.navigator.collapsed > li.keep-open span {
  display: inline;
}
.navigator.collapsed > li:hover > ul,
.navigator.collapsed > li.keep-open > ul {
  display: block !important;
}
.navigator.collapsed > li:hover.divider,
.navigator.collapsed > li.keep-open.divider {
  width: 40px !important;
}
.navigator.collapsed > li:hover > a,
.navigator.collapsed > li.keep-open > a,
.navigator.collapsed > li:hover a md-icon,
.navigator.collapsed > li.keep-open a md-icon {
  color: #cfeefc;
}
.navigator.collapsed > li.active:hover > a:after {
  display: none;
}
.navigator.collapsed> li.active:hover > a,
.navigator.collapsed > li.active:hover > a md-icon {
  color: #ffffff;
}
.navigator.collapsed md-icon {
  margin-right: 20px !important;
  margin-left: 1px;
}
.navigator.collapsed li li a {
  padding-left: 10px;
}
.navigator.collapsed li li li a {
  padding-left: 20px;
}
.navigator.collapsed li li li li a {
  padding-left: 30px;
}

/* the enclosing md-sidenav */

#sidenav {
  width: 230px;
  background: #106CC8;
  white-space: nowrap;
  position: relative;
}

body.collapse-navbar #sidenav {
  width: 40px;
  overflow: visible;
} 
/*

  this group of styles implement material design recommendations as decribed in
  https://google.github.io/material-design-icons/

  These are not overrides or tweaks to angular material style - rather, the 
  intention is that these will be implemented by the project itself.

  So this group should remain in the project even when all 'material-fixes'
  are eliminated
*/

/* Move everything to Material's Roboto and cleanup once Bootstrap gone */
body {
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; 
}

/* Material custom menu stuff */
md-menu-content {
  left: auto;
  right: 0;
  margin-top: 2px;
  border: none;
  -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.98);
}

.dropdown-menu.pull-left {
  left: 0;
  right: auto;
}

md-menu-item a {
  color: #656b79;
  padding: 5px 15px;
}

.dropdown-menu.arrow:before {
  position: absolute;
  top: -8px;
  right: 11px;
  display: inline-block;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  border-left: 10px solid transparent;
  content: '';
}

.nav-header {
  background-color: #106CC8;
  background: linear-gradient(#185694, #106cc8);
  border-bottom: 1px solid #1D77D5;
  flex-shrink: 0;
  z-index: 2;
}

md-toolbar.md-site-toolbar-theme:not(.md-menu-toolbar) {
  background-color: rgb(245,245,245);
  color: rgba(0,0,0,0.87) !important;
  fill: rgba(0,0,0,0.87) !important;
}

md-icon.material-icons.md-site-toolbar-theme {
  color: rgba(0,0,0,0.87) !important;
  fill: rgba(0,0,0,0.87) !important;
}

.site-content-toolbar {
  z-index: 3;
}

.md-whiteframe-glow-z1 {
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.14), 0 0 2px 2px rgba(0, 0, 0, 0.098), 0 0 5px 1px rgba(0, 0, 0, 0.084);
}

.pineapples-logo {
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 16px;
  margin: 0 auto;
}

/* End of Material custom menu stuff */

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}

  .material-icons.md-dark.md-inactive {
    color: rgba(0, 0, 0, 0.26);
  }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: rgba(255, 255, 255, 1);
}

  .material-icons.md-light.md-inactive {
    color: rgba(255, 255, 255, 0.3);
  }

/* Customizing the material section (with md-toolbar at top) */
.pineapple-container {
  border-radius: 4px;
  margin-bottom: 16px;
  transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
  position: relative;
  padding-bottom: 0;
}

md-toolbar.pineapple-toolbar {
  border-radius: 3px 3px 0 0;
  box-shadow: 0 1px rgba(255, 255, 255, 0.1);
  color: white;
}

/* Beginning of pineapples material specific styles */
#pineapples-license-footer {
  align-self: flex-end;
  padding: 16px 32px;
  width: 100%;
  text-align: center;
  font-size: small;
  border-top: 1px solid #ddd;
}

.login-card {
  padding-top: 80px;
  padding-bottom: 80px;
}
/* End of pineapples material specific styles */

/* Beginning of styles to make div tables with material look. Necessary for now because of 
  https://stackoverflow.com/questions/36576270/angular-table-row-component-in-table-component
*/
div.md-table-div {
  border: none;
  display: table;
  width: 100%;
}

report-def-row.odd .tr.layout-row {
  background-color: rgba(242, 242, 242, 0.5);
}

div.md-table-div div.thead div.tr {
  border-bottom: #cccccc;
  border-bottom-style: solid;
  border-bottom-width: thin;
  font-weight: bold;
}

div.tr {
  border: none;
  /*display: table-row;*/
}

div.td, div.th {
  padding: 15px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
}
/* End of styles to make div tables with material look. */

/* end of required styles */


/*
  The remaining styles are short term fixes for issues caused by conflicts between bootstrap 
  and material.
  This should be discarded when bootstrap is phased out. 
*/


/* Angular material quick and dirty customizations 
   these have been migrated here from custom.css
*/

/* the style material-icons is installed when we get the material-icons font online, using 
  this link in start.cshtml

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  This style defines font-size: 24px and does NOT set the color
  color: white
  probably creates more problems than it solves - should be replaced by 'md-light' class
*/
/* see configMdTheme.ts default background is now white */

/* this style would default to hue 1 of primary palette
   The override here is to correspond with other colors used in bootstrap
   This has been removed in favour of extend the primary palette to use this color
   see configMdTheme.ts
*/
/*
md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {
  background-color: #348bc6;
}
*/

/* selects were misalinged only when inside a lookup-selector 
  so it is more precise to change this in the lookup-selector template
*/

/* buttons */
/* This color #4697ce is almost identical to the theme primary hue 1 #348bc6
  so all these md-button tweaks can be safely removed
*/

/* doesn't make sense to have a heading inside the md-toolbar-tools ? */
.md-toolbar-tools h1, .md-toolbar-tools h2, .md-toolbar-tools h3 {
  color: #ffffff;
}

/* Ensure options div and panel-controls in toolbar align buttons properly */
.md-toolbar-tools .options {
  display: flex;
  align-items: center;
}

.md-toolbar-tools panel-controls {
  display: flex;
  align-items: center;
}

.md-toolbar-tools panel-controls > span {
  display: flex;
  align-items: center;
}

panel-controls .md-btn {
  margin: 3px 0px;
  color: #fff !important;
}

/* Quick and dirty CSS to materialise some bits not materialised by Angular Material V1 (e.g. tables) */

table.md-table th,
table.md-table td {
  border: none;
}

table.md-table {
  width: 100%;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
}

  table.md-table thead {
    font-weight: bold;
  }

    table.md-table thead tr {
      border-bottom: #cccccc;
      border-bottom-style: solid;
      border-bottom-width: thin;
    }

table.striped tr {
  border-bottom: none;
}

table.striped > tbody > tr:nth-child(odd) {
  background-color: rgba(242, 242, 242, 0.5);
}

table.striped > tbody > tr > td {
  border-radius: 0;
}

table.highlight > tbody > tr {
  -webkit-transition: background-color .25s ease;
  transition: background-color .25s ease;
}

  table.highlight > tbody > tr:hover {
    background-color: rgba(242, 242, 242, 0.5);
  }

table.centered thead tr th, table.centered tbody tr td {
  text-align: center;
}

tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

td, th {
  padding: 15px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border-radius: 2px;
}

/* end of migration from custom.css */

/* bootstrap makes label bold - kill this in materialized forms */
md-input-container label {
  font-weight: normal
}

/* make a distinction between a placeholder and a disabled value in an input
  by making the value darker ( ie more opaque)
  *** for further investigation - can we achieve this without explicitly setting
  the colors ?? ***
*/
md-input-container .md-input[disabled] {
  color: rgba(0,0,0,0.87);
  background-color: #e3edf7;
  border-bottom-style: none
}

md-select[disabled] .md-select-value {
  color: rgba(0,0,0,0.87);
  background-color: #e3edf7;
  border-bottom-style: none
}

/* 
   adpoting semantic ui principles
   (e.g. https://webaim.org/techniques/semanticstructure/)
   we should not style headings but should apply another class to all headings to get the visual result
   using heading tyles to define structure and acessbility
   angularjs material provides classes for this purpose, see
   https://material.angularjs.org/latest/CSS/typography
 */
h1, h2, h3, h4, h5, h6 {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

/* a simple animation for blocks that are conditionally displayed 
   causes the element to roll-down on show, roll-up on hide
 */
/* a default duration for animations*/
.conditional.ng-animate {
  transition: all ease-in .20s;
}

/* start point of show*/
.conditional.ng-enter,
.conditional.ng-hide-remove {
  margin-top: -80px;
  opacity: 0
}
  /* end point of show */
  .conditional.ng-enter.ng-enter-active,
  .conditional.ng-hide-remove.ng-hide-remove-active {
    margin-top: 0px;
    opacity: 1
  }

/* start point of hide*/
.conditional.ng-leave,
.conditional.ng-hide-add {
  margin-top: 0px;
  opacity: 1
}

  /* end point of hide*/
  .conditional.ng-leave.ng-leave-active,
  .conditional.ng-hide-add.ng-hide-add-active {
    margin-top: -80px;
    opacity: 0
  }

/* dashboard-wall is the surface that holds the children */
.dashboard-wall {
	max-width: 3600px;
}

/* dashboard-child class is the outermost class on the contents of a dashboard item */

.dashboard-child table tr.selected,
table.material tr.selected {
	background-color: darkgrey;
	color: white
}

.dashboard-child table.table th,
table.table.material th {
	background-color: white;
	border-top: solid;
	border-color: darkslategrey;
	color: darkslategray;
	background-image: none;
}

/* Tables - spacing*/

/* allow for tighter packing of rows by reducing the vertical padding from the material default of 15px */
.dashboard-child table th,
dashboard-child table td {
	padding: 15px 5px;
}

.dashboard-child table.tight th,
dashboard-child table.tight td {
	padding: 10px 5px;
}

.dashboard-child table.tighter th,
dashboard-child table.tighter td {
	padding: 5px 5px;
}

.dashboard-child table.tightest th,
dashboard-child table.tightest td {
	padding: 2px 5px;
}

/* Tables - alignment */

/* the default text alignment is right; usually these tables are full of numbers */
.dashboard-child table tbody td,
.dashboard-child table tfoot td {
	text-align: right;
}

/* but centre the column headings */
.dashboard-child table thead th {
	text-align: center;
}

/* Tables headers and labels 
	-- rowlabel
	-- colgroupstart		(apply to col in colgroup)
	-- colgroupheader
	-- rowlabelheader 

*/

/* a label on the row, usually the first column */
.dashboard-child table tbody td.rowlabel,
.dashboard-child table tfoot td.rowlabel {
	text-align: left;
}

/* columngroups - alternating colurs, and borders */
.dashboard-child table .colgroupstart {
	border-left: 1px solid rgba(192,192,192,.2);
}

/* columngroup header - use when columns are grouped into sets for the heading of the set
	this is usually on a row in thead that is above the column headings, and uses a colspan to span the whole group
	the child selector is even, assuming their will be one column for a rowlabel
*/
.dashboard-child table .colgroupheader:nth-child(even) {
	background-color: rgba(192,192,192,0.1);
}

/* Table totals */
/* for a total row, total class can go on the row */
.dashboard-child table tr.total,
table.material tr.total {
	border-top: solid;
	border-bottom: solid;
	border-width: medium;
	border-color: darkslategrey;
	font-weight: 500;
}

/* total column */
.dashboard-child table td.total,
table.material td.total {
	background-color: rgba(192,192,192,0.1);
	font-weight: 600;
}

/* grand total */
.dashboard-child table tr.total td.total,
table.material tr.total td.total {
	font-weight: 700;
}

/* allow for disabled table in editing contexts (not applicable for dashboards) */
table.material.disabled tbody tr {
	background-color: rgba(170,151,206,0.2); /* same as the disabled color for input */
}

.dashboard-child {
	margin: 0px; /* change margin to 0 to prevent vertical overflows */
	opacity: 1;
	background-color: white;
	border-color: lightgray;
	padding: 4px;
}

.dashboard-child.selected {
	position: fixed;
	top: 60px;
	left: 30px;
	right: 30px;
	bottom: 20px;
	width: auto;
	height: auto;
	max-height: calc(100vh - 80px);
	z-index: 1000;
	overflow-y: auto;
	background-color: white;
	padding: 20px;
	box-sizing: border-box;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
	border-radius: 4px;
}

.dashboard-child.unselected {
	background-color: lightgray;
	opacity: .2;
}

.dashboard-child .height2 {
	height: 230px;
}

.dashboard-child .height3 {
	height: 380px;
}

.dashboard-child .height4 {
	height: 530px;
}

.dashboard-child .height5 {
	height: 680px;
}

.dashboard-child .height6 {
	height: 830px;
}

.dashboard-child .height7 {
	height: 980px;
}

.dashboard-child .height8 {
	height: 1130px;
}

.dashboard-child .height9 {
	height: 1280px;
}

.dashboard-child .height10 {
	height: 1430px;
}

.dashboard-child .height11 {
	height: 1580px;
}

.dashboard-child .height12 {
	height: 1730px;
}

.dashboard-child .height13 {
	height: 1880px;
}

.dashboard-child .height14 {
	height: 2030px;
}

.dashboard-child .height15 {
	height: 2180px;
}

.dashboard-child .height16 {
	height: 2330px;
}

.dashboard-child .height17 {
	height: 2480px;
}

.dashboard-child .height18 {
	height: 2630px;
}

.dashboard-child .height19 {
	height: 2780px;
}

.dashboard-child .height20 {
	height: 2930px;
}

.dashboard-child .height21 {
	height: 2980px;
}

.dashboard-child .height22 {
	height: 3030px;
}

.dashboard-child .height23 {
	height: 3080px;
}

.dashboard-child .height24 {
	height: 3130px;
}

.dashboard-child .height25 {
	height: 3180px;
}

.dashboard-child.selected-add,
.dashboard-child.selected-remove,
.dashboard-child.unselected-add,
.dashboard-child.unselected-remove {
	transition: .2s;
}

/* angular animations form adding form removing material whiteframe 
  to create the impression of raisng/lowering a component
*/
.lifting .md-whiteframe-1dp-add,
.lifting .md-whiteframe-2dp-add,
.lifting .md-whiteframe-6dp-add,
.lifting .md-whiteframe-12dp-add,
.lifting .md-whiteframe-24dp-add,
.lifting .md-whiteframe-1dp-remove,
.lifting .md-whiteframe-2dp-remove,
.lifting .md-whiteframe-6dp-remove,
.lifting .md-whiteframe-12dp-remove,
.lifting .md-whiteframe-24dp-remove {
	transition: .4s;
}


school-details,
cross-tab,
simple-table,
bar-chart,
pie-chart,
generic {
	overflow-y: hidden;
}

/* dashboard-wrapper is applied to the dashboard child component in the dashboard html
  it controls layout within the 'masonry' grid
  default is '2x2' block ie 300 x 300px
*/
.dashboard-wrapper {
	background-color: rgb(255,255,255);
	opacity: 1;
	display: block;
	width: 100%; /* if no width is specifed, go with 100% */
	height: 440px; /* if no height is specifed with the wrapper this default is height 3*/
	float: left; /* masonry seems to need this */

	overflow-x: hidden;
	overflow-y: inherit;
}

.dashboard-wrapper {
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); /* default to the same as md-whiteframe-1dp */
	margin-right: 10px;
	margin-bottom: 10px;
	margin-top: 0px;
	margin-left: 0px;
	padding: 3px;
}

/* size control for dashbard wrappers */
.dashboard-wrapper.height1 {
	height: 140px;
}

.dashboard-wrapper.height2 {
	height: 290px;
}

.dashboard-wrapper.height3 {
	height: 440px;
}

.dashboard-wrapper.height4 {
	height: 590px;
}

.dashboard-wrapper.height5 {
	height: 740px;
}

.dashboard-wrapper.height6 {
	height: 890px;
}

.dashboard-wrapper.height7 {
	height: 1040px;
}

.dashboard-wrapper.height8 {
	height: 1190px;
}

.dashboard-wrapper.height9 {
	height: 1340px;
}

.dashboard-wrapper.height10 {
	height: 1490px;
}

.dashboard-wrapper.height11 {
	height: 1540px;
}

.dashboard-wrapper.height12 {
	height: 1590px;
}

.dashboard-wrapper.height13 {
	height: 1640px;
}

.dashboard-wrapper.height14 {
	height: 1690px;
}

.dashboard-wrapper.height15 {
	height: 1740px;
}

.dashboard-wrapper.height16 {
	height: 1790px;
}

.dashboard-wrapper.height17 {
	height: 1840px;
}

.dashboard-wrapper.height18 {
	height: 1890px;
}

.dashboard-wrapper.height19 {
	height: 1940px;
}

.dashboard-wrapper.height20 {
	height: 1990px;
}

.dashboard-wrapper.height21 {
	height: 2040px;
}

.dashboard-wrapper.height22 {
	height: 2090px;
}

.dashboard-wrapper.height23 {
	height: 2140px;
}

.dashboard-wrapper.height24 {
	height: 2190px;
}

.dashboard-wrapper.height25 {
	height: 2240px;
}

.dashboard-wrapper.width1 {
	width: 140px;
}

.dashboard-wrapper.width2 {
	width: 290px;
}

.dashboard-wrapper.width3 {
	width: 440px;
}

.dashboard-wrapper.width4 {
	width: 590px;
}

.dashboard-wrapper.width5 {
	width: 740px;
}

.dashboard-wrapper.width6 {
	width: 890px;
}

.dashboard-wrapper.width7 {
	width: 1040px;
}

.dashboard-wrapper.width8 {
	width: 1190px;
}


/* fixes a problem that prevents resizing of Dc charts*/
div.dc-chart.unfloat {
	float: none;
}

/* */

/* rotated table headings
    https://css-tricks.com/rotated-table-column-headers/
    To do: I suspect there are more relaible ways to place these rotated headers
    if the transform-origin is set to top left or bottom left
  */

th.rotate45 {
	/* Something you can count on */
	height: 140px;
	white-space: nowrap;
}

th.rotate45 > div {
	transform:
	/* Magic Numbers */
	translate(25px, 51px)
	/* 45 is really 360 - 45 */
	rotate(315deg);
	width: 30px;
}

th.rotate45 > div > span {
	border-bottom: 1px solid #ccc;
	padding: 5px 10px;
}

th.rotate90 {
	height: 140px;
	white-space: nowrap;
}

th.rotate90 > div {
	padding-top: 100%;
	transform: rotate(270deg);
}

th.rotate90 > div > span {
	padding: 5px 10px;
	text-align: start;
	transform: translate(0px, 20px);
}

.tooltip {
	pointer-events: none;
}

/* 
	to support highlighting a single cell in a dashboard table
*/
td.selectedcell {
	border-color: red;
	border-width: medium;
	background-color: cornflowerblue
}
/* 
	these classes are used by the stars component to display a string of stars 
	developed for presentation of accreditation results
*/
.stars {
	text-align: left !important;
	margin-left: 5px;
	margin-right: 5px;
	letter-spacing: -3px;
}

.stars.large {
	font-size: 1.25em;
}

.stars.small {
	font-size: .75em;
	letter-spacing: -2px;
}

/* 
	colors for stars match the standards set up in exams
	["#FF0000", "#FFC000", "#92D050", "#00B050"]

*/
.star1:before {
	font-family: Material Icons;
	display: inline-block;
	color: #ff0000;
	content: "star";
}

.star2:before {
	font-family: Material Icons;
	display: inline-block;
	color: #ffc000;
	content: "star star";
}

.star3:before {
	font-family: Material Icons;
	display: inline-block;
	color: #92d050;
	content: "star star star";
}

.star4:before {
	font-family: Material Icons;
	display: inline-block;
	color: #00b050;
	content: "star star star star";
}

/* checked unchecked radio button */
.radiobutton.checked:before {
	font-family: Material Icons;
	display: inline-block;
	content: "radio_button_checked";
}

.radiobutton.unchecked:before {
	font-family: Material Icons;
	display: inline-block;
	content: "radio_button_unchecked";
}

/* dashboard header items */
.dashboard-header md-select {
	/* md-select defaults to very large top and bottom margins - remove these
		this is for displaying component options
	*/
	margin-top: 0px;
	margin-bottom: 0px;
}

/* ==========================================================================
   Dashboard Loading Spinners
   Used for initial loading and lazy year/round loading in dashboards
   ========================================================================== */

/* Main loading spinner - displayed during initial dashboard load */
.dashboard-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #e0e0e0;
	border-top: 4px solid #3f51b5;
	border-radius: 50%;
	animation: dashboard-spin 1s linear infinite;
}

/* Smaller spinner for lazy loading years/rounds */
.dashboard-year-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid #e0e0e0;
	border-top: 2px solid #3f51b5;
	border-radius: 50%;
	animation: dashboard-spin 0.8s linear infinite;
	display: inline-block;
}

@keyframes dashboard-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Info banner for chunked loading message */
.dashboard-loading-info {
	margin-bottom: 16px;
	padding: 10px 14px;
	background-color: #e3f2fd;
	border-radius: 4px;
	font-size: 13px;
	color: #1565c0;
}

.dashboard-loading-info .info-icon {
	margin-right: 10px;
	fill: #1565c0;
}

/* Year loading indicator container - fixed width to prevent layout shift */
.dashboard-year-loading {
	margin-left: 16px;
	min-width: 180px;
}


/* crossfilter table component
	see src/app/ts/dashboard/widget/CrossfilterTable.Component
*/


/* variables for standard crossfilter table */

crossfilter-table {
	--background-color: white;
	--border-color: rgb(220,220,220);
	--stripe-background-color: rgba(242,242,242,.5);
	--colstripe-background-color: rgba(242,242,242,.5);
	--row-hover-background-color: #eeeeea;
	--row-hover-color: initial;
	--row-selected-background-color: initial; /*#eeeeea*/
	--row-selected-border-color: -webkit-focus-ring-color;
	--row-selected-color: initial; /*#eeeeea*/
	--col-hover-background-color: rgba(240,129,40,.5); /*#eeeeea*/
	--col-selected-background-color: silver; /*#eeeeea*/
	--col-selected-border-color: rgba(240,129,40,.5); /*#eeeeea*/
	--col-selected-color: white; /*#eeeeea*/
	--cell-hover-background-color: rgba(240,129,40,.5); /*#eeeeea*/
	--cell-selected-background-color: rgba(240,129,40,.5); /*#eeeeea*/
	--cell-selected-border-color: rgba(240,129,40,.5); /*#eeeeea*/
	--row-label-background-color: initial;
	--row-label-color: initial;
	--row-label-width: fit-content;
	--col-label-background-color: initial;
	--col-label-color: initial;
	--row-total-background-color: initial;
	--row-total-color: initial;
	--toolbar-background-color: white;
	--toolbar-color: initial;
	--detail-pane-background-color: white;
	--detail-pane-border-color: initial;
}

/*
	css resets for crossfilter-table 
*/
table.crosstab {
	width: 100%;
	max-width: 100%;
	margin: 20px 5px 20px 5px;
	background-color: var(--background-color);
	border-spacing: 0;
	border-collapse: collapse;
	border-color: var(--border-color);
	table-layout: auto; /* apply fixed class to crossfilter-table to override */
	cursor: default;
}

	table.crosstab thead,
	table.crosstab tbody,
	table.crosstab tfoot,
	table.crosstab tr,
	table.crosstab td,
	table.crosstab th {
		border-color: inherit;
	}

		/* kill the default 'focus' styling */
		table.crosstab tr:focus,
		table.crosstab td:focus,
		table.crosstab th:focus {
			outline: none
		}

	/* kill the 'button' styling added by ng-click */
	table.crosstab [role="button"] {
		cursor: default;
	}

	table.crosstab tr {
		border-bottom-style: solid;
		border-top-style: none;
		border-left-style: none;
		border-right-style: none;
		border-width: 1px;
		outline-style: none;
	}


	table.crosstab th,
	table.crosstab td {
		text-align: right;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 5px;
		padding-right: 5px;
		vertical-align: middle;
	}

	table.crosstab th.left-align,
	table.crosstab td.left-align {
		text-align: left;
	}

	/* 
	row borders 
*/

	/* border below table head */
	table.crosstab thead tr:last-child {
		border-bottom-style: solid;
		border-bottom-width: 3px;
	}

	/* border above table foot */
	/* the first tfoot element is moved to the bottom */
	table.crosstab tfoot:nth-of-type(2) tr:first-child,
	table.crosstab tfoot:only-of-type tr:first-child {
		border-top-style: solid;
		border-top-width: 3px;
	}

	/* Gender view - set fonts and cell borders */
	table.crosstab .gender.total {
		border-left-style: solid;
	}

	table.crosstab .gender.total {
		font-size: 12px;
	}

	table.crosstab th.gender,
	table.crosstab td.gender {
		font-size: 10px;
		padding-left: 2px;
	}

	/* 
	caption 
*/
	table.crosstab caption {
		background-color: darkgrey;
		padding: 0px;
	}

	/* caption-content is a transclude */
	table.crosstab caption caption-content {
		background-color: transparent;
		color: ivory;
		padding: 10px 5px 10px 5px;
		display: block;
	}
/* 
	toolbar 
	toolbar is a child of caption 
*/

		/* toolbar-content is a transclude */
		table.crosstab toolbar-content {
			background-color: var(--toolbar-background-color);
			color: var(--toolbar-color);
			padding: 0px 5px 0px 5px;
			display: block;
			/* separate the toolbar from the header */
			border-bottom-style: solid;
			border-color: var(--border-color)
		}




/* these classes may be applied on the <crossfilter-table> 
	element :
	thin			=> less padding on rows
	thick			=> more padding on rows
	striped		=> alternating stripes on rows
	colstriped => alternating stripes on columns
	fixed			=> fixed table-layout
*/
/* striped , becuase of the detail rows, this is handled 'manually'
	crossfilter-table.striped > table.crosstab > tbody > tr:not(.detail):nth-child(odd)
	*/
crossfilter-table.striped > table.crosstab > tbody > tr.stripe {
	background-color: var(--stripe-background-color);
}

crossfilter-table.striped > table.crosstab > tbody > tr {
	border-bottom-style: none;
	border-top-style: none;
}

crossfilter-table.colstriped > table.crosstab > colgroup.striped {
	background-color: var(--colstripe-background-color);
}


/* thick and thin presentations can control top/bottom pdding from class on crossfilter-table element */
crossfilter-table.thick > table.crosstab > * > tr > th,
crossfilter-table.thick > table.crosstab > * > tr > td,
crossfilter-table.thick > table.crosstab > caption > caption-content {
	padding-top: 15px;
	padding-bottom: 15px;
}

crossfilter-table.thin > table.crosstab > * > tr > th,
crossfilter-table.thin > table.crosstab > * > tr > td,
crossfilter-table.thin > table.crosstab > caption caption-content {
	padding-top: 5px;
	padding-bottom: 5px;
}

/* apply fixed table layout */
crossfilter-table.fixed table.crosstab {
	table-layout: fixed;
}

/* 
	structure - labels and totals
*/

crossfilter-table > table > tbody > tr > th.row_label {
	background-color: var(--row-label-background-color);
	color: var(--row-label-color);
}

crossfilter-table > table > thead > tr > th.col_label {
	background-color: var(--col-label-background-color);
	color: var(--col-label-color);
} 

crossfilter-table > table > tbody > tr > td.row_total {
	background-color: var(--row-total-background-color);
	color: var(--row-total-color);
}

/* column header for row labels , can control the width of this */
crossfilter-table > table > thead > tr > th.row_label_label {
/*	background-color: var(--col-label-background-color);
	color: var(--col-label-color);
*/	
	width: var(--row-label-width);
} 

/*
		interactivity - hover and selection drill down
*/

/* reset cursors - ng-clicks are present, adding role=button 
		but these may not be used
	*/
table.crosstab.col-hover thead th,
table.crosstab.row-hover tbody th,
table.crosstab.row-hover tbody td,
table.crosstab.cell-hover tbody td,
table.crosstab.any-hover thead th,
table.crosstab.any-hover tbody th,
table.crosstab.any-hover tbody td,
table.crosstab.any-hover tbody td {
	cursor: pointer;
}

table.crosstab thead th.row_label {
	cursor: default;
}

crossfilter-table > table.crosstab.col-hover > colgroup.selected,
crossfilter-table > table.any-hover > colgroup.selected {
	border-color: var(--col-selected-border-color);
	border-width: 2px;
	border-style: solid;
}

crossfilter-table > table.col-hover > colgroup.selected,
crossfilter-table > table.any-hover > colgroup.selected {
	background-color: var(--col-selected-background-color);
	color: var(--col-selected-color);
}
/* row selection */
crossfilter-table > table.crosstab.row-hover > tbody > tr.selected,
crossfilter-table > table.crosstab.any-hover > tbody > tr.selected {
	outline: var(--row-selected-border-color) auto 1px;
	background-color: var(--row-selected-background-color);
	color: var(--row-selected-color);
}
	/* row selection animation */
	table.crosstab.row-hover tr.selected-add,
	/*	table.crosstab.row-hover tr.selected-add.selected,*/
	table.crosstab.any-hover tr.selected.selected-add {
		transition: none 40ms;
		outline: green solid 6px;
	}

/* cell selection */
table.crosstab.cell-hover td.selected,
table.crosstab.any-hover td.selected {
	outline: var(--cell-selected-border-color) auto 1px;
}
	/* cell selection animation */
	table.crosstab.cell-hover td.selected.selected-add,
	table.crosstab.any-hover td.selected.selected-add {
		transition: all 5s;
		outline: green solid 2px;
	}


	table.crosstab.cell-hover td.selected.gender,
	table.crosstab.any-hover td.selected.gender {
		outline: none;
		border-top-style: solid;
		border-bottom-style: solid;
		border-color: black;
		border-right-style: none;
		border-left-style: none;
		border-width: 3px;
	}

		table.crosstab.cell-hover td.selected.gender.total,
		table.crosstab.any-hover td.selected.gender.total {
			border-left-style: solid;
		}

		table.crosstab.cell-hover td.selected.gender.f,
		table.crosstab.any-hover td.selected.gender.f {
			border-right-style: solid;
		}

crossfilter-table table.row-hover tbody tr:not(.detail):hover td,
crossfilter-table table.row-hover tbody tr:not(.detail):hover th,
crossfilter-table table.any-hover tbody tr:not(.detail):hover th:hover {
	background-color: var(--row-hover-background-color);
	color: var(--row-hover-color);
}

crossfilter-table table.cell-hover > tbody > tr:not(.detail):hover > td:hover,
crossfilter-table table.any-hover > tbody > tr:not(.detail):hover > td:hover {
	background-color: var(--cell-hover-background-color);
	color: var(--cell-hover-color);
}

crossfilter-table > table.col-hover > thead > tr:hover > td,
crossfilter-table > table.col-hover > thead > tr:hover > th:hover, 
crossfilter-table > table.any-hover > thead > tr:hover > th:hover {
	background-color: var(--col-hover-background-color);
	color: var(--col-hover-color);
}


/* detail view */
crossfilter-table > table.crosstab > tbody > tr.detail > td.detail-pane {
	background-color: var(--detail-pane-background-color);
	border-color: var(--detail-pane-border-color);
	padding: 0px; 
	border-style: none;
	overflow:hidden; 
	border-left-style:solid;
}

/* slide down animation of detail */
.animate-slide {
	position: relative;
	transition: all .8s ease-out;
}
	/* The starting CSS styles for the enter animation */
	.animate-slide.ng-enter,
	.animate-slide.ng-leave.ng-leave-active {
		top: -200px;
		opacity: 1;
	}

		/* The finishing CSS styles for the enter animation */
		.animate-slide.ng-enter.ng-enter-active,
		.animate-slide.ng-leave {
			top: 0px;
			opacity: 1;
		}