body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
  }

  #deck-container {
    width: 100vw;
    height: 100vh;
  }

  #deck-container canvas {
    z-index: 1;
    background: #ffffff;
  }

  .deck-tooltip {

      font-size: 0.8em;
      font-family: Avenir;
      font-weight: 300;
      color: #000000 !important;
      background-color: #ffffffaa !important;
      border-radius: 12px;
      box-shadow: 2px 3px 10px #aaaaaa44;
      max-width: 25%;
  }

  #loading {
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      position: absolute;
      display: block;
      z-index: 99
  }

  #loading-image {
      position: absolute;
      top: 45%;
      left: 47.5%;
      z-index: 100
  }

  #title-container {
      position: absolute;
      top: 0;
      left: 0;
      margin: 16px;
      padding: 12px;
      border-radius: 16px;
      line-height: 0.95;
      z-index: 2;
      font-family: Avenir;
      color: #000000;
      background: #ffffffaa;
      box-shadow: 2px 3px 10px #aaaaaa44;
  }


  #search-container{
      position: absolute;
      left: -16px;
      margin: 16px;
      padding: 12px;
      border-radius: 16px;
      z-index: 2;
      font-family: Avenir;
      color: #000000;
      background: #ffffffaa;
      width: fit-content;
      box-shadow: 2px 3px 10px #aaaaaa44;
  }
  input {
      margin: 2px;
      padding: 4px;
      border-radius: 8px;
      color: #000000;
      background: #ffffffdd;
      border: 1px solid #ddddddff;
      transition: 0.5s;
      outline: none;
  }
  input:focus {
    border: 2px solid #555;
  }



.row {
display: flex;
align-items: center;
cursor: pointer;
}
.box {
height: 11px;
width: 11px;
border-radius: 2px;
margin-right: 5px;
flex-shrink: 0;
margin-bottom: 2px;
margin-top: 2px;
}
.legend {
position: absolute;
margin: 16px;
padding: 12px;
border-radius: 16px;
z-index: 2;
background: #ffffffcc;
font-family: Museo;
font-size: 9pt;
box-shadow: 2px 3px 10px #aaaaaa44;
}
.legend-content {
max-height: calc(91vh - 54px);
overflow-y: auto;
}
#course-legend {
top: 0;
right: 0;
max-height: 91vh;
overflow-y: auto;
}
#institution-legend {
top: 16vh;
left: 0;
overflow-y: auto;
}
#institution-legend li {
cursor: pointer;
padding: 2px 0;
}

.legend-title {
font-weight: bold;
margin-bottom: 8px;
}
#title-container {
max-width: 75%;
}
#institution-legend .box {
background-color: transparent !important;
border: 1px solid #000;
}

#ontology-tree {
top: 45vh;
left: 0;
max-height: 30vh;
overflow-y: auto;
max-width: 300px;
}
#credits {
top: 80vh;
left: 0;
max-height: 40vh;
}

#ontology-tree ul {
list-style-type: none;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
}
#ontology-tree li > ul {
padding-left: 15px;
}

#ontology-tree li {
cursor: pointer;

display: flex;
align-items: flex-start;
flex-wrap: wrap;
}

#ontology-tree .checkbox {
height: 11px;
width: 11px;
border-radius: 2px;
margin-right: 5px;
margin-top: 0px;
padding-top: 0px;
flex-shrink: 0;
border: 1px solid #000;
display: inline-block;
position: relative;
cursor: pointer;

}
.clear-selection-btn {
margin-top: 10px;
padding: 5px 10px;
background-color: #ffffffcc;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.clear-selection-btn:hover {
background-color: #ffffffcc;
}

#ontology-tree .checkbox.checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#ontology-tree .checkbox.partial::after {
content: '■';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 11px;
line-height: 1;
}

#ontology-tree .category-name {
cursor: pointer;
flex: 1;
min-width: 0;
margin-right: 10px;
word-wrap: break-word;
}

#ontology-tree ul {
width: 100%;
}

/* latin-ext */
@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/l/font?kit=ijwUs5PnXdA4ZZUA6Zd-m2FJXA&skey=8887f17a62203d44&v=v12) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/l/font?kit=ijwUs5PnXdA4ZZUA55d-m2FJXA&skey=8887f17a62203d44&v=v12) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }