
#astrolabe {
    margin:20px 0;
    border:1px solid @hostNavBorder;
    border-radius:5px;
    overflow-y:auto;
    max-height:75%;
    color: @MP_gray_base;

    .node + .host:before{
        content: "Other hosts in category:";
        color: grey;
        display: block;
        padding-top: 10px;
    }

    .node[count="0"] .bi-caret-down-fill, .node[count="0"] .bi-caret-right-fill{
       display: none;
    }

    .node[count="0"] .toolTipWrapper{
        color: #737373;
        margin-left: 13px;
    }
}


#astrolabe ul,
#astrolabe ul.promiseFilter {
    list-style: none;
    padding:0;
    margin:0;
    input {
        margin:0 12px 0 0;
        vertical-align:text-top;
    }
}

.promiseFilter li {
    padding:4px 12px;
    line-height:32px;

    label {
        display:inline;
    }
}

#astrolabe .listContainer ul ul{
    margin: 0 0 0 0;
}


#astrolabe .listContainer ul li,
.promiseFilter li {
    list-style: none;
    width:100%;
    white-space: nowrap;
    overflow:hidden;
    border-top:1px solid @hostNavBorder;
}

#astrolabe .rootContainer > li.node:first-child,
.promiseFilter > li:first-child {
    border:none;
}

.nodeWrapper {
    padding:0 12px;
    line-height:32px;
    position:relative;
    font-weight: 500;
    font-size: 14px;
}

#astrolabe li:first-child > .nodeWrapper {
     padding-top:0;
}

#astrolabe .node.expanded >.nodeWrapper {
    border:none;
    color: @linkColor;
}

#astrolabe .host {
    border:none;
    padding-left:38px;
}

.toolTipWrapper {
    display:inline-block;
    max-width:100%;
    display: flex;
    .nodeLabel {
        max-width: 140px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

ul.sub-container .sub-container .sub-container .toolTipWrapper {
    line-height:0px;
    padding-top:5px;
}

#astrolabe .node > .nodeWrapper > .nodeIcon {
    width:8px;
    padding-right:8px;
}

#astrolabe .node .nodeHeader {
    display: inline-block;
    position:relative;
    width:95%;
    vertical-align:top;
    overflow:hidden;
}

#astrolabe .selectedElement > .nodeWrapper {
    > .nodeHeader,
    > .nodeIcon {
        color: @textColor;
    }
}

#astrolabe .node .nodeHeader:hover i {
    display:inline-block;
}

#astrolabe .node .nodeHeader i {
   display:none
}

#astrolabe .node .nodeHeader i:hover {
   cursor:pointer;
}

#astrolabe .node .nodeHeader {
    display: flex;
    align-items: center;
    .toolTipWrapper {
        flex-grow: 1;
    }

    i {
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: #000;
        &:hover {
            background: #EEEFF0;
            color: #000;
        }
    }
}

.nodeWrapper {
    display: flex;
}

#astrolabe .host.selectedElement > .hostLabel {
    color: @linkColor;
}

#astrolabe .hostIcon {
    height: 8px;
    width: 8px;
    margin-right: 5px;
    display: inline-block;
    cursor: pointer;
}

#astrolabe .menu .profilesCombo
{
  position:relative;
}

#astrolabe .rootContainer
{
    padding: 0;
    margin:0;
}

#astrolabe .node  .nodeHeader .hostCountLabel
{
    margin-left: 3px;
    margin-right: 3px;
    cursor: pointer;
}

#astrolabe.addNodeDialog .classInputContainer
{
    position: relative;
    float: left;
    display: inline-block;
}

#astrolabe.addNodeDialog input
{
    height: 20px;
}

.astrolabeAddNodeDialogError
{
    color: #cc4358;
}

#astrolabe.addNodeDialog i {
    color: @linkColor;
    position:relative;
    cursor:pointer;

    &:hover {
        color:@iconHover;
    }
}

#astrolabe.addNodeDialog .rightColumn .classInputContainer > .classFinderIcon:hover
{
    background-position: -21px -51px;
}

#astrolabe-add-node-class {
    width: 194px;
    padding-right: 20px;
}

#astrolabe span.hostLabel{
    line-height: 32px;
    vertical-align:middle;
    font-size:14px;
    font-weight: 500;
}

.profilesCombo .btn-group  {
    display:block;
}

.profilesCombo .btn-group  > .label-placeholder
 {
    text-align:left;
    width:92%;
    overflow:hidden;
    border:none;
}

.profilesCombo .btn-group > .btn + .dropdown-toggle {
    padding:4px 0;
    width:8%;
    border-right-width:0px;
    border-top-width:0px;
    border-bottom-width:0px;
    border: none;
}

.containerWrapper,.combobox {
    border: 1px solid #c7ccd7;
    border-radius: 5px 5px 5px 5px;
    margin-bottom:16px;
    overflow:hidden;
    margin-top: 0;
}

.menu {
    border:none;
    width:100%;
    position:relative;
}


ul.sub-container li .nodeWrapper {
    padding-left:22px;
}

ul.sub-container .sub-container {
    li .nodeWrapper, .host {
       border:0;
       margin: 0;
       padding-left: 32px;
    }
}

ul.sub-container .sub-container .sub-container li .nodeWrapper,
ul.sub-container .sub-container .sub-container .host,
ul.sub-container .sub-container .sub-container li.host {
    padding-left: 47px !important;
    margin-left: 0;
    width: 250px;
    overflow:hidden;

    .nodeLabel {
        white-space:normal;
        line-height:20px;
    }
}

ul.sub-container .sub-container .sub-container li.host,
ul.sub-container .sub-container .sub-container .sub-container li .nodeWrapper {
     padding-left: 63px !important;
     .nodeHeader { width:88% !important}
}

ul.sub-container .sub-container .sub-container .sub-container .sub-container li.host,
ul.sub-container .sub-container .sub-container .sub-container .sub-container li .nodeWrapper {
     padding-left: 79px !important;
     .nodeHeader { width:83% !important}
}

.nodeIcon, .hostIcon, .nodeLabel, .hostLabel {
    cursor: pointer;
}


/* pop up */

.subscribe-panel,.unsubscribe-panel {
    margin:5px 0 10px;
}
