@charset "UTF-8";

@font-face{
  font-family:"Noto-Sans";
  font-style:normal;
  font-weight:400;
  src:url("/fonts/noto-sans-v11-latin-regular.eot");
  src:local(""),url("/fonts/noto-sans-v11-latin-regular.eot?#iefix") format("embedded-opentype"),url("/fonts/noto-sans-v11-latin-regular.woff2") format("woff2"),url("/fonts/noto-sans-v11-latin-regular.woff") format("woff"),url("/fonts/noto-sans-v11-latin-regular.ttf") format("truetype"),url("/fonts/noto-sans-v11-latin-regular.svg#NotoSans") format("svg");
}
html{
  background:linear-gradient(to bottom,#fff,#c1bcbc),#c1bcbc;
  background-attachment:scroll;
  background-position:top;
  background-repeat:repeat-x;
  background-size:100% 618px;
}

body, input, label, select{
  font-family:Noto-Sans,sans-serif;
  font-size:12px;
}

body{
  font-size:12px;
  margin:8px;
}

canvas{
  height:100%;
  width:100%;
}

input[type=text],
input[type=text]:focus,
input[type=text]:active,
input[type=password],
input[type=password]:focus,
input[type=password]:active{
  outline:none;
}

div.Container{
  background-color:#fff;
  box-shadow:0px 0px 4px rgba(0,0,0,0.5);
  display:table;
  margin:16px auto;
}

div.Container > *{
  display:block;
  float:left;
}

div.Container header,
div.Container nav,
#LanguageSelector,
div.Container #Clock,
footer{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

div.Container.Header [Hidden]{
  display:none;
}

[Flag]{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100%;
}

[Flag=American]{
  background-image:url("/Images/Flags/us.svg");
}

[Flag=Belgian]{
  background-image:url("/Images/Flags/be.svg");
}

[Flag=Swiss]{
  background-image:url("/Images/Flags/ch.svg");
}

[Flag=Danish]{
  background-image:url("/Images/Flags/dk.svg");
}

[Flag=Dutch]{
  background-image:url("/Images/Flags/nl.svg");
}

[Flag=English]{
  background-image:url("/Images/Flags/gb.svg");
}

[Flag=Finnish]{
  background-image:url("/Images/Flags/fi.svg");
}

[Flag=French]{
  background-image:url("/Images/Flags/fr.svg");
}

[Flag=German]{
  background-image:url("/Images/Flags/de.svg");
}

[Flag=Italian]{
  background-image:url("/Images/Flags/it.svg");
}

[Flag=Luxembourgish],
[Flag=Luxemburgish]{
  background-image:url("/Images/Flags/lu.svg");
}

[Flag=Norwegian]{
  background-image:url("/Images/Flags/no.svg");
}

[Flag=Polish]{
  background-image:url("/Images/Flags/pl.svg");
}

[Flag=Portugese]{
  background-image:url("/Images/Flags/pt.svg");
}

[Flag=Spanish]{
  background-image:url("/Images/Flags/es.svg");
}

[Flag=Swedish]{
  background-image:url("/Images/Flags/se.svg");
}

#Overlay,
#OverlayDialog,
#OverlaySelection{
  background-color:rgba(0,0,0,0);
  border:none;
  display:block;
  position:fixed;
  height:100%;
  left:0;
  top:0;
  width:100%;
  z-index:2;
  transition:all 50ms linear;
}

#Overlay{
  z-index:2;
}

#OverlayDialog{
  z-index:3;
}

#OverlaySelection{
  background-color:rgba(255,255,255,0);
  z-index:4;
}

#Overlay.Darken,
#OverlayDialog.Darken{
  background-color:rgba(0,0,0,0.5);
}

dialog:is(#Overlay, #OverlayDialog, #OverlaySelection):focus-within{
  border:none;
}

dialog:is(#Overlay, #OverlayDialog, #OverlaySelection):not(:focus-within):not(.Darken){
  border:none;
  background-color:rgba(255,255,255,0.01);
  transition:background-color 0.01s ease;
}

#Popup{
  background-color:#fff;
  box-shadow:rgba(0,0,0,0.5) 5px 5px 5px;
  outline:none;
}

#PopupSelection{
  background-color:#fff;
  box-shadow:rgba(0,0,0,0.5) 0px 0px 2px,rgba(0,0,0,0.5) 5px 5px 5px;
  outline:none;
}

:is(#Popup, #PopupSelection):focus{
  outline:none;
}

h1[DataTable]{
  font-size:110%;
  font-weight:bold;
  line-height:20px;
  padding:0 8px;
}

table[DataTable]{
  border-width:2px;
  margin:6px;
  width:calc(100% - 12px);
}
table[DataTable] td{
  min-height:20px;
  line-height:20px;
  padding-left:4px;
}
table[DataTable] td[noindent]{
  padding-left:0px;
}
table[DataTable] thead td{
  background-color:#bbb;
  font-weight:bold;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
table[DataTable] thead td[Drag]{
  width:5px;
}
table[DataTable] thead td[Sortable]{
  background-position:right center;
  background-repeat:no-repeat;
  background-size:18px;
  cursor:pointer;
}
table[DataTable] thead td[Sortable]:hover{
  background-color:#888;
  color:#fff;
}
table[DataTable] thead td[Sortable][SortAsc]{
  background-image:url("/Images/Icons/ascending.svg?000");
}
table[DataTable] thead td[Sortable][SortAsc]:hover{
  background-image:url("/Images/Icons/ascending.svg");
}
table[DataTable] thead td[Sortable][SortDesc]{
  background-image:url("/Images/Icons/descending.svg?000");
}
table[DataTable] thead td[Sortable][SortDesc]:hover{
  background-image:url("/Images/Icons/descending.svg");
}
table[DataTable] tbody td{
  background-color:#eee;
}
table[DataTable] tbody td[NoDrag]{
  width:5px;
}
table[DataTable] tbody td[Drag]{
  background-position:center center;
  background-repeat:no-repeat;
  background-size:18px;
  background-image:url("/Images/Icons/drag.svg?000");
  cursor:move;
  width:5px;
}
table[DataTable] tbody td[Drag]:hover{
  background-image:url("/Images/Icons/drag.svg");
}
table[DataTable] tbody tr[Clickable] td{
  cursor:pointer;
}
table[DataTable] tbody tr[Clickable]:hover td{
  background-color:#ddd;
}
table[DataTable] tbody tr[Group] td{
  font-weight:bold;
  font-size:110%;
  font-style:italic;
  padding-left:8px;
}
table[DataTable] tbody tr.Drop td{
  background:linear-gradient(to bottom,#ffff88,#ffffaa);
}
table[DataTable] div.Icon{
  background-position:left center;
  background-repeat:no-repeat;
  background-size:100%;
  height:20px;
  display:block;
  width:20px;
}
table[DataTable] div.Icon[Active]{
  background-image:url("/Images/Icons/Check.svg?080");
}
table[DataTable] div.Icon[Inactive]{
  background-image:url("/Images/Icons/Cross.svg?888");
}
table[DataTable] div.Icon[PasswordExpired]{
  background-image:url("/Images/Icons/Warning.svg?f80");
}
table[DataTable] td[Actions] input[type=button]{
  background:#ccc;
  border:none;
  cursor:pointer;
  display:inline-block;
  font-size:90%;
  font-weight:bold;
  margin-right:4px;
  padding:2px 4px;
}
table[DataTable] td[Actions] input[type=button]:hover{
  background:#888;
  color:#fff;
}
table[DataTable] td[Actions] a{
  background-color:#ddd;
  cursor:pointer;
  display:inline-block;
  height:20px;
  min-width:20px;
  padding:0 4px;
}
table[DataTable] td[Actions] a:hover{
  background-color:#888;
  color:#fff;
}
table[DataTable] td[Actions] a:not(:first-child){
  margin-left:4px;
}

div.DragDrop{
  position:absolute;
  top:0px;
  left:0px;
  border:solid 1px #888;
  background-color:#fff;
  margin:0px;
  padding:0px;
  opacity:0.8;
}
div.DragDrop table{
  margin:0px;
  padding:0px;
}
div.DragDrop table td{
  background-color:#ddd;
  cursor:move;
}

div[DataTable].Buttons input[type=button]{
  background:#eee;
  border:solid 1px #888;
  cursor:pointer;
  display:inline-block;
  font-size:90%;
  font-weight:bold;
  margin-right:2px;
  padding:2px 4px;
}
div[DataTable].Buttons input[type=button]:hover{
  background:#ccc;
  color:#000;
}

div[Treeview]{
  display:block;
  float:left;
  padding:16px 0;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
div[Treeview] div span{
  transition:50ms;
}
div[Treeview] div span:hover{
  background-color:#ddd;
}
div[Treeview] div[Folder], div[Treeview] div[Items]{
  padding-left:16px;
  box-sizing:border-box;
  width:100%;
}
div[Treeview] div[Folder]{
  clear:none;
  cursor:pointer;
  display:block;
  line-height:20px;
  float:left;
}
div[Treeview] div[Folder][Expanded] div[Folder], div[Treeview] div[Folder][Expanded] div[Items]{
  display:block;
}
div[Treeview] div[Folder]:not([Expanded]) div[Folder], div[Treeview] div[Folder]:not([Expanded]) div[Items]{
  display:none;
}
div[Treeview] div[Folder]::before{
  background-image:url("/Images/Icons/Triangle.svg?888");
  background-size:12px;
  background-position:center;
  background-repeat:no-repeat;
  transform:rotate(180deg);
  transition:200ms;
  content:"";
  display:block;
  float:left;
  height:20px;
  width:20px;
}
div[Treeview] div[Folder]:not([Expanded])::before{
  transform:rotate(90deg);
}


div.Container.Header header{
  background-color:#fff;
  height:48px;
  width:128px;
}
div.Container.Header aside{
  display:table;
  float:right;
}
div.Container.Header aside #LanguageSelector:not([Hidden]){
  background-color:#fff;
  background-size:32px;
  cursor:pointer;
  height:48px;
  line-height:24px;
  width:48px;
}
div.Container.Header aside #LanguageSelector:hover{
  background-color:#ddd;
}
div.Container.Header aside #Clock{
  display:block;
  font-size:90%;
  height:48px;
  line-height:24px;
  text-align:center;
  width:96px;
}
div.Container.Header aside nav{
  background-color:#fff;
  display:block;
  height:48px;
}
div.Container.Header aside > *{
  float:left;
}
div.Container.Header div#Title{
  background-color:#fff;
  box-sizing:border-box;
  width:100%;
}
div.Container.Header div#Title h1{
  font-size:110%;
  font-weight:bold;
  height:32px;
  margin:8px;
  margin-bottom:0;
  line-height:32px;
  text-align:center;
  width:calc(100% - 16px);
}

