main > header, 
table thead th {
    background-color: #8f2370;
    border-color: #8f2370;
}
main > header .logo {
    top: 0;
    padding: 4em 0 1em;
    background: #fff;
    border: none;
}
main > header .logo::before {
    background: url('https://sendlocaloffer.southtyneside.gov.uk/media/1240/SEND-Logo-South-Tyneside/svg/logo-send-st.svg') #fff no-repeat center center;
    background-size: contain;
}
main > header .logo:hover, main > header .logo:active, main > header .logo:focus {
    border: none;
    background: #fff;
}
img {
    border-radius: 20px;
    box-shadow: 0 3px 8px 0 rgba(0,0,0,.3);
    margin-bottom: 1em;
}
.intro-imgs img {
    width: 49%;
    float: left;
}
.intro-imgs img:first-of-type {
    margin-right: 2%;
}

/* Flow Chart */

.flow-chart * {
    text-align: center;
    vertical-align: middle;
    border: none;
}
.flow-chart td {
    width:190px;
    height: 190px;
}
.flow-chart th {
    padding: 20px;
    border-radius: 50%;
}
.flow-chart td.top {
    border-top: none;
}
.flow-chart .top.right, .flow-chart .bottom.right {
    text-align: left;
}
.flow-chart .top.left, .flow-chart .top.right {
    vertical-align: bottom;
}
.flow-chart td.right {
    border-right: none;
}
.flow-chart td.bottom {
    border-bottom: none;
}
.flow-chart .top.left, .flow-chart .bottom.left {
    text-align: right;
}
.flow-chart .bottom.left, .flow-chart .bottom.right {
    vertical-align: top;
}
.flow-chart td.left {
    border-left: none;
}

/* Org Chart */

.org-chart {
    width: 900px;
    padding: 0 10px;
    margin: 0 auto;
    text-align: center;
    display: grid;
    gap: 16px;
    overflow: scroll;
}
.org-chart * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.org-chart .job {
    position: relative;
    border: 2px solid #cc2e9f;
    border-radius: 8px;
    padding: 1em 0.2em;
    text-align: center;
    font-size: 1.5em;
    place-self: flex-start center;
    width: 150px;
    overflow: visible;
}
.org-chart .job.dotted {
    border-style: dotted;
    border-width: 2px;
}
.org-chart {
        overflow-x: scroll;
}
.HWB {
    grid-area: 1 / 3 / 1 / 5;
}
.HWB::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 2px;
    height: 20px;
    background: #cc2e9f;
}
.SENDLO::after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 50%;
    width: 2px;
    height: 10px;
    background: #cc2e9f;
}
.SENDLO {
    grid-area: 2 / 3 / 2 / 5;
}
.SENDLO::before {
    content: "";
    position: absolute;
    bottom: -11px;
    left: -340px;
    width: 830px;
    height: 2px;
    background: #cc2e9f;
    right: 0;
}
.EDUCATION {
    grid-area: 3 / 2;
}
.HWB2 {
    grid-area: 3 / 3 / 3 / 5;
}
.org-chart .job.HWB2 {
    width: 300px;
}
.HWB2::before {
    content: "";
    position: absolute;
    bottom: -29px;
    left: -267px;
    width: 831px;
    height: 2px;
    background: #cc2e9f;
    right: 0;
}
.SC {
    grid-area: 3 / 5;
}
.JC {
    grid-area: 3 / 1;
}
.JC::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 2px;
    height: 11px;
    background: #cc2e9f;
}
.JC::after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 50%;
    width: 2px;
    height: 10px;
    background: #cc2e9f;
}
.PREPADU {
    grid-area: 3 / 6;
}
.PREPADU::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 2px;
    height: 11px;
    background: #cc2e9f;
}
.PREPADU::after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 50%;
    width: 2px;
    height: 10px;
    background: #cc2e9f;
}
.SENDlogo {
    grid-area: 4 / 3 / 4 / 5;
    position: relative;
    overflow: visible;
}
.SENDlogo img {
    box-shadow: none;
    border-radius: 0;
    width: 50%;
}
.SENDlogo::before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: -257px;
    width: 832px;
    height: 2px;
    background: #cc2e9f;
    right: 0;
}
@media screen and (max-width:600px) {
    .SENDlogo::before {
        bottom:124px;
        left:0;
    }
    .SENDlogo::after {
        bottom: 124px;
        left: 157px;
    }
}
.SENDlogo::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 158px;
    width: 2px;
    height: 6px;
    background: #cc2e9f;
}
.SENDS {
    grid-area: 5 / 1;
}
.HN {
    grid-area: 5 / 2;
}
.SENCON {
    grid-area: 5 / 3;
}
.CSC {
    grid-area: 5 / 4;
}
.ASC {
    grid-area: 5 / 5;
}
.PH {
    grid-area: 5 / 6;
}
.SENDS::before, .PH::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    width: 2px;
    height: 13px;
    background: #cc2e9f;
}

.org-chart-wrapper.overflowing {
    position: relative;
    overflow: hidden;
    border: 1px solid #CCC;
    padding: 0;
    max-width: 960px;
}

.org-chart-wrapper.overflowing .scrollpane {
    padding-top: 4em;
}

.org-chart-wrapper.overflowing .scrollpane::before {
    content: '\f337';
    font-family: 'FontAwesome';
    font-weight: 300;
    font-size: 1.6em;
    line-height: 1.25em;
    padding: 0.625em;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #EEE;
    border-bottom: 1px solid #CCC;
}

.dark-mode .org-chart-wrapper.overflowing .scrollpane::before {
    background-color: #222;
}

.org-chart-wrapper.overflowing .scrollpane > div {
    border: 2em solid transparent;
    box-sizing: content-box;
}

.org-chart-wrapper.overflowing::before,
.org-chart-wrapper.overflowing::after {
    content: '';
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1.5em;
    background-image: linear-gradient( 90deg, rgba(0,0,0, 0), rgba(0,0,0,0.1) );
}

.org-chart-wrapper.overflowing::before {
    left: 0;
    right: auto;
    background-image: linear-gradient( 90deg, rgba(0,0,0, 0.1), rgba(0,0,0,0) );
}

.dark-mode .org-chart-wrapper.overflowing::after { background-image: linear-gradient( 90deg, rgba(0,0,0, 0), rgba(0,0,0,0.8) ); }
.dark-mode .org-chart-wrapper.overflowing::before { background-image: linear-gradient( 90deg, rgba(0,0,0, 0.8), rgba(0,0,0,0) ); }

.dark-mode .org-chart-wrapper.overflowing::after {
    background-image: linear-gradient( 90deg, rgba(0,0,0, 0), rgba(0,0,0,1) );
}

.box > p > span {
    font-weight: bold;
    font-size: 2em;
}