@charset "utf-8";


/* COMMON */
.dropdownfilter {
    display: flex;
    flex-direction: column;
    --svgicon-size: contain;
    --svgicon-position: center center;
    max-width: 100%;
}

.dropdownfilter .fieldsec {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    pointer-events: all;
    cursor: pointer;
}

.dropdownfilter .fieldsec .currentsec {
    overflow: hidden;
    pointer-events:none;
}

.dropdownfilter .fieldsec,
.dropdownfilter .dropdownsec {
    padding: 0.25rem 0.75rem;
    border: 2px solid;
    border-radius: 1rem;
    background: white;
}

.dropdownfilter .dropdownsec {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    background: white;
    overflow-y: auto;
    max-height: 12rem;
}

.ddlistel {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    outline: 0;
    border: 0;
}
.ddlistel[is-unused] {
    display: none;
}
.ddlistel span{
    display: block;
    max-width: 100%;
     white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dropdownfilter .dropdownsec .ddlistel[is-selected] {
    font-weight: 600;
}

.dropdownfilter:not(:focus-within) .dropdownsec {
    opacity: 0;
    pointer-events: none;
}

.dropdownfilter:focus-within {
    z-index: 99999999;
}
.dropdownfilter[has-initial-label-id] .fieldsec .resetbt{
    display: none;
}
.dropdownfilter .fieldsec .resetbt .svgicon {
    --svgicon-url: var(--lsf-icon-menu-close);
    --svgicon-size: 70%;
    width: var(--line-height);
    height: var(--line-height);
    pointer-events: all;
    cursor: pointer;
}

.dropdownfilter .fieldsec .arrowicon {
    --svgicon-url: var(--lsf-arrow);
    width: 0.75rem;
    height: 0.75rem;
    pointer-events: none;
}

.dropdownfilter .fieldsec .svgicon {

    mask-repeat: no-repeat;
    mask-size: var(--svgicon-size);
    mask-position: var(--svgicon-position);
    mask-image: var(--svgicon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--svgicon-size);
    -webkit-mask-position: var(--svgicon-position);
    -webkit-mask-image: var(--svgicon-url);
    background: currentColor;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}