.text-center {
  text-align: center;
}
.cem-type-discovery-veil {
  background: rgba(255, 255, 255, 0.9);
  height: 100%;
  width: 100%;
  position: absolute;
  cursor: pointer;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen","Ubuntu", "Cantarell", "Fira Sans", "Open Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.cem-type-discovery-solution {
  font-size: 12px;
}
.paragraph {
  font-size: 1.8em;
  line-height: 1.475em;
  overflow-x: hidden;
}
.paragraph.paragraph-pad-bottom {
  padding-bottom: 6em;
}

@media only screen and (max-width: 390px) {
  .paragraph {
    font-size: 1.3em;
    line-height: 2.04em;
  }
  .paragraph.paragraph-pad-bottom {
    padding-bottom: 8.30em;
  }
}

.type-discovery-buttons, .cem-type-discovery-solution table,
.human-type-discovery-dashboard, .human-type-discovery-histogram-inner,
.deep-type-quiz-inner, .problem-column-inner, .example-document,
.cem-type-discovery-examples-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  max-width: 800px;
}


a.topic-filter-icon-a,
a.topic-filter-icon-a:hover {
  border-bottom: none;
  box-shadow: none;
  background: none;
}

.cem-type-discovery-examples, .human-type-discovery-histogram, .deep-type-quiz {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.deep-type-quiz {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.human-type-discovery-solution {
  background-color: rgb(250, 250, 250);
  border-top: 1px solid rgba(0, 0, 0, 0.0980392);
  border-bottom: 1px solid rgba(0, 0, 0, 0.0980392);
}
.cem-type-discovery-linegraphs, .type-discovery-buttons {
  text-align: center;
}

.type-discovery-buttons {
  padding-top: 0;
}
.article .sidenote p {
  width: auto;
}
.dashed-decoration {
  text-decoration: none;
  border-bottom: 1px dashed #000;
}

.sidenote-comment {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 655px;
  padding: 5px;
}

@media only screen and (min-width: 655px) {
  .sidenote-comment {
    max-width: 655px;
    padding: 0 25px;
    margin: 0 auto;
  }
}

.scrollable-title-card {
  min-height: 400px;
  position: relative;
}
.scrollable-title-card h4 {
  font-weight: 500;
}
.scrollable-title-card-s {
  min-height: 100px;
}

.cem-type-discovery-examples, .human-type-discovery-histogram, .deep-type-quiz {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.deep-type-quiz {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.numerical-item {
  color: #0077f4;
  font-weight: 400;
}

.figure-group {
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
}

.subfigure {
  max-width: 45%;
  margin-right: 1%;
  margin-left: 1%;
  padding: 0;
  transition: transform .5s cubic-bezier(.645, .045, .355, 1), opacity .5s cubic-bezier(.645, .045, .355, 1);
}

.subfigure-active, .subfigure-inactive:hover {
  transform: scale(1.005);
  opacity: 1;
}
.subfigure-inactive {
  opacity: 0.9;
}

.caption {
  margin-left: auto;
  margin-right: auto;
}
.caption p {
  text-align: justify;
}

.cem-type-discovery-solution {
  overflow-y: scroll;
}

.cem-type-discovery-solution thead {
  display: block;
}
.cem-type-discovery-solution thead tr {
  display: block;
  position: relative;
  width: 100%;
}
.cem-type-discovery-solution thead th {
  width: 20%;
}

.cem-type-discovery-solution tbody {
  max-height: 250px;
  overflow-y: scroll;
  display: block;
}
.numerical-cell {
  text-align: right;
}
.cem-type-discovery-linegraphs {
  position: relative;
}
.cem-type-discovery-linegraphs svg {
  overflow: visible;
  height: 250px;
  width: 32%;
  margin-right: 0.66%;
  margin-left: 0.66%;
}
svg path.line {
  fill: none;
}
.cem-type-discovery-linegraphs, .type-discovery-buttons {
  text-align: center;
}

/* OBJECTIVE FUNCTION */

p.objective-function {
  line-height: 50px;
  margin-top: 8px;
  margin-bottom: 24px;
  margin-left: 0;
  margin-right: 0;
}
.labeled-number {
  text-align: center;
  position: relative;
  display: inline-block;
  color: #007eff;
  vertical-align: middle;
  line-height: 1.0;
}
.labeled-number-bump {
  margin-top: -1em;
}

.operator {
  font-size: 25px;
}

.labeled-number-caption {
  position: relative;
  display: block;
  line-height: 0.0;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: -20px;
  color: #444;
  white-space: nowrap;
}

/* MENTION EXAMPLE */
.mention-example {
  font-size: 18px;
  line-height: 1.7;
}
.mention {
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-weight: 600;
}
.mention:hover {
  background: #ffec00;
  border-radius: 2px;
}
.mention-context {
}

.mention-checkmark {
  padding-right: 3px;
  color: #e2e2e2;
}

/* MENTION EXAMPLE ENTITY */
.entity-icon {
  display: inline-block;
  min-width: 150px;
  vertical-align: bottom;
  margin-right: 25px;
  margin-left: 25px;
}
.entity-name {
  max-width: 150px;
  overflow: auto;
  font-size: 14px;
}
.entity-shell, .entity-label, .entity-name {
  display: block;
}
.entity-qid {
  font-size: 14px;
}
.entity-correct {
  border: 1px solid #9d262d;
}
.entity-shell {
  margin-bottom: 5px;
}
.entity-stats {
  font-size: 12px;
  color: #007eff;
}
.entity-label {
  font-size: 12px;
  color: #7c7c7c;
}


/* SOLVED MENTION RESTYLING */
.mention-solved .mention-checkmark {
  color: #68e946;
}
.mention-solved .mention {
  background: rgba(109, 231, 81, 0.5);
  color: rgb(150, 150, 150);
  border-radius: 2px;
}
.mention-solved .mention-context {
  color: rgb(200, 200, 200);
}
.mention-solved .entity-icon {
  color: rgb(150, 150, 150);
}
.mention-solved .entity-stats {
  color: rgb(100, 100, 100);
}
.mention-solved .card {
  opacity: 0.6;
}


/* BUTTON */
.action-button {
  display: inline-block;
  background: #f2f4f8;
  border: 0;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1.1em;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  vertical-align: middle;
  padding: 5px 7px;
  margin: 1rem;
  color: #007eff;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  text-align: center;
  word-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: all .15s cubic-bezier(.645, .045, .355, 1);
}
.action-button:hover {
  background-color: #edf0f5;
}
.action-button.selected {
  background: #6aa6fc;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  color: white;
  font-size: 12px;
  margin: 1px;
}
.action-button.selected:hover {
  background: #5a96ff;
}
.action-button-group {
  text-align: center;
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 1.0;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}
.action-button.disabled {
  pointer-events:none;
  cursor:not-allowed;
  color: #484848;
}

/* SUGGESTION BUTTONS */
.option-column-header, .option-column .suggested-axes {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
}
.option-column-header {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: center;
}
.option-column-header p {
  margin: 0;
}
.option-column .suggested-axes {
  height: 250px;
  overflow-y: scroll;
}
.suggested-axes {
  list-style: none;
  padding: 0;
  margin: 0;
}
.suggested-axes li {
  padding: 5px 0 5px 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.suggested-axes li:hover {
  background: #fee6af;
}
.suggested-axes li.selected {
  background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
color: white;
}
.suggested-axes li.selected:hover {
  background:
}

/* SUGGESTION EXPAND BUTTON */
.extra-suggestions {
  display: inline-block;
  background: #f2f4f8;
  border: 0;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1.1em;
  font-weight: 500;
  cursor: pointer;
  vertical-align: middle;
  padding: 5px 7px;
  text-align: center;
  box-shadow: inset 0 0px 2px 0 rgba(0, 0, 0, 0.14),
              inset 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.extra-suggestions:hover {
  background-color: #edf0f5;
  color: #0b65fe;
}

/* CEM */
.cem-launch-caption {}
.cem-launch-btn {
  font-size: 40px;
  cursor: pointer;
  color: #0b65fe;
}

/* ALLUVIAL BASED SUGGESTIONS */
.graph-suggestions svg {
  width: 100%;
}

.graph-suggestions-entities text,
.graph-suggestions-axes text {
  fill: #000;
  transition: opacity .3s cubic-bezier(.645, .045, .355, 1);
  opacity: 0.3;
  text-anchor: middle;
  font-size: 14px;
}


.graph-suggestions-entities text.text-anchor-end,
.graph-suggestions-axes text.text-anchor-end {
  text-anchor: end;
}

.graph-suggestions-entities text.text-anchor-start,
.graph-suggestions-axes text.text-anchor-start {
  text-anchor: start;
}

.graph-suggestions-entity-icon-holder,
.graph-suggestions-axis-icon-holder {
  cursor: pointer;
}

.graph-suggestions-axis-icon-holder:hover text,
.graph-suggestions-entity-icon-holder:hover text {
  opacity: 1;
}
.graph-suggestions-entity-icon {
  fill: #ecf1f4;
}
.graph-suggestions-axis-icon,
.graph-suggestions-entity-icon-relevant {
  fill: #bac6d2;
}

.graph-suggestions-axis-icon-holder:hover .graph-suggestions-axis-icon {
  fill: #1975d3;
}
.graph-suggestions-axis-icon-selected {
  fill: #fda408;
}

.graph-suggestions-entity-icon-correct {
  fill: #6de751;
  stroke: #05d7ff;
  stroke-width: 3px;
}

.graph-suggestions-axis-icon-holder:hover .graph-suggestions-axis-icon-selected {
  fill: #fd8408;
}

.graph-suggestions-axis-entity-edge {
  /*fill: rgba(0, 0, 0, 0.3);*/
  fill:none;
  stroke: #b2c6d8;
  opacity: 0.3;
  cursor: pointer;
}
.graph-suggestions-axis-entity-edge-relevant.graph-suggestions-axis-entity-edge {
  /*fill: rgba(0, 0, 0, 0.3);*/
  fill:none;
  stroke: #2b98e5;
  opacity: 0.3;
  cursor: pointer;
}
.graph-suggestions-axis-entity-edge:hover {
  stroke: #1975d3;
  opacity: 0.8;
}

.graph-suggestions-axis-entity-edge-hovered,
.graph-suggestions-axis-entity-edge-relevant.graph-suggestions-axis-entity-edge-hovered {
  stroke: #1975d3;
  opacity: 0.8;
}
.graph-suggestions-axis-entity-edge-selected,
.graph-suggestions-axis-entity-edge-relevant.graph-suggestions-axis-entity-edge-selected {
  stroke: #fda408;
  opacity: 0.6;
}
.graph-suggestions-axis-entity-edge-selected.graph-suggestions-axis-entity-edge-hovered {
  opacity: 0.7;
}
.graph-suggestions-axis-entity-edge-selected:hover,
.graph-suggestions-axis-entity-edge-selected.graph-suggestions-axis-entity-edge-hovered {
  stroke: #fd8408;
  opacity: 0.8;
}

/* HUMAN TYPES */
.example-document span {
  transition: all .5s cubic-bezier(.645, .045, .355, 1);
  background: rgba(242, 218, 0, 0.0);
}
.example-document {
  line-height: 1.5;
  background: rgb(254, 255, 254);
  border: 1px solid rgba(0, 0, 0, 0.04);
  max-width: 550px;
}
.example-document .search-highlighted {
  background: rgba(242, 218, 0, 0.9);
}
.interactive-label {
  cursor: pointer;
}


/* TOOLTIP FOR LEARNABILITY */
.auc-bar {
  width: 50px;
  border: 1px solid rgba(0, 0, 0, 250);
  display: inline-block;
  margin-right: 5px;
  background: #101010;
}
.learnability-tooltip {
  text-align: left;
}
.learnability-tooltip li {
  margin-bottom: 5px;
  margin-top: 5px;
}
.learnability-tooltip h4, .learnability-tooltip ul {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  list-style: none;
}
.auc-pbar {}


/* FAST HUMAN TYPE DISCOVERY UI */

.fast-human-type-solution-inner {
  vertical-align: top;
  position: relative;
  display: block;
}

.fast-human-type-solution, .cem-type-discovery-linegraphs,
.type-discovery-buttons, .cem-type-discovery-solution {
  vertical-align: middle;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2px;
  padding-right: 2px;
}

.option-column {
  display: inline-block;
  width: 33%;
}
.pick-icon {
  height: 27px;
  width: 27px;
  vertical-align: middle;
  margin-right: 5px;
}

.problem-column {
  display: block;
  width: 100%;
  vertical-align: top;
}
.problem-column-inner {
  vertical-align: top;
  display: block;
  text-align: center;
}

.node {
  position: absolute;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  transform: translate(-50%, -50%);
  padding: 2px;
  line-height: 1.0;
}
.node.node-abs {
  transform: none;
}
.node-circle {
  border-radius: 100%;
  padding: 2px;
}


/* DRAGGABLE NUMBERS */
.drag-handle, .hoverable {
  padding-left: 30px;
}
.drag-handle::after, .hoverable::after {
  overflow: visible;
  content: "";
  background-image: url("https://s3-us-west-2.amazonaws.com/openai-public/blog/2018-01/neural-type-system/figures/pointer.svg");
  width: 27px;
  height: 27px;
  position: absolute;
  left: 13.5px;
  top: 50%;
  display: block;
  transform: translate(-50%, -50%);
}
.labeled-number-bump .drag-handle::after, .labeled-number-bump  .hoverable::after {
  top: 50%;
  margin-top: 5px;
}

.drag-handle {
  cursor: ew-resize;
}
.hoverable {
  cursor: pointer;
}
div.__react_component_tooltip.learnability-tooltip {
  opacity: 1
}

.cem-type-discovery-solution {
  overflow: visible;
}
.fast-human-type-solution-dashboard {
  text-align: center;
}
.node-purple {
  background: #e3d6f2;
  border: 1px solid #713baf;
}
.node-blue {
  background: #d5e1ef;
  border: 1px solid #2a4b7f;
}
.node-yellow {
  background: #fde9a5;
  border: 1px solid #fdb50a;
}
.node-green {
  background: #cdeed1;
  border: 1px solid #1a7f01;
}
.node-red {
  background: #f2dddc;
  border: 1px solid #af393b;
}
.node-gray {
  background: #d5d6d9;
  border: 1px solid #6c747f;
}

.fast-human-type-solution-dashboard .action-button {
  margin: 0 5px 0 5px;
}

/* Human solution, topic filters */
.topic-filter-icon-holder {
  position: absolute;
  left: -100px;
  display: inline-block;
  text-align: center;
}

.topic-filter-icon {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  background: white;
  border: 1px solid #fed57a;
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  line-height: 14px;
  vertical-align: middle;
  text-align: center;
}
.topic-filter-icon-inner {
  position: absolute;
  top: 1px;
  left: 1px;
  display: inline-block;
  background: #fdb63a;
  color: white;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  line-height: 12px;
  text-align: center;
  font-size: 8px;
}
.topic-filter-icon:hover .topic-filter-icon-inner{
  background: #fd9c15;
}
.topic-filter-icon:hover {
  border: 1px solid #fd9c15;
}

.topic-filter-icon-caption {
  display: block;
  font-size: 12px;
  color: #444;
}

.topic-list {
  list-style: none;
  position: relative;
  margin: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.topic-label {
  display: block;
  text-align: center;
}
.topic-row {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 1px;
  padding-bottom: 0;
  font-size: 12px;
  color: rgb(10, 10, 10);
}

.topic-label {
  text-transform: none;
  width: 120px;
  display: inline-block;
  text-align: right;
  font-weight: 600;
  color: #888;
}

.topic-stats {
  display: inline-block;
  font-size: 12px;
  position: relative;
  margin-left: 5px;
  vertical-align: middle;
  text-align: left;
  font-size: 12px;
  height: 15px;
}

.topic-stats-bar-container {
  position: relative;
  display: inline-block;
  width: 50%;
  max-width: 250px;
  text-align: left;
  vertical-align: middle;
  height: 15px;
  margin-left: 1px;
}
.topic-stats-bar {
  display: inline-block;
  height: 15px;
  position: relative;
  top: 0;
  left: 0;
  vertical-align: middle;
}

.fast-human-type-solution, #type-discovery, #deep-type-quiz {
  font-size: 14px;
}
.cem-type-discovery-solution {
  overflow: visible;
}
.fast-human-type-solution-topic-picker {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transform-origin: center center;
  perspective: 100px;
  padding-bottom: 50px;
}
.fast-human-type-solution-topic-picker p {
  font-size: 25px;
  color: white;
  text-align: center;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}
.topic-option {
  display: inline-block;
  width: 33%;
  text-align: center;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
.topic-option-selected {
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
}
.topic-option-inner {
  padding: 20px;
  line-height: 1;
  display: block;
  vertical-align: middle;
  position: relative;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  -webkit-transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.fast-human-type-solution-dashboard {
  text-align: center;
}
.topic-option:hover .topic-option-inner {
  transform: translate3d(0, 0, 3px);
}
.topic-tooltip {
  text-transform: none;
}
.node-purple, .topic-option-selected.topic-politics_n_business, .topic-politics_n_business .topic-option-inner, .topic-politics_n_business .topic-stats-bar {
  background: #e3d6f2;
  border: 1px solid #713baf;
}
.node-blue, .topic-option-selected.topic-science_n_industry, .topic-science_n_industry .topic-option-inner, .topic-science_n_industry .topic-stats-bar {
  background: #d5e1ef;
  border: 1px solid #2a4b7f;
}
.node-yellow, .topic-option-selected.topic-culture, .topic-culture .topic-option-inner, .topic-culture .topic-stats-bar {
  background: #fde9a5;
  border: 1px solid #fdb50a;
}
.node-green, .topic-option-selected.topic-nature, .topic-nature .topic-option-inner, .topic-nature .topic-stats-bar {
  background: #cdeed1;
  border: 1px solid #1a7f01;
}
.node-red, .topic-option-selected.topic-sport, .topic-sport .topic-option-inner, .topic-sport .topic-stats-bar {
  background: #f2dddc;
  border: 1px solid #af393b;
}
.node-gray, .topic-option-selected.topic-miscellaneous, .topic-miscellaneous .topic-option-inner, .topic-miscellaneous .topic-stats-bar {
  background: #d5d6d9;
  border: 1px solid #6c747f;
}
.topic-row:hover {
  opacity: 0.9;
}
.topic-row.active {
  opacity: 1.0;
}
.topic-row.active .topic-label {
  color: black;
  opacity: 1.0;
}

.topic-row:hover .topic-stats-bar {
  border: 1px solid black;
  opacity: 1.0;
}
.topic-row:hover .topic-label {
  color: #007eff;
}


/* PAGINATION */
.pagination {
  margin: 5px;
  display: block;
  text-align: center;
  font-size: 12px;
}
.pagination .action-button {
  margin: 0;
  margin-right: 5px;
  margin-left: 5px;
}


/* TABLE STYLING (sticky headers) */
table.scrolltable thead {
  border-bottom: 2px solid rgba(100, 100, 100, 0.4);
}
table.scrolltable th, table.scrolltable td {
    min-width: 150px;
}
table.scrolltable {
    width: 400px;
    overflow-x: scroll;
}
table.scrolltable table {
    overflow-y: scroll;
}
table.scrolltable tbody {
    overflow-x: scroll;
    display: block;
    max-height: 250px;
}
table.scrolltable thead {
    display: table-row;
}
.sortable-header {
  cursor: pointer;
  font-weight: 500;
}
.sortable-header i.fa {
  font-size: 12px;
  color: #007eff;
}
.sortable-header i.fa.disabled-icon {
  color: rgb(220, 220, 220);
}
.sortable-header i.fa:hover {
  color: #007eff;
}
table {
    border-collapse: collapse;
}
table.scrolltable th, table.scrolltable td {
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 3px;
  padding-right: 3px;
}
table.scrolltable td {
  border: solid 1px rgba(100, 100, 100, 0.1);
}
.striped-table tbody tr:nth-child(even){
  background-color: #fff
}

/* QUIZ */

@keyframes fade-in-basic {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0.0;
    background: rgba(255, 255, 255, 0.0);
  }
  50 % {
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.0);
  }
  100% {
    opacity: 1.0;
    background: rgba(255, 255, 255, 0.5);
  }
}
@keyframes move-in {
  0% {
    transform: translate(0, -50px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.deep-type-quiz {
  vertical-align: middle;
  position: relative;
}
.quiz {
  display: block;
  position: relative;
  white-space: normal;
  margin-left: 20px;
  margin-right: 20px;
  min-height: 160px;
}
.quiz-radio-button-group {
  position: relative;
  display: block;
}

.radio-button {
  display: block;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  white-space: nowrap;
}

.radio-input-container {
  display: inline-block;
  vertical-align: middle;
}
.quiz-caption {
  text-align: center;
}

.radio-button input {
  vertical-align: middle;
}
.radio-button label {
  cursor: pointer;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
}
.machine-response {
}

.machine-response-label {
  display: inline-block;
  background: #007eff;
  color: white;
  font-size: 12px;
  border-radius: 4px;
  padding: 2px 4px;
  margin-left: 5px;
  opacity: 0;
}

.machine-response-label.active {
  opacity: 1;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  -webkit-transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  animation-delay: 0.5s;
  transition-delay: 0.5s;
}

.radio-name {
  font-weight: 600;
}
.quiz .mention-example {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 1em;
}

.radio-description {
  line-height: 2;
  display: block;
  margin: 0;
  white-space: normal;
  margin-left: 5px;
}
.radio-description a, .radio-description a:hover {
  border-bottom: none;
}

.quiz-recap {
  text-align: center;
  display: block;
  min-height: 400px;
  position: relative;
}
.quiz-recap {
  font-size: 24px;
}
.quiz-recap h4 {
  font-size: 36px;
}

.quiz-veil {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
  background: rgba(255, 255, 255, 0.0);
}
.quiz-veil .centered-item {
  font-size: 100px;
  text-align: center;
}
.quiz-veil .fa {
  transform: translate(0, 100px);
}

.quiz-veil.active {
  display: block;
  animation: fade-in 1.0s forwards;
  animation-delay: 0.25s;
  transition-delay: 0.25s;
}

.quiz-veil.active .fa {
  animation: move-in 0.5s forwards;
  animation-delay: 0.25s;
  transition-delay: 0.25s;
}

.quiz-veil-correct .centered-item {
  color: #00ed66;
}
.quiz-veil-incorrect .centered-item {
  color: #ed002e;
}


/** POSTER **/
.poster, #js-plotly-tester {
  position: relative;
  overflow: hidden;
}
.centered-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 700px;
  transform: translate(-50%, -50%);
}
/* FAST HUMAN TYPE DISCOVERY UI */

.pick-icon {
  height: 27px;
  width: 27px;
  vertical-align: middle;
  margin-right: 5px;
}

.problem-column {
  display: block;
  width: 100%;
  vertical-align: top;
}
.problem-column-inner {
  vertical-align: top;
  display: block;
  text-align: center;
}

.node {
  position: absolute;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  transform: translate(-50%, -50%);
  padding: 2px;
  line-height: 1.0;
}
.node.node-abs {
  transform: none;
}

/* Network diagram */

.node-purple {
  background: #e3d6f2;
  border: 1px solid #713baf;
}
.node-blue {
  background: #d5e1ef;
  border: 1px solid #2a4b7f;
}
.node-yellow {
  background: #fde9a5;
  border: 1px solid #fdb50a;
}
.node-green {
  background: #cdeed1;
  border: 1px solid #1a7f01;
}
.node-red {
  background: #f2dddc;
  border: 1px solid #af393b;
}
.node-gray {
  background: #d5d6d9;
  border: 1px solid #6c747f;
}

.node-group {
  position: relative;
  display: block;
}

.node {
  position: absolute;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  transform: translate(-50%, -50%);
  padding: 2px;
  font-size: 18px;
  top: 50%;
}
.node-circle {
  border-radius: 100%;
  padding: 2px;
  display: block;
  line-height: 22px;
}

/* ROC Diagram */
.roc-diagram {
  position: relative;
  display: block;
  text-align: center;
}
.sidenote-comment {
  font-size: 12px;
  text-align: left;
  line-height: 1.4;
  color: #535353;
}
.svg-plot, .sidenote-comment {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.svg-trendarea {
  fill: #c8d3de;
  stroke: #c8d3de;
  stroke-width: 1px;
}
.svg-trendline {
  stroke: #ff6600;
  stroke-width: 1.5px;
  stroke-linecap: round;
  fill: none;
}
.svg-trendpoint {
  fill: #ff6600;
  stroke: none;
}
.svg-trendpoint-label {
  fill: #ff6600;
  text-anchor: middle;
  font-weight: bold;
  font-size: 12px;
}
.svg-medianline {
  stroke: #314862;
  stroke-dasharray: 3px;
  stroke-width: 1.5px;
  fill: none;
}
.svg-tick.svg-medianline-label {
  font-size: 10px;
  fill: #314862;
  font-weight: bold;
}
.svg-tick {
  font-size: 12px;
  fill: #000;
}
.svg-tick-ylabel {
  text-anchor: start;
}
.svg-tick-xlabel {
  text-anchor: end;
}
.roc-diagram svg {
  width: 128px;
  height: 148px;
}

.axis--y .tick .svg-tick {
  text-anchor: end;
}
.axis--x .tick .svg-tick, .svg-title {
  text-anchor: middle;
}
.svg-title {
  font-weight: bold;
}

/* Network diagram */
.network-diagram-nodes {
  position: relative;
  display: block;
  min-height: 400px;
  width: 100%;
  overflow: hidden;
}
.network-edge {
  fill: none;
  stroke: black;
  stroke-width: 2px;
  shape-rendering: geometricPrecision;
  marker-end: url(#arrow);
}
.network-diagram {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.network-diagram svg {
  width: 100%;
  height: 100%;
}

.edge-comment {
  stroke-dasharray: 5;
  stroke: #AAA;
  markerWidth: 2px;
  marker-end: none;
}
.node-group {
  -webkit-perspective: 10000px;
     -moz-perspective: 10000px;
       -o-perspective: 10000px;
          perspective: 10000px;
}

@keyframes rotate {
  0% {
    transform: rotateY( 45deg ) translate(-50%, -50%);
    left: 80%;
    opacity: 0.0;
  }
  0.1% {
    transform: rotateY( 45deg ) translate(-50%, -50%);
    left: 80%;
    opacity: 0.0;
  }
  4.25% {
    transform: rotateY( 22.5deg ) translate(-50%, -50%);
    left: 65%;
    opacity: 0.7;
  }
  8.5% {
    transform: rotateY( 0deg ) translate(-50%, -50%);
    left: 50%;
    opacity: 1;
  }
  12.75% {
    transform: rotateY( -22.5deg ) translate(-50%, -50%);
    left: 35%;
    opacity: 0.7;
  }
  17% {
    transform: rotateY( -45deg ) translate(-50%, -50%);
    left: 20%;
    opacity: 0;
  }
  100% {
    transform: rotateY( -45deg ) translate(-50%, -50%);
    left: 20%;
    opacity: 0.0;
  }
}

@keyframes rotate-fade {
  0% {
    opacity: 0.0;
  }
  4.25% {
    opacity: 0.7;
  }
  8.5% {
    opacity: 1;
  }
  12.75% {
    opacity: 0.7;
  }
  17% {
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0.0;
  }
}

.node-rotatable {
  /*animation: rotate 84.7s infinite;*/
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.edge-rotatable {
  /*animation: rotate-fade 84.7s infinite;*/
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.node-comment {
  font-size: 12px;
  max-width: 150px;
  text-align: justify;
  line-height: 1.3;
}

.word-window {
  left: 50%;
  width: 50%;
  height: 20px;
  top: 95px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-radius: 0;
}
.word-window:after {
  content: "word window";
  position: absolute;
  top:30px;
  left: 50%;
  text-align: center;
  display: block;
  transform: translate(-50%, 0);
}

#window-classifier-diagram .node-comment-concat {
  left: 75%;
  top: 0px;
}
#window-classifier-diagram .node-comment-sigmoid {
  left: 20%;
  top: 60%;
}

/* ANAPHORA */
#anaphora-diagram .network-diagram-nodes {}

.anaphora-title {
  left: 50%;
  top: 10px;
  font-weight: bold;
  font-size: 20px;
  white-space: nowrap;
}

#anaphora-diagram .node-yellow {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  padding: 3px;
}

.node-deprecated {
  background: #dce5ea;
  color: #2b425d;
  border: 1px solid #b8cad2;
}

.node-old-entity, .node-new-entity {
  font-size: 13px;
}
.node-old-entity, .node-old-entity-stats {
  left: 25%;
}
.node-new-entity, .node-new-entity-stats {
  left: 75%;
}
.node-new-entity-stats, .node-old-entity-stats {
  font-size: 14px;
  color:#007eff;
  transform: translate(-50%, -150%);
}
.node-old-entity-stats {
  color: #333;
}

/* MAIN EXAMPLE */
.main-example-explanation {
  font-size: 14px;
}
.main-example-explanation::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 0px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #bcc9d5 transparent;
}
.keyword {
  cursor: pointer;
}
.main-example-stats {
  border-top: 1px solid #bcc9d5;
  position: absolute;
  left: -89px;
  overflow: visible;
  white-space: nowrap;
}
.main-example-stats-label {
  width: 130px;
  text-align: right;
  display: inline-block;
}
.secondary-example-stats-label, .secondary-example-stats-label-comment {
  width: 50%;
  text-align: right;
  display: inline-block;
}
.secondary-example-stats-label {
  font-weight: 600;
  font-size: 16px;
}
.secondary-example-stats-label-comment {
  color: #6f6f6f;
  margin-top: 0;
  font-size: 14px;
}
.main-example-stats-label .fa, .secondary-example-stats-label .fa {
  color: #bcc9d5;
}
.main-example-stats-label.active .fa, .secondary-example-stats-label.active .fa {
  color: #ff6600;
}
.main-example-stats-progressbar {
  text-align: left;
  width: 100px;
  display: inline-block;
  margin-left: 0.5em;
  position: relative;
}
.secondary-example-stats-progressbar {
  text-align: left;
  width: 50%;
  display: inline-block;
  margin-left: 0;
  padding-left: 0.5em;
  position: relative;
}
.main-example-stats-progressbar-inner, .secondary-example-stats-progressbar-inner {
  background: #bcc9d5;
  height: 8px;
  display: inline-block;
  transition: width 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  -webkit-transition: width 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.main-example-stats-progressbar-label, .secondary-example-stats-progressbar-label {
  font-size: 12px;
  line-height: 12px;
  color: #007eff;
  margin-left: 1em;
}
.main-example-stats-progressbar-inner.active, .secondary-example-stats-progressbar-inner.active {
  background: #ff6600;
}

/* Control with/without types */
.main-example-stats-switch {
  line-height: 1;
}
.main-example-stats-switch-button {
  text-transform: uppercase;
  border: 1px solid #bcc9d5;
  border-radius: 5px;
  color: #bcc9d5;
  font-size: 12px;
  padding: 2px;
  margin-right: 5px;
}
.main-example-stats-switch-button.active {
  color: #ff6600;
  border: 1px solid #ff6600;
}
.illustrated-main-example {
  display: block;
  position: relative;
}
.illustrated-main-example .paragraph {
  white-space: nowrap;
}

@media only screen and (min-width: 1024px) {
  .main-example {
    white-space: nowrap;
  }
  .illustrated-main-example {
    display: inline-block;
  }
  .illustrated-main-example .paragraph {
    width: 450px;
  }
}

.cem-canvas {
  cursor: crosshair;
}