@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800;900&display=swap");

:root {
    --msw-primary: #D71920;
    --msw-secondary: #F1BF00;
    --msw-text: #0f172a;
    --msw-muted: #64748b;
    --msw-gray: #f8fafc;
    --msw-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

html,
body {
    font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: var(--msw-text) !important;
    background: #fff !important;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 1200;
    background: linear-gradient(90deg, var(--msw-primary) 0%, var(--msw-primary) 33%, var(--msw-secondary) 33%, var(--msw-secondary) 66%, var(--msw-primary) 66%, var(--msw-primary) 100%);
}

.navbar.fixed-top {
    top: 6px !important;
    min-height: 82px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
}

.navbar .navbar-brand {
    min-height: 74px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 900 !important;
    color: var(--msw-text) !important;
}

.navbar .navbar-brand::before {
    content: "";
    display: inline-block;
    width: 148px;
    height: 74px;
    margin-right: .5rem;
    background: url("https://myspanishworld.com/logo.png?v=20260507-originalred") left center / contain no-repeat;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.10));
}

.navbar .navbar-brand img,
.navbar-brand .logo,
.navbar-brand .site-name {
    display: none !important;
}

.primary-navigation .navigation,
.navbar-nav .nav-link {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--msw-text) !important;
    opacity: .82;
    letter-spacing: 0 !important;
}

.primary-navigation .navigation:hover,
.primary-navigation .navigation.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--msw-primary) !important;
    opacity: 1;
}

#page {
    margin-top: 88px !important;
    background: #fff !important;
}

#page-header {
    background: #fff !important;
    border-bottom: 0 !important;
}

.page-context-header .page-header-headings h1,
#page-header h1 {
    color: var(--msw-text) !important;
    font-size: clamp(2rem, 4vw, 3.8rem) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.course-content h3,
.course-section-header h3,
.sectionname {
    color: var(--msw-text) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

#page-header .card,
.coursebox,
.card,
.dashboard-card,
.block,
.activity-item,
.section.main {
    border: 1px solid rgba(15, 23, 42, 0.09) !important;
    border-radius: 8px !important;
    box-shadow: var(--msw-shadow) !important;
}

.dashboard-card,
.coursebox {
    border-top: 4px solid var(--msw-secondary) !important;
}

.coursebox .coursename a,
.dashboard-card .coursename,
.dashboard-card .card-title,
.activityname a,
.instancename {
    color: var(--msw-text) !important;
    font-weight: 900 !important;
}

.coursebox .summary,
.dashboard-card .text-muted,
.activity-item .description,
.course-content .summary,
.text-muted {
    color: var(--msw-muted) !important;
}

.btn-primary,
.btn-secondary,
.singlebutton button,
input[type="submit"],
button[type="submit"] {
    border-radius: 4px !important;
    background: var(--msw-primary) !important;
    border-color: var(--msw-primary) !important;
    color: #fff !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    box-shadow: 0 8px 18px rgba(170, 21, 27, 0.18) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.singlebutton button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background: #8f1117 !important;
    border-color: #8f1117 !important;
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--msw-primary) !important;
    border-color: var(--msw-primary) !important;
    font-weight: 800 !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background: var(--msw-primary) !important;
}

a,
.breadcrumb-item a {
    color: var(--msw-primary);
}

a:hover,
.breadcrumb-item a:hover {
    color: #8f1117;
}

.badge,
.badge-primary,
.badge-info {
    border-radius: 4px !important;
    background: var(--msw-gray) !important;
    color: var(--msw-primary) !important;
    font-weight: 900 !important;
}

.breadcrumb {
    background: transparent !important;
    font-weight: 700;
}

.drawer,
.drawercontent,
.list-group-item {
    background: #fff !important;
}

.drawer .list-group-item.active,
.list-group-item.active {
    background: var(--msw-primary) !important;
    border-color: var(--msw-primary) !important;
}

.course-section {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.course-section .sectionname {
    font-size: 1.35rem !important;
}

.activity-item {
    border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
    margin-bottom: .75rem !important;
    background: #fff !important;
}

.activityiconcontainer {
    border-radius: 4px !important;
}

.login-container,
.login-wrapper .login-container {
    border-radius: 8px !important;
    border-top: 4px solid var(--msw-secondary) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
}

body.pagelayout-login {
    background:
        linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)),
        url("https://myspanishworld.com/hero_spanish.png") center / cover no-repeat fixed !important;
}

