/* Specific styles and style overrides for Offgrid */

/* the palette - try to use these colours:
#3D291F- dark brown - main font colour (#643 has been replaced with this)
#fedb4f - brighter orange - navbar and borders - replace with var(--yellow)
#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
*/


/* Nunito font definition */
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local('Nunito Light Italic'), local('Nunito-LightItalic'), url(https://fonts.gstatic.com/s/nunito/v14/XRXQ3I6Li01BKofIMN4oZNvEUT8_DQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local('Nunito Light Italic'), local('Nunito-LightItalic'), url(https://fonts.gstatic.com/s/nunito/v14/XRXQ3I6Li01BKofIMN4oZNvKUT8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v14/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v14/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Nunito SemiBold'), local('Nunito-SemiBold'), url(https://fonts.gstatic.com/s/nunito/v14/XRXW3I6Li01BKofA6sKUb-vISTs.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Nunito SemiBold'), local('Nunito-SemiBold'), url(https://fonts.gstatic.com/s/nunito/v14/XRXW3I6Li01BKofA6sKUYevI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Nunito Bold'), local('Nunito-Bold'), url(https://fonts.gstatic.com/s/nunito/v14/XRXW3I6Li01BKofAjsOUb-vISTs.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Nunito Bold'), local('Nunito-Bold'), url(https://fonts.gstatic.com/s/nunito/v14/XRXW3I6Li01BKofAjsOUYevI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* End of Nunito font definition */

body.offgrid {
  --yellow: #EFC51E;
  --light-yellow: #FED946;
  --light-grey: #dcdcdc;
  --ultra-light-grey: #F0F0F0;
  --dark-grey: #242424;
  --midsummer-blue: #003C56;
}
body.offgrid header { 
  display: flex;
  align-items: center;
  box-shadow: none;
  background-color: var(--yellow);
  height: 85px;
  z-index: 99;
  position: relative;
  color: var(--dark-grey);
  padding: 0 2rem;
}
body.offgrid #logo {float:none;display:inline-block;width:245px;height:44px;margin-top: 25px;margin-left: 0;background: url('/graphics/offgrid-icon-new.png'); background-size: contain; background-repeat: no-repeat;}
body.offgrid #mobile-menu-button {
  order: 1;
}
body.offgrid #logo {
  order: 2;
  margin-top: 0;
}
body.offgrid #mobile-search-button, body.offgrid #search-container {
  order: 3;
  margin-left: auto;
  margin-right:10px;
}
body.offgrid #inc-ex-vat-switch-container {
  order: 4;
  padding-top: 0px; 
  float: inherit;
}

body.offgrid #mobile-trolley-button, body.offgrid #contact {
  order: 5;
}
body.offgrid #dotmenu { 
  order: 6;
  float: none; 
  margin-left: 2rem; 
  margin-right: 0;
  border: 0px; 
  height: 40px;
  width: 40px;
  background: url('/graphics/svg/manage_accounts.svg');
  background-size: 40px;/* padding: 3px; *//* margin-top: 9px; */
}
body.offgrid #s {
  max-width: initial;
  margin: 0;
}
body.offgrid #contact {
  margin: 0;
  margin-left: 2rem;
  padding: 0;
}

footer {background-color: var(--yellow);text-align:center; background: var(--yellow) url("/graphics/footer.png") bottom center no-repeat; background-size:contain; padding-bottom:50px; padding-left:30px; padding-right:30px; display:flex; flex-wrap:wrap;font-variant:small-caps;}


footer .help {flex: 1 1 400px;text-align:left;margin-left:20px;}
footer .address {flex: 1 1 200px;text-align:right;}

body {color:#3D291F; background-color:var(--light-grey); font-family: 'Nunito', 'maven', Trebuchet MS, Verdana, Tahoma,arial,helvetica,sans-serif;}

/* #main {margin-top:80px;} */

#right {background-color:#fff; color: #23614C;}
#right #trolleyLink {
  color: var(--dark-grey);
  background: url(/icon/cart-dark-grey.svg) 10px 10px no-repeat;
  background-size: 80px;
}
#right #trolleyLink:hover {
  background-color: var(--ultra-light-grey);
}

.please-login {display: none !important;}


