/* =============================================================================
   Sanworks site styles for the public site and the sandbar, layered over Bootstrap 5.3.

   Load order: bootstrap.min.css, then this file.

   Part 1 sets up the page the way the site has always looked: Bootstrap's
           defaults for type, links, lists, tables and form fields are replaced
           with the values the site was designed around.
   Part 2 themes the Bootstrap components the site uses (buttons, form fields,
           breadcrumb, modal, dropdown, carousel, tabs, offcanvas).
   Part 3 is the site's own components (top bar, footer, panels, lightbox).
   Part 4 is the long-standing Sanworks classes used directly by the pages.

   ============================================================================= */


/* -----------------------------------------------------------------------------
   Breakpoints
   The pages use three of Bootstrap's breakpoints:
     sm  (576px)   phone layout below, tablet/desktop layout above
     lg  (992px)   full top bar above, compact bar with slide-out menu below
     xxl (1400px)  the widest column layouts (col-xxl-*)
   ----------------------------------------------------------------------------- */


/* =============================================================================
   Part 1 - Page defaults
   ============================================================================= */

:root {
  --bs-body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #222222;
  --bs-body-color-rgb: 34, 34, 34;
  --bs-link-color: #008CBA;
  --bs-link-color-rgb: 0, 140, 186;
  --bs-link-hover-color: #0078a0;
  --bs-link-hover-color-rgb: 0, 120, 160;
  --bs-link-decoration: none;
  --bs-heading-color: rgb(230, 230, 230);
  --sw-page-bg: rgb(30, 30, 45);
}

html, body {
  height: 100%;
}
/* The page is dark, but --bs-body-bg is left white on purpose: Bootstrap uses it
   for form fields, modals and menus, and those are light on this site. */
/* Text is smoothed in greyscale rather than with coloured sub-pixels. The
   font-smoothing properties do that on macOS. On Windows the same result comes
   from drawing the page in its own layer over the background colour, which is
   why the colour sits on <html> and <body> is transparent. */
html {
  background-color: var(--sw-page-bg);
  overflow-x: hidden;
}
/* Jumps to an anchor are instant; the pages that want a glide script it. */
:root {
  scroll-behavior: auto;
}
/* Anything wider than the page is cut off at the page edge rather than making
   the page wider (which would make phones zoom out to fit it). */
body {
  overflow-x: clip;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

a {
  text-decoration: none;
  line-height: inherit;
}
a:hover, a:focus {
  color: #0078a0;
}
/* Anchors without an href are coloured like links too. */
a:not([href]):not([class]) {
  color: #008CBA;
}
a:not([href]):not([class]):hover, a:not([href]):not([class]):focus {
  color: #0078a0;
}
a img {
  border: none;
}

img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  color: rgb(230, 230, 230);
  line-height: 1.4;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  text-rendering: optimizeLegibility;
}
h1 { font-size: 2.125rem; }
h2 { font-size: 1.6875rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
@media (min-width: 576px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2.3125rem; }
  h3 { font-size: 1.6875rem; }
  h4 { font-size: 1.4375rem; }
  h5 { font-size: 1.125rem; }
  h6 { font-size: 1rem; }
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  color: #6f6f6f;
  font-size: 60%;
  line-height: 0;
}
.subheader {
  line-height: 1.4;
  color: #6f6f6f;
  font-weight: normal;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
}

p {
  color: rgb(170, 170, 185);
  font-family: 'Droid Sans';
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  text-rendering: optimizeLegibility;
}
.lead {
  font-size: 1.21875rem;
  font-weight: normal;
  line-height: 1.6;
}
small {
  font-size: 60%;
  line-height: inherit;
}

hr {
  border: solid #DDDDDD;
  border-width: 1px 0 0;
  clear: both;
  height: 0;
  margin: 1.25rem 0 1.1875rem;
  opacity: 1;
  color: gray;
}

/* Lists. Bootstrap's own list-based components are put back to no indent below. */
ul, ol, dl {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  list-style-position: outside;
  margin-bottom: 1.25rem;
  padding-left: 0;
}
ul { margin-left: 1.1rem; }
ol { margin-left: 1.4rem; }
ul li ul, ul li ol, ol li ul, ol li ol {
  margin-left: 1.25rem;
  margin-bottom: 0;
}
dl dt { margin-bottom: 0.3rem; font-weight: bold; }
dl dd { margin-bottom: 0.75rem; }
.nav, .navbar-nav, .breadcrumb, .dropdown-menu, .list-inline, .list-unstyled, .list-group, .pagination {
  margin-left: 0;
}