div.Container main{
  background-color:#fff;
  min-height:200px;
  width:100%;
}


#Popup.dialog{
  background-repeat:no-repeat,no-repeat;
  background-position:16px 16px,8px 8px;
  background-size:32px,48px;
  box-sizing:border-box;
  margin:auto;
  height:160px;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:448px;
}
#Popup.dialog h1{
  font-size:120%;
  font-weight:bold;
  margin:0 8px;
  line-height:32px;
  padding:0;
}
#Popup.dialog p{
  margin:0 8px;
  line-height:20px;
  padding:0;
}
#Popup.dialog div:is(.Buttons, .buttons){
  position:absolute;
  bottom:8px;
  right:8px;
}
#Popup.dialog input[type=button]{
  background-color:#ddd;
  border:none;
  cursor:pointer;
  height:32px;
  width:96px;
}
#Popup.dialog input[type=button]:not(:first-child){
  margin-left:8px;
}

#Popup.dialog.error > *,
#Popup.dialog.info > *,
#Popup.dialog.question > *,
#Popup.dialog.warning > *{
  padding-left:64px;
}

#Popup.dialog.error{
  background-image:url("/Images/Icons/warning.svg"),url("/Images/Icons/octagon.svg?800");
}

#Popup.dialog.info{
  background-image:url("/Images/Icons/info.svg"),url("/Images/Icons/circle.svg?008");
}

#Popup.dialog.question{
  background-image:url("/Images/Icons/question.svg"),url("/Images/Icons/circle.svg?008");
}

#Popup.dialog.warning{
  background-image:url("/Images/Icons/warning.svg?000"),url("/Images/Icons/triangle.svg?ff0");
  background-position:16px 16px,4px 0px;
  background-size:32px,56px;
}

#Popup.dialog.fileupload{
  width:200px;
  height:100px;
}

#Popup.EditUserAddRole{
  box-sizing:border-box;
  margin:auto;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:448px;
  height:160px;
}

#Popup.menu,
#PopupSelection.menu{
  line-height:32px;
  position:absolute;
  width:256px;
  max-height:384px;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
}
#Popup.menu ul,
#PopupSelection.menu ul{
  display:table;
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
#Popup.menu ul li,
#PopupSelection.menu ul li{
  box-sizing:border-box;
  cursor:pointer;
  height:32px;
  line-height:32px;
  overflow:hidden;
  padding:0;
  padding-left:40px;
  padding-right:8px;
  text-overflow:ellipsis;
  width:100%;
  scroll-snap-align:start;
}
#Popup.menu ul li[NoIndent=true],
#PopupSelection.menu ul li[NoIndent=true]{
  padding-left:8px;
}
#Popup.menu ul li[Selected],
#PopupSelection.menu ul li[Selected]{
  background-color:#aaa;
  color:#000;
}
#Popup.menu ul li[Title],
#PopupSelection.menu ul li[Title]{
  cursor:default;
  font-style:italic;
  font-weight:bold;
}
#Popup.menu ul li:not([Title]):hover,
#Popup.menu ul li[Selected]:hover,
#PopupSelection.menu ul li:not([Title]):hover,
#PopupSelection.menu ul li[Selected]:hover{
  background-color:#888;
  color:#fff;
}
#Popup.menu ul li[Flag],
#PopupSelection.menu ul li[Flag]{
  background-size:32px;
  background-position:4px center;
  background-repeat:no-repeat;
}

#PopupSelection.selection.search{
  scroll-padding:24px;
}

#PopupSelection.selection{
  line-height:24px;
  position:absolute;
  width:256px;
  max-height:384px;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
}
#PopupSelection.selection input.Search{
  background-image:url("/Images/Icons/search.svg?888");
  background-position:right center;
  background-repeat:no-repeat;
  background-size:auto 90%;
  border:none;
  border-bottom:solid 1px #888;
  position:sticky;
  top:0;
  height:24px;
  width:100%;
}
#PopupSelection.selection inputSearch:not(:valid):not(:focus){
  background-color:transparent;
  box-shadow:none;
}
#PopupSelection.selection ul{
  display:table;
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
#PopupSelection.selection ul li{
  box-sizing:border-box;
  cursor:pointer;
  height:24px;
  line-height:24px;
  overflow:hidden;
  padding:0;
  padding-left:16px;
  padding-right:8px;
  text-overflow:ellipsis;
  width:100%;
  scroll-snap-align:start;
  white-space:nowrap;
}
#PopupSelection.selection ul li[NoIndent=true]{
  padding-left:8px;
}
#PopupSelection.selection ul li[Title]{
  cursor:default;
  font-style:italic;
  font-weight:bold;
  padding-left:8px;
}
#PopupSelection.selection ul li[Level="1"]{
  padding-left:8px;
}
#PopupSelection.selection ul li[Level="2"]{
  padding-left:16px;
}
#PopupSelection.selection ul li[Level="3"]{
  padding-left:24px;
}
#PopupSelection.selection ul li[Level="4"]{
  padding-left:32px;
}
#PopupSelection.selection ul li[Level="5"]{
  padding-left:40px;
}
#PopupSelection.selection ul li[Level="6"]{
  padding-left:48px;
}
#PopupSelection.selection ul li[Level="7"]{
  padding-left:56px;
}
#PopupSelection.selection ul li[Level="8"]{
  padding-left:64px;
}
#PopupSelection.selection ul li[Level="9"]{
  padding-left:72px;
}
#PopupSelection.selection ul li[Level="10"]{
  padding-left:80px;
}
#PopupSelection.selection ul li[Selected]{
  background-color:#aaa;
  color:#000;
}
#PopupSelection.selection ul li:not([Title]):hover,
#PopupSelection.selection ul li[Selected]:hover{
  background-color:#888;
  color:#fff;
}
#PopupSelection.selection ul li[Flag]{
  background-size:20px;
  background-position:2px center;
  background-repeat:no-repeat;
}


main > div.Actions,
main > div.Buttons{
  background-color:#ddd;
  box-sizing:border-box;
  margin:8px;
  padding:8px;
  width:calc(100% - 16px);
}

main > div.Actions > *,
main > div.Buttons > *{
  display:inline-block;
}

main > div.Actions form{
  display:inline-block;
}
main > div.Actions form fieldset{
  max-width:inherit;
  padding:0;
}
main > div.Actions form fieldset ul{
  display:inline-block;
  list-style:none;
  max-width:inherit;
  margin:0;
  padding:0;
}
main > div.Actions form fieldset ul li{
  clear:none;
  display:block;
  float:left;
  width:auto;
}
main > div.Actions form fieldset ul li label,
main > div.Actions form fieldset ul li span.Label{
  width:auto;
}


[Landing] div.Container{
  height:18px;
  width:448px;
}
[Landing] div.Container main{
  height:200px;
}
[Landing] div.Container main.RememberUsername{
  height:232px;
}

[Landing] div.Container.Header{
  background-color:transparent;
  box-shadow:none;
  height:96px;
  width:480px;
}

[Landing] div.Container.Header header{
  background-color:transparent;
  background-image:url("/Images/Logos/dvp-smart-concepts.svg");
  background-size:192px;
  background-repeat:no-repeat;
  background-position:center center;
  height:96px;
  width:192px;
}

[Landing] div.Container header::after{
  content:"";
  display:none;
}