/* #trolleyLink {width:100px; height:40px; background: url('/graphics/cart-icon.svg') 10px 10px no-repeat; padding: 5px 5px 5px 60px;background-color:#7ab800; color:white; transition: width 0.3s, height 0.3s, background 0.4s; cursor:pointer} */
#trolleyLink.wobble {width:100px; height: 40px; background: red url('/graphics/cart-icon.svg') 10px 10px  no-repeat; transform: rotate(360deg);
transition: width 0.3s, height 0.3s, transform 0.4s;}

.aliasInput {background-color:#f90;}

#contact {float:none;height:40px;border-left:0px dotted #ffb;padding-left:10px;padding-top: 9px;margin-left:10px; margin-top: 16px; color:var(--dark-grey);padding-right:15px;text-align:right; font-size: 16px;}

div#popMenu {top:27px; right:-1px; border:2px solid #ddd; border-radius: 6px; background-color:#eee; z-index:5000; width:500px;box-shadow: 7px 10px 10px -4px rgba(102,102,102,0.49);font-variant: small-caps;}
#popMenu .logout {cursor: pointer}
body.offgrid .mobile-button {height: 40px; margin: 0; float: none;}

#mobile-trolley-button {background: url(/graphics/svg/cart-dark-grey.svg) center no-repeat; background-size:40px;}
#mobile-menu-button {background: url(/graphics/svg/menu-lines-dark-grey.svg) center no-repeat;}
#mobile-search-button {background: url(/graphics/svg/search-dark-grey.svg) center no-repeat; background-size:40px;}

div#privacy-download {
  width: auto;
}
#calculatorList tr {
  display: flex;
}
/* new login modal */
div[modal="login"] {
  padding: 2rem;
  max-width: 360px;
}
div[modal="login"] .logo {
  width: 100%;
  max-width: 227px;
}
#loginForm label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #656565;
}
#loginForm input {
  font-family: 'Nunito', 'maven', Trebuchet MS, Verdana, Tahoma,arial,helvetica,sans-serif;
  margin: 0;
  align-self: stretch;
}
#loginForm label input:not(:last-child) {
  margin-bottom: 0.75rem;
}
#loginForm label span {
  font-size: .75rem;
  font-weight: 700;
}
#loginSubmit {
  width: 100%;
  background-color: var(--yellow);
  color: #000;
  font-size: 1rem;
  font-weight: 700;
}
#resetPasswordLink {
  font-size: .75rem;
  font-weight: 700;
  margin-bottom: .75rem;
}
#pageContents .welcome-image {
  display: none;
}
@media (max-width: 976px) {
  body.offgrid div#popMenu.mobile-area {width:250px !important; max-width: 250px !important;position:absolute!important;}
  body.offgrid #dotmenu {
    margin-left: 0;
  }
  body.offgrid #pageContents > img {
    max-width: 100%;
  }
}
@media (max-width: 795px) {
  body.offgrid header {
    padding: 0 1rem;
  }
  body.offgrid #mobile-menu-button {
    float: none;
  }
  
  body.offgrid.search-visible header {
    height: 55px !important;
    position: relative;
  }
  body.offgrid.search-visible #search-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 62px;
  }
  body.offgrid.search-visible #search-container:not(.sticky) {
    position: absolute;
    top: auto;
    bottom: 0;
    transform: translateY(100%);
  }
  body.offgrid .mobile-close-search {
    margin: 0;
    order: 2;
    float: none;
  }
  body.offgrid #searchResults {
    margin-top: 62px;
  }
}
@media (max-width: 411px) {
  body.offgrid #logo {
    max-width: 165px;
    background-position: center;
  }
  body.offgrid .mobile-button {
    width: 24px;
    height: 24px;
  }
  #mobile-menu-button {
    margin-right: 7px;
  }
  #mobile-trolley-button, #mobile-search-button, #mobile-menu-button, body.offgrid #dotmenu {
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
  }
  #pageContents .your-account-section {
    flex-direction: column !important;
    font-size: 12px !important;
    padding: 11px !important;
    border-radius: 3px;
    line-height: 1.5;
  }
  #pageContents .your-account-section a {
    display: grid;
    place-items: center;
    padding: .5rem 0 !important;
    width: 100%;
    margin: 0 !important;
  }
}

