body {
    /*font-size: 16px;*/
    /*min-height: 100%;*/
    /*font-family: "PT Sans Narrow", Helvetica Neue, Arial, sans-serif;*/
    /*margin: 0;*/
    /*padding: 0;*/
    /*background-color: #333;*/
    /*background-color: #333535;*/ /* GERA Leuchten */
    /*color: #fff;*/
    /*-webkit-touch-callout: none;*/*/
}

.custom-brand:before {
    float: left;
    margin-right: 0.618em;

    content: '';
    background: url(/img/custom-brand-logo.png) no-repeat 0 0;
    background-size: 100%;
    position: relative;
    top: -5px;
    height: 32px;
    width: 32px;
}

span, div, p {
    -webkit-user-select: none;
}

.modal { /* TODO  this belongs into bootstrap.css */
    color: black;
}


.noborder td {
    border: none;
}

/* global alert container on each page */
#alerts {
    margin-top: 1em;
}

.table-sys-settings {
    width: initial;
}

.table-sys-settings td:nth-child(1) {
    text-align: right;
}

.table-sys-settings td:nth-child(2) {
    text-align: left;
}

/*
a {
    text-decoration: none;
}

ul, li {
    list-style: none;
}
*/

button {
    /*border: 1px solid red;*/
    background: none;
    /*background-color: #aaa;*/
    border: none;
    border-radius: 0;

}

.darkBg {
    background-color: #333;
    /*background-color: #333535;*/ /* GERA Leuchten */
}

/*:focus, :active {
    outline: 0;
    border: 0;
}*/

input:focus, textarea:focus, button:focus {
    outline: none;
}

button::-moz-focus-inner {
  border: 0;
}

.bigHeader {
    position: relative;
    display: block;
    /*height: 56px;*/
    /*margin: 4px 12px;*/
    /*background-color: #404040;*/
    background-color: #4f5051; /* GERA Leuchten */
    box-shadow: 0px 2px 6px rgba(0,0,0,0.35);
}

.bigHeader h1 {
    padding: 8px 1em;
    font-weight: normal;
    margin-left: 1em;
    /*color: #888;*/
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif-light, sans-serif;
}

#pageLightEditMap .bigHeader {
/*    padding: 8px 0px; */
    margin-bottom: 16px;
}

.deLogo {
    /*position: absolute;*/
    float: right;
    display: inline-block;
    /*margin: 12px 8px;*/
    width: 56px;
    height: 56px;
    /*width: 157px; GERA Leuchten */
    /*height: 56px;*/
    /* GERA Leuchten
    margin-right: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
    */
    background-image:url('img/de-logo_56x56.png');
    /*background-image:url('img/gera_logo02.png');*/
    background-repeat: no-repeat;
    /*background-size: 100% 100%; */
    /*clear: both;*/
}

.location {
    margin-bottom: 8px;
    /*background-color: #fafafa;*/
    
/*    margin: 16px 12px;  */
    padding: 10px 24px;
    background-color: #404040;
    /*background-color: #4f5051;  GERA Leuchten */
    box-shadow: 0px 2px 6px rgba(0,0,0,0.35);
/*    vertical-align: top;
    position: relative; */
}

.location table {
    width: 100%;
    /*table-layout: fixed;*/
}

.location table td {
    overflow: hidden;
    white-space: nowrap;
}

.location tr.undef  td {
    overflow: hidden;
    white-space: normal;
}

.location tr:nth-child(1) td:nth-child(1) {
    max-width: 8em;
    text-overflow: ellipsis;
}

/* on/off light bulb button */
.light_item td:nth-child(1) {
    min-width: 48px;
}

/* level percent */
.light_item td:nth-child(2) {
    width: 10px;
}

/* light name */
.light_item td:nth-child(3) {
    /*width: 50%;*/
    /*width: calc(100% - 50px);*/
}

.lightFont {
    font-family: "Segoe UI Light","Segoe WPC","Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif-light, sans-serif;
}

.locName {
    -webkit-user-select: none;
    /*display: block;*/
    font-size: 170%;
    font-weight: lighter;
    /*color: #888;*/
    margin-left: 8px;
    margin-bottom: .5em;
}

