.acf-icon-picker {
	display: flex;
}

.acf-icon-picker__popup-svg img,
.acf-icon-picker__svg img{
	width: 40px;
	height: 40px;
}

.acf-icon-picker__img{
	cursor: pointer;
}

.acf-icon-picker__popup{
	--popup-width: 90vw;
	--popup-height: 90vh;
	--popup-padding: 20px;
	--columns: 6;

	position: fixed;
	z-index: 9;
	background-color: #fff;
	padding: 0 var(--popup-padding);;
	width: var(--popup-width);
	height: var(--popup-height);
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	        transform: translate3d(-50%,-50%,0);
	overflow: hidden;
}
.acf-icon-picker__popup__icons{
	--icons-margin-top: 20px;
/*	position: fixed; */
	margin-top: var(--icons-margin-top);
/*	width: calc(100% - 2 * var(--popup-padding)); */
	height: calc(var(--popup-height) - var(--icons-margin-top) - 40px);
	overflow: scroll;
}

.acf-icon-picker__popup__close {
	margin-top: 20px;
	float: right;
}

.acf-icon-picker__popup__title {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 50%;
}
.acf-icon-picker__popup__title span {
	margin: auto 0;
}
.acf-icon-picker__popup ul#icons-list{
	position: relative;
	margin: 0;
}
.acf-icon-picker__popup ul.acf-icon-picker__families{
	list-style-type: none;
	padding-right: 1em;
	float: left;
	border-right: 1px solid #ddd;
	margin: 0 1em 0 0;
	height: 100%;
	width: 10vw;
}


.acf-icon-picker__families p {
	max-width: 10vw;
	font-style: italic;
	border-top: 1px solid #ddd;
	padding-top: 1em;
	bottom: 0;
	position: absolute;
}
.acf-icon-picker__popup ul#icons-list:before,
.acf-icon-picker__popup ul#icons-list:after{
	content: "";
	display: table;
	width: 100%;
}

.acf-icon-picker__popup ul#icons-list li{
	position: absolute;
	width: 120px;
	height: 90px;
	padding-top: 15px;
	cursor: pointer;
	text-align: center;
}

.acf-icon-picker__popup ul#icons-list li:hover{
	background-color: #eee;
}

.acf-icon-picker__popup ul#icons-list li span{
	color: #222;
	padding: 0 0.5em;
	display: block;
}

.acf-icon-picker__popup-holder{
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 9991;
}
.acf-icon-picker__svg--span{
	width: 50px;
	height: 50px;
	border-radius: 50px;
	text-align: center;
	line-height: 50px;
	background-color: #eee;
	color: #aaa;
	font-size: 20px;
	font-weight: 300;
	display: inline-block;
}

.acf-icon-picker__svg--span:hover{
	background-color: #ddd;
}

.acf-icon-picker__remove {
	display: none;
	background-color: #f4f4f4;
	padding: 2px;
	border: 1px solid #E1E1E1;
	font-size: 11px;
	cursor: pointer;
	margin-top: 5px;
	line-height: 1;
}

.acf-icon-picker__remove--active {
	display: inline-block;
	margin: auto 1em;
}

.acf-icon-picker__filter {
	display: block;
	width: 50%;
}