@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

:root {
  --mainblue: #466587;
  --topgradient: #fcfcfc;

  --fademask: linear-gradient(
    90deg,
    transparent 0%,
    #000 3%,
    #000 97%,
    transparent 100%
  );
}

:root,
[data-theme="light"] {
  --color1: #fdfdfd;
  --color2: #d2d4d9;
  --color3: #466587;
  --colortext: black;
  --colorlink: darkcyan;

  --coolcolor: #abc5;
  --coolcolorhover: #9ab9;

  --headercolor1: #fdfdfd;
  --headercolor2: #f7f7f7; /*#f4f9fc;*/
  --headercolor3: #fcfcfc;
  --headertextcolor: #1d2940;
  --headertextcolorhover: #074163;
  --headericons: #78858d;
  --headericonsaccent: #155287;
  --headertop: #333;

  --BGgradient1: #fafafa;
  --BGgradient2: #eee;
  --BGlighter: #eaeef5; /*#dfe8f7*/
  --BGlighter2: #f2f8f8; /*#eaeaf5*/

  --nightfilter: unset;
  --shapesfilter: contrast(0.75) brightness(0.55) sepia(2) hue-rotate(165deg);
  --dayinvert: invert(1);
  --nightbright: unset;
  --shadowcolor: #fff6;

  --toggleicon: "\f186";
  --toggletext: "LIGHT";
}

[data-theme="dark"] {
  --color1: #33425c;
  --color2: #7a8191;
  --color3: white;
  --colortext: white;
  --colorlink: lightcyan;

  --coolcolor: #abc9;
  --coolcolorhover: #bcd9;

  --headercolor1: #466587;
  --headercolor2: #083b59;
  --headercolor3: #174d6d;
  --headertextcolor: white;
  --headertextcolorhover: #ddd;
  --headericons: #ccc;
  --headericonsaccent: cyan;
  --headertop: white;

  --BGgradient1: linear-gradient(0deg, #16203b 0%, #242d42 100%);
  --BGgradient2: #3e434f; /*linear-gradient(180deg, #606a74 0%, #292b38 100%);*/
  --BGlighter: #193d53;
  --BGlighter2: #2f4653; /*#56678f*/

  --nightfilter: saturate(3.5) hue-rotate(180deg) brightness(0.9);
  --shapesfilter: contrast(0.5) brightness(2);
  --dayinvert: unset;
  --nightbright: brightness(100);
  --shadowcolor: #0006;

  --toggleicon: " \f185";
  --toggletext: "DARK";
}

#themecheckbox {
  min-width: fit-content;
}
#themecheckbox,
#topcart {
  appearance: none;
  font: normal normal normal 20px / 1 FontAwesome;
  cursor: pointer;
  margin: auto;
  transition: background-color 0.15s;
  height: 100%;
  display: flex;
  align-items: center;
}
#themecheckbox:before {
  content: var(--toggleicon);
  text-align: center;
  position: relative;
  display: block;
  /* width: 100%;
	top: 6px; */
  margin-left: 10px;
  color: white;
  background: #9993;
  padding: 2px 6px;
  border-radius: 100px 0 0 100px;
  filter: var(--dayinvert) opacity(0.7);
}
#themecheckbox:after {
  content: var(--toggletext);
  font-family: "Manrope";
  display: inline-block;
  font-size: 12px;
  padding: 6px 7px 6px 0;
  margin-right: 10px;
  background: #9993;
  border-radius: 0 100px 100px 0;
  letter-spacing: 0.5px;
}
.legacy-content
  :where(*:not(dialog, table, table *), *::before, *::after, *::backdrop, *::file-selector-button) {
  /*margin: revert;
  padding: revert;
  box-sizing: revert;*/
  all: revert;
  color: inherit;
  border: none;
  font-family: "Manrope", sans-serif;
  line-height: 1em;
}
/* ========== LEGACY SCOPED STYLES ========== */
/* These styles only apply within .legacy-content to avoid conflicts with new layout */
.legacy-content {
  overflow-x: hidden;
  overflow-y: hidden;
  backface-visibility: hidden;
}
.legacy-content ::before, .legacy-content ::after {
	box-sizing: revert;
}
/*.legacy-content {
  background: var(--BGlighter2);
}*/
.legacy-content h1,
.legacy-content h2,
.legacy-content h3,
.legacy-content h4,
.legacy-content h5,
.legacy-content h6,
.legacy-content a,
.legacy-content button,
.legacy-content input {
  font-family: "Manrope", sans-serif;
  line-height: 1em;
  text-decoration: none;
  /* color: var(--colortext); */
  /*font-size: revert;*/ /* Quay về browser default */
}
.legacy-content p {
  line-height: 1.25em;
}
.legacy-content h1,
.legacy-content h2 {
  color: var(--headertextcolor);
}
.legacy-content h1,
.legacy-content h2,
.legacy-content h3 {
  text-align: center;
  font-weight: 300;
}
.legacy-content :where(button, input) {
  accent-color: #466587;
  border: none;
  background: none;
  color: inherit;
}
.legacy-content select {
  font-family: "Manrope", sans-serif;
}

.legacy-content *:focus-visible {
  outline: none;
}

.legacy-content *:has(font):after,
.legacy-content font + i {
  margin-left: 4px;
}
.legacy-content i:has(+ font) {
  margin-right: 4px;
}

.legacy-content img {
  align-content: center;
  text-wrap: balance;
  color: var(--colortext);
}

