html {
  position: fixed; 
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
}

/* 
  Overthrow CSS:
  Enable overflow: auto on elements with overthrow class when html element has overthrow class too 
*/
.overthrow-enabled .overthrow, #item-lists .owl-item {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.overthrow-enabled .overthrow.ui-content {
  position: absolute;
  z-index: 1000;
  top: 44px;
  bottom: 0;
  left: 0;
  right: 0;
}
  
.pep-active {
  z-index: 1001;
}

.ui-header {
  z-index: 1004;
  transform: translate3d(0,0,0);
}

#item-lists .owl-item>div{
  display: block;
  width: 100%;
  height: auto;
}

.content-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1010;
  /*display: none;*/
  background: rgba(0,0,0,0);
  -webkit-transition: background 300ms linear;
  -moz-transition: background 300ms linear;
  -o-transition: background 300ms linear;
  -ms-transition: background 300ms linear;
  transition: background 300ms linear;
}

.animated-toast, .animated-tooltip {
  -webkit-transition: top 100ms ease-out;
  -moz-transition: top 100ms ease-out;
  -o-transition: top 100ms ease-out;
  -ms-transition: top 100ms ease-out;
  transition: top 100ms ease-out;
}

.ui-panel-display-reveal {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.ui-panel-page-content-display-reveal .content-overlay{
  position: absolute;
  display: block;
}

html body .ui-panel-dismiss {
  display: none;
}

@media (min-width:60em) {

  .ui-panel-page-content-display-reveal .content-overlay{
    pointer-events:none;
    -webkit-box-shadow: inset 5px 0 10px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 5px 0 10px rgba(0,0,0,0.1);
    box-shadow: inset 5px 0 10px rgba(0,0,0,0.1);
  }

  /* wrap on wide viewports once open */
  .ui-panel-page-content-open.ui-panel-page-content-position-left{
    margin-right: 17em;
  }
  .ui-panel-page-content-open.ui-panel-page-content-position-right {
    margin-left: 17em;
  }
  .ui-panel-page-content-open{
    width: auto;    
  }
  /* disable "dismiss" on wide viewports */
  .ui-panel-dismiss {
    display: none;
  }
  /* same as the above but for panels with display mode "push" only */
  .ui-panel-dismiss-display-push {
    display: none;
  }

  .owl-item, #item-tabs li {
    -webkit-transition: width 200ms ease;
    -moz-transition: width 200ms ease;
    -o-transition: width 200ms ease;
    -ms-transition: width 200ms ease;
    transition: width 200ms ease;
  }

}

@media (max-width: 60em) {

  .ui-panel-page-content-display-reveal .content-overlay{
    background: rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 10px 0 20px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 10px 0 20px rgba(0,0,0,0.3);
    box-shadow: inset 10px 0 20px rgba(0,0,0,0.3);
  }

  #index .ui-title {
    text-align: left;
    margin-left: 42px;
  }

}

#item-tabs {
  position: fixed;
  z-index: 1002;
  box-shadow: 0px 3px 3px 0 rgba(0,0,0,.15);
  overflow: hidden;
  width: 100%;
  background: #fff /*{a-bup-background-color}*/;
}


#index .ui-header .ui-controlgroup .ui-btn-icon-notext {
  padding: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  white-space: nowrap !important;
}

#index .ui-header .ui-controlgroup a {
  border-radius: 0;
}


#index .ui-header .ui-controlgroup .ui-first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

#index .ui-header .ui-controlgroup .ui-last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

#index .items .ui-btn{
  overflow: visible;
}


#index .ui-header .ui-controlgroup .ui-btn-icon-left:after,
#index .ui-header .ui-controlgroup .ui-btn-icon-right:after,
#index .ui-header .ui-controlgroup .ui-btn-icon-top:after,
#index .ui-header .ui-controlgroup .ui-btn-icon-bottom:after,
#index .ui-header .ui-controlgroup .ui-btn-icon-notext:after {
  content: "";
  position: absolute;
  display: block;
  width: 22px;
  height: 22px;
  left: 16px;
}

#index .ui-header .ui-controlgroup-controls .ui-btn-corner-all,
#index .ui-header .ui-controlgroup-controls .ui-btn.ui-corner-all {
  -webkit-border-radius: 0;
  border-radius: 0;
}

#index .attribute-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-bottom: -1px;
}

#index .timebox input {
  min-width: 100px;
}

.ui-mobile .ui-page-theme-a .ui-li-divider {
  border: none;
  border-bottom: 2px solid #005994 /*{pm-listdivider-color}*/;
  border-top: 1px solid #ccc /*{a-bup-border}*/;
  overflow: visible;
}

.ui-mobile .ui-li-divider + li,
.ui-mobile .ui-li-divider + li a {
  border-top-width: 0px;
}

.ui-mobile #item-lists .ui-li-divider + li a,
.ui-mobile #graph-device-list .ui-li-divider + li a{
  border-top-width: 1px;
}

.ui-mobile .ui-page-theme-a #item-lists .ui-li-divider {
  border-color: #ddd /*{a-body-border}*/;
  border-bottom: 2px solid #005994 /*{pm-listdivider-color}*/;
}

.ui-mobile .ui-page-theme-a .ui-li-divider,
.ui-mobile .ui-page-theme-a .ui-li-divider label{
  background: #fff /*{a-bup-background-color}*/;
  color: #005994 /*{pm-listdivider-color}*/;
  font-weight: bold !important;
  text-shadow: none;
}

