:root {
	--hd-blue: #00246a;
	--hd-green: #03a97c;
	--hd-lime: #85c446;
	--rz-primary: var(--hd-blue);
	--rz-primary-light: #0a2f6d;
	--rz-primary-lighter: #001a4624;
	--rz-primary-dark: #001538;
	--rz-primary-darker: #00112d;
	--rz-secondary: #03a97c;
	--rz-secondary-light: #e2ffc6;
	--rz-secondary-lighter: rgba(233, 30, 99, 0.12);
	--rz-secondary-dark: #85c446;
	--rz-secondary-darker: #afed70;
	--c-red-light: #ffdada;
	--c-red-dark: #c60000;
	--c-green-bright: #74ffa9;
	--c-green: #b6ffc8;
	--c-green-light: #e0ffda;
	--c-green-dark: #26c600;
	--c-blue-bright: #74b7ff;
	--c-blue: #4168ff;
	--c-blue-light: #ced8ff;
	--c-yellow-light: #fffeda;
	--c-orange-light: #fff5da;
	--c-grey-light: #efefef;
	--c-grey-medium: #c7c7c7;
}

:root {
	--rz-body-font-size: 14px;
	--rz-dropdown-item-font-size: .9rem;
	--rz-grid-loading-indicator-background-color: rgba(0 0 0 / 0.2);
	--rz-sidebar-width: auto;
	/*--rz-layout-background-color: #ebf2f8;*/
}

.rz-dialog-title {
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
}

body {
	margin: 0;
}

#hw-dev-user-display {
	display: none;
}

.hidden {
	display: none !important;
}

.sub-text {
	margin: 0;
	font-size: 12px;
	font-style: italic;
	padding-bottom: 10px;
}

.side-text {
	margin: 0;
	font-size: 12px;
	text-decoration: underline;
	padding-bottom: 10px;
	vertical-align: text-bottom;
	display: inline;
}

.clickable {
	cursor: pointer;
	-webkit-filter: brightness(50%);
}

	.clickable:hover {
		-webkit-filter: brightness(200%);
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
		-o-transition: all .5s ease;
		-ms-transition: all .5s ease;
		transition: all .5s ease;
	}

.rz-button.rz-primary.rz-shade-default, .rz-button.rz-primary {
	background-color: var(--rz-secondary);
}

.rz-button.rz-secondary.rz-shade-default, .rz-button.rz-secondary {
	background-color: var(--rz-primary);
}

.rz-grid-table td.rz-frozen-cell, .rz-grid-table th.rz-frozen-cell {
	padding-left: 0px;
}

	.rz-grid-table td.rz-frozen-cell .rz-cell-data {
		overflow: visible;
	}

.rz-button.rz-state-disabled, .rz-state-disabled.rz-paginator-element {
	cursor: not-allowed;
}

.rz-dropdown.custStatus {
	width: 100%;
	/*max-width: 400px;*/
}

.rz-dropdown-item.custStatus {
	/*padding: 0;*/
}

.rz-cell-filter .rz-clear .rz-dropdown-label, .rz-cell-filter .rz-helper-hidden-accessible {
	padding-right: 10px;
	width: 100px;
}

.rz-dropdown .notSold, .rz-dropdown-item .notSold {
	background-color: white;
	color: black;
}

.rz-dropdown .sold, .rz-dropdown-item .sold {
	background-color: rgb(0, 2, 136);
	color: white;
}

.rz-dropdown .pending, .rz-dropdown-item .pending {
	background-color: rgb(255, 230, 0);
	color: black;
}

.rz-dropdown .inactive, .rz-dropdown-item .inactive {
	background-color: rgb(255, 81, 0);
	color: white;
}

.rz-dropdown .ordered, .rz-dropdown-item .ordered {
	background-color: rgb(20, 122, 0);
	color: white;
}