/* ========== GLOBAL STYLES (not scoped) ========== */
/* These apply globally as they're needed for legacy pages */
.legacy-content ul {
  list-style-type: disc;
}
html.legacy-page {
  scroll-behavior: smooth;
  scroll-padding: 100px auto 10px;
}
html.legacy-page,
html.legacy-page body {
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: clip;
  min-height: 100%;
}

.fa {
  user-select: none;
  font-family: "FontAwesome";
  text-decoration: inherit;
}

.placeholderBG {
  background: #0003 url("/static/img/icons/loading.svg") center/50% no-repeat;
}

.sectionBG {
  background: var(--color1);
  height: 800px;
  position: relative;
}
.starBG > * {
  z-index: initial;
}
.subtlestars:before,
.subtlestars:after {
  opacity: 0.1 !important;
}

[data-theme="dark"] .starBG:before,
[data-theme="dark"] .starBG:after {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  position: absolute;
  height: 100%;
  background-image: url(/static/img/stars.png);
  opacity: 0.5;
  background-repeat: round repeat;
  animation: starscroll 4000s linear infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
[data-theme="dark"] .starBG:after {
  background-repeat: repeat repeat;
  animation: starscroll 2800s linear infinite;
  transform: scaleX(-100%);
  background-position-x: 60%;
}
@keyframes starscroll {
  0% {
    background-position-y: 0px;
  }
  100% {
    background-position-y: -100000px;
  }
}

.anchor {
  display: block;
  position: relative;
  top: -110px;
  visibility: hidden;
}

#skipper {
  position: fixed;
  left: 0;
  top: -140px;
  z-index: 10;
  background: linear-gradient(
    160deg,
    var(--headertextcolor) 40%,
    #0006 40.5%,
    #0000 45%
  );
  color: var(--color1);
  width: 360px;
  height: 130px;
  padding: 20px 15px 0;
  pointer-events: none;
  transition: top 0.35s;
}
#skipper:focus-visible {
  text-decoration: underline;
  top: 0;
}

#topall {
  position: sticky;
  top: 0;
  z-index: 5;
}

#top {
  position: relative;
  top: 0;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 3px #0006;
  z-index: 5;
  margin-bottom: 55px;
  background-color: var(--headercolor1);
}

#topnav {
  position: fixed;
  top: 0;
}

#topnav,
#toplogoutbtn {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: stretch;
}

#topnav a,
#toplogoutbtn {
  padding: 0 8px;
  text-align: center;
  transition: background-color 0.15s;
  display: flex;
  align-items: center;
}

#topnav a h5,
#toplogoutbtn {
  margin: 0;
  font-weight: 400;
  text-align: center;
  font-size: clamp(12px, 1.5vw, 14px);
  color: var(--headertop);
  max-width: 20vw;
  text-overflow: ellipsis;
  overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

#topnav a:hover,
#topnav a:focus,
#themecheckbox:hover,
#themecheckbox:focus-visible,
#toplogoutbtn:hover,
#toplogoutbtn:focus {
  color: var(--colortext);
  background-color: var(--coolcolor);
  cursor: pointer;
}
#topnav a:hover > h5,
#topnav a:focus > h5 {
  color: var(--colortext);
}

#topcart:hover > div,
#topcart:focus > div {
  text-shadow: 0 0 var(--headercolor2);
  color: var(--coolcolor);
}

#topnav #metalsummary {
  padding-left: 11px;
  flex-direction: column;
  justify-content: center;
  min-width: 160px;
  line-height: 16px;
  position: relative;
  transition: opacity 0.25s;
}
#topnav #metalsummary:hover,
#metalsummary:focus {
  opacity: 1;
}
#topnav #metalsummary h5 {
  font-size: clamp(11px, 1.8vw, 14px);
  text-transform: capitalize;
  word-spacing: 2px;
  max-width: unset;
  text-overflow: unset;
  overflow: visible;
  white-space: unset;
}
#topnav #metalsummary > h5 .firstphrase:has(+ font) {
  display: none;
}
#topnav #metalsummary > h5:first-child {
  word-spacing: normal;
}
#topnav #metalspanner {
  animation: mspanner paused 5s ease infinite -4s;
}
@keyframes mspanner {
  0%,
  100% {
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
}
#topnav #metalsummary > div {
  position: absolute;
  top: 20px;
  left: 0;
  background: var(--headercolor1);
  width: 100%;
  opacity: 0;
  pointer-events: none;
  line-height: 17px;
  padding: 3px 0;
  transition: opacity 0.5s;
}
#topnav #metalsummary:hover > div,
#topnav #metalsummary:focus > div {
  opacity: 1;
}
@media (min-width: 1650px) {
  #topnav #metalsummary:hover > div,
  #topnav #metalsummary:focus > div {
    pointer-events: all;
  }
}

#topnav > div {
  width: 35%;
  height: 100%;
  flex-grow: 1;
  display: flex;
}

#mobilenavbtn {
  display: none;
  font-size: 29px;
  padding: 11px;
  background-color: white;
  border: solid 2px white;
  color: black;

  position: absolute;
  margin-right: 252px;
  right: -252px;
  transition: right 0.35s, margin-right 0.05s, box-shadow 0.65s, width 0.35s;
  z-index: 2;
}
#mobilenavbtn:hover,
#mobilenavbtn:focus {
  background-color: #eee;
}

.topspacefill {
  flex-grow: 1;
}

#topnav #topcart {
  position: relative;
  width: 100%;
  justify-content: center;
}

