:root {
	--black: #000;
	--white: #fff;
	--radius: 0.4rem;
	--shadow: 0.8px 0.8px 0.9px -4px rgba(0, 0, 0, 0.78), 2.1px 2.3px 2.5px -4px rgba(0, 0, 0, 0.508),
		4.7px 5.1px 6px -4px rgba(0, 0, 0, 0.39), 10px 11px 20px -4px rgba(0, 0, 0, 0.272);
	--transitionSpeed: 200ms;
	--transitionTiming: ease-out;
	--font: 'Inter', sans-serif;

	/*
  Color references:
  1 - App backgrounds
  2 - Subtle backgrounds
  3 - UI element backgrounds
  4 - Hovered UI element backgrounds
  5 - Active / Selected UI element backgrounds
  6 - Subtle borders and separators
  7 - UI element border and focus rings
  8 - Hovered UI element borders
  9 - Solid backgrounds
  10 - Hovered solid backgrounds
  11 - Low-contrast text
  12 - High-contrast text
  */
	--slate: #fbfcfd;
	--slate2: #f8f9fa;
	--slate3: #f1f3f5;
	--slate4: #eceef0;
	--slate5: #e6e8eb;
	--slate6: #dfe3e6;
	--slate7: #d7dbdf;
	--slate8: #c1c8cd;
	--slate9: #889096;
	--slate10: #7e868c;
	--slate11: #687076;
	--slate12: #11181c;
	--yellow: #fdfdf9;
	--yellow2: #fffce8;
	--yellow3: #fffbd1;
	--yellow4: #fff8bb;
	--yellow5: #fef2a4;
	--yellow6: #f9e68c;
	--yellow7: #efd36c;
	--yellow8: #ebbc00;
	--yellow9: #f5d90a;
	--yellow10: #f7ce00;
	--yellow11: #946800;
	--yellow12: #35290f;
	--sky: #f9feff;
	--sky2: #f1fcff;
	--sky3: #e4f9ff;
	--sky4: #d5f4fd;
	--sky5: #c1ecf9;
	--sky6: #a4dff1;
	--sky7: #79cfea;
	--sky8: #2ebde5;
	--sky9: #68ddfd;
	--sky10: #5fd4f4;
	--sky11: #0078a1;
	--sky12: #003242;
	--gold1: #fdfdfc;
	--gold2: #fbf9f2;
	--gold3: #f5f2e9;
	--gold4: #eeeadd;
	--gold5: #e5dfd0;
	--gold6: #dad1bd;
	--gold7: #cbbda4;
	--gold8: #b8a383;
	--gold9: #978365;
	--gold10: #8c795d;
	--gold11: #776750;
	--gold12: #3b352b;
	--green: #fbfefc;
	--green2: #f2fcf5;
	--green3: #e9f9ee;
	--green4: #ddf3e4;
	--green5: #ccebd7;
	--green6: #b4dfc4;
	--green7: #92ceac;
	--green8: #5bb98c;
	--green9: #30a46c;
	--green10: #299764;
	--green11: #18794e;
	--green12: #153226;
	--indigo: #fdfdfe;
	--indigo2: #f8faff;
	--indigo3: #f0f4ff;
	--indigo4: #e6edfe;
	--indigo5: #d9e2fc;
	--indigo6: #c6d4f9;
	--indigo7: #aec0f5;
	--indigo8: #8da4ef;
	--indigo9: #3e63dd;
	--indigo10: #3a5ccc;
	--indigo11: #3451b2;
	--indigo12: #101d46;
	--tomato: #fffcfc;
	--tomato2: #fff8f7;
	--tomato3: #fff0ee;
	--tomato4: #ffe6e2;
	--tomato5: #fdd8d3;
	--tomato6: #fac7be;
	--tomato7: #f3b0a2;
	--tomato8: #ea9280;
	--tomato9: #e54d2e;
	--tomato10: #db4324;
	--tomato11: #ca3214;
	--tomato12: #341711;
	--red1: #fffcfc;
	--red2: #fff8f8;
	--red3: #ffefef;
	--red4: #ffe5e5;
	--red5: #fdd8d8;
	--red6: #f9c6c6;
	--red7: #f3aeaf;
	--red8: #eb9091;
	--red9: #e5484d;
	--red10: #dc3d43;
	--red11: #cd2b31;
	--red12: #381316;

	--primaryBase: var(--indigo);
	--primaryBgSubtle: var(--indigo2);
	--primaryBg: var(--indigo3);
	--primaryBgHover: var(--indigo4);
	--primaryBgActive: var(--indigo5);
	--primaryLine: var(--indigo6);
	--primaryBorder: var(--indigo7);
	--primaryBorderHover: var(--indigo8);
	--primarySolid: var(--indigo9);
	--primarySolidHover: var(--indigo10);
	--primaryTextSubtle: var(--indigo11);
	--primaryText: var(--indigo12);

	--accentBase: var(--gold1);
	--accentBgSubtle: var(--gold2);
	--accentBg: var(--gold3);
	--accentBgHover: var(--gold4);
	--accentBgActive: var(--gold5);
	--accentLine: var(--gold6);
	--accentBorder: var(--gold7);
	--accentBorderHover: var(--gold8);
	--accentSolid: var(--gold9);
	--accentSolidHover: var(--gold10);
	--accentTextSubtle: var(--gold11);
	--accentText: var(--gold12);

	--warningBase: var(--yellow);
	--warningBgSubtle: var(--yellow2);
	--warningBg: var(--yellow3);
	--warningBgHover: var(--yellow4);
	--warningBgActive: var(--yellow5);
	--warningLine: var(--yellow6);
	--warningBorder: var(--yellow7);
	--warningBorderHover: var(--yellow8);
	--warningSolid: var(--yellow9);
	--warningSolidHover: var(--yellow10);
	--warningTextSubtle: var(--yellow11);
	--warningText: var(--yellow12);

	--dangerBase: var(--tomato);
	--dangerBgSubtle: var(--tomato2);
	--dangerBg: var(--tomato3);
	--dangerBgHover: var(--tomato4);
	--dangerBgActive: var(--tomato5);
	--dangerLine: var(--tomato6);
	--dangerBorder: var(--tomato7);
	--dangerBorderHover: var(--tomato8);
	--dangerSolid: var(--tomato9);
	--dangerSolidHover: var(--tomato10);
	--dangerTextSubtle: var(--tomato11);
	--dangerText: var(--tomato12);

	--errorBase: var(--red);
	--errorBgSubtle: var(--red2);
	--errorBg: var(--red3);
	--errorBgHover: var(--red4);
	--errorBgActive: var(--red5);
	--errorLine: var(--red6);
	--errorBorder: var(--red7);
	--errorBorderHover: var(--red8);
	--errorSolid: var(--red9);
	--errorSolidHover: var(--red10);
	--errorTextSubtle: var(--red11);
	--errorText: var(--red12);

	--successBase: var(--green);
	--successBgSubtle: var(--green2);
	--successBg: var(--green3);
	--successBgHover: var(--green4);
	--successBgActive: var(--green5);
	--successLine: var(--green6);
	--successBorder: var(--green7);
	--successBorderHover: var(--green8);
	--successSolid: var(--green9);
	--successSolidHover: var(--green10);
	--successTextSubtle: var(--green11);
	--successText: var(--green12);

	--infoBase: var(--sky);
	--infoBgSubtle: var(--sky2);
	--infoBg: var(--sky3);
	--infoBgHover: var(--sky4);
	--infoBgActive: var(--sky5);
	--infoLine: var(--sky6);
	--infoBorder: var(--sky7);
	--infoBorderHover: var(--sky8);
	--infoSolid: var(--sky9);
	--infoSolidHover: var(--sky10);
	--infoTextSubtle: var(--sky11);
	--infoText: var(--sky12);

	--uiBase: var(--slate);
	--uiBgSubtle: var(--slate2);
	--uiBg: var(--slate3);
	--uiBgHover: var(--slate4);
	--uiBgActive: var(--slate5);
	--uiLine: var(--slate6);
	--uiBorder: var(--slate7);
	--uiBorderHover: var(--slate8);
	--uiSolid: var(--slate9);
	--uiSolidHover: var(--slate10);
	--uiTextSubtle: var(--slate11);
	--uiText: var(--slate12);

	--text1: 0.625rem;
	--text2: 0.75rem;
	--text3: 0.875rem;
	--text4: 1rem;
	--text5: 1.125rem;
	--text6: 1.25rem;
	--text7: 1.5rem;
	--text8: 1.875rem;
	--text9: 2.25rem;
	--text10: 3rem;
	--text11: 3.75rem;
	--text12: 4.5rem;

	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.25rem;
	--s6: 1.5rem;
	--s7: 1.75rem;
	--s8: 2rem;
	--s9: 2.25rem;
	--s10: 3rem;
	--s11: 3.75rem;
	--s12: 4.5rem;

	--containerWidth: 1366px;
}

