/* the palette - try to use these colours:
#3D291F- dark brown - main font colour
#fedb4f - brighter orange - navbar and borders
#ffb - light yellow background

 # 23614C - dark green (274C49 is more slate-green)
  # B6FFAF - light green

  see https://color.adobe.com/create/color-wheel/?base=2&rule=Custom&selected=0&name=My%20Color%20Theme&mode=rgb&rgbvalues=0.7146873962214344,1,0.6862745098039216,0.1388516114035306,0.38,0.2998770997718581,0.4,0.26666666666666666,0.2,1,1,0.7333333333333333,0.996078431372549,0.8588235294117647,0.30980392156862746&swatchOrder=0,1,2,3,4


try:
#393D40 (green) (or #393D40 for a blue)
#d22 (red)
#f90 (orange)
#fb5 (paler orange)
#eea (v light)
*/


/* LAYOUT: Centered layout with min and max width. Header and sticky footer. Main body to be three columns.
Should be easy to have a media query for mobile design.
*/
/*#logo{background-image: url("http://i.imgur.com/kTIHogS.png") !important;background-size: contain !important;background-repeat: no-repeat !important;background-color: white !important;}*/


/* body:not(.admin) [modal=viewOrder] #total-flex {display: none !important;} */



body {margin:0;min-width:320px; font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}

body:not(.alias) .show-for-alias:not(.force-show) {display: none !important;}
body:not(.inc-vat) .inc-vat-show:not(.force-show) {display: none !important;}

