/**
 * Luminar style file.
 *
 * @author      Erki Suurjaak
 * @created     28.01.2015
 */
@font-face {
  font-family: "luminar";
  font-style: normal;
  font-weight: 400;
  src: url("vendor/carlito-regular.woff") format("woff");
}
@font-face {
  font-family: "luminar";
  font-style: normal;
  font-weight: 700;
  src: url("vendor/carlito-bold.woff") format("woff");
}
html, body {
  height: 100%;
  width: 100%;
}
body {
  /* fallback to Calibri (for üõöä) */
  font-family: luminar, Calibri;
  font-size: 0.9em;
  padding: 0;
  margin: 0;
  background: #000000 url("media/bg.png") 50% 50% repeat;
  color: white;
}
a {
  color: white;
  text-decoration: none;
  outline: 0;
}
a:hover {
  text-decoration: underline;
}
#header a:visited,
#sidebar a:visited,
#footer a:visited {
  color: inherit;
}
#deployment-name {
  margin: 0;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 25px;
  font-weight: bold;
}

/* main page components styling. */
#header {
  height: 35px;
  border-bottom: 1px solid white;
}
#header > h1 {
  font-size: 1.5em;
  margin: 0px;
  padding: 5px;
  display: inline-block;
}
#header form {
  float: right;
  padding: 5px;
}
#header form input[type=text], #header form input[type=password] {
  width: 100px;
  height: 12px;
}
#header form input[type=image] {
  border: none;
  background: none;
  margin-left: 5px;
  margin-top: 3px;
  outline: 0;
}
#userbox span.user {
  margin-right: 10px;
}
#center {
  background: inherit;
  height: calc(100% - 58px);
  width: 100%;
}
#sidebar {
  background: inherit;
  display: inline-block;
  height: calc(100% - 58px);
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 36px;
  z-index: 100000;
}
#sidebar.off {
  width: 45px;
  overflow: hidden;
}
#tabs, #sidebar.normal #tabs {
  width: 600px;
}
#sidebar.off #tabs {
  width: 0;
}
#sidebar.wide #tabs {
  width: 800px;
}
#sidebar.full {
  width: 100%;
}
#sidebar.full #tabs {
  width: 100%;
}
#map {
  position: absolute;
  top: 35px;
  right: 0px;
  width: calc(100% - 40px);
  height: calc(100% - 57px);
  display: inline-block;
}
#footer {
  bottom: 0px;
  height: 22px;
  user-select: none;
  width: 100%;
  position: fixed;
  z-index: 999999;
  background: black;
}
#footer #width {
  margin-left: 8px;
}
#footer #width a {
  cursor: pointer;
  float: left;
  margin: 2px 0;
  padding: 0 5px;
}
#footer #width a:hover {
  background: #AAA;
  border-radius: 3px;
  text-decoration: none;
}
#footer #width a.active {
  background: white;
  border-radius: 3px;
  color: black;
  font-weight: bold;
}
#footer #usermanual a, #footer a.lang {
  float: right;
  padding-right: 10px;
}
#footer #clock {
  float: right;
  margin-right: 6px;
  margin-top: 1px;
  min-width: 33px;
  min-height: 1px;
}
#usermanual a {
  margin-right: 20px;
  text-decoration: underline;
}

.hidden {
  display: none;
}

/* horizontal tabs styling */
ul.tabs {
  display: table;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  user-select: none;
  position: sticky;
  top: 0;
  left: 0;
  width: calc(100% - 10px);
  z-index: 1;
}
/* fix height so scrollbar does not appear */
div.tabs.vertical > div.tab.active > div.tabs > div.tab.active {
  height: calc(100% - 61px);
  overflow: auto;
}

ul.tabs li span::first-letter {
  text-transform: uppercase;
}
ul.tabs li {
  cursor: pointer;
  border-bottom: 1px solid gray;
  border-left: 1px solid gray;
  display: table-cell;
  padding: 5px;
  text-align: center;
  background-color: black;
  color: white;
  position: relative;
}
ul.tabs li:last-of-type {
  border-right: 1px solid gray;
  overflow: hidden;
  text-overflow: clip;
}
ul.tabs li:hover,
ul.tabs li.active + li:hover {
  background-color: #AAA;
  border-color: #AAA;
}
ul.tabs li.active {
  background-color: white;
  border-color: white;
  color: black;
  cursor: default;
  font-weight: bold;
}
ul.tabs li.active + li {
  border-left-color: black;
}
div.tab {
  display: none;
}
div.tab.active {
  display: block;
}
div.tabs div.tabs div.tab.active {
  padding: 5px 5px 5px 0;
}
ul.tabs li.disabled,
ul.tabs li.disabled:hover {
  color: #DDD;
}
ul.tabs li.disabled:hover,
ul.tabs li.active + li.disabled:hover {
  cursor: default;
  background-color: black;
  border-color: gray;
}
ul.tabs li > img, ul.tabs li > span:first-of-type {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}
ul.tabs.vertical li > span:first-of-type::first-line {
  line-height: 16px;
}
ul.tabs li > img {
  left: 0;
  padding: 10px 5px;
  position: absolute;
  top: 0;
}
ul.tabs li > img + span {
  margin-left: 36px;
}
#sidebar.off > .tabs > ul.tabs > li > img + span {
  display: none;
}
ul.tabs li.closable a.close {
  cursor: pointer;
  left: 10px;
  position: relative;
  text-transform: lowercase;
  top: -3px;
}
ul.tabs li.closable.active a.close {
  color: black;
}

