@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

:root {
  /*Globally root*/
  --color-text-primary: #333;
  --color-text-secondary: #ffffff;
  --color-text-tertiary: #b4b4b4;
  --color-text-danger: #ffffff;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #0f6ab9;
  --color-bg-danger: #ff7393;
  /*Buttons*/
  --color-btn-normal: #0f6ab9;
  --color-btn-hover: #004c87;
  --color-btn-active: #1a8cff;
  --color-disabled: #88b3e3;
  /*IOB Colors*/
  --color-business-selling: #008080;
  --color-object-generally: #A9A9A9;
  --color-quantities: #0E5DAA;
  --color-measurement-general: #FF8C00;
  --color-measurement-weight: #616161;
  --color-substance-materials-generally-solid: #8B0000;
  --color-measurement-volume: #7EC0EE;
  --color-substance-materials-generally-liquid: #1E90FF;
  --color-measurement-length-height: #FFD700;
  --color-money-generally: #F0E68C;
  --color-geographical-names: #3CB371;
  --color-places: #ADD8E6;
  --color-business-generally: #272727;
  --color-money-affluence: #B22222;
  /*UPOS Colors*/
  --color-upos-verb: #ff4646;
  --color-upos-noun: #7bdb7b;
  --color-upos-adj: #FFA500;
  --color-upos-adp: #EE82EE;
  --color-upos-punct: #aaa6a6;
  --color-upos-det: #9494ff;
  --color-upos-part: #FFC0CB;
  --color-upos-num: #ffff8a;
  --color-upos-adv: #9effff;
  --color-upos-pron: #c79775;
  --color-upos-aux: #ffe96b;
  --color-upos-cconj: #ececec;
  --color-upos-sconj: #4e7a97;
  --color-upos-sym: #C0C0C0;
  --color-upos-propn: #FFE4E1;
}

body, html {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 2fr max-content;
  grid-template-areas: "header" "main" "footer";
  gap: 0px 0px;
  line-height: 1.5;
}

* > button {
  border: none;
  cursor: pointer;
  background-color: var(--color-btn-normal);
  color: var(--color-text-secondary);
}
* > button:hover {
  background-color: var(--color-btn-hover);
  color: var(--color-text-secondary);
}
* > button:disabled {
  pointer-events: none;
  background-color: #ececec;
  color: var(--color-disabled);
}

.active {
  background-color: var(--color-btn-active);
  color: var(--color-text-secondary);
}

* > a {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-primary);
  font-weight: 600;
}
* > a::after {
  content: "";
  background-color: rgba(15, 106, 185, 0.2);
  position: absolute;
  left: 10px;
  bottom: -4px;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  z-index: -1;
  transition: 0.2s cubic-bezier(0.25, 0.1, 0, 1.8);
}
* > a:hover:after {
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 100%;
}

* > input::-webkit-outer-spin-button,
* > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10%, 90% {
    transform: translateX(-0.3em);
  }
  20%, 80% {
    transform: translateX(0.3em);
  }
  30%, 50%, 70% {
    transform: translateX(-0.3em);
  }
  40%, 60% {
    transform: translateX(0.3em);
  }
  100% {
    transform: translateX(0);
  }
}
.shake {
  animation: shake 0.5s;
}

