section {margin-top:1rem; background: white; border:1px solid #e5e7eb; border-radius: 5px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04);margin-bottom:1rem; }
section h2 {margin-top:0px;margin-bottom:12px;font-size:1.2rem;font-weight:bold;}

@media (max-width: 600px) {
  section{  padding: 0px;border:0px;box-shadow:0px 0px 0px white}
  section h2 {margin-top:2rem;margin-bottom:6px;font-size:1.2rem;font-weight:bold;}
}



#localAddAppliance {display:flex;margin-top:12px;gap:10px;flex-wrap: wrap;}

.local_user__defaults {display:grid;grid-template-columns: 130px 110px 1fr;gap:10px;}
@media (max-width: 600px) {
  .local_user__defaults {grid-template-columns: 1fr 1fr;gap:10px; }
  .local_user__defaults > *:nth-child(3n) {
    grid-column: 1 / -1;
    margin-bottom:6px;
    text-align: right;
    display:none;
  }
}

#localTotals .local_total__items {display:flex;gap:20px; flex-wrap: wrap;}
#localTotals .local_total__items>*{width: calc(50% - 10px); align-items: center;display:flex;flex-direction: column;}
#localTotals .local-total__description {color:gray;margin-top:6px;}

#localTotals .local_total__item>div:first-child {
  z-index:0;
  position: relative;
  background-color:#efefef;
  border-radius:150px;
  width:280px;
  height:280px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#localTotals .local_total__icon{  position: absolute;top:0px;left:0px;width:100%;height:100%;  background-position: center ;
  background-repeat: no-repeat ;
  --padY: 20px;  
  --local-percentage: 90%;
  --color-top: var(--local-color);
  --color-bottom: #B5B5B5;

  background:
    linear-gradient(
      to top,
      var(--color-top) var(--local-percentage),
      var(--color-bottom) var(--local-percentage),
      var(--color-bottom) 100%
    );
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

}
  
#localTotals .local_total__amount {z-index:1;font-weight:bold;font-size: 1.5rem;color:white; }
#localTotals .local_total__unit {z-index:1;padding-left:5px;font-size:0.8rem;color:white;}


/* The element you target must have dimensions */
#localTotals [data-local-icon="tree"] .local_total__icon{
  /* Use the SVG as a mask (so the gradient shows in the shape) */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M13 24h-2v-5.126c-.806-.208-1.513-.661-2.039-1.274-.602.257-1.265.4-1.961.4-2.76 0-5-2.24-5-5 0-1.422.595-2.707 1.55-3.617-.348-.544-.55-1.19-.55-1.883 0-1.878 1.483-3.413 3.341-3.496.823-2.332 3.047-4.004 5.659-4.004 2.612 0 4.836 1.672 5.659 4.004 1.858.083 3.341 1.618 3.341 3.496 0 .693-.202 1.339-.55 1.883.955.91 1.55 2.195 1.55 3.617 0 2.76-2.24 5-5 5-.696 0-1.359-.143-1.961-.4-.526.613-1.233 1.066-2.039 1.274v5.126z"/></svg>') no-repeat center / contain;
  -webkit-mask-size: calc(100% - 0px) calc(100% - (var(--padY) * 2));

  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M13 24h-2v-5.126c-.806-.208-1.513-.661-2.039-1.274-.602.257-1.265.4-1.961.4-2.76 0-5-2.24-5-5 0-1.422.595-2.707 1.55-3.617-.348-.544-.55-1.19-.55-1.883 0-1.878 1.483-3.413 3.341-3.496.823-2.332 3.047-4.004 5.659-4.004 2.612 0 4.836 1.672 5.659 4.004 1.858.083 3.341 1.618 3.341 3.496 0 .693-.202 1.339-.55 1.883.955.91 1.55 2.195 1.55 3.617 0 2.76-2.24 5-5 5-.696 0-1.359-.143-1.961-.4-.526.613-1.233 1.066-2.039 1.274v5.126z"/></svg>') no-repeat center / contain;
  mask-size: calc(100% - 0px) calc(100% - (var(--padY) * 2));
}

