header {
	background: #626262;
	color: #ffffff;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
header > nav {
	padding: 0px;
	flex: 4 0 75%;
}
header > a {
	margin: 0px 16px 0px 0px;
	flex: 1 0 auto;
	text-align: center;
	padding: 8px;
	background: #414141;
	box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.5);
}
header > a > span {
	position: absolute;
	display: none;
	text-align: left;
	font-size: 11px;
	line-height: 14px;
	background: #000;
	padding: 8px 10px;
	margin: 10px 0 0 -8px;
	box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.5);

}
header > a:hover > span {
	display: block;
}

main {
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	min-height: 300px;
}
main > * {
	padding: 0px;
	flex: 1 0 100%;
}

footer {
  padding: 16px;
  background: #626262;
  background: linear-gradient(to bottom, #626262, #565656);
  color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.dane-teleadresowe {
	display: flex;
	align-items: center;
}
.dane-teleadresowe div {
	font-size: 11px;
	text-align: right;
}
.dane-teleadresowe img {
	max-height: 68px;
	margin-left: 16px;
}

.main {
  text-align: left;
}
.zawartosc {
	margin: 0px 32px 32px 32px;
}
h1 * {
	padding: 0px 4px 0px 0px;
	display: inline-block;
}
h1 span {
	display: inline-block;
}
h1 span::first-letter {
	text-transform: uppercase;
}
h1 span::before {
	font-family: 'Font Awesome 5 Free';
	font-size: 18px;
	content: "\f105";
	padding: 0px 8px;
}

@media all and (max-width: 1023px) {
  	.zawartosc { margin: 0px 16px 16px 16px;; }
}
@media all and (min-width: 640px) {
  	.menu { flex: 16 0 auto; }
}
@media all and (min-width: 1024px) {
	.page {width: 100%;}
	.menu { flex: 16 0 256px; order: 1; }
	.main { flex: 61 0 736px; order: 2; }
}
@media print {
	details:not([open]), h1, header, footer, .menu, button, input[type=button], .dzialania, .opisdzialania, .pdfcrowd-remove, .strona-drukuj-polec-pdf-tlo, .blad, .ostrzezenie, .informacja, .komunikat, .sql {display: none !important;}
	.zawartosc { margin: 0; }
	.tabela-lista + h3, .tabela-lista + .btns + h3 {page-break-before: always;}
	details[open] {page-break-after: always;}
	/*details[open] table {page-break-after: always;}*/
	.tabela-lista caption, .tabela-lista tr th, .tabela-lista tr td {font-size: 12px !important; padding: 2px !important;}
	h2 { font-size: 18px !important;; }
	h3 { font-size: 16px !important;; }
	h4, h5, h6, summary { font-size: 14px !important;; }
}


/*
@keyframes zamknij_komunikat {
	0%   { opacity: 0; padding: 16px; margin: 14px 0px; line-height: 20px; border-width: 1px; position: initial;}
	1%   { opacity: 1; padding: 16px; margin: 14px 0px; line-height: 20px; border-width: 1px; position: initial;}
	100%  { opacity: 1; padding: 16px; margin: 14px 0px; line-height: 20px; border-width: 1px; position: initial;}
	99%  { opacity: 0; padding: 16px; margin: 14px 0px; line-height: 20px; border-width: 1px; position: initial;}
	100%  { opacity: 0; padding: 0; margin: 0; line-height: 0; border-width: 0px; position: absolute;}
}
*/

.blad,
.ostrzezenie,
.informacja,
.komunikat,
.sql {
	opacity: 1;
	padding: 16px;
	margin: 14px 0px;
	line-height: 20px;
	border-width: 1px;
}
.blad a,
.ostrzezenie a,
.informacja a,
.komunikat a,
.sql a {
	text-decoration: underline !important;
}

.licencja input, .licencja textarea {
	border: 1px solid #d60000;
}
.blad {
	background: #ffffff;
	background: linear-gradient(to right, #d60000 0%, #d60000 48px, #ffffff 48px, #ffffff 100%);
	border: 1px solid #d60000;
	color: #d60000;
	padding: 16px 16px 16px 64px;
	margin: 14px 0px;
}
.ostrzezenie {
	background: #ffffff;
	background: linear-gradient(to right, #B85C00 0%, #B85C00 48px, #ffffff 48px, #ffffff 100%);
	border: 1px solid #B85C00;
	color: #B85C00;
	padding: 16px 16px 16px 64px;
	margin: 14px 0px;
}
.informacja {
	background: #ffffff;
	background: linear-gradient(to right, #378500 0%, #378500 48px, #ffffff 48px, #ffffff 100%);
	border: 1px solid #378500;
	color: #378500;
	padding: 16px 16px 16px 64px;
	margin: 14px 0px;
}
.komunikat {
    background: #fbfbfb;
		background: linear-gradient(to right, #4b4b4b 0%, #4b4b4b 48px, #ffffff 48px, #ffffff 100%);
    border: 1px solid #EAEAEA;
    padding: 16px 16px 16px 64px;
    margin: 14px 0px;
}
.blad::before,
.ostrzezenie::before,
.informacja::before,
.komunikat::before,
.sql::before {
	font-family: "Font Awesome 5 Free";
	color: #ffffff;
	position: absolute;
	margin: -2px auto auto -64px;
	font-size: 150%;
	display: block;
	width: 48px;
	text-align: center;
}
.blad::before { content: "\f06a"; }
.ostrzezenie::before { content: "\f071"; }
.informacja::before { content: "\f129"; }
.komunikat::before { content: "\f129"; }
.sql::before { content: "\f121"; }
/*
.blad {
	background: #ffffff;
	border: 1px solid #d60000;
	color: #d60000;
}
.ostrzezenie {
	background: #ffffff;
	border: 1px solid #B85C00;
	color: #B85C00;
}
.informacja {
	background: #ffffff;
	border: 1px solid #378500;
	color: #378500;
}
.komunikat {
	background: #ffffff;
	border: 1px solid #4b4b4b;
}
*/
pre.komunikat {
	display: block;
	opacity: 1;
	padding: 16px;
	margin: 14px auto;
	line-height: 20px;
	border-width: 1px;
	position: initial;
	max-width: 55vw;
	height: 400px;
}
/*
p.komunikat {
	position: absolute;
	animation: zamknij_komunikat 15000ms ease-in 0s 1 normal;
}
*/
.sql {
	background: #ffffff;
	border: 1px solid #0049ad;
	color: #0049ad;
	padding: 16px;
	margin: 14px 0px;
}
/*
.blad::before,
.ostrzezenie::before,
.informacja::before,
.komunikat::before,
.sql::before {
	order: 2;
	content: "zamknij [x]";
	font-size: 10px;
	float: right;
	display: none;
	width: 56px;
}
.blad:hover,
.ostrzezenie:hover,
.informacja:hover,
.komunikat:hover,
.sql:hover {
	cursor: pointer;
}
.blad:hover::before,
.ostrzezenie:hover::before,
.informacja:hover::before,
.komunikat:hover::before,
.sql:hover::before {
	display: block;
	cursor: pointer;
}
*/
.menu_gora {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-start;
}
.menu_gora a {
  text-decoration: none;
  display: block;
  padding: 16px;
  color: white;
  background: #414141;
  border-right: 1px solid rgba(255,255,255,0.3);
}
header h2 {
	display: none;
}
header em {
	margin: 0px 16px 0px 0px;
}
header a:hover {
  background: rgba(0,0,0,1);
}
@media all and (max-width: 800px) {
	.menu_gora {
		flex-flow: column wrap;
		padding: 0;
	}
	.menu_gora a {
		 text-align: left;
		 padding: 8px;
		 border-top: 1px solid rgba(255, 255, 255, 0.3);
		 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		 border-right: 0px none transparent;
	}
	.menu_gora li:last-of-type a {
		/*border-bottom: none;*/
	}
	header > a {
		margin: 0px;
		text-align: left;
		border-top: 1px solid rgba(255, 255, 255, 0.3);
		box-shadow: none;
	}
}




main .menu h2 {
	text-transform: uppercase;
	color: #2a3341;
	font-size: 18px;
	background: #efefef;
	margin: 8px 0px 0px 0px;
	padding: 12px;
}
main .menu h2:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	color: #7f7f7f;
	content: "\f103";
	display: inline-block;
	float: right;
	margin: 4px 8px 0px 0px;
}

main .ulubione h3 {
	color: #2a3341;
	font-size: 18px;
	text-align: center;
}
main .ulubione h3:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	color: #343434;
	content: "\f107";
	display: block;
}

.menu-lewe-1-poziom,
.menu-lewe-2-poziom,
.menu_srodek {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	color: #000;
}
.menu-lewe-1-poziom > li > button {
	font-weight: 600;
	font-family: 'Dosis', serif;
	color: #2a3341;
	font-size: 18px;
	background: #efefef;
	margin: 8px 0px 0px 0px;
	padding: 12px;
	border: 0px none transparent;
	display: block;
	width: 100%;
	text-align: left;
}
.menu-lewe-1-poziom > li > button::after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	color: #7f7f7f;
	content: "\f103";
	display: inline-block;
	float: right;
	margin: 4px 8px 0px 0px;
}
.menu_srodek {
	flex-flow: row wrap;
	gap: 4px;
}
.menu_srodek * {
	box-sizing: border-box;
}
.menu_srodek li {
	min-width: 176px;
	border: 1px solid #e5e5e5;
}
.menu-lewe-2-poziom a, .menu_srodek a {
  display: block;
  padding: 0px;
  background: #f7f7f7;
  border-bottom: 1px solid #ffffff;
}
.menu_srodek a {
	padding-right: 8px;
	border: 0;
}
.menu-lewe-2-poziom a span, .menu_srodek a span {
	display: inline-block;
}
.menu-lewe-2-poziom a span:first-letter, .menu_srodek a span:first-letter {
	text-transform: uppercase;
}
.menu-lewe-2-poziom em, .menu_srodek em {
	display: inline-block;
	text-align: center;
	width: 40px;
	padding: 10px 0px;
	font-size: 18px;
	margin: 0px 8px 0px 0px;
	background: #bd0000;
	color: #fff;
}
.menu-lewe-2-poziom li:hover a,
.menu-lewe-2-poziom li.aktywna a,
.menu-lewe-2-poziom li.aktywna em,
.menu_srodek li:hover a,
.menu_srodek li.aktywna a,
.menu_srodek li.aktywna em {
	background: #930000;
	color: #fff !important;
}
.menu-lewe-2-poziom li:hover a,
.menu-lewe-2-poziom li.aktywna em,
.menu_srodek li:hover a,
.menu_srodek li.aktywna em {
	color: #fff;
}
