.ContentHeader
{
  margin-bottom: 20px;
}


body
{
  font-family: "Lelo",sans-serif;
  font-weight: normal;
  background-color:#E5E5E5;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: black;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.head{
  height: 93px;
  width: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 10;
  background-color: white;
}

.content_header{
  font-size: x-large;
  width:100%
}

.btn-danger{
  color: black;
  background-color: #ff5500;
  border-color: #ff5500;
}

.invalid{
  background-color: #ffddcc;
  border: 1px solid #ff5500;
}

.help-block{
  background-color: #ffddcc;
}
.btn-danger:hover{
  color: black;
  background-color: #ff5500;
  border-color: #ff5500;
  filter: brightness(85%);
}

.btn-primary{
  color: black;
  background-color: #F9EC32;
  border-color: #F9EC32;
}

.btn-primary:hover{
  color: black;
  background-color: #FBB140;
  border-color: #FBB140;
}

.btn-default{
  color: black;
  background-color: white;
  border-color: #ffcc66;
}

.btn-default:hover{
  color: black;
  background-color: #ffcc66;
  border-color: #ffcc66;
}

.detail_label{
  font-weight: bolder;
  padding-right: 20px;
}

.detail_edit_btn{
  float: right;
  margin-top: 15px;
}

.button_container
{
margin-top: 20px;
}

.button_container
{
  padding:5px 10px;
  border:1px solid #999;
  /*background:#ccc linear-gradient(#fff,#ccc);*/
  background: #EDEDED;
  color:#000;
  text-decoration:none;

  float: left;
  margin-top: 10px;
  margin-right: 30px;
  /*display: block;*/
  width: 140px;

}
.button_container a
{
  text-decoration:none;
  width: 100%;
  font-size: 17px;
  color: #54555A;
  text-transform: uppercase;
  font-weight: 300;
}

.change_passwort_btn{
  margin-top: 15px;
  margin-right:15px;
}

.ErrorHeader
{
  color:  #e6440e;
}

.ErrorInfo
{
  color:  #e6440e;
}

.button_wrapper_single
{
  display:table;
}
  
button.logoutbutton {
  color: black;
  margin: 0;
  padding-left: 30px;
  background: transparent url("../solarview/images/power-off-solid.svg") no-repeat left top;
  text-indent: 0;
  float: left;
  border: none;
  font-family: arial, sans-serif;
  cursor: pointer;
}
  

#logoutview {
  width:20%;
  padding:0px;
  border-bottom-left-radius: 20px;
  display: inline-block;
  top: 15px;
  right: 0;
  position: absolute;
  z-index: 4;
  border-left: solid #54555A 2px;
  border-bottom: solid #54555A 2px;
  padding-left: 5px;
}
  #logoutview > div {
    display: inline-block;
    float: left;
    color: #54555A; 
    margin-top: 4px;}
    #logoutview > div > span {
      display: inline-block;
      padding: 0px 4px;
      margin: 3px 0px; }
      #logoutview > div > span > a {
        text-decoration: none; 
      }
      
    #logoutview > div.background > span {
      border: none;
      margin-right: 1px; }

#global_config_cnt{
  position: absolute;
  top: 60px;
  width:20%;
  right: 0px;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  padding: 0 0 0 32px;
  color: #2F2F2F; }
  #footer a {
    color: #2F2F2F; }
    #footer a:hover {
      text-decoration: underline; }

.impressum{
  position: absolute;
  top: 400%;
  left: 50%;
}

.suncloud_logo
{
  position: absolute;
  top: 15px;
  left: 30px;
  width: 267.5px;
}

.top1_gradient
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  background-color: #F9EC32; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, #FBB140 0%, #F9EC32 100%); 
}

.NaviCnt
{
  position: fixed;
  top: 93px;
  width:100%;
  display: flex;
  flex-direction: row;
  background: #EDEDED;
  z-index: 5;
  left: 0px;
  padding-left: 0px;
}

.NaviBlock{
  flex-grow: 1;
}

.NaviHeader
{
  position: relative;
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-top: 2px solid #54555A;
  background: white;
  font-size: 13px;
  color: black;
  text-transform: uppercase;
  font-weight:600;
  text-align:center;
  width:100%;
  padding-top:15px;
  padding-bottom:15px;
  box-shadow: 7px 4px 10px #54555A;
}

.NaviHeader:hover{
  box-shadow: 2px 2px 2px #54555A;
}

.NaviHeader:hover .NaviSubMenu {
  top: 50px;
  transition: top 0.5s;
  transition-timing-function: ease-out; 
}

