/* =========================================================
   RETRIEVE DATA / SAMPLE SEARCH PAGE
========================================================= */

:host {
	display: block;
	min-height: 100%;
	background: #f5f3ed;
	color: #3f443f;
}


/* =========================================================
   PAGE WRAPPER
========================================================= */

.retrieveDataPage {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 2rem 2rem 2.75rem;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.retrieveDataPageHeader {
	display: flex;
	align-items: center;
	gap: 1.15rem;

	margin-bottom: 1.6rem;
	padding: 1.55rem 1.75rem;

	background:
		linear-gradient(
			135deg,
			rgba(112, 128, 144, 0.16),
			rgba(218, 226, 214, 0.34)
		);

	border: 1px solid rgba(112, 128, 144, 0.18);
	border-radius: 18px;

	box-shadow:
		0 8px 22px rgba(43, 55, 46, 0.05),
		0 2px 6px rgba(43, 55, 46, 0.03);
}

.retrieveDataPageIcon {
	display: flex;
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	align-items: center;
	justify-content: center;

	color: #ffffff;
	background: #2c4c34;
	border-radius: 14px;

	font-size: 1.2rem;

	box-shadow: 0 6px 14px rgba(44, 76, 52, 0.2);
}

.retrieveDataPageHeading {
	min-width: 0;
}

.retrieveDataPageHeading h1 {
	margin: 0 0 0.3rem;

	color: #2c4c34;
	font-family: Georgia, "Roboto";
	font-size: clamp(1.7rem, 2.3vw, 2.1rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.retrieveDataPageHeading p {
	margin: 0;

	color: #657067;
	font-size: 0.9rem;
	line-height: 1.45;
}


/* =========================================================
   MAIN CARD
========================================================= */

.retrieveDataCard {
	overflow: hidden;

	background: #ffffff;
	border: 1px solid #dedbd2;
	border-radius: 20px;

	box-shadow:
		0 16px 38px rgba(43, 55, 46, 0.08),
		0 3px 8px rgba(43, 55, 46, 0.04);
}

#SampleSearchForm {
	width: 100%;
	margin: 0;
	padding: 0;
}


/* =========================================================
   CARD HEADER
========================================================= */

.retrieveDataCardHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;

	padding: 1.4rem 1.65rem;

	background: #fbfaf7;
	border-bottom: 1px solid #e5e2da;
}

.retrieveDataCardHeader > div:first-child {
	min-width: 0;
}

.retrieveDataCardHeader h2 {
	margin: 0 0 0.3rem;

	color: #303a32;
	font-size: 1.25rem;
	font-weight: 650;
	line-height: 1.2;
}

.retrieveDataCardHeader p {
	margin: 0;

	color: #687069;
	font-size: 0.84rem;
	line-height: 1.45;
}


/* =========================================================
   CLEAR BUTTON
========================================================= */

.retrieveDataClearButton {
	display: inline-flex;
	min-height: 38px;
	padding: 0.45rem 0.85rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;

	color: #56605a;
	background: #ffffff;
	border: 1px solid #cfd5cf;
	border-radius: 10px;

	font-size: 0.77rem;
	font-weight: 600;
	line-height: 1;

	box-shadow: none;

	transition:
		color 150ms ease,
		background-color 150ms ease,
		border-color 150ms ease,
		transform 150ms ease;
}

.retrieveDataClearButton:hover {
	color: #2c4c34;
	background: #eef3ed;
	border-color: #aebbad;
	transform: translateY(-1px);
}

.retrieveDataClearButton:focus-visible {
	outline: 3px solid rgba(44, 76, 52, 0.14);
	outline-offset: 2px;
}


/* =========================================================
   FILTER CONTAINER
========================================================= */

.retrieveDataFilters {
	margin: 1.4rem 1.65rem 0;
	padding: 1.35rem;

	background: #faf9f6;
	border: 1px solid #e2dfd7;
	border-radius: 16px;
}

.retrieveDataFilters > .row {
	--bs-gutter-x: 1.25rem;
	--bs-gutter-y: 1.1rem;
}


/* =========================================================
   FILTER FIELDS
========================================================= */

.retrieveDataField {
	display: flex;
	min-width: 0;
	height: 100%;
	flex-direction: column;
}

.retrieveDataField .control-label {
	display: block;
	margin: 0 0 0.38rem;

	color: #414b43;
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.01em;
	line-height: 1.25;
}

.retrieveDataLabelUnit {
	color: #7b837c;
	font-size: 0.7rem;
	font-weight: 500;
}


/* =========================================================
   STANDARD INPUTS
========================================================= */

.retrieveDataPage .form-control,
.retrieveDataPage .form-select {
	width: 100%;
	min-width: 0;
	min-height: 41px;
	padding: 0.48rem 0.7rem;

	color: #3f443f;
	background-color: #ffffff;
	border: 1px solid #cfd4ce;
	border-radius: 10px;

	font-family: inherit;
	font-size: 0.82rem;
	line-height: 1.25;

	box-shadow: none;

	transition:
		background-color 150ms ease,
		border-color 150ms ease,
		box-shadow 150ms ease;
}

.retrieveDataPage .form-control:hover,
.retrieveDataPage .form-select:hover {
	border-color: #aeb8af;
}

.retrieveDataPage .form-control:focus,
.retrieveDataPage .form-select:focus {
	background-color: #ffffff;
	border-color: #6f8a75;
	box-shadow: 0 0 0 3px rgba(44, 76, 52, 0.1);
	outline: none;
}

.retrieveDataPage .form-control::placeholder {
	color: #9ba29c;
	opacity: 1;
}

.retrieveDataPage input[type="number"] {
	appearance: textfield;
}

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


/* =========================================================
   INPUT GROUPS
========================================================= */

.retrieveDataPage .input-group {
	display: flex;
	width: 100%;
	min-width: 0;
	flex-wrap: nowrap;
	align-items: stretch;
}

.retrieveDataPage .input-group > .form-control {
	min-width: 0;
}

.retrieveDataPage .input-group-text {
	display: flex;
	min-height: 41px;
	padding: 0.45rem 0.55rem;
	align-items: center;
	justify-content: center;

	color: #687169;
	background: #edf0eb;
	border-color: #cfd4ce;

	font-size: 0.69rem;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
}

.retrieveDataPage .input-group > :first-child {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.retrieveDataPage .input-group > :last-child {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}


/* =========================================================
   CUSTOM MULTI-SELECTS
========================================================= */

.retrieveDataPage multi-select {
	display: block;
	width: 100%;
	min-width: 0;
}

.retrieveDataPage multi-select .multi-select-dropdown,
.retrieveDataPage multi-select .selected-list,
.retrieveDataPage multi-select .c-btn,
.retrieveDataPage multi-select button,
.retrieveDataPage multi-select .dropdown-btn {
	width: 100%;
	min-width: 0;
}

/* Outer component wrapper: no border */
.retrieveDataPage multi-select .multi-select-dropdown {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Inner visible field: this is the only border */
.retrieveDataPage multi-select .c-btn,
.retrieveDataPage multi-select button,
.retrieveDataPage multi-select .dropdown-btn {
	min-height: 41px;
	padding: 0.48rem 0.7rem;

	color: #454d46;
	background: #ffffff;
	border: 1px solid #cfd4ce;
	border-radius: 10px;

	font-family: inherit;
	font-size: 0.82rem;
	line-height: 1.25;
	text-align: left;

	box-shadow: none;

	transition:
		border-color 150ms ease,
		box-shadow 150ms ease;
}

.retrieveDataPage multi-select .c-btn:hover,
.retrieveDataPage multi-select button:hover,
.retrieveDataPage multi-select .dropdown-btn:hover {
	border-color: #aeb8af;
}

.retrieveDataPage multi-select .c-btn:focus,
.retrieveDataPage multi-select button:focus,
.retrieveDataPage multi-select .dropdown-btn:focus {
	border-color: #6f8a75;
	box-shadow: 0 0 0 3px rgba(44, 76, 52, 0.1);
	outline: none;
}


/* =========================================================
   MULTI-SELECT DROPDOWN PANEL
========================================================= */

.retrieveDataPage multi-select .dropdown-list,
.retrieveDataPage multi-select .dropdown-menu,
.retrieveDataPage multi-select .list-area {
	z-index: 1050;

	margin-top: 0.35rem;
	overflow: hidden;

	background: #ffffff;
	border: 1px solid #d8dcd6;
	border-radius: 11px;

	box-shadow: 0 12px 28px rgba(45, 55, 48, 0.14);
}

.retrieveDataPage multi-select .dropdown-list li,
.retrieveDataPage multi-select .dropdown-menu li,
.retrieveDataPage multi-select .list-area li {
	padding: 0.45rem 0.65rem;

	color: #4d554f;
	font-size: 0.78rem;
}

.retrieveDataPage multi-select .dropdown-list li:hover,
.retrieveDataPage multi-select .dropdown-menu li:hover,
.retrieveDataPage multi-select .list-area li:hover {
	background: #f1f4ef;
}

/* =========================================================
   MULTI-SELECT TOKENS
========================================================= */

.retrieveDataPage multi-select .c-token,
.retrieveDataPage multi-select .selected-item {
	margin: 1px 3px 1px 0;
	padding: 0.16rem 0.4rem;

	color: #ffffff;
	background: #607864;
	border: 0;
	border-radius: 6px;

	font-size: 0.68rem;
}


/* =========================================================
   HARVEST DATE RANGE
========================================================= */

.retrieveDataDateRange {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 0.5rem;
	align-items: center;
}

.retrieveDataDateField {
	min-width: 0;
}

.retrieveDataRangeSeparator {
	color: #747c75;
	font-size: 0.72rem;
	font-weight: 600;
	text-align: center;
}

.retrieveDataCalendarButton {
	display: flex;
	width: 41px;
	min-height: 41px;
	padding: 0;
	align-items: center;
	justify-content: center;

	color: #536057;
	background: #edf0eb;
	border: 1px solid #cfd4ce;
	border-left: 0;
	border-radius: 0 10px 10px 0;

	box-shadow: none;

	transition:
		color 150ms ease,
		background-color 150ms ease;
}

.retrieveDataCalendarButton:hover {
	color: #2c4c34;
	background: #e1e7df;
}

.retrieveDataCalendarButton:focus-visible {
	outline: 3px solid rgba(44, 76, 52, 0.12);
	outline-offset: 2px;
}

.retrieveDataFieldError {
	display: block;
	margin-top: 0.28rem;

	color: #8a3440;
	font-size: 0.69rem;
}


/* =========================================================
   ADDITIONAL DATA PANEL
========================================================= */

.retrieveDataOptions {
	display: flex;
	flex-direction: column;
	align-items: center;

	margin: 1.4rem 1.65rem 0;
	padding: 1.15rem 1.3rem;

	background: #f3f6f1;
	border: 1px solid #dce3da;
	border-radius: 14px;

	text-align: center;
}

.retrieveDataOptionsHeading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;

	margin-bottom: 0.9rem;
}

.retrieveDataOptionsIcon {
	display: flex;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;

	color: #2c4c34;
	background: #dfe7dd;
	border-radius: 10px;

	font-size: 0.85rem;
}

.retrieveDataOptionsHeading h3 {
	margin: 0 0 0.12rem;

	color: #39453c;
	font-size: 0.95rem;
	font-weight: 650;
	line-height: 1.2;
}

.retrieveDataOptionsHeading p {
	margin: 0;

	color: #707970;
	font-size: 0.74rem;
	line-height: 1.35;
}


/* =========================================================
   CENTERED CHECKBOXES
========================================================= */

.retrieveDataOptionControls {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem 2rem;
}

.retrieveDataOptionControls .form-check {
	display: inline-flex;
	min-height: 28px;
	margin: 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	gap: 0.48rem;
}

.retrieveDataOptionControls .form-check-input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;

	background-color: #ffffff;
	border: 1px solid #9fa9a1;
	border-radius: 4px;

	box-shadow: none;
	cursor: pointer;
}

.retrieveDataOptionControls .form-check-input:checked {
	background-color: #2c4c34;
	border-color: #2c4c34;
}

.retrieveDataOptionControls .form-check-input:focus {
	border-color: #6f8a75;
	box-shadow: 0 0 0 3px rgba(44, 76, 52, 0.1);
}

.retrieveDataOptionControls .form-check-label {
	margin: 0;

	color: #4e584f;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.25;

	cursor: pointer;
}


/* =========================================================
   VALIDATION ERRORS
========================================================= */

.retrieveDataErrors {
	display: flex;
	gap: 0.7rem;

	margin: 1rem 1.65rem 0;
	padding: 0.85rem 0.95rem;

	color: #7a2c37;
	background: #fbf0f2;
	border: 1px solid #e6c8cd;
	border-radius: 11px;

	font-size: 0.77rem;
	line-height: 1.4;
}

.retrieveDataErrorsIcon {
	flex: 0 0 auto;
	padding-top: 0.05rem;
}

.retrieveDataErrors strong {
	font-weight: 650;
}

.retrieveDataErrors ul {
	margin: 0.3rem 0 0;
	padding-left: 1.1rem;
}

.retrieveDataErrors li + li {
	margin-top: 0.2rem;
}


/* =========================================================
   FORM ACTIONS
========================================================= */

.retrieveDataActions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;

	margin-top: 1.4rem;
	padding: 1.15rem 1.65rem 1.35rem;

	background: #fbfaf7;
	border-top: 1px solid #e5e2da;
}