#container {display: flex; min-height: 100vh; flex-direction: column;  /*min-width:600px;*/ max-width:1500px; margin: 0 auto; background-color: #fff;}
footer {text-align:center; background: #003c56; display:flex; flex-wrap:wrap; color:#f1edea;}
footer textarea {padding: 5px 0 0 10px;}

main {flex: 1; display: flex; flex-direction: row;flex-wrap:wrap;}
#product-menu-wrapper {min-width: 0; flex: 1 1 240px; padding:0px; margin-top:0px; background-color:#ddd;}

#main {min-width: 0; flex:8 1 500px; padding:20px;}
aside {min-width: 0; flex: 0 0 170px;}


footer .help {flex: 1 1 500px;text-align:left;margin-left:150px;}
footer .address {flex: 1 1 100px;text-align:right; padding:30px;}

footer a:link {color:#f1edea; font-weight:normal}
footer a:visited {color:#f1edea; }

#footer-end {font-variant:small-caps; width:100%; padding:20px}
#footer-end a:before {content: '\00a0\00a0'} /* These are NBSPs */
#footer-end a:after {content: '\00a0\00a0'} /* These are NBSPs */
#footer-end a:link {color:#f1edea; font-weight:normal}
#footer-end a:visited {color:#f1edea; }

#footer-end ul {list-style-type: none; padding-left:0px;}
#footer-end ul li {display: inline-block; margin:10px;}

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on September 6, 2016 */
@font-face {
    font-family: 'maven_problack';
    src: url('../fonts/mavenpro-black-webfont.woff2') format('woff2'),
         url('../fonts/mavenpro-black-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;

}




@font-face {
    font-family: 'maven';
    src: url('../fonts/mavenpro-bold-webfont.woff2') format('woff2'),
         url('../fonts/mavenpro-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}



/*
@font-face {
    font-family: 'maven';
    src: url('../fonts/mavenpro-medium-webfont.woff2') format('woff2'),
         url('../fonts/mavenpro-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}*/




@font-face {
    font-family: 'maven';
    src: url('../fonts/mavenpro-regular-webfont.woff2') format('woff2'),
         url('../fonts/mavenpro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'quicksandbold';
    src: url('../fonts/quicksand-bold-webfont.woff2') format('woff2'),
         url('../fonts/quicksand-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'quicksanditalic';
    src: url('../fonts/quicksand-italic-webfont.woff2') format('woff2'),
         url('../fonts/quicksand-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'quicksandregular';
    src: url('../fonts/quicksand-regular-webfont.woff2') format('woff2'),
         url('../fonts/quicksand-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'quicksandlight_italic';
    src: url('../../fonts/quicksand-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/quicksand-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'quicksandlight';
    src: url('../fonts/quicksand-light-webfont.woff2') format('woff2'),
         url('../fonts/quicksand-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.hidden {display: none !important}

.flex-row-fill {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-row-fill > * {
  flex-grow: 1;
}

.midsummer-button {
  background-color: rgb(238, 117, 0);
  display: inline-block;
  border-radius: 2px;
  padding: 3px;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

div.tip {z-index:1000}

body, input, select {font-family:'maven', Trebuchet MS, Verdana, Tahoma,arial,helvetica,sans-serif}
body {color:#636363; padding: 0px; background-color:#ccc;}

#lowerMenu {float:left; width:170px; border:2px solid #fedb4f; background-color: #ffb; margin-top:25px; padding:10px;}

#main {margin-top:0px; padding-top:0px; padding-bottom:100px; position:relative;}

/*#right {position:absolute; top:40px; right:0px; width:150px; min-height:300px; background-color:#ddc; color: #23614C; padding:15px;}*/

#right {float:right; width:150px; min-height:300px; color: #23614C; padding:15px;}


#trolleyLink {
  width:100px;
  height:40px;
  background: url('/icon/cart.svg') 10px 10px no-repeat;
  background-size:80px;
  padding:85px 0 8pt;
  background-color:#fff;
  text-align: center;
  position:relative;
  font-weight:bold;
  transition: width 0.3s, height 0.3s, background 0.4s;
  cursor:pointer;
  color: #003c56
}
#trolleyLink.wobble {width:100px; height: 40px; background: #d22 url('/icon/cart-icon.svg') 10px 10px  no-repeat; transform: rotate(360deg);
transition: width 0.3s, height 0.3s, transform 0.4s;}
#trolleyLink:hover  {background-color:#ccc;}

#easypv {width:158px; height:50px; margin-top:41px; /*border:1px solid black; background: gold url('/graphics/easypv-logo.png') no-repeat;*/ cursor:pointer;}
#easypv img {height:50px;float:left}
#easypv .easy-text{float:right;margin-top: 7px;}


.aliasInput {opacity:0.95; background-color:#ddd; padding:10px; border-radius:5px; float:right; margin:12px; margin-top:20px; position:relative; color:#c23909}
.aliasEmail {width: 130px;}
.aliasList {position:absolute; left:40px; left:0px; background-color:#ddd; width:350px; }
.aliasList ul {padding-left:0px; list-style-type: none; font-size:0.85em;}
.aliasList ul li {cursor:pointer;margin:4pt;}
.aliasList ul li:hover {background-color:#fff;}
.aliasList .code {
  background-color:#fff;
  padding:4px 7px;
  border-radius:4px;
  margin:4px;
  display:inline-block;
  margin-left: 0;
}

.supplierInput {opacity:0.95; background-color:#ddd; padding:10px; border-radius:5px; float:right; margin:12px; margin-top:20px; position:relative; color:#c23909}
.supplierList {position:absolute; left:40px; left:0px; background-color:#ddd; width:350px; }
.supplierList ul {padding-left:0px; list-style-type: none; font-size:0.85em;}
.supplierList ul li {cursor:pointer;margin:4pt;}
.supplierList ul li:hover {background-color:#fff;}
.supplierList .code {
  background-color:#fff;
  padding:4px 7px;
  border-radius:4px;
  margin:4px;
  display:inline-block;
  margin-left: 0;
}

a:link{color:#23614C;font-weight: bold; text-decoration:none;}
a:visited{color:#23614C;font-weight: bold;text-decoration:none;}
a:hover{color:#ff0000;font-weight: bold;text-decoration:underline;}
a.no-hover-styles:hover {all:unset}
a:active{color:#23614C;font-weight: bold;text-decoration:none;}


.wide, [modal].wide {width:900px}

header {height:50px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);z-index:99;}
#logo {float:left; display:block; width:212px; height:50px; margin-top:7px; margin-left:7px;}
#contact {float:right; height:40px; border-left:0px dotted #ffb; padding-left:10px; padding-top:15px;margin-left:10px;color:#f1edea; text-align:right; font-size:13px;}
#dotmenu {
  float: right;
  height: 70px;
  width: 17px;
  background: url('/graphics/dot-menu.png');
  background-size: 15px 29px;
  margin: 3px 6px 0 0px;
  border: 2px solid transparent;
  border-radius: 4px;
  position: relative;
  cursor: default;
}
#dotmenu:hover {border: 2px solid #888}

div#popMenu {display:none; position:absolute; top:50px; right:-1px; border:0px solid #636363; padding:15px; background-color:#f1edea; z-index:5000; width:500px;box-shadow: 7px 10px 10px -4px rgba(102,102,102,0.49);}
#dotmenu:hover div#popMenu {display:block}


#popMenu div.splitMenu {display:inline-block; width:240px; vertical-align:top;}
#popMenu div.splitMenu h3{margin-bottom:4px;}
#popMenu div.splitMenu ul {list-style-type: none; margin-top:0px;margin-left:0px; padding-left:0px;}
a.linkbox, span.linkbox {background-color:#c23909; color:white;padding:4px 10px;cursor: pointer;}


#s {
    float:right;
    height:35px;
    margin:17px;
    width: 30%;
    box-sizing: border-box;
    border: 0px solid #ccc;
    border-radius: 0px;
    font-size: 15px;
    background-color: #f1edea;

    background-image: url('/icon/search.php');
    background-position: 8px 5px;
    background-size: 26px 26px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    max-width: calc(100% - 441px);
    margin-right: 0px;
}
#s:focus {
    width: 32%;
}
.mobile-close-search {display:none; float:right; margin-top:16px;margin-right:16px;}

#searchResults{
  width:100%;
  position:absolute;
  left:0;
  z-index: 98;
  background-color: white;
  padding:20px;
  box-sizing:border-box;
  box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
}
#searchCover{
  background-color: rgba(50,60,30,0.5);
  width: 100%;
  height: 100%;
  z-index:98;
  position: fixed;
  left:0;
}
#searchCover.hidden{
  display:none;
}
.searchResultsGenerated .item-wrapper {
  /*border-bottom: 1px solid #eea;*/
  width: 100%;
  display: flex;
  flex-direction: row;
}
.searchResultsGenerated .wrapper-1{
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  margin-top: 5px;
  align-items: center;
  gap: 12px;
}
.searchResultsGenerated .wrapper-1 img{
  margin-left: -8px;
  margin-right: 8px;
}
.searchResultsGenerated .wrapper-2{
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.searchResultsGenerated .wrapper-2>div{display:inline-block;}
.searchResultsGenerated .prodCode {width:105px;flex-shrink:0;}
.searchResultsGenerated .prodTitle{
  font-size: 14px;
  font-weight: 700;}
.searchResultsGenerated .quantity-title {width:124px; text-align:center;}
.searchResultsGenerated .prodPrice {width:100px; text-align:right;}
.searchResultsGenerated .total {width:100px;text-align:right;}
.searchResultsGenerated .close-search {float:right;}


/*make links in left and right areas without underline on hover*/
#shopmenu a:link, #shopmenu a:visited, #shopmenu a:active {color:#006633;font-weight: normal; text-decoration:none;}

/*dl.boxlist {border:1px solid #067c66; width:175px;margin:10px;}
dl.boxlist dt {background:#067c66; color:#fff;padding-top:2px; padding-bottom:2px;}
dl.boxlist dt a{color:#fff;}

dl.boxlist dd {background:#fff; color:#067c66; margin:0px; border:0px; padding:0px;}
dl.boxlist dd a{background:#fff; color:#067c66; margin:0px; border:0px; padding:0px;}
*/

/*styling for shop menu*/
#menu dl {color: #393D40; font-size:1.05em;margin-left:10px;margin-right:10px; background-color:#ddd}
#menu dt{margin:16px 0 0 10px;padding-left:0px;padding-top:15px;}
#menu dd {margin: 0px; font-size:0.9em; color:#000; font-weight:normal;padding: 0px;position:relative;}
#menu dd a {display:block; padding:4px; padding-top: 2px; padding-bottom:2px; margin:2px;list-style:none;text-decoration:none;color:#067c66;font-weight: normal;}
#menu dd a:hover{background:#f50;}
#menu dd div.hovermenu {display:none;}
#menu dd:hover div.hovermenu {display:block; color:#067c66; font-weight:normal; position:absolute; left: 120px; top:-40px; width:200px; z-index:200; background:#ff9; border:2px solid #067c66; padding:5px; }
#menu dd:hover div.hovermenu img {border:1px solid #067c66; padding:0px; margin:4px;float:left;}
#menu dd:hover div.hovermenu dl { background-color:#fff}
#menu dd:hover div.hovermenu dl dd {display:block; width:125px; margin:0px; padding:0px; background-color:#fff;margin-right:30px;}
#menu dd:hover div.hovermenu dl dd a {display:block;background:#fff;font-weight:normal;}
#menu dd:hover div.hovermenu dl dd a:hover{background:#fff; text-decoration:underline;}
#menu dd:hover div.hovermenu h3 {margin-top:4px; margin-bottom:4px; padding:0px;}

.floatleft {float:left; margin:20px 30px 20px 0px;}
.floatleftborder {float:left; margin:20px 30px 20px 0px; border: 2px solid #ccc;}
.floatright {float:right; margin:20px 0px 20px 30px;}
.floatrightborder {float:right; margin:20px 0px 20px 30px; border: 2px solid #ccc;}
.fullwidth {width:100%; margin-top:25px; margin-bottom:20px;}
figure {background-color: #ccc; text-align: center; padding: 2px;}
figcaption {font-size:0.8em;}

#pageHeader {line-height:1.3em; color: #ff9900; font-weight:normal; font-size:2.3em; margin-top:70px;}
#pageContents{line-height:1.6em; color: #636363; padding-bottom:50px;}
.pageContent{line-height:1.6em; color: #636363; padding-bottom:50px;}

/* category page */

ul#products {list-style-type: none;padding:0px; font-size: inherit;}
ul#products li[group] {font-size: inherit; display:block; min-height:184px; min-width:400px; position:relative;clear:left}

ul#products .prodImg {position:absolute; left:100px; top:0px; border:3px solid #c23909; width:100px; }
ul#products h2 {position:absolute; left:100px; top:-27px; font-size:16px; font-weight:normal; border:3px solid #c23909; display:block; width:100px; height:20px;margin:0px; padding:2px 0px; text-align:center;}
ul#products h3.price {position:absolute; right:0px; top:0px; width:79px; color:#003c56; text-align:center; margin: 0px; margin-top:10px; padding: 0px;}

ul#products h3.prodTitle {background-color:#f90; color:white; margin:0px 60px 0px 0px;border-bottom: 3px solid #c23909;padding-left:5px;font-size:16px;font-weight:normal;font-variant:small-caps;}
ul#products div.shortdesc {padding:4px; font-size:0.85em; line-height:1.5em;}
ul#products div.comment {text-align: right;
    background-color: #c23909;
    position: absolute;
    right: 0px;
    padding: 4px 8px;
    color: #fff;
    font-variant: small-caps;
}

ul#products li[group] a {font-weight:normal; color: #3D291F; }
ul#products li[group] h2 {color: #c23909; }
ul#products li[group] a:hover {text-decoration:none;}


/*TODO:
- add list for hovering
- comment field

*/
ul#products img.tellmemore {float:right; background-color: #c23909;  padding: 30px 5px 5px 5px;}
ul#products div.descriptionContainer {border:3px solid #c23909;min-height:100px; margin-left:204px;padding-top:0px;}

div.hoverList {width:100px; float:left; }

div.hoverList p {position:absolute; top:-17px;  margin: 0px; padding: 3px;display:block; width:90px; font-size: 12px;
    text-align: right; color:#c23909;}
div.hoverList ul {margin:0px; padding:0px; list-style-type:none; width:100%; text-align:right; border-top: 3px solid #c23909;padding-bottom: 30px;}
div.hoverList ul li {margin:0px; padding:0px 7px 0px 0px; font-size:14px;}

div.hoverList p {color:#f20;}
div.hoverList p.greenFont {color:#c23909; transition: color 2s ease-in;}

ul#products li[group] div.hoverList li a {color:#c23909;background-color:#fff;display:block;width:100%; height:100%;margin:0px; padding:1px 4px; font-size:14px;}
ul#products li[group] div.hoverList li.activeitem a {color:#fff; background-color: #636363;}

/*product pages */

#price {font-style:normal; font-size:3em; color:#fff;}
#display_price {font-style:normal; font-size:3em; color:#fff;}
#optionbox {color:#fff;margin:0px; padding:0px;}
#optionsbox2 {float:right; margin:2px;}
#optionsbox2 input, #optionsbox2 select {border:2px solid #fff; background-color:#f90; color:#fff;}

#leftbits {position:relative; float:left; width:156px; background-color: white;height:156px; margin-right:20px; margin-bottom:20px;margin-top:80px;}

#itempics .mainimg {position:absolute; top:0px; left:0px; width:150px; height:150px;border:3px solid white;}
#hoverthumbs {position:absolute; top:27px; left:355px; width:70px; display:none; }
#hoverthumbs img {width:60px; height:60px; border:3px solid white;}
div#itempics:hover {width:420px; height:350px; background-color:white;border:3px solid #636363;}
#itempics:hover .mainimg {top: 10px; left:10px; width:300px; height:300px; z-index:2000;border:20px solid white;}
#itempics:hover #hoverthumbs {display:block;}
#grouptitle {background-color:#fff; border:3px solid white; color: white; text-align:center; position:absolute; top:-35px; left:0px; width:150px; height:28px;font-size: 1.5em; font-weight: normal; padding-top: 2px; padding-bottom: 2px; margin: 0px;}

.opaque {opacity:0; transition: opacity 2s ease-in-out;}

#subtitleouter {color:#fff; position:absolute; left:-7px; top:80px; width:100%;}
#subtitleinner {margin-left:180px;margin-right:10px;padding-left:10px; display:block;background-color:#f90; color:#fff; border:3px solid white;}
#subtitleinner h2 {display:inline-block;color:#fff;font-style:normal; font-variant:small-caps; font-size: 23px; font-weight: normal;  padding-top: 2px;  padding-bottom: 2px; margin: 0px;}

#options {color:#fff; width:170px; margin-top:2px; margin-right:2px; border:2px solid #fff; color: #fff;background-color:#f90; font-size:17px; font-variant:small-caps}

#rightbits {float:right;margin-top:110px; width:180px;padding-left:20px; margin-right:-3px;}
#buyarea {background-color: #393d40; width:180px; /*min-height:270px;*/text-align:center; color:#fff;padding-top:20px;}
#buyarea input, #buyarea select {color:#fff; background-color:#f90; border:2px solid #fff;}
#buyarea input {width:23px}
#buyarea input.image {border:0px;margin-top:10px}

#moreinfo {border:3px solid #8c2; margin-top:60px;}
#moreinfo h2{background-color:#8c2; font-style:normal; color:#fff; text-align:center; margin:-1px; font-size: 1.1em; font-weight: normal;  padding-top: 2px; padding-bottom: 2px;}
#moreinfo ul li.list-web {list-style-image: url(/graphics/globeicon.gif);list-style-type: circle;}
#moreinfo ul li.list-pdf {list-style-image: url(/graphics/pdf.gif);list-style-type: circle;}
#moreinfo ul li.list-info {list-style-image: url(/graphics/icon_arrow.gif);list-style-type: circle;}
#moreinfo ul li a {font-weight:normal;}


#display_price {color: white;}
#mainContent {padding-top: 140px;line-height:1.6em;}
#mainContent p,
#mainContent ul,
#mainContent li {font-size: inherit;}
#moreinfo ul {padding-left: 30px;}
#display_price {font-size:2em;}
#moreinfo {word-wrap:break-word;}

.alignnone {display: inline;}
.aligncenter{display: block; text-align: center;}
.alignleft{display: inline; float: left;}
.alignright{display: inline; float: right;}

#buyarea .discount {color: #fff; margin-bottom: 10px;width: 180px; font-size:0.8em;}
.modalCover {z-index:3000}
.modal {z-index:4000; overflow-y: auto}
.modal h2 {color: #c23909;font-weight:normal; font-size:2.1em;}

.invisible {display:none;}
/*callouts */
div.callout {
  height: 60px;
  width: 200px;
}


div.callout {
  right:-256px;
  top:-56px;
  background-color: #444;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: absolute;
  color: #ccc;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 0px 0px 20px #999;
  margin: 25px;
  min-height: 50px;
  border: 1px solid #333;
  text-shadow: 0 0 1px #000;
  z-index: 1;
}

.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}

.callout.top::before {
  left: 45%;
  bottom: -20px;
  border-top: 10px solid #444;
}

.callout.bottom::before {
  left: 45%;
  top: -20px;
  border-bottom: 10px solid #444;
}

.callout.left::before {
  right: -20px;
  top: 40%;
  border-left: 10px solid #444;
}

.callout.right::before {
  left: -20px;
  top: 40%;
  border-right: 10px solid #444;
}

.callout.top-left::before {
  left: 7px;
  bottom: -20px;
  border-top: 10px solid #444;
}

.callout.top-right::before {
  right: 7px;
  bottom: -20px;
  border-top: 10px solid #444;
}


/* only if an admin... maybe move into a separate css file?*/
#imageSearchResults ul li {list-style-type: none; float:left;}
#imageSearchResults ul li figure {height:120px;}
#imageSearchResults ul li figure img {height:100px;}

.favproduct {height:150px; width:150px; margin:15px; float:left;border:1px solid #c23909; position:relative; border-radius:10px;}
.favproduct:hover {border:1px solid #067c66;}
.favproduct img {border-radius:10px;}
.favproduct h2 {position:absolute; top:0px; left:0px; background:#c23909; opacity:0.9; width:100%; color:#fff; text-align:center; padding-top:5px; border-top-right-radius:10px;font-size: 1.1em;margin:0px; border-top-left-radius:10px;}
.favproduct:hover h2 {background:#067c66;}

.favproduct p {position:absolute; bottom:0px; right:0px; width:133px; opacity:0.0; background:#fff; border-bottom-right-radius:12px; border-bottom-left-radius:12px; line-height:1.1em; padding:9px; font-size:0.8em; color:#000; text-align:center;}
.favproduct:hover p {opacity:0.7; }


div.headedbox p {font-weight:normal;}

.adminOnly {opacity:0;}
.adminOnly:hover {opacity:1}
#adminMenu {font-size:0.85em; list-style-type:none; padding-left:0px; }
#adminMenu li {padding-left:0px; background-color:white; color:#8c2; border:2px solid #8c2; padding:3px; margin:1px; cursor: pointer;}
#adminMenu li:hover {padding-left:0px; background-color:#8c2; color:white; border:2px solid #8c2; padding:3px; margin:1px;}

a div.productBox {font-weight:normal;}
.productBox {width:200px; height:200px; position:relative; float:left;margin:20px}
.productBox img{width:200px; height:200px; position:absolute; top:0px; left:0px;}
.productBox h3 {position: absolute; top: 0px; left: 0px; background: #c23909; color: #f1edea; opacity: 0.9; width: 100%;
    text-align: center; padding-top: 5px; border-radius: 4px;  z-index: 96;font-size:0.85em;}
.productBoxDescription {position:absolute; bottom:0px; left:0px; width:200px; background-color: #067c66; text-align:center; font-size:0.85em; line-height:1.3em; opacity:0; color: white;}
.productBox:hover .productBoxDescription {opacity:0.9; width:200px; transition:opacity 0.6s;}
.productBox:hover h3 {opacity:0; transition:opacity 0.3s;}
.productBox:hover div.productBoxPrice {display:none;}

.productBoxPrice {position:absolute; bottom:5px; right:5px;  border-radius:4px; border: 1px solid #666; background: white; color: #666; padding:4px; z-index:97;}

#indexInfoLinks {float:right; padding:20px; border-radius:15px;}

div.productLinkList:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}

.deleteRow, .deleteOption {float:right; background-color:red; color:white; padding:4px; border-radius:4px;}
.deleteAppliance {background-color:red; color:white; padding:4px; border-radius:4px;margin-right:15px;}
#optionList li, #moreList li {list-style-type: none; height:63px;}
#optionList li input, #moreList li input {padding:4px; margin:4px; border-radius:4px; border:1px solid #999;}
#optionList, #moreList {margin-left:0px; padding-left:0px;}

#calculatorList tr td input {padding:4px; margin:4px; border-radius:4px; border:1px solid #999;}

#calculator {background-color: #eea; border-radius: 8px; padding: 20px;}

#addToCart {margin-top:-75px;margin-bottom:10px;} /*{position:absolute;top:5px;right:5px;width:100px;}*/
main #rightbits .spacer {height:80px;}

#addToCart:hover, #options:hover, #options:focus, #quantityspan input:hover, #quantityspan input:focus {cursor:pointer;      transform: scale(1.03, 1.03);;
}

@keyframes pulse {
    from {
      transform: scale(1.0, 1.0);
    }
    to {
      transform: scale(1.02, 1.02);
    }
}

#addToCart:hover {
    animation-name: pulse;
    animation-duration: 0.5s;
    animation-iteration-count: 300;
}


div[modal=login] input, div[modal=OTPmodal] input {font-size:1.15em; border: 1px solid #888; border-radius:4px; margin:10px; padding: 5px;}
div#easy-pv-connect input {font-size:1.15em; border: 1px solid #888; border-radius:4px; margin:10px; padding: 5px;}
div[modal=partners] input {font-size:1.15em; border: 1px solid #888; border-radius:4px; margin:10px; padding: 5px;}

.prodThumb img {width:50px;}
.prodThumb {width:50px;}


div.user-info {background: #f90 url("/icon/usericon.svg") top left no-repeat; background-size: 57px; padding-left:55px;margin-top:0px;height:55px;color:white; padding-right:10px; padding-top:2px; padding-bottom:2px; font-size:13px; line-height:18px;}
div.user-info p {padding:0px; margin:0px; font-weight:bold;}

div.user-info p.user-status {font-weight:normal;}
#menu {min-height:300px; border: 0px solid #393D40; padding:10px;}


#menu dl {color: #393D40;}

#menu dd a {
    margin: 2px;
    list-style: none;
    text-decoration: none;
    color: #fff;}

#pageHeader {color: #393D40}


ul#products div.descriptionContainer {border: 3px solid #636363;}

ul#products h3.prodTitle {
  background-color: #636363;
  border-bottom: 3px solid #636363;
}
ul#products .prodImg {
    border: 3px solid #636363;
}
ul#products li[group] h2 {
    color:#f1edea;
}
ul#products h2 {
    border: 3px solid #636363;
  }

  ul#products img.tellmemore {
    background-color: #636363;
}

ul#products li[group] div.hoverList li a {
    color: #636363;
}


ul#products li[group] div.hoverList li.activeitem a {
    background-color: #636363;
}

div.hoverList p.greenFont {
    color: #636363;
}

div.tellmemore {float:right; width:100px; height:50px; text-align:center; padding-top:50px; background-color: rgb(128, 204, 41); border-radius: 50px;margin-top:-20px; margin-right:-15px; color:#003c56; font-weight:bold;}

.stock-check {font-size:0.8em; color:#777}
.stockLocations {color:#7980b9}
.stock-wrapper .availability {font-weight: bold; color:#339401}
.out-of-stock.availability {color:#c30000;}
.out-of-stock.availability.expected-in-stock {color:#00738c;}
.stock-wrapper.discontinued {color:#c30000;}
span.outOfStock  {color:#c30000;}
.stock-wrapper .too-many-in-basket {color:#c30000;}
.stock-wrapper.bundle .availability-details {display: none;}
#cart .stock-wrapper .availability-details {display: none;}
.hiddenHeading, .revealedHeading{font-weight: bold; background-color: #ddd; padding: 0px 7px; border-radius: 5px; cursor: pointer;}

div.hoverList ul {
    border-top: 3px solid #636363;
}

.kitBuilderContainer {background-color:#6e898e; text-align:center; overflow-x:scroll; margin-bottom:60px;}
.kitBuilderContainer.done {
    margin-bottom: 60px;
    padding: 40px 0;
    overflow: hidden;
    font-size: 1.3em;
    color:#434343;
}
.kitBuilderContainer.done button {
    position: relative;
    top: -2px;
    margin-right: 2px;
}
.slide {width:100%;display:none}
.slide.active, .slide.last-active {display:block}
.slide img {width:100%}
#slideshow {width:100%;position: relative; padding-bottom:35%}
#slideshow a {color:#fff;}
#slideshow div {position:absolute; top:0; left:0; z-index:8; opacity:0;}
#slideshow div.active {z-index:10; opacity:1;}
#slideshow div.last-active {z-index:9;}
#slideshow div.active:hover div.slideshowinnerboxright {position:absolute; margin:10px; padding:15px; top:10px; left:380px; max-width:40%; background:#000; color:#fff; opacity:0.8;}
#slideshow div.active:hover div.slideshowinnerboxleft {position:absolute; margin:10px; padding:15px; top:10px; left:20px; max-width:40%; background:#000; color:#fff; opacity:0.8;}
#slideshow div.active:hover p {color:#fff;}


.payment-options {}
.payment-options div:not(.cardHolderAddress){display:inline-block; width:180px; margin:0px 5px}
.payment-options div.payment-comment {width:270px; text-align:left; font-size:0.8em; position: relative; top: 10px; left: 5px;}

#account-summary {font-size: 13px;}
#account-summary h2{border-bottom: 2px solid #bbb; margin-bottom:5px; margin-top:20px}
#account-summary .dayinfo {position:absolute; width:3%; bottom:0px;height:80px; background-color:#007E8C}
#account-summary .history-div {background-color:#bbb;position:relative; width:500px; height:100px; margin-bottom:30px;}
#account-summary table.order-table tr {height:30px;}
#account-summary table.order-table td:first-child {width:60px; text-align: left;}
#account-summary table.order-table td:nth-child(2) {width:120px; text-align: left;}
#account-summary table.order-table td:nth-child(3) {width:100px; text-align: left;}
#account-summary table.order-table td:nth-child(4) {width:90px; text-align: right;}
#account-summary table.order-table td:nth-child(5) {width:160px;text-align: center; padding-left:20px;}

#account-summary table.invoice-table tr {height:30px;}
#account-summary table.invoice-table td:first-child {width:140px; text-align: left;}
#account-summary table.invoice-table td:nth-child(2) {width:110px; text-align: left;}
#account-summary table.invoice-table td:nth-child(3) {width:100px; text-align: right;}
#account-summary table.invoice-table td:nth-child(4) {width:150px; text-align: center; padding-left:20px;}

#account-summary [orderstatus], #currentOrders [orderstatus] {padding:4px 10px; border-radius: 4px; font-size:12px; color:white;}
#account-summary [orderstatus=new], #currentOrders [orderstatus=new] {background-color:#E5A81B}
#account-summary [orderstatus=changed], #currentOrders [orderstatus=changed] {background-color:#E5A81B}
#account-summary [orderstatus=accepted], #currentOrders [orderstatus=accepted] {background-color:#007E8C}
#account-summary [orderstatus=go], #currentOrders [orderstatus=go] {background-color:#007E8C}
#account-summary [orderstatus=picking], #currentOrders [orderstatus=picking] {background-color:#007E8C}
#account-summary [orderstatus=processing], #currentOrders [orderstatus=processing] {background-color:#007E8C}
#account-summary [orderstatus=picked], #currentOrders [orderstatus=picked] {background-color:#007E8C}
#account-summary [orderstatus=packed], #currentOrders [orderstatus=packed] {background-color:#007E8C}
#account-summary [orderstatus='hold'], #currentOrders [orderstatus='hold'] {background-color:#E55820}
#account-summary [orderstatus='waiting'], #currentOrders [orderstatus='waiting']  {background-color:#E55820}
#account-summary [orderstatus=unpaid], #currentOrders [orderstatus=unpaid] {background-color:#c23909}
#account-summary [orderstatus=despatched], #currentOrders [orderstatus=despatched] {background-color:#72165F}

#account-summary [invoicestatus] {padding:4px 10px; border-radius: 4px; font-size:12px; color:white;}
#account-summary [invoicestatus=ok] {background-color:#007E8C}
#account-summary [invoicestatus=paid] {background-color:#169454}
#account-summary [invoicestatus=overdue] {background-color:#E55820}

#account-summary div.account-status div.overdue {background-color:#c23909; color:white; padding:20px;}

#account-summary tr.first-line {font-weight:bold;}

/*The following CSS is to make the site mobile friendly. Anything particulary inscrutable is probably to make the menus work*/
.mobile{display: none;}
.mobile.desktop.m1{display:block;}

.mobile-button{
  float:right;
  width:57px;
  height:57px;
  margin: 7px 0px 0px 10px;
}

#mobile-contact-button{
  background: url("/icon/phone-white.svg") 10px 8px no-repeat;
  background-size: 68%;
}

#mobile-account-button{
  background: url("/icon/usericon.svg") 2px 3px no-repeat;
  background-size: 75%;
}
#mobile-trolley-button{
  background: url("/icon/cart-icon.svg") center no-repeat;
  background-size: 66%;
}
#mobile-search-button{
  background: url("/icon/search-white.svg") center no-repeat;
  background-size: 90%;
}
#mobile-vat-switch-button{
  border-radius: 47px;
  background: #77E59D
  url(/icon/vat-switch-black.svg) center no-repeat;
  background-size: 30px;
  width: 32px;
  height: 32px;
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 13px;

}
#mobile-menu-button{
  float:left;
  background: url("/icon/menu-icon.svg") center no-repeat;
  background-size: 100%;
}
#close-menu-button {
  display:none;
  position:absolute;
  right:10px;
  width:28px;
  height:28px;
  background: #393d40 url("/icon/close-menu-button.svg") center no-repeat;
  background-size: 60%;
  border-radius: 50%;
  top:80px;
  z-index: 5000;
}

#kitBuilderContainer #kitBuilder {
  width: 100% !important;
}

span.product-message {
  font-size: 0.7em;
}

/*Category page*/
div#products {width:100%;}
div#products div[group]{display:inline-block;width:100%;}
div#products ul {padding-left:0px;width:100%;}
div#products ul li {list-style-type: none;display:inline-block;padding-bottom:10px;width:100%}
div#products div[group] img {
  width:50px;
  margin-right:5px;
  height: auto;
  display: block;
  float:left;
}
div.tellmemoreMobile {float:right; width:60px; height:60px; line-height:15px; text-align:center; background-color: #ee7500; border-radius: 50%;color:#fff; font-weight:bold;font-size:0.7em;}
div#products h2{margin-bottom:5px}
div#products div.product-title-wrapper {
  display:block;
  width:calc(100% - 120px);
  float:left;
}
div#products div.comment-wrapper {
    display: block;
    position: static;

}
div#products div.comment-wrapper .comment {
  float:left;
  display: inline-block;
  background-color: #c23909;
  padding: 2px 6px;
  color: #fff;
  font-variant: small-caps;
}

#easy-pv-connect{
  text-align:center;
}
#easy-pv-connect .hidden {
  display: none;
}
#easy-pv-connect .greenbtn {
  font-size:1.15em; border: 1px solid #888; border-radius:4px; margin:10px auto; padding: 5px;
  width:350px;
}
#easy-pv-connect #connectDiff {
  cursor: pointer;
}

#addBundleToCart {
  width:150px;
  height:150px;
  line-height: 150px;
  background-color: rgb(238, 117, 0);
  border-radius: 50%;
  margin:15px;
  font-size: 1.3em;
  cursor: pointer;
  margin-top: -75px;
  margin-left: 17px;
  text-align: center;
}

.cursor {cursor:pointer}

.product-properties-table{
  display:grid;
  /* grid-template-columns:1fr 1fr;*/
  grid-template-columns:repeat(2, 1fr);
  grid-gap:1em;
  /* grid-auto-rows:100px; */
  grid-auto-rows: minmax(100px, auto);
}

.product-properties-table .nested{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-gap:1em,1em;
  border:0px,0px,2px,0px;
}
.product-properties-table .nestedhead {
  font-weight: bold;
}

.product-properties-table .nested1{
  display:grid;
  grid-template-columns:repeat(1);
  grid-gap:0em,1em;
}
.product-properties-table > div{
  background:#E0F2F7; /* #eee; */
  padding:1em;
}
/* .product-properties-table > div:nth-child(odd){
  background:#ddd;
} */

.product-properties-table .nested > div{
  padding:0em,1em;
}
.product-properties-table .nestedhead > div{
  font-weight: bold;
}
.product-properties-table .nested1 > div{
  padding:0em,1em;
}

#vat-switch-container{
  display:none;
}

body.vat-switch-visible #vat-switch-container{
  position: fixed;
  top: 70px;
  left: 0px;
  background-color: #003c56;
  width: 100%;
  display:block;
}

body.vat-switch-visible #vat-switch-container.sticky {
  top: 0px !important;
}

@media all and (max-width: 1100px) { /*All mobile levels*/
  #s{width:250px !important;}
}

@media all and (max-width: 976px) { /*All mobile levels*/
  .no-mobile {
    display: none !important;
  }

  .mobile.m0{display:block;}

  .mobile.desktop.m1{display:none;}

  #logo-text {margin-top:24px!important;}

  .mobile-area{
    width: 100% !important;
    min-width: 0px !important;
    max-width: 100% !important;
    position: static !important;
    box-shadow: none !important;
    z-index: 0 !important;
    display: none;
  }

  div[modal] {
    width:100% !important;
    min-width:0px !important;
    box-sizing: border-box;
  }

  .mobile-area.mobile-area-visible{
    display:block !important;
  }

  #menu dd {font-size:1.4em;}

  main>div[modal="cart"] ~ .modalCover {display: none !important;}
  input[orderfield="reference"]{margin-right:0px !important;}
  p.clear-cart {right:20px !important;}
  #cart div.addressArea input,textarea {width:100%;}
  #cart div.addressArea .addressTable {margin:0;}
  #cart div.addressArea table {width: 100%;}
  #cart .paybtn, .backToCart {margin-right:auto;margin-left: auto;float:none;}

  #dotmenu a.please-login {display:none;}

  div#popMenu.mobile-area.mobile-area-visible{
    display:block;
  }

  div#popMenu .user-status {
    font-weight: bold;
    padding-bottom: 8px;
    font-size: 1.1em;
  }

  #dotmenu{
    border: none;
    margin: 0px;
  }

  #dotmenu .user-info{
    display: none;
  }

  #mobile-account-button {
    margin-right: 10px;
  }

  #close-menu-button.visible {
    display:block;
  }

  /*Product pages*/
  main div#pageContents {padding-bottom:33px;}
  main div#pageContents>img {width:100%;max-width:300px;height:auto !important;box-sizing:border-box;clear:both;float:none !important;margin-left: auto !important; margin-right: auto !important;}
  main div#mainContent.product {padding-top:0;display:inline-block;}
  main #grouptitle {display:none;}
  main #subtitleouter {position:static;margin-top:10px;}
  main #subtitleouter #subtitleinner {margin:25px 0px; background-color: transparent; border:0px;}
  main #subtitleouter #subtitleinner h2 {color: #003c56}
  main #leftbits {margin: 0; background-color: white;width:100%;display:inline-block;height:calc(100vw - 40px);max-height:300px;float:none;}
  main #leftbits #itempics {background-color: white;display:inline-block;}
  main #leftbits #itempics img {border: none;width:100%;height:auto;max-width:300px;left:50%;transform: translateX(-50%);}
  main #rightbits {width:100%;margin:0;padding:0;position:relative;}
  main #rightbits #buyarea {margin-right:0;width:100%;text-align:left;display:inline-block;min-height:110px;padding: 5px;box-sizing:border-box;}
  main #rightbits #buyarea #quantityspan{color: #fff; margin-bottom: 10px;display:inline-block;position:absolute; right:53px;}
  main #rightbits #buyarea h2 {margin:0;}
  #addToCart {margin-top:-150px;position: relative;float:right;} /*{position:absolute;top:5px;right:5px;width:100px;}*/
  main #rightbits .spacer {height:70px;}
  div#moreinfo {margin-top:30px;}

  div.prodCode{
    width:50px;
    overflow-wrap: break-word;
    padding-right:7px;
  }

}

@media all and (max-width: 976px) and (min-width: 796px){/*level 1*/
  .mobile.m1{
    display: block;
  }

  .mobile.desktop.m1{display:block;}

  .no-mobile-1 {
    display: none !important;
  }

  div[modal="cart"]>div#cart>p {top:100px !important;}

  #subtitleouter {
    top:80px;
  }

  main #rightbits #buyarea #quantityspan {left:0;right:auto;}
}

@media all and (max-width: 795px) {/*level 2*/       /* and (min-width: 402px)*/
  .no-mobile-2 {
    display: none !important;
  }
  .mobile.m2{
    display: block;
  }

  #mobile-vat-switch-button{
    margin-top: 12px;
    margin-left: 13px;
  }

  header {
    height: 55px !important;
  }

  body.search-visible header {height:95px !important}

  body.vat-switch-visible #vat-switch-container{
    top: 55px;
  }

  header #logo {
    height:40px;
    /* width: 200px; */
    background-size: contain;
    background-repeat: no-repeat;
  }
  header #logo-text {margin-top:13px!important;}

  #s{
    margin-top: 10px;
    margin-right:5px;
    display:none;
    float: unset;
    width: 100%;
    max-width: unset;
  }
  body.search-visible #search-container {
      position: fixed;
      top: 50px;
      left: 0px;
      background-color: #003c56;
      width: 100%;
  }
  body.search-visible #search-container.sticky {
    top: 0px;
  }

  body.search-visible #s {
    display:block;
    width: calc(100% - 72px);
  }

  body.search-visible .mobile-close-search {
    display:block;
  }

  .mobile-button {
    margin-top: 4px;
    width: 47px;
    height: 47px;
    margin-left: 0px;
  }

  #mobile-menu-button {
    margin-right: 7px;
  }
  #close-menu-button{top:65px;}

  div[modal="cart"]>div#cart>p {top:85px !important;}

  main #rightbits #buyarea #quantityspan {left:10px;right:auto;}
}

@media all and (max-width: 414px) {/*level 3 - only affects menu size*/
  .no-mobile-3 {
    display: none !important;
  }
  .mobile.m3{
    display: block;
  }
  body.search-visible #s {
    display:block;
    width: calc(100% - 72px);
  }

  body.vat-switch-visible #vat-switch-container{
    top: 50px;
  }

  body.search-visible #search-container {
      position: fixed;
      top: 50px;
      left: 0px;
      background-color: #003c56;
      width: 100%;
  }
  body.search-visible #search-container.sticky {
    top: 0px;
  }

  header #logo-text {
    margin-top: 15px!important;
    font-size: 16px;
  }

  #mobile-vat-switch-button{
    margin-top: 9px;
    margin-left: 3px;
    margin-right: 3px;
  }

  header {
    height: 50px !important;
  }
  body.search-visible header {height:95px !important}

  header #logo {
    height: 40px;
    /* width: 130px; */
    background-size: contain;
    background-repeat: no-repeat;
  }
  header #logo-text {margin-top:13px;}

  #s{
    margin-top:7px;
    margin-right: 3px;
    display:none;
    float: unset;
    width: 100%;
    max-width: unset;
  }
  body.search-visible #s {
    display:block;
    width: calc(100% - 72px);
  }

  body.search-visible .mobile-close-search {
    display:block;
  }

  .mobile-button {
    margin-top: 4px;
    width: 42px;
    height: 42px;
    margin-left: 0px;
  }

  #close-menu-button{top:55px;}
  #mobile-menu-button {
    margin-right: 0px;
  }

  div#cart p.clear-cart {top:80px !important;}
}