#localTotals [data-local-icon="coin"] .local_total__icon{
    background-size:auto;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="100" height="100" viewBox="0 0 24 24"><path d="M17 12c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.687 6-6-2.687-6-6-6z"/><path transform="translate(17.5,20.474)" d="m1.624-10.179c1.132-.223 2.162-.626 2.876-1.197v.652c0 .499-.386.955-1.007 1.328-.581-.337-1.208-.6-1.869-.783z"/><path transform="translate(17.093,2.491)" d="m-11.093 13.009c1.445 0 2.775-.301 3.705-.768.311-.69.714-1.329 1.198-1.899-.451-1.043-2.539-1.833-4.903-1.833-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25z"/><path transform="translate(6.093,13.491)" d="m4.003 8.531c-.919.59-2.44.978-4.096.978-2.672 0-5-1.007-5-2.25v-.652c1.146.918 3.109 1.402 5 1.402 1.236 0 2.499-.211 3.549-.611.153.394.336.773.547 1.133z"/><path transform="translate(10.096,22.022)" d="m-9.096-3.772v-.651c1.146.917 3.109 1.401 5 1.401 1.039 0 2.094-.151 3.028-.435.033.469.107.926.218 1.37-.888.347-2.024.565-3.246.565-2.672 0-5-1.007-5-2.25z"/><path transform="translate(1,18.25)" d="m0-2.5v-.652c1.146.918 3.109 1.402 5 1.402 1.127 0 2.275-.176 3.266-.509-.128.493-.21 1.002-.241 1.526-.854.298-1.903.483-3.025.483-2.672 0-5-1.007-5-2.25z"/><path transform="translate(19.124,12.695)" d="m-2.124-5.795c2.673 0 5-1.007 5-2.25s-2.327-2.25-5-2.25c-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25z"/><path transform="translate(12,4.75)" d="m0 5v-.652c.713.571 1.744.974 2.876 1.197-.661.183-1.287.446-1.868.783-.622-.373-1.008-.829-1.008-1.328z"/><path transform="translate(12,9.75)" d="m0-2.5v-.651c1.146.917 3.109 1.401 5 1.401 1.892 0 3.854-.484 5-1.401v.651c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25z"/></svg>');  
    background-position: center bottom 5px; ;
}

#localTotals [data-local-icon="coin"]  {
    --local-percentage: 90%;
    --color-top: var(--local-color);
    --color-bottom: #B5B5B5;

    background-image: linear-gradient(
    to top,            /* Direction: bottom to top */
    var(--color-top) 0%,            /* Color 1 starts at the bottom (0%) */
    var(--color-top) var(--local-percentage),           /* Color 1 ends exactly at 50% */
    var(--color-bottom) var(--local-percentage),          /* Color 2 starts exactly at 50% */
    var(--color-bottom) 100%          /* Color 2 ends at the top (100%) */
  );
  border:15px solid #efefef;}



#localTotals [data-local-icon="power"] .local_total__icon{
  /* Use the SVG as a mask (so the gradient shows in the shape) */
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="230" height="230" viewBox="0 0 24 24"><defs><linearGradient id="fillGradient" x1="100%" y1="0%" x2="0%" y2="0%"><!-- First color: 0–40% --><stop offset="20%" stop-color="%23999999" /><!-- Second color: 40–100% --><stop offset="20%" stop-color="%2300ad54" /><stop offset="100%" stop-color="%2300ad54" /></linearGradient></defs><g transform="rotate(270 12 12)"><path fill="url(%23fillGradient)"  d="M21 6h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6z"/></g></svg>') no-repeat center / contain;
  -webkit-mask-size: calc(100% - 0px) calc(100% - (var(--padY) * 2));

  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="230" height="230" viewBox="0 0 24 24"><defs><linearGradient id="fillGradient" x1="100%" y1="0%" x2="0%" y2="0%"><!-- First color: 0–40% --><stop offset="20%" stop-color="%23999999" /><!-- Second color: 40–100% --><stop offset="20%" stop-color="%2300ad54" /><stop offset="100%" stop-color="%2300ad54" /></linearGradient></defs><g transform="rotate(270 12 12)"><path fill="url(%23fillGradient)"  d="M21 6h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6z"/></g></svg>') no-repeat center / contain;
  mask-size: calc(100% - 0px) calc(100% - (var(--padY) * 2));
}



