body {
  padding: 20px;
  font-family: sans-serif;
  background-color: #eaeaea;
}

summary {
  cursor: pointer;
}

p {
  white-space: pre-wrap;
}

details {
  white-space: pre-wrap;
}

.term {
  display: inline-block;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 4px;
  border: 1px solid #c0c0c0;
  background-color: rgba(255, 255, 255, 0.3);
}

.error {
  display: inline-block;
  font-family: monospace;
  padding: 4px;
  border-radius: 2px;
  background-color: #FF000040;
}

.inference-rule {
    background-color: #f0f0f0;
    border: 1px solid #a0a0a0;
    border-radius: 4px;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    box-shadow: 0px 4px 4px;
    max-width: 100%;
}

.inference-rule summary {
    font-weight: bold;
    border-radius: 4px;
    margin: -4px;
    padding: 4px;
}

.inference-rule summary:hover {
    background-color: #d0d0d0;
}

.inference-rule[open] > summary {
    border-bottom: 1px solid #a0a0a0;
    border-radius: 4px;
    box-shadow: 0px 1px 4px 0px #00000070;
}

.inference-rule > div {
  display: inline-block;
  padding: 12px;
}

.target-p {
 margin-bottom: 4px; 
}

.banks {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.rule-bank {
  display: block;
  min-width: 50%;
  margin: 2px;
  padding: 1px;
}

.level-description {
  background-color: #f0f0f0;
  margin-top: 8px;
  margin-bottom: 8px;
  border: 1px solid #a0a0a0;
  border-radius: 4px;
  box-shadow: 0px 4px 4px;
  padding-left: 16px;
  padding-right: 16px;
}

.proposition-bank ul {
  margin-top: -8px;
  margin-bottom: 16px;
}

.free-proposition-picker {
  display: flex;
  align-items: flex-start;
  margin: 16px;
  flex-wrap: wrap;
}

.free-term-picker.free-term-picker {
  display: inline-block;
  vertical-align: top;
}

.sublevel {
  background-color: #f0f0f0;
  border: 2px solid;
  border-radius: 4px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  box-shadow: 0px 6px 6px;
}

@keyframes highlight {
  0%   {background-color: #ffff0060;}
  50%  {background-color: #ffff0040;}
  100% {background-color: #ffffff00;}
}

.highlight-animation {
  animation-name: highlight;
  animation-duration: 2s;
}