:root {
  --primary-color: #0076BC;
  --secondary-color: #90b4d9;
  --backgroud-color: #e6eff5;
  --white: white;
  --green: green;
  --light-grey: #E5E5E5;
  --grey: #D9D9D9;
  --dark-grey: #54565A;
  --yellow: #FFFBA7;
}
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
iframe,
img {
  max-width: 100%;
}
/*layout*/
body {
  background-color: var(--backgroud-color);
  font-family: Segoe UI, Helvetica, sans-serif;
  line-height: 150%;
}
.main{
	font-size:1rem;
}
p{
	font-size:1rem
}

.addaptableText{
	font-size:min(1.5vw, 1rem);
	
}

.addaptableColumnWidth{
	width:min(20vw, 250px);
}

.bold {
  font-weight: 700;
}
.normalHeight,
input.normalHeight {
  font-size: 1rem;
}
.noteHeight {
  font-size: 0.6875rem;
}
.title {
  color: var(--primary-color);
  font-size: 2.25rem;
  font-weight: 700;
  margin-block: 1em;
}
.subtitle {
  color: var(--primary-color);
  font-size: 1.625rem;
  font-weight: 700;
  margin-block: 1em;
  line-height: 120%;
}
.terms-table {
  /*   >*{
        padding-inline: 10px
    } */
}
.terms-table p {
  margin-top: 2em;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}
.terms-table > div {
  padding: 1rem;
  border-bottom: 1px solid var(--dark-grey);
}

.terms-table.small > div {
  padding-block: 0.5rem;
}

.terms-table > div:last-of-type {
  border-bottom: none;
}

.flex-table {
  display: grid;
  gap: 1em;
}

.screen{
	display:none;
}
.mobile{
	display:inline;
}

@media (min-width: 768px){
	.flex-table {
		display: flex;
	}
	
	.flex{
		display: flex;
		gap: 1em;
		
	}

	.flex>*{
		flex-basis:max-content;
		flex-shrink:0;
	}
	.screen{
		display:inline;
	}
	.mobile{
		display:none;
	}
}


.flex-table > * {
  flex-grow: 1;
  flex-basis: 100%;
}
.center {
  text-align: center;
  justify-content:center;
}
.centerAll {
  display: grid;
  place-content: center;
}
div.space-between {
  display: flex;
  justify-content: space-between;
  gap:1rem;
}
.display-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
}
.varning {
  padding: 1rem 3rem 1rem 3rem;
  background-color: var(--yellow);
  border-radius: 1rem;
  position:relative;
  margin-block:1em;
}
.varning::before {
  content: '\26A0';
  left:2rem;
  position:absolute;
}
.greyed {
  background-color: var(--light-grey);
}
.round-shadow {
  border-radius: 1rem;
  box-shadow: 5px 5px 10px 5px var(--grey);
  margin-block:1rem;
}
ul.listCheck{
  list-style: none;
  padding: 0.5em 20px;
  line-height: 200%;
}
ul.listCheck li {
  position: relative;
  padding-left:0;
  background: none;
}
.listCheck li::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 0.8em;
  width: 0.8em;
  height: 0.8em;
  background-image: url("/css/img/check_blue.png");
  background-size: contain;
  background-repeat: no-repeat;
}

input.input{
  padding: 0.5em 1em;
  border-radius: 1rem;
}

.fancybox-wrap{
	border-radius: 1rem;
}

/*button-link*/
input.button-link,
.button-link {
  padding: 1em 2em;
  border-radius: 1rem;
  cursor: pointer;
  background-color: var(--primary-color);
  color: var(--white);
  display: inline-block;
  text-align: center;
  margin-block: 1em;
}
a.button-link{
text-decoration: none;
}

.button-link.big {
  font-size: 1.2rem;
}

.button-link.small {
  padding: 0.2em 0.5em;
}

@media (min-width: 768px){
	.button-link.small {
	  padding: 0.5em 1em;
	}
}
.button-link * {
  transition: 0.5s;
}
.button-link:hover * {
  transform: translateX(0.5em);
}
.button-link:hover {
  background-color: var(--secondary-color);
  color: var(--white);
}
.button-link-white {
  padding: 1em 2em;
  border-radius: 1rem;
  cursor: pointer;
  color: var(--primary-color);
  display: inline-block;
  text-align: center;
  transition: 0.5s;
  margin-block: 1em;
}

a.button-link-white,
a.button-link-white-basic{
text-decoration: none;
}

