/* styles for menu.html template (navbar etc) */
/* #dafixedtop .navbar-text, #graphsfixedtop .navbar-text */
/*     margin: 0 */
/*     padding-top: 15px */
/*     padding-bottom: 15px */
/*     float: none */
#dafixedtop {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 910;
}

#corporatop.nav-tabs > li {
  padding-left: 1;
  padding-right: 1;
}

#corporatop.nav-tabs > li > a {
  padding-top: 8;
  padding-bottom: 8;
  line-height: 0.85;
  margin-bottom: -5px;
}

.spacing-class {
  margin-right: 10px;
}

.exportbtn {
  /* border: 1px solid #333 */
  margin-top: 17px;
}

.btn .glyphicon {
  /* glyphicons are always rendered too high within bootstrap buttons */
  vertical-align: middle;
}

/* graph name => editable input => submitName() => minimsg */
.editable {
  color: grey;
}

#graphname-edit {
  color: white;
  background-color: transparent;
  border: none;
  max-width: 8em;
}

.minimsg {
  font-size: 0.7em;
  padding: 7p0x 9px;
}

.minimsg * {
  line-height: 100%;
}

.tile-menu__item .fa {
  margin-right: 8px;
}

.context-menu {
  position: absolute;
  left: 96px;
  top: -64px;
  background-color: white;
  z-index: 1000;
}

.context-menu a.list-group-item {
  cursor: pointer;
}

.search-bar-container {
  margin-top: 11px;
  text-align: center;
  max-width: 800px;
  height: 33px;
  float: left;
  display: grid;
  grid-template-columns: auto auto auto;
}

.search-bar-toggle {
  padding: 2px;
  margin: 2px;
  border: 0;
}

.search-bar.closed {
  display: none;
}

#graph-explorer {
  margin-left: 20rem;
  margin-right: 20rem;
  padding-top: 0px;
}

.graph-container {
  /* #toggle-container */
  /*   position: fixed */
  /*   z-index: 999 // needs to appear above solid menu bar */
  /*   right: 25% */
  /*   top: 10px */
  /*   width: 50% */
  /*   .container-fluid */
  /*     padding-top: 90px */
}
.graph-container #sp-container {
  position: absolute;
  max-height: 600px;
  top: 170px;
  border: 1px white solid;
  background-color: white;
  width: 28%;
  z-index: 15;
}
.graph-container #sp-container #myTab {
  marginBottom: 18px;
  marginTop: 18px;
}
.graph-container #sp-container #myTabContent {
  borderBottom: 1px solid black;
  paddingBottom: 19px;
}
.graph-container #sp-container #horizontal-checkbox ul {
  display: inline;
  float: left;
}
.graph-container .lefthanded #sp-container {
  left: 0%;
}
.graph-container .righthanded #sp-container {
  left: 70%;
}
.graph-container .graph-tree {
  position: absolute;
  max-height: 600px;
  top: 170px;
  background-color: #fff;
  z-index: 1;
}
.graph-container .lefthanded .graph-tree {
  left: 80%;
}
.graph-container .righthanded .graph-tree {
  left: 0%;
}
.graph-container #controls-container {
  position: absolute;
  z-index: 900;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.75);
  left: 0;
  right: 0;
  top: 60px;
}
.graph-container #controls-container .nav-item {
  padding-left: 0.8rem;
}
.graph-container .graph-row {
  height: 100vh;
}
.graph-container .graph-row #graph-view {
  height: 95vh;
}
.graph-container #tree {
  position: absolute;
  z-index: 1;
}

.input-with-autocomplete .completions {
  position: fixed;
  max-height: 300px;
  overflow-y: scroll;
  width: 300px;
  top: 50px;
}

#logo-designed {
  border: 15px;
}
#logo-designed img {
  height: 150px;
  border: 3px solid white;
}

#user-page-header {
  border-bottom: 1px solid black;
}

#user-page-info {
  margin-top: 38px;
}

.tableHeader {
  color: white;
}

#toolbar {
  display: inline;
}
#toolbar ul li {
  display: inline;
  margin-right: 19px;
}
#toolbar ul li form {
  display: inline;
}