.login-logo img {
    display: none !important;
}

.login-logo::before {
    content: "";
    display: block;
    width: 220px;
    height: 150px;
    margin: 0 auto 1rem;
    background: url("https://myspanishworld.com/logo.png?v=20260507-originalred") center / contain no-repeat;
}

#page-footer {
    background: var(--msw-gray) !important;
    color: var(--msw-muted) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

#page-footer a {
    color: var(--msw-primary) !important;
    font-weight: 800 !important;
}

.dropdown-menu {
    border-radius: 8px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

.dropdown-item:active,
.dropdown-item:hover {
    background: var(--msw-gray) !important;
    color: var(--msw-primary) !important;
}

@media (max-width: 767.98px) {
    .navbar.fixed-top {
        min-height: 70px !important;
    }

    .navbar .navbar-brand::before {
        width: 112px;
        height: 56px;
    }

    #page {
        margin-top: 76px !important;
    }
}

/* MySpanishWorld visual alignment refresh - 2026-05-14 */
:root {
    --msw-primary: #D71920;
    --msw-primary-dark: #aa151b;
    --msw-secondary: #F1BF00;
    --msw-ink: #0f172a;
    --msw-muted: #5f6f85;
    --msw-line: rgba(15, 23, 42, 0.10);
    --msw-soft: #fff8e7;
    --msw-page: #fffdf8;
    --msw-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

html {
    scroll-padding-top: 126px;
}

body {
    background:
        radial-gradient(circle at 14% 10%, rgba(241, 191, 0, 0.14), transparent 30rem),
        linear-gradient(180deg, #ffffff 0%, var(--msw-page) 44%, #ffffff 100%) !important;
    color: var(--msw-ink) !important;
}

body::before {
    height: 6px !important;
    background: linear-gradient(90deg, var(--msw-primary) 0 33.333%, var(--msw-secondary) 33.333% 66.666%, var(--msw-primary) 66.666% 100%) !important;
}

.navbar.fixed-top {
    top: 6px !important;
    min-height: 112px !important;
    padding: 1.3rem clamp(0.75rem, 2vw, 2rem) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 1rem 3rem rgba(15, 23, 42, 0.06) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
}

.navbar .navbar-brand::before {
    content: none !important;
    display: none !important;
}

.navbar .navbar-brand:not(.msw-platform-logo) img,
.navbar-brand .logo,
.navbar-brand .site-name {
    display: none !important;
}

.msw-navbar-brand {
    flex: 0 1 360px;
    max-width: 360px;
    min-width: 0;
}

.msw-platform-logo {
    gap: .7rem;
    min-width: 0;
    text-decoration: none !important;
}

.navbar .msw-platform-logo img {
    display: block !important;
}

.msw-brand-isotipo {
    flex: 0 0 auto;
    width: auto !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    object-fit: contain;
}

.msw-brand-wordmark {
    flex: 1 1 auto;
    width: auto !important;
    height: 64px !important;
    max-width: 230px !important;
    max-height: 64px !important;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.08));
}

#page {
    margin-top: 126px !important;
}

#page-header,
.secondary-navigation,
.moremenu.navigation {
    background: transparent !important;
}

.primary-navigation .nav-link,
.navbar-nav .nav-link {
    color: var(--msw-ink) !important;
    font-weight: 800 !important;
}

.primary-navigation .nav-link.active,
.primary-navigation .nav-link:hover,
.navbar-nav .nav-link:hover {
    color: var(--msw-primary) !important;
}

.moremenu .nav-tabs {
    border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}

.moremenu .nav-link.active {
    border-bottom-color: var(--msw-primary) !important;
}

.btn-primary,
.btn.btn-primary,
input[type="submit"].btn-primary {
    background: var(--msw-primary) !important;
    border-color: var(--msw-primary) !important;
    color: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 22px rgba(215, 25, 32, 0.16) !important;
    font-weight: 900 !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
input[type="submit"].btn-primary:hover {
    background: var(--msw-primary-dark) !important;
    border-color: var(--msw-primary-dark) !important;
}

.btn-secondary,
.btn.btn-secondary,
.btn-outline-secondary {
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: var(--msw-ink) !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--msw-soft) !important;
    border-color: rgba(241, 191, 0, 0.55) !important;
    color: var(--msw-primary) !important;
}