#topcart:before {
  content: "";
  position: absolute;
  left: 17px;
  border-radius: 100%;
  width: 20px;
  background: white;
}
#topcart.adjusted:before {
  animation: cartthrob 2s;
}
@keyframes cartthrob {
  0%,
  100% {
    height: 0;
    box-shadow: 0 20px 10px 0 white;
  }
  50% {
    height: 150px;
    box-shadow: 0 20px 10px 20px white;
  }
}
#topcart > div {
  position: absolute;
  text-align: center;
  color: var(--headercolor3);
  top: 10px;
  width: 50%;
  padding: 0 8px;
  font-size: 14.5px;
  font-family: "Manrope", sans-serif;
  margin-left: clamp(39px, 5vw, 44px);
}
#topcart > img {
  width: 36px;
  filter: var(--dayinvert) opacity(0.7); /*contrast(0.5) sepia(1) hue-rotate(165deg) saturate(2);*/
}
#topcart span {
  font-family: "Manrope", sans-serif;
  font-size: clamp(12px, 1.5vw, 14px);
  text-transform: uppercase;
  color: black;
}
#topcart span:has(~ #cartx.hidden) {
  color: var(--headertop);
}

#topnav #callus {
  position: relative;
}
#topnav #callus i {
  font-size: 17px;
  padding-right: 5px;
}

#topbtns,
#toplogoutbtn {
  display: flex;
  height: 40px;
  justify-content: center;
}

#topsearchform {
  position: relative;
  width: fit-content;
}
#topsearch {
  margin: 11px 0 12px;
  background-color: white; /*#e3e8ee*/
  color: black;
  padding-right: 20px;
  border-radius: 5px;
  min-width: 108px;
  width: 25vw;
  max-width: 230px;
  box-shadow: 0 0 0 1px #0007;
  position: relative;
  z-index: 1;
}
#topsearch::placeholder {
  color: #222;
  text-align: center;
}
#topsearch.searchfocus {
  animation: bigfocus 5s linear;
}
@keyframes bigfocus {
  0%,
  100% {
    box-shadow: 0 0 0 1px var(--color2), 0 0 0 2000px #0000;
  }
  10%,
  20% {
    box-shadow: 0 0 0 1px var(--color2), 0 0 0 2000px #0003;
  }
}

#topsearchbtn,
#topsearchform .fa-search {
  position: absolute;
  right: 0;
  margin: 11px 0;
  color: var(--mainblue);
  cursor: pointer;
  width: 18px;
  z-index: 1;
}
#topsearchform .fa-search:has(+ #topsearchbtn:focus) {
  background: var(--mainblue);
  color: white;
  border-radius: 0 5px 5px 0;
  font-size: 15px;
  padding: 1px 0 1px 2px;
}

#topsearchresults {
  display: none;
  margin: auto;
  position: fixed;
  top: 32px;
  left: 0;
  width: 100%;
  max-height: 250px;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px #0006);
}
#topsearchresults > div {
  overflow: hidden auto;
  width: 228px;
  pointer-events: all;
}
#topsearchresults > div > h4 {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 7px 0;
  color: #112532;
  background: #fffb;
  text-indent: 5px;
  font-weight: 400;
  z-index: 2;
}
#topsearchresults > div:empty,
#topsearchresults > div:empty + div > h4,
#topsearchresults > div:has(+ div:empty) > h4 {
  display: none;
}
#topsearchresults > div:empty ~ .viewallsearch {
  width: 212px;
}
#topsearchresults > div > a {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  color: black;
  font-size: 14px;
  padding: 0;
  gap: 5px;
  line-height: 1;
  min-height: 36px;

  /*background-size: 155px;
	background-position: 150%;
	background-blend-mode: multiply;
	background-repeat: no-repeat;*/
  /*text-shadow: 1px 1px 0 white, 1px -1px 0 white, 1px 0 0 white, 0 -2px 5px white, 0 2px 5px white;*/
  position: relative;
  box-shadow: 280px 0 20px -20px white inset;
  mix-blend-mode: darken;
  transition: box-shadow 0.35s;
}
#topsearchresults > div a:not(#emptysearchresults):before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--coolcolor);
  box-shadow: 280px 0 20px -20px white inset;
  transition: box-shadow 0.35s;
}
#topsearchresults > div a > img:first-child {
  width: 43px;
  height: 43px;
  object-fit: contain;
  transition: transform 0.35s;
  z-index: 1;
}
#topsearchresults > div a > img + img {
  width: 155px;
  height: 100%;
  object-fit: cover;
  object-position: 29px 50%;
  position: absolute;
  right: 0;
  mix-blend-mode: darken;
  z-index: -1;
}
#topsearchresults > div a > span {
  z-index: 1;
}
.outlineonly {
  position: absolute;
  left: 48px;
  -webkit-text-stroke: 3px white;
  filter: drop-shadow(0px 0px 3px white);
}
#topsearchresults > div a:last-child {
  overflow: clip;
}
#topsearchresults > div a:focus,
#topsearchresults > div a:hover {
  z-index: 1;
}
#topsearchresults > div a:focus:before,
#topsearchresults > div a:hover:before {
  box-shadow: 100px 0 20px -20px white inset !important;
}
#topsearchresults > div a:focus > img:first-child,
#topsearchresults > div a:hover > img:first-child {
  transform: scale(1.5);
}
.collimg:not([src$="svg"]) {
  padding-left: 5px;
  background: white;
}
.collimg[src$="svg"] {
  padding-left: 5px;
  filter: url(#lighticons) saturate(0.1) brightness(0.95) contrast(1.5);
}
.collimg + .outlineonly {
  left: 53px;
}
#topsearchresults .collimg[src*="/shapes"] {
  height: 28px;
}
#topnav .viewallsearch {
  display: none;
  background: #eaeef5;
  justify-content: center;
  border-radius: 0 0 5px 5px;
  height: 26px;
  padding-bottom: 4px;
  box-shadow: 0 0 3px #9999;
  color: black;
  position: absolute;
  top: 100%;
  width: 440px;
  pointer-events: all;
  font-size: 15px;
}
#topsearchform:focus-within #topsearchresults,
#topsearchform:focus-within
  div:has(a:not([href*="lot_number"]):nth-child(10))
  ~ #vas1,
