body {
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 10px;
    font-weight: normal;
    text-decoration: none;
    background-color: #fefefe;
    margin: 1px;
    width: 100%;
}
.tytul {

    background-color: rgba(237, 231, 246, 0.3);
    font: 16px Tahoma, Verdana, sans-serif;
    text-align: center;
    border-radius: 8px;
    border: 1px dashed #aaa;
	gap: 5px;
}

.form-container {
	padding: 3px;
	border-radius: 8px;
	width: 236px;
	margin: auto;
	color: grey;
}
	
	/* Desktop version of drzewo.css for 1000px width */
.child-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-height: 90px;
    margin: 10px 0;
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed #aaa;
	gap: 5px;
}

/* Pokolenia kolorowane z przezroczystością 0.3 */
.gen-0 {
    background-color: rgba(227, 242, 253, 0.3); /* najstarsze */
	gap: 0px;
}
.gen-1 {
    background-color: rgba(232, 245, 233, 0.5);
}
.gen-2 {
    background-color: rgba(255, 243, 224, 0.7);
}
.gen-3 {
    background-color: rgba(243, 229, 245, 0.3);
}
.gen-4 {
    background-color: rgba(237, 231, 246, 0.3);
}


/* Rząd dzieci */
.grandchildren-row {

    grid-template-columns: repeat(2, 1fr); /* max 2 kolumny */
    gap: 15px;
    justify-items: center;
}

/* Dziecko i małżonkowie */
.child-and-spouses {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
p {
  text-align: center;
  margin-top: 25px;
  color: grey;
} 
/* Style dla kafla */
/* Kafel męski */
.m {
    width: 90px;
    height: 94px;
    color: #5353A3;
    font: 10px Tahoma, Verdana, sans-serif;
    text-align: center;
    border: 1px solid #5353A3;
    border-radius: 5px;
    display: block;
}

a.lm:link, A.lm:active, A.lm:visited {
    color: #242464;
    font: 12px Tahoma, Verdana, sans-serif;
    text-decoration: none;
    background: none;
}

A.lm:hover {
    color: #5353A3;
    font: 12px Tahoma, Verdana, sans-serif;
    text-decoration: underline;
    background: none;
}
/* Kafel żeński */
.w {
    width: 90px;
    height: 94px;
    color: #5353A3;
    font: 10px Tahoma, Verdana, sans-serif;
    text-align: center;
    border: 1px solid #642424;
    border-radius: 5px;
    display: block;
}

A.lw:link, A.lw:active, A.lw:visited {
    color: #642424;
    font: 12px Tahoma, Verdana, sans-serif;
    text-decoration: none;
    background: none;
}

A.lw:hover {
    color: #A35353;
    font: 12px Tahoma, Verdana, sans-serif;
    text-decoration: underline;
    background: none;
}
.fotodat {
    display: flex;
    align-items: left;
}
.thumb{
 flex-shrink: 0;
 margin: 0;
 padding: 0
}
.thumb:hover{
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
cursor: pointer;
}
.daty {
    width: 45px;
    min-height: 50px;
    margin: 0;
    padding: 0;
    text-align: center;
    display: block;
	flex: 1;
}

.name {
    width: 72px;
    min-height: 35px;
    margin: 0;
    padding: 0;
    text-align: center;
    display: block;
}

.thumb:hover {
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -o-filter: sepia(100%);
    -ms-filter: sepia(100%);
    filter: sepia(100%);
    cursor: pointer;
}

/* Children w drzewo.php */
.children {
    min-width: 75px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

}

.child {

    min-width: 90px;

}
.btn-print {
	    min-width: 70px;
    height: 32px;
    vertical-align: middle;
    margin: 0 5px;

}

/* Media queries dla zachowania 768px na wszystkich urządzeniach */

/* pełny blok drzewo */
.drzewo {
  display: flex;
  flex-direction: column;
  width: 1000px;
  touch-action: auto;
}
/* pusta ramka */
.pusty { 
    width: 90px;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 1px rgba(49,168,59,0.3);
}
.malzenstwo-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4AF37; /* stare złoto */
    font-size: 2em; /* większy rozmiar, możesz zmienić */
    font-family: Arial, sans-serif;
    background: none;
    margin: 0 auto;
}
.row-a, .row-b, .row-c, .row-d, .row-e, .row-f, .row-g, .row-h, .row-i, .row-j {display: flex; gap: 0px;}
.row-l, .row-m, .row-n, .row-o, .row-p, .row-r, .row-s {display: flex; gap: 0px;}
/* A - dzieci */
.row-a { 
	width: 1000px;
	gap: auto; /* przestrzeń między elementami */
    justify-content: center;
	}