/* Reset  */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	text-rendering: optimizeLegibility;
}

/*********************
* BASE STYLES
*********************/
body {
	font-size: var(--text3);
	line-height: 1.5;
	background: var(--uiBase);
	color: var(--uiText);
	font-family: var(--font);
}

.pagination {
	display: inline-block;
}

.pagination div {
	color: black;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
}

ul {
	list-style: none;
	padding-top: 2em;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1 {
	font-size: var(--text9);
}

h2 {
	font-size: var(--text8);
}

h3 {
	font-size: var(--text7);
}

h4 {
	font-size: var(--text6);
}

h5 {
	font-size: var(--text5);
}

h1,
h2,
h3,
h4,
h5 {
	line-height: 1.2;
}

a {
	text-decoration: none;
	color: var(--primarySolid);
}

a:hover {
	color: var(--primarySolidHover);
}

/*********************
* SET PAGE LAYOUTS
*********************/
#layout {
	min-height: 100vh;
}

@media (min-width: 768px) {
	#layout {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas: 'sidebar main ';
	}
}

/*********************
* PAGE HEADER/NAVIGATION
*********************/
header {
	grid-area: header;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	background: var(--uiSolid);
}

#navbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

summary {
	font-weight: bold;
	margin: -0.5em -0.5em 0;
	padding: 0.5em;
}

