/**
 * Framework starts from here ...
 * ------------------------------
 */


.tree_columns
{
overflow:hidden;
/*word-break:break-all;*/
column-gap:10px;
/*column-span: all;*/
page-break-inside: avoid;
break-inside: avoid-column;
}


.tree,
.tree ul {
  margin:0 0 0 0.25em; /* indentation */
  padding:0;
  list-style:none;
  color:#369;
  position:relative;

   --tree_line_h:22px;
}

.tree ul {margin-left:0.25em} /* (indentation/2) */

.tree:before,
.tree ul:before {
}

ul.tree:before {
}

.tree container, .tree folder {
  display: block;
}




.tree li:before {
}

ul.tree>li:before {
}

.tree li:last-child:before {
}

.tree li {
  margin:0;
  padding:0 0.75em; /* indentation + .5em */
}
ul.tree li li
{
}
/* PRO0 */
ul.tree li li li
{
/*  margin-top:30px;
  background-color: #ff000030 !important;
*/}

/* AXI1 */
ul.tree li li li li
{
}

/* CPN2 */
ul.tree li li li li li
{
}

/* ACN3 */
ul.tree li li li li li li
{
}
ul.tree li li li li li li a
{
}

/* TSK4 */
ul.tree li li li li li li li
{
}

.tree_block
{
 /*display:inline;*/
  white-space: nowrap;
  overflow: hidden;
  /*background:#ff000030;*/
}


ul.tree a
{
  display: inline-block;
  line-height:var(--tree_line_h);
  text-decoration:none;
  white-space: nowrap;
  vertical-align: top;
  font-size: 13px;
  padding:0px 6px 1px 6px;
  margin:4px 0px 2px 0px;

}

.tbadge
{

  display: inline-block;
  text-decoration: none;
  font-size:11px;
  text-align:center;

  padding:0 5px 1px 5px;
  height:22px;
  line-height:22px;

  border-width:0px;
  border-style:solid;
  margin:0 0px 0 0px;

  position: relative;
  top: 1px !important;

  /*background-color:#f00;*/
  /*color:rgba( 50, 50, 50,1.0) !important;*/
  border-left:1px dotted #70707030;
  text-shadow:0px 0px 4px rgba(255,255,255,0.2);
  font-weight:normal !important;
}




ul.tree a.bold0 { font-weight:700; }
ul.tree a.bold1 { font-weight:600; }
ul.tree a.bold2 { font-weight:500; }
ul.tree a.bold3 { font-weight:400; }


ul.tree a:hover
{
/*background-color:#21263120;*/


/*box-shadow:0px 5px 0px 0px #21263180;*/
/*background-size: auto auto;
background-color: rgba(255, 255, 255, 0.1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(33, 38, 49, 0.1) 2px, rgba(33, 38, 49, 0.1) 3px );
*/
 display: inline-block;
  color:#000 !important;
/*  transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);*/
  background-color: #21263120 !important;

}

ul.tree a::before {
  transform: scaleX(0);
  transform-origin: bottom right;
}

ul.tree a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom right;
}

ul.tree a::before {
  content: " ";
  display: inline-block;
  /*position: absolute;*/
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  /*background: hsl(200 100% 80%);*/
  /*background-color: #cbc4c280;*/
  /*background-color: #212631D0;*/
  background-color: #21263120 !important;

  z-index: -1;
  transition: transform .3s ease;

}

ul.tree a {
  position: relative;
  /*font-size: 5rem;*/
}




.tree_sym
{
  display: inline-block;
  position: relative;
  top:-3px;
  margin-right:2px;
}








.tree_nfo
{
  display: inline-block;
  line-height:var(--tree_line_h);;
  border:1px solid #888;
  text-decoration:none;
  white-space: nowrap;
  vertical-align: top;
  margin:4px 0px 4px 0px;

  font-size: 12px;

  padding:1px 6px 2px 6px;

}

.tree_col1
{

  background-color:#757575 !important;
  opacity:0.8;
  color:rgba(255, 255, 255,1.0) !important;
  font-size: 11px;
  font-weight:600;
}

.tree_nfo_fil
{

  background-color:#333333 !important;
  opacity:0.8;
  color:rgba(255, 255, 255,1.0) !important;
}

ul.tree a.tree_nfo_fil
{
  font-size: 11px;
}

ul.tree a.tree_nfo_tsk
{
  color:rgba(48, 48, 48,1.0) !important;
}

.tree_progress
{
  display: inline-block !important;
  vertical-align:inherit !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 40px !important;
  background-color:#ccc !important;
  height:7px !important;
  opacity: 0.8;
  margin-left: 3px;
  position:relative;
  top:2px;
}


.tree_here {

  /*bbadge bbadge_blue1 bbadge_margl*/
  /*General*/
  display: inline-block;
  text-decoration: none;

  /*Text*/
  font-size:12px;
  line-height:180%;
  vertical-align: top;
  text-align:center;


  /*width:auto;*/
  padding:0 5px 0px 5px;
  height:21px;

  border-width:1px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  border-style:solid;
  margin:0 1px 0 1px;

  position: relative;
  top: 3px;

  background-color:#1059b2 !important; border-color:rgba( 30, 30, 30,0.5); color:rgba(255,255,255,0.9) !important; text-shadow:0px 1px 0px rgba(100,100,100,0.6);
  margin-left: 10px;
}

