* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font-family: sans-serif,Helvetica,Arial;
  font-size: 13px;
  background: #fff;
}
.page-wrapper {
}

h1 {
}
h2 {
  margin-bottom: 10px;
}

h2.pagetitle {
  font-size: 1.3rem;
  font-weight: 400;
  padding-top: 8px;
  padding-bottom: 8px;
}

h2.pagetitle::after {
  content: "";
  clear: both;
  display: table;
}

h3 {
  padding-bottom: 8px;
}

h4 {
}
h4.account {
  margin-bottom: 20px;
  font-size: 1.2rem;
}

/************/

.top-box-right {
}

[class*="grid-"] {
  float: none;
  width:100%;
}

.grid-100 {
  padding: 15px 5px;
}

@media only screen and (min-width: 900px) {

 [class*="grid-"] {
   float: left;
   display: block;
   box-sizing: border-box;
 }
 .grid-5 {
   width:5%;
 }
 .grid-10 {
   width:10%;
 }
 .grid-18 {
   width:18%;
 }
 .grid-20 {
   width:20%;
 }
 .grid-25 {
   width:25%;
 }
 .grid-30 {
   width:30%;
 }
 .grid-31 {
   width:31%;
 }
 .grid-33 {
   width:33%;
 }
 .grid-40 {
   width:40%;
 }
 .grid-49 {
   width:49%;
 }
 .grid-50 {
   width:50%;
 }
 .grid-51 {
   width:51%;
 }
 .grid-60 {
   width:60%;
 }
 .grid-67 {
   width:67%;
 }
 .grid-70 {
   width:70%;
 }
 .grid-75 {
   width:75%;
 }
 .grid-80 {
   width:80%;
 }
 .grid-85 {
   width:85%;
 }
 .grid-90 {
   width:90%;
 }
 .grid-95 {
   width:95%;
 }
 .grid-100 {
   width:100%;
 }
 .grid-732px {
   width:732px;
 }

}

/************/

header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 6;
  border-bottom: 1px solid #eeeded;
  padding-right: 0px;
  padding-left: 0px;
}
header .top-line {
  background-color: #fff;
  padding-top: 0px;
  text-align: center;
}

.topicon--color-green {
  color: rgb(0, 185, 0);
}
.topicon {
  margin-top: -.3rem;
  fill: currentColor;
  display: inline-block;
/*  height: 16px;*/
  vertical-align: bottom;
/*  width: 16px;*/
  font-size: 16px;
  font-weight: 800;
}

.border-bottom {
  border-bottom: 1px solid #eeeded !important;
}

/* temp message */
#topline {
  font-size: 18px;
  font-weight: 600;
  color: #e95420;
}

/************/

header .header-content {
  background-color: #fff;
  padding-top: var(--safe-area-inset-top);
}

.container {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: auto;
  margin-left: auto;
}
.container::after {
  content: "";
  clear: both;
}

header .logo {
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
header::after {
  content: "";
  display: table;
  clear: both;
}

.header-item {
  float: right;
  font-size: 20px;
  padding: 0 10px;
  margin-top: 6px;
}

#user {
  color: steelblue; /* #4682B4 SteelBlue */
  font-size: 24px;
  vertical-align: middle;
}

#user:hover {
  transform: scale(1.2, 1.2);
}

#cartimg {
  font-size:30px;
  color: steelblue; /* #4682B4 SteelBlue */
  vertical-align: middle;
}

#cartimg:hover {
  transform: scale(1.2, 1.2);
}

#cart_no {
  padding: 0 .3em;
  font-size: 1rem;
  line-height: 1.2em;
  color: #fff;
  border-radius: 10px;
  background: #f86200;
  position: relative;
  display: inline-block;
  transform: translate(-14px,-2px);
}

#servername {
  display: inline-block;
  color: #e95420; /* Ubuntu */
  font-weight: 600;
  font-size: 16px;
  margin-left: 10px;
}

#menuicon {
  color: steelblue; /* #4682B4 SteelBlue */
  font-size: 24px;
  vertical-align: middle;
}

.header-item.menuicon {
  display: block;
}
.header-item.menuicon:hover {
  transform: scale(1.2, 1.2);
}

#searchicon {
  color: steelblue;
  font-size: 24px;
  vertical-align: middle;
}

.header-item.searchicon {
  display: block;
}
.header-item.searchicon:hover {
  transform: scale(1.2, 1.2);
}

.main {
  clear: both;
  min-height: 800px;
}
.main::after {
  content: "";
  clear: both;
  display: table;
}

.prefooter {
}

.footer {
  clear: both;
  background-color: #f5f5f5;
  padding-top: 10px;
}

@media screen and (min-width:6000px){
 .header-item {
   padding: 0 20px;
 }
}

/************/

nav {
  clear: both;
}
.navbar {
  background-color: #f2f7fc;
}
.navbar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
}
nav::after {
  content: "";
  display: table;
  clear: both;
}

.navbar a:hover {
/*  opacity: 0.8;*/
}

/************/

.dropdown {
  position: relative;
  display: none;
  font-size: 14px;
  margin-left: 50px;
}

.dropbtn {
/*  background-color: #3498DB;*/
  color: white;
  padding: 6px;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

.dropdown .dropbtn {
  position: relative;
  border: none;
  outline: 1px grey;
  color: white; /*#515151;*/
  padding: 12px 16px;
  background: #0059a2;
/*  font: inherit;*/
  margin: 0;
  border-radius: 3px;
}

.dropdown a:hover {
  background-color: #fff;
}

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

.dropdown:hover .dropbtn {
  opacity: 0.8;
}

#MainCatList {
  display: none;
  position: absolute;
  color: black;
  background-color: white;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
  min-height: 300px;
}

.maincatitem {
  color: black;
  padding: 7px 16px;
  display: block;
  cursor: pointer;
}

.maincatitem > a {
  color: black;
  text-decoration: none;
}

.maincatitem:hover, .maincatitem:active, .maincatitem > a:hover {
  background: #d1d1d1;
  text-decoration: none;
  display: block;
}

.maincatitem:hover .catlist2 {
  display: block;
}

.catlist2 {
  font-size: 13px;
  list-style-type: none;
  position: absolute;
  left: 250px;
  right: auto;
  top: 0;
  background-color: white;
  display: none;
  width: 250px;
  overflow-y: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
/*  z-index: 1;*/
  border: 1px solid #eeeded !important;
  min-height: 300px;
  column-count: 0;
  column-gap: 0;
  padding: 10px;
}

.catlist2 > li {
  background-color: white;
  color: #0059a2;
  font-weight: 600;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  text-decoration: none;
}
.catlist2 > li a {
  background-color: white;
  color: #0059a2;
  font-weight: 600;
  text-decoration: none;
}

.catlist2 > li a:hover {
  background-color: white;
  color: #0059a2;
  font-weight: 600;
  text-decoration: underline;
}

.catlist3 {
  list-style: none;
  padding: 10px 3px 10px 3px;
  border-bottom: 1px solid #eeeded;
  color: black;
  font-weight: 400;
  margin-bottom: 10px;
}

