.react-dropdown-tree-select {
    /* webkit-font-smoothing: antialiased; */
    font-family: Inter, sans-serif;
    line-height: 1.55;
}

.react-dropdown-tree-select .dropdown{position:relative;display:block;width: 100%;}

.react-dropdown-tree-select .dropdown .dropdown-trigger{
    border: 1px solid rgb(206, 212, 218);
    background-color: rgb(255, 255, 255);
    transition: border-color 100ms ease 0s;
    -webkit-font-smoothing: antialiased;
    font-family: Inter, sans-serif;
    height: auto;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.55;
    appearance: none;
    resize: none;
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
    color: rgb(0, 0, 0);
    display: block;
    text-align: left;
    min-height: 36px;
    padding-left: 6px;
    padding-right: 12px;
    padding-top: 3px;
    border-radius: 4px;
    cursor: pointer;
}

.react-dropdown-tree-select .dropdown .dropdown-trigger.arrow{
    cursor: pointer;
}

.react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.bottom:after{
    content: url("select.svg");
    position: absolute;
    top: 5px;
    bottom: 0px;
    right: 0px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 30px;
    pointer-events: none;
}

.react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.top:after{
    content: url("select.svg");
    position: absolute;
    top: 5px;
    bottom: 0px;
    right: 0px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 30px;
    pointer-events: none;
}

.react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.disabled{cursor:not-allowed}
.react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.disabled.bottom:after{color:#b9b9b9}


.react-dropdown-tree-select .dropdown .dropdown-content .search{width:100%;border:none;border-bottom:1px solid #ccc;outline:none}
.react-dropdown-tree-select .dropdown .dropdown-content ul{margin:0;padding:0}

.react-dropdown-tree-select .dropdown .dropdown-content{font-size: 14px;}

.tag-item{
    display:inline-flex;
    max-width: calc(100% - 20px);
    }

.tag{
    color: rgb(73, 80, 87);
    font-weight: 500;
    font-size: 12px;
    background-color:rgb(241, 243, 245);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-family: Inter, sans-serif;
    margin: calc(3px) calc(5px);
    padding-left: 12px;
    padding-right: 0px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius:4px;
    display:inline-block;
    cursor:default;
    user-select: none;

}
.tag:focus-within{background-color:#e9e9e9;border-color:#a0a0a0}

.tag-remove{
    color: rgba(73, 80, 87, 0); 
    font-size:14px;
    line-height:100%;
    margin-left: 3px;
    margin-right: 3px;
    cursor:pointer;
    background-color:transparent;
    border:none;
    outline:none;
    background-image: url(/assets/close.svg);
    background-repeat: no-repeat;
    background-position: center center;
   
} 
/* .tag-remove:after{
    content: " ";
    background-image: url(/assets/close.svg);
    width: 11px;
    height: 11px;
    display: inline-block;
} */
.tag-remove::after .tag-remove.disabled,.tag-remove.readOnly{cursor:not-allowed}
.tag-remove:focus{color:#3c3c3c}
.node>label{cursor:pointer;margin-left:2px}

.tag-list{display:inline;padding:0;margin:0} 

 /* .tag-item .search {border:none;border-bottom:1px solid #ccc;outline:none} */
.tag-item .search {
    background-color: transparent;
    border: 0px;
    outline: 0px;
    font-size: 14px;
    padding: 0px !important;
    margin: 5px;
    appearance: none;
    color: inherit;
    cursor: pointer;
    /* width:300px; */
    font-family: Inter, sans-serif;
}

.search::placeholder{
    color: #ADB5BD;
    /* overflow: visible;
    line-height: 32px;
    width: 300px !important; */
}
.search::placeholder-shown{overflow:visible;width: 200px;}





.tag-item:last-child{margin-right:4px}

/* Dropdown Styles */

.react-dropdown-tree-select .dropdown .dropdown-content {
    position:absolute;
    padding:4px 10px;
    z-index:100;
    min-width: 100%;
    box-sizing: inherit;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.05);
    overflow-y: scroll;
    outline: 0px;
    -webkit-tap-highlight-color: transparent;
    display: block;
    text-decoration: none;
    color: #000000;
    border-radius: 4px;
    box-shadow: rgb(0 0 0 / 5%) 0px 1px 3px, rgb(0 0 0 / 5%) 0px 10px 15px -5px, rgb(0 0 0 / 4%) 0px 7px 7px -5px;
    -webkit-font-smoothing: antialiased;
    font-family: Inter, sans-serif;
    pointer-events: auto;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(233, 236, 239);
    overscroll-behavior-y: contain;
    max-height: 300px;
}




.toggle{white-space:pre;margin-right:4px;cursor:pointer;font-size: 10px;font-style: normal;color:#555555;}
.toggle:after{content:" "}

.toggle.collapsed:after{content:"\25B6";color:#B2B9BF}
.toggle.expanded:after{content:"\25BC";color:#B2B9BF}
.searchModeOn .toggle{display:none}
.radio-item{vertical-align:middle;margin:0 4px 0 0}

.hide:not(.match-in-children){display:none}

.radio-item.simple-select{display:none}

/* .checkbox-item{
    vertical-align:middle;
    margin:0 4px 0 0; 
    background-color: red;
} */
/* checkbox styles */
.checkbox-item {
    position: relative;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    vertical-align: middle;
  }
.checkbox-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 1px solid #aaa;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
  }
  
.checkbox-item:checked:before {
    width: 100%;
    height: 100%;
    border: 1px solid #228CE6;
    background-color: #228CE6;
    border-radius: 2px;
    background-image: url(/assets/check.svg);
    background-repeat: no-repeat;
    background-position: center center;
  }
.node-label {
    opacity:1;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding-top: 5px;
    color:#495057 !important;
    vertical-align: bottom;
} 
.node{list-style:none;white-space:nowrap;padding:4px;color:#000000;}
.node.leaf.collapsed{display:none}
.node.disabled>*{color:gray;cursor:not-allowed}
.node.match-in-children.hide .node.focused{background-color:#f4f4f4}