.vspacerPRO
{
  /*background-color:#ffff0030;*/
  padding-top:8px !important;
}
.vspacerAXI
{
  /*background-color:#00ffff30;*/
  padding-top:8px !important;
}
.vspacerCPN
{
  /*background-color:#00ff30;*/
  padding-top:8px !important;
}
.vspacerACN
{
  /*background-color:#00ff0030;*/
  padding-top:8px !important;
}
.vspacerTSK
{
  /*background-color:#ff000030;*/
  padding-top:8px !important;
}
/* firefox windows */
/*@-moz-document url-prefix() and (not (-moz-osx-font-smoothing: auto))
{
  .bbadge_map
  {
  top:0px;
  line-height:23px;
  }
}*/








ins.badge_std
,ins.badge_key
,ins.badge_code
,ins.badge_gen
,ins.badge_slev
,ins.badge_ulev
,ins.badge_elev
,ins.badge_log1
,ins.badge_log2
,ins.badge_log3
,ins.badge_log4
,ins.badge_log5
{

  display: inline-block;
  text-decoration: none;

  /*Text*/
  font-size:12px;
  text-align:center;

  border-width:1px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  border-style:solid;

  position: relative;
  top: 0px !important;

  /*_white1*/
/*  background-color:#ffffff !important;*/
  /*border-color:rgba(120,120,120,0.5);*/

/*  color:rgba( 50, 50, 50,1.0) !important;*/

  /*text-shadow:0px 1px 0px rgba(255,255,255,0.6);*/
  border:1px solid #3f51b550;
  text-shadow:0px 0px 4px rgba(255,255,255,0.2);
  font-weight:normal !important;
    /*box-shadow: rgba(12, 13, 14, 0.15) 0px 1px 1px 0px, rgb(255, 255, 255) 0px 1px 0px 0px inset;*/
    /*box-shadow: rgba(12, 13, 14, 0.15) 0px 1px 1px 0px;*/
    /*box-shadow: rgba(12, 13, 14, 0.15) 0px 1px 1px 0px;*/

  box-shadow: -2px -1px 0px -5px rgba(140,140,140,0.75);
  -webkit-box-shadow: -2px -1px 0px -5px rgba(140,140,140,0.75);
  -moz-box-shadow: -2px -1px 0px -5px rgba(140,140,140,0.75);

  /*20221129*/
    margin:3px 1px 3px 1px;
    font-size:13px;
    line-height:21px;
    /*width:auto;*/
    padding:0 6px 0px 6px !important;
    height:21px;

}

ins.badge_log1
{
  background-color:#b5c99a !important; color:#222 !important;
  opacity:0.8;
}
ins.badge_log2
{
  background-color:#b5c99a !important; color:#222 !important;
  opacity:0.7;
}
ins.badge_log3
{
  background-color:#b5c99a !important; color:#222 !important;
  opacity:0.6;
}
ins.badge_log4
{
  background-color:#b5c99a !important; color:#222 !important;
  opacity:0.5;
}
ins.badge_log5
{
  background-color:#b5c99a !important; color:#222 !important;
  opacity:0.4;
}



ins.badge_code
{
  background-color:#004d40 !important; color:#fff !important;
  position: relative;
  top: 0px !important;
}

ins.badge_key
{
  background-color:#00bfa5 !important; color:#222 !important;
  position: relative;
  top: 0px !important;
}

ins.badge_gen
{
  background-color:#9bc2bd !important; color:#222 !important;
  position: relative;
  top: 0px !important;
}

ins.badge_slev
{
  background-color:#6d6875 !important; color:#ffffff !important;
  position: relative;
  top: 0px !important;
}

ins.badge_slev::after
{
  content:"→";/*→➔➜⇢*/
  font-size:13px;
  font-weight:600;
  color:yellow;
  padding-left:5px;
}

ins.badge_ulev
{
  background-color:#6d6875 !important; color:#ffffff !important;
  position: relative;
  top: 0px !important;
}

ins.badge_ulev::after
{
  content:"↘︎";/*↘︎⤵︎➘*/
  font-size:13px;
  font-weight:600;
  color:yellow;
  padding-left:5px;
}
ins.badge_elev
{
  background-color:#6d6875 !important; color:#ffffff !important;
  position: relative;
  top: 0px !important;
}

ins.badge_elev::after
{
  content:"⦿";
  font-size:13px;
  font-weight:600;
  color:yellow;
  padding-left:5px;
  position:relative;
  top:-1px;
}








small.label_gen
{
  /*  display: contents;*/
  display:inline flow-root list-item;
  /*  display:inline-table;*/
  margin-left:5px;
  position:relative;
  top:-1px;
  font-size:12px;
  text-align:left;
  vertical-align:middle;
  line-height:13px;
  max-width:200px;
  max-height:27px;
  /*  overflow: inherit;*/
/*  overflow: hidden;*/
  white-space:wrap;
  word-break: break-word;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  font-weight:400;
  color:#ddd;
/*  display: -webkit-box;*/
/*  -webkit-line-clamp: 2;*/
/*  line-clamp: 2;*/
/*  -webkit-box-orient:vertical;*/
}






