:root {
	--progress-color: #4a5b48;
	--button-color-1: #4a5b48;
	--button-color-2: #6c7c6a;
	--secondary-color: #000000;
	--page-color: #F6F8FA;
	--border-soft: #E2E3E5;
	--text-colour: #434248;
	--font-soft: #B7B9BD;
	--shaded-color:#e6e6e6;
	--splash-color: #3E42E9;
	--field-color: #ffffff;
	--warning-soft: #E7D2AD;
	--error-soft: #E7B9BD;
	--popup-color: #FFFFFF;
	--theme-color: #4A5B48;
}
body {
	font-family: Muli, sans-serif;
	margin:0;
	background:var(--page-color);
}
img{max-width:100%;}
label{font-size:80%;color:var(--font-soft);font-weight:400;}

@keyframes spin {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(359deg);}
}
.hidden{display:none !important;}
.basic{text-decoration:none;font-size:80%;}
.basic:hover{border-bottom:1px var(--button-color-1) dashed;}
.close{line-height:1}

.center{text-align:center}
[type='text'],[type='email']{
	display: inline-block;
	background:var(--field-color);
	border-radius:8px;
	position:relative;
	border:2px var(--font-soft) solid;
	font:inherit;
	padding:8px 16px 8px 16px;
	box-sizing:border-box;
}
.column [type='text']{width:100%;}

.column textarea{
	width:100%;
	display: inline-block;
	background:var(--border-soft);
	border-radius:20px;
	margin:0 0;
	position:relative;
	border:2px var(--font-soft) solid;
	font:inherit;
	padding:8px 16px 8px 16px;
	box-sizing:border-box;
}
.placeholder_image{
	background:#F8F8F8;
}

.select-wrapper{
	display: inline-block;
	background:var(--border-soft);
	border-radius:20px;
	margin:1em 0 0;
	position:relative;
	border:2px var(--font-soft) solid;
	height:36px;
}
.select-wrapper:after{
	content:"";
	display:block;
	border-bottom:2px var(--font-soft) solid;
	border-right:2px var(--font-soft) solid;
	transform:rotate(45deg);
	width:8px;
	height:8px;
	position:absolute;
	right:18px;
	top:11px;
	pointer-events:none;
}
.select-wrapper select{
	-webkit-appearance:none;
	border:none;
	background:transparent;
	font:inherit;
	padding:8px 48px 8px 16px;
}
.label-aligned{
	padding-left:16px;
}
.label-aligned + br + .select-wrapper, .label-aligned + br + input{
	margin-top:0;
}

#popup,#modal{display:none;}
.show-popup #popup{display:block;}
.show-modal #modal{display:block;}
.popup-screen{
	position:fixed;
	top:0;right:0;bottom:0;left:0;
	background:rgba(0,0,0,0.25);
}
.popup-centre{
	position:fixed;left:50%;top:50%;width:0;height:0;
}
.popup-window{
	background:var(--popup-color);
	width:500px;
	max-width:90vw;
	min-height:40vh;
  max-height: 90vh;
	padding:20px 40px;
	box-sizing:border-box;
	overflow:auto;
	transform:translateX(-50%) translateY(-50%);
	box-shadow:0 5px 30px rgba(9,10,17,0.15);
	position:relative;
}
#modal .popup-window{
	width:800px;
	min-height:20vh;
}
.popup-window p{word-break:break-word;}
.popup-window--close{
	position:absolute;
	top:40px;right:40px;
	width:24px;
	height:24px;
}
.popup-window--close:after,.popup-window--close:before{
	content:"";
	border-left:3px var(--font-soft) solid;
	height:24px;
	position:absolute;
	left:10px;top:0;	
}
.popup-window--close:after{transform:rotate(45deg)}
.popup-window--close:before{transform:rotate(-45deg)}
.popup-window--close:hover{cursor:pointer;}

.popup-window h3:first-child {margin-bottom:0;}
.popup-window h3:first-child + p{margin-top:0;}

.twin-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:40px;}
.order-column{grid-template-columns:200px minmax(0,1fr);}
.column-end{display:flex;justify-content:flex-end;align-items:center;}
@media(max-width:767px){
.twin-column,.order-column{grid-template-columns:1fr;grid-gap:0;}
.column-end{justify-content:flex-start;}
}

