/**
 * Site style file.
 *
 * @author      Erki Suurjaak
 * @created     07.06.2016
 * @modified    18.06.2019
 */

* {
  margin: 0;
  padding: 0;
  font-family: Avenir, sans-serif;
}
html, body {
  height: 100%;
  width: 100%;
}
body.login {
  overflow: hidden;
}
/** Images preload. */
body:before {
  content: "";
  background: url("media/icon-edit.png"), url("media/icon-hand.png"), url("media/logo.png"), url("media/loading.gif"), url("media/icon-reports.png"), url("media/icon-search.png"), url("media/icon-legend.png"), url("media/icon-settings.png"), url("media/icon-toggle.png"), url("media/markersize.svg"), url("media/marker-airquality.png"), url("media/marker-sensor.png"), url("media/marker-lightsensor.png"), url("media/marker-thermometer.png"), url("media/heatmap-legend.png"), url("vendor/images/layers.png"), url("media/basemap.png"), url("media/battery.png");

  height: 0;
  visibility: hidden;
  width: 0;
}
a {
  cursor: pointer;
}
label::first-letter {
  text-transform: capitalize;
}
lightning button,
login button,
clientsite button {
  border-style: solid;
  border-width: 2px;
  border-radius: 8px;
  padding: 5px 10px 5px 10px;
  min-height: 34px;
  min-width: 150px;
  transition: all .3s ease-in-out;
  outline: 0;
  border-color: #00b5cc;
  color: #00b5cc;
  background-color: white;
  white-space: nowrap;
}
button:hover {
  background-color: #00b5cc;
  color: #fff;
}
button.dark {
  border-color: #727272;
  color: #727272;
}
button.dark:hover {
  background-color: #727272;
  color: #fff;
}
button.important {
  border-color: red;
  color: red;
}
button.important:hover {
  background-color: red;
  color: #fff;
}
button.strong {
  background-color: #00b5cc;
  color: white;
}
button.small {
  font-size: 0.8em;
  min-height: 0;
  min-width: 0;
  padding: 2px 8px;
}
button:disabled {
  color: #d4d0c8;
  border-color: #d4d0c8;
  pointer-events: none;
}


lightning #wrap {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
  width: 100%;
}



/** Application header styling. */
menuheader #header {
  color: white;
  border: 1px solid transparent;
}
menuheader #header .user-menu-button {
  display: block;
  height: 40px;
  margin: 10px 0;
  position: relative;
  z-index: 4000;
  text-decoration: none;
}
menuheader #header .user-menu-button:hover {
  background: #00CBDC;
}
menuheader #header .user-menu-button .logout {
  width: 40px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  margin: 0 10px 0 2px;
  white-space: nowrap;
  text-align: right;
  text-transform: uppercase;
  transition: width .4s ease;
}
menuheader #header .user-menu-button .logout .user {
  display: none;
}
.menu-full menuheader #header .user-menu-button .logout {
  width: 180px;
}
.menu-full menuheader #header .user-menu-button .logout .user {
  position: absolute;
  bottom: -3px;
  right: 0;
  display: block;
  font-size: 11px;
  overflow: hidden;
  text-align: center;
  text-transform: initial;
  width: 50%;
}
menuheader #header .user-menu-button i {
  font-size: 24px;
}
menuheader .thinnect-header-text {
  height: 40px;
  width: 40px;
  margin: 12px 2px;
  background-size: 180px 40px;
  background-image: url("media/thinnect.svg");
  background-position: -68px 0;
  background-repeat: no-repeat;
  transition: all 0.4s ease;
  overflow: hidden
}
.menu-full menuheader .thinnect-header-text {
  width: 200px;
  background-position: top center;
}

menuheader #header .popup {
  background: white;
  position: absolute;
  left: 42px;
  top: 0;
  padding: 10px;
  border: 1px solid lightgray;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  z-index: 5000;
}
menuheader #header .popup button {
  font-size: 0.9em;
}
menuheader #header .popup button + button {
  margin-top: 5px;
}



/** Content top header styling. */
contentheader .content-header {
  height: 65px;
  margin: 10px 0;
  position: relative;
}
contentheader .title {
  color: #00b5cc;
  font-size: 40px;
  margin-left: 25px;
}
contentheader .EAS {
  position: absolute;
  right: 350px;
}
contentheader .content-header .hr-line {
  position: absolute;
  bottom: 0;
  right: 15px;
  left: 15px;
  border-bottom: 1px solid #00b5cc;
}
contentheader .clock {
  color: #00b5cc;
  font-size: 1.5em;
  margin: 10px 20px;
  position: absolute;
  right: 0;
  top: 0;
}



/** Application menu styling. */
appmenu {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: fixed;
  z-index: 2000;
  width: 42px;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #00b5cc;
  color: white;
  transition: width 0.4s ease;
}
appmenu #menu {
  border: 2px solid transparent;
  overflow-y: auto;
}
appmenu #menu span {
  display: inline;
  margin: 5px;
}
appmenu i {
  font-size: 24px;
  margin: 1px;
}
appmenu a.toggle {
  position: absolute;
  bottom: 0px;
  right: 0;
  left: 0;
  padding: 3px;
}
appmenu a.toggle:hover {
  background: #00CBDC;
}
appmenu a.toggle img {
  float: right;
}
appmenu .hr-line-white {
  border-top: 1px solid #ccddff;
  margin: 5px;
  transition: margin 0.4s ease;
}
.menu-full appmenu .hr-line-white {
  margin: 5px 15px;
}

.menu-full appmenu {
  width: 200px;
}
.menu-full appmenu a.toggle img {
  transform: rotate(180deg);
}

appmenu ul {
  overflow-x: hidden;
}
appmenu li {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 12pt;
  padding: 2px;
  white-space: nowrap;
}
appmenu img {
  margin: 2px;
  height: 32px;
  width: 32px;
}
appmenu li:hover {
  background: #00CBDC;
}
appmenu li.active {
  background: #0e9cae;
}
appmenu #menu li.nesting-1 span {
  font-size: 0.8em;
}
appmenu #menu li.nesting-2 span {
  font-size: 0.75em;
}
appmenu #menu li.nesting-3 span {
  font-size: 0.7em;
}




/** Main content section styling. */
#content {
  /*
  width: 100%;
  height: 100%;
  */
  height: 100%;
  margin-left: 42px;
  transition: margin-left 0.4s ease;
  width: 100%;
}
.menu-full #content {
  margin-left: 200px;
}



/** Application footer styling. */
appfooter #footer {
  position: absolute;
  z-index: 2001;
  bottom: 0px;
  height: 25px;
  width: 100%;
  background: lightgray;
}
appfooter #footer span.status {
  display: inline-block;
  padding: 5px;
}
appfooter #footer span.status.error {
  color: red;
}