/*Filter Pages*/
.filter-options {
	padding: 5px;
}

	.filter-options fieldset {
		width: 100%;
		border-color: var(--hd-green);
		border-width: 2px 0 0 0;
		border-radius: 0;
	}

	.filter-options legend {
		margin-bottom: 0;
		color: var(--hd-green);
		font-size: 22px;
		font-weight: bold;
	}

	.filter-options .rz-fieldset-content-wrapper {
		background-color: var(--hd-blue);
	}

	.filter-options .rz-fieldset-content {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.filter-options .rz-form-field {
		padding-top: 20px;
		margin-right: 5px;
	}

	.filter-options .rz-form-field-content {
		background-color: #f7f7f7;
		border-color: #f7f7f7;
		box-shadow: 1px 1px 0px 0px #e8e8e8;
	}

	.filter-options .rz-form-field-label.rz-text-truncate {
		/*background-color: #767676;*/
		background-color: transparent;
		color: white;
		font-size: 1rem;
		padding: 0 3px 1px 3px;
		top: -1.35rem;
		left: 0;
	}

.filter-parent {
	height: 60vh;
	max-width: 100%;
}

.rz-dialog .filter-parent {
	height: auto;
	max-width: initial;
}

.filter-parent .rz-button.rz-secondary.rz-shade-default, .filter-parent .rz-button.rz-primary.rz-shade-default {
	width: 67px;
	padding: 2px 5px;
}

	.filter-parent .rz-form-field.good {
		background-color: var(--c-green);
	}

	.filter-parent .rz-dropdown.good {
		background-color: var(--c-green-light);
	}


	.filter-parent .rz-grid-table-striped tbody > .doc-haascreate-not-opened:not(.rz-expanded-row-content) > td {
		background-color: var(--c-orange-light);
	}

	.filter-parent .rz-grid-table-striped tbody > .doc-estore-not-opened:not(.rz-expanded-row-content) > td {
		background-color: var(--c-yellow-light);
	}

	.filter-parent .rz-grid-table-striped tbody > .doc-haascreate-opened:not(.rz-expanded-row-content) > td {
		background-color: var(--c-green-light);
	}

	.filter-parent .rz-grid-table-striped tbody > .doc-estore-opened:not(.rz-expanded-row-content) > td {
		background-color: var(--c-green-light);
	}

	.filter-parent span.rz-column-title-content {
		font-size: 1rem;
	}

.rz-grid-table thead tr:first-child th {
	background-color: #00246a;
	border-bottom: 5px solid #14a877;
}

span.rz-column-title {
	color: white !important;
}

.rz-column-draggable span.rz-column-title {
	color: black !important;
}

.rz-sortable-column .rzi-sort-asc, .rz-sortable-column .rzi-sort-desc {
	color: white !important;
}

.rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) {
	padding: 5px;
}

#hw-summary-card .rz-stack > div:nth-child(even) {
	background-color: var(--rz-secondary-dark) !important;
}

.hd-dialog {
	width: 70vw;
}
@media only screen and (max-width: 1200px) {
	.hd-dialog {
		width: 92vw;
	}
}

.rz-dialog .rz-dialog-titlebar {
	padding: 10px;
}

.rz-dialog.error .rz-dialog-titlebar {
	background-color: var(--c-red-light);
}

	.rz-dialog.error .rz-dialog-titlebar .rz-dialog-title {
		color: var(--c-red-dark);
	}

.rz-dialog.success .rz-dialog-titlebar {
	background-color: var(--c-green-light);
}

	.rz-dialog.success .rz-dialog-titlebar .rz-dialog-title {
		color: var(--c-green-dark);
	}

.rz-progressbar-circular-label {
	text-align: center;
}

.valid.modified:not([type=checkbox]) {
	outline: initial;
}

.filter-parent .rz-button.rz-primary.rz-shade-default, .filter-parent .rz-button.rz-primary {
	background-color: var(--rz-primary);
}

.filter-parent .rz-button.rz-secondary.rz-shade-default, .filter-parent .rz-button.rz-secondary {
	background-color: var(--rz-secondary);
}

/** HW fancy form **/
.hw-fancy-form {
}

	.hw-fancy-form select, .hw-fancy-form input:not([type='checkbox']):not([type='radio']), .hw-fancy-form textarea {
		border: 1px solid #a1a3a3;
		border-radius: 4px;
		box-shadow: 0 1px #fff;
		box-sizing: border-box;
		color: #696969;
		height: 39px;
		padding-left: 15px;
		transition: box-shadow 0.3s;
		width: 100%;
		font-size: 16px;
	}

		.hw-fancy-form select:focus, .hw-fancy-form input:not([type='checkbox']):not([type='radio']):focus, .hw-fancy-form textarea:focus {
			box-shadow: -8px 0px 0px 2px rgb(0, 25, 73);
			outline: 0;
		}

		.hw-fancy-form input[type='radio'] {
			width: 30px;
			transform: scale(1.5);
		}

	.hw-fancy-form .input-div {
		margin: 5px 10px 0 10px;
	}

		.hw-fancy-form .input-div.center {
			margin: 10px auto 0 auto;
		}

		.hw-fancy-form .input-div label {
			font-weight: 600;
		}

	.hw-fancy-form .vert-input {
		margin-left: 30px;
		margin-top: 10px;
	}

		.hw-fancy-form .vert-input > .input-div {
			display: table-cell;
			margin-left: 0;
		}

			.hw-fancy-form .vert-input > .input-div input {
				width: 118px;
				padding-left: 0;
			}

	.hw-fancy-form .required {
		background-color: #cdf2fe;
	}

	.hw-fancy-form .disabled {
		cursor: not-allowed;
	}

	.hw-fancy-form .column-container {
		display: flex;
		justify-content: center;
		justify-items: center;
	}

	.hw-fancy-form .column {
	}

	.hw-fancy-form .btn-container {
		display: flex;
		justify-content: center;
		gap: 30px;
		padding-top: 20px;
	}



