.layout-container.main {
  width: 97%;


  display: grid;
  grid:
    "sidebar body" 1fr
    / auto 1fr;
  gap: 8px;
}

#sidebar_first { grid-area: sidebar; }  
#main_content { grid-area: body; }


#sidebar_first {
  width: 200px; 
}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons {

width:auto!important;
margin:0px 10%;
}


/* CUSTOM CSS FOR DASHBOARD */

.influxdb-data {
font-size: 10px;
}
.influxdb-data td {
height: 10px; 
}
.influxdb-data tr {
background-color: #e9e8e8;
}

.chartjs-size-monitor canvas {
width: 400px;
height:200px;
}

.path-dashboard .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.path-dashboard .views-row:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.path-dashboard .views-row {
  margin-top: 0px !important;
  border: solid 1px #e9e8e8;
  border-radius: 10px;
  width: 300px; 
  margin-left: 20px;
  margin-bottom: 28px;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    animation-duration: 300ms;
}

/*

.path-dashboard button {
border-radius: 10px;
position: relative;
margin: 20px auto;
padding: 0;
font-size: 22px;
text-align: center;
color: gray;
border: none;
outline: none;
cursor: pointer;
overflow: hidden;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 0.4s ease-in-out;
background: none;
height: 35px;
width: 35px;
border-radius: 50px;
}
.path-dashboard button:hover {
background: #e9e8e8; 
}
*/

.path-dashboard button:active {
top: 1px;
box-shadow: none;
}

.view-header {
  margin: 20px; 
}

.path-dashboard .btn-green {
  height: 35px;
  width: 35px;
  background-color: #e9e8e8;
  border-radius: 50px;
}

.path-dashboard .btn-green img {
width: 24px;
height: 24px;
transition: all 0.4s ease-in-out;
padding: 5px;
}
.path-dashboard .btn-green:hover img {
transform: rotate(360deg) scale(1.2);
}


.path-dashboard .views-field-title {
width: 44%;
display: inline-flex;
text-align: center;
cursor: pointer;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 5px;
padding-bottom: 5px;
font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
font-size: 1.125rem;
line-height: 1.75rem;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
transition-timing-function: cubic-bezier(0.4,0,0.2,1);
transition-duration: 200ms;
animation-duration: 200ms;
background-color: #e9e8e8;
border-radius: 10px;
margin: 0 auto;
}

.path-dashboard .views-field-title .field-content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.path-dashboard .views-field-title .field-content a{
font-size: 11px; 
}
.path-dashboard .views-field-title:hover{
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
transition: 0.2s;
}
.path-dashboard canvas {
margin-top: 20px;
}


.path-dashboard.dark-mode .views-field-title a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
}
.path-dashboard .views-field-title a {
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 19px;
}



/* SWITCH */ 

.path-dashboard .switch {
position: relative;
display: inline-block;
width: 41px;
height: 34px;
}

.path-dashboard .switch input {
opacity: 0;
width: 0;
height: 0;
}


.socket-button {
  background-color: #e9e8e8;
  border-radius: 10px;
  display: inline-flex;
  padding: 8px;
  height: 30px;
  width: 68px;
  padding-bottom: 5px;
  padding-top: 0px;
  margin: 9px;
}
  
  
.socket-icon {
  justify-content: space-between;
  display: flex;
  text-align: center;
  margin: 0 auto;
  margin-right: 8px;
  margin-top: 9px;
  color: #333; 
}

.power-button {
  background-color:  #d8d8d8;
  border-radius: 25px; /* Halbiert, um Proportionen beizubehalten */
  display: inline-flex;
  width: 29%;
  height: 37px;
  margin: 0 auto;
  margin: 15px;
}

.page-node-type-device .power-button {
  background-color:  #d8d8d8;
  border-radius: 25px; /* Halbiert, um Proportionen beizubehalten */
  display: inline-flex;
  width: 6%;
  height: 37px;
  margin: 0 auto;
  margin: 15px;
}

