/* Global Styles & Tailwind Directives */

@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
    --mp-primary: #296adb;
    --mp-secondary: #2b2c2f;
    /*button border radius*/
    --border-radius: 1.5rem;

    /*made up*/
    --mp-header: #124280;
    --mp-title: #0c1841;
    --svg-fill: #fff;

    --inner-bg:  rgb(242, 242, 242);

    --mp-shadow: #7c7c7c10 0px 10px 50px;
}

:root:not([data-theme=dark]),
[data-theme=light] {
    --background: #fff;
    --color: hsl(205, 20%, 32%);
    --h1-color: hsl(205, 30%, 15%);
    --h2-color: #24333e;
    --h3-color: hsl(205, 25%, 23%);
    --h4-color: #374956;
    --h5-color: hsl(205, 20%, 32%);
    --h6-color: #4d606d;
    --muted-color: hsl(205, 10%, 50%);
    --muted-border-color: hsl(205, 20%, 94%);
    --primary: #1d5db1;
    --primary-hover: #0c4999;
    --primary-active: #0c4ca0;
    --primary-focus: rgba(16, 149, 193, 0.125);
    --primary-inverse: #fff;
    --red: #dc2626;
    --red-hover: #b91c1c;
    --secondary: #1e293b;
    --secondary-hover: #000208;
    --secondary-focus: #010208;
    --secondary-inverse: #fff;
    --contrast: hsl(205, 30%, 15%);
    --contrast-hover: #000;
    --contrast-focus: rgba(89, 107, 120, 0.125);
}

* {
    box-sizing: border-box;
  }

  

select {
    width: 150px;
    padding: 5px 20px 5px 5px;
    font-size: 16px;
    border: 1px solid #CCC;
    height: 40px;
  }
  
  /* CAUTION: Internet Explorer hackery ahead */
  
  select::-ms-expand {
      display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
  }
  
  /* Target Internet Explorer 9 to undo the custom arrow */
  @media screen and (min-width:0\0) {
      select {
          background: none\9;
          padding: 5px\9;
      }
  }

article, .subpage {
    border:1px solid #c5c5c593;
    margin: 0 auto;
    width: 100%;
    padding: 0.5rem;
    background: white;
    color: #333;
   -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    box-shadow: var(--mp-shadow);
}

article a, .subpage a, .link {
  color: var(--primary);  
}

article a:hover, .subpage a:hover, .link:hover {
  color: var(--primary-hover);  
}

article a:visited, .subpage a:visited, .link:visited {
  color: var(--primary);  
}


.subsection {
    border-radius: 0.5rem;
    background: #f7f7f7;
}

.border {
    border: 1px solid #ccc;
}
@media (min-width: 640px) {
    article, .subpage {
      padding: 1rem;
  }
}


.thin {
    font-weight: 300;
}
.regular, p {
    font-weight: 400;
}
.medium {
    font-weight: 500;
}
.bold, b {
    font-weight: 600;
    font-stretch: condensed;
}


@media (max-width: 640px) {
    .mobilehide {
        display: none;
    }
}

@media (max-width: 768px) {
    .mdhide {
        display: none;
    }
}

@media (min-width: 768px) {
    .mdshow {
        display: none;
    }
}


.secret,
.hidden,
.hide {
    display: none !important;
}


svg {
    fill: inherit;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.nofill {
    fill: none;
}

nav {
    display: flex;
    flex-direction: row;
}

nav>ul {
    display: flex;
    list-style-type: none;
    justify-content: space-between;
    padding: 0.5rem;
    margin: 0px;
    width: 100%;
}

nav>ul>li {
    display: flex;
}



a {
    color: var(--primary);
    text-decoration: none;

}


a:hover {
    color: var(--primary);

}


.rounded {
   -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
}

.rounded-sm {
    border-radius: 0.5rem;
}

.not-rounded {
    border-radius: 0px !important;
}

.borderblue {
    border: 1px solid #4977acd1;
}

/* Header Styles -----------------------------------------------------------------*/

* {
    touch-action: manipulation;
}

html,
body {
    background: #f3f3f3;
    /*background: #124280;*/
    font-size: 16px;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    color:#333;
    font-family: 'Poppins', sans-serif;
}


article>header>h3 {
    margin: 0px;
}

#wrap {
    max-width: 1100px;
    min-width: 320px;
    position: relative;
    margin: 0 auto;
}

.nowrap {
    white-space: nowrap;
}

#maincontent {
    margin: 0rem 0.5rem;
    padding-bottom: 0px;
}

.svg-50 {
    height: 50px;
    padding: 10px;
    fill: var(--primary)
}

#header {
    width: 100%;
    background: var(--mp-header);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}


.white:visited {
    color: white;
}

.white:hover,
.white:active {
    text-decoration: none;
    color: #cecaca;
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.25);
}

.gray {
    color: gray;
    fill: gray;
    display: inline;
}

.gray:visited {
    color: #a5a5a5;
}

.gray:hover,
.gray:active {
    text-decoration: none;
    color: rgb(165, 165, 165);
    text-shadow: 0px 0px 2px rgba(165, 165, 165, 0.25);
}

/*safari tel links*/
a[href^=tel] {
    text-decoration: none;
    color: inherit;
}

a[href^=tel]:hover {
    text-decoration: underline;
}


a[href^=tel]:visited {
    text-decoration: none;
    color: inherit;
}


/* Login Page */
.split {
    display: flex;
    flex-flow: column;
}

.split-50 {
    width: 100%;        
    box-sizing: border-box; 
}


.split article {
    margin: 20px;
}

.login-logo {
    display: flex;
    margin: 0 auto;
    padding: 1rem;
    max-height: 100px;
    max-width: 100%;
}

@media (min-width: 640px) {
    .split {
        flex-flow: row;
    }
}



.con-info {
    display: grid;
    min-height: 75px;
    /* to match contactbox*/
    grid-template-columns: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}



.subpage-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
  }

.header-logo {
    /* TODO wendy: new cool logo :)
update 5/8: ty Wendy
*/
    margin: 0px 5px;
    float: left;
    min-height: 40px;
    min-width: 200px;
    max-height: 75px;

}

.header-info {
    font-size: 0.9em;
    color: #ececec;
    margin: 0px;
    padding: 0px 0px 10px 20px;
}

.header-title {
    margin: 0px;
    color: #ececec;
    font-weight: 600;
    font-size: 0.9em;
    max-height: 25px;
}

.header-subtitle {
    margin: 0px;
    color: #ececec;
    font-size: min(3.5vw, 2.5vh);
    margin: 0px;
    max-height: 20px;
}

.contactbox {
    text-align: right;
    color: white;
}



.userdrop,
.menudrop {
    width: 3rem;
    transition: all 500ms ease 0ms;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    border: 1px solid #4c6ef33b;
}

.userdrop:hover,
.menudrop:hover,
.userdrop:active,
.menudrop:active {
    background: #6868680c;
}


.con-info,
#contactbox,
#menu {
    display: none;
}

.formbtn {   
    max-height: 40px;
    margin-bottom: auto;
    margin-top: auto;}


/* header responsive controls */


@media (max-width: 768px) {
    #header {}

    .contactbox {
        padding: 15px;
    }

    .customer-name {
        margin: 0px;
        padding: 20px 0px;
    }

    ul#toc a {
        margin: 5px;
    }

    .mobile-nav {
        color: white;
        height: 60px;
    }

    .mobile-nav>ul>li>a {
        white-space: nowrap;
    }

    .mobile-nav-logo {
        height: 3em;
        padding: 0px;
        margin: -10px 0px;
    }

    .header-info {
        display: none;
    }

    .con-info {
        grid-template-rows: 75px;
    }
}

@media (min-width: 768px) {
    .mobile-nav {
        display: none;
    }

    #header>div {
        display: grid;
        margin: 0px auto 0px auto;
        max-width: 1100px;
        display: grid;
        grid-template-columns: 1fr 190px
    }

    .con-info {
        grid-area: 1 / 1 / 2 / 2;
        display: grid;
    }

    #contactbox {
        grid-area: 1 / 2 / 2 / 3;
        display: grid;
        padding: 12px 15px 0px 0px;
        margin: 7px;
    }

    ul#toc a {
        margin: 0px;
    }

    #contactbox>a.white>b {
        font-size: 1rem;
        padding: 10px 0px;
    }

    .customer-name {
        padding: 15px 0px;
        font-size: 0.9rem;
        margin: 0px;
    }

    .low1 {
        font-size: 1rem;
        padding: 0px 0px;
        margin: 0px;
    }

    #menu {
        grid-area: 2 / 1 / 3 / 3;
        display: block;
    }

    .header-info {
        display: block;
    }

    .con-info {
        grid-template-rows: 75px auto;
    }
}

fieldset {
    padding: 0px;
    margin: 0px;
    border: 0px;
    outline: 0px;
}

details {
    box-shadow: var(--mp-shadow);
    margin-bottom: 1rem;
}

summary {
    fill: #202020;
    color: #202020;
    cursor: pointer;
}

summary:hover {
    fill: #111;
    color: #111;
}

details > summary::marker {
    display: none;
    content: none;
    list-style: none;
}
details > summary {
    list-style: none;
  }
  details > summary::-webkit-details-marker {
    display: none;
    content: none;
    list-style: none;
  }
  

.summary-title {
    padding: 1rem;
   -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    transition: all 200ms ease;
    filter: drop-shadow(0px 0px 10px rgba(207, 207, 207, 0));
}

.summary-title:hover {
    color: #111;
    filter: drop-shadow(0px 0px 10px rgba(139, 139, 139, 0.5));
}

.form-group {
    padding-bottom: 1rem;
}

.form-split {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.5rem;
}

.form-field-wrapper{
  display: flex;
  flex-wrap: wrap;

}

.form-field-wrapper > label, .form-input-label {
  font-size: 1rem;
  font-weight: 500;
  max-width: 100%;
  margin-bottom: 5px;
  margin-right: 16px;
  margin-top: 2px;
  text-align: left;
}


.form-field-wrapper > div {

}

.form-field-wrapper > input, .form-field-wrapper > select {
  display: block;
  width: 100%;
  padding: 8px 14px;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
    .form-split {
        grid-template-columns: repeat(2, 1fr);
    }

  .form-field-wrapper > label, .form-input-label {
    text-align: right;
    flex-basis: 26%;
  }
  .form-field-wrapper > select, .form-field-wrapper > input {
    flex-basis: 68%;
    flex-grow: 1;
  }

}

/* Base input styles */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.25;
    height: 3rem;
    background: #fff;
    border-radius: 0.25rem;
    outline: 0;
    border: 1px solid rgb(106 106 106 / 50%);
    color: rgb(35, 38, 59);
    box-shadow: inset 0 1px 3px #f3f3f3d7;
    transition: all 200ms ease;
}

/* Focus styles */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    border: 1px solid rgba(5, 104, 233, 0.8);
    box-shadow: 0 0px 3px rgba(5, 104, 233);
}

/* Small-sized inputs */
input[type="text"][size="small"],
input[type="tel"][size="small"],
input[type="email"][size="small"],
input[type="password"][size="small"] {
    width: 50%;
}