.header {
  grid-area: header;
  height: 13vh;
  background-color: var(--color-bg-secondary);
}
@media screen and (min-width: 768px) {
  .header {
    height: 15vh;
  }
}
.header .nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "logo-museo logo-università";
  gap: 0 1em;
  width: 100%;
  height: 100%;
  transform: translateY(30%);
}
.header .nav .nav-brand {
  position: relative;
  height: auto;
}
.header .nav .nav-brand .logo {
  max-width: 70%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.header .nav .nav-brand .museum {
  margin: auto 2em;
  float: left;
}
.header .nav .nav-brand .university {
  float: right;
  margin: auto 2em;
}

.info__ {
  grid-area: main;
  position: relative;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr max-content;
  grid-template-areas: "first-container" "second-container";
  gap: 0 0;
  color: var(--color-text-primary);
}
.info__ .descr-container {
  grid-area: first-container;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 2.8fr;
  grid-template-areas: "title" "subtitle" "text";
  gap: 0em 0em;
  width: 100%;
  padding-inline: 2em;
  margin-inline: auto;
}
.info__ .descr-container .title {
  grid-area: title;
  font-size: 2.2em;
  line-height: 3em;
}
.info__ .descr-container .title > span {
  display: inline;
  color: var(--color-text-primary);
}
.info__ .descr-container .subtitle {
  grid-area: subtitle;
}
.info__ .descr-container .subtitle > span {
  font-size: 3em;
  display: block;
  color: var(--color-text-tertiary);
}
.info__ .descr-container .description__text {
  grid-area: text;
  padding-block: 3em;
  width: 100%;
  font-size: 1em;
  line-height: 1.5em;
}
.info__ .descr-container .description__text > p {
  color: var(--color-text-primary);
  padding-block: 0.5em;
}
.info__ .cards-container {
  grid-area: second-container;
  padding-inline: 1em;
}
.info__ .cards-container .cards-box {
  max-width: 80%;
  margin-inline: auto;
  text-align: center;
}
.info__ .cards-container .cards-box .linguistic-figure {
  position: relative;
}
.info__ .cards-container .cards-box .linguistic-figure img {
  width: 100%;
  height: auto;
}
.info__ .cards-container .cards-box .area-title > h1 {
  color: var(--color-text-primary);
  font-size: 1.5em;
  line-height: 1.5em;
}
.info__ .cards-container .cards-box .cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3em 5em;
  padding-block: 2em;
}
@media screen and (min-width: 992px) {
  .info__ .cards-container .cards-box .cards {
    grid-template-columns: 1fr 1fr;
  }
}
.info__ .cards-container .cards-box .cards .bg-cards {
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
  border-radius: 0.3em;
}
.info__ .cards-container .cards-box .cards .bg-cards .card {
  padding-inline: 3.5em;
  padding-block: 4.5em;
}
.info__ .cards-container .cards-box .cards .bg-cards .card .content {
  text-align: center;
  font-size: 1em;
}
.info__ .cards-container .cards-box .cards .bg-cards .card .content h1 {
  color: var(--color-text-primary);
  line-height: 1.5em;
}
.info__ .cards-container .cards-box .cards .bg-cards .card .content p {
  padding-block: 1em;
}
.info__ .cards-container .cards-box .cards .bg-cards .card .content form button {
  border: none;
  cursor: pointer;
  border-radius: 0.3em;
  padding-block: 1em;
  padding-inline: 2em;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
}
.info__ .syntax_descr, .info__ .semantics_descr, .info__ .team_descr {
  grid-area: first-container;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 2.8fr;
  grid-template-areas: "title" "subtitle" "text";
  gap: 0em 0em;
  padding-inline: 2em;
  margin-inline: auto;
}
.info__ .syntax_descr .title, .info__ .semantics_descr .title, .info__ .team_descr .title {
  grid-area: title;
  font-size: 2.2em;
  line-height: 3em;
}
.info__ .syntax_descr .title > span, .info__ .semantics_descr .title > span, .info__ .team_descr .title > span {
  display: inline;
  color: var(--color-text-primary);
}
.info__ .syntax_descr .subtitle, .info__ .semantics_descr .subtitle, .info__ .team_descr .subtitle {
  grid-area: subtitle;
}
.info__ .syntax_descr .subtitle > span, .info__ .semantics_descr .subtitle > span, .info__ .team_descr .subtitle > span {
  font-size: 3em;
  display: block;
  color: var(--color-text-tertiary);
}
.info__ .syntax_descr .proj-desc, .info__ .semantics_descr .proj-desc, .info__ .team_descr .proj-desc {
  grid-area: text;
  padding-block: 3em;
  width: 100%;
  font-size: 1em;
  line-height: 1.5em;
}
.info__ .syntax_descr .proj-desc ul, .info__ .semantics_descr .proj-desc ul, .info__ .team_descr .proj-desc ul {
  list-style-type: none;
  margin-block: 1em;
  -webkit-padding-start: 2.5em;
          padding-inline-start: 2.5em;
  padding-block: 0.5em;
}
.info__ .syntax_descr .proj-desc ol, .info__ .semantics_descr .proj-desc ol, .info__ .team_descr .proj-desc ol {
  list-style-type: decimal;
  margin-block: 1em;
  -webkit-padding-start: 2.5em;
          padding-inline-start: 2.5em;
  padding-block: 0.5em;
}
.info__ .syntax_descr .proj-desc p, .info__ .semantics_descr .proj-desc p, .info__ .team_descr .proj-desc p {
  color: var(--color-text-primary);
  padding-block: 0.5em;
}
.info__ .syntax_descr .proj-desc form, .info__ .semantics_descr .proj-desc form, .info__ .team_descr .proj-desc form {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 600px) {
  .info__ .syntax_descr .proj-desc form, .info__ .semantics_descr .proj-desc form, .info__ .team_descr .proj-desc form {
    justify-content: end;
  }
}
.info__ .syntax_descr .proj-desc form button, .info__ .semantics_descr .proj-desc form button, .info__ .team_descr .proj-desc form button {
  border: none;
  cursor: pointer;
  border-radius: 0.3em;
  padding-block: 0.7em;
  padding-inline: 2em;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
}
.info__ .syntax_descr .proj-desc h2, .info__ .semantics_descr .proj-desc h2, .info__ .team_descr .proj-desc h2 {
  padding-block: 0.5em;
}