.button-link-white * {
  padding-right: 0.5em;
  transition: 0.5s;
}
.button-link-white:hover * {
  transform: translateX(0.5em);
  color: white;
}
.button-link-white:hover {
  background-color: var(--secondary-color);
}
.button-link-white-basic {
  padding: 1em 2em;
  border: 1px solid var(--primary-color);
  border-radius: 1rem;
  cursor: pointer;
  color: var(--primary-color);
  display: inline-block;
  text-align: center;
  background-color: white;
  text-decoration: none;
  margin-block: 1em;
}
.button-link-white-basic.small {
  padding: 0.5em 1em;
}
.button-link-white-basic:hover {
  background-color: var(--secondary-color);
  color: var(--white);
}

.button-cart{
	background-image: url("/css/img/icons8-shopping-cart-96.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40%;
}
.button-cart>div{
	display:none;
}

@media (min-width: 768px){
	.button-cart{
		background-image:none;
	}
	.button-cart>div{
		display:inline-block;
	}
}




/*rozcestnik*/
nav {
  text-align: center;
}
.rozcestnik-2022{
  margin-block: 2em;
  display: grid;
  outline: 2px solid var(--primary-color);
  border-radius: 1rem;
  background-color: var(--white);
  padding: 0;
  overflow:hidden;
}

@media (min-width: 768px){
	.rozcestnik-2022{
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
	
	.rozcestnik-2022 a {
		border-radius: 1rem;
	}
}

.rozcestnik-2022 >* {
  display: grid;
  align-content: stretch;
  z-index: 0;
}

.rozcestnik-2022 a {
  display: flex;
  gap: 1em;
  padding: 0.5rem 2rem 0.5rem 2rem;
  background-color: var(--white);
  align-items: center;
  justify-content: space-around;
  text-decoration: none;
  color: var(--primary-color);
  font-size: 1.2rem;
  transition: 0.5s;
}
.rozcestnik-2022-small a {
  font-size: 1rem;
}
.rozcestnik-2022 img {
  max-width: 40px;
}
.rozcestnik-2022 >*.active > a {
  background-color: var(--secondary-color);
  color: var(--white);
  box-shadow: 0 0 1em -0.2em var(--secondary-color);
  text-decoration: underline;
}
.rozcestnik-2022 >*.active {
  z-index: 1;
  background-color:transparent;
}
.rozcestnik-2022 >*:hover {
  z-index: 1;
}
.rozcestnik-2022 a:hover,
.rozcestnik-2022 a:active {
  background-color: var(--secondary-color);
  color: var(--white);
  box-shadow: 0 0 1em -0.2em var(--secondary-color);
}

/*product grid*/
.product-grid {
  display: grid;
  gap: 2rem;
  margin-block: 2rem;
}

@media (min-width: 768px){
	.product-grid-2columns {
	  grid-template-columns: 1fr 1fr;
	}
}
.product {
  border-radius: 1rem;
  background-color: var(--white);
  box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2);
  padding: 2em;
  display: grid;
  color: inherit;
  align-content: center;
}

.product-picture{
	padding-bottom:0.5rem;
	display: grid;
	align-content: flex-end;
}


a.product{
	  text-decoration: none;
}

a.product:hover{
	  color:inherit;
}

.product .productTitle {
  grid-area: title;
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--primary-color);
  line-height: 130%;
}
.product ul {
  padding: 1em;
}
.product .productTermsTable {
  grid-area: termsTable;
}
.product .productTerms {
  font-weight: 700;
  grid-area: terms;
  position: relative;
  margin-block: 0.5rem;
}
.product .productTerms.active {
  margin-left: 1.5em;
  background-color:transparent;
}
.product .productTerms.active::before {
  content: '';
  top: 0.5em;
  width: 0.8em;
  height: 0.8em;
  left: -1em;
  background-color: var(--green);
  border-radius: 50%;
  position: absolute;
}
ul.listDot,
.product .productDescription {
  grid-area: description;
  line-height: 200%;
}
ul.listDot li,
.productDescription ul li{
	background:none;
	position:relative;
	
}

ul.listDot li::before,
.productDescription ul li::before{
  content: '';
  top: 0.8em;
  width: 0.4em;
  height: 0.4em;
  left: -0.2em;
  background-color: var(--primary-color);
  border-radius: 50%;
  position: absolute;
}

