:root {
--default-box-shadow:0 1px 1px rgba(0, 0, 0, 0.11);
--default-border-radius:2px;

--similar-btn-display: flex;
}
html {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
color: #222;
}
*, *:before, *:after {
box-sizing: inherit;
font-family: inherit;
}
body {
background: #efefef;
margin:0;
}
.emoji-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 0.5rem;
} 
.related-topics-list {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
.related-topics-list::after {
content: "";
flex: auto;
}
.related-topics-list > div {
margin: 0.25rem;
background: white;
box-shadow: var(--default-box-shadow);
border-radius: var(--default-border-radius);
padding: 0.25rem;
}
.related-topics-area {
max-width:800px;
margin:0 auto;
margin-bottom:1rem;
}
.related-topics-area a {
color: black;
text-decoration: none;
}
main {
padding: 0.25rem;
margin: 0.25rem;
}
.emoji-list .emoji-ctn .emoji {
font-size:1.75rem;
cursor: pointer;
border-radius: 3px;
padding: 0.4rem;
border: 1px solid #bcbcbc;
background: #f6f6f6;
white-space: nowrap;
min-width: 3.9rem;
text-align: center;
flex-grow: 1;

/* for the long-press stuff */
user-select:none;
-webkit-touch-callout: none;
-webkit-user-select: none;

display: flex;
align-items: center;
justify-content: center;
}
.emoji-list .emoji-ctn {
display: flex;
flex-direction: column;
margin: 0.25rem;
}
.emoji-list .emoji-ctn .under-emoji-ctn {
display: var(--similar-btn-display);
}
.emoji-list .emoji-ctn .similar-btn {
display: flex;
cursor: pointer;
user-select: none;
padding: 0.125rem;
align-items: center;
justify-content: center;
margin-top: 0.125rem;
flex-grow: 1;
}
.emoji-list .emoji-ctn .downvote-btn:before {
content: '👎';
}
.emoji-list .emoji-ctn .downvote-btn {
display: flex;
cursor: pointer;
user-select: none;
padding: 0.125rem;
align-items: center;
justify-content: center;
margin-top: 0.125rem;
margin-left: 0.125rem;
filter: saturate(0.3) hue-rotate(302deg);
}
.emoji-list .emoji-ctn .similar-btn .search-icon {
height: 11px;
width: 11px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='122.879px' height='119.799px' viewBox='0 0 122.879 119.799' enable-background='new 0 0 122.879 119.799' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M49.988,0h0.016v0.007C63.803,0.011,76.298,5.608,85.34,14.652c9.027,9.031,14.619,21.515,14.628,35.303h0.007v0.033v0.04 h-0.007c-0.005,5.557-0.917,10.905-2.594,15.892c-0.281,0.837-0.575,1.641-0.877,2.409v0.007c-1.446,3.66-3.315,7.12-5.547,10.307 l29.082,26.139l0.018,0.016l0.157,0.146l0.011,0.011c1.642,1.563,2.536,3.656,2.649,5.78c0.11,2.1-0.543,4.248-1.979,5.971 l-0.011,0.016l-0.175,0.203l-0.035,0.035l-0.146,0.16l-0.016,0.021c-1.565,1.642-3.654,2.534-5.78,2.646 c-2.097,0.111-4.247-0.54-5.971-1.978l-0.015-0.011l-0.204-0.175l-0.029-0.024L78.761,90.865c-0.88,0.62-1.778,1.209-2.687,1.765 c-1.233,0.755-2.51,1.466-3.813,2.115c-6.699,3.342-14.269,5.222-22.272,5.222v0.007h-0.016v-0.007 c-13.799-0.004-26.296-5.601-35.338-14.645C5.605,76.291,0.016,63.805,0.007,50.021H0v-0.033v-0.016h0.007 c0.004-13.799,5.601-26.296,14.645-35.338C23.683,5.608,36.167,0.016,49.955,0.007V0H49.988L49.988,0z M50.004,11.21v0.007h-0.016 h-0.033V11.21c-10.686,0.007-20.372,4.35-27.384,11.359C15.56,29.578,11.213,39.274,11.21,49.973h0.007v0.016v0.033H11.21 c0.007,10.686,4.347,20.367,11.359,27.381c7.009,7.012,16.705,11.359,27.403,11.361v-0.007h0.016h0.033v0.007 c10.686-0.007,20.368-4.348,27.382-11.359c7.011-7.009,11.358-16.702,11.36-27.4h-0.006v-0.016v-0.033h0.006 c-0.006-10.686-4.35-20.372-11.358-27.384C70.396,15.56,60.703,11.213,50.004,11.21L50.004,11.21z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.emoji-list .emoji-ctn .similar-btn span.label:before {
content: "similar";
}
.emoji-list .emoji:hover {
background: white;
}
#suggestEmojiCtn {
/* border: 2px solid #040404; */
border: 2px solid #00b3a7;

background: #dedede;
padding: 0.5rem;
font-size:1rem;
border-radius: 3px;
height: 3rem;
width:fit-content;
margin: 0 auto;
z-index: 10;
}
#submitEmojiInput {
min-width: 6rem;
}
@media screen and (max-width: 500px) {
#suggestEmojiCtn {
  width: 95vw;
}
#submitEmojiInput {
  min-width: 3rem;
}
}

.__fs-branding {
display: none !important;
}

#topSearchBarCtn {
padding: 0.25rem;
background-color: #d7d7d7;
border-bottom: 1px solid #bfbfbf;
}

#suggestSearchLoadingEl {
width: 100%;
display: flex;
position: absolute;
z-index: 100;
background-color: #dadada;
height: 100%;
}
#suggestSearchElModal {
display: flex;
flex-direction: column;
background: white;
margin: auto;
width: 90vw;
height: 90vh;
max-width: 500px;
max-height: 500px;
border-radius: 2px;
box-shadow: 0px 2px 5px #0e0e0e;
position: relative;
}

#suggestSearchElIframeCtn {
flex-grow:1;
border-top:1px solid #cdcdcd;
}

@media (prefers-color-scheme: dark) {
html {
  color: #d5d5d5;
}
body {
  background:#000000;
}
.emoji-list .emoji-ctn .emoji {
  background: #2c2c2c;
  color:rgb(240, 240, 240);
  border: 1px solid #565656;
}
.emoji-list .emoji-ctn .similar-btn .search-icon {
  filter: invert(1);
}
#topSearchBarCtn {
  padding: 0.25rem;
  background-color: #262626;
  border-bottom: 1px solid #3f3f3f;
}
#suggestEmojiCtn {
  background: #181818;
  color:rgb(240, 240, 240);
}
#suggestSearchLoadingEl {
  background-color: rgb(45 45 45);
  color:rgb(240, 240, 240);
}
#suggestSearchElModal {
  background: #515151;
  border: 1px solid #727272;
}
#suggestSearchElIframeCtn {
  border-top:1px solid #696969;
}
.related-topics-list > div {
  background: #323232;
}
.related-topics-area a {
  color: rgb(237, 237, 237);
}
}
.tooltip {
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 20px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    white-space: nowrap;
    pointer-events: none;
}