.catlist3 > li {
  padding: 5px;
  display: block;
  min-height: 25px;
}
.catlist3 > li a {
  background-color: white;
  color: black;
  font-weight: 400;
  text-decoration: none;
}
.catlist3 > li a:hover {
  background-color: white;
  color: black !important;
  text-decoration: underline;
  display: block;
  opacity: 0.8;
  font-weight: 400;
}

.show {display: block;}

.pull-right{
  float:right!important
}
.pull-left{
  float:left!important
}

@media only screen and (min-width:600px) and (max-width:870px){
.catlist2 {
  left: 250px;
  width: 250px;
  column-count: 1;
  column-gap: 0;
  overflow-y: auto;
}

}

@media only screen and (min-width:870px) and (max-width:1024px){
.catlist2 {
  left: 250px;
  width: 500px;
  column-count: 2;
  column-gap: 0;
  overflow-y: auto;
}

}

@media only screen and (min-width:1024px){
.catlist2 {
  left: 250px;
  width: 750px;
  column-count: 3;
  column-gap: 0;
  overflow-y: auto;
}
}

/************/

#screenwidth {
  float: right;
}

#language {
  float: right;
  color: #006dd3;
  padding: 2px;
}
#language a {
  position: relative;
/*  top: 2px;;*/
  padding: 2px;
  margin-left: 10px;
  text-decoration: none;
  color: white;
  background: darkgrey;
/*
  border-radius: 3px;
*/
}
#language > a:hover {
  transform: scale(1.2, 1.2);
  opacity: 0.8;
}
#language a.active {
  background: steelblue;
}

/************/

.search-container {
/*  width: 300px;*/
  position: relative;
  z-index: 10;
  display: none;
  outline: 0;
  margin-left: 50px;
}

.search-container.sm {
/*  display: inline-block;*/
  display: none;
}

.search-input {
  width: 100%;
  height: 40px;
  position: relative;
  margin: 0;
  padding: 0;
}

#kwsearchbox {
  width: 100%;
  height: 38px;
  border-radius: 3px;
}

.search-input-field:focus {
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

button.searchLrg {
  position: absolute;
  top: 3px;
  right: 0;
  border: 0;
  color: #fff;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  height: 32px;
  border-radius: 3px;
  margin: 0;
  padding: 0 3px;
  background: #4682B4; /* SteelBlue */
  z-index: 2;
  transform: translateX(-2px);
  cursor: pointer;
}

button.searchLrg:hover {
/*  transform: scale(1.1, 1.1);*/
  opacity: 0.8;
}

.kwresultbox {
 background-color: #444;
 color: #fff;
 border-radius: 6px;
 box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 2%);
 display: block;
 margin-top: 0.25rem!important;
 position: absolute;
 z-index: 9;
}

.kwresultbox ul {
 list-style: none;
 padding: 0.5rem;
}
.kwresultbox ul li {
 margin: 5px;
 font-family: sans-serif,Helvetica,Arial;
 font-size: 15px;
}
.kwresultbox ul li a {
 text-decoration: none;
 color: #fff;
}
.kwresultbox ul li:hover {
 background-color: #ddd;
 cursor: pointer;
 color: #000;
}
.kwresultbox ul li a:hover {
 color: #000;
}

.resultboxheader {
 padding: 10px;
}

/************/

@media only screen and (min-width: 600px){
 .header-item.menuicon {
   display: none;
 }
 .dropdown {
   display: inline-block;
 }
}
@media only screen and (min-width: 768px){
 .header-item.menuicon {
   display: none;
 }
 .dropdown {
   display: inline-block;
 }

 .search-container {
   width: 220px;
   display: inline-block;
 }
 .header-item.searchicon {
   display: none;
 }

}
@media only screen and (min-width: 992px){
 .search-container {
   width: 300px;
   display: inline-block;
 }
 .header-item.searchicon {
   display: none;
 }
}

/************/

ul.breadcrumb {
  padding-top: 8px;
/*  padding-bottom: 8px;*/
  list-style: none;
}

ul.breadcrumb li {
  display: inline;
}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

ul.breadcrumb li a {
  color: #006dd3;
/*  color: green;*/
  text-decoration: none;
}

ul.breadcrumb li a:hover {
  opacity: 0.5;
  text-decoration: underline;
}

/************/

.mainslider {
/*  width: 100%;*/
/*  display: flex;*/
/*  flex-direction: row;*/
/*  flex-wrap: none;*/
  width: 360px;
  overflow: hidden;
}

.mainslider div {
/*  width: 100%;*/
/*  background: #f1f1f1;*/
}

.mainslide {
  position: relative;
/*  width: 100%;*/
  column-gap: 2px;
  padding: 10px;
  height: 200px;
/*  max-width: 400px;*/
  overflow: hidden;
/*  border-bottom:1px solid #ccc;*/
 margin-bottom: 20px;
}

.mainslide .mslidetitle {
  position: absolute;
  top: 8px;
  left: 50%;
  font-size: 20px;
  display: none;
}

@media only screen and (min-width: 700px){
 .mainslide .mslidelink {
    display: block;
 }
}
@media only screen and (min-width: 1024px){
 .mainslide .mslidetitle {
   display: block;
 }
 .mainslide .mslidedesc {
   display: block;
 }
}

.mainslide .bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.mainslide .top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.mainslide .top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.mainslide .bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.mainslide .centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/************/

.brandslidercontainer {
}

.brandslider {
  align-items: center;
  display: flex;
/*  height: 100vh;*/
  background: transparent;
/*  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
/*  height: 75px;*/
  margin: auto;
 flex-wrap: wrap;
 overflow: hidden;
/*  position: relative;*/
  width: 100%;
/*  justify-content: center;*/
 justify-content: space-evenly; /* space-evenly ;*/
}
.brandslider .slide {
  display: flex;
  height: 75px;
/*  width: 200px;*/
  align-items: center;
  justify-content: center;
}

/************/

.fronthdrline {
  height: 20px;
  text-transform: uppercase;
  background: #f2f7fc;
  padding: 2px 5px;
}

.introduction {
 margin-bottom: 5px;
}

/************/
/* Cat browse */

.catmenu {
 padding: 0;
margin: 3px 0 12px;
}

.catmenu ul {
 margin: 0;
 padding: 0;
font-size: 14px;
list-style-position: inside;
}

.catmenu ul li {
  padding: 5px;
}