.button {
	display: inline-block;
	background-color:var(--button-color-1);
	/*background: linear-gradient(var(--button-color-1), var(--button-color-2));*/
	padding:10px 20px 12px;
	text-decoration: none;
	color: white;
	border-radius: 4px;
	border: none;
	position:relative;
	box-sizing:border-box;
	font:inherit;
}
.button:hover {
	background-color:var(--button-color-2);
}
.button + .button{margin-left:8px;}
.button:hover{cursor:pointer;}
.button.working {
	padding-left:50px;
}
.button.secondary{background:transparent;color:var(--button-color-1);}
.button.working {
	background-color:red;
}
.button.working:before {
	content:"";
	display:block;width:24px;height:24px;
	border-radius:100%;
	border:2px white dotted;
	box-sizing:border-box;
	position:absolute;left:14px;top:10px;
	animation-name:spin;
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
.button.secondary.working:before{border-color:var(--button-color-1);}
.tracking-button {
	display: inline-block;
	background: linear-gradient(var(--button-color-1), var(--button-color-2));
	color:white;
	padding: 4px 12px 4px 32px;
	text-decoration: none;
	color: white;
	border-radius: 4px;
	border: 2px var(--button-color-2) solid;
}
.inline {
	text-decoration: none;
	color: #999;
	font-size: 90%;
}
.inline:hover {
	text-decoration: underline;
}
a + a { margin-left: 2em; }
.progress-bar--wrapper {
	border: 2px var(--progress-color) solid;
	padding: 2px;
}
.progress-bar--bar {
	height: 16px;
	background: var(--progress-color);
}

.wrapper {
	max-width: 1200px;
	margin: auto;
	padding:20px;
	box-sizing:border-box;
}
#processing_results {
	font-size: 70%;
	font-style: italic;
	color: #AbAbAb;
}
#processing_results td {
	padding: 0;
}
.menu_bar{
	background:black;
	color:white;
}
.menu_bar .wrapper{
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	padding:10px 20px;
}
.set-main,
.set-end{
	display:flex;
}
.menu_bar a{
	display:block;
	padding: 0 20px;
	color:white;
	text-decoration:none;
}
.menu_item.last{
	justify-self:flex-end;
}
#logo{
	width:180px;
	padding-right:20px;
}
#logo img{display:block;}

#system_mode{font-weight:bold;}

.switch-grid{
	display:grid;
	grid-template-columns:60px 1fr;
	grid-gap:2px 4px;
  min-width: 350px;
  max-width:100%;
}
.switch-grid .full-column{grid-row:span 2;}
.slider{
	-webkit-appearance:none;
	display:block;
	width:48px;
	height:30px;
	position:relative;
}
.slider:before,.slider:after{content:"";position:absolute;display:block;}
.slider:before{
	background:var(--font-soft);
	width:48px;
	height:28px;
	border-radius: 14px;
	transition:background 0.1s ease-in-out;
}
.slider:checked:before{
	background:var(--theme-color);
}
.slider:after{
	background:var(--page-color);
	width:22px;
	height:22px;
	border-radius: 14px;
	top:3px;left:3px;
	transition:left 0.05s ease-in-out;
}
.slider:checked:after{
	left:23px;
}



.tag {
	position:relative;
	display:inline-block;
	padding:2px 10px 2px 20px;
	background:var(--border-soft);
	border-radius:10px;
	font-size:70%;
}
.tag:before {
	content:"";
	display:block;
	width:12px;
	height:12px;
	border-radius:100%;
	background:var(--font-soft);
	position:absolute;
	left:4px;
	top:3px;
	box-sizing:border-box;
	border:2px var(--font-soft) solid;
}
.tag.primary {
	background:var(--theme-color);
	color:white;
}
.tag.primary:before {
	width:8px;height:8px;
	top:5px;left:6px;
	background:white;border:none;
}
.tag.open:before {
	background:transparent;
}
.tag-unfulfilled {
	filter:contrast(0.7) brightness(1.05) sepia(0.7) hue-rotate(5deg);
}
.tag-unfulfilled:before {
	background:transparent;
}
.tag-refunded {
	filter:contrast(0.7) brightness(1.05) sepia(0.7) hue-rotate(-45deg);
}

.order--card {
	background:white;
	border-radius:10px;
	padding:12px 18px;
	box-shadow:0 10px 10px rgba(209,210,217,0.25);
}
.order--card:has(a) {
	padding:0;
}
.order--card a{
	padding:12px 18px;
}
.order--card .material-icons{color:var(--theme-color);}

.orders-table{margin-top:2em;}
.orders-table a{text-decoration:none;color:inherit;}
.order--row{display:grid;grid-template-columns:1fr 193px 193px 193px;margin-bottom:1em;}

.messages--row{grid-template-columns:1fr 193px 193px;}

.fetching{pointer-events:none;opacity:0.7;}
.fetching:hover{cursor:wait;}


.order--block + .order--block{margin-left:1em;display:flex;align-items:center;}
.order--block:first-child{flex-grow:1;display:flex;align-items:center;}


.order-basic{display:flex;justify-content:space-between;flex-direction:column;line-height:1;flex-grow:1;}
.order-customer span{border-bottom:1px var(--font-soft) dashed;font-size:70%;color:var(--font-soft);}

.order-number{font-size:120%;}

