/* setting a size in em makes sure that the gap scales too with the scaling factor */
.tf-tree {
  overflow: auto;
  font-size: 16px; }
  .tf-tree * {
    box-sizing: border-box;
    padding: 0;
    margin: 0; }
  .tf-tree ul {
    display: inline-flex; }
  .tf-tree li {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 1em; }
    .tf-tree li ul {
      margin: 0.5em 0; }
    .tf-tree li li:before {
      display: block;
      position: absolute;
      width: 100%;
      left: calc(0% - 0.03125em);
      top: calc(-1em - 0.03125em);
      content: '';
      border-top: 0.0625em solid #000;
      height: 0.0625em; }
    .tf-tree li li:first-child:before {
      left: calc(50% - 0.03125em);
      max-width: calc(100% - 50% + 0.0625em); }
    .tf-tree li li:last-child:before {
      left: auto;
      right: calc(50% - 0.03125em);
      max-width: calc(100% - 50% + 0.0625em); }
    .tf-tree li li:only-child:before {
      display: none; }
    .tf-tree li li:only-child > .tf-node-content:before,
    .tf-tree li li:only-child > .tf-nc:before {
      height: calc(1em + 0.0625em);
      top: calc(-1em - 0.0625em); }
  .tf-tree .tf-node-content, .tf-tree .tf-nc {
    position: relative;
    display: inline-block;
    /*border: $connector_width solid $primary_color;*/
    padding: 10px 1px; }
    .tf-tree .tf-node-content:before, .tf-tree .tf-nc:before {
      position: absolute;
      display: block;
      height: 1em;
      left: calc(50% - 0.03125em);
      top: calc(-1em - 0.03125em);
      content: '';
      border-left: 0.0625em solid #000;
      width: 0.0625em; }
    .tf-tree .tf-node-content:after, .tf-tree .tf-nc:after {
      position: absolute;
      display: block;
      height: 0.5em;
      left: calc(50% - 0.03125em);
      top: calc(86% + 0.03125em);
      content: '';
      border-left: 0.0625em solid #000;
      width: 0.0625em; }
    .tf-tree .tf-node-content:only-child:after, .tf-tree .tf-nc:only-child:after {
      display: none; }
  .tf-tree > ul > li > .tf-node-content:before, .tf-tree > ul > li > .tf-nc:before {
    display: none; }
  .tf-tree.tf-gap-sm li {
    padding: 0 0.6em; }
    .tf-tree.tf-gap-sm li > .tf-node-content:before, .tf-tree.tf-gap-sm li > .tf-nc:before {
      height: 0.6em;
      top: -0.6em; }
    .tf-tree.tf-gap-sm li > .tf-node-content:after, .tf-tree.tf-gap-sm li > .tf-nc:after {
      height: 0.6em; }
    .tf-tree.tf-gap-sm li ul {
      margin: 1.2em 0; }
    .tf-tree.tf-gap-sm li li:before {
      top: calc(-0.6em - 0.03125em); }
    .tf-tree.tf-gap-sm li li:only-child > .tf-node-content:before,
    .tf-tree.tf-gap-sm li li:only-child > .tf-nc:before {
      height: calc(0.6em + 0.0625em);
      top: calc(-0.6em - 0.0625em); }
  .tf-tree.tf-gap-lg li {
    padding: 0 1.5em; }
    .tf-tree.tf-gap-lg li > .tf-node-content:before, .tf-tree.tf-gap-lg li > .tf-nc:before {
      height: 1.5em;
      top: -1.5em; }
    .tf-tree.tf-gap-lg li > .tf-node-content:after, .tf-tree.tf-gap-lg li > .tf-nc:after {
      height: 1.5em; }
    .tf-tree.tf-gap-lg li ul {
      margin: 3em 0; }
    .tf-tree.tf-gap-lg li li:before {
      top: calc(-1.5em - 0.03125em); }
    .tf-tree.tf-gap-lg li li:only-child > .tf-node-content:before,
    .tf-tree.tf-gap-lg li li:only-child > .tf-nc:before {
      height: calc(1.5em + 0.0625em);
      top: calc(-1.5em - 0.0625em); }
  .tf-tree li.tf-dotted-children .tf-node-content:before, .tf-tree li.tf-dotted-children .tf-node-content:after, .tf-tree li.tf-dotted-children .tf-nc:before, .tf-tree li.tf-dotted-children .tf-nc:after {
    border-left-style: dotted; }
  .tf-tree li.tf-dotted-children li:before {
    border-top-style: dotted; }
  .tf-tree li.tf-dotted-children > .tf-node-content:before, .tf-tree li.tf-dotted-children > .tf-nc:before {
    border-left-style: solid; }
  .tf-tree li.tf-dashed-children .tf-node-content:before, .tf-tree li.tf-dashed-children .tf-node-content:after, .tf-tree li.tf-dashed-children .tf-nc:before, .tf-tree li.tf-dashed-children .tf-nc:after {
    border-left-style: dashed; }
  .tf-tree li.tf-dashed-children li:before {
    border-top-style: dashed; }
  .tf-tree li.tf-dashed-children > .tf-node-content:before, .tf-tree li.tf-dashed-children > .tf-nc:before {
    border-left-style: solid; }