.card,
.dashboard-card,
.coursebox,
.block,
.login-container,
.login-wrapper .login-container {
    border: 1px solid var(--msw-line) !important;
    border-radius: 8px !important;
    box-shadow: var(--msw-shadow) !important;
}

.course-section {
    margin-bottom: 1rem !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--msw-line) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
}

.course-section .sectionname {
    color: var(--msw-ink) !important;
    font-weight: 900 !important;
}

.course-section .sectionname a {
    color: var(--msw-ink) !important;
    text-decoration: none !important;
}

.course-section .sectionname a:hover {
    color: var(--msw-primary) !important;
}

.activity-item {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}

.activity-item:hover {
    border-color: rgba(241, 191, 0, 0.44) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07) !important;
}

.activityiconcontainer {
    background: var(--msw-soft) !important;
    border: 1px solid rgba(241, 191, 0, 0.42) !important;
    border-radius: 8px !important;
}

.automatic-completion-conditions,
.completion-info {
    background: rgba(255, 248, 231, 0.75) !important;
    border-radius: 6px !important;
}

.badge,
.badge-primary,
.badge-info {
    background: var(--msw-soft) !important;
    color: var(--msw-primary) !important;
    border: 1px solid rgba(241, 191, 0, 0.45) !important;
}

.drawer,
.drawercontent,
.list-group-item,
.dropdown-menu {
    border-color: var(--msw-line) !important;
}

body.pagelayout-login {
    background:
        linear-gradient(rgba(255, 255, 255, .90), rgba(255, 255, 255, .90)),
        url("https://myspanishworld.com/hero_spanish.png") center / cover no-repeat fixed !important;
}

@media (max-width: 1199.98px) {
    .navbar.fixed-top {
        min-height: 96px !important;
    }

    .msw-navbar-brand {
        max-width: 300px;
        margin-right: 1rem !important;
    }

    .msw-brand-isotipo {
        height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }

    .msw-brand-wordmark {
        height: 52px !important;
        max-width: 190px !important;
        max-height: 52px !important;
    }

    #page {
        margin-top: 108px !important;
    }
}

@media (max-width: 767.98px) {
    .navbar.fixed-top {
        min-height: 76px !important;
        padding: .5rem .75rem !important;
    }

    .msw-navbar-brand {
        max-width: 210px;
        margin-right: .5rem !important;
    }

    .msw-platform-logo {
        gap: .45rem;
    }

    .msw-brand-isotipo {
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    .msw-brand-wordmark {
        height: 38px !important;
        max-width: 138px !important;
        max-height: 38px !important;
    }

    #page {
        margin-top: 88px !important;
    }
}

@media (max-width: 420px) {
    .msw-navbar-brand {
        max-width: 172px;
    }

    .msw-brand-isotipo {
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }

    .msw-brand-wordmark {
        height: 34px !important;
        max-width: 118px !important;
        max-height: 34px !important;
    }
}

.pagelayout-frontpage #page h1,
#page-header h1,
.page-header-headings h1 {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word;
}

#page-header .d-flex,
#page-header .mr-auto,
.page-context-header,
.page-header-headings {
    min-width: 0 !important;
    max-width: 100% !important;
}

#frontpage-available-course-list,
.frontpage-course-list-all,
.coursebox .content .d-flex,
.coursebox .flex-grow-1,
.coursebox .summary,
.coursebox .summary .no-overflow {
    min-width: 0 !important;
    max-width: 100% !important;
}

.coursebox .summary .no-overflow {
    overflow: visible !important;
    max-width: calc(100vw - 52px) !important;
}

.coursebox .summary p {
    max-width: calc(100vw - 52px) !important;
    white-space: normal !important;
    overflow-wrap: break-word;
}