p.update {
    font-size: 9pt;
    margin: 10px 5px 8px 5px;
    color: #cc0000;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

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

.between {
    justify-content: space-between;
}




#sidebar {
}


#content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}


.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    gap:2rem;
}

@media (min-width: 768px) {
    .wrapper {
        flex-direction: row;
        gap:1rem;
    }
}

/* Search Bar
Button
and Cart


*/

.bg-inner {
    padding: 0.5rem;
    color: #111;
    border-radius: 0.5rem;
    background: var(--inner-bg);
}

.search-wrap {
    display: grid;
    grid-template-columns: auto 100px;
    grid-template-rows: 50px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-bottom: 10px;
}

input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.searchbar {
    display: flex;
    flex-direction: row;
    margin: 0px 50px 0px 0px;
}

input.searchbarinput {
    border-radius: 1rem !important;
    margin: 0 !important;
    height: 50px;
    padding: 0px 1rem 0px 1rem;
}

.searchbarbutton {
    border: 1px transparent;
    position: absolute;
    right: 165px;
    z-index: 10;
    background: transparent;
    border: none;
    outline: none;
    margin-top: 6px;
    width: 51px;
    height: 40px;
    padding: 0px;
    fill: gray;
    background: rgb(248, 248, 248);
    box-shadow: none;
    transition: all 200ms ease;
}

.searchbarbutton:hover {
    background: #eee;
    border: 1px transparent;
    color: gray;
}

.searchbarbutton svg {
    color: gray;
    object-fit: cover;
    font-size: 15pt;
    fill: inherit;
}

.searchbarbutton:focus,
.searchbarbutton:hover {
    fill: #696969;
    border: 1px transparent;
}

.searchbarbutton:active {
    border: 1px transparent;
    transform: scale(.9);
    fill: #696969;
}



.alert {
  padding: 1rem;
  margin: 1rem;
}

.alert-2 h3 {
  color: #ff3838;
}

.alert-2 p {
  color: #565656;
  font-weight: bold;
}

.alert-2 {
  background: rgb(255, 56, 56, 0.05);
  border: 1px solid #ff3838;
  border-radius: 0.25rem; 
}

.alert-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
}

.alert-content {
  margin: 0;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  color: #555555;
}



/*end button resize*/

.breadcrumb-header {
    font-size: 0.9em;
    margin: 0px 0px 0px 20px;
}

.breadcrumb-header::after {
    content: "\a";
    white-space: pre;
}


img.right1 {

    margin: 0 0 0 5px;
}

.cart1 {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    padding: 0px;
    width: 100%;
    height: 100%;
    color: white;
    fill: white;
}

.cart1 a {
    display: grid;
    margin: 0px;
    padding: 0px;
    background: var(--mp-primary);
    border: 0px;
    text-wrap: nowrap;
    grid-template-columns: 45px 55px;
    grid-template-rows: repeat(2, 25px);
    width: 100%;
    height: 100%;

}

.cart1 a:hover,
.cart1 a:active {
    text-shadow: 0px 0px 5px rgba(241, 241, 241, 0.5);
    text-decoration: none;
    filter: drop-shadow(0px 0px 5px rgba(241, 241, 241, 0.5));
}

.shopping-cart {
    margin: auto;
    margin-top: 0.75rem;
    font-size: 20px;
    color: white;
    grid-area: 1 / 1 / 3 / 2;
    filter: inherit;
}

.cart1 a span {
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    text-align: left;
    overflow: visible;
    white-space: nowrap;
}

.ItemsInCart {
    margin-top: 10px;
}

.cart1 a span.GrandTotalInCart {
    font-size: 0.7rem;
    font-weight: 600;
    grid-area: 2 / 2 / 3 / 3;

}

.cartitem-product-total {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 15px;
}




/* Login Page */
.login-wrap {
    display: grid;
    gap: 1rem;
}

.login-wrap article {}


.login-info a {}

.login-info h3 {
    line-height: 90%;
}

.servicemap-wrap {
    margin-top: 1rem;
}

.servicemap-p {
    font-size: 0.9rem;
}

.servicemap>img {
    width: 100%;
}



.login-form {
    max-width: 100%;
    margin: 1rem auto;
}


@media (max-width: 640px) {
    .login-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

}

@media (min-width: 768px) {
    .login-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}





/* Footer Styles -----------------------------------------------------------------*/
/* FOOTER */
.bottom-logo {
    max-height: 115px;
    max-width: 60%;
    margin: 75px auto;
}

.footer {
    width: 100%;
    background: var(--mp-header);
    display: block;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.inner-footer {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    padding: 30px 10px 20px 10px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: space-between;
}

.footer-items {
    color:white;
    max-width: fit-content;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
}

.footer-items p {
    font-size: 0.85rem;
    color: white;
    display: inline;
    padding: 0px;
    text-align: left;
    margin: 0px;
}

.footer-items h1,
.footer-items h3 {
    color: white;
    font-weight: 500;
}

.border1 {
    height: 3px;
    width: 40px;
    background: white;
    color: white;
    background: white;
    border: 0px;
    margin-bottom: 25px;
}

.footer-items ul {
    padding: 0px;
    list-style: none;
    width: max-content;
    color: white;
    letter-spacing: 0.5px;
}

.footer-items ul a {
    text-decoration: none;
    outline: none;
    color: white;
    transition: 0.3s;
    overflow-wrap: anywhere;
}

.footer-items ul a:hover,
.footer-items ul a:active {
    color: white;
    text-decoration: underline;
}

.footer-items ul li {
    list-style: none;
    font-size: 0.9rem;
    padding: 0px;
    margin: 0px;
    margin-bottom: 0.5rem;
}

.footer-items ul li.gridlistitem {
    fill: white;
    list-style: none;
    font-size: 0.9rem;
    display: grid;
    grid-template-columns: 25px 1fr;
    padding: 0px;
    margin: 0px;
    margin-bottom: 0.5rem;
}


.footer-items ul li i {
    padding-top: 3px;
}

.social-media {
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 20px;
}

.social-media a {
    text-decoration: none;
}

.social-media i {
    height: 25px;
    width: 25px;
    margin: 20px 10px;
    padding: 4px;
    color: #fff;
    transition: 0.5s;
}

.social-media i:hover {
    transform: scale(1.15);
}

.footer-bottom {
    padding: 10px;
    background: var(--mp-header);
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.footer-bottom a {
    color: white;
}

.span2 {
    grid-column: 1 / 3;
}


@media screen and (max-width: 768px) {

    .inner-footer {
        justify-content: flex-start;
    }

    .footer-item-wide {
        max-width: 100%;
    }

    .footer-items {
        width: 100%;
    }

    .footer-items-sm {
        width: 45%;
        max-width: 100%;
    }
}

#backToTop div {
    background: #575757;
    color: white;
    margin: 20px 0px 0px 0px;
    padding: 20px;
}

#backToTop {
    color: white;
}

#backToTop a:hover {
    color: white;
    /*text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.877);*/
}



/* Index Page Styles ------------------------------------------------------------*/

.container {
    align-items: center;
    justify-content: left;

    padding: 0px;
}


/* Home images container */

.homeProducts,
.homeLinks {
    margin: 0px 0px;
    display: grid;
    fill: white;
}

.homeLinks {
    overflow: hidden;
    border-radius: 1rem;
}


.homeimage-wrap {
    display: grid;
    overflow: hidden;
    position: relative;
    border: 0px;
    width: 100%;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    margin: 0px auto 0px auto;
}

.homeimage-wrap img {
    transition: transform .5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px #111111;
    margin: 0px;
    overflow: hidden;
}

.homeimage-caption {
    position: absolute;
    pointer-events: auto;
    width: 100%;
    height: 100%;
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
    max-width: fill-available !important;
    background: linear-gradient(to top,
            hsla(0, 0%, 0%, 0.64) 0%,
            hsla(0, 0%, 0%, 0.632) 7.6%,
            hsla(0, 0%, 0%, 0.609) 14%,
            hsla(0, 0%, 0%, 0.574) 19.2%,
            hsla(0, 0%, 0%, 0.529) 23.7%,
            hsla(0, 0%, 0%, 0.475) 27.7%,
            hsla(0, 0%, 0%, 0.417) 31.5%,
            hsla(0, 0%, 0%, 0.354) 35.3%,
            hsla(0, 0%, 0%, 0.291) 39.4%,
            hsla(0, 0%, 0%, 0.228) 44.1%,
            hsla(0, 0%, 0%, 0.169) 49.6%,
            hsla(0, 0%, 0%, 0.115) 56.3%,
            hsla(0, 0%, 0%, 0.069) 64.4%,
            hsla(0, 0%, 0%, 0.033) 74.2%,
            hsla(0, 0%, 0%, 0.009) 86%,
            hsla(0, 0%, 0%, 0) 100%);
    text-decoration: none;
    color: white;
    overflow-wrap: normal;
    box-shadow: 0px 0px 10px -1px #797979;
}

.homeimage-caption span {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    padding-left: 1rem;
    display: flex;
    align-items: center;
}

.homeimage-wrap a:visited {
    color: white;
}

.homeimage-wrap a:hover {
    color: white;
}

.homeimage-wrap:hover img {
    transform: scale(1.15);
    filter: #111;
}


.delay-1 {
    animation-delay: 0.5s; 
  }
  
  .delay-2 {
    animation-delay: 1s; 
  }



.backlight {
    transition: all 500ms ease 0ms;
    box-shadow:   #4a5a778a 0px 0px 2px;
}

.backlight:hover {
    box-shadow: #005eff48 0px 0px 10px;
}


.home-wrap {
    overflow: hidden;
    margin: 1rem auto 1rem auto;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.custlogin {
    display: flex;
    justify-content: flex-start;
}

.custlogin-bg {
    position: relative;
    color:white;
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    align-self: center;
    justify-content: center;
    border-radius: 1rem;
}

.custlogin-bg-label {
    position: absolute;
    display: flex;
    height: 100%;
    padding: 1rem;
    top: 0;
    left: 0;
    flex-direction: column;
}

.custlogin-bg img {
    width: 100%;
    border-radius: 1rem;
}

.custlogin a {
    text-align: right;
    display: block;
    bottom: 1.5rem;
}

.custlogin-nav {
    gap: 0.5rem;
    height: 100%;
    padding: 0px 1rem 2rem;
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: end;
}


.custlogin-inner {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--primary);
    padding: 0px;
    margin: 0px;
    height: 100%;
    max-height: 350px;
}

.custlogin-inner h1 {
    padding-top: 1rem;
    padding-left: 1rem;
}


