body {
			font-family: Arial, sans-serif;
			margin: 0 auto;
			padding: 20px;
			color: #333;
			background-color: #ef2c38;
			min-width: 335px;
		}
        h1 {
			font-size: 1.8em;
            text-align: right;
            color: #fff;
			max-width: 600px;
			margin: 0.5em auto;
			padding-right: 0.75em;
        }
		h1.c, .ta-center {
			text-align: center;
		}
		h1.l {
			text-align: left;
		}
		.top-banner {
			margin: 0 auto;
			max-width: 600px;
		}
		.top-banner img {
			width: 100%;
		}
		.top-banner.bottom {
			padding-top: 1em;
		}
        .form {
            max-width: 600px;
			margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
		.fixed-toolbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background-color: #ffffffee;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
			padding: 10px 0px;
			z-index: 1000;
		}
		.toolbar-content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			max-width: 600px;
			margin: 0 auto;
		}
		.toolbar-buttons {
			display: flex;
			gap: 0.35em;
		}
		.toolbar-buttons button {
			padding: 8px 12px;
			background-color: #28a745;
			font-size: 18px;
			color: white;
			border: none;
			border-radius: 4px;
			font-size: 1em;
			cursor: pointer;
		}
		.toolbar-buttons button:hover  {
			padding: 8px 12px;
			background-color: #218838;
			font-size: 18px;
			color: white;
			border: none;
			border-radius: 4px;
			font-size: 1em;
			cursor: pointer;
		}
		#cancel-button, #retry-btn {
			padding: 8px 12px;
			background-color: #007bff;
			font-size: 1em;
			color: white;
			border: none;
			border-radius: 4px;
			font-size: 1em;
			cursor: pointer;
		}
		#cancel-button:hover {
			background-color: #0056b3;
		}
		.total {
			font-weight: bold;
			font-size: 1em;
		}
		#total {
			padding: 8px 12px;
			background-color: #ef2c38;
			font-size: 18px;
			color: white;
			border: none;
			border-radius: 4px;
			font-size: 1.2em;
		}
 		.header-section, .menu-section {
            margin-bottom: 20px;
        }
        .header-section table {
            width: 100%;
            margin-bottom: 10px;
        }
        .header-section label {
            display: block;
            margin-bottom: 10px;
        }
		.header-section label[for*="pane"] {
            display: inline-block;
            margin-right: 0.7em;
        }
        .header-section input[type="text"], 
        .header-section input[type="email"] {
            width: calc(100% - 100px);
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .header-section input[type="number"] {
            width: 3em;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .section-title {
            font-size: 1.2em;
            cursor: pointer;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border-radius: 4px;
            margin-bottom: 5px;
			text-align: left;
			font-weight: bold;
			font-variant: small-caps;
			position: relative;
        }
        .section-title:hover {
            background-color: #0056b3;
        }
        .section-toggle {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2em;
            color: white;
        }
		.section-close::before {
			content: "▼" !important;
		}
		.section-toggle::before {
			content: "▲";
		}
        .submit-button {
            width: 100%;
            padding: 12px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1.2em;
            cursor: pointer;
            text-align: center;
        }
        .submit-button:hover {
            background-color: #218838;
        }
		@media (max-width: 450px) {
			h1 {
				font-size: 1.2em;
			}
		}
        @media (max-width: 600px) {
            form {
                padding: 10px;
            }
            .header-section input[type="text"], 
            .header-section input[type="email"] {
                width: 90%;
            }
        }
	.si-nopad {
		padding: 0;
	}
	.si-art {
		font-size: 1em;
	}
	.si-qta {
		color: green;
		width: 1.8em;
		text-align: center;
		border: none;
		font-size: 1.2em;
		font-weight: bold;
		position: relative;
		top: 2px;
	}
	.si-prz {
		text-align: right;
		padding-right: 0.8em;
		font-size: 0.8em;
		white-space: nowrap;
	}
	.si-pmb {
		width: calc(1.4em + 2px);
		height: 1.4em;
		position: relative;
		top: 2px;
	}
	.si-td-qta {
		width: 5.8em;
		height: 2.3em;
		text-align: right;
		white-space: nowrap;
	}
	.si-menu-item {
		border-bottom: 1px solid #ccc;
	}
	.si-sep {
		font-size: 0.5em;
	}
	.annotation {
		font-size: 0.8em;
		font-style: italic;
		text-align: left;
		margin-left: 5.5em;
	}
	.annotation p {
		margin: 0.4em;
	}
	.icon-info {
		display: inline-block;
		width: 16px;
		height: 16px;
		background-image: url(/img/info.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.icon-star {
		display: inline-block;
		width: 16px;
		height: 16px;
		background-image: url(/img/star.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.icon-warn {
		display: inline-block;
		width: 16px;
		height: 16px;
		background-image: url(/img/warn.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.footer-title {
		padding: 10px;
		background-color: #ed2b37;
		color: #ff0;
		border-radius: 4px;
		margin-bottom: 5px;
		text-align: left;
		position: relative;
	}
	.tooltiptext {
		display: none;
		width: 55%;
		max-width: 400px;
		background-color: #218838;
		color: #ffffff;
		font-size: 1em;
		text-align: left;
		border-radius: 3px;
		padding: 0.5em 0.5em;
		margin-left: 1em;
		position: absolute;
		z-index: 100;
	}
	.tooltiptext p {
		font-size: 0.8em;
		font-style: italic;
		color: #ff0;
	}
	.tooltip:hover {
		cursor: pointer;
	}
	#divcomanda,
	#divsend,
	#diverr,
	#divpnr {
		display: none;
	}
	
	.form img {
		width: 100%;
	}

	.loader {
		margin: 0 auto;
	}

	.loader0 {
	  width: 50px;
	  aspect-ratio: 1;
	  display: grid;
	  border-radius: 50%;
	  background: conic-gradient(#25b09b 25%,#f03355 0 50%,#514b82 0 75%,#ffa516 0);
	  animation: l22 2s infinite linear;
	}
	.loader0::before,
	.loader0::after {
	   content: "";
	   grid-area: 1/1;
	   margin: 15%;
	   border-radius: 50%;
	   background: inherit;
	   animation: inherit;
	}
	.loader0::after {
	   margin: 25%;
	   animation-duration: 3s;
	}
	@keyframes l22 {
	  100% {transform: rotate(1turn)}
	}

	.loader1 {
	  width: 40px;
	  height: 30px;
	  --c:no-repeat linear-gradient(#000 0 0);
	  background:
		var(--c) 0    100%/8px 30px,
		var(--c) 50%  100%/8px 20px,
		var(--c) 100% 100%/8px 10px;
	  position: relative;
	  clip-path: inset(-100% 0);
	}
	.loader1:before{
	  content: "";
	  position: absolute;
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	  background: #000;
	  left: -16px;
	  top: 0;
	  animation: 
		l5-1 2s   linear infinite,
		l5-2 0.5s cubic-bezier(0,200,.8,200) infinite;
	}
	@keyframes l5-1 {
	  0%   {left:-16px;transform:translateY(-8px)}
	  100% {left:calc(100% + 8px);transform:translateY(22px)}
	}
	@keyframes l5-2 {
	  100% {top:-0.1px}
	}

	.loader2 {
	  color: #1c4c5b
	}
	.loader2,
	.loader2:after {
	  box-sizing: border-box;
	}
	.loader2 {
	  display: inline-block;
	  position: relative;
	  width: 80px;
	  height: 80px;
	}
	.loader2:after {
	  content: " ";
	  display: block;
	  border-radius: 50%;
	  width: 0;
	  height: 0;
	  margin: 8px;
	  box-sizing: border-box;
	  border: 32px solid currentColor;
	  border-color: currentColor transparent currentColor transparent;
	  animation: loader2 1.2s infinite;
	}
	@keyframes loader2 {
	  0% {
		transform: rotate(0);
		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	  }
	  50% {
		transform: rotate(900deg);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	  }
	  100% {
		transform: rotate(1800deg);
	  }
	}

.loader4 {
  width: 70px;
  aspect-ratio: 1;
  background: conic-gradient(from -45deg,#8A8780 90deg,#94BA65 0 180deg,#2790B0 0 270deg,#2B4E72 0);
  animation: l20 2s infinite; 
}
@keyframes l20 {
  0%  {clip-path: polygon(0    0   ,100% 0   ,50% 50%)}
  25% {clip-path: polygon(100% 0   ,100% 100%,50% 50%)}
  50% {clip-path: polygon(100% 100%,0    100%,50% 50%)}
  75% {clip-path: polygon(0    100%,0    0   ,50% 50%)}
  100%{clip-path: polygon(0    0   ,100% 0   ,50% 50%)}
}

	.loader5 {
	  width: 100px;
	  height: 50px;
	  border-radius: 100px 100px 0 0;
	  position: relative;
	  overflow: hidden;
	}
	.loader5:before {
	  content: "";
	  position: absolute;
	  inset: 0 0 -100%;
	  background: radial-gradient(farthest-side at top,#0000 35%,#aa47be,#039be6,#26c6dc,#459e44,#f9ec44,#f68524,#fa3536,#0000) bottom/100% 50% no-repeat;
	  animation: l8 2s infinite;
	}
	@keyframes l8 {
	  0%,20%   {transform: rotate(0)}
	  40%,60%  {transform: rotate(.5turn)}
	  80%,100% {transform: rotate(1turn)}
	}

	.loader6 {
		display: inline-flex;
		gap: 10px;
		background-color: red;
		padding: 20px;
		border-radius: 70% 50%;
	}
	.loader6:before,
	.loader6:after {
	  content: "";
	  height: 20px;
	  aspect-ratio: 1;
	  border-radius: 50%;
	  background:
		linear-gradient(#19731f 0 0) top/100% 0% no-repeat,
		radial-gradient(farthest-side,#000 95%,#0000) 50%/8px 8px no-repeat
		#fff;
	  animation: l9 4s infinite ease-in;
	}
	@keyframes l9 {
	  0%  {background-size:100% 0%,8px 8px;background-position:top, 50% 50%}
	  80% {background-size:100% 70%,8px 8px;background-position:top, 50% 70%}
	  84%,
	  100%{background-size:100% 0%,8px 8px;background-position:top, 50% 50%}
	}

	.loader7 {
	  width: 64px;
	  aspect-ratio: 1;
	  background: 
		radial-gradient(farthest-side at bottom right,#F10C49 90%,#0000),
		radial-gradient(farthest-side at bottom left ,#F10C49 90%,#0000),
		radial-gradient(farthest-side at top    right,#F10C49 90%,#0000),
		radial-gradient(farthest-side at top    left ,#F10C49 90%,#0000),
		radial-gradient(farthest-side at bottom right,#f4dd51 90%,#0000),
		radial-gradient(farthest-side at bottom left ,#f4dd51 90%,#0000),
		radial-gradient(farthest-side at top    right,#f4dd51 90%,#0000),
		radial-gradient(farthest-side at top    left ,#f4dd51 90%,#0000),
		radial-gradient(farthest-side at bottom right,#e3aad6 90%,#0000),
		radial-gradient(farthest-side at bottom left ,#e3aad6 90%,#0000),
		radial-gradient(farthest-side at top    right,#e3aad6 90%,#0000),
		radial-gradient(farthest-side at top    left ,#e3aad6 90%,#0000);
	  background-size: 25% 25%;
	  background-repeat: no-repeat;
	  animation: l16 2s infinite;
	}
	@keyframes l16{
	  0% {background-position: 
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
	  16.67% {background-position: 
			calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
	  33.33% {background-position: 
			calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
			calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
	  50% {background-position: 
			calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
			calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
			calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
	  66.67% {background-position: 
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
			calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
			calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
	  83.33% {background-position: 
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
			calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
	  100% {background-position: 
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
			calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
	}

.loader3 {
  width: 50px;
  aspect-ratio: 1;
  color: #398EB6;
  position: relative;
  animation: l40 .5s infinite alternate;
}
.loader3:before,
.loader3:after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 25px 25px;
  background-position: 0 0,100% 0,100% 100%,0 100%;
  background-repeat: no-repeat;
}
.loader3:before {
  background-image:
    radial-gradient(farthest-side at top    left ,currentColor 96%,#0000),
    radial-gradient(farthest-side at top    right,currentColor 96%,#0000),
    radial-gradient(farthest-side at bottom right,currentColor 96%,#0000),
    radial-gradient(farthest-side at bottom left ,currentColor 96%,#0000);
  animation: l40-1 1s infinite;
}
.loader3:after {
  background-image: 
    radial-gradient(farthest-side at top    left ,#0000 94%,currentColor 96%),
    radial-gradient(farthest-side at top    right,#0000 94%,currentColor 96%),
    radial-gradient(farthest-side at bottom right,#0000 94%,currentColor 96%),
    radial-gradient(farthest-side at bottom left ,#0000 94%,currentColor 96%);
  animation: l40-2 1s infinite;
}
@keyframes l40-1 {
  0%,10%,90%,100% {inset:0}
  40%,60% {inset:-10px}
}
@keyframes l40-2 {
  0%,40%  {transform: rotate(0)}
  60%,100%{transform: rotate(90deg)}
}

#pnr-code {
    color: white;
    font-weight: bolder;
    font-size: xxx-large;
    padding: 0.1em 0.3em;
    margin: 0.1em 0.3em;
    border-radius: 0.2em;
    background-color: #0056b3;
    display: inline-block;
}

#divsend .form {
      display: flex;
      justify-content: center;
      align-items: center;
	  min-height: 160px;
}

.dots::after {
    display: inline-block;
    width: 0.8em;
    padding-left: 0.2em;
    content: '';
    animation: dotsAnim 2s infinite;
    text-align: left;
}

@keyframes dotsAnim {
	0%   { content: '';   }
	20%  { content: '.';  }
	40%  { content: '..'; }
	60% { content: '...';}
}

.errtxt {
	text-align: left;
	font-size: 10px;
	color: red;
}

.sepa {
	display: inline-block;
	width: 1.2em;
}