/* this is basically aesthetic-icon-picker/assets/css/style.css adjustment file */
.aim-modal--icon-preview {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 20px;
	margin: 20px 0;
}

.aim-modal .aim-modal--header {
	justify-content:right;
}

.aim-modal--header-close-btn {
	width:20px;
	height:20px;
	cursor:pointer;
	position:relative;
}

.aim-modal--header-close-btn:after,
.aim-modal--header-close-btn:before {
	content:'';
	position:absolute;
	top:calc(50% - 1.5px);
	width:100%;
	height:3px;
	background-color:#495157;
	transform-origin:center;
}

.aim-modal--header-close-btn:after {
	transform:rotate(45deg);
}

.aim-modal--header-close-btn:before {
	transform:rotate(-45deg);
}

.aim-close{
	transition: all 0.1s ease-in-out;
}

.aim-open{
	transition: all 0.1s ease-in-out;
}

@media (max-width: 1439px) {
	.aim-modal--icon-preview {
		grid-template-columns: repeat(6, 1fr);
	}
}
@media (max-width: 1024px) {
	.aim-modal--icon-preview {
		grid-template-columns: repeat(5, 1fr);
	}
}
@media (max-width: 767px) {
	.aim-modal--icon-preview {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (max-width: 479px) {
	.aim-modal--icon-preview {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 479px) {
	.aim-modal--sidebar {
		display: none;
	}
}