/* ------------------- CSS style provided by ioBroker Adapter Creator ------------------- */
* { box-sizing: border-box; }
/*.m { overflow: initial;} /* Don't cut off dropdowns! */
/* -------------------------------------------------------------------------------------- */

/* Add your styles here */

/* Tabs menu */
.m .tabs .active { font-weight: bold;} /* Menu text bold */
.m .tabs .tab a { padding: 0 1px; } /* space of x px at beginning and end of text  */
.m .tabs .tab a:hover { border-bottom: 2px solid #46a0e9 !important; }
.m .row .col.m1 { width: 22%; } 

/* Header section fb-checkpresence Main tab*/
#header-area {margin-top: 0px; margin-bottom: 0px;} /* Header oben und unten ausrichten */
#header-area #header-logo-title {display: flex; align-items: center; }
#header-area #header-logo-title .logo {height: auto; width: 48px; float:left; margin-right: 0px; } /* Icon ausrichten */
#header-area #header-logo-title p {line-height: normal !important; margin: 0 !important; padding: 0px 0 0 0px;}
#header-area #header-logo-title p>span.h-title {font-size: 1.4em !important; } /* Titel */
#header-area #header-logo-title p>span.h-sub-title {font-size: 0.9em !important; font-style: italic; white-space: nowrap}

/* ****** collapsible sections ****** */
/* collapsible: general ****** */
.collapsible .collapsible-header { background-color: #c8e4fa69 !important; box-shadow: none!important;}
.collapsible .collapsible-header { padding-top:1px !important; padding-bottom:1px !important; }
.collapsible .collapsible-header i { padding-top:3px; } /* ? icon Ausrichtung */
.collapsible .collapsible-header h5 { font-weight: bold; font-size:1.0em; margin-top:0.3em; }

/* collapsible: Config Table Header/Documentation ****** */
.collapsible-header.config-section { background-color:#c5c1c1 !important; }
.collapsible-header.config-section i.material-icons { font-size: 1.5em; padding-right: 0; margin-right: 0;}
.collapsible-header.config-section h5 { margin-top: 10px; }
.collapsible-header.config-section h6 { padding-top: 7px; margin-top: 1px; margin-bottom: 3px; }
.collapsible-header.config-section h6 { font-weight: bold; font-size:0.9em; margin-top:5px; }
.collapsible-header.config-section { display: flex; justify-content: space-between; } /* for right alignment of question mark icon */

.collapsible .collapsible-body {margin-top: 5px; margin-right: 5px; margin-bottom: 5px; padding-top: 0px; padding-bottom: 0px; box-shadow: none!important;}
.collapsible .collapsible-body p { font-size: 0.9em; line-height: 1.0em !important; margin: 5px;}
.collapsible .collapsible-body td:nth-child(1) { width: 20%; } /* Format 1 column */
.collapsible .collapsible-body td:nth-child(2) { width: 20%; } /* Format 2 column */
.collapsible .collapsible-body td:nth-child(3) { width: 60%; } /* Format 3 column */
.collapsible .collapsible-body table.striped > tbody > tr:nth-child(odd) {background-color: rgba(201, 203, 204, 0.653);}
.collapsible .collapsible-body table {font-size: 0.8em; margin-top:0px; margin-left: 0px; }
.collapsible .collapsible-body th {background-color: #38383869; padding: 1px; margin-right: 1px;}
.collapsible .collapsible-body tr td .btn {color: #555; font-size: 0.8em; line-height: 1.9em; }
.collapsible .collapsible-body tr td .button .btn text {vertical-align: middle;} 

/* link behaviour */
.page a:hover {font-weight:bold !important; color:#2696ef !important; text-decoration: underline !important; } /* mouse over link */
.page a:link {font-weight:bold !important; color:#061ce5; text-decoration: none;} /* unvisited link */
.page a:visited {color:#b020f2; text-decoration: none;} /* visited link */
.page a:active {font-weight:bold; color: #2696ef !important; text-decoration: underline;} /* selected link */

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

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
   visibility: visible; opacity: 1; 
}

/* Tooltip text */
.tooltip .tooltiptext {
   visibility: hidden;
   text-align: left;
   width: auto;
   height: auto;
   background-color: #777;
   color: #fff;
   border-radius: 4px;
   max-width: 90vw;
   word-wrap: break-word;
   white-space: normal;
   z-index: 1;
   opacity: 0;
   transition: opacity 1s; /* Fade in tooltip */
   position: absolute;
   padding: 5px;
   font-size: 0.9rem;
   left: 4%; /* Position direkt über der Checkbox */
}

@media (max-width: 600px) {
   .tooltip .tooltiptext {
      padding: 3px;
      font-size: 0.8rem;
   }
}

/* Checkbox-spezifische Tooltips */
.tooltip.checkbox-tooltip .tooltiptext {
   bottom: calc(100% + 10px);
}

/* Textfeld-spezifische Tooltips */
.tooltip.textfield-tooltip .tooltiptext {
   bottom: calc(100% + 20px);
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
   content: " ";
   position: absolute;
   top: 100%; /* Pfeil wird unter dem Tooltip platziert */
   left: 10%; /* Horizontale Ausrichtung */
   margin-left: -5px; /* Zentriert den Pfeil */
   border-width: 7px; /* Größe des Pfeils */
   border-style: solid;
   border-color: #777 transparent transparent transparent; /* Sichtbare obere Seite */
}

/* Input validation for admin configuration */
input:invalid {border: red solid 3px;}
input:valid {border: rgb(0, 255, 21) solid 3px;}

#buttonaddwl {
   margin-left: 20px; /* Kein zusätzlicher Abstand */
   margin-top: 2px;
}

/* Admin Tabelle Familienmitglieder */
table.wladmin tr td:nth-child(2) input,
table.fmadmin tr td:nth-child(3) input { font-weight:bold; }

/* Dialogboxes family members and whitelist devices */
/* ------------------------------------------------ */

/* Error dialog box*/
.dlgErrorTitle {
   border: 1px solid #d46e29; /* Umrandung passend zur Schriftfarbe */
   border-radius: 5px; /* Abgerundete Ecken */
   padding: 10px; /* Innenabstand für eine Box-Optik */
   font-size: 1rem; /* Textgröße */
   margin: 6px !important; /* Kein zusätzlicher Abstand */
   text-align: center; /* Zentrierter Text */
}
.dlgErrorText {margin:30px 0px 10px 10px; font-size:1.2em; text-align: center;}

/* Devices dialog box                               */
/*--------------------------------------------------*/
#tabDevices, #tabWl {overflow-y: hidden!important; width:100%}
#tabDevices tr td, #tabWl tr td {text-align:left; padding-left: 10px;}
#tabDevices tr, #tabWl tr {line-height: 6px!important; font-size:90%;padding:0px!important}

/*  Dialog box devices & whitelist */
.dlgTitle {
   border: 1px solid #0c29e9; 
   border-radius: 5px; 
   padding: 6px!important;
   font-size: 0.8em; 
   margin: 6px!important; 
}

/* Dialog box footer */
.btnDlg {color: white !important; margin-right: 5px!important; } 

/* Search text field */
input.searchInput { padding-left: 1px; width: 200px !important; margin:0 0 0 25px !important;  height: 2.0rem !important;}
.input-field { position: relative;}
#searchIcon {
   display: block; /* Blockelement für einfache Zentrierung */
   margin: 0 auto; /* Horizontal zentrieren */
   font-size: 1.9rem;
   color: #555;
   position: absolute; /* Absolute Positionierung */
   top: 50%; /* Vertikal zentriert relativ zum Container */
   transform: translateY(-50%); /* Exakte Zentrierung */
   left: 10px; /* Abstand vom linken Rand */
}

/* Search x button */
#btnResetSearchWl,
#btnResetSearch { left: 250px; width: 1.6em !important; height: 1.6em !important;}
#btnResetSearchWl i,
#btnResetSearch i {font-size: .9rem !important; line-height: 1rem !important;}

/* Table Content */
#dlgDevices .modal-content,
#dlgWl .modal-content {margin: 0px 0px 0px 5px; padding:0px; height: calc(85% - 140px)!important }

#dlgWl .modal-footer,
#dlgDevices .modal-footer {
   padding:10px;
}

table.fm {width:94%; margin-top:0px; }
table.fm tr.header { background-color:#b6b6b6; color: white; font-size:90%; text-align:left; line-height: 1em; padding:5px!important; }
table.fm th.header { padding:0px!important; text-align:left; margin: 5px 0px 0px 6px;}
table.fm tr td { font-size: 90%!important; height: 0.9em!important; margin-top:5px!important}
table.fm tr td:nth-child(3) input { font-weight:bold; }

table.fm th:nth-child(1) { width: 5%; }
table.fm td:nth-child(1) { width: 5%; }
table.fm tr th:nth-child(2) { width: 35%; }
table.fm tr td:nth-child(2) { width: 35%; }
table.fm tr th:nth-child(3) { width: 30%; }
table.fm tr td:nth-child(3) { width: 30%; }
table.fm tr th:nth-child(4) { width: 30%; }
table.fm tr td:nth-child(4) { width: 30%; }

table.wl {width:94%; margin-top:0px; }
table.wl tr.header { background-color:#b6b6b6; color: white; font-size:90%; text-align:left; line-height: 1em; padding:5px!important; }
table.wl th.header { padding: 0px 0 0 10px!important; text-align:left; margin: 5px 0px 0px 6px;}
table.wl tr td { font-size: 90%!important; height: 0.9em!important; margin-top:5px!important}
table.wl tr td:nth-child(3) input { font-weight:bold; }

table.wl th:nth-child(1) { width: 5%; }
table.wl td:nth-child(1) { width: 5%; }
table.wl tr th:nth-child(2) { width: 55%; }
table.wl tr td:nth-child(2) { width: 55%; }
table.wl tr th:nth-child(3) { width: 40%; }
table.wl tr td:nth-child(3) { width: 40%; }