@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 */
#conversation {
  color: #1E293B;
  fill: currentColor;
  background: white;
}
#conversation .markdown a:not(.playerSuggestionButton):not(.hasImage) {
  color: #38BDF8;
  border-color: rgba(56, 189, 248, 0.25);
}
#conversation .markdown a:not(.playerSuggestionButton):not(.hasImage):hover {
  background-color: rgba(56, 189, 248, 0.2);
}
#conversation button.playerSuggestionButton {
  color: #64748B;
}

/* Buttons in game on top of the screen */
#buttonOverlayTop {
  color: #1E293B;
}
#buttonOverlayTop button, #buttonOverlayTop a {
  background-color: #334155;
}
#buttonOverlayTop .buttonWithMenu .stepControl + .stepControl {
  border-top: 1px solid #CBD5E1;
}
#buttonOverlayTop .buttonWithMenu .stepControl .buttons {
  border: 1px solid #334155;
}
#buttonOverlayTop .buttonWithMenu .stepControl button {
  background-color: transparent;
}
#buttonOverlayTop .buttonWithMenu .stepControl button:hover {
  color: white;
  background-color: #334155;
}
#buttonOverlayTop .buttonWithMenu .stepControl button + button {
  border-inline-start: solid 1px #334155;
}
#buttonOverlayTop .icon.available::after {
  background: #38BDF8;
  border-color: rgb(8.5970873786, 171.9417475728, 244.4029126214);
}
#buttonOverlayTop .icon.positive::after {
  background: #5ABF86;
  border-color: rgb(64.2794759825, 165.7205240175, 108.4716157205);
}
#buttonOverlayTop .icon.concern::after {
  background: #F09D25;
  border-color: rgb(211.4506437768, 130.9442060086, 14.5493562232);
}
#buttonOverlayTop .icon.negative::after {
  background: #FF5252;
  border-color: #ff1f1f;
}
#buttonOverlayTop .icon.remark::after {
  background: #38BDF8;
  border-color: rgb(8.5970873786, 171.9417475728, 244.4029126214);
}
#buttonOverlayTop .icon.hint::after {
  background: #FFD740;
  border-color: rgb(255, 204.3193717277, 13);
}
@media (pointer: fine) {
  #buttonOverlayTop .icon:not(#testIcon):not(.toggled):hover {
    background-color: rgb(39.525, 50.375, 65.875);
  }
}
@media (min-width: 600px) and (min-height: 480px) {
  #buttonOverlayTop .icon.toggled {
    color: white;
    background-color: #1E293B;
  }
}
@media (min-width: 600px) and (min-height: 480px) and (pointer: fine) {
  #buttonOverlayTop .icon.toggled:hover {
    background-color: rgb(19.6853932584, 26.9033707865, 38.7146067416);
  }
}
#buttonOverlayTop::before {
  background: linear-gradient(rgb(26.5617977528, 36.3011235955, 52.2382022472), rgba(26.5617977528, 36.3011235955, 52.2382022472, 0));
}

.stepControl .value {
  background-color: rgba(248, 250, 252, 0.1);
  border-color: rgba(248, 250, 252, 0.25);
}

#statementToolbar > button, #buttonOverlayBottom > button {
  color: rgba(30, 41, 59, 0.9);
  background-color: white;
}
@media (pointer: fine) {
  #statementToolbar > button:hover, #buttonOverlayBottom > button:hover {
    color: #1e293b;
    background-color: hsl(0, 0%, 105%);
  }
}
#statementToolbar .switchWrapper button.enabled, #buttonOverlayBottom .switchWrapper button.enabled {
  color: white;
  background-color: #F79420;
}

.box {
  background-color: white;
}

#aside .content {
  color: white;
  background-color: #64748B;
}

#infoArea .collapsed > div {
  background-color: #F1F5F9;
}
#infoArea .collapsed > div:hover {
  background-color: rgb(233.86, 239.9, 245.94);
}
#infoArea :not(.collapsed) > div {
  background-color: rgba(241, 245, 249, 0.8);
}
@media screen and (max-width: 600px), (max-height: 480px) {
  #infoArea :not(.collapsed) > div {
    background-color: #F1F5F9;
  }
}
#infoArea :not(.collapsed) > div:hover {
  background-color: #F1F5F9;
}
#infoArea #aside > div {
  background-color: initial;
}
#infoArea .hint div.icon {
  color: #F8FAFC;
  fill: #F8FAFC;
  background: #64748B;
}
#infoArea .hint .wrapper {
  border-color: #64748B;
}
#infoArea .feedback div.icon {
  color: #F8FAFC;
  fill: #F8FAFC;
  background: #F79420;
}
#infoArea .feedback .wrapper {
  border-color: #F79420;
}
#infoArea .feedback.positive div.icon {
  color: #F8FAFC;
  fill: #F8FAFC;
  background: #5ABF86;
}
#infoArea .feedback.positive .wrapper {
  border-color: #5ABF86;
}
#infoArea .feedback.concern div.icon {
  color: #F8FAFC;
  fill: #F8FAFC;
  background: #F09D25;
}
#infoArea .feedback.concern .wrapper {
  border-color: #F09D25;
}
#infoArea .feedback.negative div.icon {
  color: #F8FAFC;
  fill: #F8FAFC;
  background: #FF5252;
}
#infoArea .feedback.negative .wrapper {
  border-color: #FF5252;
}
#infoArea .feedback.remark div.icon {
  color: #F8FAFC;
  fill: #F8FAFC;
  background: #38BDF8;
}
#infoArea .feedback.remark .wrapper {
  border-color: #38BDF8;
}