.ui-mobile .ui-page-theme-a .ui-li-divider label{
  margin-bottom: 0;
}

.ui-mobile .ui-page-theme-a #item-lists .items > li.ui-first-child{
  padding-top: 8px;
}

/* make the jquery mobile loader to block all elements */
.ui-loader-background {
  width:100%;
  height:100%;
  left:0;
  top:0;
  margin: 0;
  background: rgba(0, 0, 0, 0.3);
  display:none;
  position: fixed;
  z-index:1011;
}

.ui-loading-blocking .ui-loader-background {
  display: block;
}

html .ui-loader {
  opacity: 0.88;
  border-width: 1px;
  background-color: #2a2a2a;
  border-color: #1d1d1d;
  color: #fff;
  text-shadow: 0 1px 0 #111;
}


.ui-loader-textonly {
  padding: 7px;
  margin-top: -32px;
  bottom: 10px;
  top: auto;
  font-size: 0.8em;
}

html, body.ui-mobile-viewport, div.ui-mobile-viewport {
  overflow: hidden !important;
}


/* button display enhancements */
.ui-focus,
.ui-btn:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none ;
}

.ui-btn, .ui-btn a, .ui-btn a:hover, .ui-li {
  font-weight: normal;
}

/* make page animations faster */
.in, .out {
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 120ms !important;
}


/* style for index page */

#index .ui-content{
  padding: 0;
}

#index .items, #rules, #variables {
  position: relative;
}

#index .items .device label {
  cursor: pointer;
}

#index .items .device label,
#index .items .shutter-device label,
#index .items .button label,
#index .items .input label,
#index .items .musicplayer label, 
#index .items .switch-device label,
#index .items .timer label{
  float: left;
}

#index .items {
  margin: 0;
}

/* align the slider for switches to the right */
#index div.ui-flipswitch {
    margin: 0px 0px 0px 10px;
    float: right;
}

#index div.ui-flipswitch .ui-flipswitch-on {
  color: #FFF /*{pm-flipswitch-on-color}*/;
  font-weight: bold;
}

#index div.ui-flipswitch .ui-flipswitch-off {
  color: #000 /*{pm-flipswitch-off-color}*/;
  font-weight: bold;
}


#index li.button div.buttons,
#index li.input div.inputs,
#index li.shutter-device .shutter-buttons,
#index li.musicplayer div.controls,
#index li.timer div.controls {
  float: right;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}

#index li.button div.buttons,
#index li.input div.inputs,
#index li.shutter-device .shutter-buttons,
#index li.musicplayer div.controls,
#index li.timer div.controls {
  margin-top: -4px;
  margin-bottom: -4px;
  text-align: right;
  white-space: normal;
}

#index .input input {
  border-color: #ccc /*{a-bup-border}*/;
  padding: 4px 5px;
  margin: 4px 0;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 120px;
}

#index li.shutter-device .ui-controlgroup-controls{
  padding-top: 1px;
}

#index li.musicplayer div.controls span {
  margin-top: 4px;
}

#index li.musicplayer div.controls,
#index li.timer div.controls {
  margin-top: -1px;
}

#index li.musicplayer span.controls-inner,
#index li.timer span.controls-inner {
  white-space: nowrap;
  margin-top: 0;
}



#index li.button div.buttons a {
  margin: 0;
  margin-left: 4px;
  margin-top: 1px;
  margin-bottom: 1px;
}


#index li.musicplayer div.controls a,
#index li.timer div.controls a {
  margin: 0;
  margin-left: 4px;
  margin-top: 2px;
  margin-bottom: 2px;
}

#index li.button a{

  margin-top: 1px;
}

#index .spinbox input{
  border: none;
  background: none;
  width: 36px;
  min-width: 36px;
  margin: 0;
  margin-left: -8px;
  margin-right: -8px;
  padding: 0;
  font-weight: bold;
  color: #000 /*{a-bup-color}*/;
}

#index .timebox input{
  border: none;
  background: none;
  width: 36px;
  min-width: 36px;
  margin: 0;
  margin-left: -8px;
  margin-right: -8px;
  padding: 0;
  font-weight: bold;
  color: #000 /*{a-bup-color}*/;
  /* sorry about the non-standard
  solution but Chrome messes otherwise*/
  -webkit-margin-before: -3px;
  -webkit-margin-after: -3px;
  -webkit-min-logical-width: 90px;
}


/* rules-page */
#rules span.if, #rules span.then {
  font-weight: bold;
}

#rules li a{
  font-weight: normal;
  color: #333 /*{a-body-color}*/;
}

#rules li a p{
  font-size: .9em;
  margin-top: 0.4em;
  margin-bottom: 0;
  white-space: normal;
}

/* hideRuleName class */
#rules.hideRuleName li.rule a .name{
  display: none;
}

#rules.hideRuleName li.rule a p{
  font-size: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

/* hideRuleText class */
#rules.hideRuleText li.rule a p{
  display: none;
}



#index .items li.sortable {
  padding: 5px 16px;
}

.items #add-a-item a, 
#rules #add-rule a, 
#variables #add-a-variable a
#devicepages #add-a-devicepage a{
  font-weight: bold;
  color: #000 /*{a-bup-color}*/;
}

/* webkit-only: fix layout bug, where items sometimes do not have full width */
@media screen and (-webkit-min-device-pixel-ratio:0) {  
  .unlocked ul.items li.sortable {
    box-sizing: border-box;
    width:100%;
  }
}