#horizontal-checkbox ul li {
  display: inline;
  float: left;
  margin-top: 12px;
  margin-right: 21px;
}

li#rename #rename-a {
  display: none;
  position: absolute;
  left: 125px;
}

#create-node-tooltip {
  position: absolute;
  left: 96px;
  top: -64px;
  background-color: white;
  z-index: 1000;
}
#create-node-tooltip .card-body input {
  min-width: 200px;
}

#file-type-tooltip {
  position: absolute;
  left: 96px;
  top: -64px;
  background-color: white;
  z-index: 1000;
}
#file-type-tooltip .card-body select {
  min-width: 200px;
}

.glyphitem {
  top: 0;
  display: inline-block;
  float: right;
  opacity: 0.6;
  padding-right: 5px;
  cursor: pointer;
  transition: transform 0.1s ease-out 0s;
  font-size: 15px;
  text-align: center;
}
.glyphitem:hover {
  display: inline-block;
  opacity: 1;
  transform: scale(1.4);
}

#sp-container {
  -webkit-transition: width 2s;
  transition: width 2s;
}

.nooverflow {
  max-width: 300px;
  height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nooverflow:hover {
  overflow: visible;
  height: auto;
}

#graph-tree .tree {
  margin-top: 27px;
}

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

.tab-pane .reload-btn {
  padding-right: 6px;
}

.flex {
  display: flex;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-center {
  display: flex;
  flew-wrap: wrap;
  justify-content: center;
}

.flex-space-between, .flex-center {
  display: flex;
  justify-content: space-between;
}

a:focus, a:hover {
  cursor: pointer;
}

body > .tree ul > li:first-child::before {
  top: 12px;
}

li .leaf {
  display: flex;
  flex-direction: row;
  color: #005a9aff;
}
li .leaf .folder-icon {
  padding: 0 2 0 2;
  cursor: pointer;
}
li .leaf .node-link a {
  cursor: pointer;
}
li .leaf .node-link > .node-text {
  color: #000000;
}
li .leaf a.settings {
  cursor: pointer;
  display: block;
  padding: 0 2 0 2;
  text-decoration: none;
  visibility: hidden;
  z-index: 1;
}
li .leaf:hover a.settings {
  visibility: visible;
}

.tree ul li {
  position: relative;
}
.tree ul li::after {
  content: " ";
  height: 1px;
  position: absolute;
  top: 12px;
}
.tree ul li::before {
  bottom: -12px;
  content: " ";
  height: 7px;
  position: absolute;
  top: 5px;
}
.tree ul li:not(:first-child):last-child::before {
  display: none;
}
.tree ul li:only-child::before {
  bottom: 7px;
  content: " ";
  display: list-item;
  position: absolute;
  width: 1px;
  top: 5px;
}
.tree ul li.with-children::after {
  background-color: #000;
}
.tree ul li.with-children::before {
  background-color: #000;
}
.tree .lefthanded .leaf {
  justify-content: flex-end;
}
.tree .lefthanded ul {
  margin-right: 5px;
}
.tree .lefthanded ul li {
  margin-right: 10px;
  padding-right: 5px;
}
.tree .lefthanded ul li.with-children::after {
  right: -10px;
  width: 5px;
}
.tree .lefthanded ul li.with-children::before {
  right: -10px;
  width: 1px;
}
.tree .righthanded .leaf {
  justify-content: flex-start;
}
.tree .righthanded ul {
  margin-left: 5px;
}
.tree .righthanded ul li {
  margin-left: 10px;
  padding-left: 5px;
}
.tree .righthanded ul li.with-children::after {
  left: -10px;
  width: 5px;
}
.tree .righthanded ul li.with-children::before {
  left: -10px;
  width: 1px;
}
.tree .righthanded ul li.with-children:only::before {
  background-color: #000;
  right: 10px;
}
.tree .file-dropped {
  background-color: #d8dfe5;
}
.tree .node-actions {
  padding-left: 5px;
}
.tree .node-actions .update-button.enabled {
  cursor: pointer;
}
.tree .node-actions .update-button.disabled {
  cursor: wait;
}
.tree .node {
  margin-top: 1px;
}
.tree .node.node-type-valid .text {
  text-decoration: underline;
}

.subtree__node {
  margin-top: 2px;
}
.subtree__node__text {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
}
.subtree__node__icons {
  display: flex;
}
.subtree__node__icons .fa {
  margin-left: 2px;
  margin-right: 2px;
}
.subtree__node--can-be-selected {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.right-handed .subtree__node__text {
  flex-direction: row;
  text-align: left;
}
.right-handed .subtree__node__icons {
  flex-direction: row;
}
.right-handed .subtree__node__children > .subtree__node {
  padding-left: 16px;
}

.left-handed .subtree__node__text {
  flex-direction: row-reverse;
  text-align: right;
}
.left-handed .subtree__node__icons {
  flex-direction: row-reverse;
}
.left-handed .subtree__node__children > .subtree__node {
  padding-right: 20px;
}

.node-text {
  display: inline-flex;
}
.node-text--selected {
  font-weight: bold;
  text-decoration: underline;
}
.right-handed .node-text {
  flex-direction: row;
}

.left-handed .node-text {
  flex-direction: row-reverse;
}

.progress-pie {
  background: rgba(51, 122, 183, 0.1);
  border-radius: 100%;
  height: calc(var(--size, 14) * 1px);
  overflow: hidden;
  position: relative;
  width: calc(var(--size, 14) * 1px);
}
.progress-pie .progress-pie-segment {
  --a: calc(var(--over50, 0) * -100%);
  --b: calc((1 + var(--over50, 0)) * 100%);
  --degrees: calc((var(--offset, 0) / 100) * 360);
  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  height: 100%;
  position: absolute;
  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
  transform-origin: 50% 100%;
  width: 100%;
  z-index: calc(1 + var(--over50));
}
.progress-pie .progress-pie-segment:after, .progress-pie .progress-pie-segment:before {
  background: var(--bg, #337ab7);
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}
.progress-pie .progress-pie-segment:before {
  --degrees: calc((var(--value, 45) / 100) * 360);
  transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
  transform-origin: 50% 0%;
}
.progress-pie .progress-pie-segment:after {
  opacity: var(--over50, 0);
}

#node-popup-tooltip {
  position: fixed;
  background-color: white;
  border-radius: 6px;
}
#node-popup-tooltip:hover {
  border: none;
  text-decoration: none;
}
.right-handed #node-popup-tooltip {
  top: 50%;
  left: 16.6666666667%;
  transform: translateY(-50%);
}

