/*@import url('//fonts.googleapis.com/css?family=Open+Sans');*/
/*@import url('//fonts.googleapis.com/css?family=Lato');*/
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com" rel="stylesheet">
* {
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	       box-sizing: border-box; 
}

html {
	background: #f5f5f5;
	min-height:100%;
	border-top:5px solid #c0c0c0;
	border-bottom:5px solid #c0c0c0;
	/*color:#61666c;*/
	color: #000;
	font-weight:400;
	font-size:1em;
	font-family:'Lato', sans-serif;
	line-height:2em;
}
body {
	padding:20px;
	-webkit-backface-visibility:hidden;
}
code {
	font-family:consolas,monospace;	
}
a {
	color:#000;
	text-decoration:none;
}
th a {
	color:#fff;
	text-decoration:none;
}
img {
	width:20px;
	height: auto;
}
a, img {
        border:none;
		outline:none
}

.size-img{
	width:100px;
}

a:hover {
	color:#000;
}
th a:hover {
	color:#fff;
}
/*------------------------------------*\
    Wrapper
\*------------------------------------*/
.wrapper {
	margin:0 auto;
	padding-top:20px;
	max-width:80%;
}
/*------------------------------------*\
    Demo block
\*------------------------------------*/
.block {
	font-size:.875em;
	margin:20px 0;
	padding:20px;
	color: #c0c0c0
}
/*------------------------------------*\
    Table (directory listing)
\*------------------------------------*/
table {
	width:100%;
	border-collapse:collapse;
	font-size:.875em;
}
tr {
	outline:0;
	border:0;
    font-family: 'Lato', sans-serif;
}
tr:hover td {
	background:#d5d5d5;
}
.indexcolicon {
    font-family: 'Lato', sans-serif;
    font-size: 2rem; /* Powiększenie (możesz użyć też np. 20px) */
    font-weight: 700;   /* Pogrubienie charakterystyczne dla nagłówków */
    text-align: left;   /* Opcjonalne wyrównanie tekstu */
	
}
th {
	font-size:.75em;
	padding-right:20px;
}
/* 2nd Column: Filename */
th + th {
	width:65%;
}
/* 3rd Column: Last Modified */
th + th + th {
}
/* 4th Column: Size */
th + th + th + th {
	width:5%;
}
tr td:first-of-type {
	padding-left:10px;
	padding-right:10px;
}
td {
	padding:5px 0;
	outline:0;
	border:0;
	border-bottom:0px none #000;
	vertical-align:middle;
	text-align:left;
	-webkit-transition:background 300ms ease;
	   -moz-transition:background 300ms ease;
	    -ms-transition:background 300ms ease;
	     -o-transition:background 300ms ease;
	        transition:background 300ms ease;
	font-size: 10px; /* lub inna wartość, np. 1.2em, 120% */	
    font-family: 'Lato', sans-serif;
    font-size: 1rem; /* Powiększenie (możesz użyć też np. 20px) */
    font-weight: 300;   /* Pogrubienie charakterystyczne dla nagłówków */
    text-align: left;   /* Opcjonalne wyrównanie tekstu */
}
td a{
	display: block;
}
tr.parent a[href^="/"] {
	/*color:#9099A3;*/
	color:#000;
}
	.parent a[href^="/"]:hover {
		color:#000;
	}
/* Kreska nad wszystkimi wierszami (oprócz pierwszego) */
table tr:not(:first-child) {
  border-top: 1px solid #d5d5d5;
}
  th {
    background-color: #7A7D80; /* Ustawia czarne tło dla wszystkich komórek nagłówkowych */
    color: white; /* Ustawia biały kolor tekstu */
    padding: 8px;
    text-align: left;
	font-size: 10px; /* lub inna wartość, np. 1.2em, 120% */	
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem; /* Powiększenie (możesz użyć też np. 20px) */
    font-weight: 400;   /* Pogrubienie charakterystyczne dla nagłówków */
    text-align: left;   /* Opcjonalne wyrównanie tekstu */
  }
/*  tr:nth-child(even) {
    background-color: #f2f2f2; /* Tło dla parzystych wierszy */
/*  }
  tr:nth-child(odd) {
    background-color: #ffffff; /* Tło dla nieparzystych wierszy */
/*  }*/
/*------------------------------------*\
    Footer
\*------------------------------------*/
.footer {
	text-align:center;
	font-size:.75em;
}
/* Styl dla plików PDF 
a[href$=".pdf"] {
    color: red;
    font-weight: bold;
}

/* Styl dla obrazków 
a[href$=".jpg"], a[href$=".png"] {
    color: green;
}

/* Jeśli chcesz ostylować cały wiersz (wymaga nowoczesnych przeglądarek) 
tr:has(a[href$=".zip"]) {
    background-color: #fff3cd;
}*/
/* Kontener pozycjonujący */
.search-container {
  position: relative;
  width: 100%;
  max-width: 400px; /* Możesz dostosować szerokość */
  margin: 20px 0;
}

/* Ikona lupy */
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d; /* Kolor szary */
  pointer-events: none; /* Kliknięcie przechodzi do inputa */
  transition: color 0.3s ease;
}

/* Stylizacja pola input */
.light-table-filter {
  width: 100%;
  padding: 10px 15px 10px 40px; /* Duży lewy padding na ikonę */
  font-size: 16px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  outline: none;
  transition: all 0.3s ease-in-out;
  background-color: #fff;
}

/* Efekt po kliknięciu (focus) */
.light-table-filter:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
}

/* Zmiana koloru ikony gdy pole jest aktywne */
.search-container:focus-within .search-icon {
  color: #0d6efd;
}

/* Usunięcie domyślnego "X" w przeglądarkach Webkit (opcjonalne) */
.light-table-filter::-webkit-search-decoration,
.light-table-filter::-webkit-search-cancel-button,
.light-table-filter::-webkit-search-results-button,
.light-table-filter::-webkit-search-results-decoration {
  display: none;
}