.catmenu ul li a {
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.catmenu ul li a:hover {
  background: #147fdd;
  color: #fff;
}

.catmenuoption {
/*  margin-left: .3em;*/
}


.catbrowse {
  font-size: 13px;
  list-style-type: none;
/*  position: absolute;*/
  left: 250px;
  right: auto;
/*  top: 0;*/
/*  background-color: white;*/
/*  display: none;*/
/*  width: 250px;*/
  overflow-y: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
/*  z-index: 1;*/
  border: 1px solid #eeeded !important;
  min-height: 300px;
  column-count: 0;
  column-gap: 0;
  padding: 10px;
}

.catbrowse > li {
  background-color: white;
  color: #0059a2;
  font-weight: 600;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  text-decoration: none;
  margin-bottom: 5px;
}
.catbrowse > li a {
  background-color: white;
  color: #0059a2;
  font-weight: 600;
  text-decoration: none;
}

.catbrowse > li a:hover {
  background-color: white;
  color: #0059a2;
  font-weight: 600;
  text-decoration: underline;
}

.catprodlogo {
  float: right;
}

/************/

.cattiles {
 margin: 0;
 padding: 0;
 list-style: none;

 background: #edf0f1;
 padding: 40px 36px;
 display: flex;
 flex-wrap: wrap;
 row-gap: 15px;
 column-gap: 30px;
 align-items: baseline;
 overflow: hidden;
 justify-content: flex-start; /* space-evenly ;*/
 margin-bottom: 20px;
 box-sizing: border-box;
}

.cattiles > li {
 align-items: center;
 display: flex;
 flex-shrink: 0;
 justify-content: center;
 text-align: center;
 background: 0 0;
 flex-direction: column;
 box-sizing: border-box;
 width: 200px;
}

.cattiles > li a {
align-items: center;
display: flex;
flex-direction: column;
max-width: 100%;
text-decoration: none;
box-sizing: border-box;
}

.cattiles > li a:hover {
  text-decoration: underline;
}

.catimagecontainer {
align-items: center;
background: #fff;
border: 1px solid #ccc;
display: flex;
height: 120px;
justify-content: center;
margin-bottom: 10px;
max-width: 120px;
overflow: hidden;
padding: 10px;
width: 120px;
}

.catimagecontainer img {
max-width: 100%;
border: 0;
}

.cattiles .cattextcontainer {
font-weight: 800;
}

/************/

.catmain {
 margin: 0;
 padding: 0;
 list-style: none;

/* background: #edf0f1;*/
 padding: 10px 36px;
 display: flex;
 flex-wrap: wrap;
 row-gap: 15px;
 column-gap: 30px;
 align-items: start;
/*baseline;*/
 overflow: hidden;
 justify-content: flex-start;
 margin-bottom: 20px;
 box-sizing: border-box;
}

.catmain > li {
/* align-items: center;*/
 display: flex;
 flex-shrink: 0;
 justify-content: center;
 text-align: center;
 width: 142px;
 background: 0 0;
 flex-direction: column;
 box-sizing: border-box;
/*  width: 300px;*/
}

.catmain > li a {
/*align-items: center;*/
display: flex;
flex-direction: column;
max-width: 100%;
text-decoration: none;
box-sizing: border-box;
}

.catmain > li a:hover {
  text-decoration: underline;
}

.catmainli {
}

.catmain .catimagecontainer {
float: left;
}

.catmain .cattextcontainer {
 float: left;
 margin: 10px;
 font-weight: 800;
 word-wrap: break-word;
 overflow-wrap: break-word;
}

.catmain .cattextcontainer:hover {
 text-decoration: underline;
}

/************/
/* Formatted checkbox */

.cbox {
  display: block;
  position: relative;
  padding-left: 20px;
  margin-bottom: 2px;
  cursor: pointer;
  font-size: 11px;
/*  user-select: none;*/
}

/* Hide the browser's default checkbox */
.cbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 2px;
  height: 12px;
  width: 12px;
  background-color: #fff;/*#eee*/
  outline: 1px solid #777;
  border-radius: 2px;
}

/* On mouse-over, add a grey background color */
.cbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.cbox input:checked ~ .checkmark:after {
  outline: none;
  display: block;
}

/* Style the checkmark/indicator */
.cbox .checkmark:after {
  left: 3px;
  top: 0px;
  width: 3px;
  height: 7px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/************/

.catsidebarandproducts {
/*  width: 100%;*/
  display: flex;
}
.catsidebar {
  min-width: 280px;
  max-width: 280px;
/*  width: 25%;*/
/*  float: left;*/
  margin-right: 10px;
}
#catsidebarid {
  display: none;
}

.catproducts {
  width: 100%;
/*  float: left;*/
}

/************/

.filterscontainer {
  display: block;
}

.filterblockheader {
  height: 37px;
/*  position: relative;*/
  background: #4682B4; /* SteelBlue */
  margin-bottom: 3px;
  cursor: pointer;
}

.filterblockfilters {
  display: block;
}

.filterblockheader .filterbutton {
  float: right;
  font-size: 20px;
  margin-top: 3px;
  width: 20px;
  height: 20px;
  color: #fff;
  margin-right: 10px;
  align-self: center;
/*  text-align: center;*/
  vertical-align: middle;
}

.filterblockheader .filterblocktitle {
  float: left;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 0 0 10px;
/*  margin: 0;*/
  vertical-align: middle;
  text-transform: uppercase;
}

.filtersubheader {
  height: 31px;
/*    position: relative;*/
  margin-top: 3px;
  margin-bottom: 3px;
/*    cursor: pointer;*/
  padding: 5px;
}
.filtersubheader.blue {
  background: #cfe6fd;
  color: #152027;
}
.filtersubheader.grey {
/*  background: #f3f3f3;*/
/*  background-image: linear-gradient(180deg, white, #f3f3f3);*/
  background-image: linear-gradient(180deg, #f3f3f3, #cfe6fd);
/*  background-image: linear-gradient(180deg, white, #cfe6fd);*/
  color: #152027;
}

.filtersubheader .filterbutton {
  float: right;
  font-size: 20px;
  margin-top: -7px;
  width: 20px;
/*  height: 20px;*/
  color: black;
  margin-right: 10px;
/*  align-self: center;*/
/*  text-align: center;*/
/*  vertical-align: middle;*/
}

.filtershowhide ul {
  list-style: none;
}
.filtershowhide ul li {

}
.filtershowhide ul li:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
/*  background: #f1f1f1;*/
}
.filtershowhide ul li a {
/*  color: #006dd3;*/
  text-decoration: none;
}
.filtershowhide ul li span.label {
  max-width: 85%;
  display: inline-block;
/*  color: #006dd3;*/
}
.filtershowhide ul li span.nr {
  float: right;
  color: #656565;
}

.filtershowhide ul li span.label a {
  color: #006dd3;
}

#activefilters {
  list-style: none;
}


.filterscontainer h4 {
  font-weight: normal;
  color: black; /*SteelBlue;*/
}


button.togfilter {
  width: 100%;
  color: white;
/*  padding: 6px;*/
  border: none;
  cursor: pointer;

  position: relative;
  outline: 1px grey;
  background: steelblue;

  margin: 0;
  border-radius: 3px;
}


button.subfilter {
/*  padding: 6px;*/
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;

  position: relative;
  outline: 1px grey;

  margin: 0;
  border-radius: 3px;
  background-color: inherit;
}

/************/
/* Price slider */

#min {
 float: left;
 width: 30px;
 padding: 5px 10px;
 margin-right: 14px;
}

#slider-range {
 width: 90%;
/* float: left;*/
 margin: 5px 5px 5px 10px;
 border-radius: 20px;

}

#max {
 float: right;
 width: 30px;
 padding: 5px 10px;
}

.vbs_ui-slider-handle {
  border-radius: 1em;
}

.ui-slider { /* The track of the slider control */
}

.ui-slider-range { /* The selected range used when the range option is set. */
}

.ui-slider-handle { /* One of the slider handles */
/* border-radius: 10px;*/
}

.ui-widget-header {
 background: #4682B4; /* SteelBlue */
}

/************/

.producttopline {
  width: 100%;
/*  float: left;*/
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  padding: 11px;
}

