#schoolList{}
#schoolList span{margin:0 0.2em;}
#schoolList li{display:flex;align-items:center;line-height:1.1;}
#schoolList .en{font-size:13px!important;}
.dropdown{position:relative;display:inline-block;margin:1rem;}
.dropdown-button{padding:0.4em 0.8em;min-height:40px;border:1px solid #ccc;background:white;cursor:pointer;border-radius:6px;}
.dropdown-button span{font-size:1em!important;}
.dropdown ul{position:absolute;list-style:none;margin:0;padding:0;border:1px solid #ccc;background:var(--theme-ui-colors-white);display:none;max-height:200px;overflow-y:auto;z-index:1000;}
.dropdown ul li{cursor:pointer;}
.dropdown ul li:hover{background-color:#f0f0f0;}
.dropdown span,.dropdown span span{font-size:1.1em!important;}
.dropdown.open span{}
.dropdown.open ul{display:block;}

#chart-tooltip{opacity:0;position:absolute;text-align:left;padding:0.5rem 0.75rem;font-size:0.8em;background:#1f2937;color:white;border:0px;border-radius:0.5rem;pointer-events:none;transition:opacity 0.2s;}
.axis-label{font-size:1.5em;font-weight:700;color:#4b5563;}
.axis-label.font-medium{font-size:1em;}
.legend-text{font-size:0.9em;fill:#374151;}
#no-vacancy-msg{padding:1em 0;text-align:center;font-size:1.2em;font-weight:500;}

#chart-container{width:70%;margin:auto;}
#chart{margin:1em auto;}
.year{display:block;font-size:1.4em;border-bottom:1px solid #f9f9f8;padding-bottom:0.2em;margin-bottom:0;}

.phase-details{font-size:0.9em;margin-bottom:1em;width:100%;display:block;}
.phase-head,.phase-group{display:flex;flex-grow:1;align-items:center;}
.phase-group.active{background:var(--theme-ui-colors-white);opacity:1!important;}
.phase-group.active .phase-item{border-bottom:2px solid var(--theme-ui-colors-main);}
.phase-head{font-weight:700;background:var(--theme-ui-colors-secondary);color:var(--theme-ui-colors-white);}
.phase-item{flex-basis:100%;padding:0.6em;line-height:1.2;border-bottom:1px solid var(--theme-ui-colors-secondary);}
.phase-item:first-child{font-weight:500;}



@media (min-width:1024px) and (max-width:1279px){
#chart-container{width:80%;}
}

@media (min-width:200px) and (max-width:768px){
#chart-container{width:100%;}
.phase-details{font-size:0.8em;text-align:left;}
#schoolList li{display:block;}
.dropdown span,.dropdown span span{font-size:1em!important;}
.axis-label{font-size:1.4em;}
}