#computer::after {
  border-right-color: hsl(0, 0%, 115%);
  border-left-color: hsl(0, 0%, 115%);
}

#computerThought::after, #computerThought::before {
  background: hsla(0, 0%, 115%, 0.9);
}
#computerThought .computerStatementBalloonText {
  background-color: hsl(0, 0%, 115%);
}

.computerStatementBalloonText {
  color: #1E293B;
  background-color: hsl(0, 0%, 115%);
}

#progressbar .bar .background {
  background: rgba(0, 0, 0, 0.1);
}
#progressbar .bar .inner {
  background: rgb(var(--accent-color));
}
#progressbar.white .bar .background {
  background: rgba(191.25, 191.25, 191.25, 0.1);
}
#progressbar.white .bar .inner {
  background: white;
}
#progressbar.white .text {
  color: white;
}
#progressbar.error .inner {
  background: #FF5252;
}
#progressbar.error .text {
  color: #FF5252;
}

#intents .active {
  background-color: #E2E8F0;
}
#intents .active .conversationClickable {
  border-color: #CBD5E1;
}

#responsesVisual .conversationClickable {
  border-color: #E2E8F0;
}
@media (pointer: fine) {
  #responsesVisual .conversationClickable:hover {
    background-color: #F1F5F9;
  }
}

.dialogueOverlay .container {
  background-color: hsl(210, 40%, 103.0392156863%);
}
.dialogueOverlay .container.bigtext {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

@media (pointer: fine) {
  .inSituation .player > .conversationClickable:hover {
    border-color: rgba(var(--accent-color), 0.25);
  }
  .inSituation .player > .conversationClickable:hover::before {
    background-color: transparent;
    border-color: rgb(var(--accent-color));
  }
}

#speechVisual .mic {
  color: rgba(0, 0, 0, 0.5);
  background: #F8FAFC;
}
#speechVisual .mic .recordStopButton {
  background-color: #E53939;
}
#speechVisual .mic.on {
  color: white;
  background: #E53939;
}
#speechVisual .mic.on .recordStopButton {
  background-color: white;
}
#speechVisual .bg {
  background: rgba(30, 41, 59, 0.25);
}

#queueContainer div .icon.elementType {
  color: white;
}

button.buttonClose {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

@keyframes pulse {
  0% {
    background-color: rgba(30, 41, 59, 0);
  }
  12% {
    background-color: rgba(30, 41, 59, 0.5);
  }
  25% {
    background-color: rgba(30, 41, 59, 0);
  }
  37% {
    background-color: rgba(30, 41, 59, 0.5);
  }
  50% {
    background-color: rgba(30, 41, 59, 0.25);
  }
  100% {
    background-color: rgba(30, 41, 59, 0.25);
  }
}
@keyframes pulse-positive {
  0% {
    background-color: rgba(90, 191, 134, 0);
  }
  12% {
    background-color: rgba(90, 191, 134, 0.5);
  }
  25% {
    background-color: rgba(90, 191, 134, 0);
  }
  37% {
    background-color: rgba(90, 191, 134, 0.5);
  }
  50% {
    background-color: rgba(90, 191, 134, 0.25);
  }
  100% {
    background-color: rgba(90, 191, 134, 0.25);
  }
}
@keyframes pulse-negative {
  0% {
    background-color: rgba(255, 82, 82, 0);
  }
  12% {
    background-color: rgba(255, 82, 82, 0.5);
  }
  25% {
    background-color: rgba(255, 82, 82, 0);
  }
  37% {
    background-color: rgba(255, 82, 82, 0.5);
  }
  50% {
    background-color: rgba(255, 82, 82, 0.25);
  }
  100% {
    background-color: rgba(255, 82, 82, 0.25);
  }
}
@keyframes pulse-concern {
  0% {
    background-color: rgba(240, 157, 37, 0);
  }
  12% {
    background-color: rgba(240, 157, 37, 0.5);
  }
  25% {
    background-color: rgba(240, 157, 37, 0);
  }
  37% {
    background-color: rgba(240, 157, 37, 0.5);
  }
  50% {
    background-color: rgba(240, 157, 37, 0.25);
  }
  100% {
    background-color: rgba(240, 157, 37, 0.25);
  }
}
@keyframes pulse-remark {
  0% {
    background-color: rgba(56, 146, 255, 0);
  }
  12% {
    background-color: rgba(56, 146, 255, 0.5);
  }
  25% {
    background-color: rgba(56, 146, 255, 0);
  }
  37% {
    background-color: rgba(56, 146, 255, 0.5);
  }
  50% {
    background-color: rgba(56, 146, 255, 0.25);
  }
  100% {
    background-color: rgba(56, 146, 255, 0.25);
  }
}
#suggestionDialog .description, #suggestionDialog .legalStatement {
  color: rgba(30, 41, 59, 0.75);
}

