@import url('https://fonts.googleapis.com/css2?family=K2D:wght@700&display=swap');

.csp-header { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; max-width:1140px !important; background:#dedede; border-radius:35px; padding:0px 18px; margin-top:16px; margin-bottom:20px; font-family:'K2D',sans-serif; color:#777b83; }
.classic-page .csp-header { margin-bottom:0; }
.csp-header-identity { display:flex; align-items:center; gap:14px; min-width:0; font-size:16px; line-height:1.3; }
.csp-header-logo { display:block; flex:none; width:40px; height:40px; background:url("images/logo-icon.png") center / contain no-repeat; }
.csp-header-identity strong { font-weight:500; }
.csp-header-title { display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:0; color:var(--csp-title-color, #4c9f95); font:700 30px/1.2 'K2D',sans-serif; padding:3px 6px; margin-top: 8px; margin-bottom: -8px; }
/* The legacy .show rule must not change the dropdown toggle from flex to block. */
.csp-header .csp-header-title, .csp-header .csp-header-title.show { display:flex !important; }
.csp-header--vce .csp-header-title { --csp-title-color:#e94b8b; }
.csp-header-title svg { display:block; flex:none; width:20px; height:20px; fill:none; stroke:#fff; stroke-width:3; transform:none; background-color: currentColor;
    border-radius: 15px; outline: 7px solid #dedede;}
.csp-header-actions { display:flex; justify-content:flex-end; align-items:center; gap:9px; }
.csp-header-icon,.csp-header-avatar { flex:none; width:40px; height:40px; border-radius:50%; padding:0; display:grid; place-items:center; }
.csp-header-icon { background:#ffc66a; border:1px solid #fff !important; outline:2px solid #ffc66a !important; color:white; }
.csp-header-info { font:bold 34px/1 sans-serif; }
.csp-header-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:3.5; stroke-linecap:round;  }
.csp-header-avatar { border:0; background: #dedede; overflow:hidden;  border:1px solid #fff !important; outline:2px solid #ffc66a !important; color:white;  }
.csp-header-avatar img { width:100%; height:100%; object-fit:cover; }
.csp-avatar-fallback { width:28px; fill:#ffc66a; }
.csp-header .dropdown-menu { min-width:190px; padding:8px 0; font-size:14px; border:0; border-radius:12px; box-shadow:0 8px 28px rgb(0 0 0 / 18.7%); z-index:1030; }
.csp-header .dropdown-item { padding:7px 16px; }
.csp-header .dropdown-item[aria-current] { background:#f4f4f5; font-weight:700; }
.csp-header button:focus-visible { outline:3px solid #405e80; outline-offset:4px; }
@media(max-width:991px) { .csp-header-identity { font-size:14px; gap:10px; } .csp-header-title { font-size:26px; } }
@media(max-width:767px) { .csp-header { width:calc(100% - 24px); padding:12px 14px; border-radius:20px; grid-template-columns:1fr auto; gap:12px 8px; } .csp-header-identity { grid-column:1/-1; } .csp-header-title { font-size:26px; padding:0; gap:2px; } }

.csp-header--course .csp-header-title { --csp-title-color:#d05e64; }
.csp-header--classic .csp-header-title { --csp-title-color:#3a8a80; }
.csp-header--play .csp-header-title { --csp-title-color:#cd6028; }
.csp-header--downloads .csp-header-title { --csp-title-color:#347096; }
.csp-header--folio .csp-header-title { --csp-title-color:#4b50a0; }
.csp-header--connect .csp-header-title { --csp-title-color:#666666; }
.dropdown-divider {
    height: 10px !important;
    background: #FFFFFF;
    background: linear-gradient(0deg, #FFFFFF 0%, #D0D0D0 100%);
}

.csp-header-switcher .csp-feature-link--course { --feature-color:#d05e64; }
.csp-header-switcher .csp-feature-link--classic { --feature-color:#4c9f95; }
.csp-header-switcher .csp-feature-link--play { --feature-color:#cd6028; }
.csp-header-switcher .csp-feature-link--vce { --feature-color:#e94b8b; }
.csp-header-switcher .csp-feature-link--downloads { --feature-color:#347096; }
.csp-header-switcher .csp-feature-link--folio { --feature-color:#4b50a0; }
.csp-header-switcher .csp-feature-link--connect { --feature-color:#666666; }
.csp-header .csp-header-switcher .dropdown-item,
.csp-header .csp-header-switcher .dropdown-header { text-align:center; font-weight:700; }
.csp-header .csp-header-switcher .dropdown-item { color:var(--feature-color); }
.csp-header .csp-header-switcher .dropdown-item:hover,
.csp-header .csp-header-switcher .dropdown-item:focus,
.csp-header .csp-header-switcher .dropdown-item:active { background-color:var(--feature-color) !important; color:#fff; }
.dropdown-header {padding-top: 0px !important;}

.csp-header .csp-header-switcher .csp-teacher-resources { background:#fff; }
.csp-header .csp-header-switcher .csp-teacher-resources--heading { padding-top:10px; }
.csp-header .csp-header-switcher .csp-teacher-resources:last-child {
  padding-bottom:8px;
  margin-bottom:-8px;
  border-radius:0 0 12px 12px;
  overflow:hidden;
}
.csp-header .csp-header-switcher .csp-teacher-resources .dropdown-header { font-size:13px; }
.csp-demo-header .csp-demo-switcher .csp-teacher-resources {
  margin-top:10px;
  padding-top:14px;
  box-shadow:inset 0 8px 8px -8px rgb(0 0 0 / 37.3%);
}
.csp-header .csp-header-switcher .csp-teacher-resources .dropdown-item[aria-current] { background:#e2e2e4; }

.csp-header .csp-header-switcher > .dropdown-menu {
  top:100%;
  left:50%;
  right:auto;
  margin-top:4px;
  transform:translateX(-50%);
}

.csp-header-title { transition:color 180ms ease-out; }
.csp-header-title:hover,
.csp-header-title:focus-visible { color:rgb(from var(--csp-title-color, #4c9f95) calc(r * 1.4) calc(g * 1.4) calc(b * 1.4)); }
@media (prefers-reduced-motion:reduce) {
  .csp-header-title { transition:none; }
  .csp-header-title:hover,
  .csp-header-title:focus-visible { transform:none; }
}