.custlogin-inner p {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

@media (max-width: 640px) { 
    .custlogin-bg img {
    }
}

@media (min-width: 640px) {
    .home-wrap {
    flex-direction: row;
    } 

    .custlogin-inner {
        gap:1rem;
    }

    .custlogin {
        max-width: 60%;
        padding: 2rem;
    }

    .custlogin-bg img {
        max-width: 100%;
    }

    .custlogin-bg {
        max-width: 40%;
        flex-direction: column;
    }
}

/*Buttons*/



.btn-bg-active {
    background: #0e68bd2a;
}


button,
input[type=button],
input[type=submit],
a[role=button] {
    background: transparent;
   -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    color: var(--primary);
    fill: var(--primary);
    outline: 0;
    border: 1px solid  var(--primary);
    justify-content: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 300ms ease;
    font-size: 1rem;
    height: 3rem;
    line-height: 90%;
}

button:hover,
input[type=button]:hover,
input[type=submit]:hover,
a[role=button]:hover {
    background: rgba(5, 104, 233, 0.1);
    border: 1px solid var(--primary);
    cursor: pointer;
}

button:visited,
input[type=button]:visited,
input[type=submit]:visited,
a[role=button]:visited {
    background: transparent;
    color: var(--primary);
    fill: var(--primary);
}


[role=button].button-red,
button.button-red,
input[type=button].button-red,
input[type=reset].button-red,
input[type=submit].button-red,
.button-red {
    color: white;
    background: #c94447;
    background: #c94447;
    border-color: #c94447;
    border: 1px solid #c94447;
}

[role=button].button-red:hover,
button.button-red:hover,
input[type=button].button-red:hover,
input[type=reset].button-red:hover,
input[type=submit].button-red:hover,
.button-red:hover {
    background: #a33638;
    background: #a33638;
    border-color: #a33638;
    border: 1px solid #a33638;
}

.btn-primary {
    fill: white !important;
    color: white !important;
    border-color: var(--primary) !important;
    background: var(--primary) !important;
}

.btn-primary:hover {
    fill: white !important;
    color: white !important;
    border-color: var(--primary-hover) !important;
    background: var(--primary-hover) !important;
}


.btn-primary:active {
    fill: white !important;
    color: white !important;
    background: var(--primary-active) !important;
}



.btn-secondary {
    fill: white !important;
    color: white !important;
    border-color: var(--secondary) !important;
    background: var(--secondary)  !important;
}


.btn-secondary:hover, .btn-secondary:focus {
    fill: white !important;
    color: white !important;
    border-color: var(--secondary-hover) !important;
    background: var(--secondary-hover)  !important;
}

.btn-red {
    fill: white !important;
    color: white !important;
    border-color: var(--red) !important;
    background: var(--red) !important;
}

.btn-red:hover {
    fill: white !important;
    color: white !important;
    border-color: var(--red-hover) !important;
    background: var(--red-hover) !important;
}


.btn-red:active {
    fill: white !important;
    color: white !important;
    background: var(--red-hover) !important;
    border-color: var(--red-hover) !important;
}


.btn-primary-outline {}
.btn-secondary-outline {}
.btn-icon {}
.btn-checkout {}


.btn-close {
    border: 1px solid var(--primary) !important;
    float: right;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.btn-close:hover {
    background: rgba(5, 104, 233, 0.1) !important;
    border: 1px solid var(--primary-hover) !important;
    cursor: pointer;
}

.blue1 {
    font-weight: bold;
    font-size:3.5rem;
}

.textlogin {
    font-size: 1.15rem;
    line-height: 100%;
}


.homeText {
    line-height: 140%;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}


@media (max-width: 640px) {

    .homeText {
        grid-area: 3 / 1 / 4 / 3;
    }

    .homeProducts {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 170px 170px 170px;
    }

    .homeLinks {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 200px 200px;
    }

    .homeimage-caption {
        font-size: 1.2em;
    }   

    .textlogin {
        font-size: 1rem;
    }
}

@media (min-width: 640px) {

    .homeText {
        grid-area: 2 / 1 / 3 / 3;
    }

    .homegrid {
        grid-area: 2 / 1 / 4 / 3;
    }

    .homeProducts {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 220px 220px;
    }

    .homeLinks {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 260px;
    }

    .homeimage-caption {
        font-size: 1.5rem;
    }
}

/* Outsourcing section */

.section-home {
    overflow: hidden;
    margin: 0;
    margin: 0;
    width: 100%;
    background: white;
    color: #111;
   -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    border: 1px solid #c5c5c593;
    color: #111;
    box-shadow: var(--mp-shadow);
}

.section-description {
    font-size: 0.9rem;
    padding: 1rem;
    justify-content: start;

}

.section-description a {
  color: var(--primary);
}


.drawer-boxes, .custom-doors {
    display: flex;
    flex-direction: column;
    min-width: 40%;
}

.drawer-boxes, .custom-doors {
    justify-content: center;
}


.custom-doors > img, .drawer-boxes > img {
    object-fit: contain;
    max-height: 300px;
    width: 100%;
    transition: all 0.5s ease;
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 30px rgba(108, 155, 226, 0.2));
}


.section-hover {
    position: relative; 
    display: flex;
    flex-direction: row;
    background: #fff;
    transition: background 0.5s ease;
}

.section-hover:hover > .custom-doors > img {
    transition: all 0.5s ease; 
    transform: scale(1.05) rotate(0);
}

.section-hover:hover > .drawer-boxes > img {
    transition: all 0.3s ease; 
    transform: scale(1.05) rotate(1deg);
}


@media (min-width: 640px) {    
    .section-description {
        font-size: 1rem;
    }
}


/* Customer Home Page Styles -------------------------------------------------------*/

.custhome {
    display: grid;
    grid-template-columns: 1fr;
    gap:1.5rem;
}

.newproducts {
    gap: 1rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.newproducts > div{
    background: white;
    border-radius: 0.25rem;
    border: 1px solid #a0aed0;
    overflow: hidden;
    box-shadow: none;
    filter: none;
    transition: all 200ms ease;
    filter: drop-shadow(0px 0px 8px rgba(100, 100, 111, 0.0));
}

.newproducts > div:hover {
    filter: drop-shadow(0px 0px 8px rgba(17, 78, 211, 0.3));
}

.homefeatured > img {
    padding: 0.5rem;
    width: 100%;
}


@media (min-width: 640px) {
    .newproducts {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}


.specials-flyer {
    grid-column: span 2; 
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.specials-flyer > div {
    width: 100%;
    text-align: left;
    height: 200px;
}

.current-specials {    
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 300ms ease 0ms;
}

.current-specials > div {
    height: 100%;
    width: 100%;
    position: relative; 
    display: flex;
    justify-content: center;
}

.current-specials img {
    transition: all 300ms ease 0ms;
    box-shadow: 0 0px 2px rgb(35 47 61 / 44%);
    border-radius: 8px;
    max-width: 300px;
    max-height: 90%;
    position: absolute;
}

.specials-page-1 {
    transform: rotate(0deg) translateX(9px) translateY(-8px);
}

.specials-page-2 {
    transform: rotate(0deg) translateX(4px) translateY(0px);
}

.specials-page-3 {
    transform: rotate(0deg) translateX(0px) translateY(8px);
}

.current-specials:hover img {
    box-shadow: 0 0px 5px rgba(65, 147, 241, 0.61);
}

.current-specials:hover .specials-page-1 {
    transform: rotate(2deg) translateX(9px) translateY(-8px);
}

.current-specials:hover .specials-page-2 {
    transform: rotate(0deg) translateX(4px) translateY(0px);
}

.current-specials:hover .specials-page-3 {
    transform: rotate(-2deg) translateX(0px) translateY(8px);
}



.prodBull {
    min-height: 400px;
}





.webTool {}

img.shadow {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    padding: 10px;
}

.custhome-nav-wrap {
    text-align: left;
    margin: 0px 0px 20px 0px;
}

.custhome-nav {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
    padding: 0px;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    margin: 1rem auto 0px auto;
    color: var(--mp-secondary);
    fill: var(--primary);
}

.custhome-nav a {
    margin: 0px;
    border-radius: 0.75rem;
    background: white;
    padding: 0px 15px;
    height: 75px;
    display: grid;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(99, 100, 100, 0.15) 0px 2px 6px 2px;
}

.custhome-nav a p {
    margin: auto;
    text-align: center;
    font-size: 1.1rem;
    color: rgb(16, 99, 193);
}

.custhome-nav a:hover,
.custhome-nav a:active {
    text-decoration: none;
    box-shadow: rgba(16, 99, 193, 0.5) 0px 1px 2px 0px, rgba(16, 99, 193, 0.274) 0px 2px 6px 2px;
}


.customerInfo{
    gap: 0.5rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.customerInfo > div {
    border-radius: 0.5rem;
    border: 1px solid #a0aed02e;
    overflow: hidden;
    padding: 0.5rem;
}

.mobile-wide {
    grid-column: 1 / span 2;
}

ul.other-specials {
    margin: 0px;
    padding: 0px;
}

ul.other-specials > li {
    
}

ul.other-specials > li > a {
    margin: 0.25rem;
    display: block;
    padding: 0.3rem;
    border: 1px solid #c9e1f1ba;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

ul.other-specials > li > a:hover {
    border: 1px solid #88bff3;
}


@media (min-width: 768px) {
    .customerInfo {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .mobile-wide {
        grid-column: unset;
    }
}




.custInfo {
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1rem;
    padding-bottom: 1rem;
}

.custInfo b {
    display: inline-block;
    padding-bottom: 3px;
    font-size: 1rem;
}

.allShipToAccountsCountLoop {
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1rem;
    padding-bottom: 1rem;
}

.cartstatus {
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .specials-flyer {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .custhome {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .homegrid {}

    .user-links {}

    .custInfo {}


    .custhome-nav {
        grid-template-columns: repeat(3, 1fr);
    }

}


.newProd {
    display: inline-block;
}

.newProd img {
    border: 1px solid #999;
    margin: 8px 0 0 7px;
}


/*sales navs*/

.salesnavs-wrap {
    margin: 0px;
    background: var(--mp-secondary);
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.salesnavs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 50px 0px;
    max-width: 900px;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: normal;
    margin: 0px auto 0px auto;
}

@media (min-width: 768px) {
    .salesnavs {
        grid-template-columns: repeat(3, 1fr);
    }
}

.salesnavs>a {
    color: white;
    padding: 25px;
    font-size: 1.1rem;
}

.salesnavs>a:hover {
    color: white;
    text-decoration: underline;
}

.salesnavs>a:focus {
    color: white;
    text-decoration: underline;
}



/*Categories */

.categories {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.categories-main {
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    margin: 0px auto;
   -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    border-radius: 1.5rem;
    padding: 1rem;
    transition: all 200ms ease;
}

.categories-main:hover img {
    transition: all 200ms ease;
    filter: drop-shadow(0px 0px 3px rgba(17, 78, 211, 0.404));
}


.categories-main ul {
    padding-left: 1rem;
    margin-top: 1rem;
}

.categories-main li a:hover {
    text-decoration: underline;
}


.categories-main li {
    list-style: none;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.categories-main-title {
    display: flex;
    align-items: center;
}

.categories-main-title img {
    transition: all 200ms ease;
    display: inline;
    height: 5rem;
    width: 5rem;
    margin-right: 8px;
    border-radius: 10px;
}

.categories-main-title span {
    overflow: hidden;
}

.category-image {
    height: 220px;
}


@media (min-width: 640px) {
    .categories {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {


}

@media (min-width: 768px) {
    .categories {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


/* Category List Page Styles ---------------------------------------------------*/


#loading-placeholder, .loading-placeholder {
    display: flex;
    flex-direction: column;
    animation: breathing 1.5s infinite;
    gap: 2rem;
  }
  
  .loading-placeholder-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .loading-placeholder-sidebar {
    margin-top: 1rem;
    display: none;
    width: 200px;
    gap: 1rem;
  }
  
  .loading-placeholder-topbar {
    width: 50%;
    margin-bottom: 10px;
    height: 50px;
    gap: 1rem;
  }
  
  .loading-placeholder-content-thumbnail {
    background: #ccc;
    min-width: 140px;
    height: 120px;
    margin: 1rem;
  }

  .loading-placeholder-content {
    display: flex;
    flex-direction: column;
    height: 300px;
  }

  .loading-placeholder-content-details {
    margin: 1rem;
    max-width: 100%;
  }
  
  .loading-placeholder-content-item {
    background: #ccc;
    height: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .loading-placeholder-button {
    background: #ccc;
    border-radius: 0.5rem;
    width: 100%;
    height: 40px;
  }
  
  @keyframes breathing {
    0% {
      opacity: 0.5;
    }
  
    50% {
      opacity: 0.8;
    }
  
    100% {
      opacity: 0.5;
    }
  }
  
  @media (min-width: 640px) {

    .loading-placeholder-content {
        flex-direction: row;
        height: 200px;
    }

    .loading-placeholder-content-details {
        width: 100%;
    }

    #loading-placeholder {
        flex-direction: row;
      }
    
      .loading-placeholder-sidebar {
        display: flex;
        flex-direction: column;
      }
    
      .loading-placeholder-topbar {
        display: none;
        flex-direction: row;
      }

  }

  #search-filter-sort {
    max-width: 200px;
  }


@media (max-width: 768px) {
    #search-filter-sort {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }    
}

.search-modal { 
    z-index: 99;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: fixed; top: 0; 
    left: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.5);
}

.search-modal-content { 
    background: white; 
    padding: 1rem; 
    border-radius: 0.5rem;
    max-height: 80%;
    width: 90%;
    overflow-y: scroll;
}

.mobile-search-filter-btn, .mobile-search-sort-btn {
    display: flex;
    color: #333;
    padding-left: 0.5rem;
    padding-right: 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
    background: transparent;
    transition: all 500ms ease;
}


.mobile-search-filter-btn:hover, .mobile-search-sort-btn:hover {
    color: #272727;
    background: #cccccc3d;
}

.filterupdate-wrap {
    display: grid;
    grid-template-columns: 6fr 1fr;
}

.filterupdate {
    padding: 8px;
    color: var(--primary);
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
}

.filterupdate svg {
    fill: var(--primary);
    height: 1.2rem;
}

.filterupdate:hover,
.filterupdate:active {
    color: var(--primary-hover);
    background: none;
    filter: drop-shadow(0px 0px 1px var(--primary-hover));
    box-shadow: none;
    border: none;
    outline: none;
}


@media (max-width: 640px) {


    .filter-values {
        grid-template-columns: 1fr 1fr;
    }


    .filter-header {
        margin-bottom: 10px;
    }
}

@media (min-width: 768px) {

    .mobile-search-filter-btn, .mobile-search-sort-btn {
        display: none;
    }

    .filter-values {
        grid-template-columns: 1fr;
    }

    .filter-header {
        margin-bottom: 10px;
        display: none;
    }
}

#sort-dialog article,
#filter-dialog article {
    width: 90%;
    max-height: 75%;
}

#sort-dialog article header p,
#filter-dialog article header p {
    font-size: 1.5rem;
}

#filter-dialog article div {}

#sort-dialog footer,
#filter-dialog footer {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
}

.vendor {
    font-size: 0.85rem;
}

.filter-values {
    display: grid;
    gap: 0.5rem;
    padding-bottom: 15px;
    font-size: 0.9rem;
}

.filter-legend {
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 0px;
    font-size: 0.9rem;
}

.vendor {
    display: block;
    width: 100%;
    text-transform: uppercase;
    padding: 10px 0px;
}

.product-filters-modal-wrap {
    column-gap: 10px;
}

.product-filters-modal-wrap button.secondary {
    margin: 0px 0px 15px 0px;
}

#pagecontrols>form {
    font-size: 0.9rem;
}

#pagecontrols>form>div {
    margin-bottom: 0.5rem;
}

.sort-button {
    margin-top: 1rem;
    width: 100%;
}

#pagecontrols label {
    display: block;
}

#pagecontrols article {
    padding: 20px;
    margin: 0px;

}

#filtercontainer {}

#filtercontainer summary {}

#filtercontainer article {
    padding: 20px;
    margin: 0px;
}



#productbox {}

.itemrow {
    font-size: 11pt;
    margin-top: 0px;
}

.itemrow img {}


#expand-box {
    width: 100%;
    padding: 0;
    font-size: 10pt;
}

.clearfix:after {
    content: "\00A0";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
    margin-bottom: 3px;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}



#prodcats {
    border: 1px solid #999;
    border-radius: 5px;
    width: 210px;
    padding: 8px;
    font-size: 10pt;
    font-weight: 600;
    margin: 5px;
    float: left;
}

#filters {
    height: auto;
    background: #ebebeb;
    margin-bottom: 10px;
    font-size: 11pt;
}

.sortby {
    display: inline-block;
    background: #e1f0f0;
    padding: 8px;
    width: auto;
    height: auto;
    border: 1px solid #999;
    margin: 0 5px 10px 0;
}

.bul-date {
    text-align: center;
    width: 150px;
}

.pagination {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    margin: 0px 15px;
}

.pagination>a {
    background: #fff;
    color: #434343;
    fill: #434343;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    min-width: 20px;
    padding: 0 0.5rem;
    height: 2rem;
    text-decoration: none;
    position: relative;
    margin: 3px;
    margin-bottom: 1rem;
    border-radius: 5px;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15);
}