.fixed-add-element, .fixed-add-element a {
  border-color: #007dcd  /*{a-bar-background-color}*/ !important;
  background:       #007dcd /*{a-bar-background-color}*/ !important;
  color:          #FFF /*{a-bar-color}*/ !important;
  text-shadow: none !important;
}


/*#index .ui-content .ui-listview {
  margin-top: 20px;
  margin-bottom: 10px;
}

#index .ui-content .items {
  margin-top: 0px;
}*/

.unlocked ul.items li.sortable,
.unlocked ul#variables li.sortable a,
.unlocked ul#rules li.sortable a,
.unlocked ul#groups li.sortable a,
.unlocked ul#devices li.sortable a,
.unlocked ul#devicepages li.sortable a,
.json-schema-editor .elements li.sortable a {
  padding-left: 36px !important;
}

.json-schema-editor .elements,
.json-schema-editor .elements > ul {
  position: relative;
}

.unlocked ul.items li.sortable.header {
    padding-left: 16px !important;
}

li.sortable .handle{
  float: left;
  padding: 5px;
  opacity: 0.2;
  cursor: move;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  margin-top: -19px;
}


li .edit-handle{
  float: left;
  padding: 5px;
  opacity: 0.8;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  margin-top: -16px;
}

#device-json-editor h3{
  font-size: .9em;
  margin-top: 10px;
  margin-bottom: 10px;
}

li.sortable.header .handle {
  margin-top: -18px;
  left: 2px;
}

li.sortable .handle .ui-icon:after,
li .edit-handle .ui-icon:after{
  background-color: transparent;
}

.locked li.sortable .handle,
.locked li .edit-handle{
  display: none;
}

html.ui-mobile body .delete-link,
html.ui-mobile body .delete-link:active,
html.ui-mobile body .delete-link:visited,
html.ui-mobile body .delete-link.ui-btn.ui-btn-active{
  background-color: #cc2929 /*{pm-delete-background-color}*/;
  border-color: #AA0000; /*{pm-delete-color}*/;
  color: #fff; /*{pm-delete-border}*/;
}

html.ui-mobile body .delete-link:hover {
  background-color: #CC0000 /*{pm-delete-hover-background-color}*/;
  border-color: #AA0000 /*{pm-delete-hover-border}*/;
  color: #fff; /*{pm-delete-hover-color}*/;
}

.dark-background {
  background-color: rgb(51, 51, 51);
}

.ui-block-a .ui-btn{
    margin-left: 0px;
}
.ui-block-b .ui-btn{
    margin-right: 0px;
}

li.sortable-placeholder{
  border-style: dashed;
  border-width: 1px;
  background-color: #333 /*{a-page-color}*/;
  border-color: #ccc /*{a-bup-border}*/;
}

#rules li.sortable-placeholder{
  padding: 0;
}

#variables li.sortable-placeholder{
  padding-top: 0.7em;
  padding-bottom: 1.7em;
}

.ui-header .ui-controlgroup .ui-shadow:not(.ui-focus){
  -moz-box-shadow: 0 1px 0      rgba(255,255,255,.3);
  -webkit-box-shadow: 0 1px 0   rgba(255,255,255,.3);
  box-shadow: 0 1px 0           rgba(255,255,255,.3);
}

/* dimmer */
li.sortable.dimmer-device.no-header{
  min-height: 30px;
}

/* dimmer slider */
ul.items .ui-slider-input{
  display: none;
}

ul.items .dimmer-device div.item-inner .ui-slider-track {
  margin-left: 22px;
  margin-right: 8px;
}

ul.items .dimmer-device .ui-slider {
  margin: 8px 4px 2px 0;
}

@media (min-width:35em) {
  ul.items .dimmer-device .ui-slider {
    margin: 1px 4px -1px 5px;
    float: right;
    width: 20em;
  }
  ul.items .dimmer-device label {
    float: left;
  }
}

#error-count {
  padding-left: 45px;
}

.items .attributes,
.items .variable .var-value {
  float: right;
  text-align:right;
  white-space: normal;
}

.items .attributes {
  max-width: 100%;
}

.items .attributes .attribute {
  margin: 5px 0px;
  margin-left: 0.5em;
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
}

.items .attribute .unit {
  color: #888 /*{pm-unit-color}*/;
  margin-left: 0.1em;
}

.items .attribute .acronym {
  color: #888 /*{pm-unit-color}*/;
  margin-right: 0.2em;
  font-weight: bold;
  font-size: 12px;
}


#variables .var-name{
  display: inline;
} 

#variables .var-fullvalue{
  float: right;
  display: block;
} 

#variables .var-unit{
  color: #888 /*{pm-unit-color}*/;
  margin-left: 0.1em;
}

.ui-mobile  .items label {
  margin: 5px 0px;
}

.added label {
  color: #A0A0A0;
}

.outdent {
  margin-left: -1em;
  margin-right: -1em;
}


table#events-table,
table#database-attribute-info {
  background: #fff /*{a-body-background-color}*/;
  width: 100%;
}

#events-table .value-column {
  text-align: right;
}