/*##################*/
/* simple_htree1 OK */
/*##################*/

.simple_htree1, .simple_htree1 ul, .simple_htree1 li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.simple_htree1 {
    margin: 0 0 1em;
    text-align: center;
}
.simple_htree1, .simple_htree1 ul {
    display: table;
}
.simple_htree1 ul {
  width: 100%;
}
    .simple_htree1 li {
        display: table-cell;
        padding: 1.0em 0;
        vertical-align: top;
    }
        /* _________ */
        .simple_htree1 li:before {
            outline: solid 1px #999;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
        .simple_htree1 li:first-child:before {left: 50%;}
        .simple_htree1 li:last-child:before {right: 50%;}

        .simple_htree1 code, .simple_htree1 span
        {
            border: solid .1em #999;
            border-radius: .2em;
            display: inline-block;
            margin: 0 0.2em 1.0em;
            padding: 0.4em 0.4em;
            position: relative;
        }
        /* If the simple_htree1 represents DOM structure */
        .simple_htree1 code
        {
            font-family: monaco, Consolas, 'Lucida Console', monospace;
        }

            /* | */
            .simple_htree1 ul:before,
            .simple_htree1 code:before,
            .simple_htree1 span:before {
                outline: solid 1px #999;
                content: "";
                height: 1.0em;
                left: 50.01%;
                position: absolute;
            }

            .simple_htree1 ul:before {
                top: -1.0em;
            }
            .simple_htree1 code:before,
            .simple_htree1 span:before {
                top: -1.10em;
            }

/* The root node doesn't connect upwards */
.simple_htree1 > li {margin-top: 0;}
    .simple_htree1 > li:before,
    .simple_htree1 > li:after,
    .simple_htree1 > li > code:before,
    .simple_htree1 > li > span:before {
      outline: none;
    }
.simple_htree1 abbr
{
    border-bottom:1px dotted #aaaaaa;
    margin-left:10px;
    margin-right:10px;
}


/* example :

 <figcaption>Example DOM structure diagram</figcaption>
  <ul class="simple_tree">
    <li><code>html</code>
      <ul>
        <li><code>head</code>
          <ul>
            <li><code>title</code></li>
          </ul>
        </li>
        <li><code>body</code>
          <ul>
            <li><code>header</code>
              <ul>
                <li><code>h1</code></li>
                <li><code>p</code></li>
              </ul>
            </li>
            <li><code>nav</code>
              <ul>
                <li><code>a</code></li>
                <li><code>a</code></li>
                <li><code>a</code></li>
                <li><code>a</code></li>
              </ul>
            </li>
            <li><code>main</code>
              <ul>
                <li><code>h1</code></li>
                <li><code>article</code>
                  <ul>
                    <li><code>h2</code></li>
                    <li><code>p</code></li>
                    <li><code>p</code></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><code>aside</code>
              <ul>
                <li><code>h2</code></li>
                <li><code>p</code></li>
                <li><code>p</code>
                  <ul>
                    <li><code>a</code></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><code>footer</code>
              <ul>
                <li><code>nav</code>
                  <ul>
                    <li><code>a</code></li>
                    <li><code>a</code></li>
                    <li><code>a</code></li>
                    <li><code>a</code></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</figure>

*/


/*────────────────────────────────────── FAMILY_TREE1 ──────────────────────────────────────*/



.family_tree1 small.label_gen
{
 color:#555;
}

.family_tree1 small.label_lb
{
  /*  display: contents;*/
  display:block;
  position:relative;
  top:-4px;
  left:0px;
  font-size:10px;
/*  font-style: italic;*/
  text-transform: uppercase;
  font-weight:400;
  color:#777777;
  border-bottom: 0px solid #33333330;
  overflow:hidden;
/*  height: 10px;*/
  line-height: 12px;
}

.family_tree1 .lv0 small.label_lb { max-width:12ch; color:var(--family_tree1_lv0_fg); /*background-color:var(--family_tree1_lv0_bg);*/ }
.family_tree1 .lv1 small.label_lb { max-width:18ch; color:var(--family_tree1_lv1_fg); /*background-color:var(--family_tree1_lv1_bg);*/ }
.family_tree1 .lv2 small.label_lb { max-width:24ch; color:var(--family_tree1_lv2_fg); /*background-color:var(--family_tree1_lv2_bg);*/ }
.family_tree1 .lv3 small.label_lb { max-width:36ch; color:var(--family_tree1_lv3_fg); /*background-color:var(--family_tree1_lv3_bg);*/ }
.family_tree1 .lv4 small.label_lb { max-width:48ch; color:var(--family_tree1_lv4_fg); /*background-color:var(--family_tree1_lv4_bg);*/ }



.family_tree1
{
  white-space: nowrap;
  overflow: auto;
  margin: 0;
  padding: 0;
}

.family_tree1 .tree_title
{
  text-transform: uppercase;
  font-size: 14px;
  font-weight:500;
/*  font-family:monospace;*/
  letter-spacing:1px;
  /*
  padding:  3px 8px 3px 8px;
  margin:  5px 0px 20px 0px;
  */
}

.family_tree1 ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  padding-left: 0px;inp,sep,word)
  padding-right: 0px;
  background-color:none;
}

