@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
html, body {
  xfont-size: 12px;
}

.pv-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.pv-container, .main-content-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
}

.pv-container > * {
  flex: 1 100%;
}

.pv-container .main-select {
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.pv-container .main-select .main-select-item {
  text-align: center;
  margin: 20px auto;
}

.pv-container .main-select .main-select-item * {
  flex: 1 100%;
}

.pv-container .main-select .main-select-item .main-select-item-text {
  display: none;
}

.pv-container .main-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
}

.pv-container .main-container .main-head {
  background-color: #1E1E1E;
  flex: 1 100%;
  display: flex;
  padding: 10px 0px;
}

.pv-container .main-container .main-head .main-head-operator {
  flex: 1 80%;
  text-align: right;
}

.pv-container .main-container .main-head .main-head-burger {
  margin: 0px 10px 0px 0px;
  flex: 1 auto;
  text-align: right;
}

.pv-container .main-container .main-head .main-head-burger .main-head-burger-content {
  display: none;
  position: absolute;
  right: 10px;
  padding: 10px;
  background-color: #1E1E1E;
  border: 1px solid white;
}

.pv-container .main-container .main-head .main-head-burger .main-head-burger-content a {
  text-decoration: none;
  padding: 5px;
}

.pv-container .main-container .main-head .main-head-burger .main-head-burger-content a:hover {
  background-color: #3A3A3C;
}

.pv-container .main-container .main-control {
  background-color: #3A3A3C;
  flex: 1 100%;
  display: flex;
  padding: 10px 0px;
}

.pv-container .main-container .main-control .main-control-actions {
  flex: 1 80%;
  text-align: center;
}

.pv-container .main-container .main-control .main-control-icons {
  flex: 1 auto;
}

.pv-container .main-container .main-control .main-control-icons i {
  margin: 0px 10px;
}

.pv-container .main-container .main-content-container {
  box-sizing: border-box;
}

.pv-container .main-container .main-content-container > * {
  flex: 1 100%;
  box-sizing: border-box;
}

.pv-container .main-container .main-content-container .main-content {
  background-color: #2E2E2E;
  min-height: 600px;
}

.pv-container .main-container .main-content-container .main-content-select {
  background-color: #1D1D1D;
}

.pointer {
  cursor: pointer;
}

.underline {
  text-decoration: underline;
}

.bold {
  font-weight: bold;
}

.pv_node {
  box-sizing: border-box;
}

.pv_node .sub-node {
  background-color: #3A3A3C;
  padding: 3px 10px;
  box-sizing: border-box;
  font-size: 80%;
}

.pv_node .sub-node div {
  border-bottom: 1px dotted lightgray;
}

.pv_node .sub-node.sub-node-collapsed {
  display: none;
}

pv_node .sub-node.sub-node-expanded {
  display: block;
}

.content-wrapper.login {
  background-color: #4A494C;
}

.login-form {
  display: flex;
  flex-flow: column;
  padding: 10px;
  max-width: 330px;
}

.login-form .username, .login-form .password {
  border: none;
  background-color: #4A494C;
  color: #AFAFAF;
  font-size: 24px;
  padding: 5px;
}

.login-form .divider {
  display: block;
  height: 1px;
  margin: 10px 0px;
  border-bottom: 1px solid #50C3FF;
}

.login-form button[type=submit] {
  font-size: 24px;
  border: none;
  border-radius: 6px;
  margin: 10px 0px 10px 0px;
  padding: 2px 0px;
  color: white;
  background-color: #339FF3;
}

.login-form button[type=submit] img {
  height: 15px;
  vertical-align: baseline;
}

.form-row {
  display: flex;
  flex-flow: column;
  margin-right: 10px;
}

.form-row > * {
  margin: 0px 5px 5px 0px;
}

.form-row label {
  width: 300px;
}

.form-row input, .form-row select {
  width: 100%;
}

.form-row textarea {
  width: 100%;
  height: 150px;
}

.projects {
  background-color: #2E2E2E;
  display: table;
}

.projects > div {
  display: table-row;
}

.projects > div > div {
  display: table-cell;
}

/* CHARTS BEGIN ----------------- */
.chart-container {
  width: 95%;
  height: 250px;
  position: relative;
}

.chart-wrapper-fullscreen {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 10000;
}

.chart-wrapper-fullscreen .chart-container {
  height: 95vh;
}

