body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
#app {
  height: 100vh;
}
#splash-container {
  display: -ms-flexbox !important;
  display: flex;
  height: 100vh;
  justify-content: center;
}
#splash-container .splash {
  display: -ms-flexbox !important;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#splash-container .splash .logo {
  height: 72px;
  width: 72px;
  margin: 12px;
}
div.p {
  margin: 1em 0;
}
.error-resolver {
  padding: 0 16px 16px 16px;
}
.error-resolver .action {
  padding: 1em;
}
.error-resolver .metadata {
  font-size: 80%;
}
.group {
  margin: 8px 0;
}
.sections {
  display: -ms-flexbox !important;
  display: flex;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  -ms-flex-pack: center;
  justify-content: center;
}
.sections.spread {
  width: 100%;
  -ms-flex-pack: space-between;
  justify-content: space-between;
}
.sections .section {
  width: 400px;
  margin: 8px;
}
.class-section {
  padding-bottom: 3em;
}
.feature-options.scrollable {
  overflow-y: scroll;
  -moz-box-shadow: inset 0 -8px 12px -4px rgba(51, 51, 51, 0.5);
  -webkit-box-shadow: inset 0 -8px 12px -4px rgba(51, 51, 51, 0.5);
  box-shadow: inset 0 -8px 12px -4px rgba(51, 51, 51, 0.5);
  height: 280px;
}
.feature-options.scrollable .feature-option {
  margin: 8px;
}
.feature-options .feature-option {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding: 4px;
}
.feature-options .feature-option.active {
  cursor: default;
  border: 2px solid #333;
  border-radius: 2px;
}
.new-sheet-link {
  margin-top: 12px;
}
.add-chars-overlay {
  padding: 32px;
}
.add-chars-overlay .desc {
  font-size: 80%;
  padding: 8px;
}
.add-chars-overlay .character {
  display: -ms-flexbox !important;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin: 8px 0;
}
.add-chars-overlay .character .name {
  width: 45%;
}
.carousel-container {
  width: 100%;
  overflow-x: auto;
}
.carousel-container .carousel {
  display: -ms-flexbox !important;
  display: flex;
}
.carousel-container .carousel a.add-button {
  display: -ms-flexbox !important;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 8px;
}
.carousel-container .carousel a.card {
  color: inherit;
  margin: 8px 4px;
  padding: 0px;
}
.carousel-container .carousel div.card {
  background-color: #eee;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  width: 220px;
}
.carousel-container .carousel div.card:hover {
  background-color: #ddd;
}
.carousel-container .carousel div.card:active {
  background-color: #ccc;
}
.hp-bar {
  position: relative;
  background-color: #fcfcfc;
  border-radius: 4px;
  height: 32pt;
  margin: 8px 0;
}
.hp-bar .bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  transition: all 450ms cubic-bezier(0, 0, 0.2, 1);
}
.hp-bar .label {
  font-size: 16pt;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  line-height: 32pt;
}
.clickable {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.scrollable {
  overflow-y: scroll;
  -moz-box-shadow: inset 0 -8px 12px -4px rgba(51, 51, 51, 0.5);
  -webkit-box-shadow: inset 0 -8px 12px -4px rgba(51, 51, 51, 0.5);
  box-shadow: inset 0 -8px 12px -4px rgba(51, 51, 51, 0.5);
}
.unselectable {
  -webkit-user-select: none;
  user-select: none;
}
.explanation {
  font-size: 80%;
}
.expandable {
  width: 100%;
}
.expandable > .content {
  display: -ms-flexbox !important;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
}
.nav-link {
  display: inline-block;
  padding: 1em;
  margin: -0.5em;
  z-index: 1;
  vertical-align: middle;
}
li > .nav-link {
  padding: 0.5em;
  margin: 0;
}
.nav-link.inline {
  display: inline;
  padding: 0;
  margin: 0;
}
.search-bar {
  width: 100%;
  height: 2em;
  position: relative;
}
.search-bar .clear {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
.search-bar input.search {
  height: 2em;
  width: 100%;
}
.slots-use-block {
  display: -ms-flexbox !important;
  display: flex;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}
.slots-use-block .slot {
  width: 24px;
  height: 24px;
  border: 1px solid #333;
  margin: 4px;
}
.slots-use-block .slot.used {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}