/*
	font options:
	*font-family: canada-type-gibson
	- font-weight: 300;
	  font-style: normal; 
	- font-weight: 400;
	  font-style: normal;
	- font-weight: 600;
	  font-style: normal;
	  
	*font-family: adonis-web
	- font-weight: 400;
	  font-style: normal;
	- font-weight: 700;
	  font-style: normal;
	*/
	
	/*body {*/
	/*	background-color: rgb(231, 237, 241);*/
	/*	font-family: canada-type-gibson;*/
	/*	font-weight: 300;*/
	/*	font-size: 18px;*/
	/*}*/

	body {
		overflow-y: scroll;
	}
	
	input, select, textarea {
		font-family: "canada-type-gibson", sans-serif;
		font-weight: 300;
		font-size: 14px;
		border: 2px solid #BDC3C9;
	}
	
	button {
		font-family: "canada-type-gibson", sans-serif;
		text-transform: uppercase;
	}

	input[type="number"]::-webkit-outer-spin-button,
	input[type="number"]::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

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

	::-webkit-scrollbar { width: 6px; height: 6px; }
	
	::-webkit-scrollbar-track { background: #f1f1f1; }
	
	::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); }
	
	.invisible {
		display: none !important;
	}
	
	.hide {
		visibility: hidden !important;
	}

	.tableContainerStyle {
		overflow: auto;
		border-radius: 4px;
		overflow-y: auto;
		scrollbar-gutter: stable;
	}

	.tableContainerStyle::-webkit-scrollbar {
		width: 13px;
	}
	
	.tableContainerStyle::-webkit-scrollbar-track {
		background: #D5DADE;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.tableContainerStyle::-webkit-scrollbar-thumb {
		background-color: #3E74AB;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border: 3px solid #D5DADE;
	}

	.customScrollbar::-webkit-scrollbar {
		width: 13px;
	}
	
	.customScrollbar::-webkit-scrollbar-track {
		background: #D5DADE;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.customScrollbar::-webkit-scrollbar-thumb {
		background-color: #3E74AB;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border: 3px solid #D5DADE;
	}
	
	.normalButton {
		font-size: 13px;
		letter-spacing: .05rem;
		padding: 9px 15px 7px 15px;
		color: white;
		text-align: center;
		vertical-align: bottom;
		white-space: nowrap;
		border-radius: 5px;
		border-style: none;
		cursor: pointer;
		transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	}
	
	.normalButtonBlue {
		/* background-color: #386a9b; */
		background:#3E74AB;
		border: 2px solid #2E5680;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	}
	
	.normalButtonGreen {
		background-color: #04AA6D;
		border: 2px solid #038555;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	}
	
	/*#schedulePickupForm {*/
	/*	width: 100%;*/
	/*	max-width: 500px;*/
	/*}*/
	
	.placeholder {
		visibility: hidden;
	}
	
	/*#rateTitle {*/
	/*	color: #00539f;*/
	/*	font-size: 22px;*/
	/*	font-weight: 400;*/
	/*	margin-bottom: 15px;*/
	/*}*/
	
	.itemLengthOpt {
		color: black;
		font-style: normal;
	}
	
	.disabledBtn {
		opacity: .4;
	}
	
	.textInput {
		width: 100%;
		padding: 6px 5px 4px 5px;
		border-radius: 4px;
	}

	select.textInput {
		padding: 5px 5px 3px 5px;
	}

	.textInput:focus {
		outline: 1px solid #65686B;
	}
	
	.inputErrorContainer {
		position: relative;
	}
	
	.inputError {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 6px;
		margin-left: auto;
		background: #d9534f;
		color: #fff;
		padding: 6px 10px;
		font-size: 12px;
		border-radius: 4px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.50);
		white-space: nowrap;
		z-index: 9;
	}
	
	/* arrow on top */
	.inputError::before {
		content: "";
		position: absolute;
		top: -6px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #d9534f;
		z-index: 2;
	}
	
	/* arrow shadow */
	.input-error::after {
		content: "";
		position: absolute;
		top: -7px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid rgba(0, 0, 0, 0.50);
		z-index: 1;
	}

	.filterDropDownStyle {
		border: 2px solid #A3A8AD;
		padding: 4px 5px 3px 4px;
		border-radius: 5px;
		outline: none;
		color: #4F5254;
		font-weight: 400;
	}

	#customDateContainer {
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}

	.customDate {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	#searchCustomDates {
		padding: 6px 9px 4px 9px;
		font-size: 12px;
	}

	#searchCustomDates:focus {
		outline: 2px solid black;
		outline-offset: 2px;
	}

	.customDateRow {
		display: flex;
		align-items: center;
	}

	.customDateStyle {
		border:2px solid #A3A8AD;
		padding: 3px 3px 1px 3px;
		border-radius: 4px;
	}


	/* 
		=======================
		popup replacing alert()
		=======================
	*/
	.alertOverlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}
	
	.alertPopup {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		padding: 20px 30px;
		border-radius: 8px;
		max-width: 400px;
		text-align: center;
		box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	}

	.alertMessage {
		margin-bottom: 20px;
		font-size: 16px;
	}

	.alertButton {
		width: auto;
		font-size: 14px;
		max-width: 185px;
		/* padding: 8px 16px; */
	}

	.alertButtonRow {
		display: flex;
		gap: 10px;
		justify-content: center;
	}


	/* 
		=======================
		shipment table for shipping tools and shipments page
		=======================
	*/

	.tdLeft {
		text-align: left;
	}
	
	.tdRight {
		text-align: right;
	}
	
	.tdCenter {
		text-align: center;
	}
	
	.tdFirst {
		padding-left: 15px;
		border-radius: 3px 0 0 0;
	}

	.even {
		background-color: rgba(0,0,0,0.03);
	}
	
	.odd {
		background-color: rgba(0,0,0,0.07);
	}

	/* Table widths */

	/* Partner table view */
	.shipmentsTableFormSCAC {
		width: 80% !important;
	}
	
	.undeliveredTableSCAC {
		font-size: .65rem;
	}
	
	.shipmentDetailContainerSCAC {
		max-width: 605px !important;
	}
	
	#undeliveredTable th.amtWidthT1 {
		text-align: center;
	}
	
	.advScacWidthT1, .advProWidthT1, .beyScacWidthT1, .beyProWidthT1, .beyProWidthT1 {
		text-align: center;
	}
	
	th.advSplitWidthT1, th.beySplitWidthT1 {
		text-align: center;
	}
	
	.proWidthT1 {
		width: 5.5%;
	}
	.pickupWidthT1 {
		width: 3.5%;
	}
	.payTypeT1 {
		width: 3.5%;
	}
	.shipperWidthT1 {
		width: 8.5%;
	}
	.consigneeWidthT1 {
		width: 8.5%;
	}
	.amtWidthT1 {
		width: 4.5%;
	}
	.advScacWidthT1 {
		width: 4%;
	}
	.advProWidthT1 {
		width: 6.2%;
	}
	.advSplitWidthT1 {
		width: 4.5%;
	}
	.beyScacWidthT1 {
		width: 4%;
	}
	.beyProWidthT1 {
		width: 6.2%;
	}
	.beySplitWidthT1 {
		width: 4.5%;
	}
	.bolWidthT1 {
		width: 8%;
	}
	
	/* Customer table view */
	#undeliveredTable td.shipperWidthT2 {
		line-height: 1.15;
	}
	
	#undeliveredTable td.consigneeWidthT2 {
		line-height: 1.15;
	}
	
	.proWidthT2 {
		width: 8%;
	}
	.pickupWidthT2 {
		width: 5%;
	}
	.payTypeWidthT2 {
		width: 4.8%;
	}
	.shipperWidthT2 {
		width: 20%;
	}
	.consigneeWidthT2 {
		width: 20%;
	}
	.bolPoWidthT2 {
		width: 18%;
	}
	.poWidthT2 {
		width: 16%;
	}
	.statusWidthT2 {
		width: 12%;
	}

	.bolWidthT2 {
		text-align: center;
		vertical-align: middle;
		width: 3%;
	}

	.bolWidthT2 img.default {
		display: inline-block;
	}

	.bolWidthT2 img.hover {
		display: none;
	}

	@media (hover: hover) {
		/* ALL hover styles here */
		select:hover {
			cursor: pointer;
			outline: 1px solid #A3A8AD;
		}

		.normalButton:hover {
			transform: translate(1px, 1px);
		}

		.normalButtonBlue:hover {
			background-color: #305A85;
			border-color: #284B70;
		}

		.normalButtonGreen:hover {
			background-color: #038052;
			border-color: #027048;
		}

		.pickupRows .bolWidthT2:hover {
			background-color: #3E74AB;
			cursor: pointer;
		}

		.bolWidthT2:hover img.default {
			display: none;
		}
	
		.bolWidthT2:hover img.hover {
			display: inline-block;
		}
	}	#invoiceSplitter {
		display: flex;
		position: relative;
		background-color: rgb(231, 237, 241);
		padding: 30px 10px;
		height: 90vh;
		max-height: 850px;
		gap: 40px;
	}
	
	#invoiceContainer {
		display: flex;
		justify-content: center;
		font-size: 16px;
		line-height: 1;
		width: 50%;
		flex-direction: column;
		position: relative;
	}

	#invoiceTotals {
		position: absolute;
		bottom: -25px;
		right: 33px;
		font-weight: 500;
		display: flex;
		align-items: flex-end; 
		gap: 15px;
	}
	
	#invoicePreview {
		display: flex;
		flex: 1;
	}
	
	#invoicePreviewBackground {
		background-color: #fff;
		position: relative;
		height: 100%;
		width: 100%;
		padding: 17px;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
		border-radius: 4px;
	}
	
	#closeInvoice {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 30px;
		cursor: pointer;
		display: none;
	}
	
	#invoicePDFContainer {
		height: 100%;
		width: 100%;
		display: inline-block;
		margin-top: 3px;
	}
	
	#invoices {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		width: 100%;
		padding: 17px;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
		border-radius: 4px;
		height: 100%;
	}
	
	#invoiceTableHeader {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		width: 100%;
		gap: 10px;
	}
	
	#invoiceTableHeader > * {
		flex: 1;
		display: flex;
		justify-content: center;
	}
	
	#invoiceTableHeader > :first-child {
		justify-content: start;
	}
	
	#invoiceTableHeader > :last-child {
		justify-content: end;
	}
	
	#invoiceCSV {
		display: flex;
		align-items: center;
		padding: 3px 5px 3px 10px;
		cursor: pointer;
		font-weight: 400;
		background-color: #E9EEF2;
		border: 2px solid #C4C8CC;
		border-radius: 4px;
		transition: all .15s ease;
	}
	
	/* #invoiceCSV:hover {
		cursor: pointer;
		transform: translate(1px, 1px);
		background-color: #DCE2E6;
	} */
	
	#invoiceIcon {
		width: 28px;
	}
	
	.invoiceTitles {
		font-size: 28px;
		text-transform: uppercase;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		/* margin: 0 5px 12px 5px; */
	}
	
	#invoiceSearch {
		padding: 5px;
		border: 2px solid #A3A8AD;
		border-radius: 5px;
		width: 100%;
		max-width: 175px;
		font-style: italic;
	}

	#invSearchCancel {
		cursor: pointer;
	}
	
	#invoiceTableContainer {
		width: 100%;
		border: 2px solid #5d89ac;
	}
	
	#invoiceTable {
		border-spacing: 0px;
		width: 100%;
	}
	
	#invoiceTable td {
		padding: 8px 8px 6px 8px;
	}
	
	#invoiceTable th {
		padding: 12px 8px 10px 8px;
	}
	
	#invoiceHead {
		background-color: #386B9C;
		color: #fff;
		position: sticky;
		top: 0;
		letter-spacing: 1px;
	}
	
	#invoiceHead th {
		font-weight: 400;
		white-space: nowrap;
	}
	
	/* #invoiceTable .even:hover, #invoiceTable .odd:hover {
		background-color: rgba(255,255,255, 0.65);
		box-shadow: rgb(218,220,244) 1px 0px 0px 0px inset, rgb(218,220,244) -1px 0px 0px 0px inset, 
			rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
	} */
	
	.invoiceDownload {
		cursor: pointer;
	}

	.invoiceDownloadIcon {
		height: 13px;
		width: 13px;
		margin-left: 5px;
	}
	
	#invoiceTable .downloadStatementContainer {
		padding: 0px 0px 25px 0px;
		text-align: right;
		font-weight: 500;
	}

	#invoiceTable tr:last-child .downloadStatementContainer {
		padding-bottom: 0px;
	}
	
	.downloadStatement {
		padding: 8px 10px 6px 10px;
		font-weight: 500;
		cursor: pointer;
	}
	
	.stmtRow {
		/*background-color: #15D18C;*/
		/*background-color: #FFDC7F;*/
		background-color:  rgb(255, 220, 127);
		background-color: rgba(255, 220, 127, .75);
		padding: 8px 8px 6px 8px;
		cursor: pointer;
		white-space: nowrap;
	}
	
	#invoiceLoadingOverlay {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #818181;
		z-index: 100000;
		opacity: 0.5;
		overflow: hidden;
	}
	
	#noInvMessage {
		position: absolute; 
		left: 0;
		right: 0;
		top: 50px;
		margin-inline: auto;
		width: fit-content;
		font-size: 28px;
		font-weight: 500;
		background-color: #fff;
		padding: 20px;
		border-radius: 4px;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	}

	.invoiceTotalLabel {
		font-size: 18px;
	}

	@media (hover: hover) {
		/* ALL hover styles here */
		#invoiceCSV:hover {
			cursor: pointer;
			transform: translate(1px, 1px);
			background-color: #DCE2E6;
		}

		#invoiceTable .even:hover, #invoiceTable .odd:hover {
			background-color: rgba(255,255,255, 0.65);
			box-shadow: rgb(218,220,244) 1px 0px 0px 0px inset, rgb(218,220,244) -1px 0px 0px 0px inset, 
				rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
		}
	}

	@media (max-width: 1700px) {
		.invoicePartnerTable {
			font-size: 14px;
		}
	}

	@media (max-width: 1500px) {
		.invoicePartnerTable {
			font-size: 12px;
		}

		#invoiceTable.invoicePartnerTable th {
			padding: 8px 4px 6px 4px;
		}

		#invoiceTable.invoicePartnerTable td:not(.invoiceDlBackground td) {
			padding: 6px 4px 4px 4px;
		}

		#invoiceSplitter {
			gap: 20px;
		}
	}
	
	/* invoices */
	@media (max-width: 1300px) {
		#invoicePreview {
			display: none;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			background-color: rgba(204,204,204,.7);
			z-index: 100;
			position: fixed;
			top: 0;
			left: 0;
			margin-left: 0;
		}
		
		#invoicePreviewBackground {
			width: 100%;
			max-width: 900px;
			margin: 0 15px;
			max-height: 90vh;
		}

		#invoiceContainer {
			justify-content: flex-start;
		}
		
		#invoiceContainer {
			width: 100%;
		}
		
		#closeInvoice {
			display: block;
		}

		.invoicePartnerTable {
			font-size: 16px;
		}
	}

	@media (max-width: 1000px) {
		#invoiceSplitter {
			padding-top: 0px;
			padding-right: 0px;
			padding-left: 0px;
			background-color: white;
		}

		#invoices {
			border-radius: 0px;
			box-shadow: none;
		}
	}

	@media (max-width: 830px) {
		.invoicePartnerTable {
			font-size: 10px;
		}

		#invoicePreviewBackground {
			margin-right: 0px;
			margin-left: 0px;
			padding: 10px;
		}
	}

	@media (max-width: 600px) {
		.hideInvColMobile {
			display: none;
		}

		#invoiceIcon {
			width: 22px;
		}

		.invoiceTitles {
			font-size: 24px;
		}

		.invoicePartnerTable {
			font-size: 16px;
		}
	}

	@media (max-width: 450px) {
		#invoiceTableHeader {
			flex-wrap: wrap;
		}
		
		#invoiceTableHeader > div:nth-child(2) {
			order: 1;
			flex: 0 0 100%;
		}
		
		#invoiceTableHeader > div:nth-child(1) {
			order: 2;
		}
		
		#invoiceTableHeader > div:nth-child(3) {
			order: 3;
			max-width: 135px;
		}

		#invoiceTable {
			font-size: 14px;
		}

		#invoiceTable td {
			padding: 6px 6px 4px 6px;
		}

		.stmtRow {
			padding: 6px 6px 4px 6px;
		}

		#invoiceTable th {
			padding: 10px 6px 8px 6px;
		}

		#invoiceCSV {
			font-size: 14px;
		}

		#invoiceTotals {
			flex-direction: column;
			font-size: 14px;
			gap: 5px;
		}
	}

	@media (max-width: 350px) {
		#invoiceTable {
			font-size: 10px;
		}
	}	#shipments {
		display: flex;
		background-color: rgb(231, 237, 241);
		padding: 30px 10px;
		line-height: 1;
		height: 90vh;
		max-height: 850px;
	}
	
	#shipmentsTableForm {
		display: flex;
		flex-direction: column;
		background-color: white;
		padding: 17px;
		width: 60%;
		flex-grow: 0;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
		border-radius: 4px;
		gap: 10px;
	}
	
	#shipmentsHeader {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
	}

	#shipmentsTableForm #customDateContainer, .dateRangeContainer {
		font-size: 16px;
	}

	#shipmentsTableForm .customDate:first-of-type {
		gap: 17px;
	}

	#shipmentsTableForm .customDateStyle {
		max-width: 117px;
	}
	
	.dateRangeContainer {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	#dateRangeLabel {
		white-space: nowrap;
	}

	#shipmentsTableTitle {
		font-size: 28px;
		font-weight: 500;
		text-transform: uppercase;
		text-align: center;
		white-space: nowrap;
	}
	
	.shipmentsSearchContainer {
		/* width: 100%; */
		/* max-width: 200px; */
		position: relative;
	}
	
	.searchFilterStyle {
		padding: 5px;
		border: 2px solid #A3A8AD;
		border-radius: 5px;
		width: 100%;
	}
	
	.searchFilterStyle::-webkit-input-placeholder {
		font-style: italic;
	}
	.searchFilterStyle:-moz-placeholder {
		font-style: italic;  
	}
	.searchFilterStyle::-moz-placeholder {
		font-style: italic;  
	}
	.searchFilterStyle:-ms-input-placeholder {
		font-style: italic; 
	}
	
	#shpSearchCancel {
		width: 18px;
		position: absolute;
		right: 4px;
		top: 6px;
		cursor: pointer;
	}

	#shpSearchIcon {
		width: 15px;
		position: absolute;
		right: 6px;
		top: 7px;
		pointer-events: none;
	}
	
	#tracingSection {
		display: flex;
		justify-content: center;
	}
	
	#undeliveredTable {
		width: 100%;
		table-layout: fixed;
		background-color: rgba(0,83,159,0.05);
		border-collapse: collapse;
		font-size: 12px;
		letter-spacing: .035rem;
	}
	
	#undeliveredTable tr td:nth-child(1) {
		padding-left: 15px;
	}
	
	#undeliveredTable thead th:nth-child(1) {
		padding-left: 15px;
	}
	
	#undeliveredTable thead {
		/*background-color: #00539f;*/
		background-color: #386B9C;
		position: sticky;
		top: 0;
	}
	
	#undeliveredTable th {
		color: white;
		font-weight: 300;
		padding: 12px 5px;
		font-size: 15px;
	}
	
	#undeliveredTable td {
		color: rgb(51, 51, 51);
		padding: 10px 5px 8px 5px;
		word-wrap: break-word;
	}
	
	#undeliveredTable .pickupRows {
		background-color: #FAF7D4;
	}
	
	#undeliveredTable .pickupRows:nth-child(even) {
		background-color: #F0EDCC;
	}
	
	/* #undeliveredTable tbody tr:hover:not(.subHeader):not(.pickupRows:has(.bolWidthT2:hover)) {
		cursor: pointer;
		background-color: rgba(255,255,255, 0.65);
		box-shadow: rgb(218,220,244) 1px 0px 0px 0px inset, rgb(218,220,244) -1px 0px 0px 0px inset, 
			rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
	} */
	
	.subHeader {
		/*background-color: #878787;*/
		background-color: #7993AD;
		font-size: 13px;
	}
	
	.subHeader td {
		padding-top: 4px !important;
		padding-bottom: 2px !important;
		color: white !important;
	}
	
	.selectedRow {
		background-color: #c3dbff !important;
	}
	
	/*Shipment details*/

	.shipmentDetailTitle {
		font-size: 28px;
		font-weight: 500;
	}
	
	#shipmentDetailContainer {
		display: flex;
		width: 40%;
		margin-left: 20px;
	}
	
	#shipmentDetail {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		font-size: 14px;
		padding: 15px 15px 0px 15px;
		width: 100%;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
		border-radius: 4px;
		overflow-y: auto;
	}
	
	.partnerLink {
		color: #2799E6;
		font-style: italic;
		letter-spacing: .04rem;
	}
	
	/* .partnerLink:hover {
		color: #FFAE52;
	} */
	
	.bold {
		font-weight: 500;
	}
	
	#proDetailTable {
		border-collapse: collapse;
		text-transform: uppercase;
		width: 100%;
		border: 0;
		text-align: left;
		/*margin-top: 13px;*/
		margin: 13px 0;
	}
	
	#proDetailTable td {
		width: 25%;
	}
	
	#proDetailTable td:nth-child(4n+1) {
		padding-left: 10px;
	}
	
	#proDetailTable td:nth-child(4n+3) {
		padding-left: 14px;
	}
	
	#shipAndConsTable {
		text-transform: uppercase; 
		width: 100%;
		text-align: left; 
		line-height: 1.18;
		margin-bottom: 13px;
	}
	
	#shipAndConsTable td:nth-child(1) {
		border-style: solid;
		border-color: #fff;
		border-width: 0 3px 0 0;
	}
	
	#shipAndConsTable td:nth-child(2) {
		border-style: solid;
		border-color: #fff;
		border-width: 0 0 0 3px;
	}
	
	#chargesTable {
		background-color: rgba(0,83,159,0.05);
		border-collapse: collapse;
	}
	
	#chargesTable th {
		background-color: #386a9b;
		color: #fff;
		font-weight: 300;
		padding: 5px 4px 3px 4px;
	}
	
	#chargesTable tr:nth-child(even) {
		background-color: rgba(0,0,0,0.03);
	}
	
	#chargesTable tr:nth-child(odd) {
		background-color: rgba(0,0,0,0.075);
	}
	
	#chargesTable td {
		padding: 4px 2px 2px 2px;
	}
	
	#chargesTable td:nth-child(7n+1) {
		padding-left: 4px;
	}
	
	#chargesTable td:nth-child(7n+7) {
		padding-right: 4px;
	}
	
	#documentsTable td:nth-child(1) {
		border-style: solid;
		border-color: #fff;
		border-width: 0 3px 0 0;
	}
	
	#documentsTable td:nth-child(2) {
		border-style: solid;
		border-color: #fff;
		border-width: 0 0 0 3px;
	}
	
	.closeDetails {
		display: none;
	}

	@media (hover: hover) {
		/* ALL hover styles here */
		.partnerLink:hover {
			color: #FFAE52;
		}

		#undeliveredTable tbody tr:hover:not(.subHeader):not(.pickupRows:has(.bolWidthT2:hover)) {
			cursor: pointer;
			background-color: rgba(255,255,255, 0.65);
			box-shadow: rgb(218,220,244) 1px 0px 0px 0px inset, rgb(218,220,244) -1px 0px 0px 0px inset, 
				rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
		}
	}
	
	@media (max-width: 1500px) {
		#shipmentDetailContainer {
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			background-color: rgba(204,204,204,.7);
			z-index: 100;
			position: fixed;
			top: 0;
			left: 0;
			margin-left: 0;
		}
		
		#shipmentDetail {
			max-width: 900px;
			margin: 0 10px;
			overflow: auto;
			max-height: 82.5vh;
		}
		
		#shipmentsTableForm {
			width: 100%;
		}
		
		.shipmentsTableFormSCAC {
			width: 100% !important;
		}
		
		.shipmentDetailContainerSCAC {
			max-width: 100% !important;
		}
		
		.closeDetails {
			display: block;
		}
		
		/*#shipmentDetailContainer {*/
		/*	max-width: 100%;*/
		/*}*/
		
	}

	@media (max-width: 1000px) {
		#shipments {
			padding: 0px;
		}

		#shipmentsTableForm {
			border-radius: 0px;
			box-shadow: none;
		}

		.hideShpColMobile {
			display: none;
		}

		.shipperWidthT2 {
			width: 15%;
		}

		.consigneeWidthT2 {
			width: 15%;
		}

		#undeliveredTable colgroup {
			display: none;
		}
	}

	@media (max-width: 750px) {
		.dateRangeContainer {
			flex-direction: column;
			align-items: flex-start;
			gap: 2px;
		}

		#dateRangeLabel {
			font-size: 16px;
		}

		.filterDropDownStyle {
			padding: 2px;
		}

		#shipmentsTableTitle {
			font-size: 24px;
		}
	}

	@media (max-width: 600px) {
		#shipmentDetail, .shipmentButtonLabel {
			font-size: 12px;
		}

		#shipmentDetail {
			margin-right: 0px;
			margin-left: 0px;
		}

		.shipmentDetailTitle {
			font-size: 22px;
		}

		.shpDetStatus, .shpDetNumber {
			font-size: 15px !important;
		}
	}

	@media (max-width: 500px) {
		#shipmentsHeader {
			flex-wrap: wrap;
		}
		
		#shipmentsHeader > div:nth-child(2) {
			order: 1;
			flex: 0 0 100%;
		}
		
		#shipmentsHeader > div:nth-child(1) {
			order: 2;
		}
		
		#shipmentsHeader > div:nth-child(3) {
			order: 3;
			max-width: 135px;
		}

		#undeliveredTable th {
			font-size: 12px;
		}

		#undeliveredTable td {
			font-size: 10px;
		}
	}	#shippingTools {
		display: flex;
		justify-content: center;
		padding: 30px 15px;
		background-color: rgb(231, 237, 241);
		line-height: normal;
		font-size: 14px;
		gap: 30px;
		height: 90vh;
		max-height: 850px;
	}

	#shippingTools input, #shippingTools select, #shippingTools textarea {
		font-size: 13px;
	}
	
	#shippingToolsRightContainer {
		/* margin-left: 20px;
		margin-right: 20px; */
		display: flex;
		flex: 1;
	}

	#pickupTableContainer {
		display: flex;
		flex-direction: column;
		gap: 15px;
		background-color: white;
		max-width: 870px;
		width: 100%;
		padding: 25px;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
		border-radius: 4px;
	}

	#pickupTableTitle {
		text-align: center;
		background-color: #fff;
		font-size: 22px;
		text-transform: uppercase;
		font-weight: 500;
		letter-spacing: .6px;
		/* color: #2C3E50; */
		color: #3F5769;
	}

	#pickupTableBody {
		max-height: 735px;
	}

	#pickupTable {
		width: 100%;
		table-layout: fixed;
		background-color: rgba(0,83,159,0.05);
		border-collapse: collapse;
		font-size: 12px;
		letter-spacing: .035rem;
	}
	
	#pickupTable tr td:nth-child(1) {
		padding-left: 15px;
	}
	
	#pickupTable thead th:nth-child(1) {
		padding-left: 15px;
	}
	
	#pickupTable thead {
		/*background-color: #00539f;*/
		background-color: #386B9C;
		position: sticky;
		top: 0;
	}
	
	#pickupTable th {
		color: white;
		font-weight: 300;
		padding: 12px 5px;
		font-size: 15px;
	}
	
	#pickupTable td {
		color: rgb(51, 51, 51);
		padding: 10px 5px 8px 5px;
		word-wrap: break-word;
	}

	#pickupTable .pickupRows {
		background-color: rgba(0,0,0,0.07);
	}
	
	#pickupTable .pickupRows:nth-child(even) {
		background-color: rgba(0,0,0,0.03);
	}
	
	#quoteHistory {
		display: flex;
		flex-direction: column;
		background-color: white;
		max-width: 850px;
		width: 100%;
		padding: 25px;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
		border-radius: 4px;
		gap: 10px;
	}
	
	#quoteHistoryHeader {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#quoteHistory .customDate:first-of-type {
		gap: 25px;
	}

	#quoteHistory .customDateStyle {
		max-width: 112px;
	}

	#quoteHistoryBody {
		margin-top: 13px;
	}
	
	#qotSearchCancel {
		width: 17px;
		position: absolute;
		right: 5px;
		top: 5px;
		cursor: pointer;
	}

	#qotSearchIcon {
		width: 15px;
		position: absolute;
		right: 6px;
		top: 6px;
		pointer-events: none;
	}
	
	#quoteTableContainer {
		display: flex;
		justify-content: center;
	}
	
	#quoteTable {
		width: 100%;
		table-layout: fixed;
		background-color: rgba(0,83,159,0.05);
		border-collapse: collapse;
		font-size: 12px;
		letter-spacing: .035rem;
	}
	
	#quoteTable > tbody > tr > td:nth-child(1) {
		padding-left: 15px;
	}
	
	#quoteTable > tbody > tr > td:nth-child(7) {
		padding-right: 15px;
	}
	
	#quoteTable > thead > th:nth-child(1) {
		padding-left: 15px;
	}
	
	#quoteTable > thead > th:nth-child(7) {
		padding-right: 15px;
	}
	
	#quoteTable > thead {
		/*background-color: #00539f;*/
		background-color: #386B9C;
		position: sticky;
		top: 0;
	}
	
	#quoteTable > thead > th {
		color: white;
		font-weight: 300;
		padding: 12px 5px;
		font-size: 15px;
	}
	
	#quoteTable > tbody > tr > td {
		color: rgb(51, 51, 51);
		padding: 10px 5px 8px 5px;
		word-wrap: break-word;
	}
	
	.quoteSelectedRow {
		background-color: #c3dbff !important;
	}
	
	.quoteTableDetails {
		margin-left: auto;
		width: 100%;
	}
	
	.quoteTableDetailsContainer {
		width: 100%;
		border-top: 2px solid #3f5769;
		background-color: #c3dbff;
	}
	
	.quoteTableDetails > tr > th {
		padding-left: 8px;
		padding-right: 8px;
	}
	
	.quoteTableDetails > tr > td {
		padding: 3px 8px;
	}
	
	.quoteTableDetails th {
		text-align: left;
	}

	.normalButtonBlue.updateQuoteBtn {
		margin-left: 8px;
		margin-top: 5px;
		padding: 7px 12px 5px 12px;
		font-size: 12px;
	}

	.detailsDiv {
		/* background-color: #f5f5f5; */
		padding: 10px;
		border-radius: 4px;
		background-color: #D9E8FF;
	}
	
	/*table columns*/
	#quoteTable > thead > th:nth-child(1) {
		width: 12%;
	}
	
	#quoteTable > thead > th:nth-child(2) {
		width: 8%;
	}
	
	#quoteTable > thead > th:nth-child(3) {
		width: 22%;
	}
	
	#quoteTable > thead > th:nth-child(4) {
		width: 22%;
	}
	
	#quoteTable > thead > th:nth-child(5) {
		width: 8%;
	}
	
	#quoteTable > thead > th:nth-child(6) {
		width: 11%;
	}
	
	#quoteTable > thead > th:nth-child(7) {
		width: 17%;
	}
	
	
	
	
	#shipmentsContainer {
		display: flex;
		justify-content: flex-end;
		flex: 1;
		/* min-height: 0; */
	}
	
	#shipmentBox {
		background-color: #fff;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
		width: 100%;
		max-width: 870px;
		overflow: hidden;
		border-radius: 4px;
		display: flex;
		flex-direction: column;
	}

	.shippingToolsTitle {
		text-align: center;
		padding-bottom: 15px;
		background-color: #fff;
		font-size: 28px;
		text-transform: uppercase;
		font-weight: 500;
		letter-spacing: .6px;
		color: #3F5769;
	}

	.quoteHistoryTitle {
		text-align: center;
		background-color: #fff;
		font-size: 28px;
		text-transform: uppercase;
		font-weight: 500;
		letter-spacing: .6px;
		color: #3F5769;
	}
	
	#shipmentForm {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
		overflow: hidden;
	}

	#shipmentFormBody {
		display: flex;
		flex-direction: column;
		flex: 1;
		/* min-height: 0; */
		padding: 0 25px 15px 25px;
		overflow-y: auto;
		scrollbar-gutter: stable;
	}

	#shipmentFormTabs {
		display: flex;
		margin-bottom: 18px;
		position: relative;
		overflow: hidden;
	}

	.shipmentFormTab {
		flex: 1 1 50%;
		color: #5D7587;
		background-color: #DADFE3;
		padding: 12px 9px 9px 9px;
		font-size: 17px;
		font-weight: 500;
		letter-spacing: .05rem;
		text-transform: uppercase;
		text-align: center;
		cursor: pointer;
		border: none;
		position: relative;
		z-index: 1;
		/* transition: background-color .15s ease, border-color .15s ease; */
		transition: all .15s ease;
	}

	.shipmentFormTab:first-child {
		border-top-left-radius: 4px;
	}

	.shipmentFormTab:last-child {
		border-top-right-radius: 4px;
	}

	.shipmentFormTab + .shipmentFormTab {
		border-left: none;
	}

	.shipmentFormTab.active {
		color: #3F5769;
		background-color: #ffffff;
		border: none;
	}

	#shipmentFormTabUnderline {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 3px;
		width: 0;
		/* background-color: #3F5769; */
		background-color: #c71218;
		transition: left .25s ease, width .25s ease;
		pointer-events: none;
		z-index: 2;
	}
	
	#shipperAndConsigneeContainer {
		display: flex;
		gap: 20px;
		background-color: #E7EDF1;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		padding: 10px;
		padding-bottom: 15px;
	}

	#shipperDropdown, #consigneeDropdown, select.shpListConsigneeDropdown {
		padding-right: 16px;
	}
	
	.shipperInfo {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}
	
	.consigneeInfo {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}
	
	.textInputContainer {
		width: 100%;
	}

	.shipmentMore {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	#shipmentMoreContainer {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		background-color: #E7EDF1;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		padding: 0 10px 10px 10px;
		margin-bottom: 15px;
		position: relative;
	}

	.multiPointMsg {
		color: #c51015;
		background-color: #DEBFC0;
		padding: 5px 10px 3px 10px;
		border-radius: 4px;
		/* position: absolute;
		bottom: 10px; */
	}

	#shipmentList .multiPointMsg {
		bottom: -50px;
		flex-basis: 100%;
	}

	#transitTimeContainer {
		display: flex;
		font-size: 13px;
	}
	
	#transitTimeResult {
		font-weight: 500;
		margin-right: 5px;
		white-space: nowrap;
	}
	
	/* #transitTimeDetails {
		margin-left: 10px;
		margin-top: 6px;
	} */

	#shippingLabelsMore {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.shippingLabelsMoreSection {
		display: flex;
		gap: 16px;
	}

	.shippingLabelsInputDiv {
		flex: 1;
	}
	
	#showShipLabelsMore {
		align-self: flex-start;
	}
	
	#sLabelTextArea {
		width: 100%;
		height: 200px;
		border: 1px solid #BDC3C9;
		border-radius: 4px;
		margin-bottom: 15px;
		resize: none;
	}
	
	#sLabelTextArea:focus {
		outline: 1px solid #65686B;
	}
	
	.zipBorder {
		border: 2px solid black;
	}
	
	.selectStyle {
		width: 100%;
		margin-bottom: 15px;
	}
	
	.ctStZpInfo {
		display: flex;
	}
	
	.cityContainer {
		flex: 3.5;
	}
	
	.stateContainer {
		margin: 0 7px;
		flex: 1;
	}
	
	.zipContainer {
		flex: 1.7;
	}
	
	.popupSubContainer {
		display: flex;
		align-items: flex-end;
		width: 100%;
	}
	
	.popupSubContainerSingle {
		width: 100%;
	}

	#pickupBtnContainer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	#buttonOptions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	#addPickupBtn, #clearPickupBtn, #getRateQuote, #moveToPickupTab {
		position: relative;
		padding-right: 33px;
		font-size: 14px;
		padding-left: 12px;
	}

	.arrowBtnIcon {
		width: 17px;
		transform: scaleX(-1);
		position: absolute;
		bottom: 7px;
		right: 10px;
	}

	.extraButtonOptions {
		display: flex;
		gap: 10px;
	}

	.reverseButtonBlue {
		color: #3E74AB;
		border: 2px solid #3E74AB;
		font-weight: 500;
		font-size: 14px;
		position: relative;
		padding-left: 30px;
		padding-right: 11px;
	}

	.shippingLabelsIcon {
		width: 20px;
		position: absolute;
		left: 6px;
		top: 7px;
	}

	.shippingLabelsIcon.default {
		opacity: 1;
	}

	.shippingLabelsIcon.hover {
		opacity: 0;
	}
	
	.bolIcon {
		width: 14px;
		height: 17px;
		position: absolute;
		left: 10px;
		top: 6px;
	}

	.bolIcon.default {
		opacity: 1;
	}

	.bolIcon.hover {
		opacity: 0;
	}
	
	.btnContainer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.detailTitleStyle {
		color: #00539f;
		font-weight: 400;
		text-transform: uppercase;
		font-weight: 500;
		white-space: nowrap;
	}

	#shippingToolsBody {
		background-color: #E7EDF1;
		padding: 10px;
		border-radius: 4px;
	}

	#schedulePickupSection {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	#shipmentListContainer {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: rgba(65, 123, 181, .15);
		border: 1px solid rgba(65, 123, 181, .3);
		border-radius: 5px;
		padding: 15px;
		gap: 10px;
		width: 100%;
	}

	#shipmentListHeader {
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}

	#shipmentListTitle {
		font-weight: 500;
		font-size: 16px;
		letter-spacing: .035rem;
		border-bottom: 2px solid rgba(65, 123, 181, .3);
		padding-bottom: 5px;
		width: 100%;
	}

	#addShipmentBtn {
		display: flex;
		align-items: center;
		gap: 3px;
		cursor: pointer;
		padding: 7px 10px 5px 10px;
		align-self: flex-end;
		position: relative;
		top: -7px;
		font-size: 12px;
	}

	#shipmentList {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.shipmentItem {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		justify-content: space-between;
		gap: 15px;
	}

	#consigneeInfoTextOnly {
		display: flex;
		flex-direction: column;
		gap: 5px;
		flex: 1;
		text-transform: uppercase;
	}

	#consigneeTextPlaceholder {
		font-style: italic;
	}

	[name="sid"]::placeholder {
		font-style: italic;
	}

	/* #consigneeTextCityStateZip {
		display: flex;
		gap: 3px;
	} */

	.shipmentConsigneeInfo {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.shpListMore {
		display: flex;
		gap: 8px;
	}

	.shpListName {
		flex: 1;
	}

	.shpListAddress {
		flex: 1;
	}

	.shpListCtStZp {
		display: flex;
		align-items: flex-end;
		gap: 7px;
	}

	.shpListCity {
		flex: 3;
	}
	
	.shpListState {
		flex: 1;
	}
	
	.shpListZip {
		flex: 1.7;
	}

	.shpListMoreBtn {
		font-size: 12px;
		padding-top: 8px;
		padding-bottom: 6px;
	}

	.removeShpBtn {
		position: absolute;
		top: -10px;
		right: -5px;
		width: 20px;
		height: 20px;
		cursor: pointer;
	}

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

	.svgIcon {
		width: 20px;
		height: 20px;
		cursor: pointer;
	}

	.circleSVG {
		fill: #d9534f;
		stroke: #7a1f1c;
		stroke-width: 2;
		transition: fill .15s ease;
	}
	
	.xSVG {
		stroke: white;
		stroke-width: 2;
	}

	#pickupInformation {
		display: flex;
		justify-content: space-around;
		width: 100%;
		gap: 25px;
	}

	#contactInformation {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.contactInformationRow {
		display: flex;
		gap: 15px;
	}

	.contactInformationInput {
		flex: 1;
	}

	#dateAndTime {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	#timeContainer {
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	#timeBetween {
		display: flex;
		gap: 15px;
	}

	.times {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 7px;
		width: 100%;
		min-width: 0;
	}

	input[name="pickupDate"] {
		padding-top: 5px;
		padding-bottom: 2px;
	}

	input[name="readyTime"], input[name="closeTime"] {
		padding-top: 3px;
		padding-bottom: 1px;
		/* min-width: 0; */
		width: 0;
		flex: 1;
	}

	#optionalInstructions {
		width: 100%;
		padding: 5px;
		border: 1px solid #BDC3C9;
		border-radius: 4px;
		resize: none;
		height: 55px;
	}
	
	#optionalInstructions:focus {
		outline: 1px solid #65686B;
	}

	.plusIcon {
		padding-bottom: 1px;
		margin-right: 2px;
		width: 14px;
	}
	
	.verticalDivider {
		background-color: #386B9C;
		/* background-color: rgb(72, 98, 119); */
		/* border-radius: 5px; */
		width: 4px;
	}

	.horizontalDivider {
		background-color: rgba(65, 123, 181, .3);
		border-radius: 5px;
		height: 2px;
		width: 100%;
		margin: 10px 0;
	}

	.handlingUnitInfo {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 9px;
	}

	.handUnitsTop, .handUnitsBottom {
		display: flex;
		gap: 15px;
	}

	.handUnitsSection {
		flex: 1;
	}

	.handUnitsTypeList {
		display: flex;
		margin-top: 3px;
		flex-wrap: wrap;
		column-gap: 8px;
		row-gap: 2px;
	}

	.handUnitsTypeList > label {
		flex: 1 0 50px;
	}

	.handUnitsTypeLabel {
		display: flex;
		align-items: center;
		cursor: pointer;
		gap: 2px;
	}

	#rateSection {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	#rateTitle {
		margin-bottom: 10px;
	}

	#rateDetails {
		display: flex;
		gap: 20px;
		margin-bottom: 15px;
	}
	
	#freightItemContainer {
		display: flex;
		flex-direction: column;
		background-color: rgba(65, 123, 181, .15);
		border: 1px solid rgba(65, 123, 181, .3);
		border-radius: 5px;
		padding: 15px 15px 0 15px;
		max-width: 445px;
	}
	
	#freightItemContainer .textInput {
		text-align: right;
	}
	
	#freightItemList {
		display: flex;
		flex-direction: column;
		/*max-width: 500px;*/
	}
	
	.freightItem {
		display: grid;
		grid-template-columns: 
			32px
			5px
			1fr
			25px
			1fr
			25px
			1fr
			5px
			.25fr;
		align-items: center;
		margin-bottom: 15px;
	}
	
	.freightItem * {
		min-width: 0;
	}
	
	#freightItemHeader {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 15px;
		gap: 10px;
	}
	
	.freightItemLabel {
		white-space: nowrap;
		text-transform: uppercase;
		border-bottom: 2px solid rgba(65, 123, 181, .3);
		letter-spacing: .035rem;
		font-weight: 500;
		font-size: 14px;
		width: 100%;
		padding-bottom: 5px;
	}
	
	#addFreightItem {
		font-size: 12px;
		padding: 6px 8px 4px 8px;
		margin-right: 30px;
		display: flex;
		align-items: center;
		gap: 3px;
		position: relative;
		top: -7px;
		align-self: flex-end;
	}

	.freightPlusIcon {
		padding-bottom: 2px;
		margin-right: 2px;
		width: 14px;
	}
	
	.col1 {grid-column: 1;}
	.col2 {grid-column: 3;}
	.col3 {grid-column: 5;}
	.col4 {grid-column: 7;}
	.col5 {grid-column: 9;}
	
	.freightItemIndex {
		/*flex: 0 0 32px;*/
		margin-bottom: 8px;
		font-size: 14px;
		font-weight: 500;
		text-transform: uppercase;
		align-self: flex-end;
	}
	
	.freightItemSection {
		display: flex;
		flex-direction: column;
		max-width: 100px;
	}
	
	#freightTotals {
		/*display: flex;*/
		display: grid;
		grid-template-columns: 
			auto
			5px
			.85fr
			25px
			1fr
			25px
			1fr
			5px
			.25fr;
		align-items: center;
		margin-bottom: 15px;
		
		
		/*align-items: center;*/
		border-top: 2px solid black;
		padding-top: 15px;
	}
	
	.totCol1 {grid-column: 1}
	.totCol2 {grid-column: 3}
	.totCol3 {grid-column: 5}
	
	#freightTotalTitle {
		width: 18%;
		margin-bottom: 8px;
		font-size: 14px;
		font-weight: 500;
		text-transform: uppercase;
		align-self: flex-end;
		color: #2E3F4D;
	}
	
	.freightTotalInput {
		display: flex;
		flex-direction: column;
	}
	
	.freightItemInputTitle {
		font-size: 11px;
		font-weight: 500;
		margin-right: 3px;
		white-space: nowrap;
		text-align: right;
	}
	
	.freightItemInput {
		text-align: right;
	}
	
	.lbsTag {
		align-self: flex-end;
		font-size: 12px;
		font-weight: 500;
		margin: 0 20px 8px 3px;
	}

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

	.removeFreightIcon {
		width: 20px;
		height: 20px;
		cursor: pointer;
		transition: transform .15s ease, fill .15s ease;
	}

	.circleSVG {
		fill: #d9534f;
		stroke: #7a1f1c;
		stroke-width: 2;
		transition: fill .15s ease;
	}
	
	.xSVG {
		stroke: white;
		stroke-width: 2;
	}
	
	#shipmentDetailSelects {
		display: flex;
		flex-direction: column;
		align-self: flex-start;
		gap: 35px;
		/* width: 100%; */
		/* margin: 15px 0; */
	}

	.shipmentDetailSelect {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		flex: 1;
	}
	
	#rateQuoteTotal {
		font-weight: 500;
		display: inline-block;
		margin-left: 5px;
	}
	
	#rateQuoteDetailsLink {
		margin-top: 7px;
		font-style: italic;
		cursor: pointer;
	}
	
	#rateResultsContainer {
		color: #00539F;
		margin-top: 5px;
	}
	
	#rateQuoteDetails {
		margin-left: 15px;
		margin-right: 15px;
	}
	
	#rateQuoteTable {
		color: #00539F;
		text-align: left;
		width: 100%;
		border-collapse: collapse;
	}
	
	#rateQuoteTable td {
		padding: 5px 25px 5px 0;
		color: #00539F;
	}
	
	#rateQuoteTable td:nth-child(2) {
		padding-right: 0;
	}
	
	#rateQuoteDisclaimer {
		font-size: 15px;
		margin-top: 15px;
	}
	
	.rateQuoteTitles {
		font-size: 14px;
		font-weight: 500;
		text-transform: uppercase;
		/*color: #2E3F4D;*/
		margin-right: 5px;
		white-space: nowrap;
	}
	
	#rqSuccess {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #E7EDF1;
		padding: 20px 40px;
		margin-top: 15px;
		gap: 25px;
		text-align: center;
		border: 2px solid #5d89ac;
		border-radius: 4px;
	}
	
	#rqSuccessHeader {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#rqSuccessTitle {
		font-size: 24px;
		font-weight: 400;
		position: relative;
	}
	
	#rqSuccessIcon {
		width: 25px;
		position: absolute;
		top: -3px;
		right: -30px;
	}
	
	#rqNumberLabel {
		font-size: 22px;
	}
	
	#rqSuccessNumber {
		color: #2180bf;
		text-decoration: underline;
	}

	#shipmentForm input,
	#shipmentForm textarea {
		text-transform: uppercase;
	}

	#shippingLabelsBackground {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: rgba(20,20,20,.7);
		z-index: 100;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	#shippingLabelsContainer {
		border-radius: 4px;
		overflow: hidden;
		position: relative;
	}

	#shippingLabelsTitle {
		color: #fff;
		font-size: 22px;
		padding: 13px 0 10px 0;
		background-color: #386a9b;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		width: 100%;
		text-align: center;
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: .8px;
	}

	#removeLabelsBtn {
		position: absolute;
		top: 8px;
		right: 8px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#removeLabelsBtn svg {
		width: 30px;
		height: 30px;
		cursor: pointer;
	}

	#removeLabelsBtn svg circle {
		fill: #d9534f;
		stroke: #7a1f1c;
		stroke-width: 2;
		transition: fill .15s ease;
	}
	
	#removeLabelsBtn svg line {
		stroke: white;
		stroke-width: 2;
	}

	#shippingLabelsForm {
		display: flex;
		flex-direction: column;
		gap: 15px;
		background-color: white;
		padding: 20px;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		max-height: 90vh;
		overflow-y: auto;
	}

	#shippingLabelsForm::-webkit-scrollbar {
		width: 13px;
	}
	
	#shippingLabelsForm::-webkit-scrollbar-track {
		background: #D5DADE;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	#shippingLabelsForm::-webkit-scrollbar-thumb {
		background-color: #3E74AB;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border: 3px solid #D5DADE;
	}

	#shippingLabelsForm .normalButtonBlue {
		font-size: 12px;
		padding: 8px 13px 6px 13px;
	}
	
	#shippingLabelsBackground #shippingLabelsContainer {
		width: 100%;
		max-width: 550px;
	}

	.shippingLblBtn {
		width: 100%;
		max-width: 80px;
	}
	
	#schedulePickupBackground #shippingLabelsContainer {
		width: 100%;
		max-width: 500px;
	}

	.accessorialLabelContainer {
		display: flex;
		width: 100%;
		gap: 6px;
	}
	
	.accessorialLabel {
		background: #FFFFFF;
		border: 1px solid #AFC1CF;
		color: #2B3640;
		min-height: 35px;
		flex: 1;
		text-align: center;
		font-size: 13px;
		cursor: pointer;
		border-radius: 4px;
		transition: all .15s ease;
		letter-spacing: .035rem;
		padding: 2px 6px 0 6px;
	}
	
	.accessorialSelected {
		background: #5FA39F;
		border: 1px solid #377874;
		color: #FFFFFF;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	}

	#quotePrint {
		padding: 5px 7px;
	}
	
	.onlyPrint {
		display: none;
	}

	#pickupSuccess {
		display: flex;
		flex-direction: column;
		position: relative;
		gap: 10px;
		align-self: stretch;
		margin-bottom: 15px;
	}

	#pickupSuccessBody {
		display: flex;
		flex-direction: column;
		align-self: stretch;
		gap: 10px;
		font-size: 24px;
	}
	
	#pickupSuccessHeader {
		display: flex;
		justify-content: center;
		position: relative;
		gap: 10px;
	}

	#pickupWarning {
		font-size: 16px;
		text-align: center;
	}
	
	#pickupNumber {
		font-weight: 400;
		border-bottom: 3px solid #c71218;
	}

	#pickupPrint {
		position: absolute;
		right: 0;
		top: -10px;
		padding: 5px 7px;
	}

	.printIcon {
		width: 20px;
	}

	#buttonOptions {
		margin-top: 15px;
	}

	#bolList {
		display: flex;
		flex-direction: column;
		gap: 14px;
		text-align: left;
		max-height: 260px;
		overflow-y: auto;
		background-color: rgb(231, 237, 241);
		padding: 14px 30px 10px 30px;
		border-radius: 4px;
	}

	#bolList a {
		color: #2180bf;
		text-decoration: underline;
	}

	@media (hover: hover) {
		/* All hover styles here */
		.shipmentFormTab:hover, .shipmentFormTab.active:hover {
			background-color: #84A0BD;
			color: #fff;
		}

		#quoteTable > tbody > tr:hover:not(.quoteTableDetailsContainer) {
			cursor: pointer;
			background-color: rgba(70, 170, 255, 0.25);
			background-color: rgba(255,255,255, 0.65);
			box-shadow: rgb(218,220,244) 1px 0px 0px 0px inset, rgb(218,220,244) -1px 0px 0px 0px inset, 
				rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
		}

		.reverseButtonBlue:hover {
			background-color: #386a9b;
			border: 2px solid #2E5680;
			color: white;
		}
	
		.reverseButtonBlue:hover .shippingLabelsIcon.default {
			opacity: 0;
		}
	
		.reverseButtonBlue:hover .shippingLabelsIcon.hover {
			opacity: 1;
		}
	
		.reverseButtonBlue:hover .bolIcon.default {
			opacity: 0;
		}
	
		.reverseButtonBlue:hover .bolIcon.hover {
			opacity: 1;
		}

		.svgIcon:hover .circleSVG {
			fill: #c9302c;
		}

		.removeFreightIcon:hover .circleSVG {
			fill: #c9302c;
		}

		#removeLabelsBtn:hover svg circle {
			fill: #c9302c;
		}

		.accessorialLabel:not(.accessorialSelected):hover {
			background: #D8F2F0;
			border-color: #B0D4D1;
		}

		.accessorialSelected:hover {
			background-color: #487D79;
			border-color: #26524F;
		}

		#bolList a:hover {
			color: #2799E6;
			cursor: pointer;
		}
	}
	
	@media print {
		html, body {
			background-color: white;
		}
		
		#shippingTools {
			padding: 0;
			background-color: white;
		}
		
		#shipmentsContainer {
			width: 100%;
		}
		
		#shipmentBox {
			max-width: 100%;
			box-shadow: none;
		}
		
		#navBarContainer {
			display: none;
		}
		
		.zipBorder {
			border-width: 1px;
			border-color: #BDC3C9;
		}
		
		.onlyPrint {
			display: block;
		}
		
		#transitContainer, .noPrint {
			display: none !important;
		}
		
		.shipmentMore {
			display: block !important;
		}
		
		.printBold {
			font-weight: 500;
		}
		
		#footer {
			display: none;
		}
	}

	@media (max-width: 1550px) {
		#shippingToolsRightContainer {
			display: none;
		}

		#shipmentsContainer {
			justify-content: center;
		}
	}

	@media (max-width: 850px) {
		#shippingTools {
			padding-left: 0;
			padding-right: 0;
		}

		#shipmentFormBody {
			padding: 0 10px 10px 10px;
		}

		#shipmentListContainer {
			padding-bottom: 10px;
		}

		#timeBetween {
			gap: 7px;
		}

		.times {
			gap: 3px;
		}

		.shpListMoreBtn {
			padding-left: 10px;
			padding-right: 10px;
		}

		#pickupInformation {
			gap: 16px;

		}
	}

	@media (max-width: 700px) {
		#shipperAndConsigneeContainer {
			flex-direction: column;
		}

		.shipmentItem {
			flex-direction: column;
		}

		.verticalDivider {
			display: none;
		}

		#pickupInformation {
			flex-direction: column;
		}

		#timeContainer {
			gap: 5px;
		}

		#timeBetween {
			gap: 15px;
		}

		.times {
			flex-direction: column;
			align-items: flex-start;
			gap: 0;
		}

		input[name="readyTime"], input[name="closeTime"] {
			width: 100%;
		}

		#shipmentDetailSelects {
			flex-direction: column;
			gap: 15px;
		}

		.shipmentDetailSelect:first-of-type .rateQuoteTitles {
			margin-right: 17px;
		}

		#rateDetails {
			flex-direction: column;
		}
	}

	@media (max-width: 600px) {
		#buttonOptions {
			gap: 15px;
		}

		#buttonOptions .mainBtn {
			flex-basis: 100%;
		}
	
		#buttonOptions button:not(.mainBtn) {
			flex: 1;
		}
	}

	@media (max-width: 550px) {
		.accessorialLabelContainer {
			flex-wrap: wrap;
			font-size: 12px;
		}
	  
		.accessorialLabel {
			flex: 0 0 calc(50% - 6px);
   		box-sizing: border-box;
		}

		#freightItemContainer {
			padding: 10px 10px 0 10px;
		}

		.shipmentFormTab {
			font-size: 15px;
		}

		.freightItem {
			grid-template-columns: 
				23px
				5px
				1fr
				15px
				1fr
				15px
				1fr
				5px
				.25fr;
		}

		#addFreightItem {
			font-size: 12px;
			padding: 7px 9px 5px 9px;
		}

		.freightPlusIcon, .plusIcon {
			width: 12px;
		}

		#pickupSuccessHeader {
			font-size: 20px;
		}

		#pickupPrint {
			padding: 3px 5px;
		}

		.printIcon {
			width: 16px;
		}
	}

	@media (max-width: 450px) {
		#pickupSuccessHeader {
			justify-content: flex-start;
			gap: 5px;
			font-size: 18px;
		}
	
		#pickupWarning {
			font-size: 14px;
			text-align: left;
		}
	}

	@media (max-width: 400px) {
		#pickupSuccessBody {
			justify-content: flex-start;
		}

	}