#s {
    margin-top:10px;
    margin-right:5px;
    margin-left:5px;
    width: 300px;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 15px;
    background-color:#fff;
    background-size: 20px 20px;
    background-image: url('../graphics/searchicon-dark-grey.png');
    background-position: 12px 7px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#s:focus {
    width: 300px;
}


/*styling for shop menu*/
#menu dt {padding-top:0px;}
#menu dd:hover div.hovermenu {
  display:block; 
  color:var(--dark-grey); 
  background-color: var(--light-grey);
  border: none;
  border-radius: 2px;
  padding: 6px 8px;
}
#menu dd:hover div.hovermenu img {border:1px solid #063;}

#pageContents{color: #3D291F;}
.pageContent{color: #3D291F;}
#product-menu-wrapper {padding: 2rem;flex: 1 1 200px; background-color:var(--ultra-light-grey);}
#menu {
  padding: 0;
}
#menu dl {
  background-color:transparent;
  color: #000;
  margin: 0;
}
#menu dl dt {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
#menu dl dt:not(:first-child) {
  margin-top: 1rem;
}
#menu dd:not(:first-child) {
  margin-top: .25rem;
}
#menu dd a{
  background: transparent;
  color: inherit;
  font-size: 1rem;
  padding: 0;
  padding-left: .5rem;
  margin: 0;
}
#menu dd a:hover {
  background-color: var(--yellow); 
}
/* category page */

ul#products .prodImg {position:absolute; left:100px; top:0px; border:3px solid var(--light-grey); width:100px; }
ul#products h2 {position:absolute; left:100px; top:-27px; font-size:16px; font-weight:normal; border:3px solid var(--light-grey); display:block; width:100px; height:20px;margin:0px; padding:2px 0px; text-align:center;}
ul#products h3.prodTitle {background-color:transparent; color:#000; margin:0px 60px 0px 0px;border-bottom: 3px solid var(--light-grey);padding-left:5px;font-size:14px;font-weight:700;font-variant:normal;}
ul#products div.comment {background-color: var(--yellow); color: #000;}

ul#products li[group] h2 { color: #000; font-weight: 700; font-size: 18px; }
ul#products img.tellmemore {background-color: #7ab800;}
ul#products div.descriptionContainer {border:3px solid var(--light-grey);}
body.offgrid div.tellmemore {
  background-color: var(--dark-grey);
}
body.offgrid div.tellmemore, body.offgrid #products h3.price {
  color: var(--yellow);
}

div.hoverList p {color:#7ab800;}
div.hoverList ul {border-top: 3px solid var(--light-grey)}

div.hoverList p {color:#f20;}
div.hoverList p.greenFont {color:#000; transition: color 2s ease-in; text-transform: capitalize;}

ul#products li[group] div.hoverList li a {color:#000;background-color:#fff;}
ul#products li[group] div.hoverList li.activeitem a {color:#000; background-color: var(--yellow);}

/*product pages */

#leftbits {background-color: transparent;}

#hoverthumbs {position:absolute; top:27px; left:355px; width:70px; display:none; }
#hoverthumbs img {width:60px; height:60px; border:3px solid var(--light-grey);}

div#itempics:hover {width:420px; height:350px; background-color:white;border:10px solid var(--yellow);}
body.offgrid #itempics .mainimg {border:3px solid var(--light-grey);}
#itempics:hover .mainimg {border:20px solid var(--light-grey);}
body.offgrid #grouptitle {border:3px solid var(--light-grey); color: #000; top:-40px; height:32px; font-weight: 700;}

body.offgrid #subtitleinner {background-color:var(--light-grey);border:3px solid var(--light-grey);}
body.offgrid main #subtitleouter #subtitleinner h2 {
  color: #000;
  font-variant: normal;
  font-weight: 700;
}
body.offgrid #display_price b {
  color: #000;
}

#buyarea p.discount {
  color: #000;
}

#buyarea {background-color: #f1f1f1; width:180px; min-height:270px;text-align:center; color:#fff;padding-top:20px;}
#buyarea input {
  color: #000;
  background-color: white;
  outline: 1px solid black;
}
#moreinfo {
  border-color: var(--light-grey);
}
#moreinfo h2 {
  color: #000;
  background-color: var(--light-grey);
}