/* vertical tab styling. */
div.tabs.vertical > div {
  left: 155px;
  position: absolute;
  width: calc(100% - 155px);
}
ul.tabs.vertical {
  list-style: none;
  width: 0;
  position: absolute;
}
ul.tabs.vertical li {
  background: black;
  border: none;
  border-bottom: 1px solid white;
  border-right: 1px solid white;
  float: left;
  font-size: 1.25em;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 135px;
}
ul.tabs.vertical li:hover {
  background-color: #AAA;
}
ul.tabs.vertical li.active {
  background-color: white;
  color: black;
  font-weight: bold;
}
#sidebar.off > div.tabs.vertical {
  width: 35px;
}
#sidebar.off > div.tabs.vertical > div {
  display: none;
}
#sidebar.off > div.tabs.vertical > ul.tabs.vertical > li {
  cursor: pointer;
  width: 35px;
}

/* data tables styling. */
table.datatable {
  border-spacing: 0px;
  width: 100%;
}
table.datatable.clickable tr:hover, tr.tr-hover {
  cursor: pointer;
  background: #0972A5;
}
table.datatable.clickable tr.selected {
  background: #4285F4;
}
table.datatable th {
  text-align: left;
  white-space: nowrap;
}
table.datatable th::first-letter {
  text-transform: uppercase;
}
table.datatable td {
  padding: 2px;
  text-align: left;
  vertical-align: top;
}
table.datatable tr.header span.table-length {
  display: inline-block;
  padding-top: 3px;
}
table.datatable tr.header span.header {
  float: right;
}
table.datatable tr.header:hover {
  cursor: default;
  background: none;
}
table.datatable th.sortable:hover {
  cursor: pointer;
}
table.datatable a.open,
table.datatable a.center {
  display: inline-block;
  height: 16px;
  position: relative;
  top: 2px;
  width: 16px;
}
table.datatable a.open {
  background-image: url("media/open.png");
  margin-right: 4px;
}
table.datatable a.center {
  background-image: url("media/center.png");
}
table.datatable tr:not(.header) td:last-child {
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}
table.datatable tr:not(.header) td:last-child a + a {
  margin-left: 4px;
}

/* datatable pager styling. */
.table-pages {
  margin-left: 5px;
}
.table-pages a, .table-pages span {
  padding: 0 2px;
}
.table-pages a {
  opacity: 0.9;
}
.table-pages a:hover {
  cursor: pointer;
  opacity: 1;
}
.table-pages span {
  font-weight: bold;
}

/* query tables styling. */
.querytable div.form {
  padding-bottom: 5px;
}
.querytable div.form.minimized {
  float: right;
}
.querytable div.form td:first-child {
  padding-top: 3px;
  text-transform: capitalize;
  vertical-align: top;
}

/* message overlay dialog styling. */
.overlay .shadow {
  background-color: black;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100000;
}
.overlay .content {
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 20px;
  box-shadow: 0 1px 5px #333;
  color: #7F7F7F;
  left: 30%;
  max-height: 60%;
  padding: 20px 20px 10px 20px;
  position: fixed;
  right: 30%;
  top: 25%;
  z-index: 100001;
  /* For Maanteeamet use this if there are problems with small screens */
  /* overflow-y: auto;
  overflow-x: hidden; */
}
.overlay .inner {
  max-height: 500px;
}
.overlay .close {
  background: #605F61;
  border: 1px solid #AEAEAE;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  float: right;
  font-family: "Times New Roman";
  font-size: 31px;
  font-weight: bold;
  line-height: 0;
  margin-right: -30px;
  /* For Maanteeamet replace `margin-right` above with `right` below if there are problems with small screens */
  /* right: 30%; */
  margin-top: -30px;
  padding: 11px 3px;
  text-decoration: none;
  /* For Maanteeamet use this if there are problems with small screens */
  /* position: fixed; */
}
.overlay .message {
  max-height: 420px;
  overflow-y: auto;
}
.overlay.prompt .message {
  max-height: 400px;
}
.overlay .input {
  width: calc(100% - 4px);
}
.overlay .buttons {
  margin-top: 10px;
  text-align: center;
}

/* message box styling shown on top of Leaflet map. */
.leaflet-control-messagebox {
  display: none;
  border: 1px solid #4F8A10;
  background: #DFF2BF;
  color: #4F8A10;
  padding: 15px;
  width: 400px;
}
.leaflet-control-messagebox.error {
  border-color: #D8000C;
  background: #FFBABA;
  color: #D8000C;
}
.leaflet-control-messagebox a {
  position: absolute;
  top: -1px;
  right: -1px;
  border: 1px dotted #4F8A10;
  padding: 0px 5px;
  text-decoration: none;
}
.leaflet-control-messagebox.error a {
  border-color: #D8000C;
  color: #D8000C;
}

/* Leaflet map custom controls styling. */
.map-custom-control {
  width: 36px;
  height: 36px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  background: #FFF;
  border-radius: 5px;
}
.map-custom-control a {
  width: 36px;
  height: 36px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}
