.item-emoji {
font-size: 16.4px;
}

.item:hover {
background: var(--instance-bg-hover);
border: 1px solid var(--instance-border-hover);
}

.item {
margin: 4px;
cursor: pointer;
padding: 8px 8px 7px;
border-radius: 5px;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: 1px solid var(--border-color);
transition: background .15s linear;
background: var(--item-bg);
line-height: 1em;
contain: layout style paint;
}

.container.dark-mode {
--border-color: #d1d1d1;
--item-bg: #000;
--instance-bg: linear-gradient(180deg,#22252b,#000 80%);
--instance-bg-hover: linear-gradient(180deg,#3d4249,#000 80%);
--instance-border: #dcdcdc;
--instance-border-hover: #c7e0ff;
--sidebar-bg: #000;
--background-color: #000;
--discoveries-bg-active: #423a24;
--text-color: #fff;
}

.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: Roboto,sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
--text-color: #040404;
--background-color: #fff;
--border-color: #c8c8c8;
--item-bg: #fff;
--instance-bg: linear-gradient(0deg,#f7feff,#fff 70%);
--instance-bg-hover: linear-gradient(0deg,#d6fcff,#fff 90%);
--instance-border: #91a8c1;
--instance-border-hover: #91a8c1;
--sidebar-bg: hsla(0,0%,100%,0.93);
--discoveries-bg-active: #fff9ea;
background: var(--background-color);
color: var(--text-color);
display: flex;
flex-direction: column;
overflow: clip;
}

.sidebar-search {
display: flex;
align-items: center;
justify-content: right;
position: relative;
background: var(--background-color);
}

.sidebar-input {
width: 100%;
font-size: 15px;
border: 1px solid var(--border-color);
border-left: none;
border-right: none;
border-bottom: none;
outline: 0;
padding: 0 20px 0 40px;
padding-top: 0px;
padding-left: 40px;
height: 40px;
line-height: 18px;
position: relative;
background: url(/search.svg) no-repeat 22px 22px;
background-position-x: 22px;
background-position-y: 22px;
background-size: auto;
background-size: 21px 21px;
background-position: 10px 10px;
color: var(--text-color);
}

.sidebar-input {
background-size: 23px 23px;
background-position: 11px 12px;
height: 45px;
font-size: 16px;
line-height: 21px;
padding-left: 43px;
padding-top: 2px;
}

.elements {
display: flex;
flex-flow: wrap;
overflow-y: scroll;
flex-grow: 1;
align-content: baseline;
}

.inner-container {
display: flex;
flex-direction: row;
overflow: hidden;
flex-grow: 1;
}

.crafting-container {
display: flex;
flex-flow: column;
flex-shrink: 0;
width: 30%;
border-left: 1px solid var(--border-color);
}

.item.selected {
border-color: red;
}

.item.selected:hover {
border-color: red;
}

.item span {
pointer-events: none;
}

.crafting-tabs {
    display: flex;
    justify-content: space-evenly;
}

.crafting-tabs .tab[data-tab="1"] {
    background-image: url(/build.svg);
}

.crafting-tabs .tab[data-tab="2"] {
    background-image: url(/bulb.svg);
}

.crafting-tabs .tab[data-tab="3"] {
    background-image: url(/shopping-cart.svg);
}

.crafting-tabs .tab:last-child {
    border-right: none;
}

.crafting-tabs .tab.selected {
    background-color: #3d4249;
}

.crafting-tabs .tab:not(.selected):hover {
    background-color: #22252b;
}

.crafting-tabs .tab {
    flex-grow: 1;
  text-align: center;
  border: 1px solid var(--border-color);
  border-left: none;
  border-top: none;
  background: none no-repeat 11px 12px;
  background-size: 23px 23px;
  height: 45px;
  align-content: center;
}

.crafting-tabs-content {
    overflow-y: scroll;
    flex-grow: 1;
}

.crafting-tabs-content .tab.tab.tab {
    display: none;
}

.crafting-tabs-content .tab.tab.tab.selected {
    display: flex;
    flex-flow: column;
}

.element-viewer {
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: center;
padding: 10px;
font-size: x-large;
}

.crafting-tabs-content .tab[data-tab="1"].selected {
    display: flex;
    flex-flow: row;
}

.crafting-tabs-content .tab[data-tab="1"] table {
    width: 100%;
}


.crafting-tabs-content .tab[data-tab="1"] .c1 {
    text-align: right;
}
.crafting-tabs-content .tab[data-tab="1"] .c2 {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}
.crafting-tabs-content .tab[data-tab="1"] .c3 {
    text-align: left;
}


.recipe {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-flow: row;
    text-align: center;
    margin: 1px 10px;
    }