.family_tree1 li {
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  /*added for long names*/

  float: none;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  margin: 0 -2px 0 -2px;
}
/*We will use ::before and ::after to draw the connectors*/

.family_tree1 li::before
,.family_tree1 li::after
{
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 2px solid #999999;
  width: 50%;
  height: 20px;
  height: calc(20px - 1px);
}

.family_tree1 li::after
{
  right: auto;
  left: 50%;
  border-left: 2px solid #999999;
}
/*We need to remove left-right connectors from elements without
any siblings*/

.family_tree1 li:only-child::after
,.family_tree1 li:only-child::before
{
  display: none;
}
/*Remove space from the top of single children*/

.family_tree1 li:only-child
{
  padding-top: 0;
}
/*Remove left connector from first child and
right connector from last child*/

.family_tree1 li:first-child::before
,.family_tree1 li:last-child::after
{
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/

.family_tree1 li:last-child::before
{
  border-right: 2px solid #999999;
  border-radius: 0 5px 0 0;
}

.family_tree1 li:first-child::after
{
  border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/

.family_tree1 ul ul::before
{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid #999999;
  width: 0;
  height: 20px;
}


.family_tree1 ul ul ul ul ul ul:last-child::before
{
  border-left: 2px solid #333333;
}
.family_tree1 li li li li li li::before
,.family_tree1 li li li li li li::after
{
  border-top: 2px solid #333333;
}

.family_tree1 li li li li li li::after
{
  border-left: 2px solid #333333;
  height: calc(20px - 2px);
}
.family_tree1 li li li li li li:last-child::before
{
  border-right: 2px solid #333333;
  height: calc(20px - 2px);
}
/*
.arrow {
    width:120px;
    margin:50px auto;
  transform: rotate(90deg);
}

.family_tree1 ul ul ul ul ul ul em:last-child::before
{
    margin-top:14px;
    width:90px;
    background:blue;
    height:10px;
    float:left;
}
.family_tree1 ul ul ul ul ul ul em i:last-child::before
{
    width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid blue;
    float:right;
}
*/


.family_tree1 li a
{
  border: 1px solid #555555;
  padding: 10px 10px;
  text-decoration: none;
  color: #666;
/*  font-family: arial, verdana, tahoma;*/
  font-size: 13px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  width:fit-content;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/

.family_tree1 li a:hover
,.family_tree1 li a:focus
,.family_tree1 li a:hover+ul li a
,.family_tree1 li a:focus+ ul li a
{
  background-color: var(--family_tree1_high_bg);
  border: 1px solid #555555;
  color: #000000;
}
/*Connector styles on hover*/

.family_tree1 li a:hover+ul li::after
,.family_tree1 li a:hover+ul li::before
,.family_tree1 li a:hover+ul::before
,.family_tree1 li a:hover+ul ul::before
,.family_tree1 li a:focus+ul li::after
,.family_tree1 li a:focus+ul li::before
,.family_tree1 li a:focus+ul::before
,.family_tree1 li a:focus+ul ul::before
{
  border-color: #94a0b4;
}

.husband
{
  float: left;
}

.wife
{
  margin-left: 10px;
}

.wife::before
{
  /* pseudo CSS, will need to be modified */

  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.family_tree1 .longline
{
    display:block;
    margin-top:0px;
    margin-bottom:0px;
}
.family_tree1 abbr
{
    border-bottom:1px dotted #aaaaaa;
    margin-left:5px;
    margin-right:10px;
}

.family_tree1 ul ul li a
{
  /*
  background: repeating-linear-gradient(
  -45deg,
  transparent 0px,
  transparent 2px,
  #fd493327 2px,
  #fd493327 10px
 );
 */
 background-color:var(--family_tree1_lv0_bg);
}

.family_tree1 ul ul ul li a
{
  /*
  background: repeating-linear-gradient(
  -45deg,
  transparent 0px,
  transparent 2px,
  #ff910030 2px,
  #ff910030 10px
 );
 */
 background-color:var(--family_tree1_lv1_bg);
}

.family_tree1 ul ul ul ul li a
{
  /*
  background: repeating-linear-gradient(
  -45deg,
  transparent 0px,
  transparent 2px,
  #ffe20037 2px,
  #ffe20037 10px
 );
 */
 background-color:var(--family_tree1_lv2_bg);
}

.family_tree1 ul ul ul ul ul li a
{
  /*
  background: repeating-linear-gradient(
  -45deg,
  transparent 0px,
  transparent 2px,
  #71ea0030 2px,
  #71ea0030 10px
 );
 */
 background-color:var(--family_tree1_lv3_bg);
}

.family_tree1 ul ul ul ul ul ul li a
{
  /*
  background: repeating-linear-gradient(
  -45deg,
  transparent 0px,
  transparent 2px,
  #90caf927 2px,
  #90caf927 10px
 );
 */
 background-color:var(--family_tree1_lv4_bg);
}






/* example :

<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>--
      --<a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li>
              <a href="#">Grand Child 1 sdsdsdsdssssssssssddddddddddd</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Child</a>
          <ul>
            <li><a href="#">Grand Child2fsdsds sdsdsdsdddddddddddd</a></li>
            <li>
              <a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li>
            <a class="husband" href="#">Grand Child</a>
            <a class="wife" href="#">Wife</a>
            <ul>
               <li><a href="#">Kid</a></li>
               <li><a href="#">Kid</a></li>
            </ul>
        </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
*/



/*##################*/
/* simple_htree3 OK */
/*##################*/


.simple_htree3 ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
.simple_htree3 ul ul:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}
.simple_htree3 ul li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
.simple_htree3 ul li a {
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  /*Connector styles on hover*/
}
.simple_htree3 ul li a:hover, .simple_htree3 ul li a:hover + ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}
.simple_htree3 ul li a:hover + ul li:after, .simple_htree3 ul li a:hover + ul li:before, .simple_htree3 ul li a:hover + ul:before, .simple_htree3 ul li a:hover + ul ul:before {
  border-color: #94a0b4;
}
.simple_htree3 ul li:before, .simple_htree3 ul li:after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.simple_htree3 ul li:after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}
.simple_htree3 ul li:only-child:after, .simple_htree3 ul li:only-child:before {
  display: none;
}
.simple_htree3 ul li:only-child {
  padding-top: 0;
}
.simple_htree3 ul li:first-child:before, .simple_htree3 ul li:last-child:after {
  border: 0 none;
}
.simple_htree3 ul li:last-child:before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.simple_htree3 ul li:first-child:after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}
.simple_tree3 abbr
{
    border-bottom:1px dotted #aaaaaa;
    margin-left:10px;
    margin-right:10px;
}


