// Stylesheet gehoert zu https://pun2.tichu.one/filter_table.js

hallo {          // die erste Regel (body) wird in meinem Firefox ignoriert
	velo: gugus;
}

a {
    text-decoration: none !important;
}

html {
	background-color: #f0f0f0;
}
body {
	margin-left: auto;
	margin-right: auto;
	background-color: #f0f0f0;
}
.modal {
    display: none; /* Modal ist versteckt */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Halbtransparent */
}
.p-body-inner .modal {
	top: 3em;
}

.modal-content {
    position: relative;
    margin: 6em auto 2% 2%;
    padding: 1em;
    background-color: white;
    width: 26em;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2em;
    cursor: pointer;
}

#column_setup th,
#column_setup td {
	width: 3em;
	text-align: center;
}
#column_setup td.column_name,
#column_setup th.column_name {
	width: 8em;
	text-align: left;
}
#column_setup td.set_filter {
	width: 2em;
	text-align: right;
}
#column_setup td.clear_filter {
	width: 2em;
	text-align: center;
	cursor: pointer;
	font-size: 70%;
}
#filter_modal select {
	width: 6em;
	height: 2em;
	display: inline-block;
}
#filter_modal #filter_value {
	width: 9em;
	height: 2em;
	margin-left: 0.5em;
	display: inline-block;
}
#filter_modal .between {
	width: 4.5em;
	height: 2em;
	display: inline-block;
}
#open_setup_modal,
#searchbox {
	padding: 0.5em;
	border-radius: 0.5em;
	width: 10em;
	margin: 0.5em 0;
	border: solid 1px black;
}
#open_setup_modal {
	text-align: center;
	font-weight: bold;
}
input#searchbox:focus {
	border-color: black;
	border-style: solid;
	border-width: 1px;
}
div#setup_modal {
	width: 100%;
}
table#column_setup {
	width: 20em;
}
#column_setup tr {
	height: 2em;
}
div#filter_modal,
div#sort_modal {
	width: 100%;
	padding: 5em 1em;
}
#filter_modal div.modal-content {
	width: 21em;
	height: 20em;
}
#sort_modal div.modal-content {
	width: 21em;
	height: auto;
}
.form-control {
	display: inline;
}
.form-control:focus {
	border-color: black;
	border-width: 1px;
	box-shadow: 0;
}
table.filter-table {
	border-color:#d0d0d0;
	width: auto;
	left-margin: auto;
	right-margin: auto;
}
table.filter-table td,
table.filter-table th {
	padding: 0.8em;	
}
table.filter-table th {
	cursor: pointer;
}
table.filter-table td.integer, th.integer {
	text-align: right;
	width: 5em;
}
table.filter-table td.float, th.float {
	text-align: center;
	width: 5em;
}
table.filter-table td.percent, th.percent {
	text-align: center;
	width: 5em;
}
table.filter-table td.percent:after {
	content: "%";
}
	
table.filter-table td.account, th.account {
	text-align: left;
	width: 15em;
}
table.filter-table td.clickable {
	cursor:pointer;
}
table.filter-table tr:hover {
	background-color: lightgray; 
}
div.checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 1em;
}

div.inactive_tooltip {
  position: absolute;
  top: 100%;
  left: 28px;
  margin-top: 8px;
  background: #333;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 85%;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

#inactive-label:hover + .inactive_tooltip {
  opacity: 1;
  visibility: visible;
}

@media only screen and (max-width:480px) {
	#filter_modal div.modal-content,
	#sort_modal div.modal-content {	
		width: 92%;
		margin-left: 2%;
		margin-right: 2%;
	}
	table.filter-table {
		border-color:#d0d0d0;
	}
	table.filter-table td,
	table.filter-table th {
		padding: 0.3em;
		width: auto;
	}
	div.checkbox {
		display: block;
		padding-left: 0px;
	}
	h1 {
		padding-left:0.3em;
	}
	div.buttons {
		padding-left:0.3em;
	}	
}