/* Tables: a plain <table> is a white, bordered table unless a page says otherwise. */
table {
  background: #FFFFFF;
  border: solid 1px #DDDDDD;
  border-collapse: separate;
  border-spacing: 2px;
  margin-bottom: 1.25rem;
  table-layout: auto;
}
/* Tables written with the old border="1" attribute keep their cell borders. */
table[border]:not([border="0"]) td, table[border]:not([border="0"]) th {
  border: 1px inset #DDDDDD;
}
thead, tbody, tfoot, tr, td, th {
  border-style: none;
  border-width: medium;
}
td, th {
  border-color: currentcolor;
}
table tr th, table tr td {
  color: #222222;
  font-size: 0.875rem;
  line-height: 1.125rem;
  padding: 0.5625rem 0.625rem;
  text-align: left;
}
table thead { background: #F5F5F5; }
table thead tr th, table thead tr td {
  font-weight: bold;
  padding: 0.5rem 0.625rem 0.625rem;
}
table tfoot { background: #F5F5F5; }
table tfoot tr th, table tfoot tr td {
  font-weight: bold;
  padding: 0.5rem 0.625rem 0.625rem;
}

/* Forms */
label {
  color: #4d4d4d;
  cursor: pointer;
  display: block;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.5;
  margin-bottom: 0;
}
input[type="file"], input[type="checkbox"], input[type="radio"] {
  margin: 0 0 1rem 0;
  line-height: normal;
}
input[type="checkbox"] + label, input[type="radio"] + label {
  display: inline-block;
  margin-left: 0.5rem;
  margin-right: 1rem;
  margin-bottom: 0;
  vertical-align: baseline;
}
input[type="file"] {
  width: 100%;
}
input {
  font-size: 18px !important;
  font-family: 'Droid Sans';
}
textarea {
  overflow: auto;
}
fieldset {
  border: 1px solid #DDDDDD;
  margin: 1.125rem 0;
  padding: 1.25rem;
}
fieldset legend {
  float: none;
  width: auto;
  font-size: 1rem;
  font-weight: bold;
  line-height: inherit;
  margin: 0 0 0 -0.1875rem;
  padding: 0 0.1875rem;
}

/* -----------------------------------------------------------------------------
   Grid
   The pages put .row straight into the page with no .container around it, so a
   page-level row spans the window (or 75% of it with .grid_max_width) and only
   rows nested inside a column pull back over their parent's padding. Rows inside
   a .container behave the standard Bootstrap way.
   The gutter is 30px (15px each side of a column).
   ----------------------------------------------------------------------------- */
.row {
  --bs-gutter-x: 1.875rem;
  margin-left: auto;
  margin-right: auto;
}
.row .row,
.container > .row, .container-fluid > .row,
.container-sm > .row, .container-md > .row, .container-lg > .row, .container-xl > .row, .container-xxl > .row {
  margin-left: calc(-0.5 * var(--bs-gutter-x));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
}
/* A gutterless row (.g-0): its own columns have no padding, and rows nested
   anywhere inside it do not pull back, so their columns stay inset. */
.row.g-0 {
  --bs-gutter-x: 0;
}
.row.g-0 .row, .row.g-0 .row-block {
  margin-left: 0;
  margin-right: 0;
}
/* Rows of form fields sit closer together. */
form .row .row {
  --bs-gutter-x: 1rem;
}
.row > * {
  position: relative;
  min-width: 0;
}

.grid_max_width {
   width: 75% !important;
   margin-left: auto !important;
   margin-right: auto !important;
   max-width: initial !important;
}

@media (max-width: 1000px) {
  .grid_max_width {
     width: 100% !important;
     margin-left: auto !important;
     margin-right: auto !important;
     max-width: initial !important;
  }
}


/* =============================================================================
   Part 2 - Bootstrap components, themed
   ============================================================================= */

/* --- Buttons ---------------------------------------------------------------- */
.btn {
  --bs-btn-padding-x: 2rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-family: 'Droid Sans';
  --bs-btn-font-size: 18px;
  --bs-btn-font-weight: normal;
  --bs-btn-line-height: normal;
  --bs-btn-border-width: 0;
  --bs-btn-border-radius: 0;
  --bs-btn-disabled-opacity: 0.7;
  margin: 0 0 1.25rem;
  padding-bottom: 1.0625rem;
  position: relative;
  vertical-align: baseline;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: background-color 300ms ease-out;
}
.btn-primary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: rgb(50, 50, 90);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: rgb(70, 70, 110);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: rgb(70, 70, 110);
  --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-disabled-bg: rgb(50, 50, 90);
  --bs-btn-focus-shadow-rgb: 120, 120, 200;
}
/* A button whose menu is open looks the same as when it is closed. */
.btn-primary.show:not(:hover) {
  background-color: var(--bs-btn-bg);
}
.btn-lg {
  --bs-btn-padding-x: 2.25rem;
  --bs-btn-padding-y: 1.125rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: 0;
  padding-bottom: 1.1875rem;
}
.btn-sm {
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-padding-y: 0.875rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-border-radius: 0;
  padding-bottom: 0.9375rem;
}
/* A button that only looks disabled still takes clicks, as it always has here. */
.btn.disabled {
  pointer-events: auto;
  cursor: default;
}
.disabledButton{
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  border-style: solid;
  border-width: 0;
  cursor: pointer;
  background-color: rgb(50,50,90) !important;
  font-size:18px;
  font-family: Droid Sans;
  font-weight: normal;
  line-height: normal;
  margin: 0 0 1.25rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  padding: 1rem 2rem 1.0625rem 2rem;
}
/* Cart buttons use the page font, not the button font. */
.removeButton {
  --bs-btn-font-family: var(--bs-body-font-family);
  --bs-btn-font-size: 1rem;
}
.checkoutButton{
  background-color: rgb(50,50,150) !important;
  font-size:18px;
}
.checkoutButton:hover{
  background-color: rgb(70,70,180) !important;
}

/* --- Form fields ------------------------------------------------------------ */
/* "input.form-control" is listed as well so that, for inputs, these values win
   over the single-class Sanworks rules further down, as they always have. */
.form-control, input.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #cccccc;
  border-radius: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-family: inherit;
  font-size: 0.875rem;
  height: 2.3125rem;
  line-height: normal;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  width: 100%;
  transition: border-color 0.15s linear, background 0.15s linear;
}
.form-control:focus {
  background-color: #fafafa;
  border-color: #999999;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  outline: none;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #DDDDDD;
  cursor: default;
  opacity: 1;
}
textarea.form-control {
  height: auto;
  min-height: 50px;
  max-width: 100%;
}
.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #FAFAFA;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjEycHgiIHk9IjBweCIgd2lkdGg9IjI0cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==");
  background-position: 100% center;
  background-repeat: no-repeat;
  background-size: auto;
  border: 1px solid #cccccc;
  border-radius: 0;
  box-shadow: none;
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-family: inherit;
  font-size: 0.875rem;
  height: 2.3125rem;
  line-height: normal;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  width: 100%;
  transition: none;
}
.form-select:hover {
  background-color: #f3f3f3;
  border-color: #999999;
}
.form-select:focus {
  border-color: #999999;
  box-shadow: none;
  outline: none;
}
.form-select:disabled {
  background-color: #DDDDDD;
  cursor: default;
}
.form-select[multiple] {
  height: auto;
}

