/* General */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..600&display=swap');

* { margin: 0;  }

/* Variables */
:root {
  --bgcolor-main: #ffffff;
  --color-main: #113f55;
  
  --lightObject-bgcolor: #bec6da;
  --lightObject-color: #1c2231;

  --vlightObject-bgcolor: #dee2ed;
  --vlightObject-color: #113f55;

  --darkObject-bgcolor: #495b83;
  --darkObject-color: #eff1f6;
  --darkObject-color-muted: hsl(223, 27%, 70%);
  --darkObject-color-highlight: hsl(223, 27%, 99%);

  --vdarkObject-bgcolor: #2e3952;
  --vdarkObject-color: #eff1f6;
  
  --vvdarkObject-bgcolor: #121721;
  --vvdarkObject-color: #eff1f6;

  --color-important: #dd5555;
  --color-error: #990000;
  --color-neutral: #d5aa2a;
  --color-neutral-focus: #d5802a;
  --color-positive: #1d951d;
  --color-grey: #212529;
  --color-edit-dark: #d5aa2a;
  --color-edit-light: #f5f5ef;
  --color-1: #973aa8;

  --length-small: min(2%, 8px);
  --length-tiny: calc(var(--length-small)/2);
  --length-medium: calc(var(--length-small)*2);

  --shadow-color:220 3% 15%;
  --shadow-strength: 1%;

  --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
}

/* Document */
html {
  height: 100%;
}

html, body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    line-height: 1.42em;
    color: var(--color-main);
    background-color: var(--bgcolor-main);
    margin-bottom: min(5%, 50px);
  }

#content {
  min-width: 500px;
  max-width: 800px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 5%;
  padding-right: 5%;
}

@media only screen and (min-width: 800px) {
  #content {
    max-width: calc(800px + 0.5 * (100% - 800px));
  }
}

h1 {
  font-weight: bold;
  font-size: xx-large;
  text-align: left;
}

h2 {
  font-weight: bold;
  font-size: x-large;
  text-align: left;
  margin-top: min(3%, 12px);
}

h3 {
  font-weight: bold;
  font-size: large;
  text-align: left;
  margin-top: min(2%, 8px);
  margin-bottom: min(0.5%, 2px);
}

a {
  all: unset;
  cursor: pointer;
}

ul.dash {
  list-style-type: none;
  padding-left: 2ch;
}

li {
  padding-left: 1.5ch;
}

.bold {
  font-weight: 400;
}
.clickable {
  cursor: pointer;
}

td.clickable:hover {
  background-color: var(--color-neutral-focus);
}

li.clickable:hover {
  filter: brightness(200%);
}

form {
  background-color: var(--lightObject-bgcolor);
  color: var(--lightObject-color);
  
  margin-top: 2%;
  margin-bottom: 2%;
  outline: 1px solid black;

  padding-left: 2ch;
  padding-right: 2ch;
  padding-top: 2ex;
  padding-bottom: 2ex;
}

input[type=text], input[type=password] {
  border: 0px;
  border-radius: 2px;
  padding-top: var(--length-tiny); padding-bottom: var(--length-tiny);
  margin-bottom: var(--length-small);
  padding-left: 1ch; padding-right: 1ch;
  vertical-align: middle;
  display: inline-block;
  width: 100%;
}

input[type=submit] {
  background-color: var(--darkObject-bgcolor);
  color: var(--darkObject-color);
  border: 0px;
  border-radius: 2px;
  padding-top: 0.5ch; padding-bottom: 0.5ch;
  padding-left: 2ch; padding-right: 2ch;
  vertical-align: middle;
  cursor: pointer;
}

fieldset {
  border: none;
  padding: 0.5ch;
}

button {
  font-family: inherit;
  font-size: 102%;
}

.error {
  color: var(--color-error);
}

.refresh::before {
  background-image: linear-gradient(var(--color-error) 0%, var(--color-error) 50%, var(--darkObject-bgcolor) 50%, var(--darkObject-bgcolor) 50%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial;
}

.error.horizontal {
  margin-left: 1ch;
  vertical-align: middle;
}

.pathElement {
  font-weight: 500;
}
.pathElement + .pathElement::before {
  content: '>';
  vertical-align: middle;
  margin-left: 0.2ch; margin-right: 0.5ch; /* Need 0.2ch left because HTML adds a space if we put the path elements on separate lines in the code */
  font-weight: 300;
}

.container .table-header-middle {
  color: var(--vlightObject-color);
  background-color: var(--vlightObject-bgcolor);
}


.alignVerticalMiddle {
  vertical-align: middle;
}

.marginHalf {
  margin-left: 0.5ch; margin-right: 0.5ch;
}


/* Flexboxes */
.flexbox-container-wrapHorizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 1vw;
  row-gap: min(1vw, 5px);
  margin-top: min(2%, 15px); margin-bottom: min(2%, 15px);
}