.retrieveDataPrimaryActions {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.retrieveDataActions .btn {
	display: inline-flex;
	min-height: 39px;
	padding: 0.47rem 0.92rem;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;

	border-radius: 10px;

	font-size: 0.78rem;
	font-weight: 650;
	line-height: 1;

	box-shadow: none;

	transition:
		color 150ms ease,
		background-color 150ms ease,
		border-color 150ms ease,
		transform 150ms ease,
		box-shadow 150ms ease;
}


/* =========================================================
   RETURN TO SITES BUTTON
========================================================= */

.retrieveDataBackButton {
	color: #536057;
	background: #ffffff;
	border: 1px solid #cbd2cb;
}

.retrieveDataBackButton:hover {
	color: #2c4c34;
	background: #eef3ed;
	border-color: #aebbad;
	transform: translateY(-1px);
}


/* =========================================================
   EXPORT BUTTON
========================================================= */

.retrieveDataExportButton {
	color: #ffffff;
	background: #708090;
	border: 1px solid #708090;
}

.retrieveDataExportButton:hover {
	color: #ffffff;
	background: #61717f;
	border-color: #61717f;
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(112, 128, 144, 0.18);
}


/* =========================================================
   SEARCH BUTTON
========================================================= */

.retrieveDataSearchButton {
	color: #ffffff;
	background: #7a2c37;
	border: 1px solid #7a2c37;
}

.retrieveDataSearchButton:hover {
	color: #ffffff;
	background: #67232d;
	border-color: #67232d;
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(122, 44, 55, 0.18);
}

.retrieveDataSearchButton:focus-visible {
	outline: 3px solid rgba(122, 44, 55, 0.16);
	outline-offset: 2px;
}

.retrieveDataSearchButton:disabled {
	color: rgba(255, 255, 255, 0.75);
	background: #aa858b;
	border-color: #aa858b;
	transform: none;
	box-shadow: none;
	cursor: not-allowed;
}


/* =========================================================
   RESULTS AREA
========================================================= */

.retrieveDataResults {
	margin-top: 1.6rem;
}

SampleResults,
sample-results {
	display: block;
	width: 100%;
}


/* =========================================================
   RESULTS TABLE
========================================================= */

:host ::ng-deep SampleResults .table-responsive,
:host ::ng-deep sample-results .table-responsive {
	overflow: auto;

	background: #ffffff;
	border: 1px solid #dedbd2;
	border-radius: 15px;

	box-shadow: 0 10px 26px rgba(43, 55, 46, 0.07);
}

:host ::ng-deep SampleResults .table,
:host ::ng-deep sample-results .table {
	margin-bottom: 0;

	color: #454c46;
	font-size: 0.78rem;
}

:host ::ng-deep SampleResults .table thead th,
:host ::ng-deep sample-results .table thead th {
	padding: 0.68rem 0.75rem;

	color: #ffffff;
	background: #506655;
	border-color: #65796a;

	font-size: 0.7rem;
	font-weight: 650;
	letter-spacing: 0.025em;
	white-space: nowrap;
}

:host ::ng-deep SampleResults .table tbody td,
:host ::ng-deep sample-results .table tbody td {
	padding: 0.6rem 0.75rem;
	vertical-align: middle;

	border-color: #eceae5;
}

:host ::ng-deep SampleResults .table tbody tr:nth-child(even),
:host ::ng-deep sample-results .table tbody tr:nth-child(even) {
	background: #faf9f6;
}

:host ::ng-deep SampleResults .table tbody tr:hover,
:host ::ng-deep sample-results .table tbody tr:hover {
	background: #f1f4ef;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
	.retrieveDataPage {
		padding: 1.5rem;
	}

	.retrieveDataPageHeader {
		padding: 1.35rem 1.45rem;
	}

	.retrieveDataFilters {
		margin-right: 1.25rem;
		margin-left: 1.25rem;
		padding: 1.15rem;
	}

	.retrieveDataOptions,
	.retrieveDataErrors {
		margin-right: 1.25rem;
		margin-left: 1.25rem;
	}

	.retrieveDataActions {
		padding-right: 1.25rem;
		padding-left: 1.25rem;
	}
}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 900px) {
	.retrieveDataPage {
		padding: 1.1rem;
	}

	.retrieveDataPageHeader {
		margin-bottom: 1.2rem;
		padding: 1.2rem;
	}

	.retrieveDataFilters {
		margin: 1rem;
		padding: 1rem;
	}

	.retrieveDataFilters > .row {
		--bs-gutter-x: 1rem;
		--bs-gutter-y: 1rem;
	}

	.retrieveDataOptions,
	.retrieveDataErrors {
		margin-right: 1rem;
		margin-left: 1rem;
	}

	.retrieveDataActions {
		padding-right: 1rem;
		padding-left: 1rem;
	}
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
	.retrieveDataPage {
		padding: 0.75rem;
	}

	.retrieveDataPageHeader {
		align-items: flex-start;
		gap: 0.8rem;

		margin-bottom: 1rem;
		padding: 1rem;

		border-radius: 14px;
	}

	.retrieveDataPageIcon {
		width: 44px;
		height: 44px;
		flex-basis: 44px;

		border-radius: 11px;
	}

	.retrieveDataPageHeading h1 {
		font-size: 1.45rem;
	}

	.retrieveDataPageHeading p {
		font-size: 0.8rem;
	}

	.retrieveDataCard {
		border-radius: 15px;
	}

	.retrieveDataCardHeader {
		align-items: flex-start;
		flex-direction: column;

		padding: 1rem;
	}

	.retrieveDataClearButton {
		align-self: flex-start;
	}

	.retrieveDataFilters {
		margin: 0.85rem;
		padding: 0.85rem;

		border-radius: 13px;
	}

	.retrieveDataDateRange {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}

	.retrieveDataRangeSeparator {
		text-align: left;
	}

	.retrieveDataOptions,
	.retrieveDataErrors {
		margin: 0.85rem;
	}

	.retrieveDataOptions {
		padding: 1rem;
	}

	.retrieveDataOptionsHeading {
		align-items: flex-start;
	}

	.retrieveDataOptionControls {
		flex-direction: column;
		gap: 0.65rem;
	}

	.retrieveDataActions {
		align-items: stretch;
		flex-direction: column;

		margin-top: 1rem;
		padding: 1rem;
	}

	.retrieveDataPrimaryActions {
		width: 100%;
	}

	.retrieveDataActions .btn {
		flex: 1;
	}
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
	.retrieveDataPage {
		padding: 0.55rem;
	}

	.retrieveDataPageHeader {
		padding: 0.9rem;
	}

	.retrieveDataPageIcon {
		display: none;
	}

	.retrieveDataCardHeader h2 {
		font-size: 1.1rem;
	}

	.retrieveDataFilters {
		margin: 0.7rem;
		padding: 0.75rem;
	}

	.retrieveDataPage .input-group {
		flex-wrap: wrap;
		gap: 0.3rem;
	}

	.retrieveDataPage .input-group > .form-control,
	.retrieveDataPage .input-group > .input-group-text {
		border: 1px solid #cfd4ce;
		border-radius: 9px !important;
	}

	.retrieveDataPage .input-group > .form-control {
		flex: 1 1 40%;
	}

	.retrieveDataOptionsHeading {
		flex-direction: column;
		align-items: center;
	}

	.retrieveDataPrimaryActions {
		flex-direction: column;
	}

	.retrieveDataActions .btn {
		width: 100%;
	}
}