.pagination>a.current {
    background: var(--primary-hover);
    color: #fff;
}

.pagination>a:hover {
    background: var(--primary);
    color: #fff;
    fill: #fff;
}





/* Main Product Page Styles ---------------------------------------------------*/


.product-image {
    display: flex;
    justify-content: center;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1rem;
    height: 300px;
    width: min(300px, 100%);
    max-width: -moz-available;
    max-width: -webkit-fill-available;
    max-width: fill-available;
}

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


div.description-tab {
    display: grid;
    gap: 10px;
    padding: 0rem 2rem 2rem 2rem;
}

.product-description {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}



.part-number {
    font-weight: 600;
    font-size: 1.4rem;
}

.small {
    font-size: 0.85rem;
    margin: 0px 0px 5px 0px;
    color: #373a3b;
}


.small2 {
    font-size: 0.75rem;
    margin: 0px;
    padding: 3px;
    color: #b1b0b0
}
#mainproductbox {
    margin-top: 1rem;
    font-size: 12pt;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 0px;
}

#mainproductbox p {
    margin: 0px;
    padding-bottom: 0.5rem;
}

#mainproductinfo {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-radius: 5px;
    font-size: 0.95rem;
    margin: 0px 2rem 1rem 0rem;
    float: right;
}



.details-left {
    padding: 0px 1.5rem;
}

.tabs {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-right: 2rem;
    padding-left: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tabs .tab {
    padding-bottom: 10px;
    border-bottom: 3px solid #ccc;
    cursor: pointer;
    list-style-type: none;
}

.tabs .tab.active,
.tabs .tab:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
    line-height: 1.5;
}

.tab-content.active {
    display: block;
}


.details-left h4 {
    margin-bottom: 5px;
}


.recommendations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    justify-content: space-between;
}

.recommendation-tile {
    width: 100%;
    margin-bottom:0.5rem;
    background:white;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #333;
    border-radius: 1rem;
    transition: all 0.3s ease;
}

    
.recommendation-tile:hover {
    transform: translateY(-3px);
}

.recommendation-tile > div > img,
.recommendation-tile > div > svg {
    height: 200px;
    margin: auto;
    object-fit: contain;
    transform: translateY(-3px);
    width: 100%;
}

@media (max-width: 640px) {
  
   .title {
        grid-area: 1 / 1 / 2 / 3;
    }

    #mainproductinfo {
        margin: 0px 0.5rem 1rem 0.5rem;
        grid-area: 3 / 1 / 4 / 3;
    }

    .product-image {
        grid-area: 2 / 1 / 3 / 3;
    }

    .product-info {
        grid-area: 4 / 1 / 5 / 3;
    }



    .details-right {
        margin: 20px 0px 0px 0px;
    }

}

@media (min-width: 640px) {
    #mainproductbox {
        font-size: 12pt;
        grid-template-columns: 350px 1fr;
        grid-template-rows: auto auto auto;
    }

    .title {
        grid-area: 1 / 1 / 2 / 3;
    }


    .mainproductbox .product-image {
        grid-area: 3 / 1 / 4 / 2;
    }

    .description-tab {
        display: grid;
        grid-template-columns: 3fr 1fr;
    }

    .product-info {
        grid-area: 3 / 1 / 4 / 3;
    } 

    .recommendations {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
   
    .recommendation-tile {
    
    }
  
}


div.customer-lists>button,
.product-links>a[role=button] {
    width: 100%;
    max-width: -moz-available;
    max-width: -webkit-fill-available;
    max-width: fill-available;
    margin-bottom: 1rem;
}

#complete {
    border: 1px solid #152b75;
    width: 260px;
    padding: 5px;
    text-align: center;
    margin: 0 auto;
}

div.content {
    padding: 1em 0em 0.5em 0em;
}

article.content {
    margin: 0;
}



.availability-alert {
    font-size: 0.75rem;
    text-align: right;
    font-weight: 600;
    color: #c42e2e;
    padding: 0px 1.5rem 0px 0px;
}

.user-info {
    padding: 0px 30px;
    text-align: left;

}

.user-nav {
    font-size: 1.5rem;
    display: inline;
}

.user-nav-list {
    display: flex;
    align-items: baseline;
}


.cart-grid-top {
    display: grid;
}

@media (min-width: 100px) {

    /*640px for small*/
    .cart-grid-top {
        grid-template-columns: 1fr;
        margin: 20px;
    }

}


@media (min-width: 768px) {
    .cart-grid-top {
        grid-template-columns: 2fr 1fr;
        margin: 20px;
    }

}

@media (min-width: 1130px) {
    .cart-grid-top {
        grid-template-columns: 2fr 1fr;
        margin: 0px;
    }

}

.savecartas {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 100px;
    margin: 25px 0px;
    height: 50px;
    column-gap: 5px;
}

.savecartas>form {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 3rem;
}

.savecartas>form>input,
.savecartarea>button {}


.savecartas>form>input[type=text] {}



.savecartas>form>p {}

.together {
    text-align: center;
    display: inline-block;
}

.textsm {
    font-size: 0.75rem !important;
}

.textmd {
    font-size: 0.9rem !important;
}

.textnormal {
    font-size: 1rem !important;
}

.textlg {
    font-size: 1.2rem !important;
}

.textxl {
    font-size: 1.4rem !important;
}

a.savedcarticon {
    border-radius: 12px;
    border: 1px solid #999;
    width: auto;
    padding: 12px;
    margin: 0 10px 7px 8px;
    float: left;
    font-size: 12pt;
    text-align: center;
}

a.savedcarticon:hover,
a.savedcarticon:active {
    box-shadow: var(--mp-primary) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}

