/* Programy TBC Software: przegląd (programy.php - kafelki), strona programu (program-szablon.php - jedna kolumna)
   i cennik (cennik-programy.php). Układ bez pływających kolumn Bootstrapa - kafelki w siatce flex, strona programu
   w jednej kolumnie. Po zmianie - nowy numer ?v= w $pageStyles tych stron. */

.programy .page-section-inner {
	padding-bottom: 60px;
}

.programy-wstep {
	max-width: 760px;
	margin: 0 auto 40px auto;
	text-align: center;
	font-size: 16px;
}

/* ---------- przegląd: kafelki ---------- */
.programy-kafelki {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -12px 30px -12px;
}
/* dwa kafelki w wierszu (4 programy - 2 x 2), na wąskim ekranie jeden */
.program-kafelek {
	display: flex;
	flex-direction: column;
	flex: 0 1 calc(50% - 24px);
	max-width: 560px;
	margin: 0 12px 24px 12px;
	padding: 30px 25px;
	background-color: rgba(255, 255, 255, 0.04);
	border-radius: 6px;
	text-align: center;
}
.program-kafelek-tytul,
.program-kafelek-tytul:hover {
	text-decoration: none;
	color: inherit;
}
.program-kafelek .program-zajawka {
	flex-grow: 1;
	margin-bottom: 20px;
}
.program-kafelek-przyciski .btn {
	margin: 0 4px 10px 4px;
}
.program-kafelek-przyciski .btn i {
	margin-right: 5px;
}
/* dwa wiersze opisu pliku także bez wersji - przyciski sąsiednich kafelków na tej samej wysokości */
.program-kafelek .program-plik {
	min-height: 3.4em;
}
@media (max-width: 767px) {
	.program-kafelek {
		flex-basis: 100%;
		max-width: none;
	}
}

/* ---------- wspólne ---------- */
.program-ikona {
	display: block;
	font-size: 42px;
	margin-bottom: 15px;
}
.program-nazwa {
	margin: 0 0 5px 0;
	font-size: 26px;
}
.program-podtytul {
	margin: 0 0 15px 0;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.7;
}
.program-plik {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	opacity: 0.8;
}
.program-skrot {
	margin: 10px auto 0 auto;
	max-width: 520px;
	font-size: 11px;
	opacity: 0.6;
}
.program-skrot span {
	display: block;
	font-family: Consolas, "Courier New", monospace;
	word-break: break-all;
}

/* ---------- strona programu: jedna kolumna ---------- */
.program-strona {
	max-width: 900px;
	margin: 0 auto;
}
.program-zajawka-duza {
	text-align: center;
	font-size: 18px;
	margin-bottom: 30px;
}
.program-pobieranie {
	margin: 0 0 40px 0;
	padding: 25px 20px;
	background-color: rgba(255, 255, 255, 0.04);
	border-radius: 6px;
	text-align: center;
}
.program-pobierz {
	margin-bottom: 12px;
}
.program-pobierz i {
	margin-right: 6px;
}
/* brak wersji do pobrania na serwerze licencji - napis zamiast przycisku */
.program-wkrotce,
.program-wkrotce:hover,
.program-wkrotce:focus {
	cursor: default;
	opacity: 0.6;
	background-color: transparent;
	color: inherit;
}
.program-opis h2 {
	margin: 35px 0 15px 0;
	font-size: 20px;
}
.program-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}
.program-lista li {
	position: relative;
	padding: 4px 0 4px 26px;
	break-inside: avoid;
}
.program-lista li i {
	position: absolute;
	left: 0;
	top: 9px;
	font-size: 12px;
	opacity: 0.7;
}
/* funkcje w dwóch kolumnach na szerokim ekranie (lista tekstowa - bez pływających bloków) */
@media (min-width: 768px) {
	.program-lista-kolumny {
		column-count: 2;
		column-gap: 40px;
	}
}