@media all and (max-width: 520px) {/*An extra mobile level specifically for the search results*/
  .searchResultsGenerated div.item-wrapper {flex-direction: column;}
  .searchResultsGenerated div.item-wrapper#titles{display:none;}
  .searchResultsGenerated .wrapper-2 {margin-top: 3px;margin-bottom: 10px;align-items: center;align-content: center;justify-content: flex-end;}
  .searchResultsGenerated .wrapper-2>div.price {display: none;}
}

@media all and (max-width: 646px) {/*An extra mobile level specifically for the cart*/
  div.cartTable div.item-wrapper {flex-direction: column;}
  div.cartTable div.item-wrapper#titles{display:none;}
  div.cartTable .wrapper-2 {margin-top: 3px;margin-bottom: 10px;align-items: center;align-content: center;justify-content: flex-end;}
  div.cartTable .wrapper-2>div.price {display: none;}
  div#total-flex .wrapper-total {align-content: flex-start;margin-bottom:3px;}
  div#total-flex .wrapper-total .left {flex-grow:0;text-align:right;margin-right:3px;}
  div#total-flex .wrapper-total .right {width:100px;text-align:left;margin-left:3px;}
  div#total-flex .wrapper-total .deliveryOptions b {display:none;}
  div#total-flex .wrapper-total .deliveryOptions .admin-delivery {display:none;}
  div#cart-end-buttons {width:100%;display:flex;align-items:center;flex-direction:row;justify-content: space-around;}
  div#cart-end-buttons div{margin-left:0;margin-right:0;}
  .cart div.image {display: none;}
}

