html {
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

#RootTable {
  line-height: 21px;
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
}
#RootTable TR:hover {
  background-color: #aaa2;
}
#RootTable TR.header {
  background-color: transparent;
}
#RootTable TR TH {
  white-space: nowrap;
  border-top: 1px solid darkgray;
  border-bottom: 1px solid darkgray;
  padding: 5px 0;
}
#RootTable TR TH:first-child {
  min-width: 100px;
  padding: 0px;
}
#RootTable TR TH HR {
  margin: 0px;
  visibility: hidden;
  border-width: 0px;
}
#RootTable TR TH[title]:not([title=""]) {
  cursor: help;
}
#RootTable TR TD {
  white-space: nowrap;
}
#RootTable TR:nth-child(2) TD {
  padding-top: 5px;
}
#RootTable TR:last-child TD {
  border-bottom: 1px solid darkgray;
}
#RootTable TD {
  height: 22px;
  vertical-align: top;
  padding: 0;
}
#RootTable IMG {
  vertical-align: top;
}
#RootTable HR {
  margin: 5px 0px;
}
#RootTable TR-xxx TH:nth-child(1), #RootTable TR-xxx TD:nth-child(1) {
  position: sticky;
  left: 0;
}
#RootTable a {
  color: var(--bs-link-color, #566);
}
#RootTable a:hover {
  color: var(--bs-link-hover-color);
}

.str_up {
  float: left;
  width: 12px;
  line-height: 14px;
}

.str_tree {
  float: left;
  height: 22px;
}
.str_tree img.ctree {
  stroke: green;
}
.str_tree .empty {
  display: inline-block;
  width: 19px;
}
.str_tree .plusclass[id]:hover {
  filter: brightness(0.7);
}
.str_tree .minusclass[id]:hover {
  filter: brightness(0.7);
}

.str_header {
  min-height: 60px;
  padding-top: 20px;
}

#str_qsearch {
  text-align: right;
  white-space: nowrap;
}

.plusclass {
  background: url(../net/images/tree/line.svg);
  background-repeat: no-repeat;
  background-position: 0px 22px;
  background-color: transparent;
  padding-bottom: 0px;
  width: 19px;
}

.str_title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.str_tree__icon {
  --color: dimgray;
  --stroke: dimgray;
  font-size: 16px;
  height: 20px;
  width: 20px;
  line-height: 18px;
  border-radius: 2px;
  color: dimgray;
  border: 0px dotted dimgray;
  background-color: transparent;
  margin: 0px 2px 0px 0px;
  display: inline-block;
  text-align: center;
  padding: 1px;
}
.str_tree__icon.st3 {
  --color: lightgray;
  --stroke: dimgray;
}
.str_tree__icon .fa-user {
  color: var(--color);
}
.str_tree__icon .str-user {
  width: 16px;
  height: 16px;
  margin: -4px 0 0 2px;
  fill: var(--color);
  stroke: var(--stroke);
}

A.user:hover {
  border-width: 1px;
  padding: 0px;
}

.str_face_join {
  background: url(../net/images/tree/line.svg);
  background-repeat: no-repeat;
  background-position: 0px -22px;
  padding-bottom: 0px;
  background-color: transparent;
}

.str_secondline {
  font-size: small;
  height: 21px;
  color: #595;
  display: none;
  gap: 0.5rem;
}
.str_secondline .str_label {
  color: darkgray;
}
.str_secondline DIV {
  min-height: 18px;
  min-width: 20px;
}

TH .str_secondline DIV {
  border-bottom: 1px dotted lime;
  cursor: pointer;
  zoom: 90%;
}
TH .str_secondline DIV.sc1 {
  border-bottom-color: transparent;
}
TH .str_secondline DIV.sc2 {
  border-bottom-color: #FF8;
}
TH .str_secondline DIV.sc3 {
  border-bottom-color: #FCC;
}
TH .str_secondline DIV.sc4 {
  border-bottom-color: #CFF;
}
TH .str_secondline DIV.sc5 {
  border-bottom-color: #DDD;
}

/* put these in separate rules */
.sc1 {
  min-width: 25px;
  text-align: center;
  background-color: transparent;
}

.sc2 {
  background-color: transparent;
  outline-color: #FFFF80;
}

.sc3 {
  background-color: transparent;
  outline-color: #FFC0C0;
}

.sc4 {
  background-color: transparent;
  outline-color: #C0FFFF;
}

.sc5 {
  background-color: transparent;
  outline-color: #DDD;
}

@media (max-width: 480px) {
  #RootTable TR TH ~ TH,
#RootTable TR TD ~ TD {
    display: none;
  }

  #RootTable TD {
    height: 42px;
  }

  .str_secondline {
    display: flex;
  }

  .str_tree {
    -height: 42px;
  }

  .plusclass {
    padding-bottom: 22px;
  }

  .str_face_join {
    background-position: 0px 19.3px;
  }

  INPUT#search {
    max-width: 160px;
  }
}
@media (max-width: 560px) {
  #RootTable TR TH ~ TH ~ TH,
#RootTable TR TD ~ TD ~ TD {
    display: none;
  }
}
@media (min-width: 560px) {
  #RootTable {
    min-width: 840px;
  }
}
.dblist_container {
  overflow-x: auto;
  overflow-y: hidden;
}

.str-inline-info {
  --str-inline-info: #8888;
  display: inline-flex;
  cursor: pointer;
  color: var(--str-inline-info);
  font-size: 14px;
}
.str-inline-info:hover {
  opacity: 0.6;
}

.popover {
  --bs-popover-max-width: none !important;
}
.popover .popover-arrow {
  --bs-popover-bg: var(--bs-popover-header-bg);
}
.str-info-table {
  display: table;
  width: 200px;
  color: var(--font-color);
}
.str-info-table .rblock {
  display: table-row;
}
.str-info-table .rblock:last-child > DIV {
  border-bottom: 0px dotted lightgray;
}
.str-info-table .rblock > DIV {
  border-bottom: 1px dotted lightgray;
  padding: 2px;
  display: table-cell;
}
.str-info-table .rblock > DIV.title {
  font-style: italic;
  width: 40%;
  white-space: nowrap;
}
.str-info-table .rblock > DIV.data {
  font-weight: bold;
}

a.nav-to-btree {
  color: #8888;
}
a.nav-to-btree:hover {
  color: #888f;
}

.activebar {
  height: 100%;
  width: 100px;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 2px;
}
.activebar > b {
  width: 25%;
  height: 5px;
  background-color: #bcc;
  border-radius: 5px;
}
.activebar > b.aw {
  background-color: #595;
}
.activebar > b.bw {
  background-color: #f60;
}
.activebar .adt {
  width: 100%;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  font-weight: bold;
}