.savedcarticon div {}

.savedcarticon svg {
    margin: 10px;
}

.custInfocart {
    padding: 0px 0px 12px 0px;
}

.current-user{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.current-user>p {
    font-size: 0.9rem;
}


.savecartarea {}

.tracking-box {
  border: 1px solid #c1c1c1;

}

.order-tracking {
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

.order-tracking > div {
    display: flex;
    flex-direction: column;
}

.order-tracking > div > label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #575757;
}

.card-title {
    background: #eee;
    padding: 0.5rem;
}

.card-title p {
    font-size: 0.8rem;
    font-weight: 600;
}

#myBtn {
    color: var(--primary);
    background: none;
    height: 1rem;
    border: 0px;
}

table.lineitems {
    border-collapse:collapse;
    overflow: hidden;
}

table.lineitems th, table.lineitems td {
    text-align: left;
    padding: 0.5rem;
}

article.homegrid>header {
    margin: 0px;
}

article.homegrid>header>h3 {
    margin: 0px 0px 0px 0px;
}

div.curBorder {}

table.lineitems {

    margin: 0 auto;
}

.ship-accounts {}

.doublerow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

td.tdw {
    display: grid;
    margin: 3px auto;
    width: 100%;
}

.lineproductcode {
    padding: 0px;
    font-weight: 600;
}

.linedescription {
    padding: 0px;
    margin: 3px 0px 0px 0px;
}

.review-order-custinfo {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
    grid-template-columns: 1fr 1fr;
}

.review-order-custinfo2 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (max-width: 640px) {
    .review-order-custinfo2 {
        grid-template-columns: 1fr 1fr;
    }
}

.review-order-custinfo div {
    padding: 0.25rem;
}

.review-order tbody tr td {
    padding: 5px 0px 6px 0px;
}

.review-order tbody tr.item-line {
    display: grid;
    grid-template-columns: 6fr 1fr 1fr 1fr;
}

.comment-line {
    display: block;
    width: 100%;
}


/* Popular Products */
.sm_dashboard {
    max-width: 1200px;
    min-width: 350px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

.sm_card {
    width: 240px;
    height: 240px;
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    margin-right: 6px;
}

.card-image {
    width: 175px;
    height: 175px;
    margin: 0 auto;
}

.card-image img {
    object-fit: contain;
}

.sm_shelf_renderer {
    display: block;
    position: relative;
}

#sm_scroll_container.sm_horizontal_list_renderer {
    overflow: hidden;
}

#items.sm_horizontal_list_renderer {
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
    will-change: transform;
    display: inline-block;
    white-space: nowrap;
}

.sm_horizontal_list_renderer a {
    color: var(--color);
}

.sm_horizontal_list_renderer a:hover {
    color: var(--color);
}

.sm_card .card-content {
    padding: 8px 14px;
}

.sm_card .card-content .card-title {
    font-size: 0.95rem;
    margin-bottom: 0px;
}

.sm_self_title {
    margin: 0px 0px 10px 0px;
}

#sm_left_arrow {
    left: 0px;
    background: linear-gradient(to left, rgba(255, 0, 0, 0) 0%, rgb(255, 255, 255) 50%);
}

#sm_right_arrow {
    right: 0px;
    background: linear-gradient(to right, rgba(255, 0, 0, 0) 0%, rgb(255, 255, 255) 40%);
}

.btn-floating {
    var(--color);
    z-index: 1;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0px;
    right: 0px;
    fill: white;
    width: 50px;
    height: 245px;
}

.btn-floating:visited {
    color: var(--color);
}

.btn-cir {
    background: var(--mp-header);
    height: 30px;
    width: 30px;
    margin: 5px;
    border-radius: 15px;
    box-shadow: 0px 0px 3px #3b6ca3;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

/* Current orders */

div.orderinfo {
    display: grid;
    row-gap: 5px;
    grid-template-columns: 90px 1fr;
}

.orderinfo-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0px 10px 5px 0px;
}

.orderinfo-content {
    text-align: left;
    font-size: 1rem;
    margin: 0;
}

.orderinfo-wrap {
    display: grid;
    column-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    padding-left: 10px;
}

article.order-container {
    padding: 1rem;
}

.order-title {
    padding: 20px;
}

.order-title p {
    font-size: 0.95rem;
    margin: 0px;
}

.order-title span {
    font-weight: 600;
    cursor: copy;
    font-size: 1.5rem;
}

.order-text-sm {
    margin-bottom: 10px;
    font-size: 0.85rem;

}

.order-text-md {
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.order-lineitem {
    display: grid;
    width: 100%;
    grid-template-columns: 2fr 1fr;

    padding: 0.5rem 0rem;
}


.order-lineitem:nth-child(odd) {
    background: transparent;
}

.order-lineitem:nth-child(even) {
    background: rgb(235 235 235 / 50%);
}

.order-lineitem-product {
    display: grid;
    grid-template-columns: 7vw 1fr;
}

.order-lineitem-price {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-left: 5vw;
    column-gap: 8px;
}

.order-lineitem-price p {
    display: inline;
    font-size: 0.95rem;
    margin: 0;
    padding: 0px 0px 0px 0.25rem;
}


.order-lineitem-comment {
    display: grid;
    column-gap: 2vw;
    grid-template-columns: 5vw 1fr;
}

.order-lineitem-comment p {
    margin-left: 10px;
}

.order-lineitem-product p {
    display: inline;
    margin-bottom: 0;
    padding-left: 10px;
}

.order-header {
    display: grid;
    width: 100%;
    grid-template-columns: 2fr 1fr;
    background: rgba(235, 235, 235, 0.75);
}

.order-lineitem-product-header {
    display: grid;
    grid-template-columns: 7vw 1fr;
}

.order-lineitem-price-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    margin-left: 5vw;
}

.order-header p {
    display: inline;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
    padding: 0.5rem;
}




