:root{
--gap: 18px;
--box-bg: #ffffff;
--box-border: #2b6cb0;
--line-color: #8aa4d0;
--radius: 8px;
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

ul.tree {
	margin:0; padding:0;
}

#root { margin-left: 0; }

.tree ul {
    margin-left: 0px;
}

.tree li {
    list-style-type: none;
    margin:20px 0 20px 30px;
    position: relative;
}

.tree li::before {
    content: "";
    position: absolute;
    top:-20px;
    left:-40px;
    border-left: 1px solid #ccc;
    border-bottom:1px solid #ccc;
    border-radius:0 0 0 0px;
    width: 40px;
    height:40px;
}

.tree li::after {
    position:absolute;
    content:"";
    top:20px;
    left:-40px;
    border-left: 1px solid #ccc;
    border-top:1px solid #ccc;
    border-radius:0px 0 0 0;
    width:40px;
    height:100%;
}

.tree li:last-child::after  {
    display:none;
}

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

ul.tree>li:first-child::before {
    display:none;
}

ul.tree>li:first-child::after {
    border-radius:5px 0 0 0;
}

.tree li span {

    display:inline-flex;align-items:center;gap:12px;
    padding:0 14px;
    height:40px; /* altezza fissa */
    line-height: 40px;
    border-radius:var(--radius);
    border:2px solid var(--box-border);background:var(--box-bg);
    box-shadow:0 6px 14px rgba(18,52,86,0.06);
    min-width:160px;
    cursor:default;

}

/*
.tree li span:hover, .tree li span:hover+ul li span,
.tree li span:focus, .tree li span:focus+ul li span
*/
.tree li span:hover
{
    background: #2b8def; color: #fff; border: 1px solid #2b8def;
}

.tree li span:hover+ul li::after, .tree li span:focus+ul li::after,
.tree li span:hover+ul li::before, .tree li span:focus+ul li::before
.tree li span:hover+ul::before, .tree li span:focus+ul::before
.tree li span:hover+ul ul::before, .tree li span:focus+ul ul::before{
    border-color:  #000; /*connector color on hover*/
}

.tree li > ul { display: none; }
.tree li.selected > ul { display: block; }
.tree span.active { background: #2b8def !important; color: #fff; /* border: 1px solid #2b8def; */ }

.tree small { color: #999; }

.tree div.act { display: none; margin-left: 20px; }
.tree div.plus { display: inline-block; width: 32px; height: 32px; background: transparent url("/images/plus.png") center center no-repeat; border: 1px solid #fff; }
.tree div.del { margin-left: 20px; display: inline-block; width: 32px; height: 32px; background: transparent url("/images/trash.png") center center no-repeat; border: 1px solid #fff; }

.tree span.active + div.act { display: inline-block; }


div.cattree { display: inline-block; width: 700px; overflow-x: scroll; overflow-y: scroll; vertical-align: top; margin: 20px 0 0 -30px;
    __position: absolute;
    __top: 160px;
    __bottom: 0;
    __left: 40px;
}

div.catdett { display: inline-block; vertical-align: top; margin-top:40px; background: #888; padding:20px;
	border: 1px solid #ddd;
	border-radius: 5px;
    width: 300px;
    /* margin-left: 720px; */
    _position: fixed;
    _left: 920px;
    _top: 100px;
    _overflow-y: scroll;;
}

.multicol { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 10px; align-items: center; }

.catdett label { display: block; clear:both; padding-left: 5px; }
.catdett label:not(:first-child) { margin-top: 10px; }

.catdett table { border-spacing: 10px 0px; }
.catdett table td { white-space: nowrap; font-size: 13px; }

/*
.catdett input[type="text"], .catdett input[type="number"], .catdett select  { width: 140px; padding: 4px; font-size: 13px; }
*/

.dragup { border-top: 2px solid red !important; }
.dragdown { border-bottom: 2px solid red !important; }

div.treeviewcon { height: auto !important;
	width: inherit; max-height: 260px; background: #f4f4f4; z-Index:99;
	overflow: scroll; padding:10px; position:absolute; left:0; top:44px;
	box-sizing: border-box; line-height:20px !important;
	border-bottom: 1px solid #999;
	-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.treeviewcon * div:not(:nth-child(1)) { padding-left: 20px; }
.treeviewcon label { padding-left:16px; display:inline-block; position: static !important; font-size:13px !important; color: #333 !important; }
.treeviewcon span { display:inline-block; cursor:pointer; padding:0; }

.treeview { display: none; }
.treeview:checked + label { background: URL("/images/plus.png") left center no-repeat; }
.treeview:not(:checked) ~ label { background: URL("/images/minus.png") left center no-repeat;}
.treeview:checked ~ *:not(:nth-child(2)) { display: none; }
.treeview:disabled ~ * { color: #707070; }