.producttopline::after {
  content: "";
  clear: both;
  display: table;
}

.nofproducts {
  margin-top: 4px;
  float: left;
  width: 100px;
}
.sortering {
  float: left;
  margin-left: 10px;
}
.weergave, .altweergave {
  float: right;
}
.altfilter {
  float: left;
  margin-left: 10px;
}

/************/

.product-listing {
  width: 100%;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
/*  background-color: #efefef;*/
}

.product-listing::before {
  content: "";
  clear: both;
}

.product-listing list {
  width: 100%;
}

.product-listing grid {
  width: 100%;
/*  column-count: 3;*/
}

.product-listing a {
  text-decoration: none;
  color: black;
}

.product-listing .product-container {
  width: 100%;
  border-bottom:1px solid #ccc;
  padding-bottom: 3px;
  display: grid;
/*  background-color: #f1f1f1;*/
  column-gap: 2px;
  word-wrap: break-word;
}

.product-listing .product-container:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
}

/* forceer grid op kleine schermen */
.product-listing.list .product-container {
  width: 100%;
  padding: 10px;
  grid-template-columns: 100%;
  gap: 0px;
}

.product-listing.grid .product-container {
  width: 100%;
  padding: 10px;
  grid-template-columns: 100%;
  gap: 0px;
}

.product-listing .product-container .product-img {
  align-self: center;
  text-align: center;
/*  background-color: #e1e1e1;*/
}

.product-listing .product-container img {
}

.product-listing .product-container::after {
  content: "";
  clear: both;
  display: table;
}


.product-listing h4 {
  font-weight: normal;
  color: SteelBlue;
}

.product-listing h3 {
  font-weight: normal;
  color: black;
}

.product-listing .product-priceE {
  font-size: 24px;
  color: #4682B4; /* SteelBlue */
  font-weight: 600;
}

.product-listing .product-priceI {
  font-size: 12px;
  color: grey;
  font-weight: 400;
}

/* forceer grid op kleine schermen */
.product-listing.list  .product-brand { grid-area: 1 / 1 / 1 / 2; }
.product-listing.list  .product-img { grid-area: 2 / 1 / 2 / 2; min-height: 100px; }
.product-listing.list  .product-name { grid-area: 3 / 1 / 3 / 2; }
.product-listing.list  .product-sku { grid-area: 4 / 1 / 4 / 2; }
.product-listing.list  .product-stock { grid-area: 5 / 1 / 5 / 2; }
.product-listing.list  .product-priceE { grid-area: 6 / 1 / 6 / 2; }
.product-listing.list  .product-priceI { grid-area: 7 / 1 / 7 / 2; }

.product-listing.grid  .product-brand { grid-area: 1 / 1 / 1 / 2; }
.product-listing.grid  .product-img { grid-area: 2 / 1 / 2 / 2; min-height: 100px; }
.product-listing.grid  .product-name { grid-area: 3 / 1 / 3 / 2; }
.product-listing.grid  .product-sku { grid-area: 4 / 1 / 4 / 2; }
.product-listing.grid  .product-stock { grid-area: 5 / 1 / 5 / 2; }
.product-listing.grid  .product-priceE { grid-area: 6 / 1 / 6 / 2; }
.product-listing.grid  .product-priceI { grid-area: 7 / 1 / 7 / 2; }

.sortering > label, .weergave > label {
 display: none;
}

.weergave {
 display: none;
}
.altweergave {
 display: none;
}
#togfilterid {
  display: block;
}

@media only screen and (min-width:401px) {
 .altweergave {
  display: block;
 }
}
@media only screen and (min-width:601px) {

 #togfilterid {
  display: none;
 }

 #catsidebarid {
  display: block;
 }
/* #mainfilterbutton {*/
/*  display: none;*/
/* }*/

 .product-listing.grid .product-container {
   width: 100%;
 }

 .sortering > label, .weergave > label {
  display: none;
 }

 .weergave {
  display: none;
 }
 .altweergave {
  display: block;
 }
}

@media only screen and (min-width:811px) {

 .product-listing.list .product-container {
   width: 100%;
   grid-template-columns: 120px 20% 20% auto auto;
   gap: 10px;
 }

 .product-listing.list .product-img { grid-area: 1 / 1 / span 3 / 1; align-self: center; }
 .product-listing.list .product-brand { grid-area: 1 / 2 / 1 / 6; }
 .product-listing.list .product-name { grid-area: 2 / 2 / 2 / 6; }
 .product-listing.list .product-sku { grid-area: 3 / 2 / 3 / 3; align-self: center; }
 .product-listing.list .product-stock { grid-area: 3 / 3 / 3 / 4; align-self: center; }
 .product-listing.list .product-priceE { grid-area: 3 / 4 / 3 / 5; align-self: center; }
 .product-listing.list .product-priceI { grid-area: 3 / 5 / 3 / 6; align-self: center; text-align: right;}

 .product-listing.grid .product-container {
   width: 50%;
 }

 .sortering > label, .weergave > label {
  display: inline-block;
 }

 .weergave {
  display: inline-block;
 }
 .altweergave {
  display: none;
 }
}

@media only screen and (min-width:1100px) {

 .product-listing.grid .product-container {
   width: 33%;
 }

 .sortering > label, .weergave > label {
/*  display: inline-block;*/
 }
 .weergave {
/*  display: inline-block;*/
 }
}

/************/
/* Product specifications */

table.pspec {
  width: 100%;
}
table.pspec tr.odd_row {
  background:#fff
}

table.pspec tr.odd_row:hover {
  background-color: #F6F1EE;
}

table.pspec tr.even_row {
  background:#f3f3f3
}

table.pspec tr.even_row:hover {
  background-color: #F6F1EE;
}

table.pspec td {
 white-space:normal;
 padding:1px 3px 1px 3px;
  word-wrap: break-word;
}

table.pspec td.dt {
  width: 40%;
}
table.pspec td.dd {
  width: 60%;
}

/************/


.productbottomline {
  width: 100%;
  float: left;
  border-top:1px solid #ccc;
/*  border-bottom:1px solid #ccc;*/
  padding: 11px 0px;
}

.pagination {
  box-sizing: border-box;
  display: block;
  text-align: center;
  width: 100%;
  padding: 5px;
}
/*
.pagination > div, .pagination > a, .pagination > span {
  padding: 8px 16px;
}
*/
.pagination .total {
  float: left;
  width: 10%;
}

.pagination .pagelinks {
  float: left;
  width: 90%;
}

.pagelinks > div, .pagelinks > a, .pagelinks > span {
  padding: 8px 16px;
  margin: 0 4px;
}

.pagination a {
  color: black;
/*  padding: 8px 16px;*/
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
/*  margin: 0 4px;*/
}

.pagination a.active {
  background-color: SteelBlue; /* #4CAF50;*/
  color: white;
  border: 1px solid SteelBlue; /* #4CAF50;*/
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
}

.pagination span.dots {
  color: black;
/*  padding: 8px 16px;*/
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
/*  margin: 0 4px;*/
}

.pagination span.chev {
  color: grey;
/*  padding: 8px 16px;*/
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
/*  margin: 0 4px;*/
}

