/* Graph search, category dropdowns, selection panes, source evidence lists, and related triples. */

@media (max-width: 1100px){
  #kgResultsBlock:fullscreen{
    grid-template-columns: 1fr;
    overflow: auto;
  }
  #kgResultsBlock:fullscreen #kgCy{
    height: min(60vh, calc(100vh - 210px));
  }
  #semanticResultsBlock:fullscreen{
    grid-template-columns: 1fr;
    overflow: auto;
  }
  #semanticResultsBlock:fullscreen #semanticCy{
    height: min(60vh, calc(100vh - 210px));
  }
}

.kg-pre{
  margin: 0;
  white-space: normal;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.86);
  background: rgba(0,0,0,0.18);
  border: none;
  border-radius: 14px;
  padding: 12px;
  min-height: 150px;
}

.kg-selection-wrap{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.selection-back-btn{
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 10;
  width: 32px;
  height: 28px;
  min-width: 32px;
  min-height: 28px;
  padding: 6px 8px;
  border-radius: 10px;
  align-self: auto;
}

#panel-kg .selection-back-btn,
#panel-semantic .selection-back-btn{
  top: 8px;
}

.selection-back-btn:disabled{
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.kg-selection-settings-anchor{
  position: absolute;
  top: 10px;
  right: 10px;
  margin-left: 0;
  z-index: 9;
}

.kg-plot-actions .kg-settings-anchor,
.semantic-plot-actions .kg-settings-anchor{
  margin-left: 0;
}

.kg-plot-actions .kg-settings-popover,
.semantic-plot-actions .kg-settings-popover{
  top: calc(100% + 10px);
  right: 0;
  left: auto;
}

.kg-selection-wrap #kgSelection{
  margin-top: 16px;
  padding-top: 14px;
  padding-right: 44px;
  padding-bottom: 12px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.55) rgba(15,18,26,0.6);
}

.kg-properties-title{
  visibility: hidden;
  min-height: 1px;
}

.kg-selection-wrap #semanticSelection{
  padding-top: 14px;
  padding-right: 44px;
  padding-bottom: 12px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.55) rgba(15,18,26,0.6);
}

.kg-selection-wrap #kgSelection::-webkit-scrollbar,
.kg-selection-wrap #semanticSelection::-webkit-scrollbar{
  width: 10px;
}

.kg-selection-wrap #kgSelection::-webkit-scrollbar-track,
.kg-selection-wrap #semanticSelection::-webkit-scrollbar-track{
  background: rgba(15,18,26,0.6);
  border-radius: 999px;
}

.kg-selection-wrap #kgSelection::-webkit-scrollbar-thumb,
.kg-selection-wrap #semanticSelection::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(125,211,252,0.6), rgba(167,139,250,0.6));
  border-radius: 999px;
  border: 2px solid rgba(15,18,26,0.7);
}

.kg-selection-wrap #kgSelection::-webkit-scrollbar-thumb:hover,
.kg-selection-wrap #semanticSelection::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(125,211,252,0.75), rgba(167,139,250,0.75));
}

#kgGraphFindQuery,
#kgCatQuery{
  border: none;
}

#kgGraphFindBtn,
#kgCatBtn{
  border: none;
}
#kgGraphFindBtn:hover,
#kgGraphFindBtn:focus,
#kgCatBtn:hover,
#kgCatBtn:focus{
  border: none;
}

.kg-search{
  margin-top: 12px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
}

#semanticTopSearchBlock{
  scroll-margin-top: 16px;
  height: auto;
  min-height: 0;
}

.kg-search-split{
  scroll-margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 0;
}

.kg-search-split.text-mode{
  grid-template-columns: 1fr;
}

.kg-search-split.text-mode #kgGraphFindResults{
  width: 100%;
  max-width: 100%;
}

.kg-search-split .kg-search{
  margin-top: 12px;
}

#kgCategorySearchBlock{
  margin-top: 20px;
}

#semanticResultsBlock > .kg-search{
  margin-bottom: 12px;
}

#kgSearchSplit.expanded-left #kgGraphSearchBlock{
  position: relative;
}

#kgSearchSplit.expanded-left #kgGraphFindResults{
  width: calc(200% + 16px);
  max-width: none;
  position: relative;
  z-index: 24;
}