/** HW push button **/
.hw-push-button {
	width: 240px;
	height: 35px;
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: rgb(63, 63, 63);
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	padding-top: 6px;
	cursor: pointer;
	border: none;
	border-radius: 5px;
	outline: 0;
	margin: 0 2px;
}

	.hw-push-button.primary, .hw-push-button.primary {
		color: #fff;
		background-color: var(--hd-green);
		background-image: linear-gradient(top, var(--hd-green), #3111);
		text-shadow: 1px 1px 0px var(--hd-green);
		box-shadow: inset 0px 1px 0px var(--hd-green), 0px 5px 0px 0px #3a7464, 0px 10px 5px #999;
	}

	.hw-push-button.secondary, .hw-push-button.secondary {
		color: #fff;
		background-color: var(--hd-blue);
		background-image: linear-gradient(top, var(--hd-blue), #3111);
		text-shadow: 1px 1px 0px var(--hd-blue);
		box-shadow: inset 0px 1px 0px var(--hd-blue), 0px 5px 0px 0px #202b3d, 0px 10px 5px #999;
	}

	.hw-push-button:active, .hw-push-button:active {
		top: 3px;
		box-shadow: inset 0px 1px 0px #0e6e55, 0px 2px 0px 0px #1b6853, 0px 5px 3px #999;
	}


/** HW button **/
.hw-button {
	background-color: var(--hd-blue);
	outline: none;
	border: none;
	cursor: pointer;
	padding: 14px 16px;
	font-size: 17px;
	color: rgb(241, 241, 241);
}

	.hw-button:hover {
		background-color: var(--hd-green);
	}

	.hw-button:active {
		background-color: var(--hd-green);
	}


/** HW EStore Location Filter **/
.estore-location-filter .rz-grid-table-striped tbody > .data-row-active > td {
	background-color: var(--c-green-bright) !important;
}

.estore-location-filter .rz-grid-table-striped tbody > .data-row-inactive > td {
	background-color: var(--c-blue-bright) !important;
}

/** data view (quote line items etc) **/
.data-view-header {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 10px;
	margin: 15px 15px 15px 0;
	border-bottom: 1px solid var(--hd-green);
}

.data-item {
	display: flex;
	gap: 20px;
	padding: 10px;
	border-bottom: 1px solid var(--hd-blue);
	margin-bottom: 5px;
}

	.data-item .title {
		font-weight: bold;
	}

	.data-item .block-text {
		white-space: pre-line;
		width: 315px;
	}

	.data-item #line-qty-container {
		display: flex;
		flex-direction: column;
		width: 100px;
	}

/** my customer dashboard **/
#my-cust-dashboard span.rz-column-title-content {
	white-space: pre-line;
	height: 50px;
}

.dashboard-header {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding-bottom: 10px;
}
	.dashboard-header h3 {
		margin-bottom: 0;
	}



/** Custom Rail Color Report **/

