@tailwind base;
@tailwind components;
@tailwind utilities;
@import './icomoon/style.css'

.d-flex{display: flex}
.swatch .swatchLbl.color { width:30px; height:30px; }
.swatch .swatchLbl.color.medium { width:45px; height:60px; }
.swatch .swatchLbl.large { width:40px; height:40px; }
.swatch .swatchLbl.xlarge { width:70px; height:70px; }
.swatch .swatchLbl.rectangle { height:24px; min-width:35px; }
.swatch .swatchLbl.large:not(.color) { line-height:36px; }
.swatch .swatchLbl {
    color:#333; font-size:13px; font-weight:500; text-transform:uppercase; margin:0; min-width:30px; height:30px; overflow:hidden; text-align:center; background-color:#f5f5f5; padding:0 10px; border:1px solid #fff; box-shadow:0 0 0 1px #ddd; 
    background-repeat:no-repeat;background-position:50% 50%;background-size:100% auto; border-radius:0; display:flex;align-items:center;justify-content:center; -ms-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; cursor:pointer;
}
.swatch.swatches-image .swatchLbl { padding:0; background-repeat:no-repeat;background-position:50% 50%;background-size:100% auto; }
.swatch.swatches-image .swatchLbl.rectangle { height:45px; min-width:55px; }
.swatch.swatches-image .swatchLbl.top { background-position:top center; }
.swatch .swatchInput { display:none; }
.swatch.swatches-image .swatch-element{margin-right: 10px}
.swatch.swatches-image .swatch-element.active{border:2px solid;}
.swatch.swatches-image .swatch-element .peach { background-image:url(assets/images/products/swatches/top-peach-1.jpg); } 
.swatch.swatches-image .swatch-element .white { background-image:url(assets/images/products/swatches/top-white-1.jpg); }
.swatch.swatches-image .swatch-element .yellow { background-image:url(assets/images/products/swatches/yellow.jpg); }

{ display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-items:flex-end; align-items:flex-end; width:100%; }
.swatch { margin-bottom:10px; width: 100%; clear:both; }
.swatch .swatch-element .black { background-color:var(--main-color); }
.swatch .swatch-element .white { background-color:#fff; border:1px solid #ddd; }
.swatch .swatch-element .red { background-color:#fe0000; }
.swatch .swatch-element .blue { background-color:var(--main-color)0fe; }
.swatch .swatch-element .pink { background-color:#ffc1cc; }
.swatch .swatch-element .gray { background-color:#818181; }
.swatch .swatch-element .green { background-color:#027b02; }
.swatch .swatch-element .orange { background-color:#fca300; }
.swatch .swatch-element .yellow { background-color:#f9f900; }
.swatch .swatch-element .blueviolet { background-color:#8A2BE2; }
.swatch .swatch-element .brown { background-color:#A52A2A; }