@media (max-width: 40em) {

  #events-table tbody td{
    border: none;
  }
   
  #events-table tbody tr,
  #events-table thead tr {
    border-bottom: 1px solid #ddd /*{a-body-border}*/;
  }
  
  #events-table thead tr {
    display: block;
  }

  #events-table .time-column {
    display: block;
    width: 20%;
    float: left;
  }

  #events-table .device-column {
    display: block;
    float: left;
    width: 70%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 0px;
  }

  #events-table .attribute-column {
    float: left;
    display: block;
  }

  #events-table .value-column {
    display: block;
    float: right;
    width: 100px;
  }

  #events-table thead th {
    display: none !important;
  }

  #events-table .time-column {
    color: gray;
  }

  #events-table .value-column {
    font-weight: bold;
  }

  #database-attribute-info tbody td, #database-attribute-info thead th{
    border: none;
  }
   
  #database-attribute-info tbody tr,
  #database-attribute-info thead tr {
    border-bottom: 1px solid #ddd /*{a-body-border}*/;
  }
  
  #events-table thead tr {
    display: block;
  }

  #database-attribute-info .device-column {
    display: block;
    float: left;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 0px;
  }

  #database-attribute-info .type-column span:first-child {
    display: block;
  }

  #database-attribute-info .attribute-column {
    float: left;
    display: block;
  }

  #database-attribute-info .interval-column {
    display: block;
    width: 100%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 0px;
  }


  #database-attribute-info .expire-column {
    float: left;
    display: block;
  }


}

#device-items li.item a, 
#variable-items li.item a, 
#add-other a#add-a-header, 
#add-other a#add-a-button {
  font-weight: normal;
}

#device-items li.header label {
  font-weight: bold;
}

/* device info */
.info-label {
  font-weight: bold;
}

#device-info-popup-popup ul{
  margin: -10px;
}

#device-info-popup-popup {
  min-width: 238px;
}

[data-role=listview].checkbox-list a.ui-btn,
[data-role=listview].checkbox-list{
  padding: 0 0 0 0 !important;
}
[data-role=listview].checkbox-list label {
  border: none;
  padding-top: 0.3em !important;
  padding-bottom: 0.3em !important;
}

#log-messages li {
  padding: 0.2em 15px;
  line-height: 1.5em;
  white-space: normal;
}

#log-messages .time {
  color: gray;
  display: block;
  float: right;
  padding-left: 10px;
}

#log-page .controls {
  margin-bottom: 1em;
}

#log-messages .tags {
  color: #0e1b52;
}

#log-messages .msg {
  white-space: pre-wrap;
}

.level.info {
    color: #339900;
}

.level.warn {
    color: #FFCC00;
}

.level.error {
    color: #CC0000;
}

.level.debug {
    color: #1944ff;
}

#plugin-list .ui-li-desc {
  margin-top: -0.2em
}

#plugin-list h2 {
  margin-top: 0.3em
}

#plugin-list li > div.ui-btn-inner.ui-li {
  border-top: 0px;
}

#plugin-list > li > a >.ui-checkbox {
  margin-top: 0;
  margin-bottom: 0;
  border: none;
}

#plugin-list .activated, #plugin-browse-list .activated, #plugin-list .update-available,
#plugin-list .compatibility-unknown,
#plugin-browse-list .installed, #plugin-list .loaded, #plugin-browse-list .loaded,
#plugin-browse-list .compatibility-unknown {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 10px;
  padding: 3px;
}

#plugin-list .activated, #plugin-browse-list .activated,
#plugin-list .loaded, #plugin-browse-list .loaded {
  background: #339900;
  color: white;
}

#plugin-browse-list .installed {
  background: gray;
  color: white;
}

#plugin-list .update-available{
  background: #FFCC00;
  color: white;
}

#plugin-list .compatibility-unknown,
#plugin-browse-list .compatibility-unknown {
  background: #7C7C7C;
  color: white;
}

#plugin-list .version, #plugin-browse-list .version {
  color: #7C7C7C;
}

#plugins-page .description {
  font-size: 0.85em;
  padding: 8px 0;
}

#plugins-page .buttons {
  margin-left: -.446em;
}

.page-message {
  margin-bottom: 15px;
}

.discover-messages {
  margin-bottom: 25px;
}

.ui-simpledialog-controls{
  padding: 0 6px;
}

.ui-simpledialog-input.ui-input-text{ 
  width: 100% !important; 
}

/*.ui-simpledialog-container .ui-header:first-child {
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
}
*/
.ui-simpledialog-container {
  border: 5px solid #ccc !important;
}

#rules li.rule.deactivated a{
  color: #A0A0A0;
}

#rules li.rule a .name {
  font-weight: bold;
}

#edit-rule .ui-content {
  /* no idea why this is necessary to display full y when autocomplete is visible*/
  overflow-x: visible !important;
}

.collapsible-content-not-insert .ui-collapsible-content{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  background-color:       #eee;
} 

.textcomplete-item a {
  white-space: nowrap;
  color: #000;
  font-weight: normal;
  text-shadow: none;
}

.textcomplete-more select{
  margin: 0;
  background-color: white;
  border: none;
}

.drag-message {
  /*display: none;*/
  position: absolute;
  padding: 0 10px;
  font-weight: bold;
  z-index: 99;
  color: white;
}

.drag-message.deactivate {
  /*color: #CC0000;*/
  right: 15px;
}

.drag-message.activate {
  /*color: #339900;*/
  left: 15px;
}

/* two page view */
/*.pageOne {
    display: block !important;
    width: 50% !important;
    float: left !important;
    background: yellow !important;
    position: relative !important;
}

.pageTwo {
    display: inline-block !important;
    width: 50% !important;
    float: right !important;
    background: green !important;
    position: relative !important;
}*/

#index li.with-button {
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
}

