.page-order-status h1 {
    font-size: 14px;
}

.page-order-status h2 {
    font-size: 12px;
}

	[v-cloak], [v-cloak] > * { display:none }
	[v-cloak]::before { content: "loading..." }

	.page-order-status {
		max-width:1000px;
	}

	.page-orderhistory {
		position: relative;
		max-width:1000px;
		margin:auto;
	}

	.icon {
		height: 100%;
		width: 100%;
		display: inline-block;
		fill: #297FB9;
		min-height: 30px;
		max-height: 30px;
		max-width: 38px;
		margin: auto;}
	}

	/* modal */
	.css--modal-body {
		padding:0;
		max-height: calc(100vh - 40px);
		width: 675px;
	}

	.css--modal-body a {
		font-weight:bold;
		color: #3598DB;
		text-decoration: underline;
	}

	.css--modal-body a:hover {
		color: #344A5F;
	}

	.css--modal-header,
	.css--modal-content,
	.css--modal-footer {
		background: #fafafa;
	}

	.css--modal-header {
		padding:20px 20px 5px 20px;
		border-top: 3px #3598DB solid;
		border-bottom:none;
	}

	.css--modal-content {
		box-shadow: none;
		border-radius:5px;
	}

	.css--modal-footer {
		margin-top:0;
		text-align: right;
		padding: 10px 15px;
		border-top:none;
		display:flex;
		flex-direction:row-reverse;
	}

	@media screen and (min-width: 767px) {
		.css--modal-footer {
			padding:14px 20px;
		}
	}

	.css--modal-footer .form-btn {
		margin-left:7px;
	}

	.css--modal-body {
		padding:0;
		padding: 5px 20px 0;
	}

	.css--modal-body a {
		font-weight:bold;
		color: #3598DB;
		text-decoration: underline;
	}

	.css--modal-body a:hover {
		color: #344A5F;
	}

	.css--modal {
		bottom: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		align-items: center;
		display: none;
		justify-content: center;
		overflow: hidden;
		position: fixed;
		z-index: 20;

		z-index: 1000;
	}

	.css--modal.is-active {
		display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
		display: -ms-flexbox;  /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
		display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
		-webkit-overflow-scrolling: touch;
		z-index: 3000;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
	}

	.css--modal-background {
		bottom: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		background-color: rgba(43, 61, 79, 0.85);
	}

	.css--modal-content,
	.css--modal-card {
		margin: 0;
		max-height: 100%;
		overflow: auto;
		position: relative;
		width: 100%;
		border-top:0;
	}

	@media screen and (min-width: 769px) {
		.css--modal-content,
		.css--modal-card {
			margin: 0 auto;
			max-height: calc(100vh - 40px);
			width: 675px;
		}
	}

	.css--modal-title {
		font-size: 15px;
		color:#3e3e3e;
	}

	@media screen and (min-width: 769px) {
		.css--modal-title {
			font-size: 18px;
		}
	}

	.css--modal-close {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		background-color: rgba(10, 10, 10, 0.2);
		border: none;
		border-radius: 290486px;
		cursor: pointer;
		display: inline-block;
		flex-grow: 0;
		flex-shrink: 0;
		font-size: 1rem;
		height: 20px;
		max-height: 20px;
		max-width: 20px;
		min-height: 20px;
		min-width: 20px;
		outline: none;
		position: absolute;
		vertical-align: top;
		width: 20px;
		background: none;
		height: 40px;
		right: 20px;
		top: 20px;
		width: 40px;
	}

	.css--modal-close:before,
	.css--modal-close:after {
		background-color: #9da8af;
		content: "";
		display: block;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translateX(-50%) translateY(-50%) rotate(45deg);
		transform-origin: center center;
	}

	.css--modal-close:before {
		height: 2px;
		width: 50%;
	}

	.css--modal-close:after {
		height: 50%;
		width: 2px;
	}

	.css--modal-close:hover,
	.css--modal-close:focus {
		background-color: #e0e0e0;
	}

	.css--modal-close:active {
		background-color: #c7c7c7;
	}

	a.form-btn,
	button.form-btn,
	.form-btn {
		border: 1px solid transparent;
		background:#efefef;
		border-color: #a9a9a9;
		background-image: linear-gradient(to bottom, #efefef, #e4e4e4);
		-webkit-border-radius: 2px;
		border-radius: 3px;
		color: #616161;
		font-size: 13px;
		padding: 10px 15px;
		text-decoration: none;
		cursor:pointer;
		text-decoration: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		display: inline-block;
		position:relative;
	}

	button.form-btn:hover,
	a.form-btn:hover,
	.form-btn:hover {
		text-decoration:underline;
	}

	button.form-btn.form-btn-remove,
	.form-btn.form-btn-remove {
		background-image: linear-gradient(to bottom, #E64D3D, #ad3124);
		border-color: transparent;
		background: #E64D3D;
		color:#fff;
	}

	button.form-btn.form-btn-plain,
	.form-btn.form-btn-plain {
		background: #929292;
		background-image: linear-gradient(to bottom, #929292, #888888);
		border-color: #828282;
		color:#fff;
	}

	.form-btn:active,
	button.form-btn:active {
		bottom: -1px;
		top: 1px;
		left: 1px;
	}

	a.form-btn.form-btn-main,
	button.form-btn.form-btn-main,
	.form-btn.form-btn-main {
		color: #fff;
		border-color: #287EB5;
		background: #287EB5;
		background-image: linear-gradient(to top, #287EB7, #379dde);
	}

	a.form-btn.form-btn-main:hover,
	button.form-btn.form-btn-main:hover,
	.form-btn.form-btn-main:hover {
		color: #fff;
		background: #344A5F;
		border-color: #344A5F;
		background-image: linear-gradient(to bottom, #287EB7, #379dde);
	}

	button.form-btn.disabled:active,
	.form-btn.disabled:active {
		bottom:0;
		top:0;
		left:0;
	}

	button.form-btn.disabled,
	.form-btn.disabled {
		border: 1px solid transparent;
		background: linear-gradient(to bottom, #b9b9b9, #c1c1c1);
		cursor: default;
	}

	.purchase-order-row.is-loading {
		position:relative
	}

	.purchase-order-row.is-loading::before {
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background: url('/static/ajax-spin-blue.svg') center center no-repeat;
		background-size:20px;
		background-color: #ffffff94;
		border-radius:5px;
		width:100%;
		display:block;
		content: '';
		z-index: 1;
	}

	.purchase-order-actions {
		{#background-color: #eaeaea;#}
		padding:20px;
		text-align: right;
	}

	.group {
		border: 1px solid #EBEEF2;
		border-radius:5px;
		font-family:'Roboto';
		margin:20px auto 15px;
	}

	.group .group {
		margin-right:20px;
		margin-left:20px;
	}

	.group-meta {
		display:grid;
		grid-row-gap: 10px;
		grid-template-columns: 1fr;
		grid-template-areas: "group-placed" "group-recipient" "group-total" "group-info";

		padding:10px 15px;
		background-color: #FBFBFD;
		border-bottom:1px solid #EBEEF2;
	}

	@media screen and (min-width: 500px) {
		.group-meta {
			padding:13px 20px;
			grid-column-gap: 15px;
			grid-row-gap: 20px;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: "group-placed group-recipient"
								"group-total group-info";
		}
	}

	@media screen and (min-width: 630px) {
		.group-meta {
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-areas: "group-placed group-recipient group-total"
								"group-info group-info group-info";
		}
	}

	@media screen and (min-width: 900px) {
		.group-meta {
			grid-row-gap: 0;
			grid-template-columns: repeat(3, 1fr) 2fr;
			grid-template-areas: "group-placed group-recipient group-total group-info";
		}
	}

	.group-meta > div {
		margin-bottom:10px;
		width:50%;
		float:left;
	}

	/* IE */
	@supports (display: grid) {
		.group-meta > div {
			margin-bottom:0;
			width:auto;
			float:none;
		}
	}

	.group-placed {
		grid-area: group-placed;
	}

	.group-total {
		grid-area: group-total;
	}

	.group-recipient {
		grid-area: group-recipient;
	}

	.group-info {
		grid-area: group-info;
	}

	@media screen and (min-width: 900px) {
		@supports (display: grid) {
			.group-info {
				text-align:right;
			}
		}
	}

	.group-notice {
		width:100%;
		padding:7px 15px;
	}

	.group-details {
		padding:10px 15px;

		grid-column-gap: 20px;
		display:grid;
		grid-template-columns: 1fr;
		grid-template-areas: "group-status"
							"group-user"
							"group-items";
		grid-area: group-details;
	}

	@media screen and (min-width: 500px) {
		.group-details {
			padding:13px 20px;
			grid-template-columns: 100px 1fr;
			grid-template-areas: "group-status group-status"
								"group-user group-user"
								"group-items group-items";
		}
	}

	@media screen and (min-width: 1000px) {
		.group-details {
			display:grid;
			grid-template-columns: 100px 1fr 200px;
			grid-template-areas: "group-status group-status group-status"
							"group-items group-items group-user";
		}
	}

	.group-items {
		grid-area: group-items;
	}

	.group-user {
		grid-area: group-user;
	}

	.group-status {
		/* padding-bottom:10px; */
		margin-bottom:20px;
		width:100%;
		grid-column-start: 1;
		grid-column-end: -1;
	}

	.group-fulfillment-status {
		color: #E77E28;
		font-size: 20px;
	}

	.item {
		grid-area: item;
		grid-column-gap: 30px;
		grid-template-columns: 95px 1fr;
		grid-template-areas: "item-image item-details";
		margin-bottom:15px;
	}

	@media screen and (min-width: 500px) {
		.item {
			display:grid;
		}
	}

	/* IE */
	.item > div {
		float:left;
		margin:0 10px;
	}

	@supports (display: grid) {
		.item > div {
			float:none;
			margin:0;
		}
	}

	.item-details {
		grid-area: item-details;
	}

	.item-title {
		font-size:15px;
		grid-area: item-title;
	}

	.item-title a {
		color: #005195;
	}

	.item-image {
		padding: 0;
		border-radius: 3px;
		grid-area: item-image;
	}

	.item-image img {
		/* border:5px solid #f7f9f9; */
		border:5px solid transparent;
		width:95px;
		border-radius: 3px;
	}

	.item-label {
		color: #666;
	}

	.item-fulfillment-status {
		color: #E77E28;
		margin-bottom:5px;
		font-size:15px;
	}

	.item-value {
		color: #666;
	}

	.item-qty,
	.item-no {
		text-transform:uppercase;
		font-size:11px;
		margin-bottom:3px;
	}

	.item-actions {
		margin-top:15px;
	}

	.status-label {
		color: grey;
		text-transform: uppercase;
		font-size:11px;
		margin-bottom:3px;
		letter-spacing: 0.055em;
	}



	.status-value {
		font-size:15px;
	}

	@media screen and (min-width: 500px) {
		.status-value {
			font-size:14px;
		}
	}

	.status-action {
		font-size:12px;
		margin-top:3px;
	}

	.status-action a,
	.status-action .status-link,
	.status-action .status-btn {
		text-decoration:underline;
		color: #428bca;
		cursor: pointer;
	}

	.status-action a:hover,
	.status-action .status-link:hover,
	.status-action .status-btn:hover {
		color:#005195;
	}

	.group-shipping {
		text-align: left;
		margin-bottom:20px;
	}

	.group-shipping .status-label {
		margin-bottom:5px;
	}

	.group-shipping a {
		margin:0 0 7px;
		display: inline-block;
		text-decoration: underline;
	}

	.group-shipping .status-value {
		font-size:15px;
	}

	.status-unclaimed-rewards {
		margin-bottom:15px;
	}

	.status-unclaimed-rewards .status-link {
		font-size:11px;
	}

	.group-btn {
		text-align: center;
		margin-bottom:13px;
		padding:8px 15px;
		border-radius:5px;
		width:auto;
		display:inline-block;
		color: #fff;
		border-color: #287EB5;
		background: #287EB5;
		background-image: linear-gradient(to top, #287EB7, #379dde);
		border: 1px solid transparent;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		-webkit-touch-callout: none;
		-o-user-select: none;
		-moz-user-select: none;
	}

	.group-btn:active, button.group-btn:active {
		transform: scale(.98);
	}

	.group-btn a {
		color:#fff;
		text-decoration: none;
	}

	.group-btn-secondary {
		text-align: center;
		margin-bottom:13px;
		padding:8px 15px;
		border-radius:5px;
		width:auto;
		display:inline-block;
		color: #2E89C5;
		background: #fff;
		border: 1px solid #2E89C5;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		-webkit-touch-callout: none;
		-o-user-select: none;
		-moz-user-select: none;
	}

	.group-btn-secondary:active, button.group-btn-secondary:active {
		transform: scale(.98);
	}

	.group-btn-secondary a {
		color:#2E89C5;
		text-decoration: none;
	}

	.group-details-empty {
		display:block;
		grid-column-start: 1;
		grid-column-end: -1;
		padding: 20px;
	}

	.group-empty {
		text-align: center;
		padding: 20px;
	}

	.group-items-empty {
		border: 1px dashed #C1CBD2;
		padding: 20px;
		text-align: center;
		color: #ADBAC3;
		display:block;
		grid-column-start: 1;
		grid-column-end: -1;
	}

	.purchase-order-form {
		margin-bottom: 20px;
		margin-top: 20px;
		padding: 20px 20px 10px 20px;

		background-color: #FBFBFD;
		border: 1px solid #EBEEF2;
		border-radius: 5px;
	}

	@media (min-width: 900px) {
		form {
			display: grid;
			grid-template-columns: 260px 300px 200px;
			grid-column-gap: 20px;
			align-items: end;
		}
	}

	h2 {
		display:inline-block;
		font-size:17px;
	}

	.support {
		color: #696969;
		margin-bottom:20px;
		margin-top:20px;
		padding: 10px 20px;
	}

	.support h2 {
		color:#2C3D4F;
	}

	.support a {
		text-decoration:underline;
	}

	.support a:hover {
		color: #1F425D;
	}

	.status-message {
		padding: 10px 20px;
		background: #FBFBFD;
		border-radius:5px;
		display:block;
	}

	.status-message.status-success {
		color: #0B5C2A;
		background-color: #E8FAEF;
	}
	.status-message.status-error {
		color: #69120C;
		background-color: #FCEBE9;
	}
	.status-message.status-warning {
		color: #6D440B;
		background-color: #FDF5E8;
		{#color: var(--orange-color-900);#}
		{#background-color: var(--orange-color-100);#}
	}

	.status-message a {
		font-weight: bold;
		text-decoration:underline;
		color: var(--red-color-600);
	}

	.group-empty {
		text-align: center;
		padding: 20px;
	}
	.content-section-header {
		margin-top:20px;
		display: grid;
		grid-template-columns: 50px 1fr;
		grid-column-gap: 10px;
		grid-column-start: 1;
		grid-column-end: -1;
		border-bottom: 1px solid #F7F9F8;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

	.content-section-header h1 {
		order: 2;
		font-family: 'Montserrat';
		color: #2A4B65;
		font-size: 18px;
		font-weight: 100;
		order: 2;
		margin: 0;
		align-self: center;
		text-transform: none;
	}

	.content-section-header .icon {
		order: 1;
	}

	.content-section-content {
		color: #696969;
	}

	a.simple {
		text-decoration:none;
	}

	.expander {
		width: 18px;
		height: 18px;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAALVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBoCg+AAAADnRSTlMAARovMDE+SmFneHui9erDVBcAAAAsSURBVAhbY2CoYgADuw1givU1hOsH4TJDuX0JIGGmOwIgSvcgBodhDlgGAgCwXQmXdVwRxQAAAABJRU5ErkJggg==);
		background-repeat: no-repeat;
		display: inline-block;
		background-position: 4px 3px;
		float: left;
	}

	.expander.expanded {
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAKlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKE86IAAAADXRSTlMAARovMD5KYWd4e6L1lZz7BwAAADVJREFUCB1jYEABHApArhkD9yEGBpabDIx7FBhsFzAwSB9ivgUUZ9xTC+QAuSAOkBsApjAJAI43CJ0YSgbLAAAAAElFTkSuQmCC);
		background-position: 2px 4px;
	}

	.tracking-toggle {
		padding: 0 6px 4px;
		margin-left: 13px;
	}

	.table {
		margin: 10px 30px;
	}

	.line-item {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-row-gap: 7px;
	}

	.line-item div {
		padding: 3px;
	}

	.line-item div:first-child {
		align-self: start;
		justify-self: end;
		padding-right: 40px;
	}

	.date {
		padding: 12px 10px 4px;
		border-bottom: solid 1px #eee;
		margin-bottom: 10px;
	}

	.carrier-link a:visited,
	.carrier-link a:hover,
	.carrier-link a {
		color: #000;
	}

	.data-box {
		padding: 0 16px;
	}

	.form-btn.disabled {
		pointer-events: none;
	}

	.error {
		padding: 12px 20px;
		background: #fdcfcf;
		border-radius: 4px;
	}

	.css--modal .form-control:focus {
		border-color: #F39C0F;
		-webkit-box-shadow: inset 0 1px 1px #f39c0f54, 0 0 8px #f39c0f54;
		box-shadow: inset 0 1px 1px #f39c0f54, 0 0 8px #f39c0f54;
	}

	.rewards-text {
		padding-bottom: 5px;
	}