.ss-main{
position:relative;
display:inline-block;
user-select:none;
color:#666;
width:100%;
text-align:center;
}
.ss-main .ss-single-selected{
display:flex;
text-align:center;
align-items:center;
cursor:pointer;
width:100%;
//width: auto;
//width: 250px;
//position:absolute;
height:40px;
padding:6px;
border:1px solid #dcdee2;
border-radius:8px;

background-color:#fff;
//background-color: #dcdee2;

outline:0;
box-sizing:border-box;
transition:background-color .2s
}
.ss-main .ss-single-selected.ss-disabled{
background-color:#dcdee2;
cursor:not-allowed
}
.ss-main .ss-single-selected.ss-open-above{
border-top-left-radius:0;
border-top-right-radius:0
}
.ss-main .ss-single-selected.ss-open-below{
border-bottom-left-radius:0;
border-bottom-right-radius:0
}
.ss-main .ss-single-selected .placeholder{
//display:flex;
flex:1 1 100%;
//text-align:left;
text-align:center;

align-items:center;

width:calc(100% - 30px);
line-height:1em;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

font-size:14pt;

}

.ss-main .ss-single-selected .placeholder,.ss-main .ss-single-selected .placeholder *{
display:flex;
align-items:center;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
text-align:center;

color: black;

}
.ss-main .ss-single-selected .placeholder *{
width:auto;
text-align:center;
align-items:center;
}
.ss-main .ss-single-selected .placeholder .ss-disabled{
//color:#dedede;
//color: #8c8c8c;

color: black;

text-align:center;
}
.ss-main .ss-single-selected .ss-deselect{
display:flex;
align-items:center;
justify-content:flex-end;
flex:0 1 auto;
margin:0 6px;
font-weight:700;
text-align:center;
}
.ss-main .ss-single-selected .ss-deselect.ss-hide{
display:none
}
.ss-main .ss-single-selected .ss-arrow{
display:flex;
align-items:center;
justify-content:flex-end;
flex:0 1 auto;
margin:0 6px;
text-align:center;
}
.ss-main .ss-single-selected .ss-arrow span{
border:solid #666;
border-width:0 2px 2px 0;
display:inline-block;
padding:3px;
transition:transform .2s,margin .2s;
text-align:center;
}
.ss-main .ss-single-selected .ss-arrow span.arrow-up{
transform:rotate(-135deg);
margin:3px 0 0
}
.ss-main .ss-single-selected .ss-arrow span.arrow-down{
transform:rotate(45deg);
margin:-3px 0 0
}
.ss-main .ss-multi-selected{
display:flex;
flex-direction:row;
cursor:pointer;
min-height:40px;

width:100%;
//font-size: 14pt;


padding:0 0 0 1px;
border:1px solid #dcdee2;
border-radius:8px;

//background-color:red;
background-color:#fff;

outline:0;
box-sizing:border-box;
transition:background-color .2s
}


