body {
    margin:  0; 
    overflow: hidden;
    display: table;
    user-select: none;
    background-color: #ffffff;
    font-family: Lato;
}

canvas {
    width: 100%;
    height: 100%;
    z-index: auto;
}

.loadingbarbackground {
    background-color: rgb(255, 255, 255);
    --barwidth: 15%;
    width: var(--barwidth);
    color:rgba(255, 255, 255, 0);
    position: absolute;
    top: 45%;
    left: calc(50% - var(--barwidth)/2);
    text-align: center;
    border-radius: 10px;
}
#loadingbar {
    background-color: green;
    border-radius: 10px;
    width: 0;
    transition: all 0.7s;
}

.infowindow {
    position: absolute;
    --windowwidth: 25%;
    width: var(--windowwidth);
    color: white;
    min-width: 200px;
    padding: 0;
    margin: 0;
    font-family: Lato;
    font-size: 1em;
    background-color: rgba(15, 15, 15, 0.65);
    
}
#infodesc {
    display: none;
}
#infopre {
    visibility: hidden;
}
#preview {
    padding: 1em 1em 1em 1em;
}
.infowindow > #preview {
    background-color: rgba(15, 15, 15, 0.65);
}
.title, #description {
    text-align: left;
    
}
.title {
    padding: 1.5em 1em 0 1em;
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 0;
}
#description {
    margin-top: 0;
    padding: 0 1em 1.5em 1em;
}
.thumbnail {
    margin-top: 0.3em;
    display: block;
    max-height: 15em;
    max-width: 100%;
}
.wikipedia {
    text-decoration: none;
    font: Lato 1em;
    color: white;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    
    list-style-type: none;
}
.wikipedia:before {
    content: "\25B6";
    font-size: 0.75em;
    padding-right: 0.2em;
}
.wikipedia > a {
    text-decoration: none;
    font: Lato 1em;
    color: white;
}

.close-btn {
    float: right;
    position: relative;
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 100%;
    border: 1px solid rgb(180, 180, 180);
    color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translate(0.5em, -0.75em);
    
}

.line1, .line2 {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    background: white;
    height: 0.12em;
    width: 0.74em;
    margin-left: -0.37em;
    margin-top: -0.06em;
    pointer-events: none;
    transition: all 0.3s ease;
}
.line1 {
    transform: rotate(-45deg); /*translateX(-50%);*/
}

.line2{
    transform: rotate(45deg); /*translateX(-50%);*/
}
.close-btn:hover{
    border-color: rgb(0, 0, 0);
}
.close-btn:hover > a{
    background: rgb(0, 0, 0);
}

.smooth {
    transition: all 0.1s ease;
}



#closeButton {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
}
#svgd {
    visibility: hidden;
    width:100%;
    height: 100%;
    position: absolute;
}
#svg {
    width:100%;
    height: 100%;
}
#connectingline {
    visibility: visible;
    pointer-events: none;
    --dashoffset: 150;
    stroke-dasharray: var(--dashoffset);
    stroke-dashoffset: var(--dashoffset);
}

@keyframes dash {
    from {
      stroke-dashoffset: var(--dashoffset);
    }
    to {
      stroke-dashoffset: 0;
    }
}
@keyframes dash2 {
    from {
      stroke-dashoffset: 0;
    }
    to {
      stroke-dashoffset: var(--dashoffset);
    }
}

#connectingline2 {
    visibility: visible;
    pointer-events: none;
}
#modelDescription {
    line-height: 1.2em;
}
#divlist{
    line-height: 1.4em;
}

#searchbox {
    color: white;
    font-family: Lato;
    width: 22%;
    position: absolute;
    display: block;
    visibility: hidden;
    right: 0;
    height: calc(100% - 4em);
    background-color: rgba(117, 117, 117, 0.75);
    padding: 2em;
}

#searchbox.hideSearchBox {
    transform: translate(120%);
}
#listdescription {
    
    margin: 0;
    padding: 0;
    padding-top: 1em;
    border: none;
    overflow: visible;
}