#kgSearchSplit.expanded-left #kgCategorySearchBlock #kgCatResults{
  opacity: 0;
  pointer-events: none;
}

.kg-search-title{
  font-size: 12px;
  color: rgba(255,255,255,0.96);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.kg-search-title-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.kg-search-title-row .kg-search-title{
  margin-bottom: 0;
}

.search-mode-anchor{
  position: relative;
  flex: 0 0 auto;
}

.search-mode-toggle{
  display:inline-flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  min-width: 108px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 14px;
  border: none;
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.96);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 500;
}

.search-mode-toggle:hover,
.search-mode-toggle[aria-expanded="true"]{
  background: rgba(0,0,0,0.24);
}

.search-mode-arrow{
  width: 8px;
  height: 8px;
  display: inline-block;
  border-right: 1.8px solid rgba(255,255,255,0.65);
  border-bottom: 1.8px solid rgba(255,255,255,0.65);
  transform: translateY(-1px) rotate(45deg);
  opacity: 0.95;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.search-mode-toggle[aria-expanded="true"] .search-mode-arrow{
  transform: translateY(2px) rotate(-135deg);
}

.search-mode-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  padding: 6px;
  border-radius: 12px;
  border: none;
  background: rgba(12,14,20,0.98);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  z-index: 95;
}

.search-mode-option{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 0;
  padding: 7px 8px;
  border: none;
  background: transparent;
  color: rgba(232,244,255,0.95);
  border-radius: 10px;
  cursor:pointer;
  text-align:left;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.search-mode-option:hover{
  background: rgba(255,255,255,0.04);
}

.search-mode-option .pipeline-dot{
  display: none;
}

.search-mode-option.is-selected{
  background: rgba(255,255,255,0.04);
}

.semantic-search-body{
  display:block;
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 0;
}

#semanticSearchBody.hidden{
  display: none;
}

.semantic-search-body.text-mode{
  display:block;
}

.semantic-text-detail{
  min-height: 96px;
  max-height: 138px;
  overflow: auto;
  overflow-x: hidden;
  padding: 2px 8px 6px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.55) rgba(15,18,26,0.6);
}

.sentence-result{
  padding: 8px 10px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  transition: box-shadow 160ms ease, background-color 160ms ease;
  min-width: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: fit-content;
}

.sentence-result:hover,
.sentence-result.is-active{
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.22), 0 0 18px rgba(125,211,252,0.18);
}

.sentence-result-text{
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: block;
  min-width: 0;
}

.kg-search-row{
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.kg-search-row input{
  flex: 1 1 auto;
}
.semantic-search-row{
  align-items: flex-end;
}
.semantic-inline-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.semantic-inline-field label{
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  letter-spacing: 0.35px;
}
.semantic-keyword-inline{
  flex: 1 1 auto;
}

#semanticSearchQuery,
#semanticSearchBtn{
  border: none;
}
#semanticSearchQuery:hover,
#semanticSearchBtn:hover,
#semanticSearchQuery:focus,
#semanticSearchBtn:focus{
  border: none;
}

/* Non-fullscreen semantic triples list: show ~3 cards then scroll */
#semanticSearchResults{
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  max-height: 150px;
  overflow: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 0;
  padding: 2px 10px 8px 2px;
  position: relative;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.55) rgba(15,18,26,0.6);
}

#semanticTextDetailResults.hidden{
  display: none !important;
  min-height: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#semanticSearchMeta:empty{
  display: none;
}

#semanticSearchResults:empty{
  display: block;
  margin-top: 3px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
}

#semanticSearchResults::-webkit-scrollbar{
  width: 10px;
}

#semanticSearchResults::-webkit-scrollbar-track{
  background: rgba(15,18,26,0.6);
  border-radius: 999px;
}

#semanticSearchResults::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(125,211,252,0.6), rgba(167,139,250,0.6));
  border-radius: 999px;
  border: 2px solid rgba(15,18,26,0.7);
}

#semanticSearchResults::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(125,211,252,0.75), rgba(167,139,250,0.75));
}

#semanticSearchResults .triple{
  padding: 6px 10px;
  gap: 3px;
  border-radius: 12px;
  margin: 0;
  margin-right: 2px;
  transition: box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease;
}

