@charset "utf-8";

.tree_ui{
    --tree-row-gap: 4px;
    position: relative; border: 1px solid #c9daf0; border-radius: 10px; padding: 0 5px 0 10px; line-height: 1.3; height: 260px; overflow-y: auto; color: #2b384f;
    & *{line-height: inherit;}

    & .tree_wrap{height: 100%; overflow-y: auto; padding: 20px 0;}

    & .tree_d1{position: relative; display: flex; flex-direction: column; gap: var(--tree-row-gap);}
    & .tree_d1:before{content: ""; position: absolute; top: 7px; bottom: 13px; left: 3.5px; width: 0; border: 1px dotted #9ea8b9;}
    & .tree_d1 > li{position: relative; padding: 0 0 0 15px;}
    & .tree_d1 > li:before{content: ""; position: absolute; top: 5px; left: 0; width: 9px; height: 9px; background: url(/src/img/2024/contents/tree_fold.svg) no-repeat center; background-size: contain;}
    & .tree_d1 > li > button{position: relative; padding: 0 0 0 24px; display: inline-block; font-size: 13px; font-weight: var(--fwsb);}
    & .tree_d1 > li > button:before{content: ""; position: absolute; top: -2px; left: 0; width: 20px; height: 18px; background: url(/src/img/2024/contents/tree_ico_folder.svg) no-repeat center; background-size: contain;}

    & .tree_d2{position: relative; /* display: flex; */ display: none; flex-direction: column; gap: var(--tree-row-gap); margin: var(--tree-row-gap) 0 0;}
    & .tree_d2:before{content: ""; position: absolute; top: 7px; bottom: 13px; left: 3.5px; width: 0; border: 1px dotted #9ea8b9;}
    & .tree_d2 > li{position: relative; padding: 0 0 0 15px;}
    & .tree_d2 > li:before{content: ""; position: absolute; top: 5px; left: 0; width: 9px; height: 9px; background: url(/src/img/2024/contents/tree_fold.svg) no-repeat center; background-size: contain;}
    & .tree_d2 > li > button{position: relative; padding: 0 0 0 24px; display: inline-block; font-size: 13px; font-weight: var(--fwsb);}
    & .tree_d2 > li > button:before{content: ""; position: absolute; top: -2px; left: 0; width: 20px; height: 18px; background: url(/src/img/2024/contents/tree_ico_folder.svg) no-repeat center; background-size: contain;}

    & .tree_d3{/* display: flex; */ display: none; flex-direction: column; gap: var(--tree-row-gap); padding: 0 0 0 22px; margin: var(--tree-row-gap) 0 0;}
    & .tree_d3 > li{}
    & .tree_d3 > li > button{position: relative; padding: 0 0 0 24px; font-size: 13px; font-weight: var(--fwm);}
    & .tree_d3 > li > button.on{color: #6993ff}
    & .tree_d3 > li > button:before{content: ""; position: absolute; top: -2px; left: 0; width: 20px; height: 18px; background: url(/src/img/2024/contents/tree_ico_file.svg) no-repeat center; background-size: contain;}
}