@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
:root {
				--red: #f0142f;
				--orange: #f99600;
				--yellow: #ffc700;
				--green: #2cc706;
				--blue: #4382c5;
				--lightblue: #a7bfd9;
				--grey: #808080;
				--midgrey: #616161;
				--darkgrey: #131523;
				--white: #ffffff;
				--black: #000000;
				--lightblack: #303030;
				--border-color: #d8d8d8;
				--light-bg-color: #efefef;
				--dark-bg-color: var(--midgrey);
				--bg-color: var(--light-bg-color);
				--font-size: 11px;
				--font-color: var(--darkgrey);
				--font-family: "Montserrat", "Helvetica", sans-serif;
				--wide-radius: 12px;
				--narrow-radius: 6px;
}

body {
				font-family: var(--font-family);
				font-size: var(--font-size);
				color: var(--font-color);
				background: var(--bg-image) no-repeat center;
				background-size: cover;
				height: 100vh;
}

#nav {
				color: var(--white);
				font-weight: 500;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				margin: 0;
				padding: 0;
				z-index: 3;
}

#top-nav {
				width: 100%;
				height: 4rem;
				font-size: 1.2rem;
				color: var(--white);
				background-color: var(--top-nav);
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: justify;
				    -ms-flex-pack: justify;
				        justify-content: space-between;
}
#top-nav * {
				margin: 0 5px;
}

#top-nav-left, #top-nav-right {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
}

#username {
				font-size: 1.1rem;
}

#sub-nav {
				width: 100%;
				height: 3rem;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-line-pack: center;
				    align-content: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				background-color: var(--sub-nav);
}
#sub-nav menu {
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
				list-style-type: none;
}
#sub-nav menu li {
				padding: 0 15px;
}
#sub-nav menu li:nth-of-type(n+2) {
				border-left: 2px solid var(--white);
}

.home-link {
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
}

.crop-circle {
				border-radius: 50%;
}

#main {
				position: absolute;
				top: 7rem;
				padding-top: 10px;
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
				grid-template-columns: repeat(12, 1fr);
				grid-column-gap: 10px;
				width: 100%;
				min-height: calc(100vh - 7rem - 10px);
				-ms-flex-line-pack: start;
				    align-content: start;
}

h1, h2, h3, h4, h5, h6 {
				display: inline;
				margin: 0;
}

h1 {
				font-size: 2rem;
}

h2 {
				font-size: 1.2rem;
}

form {
				-ms-grid-column: 1;
				-ms-grid-column-span: 12;
				grid-column: 1/span 12;
}

a {
				text-decoration: none;
				color: inherit;
}

.hover-link:hover {
				text-decoration: underline;
}

img#profile-pic {
				height: 2rem;
				width: auto;
				position: relative;
				top: 0.2rem;
}

.full-width {
				-ms-grid-column: 1;
				-ms-grid-column-span: 12;
				grid-column: 1/span 12;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: justify;
				    -ms-flex-pack: justify;
				        justify-content: space-between;
}

.rounded-corners {
				border-radius: var(--wide-radius);
}

.massive {
				font-size: 2.5rem;
}

.regular {
				font-weight: normal;
}

.bold {
				font-weight: bold;
}

.italic {
				font-style: italic;
}

.underline {
				text-decoration: underline;
}

.bg-panel {
				background-color: white;
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
				grid-template-columns: repeat(12, 1fr);
				-ms-grid-column: 1;
				-ms-grid-column-span: 12;
				grid-column: 1/span 12;
				-webkit-column-gap: 10px;
				   -moz-column-gap: 10px;
				        column-gap: 10px;
				margin: 0 10px;
				padding: 10px;
				border-radius: var(--wide-radius);
				height: auto;
}
.bg-panel.transparent {
				margin: 0;
				padding-top: 0;
}

.panel {
				background-color: var(--white);
				display: -ms-inline-grid;
				display: inline-grid;
				-webkit-box-pack: justify;
				    -ms-flex-pack: justify;
				        justify-content: space-between;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				border-radius: var(--wide-radius);
				margin: 0;
				padding: 10px;
}

.panel-left {
				-ms-grid-column: 1;
				-ms-grid-column-span: 4;
				grid-column: 1/span 4;
}

.panel-left-center {
				-ms-grid-column: 1;
				-ms-grid-column-span: 8;
				grid-column: 1/span 8;
}

.panel-left-right {
				-ms-grid-column: 1;
				-ms-grid-column-span: 12;
				grid-column: 1/span 12;
}

.panel-center {
				-ms-grid-column: 5;
				-ms-grid-column-span: 4;
				grid-column: 5/span 4;
}

.panel-center-right {
				-ms-grid-column: 5;
				-ms-grid-column-span: 8;
				grid-column: 5/span 8;
}

.panel-right {
				-ms-grid-column: 9;
				-ms-grid-column-span: 4;
				grid-column: 9/span 4;
}

.alt-bg {
				background-color: var(--light-bg-color);
}