/* example :

<div class="familytree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li>
              <a href="#">Grand Child</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Child</a>
          <ul>
            <li><a href="#">Grand Child</a></li>
            <li>
              <a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li><a href="#">Grand Child</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

*/



/* simple_tree1 OK */

.simple_tree1 ul
{
  margin-left: 20px;
}

.simple_tree1 li
{
  list-style-type: none;
  margin: 10px 0 10px 10px;
  position: relative;
/*  width:200px;*/
}
.simple_tree1 li:before
{
  content: "";
  position: absolute;
  top: -10px;
  left: -20px;
  border-left: 1px solid #999999;
  border-bottom: 1px solid #999999;
  width: 20px;
  height: 15px;
}
.simple_tree1 a
{
  overflow:hidden;
  text-overflow: ellipsis;
    white-space: nowrap;
/*    background-color:#ff000080;*/
  font-size: 13px;
  width:fit-content;
}
.simple_tree1 li:after
{
  position: absolute;
  content: "";
  top: 5px;
  left: -20px;
  border-left: 1px solid #999999;
  border-top: 1px solid #999999;
  width: 20px;
  height: 100%;
}
.simple_tree1 li:last-child:after
{
  display: none;
}
.simple_tree1 li a {
  display: block;
  border: 1px solid #999999;
  padding: 5px 5px;
  color: #888;
  text-decoration: none;
  border-radius: 5px;
}

.simple_tree1 li a:hover
,.simple_tree1 li a:focus
{
  background-color: #d8e2dc;
  color: #000;
  border: 1px solid #555555;
}
.simple_tree1 li a:hover + ul li a
,.simple_tree1 li a:focus + ul li a
{
  background-color: #d8e2dc;
  color: #000;
  border: 1px solid #555555;
}
.simple_tree1 li a:hover + ul li:after
,.simple_tree1 li a:hover + ul li:before
,.wtree li a:focus + ul li:after
,.wtree li a:focus + ul li:before
{
  border-color: #555555;
}
.simple_tree1 abbr
{
    border-bottom:1px dotted #aaaaaa;
    margin-left:10px;
    margin-right:10px;
}







:root
{
--tree_map1_lv0_fg: #fff;
--tree_map1_lv1_fg: #222;
--tree_map1_lv2_fg: #222;
--tree_map1_lv3_fg: #222;
--tree_map1_lv4_fg: #222;

--tree_map1_lv0_bg: #89b0ae;
--tree_map1_lv1_bg: #bee3db;
--tree_map1_lv2_bg: #ffd6ba;
--tree_map1_lv3_bg: #faedcd;
--tree_map1_lv4_bg: #faf9f9;

--tree_map1_high_bg: #e5fd8f;

--tree_map1_blocks_mg: 0px;
--tree_map1_blocks_mw: 100px;
--tree_map1_blocks_mh: 30px;
--tree_map1_blocks_bcolor: #88888880;


--family_tree1_lv0_fg: #fff;
--family_tree1_lv1_fg: #444;
--family_tree1_lv2_fg: #444;
--family_tree1_lv3_fg: #444;
--family_tree1_lv4_fg: #444;

--family_tree1_lv0_bg: #89b0ae;
--family_tree1_lv1_bg: #bee3db;
--family_tree1_lv2_bg: #ffd6ba;
--family_tree1_lv3_bg: #faedcd;
--family_tree1_lv4_bg: #faf9f9;

--family_tree1_high_bg: #e5fd8f;
}