#semanticSearchResults .triple:hover{
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.22), 0 0 18px rgba(125,211,252,0.18);
  transform: none;
}

.kg-cat-input{
  position: relative;
  flex: 1 1 auto;
}
.kg-cat-input input{
  width: 100%;
}
.kg-cat-dropdown{
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: 100%;
  max-height: 240px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.55) rgba(15,18,26,0.6);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(12,14,20,0.98);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  z-index: 40;
  padding: 6px;
}
.kg-cat-dropdown::-webkit-scrollbar{
  width: 10px;
}
.kg-cat-dropdown::-webkit-scrollbar-track{
  background: rgba(15,18,26,0.6);
  border-radius: 999px;
}
.kg-cat-dropdown::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(125,211,252,0.6), rgba(167,139,250,0.6));
  border-radius: 999px;
  border: 2px solid rgba(15,18,26,0.7);
}
.kg-cat-dropdown::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(125,211,252,0.75), rgba(167,139,250,0.75));
}
.kg-cat-option{
  padding: 8px 10px;
  border-radius: 10px;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kg-cat-label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kg-cat-swatch{
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 0 8px rgba(0,0,0,0.35), 0 0 10px rgba(255,255,255,0.12);
  flex: 0 0 auto;
}
.kg-cat-option:hover,
.kg-cat-option.is-active{
  background: rgba(125,211,252,0.12);
  color: #e8f4ff;
}

.kg-search-results{
  margin-top: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  max-height: 132px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.55) rgba(15,18,26,0.6);
  border-top: none;
  padding-top: 8px;
}

.kg-search-results:not(:empty){
  margin-top: 10px;
  margin-bottom: 12px;
}
.kg-search-results::-webkit-scrollbar{
  width: 10px;
}
.kg-search-results::-webkit-scrollbar-track{
  background: rgba(15,18,26,0.6);
  border-radius: 999px;
}
.kg-search-results::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(125,211,252,0.6), rgba(167,139,250,0.6));
  border-radius: 999px;
  border: 2px solid rgba(15,18,26,0.7);
}
.kg-search-results::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(125,211,252,0.75), rgba(167,139,250,0.75));
}

