img {
   max-width: 100%;
   height: auto;
   display: block;

}

.material-symbols-sharp {
   font-variation-settings:
      'FILL' 1,
      'wght' 500,
      'GRAD' -25,
      'opsz' 40
}


nav {
   margin: 24px 0px 32px 0px;
   position: relative;
}

h3 {
   /* font-family: 'Space Mono', monospace; */
   font-weight: bold;
   font-size: 18px;
   margin-bottom: 16px;
}

#main>p {
   text-align: justify;
   font-size: 13px;
   line-height: 1.5em;
}


#filters {
   margin: 20px 0px 16px 0px;
   line-height: 1.5;
   font-size: 12px;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   align-content: stretch;
   justify-content: space-between;
}

#filters h5 {
   font-size: 13px;
}

#filters hr {
   border-color: #EEE;
}

#filters>div {
   margin: 0 8px 12px 0;
   flex-grow: 0;
}

#filters .filter {
   display: inline-block;
   margin: 0 1.4em 2px 0;
   cursor: pointer;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;

}

#resetFilters {
   color: red;
}

.selectag {
   color: red;
}


#gridContainer {
   margin: 0px;
   margin-bottom: 0px;
}

.record {
   margin: 0 24px 24px 0; 
   border: 1px solid #333;
   scroll-margin: 48px;
   font-size: 12px;
   color: #555;
}

.closed {
   width: 130px;
   height: 150px;
   background-color: #999;
}

.open {
   width: 611px; 
   height: 498px;
   padding: 0;
   border: 2px solid #222;
}

.record>h4 {
   background-color: #FFF;
   width: 100%;
   font-size: 12px;
   padding: 1px 4px;
   font-weight: normal;
   z-index: 10;
   display: flex;
   align-items: left;
   outline: 1px solid #666;
}

.record .inner {
   display: grid;
   grid-template-columns: 96px 160px 96px auto 32px;
   grid-template-rows: 256px 24px 24px 24px 24px 24px 92px;
   gap: 1px;
}

.record .inner>div {
   outline: 1px solid #666;
   display: flex;
   align-items: center;
   padding-left: 4px;
   font-weight: bold;
}

.record .inner>p {
   /* outline: 1px solid #666; */
   font-weight: normal;
   padding: 8px;
   overflow-y: auto;
   margin: 0;
}

.record .inner>div>input {
   
   width: 100%;
   background: none;
   font-family: 'Space Mono', monospace;
   border: none;
   outline: none;
   font-size: 11px;
   letter-spacing: 0.1em;
}


.inner .innerUto {
   width: 256px;
   height: 256px;
   /* background-color: #222; */
   grid-column: 1 / span 2;
   grid-row: 1;
   padding: 0 !important;
}

.inner .sideBar {
   grid-column: 5;
   grid-row: 1 / span 1;
   display: block !important;
   padding: 0 !important;
}

.inner .sideBar div {
   margin-bottom: 2px;
   cursor: pointer;
   padding: 8px;
}

.inner .sideBar div:hover {
   background-color: #EEE;
}

.closeBtn {
   padding: 6px !important;
}


.sideBar>div>svg {
   pointer-events: none;
}


.innerTree{
   background-color: #FAFAFA;
   /* border: 1px solid #111; */
}

.record .outer {
   /* background-color: #000; */
   width: 128px;
   height: 128px;
   cursor: pointer;
   overflow: hidden;
}

.record .outer>img {

   top: 0;
   left: 0;
   image-rendering: crisp-edges;
   image-rendering: pixelated;
   z-index: 1;
}

#innerUtoContainer {
   width: 256px;
   height: 256px;
}

#overUtoContainer {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
}


/* 
*::-webkit-scrollbar-track {
   -webkit-box-shadow: none;
   background: none;
   border-left: 1px solid #333;
}

*::-webkit-scrollbar {
   width: 12px;
   background: none;
}

*::-webkit-scrollbar-thumb {
   background: none;
   border: 1px solid #999;
   border-right: none;
} */




.node circle {
   fill: #000;
   stroke: #000;
   stroke-width: 1px;
}

.link {
   fill: none;
   stroke: #999;
   stroke-width: 1px;
}





.loader {
   height: 100%;
   width: 100%;
   display: -ms-flexbox;
   display: -webkit-box;
   display: flex;
   -ms-flex-align: center;
   -ms-flex-pack: center;
   -webkit-box-align: center;
   align-items: center;
   -webkit-box-pack: center;
   justify-content: center;
}

.loader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   /* background-color: #111; */
}

img {
   width: 256px;
}

.disapper {
   animation: vanish 0s forwards;
}

@keyframes vanish {
   100% {
      opacity: 0;
      visibility: hidden;
   }
}


[data-tooltip] {
   position: relative;
}

[data-tooltip]:before {
   font-size: 11px;
   content: attr(data-tooltip);
   position: absolute;
   opacity: 0;
   z-index: 1000;
   pointer-events: none;
   top: 0px;
   left: 50%;
   transform: translateX(-50%);
   transition: 256ms all ease;
   padding: 4px 6px;
}

[data-tooltip]:hover:before {
   opacity: 1;
   /* border: 1px solid #666; */
   top: -30px;
}