ol.trace-code {justify-self: start; /*background-color: #BEF648;*/}
pre.code { justify-self: center;}

.yoosofan-replace-sub-step{}

div#ps-desc-i-id {
  display: grid;
  grid-template-areas:
    'h1 h1 h1 h1'
    'shdesc shdesc shdesc shdesc'
    'shcode shcode shcode shcode'
    'p0desc p0desc p1desc p1desc'
    'p0code p0code p1code p1code'
    'out10 out12 out14 out16'
    ;
}
div#ps-desc-i-id > h1:nth-of-type(1){ grid-area: h1;}
div#ps-desc-i-id > p:nth-of-type(1){ grid-area: shdesc;}
div#ps-desc-i-id > pre:nth-of-type(1){ grid-area: shcode;}
div#ps-desc-i-id > p:nth-of-type(2){ grid-area: p0desc;}
div#ps-desc-i-id > p:nth-of-type(3){ grid-area: p1desc;}
div#ps-desc-i-id > pre:nth-of-type(2){ grid-area: p0code;}
div#ps-desc-i-id > pre:nth-of-type(3){ grid-area: p1code;}
div#ps-desc-i-id > ol:nth-of-type(1){ grid-area: out10; background-color: #BEF648; }
div#ps-desc-i-id > ol:nth-of-type(2){ grid-area: out12; background-color: #BEF648;}
div#ps-desc-i-id > ol:nth-of-type(3){ grid-area: out14; background-color: #EE9898;}
div#ps-desc-i-id > ol:nth-of-type(4){ grid-area: out16; background-color: #EE9898;}

div#ps-desc-ii-id {
  display: grid;
  grid-template-areas:
    'h1 h1 h1 h1'
    'shdesc shdesc shdesc shdesc'
    'shcode shcode shcode shcode'
    'p0desc p0desc p1desc p1desc'
    'p0code p0code p1code p1code'
    'out10 out12 out14 out16'
    ;
}
div#ps-desc-ii-id > h1:nth-of-type(1){ grid-area: h1;}
div#ps-desc-ii-id > p:nth-of-type(1){ grid-area: shdesc;}
div#ps-desc-ii-id > pre:nth-of-type(1){ grid-area: shcode;}
div#ps-desc-ii-id > p:nth-of-type(2){ grid-area: p0desc;}
div#ps-desc-ii-id > p:nth-of-type(3){ grid-area: p1desc;}
div#ps-desc-ii-id > pre:nth-of-type(2){ grid-area: p0code;}
div#ps-desc-ii-id > pre:nth-of-type(3){ grid-area: p1code;}
div#ps-desc-ii-id > ol:nth-of-type(1){ grid-area: out10; background-color: #BEF648; }
div#ps-desc-ii-id > ol:nth-of-type(2){ grid-area: out12; background-color: #BEF648; }
div#ps-desc-ii-id > ol:nth-of-type(3){ grid-area: out14; background-color: #EE9898;}
div#ps-desc-ii-id > ol:nth-of-type(4){ grid-area: out16; background-color: #EE9898;}



div#ps-mcode-id {
  display: grid;
  grid-template-areas:
    'h1 h1 h1 h1'
    'shdesc shdesc shdesc shdesc'
    'shcode shcode shcode shcode'
    'p0desc p0desc p1desc p1desc'
    'p0code p01code p1code p11code'
    'out10 out12 out14 out16'
    ;
}
div#ps-mcode-id > h1:nth-of-type(1){ grid-area: h1;}
div#ps-mcode-id > p:nth-of-type(1){ grid-area: shdesc;}
div#ps-mcode-id > pre:nth-of-type(1){ grid-area: shcode;}
div#ps-mcode-id > p:nth-of-type(2){ grid-area: p0desc;}
div#ps-mcode-id > p:nth-of-type(3){ grid-area: p1desc;}
div#ps-mcode-id > pre:nth-of-type(2){ grid-area: p0code;}
div#ps-mcode-id > pre:nth-of-type(3){ grid-area: p01code;}
div#ps-mcode-id > pre:nth-of-type(5){ grid-area: p11code;}
div#ps-mcode-id > pre:nth-of-type(4){ grid-area: p1code;}
div#ps-mcode-id > ol:nth-of-type(1){ grid-area: out10; background-color: #BEF648; }
div#ps-mcode-id > ol:nth-of-type(2){ grid-area: out12; background-color: #BEF648; }
div#ps-mcode-id > ol:nth-of-type(3){ grid-area: out14; background-color: #EE9898;}
div#ps-mcode-id > ol:nth-of-type(4){ grid-area: out16; background-color: #EE9898;}

