/* V10.8.1623 (TEST): Search Skills box on Browse All Skills + View-As banner offset for the new shell. Off: delete this file's <link> in student-portal/index.html. */
/* --- Search Skills --- */
.prx-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--s2-line,#e3e6ef);margin-bottom:.9rem}
.prx-bar .prx-tabs{border-bottom:0;margin-bottom:0;flex:1 1 auto;min-width:0}
.ssr{position:relative;flex:0 1 21rem;min-width:13rem;margin:0 0 .45rem}
.ssq{width:100%;box-sizing:border-box;height:2.6rem;padding:0 2.5rem 0 2.6rem;border:1px solid var(--s2-line,#d8dcea);border-radius:99px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7390' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .85rem 50%;color:var(--s2-ink,#13204a);font:inherit;font-size:.95rem;outline:0;-webkit-appearance:none;appearance:none}
.ssq::placeholder{color:#7a819a}
.ssq:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.22)}
.ssx{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border:0;border-radius:50%;background:#eef0f7;color:#33406b;font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.ssx[hidden]{display:none}
.ssx:hover,.ssx:focus-visible{background:#dde2f2;outline:2px solid #3b82f6;outline-offset:1px}
.prx-br.ssq-on .prx-gr,.prx-br.ssq-on .prx-strands{display:none}
.prx-sr{padding:1rem 1.1rem;margin:0 0 1rem}
.prx-sr[hidden]{display:none}
.prx-sr .ssc{margin:0 0 .5rem;color:var(--s2-sub,#5b6485);font-size:.92rem;font-weight:600}
.prx-sr ul{list-style:none;margin:0;padding:0}
.prx-sr li{display:flex;align-items:center;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--s2-line,#e3e6ef)}
.prx-sr li:first-child{border-top:0}
.prx-sr .prx-sk{flex:1 1 auto;min-width:0;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.prx-sr .ssm{display:block;font-size:.82rem;color:var(--s2-sub,#5b6485);font-weight:500;margin-top:.1rem}
.prx-gchip{flex:none;padding:.18rem .65rem;border-radius:99px;background:#eaf1ff;color:#23407c;font-size:.8rem;font-weight:700;white-space:nowrap}
.prx-nosk{text-align:center;padding:2rem 1rem}
.prx-nosk b{display:block;font-size:1.2rem;margin-bottom:.35rem}
.prx-nosk p{margin:0 0 .9rem;color:var(--s2-sub,#5b6485)}
@media (max-width:640px){
 .prx-bar{display:block;border-bottom:0}
 .prx-bar .prx-tabs{border-bottom:1px solid var(--s2-line,#e3e6ef);margin-bottom:.6rem}
 .ssr{width:100%;flex:none;margin:0 0 .8rem}
 .ssq{font-size:16px}
 .prx-sr li{flex-wrap:wrap}
}
/* --- View-As banner (44px fixed purple bar): the new shell's header + sidebar sit fully below it, also after scrolling and after re-renders --- */
body:has(#vas1508-bar) .s2{min-height:calc(100vh - 44px)}
body:has(#vas1508-bar) .s2top{top:44px}
body:has(#vas1508-bar) .s2sidein{top:calc(5rem + 44px);height:calc(100vh - 5rem - 44px)}
body:has(#vas1508-bar) .s2m{min-height:calc(100vh - 5rem - 44px)}
@media (max-width:900px){ body:has(#vas1508-bar) .s2m{min-height:calc(100vh - 3.75rem - 44px)} }
body:has(#vas1508-bar) .s2ph,body:has(#vas1508-bar) .pw .ph{top:44px}