@media (max-width: 767.98px) {
    #page {
        max-width: 100vw !important;
        overflow-x: hidden;
    }

    #page-header .d-flex.align-items-center {
        display: block !important;
    }

    .pagelayout-frontpage #page h1,
    #page-header h1,
    .page-header-headings h1 {
        font-size: 1.65rem !important;
        line-height: 1.12 !important;
    }

    .coursebox,
    .coursebox .content,
    .coursebox .summary,
    .coursebox .info {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .coursebox .content .d-flex {
        display: block !important;
    }

    .coursebox .summary p,
    .coursebox .coursename {
        width: auto !important;
        max-width: calc(100vw - 52px) !important;
    }

    .coursebox .summary p {
        line-height: 1.55 !important;
    }

    #page-content,
    #region-main,
    #region-main-box,
    #page [role="main"],
    #frontpage-available-course-list,
    .frontpage-course-list-all,
    .courses.frontpage-course-list-all,
    .frontpage-course-list-all .coursebox {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: calc(100vw - 16px) !important;
        overflow-x: hidden !important;
    }

    .frontpage-course-list-all .coursebox {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 420px) {
    .pagelayout-frontpage #page h1,
    #page-header h1,
    .page-header-headings h1 {
        font-size: 1.45rem !important;
    }
}

/* Front page course showcase */
body.pagelayout-frontpage .page-context-header {
    display: none !important;
}

body.pagelayout-frontpage #page-header {
    margin-bottom: 1rem !important;
}

body.pagelayout-frontpage .secondary-navigation {
    margin-top: 0 !important;
}

#frontpage-available-course-list {
    margin-top: 1.25rem !important;
}

#frontpage-available-course-list h2 {
    position: relative;
    margin-bottom: 1.25rem !important;
    color: var(--msw-primary) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

#frontpage-available-course-list h2::after {
    content: "Structured Spanish paths for real communication.";
    display: block;
    margin-top: .4rem;
    color: var(--msw-muted);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.45;
}

#frontpage-available-course-list .courses {
    display: grid;
    gap: 1rem;
}

#frontpage-available-course-list .coursebox {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 231, 0.60)),
        #fff !important;
    border: 1px solid rgba(215, 25, 32, 0.16) !important;
    border-radius: 8px !important;
}

#frontpage-available-course-list .coursebox::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, var(--msw-primary) 0 55%, var(--msw-secondary) 55% 100%);
}

#frontpage-available-course-list .coursebox .info,
#frontpage-available-course-list .coursebox .content {
    padding-right: 1.35rem !important;
    padding-left: 1.35rem !important;
}

#frontpage-available-course-list .coursebox .info {
    padding-top: 1.35rem !important;
    padding-bottom: .2rem !important;
}

#frontpage-available-course-list .coursebox .content {
    padding-top: .35rem !important;
    padding-bottom: 1.35rem !important;
}

#frontpage-available-course-list .coursebox .info::before {
    content: "General Spanish";
    display: inline-flex;
    align-items: center;
    margin-bottom: .75rem;
    padding: .28rem .65rem;
    border: 1px solid rgba(215, 25, 32, 0.18);
    border-radius: 999px;
    background: rgba(215, 25, 32, 0.08);
    color: var(--msw-primary);
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

#frontpage-available-course-list .coursebox .coursename {
    margin-bottom: .25rem !important;
}

#frontpage-available-course-list .coursebox .coursename a {
    color: var(--msw-ink) !important;
    font-size: 1.15rem;
    font-weight: 900 !important;
    text-decoration: none !important;
}

#frontpage-available-course-list .coursebox .coursename a:hover {
    color: var(--msw-primary) !important;
}

#frontpage-available-course-list .coursebox[data-courseid="16"] .coursename::after {
    content: "A1 Beginner";
    display: inline-flex;
    align-items: center;
    margin-left: .65rem;
    padding: .24rem .55rem;
    border: 1px solid rgba(241, 191, 0, 0.48);
    border-radius: 999px;
    background: rgba(241, 191, 0, 0.15);
    color: var(--msw-ink);
    font-size: .76rem;
    font-weight: 900;
    line-height: 1;
}

#frontpage-available-course-list .coursebox .summary p {
    color: var(--msw-muted) !important;
    font-weight: 650;
}

#frontpage-available-course-list .coursebox[data-courseid="16"] .content::after {
    content: "10 guided units · Communication first · Interactive practice";
    display: block;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--msw-primary);
    font-size: .9rem;
    font-weight: 900;
}

