.draggable-tree-wrapper
{
    height: 68px;
    width: 68px;
    position: relative;
    display: inline-block;
    cursor: move;
    z-index: 999;
}

.draggable-tree,
.draggable-tree-sillhouette {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-width: 36px;
    min-height: 36px;
}

.draggable-tree .tree-icon,
.draggable-tree-sillhouette
{
    height: 100%;
    width: 100%;
    background: rgba(127, 183, 66, 0.4);
    border: 2px solid #FFF;
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
    text-align: center;
    line-height: 62px;
    position: relative;
    cursor: move;
}

    .draggable-tree.ui-draggable-disabled .tree-icon,
    .draggable-tree.ui-state-disabled .tree-icon {
        cursor: initial;
    }

.draggable-tree-sillhouette
{
    background: transparent;
    border: 1px dashed #969DB7;
}

.draggable-tree .tree-icon span
{
    display: inline-block;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
}

.draggable-tree .inner-border
{
    height: 100%;
    width: 100%;
    background: transparent;
    border: 2px solid #7FB742;
}

.draggable-tree .trunk,
.draggable-tree .tree-icon span.indicator
{
    height: 22px;
    width: 22px;
    background: #7FB742;
    border: none;
    line-height: 22px;
}

.draggable-tree .tree-icon span.indicator
{
    display: none;
}

.draggable-tree.has-warning .tree-icon
{
    border-color: #f7e2e4;
    background: rgba(154, 28, 37, 0.4);
}

.draggable-tree.has-warning .inner-border
{
    height: 100%;
    width: 100%;
    background: transparent;
    border: 2px solid #aa1a1a;
}

.draggable-tree.has-warning .trunk
{
    background: #aa1a1a;
}

.draggable-tree.has-warning .tree-icon span.indicator
{
    display: inline-block;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    background: none;
}

.draggable-tree .tree-info
{
    text-align: center;
    white-space: nowrap;
    position: absolute;
    height: 35px;
    top: auto;
    bottom: 100%;
    left: -16px;
    margin-bottom: 5px;
    display: inline-block;
    font-size: 0; /* removes the space between inline items */
}

    .draggable-tree .tree-info > span {
        display: inline-block;
        height: 100%;
        vertical-align: top;
        padding-top: 7px;
        -moz-box-shadow: 0 4px 3px 0 rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 4px 3px 0 rgba(0,0,0,0.5);
        box-shadow: 0 4px 3px 0 rgba(0,0,0,0.5);
    }

    .draggable-tree .tree-info .estimated-savings {
        display: inline-block;
        height: 100%;
        -moz-box-shadow: 0 4px 3px 0 rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 4px 3px 0 rgba(0,0,0,0.5);
        box-shadow: 0 4px 3px 0 rgba(0,0,0,0.5);
    }

        .draggable-tree .tree-info .estimated-savings span {
            display: block;
        }
        .draggable-tree .tree-info .estimated-savings span.label {
            font-size: 12px;
        }

.draggable-tree .tree-number
{
    background: rgba(39, 82, 126, 0.8);
    color: #FFF;
    font-size: 16px;
    -moz-border-radius: 6px 0 0 6px;
    -webkit-border-radius: 6px 0 0 6px;
    border-radius: 6px 0 0 6px;
    padding: 0 8px;
}

.draggable-tree .estimated-savings,
.draggable-tree .tree-obstruction,
.draggable-tree .sold-out-message
{
    background: #F8FAED;
    color: #474B46;
    font-size: 16px;
    -moz-border-radius: 0 6px 6px 0;
    -webkit-border-radius: 0 6px 6px 0;
    border-radius: 0 6px 6px 0;
    padding: 0 6px;
}

.draggable-tree span.tree-obstruction,
.draggable-tree span.sold-out-message
{
    background: #f9eff0;
    color: #aa1a1a;
    font-weight: 600;
    display: none;
}

.draggable-tree.has-warning .tree-number {
    background: rgba(169, 31, 35, 0.8);
}

.draggable-tree.has-warning .estimated-savings
{
    display: none;
}

.draggable-tree.has-warning .tree-obstruction,
.draggable-tree.has-warning .sold-out-message
{
    display: inline-block;
}