/* =========================================================
   RETRIEVE DATA RESULTS
========================================================= */

.retrieveResultsTopScroll {
	width: 100%;
	max-width: 100%;
	height: 18px;
	margin: 0 0 0.35rem;

	overflow-x: scroll;
	overflow-y: hidden;

	background: #f7f4eb;
	border: 1px solid #dedbd2;
	border-radius: 7px;

	scrollbar-width: auto;
	scrollbar-color: #8c918d #eeeae1;
}

.retrieveResultsTopScrollInner {
	height: 1px;
	min-width: 100%;
}

.retrieveResultsTopScroll::-webkit-scrollbar {
	height: 14px;
}

.retrieveResultsTopScroll::-webkit-scrollbar-track {
	background: #eeeae1;
}

.retrieveResultsTopScroll::-webkit-scrollbar-thumb {
	min-width: 42px;
	background: #8c918d;
	border: 2px solid #eeeae1;
	border-radius: 10px;
}

.retrieveResultsTopScroll::-webkit-scrollbar-thumb:hover {
	background: #6f756f;
}

.retrieveResultsTableWrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: min(62vh, 640px);
	min-height: 260px;

	overflow-x: scroll;
	overflow-y: scroll;

	background: #ffffff;
	border: 1px solid #d8d6cf;
	border-radius: 10px;

	scrollbar-gutter: stable both-edges;
	scrollbar-width: auto;
	scrollbar-color: #8c918d #eeeae1;
}