/*Mobile Current Orders*/
@media (max-width: 640px) {
    .orderinfo-wrap {
        grid-template-columns: 1fr;
    }

    .order-text-sm {
        font-size: 0.75rem;

    }

    .order-text-md {
        font-size: 0.85rem;
    }

    article.order-container {
        padding: 0.25rem;
    }

    .order-lineitem-price p {
        display: inline;
    }

    .order-header p {
        font-size: 0.8rem;
    }

    .order-lineitem-product-header p {
        white-space: nowrap;
    }

    table.lineitems tr th,
    table.lineitems tr td {
        padding: 0.25rem;
        font-size: 0.8rem;
    }

    .order-lineitem-price-header {
        grid-template-columns: 1fr 1fr 2fr;
    }

    .doublerow {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}


@media (max-width: 768px) {

    .order-header {
        grid-template-columns: 1fr 1.5fr;
    }

    .order-lineitem {
        grid-template-columns: 1fr;
    }

    .order-lineitem-price {
        padding: 0px 0px 0px 20vw;
    }
}

@media (min-width: 640px) {
    .review-order tbody tr td {
        padding: 5px 10px 6px 15px;
    }

    .review-order tbody tr.item-line {}
}


.infor {
    width: 190px;
    text-align: right;
}

td.center {
    text-align: center;
}

.low {
    margin-top: 23px;
}



a.products {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: -moz-available;
    max-width: -webkit-fill-available;
    max-width: fill-available;
}

a.products > img {
    margin: auto;
    margin-bottom: 1rem;

}



/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background: rgb(0, 0, 0);
    /* Fallback color */
    background: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: 600;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.space {
    margin-top: 15px;
}

.cust-no {
    height: 30px;
    width: 1100px;
    background: #e4f2f2;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    border-radius: 5px;
}

input.change {
    width: 35px;
    height: 15px;
    outline: none;
    border: 1px solid #999999;
    border-radius: 5px;
    background: #FBFBFB;
    vertical-align: top;
    font-size: 10pt;
    box-shadow: 0px 0px 10px -1px #ccc;
}

input.orderform {}


.ordercomment {
    text-align: left;
    margin: 0px;
}

.orderreview-logo {
    width: 100%;
}


@media (max-width: 640px) {}

@media (min-width: 768px) {}

.orderconfirmed {}

.orderconfirmed-ty {
    color: #3070c3;
    font-size: 2.5rem;
    font-weight: 600;
    padding: 2rem 0px 0px 0px;
}

.orderconfirmed-no {
    background: #3070c3;
    color: white;
    border-radius: 1.5rem;
    margin: 1rem auto;
    padding: 1rem;
    width: fit-content;
}

.orderconfirmed-msg {
    max-width: 420px;
    padding: 1rem;
    margin: 0 auto;
    text-align: left;
}


/* Email Quote Styles -----------------------------------------------------------------*/



.orderBox {
    border-radius: 0.75rem;
    padding: 20px 10px;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
}

table.center {
    margin: 0 auto;
}

.info {
    color: #152b75;
    font-size: 11pt;
}


.prod-desc {
    font-size: 10pt;

    text-align: right;
    display: inline;
    float: right;
}

div.prod-cart {
    float: right;
}



.prodbox {
    display: inline-block;
    border: 1px solid #999;
    border-radius: 5px;
    width: 175px;
    text-align: center;
    font-size: 10pt;
    line-height: 10%;
    margin: 0 30px 20px 20px;
}

.prodbox img {
    border-bottom: 1px solid #999;
}


.unseen {
    display: none;
}



.squarethumb {
    width: 100px;
    height: 100px;
    background: #fff;
}



@-webkit-keyframes pulsate {
    0% {
        color: #ddd;
        text-shadow: 0 -1px 0 #000;
    }

    50% {
        color: #fff;
        text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    }

    100% {
        color: #ddd;
        text-shadow: 0 -1px 0 #000;
    }
}

@keyframes pulsate {
    0% {
        color: #ddd;
        text-shadow: 0 -1px 0 #000;
    }

    50% {
        color: #fff;
        text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    }

    100% {
        color: #ddd;
        text-shadow: 0 -1px 0 #000;
    }
}


@-webkit-keyframes pulsate {
    0% {
        color: #ddd;
        text-shadow: 0 -1px 0 #000;
    }

    50% {
        color: #fff;
        text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    }

    100% {
        color: #ddd;
        text-shadow: 0 -1px 0 #000;
    }
}

@keyframes pulsate {
    0% {
        color: #ddd;
        text-shadow: 0 -1px 0 #000;
    }

    50% {
        color: #fff;
        text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    }

    100% {
        color: #ddd;
        text-shadow: 0 -1px 0 #000;
    }
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    cursor: pointer;
    display: none;
    position: absolute;
    background: #f9f9f9;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 7px 7px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}



/* Customer Nav Buttons (Lg) */


.button3{
    border: 2px solid rgb(32, 96, 207);
}

.button3:hover {
    box-shadow: rgba(41, 106, 219, 0.6) 0px 5px 15px 0px;
}

.btn {}

.btn:hover,
.btn:active {
    box-shadow: rgba(41, 106, 219, 0.6) 0px 5px 15px 0px;
}



/* Customer Home Page Button */

.customer-prompt-menu {
    max-width: 590px;
    margin: 0px auto;
}

article.customer-prompt {
    margin: 50px auto;
    max-width: 750px;
}

article.customer-prompt>form {}


.custhome-buttons {
    border: none;
    background: var(--secondary);
    box-shadow: 0px 5px 5px #3737374f;
    text-decoration: none;
    color: var(--primary-inverse);
    outline: none;
    padding: 20px;
    margin: 5px;
    display: inline-block;
}

.custhome-buttons:active {
    box-shadow: 0px 5px 5px #1b1b1b4f;
}

.custhome-buttons:hover {
    box-shadow: 0px 5px 5px #1b1b1b4f;
    background: var(--secondary-hover);
}


.buttonFave {
    background: url('images/fave1.jpg') center no-repeat;
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px #666;
    text-decoration: none;
    color: black;
    outline: none;
    width: 120px;
    padding: 5px;
    margin: 9px;
    display: inline-block;
}

.buttonFave:active {

    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.buttonList {
  
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px #666;
    text-decoration: none;
    color: black;
    outline: none;
    width: 120px;
    padding: 5px;
    margin: 9px;
    display: inline-block;
}

.buttonList:active {
    background: #eec677;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.buttonCurrent {
    background: url('images/current.jpg') center no-repeat;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 5px #666;
    text-decoration: none;
    color: black;
    outline: none;
    width: 120px;
    padding: 5px;
    margin: 9px;
    display: inline-block;
}

.buttonCurrent:active {
    background: #eec677;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.buttonHist {
    background: url('images/hist.jpg') center no-repeat;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 5px #666;
    text-decoration: none;
    color: black;
    outline: none;
    width: 120px;
    padding: 5px;
    margin: 9px;
    display: inline-block;
}

.buttonHist:active {
    background: #eec677;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.buttonInv {
    background: url('images/Inv.jpg') center no-repeat;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 5px #666;
    text-decoration: none;
    color: black;
    outline: none;
    width: 120px;
    padding: 5px;
    margin: 9px;
    display: inline-block;
}

.buttonInv:active {
    background: #eec677;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.buttonAcct {
    background: url('images/gear.jpg') center no-repeat;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 5px #666;
    text-decoration: none;
    color: black;
    outline: none;
    width: 120px;
    padding: 5px;
    margin: 9px;
    display: inline-block;
}

.buttonAcct:active {
    background: #eec677;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.buttonCart {
    background: url('images/cart.jpg') center no-repeat;
    border: none;
    box-shadow: 0 5px #666;
    text-decoration: none;
    color: black;
    outline: none;
    width: 120px;
    padding: 5px;
    margin: 9px;
    display: inline-block;
}

.buttonFCart:active {
    background: #eec677;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.error, .red {
    font-weight: 600;
    color: red;
}

.rttxt {
    margin-left: 50px;
    padding: 10px;
    border: #ffffff solid thin;
}

.ltxt {
    padding: 10px;
    border: #ffffff solid thin;
}

controls .big {
    font-size: 115%;
}

.b1 {
    width: 100px;
}

.addToCart,
.setPriceButton,
.addProductToCart {}


/* Plus/Minus controls only. No add to cart */
.qtycontrol,
.setprice-form {
    max-width: 150px;
    position: relative;
    line-height: auto;
    margin-right: 0px;
}

.setprice-form>.setPrice,
.qtycontrol>.addQuantity {
    text-align: center;
    margin: 0px auto;
    grid-area: 1 / 2 / 2 / 3;
    height: 40px;
    padding: 0;
    border-radius: 0.5rem;
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
    max-width: fill-available !important;
    font-size: 1.15rem;
}

.qtycontrol>.addQuantity {
    grid-area: 1 / 2 / 2 / 3;
    text-align: center;

}

.setprice-form>.setPrice {
    grid-area: 1 / 1 / 2 / 4;
}

/* Plus/Minus controls with add to cart */
.control-box {
    gap: 0.25rem;
    max-width: 200px;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0px auto; 
    padding: 0px;
    box-shadow: #296adb00 0px 0px 20px;
}

div.control-box>button {
    margin: 0px auto;
    border-radius: 0;
    height: 40px;
    width: 100%;
    background: var(--primary);
    box-shadow: #296adb00 0px 0px 10px;
}


div.control-box>button:hover {
    box-shadow: #296adbb5 0px 0px 10px;
}


div.control-box>input.addQuantity {
    height: 40px;
    z-index: 1;
    width: 100%;
    text-align: center;
    margin: 0;
    border-radius: 0.5rem;
}

div.control-box>div.secondary {
    /*div buttons need this*/
    padding: 11px;
}

.minus-button,
.plus-button {
    z-index: 2;
}

.inner-btn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    fill: white;
    transition: all .2s ease-out;
    transition-property: transform;
    color: white;
    background: #a2aeb4;
    box-shadow: 0px 0px 3px rgba(238, 238, 238, 0.479)e7e;
    border-radius: 4px;
    height: 30px;
    width: 30px;
}


.inner-btn:hover {
    cursor: pointer;
    background: #8d969b;
}

.inner-btn:active {
    transform: scale(0.92);
    background: #717679;
}

.inner-btn-right {
    top: 6px;
    right: 6px;
}

.inner-btn-left {
    top: 6px;
    left: 6px;
}



@media (max-width: 640px) {

    div.control-box {
        grid-template-columns: 40px auto 40px;
        grid-template-rows: repeat(2, 40px);
    }

    .qtycontrol {}

    div.control-box>input.addQuantity {
    }

    div.prod-cart {
        width: 100%;
    }
}

@media (min-width: 768px) {

    div.control-box>input.addQuantity {
    }
}


.addQuantity {
    display: inline-block;
    margin: 0px;
}

.minus,
.plus {
    background: #f2f2f2;
    border: 1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 50px;
}

.btn-info {
    height: 100%;
    padding: 0px;
}

.quick-add {}

.quickadd-form {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr 100px;
    column-gap: 5px;
}

input.addRowQuantity {}

.addRowToCart {
}

#pricechart-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black overlay */
    z-index: 999;
    /* Adjust the z-index as needed */
}

#pricechart-modal article {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    max-width: 80%;
    max-height: 80%;
    overflow: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#pricechart-modal .close {
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 1rem;
    color: white;
    text-decoration: none;
}

#pricechart-modal iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#pricechart-modal footer {
    text-align: right;
    margin-top: 10px;
}

#pricechart-modal button {
    font-size: small;
    border: none;
    cursor: pointer;
}

#pricechart-modal button:hover {
    background-color: var(--secondary-hover);
}


#pricechart {
    width: 100%;
    min-width: 200px;
    min-height: 300px;
}

.end-logo {
    height: 3rem;
    margin: 80px 0px;
    fill: #111;
    display: none;
}



/* Sales Rerport .tmpl*/

.salesreport {
}

#salesReportArea {
    margin: 20px auto;
    max-width: 700px;
}

.salesreportform {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
}


.salesreportform input[type=submit] {
    flex: 1;
}

.preventry {
    background: var(--inner-bg);
}




@media (max-width: 640px) {

}

.finish-report {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

#salesvisit {
    padding: 1rem;
    min-height: 150px;
}

#char_counter {
    text-align: right;
    padding: 15px 10px 30px 0px;
}

.reportquestions {
    padding: 15px;
}

input.quick {}


input.quick1 {
    background: #FBFBFB;
    box-shadow: 0px 0px 10px -1px #ccc;
}

textarea.textarea1, #textarea1 {
    min-height: 150px;
    padding-top: 1rem;
}

.report-comments>input {
    margin: 0px;
    overflow-wrap: break-word;
}




.admin-buttons {
    width: 100%;
    display: grid;
    gap: 0.25rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.admin-buttons > a {
    line-height: 1.1rem;
    padding: 0.5rem 0.25rem;
    background: white;
    border-radius: 0.25rem;
    border: 1px solid #a0aed0;
    overflow: hidden;
    box-shadow: none;
    filter: none;
    transition: all 200ms ease;
    filter: drop-shadow(0px 0px 8px rgba(100, 100, 111, 0.0));
    scale: 1;
}

.admin-buttons > a:hover {
    filter: drop-shadow(0px 0px 8px rgba(17, 78, 211, 0.3));
    background: #2381ec2a;
}

.admin-buttons > a:active {
    scale: 0.9;
}

.admin-buttons a.active {
    color: white !important;
    fill: white !important;
    background: var(--primary);
    font-weight: bold;
  }


@media (min-width: 640px) {
    .admin-buttons {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}



/**/

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #666;
    margin: 1em 0;
    padding: 5px 0px;
}

hr.black {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #000;
    margin: 1em 0;
    padding: 0;
}



.products:link {
    text-decoration: none;
}

.products:hover {
    text-decoration: none;
    color: #6699cc;
}

.download:link {
    text-decoration: underline;
    color: red;
}

.download:visited {
    text-decoration: underline;
    color: red;
}

.download:hover {
    text-decoration: underline;
    color: #6699cc;
}

.download:active {
    text-decoration: underline;
    color: red;
}

a img {
    border: none;
}

div.center {
    text-align: center;
}

img.center {
    text-align: center;
}

div.right {
    text-align: right;
    margin: 5px;
}

p.right {
    font-size: 11pt;
    text-align: right;
    margin-right: 10px;
}

p.right1 {
    font-size: 10pt;
    text-align: right;
    text-decoration: underline;

}

p.left {
    text-align: left;
}


h5.middle,
h3.middle {
    text-align: center;
}


p.middle {
    display: flex;
    text-align: center;
    font-size: 14pt;
}



h4,
li,
button {
    cursor: pointer;
}

ul#toc {
    margin: 0px;
    padding: 0px;
}

ul#toc li {
    float: left;
    list-style: none;
}

ul#toc a {
    color: #e9e9e9;
    display: block;
    float: left;
    height: 45px;
    text-decoration: none;
}

ul#toc a:hover {
    background: #1d4da1;
    background-position: 0 -120px;
}

ul#toc a:hover span {
    background-position: 100% -120px;
}

ul#toc li.current a {
    background: #1d4da1;
    background-position: 0 -60px;
    color: #fff;
    font-weight: 600;
    box-shadow: 0px 5px 5px #3737374f;
}

ul#toc li.current span {
    background-position: 100% -60px;
}

ul#toc span {
    display: block;
    line-height: 2em;
    padding: 5px 15px 10px 15px;
}

/* Catalog Table */

.catalog-controls {
    display: grid;
    grid-template-columns: 4fr 1fr;
    width: 300px;
    margin: 0px 1rem 0px auto;
    grid-gap: 15px;
    margin-bottom: 10px;
}

.catalog-controls>h5 {
    width: 150px;
    grid-area: 1 / 1 / 2 / 3;
}

.catalog-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.catalog-nav>button {
    border-radius: 5px;
    padding: 4px;
}

.catalog-nav>button>svg {
    height: 2rem;
}