.rail-container {
	display: flex;
	box-shadow: 1px 1px 5px 2px var(--bs-gray-600);
	max-width: 1000px;
	width: fit-content;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.rail-list {
	column-gap: 10px;
	border-right: 1px solid;
	display: grid;
	padding: 10px;
	grid-template-columns: auto auto;
	grid-template-rows: repeat(auto,50px);
	align-content: baseline;
}

	.rail-list:nth-child(odd) {
		background-color: var(--c-grey-light);
	}

.rail-sub-item {
	column-gap: 10px;
	border-right: 1px solid;
	display: grid;
	padding: 10px;
	grid-template-columns: auto auto auto;
	grid-template-rows: repeat(auto,50px, auto);
	align-items: center;
}

.rail-csr-comment {
	height: 140px !important;
	width: 500px !important;
	display: block;
	margin-bottom: 10px;
}

/** Quote Results **/
#quote-results {
	display: flex;
}

	#quote-results #left-info {
		max-width: 300px;
		min-width: 200px;
		padding-right: 10px;
	}

		#quote-results #left-info #link-list a {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			/*max-width: 250px;*/
			display: block;
		}

		#quote-results #left-info #link-list .link-and-icon {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		#quote-results #left-info button {
			width: 100%;
		}

		#quote-results #left-info button > span {
			justify-content: flex-start;
		}

	#quote-results #right-info {
		width: 100%;
		max-width: 1500px;
	}

	#quote-results .action-buttons {
		display: flex;
		column-gap: 5px;
	}

	#quote-results .property-grid {
		display: grid;
		grid-template-columns: 1fr 3fr .2fr 1fr 3fr;
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}

	#quote-results .property-grid > .div1 {
		grid-area: 1 / 1 / 2 / 2;
	}

	#quote-results .property-grid > .div2 {
		grid-area: 1 / 2 / 2 / 3;
	}

	#quote-results .property-grid > .div3 {
		grid-area: 1 / 4 / 2 / 5;
	}

	#quote-results .property-grid > .div4 {
		grid-area: 1 / 5 / 2 / 6;
	}

		#quote-results .property-grid > div:nth-child(odd) {
			font-weight: bold;
			width: 130px;
			white-space: nowrap;
			padding-right: 10px;
			text-align: right;
		}

	#quote-results .main-container {
		display: flex;
		background-color: #f1f3f9;
	}

	#quote-results .top-container {
		display: flex;
		justify-content: space-between;
	}

		#quote-results .top-container p {
			max-width: 500px;
		}

		#quote-results .top-container .quote-status {
			max-width: 500px;
			margin: 20px 20px 20px 5%;
			display: flex;
			align-items: center;
		}

	#quote-results .sub-container {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	#quote-results .panel-container {
		margin: 10px 0 10px 0;
	}

		#quote-results .panel-container .panel {
			margin: 0;
		}

	#quote-results .panel {
		background-color: white;
		border: 1px solid var(--rz-primary-lighter);
		border-radius: 6px;
		margin: 10px 0 10px 0;
		padding: 10px;
		box-shadow: rgba(51, 51, 85, 0.15) 0 2px 4px 0;
	}

		#quote-results .panel > * {
			display: flex;
			flex-direction: column;
		}

		#quote-results .panel .panel-outer-header {
		}

		#quote-results .panel .panel-inner-header {
			border-bottom: 1px solid gray;
			color: gray;
		}

	#quote-results .key-value-list > div {
		border-bottom: 1px solid var(--rz-primary-lighter);
	}

	#quote-results .key-value-list > div > div {
		display: inline-block;
	}

	#quote-results .key-value-list > div > div:nth-child(1) {
		font-weight:bold;
		padding-right: 10px;
	}

	#quote-results .key-value-vertical-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

		#quote-results .key-value-vertical-container > div {
			display: flex;
			flex-direction: column;
			margin: 10px;
			width: 340px;
			white-space: pre-line;
		}

			#quote-results .key-value-vertical-container > div > div:nth-child(1) {
				font-weight: bold;
			}

	#quote-results #inputs-container {
		max-height: 500px;
		overflow-y: scroll;
		box-shadow: inset 0px -10px 10px -10px gray;
	}

		#quote-results #inputs-container > h4 {
			background-color: var(--c-grey-light);
		}

	#quote-results #line-items-container {
		align-items: center;
		overflow-y: scroll;
	}
		#quote-results #line-items-container th {
			background-color: var(--c-grey-light);
		}

		#quote-results #line-items-container thead {
			border: 1px solid var(--c-grey-medium);
		}

		#quote-results #line-items-container tbody > tr {
			border: 1px solid var(--c-grey-medium);
		}

			#quote-results #line-items-container tbody > tr > td {
				padding: 5px 0 5px 0;
			}

		#quote-results #line-items-container tfoot {
			border: 1px solid var(--c-grey-medium);
		}

			#quote-results #line-items-container tfoot > tr {
				background-color: var(--c-grey-light);
				padding-bottom: 10px;
			}

				#quote-results #line-items-container tfoot > tr > td {
					padding-bottom: 20px;
				}

		#quote-results #line-items-container .description {
			white-space: pre-line;
		}

	#quote-results #history-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#quote-results #history-table {
		width: 1000px;
		margin: 0 auto;
	}

	#quote-results #history-table tbody > tr {
		border-bottom: 1px solid var(--c-grey-medium);
	}

		#quote-results #history-table tr > td:nth-child(1) {
			max-width: 130px;
		}
		#quote-results #history-table tr > td:nth-child(2) {
			max-width: 140px;
		}
		#quote-results #history-table tr > td:nth-child(3) {
			max-width: 130px;
		}
		#quote-results #history-table tr > td:last-child {
			max-width: 200px;
		}

	#quote-results #place-order-form .column {
		width: 50%;
	}

	#quote-results #quote-attachment-listing {
		display: flex;
		flex-direction: column;
	}

		#quote-results #quote-attachment-listing > h5 {
			background-color: var(--c-grey-light);
			margin: 10px 0px;
			padding: 10px 20px;
			border-bottom: 1px solid var(--c-grey-medium);
		}

		#quote-results #quote-attachment-listing > label {
			color: var(--hd-blue);
			border-bottom: 1px solid var(--c-grey-medium);
			padding: 5px 0px 5px 30px;
		}