.map-custom-control.off a {
  opacity: 0.2;
}

.map-fit-control a {
  background-image: url("media/fit.png");
}
.map-toggle-control a {
  background-image: url("media/toggle.png");
}
.map-fit-control:hover {
  -webkit-filter: brightness(200%);
  filter: brightness(200%);
}

.map-toggle-control form {
  display: none;
  padding: 3px;
}
.map-toggle-control label {
  display: block;
  padding: 1px 5px;
  color: #333;
}
.map-toggle-control label span {
  display: inline-block;
}
.map-toggle-control label span::first-letter {
  text-transform: uppercase;
}
.map-toggle-control-expanded {
  width: auto;
  height: auto;
}
.map-toggle-control-expanded a {
  display: none;
}
.map-toggle-control-expanded form {
  display: block;
}

.map-search-control.open {
  background-color: white;
  width: 200px;
}
.map-search-control.open.content {
  height: auto;
}
.map-search-control a {
  cursor: pointer;
}
.map-search-control a.toggler, .map-search-control a.search {
  background-image: url("media/search.png");
  display: inline-block;
}
.map-search-control:hover {
  background-color: #F4F4F4;
}
.map-search-control.open:hover {
  background-color: white;
}
.map-search-control div.controls {
  height: 36px;
}
.map-search-control form {
  display: none;
  vertical-align: top;
}
.map-search-control form input[type=search] {
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  padding: 2px 5px;
  position: relative;
  top: -2px;
  width: 140px;
}
.map-search-control.open form {
  display: inline-block;
  left: -10px;
  position: relative;
  top: 3px;
}
.map-search-control.open a.toggler {
  background-image: url("media/search-toggle.png");
  background-position-x: 2px;
  background-size: 22px;
}
.map-search-control.open a.search {
  display: inline-block;
  height: 22px;
  left: 5px;
  position: relative;
  top: 4px;
  width: 22px;
}
.map-search-control div.results {
  max-height: 500px;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 5px 5px 5px;
  position: relative;
}
.map-search-control.open div.results {
  display: block;
}
.map-search-control div.results {
  padding: 0;
}
.map-search-control.open.content div.results {
  padding: 0;
}
.map-search-control.loading div.results {
  min-height: 20px;
  max-height: 500px;
  background-image: url("media/loading.gif");
  background-position: 50% 5px;
  background-repeat: no-repeat;
}
.map-search-control div.results a.clear {
  display: none;
}
.map-search-control.open.content div.results a.clear {
  background-image: url("media/search-clear.png");
  background-size: 11px;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  position: absolute;
  right: 1px;
  top: 1px;
  width: 16px;
  z-index: 1;
}
.map-search-control div.results > div {
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
  color: #333;
  padding: 2px;
}
.map-search-control div.results > div:first-of-type {
  padding-right: 14px;
}
.map-search-control div.results > div:hover {
 background-color:rgba(0, 0, 0, .06);
}
.map-search-control span {
  color: gray;
  display: inline-block;
  padding: 5px 0 0 2px;
}
.map-search-control span.error {
  color: red;
}