.product  ul{
		margin-block:0;
}
.product .productPrice {
  grid-area: price;
  align-self: center;
  font-weight: 700;
  font-size: 1rem;
}
.product .productButton {
  grid-area: button;
  align-self: center;
}
.product .productPicture {
  grid-area: picture;
}
.product .productPicture {
  text-align: center;
  background-color: var(--light-grey);
  padding: 2em 0.5em;
}
.product .productPicture * {
  font-size: 1rem;
}
.product .productPicture :first-child {
  font-size: 1.4rem;
  font-weight: 700;
}
.product-card-wide {
  grid-template-areas: 'terms terms terms' 'description description description' 'price button X' 'termsTable termsTable termsTable';
  gap: 1em;
  grid-template-columns: minmax(150px, 1fr) minmax(200px, 1fr) 4fr;
}
.product-card {
  grid-template-areas: 'title title' 'terms terms' 'description description' 'price button';
  align-content: stretch;
  grid-template-rows: min-content min-content auto min-content;
}
.product-card-picture {
  grid-template-areas: 'title title title title' 'description description description picture' 'price price button button';
  grid-template-rows: auto auto 4em;
  align-content: stretch;
}
.product-card-picture .productTitle {
  font-size: 1rem;
  font-weight: 700;
}
.product-card-noTerms {
  grid-template-areas: 'title title' 'description description' 'price button';
  grid-template-rows: max-content auto 4em;
  align-content: stretch;
}
.product-card-basic {
  grid-template-areas: 'title' 'description';
}
/*section questions*/
.questions {
  display: grid;
}
.question {
  border: 1px solid var(--primary-color);
  border-radius: 1rem;
  padding: 16px 20px 14px 20px;
  background-color: inherit;
  text-align: left;
  margin-block: 1em;
}

@media (min-width: 768px){
	.question {
		padding: 16px 50px 14px 50px;
	}
	
}


.question-mark{
	display:inline-block;
	height:1rem;
	width:1rem;
	background-image:url('data:image/svg+xml,\00003csvg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\00003cpath fill="rgb(0,118,188)" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z">\00003c/path>\00003c/svg>');
	background-repeat: no-repeat;
	flex-basis:1rem;
	flex-shrink: 0;
}

.question-mark.rotated{
	transform:rotateZ(-180deg);
}
.question-title {
  display:flex;
  justify-content:space-between;
  color: var(--primary-color);
  font-weight: 700;
  position:relative;
  cursor: pointer;
}

.question-description {
  margin-top: 2em;
  display: none;
}
/*products table*/
.products-table {
  text-align: center;
  width: 100%;
  border-spacing: 0;
  table-layout: fixed;
}
.products-table td {
  padding: 1em 0.5em;
}
.products-table td:nth-child(even) {
  background-color: var(--light-grey);
}
.products-table td:nth-child(odd) {
  background-color: var(--grey);
}
.products-table td:first-child {
  background-color: transparent;
  text-align: left;
}
.products-table td {
  position: relative;
  border-bottom: 1px solid var(--dark-grey);
}
.products-table tr:last-child td {
  border-bottom: none;
}
.products-table td.check::after {
  content: '';
  background-image: url("/css/img/check_green.png");
  background-repeat: no-repeat;
  background-position: center;
  inset: 0;
  position: absolute;
  background-size: 20px;
}
.products-table td.cross::after {
  content: '';
  background-image: url("/css/img/cross_grey.png");
  background-repeat: no-repeat;
  background-position: center;
  inset: 0;
  position: absolute;
  background-size: 20px;
}

.rightside2.full {
    padding: 25px;
    width: auto;
}

.shop{
    border-radius: 1rem;
    box-shadow: 0 0 1.5rem 0 rgba(0,0,0, 0.2);
    text-decoration: none;
    color: inherit;
    align-content: center;
	margin-block:1rem;

}

.shop.vicePolozek .polozka{
	padding-left:0;
}

.shop .cena{
	padding-left:0;
	font-weight:700;
	font-size: 0.8125rem;
	margin-top:2em;
	margin-left:2em;
}

.shop.vicePolozek .obrazek{
	float:right;
	height:190px;
	margin-left:10px;
}

.shop .button-link::after{
        content: ' ->';
    }
	
.shop,
.shop.vicePolozek:nth-child(even),
.shop.vicePolozek:nth-child(odd){
	padding: 2rem;	
}

.shop img{
	max-width:100%;
}

.shop.vicePolozek > .obrazek{
	width:30%;
}

