.comyli {
    display: flex;
    flex-wrap: nowrap;         /* verhindert Umbruch */
    overflow-x: visible;       /* erlaubt horizontales Scrollen, wenn nötig */
	position: relative;
}
.comyli section {
    padding: 1rem;
}
.comyli input { color: black; }
.comyli select { padding: 2px; }

.comyli .td {font-family: sans-serif;}
.comyli .table, .comyli .tr, .comyli .td {border-collapse:collapse; border: 0px; margin: 0px; border-spacing:0px;}
.comyli .table {display: table;table-layout: auto;width: max-content}
.comyli .tr {display:table-row;}
.comyli .td {display:table-cell; vertical-align: middle; min-width:50px; border-right:1px solid #CCC;position: relative;}
.comyli .td:first-of-type {border-left:1px solid #CCC;}

/* Resize */
.comyli .column-resize-handle {
    position: absolute;
    top: 0;
    right: -5px; /* Halb überlappend mit der Grenze */
    width: 10px; /* Breite für den Klickbereich */
    height: 100%;
    cursor: col-resize; /* Zeigt an, dass die Spalte größenverstellbar ist */
    z-index: 1; /* Stellt sicher, dass er über dem Inhalt liegt */
    /* background: rgba(0, 0, 0, 0.1); /* Optional: Zum Debuggen sichtbar machen */
}

.comyli .table.select {border: 0px; border-collapse: collapse;}
.comyli .table.select input {
	border: 1px solid #999;
	height:22px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	border-radius: 4px;
}
.comyli .table.select > .tr > .td {vertical-align:top;}

.comyli .tr:nth-child(even),.tr:nth-child(even) > .td > input {background-color: #ddd;}
.comyli .tr:nth-child(2), .tr:nth-child(2) > .td > input {background-color: white;}
.comyli .tr:nth-child(4), .tr:nth-child(4) > .td > input {background-color: white; border:0;}

.comyli .volltextsuche {position:relative;}
.comyli .volltextsuche > input {position:absolute; top:0px; width: 440px; background-color: white;}
.comyli .seitenListe {position:relative; height: 32px;}
.comyli .seitenListe > div:not(.column-resize-handle) {position:absolute; top:0px; width: 520px; background-color: white;}
#saveOnLeaveLine:checked {margin-left:15px; outline: 1px solid red;}
.comyli .table.select > .tr > .td > [type="submit"],
.comyli form input[name="sql"] + [type="submit"] {
	background-color: #ddd;
	padding: 2px;
	border: 1px solid grey;
	box-shadow: 2px 2px 5px grey;
}
.comyli .table.select > .tr > .td > input[form="fsp"][type="submit"].filter {
	width: fit-content;
}
	.comyli .cleanFilter {margin-left: 0;}

.comyli .blob span {height: 100%; line-height: 100%;}
.comyli .blob img {vertical-align:top;}
.comyli .selectInfo {font-size: 66%; color: grey; float:right;}
.comyli .textarea {position:relative;vertical-align:top;min-width:100px;}
.comyli .textarea textarea {width:100%; height:2em; padding: 2px; min-width: 120px;}
.comyli .textarea textarea.open {position:absolute;width:200px;height:80px;z-index:10;}

.comyli .filter {
	width:100%;
	padding-left: 15px;
}
.comyli .limit, .comyli .page {max-width:100px;}
.filterHelper {
	display: none;
	position: absolute;
}
.filterHelper > input{
	margin-top: -22px;
}
.filterHelper > input:nth-child(1) {
	width: 50px;
}
.filterHelper > input:nth-child(2) {
	width: 100px;
}
/*.filterHelper.open {display: inline-block;}*/
.filterCell {
	position: relative;
}
.filterCell > a {
	position: absolute;
	left: 2px;
}

.grey, .grey input, .grey select {background: #CCC;}
a {text-decoration:none;}
	
.comyli .btnAdd {}
.comyli .btnSave {color: green;}
.comyli .btnDel {color: red;}

.colNamesWrap {
	position:relative;
	height:30px;
	vertical-align:top;
}
.colnames {
	position:absolute;
	height: 30px;
	overflow:hidden;
	background: #eaeaea;
	z-index:1;
	padding:5px;
	border: 1px solid black;
	font-weight: bold;
	width: 100%;
	font-size: 120%;
	box-shadow: 2px 2px 5px grey;
}
.sticky .colnames {
	position:fixed;
	top: 32px; /* Höhe der Admin-Leiste */
	width: unset;
	z-index: 9999; /* über anderen Inhalten */
}
.colnames:hover {overflow:visible;z-index:10;}



#toast{
	visibility: hidden; /* Hidden by default. Visible on click */
	opacity:0;
	min-width: 250px; /* Set a default minimum width */
	margin-left: -125px; /* Divide value of min-width by 2 */
	background-color: #333; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 2px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 30px; /* 30px from the bottom */
	transition: 0.5s;
}
#toast.open {
	visibility: visible; /* Show the snackbar */
	opacity:1;
}

.SQLbox {display:none;position:absolute;border:1px solid black;background:beige;z-index:15;margin-left:10px;}
.SQLbox.open {display:block;}
.SQLbox > form {margin:0;}
.SQLbox > form > a {float:right;}
.SQLbox > form > div {margin:0; height: 300px; width: 600px; resize: both; overflow: auto; padding-bottom:10px;}
.SQLbox .ace_editor {margin:0; height: 100%; width: 100%; }

/*Date infinite*/
.dateInfinite {
	display:none;
	position:absolute;
	background: white;
	border: 1px solid grey;
}
input:hover + .dateInfinite,
.dateInfinite:hover {
	display: block;
}
	

@media print {
	.colnames {position: static;}
	
	.table > .menu,
	.table > .tr > .td:nth-of-type(1),
	.table > .tr.formAdd,
	.table .colnames > a,
	.no-print
		{display: none;}
	.colnames {background: white; border: 0px; text-decoration: underline;}
	.table > .tr > .td input {border: 0px;}
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip:hover::after {
  content: attr(title);
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}