* {
    box-sizing: border-box;
	margin: 0px;
}

a {
	color: #2271b1;
}

.overflow-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
}

.text-right { text-align: right; }
.text-center { text-align: center; }

.hidden {
	display: none !important;
}

input:not([type="file"]),
textarea,
select {
	outline: none;
	border: 1px solid #ddd;
    padding: 3px 5px;
}

/*
	validation
*/

span.verified:before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
	margin-right: 0.25em;
}

span.verified.positive:before {
	color: #1ec21e;
	content: ""; /* f00c | checkmark */
}

span.verified.negative:before {
	color: red;
	content: ""; /* f00d | cross */
}

/*
	login/logout
*/

body.login-body {
	display: grid;
	grid-template-rows: 10% auto 10%;
	height: 100vh;
}

body.login-body header {
	background: linear-gradient(0deg, #999 2%, #ddd 2%);
	display: flex;
	justify-content: center;
}

body.login-body header .title {
	font-size: 2em;
	text-align: center;
	font-family: system-ui;
	align-self: center;
}

body.login-body .content {
	background: #eee;
}

body.login-body footer {
	background: linear-gradient(180deg, #999 2%, #ddd 2%);
}

.login-wrapper {
    width: max-content;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: relative;
	background: linear-gradient(90deg, #222 17px, #581329 17px);
}

.login-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.login-actions {
    margin: auto;
    width: max-content;
    margin-top: 1em;
}

.logout-button {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

/*
	page loading
*/

.page-content.loading {
	filter: opacity(0.5);
}

.page-content .loading-area {
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.page-content:not(.loading) .loading-area {
	display: none;
}

/*
	buttons/inputs
*/

.inline-button {
	margin: -2px;
}

.btn-base {
	font-size: 1.1em;
	border: 1px solid transparent;
	padding: 0.3em 0.5em;
}

.btn-base:hover {
	color: #eee;
    background: #333;
}

input[type="submit"],
input[type="button"] {
	font-size: 1.1em;
	border: 1px solid transparent;
	padding: 0.3em 0.5em;
}

input[type="submit"].flat,
input[type="button"].flat {
	padding: 0em 0.5em;
}

.header-buttons input[type="submit"],
.header-buttons input[type="button"] {
	padding: 0.1em 0.3em;
	margin: 0em;
}

.button-row {
	display: flex;
	align-items: center;
	grid-gap: 5px;
}

input[type="submit"].btn-primary,
input[type="button"].btn-primary {
	color: #eee;
    background: var(--color-primary);
}

input[type="submit"].btn-success,
input[type="button"].btn-success {
	color: #eee;
    background: #1ec21e;
}

input[type="submit"].btn-warning,
input[type="button"].btn-warning {
	color: #333;
    background: yellow;
}

input[type="submit"].btn-danger,
input[type="button"].btn-danger {
	color: #eee;
    background: red;
}

input[type="submit"]:hover,
input[type="button"]:hover {
	color: #eee;
    background: #333;
}

.login-text {
    color: #eee;
    font-family: system-ui;
    text-align: center;
    padding: 0.5em;
    margin-bottom: 0.5em;
    font-size: 1.1em;
}

.clickable {
	cursor: pointer;
}

.flex-right {
	display: flex;
	justify-content: right;
}

.flex-right.fr-m-s > *:not(:last-child) {
	margin-right: 5px;
}

.grid-list {
	display: grid;
	grid-row-gap: 5px;
}

.simple-config-table {
    display: grid;
    grid-template-columns: max-content auto;
    grid-column-gap: 1em;
    grid-row-gap: 0.25em;
}

.simple-config-table input[type="text"],
.simple-config-table input[type="password"] {
    width: 100%;
}

/*
	user tables
*/

.user-table {
    display: grid;
    grid-template-columns: max-content auto max-content;
    grid-column-gap: 1em;
    grid-row-gap: 0.25em;
}

.user-table [data-entry].active,
.user-table [data-entry].active + .user-value {
	background: #eee;
}

.user-table [data-entry],
.user-table [data-entry] + .user-value {
	padding: 0px 5px;
}

/*
	shop tables
*/

.shop-table {
    display: grid;
    grid-template-columns: max-content auto max-content;
    grid-column-gap: 1em;
    grid-row-gap: 0.25em;
}

.shop-table [data-entry].active,
.shop-table [data-entry].active + .shop-value {
	background: #eee;
}

.shop-table [data-entry],
.shop-table [data-entry] + .shop-value {
	padding: 0px 5px;
}

/*
	controls
*/

select {
    padding: 0.2em 0.5em;
}

textarea {
	width: 100%;
	min-height: 15em;
	border: 1px solid #eee;
	resize: none;
}

.product-image {
    width: 96px;
    height: 96px;
	border: 1px solid #eee;
}

.product-image img {
    width: 100%;
}

.max-height-v {
	height: max-content;
}

.vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.fa-btn {
    background: #eee;
	color: #333;
    padding: 0.5em;
}

.fa-btn.btn-transparent {
    background: transparent;
}

.fa-btn.btn-primary {
	color: #eee;
    background: var(--color-primary);
}

.fa-btn.btn-success {
	color: #eee;
    background: #1ec21e;
}

.fa-btn.btn-warning {
	color: #333;
    background: yellow;
}

.fa-btn.btn-danger {
	color: #eee;
    background: red;
}

.fa-btn:hover {
	color: #eee;
	background: #333;
}

.fa-btn.fa-dhl {
	padding: 0em 0.2em;
	font-size: 2em;
	color: red;
}

span.control-pre-span {
    font-size: 0.9em;
    background: #eee;
    color: #333;
    padding: 0px 0.5em;
    border: 1px solid #ddd;
}

/*
	position
*/

.p-relative { position: relative; }
.p-absolute { position: absolute; }

/*
	display
*/

.d-block { display: block; }
.d-inline { display: inline-block; }
.d-inline-block { display: inline-block; }
.d-grid { display: grid; }

.d-flex-center { display: flex; justify-content: center; }
.d-flex-right { display: flex; justify-content: right; }

.d-child-gap > *:not(:last-child) {
    margin-right: 0.2em;
}

/*
	grids
*/
.grid-50-50 { display: grid; grid-template-columns: 50% 50%; }
.grid-auto-max { display: grid; grid-template-columns: auto max-content; }
.grid-max-auto { display: grid; grid-template-columns: max-content auto; }
.grid-auto-auto { display: grid; grid-template-columns: auto auto; }
.grid-max-max { display: grid; grid-template-columns: max-content max-content; }
.grid-gap-5 { grid-gap: 5px; }
.grid-gap-10 { grid-gap: 10px; }

@media (min-width:480px) {
	.row { display: flex; }
	.row-2-1-1 { display: grid; grid-template-columns: 50% 25% 25%; }
	.row-3 { display: grid; grid-template-columns: auto auto auto; }
	.row-4 { display: grid; grid-template-columns: auto auto auto auto; }
}

/*
	sections
*/

section.active .section-header {
	background: #eee;
}

section.transparent {
	background: transparent;
}

.section-header.ul {
	border-bottom: 1px solid #333;
    padding-bottom: 0.6em;
}

.margin-vs {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.full-width {
	width: 100%;
}

/*
	currency
*/

.amount-negative {
	color: red;
}

.amount-positive {
	color: #1ec21e;
}

/*
	flex-tables
*/

.flex-table {
	border-collapse: collapse;
	background: white;
	position: relative;
}

.flex-table th {
	/* background: #333; */
	/* color: #fff; */
	border-bottom: 1px solid #ddd;
}

.flex-table th.sortable {
	cursor: pointer;
}

.flex-table th.sortable:hover {
	background: #555;
	color: #eee;
}

.flex-table th.sorted:after {
    font-family: "Font Awesome 5 Free";	
	color: var(--color-light-black);
	font-size: 0.75em;
	margin-left: 0.5em;
}

.flex-table th.sorted[data-direction="1"]:after {
	/*content: ' A-Z';*/
	/*content: "\f0de";*/
	content: "\f077";
}

.flex-table th.sorted[data-direction="-1"]:after {
	/*content: "\f0dd";*/
	content: "\f078";
}

.flex-table tr:nth-child(2n+0) {
	background: #eee;
}

.flex-table td {
	padding: 0.3em 0.5em;
}

.flex-table td:not(.important) {
	/* text-overflow: ellipsis; */
	/* overflow: hidden; */
}

.flex-table + .button-list {
	background: transparent;
	display: flex;
    justify-content: center;
	margin-top: 0.25em;
}

.flex-table + .button-list button {
	background: #777;
	color: #fff;
	font-size: 1.1em;
    border: 1px solid transparent;
    padding: 0.3em 0.5em;
}

.flex-table + .button-list button:not(:disabled) {
	cursor: pointer;
}

.flex-table + .button-list button:disabled {
	color: #eee;
	background: #333;
}

.flex-table + .button-list button:not(:last-child) {
	/* margin-right: 1px; */
}

.flex-table + .button-list button:not(:disabled):hover {
	color: #333;
    background: #eee;
}

.flex-table.loading {
	filter: opacity(0.5);
}

.flex-table .loading-block {
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.flex-table:not(.loading) .loading-block {
	display: none;
}

.flex-table-info {
	display: grid;
	grid-template-columns: max-content max-content auto;
	grid-gap: 0.5em;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.flex-table-progress {
	width: 100%;
	margin-top: 0.1em;
}

.flex-table-progress:not(.visible) {
	display: none;
}

/*
	forms
*/

.form-actions {
	margin-top: 0.5em;
}

/*
	orders
*/

.order-status-list {
	display: flex;
	grid-gap: 0.1em;
	cursor: default;
}

.order-status {
    padding: 0em 0.5em;
	font-size: 0.9em;
    line-height: 2em;
    color: #777;
    background: #e5e5e5;
    border-radius: 4px;
    /* border-bottom: 1px solid rgba(0,0,0,.05); */
    /* margin: -.25em 0; */
    cursor: inherit!important;
    white-space: nowrap;
    max-width: 100%;
    /* min-width: 4em; */
	text-align: center;
	border: 1px solid #bbb;
}

.order-status:hover {
	box-shadow: 2px 2px #aaa;
	top: -2px;
	left: -2px;
	position: relative;
}

h3 .shop-name { color: #777; }

.status-field { padding: 0em 0.5em; }

.status-pending { }
.status-processing { background: #c6e1c6; color: #5b841b; }
.status-on-hold { background: #f8dda7; color: #94660c; }
.status-completed { background: #c8d7e1; color: #2e4453; }
.status-cancelled { }
.status-refunded { }
.status-failed { background: #eba3a3; color: #761919; }

a.order-link {
	color: #2271b1;
	text-decoration: none;
}

/*
	woocommerce table
*/

table.woocommerce-articles {
	width: 100%;
	font-size: 13px;
	border-collapse: collapse;
	border: 1px solid #eee;
}

table.woocommerce-articles thead {
	background: #eee;
}

table.woocommerce-articles tbody tr {
    background: white none repeat scroll 0 0;
    border-bottom: 1px solid white;
	height: 3em;
}

table.woocommerce-articles td {
	padding: 5px 0.5em;
}

table.woocommerce-articles .item-name {
	margin: 0.5em 0em;
	font-weight: 500;
}
table.woocommerce-articles .item-image {
	width: max-content;
	display: inline-block;
	position: relative;
}
table.woocommerce-articles .item-image img {
    width: 64px;
}

.emphasis-heavy {
	font-weight: bold;
	color: red;
}

.item-image .full-view {
	display: none;
	border: 1px solid #ddd;

}

.item-image:hover .full-view {
    display: block;
    position: absolute;
    top: -32px;
    left: 32px;
    width: 256px;
    height: 256px;
    z-index: 100;    
}

span.engraving-value {
	font-size: 1.5em;
	line-height: 1.5em;
}

table.woocommerce-articles tr.options-info {
	background: #7f8c8d;
	color: #eee;
}
table.woocommerce-articles .options-info-header {
	background: white;
	color: #7f8c8d;
	font-weight: bold;
	width: max-content;
	padding: 0em 0.5em;
}

table.woocommerce-articles tr.item-article {
	overflow-wrap: anywhere;
}

table.woocommerce-articles tr.item-article td.option-line,
table.woocommerce-articles tr.options-info .option-line {
    display: grid;
    grid-template-columns: 50% 50%;
}
table.woocommerce-articles tr.item-shipping-line { }
table.woocommerce-articles tr.item-coupon-line td { padding: 0.5em; }
table.woocommerce-articles .info { }

table.woocommerce-articles .seperator { background: #ddd; height: 2px; }
table.woocommerce-articles .seperator td { padding: 0px; }

div.woocommerce-payment {
	font-size: 13px;
	border: 1px solid #eee;
	padding: 1em 0em;
}

div.coupon-list {
	padding: 0.5em;
}

table.woocommerce-pricing {
    width: 100%;
    justify-self: right;
	margin-right: 1em;
}

table.woocommerce-pricing td {
	text-align: right;
}

table.woocommerce-pricing .seperator { background: #ddd; height: 2px; }
table.woocommerce-pricing .seperator td { padding: 0px; }

/*
	grid
*/

.content-grid {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid-element {
	margin: 0.5em;
	background: #f9f9f9;
	border: 1px solid #ddd;
}

.content-grid .shop-name {
	text-align: center;
	font-weight: 500;
	padding: 0.4em 0em;
	background: #eee;
}

.shop-totals {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 0.2em;
	margin: 0.5em;
}

.shop-total-description {
	line-height: 2em;
}

.shop-totals a {
	text-decoration: none;
}

.shop-stats {
    padding: 0.5em;
	display: grid;
	grid-template-columns: max-content auto;	
}

.grid-element-label {
    font-weight: bold;
	font-size: 0.9em;
	color: #888;
	text-align: center;
}

.grid-element-value {
    font-size: 1.3em;
    position: relative;
	text-align: center;
}

.stats-block {
	padding: 0.5em;
	margin: 5px;
	background: white;
	border: 1px solid #eee;
}

/*
	messages
*/

.message-table {
	max-height: 20em;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	grid-gap: 1.2em;
}

.message-table .message:not() {
	
}

.message-table .message-header {
	padding: 0.3em;
	font-size: 0.9em;
	background: #ccc;
}

.message-table .message-timestamp:after {
	content: ' - ';
}

.message-table .message-body {
	padding: 0.3em;
	word-break: break-word;
	white-space: pre;
	background: #eee;
}

.middle-header {
	background: #eee;
	padding: 0.3em;
}

/*
	dashboard
*/

.dash-grid {
	grid-gap: 0.5em;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}