.popup-shade{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

.popup{
	position:absolute;
	background-color:white;
	border:1px solid rgb(133,133,133);
	border-radius:0 0 3px 3px;
	width:fit-content;
	cursor:pointer;
}

.popup.above{
	border-radius:3px 3px 0 0;
}

.popup > :hover,
.row.popped{
	background-color:rgba(0,0,0,0.2);
}

.input-group.popped:not(.above) *{
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}

.input-group.popped.above *{
	border-top-left-radius:0;
	border-top-right-radius:0;
}

/* input-group */
.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.input-group > *{
	border:1px solid rgb(133,133,133);
	border-radius:3px;
}

.input-group .append,
.input-group .prepend{
	display:flex;	
}

.input-group > input{
	position:relative;
	flex: 1 1 auto;
	width:unset;
}

.input-group > input:focus{
	outline:none;
}

.input-group:focus-within{
	border:1px solid blue;
	border-radius:0.25em;
	margin:-1px;
}

.input-group :not(:last-child){
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group :not(:last-child):not(:first-child){
	border-right:0;
	border-radius:0;
}

.input-group :last-child{
	border-top-left-radius:0 !important;
	border-bottom-left-radius:0 !important;
}