#topsearchform:focus-within
  #tscoll:has(a[href*="lot_number"]:nth-child(10))
  ~ #vas2 {
  display: flex;
  justify-content: center;
}
#topsearchform:focus-within #topsearch:has(~ #topsearchresults a) {
  border-radius: 5px 5px 0 0;
}

#topsearchresults a:focus {
  background-color: var(--coolcolor);
}
#topnav .viewallsearch:focus,
#topnav .viewallsearch:hover,
#topsearchresults > div {
  background-color: white;
}

#topsearchform:focus-within
  #tsprod:has(a:nth-child(10))
  + #tscoll:has(a[href*="lot_number"]:nth-child(10))
  ~ #vas1 {
  width: 212px;
  margin-right: 228px;
  border-bottom-right-radius: 0;
}
#topsearchform:focus-within
  #tsprod:has(a:nth-child(10))
  + #tscoll:has(a[href*="lot_number"]:nth-child(10))
  ~ #vas2 {
  width: 212px;
  margin-left: 228px;
  border-bottom-left-radius: 0;
}

#topsearchresults #emptysearchresults {
  justify-content: center;
  font-style: italic;
  pointer-events: none;
  opacity: 0.75;
}

#emptysearchresults > img {
  filter: invert(1);
  transform: scale(0.5);
  margin-left: -13px;
}

/* ALERT MESSAGES */

#systemmessages {
  position: fixed;
  z-index: 1000;
  /*top: 85px;*/
  width: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.sysmessage {
  margin: 0 auto 5px;
  text-align: center;
  min-width: 300px;
  /*width: fit-content;
	max-width: 600px;
	text-wrap: balance;*/
  min-height: 50px;
  color: white;
  position: relative;
  font-weight: 500;
  border-radius: 250px;
  box-shadow: 0 1px 5px #0009;
  transition: top 0.5s ease, opacity 0.25s ease;
  top: -150px;
  opacity: 0;
  cursor: pointer;
  pointer-events: all;
  background-color: var(--mainblue);
}

.sysmessage > p {
  padding-left: 45px;
  padding-right: 10px;
}

.sysmessage > p > a {
  color: white;
  text-decoration: underline;
}

.sysmessage:before {
  font: normal normal normal 28px/1 FontAwesome;
  position: absolute;
  left: 15px;
  height: 100%;
  display: flex;
  align-items: center;
  content: "\f071";
}

.good {
  background-color: #0bb335;
}
.good:before {
  content: "\f00c";
}
.bad {
  background-color: #ec3c3c;
}
.bad:before {
  content: "\f00d";
}
.aria {
  opacity: 0 !important;
  position: absolute;
}

/* BOTTOM NAVIGATION BAR */

#navmain {
  position: fixed;
  top: 40px;
  z-index: 4;

  width: 100%;
  padding-left: 10px;
  left: -10px;

  background-color: var(--headercolor2);
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 -2px 5px 4px #0009;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  height: 55px;
  overflow: hidden;
  transition: height 0.6s ease;
}

#navmainrow {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 55px;
  background: var(--topgradient);
}
.nmrcategory {
  padding: 0 5px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 1.4vw, 17px);
  color: #112532;
  flex-grow: 1;
  font-weight: 300;
  transition: background-color 0.15s;
}

#navmainrow > div {
  height: 100%;
  width: 35%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-grow: 1;
  max-width: 570px;
}
#navmainrow > div:first-child {
  justify-content: flex-end;
}

#navmainrow > #homespacefiller {
  width: 20%;
  height: 100%;
  margin: auto -10px;
  max-width: 250px;
}
#homespacefiller:hover,
#homespacefiller:focus {
  background-color: #0003;
}
#rightclickablelogo {
  opacity: 0;
  width: 100%;
}

#logoholder {
  width: 100%;
  position: absolute;
  pointer-events: none;
}
#homebtn {
  width: 15%;
  margin: 95px auto 0;
  padding: 0 10px;
  display: block;
}

#headerimg {
  margin: auto;
  height: 5.35vw;
  max-height: 55px;
  position: relative;
  display: block;
  -webkit-font-smoothing: antialiased;
  transform: scale(1.3);
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white) drop-shadow(0 0 10px white);
}
#navmainrow > button {
  position: absolute;
  z-index: -1;
}

.navproductslist > a {
  font-size: 17px;
  padding: 5px 10px;
  margin-bottom: 5px;
}
/*#navmainrow > a:hover, #navmainrow > a:focus { background-color: var(--headercolor3); }*/
.nmrchosen,
#homebtn:focus,
#homebtn:hover {
  background-color: #0002;
}
.nmpchosen {
  background-color: var(--headercolor2);
  z-index: 2;
}
.nmpchosen:before {
  content: "";
  height: 100%;
  padding: 5px 0;
  position: absolute;
  left: 0;
  width: 100%;
  background-color: inherit;
  z-index: -1;
  filter: brightness(0.87);
}

