:root {
  --cbsize: 224;
  --mincbsize: 144;
}

body {
  font-size: 10px;
}

div.rightBar {
  max-width: 90px;
  padding: 0px;
}

div.generalInfo {
  max-width: 90px;
  padding: 6px;
  border-radius: 6px;
}

div.captured {
  height: 24px;
  margin: 0;
  gap: 0px;
}

div.container {
  padding: 3px;
  gap: 10px;
}

div.containerDialog {
  gap: 10px;
}

div.main-content {
  padding-left: 6px;
  padding-right: 6px;
}

div.intro {
  max-width: 150px;
}

div.movesDisplay {
  min-width: 90px;
  font-size: x-small;
}

div.explainMove {
  flex: 1;
  min-width: 120px;
  font-size: x-small;
}

div.explainMove h3 {
  font-size: small;
  margin-top: 3px;
  margin-bottom: 3px;
}

div.alignRight {
  min-width: 100px;
}

div.explain {
  width: 120px;
  font-size: x-small;
}

div.quizItemInner {
  height: 60%;
}


p.display {
  height: 180px;
}

p.evaluationScore {
  font-size: large;
}

img.buttonIcon {
  width: 24px !important;
}

img.piece {
  display: block;
  padding: 0;
  width: 13px;
  height: 13px;
}


button.panel {
  width: 36px !important;
  height: 36px !important;
}

button.start {
  width: 80px;
  height: 80px;
  min-width: 80px;
  margin: 0;
}

h2 {
  font-size: 16px;
  text-shadow: none;
}

h2::after {
  font-size: 14px;
}

img.aboutPiece {
  width: 30px;
  height: 30px;
}

#idDialogAnalysis {
  width: 90vw;
  min-height: 45vh;
}