@charset "UTF-8";
/* © DialogueTrainer */
/* © DialogueTrainer */
/* © DialogueTrainer */
/* © DialogueTrainer */
/* © DialogueTrainer */
/* © DialogueTrainer */
/* © DialogueTrainer */
@media screen and (max-width: 600px) {
  .hide-mobile {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .hide-tablet {
    display: none !important;
  }
}

/* © DialogueTrainer */
/* © DialogueTrainer */
.noTimeline .timeline {
  display: none;
}
.noTimeline .timelineContainer {
  display: none;
}

.statements.ghost > div {
  padding-bottom: 30px;
}
.statements.ghost > div::after {
  content: "";
  display: block;
  height: 15px;
  background: url('data:image/svg+xml;utf8, <svg viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg"><path d="M -15 110 L100 10 L215 110" fill="none" stroke="black" stroke-width="2" vector-effect="non-scaling-stroke"/></svg>');
  background-size: 20px 15px;
  opacity: 0.15;
}

.statement {
  min-width: 45px;
  min-height: 45px;
  padding: 12px;
  font-size: 1.1em;
  vertical-align: middle;
  border: 1px solid black;
  border-radius: 8px;
  box-sizing: border-box;
}

.playerText,
.computerText,
.characterText,
.situationText,
.endingAlert {
  display: grid;
  flex-direction: row;
  justify-content: center;
  max-width: none !important;
  padding-top: 20px;
  margin: 20px 0;
  border-top: 1px solid rgba(30, 41, 59, 0.1);
  grid-template-areas: "before ." "statement additional";
  grid-template-columns: 1fr 400px;
  -moz-column-gap: 20px;
       column-gap: 20px;
}
@media screen and (max-width: 1264px), print {
  .playerText,
  .computerText,
  .characterText,
  .situationText,
  .endingAlert {
    grid-template-columns: 1fr 300px;
  }
}
@media screen and (max-width: 600px) {
  .playerText,
  .computerText,
  .characterText,
  .situationText,
  .endingAlert {
    display: block;
  }
}
.playerText .statement,
.computerText .statement,
.characterText .statement,
.situationText .statement,
.endingAlert .statement {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.playerText .statement p:first-child,
.computerText .statement p:first-child,
.characterText .statement p:first-child,
.situationText .statement p:first-child,
.endingAlert .statement p:first-child {
  margin-top: 0 !important;
}
.playerText .statement p:last-child,
.computerText .statement p:last-child,
.characterText .statement p:last-child,
.situationText .statement p:last-child,
.endingAlert .statement p:last-child {
  margin-bottom: 0 !important;
}
.playerText .before,
.computerText .before,
.characterText .before,
.situationText .before,
.endingAlert .before {
  grid-area: before;
}
.playerText .flexRow,
.computerText .flexRow,
.characterText .flexRow,
.situationText .flexRow,
.endingAlert .flexRow {
  flex: 1 1 100%;
  grid-area: statement;
}
.playerText .flexRow .statement > .v-btn,
.computerText .flexRow .statement > .v-btn,
.characterText .flexRow .statement > .v-btn,
.situationText .flexRow .statement > .v-btn,
.endingAlert .flexRow .statement > .v-btn {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 1;
  padding: 8px;
  color: white;
  text-decoration: none;
  background-color: #94A3B8;
  border-radius: 9999px;
  box-sizing: content-box;
  align-content: center;
}
.playerText .timelineContainer,
.computerText .timelineContainer,
.characterText .timelineContainer,
.situationText .timelineContainer,
.endingAlert .timelineContainer {
  grid-area: additional;
  padding: 0 16px 0 12px;
}
.playerText .timelineContainer .content,
.computerText .timelineContainer .content,
.characterText .timelineContainer .content,
.situationText .timelineContainer .content,
.endingAlert .timelineContainer .content {
  padding-inline-start: 20px;
}
@media screen and (max-width: 1264px) {
  .playerText .timelineContainer,
  .computerText .timelineContainer,
  .characterText .timelineContainer,
  .situationText .timelineContainer,
  .endingAlert .timelineContainer {
    padding-inline: 4px;
  }
  .playerText .timelineContainer .content,
  .computerText .timelineContainer .content,
  .characterText .timelineContainer .content,
  .situationText .timelineContainer .content,
  .endingAlert .timelineContainer .content {
    padding-inline-start: 16px;
  }
}
.playerText:first-child,
.computerText:first-child,
.characterText:first-child,
.situationText:first-child,
.endingAlert:first-child {
  border-top-width: 0;
}
@media screen and (max-width: 600px) {
  .playerText,
  .computerText,
  .characterText,
  .situationText,
  .endingAlert {
    padding-top: 25px;
    margin: 25px 0;
    border-top-width: 2px;
  }
}
.playerText.scrolledHighlight,
.computerText.scrolledHighlight,
.characterText.scrolledHighlight,
.situationText.scrolledHighlight,
.endingAlert.scrolledHighlight {
  border-radius: 5px;
}

/* Speech bubble tail. */
.statement::after,
.statement::before {
  content: " ";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  border: solid transparent;
}
.playerText.preserve .statement::after,
.playerText.preserve .statement::before {
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-inline-start: 5px;
  border: none;
  border-radius: 100%;
}
.computerText .statement::after, .characterText .statement::after, .patientText .statement::after,
.computerText .statement::before,
.characterText .statement::before,
.patientText .statement::before {
  inset-inline-end: 100%;
}
.playerText .statement::after,
.playerText .statement::before {
  inset-inline-start: 100%;
}

.playerText .statement::before, .computerText .statement::before, .characterText .statement::before, .patientText .statement::before {
  margin-top: -11px;
  border-width: 11px;
}

.playerText .statement::after, .computerText .statement::after, .characterText .statement::after, .patientText .statement::after {
  margin-top: -10px;
  border-width: 10px;
}

.situationText .situationContainer,
.endingAlert .situationContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.situationText .flexRow > div,
.endingAlert .flexRow > div {
  position: relative;
  align-items: center;
}
.situationText .flexRow > div .v-icon,
.endingAlert .flexRow > div .v-icon {
  position: absolute;
  top: -16px;
  left: -16px;
  z-index: 1;
  padding: 8px;
  color: white;
  background-color: #334155;
  border-radius: 9999px;
  box-sizing: content-box;
}
.situationText .flexRow > div .statement > .v-btn,
.endingAlert .flexRow > div .statement > .v-btn {
  top: 0;
  right: -8px;
  padding: 0;
}
.situationText .statement,
.endingAlert .statement {
  display: block;
  padding: 20px;
  margin: 0 auto;
}

.playerText,
.computerText,
.characterText,
.patientText {
  max-width: 80%;
}
.playerText .statement,
.computerText .statement,
.characterText .statement,
.patientText .statement {
  position: relative;
  max-width: 65%;
}
@media (max-width: 1264px) {
  .playerText,
  .computerText,
  .characterText,
  .patientText {
    max-width: none;
  }
  .playerText .statement,
  .computerText .statement,
  .characterText .statement,
  .patientText .statement {
    max-width: 80%;
  }
}
@media (max-width: 600px) {
  .playerText,
  .computerText,
  .characterText,
  .patientText {
    max-width: none;
  }
  .playerText .statement,
  .computerText .statement,
  .characterText .statement,
  .patientText .statement {
    max-width: none;
  }
}

.additionalContent {
  position: relative;
  margin: 1em 0;
  overflow: hidden;
}
.additionalContent .label {
  display: block;
  margin-bottom: 0.25em;
  font-size: 0.9em;
  font-weight: 600;
  opacity: 0.65;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.additionalContent .wrapper div.icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  align-self: center;
  padding: 12px;
  border-radius: 100%;
}
@media screen and (max-width: 1264px) {
  .additionalContent .wrapper div.icon {
    padding: 4px;
  }
  .additionalContent .wrapper div.icon i {
    transform: scale(0.7);
  }
}
.additionalContent .wrapper div.icon svg {
  width: 32px;
  height: 32px;
}
@media screen and (max-width: 1264px) {
  .additionalContent .wrapper div.icon svg {
    width: 16px;
    height: 16px;
  }
}
.additionalContent .wrapper .content {
  z-index: 1;
  flex: 1 1 auto;
}
.additionalContent .wrapper {
  display: flex;
  border-radius: 10px;
}
@media (max-width: 600px) {
  .additionalContent {
    max-width: none;
  }
  .computerText .additionalContent, .characterText .additionalContent, .patientText .additionalContent, .playerText .additionalContent {
    margin-right: auto;
    margin-left: auto;
  }
}

.thumbnailContainer {
  flex: 0 0 auto !important;
}

.thumbnail {
  display: grid !important;
  width: 80px;
  height: 80px;
  overflow: hidden;
  font-family: poppins, "Open Sans", helvetica, arial, sans-serif;
  font-size: 3em;
  font-weight: 500;
  background-position: center center;
  background-size: cover;
  border-radius: 100%;
  box-sizing: border-box;
  place-items: center !important;
}
.computerText .thumbnail, .characterText .thumbnail {
  background-size: 125%;
}
@media (max-width: 1264px) {
  .thumbnail {
    width: 40px;
    height: 40px;
    font-size: 2em;
  }
  .playerText .thumbnail {
    margin-bottom: 15px;
  }
}
.thumbnail img {
  width: 100%;
  height: 100%;
}
.thumbnail svg {
  width: 40px;
  height: 40px;
  fill: currentColor;
}
@media (max-width: 1264px) {
  .thumbnail svg {
    width: 20px;
    height: 20px;
  }
}

.propertyContainer {
  margin-bottom: 10px;
}
.propertyContainer span {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.8em;
  font-weight: 600;
}
.propertyContainer span svg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
}

.locationChange {
  margin-top: 10px;
}
.locationChange div {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0 5px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 3px;
}
.locationChange div:first-child {
  position: relative;
  margin-right: 27px;
}
.locationChange div:first-child::after {
  content: "";
  position: absolute;
  top: calc(50% - 11px);
  left: calc(100% + 5px);
  display: block;
  width: 22px;
  height: 1.5em;
  padding: 3px 0;
  background-color: transparent;
  background-image: url("../../images/element-sprites.svg#icon-next");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 22px;
}

.flexRow {
  display: flex;
  align-items: center;
  gap: 24px;
}
.flexRow > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  align-items: flex-start;
}
.flexRow > div .statement {
  flex: 1 1 auto;
  max-width: 100%;
}
.flexRow .thumbnail {
  flex: 0 0 auto;
}