/** Area map component styling. */
appmap, appmap > div, appmap div.map {
  background: #fff;
  height: 100%;
  width: 100%;
}
appmap div.buttons button {
  font-size: 0.9em;
  min-height: 29px;
  min-width: 100px;
}
appmap div.map div.heatmap-legend {
  background-image: url("media/heatmap-legend.png");
  background-repeat: no-repeat;
  border-radius: 5px;
  display: block;
  height: 154px;
  opacity: 0.7;
  width: 50px;
}
appmap div.markersize {
  background: white;
  border: 1px solid lightgray;
  border-radius: 3px;
}
appmap div.markersize > a {
  border-left: 1px solid lightgray;
  cursor: pointer;
  display: table-cell;
  min-width: 28px;
  text-align: center;
  vertical-align: middle;
}
appmap div.markersize > a:first-child {
  border-left: none;
}
appmap div.markersize > a.selected {
  background-color: #f4f4f4;
  cursor: default;
}
appmap div.markersize > a.selected > img {
  opacity: 0.25;
}
appmap div.markersize > a > img {
  background-image: url("media/markersize.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 0;
  height: 0;
}



/** Application table styling. */
apptable > div {
  display: flex;
  flex-direction: column;
  height: calc(100% - 85px);
  overflow: auto;
}
apptable > div > * {
  margin: 10px;
}
table.data {
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: auto;
  overflow-x: scroll;
  width: 100%;
}
table.data th {
  background: #E9E9E9;
  text-transform: capitalize;
  white-space: nowrap;
}
table.data th {
  background-color: #00b5cc;
  color: white;
  cursor: pointer;
  font-weight: normal;
}
table.data.edit th {
  cursor: default;
}
datatable table.data th:after {
  content: "\20\20";
  font-size: 0.8em;
}
datatable table.data th.sorted.asc:after {
  content: "\20\25b2";
}
datatable table.data th.sorted.desc:after {
  content: "\20\25bc";
}
datatable table.data.edit th.required:after {
  content: " *";
}
datatable table.data tr.highlight,
datatable table.data tr:hover {
  background: #EAEAEA;
  cursor: pointer;
}
datatable table.data.edit tr:hover {
  background: inherit;
  cursor: default;
}


datatable table.data tr.groupby {
  background-color: transparent;
}
datatable table.data tr.groupby:hover {
  background-color: transparent;
  cursor: default;
}
datatable table.data tr.groupby td {
  border-bottom: 1px solid #00b5cc;
}
datatable table.data tbody tr.groupby:nth-child(n+2) td {
  border-top: 2px solid #00b5cc;
}



table.data th {
  border: 1px solid white;
  padding: 4px;
  vertical-align: top;
}
table.data td {
  border-bottom: 1px solid #00b5cc;
  color: #565656;
  padding: 4px;
  vertical-align: top;
}
ul.topfilters {
  cursor: pointer;
  width: calc(100% - 30px);
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 15px 5px 15px;
}
ul.topfilters li {
  background: #F5F5F5;
  color: #ADADAD;
  display: table-cell;
  padding: 10px;
  text-align: center;
}
ul.topfilters li:hover {
  color: #00b5cc;
}
ul.topfilters li.active {
  color: #00b5cc;
  border-bottom: 2px solid #00b5cc;
}
datatable > div > div.buttons {
  display: flex;
  min-height: 34px;
}
datatable > div > div.buttons > * {
  margin-right: 5px;
}
datatable > div > div.buttons > *:last-child {
  margin-left: auto;
  margin-right: 0;
}
datatable > div > div.buttons > button:only-child {
  margin-left: 0;
}
datatable input[type=search] {
  -webkit-appearance: searchfield;
  background-image: url("media/icon-search.png");
  background-repeat: no-repeat;
  float: right;
  font-size: 1.2em;
  height: 2em;
  padding-left: 32px;
}
datatable input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  position: relative;
  right: 8px;
}
datatable div.minimap {
  border: 1px solid #00b5cc;
  border-radius: 5px;
  height: 330px;
  padding: 5px 2px;
}
datatable div.minimap > appmap > div {
  height: 320px;
}
div.minimap {
  position: relative;
  z-index: 0;
}
div.minimap.off {
  border-color: transparent;
  height: auto;
  min-height: 20px;
  padding: 0;
}
div.minimap.off > appmap {
  display: none;
}
div.minimap > button.small {
  position: absolute;
  right: 4px;
  z-index: 2000;
}
datatable div.minimap + div.buttons {
  margin-top: 10px;
}


input[type=number]:-moz-read-only {
  /** Firefox shows spinner arrows on readonly controls */
  -moz-appearance: textfield;
}



/** Datafield styling. */
datafield input, datafield select, datafield textarea {
  border: 1px solid #808080;
  padding: 1px;
  width: 100%;
  min-width: 180px;
}
datafield input.date {
  min-width: initial;
  width: 100px;
}
datafield input[type=checkbox] {
  min-width: initial;
  width: 100%;
}
datafield span.textarea {
  white-space: pre-line;
}
datafield.dirty input, datafield.dirty select, datafield.dirty textarea {
  border: 1px dotted green;
}
datafield.error input, datafield.error select, datafield.error textarea, datafield.error multiselect > div, datafield.error multiselect > div > ul {
  background: pink;
}


/** Range input cross-browser styling. */
datafield input[type=range] {
    -webkit-appearance: none;
    border: 1px solid white;
    display: inline-block;
    min-width: initial;
}
datafield input[type=range]::-webkit-slider-runnable-track {
    width: 100px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
datafield input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #00b5cc;
    margin-top: -3px;
}
datafield input[type=range]:focus {
    outline: none;
}
datafield input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

datafield input[type=range]::-moz-range-track {
    width: 100px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
datafield input[type=range]::-moz-range-thumb {
    border: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #00b5cc;
}

/*hide the outline behind the border*/
datafield input[type=range]:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

datafield input[type=range]::-ms-track {
    width: 450px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
datafield input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
datafield input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
datafield input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #00b5cc;
}
datafield input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
datafield input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}



/** Map popup dialog styling. */
mappopup {
  min-width: 200px;
}
mappopup table {
  margin-bottom: 10px;
  width: 100%;
}
mappopup table td:first-child {
  font-weight: 500;
  padding-right: 4px;
  text-transform: capitalize;
}
mappopup table td {
  vertical-align: top;
}
mappopup div.links {
  display: flex;
}
mappopup a.edit {
  background: url("media/icon-edit.png");
  display: inline-block;
  height: 32px;
  margin-left: auto;
  width: 32px;
}
mappopup a.open {
  background: url("media/icon-hand.png");
  display: inline-block;
  height: 32px;
  margin-right: auto;
  width: 32px;
}
mappopup button {
  font-size: 0.9em;
  min-height: 29px;
  min-width: 100px;
}
mappopup input, mappopup select {
  box-sizing: border-box;
  display: block;
  min-width: initial;
  width: 100%;
}
mappopup label {
  white-space: nowrap;
}
mappopup .extrabuttons {
  display: inline-block;
  float: right;
}



/** Pager component styling. */
pager > div {
  color: #00b5cc;
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  width: 100%;
}
pager span:first-child {
  padding: 6px;
}
pager a {
  border: 1px solid #00b5cc;
  color: #00b5cc;
  display: table-cell;
  min-height: 30px;
  min-width: 30px;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}
pager a:visited {
  color: #00b5cc;
}
pager a:not([href]) {
  color: white;
}
pager a.empty {
  color: darkgray;
  cursor: default;
  min-width: auto;
  padding: 3px;
}
pager a.empty:hover {
  text-decoration: none;
}
pager a:first-child {
  border-radius: 5px 0px 0px 5px;
}
pager a.active {
  background: #0e9cae;
  color: white;
}
pager a:last-child {
  border-radius: 0px 5px 5px 0px;
}



