/* 
  3 colors example:

  background-image: linear-gradient(
    #90E0EF 33.33%, Top color
    #0096C7 33.33%, Middle color
    #0096C7 66.66%, Middle color
    #0808FB 66.66% Bottom color
  )!important; 

  background-image: linear-gradient(
    to left,
    rgba(249, 255, 0, 1) 33.33%,
    rgba(255, 0, 0, 1)  33.33%,
    rgba(255, 0, 0, 1)  66.66%,
    rgba(0, 0, 255, 1) 66.66% 
  )!important;

  5 Gradient color: 

  background: linear-gradient(
    135deg, rgb(211, 2, 60) 15%,
    rgb(251, 108, 3) 35%,
    rgb(250, 207, 33) 50%,
    rgb(24, 160, 2) 75%,
    rgb(4, 68, 166) 95%
  ) !important;

  3 Gradient color:
  
  background: linear-gradient(
    135deg, #f8f9f4 15%,
    #f7f3e8 45%,
    #f0f0e8 95%
  ) !important;

*/

/* Color filters */
.filter-item label.color:before {
  border: 0 !important;
  border-radius: 50%;
}

/* Wit */
.filter-item label.color-wit:before,
.filter-item:hover label.color-wit:before,
.filter-item input:checked~label.color-wit:before {
  /* background-image: linear-gradient(#f8f9f4 33.33%,
      #f7f3e8 33.33%,
      #f7f3e8 66.66%,
      #f0f0e8 66.66%) !important; */
  border: 1px solid #ccc !important;

  background: linear-gradient(
    135deg, #f8f9f4 15%,
    #f7f3e8 45%,
    #f0f0e8 95%
  ) !important;
}

.filter-item label.color-wit:after {
  color: #000 !important;
}

/* Geel */
.filter-item label.color-geel:before,
.filter-item:hover label.color-geel:before,
.filter-item input:checked~label.color-geel:before {
  /* background-image: linear-gradient(#f7df59 33.33%,
      #f6cc06 33.33%,
      #f6cc06 66.66%,
      #d49f03 66.66%) !important; */

  background: linear-gradient(
    135deg, #f7df59 15%,
    #f6cc06 45%,
    #d49f03 95%
  ) !important;
}

.filter-item label.color-geel:after {
  color: #000 !important;
}

/* Oranje */
.filter-item label.color-oranje:before,
.filter-item:hover label.color-oranje:before,
.filter-item input:checked~label.color-oranje:before {
  /* background-image: linear-gradient(#fbab00 33.33%,
      #e75b06 33.33%,
      #e75b06 66.66%,
      #b94d05 66.66%) !important; */

  background: linear-gradient(
    135deg, #fbab00 15%,
    #e75b06 45%,
    #b94d05 95%
  ) !important;
}

.filter-item label.color-oranje:after {
  color: #000 !important;
}

/* Rood */
.filter-item label.color-rood:before,
.filter-item:hover label.color-rood:before,
.filter-item input:checked~label.color-rood:before {
  /* background-image: linear-gradient(#fc3b3c 33.33%,
      #ec0404 33.33%,
      #ec0404 66.66%,
      #b70100 66.66%) !important; */

  background: linear-gradient(
    135deg, #fc3b3c 15%,
    #ec0404 45%,
    #b70100 95%
  ) !important;
}

.filter-item label.color-oranje:after {
  color: #000 !important;
}

/* Bruin */
.filter-item label.color-bruin:before,
.filter-item:hover label.color-bruin:before,
.filter-item input:checked~label.color-bruin:before {
  /* background-image: linear-gradient(#977d7e 33.33%,
      #855f4a 33.33%,
      #855f4a 66.66%,
      #5a3018 66.66%) !important; */

  background: linear-gradient(
    135deg, #977d7e 15%,
    #855f4a 45%,
    #5a3018 95%
  ) !important;
}

.filter-item label.color-bruin:after {
  color: #fff !important;
}

/* Roze */
.filter-item label.color-roze:before,
.filter-item:hover label.color-roze:before,
.filter-item input:checked~label.color-roze:before {
  /* background-image: linear-gradient(#f9d098 33.33%,
      #f0a257 33.33%,
      #f0a257 66.66%,
      #ec72bd 66.66%) !important; */

  background: linear-gradient(
    135deg, #f9d098 15%,
    #f0a257 45%,
    #ec72bd 95%
  ) !important;
}

.filter-item label.color-roze:after {
  color: #fff !important;
}