.pagination span.curpage {
  background-color: SteelBlue; /* #4CAF50;*/
  color: white;
  border: 1px solid SteelBlue; /* #4CAF50;*/
/*  padding: 8px 16px;*/
  text-decoration: none;
  transition: background-color .3s;
/*  margin: 0 4px;*/
}

/************/

.pagination .total {
  display: none;
}
.pagination .pagelinks {
/*  float: left;*/
  width: 100%;
}

.pagelinks > div, .pagelinks > a, .pagelinks > span {
  padding: 4px 8px;
  margin: 0 4px;
}

.pagination span.chev {
  display: none;
}

@media only screen and (min-width:600px){
 .pagination span.chev {
   display: inline-block;
 }
}
@media only screen and (min-width:768px){
}
@media only screen and (min-width:800px){
 .pagelinks > div, .pagelinks > a, .pagelinks > span {
   padding: 8px 16px;
   margin: 0 4px;
 }
}
@media only screen and (min-width:992px){
 .pagination .total {
   float: left;
   width: 10%;
   display: block;
 }
 .pagination .pagelinks {
   float: left;
   width: 90%;
 }
}
@media only screen and (min-width:1100px){
}

/************/

.flex-container {
  display: flex;
}

.flex-container > div {
}

/************/
/* Buttons */

#quantity :focus, #removefromcart :hover
{
box-shadow: 0 0 3px 1px #68a8e0;
}

.aright {
  text-align: right;
  padding-right: 1em;
}

.btn {
  position: relative;
  display: inline-flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #bcbcbc;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  cursor: pointer;
  font-weight: 400;
  user-select: none;
  appearance: none;
  padding: .25rem .5rem;
  transition: all .2s ease-in-out;
  text-decoration:none;
  border-radius: 4px;
/*
  padding-right: 1rem;
  padding-left: 1rem;
  font-size: 1rem;
  line-height: 1.5;
*/
}

button .btn__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.btn--green {
  color: #fff;
  background-color: #40923d;
  border-color: #40923d;
}
.btn--green:active, .btn--green:focus, .btn--green:hover {
  opacity: 0.5;
/*
  color: #40923d;
  background-color: #cae8c9;
*/
/*  color: #fff;*/
/*  background-color: #62bc5f;*/
}

.btn--wide {
  padding-left: 3rem;
  padding-right: 3rem;
}

.btn--lightblue {
  color: #fff;
  background-color: #0098dd;
  border-color: #007cb4;
}
.btn--lightblue:active, .btn--lightblue:focus, .btn--lightblue:hover {
  opacity: 0.5;
/*
  color: #0098dd;
  background-color: #eff9ff;
  border-color: #bfe1f0;
*/
}

.btn.focus, .btn:active, .btn:focus, .btn:hover {
  text-decoration: none;
}
.flex-grow-1 {
 flex-grow: 1 !important;
}

.btn--orange {
  color: #fff;
/*    background-color: #ffa700;*/
/*    border-color: #ff8000;*/
  background: #ff7216;
  border: 1px solid #c86228;
}
.btn--orange:active, .btn--orange:focus, .btn--orange:hover {
/*    color: #ff8000;*/
/*    background-color: #ffe4b3;*/
  opacity: 0.5;
/*    color: #fff;*/
/*    background-color: #ffc000;*/
/*    border-color: #ffcc33;*/
}


@media only screen and (min-width:801px){

 .btn {
   padding-right: 1rem;
   padding-left: 1rem;
   font-size: 1rem;
   line-height: 1.5;
 }
}

/************/
/* Shopping cart */

.cart {
/*  display: flex;*/
}

.cart-lines {
}

.cart-product {
  width: 100%;
  border-bottom:1px solid #ccc;
  padding-bottom: 3px;
  display: grid;
/*  background-color: #f1e1f1;*/
  column-gap: 2px;
  word-wrap: break-word;
  grid-template-columns: auto 90px 90px;
  gap: 10px;
  margin-top: 5px;
}
.cart-product::after {
  content: "";
  clear: both;
  display: table;
}

 .cart-product .product-brand { grid-area: 1 / 1 / 1 / 4; }
 .cart-product .product-img { grid-area: 2 / 1 / 2 / 4; align-self: center; text-align: center; }
 .cart-product .product-name { grid-area: 3 / 1 / 3 / 4; }
 .cart-product .product-sku { grid-area: 4 / 1 / 4 / 2; align-self: center; }
 .cart-product .product-stock { grid-area: 4 / 2 / 4 / 3; align-self: center; }
 .cart-product .product-del { grid-area: 4 / 3 / 4 / 4; }
 .cart-product .product-qty { grid-area: 5 / 1 / 5 / 2; align-self: center; text-align: right; }
 .cart-product .product-priceP { grid-area: 5 / 2 / 5 / 3; align-self: center; text-align: right; }
 .cart-product .product-priceS { grid-area: 5 / 3 / 5 / 4; align-self: center; text-align: right; }

.cart-totals {
  background: rgb(255, 250, 229);
  border-bottom:1px solid #ccc;
  padding-bottom: 3px;
  padding-top: 5px;
}
.cart-amounts {
  margin-right: 20px;
}
.cart-amount-row {
  width: 100%;
  display: grid;
  column-gap: 2px;
  grid-template-columns: auto 190px 90px;
  gap: 10px;
}
.cart-amount-row::after {
  content: "";
  clear: both;
  display: table;
}

.cart-amount-row .cart-amount-txt { grid-area: 1 / 2 / 1 / 3; text-align: left; }
.cart-amount-row .cart-amount-price { grid-area: 1 / 3 / 1 / 4; text-align: right; }

.cart-actions {
  margin-top: 20px;
  width: 100%;
  display: grid;
  column-gap: 2px;
  grid-template-columns: auto 120px 170px;
  gap: 0px;
}

.cart-actions .cart-back { grid-area: 1 / 1 / 1 / 2; text-align: left; }
.cart-actions .cart-upd { grid-area: 1 / 2 / 1 / 3; text-align: center; }
.cart-actions .cart-next { grid-area: 1 / 3 / 1 / 4; text-align: right; }

.cart-actions .hidesmall {
  display: none;
}

@media only screen and (min-width:600px){

 .cart-product {
   grid-template-columns: 110px auto 90px 90px 90px 30px;
 }

 .cart-product .product-img { grid-area: 1 / 1 / 5 / 2; align-self: center; text-align: center; }
 .cart-product .product-brand { grid-area: 1 / 2 / 1 / 6; }
 .cart-product .product-name { grid-area: 2 / 2 / 2 / 6; }
 .cart-product .product-qty { grid-area: 4 / 3 / 4 / 4; align-self: center; text-align: right; }
 .cart-product .product-priceP { grid-area: 4 / 4 / 4 / 5; align-self: center; text-align: right; }
 .cart-product .product-priceS { grid-area: 4 / 5 / 4 / 6; align-self: center; text-align: right; }
 .cart-product .product-del { grid-area: 3 / 4 / 3 / 5; }
 .cart-product .product-sku { grid-area: 3 / 2 / 3 / 3; align-self: center; }
 .cart-product .product-stock { grid-area: 3 / 3 / 3 / 4; align-self: center; }

 .cart-actions .hidesmall {
   display: block;
 }

 .cart-actions {
   grid-template-columns: 31% auto 33% 10px;
   gap: 10px;
 }

}

