.scrolly-container{width:90%;position:relative;margin:6em auto;}
.scrolly-graphic{width:100%;aspect-ratio:4 / 3;position:sticky;background-color:#fff;box-shadow: 0 0 100em 0 rgba(0, 0, 0, 0.4);flex-basis:48%;top:0;height:100vh;align-self:flex-start;aspect-ratio:auto;z-index:1;color:initial;}
.scrolly-steps{position:relative;z-index:2;padding-bottom:60vh;}
#procedure-chart-container{width:100%;height:50vh;padding:1rem;box-sizing:border-box;}
.scroll-step{padding:1.4em 2em 1em 2.4em;margin-bottom:80vh;transition:background-color 0.3s ease;opacity:0.6;line-height:1.6;text-align:center;}
.scroll-step.is-active{color:var(--theme-ui-colors-white);opacity:1;}
.scroll-step h3{font-size:1.4em;margin:0 0 0.4em 0;color:#ffe400;}

#procedure-chart-container > *{position:absolute;top:0;left:0;width:100%;height:100%;padding:2em;box-sizing:border-box;transition:opacity 0.4s ease-in-out;}
#summary-view{display:flex;flex-direction:column;justify-content:center;align-items:center;}
#summary-view h3{font-size:1.2em;padding:0.4em 0.8em;text-align:center;background:#ffe400;color:#000;border-radius:0.3em;}
#summary-view ul{list-style:none;padding:4em 0;margin-top:-5em;width:100%;}
#summary-view li{padding:0.5rem 0;border-bottom:1px solid #e5e7eb;}
#summary-view li:last-child{border-bottom:none;}
#summary-view .summary-phase{font-weight:600;display:block;margin-bottom:0.25rem;}
#summary-view .summary-text{line-height:1.5;}

.y-axis .domain,.y-axis .tick line{display:none;}
.y-axis .tick text{font-size:1.5em;font-weight:700;}
.bar-label{font-size:1em;font-weight:700;fill:#fff;}
.vacancy-label{font-size:1.4em;font-weight:700;fill:#fff;}
.phase-group.phase-2CS .vacancy-label{font-size:1em;font-weight:700;}
.x-axis{display:none;}
.highlight-text{padding:0.2em 0.4em;margin:0 0.2em;font-weight:500;font-size:0.9em;line-height:1;white-space:nowrap;border-radius:0.2em;}
.vacancy-color{background:#eff2fa;color:#000;}
.taken-color{background:#36d989;color:#000;}
.oversub-color{background:#fa1545;color:#fff;}

@media (min-width:900px){
.scrolly-container{display:flex;justify-content:space-between;}
.scrolly-steps{flex-basis:40%;z-index:1;padding-bottom:0;}
.scroll-step{margin:50vh 0;}
}

@media (min-height:200px) and (max-height:700px) and (orientation:landscape) {
#SchoolGuide{padding:0!important;}
#procedure-chart-container{height:70vh;}
.scrolly-container{width:100%;margin:1em auto;}
.scrolly-graphic{flex-basis:60%;}
.scrolly-steps{flex-basis:36%;padding-right:4%;}
}


@media (min-width:200px) and (max-width:768px){
.scrolly-container{width:100%;}
.scrolly-graphic{box-shadow:none;border:none;border-radius:0.6em;}
#procedure-chart-container{h1eight:50vh;}
#procedure-chart-container > *{padding:1em;height:auto;top:4em;}
.scroll-step{padding:1.4em 1em 0.6em 1.4em;backdrop-filter:blur(0.3em);border:4px solid #ffe400;background:rgba(239,243,249,0.3);width:90%;margin-left:auto;margin-right:auto;color:#000!important;border-radius:0.8em;}
.scroll-step h3{font-size:1.2em;margin:0 auto;text-align:center;color:#000;}
#summary-view{align-items:start;}
.vacancy-label{font-size:1em;}
}