main #rightbits #buyarea #quantityspan {color: #000; margin-bottom: 10px;}
.modal h2 {color: #7ab800;}

table.cartTable tr[item] td {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
table.cartTable {border-spacing:10px; border-collapse: collapse}
/*table.cartTable tr td:nth-child(2) {width:50px;}*/
table.cartTable tr td:nth-child(3) {width:40px;}
/*table.cartTable tr td:nth-child(4) {width:50px;}*/
table.cartTable tr td:nth-child(5) {width:100px;text-align:right;}
table.cartTable tr td:nth-child(6) {width:100px;text-align:right;}

table.cartTable tr td:first-child img {vertical-align: middle; width:50px; height:50px; border: 1px solid #ddd; margin:6px;}

.greenbtn {background-color: #7ab800; border:1px solid #7ab800;}
.whitebtn {color: #7ab800; border:1px solid #7ab800;}
.whitebtn a {color: #7ab800;}

.intPaybtn {clear:left; float:right;}

.addressArea {height:430px;}

.favproduct {border:1px solid var(--yellow);}
.favproduct:hover {border:1px solid #063;}
.favproduct h2 {background:var(--yellow);}
.favproduct:hover h2 {background:#063;}

.productBox h3 {background: var(--yellow); color: #063;}
.productBoxDescription {background-color: #063;}

#indexInfoLinks {float:right; width:265px; margin-left: 10px;}
#indexInfoLinks .inner {background-color : #f90; padding:20px; border-radius:15px;}

#calculator {background-color: #ddd;}

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

/* These look like they belong to the admin site */
.newEmployeeModal label, .newFrequentCustomerModal label{display:inline-block; width:120px;padding-right: 5px; text-align: right;}
.newFrequentCustomerModal span{padding-left: 125px; padding-top: 0px; padding-bottom: 0px;}
.formInput {padding-top: 10px; text-align: left;}

footer {color:#3D291F;}
body.offgrid footer a:visited {color:#3D291F;}
body.offgrid footer a:link {color:#3D291F; font-weight:bold;}
body.offgrid footer #footer-contact li {color:#3D291F;}
body.offgrid #footer-end {background-color: var(--yellow); color:#3D291F;}

body.offgrid #footer-end a:visited {color:#3D291F;}
body.offgrid #footer-end a:link {color:#3D291F;}
body.offgrid footer .social-media-buttons {
  margin-top: 1rem;
}
body.offgrid footer .social-media-buttons a:not(:last-child) {
  margin-right: .8rem;
}

#footer-message-form {display: none !important;}

.addressIcon {background-color:#434a3c;}
.emailIcon {background-color:#23614C;}
.phoneIcon {background-color:#657d4d;}
/* .linkedInIcon {background-color:#bf8e73;} */
.facebookIcon {background-color:#705736;}
.twitterIcon {background-color:#E55820;}

body.offgrid #mobile-account-button {display: none !important;}

/* body.offgrid div.user-info{height:29px; width:17px; background: url('/graphics/dot-menu.png'); background-size: 15px 29px;} */
body.offgrid div.user-info {display: none !important;}

.covid-status {display: none !important;}




/* Hiding stock until it's ready to show */
/* body.offgrid .stock-check {display: none !important;} */
/* body.offgrid .product-message {display: none !important;} */
body.offgrid div.earlyBird {display: none !important;}
#inc-ex-vat-switch-container input:checked + .slider { background-color:black;}

.cart .product-suggestions ul li.wholesale{background-color:#19A897}
.item-wrapper.wholesale {background-color: #e2fffc;}
.item-wrapper.wholesale.hiddenFromCustomers {background-color: #f7dbf7;}


body.search-visible #search-container {background-color: var(--yellow)}
body.offgrid #vat-switch-container {background-color: var(--yellow)}
#mobile-vat-switch-button {
  background: black url(/icon/vat-switch-white.svg) center no-repeat;
  background-size: 30px;
  order:4;
  margin-top:3px;
  margin-left:3px;
  margin-right:3px;
}

#vat-switch-container #inc-ex-vat-switch-container {padding-top:16px;}