details {
	border-radius: 4px;
	padding: 0.5em 0.5em 0;
}

#main-nav {
	display: flex;
	list-style: none;
	gap: 1rem;
}

#logo h1 {
	letter-spacing: -0.05em;
	color: var(--white);
}

.nav-item {
	padding: 1rem 2rem;
	background: var(--primarySolid);
	color: var(--primaryBase);
	border-radius: var(--radius);
}

.nav-item:hover {
	background: var(--primaryBase);
	color: var(--primaryText);
}

.product {
	color: var(--uiText);
	transition: transform var(--transitionSpeed) var(--transitionTiming);
	text-decoration: none;
}

.product-img {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--uiBg);
	padding: var(--s4);
	object-fit: contain;
	aspect-ratio: 1/1;
}

.product-img:hover {
	background: var(--uiBgHover);
}

.product:active {
	background: var(--primary-dark);
	transform: translateY(0);
}

.product p {
	padding-top: var(--s2);
	font-weight: bold;
	font-size: var(--text4);
	display: flex;
	align-items: center;
}

.product p::after {
	display: inline-flex;
	font-family: 'Font Awesome 6 Free';
	content: '\f178';
	margin-inline-start: var(--s2);
	transition: margin-inline-start var(--transitionSpeed) var(--transitionTiming);
}

.product:hover p::after {
	margin-inline-start: var(--s3);
}

#products {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--s4);
	margin-inline: auto;
}

#products a {
	flex-basis: auto;
	display: flex;
	justify-content: center;
}

/*********************
* MAIN AREA STYLING
*********************/
#main {
	grid-area: main;
	margin-inline: auto;
	width: 90%;
	max-width: var(--containerWidth);
	padding-block-end: var(--s9);
}

#form-header {
	align-items: center;
	display: flex;
}

/*********************
* FORM STYLING
*********************/
@media (min-width: 600px) {
	#product-form {
		gap: 1rem;
		max-width: var(--containerWidth);
		margin-inline-start: auto;
		margin-inline-end: auto;
	}
}

fieldset > * + *,
fieldset div > * + * {
	margin-top: var(--s1);
}

fieldset {
	padding: var(--s4);
	width: 100%;
	background: var(--uiBg);
	border: 1px solid var(--uiBorder);
}

.form-control {
	display: flex;
	align-items: center;
	gap: var(--s6);
}

.form-control label {
	flex-basis: 30%;
	flex-shrink: 0;
}

