/*.base {
    cursor: pointer;
    position: relative;
    width: 100%;
}
.base
{
  width: 100%;
  position: relative;
}
.trigger
{
  display: flex;
  flex-wrap: wrap;
  padding: 4px 10px 4px 0;
  border: 1px solid #ddd;
  line-height: 20px;
  gap: 10px;
}
.tagSpace
{

}
.popup
{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}
.hide
{
  display: none;
}*/
/* ui variants */

/* search */
.textbox
{
  flex: 1;
  min-width: var(--lib_size_150);
}
.clear
{
  color: var(--lib_base_multiselect_clear_color);
  margin: 0 var(--lib_size_5);
}
.base {
  position: relative;
  width: 100%;
  cursor: pointer;
  padding: var(--lib_size_5);
}

.multiselectedContent{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.multiselect{
box-sizing: border-box;
}
[dir=ltr] .multiselect{
  padding: var(--lib_size_7) var(--lib_size_30) var(--lib_size_7) var(--lib_size_10);
}
[dir=rtl] .multiselect{
padding: var(--lib_size_7) var(--lib_size_10) var(--lib_size_7) var(--lib_size_30);
}
div.multiselect[data-placeholder]:not([data-placeholder=""]):empty::before {
content: attr(data-placeholder);
color: var(--lib_base_multiselect_placeholder_color);
}
.optionContainer{
position: absolute;
z-index: 1;
width: 100%;
color:#000;
top: 100%;
display: block;
background-color: var(--lib_base_multiselect_optionContainer_bg);
border: 1px solid var(--lib_base_multiselect_optionContainer_border);
}
[dir=ltr] .optionContainer{
  left: 0;
}
[dir=rtl] .optionContainer{
right: 0;
}

.multiselect::placeholder,
.multiselect.disabled {
opacity: 0.5;
}
.disabled {
border-color: var(--lib_base_multiselect_disabled_border);
cursor: not-allowed;
}

.size_small {
padding: var(--lib_size_5);
}
.size_medium {
  padding: var(--lib_size_10);
}
.size_large{
  padding: var(--lib_size_15);
}

.highLight{
  outline: 2px solid red;
  /* var(--lib_base_multiselect_highLight_outline) */
  background-color: var(--lib_base_multiselect_highLight_bg)
}
.variant_plain, .variant_outlined, .variant_contained {
  border-width: 1px;
  border-style: solid;
}
.variant_flushed {
  border-bottom-width: 1px;
  border-bottom-style: solid
}

/* primary */
.color_primary.variant_plain {
color: var(--lib_base_multiselect_primary_plain_color);
border-color: var(--lib_base_multiselect_primary_plain_border);
background-color: var(--lib_base_multiselect_primary_plain_bg);
}
.color_primary.variant_plain:hover,
.color_primary.variant_plain.hovered {
color: var(--lib_base_multiselect_primary_plain_hover_color);
}
.color_primary.variant_plain:hover, .color_primary.variant_plain.hovered {
border-color: var(--lib_base_multiselect_primary_plain_hover_border);
background-color: var(--lib_base_multiselect_primary_plain_hover_bg);
}

.color_primary.variant_flushed {
color: var(--lib_base_multiselect_primary_flushed_color);
border-color: var(--lib_base_multiselect_primary_flushed_border);
background-color: var(--lib_base_multiselect_primary_flushed_bg);
}

.color_primary.variant_flushed:hover,
.color_primary.variant_flushed.hovered {
color: var(--lib_base_multiselect_primary_flushed_hover_color);
}

.color_primary.variant_flushed:hover, .color_primary.variant_flushed.hovered {
border-color: var(--lib_base_multiselect_primary_flushed_hover_border);
background-color: var(--lib_base_multiselect_primary_flushed_hover_bg);
}

.color_primary.variant_outlined {
color: var(--lib_base_multiselect_primary_outlined_color);
border-color: var(--lib_base_multiselect_primary_outlined_border);
background-color: var(--lib_base_multiselect_primary_outlined_bg);
}

.color_primary.variant_outlined:hover,
.color_primary.variant_outlined.hovered {
color: var(--lib_base_multiselect_primary_outlined_hover_color);
}

.color_primary.variant_outlined:hover, .color_primary.variant_outlined.hovered {
border-color: var(--lib_base_multiselect_primary_outlined_hover_border);
background-color: var(--lib_base_multiselect_primary_outlined_hover_bg);
}

.color_primary.variant_contained {
color: var(--lib_base_multiselect_primary_contained_color);
border-color: var(--lib_base_multiselect_primary_contained_border);
background-color: var(--lib_base_multiselect_primary_contained_bg);
}
.color_primary.variant_contained:hover,
.color_primary.variant_contained.hovered {
color: var(--lib_base_multiselect_primary_contained_hover_color);
}
.color_primary.variant_contained:hover, .color_primary.variant_contained.hovered {
border-color: var(--lib_base_multiselect_primary_contained_hover_border);
background-color: var(--lib_base_multiselect_primary_contained_hover_bg);
}

/* secondary */
.color_secondary.variant_plain {
color: var(--lib_base_multiselect_secondary_plain_color);
border-color: var(--lib_base_multiselect_secondary_plain_border);
background-color: var(--lib_base_multiselect_secondary_plain_bg);
}
.color_secondary.variant_plain:hover,
.color_secondary.variant_plain.hovered {
color: var(--lib_base_multiselect_secondary_plain_hover_color);
}
.color_secondary.variant_plain:hover, .color_secondary.variant_plain.hovered {
border-color: var(--lib_base_multiselect_secondary_plain_hover_border);
background-color: var(--lib_base_multiselect_secondary_plain_hover_bg);
}

.color_secondary.variant_flushed {
color: var(--lib_base_multiselect_secondary_flushed_color);
border-color: var(--lib_base_multiselect_secondary_flushed_border);
background-color: var(--lib_base_multiselect_secondary_flushed_bg);
}

.color_secondary.variant_flushed:hover,
.color_secondary.variant_flushed.hovered {
color: var(--lib_base_multiselect_secondary_flushed_hover_color);
}

.color_secondary.variant_flushed:hover, .color_secondary.variant_flushed.hovered {
border-color: var(--lib_base_multiselect_secondary_flushed_hover_border);
background-color: var(--lib_base_multiselect_secondary_flushed_hover_bg);
}

.color_secondary.variant_outlined {
color: var(--lib_base_multiselect_secondary_outlined_color);
border-color: var(--lib_base_multiselect_secondary_outlined_border);
background-color: var(--lib_base_multiselect_secondary_outlined_bg);
}

.color_secondary.variant_outlined:hover,
.color_secondary.variant_outlined.hovered {
color: var(--lib_base_multiselect_secondary_outlined_hover_color);
}

.color_secondary.variant_outlined:hover, .color_secondary.variant_outlined.hovered {
border-color: var(--lib_base_multiselect_secondary_outlined_hover_border);
background-color: var(--lib_base_multiselect_secondary_outlined_hover_bg);
}

.color_secondary.variant_contained {
color: var(--lib_base_multiselect_secondary_contained_color);
border-color: var(--lib_base_multiselect_secondary_contained_border);
background-color: var(--lib_base_multiselect_secondary_contained_bg);
}
.color_secondary.variant_contained:hover,
.color_secondary.variant_contained.hovered {
color: var(--lib_base_multiselect_secondary_contained_hover_color);
}
.color_secondary.variant_contained:hover, .color_secondary.variant_contained.hovered {
border-color: var(--lib_base_multiselect_secondary_contained_hover_border);
background-color: var(--lib_base_multiselect_secondary_contained_hover_bg);
}
/* danger */
.color_danger.variant_plain {
color: var(--lib_base_multiselect_danger_plain_color);
border-color: var(--lib_base_multiselect_danger_plain_border);
background-color: var(--lib_base_multiselect_danger_plain_bg);
}
.color_danger.variant_plain:hover,
.color_danger.variant_plain.hovered {
color: var(--lib_base_multiselect_danger_plain_hover_color);
}
.color_danger.variant_plain:hover, .color_danger.variant_plain.hovered {
border-color: var(--lib_base_multiselect_danger_plain_hover_border);
background-color: var(--lib_base_multiselect_danger_plain_hover_bg);
}

.color_danger.variant_flushed {
color: var(--lib_base_multiselect_danger_flushed_color);
border-color: var(--lib_base_multiselect_danger_flushed_border);
background-color: var(--lib_base_multiselect_danger_flushed_bg);
}

.color_danger.variant_flushed:hover,
.color_danger.variant_flushed.hovered {
color: var(--lib_base_multiselect_danger_flushed_hover_color);
}

.color_danger.variant_flushed:hover, .color_danger.variant_flushed.hovered {
border-color: var(--lib_base_multiselect_danger_flushed_hover_border);
background-color: var(--lib_base_multiselect_danger_flushed_hover_bg);
}

.color_danger.variant_outlined {
color: var(--lib_base_multiselect_danger_outlined_color);
border-color: var(--lib_base_multiselect_danger_outlined_border);
background-color: var(--lib_base_multiselect_danger_outlined_bg);
}

.color_danger.variant_outlined:hover,
.color_danger.variant_outlined.hovered {
color: var(--lib_base_multiselect_danger_outlined_hover_color);
}

.color_danger.variant_outlined:hover, .color_danger.variant_outlined.hovered {
border-color: var(--lib_base_multiselect_danger_outlined_hover_border);
background-color: var(--lib_base_multiselect_danger_outlined_hover_bg);
}

.color_danger.variant_contained {
color: var(--lib_base_multiselect_danger_contained_color);
border-color: var(--lib_base_multiselect_danger_contained_border);
background-color: var(--lib_base_multiselect_danger_contained_bg);
}
.color_danger.variant_contained:hover,
.color_danger.variant_contained.hovered {
color: var(--lib_base_multiselect_danger_contained_hover_color);
}
.color_danger.variant_contained:hover, .color_danger.variant_contained.hovered {
border-color: var(--lib_base_multiselect_danger_contained_hover_border);
background-color: var(--lib_base_multiselect_danger_contained_hover_bg);
}
/* success */
.color_success.variant_plain {
color: var(--lib_base_multiselect_success_plain_color);
border-color: var(--lib_base_multiselect_success_plain_border);
background-color: var(--lib_base_multiselect_success_plain_bg);
}
.color_success.variant_plain:hover,
.color_success.variant_plain.hovered {
color: var(--lib_base_multiselect_success_plain_hover_color);
}
.color_success.variant_plain:hover, .color_success.variant_plain.hovered {
border-color: var(--lib_base_multiselect_success_plain_hover_border);
background-color: var(--lib_base_multiselect_success_plain_hover_bg);
}

.color_success.variant_flushed {
color: var(--lib_base_multiselect_success_flushed_color);
border-color: var(--lib_base_multiselect_success_flushed_border);
background-color: var(--lib_base_multiselect_success_flushed_bg);
}

.color_success.variant_flushed:hover,
.color_success.variant_flushed.hovered {
color: var(--lib_base_multiselect_success_flushed_hover_color);
}

.color_success.variant_flushed:hover, .color_success.variant_flushed.hovered {
border-color: var(--lib_base_multiselect_success_flushed_hover_border);
background-color: var(--lib_base_multiselect_success_flushed_hover_bg);
}

.color_success.variant_outlined {
color: var(--lib_base_multiselect_success_outlined_color);
border-color: var(--lib_base_multiselect_success_outlined_border);
background-color: var(--lib_base_multiselect_success_outlined_bg);
}

.color_success.variant_outlined:hover,
.color_success.variant_outlined.hovered {
color: var(--lib_base_multiselect_success_outlined_hover_color);
}

.color_success.variant_outlined:hover, .color_success.variant_outlined.hovered {
border-color: var(--lib_base_multiselect_success_outlined_hover_border);
background-color: var(--lib_base_multiselect_success_outlined_hover_bg);
}

.color_success.variant_contained {
color: var(--lib_base_multiselect_success_contained_color);
border-color: var(--lib_base_multiselect_success_contained_border);
background-color: var(--lib_base_multiselect_success_contained_bg);
}
.color_success.variant_contained:hover,
.color_success.variant_contained.hovered {
color: var(--lib_base_multiselect_success_contained_hover_color);
}
.color_success.variant_contained:hover, .color_success.variant_contained.hovered {
border-color: var(--lib_base_multiselect_success_contained_hover_border);
background-color: var(--lib_base_multiselect_success_contained_hover_bg);
}
/*  */
.arrow{
position: absolute;
top: var(--lib_size_5);
font-size: var(--lib_fsize_11);
color: var(--lib_base_multiselect_arrow_color);
}
[dir=ltr] .arrow{
  transform: rotate(45deg);
  right: var(--lib_size_10);
}
[dir=rtl] .arrow{
transform: rotate(-45deg);
left: var(--lib_size_10);
}
.arrowlg{
top: var(--lib_size_7);
}

/* searcch impl */
.baseSearch
{
width: 100%;
position: relative;
}
.optionContainerSearch
{
position: absolute;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
top: 100%;
}
[dir=ltr] .optionContainerSearch
{
  left: 0;
}
[dir=rtl] .optionContainerSearch
{
right: 0;
}
.flexAuto
{
flex: 1;
overflow: auto;

}
.searchBox
{
padding: var(--lib_size_4);
}
.textboxui
{
  border: none
}
.icon{
width: var(--lib_size_12);
height: var(--lib_size_12);
}
[dir=ltr] .rotate{
  transform: rotate3d(1,0,0,180deg);
}
[dir=rtl] .rotate{
transform: rotate3d(-1,0,0,-180deg);
}
.iconBase{
width: inherit;
height: inherit;
}
.placeholder
{
  color: var(--lib_base_multiselect_placeholder_color);
}
[dir=ltr] .placeholder
{
  margin-left: var(--lib_size_10);
}
[dir=rtl] .placeholder
{
  margin-right: var(--lib_size_10);
}