/* typo3\typo3conf\ext\eks_mapapp\Resources\Private\Partials\Solar\Dach\Show.html */
/* ######################## Meine Kommune ######################## */

.row.wrapper-table-minimap > .input-wrapper {
  z-index: 1;
}

.mein-dach-details-map {
  display: block;
  width: 100%;
  height: 400px;
}

.mein-dach-reihe-teilflaechen > tr.odd {
  background-color: #f4f4f4;
}
.mein-dach-reihe-teilflaechen td {
  text-align: end;
}

.mein-dach-reihe-teilflaechen > tr.disabled {
  color: #bbb;
}

.mein-dach-details-hinweis-texte {
  font-size: 0.9rem;
}

.mein-dach-teilflaeche_verschattung,
.mein-dach-teilflaeche_eignung_S {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

#btnSolarDetail1Rechner {
  background-color: var(--color-primary);
  color: white;

  &:hover {
    background-color: var(--color-blue-dark);
  }
}

#wirtschaftlichkeitRechnerLoader {
  margin-top: 3rem;
  display: none;
  justify-content: center;
}

#wirtschaftlichkeitRechnerLoader .spinner-border {
  font-size: 2rem;
  height: 5rem;
  width: 5rem;
}

#wirtschaftlichkeitRechner,
#wirtschaftlichkeitRechnerError,
#mein-dach-details-text-Flachdach {
  display: none;
}

#wirtschaftlichkeit .teilflaechen tr th {
  text-align: end;
}

#wirtschaftlichkeit .main-table tr td:nth-child(2),
#wirtschaftlichkeit .table-wirtschaftlichkeitRechner tr td:nth-child(2),
#wirtschaftlichkeit input {
  text-align: right;
}
#wirtschaftlichkeit .main-table tr th:nth-child(3),
#wirtschaftlichkeit .table-wirtschaftlichkeitRechner tr th:nth-child(3) {
  width: 5rem;
}
#wirtschaftlichkeit .table td {
  vertical-align: middle;
}
#wirtschaftlichkeit .table input {
  line-height: 0;
  border-color: var(--color-grey-light);
  text-align: right;
  width: 6rem;
}

.print-chart-wrapper-wirtschaftlichkeit {
  width: 200mm !important;
}

#wirtschaftlichkeitRechner .chart-wrapper {
  height: 250px;
}

/* typo3\typo3conf\ext\eks_mapapp\Resources\Private\Partials\Solar\Report\Pages.html */
/* ######################### Solarbericht ######################### */

/*#solarbericht {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 5rem;*/
/*}*/

#solarbericht .title {
  border-bottom: 2px solid var(--color-primary);
  font-size: 2rem;
  margin-bottom: 2rem;
}

#solarbericht .table-title {
  margin-bottom: 1rem;
}

#solarbericht .row-bg {
  background-color: rgb(207, 207, 207);
}

#solarbericht .spacer-cell {
  height: 2rem;
}

#solarbericht .cell-indent {
  text-indent: 1rem;
}

#solarbericht .bold {
  font-weight: bold;
}

#solarbericht table tr:first-of-type > td {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  text-align: right;
}

#solarbericht .table-section {
  margin-bottom: 4rem;
}

#solarbericht .layout-table-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
}

#solarbericht .chart {
  position: relative;
}

#solarbericht .chart.bar canvas {
  width: 370px;
}

#solarbericht .chart.pie canvas {
  width: 225px;
}

#solarbericht #chart-zusammenfassung-1,
#solarbericht #chart-zusammenfassung-3 {
  width: 250px;
  height: 150px;
}
#solarbericht #chart-zusammenfassung-2,
#solarbericht #chart-potenzial-pv-dach-1,
#solarbericht #chart-potenzial-pv-dach-2,
#solarbericht #chart-potenzial-pv-dach-3 {
  width: 150px;
}

#solarbericht .chart-legend-wrapper {
  display: none;
  width: 30vw;
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;
}

#solarbericht .chart-legend-wrapper:has(.bar) {
  gap: 1.5rem;
}

#solarbericht .chart-container {
  display: block;
  max-width: 200px;
}

#solarbericht .chart-legend-heading {
  font-size: 0.8rem;
  color: var(--color-primary);
  font-style: italic;
  margin-bottom: 0.5rem;
}

#solarbericht .chart-two-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  row-gap: 0.3rem;
  column-gap: 1rem;
  line-height: 18px;
}

#solarbericht .chart-legend-item {
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #787878;
}

#solarbericht .legend-topper {
  width: 100%;
  border-bottom: 0.5px solid lightgray;
  font-style: italic;
}

#solarbericht .chart-legend-square-1,
#solarbericht .chart-legend-square-2,
#solarbericht .chart-legend-square-3,
#solarbericht .chart-legend-square-4,
#solarbericht .chart-legend-square-5 {
  width: 15px;
  height: 15px;
}

#solarbericht .chart-legend-square-1 {
  background-color: #1464a0;
}
#solarbericht .chart-legend-square-2 {
  background-color: #517eb4;
}
#solarbericht .chart-legend-square-3 {
  background-color: #8da5cd;
}
#solarbericht .chart-legend-square-4 {
  background-color: #c6d0e6;
}
#solarbericht .chart-legend-square-5 {
  background-color: #e8ebf5;
}

#solarbericht #source table td {
  text-align: start;
}

@media screen and (min-width: 768px) {
  #solarbericht .chart-legend-wrapper {
    display: flex;
  }
}

@media print {
  .solarDetail1 tr input {
    border-bottom: unset;
  }
}

@media (max-width: 1000px) {
  #wirtschaftlichkeit .mein-dach-details-map ,
  #wirtschaftlichkeit .mein-dach-details-map canvas {
    width: 200px;
    height: 200px;
  }
}