* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--dps-accent: #3a4a8f;
	--dps-row-div: rgba(0, 0, 0, 0.12);
	--dps-row-highlight: rgb(224, 224, 224);
}

html {
	/* 
	https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
	Minimum viewport width = 650
	Maximum viewport width = 1350
	Minimum font size = 0.85
	Maximum font size = 1.3
	1 rem = 16
	*/
	font-size: clamp(0.85rem, 0.4321rem + 1.0286vw, 1.3rem);
}

body {
	font-family: Arial, Helvetica, sans-serif;
	overscroll-behavior-block: none;
	min-width: 350px;
	max-width: 1350px;
}

input[disabled]::-webkit-input-placeholder {
	opacity: 0;
}

main {
	width: 100%;
	margin: 0 auto 0 0;
}

/* ================================= Header/Footer ================================= */

header,
footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	color: white;
	background-color: black;
	padding: 0.25rem;
}

header .right {
	position: relative;
	cursor: pointer;
}

header .right .sessionEmail:hover {
	text-decoration: underline;
}

header .right .sessionMenu {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateY(calc(100% + 0.25rem));
	background-color: slategray;
	padding: 0.25rem;
	z-index: 6;
	border-radius: 0 0 0.25rem 0.25rem;
	transition: 500ms all;
	opacity: 0;
	pointer-events: none;
}

header .right .sessionMenu.open {
	pointer-events: all;
	opacity: 1;
}

header .right .sessionMenu li {
	list-style: none;
}

header .right .sessionMenu li:hover {
	text-decoration: underline;
}

header .center {
	white-space: nowrap;
}

header > :last-child,
footer > :last-child {
	text-align: right;
}

fieldset {
	width: fit-content;
	margin: 0 auto;
	padding: 0.25rem;
}

fieldset legend {
	padding: 0 0.25rem;
}

/* =========================================== Input ==================================== */

/* 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="date"]):invalid {
	border: 0.01rem solid red;
	background-color: lightpink;
}

/* ================================= Slide Menu ======================================================= */

.slideMenu {
	position: fixed;
	top: 0;
	left: 0;
	font-size: 1.25rem;
	background-color: #fdfdfd;
	transition: all 500ms ease-in-out;
	translate: -100%;
	border-right: 0.1rem solid black;
	border-bottom: 0.1rem solid black;
	border-bottom-right-radius: 5px;
	box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.2);
}

.slideMenu.open {
	translate: 0 0%;
}

.slideMenu .menuBody {
	overflow: auto;
	max-height: 100dvh;
	border-bottom-right-radius: 5px;
	background-color: inherit;
}

.slideMenu .pullTab {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX(100%);
	font-size: 1.75rem;
	line-height: 1.5rem;
	font-weight: bold;
	text-align: center;
	background-color: inherit;
	padding: 0.5rem 0.25rem 0.25rem 0.5rem;
	box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.2);
	border-right: 0.1rem solid black;
	border-bottom: 0.1rem solid black;
	border-bottom-right-radius: 0.5rem;
	cursor: pointer;
}

.slideMenu .pullTab .bi-arrow-left-right {
	width: 1.5rem;
	height: 1.5rem;
}

.slideMenu .header {
	color: #258cdb;
	font-weight: bold;
	text-align: center;
	padding: 0.15rem 0.5rem;
}

.slideMenu .subHeader {
	color: #363636;
	background-color: #beddf4;
	padding: 0.25rem 0.5rem;
}

.slideMenu .item {
	color: #363636;
	padding: 0.25rem 0.75rem;
	cursor: pointer;
	list-style-type: none;
}

.slideMenu .item label {
	cursor: inherit;
}

.slideMenu .item:hover {
	background: #f2f2f2;
}

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

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

.slideMenu [type="checkbox"] {
	height: 1.2rem;
	width: 1.2rem;
	vertical-align: middle;
	margin: 0 0 0 0.5rem;
	cursor: inherit;
}

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

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

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

/* =============================== Table Pick List =============================== */
.pickListContainer {
	width: fit-content;
	margin: 0 auto;
}

table.pickList {
	border-collapse: collapse;
	margin: 0 auto;
	background-color: white;
}

table.pickList thead {
	position: sticky;
	top: 0;
}

table.pickList th {
	cursor: pointer;
}

table th:hover {
	text-decoration: underline;
}

table.pickList th[data-sort="asc"]::after {
	content: "▲";
}

table.pickList th[data-sort="desc"]::after {
	content: "▼";
}

table.pickList thead {
	background-color: inherit;
}

table.pickList tr {
	cursor: pointer;
}

table.pickList tr[selected] {
	background-color: var(--dps-row-highlight);
}

table.pickList th {
	padding: 0 0.25rem;
}

table.pickList td {
	border: 1px solid black;
	white-space: nowrap;
	padding: 0.25rem;
	overflow: auto;
}

table.pickList tbody tr[data-version="1"] td[data-name] {
	font-weight: bold;
}

table.pickList tbody tr:not([data-version="1"]) td[data-name] {
	/* padding-left: 0.75rem; */
	padding-left: 1.75ch;
}

.pickListFilterArea {
	display: grid;
	grid-template-columns: 1fr auto auto;
	border: none;
}

.pickListFilterInput {
	border: 0.01rem solid;
	padding: 0.25rem;
	font-size: inherit;
}

.pickListFilterClearBtn {
	font-size: 1.5rem;
	line-height: 0;
}

.pickListFilterCnt {
	align-self: center;
	margin-left: 0.25rem;
	white-space: nowrap;
}

table.pickList.proposalList td.jobNumber,
table.pickList.proposalList td.jobRevision,
table.pickList.proposalList td.jobCo {
	text-align: center;
}

table.pickList.actionList {
	font-size: 0.9rem;
}

table.pickList.actionList td.qty,
table.pickList.actionList td.price {
	text-align: end;
}

table.pickList.actionList td.unit {
	text-align: center;
}

table.pickList.fileList td.folder {
	text-align: right;
}

table.pickList.actionList td.itemDesc {
	max-width: 40ch;
}

table.pickList.actionSummary td.tally {
	text-align: right;
}

/* ============================ Multi-Pick List ========================= */
.multiPickList {
	display: grid;
	grid-template-columns: auto 20ch;
	gap: 0.25rem;
}

.multiPickList .checkList {
	min-width: 20ch;
	max-height: 24ch;
	overflow: auto;
	padding-left: 0.1rem;
}

.multiPickList .commaString {
	border: 0.01rem solid;
}

.multiPickList label {
	display: flex;
	gap: 0.25rem;
	cursor: pointer;
}

.multiPickList .checkList button {
	font-size: 0.8rem;
	display: block;
	margin: 0 auto 0.25rem;
	color: var(--cw-light);
	padding: 0.25rem;
	border-radius: 0.2rem;
	background-color: var(--cw-primary);
}

.multiPickList .checkList .showCheckedToggleBtn[data-mode="showAll"] {
	background-color: var(--cw-primary);
}

.multiPickList .checkList .showCheckedToggleBtn[data-mode="showCheckedOnly"] {
	background-color: var(--cw-orange);
}

/* ====================================== Fieldset ============================================ */
fieldset[selected] {
	border: 0.08rem dashed;
}

/* ====================================== Utility ============================================ */
.d-none {
	display: none !important;
}