.kg-search-item{
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kg-search-label{
  font-size: 12px;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kg-search-swatch{
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 0 8px rgba(0,0,0,0.35), 0 0 10px rgba(255,255,255,0.12);
  flex: 0 0 auto;
}
.kg-search-item:hover{
  background: rgba(125,211,252,0.10);
}
.kg-search-item.is-active{
  background: rgba(125,211,252,0.16);
  border: 1px solid rgba(125,211,252,0.45);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.18) inset;
}

.kg-search-item:last-child{
  border-bottom: none;
}

@media (max-width: 1200px){
  .kg-search-split{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #kgSearchSplit.expanded-left #kgGraphFindResults{
    width: 100%;
  }
}

.kg-sel{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 100%;
  height: auto;
}

.kg-sel-title{
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.kg-sel-main{
  font-size: 13px;
  color: rgba(255,255,255,0.92);
}

.kg-sel-type{
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-left: 6px;
}

.kg-sel-desc{
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.76);
  margin: 0;
}

.kg-sel-desc span{
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

.kg-sel-meta-compact{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kg-sel-meta-compact .kg-sel-desc,
.kg-sel-meta-compact .kg-sel-row{
  margin: 0;
}

.kg-sel-block{
  border-top: none;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kg-sel-block-plain{
  border-top: none;
  padding-top: 0;
}

.kg-sel-role-section{
  border-bottom: none;
  padding-bottom: 8px;
  margin-bottom: 6px;
}

.kg-sel-role-section:last-child{
  border-bottom: none;
  padding-bottom: 4px;
  margin-bottom: 0;
}

.kg-sel-block-title{
  font-size: 12px;
  color: rgba(255,255,255,0.96);
  font-weight: 500;
}

.kg-sel-block-title-strong{
  font-weight: 700;
  display: none;
}

.kg-sel-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.kg-sel-grid.kg-sel-grid-bullets .kg-sel-row{
  position: relative;
  padding-left: 12px;
}
.kg-sel-grid.kg-sel-grid-bullets .kg-sel-row::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
}

.kg-sel-row{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px;
  align-items: start;
  margin: 0;
  padding: 0;
}

.kg-sel-edge .kg-sel-row{
  grid-template-columns: 78px 1fr;
  gap: 6px;
}

.kg-sel-row.kg-sel-source-row,
.kg-sel-edge .kg-sel-row.kg-sel-source-row{
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px;
}

.kg-sel-row.kg-sel-source-row-stacked,
.kg-sel-edge .kg-sel-row.kg-sel-source-row-stacked{
  grid-template-columns: 1fr;
  gap: 6px;
}

.kg-sel-category{
  font-size: 12px;
  color: rgba(255,255,255,0.88);
  line-height: 1.4;
}

.kg-sel-category b{
  color: rgba(255,255,255,0.96);
  font-weight: 700;
}

.kg-sel-edge .kg-sel-role-section{
  border-bottom: none;
}

.kg-sel-variant{
  display: block;
  padding: 0;
  border-bottom: none;
}

.kg-sel-variant:last-of-type{
  border-bottom: none;
  padding-bottom: 0;
}

.kg-sel-variant.is-hidden{
  display: none;
}

.kg-sel-more-btn{
  width: fit-content;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.82);
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
}

.kg-sel-more-btn:hover{
  border-color: rgba(125,211,252,0.5);
  color: rgba(255,255,255,0.96);
}

.kg-sel-key{
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.3;
  margin: 0;
}

.kg-sel-key-strong{
  color: rgba(255,255,255,0.9);
  font-weight: 700;
}

.kg-sel-val{
  font-size: 12px;
  color: rgba(255,255,255,0.88);
  word-break: break-word;
  white-space: pre-line;
  line-height: 1.3;
  margin: 0;
}
.kg-sel-row.kg-sel-row-full{
  grid-template-columns: 1fr;
}

.kg-sel-related{
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}

.kg-sel-related-title{
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.kg-sel-related-list{
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-right: -22px;
  padding: 2px 18px 6px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.55) rgba(15,18,26,0.6);
}

.kg-sel-related-list .graph-find-item{
  flex: 0 0 auto;
}

.kg-sel-related-list .triple{
  flex: 0 0 auto;
}

.kg-sel-related-list::-webkit-scrollbar{
  width: 10px;
}

.kg-sel-related-list::-webkit-scrollbar-track{
  background: rgba(15,18,26,0.6);
  border-radius: 999px;
}

.kg-sel-related-list::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(125,211,252,0.6), rgba(167,139,250,0.6));
  border-radius: 999px;
  border: 2px solid rgba(15,18,26,0.7);
}

.kg-source-list{
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
}
.semantic-source-sentence-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.semantic-source-sentence-btn{
  width: 100%;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.88);
  text-align: left;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.semantic-source-sentence-btn:hover,
.semantic-source-sentence-btn:focus-visible{
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.22), 0 0 18px rgba(125,211,252,0.18);
  color: rgba(255,255,255,0.96);
  outline: none;
}
.semantic-source-sentence-btn.is-hidden{
  display: none;
}
.kg-source-lines{
  margin: 0;
  padding: 0;
}
.kg-source-line{
  margin: 2px 0;
}
.kg-source-list .kg-source-li{
  margin: 2px 0;
}
.kg-source-list .kg-source-li.is-hidden{
  display: none;
}
.kg-source-lines .kg-source-line.is-hidden{
  display: none;
}

#kgCy{
  width: 100%;
  height: 460px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

.footer,
.help,
.hint,
#footerHelp {   /* use the selector that matches your element */
  padding-top: 18px;
  padding-bottom: 18px;
  text-align: center;
}
.tab-icon{
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  position: relative;
}

.tab-icon::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255,255,255,0.65);
  display: block;
}

.tab-icon.entity::before{ border-radius: 50%; }
.tab-icon.predicate::before{ transform: rotate(45deg); }
.tab-icon.qa::before{ width: 10px; height: 6px; border-radius: 3px; }
.tab-icon.kg::before{ width: 8px; height: 8px; border-radius: 1px; }
.tab-icon.semantic::before{
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid rgba(255,255,255,0.65);
  background: transparent;
  border-radius: 0;
}