/* --- Breadcrumb -------------------------------------------------------------- */
.breadcrumbs {
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0.5625rem 0.875rem;
  border: 1px solid;
  border-radius: 3px;
  background-color: rgb(30, 30, 45);
  border-color: rgb(80, 80, 100) rgb(30, 30, 45);
}
.breadcrumb {
  --bs-breadcrumb-font-size: 0.6875rem;
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-divider: "/";
  --bs-breadcrumb-divider-color: #AAAAAA;
  --bs-breadcrumb-item-padding-x: 0.75rem;
  --bs-breadcrumb-item-active-color: rgb(160, 160, 160);
  font-family: 'Droid Sans';
  line-height: 0.6875rem;
  text-transform: uppercase;
}
.breadcrumb-item a {
  color: rgb(200, 200, 200);
}
.breadcrumb-item.active a {
  color: rgb(160, 160, 160);
}
.breadcrumb-item a:hover, .breadcrumb-item a:focus {
  color: #0078a0;
}
.breadcrumb-item + .breadcrumb-item::before {
  position: relative;
  top: 1px;
}

/* --- Modal ------------------------------------------------------------------- */
/* A light dialog 100px from the top, 80% of the window wide unless the dialog
   sets --bs-modal-width itself. On phones it fills the screen. */
.modal {
  --bs-modal-width: 80%;
  --bs-modal-margin: 0px;
  --bs-modal-padding: 1.875rem;
  --bs-modal-bg: #FFFFFF;
  --bs-modal-color: #222222;
  --bs-modal-border-color: #666666;
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: 3px;
  --bs-modal-inner-border-radius: 2px;
}
.modal-backdrop {
  --bs-backdrop-opacity: 0.45;
}
.modal-content {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.modal-body > :first-child { margin-top: 0; }
.modal-body > :last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .modal-content { min-height: 100vh; }
}
@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 6.25rem;
  }
  .modal-dialog {
    max-width: min(var(--bs-modal-width), 62.5rem);
  }
}
/* Inside a dialog the grid starts afresh, wherever the dialog sits in the page:
   its outermost rows do not pull back, rows nested inside them do. */
.modal .modal-content .row, .modal .modal-content .row-block {
  --bs-gutter-x: 1.875rem;
  margin-left: auto;
  margin-right: auto;
}
.modal .modal-content .row .row, .modal .modal-content .row .row-block, .modal .modal-content .row-block .row {
  margin-left: calc(-0.5 * var(--bs-gutter-x));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
}
/* The grey "x" in the corner of a dialog. */
.modal-close {
  color: #AAAAAA;
  cursor: pointer;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 0.625rem;
  right: 1.375rem;
  background: none;
  border: 0;
  padding: 0;
}
.modal-close:hover, .modal-close:focus {
  color: #AAAAAA;
}

/* --- Carousel (home page headlines) ------------------------------------------ */
.carousel-indicators {
  margin-left: 15%;
}


/* =============================================================================
   Part 3 - Site components
   ============================================================================= */

/* --- Top bar, large screens ---------------------------------------------------
   A Bootstrap navbar. Its menus open on hover (and on keyboard focus) instead of
   on click, so the menu titles stay ordinary links. */