#navmainexpanded * {
  color: var(--headertextcolor);
}

#navmain:has(.nmrcategory:hover),
#navmain:has(.nmrcategory:focus),
#navmain:has(#navmainexpanded:focus-within),
#navmain:has(#navmainexpanded:hover),
#navmain:hover:not(#navmainrow:hover) {
  height: 375px;
}
#navmain:not(:has(.nmrchosen)) {
  height: 55px !important;
}
#navmainexpanded {
  flex-grow: 1;
  padding: 5px;
  overflow-x: clip;
  display: flex;
  position: relative;
  width: calc(100% - 10px);
  max-width: 1300px;
  margin: auto;
}
#navmainexpanded:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  /*background-image: url(/static/img/textures/formerrainbow.jpg);
	background-size: 100%;*/
  opacity: 0.15;
  filter: var(--dayinvert);
  /*animation: texturescroll 10s linear infinite;*/
}
@keyframes texturescroll {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: calc(-61vw + 3%);
  } /*Don't ask about the 3%, it just works across sizes*/
}
#navmainexpanded:not(:has(.nmechosen)) {
  pointer-events: none;
  padding-top: 0;
}

.nmetables > div {
  display: block;
  min-width: 200px;
  margin-right: 2%; /*min-width: 15%; margin-right: 3%;*/
}
.nmetables > div > a {
  min-height: 26px;
  padding: 0 9px 0 3px;
  margin-right: -12px;
}
.nmetables > div:first-child {
  width: 140px;
  min-width: unset;
}
.nmetables > div:first-child > a {
  margin: 0 0 5px 5px;
  gap: 0;
}
#navmainexpanded .nmetables > div:first-child > a > p {
  margin-left: -7px;
}
#navmainexpanded a {
  font-size: 15px;
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
#navmainexpanded h3 {
  margin: 0 0 5px;
}
#navmainexpanded h3 > a {
  font-size: 20px;
  padding: 0 8px;
  left: -16px;
  font-weight: 200;
}
#navmainexpanded a > p,
#navmainexpanded h3 > a {
  margin: 0;
  transition: transform 0.05s;
}

.nmetables a:hover,
.nmetables a:focus {
  z-index: 2;
  filter: drop-shadow(0 -5px 2px var(--headercolor2))
    drop-shadow(0 5px 2px var(--headercolor2));
  border-radius: 10px 20px 20px 10px;
  background-color: #cef6;
}
[data-theme="dark"] .nmetables a:hover,
[data-theme="dark"] .nmetables a:focus {
  background-color: var(--coolcolorhover);
}

.overlayglow p {
  text-shadow: 1px 0 3px var(--color1), 1px -1px 3px var(--color1),
    -2px 0 3px var(--color1), 1px 1px 3px var(--color1), 2px 0 3px var(--color1);
}

.nmetables > .moreopts {
  display: none;
  margin-right: 3.5%;
}
.moreopts > h3 {
  opacity: 0;
  user-select: none;
}
@media (min-width: 1350px) {
  .nmetables:has(.moreopts) > div {
    min-width: unset;
  }
  .nmetables > .moreopts:not(:has(font)) {
    display: block;
  }
  #navmainexpanded {
    max-width: 1400px;
  }
  #navmainexpanded .moreoptsbtn:not(:has(font)) {
    display: none;
  }
}

#navmainexpanded a:hover > p,
#navmainexpanded a:focus > p,
#navmainexpanded h3 > a:hover,
#navmainexpanded h3 > a:focus {
  transform: translateX(3px);
}
#navmainexpanded a:hover > img,
#navmainexpanded a:focus > img {
  transform: scale(1.3);
}
#navmainexpanded a:has(img):hover,
#navmainexpanded a:has(img):focus {
  background: linear-gradient(90deg, transparent 5%, #cef4 20%);
}
/*[data-theme="dark"] #navmainexpanded a:has(img):hover,
[data-theme="dark"] #navmainexpanded a:has(img):focus { background: linear-gradient(90deg, transparent 5%, var(--coolcolorhover) 20%); }*/

#navmainexpanded a > img {
  filter: url(#lighticons) saturate(0.1) brightness(0.95) contrast(1.5);
  height: 26px;
  margin-left: -9px;
  aspect-ratio: 20/13;
  pointer-events: none;
  transition: transform 0.05s;
}
#navmainexpanded .headershapes > a > img {
  filter: contrast(0) brightness(1.6) url(#lighticons) saturate(0.1);
  height: 24.5px;
  width: 40px;
  margin-left: -15px;
}
[data-theme="dark"] #navmainexpanded a > img,
[data-theme="dark"] .galleryintro > img {
  filter: invert(1) contrast(0.75) brightness(7);
}
[data-theme="dark"] #navmainexpanded .headershapes > a > img {
  filter: contrast(0) brightness(1.9);
}

#navmainexpanded > .horizmenu > div > a > p {
  transform: unset;
  text-align: center;
  text-wrap: nowrap;
  height: 18px;
  overflow: visible;
}
html.translated-ltr #navmainexpanded > .horizmenu > div > a > p,
html:has(title[_msttexthash]) #navmainexpanded > .horizmenu > div > a > p {
  text-wrap: pretty;
}