.left-handed #node-popup-tooltip {
  top: 50%;
  right: 16.6666666667%;
  transform: translateY(-50%);
}

#node-popup-tooltip .tree .node {
  margin-top: 5px;
}
#node-popup-tooltip .tree .children .node {
  padding-left: 15px;
}
#node-popup-tooltip .panel-actions .almost-useable {
  color: orange;
}
#node-popup-tooltip .panel-actions .development-in-progress {
  color: red;
}
#node-popup-tooltip .panel-actions .ok-to-use {
  color: black;
}
#node-popup-tooltip .popup-container {
  display: flex;
  flex-direction: colum;
}
#node-popup-tooltip .popup-container > .card {
  width: auto !important;
  min-width: 544px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin-bottom: initial;
}
#node-popup-tooltip .popup-container > .card .fa-pencil {
  color: black;
}
#node-popup-tooltip .popup-container > .card .card-body {
  display: flex;
  justify-content: center;
  background-color: white;
  border: none;
}
#node-popup-tooltip .popup-container > .card .card-body .spacer {
  margin: 8px;
}
#node-popup-tooltip .popup-container .frame-search.card {
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  height: 600px;
  width: 1000px;
}
#node-popup-tooltip .popup-container-body {
  max-height: 70vh;
  overflow-y: auto;
}

.forest-layout-wrapper {
  padding-left: 0;
  padding-right: 0;
}

.forest-layout {
  z-index: 909;
  position: fixed;
  height: calc(100vh - 56px);
  width: 100%;
  max-width: inherit;
  scrollbar-width: none;
  overflow-y: scroll;
  overflow-x: visible;
  transition: border 150ms;
}
.forest-layout::-webkit-scrollbar {
  display: none;
}

.forest-layout-action {
  display: flex;
}
.right-handed .forest-layout-action {
  padding-left: 16px;
  padding-right: 8px;
}