#listdescription h1,h2,h3 {
    margin: 0 auto;
    margin-bottom: 0.1em;
}
#listdescription p{
    padding: 0;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 15px;;
}

#divlist {
    
    margin-top: 1em;
    margin-bottom: 1em;
    width: auto;
    height: auto;
    overflow: auto;
}
.modelDescription {
    padding-top: 0.75em;
}
.modelDescription > ul {
    padding: 0;
    padding-left: 1em;
    margin: 0 auto;
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid rgb(180, 180, 180);
}


#myList {
    margin: 0;
    padding: 0;
}
#myList span {
    display: inline;
}
#searchbar {
    font-family: Lato;
    border: 0px;
    padding: 0.5em 0.25em 0 0.25em;
    background-color: #ffffff;
    border-radius: 3px;
    border: 1px #020202 solid;
    width: calc(100% - 12px);
    bottom: 0;
    height: 1.25em;
    font-size: 18px
    
}
#searchbar:focus-visible {
    border-color: #f0f0f0;
    outline: none;
}
::placeholder {
    font-size: 14px;
}
::-webkit-input-placeholder { /* Edge */
    font-size: 14px;
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 14px;
}

#divlist::-webkit-scrollbar-track {
    padding: 2px 0;
    border-radius: 10px;
    background-color: #404040;
}

#divlist::-webkit-scrollbar {
    width: 12px;
}

#divlist::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #737272;
    border: 1px solid #000000;
    height: 2em;
}

.titleExpand {
    border: none;
    color: black;
    margin-right: 0.25em;
    font: 1em sans-serif;
    user-select: none;
}
#myList ul {
    list-style-type: none;
    padding-inline-start: 20px;
}

.caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}
  
.caret::before {
    content: "\25B6";
    color: rgb(255, 255, 255);
    font-size: 0.75em;
    padding-right: 0.15em;
    display: inline-block;
}
.active > .caret::before {
    transform: rotate(90deg);
}
.caret:hover::before {
    color: rgb(175, 175, 175);
}
.annotationsChildren {
    background-color: #f0f0f0;
    height: 0;
    color: black;
    font: 1em Lato;
    margin:0 auto;
    padding: 0 auto;
    padding-top: -2px;
    padding-left: 0;
    user-select: none;
}

.annotationsChildren li {
    cursor: pointer;
    padding: 5px;
    margin: 0 auto;
    padding-left: calc(1.25em + 6px);
    margin-top: -1px;
    cursor: pointer;

}

.annotationsChildren li:hover {
    background-color: #e0e0e0;
}
.nested {
    display: none;
}
#myList ul {
    display: none;
}
#myList .active > ul  {
    display: block;
}
.aTitle {
    color: white;
    display: inline-block;
    user-select: none;
    cursor: pointer;
}
.darkblue {
    display: inline;
    color: #17203b;
    font-weight: bold;
    cursor: pointer;
}
.yellow {
    color: #ffcc00;
}
#toggleSearchboxButton {
    position: absolute;
    visibility: hidden;
    padding:0.25em;
    top: 6.5em;
    right: 15px;
    width: 3em;
	height: 3em;
	cursor: pointer;
    background-color: transparent;
	border: none;
	border-radius: 50%;
	transition: 500ms;
}
#toggleSearchboxButton svg {
    fill: white;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
	transform: translateX(-50%) translateY(-50%);

}
#toggleSearchboxButton:hover svg {
    animation: bounce 1.5s infinite linear;
}
@keyframes bounce {
	0% {transform: translateX(-50%) translateY(-50%)}
	25% {transform: translateX(-50%) translateY(-65%)}
	50% {transform: translateX(-50%) translateY(-50%)}
	75% {transform: translateX(-50%) translateY(-35%)}
	100% {transform: translateX(-50%) translateY(-50%)}
}
.right {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
#toggleSearchboxButton.left {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    background-color: rgba(117, 117, 117, 0.75);
    opacity: 0.8;
    transition: 800ms;
  }
  #behind {
      z-index: 2;
  }