#editComputerStatement, #editSituation, #editThought {
  color: white;
  background-color: #1E293B;
}

#finishIndicator {
  border-color: rgb(var(--accent-color));
}
#finishIndicator svg {
  fill: rgb(var(--accent-color));
}
#finishIndicator svg.background {
  fill: rgba(30, 41, 59, 0.75);
}
#finishIndicator ~ span {
  background: radial-gradient(ellipse at center, #f8fafc 0%, rgba(248, 250, 252, 0) 50%);
}
#finishIndicator ~ p {
  text-shadow: 0 5px 15px rgba(248, 250, 252, 0.75);
}

#testIcon svg:first-of-type {
  fill: rgba(var(--accent-color), 0.75) !important;
}
#testIcon span::before, #testIcon span::after {
  background-color: rgb(var(--accent-color));
}

#scrollTop .button,
#scrollBottom .button {
  background: hsl(210, 40%, 103.0392156863%);
}

#rightSideControls button.icon {
  color: white;
}

#screenshotSettings {
  background: #F8FAFC;
}
#screenshotSettings > div {
  border-color: rgba(0, 0, 0, 0.1);
}
#screenshotSettings #buttonCollapse,
#screenshotSettings #buttonExpand {
  fill: #F8FAFC;
  background: #1E293B;
}
#screenshotSettings .elementVisibility svg {
  fill: hsl(210, 40%, 113.0392156863%);
  background: rgba(30, 41, 59, 0.01);
  border-color: rgba(30, 41, 59, 0.25);
}
#screenshotSettings .elementVisibility svg > g {
  stroke: rgba(30, 41, 59, 0.5);
}
#screenshotSettings .elementVisibility svg > g[data-element]:hover, #screenshotSettings .elementVisibility svg > g#advancedElements:hover {
  stroke: rgb(var(--accent-color));
  fill: rgba(var(--accent-color), 0.25);
}

#referenceMaterial.shown {
  background-color: rgba(0, 0, 0, 0.75);
}
#referenceMaterial .content, #referenceMaterial button.buttonCollapse {
  background-color: white;
}

#dialogueDescription .timeNote {
  color: white;
  background-color: rgb(var(--accent-color));
}
#dialogueDescription .scenarioCharacter {
  background-color: #DDD;
}
#dialogueDescription .scenarioCharacter .characterName {
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
}
#dialogueDescription .scenarioCharacter .skills {
  color: white;
  background-color: #0369A1;
}
#dialogueDescription .scenarioCharacter .skills .icon {
  background-color: #0284C7;
}
#dialogueDescription .scenarioCharacter .skills .textWrapper {
  color: white;
}
#dialogueDescription .scenarioCharacter .timeNote {
  background-color: rgb(var(--accent-color));
}
#dialogueDescription .situationWrapper {
  background-color: #F1F5F9;
}
@media screen and (min-width: 1264px) {
  #dialogueDescription .situationWrapper::before {
    border-right-color: #F1F5F9;
  }
}
#dialogueDescription .box {
  background-color: #F8FAFC;
}
#dialogueDescription .box:enabled:not(.open, .clicked):hover {
  background-color: rgb(237.29, 242.35, 247.41);
}
#dialogueDescription .box.talents .talent {
  --color: #334155;
}
#dialogueDescription .box.talents .talent::before {
  background-color: var(--color);
}
#dialogueDescription .box.talents .talent .talent-icon {
  color: var(--color);
}
#dialogueDescription .box.talents .talent .talent-divider {
  background-color: var(--color);
}
#dialogueDescription .box.talents .talent .talent-title {
  color: black;
}
#dialogueDescription .box.talents .talent .talent-bottom-border {
  background-color: var(--color);
}
#dialogueDescription .box.talents .talent .title {
  color: var(--color);
}
#dialogueDescription .box.clicked {
  color: white;
  background-color: #334155;
}
#dialogueDescription .box .buttonGoBack {
  background-color: #94A3B8;
}
#dialogueDescription .box .buttonGoBack:enabled:hover {
  background-color: rgb(132.6713483146, 149.8202247191, 173.8286516854);
}
#dialogueDescription .box .buttonGoBack .mdi {
  color: white;
}
#dialogueDescription .box .mdi {
  color: #8BC34A;
}/*# sourceMappingURL=scenario-theme.css.map */