div#simplyfing-race-conditions-id {
  display: grid;
  grid-template-areas:
    'h1 h1'
    'out10 p0code'
    ;
}
div#simplyfing-race-conditions-id > h1:nth-of-type(1){ grid-area: h1;}
div#simplyfing-race-conditions-id > pre:nth-of-type(1){ grid-area: p0code;}
div#simplyfing-race-conditions-id > ol:nth-of-type(1){ grid-area: out10;}

div#first-try-id {
  display: grid;
  grid-template-areas:
    'h1 h1 '
    'shdesc shdesc'
    'shcode shcode'
    'p0desc p1desc'
    'p0code p1code'
    ;
}
div#first-try-id > h1:nth-of-type(1){ grid-area: h1;}
div#first-try-id > p:nth-of-type(1){ grid-area: shdesc; justify-self: center;}
div#first-try-id > pre:nth-of-type(1){ grid-area: shcode; justify-self: center;}
div#first-try-id > p:nth-of-type(2){ grid-area: p0desc;}
div#first-try-id > p:nth-of-type(3){ grid-area: p1desc;}
div#first-try-id > pre:nth-of-type(2){ grid-area: p0code;}
div#first-try-id > pre:nth-of-type(3){ grid-area: p1code;}


div#second-try-id {
  display: grid;
  grid-template-areas:
    'h1 h1 '
    'shdesc shdesc'
    'shcode shcode'
    'p0desc p1desc'
    'p0code p1code'
    ;
}
div#second-try-id > h1:nth-of-type(1){ grid-area: h1;}
div#second-try-id > p:nth-of-type(1){ grid-area: shdesc; justify-self: center;}
div#second-try-id > pre:nth-of-type(1){ grid-area: shcode; justify-self: center;}
div#second-try-id > p:nth-of-type(2){ grid-area: p0desc;}
div#second-try-id > p:nth-of-type(3){ grid-area: p1desc;}
div#second-try-id > pre:nth-of-type(2){ grid-area: p0code;}
div#second-try-id > pre:nth-of-type(3){ grid-area: p1code;}


div#second-try-run-id {
  display: grid;
  grid-template-areas:
    'h1 h1 '
    'shdesc shdesc'
    'shcode shcode'
    'p0desc p1desc'
    'p0code p1code'
    ;
}
div#second-try-run-id > h1:nth-of-type(1){ grid-area: h1;}
div#second-try-run-id > p:nth-of-type(1){ grid-area: shdesc; justify-self: center;}
div#second-try-run-id > pre:nth-of-type(1){ grid-area: shcode; justify-self: center;}
div#second-try-run-id > p:nth-of-type(2){ grid-area: p0desc;}
div#second-try-run-id > p:nth-of-type(3){ grid-area: p1desc;}
div#second-try-run-id > pre:nth-of-type(2){ grid-area: p0code;}
div#second-try-run-id > pre:nth-of-type(3){ grid-area: p1code;}


div#second-try-trace-id {
  display: grid;
  grid-template-areas:
    'h1 h1 '
    'shcode .'
    'p0code out10'
    'p1code .'
    ;
}
div#second-try-trace-id > h1:nth-of-type(1){ grid-area: h1;}
div#second-try-trace-id > pre:nth-of-type(1){ grid-area: shcode; justify-self: center;}
div#second-try-trace-id > pre:nth-of-type(2){ grid-area: p0code;}
div#second-try-trace-id > pre:nth-of-type(3){ grid-area: p1code;}
div#second-try-trace-id > ol:nth-of-type(1){ grid-area: out10; background-color: #BEF648; }