.wrap-level-0 .wrap-level-1 .tf-nc:after {
  top: calc(75% + 0.03125em); }

.wrap-level-0 .wrap-level-1 .wrap-level-2 .tf-nc:after {
  top: calc(68% + 0.03125em); }

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 31-May-2021, 11:59:33 pm
    Author     : sanil
*/
.example .tf-nc {
  /* css here */ }

.tf-custom .tf-nc:before,
.tf-custom .tf-nc:after {
  /* css here */ }

.tf-custom li li:before {
  /* css here */ }

.tf-ancestor-tree > ul {
  transform: rotateX(180deg); }

.node-text {
  display: inline-block;
  transform: rotateX(180deg); }

.last-month {
  color: red; }

.fas.small {
  font-size: .25em !important; }

.fas.extra-small {
  font-size: .15em !important; }

li.sm-user {
  padding: .08rem !important; }

.tf-tree {
  justify-content: center;
  display: flex; }

.consultant {
  color: #b296cd; }

.manager {
  color: #b296cd; }

.director {
  color: #b296cd; }

.executive {
  color: #2d673c; }

.elite {
  color: #fffe54; }

.premier {
  color: #c55897; }

.silver {
  color: #cbcaca; }

.gold {
  color: #e99840; }

.platinum {
  color: #080808; }

.diamond {
  color: #83c7d7; }

.blue-diamond {
  color: #434795; }

.presidential-diamond {
  color: #603386; }

.l-consultant {
  color: #b296cd;
  background: #b296cd; }

.l-manager {
  color: #b296cd;
  background: #b296cd; }

.l-director {
  color: #b296cd;
  background: #b296cd; }

.l-executive {
  color: #2d673c;
  background: #2d673c; }

.l-elite {
  color: #fffe54;
  background: #fffe54; }

.l-premier {
  color: #c55897;
  background: #c55897; }

.l-silver {
  color: #cbcaca;
  background: #cbcaca; }

.l-gold {
  color: #e99840;
  background: #e99840; }

.l-platinum {
  color: #080808;
  background: #080808; }

.l-diamond {
  color: #83c7d7;
  background: #83c7d7; }

.l-blue-diamond {
  color: #434795;
  background: #434795; }

.l-presidential-diamond {
  color: #603386;
  background: #603386; }

.rotate-180 {
  transform: rotate(270deg); }

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f5f5f5; }

.border-grey {
  border-bottom: 1px solid #F8F8F8; }

.level-0.fas {
  position: relative;
  top: 8px; }

.level-1.fas {
  position: relative;
  top: 8px; }

.level-2.fas {
  position: relative;
  top: 8px; }

/*# sourceMappingURL=styles.css.map */