.flexbox-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  column-gap: 1ch;
  row-gap: 0.2ex;
}

.flexbox-alignChildrenCenter {
  align-items: center;
}

.flexbox-horizontal-child-alignRight {
  margin-left: auto;
}

.comboInput-text {
  flex-shrink: 0;
  min-width: 3ch;
  border: 0px;
  /*color: var(--color-main);*/
  color: black;
  padding-left: 0.5ch; padding-right: 0.5ch;
  text-align: center;
}

.comboInput-icon {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 0;
  height: inherit;
  vertical-align: middle;
  cursor: pointer;
}

.flexbox-horizontal .fa-solid {
  line-height: inherit;
}

.hidden {
  visibility: collapse;
}

.error-background {
  background-color: var(--color-error) !important;
}

/* Custom elements */
/* CE-Tiles */
.tile {
  font-size: min(4vw, 1.4rem);

  flex-grow: 1;
  flex-basis: 30%;
  line-height: 2ex;
  height: 8ex;
  padding-top: 2ex;
  padding-left: 2ex;
  
  color: var(--darkObject-color-muted);
  background-color: var(--darkObject-bgcolor);
  
  border-radius: 15px;

  position: relative;

  cursor: pointer;
}


.tile p {
  position: absolute;
  bottom: 0;
  right: 0;
  padding-top: 1rem;
  padding-left: 1.5rem;
  padding-bottom: 1rem;
  padding-right: 1.5rem;
  
  font-weight: bolder;
  font-variant: small-caps;
  text-align: right;
}

.tile em {
  color: var(--darkObject-color-highlight);
  font-style: normal;
}
/* CE-Box */
.box {
  color: var(--darkObject-color);
  background-color: var(--darkObject-bgcolor);
  margin-top: 0.5%;
  margin-bottom: 0.5%;
  outline: 1px solid white;

  padding-left: 2ch;
  padding-right: 2ch;
  padding-top: 2ex;
  padding-bottom: 2ex;
}

#outputBox {
  margin-bottom: 0;
}