/*──────────────────────────────────────TREE_MAP1 ──────────────────────────────────────*/

.tree_map1 .longline
{
    display:inline-block;
    margin-top:0px;
    margin-bottom:0px;
}
.tree_map1 abbr
{
    border-bottom:1px dotted #aaaaaa;
    margin-left:10px;
    margin-right:10px;
}



.tree_map1 small.label_gen
{
 display:inline-table;
 white-space:revert;
 color:#555;
}


.tree_map1 small.label_lb
{
letter-spacing: 0.05em;
  /*  display: contents;*/
  display:inline-block;
  /*  display:inline-table;*/
/*  margin-left:5px;*/
  font-size:10px;
  text-transform: uppercase;
/*  font-family:monospace;*/
  font-weight:400;
  color:#2d6a4f80;
  line-height:14px;
/*  max-width:32ch;*/
  max-height:27px;
  /*  overflow: inherit;*/
/*  overflow: hidden;*/
  white-space:nowrap;
  word-break: break-word;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  position:absolute;
  top:calc(3px + var(--tree_map1_blocks_mg));
  left:calc(2px + var(--tree_map1_blocks_mg));
/*  background-color:#ffffff;*/
  padding:0px 2px 0px 6px;
  border-bottom: 0px solid #33333330;

}

.tree_map1 small.label_lb_v2
{
  display:block;
  font-size:12px;
  text-align:left;
  font-style: italic;
  font-weight:500;
  color:#777777;
  line-height:14px;
  max-width:32ch;
  max-height:27px;
  overflow: hidden;
  white-space:wrap;
  word-break: break-word;
  text-overflow: ellipsis;
  position:relative;
  top:0px;
  left:-4px;
  padding:0px 2px 3px 6px;
/*  width:auto;*/
  white-space: preserve-breaks;
/*  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient:vertical;*/
}
.tree_map1 small.label_lb_v2:after
{
  content:"\A";
}

.tree_map1 .lv0 small.label_lb { max-width_DIS:12ch; color:var(--tree_map1_lv0_fg); /*background-color:var(--tree_map1_lv0_bg);*/ }
.tree_map1 .lv1 small.label_lb { max-width_DIS:12ch; color:var(--tree_map1_lv1_fg); /*background-color:var(--tree_map1_lv1_bg);*/ }
.tree_map1 .lv2 small.label_lb { max-width_DIS:12ch; color:var(--tree_map1_lv2_fg); /*background-color:var(--tree_map1_lv2_bg);*/ }
.tree_map1 .lv3 small.label_lb { max-width_DIS:20ch; color:var(--tree_map1_lv3_fg); /*background-color:var(--tree_map1_lv3_bg);*/ }
.tree_map1 .lv4 small.label_lb { max-width_DIS:48ch; color:var(--tree_map1_lv4_fg); /*background-color:var(--tree_map1_lv4_bg);*/ }


.tree_map1 ul.lv0:first-of-type > li small.label_lb:before
,.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li small.label_lb:before
,.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type ul.lv2 > li small.label_lb:before
,.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type ul.lv2 > li:first-of-type ul.lv3 > li small.label_lb:before
,.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type ul.lv2 > li:first-of-type ul.lv3 > li:first-of-type ul.lv4 > li small.label_lb:before
{
  content:"";
  padding:0;
  border-radius:0;
  overflow:hidden;
  border:0px;
}


.tree_map1 ul.lv0:first-of-type > li:first-of-type small.label_lb:before
,.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type small.label_lb:before
,.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type ul.lv2 > li:first-of-type small.label_lb:before
,.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type ul.lv2 > li:first-of-type ul.lv3 > li:first-of-type small.label_lb:before
,.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type ul.lv2 > li:first-of-type ul.lv3 > li:first-of-type ul.lv4 > li:first-of-type small.label_lb:before
{
  position:absolute;
  top:-21px;
  left:-3px;
  overflow:visible;
  font-weight:500;
  text-transform: normal;
  background-color:#005670;
  color:#ffffff;
  padding:2px 4px 0px 6px;

  border-top:2px solid var(--tree_map1_blocks_bcolor);
  border-right:2px solid var(--tree_map1_blocks_bcolor);
  border-bottom:0px solid var(--tree_map1_blocks_bcolor);
  border-left:2px solid var(--tree_map1_blocks_bcolor);

  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
}

.tree_map1 ul.lv0:first-of-type > li:first-of-type small.label_lb:before{ content:"niv.⒈"; color:var(--tree_map1_lv0_fg); background-color:var(--tree_map1_lv0_bg); border-bottom:1px solid var(--tree_map1_lv0_bg); }
.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type small.label_lb:before{ content:"niv.⒉"; color:var(--tree_map1_lv1_fg); background-color:var(--tree_map1_lv1_bg); border-bottom:1px solid var(--tree_map1_lv1_bg); }
.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type ul.lv2 > li:first-of-type small.label_lb:before{ content:"niv.⒊"; color:var(--tree_map1_lv2_fg); background-color:var(--tree_map1_lv2_bg); border-bottom:1px solid var(--tree_map1_lv2_bg); }
.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type ul.lv2 > li:first-of-type ul.lv3 > li:first-of-type small.label_lb:before{ content:"niv.⒋"; color:var(--tree_map1_lv3_fg); background-color:var(--tree_map1_lv3_bg); border-bottom:1px solid var(--tree_map1_lv3_bg); }
.tree_map1 ul.lv0:first-of-type > li:first-of-type ul.lv1 > li:first-of-type ul.lv2 > li:first-of-type ul.lv3 > li:first-of-type ul.lv4 > li:first-of-type small.label_lb:before{ content:"niv.⒌"; color:var(--tree_map1_lv4_fg); background-color:var(--tree_map1_lv4_bg); border-bottom:1px solid var(--tree_map1_lv4_bg); }

