.reference-textctrl-autocomplete-box {
    padding: 0;
    height: auto;
    z-index: 3000;
    position: absolute;
    /* background-color: var(--jsa-ctrl-bd-input-color); */
    background-color: var(--jsa-color-excited);
    border-radius: var(--jsa-ctrl-bd-radius);
    box-shadow: var(--jsa-ctrl-shadow-active);
}

.reference-textctrl-autocomplete-box-list {
    background-color: var(--jsa-ctrl-bg-color-input);
    overflow-x: auto;
    overflow-y: auto;
    height: auto;
    padding: var(--jsa-padding);
    /*the next entries stolen from bootstrap to make it look attached to the input ctrl*/
    border: var(--jsa-ctrl-bd-input-w) var(--jsa-ctrl-bd-input-style) var(--jsa-ctrl-bd-input-color);
    border-radius: .2rem;
    /* color: #495057; */
}

.reference-textctrl-autocomplete-box-list-container {
    width: auto;
    height: auto;
    white-space: nowrap;
}

.reference-textctrl-autocomplete-box-list-container span.hl{
    background-color: var(--jsa-bg-color-success);
}

.autocomplete-box-scope-local {
        position: absolute;
        top: calc(var(--jsa-icon-w-m)/-2);
        right: calc(var(--jsa-icon-w-m)*1.1*2);
        border-radius: calc(var(--jsa-icon-w-m)/2);
        width: var(--jsa-icon-w-m);
        height: var(--jsa-icon-w-m);
        background-size: 100% 100%;
        background-position: 0px 0px; 
        background-image: url(../img/select-list-scope-local.svg);
}

.autocomplete-box-scope-local:hover {
    box-shadow: var(--bubble-hover-shadow);
    background-image: url(../img/select-list-scope-local-active.svg);
}

.autocomplete-box-scope-local-active {
    background-image: url(../img/select-list-scope-local-active.svg);
}

.autocomplete-box-scope-global {
    position: absolute;
    top: calc(var(--jsa-icon-w-m)/-2);
    right: calc(var(--jsa-icon-w-m)*1.1*1);
    border-radius: calc(var(--jsa-icon-w-m)/2);
    width: var(--jsa-icon-w-m);
    height: var(--jsa-icon-w-m);
    background-size: 100% 100%;
    background-position: 0px 0px; 
    background-image: url(../img/select-list-scope-global.svg);
}

.autocomplete-box-scope-global:hover {
    box-shadow: var(--bubble-hover-shadow);
    background-image: url(../img/select-list-scope-global-active.svg);
}

.autocomplete-box-scope-global-active {
    background-image: url(../img/select-list-scope-global-active.svg);
}

.autocomplete-box-scope-custom {
    position: absolute;
    top: calc(var(--jsa-icon-w-m)/-2);
    right: calc(var(--jsa-icon-w-m)*1.1*3);
    border-radius: calc(var(--jsa-icon-w-m)/2);
    width: var(--jsa-icon-w-m);
    height: var(--jsa-icon-w-m);
    background-size: 100% 100%;
    background-position: 0px 0px; 
    background-image: url(../img/select-list-scope-custom.svg);
}

.autocomplete-box-scope-custom:hover {
    box-shadow: var(--jsa-ctrl-hover-shadow);
    background-image: url(../img/select-list-scope-custom-active.svg);
}

.autocomplete-box-scope-custom-active {
    background-image: url(../img/select-list-scope-custom-active.svg);
}

.autocomplete-box-close {
    position: absolute;
    top: calc(var(--jsa-icon-w-m)/-2);
    right: 0;
    border-radius: calc(var(--jsa-icon-w-m)/2);
    width: var(--jsa-icon-w-m);
    height: var(--jsa-icon-w-m);
    background-size: 100% 100%;
    background-position: 0px 0px; 
    background-image: url(../img/select-list-close.svg);
}

.autocomplete-box-close:hover {
    box-shadow: var(--jsa-ctrl-hover-shadow);
    background-image: url(../img/select-list-close-active.svg);
}

.autocomplete-box-select-all {
    position: absolute;
    right: calc(var(--jsa-icon-w-m)/-2);
    top: calc(var(--jsa-icon-w-m)*1.1*2);
    border-radius: calc(var(--jsa-icon-w-m)/2);
    width: var(--jsa-icon-w-m);
    height: var(--jsa-icon-w-m);
    background-size: 100% 100%;
    background-position: 0px 0px; 
    background-image: url(../img/select-list-select-all.svg);
}

.autocomplete-box-select-all:hover {
    box-shadow: var(--jsa-ctrl-hover-shadow);
    background-image: url(../img/select-list-select-all-active.svg);
}

.autocomplete-box-select-none {
    position: absolute;
    right: calc(var(--jsa-icon-w-m)/-2);
    top: calc(var(--jsa-icon-w-m)*1.1*3);
    border-radius: calc(var(--jsa-icon-w-m)/2);
    width: var(--jsa-icon-w-m);
    height: var(--jsa-icon-w-m);
    background-size: 100% 100%;
    background-position: 0px 0px; 
    background-image: url(../img/select-list-select-none.svg);
}

.autocomplete-box-select-none:hover {
    box-shadow: var(--jsa-ctrl-hover-shadow);
    background-image: url(../img/select-list-select-none-active.svg);
}

.autocomplete-box-select-invert {
    position: absolute;
    right: calc(var(--jsa-icon-w-m)/-2);
    top: calc(var(--jsa-icon-w-m)*1.1*4);
    border-radius: calc(var(--jsa-icon-w-m)/2);
    width: var(--jsa-icon-w-m);
    height: var(--jsa-icon-w-m);
    background-size: 100% 100%;
    background-position: 0px 0px; 
    background-image: url(../img/select-list-select-invert.svg);
}

.autocomplete-box-select-invert:hover {
    box-shadow: var(--jsa-ctrl-hover-shadow);
    background-image: url(../img/select-list-select-invert-active.svg);
}

.reference-textctrl-autocomplete-box-filter-textctrl {
    padding: var(--jsa-padding);
    /* margin: 0; */
}

.reference-textctrl-autocomplete-box-filter-textctrl-ctrl {
    /* padding: 0.5rem;
    margin: 0;
    width: auto;
    border: 0;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-bottom: 1px solid black;
    border-radius: 0;
    height: 2rem;
    margin-bottom: 0; */
}

.reference-textctrl-autocomplete-box-info {
    /* font-size: 0.5rem; */
    padding: var(--jsa-padding);
    /* margin: 0;  */
}