@media (max-width: 767.98px) {
    body.pagelayout-frontpage #page-header {
        margin-bottom: .5rem !important;
    }

    #frontpage-available-course-list,
    #frontpage-available-course-list * {
        box-sizing: border-box !important;
    }

    #frontpage-available-course-list h2 {
        font-size: 1.7rem !important;
    }

    #frontpage-available-course-list h2::after {
        font-size: .92rem;
    }

    #frontpage-available-course-list .coursebox .info,
    #frontpage-available-course-list .coursebox .content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    #frontpage-available-course-list .coursebox .info::before {
        display: flex !important;
        width: max-content;
        max-width: 100%;
        margin-bottom: .85rem;
    }

    #frontpage-available-course-list .coursebox .content .d-flex,
    #frontpage-available-course-list .coursebox .flex-grow-1,
    #frontpage-available-course-list .coursebox .summary,
    #frontpage-available-course-list .coursebox .summary .no-overflow,
    #frontpage-available-course-list .coursebox .summary p {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    #frontpage-available-course-list .coursebox .summary p {
        max-width: calc(100vw - 88px) !important;
    }

    #frontpage-available-course-list .coursebox .coursename,
    #frontpage-available-course-list .coursebox .coursename a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    #frontpage-available-course-list .coursebox .coursename a {
        font-size: 1rem;
        line-height: 1.28;
    }

    #frontpage-available-course-list .coursebox[data-courseid="16"] .coursename::after {
        margin-top: .55rem;
        margin-left: 0;
    }

    #frontpage-available-course-list .coursebox[data-courseid="16"] .content::after {
        content: "10 guided units\A Communication first\A Interactive practice";
        max-width: 100% !important;
        white-space: pre-line !important;
        overflow-wrap: break-word !important;
        line-height: 1.5;
    }
}
/* Course hierarchy: stable MySpanishWorld styling */
body.path-course-view {
    background:
        radial-gradient(circle at 18% 6%, rgba(241, 191, 0, 0.12), transparent 28rem),
        linear-gradient(180deg, #ffffff 0%, var(--msw-page) 42%, #ffffff 100%) !important;
}

body.path-course-view #region-main,
body.path-course-view #region-main-box {
    background: transparent !important;
    border: 0 !important;
}

body.path-course-view .page-header-headings::before {
    content: "General Spanish / A1 Beginner";
    display: inline-flex;
    align-items: center;
    margin-bottom: .7rem;
    padding: .34rem .75rem;
    border: 1px solid rgba(215, 25, 32, 0.16);
    border-radius: 999px;
    background: rgba(215, 25, 32, 0.08);
    color: var(--msw-primary);
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

body.path-course-view .page-header-headings h1 {
    color: var(--msw-ink) !important;
    font-size: 3rem !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

body.path-course-view .moremenu .nav-link,
body.path-course-view .secondary-navigation .nav-link {
    color: var(--msw-muted) !important;
    font-weight: 800 !important;
}

body.path-course-view .moremenu .nav-link.active,
body.path-course-view .moremenu .nav-link:hover,
body.path-course-view .secondary-navigation .nav-link:hover {
    color: var(--msw-primary) !important;
}

body.path-course-view .moremenu .nav-link.active {
    border-bottom-color: var(--msw-primary) !important;
}

#theme_boost-drawers-courseindex {
    background: var(--msw-page) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.04) !important;
}

#theme_boost-drawers-courseindex .drawercontent {
    background:
        linear-gradient(180deg, rgba(255, 248, 231, 0.58), rgba(255, 255, 255, 0.96)),
        var(--msw-page) !important;
    padding: .75rem .4rem !important;
}

.courseindex .courseindex-item {
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    color: var(--msw-ink) !important;
}

.courseindex .courseindex-link,
.courseindex .courseindex-chevron {
    color: var(--msw-ink) !important;
}

.courseindex .courseindex-section-title .courseindex-link {
    font-weight: 900 !important;
}

.courseindex .courseindex-item:hover,
.courseindex .courseindex-item.active {
    background: var(--msw-soft) !important;
    border-color: rgba(241, 191, 0, 0.42) !important;
}

.courseindex .courseindex-item.pageitem,
.courseindex .courseindex-item.pageitem:hover,
.courseindex .courseindex-item.pageitem.active {
    background: var(--msw-primary) !important;
    border-color: var(--msw-primary) !important;
    box-shadow: 0 8px 18px rgba(215, 25, 32, 0.16) !important;
    color: #fff !important;
}

.courseindex .courseindex-item.pageitem a,
.courseindex .courseindex-item.pageitem .courseindex-link,
.courseindex .courseindex-item.pageitem .courseindex-chevron {
    color: #fff !important;
}

body.path-course-view .course-content .current::before,
.courseindex .courseindex-section.current > .courseindex-item-content,
.courseindex .courseindex-section.current .courseindex-sectioncontent {
    border-left-color: transparent !important;
}