/* ---------- moduły: przegląd (programy.php #moduly) - trzy kafelki w wierszu, na tablecie dwa, na telefonie jeden ---------- */
.moduly {
	margin-top: 30px;
}
.moduly-tytul {
	margin: 0 0 15px 0;
	font-size: 26px;
	text-align: center;
}
.moduly-kafelki {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -10px;
}
.modul-kafelek {
	display: flex;
	flex-direction: column;
	flex: 0 1 calc(33.333% - 20px);
	margin: 0 10px 20px 10px;
	padding: 25px 20px;
	background-color: rgba(255, 255, 255, 0.04);
	border-radius: 6px;
	text-align: center;
}
.modul-kafelek .program-ikona {
	font-size: 32px;
	margin-bottom: 12px;
}
.modul-nazwa {
	margin: 0 0 10px 0;
	font-size: 19px;
}
.modul-opis {
	flex-grow: 1;
	margin-bottom: 12px;
}
.modul-wymaga {
	margin: 0 0 10px 0;
	font-size: 13px;
	opacity: 0.7;
}
.modul-programy {
	margin: 0;
	font-size: 13px;
}
@media (max-width: 991px) {
	.modul-kafelek {
		flex-basis: calc(50% - 20px);
	}
}
@media (max-width: 767px) {
	.modul-kafelek {
		flex-basis: 100%;
	}
}

/* ---------- moduły na stronie programu (program-szablon.php) ---------- */
/* odnośnik #modul-... z przeglądu - nagłówek modułu nie chowa się pod paskiem menu */
#moduly,
.program-modul,
.modul-kafelek {
	scroll-margin-top: 110px;
}
.program-modul {
	margin: 0 0 20px 0;
	padding: 20px 22px;
	background-color: rgba(255, 255, 255, 0.04);
	border-radius: 6px;
}
.program-modul h3 {
	margin: 0 0 8px 0;
	font-size: 18px;
}
.program-modul h3 i {
	margin-right: 8px;
	opacity: 0.8;
}
.program-modul p {
	margin-bottom: 10px;
}
.program-modul .program-modul-uwagi {
	margin: 10px 0 0 0;
	font-size: 13px;
	opacity: 0.8;
}

.programy-kontakt {
	margin-top: 40px;
	text-align: center;
	font-size: 16px;
}
.programy-kontakt i {
	margin-right: 6px;
}
.programy-odstep {
	margin: 0 12px;
	opacity: 0.5;
}

/* ---------- cennik (cennik-programy.php): karty price-box motywu w siatce flex, tabele cen ---------- */
.cennik .moduly-tytul {
	margin-top: 30px;
}
#wersje,
#kadry,
#programy,
#rabaty {
	scroll-margin-top: 110px;
}
.cennik-promocja {
	max-width: 760px;
	margin: -10px auto 40px auto;
	padding: 12px 20px;
	background-color: rgba(8, 193, 184, 0.15);
	border-radius: 6px;
	text-align: center;
	color: #EEE;
}
.cennik-promocja i {
	margin-right: 8px;
}
/* data obowiązywania cennika nad wstępem (cennik-dane.php: $cennikOdDnia) */
.cennik-obowiazuje {
	margin: -10px 0 18px 0;
	text-align: center;
	font-size: 14px;
	letter-spacing: 0.5px;
	color: #08c1b8;
}
/* wszystkie wersje w jednym wierszu (równa szerokość, liczba kart z cennik-dane.php), na tablecie dwie, na telefonie
   jedna; przyciski kart na tej samej wysokości */
.cennik-wersje {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -10px 20px -10px;
}
.cennik-wersje .price-box {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	max-width: 400px;
	margin: 0 10px 20px 10px;
}
.cennik-wersje .price-box .price-heading {
	padding: 35px 15px;
}
.cennik-wersje .price-box .price-heading i {
	display: block;
	margin-bottom: 12px;
}
.cennik-wersje .price-box .price-heading .price-title {
	font-size: 24px;
}
.cennik-wersje .price-box .price-box-price .price {
	font-size: 48px;
}
.cennik-wersje .price-box .price-box-price .cennik-bezplatnie {
	padding: 13px 0;
	font-size: 30px;
}
.cennik-brutto {
	margin-top: 2px;
	font-size: 12px;
	opacity: 0.6;
}
.cennik-drugi-rok {
	margin-top: 6px;
	font-size: 14px;
	color: #EEE;
}
.cennik-wersje .price-box .price-features {
	flex-grow: 1;
	padding: 5px 22px 0 22px;
	text-align: left;
}
/* wcięcie na ikonę - motyw ustawia odstępy wierszy .price-features bez wcięcia */
.cennik-wersje .price-box .price-features .program-lista li {
	padding: 5px 0 5px 24px;
	font-size: 14px;
}
.cennik-limity {
	margin: 0 0 12px 0;
	text-align: center;
	font-weight: 500;
	color: #EEE;
}
.cennik-przycisk {
	padding: 20px 15px 0 15px;
}
.cennik-przycisk .btn i {
	margin-right: 5px;
}
@media (max-width: 991px) {
	.cennik-wersje .price-box {
		flex: 0 1 calc(50% - 20px);
	}
}
@media (max-width: 767px) {
	.cennik-wersje .price-box {
		flex-basis: 100%;
		max-width: none;
	}
}

