*, :before, :after {
  	box-sizing: border-box;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
}

.pselect-wrapper > select.pselect{
	display: none;
}
.pselect-wrapper{
	position: relative;
	border:  solid 1px #ccc;
	border-radius: .25rem;
}
.pselect-wrapper.disabled,
.pselect-wrapper.disabled > .pselect-overlay{
	cursor: not-allowed;
	color: #ccc;
	background-color: #dedede;
}
.pselect-overlay{
	width: 100%;
	
	/* standardize size with text input */
	font-size: inherit;
	color: #555;

	display: flex;
	align-items: center;
	background-color: white;
	cursor: pointer;
}
.pselect-placeholder{
	flex: 1;
	padding: 6px 12px; /*standardize with other libs*/
	font-size: inherit;
}
.pselect-placeholder.search{
	padding: 0 12px; /* to make space for the input */
}
.pselect-placeholder:not(.tab){
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.pselect-placeholder.tab{
	display: flex;
	flex-wrap: wrap;
}
.pselect-icon{
	margin: 0 6px;
}
.pselect-overlay > svg,
.pselect-opt > svg,
.pselect-optsearch-clear > svg,
.pselect-allwrapper > svg{
	font-size:1em; 
	height:1em; 
	width:1em;
	margin-right: 5px;
}
/* options */
.pselect-options{
    position:absolute;
    width:100%;
    box-sizing:border-box;
    border:1px solid #dcdee2;
    z-index:1010;
    background-color:#fff;
    transform-origin:center top;
    transition:transform .2s,opacity .2s;
    opacity:0;transform:scaleY(0);
    -webkit-transition-delay: .1s; /* Safari */
    transition-delay: .1s;

    padding: 5px;
    
    min-height: 100px; /*test */
    
    flex-direction: column;
}
.pselect-options:not(.open) > .pselect-optgroup{
	display: none;
}
.pselect-options.open{
    display: flex;
    opacity:1;
    transform:scaleY(1);
}
.pselect-opt{
    padding: 6px 10px;
    display: flex;
    align-items: center;
}
.pselect-opt.selected{
	background-color: #efefef;
}
.pselect-opt:not(.readonly){
	cursor: pointer;
}
.pselect-opt.disabled{ /*disabled option*/
    color: #f3f3f3;
    cursor: not-allowed;
}
.pselect-opt:not(.readonly):hover,
.pselect-allwrapper:hover{
    background-color: #f3f3f3;
}
.pselect-opt-text{
	flex: 1;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.pselect-opt:not(.selected) > svg{
	display: none;
}
.pselect-optsearch{
    border:1px solid #dcdee2;
    border-radius: 4px;
    padding: 6px 0px 6px 5px;
    color:#777;
    width: 100%;
    min-height: 1.5rem; /* when string is empty */
    font-size: inherit;
    cursor: pointer;
}
.pselect-optsearch:disabled{
	cursor: not-allowed;
	color: #555;
	background-color: #dedede;
}
.pselect-placeholder.search > .pselect-optsearch{
	border: none !important;
}
.pselect-optsearch-wrapper{
    display: flex;
}
.pselect-optsearch-clear{
    z-index:1012; 
    position:absolute; 
    right: 20px;
    align-self:center;
    cursor: pointer;
}
.pselect-optsearch-clear{
    color: #ccc;
}
.pselect-optsearch-clear:hover{
    color: #aaa;
}
.pselect-optgroup{
	color: #333;
	overflow-y: scroll; /* so that the bar is always present */
}
/* display in tab mode */
.pselect-displaymultpart{ /* for the individual parts in a multiple selection */
    background-color:#eee; 
    border-radius:4px; 
    display:inline-block; 
    padding: 3px 5px;
    margin-right: 5px;
    margin-bottom: 1px;
    display: flex;
    align-items:center;
}
.pselect-optmulticon{
    margin-left: 5px;
    color:#ccc;
    cursor: pointer;

    /* do not use em here */
    font-size: .7rem;
    width: .7rem;
    height: .7rem;
}
.pselect-optmulticon:hover{
    margin-left: 5px;
    color:#e2e6ea;
}
.pselect-allwrapper{
	display: flex;
	padding: 6px 10px;
	border-bottom: solid 1px #888;
	/* flex: 0 0 32px; */
	overflow-y: scroll;
	margin-bottom: 4px;
}
.pselect-allwrapper.disabled{
	cursor:not-allowed;
	color: #ccc;
	background-color: #f5f5f5;
}
.pselect-allwrapper:not(.disabled) > .pselect-opt-text{
	color: #4f9fcf;
}
.pselect-allwrapper:not(.selected) > svg{
	display: none;
}
/* loader */
.pselect-options:not(.loading) > .pselect-loaderwrapper{
	display: none;
}
.pselect-options.loading > .pselect-loaderwrapper{
	display: flex;
}
.pselect-loaderwrapper {
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.6);
}
.pselect-loader {
    display: inline-block;
}
.pselect-loader:after {
    content: " ";
    display: block;
    width: 2em;
    height: 2em;
    margin: 1px;
    border-radius: 50%;
    border: 4px solid #fff;
    border-color: #555 transparent #aaa transparent;
    opacity: .9;
    animation: dual-ring 1.5s linear infinite;
}
@keyframes dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* supporting pform */
.pselect-wrapper.pform-wrapper:not(.error):not(.success):not(.loading):not(.warning) > .pselect-overlay > .pform-icons > svg:not(.pselect-chevron),
.pselect-wrapper.pform-wrapper.error > .pselect-overlay > .pform-icons > svg:not(.pform-icon-error),
.pselect-wrapper.pform-wrapper.warning > .pselect-overlay > .pform-icons > svg:not(.pform-icon-warning),
.pselect-wrapper.pform-wrapper.success > .pselect-overlay > .pform-icons > svg:not(.pform-icon-success),
.pselect-wrapper.pform-wrapper.loading > .pselect-overlay > .pform-icons > svg:not(.pform-icon-loading)
{
	display: none;
}
.pselect-wrapper.pform-wrapper.error > .pselect-overlay > .pform-icons > svg.pform-icon-error,
.pselect-wrapper.pform-wrapper.warning > .pselect-overlay > .pform-icons > svg.pform-icon-warning,
.pselect-wrapper.pform-wrapper.success > .pselect-overlay > .pform-icons > svg.pform-icon-success,
.pselect-wrapper.pform-wrapper.loading > .pselect-overlay > .pform-icons > svg.pform-icon-loading{
	display: block;
}