body.path-course-view .course-section::before,
body.path-course-view .activity-item::before,
body.path-course-view .sectionname::before,
body.path-course-view .msw-unit-main-heading::before {
    display: none !important;
    content: none !important;
}

body.path-course-view .course-section {
    overflow: visible !important;
    margin-bottom: 1.2rem !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid var(--msw-line) !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.055) !important;
}

body.path-course-view .course-section-header {
    padding: 1.05rem 1.25rem !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 10px 10px 0 0 !important;
}

body.path-course-view .course-section .sectionname {
    color: var(--msw-ink) !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
}

body.path-course-view .course-section .sectionname a,
body.path-course-view .course-section .sectionname .inplaceeditable {
    color: var(--msw-ink) !important;
}

body.path-course-view .section-collapsemenu a,
body.path-course-view .section-collapsemenu .collapseall,
body.path-course-view .section-collapsemenu .expandall {
    color: var(--msw-primary) !important;
    font-weight: 800 !important;
}

body.path-course-view .course-content .section .activity {
    margin: 0 !important;
}

body.path-course-view .course-content .section .activity + .activity {
    margin-top: .85rem !important;
}

body.path-course-view .course-section .section-content,
body.path-course-view .course-section .content,
body.path-course-view .course-section .section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

body.path-course-view .activity-item {
    position: relative;
    overflow: visible !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04) !important;
}

body.path-course-view .activity-item:hover {
    border-color: rgba(241, 191, 0, 0.44) !important;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.07) !important;
}

body.path-course-view .modtype_label .activity-item,
body.path-course-view .activity.label .activity-item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.path-course-view .msw-unit-main-heading {
    display: block;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(241, 191, 0, 0.42);
    border-radius: 8px;
    background: var(--msw-soft);
    color: var(--msw-ink);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.35;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.035);
}

body.path-course-view .activity-item .activityname a,
body.path-course-view .activity-item .activity-name-area a,
body.path-course-view .activity-item .aalink {
    color: var(--msw-ink) !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body.path-course-view .activity-item .activityname a:hover,
body.path-course-view .activity-item .activity-name-area a:hover,
body.path-course-view .activity-item .aalink:hover {
    color: var(--msw-primary) !important;
}

body.path-course-view .modtype_page .activity-item,
body.path-course-view .modtype_book .activity-item,
body.path-course-view .modtype_lesson .activity-item,
body.path-course-view .modtype_quiz .activity-item,
body.path-course-view .modtype_h5pactivity .activity-item {
    margin-left: 1.25rem !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035) !important;
}

body.path-course-view .modtype_page .activity-item::after,
body.path-course-view .modtype_book .activity-item::after,
body.path-course-view .modtype_lesson .activity-item::after,
body.path-course-view .modtype_quiz .activity-item::after,
body.path-course-view .modtype_h5pactivity .activity-item::after {
    content: "Practice";
    position: absolute;
    top: .65rem;
    right: .8rem;
    padding: .18rem .5rem;
    border: 1px solid rgba(215, 25, 32, 0.14);
    border-radius: 999px;
    background: rgba(215, 25, 32, 0.06);
    color: var(--msw-primary);
    font-size: .68rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

body.path-course-view .activityiconcontainer {
    background: var(--msw-soft) !important;
    border: 1px solid rgba(241, 191, 0, 0.42) !important;
    border-radius: 6px !important;
}

body.path-course-view .activityiconcontainer img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
}

body.path-course-view .automatic-completion-conditions,
body.path-course-view .completion-info,
body.path-course-view .activity-item .badge {
    background: rgba(255, 248, 231, 0.88) !important;
    border-color: rgba(241, 191, 0, 0.42) !important;
    color: var(--msw-primary) !important;
}

body.path-course-view .dropdown-menu,
body.path-course-view .moodle-actionmenu,
body.path-course-view .action-menu {
    z-index: 1080 !important;
}

.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.progress-bar {
    background-color: var(--msw-primary) !important;
    border-color: var(--msw-primary) !important;
}

.text-primary,
.text-info,
a.text-primary:hover,
a.text-info:hover,
.btn-link,
.page-link {
    color: var(--msw-primary) !important;
}

.form-control:focus,
.custom-select:focus,
.btn:focus,
.btn.focus {
    border-color: rgba(215, 25, 32, 0.45) !important;
    box-shadow: 0 0 0 .2rem rgba(215, 25, 32, 0.14) !important;
}