/** Max Truck Load **/
.max-truck-container {
	display: block;
}

.max-truck-table {
	margin: 10px 0;
}

	.max-truck-table th, .max-truck-table td {
		border: 1px solid #b6b6b6;
		padding: 2px 5px;
	}

	.max-truck-table > thead > tr {
		background-color: #00000012;
	}

	.max-truck-table .over {
		color: red;
		font-weight: bold;
		background: #ffd9d9;
	}

	.max-truck-table .good {
		color: green;
		font-weight: bold;
		background: #e7ffd9;
	}

	.max-truck-table .unapproved {
		padding: 10px;
		border: 1px solid red;
		width: 300px;
		width: fit-content;
		font-size: 20px;
	}

	.max-truck-table .approved {
		padding: 10px;
		border: 1px solid green;
		width: 300px;
		width: fit-content;
		font-size: 20px;
	}

	.max-truck-table td:nth-child(4) {
		white-space: break-spaces;
	}

.mobile-toggle-btn {
	display: none;
}

@media (max-width: 1024px) {
	#quote-results #left-info {
		position: absolute;
		background: var(--rz-body-background-color);
		border: 1px solid var(--c-grey-medium);
		z-index: 1000;
	}
	/*#quote-results .action-buttons {
		flex-direction: column;
		column-gap: 0;
		row-gap: 5px;
	}*/
	.mobile-toggle-btn {
		display:block;
	}
}

@media (max-width: 520px) {
	#quote-results .action-buttons {
		flex-direction: column;
		column-gap: 0;
		row-gap: 5px;
	}
}

/* quote filter copy dialog */
#quote-filter-copy {

}
	#quote-filter-copy h5 {
		font-weight: 600;
		font-size: 14px;
		margin: 0 0 2px 0;
	}
	#quote-filter-copy .top-inputs {
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		padding: 5px;
		border: 1px solid var(--c-green-bright);
		margin-bottom: 10px;
		background: var(--c-green);
		box-shadow: -1px -1px 5px 1px inset var(--c-green-bright);
	}
	
	#quote-filter-copy .line-items-container {
		display: flex;
		flex-direction: column;
		row-gap: 5px;
		max-height: max(60vh, 500px);
		overflow-y: auto;
		/*background-color: var(--hd-blue);*/
	}

	#quote-filter-copy .blocker {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #8b8b8b7d;
		width: 100%;
		height: 100%;
	}

		#quote-filter-copy .blocker p {
			padding: 10px;
			width: 180px;
			background-color: white;
			font-weight: bold;
			border: 1px solid black;
			text-align: center;
		}

	#quote-filter-copy .line-item-outer {
		padding: 10px 10px 10px 20px;
	}

	#quote-filter-copy .line-items-container .line-item-outer:nth-child(odd) {
		background-color: var(--c-grey-light);
	}
	#quote-filter-copy .line-items-container .line-item-outer:nth-child(even) {
		background-color: #ffffff;
	}

	#quote-filter-copy .line-item-inner {
		display: flex;
		flex-direction: row;
		padding: 10px;
		border-left: 1px dashed;
		position: relative; /*this is so the .blocker div can cover this element*/
	}

	#quote-filter-copy .inputs {
		max-width: 200px;
		padding-right: 20px;
	}

		#quote-filter-copy .inputs input:not([type='checkbox']):not([type='radio']) {
			height: 30px;
		}

	#quote-filter-copy input[type=checkbox] {
		cursor: pointer;
	}

	#quote-filter-copy .line-items-container input[type=checkbox] {
		accent-color: var(--hd-green);
	}

	#quote-filter-copy .input-div {
		margin: 0;
	}

	#quote-filter-copy .order-note {
		white-space: break-spaces;
		width: 300px;
		max-height: 250px;
		overflow: auto;
		margin: 0 0 5px 0;
	}