.playerText .flexRow > div {
  align-items: flex-end;
}
.playerText .flexRow > div .statement {
  align-items: flex-end;
}

.computerText .statement.thought,
.characterText .statement.thought {
  position: relative;
  padding: 3px;
  background: transparent;
  border: 15px solid transparent;
  border-image-slice: 20% 10% fill;
  border-image-repeat: round;
  box-shadow: none;
}
.computerText .statement.thought::before,
.characterText .statement.thought::before {
  left: -30px;
  width: 15px;
  height: 15px;
}
.computerText .statement.thought::after,
.characterText .statement.thought::after {
  left: -45px;
  width: 10px;
  height: 10px;
}
.computerText .statement.thought::before, .computerText .statement.thought::after,
.characterText .statement.thought::before,
.characterText .statement.thought::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 0;
  border-width: 0;
  border-radius: 50%;
}

.statementAdditional {
  display: block;
  margin-top: 1em;
  margin-bottom: -20px;
  font-size: 0.9em;
  font-weight: 600;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.statementAdditional > span {
  margin-inline-end: 0.5em;
  opacity: 0.65;
}
.statementAdditional svg {
  width: 20px;
  height: 20px;
  margin-right: 0.5em;
  vertical-align: middle;
}

.statement.openResponse p::before, .statement.openResponse p::after {
  content: "“";
  display: inline-block;
  margin: 0 0.1em;
  font-size: 1.5em;
  line-height: 1em;
  opacity: 0.75;
}
.statement.openResponse p::after {
  content: "„";
}/*# sourceMappingURL=history-structure.css.map */