:root {
    --slx-height: var(--bs-control-height);
    --slx-border-radius: var(--bs-border-radius);
    --slx-border-width: var(--bs-border-width);
    --slx-border-color: var(--bs-border-color);
    --slx-item-hover-color: rgba(var(--bs-secondary-rgb), 0.1);
    --slx-item-active-color: rgba(var(--bs-secondary-rgb), 0.2);
}

.selectx-wrapper { position: relative; }
.selectx-wrapper.disabled { pointer-events: none;opacity: 0.6;}
.selectx-wrapper.disabled .clear { display: none !important;}
.selectx-wrapper.readonly { pointer-events: none;opacity: 0.6;}
.selectx-wrapper.readonly .clear { display: none !important;}

.selectx-selected { display: flex; gap: 5px; align-items: center; justify-content: space-between; height: var(--slx-height); font-size: 14px; padding: 0 26px 0 10px; border: var(--slx-border-width) solid var(--slx-border-color); border-radius: var(--slx-border-radius); position: relative; color: #444444; background-color: #ffffff; overflow: hidden; cursor: default;}
.selectx-selected:after { content: ""; position: absolute; z-index: 1; width: 26px; height: 100%; top: 0; right: 0; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-position: center center; background-repeat: no-repeat; background-size: 10px auto; opacity: 0.6; transition: transform 0.15s ease-in-out; }
.selectx-selected .empty { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #999; cursor: default; }
.selectx-selected .text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: default; }
.selectx-selected .clear { position: absolute; top: 0; right: 0; height: 100%; width: 26px; display: flex; justify-content: center; align-items: center; font-size: 18px; cursor: pointer; background-color: #ffffff; color: #999999; z-index: 2;}

.selectx-dropdown {position: absolute; top: 100%; left: 0; z-index: 10;box-shadow: 0 0 35px 0 rgba(var(--bs-shadow-rgba));animation: SlideDownMenu 0.3s ease forwards;border-radius: 0 0 var(--slx-border-radius) var(--slx-border-radius);background: #ffffff;min-width: 100%;border: 1px solid #dee2e6;border-top: 0;display: none;}
.selectx-dropdown .dropdown-search { padding: 8px 8px 3px; }
.selectx-dropdown .dropdown-search input { width: 100%; height: 32px; border: 1px solid #dee2e6; border-radius: 8px; padding: 0 8px; font-size: 14px; outline: none;}
.selectx-dropdown .dropdown-search.none { display: none; }
.selectx-dropdown .dropdown-list { padding: 5px 0; max-height: 400px; overflow-y: auto;}
.selectx-dropdown .dropdown-list .item { cursor: pointer; padding: 5px 10px; transition: all 0.3s;}
.selectx-dropdown .dropdown-list .item:hover { background-color: var(--slx-item-hover-color);}
.selectx-dropdown .dropdown-list .item.active { background-color: var(--slx-item-active-color);}
.selectx-dropdown .dropdown-list .item.loading { font-style: italic; color: #666; font-size: 14px; pointer-events: none;}
.selectx-dropdown .dropdown-list .item.loading:before,
.selectx-dropdown .dropdown-list .item.loading:after{ display: none;}
.selectx-dropdown .dropdown-list .item.error { font-style: italic; color: var(--bs-danger); font-size: 14px; pointer-events: none;}
.selectx-dropdown .dropdown-list .item.focused { background-color: #f6f6f6;}

.selectx-wrapper.show .selectx-dropdown { display: block; }
.selectx-wrapper.show .selectx-selected { border-radius: var(--slx-border-radius) var(--slx-border-radius) 0 0;}
.selectx-wrapper.show .selectx-selected:after { transform: rotate(-180deg); }

@keyframes SlideDownMenu {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes SlideRightMenu {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}