.site-topbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: #FFFFFF;
  --bs-navbar-hover-color: #FFFFFF;
  --bs-navbar-active-color: #FFFFFF;
  --bs-navbar-nav-link-padding-x: 15px;
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-font-size: 17px;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-brand-margin-end: 0;
  --bs-navbar-brand-font-size: 1.0625rem;
  background: rgb(30, 30, 45);
  height: 100px;
  align-items: flex-start;
  flex-wrap: nowrap;
  font-family: 'Droid Sans';
}
.site-topbar .siteLogo {
  line-height: 2.8125rem;
  margin: 0;
}
.site-topbar .siteLogo a {
  color: #FFFFFF;
  display: block;
  font-weight: normal;
  padding: 0 0.9375rem;
}
.site-topbar .navbar-nav {
  margin-top: 53px;
}
.site-topbar .nav-link,
.site-topbar .dropdown-item {
  color: #FFFFFF;
  background-color: rgb(30, 30, 45);
  font-family: 'Droid Sans';
  font-size: 17px;
  font-weight: normal;
  height: 45px;
  line-height: 45px;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  transition: none;
}
.site-topbar .nav-link:hover, .site-topbar .nav-link:focus,
.site-topbar .dropdown-item:hover, .site-topbar .dropdown-item:focus {
  color: #FFFFFF;
  background-color: rgb(30, 30, 45);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-topbar .navbar-nav .dropdown-toggle {
  position: relative;
  padding-right: 35px;
}
.site-topbar .dropdown-toggle::after {
  border: inset 5px;
  border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
  border-top-style: solid;
  margin: -2.5px 0.9375rem 0 0;
  position: absolute;
  top: 50%;
  right: 0;
}
.site-topbar .dropdown-menu {
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-bg: rgb(30, 30, 45);
  --bs-dropdown-item-padding-x: 15px;
  --bs-dropdown-item-padding-y: 0;
  --bs-dropdown-min-width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
}
.site-topbar .dropdown-menu-end {
  left: auto;
  right: 0;
}
.site-topbar .dropdown:hover > .dropdown-menu,
.site-topbar .dropdown:focus-within > .dropdown-menu {
  display: block;
}
.site-topbar-divider {
  list-style: none;
  border-right: solid 1px #4e4e4e;
  background-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  width: 0;
  height: 35px;
  margin-top: 5px;
}

/* --- Top bar, small and medium screens ---------------------------------------- */
.site-tabbar {
  position: relative;
  background: rgb(50, 50, 90);
  color: #FFFFFF;
  height: 2.8125rem;
  line-height: 2.8125rem;
  text-align: center;
}
.site-tabbar .siteLogo {
  color: #FFFFFF;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 2.8125rem;
  margin: 0;
  text-align: center;
}
.site-tabbar-button {
  color: #FFFFFF;
  display: block;
  height: 2.8125rem;
  width: 2.8125rem;
  padding: 0;
  position: absolute;
  top: 0;
}
.site-tabbar-button:hover, .site-tabbar-button:focus {
  color: #FFFFFF;
}
.site-tabbar-toggle {
  left: 0;
  border-right: solid 1px #1a1a1a;
}
.site-tabbar-toggle span::after {
  content: "";
  display: block;
  height: 0;
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
  left: 0.90625rem;
  width: 1rem;
  box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
}
.site-tabbar-toggle:hover span::after {
  box-shadow: 0 0 0 1px #b3b3b3, 0 7px 0 1px #b3b3b3, 0 14px 0 1px #b3b3b3;
}
.site-tabbar-end {
  right: 0;
  border-left: solid 1px #1a1a1a;
  text-indent: 0.4rem;
  text-align: left;
}

/* Slide-out menu (Bootstrap offcanvas) */
.site-menu {
  --bs-offcanvas-width: 15.625rem;
  --bs-offcanvas-bg: rgb(50, 50, 90);
  --bs-offcanvas-border-width: 0;
  font-family: 'Droid Sans';
  overflow-y: auto;
}
.site-menu-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.site-menu-list li a {
  border-bottom: 1px solid #262626;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  padding: 1rem 0.66667rem;
  transition: background 300ms ease;
}
.site-menu-list li a:hover, .site-menu-list li a:active {
  background: #242424;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Footer -------------------------------------------------------------------- */
hr.hr_footer {
  border: 0.5px solid;
  color: rgb(80, 80, 100);
}
.site-footer-links {
  float: right;
  margin: 0 0 1.0625rem;
  overflow: hidden;
}
.site-footer-links > .list-inline-item {
  display: block;
  float: left;
  margin: 0 0 0 1.375rem;
}
.site-footer-links > .list-inline-item > * {
  display: block;
}
.footerItem {
  color: rgb(160,160,180);
  font-family:'Droid Sans';
}

/* --- Panel: a bordered box for call-outs ----------------------------------------- */
.panel {
  border: 1px solid #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p, .panel li, .panel dl {
  color: #333333;
}
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
  line-height: 1;
  margin-bottom: 0.625rem;
}
.panel h1.subheader, .panel h2.subheader, .panel h3.subheader, .panel h4.subheader, .panel h5.subheader, .panel h6.subheader {
  line-height: 1.4;
}


/* =============================================================================
   Part 4 - Sanworks classes used by the pages
   ============================================================================= */

.formLabel{
  color:rgb(190,190,190);
  font-size:18px;
}
.formLabelModal{
  color:rgb(0,0,0);
}
.checkboxLabelModal{
  color:rgb(0,0,0);
  font-size:18px;
}
.formInputField{
  background-color: rgb(210,210,210) !important;
}
.requiredStar{
  color: rgb(50,50,200) !important;
}
.requiredStarWhite{
  color: rgb(200,200,200) !important;
}
.formInputFieldModal{
  background-color: rgb(210,210,210) !important;
  font-family:'Droid Sans';
  font-size:1.2rem !important;
  padding-bottom: 0rem;
  padding-top: 0rem;
}
.formInputSelectorModal{
  background-color: rgb(210,210,210) !important;
  font-family:'Droid Sans';
  font-size:1.2rem !important;
  padding-bottom: 0rem;
  padding-top: 0rem;
}
.formInputEditable{
  background-color: rgb(255,255,255) !important;
}
/* --- Tabs (account home) ------------------------------------------------------
   Bootstrap nav-tabs inside <section class="secondary-tabs">: four equal blocks
   across the top of a bordered box. */
.secondary-tabs .nav-tabs {
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-border-radius: 0;
  --bs-nav-link-padding-x: 2rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-size: 1.25rem;
  --bs-nav-link-color: rgb(210,210,210);
  --bs-nav-link-hover-color: rgb(255,255,255);
  --bs-nav-tabs-link-active-color: rgb(255,255,255);
  --bs-nav-tabs-link-active-bg: rgb(50,50,90);
  text-align: center;
}
.secondary-tabs .nav-tabs i {
  font-size: 1.25rem;
  margin-right: 1.25rem;
}
.secondary-tabs .nav-tabs .nav-item {
  font-size: 1.25rem;
  width: 25%;
}
.secondary-tabs .nav-tabs .nav-link {
  background-color: rgb(70,70,110);
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  text-align: center;
  transition: none;
}
.secondary-tabs .nav-tabs .nav-link.active {
  background-color: rgb(50,50,90);
}
.secondary-tabs .nav-tabs .nav-link:hover {
  transition: color,background-color .5s; /*specifies times for transitioning elements*/
  color: rgb(255,255,255);
  background-color: rgb(50,50,90);
}
/* The panes sit in a box 28rem tall with a border on three sides. Longer
   content runs on below the box and the page grows with it. */
.secondary-tabs .tab-content {
  position: relative;
  width: 100%;
  min-height: 29.5rem;
  padding: 0 1px;
}
.secondary-tabs .tab-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28rem;
  border: 1px solid #999;
  border-top: none;
  pointer-events: none;
}
.secondary-tabs .tab-content > .tab-pane {
  padding: 0;
}
.secondary-tabs .tab-content h3 {
  margin-left: 2.7rem;
}
.secondary-tabs .tab-content h5 {
  color: #e74c3c;
  margin-left: 2.7rem;
}
.secondary-tabs .tab-content p {
  margin-bottom: 0.2rem;
}
.secondary-tabs .tab-content .switch {
  margin-bottom: 1rem;
}
/* Avatar picker: a grid of pictures, 3, 6 or 4 to a line depending on width. */
.avatar-grid,
.row.g-0 .row.avatar-grid,
form .row .row.avatar-grid {
  --bs-gutter-x: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0 -0.625rem;
}
.avatar-grid > li {
  padding-bottom: 1.25rem;
}
.switch-on {
  position: absolute;
  left: -55px;
  top: 10px;
  color: white;
  font-weight: bold;
  font-size: 12px;
}
.switch-off {
  position: absolute;
  left: -25px;
  top: 10px;
  color: black;
  font-weight: bold;
  font-size: 12px;
}

