/*.controls {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 1;
  padding: 6px 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}*/

.tree button {
    border: 0px;
    color: #e13300;
    margin: 4px;
    padding: 4px 12px;
    cursor: pointer;
    background: transparent;
}

    button.active,
    button.active:hover {
        background: #e13300;
        color: #fff;
    }

    button:hover {
        background: #efefef;
    }

.tree input[type=checkbox] {
    vertical-align: middle !important;
}



.tree {
    /*  margin: 2% auto;
  width: 80%;*/
    padding-left:0;
}

    .tree ul {
        display: none;
        margin: 4px auto;
        margin-left: 6px;
        border-left: 1px dashed #dfdfdf;
    }


    .tree li {
        padding: 5px 0px;
        cursor: pointer;
        vertical-align: middle;
        background: #fff;
        list-style:none;
    }

        .tree li:first-child {
            border-radius: 3px 3px 0 0;
        }

        .tree li:last-child {
            border-radius: 0 0 3px 3px;
        }

    .tree .active,
    .tree  .active li {
        background: #efefef;
    }

    .tree label {
        cursor: pointer;
    }

    .tree input[type=checkbox] {
        margin: -2px 6px 0 0px;
    }

.has > label {
    color: #000;
}

.tree .total {
    color: #e13300;
}
.tree .expanded::before {
    font-family: bootstrap-icons !important;
    content: "\f285 ";
    padding-right:3px;
    vertical-align:bottom;
}
.tree .collapsed::before {
    font-family: bootstrap-icons !important;
    content: "\f282 ";
    padding-right: 3px;
    vertical-align: bottom;
}