@media all and (max-width: 650px){
  div#cart-end-buttons div{height:54px;display:flex;justify-content: space-around;align-items: center;padding-left:10px !important;padding-right:10px !important;}
  div#cart-end-buttons div.placeOrder {width:120px;}
}

.addressIcon {background-color:#007E8C;}
.emailIcon {background-color:#19A897;}
.phoneIcon {background-color:#77E59D;}
.linkedInIcon {background-color:#2867B2;}
.facebookIcon {background-color:#E5A81B;}
.twitterIcon {background-color:#E55820;}
.instagramIcon {background-color:#D62976;}

.download img {height:17px;}
.download {
  text-align: center;
  font-size: 1.2em;
  cursor: pointer;
  margin-top: 10px;
  display: inline-block;
}

input.invalid, textarea.invalid, select.invalid{border: 1px solid red; }

div.showHideSectionContainer.hide div.hiddenSection {display: none;}
div.showHideSectionContainer.hide div.toggleShowHide span.revealedHeading {display: none;}
div.showHideSectionContainer:not(.hide) div.toggleShowHide span.hiddenHeading {display: none;}
span.showHideSectionContainer.hide span.hiddenSection {display: none;}
span.showHideSectionContainer.hide span.toggleShowHide .revealedHeading {display: none;}
span.showHideSectionContainer:not(.hide) span.toggleShowHide .hiddenHeading {display: none;}
span.bundleComponentTitle {font-weight: bold;}

.bundleComponentsDropdown div.hiddenSection {background-color: #e6e6e6;
    border-left: 10px solid #00738c; margin-left: 10px; margin: 5px; padding: 2px;}

div.bundleComponentHeading {font-weight: bold; padding-left: 5px;}
div.bundleComponentDetails {padding: 5px;}

.reservations-details.allocationAfterDespatch {font-weight: bold; color:#c30000}
.reservations-details.despatchAfterAllocationArrival {font-weight: bold; color:#00738c}
.reservations-details.good {font-weight: bold; color:#339401}

div.dateSelector {text-align: right;}
.availabilitySymbol svg {width:12px; height:12px; padding-right: 5px;}
.stock-wrapper.dropship  .lead-time {color:#846149;}

.visibilityWarning {color:#c30000; font-size: 0.8em;}
.visibilityWarning.floatleft {float:left;}
.hiddenFromCustomers a {color:#c30000;}
.item-wrapper.hiddenFromCustomers {background-color: #f7dbdb;}

#inc-ex-vat-switch-container {margin-left: 10px; font-size: 1rem; height: 32px; line-height: 32px; padding-top: 26px; float: right;}
#inc-ex-vat-switch-container span.vatLabel {display: inline-block;
  vertical-align: middle;
  line-height: normal;
  height: 46px;
} 
#inc-ex-vat-switch-container .switch {height: 32px; width: 48px;}
#inc-ex-vat-switch-container .switch .slider:before {height:24px; width:24px; left: 4px; bottom: 4px;}
#inc-ex-vat-switch-container input:checked + .slider:before {transform: translateX(16px);}

#vat-switch-container #inc-ex-vat-switch-container{
  width: 154px;
  height: auto;
  margin: 0 auto;
  position: relative;
  float:none;
}

.heat-link-container {
  display: flex; padding: 1rem; align-items: center; gap: 0.5rem; border: 2px solid #003C56; margin: 20px 0;
}

.heat-link-container div {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; flex: 1 0 0;
}

.heat-link-container div h6 {
  color: #003C56; font-size: 1rem; font-style: normal; font-weight: 700; line-height: 120%; margin: 0;
} 

.heat-link-container div p {
  color: #151515; font-size: 1rem; font-style: normal;  font-weight: 400;  line-height: 120%;  margin: 0;
}

.heat-link-container a {
  all: unset;
}

.heat-link-container a button {
  all: unset; display: flex; height: 2.5rem;padding: 0rem 1rem; justify-content: center; align-items: center; gap: 0.25rem; color: #1A1A1A; border-radius: 1.25rem; background: #95C11F;    text-align: center; cursor: pointer; font-size: 1rem; font-style: normal; font-weight: 600; line-height: 120%;
}

.login-banner-container{
  z-index: 1;
}

.login-banner{
  display: flex;
  height: 48px;
  padding: 3px 12px;
  justify-content: space-between;
  align-items: center;
  background: #DCDD04;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

@media all and (max-width: 432px){
  .login-banner{
    height: 80px;
  }
}

.login-banner-text{
  color: #111;
  font-family: Nunito;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.login-banner-close{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

#menu .line {
  border-top: 1px solid #636363;
}