@media only screen and (min-width:800px){

 .cart-product {
   grid-template-columns: 110px auto 90px 90px 90px 30px;
 }
 .cart-product .product-img { grid-area: 1 / 1 / 4 / 2; align-self: center; text-align: center; }
 .cart-product .product-brand { grid-area: 1 / 2 / 1 / 3; }
 .cart-product .product-name { grid-area: 2 / 2 / 2 / 6; }
 .cart-product .product-qty { grid-area: 1 / 3 / 1 / 4; align-self: center; text-align: right; }
 .cart-product .product-priceP { grid-area: 1 / 4 / 1 / 5; align-self: center; text-align: right; }
 .cart-product .product-priceS { grid-area: 1 / 5 / 1 / 6; align-self: center; text-align: right; }
 .cart-product .product-del { grid-area: 3 / 4 / 3 / 5; }
 .cart-product .product-sku { grid-area: 3 / 2 / 3 / 3; align-self: center; }
 .cart-product .product-stock { grid-area: 3 / 3 / 3 / 4; align-self: center; }

 .cart-amount-row {
   grid-template-columns: auto 190px 90px 10px;
 }
 .cart-amount-row .cart-amount-txt { grid-area: 1 / 2 / 1 / 3; text-align: left; }
 .cart-amount-row .cart-amount-price { grid-area: 1 / 3 / 1 / 4; text-align: right; }

 .cart-actions {
   grid-template-columns: 31% auto 33% 10px;
   gap: 10px;
 }
}

span.cur {
  float: left;
}

.cart .quantity {
  padding-right: 10px;
}

.cart .quantity-button-holder {
  float: left;
}

.cart .quantity-button-holder > button {
  height: 20px;  
  width: 20px;
  text-align: center;
}

input.qty {
  height: 20px;  
  width: 30px;
  text-align: center;
}


.cart-disclaimer {
/*  background: #f1f1f1;*/
  color: grey;
  margin-top: 20px;
  margin-bottom: 20px;
}

/************/
/* Show product */

.brand-box {
  overflow: hidden;
  margin: 0 0 13px 4px;
  min-height: 100px;
}
.topline {
  border-top: 1px solid #ccc;
}
.stock-box {
  font-weight: 700;
  margin: 0 0 15px 4px;
  line-height: 1.5;
}
span.inStockIcons.inStock-0 {
  color: #4FC431;
  background-position: 0 0;
}
span.inStockIcons.inStock-1 {
  color: #F3B91E;
  background-position: 0 -10px;
}
span.inStockIcons.inStock-2 {
  color: #FF1717;
  background-position: 0 -20px;
}
span.inStockIcons.inStock-3 {
  color: #111;
  background-position: 0 -30px;
}
span.inStockIcons {
  background-image: url(/https/VB.NET/img/stock4.png);
  background-repeat: no-repeat;
  padding: 0;
  margin: 6px 5px 0 0;
  height: 9px;
  width: 29px;
  float: left;
}
.inStock-color-0 {
  color: #4FC431;
}
.inStock-color-1 {
  color: #F3B91E;
}
.inStock-color-2 {
  color: #FF1717;
}
.inStock-color-3 {
  color: #111;
}

.price-box {
  margin: 10px;
}
.price {
  display: inline-block;
  font-size: 34px;
}
.vat {
  display: inline-block;
  color: grey;
}

.order-box {
  font-weight: 700;
  font-size: 16px;
  line-height: 2.2;
}
.order-box input {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid #eeeded;
}


.cart-box {
  margin-top: 15px;
}


.order-box .quantity {
  float: left;
  padding-right: 10px;
}

.order-box .quantity-button-holder {
  float: left;
}

.order-box .quantity-button-holder > button {
/*  line-height: 1.5;*/
  position: relative;
  top: -2px;
  height: 33px;
  width: 33px;
  text-align: center;
/*
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
*/
}

.order-box input.qty {
/*  line-height: 1.5;*/
  height: 33px;
  width: 70px;
  text-align: center;
}

.wishlist-box {
  margin-top: 10px;
}
.wishlist-box a {
  text-decoration: none !important;
}
.wishlist-box a:hover {
  font-weight: 700;
}

.wishlist-box a.grey {
  color: grey;
}
.wishlist-box a.blue {

}


.question-box {
  margin-top: 10px;
}
.question-box a {
  color: black;
  text-decoration: none !important;
}
.question-box a:hover {
  font-weight: 700;
}

/************/

.variant-box {
  margin-top: 10px;
}

ul.variants {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

ul.variants li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #d3d3d3;
}

ul.variants li a:hover {
  background: darkgrey;
}

ul.variants li.activevariant a {
/*  background: black;*/
/*  color: white;*/
/*  border-radius: 10%;*/
/*  text-decoration: underline;*/
  font-weight: 700;
  font-size: 150%;
}

ul.variants li.activevariant a:hover {
/*  background: lightgrey;*/
}

ul.variants li.varianteol a {
  background: darkgrey;
  color: black;
}

ul.variants li.varianteol a:hover {
  text-decoration: underline;
}

ul.variants li.variantstock a {
  background: #dcf5d6;
  color: black;
}

ul.variants li.variantstock a:hover {
  text-decoration: underline;
}

ul.variants li.variantlowstock a {
  background: #fcf0cf;
  color: black;
}

ul.variants li.variantlowstock a:hover {
  text-decoration: underline;
}

ul.variants li.variantnostock a {
  background: #ffe6e6;
  color: black;
}

ul.variants li.variantnostock a:hover {
  text-decoration: underline;
}

.variant-title {
/*  font-weight: 700;*/
  margin-bottom: 10px;
}

/* !important*/


/************/

@media only screen and (min-width:800px){
 .container {
   max-width:1200px;
   margin: auto;
 }
 .dropdown-content {
   float:left;
   max-width:1200px;
   margin: auto;
 }
}

/************/

.rowcontainer {
  width: 100%;
}
.rowcontainer::after {
  content: "";
  clear: both;
  display: table;
}

/************/

.account-signin {
  padding: 10px;
  margin: 5px;
/*  background-color: #f8f8f8;*/
    border: 1px solid #d3d3d3;
    border-radius: 3px;
}
/* verification code */
#vcode {
  font-size: 18px;
  font-weight: 600;
}

/************/
/* order, delivery, invoice listing */

table.ovrows {
  width: 100%;
}

table.ovrows tr.odd_row {
/*  background-color: #eee;*/
}

table.ovrows tr.even_row {
}

table.ovrows tr.odd_row.disabled {
  text-decoration: line-through;
}

table.ovrows tr.even_row.disabled {
  text-decoration: line-through;
}

table.ovrows th {
  color: grey;
  font-weight: 400;
  text-align: left;
  padding: 5px 5px 5px 10px;
}

table.ovrows th.right {
  text-align: right;
}

table.ovrows td {
  text-align: left;
  vertical-align: top;
  padding: 2px 5px 2px 10px;
}

table.ovrows td.right {
  text-align:right;
}

table.ovrows tbody > tr:nth-child(2n+1) {
  background: #eee;
}

table.ovrows td > a {
  text-decoration: none;
}
table.ovrows td > a:hover {
  text-decoration: underline;
}

/************/
/* Checkout */

