@keyframes success {
	from { color: lime; }
	to { color: black; }
}

@keyframes fail {
	from { color: red; }
	to { color: black; }
}

@keyframes expand {
	from { height: 2em; }
	to { height: 8em; }
}

@keyframes collapse {
	from { height: 8em; }
	to { height: 2em; }
}

input[type=number] {
	appearance: textfield;
}

span {
	animation-duration: 2s;
}

#reports-frame {
	animation-duration: 1s;
}

.row {
	text-align: center;
}

.warning_success {
	animation-name: success;
}

.warning_fail {
	animation-name: fail;
}

.reports-expanding {
	animation-name: expand;
}

.reports-collapsing {
	animation-name: collapse;
}

.tryAgain {
	background-color: brown;
	color: white;
	display: none;
}

table.controls {
	width: 100%;
	margin-bottom: 10pt;
}

td.labels {
	width: 50%;
	vertical-align: top;
	text-align: right;
	border-width: 4px;
	border-color: white;
	border-style: solid;
}

td.inputs {
	width: 170px;
	text-align: left;
	border-width: 4px;
	border-color: white;
	border-style: solid;
}

input.input-lg {
	text-align: center;
}

td.emptiness {
	width: auto;
}

p.counters {
	
}

label.controls {
	font-size: 125%;
	margin-right: 10pt;
}

div#reports-frame {
	border-style: dotted;
	border-width: 2px;
	border-color: silver;
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
}

div#reports-expand {
	padding: 2px 2px 2px 2px;
	border: solid 1px gray;
	position: absolute;
	right: 0%;
	top: 0%;
	cursor: sw-resize
}

.reports-small {
	height: 2em;
}

.reports-expanded {
	height: 8em;
}

.final-controls {
	text-align: right;
	padding-right: 30pt;
}

div#cover-animation {
	position: fixed;
	left: 0px;
	top: 0px;
	margin: 0px 0px 0px 0px;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 100;
	animation-duration: 4s;
}

@keyframes timeflows {
	0% { opacity: 0; }
	/*20% { opacity: 0.25; background-color: cyan; }*/
	25% { opacity: 0.5; background-color: orange; }
	50% { opacity: 0.75; background-color: navy; }
	75% { opacity: 0.4; background-color: teal; }
	100% { opacity: 0; background-color: cyan; display: none;}
}

.start-timeflows {
	animation-name: timeflows;
}

.alert {
	display: none;
	text-align: center;
}