li.with-button a.ui-btn {
  position: absolute;
  top: 4px;
  right: 8px;
}



#variables .variable .var-name,
#variables .variable .var-value {
  font-weight: bold;
  color: #333 /*{a-page-color}*/;
}


#variables .variable .var-type,
#variables .variable .var-expression {
  font-weight: normal;
  color: #333 /*{a-page-color}*/;
}

#variables .variable .var-type {
  color: gray;
}



#index .lock-button {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  border-width: 1px;
}


#updates .message p{
  margin-top: 3px;
  margin-bottom: 0;
}

#nav-panel {
  background-color: #fff /*{a-body-background-color}*/;
}

#nav-panel a,
#nav-panel label
{
  font-weight: normal;
}

#edit-rule-form label, #edit-variable-form label {
  font-weight: bold;
}


.has-variable-name-input .ui-input-text:before {
  position: absolute;
  margin: 0.4em;
  margin-top: 0.5em;
  content: '$';
  z-index: 100;
}

.has-variable-name-input .ui-input-text input {
  margin-left: 0.55em;
}


@media (min-width: 28em) {

  #edit-rule-form label[for='edit-rule-condition'],
  #edit-rule-form label[for='edit-rule-actions'] {
    float: none;
  }


  .short-labels .ui-field-contain > label,
  .short-labels .ui-field-contain .ui-controlgroup-label,
  .short-labels .ui-field-contain > .ui-rangeslider > label {
    width: 12%;
  }

  .short-labels .ui-field-contain > label ~ [class*="ui-"],
  .short-labels .ui-field-contain .ui-controlgroup-controls {
    float: left;
    width: 86%;
  }

    /* Override field container CSS to prevent the flipswitch from becomming full width */
  html .short-labels .ui-field-contain > label + .ui-flipswitch,
  html .short-labels .ui-popup .ui-field-contain > label + .ui-flipswitch {
    display: inline-block;
    width: 5.875em; /* If you override the width for .ui-flipswitch you should repeat the same value here */
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }

  html .short-labels .ui-field-contain > label + .ui-btn-inline {
    width: auto;
  }

  html .short-labels .ui-field-contain .ui-flipswitch.ui-flipswitch-active, 
  html .short-labels .ui-popup .ui-field-contain .ui-flipswitch.ui-flipswitch-active {
    width: 1.875em;
  }

}


@media (min-width: 60em) {

  .locked #item-lists {
    background: #fff /*{a-body-background-color}*/;
  }

  .locked #item-lists .items {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .locked #item-lists ul {
    background-color: transparent;
    margin-top: 5px;
  }

  .locked .items .header, .locked .items .header label {
    background-color: transparent;
    border-top: none;
  }

  .locked .items .header {
    margin-left: 1%;
    margin-right: 1%;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 2px;
    margin-bottom: 4px;
  }
  
  .locked .items .no-header {
    overflow: visible;
    border-radius: 2px;
    float: left;
    padding-left: 1% !important;
    padding-right: 1% !important;
    width: 46.4%;
    margin-left: 0;
    margin-right: 0;
    border: 1px solid #ccc /*{a-bup-border}*/ !important;
    margin-left: 1%;
    margin-top: 0.4%;
    margin-bottom: 0.4%;
    box-shadow: 0 0 2px 2px rgb(247,247,247) /*{pm-items-shadow-color}*/;
  }
  
  .locked .items .ui-first-child {
    /*margin-bottom: 0.8%;*/
  }

  .locked .items .header {
    margin-top: -0.4%;
    clear: both;
  }
  
  .locked #rules {
    clear: both;
  }

  #index.locked li.thermostat {
    line-height: 1.3;
  }


  #index.locked li.thermostat .valve-position{
    margin-top: 0;
    margin-bottom: 0;
  }

  #index.locked li.thermostat div.controls,
  #index.locked li.input div.inputs {
    margin-top: -4.5px;
    margin-bottom: -4.5px;
  }

}

.graph-device label {
  font-weight: bold;
}

.graph-device-attribute {
  position: relative;
}

.graph-device-attribute .color-label {
  display: inline-block;
  float: left;
  height: 16px;
  width: 6px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}

.graph-device-attribute .name{
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.graph-device-attribute div.controls{
  margin: 3px 0px 10px 0 !important;
  position: absolute;
  right: 0;
  top: -3px;
}

.graph-device-attribute  div.controls .ui-btn-inline{
  margin: 2px;
  color: black;
  font-weight: bold;
}

.graph-device-attribute  div.controls .ui-slider-switch{
  margin: 3px 10px 10px 0 !important;
}

li.item .attributes .sparkline {
  margin-left: 5px;
}
li.item .attributes .sparkline canvas{
  max-width: 40px !important;
  position: relative;
  top: 2px;
}

@media (min-width: 28em) {
  li.item .attributes .sparkline canvas{
    max-width: 90px !important;
  }
}

li.item .attributes .outOfDate {
  color: #888888;
}


#chart-info {
  text-align: right;
  padding-top: 7px;
  font-size: 15px;
}

#chart-info #average-info {
  padding: 13px 10px;
}

#graph-page #chart-container .ui-input-text{
  display: inline-block;
  vertical-align: middle;
  width: 88px;
  border-color:     #ccc /*{a-bup-border}*/;
}

#graph-page #chart-container .ui-input-text input{
  padding-top: 0.50em;
  padding-bottom: 0.50em;
}

@media (max-width:28em) {
  #logger-attr-values li div.controls label {
    display: none;
  }
 
}