.activity-add,
.block-add {
    background: var(--msw-soft) !important;
    border-color: rgba(241, 191, 0, 0.46) !important;
    color: var(--msw-primary) !important;
}

.activity-add:hover,
.block-add:hover,
.editing .section .activity:hover,
.editing .section .activity.action-menu-shown,
.editing .section .sectionname:hover {
    background: rgba(255, 248, 231, 0.82) !important;
}

@media (max-width: 767.98px) {
    body.path-course-view .page-header-headings h1 {
        font-size: 2.2rem !important;
    }

    body.path-course-view .course-section-header {
        padding: .95rem 1rem !important;
    }

    body.path-course-view .course-section .sectionname {
        font-size: 1.08rem !important;
    }

    body.path-course-view .course-section .section-content,
    body.path-course-view .course-section .content,
    body.path-course-view .course-section .section {
        padding-left: .65rem !important;
        padding-right: .65rem !important;
    }

    body.path-course-view .modtype_page .activity-item,
    body.path-course-view .modtype_book .activity-item,
    body.path-course-view .modtype_lesson .activity-item,
    body.path-course-view .modtype_quiz .activity-item,
    body.path-course-view .modtype_h5pactivity .activity-item {
        margin-left: .55rem !important;
    }

    body.path-course-view .modtype_page .activity-item::after,
    body.path-course-view .modtype_book .activity-item::after,
    body.path-course-view .modtype_lesson .activity-item::after,
    body.path-course-view .modtype_quiz .activity-item::after,
    body.path-course-view .modtype_h5pactivity .activity-item::after {
        display: none !important;
    }
}

/* Website-inspired course hierarchy refinement */
body.path-course-view .course-section {
    background: #fff !important;
    border: 1px solid var(--msw-line) !important;
    border-top: 4px solid var(--msw-secondary) !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.055) !important;
}

body.path-course-view .course-section-header {
    padding: 1.25rem 1.35rem !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.path-course-view .course-section .sectionname {
    margin: 0 !important;
    color: var(--msw-ink) !important;
    font-size: 1.28rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

body.path-course-view .course-section .sectionname::before {
    display: none !important;
    content: none !important;
}

body.path-course-view #section-1 .sectionname::before,
body.path-course-view [data-sectionid="1"] .sectionname::before {
    display: none !important;
    content: none !important;
}

body.path-course-view .modtype_label .activity-item,
body.path-course-view .activity.label .activity-item {
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.path-course-view .msw-unit-main-heading {
    display: block;
    padding: 1rem 1.15rem 1.1rem;
    border: 1px solid var(--msw-line);
    border-radius: 8px;
    background: #fff;
    color: var(--msw-ink);
    font-size: 1.12rem;
    font-weight: 900;
    line-height: 1.3;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.055);
}

body.path-course-view .msw-unit-main-heading::before {
    display: none !important;
    content: none !important;
}

body.path-course-view .modtype_page .activity-item,
body.path-course-view .modtype_book .activity-item,
body.path-course-view .modtype_lesson .activity-item,
body.path-course-view .modtype_quiz .activity-item,
body.path-course-view .modtype_h5pactivity .activity-item {
    margin-left: 1.5rem !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04) !important;
}

body.path-course-view .modtype_page .activity-item::after,
body.path-course-view .modtype_book .activity-item::after,
body.path-course-view .modtype_lesson .activity-item::after,
body.path-course-view .modtype_quiz .activity-item::after,
body.path-course-view .modtype_h5pactivity .activity-item::after {
    display: none !important;
    content: none !important;
}

body.path-course-view .activityiconcontainer {
    background: rgba(241, 191, 0, 0.14) !important;
    border: 1px solid rgba(241, 191, 0, 0.36) !important;
    border-radius: 6px !important;
}

body.path-course-view .activityiconcontainer img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
}

@media (max-width: 767.98px) {
    body.path-course-view .course-section-header {
        padding: 1rem !important;
    }

    body.path-course-view .msw-unit-main-heading {
        padding: .95rem 1rem 1rem;
        font-size: 1rem;
    }

    body.path-course-view .modtype_page .activity-item,
    body.path-course-view .modtype_book .activity-item,
    body.path-course-view .modtype_lesson .activity-item,
    body.path-course-view .modtype_quiz .activity-item,
    body.path-course-view .modtype_h5pactivity .activity-item {
        margin-left: .6rem !important;
    }
}