/* Search control */
.form-control.search {
	margin: 0 auto;
	padding-right: 2rem;
	padding-left: 3rem;
	border-radius: 2rem;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'#6c757d\'  stroke-opacity=\'.5\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'feather feather-search\'><circle cx=\'11\' cy=\'11\' r=\'8\'></circle><line x1=\'21\' y1=\'21\' x2=\'16.65\' y2=\'16.65\'></line></svg>');
	background-repeat: no-repeat;
	background-position: 1rem center;
	background-size: 24px auto;
}

.close-search {
	display: block;
	float: right;
	width: 18px;
	height: 24px;
	margin-top: -36px;
	margin-right: 20px;
	cursor: pointer;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'#6c757d\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'feather feather-x-circle\'><circle cx=\'12\' cy=\'12\' r=\'10\'></circle><line x1=\'15\' y1=\'9\' x2=\'9\' y2=\'15\'></line><line x1=\'9\' y1=\'9\' x2=\'15\' y2=\'15\'></line></svg>');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}

.close-search:hover {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'#007bff\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'feather feather-x-circle\'><circle cx=\'12\' cy=\'12\' r=\'10\'></circle><line x1=\'15\' y1=\'9\' x2=\'9\' y2=\'15\'></line><line x1=\'9\' y1=\'9\' x2=\'15\' y2=\'15\'></line></svg>');
}

/* Icons list: Grid */
.icons {
	margin-right: -10px;
	margin-left: -10px;
}

.col-6,
.col-lg-3,
.col-sm-4,
.col-xl-2 {
	margin-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
}
/* Icons list: Format */
.icon .container-img {
	max-width: 32px;
	margin-right: 0.75rem;
	flex: 0 0 32px;
}

.icon .name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 600;
	line-height: 1.2rem;
}

.icon .symbol {
	display: block;
}

.icon a,
.icon span.placeholder {
	transition: 0.1s ease-in-out;
	border-radius: 0.6rem;
}

.icon a img {
	display: block;
	float: left;
	width: 32px;
	height: auto;
}

/* Icons list: Hover state */
.icon a:hover {
	margin-top: -4px;
	text-decoration: none;
	background-color: #fff !important;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* View More Icon */
.icon a:hover .row::after {
	float: right;
	width: 18px;
	height: 18px;
	margin-right: 1rem;
	content: ' ';
	background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'#6c757d\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'feather feather-plus-circle\'><circle cx=\'12\' cy=\'12\' r=\'10\'></circle><line x1=\'12\' y1=\'8\' x2=\'12\' y2=\'16\'></line><line x1=\'8\' y1=\'12\' x2=\'16\' y2=\'12\'></line></svg>');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}

/* Icons list: Placeholder */
.placeholder {
	animation-name: backgroundLoading;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	background: linear-gradient(to right, #f8f9fa 8%, #fff 18%, #f8f9fa 33%);
	background-size: 500px 500px;
	animation-fill-mode: forwards;
}

@keyframes backgroundLoading {
	0% {
		background-position: -500px 0;
	}

	100% {
		background-position: 500px 0;
	}
}

/* Modal */
.modal-backdrop.show {
	opacity: 0.8;
}

.modal-body {
	padding: 0;
	border-radius: 0.3rem !important;
}

/* Infos icon */
.info-icon {
	width: 100%;
}

.info-icon td,
.info-icon th {
	padding: 1.5rem;
}

.info-icon thead th {
	border-top: none;
	border-bottom-width: 1px;
	border-bottom-color: rgba(127, 127, 127, 0.1);
}

.info-icon .variant-white {
	background-color: #1e1e1e !important;
}

.info-icon .format-128 img,
.info-icon .format-svg img {
	width: 100%;
	height: auto;
}

.info-icon .format-svg img {
	max-width: 48px;
}

.info-icon .format-128 img {
	max-width: 128px;
}

.info-icon .format-32-2x img {
	width: 32px;
	height: auto;
}
