﻿.multiselectbox-box {
    margin: 0;
    padding: 0;
}

.multiselectbox-box-item {
}

.multiselectbox-box-item-delete-img {
    width: 20px;
    height: 20px;
    padding-bottom: 2px;
    cursor: pointer;
}

.multiselectbox-box-item-name {
    padding-right: 20px;
}

.multiselectbox-boundary {
    margin: 0;
    padding: 0;
}

    .multiselectbox-boundary h1 {
        color: #FA9A39;
    }

    .multiselectbox-boundary p {
        padding-bottom: 50px;
    }

    .multiselectbox-boundary .content {
        width: 500px;
        margin: auto;
    }

.tree ul {
    margin-left: 0px;
}

.tree li {
    list-style-type: none;
    margin: 7px;
    position: relative;
    border-color: #999
}

    .tree li::before {
        content: "";
        position: absolute;
        top: -7px;
        left: -20px;
        border-left: 1px solid;
        border-bottom: 1px solid;
        border-radius: 0 0 0 0px;
        width: 20px;
        height: 15px;
        border-color: inherit;
    }

    .tree li::after {
        position: absolute;
        content: "";
        top: 8px;
        left: -20px;
        border-left: 1px solid;
        border-top: 0px solid;
        border-radius: 0px 0 0 0;
        width: 20px;
        height: 100%;
        border-color: inherit;
    }

    .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 div {
    border: 1px solid;
    border-radius: 5px;
    padding: 2px 5px;
    box-shadow: 1px 1px 5px 1px #7b7b7b;
    color: #000;
    width: calc(100% - 15px);
    border-color: inherit;
}

    .tree li div:hover, .tree li div:hover + ul li div,
    .tree li div:focus, .tree li div:focus + ul li div {
        background: #ccc;
        color: #000;
        border: 1px solid #7b7b7b;
    }

        .tree li div:hover + ul li::after, .tree li div:focus + ul li::after,
        .tree li div:hover + ul li::before, .tree li div:focus + ul li::before
        .tree li div:hover + ul::before, .tree li div:focus + ul::before
        .tree li div:hover + ul ul::before, .tree li div:focus + ul ul::before {
            /*border-color: #000;*/ /*connector color on hover*/
        }