.form-control input:not([type='checkbox']):not([type='radio']),
.form-control select {
	flex: 1;
}

legend {
	font-weight: bold;
	font-size: var(--text5);
}

.form-section {
	margin-block-start: 3rem;
}

.form-section > * + * {
	margin-top: 1rem;
}

.form-section h3 {
	background: var(--accentSolid);
	color: white;
	padding: 0.25rem 1rem;
	font-size: var(--text7);
}

#project-desc {
	grid-column: 1 / -1;
	order: -1;
}

#button {
	grid-column: 1 / -1;
}

label {
	font-weight: 500;
}

button,
input,
select,
textarea {
	font: inherit;
}

select,
textarea,
input:not([type='checkbox']):not([type='radio']) {
	width: 100%;
}

input[type='button'],
button {
	padding: 0.2em 0.8em;
}

.link-as-text {
	color: unset;
}
.link-as-text:hover {
	color: unset;
}

.wiki-snippet {
	font-size: 0.8em;
}

.wiki-title {
	font-size: 1em;
}

/*********************
* RIGHT PANEL STYLING
*********************/
#right-panel {
	background: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;

	position: relative;
}

/*********************
* PRODUCT INFO STYLING
*********************/
#product-header {
	grid-area: product-header;
	display: flex;
	justify-content: space-between;
	margin-block-start: var(--s7);
	margin-block-end: var(--s6);
}

#product-img {
	width: 300px;
}

.hidden {
	display: none;
}

#product-description {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

/*********************
* BUTTON STYLING
*********************/

button {
	cursor: pointer;
}

[data-label='Action'] {
	display: flex;
	gap: var(--s2);
}

[data-label='Action'] button {
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1/1;
	border-radius: 999px;
	padding: var(--s2);
	border: 1px solid var(--uiBorder);
}

[data-label='Action'] button ion-icon {
	font-size: var(--text5);
}

.c-btn {
	text-decoration: none;
	text-transform: uppercase;

	display: inline-block;
	position: relative;
	cursor: pointer;
	text-align: center;
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 5px;
	background-color: #37474f;

	box-shadow: 0 0 0 0 transparent;
	transition: all var(--transitionSpeed) var(--transitionTiming);
}
.c-btn:hover {
	color: white;
	box-shadow: 0 0 30px 0 rgba(0, 199, 236, 0.5);
	background-color: #00c7ec;
	transition: all var(--transitionSpeed) var(--transitionTiming);
}
.c-btn:hover:before {
	-webkit-animation: shine 0.5s 0s linear;
	-moz-animation: shine 0.5s 0s linear;
	animation: shine 0.5s 0s linear;
}
.c-btn:active {
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow var(--transitionSpeed) var(--transitionTiming);
}
.c-btn:before {
	content: '';
	display: block;
	width: 0px;
	height: 86%;
	position: absolute;
	top: 7%;
	left: 0%;
	opacity: 0;
	background: white;
	box-shadow: 0 0 15px 3px white;
	-webkit-transform: skewX(-20deg);
	-moz-transform: skewX(-20deg);
	-ms-transform: skewX(-20deg);
	-o-transform: skewX(-20deg);
	transform: skewX(-20deg);
}

@-webkit-keyframes shine {
	from {
		opacity: 0;
		left: 0%;
	}
	50% {
		opacity: 1;
	}
	to {
		opacity: 0;
		left: 100%;
	}
}
@-moz-keyframes shine {
	from {
		opacity: 0;
		left: 0%;
	}
	50% {
		opacity: 1;
	}
	to {
		opacity: 0;
		left: 100%;
	}
}
@keyframes shine {
	from {
		opacity: 0;
		left: 0%;
	}
	50% {
		opacity: 1;
	}
	to {
		opacity: 0;
		left: 100%;
	}
}

.b-btn {
	background: var(--primarySolid);
	color: var(--primaryBase);
	border-radius: var(--radius);
	font-weight: 500;
	border: 1px solid transparent;
}

ion-icon {
	font-size: var(--text4);
	display: grid;
	place-items: center;
}

.b-btn:hover {
	background: var(--primarySolidHover);
	cursor: pointer !important;
}

.deposit-btn {
	background: #e54d2e;
	color: var(--white);
	border-radius: var(--radius);
	font-weight: 500;
	border: 1px solid transparent;
}

