::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

/*  smaller -> bigger

div.person : display: block  -> display:table; -> inline-table
*/

body {
	background-color: antiquewhite;
	margin:0;
}
:target {
    background: yellow; /* Das angesprungene Element bekommt einen gelben Hintergrund */
}

input,textarea,select {
	background-color: lightcyan;
}

div.tree{
	width: max-content;
}

div.famEvents {
	height: fit-content;
}

div.person {
	height: -webkit-fill-available;
	text-align: left;

	display: inline-grid;
    grid: "pic name gender" min-content
          "pic job job"   min-content
          "pic indEvents indEvents"   min-content
          "note note note"   min-content
          "search1 search1 search1"   min-content
          "search2 search2 search2"   min-content
          / minmax(0px,min-content) minmax(100px,150px) minmax(0px,20px);

	vertical-align: top;
	justify-items: start;
	position: relative;
	min-width: 150px;
}

div.atlink {
	height: -webkit-fill-available;
	min-width: 150px;
	
}

div.person img.portrait {
	grid-area: pic;	
	width: 53px; 
	height: 80px; 
	float: left;
	border-radius: 5px;
}

div.person .name {
	grid-area: name;	
}
div.person .gender {
	grid-area: gender;
	justify-self: right;	
}
div.person .job {
	grid-area: job;	
}
div.person .indEvents {
	grid-area: indEvents;	
}
div.person .note {
	grid-area: note;	
}
div.person .lileft {
	grid-area: search1;	
}
div.person .liright {
	grid-area: search2;	
}

div.sibling {
	display: inline-grid;
	grid-auto-flow: dense;
	
}

ul.lileft {
	margin:0;
	padding:0;
	text-align:left;
    text-decoration: none;
    list-style-type: none;
	float:left;
}
ul.liright {
	margin:0;
	padding:0;
	text-align:right;
    text-decoration: none;
    list-style-type: none;
	float:right;
}

div.hassib {
    border-bottom-style: double !important;
    border-bottom-width: thick !important;
    border-right-style: double !important;
    border-right-width: thick !important;
}

div.issib {
	display: none !important;
}

div.sibling:hover div.hassib {
    border-bottom-style: solid !important;
    border-bottom-width: thin !important;
    border-right-style:  solid !important;
    border-right-width: thin !important;
}

div.hassib:hover ~ .issib{
	display: inline-grid !important;
}

div.sibling:hover div.issib {
	display: inline-grid !important;
	max-width: min-content;
	border: dotted 3px #ccc; 
}


div.person, div.famEvents, div.atlink {
	border: 1px solid #ccc;
	box-sizing: border-box;
	padding: 5px 5px;
	text-decoration: none;
	color: #666;
	background: white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
/*
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
*/
}

.search img, .search svg{
	width: 24px; 
	height: 24px; 
	float: left;
	border-radius: 5px;
	cursor: pointer;
}

div.person li.note {
	max-height: 100px;
	max-width: 110px;
    overflow-y: auto;
    overflow-x: hidden;
	white-space: pre-line;
}

div.person table.ihatediv {
	max-width: -webkit-fill-available;
	border-spacing:0;
	border-collapse:collapse;
	min-width: 98px;
}
div.person table.ihatediv td {
	vertical-align: top;
	padding:0px;
}
div.person td.name {
	width:	100%
}

.tree div.person img.portrait:hover{
    transform:scale(2.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	opacity:1.1 !important;
}


.tree div.person:hover .search,
.tree div.sibling:hover .search{
	display:inline-flex;

}

@counter-style indSymbol {
	system: fixed;
	symbols: \* 〰 † ⚱ ▭ 🌐 ℹ ;
	suffix: " ";
}

@counter-style famSymbol {
	system: fixed;
	symbols: "\26AD" "\26AE";
	suffix: " ";
}

ul.indEvents {
	margin: 0 0 0 1.5em;
	padding-left: 1.5em;
	list-style-type: indSymbol;  
	list-style-position: outside;
}

li.hide {
	visibility:hidden; 
	height:0px;
}

ul.famEvents {
	margin:0;
	padding-left: 1.5em;
	list-style-type: famSymbol;  
	list-style-position: outside;
	width: fit-content;
}

.famWrap {
	display: inline-block;
}

@media print {
	body {
		visibility: hidden;
	}
	article {	
		overflow: visible;
		top: 50px;
	}
	.section-to-print {
		visibility: visible;
		left: 0;
		top: 0;
		width: 100%;
	}
	div.person, div.famEvents, div.atlink {
		font-family: georgia, helvetica;
		font-size: 11px;
	}
	.namelist{
		font-family: georgia, helvetica;
		font-size: 14px;
	}
    ul.printbreak { 
        break-inside: avoid; 
    }
	a {    
		text-decoration: none;
	}
	.screenonly {
		display: none;
	}
}

@media screen {
	article {
		position: relative; /* Set the navbar to fixed position */
		width: auto; /* Full width */

	}
	div.person, div.famEvents, .navbar #fontsize, div.atlink {
		font-family: arial, verdana, tahoma;
		font-size: 11px;
	}
	.namelist {
		font-family: arial, verdana, tahoma;
		font-size: 14px;
	}
	.navbar {
		font-family: arial, verdana, tahoma;
	}
	.printonly {
		display: none;
	} 
}


header {
	position: relative; /* Set the navbar to fixed position */
	top: 0; /* Position the navbar at the top of the page */
	width: 100%; /* Full width */
	z-index: 10;
}

.navbar {
	overflow: hidden;
	background-color: #333;
	font-size: large;
}

.navbar a {
  float: left;
  color: white;
  text-align: center;
  padding: 6px 16px;
  text-decoration: none;
}


.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
}

.downright {
	display: grid;
	vertical-align: top;
	align-items: end;
	align-content: stretch;
}

.rightscroll {
	width: -webkit-fill-available;
	display: inline-flex;
	overflow-x: scroll;
	overflow-y: clip;
}

.rightdown {
    display: inline-flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	flex-basis: auto;
	flex-wrap:wrap;
}

.rightfix {
    display: flex;
}

.bottomtop {
    display: inline-flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: stretch;}

.align-stretch {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-self: stretch;
  max-width: max-content;
}

.dropdown-content a, .dropdown-content div {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover, .dropdown-content div:hover{
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content div.optheader {
    padding: 8px 12px 0px 0px;
	text-align: right;
	font-weight: bold
	
}

div.onebutton {
	height: fit-content;
	margin: 0px 8px 0px 8px;
    display: flex;
    justify-content: right;
	flex-wrap:nowrap;
    overflow: hidden;
}

div.onebutton .optiontext {
	text-align: right;
	float:left;
	margin: 4px 4px 4px 12px;
}
div.onebutton .option {
	overflow: hidden;
	margin: 4px 4px 4px 4px;
}

button, select, input {
    font-size: medium;
}
div.nosize {
	all:unset;
}