#navmainexpanded > .horizmenu > div > a > img {
  height: 52px;
  margin: unset; /*aspect-ratio: unset;*/
}
#navmainexpanded > .horizmenu > div > a {
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  border-radius: 3px;
}
#navmainexpanded > .horizmenu > div > a:hover,
#navmainexpanded > .horizmenu > div > a:focus {
  background: #cef6;
}
#navmainexpanded > .horizmenu > div > a > h2 {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  font-weight: 400;
  text-align: center;
  text-wrap: nowrap;
}
#navmainexpanded > .horizmenu > div > a:not(:first-child) > h2 {
  height: 66%;
  border-left: dotted 2px;
}
#navmainexpanded > .horizmenu > div > a > form {
  position: absolute;
  bottom: 5%;
  width: 100%;
  display: flex; /*gap: 10px;*/
  justify-content: center;
}
#navmainexpanded > .horizmenu > div > a > form > button {
  padding: 0 4px;
  line-height: 1.25em;
}
#navmainexpanded > .horizmenu > div > a > form > button > span {
  font-size: 13px;
  display: block;
  text-wrap: nowrap;
  border-radius: 15px;
  pointer-events: all;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--coolcolorhover);
  padding: 0 4px;
}
#navmainexpanded > .horizmenu > div > a#topstock {
  position: absolute;
  left: 77.5%;
  width: 23%;
  height: 100%;
  border-left: dotted 2px;
  border-radius: 0 3px 3px 0;
  z-index: 2;
}
#topstock {
  background: var(--headercolor2);
} /* This is to prevent overlapping with other buttons without overriding the hover/focus BG color. */
#navmainexpanded > .horizmenu > div > a > form > button:hover > span,
#navmainexpanded > .horizmenu > div > a > form > button:focus > span {
  background: var(--coolcolor);
  box-shadow: 0 0 0 2px var(--coolcolor);
}
.sublinks:not(:focus):focus-within,
.sublinks:has(button:hover) {
  background: unset !important;
}
.sublinks:focus-within > img,
.sublinks:has(button:hover) > img {
  transform: unset !important;
}

#navmainexpanded > div:not(:last-child) {
  width: 100%;
  height: calc(100% - 10px);
  margin-top: 5px;
  display: none;
}
#nme0 {
  display: flex;
}

#navmain a[href=""] {
  opacity: 0.7;
}

#headerpreview {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease-in;
}

#hpdiv {
  height: 100%;
  width: 500px;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: opacity 0.2s ease-in;
  -webkit-mask: linear-gradient(
    90deg,
    #fff0 0%,
    #ffffff80 12%,
    #ffffffbf 20%,
    #ffffffe6 40%,
    #ffffffe6 60%,
    #ffffffbf 80%,
    #ffffff80 88%,
    #fff0 100%
  );
  mask: linear-gradient(
    90deg,
    #fff0 0%,
    #ffffff80 12%,
    #ffffffbf 20%,
    #ffffffe6 40%,
    #ffffffe6 60%,
    #ffffffbf 80%,
    #ffffff80 88%,
    #fff0 100%
  );
}
.horizmenu > div {
  margin-right: 500px;
}

.stack > div {
  flex-wrap: wrap;
  justify-content: space-evenly;
  position: relative;
}
.stack > div > a {
  width: 25%;
}
.stack > div > a:has(~ #topstock) {
  width: 20%;
}

#hploader {
  height: 100%;
  width: 100%;
  z-index: -2;
  position: absolute;
  right: 0;
  bottom: 0;
}

.navproductslist {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-right: 15px;
  margin-top: -5px;
  padding-top: 5px;
  background-color: var(--headercolor3);
  min-width: 152px;
}
.navproductslist:not(:has(a)) {
  display: none;
}
.nmetables {
  content-visibility: hidden;
  visibility: hidden;
  display: none;
}
.nmetoprow,
.nmetables {
  display: flex;
  width: 100%;
}
.nmetoprow {
  margin: 5px 0 10px;
  gap: 25px;
  background-color: #fff5;
  border-radius: 50px;
  padding: 5px;
  margin-right: auto;
}

.nmechosen {
  display: flex !important;
}
.nmechosen > .visibleheaderlisting {
  display: flex;
  content-visibility: visible;
  visibility: visible;
}

#alert,
.warning {
  background-color: var(--mainblue);
  padding: 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 0 5px #0005);
  position: sticky;
  top: 95px;
  z-index: 4;
}
#alert > #alerticon {
  color: var(--iconcolor);
  border: solid 2px var(--iconcolor);
  border-radius: 100px;
  min-width: 30px;
  height: 30px;
  text-align: center;
  margin: auto 5px;
  padding: 0 5px 10px;
  font-size: 36px;
  font-family: sans-serif;
  font-weight: bold;
  filter: drop-shadow(0 0 5px #fff5);
}
#alert > p,
.warning > p {
  font-size: clamp(13px, 1.75vw, 16px);
  color: white;
  margin: 0;
  padding: 5px;
  width: calc(90% - 80px);
  max-width: 1000px;
}
#alert > p > a[href],
.warning > p > a[href],
.underline {
  text-decoration: underline !important;
}
#alert > p > a[href]:focus-visible,
.warning > p > a[href]:focus-visible,
.underline:focus-visible {
  outline: revert;
}
.warning > p > a[href] {
  color: white;
}
#outofdate > p > a[href] {
  font-family: monospace;
  padding: 0 4px;
  color: white;
}
.closealert {
  font-size: 48px;
  font-family: serif;
  font-weight: bold;
  opacity: 0.7;
  width: 70px;
  color: white;
  cursor: pointer;
  display: block;
  margin: -5px 0;
}
.closealert:hover,
.closealert:focus {
  opacity: 1;
}