.deposit-btn:hover {
	background: white;
	color: #e54d2e;
	border: 1px solid #e54d2e;
	cursor: pointer !important;
}

.g-btn {
	background: #383838;
	color: var(--white);
	border-radius: var(--radius);
	font-weight: 500;
	border: 1px solid transparent;
}

.g-btn:hover {
	background: white;
	color: #383838;
	border: 1px solid #383838;
	cursor: pointer !important;
}

.r-btn {
	color: #b11e14;
	text-transform: uppercase;
	border: 1px solid transparent;
	background: white;
	border-radius: var(--radius);
	font-weight: 500;
}

.r-btn:hover {
	background: #b11e14;
	color: var(--white);
	cursor: pointer !important;
}

.logout-btn {
	padding: 1rem 2rem;
	color: white;
	background: #b11e14;
	border-radius: var(--radius);
	font-weight: 500;
}

.logout-btn:hover {
	background: #b43f37;
	color: var(--white);
	cursor: pointer !important;
}

.fa-xmark {
	cursor: pointer;
}

#button {
	margin-top: 1em;
}
/* #buttonJob {
	text-align: end;
} */

#loading {
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 3px solid rgb(99 97 97 / 30%);
	border-radius: 50%;
	border-top-color: rgb(7, 7, 7);
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-webkit-keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
	}
}

#loading-wrapper {
	width: 100%;
	grid-row: none;
	display: flex;
	justify-content: center;
}

.closeX {
	float: right;
	cursor: pointer;
}

.close:after {
	display: inline-block;
	color: red;
	font-size: var(--text3);
	content: '\00d7'; /* This will render the 'X' */
}

#estimate-area {
	width: 100%;
	overflow: auto;
}

/*
Shopping cart design
*/

.shop-cart-div {
	margin: 0.3em 0;
	display: flex;
	justify-content: space-between;
	border-radius: 0.5em;
	padding: 0.3em 1em;

	border: 1px solid #cfcfcf;
}

/* .shop-cart-title {
}
.shop-cart-price {
} */

/* Table */

table,
td,
th {
	border: 1px solid;
	text-align: center;
}

table {
	width: 100%;
	border-collapse: collapse;
}

.responsive-table {
	border: 1px solid var(--uiBorder);
}