.NaviLinkCnt
{
  position: relative;
  font-size: 13px;
  color: #54555A;
  text-transform: uppercase;
  font-weight:300;
  text-align:center;
  width:100%;
  padding-top:15px;
  padding-bottom:15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.NaviLinkCnt > a
{
  text-decoration: none;
  font-size: 13px;
  color: #54555A;
  text-transform: uppercase;
  font-weight:300;
  text-align:center;
  width:100%;
  padding-top:15px;
  padding-bottom:15px;
}
.NaviLinkCnt:hover {
  background-color: #f9ec3245;
}

.NaviSubMenu{
  position: absolute;
  /*background: #EDEDED;*/
  background-color: white;
  top: -280px;
  width:100%;
  display: flex;
  flex-direction: column;
  z-index: -1;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 3px 3px 3px #54555A;
}

.NavSelected
{
  border-bottom: 5px solid #F9EC32;
}

.mandant-info{
  top: 30px;
  position: relative;
  left: 40%;
  font-size: 30px;
}

.main_cnt
{
  background-color: #E5E5E5;
  position: absolute;
  width:100%;
  top: 145px;
  padding: 20px;
  padding-bottom: 50px;
}

.ContentCnt{
  display:flex;
  flex-flow: wrap;
}

.light_bubble_cnt{
  background-color: #F5F5F5;
  border-radius: 20px;
  padding: 20px;
  margin: 5px;
  width: fit-content;
  box-shadow: 2px 2px 2px;
  height: fit-content;
}

.bubble_header{
  font-weight: bolder;
}

.fieldWrapper>label
{
  width: 200px;
}
.fieldWrapper>input
{
  width: 200px;
}

.list_header
{
  width: 330px;
  font-weight: bold;
  float:left;
}
.list_value
{
  width:100%;
}


.DefaultTable
{
  border-collapse: unset;
  border: none;
}
  .DefaultTable th
  {
    background: black;
    color: white;
  }
  .DefaultTable a
  {
    text-decoration: none;
  }

  .DefaultTable th a
  {
    color: white;
  }
  .DefaultTable tr.odd
  {
    background: #EDEDED;
  }
  .DefaultTable th.first_col
  {
    border-top-left-radius: 0px;
  }
  .DefaultTable th.last_col
  {
    border-top-right-radius: 0px;
  }
  .DefaultTable th
  {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    text-transform: uppercase;
  }
  .DefaultTable td
  {
    padding-left: 5px;
    padding-right: 5px;
  }
  .DefaultTable td a
  {
    color: #54555A;
    font-weight: bold;
  }

  .DefaultTable th
  {
    border: 2px solid black;
  }
  .DefaultTable th.desc
  {
    border: 2px solid #F9EC32;
  }
  .DefaultTable th.asc
  {
    border: 2px solid #F9EC32;
  }
  .DefaultTable th.orderable:hover
  {
    border: 2px solid #F9EC32;
    /*border: 2px solid #FFD500;*/
    transition: border 0.5s;
  }

.DefaultTable tbody tr:nth-child(odd) {
  background-color: #fff;
}

.DefaultTable tbody tr:nth-child(even) {
  background-color: #eee;
}

.system_name_cell{
  width:200px;
  max-width: 200px;
  white-space: nowrap;
}

.form-group > label
{
  min-width: 150px;
}


.group_sum_cell{
  background-color: #ccc;
  font-weight: bold;
}

.date_form{
  display: flex;
  align-items: center;
}

.date_form input[type=submit]{
  margin-left: 5px;
}


.date_form_group{
  display: flex;
  align-items: center;
}

.date_form_group > label
{
  min-width: 60px;
  margin-top: 5px;
}

.hidden
{
  display:none;
}

.HeaderWrapper
{
  margin-top: 20px;
}

.loginCnt
{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
}
.loginCnt input[type="text"], input[type="password"]{
  border-radius: 10px;
  background: #efefef;
}

.loginCnt input[type="submit"]{
  float: right;
  width: 200px;
  margin-top: 10px;
}

.login_error_msg
{
  text-align: right;
  color:red;
  width: max-content;
}

.footer_version_tag
{
  float: right;
  padding-right: 20px;
}

.modal-dialog {
  max-width: 500px;
}

.modal-body>.form-group{
  margin-bottom:0px;
}

.form-group>label{
  width:250px;
}

.form-group>select{
  width:200px;
}

.form-group>input{
  width:200px;
}

.dummy_class{
  width:200px;
}

.light_bubble_cnt .header_cnt{
  display: flex;
}

.light_bubble_cnt>.header_cnt>h3{
  flex-grow: 1;
}
.light_bubble_cnt>.header_cnt>a{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.system_overview_cnt{
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

.default_chart_cnt{
  width:600px;
  height: 300px;
}

.public_api_cnt label{
  font-weight: bold;
}

#prev_iframe {
  width: 700px;
  height: 400px;
}

.list_item{
  display: flex;
  width: 350px;
}
.list_item>label{
  width:200px;
  font-weight: bold;
  margin-bottom: 0px;
}
.list_item>.list_value{
  width: 100px;
  text-align: right;
  padding-right: 5px;
}
.list_item>.list_unit{
  width:35px;
  text-align: left;
}

#chart-fullscreen{
  float: right;
}

.fullwidth{
  max-width:100%;
  height: 90vh;
}

.modal_wide{
  max-width:800px;
  height: 90vh;
}

.fullscreen_chart_cnt{
  width:100%;
  height: 70vh;
}

#system_data_chart{
  width:100%;
  height: 70vh;
}

.hidden{
  display: none;
}

.state-ok{
  color:#4cf932;
}

.state-warning{
  color:#FBB140;
}

.state-alarm{
  color:#e6440e;
}

.cell-state-warning{
  background-color:#fee3bb;
}

.cell-state-alarm{
  background-color:#fbcdbd;
}

.button_cnt{
  height:50px;
}

.supertools_form{
  margin-bottom: 10px;
}

.date_form_wrapper {
  display: flex;
  gap: 2px;
}

.value_cell{
  text-align: right;
}
#map{
  z-index: 1;
}