.order-status{margin-left:4px;font-size:60%;text-transform:uppercase;font-weight:300;letter-spacing:1px;}

.order-action--button{
	display:grid;
	grid-template-columns:32px 1fr 24px;
	grid-gap:0 4px;
	width:100%;
	align-items:center;
}
.action--marker{
	grid-row:span 2;
	display:flex;
	align-items:center;
}
.action--marker span{
	display:block;
	width:24px;height:24px;
	position:relative;
	border:2px var(--border-soft) solid;
	border-radius:100%;
	display:flex;align-items:center;justify-content:center;
}
.action--marker span:before,.action--marker span:after{
	content:"";
	display:block;
	position:absolute;
}
.action--marker span:before{
	border-left:2px var(--border-soft) solid;
	height:10px;
	left:9px;
}
.action--marker span:after{
	border:5px transparent solid;
	border-left-color:var(--border-soft);
	left:12px;
}

.action--marker.in-progress span{
	border:2px var(--border-soft) solid;
}
.action--marker.in-progress span:before{
	width:12px;height:12px;
	border:2px var(--border-soft) dotted;
	border-radius:100%;
	left:auto;
}
.action--marker.in-progress span:after{content:none;}

.action--marker.ready-to-send + .action--title + .action--status{letter-spacing:-0.2px}
.action--marker.ready-to-send span{
	border:2px var(--button-color-1) solid;
}
.action--marker.ready-to-send span:before{
	width:12px;height:0;
	border:none;
	border-top:2px var(--button-color-1) solid;
	border-radius:0;
	left:auto;
}
.action--marker.ready-to-send span:after{
	width:8px;height:8px;
	border:none;
	border-top:2px var(--button-color-1) solid;
	border-right:2px var(--button-color-1) solid;
	transform:rotate(45deg);
	border-radius:0;
	left:auto;
}


.action--marker.sent span{
	border-color:transparent;
	background:var(--button-color-1);
}
.action--marker.sent span:before{
	border:none;
	border-radius:0;
	width:6px;
	border-bottom:2px white solid;
	border-right:2px white solid;
	transform:rotate(45deg);
	position:relative;top:-2px;
	left:auto;
}
.action--marker.sent span:after{content:none;}


.action--marker.not-required span{
	border-color:transparent;
	background:var(--button-color-1);
}
.action--marker.not-required span:before,.action--marker.not-required span:after{
	content:"";
	border:none;
	border-top:2px white solid;
	display:block;
	width:16px;height:0;
	border-radius:0;
	left:auto;
}
.action--marker.not-required span:before{
	transform:rotate(45deg);
}
.action--marker.not-required span:after{
	transform:rotate(-45deg);
}


.action--onwards{
	grid-column:3;
	grid-row:1 / span 2;
	display:flex;
	align-items:center;
	justify-content:flex-end;
}
.action--onwards span{
	display:block;
	width:8px;height:8px;
	position:relative;
	border-top:4px var(--border-soft) solid;
	border-right:4px var(--border-soft) solid;
	transform:rotate(45deg);
}

.action--title{
/*	font-weight:bold;
	text-transform:uppercase;
*/}
.action--status{
	color:var(--font-soft);
	font-size:70%;
}


.order-image {
	border: 1px var(--theme-color) solid;
	padding: 1px;
	width:204px;
	min-height:134px;
	margin:1em auto;
}
.order-image img{
	width:200px;
	max-width:100%;
	display:block;
}
.order-title{
	text-align:center;
	font-weight:bold;
	text-transform:uppercase;
}
.order-variant{
	text-align:center;
	/*border:1px var(--font-soft) solid;*/
	background:var(--border-soft);
	border-radius:20px;
	padding:8px 20px;
}

.button_pack{
	position:relative;
	display:inline-block;
}
.button_pack .button + .button{margin-left:0;}
.button_pack > .button{padding-right:44px}
.button_pack .toggle{
	background:var(--button-color-2);
	position:absolute;
	right:0;top:0;
	width:24px;
	height:100%;
	padding:0;
	z-index:1;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	border-left:1px white solid;
}
.button_pack .toggle span{
	border:4px transparent solid;
	border-top:6px white solid;
	border-bottom:none;
}
.button_pack--contents{
	display:none;
	position:absolute;
	top:100%;
	width:100%;
}
.button_pack--contents .button{
	width:100%;
}


@media(max-width:980px){
	.order--row{
	 	grid-template-columns:repeat(3,1fr);
	 	grid-gap:1em;
	 	margin-bottom: 2em;
	}
	.order--block:first-child{
		grid-column:span 3;
	}
	.order--block + .order--block{margin-left:0;}
	.order--block{
    height: 100%;
    box-sizing: border-box;
    display:flex;
    align-items:center;
	}
	.order--row .order--block:first-child{border-left:4px var(--button-color-1) solid;}
}