.responsive-table li {
	padding: var(--s2) var(--s3);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.responsive-table .table-header {
	background-color: var(--accentSolid);
	font-size: var(--text3);
	font-weight: bold;
	gap: 1em;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.responsive-table .table-row {
	background: white;
	gap: 1em;
}

.responsive-table .table-row:nth-of-type(odd) {
	background: var(--uiBg);
}

.responsive-table .col:hover {
	overflow: visible;
	white-space: normal;
	width: auto;
}
.responsive-table .col-1 {
	/* flex-basis: 10%; */
	flex: 1 1 0px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.responsive-table .col-2 {
	/* flex-basis: 40%; */
	flex: 1 1 0px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.responsive-table .col-3 {
	flex-basis: 25%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.responsive-table .col-4 {
	flex-basis: 25%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
@media (max-width: 767px) {
	.responsive-table .table-header {
		display: none;
	}
	.responsive-table li {
		display: block;
	}
	.responsive-table .col {
		flex-basis: 100%;
	}
	.responsive-table .col {
		display: flex;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		padding: 10px 0;
	}
	.responsive-table .col:before {
		color: #6c7a89;
		padding-right: 10px;
		content: attr(data-label);
		flex-basis: 50%;
		text-align: right;
	}
}
.jobs {
	background-color: #41893b !important;
}

.invoices {
	background-color: var(--primarySolid) !important;
}

.deposits {
	background-color: #e54d2e !important;
}

.form-flex {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s9);
	height: 100%;
}

.form-flex > * {
	flex-grow: 1;
	flex-basis: calc((60rem - 100%) * 999);
}

.form-flex > :nth-child(2) {
	flex-grow: 1.6;
}

.form-flex > :nth-last-child(n + 3),
.form-flex > :nth-last-child(n + 3) ~ * {
	flex-basis: 100%;
}

@media (min-width: 1300px) {
	.form-image {
		align-self: flex-start;
		top: 0;
	}
}

i {
	position: relative;
}

.shopping-cart::after {
	margin: 0;
	content: attr(value);
	font-size: var(--text2);
	color: #fff;
	background: var(--primarySolid);
	border-radius: 9999px;
	border: 1px solid var(--primarySolidHover);
	padding: var(--s1);
	position: absolute;
	left: 15px;
	top: -15px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-item:hover .shopping-cart::after {
	background: var(--accentSolid);
	border: 1px solid var(--accentSolidHover);
}

.jobparts {
	background-color: #4e504e !important;
}

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	margin-inline-start: var(--s1);
	padding: var(--s2);
}

/* Tooltip text */
.tooltip .tooltiptext {
	display: none;
	width: max-content;
	background-color: var(--infoBg);
	padding: var(--s2);
	border: 1px solid var(--infoBorder);
	position: absolute;
	z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	display: block;
}

.helpicon {
	color: white;
	background: var(--primarySolid);
	line-height: 1;
	width: var(--text5);
	height: var(--text5);
	font-size: var(--text3);
	padding: var(--s1);
	display: inline-block;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.helpicon:hover {
	background: var(--primarySolidHover);
}

/* style dropdown menu for input with typeahead */

.autocomplete-results {
	background-color: white;
	border-radius: 0em 0em 1em 1em;
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid black;
}

#autocomplete {
	max-width: 400px;
	margin: 0 auto;
}

/* Change border if results are above input */
[data-position='above'] .autocomplete-results {
	margin-top: -1px !important;
	border-top-color: transparent !important;
	border-radius: 0 0 8px 8px !important;
	padding-bottom: 8px !important;
}

/* loader for ship to */
.loader {
	display: inline-block !important;
	width: 30px;
	position: absolute;
	top: 0;
	left: 100%;

	height: 30px;
	border: 3px solid rgb(99 97 97 / 30%);
	border-radius: 50%;
	border-top-color: rgb(7, 7, 7);
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-webkit-keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
	}
}

.btn-addnew {
	color: white;
	background: #1554c0;
	border: 0;
	padding: 0.3em 1em;
	border-radius: 1em;
}

.shipmentUpdate {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 1em;
	background: var(--uiBg);
}

input[type='number']:read-only,
.read-only {
	opacity: 0.7;
	width: 100%;
	pointer-events: none;
}

#project-desc-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
}

.project-desc-inner-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
}
.tui-pagination .tui-page-btn {
	background-color: white;
}

/* SIDEBAR STYLES */
#sidebar {
	background: var(--uiBg);
	min-height: 100vh;
	max-width: 100vh;
	grid-area: sidebar;
	display: flex;
	align-content: space-between;
	flex-direction: column;
}

.user-greeting {
	font-weight: bold;
	font-size: var(--text5);
	display: flex;
	align-items: center;
	gap: var(--s5);
	background: var(--uiSolid);
	color: var(--white);
	padding: var(--s5) var(--s9);
}

.menu-items {
	padding: var(--s5) var(--s4);
	flex-grow: 1;
	margin-block-start: 1rem;
	display: flex;
	flex-direction: column;
	transition: width var(--transitionSpeed) var(--transitionTiming);
}

.fa-lg {
	line-height: 1.5;
}

.version-display {
	padding: var(--s5) var(--s9);
}

.menu-item {
	display: flex;
	align-items: center;
	padding: var(--s3) var(--s5);
	cursor: pointer;
	transition: background var(--transitionSpeed) var(--transitionTiming);
	border-radius: var(--s2);
	gap: var(--s5);
	font-weight: 500;
	white-space: nowrap;
}

.menu-item:hover {
	background: var(--primarySolid);
	color: var(--primaryBase);
}

/* FORM STYLES */

input:not([type='checkbox']):not([type='radio']),
textarea,
select {
	border: none;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	padding: var(--s1) var(--s2);
	border-radius: 0.2em;
	line-height: 1;
}

input,
select,
textarea {
	outline: 2px solid transparent;
	transition: outline var(--transitionSpeed) var(--transitionTiming);
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--accentSolid);
}

textarea {
	resize: vertical;
}

.filter-results {
	display: flex;
	align-items: end;
	gap: 1em;

	padding: 0.8em 0;
}

.flex-between {
	display: flex;
	justify-content: space-between;
}