.cennik-podtytul {
	margin: 10px 0 15px 0;
	font-size: 20px;
	text-align: center;
}
.cennik-podtytul i {
	margin-right: 8px;
	opacity: 0.8;
}
.table-responsive.cennik-tabela-ramka {
	max-width: 900px;
	margin: 0 auto 40px auto;
	border: 0;
}
.table-responsive.cennik-tabela-waska {
	max-width: 640px;
}
.cennik-tabela {
	width: 100%;
	border-collapse: collapse;
}
.cennik-tabela th {
	padding: 10px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: left;
	opacity: 0.7;
}
.cennik-tabela td {
	padding: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	vertical-align: top;
}
.cennik-tabela tbody tr:hover {
	background-color: rgba(255, 255, 255, 0.03);
}
.cennik-tabela .cennik-kwota {
	text-align: right;
	white-space: nowrap;
}
.cennik-tabela td.cennik-kwota {
	font-size: 16px;
	font-weight: 500;
	color: #EEE;
}
.cennik-ikona {
	width: 22px;
	margin-right: 8px;
	text-align: center;
	opacity: 0.8;
}
.cennik-opis {
	display: block;
	margin: 4px 0 0 30px;
	font-size: 13px;
	opacity: 0.7;
}
/* telefon: tabela mieści się bez przewijania (nagłówki kwot w dwóch wierszach, opis bez wcięcia) */
@media (max-width: 767px) {
	.cennik-tabela th {
		padding: 8px 6px;
		font-size: 11px;
		letter-spacing: 0;
	}
	.cennik-tabela th.cennik-kwota {
		white-space: normal;
	}
	.cennik-tabela td {
		padding: 12px 6px;
	}
	.cennik-tabela td.cennik-kwota {
		font-size: 15px;
	}
	.cennik-opis {
		margin-left: 0;
	}
}

.cennik-program-cena {
	margin: 0 0 12px 0;
	font-size: 28px;
	font-weight: 500;
	color: #EEE;
}
.cennik-program-cena span {
	display: block;
	font-size: 13px;
	font-weight: 400;
	opacity: 0.7;
}
.cennik-program-cena .cennik-drugi-rok {
	margin-top: 4px;
	font-size: 14px;
	opacity: 1;
}
.modul-kafelek.cennik-rabat {
	flex-basis: calc(50% - 20px);
	max-width: 520px;
}
.cennik-rabat-procent {
	display: block;
	margin-bottom: 10px;
	font-size: 40px;
	font-weight: 600;
	line-height: 1;
	color: #08c1b8;
}
.cennik-rabat .modul-nazwa i {
	margin-right: 6px;
	opacity: 0.8;
}
@media (max-width: 767px) {
	.modul-kafelek.cennik-rabat {
		flex-basis: 100%;
	}
}

.cennik-warunki {
	max-width: 900px;
	margin: 20px auto 40px auto;
}
.cennik-warunki .moduly-tytul {
	margin-bottom: 20px;
}
.cennik-proba {
	max-width: 900px;
	margin: 0 auto;
}
.cennik-proba-tekst {
	margin-bottom: 18px;
	font-size: 18px;
	color: #EEE;
}

/* ---------- strona programu przed premierą (program-pelna-ksiegowosc.php): znacznik, formy licencji, cennik ---------- */
#formy,
#cennik {
	scroll-margin-top: 110px;
}
.program-znacznik-wkrotce {
	display: inline-block;
	margin-top: 14px;
	padding: 4px 16px;
	border: 1px solid #08c1b8;
	border-radius: 20px;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #08c1b8;
}
.program-znacznik-wkrotce i {
	margin-right: 6px;
}
/* dwie formy licencji obok siebie, na telefonie jedna pod drugą */
.program-formy .modul-kafelek {
	flex-basis: calc(50% - 20px);
}
@media (max-width: 767px) {
	.program-formy .modul-kafelek {
		flex-basis: 100%;
	}
}
/* cena za spółkę w pakietach dla biur; w karcie Spółka pusty wiersz - ceny kart na tej samej wysokości */
.cennik-za-spolke {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #08c1b8;
}