/* CHARTS END ------------------- */
/* TABLE inverters_short BEGIN ----------------- */
#inverters_short th, #inverters_short td {
  padding: 3px 5px;
  text-align: right;
  white-space: nowrap;
  border-right: 1px solid black;
}

#inverters_short thead {
  opacity: 0.9;
  background-color: #ECF0F5;
  position: sticky;
  top: 0px;
}

#inverters_short tr:nth-child(2n-1) td {
  background-color: lightgray;
}

#inverters_short tr.WR_BAD td, #inverters_short tr.WR_BAD a {
  color: darkred;
}

#inverters_short tr.WR_OK td {
  color: black;
}

#inverters_short a {
  color: black;
  text-decoration: underline;
}

#status_ok, #status_err, #status_cnt {
  padding: 2px 5px;
  color: white;
  border-radius: 0px;
  font-size: 16px;
}

#status_ok {
  background-color: #209120;
}

#status_err {
  cursor: pointer;
  background-color: #c52727;
}

#status_cnt {
  background-color: #ebeb33;
  color: black;
}

/* TABLE inverters_short END ----------------- */
/* vertical_peak_meter BEGIN ----------------- */
.vertical_peak_meter {
  position: relative;
  display: inline-block;
  background-color: inhertit;
  padding: 10px;
  margin: 10px;
  width: 240px;
}

.vertical_peak_meter canvas {
  margin-left: 66px;
}

.vertical_peak_meter .vpm_caption {
  text-align: center;
  font-size: 1.7rem;
  font-weight: bold;
}

.vertical_peak_meter .vpm_caption_extra {
  position: absolute;
  right: 0;
  top: 0;
  font-weight: bold;
}

.vertical_peak_meter .vpm_sub {
  text-align: center;
  padding: 2px 0px;
  font-size: 1.7rem;
  font-weight: bold;
  transition: color 2s ease-in-out;
}

/* vertical_peak_meter END ----------------- */
/* COUNTER BEGIN  ----------------- */
.counter .counter-digits {
  border: 1px solid #2A98D9;
  border-radius: 10px;
  padding: 0px 7px;
  display: inline-block;
}

.counter .counter-digits .counter-digit,
.counter .counter-digits .counter-komma {
  color: #6D6E71;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  display: inline-block;
  border-right: 1px solid #2A98D9;
  width: 14px;
  margin: 0;
}

.counter .counter-digits .counter-komma {
  width: 8px;
}

.counter div.unit {
  color: #6D6E71;
  display: inline-block;
  margin-left: 8px;
  width: 50px;
  border: none;
}

/* COUNTER END  ----------------- */
@media all and (min-width: 1024px) {
  .form-row {
    flex-flow: row;
  }
  .form-row label {
    text-align: right;
  }
  .chart-container {
    height: 360px;
  }
}
@media all and (min-width: 1280px) {
  .pv-container .main-select {
    flex: 0 0 10%;
    padding-top: 200px;
    box-sizing: border-box;
  }
  .pv-container .main-container {
    flex: 0 0 90%;
    box-sizing: border-box;
  }
  .pv-container .main-container .main-content-container .main-content {
    flex: 0 0 80%;
    order: 1;
    /* background-image: url(images/solarpanels.jpg); */
    /* background-repeat: no-repeat; */
  }
  .pv-container .main-container .main-content-container .main-content {
    padding: 10px 10px 0px 0px;
  }
  .pv-container .main-container .main-content-container .main-content-select {
    flex: 0 1 20%;
    order: 2;
    overflow: hidden;
    padding: 10px 0px 0px 10px;
  }
  .pv-container .main-select {
    flex-direction: column;
  }
  .pv-container .main-select .main-select-item .main-select-item-text {
    display: block;
  }
}
.jconfirm .jconfirm-box {
  color: black;
}

.dynamic_chart {
  position: absolute;
  width: 500px;
  height: 260px;
  top: 100px;
  left: 100px;
  background-color: white;
  Xborder-radius: 10px;
  border: 2px groove #c0c0c0;
  box-sizing: border-box;
  cursor: move;
  overflow: hidden;
}

.dynamic_chart canvas {
  height: 240px;
  cursor: pointer;
}

.dynamic_chart_closer, .dynamic_chart_edit {
  border: none;
  margin: 2px;
  background-color: white;
  text-align: right;
}

