.breadcrumb-area {
  font-size: 14px;
}
.breadcrumb {
  margin: 1rem 0;
  color: var(--hlx-text-color-primary);
  font-family: inherit;
  font-size: inherit;
  & * {
    font-family: var(--hlx-font-type-content);
    font-size: inherit;
    font-weight: 500;
    line-height: 20px;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;

    li {
      display: inline-flex;
      align-items: center;
      // margin-right: 0.5rem;
      // padding:  0 0.5rem;
      a{
        cursor:context-menu;
      }

      .show-breadcrumb {
        color: var(--hlx-text-color-primary);
        text-decoration: none;
        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
      // &:last-child{
      //   text-decoration: none;
      //   cursor: context-menu;
      //   &:hover{
      //     text-decoration: none;
      //   }
      //   // pointer-events: none;
      // }

      // &.disabledd {
      //   color: var(--hlx-color--text);
      //   cursor: default;
      //   :hover {
      //     border: none !important;
      //   }
      // }

      // &:last-child {
      //   color: var(--hlx-color-text);
      //   cursor: default;
      //   pointer-events: none;
      // }
      > i {
        padding-right: 5px;
        font-size: inherit;
      }
    }

    .breadcrumb-separator {
      padding: 0 9px;
      display: inline-flex;

      i {
        font-size: inherit;
      }
    }
  }
}


.tooltip-container {
  position: relative;
  display: flex;
  place-content: center;
}

/* styling of the tooltip display */
p#tooltip-text1 {
  display: none;
  position: fixed;
  width:150px;
  white-space: pre-wrap;
  word-wrap: break-word;
  // top: 60px;
  margin-top: -6px;
  z-index: 100000000000000000;
  background: #2c2c2c;
  padding: 8px;
  font-size: 1rem;
  color: #fff;
  border-radius: 6px;
  animation: fadeIn 0.6s;
  font-size: 11px;
  font-family: var(--hlx-font-type-content);
}

span#tooltip-text1 {
  display: none; 
  position: fixed;
  min-width: max-content;
  max-width: 180px;
  // width: 89px;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-top: -6px;
  z-index: 100000000000000000;
  background: #2c2c2c;
  padding: 8px;
  font-size: 1rem;
  color: #fff;
  border-radius: 6px;
  animation: fadeIn 0.6s;
  font-size: 11px;
  font-family: var(--hlx-font-type-content);
}

/* optional styling to add a "wedge" to the tooltip */
p#tooltip-text1:before {
content: "";
position: absolute;
right: 100%;
bottom: 25%;
margin-left: -64px;
border: 8px solid transparent;
border-right: 8px solid #2c2c2c;
}

span#tooltip-text1:before {
  content: "";
  position: absolute;
  top: 38%;
  // left: 300%;
  margin-left: -26px;
  // margin-left: -179px;
  border: 8px solid transparent;
  border-right: 10px solid #2c2c2c;
}

@keyframes fadeIn {
from {
 opacity: 0;
}
to {
 opacity: 1;
}
}