[Landing] div.Container nav{
  background-color:transparent;
  display:block;
  height:96px;
  width:calc(100% - 352px);
}

[Landing] #LanguageSelector,
[Landing] div.Container #Clock{
  background-color:transparent;
  margin-top:28px;
}

[Landing] #LanguageSelector{
  width:64px;
}

[Landing] #LanguageSelector::after{
  color:#888;
  content:"▼";
  font-size:75%;
  height:48px;
  margin-left:56px;
  line-height:48px;
  width:24px;
}

[Landing] #LanguageSelector:hover{
  background-color:transparent;
}

[Landing] #LanguageSelector:hover::after{
  color:#000;
}

[Landing] div.Container #Clock{
  margin-right:0;
}

[Landing] fieldset{
  border:none;
  margin:0;
  padding:0;
}

[Landing] legend{
  font-weight:bold;
  margin:16px auto;
}

[Landing] fieldset ul{
  display:table;
  list-style:none;
  margin:0;
  padding:0;
  width:calc(100% - 48px);
}

[Landing] fieldset li{
  line-height:32px;
  margin:8px 24px;
  padding:0;
  width:100%;
}

[Landing] fieldset li label{
  box-sizing:border-box;
  display:inline-block;
  font-weight:bold;
  margin:0;
  padding:0;
  width:100%;
}

[Landing] fieldset li label.LabelAfterInput{
  float:right;
  width:calc(70% - 24px);
}

[Landing] fieldset li label.LabelAfterInput span{
  font-weight:normal;
}

[Landing] fieldset li input{
  float:right;
}

[Landing] fieldset li label.LabelAfterInput input{
  float:left;
}

[Landing] fieldset li input[type=text],
[Landing] fieldset li input[type=password]{
  border:#888 solid 1px;
  box-sizing:border-box;
  display:inline-block;
  height:32px;
  margin:0;
  padding:0 4px;
  width:calc(70% - 24px);
}

[Landing] div.Buttons input[type=button]{
  background:linear-gradient(to bottom,#7fb240,#57924d);
  border:none;
  color:#fff;
  cursor:pointer;
  font-weight:bold;
  height:32px;
  margin-top:16px;
  margin-right:24px;
  float:right;
  width:96px;
}

[Landing] div.Buttons input[type=button]:hover{
  background:linear-gradient(to bottom,#aecf7a,#83b53e);
}

[Landing] div.Buttons input[type=button]:not([disabled]){
  cursor:pointer;
}

[Landing] div.Buttons input[type=button][disabled]{
  background:linear-gradient(to bottom,#ddd,#bbb);
  color:#888;
  cursor:default;
}

label.LabelAfterInput input[type=checkbox]{
  display:none;
}
label.LabelAfterInput input[type=checkbox] + .Label:before{
  cursor:pointer;
  background:url("/Images/Icons/Check.svg?fff"),linear-gradient(to bottom,#aecf7a,#83b53e),#fff;
  background-size:0,0,100%;
  background-repeat:no-repeat,repeat;
  background-position:center center;
  border-radius:4px;
  border:solid 1px #aaa;
  box-shadow:inset rgba(0,0,0,0.2) 0px 0px 3px;
  content:"";
  display:inline-block;
  line-height:16px;
  margin:0 8px;
  height:16px;
  position:relative;
  top:2px;
  width:16px;
  transition:all 100ms linear;
}
label.LabelAfterInput input[type=checkbox]:disabled + .Label:before{
  cursor:default;
  background:linear-gradient(to bottom,#eee,#ddd);
  background-size:75%,100%,0;
  background-repeat:no-repeat,repeat;
  background-position:center center;
}
label.LabelAfterInput input[type=checkbox]:checked + .Label:before{
  background:url("/Images/Icons/Check.svg?fff"),linear-gradient(to bottom,#aecf7a,#83b53e);
  background-size:75%,100%,0;
  background-repeat:no-repeat,repeat;
  background-position:center center;
}
label.LabelAfterInput input[type=checkbox]:checked:disabled + .Label:before{
  cursor:default;
  background:url("/Images/Icons/Check.svg?aaa"),linear-gradient(to bottom,#eee,#ddd);
  background-size:75%,100%,0;
  background-repeat:no-repeat,repeat;
  background-position:center center;
}


[Overview] div.Container,
footer{
  min-width:920px;
  max-width:1120px;
  width:calc(100% - 8px);
}

[Overview] div.Container nav{
  display:table;
  padding:0;
}
[Overview] div.Container nav ul{
  list-style:none;
  padding:0;
}

[Overview] div.Container nav[Icons] ul{
  display:table-row;
  margin:0;
}
[Overview] div.Container nav[Icons] ul li{
  display:table-cell;
  width:84px;
}
[Overview] div.Container nav[Icons] ul li a{
  cursor:pointer;
  display:block;
  font-size:90%;
  font-variant:small-caps;
  font-weight:bold;
  height:100%;
  line-height:24px;
  margin:0;
  overflow:hidden;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:100%;
}
[Overview] div.Container nav[Icons] ul li a:before{
  background-image:url("/Images/Icons/Octagon.svg?000");
  background-position:center;
  background-repeat:no-repeat;
  background-size:75%;
  display:block;
  content:"";
  margin:0 auto;
  height:60px;
  width:60px;
}
[Overview] div.Container nav[Icons] ul li a:hover{
  background-color:#ddd;
}
[Overview] div.Container nav[Icons] ul li a#Overview:before{
  background-image:url("/Images/Icons/Map-Location.svg?000");
}
[Overview] div.Container nav[Icons] ul li a#Controllers:before{
  background-image:url("/Images/Icons/Network.svg?000");
}
[Overview] div.Container nav[Icons] ul li a#User:before{
  background-image:url("/Images/Icons/User.svg?000");
}
[Overview] div.Container nav[Icons] ul li a#Users:before{
  background-image:url("/Images/Icons/Users.svg?000");
}
[Overview] div.Container nav[Icons] ul li a#Settings:before{
  background-image:url("/Images/Icons/Cog.svg?000");
}
[Overview] div.Container nav[Icons] ul li a#LogOut:before{
  background-image:url("/Images/Icons/Logout.svg?000");
}
[Overview] div.Container nav[Icons] ul li[Disabled] a{
  cursor:default;
}
[Overview] div.Container nav[Icons] ul li[Disabled] a:before{
  background-image:url("/Images/Icons/Octagon.svg?888");
}
[Overview] div.Container nav[Icons] ul li[Disabled] a#Overview:before{
  background-image:url("/Images/Icons/Map-Location.svg?888");
}
[Overview] div.Container nav[Icons] ul li[Disabled] a#Controllers:before{
  background-image:url("/Images/Icons/Network.svg?888");
}
[Overview] div.Container nav[Icons] ul li[Disabled] a#User:before{
  background-image:url("/Images/Icons/User.svg?888");
}
[Overview] div.Container nav[Icons] ul li[Disabled] a#Users:before{
  background-image:url("/Images/Icons/Users.svg?888");
}
[Overview] div.Container nav[Icons] ul li[Disabled] a#Settings:before{
  background-image:url("/Images/Icons/Cog.svg?888");
}
[Overview] div.Container nav[Icons] ul li[Disabled] a#LogOut:before{
  background-image:url("/Images/Icons/Logout.svg?888");
}

[Overview] div.Container nav:not([Icons]) ul{
  margin:12px;
}
[Overview] div.Container nav:not([Icons]) ul li{
  display:inline-block;
}
[Overview] div.Container nav:not([Icons]) ul li [DateTimeInput]{
  margin:2px 0px;
}
[Overview] div.Container nav:not([Icons]) ul li a{
  background:linear-gradient(to bottom,#7fb240,#57924d);
  color:#fff;
  cursor:pointer;
  display:table;
  font-size:90%;
  font-weight:bold;
  height:24px;
  line-height:24px;
  margin:2px 0px;
  min-width:96px;
  padding:0 4px;
  text-align:center;
  text-transform:uppercase;
  transition:all 100ms linear;
}
[Overview] div.Container nav:not([Icons]) ul li a:is(:hover, [Selected]){
  background:linear-gradient(to bottom,#aecf7a,#83b53e);
  padding:2px 4px;
  margin:0px;
}
[Overview] div.Container nav:not([Icons]) ul li a:is([Alarm]){
  background:linear-gradient(to bottom,#b24040,#924d4d);
}
[Overview] div.Container nav:not([Icons]) ul li a:is([Alarm]):hover{
  background:linear-gradient(to bottom,#cf7a7a,#b53e3e);
}
[Overview] div.Container nav:not([Icons]) ul li a:is([Selected][Alarm]){
  background:linear-gradient(to bottom,#cf7a7a,#b53e3e);
}
[Overview] div.Container nav:not([Icons]) ul li:not(:first-child){
  margin-left:4px;
}
[Overview] div.Container nav:not([Icons]) li[Disabled] a,
[Overview] div.Container nav:not([Icons]) li[Disabled] a:hover{
  background:linear-gradient(to bottom,#ddd,#bbb);
  cursor:default;
}


div.Container#SubMenu{
  display:none;
}

div.Container.Visible#SubMenu{
  display:table;
  height:40px;
  width:100%;
}

div.Container#SubMenu ul{
  list-style:none;
  margin:12px;
  padding:0;
}

div.Container#SubMenu ul{
  display:table;
}

div.Container#SubMenu li{
  display:inline-block;
}

div.Container#SubMenu li a::before{
  color:#fff;
  float:left;
}