#localTotals [data-local-icon="payback"] .local_total__icon{
    background-size:auto;
  background-image: url('data:image/svg+xml,<svg width="230" height="230" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5,14 c-0.3,0.5-0.9,0.6-1.4,0.4 l-2.6-1.5 C11.2,12.7,11,12.4,11,12 V7 c0-0.6,0.4-1,1-1 s1,0.4,1,1 v4.4 l2.1,1.2 C15.6,12.9,15.7,13.5,15.5,14z" fill="%23EFEFEF" stroke="%23EFEFEF" stroke-width="0.5" /></svg>');
    background-position: center bottom 5px; ;
}
#localTotals [data-local-icon="payback"]   .local_total__amount {margin-top:110px;}
#localTotals [data-local-icon="payback"]  {
    --local-percentage: 90%;
    --color-top: var(--local-color);
    --color-bottom: #B5B5B5;

    background-image: linear-gradient(
    to top,            /* Direction: bottom to top */
    var(--color-top) 0%,            /* Color 1 starts at the bottom (0%) */
    var(--color-top) var(--local-percentage),           /* Color 1 ends exactly at 50% */
    var(--color-bottom) var(--local-percentage),          /* Color 2 starts exactly at 50% */
    var(--color-bottom) 100%          /* Color 2 ends at the top (100%) */
  );
  border:15px solid #efefef;}


@media (max-width: 600px) {
  #localTotals .local_total__items {display:flex;justify-content: center;flex-direction: column;}
  #localTotals .local_total__items>*{align-items: center;display:flex;flex-direction: column;width:100%}
}


#localTotalsText {border-radius:210px;width:420px;height:420px;border:20px solid #efefef;background-color:#00ad54; font-weight:bold;color:white;font-size:1.2rem;display: flex; align-items: center;flex-direction: column;justify-content: center;position:relative;}
#localTotalsText div {font-size:1rem;font-weight:bold}
#localTotalsText localLine {border-left:10px dashed #ffffff;position: absolute;left:50%;top:10px;bottom:10px;}

#localTotalsText>div:nth-child(2){display:flex;flex-direction: row;;gap:0px;}
#localTotalsText>div:nth-child(2)>div:first-child {align-items: stretch;display:flex;flex-direction: column;gap:10px;}
#localTotalsText>div:nth-child(2)>div:first-child>div {justify-content: right;display:flex;padding-right:20px;color:#006A33}
#localTotalsText>div:nth-child(2)>div:last-child {align-items: stretch;display:flex;flex-direction: column;gap:10px;}
#localTotalsText>div:nth-child(2)>div:last-child>div {justify-content: left;display:flex;padding-left:20px;color:white}


#localDifferencesTable { width:100%; border-collapse: collapse; margin-top:24px;}
#localDifferencesTable th, #localDifferencesTable td {  text-align: left; vertical-align: top; border: 1px solid #e5e7eb; }
#localDifferencesTable th {background-color:#4e555a;color:white;font-weight:bold;padding: 4px 8px;border:0px;font-style: italic;}
#localDifferencesTable ul {margin-top:0px;margin-left:-15px;}

#localAppliancesTable { width:100%;  }
#localAppliancesTable [data-local-type="row"] {display:grid;grid-template-columns: 200px 1fr;gap:0x;  margin-bottom:24px;
  background: linear-gradient(
    to right,
    #efefef 200px,    /* 1st column color start */
    white 200px    /* rest (3rd column) */
  );
}
#localAppliancesTable [data-local-type="row"]>div:nth-child(odd) {color:black}
#localAppliancesTable [data-local-type="row"]>div:nth-child(even) {border-bottom:1px solid #efefef; }
#localAppliancesTable [data-local-type="row"]>div {display:flex;align-items: center;;  }
#localAppliancesTable [data-local-type="row"] [datal-type="label"] {padding-left:6px;}

#localAppliancesTable input,#localAppliancesTable select {padding-left:10px;border:0px;width:150px;height:36px !important; line-height:36px !important;background-color: transparent;}
#localAppliancesTable select {padding-left:8px;font-weight:bold;}
#localAppliancesTable input {padding-left:12px;font-weight:bold;}
#localAppliancesTable .local-input-container[data-label*="euro"] input {padding-left:18px !important; text-align: right;padding-right:94px;}