.centerer {
  display: table;
  height: 100%;
  width: 100%;
}
.centered {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.topbottom {
  display: flex;
  flex-direction: column;
  margin: 10px;
}
.topbottom > :first-child {
  flex-grow: 1;
}
.leftright {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}
.leftright > :first-child {
  flex-shrink: 0;
}
.leftright .topbottom {
  overflow-y: auto;
}
.hidden {
  display: none;
}
.scrollable {
  margin-bottom: auto;
  overflow: auto;
}

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}
.spin {
  animation: spin 2s infinite linear;
}



/** Login page styling. */
login img.logo {
  width: 350px;
  height: 100px;
}
login div.main {
  display: inline-block;
  height: 350px;
  width: 350px;
  background-image: url("media/logo.png");
  background-size: 350px 60px;
  background-repeat: no-repeat;
  padding-top: 80px;
}
login input[type=text], login input[type=password]  {
  display: block;
  font-size: 1.2em;
  height: 2em;
  margin-bottom: 10px;
  padding-left: 10px;
  width: 336px;
}
login input[type=checkbox] {
  height: 16px;
  margin-right: 5px;
  width: 16px;
}
login button.login {
  display: block;
  margin-left: auto;
}
login label {
  display: table;
  font-size: 0.8em;
  height: 2em;
  opacity: 0.7;
  text-align: left;
  vertical-align: middle;
}
login * {
  margin-top: 5px;
  margin-bottom: 5px;
}
login button.minor {
  border-color: transparent;
  font-size: 0.9em;
  width: 250px;
}
login span.msg {
  color: green;
  font-size: 0.8em;
  line-height: 24px;
}
login span.msg.error {
  color: red;
}
login span.msg.loading::after {
  background: url("media/loading.gif") no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  content: "";
  position: relative;
  top: 3px;
  left: 5px;
}



/** Relogin section styling. */
relogin span.msg {
  font-size: 0.9em;
}
relogin span.msg {
  color: green;
  font-size: 0.8em;
  line-height: 24px;
}
relogin span.msg.error {
  color: red;
}
relogin span.msg.loading::after {
  background: url("media/loading.gif") no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  content: "";
  position: relative;
  top: 3px;
  left: 5px;
}



/** Dropdown component styling. */
dropdown {
  font: 16px Avenir, sans-serif;
}
dropdown > div {
  position: relative;
  width: 200px;
  margin: 0 auto;
  padding: 8px 15px;

  background: #00b5cc;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  color: white;
  cursor: pointer;
  outline: none;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
dropdown > div:after {
  /* Little arrow */
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #82d1ff transparent;
}
dropdown span.selected {
  display: block;
  max-width: 180px;
  overflow-x: hidden;
  white-space: nowrap;
}

dropdown ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  background: #fff;
  border-radius: 0 0 5px 5px;
  border: 1px solid rgba(0,0,0,0.2);
  border-top: none;
  border-bottom: none;
  list-style: none;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;

  max-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
dropdown li {
  border-bottom: 1px solid #e6e8ea;
  padding: 0 10px;
}
dropdown li a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px 0;
  transition: all 0.3s ease-out;
}
dropdown li:last-of-type a {
  border: none;
}
dropdown li i {
  margin-right: 5px;
  color: inherit;
  vertical-align: middle;
}
dropdown li a {
  color: black !important;
}
dropdown li:hover a {
  color: #57a9d9;
}

/* Active state */
dropdown > div.active {
  border-radius: 5px 5px 0 0;
  box-shadow: none;
  border-bottom: none;
  color: white;
}
dropdown div.active:after {
  border-color: #EEE transparent;
}
dropdown div.active ul {
  border-bottom: 1px solid rgba(0,0,0,0.2);
  max-height: 400px;
}
dropdown.disabled > div {
  background: lightgray;
  cursor: default;
}
dropdown.disabled > div:after {
  border-color: white transparent;
}
dropdown li.blank a {
  color: gray !important;
}
dropdown li.nesting-1 { padding-left:  20px; }
dropdown li.nesting-2 { padding-left:  40px; }
dropdown li.nesting-3 { padding-left:  60px; }
dropdown li.nesting-4 { padding-left:  80px; }
dropdown li.nesting-5 { padding-left: 100px; }
dropdown li.nesting-6 { padding-left: 120px; }
dropdown li.nesting-7 { padding-left: 140px; }
dropdown li.nesting-8 { padding-left: 160px; }
dropdown li.nesting-9 { padding-left: 180px; }

div.minimap dropdown div.active ul {
  max-height: 250px;
}



div.appdialog {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10000;
}
div.shadow {
  background: black;
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 4000;
}
div.appdialog div.dialog {
  background: white;
  border: 1px solid #5C5C5C;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 400px;
  opacity: 1;
  text-align: center;
  z-index: 10001;
}
div.appdialog div.content {
  max-height: 400px;
  overflow: auto;
  padding: 20px 20px 15px 20px;
  white-space: pre-line;
}
div.appdialog div.buttons {
  padding: 0px 20px 20px 20px;
  white-space: nowrap;
}
div.appdialog label.prompt {
  display: block;
  margin-top: 10px;
  text-align: left;
}
div.appdialog label.prompt span {
  margin-left: 10px;
}
div.appdialog textarea {
  display: block;
  min-height: 50px;
  width: 100%;
}
div.appdialog div.dropdown-wrapper {
  height: 30px;
}
div.appdialog div.dropdown-wrapper > div {
  position: absolute;
}
div.appdialog dropdown > div {
  position: relative;
  left: 50px;
}
div.appdialog dropdown ul {
  text-align: left;
}



/** Itemlist component styling. */
itemlist > div {
  height: 100%;
}
itemlist div.search {
  position: fixed;
}
itemlist ul {
  height: calc(100% - 56px);
  margin: 0;
  min-width: 200px;
  max-width: 300px;
  overflow-y: auto;
  position: relative;
  top: 52px;
  white-space: nowrap;
}
itemlist li {
  cursor: pointer;
  padding: 16px;
  overflow-x: hidden;
  position: relative;
  text-overflow: ellipsis;
}
itemlist li:hover {
  background-color: #EAEAEA;
}
itemlist li.active {
  background-color: lightgray;
}
itemlist input[type=search] {
  -webkit-appearance: textfield;
  background-image: url("media/icon-search.png");
  background-repeat: no-repeat;
  font-size: 1.2em;
  height: 2em;
  padding-left: 32px;
  width: 200px;
}
itemlist input[type=search]::-webkit-search-cancel-button {
  position: relative;
  right: 8px;
}
itemlist li.nesting-1 { padding-left: 20px; }
itemlist li.nesting-2 { padding-left: 30px; }
itemlist li.nesting-3 { padding-left: 40px; }
itemlist li.nesting-4 { padding-left: 50px; }
itemlist li.nesting-5 { padding-left: 60px; }
itemlist li.nesting-6 { padding-left: 70px; }
itemlist li.nesting-7 { padding-left: 80px; }
itemlist li.nesting-8 { padding-left: 90px; }
itemlist li.nesting-9 { padding-left: 100px; }