div.Container#SubMenu li a{
  background:linear-gradient(to bottom,#7fb240,#57924d);
  color:#fff;
  cursor:pointer;
  display:block;
  font-size:90%;
  font-weight:bold;
  height:24px;
  line-height:24px;
  margin:2px 0;
  min-width:96px;
  padding:0 4px;
  text-align:center;
  text-transform:uppercase;
  transition:all 100ms linear;
}

div.Container#SubMenu li a:hover,
div.Container#SubMenu li.Active a,
div.Container#SubMenu li[Selected] a{
  background:linear-gradient(to bottom,#aecf7a,#83b53e);
  margin:0;
  padding:2px 4px;
}

div.Container#SubMenu li:not(:first-child){
  margin-left:4px;
}


#Loading{
  background-color:#7fb240;
  border-radius:4px;
  box-shadow:rgba(0,0,0,0.5) 5px 5px 5px;
  color:white;
  display:block;
  font-size:120%;
  font-weight:bold;
  position:fixed;
  height:24px;
  line-height:24px;
  left:calc(50% - 50px);
  bottom:48px;
  text-align:center;
  width:120px;
  z-index:1;
}


footer{
  display:none;
}

[Overview] footer{
  display:table;
  margin:8px auto;
  width:100%;
}

[Overview] footer span{
  box-sizing:border-box;
  padding:0 16px;
}

[Overview] footer span.Copyright{
  color:#fff;
  font-size:80%;
  line-height:20px;
  width:50%;
}

[Overview] footer span.Slogan{
  color:#817466;
  font-size:110%;
  font-weight:bold;
  float:right;
  line-height:20px;
  text-align:right;
  width:50%;
}