.dynamic_chart_closer {
  color: red;
}

.dynamic_chart_edit {
  color: #c0c0c0;
}

/* grosse Übersicht Start */
.dashboard_condensed {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}

.dashboard_condensed .dcond_project {
  font-size: 32px;
  overflow: hidden; /* 2021-10-08 bei langem Anlagenname */
  white-space: nowrap; /* 2021-10-08 bei langem Anlagenname */
  text-overflow: ellipsis; /* 2021-10-08 bei langem Anlagenname */
}

.dashboard_condensed .dcond_project .fas {
  font-size: 18px;
}

.dashboard_condensed .dcond_values {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  text-transform: none;
  font-size: 18px;
  color: #72afd2;
}

.dashboard_condensed .dcond_values div {
  width: 120px;
}

.dashboard_condensed .dcond_values div i {
  display: none;
}

.dashboard_condensed .dcond_controls {
  display: none;
}

@media all and (min-width: 600px) {
  .dashboard_condensed .dcond_values div i {
    display: inline;
  }
}
@media all and (min-width: 600px) {
  .dashboard_condensed {
    flex-flow: row nowrap;
    padding: 16px 10px 0px 5px;
    gap: 30px;
    align-items: center;
  }
  .dashboard_condensed .dcond_project {
    width: 320px;
  }
  .dashboard_condensed .dcond_controls {
    display: block;
    flex-grow: 1;
    text-align: right;
  }
}
/* grosse Übersicht Ende */
.datepicker {
  font-size: 1.2em;
  padding: 3px 10px;
}
.datepicker i.pointer {
  font-size: 0.8em;
}
.datepicker input[type=text] {
  width: 100px;
  border-radius: 0px;
  border: 1px solid #888;
}

.dashboard-controls {
  display: flex;
  flex-flow: row nowrap;
  gap: 20px;
  align-items: center;
  margin-bottom: 10px;
}
.dashboard-controls a.dashboard-inverter {
  width: 150px;
  font-size: 1.3em;
  border: 1px solid;
  text-align: center;
}

/* Timer Anfang */
.countdown {
  margin: 0px 10px;
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  text-align: center;
  color: rgb(50, 50, 50);
}
.countdown .countdown-number {
  font-weight: bold;
  display: inline-block;
  line-height: 20px;
}
.countdown svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}
.countdown svg circle {
  stroke-dasharray: 60px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 1px;
  stroke: rgb(50, 50, 50);
  fill: none;
}

@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 60px;
  }
}
/* Timer ENDE */
.controller-sollwert {
  max-width: 600px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 5px 20px;
}
.controller-sollwert.controller-sollwert-header {
  font-weight: bold;
}

.operator-admin .parc-access {
  display: flex;
  flex-flow: column;
  gap: 10px;
}
.operator-admin .parc-access .parcs-headline {
  font-weight: bold;
  font-size: 1.3em;
}
.operator-admin .parc-access .parcs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.operator-admin .parc-access .parcs .parc {
  font-size: 1.2em;
  cursor: pointer;
}

.pv-config.pv-config-wrapper {
  padding: 30px;
}
.pv-config .pv-config-navi {
  width: 120px;
  display: flex;
  flex-flow: column;
  gap: 10px;
  text-align: center;
  font-size: 1.2em;
  color: #444;
}
.pv-config .pv-config-navi svg {
  fill: #444;
}
.pv-config .pv-config-datenpartner {
  display: flex;
  flex-flow: row wrap;
  gap: 40px;
}

/* ANFANG inverters-10sec-v2  ---------------------------------- */
#loader {
  z-index: 2;
  display: none;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  padding: 20px;
}
#loader img {
  width: 180px;
}

.inverters_short_container {
  padding: 15px 0px 0px 10px;
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
  gap: 20px;
  height: calc(100vh - 105px);
}

.inverters_short_header {
  display: flex;
  flex-flow: column;
}

#inverters_short_wrapper {
  position: relative;
}

#inverters_short {
  position: relative;
}
#inverters_short tr td.inverter-10sec-highlight {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  font-weight: bold;
  background-color: white;
}
#inverters_short .fixed {
  position: fixed;
  top: 0px;
  background-color: white;
  z-index: 99999;
}

