/* one color */
.products-color-:after,
.products-color-no-color:after {
    background-color: #f1f1f1;
    border: 1px solid #e0e0e0;
}
.products-color-:before,
.products-color-no-color:before {
    content: '?';
    color: #999999;
    position: absolute;
    z-index: 10;
    left: 12px;
    top: 6px;
}
.products-color-multicolor:after {
    background-image: linear-gradient( 90deg,
    red 0%,
    orange 15%,
    yellow 30%,
    green 45%,
    skyblue 60%,
    blue 85%,
    darkviolet 100%);
}
.products-color-anthracite:after {
    background-color: #464451;
}
.products-color-beige:after {
    background-color: #F5F5DC;
}
.products-color-black:after {
    background-color: #000000;
}
.products-color-blue:after {
    background-color: blue;
}
.products-color-blue-dark:after {
    background-color: darkblue;
}
.products-color-blue-deep-ocean:after {
    background-color: #06476A;
}
.products-color-blue-denim:after {
    background-color: #1560bd;
}
.products-color-blue-cobalt:after {
    background-color: #030aa7;
}
.products-color-blue-fog:after {
    background-color: #0f52b2;
}
.products-color-blue-titanium:after {
    background-color: #5b798e;
}
.products-color-brown:after {
    background-color: brown;
}
.products-color-brown-dark:after {
    background-color: #654321;
}
.products-color-brown-light:after {
    background-color: #cd853f;
}
.products-color-cashmere:after {
    background-color: #e6bea5;
}
.products-color-cherry:after {
     background-color: #bb1e4b;
 }
.products-color-celadon:after {
    background-color: #ACE1AF;
}
.products-color-champagne:after {
    background-color: #F7E7CE;
}
.products-color-chocolate:after {
    background-color: #873c2d;
}
.products-color-coral:after {
    background-color: coral;
}
.products-color-cream:after {
    background-color: #fdf4e3;
    border: 1px solid #e0e0e0;
}
.products-color-grey:after {
    background-color: #808080;
}
.products-color-grey-dark:after {
    background-color: #696969;
}
.products-color-grey-light:after {
    background-color: #d3d3d3;
}
.products-color-grey-slate:after {
    background-color: #59656d;
}
.products-color-grey-titanium:after {
    background-color: #545b62;
}
.products-color-grey-storm:after {
    background-color: #717486;
}
.products-color-grey-eclipse:after {
    background-color: #3f3939;
}
.products-color-graphite:after {
    background-color: #251607;
}
.products-color-graphite-grey:after {
    background-color: #474a50;
}
.products-color-green:after {
    background-color: #008000;
}
.products-color-green-brave:after {
    background-color: #00e676;
}

.products-color-green-light:after {
    background-color: #00ff7f;
}
.products-color-green-mint:after {
    background-color: #A2E4B8;
}

.products-color-green-ocean:after {
    background-color: #3d9973;
}

.products-color-greensky:after {
    background-color: #77dde7;
}

.products-color-ivory:after {
    background-color: #fffff0;
}

.products-color-khaki:after {
    background-color: #8b864e;
}

.products-color-magnolia:after {
    background-color: #F8F4FF;
    border: 1px solid #e0e0e0;
}

.products-color-lilac:after {
    background-color: #c48efd;
}

.products-color-onyx:after {
    background-color: #353935;
}
.products-color-onyx-grey:after {
    background-color: #464544;
}

.products-color-olive:after {
    background-color: #6b8e23;
}

.products-color-orange:after {
     background-color: orange;
 }

.products-color-peach:after {
    background-color: #FFE5B4;
}

.products-color-pink:after {
    background-color: pink;
}

.products-color-purple:after {
    background-color: #943391;
}


.products-color-red:after {
    background-color: red;
}
.products-color-red-chili:after {
    background-color: #EB283E;
}
.products-color-red-dark:after {
    background-color: #b22222;
}
.products-color-red-maroon:after {
    background-color: #800000;
}

.products-color-sahara:after {
    background-color: #f1e788;
}

.products-color-skyblue:after {
    background-color: DeepSkyBlue;
}
.products-color-starlight:after {
    background-color: #F8F9EC;
}
.products-color-teal:after {
    background-color: #2E9F90;
}
.products-color-terracotta:after {
    background-color: #CC4E5C;
}
.products-color-turquoise:after {
    background-color: turquoise;
}

.products-color-umber:after {
    background-color: #b26400;
}

.products-color-violet:after {
    background-color: #8B00FF;
}

.products-color-white:after {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
}

.products-color-yellow:after {
    background-color: yellow;
}

/* one+ colors */