div#third-try-id {
  display: grid;
  grid-template-areas:
    'h1 h1 '
    'shdesc shdesc'
    'shcode shcode'
    'p0desc p1desc'
    'p0code p1code'
    ;
}
div#third-try-id > h1:nth-of-type(1){ grid-area: h1;}
div#third-try-id > p:nth-of-type(1){ grid-area: shdesc; justify-self: center;}
div#third-try-id > pre:nth-of-type(1){ grid-area: shcode; justify-self: center;}
div#third-try-id > p:nth-of-type(2){ grid-area: p0desc;}
div#third-try-id > p:nth-of-type(3){ grid-area: p1desc;}
div#third-try-id > pre:nth-of-type(2){ grid-area: p0code;}
div#third-try-id > pre:nth-of-type(3){ grid-area: p1code;}

div#software-cs-turn-i-j-id {
  display: grid;
  grid-template-areas:
    'h1 h1 '
    'shcode shcode'
    'p0desc p1desc'
    'sh2code sh2code'
    'p0code p1code'
    ;
}
div#software-cs-turn-i-j-id > h1:nth-of-type(1){ grid-area: h1;}
div#software-cs-turn-i-j-id > pre:nth-of-type(1){ grid-area: shcode; justify-self: center;}
div#software-cs-turn-i-j-id > pre:nth-of-type(2){ grid-area: p0desc;}
div#software-cs-turn-i-j-id > pre:nth-of-type(3){ grid-area: p1desc;}
div#software-cs-turn-i-j-id > pre:nth-of-type(4){ grid-area: sh2code;}
div#software-cs-turn-i-j-id > pre:nth-of-type(5){ grid-area: p0code;}
div#software-cs-turn-i-j-id > pre:nth-of-type(6){ grid-area: p1code;}

div#software-cs-need-id {
  display: grid;
  grid-template-areas:
    'h1 h1 '
    'shcode shcode'
    'p0code p1code'
    ;
}
div#software-cs-need-id > h1:nth-of-type(1){ grid-area: h1;}
div#software-cs-need-id > pre:nth-of-type(1){ grid-area: shcode; justify-self: center;}
div#software-cs-need-id > pre:nth-of-type(2){ grid-area: p0code;}
div#software-cs-need-id > pre:nth-of-type(3){ grid-area: p1code;}

div#software-cs2processes-id {
  display: grid;
  grid-template-areas:
    'h1 h1 '
    'shcode shcode'
    'p0code p1code'
    ;
}
div#software-cs2processes-id > h1:nth-of-type(1){ grid-area: h1;}
div#software-cs2processes-id > pre:nth-of-type(1){ grid-area: shcode; justify-self: center;}
div#software-cs2processes-id > pre:nth-of-type(2){ grid-area: p0code;}
div#software-cs2processes-id > pre:nth-of-type(3){ grid-area: p1code;}

div#software-cs-n-processes-ii-trace-id {
  display: grid;
  grid-template-areas:
    'shcode out10'
    ;
}
div#software-cs-n-processes-ii-trace-id > h1:nth-of-type(1){ grid-area: h1;}
div#software-cs-n-processes-ii-trace-id > pre:nth-of-type(1){ grid-area: shcode; justify-self: center;}
div#software-cs-n-processes-ii-trace-id > ol:nth-of-type(1){ grid-area: out10; background-color: #EE9898; align-self: center;}

div#hardware-cs-i-trace-id {
  display: grid;
  grid-template-areas:
    'p1code out10'
    'p2code out10'
    'p3code out10'
    ;
}
div#hardware-cs-i-trace-id > h1:nth-of-type(1){ grid-area: h1;}
div#hardware-cs-i-trace-id > pre:nth-of-type(1){ grid-area: p1code; justify-self: center;}
div#hardware-cs-i-trace-id > pre:nth-of-type(2){ grid-area: p2code; justify-self: center;}
div#hardware-cs-i-trace-id > pre:nth-of-type(3){ grid-area: p3code; justify-self: center;}
div#hardware-cs-i-trace-id > ol:nth-of-type(1){ grid-area: out10; background-color: #EE9898; align-self: center;}