:root {


    --bgColor: #000;
    --bg1: #5d5e60;
    --bgdark: #5d5e60;
    --bgdarkf: #fff;
    --bgheader: #5d5e60;
    --gray: #5d5e60;
    --bg1f: white;
    --bg2: #000;
    --bg3: white;
    --bg3f: black;
    --bg2f: black;
    --orange: #f18c32;
    --mainColor: #fff;
    --primary: #eee;
    --borderColor: #666;
    --productTitle: #fff;
    --itemBorder: #000;
    --itemBorderHover: #000;
    --itemTitle: #0e0e0e;
    --itemTitleHover: #666;
    --white: #fff;
    --black: black;
    --red: red;
    --yellow: yellow;
    --bronze: #CD7F32;
    --silver: silver;
    --gray: gray;
    --blue: blue;
    --purple: purple;
}


.bgColored { background: rgb(0,255,33);
background: radial-gradient(circle, rgba(0,255,33,1) 0%, rgba(255,0,39,1) 58%, rgba(0,22,255,1) 100%, rgba(201,201,201,1) 100%);
}
.bgWhite {   background-color: var(--white); }
.bgBlack {   background-color: var(--black); }
.bgRed {     background-color: var(--red); }
.bgGreen {   background-color: var(--green); }
.bgBlue {    background-color: var(--blue); }
.bgYellow {  background-color: var(--yellow); }
.bgOrange {  background-color: var(--orange); }
.bgPurple {  background-color: var(--purple); }
.bgPink {    background-color: var(--pink); }
.bgBrown {   background-color: var(--brown); }
.colorPicker .bgGray,.bgGray {    background-color: var(--gray); }
.colorPicker .bgCyan, .bgCyan{    background-color: var(--cyan); }
.bgSinapis {    background-color: #E1AD01; }
.bgMagenta { background-color: var(--magenta); }

.bgMilky {   background-color: #e1d4bc; }
.bgNickel {  background-color: #727472; }
.bgBronze {  background-color: var(--bronze); }
.bgSilver {  background-color: #c0c0c0; }
.bgGold {    background-color: #ffd700; }
.bgPlatinum {background-color: #e5e4e2; }
.bgTeal {    background-color: #008080; }
.bgIndigo {  background-color: #4b0082; }
.bgMaroon {  background-color: #800000; }
.bgOlive {   background-color: #808000; }
.bgNavy {    background-color: #000080; }
.bgTurquoise {background-color: #40e0d0; }
.bgLavender { background-color: #e6e6fa; }
.bgBeige {    background-color: #f5f5dc; }
.bgPeach {    background-color: #ffdab9; }
.bgCoral {    background-color: #ff7f50; }
.bgCrimson {  background-color: #dc143c; }
.bgAzure {    background-color: #007fff; }
.bgMint {     background-color: #98ff98; }
.bgCharcoal { background-color: #36454f; }
.bgRose {     background-color: #ff007f; }
.bgSapphire { background-color: #0f52ba; }
.bgEmerald {  background-color: #50c878; }
.bgIvory {    background-color: #fffff0; }
.bgSand {     background-color: #c2b280; }

.bgWhite{    background-color: var(--white); }
.bgBlack{    background-color: var(--black); }
.bgRed{      background-color: var(--red); }
.bgMilky {   background-color:  #e1d4bc; }
.bgNickel {  background-color:  #727472; }
.bgBronze{    background-color: var(--bronze); }
.bgBronzeblack{   background: rgb(173,95,18);
                  background: linear-gradient(135deg, rgba(173,95,18,1) 30%, rgba(0,0,0,1) 90%);
}

.fBlack_gold{
  background-color: gold; 
background: linear-gradient(135deg, gold 30%, rgba(0,0,0,1) 90%);  
}
.bgShamenit{background-color: #f7e0bb;}
.bgShampania{background-color: #d3c5b4;}
.bgAmber{background-color: #cd753e;}
.bgGoldmatt{ background-color: #FFD700;}
.bgBrowny,.bgBrown{ background-color: brown;}
.bgBlackbrown{ background-color: brown;}
.bgMilky{ background-color: #f8f9fa;}
.bgGreen{ background-color: green;}
.bgLightgreen{ background-color: #a4d3a4;}
.bgBw{ background-color: black;}
.bgFleece{ background-color: #E1BC5F;}
.bgCream{ background-color: #FFFDD0;}
.bgRose,.bgRoze{  background-color: #ffc0cb;}
.bgCooper{
    background-color: #b87333;
}
.bgWood{
    background-color: brown;
}
.bgBrass{    background-color: #E1C16E; }
.bgSilver{    background-color: var(--silver); }
.bgYellow{    background-color: var(--Yellow); }
.bgGray{    background-color: var(--gray); }
.bgBlue{    background-color: var(--blue); }

.bgBasalt{ background-color: #575d5e;}
.bgGold{ background-color: gold;}
.bgBlack_gold{ background-color: gold; background: linear-gradient(135deg, gold 30%, rgba(0,0,0,1) 90%);}
.bgRozegold{ background-color: #B76E79;}
.bgCopper{ background-color: #72720d;}
.bgCoffee{ background-color: #6F4E37;}
.bgPnina{ background-color: white;}
.bgTransparent{ background: rgb(156,173,193); border:1px solid gray;
background: radial-gradient(circle, rgba(156,173,193,0) 0%, rgba(120,124,140,0.4251750016412815) 37%, rgba(156,173,193,0) 100%);}
.fWhiteblack{color:white;border:2px solid black;}
.fBlackwhite{color:black;border:2px solid white;}
.fWhite{    color: var(--white); }
.fWhitegold{    color: var(--white); border:2px solid Gold;}
.fWhitebrown{    color: var(--white); border:2px solid Brown;}
.fWhitebrass{    color: var(--white); border:2px solid #E1C16E;}
.fWhitegray{    color: var(--white); border:2px solid Gray;}
.fBlack{    color: var(--black); }
.fBlackgold{    color: var(--black);  border:2px solid Gold;}
.fRed{      color: var(--red); }
.fRedblue{      color: var(--red); border:2px solid blue;}
.fYellow{    color: var(--yellow); }
.fBronze{    color: var(--bronze); }
.fSilver{    color: var(--silver); }
.fGray{    color: var(--gray); }
.fLightgray{ color: #ccc;}
.fBlue{    color: var(--blue); }
.fPurple{    color: var(--purple); }
.fGray{ color: #00bbaa;}
.fGold{ color: gold;}
.fBrass{color: #b28c4f;}
.fGoldmatt{ color: gold;}
.fBronzeblack{ color: rgba(173,95,18,1);}
.fOrange{ color: Orange;}
.fBrowny{ color: brown;}
.fMilky{ color: #f8f9fa;}
.fGreen{ color: green;}
.fBw{ color: black;}
.fCopper{ color: #72720d;}
.fPnina{ color: white;}
.fTransparent{ color: transparent;}
.bgWhiteblack{background-color: white;border:2px solid black;}
.bgBlackwhite{background-color: black;border:2px solid white;}
.bgWhite{    background-color:  var(--white); }
.bgWhitegold{    background-color:  var(--white); border:2px solid Gold;}
.bgWhitebrown{    background-color:  var(--white); border:2px solid Brown;}
.bgWhitebrass{    background-color:  var(--white); border:2px solid #E1C16E;}
.bgWhitegray{    background-color:  var(--white); border:2px solid Gray;}
.bgBlack{    background-color:  var(--black); }
.bgBlackgold{    background-color:  var(--black);  border:2px solid Gold;}
.bgRed{      background-color:  var(--red); }
.bgRedblue{      background-color:  var(--red); border:2px solid blue;}
.bgYellow{    background-color:  var(--yellow); }
.bgBronze{    background-color:  var(--bronze); }
.bgSilver{    background-color:  var(--silver); }
.bgDarkgray{    background-color:  #5A5A5A; }
.bgLightgray{ background-color:  #ccc;}
.bgBlue{    background-color:  var(--blue); }

.bgGold{ background-color:  gold;}
.bgBrass{background-color:  #b28c4f;}
.bgGoldmatt{ background-color:  gold;}
.bgBronzeblack{ background-color:  rgba(173,95,18,1);}
.bgOrange{ background-color:  Orange;}
.bgBrowny{ background-color:  brown;}
.bgMilky{ background-color:  #f8f9fa;}
.bgGreen{ background-color:  green;}
.bgBw{ background-color:  black;}
.bgCopper{ background-color:  #72720d;}
.bgPnina{ background-color:  white;}
.bgTransparent{ background-color:  transparent;}
.bgPink{background-color: pink;}





.colorChecBox{
    width: 33px;
    height: 33px;
    margin: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: relative;
    opacity: 1;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    border: 1px solid #d7d4d4;
    cursor:pointer;
    -webkit-transition:all 1s ease-out;
    -moz-transition:all 1s ease-out;
    -ms-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
    transition:all 1s ease-out;
}
.colorChecBox.active{
    border:2px solid #eee;
}
.colorChecBox:after{
    content: ' ';
    height: 30px;
    width: 30px;
}

.colorChecBox.active:after{
    background: none;
    font-family: 'Line Awesome Free';
    font-weight: 900;
    font-size: 1.2rem;
    content: "\f00c";
    border: 1px solid white;
    text-align: center;
    color: white;
    text-shadow: 0 0 2px black;
}