.app {
  grid-area: main;
  position: relative;
  background-color: var(--color-bg-primary);
}
.app .nav-chapters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "search chapters";
  gap: 0 1em;
  width: 100%;
  height: auto;
  padding-block: 1em;
}
.app .nav-chapters .filter-container {
  grid-area: search;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app .nav-chapters .filter-container form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "search-bar filter";
  gap: 0 0;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  -webkit-margin-start: 2.5em;
          margin-inline-start: 2.5em;
}
.app .nav-chapters .filter-container form .search-bar {
  grid-area: search-bar;
  position: relative;
  display: inline-flex;
  width: 180px;
  height: 30px;
  border: 1px solid gray;
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  padding: 0.3em;
  justify-self: end;
}
.app .nav-chapters .filter-container form .search-bar:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-btn-active);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.app .nav-chapters .filter-container form .select-search {
  grid-area: filter;
  position: relative;
  width: 100%;
  height: 6vh;
  display: inline-flex;
  justify-self: start;
  align-items: center;
}
.app .nav-chapters .filter-container form .select-search .select-value {
  width: 70px;
  height: 30px;
  padding: 0.3em;
  background-color: var(--color-btn-normal);
  color: var(--color-text-secondary);
  font-size: small;
  border: 1px solid gray;
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app .nav-chapters .filter-container form .select-search .select-value:hover {
  background-color: var(--color-btn-hover);
}
.app .nav-chapters .filter-container form .select-search .select-dropdown {
  position: absolute;
  top: 80%;
  width: 70px;
  display: none;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 0.3em 0.3em;
}
.app .nav-chapters .filter-container form .select-search .select-dropdown.open {
  display: block;
}
.app .nav-chapters .filter-container form .select-search .select-option {
  padding: 0.3em;
  background-color: #fff;
  font-size: small;
  cursor: pointer;
}
.app .nav-chapters .filter-container form .select-search .select-option:hover {
  color: var(--color-text-secondary);
  background-color: var(--color-btn-normal);
}
.app .nav-chapters .filter-container form .select-search .select-option:last-child {
  border-radius: 0 0 0.3em 0.3em;
}
.app .nav-chapters .chapter-container {
  grid-area: chapters;
  position: relative;
  width: 100%;
  height: 6vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.app .nav-chapters .chapter-container .chapter-value {
  width: 100px;
  height: 30px;
  padding: 0.3em;
  font-size: small;
  background-color: var(--color-btn-normal);
  color: var(--color-text-secondary);
  border: 1px solid gray;
  border-radius: 0.3em;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app .nav-chapters .chapter-container .chapter-dropdown {
  position: absolute;
  top: 80%;
  width: 100px;
  display: none;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 0.3em 0.3em;
}
.app .nav-chapters .chapter-container .chapter-dropdown.open {
  display: block;
}
.app .nav-chapters .chapter-container .chapter-option {
  font-size: small;
  padding: 0.3em;
  background-color: #fff;
  cursor: pointer;
}
.app .nav-chapters .chapter-container .chapter-option:hover {
  color: var(--color-text-secondary);
  background-color: var(--color-btn-normal);
}
.app .nav-chapters .chapter-container .chapter-option:last-child {
  border-radius: 0 0 0.3em 0.3em;
}
.app .visualizer {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-template-rows: min-content min-content max-content max-content;
  grid-template-areas: "view-toggle-container view-toggle-container view-toggle-container" "counter counter counter" "previous sentence-container next" "visual-container visual-container visual-container";
  gap: 0px 0px;
  height: auto;
}
.app .visualizer .view-toggle-container {
  grid-area: view-toggle-container;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "pos semantic";
  gap: 0 1em;
  width: 100%;
  height: 6vh;
  border-bottom: 1px solid var(--color-bg-secondary);
  box-shadow: inset 0px -5px 8px 0px rgba(0, 0, 0, 0.1);
}
.app .visualizer .view-toggle-container .pos-toggle-container {
  grid-area: pos;
  display: flex;
  justify-content: center;
  align-items: last baseline;
}
.app .visualizer .view-toggle-container .pos-toggle-container .button-syntax {
  padding-block: 0.8em;
  padding-inline: 1em;
  border-radius: 0.3em 0.3em 0 0;
}
.app .visualizer .view-toggle-container .semantic-toggle-container {
  grid-area: semantic;
  display: flex;
  justify-content: center;
  align-items: last baseline;
}
.app .visualizer .view-toggle-container .semantic-toggle-container .button-semantic {
  padding-block: 0.8em;
  padding-inline: 1em;
  border-radius: 0.3em 0.3em 0 0;
}
.app .visualizer .counter-container {
  grid-area: counter;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5vh;
}
.app .visualizer .counter-container .counter-box .counter-info {
  -webkit-margin-end: 1em;
          margin-inline-end: 1em;
}
.app .visualizer .counter-container .counter-box .counter-info .number-input {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 0.3em;
  padding: 0.3em;
  margin-right: 0.6em;
}
.app .visualizer .counter-container .counter-box .counter-info .number-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-btn-active);
}
.app .visualizer .counter-container .counter-box .jumper-button {
  border-radius: 0.3em;
  padding-block: 0.5em;
  padding-inline: 2em;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
}
.app .visualizer #previous {
  grid-area: previous;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 2em;
}
.app .visualizer #previous #previous-button {
  width: 3.5em;
  height: 3.5em;
  border-radius: 0.3em;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
}
.app .visualizer #previous #previous-button strong {
  font-size: 2em;
}
.app .visualizer #previous #previous-button :disabled {
  pointer-events: none;
}
.app .visualizer #previous #previous-button :disabled strong {
  color: var(--color-disabled);
}
.app .visualizer #next {
  grid-area: next;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 2em;
}
.app .visualizer #next #next-button {
  width: 3.5em;
  height: 3.5em;
  border-radius: 0.3em;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
}
.app .visualizer #next #next-button strong {
  font-size: 2em;
}
.app .visualizer #next #next-button :disabled {
  pointer-events: none;
}
.app .visualizer #next #next-button :disabled strong {
  color: var(--color-disabled);
}
.app .visualizer .sentence-container {
  grid-area: sentence-container;
  margin: auto 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app .visualizer .sentence-container .sentence-box {
  padding-block: 1em;
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence {
  display: inline-block;
  text-overflow: ellipsis;
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-line {
  display: block;
  position: relative;
  bottom: 0.1em;
  border: 0;
  background-color: transparent;
  height: 0.4em;
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-I2-2 {
  background-color: var(--color-business-selling);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-O2 {
  background-color: var(--color-object-generally);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-N5 {
  background-color: var(--color-quantities);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-N3-1 {
  background-color: var(--color-measurement-general);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-N3-5 {
  background-color: var(--color-measurement-weight);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-O1-1 {
  background-color: var(--color-substance-materials-generally-solid);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-N3-4 {
  background-color: var(--color-measurement-volume);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-O1-2 {
  background-color: var(--color-substance-materials-generally-liquid);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-N3-7 {
  background-color: var(--color-measurement-length-height);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-I1 {
  background-color: var(--color-money-generally);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-Z2 {
  background-color: var(--color-geographical-names);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-M7 {
  background-color: var(--color-places);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-I2-1 {
  background-color: var(--color-business-generally);
}
.app .visualizer .sentence-container .sentence-box .sentence .token-sentence .category-I1-1 {
  background-color: var(--color-money-affluence);
}
.app .visualizer .sentence-container .sentence-box .sentence .clickable {
  cursor: pointer;
}
.app .visualizer .semantic-container {
  grid-area: visual-container;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: 0fr;
  grid-template-areas: "semantic-row";
  gap: 0 0;
  justify-content: center;
  height: 60vh;
}
.app .visualizer .semantic-container .semantic-row {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  grid-template-rows: min-content;
  grid-template-areas: "tag category subcategory";
  gap: 0 0.5em;
  padding-inline: 2em;
  padding-block: 0.2em;
  height: -moz-min-content;
  height: min-content;
}
.app .visualizer .semantic-container .semantic-row .category-I2-2 {
  background-color: var(--color-business-selling);
}
.app .visualizer .semantic-container .semantic-row .category-O2 {
  background-color: var(--color-object-generally);
}
.app .visualizer .semantic-container .semantic-row .category-N5 {
  background-color: var(--color-quantities);
}
.app .visualizer .semantic-container .semantic-row .category-N3-1 {
  background-color: var(--color-measurement-general);
}
.app .visualizer .semantic-container .semantic-row .category-N3-5 {
  background-color: var(--color-measurement-weight);
}
.app .visualizer .semantic-container .semantic-row .category-O1-1 {
  background-color: var(--color-substance-materials-generally-solid);
}
.app .visualizer .semantic-container .semantic-row .category-N3-4 {
  background-color: var(--color-measurement-volume);
}
.app .visualizer .semantic-container .semantic-row .category-O1-2 {
  background-color: var(--color-substance-materials-generally-liquid);
}
.app .visualizer .semantic-container .semantic-row .category-N3-7 {
  background-color: var(--color-measurement-length-height);
}
.app .visualizer .semantic-container .semantic-row .category-I1 {
  background-color: var(--color-money-generally);
}
.app .visualizer .semantic-container .semantic-row .category-Z2 {
  background-color: var(--color-geographical-names);
}
.app .visualizer .semantic-container .semantic-row .category-M7 {
  background-color: var(--color-places);
}
.app .visualizer .semantic-container .semantic-row .category-I2-1 {
  background-color: var(--color-business-generally);
}
.app .visualizer .semantic-container .semantic-row .category-I1-1 {
  background-color: var(--color-money-affluence);
}
.app .visualizer .semantic-container .semantic-row .tag-container {
  grid-area: tag;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  font-weight: 600;
}
.app .visualizer .semantic-container .semantic-row .category-container {
  grid-area: category;
  display: flex;
  align-items: center;
}
.app .visualizer .semantic-container .semantic-row .subcategory-container {
  grid-area: subcategory;
  display: flex;
  align-items: center;
}
.app .visualizer .pos-container {
  grid-area: visual-container;
  display: grid;
  grid-auto-rows: 1fr;
  grid-auto-columns: min-content;
  gap: 2em 0;
  padding-inline: 2em 2em;
  padding-block: 1em;
  max-width: 100vw;
  height: auto;
  justify-content: center;
}
.app .visualizer .pos-container .info_allert {
  font-size: smaller;
  font-weight: 800;
}
.app .visualizer .pos-container .pos-row {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.app .visualizer .pos-container .pos-row .token-container {
  margin-inline: 0.5em;
  padding-block: 0.5em;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "form" "pos";
  gap: 0.5em 0;
}
.app .visualizer .pos-container .pos-row .token-container .token-tooltip {
  position: relative;
  display: inline-block;
  background-color: var(--color-bg-primary);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.app .visualizer .pos-container .pos-row .token-container .lemma-tooltip {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  text-align: center;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out 0.2s;
  border: 1px solid #f5f5f5;
}
.app .visualizer .pos-container .pos-row .token-container .token-tooltip:hover .lemma-tooltip {
  opacity: 1;
  visibility: visible;
  width: auto;
  transition: opacity 0.2s ease-in;
}
.app .visualizer .pos-container .pos-row .token-container .lemma-tooltip::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #f5f5f5 transparent transparent transparent;
}
.app .visualizer .pos-container .pos-row .token-container .token-form {
  grid-area: form;
  background-color: var(--color-bg-primary);
  text-align: center;
  padding-inline: 1em;
  padding-block: 0.3em;
  border-radius: 0.3em;
  z-index: 1;
}
.app .visualizer .pos-container .pos-row .token-container .upos-verb {
  background-color: var(--color-upos-verb);
}
.app .visualizer .pos-container .pos-row .token-container .upos-noun {
  background-color: var(--color-upos-noun);
}
.app .visualizer .pos-container .pos-row .token-container .upos-adj {
  background-color: var(--color-upos-adj);
}
.app .visualizer .pos-container .pos-row .token-container .upos-adp {
  background-color: var(--color-upos-adp);
}
.app .visualizer .pos-container .pos-row .token-container .upos-punct {
  background-color: var(--color-upos-punct);
}
.app .visualizer .pos-container .pos-row .token-container .upos-det {
  background-color: var(--color-upos-det);
}
.app .visualizer .pos-container .pos-row .token-container .upos-part {
  background-color: var(--color-upos-part);
}
.app .visualizer .pos-container .pos-row .token-container .upos-num {
  background-color: var(--color-upos-num);
}
.app .visualizer .pos-container .pos-row .token-container .upos-adv {
  background-color: var(--color-upos-adv);
}
.app .visualizer .pos-container .pos-row .token-container .upos-pron {
  background-color: var(--color-upos-pron);
}
.app .visualizer .pos-container .pos-row .token-container .upos-aux {
  background-color: var(--color-upos-aux);
}
.app .visualizer .pos-container .pos-row .token-container .upos-cconj {
  background-color: var(--color-upos-cconj);
}
.app .visualizer .pos-container .pos-row .token-container .upos-sconj {
  background-color: var(--color-upos-sconj);
}
.app .visualizer .pos-container .pos-row .token-container .upos-sym {
  background-color: var(--color-upos-sym);
}
.app .visualizer .pos-container .pos-row .token-container .upos-propn {
  background-color: var(--color-upos-propn);
}
.app .visualizer .pos-container .pos-row .token-container .token-pos {
  grid-area: pos;
  position: relative;
  text-align: center;
  padding-inline: 1em;
  padding-block: 0.3em;
  border-radius: 0.3em;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  z-index: 0;
}
.app .visualizer .pos-container .pos-row .token-container .token-pos::before {
  content: "";
  position: absolute;
  top: 0%;
  right: 50%;
  transform: translateY(-100%);
  height: 50%;
  border-right: 3px solid #000;
  z-index: 0;
}

.footer {
  grid-area: footer;
  height: 13vh;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  bottom: 0;
}
@media screen and (min-width: 768px) {
  .footer {
    height: 15vh;
  }
}
.footer .footer-content {
  width: 100%;
  max-height: 2vh;
}
@media screen and (min-width: 768px) {
  .footer .footer-content {
    max-height: auto;
  }
}
.footer .footer-content .footer-info {
  margin: 5em auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "copyright workgroup";
  gap: 0 1em;
  position: relative;
  transform: translateY(-70%);
}
.footer .footer-content .footer-info .footer-info__text {
  padding-block: 1em;
}
.footer .footer-content .footer-info .footer-info__text .footer-info__group {
  float: left;
  -webkit-margin-start: 2em;
          margin-inline-start: 2em;
}
.footer .footer-content .footer-info .footer-link {
  padding-block: 1em;
}
.footer .footer-content .footer-info .footer-link .footer-link__text {
  float: right;
  -webkit-margin-end: 2em;
          margin-inline-end: 2em;
  color: var(--color-text-secondary);
  font-weight: normal;
}
.footer .footer-content .footer-info .footer-link .footer-link__text::after {
  content: "";
  background-color: rgba(158, 158, 158, 0.4);
}/*# sourceMappingURL=style.css.map */