.flex-1 {
	flex: 1;
	overflow: auto;
}

.badge {
	background: #a1c0d9;
	border: 1px solid transparent;
	border-radius: 1em;
	display: flex;
	align-items: center;
	padding: 0em 1em;
}

label {
	display: flex;
	align-items: center;
}

/* modal background */
.hystmodal__window {
	background-color: white;
	min-width: 40% !important ;
	min-height: 60% !important;
	position: relative;
}

/* loader for flat size block */
.sbl-cirle-to-rhombus {
	height: 12px;
	width: 12px;
	color: #5a5a5a;
	position: relative;
	display: inline-block;
	border: 5px solid;
	border-radius: 50%;
	transform: rotate(45deg);
	animation: cirle-to-rhombus 1.5s 0.66s ease-in-out infinite;
}
.sbl-cirle-to-rhombus::before,
.sbl-cirle-to-rhombus::after {
	content: '';
	height: inherit;
	width: inherit;
	border: 5px solid;
	position: absolute;
	border-radius: 50%;
	top: -5px;
	animation: cirle-to-rhombus 1.5s ease-in-out infinite;
}
.sbl-cirle-to-rhombus::before {
	left: -30px;
	top: 20px;
	animation-delay: 0.33s;
}
.sbl-cirle-to-rhombus::after {
	right: -30px;
	top: -30px;
	animation-delay: 0.99s;
}

@keyframes cirle-to-rhombus {
	50% {
		border-radius: 0;
	}
}

hr {
	margin: 2em 0;
}

.stack {
	--space: var(--s4);
	height: 100%;
}

.stack > * + * {
	margin-block-start: var(--space);
}

#login-form {
	max-width: 30rem;
	margin-inline: auto;
	background: var(--uiBg);
	border: 1px solid var(--uiBorder);
	padding: var(--s4);
}

.add-quantity {
	align-items: baseline;
}

.btn-small {
	font-size: var(--text2);
	padding: var(--s1) var(--s2);
}

/* Dropdown */

.dropdown {
	display: inline-block;
	position: relative;
	font-size: 0.9em;
}

.dd-button {
	display: inline-block;
	border: 1px solid gray;
	border-radius: 4px;
	padding: 5px 30px 5px 20px;
	background-color: #ffffff;
	cursor: pointer;
	white-space: nowrap;
}

.dd-button:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
}

.dd-button:hover {
	background-color: #eeeeee;
}

.dd-input {
	display: none;
}

.dd-menu {
	position: absolute;
	top: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 2px 0 0 0;
	margin: 0 0 0 0;
	z-index: 88;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
	list-style-type: none;
}

.dd-input + .dd-menu {
	display: none;
}

.dd-input:hover + .dd-menu {
	display: block;
}

.dd-menu li {
	padding: 10px 20px;
	cursor: pointer;
	white-space: nowrap;
}

.dd-menu li:hover {
	background-color: #f6f6f6;
}

.dd-menu li a {
	display: block;
	margin: -10px -20px;
	padding: 10px 20px;
}

.dd-menu li.divider {
	padding: 0;
	border-bottom: 1px solid #cccccc;
}
.padding-2 {
	padding-left: 3em;
}

.filter-form {
	display: flex;
	gap: 1em;
	align-items: end;
}

#modal-body-deposit:after {
	content: '';
	padding: 2em;
}
@media print {
	body * {
		visibility: hidden;
	}
	#section-to-print,
	#section-to-print * {
		visibility: visible;
	}
	#section-to-print {
		position: absolute;
		left: 0;
		top: 0;
	}
}

/* INFORMATIONAL CONTENT  */
.warning-text-block {
	margin-top: var(--s2);
	padding-inline: var(--s1);
	background-color: var(--warningBg);
	border: 1px solid var(--warningBorder);
	color: var(--warningText);
	font-size: var(--text3);
}

.error-text-block {
	margin-top: var(--s2);
	padding-inline: var(--s1);
	background-color: var(--errorBg);
	border: 1px solid var(--errorBorder);
	color: var(--errorText);
	font-size: var(--text3);
}

.info-text-block {
	margin-top: var(--s2);
	padding-inline: var(--s1);
	background-color: var(--infoBg);
	border: 1px solid var(--infoBorder);
	color: var(--infoText);
	font-size: var(--text3);
}