/*style.css merge*/
.main-content {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

button {
	cursor: pointer;
}

#customer-logo {
}

#eniano-logo {
	/*z-index: 1;
	position: fixed;
	bottom: 10px;
	left: 10px;
	background-image: url("/static/explore/img/ENIANO_Logo_weiss_cut_schatten.svg");
	width: 162px;
	height: 60px;
	background-size: 100%;
	background-repeat: no-repeat;*/
}

/* ------------------ Appmenu ------------------*/

/*#appmenu {
	z-index: 10;
	color: #00377B;
	position: fixed;
	left: 10px;
	top: 10px;
}*/

.applist h3 {
	margin: 0;
	
}

.ui-accordion-header i {
	margin-right: 10px;
}

.applist {
	border-collapse: collapse;
	cursor: pointer;
}

.applist tr {
	border-bottom: 1px solid #00377B;
}

.applist td {
	padding: 5px 0;
}

.applist tbody > tr:last-child {
	border: 0;
}

/* Appmenu Icon column */
.applist td:nth-child(1) {
	font-size: 1.5em;
	width: 40px;
	text-align: center;
}

.applist h4 {
	margin: 0;
}

.applist p {
	margin:0;
	font-size: 0.75em;
}

.ui-accordion-content {
	padding: 0.5em !important;
}

.active {
	color: #EE7F00 !important;
	fill: #EE7F00 !important;
}

button.active > svg {
	fill: #EE7F00 !important;
}

/* ------------------ Dialog ------------------ */

/*.dialog .row {
	display: flex;
}*/

.ui-dialog {
	background: #F2F2F2;
  margin: auto;
  position: fixed;

  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.no-close .ui-dialog-titlebar-close {display: none }

.dialog #text-col {
	flex: 60%;
}

.dialog #image-col {
	flex: 40%;
}

/*.dialog #news-image {
	width: 100%;
	height: 70%;
	margin-top: 15px;
	background-image: url("https://ddi-dev.com/uploads/media/news/0001/02/9058ee53ea49fc5f3ab041148c6634d221eee390.jpeg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	border: 5px solid white;
	border-radius: 2px;
}*/

/*.dialog #news-text {
	width: 100%;
	background-color: white;
	margin-top: 20px;
	color: black;
	border: 1px solid #00377B;
	border-radius: 2px;
} */

/*.dialog #news-text p {
	text-align: center;
	padding: 5px;
	margin: 0;
}*/

.dialog-tool {
	position: fixed;
	z-index: 10;
	left: 10px;
	bottom: 200px;
}

/*.dialog h3 {
	margin: 15px 0;
}*/

.dialog h3, li::marker {
	color: black;
}

.dialog ul {
	list-style-type: square;
}

.ui-dialog-title {
	text-align: center;
	color: white;
}


/* ------------------ Tools ------------------ */


#app-tools h3 {
	/*margin-top: 5px;
	margin-bottom: 10px;*/
}

.app-tool-button {
	/*color: #00377B;
	background-color: white;
	width: 50px;
	height: 50px;
	font-size: 1.5em;
	border: 2px solid #00377B;
	border: none;
	display: block;
	margin-bottom: 5px;*/
}

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptextBottomleft {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptextBottomleft::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 80%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Tooltip text */
.tooltip .tooltiptextTopleft {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -100px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptextTopleft::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 80%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

/* Tooltip text */
.tooltip .tooltiptextLeft {
  visibility: hidden;
  width: 180px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 2px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  margin-left: -185px;
  transform: translate(0, -50%);  
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptextLeft::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: 100%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #555;
}

/* Tooltip text */
.tooltip .tooltiptextRight {
  visibility: hidden;
  width: 180px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 2px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  margin-right: -185px;
  transform: translate(0, -50%);  
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptextRight::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: 100%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #555 transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptextBottomleft, .tooltip:hover .tooltiptextTopleft, 
.tooltip:hover .tooltiptextLeft, .tooltip:hover .tooltiptextRight {
  visibility: visible;
  opacity: 1;
}


/* Solar Module details */
.solar-details-st .solar-details-pv-only,
.solar-details-pv .solar-details-st-only {
    display: none;
}

.toggle{
	position: relative;
	bottom:0;
	left:0;
	width:40px;
	height:21px;
	background: #00377b;
	border-radius:30px;
	transition:0.3s;
}
.toggle .toggle-button{
	bottom:1px;
	position: relative;
	left:20px;
	width:15px;
	height:15px;
	background:white;
	border-radius:50%;
	cursor: pointer;
	transition:0.3s;
}
.toggle.toggle_active{
background-color:rgb(182, 178, 178) ;
}
.toggle.toggle_active .toggle-button{
	left:4px;
	
}