/* tree_map1 OK */

.tree_map1
{
 padding-top: 10px;
 margin-left: 20px;
}

.tree_map1 a.tree_title
{
  display: table-caption;
  width:fit-content;
  text-transform: uppercase;
  font-size: 15px;
  font-weight:500;
/*  font-family:monospace;*/
  letter-spacing:1px;
/*
  background-color:#4a4e69;
  color: #ffffff !important;
*/
/*  background-color:#edf2f4;*/
/*  border:1px solid #999999;*/
  padding:  3px 8px 3px 8px;
  margin:  5px 0px 20px 0px;
  position:relative;
  left:-5px;

 min-height:auto;

/*
  border-top:2px solid #666;
  border-bottom:1px solid #666;
  */
  background-color:#f2e9e4;
  border:1px dashed #333333;
  border-radius:2px;

}

.tree_map1 a.tree_title:hover
{
  text-decoration: none;
  cursor: default;
}



.tree_map1 ul
{
/*  padding:0px 10px 0px 10px;*/
/*  margin:0px 0px 0px 0px;*/
  padding: 0px;
/*  min-width:100vw;*/
}

.tree_map1 li
{
  list-style-type: none;
  margin: 10px 0 0px 10px;
  margin: 0px;
  position: relative;
/*  width:200px;*/
}
.tree_map1 li:before
{
  /*
  content: "";
  position: absolute;
  top: -10px;
  left: -20px;
  border-left: 1px solid #999999;
  border-bottom: 1px solid #999999;
  width: 20px;
  height: 15px;
  */
}
.tree_map1 a
{
/*  overflow:hidden;*/
  text-overflow: ellipsis;
    white-space: nowrap;
/*    background-color:#ff000080;*/
  font-size: 13px;
/*  width:fit-content;*/
min-width:var(--tree_map1_blocks_mw);
min-height:var(--tree_map1_blocks_mh);

}
.tree_map1 li:after
{
  /*
  position: absolute;
  content: "";
  top: 5px;
  left: -20px;
  border-left: 1px solid #999999;
  border-top: 1px solid #999999;
  width: 20px;
  height: 100%;
  */
}
.tree_map1 li:last-child:after
{
  display: none;
}
.tree_map1 li a {

  display: block;
  line-height:20px;
/*  display: inline-flex;*/
  border: 0px solid red;
/*  border-style: solid;*/
/*  border-radius: 5px;*/

/*
outline-style:solid;
outline-color:#a3a3a3;
outline-width:4px;
outline-offset:-2px;

outline-style:solid;
outline-color:#999;
outline-width:4px;
outline-offset:-2px;
border-radius:1px;
*/

outline-style:solid;
outline-color:var(--tree_map1_blocks_bcolor);
outline-width:2px;
outline-offset:-1px;
border-radius:0px;


  padding: 5px 5px;
  color: #000000A0;
  text-decoration: none;
  text-align:left;
}

.tree_map1 li a:hover
,.tree_map1 li a:focus
{
  background-color: var(--tree_map1_high_bg);
  color: #000;
  border: 0px solid #333; /*1*/
}
.tree_map1 li a:hover + ul li a
,.tree_map1 li a:focus + ul li a
{
  background-color: var(--tree_map1_high_bg);
  color: #000;
  border: 0px solid #333; /*1*/
}
.tree_map1 li a:hover + ul li:after
,.tree_map1 li a:hover + ul li:before
,.tree_map1 li a:focus + ul li:after
,.tree_map1 li a:focus + ul li:before
{
  border-color: #555555;
}


.tree_map1 li
{
  display: flex;
  justify-content: flex-start;

}

.tree_map1 ul li a
{
/*  width: 100%;*/
  margin: var(--tree_map1_blocks_mg);
  padding: 20px 8px 6px 8px;

  /*
  background: repeating-linear-gradient(
  -45deg,
  transparent 0px,
  transparent 2px,
  #fd493327 2px,
  #fd493327 10px
 );
 */
 background-color:var(--tree_map1_lv0_bg);
}




.tree_map1 ul ul li a
{
  /*width: 100%;*/
  margin: var(--tree_map1_blocks_mg);

  /*
  background: repeating-linear-gradient(
  -45deg,
  transparent 0px,
  transparent 2px,
  #ff910030 2px,
  #ff910030 10px
 );
 */
 background-color:var(--tree_map1_lv1_bg);

}

