/* 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;
	--text-color:			Navy;
	--light-text-color:		MediumBlue;
	--input-color:			#d9fddd;	/* #9FC; */
	--output-color:			#DEF;
	--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);
}

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);
}

.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;
}

.right {
	text-align:				right;
}

.left {
	text-align:				left;
}

.hide {
	display:				none;
}

.span-two {
	grid-column:			span 2;
}

.span-three {
	grid-column:			span 3;
}

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

.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);
}