#chart-container {
  background-color: white;
  padding: 0.7em 0;
  margin: -1em;
}

#chart-legend-wrapper {
  text-align: center;
}

#chart-legend {
  text-align: center;
  border: 1px solid gray;
  padding: 2px 6px;
  border-radius: 5px;
  margin: 0px 10px;
  font-size: 13px;
  display: inline-block;
}

.dygraph-tooltip {
  color: rgb(97, 97, 97) !important;
  border: 1px solid #DADADA !important;
  font-size: 13px !important;
  background: rgba(249, 249, 249, 0.77) !important;
  -webkit-transition: left 150ms linear, top 150ms linear;
  -moz-transition: left 150ms linear, top 150ms linear;
  -o-transition: left 150ms linear, top 150ms linear;
  -ms-transition: left 150ms linear, top 150ms linear;
  transition: left 150ms linear, top 150ms linear;
}

.dygraph-axis-label-x {
  transform: rotate(-35deg);
}

#chart-legend .label {
  color: black;
  cursor: pointer;
}

#chart-legend .label.series-invisible {
  color: gray;
}

#chart-container .controls{
  padding-left: 10px;
  padding-bottom: 10px;
}

#chart .dygraph-axis-label{
  font-size: 12px;
  color: #606060;
}

#chart-no-data {
  padding: .7em 1em;
  font-style: italic;
}

.edit-pages-handle-label {
  margin-left: 9px;
}

.flat .ui-bar-a, 
.flat .ui-page-theme-a .ui-header, 
html .flat .ui-bar-a .ui-header, 
html .flat .ui-body-a .ui-header, 
html body.flat .ui-group-theme-a .ui-header, 
.flat .ui-page-theme-a .ui-li-divider, 
html .flat .ui-bar-a .ui-li-divider, 
html .flat .ui-body-a .ui-li-divider, 
html body.flat .ui-group-theme-a .ui-li-divider {
  background-image: none;
}

.flat .ui-bar-a, 
.flat .ui-page-theme-a .ui-header, 
html .flat .ui-bar-a .ui-header, 
html .flat .ui-body-a .ui-header, 
html body.flat .ui-group-theme-a .ui-header {
  background-image: none;
  border-color: #007dcd /*{a-bar-background-color}*/;
}

.flat .ui-bar-a .ui-btn, 
.flat .ui-page-theme-a 
.flat .ui-header .ui-btn, 
html .flat .ui-bar-a.ui-header .ui-btn, 
html .flat .ui-body-a .ui-header .ui-btn, 
html body.flat .ui-group-theme-a .ui-header .ui-btn, 
.flat .ui-page-theme-a .ui-li-divider .ui-btn, 
html .flat .ui-bar-a .ui-li-divider .ui-btn, 
html .flat .ui-body-a .ui-li-divider .ui-btn, 
html body.flat .ui-group-theme-a .ui-li-divider 
.flat .ui-page-theme-a .ui-header .ui-btn:visited, 
html .flat .ui-bar-a.ui-header .ui-btn:visited, 
html .flat .ui-body-a .ui-header .ui-btn:visited, 
html body.flat .ui-group-theme-a .ui-header .ui-btn:visited, 
html head + body.flat .ui-header .ui-btn.ui-btn-a:visited {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.flat .ui-page-theme-a .ui-btn, 
html .flat .ui-bar-a .ui-btn, 
html .flat .ui-body-a .ui-btn, 
html body.flat .ui-group-theme-a .ui-btn, 
html head + body.flat .ui-btn.ui-btn-a {
  box-shadow: none;
}

.flat .ui-btn-icon-notext:after, 
.flat .ui-btn-icon-left:after, 
.flat .ui-btn-icon-right:after {
  top: 50%;
  margin-top: -11px;
}

.flat .ui-bar-a, .ui-page-theme-a .ui-bar-inherit, 
html .flat .ui-bar-a .ui-bar-inherit, 
html .flat .ui-body-a .ui-bar-inherit, 
html body.flat .ui-group-theme-a .ui-bar-inherit {
  background-clip: padding-box;
  border-color: #007dcd /*{a-bar-background-color}*/;
}

.flat .ui-shadow-inset {
  box-shadow: none;
}

/* Buttons */
.flat .ui-btn-corner-all,
.flat .ui-btn.ui-corner-all,
.flat [data-role="button"],
/* Count bubble */
.flat .ui-li-count {
  -webkit-border-radius:        0.8em /*{global-radii-buttons}*/;
  border-radius:            0.8em /*{global-radii-buttons}*/;
}

/* Slider track */
.flat .ui-slider-track.ui-corner-all,
/* Flipswitch */
.flat .ui-flipswitch.ui-corner-all {
  -webkit-border-radius: 3em;
  border-radius: 3em;
  border: none;
  -webkit-box-shadow: 0px 0px 0px 2px #007dcd /*{a-bar-background-color}*/;
  -moz-box-shadow: 0px 0px 0px 2px #007dcd /*{a-bar-background-color}*/;
  box-shadow: 0px 0px 0px 2px #007dcd /*{a-bar-background-color}*/;
}

.flat .ui-slider-handle {
  overflow: visible;
}

.flat .ui-controlgroup.ui-corner-all{
  -webkit-border-radius:        2em /*{global-radii-buttons}*/;
  border-radius:            2em /*{global-radii-buttons}*/;
}

.flat .ui-controlgroup-horizontal .ui-btn {
  -webkit-border-radius: 0;
  border-radius:  0;
}

.flat .ui-controlgroup-horizontal .ui-btn.ui-last-child {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}

.ui-controlgroup-horizontal .ui-btn.ui-first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}