/* Paars */
.filter-item label.color-paars:before,
.filter-item:hover label.color-paars:before,
.filter-item input:checked~label.color-paars:before {
  /* background-image: linear-gradient(#c37fc8 33.33%,
      #9a39aa 33.33%,
      #9a39aa 66.66%,
      #5f2177 66.66%) !important; */
  
  background: linear-gradient(
    135deg, #c37fc8 15%,
    #9a39aa 45%,
    #5f2177 95%
  ) !important;
}

.filter-item label.color-paars:after {
  color: #fff !important;
}

/* Turquoise */
.filter-item label.color-turquoise:before,
.filter-item:hover label.color-turquoise:before,
.filter-item input:checked~label.color-turquoise:before {
  /* background-image: linear-gradient(#0afacb 33.33%,
      #02bf99 33.33%,
      #02bf99 66.66%,
      #04aaa8 66.66%) !important; */
  
  background: linear-gradient(
    135deg, #0afacb 15%,
    #02bf99 45%,
    #04aaa8 95%
  ) !important;
}

/* Beige */
.filter-item label.color-beige:before,
.filter-item:hover label.color-beige:before,
.filter-item input:checked~label.color-beige:before {
  /* background-image: linear-gradient(#f3efbf 33.33%,
      #dfcd8b 33.33%,
      #dfcd8b 66.66%,
      #b2a169 66.66%) !important; */
    
  background: linear-gradient(
    135deg, #f3efbf 15%,
    #dfcd8b 45%,
    #b2a169 95%
  ) !important;
}

.filter-item label.color-paars:after {
  color: #fff !important;
}

/* Blauw */
.filter-item label.color-blauw:before,
.filter-item:hover label.color-blauw:before,
.filter-item input:checked~label.color-blauw:before {
  /* background-image: linear-gradient(#90E0EF 33.33%,
      #0096C7 33.33%,
      #0096C7 66.66%,
      #0808FB 66.66%) !important; */

  background: linear-gradient(
    135deg, #90E0EF  15%,
    #0096C7 45%,
    #0808FB 95%
  ) !important;
}

.filter-item label.color-blauw:after {
  color: #fff !important;
}

/* Groen */
.filter-item label.color-groen:before,
.filter-item:hover label.color-groen:before,
.filter-item input:checked~label.color-groen:before {
  /* background-image: linear-gradient(#76e50a 33.33%,
      #1c9508 33.33%,
      #1c9508 66.66%,
      #0b6714 66.66%) !important; */
  
  background: linear-gradient(
    135deg, #76e50a 15%,
    #1c9508 45%,
    #0b6714 95%
  ) !important;
}

.filter-item label.color-groen:after {
  color: #fff !important;
}

/* Grijs */
.filter-item label.color-grijs:before,
.filter-item:hover label.color-grijs:before,
.filter-item input:checked~label.color-grijs:before {
  /* background-image: linear-gradient(#cdcec9 33.33%,
      #7e7e80 33.33%,
      #7e7e80 66.66%,
      #49444a 66.66%) !important; */

  background: linear-gradient(
    135deg, #cdcec9 15%,
    #7e7e80 45%,
    #49444a 95%
  ) !important;
}

.filter-item label.color-grijs:after {
  color: #fff !important;
}

/* Zwart */
.filter-item label.color-zwart:before,
.filter-item:hover label.color-zwart:before,
.filter-item input:checked~label.color-zwart:before {
  /* background-image: linear-gradient(#030403 33.33%,
      #0b0f00 33.33%,
      #0b0f00 66.66%,
      #01082d 66.66%) !important; */
  
  background: linear-gradient(
    135deg, #030403 15%,
    #0b0f00 45%,
    #01082d 95%
  ) !important;
}

.filter-item label.color-zwart:after {
  color: #fff !important;
}

/* Multicolor */
.filter-item label.color-multicolor:before,
.filter-item:hover label.color-multicolor:before,
.filter-item input:checked~label.color-multicolor:before {
  border-radius: 0;
  /* background: rgb(249, 255, 0) !important;
  background: linear-gradient(135deg, rgba(249, 255, 0, 1) 15%, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 255, 1) 95%) !important; */

  background-image: linear-gradient(
    to left,
    rgba(249, 255, 0, 1) 33.33%,
    rgba(255, 0, 0, 1)  33.33%,
    rgba(255, 0, 0, 1)  66.66%,
    rgba(0, 0, 255, 1) 66.66% 
  )!important; 
}

