:root {
	--tenant-accent: #3a4a8f;
	--tenant-row-div: rgba(0, 0, 0, 0.12);
	--tenant-row-highlight: rgba(224, 224, 224, 0.75);
	--tenant-textbox-bg: #ffff99;
	--tenant-listStripe-bg: rgba(0, 128, 0, 0.1);

	--body-bg-color: #f8f9fa;
	--is-editing-bg-color: #2196f330;
	--header-height: 40px;
	--footer-height: calc(40px + env(safe-area-inset-bottom));
	--sat: env(safe-area-inset-top);
	--sab: env(safe-area-inset-bottom);
	--sal: env(safe-area-inset-left);
	--sar: env(safe-area-inset-right);
}

html {
	/* Went to fixed size */
	font-size: 20px;
	overscroll-behavior-y: none;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: var(--body-bg-color);

	overscroll-behavior-y: none;
	overscroll-behavior-block: none;
	touch-action: manipulation;
}

table td {
	border: 1px solid;
}

table td,
table th {
	padding: 0.25rem 0.2rem;
}

/* =================================== General ============================================= */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

/* input:not([type="checkbox"]) { */
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
select {
	font-family: inherit;
	width: 100%;
	/* border: none; */
	font-size: inherit;
	color: inherit;
	/* background-color: inherit; */
	padding: 0 0.25rem;
	text-decoration: inherit;
}

input:not([type="date"]):invalid {
	border: 0.01rem solid red;
	background-color: lightpink;
}

input[type="checkbox"] {
	appearance: none;
	position: relative;
	display: inline-block;
	/* background: lightgrey; */
	background: red;
	height: 1rem;
	width: 1.5rem;
	padding: 0.1rem;
	vertical-align: middle;
	border-radius: 99999px;
	box-shadow: 0px 1px 3px #0003 inset;
	transition: 0.25s linear background;
	border-color: var(--cw-success);
	cursor: pointer;
	flex-shrink: 0; /* Just in case inside a flexbox */
}

input[type="checkbox"]::before {
	content: "";
	display: block;
	height: 100%;
	width: auto;
	aspect-ratio: 1 / 1;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0px 1px 3px #0003;
	transition: 0.25s linear transform;
	transform: translateX(0rem);
	position: initial;
}
input[type="checkbox"]:checked {
	background: green;
}
input[type="checkbox"]:checked::before {
	transform: translateX(0.5rem); /* width - height */
}
input[type="checkbox"]:focus {
	outline: 0.1rem solid black;
	outline-offset: -0.1rem;
}
input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 50%;
	line-height: 0;
	font-size: 0.5rem;
	transition: 0.25s linear transform;
	transform: translateX(0rem);
}
input[type="checkbox"]:not(:checked)::after {
	content: "off";
	transform: translateX(0rem);
}
input[type="checkbox"]:checked::after {
	content: "on";
	transform: translateX(0.5rem);
}

input[type="range"] {
	cursor: ew-resize;
}

/* This is needed for the inline-block to cause a br to be inserted in lieu of a div.  Strange that it has to be the wrapper :-( */
.contenteditableWrapper {
	display: inline-block;
}

[contenteditable] {
	display: inline-block;
}

/* [contenteditable] ul,
[contenteditable] ol {
	padding-left: 1rem;
	margin-left: 0.5rem;
} */

[contenteditable="true"] img {
	cursor: pointer;
}

input[type="radio"] {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin: 0 0.25rem;
	vertical-align: text-bottom;
}

.radioListWrapper {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

[draggable="true"] {
	cursor: grab;
}

[draggable="true"]:active {
	cursor: grabbing;
}

/* ====================================== About ============================================= */
.aboutBody .appInfo {
	margin-bottom: 1rem;

	& .infoWrapper {
		display: flex;
		gap: 0.5rem;
		font-size: 0.9rem;

		& .label {
			font-weight: bold;
		}
	}
}

/* ====================================== App ============================================= */

header,
footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	color: white;
	background-color: black;
	padding: 0 0.25rem;
	white-space: nowrap;
	min-width: calc(1000px + 2rem);
}

header {
	height: var(--header-height);
	align-items: center;
}

header .title {
	font-weight: bold;
	font-size: 1.5rem;
}

main {
	max-width: 1325px;
	padding: 0 0 0 1rem;
}

body[data-u-level="1"] main {
	width: fit-content;
}

footer {
	height: var(--footer-height);
	padding-top: 3px;
	font-size: 1.25rem;
}

/* ====================================== Sheet ============================================= */
.sheet {
	position: relative;
	width: 1000px;
	min-height: 1294.118px;
	/* aspect-ratio: 8.5/11; */
	background-color: white;
	padding: 1rem;
	box-shadow: 6px 6px 15px 5px rgba(0, 0, 0, 0.5);
	margin: 1rem 1rem 2rem auto;
}

.sheet input:not([type="checkbox"]) {
	border: none;
}

.sheetContainer[selected] .sheet {
	box-shadow: 6px 6px 15px 5px rgba(255, 0, 0, 0.5);
}