.power-icon {
  justify-content: space-between;
  display: flex;
  text-align: center;
  margin: 0 auto;
  margin-right: 8px;
  margin-top: 9px;
  color: white;
}

.path-dashboard .slider.round {
  border-radius: 20px; /* Angepasste Rundung für kleinere Größe */
}

.path-dashboard .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bababa;
  -webkit-transition: .4s;
  transition: .4s;
  height: 20px; /* Kleinere Höhe */
  width: 40px; /* Kleinere Breite */
}

.path-dashboard .socket-button .slider {
  background-color: #b7b7b7;
}

.path-dashboard .slider::before {
  position: absolute;
  content: "";
  height: 14px; /* Angepasste Höhe */
  width: 14px; /* Angepasste Breite */
  left: 3px; /* Angepasste Position */
  bottom: 3px; /* Angepasste Position */
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.path-dashboard .slider.round::before {
  border-radius: 50%;
}

.path-dashboard input:checked + .slider {
  background-color: #40B17B;
}

.path-dashboard input:checked + .slider:before {
  -webkit-transform: translateX(16px); /* Angepasste Verschiebung */
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* SWICHT DEVICE-PAGE */ 

.page-node-type-device .switch {
  position: relative;
  display: inline-block;
  width: 41px;
  height: 34px;
}

.page-node-type-device .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.page-node-type-device .slider.round {
  border-radius: 20px; /* Angepasste Rundung für kleinere Größe */
}

.page-node-type-device .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bababa;
  -webkit-transition: .4s;
  transition: .4s;
  height: 20px; /* Kleinere Höhe */
  width: 40px; /* Kleinere Breite */
}

.page-node-type-device .socket-button .slider {
  background-color: #b7b7b7;
}

.page-node-type-device .slider::before {
  position: absolute;
  content: "";
  height: 14px; /* Angepasste Höhe */
  width: 14px; /* Angepasste Breite */
  left: 3px; /* Angepasste Position */
  bottom: 3px; /* Angepasste Position */
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.page-node-type-device .slider.round::before {
  border-radius: 50%;
}

.page-node-type-device input:checked + .slider {
  background-color: #40B17B;
}

.page-node-type-device input:checked + .slider:before {
  -webkit-transform: translateX(16px); /* Angepasste Verschiebung */
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}



.device-status-flex {
  display: flex;
  align-items: center; /* Vertikale Zentrierung */
  justify-content: space-between; /* Platz zwischen den Elementen */
  gap: 10px; /* Optionale Lücke zwischen den Elementen */
}

.device-status-container {
position: relative;
width: 32px; /* Setze die Größe der Icons */
height: 32px; /* Setze die Größe der Icons */
display: flex;
align-items: center; /* Zentriere SVG-Icons vertikal */
}

.device-status-icon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}

/* Standardmäßig beide Icons ausblenden */
.device-status-icon {
display: none;
}

.device-status-icon.hide {
display: none;
}

.device-status-icon:not(.hide) {
display: block;
}





.switch-container {
display: flex;
justify-content: space-between;
gap: 1.5rem;
text-align: center;
margin: 0 auto;
margin-left: 0;
margin-top: 8px;
}

.online-icon {
color: rgb(201, 97, 97); 
}
.offline-icon {
color: #2eb82e; 

}

/* HEADER */ 
header .region-header .page-title {
  color: black;
  width: calc(100% - 200px);
  padding-bottom: 0;
  text-transform: uppercase;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 18px;
  margin-left: 15px;
}


/* SIDEBAR */ 

.region-sidebar-first {
  border-right: solid 1px #e9e8e8;
  padding-right: 10px;
}

#block-nttdata-admin-redakteurmenu {
  font-size: .875rem;
}
#block-nttdata-admin-hauptnavigation {
  font-size: .875rem;
}

#block-nttdata-admin-redakteurmenu .is-active {
  color: #2eb82e;
}
#block-nttdata-admin-hauptnavigation .is-active {
  color: #2eb82e;
}

#block-nttdata-admin-redakteurmenu ul li:hover {
  background-color:#e9e8e8 ;
  border-radius: 10px;
}
#block-nttdata-admin-hauptnavigation ul li:hover {
  background-color:#e9e8e8 ;
  border-radius: 10px;
}

#block-nttdata-admin-redakteurmenu ul li {
  list-style: none;
  padding: 6px;
}
#block-nttdata-admin-hauptnavigation ul li {
  list-style: none;
  padding: 6px;
}

#block-nttdata-admin-redakteurmenu ul li a {
  text-decoration: none;
  color: black; 
}
#block-nttdata-admin-hauptnavigation ul li a {
  text-decoration: none;
  color: black; 
}

#block-nttdata-admin-redakteurmenu-menu {
  font-size: 12pt;
  margin: 20px;
}


/* CUSTOM CSS for MEINE GERÄTE */

.path-my .refresh-button{
  display: none;

}
.path-my .view-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.path-my .views-row:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.path-my .views-row {
  margin-top: 0px !important;
  border: solid 1px #e9e8e8;
  border-radius: 10px;
  width: 300px; 
  padding: 10px; 
  margin-left: 20px;
  margin-bottom: 28px;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    animation-duration: 300ms;
}


.page-node-type-device #main_content {
  margin-top: 0px !important;
  border: solid 1px #e9e8e8;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 28px;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  animation-duration: 300ms;
}

.device-status {
  font-size: 14px;
  margin-top: 5px;
  font-weight: bold;
}

.device-status.online {
  color: green;
}

.device-status.offline {
  color: red;
}

.dropbtn {
  background-color: #e9e8e8;
  color: black;
  padding: 9px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  border-radius: 23px;
  height: 37px;
}

.socket-dropdown {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 45px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 60px;
  max-height: 141px;
  overflow-y: auto; /* Scrollen aktivieren */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 13px 23px;
  text-decoration: none;
  display: block;
  font-size: 12px;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.socket-dropdown:hover .dropdown-content {
  display: block;
}

.socket-dropdown:hover .dropbtn {
  background-color: #b7b7b7;
  border-radius: 20px 20px 0px 0px;
}

.device-on-off {
  display: inline-block; 
  height: 30px; 
  width: 30px; 
  margin-left: 15px;
}
.fillstate {
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-right: 15px;
  float: right;
}

.filter-green {
  filter: brightness(0) saturate(100%) invert(50%) sepia(17%) saturate(4716%) hue-rotate(84deg) brightness(109%) contrast(71%);
}

.filter-red {
  filter: brightness(0) saturate(100%) invert(38%) sepia(38%) saturate(6422%) hue-rotate(342deg) brightness(102%) contrast(96%);
}

.filter-gray {
  filter: brightness(0) saturate(100%) invert(93%) sepia(0%) saturate(1%) hue-rotate(18deg) brightness(85%) contrast(88%);
}

.filter-blue {
  filter: brightness(0) saturate(100%) invert(36%) sepia(78%) saturate(4604%) hue-rotate(199deg) brightness(106%) contrast(104%);
}
.filter-black {
  filter: brightness(0) saturate(100%) invert(0%) sepia(87%) saturate(7448%) hue-rotate(135deg) brightness(105%) contrast(111%);
  height: 39px;
  width: 39px;
  display: inline-block;
  margin-top: 7px;
}

.intervall-dropdown {
  display: inline-block;
}

.path-dashboard .device-name {
  text-align: center;
  text-transform: uppercase;
  background: #e9e8e8;
  width: 50%;
  margin: 14px auto;
  border-radius: 7px;
  height: 30px;
}

.device-name {
  text-align: center;
  text-transform: uppercase;
  background: #e9e8e8;
  width: 12%;
  margin: 14px auto;
  border-radius: 7px;
  height: 30px;
}

.socket-content {
  margin-top: -24px; 
  display: grid;
  grid-template-columns: repeat(2, 2fr 1fr 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 7px;
  margin-left: 17%;

}

.socket-content label {
  height: 30px; 
  width: 30px; 
}
.socket-content select {
  height: 30px; 
  margin-top: 11px; 
}

.top-interaction {
  display: flex;
  justify-content: space-between;
}

.page-node-type-device .container {
  margin: 30px; 
}
.page-node-type-device .container svg {
  margin-left: 15px;
  margin-right: 8px;
}

.download-pdf {
  background: none;
  border: solid 2px #e9e8e8;;
  border-radius: 10px;
  height: 50px;
  width: 180px;
}
.download-pdf:hover {
  background-color: #e9e8e8;
}

.back-db {
  border: none;
  height: 50px;
  width: 200px;
  text-decoration: none;
  color: black;
}
.back-db:hover {
  color: white; 
  border-radius: 10px;
  background-color: #333;
}

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

.page-node-type-device .container #chartCanvas_ {
  display: none;
}
.page-node-type-device .container canvas {
  margin: 0 auto; 
  background: #e9e8e8;
  border-radius: 10px;
}
.page-node-type-device .container canvas:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.chart-grid {
  display: flex;          /* Aktiviert das Flexbox-Layout */
  flex-wrap: nowrap;      /* Verhindert Umbruch, sodass alle in einer Zeile bleiben */
  justify-content: space-between;  /* Verteilt den Platz zwischen den Elementen */
  align-items: center;    /* Zentriert sie vertikal (optional) */
  gap: 1rem;  
}

.chart-container,
.chart-container-temp-in-out,
.chart-container-powerlevel,
.chart-container-cond-evap {
  flex: 1 1 0;            /* Sorgt für eine gleichmäßige Verteilung */
  min-width: 200px;       /* Legt eine Mindestbreite fest, damit sie nicht zu klein werden */
  box-sizing: border-box; /* Verhindert, dass Padding/Margin die Breite „aufbläht“ */
}

#chartCanvasTIO_,
#chartCanvasPW_,
#chartCanvasCE_ {
  display: none; 
}

.chart-title {
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  font-size: 11pt;
  margin: 10px; 
}

/* Für die gesamte Tabelle */
.data-table {
  /* Sofern du willst, dass die Tabelle sich anpasst */
  width: 100%;
  
  /* Verhindert, dass Table-Borders zusammengeschoben werden */
  border-collapse: separate;
  border-spacing: 0;

  /* Optional: dezenter Schatten für „Karten“-Effekt */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Abgerundete Ecken */
  border-radius: 8px;
  overflow: hidden;

  /* Apple-/Systemschrift für macOS / iOS */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 12px;
  color: #333;
}

/* Tabellen-Kopfzeile */

.data-table th {
  background: #e9e8e8;
}

.data-table thead {
  background-color: #f9f9f9;
  border-bottom: 1px solid #ddd;
}

/* Spaltenüberschriften */
.data-table thead th {
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  color: #555;
}

/* Tabellenzellen im Body */
.data-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  height: 20px; 
}

/* Entfernt die Border beim letzten Eintrag */
.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Hover-Effekt auf Zeilen */
.data-table tbody tr:hover {
  background-color: #fafafa;
}

.detail-main-content {
  width: 100%;
  display: flex;
  gap: 16px;

}
.table-container { 
  flex-grow: 1; 
}
.history { 
  flex-grow: 9; 
  margin-block: var(--space-l);
  background-color: #e9e8e8; 
  border: solid 1px red; 
  border-radius: 8px;
}

.header-interaction {
  display: flex;
  justify-content: flex-start;
}

table.views-table {hyphens: manual;}