.left-handed .forest-layout-action {
  padding-left: 8px;
  padding-right: 16px;
}

.right-handed .forest-layout-action {
  flex-direction: row;
}
.right-handed .forest-layout-action__button {
  margin-right: 16px;
}

.left-handed .forest-layout-action {
  flex-direction: row-reverse;
}
.left-handed .forest-layout-action__button {
  margin-left: 16px;
}

.forest-layout-bottom-teaser {
  z-index: 1;
  pointer-events: none;
  position: fixed;
  bottom: 0;
  height: 24px;
  width: calc(16.6666666667% - 1px);
}
.right-handed .forest-layout-bottom-teaser {
  left: 0;
}

.left-handed .forest-layout-bottom-teaser {
  right: 0;
}

.forest-layout-top-teaser {
  z-index: 1;
  pointer-events: none;
  position: sticky;
  top: 0;
  height: 24px;
  width: calc(100% - 1px);
}
.right-handed .forest-layout-top-teaser {
  left: 0;
}

.left-handed .forest-layout-top-teaser {
  right: 0;
}

.forest-layout-content > ul.tree {
  margin-top: 24px;
  margin-bottom: 0;
}
.right-handed .forest-layout-content > ul.tree {
  padding-left: 16px;
  padding-right: 8px;
}

.left-handed .forest-layout-content > ul.tree {
  padding-left: 8px;
  padding-right: 16px;
}

.forest-layout-content > ul.tree:last-child {
  margin-bottom: 24px;
}

.ids-selector .tree .children {
  padding-left: 0.5em;
}
.ids-selector .tree .children .leaf input {
  margin: 0.1em;
}

.code-editor .editor .code-area {
  flex-grow: 1;
  max-height: 200px;
  min-width: 25%;
  overflow: auto;
}
.code-editor .editor .code-area .code-container {
  background-color: #fafafa;
  box-sizing: border-box;
  position: relative;
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 12px;
  font-variant-ligatures: common-ligatures;
  line-height: 1.5;
  overflow: hidden;
  padding: 0px;
  text-align: left;
}
.code-editor .editor .code-area .code-container textarea {
  border: 0px;
  color: inherit;
  position: absolute;
  left: 0px;
  top: 0px;
  resize: none;
  height: 100%;
  overflow: hidden;
  width: 100%;
  -webkit-text-fill-color: transparent;
  box-sizing: inherit;
  display: inherit;
  margin: 0px;
  padding: 10px;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  word-break: keep-all;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-variant-ligatures: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-indent: inherit;
  text-rendering: inherit;
  text-transform: inherit;
}
.code-editor .editor .code-area .code-container pre {
  background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
  border: 0px none;
  color: #000;
  pointer-events: none;
  position: relative;
  box-sizing: inherit;
  display: inherit;
  margin: 0px;
  padding: 10px;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  word-break: keep-all;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-variant-ligatures: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-indent: inherit;
  text-rendering: inherit;
  text-transform: inherit;
}
.code-editor .editor .v-divider {
  border-left: 1px solid gray;
  cursor: sw-resize;
  height: 100%;
  margin-left: 5px;
  margin-right: 5px;
  width: 1px;
}
.code-editor .editor .html {
  flex-grow: 2;
  margin-left: 8px;
  margin-right: 8px;
  padding-left: 8px;
  padding-right: 8px;
}
.code-editor .editor .html.language-haskell {
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  white-space: pre;
}
.code-editor .editor .html.language-python {
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  white-space: pre;
}
.code-editor .editor .html.language-json {
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  white-space: pre;
}
.code-editor .editor .html.language-md ul li {
  list-style: disc !important;
}
.code-editor .editor .html.language-md ol li {
  list-style: decimal !important;
}
.code-editor__toolbar {
  margin-bottom: 20px;
}
.code-editor__toolbar__type {
  width: 200px;
}

.cache-toggle {
  cursor: pointer;
}

.side-panel {
  background-color: #fff;
  padding: 0.3em;
  width: 28%;
  top: 3.7em;
  position: fixed;
}
.side-panel .corpus-doc-view .annotated-field-wrapper .annotated-field-runs {
  max-height: 200px;
  overflow-y: scroll;
}
.side-panel .list-group .list-group-item-heading {
  display: inline-block;
  width: 60px;
}
.right-handed .side-panel {
  left: 70%;
}
.right-handed .side-panel .header {
  float: right;
}