.catalog-bookmarks {
    display: grid;
    fill: var(--primary);
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.catalog-bookmarks > div {
    display: block;
    margin: auto;
width: fit-content;

}

.catalogpreview-desc,
.catalog-bookmarks>div>a>b {
    display: block;
    max-width: 200px;
    font-size: 0.85rem;
}

.catalogpreview-desc {
    display: flex;
    flex-direction: column;
}

.catalogpreview-desc a svg:hover {
    transition: transform 0.3s;
}

.catalogpreview-desc a svg:hover {

    -ms-transform: scale(1.15);
    /* IE 9 */
    -webkit-transform: scale(1.15);
    /* Safari 3-8 */
    transform: scale(1.15);
    filter: drop-shadow(0px 0px 1px rgba(17, 78, 211, 0.5));
}

.catalogpreview-desc p {
    font-size: 0.8rem;
}

.catalog-bookmarks>div>a>b {
    margin: 0px auto;
}

.catalog-viewer {
    width: 100%;
    height: 1199px;
    overflow: hidden;
    display: grid;
    margin: 0px 0px 3rem 0px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    grid-template-rows: 1fr 0px;
    grid-template-columns: 50px 1fr 1fr 50px;
    grid-row-gap: 0px;
}

#iframe2-container {
    overflow: hidden;
    grid-area: 1 / 2 / 2 / 4;
}

.cat-frame {
    width: 100%;
    height: 100%;
    border: 1px;
    overflow: hidden;
}

#iframe2-container,
#iframe1-container {
    background: #d3d3d3;
}

#iframe2 {
    height: 1199px;
    width: 922px;
    border: 1px;
    overflow: hidden;
    grid-area: 1 / 2 / 2 / 4;
}

.side {
    margin: 0px;
    border-radius: 0px !important;
}

button.previous,
button.next {
    width: 100%;
    margin: 0px;
    height: 100%;
}

@media (max-width: 640px) {


    #iframe1-container,
    .catalog-viewer #iframe2 {
        grid-area: 1 / 1 / 2 / 5;
        display: block;
    }

    .catalog-viewer {
        height: 90vh;
        grid-template-rows: 1fr 50px;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
    }

    .catalog-viewer .previous {
        grid-area: 2 / 1 / 3 / 3;
    }

    .catalog-viewer .next {
        grid-area: 2 / 3 / 3 / 5;
    }

    .catalog-bookmarks {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 640px) {

    #iframe2-container,
    #iframe1-container {
        grid-area: 1 / 2 / 2 / 4;
    }

    .catalog-nav {
        display: none;
    }

    .catalog-viewer .previous {
        grid-area: 1 / 1 / 2 / 2;
    }

    .catalog-viewer .next {
        grid-area: 1 / 4 / 2 / 5;
    }
}

@media (min-width: 768px) {
    .catalog-bookmarks {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.catalog-preview>img {
    width: 100%;
}

.catalog-preview {
    margin: 2rem auto 2rem auto;
    width: 140px;
    height: 180px;
    backdrop-filter: blur(2px);
    box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 10px, rgba(0, 0, 0, 0.05) 0px 5px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.catalog-preview-large {
    /* Waiting for larger pic
    width: 250px;
    height: 322px;*/
}

.catalog-preview:hover {
    transform:  translateY(-3px);
}

.catalog-preview p {}


#catalog-content {}


table.table1 td {
    width: 100%;
    margin-top: 10px;
    border: 1px solid #0a3e81;
    vertical-align: top;
    padding: 2px;
    width: 25%;
}

table.table1 td:hover {
    background: #f5f5f5
}

table.table1 img {
    float: left;
    margin: 25px 10px 23px 5px;
}


/* Forms/Lit Table */

table.table2 {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

table.table2 td {
    border: 1px solid #ccc;
    vertical-align: top;
    padding: 3px;
    text-align: center;
    font-size: 10pt;
}

table.table2 img {
    border: 1px solid #999;
    margin: 10px auto;
}



/* Search Invoice Table */

.invnav {
    display: grid;
    fill: var(--primary);
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0px 0px 30px 0px;
    font-size: 1.2rem;
}

.invBorder {
    padding: 1rem;
    border-radius: 1rem;
    background: white;
}

.invform {
    display: grid;
    column-gap: 30px;
}

table.searchinvoice {
    width: 100%;
}

table.searchinvoice td {
    vertical-align: top;
    padding: 14px 6px;
    font-size: 14pt;
}

.searchinvoice tr:nth-child(even) {}

/* Invoice Details Table */

table.invoicedetail {
    width: 100%;
    border-collapse: collapse;
}

table.invoicedetail td {
    border: 1px solid #ccc;
    vertical-align: top;
    padding: 3px;
    font-size: 11pt;
}

.invoicedetail tr:nth-child(even) {
    background: #d3eafb;
}

.terms {
    max-width: 800px;
    margin: auto;
}

table.terms {
    max-width: 800px;
    margin: auto;
}

table.terms td {
    text-align: left;
}

@media (max-width: 640px) {
    .invform {
        grid-template-columns: 1fr;
    }

    table.searchinvoice td {
        font-size: 10pt;
        padding: 10px 5px;
    }

}

@media (min-width: 768px) {
    .invform {
        grid-template-columns: 1fr 1fr;
    }
}


/* Manu Table */

.manulinks {
    display: flex;
    flex-wrap: wrap;
}
.manulinks a {
    background: #fff;
    color: #434343;
    fill: #434343;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    padding: 0 0.5rem;
    height: 2rem;
    text-decoration: none;
    position: relative;
    margin: 5px;
    margin-bottom: 1rem;
    border-radius: 5px;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15);
}

.manulinks a:hover {
    background: var(--primary-hover);
    color: #ffffff;
    fill: #ffffff;
}



table.table3 {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

table.table3 td {
    border: 1px solid #ccc;
    text-align: center;
    width: 25%;
    height: 115px;
    vertical-align: top;
    padding-top: 15px;
}

.table3 img {
    margin: 10px auto;
}

/* Item Table */

.searchresult {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.result-grid {
    display: grid;   
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 40px;
}


.result-title {
}

.result-title p {
    margin-bottom: 10px;
}


.result-title p a {
    font-size: 1.2rem;
    font-weight: 600;
    color: hsl(205, 20%, 32%);
    ;
}

.result-title p a:visited {
    color: hsl(205, 20%, 32%);
}

.result-thumbnail>a>div {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    height: 100%;
    width: 100%;
}

.result-thumbnail>a>div>img {
    height: 100%;
    max-height: 160px;
    width: 100%;
    max-width: 160px;
    object-fit: contain;
}


.smallChunk {
    padding: 0px;
    margin: 5px 0px;
    font-size: 1rem;
}


.result-body {
    height: max-content;
    font-size: 1rem;
}

.result-thumbnail {
    max-height: 160px;
}

.cart-controls {
    margin-left: auto;
    height: max-content;
    justify-self: end;
    width: fit-content;
    position: relative;
}


.cart-controls > p {
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.cart-controls-guest > div {
    margin: 1rem;
    justify-content: flex-end;
    gap: 0.5rem;
}

.cart-controls-guest > p {
    display: flex;
    margin: 1rem !important;
    justify-content: flex-end;
}


.productcode p {
    font-size: 0.6rem;
    margin:0 0 -6px 0;
}

.productcode a {
    font-size: 1.3rem;
}

.result-links {
    height: 35px;
    grid-area: 3 / 1 / 4 / 3; 
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-direction: row;
}



.result-links a  {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #3a3a3a;
    text-decoration: none;
    transition: all 500ms ease;
    background: transparent;
    border: solid 1px #515151 ;
    border-radius: 0.25rem;
    padding: 0 0.25rem;
    height: 30px;
}

.result-links a:hover, 
.result-links a:active {
    background: #e9e9e9;
}

.empty-result {
    fill: #202020;
    color: #202020;
    max-width: 510px;
    text-align: center;
    margin: 0px auto;
    padding: 6rem 1rem;
}

.empty-result>div {
    padding: 20px;
    text-align: left;
}

.empty-result svg {
    padding: 1rem;
}

.result-price {
    padding: 5px;
    margin: 0px 20px 0px 5px;
    text-align: right;
    grid-area: 1 / 1 / 2 / 4;
}


.result-body>p,
.result-body>a,
.result-links {
    font-size: 0.85rem;
    font-weight: medium;
    margin: 0;
}


.result-body p.result-price {
    font-size: 10pt;
    margin: 0px;
}



@media (max-width:640px) {
    .result-thumbnail {
        max-height: 200px;
        grid-column: 1 / span 2;
        margin-bottom: 0.5rem;
    }


}


@media (min-width:640px) {

    .result-grid {  
        grid-template-columns: 160px 1fr 1fr;
    grid-template-rows: 1fr 40px;
    }
    .result-links {
        grid-area:2 / 1 / 4 / 3; 
    }

}


@media (min-width: 768px) {

    .result-body {
        font-size: 12pt;
        margin: 0px;
    }

    p.result-price {
        font-size: 12pt;
    }

}



/* Ladder Table */

.pricefixed{ height: 40px;}

.addedToCartMessage {
    border-radius: 0.5rem;
    padding: 0.5rem;
    top: 0.25rem;
    width: 100%;
    border: solid 1px #3154d1ec;
    background: white;
    position: absolute;
    margin: auto 0;
    text-align: center;
    color: var(--primary);
    font-weight: bold;
}

table.ladders {
    border-collapse: collapse;
    width: 100%;
    padding: 0;
    font-size: 0.75rem;
    max-width: 200px;
    margin: 5px auto 15px auto;
}

table.ladders tr:first-child {
    background-color: #e2e2e2;
  }

@media (min-width: 640px) {
    table.ladders {
        max-width: 260px;
    }
}

table.ladders td {
    border: solid 1px #cccccc9e;
    padding: 3px;
}

/* DS/NOF Table */

table.dstable {
    width: 100%;
    border: 1px solid #999;

}

dstable th {
    padding: 5px 3px 5px 4px;
}

dstable tr:nth-child(even) {
    background: #ecf0f3;
}

dstable td {
    padding: 10px 5px 10px 0;
    border-width: 1px 0;
    border-color: #999;
    border-style: solid;
    vertical-align: middle;
}

th.left {
    text-align: left;
    --border-width: 1px;
}

.right {
    text-align: right;
}

/* Cart Table */

#emptycart {
    display: none;
}

#emptycart p {
    padding: 150px 0px;
    text-align: center;
}

.checkout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0px 0px 50px 0px;
}

.ordersubtotal {
    margin: 1.5rem 0.5rem 1rem 0.5rem;
    font-size: 1.05em;
    text-align: right;
    color: var(--mp-title);
}

.ordersubtotal p {
    margin: 0;
}

.ordersubtotal > p > span {
    margin-left: 0.5rem;
}

.cart-checkout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    margin: 0;
}

.cart-checkout-top {
    padding: 2rem 0 0 0;
    margin: 0 auto;
}


input[type=button].placeorder-button,
input[type=submit].placeorder-button {
    background: rgb(231, 178, 79);
    border: 0;
    color: #111;
    font-weight: bold;
}

a[role=button].checkout-button {
    background: #e7b24f;
    grid-area: 1 / 2 / 2 / 3;
    border: 0;
    color: #111;
    font-weight: bold;
}

.checkout-button:hover,
input[type=button].placeorder-button:hover,
input[type=submit].backtocart:hover {
    background: rgb(233, 179, 79);
    box-shadow: rgba(231, 178, 79, 0.6) 0px 5px 15px 0px;
}

#createQuoteButton {}

#createQuoteButton:hover {
    box-shadow: rgba(41, 106, 219, 0.6) 0px 5px 15px 0px;
}

.cart-subtotal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0px 20px 30px 20px;
}