/* boxes loader */
.box-loader {
	display: flex;
	justify-content: center;
}

	.box-loader .box-loader-grid {
		width: 300px;
		height: 200px;
		
		/*width: 50vw;*/
		/*height: 50vh;*/
		/*position: absolute;*/
		/*z-index: 1000000000;*/
		/*left: 25vw;*/
		/*margin-top: 25vh;*/
	}

	.box-loader .box-title {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
	}

	.box-loader .box {
		width: 33%;
		height: 25%;
		background-color: #333;
		float: left;
		-webkit-animation: box-loader-grid_ScaleDelay 2.5s infinite ease-in-out;
		animation: box-loader-grid_ScaleDelay 2.5s infinite ease-in-out;
	}

	.box-loader .box1 {
		background-color: var(--hd-green);
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}

	.box-loader .box2 {
		background-color: var(--hd-green);
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}

	.box-loader .box3 {
		background-color: var(--hd-green);
		-webkit-animation-delay: 0.5s;
		animation-delay: 0.5s;
	}

	.box-loader .box4 {
		background-color: var(--hd-blue);
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}

	.box-loader .box5 {
		background-color: var(--hd-blue);
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}

	.box-loader .box6 {
		background-color: var(--hd-blue);
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}

	.box-loader .box7 {
		background-color: var(--hd-green);
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}

	.box-loader .box8 {
		background-color: var(--hd-green);
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}

	.box-loader .box9 {
		background-color: var(--hd-green);
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}

	.box-loader .box10 {
		background-color: var(--hd-green);
		-webkit-animation-delay: 0.0s;
		animation-delay: 0.0s;
	}

	.box-loader .box11 {
		background-color: var(--hd-green);
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}

	.box-loader .box12 {
		background-color: var(--hd-green);
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}

@-webkit-keyframes box-loader-grid_ScaleDelay {
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1);
		transform: scale3D(1, 1, 1);
	}

	35% {
		-webkit-transform: scale3D(0, 0, 1);
		transform: scale3D(0, 0, 1);
	}
}

@keyframes box-loader-grid_ScaleDelay {
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1);
		transform: scale3D(1, 1, 1);
	}

	35% {
		-webkit-transform: scale3D(0, 0, 1);
		transform: scale3D(0, 0, 1);
	}
}

/* favorites filter detail */
.fav-filter-item-detail {
	display: flex;
	flex-direction: column;
}

.fav-header {
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid var(--hd-blue);
}

	.fav-header h5 {
		font-size: 16px;
		font-weight: bold;
	}

.fav-detail {
	display: flex;
	flex-direction: row;
}

	.fav-detail .order-note {
		white-space: break-spaces;
		width: 300px;
		max-height: 250px;
		overflow: auto;
		/*margin: 0 0 5px 0;*/
	}
	.fav-detail .image-container {
		white-space: break-spaces;
		width: 300px;
		max-height: 250px;
		overflow: auto;
		/*margin: 0 0 5px 0;*/
	}

.fav-input-list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

	.fav-input-list .input {
		border: 1px solid var(--hd-blue);
	}

.flex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.flex-col {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

.config-item {
	border-bottom: 1px solid var(--hd-green);
}

	.config-item * {
		font-size: 0.875rem;
	}
	.config-item h5 {
		font-weight: bold;
		margin: 0;
	}

	.config-item > div {
		padding: 5px;
	}

	.config-item button {
		width: 65px;
		height: 100% !important;
		min-width: initial !important;
		text-wrap: auto;
		margin: 0;
	}

	.config-item .config-info > div {
		padding-bottom: 5px;
	}

	.config-item .config-info {
		width: 175px;
	}

		.config-item .config-info input {
			width: 98%;
			padding: 5px 0 5px 5px;
		}

	.config-item .order-note-container {
		width: 325px;
	}

	.config-item .order-note {
		max-height: 200px;
		overflow-y: auto;
		white-space: pre-wrap;
	}

	.config-item .img-container {
		max-width: 400px;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.config-item img {
		height: 160px;
		box-shadow: 0px 0px 10px 0px #c1c1c1;
	}