/* based on the wonderful https://www.cssscript.com/process-flow-diagram/ */

/* All parameters */
:root {
  --linethick: 2px;
  --linewidth: 1em;
}

/* node style */
.process_diagram li > div {
  background-color:#eee;
  color:#333;
  border-style:solid;
  border-color:#777;
  text-align:left;
  border-radius: 7px;
  padding: 0px;
}

.process_diagram div.header {
  background-color: #888;
  color: white;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 3px;
  padding-bottom: 3px;
}

.process_diagram div.body {
  padding: 1em;
}

/* connecting lines between nodes */
.process_diagram li:before,
.process_diagram li:after,
.process_diagram ul:before,
.process_diagram ul:after,
.process_diagram div:before,
.process_diagram div:after {
  border-style: solid;
  border-color: #777;
}

/* debug connecting lines * /
.process_diagram div:before,
.process_diagram div:after {border-color:green;}
.process_diagram ul:before,
.process_diagram ul:after {border-color:red;}
/**/

/************************************************************/

/* positioning for the diagram */
.process_diagram,
.process_diagram ol,
.process_diagram ul,
.process_diagram li {margin:0 auto; padding:0; display:block; list-style:none; text-align:center; vertical-align:middle;}

.process_diagram li {position:relative;}

.process_diagram,
.process_diagram ol {display:table; width:100%; border-collapse:collapse; }

.process_diagram > li,
.process_diagram ol > li {display:table-cell; }

.process_diagram > li,
.process_diagram ol > li,
.process_diagram ul > li {padding:.5em 0}

/* a dash before and behind all uls */
.process_diagram ul {position:relative; padding:0 var(--linewidth);}
.process_diagram ul:before,
.process_diagram ul:after {position:absolute; content:""; top:50%; width: var(--linewidth); display:block; border-width:var(--linethick) 0 0; }
.process_diagram ul:before {left:0;}
.process_diagram ul:after {right:0;}

/* put connecting vertical lines */
.process_diagram ul > li:after,
.process_diagram ul > li:before {position:absolute; content:""; top:0; bottom:0; width:var(--linewidth); height:100%; display:block;}
.process_diagram ul > li:before {left:0; border-width:0 0 0 var(--linethick);}
.process_diagram ul > li:after {right:0; border-width:0 var(--linethick) 0 0;}

/* correct length and position of dashes for first and last li-item in ul */
.process_diagram ul > li:first-child:before,
.process_diagram ul > li:first-child:after {top:50%; bottom:auto; height:50%; }
.process_diagram ul > li:last-child:before,
.process_diagram ul > li:last-child:after {top:0; bottom:auto; height:50%;}
.process_diagram ul > li:first-child:last-child:before,
.process_diagram ul > li:first-child:last-child:after {top:0; bottom:auto; height:50%;}

/* put left and right dashes */
.process_diagram li > div {position:relative; margin:0 var(--linewidth); padding: 0; border-width:var(--linethick); }
.process_diagram li > div:before,
.process_diagram li > div:after {content:""; top:50%; width:var(--linewidth); position:absolute; border-width:var(--linethick) 0 0; height:50%;}
.process_diagram li > div:after {right: calc(0em - var(--linewidth)); margin-right: calc(0px - var(--linethick));}
.process_diagram li > div:before {left: calc(0em - var(--linewidth)); margin-left: calc(0px - var(--linethick));}
.process_diagram li:last-child > div:after,
.process_diagram li:last-child > div:before {top:0; border-width: 0 0 var(--linethick);}

/* remove dash for the very first/last nodes keeping margin and padding */
.process_diagram > li:first-child > div:before,
.process_diagram > li:first-child > ul:before,
.process_diagram > li:first-child > ul > li:before,
.process_diagram > li:first-child > ul > li > div:first-child:before,
.process_diagram > li:first-child > ul > li > ol > li:first-child > div:before,
.process_diagram > li:last-child > div:after,
.process_diagram > li:last-child > ul:after {border:0;}

/* remove double dashes */
ol.process_diagram > li > div:after,
.process_diagram ol > li > div:after,
ol.process_diagram > li > ul:after,
.process_diagram ol > li > ul:after {display:none}
ol.process_diagram > li > div,
.process_diagram ol > li > div {margin-right: 0;}
ol.process_diagram > li > ul,
.process_diagram ol > li > ul {padding-right: 0;}

/* last dashes are not double and need to be recovered */
ol.process_diagram > li:last-child > div:after,
.process_diagram ol > li:last-child > div:after,
ol.process_diagram > li:last-child > ul:after,
.process_diagram ol > li:last-child > ul:after {display:block;}
ol.process_diagram > li:last-child > div,
.process_diagram ol > li:last-child > div {margin-right: var(--linewidth);}
ol.process_diagram > li:last-child > ul,
.process_diagram ol > li:last-child > ul {padding-right: var(--linewidth); }