.retrieveResultsTableWrapper::-webkit-scrollbar {
	width: 14px;
	height: 14px;
}

.retrieveResultsTableWrapper::-webkit-scrollbar-track {
	background: #eeeae1;
}

.retrieveResultsTableWrapper::-webkit-scrollbar-thumb {
	min-width: 42px;
	min-height: 42px;
	background: #8c918d;
	border: 2px solid #eeeae1;
	border-radius: 10px;
}

.retrieveResultsTableWrapper::-webkit-scrollbar-thumb:hover {
	background: #6f756f;
}

.retrieveResultsTableWrapper::-webkit-scrollbar-corner {
	background: #eeeae1;
}

.retrieveDataResults {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

.retrieveDataResults SampleResults,
.retrieveDataResults sample-results {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}



/* =========================================================
   TABLE FOUNDATION
========================================================= */

.retrieveResultsTable {
	width: max-content;
	min-width: 100%;
	margin-bottom: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: #3f443f;
	font-family: Roboto, sans-serif;
	font-size: 0.9rem;
}

.retrieveResultsTable th,
.retrieveResultsTable td {
	min-width: 130px;
	max-width: 220px;
	padding: 0.85rem 1rem;
	vertical-align: middle;
	border-right: 1px solid rgba(63, 68, 63, 0.1);
	border-bottom: 1px solid #e7e4dd;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
}

.retrieveResultsTable th {
	position: sticky;
	top: 0;
	z-index: 20;
	min-height: 64px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.015em;
	text-align: left;
	vertical-align: middle;
}

.retrieveResultsTable td {
	background-clip: padding-box;
}

.retrieveResultsTable tbody tr:nth-of-type(odd) td {
	background-color: #ffffff;
}

.retrieveResultsTable tbody tr:nth-of-type(even) td {
	background-color: #f8f7f3;
}

.retrieveResultsTable tbody tr:hover td {
	background-color: #f1efe8;
}


/* =========================================================
   HEADER LABELS
========================================================= */

.retrieveHeaderLabel {
	display: block;
	line-height: 1.25;
}

.retrieveHeaderUnit {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.2;
	opacity: 0.88;
}


/* =========================================================
   COLUMN SIZING
========================================================= */

.retrieveResultsTable th:nth-child(1),
.retrieveResultsTable td:nth-child(1) {
	width: 175px;
	min-width: 175px;
	max-width: 175px;
}

.retrieveResultsTable th:nth-child(2),
.retrieveResultsTable td:nth-child(2) {
	width: 190px;
	min-width: 190px;
	max-width: 190px;
}

.retrieveLocationColumn,
.retrieveLocationCell {
	width: 155px;
	min-width: 155px !important;
}

.retrieveElevationColumn {
	width: 145px;
	min-width: 145px !important;
}

.retrieveSpecificSoilColumn {
	width: 170px;
	min-width: 170px !important;
}

.retrieveSpacingColumn {
	width: 150px;
	min-width: 150px !important;
}

.retrieveMeasurementHeader,
.retrieveMeasurementCell {
	width: 145px;
	min-width: 145px !important;
	max-width: 180px !important;
}


/* =========================================================
   STICKY SITE IDENTIFIERS
========================================================= */

.retrieveStickyColumn {
	position: sticky;
	background-clip: padding-box;
}

.retrieveStickyColumnFirst {
	left: 0;
	z-index: 15;
}

.retrieveStickyColumnSecond {
	left: 175px;
	z-index: 14;
	box-shadow: 5px 0 8px rgba(44, 77, 52, 0.07);
}

.retrieveResultsTable thead .retrieveStickyColumnFirst,
.retrieveResultsTable thead .retrieveStickyColumnSecond {
	z-index: 30;
}

.retrieveResultsTable tbody tr:nth-of-type(odd) .retrieveStickyColumn {
	background-color: #ffffff;
}

.retrieveResultsTable tbody tr:nth-of-type(even) .retrieveStickyColumn {
	background-color: #f8f7f3;
}

.retrieveResultsTable tbody tr:hover .retrieveStickyColumn {
	background-color: #f1efe8;
}



/* =========================================================
   CELL CONTENT
========================================================= */

.retrieveSiteLink {
	display: inline-flex;
	align-items: center;
	color: #7a2c37;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.retrieveSiteLink:hover,
.retrieveSiteLink:focus {
	color: #5f202a;
	text-decoration: underline;
}

.retrieveVineyardNameCell {
	font-weight: 500;
}

.retrieveLocationCell {
	white-space: nowrap !important;
}

.retrieveCoordinate {
	display: block;
	line-height: 1.5;
}

.retrieveCoordinateLabel {
	display: inline-block;
	min-width: 30px;
	color: #6f7f8f;
	font-size: 0.76rem;
	font-weight: 700;
	text-transform: uppercase;
}

.retrieveNumericCell,
.retrieveDateCell,
.retrieveMeasurementCell {
	white-space: nowrap !important;
}

.retrieveNumericCell,
.retrieveMeasurementCell {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.retrieveSpacingValue {
	white-space: nowrap !important;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.retrieveSpacingSymbol {
	display: inline-block;
	margin: 0 0.3rem;
	color: #7a2c37;
	font-weight: 700;
}

.retrieveMeasurementValue {
	display: inline-block;
	min-width: 100%;
	font-weight: 500;
}


/* =========================================================
   RESPONSIVE ADJUSTMENTS
========================================================= */

@media (max-width: 991.98px) {
	.retrieveResultsTable {
		font-size: 0.86rem;
	}

	.retrieveResultsTable th,
	.retrieveResultsTable td {
		padding: 0.75rem 0.85rem;
	}

	.retrieveResultsTable th:nth-child(1),
	.retrieveResultsTable td:nth-child(1) {
		width: 155px;
		min-width: 155px;
		max-width: 155px;
	}

	.retrieveResultsTable th:nth-child(2),
	.retrieveResultsTable td:nth-child(2) {
		width: 170px;
		min-width: 170px;
		max-width: 170px;
	}

	.retrieveStickyColumnSecond {
		left: 155px;
	}
}

@media (max-width: 767.98px) {
	/*
	 * Keep only Site Name sticky on smaller screens.
	 * Two sticky columns can consume too much mobile width.
	 */
	.retrieveStickyColumnSecond {
		position: static;
		box-shadow: none;
	}

	.retrieveResultsTable th,
	.retrieveResultsTable td {
		min-width: 120px;
		padding: 0.7rem 0.75rem;
	}

	.retrieveResultsTable th:nth-child(1),
	.retrieveResultsTable td:nth-child(1) {
		width: 145px;
		min-width: 145px;
		max-width: 145px;
	}
}

/* =========================================================
   SAMPLE NAME
========================================================= */

.retrieveSampleNameCell {
	font-weight: 600;
	white-space: nowrap !important;
}

.retrieveSampleLink {
	display: inline-flex;
	align-items: center;

	color: #7a2c37;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.35;

	transition:
		color 0.18s ease,
		text-decoration-color 0.18s ease;
}

.retrieveSampleLink:hover,
.retrieveSampleLink:focus {
	color: #5e2029;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}
/* ==========================================
   PREMIUM LOCKED EXPORT
========================================== */

.premiumFeatureWrapper{
    display:inline-block;
}

.premiumLockedButton{

    opacity:.58;

    filter:grayscale(.45);

    cursor:pointer;

    position:relative;

    border-style:dashed !important;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.premiumLockedButton i{

    margin-right:.35rem;
}

.premiumPopover .popover{

    border:none;

    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 18px 42px rgba(0,0,0,.18);
}

.premiumPopover .popover-body{

    padding:1rem 1.15rem;

    background:
        linear-gradient(
            180deg,
            #fffefb,
            #f8f5ef
        );

    color:#3f443f;

    font-size:.84rem;

    line-height:1.5;

    text-align:center;
}
/* =========================================================
   RETRIEVE DATA - NO RESULTS
========================================================= */

.retrieveDataNoResults {

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 16px;

	width: 100%;

	padding: 28px 24px;

	color: rgb(72, 83, 93);

	background-color: #ffffff;

	border: 1px solid #d8d5ce;

	border-radius: 10px;

	text-align: left;

}


.retrieveDataNoResults > i {

	flex: 0 0 auto;

	font-size: 24px;

	color: #7a2c37;

}


.retrieveDataNoResults strong {

	display: block;

	margin-bottom: 3px;

	color: #333333;

	font-size: 16px;

	font-weight: 600;

}


.retrieveDataNoResults p {

	margin: 0;

	color: rgb(92, 102, 111);

	font-size: 14px;

	line-height: 1.4;

}