.ui-icon-step-forward:after,
.ui-icon-step-backward:after,
.ui-icon-play:after
{
  background-position: 6px 3px;
}

.ui-icon-pause:after
{
  background-position: 4px 3px;
}

.ui-icon-stop:after {
    background-position: 4px 3px;
}

.empty-list {
  font-style: italic;
}

.process-message {
  background: rgb(48, 48, 48);
  color: white;
  text-shadow: none;
  font-family: monospace;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.process-message p {
    margin: 0;
}

.attr-presence {
  display: inline-block;
  float: right;
  border-radius: 20px;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 3px solid #007dcd /*{a-bar-background-color}*/;
}

.contains-attr-presence {
  min-height: 14px;
}

.attr-presence .val{
  display: none;
}

.attr-presence.value-present {
  background: #007dcd /*{a-bar-background-color}*/;
}

.ui-field-contain {
  border-bottom: none;
  padding-bottom: 3px;
}

span.attribute.attr-contact.attr-type-boolean {
  float: right !important;
}

#tooltip, .dygraph-tooltip
{
  font-weight: bold;
  font-size: 0.8em;
  text-align: left;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: 1010;
  padding: 8px;
  text-shadow: none;
}

#tooltip a {
  color: white;
  border: 1px solid black;
  border-radius: 5px;
  display: inline-block;
  padding: 2px 4px;
  margin: 3px 6px;
  background: black;
}
 
#tooltip:after, /* triangle decoration */
.dygraph-tooltip:after
{
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.8);
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -5px;
}

#tooltip.top:after,
.dygraph-tooltip.top:after
{
  border-top-color: transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.8);
  top: -10px;
  bottom: auto;
}

#tooltip.left:after,
.dygraph-tooltip.left:after
{
  left: 15px;
  margin: 0;
}

#tooltip.right:after,
.dygraph-tooltip.right:after
{
  right: 15px;
  left: auto;
  margin: 0;
}

#config-editor {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  display: block;
}

#config-page .ui-content {
  padding: 0;
}

#config-editor .readonly{
  opacity: 0.7;
}

#login-page .ui-header .ui-select {
  float: left;
  top: 5px;
}

#index li.thermostat {
  text-align: right;
  line-height: 30px;
}

#index li.thermostat div.controls {
  float: right;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-align: right;
  white-space: normal;
}

#index li.thermostat div.controls .ui-controlgroup,
#index li.input div.inputs .ui-controlgroup {
  display: inline-block;
  margin: 0;
  margin-left: 4px;
  margin-top: 2px;
  margin-bottom: 2px;
  border-radius: 0.8em;
}

#index .items .ui-group-theme-a{
  border-radius: 2em
}

#index .items .ui-controlgroup .ui-btn{
  padding-left: 8px;
  padding-right: 8px;
}

#index .items .ui-controlgroup .ui-btn.ui-btn-icon-left {
  padding-left: 2.5em;
}

#index li.thermostat .valve-position{
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 6px;
  line-height: 30px;
  height: 30px;
  background: #C7C7C7;
  margin: 5px 0px;
  border-radius: 2px;
}

#index li.thermostat .valve-position-bar{
 display: inline-block;
 height: 0%;
 width: 100%;
 background: #007dcd /*{a-bar-background-color}*/;
 vertical-align: bottom;
 border-radius: 2px;
}

#index li.thermostat.unsynced{
  color: gray !important;
}

#item-lists, #item-lists .owl-wrapper-outer, #item-lists .owl-wrapper,  #item-lists .owl-item {
  height: 100%;
  margin: 0;
  border: none;
  display: block;  
}

/*.owl-item {
  padding-top: 38px;
}
*/
.animated {
  -webkit-animation-duration: 0.25s;
     -moz-animation-duration: 0.25s;
       -o-animation-duration: 0.25s;
          animation-duration: 0.25s;
  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
}


@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes slideDown {
  0% {
    -moz-transform: translateY(-100%);
  }

  100% {
    -moz-transform: translateY(0);
  }
}

@-o-keyframes slideDown {
  0% {
    -o-transform: translateY(-100%);
  }

  100% {
    -o-transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.animated.slideDown {
  -webkit-animation-name: slideDown;
  -moz-animation-name: slideDown;
  -o-animation-name: slideDown;
  animation-name: slideDown;
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-100%);
  }
}
@-moz-keyframes slideUp {
  0% {
    -moz-transform: translateY(0);
  }

  100% {
    -moz-transform: translateY(-100%);
  }
}
@-o-keyframes slideUp {
  0% {
    -o-transform: translateY(0);
  }

  100% {
    -o-transform: translateY(-100%);
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

.animated.slideUp {
  -webkit-animation-name: slideUp;
  -moz-animation-name: slideUp;
  -o-animation-name: slideUp;
  animation-name: slideUp;
}

#database-problems li {
  white-space: normal;
}

#database-problems .info {
  float: left;
}

#database-problems .attribute {
  font-weight: bold;
}

#database-problems .action {
  display: block;
  float: right;
  padding-left: 10px;

}

#database-problems .action a {
  margin: -2px 0;
}

#rule-condition-selector .errors {
  border: 1px solid #AA0000;
  padding: 10px;
  color: #AA0000;
}

