.feathericons-cheatsheet {
	margin: -4px;
	display:flex;
	flex-wrap:wrap;
}

.feathericons-element {
	width: 172px;
	height: 172px;
	padding: 6px 4px;
	text-align: center;
	float: left;
	margin: 4px;
	font-size: 11px;
	border: 1px solid rgba(127, 127, 127, 0.25);
	border-radius: 4px;
	background-color: #fff;
	line-height: 1.5;
}

.feathericons-cheatsheet .fi-icon {
	font-family: feathericons !important;
	font-size: 36px;
	color: #345;
}

.feathericons-element .fi-icon-name {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 0.2em;
}

.feathericons-cheatsheet .fi-icon-class,
.feathericons-cheatsheet output {
	font-family: 'SFMono-Regular', Consolas,
		'Liberation Mono', Menlo,
		'Andale Mono', 'DejaVu Sans Mono',
		monospace;
	font-size: inherit;
}

.feathericons-cheatsheet output {
	font-size: inherit;
	border: 1px solid rgba(127, 127, 127, 0.25);
	padding: 2px 4px;
	margin: 0 2px;
}

.feathericons-element:hover {
	background-color: #345;
	color: #fff;
	transition: all 0.2s;
}

.feathericons-element:hover .fi-icon {
	color: #fff;
}

.rot-feather-letter{
	background: var(--grey);
    padding: 0px 4px;
    margin-right: 2px;
    color: white;
    border-radius: 3px;
}
.rot-feather-letter:hover,
.rot-feather-letter.is-active{
	background:var(--primary-dark);
	color:white!important;
}

.rot-feather-letters{
	margin-bottom:.7rem;
}