.filter-item label.color-multicolor:after {
  color: #fff !important;
}

/* Meerkleurig */

/* zilver/ goud/ metallic	c18f1e	9f9892	ac5937 */
.filter-item label.color-zilver:before,
.filter-item:hover label.color-zilver:before,
.filter-item input:checked~label.color-zilver:before{
  border-radius: 0;
  /* background: rgb(193, 143, 30) !important;
  background: linear-gradient(135deg, rgba(193, 143, 30) 15%, rgba(159, 152, 146) 50%, rgba(172, 89, 55) 95%) !important; */

  background-image: linear-gradient(
    to left,
    rgb(193, 143, 30) 33.33%,
    rgba(159, 152, 146)  33.33%,
    rgba(159, 152, 146)  66.66%,
    rgba(172, 89, 55) 66.66% 
  )!important; 
} 

/* poedertinten	fdb5b6	fcd39b	fcf3a8	bef9b7	9dfcfe */
.filter-item label.color-poedertinten:before,
.filter-item:hover label.color-poedertinten:before,
.filter-item input:checked~label.color-poedertinten:before {
  border-radius: 0;
  /* background: rgb(253, 181, 182) !important;
  background: linear-gradient(135deg, rgb(253, 181, 182) 15%, rgb(252, 211, 155) 35%, rgb(252, 243, 168) 50%,  rgb(190, 249, 183) 75%, rgb(157, 252, 254) 95%) !important; */

  background-image: linear-gradient(
  to left,
  rgb(253, 181, 182)  0%     20%,
  rgb(252, 211, 155)    20%    40%,
  rgb(252, 243, 168)  40%    60%,
  rgb(190, 249, 183)    60%    80%,
  rgb(157, 252, 254)    80%   100%
);
}

/* aardetinten	923401	b6701b	be8f01	4f6620	4f6620 */
.filter-item label.color-aardetinten:before,
.filter-item:hover label.color-aardetinten:before,
.filter-item input:checked~label.color-aardetinten:before {
  border-radius: 0;
  /* background: rgb(182, 112, 27) !important;
  background: linear-gradient(135deg, rgb(182, 112, 27) 15%, rgb(190, 143, 1) 35%,  rgb(79, 102, 32) 75%, rgb(79, 102, 32) 95%) !important; */

  background-image: linear-gradient(
  to left,
  rgb(182, 112, 27) 25%,
  rgb(190, 143, 1)   25% 50%,
  rgb(79, 102, 32)    50% 75%,
  rgb(79, 102, 32)   75%
);
}

/* vergrijsde tinten	a76a55	ae9775	908268	6a7a60	4b5a61 */
.filter-item label.color-vergrijsde-tinten:before,
.filter-item:hover label.color-vergrijsde-tinten:before,
.filter-item input:checked~label.color-vergrijsde-tinten:before {
  border-radius: 0;
  /* background: rgb(167, 106, 85) !important;
  background: linear-gradient(135deg, rgb(167, 106, 85) 15%, rgb(174, 151, 117) 35%, rgb(144, 130, 104) 50%,  rgb(106, 122, 96) 75%, rgb(75, 90, 97) 95%) !important; */

  background-image: linear-gradient(
    to left,
  rgb(167, 106, 85)  0%     20%,
  rgb(174, 151, 117)    20%    40%,
  rgb(144, 130, 104)  40%    60%,
  rgb(106, 122, 96)    60%    80%,
  rgb(75, 90, 97)    80%   100%
  );
}

/* signaalkleuren	d3023c	fb6c03	facf21	18a002	0444a6 */
.filter-item label.color-signaalkleuren:before,
.filter-item:hover label.color-signaalkleuren:before,
.filter-item input:checked~label.color-signaalkleuren:before {
  border-radius: 0;
  /* background: rgb(211, 2, 60) !important;
  background: linear-gradient(135deg, rgb(211, 2, 60) 15%, rgb(251, 108, 3) 35%, rgb(250, 207, 33) 50%,  rgb(24, 160, 2) 75%, rgb(4, 68, 166) 95%) !important; */

  background-image: linear-gradient(
    to left,
    rgb(211, 2, 60)  0%     20%,
    rgb(251, 108, 3)   20%    40%,
    rgb(250, 207, 33) 40%    60%,
    rgb(24, 160, 2)    60%    80%,
    rgb(4, 68, 166)    80%   100%
  );
} 

/* End color filters */