.table1 {
  background-color: rgb(40,40,70);
  border-width: 0.1rem;
  border-color: rgb(70,70,70);
  border-collapse: collapse;
}
.tableHeadLeftJustified {
  background-color: rgb(70,70,110) !important;
  color: rgb(210,210,210);
  border-width: 1rem !important;
  border-color: rgb(70,70,90) !important;
  font-size: 1.2rem;
}
.tableHead {
  background-color: rgb(70,70,110) !important;
  color: rgb(210,210,210);
  border-width: 1rem !important;
  border-color: rgb(70,70,90) !important;
  font-size: 1.2rem;
  text-align: center;
  vertical-align: middle;
}
.orderTableHead {
  background-color: rgb(40,40,70) !important;
  color: rgb(210,210,210);
  border-width: 1rem !important;
  border-color: rgb(70,70,90) !important;
  font-size: 1.2rem;
  text-align: center;
  vertical-align: middle;
}
.tableTextLeftJustified {
  color: rgb(210,210,210);
  font-size: 1.2rem;
}
tr:nth-child(even) {
    background-color: transparent !important;
}
tr:nth-child(odd) {
  background-color: transparent !important;
}
.tableText {
  text-align: center;
  vertical-align: middle;
  color: rgb(210,210,210);
  font-size: 1.2rem;
}
.liveTable tr:hover{
  transition: color,background-color .5s !important; /*specifies times for transitioning elements*/
  color: rgb(255,255,255) !important;
  background-color: rgb(50,50,150)!important;
  cursor: pointer;
}
.ui-autocomplete {
  padding: 0;
  list-style: none;
  background-color: #fff;
  width: 218px;
  border: 1px solid #B0BECA;
  max-height: 350px;
  overflow-x: hidden;
}
.ui-autocomplete .ui-menu-item {
  border-top: 1px solid #B0BECA;
  display: block;
  padding: 4px 6px;
  color: #353D44;
  cursor: pointer;
}
.ui-autocomplete .ui-menu-item:first-child {
  border-top: none;
}
.ui-autocomplete .ui-menu-item.ui-state-focus {
  background-color: #D5E5F4;
  color: #161A1C;
}
div.scrollWrapper{
  height:24rem;
  overflow:auto;
  overflow-x: hidden;
}
div.orderScrollWrapper{
  height:23rem;
  overflow:auto;
  overflow-x: hidden;
}

.cartTableData {
  background-color: transparent; !important;
}
.cartTableRow {
  background-color: transparent; !important;
  border-width: 0px 0px 1px 0px;
  border-color: rgb(60,60,60);
  border-style: solid;
}
.cartTableLastRow {
  background-color: transparent; !important;
  border-width: 0px 0px 0px 0px;
  border-color: rgb(60,60,60);
  border-style: solid;
}
.cartTable {
  background-color: transparent; !important;
  border-collapse:collapse;
  width: 100%;
}
.cartTotal {
  background-color: rgb(30,30,45);
  border-color: rgb(30,30,45);
  color: rgb(220,220,220);
  border-collapse:collapse;
  font-family:'Droid Sans';
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
/* --- Checkout drop-down panels (Bootstrap dropdowns) ---------------------------
   Each step of the checkout is a wide button that opens a panel underneath it. */
.checkoutDropMenu.dropdown-toggle {
  position: relative;
  padding-right: 3.625rem;
  font-size: 1.25rem;
}
.checkoutDropMenu.dropdown-toggle::after {
  position: absolute;
  top: 50%;
  right: 1.71875rem;
  margin: -0.15625rem 0 0;
  border-style: solid;
  border-width: 0.3125rem;
  border-color: #FFFFFF transparent transparent transparent;
}
.checkout-menu {
  --bs-dropdown-min-width: 0;
  --bs-dropdown-padding-x: 1.25rem;
  --bs-dropdown-padding-y: 1.25rem;
  --bs-dropdown-font-size: 0.875rem;
  --bs-dropdown-bg: #FFFFFF;
  --bs-dropdown-border-color: #cccccc;
  --bs-dropdown-border-radius: 0;
  width: 100%;
  max-width: 200px;
}
.checkout-menu::before, .checkout-menu::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
}
.checkout-menu > :first-child { margin-top: 0; }
.checkout-menu > :last-child { margin-bottom: 0; }
.checkout-menu::before {
  top: -12px;
  left: 8px;
  border: inset 6px;
  border-color: transparent transparent #FFFFFF transparent;
  border-bottom-style: solid;
  z-index: 2;
}
.checkout-menu::after {
  top: -14px;
  left: 7px;
  border: inset 7px;
  border-color: transparent transparent #cccccc transparent;
  border-bottom-style: solid;
  z-index: 1;
}
.checkout-menu-large {
  max-width: 800px;
}
@media (max-width: 575.98px) {
  .checkout-menu {
    width: 95%;
    max-width: none;
  }
  .checkout-menu::before {
    left: 15px;
  }
  .checkout-menu::after {
    left: 14px;
  }
}
/* The address and shipping lists are as wide as the column, with the pointer
   under the middle of the button. (shop/checkout.php positions the panels.) */