/* data forms styling. */
.form-aligned div.form-field,
.form-aligned div.form-extended-view {
  margin: 0px 0px 0.5em 0px;
  position: relative;
  width: 410px;
}
.form-aligned div.form-field {
  text-align: right;
}
.form-aligned div.form-field.radiochoice {
  text-align: left;
}
.form-aligned div.form-field.radiochoice label {
  width: 170px;
}
.form-aligned div.form-extended-view {
  text-align: left;
}
.form-aligned div.form-field label,
.form-aligned div.form-extended-view label {
  vertical-align: middle;
  text-transform: capitalize;
  text-align: right;
  width: 160px;
  display: inline-block;
}
.form-aligned div.form-extended-view label {
  width: 170px;
}
.form-aligned div.form-field span.form-radio-choice input,
.form-aligned div.form-field span.form-radio-choice label {
  width: unset;
}
.form-aligned div.form-field label.multiline {
  vertical-align: top;
}
.form-aligned div.form-field input {
  width: 230px;
}
.form-aligned div.form-field input[type=button].open-details {
  width: unset;
  float: right;
}
.form-aligned div.form-field input[type=text].longitude {
  width: 198px;
}
.form-aligned fieldset {
  display: block;
  padding: 0;
  white-space: nowrap;
  width: 0;
}
.form-aligned fieldset.extended {
  margin-left: 35px;
  font-size: 0.9em;
  text-align: right;
  width: 370px;
  text-transform: capitalize;
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.form-aligned input {
  display: inline-block;
  vertical-align: middle;
}
.form-aligned input[type=text],
.form-aligned input[type=password],
input[type=button],
input[type=submit],
input[type=date],
input[type=number],
.form-aligned select,
.form-aligned textarea {
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  box-shadow: inset 0px 1px 3px #DDDDDD;
  box-sizing: border-box;
  margin: 2px 5px;
  padding: 2px 5px;
}
.form-aligned select {
  width: 230px;
  padding: 1px 5px;
}
.form-aligned div.form-field select.controller {
  width: 198px;
}
.form-aligned div.form-field input[type=checkbox] {
  margin-right: 220px;
  width: unset;
}
.form-aligned textarea {
  resize: vertical;
  width: 230px;
}
.form-aligned input[readonly],
.form-aligned textarea[readonly] {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  box-shadow: none;
}
.form-aligned input[type=button].fieldextra {
  width: 22px;
}
.form-aligned select + input[type=button].fieldextra {
  top: 1px;
}
.form-aligned div.error {
  color: red;
}
.form-aligned div.error input,
.form-aligned div.error select,
.form-aligned div.error textarea {
  border: 1px solid red;
}

/* Leaflet map markers styling. */
.leaflet-tile-pane {
  opacity: 0.5;
}
.leaflet-marker-icon {
  opacity: 0.8;
  cursor: pointer;
}
.leaflet-marker-pane .leaflet-marker-icon.marker-hover img,
.leaflet-marker-pane .leaflet-marker-icon.marker-selected img {
  border: 2px dotted black;
  border-radius: 50%;
  padding: 2px;
  position: relative;
  top: -4px;
  left: -4px;
}
.marker-cluster-alerts {
  background-color: rgba(250, 50, 50, 0.6);
}
.marker-cluster-alerts div {
  background-color: rgba(250, 50, 50, 0.6)
}
.leaflet-marker-pane .leaflet-marker-icon span.title,
.leaflet-marker-pane .leaflet-marker-icon span.guid,
.leaflet-marker-pane .leaflet-marker-icon span.last {
  color: blue;
  display: block;
  left: -6px;
  margin: 0 auto;
  position: absolute;
  right: 0px;
  top: -14px;
  white-space: nowrap;
}
.leaflet-marker-pane .leaflet-marker-icon span.last {
  left: 2px;
  top: 16px;
}
.leaflet-marker-pane .leaflet-marker-icon.alerts span.title {
  top: 16px;
}
.leaflet-marker-pane.marker-hidden-markertitles .leaflet-marker-icon span.title,
.leaflet-marker-pane:not(.marker-hidden-guids) .leaflet-marker-icon span.guid ~ span.title {
  display: none;
}
.leaflet-marker-pane.marker-hidden-guids .leaflet-marker-icon span.guid {
  display: none;
}
.leaflet-marker-pane.marker-hidden-lastvalues .leaflet-marker-icon span.last {
  display: none;
}
.leaflet-marker-pane .marker-cluster.lowlight_deselected img, .leaflet-marker-pane .marker-icon.lowlight_deselected img {
  -webkit-filter: hue-rotate(300deg) opacity(80%);
  filter: hue-rotate(300deg) opacity(80%);
}
.leaflet-marker-pane .marker-icon.lowlight_deselected::before {
  content: "";
  position: absolute;
  top: 35%;
  left: -25%;
  width: 150%;
  height: 1px;
  background: red;
  transform: rotate(-45deg);
}
.leaflet-marker-pane .marker-icon.lowlight_deselected::after {
  content: "";
  position: absolute;
  top: 35%;
  left: -25%;
  width: 150%;
  height: 1px;
  background: red;
  transform: rotate(45deg);
}
.leaflet-marker-pane .marker-cluster.luminaires.nomaintenance img, .leaflet-marker-pane .marker-icon.luminaires.nomaintenance img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
.leaflet-marker-pane .marker-icon.luminaires.basic img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.leaflet-marker-pane .marker-icon.luminaires.empty img {
  -webkit-filter: grayscale(100%) brightness(150%) contrast(300%);
  filter: grayscale(100%) brightness(150%) contrast(300%);
}
.leaflet-marker-pane .marker-icon.alerts.error img,
.leaflet-marker-pane .marker-icon.alerts.user_added img {
  -webkit-filter: saturate(500%);
  filter: saturate(500%);
}
.leaflet-marker-pane .marker-cluster.selected {
  border: 1px dashed black;
}
.leaflet-marker-pane .marker-icon.opened img,
.leaflet-marker-pane .marker-icon.selected img {
  border: 2px dotted black;
  border-radius: 50%;
  padding: 2px;
  position: relative;
  top: -4px;
  left: -4px;
}
.leaflet-marker-pane .marker-icon.illuminance img {
  background: url("media/sensors_illuminance.png") no-repeat;
  width: 16px;
  height: 16px;
  padding-left: 16px;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.leaflet-marker-pane .marker-icon.co2 img,
.leaflet-marker-pane .marker-icon.no2 img,
.leaflet-marker-pane .marker-icon.pm10 img,
.leaflet-marker-pane .marker-icon.pm2_5 img {
  background: url("media/sensors_airquality.png") no-repeat;
  width: 16px;
  height: 16px;
  padding-left: 16px;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.leaflet-marker-pane.marker-hidden-luminaires .marker-cluster-luminaires, .leaflet-marker-pane.marker-hidden-luminaires .marker-icon.luminaires,
.leaflet-marker-pane.marker-hidden-alerts .marker-cluster-alerts, .leaflet-marker-pane.marker-hidden-alerts .marker-icon.alerts, .leaflet-marker-pane.marker-hidden-gateways .marker-cluster-gateways, .leaflet-marker-pane.marker-hidden-gateways .marker-icon.gateways, .leaflet-marker-pane.marker-hidden-sensors .marker-cluster-sensors, .leaflet-marker-pane.marker-hidden-sensors .marker-icon.sensors, .leaflet-marker-pane.marker-hidden-cabinets .marker-cluster-cabinets, .leaflet-marker-pane.marker-hidden-cabinets .marker-icon.cabinets {
  display: none;
}
.marker-icon.alerts {
  z-index: 1000;
}
.marker-icon .status {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 1px;
  position: absolute;
  top: -3px;
  left: -3px;
}
.marker-icon.marker-status-running .status {
  border-color: green;
}
.marker-icon.marker-status-starting .status {
  border-color: blue;
}
.marker-icon.marker-status-expired .status {
  border-color: orange;
}
.marker-icon.marker-status-sent .status {
  border-color: pink;
}
.marker-icon.marker-status-timeout .status {
  border-color: gray;
}
.leaflet-marker-pane.marker-hidden-statuses .marker-icon .status {
  border-color: transparent;
}

.luminaires .groupstatus {
  display: none;
}
.luminaires.group-marker-status .groupstatus {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid orange;
  border-radius: 50%;
  padding: 1px;
  position: absolute;
  top: -3px;
  left: -3px;
}
.luminaires.group-marker-status-running .groupstatus {
  border-color: green;
}
.luminaires.group-marker-status-starting .groupstatus {
  border-color: blue;
}
.luminaires.group-marker-status-expired .groupstatus {
  border-color: orange;
}
.luminaires.group-marker-status-sent .groupstatus {
  border-color: pink;
}
.luminaires.group-marker-status-timeout .groupstatus {
  border-color: gray;
}

.leaflet-marker-pane.marker-hidden-groupstatuses .leaflet-marker-icon.group-marker-status .groupstatus,
.leaflet-marker-pane:not(.marker-hidden-statuses) .leaflet-marker-icon.group-marker-status .groupstatus {
  display: none
}

.leaflet-marker-icon .radiochannel {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 1px;
  text-align: center;
  font-weight: bold;
  font-size: 0.9em;
  color: black;
  position: absolute;
  top: -3px;
  left: -3px;
}
.leaflet-marker-icon .radiochannel.channel-11 {
  border-color: #005700;
}
.leaflet-marker-icon .radiochannel.channel-12 {
  color: #95D34F;
  border-color: #95D34F;
}
.leaflet-marker-icon .radiochannel.channel-13 {
  border-color: #00FF00;
}
.leaflet-marker-icon .radiochannel.channel-14 {
  border-color: #00FFC1;
}
.leaflet-marker-icon .radiochannel.channel-15 {
  border-color: #72F6FF;
}
.leaflet-marker-icon .radiochannel.channel-16 {
  border-color: #0000FF;
}
.leaflet-marker-icon .radiochannel.channel-17 {
  border-color: #8383FF;
}
.leaflet-marker-icon .radiochannel.channel-18 {
  border-color: #9E4F46;
}
.leaflet-marker-icon .radiochannel.channel-19 {
  border-color: #FFC183;
}
.leaflet-marker-icon .radiochannel.channel-20 {
  border-color: #7B1A69;
}
.leaflet-marker-icon .radiochannel.channel-21 {
  border-color: #837200;
}
.leaflet-marker-icon .radiochannel.channel-22 {
  border-color: #F69EDB;
}
.leaflet-marker-icon .radiochannel.channel-23 {
  border-color: #FF1AB8;
}
.leaflet-marker-icon .radiochannel.channel-24 {
  border-color: #D311FF;
}
.leaflet-marker-icon .radiochannel.channel-25 {
  border-color: #008395;
}
.leaflet-marker-icon .radiochannel.channel-26 {
  border-color: #8CA77B;
}

.leaflet-marker-pane.marker-hidden-radiochannels .leaflet-marker-icon .radiochannel,
.leaflet-marker-pane:not(.marker-hidden-statuses) .leaflet-marker-icon .radiochannel,
.leaflet-marker-pane:not(.marker-hidden-groupstatuses) .leaflet-marker-icon .radiochannel {
  display: none
}

.marker-status-new_without_response .status {
  border-color: orange;
}
.alerts.missing_status img {
  background: url("media/alerts_lightblue.png") no-repeat;
  width: 16px;
  height: 16px;
  padding-left: 16px;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.alerts.missing_announcement img {
  background: url("media/alerts_blue.png") no-repeat;
  width: 16px;
  height: 16px;
  padding-left: 16px;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.alerts.no_announcement img,
.alerts.new_without_response img {
  background: url("media/alerts_bw.png") no-repeat;
  width: 16px;
  height: 16px;
  padding-left: 16px;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.leaflet-marker-pane .marker-icon.illuminance.opened img,
.alerts.missing_status.opened img,
.alerts.new_without_response.opened img,
.alerts.missing_announcement.opened img,
.alerts.no_announcement.opened img,
.leaflet-marker-pane .marker-icon.illuminance.selected img,
.alerts.missing_status.selected img,
.alerts.new_without_response.selected img,
.alerts.missing_announcement.selected img,
.alerts.no_announcement.selected img,
.leaflet-marker-pane .marker-icon.illuminance.marker-hover img,
.alerts.missing_status.marker-hover img,
.alerts.new_without_response.marker-hover img,
.alerts.missing_announcement.marker-hover img,
.alerts.no_announcement.marker-hover img,
.leaflet-marker-pane .marker-icon.illuminance.marker-selected img,
.alerts.missing_status.marker-selected img,
.alerts.new_without_response.marker-selected img,
.alerts.missing_announcement.marker-selected img,
.alerts.no_announcement.marker-selected img,
.leaflet-marker-pane .marker-icon.co2.opened img,
.leaflet-marker-pane .marker-icon.co2.selected img,
.leaflet-marker-pane .marker-icon.co2.marker-hover img,
.leaflet-marker-pane .marker-icon.co2.marker-selected img,
.leaflet-marker-pane .marker-icon.no2.opened img,
.leaflet-marker-pane .marker-icon.no2.selected img,
.leaflet-marker-pane .marker-icon.no2.marker-hover img,
.leaflet-marker-pane .marker-icon.no2.marker-selected img,
.leaflet-marker-pane .marker-icon.pm10.opened img,
.leaflet-marker-pane .marker-icon.pm10.selected img,
.leaflet-marker-pane .marker-icon.pm10.marker-hover img,
.leaflet-marker-pane .marker-icon.pm10.marker-selected img,
.leaflet-marker-pane .marker-icon.pm2_5.opened img,
.leaflet-marker-pane .marker-icon.pm2_5.selected img,
.leaflet-marker-pane .marker-icon.pm2_5.marker-hover img,
.leaflet-marker-pane .marker-icon.pm2_5.marker-selected img {
  background-position: 2px 2px;
  padding-left: 18px;
  width: 24px;
  height: 24px;
}

.sensors.marker-status-new .status, .sensors.marker-status-missing_status .status, .sensors.marker-status-user_added .status, .sensors.marker-status-error .status,
.luminaires.marker-status-new .status, .luminaires.marker-status-missing_status .status, .luminaires.marker-status-user_added .status, .luminaires.marker-status-error .status {
  border-color: red;
}

.leaflet-marker-icon.highlight {
  background-color: yellow;
  border-radius: 50%;
  left: -5px;
  padding: 5px;
  top: -5px;
}
.leaflet-marker-icon.highlight .status, .leaflet-marker-icon.highlight .groupstatus {
  left: 2px;
  top: 2px;
}

fieldset legend {
  margin: 0 5px;
  padding: 0 5px;
}

/* group form styling. */
fieldset.group_items {
  max-height: 300px;
  min-width: 300px;
  overflow-y: auto;
}
fieldset.group_items table {
  border-collapse: collapse;
  width: 100%;
}
fieldset.group_items td {
  padding: 2px;
}
fieldset.group_items td:first-child {
  white-space: nowrap;
}
fieldset.group_items td + td {
  text-align: right;
}
fieldset.group_items tr.add {
  background-color: rgba(0, 255, 0, 0.3);
}
fieldset.group_items tr.remove {
  text-decoration: line-through;
  background-color: rgba(255, 0, 0, 0.3);
}
fieldset.group_items tr.category td:first-child {
  font-size: 0.9em;
  opacity: 0.8;
  padding-left: 10px;
}
fieldset.group_items tr.category:hover {
  background-color: transparent;
}
fieldset.group_items tr.category td:first-child:not(:empty):before {
  content: "\2500\2500\20\20";
}
fieldset.group_items tr.category td:first-child:not(:empty):after {
  content: ":";
}
fieldset.group_items a {
  cursor: pointer;
}
fieldset.group_items button {
  margin: 0;
  padding: 0px 2px;
}
fieldset.group_items tr.hover, fieldset.group_items tr:hover {
  background: #0972A5;
}

/* rule form styling. */
div.chart {
  background: white;
  display: inline-block;
  color: black;
  width: 100%;
}
div.chart svg {
  display: block;
}
div.chart .fields {
  clear: both;
}
div.chart .fields label {
  display: block;
}
div.chart fieldset {
  padding: 0px 10px 3px 10px;
}
div.chart fieldset > legend:first-child {
  padding: 0 4px 0 5px;
}
div.chart fieldset input[type=range] {
  width: 100px;
}
div.chart fieldset input[type=number],
div.chart fieldset input[type=text]:not(.date) {
  width: 60px;
}
div.chart fieldset input[readonly] {
  color: gray;
}
div.chart div {
  margin: 10px;
}
div.chart div.suntimes {
  height: 0;
  position: relative;
  top: -10px;
  font-size: 0.8em;
  margin: 0;
}
div.chart div.suntimes span.sundate {
  position: relative;
  top: -28px;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
div.chart div.sunslider {
 margin-bottom: 0;
}
div.chart div.sunslider input[type=range] {
 border: 1px solid white;
 outline-offset: -1px;
}
div.chart div.typeselector label {
  width: initial;
}
div.chart input[type=text], div.chart textarea {
  color: black;
}
div.chart table td {
  white-space: nowrap;
}
div.chart table tr.solartime td {
  padding-left: 34px;
  text-align: left;
}
div.chart table td:first-child {
  text-align: right;
}
div.chart div.timeout label {
  margin: 0;
  width: auto;
}
div.chart div.timeout > label {
  margin-left: 20px;
}
div.chart div.timeout input[type=number] {
  margin-left: 10px;
  margin-right: 4px;
  max-width: 55px;
}
div.chart div.timeout input[type=number]:nth-of-type(2) {
  max-width: 50px;
}

/* date components styling. */
.datefield {
  position: relative;
}
.datefield input[type=text].date.edit {
  background-color: white;
  border: 1px solid #CCCCCC;
  box-shadow: inset 0px 1px 3px #DDDDDD;
  color: black;
  padding-right: 15px;
  width: 100px;
}
.datefield input[type=text].date.edit:disabled {
  color: gray;
}
.datefield a.clear {
  background-color: white;
  background-image: url(media/search-clear.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px;
  cursor: pointer;
  display: none;
  height: 14px;
  left: 85px;
  padding: 1px;
  position: absolute;
  top: 2px;
  width: 14px;
}
.datefield input[type=text].date.edit.clearable + a.clear:hover, .datefield input[type=text].date.edit.clearable:hover + a.clear {
  display: inline-block;
}
.pika-single {
  z-index: 999999;
}
.quickselector {
  display: inline-block;
}
.quickselector a {
  border-radius: 2px;
  color: white;
  cursor: pointer;
  padding: 0 3px;
}
.quickselector a:hover {
  background-color: white;
  color: black;
  text-decoration: none;
}
.quickselector.disabled a,
.quickselector.disabled a:hover {
  background-color: black;
  color: #AAA;
  cursor: default;
}

/* file form styling. */
form.downloadform, form.uploadform {
  display: inline;
  margin-left: 5px;
  margin-right: 5px;
}

/* file upload form styling. */
form.uploadform input[type=file] {
  display: none;
}

table.importresult td {
  vertical-align: top;
}
table.importresult td:first-child {
  white-space: nowrap;
}

/* additional site tab layout tweaks. */
div.rules_details {
  background: white;
}
div.tabs {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
div.tab {
  height: calc(100% - 21px);
}

/* range input cross-browser styling. */
input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: unset;
  overflow-x: clip;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 450px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
  margin-top: -4px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range]::-moz-range-track {
  width: 100px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}
input[type=range].sundate::-moz-range-track {
  width: 450px;
}

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

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;
}
input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}
input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
  background: #888;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

form.searchbar label {
  display: block;
}

/* checklist styling. */
div.checklist {
  float: right;
  width: 240px;
  position: relative;
  margin: 2px 5px;
}
div.checklist a {
  border: 1px solid black;
  cursor: pointer;
  display: inline-block;
  margin: 0 5px -5px 5px;
  overflow-x: hidden;
  padding: 1px 20px 1px 10px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 42px);
}
div.checklist a:after {
  /* down arrow ▼ */
  content: "\25bc";
  font-size: 0.65em;
  position: absolute;
  right: 12px;
  top: 5px;
  pointer-events: none;
}
div.checklist a:hover,
div.checklist.opened a {
  border-color: white;
}
div.checklist.opened > div {
  background-color: black;
  border: 1px solid white;
  border-top-color: gray;
  position: absolute;
  left: 5px;
  width: calc(100% - 12px);
  z-index: 1;
  text-align: left;
}
div.checklist.opened label {
  overflow-x: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: unset;
  text-transform: unset;
  display: inline-block;
}
div.checklist.opened input[type=checkbox] {
  margin-right: auto;
  width: unset;
}
div.checklist.disabled a {
  border: 1px solid lightgray;
  color: lightgray;
  cursor: default;
}
.form-aligned div.checklist {
  top: -1px;
}
.querytable td > div.checklist {
  float: unset;
}

div.radiochoice > label > label {
  text-align: left;
  width: auto;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE10+ specific styles */

  .leaflet-marker-pane .marker-icon.luminaires.lowlight_deselected img {
    background-image: url("media/luminaires_hue83.png");
    opacity: 0.8;
  }

  .leaflet-marker-pane .marker-icon.luminaires.nomaintenance img {
    background-image: url("media/luminaires_invert100.png");
  }

  .leaflet-marker-pane .marker-icon.luminaires.basic img {
    background-image: url("media/luminaires_gray100.png");
  }

  .leaflet-marker-pane .marker-icon.luminaires.empty img {
    background-image: url("media/luminaires_gray100_brightness150_contrast300.png");
  }

  .leaflet-marker-pane .marker-icon.alerts.user_added img,
  .leaflet-marker-pane .marker-icon.alerts.error img {
    background: url("media/alerts_saturate500.png") no-repeat;
  }

  .leaflet-marker-pane .marker-icon.alerts.lowlight_deselected img {
    background-image: url("media/alerts_hue83.png");
    opacity: 0.8;
  }

  .leaflet-marker-pane .marker-icon.luminaires.nomaintenance img,
  .leaflet-marker-pane .marker-icon.luminaires.lowlight_deselected img,
  .leaflet-marker-pane .marker-icon.luminaires.basic img,
  .leaflet-marker-pane .marker-icon.luminaires.empty img,
  .leaflet-marker-pane .marker-icon.alerts.user_added img,
  .leaflet-marker-pane .marker-icon.alerts.error img,
  .leaflet-marker-pane .marker-icon.alerts.lowlight_deselected img {
    width: 16px;
    height: 16px;
    padding-left: 16px;
    display: block;
    box-sizing: border-box;
  }

  .leaflet-marker-pane .marker-icon.alerts.error.marker-hover img,
  .leaflet-marker-pane .marker-icon.alerts.error.marker-selected img,
  .leaflet-marker-pane .marker-icon.alerts.lowlight_deselected.marker-hover img,
  .leaflet-marker-pane .marker-icon.alerts.lowlight_deselected.marker-selected img
  .leaflet-marker-pane .marker-icon.alerts.user_added.marker-hover img,
  .leaflet-marker-pane .marker-icon.alerts.user_added.marker-selected img,
  .leaflet-marker-pane .marker-icon.luminaires.basic.marker-hover img,
  .leaflet-marker-pane .marker-icon.luminaires.basic.marker-selected img,
  .leaflet-marker-pane .marker-icon.luminaires.empty.marker-hover img,
  .leaflet-marker-pane .marker-icon.luminaires.empty.marker-selected img,
  .leaflet-marker-pane .marker-icon.luminaires.lowlight_deselected.marker-hover img,
  .leaflet-marker-pane .marker-icon.luminaires.lowlight_deselected.marker-selected img,
  .leaflet-marker-pane .marker-icon.luminaires.nomaintenance.marker-hover img,
  .leaflet-marker-pane .marker-icon.luminaires.nomaintenance.marker-selected img {
    background-position: 2px 2px;
    padding-left: 18px;
    width: 24px;
    height: 24px;
  }
}

body.login {
  overflow: hidden;
}
body.login .cover {
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}
body.login > div.error {
  border: 1px solid #D8000C;
  background: #FFBABA;
  color: #D8000C;
  left: 30px;
  padding: 15px;
  position: absolute;
  top: 60px;
  width: 400px;
  z-index: 1;
}
body.login > div.error a {
  border: 1px dotted #4F8A10;
  cursor: pointer;
  padding: 0px 5px;
  position: absolute;
  right: -1px;
  text-decoration: none;
  top: -1px;
}
body.login #footer {
  background-color: rgba(0, 0, 0, 0.5);
}
body.login #footer .version {
  padding-left: 7px;
  position: unset;
}

a.help {
  background-color: gray;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.8em;
  margin-left: 3px;
  padding: 0px 5px;
  position: relative;
  top: -5px;
  text-decoration: none;
  vertical-align: baseline;
}

@media only screen and (max-device-width: 1024px) {
  .login #header {
    height: 80px;
  }
  .login #header span {
    font-size: 42px;
    padding: 15px 10px 0px 5px;
  }
  .login #header form input[type=text], .login #header form input[type=password] {
    font-size: 52px;
    height: 100%;
    width: 200px;
    padding: 0 5px;
  }
  .login #header form input[type=image] {
    height: 70px;
    width: 80px;
  }
}

