/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename-dev.css, then process with Laravel Mix (1. run `sudo npm install` 2. Configure with `webpack.mix.js` 3. `npm run watch` to constantly monitor and compile into prod/)

*/.c-process-diagram{display:grid;gap:var(--spacing-l-1);justify-content:center;text-align:center}.c-process-diagram__block{align-items:center;display:flex;gap:var(--spacing-m);justify-content:center;width:45%}.c-process-diagram__row{display:flex;gap:var(--spacing-s-x);justify-content:center}.c-process-diagram__row--2-blocks{justify-content:space-between}.c-process-diagram__row--2-blocks .c-process-diagram__block{flex-basis:50%}.c-process-diagram .c-process-diagram__icon-top{position:absolute;top:-.6em}.c-process-diagram__icon-left{display:none}[class*=c-process-diagram-arrow],[class*=c-process-diagram-connector]{--connector-width:7.8%;--border-width:1px;--top-connector:-115%;position:relative}.c-process-diagram-arrow-block-start svg{left:50%;position:absolute;top:0;transform:translate(-50%,-75%)}.c-process-diagram-arrow-inline-start svg{left:-16%;position:absolute;top:50%;transform:translate(calc(50% - 1px),-50%) rotate(-90deg);z-index:var(--z-index-below-body)}@media (max-width:767px){.c-process-diagram-arrow-inline-start svg{display:none}}@media (min-width:500px){[class*=c-process-diagram-arrow],[class*=c-process-diagram-connector]{--connector-width:11.3%}.c-process-diagram__row{gap:var(--spacing-m)}}@media (max-width:1023px){.c-process-diagram--column .c-process-diagram__row{flex-direction:column;gap:var(--spacing-l-4)}.c-process-diagram--column .c-process-diagram__block{width:100%}}@media (min-width:1024px){[class*=c-process-diagram-arrow],[class*=c-process-diagram-connector]{--connector-width:9.75%;--top-connector:-107%}.c-process-diagram .c-process-diagram__icon-left{display:unset;left:1em;position:absolute;top:calc(50% + .25em)}}.c-process-diagram{padding-block-start:var(--spacing-s-2);padding-inline:var(--spacing-l)}.c-process-diagram ol{padding-inline-start:0}.c-process-diagram li{padding-block-end:0}.c-process-diagram__block{padding:var(--spacing-m) var(--spacing-s)!important}.c-process-diagram--column .c-process-diagram__block{padding:var(--spacing-l) var(--spacing-l)!important}@media (min-width:650px){.c-process-diagram__block{padding:var(--spacing-l) var(--spacing-l)!important}}.c-process-diagram__block{background:#fff;border:1px solid var(--colour-grey-light-1);border-radius:var(--border-radius-l);box-shadow:var(--box-shadow-s-light-b-3);font-weight:var(--font-family-main-weight-medium);line-height:1.4}.c-process-diagram [class*=c-process-diagram__icon]{background:#fff;font-size:var(--icon-size-m)}.c-process-diagram li{list-style-type:none}.c-process-diagram a{color:#000;text-decoration-color:rgba(0,0,0,.2)}.c-process-diagram-connector-inline-end:after,.c-process-diagram-connector-inline-start:before{background:linear-gradient(to bottom,#fff 0,#fff calc(100% - var(--border-width)*2),#fff calc(100% - var(--border-width)*2),var(--colour-red) calc(100% - var(--border-width)*2));content:"";height:50%;position:absolute;top:0;width:50%;z-index:var(--z-index-below-body)}.c-process-diagram-connector-inline-start:before{left:calc(0% - var(--connector-width) - var(--border-width))}.c-process-diagram-connector-inline-end:after{right:calc(0% - var(--connector-width) - var(--border-width))}.c-process-diagram-arrow-inline-start:before{border:var(--border-width) solid var(--colour-red);content:"";left:-50%;position:absolute;top:calc(50% - var(--border-width));width:50%;z-index:var(--z-index-below-body)}.c-process-diagram-arrow-block-end:after,.c-process-diagram-arrow-block-start:before{border:var(--border-width) solid var(--colour-red);content:"";height:100%;left:calc(50% - var(--border-width));position:absolute;top:calc(var(--top-connector) + var(--border-width)*2);z-index:var(--z-index-below-pseudo-arrows)}.c-process-diagram svg{color:var(--colour-red);font-size:1.5em}@media (max-width:1023px){.c-process-diagram--column .c-process-diagram-connector-inline-end:before,.c-process-diagram--column .c-process-diagram__block:last-child:before{content:unset}.c-process-diagram--column .c-process-diagram-connector-inline-end:after{background:unset;border-inline-end:calc(var(--border-width)*2) solid var(--colour-red);height:100%;left:0;top:100%}}