.checkout-menu-mega {
  width: 100% !important;
  max-width: 100% !important;
}
.checkout-menu-mega::before {
  left: calc(50% - 8px);
}
.checkout-menu-mega::after {
  left: calc(50% - 9px);
}
#drop1, #drop2, #drop3 {
  width: auto;
  max-width: none;
  background-color: rgb(0,0,0);
  border-color: rgb(70,70,70);
  margin: 0px;
  padding: 0px;
}
#drop4, #drop5 {
  background-color: rgb(40,40,70);
  border-color: rgb(70,70,70);
  border-radius: 0.5rem;
}
/* Product cards on the shop page. A card is at least this tall, so short cards
   line up as they always have, and grows when its photo, name and tagline need
   more room (wide windows, zoomed-out browsers). Cards in the same row of the
   grid stretch to the tallest one, so the rows stay even. */
.shopRow {
  min-height: 400px;
}
.shopRow_admin {
  min-height: 230px;
}
@media (max-width: 575.98px) {
  .shopRow, .shopRow_admin {
     min-height: 0;
     width: 100%;
  }
}

.shopImage {
  /*border:1px solid rgb(140,140,140);*/
  width: 100%;
  border-radius: 0.25rem;
}
.shopThumbnail {
  width: 100%;
  border:0px solid rgb(190,190,190);
}
.shopThumb img{
  transition: 0.3s ease;
  border-radius: 0.25rem;
}
.shopThumb img:hover{
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  transition: 0.3s ease;
}
.shopSpecs{
  font-family: Droid Sans;
  color: rgb(210,210,210);
}
.shopBullet{
  margin-bottom: 0.6rem;
}
/* Frame around a product photo on the shop page. The photo fills the frame, so
   the photo and the name and tagline under it share the same left and right
   edges however wide the card is. */
.image-wrapper {
  width: 100%;
  margin: 5px 0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  text-align: center; }
.image-wrapper img {
  width: 100%; }

.communityblob {
  position: absolute;
}

.image-overlay-content {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0; }

.overlay-fade-in img {
  transition: all 0.2s linear; }
.overlay-fade-in .image-overlay-content {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.4s ease-in-out; }
  .overlay-fade-in h4 {
    margin-top: 13px;
  }