.legacy-content .hidden {
  display: none !important;
}

@media (max-width: 1300px) {
  .horizmenu > div {
    margin-right: 20%;
  }
  #hpdiv {
    width: 20%;
    -webkit-mask: linear-gradient(
      90deg,
      #fff0 0%,
      #ffffff80 12%,
      #ffffffbf 20%,
      #ffffffe6 40%,
      #fffffffb 50%,
      #fff 100%
    );
    mask: linear-gradient(
      90deg,
      #fff0 0%,
      #ffffff80 12%,
      #ffffffbf 20%,
      #ffffffe6 40%,
      #fffffffb 50%,
      #fff 100%
    );
  }
}

@media (max-width: 975px) {
  .horizmenu > div {
    margin-right: unset;
  }
  #hpdiv {
    display: none;
  }
}

@media (max-width: 900px) {
  #navmainrow > a {
    font-size: clamp(15px, 3vw, 20px);
  }
  #navmain:has(a:hover),
  #navmain:has(#navmainexpanded:hover),
  #navmain:has(a:focus),
  #navmain:has(#navmainexpanded:focus-within) {
    max-height: 85dvh;
  }
  .navproductslist {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 5px;
  }
  .navproductslist > a {
    flex-grow: 1;
    justify-content: center;
  }
  #nme0 {
    flex-direction: column;
  }
  .nmetables > div:first-child {
    width: 17%;
  }
  .nmetables > div:not(:has(~ #topstock)) {
    min-width: 16%;
    margin-right: 3%;
  }
  #navmainexpanded a {
    font-size: clamp(10px, 1.875vw, 15px);
    gap: 5px;
  }
  #navmainexpanded h3 > a {
    font-size: clamp(12.5px, 2.15vw, 21px);
  }
  #navmainexpanded a > img {
    height: clamp(19px, 4vw, 26px);
  }
}
@media (max-width: 800px) {
  #topnav #metalsummary {
    padding: 0;
  }
}

@media (min-width: 701px) and (max-width: 950px) {
  #navusername {
    display: none;
  }
}

@media (max-height: 374px) {
  #navmain:has(a:hover),
  #navmain:has(#navmainexpanded:hover),
  #navmain:has(a:focus),
  #navmain:has(#navmainexpanded:focus-within) {
    max-height: 85dvh;
    overflow-y: auto;
  }
}