/* CE-Loader */
.loader {
  box-sizing: border-box;
  border: 16px solid var(--darkObject-bgcolor);
  border-top: 16px solid var(--vdarkObject-bgcolor);
  border-left: 16px solid var(--vvdarkObject-bgcolor);
  border-bottom: 16px solid white;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s  cubic-bezier(0.6, 0, 0.6, 1) infinite;

  margin:5% auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* CE-Hamburger Drag Icon*/
.dragIcon:before, .dragIcon:after {
  background: #fff;
  content: "";
  display: block;
  height: 2px;
  border-radius: 3px;
  margin: 3px 0;
}

/* CE-Dialog */
.dialog {
  min-width: 60vw;
  max-inline-size: min(90vh, 100%);
  max-block-size: min(90vh, 100%);
  overflow: auto;
  border-radius: 5px;
  box-shadow: var(--shadow-6);
  border: none;
  background-color: var(--bgcolor-main);
  padding-top: min(1vh, 10px); padding-bottom: min(1vh, 10px);
  padding-left: min(1.5vw, 20px); padding-right: min(1.5vw, 20px);
  position: relative;
}
.dialog.center {
  margin: auto;
}

.dialog::backdrop {
  backdrop-filter: blur(5px);
}

@media only screen and (min-width: 800px) {
  .dialog.center {
    max-width: calc(800px + 0.4 * (100% - 800px));
  }
}

.dialog.select2 {
  min-height: 30em;
}

/* CE-Character Buttons (consider adding tooltips) */
.characterButton {
  opacity: 0.7;
  margin-top: auto; margin-bottom: auto;
  height: inherit;
  font-size: 3.3rem;
  
  display: flex;
  justify-content: center; align-content: center; flex-direction: column;

  cursor: pointer;
}

.characterButton:hover {
  opacity: 1;
}

.close, .remove {
  color: var(--color-error)
}

.okay {
  color: var(--color-positive);
}

.modifyDark {
  color: var(--color-edit-dark);
}

.move {
  color: var(--color-1);
}

.notAllowed {
  cursor: not-allowed !important;
  color: var(--color-grey);
}

/* CE: Important message*/
.messageBox {
  margin-top: 0;
  color: #eff1f5;
  padding: 0.5% 1.5ch 0.5% 1.5ch;
  margin-right: 1.2ch;
  border: none;
  display: none;
}
.messageBox.important {
  background-color: var(--color-important);
}

.messageBox.positive {
  background-color: var(--color-positive);
}

.messageBox.wait {
  background-color: var(--color-neutral);
}

.messageBox.button {
  background-color: #4f5d7d;
  cursor: pointer;
}

.messageBox.button:hover {
  filter: brightness(150%);
}

.messageBox.button:focus-visible {
  filter: brightness(90%);
}

.messageBox.visible {
  display: inline;
}

/* Modifiers */
.font-number-tabular {
  font-family: 'Varela Round', sans-serif;
}

li.list-triangle::marker {
  content: '▸';
}

.line-separate {
  display: block;
  margin-top: var(--length-tiny);
}

/* Table */
table.container {
  background-color: var(--color-grey)
}
.container {
  table-layout: fixed;
  text-align: left;
  overflow: hidden;
  display: table;
  width: 100%;

  border-spacing: 2px 2px;

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

.container th h1 {
	  font-weight: bold;
	  font-size: 1em;
    text-align: left;
}

.container.small {
  font-size: medium;
}

.container td {
	  font-weight: normal;
	  font-size: 1em;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
	        box-shadow: 0 2px 2px -2px #0E1119;
}

.container td, .container th {
	  padding-bottom: max(4px, 0.5vh);
	  padding-top: max(4px, 0.5vh);
    padding-left: max(15px, 0.5vw);  
    padding-right: max(15px, 0.5vw);
    color: var(--vdarkObject-color);
}

.container td[contentEditable="true"] {
  background-color: var(--lightObject-bgcolor);
  color: var(--lightObject-color);
}

.container td.iconInTable {
  font-size: small;
}

/* Background-color of the odd rows */
.container tr:nth-child(odd) {
	  background-color: var(--darkObject-bgcolor);
}

/* Background-color of the even rows */
.container tr:nth-child(even) {
  background-color: var(--vdarkObject-bgcolor);
}

.container th {
	  background-color: var(--vvdarkObject-bgcolor);
    font-variant: small-caps;
}

.container tbody tr:hover {
  /*background-color: #f0f5ff;*/
  /*filter: brightness(120%);*/
  background-color: var(--color-neutral);
}

/* Cell types */
.container .rowLabel {
  /*color:#fa4c64;*/
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container .values {
  text-align: right;
  width: 10ch;
}

.container .checkbox {
  width: 3ch;
  padding-left:0.5ch;  
  padding-right:0.5ch;
  text-align: center;
}

.container .iconSized {
  width: 3ch;
  padding-left:0.5ch;  
  padding-right:0.5ch;
  text-align: center;
}

.container .checkboxWide {
  width: 8ch;
  padding-left:1ch;  
  padding-right:1ch;
  text-align: center;
}

.container th.clickable1, .container td.clickable1, .container td.moveable1, .container th.moveable1 {
  width: 2ch;
  padding-left: 0.5ch; padding-right: 0.5ch;
  text-align: center;
  cursor: pointer;
}

.container th.unclickable1, .container td.unclickable1 {
  min-width: 2ch;
  padding-left: 0.5ch; padding-right: 0.5ch;
  text-align: center;
  cursor: not-allowed;
}

.container th.moveable1, .container td.moveable1 {
  padding-left: 0.8ch; padding-right: 0.8ch;
  cursor: move;
  cursor: -webkit-grabbing;
}

.container .counter {
  display: inline-block;
  min-width: 3ch;
  margin-left: 1ch; margin-right: 0.5ch;

  text-align: right;
}

/* Container specifics */
#concepts .concept_name {
  word-break: break-all;
  width: 30%;
}

#concepts .concept_abbrev, #concepts .concept_nameNice {
  overflow: auto; white-space: nowrap;
  text-overflow: ellipsis;
}

#concepts .concept_abbrev[contentEditable="true"] {
  word-break: break-all;
  white-space: normal;
}

#concepts .concept_nameNice[contentEditable="true"] {
  white-space: normal;
  word-wrap: break-word;
}

#rules .concept_name {
  overflow: auto; white-space: nowrap;
  text-overflow: ellipsis;
  width: max(20ch, 15vw);
}

#rules .concept_name[contentEditable="true"] {
  white-space: normal;
  word-wrap: break-word;
}



.startIcon {
  padding-right: 1ch;
  width: 2ch;
}

#topElement {
  margin-top: 10%;
}

#topRight {
  display: flex;
  flex-direction: row;
  column-gap: 2ch;
}

/* Animations */
.flash {
  animation-name: flash;
  animation-duration: 0.5s;
}

@keyframes flash {
  from {filter: brightness(100%);}
  to {filter: brightness(150%);}
}

/* Modifiers */
.splitRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  gap: 1.4rem;
}

.indentDot {
  padding-left: 1%; padding-right: 1%;
}

.indent1 {
  margin-left: var(--length-tiny);
}
.indent2 {
  margin-left: var(--length-small);
}
.indent3 {
  margin-left: var(--length-medium);
}


.flexbox-vertical {
  display: flex;
  flex-direction: column;
}