.buttonGroup {
    border-top: 1px solid #434343;
    padding-top: 8px;
    /*background-color: #363636;*/
}

/* group on off buttons */
.actionButton {
    -webkit-user-select: none;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
    /* padding: 8px 1.2em; */
    margin: 8px 8px;  
}

.onButton, .offButton {
    
}

.not_reachable {
    color: rgba(255,255,255,0.5);
}

.not_reachable .onoff_button {
    opacity: 0.5;
}

/* symbol for light on/off in the list*/
.onoff_button {
    /*left: -20px;*/
    /*position: relative;*/
    /*border: 1px solid #555;*/
/*    display: inline-block; */
    width: 48px;
    height: 48px;
    vertical-align: middle;
    margin: 0px 0px;
    padding: 10px 0px;
    /*margin-left: 10px;*/
    background-repeat: no-repeat;
    background-position: 0px 10px;
    background-image:url('img/light_off_48px.png');
}

.light_on {
    background-image:url('img/light_on_48px.png') !important;
}

.light_off {
    background-image:url('img/light_off_48px.png');
}

.light_blink {
    background-image:url('img/light_blink.gif');
}

.light_colorloop {
    background-image:url('img/light_colorloop.png');
}
.light_level {
    /*left: -20px;
    position: relative;*/
    /*display: inline-block;*/
    /*text-align: right;*/
    min-width: 4em;
    text-align: center;    
    font-size: 80%;
}

.light_item .edit_button, .group_item .edit_button, .location .edit_button  {
    /*position: absolute;
    right: 0px; */
    /*padding: 0px;
    margin: 0px;
    display: inline-block;
    vertical-align: middle;*/
    min-width: 48px;
    width: 48px;
    height: 48px;
    background: none;
    border: none; 
    /*float: right;*/
/*    height: 4em;
    padding: 1px 24px;
    margin-top: 4px;*/

    /*background-position-y: 13px;*/
    /*background-origin: 50% 50%; */
    background-size: 48px 48px;
    background-image:url('img/edit_light_icon_48px.png');
    background-repeat: no-repeat;
}

.edit_group {
    /* different background */
    background-image:url('img/edit_group_icon_48px.png') !important;
}

.light_item .name, .group_item .name {
/*    display: inline-block; */
    vertical-align: middle;
    /*margin-left: 1em;*/
    /*padding: 0px 1em;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
/*    color: #666;*/
    /*min-width: 8em;*/
    /*width: 55%;*/
}

.scenes {
    position: relative;
    padding-left: 3em !important;
    top: -1em;
}
.scene_item {
    border-radius: 6px;
    display: inline-block !important;
    padding: 6px 0.75em;
    background: #f8f8fa;
    color: #555;
    box-shadow: 1px 1px 3px #666;
}

#colorMapBig {
    display: block;
    padding: 0;
    position: relative;
    margin: 0 auto;
}

#barLevelBig, #barLevelBig2 {
    position: absolute;
	left: 0px;
    margin: 0 auto;
    background-color: white;
    /*background-color: #ffe000;*/ /* GERA Leuchten */
    /*display: block;*/
    height: 48px;
    min-width: 10px;
}

#barLevelBigWrapper, #barLevelBigWrapper2 {
    position: relative;
    margin: 8px auto;    
    display: inline-block;
    width: 65%;
    /*border: 1px solid #696969;*/
    background-color: #262626;
}

.colorMapHidden {
    opacity: 0;
}

.devNameLabel {

    width: 95%;
    position: relative;
    text-align: center;
    vertical-align: middle;
    
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 10px;
    outline: none;
    border: none;
    background: none;
    /* GERA Leuchten 
    background-color: #323232;
    border-bottom: 1px solid #505050; */
    color: white;
    margin: 0px auto;
    padding: 8px 0px;
    /*margin-left: 32px;*/
}

#devNameLabelBig {
    text-align: center;
    margin-left: 4em;
    /*color: #fff;
    border: none;
    border-radius: 0px;
    display: inline-block;
    width: 16em;
    font-weight: normal;
    font-size: 170%;
    left: 20%;
    background: transparent;
    */
}

