.top {
    background:#cce9e2 ;
    width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.top:before {
        content: "⊤";
}

.bot {
    background:#fed4d6;
        width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bot:before {
        content: "⊥";
}


.rowf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;

}

.minislide h3 {
    text-align: center;
    margin: 0 auto;
}

.minislide {
    width: 80%;
    padding: 1ch;
    border: 1px solid black;
    margin: 1ch;
}

.iframe-container {
    display: flex;
    flex-direction: column;
    height: 80%;
    width: 100%;
}
iframe {
    border: none;
    height: 100%;

}

span.var {
    padding: 0 1ch ;    
}
  span.var:hover {
      background: #ccc;
  }

  table.highlight {
      background: red;
  }

  .prooftree tr:hover {
      background: #ccc;
  }

  .theorem,.openq {
      margin: 1ch;
      border: 0.3ch solid;
      padding: 1ch;
      
}
  .theorem::before {
      white-space: nowrap;
      content: "Theorem";
      font-weight: bold;
  }
  .openq::before {
      white-space: nowrap;
      content: "Open question";
      font-weight: bold;
  }

  
  .map {
      position: relative;
      height: 100%;
      width: 100%;
      margin: auto;
  }

  .map .back {
      position: absolute;
  }

  .overlay {
      position: absolute;
      z-index: 10;
      background: rgba(255,255,255,0.8);
      padding: 5px;
  }

  .space {
      margin: 3ch;
  }

  .grey {
      color: #aaa
  }

  /* svg highlighting */

  .svghighlight, .highpath1 .path1,  .highpath2 .path2, .eval1 .eval1, .eval2 .eval2 {
    polygon, ellipse {
	color: var(--highlight-textcolor);
	background: #da0 !important;
	fill: #ffa;	
	stroke: #da0 !important;
    }
    path {
	stroke: #da0 !important;
	stroke-width: 2px;
    }
}

.hide {
    display: none !important;
}

.hidden {
    visibility: hidden !important;
}




.svghighlightgreen,
.eval1 .eval1sat,
.eval2 .eval2sat {
    polygon, ellipse {
	color: var(--highlight-textcolor);
	background: #afa !important;
	fill: #afa !important;
	stroke: #afa !important;
    }
    path {
	stroke: #afa !important;
	stroke-width: 4px;
    }
}

.svghighlightred,
.exunsat,
.eval1 .eval1unsat,
.eval2 .eval2unsat {
    polygon, ellipse {
	color: var(--highlight-textcolor);
	background: #fed4d6 !important;
	fill: #fed4d6 !important;
	stroke: #fed4d6 !important;
    }
    path {
	stroke: #fed4d6 !important;
	stroke-width: 4px;
    }
}


.exsat {
    polygon, ellipse {
	background: orange !important;
	fill: orange !important;
	stroke: orange !important;
    }
}

.top-gate {
    polygon, ellipse {
	background: #cce9e2 !important;
	fill: #cce9e2 !important;
	stroke: #cce9e2 !important;
    }
}

.bot-gate {
    polygon, ellipse {
	background: #fed4d6 !important;
	fill: #fed4d6 !important;
	stroke: #fed4d6 !important;
    }
}


#constraints .satisfied {
  background: #d1fae5;
  color: #065f46;
}

#constraints .unsatisfied {
  background: #fee2e2;
  color: #991b1b;
}

span.unsatlit {
    background: rgba(255,0,0,0.5);
    margin: 1ch;
}

div.satclause {
    background: rgba(0,255,0,1);
    margin: 1ch;
}

div.sourceCode {
    padding: 0;
    border: none;
}


pre.sourceCode.python:before, pre.text:before {
    display: block;
    font-size: 0.5em;
    text-align: right;
    padding: 0;
    font-weight: bold;
}

pre.sourceCode.python, pre.text {
    background: #eee;
    border: 2px solid black;
    padding: 0 1ch 1ch 1ch;
    overflow: auto;
}


pre.terminal {
    background: #222;
    color: white;
    border: 2px solid black;
    padding: 0 1ch 1ch 1ch;
    overflow: auto;
}

code.sourceCode.python span:hover {
    background: #ddd;
}

div.sourceCode {
    overflow: initial;
}

div.question::before {
    font-weight: bold;
    content:"Question";
}
div.question {
    margin: 0.5ch;
    display: inline-flex;    
    align-items: center;
    justify-content: flex-start;
    background: rgba(255,255,0,0.4);
    width: 100%;                 /* fill the parent’s width */
    box-sizing: border-box;      /* padding is counted inside the width */
}
div.question > * {
    margin-left: 1ch;
}
.ex {
    background: rgba(0,255,0,0.5)
}

figure img {
    max-width: 100%;
    width: auto;
    height: auto;
}