﻿.pickertree
{
    padding: 0px;
    list-style: none;
    /* padding-left: 6px; */
}

    .pickertree ul
    {
        padding: 0px;
        margin: 0px;
        margin-left: 16px;
        list-style: none;
        clear: both;
        margin-top: 0px;
        white-space: nowrap;
    }

    .pickertree li
    {
        margin: 0;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #000;
    }

    /* expanded collapsed icon */
    .pickertree .hitarea
    {
        height: 40px;
        width: 40px;
        margin-top: -40px;
        float: left;
        cursor: pointer;
        position: absolute;
    }

        .pickertree .hitarea.collapsable-hitarea:before,
        .pickertree .hitarea.expandable-hitarea:before
        {
            content: '';
            display: block;
            position: absolute;
            left: 18px;
            top: 14px;
            width: 0;
            height: 0;
            border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #000;
            background-color: rgba(0, 0, 0, 0);
            border-style: solid;
            border-width: 5px;
        }
        .pickertree .hitarea.collapsable-hitarea:before
        {
            transform: rotate(45deg);
            top: 17px;
        }
        
        .pickertree .hitarea.selected.enabled.collapsable-hitarea:before,
        .pickertree .hitarea.selected.enabled.expandable-hitarea:before
        {
            border-left-color: #fff;
        }


    .pickertree .node
    {
        /*height: 26px;*/
        height: 40px;
        line-height: 40px;

        margin: 0px 0px 0px 40px;
        display: block;
        cursor: default;
        white-space: nowrap;
        /*background: none !important;*/
        text-overflow: ellipsis;
        overflow-x: hidden;
    }

    .pickertree .node div:first-of-type {
        position: relative;
        display: inline;
        /* line-height: 24px; / * 2 pixels minder dan zijn parent om hem iets naar boven uit te lijnen */
    }

    .pickertree i
    {
        margin-right: 5px;
        font-size: 14px;
        width: 15px;
        text-align: center;
    }

    .pickertree .placeholder
    {
        height: 16px;
        width: 16px;
        display: block;
    }

    .pickertree .node.enabled.selected
    {
        color: #fff;
    }
    
    .pickertree .node:hover:before,
    .pickertree .selected:before {
            pointer-events: none;
            content: '';
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
    }

        .pickertree .node:hover:before {
            background-color: #eee;
        }

        .pickertree .node.selected:before {
            background-color: #eee;
        }
        .pickertree .node.selected:hover:before
        {
            background-color: #eee;
        }

        .pickertree .node.enabled.selected:before
        {
            background-color: rgb(99, 144, 181);
        }
        .pickertree .node.enabled.selected:hover:before
        {
            background-color: rgb(99, 144, 181);
        }


.pickertree .node.disabled {
    font-style: italic;
        color: #aaa;
}


    .pickertree .node .highlite {
        font-weight: bold;
        color: #000;
    }