#treeform {
  background-color: var(--pico-form-element-selected-background-color);
  border-radius: 10px;
  padding: 10px;
}

#treeform form {
  display: flex;
  flex-direction: column;
}

#treeform .submit-button {
  width: 80%;
  margin: 0  auto var(--pico-spacing) auto;
  font-weight: bold;
}

.tree {
  --horizontal-spacing : calc(var(--pico-spacing) * 1.5);
  --vertical-spacing : calc(var(--pico-spacing) * 3);
  --radius  : 10px;
  padding: 0;
  /* --pico-font-size: 100% !important; 
  font-size: medium !important; */
  color: var(--pico-color) !important;
  width: 100%;
}

.tree input{
  height: 100%;
  line-height: 1;
}

.tree details {
  margin-bottom: 0;
}

.tree button {
  display: inline;
  background: none;
  border: none;
  color: var(--pico-primary);
}

.tree li{
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--horizontal-spacing) - var(--radius));
}

.tree ul{
  margin-left  : calc(var(--radius) - var(--horizontal-spacing));
  padding-left : 0;
  margin-bottom: 0;
}

.tree ul li{
  border-left : 1px solid var(--pico-primary);
}

.tree ul li:last-child{
  border-color : transparent;
}

.tree ul li::before{
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(-0.5 * var(--vertical-spacing));
  left         : calc(-1 * var(--radius) / 2 + 4px);
  width        : calc(var(--horizontal-spacing));
  height       : calc(var(--vertical-spacing));
  border       : solid var(--pico-primary);
  border-width : 0 0 1px 1px;
}

.tree summary{
  display : block;
  cursor  : pointer;
  height  : var(--vertical-spacing);
  position: relative;
  color: var(--pico-color) !important;
  margin-bottom: 0;
}

details[open] > summary {
  margin-bottom: calc(var(--pico-spacing) / 2.5);
  margin-bottom: 0;
}


.tree summary::after {
  all: initial;
}

.tree summary::marker,
.tree summary::-webkit-details-marker{
  display : none;
}

.tree summary:focus{
  outline : none;
}

.tree summary:focus-visible{
  outline : 1px dotted #000;
}

.tree li::after,
.tree summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--vertical-spacing) / 2 - var(--radius));
  left          : calc(var(--horizontal-spacing) - var(--radius));
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : var(--pico-primary);
}

.tree li.completed::after{
  background: #17cf03;
}
.tree li.add-list::after {
  background    : #17cf03 url('../assets/add-remove.svg') 0 0;
}

.tree li.remove-list::after {
  background    : #ba0303 url('../assets/add-remove.svg') 0 0;
  background-position : calc(-2 * var(--radius)) 0;
}
     
.tree summary::before{
  z-index    : 1;
  left          : calc(-1 * var(--horizontal-spacing));
  background : rgb(2, 125, 165) url('../assets/expand-collapse.svg') 0 0;
}

.tree summary.completed::before {
  background: #17cf03 url('../assets/expand-collapse.svg') 0 0;
}
.tree details[open] > summary::before{
  background-position : calc(-2 * var(--radius)) 0;
}

.treenode {
  display: flex;
  width: 100%;
  align-items: center;
  height: var(--vertical-spacing);
}

.treenode .field-body {
  display: flex;
  margin-left: 30px;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: end;
  padding-right: var(--pico-spacing);
}

.treenode .field{
  width: 100%;
  max-width: 800px;
}

.treenode button {
  padding: 0;
  margin-left: 10px;
  margin-top: -4px;
  display: inline;
}

.treenode button::before {
  overflow: visible;
  white-space: initial;
  font-size: small;
  width: 300px;
}

.treenode input {
  margin-top: auto;
  margin-bottom: auto;
}


.treenode control {
  margin-top: 5px;
  display: block;
  padding: 0;
}

.treenode .control input{
  margin-bottom: 0px;
}
.node-name {
  white-space: nowrap;
}

@media (max-width: 576px) {
  .node-name {
    white-space: inherit;
  }
}

.tree small {
  margin-top: 3px;
  margin-bottom: 0;
}


.tree {
  .tooltiptext {
    font-size: small;
    background-color: #ff333399;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
  
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
  }
  .tooltiptext::after {
    content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #ff333399 transparent transparent transparent;
  }
}