input[type=text], input[type=password], input[type=date], input[type=number], textarea, select, div.multiselect {
				border: 1px solid var(--border-color);
				border-radius: var(--narrow-radius);
				height: 2rem;
				background-color: var(--white);
}

div.multiselect {
				width: 100%;
				position: absolute;
				overflow: hidden;
}
div.multiselect label {
				display: inline-block;
				padding: 0.5rem;
				width: 100%;
				color: var(--font-color);
				font-weight: normal;
}
div.multiselect label.select-header {
				width: 80%;
				visibility: hidden;
}
div.multiselect input {
				margin-right: 5px;
}
div.multiselect input.select-all {
				display: none;
}
div.multiselect.focused, div.multiselect:focus-within {
				height: auto;
				max-height: 50vh;
				overflow-y: auto;
				z-index: 3;
				-ms-flex-item-align: normal;
				    -ms-grid-row-align: normal;
				    align-self: normal;
				border: 1px solid #a0a0a0;
}
div.multiselect.focused label:hover:not(.select-header), div.multiselect:focus-within label:hover:not(.select-header) {
				background-color: var(--light-bg-color);
}
div.multiselect.focused input.select-all, div.multiselect:focus-within input.select-all {
				display: inline;
				margin: 5px 0 0 5px;
}
div.multiselect.focused label.select-header {
				font-weight: bold;
}
div.multiselect.focused label.select-header, div.multiselect:has(input:checked) label.select-header {
				visibility: visible;
}

input[type=text] {
				padding-left: 4px;
}

input[inputmode=decimal] {
				text-align: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
}

input[type=number] {
				-moz-appearance: textfield;
}

input[type=checkbox], input[type=radio] {
				accent-color: var(--blue);
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
}

button, .button {
				display: inline;
				border: none;
				border-radius: var(--narrow-radius);
				cursor: pointer;
				width: -webkit-fit-content;
				width: -moz-fit-content;
				width: fit-content;
				height: 2rem;
				padding: 0 5px;
				background-color: var(--white);
}
button:disabled, .button:disabled {
				cursor: default;
				color: var(--grey);
				background-color: var(--white);
				border: 1px solid var(--border-color);
}

.status-button {
				padding: 0 12px;
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				width: 60px;
				height: 2rem;
				border: none;
				border-radius: var(--narrow-radius);
				cursor: text;
}
.status-button.none {
				color: var(--grey);
				background-color: var(--white);
				border: 1px solid var(--border-color);
}

.button {
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				width: 100% !important;
}

textarea {
				resize: none;
}
textarea.quote-notes {
				position: absolute;
				z-index: 2;
				top: 3px;
				left: 3px;
				width: 15vw;
				height: 3.75rem !important;
}

label:not(.button) {
				color: var(--midgrey);
				white-space: nowrap;
				font-weight: 600;
}

input[type=radio] {
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
}

input[type=date] {
				-webkit-padding-end: 5px;
}

input[type=number] {
				text-align: center;
}

input.cost {
				border: 1px solid var(--blue);
}

select.hide-arrow {
				-webkit-appearance: none;
				   -moz-appearance: none;
				        appearance: none;
				padding-right: 2rem;
				text-overflow: ellipsis;
}
select.hide-arrow::-ms-expand {
				display: none;
}

.selected {
				color: var(--light-bg-color);
				background-color: var(--blue);
}

.centered {
				text-align: center;
}

.opaque {
				background-color: var(--white);
}

.semi-transparent {
				background-color: rgba(255, 255, 255, 0.67);
}

.transparent {
				background-color: transparent;
}

.invisible {
				visibility: hidden !important;
}

.hidden {
				display: none !important;
}

.zero-size {
				width: 0 !important;
				height: 0 !important;
}

.input-container {
				position: relative;
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				width: 100%;
				min-height: 2rem;
}
.input-container > input:not([type=checkbox]), .input-container > select {
				width: 100%;
				background-color: white;
}
.input-container > input[type=checkbox], .input-container > input[type=radio] {
				position: relative;
				left: 0;
				width: auto;
}
.input-container:has(input[type=checkbox]), .input-container:has(input[type=radio]) {
				-webkit-box-pack: start;
				    -ms-flex-pack: start;
				        justify-content: start;
}