@media (min-width: 768px){
	.shop.vicePolozek > .polozka{
		height:300px;
	}
}


@media (min-width: 768px){
	.shop.vicePolozek:nth-child(odd){
		margin-right:2rem;
	}
	.shop.vicePolozek{
		width:calc(50% - 1rem);
	}
}

.tooltipBody{
	padding:1rem;
	background-color:var(--white);
	font-size:1rem;
	border:1px solid var(--primary-color);
	border-radius:1rem;
}

.tooltipHead{

}

.sOtaznikem{
	display:flex;
}

.sOtaznikem div{
	margin-right:2rem;
	position:relative;
}

.sOtaznikem > div::after{
	position:absolute;
	right:-2rem;
	content:"?";
	color:white;
	background-color:var(--primary-color);
	padding:0 0.6rem;
	border-radius:50%;
}
.otaznik{
	position:relative;
	width:25px;
	height:25px;
	flex-basis:25px;
	margin-inline:auto;
}

.otaznik::after{
	position:absolute;
	content:"?";
	color:white;
	background-color:var(--primary-color);
	inset: 0;
	border-radius:50%;
}

#mestoKonaniID,
#filtrPolozek select{
	border:none;
	padding: 1rem 1rem 1rem 2rem;	
	border-radius: 1rem;
	outline:2px solid var(--primary-color);
	height:auto;
}

#pkForm label{
	padding:1rem 2rem;
	line-height:100%;
	border-radius:1rem;
}

#pkForm h4{
	margin-top:1rem;
}

.table.kurzy2SS th:first-child {
	border-top-left-radius: 1rem;
}

.table.kurzy2SS th:last-child {
	border-top-right-radius: 1rem;
}

.table.kurzy2SS{
	border-radius:1rem;
}

.table.kurzy2SS tr td{
	vertical-align: middle;
}



.lista-tlacitky{
	display: flex;
    align-items: center;
}

.breadcrums a:last-of-type{
	background:none;
}

.tablePK td,
.tablePK th{
		text-align:center;
		vertical-align:middle;
}

.tablePK thead th{
	background-color:var(--secondary-color);
}

.tablePK thead tr:last-child th{
	background-color:var(--light-grey);
}

.tablePK thead tr:last-child th:first-child{
	background:none;
}

.tablePK tbody tr td:first-child{
	background-color:var(--light-grey);
}

.tablePK tbody tr:nth-child(even) td:first-child{
	background-color:var(--grey)
}

.tablePK thead th:empty{
	background:none;
	border-block:none;
	border-left:none;
}
.tablePK th
{
	border:none;
}


/*detail image dialog*/
.detailedImageDialog{
	margin:auto;
	padding:20px;
	width:max(50%,800px);
	border-radius:1rem;
	border:none;
}
#detailedImage{
	width:100%;
}
/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 35px;
  cursor: pointer;
}

.withDetailDialog{
	cursor:zoom-in;
}


/*carousel*/
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: 0 auto auto auto;
}

/* Hide the images by default */
.kolotocSnimky {
  display: none;
}

.kolotocSnimky iframe{
	height:50vw;
}

.kolotocSnimky .centerAll{
	height:100%;
}


.kolotocSnimky > .flex{
	display:grid;
	grid-auto-columns:1fr;
	place-items:stretch;
	gap:1rem;
	height:100%;
	align-items:center;
}


.kolotocSnimky .rounded{
	border-radius: 1rem;
	box-shadow: 5px 5px 10px 5px var(--grey);
	overflow: hidden;
}	

.kolotocSnimky iframe{
	height:100%;
	}
	
.kolotocSnimky {
		height:600px;
		max-height:100vh;
		text-align:center;
	}

@media (min-width: 768px){
	.kolotocSnimky > .flex{
	grid-auto-flow:column;
	}
	
	.kolotocSnimky {
		height:min(400px,80vw);
		max-height:100vh;
		text-align:center;
	}
	
	.kolotocSnimky iframe{
	height:60%;
	}
	
	.kolotocSnimky img{
	height:100%;
	}
	
	
}

/* Next & previous buttons */
a.prev, a.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-decoration: none;
  text-shadow: 0 0 1px black;
}

/* Position the "next button" to the right */
a.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
a.prev:hover, a.next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
  opacity: 1;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#invisible_layer{
  position: absolute;
  background-color:transparent;
  inset:0;
  z-index:10;
}