#rule-condition-gui, .node {
  background-color: #fff /*{a-body-background-color}*/;
  border: 1px solid #ddd /*{a-body-border}*/;
  color: #333 /*{a-body-color}*/;
  padding: 6px 10px;
}

#rule-condition-gui {
  margin: .5em 0;
}

.binary-operator {
  display: inline-block;
  font-weight: bold;
  padding: 8px 0;
}

.node-and > .node-and, .node-or > .node-or, 
#rule-condition-gui > .node-and, #rule-condition-gui > .node-or,
#rule-condition-gui > .node-andIf, #rule-condition-gui > .node-orWhen{
  padding: 0;
  border: none;
}

@media (min-width: 28em) {
  #rule-condition-gui {
    width: 100%;
  }
}

.node-predicate {
  padding: 0px 0;
  border: none;
  /*display: inline-block*/
}

.node-predicate .buttons{
  display: inline-block
}

.node-predicate .ui-btn {
  font-weight: bold;
}

.node-predicate .predicate {
  margin-right: 0em;
}


.node a.ui-btn {
  opacity: 0.5;
  margin: 2px 0;
  padding-left: 34px;
  padding-right: 8px;
}

.node-predicate > .ui-btn {
  margin-top: -3px;
  margin-bottom: -3px;
}

.node-predicate > .ui-btn:first {
  margin-left: 10px;
}

.node .ui-btn:hover {
  opacity: 1;
}

#rule-condition-back-presets {
  float: right;
  margin-right: 0;
  margin-left: 12px;
}

.popup-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10;
  padding: 30px;
  padding-top: 80px;
}

.popup-overlay .outer{
  background-color: white;
  max-height: 100%;
  border: 1px solid gray;
}

.popup-overlay .inner{
  background-color: white;
  padding: 20px;
}

/*#rule-condition-elements .elements {
    margin-bottom: 20px
}*/

#rule-condition-elements .elements .ui-select {
  margin-right: 0;
}

#rule-condition-selector .controls {
  margin-top: 20px
}

@media (min-width: 28em) {
  #rule-condition-for-elements > .ui-checkbox {
    float: left;
    width: 20%;
    margin: .5em 2% 0 0;

  }
}

#rule-condition-for-elements > .ui-checkbox{
  display: block;
  margin: 0 0 .4em;
}

#rule-condition-for-elements .ui-checkbox > label {
  border: none;
}

.input-mode-switch{
  font-size: 14px;
}

.json-schema-editor .description {
  clear: both;
  padding-top: 8px;
  font-style: italic;
  color: gray;
}

.json-schema-editor h3 {
  margin-bottom: 5px;
}

.json-schema-editor .elements {
  padding-left: 5px;
}

.json-schema-editor .elements > ul {
  margin-top: 7px;
}

.json-schema-editor .properties {
  position: relative;
}

.json-schema-editor .properties label.ui-checkbox input{
  left: 0;
}

.json-schema-editor .properties label.ui-checkbox span{
  padding-left: 28px;
}

.json-schema-editor .properties > .properties {
  padding-left: 20px;
  margin-left: -10px;
  border-left: 5px solid #ddd /*{a-body-border}*/;
  margin-top: -33px;
  padding-top: 22px;
  padding-right: 10px;
  border-radius: 5px;
  margin-bottom: 25px;
}

.json-schema-editor .properties  h3 {
  padding: 0 5px;
}

.json-schema-editor .add-property > label{
  font-weight: bold;
}

.json-schema-editor .add-property-name {
  width: 32%;
  display: inline-block;
  margin-right: 10px;
}

.json-schema-editor .add-property-fields {
  margin-top: -8px;
}



.json-schema-editor .remove-property {
  position: absolute;
  left: 0;
  top: 0;
  margin: 5px;
  margin-left: 0;
}

.json-schema-editor .properties > .remove-property {
  left: 10px;
  top: -4px;
}

.json-schema-editor .isExtra > label {
  padding-left: 40px;
  box-sizing: border-box;
}

.json-schema-editor h3.isExtra  {
  padding-left: 45px;
}

.ui-field-contain .notset, .default {
  display: inline-block;
  font-style: italic;
  position: absolute;
  top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  right: 10px;
}

@media (min-width: 28em) {

  #edit-rule-form label[for='edit-rule-condition'],
  #edit-rule-form label[for='edit-rule-actions'] {
    float: none;
  }


  .json-schema-editor  .ui-field-contain > label,
  .json-schema-editor  .ui-field-contain .ui-controlgroup-label,
  .json-schema-editor  .ui-field-contain > .ui-rangeslider > label {
    width: 32%;
  }

  .json-schema-editor  .ui-field-contain > label ~ [class*="ui-"],
  .json-schema-editor  .ui-field-contain .ui-controlgroup-controls {
    float: left;
    width: 66%;
  }


}

.ui-listview > .ui-li-divider.collapsible,
.ui-listview > .ui-li-divider.collapsible label{
  cursor: pointer;
}

.collapsible label::before {
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  display: inline-block;
  content: "";
  position: relative;
  cursor: pointer;
}

.collapsible.closed label::before {
  border-left-color: #0071b9 /*{pm-listdivider-color}*/;
  border-width: 5px 0 5px 7px;
  margin-right: 10px;
  left: 2px
}

.collapsible.open label::before {
  border-top-color: #0071b9 /*{pm-listdivider-color}*/;
  border-width: 7px 5px 0 5px;
  margin-right: 6px;
  top: -2px
}