#subtotalField {
    font-size: 1.5rem;
}

#carttable {
    margin: 0px;
}

#carttable a {}

.cart-item {
    display: grid;
    margin: 25px 0px;
    grid-template-columns: 130px 1fr;
    grid-template-rows: 60px 75px 1fr;
    /*should be 75+75 but 60+75 fits better*/

}

.cart-title {
    margin: 0px;
    padding: 50px 0px;
}

.cartitem-thumbnail {
    padding: 0px 5px 0px 0px;
    grid-area: 1 / 1 / 3 / 2;
}

.cartitem-thumbnail>div {
    display: grid;
    place-items: center;
    width: 75px;
    height: 75px;
}

.cartitem-thumbnail>div>img {
    height: 100%;
    max-height: 75px;
    width: 100%;
    max-width: 75px;
    object-fit: contain;
}

.cartitem-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-area: 2 / 2 / 4 / 3;
}

.cartitem-data>div>p.title-m {
    margin: 0px;
    color: var(--color);
}

.cartitem-detail {
    padding: 0px 10px 0px 0px;
}



.cartitem-detail-tall {
    grid-row: 1 / span 3;
}

.cartitem-detail-stock {
    grid-column: span 2;
    grid-row-start: 2;
}

.cartitem-detail-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin: 0px 0px 12px 0px;
    width: 85%;
    white-space: nowrap;
}

.cartitem-title p {
    margin-bottom: 0px;
}

.instock {
    color: green;
}

.outofstock,
.notAvailable {
    color: #c74b4b;
}

.moreotw {
    color: #e79a27;
}

.outofstock,
.notAvailable,
.moreExpected,
.instock {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 5px 0px;
}

.buyer {
    font-size: 0.95rem;
    margin: 5px 0px;
}

.outofstockinfo {
    margin: 0px;
    padding: 0px;
    font-size: 0px;
}

.cart-item-list-price {}

.setprice-label {
    margin-top: 10px;
}

.cart-item-cust-price {
    font-size: 1.4rem;
}

.cart-item-qty {}



@media (max-width: 768px) {
    .cartitem-product-total {
        grid-area: 2 / 1 / 3 / 1;
    }

}

@media (min-width: 768px) {
    .cartitem-product-total {
        grid-template-columns: 1fr 1fr;
    }
}



.Extended {
    font-size: 2rem;
    text-align: center;
}

.pricechart-button {
    color: white;
    background: #111;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    display: inline;
    padding: 1px 3px;
    margin: 0px 3px;
}

.cartqty-form {
    display: grid;
    grid-template-columns: 35px 1fr 35px;
}

.cartqty-form>.addQuantity {
    margin: 0px;
}

.setPriceButton,
.addToCart {
    display: inline;
    background: none;
    fill: var(--primary);
}

.setPriceButton:hover {}

.setPriceButton:active {
    scale: 1.05;
    transition: scale .5s ease;
}

.deleteFromCart {
    background: transparent;
    margin-left: auto;
    padding: 0.2rem;
    height: 25px;
    width: 25px;
    fill: red;
    border: solid 1px red;
    border-radius: 0.3rem;
}

.deleteFromCart:hover, .deleteFromCart:active{
    background: transparent;
}

.cart-middle {
    display: grid;

}

.cartitem-title {
    display: grid;
    grid-template-columns: 1fr 20px;
    column-gap: 5px;
    grid-area: 1 / 2 / 2 / 3;
}


.cart-middle-left>p,
.cart-middle-right>p {
    display: grid;
    margin: 0px;
}

div.cart-middle-right>p {}

#emptyCartButton {
    padding: 0px 10px;
}

#emptyCartButton>a {
    margin-right: auto;
}

form.checkoutform {
    padding: 0px 20px;
}

.checkoutform-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.formtitle {
    font-weight: 550;
    font-size: 0.95rem;
    margin: 20px 0px 10px 0px;
}

@media (max-width: 640px) {
    .cart-item {
        grid-template-columns: 75px 1fr;
        grid-template-rows: 80px 1fr;
        row-gap: 10px;
    }

    .cartitem-thumbnail {
        grid-area: 1 / 1 / 2 / 2;
    }

    .cartitem-title {}

    .cartitem-data {
        grid-area: 2 / 1 / 3 / 3;
    }

    .cart-middle-left {
        display: grid;
    }

    .checkoutform-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) {

    .cart-middle {
        margin: 0px 50px
    }
}

@media (min-width: 768px) {
    .cartitem-data {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.show {
    display: block;
}


.backcontinue {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 15px;
}

.backcontinue input {
    margin: 0px;
    border-radius: 5px;
}


.hipaccount-box {}




/* Order Table */

table.ordertable {
    border-collapse: collapse;
    width: 100%;
    font-size: 11pt;
}

table.ordertable th {
    padding: 5px;
    text-align: left;
}

table.ordertable td {
    padding: 5px;
    vertical-align: middle;
}

.ordertable tr:nth-child(even) {
    background: #ecf0f3;
}

/* Videos Table */

table.table4 {
    width: 100%;
    border-collapse: collapse;
}

table.table4 td {
    border: 1px solid #ccc;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    font-size: 11pt;
}



.youtube-player {
    position: relative;
    padding-bottom: 56.23%;
    /* Use 75% for 4:3 videos */
    height: 0;
    overflow: hidden;
    max-width: 65%;
    background: #000;
    margin: 5px auto;

}

.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}

.youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}

.youtube-player img:hover {
    -webkit-filter: brightness(75%);
}

.youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url('images/yt-2.png') no-repeat;
    cursor: pointer;
}



/* Line Items Table */


table.lineitems {
    width: 100%;
    border-collapse: collapse;
}

tr, td {
    
}

table.lineitems tr:nth-child(even) {
    background: #ffffff;
}

table.lineitems tr:nth-child(odd) {
    background: #f5f5f5;
}

table.lineitems tr:first-child {
    background: var(--inner-bg) !important;
}


table.table5 {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
}

table.table5 td {
    border: 1px solid #ccc;
    padding: 5px;
    vertical-align: middle;
}

table.table5 img {
    margin: 3px;
    text-align: center;
}

table.code {
    border-collapse: collapse;
    border: 0px;
}

table.code td {
    border-collapse: collapse;
    border: 0px;
    width: 145px;
}

td.small {
    text-align: center;
    font-size: 9pt;
}

table.table5 td.logo {
    vertical-align: middle;
    text-align: center;
    width: 160px;
}

div.element {
    background: url(images/element-bkgd.jpg);
}

div.db {
    background: url(images/db-bkgd.jpg);
}

div.northern {
    background: url(images/ncontours-bkgd.jpg);
}

dform {
    text-align: center;
}

.divider {
    clear: both;
}

img.left {
    float: left;
    margin: 10px 5px 3px 8px;
}

img.noborder {
    border: none;
}

.code_filter_row:nth-child(odd) {
    background: #ccccff;
}

.hideInline {
    display: none
}

.showInline {
    display: inline;
}


.itemr {
    text-align: right;
    padding: 3px;
}

.itemc {
    text-align: center;
}

.iteml {
    text-align: left;
}

tr.oddeven {
    vertical-align: top;
}

tr.oddeven.header {
    vertical-align: bottom;
    font-weight: 600;
}

tr.oddeven.comment {
    background: #eeeeee;
}

tr.oddeven.header {
    text-align: bottom;
    font-weight: 600;
}

tr.oddeven.newcat {
    font-style: italic;
}

tr.oddeven.detail:nth-child(even) {
    background: #ddddff;
}

tr.oddeven.detail:nth-child(odd) {
    background: #ffdddd;
}



.likeALink {
    cursor: pointer;
    text-decoration: underline;
    color: blue;
}

.f-r {
    float: right;
}

.f-l {
    float: left;
}

.vendor_no {
    float: left;
    vertical-align: top;
}

td.chem {
    vertical-align: top;
}


.blockDisplay {
    display: none;
}


.productCodeNotFound {
    text-align: center;
    margin: 30px auto;
    color: red;
}

.changedValue {
    font-weight: 600;
    text-align: center;
    padding: 5px 0px 5px 0px;
}

.styled-select {
    background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
    height: 29px;
    overflow: hidden;
    width: 240px;
}

.styled-select select {
    background: transparent;
    border: none;
    font-size: 14px;
    height: 29px;
    padding: 5px;
    /* If you add too much padding here, the options won't show in IE */
    width: 150px;
}

.semi-square {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.blue {
    background: #3b8ec2;
}

.blue select {
    color: #fff;
}

.clipProductCode,
.kitProductCode {
    background: var(--inner-bg);
    margin: 12px 7px 12px 7px;
    padding: 15px;
    border-radius: 10px;
}

.addonremoved {
    opacity: 0.6;
    filter: grayscale(100%);
}

.includeadd {}

.bugTable th {
    text-align: left;
    vertical-align: top;
}

.bugTable td {
    text-align: left;
    vertical-align: top;
}

.bugTable tr.oddeven:nth-child(odd) {
    background: #ffffff;
}

.bugTable tr.oddeven:nth-child(even) {
    background: #ffff80;
}

div.searchDif {
    margin: 0.25rem 0px 1rem 15px;
}



.title-xl {
    font-size: 2em;
    padding: 0px;
    margin: 0px;
    margin-bottom: 1rem;
    color: var(--mp-title);
    font-weight: 500;
}

.searchDif,
.title {
    font-size: 1.5rem;
    padding: 0px;
    margin: 0px;
    margin-bottom: 1.5rem;
    color: var(--mp-title);
    font-weight: 500;
}

@media (max-width: 640px) {

    .searchDif,
    .title {
        font-size: 1.3em;
        color: var(--mp-title);
    }

    .title-xl {
        font-size: 1.8rem;
    }

    .clipProductCode,
    .kitProductCode {
        margin: 0px 0px 12px 0vw;
    }
}

header>p.title {
    margin: 0px;
}

header>p.title-m {
    margin: 0px;
}

.title-m {
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--mp-title);
}

.title-sm {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--mp-title);
}

.searchDif::after {
    content: "\a";
    white-space: pre;
}

.field_text_error {}

.field_message_error {
    font-size: 10pt;
    font-weight: 600;
    color: #ff0000;
}

.field_value_error {
    background: #ff8080 !important;
}


#slideshow {
}

#slideshow>div {
    width: 100%;
    height: 100%;
}

#slideshow>div > a {
    width: 100%;
    height: 100%;
}

.webdescription_blurred {
    width: 300px;
    height: 25px;
    font-size: 12p5
}

.webdescription_focussed {
    width: 300px;
    height: 100px;
    font-size: 12p5
}




.rb {
    font-weight: bold;
    font-size: 0.8rem;
    text-align: right
}

.code {
    float: left;
    font-weight: 600;
    color: #990000;
    font-size: 12pt;
}

.promo {
    font-weight: 600;
    color: #8b0000;
    margin-bottom: 10px;
    text-align: right;
}

.status_message {
    font-weight: 600;
    color: #8b0000;
    border: black solid 2px;
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 10px;
}

input.catalogPage {}