.abr-cover-configurator__shape {
  height: 100%;
  width: 100%;
  clip-path: none;
  background-color: #fff;
  /*border:1px solid rgb(97, 97, 97);*/
  cursor: pointer;
}

.abr-cover-configurator__shape > div {
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  clip-path: none;
  background-color: grey;
  cursor: pointer;
  position: relative;
  left:1px;
  top:1px;
}

.abr-cover-configurator__shape > div > div {
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  clip-path: none;
  background-color: #EEEEEE;
  cursor: pointer;
  position: relative;
  left:1px;
  top:1px;
}

.abr-cover-configurator__shape:hover > div {
  filter: brightness(85%);
}


.abr-cover-configurator__shape--circle, .abr-cover-configurator__shape--circle > div,.abr-cover-configurator__shape--circle > div > div {
  border-radius: 50%;
}

.abr-cover-configurator__shape--ellipse-or-taper-ico {
  /*clip-path: path("M 20 0 Q 100 -30 180 0 Q 210 100 180 180 Q 100 210 20 180 Q -10 100 20 0 Z");*/
  /*border-radius: 10% / 50%;*/
}

.abr-cover-configurator__shape--ellipse-or-taper {
  transition: none!important;
}

.abr-cover-configurator__shape--ellipse-or-taper-ico {
  clip-path: path("M 5.55 5.55 Q 37 -5.55 68.45 5.55 Q 79.55 37 68.45 68.45 Q 37 79.55 5.55 68.45 Q -5.55 37 5.55 5.55 Z");
}

.abr-cover-configurator__shape--ellipse-or-taper-ico>div {
  clip-path: path("M 5.4 5.4 Q 36 -5.4 66.6 5.4 Q 77.4 36 66.6 66.6 Q 36 77.4 5.4 66.6 Q -5.4 36 5.4 5.4 Z");
}

.abr-cover-configurator__shape--ellipse-or-taper-ico>div>div {
  clip-path: path("M 5.25 5.25 Q 35 -5.25 64.75 5.25 Q 75.25 35 64.75 64.75 Q 35 75.25 5.25 64.75 Q -5.25 35 5.25 5.25 Z");
}


.abr-cover-configurator__shape--square {
  
}

.abr-cover-configurator__shape--rounded-square {
  border-radius: 20px;
}

.abr-cover-configurator__shape--rounded-square > div {
  border-radius: 19px;
}

.abr-cover-configurator__shape--rounded-square > div > div{
  border-radius: 18px;
}

.abr-cover-configurator__shape--rounded-square.abr-cover-configurator__technical-sketch__shape {
  border-radius: 28px;
}

.abr-cover-configurator__shape--one-cut-corner, .abr-cover-configurator__shape--one-cut-corner > div, .abr-cover-configurator__shape--one-cut-corner > div > div {
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}

.abr-cover-configurator__shape--one-cut-and-three-rounded-corners {
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
  border-radius: 20px;
}

.abr-cover-configurator__shape--one-cut-and-three-rounded-corners > div {
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
  border-radius: 19px;
}

.abr-cover-configurator__shape--one-cut-and-three-rounded-corners > div > div {
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
  border-radius: 18px;
}

.abr-cover-configurator__shape--one-cut-and-three-rounded-corners.abr-cover-configurator__technical-sketch__shape {
  border-radius: 28px;
}

.abr-cover-configurator__shape--two-cut-corners, .abr-cover-configurator__shape--two-cut-corners > div,.abr-cover-configurator__shape--two-cut-corners > div > div {
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 100% 100%, 0 100%);
}

.abr-cover-configurator__shape--two-cut-and-two-rounded-corners {
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 100% 100%, 0 100%);
  border-radius: 20px;
}

.abr-cover-configurator__shape--two-cut-and-two-rounded-corners > div {
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 100% 100%, 0 100%);
  border-radius: 19px;
}

.abr-cover-configurator__shape--two-cut-and-two-rounded-corners > div > div {
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 100% 100%, 0 100%);
  border-radius: 18px;
}

.abr-cover-configurator__shape--two-cut-and-two-rounded-corners.abr-cover-configurator__technical-sketch__shape {
  border-radius: 28px;
}

.abr-cover-configurator__shape--four-cut-corners {
  clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%,  15% 100%, 0% 85%, 0% 15%);
}

.abr-cover-configurator__shape--four-cut-corners > div {
  clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%,  15% 100%, 0% 85%, 0% 15%);
}

.abr-cover-configurator__shape--four-cut-corners > div > div {
  clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%,  14% 100%, 0% 86%, 0% 14%);
}

.abr-cover-configurator__shape--rectangle {
  width: 60%;
  
}

.abr-cover-configurator__shape--rectangle__parent {
  width: clamp(138px, 12vw, 180px)!important;
}

.abr-cover-configurator__shape--rectangle__parent .abr-cover-configurator__shape--rectangle {
  width: 100%;
}

.abr-cover-configurator__shape--rounded-rectangle {
  border-radius: 14px;
  width: 60%;
}

.abr-cover-configurator__shape--rounded-rectangle__parent {
  width: clamp(138px, 12vw, 180px)!important;
}

.abr-cover-configurator__shape--rounded-rectangle__parent .abr-cover-configurator__shape--rounded-rectangle {
  width: 100%;
}

.abr-cover-configurator__shape--rounded-rectangle > div {
  border-radius: 13px;
}

.abr-cover-configurator__shape--rounded-rectangle > div > div {
  border-radius: 12px;
}

.abr-cover-configurator__shape--rounded-rectangle.abr-cover-configurator__technical-sketch__shape {
  border-radius: 28px;
}

.abr-cover-configurator__shape--rectangle-cut-corners {
  width: 60%;
  clip-path: polygon(20% 0, 80% 0, 100% 13%, 100% 87%, 80% 100%,  20% 100%, 0% 87%, 0% 13%);
}

.abr-cover-configurator__shape--rectangle-cut-corners__parent {
  width: clamp(138px, 12vw, 180px)!important;
}

.abr-cover-configurator__shape--rectangle-cut-corners__parent .abr-cover-configurator__shape--rectangle-cut-corners {
  width: 100%;
}

.abr-cover-configurator__shape--rectangle-cut-corners > div {
  clip-path: polygon(20% 0, 80% 0, 100% 13%, 100% 87%, 80% 100%,  20% 100%, 0% 87%, 0% 13%);
}

.abr-cover-configurator__shape--rectangle-cut-corners > div > div {
  clip-path: polygon(19% 0, 81% 0, 100% 12%, 100% 88%, 81% 100%,  19% 100%, 0% 88%, 0% 12%);
}

.abr-cover-configurator__shape--octagon, .abr-cover-configurator__shape--octagon > div, .abr-cover-configurator__shape--octagon > div > div {
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%,  30% 100%, 0% 70%, 0% 30%);
}

.abr-cover-configurator__shape--hexagon {
  width: 88%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.abr-cover-configurator__shape--hexagon__parent {
  width: clamp(183px, 15.8vw, 236px)!important;
}

.abr-cover-configurator__shape--hexagon__parent .abr-cover-configurator__shape--hexagon {
  width: 100%;
}

.abr-cover-configurator__shape--hexagon > div,.abr-cover-configurator__shape--hexagon > div > div {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}