/** Leaflet map items styling. */
.leaflet-marker-pane .leaflet-marker-icon span.title,
.leaflet-marker-pane .leaflet-marker-icon span.value {
  color: black;
  display: block;
  font-size: 16px;
  left: 50%;
  line-height: 1;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  width: 50px;
}
.leaflet-marker-pane .leaflet-marker-icon span.title {
  bottom: 28px;
}
.leaflet-marker-pane .leaflet-marker-icon span.value {
  top: 28px;
}
.leaflet-container.titles-hidden .leaflet-marker-pane .leaflet-marker-icon span.title,
.leaflet-container.values-hidden .leaflet-marker-pane .leaflet-marker-icon span.value,
.leaflet-container.battery-hidden .leaflet-marker-pane .leaflet-marker-icon span.battery,
.leaflet-container.motionlight-hidden .leaflet-marker-pane .leaflet-marker-icon span.pieclock,
.leaflet-container.events-hidden .leaflet-overlay-pane svg.leaflet-zoom-animated path.event {
  display: none;
}
.leaflet-marker-pane .leaflet-marker-icon.size-16 span.title {
  font-size: 12px;
  bottom: 14px;
}
.leaflet-marker-pane .leaflet-marker-icon.size-16 span.value {
  font-size: 12px;
  top: 21px;
}
.leaflet-marker-pane .leaflet-marker-icon.sensors span.title,
.leaflet-marker-pane .leaflet-marker-icon.sensors span.value {
  color: #00B5CC;
}
.leaflet-marker-pane .leaflet-marker-icon.gateways span.title,
.leaflet-marker-pane .leaflet-marker-icon.gateways span.value {
  color: green;
}
.leaflet-marker-pane .leaflet-marker-icon.illuminance img, .map-legend-control .illuminance {
  background-image: url(media/marker-lightsensor.png);
  background-size: 100%;
  object-position: -99999px 99999px;
}
.leaflet-marker-pane .leaflet-marker-icon.sensors.illuminance:not(.downtone) span.title,
.leaflet-marker-pane .leaflet-marker-icon.sensors.illuminance:not(.downtone) span.value {
  color: royalblue;
}
.leaflet-marker-pane .leaflet-marker-icon.temperature img, .map-legend-control .temperature {
  background-image: url(media/marker-thermometer.png);
  background-size: 100%;
  object-position: -99999px 99999px;
}
.leaflet-marker-pane .leaflet-marker-icon.sensors.temperature:not(.downtone) span.title,
.leaflet-marker-pane .leaflet-marker-icon.sensors.temperature:not(.downtone) span.value {
  color: royalblue;
}
.leaflet-marker-pane .leaflet-marker-icon.co2 img, .map-legend-control .co2,
.leaflet-marker-pane .leaflet-marker-icon.no2 img, .map-legend-control .no2,
.leaflet-marker-pane .leaflet-marker-icon.pm10 img, .map-legend-control .pm10,
.leaflet-marker-pane .leaflet-marker-icon.pm2_5 img, .map-legend-control .pm2_5 {
  background-image: url(media/marker-airquality.png);
  background-size: 100%;
  object-position: -99999px 99999px;
}
.leaflet-marker-pane .leaflet-marker-icon.sensors.co2:not(.downtone) span.title,
.leaflet-marker-pane .leaflet-marker-icon.sensors.no2:not(.downtone) span.title,
.leaflet-marker-pane .leaflet-marker-icon.sensors.pm10:not(.downtone) span.title,
.leaflet-marker-pane .leaflet-marker-icon.sensors.pm2_5:not(.downtone) span.title,
.leaflet-marker-pane .leaflet-marker-icon.sensors.co2:not(.downtone) span.value,
.leaflet-marker-pane .leaflet-marker-icon.sensors.no2:not(.downtone) span.value,
.leaflet-marker-pane .leaflet-marker-icon.sensors.pm10:not(.downtone) span.value,
.leaflet-marker-pane .leaflet-marker-icon.sensors.pm2_5:not(.downtone) span.value {
  color: green;
}
.leaflet-marker-pane .leaflet-marker-icon.downtone img, .map-legend-control .downtone {
  -webkit-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
.leaflet-marker-pane .leaflet-marker-icon.downtone span.title,
.leaflet-marker-pane .leaflet-marker-icon.downtone span.value {
  color: gray;
}
.leaflet-marker-pane .leaflet-marker-icon.lowlight,
.leaflet-marker-pane .leaflet-marker-icon.lowlight span.title {
  -webkit-filter: grayscale(100%) opacity(45%);
  -moz-filter: grayscale(100%) opacity(45%);
  -o-filter: grayscale(100%) opacity(45%);
  filter: grayscale(100%) opacity(45%);
}
.leaflet-marker-pane .leaflet-marker-icon.sensors.highlight {
  filter: drop-shadow(0px 0px 6px #00B5CC);
  -webkit-filter: drop-shadow(0px 0px 6px #00B5CC);
  -moz:filter: drop-shadow(0px 0px 6px #00B5CC);
  -o-filter: drop-shadow(0px 0px 6px #00B5CC);
}

.leaflet-marker-pane .leaflet-marker-icon .battery {
  background-image: url("media/battery.png");
  background-repeat: no-repeat;
  background-size: 16px;
  color: gray;
  display: inline-block;
  font-size: 10px;
  padding-left: 17px;
  position: relative;
  top: -4px;
}
.leaflet-marker-pane .leaflet-marker-icon.size-16 .battery {
  background-size: 13px;
  background-position-y: -2px;
  font-size: 8px;
  padding-left: 14px;
  top: -6px;
}


/** Styling for rectangle corner icons. */
.leaflet-marker-pane .leaflet-interactive.leaflet-vertex-icon {
  cursor: cell;
}
.leaflet-map-pane svg.leaflet-zoom-animated path.leaflet-path-draggable {
  cursor: move;
}


/* Sensor event */
.leaflet-overlay-pane svg.leaflet-zoom-animated path.event {
  cursor: inherit;
  fill: red;
  fill-opacity: 0.4;
  stroke: red;
  stroke-width: 2px;
  animation: myblinker 2s ease-out;
  animation-iteration-count: 3;
}
@keyframes myblinker { 50% { opacity: 0.25; } }


.leaflet-overlay-pane .leaflet-heatmap-layer {
  opacity: 0.6;
}



.leaflet-control {
  z-index: 0;
}
.leaflet-control.leaflet-control-areas {
  z-index: 1;
}
.leaflet-control-layers-scrollbar {
	overflow-y: auto;
}
.leaflet-control-layers-overlays label span {
  text-transform: capitalize;
}

/** Styling for marker legend control. */
.map-legend-control {
  width: 36px;
  height: 36px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  background: #FFF;
  border-radius: 5px;
}
.map-legend-control a {
  background-image: url("media/icon-legend.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
  height: 36px;
  width: 36px;
}
.map-legend-control .content {
  display: none;
  padding: 3px;
  max-height: 400px;
  overflow-y: auto;
}
.map-legend-control .content > span {
  display: block;
  font-weight: bold;
  font-size: 0.8em;
  text-align: center;
  text-transform: uppercase;
}
.map-legend-control .content > div {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.map-legend-control .content .title {
  padding: 5px;
}
.map-legend-control.expanded {
  width: auto;
  height: auto;
}
.map-legend-control.expanded a {
  display: none;
}
.map-legend-control.expanded .content {
  display: block;
}



/** Area section styling. */
areasection fieldset.area {
  border-radius: 5px;
  border: 1px solid #0e9cae;
  margin-bottom: 10px;
  padding: 5px;
  width: 522px;
}
areasection fieldset.area legend {
  color: #00b5cc;
  width: initial;
  margin: 0;
  font-size: inherit;
  font-weight: bold;
  border: 0;
  padding: 0px 5px;
}
areasection table.area {
  color: #565656;
  width: 510px;
}
areasection table.area th {
  color: #00b5cc;
  font-weight: 500;
  padding-bottom: 5px;
  padding-right: 50px;
  text-align: left;
  text-transform: capitalize;
  vertical-align: top;
  white-space: nowrap;
}
areasection table.area td {
  padding-bottom: 5px;
}
areasection table.area input, areasection table.area textarea {
  resize: vertical;
  width: 100%;
}
areasection div.buttons {
  display: flex;
  max-width: 600px;
  padding-bottom: 30px;
}
areasection div.buttons > * {
  margin-right: 5px;
}
areasection div.buttons > button ~ button:last-child {
  margin-left: auto;
  margin-right: 0;
}

areasection canvas.cropper {
  display: none;
}
areasection itemlist li {
  padding: 12px;
}
areasection div.minimap > appmap > div {
  height: 500px;
}
areasection div.main {
  border-left: 2px solid lightgray;
  overflow: auto;
  padding-left: 50px;
  width: 100%;
}
areasection div.buttons {
  padding: 10px 0;
}
areasection table.area td > button.dark {
  float: right;
}
areasection table.area tr.order span {
  float: right;
}
areasection table.area tr.order button {
  margin-left: 5px;
}



.panel.panel-thinnect {
  border-color: #00b5cc;
}
.panel-thinnect > .panel-heading {
  background-color: #00b5cc;
  color: #fff;
}
.panel > .panel-body {
  padding: 0;
}
.panel .panel-heading button {
  float: right;
  height: 30px;
  left: 11px;
  min-height: 30px;
  min-width: 120px;
  padding: 3px 5px;
  position: relative;
  top: -5px;
}
.height-animated {
  transition: max-height .4s ease-out;
}
.alert-table-row {
  color: #222;
  border-top: 1px solid #eee;
  line-height: 32px;
  white-space: nowrap;
}
.panel .panel-header.tabbed {
  background-color: #f5f5f5;
  padding: 4px 15px 0 15px;
  border-bottom: 1px solid #ddd;
}
.panel > .panel-footer.tabbed {
  padding: 0 15px 4px 15px;
}
.nav-tabs.nav-justified > li > a {
  position: relative;
  padding: 7px 5px;
  top: 1px;
  color: #0e9cae;
}
.tabs-bottom.nav-tabs.nav-justified > li > a {
  border-radius: 0 0 4px 4px;
  border-bottom-color: transparent;
  top: -1px;
}
.tabs-bottom.nav-tabs.nav-justified a:hover {
  border-top-color: #ddd;
}
.tabs-bottom.nav-tabs.nav-justified > .active > a,
.tabs-bottom.nav-tabs.nav-justified > .active > a:focus,
.tabs-bottom.nav-tabs.nav-justified > .active > a:hover {
  border-bottom-color: #ddd;
  border-top-color: #fff;
  color: #222;
}
.tabs-bottom.nav-tabs.nav-justified > .active > button {
  background-color: transparent;
  border-radius: 50%;
  border-width: 0;
  color: #555;
  min-height: 0;
  min-width: 0;
  padding: 1px 3px 0 3px;
  position: absolute;
  right: 7px;
  top: 8px;
}
.tabs-bottom.nav-tabs.nav-justified > .active > button:hover {
  background-color: #555;
  color: #fff;
}
@media (max-width: 767px) {
  .tabs-bottom.nav-tabs.nav-justified > .active > a,
  .tabs-bottom.nav-tabs.nav-justified > .active > a:hover,
  .tabs-bottom.nav-tabs.nav-justified > .active > a:focus {
    border-color: #ddd;
    border-radius: 4px;
  }

  .tabs-bottom.nav-tabs.nav-justified > li > a:hover,
  .tabs-bottom.nav-tabs.nav-justified > li > a:focus {
    border-radius: 4px;
    border-top-color: transparent;
  }

  .tabs-bottom.nav-tabs.nav-justified > li:first-child > a:hover,
  .tabs-bottom.nav-tabs.nav-justified > li:first-child > a:focus {
    border-top-color: #ddd;
  }

  .tabs-bottom.nav-tabs.nav-justified > li.active:first-child > a,
  .tabs-bottom.nav-tabs.nav-justified > li.active:first-child > a:hover,
  .tabs-bottom.nav-tabs.nav-justified > li.active:first-child > a:focus {
    border-radius: 0 0 4px 4px;
    border-top-color: #fff;
  }
}





/** Selectbar component styling.  */
selectbar > div {
  display: inline-block;
}
selectbar > div > span {
  border-radius: 2px;
  border: 1px solid #888;
  color: #888;
  cursor: pointer;
  display: inline-block;
  margin-right: 5px;
  padding: 3px;
  text-align: center;
  width: 35px;
}
selectbar > div > span.selected {
  background: #00b5cc;
  border-color: #00b5cc;
  color: white;
}
selectbar > div.disabled > span {
  cursor: default;
}

div.settings selectbar > div.disabled > span {
  background: #eee;
  border-color: #eee;
  color: lightgray;
}
div.settings selectbar > div.disabled > span.selected {
  background: #d4d0c8;
  border-color: #d4d0c8;
  color: #b5aa99;
}


/** Dashboard styling.  */
dashboard > div {
  color: #0e9cae;
  height: calc(100% - 85px);
  overflow: auto;
  padding: 10px 0;
  width: 100%;
}

dashboard .periodselect {
  text-align: right;
}
dashboard .periodselect a {
  color: #0e9cae;
  padding: 5px;
  text-decoration: none;
}
dashboard .periodselect a:hover {
  text-decoration: underline;
}
dashboard .periodselect a.active {
  font-weight: bold;
  cursor: default;
  text-decoration: none;
}
dashboard .panel-body .spinner {
  align-items: center;
  display: flex;
  font-size: 2em;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
}
dashboard .panel-body .spinner > * {
  z-index: 401;
}




dashboard .plot-container {
  height: 320px;
  overflow: hidden;
}
.plot-loading {
  color: #0e9cae;
  height: 250px;
  line-height: 250px;
  text-align: center;
  font-size: 220%;
}


/** Multiselect component styling.  */
multiselect > div {
  background-color: white;
  color: #565656;
  font-size: 14px;
  max-width: 500px;
  position: relative;
}
multiselect ul {
  list-style-type: none;
  padding: 0;
  margin-left: 0;
}
multiselect ul.selecteds {
  border-collapse: separate;
  border-radius: 5px;
  display: table;
  height: 29px;
  margin: 0;
  min-width: 200px;
  padding: 2px;
  padding-right: 25px;
  table-layout: fixed;
  width: 100%;
}
multiselect > div.editmode ul.selecteds,
multiselect > div.opened ul.selections {
  border: 1px solid gray;
}
multiselect > div.editmode ul.selecteds:after {
  content: "\25bc"; /* down arrow ▼ */
  font-size: 0.85em;
  padding: 12px 8px;
  position: absolute;
  right: -3px;
  top: -4px;
  text-align: center;
  height: 100%;
  pointer-events: none;
  box-sizing: border-box;
}
multiselect ul.selecteds li span {
  border: 1px solid gray;
  border-radius: 4px;
  float: left;
  margin: 2px;
  padding: 0 3px 0 3px;
  z-index: 1;
}
multiselect ul.selecteds li a {
  font-size: 0.9em;
  margin-left: 5px;
  position: relative;
  text-decoration: none;
  top: -3px;
}
multiselect ul.selecteds li.empty {
  opacity: 0.5;
  padding-left: 3px;
}
multiselect ul.selections {
  background: white;
  border: 1px solid gray;
  display: none;
  left: 0px;
  max-height: 150px;
  overflow-y: scroll;
  position: absolute;
  top: 28px;
  width: 100%;
  z-index: 500;
}
multiselect ul.selections li div {
  cursor: pointer;
  padding: 5px;
}
multiselect ul.selections li:hover {
  background-color: #ccccff;
}
multiselect > div.opened ul.selections {
  display: block;
}
multiselect > div.singlemode {
  height: 24px;
}
multiselect > div.singlemode ul.selecteds {
  cursor: default;
  height: 24px;
  min-width: auto;
  padding: 1px;
}
multiselect > div.singlemode ul.selecteds li {
  overflow: hidden;
  padding-right: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
multiselect > div.singlemode ul.selecteds li span {
  border: none;
  border-radius: 0;
  float: none;
}
multiselect > div.singlemode.editmode ul.selecteds:after {
  top: -7px;
}
multiselect > div.singlemode ul.selections {
  top: 21px;
}
multiselect > div.singlemode ul.selections li div {
  padding: 2px;
}
multiselect > div.singlemode.dirty ul.selecteds {
  border: 1px dotted green;
}
multiselect > div.singlemode.dirty.opened ul.selecteds {
  border: 1px solid gray;
}
multiselect > div.disabled {
  background-color: #eee;
}
multiselect li.nesting-1 { padding-left: 10px; }
multiselect li.nesting-2 { padding-left: 20px; }
multiselect li.nesting-3 { padding-left: 30px; }
multiselect li.nesting-4 { padding-left: 40px; }
multiselect li.nesting-5 { padding-left: 50px; }
multiselect li.nesting-6 { padding-left: 60px; }
multiselect li.nesting-7 { padding-left: 70px; }
multiselect li.nesting-8 { padding-left: 80px; }
multiselect li.nesting-9 { padding-left: 90px; }
apptable multiselect > div.editmode.opened.dropup ul.selections {
  bottom: 10px;
  top: unset;
}



mappopup multiselect div.singlemode {
  font-size: 13px;
  height: 20px;
}
mappopup multiselect div.singlemode ul.selecteds {
  height: 20px;
  padding: 0;
}
mappopup multiselect div.singlemode ul.selecteds li span {
  margin: 0;
}
mappopup multiselect > div.singlemode.editmode ul.selecteds:after {
  right: -5px;
  top: -9px;
}
mappopup multiselect > div.singlemode ul.selections {
  top: 17px;
}

dataplot multiselect > div {
  position: relative;
  top: 5px;
}

div.settings multiselect > div.singlemode {
  height: 34px;
}
div.settings multiselect > div.singlemode ul.selecteds {
  border: 1px solid lightgray;
  border-radius: 0 5px 5px 0;
  height: 34px;
  padding: 6px 8px;
}
div.settings multiselect > div.singlemode.editmode ul.selecteds:after {
  top: -2px;
}
div.settings multiselect > div.singlemode ul.selections {
  border-color: lightgray;
  padding-left: 10px;
  top: 34px;
}



/** Radiogroup component styling.  */
radiogroup label {
  background: white;
  border: 1px solid;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
  margin-top: 10px;
  min-height: 27px;
  padding: 2px 20px;
}
radiogroup label::first-letter {
  text-transform: none;
}
radiogroup label.single {
  cursor: default;
}
radiogroup label.selected {
  color: white;
}
radiogroup input[type=radio] {
  margin: -1px 5px 0 0;
  vertical-align: middle;
}
radiogroup label a {
  float: right;
  font-size: 0.9em;
  left: 15px;
  position: relative;
  text-decoration: none;
  top: -3px;
}
radiogroup label.selected a {
  color: white;
}



/** Detailpage component styling.  */
detailpage > div {
  height: calc(100% - 95px);
  margin-top: 20px;
  overflow: auto;
  padding: 10px;
}
detailpage table.plottype {
  margin-bottom: 20px;
  width: 100%;
}
detailpage table.plottype td {
  padding-left: 5px;
}
detailpage table.plottype td:first-child {
  padding: 0;
}
detailpage table.plottype tr:first-child td::first-letter {
  text-transform: capitalize;
}
detailpage table.plottype td {
  border: 1px solid #adadad;
}
detailpage table.plottype td:first-child {
  text-align: center;
}
detailpage .detailinfo {
  background: #00b5cc;
  border-radius: 5px;
  clear: both;
  color: white;
  font-size: 1.1em;
  margin-bottom: 10px;
  padding: 5px;
  white-space: pre-line;
}
detailpage .detailinfo:after {
  clear: both; 
  content: "";
  display: table; 
}
div.detailinfo:empty {
  display: none;
}
.detailform {
  border: 1px solid #00b5cc;
  border-radius: 5px;
  margin-bottom: 5px;
  padding: 5px;
}
detailpage table.plottype {
  margin-bottom: 20px;
  width: 100%;
}
detailpage table.plottype td {
  padding-left: 5px;
}
detailpage table.plottype td:first-child {
  padding: 0;
}
detailpage table.plottype tr:first-child td::first-letter {
  text-transform: capitalize;
}
detailpage table.plottype td {
  border: 1px solid #adadad;
}
detailpage table.plottype td:first-child {
  text-align: center;
}
detailpage .detailrow,
reportsection .detailrow {
  clear: both;
  padding: 3px 0;
}
detailpage .detailrow > datafield,
detailpage .detailrow > span,
reportsection .detailrow > :last-child {
  float: right;
  margin-top: 2px;
}
reportsection .detailrow > :only-child {
  float: none;
}
detailpage .detailrow input,
detailpage .detailrow select,
detailpage .detailrow textarea,
reportsection .detailrow input[type=text],
reportsection .detailrow input[type=date] {
  width: 180px;
}
detailpage .detailrow textarea {
  resize: vertical;
}
detailpage div.buttons {
  margin-bottom: 20px;
}
detailpage div.buttons > * {
  margin-right: 5px;
  margin-bottom: 5px;
}
detailpage div.buttons button.add {
  margin-top: 10px;
}




a.panel-settings {
  color: #eee;
  float: right;
  font-size: 18px;
}
a.panel-settings:hover {
  color: #fff;
}
appmap a.panel-settings {
  color: #666;
  font-size: 22px;
  max-height: 30px;
  margin-left: 5px;
}
appmap a.panel-settings:hover {
  color: #333;
}
a.close {
  cursor: pointer;
  font-size: 30px;
}
.btn-thinnect {
  background-color: #00b5cc;
  border-color: #00b5cc;
  color: #eee;
}
input.btn.btn-thinnect:hover {
  color: #fff;
}



/** Formdialog component styling.  */
formdialog div.appdialog div.dialog {
  max-width: 600px;
  text-align: left;
}
formdialog div.appdialog div.dialog div.content {
  overflow: initial;
}
formdialog .header {
  border-bottom: 1px solid #e5e5e5;
  padding: 15px 15px 10px 15px;
}
formdialog .header h3 {
  margin: 0;
}
formdialog .input-group {
  width: 100%;
}
formdialog table {
  width: 500px;
}
formdialog span.input-group-addon {
  width: 65px;
}
formdialog span.awesome {
  width: 40px;
}
formdialog selectbar > div {
  border: 1px solid lightgray;
  border-radius: 5px;
  width: 100%;
}
formdialog selectbar > div > span {
  margin: 3px;
}
formdialog .time input.form-control {
  width: 60px;
}
formdialog .time .separator {
  float: left;
  font-weight: bold;
  padding: 6px 2px;
}



/** Report section styling.  */
reportsection > div {
  height: calc(100% - 85px);
  overflow-y: auto;
  position: relative;
}
reportsection div.inputs {
  margin-left: 15px;
  position: absolute;
  width: auto;
  z-index: 4;
}
reportsection div.inputs form {
  background-color: white;
  border-radius: 3px;
  border: 1px solid #0e9cae;
  box-shadow: 30px 30px 20px 20px white;
  padding: 10px;
  width: calc(100% - 15px);
}
reportsection div.inputs button.dark {
  float: right;
}
reportsection div.inputs input[type=checkbox],
reportsection div.inputs input[type=radio] {
  margin-right: 2px;
}
reportsection div.inputs .topfilters {
  margin: -10px -10px 10px;
  width: calc(100% + 20px);
}
reportsection div.buttons {
  padding: 0 30px 5px 170px;
  text-align: right;
}
reportsection div.buttons button.dark {
  float: left;
  margin-left: 10px;
}
reportsection div.report-container {
  height: calc(100% - 88px);
  overflow-y: auto;
}
reportsection report div.report {
  margin: 0;
}
reportsection .plot-loading {
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
reportsection div.error {
  bottom: 0;
  height: 50%;
  margin-left: calc(50% - 200px);
  min-width: 400px;
  position: absolute;
}

report div.report {
  margin: 10px;
  overflow-y: auto;
  padding: 20px;
}
report .plot-container {
  margin: 20px 50px;
  overflow: initial;
}
report table.header {
  margin-bottom: 10px;
}
report table.header td {
  font-weight: bold;
  padding-right: 25px;
}
report table.header tr:first-child {
  font-style: italic;
}
report table.report {
  width: 100%;
}
report table.report td {
  border: 1px solid black;
}
report table.report th {
  font-style: italic;
  font-weight: bold;
  padding: 0 2px;
  text-align: center;
  vertical-align: bottom;
  white-space: pre;
  word-break: break-all;
}
report table.report td {
  padding: 3px;
}
report table.report tr:not(:first-child) td:not(:first-child) {
  text-align: right;
}
report table.report td:first-child {
  font-style: italic;
  font-weight: bold;
  white-space: nowrap;
}
report table.report tr:nth-child(even) {
  background: #EEE;
}
report table.report tr.total,
report table.report td.total {
  font-weight: bold;
}
report table.report.savings td:last-child, 
report table.report.savings th:last-child, 
report table.report.savings tr:nth-child(2) th:nth-last-child(-n+2), 
report table.report.savings td:nth-last-child(-n+2) {
  background: lightgray;
}
report table.report.grouped tr.grouped td:first-child {
  padding-left: 20px;
}
report table.report.grouped tr.grouped.total td:first-child {
  font-style: normal;
  padding-left: 0;
}

report table.footer {
  border-top: 1px solid black;
  font-weight: bold;
  margin-bottom: 40px;
  margin-top: 100px;
  width: 100%;
  white-space: nowrap;
  position: relative;
}
report table.footer td {
  position: absolute;
}
report table.footer td:first-child {
  left: calc(100% - 250px);
}
report table.footer td:last-child {
  left: calc(100% - 150px);
}
report table.footer tr:last-child td:first-child {
  left: calc(100% - 250px);
  top: 25px;
}
report table.footer tr:last-child td:last-child {
  left: calc(100% - 150px);
  top: 25px;
}
reportform div.buttons {
  padding: 5px 0 0 0;
  text-align: initial;
}
reportform div.buttons button.dark {
  float: right;
}
reportform .detailrow datafield {
  float: right;
  margin-left: 5px;
  position: relative;
  top: 3px;
}
reportform .detailrow datafield input[type=range] {
  width: 90px;
  padding: 0;
}
reportform .detailrow datafield + input[type=text] {
  width: 100px;
}

printview > div {
  overflow: auto;
}
printview div.shadow {
  opacity: 0.9;
  position: fixed;
  z-index: 10000;
}
printview div.report-container {
  background-color: white;
  left: 100px;
  min-height: 100%;
  position: absolute;
  right: 100px;
  top: 0;
  z-index: 10000;
}
printview div.buttons {
  padding: 10px;
  position: absolute;
  right: 100px;
  top: 0;
  z-index: 10002;
}



settingssection > div {
  height: calc(100% - 85px);
  overflow: auto;
}
settingssection datatable[type=users] table.data tr:hover {
  cursor: pointer;
}
settingssection h2, settingssection h4 {
  color: #00b5cc;
  margin: 20px 10px;
  display: inline-block;
  text-transform: capitalize;
}

sitesection div.item {
  margin-top: 10px;
}


/** Gateway section styling. */
gatewaysection > div {
  height: calc(100% - 85px);
  overflow-y: auto;
  position: relative;
}
gatewaysection table td {
  padding-right: 5px;
  vertical-align: top;
}
gatewaysection div.detailform {
  margin-top: 10px;
}
gatewaysection div.detailform table td:last-child {
  min-width: 400px;
}
gatewaysection div.buttons button {
  margin-right: 5px;
}
gatewaysection div.commissioning {
  margin: 20px 0;
}
gatewaysection div.commissioning table {
  width: 100%;
}
gatewaysection div.commissioning table td+td {
  padding-right: 20px;
}



userssection detailform {
  margin: 10px;
}
userssection button.small {
  float: right;
}
div.settings tbody tr td:first-child {
  padding: 0 10px 0 20px;
}
div.settings .input-group {
  margin-bottom: 5px;
  width: 100%;
}
div.settings .input-group-addon.standalone {
  border-radius: 4px;
  border-right: 1px solid #ccc;
}
div.settings span.input-group-addon {
  width: 65px;
}
div.settings span.awesome {
  width: 40px;
}
.input-group input.form-control[disabled],
.input-group select.form-control[disabled] {
  background: #eee;
  cursor: default;
}
div.settings selectbar > div {
  border: 1px solid lightgray;
  border-radius: 5px;
  width: 100%;
}
div.settings selectbar > div > span {
  margin: 3px;
}
div.settings .time input.form-control {
  width: 60px;
}
div.settings .time .separator {
  float: left;
  font-weight: bold;
  padding: 6px 2px;
}
div.settings input.form-control:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
div.settings input[type=checkbox] {
  height: 34px;
  margin: 0;
  width: 34px;
}
div.settings tr.error input {
  background: pink;
}
div.settings div.buttons {
  margin: 10px;
}
div.settings div.version {
  float: right;
  font-size: 0.8em;
  opacity: 0.5;
}
settingssection div.buttons > * {
  margin-right: 5px;
}
settingssection datatable div.buttons > *:last-child {
  margin-left: unset;
}
settingssection .detailform datafield input, settingssection .detailform datafield select {
  min-width: initial;
  width: auto;
}


settingssection > div:first-child > div {
  height: calc(100% - 120px);
}

/** Site-specific styling for Magic-check. */
.magic-checkbox + label {
  display: inline;
  left: 8px;
  top: -2px;
}
.magic-radio + label {
  display: inline;
}
.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label {
  color: #808080;
}
.magic-radio[disabled] + label:before,
.magic-radio[disabled] + label:hover:before,
.magic-radio:checked[disabled] + label:before,
.magic-radio:checked[disabled] + label:hover:before,
.magic-checkbox[disabled] + label:before,
.magic-checkbox[disabled] + label:hover:before {
  border-color: #d4d0c8;
}
.magic-radio:checked[disabled] + label:after {
  background: #d4d0c8;
}
.magic-checkbox:checked[disabled] + label:before {
  background: #d4d0c8;
  color: #d4d0c8;
}
.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label,
.magic-radio[disabled] + label:hover,
.magic-radio[disabled] + label:before,
.magic-radio[disabled] + label:after,
.magic-checkbox[disabled] + label:hover,
.magic-checkbox[disabled] + label:before,
.magic-checkbox[disabled] + label:after {
  cursor: default;
}
div.settings .magic-checkbox + label {
  top: 2px;
}
html[data-useragent*='Mac OS X'] div.settings .magic-checkbox + label {
  top: 4px;
}



/** Plots styling. */
.c3-container {
  height: 100%;
  width: 100%;
}
.c3-container .c3-line {
  stroke-width: 2px;
}
.c3-container .c3-ygrid {
  stroke: #ddd;
  stroke-dasharray: none;
}
.c3-container .c3-axis text {
  stroke: none;
  fill: #808080;
  font-size: 1.1em;
}
.c3-container .tick line {
  stroke: #808080;
}
.c3-container .c3-axis path.domain {
  stroke: #808080;
}
.c3-container .c3-legend-item text {
  stroke: none;
  fill: #808080;
}
.c3-container .c3-area {
  opacity: 1;
}
detailpage div[data-type=sensors] .c3-container .c3-area {
  opacity: 0.2;
}
.c3-container .c3-event-rect {
  cursor: default;
}
.c3-container text.c3-title {
  fill: #666;
  font-size: 1.2em;
  font-weight: bold;
}



/** Help section styling. */
help div.shadow {
  opacity: 0.3;
}
help div.appdialog div.content {
  max-width: 600px;
}
help div.appdialog div.content {
  overflow: initial;
  padding-top: 0;
  position: relative;
}
help h4 {
  color: #00b5cc;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
}
help raw h4 {
  padding-top: 10px;
}
help a.close {
  font-size: 25px;
  position: absolute;
  right: 4px;
  top: 1px;
}
help .msg {
  display: inline-block;
  max-height: 355px;
  overflow: auto;
  text-align: left;
  white-space: normal;
}
helplink {
  color: #00b5cc;
  cursor: pointer;
  font-size: 1.5em;
}
helplink:hover {
  color: #00cbdc;
}


@media print {
  lightning.print > * > * {
    display: none;
  }
  lightning.print > printview,
  lightning.print > printview > * {
    display: initial;
  }
  lightning.print printview div.buttons {
    display: none;
  }
  lightning.print printview report .plot-container {
    margin: 0;
  }
  /* Hide main content so that printview starts from top */
  lightning.print > div#wrap {
    display: none;
  }
  /* Avoid absolute positioning, to enable page breaks */
  lightning.print printview div.report-container {
    overflow: initial;
    position: unset;
  }
  lightning.print printview div.report {
    page-break-after: always;
  }
}

lightning input, lightning select, lightning textarea, login input {
  background-color: white;
  border-color: gray;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  padding-left: 4px;
}
lightning select {
  padding: 2px;
}



/** Client-site selection page styling. */
body.clientsite clientsite {
  color: #00b5cc;
}
body.clientsite clientsite div.main {
  background-color: white;
  border: 1px solid #00b5cc;
  border-radius: 10px;
  margin: auto;
  padding: 5px 10px;
  width: 300px;
}
body.clientsite clientsite div.clients,
body.clientsite clientsite div.sites {
  max-height: 300px;
  overflow-y: auto;
}
body.clientsite clientsite button {
  cursor: pointer;
  display: block;
  margin-top: 5px;
}
body.clientsite clientsite button.item {
  width: 100%;
}
body.clientsite clientsite button.dark {
  margin-left: auto;
  margin-top: 10px;
}
body.clientsite div.main.loading button {
  opacity: 0.6;
  pointer-events: none;
}

body.clientsite clientsite span.msg {
  color: green;
  font-size: 0.9em;
  line-height: 24px;
}
body.clientsite clientsite span.msg.loading::after {
  background: url("media/loading.gif") no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  content: "";
  position: relative;
  top: 3px;
  left: 5px;
}
body.clientsite div.create {
  margin-left: -50px;
  width: 400px;
}
clientsite div.create table  {
  width: 100%;
}
clientsite div.create table td {
  padding: 2px;
}
body.clientsite div.create label {
  color: white;
}
body.clientsite button.strong {
  display: inline-block;
}



/** Site selection-related styling. */
sitefilter {
  display: flex;
  flex-direction: column;
  height: calc(100% - 10px);
  justify-content: center;
  right: 120px;
  position: absolute;
  top: 0;
  z-index: 4000;
}
sitefilter .client {
  overflow-x: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
}



/** Mappanel styling. */
mappanel {
  display: block;
  position: relative;
}
mappanel button.toggle {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3000;
}
mappanel .map-container {
  height: 500px; /** Fallback if no vh support */
  height: calc(100vh - 200px);
}
mappanel > div.off {
  border: none;
  height: 0;
  overflow: hidden;
}
mappanel > div.off ~ button.toggle {
  right: 0;
  top: -10px;
}



/** Alerts panel styling. */
alertspanel .panel-heading input[type=checkbox] {
  position: absolute;
  left: 181px;
}
alertspanel .panel-heading button.dark {
  margin-left: 5px;
  min-width: initial;
  width: 50px;
}
alertspanel table {
  width: 100%;
}
alertspanel table td.description,
alertspanel table td.device {
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
alertspanel table td.device {
  text-align: right;
}
alertspanel table td.time {
  width: 150px;
}
alertspanel table td label {
  font-weight: normal;
  margin: 0;
}

alertspanel pager > div {
  color: #8a6d3b;
}
alertspanel pager a,
alertspanel pager a:visited {
  border-color: #ffa043;
  color: #8a6d3b;
}
alertspanel pager a.active {
  background-color: #ffa043;
}
alertspanel pager a:hover {
  color: #fdce89;
}



/** Data panel styling. */
datapanel .value {
  margin: 5px;
  color: #0e9cae;
  font-size: 250%;
  text-align: center;
}
datapanel .value .awesome {
  font-size: 88%;
}
datapanel .value .error {
  color: orangered;
}


/** Inputgroup styling. */
inputgroup span.image {
  align-items: center;
  display: flex;
  min-height: 30px;
}
inputgroup span.image img {
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 10px;
}
inputgroup span.image span {
  display: inline-block;
  margin-left: 10px;
}
inputgroup span.image button {
  display: block;
  width: 100%;
}
inputgroup span.image button + button {
  margin-top: 5px;
}