@media all and (min-width: 768px) {
  .inverters_short_container {
    height: calc(100vh - 50px);
  }
  .inverters_short_header {
    flex-flow: row wrap;
  }
}
.inverters-config {
  position: absolute;
  z-index: 2;
  top: 56px;
  right: 10px;
  height: calc(100% - 60px);
  left: 56px;
  display: flex;
  flex-flow: column;
  background-color: white;
  border: 3px solid lightblue;
  padding: 0px 0px 20px 0px;
  font-size: 20px;
  overflow: auto;
  font-size: 14px;
  line-height: 1;
}
.inverters-config .inverters-config-title {
  display: flex;
  flex-flow: row;
  gap: 10px;
  align-items: center;
  padding: 5px 10px;
}
.inverters-config .inverters-properties {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
}
.inverters-config .inverters-properties .inverters-properties-single {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 10px;
  padding: 15px;
  border: 1px solid #888;
}
.inverters-config .inverters-properties .inverters-properties-single .inverters-properties-single-caption {
  position: absolute;
  top: -7px;
  left: 10px;
  background-color: white;
  padding: 0px 10px;
  font-weight: bold;
}
.inverters-config .inverters-properties .inverters-properties-single .inverters-properties-single-values {
  display: flex;
  flex-flow: column;
  gap: 10px;
}
.inverters-config .inverters-properties .inverters-properties-single .inverters-properties-single-values .inverters-properties-single-value {
  display: flex;
  flex-flow: row;
  gap: 10px;
  align-items: center;
}
.inverters-config .inverters-properties .inverters-properties-single .inverters-properties-single-values .inverters-properties-single-value > span:nth-child(1) {
  width: 150px;
}

/* ENDE inverters-10sec-v2  ---------------------------------- */
/* ANFANG Alarme  ---------------------------------- */
#alarme_anzahl {
  font-style: italic;
}

.alarme {
  display: flex;
  flex-flow: column;
}
.alarme .alarme-row {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 10fr 3fr 3fr 5fr;
  padding: 2px 0px;
}
.alarme .alarme-row:nth-child(1) {
  font-size: 1.2em;
  font-weight: bold;
}
.alarme .alarme-row:nth-child(odd) {
  background-color: lightgray;
}

/* ENDE Alarme  ---------------------------------- */
/* ANFANG Channels ---------------------------------- */
.channels-available {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  min-height: 700px;
}
.channels-available .channels-panel {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.channels-available .channels-panel h2 {
  margin-top: 0;
}
.channels-available ul {
  list-style: none;
  padding: 0px 0px 50px 0px;
  min-height: 200px;
}
.channels-available ul li {
  background: #e0e0e0;
  margin: 8px 0;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: grab;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.channels-available .buttons {
  display: flex;
  gap: 10px;
}
.channels-available .buttons .edit-button {
  background: #5c5656;
  border: none;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.channels-available .buttons .delete-button {
  background: #ff4d4d;
  border: none;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.channels-available .buttons .delete-button:hover {
  background: #e60000;
}
.channels-available .channel-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 90%;
  height: 90%;
  border: 1px solid lightgray;
  overflow: auto;
}
.channels-available .channel-form .channel-form-title {
  display: flex;
  flex-flow: row nowrap;
  gap: 20px;
  background-color: lightblue;
  padding: 5px 10px;
  align-items: center;
}
.channels-available .channel-form .channel-form-title .channel-form-closer {
  cursor: pointer;
  color: red;
}
.channels-available .channel-form .channel-form-content {
  padding: 20px;
  overflow: auto;
  display: flex;
  flex-flow: column;
  gap: 20px;
  font-size: 18px;
}
.channels-available .channel-form .channel-form-content .channel-form-row {
  display: flex;
}
.channels-available .channel-form .channel-form-content .channel-form-row label {
  width: 200px;
}
.channels-available .channel-form .channel-form-content .channel-form-row input {
  width: 800px;
}
.channels-available .channel-form .channel-form-content .channel-form-row textarea {
  width: 800px;
  height: 300px;
}

#channel-dokumente {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 3 equal columns */
  gap: 1px;
}
#channel-dokumente .header {
  background-color: #333;
  color: white;
  font-weight: bold;
  padding: 10px;
}
#channel-dokumente .cell {
  background-color: #f9f9f9;
  padding: 10px;
}

/* ENDE Channels   ---------------------------------- */