html, body {
    height: 100vh;
}

body {
  font-family: sans-serif;
  margin: 20px
}

.navbar {
  display: flex;
}

.navbar > *:not(:last-child) { margin-right: 20px; }

.card-header  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}

button
.page { margin-top: 20px; }

button .icon {
    margin-right: 0.5em;
}

.spinner .spinner-text {
    padding-left: 0.5em;
}

td > .btn {
    padding-top : 0;
    padding-bottom : 0;
}

.item {
    padding: 0.2em;
    color: white
}

.item.celestial {
    color: yellow;
}

.item.legendary {
    background-color: brown;
}

.item.epic {
    background-color: violet;
}

.item.rare {
    background-color: blue;
}

.item.uncommon {
    background-color: green;
}

.item.common {
    background-color: gray;
}

.skill-icon {
    width : 44px;
    height : 44px;
}

.crafting-icon {
    width : 44px;
    height : 44px;
    margin : 0 auto;
}

.icon-disabled {
    opacity : 30%;
}

/**** SYNTAX HIGHLIGHTER ****/

pre.elmsh {
    padding: 10px;
    margin: 0;
    text-align: left;
    overflow: auto;
}

code.elmsh {
    padding: 0;
}

.elmsh-line:before {
    content: attr(data-elmsh-lc);
    display: inline-block;
    text-align: right;
    width: 40px;
    padding: 0 20px 0 0;
    opacity: 0.3;
}

.elmsh {color: #24292e;}.elmsh-hl {background: #fffbdd;}.elmsh-add {background: #eaffea;}.elmsh-del {background: #ffecec;}.elmsh-comm {color: #969896;}.elmsh1 {color: #005cc5;}.elmsh2 {color: #df5000;}.elmsh3 {color: #d73a49;}.elmsh4 {color: #0086b3;}.elmsh5 {color: #63a35c;}.elmsh6 {color: #005cc5;}.elmsh7 {color: #795da3;}