.sheet .flagWatermark {
	position: absolute;
	top: 50%;
	left: 50%;
	font-weight: bold;
	color: rgba(255, 0, 0, 0.6);
	transform-origin: center;
	z-index: 1;
	pointer-events: none;
}

.sheet .flagWatermark.void {
	font-size: 420px;
	translate: -47% -50%;
	rotate: -45deg;
}

.sheet .flagWatermark.delete {
	font-size: 290px;
	translate: -50% -50%;
	rotate: 45deg;
}

/* ====================================== Sheet Cover ============================================= */

.sheetContainer.cover .header {
	display: grid;
	align-items: center;
	justify-content: center;
	/* grid-template-columns: 1fr auto 1fr; */
	/* grid-template-columns: 20% 60% 20%; */
	grid-template-columns: minmax(auto, 25%) 1fr auto;
	position: relative;
	color: var(--tenant-accent);
}

.sheetContainer.cover .header .docTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: bold;
}

.sheetContainer.cover .header .docTitle .main {
	font-size: 1.5rem;
	max-width: 28ch;
}

.sheetContainer.cover .header .docTitle .sub {
	font-size: 1.1rem;
}

.sheetContainer.cover .header .logo {
	display: grid;
	place-items: center;
	margin-bottom: 0.15rem;
}

.sheetContainer.cover .header .logo img,
.sheetContainer.cover .header .logo object {
	height: 4.5rem;
	object-fit: contain;
	/* Needed for object type */
	max-width: 100%;
	/* max-height: 100%; */
}

.sheetContainer.cover .header .address {
	text-align: center;
	padding: 0.15rem;
	font-size: 0.7rem;
	white-space: nowrap;
}

.docMeta {
	position: relative;
	margin-bottom: 0.5rem;
	padding: 0 4px;
}

.docMeta .row {
	display: grid;
}

.docMeta .row > * {
	padding: 0.2rem;
	/* Trick to collapse borders on divs */
	box-shadow:
		0.05rem 0 0 0 var(--tenant-accent),
		0 0.05rem 0 0 var(--tenant-accent),
		0.05rem 0.05rem 0 0 var(--tenant-accent),
		0.05rem 0 0 0 var(--tenant-accent) inset,
		0 0.05rem 0 0 var(--tenant-accent) inset;
}

.docMeta .lbl {
	color: var(--tenant-accent);
	font-size: 0.6rem;
}

.docMeta > :nth-child(1) {
	grid-template-columns: 55.2% 22.2% 22.6%;
}

.docMeta > :nth-child(2) {
	grid-template-columns: 55.2% 22.2% 22.6%;
}

.docMeta > :nth-child(3) {
	grid-template-columns: 50% 50%;
}

.docMeta > :nth-child(4) {
	grid-template-columns: 39.4% 30.3% 13.3% 8.5% 8.5%;
}

.docMeta > :nth-child(5) {
	grid-template-columns: 38.9% 38.9% 22.2%;
	grid-template-columns: 35% 43% 22%;
}

.sheetContainer.cover .lastSave {
	position: absolute;
	left: 0;
	bottom: 0;
	rotate: 270deg;
	transform-origin: left bottom;
	font-size: 10px;
	padding: 0.25rem;
	translate: 1rem;
}

.sheetContainer.cover .appVersion {
	position: absolute;
	right: 0;
	bottom: 0;
	rotate: 270deg;
	transform-origin: left bottom;
	font-size: 10px;
	translate: 100%;
	padding: 0.25rem;
}

/* ====================================== Category ============================================= */

.category {
	/* Needed relative for images to go behind */
	position: relative;
	margin-bottom: 0.5rem;
	padding: 0 0.2rem;
	/* outline: 2px solid; */
}

/* .category:not(.grandTotal) {
	border-bottom: 2px dashed;
} */

.category[selected] {
	box-shadow: 3px 3px 7px 2px rgba(255, 0, 0, 0.5);
}

.category .catHeader {
	display: flex;
	flex-wrap: wrap;
	/* padding: 0.15rem; */
	opacity: inherit;
	/* 2026-05-22 */
	background-color: #f6f3f4;
	padding: 0.5rem;
	margin: 0 -0.5rem;
}

.category .catHeader .catTitleGroup {
	display: flex;
	align-items: center;
	opacity: inherit;
}

.category .catHeader .catTitle {
	font-size: 1.2rem;
	font-weight: bold;
	align-items: end;
	border: 0.05rem dotted;
	opacity: inherit;
}

.category .catHeader .selectOne {
	height: 1.25rem;
	/* border: 2px solid; */
	/* border-radius: 0.1rem; */
	padding: 0.05rem;
	margin-left: 0.2rem;
	opacity: inherit;
}

.category:not(.selectOne) .catHeader .selectOne {
	display: none;
}

.category .catHeader .showHideUnselectedBtn {
	display: none;
	height: 1.25rem;
	border: 2px solid;
	border-radius: 0.1rem;
	padding: 0.05rem;
	margin-left: 0.2rem;
	opacity: inherit;
	cursor: pointer;
	background-color: transparent;
}

.category:has(.lineItem.optional .optChkBox:not(:checked)) .catHeader .showHideUnselectedBtn {
	display: revert;
}

