/* COLORS */
:root {
	--documentBG: #CCC8B7;
	--sectionBG: #b8baa6;
	--sectionShadow: grey;
	--subsectionBG: rgb(255 255 255 / 83%);
	--textColor: #333;
	--opaqueText: #000000a8;
	--outline: black;
	--fontMain: system-ui;
	--fontData: monospace;
}
@media (prefers-color-scheme: dark) {:root {
}}

html {background: var(--documentBG); color: var(--textColor);}
#title h3 {color:#03b400;}
.section {background:var(--sectionBG); box-shadow:0 1em 1.5em -1em var(--sectionShadow);}
.subtitle {color:rgb(0 0 0 / 65%);}
.data .row, .data tr, .subsection {background:var(--subsectionBG);}
.data .row:nth-child(even) .cell, .data tr:nth-child(even) td {background: rgba(255,255,255,50%);}


/* COMMON SITUATIONS */
.clear {clear:both;}
.notreadyyet {opacity:30% !important;}
.hidden {display:none !important;}
.seethrough {opacity: 0%;}
.nowrap {white-space:nowrap;}
.right {text-align:right;}
.tinytext {font-size:0.9em; margin:.4em 1.2em; text-align:center;} /* used under data tables on example customer dashboard */
.hiddenJsTemplate {display:none;} /* used in ledger.php for hiding the new-row template used by javascript */
.feedback {font-size:0.8em; text-align:center; opacity:50%; font-style:italic;}
a.annotation {display: block; font-size: .8em;}
.warning {color:#d60000; font-size:.7em; display:block;}
.subsection.warning {margin: 1em 0; background: #150e00;}
.subtext {font-size: .7em; opacity: .5; margin: 0 0 1em 0; padding: .4em .8em .7em; display: inline-block;}
.noselect {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
ns {user-select: none;}
pre {white-space:pre-wrap; tab-size:1.4em; font-size:.6em; word-break:break-all;}
pbr, brp {display:block; height: .7em;} /* paragraph break, not just a line break */
	/* use <brp></brp> to quickly add a little space between lines */


/* TEXT */
html {font-size: 1.9vw; font-family: var(--fontMain)}
#title {padding:0 .6em; margin-bottom: 1.3em;}
#title h1 a {text-decoration:none; color:inherit;}

#title h1 {margin:0;}
h2 {margin:0 0 .3em;}
h3 {margin: 0 0 .6em;}
h4 {margin:0; font-weight:500; font-size:.8em; line-height:inherit;}
#title h3 {display:inline-block; margin:0 .9em;}


/* PAGE LAYOUT */
html {
	box-shadow: inset 0 1rem 11rem -8rem black;
	padding: min(4%, 1.5em) calc(11% - 2em) 7%;
	min-height:100%; width:fit-content; min-width:100%; box-sizing:border-box; overflow-y:scroll;
}
/* Calc explanation: percentage alone makes margins too large on small devices. */
	 /* Subtracting em's has large effect on small screens, and little effect on large screens.
	 This gives more room for important info where screen space is minimal.
	 And for larger screens takes advantage of the room to show visually pleasing (larger) margins
	 But for extra small screens, subtracting em's from % will eventually result in negative margins
	 Turns out that cutoff point is ~320px, so under that we set margins to a static .7em's */
@media all and (max-width: 320px) { html {margin-left:.7em; margin-right:.7em;} }

body {width: 100%;}
.section {margin:.5em auto 2em; border-radius:0.5em; padding:0.4em 0.4em 0.5em; position:relative;}
.subtitle {margin:.2em .9em;}
.subtitle h1 {text-align:center; display:block; margin:.4em 0 -1.1em; opacity:22%; font-size:1.85em;}
.subtitle h3 {margin-bottom: 0.25em;}
.subsection {border-radius:.5em; padding:2% 3.5%;}
.subsection .subsection {margin-top:.5em;} /* ~ = all subsections that are after and siblings of subsections */
.descriptionSubsection {font-size: 0.6em;	opacity: 0.6; margin: -1em 1em 2em;	padding-bottom: 0.4em;}
.oppositeSides {display:flex; justify-content:space-between;}


/* FORMS */
form {font-size: .8em;}
select, input, [contenteditable], button, input[type=submit], input::file-selector-button {
	border: none; border-radius: .3em; padding: .2em .4em .3em;
	font-size:inherit; font-family:var(--fontMain); color:var(--textColor);
}
button, input[type=submit], input[type=file], input::file-selector-button {
	cursor:pointer;
}
button, input::file-selector-button {background-color:var(--sectionBG);}

button:hover, input[type=submit]:hover, input[type=file]:hover,
div.dropdown > a:hover, div.dropdown > a:focus {
	box-shadow:0 0 0 .05em;
}

button.dead:hover, button.dead:focus { /* horizontal navigation bar selected page */
	box-shadow: none; cursor: revert; outline: none; color: inherit;
}
:disabled {opacity: 0.5;} /* Not-yet-relevant UI. Visually obscured. */

input[type=file] {
	font-family: var(--fontData); width:100%; box-sizing: border-box;
	background: white; border: .07em solid var(--sectionBG);
}
input[type=file] {font-family: var(--fontData); color:var(--opaqueText);}

input::file-selector-button {margin:.1em .6em 0 0;}
select.inline, input.inline, [contenteditable].inline, button.inline {padding: 0 .3em .1em; margin: .05em;}
select, input.dropdown {font-family:var(--fontMain); font-size:inherit; color:inherit;}
input.dropdown::-webkit-calendar-picker-indicator {opacity: 20%; margin-top: -.2em; }
input.dropdown:focus::-webkit-calendar-picker-indicator, input.dropdown:hover::-webkit-calendar-picker-indicator {opacity: 100%}
/* ::-webkit-calendar-picker-indicator { display:none; -webkit-appearance: none; appearance: none;} */
val {display:inline; box-sizing:content-box; position:relative;}
/* input:focus {outline:none;} */


/* BUTTONS */
a, .clickable, button, input[type=submit], input[type=file] {transition:  all .3s ease}

button.analog { /* used on ledger and tax settings */
	border: .05em solid grey;
	border-radius: .2em;
	padding: .15em .5em .25em;
	background: #00000014;
	opacity: 90%;
	font-size: .8em;
	margin: 0.2em;
	font-weight: bold;
}

button.analog:hover, button.analog:focus {
	opacity: 100%;
	box-shadow: 0 0.3em 1em -0.5em grey;
}

button.analog:focus {
	outline: .05em solid grey;
	outline-offset: -.35em;
}

button.analog:active {
	transform: scale(0.98);
}

button.action {
	display: inline-block;
	position: relative;
	background-color: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;}
button.action:hover, button.action:focus {text-decoration:underline;}

button.delete {padding: 0em .3em .3em .3em; color:red; font-weight:bold;}