[Overview] form fieldset{
  border:none;
}
[Overview] form fieldset legend{
  float:left;
  font-size:110%;
  font-weight:bold;
  line-height:20px;
  padding:0 8px;
  width:calc(100% - 16px);
}
[Overview] form fieldset ul{
  box-sizing:border-box;
  display:table;
  line-height:24px;
  list-style:none;
  max-width:550px;
  padding:0 16px;
  width:100%;
}
[Overview] form fieldset ul li{
  display:table-row;
  width:100%;
}
[Overview] form fieldset li label{
  float:left;
  width:100%;
}
[Overview] form fieldset li label > *{
  box-sizing:border-box;
  float:left;
  padding:0 4px;
}
[Overview] form fieldset li span{
  line-height:22px;
}
[Overview] form fieldset li span.Label{
  width:50%;
}
[Overview] form fieldset li :is(input, select){
  background-color:#fff;
  border:solid 1px #888;
  height:20px;
  line-height:20px;
  padding:0 4px;
  transition:background 50ms linear;
  width:50%;
}
[Overview] form fieldset li :is(input, select)[disabled],
[Overview] form fieldset li [Selection][Disabled]{
  background-color:#bbb;
  color:#444;
}
[Overview] form fieldset li [Selection]:is(:focus, :hover){
  background-color:#eee;
}
[Overview] form fieldset li input:is([type=checkbox], [type=radio]){
  height:16px;
  width:auto;
}
[Overview] form fieldset li [Selection]{
  background-color:#fff;
  background-image:url("/Images/Icons/Triangle-Down.svg?444");
  background-position:calc(100% - 4px) center;
  background-repeat:no-repeat;
  background-size:8px;
  border:solid 1px #888;
  cursor:pointer;
  height:20px;
  line-height:20px;
  padding:0 4px;
  transition:all 100ms linear;
  width:50%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
[Overview] form fieldset li [Selection]:hover{
  background-color:#eee;
}
[Overview] form fieldset li [DatetimeInput]{
  padding:0px;
}
[Overview] form fieldset li .WithUnit{
  width:30%;
}
[Overview] form fieldset li table[DataTable]{
  border-width:2px;
  margin:0px;
  width:100%;
}
[Overview] form fieldset li table[DataTable] td[Actions] input[type=button]{
  color:buttontext;
  margin:0 4px 0 0;
  width:revert;
  height:revert;
  line-height:normal;
}
[Overview] form fieldset input[type=button]{
  margin-left:4px;
  background:linear-gradient(to bottom,#7fb240,#57924d);
  border:none;
  color:#fff;
  cursor:pointer;
  font-weight:bold;
  height:20px;
  width:85px;
}
[Overview] form fieldset input[type=button]:hover{
  background:linear-gradient(to bottom,#aecf7a,#83b53e);
}
[Overview] form fieldset input[type=button]:not([disabled]){
  cursor:pointer;
}
[Overview] form fieldset input[type=button][disabled]{
  background:linear-gradient(to bottom,#ddd,#bbb);
  color:#444;
  cursor:default;
}
[Overview] form fieldset ul li div.fileupload{
  padding:0px;
}
[Overview] form fieldset ul li div.fileupload input[type=text]{
  width:calc(100% - 100px);
}
[Overview] form fieldset ul li div.fileupload input[type=file]{
  display:none;
}
[Overview] form fieldset ul li div.colorpicker{
  width:20px;
  height:20px;
  border:solid 1px #888;
}
[Overview] form fieldset ul li div.colorpicker input[type=color]{
  visibility:hidden;
  width:0px;
  height:0px;
}
[Overview] form fieldset.Options.Binary{
  border:none;
  display:table;
  float:left;
  margin:0;
  width:50%;
}
[Overview] form fieldset.Options.Binary label{
  display:block;
  float:left;
  width:50%;
}


form[UserRights] fieldset legend{
  display:block;
  margin:8px 0;
}

table[UserRights],
table[GroupUserRights]{
  border-width:2px;
  margin:6px;
}
table[UserRights] td,
table[GroupUserRights] td{
  min-height:20px;
  line-height:20px;
}
table[UserRights] thead td,
table[GroupUserRights] thead td{
  background-color:#bbb;
  font-weight:bold;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
table[UserRights] tbody td,
table[GroupUserRights] tbody td{
  background-color:#eee;
}
table[UserRights] td.Control,
table[GroupUserRights] td.Control{
  text-align:center;
}

table[UserRights]{
  margin-left:16px;
  width:auto;
}
table[UserRights] td[Description]{
  width:300px;
}
table[UserRights] td[Type],
table[UserRights] td[Empty]{
  text-align:center;
  width:80px;
}
table[UserRights] td[Type] label{
  cursor:help;
  display:block;
  position:relative;
  width:100%;
}
table[UserRights] td[Type] label:hover::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:32px;
  left:0;
  min-width:128px;
  box-shadow:0px 0px 4px rgba(0,0,0,0.5);
  padding:4px;
  color:black;
  background-color:#fff;
  display:table;
  text-align:center;
  font-size:80%;
  z-index:1;
}

table[GroupUserRights]{
  width:calc(100% - 12px);
}


div[DateTimeInput].Expand span[Label],
div[DateTimeInput]:not(.Expand) div.DateTimeInput{
  display:none;
}

div[DateTimeInput] span[Label]{
  background-color:#fff;
  border:#888 solid 1px;
  cursor:pointer;
  box-sizing:border-box;
  display:inline-block;
  margin:0;
  padding:0 4px;
}

div[DateTimeInput]:not([ReadOnly]) span[Label]::after{
  background-image:url("/Images/Icons/Triangle.svg?444");
  background-position:calc(100% - 4px) center;
  background-repeat:no-repeat;
  background-size:8px;
  content:"";
  display:block;
  float:right;
  margin:4px;
  transform:rotate(180deg);
  height:12px;
  width:12px;
}

div[DateTimeInput]:not([ReadOnly]) span[Label]:hover{
  background-color:#ddd;
}

div.DateTimeInput{
  background-color:#fff;
  box-shadow:rgba(0,0,0,0.5) 5px 5px 5px;
  position:absolute;
  width:300px;
  z-index:3;
}

div[DateTimeInput][ReadOnly]{
  background:linear-gradient(to bottom,#eee,#ddd);
  color:#444;
}

div.DateTimeInput div[DateInput],
div.DateTimeInput div[TimeInput]{
  box-sizing:border-box;
  display:block;
  float:left;
  padding:0 4px;
  text-align:center;
  width:50%;
}

div.DateTimeInput div[DateInput] input,
div.DateTimeInput div[TimeInput] input{
  border:0;
  margin:0;
  padding:0;
  text-align:center;
  width:24px;
}

div.DateTimeInput div[DateInput] input[Year]{
  width:36px;
}

table[Calendar]{
  border-collapse:collapse;
  table-layout:fixed;
  width:100%;
}
table[Calendar] td{
  text-align:center;
}
table[Calendar] thead{
  width:100%;
}
table[Calendar] thead span{
  display:inline;
}
table[Calendar] thead[Title] td{
  background:linear-gradient(to bottom,#7fb240,#57924d);
}
table[Calendar] thead[Weekdays] td{
  background-color:#bbb;
}
table[Calendar] tbody td:not(:last-child){
  border-right:solid 1px #fff;
}
table[Calendar] tbody tr:not(:last-child){
  border-bottom:solid 1px #fff;
}
table[Calendar] tbody td:not([OutOfRange]){
  background-color:#eee;
  cursor:pointer;
}
table[Calendar] tbody td[OtherMonth]{
  background-color:#ddd;
  color:#888;
}
table[Calendar] tbody td[OutOfRange],
table[Calendar] tbody td[OutOfRange][OtherMonth]{
  background-color:#888;
  color:#444;
  cursor:not-allowed;
}
table[Calendar] tbody td:not([OutOfRange]):hover{
  background-color:#bbb;
}
table[Calendar] tbody td[Selected]{
  background:linear-gradient(to bottom,#ffff88,#ffffaa);
  color:#000;
  font-weight:bold;
}
table[Calendar] tbody td[Marked]{
  background:linear-gradient(to bottom,#ffff88,#ffffaa);
  color:#000;
  font-weight:bold;
}

div[DateTimeInput] thead td[Previous],
div[DateTimeInput] thead td[Next]{
  cursor:pointer;
}
div[DateTimeInput] thead td[Previous]:hover,
div[DateTimeInput] thead td[Next]:hover{
  background:linear-gradient(to bottom,#aecf7a,#83b53e);
}
div[DateTimeInput] thead td[Previous]::after,
div[DateTimeInput] thead td[Next]::after{
  background-image:url("/Images/Icons/Triangle.svg?444");
  background-position:center center;
  background-repeat:no-repeat;
  background-size:12px;
  content:"";
  display:block;
  margin:4px auto;
  transform:rotate(180deg);
  height:12px;
  width:12px;
}
div[DateTimeInput] thead td[Previous]::after{
  transform:rotate(270deg);
}
div[DateTimeInput] thead td[Next]::after{
  transform:rotate(90deg);
}
div[DateTimeInput] thead[Title] span[Month],
div[DateTimeInput] thead[Title] span[Year]{
  cursor:pointer;
}
div[DateTimeInput] thead[Title] span[Month]:hover,
div[DateTimeInput] thead[Title] span[Year]:hover{
  text-decoration:underline;
}


div[Time],
div[Timespan]{
  background-color:#fff;
  border:solid 1px #bbb;
  border-radius:2px;
  height:20px;
  line-height:20px;
  padding:0 4px;
  width:50%;
}
div[Time] input[type=text],
div[Timespan] input[type=text]{
  background-color:transparent;
  border:0;
  margin:0;
  padding:0;
  text-align:center;
  width:24px;
}

div[Time],
div[Timespan][Disabled]{
  background:linear-gradient(to bottom,#eee,#ddd);
  color:#444;
}


[Overview] form fieldset ul li [Slider]{
  height:24px;
  padding:0;
  width:50%;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
[Overview] form fieldset ul li [Slider] [Less], [Overview] form fieldset ul li [Slider] [More], [Overview] form fieldset ul li [Slider] [Track], [Overview] form fieldset ul li [Slider] input{
  display:table;
  float:left;
  height:100%;
}
[Overview] form fieldset ul li [Slider] input{
  box-sizing:border-box;
}
[Overview] form fieldset ul li [Slider] [Track]{
  background:linear-gradient(to bottom,transparent 11px,#cfcfcf 11px,#b5b5b5 13px,transparent 13px);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:calc(100% - 24px) 100%;
  box-sizing:padding-box;
  padding:0 12px;
  width:calc(100% - 120px);
}
[Overview] form fieldset ul li [Slider] [Track] [Tracker]{
  background:url("/Images/Icons/Circle.svg?444");
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain 100%;
  cursor:pointer;
  height:24px;
  position:relative;
  left:10%;
  width:24px;
}
[Overview] form fieldset ul li [Slider] [Track] [Tracker]:hover{
  background:url("/Images/Icons/Circle.svg?7fb240");
}
[Overview] form fieldset ul li [Slider] [Track] [Tracker].selected,
[Overview] form fieldset ul li [Slider] [Track] [Tracker].selected:hover{
  background:url("/Images/Icons/Circle.svg?57924d");
}
[Overview] form fieldset ul li [Slider] div[Less],
[Overview] form fieldset ul li [Slider] div[More]{
  position:relative;
  background-color:transparent;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:18px;
  border:none;
  cursor:pointer;
  outline:none;
  width:24px;
}
[Overview] form fieldset ul li [Slider] div[Less]{
  background-image:url("/Images/Icons/subtract.svg?444");
}
[Overview] form fieldset ul li [Slider] div[Less]:hover{
  background-image:url("/Images/Icons/subtract.svg?7fb240");
}
[Overview] form fieldset ul li [Slider] div[More]{
  background-image:url("/Images/Icons/add.svg?444");
}
[Overview] form fieldset ul li [Slider] div[More]:hover{
  background-image:url("/Images/Icons/add.svg?7fb240");
}
[Overview] form fieldset ul li [Slider] div[Less]:not([data-label=""]):hover::after, [Overview] form fieldset ul li [Slider] div[More]:not([data-label=""]):hover::after{
  position:absolute;
  top:-32px;
  left:0;
  min-width:24px;
  box-shadow:0px 0px 4px rgba(0,0,0,0.5);
  padding:4px;
  color:black;
  background-color:#fff;
  text-align:left;
  font-size:80%;
  z-index:1;
  content:attr(data-label);
}
[Overview] form fieldset ul li [Slider] input[type=text]{
  background-color:transparent;
  text-align:center;
  width:48px;
}

[Overview] form fieldset ul li [Slider][ReadOnly] [Track]{
  background:linear-gradient(to bottom,transparent 11px,#eee 11px,#eee 13px,transparent 13px);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:calc(100% - 24px) 100%;
}
[Overview] form fieldset ul li [Slider][ReadOnly] [Track] [Tracker],
[Overview] form fieldset ul li [Slider][ReadOnly] [Track] [Tracker]:hover,
[Overview] form fieldset ul li [Slider][ReadOnly] [Track] [Tracker].selected,
[Overview] form fieldset ul li [Slider][ReadOnly] [Track] [Tracker].selected:hover{
  background:url("/Images/Icons/Circle.svg?888");
  cursor:default;
}
[Overview] form fieldset ul li [Slider][ReadOnly] div[Less],
[Overview] form fieldset ul li [Slider][ReadOnly] div[More]{
  cursor:default;
}
[Overview] form fieldset ul li [Slider][ReadOnly] div[Less],
[Overview] form fieldset ul li [Slider][ReadOnly] div[Less]:hover{
  background-image:url("/Images/Icons/subtract.svg?888");
  cursor:default;
}
[Overview] form fieldset ul li [Slider][ReadOnly] div[More],
[Overview] form fieldset ul li [Slider][ReadOnly] div[More]:hover{
  background-image:url("/Images/Icons/add.svg?888");
}
[Overview] form fieldset ul li [Slider][ReadOnly] input[type=text]{
  color:#888;
}


[Overview] form fieldset ul li [Range]{
  height:24px;
  padding:0;
  width:50%;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
[Overview] form fieldset ul li [Range] [Track], [Overview] form fieldset ul li [Range] input{
  display:table;
  float:left;
  height:100%;
}
[Overview] form fieldset ul li [Range] [Track]{
  background:linear-gradient(to bottom,transparent 11px,#cfcfcf 11px,#b5b5b5 13px,transparent 13px);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:calc(100% - 24px) 100%;
  box-sizing:padding-box;
  padding:0 12px;
  width:calc(100% - 120px);
}
[Overview] form fieldset ul li [Range] [Track] [TrackerContainer]{
  display:display;
  height:0;
  overflow:visible;
  width:100%;
}
[Overview] form fieldset ul li [Range] [Track] [Tracker]{
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  background-size:75%,100%;
  cursor:pointer;
  height:24px;
  position:relative;
  left:10%;
  width:24px;
}
[Overview] form fieldset ul li [Range] [Track] [Tracker][From]{
  background-image:url("/Images/Icons/subtract.svg?ddd"),url("/Images/Icons/Circle.svg?444");
}
[Overview] form fieldset ul li [Range] [Track] [Tracker][From]:hover{
  background-image:url("/Images/Icons/subtract.svg?fff"),url("/Images/Icons/Circle.svg?7fb240");
}
[Overview] form fieldset ul li [Range] [Track] [Tracker][From].selected,
[Overview] form fieldset ul li [Range] [Track] [Tracker][From].selected:hover{
  background-image:url("/Images/Icons/subtract.svg?ddd"),url("/Images/Icons/Circle.svg?57924d");
}
[Overview] form fieldset ul li [Range] [Track] [Tracker][To]{
  background-image:url("/Images/Icons/add.svg?ddd"),url("/Images/Icons/Circle.svg?444");
}
[Overview] form fieldset ul li [Range] [Track] [Tracker][To]:hover{
  background-image:url("/Images/Icons/add.svg?fff"),url("/Images/Icons/Circle.svg?7fb240");
}
[Overview] form fieldset ul li [Range] [Track] [Tracker][To].selected,
[Overview] form fieldset ul li [Range] [Track] [Tracker][To].selected:hover{
  background-image:url("/Images/Icons/add.svg?ddd"),url("/Images/Icons/Circle.svg?57924d");
}
[Overview] form fieldset ul li [Range] input[type=text]{
  background-color:transparent;
  border:none;
  text-align:center;
  width:88px;
}

[Overview] form fieldset ul li [Range][ReadOnly] [Track]{
  background:linear-gradient(to bottom,transparent 11px,#eee 11px,#eee 13px,transparent 13px);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:calc(100% - 24px) 100%;
}
[Overview] form fieldset ul li [Range][ReadOnly] [Track] [Tracker][From],
[Overview] form fieldset ul li [Range][ReadOnly] [Track] [Tracker][From]:hover,
[Overview] form fieldset ul li [Range][ReadOnly] [Track] [Tracker][From].selected,
[Overview] form fieldset ul li [Range][ReadOnly] [Track] [Tracker][From].selected:hover{
  background-image:url("/Images/Icons/subtract.svg?444"),url("/Images/Icons/Circle.svg?888");
  cursor:default;
}
[Overview] form fieldset ul li [Range][ReadOnly] [Track] [Tracker][To],
[Overview] form fieldset ul li [Range][ReadOnly] [Track] [Tracker][To]:hover,
[Overview] form fieldset ul li [Range][ReadOnly] [Track] [Tracker][To].selected,
[Overview] form fieldset ul li [Range][ReadOnly] [Track] [Tracker][To].selected:hover{
  background-image:url("/Images/Icons/add.svg?444"),url("/Images/Icons/Circle.svg?888");
  cursor:default;
}
[Overview] form fieldset ul li [Range][ReadOnly] input[type=text]{
  color:#888;
}

[Overview] code{
  display:block;
  font-size:90%;
  padding:8px;
  white-space:pre;
  z-index:2;
  width:1px;
}
[Overview] code span[Comment]{
  color:#0b0;
  font-weight:bold;
}
[Overview] code span[Keyword]{
  color:#00b;
  font-weight:bold;
}
[Overview] code span[Op]{
  color:#800;
  font-weight:bold;
}
[Overview] code span[Val]{
  color:#088;
  font-weight:bold;
}
[Overview] code span[Var]{
  color:#444;
  cursor:pointer;
  font-style:italic;
}
[Overview] code span[Var]:hover{
  text-decoration:underline;
}

div[EditUser] h1{
  display:inline-block;
  font-size:110%;
  font-weight:bold;
  line-height:24px;
  margin:0;
  padding:0 24px;
}
div[EditUser] div[UserRoles] table{
  margin:16px 32px 0px;
  width:calc(100% - 64px);
}
div[EditUser] div[UserRoles] div.Buttons{
  background-color:#ddd;
  box-sizing:border-box;
  margin:8px 32px;
  padding:8px;
  width:calc(100% - 64px);
}
div[EditUser] div[UserRoles] div.Buttons > *{
  display:inline-block;
}

div.Actions{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
div.Actions ul{
  list-style:none;
  margin:8px;
  padding:0;
}
div.Actions ul li{
  float:left;
}
div.Actions a{
  cursor:pointer;
  float:left;
  height:24px;
  margin:0;
}
div.Actions a span{
  visibility:hidden;
}
div.Actions a[Back]{
  background-image:url("/Images/Icons/arrow-left.svg"),linear-gradient(to bottom,#7fb240,#57924d);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:24px,100%;
  min-width:32px;
  max-width:32px;
  width:32px;
}
div.Actions a[Back]:hover{
  background-image:url("/Images/Icons/arrow-left.svg"),linear-gradient(to bottom,#aecf7a,#83b53e);
}
div.Actions a[Toggle]{
  background-image:linear-gradient(to bottom,#7fb240,#57924d);
  background-position:center center;
  background-repeat:no-repeat;
  min-width:96px;
  max-width:96px;
  margin-left:8px;
  width:96px;
}
div.Actions a[Toggle] span{
  color:#fff;
  display:block;
  font-weight:bold;
  line-height:24px;
  text-align:center;
  visibility:inherit;
  width:100%;
}
div.Actions a[Toggle]:hover{
  background-image:linear-gradient(to bottom,#aecf7a,#83b53e);
}

div[Reports] div.Buttons,
div[Reports] div.Actions{
  background-color:#ddd;
  box-sizing:border-box;
  margin:8px;
  padding:8px;
  width:calc(100% - 16px);
}
div[Reports] div[DataTable][rel=SensorReportOverview][data-show=no]{
  display:none;
  visibility:hidden;
}
div[Reports] div[ToolTip]{
  box-shadow:0px 0px 4px rgba(0,0,0,0.5);
  display:table;
  position:absolute;
  margin-top:16px;
  margin-left:16px;
  top:0;
  height:32px;
  z-index:2;
}
div[Reports] div[ToolTip] table{
  background-color:#fff;
  font-size:80%;
  line-height:15px;
}
div[Reports] div[ToolTip] table thead td{
  background-color:#ddd;
  text-align:center;
  padding-left:5px;
  padding-right:5px;
  white-space:nowrap;
}
div[Reports] div[ToolTip] table td[Icon]{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:75%;
  width:20px;
}
div[Reports] div[ToolTip] table td[Label]{
  width:100px;
}
div[Reports] div[ToolTip] table td[Value]{
  text-align:right;
  padding-left:5px;
  padding-right:5px;
  white-space:nowrap;
  width:60px;
}

div[ReportActions]{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  display:table;
  width:100%;
}
div[ReportActions] ul{
  list-style:none;
  margin:8px;
  padding:0;
  float:left;
}
div[ReportActions] ul li{
  float:left;
}
div[ReportActions] ul[Actions]{
  float:right;
}
div[ReportActions] a{
  background:linear-gradient(to bottom,#7fb240,#57924d);
  cursor:pointer;
  float:left;
  height:24px;
  margin:0;
  min-width:84px;
  padding:0 8px;
}
div[ReportActions] a span{
  color:#fff;
  display:block;
  font-weight:bold;
  line-height:24px;
  margin:0;
  text-align:center;
  text-transform:uppercase;
  visibility:inherit;
  width:100%;
}
div[ReportActions] a:hover{
  background:linear-gradient(to bottom,#aecf7a,#83b53e);
}
div[ReportActions] li:not(:first-child){
  margin-left:4px;
}
div[ReportActions] a[Previous],
div[ReportActions] a[Previous]:hover,
div[ReportActions] a[Next],
div[ReportActions] a[Next]:hover{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:24px,100%;
  min-width:32px;
  max-width:32px;
}
div[ReportActions] a[Previous] span,
div[ReportActions] a[Previous]:hover span,
div[ReportActions] a[Next] span,
div[ReportActions] a[Next]:hover span{
  display:none;
}
div[ReportActions] a::before{
  content:inherit;
  display:none;
}
div[ReportActions] a[Previous]{
  background-image:url("/Images/Icons/arrow-left.svg"),linear-gradient(to bottom,#7fb240,#57924d);
}
div[ReportActions] a[Previous]:hover{
  background-image:url("/Images/Icons/arrow-left.svg"),linear-gradient(to bottom,#aecf7a,#83b53e);
}
div[ReportActions] a[Previous][Disabled],
div[ReportActions] a[Previous][Disabled]:hover{
  background-image:url("/Images/Icons/arrow-left.svg"),linear-gradient(to bottom,#ddd,#bbb);
}
div[ReportActions] a[Next]{
  background-image:url("/Images/Icons/arrow-right.svg"),linear-gradient(to bottom,#7fb240,#57924d);
}
div[ReportActions] a[Next]:hover{
  background-image:url("/Images/Icons/arrow-right.svg"),linear-gradient(to bottom,#aecf7a,#83b53e);
}
div[ReportActions] a[Next][Disabled],
div[ReportActions] a[Next][Disabled]:hover{
  background-image:url("/Images/Icons/arrow-right.svg"),linear-gradient(to bottom,#ddd,#bbb);
}
div[ReportActions] li[Label] span{
  line-height:24px;
}
div[ReportActions] li[DateTime] label{
  margin-right:0 !important;
}
div[ReportActions] li[DateTime] span.Label{
  content:inherit;
  display:none;
}
div[ReportActions] [DateTimeInput] span{
  background:linear-gradient(to bottom,#7fb240,#57924d);
  border:none;
  color:#fff;
  font-weight:bold;
  line-height:24px;
}
div[ReportActions] [DateTimeInput] span:hover{
  background:linear-gradient(to bottom,#aecf7a,#83b53e);
}
div[ReportActions] [DateTimeInput] span[Label]::after{
  background-image:url("/Images/Icons/Triangle.svg?fff");
  background-position:calc(100% - 2px) 0px;
}


@media screen and (max-device-width: 768px){
  html {
    background:#fff;
    width:100%;
  }
 div.Container{
    box-shadow:none;
  }
 header,
 [Overview] div.Container,
 [Landing] div.Container,
 footer{
    min-width:auto;
    max-width:auto;
    width:100%;
  }
}
@charset "UTF-8";
div.Container header{
  background-image:url("/Images/Logos/optiserver-hub.svg");
  background-repeat:no-repeat;
  background-size:100%;
}


#Popup.ChangePassword{
  background-image:url("/Images/Icons/warning.svg?000"),url("/Images/Icons/triangle.svg?ff0");
  background-position:16px 16px,4px 0px;
  background-repeat:no-repeat,no-repeat;
  background-size:32px,56px;
  box-sizing:border-box;
  margin:auto;
  height:192px;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:448px;
}
#Popup.ChangePassword fieldset{
  margin-left:64px;
}
#Popup.ChangePassword div.Buttons{
  float:right;
}
#Popup.ChangePassword div.Buttons input[type=button]{
  background:linear-gradient(to bottom,#7fb240,#57924d);
  border:none;
  color:#fff;
  cursor:pointer;
  font-weight:bold;
  height:32px;
  margin-top:16px;
  margin-right:16px;
  width:96px;
}
#Popup.ChangePassword div.Buttons input[type=button]:hover{
  background:linear-gradient(to bottom,#aecf7a,#83b53e);
}
#Popup.ChangePassword div.Buttons input[type=button]:not([disabled]){
  cursor:pointer;
}

#Popup.EditUserAddRole fieldset{
  display:block;
  height:112px;
  margin:0;
  padding:0;
  max-height:112px;
  overflow-y:auto;
  width:448px;
}
#Popup.EditUserAddRole fieldset legend{
  float:left;
  font-size:110%;
  font-weight:bold;
  line-height:24px;
  padding:8px;
  width:calc(100% - 16px);
}
#Popup.EditUserAddRole div.Buttons{
  text-align:right;
  padding:0;
}
#Popup.EditUserAddRole div.Buttons input[type=button]{
  background:linear-gradient(to bottom,#7fb240,#57924d);
  border:none;
  color:#fff;
  cursor:pointer;
  font-weight:bold;
  height:32px;
  margin-top:8px;
  margin-right:8px;
  width:96px;
}
#Popup.EditUserAddRole div.Buttons input[type=button]:hover{
  background:linear-gradient(to bottom,#aecf7a,#83b53e);
}
#Popup.EditUserAddRole div.Buttons input[type=button]:not([disabled]){
  cursor:pointer;
}
#Popup.EditUserAddRole div.Buttons input[type=button][disabled]{
  background:linear-gradient(to bottom,#ddd,#bbb);
  color:#444;
  cursor:default;
}


[Icon]{
  background-repeat:no-repeat;
  background-position-x:4px;
  background-position-y:center;
  background-size:auto 75%;
}

[Icon=CSV]{
  background-image:url("/Images/Icons/CSV.svg?000");
}

[Icon=TSV]{
  background-image:url("/Images/Icons/TSV.svg?000");
}

[Icon=Excel]{
  background-image:url("/Images/Icons/Excel.svg?000");
}

[Icon=StatusConnected],
div.Icon[StatusConnected]{
  background-image:url("/Images/Icons/Check.svg?080");
}

div.Icon[Chart]{
  background-image:url("/Images/Icons/Chart.svg");
}

[Icon=StatusWarning],
div.Icon[StatusWarning],
[Icon=StatusSolved],
div.Icon[StatusSolved]{
  background-image:url("/Images/Icons/Check.svg?880");
}

[Icon=StatusFailure],
div.Icon[StatusFailure]{
  background-image:url("/Images/Icons/Cross.svg?d00");
}

[Icon=StatusInactive],
div.Icon[StatusInactive]{
  background-image:url("/Images/Icons/Check.svg?ddd");
}

[Icon=StatusNoCommunication],
div.Icon[StatusNoCommunication]{
  background-image:url("/Images/Icons/no-connection.svg");
}

div#SubMenu{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  display:table;
}
div#SubMenu div.Actions{
  display:block;
  float:right;
  margin:16px;
}
div#SubMenu div.Actions form{
  display:block;
}
div#SubMenu div.Actions form fieldset{
  max-width:inherit;
  padding:0;
}
div#SubMenu div.Actions form fieldset ul{
  display:block;
  list-style:none;
  max-width:inherit;
  margin:0;
  padding:0;
  width:100%;
}
div#SubMenu div.Actions form fieldset ul li{
  clear:none;
  display:block;
  float:left;
  width:auto;
}
div#SubMenu div.Actions form fieldset ul li label,
div#SubMenu div.Actions form fieldset ul li span.Label{
  width:auto;
}
div#SubMenu div.Actions label.Search{
  float:right;
}
div#SubMenu div.Actions li.Search{
  display:table;
  float:right;
}
div#SubMenu div.Actions li.Search label{
  padding:0;
  width:192px;
}
div#SubMenu div.Actions li.Search label span{
  color:#888;
  font-size:90%;
  height:0;
  line-height:22px;
  margin:0 2px;
  overflow:visible;
  width:192px;
}
div#SubMenu div.Actions li.Search label input{
  background-color:white;
  background-image:url("/Images/Icons/search.svg?888");
  background-position:right center;
  background-repeat:no-repeat;
  background-size:auto 90%;
  border:solid 1px #888;
  height:20px;
  line-height:20px;
  margin:0;
  padding:0 4px;
  width:192px;
}
div#SubMenu div.Actions li.Search label input:not(:valid):not(:focus){
  background-color:transparent;
  box-shadow:none;
}
div#SubMenu ul.Layout{
  float:left;
  margin:4px;
  padding:0;
  width:auto;
}
div#SubMenu ul.Layout li{
  cursor:pointer;
  padding:0;
}
div#SubMenu ul.Layout li:hover{
  text-decoration:underline;
}

div#SubMenu div.Actions li.Search{
  display:table;
  float:right;
}
div#SubMenu div.Actions li.Search label{
  padding:0;
  width:192px;
}
div#SubMenu div.Actions li.Search label span{
  color:#888;
  font-size:90%;
  height:0;
  line-height:22px;
  margin:0 2px;
  overflow:visible;
  width:192px;
}
div#SubMenu div.Actions li.Search label input{
  background-color:white;
  background-image:url("/Images/Icons/search.svg?888");
  background-position:right center;
  background-repeat:no-repeat;
  background-size:auto 90%;
  border:solid 1px #888;
  height:20px;
  line-height:20px;
  margin:0;
  padding:0 4px;
  width:192px;
}
div#SubMenu div.Actions li.Search label input:not(:valid):not(:focus){
  background-color:transparent;
  box-shadow:none;
}

div#Tabs:empty{
  display:none;
  visibility:collapse;
}

div#Tabs{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  background-color:transparent;
  border:none;
  box-shadow:none;
  display:block;
  height:32px;
  margin-bottom:-15px;
  position:relative;
}
div#Tabs ul{
  float:left;
  list-style:none;
  height:32px;
  margin:0;
  padding:0;
}
div#Tabs ul li{
  background-color:#ddd;
  cursor:pointer;
  display:block;
  float:left;
  height:100%;
  line-height:32px;
  margin:0;
  text-align:center;
  text-transform:uppercase;
  transition:all 50ms linear;
  width:224px;
}
div#Tabs ul li:not([Active]){
  border:solid 1px #ccc;
  border-bottom:none;
  box-shadow:inset 0px -2px 2px rgba(0,0,0,0.125);
  height:calc(100% - 2px);
  line-height:30px;
  margin-top:1px;
}
div#Tabs ul li:not([Active]):hover{
  background-color:#fff;
}
div#Tabs ul li[Active]{
  background-color:#fff;
  border:none;
  box-shadow:0px 0px 4px rgba(0,0,0,0.5);
}
div#Tabs ul li[Active]::after{
  background-color:#fff;
  content:"";
  display:block;
  height:8px;
  margin-top:-4px;
  width:100%;
  z-index:100;
}