.left-handed .side-panel {
  left: 2%;
}
.left-handed .side-panel .header {
  float: left;
}

.simple-layout {
  height: 100%;
}
.simple-layout .license {
  padding-top: 10px;
}
.simple-layout .spinner {
  position: absolute;
  left: 50%;
  top: 50%;
}

.table tr td {
  color: #005a9aff;
}
.table tr td .active {
  font-weight: bold;
  text-decoration: underline;
}
.table tr td .ngrams-selector {
  display: flex;
}
.table tr td .ngrams-selector .ngrams-chooser {
  padding: 3px;
}
.table tr td .trash {
  text-decoration: line-through;
}

.action-search {
  margin: 10px;
}

.context-menu {
  position: fixed;
}

.search-bar {
  margin: 10px;
}

/* */
.body ul li {
  color: #005a9aff;
}
.body ul .nav {
  color: #005a9aff;
}

.btn-primary {
  color: white;
  background-color: #005a9aff;
  border-color: black;
}

ul .nav {
  color: #005a9aff;
}
ul li {
  color: #005a9aff;
}

.frame {
  height: 100vh;
}
.frame iframe {
  border: 0;
}

.join-button {
  padding-bottom: 100px;
  padding-top: 100px;
}

select.form-control {
  cursor: pointer;
}

#app {
  width: 100%;
}

.router-inner {
  display: flex;
}
.router-inner.left-handed {
  flex-direction: row;
}
.router-inner.right-handed {
  flex-direction: row;
}

.main-page {
  flex-grow: 1;
}
.main-page__main-row {
  display: flex;
}
.main-page__main-row--with-y-tiles .main-page__main-route {
  width: 60%;
}
.main-page__main-row--with-y-tiles .main-page__vertical-tiles {
  width: 40%;
}
.main-page__main-row--only-y-tiles {
  min-height: calc( 100vh - 56px);
}
.main-page__main-route {
  padding: 24px 32px;
  width: 100%;
}
.main-page__vertical-tiles {
  display: flex;
  flex-direction: column;
}
.main-page__horizontal-tiles {
  display: flex;
  flex-direction: row;
}
.main-page__horizontal-tiles--1 .tile-block {
  width: calc( 100% / 1);
}
.main-page__horizontal-tiles--2 .tile-block {
  width: calc( 100% / 2);
}
.main-page__horizontal-tiles--3 .tile-block {
  width: calc( 100% / 3);
}
.main-page__horizontal-tiles--4 .tile-block {
  width: calc( 100% / 4);
}
.main-page__horizontal-tiles--5 .tile-block {
  width: calc( 100% / 5);
}
.main-page__horizontal-tiles--6 .tile-block {
  width: calc( 100% / 6);
}
.main-page__horizontal-tiles--7 .tile-block {
  width: calc( 100% / 7);
}
.main-page__horizontal-tiles--8 .tile-block {
  width: calc( 100% / 8);
}
.main-page__horizontal-tiles--9 .tile-block {
  width: calc( 100% / 9);
}
.main-page__horizontal-tiles--10 .tile-block {
  width: calc( 100% / 10);
}

.tile-block__header {
  display: flex;
}
.right-handed .tile-block__header {
  justify-content: flex-end;
}

.left-handed .tile-block__header {
  justify-content: flex-start;
}

.tile-block__body {
  padding: 4px 16px 12px;
}

.action-upload-button {
  position: relative;
}
.action-upload-button__spinner {
  position: absolute;
  width: 23px;
  height: 23px;
  left: -32px;
  top: 6px;
}

.jitsi-iframe {
  height: 70em;
}