.input-icon-bg {
				background-image: -webkit-gradient(linear, left top, right top, from(white), color-stop(0), to(#d8dbec));
				background-image: linear-gradient(90deg, white calc(100% - 2rem), 0, #d8dbec);
				z-index: 2;
}

.input-icon {
				color: #4c4d53;
				position: absolute;
				right: 0;
				width: calc(2rem + 1px);
				background-color: #d8dbec;
				height: 100%;
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				border-top-right-radius: var(--narrow-radius);
				border-bottom-right-radius: var(--narrow-radius);
}

.align-top {
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
				-ms-flex-item-align: start;
				    -ms-grid-row-align: start;
				    align-self: start;
}

.scale-1x {
				font-size: 1rem;
}

.scale-2x {
				font-size: 2rem;
}

.scale-3x {
				font-size: 3rem;
}

.span2 {
				-ms-grid-column-span: 2;
				grid-column: span 2;
}

.span3 {
				-ms-grid-column-span: 3;
				grid-column: span 3;
}

.span4 {
				-ms-grid-column-span: 4;
				grid-column: span 4;
}

.span5 {
				-ms-grid-column-span: 5;
				grid-column: span 5;
}

.span6 {
				-ms-grid-column-span: 6;
				grid-column: span 6;
}

table {
				width: 100%;
				margin: 10px 0;
				border-collapse: collapse;
}
table thead th {
				background-color: var(--light-bg-color);
}
table tr.expand {
				line-height: 1.8rem;
}
table tr:nth-child(2n+1 of .quote-line) {
				background-color: var(--white);
}
table tr:nth-child(2n of .quote-line) {
				background-color: var(--light-bg-color);
}
table th, table td {
				padding: 3px 1px;
}
table table {
				margin: 0;
}

.panel-button {
				display: -ms-inline-grid;
				display: inline-grid;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				justify-items: center;
				width: 100%;
				border: 1px solid var(--border-color);
				border-radius: var(--narrow-radius);
				background-color: var(--bg-color);
				cursor: pointer;
}
.panel-button span {
				white-space: nowrap;
}

i.fa-solid {
				height: -webkit-fit-content !important;
				height: -moz-fit-content !important;
				height: fit-content !important;
}

menu a:hover {
				text-decoration: underline;
}

.align-right {
				-ms-grid-column-align: right;
				    justify-self: right;
}

.bordered {
				border: 1px solid var(--border-color) !important;
}

.cursor-alias {
				cursor: alias !important;
}

.cursor-copy {
				cursor: copy !important;
}

.cursor-default {
				cursor: default !important;
}

.cursor-help {
				cursor: help !important;
}

.cursor-not-allowed {
				cursor: not-allowed !important;
}

.cursor-pointer {
				cursor: pointer !important;
}

.cursor-text {
				cursor: text !important;
}

.popup-bg {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100vh;
				z-index: 10;
				margin: auto;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				background-color: rgba(153, 157, 176, 0.8);
}

.popup-panel {
				width: 40rem;
				height: -webkit-fit-content;
				height: -moz-fit-content;
				height: fit-content;
				background-color: var(--white);
				border-radius: var(--wide-radius);
				cursor: default;
				padding: 10px;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				row-gap: 10px;
}
.popup-panel h2 {
				color: var(--blue);
}
.popup-panel .close-button {
				float: right;
				cursor: pointer;
}
.popup-panel .additional {
				padding: 10px;
				-webkit-box-pack: normal;
				    -ms-flex-pack: normal;
				        justify-content: normal;
}
.popup-panel .additional h3 {
				margin-bottom: 10px;
}
.popup-panel .align-right {
				-ms-flex-item-align: end;
				    -ms-grid-row-align: end;
				    align-self: end;
}

.orange {
				background-color: var(--orange);
}

.yellow {
				background-color: var(--yellow);
}

.green {
				background-color: var(--green);
				color: var(--white);
}

.red {
				background-color: var(--red);
				color: white;
}

.blue {
				color: var(--white);
				background-color: var(--blue);
}

.grey {
				color: var(--white);
				background-color: var(--grey);
}

.white {
				background-color: var(--white);
				border: 1px solid var(--border-color);
}

.text-shadow {
				text-shadow: -1px -1px white, -1px 1px white, 1px -1px white, 1px 1px white;
}

.msg-btn {
				width: 100px;
				margin: 0 0.25rem;
}

.hide-arrow {
				background-image: none;
				-webkit-appearance: none;
				   -moz-appearance: none;
				        appearance: none;
}

.page-title {
				padding: 5px 0;
}

span.angles {
				margin-right: 4px;
}

i.fa-angles-up, i.fa-angles-down, i.fa-angle-up, i.fa-angle-down {
				color: var(--grey);
}

input.begin-focus {
				position: absolute;
				z-index: -5;
				width: 0px;
				height: 0px;
}

.debug {
				font-family: monospace;
				font-size: 1.1rem;
}
.debug .param {
				color: red;
				border: double;
				border-width: 0 0 1px;
}

.po-number, .invoice-number {
				width: 7rem;
				text-align: center;
				border: 1px solid var(--blue) !important;
}

.nowrap {
				white-space: nowrap;
}

.red-text {
				color: var(--red);
}

.green-text {
				color: var(--green);
}

.blue-text {
				color: var(--blue);
}

.grey-text {
				color: var(--grey);
}

td.row-product {
				white-space: nowrap;
				max-width: 15vw;
				overflow: hidden;
				text-overflow: ellipsis;
}

td.row-status-buttons {
				white-space: nowrap;
}

td.files {
				font-size: 1.5rem;
}

.quick-download {
				position: absolute;
				bottom: 5px;
				right: 5px;
}

.file-icon {
				font-size: 1.75rem;
}