[Overview] main hr{
  background-color:#bbb;
  height:1px;
  border:none;
  width:calc(100% - 64px);
}
[Overview] main form div.Buttons{
  display:block;
  margin:16px 32px;
}
[Overview] main form div.Buttons input[type=button]{
  background:linear-gradient(to bottom,#7fb240,#57924d);
  border:none;
  color:#fff;
  cursor:pointer;
  font-weight:bold;
  height:32px;
  margin-right:8px;
  width:96px;
}
[Overview] main form div.Buttons input[type=button]:hover{
  background:linear-gradient(to bottom,#aecf7a,#83b53e);
}
[Overview] main form div.Buttons input[type=button]:not([disabled]){
  cursor:pointer;
}
[Overview] main form div.Buttons input[type=button][disabled],
[Overview] main form div.Buttons input[type=button][disabled]:hover{
  background:linear-gradient(to bottom,#ddd,#bbb);
  color:#888;
  cursor:default;
}

table[rel=Optiservers_Overview] tbody td[Status]{
  width:20px;
}
table[rel=Optiservers_Overview] tbody td.Empty,
table[rel=Optiservers_Overview] tbody tr:hover td.Empty{
  background-color:transparent;
}

table[rel=Optiservers_Failures] tr td{
  transition:background 150ms linear;
}
table[rel=Optiservers_Failures] tr[Selected] td{
  background-color:#ddd;
}

ul#OptiserverSummary{
  box-sizing:border-box;
  margin-bottom:4px;
  width:calc(100% - 24px);
}
ul#OptiserverSummary li#OptiserverSearch{
  float:right;
}
ul#OptiserverSummary li#OptiserverSearch div[Underlay]{
  height:0;
  overflow:visible;
  width:100%;
}
ul#OptiserverSummary li#OptiserverSearch div[Underlay] span{
  color:#888;
  font-size:90%;
  margin:0 4px;
  line-height:22px;
}
ul#OptiserverSummary li#OptiserverSearch input{
  background-image:url("/Images/Icons/search.svg?888");
  background-position:right center;
  background-repeat:no-repeat;
  background-size:auto 90%;
}
ul#OptiserverSummary li#OptiserverSearch input:not(:valid):not(:focus){
  background-color:transparent;
  box-shadow:none;
}
ul#OptiserverSummary li a::before{
  content:inherit;
  display:none;
}
ul#OptiserverSummary li#OptiserverOverview a{
  background-image:url("/Images/Icons/arrow-left.svg"),linear-gradient(to bottom,#7fb240,#57924d);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:24px,100%;
  min-width:32px;
  max-width:32px;
  margin:2px 0;
  width:32px;
}
ul#OptiserverSummary li#OptiserverOverview a:hover{
  background-image:url("/Images/Icons/arrow-left.svg"),linear-gradient(to bottom,#aecf7a,#83b53e);
  margin:0;
}
ul#OptiserverSummary li#OptiserverOverview a span{
  visibility:hidden;
}
ul#OptiserverSummary li#OptiserverErrors{
  background-color:#eee;
  
}
ul#OptiserverSummary li#OptiserverErrors a{
  background-image:inherit;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:24px,100%;
  min-width:24px;
  max-width:24px;
  width:24px;
}
ul#OptiserverSummary li#OptiserverErrors a div{
  display:table;
  height:100%;
  width:100%;
}
ul#OptiserverSummary li#OptiserverErrors a.Icon[StatusConnected]{
  background-image:url("/Images/Icons/Check.svg?080");
}
ul#OptiserverSummary li#OptiserverErrors a.Icon[StatusPending]{
  background-image:url("/Images/Icons/Question.svg?880");
}
ul#OptiserverSummary li#OptiserverErrors a.Icon[StatusFailure]{
  background-image:url("/Images/Icons/Cross.svg?d00");
}
ul#OptiserverSummary li#OptiserverErrors a.Icon[StatusNoCommunication]{
  background-image:url("/Images/Icons/no-connection.svg");
}
ul#OptiserverSummary li#OptiserverErrors a.Icon[StatusInactive]{
  background-image:url("/Images/Icons/Check.svg?ddd");
}
ul#OptiserverSummary li#OptiserverErrors a span{
  visibility:hidden;
}
ul#OptiserverSummary li#OptiserverSensors{
  background-color:#eee;
}
ul#OptiserverSummary li#OptiserverSensors a{
  background-image:url("/Images/Icons/chart.svg");
  background-position:center center;
  background-repeat:no-repeat;
  background-size:24px,100%;
  min-width:24px;
  max-width:24px;
  width:24px;
}
ul#OptiserverSummary li#OptiserverSensors a span{
  visibility:hidden;
}
ul#OptiserverSummary li#OptiserverErrors:hover,
ul#OptiserverSummary li#OptiserverSensors:hover{
  background-color:#bbb;
}
ul#OptiserverSummary li#OptiserverName{
  cursor:pointer;
  display:inline;
  font-weight:bold;
  font-size:110%;
  padding-left:8px;
  height:20px;
  line-height:20px;
  margin:0;
  text-indent:4px;
}
ul#OptiserverSummary li#OptiserverName::after{
  color:#888;
  content:"▼";
  font-size:75%;
  height:20px;
  margin-left:8px;
  line-height:20px;
  width:24px;
}
ul#OptiserverSummary li#OptiserverName:hover{
  text-decoration:underline;
}

