/* Profile Flair: styles scoped to badges and their management form. */
.profile-flair { display: block; margin: 10px 0; padding: 0; }
.flair-icon { display: inline-block; position: relative; vertical-align: middle; margin: 0 2px 2px 0; }
.flair-icon img { width: auto; max-width: 100%; vertical-align: middle; }
.flair-count { position: absolute; right: 0; bottom: 0; z-index: 1; font-size: 12px; line-height: 1; }
#user_flair .postbody { float: none; width: auto; padding: 0; }

/* Equal badge tiles in the user control panel. */
#user_flair .flair {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
 gap: 12px;
 align-items: stretch;
}
#user_flair .flair > h4,
#user_flair .flair > hr,
#user_flair .flair > p { grid-column: 1 / -1; margin: 0; }
#user_flair table.flair-tile {
 width: 100%;
 height: 100px;
 table-layout: fixed;
 border-collapse: separate;
 border-spacing: 0;
 border: 1px solid #293e30;
 border-radius: 6px;
 background: #0e1711;
 margin: 0;
}
#user_flair .flair-tile th {
 width: 72px;
 padding: 12px;
 vertical-align: middle;
 text-align: center;
 background: transparent;
}
#user_flair .flair-tile td { padding: 6px 10px; vertical-align: middle; }
#user_flair .flair-tile h5 {
 margin: 0;
 color: #e3f6e9;
 font-size: 13px;
 line-height: 1.4;
 overflow-wrap: anywhere;
}
#user_flair .flair-tile .flair-icon { margin: 0; }
#user_flair .flair-tile .flair-icon img {
 height: 44px;
 width: auto;
 max-width: 60px;
 object-fit: contain;
}
#user_flair .flair-buttons { height: 42px; }
#user_flair .flair-buttons input {
 min-width: 36px;
 min-height: 34px;
 margin: 0 4px 0 0;
 vertical-align: middle;
}