@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@700&display=swap');
@import url('../brand.css');
/* Ecommerce Templates Administration Panel — Custom Stylesheet
   ================================
   Per-site branding lives in /brand.css (outside vsadmin/), not in this
   file. This file is meant to be copied unchanged into future sites. */

/* Screen Body — Flexbox sticky footer */
body {
	background-color: #ededed;
	color: #333;
	font-size: 0.85rem;
	font-family: system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Print — Invoices and Packing Slips */
body.printbody {
	display: block;
	background: #fff;
	background-image: none;
	color: #000;
	font-size: 0.75rem;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

/* Admin Orders Tables */
div.container { overflow: auto; padding: 0 }
div.colheading {
	box-sizing: border-box;
	text-align: center;
	padding: 2px 0;
	margin: 0;
	background-color: rgba(0,0,0,0.1);
}
div.colheading h2 {
	text-align: center;
	color: #000 !important;
	background-color: transparent !important;
	font-size: 110%;
	font-weight: bold;
	text-transform: none;
	border: none;
	padding: 0;
	margin: 0;
}
div.largescreenquant { display: block; width: 100%; text-align: center }
div.smallscreenquant { display: none }
div.ectorderrow { display: table-row }
div.ectorderrow > div {
	display: table-cell;
	vertical-align: top;
	padding: 5px 0 5px 4px;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
}
div.orddetailsimg { text-align: left; display: inline-block }
div.orddetailsimg img.orddetailsimg {
	max-width: 90px;
	width: auto;
	max-height: 90px;
	height: auto;
}
.ectorderhead { background-color: rgba(0,0,0,0.1); color: #000 }
div.ecttotalcolumn {
	box-sizing: border-box;
	width: 50%;
	float: left;
	font-size: 110%;
	margin: 0.75rem 0 0 0;
}
div.ordrowunitpricecol, div.ordrowpricecol {
	text-align: right;
	white-space: nowrap;
	padding: 5px 4px 5px 0 !important;
}
div.ecttotaltable { margin: auto; display: table; text-align: right }
div.ectorderfunctions { box-sizing: border-box; width: 50%; float: left }
div.ecttotalrow { display: table-row }
div.ecttotalrow > div {
	display: table-cell;
	white-space: nowrap;
	padding: 3px 5px 3px 0;
}
div.ordergrandtotal {
	padding: 4px 2px 1px 2px !important;
	font-weight: bold;
	border-top: 1px solid #000;
	border-bottom: 3px double #000;
}
hr.ordertotals {
	display: none;
	width: 80%;
	border: 1px dashed grey;
	margin: 10px;
}
div.optionstable { display: table; width: 100% }
div.optionstablerow { display: table-row }
div.optionstablerow > div { display: table-cell; white-space: nowrap }
div.optionstableleft {
	padding: 4px;
	width: 30%;
	text-align: right;
}
input.orderprice { width: 60px }
div.ordpackage {
	display: table;
	font-size: 0.9em;
	color: #404040;
}
div.ordpackagerow { display: table-row }
div.ordpackagerow > div { display: table-cell; padding: 2px }
div.orderid, div.orderdate { padding: 2px }
div.orderslist { display: table; width: 100% }
div.ordersheadrow { display: table-row }
div.ordersheadrow > div {
	display: table-cell;
	white-space: nowrap;
	height: 42px;
	vertical-align: middle;
	color: #fff;
	background: #0B1220;
	padding: 1px;
}
div.ordersheadrow > div a { color: #fff }
div.ordersheadrow > div a:hover { color: #fff }
div.orderslistrow { display: table-row }
div.orderslistrow > div {
	display: table-cell;
	white-space: nowrap;
	height: 38px;
	vertical-align: middle;
	border-bottom: 1px solid #ededed;
}
div.orderslistrow:hover { background: #E7F1FF; color: #333 }
div.ordernavigation, div.orderpagebar {
	padding: 20px 0 0 0;
	text-align: center;
}
div.ordersdate { font-size: 1em }
div.orderssearch {
	display: table;
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2px;
}
div.orderssearchrow { display: table-row }
div.orderssearchrow > div {
	display: table-cell;
	border: 1px solid #ededed;
	padding: 2px;
}
select.ordstatus { max-width: 200px }
input.ordsearchtext { width: 165px }

div.orderdetails,
div.orderheader,
div.orderaddress,
div.addresses,
div.buttons,
div.bottombuttons {
	box-sizing: border-box;
	width: 100%;
	overflow: auto;
}
div.producttable {
	display: table;
	width: 100%;
	table-layout: auto;
	margin-top: 10px;
}
div.address,
div.shipaddress,
div.adddetails,
div.orderstatus,
div.shipping,
div.authcapture,
div.imgupload {
	box-sizing: border-box;
	width: calc(48% - 2px);
	min-height: 75px;
	border: 1px solid rgba(0,0,0,0.2);
	display: inline-block;
	vertical-align: top;
	margin: 2px 1% 5px 1%;
	padding: 0 0 5px 0;
}
div.orderoptgrp, div.orderoption { display: inline }
div.orderoptgrp::after { content: ": " }
div.ectgiftwraprow { background-color: #aaffaa }
div.updatestatus select { width: auto !important }

/* CSS Tables */
div.ecttable {
	display: table;
	margin: 0 0 10px 0;
	width: 100%;
	text-align: left;
	padding: 10px;
	border-collapse: collapse;
}
div.ecttablerow { display: table-row }
div.ecttablerow > div { display: table-cell; padding: 5px }
div.ectorderhead > div { font-weight: bold }
select.ordactionsel { width: 86px }
div.buttonleft, div.buttonright, div.idanddate {
	float: left;
	text-align: center;
	min-height: 5px;
}
div.buttonleft, div.buttonright { width: 33% }
div.bottombuttonleft, div.bottombuttonright {
	float: left;
	text-align: center;
	width: 50%;
	padding: 10px;
	box-sizing: border-box;
}
div.idanddate {
	width: 34%;
	font-size: 115%;
	font-weight: bold;
	border-bottom: 1px solid rgba(0,0,0,0.3);
}
div.bottombuttongroup { display: inline-block }

/* Date Picker Calendar */
div.ectcalendar {
	font-family: Arial;
	font-size: 11px;
	border: 1px solid #a0a0a0;
	background-color: #fff;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
div.ectcaldayno1 { color: #909090 }
table.ectcalheader {
	margin: 1px;
	padding: 2px;
	width: 99.4%;
	color: #fff;
	font-weight: bold;
	background-color: #222;
}
table#ectcalheader.ectcalheader tbody { background-color: #222 }
div.ectcaltodaydate {
	font-weight: bold;
	background-color: #ddd;
	padding: 5px;
	text-align: center;
}
table.ectcalselector {
	font-family: Arial;
	font-size: 11px;
	border: 1px solid #a0a0a0;
	background-color: #1677FF;
	border-collapse: collapse;
	min-width: 40px;
}
td.ectcalselector { border: 1px solid #222; padding: 3px }
div.ectcaldateholiday { background-color: #fdd }
div.ectcaltoday {
	text-align: center;
	font-weight: bold;
	color: #f60000;
	background-color: #ddd;
	border: none;
}
table.ectcalheader td { padding: 2px; font-family: Arial; font-size: 12px }
table.ectcaldates { font-family: Verdana; font-size: 11px }

/* DB Utility Tables */
div.ectdbsection { display: table; border: 1px solid grey; margin: 10px; padding: 10px; min-width: 50% }
div.ectdbtable { display: table; margin-bottom: 20px }
div.ectdbhead { display: table-row }
div.ectdbrow_cnt { display: table-row }
div.ectdbrow_cnt:hover { background: #E7F1FF }
div.ectdbheadrow { display: table-cell; padding: 10px 60px 10px 4px; font-weight: bold; border-bottom: 1px solid #999 }
div.ectdbrow { display: table-cell; padding: 10px 60px 10px 4px; border-bottom: 1px solid #f1f1f1 }

/* Typography */
h2, #main .heading {
	font-size: 130%;
	font-weight: bold;
	padding: 5px 0;
	border-bottom: 1px dashed #888;
	margin-bottom: 20px;
	color: #333;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.6;
}
div#main h2 { text-transform: none; text-align: center }
h3 {
	background-color: #0B1220;
	margin: 1px 0;
	padding: 5px;
	color: #fff;
	font-size: 1.1em;
}
h3.round_top { text-align: center }
h3 a { color: #fff }
h3 a:hover { color: #1677FF }
h4 { font-weight: bold; margin-bottom: 10px; font-size: 130% }
div.itemsdefine {
	font-size: 24px;
	font-weight: normal;
	color: #333;
	text-align: center;
	padding: 24px 0;
}
p { margin-bottom: 10px; line-height: 1.5 }
#adminfooter h4 {
	text-transform: uppercase;
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-bottom: 1px dashed #ccc;
}
.ectred { color: #c00 }
small, .small { font-size: 12px }
strong { font-weight: bold }

/* Tables */
table p { margin-bottom: 0 }
table td { padding: 6px 5px; font-size: 100% }
table th { padding: 10px 5px; font-size: 1.1em; border-bottom: 5px solid #fff }

/* Forms */
input[type="text"],
input[type="password"],
select,
textarea {
	padding: 5px;
	border: 1px solid #1677FF;
	border-radius: 3px;
	max-width: 100%;
	color: #333;
	box-sizing: border-box;
	transition: border-color 0.15s, background-color 0.15s;
}
/* Required fields */
input[type="text"]#newid,
select#psection,
input[type="text"]#pName,
input[type="text"]#pPrice {
	color: #000;
	font-weight: bold;
	background-color: #fae6e6;
}
/* Active field highlight */
input:focus, textarea:focus, select:focus {
	background-color: #fdf6ee;
	border-color: #1677FF;
	outline: none;
}
input.small_input { max-width: 50px }
input.tiny_input { max-width: 30px }
textarea.smalltxt { min-width: 350px; min-height: 90px }
textarea.largetxt { min-width: 350px; min-height: 150px }

/* Lists */
#main ul, #main ol { margin-left: 20px }
#main ul li, #main ol li { margin-bottom: 5px }
#main ul.payprov { list-style-type: none; margin: 20px 0 20px 20px }
#adminfooter ul { list-style-type: none; margin-bottom: 10px }
#adminfooter ul li { padding-top: 5px }

/* Links */
a { color: #1a6eb5; text-decoration: none }
a:hover, a:focus { color: #1677FF; text-decoration: none }
a.online_help_large { font-size: 18px }
a.online_help { font-size: 14px }
a.online_help,
a.online_help_large {
	font-weight: bold;
	color: #000;
	background-color: #fff;
	padding: 2px 6px;
	border-radius: 10px;
}
a.online_help:hover,
a.online_help_large:hover,
a.online_help:focus,
a.online_help_large:focus { background-color: #fff; color: #1677FF }

/* Buttons */
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
button.mainbutton,
button.mainbuttonbottom {
	box-shadow: none;
	background-color: #333;
	border-radius: 4px;
	border: none;
	display: inline-block;
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s;
}
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button.mainbutton:hover,
button.mainbuttonbottom:hover { background-color: #1677FF }
.minicell input[type="button"], .minicell input[type="submit"] {
	font-size: 11px;
	padding: 5px;
	cursor: pointer;
}
.bigbutton, input[type="button"].bigbutton, input[type="submit"].bigbutton {
	padding: 6px 20px;
	font-size: 13px;
	cursor: pointer;
}
div.separator { margin: 5px; height: 22px; border-bottom: 1px solid #1677FF }

/* Header */
#header1 {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #0B1220;
	height: 30px;
	color: #fff;
	font-size: 95%;
	border-bottom: 1px solid #1677FF;
}
#header1 a { color: #fff }
#header1 p { padding: 5px; margin: 0; line-height: 1 }
#header1 p.viewstore a, #header1 p.log-out a {
	font-size: 97%;
	font-weight: bold;
	text-transform: uppercase;
}
#header1 p.viewstore a {
	padding: 3px 0 0 25px;
	margin: 0 0 0 17px;
	background: url('adminimages/viewstore.png') left center no-repeat;
}
#header1 p.log-out a {
	padding: 0 27px 0 0;
	margin: 0 15px 0 0;
	background: url('adminimages/logout.png') right center no-repeat;
}
#header1 p.viewstore a:hover, #header1 p.viewstore a:focus,
#header1 p.log-out a:hover, #header1 p.log-out a:focus { color: #1677FF }

#header {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #0B1220;
	min-height: 0;
}
.logotop { float: left; margin: 0 0 0 1.5% }
.logotop a img { content: url('../images/demo_logo.webp'); max-height: 100px; width: auto }
.toplinks {
	float: right;
	text-align: right;
	background-color: transparent;
	padding-top: 1rem;
	margin: 0 1.5% 0 0;
}
.toplinks a img { margin-right: 20px }

/* Admin Menu */
#admin_menu {
	box-sizing: border-box;
	width: 100%;
	border-top: 1px solid #1677FF;
	margin: 0;
	padding: 0;
	clear: both;
	position: relative;
	z-index: 2;
}

/* Main content */
#main {
	clear: both;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 5px 0.25%;
	background: #fff;
	color: #000;
	position: relative;
	flex: 1 0 auto;
}

/* Footer */
#adminfooter {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 5px 0.5%;
	clear: both;
	background: #fff;
}

/* Utility */
.pagebar { font-size: 10px; text-align: right; padding: 5px }
.pagebar .currpage { font-weight: bold; font-size: 11px }
.shrink_wrapper { width: 100%; overflow: auto }
.infobox, .noticebox {
	background-color: #fafafa;
	padding: 10px;
	border: 1px solid #ededed;
	overflow: auto;
	margin: 10px 0;
}
.bluebox { background-color: #f2f6ff; border: 1px solid #d6e2ff }
.infobox { font-size: 0.9em }
.home_boxes { text-align: center; margin-top: 5px; margin-bottom: 5px; padding: 0 }
.home_boxes .box { padding: 0 0 5px 0; background: #ededed; overflow: auto; margin-bottom: 5px }
.home_boxes .box_title { background-color: #0B1220; padding: 5px 0 2px 0; text-align: left }
.home_boxes .box_title h3 {
	text-align: center;
	padding: 2px 0 5px 5px;
	margin: 0;
	font-size: 0.95em;
	font-weight: bold;
	background-color: transparent;
}
.home_boxes .new_alert { color: #fff; background-color: #00cc00 }
.home_boxes .new_alert h3 { background-color: transparent }
.home_boxes .box_title h3 a:hover, .home_boxes .new_alert h3 a { color: #fff }
.home_boxes .box_title:hover,
.home_boxes .box_title:active,
.home_boxes .box_title h3 a:hover,
.home_boxes .box_title h3 a:active,
.home_boxes .new_alert:hover,
.home_boxes .new_alert:active,
.home_boxes .new_alert h3 a:hover,
.home_boxes .new_alert h3 a:active { background-color: #1677FF }
.home_boxes .box_title:hover,
.home_boxes .box_title:hover h3,
.home_boxes .box_title:hover h3 a,
.home_boxes .box_title:active,
.home_boxes .box_title:active h3,
.home_boxes .box_title:active h3 a,
.home_boxes .new_alert:hover,
.home_boxes .new_alert:hover h3,
.home_boxes .new_alert:hover h3 a,
.home_boxes .new_alert:active,
.home_boxes .new_alert:active h3,
.home_boxes .new_alert:active h3 a {
	color: #fff !important;
}
.home_boxes .box_title a.online_help { float: right; margin: 0 5px 0 0 }
.home_boxes .box_new { font-size: 1.25em; font-weight: bold; padding-top: 5px; background-color: #ededed }

.logout, .login_message {
	box-sizing: border-box;
	font-size: 100%;
	font-weight: bold;
	width: 70%;
	margin: 53px auto;
	border: 1px dotted #eee;
	background-color: #f6f6f6;
	border-radius: 5px;
	padding: 20px;
}
.login_form {
	width: 420px;
	margin: 60px auto;
	background-color: #fafafa;
	border: none;
	text-align: center;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
}
.login_header {
	background: #0B1220 url('../images/demo_logo.webp') center center no-repeat;
	background-size: 70% auto;
	border-radius: 5px 5px 0 0;
	height: auto;
	min-height: 150px;
	margin-bottom: 20px;
}
.login_form p.credit { margin-top: 20px; font-size: 0.8em }
.search_block {
	background-color: #fafafa;
	padding: 10px;
	border: 1px solid #fafafa;
	overflow: auto;
	margin-bottom: 25px;
}
.addressbox label { display: inline-block; width: 100px }
.addressbox div { padding: 5px 0; margin-top: 0; margin-bottom: 5px }

/* Update Checker */
.updatecheck { display: none; background-color: #f6f6f6; padding: 5px 10px; font-size: 0.8rem; font-weight: normal; border: none; overflow: auto }
.current_version {
	float: left;
	font-weight: bold;
	font-size: inherit;
	padding-top: 5px;
	padding-left: 20px;
	background: transparent url('adminimages/icon-green-tick.png') 0 3px no-repeat;
}
.old_version { padding-left: 20px; background: transparent url('adminimages/alert.png') 0 3px no-repeat }
.updates_okay { text-align: right }
span.update_date { font-weight: bold }
.should_update { display: none; font-weight: bold; font-size: inherit; text-align: right }
.should_update a {
	padding-left: 30px;
	padding-top: 5px;
	background: transparent url('adminimages/update.png') left center no-repeat;
	height: 20px;
	display: inline-block;
}
.security_update span { color: #c00 }
.security_update a { background: transparent url('adminimages/update-security.png') left center no-repeat }

#mainprint { margin: 0; background: #fff; padding: 2px }

/* Statistics */
table.quickstats { font-size: 100%; width: 100%; border-collapse: collapse }
table.quickstats td { vertical-align: top; border-bottom: 1px dotted #f6f6f6 }
table.quickstats td.nobottom { border-bottom: 0 }
table.quickstats th { background-color: #0B1220; vertical-align: middle; color: #fff }
table.quickstats td, table.quickstats th { text-align: center }
table.neworders td, table.neworders th { text-align: left }
table.neworders th { font-weight: bold; background-color: #0B1220; color: #fff }
table.neworders tr:hover { background: #E7F1FF }
table.fivetable td { border-bottom: 0 }
table.ordtbl td { padding: 2px }
table.stattbl td { padding: 2px 6px 2px 2px }
div.stattbl { display: table; border-collapse: collapse; margin-bottom: 2px }
div.stattblrow { display: table-row }
div.stattblrow > div { display: table-cell; border: 1px solid #f00; padding: 10px }
td.adtabcon { width: 50%; vertical-align: top }

/* Responsive table */
.admin-table-a { margin: 0 0 10px 0; width: 100%; text-align: left; padding: 0; border-collapse: collapse }
.admin-table-a th { font-weight: bold; color: #fff; background-color: #0B1220; text-align: left }
.admin-table-a th a { color: #fff }
.admin-table-a th a:hover, .admin-table-a th a:focus { color: #fff }
.admin-table-a td { background: #ededed; border-bottom: 1px dotted #ededed; color: #333 }
.admin-table-a tr:hover td, .admin-table-a tr:focus td { background: #E7F1FF; color: #333 }
td.st-val { font-size: 11px; padding: 2px 5px }
.stacktable.admin-table-a { display: table }
.admin-table-a-small { display: none }
.sta-white td { background-color: #fff }
.admin-table-b { margin: 0 0 10px 0; width: 100%; text-align: left; border-collapse: collapse }
.admin-table-b th { color: #fff; text-align: left; background-color: #888 }
.admin-table-b td { background: #fff; border-bottom: 1px dotted #d5d5d5; color: #333 }
.admin-table-b tr:hover td, .admin-table-b tr:active td { background: #E7F1FF; color: #333 }
td.new { font-weight: bold; color: #c00; width: 1% }

hr { color: #f6f6f6; background-color: #f6f6f6; border: 1px solid #f6f6f6 }
table.cobtbl { background-color: #f6f6f6; width: 100% }
table.ordtbl { background-color: #f6f6f6 }
td.cobhl, th.cobhl { background-color: #fff }
td.cobll { background-color: #fff }
tr.cobhl { background-color: #f6f6f6 }
tr.cobll { background-color: #fff }
tr.cobwarn { background-color: #fef1f1 }
td.label { width: 30% }
td.minicell, th.minicell { width: 10%; text-align: center }
th.minicell { font-weight: bold }
td.maincell, th.maincell { width: 30% }
td.spacer_cell { border-top: 1px solid #888; border-bottom: 0; font-size: 1px; padding: 3px }

/* Navigation */
[role='main'] { box-sizing: border-box; margin: 5% auto; background-color: transparent }
[role='navigation'] { box-sizing: border-box; margin: 0 auto; width: 100%; background-color: #0B1220 }
.mainnav-touch [role='navigation'], .mainnav-no-touch [role='navigation'] { display: none }
.menu-button {
	display: block;
	padding: 1em;
	background: #0B1220;
	font-weight: bold;
	color: #fff;
	background-image: url('adminimages/arrow-down.png');
	background-repeat: no-repeat;
	background-position: 93% 15px;
	cursor: pointer;
	font-size: 1em;
	text-transform: uppercase;
}
.menu-button:hover, .menu-button:focus { color: #1677FF; background-color: #0B1220 }
[role='navigation']:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 }
[role='navigation'] li {
	position: relative;
	list-style: none;
	display: block;
	width: 100%;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	background-color: transparent;
}
[role='navigation'] li.item-with-ul { background-color: #0B1220 }
[role='navigation'] li a { min-width: 50px; margin-right: 20%; display: block; border-bottom: none; color: #fff }
[role='navigation'] li a:hover, [role='navigation'] li a:focus { color: #fff; background-color: #1677FF; font-weight: bold }
[role='navigation'] .top-level a {
	position: relative;
	display: block;
	background-color: #0B1220;
	border-left: none;
	padding: 1em;
	z-index: 2;
	text-decoration: none;
}
[role='navigation'] li ul { width: 100%; position: relative; border-top: none; border-bottom: none; background-color: transparent }
[role='navigation'] li ul li { float: none; width: 100%; text-transform: capitalize }
[role='navigation'] li ul li a { display: block; text-decoration: none; font-weight: normal }
[role='navigation'] .sub-menu li a {
	z-index: 100;
	color: #fff;
	font-weight: bold;
	padding: 0.75em 0.5em 0.75em 2em;
	background-color: #0B1220;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
}
[role='navigation'] .sub-menu li a:hover { color: #fff; background-color: #1677FF }
[role='navigation'] .item-with-ul { background: url('adminimages/arrow-down.png') 93% 15px no-repeat }
.sub-menu { display: none }
.sub-menu.open { display: block }

/* Utility classes */
.centerit { text-align: center }
.centerit table { margin: 5px auto }
.clear { clear: both }
.smaller { font-size: 90% }
.full_top { margin-top: 20px }
.half_top { margin-top: 10px }
.double_top { margin-top: 40px }
.no_top { margin-top: 0 }
.full_bottom { margin-bottom: 20px }
.half_bottom { margin-bottom: 10px }
.no_bottom { margin-bottom: 0 }
.aright { text-align: right }
.aleft { text-align: left }
.acenter { text-align: center }
hr.dash { height: 0; border-width: 1px 0 0 0; border-style: dashed; border-color: #ccc }
.medonly { display: none }

/* Border radius helpers */
.round_top { border-top-left-radius: 5px; border-top-right-radius: 5px }
.round_bottom { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px }
.round_all { border-radius: 5px; overflow: auto }
.textarea { font-size: 12px }

/* Responsive width helpers */
.full-width { box-sizing: border-box; width: 100%; height: auto; overflow: hidden }
.one_half, .inner_half { box-sizing: border-box; width: 49.5% }
.two_thirds { box-sizing: border-box; width: 65.6% }
.one_fourth { box-sizing: border-box; width: 24% }
.three_fourths { box-sizing: border-box; width: 75% }
.one_half, .inner_half, .two_thirds, .one_fourth, .three_fourths { position: relative; margin-right: 0.25%; float: left }
.one_third { box-sizing: border-box; width: 33.2%; position: relative; margin-right: 0.13%; float: left }
.one_sixth { box-sizing: border-box; width: 16%; position: relative; margin-right: 0.66%; float: left }
.last { margin-right: 0 }
.row { width: 100%; margin-bottom: 10px; padding: 10px 0; overflow: auto }

/* Dashboard flexbox */
div#equalize.row.home_boxes {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
	align-items: stretch;
	padding: 0;
	margin: 0;
}
div#equalize.row.home_boxes > div.one_sixth.round_all.box { flex: 0 1 auto; align-self: auto; max-width: 280px; margin-right: 0 }
.dashrow { padding: 5px 0; margin: 5px 0; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc }

/* Desktop menu */
@media screen and (min-width: 800px) {
	.mainnav-touch [role='navigation'], .mainnav-no-touch [role='navigation'] { display: block }
	.menu-button { display: none }
	[role='navigation'] li { position: relative; list-style: none; float: left; display: block; background-color: transparent; width: 25% }
	.mainnav-no-touch .item-with-ul:hover > ul { opacity: 1; top: 3.1em; position: absolute }
	[role='navigation'] li a { border-left: none; border-bottom: none; min-width: 50px }
	.mainnav-no-touch [role='navigation'] li ul { position: absolute; top: auto; left: 0; opacity: 0; visibility: hidden; height: 1px; z-index: 1 }
	[role='navigation'] li ul li a { border-bottom: none }
	.mainnav-touch [role='navigation'] li ul.sub-menu { position: absolute; top: auto; left: 0; display: none; z-index: 1 }
	.mainnav-no-touch .item-with-ul:hover > ul { visibility: visible; opacity: 1; height: auto; display: block; border-right: none; border-bottom: none }
	.mainnav-no-touch .second-level.item-with-ul:hover > ul { margin-left: 100%; top: 0 }
	h3 { font-size: 1.1em; padding: 10px 5px; font-weight: bold }
}

/* Tablet landscape */
@media screen and (max-width: 895px) {
	#main .one_third { width: 100%; margin-right: 0 }
	.one_sixth { width: 32.33%; margin-right: 0.5%; margin-left: 0.5% }
	.home_boxes .last { margin-right: 1% }
	.med_block { display: block; clear: both; margin: 0; padding: 2px 0 }
	#header1, #header, #admin_menu { width: 100%; margin: 0 }
	#main { width: 100%; margin: 0; padding: 3px 0.5% 0 0.5% }
	#adminfooter { width: 100%; margin: 0; padding: 0 1% }
	input.ordsearchtext { width: 130px }
	input.orddatesel { width: 74px }
	select.ordactionsel { width: 72px }
	select.orddumpsel { max-width: 148px }
}

/* Tablet portrait */
@media screen and (max-width: 767px) {
	body { font-size: 0.8em }
	h2, h3, h4, div.itemsdefine { font-size: 125% }
	td.minicell, th.minicell { width: auto }
	td.minicell input, th.minicell input { font-size: 90% }
	.stacktable.admin-table-a-small { display: table }
	.admin-table-a-small { width: 100% }
	.admin-table-a-small th { padding: 5px; font-weight: bold; text-align: left; background-color: #eaece7 }
	.admin-table-a-small th.st-head-row-main { background-color: #fff }
	.admin-table-a-small td.st-key { text-align: left; font-weight: bold; max-width: 30%; padding: 5px 5px 5px 10px; font-size: 12px; border-bottom: 1px dashed #eee }
	.admin-table-a-small td.st-val { text-align: left; font-size: 12px; padding: 5px; border-bottom: 1px dashed #eee }
	.one_half, .one_third, .two_thirds { float: none; width: 100%; margin-right: 0 }
	label.block_label { width: 120px; display: block; float: left }
	.fivetable td { text-align: center }
	.fivetable label { display: block; clear: both }
	.medonly { display: inline }
	.largeonly { display: none }
	.largetosmall { width: 110px }
	.shrink_wrapper th { font-size: 0.9em }
	.shrink_wrapper td { font-size: 0.8em }
	div.ordsmallheader { font-size: 0.8em }
	div.address, div.shipaddress, div.adddetails, div.orderstatus,
	div.shipping, div.authcapture { width: auto; float: none; display: block }
	div.left { width: 120px }
	div.largescreenquant { display: none }
	div.smallscreenquant { display: inline; padding-right: 2px }
	input.orderprice { width: 40px }
	div.orderauthcode { overflow: hidden; max-width: 90px }
	select.ordstatus { max-width: 150px }
}

/* Mobile */
@media screen and (max-width: 488px) {
	body { font-size: 0.75em }
	.row { margin: 0; padding: 0 }
	#header, #header1, #admin_menu, #main, #adminfooter { width: 100%; margin: 0 }
	#header1 p.viewstore a { padding: 5px 0 5px 20px; margin: 0 0 0 7px }
	#header1 p.log-out a { padding: 0 22px 0 0; margin: 0 5px 0 0 }
	#header { min-height: auto }
	.login_form { width: 280px }
	.logotop { box-sizing: border-box; float: none; display: inline-block; max-width: 50%; width: auto; text-align: left; margin: 0 }
	.logotop a img { max-height: 60px; width: auto }
	.toplinks { box-sizing: border-box; float: right; max-width: 50%; width: auto; text-align: right; padding-top: 0.85rem; margin: 0 }
	.toplinks a img { height: 18px; width: auto; margin: 0 7px }
	h2, h3, h4, div.itemsdefine { font-size: 120% }
	.updatecheck { font-size: 90% }
	.one_half, .one_third, .two_thirds, .one_fourth, .three_fourths { float: none; width: 100%; margin-right: 0; padding: 5px 0 }
	label.block_label { padding-bottom: 5px; float: none }
	.one_sixth { width: 49%; margin-left: 0.5%; margin-right: 0.5% }
	.footer_half { width: 48%; margin-left: 1%; margin-right: 1%; float: left }
	.home_boxes .last { margin-right: 1% }
	.small_block { display: block; clear: both; margin: 0; padding: 2px 0 }
	.smallonly { display: inline }
	.medium_input, .large_input { width: 120px }
	.largetosmall { width: 75px }
	textarea.smalltxt, textarea.largetxt { max-width: 200px; min-width: 120px }
	div.ecttotalcolumn { width: auto; float: none; padding: 30px; box-sizing: border-box }
	div.ectorderfunctions { width: auto; float: none; padding: 30px; box-sizing: border-box }
}

@media print {
	.no-print, .no-print * { display: none !important }
	div.orderheader img { max-width: 95%; height: auto !important }
}

/* ====================================
ADD YOUR OWN CUSTOM MODIFICATIONS BELOW
======================================= */

/* Admin panel branding — brand accent #1677FF (see css/style.css --color-primary) */

/* Step 1b: adminstyle.css button hover states still ship in vendor orange
   (not caught by the Step 1 find/replace above, which only touches this file) */
button:hover:enabled,
input[type="button"]:hover:enabled,
input[type="submit"]:hover:enabled,
input[type="reset"]:hover:enabled,
button.mainbutton:hover,
button.mainbuttonbottom:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
	background-color: #1677FF !important;
	color: #fff !important;
}
button.ectset, input[type="button"].ectset, input[type="submit"].ectset, input[type="reset"].ectset {
	background-color: #1677FF !important;
	color: #fff !important;
}
button.ectset:hover, input[type="button"].ectset:hover, input[type="submit"].ectset:hover, input[type="reset"].ectset:hover {
	background-color: #000 !important;
	color: #1677FF !important;
}

/* Step 3: nav dropdown chevron is a raster PNG baked in orange
   (adminimages/arrow-down.png) — replace with an inline brand-color SVG */
.menu-button,
[role='navigation'] .item-with-ul {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath fill='%231677FF' d='M0 0L13 0L6.5 10Z'/%3E%3C/svg%3E") !important;
}