.range {
  width: 400px;
  /* some space for the right knob */
  padding-right: 30px;
}
.range .range-slider {
  position: relative;
  width: 85%;
}
.range .range-slider .scale {
  position: absolute;
  width: 100%;
  height: 3px;
  margin-top: 2px;
  background-color: #d8d8d8;
}
.range .range-slider .scale-sel {
  position: absolute;
  background-color: #27c470;
  width: 100%;
  height: 7px;
}
.range .range-slider .knob {
  position: absolute;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
  margin-top: -4px;
  z-index: 1;
  box-shadow: 1px 1px 3px grey;
}
.range .range-slider .knob .button {
  margin-top: -3px;
  background: #eee;
  width: 30px;
  height: 20px;
}

.range-simple input {
  width: 85%;
}

.annotation-run {
  cursor: pointer;
}
.annotation-run.candidate-term.graph-term.stop-term {
  color: #000;
  background-image: linear-gradient(rgba(184, 184, 184, 0.34), rgba(184, 184, 184, 0.34)), linear-gradient(rgba(149, 210, 149, 0.33), rgba(149, 210, 149, 0.33)), linear-gradient(rgba(245, 148, 153, 0.33), rgba(245, 148, 153, 0.33));
}
.annotation-run.candidate-term.graph-term {
  color: #000;
  background-image: linear-gradient(rgba(184, 184, 184, 0.5), rgba(184, 184, 184, 0.5)), linear-gradient(rgba(149, 210, 149, 0.5), rgba(149, 210, 149, 0.5));
}
.annotation-run.candidate-term.stop-term {
  color: #000;
  background-image: linear-gradient(rgba(184, 184, 184, 0.5), rgba(184, 184, 184, 0.5)), linear-gradient(rgba(245, 148, 153, 0.5), rgba(245, 148, 153, 0.5));
}
.annotation-run.graph-term.stop-term {
  color: #000;
  background-image: linear-gradient(rgba(149, 210, 149, 0.5), rgba(149, 210, 149, 0.5)), linear-gradient(rgba(245, 148, 153, 0.5), rgba(245, 148, 153, 0.5));
}
.annotation-run.candidate-term {
  color: #000;
  background-color: #B8B8B876;
}
.annotation-run.graph-term {
  color: #000;
  background-color: #95D29593;
}
.annotation-run.stop-term {
  color: #000;
  background-color: #F5949931;
}

.context-menu .candidate-term {
  color: #000;
  background-color: #B8B8B876;
}
.context-menu .graph-term {
  color: #000;
  background-color: #95D29593;
}
.context-menu .stop-term {
  color: #000;
  background-color: #F5949931;
}

.fv.folders {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  gap: 25px;
  margin: 20px 0px;
}

.fv.action {
  position: relative;
  left: 100px;
  top: -15px;
  color: blue;
}

.fv.btn {
  size: 100%;
  width: 100%;
}

/* fonts */
@font-face {
  font-family: "Inter-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/phylo/Inter-Regular.woff2") format("woff2"), url("../fonts/phylo/Inter-Regular.woff") format("woff");
}
@font-face {
  font-family: "Inter-Bold";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/phylo/Inter-Bold.woff2") format("woff2"), url("../fonts/phylo/Inter-Bold.woff") format("woff");
}
/* grid */
.phylo {
  font-family: "Inter-Regular";
  font-size: 16px;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: 2% 7% 7% auto 1%;
  grid-gap: 10px;
  height: 100vh;
  color: #0d1824;
}

/* ---- row 1 ---- */
.phylo-title {
  grid-row: 1;
  grid-column: 1/2;
  align-items: center;
  text-align: right;
  margin-top: 0.5px;
}

.phylo-folder {
  grid-row: 1;
  grid-column: 2/16;
  align-items: center;
}

/* -------------------- */
.phylo-corpus {
  grid-row: 2/3;
  grid-column: 1/2;
  /*background : #3E75B3;*/
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: right;
}

.phylo-phylo {
  grid-row: 3/4;
  grid-column: 1/2;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: right;
}