[Overview] div.Container nav[Sensors]{
  box-sizing:border-box;
  padding:12px;
  width:100%;
}
[Overview] div.Container nav[Sensors] ul{
  float:left;
  margin:0;
  padding:0;
}
[Overview] div.Container nav[Sensors] ul[Actions]{
  float:right;
}
[Overview] div.Container nav[Sensors] li label{
  display:table;
  margin-right:8px;
  line-height:24px;
  width:auto;
}
[Overview] div.Container nav[Sensors] li a[Close],
[Overview] div.Container nav[Sensors] li a[Close]:hover{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:24px,100%;
  min-width:32px;
  max-width:32px;
}
[Overview] div.Container nav[Sensors] li a[Close] span,
[Overview] div.Container nav[Sensors] li a[Close]:hover span{
  display:none;
}
[Overview] div.Container nav[Sensors] li a::before{
  content:inherit;
  display:none;
}
[Overview] div.Container nav[Sensors] li a[Close]{
  background-image:url("/Images/Icons/cross.svg"),linear-gradient(to bottom,#b24040,#924d4d);
}
[Overview] div.Container nav[Sensors] li a[Close]:hover{
  background-image:url("/Images/Icons/cross.svg"),linear-gradient(to bottom,#cf7a7a,#b53e3e);
}
[Overview] div.Container nav[Sensors] li a[Close][Disabled],
[Overview] div.Container nav[Sensors] li a[Close][Disabled]:hover{
  background-image:url("/Images/Icons/cross.svg"),linear-gradient(to bottom,#ddd,#bbb);
}
[Overview] div.Container nav[Sensors] label[Name]{
  cursor:pointer;
  display:inline;
  font-weight:bold;
  font-size:110%;
  padding-left:8px;
  height:20px;
  line-height:20px;
  margin:0;
  text-indent:4px;
}
[Overview] div.Container nav[Sensors] label[Name]::after{
  color:#888;
  content:"▼";
  font-size:75%;
  height:20px;
  margin-left:8px;
  line-height:20px;
  width:24px;
}
[Overview] div.Container nav[Sensors] label[Name]:hover{
  text-decoration:underline;
}
[Overview] div.Container nav[Sensors] label[NamePlain]{
  display:inline;
  font-weight:bold;
  font-size:110%;
  padding-left:8px;
  height:20px;
  line-height:20px;
  margin:0;
  text-indent:4px;
}

div[ReportActions] a{
  font-size:90%;
}

div[Chart]{
  display:inline;
}
div[Chart] div[ToolTip]{
  box-shadow:0px 0px 4px rgba(0,0,0,0.5);
  display:table;
  position:absolute;
  margin-top:16px;
  margin-left:16px;
  top:0;
  height:32px;
  z-index:2;
}
div[Chart] div[ToolTip] table{
  background-color:#fff;
  font-size:80%;
  line-height:15px;
  padding:0px;
  margin:0px;
}
div[Chart] div[ToolTip] table thead td{
  background-color:#ddd;
  text-align:center;
  padding-left:5px;
  padding-right:5px;
  white-space:nowrap;
}
div[Chart] div[ToolTip] table td[Icon]{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:75%;
  width:20px;
}
div[Chart] div[ToolTip] table td[Label]{
  width:100px;
}
div[Chart] div[ToolTip] table td[Value]{
  text-align:right;
  padding-left:5px;
  padding-right:5px;
  white-space:nowrap;
  width:60px;
}
div[Chart] div[Marker]{
  position:absolute;
  width:11px;
  height:11px;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:11px;
  z-index:1;
}

#Popup.CompareSensor{
  box-sizing:border-box;
  margin:auto;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:600px;
  height:456px;
  overflow-y:scroll;
}
#Popup.CompareSensor h1{
  font-size:120%;
  font-weight:bold;
  margin:0 8px;
  line-height:32px;
  padding:0;
  display:block;
  float:left;
  width:calc(100% - 52px);
}
#Popup.CompareSensor a[Close],
#Popup.CompareSensor a[Close]:hover{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:24px,100%;
  min-width:32px;
  max-width:32px;
  height:32px;
  display:block;
  float:right;
  position:-webkit-sticky;
  position:sticky;
  top:0px;
}
#Popup.CompareSensor a[Close] span,
#Popup.CompareSensor a[Close]:hover span{
  display:none;
}
#Popup.CompareSensor a[Close]{
  background-image:url("/Images/Icons/cross.svg"),linear-gradient(to bottom,#b24040,#924d4d);
}
#Popup.CompareSensor a[Close]:hover{
  background-image:url("/Images/Icons/cross.svg"),linear-gradient(to bottom,#cf7a7a,#b53e3e);
}
#Popup.CompareSensor [Compare]{
  display:block;
  width:100%;
  float:left;
}
#Popup.CompareSensor [Compare] ul{
  list-style:none;
  margin:0;
  padding:0;
}