.floorChooseCon {padding:20px 20px;margin:2rem 0rem;border-radius:10px;border:2px solid #efefef}
.floorChooseTitle {font-weight:bold;font-size:1.1rem;display:flex;gap:5px;align-items: center;gray;padding-bottom:4px;}
.floorChooseCon .floorChooseTitle {border-bottom: 4px solid;border-image: linear-gradient(to right,#F7BF29 18px, #efefef 0) 1;margin-bottom:0.7rem;}

.floorChoices {
    display: flex;
    flex-direction: column;
    gap: 12px;margin-top:16px;
    align-items:flex-start;
}




.floorChoicesRow {
    display: flex;
    flex-direction: row !important;
    gap: 12px; flex-wrap: wrap;
}

.floorChoice {display:flex;flex-direction: row;;gap:5px;margin:10px 0px;width:260px;position: relative;min-height:1.5rem}

.floorChoice label {display: flex;align-items: center;flex:0 0 140px}
.floorChoice input {display: flex;align-items: center;position:relative;flex:0 0 120px;width:100%;border:2px solid black;border-radius:5px;padding-left:5px;}
.floorChoice select {display: flex;align-items: center;position:relative;flex:0 0 120px;width:100%;border:2px solid black;border-radius:5px;}

.floorChoice select {  appearance: none;       /* Standard */
  -webkit-appearance: none; /* Safari, Chrome */
  -moz-appearance: none;    /* Firefox */
padding: 0px 4px;}
.floorChoice input::-webkit-outer-spin-button,
.floorChoice input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.floorChoice input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

.floorChoice[data-type=euro] input {padding-left:20px;}
.floorChoice[data-type=euro]::before {position:absolute;left:153px;font-weight:bold; content:'€';z-index:999;display:flex;align-items: center;height:34px;}

.floorChoicesRow .floorChoice{border:2px solid #efefef;border-radius:5px;     height: 32px;margin:0px;}
.floorChoicesRow .floorChoice button[data-label="itemid"] {cursor:pointer;display:flex;align-items: center;justify-content: left;background-color:transparent;border:0px;font-size:0.825rem;;font-weight:bold;text-transform:capitalize;font-weight:bold;position:absolute;left:0px;right:0px;top:0px;bottom:0px;}


.floorChoicesRow .floorChoice[data-status="true"] {border:2px solid black}
.floorChoice[data-status="true"]::after {position:absolute;top:0px;right:5px;width:24px;bottom:0px;content:' ';display: flex;align-items: center;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M9 22l-10-10.598 2.798-2.859 7.149 7.473 13.144-14.016 2.909 2.806z"/></svg>');background-repeat: no-repeat;background-position: center;}




  #svg { width: 100%; height: auto; display: block; background: repeating-conic-gradient(from 0deg, #ffffff 0% 25%, #ffffff 0% 50%) 50% / 24px 24px; border-radius: 0px;box-sizing: border-box;
max-height:450px;

}

  #svg g [data-corner] {fill:transparent !important;  stroke-width: 0  !important;  }
  #svg g[data-is-selected="true"] [data-corner] {fill:orange !important;}
  #svg g[data-is-selected="true"]>rect:first-child{
  stroke: orange;             /* stroke color */
  stroke-width: 2;         /* thickness */
  stroke-dasharray: 5 5;   /* dashed lines (pattern of 5px dash + 5px gap) */
  stroke-linecap: round;   /* shape of line ends: butt | round | square */
  stroke-linejoin: round; 
}
  #svg g[data-is-selected="true"]>polygon:first-child{
  stroke: orange;             /* stroke color */
  stroke-width: 2;         /* thickness */
  stroke-dasharray: 5 5;   /* dashed lines (pattern of 5px dash + 5px gap) */
  stroke-linecap: round;   /* shape of line ends: butt | round | square */
  stroke-linejoin: round; 
}


.localHandle[data-corner="tl"] {cursor:nw-resize}
.localHandle[data-corner="tr"] {cursor:ne-resize}
.localHandle[data-corner="bl"] {cursor:nesw-resize}
.localHandle[data-corner="br"] {cursor:nw-resize}

.localHandleRotate { 
  cursor: pointer;
}

#localBtnAddRec { cursor:pointer;background: linear-gradient(180deg, #0f8637, #0d6e32); border-color: #107948;color:white;border-radius:4px;border:0px;padding:8px 5px;margin-bottom:10px;white-space: nowrap;}
#localBtnAddRec::after {
  content: "";
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: white; /* square color */
  border-radius: 2px; /* optional: small rounding */
}

#localBtnAddTri { cursor:pointer;background: linear-gradient(180deg, #0f8637, #0d6e32); border-color: #107948;color:white;border-radius:4px;border:0px;padding:8px 5px;margin-bottom:10px;white-space: nowrap;}
#localBtnAddTri::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: white;
  /* cut it into a right triangle (full left & top sides, diagonal down-right) */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#localBtnDelete { cursor:pointer;background: linear-gradient(180deg, #d12643, #d43552); border-color: #8b2d2d;color:white;border-radius:4px;border:0px;padding:8px 5px;margin-bottom:10px;white-space: nowrap;}
#localBtnDelete::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' viewBox='0 0 24 24'><path d='M3 6h18v2H3V6zm2 3h14l-1.5 12.5a1 1 0 0 1-1 .5H8a1 1 0 0 1-1-.5L5 9zm5 2v8h2v-8h-2zm4 0v8h2v-8h-2zM9 4h6v2H9V4z'/></svg>");
}

#localBtnDelete  {display:none}
#localBtnDelete[data-show="true"] {display:block}

.localResultCircle {width:160px;height:160px;border-radius: 80px;display:flex;align-items: center;justify-content: center;border:12px solid silver;position:relative;flex-direction: column;}
.localResultCircle div {font-size:0.75rem;display:flex;width:100%;justify-content: center;text-align: center;}
.localResultCircle span {font-weight:bold;font-size:1.3rem;}
.localResultCircle[data-after=m2] span::after{content:' m²'}
.localResultCircle[data-before=euro] span::before{content:'€ '}


.floorExtraInfo {display:flex;width:16px;height:16px;background-image: url('data:image/svg+xml,<svg style="width:16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>');
}