.checkout-signin {
  height: 100%;
  margin-top: 40px;
}

.cosignin-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.cosignin-option {
  width: 100%;
  vertical-align: top;
  height: 100%;
}

.cosignin-form {
    border: 1px solid #d3d3d3;
    border-radius: 3px;
/*  background-color: #f4f4f4;*/
/*  border-color: #ccc;*/
  padding: 20px;
  height: 100%;
}

#cologin {
}
#cocreate {
}
#coguest {
}

.cosignin-field {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.cosignin-label {
  padding-left: 10px;
  color: #818181;
  display: inline-block;
  line-height: 2em;
}
.cosignin-input {
  display: block;
  height: 35px;
  width: 100%;
  border: 1px solid #ccc;
  line-height: 1em;
  font-size: 1em;
}
.cosignin-buttons {
  padding-top: 20px;
}

.cosignin-buttons > .altlink {
  display: inline-block;
  float: right;
  margin-right: 20px;
}


input.input-text, input[type="email"], input[type="password"], input[type="tel"], input[type="text"], select, textarea {
    border: 1px solid #d3d3d3;
/*    border-radius: 3px;*/
    margin: 0;
    outline: 0;
    padding: 4px;
}

input[readonly] {
  background:#e0e0e0;
}

input[disabled] {
  background:#404040;
}

#cologin input, #cocreate input, #coguest input {
    display: block;
    height: 35px;
    width: 100%;
    border: 1px solid #ccc;
    padding: 6px 12px;
    line-height: 1em;
    font-size: 1em;
/*
    border-radius: 3px;
  */
  box-sizing: border-box;
    box-shadow: 0 0 0 1000px #fff inset;
}


@media only screen and (min-width:600px){
 .cosignin-option {
   width: 49%;
 }
}

@media only screen and (min-width:800px){
 .cosignin-option {
   width: 49%;
/*   width: 32%;*/
 }
}

/************/
/* Input fields */

.form-row {
  clear: left;
  margin-bottom: 5px;
  overflow: hidden;
  padding: 5px;
}

.form-label {
  display: block;
  width: 90%;
  float: left;
}

.form-label > required {
}

.form-label.required > label::after {
  content: "*";
  color: #e02b27;
/*font-size: 1.5rem;*/
  margin: 0 0 0 5px;
}

.form-label-pad {
  display: block;
  width: 90%;
  float: left;
  padding-top: 4px;
}

.form-label-pad > required {
}

.form-label-pad.required > label::after {
  content: "*";
  color: #e02b27;
/*font-size: 1.5rem;*/
  margin: 0 0 0 5px;
}


.form-input {
  display: block;
  width: 90%;
  float: left;
}

.disabled {
  background:#404040;
}

.form-input input[type="email"], .form-input input[type="password"],
.form-input input[type="tel"], .form-input input[type="text"], 
.form-input select {
  width: 300px;
  padding: 3px 2px;
  height: 30px;
  border: 1px solid #d3d3d3;
  margin: 0;
  outline: 0;
  font-weight: 400;
  background-color: #edf3f8;
}

.form-input textarea {
  padding: 3px 2px;
  border: 1px solid #d3d3d3;
  margin: 0;
  outline: 0;
  font-weight: 400;
  background-color: #edf3f8;
  resize: both;
  overflow: auto;
}

.form-input input[type="email"]:focus,
.form-input input[type="password"]:focus,
.form-input input[type="tel"]:focus,
.form-input input[type="text"]:focus, 
.form-input select:focus,
.form-input textarea:focus {
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  background-color: white;
/*  background-color: lightblue;*/
/*  border: 3px solid #555;*/
}

.form-buttons {
  display: block;
  width: 98%;
  float: left;
}
.form-buttons > .altlink {
  display: inline-block;
  float: right;
  margin-right: 20px;
}

.form-input > .buttons {
/*  float: right;*/
}
.form-input > .buttons.right {
/*  float: right;*/
}


@media only screen and (min-width:600px){
 .form-label {
   width: 26%;
   float: left;
 }
 .form-label-pad {
   width: 26%;
   float: left;
 }
 .form-input {
   width: 70%;
   float: left;
 }

}

.form-error {
  display: block;
  width: 100%;
  color: red;
}
.form-info {
  display: block;
  width: 100%;
  color: blue;
}
.form-note {
  padding-top: 20px;
  display: block;
  width: 100%;
  color: lightblue;
}

.form-input > a {
    text-decoration: none;
}

.form-input > a:hover {
    text-decoration: underline;
}

.form-input input[type="email"].fielderror,
.form-input input[type="password"].fielderror,
.form-input input[type="tel"].fielderror,
.form-input input[type="text"].fielderror, 
.form-input select.fielderror,
.form-input textarea.fielderror {
  background: pink;
}

input.fielderror {
  background: pink;
}

#pwmessage {
  display: none;
}
.valid {
  color: green;
}
.pvalid {
  color: orange;
}
.invalid {
  color: red;
}

.form-pradio {
  display: block;
  width: 7%;
  float: left;
  vertical-align: top;
}
.form-plogo {
  display: block;
  width: 7%;
  float: left;
  vertical-align: top;
  min-width: 40px;
}
.form-ptext {
  display: block;
  width: 50%;
  float: left;
  vertical-align: top;
}
.form-pprice {
  display: block;
  width: 36%;
  float: left;
  vertical-align: top;
}

.order-amounts-sidepanel {
  position: relative;
  background: rgb(255, 250, 229);
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  padding: 5px 3px 3px 5px;
/*  padding-bottom: 3px;*/
/*  padding-top: 5px;*/
/*  margin-right: 20px;*/
}

.order-amount-row {
  width: 100%;
  display: grid;
  column-gap: 2px;
  word-wrap: break-word;
  grid-template-columns: 190px 90px;
/*  gap: 10px;*/
}
.order-amount-row::after {
  content: "";
  clear: both;
  display: table;
}

.order-amount-row .order-amount-txt { grid-area: 1 / 1 / 1 / 2; text-align: left; }
.order-amount-row .order-amount-price { grid-area: 1 / 2 / 1 / 3; text-align: right; }


@media only screen and (min-width:800px){

 .order-amounts-sidepanel {
   border-left:1px solid #ccc;
   border-right:1px solid #ccc;
 }
 .order-amount-row {
   grid-template-columns: 190px 90px 10px;
 }

}

#telctynr, #mobctynr {
  width: 60px;
}

#telnr, #mobnr {
  width: 240px;
}

/************/
/* Order and details */

.order {

}
.orderdetails {
}

.orderdetails::after {
  content: "";
  clear: both;
  display: table;
}

.detailbox {
  width: 98%;
  float: left;
  margin-bottom: 20px;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ccd1ef;
}

.adtype {
  display: block;
  margin-bottom: 20px;
  color: grey;
}

.orderlines {
  width: 98%;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccd1ef;
}

table.orderdetail {
  width: 100%;
}
table.orderdetail tr {
}
table.orderdetail th {
  padding-right: 10px;
  padding-bottom: 10px;
  color: grey;
  font-weight: 400;
  text-align: left;
}
table.orderdetail th.right {
  padding-right: 10px;
  text-align: right;
}
table.orderdetail td {
  padding-right: 10px;
  vertical-align: top;
}
table.orderdetail td.right {
  padding-right: 10px;
  text-align: right;
}

