.sds-tree-view-heading-text {
    color: #020303;
    font-size: 12px;
    padding: 1%;
    font-weight: 400;
}
.sds-tree-view .dx-treeview-toggle-item-visibility {
    color: #020303;
    font-size: 20px;
}
.sds-treeview-item {
    display: flex;
    gap: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    padding: 5px 16px 5px 4px;
    color: #020303;
}
/* Hide default DevExpress icon */
.sds-tree-view .dx-icon-search::before {
  content: none;
}

/* Apply your custom SVG icon */
.sds-tree-view .dx-icon-search {
  background: url("/Assets/Images/icons/search-v24.svg") no-repeat center;
  background-size: 16px 16px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: 3px;
}

.sds-tree-view .dx-state-selected>.dx-treeview-item {
    background: #E5F1F2;
    color: #0B9294;
}
.sds-tree-view .dx-state-selected>.dx-treeview-item .sds-treeview-item {
    color: #0B9294;
    font-weight: 500;
}
.sds-tree-view .dx-state-selected>.dx-treeview-item .sds-treeview-item svg path[fill] {
    fill: #0B9294;
}
.sds-tree-view .dx-state-selected>.dx-treeview-item .sds-treeview-item svg path[stroke] {
    stroke: #0B9294;
}
.sds-tree-view.dx-treeview .dx-treeview-item.sds-treeview-state-focused,
.sds-tree-view .dx-treeview-item.dx-state-hover {
    background: #F0F4F4;
}
.sds-tree-view .dx-treeview-item.dx-state-hover .treeview-item-btn:after {
    height: 16px;
    display: block;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_1571_57004)'%3E%3Cpath d='M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z' fill='%235A6161'%3E%3C/path%3E%3Cpath d='M4.71875 8C4.71875 8.53503 4.28503 8.96875 3.75 8.96875C3.21497 8.96875 2.78125 8.53503 2.78125 8C2.78125 7.46497 3.21497 7.03125 3.75 7.03125C4.28503 7.03125 4.71875 7.46497 4.71875 8Z' fill='%235A6161' stroke='%235A6161' stroke-width='0.0625'%3E%3C/path%3E%3Cpath d='M13.2188 8C13.2188 8.53503 12.785 8.96875 12.25 8.96875C11.715 8.96875 11.2812 8.53503 11.2812 8C11.2812 7.46497 11.715 7.03125 12.25 7.03125C12.785 7.03125 13.2188 7.46497 13.2188 8Z' fill='%235A6161' stroke='%235A6161' stroke-width='0.0625'%3E%3C/path%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1571_57004'%3E%3Crect width='16' height='16' fill='white'%3E%3C/rect%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.treeview-context-menu-item {
    font-size: 14px;
    color: #020303;
    padding: 8px 4px 5px 4px;
}
.treeview-context-menu-item#delete {
    color: #EB5757;
    border-top: 1px solid #DEE4E4;
}


/* TREELIST AS TREEVIEW */

.treeview-treelist-wrapper .dx-bordered-bottom-view.dx-treelist-rowsview{
    border: none;
    background-color: transparent;
}


.treeview-treelist-wrapper .dx-column-lines>td{
    border: none;
    border-left: none;
    border-right: none;
}
.treeview-treelist-wrapper .dx-treelist-rowsview .dx-selection.dx-row>td {
    background: #E5F1F2;
    color: #0B9294;
    border: none;
    border-top: none !important;
    border-bottom: none !important;
}

.treeview-treelist-wrapper .dx-treelist-rowsview .dx-row>td:first-child {
    display: flex;
    align-items: center;
}

.treeview-treelist-wrapper .dx-treelist-rowsview .dx-row:not(.dx-freespace-row):hover,
.treeview-treelist-wrapper .dx-treelist-rowsview .dx-selection.dx-row:hover>td {
    background: #F0F4F4;
    border: none;
     border-top: none;
    border-bottom: none;
}


.treeview-treelist-wrapper .dx-treelist-rowsview .dx-row:not(.dx-freespace-row) {
    cursor: pointer;
}


.treeview-treelist-wrapper .dx-treelist-rowsview .dx-treelist-expanded span::before {
    content: "\f001";
    color: #020303;
    font-size: 20px;
}
.treeview-treelist-wrapper .dx-treelist-rowsview .dx-treelist-collapsed span::before{
    content: "\f04e";
    color: #020303;
    font-size: 20px;
}

.treeview-treelist-wrapper .dx-treelist-rowsview .dx-selection .sds-treeview-item {
    color: #0B9294;
    font-weight: 500;
}

.treeview-treelist-wrapper .dx-treelist-rowsview .dx-treelist-table .dx-row>td.dx-command-edit-with-icons>.dx-link{
    line-height: 25px;
    color: #333;
    font-size: 20px;
    display: none;
}

.treeview-treelist-wrapper .dx-treelist-rowsview .dx-treelist-table .dx-row:hover>td.dx-command-edit-with-icons>.dx-link{
    display: inline-block;
}