/* reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
	--padding: 0.5rem;
	--tbGap: 0.5rem;
	--bgColor: #f3f5f6;
	--linkColor: #0d6efd;
	--btnColor: #0d6efd;
	--btnTextColor: white;
	--borderColor:silver;
	--panelPadding: 0.75rem;
}
@media screen and (min-width: 48rem) {
	:root {	
		--padding: 1.5rem;
		--tbGap: 2rem;
		--panelPadding: 1rem;
	}
}

html {
	font-size: 100%;
	font-family: 'Open Sans', Arial, sans-serif;
	line-height: 1.5;
}
body {margin:0; background-color: var(--bgColor);}
a {color:var(--linkColor);}
hr {margin: 2rem 0; border-style:none; border-top: 1px solid silver;}
h1, h2, h3 {font-weight: normal; font-size: 150%;}
h1.large {font-size: 200%;}
.center {text-align: center;}
.right {text-align: right;}

header {padding: 1rem; background-color: white; box-shadow: 0 3px 8px rgb(0 0 0 / 5%);}
header .logo {display:block; margin: 0 auto;}

main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 1rem; 
	max-width: 70rem; 
	margin: 2rem auto; padding: 0.75rem;
}
main.login>div {width: 100%; max-width: 24rem;}

nav {padding: 0.25rem 0.75rem; min-width: 16rem; max-width: 30%;}


/* @media screen and (min-width: 64rem) {
	main {display: grid; grid-template-columns: minmax(16rem, 20%) 1fr; gap: 1rem;}
}*/

nav h1, nav p {margin:0.5rem 0;}
nav hr {margin:1rem 0;}
nav a {color:black; text-decoration: none;}
nav>ul {padding-left: 0; margin:1rem 0;}
nav>ul>li {list-style-type: none; padding: 0.25rem 0;}
nav .icon {margin-right:0.25rem;}
h1 .icon {font-size:1rem; position: relative; top: 0.5rem;}

section {max-width: 40rem;}
section.small {width: 100%; max-width: 24rem;}
.panel {
	padding: var(--panelPadding);
	background-color: white;
	border-radius: 15px;
	box-shadow: 0 3px 8px rgb(0 0 0 / 7%);
	margin-top:2rem;
	margin-bottom:2rem;
}
.panel > *:first-child {margin-top:0;}
.panel > *:last-child {margin-bottom:0;}

.formCont {
	margin:0 auto; 
	max-width: 22rem;
}
/*
.formCont.login {
	max-width: 60rem;
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 5rem;
	justify-items: center;
}
.formCont.login>div {width:100%; max-width:22rem;}

@media screen and (min-width: 48rem) {
	.formCont.login {
		grid-template-columns: 1fr 1fr; 
		align-content: center;
		min-height: 50vh;
	}
	.formCont.login>div {width:auto;}
}*/

form .controls {text-align: left; margin:0 auto;}
form fieldset {border-style:none; padding:0; margin:0;}
form .controls .pair {margin:0.5rem 0 1rem 0;}
form .controls .pair:last-child { 
	/*poslední jsou tlačítka*/
	margin:0.5rem 0 1rem 0;
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	gap:0.5rem;
	justify-content: space-between;
}
.buttonsCenter .controls .pair:last-child {flex-direction: row; justify-content: center;}

form .pair.error input {border-color:#e60000;}
form .pair.error .error {color:#e60000;}
form ul.error {padding:0;}
form ul.error li {display:block; color:#e60000;}

input, button, textarea {
	font-size: 16px;
  font-size: max(16px, 1em);
  font-family: inherit;
	padding: 0.25em;
}
input.text, input.password, textarea {
	width:100%;
	background-color: #fff;
	border: 1px solid #666;
	border-radius: 3px;
}
.passLabel {display: flex; justify-content: space-between;}
.passLabel button {padding:0; font-size:95%;}

button.btn, input.btn, a.btn {
	background-color: white; color: var(--btnColor);
	border-radius: 2rem; border: 1px solid var(--btnColor); 
	padding:0.35rem 0.75rem;
	cursor: pointer; text-decoration: none;
}
a.btn {line-height: 2.5rem; white-space: nowrap;}
button.btn-primary, input.btn-primary, a.btn-primary {background-color: var(--btnColor); color: var(--btnTextColor);}

button.link, input[type=button].link {
	display:inline-block; 
	padding: 0;
	cursor: pointer; text-decoration: underline; 
	color:var(--linkColor); 
	background-color: transparent;
	border:1px solid transparent;
}

.netteFormsModal {background-color: white; border-radius: 0.5rem;}

.gridtable>div {
	display: grid; gap: 0 1rem; grid-template-columns: repeat(2, 1fr); /*grid-template-rows: repeat(2, auto);*/
	padding: 0.5rem; margin:1rem 0;
	border:1px solid var(--borderColor); border-radius: 10px;
}
.gridtable>div.header {display: none;}
@media screen and (min-width: 36rem) {
	.gridtable>div {
		gap: 0 2rem;
		grid-template-columns: 1.2fr 0.8fr 1fr 1fr; /*grid-template-rows: auto;*/
		padding: 0.5rem 0; margin: 0; 
		border-radius: 0; border-style: none; border-bottom:1px solid var(--borderColor);
	}
	.gridtable>div.header {display: grid; border-top:1px solid var(--borderColor); font-weight: bold;}
	.gridtable>div div.tableright {text-align: right;}
}


dl {display: grid; grid-template-columns: max-content auto; gap:0.5rem 1rem;}
dd {margin-left: 0;}

summary {cursor: pointer;}

.order .thumb {
	display: block;
	max-width: 14rem;
	max-height: 14rem;
	box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
	background-color: white;
	padding: 0 !important;
}
.order>.row {
	display:flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0;
	border-top:1px solid var(--borderColor);
}
.order>.row:first-child {border-top-style: none; padding-top: 0;}
.order .dl-horizontal {gap:0 1rem; margin:0; grid-template-columns: max-content max-content;}
.order .dl-horizontal>dd {text-align: right;}
.order>.row>.colInfo {display:flex; flex-direction: column; gap: 0.5rem;}
.order .total {font-weight: bold;}
@media screen and (min-width: 30rem) {
	.order>.row {flex-direction: row; gap: 1rem;}
	.order>.row.simple>div {text-align: right;}
	.order>.row.simple>div:first-child {flex:2;}
	.order>.row>div {flex:1;}
	.order>.row>.colInfo {flex:2;}
}

img.qrcode {margin:2rem;}


/* Icomoon */
.icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	vertical-align: text-top;
}

.cols {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.cols.evenly {
	justify-content: space-evenly;
}