.plot {
  background-color: white;
  margin: 0 10px 0 5px;
  width: 440px;
}
.plot-loading {
  background-image: url("media/loading.gif");
  background-position: 50% calc(50% + 16px);
  background-repeat: no-repeat;
  height: 250px;
}
.plot-container {
  height: 300px;
  margin: 20px 20px 0 20px;
  overflow: initial;
}
.plot ul {
  display: table;
  list-style: none;
  margin: 10px 0;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}
.plot ul li {
  background-color: black;
  display: table-cell;
  padding: 3px;
  text-align: center;
}
.plot ul li:hover {
  cursor: pointer;
  background-color: #AAA;
}
.plot ul.disabled li, .plot ul.disabled li:hover {
  background-color: black;
  color: #DDD;
  cursor: default;
}
.plot ul li.active {
  background-color: white;
  color: black;
  cursor: default;
}
.plot ul.disabled li.active:hover {
  background-color: white;
  color: black;
}
.plot .controls {
  color: black;
  padding: 0 5px 5px 10px;
  text-align: left;
}
.plot .controls label {
  margin: 0;
  width: auto;
}
.plot .controls form.downloadform {
  display: block;
  text-align: right;
}
input[type=button].loading {
  background-image: url("media/loading.gif");
  background-position: right 2px top 2px;
  background-repeat: no-repeat;
  padding-right: 20px;
}

.c3-container {
  height: 100%;
  width: 100%;
}
.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-event-rect {
  cursor: default;
}
.c3-tooltip {
  color: #808080;
}

/* active alarm count overlay in alarms menu item. */
.alarmcount {
  position: absolute;
  top: 4px;
  right: 4px;
  color: black;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  border: 2px solid darkgray;
  padding: 0px 6px;
  border-radius: 50%;
  box-shadow: 0px 0px 4px grey;
  background: white;
  min-width: 10px;
  line-height: initial;
}
ul.tabs li span.alarmcount::first-line {
  line-height: inherit;
}
#sidebar.off > .tabs > ul > li > .alarmcount {
  font-size: 12px;
  min-width: 6px;
  padding: 0 4px;
}
.alarmcount:empty {
  display: none;
}

/* markered form location selector button styling. */
input[type=button].locationselector {
  background-image: url("media/pin.png");
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}
input[type=button].locationselector.active {
  background-color: white;
}
body.locationselector #map {
  cursor: crosshair;
}

/* version info under settings page */
.version {
  position: absolute;
  bottom: -15px;
  right: 10px;
}