.ss-main .ss-multi-selected.ss-disabled{
background-color:#dcdee2;
cursor:not-allowed
}
.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled{
color:#666
}
.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete{
cursor:not-allowed
}
.ss-main .ss-multi-selected.ss-open-above{
border-top-left-radius:0;
border-top-right-radius:0
}
.ss-main .ss-multi-selected.ss-open-below{
border-bottom-left-radius:0;
border-bottom-right-radius:0
}
.ss-main .ss-multi-selected .ss-values{
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
flex:1 1 100%;
width:calc(100% - 30px);
//width:calc(100% + 50px);
}
.ss-main .ss-multi-selected .ss-values .ss-disabled{
display:flex;
padding:4px 5px;
margin:2px 0;
line-height:1em;
align-items:center;
width:100%;
//color:#dedede;
//color: #8c8c8c;

color: black;

font-size: 14pt;


overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
@keyframes scaleIn{
0%{transform:scale(0);opacity:0}to{transform:scale(1);
opacity:1
}
}
@keyframes scaleOut{
0%{transform:scale(1);
opacity:1}to{transform:scale(0);
opacity:0
}
}
.ss-main .ss-multi-selected .ss-values .ss-value{
display:flex;
user-select:none;
align-items:center;
font-size:18px;
height:28px;
padding:1px 4px;

//width:calc(100% + 50px);

margin:1px 1px 1px 0;
color:#fff;
background-color:#5897fb;
//background-color:red;
border-radius:8px;
animation-name:scaleIn;
animation-duration:.2s;
animation-timing-function:ease-out;
animation-fill-mode:both;
}
.ss-main .ss-multi-selected .ss-values .ss-value.ss-out{
animation-name:scaleOut;
animation-duration:.2s;
animation-timing-function:ease-out
}
.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete{
margin:0 0 0 10px;
cursor:pointer;
width: 28px;
height: 28px;
padding: 0px 0px;
//font-size: 20pt;
//color: red;
//color: #5987fb;
color: transparent;
background-image:url(images/removedropdown.png);
background-repeat:no-repeat;
background-size:cover;
}
.ss-main .ss-multi-selected .ss-add{
display:flex;
flex:0 1 3px;
margin:9px 12px 0 5px;
}
.ss-main .ss-multi-selected .ss-add .ss-plus{
display:flex;
justify-content:center;
align-items:center;
background:#666;
position:relative;
height:10px;
width:2px;
transition:transform .2s;
}
.ss-main .ss-multi-selected .ss-add .ss-plus:after{
background:#666;
content:"";
position:absolute;
height:2px;
width:10px;
left:-4px;
top:4px;
}
.ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross{
transform:rotate(45deg)
}


.ss-content{
//position:relative;
position: absolute;


text-align:center;

//font-size: 15pt;
font-size: 15pt;


width:100%;
//width:auto;

margin:-1px 0 0;
//margin: -1px -35 0;
//margin: -1px calc(100% - 110%) 0;

align-items:center;


box-sizing:border-box;
border:1px solid #dcdee2;
z-index:1010;


//background-color:#fff;
//background-color:#eeeeee;
background-color:#b3e1f0;
//background-color:#ffffff;

transform-origin:center top;
transition:transform .2s,opacity .2s;
opacity:0;
transform:scaleY(0);
}
.ss-content.ss-open{
display:block;
opacity:1;
transform:scaleY(1);
}
.ss-content .ss-search{
display:flex;
flex-direction:row;
padding:4px 4px 3px;
}
.ss-content .ss-search.ss-hide,.ss-content .ss-search.ss-hide input{
height:0;
opacity:0;
padding:0;
margin:0;
}
.ss-content .ss-search input{
display:inline-flex;
font-size:inherit;
line-height:inherit;
flex:1 1 auto;
width:100%;
min-width:0;
height:30px;
padding:3px 4px;
margin:0;
border:1px solid #dcdee2;
border-radius:8px;
background-color:#fff;
outline:0;
//text-align:left;
text-align:center;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-appearance:textfield;
}
.ss-content .ss-search input::placeholder{
color:#8a8a8a;
//color:black;
vertical-align:middle;
text-align:center;
}
.ss-content .ss-search input:focus{
box-shadow:0 0 5px #5897fb;
}
.ss-content .ss-search .ss-addable{
display:inline-flex;
justify-content:center;
align-items:center;
cursor:pointer;
font-size:14px;
font-weight:700;
flex:0 0 30px;
height:30px;
margin:0 0 0 8px;
border:1px solid #dcdee2;
border-radius:8px;
box-sizing:border-box;
}
.ss-content .ss-addable{
padding-top:0;
}
.ss-content .ss-list{
max-height:800px;
overflow-x:hidden;
overflow-y:auto;
//text-align:left;
text-align:center;
}
.ss-content .ss-list .ss-optgroup .ss-optgroup-label{
padding:6px 10px;
font-weight:700;
}
.ss-content .ss-list .ss-optgroup .ss-option{
padding:6px 6px 6px 25px;
}
.ss-content .ss-list .ss-optgroup-label-selectable{
cursor:pointer;
}
.ss-content .ss-list .ss-optgroup-label-selectable:hover{
color:#fff;
background-color:#5897fb;
}
.ss-content .ss-list .ss-option{
//padding:6px 10px;
padding:3px 3px;
cursor:pointer;
user-select:none;
}
.ss-content .ss-list .ss-option *{
display:inline-block;
}
.ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:hover{
color:#fff;
background-color:#5897fb;
//background-color:red;
}
.ss-content .ss-list .ss-option.ss-disabled{
cursor:not-allowed;
//color:#dedede;
color: white;
//background-color:#fff;
background-color: lightskyblue;
}
.ss-content .ss-list .ss-option:not(.ss-disabled) .ss-option-selected{
color:#666;
background-color:rgba(88,151,251,.1);
text-align:center;
}
.ss-content .ss-list .ss-option.ss-hide{
display:none;
}
.ss-content .ss-list .ss-option .ss-search-highlight{
background-color:#fffb8c;
}