.row-a .item-2 {
    width: 960px;
    display: flex;
    flex-wrap: nowrap; /* ważne – bez zawijania */
    justify-content: space-between; /* równomierne rozłożenie, z resztą jako odstępy */
  overflow-x: auto;/*umożliwia przewijanie gdy zawartość się nie mieści */
  overflow-y: hidden;
  white-space: nowrap; /* zapobiega zawijaniu */
}

.row-a .item-2 > div {
    flex: 1 1 0;
    min-width: 115px;
    max-width: 470px;
    margin: 0 5px; /* jeśli chcesz kontrolować wewnętrzne marginesy */
}


/* Wiersz B odstęp */
.row-b { 
    height: 60px;
}
.row-b.item-1 {
    width: 100%;
}
.dzieci { width: 1000px; height: 60px;}

/* Wiersz C - Proband level  */
.row-c { 
	height: 98px;
  gap: 10px; /* przestrzeń między elementami */
  }
/* (1) - pros Rodzeństwo probanda */	
.row-c .item-1 {
    display: flex;
	width: 550px;
	height: 98px;
    margin: 0;    
	margin-right: 10px;
    justify-content: center;
 /* overflow-x: auto;/*umożliwia przewijanie gdy zawartość się nie mieści */
 overflow-y: hidden;
  white-space: nowrap; /* zapobiega zawijaniu */
	}
/* (2) - Proband */
.row-c .item-2 { 
    height: 98px;
}
.row-c .item-3 { 
    width: 90px;
    height: 98px;
    border-radius: 2px;
    padding: 0px;
    box-shadow: 0px 0px 5px 1px rgba(149,68,59,0.5);
}
/* (3, 5) - rings */						
.row-c .item-4 { 
	width: 12px;
    height: 98px;
}
/* (4) - Małżonek */
.row-c .item-5 { 
    width: 90px;
    height: 98px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 1px rgba(49,168,59,0.3);
}
/* (5) - odstęp */						
.row-c .item-6 { 
	width: 12px;
    height: 98px;
}

/* (6) - prof Małżonkowie probanda */	
.row-c .item-7 {
    display: flex;
	width: 340px;
    height: 98px;
    padding-right: 0px;
    margin: 0;
    text-align: center;	
}

/* Wiersz D,L - grafy osoba -> rodzice  */
.row-d, .row-l { max-height: 40px;}

/* (1) - odstęp */
.row-d .item-1,/* (1) - marginesy */
.row-l .item-1 {width: 410px;}
/* (3) - margines D */
.row-d .item-3 {width: 354px;}
/* (3) - margines L */

.row-l .item-2 {width: 518px;}

.r23 { width: 164px;	height: 40px;}
.m23a { width: 354px;	height: 40px;}
.m23b { width: 518px;	height: 40px;}

/* (1) - odstęp */						
.row-e .item-1,
.row-m .item-1 { width: 370px;}
/* (2, 4) - Ojciec, matka */
.row-e .item-2,
.row-e .item-4,
.row-m .item-2,
.row-m .item-4 { width: 90px;}
/* (3,) - rings */						
	.row-e .item-3,
	.row-m .item-3 { 
    width: 12px;  
	display: flex;
    align-items: center;
    justify-content: center;
    color: #D4AF37; /* stare złoto */
    font-size: 1em; /* większy rozmiar, możesz zmienić */
    font-family: Arial, sans-serif;
    background: none;
    margin: 0px;
	}
/* (5) - odstęp */						
.row-e .item-5, .row-m .item-5 { width: 334px;}
/* (6) - bypass */						
.row-e .item-6 { width: 32px;}
.row-m .item-6 { width: 32px;}
.bypass { width: 32px;	height: 100%;}

/* Wiersz F,N  - grafy dziadkowie -> rodzice  */
.row-f, .row-n { max-height: 40px;}
/* (1) - margines */
.row-f .item-1,
.row-n .item-1{width: 301px;}
/* (4) - margines */
.row-f .item-4,
.row-n .item-4 {width: 267px;}
/* (5) - bapass */
.row-f .item-5 {width: 32px;}
.row-n .item-5 {width: 32px;}

.row-f .item-2,
.row-n .item-2 {width: 164px;}

.row-f .item-3,
.row-n .item-3 {width: 164px;}

