/* tree-diagrams that are too wide will expand the fieldsets, therefore we reset the min-width of fieldsets */
fieldset
{
  min-width:0;
}

.tree-diagram
{
  overflow-x:scroll;
}

/* clear after */
.tree-diagram:not(.show-source):after
{
  display: block;
  content:'';
  clear:left;
}

.tree-diagram:not(.show-source) ul {
  padding-top: 2em; position: relative;
  /*
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  */
}

.tree-diagram:not(.show-source) ul ul{
  padding-left: 0;
}

.tree-diagram:not(.show-source) li {
  float: left; text-align: center;
  list-style-type: none;
  position: relative;
  padding: 2em 0.5em 0 0.5em;
  /*
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  */
}

/*We will use ::before and ::after to draw the connectors*/

.tree-diagram:not(.show-source) li::before, .tree-diagram:not(.show-source) li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 0.06em solid #ccc;
  width: 50%; height: 2em;
}
.tree-diagram:not(.show-source) li::after{
  right: auto; left: 50%;
  border-left: 0.06em solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree-diagram:not(.show-source) li:only-child::after, .tree-diagram:not(.show-source) li:only-child::before {
  display: none;
}

/*Remove space from the top of single children*/
.tree-diagram:not(.show-source) li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree-diagram:not(.show-source) li:first-child::before, .tree-diagram:not(.show-source) li:last-child::after{
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree-diagram:not(.show-source) li:last-child::before{
  border-right: 0.06em solid #ccc;
  border-radius: 0 0.5em 0 0;
  -webkit-border-radius: 0 0.5em 0 0;
  -moz-border-radius: 0 0.5em 0 0;
}
.tree-diagram:not(.show-source) li:first-child::after{
  border-radius: 0.5em 0 0 0;
  -webkit-border-radius: 0.5em 0 0 0;
  -moz-border-radius: 0.5em 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree-diagram:not(.show-source) ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 0.06em solid #ccc;
  width: 0; height: 2em;
}


.tree-diagram:not(.show-source) li p
{
  margin: 0px;
}

.tree-diagram:not(.show-source) li
{
  font-size: 1em;
}

.tree-diagram:not(.show-source) li a,
.tree-diagram:not(.show-source) li p:empty,
.tree-diagram:not(.show-source) li h1:empty,
.tree-diagram:not(.show-source) li h2:empty,
.tree-diagram:not(.show-source) li h3:empty,
.tree-diagram:not(.show-source) li h4:empty{
  border: 0.06em solid #ccc;
  margin:0;
  padding: 0.5em 1em;
  text-decoration: none;
  /*color: #666;*/
  display: inline-block;
  
  border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  /*
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;*/
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree-diagram:not(.show-source) li a:hover, .tree-diagram:not(.show-source) li a:hover+ul li a {
  background: #c8e4f8; color: #000; border: 0.06em solid #94a0b4;
}
/*Connector styles on hover*/
.tree-diagram:not(.show-source) li a:hover+ul li::after, 
.tree-diagram:not(.show-source) li a:hover+ul li::before, 
.tree-diagram:not(.show-source) li a:hover+ul::before, 
.tree-diagram:not(.show-source) li a:hover+ul ul::before{
  border-color:  #94a0b4;
}






/* horizontal version */

.tree-diagram.horizontal-tree:not(.show-source) ul {
  padding-top: 0;/*20px; position: relative;
  /*
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;*/
}

.tree-diagram.horizontal-tree:not(.show-source) ul ul{
  padding-left: 0px;
}

.tree-diagram.horizontal-tree:not(.show-source) li {
  float: none; text-align: left;
  list-style-type: none;
  position: relative;
  padding: 0/*20px 5px 0 5px;
  /*
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  */
}

/*We will use ::before and ::after to draw the connectors*/

.tree-diagram.horizontal-tree:not(.show-source) li::before, .tree-diagram.horizontal-tree:not(.show-source) li::after{
  position: absolute; top: auto; right: auto;
  border-top: 0;
  width: auto; height: auto;
  
  content: '';
  position: absolute; top: 50%; left: -12px;
  border-left: 0.06em solid #ccc;
  width: 12px; height: 50%;
}
.tree-diagram.horizontal-tree:not(.show-source) li::after{
  right: auto; left: -12px;
  border-left: 0;
  
  top: 0; bottom:auto;
  border-bottom: 0.06em solid blue;
  border-left:0.06em dashed green;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree-diagram.horizontal-tree:not(.show-source) li:only-child::after, .tree-diagram.horizontal-tree:not(.show-source) li:only-child::before {
   display: none;
}

/*Remove space from the top of single children*/
/*.tree-diagram.horizontal-tree:not(.show-source) li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree-diagram.horizontal-tree:not(.show-source) li:first-child::before, .tree-diagram.horizontal-tree:not(.show-source) li:last-child::after{
  /*  border: 0 none; */
/* border:0.06em solid red;*/
}
/*Adding back the vertical connector to the last nodes*/
.tree-diagram.horizontal-tree:not(.show-source) li:last-child::before{
  border-right:0;
  border-bottom: 0.06em solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree-diagram.horizontal-tree:not(.show-source) li:first-child::after{
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree-diagram.horizontal-tree:not(.show-source) ul ul::before{
  content: '';
  position: absolute; top: 50%; left: 0;
  border-top: 0.06em solid #ccc;
  width: 12px; height: 0;
}


.tree-diagram.horizontal-tree:not(.show-source) li p
{
  margin: 0px;
}

.tree-diagram.horizontal-tree:not(.show-source) li
{
  font-size: 11px;
}

.tree-diagram.horizontal-tree:not(.show-source) li a,
.tree-diagram.horizontal-tree:not(.show-source) li p:empty,
.tree-diagram.horizontal-tree:not(.show-source) li h1:empty,
.tree-diagram.horizontal-tree:not(.show-source) li h2:empty,
.tree-diagram.horizontal-tree:not(.show-source) li h3:empty,
.tree-diagram.horizontal-tree:not(.show-source) li h4:empty{
  border: 0.06em solid #ccc;
  margin:0;
  padding: 5px 10px;
  text-decoration: none;
  /*color: #666;*/
  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;*/
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree-diagram.horizontal-tree:not(.show-source) li a:hover, .tree-diagram.horizontal-tree:not(.show-source) li a:hover+ul li a {
  background: #c8e4f8; color: #000; border: 0.06em solid #94a0b4;
}
/*Connector styles on hover*/
.tree-diagram.horizontal-tree:not(.show-source) li a:hover+ul li::after, 
.tree-diagram.horizontal-tree:not(.show-source) li a:hover+ul li::before, 
.tree-diagram.horizontal-tree:not(.show-source) li a:hover+ul::before, 
.tree-diagram.horizontal-tree:not(.show-source) li a:hover+ul ul::before{
  border-color:  #94a0b4;
}


/* converted from https://codepen.io/talleyran/pen/eLbjRN */
.tree-diagram.horizontal-tree:not(.show-source) li {
   display: flex;
   align-items: center;
   margin-left: 24px;
}/*
 .tree-diagram.horizontal-tree:not(.show-source) li div {
   margin: 6px 0;
}
 .tree-diagram.horizontal-tree:not(.show-source) li:before {
   border-left: 0.06em solid #ddd;
   height: 100%;
   width: 0;
   top: 0;
   left: -12px;
}
 .tree-diagram.horizontal-tree:not(.show-source) li:first-child:before {
   height: 50%;
   top: 50%;
}
 .tree-diagram.horizontal-tree:not(.show-source) li:last-child:before {
   height: 50%;
   bottom: 50%;
   top: auto;
}
 .tree-diagram.horizontal-tree:not(.show-source) li:after, .tree-diagram.horizontal-tree:not(.show-source) li ul:after {
   border-top: 0.06em solid #ddd;
   height: 0;
   width: 12px;
   top: 50%;
   left: -12px;
}
 .tree-diagram.horizontal-tree:not(.show-source) li:only-child:before {
   content: none;
}
 .tree-diagram.horizontal-tree:not(.show-source) li ul:after {
   left: 0;
}
 .tree-diagram.horizontal-tree:not(.show-source) > li:only-child {
   margin-left: 0;
}
 .tree-diagram.horizontal-tree:not(.show-source) > li:only-child:before, .tree-diagram.horizontal-tree:not(.show-source) > li:only-child:after {
   content: none;
}*/

/* css for popup and expand effects */


.tree-diagram
{
}

.tree-diagram-wrapper
{
  position:relative;
}

.tree-expand-button,
.tree-popup-button
{
  padding:5px;
  border:0.06em solid #aaa;
  border-radius: 5px;
  width:26px;
  height:26px;
  font-size:12px;
  display:none;
  position: absolute;
  text-align:center;
  right:10px;
  top:10px;
}

.tree-popup-button
{
  right: 40px;
}

@media (min-width: 760px) {
  
  .tree-expand-button,
  .tree-popup-button
  {
    display:inline-block;
  }
  
  .tree-diagram-wrapper.tree-expanded .tree-diagram
  {
    position:absolute;
    width:151.61%;/*width:134.29%;*/
    top:0em;
    left:0px;
    z-index: 1;
    background: #fff;
    padding: 1em;
    
    border:0.06em solid #fafafa;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.1);
  }
  
  /* adjust left: for diagrams in activity structure */
  .activity-structure-col .tree-diagram-wrapper.tree-expanded .tree-diagram
  {
    left:-13%;
  }
  article.activity-article .activity-structure-col .tree-diagram-wrapper.tree-expanded .tree-diagram
  {
    left:0px;
  }
}

.tree-diagram ul
{
  margin-top:0px;
}

_::-webkit-full-page-media, _:future, :root .tree-diagram ul li a {
    padding: 0.5em 0.93em;
}


body.has-expanded-treediagram .l-page
{
  overflow:visible;
}