/* This stylesheet contains styles that are used by all of the tax tools to give them
 * a consistant look and feel.
 */

:root {
	/* Global variables
	 *
	 *		A global variable can be used in place of a value like this:
	 *
	 *			background-color: var(--background-color);
	 */
	--background-color:			LightCyan;
	--tool-background-color:	White;
	--text-color:				Navy;
	--error-text-color:			Red;
	--light-text-color:			MediumBlue;
	--input-color:				#d9fddd;	/* #9FC; */
	--output-color:				#DEF;
	--notused-color:			lightgray;
	--border-color:				var(--text-color);
	--shadow-color:				#AAAAAA;	/* Gray */
	--tooltip-bg-color:			Beige;

	/* Testing
	--background-color:		white;
	--text-color:			red;
	--light-text-color:		green;
	--input-color:			LightGreen;
	--output-color:			LightBlue;
	--border-color:			Blue;
	--shadow-color:			Red;
	*/
}

a {
	/* text-decoration:	none;			/* No underline */
}

a:link {
	color:					var(--text-color);
}

a:visited {
	color:					var(--light-text-color);
}

input::placeholder {
	/* color:				red; */
	opacity:				0.5;
}

body {
	/* PDF files cannot print Calibri font so switch to helvetica when making a PDF file. When using Helvetica
	 * use font-size 14px.
	 */
	font-family:			/* Calibri, */ Helvetica, Arial, sans-serif;
	font-size:				14px;	/* Use this with Helvetica */
	line-height:			1.4;
	max-width:				7.5in;
	/* background-image: linear-gradient(to bottom, var(--background-color), white); */
	background-color:		var(--background-color);
	color:					var(--text-color);
	/* display:				flex;
	justify-content:		center; */
	padding:				0.2in;
	max-width:				8.5in;
}

.tool-container {
	background:				var(--tool-background-color);
	padding-top:			1rem;
	padding-bottom:			2rem;
	padding-left:			2rem;
	padding-right:			2rem;
	border-radius:			8px;
	box-shadow:				0 4px 6px var(--shadow-color);
	width:					100%;
	max-width:				7.5in;
}

.title {
	text-align:				center;
}

.version-number {
	/* Used when printing the version number in the top right corner of an HTML page. */
	text-align:				right;
	font-size:				.8rem;
}

.input-field {
	border:					1px solid var(--border-color);
	padding-left:			4px;
	padding-right:			4px;
	background:				var(--input-color);
	color:					var(--text-color);
	text-align:				right;
}

.output-field {
	border:					1px solid var(--border-color);
	padding-left:			2px;
	padding-right:			2px;
	background:				var(--output-color);
	color:					var(--text-color);
	text-align:				right;
}

.button {
	background:				var(--input-color);
	color:					var(--text-color);
	border:					1px solid var(--border-color);
	box-shadow: 			0px 2px 4px var(--shadow-color);
	border-radius:			3px;
}

.button:active {
	box-shadow:				0px 1px 2px var(--shadow-color);	/* Lowering the shadow */
	transform:				scale(0.95);			/* Scaling button to 0.98 to its original size */
/*	transform:				translateY(2px);		/* Or, moving button 2px to y-axis */
}

.checkbox {
	appearance:				none;	/* Resets the default browser styling. */
	margin-left:			0;

	/* Sizing and shape of checkbox. */
	width:					20px;
	height:					20px;
	border:					1px solid var(--border-color);
	background-color:		var(--input-color);
	position:				relative;
}

.checkbox:checked::after {
	/* Create the checkmark using a pseudo-element. */
	content:				"";
	position:				absolute;
	left:					6px;
	top:					2px;
	width:					5px;
	height:					10px;
	border:					solid var(--text-color);	/* Color of checkmark */
	border-width:			0 1px 1px 0;
	transform:				rotate(45deg);
}

/* If fields are autofilled by the browser, the browser automatically changes the background
 * color of the field to a blue tint. The following code uses a large, solid box-shadow inside
 * the input box to cover up the browser's blue tint with the tool's input color. This should
 * work in Chrome, Edge, Safari, and Firefox.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0px 1000px var(--input-color) inset !important;
	box-shadow: 0 0 0px 1000px var(--input-color) inset !important;
	-webkit-text-fill-color: var(--text-color) !important;
}

#error-message-container {
	color:					var(--error-text-color);
}

#debug-container {
	background-color:		var(--output-color);
}

#debug-container pre {
	font-family:			monospace, "courier new";
	font-size:				16px;	/* Use this with Helvetica */
	line-height:			1.4;
}

/* Overrides: put the after the class where you want to override the attribute. */
.noborder		{ border:				none !important; }
.input-color	{ background-color:		var(--input-color); }
.output-color	{ background-color:		var(--output-color); }
.notused-color	{ background-color:		var(--notused-color); }
.right			{ text-align:			right; }
.left			{ text-align:			left; }
.span-two		{ grid-column:			span 2; }
.span-three		{ grid-column:			span 3; }
.span-four		{ grid-column:			span 4; }
.span-five		{ grid-column:			span 5; }
.span-six		{ grid-column:			span 6; }
.flex-right		{ justify-content:		right; }	/* Align the elements in a flex-box to the right. */
.flex-center	{ justify-content:		center; }	/* Center the elements in a flex-box. */