@media(max-width:600px){
	.order--block:nth-child(n){grid-column:1;}
	.order--row{grid-template-columns:1fr;}
	.order-number label{display:block;font-size:70%;padding:4px 0;}
	.no-mobile{display:none;}
	.managed-buttons .button{width:100%;margin-top:1em;}
	.popup-window{padding:20px;}
}


@media(max-width:480px){
	.order--row .order--block:first-child{
		display:grid;
		grid-template-columns:minmax(0,1fr) 90px;
	}
	.order-basic{grid-row:span 2;}
	.order-finance,.order-status{text-align:right;}
	.switch-grid{min-width:0;}
}



.symbol{}
.symbol--arrow-prev{
	display:inline-block;
	border:5px transparent solid;
	border-left-width:0;
	border-right-color:var(--button-color-1);
	margin-right:4px;
	position:relative;top:-1px;
	vertical-align:middle;
}
.symbol--arrow-next{
	display:inline-block;
	border:5px transparent solid;
	border-right-width:0;
	border-left-color:var(--button-color-1);
	margin-left:4px;
	position:relative;top:-1px;
	vertical-align:middle;
}
.high-flier,.orders-table .high-flier{
	color:var(--button-color-1);
	font-size:90%;
}

.boxes-grid{
	display:inline-grid;
	grid-template-columns:1fr 40px 1fr;
	grid-gap:12px;
}
.fake-input{
	display:inline-block;
  padding: 8px 0;
}

.new-user{
	display:grid;
	grid-template-columns:repeat(3, 1fr) auto;
	grid-gap:24px;
	align-items:center;
}
.new-user > div{position:relative}
.new-user label{
  position:absolute;
  z-index:2;
  text-transform:uppercase;
  font-size:60%;
  letter-spacing:0.4px;
  font-weight:700;
  top:3px;left:18px;
}
.new-user input:not([type='submit']){
	margin-top:0;
	width:100%;
  padding:12px 16px 8px 16px;
}

label.clearer{
	color:var(--text-colour);
	opacity:1;
	font-size:90%;
}
.translations-table{
}
.translations-table--body{
	display:grid;
	grid-gap:40px;
}
.translations-table--row{
	display:grid;
	grid-gap:20px;
}
.translations-table--record{
	display:grid;
	grid-template-columns:minmax(0, 200px) minmax(0, 2fr);
	align-items:center;
}

.aside-box--wrapper{
	display:flex;
	justify-content:flex-end;
}
.aside-box--wrapper p:first-child{
	margin-top:0;
}
.aside-box--wrapper p:last-child{
	margin-bottom:0;
}
.aside-box{
	background-color:var(--shaded-color);
	padding:20px;
}

#response{
	margin-top:1em;
	color:var(--font-soft);
	font-size:90%;
}


.master-layout,
.layout--grid-3,
.layout--grid-2{
	display:grid;
	grid-gap:20px;
}

.layout--grid-2{
	grid-template-columns:repeat(2, minmax(0, 1fr));
}
.layout--grid-3{
	grid-template-columns:repeat(3, minmax(0, 1fr));
}

#popup h4,
#modal h4{
	margin-bottom:0;
	font-weight:100;
}

.order__line-items{
	display:grid;
	grid-gap:8px;
}
.order__line-item{
	display:grid;
	grid-template-columns:100px 1fr 100px;
	grid-gap:20px;
	background-color:var(--page-color);
	align-items:center;
	padding-right:20px;
}
.order__totals{
	display:grid;
	grid-template-columns:1fr 1fr 100px;
	grid-gap:20px;
	background-color:var(--page-color);
	align-items:center;
	padding:0 20px;
}
.order__totals > div{
	padding:20px 0;
}

.order--total{
	font-weight:700;
}
.has-money{
	text-align:right;
}
.order--item-count{
	opacity:0.5;
	font-size:70%;
}



.line-item--image{
	position:relative;
}
.line-item--image img{display:block;}
.line-item--quantity{
	display:flex;
	width:20px;height:20px;
	box-sizing:border-box;
	align-items:center;
	justify-content:center;
	background:var(--secondary-color);
	color:white;
	font-size:70%;
	border-radius:4px;
	padding:2px;
	position:absolute;
	top:-6px;
	right:-6px;
	outline:2px white solid;
}
.line-item--title{
	font-weight:600;
}


.status-options{
	display:grid;
	grid-gap:8px;
}
.status-option{
	display:grid;
	grid-template-columns:24px 1fr 24px;
	grid-gap:20px;
	align-items:center;
	padding:8px;
	background-color:var(--page-color);
}
.status-option[selected]{
	background-color:var(--theme-color);
	color:white;
}
.status-option--icon,
.status-option--action{
	display:flex;
}