.products-color-bronze:after {
    background-image: linear-gradient(135deg, #FEC163 10%, #DE4313 100%);
}

.products-color-camouflage:after {
    background: radial-gradient(circle, #a0ab59 40%, transparent 41%),radial-gradient(circle at bottom left, #a0ab59 20%, transparent 21%),radial-gradient(circle at bottom right, #a0ab59 20%, transparent 21%),radial-gradient(circle at top left, #a0ab59 20%, transparent 21%),radial-gradient(circle at top right, #a0ab59 20%, transparent 21%);
    background-size: 2.5em 2.5em;
    background-color: #6c7087;
    opacity: 1
}

.products-color-copper:after {
    background-image: linear-gradient(135deg, #e7c6a8 10%, #b87333 100%);
}

.products-color-gold:after {
    background-image: linear-gradient(135deg, #ffe259 30%, #ffa751 100%);
}
.products-color-goldrose:after {
    background: linear-gradient(135deg,#ffffff 10%,#ed9277 100%);
}

.products-color-midnight:after {
    background: linear-gradient(180deg,#23379a,#09133c);
}

.products-color-platinum:after {
    background-image: linear-gradient(135deg, #edebea 30%,  #aca49c 100%);
}

.products-color-silver:after {
    background-image: linear-gradient(135deg, #f0f4f7 30%,  #b0c1cb 100%);
}
.products-color-stainless-steel:after {
    background: #f5f6f6;
    background: linear-gradient(135deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
}
.products-color-wood-dark:after {
    background: repeating-radial-gradient(circle, #924E00, transparent 10%);
    background-size: 3em 3em;
    background-color: #AD7D20;
}
.products-color-wood:after {
    background: repeating-radial-gradient(circle, #ee5522, transparent 13%);
    background-size: 3em 3em;
    background-color: #e9b95c;
}
.products-color-wood-light:after {
    background: repeating-radial-gradient(circle, #ee5522, transparent 11%);
    background-size: 3em 3em;
    background-color: #e9b95c;
    opacity: 0.6;
}

/* two colors */
.products-color-white-red:after {
    background: linear-gradient(to bottom right, white 50%, red 0%);
}
.products-color-white-green:after {
    background: linear-gradient(to bottom right, white 50%, green 0%);
}
.products-color-white-skyblue:after {
    background: linear-gradient(to bottom right, white 50%, DeepSkyBlue 0%);
}
.products-color-white-beige:after {
    background: linear-gradient(to bottom right, white 50%, #F5F5DC 0%);
}
.products-color-white-brown:after {
    background: linear-gradient(to bottom right, white 50%, brown 0%);
}
.products-color-white-orange:after {
    background: linear-gradient(to bottom right, white 50%, orange 0%);
}
.products-color-white-pink:after {
    background: linear-gradient(to bottom right, white 50%, HotPink 0%);
}
.products-color-white-green-light:after {
    background: linear-gradient(to bottom right, white 50%, lime 0%);
}
.products-color-white-grey:after {
    background: linear-gradient(to bottom right, white 50%, grey 0%);
}
.products-color-white-blue:after {
    background: linear-gradient(to bottom right, white 50%, blue 0%);
}
.products-color-white-black:after {
    background: linear-gradient(to bottom right, white 50%, black 0%);
}
.products-color-white-cream:after {
    background: linear-gradient(to bottom right, white 50%, #fdf4e3 0%);
}
.products-color-white-gold:after {
    background: linear-gradient(to bottom right, white 50%, #ffe259 50%, #ffe259 65%, #ffa751 100%);
}
.products-color-white-copper:after {
    background-image: linear-gradient(to bottom right, white 50%, #e7c6a8 50%, #e7c6a8 10%, #b87333 100%);
}

.products-color-white-violet:after {
    background: linear-gradient(to bottom right, white 50%, #8B00FF 0%);
}
.products-color-white-yellow:after {
    background: linear-gradient(to bottom right, white 50%, yellow 0%);
}

.products-color-yellow-gold:after {
    background: linear-gradient(to bottom right, yellow 50%, #ffe259 50%, #ffe259 65%, #ffa751 100%);
}
.products-color-yellow-blue:after {
    background: linear-gradient(to bottom right, yellow 50%, blue 0%);
}
.products-color-yellow-grey:after {
    background: linear-gradient(to bottom right, yellow 50%, grey 0%);
}
.products-color-yellow-pink:after {
    background: linear-gradient(to bottom right, yellow 50%, pink 0%);
}
.products-color-yellow-violet:after {
    background: linear-gradient(to bottom right, yellow 50%, #8B00FF 0%);
}

.products-color-green-pink:after {
    background: linear-gradient(to bottom right, green 50%, pink 0%);
}
.products-color-green-blue:after {
    background: linear-gradient(to bottom right, green 50%, blue 0%);
}
.products-color-green-black:after {
    background: linear-gradient(to bottom right, green 50%, black 0%);
}
.products-color-green-skyblue:after {
    background: linear-gradient(to bottom right, green 50%, skyblue 0%);
}
.products-color-green-violet:after {
    background: linear-gradient(to bottom right, green 50%, #8B00FF 0%);
}
.products-color-green-yellow:after {
    background: linear-gradient(to bottom right, green 50%, yellow 0%);
}
.products-color-brown-black:after {
    background: linear-gradient(to bottom right, brown 50%, black 0%);
}

.products-color-brown-blue:after {
    background: linear-gradient(to bottom right, brown 50%, blue 0%);
}
.products-color-brown-pink:after {
    background: linear-gradient(to bottom right, brown 50%, pink 0%);
}

.products-color-red-orange:after {
    background: linear-gradient(to bottom right, red 52%, orange 0%);
}

.products-color-red-yellow:after {
    background: linear-gradient(to bottom right, red 52%, yellow 0%);
}
.products-color-red-black:after {
    background: linear-gradient(to bottom right, red 50%, black 0%);
}
.products-color-red-gold:after {
    background: linear-gradient(to bottom right, red 50%, #ffe259 50%, #ffe259 65%, #ffa751 100%);
}
.products-color-red-grey:after {
    background: linear-gradient(to bottom right, red 50%, grey 0%);
}
.products-color-pink-gold:after {
    background: linear-gradient(to bottom right, pink 50%, #ffe259 50%, #ffe259 65%, #ffa751 100%);
}

.products-color-blue-silver:after {
    background: linear-gradient(to bottom right, blue 50%, #f0f4f7 65%,  #b0c1cb 100%);
}

.products-color-gold-silver:after {
    background: linear-gradient(to bottom right, #ffe259 15%, #ffa751 50%, #f0f4f7 50%, #f0f4f7 65%,  #b0c1cb 100%);
}


.products-color-stainless-steel-beige:after {
    background: linear-gradient(to bottom right, #f5f6f6 0%,#dbdce2 10%,#b8bac6 25%,#dddfe3 42%,#f5f6f6 55%, #F5F5DC 0%);
}

.products-color-stainless-steel-white:after {
    background: linear-gradient(to bottom right, #f5f6f6 0%,#dbdce2 10%,#b8bac6 25%,#dddfe3 42%,#f5f6f6 55%, white 0%);
}

.products-color-stainless-steel-copper:after {
    background: linear-gradient(to bottom right, #f5f6f6 0%,#dbdce2 10%,#b8bac6 25%,#dddfe3 42%,#f5f6f6 50%, #b87333 0%);
}

.products-color-stainless-steel-grey:after {
    background: linear-gradient(to bottom right, #f5f6f6 0%,#dbdce2 10%,#b8bac6 25%,#dddfe3 42%,#f5f6f6 50%, grey 0%);
}

.products-color-stainless-steel-black:after {
    background: linear-gradient(to bottom right, #f5f6f6 0%,#dbdce2 10%,#b8bac6 25%,#dddfe3 42%,#f5f6f6 50%, black 0%);
}
.products-color-stainless-steel-brown:after {
    background: linear-gradient(to bottom right, #f5f6f6 0%,#dbdce2 10%,#b8bac6 25%,#dddfe3 42%,#f5f6f6 50%, brown 0%);
}


.products-color-orange-green:after {
    background: linear-gradient(to bottom right, orange 50%, green 0%);
}
.products-color-orange-silver:after {
    background: linear-gradient(to bottom right, orange 50%, #f0f4f7 65%,  #b0c1cb 100%);
}
.products-color-orange-grey:after {
    background: linear-gradient(to bottom right, orange 50%, grey 0%);
}
.products-color-orange-black:after {
    background: linear-gradient(to bottom right, orange 50%, black 0%);
}

.products-color-orange-pink:after {
    background: linear-gradient(to bottom right, orange 50%, pink 0%);
}
.products-color-orange-skyblue:after {
    background: linear-gradient(to bottom right, orange 50%, skyblue 0%);
}
.products-color-orange-violet:after {
    background: linear-gradient(to bottom right, orange 50%, #8B00FF 0%);
}

.products-color-silver-red:after {
    background: linear-gradient(to bottom right, #f0f4f7 20%,  #b0c1cb 50%, red 0%);
}

.products-color-silver-black:after {
    background: linear-gradient(to bottom right, #f0f4f7 20%,  #b0c1cb 50%, black 0%);
}
.products-color-silver-white:after {
    background: linear-gradient(to bottom right, #f0f4f7 20%,  #b0c1cb 50%, white 0%);
}
.products-color-silver-grey:after {
    background: linear-gradient(to bottom right, #f0f4f7 20%,  #b0c1cb 50%, grey 0%);
}

.products-color-silver-green:after {
    background: linear-gradient(to bottom right, #f0f4f7 20%,  #b0c1cb 50%, green 0%);
}

.products-color-grey-green:after {
    background: linear-gradient(to bottom right, grey 50%, green 0%);
}
.products-color-grey-beige:after {
    background: linear-gradient(to bottom right, grey 50%, #F5F5DC 0%);
}
.products-color-grey-brown:after {
    background: linear-gradient(to bottom right, grey 50%, brown 0%);
}
.products-color-grey-blue:after {
    background: linear-gradient(to bottom right, grey 50%, blue 0%);
}
.products-color-grey-black:after {
    background: linear-gradient(to bottom right, grey 50%, black 0%);
}
.products-color-grey-pink:after {
    background: linear-gradient(to bottom right, grey 50%, pink 0%);
}
.products-color-grey-salad:after {
    background: linear-gradient(to bottom right, grey 50%, #00ff7f 0%);
}
.products-color-grey-violet:after {
    background: linear-gradient(to bottom right, grey 50%, #8B00FF 0%);
}
.products-color-blue-red:after {
    background: linear-gradient(to bottom right, blue 50%, red 0%);
}

.products-color-blue-orange:after {
    background: linear-gradient(to bottom right, blue 50%, orange 0%);
}

.products-color-blue-pink:after {
    background: linear-gradient(to bottom right, blue 50%, pink 0%);
}

.products-color-blue-violet:after {
    background: linear-gradient(to bottom right, blue 50%, #8B00FF 0%);
}

.products-color-blue-black:after {
    background: linear-gradient(to bottom right, blue 50%, black 0%);
}

.products-color-violet-pink:after {
    background: linear-gradient(to bottom right, #8B00FF 50%, pink 0%);
}

.products-color-black-beige:after {
    background: linear-gradient(to bottom right, black 50%, #F5F5DC 0%);
}
.products-color-black-skyblue:after {
    background: linear-gradient(to bottom right, black 50%, DeepSkyBlue 0%);
}
.products-color-black-gold:after {
    background: linear-gradient(to bottom right, black 50%, #ffe259 50%, #ffe259 65%, #ffa751 100%);
}
.products-color-black-copper:after {
    background: linear-gradient(to bottom right, black 50%, #e7c6a8 50%, #e7c6a8 10%, #b87333 100%);
}
.products-color-black-yellow:after {
    background: linear-gradient(to bottom right, black 50%, yellow 0%);
}
.products-color-black-pink:after {
    background: linear-gradient(to bottom right, black 50%, pink 0%);
}
.products-color-black-purple:after {
    background: linear-gradient(to bottom right, black 50%, #943391 0%);
}
.products-color-black-grey-light:after {
    background: linear-gradient(to bottom right, black 50%, #d3d3d3 0%);
}
.products-color-black-turquoise:after {
    background: linear-gradient(to bottom right, black 50%, turquoise 0%);
}
.products-color-black-violet:after {
    background: linear-gradient(to bottom right, black 50%, #8B00FF 0%);
}

/* three colors */

.products-color-orange-blue-black:after {
    background: conic-gradient(orange 33%, blue 33%, blue 66%, black 66%);
}
.products-color-black-white-red:after {
    background:  conic-gradient(from 45deg, black 33%, white 33%, white 66%,  red 66%);
}
.products-color-black-white-grey:after {
    background:  conic-gradient(from 45deg, black 33%, white 33%, white 66%,  #808080 66%);
}
.products-color-white-red-yellow:after {
    background:  conic-gradient(from 45deg, white 33%, red 33%, red 66%,  yellow 66%);
}


/* four colors*/

.products-color-black-red-blue-green,
.products-color-blue-red-white-black{
    position: relative;
}
.products-color-black-red-blue-green:after,
.products-color-blue-red-white-black:after{
    content: '';
    border-radius: 50%;
    border: 1px solid #ebebeb;
    position: absolute;
    height: 24px;
    width: 24px;
}



.products-color-black-red-blue-green:after {
    background: conic-gradient(black 25%, red 25%, red 50%, blue 50%, blue 75%, green 75%);
}
.products-color-blue-red-white-black:after {
    background: conic-gradient(from 45deg, blue 25%, red 25%, red 50%,  white 50%, white 75%, black 75%);
}
.products-color-blue-red-white-green:after {
    background: conic-gradient(from 45deg, blue 25%, red 25%, red 50%,  white 50%, white 75%, green 75%);
}
.products-color-white-skyblue-black-pink:after {
    background: conic-gradient(from 45deg, white 25%, skyblue 25%, skyblue 50%,  black 50%, black 75%, pink 75%);
}