body { padding: 20px 0; }
body.green { background-color: #2FDC32; }
/*body.red { background-color: #EC251D; }*/
body.red .panel-top { background: #FFD2D2; border-color: #AF0707; }
body.green .panel-top { background: #D4F1D4; border-color: #2BB92E; }
body.yellow { background: #D4F1D4; }

h3 .small { font-size: 16px; }

.iblock { display: inline-block; }

.qr-reader-wrap { margin-top: 80px; }
.qr-reader-wrap .label { padding: 10px; font-size: 20px; line-height: 1.3; white-space: normal; }
.qr-reader { position: relative; padding-top: 75%; }
.qr-reader-inner { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.qr-reader-inner.mirror {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.qr-reader-inner video { width: 100%; height: 100%; }

.no-margin { margin: 0; }

.well { border: none; box-shadow: none; }
.well.green,
.well.red { color: #fff; }
.well.green .well,
.well.red .well { color: #333; }
.well.green { background-color: #2FDC32; }
.well.red { background-color: #EC251D; }
.well.iblock { border-radius: 10px;}
.well.yellow { background: yellow; color: black; }

.vstupy { padding-top: 0; }
.vstupy .container { width: auto; }
.vstupy .control-label { font-size: 25px; font-weight: bold; margin-bottom: 1em; }
.vstupy form.ajax { padding: 30px 0 30px; margin-bottom: 0; text-align: center; }
.vstupy form.ajax input[type=text] { margin-bottom: 25px; }
.vstupy .time { padding: 40px 0 0; text-align: center; color: black; font-size: 17px; font-weight: normal; }

.panel { width: 30%; background: #ECECEC url(../img/bg-qr-2.png) 50% 50%; color: black; position: fixed; top: 0; left: 0; bottom: 0; border-right: 1px solid #ddd; }
.panel-top { background: #F7F7F7; }
.output { width: 70%; margin-left: 30%; }
.vstupy h4 { margin-top: 0; }
.vstupy p.label { display: block; border-radius: 0; text-align: center; background: transparent; color: #949494; font-weight: normal; }
.vstupy p.label.label-success { background: #2FDC32; color: white; }
.vstupy .panel p.label { margin-bottom: 0; padding: 20px 0; font-size: 17px; text-shadow: none; }
.vstupy .panel p.label.hidden { display: none; }
.vstupy .qr-reader-wrap { margin-top: 0; border-top: 1px solid #ddd; }

.links { margin: 0; padding-bottom: 20px; text-align: center; }


/* Animations - Webkit */
@-webkit-keyframes fadeRed {
	0% { background-color: #FF0000; color: white; }
	1% { background-color: #FFFFFF; color: black; }
	2% { background-color: #FF0000; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	4% { background-color: #FF0000; color: white; }
	5% { background-color: #FFFFFF; color: black; }
	6% { background-color: #FF0000; color: white; }
	7% { background-color: #FFFFFF; color: black; }
	8% { background-color: #FF0000; color: white; }
	10% { color: black; }
	100% { background-color: white; color: black }
}
@-webkit-keyframes fadeRed2 {
	0% { background-color: #FF0000; color: white; }
	1% { background-color: #FFFFFF; color: black; }
	2% { background-color: #FF0000; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	4% { background-color: #FF0000; color: white; }
	5% { background-color: #FFFFFF; color: black; }
	6% { background-color: #FF0000; color: white; }
	7% { background-color: #FFFFFF; color: black; }
	8% { background-color: #FF0000; color: white; }
	10% { color: black; }
	100% { background-color: white; color: black }
}
@-webkit-keyframes fadeRedBox {
  0% { background-color: #C51C15; color: white; }
  100% { background-color: red; color: white; }
}
@-webkit-keyframes fadeGreen {
	0% { background-color: #2FDC32; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	6% { background-color: #2FDC32; color: white; }
	9% { background-color: #FFFFFF; color: black; }
	12% { background-color: #2FDC32; }
	100% { background-color: white; color: black; }
}
@-webkit-keyframes fadeGreen2 {
	0% { background-color: #2FDC32; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	6% { background-color: #2FDC32; color: white; }
	9% { background-color: #FFFFFF; color: black; }
	12% { background-color: #2FDC32; }
	100% { background-color: white; color: black }
}
@-webkit-keyframes fadeGreenBox {
  0% { background-color: green; color: white; }
  100% { background-color: #2FDC32; color: white; }
}

/* Animations - Mozilla */
@-moz-keyframes fadeRed {
	0% { background-color: #FF0000; color: white; }
	1% { background-color: #FFFFFF; color: black; }
	2% { background-color: #FF0000; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	4% { background-color: #FF0000; color: white; }
	5% { background-color: #FFFFFF; color: black; }
	6% { background-color: #FF0000; color: white; }
	7% { background-color: #FFFFFF; color: black; }
	8% { background-color: #FF0000; color: white; }
	10% { color: black; }
	100% { background-color: white; color: black }
}
@-moz-keyframes fadeRed2 {
	0% { background-color: #FF0000; color: white; }
	1% { background-color: #FFFFFF; color: black; }
	2% { background-color: #FF0000; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	4% { background-color: #FF0000; color: white; }
	5% { background-color: #FFFFFF; color: black; }
	6% { background-color: #FF0000; color: white; }
	7% { background-color: #FFFFFF; color: black; }
	8% { background-color: #FF0000; color: white; }
	10% { color: black; }
	100% { background-color: white; color: black }
}
@-moz-keyframes fadeRedBox {
  0% { background-color: #C51C15; color: white; }
  100% { background-color: red; color: white; }
}
@-moz-keyframes fadeGreen {
	0% { background-color: #2FDC32; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	6% { background-color: #2FDC32; color: white; }
	9% { background-color: #FFFFFF; color: black; }
	12% { background-color: #2FDC32; }
	100% { background-color: white; color: black; }
}
@-moz-keyframes fadeGreen2 {
	0% { background-color: #2FDC32; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	6% { background-color: #2FDC32; color: white; }
	9% { background-color: #FFFFFF; color: black; }
	12% { background-color: #2FDC32; }
	100% { background-color: white; color: black }
}
@-moz-keyframes fadeGreenBox {
  0% { background-color: green; color: white; }
  100% { background-color: #2FDC32; color: white; }
}

/* Animations - standard */
@keyframes fadeRed {
	0% { background-color: #FF0000; color: white; }
	1% { background-color: #FFFFFF; color: black; }
	2% { background-color: #FF0000; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	4% { background-color: #FF0000; color: white; }
	5% { background-color: #FFFFFF; color: black; }
	6% { background-color: #FF0000; color: white; }
	7% { background-color: #FFFFFF; color: black; }
	8% { background-color: #FF0000; color: white; }
	10% { color: black; }
	100% { background-color: white; color: black }
}
@keyframes fadeRed2 {
	0% { background-color: #FF0000; color: white; }
	1% { background-color: #FFFFFF; color: black; }
	2% { background-color: #FF0000; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	4% { background-color: #FF0000; color: white; }
	5% { background-color: #FFFFFF; color: black; }
	6% { background-color: #FF0000; color: white; }
	7% { background-color: #FFFFFF; color: black; }
	8% { background-color: #FF0000; color: white; }
	10% { color: black; }
	100% { background-color: white; color: black }
}
@keyframes fadeRedBox {
  0% { background-color: #C51C15; color: white; }
  100% { background-color: red; color: white; }
}
@keyframes fadeGreen {
	0% { background-color: #2FDC32; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	6% { background-color: #2FDC32; color: white; }
	9% { background-color: #FFFFFF; color: black; }
	12% { background-color: #2FDC32; }
	100% { background-color: white; color: black; }
}
@keyframes fadeGreen2 {
	0% { background-color: #2FDC32; color: white; }
	3% { background-color: #FFFFFF; color: black; }
	6% { background-color: #2FDC32; color: white; }
	9% { background-color: #FFFFFF; color: black; }
	12% { background-color: #2FDC32; }
	100% { background-color: white; color: black }
}
@keyframes fadeGreenBox {
  0% { background-color: green; color: white; }
  100% { background-color: #2FDC32; color: white; }
}

.red.animated {
	-webkit-animation: fadeRed 5s ease-in-out;
	-moz-animation: fadeRed 5s ease-in-out;
	-o-animation: fadeRed 5s ease-in-out;
	animation: fadeRed 5s ease-in-out;

	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.red.animated2 {
	-webkit-animation: fadeRed2 5s ease-in-out;
	-moz-animation: fadeRed2 5s ease-in-out;
	-o-animation: fadeRed2 5s ease-in-out;
	animation: fadeRed2 5s ease-in-out;

	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.green.animated {
	-webkit-animation: fadeGreen 5s ease-in-out;
	-moz-animation: fadeGreen 5s ease-in-out;
	-o-animation: fadeGreen 5s ease-in-out;
	animation: fadeGreen 5s ease-in-out;

	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.green.animated2 {
	-webkit-animation: fadeGreen2 5s ease-in-out;
	-moz-animation: fadeGreen2 5s ease-in-out;
	-o-animation: fadeGreen2 5s ease-in-out;
	animation: fadeGreen2 5s ease-in-out;

	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.well.red.animated .well.iblock {
	-webkit-animation: fadeRedBox 5s ease-in-out;
	-moz-animation: fadeRedBox 5s ease-in-out;
	-o-animation: fadeRedBox 5s ease-in-out;
	animation: fadeRedBox 5s ease-in-out;

	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.well.green.animated .well.iblock {
	-webkit-animation: fadeGreenBox 5s ease-in-out;
	-moz-animation: fadeGreenBox 5s ease-in-out;
	-o-animation: fadeGreenBox 5s ease-in-out;
	animation: fadeGreenBox 5s ease-in-out;

	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@media (max-width: 880px) {
	.panel {
		width: 100%;
		position: static;
		border-right: none;
	}

 	.vstupy .time {
 		padding: 20px 0 0;
 	}

	.vstupy form.ajax {
	 	padding: 15px 0 20px;
	}

	.output {
		width: 100%;
		margin-left: 0;
	}

	.qr-reader-wrap {
		display: none;
	}
}