table.orderdetail td.fvalue.red {
  color: red;
}

table.orderdetail td > a {
  text-decoration: none;
}
table.orderdetail td > a:hover {
  text-decoration: underline;
}

.deliveries {
  width: 98%;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ccd1ef;
}
.fnsnr {
  vertical-align: top;
  color: grey;
}

@media only screen and (min-width:600px){

 .detailbox {
   width: 48%;
   float: left;
 }
}

/************/
/* Account */

.side-navigation {
  margin-bottom: 20px;
  padding: 10px;
  width: 100%;
  border: 1px solid #ccd1ef;
}

ul.side-nav {
  margin: 0;
  padding: 0;
  list-style-type: none;
/*  background-color: #f1f1f1;*/
}

ul.side-nav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

ul.side-nav li a.active {
  background-color: #0098dd;
/*  background-color: SteelBlue;*/ /*#04AA6D;*/
  color: white;
}

ul.side-nav li a:hover:not(.active) {
  color: #141b49;
  text-decoration: underline;
}

/************/
/* Footer */

ul.footer-links {
  list-style-type: none;
}

ul.footer-links li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

ul.footer-links li a:hover {
  color: #141b49;
  text-decoration: underline;
}

.footerimages {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  opacity: 0.5;
}

#footer {
  width: 385px;
  height: 12px;
  background: url(/https/VB.NET/img/footer12.png) 0 0;
}

@media only screen and (min-width:600px){
 #footer {
   width: 513px;
   height: 16px;
   background: url(/https/VB.NET/img/footer16.png) 0 0;
 }
}
@media only screen and (min-width:800px){
 #footer {
   width: 641px;
   height: 20px;
   background: url(/https/VB.NET/img/footer20.png) 0 0;
 }
}
@media only screen and (min-width:1024px){
 #footer {
   width: 769px;
   height: 24px;
   background: url(/https/VB.NET/img/footer24.png) 0 0;
 }
}

/************/
/* Brand overview */

.brand-letter-link-container {
  color: #006dd3;
  display: inline-block;
  padding: 8px 14px;
}

.brand-letter-link-container a {
  color: #006dd3;
  font-size: 16px;
  text-decoration: none;
}

.brand-letter-link-container a:hover {
  font-weight: 700;
}

.brand-letter {
/*  color: #006dd3;*/
  display: block;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 700;
}

ul.brand-list {
  position: relative;
  left: 24px;
  width: 100%;
  column-count: 0;
  column-gap: 0;
  overflow-y: auto;
  text-decoration: none !important;
}


ul.brand-list li {
  color: #006dd3;
  font-size: 14px;
}

ul.brand-list li a {
  color: #006dd3;
  padding: 0px 14px;
  text-decoration: none !important;
}

ul.brand-list li a:hover {
  font-weight: 700;
}

@media only screen and (min-width:600px) and (max-width:870px){
 ul.brand-list {
   column-count: 2;
 }
}

@media only screen and (min-width:871px) and (max-width:1023px){
 ul.brand-list {
   column-count: 3;
 }
}

@media only screen and (min-width:1024px){
 ul.brand-list {
   column-count: 3;
 }
}

/************/

ol.info, ul.info {
  line-height: 180%;
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
}
ul.info {
  list-style-type: unset;
}


p.info {
  margin-top: 10px;
}

h5.info {
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 15px;
}

.infotext {
  float: left;
}
.infoimg {
  float: left;
  padding: 10px;
}

.infoimg img {
  width: 100%;
}

@media only screen and (min-width:600px){

 .infotext {
   width: 80%;
   float: left;
 }
 .infoimg {
   width: 20%;
   float: left;
 }
}

/************/

.productslidercontainer {
  align-items: center;
  display: flex;
/*  height: 100vh;*/
  justify-content: center;
  width: 100%;
}

.productslider {
  background: transparent;
/*  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
  height: 350px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.productslider .slide {
  display: flex;
/*  height: 250px;*/
/*  width: 350px;*/
  align-items: center;

}

.productslider a {
  text-decoration: none;
  color: black;
}

.productslider .product-container {
/*  width: 95%;*/
  border:1px solid #ccc;
  margin: 15px;
/*  padding-bottom: 3px;*/
  display: grid;
/*  background-color: #f1f1f1;*/
  column-gap: 2px;
  word-wrap: break-word;

  width: 95%;
  padding: 10px;
  grid-template-columns: 100%;
  gap: 0px;
}

.productslider .product-container:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
}

.productslider .product-container {
}

.productslider .product-container .product-img {
  align-self: center;
  text-align: center;
/*  background-color: #e1e1e1;*/
}

.productslider .product-container img {
  margin: auto;
}

.productslider .product-container::after {
  content: "";
  clear: both;
  display: table;
}


.productslider h4 {
  font-weight: normal;
  color: SteelBlue;
}

.productslider h3 {
  font-weight: normal;
  color: black;
  font-size: 14px;
}

.productslider .product-priceE {
  font-size: 14px;
  color: #4682B4; /* SteelBlue */
  font-weight: 600;
}

.productslider .product-priceI {
  font-size: 11px;
  color: grey;
  font-weight: 400;
}

.productslider  .product-brand { grid-area: 1 / 1 / 1 / 2; }
.productslider  .product-img { grid-area: 2 / 1 / 2 / 2; min-height: 100px; }
.productslider  .product-name { grid-area: 3 / 1 / 3 / 2; font-size: 12px; min-height: 100px; }
.productslider  .product-sku { grid-area: 4 / 1 / 4 / 2; font-size: 12px; }
.productslider  .product-stock { grid-area: 5 / 1 / 5 / 2; }
.productslider  .product-priceE { grid-area: 6 / 1 / 6 / 2; }
.productslider  .product-priceI { grid-area: 7 / 1 / 7 / 2; }

/************/

/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

.snowflake, .snowflake .inner{
  animation-iteration-count:infinite;
  animation-play-state:running}
@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}
@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}
.snowflake{
  position:fixed;
  top:-10%;
  z-index:9999;
  -webkit-user-select:none;
  user-select:none;
  cursor:default;
  animation-name:snowflakes-shake;
  animation-duration:3s;
  animation-timing-function:ease-in-out}
.snowflake .inner{
  animation-duration:10s;
  animation-name:snowflakes-fall;
  animation-timing-function:linear}
.snowflake:nth-of-type(0){left:1%;animation-delay:0s}
.snowflake:nth-of-type(0) .inner{animation-delay:0s}
.snowflake:first-of-type{left:10%;animation-delay:1s}
.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}
.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}
.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}
.snowflake:nth-of-type(3){left:30%;animation-delay:2s}
.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}
.snowflake:nth-of-type(4){left:40%;animation-delay:2s}
.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}
.snowflake:nth-of-type(5){left:50%;animation-delay:3s}
.snowflake:nth-of-type(5) .inner{animation-delay:8s}
.snowflake:nth-of-type(6){left:60%;animation-delay:2s}
.snowflake:nth-of-type(7){left:70%;animation-delay:1s}
.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}
.snowflake:nth-of-type(8){left:80%;animation-delay:0s}
.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}
.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}
.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}