.tree_map1 ul ul ul li a
{
  /*width: 100%;*/
  margin: var(--tree_map1_blocks_mg);

  /*
  background: repeating-linear-gradient(
  -45deg,
  transparent 0px,
  transparent 2px,
  #ffe20037 2px,
  #ffe20037 10px
 );
 */
 background-color:var(--tree_map1_lv2_bg);
}

.tree_map1 ul ul ul ul li a
{
  /*width: 100%;*/
  margin: var(--tree_map1_blocks_mg);

  /*
  background: repeating-linear-gradient(
  -45deg,
  transparent 0px,
  transparent 2px,
  #71ea0030 2px,
  #71ea0030 10px
 );
 */
 background-color:var(--tree_map1_lv3_bg);
}

.tree_map1 ul ul ul ul ul li a
{
  width: 100%;
  margin: var(--tree_map1_blocks_mg);

  /*
  background: repeating-linear-gradient(
  -45deg,
  transparent 0px,
  transparent 2px,
  #90caf927 2px,
  #90caf927 10px
 );
 */
 background-color:var(--tree_map1_lv4_bg);
 min-width:350px;
}

/*
pale:
fc9689
ffca19
fff272
b4ea17
caf0f8

vivid:
fd493337
ff910037
ffe20040
71ea0037
90caf930
*/

.tree_map1 ul
{
/*width:100vw;
width:-moz-available;*/
}

/* contours niv3 et 4

.tree_map1 .lv2 li
{

outline-style:ridge;
outline-color:#ff000080;
outline-width:4px;
outline-offset:-2px;
border-radius:5px;

}
.tree_map1 .lv3 li
{
outline-style:ridge;
outline-color:#3a86ffE0;
outline-width:4px;
outline-offset:-2px;
border-radius:5px;

}
.tree_map1 .lv4 li
{
  outline: 0px solid;
}
*/






/**
 * Framework starts from here ...
 * ------------------------------
 */


.simple_tree3,
.simple_tree3 ul {
  margin:0 0 0 20px; /* indentation */
  padding:0;
  list-style:none;
  color:#369;
  position:relative;
}

.simple_tree3
{
  font-size: 14px;
  margin-top: 15px;
}

.simple_tree3 a.tree_title
{
  display:block;
  width:fit-content;
  text-transform: uppercase;
  font-size: 16px;
/*  background-color:red;*/
/*  display: block;*/
/*  border: 1px solid #999999;*/
  color: #000;
/*  padding:  5px 5px 5px 5px;*/

}

.simple_tree3 ul {margin-left:.5em} /* (indentation/2) */

.simple_tree3:before,
.simple_tree3 ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:-3px;
  bottom:0;
  left:0;
  border-left:1px solid #aaaaaa;
}

.simple_tree3 li {
  margin:0;
  padding:1px 24px; /* indentation + .5em */
  line-height:20px; /* default list item's `line-height` */
  position:relative;
}

.simple_tree3 li:before
{
  content:"";
  display:block;
  width:25px; /* same with indentation */
  height:0;
  border-top:1px solid #aaaaaa;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:16px; /* (line-height/2) */
  left:0;
}

.simple_tree3 ul.lv0 li { padding-top:5px;}
.simple_tree3 ul.lv1 li { padding-top:5px;}
.simple_tree3 ul.lv2 li { padding-top:5px;}
.simple_tree3 ul.lv3 li { padding-top:5px;}
.simple_tree3 ul.lv3 li:first-child { padding-top:5px;}
.simple_tree3 ul.lv4 li { padding-top:0px;}



.simple_tree3 ul.lv0 li:before { top:21px; }
.simple_tree3 ul.lv1 li:before { top:21px; }
.simple_tree3 ul.lv2 li:before { top:21px; }
.simple_tree3 ul.lv3 li:before { top:21px; }
.simple_tree3 ul.lv3 li:first-child:before { top:21px;}
.simple_tree3 ul.lv4 li:before { top:16px; }


.simple_tree3 li:last-child:before {
  background:white; /* same with body background */
  height:auto;
  top:1em; /* (line-height/2) */
  bottom:0;
}

.simple_tree3 .longline
{
    display:inline-block;
    margin-top:0px;
    margin-bottom:0px;
}
.simple_tree3 abbr
{
    border-bottom:1px dotted #aaaaaa;
    margin-left:5px;
    margin-right:10px;
}

.simple_tree3:before
{

  border:0px solid #ff0000;
}

.simple_tree3 ul.lv0
{

/*margin-top:0px;
padding-top:20px;*/

}







.simple_tree3 li a:hover
,.simple_tree3 li a:focus
,.simple_tree3 li a:hover+ul li a
,.simple_tree3 li a:focus+ ul li a
{
  background: #E0FF86;/*e4ff1a*/
  color: #000000;
  padding-top:10px;
  padding-bottom:10px;
  padding-right:6px;
  border-radius:7px;
}
/*Connector styles on hover*/

.simple_tree3 li a:hover+ul li::after
,.simple_tree3 li a:hover+ul li::before
,.simple_tree3 li a:hover+ul::before
,.simple_tree3 li a:hover+ul ul::before
,.simple_tree3 li a:focus+ul li::after
,.simple_tree3 li a:focus+ul li::before
,.simple_tree3 li a:focus+ul::before
,.simple_tree3 li a:focus+ul ul::before
{
}