.category .catHeader .showHideUnselectedBtn:hover {
	outline: 1px solid;
}
.category .catHeader .showHideUnselectedBtn img {
	width: 100%;
	pointer-events: none;
}

.category .catHeader .catNoteWrapper {
	margin: 0 0 0 auto;
	opacity: inherit;
}

.category .catHeader .catNote {
	/* margin: 0 0 0 auto; */
	text-align: end;
	text-wrap: balance;
	border: 0.05rem dotted;
	opacity: inherit;
	font-size: 0.8rem;
	color: var(--tenant-accent);
}

/* .category.paymentSchedule .catHeader .catNote {
	text-align: center;
} */

body[data-mode="v"] .category .catHeader .catTitle,
body[data-mode="v"] .category .catHeader .catNote {
	border: none;
}

body[data-mode="v"] .category .catHeader .catTitle:empty,
body[data-mode="v"] .category .catHeader .catNote:empty {
	display: none;
}

.category .row {
	position: relative;
	display: grid;
	/* grid-template-columns: 5.1% 48.4% 11.1% 6.1% 13.1% 16.2%; */
	grid-template-columns: 5.1% 51.5% 11.1% 6.1% 13.1% 13.1%;
}

.category .row input:not([type="checkbox"]),
.category .row select {
	background-color: inherit;
}

.category .row input[data-is-editing]:not([type="checkbox"]),
.category .row select[data-is-editing],
.category .row [contenteditable][data-is-editing] {
	background-color: var(--is-editing-bg-color);
}

.category .row .fullWidth {
	grid-column: 1 / 7;
	text-align: center;
	font-weight: bold;
}

.lineItem.descOnly .qty,
.lineItem.descOnly .unit,
.lineItem.descOnly .price,
.lineItem.descOnly .amt {
	display: none;
}

.lineItem.descOnly .desc {
	grid-column: 2 / 7;
}

.category.grandTotal .row.colHeader :nth-child(2),
.category.grandTotal .row.lineItem .desc {
	grid-column: 2 / 6;
}

.category.paymentSchedule .row.colHeader :nth-child(2),
.category.paymentSchedule .row.lineItem .desc {
	grid-column: 2 / 5;
}

.category .row.colHeader {
	text-align: center;
	font-weight: bold;
	font-size: 0.8rem;
	opacity: inherit;
}

.category .row.lineItem[selected] {
	background-color: var(--tenant-row-highlight);
}

.category .row.lineItem .desc {
	display: flex;
	flex-wrap: wrap;
}

/* .category .row.lineItem .desc .item {
	height: fit-content;
} */

/* .category .row.lineItem .desc .item:empty, */

.category .row.lineItem .desc .note:empty {
	min-width: 1ch;
	border: 1px solid black;
}

.category .row.lineItem .desc .noteWrapper {
	margin: 0 0 0 auto;
	align-self: flex-end;
}

.category .row.lineItem .desc .note {
	font-size: 0.8rem;
	color: var(--tenant-accent);
	/* margin: 0 0 0 auto; */
	height: fit-content;
	align-self: flex-end;
	max-height: 999999px;
	text-wrap: balance;
}

.category .row.lineItem .note {
	text-align: right;
}

body[data-mode="v"] .row.lineItem .note:empty {
	display: none;
}

.category .row.lineItem .itemNumCell,
.category .row.lineItem .desc,
.category .row.lineItem .qty,
.category .row.lineItem .unit,
.category .row.lineItem .price,
.category .row.lineItem .amt,
.category.grandTotal .row .itemNum,
.category.grandTotal .row.lineItem .amt,
.category.paymentSchedule .row.lineItem .percent {
	padding: 0.25rem;
	box-shadow:
		1px 0 0 0 var(--tenant-accent),
		0 1px 0 0 var(--tenant-accent),
		1px 1px 0 0 var(--tenant-accent),
		1px 0 0 0 var(--tenant-accent) inset,
		0 1px 0 0 var(--tenant-accent) inset;

	/* I like this better, but the box-shadow just look more consistent 🤔 */
	/* outline: 1px solid var(--tenant-accent); */
	/* outline-offset: -0.5px; */

	opacity: inherit;
}

.category .showImgBtn,
.lineItem .showImgBtn {
	display: none;
	padding: 0;
	line-height: 0;
	background-color: transparent;
	border: none;
}

.category[data-img-path] .catTitleGroup .showImgBtn,
.lineItem[data-img-path] .itemDescWrapper .showImgBtn {
	display: revert;
}
.category .showImgBtn:hover,
.lineItem .showImgBtn:hover {
	outline: 1px solid;
}

.category .showImgBtn:focus,
.lineItem .showImgBtn:focus {
	outline: 2px solid;
	outline-offset: -2px;
	border-radius: 4px;
}

.category .showImgBtn img,
.lineItem .showImgBtn img {
	width: 1rem;
	pointer-events: none;
}

.category.grandTotal .stricken {
	text-decoration: line-through;
}

.category .catTotal .lbl {
	color: var(--tenant-accent);
	font-weight: bold;
	text-align: end;
	grid-column: 1 / 6;
	padding: 0.25rem;
}