.overlay-fade-in h2 {
  color: #f2f2f2;
  font-size: 1.6rem;
  margin-top: 56%;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  background: rgba(0, 0, 0, 0.7); }
  .overlay-fade-in h3 {
    color: #f2f2f2;
    font-size: 1.8rem;
    margin-top: 5%;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    background: rgba(0, 0, 0, 0.7); }
  .overlay-fade-in .button:hover {
    box-shadow: 0 0 5px #000; }
.overlay-fade-in:hover img {
  transform: scale(1.05); }
.overlay-fade-in:hover .image-overlay-content {
  opacity: 1;}
.overlay-fade-in:hover h2, .overlay-fade-in p, .overlay-fade-in .button {
  opacity: 1; }
  .overlay-fade-in:hover h3, .overlay-fade-in p, .overlay-fade-in .button {
    opacity: 1; }
.overlay-fade-in:hover p {
  transition-delay: 0.1s; }
  /* A product card: photo, name and tagline. It is at most 30rem wide, so the
     largest thumbnails (450px) are never stretched; in a wider column the
     card sits in the middle. */
  .item-wrapper {
    max-width: 30rem;
    margin: 20px auto 0;
    padding: 7px 14px 5px;
    border: 0px solid rgb(100,100,100);
    border-radius: 7px;
  }
  /* The product name sits midway between the photo and the tagline: the gap
     from the photo to the tops of its capitals equals the gap from its
     baseline to the tops of the tagline's capitals (16.5px each).
     The top margin replaces the photo frame's 5px bottom margin (the two
     collapse into one), so 9.5px + 3.5px keeps the tagline exactly where the
     default heading margins put it. */
  .item-wrapper > h4 {
    margin-top: 0.59375rem;
    margin-bottom: 0.21875rem;
  }
  .item-wrapper:hover .img-wrapper img {
    -webkit-filter: grayscale(0);
  }
  .item-wrapper:hover .img-wrapper .add-to-cart {
    bottom: 0;
  }
.productFamilySelector {
  border-radius: 0.8rem;
  border-color: rgb(50,50,50);
  border-width: 1px;
  background-color: rgba(0,0,0,.2);
  color: rgb(210,210,210);
  border-style: solid;
  padding: 1rem;
}
.contactTable {
  color: rgb(200,200,200);
  font-size: 1.2rem;
  font-family: Droid Sans;
}
.aboutAccordion {
  font-family: Droid Sans;
  text-align: justify;
  color: rgb(210,210,210) !important;
  background-color: rgba(0,0,0,0) !important;
}
.aboutAccordionTitle {
  font-size: 1.5rem !important;
}
.glowing-border {
    border: 2px solid rgb(30,30,50);
    border-radius: 7px;
}

.glowing-border:focus {
    outline: none;
    border-color: rgb(50,50,70);
    box-shadow: 0 0 10px rgb(120,120,200);
}
.glowing-border-focused {
    outline: none;
    border-color: rgb(90,90,150);
    box-shadow: 0 0 15px rgb(210,210,255);
}
.checkoutDropMenu {
  font-family: Droid Sans;
  font-size: 1.2rem;
  border-radius: 0.5rem;
  width: 100%;
}
/* ---------------------------------------------------------------------------
   Page headings
   Each page's main heading is its <h1>, for search engines and screen readers.
   These classes keep the size the heading had as an <h2> or <h3>, so promoting
   it to <h1> does not change how the page looks.
   --------------------------------------------------------------------------- */
h1.h1-as-h2 { font-size: 1.6875rem; }
h1.h1-as-h3 { font-size: 1.375rem; }
@media (min-width: 576px) {
  h1.h1-as-h2 { font-size: 2.3125rem; }
  h1.h1-as-h3 { font-size: 1.6875rem; }
}


/* ---------------------------------------------------------------------------
   Home page headlines (Bootstrap carousel)
   Arrows at the sides, "1 of 3" and a progress bar on top, dots underneath.
   --------------------------------------------------------------------------- */
.site-headlines {
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.site-headlines .carousel-control-prev,
.site-headlines .carousel-control-next {
  top: 45%;
  bottom: auto;
  width: 36px;
  height: 60px;
  margin: -25px 0 0;
  opacity: 1;
  background-color: transparent;
  z-index: 10;
  transition: none;
}
.site-headlines .carousel-control-prev:hover,
.site-headlines .carousel-control-next:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
.site-headlines .carousel-control-prev-icon,
.site-headlines .carousel-control-next-icon {
  background: none;
  width: 0;
  height: 0;
  border: inset 10px;
  filter: none;
  position: absolute;
  top: 50%;
  margin-top: -10px;
}
.site-headlines .carousel-control-prev-icon {
  border-color: transparent #FFFFFF transparent transparent;
  border-right-style: solid;
  left: 0;
}
.site-headlines .carousel-control-next-icon {
  border-color: transparent transparent transparent #FFFFFF;
  border-left-style: solid;
  left: 14px;
}
.site-headlines-number {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1.5;
}
.site-headlines-number span {
  font-weight: 700;
  padding: 0.3125rem;
}
.site-headlines-timer {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 100px;
  height: 6px;
  z-index: 10;
}
.site-headlines-progress {
  position: relative;
  top: 5px;
  right: 20px;
  width: 0;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.3);
}
.site-headlines-progress.running {
  animation: site-headlines-progress linear forwards;
}
@keyframes site-headlines-progress {
  from { width: 0; }
  to { width: 100%; }
}
.site-headlines .carousel-indicators {
  position: relative;
  top: 10px;
  align-items: center;
  height: 1.6rem;
  margin: 0 auto 30px;
}
.site-headlines .carousel-indicators [data-bs-target] {
  box-sizing: border-box;
  width: 0.5625rem;
  height: 0.5625rem;
  margin: 0 6px 0 0;
  border: 0;
  border-radius: 1000px;
  background-color: #CCCCCC;
  opacity: 1;
  transition: none;
}
.site-headlines .carousel-indicators [data-bs-target]:last-child {
  margin-right: 0;
}
.site-headlines .carousel-indicators .active {
  background-color: #999999;
}
/* Every slide stays in the layout (hidden), so the box is always as tall as the
   tallest headline and the page below does not jump when the slide changes. */
.site-headlines .carousel-inner {
  display: flex;
}
.site-headlines .carousel-item {
  display: block;
  flex: 0 0 100%;
  visibility: hidden;
}
.site-headlines .carousel-item.active,
.site-headlines .carousel-item-next,
.site-headlines .carousel-item-prev {
  visibility: visible;
}
/* Phones: swipe only, no arrows, progress bar or dots. */
@media (max-width: 575.98px) {
  .site-headlines .carousel-control-prev,
  .site-headlines .carousel-control-next,
  .site-headlines-timer,
  .site-headlines .carousel-indicators {
    display: none;
  }
}

/* While the slide-out menu is open the page moves aside with it, rather than
   being covered. sanworks.js sets .site-menu-open on <body> while the menu is
   open and .site-menu-closing while it slides shut. The glide applies only in
   those two states, so things Bootstrap places with a transform at other times
   (popovers, tooltips, drop-downs added to <body>) appear in place. */
body.site-menu-open > :not(.offcanvas):not(.offcanvas-backdrop),
body.site-menu-closing > :not(.offcanvas):not(.offcanvas-backdrop) {
  transition: transform 500ms ease;
}
body.site-menu-open > :not(.offcanvas):not(.offcanvas-backdrop) {
  transform: translate3d(15.625rem, 0, 0);
}
.site-menu {
  transition-duration: 500ms;
  transition-timing-function: ease;
}
body.site-menu-open > .offcanvas-backdrop {
  left: 15.625rem;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Image gallery: a list of framed thumbnails, <ul class="site-gallery" data-gallery>.
   Clicking one opens the full-size pictures in a full-screen viewer, which
   sanworks.js builds from a Bootstrap modal and carousel.
   --------------------------------------------------------------------------- */
.site-gallery {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
  padding: 0;
}
.site-gallery > li {
  margin-right: 10px;
}
.site-thumb {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border: solid 4px #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: all 200ms ease-out;
}
.site-thumb:hover, .site-thumb:focus {
  box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5);
}

.site-lightbox {
  --bs-modal-bg: #333333;
  --bs-modal-padding: 0;
  --bs-modal-border-width: 0;
  --bs-modal-margin: 0px;
}
.site-lightbox .modal-dialog {
  max-width: none;
}
.site-lightbox .modal-content {
  box-shadow: none;
  overflow: hidden;
}
.site-lightbox .carousel-item {
  position: relative;
  height: 100vh;
  background: #333333;
}
.site-lightbox .carousel-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}
.site-lightbox-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 10px 30px 20px;
  background: #333333;
  color: #CCCCCC;
  font-size: 0.875em;
  line-height: 1.3;
  text-align: center;
}
.site-lightbox-close {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 3;
  padding: 0;
  border: 0;
  background: none;
  color: #CCCCCC;
  font-size: 30px;
  line-height: 1;
}
.site-lightbox-close:hover, .site-lightbox-close:focus {
  color: #CCCCCC;
}
.site-lightbox .carousel-control-prev,
.site-lightbox .carousel-control-next,
.site-lightbox .carousel-indicators {
  display: none;
}
@media (min-width: 576px) {
  .site-lightbox .carousel-item {
    height: calc(100vh - 135px);
  }
  .site-lightbox .carousel-control-prev,
  .site-lightbox .carousel-control-next {
    display: block;
    width: 40px;
    height: calc(100vh - 135px);
    bottom: auto;
    opacity: 1;
    transition: none;
  }
  .site-lightbox .carousel-control-prev-icon,
  .site-lightbox .carousel-control-next-icon {
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    background: none;
    border: solid 12px;
    filter: none;
  }
  .site-lightbox .carousel-control-prev-icon {
    left: 5px;
    border-color: transparent #CCCCCC transparent transparent;
  }
  .site-lightbox .carousel-control-next-icon {
    left: 0;
    border-color: transparent transparent transparent #CCCCCC;
  }
  .site-lightbox .carousel-indicators {
    display: flex;
    position: static;
    height: 120px;
    margin: 10px 0 0;
    padding-top: 8px;
    overflow: hidden;
    background: rgba(51, 51, 51, 0.8);
  }
  .site-lightbox .carousel-indicators [data-bs-target] {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-indent: 0;
    opacity: 0.4;
    transition: none;
  }
  .site-lightbox .carousel-indicators [data-bs-target].active {
    opacity: 1;
  }
  .site-lightbox .carousel-indicators img {
    width: 120px;
    height: 120px;
  }
}

