* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif; font-size: 1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
*:focus{ outline: none; }

body { position: relative; font-family: 'Overpass', sans-serif; font-weight: 400; font-size: 0.9rem; margin: 0; padding: 0; display: flex; flex-direction: row; background: #EAEEF3; align-items: stretch; min-height: 100vh;}

body.login{ margin: 1.2rem; }

body.no_scroll { overflow: hidden !important; }

p, a , h1, h2, h3, h4, h5, h6 { font-weight: 400; font-size: 1rem; display: block; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; color: #333}
h3 { font-size: 1.3rem; margin-bottom: 1.25rem; }

a:focus, input:focus, select:focus, option:focus, textarea:focus, button:focus, [contenteditable="true"]:focus {
    outline: none;
}

a { color: #e93b5c; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; text-decoration: none; }
a:hover { color: #8a0f26; text-decoration: underline; }
hr { border-width: 1px; border-color: rgba(233, 59, 92, 0.2); }
select { padding: 1rem; border: 1px solid #e8ebf1; border-radius: 0; outline: none; color: #333; margin-bottom: 1rem; outline: none; outline-width: 0; outline-color: transparent; box-shadow: none; outline-style: none; }
option { outline: none; background-color: white; border: none; outline: none; outline-width: 0; outline-color: transparent; box-shadow: none; outline-style: none; padding: 1rem; font-size: 1.2rem; }
input, input[type="number"] { padding: 1rem; border: 1px solid #cecece; margin-bottom: 1rem; color: #333; display: block; width: 100%; }
input [type=checkbox] { border: 1px solid #ececec; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; margin: 0; padding: 0; width: 32px; height: 32px; }
input:disabled, select:disabled { background-color: #ececec; color: #aeaeae; }
textarea { padding: 1rem; border: 1px solid #cecece; margin-bottom: 1rem; color: #333; display: block; width: 100%; min-height: 250px; }

button, a.button, input[type="submit"] { -moz-appearance: none; -webkit-appearance: none; background-color: #e93b5c; box-sizing: border-box; margin: 0em; font-size: 1rem; padding: 1rem 1.25rem; border: 2px solid #e93b5c; color: white; border-radius: 3px; cursor: pointer; }
button:hover, a.button:hover,  input[type="submit"]:hover { background-color: #8a0f26; border-color: #8a0f26; text-decoration: none; }
button:disabled, a.button:disabled, input [type=submit]:disabled { background-color: #b3b3b3 !important; border-color: #b3b3b3 !important; }

.success:before { display: flex; align-items: center; content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: bold; margin-right: 1rem; font-size: 1.1rem; color: #00e600; }
.fail:before { display: flex; align-items: center; content: "\f057"; font-family: "Font Awesome 5 Free"; font-weight: bold; margin-right: 1rem; font-size: 1.1rem; color: #b30000; }

aside { width: 300px; }
.content-wrapper { flex: 1; }

div.login { max-width: 400px; background-color: #ffffff; box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3); margin: 100px auto auto; border-radius: 5px; display: none; width: 100%; }
div.login.active{ display: block; }
div.login h1 { text-align: center; color: #5b6574; font-size: 1.5rem; padding: 1.2rem 0 1.2rem 0; border-bottom: 1px solid #dee0e4; }
div.login form { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 1rem; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
div.login .login-field { display: flex; align-items: center; margin-bottom: 1rem; width: 100%; padding: 0 1rem; }
div.login .login-field:last-of-type { margin-bottom: 0rem; }
div.login form label { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-color: #e93b5c; color: #ffffff; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
div.login form input[type="password"], .login form input[type="text"] { height: 50px; border: 1px solid #dee0e4; padding: 0 1rem; border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 100%; margin-bottom: 0px; }
div.login form input[type="submit"], div.login button { width: 100%; padding: 1rem; margin-top: 1rem; background-color: #e93b5c; border: 0; cursor: pointer; font-weight: bold; color: #ffffff; transition: background-color 0.2s; border-radius: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-bottom: 0px; }
div.login form input[type="submit"]:hover, div.login button:hover { background-color: #b81432; transition: background-color 0.2s; }
div.login .login-messages { display: flex; flex-direction: row; align-items: baseline; box-sizing: border-box;  }
div.login .login-messages p { color: red; padding-right: 1rem; box-sizing: border-box; }
div.login .login-messages i { color: red; width: 50px; padding-left: 1rem; box-sizing: border-box; }
div.login.progress { display: none; }
div.login.progress button { margin-top: 0; }
div.login.progress p { text-align: center; }
div.login.progress.active { display: block; }
div.login .woo-loader { box-shadow: none; }
div.login .login-response hr {margin: 1rem 25%; }
div.login .login-response p { display: flex; margin-bottom: 1rem; text-align: left; font-weight: normal; }
div.login .login-response p:last-of-type { display: flex; margin-bottom: 0; }

#nav-bar-side, .nav { position: relative; background: #0c1427; color: #0c1427; }
.nav .logo { position: relative; text-align: left; padding: 1rem; display: flex; flex-direction: row; align-items: center; }
.nav .logo img { position: relative; max-height:32px; max-width:100%; display: block; margin-right: auto; }
.nav .logo a { width: auto; display: none; }
.nav .logo i { font-size: 1.75rem; }
.nav .nav-items { padding: 1rem; display: block; }
.nav ul { list-style-type: none; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0px; margin-bottom: 2rem; }
.nav li { display: flex; align-items: center; position: relative; margin-bottom: 1rem;}
.nav li.active a { color: #e93b5c }
.nav li.active:before { content: ''; width: 3px; height: 26px; background: #e93b5c; position: absolute; left: -20px; }
.nav a { color: #bfc3ce; padding: 0; white-space: nowrap; text-decoration: none; display: flex; flex-direction: row; align-items: baseline; width: 100%; }
.nav a:before { font-family: "Font Awesome 5 Free"; display: inline-block; padding-right: 1rem; vertical-align: middle; font-weight: 900; margin-bottom: 0.25rem; }
.nav a.dashboard:before { content: "\f3fd"; }
.nav a.new:before { content: "\f217"; }
.nav a.due-soon:before { content: "\f017"; }
.nav a.processing:before { content: "\f2f1"; }
.nav a.completed:before { content: "\f14a"; }
.nav a.in-stock:before { content: "\f54e"; }
.nav a.out-of-stock:before { content: "\f146"; }
.nav a.image-library:before { content: "\f302"; }
.nav a.fulfilment-slots:before { content: "\f07a"; }
.nav a.nav-opening-hours:before { content: "\f017"; }
.nav a.server-config:before { content: "\f013"; }
.nav a.printer-settings:before { content: "\f02f"; }
.nav a.website-login-settings:before { content: "\f2c2"; font-weight: normal; }
.nav a.profile-logout:before { content: "\f2f5"; }
.nav a:hover { color: #e93b5c; }
.nav li a .counts { display: block; margin-left: auto; font-size: 1rem; }
.nav h3 { color: white; text-transform: uppercase; margin-top: 1rem; margin-bottom: 1rem; }

.nav-top { display: flex; flex-direction: row; align-items: center; background-color: white; border-bottom: 1px solid #344258; height: auto; overflow: hidden; padding: 1rem; color: #666; }
.nav-top > div { padding-right: 40px; }
.nav-top .connection-status { display: flex; flex-direction: column; }
.nav-top .connection-status p { display: block; position: relative; }
.nav-top .connection-status a { display: inline-block; font-size: 0.9rem; }
.nav-top .connection-status .website { color: red; margin-bottom: 5px; font-size: 0.9rem; }
.nav-top .connection-status .website span { padding-right: 1rem; }
.nav-top .connection-status .website span:before { content: '\f057'; font-family: "Font Awesome 5 Free"; display: inline-block; color: red; }
.nav-top .connection-status .website.connected { color: green; }
.nav-top .connection-status .website.connected span:before { color: green; content: '\f058'; }
.nav-top .connection-status .connection { color: red; font-size: 0.9rem; }
.nav-top .connection-status .connection span { padding-right: 1rem; }
.nav-top .connection-status .connection span:before { content: '\f057'; font-family: "Font Awesome 5 Free"; display: inline-block; color: red; font-weight: bold; }
.nav-top .connection-status .connection.synched { color: green; }
.nav-top .connection-status .connection.synched span:before { color: green; content: '\f02f'; }
.nav-top .connection-status .init { color: green; }
.nav-top .connection-status .init span { padding-right: 1rem; }
.nav-top .connection-status .init span:before { display: inline-block; font-family: "Font Awesome 5 Free"; color: green; font-weight: bold; content: '\f1ce'; -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; }

.nav-top .time { margin-left: auto; text-align: center; }
.nav-top .time p.time{ font-size: 1.5rem; }
.nav-top .time p.date{ font-size: 0.8rem; }

.nav-top .notifications { display: none; }
.nav-top .notification { position: relative; padding: 1rem; background-color: #666; color: white;}
.nav-top .notification p { position: relative; padding-right: 1rem; background-color: #666; color: white;}
.nav-top .notification:after {display: inline-block; content: "\f0f3"; color: white; font-family: "Font Awesome 5 Free";  }

.nav-top .user-profile { display: flex; flex-direction: row; align-items: center; margin-left: auto; }
.nav-top .user-profile img { border-radius: 50%; max-width: 40px; max-height: 40px}
.nav-top .user-profile .text { font-family: opensans_semibold,sans-serif; margin-right: 1rem;  }
.nav-top .user-profile .text p { margin-bottom: 5px; }
.nav-top .user-profile .text small { padding: 0; margin: 0; font-size: 0.75rem; line-height: 1.3; font-family: opensans_semibold,sans-serif; color: #999; text-align: left; display: block; }
.content { padding: 1rem; }

.content .dashboard { background-color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 1rem; margin-bottom: 1rem; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
.content .dashboard-item { text-align: left; }

.woo-loader { background-color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: none; flex-direction: column; align-items: center; justify-content: space-between; padding: 1rem; max-width: 360px; margin: auto; margin-bottom: 1rem; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);}
.woo-loader.no-margin { margin: 0 !important; }
.woo-loader.active{ display: flex; }
.woo-loader.full-width { max-width: none; }
.woo-loader i { font-size: 150px; margin-bottom: 1rem; color: #e93b5c; }
.woo-loader p, .woo-order-no-results p { font-size: 1rem; font-weight: bold; color: #e93b5c; }

.woo-order, .woo-order-no-results-wrapper { background-color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 1rem; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
.woo-order-no-results-wrapper { display: none; }
.woo-order-no-results-wrapper.active { display: block; }
.woo-order-details {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 1rem;
  gap: 1rem;
  grid-gap: 1rem;
}
.woo-order-details > div {
  padding: 0.25rem;
}
.woo-order .fulfillment-type{ min-width: 70px; text-align: center; }
.woo-order p.order-no { font-size: 1.75rem; }
.woo-order p.order-items { font-size: 0.875rem; }
.woo-order .woo-order-time { padding: 1rem 1.2rem; border-top: 1px solid #cecece; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
.woo-order .woo-order-time.due { background-color: #fad1d9; }
.woo-order .woo-order-time.overdue { background-color: #e93b5c; }
.woo-order .woo-order-time.overdue a, .woo-order .woo-order-time.overdue span { color: white; }
.woo-order .woo-order-time.overdue a:hover, .woo-order .woo-order-time.overdue span:hover { color: #ececec; }
.woo-order .woo-order-time p { font-size: 0.75rem; width: 100%; display: flex; flex-direction: row; }
.woo-order .woo-order-time a { text-decoration: none; color: #333; font-size: 0.875rem; width: 100%; }
.woo-order .woo-order-time a.arrow { margin-left: auto; width: auto; }
.woo-order .woo-order-time a:hover { color: #e93b5c }
.woo-order .woo-order-time span:after { content: '\f078'; font-family: "Font Awesome 5 Free"; padding-left: 0.75rem; font-weight: bold; }
.woo-order .woo-order-time span.active:after { content: '\f077'; }
.woo-order .delivery-info .contact-1 { font-size: 0.875rem; }
.woo-order .delivery-info .contact-2 { font-size: 1.3rem; font-weight: bold; }
.woo-order .delivery-info .contact-3 { font-size: 0.75rem; }
.woo-order .fulfillment-type i { font-size: 2rem; }
.woo-order .price { text-align: center; }
.woo-order .price p { font-size: 1.5rem; margin: 0; padding: 0; }
.woo-order .price p.sub-price { font-size: 0.875rem; margin: 0; padding: 0; }
.woo-order .time { text-align: center; }
.woo-order .date-as-day { font-size: 0.875rem; }
.woo-order .date-as-time { font-size: 18px; }
.woo-order .date-as-date { font-size: 10px; }
.woo-order .action-buttons { display: flex; flex-direction: row; align-items: center; justify-content: center;}
.woo-order .action-buttons button { margin: 0px 20px; color: white; background-color: #e93b5c; padding: 10px; border-radius: 3px; }
.woo-order .action-buttons i { font-size: 24px; }
.woo-order .woo-order-additional-details { border-top: 1px solid #cecece; padding: 1rem; display: none; }
.woo-order .woo-order-additional-details .product { background-color: #dedede; background-color: rgba(222, 222, 222, 0.4); border: 1px solid #cecece; border-color: rgba(206, 206, 206, 0.4); margin-bottom: 1rem; border-radius: 3px; }
.woo-order .woo-order-additional-details .product:last-of-type { margin-bottom: 0px; }
.woo-order .woo-order-additional-details .product h3 { font-size: 18px; margin: 0px; padding: 10px; font-weight: bold; border-radius: 3px; }
.woo-order .woo-order-additional-details .product-add-ons { background-color: white; padding: 10px; border-radius: 0px 0px 3px 3px; }
.woo-order .woo-order-additional-details .product-add-ons h3 { font-size: 1rem; font-style: italic;  }
.woo-order .woo-order-additional-details .product-add-ons p { font-size: 1rem; padding: 0px 10px 10px 30px; }
.woo-order .woo-order-additional-details .product-add-ons p:last-of-type { padding-bottom: 0px; }
.woo-order .woo-order-additional-details .customer-notes { margin: 20px 0px 0px; padding: 1rem; background-color: #e93b5c; border-radius: 3px;}
.woo-order .woo-order-additional-details .customer-notes p.note-header { color: white; font-weight: bold; padding-bottom: 10px; }
.woo-order .woo-order-additional-details .customer-notes p.note-body { color: white; }
.woo-orders-wrapper .order-filter { display: flex; flex-direction: row; align-items: stretch; background-color: white; margin-bottom: 1rem; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
.woo-orders-wrapper .order-filter i { margin-bottom: 0px; padding: 1rem; background-color: #e93b5c; color: white; }
.woo-orders-wrapper .order-filter select { margin-bottom: 0px; margin: 0px; border: none; border-left: 1px solid #cecece; }
.woo-orders-wrapper .order-filter input { margin: 0px; flex-grow: 1; padding: 1rem 1.25rem; border: none; padding-left: 1rem; border-radius: 0px; }

.products-wrapper .sync-products-first-run, .products-wrapper .sync-products-cache-timeout { background-color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 1rem; padding: 1rem; text-align: center; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
.products-wrapper .sync-products-first-run p, .products-wrapper .sync-products-cache-timeout p { font-size: 24px; margin-bottom: 1rem; }
.products-wrapper .sync-products-cache-timeout i { font-size: 42px; margin-bottom: 1rem; }
.products-wrapper .sync-products-cache-timeout button { display: none; margin: auto; }
.products-wrapper .sync-products-cache-timeout .refresh-page { display: none; }
.products-wrapper .add-new-product { margin-bottom: 20px; }
.products-wrapper .add-new-product button { border-radius: 5px; }
.products-wrapper .add-new-product i { padding-right: 10px }
.products-wrapper .woo-product-details { background-color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 1rem; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
.products-wrapper .woo-product-details .header { display: flex; flex-direction: row; align-items: center; padding: 1rem; gap: 1rem; }
.products-wrapper .woo-product-details .header .product-info { margin-right: auto; }
.products-wrapper .woo-product-details .header .product-image-and-title { display: flex; gap: 20px; }
.products-wrapper .woo-product-details .header .product-title-and-description { flex: 4; }
.products-wrapper .woo-product-details .header .product-name { font-size: 24px; font-weight: bold; margin-bottom: 0.625rem; }
.products-wrapper .woo-product-details .header .product-image { width: 200px; height: 200px; }
.products-wrapper .woo-product-details .header .product-image img { width: 100%; height: 100%; }
.products-wrapper .woo-product-details .header .product-description { font-size: 18px; }
.products-wrapper .woo-product-details .header .product-extras { text-align: right; padding: 20px; border-radius: 5px; min-width: 300px;}
.products-wrapper .woo-product-details .header .product-price { font-size: 28px; font-weight: bold; width: 100%; border-radius: 5px; }
.products-wrapper .woo-product-details .header .product-sale-price { display: none; font-size: 28px; font-weight: bold; width: 100%; color: red; border-radius: 5px; }
.products-wrapper .woo-product-details .header .product-extras.on-sale .product-price { text-decoration: line-through; }
.products-wrapper .woo-product-details .header .product-extras.on-sale .product-sale-price { display: block; }
.products-wrapper .woo-product-details .header .product-price del { font-size: 12px; color: red; }
.products-wrapper .woo-product-details .header .product-price ins { text-decoration: none;}
.products-wrapper .woo-product-details .header .product-stock { font-size: 0.875rem; font-style: italic; }
.products-wrapper .woo-product-details .header .product-category { font-size: 0.875rem; font-style: italic; }
.products-wrapper .woo-product-details .edit-product-header { padding: 0.625rem 1.25rem; border-top: 1px solid #cecece; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
.products-wrapper .woo-product-details .edit-product-header p { width: 100%; display: flex; flex-direction: row; gap: 20px; }
.products-wrapper .woo-product-details .edit-product-header a { text-decoration: none; color: #333; font-size: 21px; display: flex; gap: 10px; align-items: center; font-weight: bold; }
.products-wrapper .woo-product-details .edit-product-header a.delete-button { margin-left: auto; }
.products-wrapper .woo-product-details .edit-product-header a.arrow { margin-left: auto; width: auto; }
.products-wrapper .woo-product-details .edit-product-header a:hover { color: #e93b5c }
.products-wrapper .woo-product-details .edit-product-header i { font-size: 21px; }
.products-wrapper .woo-product-details .edit-product-header span:after { content: '\f078'; font-family: "Font Awesome 5 Free"; padding-left: 1rem; font-weight: bold; }
.products-wrapper .woo-product-details .edit-product-header span.active:after { content: '\f077'; }
.products-wrapper .woo-product-details .stock-control { border-top: 1px solid #cecece; padding: 1rem; display: none; }
.products-wrapper .woo-product-details .stock-control hr { border: none; border-top: 1px solid #cecece; padding-bottom: 1rem; border-color: rgba(206, 206, 206, 0.5); }
.products-wrapper .woo-product-details .stock-control-warning { font-style: italic; margin-bottom: 1rem; }
.products-wrapper .woo-product-details .stock-control-warning span { font-weight: bold; }
.products-wrapper .woo-product-details .stock-control-basic { margin-bottom: 0.625rem; }
.products-wrapper .woo-product-details .stock-advanced-controls-container { display: flex; flex-direction: row; align-items: center; min-height: 40px; margin-bottom: 0.625rem; }
.products-wrapper .woo-product-details .stock-control-advanced { margin-bottom: 0.625rem; }
.products-wrapper .woo-product-details .stock-advanced-controls { margin-bottom: 29px; cursor: pointer; font-size: 1rem; }
.products-wrapper .woo-product-details .stock-advanced-controls-container label { font-size: 1rem; font-style: italic; color: #333; -webkit-user-select:none; -webkit-touch-callout:none; -ms-user-select:none; -moz-user-select:none; user-select:none; }
.products-wrapper .product-filter { display: flex; flex-direction: row; align-items: stretch; background-color: white; margin-bottom: 1rem; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
.products-wrapper .product-filter i { margin-bottom: 0px; padding: 1rem; background-color: #e93b5c; color: white; }
.products-wrapper .product-filter select { margin-bottom: 0px; margin: 0px; border: none; border-left: 1px solid #cecece; }
.products-wrapper .product-filter input { margin: 0px; flex-grow: 1; padding: 1rem 1.25rem; border: none; padding-left: 1rem; border-radius: 0px; }
.products-wrapper .bulk-update-contents { display: none; background-color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-top: 20px; margin-bottom: 1rem; padding: 1rem; text-align: left; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
.products-wrapper .bulk-update-confirmation-buttons { text-align: left; }
.products-wrapper .bulk-update-confirmation-buttons button { margin-right: 1.25rem; }
.products-wrapper .bulk-update-confirmation-buttons button:last-of-type { margin-right: 0px; }
.products-wrapper .product-bulk-update-message { font-weight: bold; margin-bottom: 1rem; }
.products-wrapper p.product-bulk-update { font-style: italic; margin-bottom: 5px; }
.products-wrapper p.product-bulk-update:last-of-type { margin-bottom: 1rem; }
.woo-product.variable .edit-product-header { background-color: #fce8ec; }

.woo-product-image-wrapper { position: relative; }
.woo-product-image-wrapper .delete-image { position: absolute; top: 0; right: 0; margin: 20px; background-color: white; padding: 5px; border-radius: 5px; border: 1px solid #cccccc; }
.woo-product-image-wrapper .delete-image i { font-size:20px; }
.smeehee_popup_wrapper #confirm_image_delete_message { text-align: center; margin-bottom: 1rem; }
.smeehee_popup_wrapper .confirm-buttons { display:flex; gap: 2rem; width: 100%; }
.smeehee_popup_wrapper .confirm-buttons button { width: 100%; }
.smeehee_popup_wrapper #confirm_image_delete_message img { max-width: 400px; max-height: 400px; border: 1px solid #cccccc; }

.delivery-slot, .opening-hours {
  background-color: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 1rem;
  text-align: center;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}

.delivery-slot-header, .opening-hours-header {
  display: flex;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #e93b5c;
  text-align: left;
  padding: 1rem;
}

.delivery-slot-header h3, .opening-hours-header h3 {
  font-weight: bold;
  color: white;
  margin-bottom: 0;
  margin-right: auto;
  font-size: 1.75rem;
}

.delivery-slot-header a {
  color: white;
  font-weight: bold;
}

.delivery-slot-body, .opening-hours-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-bottom: 1rem;
  text-align: center;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  padding: 1rem;
}

.delivery-slot-day-header {
  display: flex;
  gap: 1rem;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #034a4a;
  text-align: left;
  padding: 1rem;
}

.delivery-slot-day-header h3 {
  font-weight: bold;
  color: white;
  margin-bottom: 0px;
  font-size: 1rem;
  margin-right: auto;
}

.delivery-slot-day-header button {
  padding: 0px;
  color: #e93b5c;
  background-color: transparent;
  border: none;
}

.delivery-slot-day-header button:hover {
  background-color: transparent;
  color: #8a0f26;
}

.delivery-slot-day-header button.power-off {
  color: #cccccc;
}

.delivery-slot-day-header button.power-off:hover {
  color: #aaaaaa;
}

.delivery-slot-day-body {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-bottom: 1rem;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  padding: 1rem;
}

.delivery-slot-template {
  padding: 1rem;
  border-bottom: 1px solid #f6bbc7;
}

.delivery-slot-template.slot_disabled p {
  color: #cccccc;
}

.delivery-slot-template:first-of-type {
  border-top: 1px solid #f6bbc7;
}

.delivery-slot-template:nth-child(even) {
  background-color: #fce8ec;
}

.delivery-slot-template:last-of-type {
  margin-bottom: 0;
}

.delivery-slot-template, .delivery-slot-template-main-items, .delivery-slot-template-main-items .time {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  font-weight: bold;
}

.delivery-slot-template-main-items {
  gap: 1rem;
}

.delivery-slot-template {
  flex-direction: column;
}

.delivery-slot-template-time .time:before {
  display: flex;
  align-items: baseline;
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  margin-right: 0.5rem;
}

.delivery-slot-template-time p {
  margin-bottom: 0;
}

.delivery-slot-template-available-slots {
  margin-right: auto;
}

.delivery-slot-button {
  padding: 0px;
  color: #e93b5c;
  background-color: transparent;
  border: none;
}

.delivery-slot-button:hover {
  background-color: transparent;
  color: #8a0f26;
}

.delivery-slot-template-meta-data {
  width: 100%;
  margin-bottom: 10px;
}

.delivery-slot-template-meta-item {
  padding: 0.5rem;
  border-bottom: 1px solid #f6bbc7;
}

.delivery-slot-template-meta-item:nth-child(odd) {
  background-color: white;
}

.delivery-slot-template-meta-item:nth-child(even) {
  background-color: #fce8ec;
}

.delivery-slot-template-meta-item:first-of-type {
  margin-top: 1rem;
  border-top: 1px solid #f6bbc7;
}

.delivery-slot-template-meta-item:last-of-type {
  margin-bottom: 0.5rem;
}

.delivery-slot-template-meta-item p {
  text-align: left;
}

.delivery-slot-template-meta-item .meta-zone {
  font-weight: bold;
}

.delivery-slot-template-meta-item .meta-method, .delivery-slot-template-meta-item .meta-slot-group {
  font-style: italic;
}

#shipping_zones_for_filter {
  padding: 1rem 0;
}

.shipping-zone {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.5rem;
  border-bottom: 1px solid #f6bbc7;
}

.shipping-zone:first-of-type {
  border-top: 1px solid #f6bbc7;
}

.shipping-zone:nth-child(even) {
  background-color: #fce8ec;
}

.shipping-zone p {
  font-weight: bold;
  margin-bottom: 0 !important;
}

.shipping-zone label {
  font-style: italic;
  margin-bottom: 0 !important;
}

.shipping-zone p {
  margin-right: auto;
}

.shipping-zone input, .shipping-zone select {
  padding: 0.5rem;
  font-size: 1rem;
  margin-bottom: 0 !important;
}

.fulfilment_slot_order {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0.25rem 0;
  text-align: left;
}

.slot_disabled .fulfilment_slot_order div {
  color: #cccccc;
}

.fulfilment_slot_orders {
  width: 100%;
}

.fulfilment_slot_orders > div:first-of-type {
  margin-top: 1rem;
}

.fulfilment_slot_order .order-number {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-right: auto;
}

.slot_disabled .fulfilment_slot_order .order-number:before {
  color: #cccccc;
}

.fulfilment_slot_order .order-number:before {
  display: flex;
  align-items: baseline;
  content: "\f805";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  margin-right: 0.5rem;
}

.opening-hours-body {
  display: block;
  text-align: left;
}

.opening-hours-body p {
  margin-bottom: 1rem;
}

.opening-hours-body button {
  margin-right: 1rem;
}

.opening-hours-body button:last-of-type {
  margin-right: 0;
}

.opening-hour {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.opening-hour select {
  margin: 0 0.5rem;
}

.opening_hours_message {
  background-color: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 1rem;
  text-align: center;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  text-align: left;
  padding: 1rem;
}

.restaurant_closed, .restaurant_closed_message {
  margin-bottom: 0.25rem;
}

.restaurant_closed label {
  font-weight: bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.restaurant_closed_message textarea {
  min-height: 150px;
  width: 100%;
  border: 1px solid #cecece;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 0.5rem;
}

.login-settings-wrapper { display: flex; align-items: center; justify-content: center; background-color: white; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 1rem; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
.login-settings { flex: 1; padding: 1rem; }
.login-settings .login-form { margin: 20px 0px 0px; }
.login-settings .login-form p { margin-bottom: 5px; font-style: italic; font-weight: bold; }
.login-settings .login-form input { padding: 15px 10px; border: 1px solid #cecece; margin-bottom: 1rem; min-width: 400px; }
.login-settings .login-form textarea { padding: 15px 10px; border: 1px solid #cecece; min-width: 400px; min-height: 200px; }
.login-settings h3 { font-weight: bold; }
.login-settings hr { margin: 20px 0px; }
.login-settings .notification-wrapper { display: none; margin-top: 20px; }
.login-settings .notification { font-size: 0.875rem; }

.page-notification {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: white;
  margin-bottom: 1rem;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}

.page-notification i {
    margin-bottom: 0px;
    padding: 10px;
    background-color: DarkBlue;
    color: white;
}

.page-notification i:before {
  display: flex;
  align-items: center;
}

.page-notification p {
    font-weight: bold;
    margin-bottom: 0px;
    padding: 10px;
}

/***
** Smeehee Delivery Slots - Popups
***/

.smeehee_popup_wrapper {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0, 0.7);
  z-index: 999;
}
.smeehee_popup_wrapper.active {
  display: flex;
}
.smeehee_popup {
  background-color: white;
  min-width: 450px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-width: 100vw;
}

#edit_product_variations .smeehee_popup {
  min-width: 40vw;
}

.smeehee_popup_header {
  background-color: #e93b5c;
  display: flex;
  align-items: baseline;
  padding: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  flex-shrink: 0;
}
.smeehee_popup_header h3 {
  margin: 0px;
  padding: 0px;
  color: white;
}
.smeehee_popup_header button {
  margin: 0px;
  padding: 0px;
  margin-left: auto;
  min-width: 32px;
  min-height: 32px;
}
.smeehee_popup_header i {
  font-size: 18px;
}
.smeehee_popup_content {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}
.smeehee_popup_content p, .smeehee_popup_content input {
  margin-bottom: 1rem;
}
.smeehee_popup_content input {
  display: block;
  width: 100%;
  border-radius: 6px;
}
.smeehee_popup_content textarea {
  border-radius: 6px;
}
.smeehee_popup_content span {
  font-weight: bold;
}

.smeehee_popup_content .woo-loader {
  display: block;
  text-align: center;
  padding: 0px;
  box-shadow: none;
  margin-bottom: 0px;
}

.smeehee_popup_content .woo-loader p {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.smeehee_popup_content .edit_product_wrapper {
  display: flex;
  gap: 20px;
  min-width: 1000px;
}

.smeehee_popup_content .product-attribute-option {
  margin-bottom: 1rem;
}

.smeehee_popup_footer { 
  flex-shrink: 0; 
}

.smeehee_popup_footer button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  width: 100%;
  font-weight: bold;
}

#edit_product_options .smeehee_popup_content button.add_item, #edit_product_variations .smeehee_popup_content button.add_item {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
}

.smeehee_popup_content .edit_product_wrapper div:first-of-type { flex: 2; min-width: 900px; }
.smeehee_popup_content .edit_product_wrapper textarea { min-height: 348px; }
.smeehee_popup_content .edit_product_wrapper select, .smeehee_popup_content .woo-product-variation-wrapper select { width: 100%; }
.smeehee_popup_content .edit_product_wrapper div:last-of-type { flex: 1; min-width: 300px; }
.smeehee_popup_content .edit_product_wrapper button, .smeehee_popup_content .edit_product_wrapper button  { width: 100%; }

.smeehee_popup_content .woo-product-attribute-wrapper, .smeehee_popup_content .woo-product-variation-wrapper {
  margin-bottom: 1rem;
  border: 1px solid #ececec;
  border-radius: 5px;
}

.smeehee_popup_content .woo-product-attribute-wrapper:last-of-type, .smeehee_popup_content .woo-product-variation-wrapper:last-of-type {
  margin-bottom: 0rem;
}

.smeehee_popup_content .add_product_variations_wrapper {
  display: flex;
  gap: 1rem;
}

.smeehee_popup_content .woo-product-attribute-header, .smeehee_popup_content .woo-product-variation-header {
  display: flex;
  background-color: #fad1d9;
  padding: 1rem;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  align-items: center;
}

.smeehee_popup_content .woo-product-variation-title {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.smeehee_popup_content .woo-product-variation-title p {
  margin: 0;
  padding: 0;
}

.smeehee_popup_content .product-attribute-option {
  display: flex;
}

.smeehee_popup_content .woo-product-attribute-header button, .smeehee_popup_content .product-attribute-option button { 
  border-radius: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

#edit_product_variations .smeehee_popup_content .woo-product-variation-header button {
  margin-left: auto;
  padding: 6px;
}

.smeehee_popup_content .woo-product-attribute-header input, .smeehee_popup_content .product-attribute-option input {
  border-radius: 0px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; 
}

.smeehee_popup_content .woo-product-attribute-header input, .product-attribute-option-wrapper input {
  margin-bottom: 0;
}

.product-attribute-option-wrapper, .woo-product-variation-details {
  padding: 1rem;
}

.woo-product-variation-details {
  display: flex;
  gap: 1rem;
}

.product-extras {
  flex-grow: 1;
}

#change_product_image { z-index: 9999; }
#change_product_image .smeehee_popup { max-width: 1730px; }
#edit_image .smeehee_popup { min-width: 50vw; }
#edit_image .smeehee_popup .smeehee_popup_content button { width: 100% }
.smeehee_popup_content #change_images_wrapper { margin-bottom: -1rem; max-width: 90vw; }
.smeehee_popup_content #change_images_wrapper img { display: block; padding: 0px; margin: auto; border: 2px solid #ececec; max-width:150px; max-height: 150px; }
.smeehee_popup_content #change_images_wrapper .clear { display: block; content: ""; clear: both; }
.smeehee_popup_content #change_images_wrapper .woo-product-image-wrapper { 
  margin-right: 1rem; 
  margin-bottom: 1rem; 
  float: left;
  width: 152px;
  height: 152px;
}

#woo-images .woo-product-image-wrapper img { 
  display: block; 
  padding: 0px; 
  margin: auto; 
  border: 2px solid #ececec; 
  max-width:250px; 
  max-height: 250px; 
}
#woo-images .woo-product-image-wrapper {  
  margin-right: 1rem; 
  margin-bottom: 1rem; 
  float: left;
  width: 252px;
  height: 252px;
  border: 1px solid #cccccc;
}

.smeehee_popup_content #change_categories_wrapper .change-product-category { display: flex; gap: 20px; margin-bottom: 5px; align-items: center; }
.smeehee_popup_content #change_categories_wrapper .change-product-category-sub { margin-left: 32px; }
.smeehee_popup_content #change_categories_wrapper .change-product-category input {
  display: block;
  width: 16px;
  height: 16px;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
}
.smeehee_popup_content #change_categories_wrapper .change-product-category label {
  display: block;
  flex-grow: 1;
  cursor: pointer; 
  -webkit-user-select: none; 
  -ms-user-select: none;
  user-select: none;
}
.smeehee_popup_content #change_categories_wrapper button { width: 97%; margin-top: 20px; border-radius: 5px; }

.smeehee_popup_content .form_label { margin-bottom: 5px; font-weight: bold; }

/* Custom checkboxes */
.checkbox-wrapper { display: flex; align-items: center }
.checkbox-wrapper label { display: inline-block; vertical-align: middle; min-height: 48px; }

/* Customize the label (the container) */
.container { display: block; position: relative; padding-left: 35px; cursor: pointer; font-size: 1rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Hide the browser's default checkbox */
.container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }

/* Create a custom checkbox */
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #ccc; }

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark { background-color: #aaa; }

/* When the checkbox is checked, add the smeehee color background */
.container input:checked ~ .checkmark { background-color: #e93b5c ; }

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none; }

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after { display: block; }

/* Style the checkmark/indicator */
.container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

@media only screen and (max-width: 768px) {
  body {
    flex-direction: column;
  }
  .nav {
    width: 100%;
  }
  .nav .nav-items, .nav-top .user-profile, .nav-top .time {
    display: none;
  }
  .nav .logo a {
    display: block;
  }
  .woo-order-details div {
    margin: auto;
  }
  .woo-order-details div:last-of-type {
    margin-bottom: 0;
  }
  .woo-order-details .delivery-info {
    text-align: center;
  }
  #search_products_category {
    display: none;
  }
  .opening-hour {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }
  .opening-hour > div {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .opening-hour span {
    display: none;
  }
  .opening-hour select, .opening-hour button {
    width: 100%;
    box-sizing: border-box;
  }
  .opening-hour select {
    margin: 0.5rem 0;
  }
  .opening-hours-body button {
    margin-bottom: 1rem;
  }
  .opening-hours-body button:last-of-type {
    margin-bottom: 0;
  }
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg);
    } to {
        -ms-transform: rotate(360deg);
    }
}
@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    } to {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    } to {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    } to {
        transform: rotate(360deg);
    }
}

@supports (gap: 1rem) {
  .woo-order-details > div {
    padding: 0;
  }
}

/***
**** Toggle switches
***/

.switch-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
  width: 100%;
}

.switch-container:last-of-type {
  margin-bottom: 0px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-container p {
  flex-grow: 1;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #e93b5c;
}

input:focus+.slider {
  box-shadow: 0 0 1px #e93b5c;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}