.local-input-container {
  position: relative;
  width:100%;
}
.local-input-container input[type="number"]::-webkit-outer-spin-button,
.local-input-container input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.local-input-container input {
    border:1px solid silver;
    font-weight:bold;
    height:32px;
    width: 110px;;
    padding:0px 6px 0px 6px  ;    
    text-align: right;

}
.local-input-container:focus-within input {background-color:#00ad54 !important;color:white;}
[data-key="modus"]:focus {background-color:#00ad54 !important;color:white;}

.local-input-container:focus-within::before {color:white !important;} 
.local-input-container:focus-within::after {color:white !important;} 

.local-input-container::before {
    font-weight:bold;
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
    max-width:50px;
    word-break: break-word;

}
.local-input-container::after {
  font-size:0.6rem;
  color:gray;

  position: absolute;
left:60px;
top:0px;
bottom:0px;
display:flex;
align-items: center;
justify-content: left;

    width:60px;
    word-break: break-word;
      line-height:0.7rem !important;
      text-align:right;

}
.local-input-container[data-label]::after {padding:0px 4px !important;}



.local-input-container[data-label*="text"] input {width:110px;text-align: left;;}


/* Global price settings */
.local-input-container[data-label*="basis"] input {width:100px;border-radius:5px;}
.local-input-container[data-label*="basis"]::after  {left:55px;}
.local-input-container[data-label*="basiseurokwh"]::after {content: "kwh";}
.local-input-container[data-label*="basiseurokwh"] input{padding-right:43px;text-align: right;}
.local-input-container[data-label*="basiseurokwh"]::before {content: "€";}
.local-input-container[data-label*="basiseurokwh"] input {padding-left:18px !important;}


.local-input-container[data-label*="basiskgkwh"]::after {content: "kg/kWh";}
.local-input-container[data-label*="basiskgkwh"] input{padding-right:43px;;text-align: right;}
.local-input-container[data-label*="basiskgm3"]::after {content: "kg/m³";}
.local-input-container[data-label*="basiskgm3"] input{padding-right:43px;;text-align: right;}

.local-input-container[data-label*="basiskwh"]::after {content: "kwh";}
.local-input-container[data-label*="basiskwh"] input{padding-right:43px;text-align: right;}


/* Per item input settings */
.local-input-container[data-label*="app"] input {width:88px !important;}

.local-input-container[data-label="appkwhjaar"]::after {content: "kwh";}
.local-input-container[data-label="appkwhjaar"] input{padding-right:30px;text-align: right;}

.local-input-container[data-label*="appkwhgebruik"]::after {content: "kWh";}
.local-input-container[data-label*="appkwhgebruik"] input{padding-right:30px;;text-align: right;}

.local-input-container[data-label*="appnone"] input{padding-right:30px;;text-align: right;}

.local-input-container[data-label*="appeuro"]::before {content: "€";}
.local-input-container[data-label*="appeuro"] input {padding-left:18px !important; padding-right:32px !important;text-align: right !important;}

.local-input-container[data-label*="appm3perweek"]::after {content: "m3";}
.local-input-container[data-label*="appm3perweek"] input{padding-right:30px;}



/* Buttons */
.localBtnDelete {border:0px;inset:0;background-color: transparent;width:160px;margin:4px;height:24px;cursor:pointer;background-color: tomato;}



.localButton {
  text-decoration: none;
  line-height: 1;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  box-shadow: 10px 10px 20px rgba(0,0,0,.05);
  background-color: var(--cll);
  color: white;
  border: none;
  cursor: pointer;
}

.localButton [data-button="decor"] {
  position: absolute;
  inset: 0;
  background-color:var(--cld);
  transform: translateX(-100%);
  transition: transform .3s;
  z-index: 0;
}

.localButton [data-button="text"] {
  position: relative;
  z-index: 1;
  display: flex;
  color:white;
  font-size:0.75rem;font-weight:bold;align-items: stretch;
  padding:6px 0px !important;margin:0px !important
}
.localButton [data-button="icon"] {display: flex;position:relative;margin-top:-2px;align-items: center;font-size:1rem;font-weight:bold;padding:0px 0px;color:white;  padding-right:4px;
}

.localButton:hover [data-button="text"] {color:white;font-weight:bold;}
.localButton:hover [data-button="text"] * {color:white;font-weight:bold;}
.localButton:hover [data-button="decor"] {transform: translate(0);}