.phylo-corpus-info {
  grid-row: 2/3;
  grid-column: 2/4;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.phylo-phylo-info {
  grid-row: 3/4;
  grid-column: 2/4;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.phylo-how {
  grid-row: 2/4;
  grid-column: 1/2;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: right;
}

.phylo-isoline {
  grid-row: 2/4;
  grid-column: 3/15;
  /*background: rgba(223,216,200,0.25);  */
}

.phylo-isoline-info {
  grid-row: 2/4;
  grid-column: 15/16;
  padding-top: 20%;
  padding-bottom: 20%;
  padding-left: 15px;
}
.phylo-isoline-info .btn-group {
  display: initial;
}

/* -------------------- */
.phylo-scape {
  grid-row: 4;
  grid-column: 1/15;
  /*background: #FFCC73;*/
}

.phylo-timeline {
  grid-row: 4;
  grid-column: 1/2;
}

.phylo-graph {
  grid-row: 4;
  grid-column: 15/16;
  /*background: #FFCC73;*/
}

/* classes */
.phylo {
  /* ---------- icons ---------- */
  /* ---------- fonts ---------- */
  /* ---------- input ---------- */
  /* ---------- axis ---------- */
  /* ---------- group ---------- */
  /* ---------- labels ---------- */
  /* ---------- phylo ---------- */
  /* elements */
  /* axis */
  /* isoline */
}
.phylo a {
  color: inherit;
  cursor: pointer;
}
.phylo .how {
  cursor: pointer;
  position: relative;
}
.phylo .tooltip {
  font-family: "Inter-Regular";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.phylo i.how span {
  position: absolute;
  width: 300px;
  color: #FFFFFF;
  background: #0d1824;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
.phylo i.how span:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -8px;
  width: 0;
  height: 0;
  border-right: 8px solid #0d1824;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.phylo i.how:hover span {
  visibility: visible;
  left: 100%;
  top: 50%;
  margin-top: -15px;
  margin-left: 15px;
  z-index: 999;
}
.phylo .switch > .far + .fa,
.phylo .switch:hover > .far {
  display: none;
}
.phylo .switch:hover > .far + .fa {
  display: inherit;
  color: #0d1824;
}
.phylo .font-bold {
  font-family: "Inter-Bold";
  text-transform: uppercase;
}
.phylo .font-small {
  color: #0d1824;
  font-size: 12px;
}
.phylo .header {
  /*font-weight: bold;*/
  /*text-transform: uppercase;*/
  font-weight: 500;
  cursor: pointer;
}
.phylo .header:hover {
  font-weight: bold;
}
.phylo .button {
  background-color: white;
  border: 1.5px solid #0d1824;
  cursor: pointer;
}
.phylo .button:hover {
  background-color: #0d1824;
  color: white;
}
.phylo .btn-group button {
  margin-top: 1px;
  margin-bottom: 1px;
  display: block;
  width: 40px;
}
.phylo .draw {
  display: none;
}
.phylo .phylo-focus {
  fill: #f8381f;
  color: #f8381f;
}
.phylo .reset {
  visibility: hidden;
}
.phylo .label {
  visibility: hidden;
}
.phylo .heading {
  visibility: hidden;
}
.phylo .export {
  visibility: hidden;
}
.phylo .headed {
  background-color: #0d1824;
  color: white;
}
.phylo .labeled {
  background-color: #0d1824;
  color: white;
}
.phylo .input-file {
  display: inline-block;
  cursor: pointer;
}
.phylo .input-file:hover {
  border-bottom: 1.5px solid #0d1824;
}
.phylo .input-name {
  font-style: italic;
  opacity: 0.7;
  font-size: 14px;
  padding-left: 6px;
  padding-right: 6px;
}
.phylo .x-axis path {
  stroke: #EBE4DD;
  stroke-width: 1.5px;
}
.phylo .y-axis path {
  stroke: #EBE4DD;
  stroke-width: 1.5px;
}
.phylo .y-highlight {
  stroke: #f3be54;
  stroke-width: 1.5px;
}
.phylo .x-mark {
  fill: #4A5C70;
  stroke-width: 1px;
  stroke: #fff;
}
.phylo .x-mark-over {
  fill: #f3be54;
}
.phylo .x-mark-focus {
  fill: #f8381f;
}
.phylo .tick text {
  font-family: "Inter-Regular";
}
.phylo .tick text:hover {
  cursor: pointer;
}
.phylo .y-label {
  font-size: 10px;
  font-family: "Inter-Regular";
  font-weight: normal;
}
.phylo .y-label-bold {
  font-size: 12px;
  font-family: "Inter-Bold";
  font-weight: bold;
}
.phylo .y-mark-year-inner {
  fill: #4A5C70;
}
.phylo .y-mark-year-inner-highlight {
  fill: #f3be54;
}
.phylo .y-mark-year-outer {
  fill: #fff;
  stroke: #4A5C70;
  stroke-width: 1px;
}
.phylo .y-mark-year-outer-highlight {
  fill: #fff;
  stroke: #f3be54;
  stroke-width: 3px;
}
.phylo .y-mark-month {
  fill: #4A5C70;
}
.phylo .group-outer {
  stroke-width: 0.8px;
  stroke: #fff;
  fill: #fff;
}
.phylo .group-inner {
  stroke-width: 0.8px;
  stroke: #0d1824;
  fill: #0d1824;
  /*cursor: pointer;*/
  z-index: 10;
}
.phylo .group-heading {
  fill: #fff;
  stroke: #B5B5B5;
}
.phylo .group-focus {
  stroke: #f8381f;
}
.phylo .source-focus {
  stroke: #67a9cf;
}
.phylo .group-unfocus {
  stroke: #A9A9A9;
}
.phylo .group-path {
  cursor: pointer;
}
.phylo .ngrams {
  visibility: hidden;
}
.phylo .term {
  cursor: pointer;
}
.phylo .term:hover {
  font-weight: bold;
  fill: #f8381f;
}
.phylo .term-path {
  fill: none;
  stroke: #F0684D;
  stroke-width: 1.5px;
}
.phylo .emerging {
  /*text-decoration: underline #F0684D;*/
  /*fill:#5AA350;*/
  /*fill: #5AA350;*/
  fill: #F8381F;
}
.phylo .decreasing {
  /*text-decoration: underline #74B5FF;*/
  fill: #11638F;
}
.phylo .path-focus {
  fill: none;
  stroke: #F0684D;
  stroke-width: 1.5px;
}
.phylo .path-unfocus {
  stroke: #A9A9A9;
}
.phylo .path-heading {
  stroke: #B5B5B5;
}
.phylo .branch-hover {
  fill: #f3be54;
  opacity: 0.5;
}
.phylo #file-path {
  display: none;
}
.phylo .axisRight {
  font-family: "Inter-Regular";
  font-size: 10px;
}
.phylo .peak {
  stroke: white;
  stroke-width: 1px;
  font-family: "Inter-Regular";
  font-size: 14px;
  text-anchor: middle;
  visibility: visible;
}
.phylo .peak-over {
  font-size: 18px;
  stroke-width: 2px;
  cursor: pointer;
  stroke: #f3be54;
  z-index: 100;
}
.phylo .peak-focus {
  font-size: 18px;
  stroke-width: 2px;
  stroke: #F0684D;
}
.phylo .peak-focus-source {
  font-size: 18px;
  stroke-width: 2px;
  stroke: #67a9cf;
}
.phylo .peak-label {
  text-align: center;
  font-family: "Inter-Regular";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: #FFFFFF;
  border-radius: 3px;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background: #0d1824;
  padding: 5px;
  z-index: 10;
  position: absolute;
  visibility: hidden;
}
.phylo .word-cloud {
  font-family: "Inter-Regular";
  font-size: 12px;
}
.phylo .search {
  margin-left: 10px;
  visibility: hidden;
  position: absolute;
  z-index: 7;
  font-size: 14px;
  background-color: transparent;
  outline: 0;
  border-width: 0 0 2px;
  border-color: #0d1824;
}
.phylo .search-label {
  visibility: hidden;
  margin-left: 5px;
}
.phylo .search:focus {
  border-color: #F0684D;
}
.phylo .autocomplete {
  margin-left: 10px;
  visibility: hidden;
  position: absolute;
  z-index: 7;
  font-size: 14px;
  background-color: transparent;
  color: silver;
  z-index: 1;
  border: none;
}
.phylo .loading {
  visibility: hidden;
}
.phylo .phylo-name {
  visibility: hidden;
  text-transform: capitalize;
  font-weight: bold;
}
.phylo .select-source {
  margin-left: 10px;
  display: none;
  border: 1.5px solid #0d1824;
  cursor: pointer;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  outline-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;
}
.phylo option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/*# sourceMappingURL=sass.css.map */
