/*
MiniPOS web front-end stylesheet
Author: Simon Volpert <simon@simonvolpert.com>
Project page: https://simonvolpert.com/minipos/
This program is free software, released under the Apache License, Version 2.0. See the LICENSE file for more information
Consult the README file for usage instructions and other helpful hints
*/

body {
	font-size: 3.34vmin;
	text-align: center;
}

a:link, a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:link {
	color: #0000EE;
}

a:visited {
	color: #551A8B;
}

table {
	margin: auto;
}

#keypad {
	margin: auto;
}

.listing {
	width: 95vmin;
}

.listing td {
	padding-left: 1vmin;
	padding-right: 1vmin;
	max-width: 91vmin;
}

tr.odd {
	background-color: #d3d3d3;
}

tr.expand {
	text-align: left;
}

tr.expand span {
	padding-left: 3.34vmin;
}

tr.expand span.address {
	padding-left: 0;
}

.address {
	display: inline-block;
	word-break: break-all;
}

.txid {
	word-wrap: break-word;
}

@media screen {

	tr.expand {
		display: none;
	}

	tr.expand strong:after {
		content: "\a";
		white-space: pre;
	}
}

.error {
	animation: blinker 0.75s linear infinite;
	font-weight: bold;
}

@keyframes blinker {
	50% { opacity: 0; }
}

@keyframes fader {
	75% { opacity: 1; }
	100% { opacity: 0; }
}

input[type="button"], input[type="text"], input[type="submit"],
input[type="reset"], input[type="number"], input[type="email"] {
	width: 16.67vmin;
	height: 16.67vmin;
	font-size: 10vmin;
	font-weight: bold;
	background-color: #d3d3d3;
	border-radius: 1.67vmin;
	margin: 0;
	padding: 1vmin;
	margin-bottom: 1vmin;
	vertical-align: middle;
	border-width: 0.75vmin;
	border-style: solid;
	border-color: #e6e6e6 #808080 #808080 #e6e6e6;
	-webkit-appearance: none;
	-webkit-border-radius: 1.67vmin;
}

input[type="checkbox"], input[type="radio"] {
	width: 2.5vmin;
	height: 2.5vmin;
	margin-right: 1vmin;
	vertical-align: middle;
	-webkit-appearance: checkbox,radio;
}

input:active {
	border-color: #808080 #e6e6e6 #e6e6e6 #808080;
}

input:disabled {
	color: #bfbfbf;
}

input[type="button"]:disabled, input[type="submit"]:disabled,
input[type="reset"]:disabled, input[type="email"]:disabled {
	border-color: #e6e6e6 #808080 #808080 #e6e6e6;
}

input.text, input.text:active {
	width: 48.75vmin;
	text-align: center;
	background-color: white;
	border-color: #808080 #e6e6e6 #e6e6e6 #808080;
}

input.green {
	color: white;
	background-color: #006400;
	border-color: #00b300 #003300 #003300 #00b300;
}

input.green:active {
	border-color: #003300 #00b300 #00b300 #003300;
}

input.green:disabled {
	color: #169c16;
	border-color: #00b300 #003300 #003300 #00b300;
}

input.red {
	color: white;
	background-color: #ff0000;
	border-color: #ff8080 #990000 #990000 #ff8080;
}

input.red:active {
	border-color: #990000 #ff8080 #ff8080 #990000;
}

input.red:disabled {
	color: #ff8080;
	border-color: #ff8080 #990000 #990000 #ff8080;
}

input.blue {
	color: white;
	background-color: #0000ff;
	border-color: #8080ff #000099 #000099 #8080ff;
}

input.blue:active {
	border-color: #000099 #8080ff #8080ff #000099;
}

input.blue:disabled {
	color: #8080ff;
	border-color: #8080ff #000099 #000099 #8080ff;
}

input.back {
	padding-top: 0;
	padding-left: 0;
}

input.cyan {
	color: white;
	background-color: #008b8b;
	border-color: #19b3b3 #004d4d #004d4d #19b3b3;
}

input.cyan:active {
	border-color: #004d4d #19b3b3 #19b3b3 #004d4d;
}

input.cyan:disabled {
	color: #19b3b3;
	border-color: #19b3b3 #004d4d #004d4d #19b3b3;
}

input.dark {
	color: white;
	background-color: #333333;
	border-color: #8c8c8c #1a1a1a #1a1a1a #8c8c8c;
}

input.dark:active {
	border-color: #1a1a1a #8c8c8c #8c8c8c #1a1a1a;
}

input.dark:disabled {
	color: #8c8c8c;
	border-color: #8c8c8c #1a1a1a #1a1a1a #8c8c8c;
}

input#currency {
	font-size: 4vmin;
}

input.major {
	width: 48.75vmin;
}

input.wide {
	width: 34.45vmin;
}

img {
	width: 80vmin;
	height: auto;
	image-rendering: optimizespeed;
}

img.icon {
	height: 3.34vmin;
	width: auto;
	vertical-align: middle;
}

#popup {
	width: 80vmin;
	position: fixed;
	margin: auto;
	top: 38vmin;
	left: 0;
	right: 0;
	display: none;
	color: white;
	background-color: #262626;
	padding: 4vmin;
	border-radius: 1.67vmin;
}

#popup a:link {
	color: #9999ff;
}
#popup a:visited {
	color: #cda9ef;
}

#begin {
	font-weight: bold;
}

@media print {

	input {
		display: none !important;
	}

	body {
		font-size: 1.67vmin;
	}

	tr.expand {
		display: table-row;
	}

	tr.odd {
		background-color: white;
	}

	img.icon {
		height: 1.67vmin;
	}

}