/* Collapses the navigation bar: */
@media (max-width: 700px) {
  :root {
    --topgradient: linear-gradient(90deg, #fff 10%, #f7f7f7 50%);
  }
  #top {
    height: 0;
  }
  #topnav {
    flex-direction: column;
    transform: unset;
    position: absolute;
    top: 0;
    right: -252px;
    transition: right 0.35s, box-shadow 0.65s, visibility 0.35s;
    width: 250px; /*height: 100dvh;*/
    height: fit-content;
    background: white;
    visibility: hidden;
    z-index: 1;
    overflow-y: auto;
    border-bottom-left-radius: 15px;
  }

  #alert,
  .warning {
    top: 55px;
  }

  #logoholder {
    width: unset;
    position: unset;
    margin-top: 55px;
  }
  #homebtn {
    width: unset;
    margin: unset;
    pointer-events: all;
    padding: 0 30px;
  }
  #headerimg {
    height: 55px;
  }

  #topnav > div {
    width: 100%;
    flex-direction: column;
    height: unset;
    flex-grow: 0;
  }
  #topsearch {
    width: 200px;
  }
  #topsearch:focus {
    font-size: 16px;
  }
  #topsearch:focus::placeholder {
    font-size: 0.85em;
  }
  #topsearchform #topsearch:focus + .fa-search {
    margin: 14px 0;
  }
  #topsearchresults {
    flex-direction: column;
    position: relative;
    margin: -43px 0 45px;
    max-height: unset;
  }
  #topsearchresults > div,
  #topnav .viewallsearch {
    width: 222px;
    max-height: 140px;
  }
  #topsearchresults:has(
      #tsprod a[href]:nth-child(10),
      #tscoll a[href*="lot_number"]:nth-child(10)
    ) {
    margin-bottom: 75px;
  }
  /* The Legendary :has() Double Stack */
  #topsearchresults:has(#tsprod a[href]:nth-child(10)):has(
      #tscoll a[href*="lot_number"]:nth-child(10)
    ) {
    margin-bottom: 105px;
  }

  #topsearchresults:has(div:empty) > div {
    max-height: 238px;
  }
  #topsearch:not(:placeholder-shown) ~ #topsearchresults:has(div a[href]) {
    display: flex;
    justify-content: center;
  }
  #tscoll span {
    font-size: 12.5px;
  }
  #topnav .viewallsearch {
    width: 206px !important;
    margin: 1px 0;
  }

  #topsearchform div:has(a:not([href*="lot_number"]):nth-child(10)) ~ #vas1,
  #topsearchform #tscoll:has(a[href*="lot_number"]:nth-child(10)) ~ #vas2 {
    display: flex;
    justify-content: center;
    border-radius: 0;
    margin: 1px 0;
  }
  #topsearchform
    #tsprod:has(a[href]:nth-child(10))
    + #tscoll:not(:has(a[href*="lot_number"]:nth-child(10)))
    ~ #vas1,
  #topsearchform #tscoll:has(a[href*="lot_number"]:nth-child(10)) ~ #vas2 {
    border-radius: 0 0 5px 5px;
  }
  #topsearchform
    #tsprod:has(a[href]:nth-child(10))
    + #tscoll:has(a[href*="lot_number"]:nth-child(10))
    ~ #vas2 {
    margin: 32px 0 0;
  }

  #topnav *,
  #themecheckbox:hover,
  #themecheckbox:focus-visible {
    color: black;
  }
  #topnav > * > a {
    padding: 11px;
    margin: 0 5px;
    justify-content: center;
  }
  #topnav #topsearchform {
    margin: 9px auto 7px;
  }
  #topnav > a:first-child {
    padding-left: unset;
  }
  #topcart:before {
    content: unset;
  }
  #topcart span {
    font-size: 15px;
    color: #333;
  }
  #topcart > img,
  #themecheckbox:before {
    filter: invert(1) opacity(0.7);
  }
  #topcart > div {
    color: #fffd;
    margin-left: 48px;
  }
  #topcart:hover > div,
  #topcart:focus > div {
    color: #fffc;
  }
  #topnav #metalspanner {
    visibility: hidden;
    height: 0;
  }
  #topnav #metalsummary > div {
    position: relative;
    top: 0;
    opacity: 1;
    background: transparent;
  }
  #topnav #metalsummary:hover > div,
  #topnav #metalsummary:focus > div {
    background: #e2e8ee;
  }
  #mobilenavbtn {
    display: inherit;
    margin-top: 55px;
  }
  #navmain {
    top: 0;
  }

  #mobilenavbtn.mobilemenuposition {
    border: solid 6px white;
    right: 0;
    margin-right: 250px;
    box-shadow: -6px 0px 5px #0009;
  }
  #topnav.mobilemenuposition {
    box-shadow: -6px 5px 5px #0009;
    visibility: visible;
    right: 0;
  }
  #topnav svg * {
    fill: black;
  }
  #topnav a h5,
  #toplogoutbtn {
    font-size: 15px !important;
    color: black;
    max-width: 100%;
  }
  #mobilenavBG.mobilemenuposition {
    display: block;
  }

  /*#themecheckbox { color: black; }*/
  #homespacefiller {
    display: none;
  }

  #navmainrow a:not(.mobile),
  #navmainrow button:not(.mobile) {
    display: none;
  }
  #navmainrow {
    gap: 0;
    padding: 0 50px 0 200px;
  }
  .mobile {
    font-size: clamp(12px, 4vw, 17px);
  }
  #tabindexme.hidden {
    display: flex !important;
  }
  .nmetables {
    justify-content: center;
  }
  .nmetables > div {
    text-align: center;
    margin: 0;
  }
  #navmainexpanded a {
    font-size: initial;
    gap: 10px;
    margin: 0 auto 12px;
  }
  #navmainexpanded a > img {
    height: 26px;
  }

  .anchor {
    top: -70px;
  }

  html {
    scroll-padding: 60px auto 10px;
  }
}

#mobilenavBG {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #0005;
}

.mobilemenuposition {
  right: 0% !important;
}

#outofdate,
.forprint {
  display: none;
}

@supports not selector(:has(+ *)) {
  #outofdate {
    display: flex;
  }
}

/* #cartiframe {
  width: 350px;
  height: 350px;
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 5;
  border: none;
  background: #eeec;
  box-shadow: -5px 3px 6px #0006;
  border: solid 10px var(--headercolor1);
  border-top: 0;
  border-right: 0;
  border-bottom-left-radius: 20px;
}

#topcart > #cartx {
  -webkit-text-stroke: 1px #1f3548;
  font-size: 16px;
  top: 8px;
  color: white;
}
#topcart > img:has(+ #cartamount.hidden) {
  filter: invert(1) contrast(0.5) sepia(1) hue-rotate(165deg) saturate(2);
}
#topcart:has(#cartamount.hidden) {
  background: white;
} */

@media (prefers-reduced-motion: no-preference) {
  [data-fadein] {
    transition: translate 0.5s, opacity 0.5s;
    opacity: 0;
  }
  [data-fadein^="up"] {
    translate: 0 50px;
  }
  [data-fadein^="right"] {
    translate: -50px 0;
  }
  [data-fadein^="left"] {
    translate: 50px 0;
  }
  [data-fadein="fade"] {
    translate: 0 0;
    opacity: 1;
  }
}

@media (max-width: 400px) {
  #homebtn {
    width: 90px;
  }
  #navmainrow {
    padding-left: 150px;
  }
  #headerimg {
    transform: scale(1);
    margin-left: -26px;
  }
}

@media print {
  .forprint {
    display: block;
  }

  #topall {
    position: static;
  }

  #topnav,
  #navmain {
    position: absolute;
  }

  #skipper {
    display: none;
  }

  #metalspanner {
    visibility: hidden;
    position: absolute;
  }

  [data-fadein] {
    transition: none;
    translate: unset;
    opacity: 1;
  }
}

@media print and (max-width: 400px) {
  /*#splitmain, #accountbtnslist {
		position: static;
		top: unset;
	}*/

  #accountbtnslist {
    display: none;
  }
}

/* override legacy header css */
/* #backtotop > img {
  margin: 0 !important;
} */