/* Taxonomy tables */
#taxonomyModel {
  font-family: 'Varela Round', monospace;
}

#taxonomyModel .item {
  display: flex;
  flex-wrap: nowrap;
  column-gap: var(--length-tiny);
  margin-top: 0px;
}

#taxonomyModel .label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}

#taxonomyModel .collapsed {
  display: none !important;
}

/* Taxonomy | Expand buttons */
#taxonomyModel .button {
  cursor: pointer;
  display: flex;
  column-gap: 0.3ch;
  align-items: center;
  width: fit-content;
}
#taxonomyModel .button.expand {
  flex-basis: 1ch;
  flex-grow: 0;
}
#taxonomyModel .button.expand::after {
  content: '+';
}

#taxonomyModel .button.expand.expanded::after {
  content: '-';
}

#taxonomyModel .button.expand.childless, #taxonomyModel .button.expand.childrenUnknown {
  cursor: default;
}

#taxonomyModel .button.expand.childless::after {
  color: transparent;
}
#taxonomyModel .button.expand.childrenUnknown::after {
  color: transparent;
  cursor: default;
  box-sizing: border-box;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: spin 2.5s cubic-bezier(0.6, 0, 0.6, 1) infinite, shadow 0.5s 0.5s forwards;
  margin: 5% auto;
}

@keyframes shadow {
  0% { box-shadow: none; }
  100% { box-shadow: inset 0 0 0 1px var(--darkObject-bgcolor), 
                 inset 0 1px 0 1px var(--vdarkObject-bgcolor), 
                 inset 1px 0 0 1px var(--vvdarkObject-bgcolor), 
                 inset 0 -1px 0 1px white; }
}

#taxonomyModel .box {
  color: var(--lightObject-color);
  background-color: var(--lightObject-bgcolor);
  margin-top: 0.5%;
  margin-bottom: 0.5%;
  outline: 1px solid white;

  padding-left: 2ch;
  padding-right: 2ch;
  padding-top: 2ex;
  padding-bottom: 2ex;
}

#taxonomyModel .infoDiv {
  display: flex;
  flex-direction: column;
  row-gap: var(--length-tiny);
}

.key {
  font-weight: 200;
  padding-right: 1ch;
  min-width: 8ch;
  flex-shrink: 0;
}

.key.compact {
  font-weight: 200;
  padding-right: 1ch;
  min-width: unset;
}


.value, #taxonomyModel input, #taxonomyModel .multiLineInput {
  font-family: inherit;
  font-size: small;
  font-weight: 400;
  padding-left: 1ch; padding-right: 1ch;
  flex-grow: 1;
  border: unset;
  background-color: var(--color-edit-light);
}

#taxonomyModel .noDirectEdit .value {
  background-color: unset;
}

.element {
  display: flex;
  column-gap: 0.5ch;
  margin-top: var(--length-tiny);
}


#taxonomyModel .element.big {
  display: flex;
  flex-direction: column;
  row-gap: var(--length-tiny);
}

#taxonomyModel .sub2 {
  margin-top: var(--length-small);
  margin-left: 8ch;
}

#taxonomyModel .button .text {
  display: flex;
  font-weight: 400;
  font-size: large;
  font-variant: small-caps;
}

#taxonomyModel .button:hover {
  filter: brightness(130%);
}

#taxonomyModel .blockContainer {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--length-small);
  column-gap: var(--length-small);
}




.notUploadedYet .label, .notUploadedYet.label {
  color: var(--darkObject-color-muted);
}

.counterParent {
  counter-reset: csscounter 0;
}

.counterParent > * {
  counter-increment: csscounter 1;
}

.addCounterAfter::after {
  content: '\00a0' counter(csscounter);
}


/* Annotation tool */
#annotationTool {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding-top: var(--length-small);
  height: 100vh;
}

/* Annotation tool | Image */
#annotationTool .imageArea {
  flex: 1;
  display: flex;
}

#annotationTool canvas {
  width: 100%
}

/* Annotation tool | Labels */
#annotationTool .labelArea {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

#annotationTool .labelElement {
  display: flex;
  white-space: nowrap;
  border: 1 black;
}

.labelElement .colour {
  width: 0.75ch;
  margin-right: 0.25ch; 
  height: inherit;
}

/* Modifiers */
/* Modifiers | Flex */
.flex-grow {
  flex-grow: 1;
}

/* Modifiers | Text */
.smallcaps {
  font-variant: small-caps;
}

/* Modifiers | Function */
.button {
 cursor: pointer; 
}

input + label {
  margin-left: var(--length-tiny);
}

/* Modifiers| Size */
.singleCharacter {
  width: 1.2em;
  height: 1.2em;
}

/* Modifiers | Visibility */
.hidden {
  display: none;
}