.r45 {    width: 164px;	height: 40px;}
.r67 {    width: 164px;	height: 40px;}


/* Wiersz G,O - Dziadkowie  */
.row-g, .row-o {gap: 0px;}
/* (2, 4, 6, 8) - osoby */
.row-g .item-2,
.row-g .item-4,
.row-g .item-6,
.row-g .item-8,
.row-o .item-2,
.row-o .item-4,
.row-o .item-6,
.row-o .item-8 {
    width: 90px;
    padding: 0px;
}
/* (3, 7) - rings */
.row-g .item-3,
.row-g .item-7, 
.row-o .item-3,
.row-o .item-7 { 
    width: 12px;  
	display: flex;
    align-items: center;
    justify-content: center;
    color: #D4AF37; /* stare złoto */
    font-size: 1em; /* większy rozmiar, możesz zmienić */
    font-family: Arial, sans-serif;
    background: none;
    margin: 0px;
	}
/* (1,9) - marginesy lewy i prawy */
.row-g .item-1, .row-o .item-1 {width: 256px;}
.row-g .item-9, .row-g .item-9 {width: 224px;}
/* (5) - odstęp centralny */
.row-g .item-5, .row-o .item-5 {width: 32px; padding: 0; margin: 0;}
/* (10) - bypass */
.row-g .item-10, .row-o .item-10 {width: 32px;}

/* Wiersz H,P  - grafy pradziadkowie -> dziadkowie  */
.row-h, .row-p {max-height: 40px; padding: 0; margin: 0;}
/* (1) - odstęp */
.row-h .item-1, .row-h .item-6, 
.row-p .item-1, .row-h .item-6 {width: 32px;}

.row-h .item-2, .row-p .item-2 {width: 269px;}
.row-h .item-3, .row-p .item-3 {width: 164px;}
.row-h .item-4, .row-p .item-4 {width: 164px;}
.row-h .item-5, .row-p .item-5 {width: 267px;}
.row-h .item-6 {width: 32px;}
.row-p .item-6 {width: 32px;}


.r89 {    width: 269px;	height: 40px;}
.r1011 {    width: 164px;	height: 40px;}
.r1213 {    width: 164px;	height: 40px;}
.r1415 {    width: 269px;	height: 40px;}


/* Wiersz I, R - Pradziadkowie  */
.row-i, .row-r { gap: 0px; margin: 0px;}

/* (2, 4, 6, 8, 10, 12, 14, 16) - osoby */
.row-i .item-2, .row-r .item-2, 
.row-i .item-4, .row-r .item-4, 
.row-i .item-6, .row-r .item-6, 
.row-i .item-8, .row-r .item-8, 
.row-i .item-10, .row-r .item-10, 
.row-i .item-12, .row-r .item-12, 
.row-i .item-14, .row-r .item-14, 
.row-i .item-16, .row-r .item-16{ width: 90px; padding: 0px;}

/* (1, 5, 9, 13, 17) - spacer */
.row-i .item-1, .row-r .item-1,
.row-i .item-5, .row-r .item-5, 
.row-i .item-9, .row-r .item-9, 
.row-i .item-13,.row-r .item-13,
.row-r .item-17 { width: 32px;}

.row-i .item-17 { width: 32px;}
/* (3, 7, 11, 15) - rings */
.row-i .item-3, .row-r .item-3,
.row-i .item-7, .row-r .item-7, 
.row-i .item-11, .row-r .item-11, 
.row-i .item-15, .row-r .item-15 { 
    width: 12px;  
	display: flex;
    align-items: center;
    justify-content: center;
    color: #D4AF37; /* stare złoto */
    font-size: 1em; /* większy rozmiar, możesz zmienić */
    font-family: Arial, sans-serif;
    background: none;
    margin: 0px;
	}
	/* Wiersz J - odstęp końcowy */
.row-j { max-height: 40px;}
.row-j .item-1 { width: 896px;}
	/* (2) bypass */
.row-j .item-2 { width: 32px;}

.row-s { max-height: 40px;}
.row-s .item-1 { width: 100%;}

@media print {
  body, .drzewo {
    margin: 0 auto !important;
    text-align: center !important;
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
  }
.row-c .item-1 {
	width: 650px !important;
}
  #druk-stopka {
    text-align: center !important;
    width: 100%;
    margin: 32px auto 0 auto !important;
  }
  .druk-kontrolka { display: none !important; }
  .sekcja { display: none !important; }
  .sekcja.drukowac { display: block !important; }
  .niedrukuj { display: none !important; }
}