.category.paymentSchedule .catTotal .lbl {
	grid-column: 1 / 5;
}

body[data-u-level="1"] .category.paymentSchedule:has(.catOptChkBox:not(:checked)) {
	display: none;
}

.category .catTotal .value {
	text-align: end;
	font-weight: bold;
}

.category.optional:has(.catOptChkBox:not(:checked)),
.category .lineItem.optional:has(.optChkBox:not(:checked)) {
	opacity: 0.7;
	/* color: rgba(0, 0, 0, 0.5); */
	/* text-decoration: line-through; */
}

.category.hideOptUnselected .lineItem.optional:has(.optChkBox:not(:checked)) {
	display: none;
}

.sheet .category .lineItem.optional:has([data-is-editing]) {
	opacity: 1;
}

.category select {
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
	text-align: center;
	border: none;
	background-color: transparent;
	/* appearance: none; */
	padding: 0 0.25rem;
	width: 100%;
}

[data-mode="v"] .category select {
	appearance: none;
}

.category .lineItem .itemNumCell {
	position: relative;
	align-content: center;
	border: none;
	background-color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.category .lineItem .itemNum {
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

[data-mode="v"] .category .lineItem .itemNumCell .rowSizeHandle {
	display: none;
}

.category .lineItem .itemNumCell .rowSizeHandle {
	background-color: rgba(0, 0, 0, 0.25);
	position: absolute;
	width: 100%;
	height: 0.25rem;
	left: 0;
	bottom: 0;
	cursor: row-resize;
	-webkit-user-drag: none;
	touch-action: none;
}

.category [contenteditable] {
	padding: 0 0.25rem;
	max-width: 100%;
	min-height: 1rem;
}

.item[contenteditable]:empty {
	width: 97%;
}
.note[contenteditable]:empty {
	width: 3%;
}

.category .qty,
.category .price,
.amt {
	text-align: right;
}

.category .amt {
	display: flex;
	align-items: center;
	justify-content: end;
}

.category .percent {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.catTotal .amt {
	font-weight: bold;
	padding: 0.25rem;
}

.category.optional:has(.catOptChkBox:not(:checked)) .lineItem .amt,
.category .lineItem.optional:has(.optChkBox:not(:checked)) .amt {
	text-decoration: line-through;
}

.category.optional:has(.catOptChkBox:not(:checked)) .catTotal .amt {
	text-decoration: line-through;
}

[data-lock="1"] .lineItem .optChkBox,
[data-lock="1"] .category .catOptChkBox {
	opacity: 0.5;
	cursor: unset;
}

.lineItem:not(.optional) .optChkBox {
	/* visibility: hidden; */
	display: none;
}
.category:not(.optional) .catOptChkBox {
	display: none;
}

.category .lineItem .itemDescWrapper {
	display: flex;
	align-items: center;
	align-self: flex-start;
	flex-grow: 1;
}

.lineItem.linkQtyParent .qty {
	outline: 4px dashed var(--cw-primary);
	outline-offset: -4px;
}
.lineItem.linkQtyChild .qty {
	outline: 4px dashed var(--cw-secondary);
	outline-offset: -4px;
}

.lineItem .lineItemDataListInput {
	field-sizing: content;
}

/* ====================================== Text Box ============================================= */
.textBox {
	display: inline-block;
	position: absolute;
	border: 1px solid;
	background-color: var(--tenant-textbox-bg);
	filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

.textBox[selected] {
	border-style: dashed;
}

.textBox .cwMSRHandle {
	opacity: 0;
}

.textBox[selected] .cwMSRHandle {
	opacity: 1;
}

[data-lock="1"] .cwMSRHandle,
[data-mode="v"] .cwMSRHandle {
	display: none;
}

.textBox .textBoxText {
	display: inline-block;
	padding: 5px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.textBox .textBoxText img {
	width: 100%;
	/* object-fit: cover; */
	object-fit: contain;
}

/* For YouTube Video */
.textBox iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}

.textBoxLock .textBox {
	pointer-events: none;
}

.textBoxHide .textBox {
	display: none;
}

/* YouTube Text box starts off with grey border */
iframe[allowfullscreen] {
	outline: 8px solid grey;
}

/* ====================================== Nav Menu ============================================= */

.loginBtn {
	font-size: inherit;
	background-color: inherit;
	color: inherit;
	border: none;
	display: none;
}

[data-u-level="1"] .loginBtn {
	display: unset;
}

nav.right {
	display: none;
}

[data-u-level="5"] nav.right,
[data-u-level="6"] nav.right {
	display: unset;
}

nav {
	position: fixed;
	top: 0;
	font-size: 1.25rem;
	background-color: #fdfdfd;
	transition: translate 300ms ease-in-out;
	z-index: 2;
}

nav.left {
	left: 0;
	translate: -100%;
	border-right: 0.1rem solid black;
	border-bottom: 0.1rem solid black;
	border-bottom-right-radius: 5px;
}

nav.right {
	right: 0;
	translate: 100%;
	transition: translate 300ms ease-in-out;
	border-left: 0.1rem solid black;
	border-bottom: 0.1rem solid black;
	border-bottom-left-radius: 0.5rem;
}

nav.open {
	translate: 0;
}

nav.right.open {
	box-shadow: -4px 6px 6px rgba(0, 0, 0, 0.6);
}

nav.left.open {
	box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.6);
}

nav .menuBody {
	overflow: auto;
	max-height: 100dvh;
	background-color: inherit;
}

nav.left .menuBody {
	border-bottom-right-radius: 5px;
}

nav.right .menuBody {
	border-bottom-left-radius: 5px;
}

nav .pullTab {
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	/* width: var(--header-height); */
	width: 50px;
	height: var(--header-height);
	cursor: pointer;
	color: white;
	background-color: black;
	transition: all 300ms ease-in-out;
	border-bottom: 0.1rem solid black;
}

nav.left .pullTab {
	right: 0;
	translate: 100%;
	border-right: 0.1rem solid black;
	border-bottom-right-radius: 0.5rem;
}

nav.right .pullTab {
	left: 0;
	translate: -100%;
	border-left: 0.1rem solid black;
	border-bottom-left-radius: 0.5rem;
}

nav.open .pullTab {
	color: black;
	background-color: inherit;
}

nav.left.open .pullTab {
	box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.2);
}

nav.right.open .pullTab {
	box-shadow: -4px 6px 6px rgba(0, 0, 0, 0.2);
}

nav .pullTab .hamburger {
	width: 32px;
	height: 32px;
	pointer-events: none;
}

nav .pullTab .hamburger .top,
nav .pullTab .hamburger .middle,
nav .pullTab .hamburger .bottom {
	transition:
		rotate 500ms ease-in-out 300ms,
		translate 500ms ease-in-out 300ms,
		scale 500ms ease-in-out 300ms;
	transform-box: fill-box;
	transform-origin: center;
}

nav.open .pullTab .hamburger .top {
	rotate: 45deg;
	translate: 0px 5px;
}

nav.open .pullTab .hamburger .middle {
	scale: 0;
}

nav.open .pullTab .hamburger .bottom {
	rotate: -45deg;
	translate: 0px -5px;
}

nav .pullTab .avatar {
	color: black;
	width: calc(var(--header-height) * 0.85);
	border-radius: 9999px;
	display: grid;
	align-items: center;
	justify-content: center;
	/* font-size: 100px; */
}

nav .pullTab .avatar img,
nav .pullTab .avatar svg {
	width: 100%;
}

nav summary {
	color: #363636;
	background-color: #beddf4;
	padding: 0.25rem 0.5rem;
	text-align: center;
	font-weight: bold;
}

nav summary .subTitle {
	font-size: 0.75rem;
	font-weight: normal;
}

nav ul li {
	list-style-type: none;
}

nav ul li label {
	cursor: inherit;
}

nav .navTextBox .opacity label {
	display: block;
	text-align: center;
	font-size: 1rem;
}

nav .navTextBox .opacity {
	padding: 0 0.5rem;
}

nav .navTextBox .opacity [type="range"] {
	width: 100%;
}

/* nav .navImgBox .opacity label {
	display: block;
	text-align: center;
	font-size: 1rem;
}

nav .navImgBox .opacity [type="range"] {
	width: 100%;
} */

nav [type="checkbox"] {
	vertical-align: middle;
	margin: 0 auto;
	cursor: inherit;
}

nav [type="radio"] {
	height: 1rem;
	width: 1rem;
	cursor: inherit;
}

nav .infoCell {
	position: relative;
	text-align: end;
	border-top: 0.15rem solid;
	padding: 0.7rem 0.25rem 0;
}

nav .infoCell label {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 0.7rem;
	padding: 0.05rem 0.25rem;
	color: darkgreen;
	white-space: nowrap;
}

nav .navBtnGroup {
	display: grid;
	/* grid-template-columns: 1fr 1fr; */
	grid-template-columns: repeat(6, 1fr);
	gap: 0.25rem;
	padding: 0.25rem;
}

nav .navBtnGroup .col-2 {
	grid-column: span 2;
}

nav .navBtnGroup .col-3 {
	grid-column: span 3;
}

nav .navBtnGroup .col-4 {
	grid-column: span 4;
}

nav .navBtnGroup .col-5 {
	grid-column: span 5;
}

nav .navBtnGroup .col-6 {
	grid-column: span 6;
}

nav .navBtn {
	display: grid;
	align-items: center;
	border-radius: 0.25rem;
	padding: 0.1rem 0.25rem;
	min-width: 10ch;
	position: relative;
}

nav .pipMenuBtn {
	position: absolute;
	width: 15px;
	top: 4px;
	right: 3px;
	fill: none;
	/* stroke: none; */
	stroke: currentColor;
	stroke-width: 2;
	pointer-events: none;
}

nav .pipMenuBtn.show {
	fill: #f9ca6a;
}

nav .navBtn .icon {
	line-height: 0;
	pointer-events: none;
}

nav .navBtn .icon svg,
nav .navBtn .icon img {
	height: 1rem;
	width: auto;
	fill: currentColor;
}

nav .navBtn .text {
	pointer-events: none;
}

nav.btnOptText .navBtn .icon {
	display: none;
}

nav.btnOptText .navBtn .text {
	min-height: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

nav.btnOptIcon .navBtn .text {
	display: none;
}

nav .navBtn .text .subTitle {
	font-size: 0.5rem;
}

nav .navBtn .text .title {
	font-size: 0.65rem;
}

nav .admin {
	display: none;
}

.app.admin nav .admin {
	display: revert;
}

[data-mode="v"] nav .navBtn.save,
[data-mode="v"] nav .navBtn.print {
	grid-column: span 3;
}

[data-mode="v"] nav .navBtn.viewSitePhoto {
	grid-column: span 6;
}

/* ====================================== Legal ============================================ */

.sheetContainer.legal .sheet {
	display: grid;
	grid-template-rows: 1fr auto auto;
}

.sheetContainer.legal .sheet .termsContainer {
	font-size: 0.6rem;
	width: 100%;
	margin-bottom: 0.25rem;
	padding: 0.25rem;
	display: inline-block;
}

.sheetContainer.legal .sheet .termsContainer .sectionTitle {
	font-size: 1rem;
	font-weight: bold;
	text-decoration: underline;
}

.sheetContainer.legal .sheet .termsContainer [contenteditable] {
	min-height: 1rem;
	padding: 0 0.25rem;
	margin: 0.5rem 0;
}

/* .sheetContainer.legal .sheet ol,
.sheetContainer.legal .sheet ul {
	padding-left: 1rem;
	margin-left: 0.5rem;
} */

.sheetContainer.legal .sheet ol > li {
	position: relative;
	margin-bottom: 0.75rem;
}

.sheetContainer.legal .sheet #legalBuilderBtn {
	position: absolute;
	top: 10px;
	right: 10px;
	color: white;
	background-color: red;
	padding: 4px 8px;
	border-radius: 3px;
	cursor: pointer;
}

.sheetContainer.legal .sheet #legalBuilderBtn:hover {
	background-color: #ff5454;
}

.sheetContainer.legal .legalLicense {
	font-size: 0.7rem;
	text-align: center;
}

body[data-mode="e"] .sheetContainer.legal [contenteditable="true"] {
	outline: 2px dashed;
}

/* ====================================== Legal Term Editor ============================================ */
.msgBox .legalItemContainer {
	padding: 0 1rem;
}

.msgBox .legalItemContainer label {
	display: block;
	margin-bottom: 0.15rem;
}

.msgBox .legalItemContainer select {
	display: block;
	margin: 0 auto 0.15rem;
	background-color: inherit;
}

.msgBox .legalItemContainer fieldset {
	padding: 0.25rem 0.25rem 0 0.25rem;
	margin: 0.5rem 0;
	border-radius: 0.25rem;
}

.msgBox .legalItemContainer fieldset legend {
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0 0.25rem;
}

/* ====================================== Signature ============================================ */

.sigLine2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.sigLine2 .sigBox2 {
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border: 0.05rem solid green;
	flex-grow: 1;
}

.sigMetaGrp .signHereBtn {
	color: white;
	background-color: green;
	border-radius: 3px;
	border: none;
	padding: 0.25rem 1.5rem 0.25rem 0.25rem;
	cursor: pointer;
	clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
	font-size: 0.8rem;
}

/* Don't show tenant sign button for client */
body[data-u-level="1"] .tenant .sigMetaGrp .signHereBtn {
	/* display: none; */
	opacity: 0;
}

.sigLine2 .sigImage {
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
	-webkit-user-drag: none;
}

.sigBox2 .sigClearBtn {
	position: absolute;
	top: 0.1rem;
	right: 0.2rem;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1.5rem;
	color: red;
	background-color: transparent;
	border: none;
	cursor: pointer;
}

[data-lock="1"] .sigBox2 .sigClearBtn {
	display: none;
}

/* Don't show for client */
body[data-u-level="1"] .tenant .sigMetaGrp .sigClearBtn {
	/* display: none; */
	opacity: 0;
}

.sigLine2 .sigBlockSubTitle {
	color: var(--wd-accent);
	font-size: 0.6rem;
}

.sigMetaGrp {
	display: flex;
	background-color: white;
}

.sigLine2 .sigMeta {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	font-size: 0.75rem;
	align-items: center;
	margin-left: 0.25rem;
}

/* ================================= Report ======================================================= */

.reportWrapper {
	font-size: 0.9rem;
}

.dateRangeWrapper {
	display: flex;
	gap: 5px;
	justify-content: center;
	margin-bottom: 0.25rem;
}

.dateRangeWrapper select,
.dateRangeWrapper input {
	font-size: inherit;
}

.reportWrapper hr {
	margin: 0.5rem 0;
}

.reportWrapper .inputResetWrapper {
	display: grid;
	grid-template-columns: 1fr auto;
}

.reportWrapper .resetBtn {
	cursor: pointer;
	font-weight: bold;
	line-height: 0;
	font-size: 1.75rem;
}

.reportWrapper .label {
	font-size: 0.9rem;
	font-weight: bold;
}

.paramWrapper {
	margin-bottom: 0.25rem;
	max-width: 100dvw;
}

.reportWrapper .includeWrapper {
	display: flex;
	justify-content: center;
	max-width: 100dvw;
	gap: 30px;
	margin-bottom: 0.25rem;
}

.reportWrapper .includeWrapper label {
	display: flex;
	cursor: pointer;
	gap: 5px;
}

.reportWrapper .trendChart {
	width: 100%;
	height: 250px;
	border-bottom: 2px solid;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

/* ================================= User Log Report ======================================================= */

.msgBox .reportWrapper.userLog .summaryWrapper {
	border-top: 1px solid;
	border-left: 1px solid;
	border-right: 1px solid;
}

.msgBox .reportWrapper.userLog details {
	padding: 0.25rem 0.25rem 0.25rem 1.5rem;
	border-bottom: 1px solid;
}

.msgBox .reportWrapper.userLog details:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.msgBox .reportWrapper.userLog table {
	margin: 0 auto;
	background-color: white;
}

.msgBox .reportWrapper.userLog .index,
.msgBox .reportWrapper.userLog .count {
	text-align: end;
}

.msgBox .reportWrapper.userLog summary {
	list-style-position: outside;
	cursor: pointer;
	padding: 5px 0;
}

.msgBox .reportWrapper.userLog summary:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.msgBox .reportWrapper.userLog summary::marker {
	display: list-item;
}

.msgBox .reportWrapper.userLog summary .summaryGrp {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	padding: 0 0.25rem;
}

.msgBox .reportWrapper.userLog summary .summaryGrp .latestAction {
	justify-self: end;
}

/* ====================================== msgBox General ============================================ */
.msgBox .header .subTitle {
	font-size: 0.75em;
	max-height: 999999px;
}

.msgBox .reportWrapper .tallyList {
	border-bottom: 2px solid;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

/* ====================================== msgBox Help ============================================ */
.msgBox .help {
	p {
		margin: revert;
	}
}

/* .msgBox .help .helpDoc > *:not(summary) {
	margin-left: 2ch;
} */

.msgBox .help .folderHierarchy details {
	margin-left: 1rem;
}

.folderHierarchy details summary {
	cursor: pointer;
}

.msgBox .help .folderHierarchy details div {
	margin-left: 1rem;
}

/* ====================================== msgBox Report ============================================ */
.msgBox .proposalListTable td.index {
	text-align: right;
}

.msgBox .proposalListTable td.flagVoid,
.msgBox .proposalListTable td.dateProposal,
.msgBox .proposalListTable td.sigCnt,
.msgBox .proposalListTable td.actionCnt,
.msgBox .proposalListTable td.flagDelete {
	text-align: center;
}

.msgBox .listWrapper[data-flag-void="hide"] th[data-flag="voidCol"],
.msgBox .listWrapper[data-flag-void="hide"] td.flagVoid,
.msgBox .listWrapper[data-flag-delete="hide"] th[data-flag="deleteCol"],
.msgBox .listWrapper[data-flag-delete="hide"] td.flagDelete {
	display: none;
}

/* ====================================== msgBox share ============================================ */
.msgBox .shareDialogue .title {
	font-weight: bold;
}

.msgBox .shareDialogue .linkWrapper button {
	background-color: transparent;
	border: none;
}

.msgBox .shareDialogue svg {
	pointer-events: none;
}

.msgBox .shareDialogue .icon {
	width: 1.5rem;
	cursor: pointer;
}

.msgBox .shareDialogue .draftClientEmail {
	text-decoration: none;
	color: inherit;
}

/* ====================================== msgBox line item list ============================================ */
.msgBox td.index {
	text-align: center;
}

.msgBox td.imgPath {
	direction: rtl;
}

/* ====================================== msgBox image path list ============================================ */
.msgBox td.index,
.msgBox td.name {
	text-align: center;
}

.msgBox td.folderPath {
	direction: rtl;
}

/* ====================================== msgBox status/comment ============================================ */
.msgBox .statusCommentWrapper {
	min-width: 40ch;
	max-width: 65ch;
}

.msgBox .statusCommentWrapper textarea {
	width: 100%;
	font-size: 0.9rem;
	text-decoration: inherit;
	field-sizing: content;
	min-height: 3em;
}

.msgBox .statusCommentWrapper .statusWrapper {
	margin: 0.5rem 0 1rem 0;
	text-align: center;
}

.msgBox .statusCommentWrapper .statusWrapper label {
	margin-right: 0.5rem;
	font-weight: bold;
}

.msgBox .statusCommentWrapper .statusWrapper select {
	width: revert;
	padding: 0.25rem;
	border-radius: 0.25rem;
}

.msgBox .statusCommentWrapper .addCommentActionWrapper {
	display: flex;
	justify-content: end;
	gap: 0.25rem;
}

.msgBox .statusCommentWrapper .addCommentActionWrapper button {
	font-size: 1rem;
}

.msgBox .statusCommentWrapper .historyCard {
	border: 1px solid;
	padding: 0.25rem;
	border-radius: 0.25rem;
	margin: 0.5rem 0;
	background-color: rgba(0, 0, 0, 0.025);
}

.msgBox .statusCommentWrapper .historyCard[data-crud-flag="d"] {
	text-decoration: line-through;
}

.msgBox .statusCommentWrapper .historyCard .historyCardBody {
	text-decoration: inherit;
}

.msgBox .statusCommentWrapper .historyCardHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.75rem;
	color: gray;
}

.msgBox .statusCommentWrapper .historyCardHeader .right {
	display: flex;
	align-items: center;
	color: inherit;
	gap: 0.25rem;
}

.msgBox .statusCommentWrapper .historyCard .historyCardHeader button {
	height: 1.25rem;
	width: 1.25rem;
	padding: 0.2rem;
	border: none;
	background-color: transparent;
	color: inherit;
}

.msgBox .statusCommentWrapper .historyCard .historyCardHeader button:hover {
	background-color: lightgray;
}

.msgBox .statusCommentWrapper .historyCard .historyCardHeader button svg {
	pointer-events: none;
	stroke: currentColor;
}

/* ====================================== Print ============================================ */

@page {
	margin-top: 0.2in;
	margin-left: 0.2in;
	margin-right: 0.2in;
	margin-bottom: 0.2in;

	/* margin-top: 0.5in; */
	/* margin-left: 0.3in; */
	/* margin-right: 0.3in; */
	/* margin-bottom: 0.5in; */

	/* makes sure pdf comes out right size */
	/* size: 8in 10.5in; */
	/* size: 1000px 1294.118px; */
	/* size: 800px 1035.294px; */
	/* size: 900px 1164.71px; */
	/* size: 1100px 1423px; */
	/* size: 1050px 1358.824px; */
}

/* override styles when printing */
@media print {
	/* html {
		font-size: calc(1rem * 0.75) !important;
		text-size-adjust: none;
		font-size: 15.5px !important;
	} */

	/* body {
		font-size: 14px;
	} */

	nav,
	header,
	footer {
		display: none !important;
	}

	body {
		background-color: #ffffff;
	}

	input[type="date"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="file"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="range"],
	input[type="tel"],
	input[type="text"],
	input[type="time"],
	input[type="url"],
	select {
		background-color: transparent !important;
	}

	/* 2026-05-22 Required or browser will just decide to change color of some items when printing. */
	/* input[type="checkbox"] { */
	* {
		-webkit-print-color-adjust: exact; /* For Chrome and Safari */
		print-color-adjust: exact; /* Standard property */
	}

	.sheetContainer.legal,
	.sheetContainer.price {
		break-before: always;
	}

	.sheetContainer.legal .termsContainer {
		border: none !important;
		outline: none !important;
	}

	.sheetContainer.legal [contenteditable] {
		outline: none !important;
	}

	[contenteditable]:empty {
		display: none !important;
	}

	.sigMetaGrp .signHereBtn {
		display: none !important;
	}

	.textBox .hand {
		display: none !important;
	}

	.msgBoxBackdrop,
	.toastBackdrop {
		display: none !important;
	}

	.lineItem {
		background-color: inherit !important;
	}

	.desc .note:empty {
		display: none !important;
	}

	.category {
		box-shadow: none !important;
		/* page-break-inside: avoid; */
	}

	.catTitle,
	.catNote {
		border: none !important;
	}

	.rowSizeHandle {
		display: none !important;
	}

	.sheetContainer {
		/* break-after: always; */
		/* break-inside: avoid; */
		/* break-before: page; */
		/* This (display: table;) worked like magic to get the page breaks working found here https://stackoverflow.com/questions/907680/css-printing-avoiding-cut-in-half-divs-between-pages */
		display: table !important;
	}

	/* main,
	.sheetContainer,
	.sheetContainer .sheet {
		width: auto;
	} */

	.sheetContainer,
	.sheetContainer .sheet {
		margin: 0;
		padding: 0;
	}

	.sheet {
		box-shadow: none !important;
		break-inside: avoid;
		/* aspect-ratio: unset; */
	}

	.d-print-none {
		display: none !important;
	}

	/* .sheet {
		page-break-before: always;
	} */

	input[type="date"]::-webkit-inner-spin-button,
	input[type="date"]::-webkit-calendar-picker-indicator {
		display: none;
		-webkit-appearance: none;
	}

	input[type="date"]:invalid,
	input[type="date"]:empty {
		opacity: 0 !important;
	}

	input:placeholder-shown {
		opacity: 0 !important;
	}

	select {
		appearance: none !important;
	}
}

/* ====================================== utility ============================================= */

body[data-mode="v"] [data-mode="e"] {
	display: none;
}

body[data-u-level="1"] [data-u-level="5"],
body[data-u-level="1"] [data-u-level="6"],
body[data-u-level="5"] [data-u-level="6"] {
	display: none;
}

.d-none {
	display: none !important;
}

.o-zero {
	opacity: 0 !important;
}

.t-ac {
	text-align: center;
}

.ta-end,
[data-ta-end] {
	text-align: end !important;
}

.inlineIcon {
	height: 1.1em;
	fill: currentColor;
	vertical-align: middle;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ====================================== Testing ============================================= */