.devTypeLabel {
    display: none; /* GERA Leuchten */
    color: #bbb;
    font-size: 1.2em;
    margin: 0 1em;
}

/*.headerInfo {
    margin-top: 2em;
    font-size: 150%;
    text-align: center;
    color: #777;
}*/

.back_button {
    font-size: 230%;
    /*font-weight: bold;*/
    display: inline-block;
    vertical-align: middle;
    /*position: absolute;*/
    /*top: 0;
    bottom: 0;
    right: 0;*/
    /*margin: 0;*/
    padding: 0;
    /*float: right;*/
    width: 72px;
    height: 72px;
    color: white;
    border-radius: 36px;
    border: 4px solid #777;
    background-color: transparent;
}

#editColorButton {
    display: inline-block;
    width: 72px;
    height: 72px;
    vertical-align: middle;
    margin: 0px 8px;
    background-repeat: no-repeat;
    background-image:url('img/BYR_color_wheel.png') !important;
    background-size: 72px 72px;
}

/* Prevent the text contents of draggable elements from being selectable. */
/*[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
*/
.app_page {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
}

.clear {
    clear: both;
}

#pageLightList {
    /*overflow: auto;*/
}

div#pageLightList.pageHide {
    display: none;
}

div#pageLightEdit.pageHide {
    display: none;
}

div#pageLightEditMap.pageHide {
    display: none;
}

#pageLightEditMap .doneButton {
    margin-top: 2.4em;
    margin-right: 1.5em;
}

div#pageSceneEdit.pageHide {
    display: none;
}


#canvas0, #canvasSat {
    /*background-color: black;*/
    position: absolute;
    top: 15%;
}

#deviceList {
    margin-top: 96px;
}

.dev_container {
    /*font-size: 110%;*/
    /*border-left: 1px solid #aaa;*/
    /*border-right: 1px solid #aaa;*/
}

.dev_container ul {
/*    margin: 0;
    padding: 0;
    list-style: none;
    */
}

.dev_container ul li {
    position: relative;
    display: block;
    /*margin-bottom: 0.4em;*/
    /*padding: 0em 1em 0em 2em;*/
    /*border-bottom: 1px solid #bbb;*/
    /*line-height: 4em;*/
}

.dev_groups {
}

.devices, .groups, .scenes {
    padding: 0;
    margin-top: 1em;
    margin-bottom: 2em;
}

.dev_location, .dev_groups, .dev_scenes {
    /*background-color: #777;*/
    /*color: #888;*/
    line-height: 2.3em !important;
    border-bottom: 1px solid #999;
    /*font-weight: bold;*/
    text-align: left;
    /*padding-top: 2em;*/
    padding-left: 1em;
    margin-bottom: 1.2em !important;
    /*padding: 0.4em 1em .1em 3em !important;*/
}

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 9px 4px;
  pointer-events: none;
}

.inner-addon .glyphicon_scene_group_edit {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

.inner-addon .glyphicon_scene_edit {
  position: absolute;
  padding: 12px 3px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}
.right-addon .glyphicon_scene_group_edit { right: -35px;}
.right-addon .glyphicon_scene_edit { left: 218px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

.icon-span-filestyle { display: none; }

#submit_upload { margin-top:-40px; }
 
/* pencil icon on small devices */
@media  (max-width: 767px) {
  .right-addon .glyphicon_scene_group_edit { right:0px; }
  .bootstrap-filestyle.input-group { margin-left:15px; }
  #submit_upload { margin-top:-30px; }
}
@media  (max-width: 383px) {
  .right-addon .glyphicon_scene_edit { padding:2px; }
  .right-addon .no_switch { padding:12px 3px; }
}
@media  (max-width: 375px) {
  .right-addon .glyphicon_scene_edit { padding:3px; }
  .right-addon .no_switch { padding:12px 3px; }
}
@media  (max-width: 371px) {
  .right-addon .no_switch { padding:2px 3px; }
}
@media  (max-width: 320px) {
  .right-addon .no_switch { padding:2px 3px; }
}