:root {
  --primary-color: #ffffff;
  --secondary-color: #7494ff;
  --ternary-color: #8f8f8f;
  --quartary-color: #000;
  --control-color: var(--primary-color);
  --navigation-height: 3rem;
  --criticalSize: 10rem;
  --border-width: 1px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  max-width: calc(5 * var(--criticalSize));
  margin: auto;
}
.hidden {
  display: none;
}
.auto-horizontal {
  width: auto;
}
.full-horizontal {
  width: 100%;
}
.full-vertical {
  height: 100%;
}
.flow-horizontal {
  display: flex;
  flex-direction: row;
}
.flow-vertical {
  display: flex;
  flex-direction: column;
}
.mirror-vertical {
  transform: scaleX(-1);
}
.mirror-horizontal {
  transform: scaleY(-1);
}
.rotate-clockwise {
  transform: rotate(-90deg);
}
.rotate-counterclockwise {
  transform: rotate(90deg);
}
.auto-overflow {
  overflow: auto;
}
.bordered {
  border: var(--border-width) var(--quartary-color) solid;
}
.btn-std {
  height: var(--navigation-height);
  padding: calc(var(--navigation-height) / 6);
}
.btn-small {
  height: calc(var(--navigation-height) / 2);
  padding: 0;
}
.nav-btn {
  padding: 0;
}
.navigation {
  background: var(--control-color);
  justify-content: space-evenly;
  min-height: var(--navigation-height);
}
.button {
  background: var(--dice-button-color);
}
#game-field {
  justify-content: space-around;
  align-items: center;
}
.common-section {
  justify-content: space-between;
  align-items: center;
}
.common-controls {
  justify-content: space-evenly;
  align-items: center;
}
.player-controls {
  justify-content: space-evenly;
  margin: auto;
}
.player-section {
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.card-section {
  justify-content: space-between;
}
.card-choosen {
  background-color: var(--secondary-color);
}
.card {
  max-width: calc(4 / 3 * var(--criticalSize));
  min-width: calc(var(--criticalSize));
}
.card-heading {
  justify-content: space-evenly;
}
.card-image {
  width: 80%;
}
.card-content {
  text-align: left;
  margin: calc(var(--border-width) * 5);
}
.card-content > ul {
  list-style: circle;
  padding-left: calc(var(--navigation-height) / 3);
}
.config-section {
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.config-checkbox {
  width: calc(var(--navigation-height) / 3);
  height: calc(var(--navigation-height) / 3);
}
.config-title {
  border: unset;
  font-weight: bold;
  font-size: calc(var(--navigation-height) / 2);
  overflow: hidden;
}
.config-id {
  width: var(--navigation-height);
  font-size: calc(var(--navigation-height) / 3);
  text-align: right;
}
.config-text {
  width: 100px;
  font-size: calc(var(--navigation-height) / 3);
  text-align: right;
}
.config-item {
  justify-content: space-between;
}
.config-activator {
  position: absolute;
  right: 0;
}
.config-btn {
  margin: 0 calc(var(--navigation-height) / 2);
}
.config-label {
  margin: 0 auto 0 calc(var(--navigation-height) / 2);
  text-align: left;
}
.config-input {
  margin: 0 calc(var(--navigation-height) / 2) 0 auto;
}
#config-btn {
  content: url(./images/settings-24px.svg);
}
#roll-btn {
  content: url(./images/play_arrow-24px.svg);
}
#load-btn {
  content: url(./images/menu_book-24px.svg);
}
#save-btn {
  content: url(./images/save-24px.svg);
}
.shuffle-btn {
  content: url(./images/wifi_protected_setup-24px.svg);
}
.sort-btn {
  content: url(./images/reorder-24px.svg);
}
.draw-btn {
  content: url(./images/playing-cards.svg);
}
.dispose-btn {
  content: url(./images/recycle-bin.svg);
}
.undraw-selected-btn {
  content: url(./images/playing-cards-selected.svg);
}
.dispose-selected-btn {
  content: url(./images/recycle-bin-selected.svg);
}
.refill-btn {
  content: url(./images/fast_rewind-24px.svg);
}
.expand-btn {
  content: url(./images/expand_less_black_24dp.svg);
}
#edit-btn {
  content: url(./images/create-24px.svg);
}
.add-btn {
  content: url(./images/add_circle_outline-24px.svg);
}
.remove-btn {
  content: url(./images/remove_circle_outline-24px.svg);
}
@media (max-width: 30rem) {
  .card {
    max-width: calc(4 / 3 * var(--criticalSize));
    min-width: calc(var(--criticalSize));
  }
  .card-section {
    max-height: calc(1.4 * 4 / 3 * var(--criticalSize));
    flex-wrap: wrap;
    justify-content: space-around;
  }
}