/* ---------------------------------------------------------------------------
   .row-block: a row that holds ordinary content (a heading, a button, a list)
   instead of columns. It takes up the same space a .row would, including the
   pull-back when nested inside a column, but its content flows normally.
   --------------------------------------------------------------------------- */
.row-block {
  --bs-gutter-x: 1.875rem;
  display: flow-root;
  margin-left: auto;
  margin-right: auto;
}
.row .row-block, .row-block .row, .row-block .row-block {
  margin-left: calc(-0.5 * var(--bs-gutter-x));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
}
form .row .row-block, form .row-block .row, form .row-block .row-block {
  --bs-gutter-x: 1rem;
}

/* ---------------------------------------------------------------------------
   "Item added" tip that points at the cart icon (a Bootstrap popover with the
   class cart-tip; see shop/viewproduct.php).
   --------------------------------------------------------------------------- */
.cart-tip {
  --bs-popover-bg: rgb(180, 180, 180);
  --bs-popover-border-width: 0px;
  --bs-popover-border-radius: 5px;
  --bs-popover-max-width: 10rem;
  --bs-popover-body-color: #FFFFFF;
  --bs-popover-arrow-width: 20px;
  --bs-popover-arrow-height: 10px;
  --bs-popover-font-size: 1rem;
  width: 10rem;
  font-family: inherit;
  box-shadow: none;
}
.cart-tip .popover-body {
  padding: 1.125rem 1.25rem 1.5rem;
}
.cart-tip h5 {
  color: rgb(0, 0, 0);
  font-weight: bold;
  line-height: 1.25;
  margin: 0;
}
.cart-tip .btn {
  margin-bottom: 0;
}
.cart-tip[data-popper-placement^="bottom"] > .popover-arrow::after,
.cart-tip[data-popper-placement^="bottom"] > .popover-arrow::before {
  border-bottom-color: rgb(150, 150, 150);
}
.cart-tip[data-popper-placement^="top"] > .popover-arrow::after,
.cart-tip[data-popper-placement^="top"] > .popover-arrow::before {
  border-top-color: rgb(150, 150, 150);
}
/* Under the top bar the tip lines up with the left edge of the cart icon and
   its arrow sits near that edge. */
.cart-tip-start > .popover-arrow {
  left: 22px !important;
  transform: none !important;
}
.cart-tip-close {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #777777;
  font-size: 24px;
  font-weight: normal;
  line-height: 0.5;
}
.cart-tip-close:hover, .cart-tip-close:focus {
  color: #EEEEEE;
}

/* ---------------------------------------------------------------------------
   Pills and pagination (sandbar order list)
   --------------------------------------------------------------------------- */
.nav-pills {
  --bs-nav-pills-border-radius: 3px;
  --bs-nav-pills-link-active-bg: #008CBA;
  --bs-nav-pills-link-active-color: #FFFFFF;
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.1875rem;
  --bs-nav-link-disabled-color: #999999;
  --bs-nav-link-color: #999999;
  --bs-nav-link-hover-color: #737373;
}
.pagination {
  --bs-pagination-padding-x: 0.625rem;
  --bs-pagination-padding-y: 0.0625rem;
  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-color: #999999;
  --bs-pagination-bg: transparent;
  --bs-pagination-border-width: 0;
  --bs-pagination-border-radius: 3px;
  --bs-pagination-hover-color: #999999;
  --bs-pagination-hover-bg: #e6e6e6;
  --bs-pagination-focus-color: #999999;
  --bs-pagination-focus-bg: #e6e6e6;
  --bs-pagination-active-color: #FFFFFF;
  --bs-pagination-active-bg: #008CBA;
  --bs-pagination-disabled-color: #999999;
  --bs-pagination-disabled-bg: transparent;
}
.pagination .page-link {
  border-radius: 3px;
}