@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Error/CustomNotFound.razor.rz.scp.css */
.not-found-container[b-ey1vli2443] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
/* ERROR HANDLING CSS */
#blazor-error-ui[b-gqp799x3s2] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-gqp799x3s2] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ExternalAccessLayout.razor.rz.scp.css */
main[b-oe8bu1seze] {
    flex: 1;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-pubm8h17in] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-pubm8h17in] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenuTop.razor.rz.scp.css */
.container-fluid[b-vftncqe74u] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 90%;
    max-width: calc(80 * 1920px / 100);
    margin: 0 auto;
}

.navbar[b-vftncqe74u] {
    background-color: white;
    color: white;
    height: 5rem;
    padding: 0.5rem 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

    .navbar .navbar-brand[b-vftncqe74u] {
        color: white;

    }

        .navbar .navbar-brand img[b-vftncqe74u] {
            width: auto;
            height: 4rem;
        }

    .navbar a[b-vftncqe74u] {
        color: white;
        text-decoration: none;
        padding: 0.5rem 1rem;
    }

        .navbar a:hover[b-vftncqe74u] {
            background-color: transparent;
        }

.nav-item[b-vftncqe74u] {
    list-style-type: none;
    display: inline;
    margin-right: 1.5rem;
    margin-left: 1.5rem;
    border-bottom: solid 3px transparent;
    transition: border-bottom-color 0.3s ease-in-out;
}

    .nav-item:hover[b-vftncqe74u] {
        border-bottom: solid 3px #000000;
    }

[b-vftncqe74u] a {
    text-align: center;
    font-size: 1.3rem;
    color: #000000;
    text-decoration: none;
}

[b-vftncqe74u] a.active {
    color: black;
}

.legal-item[b-vftncqe74u] {
    position: relative;
}

.legal-toggle[b-vftncqe74u] {
    display: inline-block;
    cursor: default;
    margin: 0;
    text-align: center;
    font: inherit;
    font-size: 1.3rem;
    color: #000000;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

.legal-menu[b-vftncqe74u] {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    margin: 0;
    min-width: 220px;
    z-index: 1001;
}

    .legal-item:hover .legal-menu[b-vftncqe74u],
    .legal-item:focus-within .legal-menu[b-vftncqe74u] {
        display: block;
    }

    .legal-menu li[b-vftncqe74u] {
        list-style: none;
    }

        .legal-menu li a[b-vftncqe74u] {
            display: block;
            padding: 0.5rem 1.5rem;
            font-size: 1rem;
            color: #000000;
            text-decoration: none;
            white-space: nowrap;
        }

            .legal-menu li a:hover[b-vftncqe74u] {
                background-color: #f0f0f0;
            }

.nav-login-button[b-vftncqe74u] {
    text-align: center;
    color: white;
    background-color: #49D182;
    width: 129px;
    height: 63px;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

    .nav-login-button:hover[b-vftncqe74u] {
        background-color: #3CB371;
    }

.mobile-button[b-vftncqe74u] {
    display: none;
}

.navbar-toggler[b-vftncqe74u] {
    display: none;
    padding: 0.5rem 1rem;
    border: 1px solid white;
    background-color: transparent;
}

.navbar-toggler-icon[b-vftncqe74u] {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url('/images/topMenu/mobile.png') center no-repeat;
}

@media (max-width: 1232px) {

    .navbar[b-vftncqe74u] {
        padding: 1rem 0 0 0;
    }

    .container-fluid[b-vftncqe74u] {
        width: 100%;
        flex-wrap: wrap;
    }

    .collapse[b-vftncqe74u] {
        display: none;
        width: 100%;
    }

    .navbar .navbar-brand img[b-vftncqe74u] {
        height: 40px;
    }

    .navbar-toggler[b-vftncqe74u] {
        display: inline-block;
    }

    .navbar-nav[b-vftncqe74u] {
        padding: 0;
    }

    .nav-item[b-vftncqe74u], .nav-login-button[b-vftncqe74u]{
        display: block;
        text-align: center;
    }

        .nav-item:hover[b-vftncqe74u] {
            border-bottom: none;
            background-color: #49D182;
        }

    .nav-login-button[b-vftncqe74u] {
        display: none;
    }

    .mobile-button[b-vftncqe74u] {
        display: block;
        margin: 0 auto 0.5rem auto;
    }

    .legal-toggle[b-vftncqe74u] {
        display: block;
        width: 100%;
    }

    .legal-menu[b-vftncqe74u] {
        display: block;
        position: static;
        transform: none;
        box-shadow: none;
        text-align: center;
        margin: 0;
    }

    .show[b-vftncqe74u] {
        display: block;
        background-color: #ffffff;
    }
}
/* /Components/Layout/TeachingManagementLayout.razor.rz.scp.css */
main[b-d836vcw72m] {
    flex: 1;
}

.row.flex-nowrap[b-d836vcw72m] {
    position: relative;
}

main.col[b-d836vcw72m] {
    overflow-x: auto;
    max-width: 100%;
}

@media (max-width: 650px) {
    /* Stack main above the navbar (DOM order) instead of side-by-side, so the
       sticky bottom bar (see planific.css .fixed-col) sits below the content
       in normal flow rather than overlaying it. */
    .row.flex-nowrap[b-d836vcw72m] {
        flex-direction: column;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
.about-container[b-wt2yvc6m0b] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333333;
    background-color: #ffffff;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.about-container h1[b-wt2yvc6m0b] {
    color: #4caf50;
    border-bottom: 2px solid #4caf50;
    padding-bottom: 10px;
    font-size: 2em;
    text-align: center;
}

.about-container h2[b-wt2yvc6m0b] {
    color: #4caf50;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 5px;
    margin-top: 30px;
    font-size: 1.5em;
}

.about-container h3[b-wt2yvc6m0b] {
    color: #4caf50;
    font-size: 1.2em;
    margin-top: 20px;
}

.about-container p[b-wt2yvc6m0b] {
    margin: 15px 0;
}

.about-container ul[b-wt2yvc6m0b], .about-container ol[b-wt2yvc6m0b] {
    padding-left: 25px;
    margin: 15px 0;
}

.about-container ul li[b-wt2yvc6m0b], .about-container ol li[b-wt2yvc6m0b] {
    margin-bottom: 10px;
}

.about-container ul li strong[b-wt2yvc6m0b], .about-container ol li strong[b-wt2yvc6m0b] {
    color: #4caf50;
}

.about-container a[b-wt2yvc6m0b] {
    color: #4caf50;
    text-decoration: none;
}

.about-container a:hover[b-wt2yvc6m0b] {
    text-decoration: underline;
}

.section[b-wt2yvc6m0b] {
    background-color: #f9f9f9;
    padding: 18px 24px;
    border-radius: 8px;
    margin: 25px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.section[b-wt2yvc6m0b]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: #4caf50;
}

.contact-section[b-wt2yvc6m0b] {
    background-color: #e8f5e9;
}

.contact-email[b-wt2yvc6m0b] {
    text-align: center;
    font-size: 1.3em;
    margin: 25px 0;
    padding: 12px;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.contact-email a[b-wt2yvc6m0b] {
    font-weight: bold;
}

.footer[b-wt2yvc6m0b] {
    margin-top: 40px;
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    text-align: center;
    font-size: 0.9em;
    color: #666666;
}

@media (max-width: 600px) {
    .about-container[b-wt2yvc6m0b] {
        padding: 15px;
    }

    .about-container h1[b-wt2yvc6m0b] {
        font-size: 1.8em;
    }

    .about-container h2[b-wt2yvc6m0b] {
        font-size: 1.3em;
    }

    .section[b-wt2yvc6m0b] {
        padding: 15px 18px;
    }
}
/* /Components/Pages/GeneralTerms.razor.rz.scp.css */
.gtc-container[b-czlykvyvrt] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333333;
    background-color: #ffffff;
    max-width: 800px;
    margin: 0 auto;
    padding: 5rem 20px 20px;
}

.gtc-container h1[b-czlykvyvrt] {
    color: #4caf50; /* Green color based on Planific's theme */
    border-bottom: 2px solid #4caf50;
    padding-bottom: 10px;
    font-size: 2em;
    text-align: center;
}

.gtc-container h2[b-czlykvyvrt] {
    color: #4caf50;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 5px;
    margin-top: 30px;
    font-size: 1.5em;
}

.gtc-container h3[b-czlykvyvrt] {
    color: #4caf50;
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 10px;
}

.gtc-container p[b-czlykvyvrt] {
    margin: 15px 0;
    text-align: justify;
}

.gtc-container ul[b-czlykvyvrt] {
    list-style-type: square;
    padding-left: 25px;
    margin: 15px 0;
}

.gtc-container ul li[b-czlykvyvrt] {
    margin-bottom: 8px;
}

.gtc-container ul li strong[b-czlykvyvrt] {
    color: #4caf50;
}

.gtc-container a[b-czlykvyvrt] {
    color: #4caf50;
    text-decoration: none;
}

.gtc-container a:hover[b-czlykvyvrt] {
    text-decoration: underline;
}

.date-update[b-czlykvyvrt] {
    font-style: italic;
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.section[b-czlykvyvrt] {
    background-color: #f9f9f9;
    padding: 18px 24px;
    border-radius: 8px;
    margin: 25px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.section[b-czlykvyvrt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: #4caf50;
}

@media (max-width: 600px) {
    .gtc-container[b-czlykvyvrt] {
        padding: 15px;
    }

    .gtc-container h1[b-czlykvyvrt] {
        font-size: 1.8em;
    }

    .gtc-container h2[b-czlykvyvrt] {
        font-size: 1.3em;
    }

    .gtc-container h3[b-czlykvyvrt] {
        font-size: 1.1em;
    }

    .section[b-czlykvyvrt] {
        padding: 15px 18px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/*
    GLOBAL
*/
main[b-ycr8xktzyx] {
    padding-top: 5rem;
}

section[b-ycr8xktzyx] {
    padding-top: 5rem;
    margin-top: -5rem;
    padding-bottom: 5rem; /* Background correction */
}

.container[b-ycr8xktzyx] {
    max-width: 1920px;
    margin: 0 auto;
}

.content h1[b-ycr8xktzyx] {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    line-height: 1.25;
    margin: 0;
}

.content h2[b-ycr8xktzyx] {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 60px;
}

.content h3[b-ycr8xktzyx], .container h3[b-ycr8xktzyx] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 44px;
}

.content p[b-ycr8xktzyx], .container p[b-ycr8xktzyx] {
    font-size: 1rem;
    font-weight: 400;
    color: #666666;
    line-height: 1.7;
}

.btn-get-started[b-ycr8xktzyx] {
    /* Button style */
    background-color: #49D182;
    border-radius: 10px;
    padding: 1.25rem 2.375rem;
    width: fit-content;
    transition: transform 0.3s ease-in-out;
    /* Text style */
    font-size: 1.125rem;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
}

    .btn-get-started:hover[b-ycr8xktzyx] {
        transform: scale(1.1);
    }

.button-comment[b-ycr8xktzyx] {
    font-size: 0.925rem;
}

/*
    HOME SECTION
*/
#home[b-ycr8xktzyx] {
    background-color: rgba(74, 209, 130, 0.05);
}

    #home .container[b-ycr8xktzyx] {
        display: grid;
        grid-template-columns: 5% 5% 10% 5% 5% 5% 5% 5% 5% 20% 5% 5% 5% 10% 5%;
        grid-template-rows: 3rem 5rem auto auto auto auto auto auto auto auto auto auto 1rem;
        align-items: center;
        justify-content: space-evenly;
    }

    #home .content[b-ycr8xktzyx] {
        grid-column: 6 / span 6;
        grid-row: 4 / span 4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    #home .content h1[b-ycr8xktzyx] {
        margin-bottom: 1rem;
    }

    #home .content p[b-ycr8xktzyx] {
        margin: 1rem;
    }

    #home .content .btn-get-started[b-ycr8xktzyx] {
        margin-top: 2rem;
    }

    #home .male-teacher[b-ycr8xktzyx] {
        grid-column: 3 / span 2;
        grid-row: 6 / span 5;
    }

    #home .female-teacher[b-ycr8xktzyx] {
        grid-column: 13 / span 2;
        grid-row: 4 / span 5;
    }

    #home .male-teacher img[b-ycr8xktzyx],
    #home .female-teacher img[b-ycr8xktzyx] {
        width: 100%;
    }

    #home .decoration-0[b-ycr8xktzyx] {
        grid-column: 9;
        grid-row: 1 / span 2;
    }

    #home .decoration-1[b-ycr8xktzyx] {
        grid-column: 12;
        grid-row: 2 / span 2;
    }

    #home .decoration-2[b-ycr8xktzyx] {
        grid-column: 4;
        grid-row: 3 / span 2;
    }

    #home .decoration-3[b-ycr8xktzyx] {
        grid-column: 6;
        grid-row: 8;
    }

    #home .decoration-4[b-ycr8xktzyx] {
        grid-column: 8;
        grid-row: 11 / span 2;
    }

    #home .decoration-5[b-ycr8xktzyx] {
        grid-column: 13;
        grid-row: 10 / span 3;
    }

    #home .decoration-6[b-ycr8xktzyx] {
        grid-column: 12;
        grid-row: 8;
    }

@media (max-width: 768px) {

    #home .container[b-ycr8xktzyx] {
        grid-template-rows: 3rem auto auto auto auto auto auto auto auto auto auto auto 1rem;
    }

    #home .content[b-ycr8xktzyx] {
        grid-column: 2 / span 13;
        grid-row: 4;
    }

        #home .content h1[b-ycr8xktzyx] {
            font-size: 2.5rem;
        }

    #home .male-teacher[b-ycr8xktzyx] {
        grid-column: 2 / span 8;
        grid-row: 8 / span 4;
    }

    #home .female-teacher[b-ycr8xktzyx] {
        grid-column: 10 / span 5;
        grid-row: 7 / span 4;
        text-align: end;
    }

    #home .male-teacher img[b-ycr8xktzyx],
    #home .female-teacher img[b-ycr8xktzyx] {
        width: 80%;
    }

    #home .decoration-0[b-ycr8xktzyx] {
        grid-column: 5;
        grid-row: 3;
    }

    #home .decoration-1[b-ycr8xktzyx] {
        grid-column: 12;
        grid-row: 2;
    }

    #home .decoration-2[b-ycr8xktzyx] {
        grid-column: 4;
        grid-row: 3 / span 2;
        display: none;
    }

    #home .decoration-3[b-ycr8xktzyx] {
        grid-column: 6;
        grid-row: 8;
        display: none;
    }

    #home .decoration-4[b-ycr8xktzyx] {
        grid-column: 9;
        grid-row: 12;
    }

    #home .decoration-5[b-ycr8xktzyx] {
        grid-column: 11 / span 2;
        grid-row: 11 / span 2;
    }

    #home .decoration-6[b-ycr8xktzyx] {
        grid-column: 12;
        grid-row: 8;
        display: none;
    }

    #home .decoration-0 img[b-ycr8xktzyx],
    #home .decoration-1 img[b-ycr8xktzyx],
    #home .decoration-2 img[b-ycr8xktzyx],
    #home .decoration-3 img[b-ycr8xktzyx],
    #home .decoration-4 img[b-ycr8xktzyx],
    #home .decoration-5 img[b-ycr8xktzyx],
    #home .decoration-6 img[b-ycr8xktzyx] {
        width: 100%;
    }
}

/*
    BENEFITS SECTION
*/
#benefits[b-ycr8xktzyx] {
    background-color: #ffffff;
}

    #benefits .container[b-ycr8xktzyx] {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

    #benefits .content[b-ycr8xktzyx] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 35%;
    }

    #benefits .student-image[b-ycr8xktzyx] {
        width: 50%;
    }

        #benefits .student-image img[b-ycr8xktzyx] {
            width: 100%;
        }

@media (max-width: 1232px) {

    #benefits .content[b-ycr8xktzyx] {
        width: 90%;
        text-align: center;
        align-items: center;
    }

    #benefits .student-image img[b-ycr8xktzyx] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #benefits .student-image[b-ycr8xktzyx] {
        width: 100%;
    }
}

/*
    STRENGTHS SECTION
*/
#strengths[b-ycr8xktzyx] {
    background-color: #ffffff;
}
    #strengths .container[b-ycr8xktzyx] {
        display: grid;
        grid-template-columns: 5% 5% 10% 10% 40% 10% 10% 5% 5%;
        grid-template-rows: 1rem auto auto auto auto 1rem;
        align-items: center;
        justify-items: center;
    }

    #strengths .content[b-ycr8xktzyx] {
        grid-column: 5;
        grid-row: 2 / span 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    #strengths .content h2[b-ycr8xktzyx] {
        margin-bottom: 1rem;
    }

    #strengths .decoration-first[b-ycr8xktzyx] {
        grid-column: 4;
        grid-row: 2;
    }

    #strengths .decoration-last[b-ycr8xktzyx] {
        grid-column: 6;
        grid-row: 3;
    }

    #strengths .decoration-first img[b-ycr8xktzyx],
    #strengths .decoration-last img[b-ycr8xktzyx] {
        width: 100%;
    }

    #strengths .item-list[b-ycr8xktzyx] {
        grid-column: 2 / span 7;
        grid-row: 5;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin: 5rem 0 0 0;
    }

        #strengths .item-list .item[b-ycr8xktzyx] {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 0.75px solid #cccccc;
            border-radius: 16px;
            font-weight: 600;
            font-size: 1.2rem;
            line-height: 30px;
            color: #000000;
            text-align: center;
            width: 18rem;
            height: 18rem;
            margin: 1rem 2rem;
            transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
        }

            #strengths .item-list .item:hover[b-ycr8xktzyx] {
                background-color: #49D182 !important;
                color: #ffffff !important;
                transform: scale(1.1);
            }

                #strengths .item-list .item:hover .item-icon[b-ycr8xktzyx] {
                    background-color: rgba(255, 255, 255, 0.2) !important;
                }

                #strengths .item-list .item:hover p[b-ycr8xktzyx] {
                    color: #ffffff;
                }

            #strengths .item-list .item .item-icon[b-ycr8xktzyx] {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgba(73, 209, 130, 0.1);
                border-radius: 50%;
                width: 80px;
                height: 80px;
                text-align: center;
                transition: background-color 0.3s ease-in-out;
            }

            #strengths .item-list .item p[b-ycr8xktzyx] {
                padding: 0 1rem;
                font-weight: 600;
                font-size: 1.5rem;
                transition: color 0.3s ease-in-out;
            }

@media (max-width: 1232px) {
    #strengths .decoration-first[b-ycr8xktzyx] {
        grid-column: 3;
        grid-row: 2;
    }

    #strengths .decoration-last[b-ycr8xktzyx] {
        grid-column: 7;
        grid-row: 3;
    }
}

@media (max-width: 768px) {

    #strengths .item-list[b-ycr8xktzyx] {
        margin-top: 1rem;
    }

    #strengths .decoration-first[b-ycr8xktzyx] {
        grid-column: 2;
        grid-row: 2;
    }

    #strengths .decoration-last[b-ycr8xktzyx] {
        grid-column: 7;
        grid-row: 4;
    }

        #strengths .decoration-first img[b-ycr8xktzyx],
        #strengths .decoration-last img[b-ycr8xktzyx] {
            width: 50px;
            height: 50px;
            object-fit: contain;
            display: none;
        }
}

/*
    EXPERIENCE SECTION
*/
#experience[b-ycr8xktzyx] {
    background-color: #ffffff;
}

    #experience .container[b-ycr8xktzyx] {
        display: grid;
        grid-template-columns: 10% 40% 40% 10%;
        grid-template-rows: auto auto auto auto auto auto;
        row-gap: 3rem;
        align-items: center;
        justify-items: center;
    }

        #experience .container h3[b-ycr8xktzyx] {
            margin-bottom: 1rem;
        }

        #experience .container p[b-ycr8xktzyx] {
            color: #303030; 
        }

    #experience .content[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
        width: 60%;
    }

        #experience .content h2[b-ycr8xktzyx] {
            margin-bottom: 1rem;
        }

    #experience .item-image img[b-ycr8xktzyx] {
        width: 100%;
    }

    #experience .item-text[b-ycr8xktzyx] {
        padding: 0 1rem;
    }

    #experience .item-image-1[b-ycr8xktzyx] {
        grid-column: 2; 
        grid-row: 2;
    }

    #experience .item-image-2[b-ycr8xktzyx] {
        grid-column: 3;
        grid-row: 3;
    }

    #experience .item-image-3[b-ycr8xktzyx] {
        grid-column: 2;
        grid-row: 4;
    }

    #experience .item-image-4[b-ycr8xktzyx] {
        grid-column: 3;
        grid-row: 5;
    }

    #experience .item-image-5[b-ycr8xktzyx] {
        grid-column: 2;
        grid-row: 6;
    }

    #experience .item-text-1[b-ycr8xktzyx] {
        grid-column: 3;
        grid-row: 2;
    }

    #experience .item-text-2[b-ycr8xktzyx] {
        grid-column: 2;
        grid-row: 3;
    }

    #experience .item-text-3[b-ycr8xktzyx] {
        grid-column: 3;
        grid-row: 4;
    }

    #experience .item-text-4[b-ycr8xktzyx] {
        grid-column: 2;
        grid-row: 5;
    }

    #experience .item-text-5[b-ycr8xktzyx] {
        grid-column: 3;
        grid-row: 6;
    }

@media (max-width: 768px) {

    #experience .container[b-ycr8xktzyx] {
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto;
        row-gap: 1rem;
    }

    #experience .content[b-ycr8xktzyx] {
        width: 100%;
    }

    #experience .item-image img[b-ycr8xktzyx] {
        width: 100%;
        height: auto;
    }

    #experience .item-text[b-ycr8xktzyx] {
        text-align: center;
    }

    #experience .item-text h3[b-ycr8xktzyx] {
        margin-top: 1rem;
    }

    #experience .item-image-1[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 2;
    }

    #experience .item-image-2[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 4;
    }

    #experience .item-image-3[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 6;
    }

    #experience .item-image-4[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 8;
    }

    #experience .item-image-5[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 10;
    }

    #experience .item-text-1[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 3;
    }

    #experience .item-text-2[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 5;
    }

    #experience .item-text-3[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 7;
    }

    #experience .item-text-4[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 9;
    }

    #experience .item-text-5[b-ycr8xktzyx] {
        grid-column: 2 / span 2;
        grid-row: 11;
    }
}

/*
    PRICING SECTION
*/
#pricing[b-ycr8xktzyx] {
    background-color: #ffffff;
    padding-bottom: 0;
}

    #pricing .container[b-ycr8xktzyx] {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        width: 60%;
        margin: 0 auto;
    }

    #pricing .content[b-ycr8xktzyx] {
        display: flex;
        flex-direction: row;
        margin: 0 auto 3rem auto;
    }

        #pricing .content .cell[b-ycr8xktzyx] {
            width: 15%;
        }

        #pricing .content h2[b-ycr8xktzyx] {
            margin-bottom: 1rem;
        }

    #pricing .content-text[b-ycr8xktzyx] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    #pricing .pricing-toggle-container[b-ycr8xktzyx] {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 3rem;
    }

    #pricing .savings-badge[b-ycr8xktzyx] {
        background-color: #49D182;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 1rem;
        transform: rotate(-10deg);
        position: absolute;
        top: -15px;
        right: calc(100% + 20px);
        box-shadow: 0 2px 8px rgba(73, 209, 130, 0.3);
        white-space: nowrap;
    }

    #pricing .pricing-toggle[b-ycr8xktzyx] {
        display: flex;
        background-color: #49D182;
        border-radius: 10px;
        padding: 4px;
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    #pricing .toggle-option[b-ycr8xktzyx] {
        background: transparent;
        border: none;
        padding: 12px 24px;
        cursor: pointer;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        color: white;
        z-index: 2;
        position: relative;
        min-width: 100px;
    }

    #pricing .toggle-option.active[b-ycr8xktzyx] {
        color: #49D182;
    }

    #pricing .toggle-slider[b-ycr8xktzyx] {
        position: absolute;
        top: 4px;
        bottom: 4px;
        width: calc(50% - 4px);
        background-color: white;
        border-radius: 6px;
        transition: transform 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    #pricing .toggle-slider.left[b-ycr8xktzyx] {
        transform: translateX(0);
    }

    #pricing .toggle-slider.right[b-ycr8xktzyx] {
        transform: translateX(100%);
    }
    
    #pricing .item-list[b-ycr8xktzyx] {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #pricing .pricing-card[b-ycr8xktzyx] {
        border-radius: 8px;
        padding: 4rem 3rem;
        text-align: center;
        background: #49D182;
        min-width: 300px;
        max-width: 570px;
    }

    #pricing .pricing-header[b-ycr8xktzyx] {
        border-bottom: 1px solid #ffffff;
        padding-bottom: 1rem;
    }

        #pricing .pricing-header .plan[b-ycr8xktzyx] {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        #pricing .pricing-header .price[b-ycr8xktzyx] {
            color: #ffffff;
            font-weight: 700;
            font-size: 2.5rem;
            line-height: 72px;
        }

        #pricing .pricing-header .duration[b-ycr8xktzyx] {
            color: #ffffff;
            padding-left: 5px;
            font-weight: 700;
            font-size: 1.143rem;
        }

        #pricing .pricing-header .yearly-total[b-ycr8xktzyx] {
            color: #ffffff;
            font-size: 1.143rem;
        }

        #pricing .pricing-header p[b-ycr8xktzyx] {
            color: #ffffff;
            font-weight: 500;
            font-size: 1rem;
            padding: 0;
        }

    #pricing .pricing-body .features[b-ycr8xktzyx] {
        list-style-type: none;
        padding: 0;
        margin: 2rem 0;
        text-align: left;
    }

        #pricing .pricing-body .features li[b-ycr8xktzyx] {
            background-image: url(/images/home/check.png);
            background-repeat: no-repeat;
            background-position: 0 50%;
            line-height: 20px;
            padding: 10px 0 10px 40px;
            color: #ffffff;
            font-weight: 500;
            font-size: 1rem;
        }

    #pricing .pricing-footer .buy-btn[b-ycr8xktzyx] {
        /* Button style */
        display: inline-block;
        background-color: white;
        border-radius: 10px;
        padding: 1.25rem 2.375rem;
        width: 80%;
        transition: background-color 0.3s ease-in-out;
        /* Text style */
        font-size: 1.125rem;
        font-weight: 500;
        color: #49D182;
        text-decoration: none;
        text-align: center;
    }

        #pricing .pricing-footer .buy-btn:hover[b-ycr8xktzyx] {
            background-color: #dedede;
        }

@media (max-width: 768px) {

    #pricing .container[b-ycr8xktzyx] {
        width: 90%;
    }

    #pricing .pricing-toggle-container[b-ycr8xktzyx] {
        margin-bottom: 2rem;
    }

    #pricing .savings-badge[b-ycr8xktzyx] {
        top: -50px;
        left: 0;
        transform: none;
        margin-bottom: 0;
        width: fit-content;        
    }

    #pricing .toggle-option[b-ycr8xktzyx] {
        padding: 10px 20px;
        font-size: 0.9rem;
        min-width: 80px;
    }
    
    #pricing .content-text[b-ycr8xktzyx] {
        position: relative;
    }

    #pricing .cell img[b-ycr8xktzyx] {
        position: absolute;
        right: 0;
    }

    #pricing .pricing-card[b-ycr8xktzyx] {
        width: 90%;
        min-width: unset;
        max-width: unset;
        padding: 1rem;
    }

    #pricing .pricing-card .pricing-header[b-ycr8xktzyx] {
        padding-bottom: 0;
    }

    #pricing .pricing-card .pricing-footer .buy-btn[b-ycr8xktzyx] {
        width: 70%;
    }
}

/*
    GALLERY SECTION
*/
#gallery[b-ycr8xktzyx] {
    margin-top: 5rem;
    padding-bottom: 0;
    background-image: linear-gradient(to bottom, #F6FDF9 70%, rgba(255, 255, 255, 0) 30%);
    background-repeat: no-repeat;
}

    #gallery .container[b-ycr8xktzyx] {
        display: grid;
        grid-template-columns: 5% 5% 10% 10% 40% 10% 10% 5% 5%;
        grid-template-rows: auto auto auto auto;
        row-gap: 2rem;
        align-items: center;
        justify-items: center;
    }

    #gallery .content[b-ycr8xktzyx] {
        grid-column: 5;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    #gallery .content h2[b-ycr8xktzyx] {
        margin-bottom: 1rem;
    }

    #gallery .decoration-first[b-ycr8xktzyx] {
        grid-column: 4;
        grid-row: 1;
    }

    #gallery .decoration-last[b-ycr8xktzyx] {
        grid-column: 6;
        grid-row: 2;
    }

    #gallery .decoration-first img[b-ycr8xktzyx],
    #gallery .decoration-last img[b-ycr8xktzyx] {
        width: 100%;
    }

    #gallery .item[b-ycr8xktzyx] {
        grid-column: 2 / span 7;
        grid-row: 4;
        position: relative;
        display: inline-block;
        text-align: center;
    }

        #gallery .item img[b-ycr8xktzyx] {
            width: 100%;
        }

    #gallery .item .bottom-image[b-ycr8xktzyx] {
        position: relative;
        vertical-align: middle;
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        transform: translate(-20px, -25px);
    }

    #gallery .item .top-image[b-ycr8xktzyx] {
        position: absolute;
        width: 88%;
        height: 73%;
        overflow: hidden;
        top: 15%;
        left: 7%;
        border-radius: 5rem;
    }

    #gallery .carousel-slide[b-ycr8xktzyx] {
        display: none;
        transition: opacity 0.5s ease-in-out;
        width: 100%;
        height: 100%;
    }

        #gallery .carousel-slide.active[b-ycr8xktzyx] {
            display: block;
            opacity: 1;
        }

        #gallery .carousel-slide img[b-ycr8xktzyx] {
            width: 100%;
            height: auto;
            object-fit: cover;
            cursor: pointer;
        }

    #gallery .carousel-indicators[b-ycr8xktzyx] {
        display: flex;
        justify-content: center;
        padding-top: 10px;
    }

        #gallery .carousel-indicators span[b-ycr8xktzyx] {
            height: 10px;
            width: 10px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            cursor: pointer;
        }

            #gallery .carousel-indicators span.active[b-ycr8xktzyx] {
                background-color: #666;
            }

@media (max-width: 1232px) {

    #gallery .content[b-ycr8xktzyx] {
        grid-column: 4 / span 3;
    }

    #gallery .decoration-first[b-ycr8xktzyx] {
        grid-column: 3;
        grid-row: 1;
    }

    #gallery .decoration-last[b-ycr8xktzyx] {
        grid-column: 7;
        grid-row: 2;
    }
}

@media (max-width: 768px) {
    #gallery .content[b-ycr8xktzyx] {
        grid-column: 3 / span 5;
    }

    #gallery .decoration-first[b-ycr8xktzyx] {
        grid-column: 2;
        grid-row: 1;
    }

    #gallery .decoration-last[b-ycr8xktzyx] {
        grid-column: 8;
        grid-row: 3;
    }

        #gallery .decoration-first img[b-ycr8xktzyx],
        #gallery .decoration-last img[b-ycr8xktzyx] {
            width: 50px;
            height: 50px;
            object-fit: contain;
            display: none;
        }

    #gallery .item[b-ycr8xktzyx] {
        grid-column: 1 / span 9;
    }

        #gallery .item .top-image[b-ycr8xktzyx] {

            border-radius: 60px;
        }
}

/* 
    GALLERY MODAL
*/
.gallery-modal[b-ycr8xktzyx] {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
}

.modal-show[b-ycr8xktzyx] {
    display: flex !important;
}

.gallery-modal-content[b-ycr8xktzyx] {
    margin: auto;
    width: 90%;
    max-width: 1920px;
}

.gallery-close[b-ycr8xktzyx] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

    .gallery-close:hover[b-ycr8xktzyx],
    .gallery-close:focus[b-ycr8xktzyx] {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }


/*
    CONTACT SECTION
*/
#contact[b-ycr8xktzyx] {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 75%, #003C19 25%);
    background-repeat: no-repeat;
    padding-bottom: 0;
}

    #contact .container[b-ycr8xktzyx] {
        display: flex;
        flex-direction: row;
        background-color: #49D182;
        background-image: url(/images/home/contactBgd.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        max-width: calc(60 * 1920px / 100);
        width: 60%;
        height: 200px;
        margin: 5rem auto 0 auto;
        border-radius: 35px;
        align-items: center;
        justify-content: space-evenly;
    }

    #contact .container p[b-ycr8xktzyx] {
        color: #ffffff;
        font-weight: 700;
        font-size: 2.5rem;
        line-height: 60px;
    }

        #contact .container .contact-btn[b-ycr8xktzyx] {
            /* Button style */
            background-color: white;
            border-radius: 10px;
            padding: 1.25rem 2.375rem;
            width: 100%;
            transition: background-color 0.3s ease-in-out;
            /* Text style */
            font-size: 1.125rem;
            font-weight: 500;
            color: #49D182;
            text-decoration: none;
            text-align: center;
        }

            #contact .container .contact-btn:hover[b-ycr8xktzyx] {
                background-color: #dedede;
            }

@media (max-width: 1280px) {
    #contact .container[b-ycr8xktzyx] {
        width: 90%;
    }
}

@media (max-width: 860px) {
    #contact .container[b-ycr8xktzyx] {
        width: 90%;
        flex-direction: column;
        height: fit-content;
        text-align: center;
    }

    #contact .container p[b-ycr8xktzyx] {
        font-size: 2rem;
    }

    #contact .container div[b-ycr8xktzyx] {
        margin-bottom: 2.5rem;
    }
}

/*
    FOOTER SECTION
*/
footer[b-ycr8xktzyx] {
    height: fit-content;
    background-color: #003C19;
}

    footer .container[b-ycr8xktzyx] {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 50px;
    }
    
    footer .container.first[b-ycr8xktzyx] {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
    
    footer .container.last[b-ycr8xktzyx] {
        padding-bottom: 2rem;
    }

        footer .container p[b-ycr8xktzyx] {
            font-weight: 600;
            font-size: 1rem;
            color: #ffffff;
            padding: 0;
            margin: 0;
        }

            footer .container p a[b-ycr8xktzyx],
            footer .container a[b-ycr8xktzyx] {
                text-decoration: none;
                cursor: pointer;
                color: #ffffff;
            }
            
            footer .container a:hover[b-ycr8xktzyx] {
                text-decoration: underline;
            }
/* /Components/Pages/Privacy.razor.rz.scp.css */
.privacy-container[b-81zj90tbuj] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333333;
    background-color: #ffffff;
    max-width: 800px;
    margin: 0 auto;
    padding: 5rem 20px 20px;
}

.privacy-container h1[b-81zj90tbuj] {
    color: #4caf50; /* Green color based on Planific's theme */
    border-bottom: 2px solid #4caf50;
    padding-bottom: 10px;
    font-size: 2em;
    text-align: center;
}

.privacy-container h2[b-81zj90tbuj] {
    color: #4caf50;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 5px;
    margin-top: 30px;
    font-size: 1.5em;
}

.privacy-container h3[b-81zj90tbuj] {
    color: #4caf50;
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 10px;
}

.privacy-container p[b-81zj90tbuj] {
    margin: 15px 0;
    text-align: justify;
}

.privacy-container ul[b-81zj90tbuj] {
    list-style-type: square;
    padding-left: 25px;
    margin: 15px 0;
}

.privacy-container ul li[b-81zj90tbuj] {
    margin-bottom: 8px;
}

.privacy-container ul li strong[b-81zj90tbuj] {
    color: #4caf50;
}

.privacy-container a[b-81zj90tbuj] {
    color: #4caf50;
    text-decoration: none;
}

.privacy-container a:hover[b-81zj90tbuj] {
    text-decoration: underline;
}

.date-update[b-81zj90tbuj] {
    font-style: italic;
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.section[b-81zj90tbuj] {
    background-color: #f9f9f9;
    padding: 18px 24px;
    border-radius: 8px;
    margin: 25px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.section[b-81zj90tbuj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: #4caf50;
}

/* Table base styles */
.data-table[b-81zj90tbuj] {
    width: 100%;
    border-collapse: collapse;
}

/* Header styles */
.table-header[b-81zj90tbuj] {
    color: black;
}

.header-cell[b-81zj90tbuj] {
    border: 1px solid #ddd;
    text-align: left;
}

.header-cell.green[b-81zj90tbuj] {
    background-color: #CEE7C8;
}

.header-cell.red[b-81zj90tbuj] {
    background-color: #FFB3BA;
}

.header-cell.white[b-81zj90tbuj] {
    background-color: #F2F2F2;
}

.header-cell.center[b-81zj90tbuj] {
    text-align: center;
}

/* Body cell styles */
.table-cell[b-81zj90tbuj] {
    border: 1px solid #ddd;
}

.table-cell.blue[b-81zj90tbuj] {
    background-color: #DAE3F3;
}

.table-cell.orange[b-81zj90tbuj] {
    background-color: #FBE3D6;
}

.table-cell.center[b-81zj90tbuj] {
    text-align: center;
}

/* Legend styles */
.legend[b-81zj90tbuj] {
    margin: 20px 0;
    font-family: Arial, sans-serif;
}

.legend-items[b-81zj90tbuj] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.legend-item[b-81zj90tbuj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color[b-81zj90tbuj] {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.legend-text[b-81zj90tbuj] {
    font-size: 14px;
}

.legend-note[b-81zj90tbuj] {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

@media (max-width: 600px) {
    .privacy-container[b-81zj90tbuj] {
        padding: 15px;
    }

    .privacy-container h1[b-81zj90tbuj] {
        font-size: 1.8em;
    }

    .privacy-container h2[b-81zj90tbuj] {
        font-size: 1.3em;
    }

    .privacy-container h3[b-81zj90tbuj] {
        font-size: 1.1em;
    }

    .section[b-81zj90tbuj] {
        padding: 15px 18px;
    }
}
/* /Components/TeachingManagement/AddFileLink.razor.rz.scp.css */
.pe-modal[b-4hjo4ueee4] {
    height: fit-content;
    width: min(450px, 95vw);
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
}

/* Remove focus outline for all elements within the modal */
.pe-modal *:focus[b-4hjo4ueee4] {
    outline: none;
}

.pe-border-margin[b-4hjo4ueee4] {
    padding: 0.5rem;
}

.modal-title[b-4hjo4ueee4] {
    background-color: #3c3f4f;
    color: white;
    padding: 10px;
    border-radius: 30px 30px 0 0;
    text-align: center;
}

.head-block[b-4hjo4ueee4] {
    margin: 0 auto;
    width: fit-content;
}

.head-block .task-description[b-4hjo4ueee4] {
    padding: 0;
    margin: 1rem 0.5rem;
}

.task-description[b-4hjo4ueee4] {
    padding: 1rem;
}

.task-title[b-4hjo4ueee4] {
    border: none;
    border-bottom: 1px solid #3c3f4f;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 350px;
}

.control-container[b-4hjo4ueee4] {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 1.5rem 0.25rem 1.5rem;
}
/* /Components/TeachingManagement/ChangelogModal.razor.rz.scp.css */
.changelog-modal[b-zll1u45gts] {
    padding: 0.5rem;
    margin: 2rem auto;
    max-width: 600px;
    overflow-y: auto;
    background-color: white;
    border-radius: 30px;
}

/* Minor version styles */
.minor-version-group[b-zll1u45gts] {
    margin: 1rem 0;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    overflow: hidden;
}

.minor-version-header[b-zll1u45gts] {
    margin: 0;
    text-align: left;
    cursor: pointer;
    user-select: none;
    padding: 15px;
    background-color: #eef0f3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xlarge);
    transition: background-color 0.3s ease;
}

.minor-version-header:hover[b-zll1u45gts] {
    background-color: #e2e5ea;
}

.minor-version-content[b-zll1u45gts] {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease;
}

.minor-version-group.expanded .minor-version-content[b-zll1u45gts] {
    max-height: 500vh;
    padding: 10px;
    transition: max-height 0.5s ease-in, padding 0.5s ease;
}

/* Patch version styles */
.version-group[b-zll1u45gts] {
    margin: 0.5rem 0;
    overflow: hidden;
}

.version-header[b-zll1u45gts] {
    color: #666;
    margin: 0;
    text-align: left;
    cursor: pointer;
    user-select: none;
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-medium);
    transition: background-color 0.3s ease;
}

.version-header:hover[b-zll1u45gts] {
    background-color: #e0e0e0;
}

.version-content[b-zll1u45gts] {
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease;
}

.version-group.expanded .version-content[b-zll1u45gts] {
    max-height: 150vh;
    padding: 15px;
    transition: max-height 0.5s ease-in, padding 0.5s ease;
}

/* Common styles */
.toggle-icon[b-zll1u45gts] {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.minor-version-group.expanded .minor-version-header .toggle-icon[b-zll1u45gts],
.version-group.expanded .version-header .toggle-icon[b-zll1u45gts] {
    transform: rotate(180deg);
}

.changelog-modal h4[b-zll1u45gts] {
    margin-top: 15px;
    margin-bottom: 10px;
}

.changelog-modal ul[b-zll1u45gts] {
    padding-left: 20px;
}

.changelog-modal li[b-zll1u45gts] {
    margin-bottom: 5px;
}

.changelog-modal .row.no-margin[b-zll1u45gts] {
    margin: 0;
}

.control-container button[b-zll1u45gts] {
    padding: 5px 15px;
    text-align: center;
    color: white;
    background: #49d182;
    border-radius: 10px;
    font-size: var(--font-size-medium);
    text-transform: uppercase;
    transition: transform 0.3s ease-in-out;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #49d182;
    width: 200px;
    margin: 0 auto;
}

.control-container button:hover[b-zll1u45gts] {
    color: white;
    transform: scale(1.1);
}
/* /Components/TeachingManagement/Confirm.razor.rz.scp.css */
.pe-modal[b-l2pwai3nct] {
    height: fit-content;
    width: fit-content;
    min-width: min(450px, 95vw);
    margin: 5rem auto 0;
    background-color: white;
    border-radius: 30px;
}

.pe-border-margin[b-l2pwai3nct] {
    padding: 0.5rem;
}

.confirm-container[b-l2pwai3nct] {
    height: fit-content;
    text-align: center;
    background-color: white;
    max-width: 750px;
    border-radius: 15px;
    margin: 0 auto;
}

.confirm-text[b-l2pwai3nct] {
    font-size: var(--font-size-base);
    margin-top: 1rem;
}

.deletion-summary[b-l2pwai3nct] {
    font-size: var(--font-size-base);
    color: #c0392b;
    margin-top: 0.75rem;
    font-style: italic;
}

.control-container[b-l2pwai3nct] {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem 0.25rem 1.5rem;
}

/* Recurrence */
.lesson-info[b-l2pwai3nct] {
    margin: 2rem auto 0;
}

.options[b-l2pwai3nct] {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: fit-content;
    margin: 2rem auto;
}

/* CheckboxDesign */
/* The container */
.check-container[b-l2pwai3nct] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

/* Hide the browser's default checkbox */
.check-container input[b-l2pwai3nct] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark[b-l2pwai3nct] {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: #ffffff;
    border: 1px solid #D3D3D3;
    vertical-align: middle;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark[b-l2pwai3nct] {
    background-color: #eee;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark[b-l2pwai3nct]:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark[b-l2pwai3nct]:after {
    display: inline-block;
}

/* Style the checkmark/indicator */
.check-container .checkmark[b-l2pwai3nct]:after {
    left: 7px;
    top: -5px;
    width: 10px;
    height: 20px;
    border: solid #49d182;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
/* /Components/TeachingManagement/DayPlan/BreakComponent.razor.rz.scp.css */
.break[b-w7it3011mj] {
    color: white;
    margin: 0;
    background-color: #4b5161;
    text-align: center;
    border-radius: 10px;
    border: 3px solid #27dc95;
}

.text-normal[b-w7it3011mj] {
    font-size: var(--font-size-medium);
}

.text-small[b-w7it3011mj] {
    font-size: var(--font-size-xsmall);
}
/* /Components/TeachingManagement/DayPlan/ClassPlanComponent.razor.rz.scp.css */
.white-border[b-3zz0w6w452] {
    padding: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.pe-margin-right[b-3zz0w6w452] {
    margin-right: 0.5rem;
}

.pe-header-2[b-3zz0w6w452] {
    font-size: var(--font-size-xxlarge);
    min-height: 55px;
    position: relative;
}

.pe-header-2 p[b-3zz0w6w452] {
    display: block;
    margin: auto;
}

.pe-weekformat[b-3zz0w6w452] {
    font-size: var(--font-size-base);
    margin-left: 1.5rem !important;
    text-align: center;
}
/* /Components/TeachingManagement/DayPlan/DayPlan.razor.rz.scp.css */
.pe-no-margin[b-dg3hukbauy] {
    margin: 0;
    row-gap: 0.5rem;
}

.spacing[b-dg3hukbauy] {
    padding-right: 0;
    padding-left: 0;
}

.white-border[b-dg3hukbauy] {
    padding: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    height: 95vh;
}

.fit-content[b-dg3hukbauy] {
    height: fit-content;
    min-height: 400px;
}

.header[b-dg3hukbauy] {
    background-color: #4b5161;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    padding: 0.5rem;
    margin: 0 0 0 0 !important;
}

.elder-scroll[b-dg3hukbauy] {
    margin: 0;
    max-height: 87vh;
    overflow-y: auto;
}

.text-small[b-dg3hukbauy] {
    font-size: var(--font-size-base);
    padding-left: 0.5rem;
}

.text-small a[b-dg3hukbauy] {
    all: unset;
    cursor: pointer;
}

.text-medium[b-dg3hukbauy] {
    font-size: var(--font-size-large);
}

.text-large[b-dg3hukbauy] {
    font-size: var(--font-size-xxlarge);
}

div[b-dg3hukbauy] {
    --bs-gutter-x: 0;
}

/* Bootstrap's own .col-lg-7/.col-lg-5 only kick in at its 992px breakpoint, putting the two
   columns side by side well before there's actually enough room - the seating plan/work
   checker column in particular gets squeezed between there and ~1280px. Override them back to
   full width (stacked, same as below 992px) up to that point instead of waiting on a wider
   Bootstrap breakpoint (xl is 1200px, still short of what this column needs). */
@media (max-width: 1280px) {
    .col-lg-7[b-dg3hukbauy],
    .col-lg-5[b-dg3hukbauy] {
        flex: 0 0 auto;
        width: 100%;
    }
}

.collapse-cmd[b-dg3hukbauy] {
    text-align: right;
    padding-right: 1rem;
}

.collapse-arrow[b-dg3hukbauy] {
    margin-right: 0.5rem;
}

.collapse-cmd img[b-dg3hukbauy] {
    cursor: pointer;
}

.img-helper[b-dg3hukbauy] {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.green-text[b-dg3hukbauy] {
    color: limegreen !important;
    text-decoration: underline !important;
    text-decoration-color: white !important;
}

.header-top-row[b-dg3hukbauy] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0 0.75rem;
}

.header-title[b-dg3hukbauy] {
    text-align: left;
}

.class-list[b-dg3hukbauy] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.class-list span[b-dg3hukbauy] {
    margin-left: 0;
    margin-right: 0;
    cursor: pointer;
}

.wc-loading[b-dg3hukbauy] {
    height: 8rem;
}

.warning-message[b-dg3hukbauy] {
    text-align: center;
    margin-top: 5%;
    font-size: var(--font-size-medium);
}
/* /Components/TeachingManagement/DayPlan/LessonComponent.razor.rz.scp.css */
/**
    
    Custom css for lessons
    
    **/

.pe-border-left[b-szioudn3tw] {
    border-left: solid;
    border-bottom: solid;
}

.pe-border-right[b-szioudn3tw] {
    border-right: solid;
    border-bottom: solid;
}

.pe-border-first[b-szioudn3tw] {
    border-bottom-left-radius: 10px;
}

.pe-border-last[b-szioudn3tw] {
    border-bottom-right-radius: 10px;
    /* Absorbs the sub-pixel remainder left over from three 33.3333% (col-4)
       flex-basis widths, which browsers round differently and can otherwise
       leave a hairline gap after the last column. */
    flex-grow: 1;
}

.p-gray[b-szioudn3tw] {
    color: gray;
}

.block[b-szioudn3tw] {
    display: inline-block;
}

.border[b-szioudn3tw] {
    border-style: solid;
}

.lesson[b-szioudn3tw] {
    color: white;
    margin: 0;
    height: 45px;
}

.documents-header[b-szioudn3tw] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 45px;
    padding-left: 0.75rem;
    color: white;
}

.border-collapsed[b-szioudn3tw] {
    border-radius: 10px;
}

.border-not-collapsed[b-szioudn3tw] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.collapse-toggle[b-szioudn3tw] {
    align-items: center;
    justify-content: flex-end;
}

.my-tasks-header[b-szioudn3tw] {
    gap: 0.5rem;
}

.text-large[b-szioudn3tw] {
    font-size: var(--font-size-xxlarge);
    line-height: 1;
}

.text-medium[b-szioudn3tw] {
    font-size: var(--font-size-large);
    line-height: 1;
}

.text-small[b-szioudn3tw] {
    font-size: var(--font-size-base);
    line-height: 1;
}

.small-icon[b-szioudn3tw] {
    width: auto;
    max-height: 1.8rem;
}

.small-icon.no-hover:hover[b-szioudn3tw] {
    cursor: default;
}

.small-icon:hover[b-szioudn3tw] {
    cursor: pointer;
}

.warning-hidden[b-szioudn3tw] {
    visibility: hidden;
}

.icon[b-szioudn3tw] {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon > div[b-szioudn3tw],
.icon picture[b-szioudn3tw] {
    /* Without this, the plain block only wraps inline content, so its box
       is sized by the line box (font metrics) instead of the actual child
       height, and the child ends up baseline-aligned instead of centered. */
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-list[b-szioudn3tw] {
    padding-left: 0;
    padding-right: 0;
}

.inlisttaskgroup[b-szioudn3tw] {
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    padding-left: var(--font-size-xsmall);
    padding-right: var(--font-size-xsmall);
}

.inlisttaskgroup.row-even[b-szioudn3tw] {
    background-color: #fafafa;
}

.inlisttask[b-szioudn3tw] {
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: calc(100% - 40px);
    text-align: left;
    border: none;
    white-space: initial;
    display: inline-block;
}

.inlisttask > span[b-szioudn3tw] {
    display: inline-block;
}

.dliconimg[b-szioudn3tw] {
    width: auto;
    height: var(--font-size-base);
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    vertical-align: unset;
    cursor: pointer;
}

/* CheckboxDesign */
/* The container */
.container[b-szioudn3tw] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--font-size-base);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 0;
}

/* Hide the browser's default checkbox */
.container input[b-szioudn3tw] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark[b-szioudn3tw] {
    position: relative;
    display: inline-block;
    height: var(--font-size-large);
    width: var(--font-size-large);
    background-color: #ffffff;
    border: 1px solid #4f96ed;
    vertical-align: middle;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark[b-szioudn3tw] {
    background-color: #eee;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark[b-szioudn3tw]:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark[b-szioudn3tw]:after {
    display: inline-block;
}

/* Style the checkmark/indicator */
.container .checkmark[b-szioudn3tw]:after {
    bottom: 1px;
    right: 1px;
    width: calc(var(--font-size-large)/2);
    height: var(--font-size-large);
    border: solid #49d182;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/**
    
    Html overwrite
    
    **/
p[b-szioudn3tw] {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}

img[b-szioudn3tw] {
    vertical-align: sub;
}

/**
    
    Bootstrap overwrite
    
    **/

.row[b-szioudn3tw] {
    margin-left: 0;
    margin-right: 0;
}

/* Files list */
.file-row[b-szioudn3tw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 0.1rem;
}

.file-row.row-even[b-szioudn3tw] {
    background-color: #fafafa;
}

.file-row:hover[b-szioudn3tw] {
    background-color: #f5f5f5;
}

.file-content[b-szioudn3tw] {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.file-icon[b-szioudn3tw] {
    width: auto;
    height: var(--font-size-base);
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

.file-name[b-szioudn3tw] {
    text-wrap: wrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.delete-icon:hover[b-szioudn3tw] {
    opacity: 0.7;
}
/* /Components/TeachingManagement/FileLinkComponent.razor.rz.scp.css */
.split-list[b-35xqyyt1ft] {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.horizontal-split[b-35xqyyt1ft] {
    flex-direction: column;
    gap: 0.5rem;
}

.half-container[b-35xqyyt1ft] {
    width: 45%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.horizontal-split .half-container[b-35xqyyt1ft] {
    width: 100%;
}

.pe-grey-border[b-35xqyyt1ft] {
    border: 2px dashed #4b5161;
    border-radius: 10px;
    padding: 1rem;
    font-size: var(--font-size-base);
}

#ImgLink[b-35xqyyt1ft] {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    max-height: 80px;
}

.link-instruction[b-35xqyyt1ft] {
    display: block;
    padding: 5px;
    text-align: center;
    font-size: var(--font-size-small);
    line-height: 1.4;
    margin-bottom: 1rem;
}

.add-link-section[b-35xqyyt1ft] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 1rem;
}

.add-link-btn[b-35xqyyt1ft] {
    padding: 0.5rem 1.5rem;
    background-color: #4b5161;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: var(--font-size-medium);
    transition: background-color 0.2s;
    width: 220px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.button-icon[b-35xqyyt1ft] {
    width: auto;
    height: var(--font-size-base);
}

.add-link-btn:hover:not(:disabled)[b-35xqyyt1ft] {
    background-color: #53596B;
}

/* Files list */
.file-container[b-35xqyyt1ft] {
    display: flex;
    flex-direction: column;
    width: fit-content;
}

.file-row[b-35xqyyt1ft] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    cursor: pointer;
    width: 220px;
}

.file-row:hover[b-35xqyyt1ft] {
    background-color: #f5f5f5;
}

.file-content[b-35xqyyt1ft] {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.file-icon[b-35xqyyt1ft] {
    width: auto;
    height: var(--font-size-base);
    margin-right: 10px;
}

.file-name[b-35xqyyt1ft] {
    margin-right: 1rem;
    width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delete-icon[b-35xqyyt1ft] {
    width: auto;
    height: var(--font-size-base);
    cursor: pointer;
    flex-shrink: 0;
}

.delete-icon:hover[b-35xqyyt1ft] {
    opacity: 0.7;
}

/* Simple view (when SplitType is None) */
.files-list-container[b-35xqyyt1ft] {
    border-bottom: 1px solid #e9ecef;
}

.file-row-simple[b-35xqyyt1ft] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.file-row-simple:last-child[b-35xqyyt1ft] {
    border-bottom: none;
}

.link-text[b-35xqyyt1ft] {
    cursor: pointer;
    color: #007bff;
    text-decoration: none;
    flex-grow: 1;
}

.link-text:hover[b-35xqyyt1ft] {
    text-decoration: underline;
}

.delete-icon-simple[b-35xqyyt1ft] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 1rem;
    flex-shrink: 0;
}

.delete-icon-simple:hover[b-35xqyyt1ft] {
    opacity: 0.7;
}
/* /Components/TeachingManagement/Inform.razor.rz.scp.css */
.inform-container[b-mgj8ms8rnf] {
    height: fit-content;
    text-align: center;
    background-color: white;
    max-width: 400px;
    border-radius: 15px;
    margin: 5rem auto 0;
}

.inform-container > div[b-mgj8ms8rnf] {
    padding: 1rem;
}

p[b-mgj8ms8rnf] {
    font-size: var(--font-size-medium);
}

.control-container[b-mgj8ms8rnf] {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem 0.25rem 1.5rem;
}
/* /Components/TeachingManagement/NavBarComponent.razor.rz.scp.css */
[b-eny4r6c591] .pe-border {
    border: 2px solid #D3D3D3;
    border-radius: 75px;
}
[b-eny4r6c591] .pe-border:hover {
    border-color: #27dc95;
}
[b-eny4r6c591] .pe-border:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(39, 220, 149, 0.35);
}

#menu[b-eny4r6c591] {
    margin-top: 2rem;
    min-height: fit-content;
}

.nav-item[b-eny4r6c591] {
    position: relative;
}

.nav-item .tooltiptext[b-eny4r6c591] {
    visibility: hidden;
    width: fit-content;
    background-color: #4b5161;
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 100%;
}

.nav-item .tooltiptext[b-eny4r6c591]::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.nav-item:hover .tooltiptext[b-eny4r6c591] {
    visibility: hidden;
}

.nav-profile[b-eny4r6c591] {
    width: 150px;
    word-wrap: break-word;
    color: var(--text-color-default);
    text-decoration: none;
}

[b-eny4r6c591] .nav-link {
    width: 150px;
    word-wrap: break-word;
    color: #D3D3D3;
}

[b-eny4r6c591] .nav-link:hover, [b-eny4r6c591] .nav-link:focus {
    color: #27dc95;
}

[b-eny4r6c591] .nav-link img {
    height: 80px;
    width: 80px;
}

.nav-profile:hover[b-eny4r6c591] {
    filter: brightness(1.05);
}

[b-eny4r6c591] .nav-active {
    background-color: transparent !important;
}

[b-eny4r6c591] .nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(39, 220, 149, 0.35);
}

[b-eny4r6c591] .nav-active img {
    border-color: #27dc95;
}

.nav-item-group[b-eny4r6c591] {
    position: relative;
    z-index: 1001;
}

/* Full-viewport, invisible: lets a tap anywhere outside an open flyout dismiss it
   on touch devices, where there's no mouseleave to trigger ClosePlanFlyout/CloseWorkCheckerFlyout. */
.nav-flyout-backdrop[b-eny4r6c591] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

.nav-item-group[b-eny4r6c591]::after {
    content: "\25C0";
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-small);
}

.nav-flyout[b-eny4r6c591] {
    display: none;
    position: absolute;
    top: -2rem;
    right: 14rem;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    border-radius: 10px;
    overflow: hidden;
    z-index: 1000;
    min-width: 190px;
}

.nav-flyout-small[b-eny4r6c591] {
    top: 0;
}

.nav-flyout.nav-flyout-open[b-eny4r6c591] {
    display: block;
    animation: navFlyoutAppear-b-eny4r6c591 0.2s ease forwards;
}

@keyframes navFlyoutAppear-b-eny4r6c591 {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nav-flyout-item[b-eny4r6c591] {
    position: relative;
    border-bottom: 1px solid #ddd;
}

.nav-flyout-item:last-child[b-eny4r6c591] {
    border-bottom: none;
}

[b-eny4r6c591] .nav-flyout-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0;
    color: #D3D3D3;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-flyout-item:hover[b-eny4r6c591]  .nav-flyout-link {
    background-color: #f8f9fa;
    color: #27dc95;
}

[b-eny4r6c591] .nav-flyout-link.nav-active {
    background-color: #eafbf3;
    color: #20a674;
}

[b-eny4r6c591] .nav-flyout-link img {
    height: 30px;
    width: 30px;
}

[b-eny4r6c591] .nav-flyout-link .nav-flyout-label {
    color: var(--text-color-default);
}

[b-eny4r6c591] .nav-flyout-link.nav-active .nav-flyout-label {
    color: #20a674;
}

.last-item[b-eny4r6c591] {
    margin: 0 auto 0.5rem auto;
}

.notify-container[b-eny4r6c591] {
    position:  relative;
    text-align: center;
    color: white;
}

.notification[b-eny4r6c591] {
    height: 27px !important;
    width: 27px !important;
    position: absolute;
    left: 63%;
    top: 0;
}

.number[b-eny4r6c591] {
    height: 27px !important;
    width: 27px !important;
    position: absolute;
    top: 0;
    right: 2.8rem;
    margin-top: 4px;
    font-size: var(--font-size-small);
}

.notification-correction[b-eny4r6c591] {
    left: 60%;
}

.log-off-button[b-eny4r6c591] {
    padding: 0;
    border: none;
    background: transparent;
    transition: filter 0.2s ease;
}

.log-off-button:hover[b-eny4r6c591] {
    filter: brightness(1.1);
}

/* ── Small screens: sidebar becomes a horizontal bottom bar ── */
@media (max-width: 650px) {
    .d-flex.flex-column.align-items-center[b-eny4r6c591] {
        flex-direction: row !important;
        width: auto;
        min-width: 0;
        flex: 1;
        overflow-x: auto;
    }

    #menu[b-eny4r6c591] {
        margin-top: 0;
        margin-bottom: 0 !important; /* overrides Bootstrap's .mb-sm-auto (active from 576px, overlaps this breakpoint) */
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.5rem;
        width: max-content;
    }

    .nav-item[b-eny4r6c591] {
        flex-shrink: 0;
    }

    .nav-profile[b-eny4r6c591] {
        width: auto;
    }

    .nav-profile p[b-eny4r6c591] {
        display: none;
    }

    .nav-profile img[b-eny4r6c591] {
        height: 50px !important;
        width: 50px !important;
    }

    [b-eny4r6c591] .nav-link {
        width: auto;
    }

    [b-eny4r6c591] .nav-link img,
    [b-eny4r6c591] .pe-border {
        height: 50px !important;
        width: 50px !important;
    }

    .nav-item .tooltiptext[b-eny4r6c591] {
        display: none !important;
    }

    /* No room for the left-pointing hint arrow at bottom-bar scale; the flyout
       still opens off the group's own icon, tap-triggered same as tablet/desktop. */
    .nav-item-group[b-eny4r6c591]::after {
        display: none;
    }

    /* #menu scrolls horizontally (overflow-x: auto), which forces its overflow-y
       to auto too — a flyout positioned relative to its trigger icon would get
       clipped by that. Anchor it to the viewport instead, centered above the
       fixed bottom bar, independent of which icon opened it or its scroll offset. */
    .nav-flyout[b-eny4r6c591] {
        position: fixed;
        top: auto;
        right: auto;
        bottom: calc(67px + 0.5rem);
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: calc(100vw - 1rem);
    }

    .nav-flyout.nav-flyout-open[b-eny4r6c591] {
        animation: navFlyoutAppearMobile-b-eny4r6c591 0.2s ease forwards;
    }

    .notify-container .notification[b-eny4r6c591],
    .notify-container .notification.notification-correction[b-eny4r6c591] {
        height: 17px !important;
        width: 17px !important;
        top: -2px;
        left: auto;
        right: -2px;
    }

    .notify-container .number[b-eny4r6c591],
    .notify-container .number.notification-correction[b-eny4r6c591] {
        height: 17px !important;
        width: 17px !important;
        top: -2px;
        left: auto;
        right: -2px;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        line-height: 1;
    }

    .last-item[b-eny4r6c591] {
        margin: 0 0.5rem 0 0;
        flex-shrink: 0;
    }

    .log-off-button img[b-eny4r6c591] {
        height: 40px;
        width: 40px;
    }
}

@keyframes navFlyoutAppearMobile-b-eny4r6c591 {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* /Components/TeachingManagement/Notification/ShowNotifications.razor.rz.scp.css */
.pe-modal[b-a63yj1hhj7] {
    height: fit-content;
    width: min(900px, 95vw);
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
}

.pe-border-margin[b-a63yj1hhj7] {
    padding: 0.5rem;
}

.notification-list[b-a63yj1hhj7] {
    max-height: 95vh;
    min-height: 40rem;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

.pe-line-even[b-a63yj1hhj7] {
    background-color: white;
}

.pe-line-odd[b-a63yj1hhj7] {
    background-color: #f6f6f6;
}

.notification-list .notification-item[b-a63yj1hhj7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.75rem;
}

.notification-list .notification-item:last-child[b-a63yj1hhj7] {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.no-notifications[b-a63yj1hhj7] {
    margin: 5rem auto;
    text-align: center;
    font-size: var(--font-size-large);
}
/* /Components/TeachingManagement/Profile/AccountManagementComponent.razor.rz.scp.css */
.white-border-inside[b-pxvzyny8vy] {
    padding: 0.5rem;
    margin-left: 0;
    margin-top: 0.5rem;
    margin-right: -0.5rem;
    border-radius: 10px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.pe-margin-right[b-pxvzyny8vy] {
    margin-right: 0.5rem;
}

.pe-header-2[b-pxvzyny8vy] {
    font-size: var(--font-size-xxlarge);
    height: 55px;
    position: relative;
}

.pe-header-2 p[b-pxvzyny8vy] {
    display: block;
    margin: auto;
}

.profile-container[b-pxvzyny8vy] {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

@media(max-width: 1500px){
    .profile-container[b-pxvzyny8vy] {
        justify-content: center;
        gap: 1rem;
    }
}

.green-text[b-pxvzyny8vy] {
    color: #49d182;
}

.profile-block[b-pxvzyny8vy] {
    margin-top: 2rem;
}

.profile-row[b-pxvzyny8vy] {
    display: flex;
    justify-content: center;
    font-size: var(--font-size-large);
    align-items: center;
    gap: 0.25rem;
}

.profile-row img[b-pxvzyny8vy] {
    height: 2rem;
    width: auto;
    object-fit: contain;
}

.activate-container[b-pxvzyny8vy] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 2rem 0.5rem 0.5rem 0.5rem
}

.activate-container button[b-pxvzyny8vy] {
    padding: 5px 15px;
    text-align: center;
    color: white;
    background: #49d182;
    border-radius: 10px;
    font-size: var(--font-size-medium);
    text-transform: uppercase;
    transition: transform 0.3s ease-in-out;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #49d182;
}

.activate-container button:hover[b-pxvzyny8vy]
{
    color: white;
    transform: scale(1.1);
}

.download-container[b-pxvzyny8vy] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 10rem 0.5rem 0.5rem 0.5rem;
}

.download-container button[b-pxvzyny8vy] {
    padding: 5px 15px;
    text-align: center;
    color: white;
    background: #49d182;
    border-radius: 10px;
    font-size: var(--font-size-base);
    text-transform: uppercase;
    transition: transform 0.3s ease-in-out;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #49d182;
}

.download-container button:hover[b-pxvzyny8vy]
{
    color: white;
    transform: scale(1.1);
}

.delete-container[b-pxvzyny8vy] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.delete-container button[b-pxvzyny8vy] {
    padding: 5px 15px;
    text-align: center;
    color: white;
    background: #de5f5f;
    border-radius: 10px;
    font-size: var(--font-size-base);
    text-transform: uppercase;
    transition: transform 0.3s ease-in-out;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #de5f5f;
}

.delete-container button:hover[b-pxvzyny8vy]
{
    color: white;
    transform: scale(1.1);
}
/* /Components/TeachingManagement/Profile/Profile.razor.rz.scp.css */
.pe-no-margin[b-he2zingc6g] {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

.spacing[b-he2zingc6g] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.white-border[b-he2zingc6g] {
    padding: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    min-height: 95vh;
}

.pe-row[b-he2zingc6g] {
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 0;
}

.pe-block[b-he2zingc6g] {
    margin-left: 0;
    margin-right: -0.625rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    height: fit-content;
    min-width: 300px;
}

@media (max-width: 33.9em) {
    .pe-block[b-he2zingc6g] {
        margin-left: -0.625rem;
    }
}

.first-column > .pe-block[b-he2zingc6g] {
    margin-left: -0.625rem;
    margin-right: -0.625rem;
}

.last-column > .pe-block[b-he2zingc6g] {
    margin-right: -0.625rem;
}

.white-border-inside[b-he2zingc6g] {
    padding: 0.5rem;
    margin-left: 0;
    margin-top: 0.5rem;
    margin-right: -0.5rem;
    border-radius: 10px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.pe-margin-right[b-he2zingc6g] {
    margin-right: 0.5rem;
}

.pe-header-2[b-he2zingc6g] {
    font-size: var(--font-size-xxlarge);
    height: 55px;
    position: relative;
}

.pe-header-2 p[b-he2zingc6g] {
    display: block;
    margin: auto;
}

.avatar-container[b-he2zingc6g] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media(max-width: 1500px){
    .avatar-container[b-he2zingc6g] {
        justify-content: center;
        gap: 1rem;
    }
}

.control-container[b-he2zingc6g] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 2rem 0.5rem 0.5rem 0.5rem;
}

.pseudo-container[b-he2zingc6g] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pseudo-container div[b-he2zingc6g] {
    margin: 0 0.5rem;
}

@media(max-width: 1630px)
{
    .pseudo-container[b-he2zingc6g] {
        justify-content: center;
        gap: 1rem;
    }
}

#displayName[b-he2zingc6g] {
    border-top-style: none;
    border-right-style: none;
    border-bottom: 1px solid #ced4da;
    border-left-style: none;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.5rem 5px 0 5px;
    font-size: var(--font-size-base);
}

.name-container[b-he2zingc6g] {
    display: flex;
    align-items: center;
}

.control-container button[b-he2zingc6g],
.name-container button[b-he2zingc6g] {
    padding: 5px 15px;
    text-align: center;
    color: white;
    background: #49d182;
    border-radius: 10px;
    font-size: var(--font-size-base);
    text-transform: uppercase;
    transition: transform 0.3s ease-in-out;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #49d182;
}

.control-container button:hover[b-he2zingc6g],
.name-container button:hover[b-he2zingc6g] {
    color: white;
    transform: scale(1.1);
}
/* /Components/TeachingManagement/Profile/UserAvatar/AvatarColorCustomization.razor.rz.scp.css */
.color-container[b-epxt80o9ku] {
    display: flex;
    flex-direction: column;
    width: 150px;
}

.category-subtitle[b-epxt80o9ku] {
    font-size: var(--font-size-large);
    margin: 0;
    padding: 0;
}
/* /Components/TeachingManagement/Profile/UserAvatar/AvatarCustomizationOptions.razor.rz.scp.css */
.item-container[b-ls90ahaoq5] {
    min-width: 200px;
}
/* /Components/TeachingManagement/Profile/UserAvatar/ColorPicker.razor.rz.scp.css */
.color-choice[b-dxxngo5x2a] {
    display: flex;
    flex-direction: row;
    margin: 0 0.5rem 0 0;
    justify-content: space-between;
    align-items: center;
}

.color-choice label[b-dxxngo5x2a] {
    margin: 0 1rem 0 0
}

.color-choice input[type="color"][b-dxxngo5x2a] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.color-choice input[type="color"][b-dxxngo5x2a]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-choice input[type="color"][b-dxxngo5x2a]::-webkit-color-swatch {
    border: none;
    border-radius: 20%;
}

.color-choice input[type="color"][b-dxxngo5x2a]::-moz-color-swatch {
    border: none;
    border-radius: 20%;
}

.color-choice input[type="color"]:focus[b-dxxngo5x2a] {
    outline: none;
}

.color-choice input[type="color"]:hover[b-dxxngo5x2a] {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}
/* /Components/TeachingManagement/Profile/UserAvatar/CustomizationSection.razor.rz.scp.css */
.category-subtitle[b-zly2a62215] {
    font-size: var(--font-size-large);
    margin: 0;
    padding: 0;
}

.item-option[b-zly2a62215] {
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    border: 2px solid transparent;
}

.item-option.selected[b-zly2a62215] {
    border: 2px solid #27dc95;
    border-radius: 20px;
}

.item-option img[b-zly2a62215] {
    width: 50px;
    height: 50px;
}
/* /Components/TeachingManagement/SeatingPlan/SeatingPlanComponent.razor.rz.scp.css */
/* This component is DayPlan's own standalone ".white-border fit-content" panel (see
   DayPlan.razor), stacked below the WorkChecker panel rather than sharing it - free to have
   its own padding/inset without needing to line up with another section's rows. */
.seating-body[b-vvh67cf1bp] {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.5rem;
    /* .seating-canvas won't shrink below its own min-width (see below), so once this row is
       narrower than canvas + toolbar combined, wrapping drops the toolbar to its own row below
       the canvas instead of overflowing sideways - there's no scroll container here to catch
       that overflow, and the parent .white-border panel doesn't clip it either.
       padding-right leaves room for the toolbar buttons'/.seating-recent's box-shadow, which
       would otherwise get clipped flush against this row's own edge.
       container-type lets .seating-toolbar's own @container query below key off this row's
       width directly, instead of a viewport media query that can't see how much room the
       toolbar actually has next to the canvas. */
    container-type: inline-size;
    padding-right: 1rem;
}

/* Column of controls beside the canvas - currently just the edit toggle, but built to stack
   more controls vertically as they're added. */
.seating-toolbar[b-vvh67cf1bp] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    flex: 0 0 auto;
    width: 180px;
    margin-top: 0.5rem;
    margin-left: 1rem;
}

/* Always rendered (holds the size slider, which isn't gated behind CanEdit - only the edit/reset
   buttons inside it are), but transparent by default: its children become direct flex items of
   .seating-toolbar (display:contents removes this wrapper from the box tree, not just from
   view), positioned via `order` below into edit, slider, .seating-recent, reset - exactly like
   before this wrapper existed. It only becomes a real box - piling the slider with the buttons
   into one column - once .seating-toolbar switches to a row below, so they can sit beside the
   recent panel as one unit instead of scattered across the row. */
.seating-toolbar-buttons[b-vvh67cf1bp] {
    display: contents;
}

.seating-toolbar-edit[b-vvh67cf1bp] {
    order: 0;
}

.seating-recent[b-vvh67cf1bp] {
    order: 2;
}

.seating-toolbar-reset[b-vvh67cf1bp] {
    order: 3;
}

/* ::deep is required here, not optional: .button belongs to CustomButton's own rendered
   <input>, which carries CustomButton's scope attribute, not this component's - without ::deep,
   Blazor compiles this to ".seating-toolbar-edit .button[b-this-component]", which never
   matches anything since that attribute is never present on the button itself. */
.seating-toolbar-edit[b-vvh67cf1bp]  .button,
.seating-toolbar-reset[b-vvh67cf1bp]  .button {
    width: 100%;
    font-size: var(--font-size-base);
}

/* Not gated behind CanEdit like the buttons above - sizing is a viewing preference, not a
   layout edit, so it stays visible for everyone looking at the plan, whether or not the edit
   button next to it exists. order:1 keeps it right below the edit button in both layouts: the
   column layout (stretched full-width by .seating-toolbar's align-items:stretch) and the piled
   row layout below (stretched full-width there too, by .seating-toolbar-buttons's own default
   align-items - "normal", which resolves to stretch for a flex container - once it becomes a
   real flex column). */
.seating-toolbar-size[b-vvh67cf1bp] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    order: 1;
}

.seating-size-label[b-vvh67cf1bp] {
    font-size: var(--font-size-base);
    white-space: nowrap;
}

/* Custom track/thumb instead of accent-color: accent-color only tints the browser's own native
   rendering, it can't give the track a box-shadow or the thumb a specific border, so both need
   to be replaced outright via the vendor pseudo-elements below. Firefox always allows styling
   ::-moz-range-track/-thumb regardless of appearance, but WebKit only stops drawing its native
   groove once appearance is reset here. */
.seating-size-slider[b-vvh67cf1bp] {
    flex: 1 1 auto;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

/* Track ("gauge") - same soft shadow as .button-ghost (see CustomButton.razor.css) so it reads
   as part of the same panel-level visual language. */
.seating-size-slider[b-vvh67cf1bp]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
}

.seating-size-slider[b-vvh67cf1bp]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
}

/* Thumb (the knob). WebKit sizes/positions its thumb independently of the track, so it needs
   its own negative margin-top to stay vertically centered on the 6px track above:
   (16px thumb - 6px track) / 2 = 5px. Firefox centers its thumb on the track automatically. */
.seating-size-slider[b-vvh67cf1bp]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #4b5161;
    cursor: pointer;
}

.seating-size-slider[b-vvh67cf1bp]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #4b5161;
    cursor: pointer;
}

/* Once .seating-body (above) wraps the toolbar below the canvas, it has a full row's width to
   itself rather than the narrow 180px column meant to sit beside the canvas - lay it out
   horizontally instead of stacking everything. The threshold mirrors exactly what triggers that
   wrap: .seating-canvas's 480px min-width + this toolbar's 180px + the row's 0.5rem (8px) gap =
   668px: keep these three in sync if any of them change. */
@container (max-width: 668px) {
    .seating-toolbar[b-vvh67cf1bp] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    /* No longer transparent here: piles the size slider with the edit/reset buttons into one
       compact column that sits beside .seating-recent, rather than each control sitting
       separately. Their own order (0/1/3, above) keeps them stacked edit, slider, reset inside
       this nested column - .seating-toolbar-size needs no width override here since it's now
       sized by this column (a normal block width), not by .seating-toolbar's own row layout. */
    .seating-toolbar-buttons[b-vvh67cf1bp] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex: 0 0 auto;
        order: 0;
    }

    .seating-recent[b-vvh67cf1bp] {
        flex: 1 1 200px;
    }
}

.seating-recent[b-vvh67cf1bp] {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
}

.seating-recent-header[b-vvh67cf1bp] {
    background-color: transparent;
    text-align: center;
    padding: 4px 0;
    font-size: var(--font-size-base);
}

.seating-recent-list[b-vvh67cf1bp] {
    max-height: 132px;
    overflow-y: auto;
}

.seating-recent-row[b-vvh67cf1bp] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 6px;
}

.row-odd[b-vvh67cf1bp] {
    background-color: #f6f6f6;
}

.row-even[b-vvh67cf1bp] {
    background-color: #ffffff;
}

.recent-dot[b-vvh67cf1bp] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.recent-name[b-vvh67cf1bp] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-delete[b-vvh67cf1bp] {
    width: 16px;
    height: auto;
    cursor: pointer;
    flex: 0 0 auto;
}

.recent-delete:hover[b-vvh67cf1bp] {
    opacity: 1;
}

.seating-recent-empty[b-vvh67cf1bp] {
    text-align: center;
    color: #adb5bd;
    padding: 8px 0;
}

.seating-canvas[b-vvh67cf1bp] {
    position: relative;
    /* Saved seat positions are percentages of this box, so they track its size on their own -
       what doesn't is the seats themselves (icon, name, action-arc offsets), sized in --seat-size
       below as a fraction of the canvas's own inline size (container query units, not the
       viewport) rather than fixed pixels, so they scale up/down with the canvas instead of
       looking cramped on a small one and sparse on a big one. container-type is what makes cqw
       resolve against this box.
       flex-basis is set to the min-width value (rather than width:100%, the more usual way to
       express "fill available space") because .seating-body's line-wrapping decision (above) is
       made from each item's un-shrunk basis, before flex-shrink is resolved - a 100% basis would
       always look too big to fit next to the toolbar and wrap every time, even with plenty of
       room. Below min-width there's no room left for the toolbar beside it, so it wraps below
       instead.
       --seat-size is capped at the original fixed 50px rather than left to grow freely with
       9cqw: GetPosition/OnSeatMoved (C#) and seatingPlanDrag.js keep seats away from the edges
       by a margin already proven safe for a 50px hover action-arc reach across this whole
       480-640px range, including its narrow end - so anything at or below 50px stays inside
       that same proven-safe envelope. Only growing past 50px (which 9cqw alone would do above
       ~555px) would reach further than the margin was ever calibrated for.
       --seat-scale (set inline from the size slider's value, see SeatScale in the code-behind)
       multiplies the cqw term *inside* the min() rather than the final result, so the 50px cap
       still holds no matter how high the slider goes - it only ever lets a seat reach that same
       ceiling sooner (on a narrower canvas, where 9cqw alone falls short of it), never past it. */
    container-type: inline-size;
    --seat-size: min(9cqw * var(--seat-scale, 1), 50px);
    min-width: 480px;
    max-width: 640px;
    flex: 1 1 480px;
    aspect-ratio: 8 / 5;
}

.seat[b-vvh67cf1bp] {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    text-align: center;
    user-select: none;
    touch-action: none;
}

/* Widens the hoverable hit-box beyond the visible content so a slightly diagonal or slow
   mouse move toward the actions popover below doesn't drift outside it and lose :hover. */
.seat-viewable[b-vvh67cf1bp] {
    padding: 0 14px;
}

.seat-icon-wrap[b-vvh67cf1bp] {
    position: relative;
    width: var(--seat-size);
    height: var(--seat-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.seat-icon[b-vvh67cf1bp] {
    position: absolute;
    /* Without an explicit box, a position:absolute image sizes itself from the source PNG's own
       pixel dimensions (41x39 / 47x45 here) rather than from --seat-size on .seat-icon-wrap -
       object-fit only has anything to fit into once width/height give it one. This was
       invisible while the wrap was a fixed 50px (close enough to the source size to look right
       by coincidence) but shows now that the wrap actually scales. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

/* Swapped in on hover (view mode only) as a hover affordance - the warning level itself is
   shown via the student name's color, not this icon. */
.seat-icon-hover[b-vvh67cf1bp] {
    opacity: 0;
}

.seat-viewable:hover .seat-icon-base[b-vvh67cf1bp] {
    opacity: 0;
}

.seat-viewable:hover .seat-icon-hover[b-vvh67cf1bp] {
    opacity: 1;
}

.seat-name[b-vvh67cf1bp] {
    display: inline-block;
    font-size: var(--font-size-small);
    line-height: 1;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(var(--seat-size) + 6px);
}

.seat-editable[b-vvh67cf1bp] {
    cursor: grab;
}

/* .seat has "transform", which establishes its own stacking context - a z-index on a
   descendant (.seat-actions) only wins against its own siblings within that context, never
   against a sibling .seat. So the whole hovered seat needs to be lifted above the others,
   the same way .seat-editable.dragging already does while a drag is in progress, or a later
   seat in the DOM can paint its arc over the hovered one's. */
.seat-viewable:hover[b-vvh67cf1bp] {
    z-index: 30;
}

.seat-editable.dragging[b-vvh67cf1bp] {
    cursor: grabbing;
    z-index: 10;
}

.seat-editable.dragging .seat-icon[b-vvh67cf1bp] {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* The 3 behavior-report buttons arranged in an arc around the icon - Good above, Stop to the
   right, Careful diagonally between them - revealed on hover (view mode only, hidden while
   dragging is active so it can't interfere with repositioning students). Nested inside
   .seat-icon-wrap (not just .seat) so the arc is centered on the icon, not the whole seat. */
.seat-actions[b-vvh67cf1bp] {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
    z-index: 20;
}

.seat-viewable:hover .seat-actions[b-vvh67cf1bp] {
    opacity: 1;
    pointer-events: auto;
}

.seat-action[b-vvh67cf1bp] {
    position: absolute;
    top: 50%;
    left: 50%;
}

.seat-action-good[b-vvh67cf1bp] {
    transform: translate(-50%, calc(-50% - var(--seat-size)));
}

.seat-action-careful[b-vvh67cf1bp] {
    transform: translate(calc(-50% + var(--seat-size) * 0.84), calc(-50% - var(--seat-size) * 0.78));
}

.seat-action-stop[b-vvh67cf1bp] {
    transform: translate(calc(-50% + var(--seat-size)), -50%);
}

/* Applied (see ShouldFlipActions in the component's code-behind) to a seat placed close enough
   to the canvas's right edge that the two rightward-reaching buttons above would otherwise
   extend past it - mirrors them to reach left instead. .seat-action-good has no horizontal
   offset to begin with, so it's unaffected either way. */
.seat-actions-flip .seat-action-careful[b-vvh67cf1bp] {
    transform: translate(calc(-50% - var(--seat-size) * 0.84), calc(-50% - var(--seat-size) * 0.78));
}

.seat-actions-flip .seat-action-stop[b-vvh67cf1bp] {
    transform: translate(calc(-50% - var(--seat-size)), -50%);
}

.seat-action img[b-vvh67cf1bp] {
    display: block;
    cursor: pointer;
    transition: transform 0.1s ease;
    height: var(--seat-size);
    width: auto;
}

.seat-action img:hover[b-vvh67cf1bp] {
    transform: scale(1.15);
}

.seating-readonly-note[b-vvh67cf1bp] {
    margin-top: 0.5rem;
    font-size: var(--font-size-base);
    color: var(--bs-secondary-color, #6c757d);
}
/* /Components/TeachingManagement/Settings/AutomationComponent.razor.rz.scp.css */
.white-border-inside[b-7d1zighiy5] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 10px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.automation-options[b-7d1zighiy5] {
    margin-left: 0.15rem !important;
    margin-right: 0.15rem !important;
    text-align: left;
}

.automation-title[b-7d1zighiy5] {
    font-size: var(--font-size-large);
}

.test-automation[b-7d1zighiy5] {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-base);
}

[b-7d1zighiy5] .toggle-end {
    font-size: var(--font-size-medium);
}

#quantity[b-7d1zighiy5] {
    position: initial;
    opacity: initial;
    cursor: pointer;
    height: 25px;
    padding: 0;
    text-align: center;
    border: none;
    border-bottom: 1px solid lightgray;
}

/* Hide spinner arrows for webkit browsers (Chrome, Safari, Edge) */
#quantity[b-7d1zighiy5]::-webkit-outer-spin-button,
#quantity[b-7d1zighiy5]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spinner arrows for Firefox */
#quantity[type=number][b-7d1zighiy5] {
    -moz-appearance: textfield;
}
/* /Components/TeachingManagement/Settings/ObjectiveColorComponent.razor.rz.scp.css */
.white-border-inside[b-v0sqfvoo3u] {
    padding: 0.5rem;
    border-radius: 10px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.control-container[b-v0sqfvoo3u] {
    display: flex;
    justify-content: space-evenly;
    margin: 0 1rem 1rem;
}
/* /Components/TeachingManagement/Settings/Popups/AddClass.razor.rz.scp.css */
label[b-8ddds7rvm4] {
    margin: 0;
}

.pe-modal[b-8ddds7rvm4] {
    --modal-width: min(850px, 95vw);
    height: fit-content;
    width: var(--modal-width);
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
}

.container-fluid[b-8ddds7rvm4] {
    container-name: addclass-content;
    container-type: inline-size;
}

.pe-border-margin[b-8ddds7rvm4] {
    padding: 0.5rem;
}

.pe-header-text[b-8ddds7rvm4] {
    --pe-header-font-size: var(--font-size-xxlarge);
}

.pe-grey-border[b-8ddds7rvm4] {
    border: 2px solid #4b5161;
    border-radius: 10px;
    padding: 0.5rem;
    font-size: var(--font-size-base);
}

.pe-input[b-8ddds7rvm4] {
    border: none;
    border-bottom: 1px solid #ced4da;
    height: 25px;
    max-width: 200px;
    margin: 0 0.5rem;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.no-padding-left[b-8ddds7rvm4] {
    padding-left: 0;
}

.no-padding-right[b-8ddds7rvm4] {
    padding-right: 0;
}

.classname[b-8ddds7rvm4] {
    height: 50px;
    display: flex;
    flex-direction: row;
    font-size: var(--font-size-base);
    align-items: center;
}

.code-class-container[b-8ddds7rvm4] {
    height: 50px;
    display: flex;
    flex-direction: row;
    font-size: var(--font-size-base);
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
}

#classname[b-8ddds7rvm4] {
    height: 30px;
    margin: 0 1rem 0 0 !important;
    max-width: calc(200px + 1rem + 5px + 0.5rem);
}

#classname-label[b-8ddds7rvm4] {
    vertical-align: middle;
}

.pe-input-img[b-8ddds7rvm4] {
    vertical-align: middle;
    height: 20px;
    width: 15px;
    margin-top: 5px;
}

.pe-input-img:hover[b-8ddds7rvm4] {
    cursor: pointer;
}

.pe-input-img-hidden[b-8ddds7rvm4] {
    visibility: hidden;
}

.pe-label[b-8ddds7rvm4] {
    width: 1rem;
    margin-right: 5px;
    vertical-align: middle;
}

.pe-student[b-8ddds7rvm4] {
    display: flex;
    flex-direction: row;
    margin: 0.2rem 0;
    font-size: var(--font-size-base);
}

.title[b-8ddds7rvm4] {
    font-size: var(--font-size-medium);
    margin-bottom: 0.5rem;
}

.small-text[b-8ddds7rvm4] {
    font-size: var(--font-size-small);
}

.import-class[b-8ddds7rvm4] {
    max-width: 200px;
    width: 200px;
    text-align: center;
}

#class-code[b-8ddds7rvm4] {
    margin: 0;
    width: 110px;
}

.btn-import[b-8ddds7rvm4] {
    display: inline-flex;
    align-items: center;
    border: 2px solid #d3d3d3;
    border-radius: 10px;
    padding: 0 1rem;
    height: 35px;
    margin-left: 1rem;
    background-color: transparent;
}

.btn-icon[b-8ddds7rvm4] {
    width: 16px;  /* Adjust as needed */
    height: 16px;  /* Adjust as needed */
    margin-right: 0.5rem;
}

.share-line[b-8ddds7rvm4] {
    display: flex;
    justify-content: space-between;
}

.share-line div[b-8ddds7rvm4] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.share-line div img[b-8ddds7rvm4] {
    height: 35px;
    width: auto;
}

.share-line > img[b-8ddds7rvm4] {
    margin-right: 1rem;
}

.control[b-8ddds7rvm4] {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0.5rem 0.5rem;
}

.control.solo[b-8ddds7rvm4] {
    justify-content: end;
}

/* WorkCheck access table */
.access-workChecker-container[b-8ddds7rvm4] {
    width: 100%;
}

.access-table[b-8ddds7rvm4] {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
}

.table-header[b-8ddds7rvm4],
.table-row[b-8ddds7rvm4] {
    display: grid;
    grid-template-columns: 60px repeat(auto-fit, 40px);
    border-bottom: 1px solid #e0e0e0;
    width: fit-content;
    min-width: 100%;
}

.cell[b-8ddds7rvm4] {
    padding: 5px;
    display: flex;
    align-items: center;
    border-right: 1px solid #f0f0f0;
}

.header-cell[b-8ddds7rvm4] {
    font-weight: 500;
    color: #666;
    width: 40px;
    height: 120px;
    justify-content: center;
    position: relative;
    padding: 0;
}

.vertical-text[b-8ddds7rvm4] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
    width: 120px;
    text-align: left;
    padding-left: 5px;
}

.subject-cell[b-8ddds7rvm4] {
    font-weight: 500;
    color: #666;
    width: 60px;
    justify-content: flex-start;
}

.table-header .cell:not(:last-child)[b-8ddds7rvm4],
.table-row .cell:not(:last-child)[b-8ddds7rvm4] {
    border-right: 1px solid #f0f0f0;
}

.checkbox-cell[b-8ddds7rvm4] {
    width: 40px;
    justify-content: center;
    cursor: pointer;
}

.checkbox-cell.disabled[b-8ddds7rvm4] {
    cursor: not-allowed;
    opacity: 0.7;
}

.checkbox-cell.owner[b-8ddds7rvm4] {
    cursor: not-allowed;
}

.checkbox[b-8ddds7rvm4] {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 1px solid #D3D3D3;
    display: inline-block;
}

.checkbox-cell:not(.disabled):not(.owner):hover .checkbox:not(.checked):not(.owner-checked)[b-8ddds7rvm4] {
    background-color: #eee;
}

.checkbox.checked[b-8ddds7rvm4] {
    background-color: #ffffff;
    border-color: #D3D3D3;
}

.checkbox.owner-checked[b-8ddds7rvm4] {
    background-color: #ffffff;
    border-color: #D3D3D3;
}

.checkbox.checked[b-8ddds7rvm4]:after {
    content: "";
    position: absolute;
    left: 7px;
    top: -5px;
    width: 10px;
    height: 20px;
    border: solid #49d182;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    display: inline-block;
}

.checkbox.owner-checked[b-8ddds7rvm4]:after {
    content: "";
    position: absolute;
    left: 7px;
    top: -5px;
    width: 10px;
    height: 20px;
    border: solid #9E9E9E;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    display: inline-block;
}

/* Make sure the first column (subject codes) has enough width */
.table-row:first-child[b-8ddds7rvm4] {
    min-width: 50px;
}

/* Ensure the table stays within its container */
.access-table[b-8ddds7rvm4] {
    overflow-x: auto;
}

/* Add a subtle hover effect for interactable cells */
.checkbox-cell:not(.disabled):not(.owner):hover .checkbox:not(.checked):not(.owner-checked)[b-8ddds7rvm4] {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}

/* Extra styling for better visual hierarchy */
.title.mt-4[b-8ddds7rvm4] {
    margin-top: 1.5rem;
    font-weight: 500;
    color: #333;
}

@container addclass-content (max-width: 820px) {
    .container-fluid > .row[b-8ddds7rvm4] {
        flex-direction: column;
    }

    .container-fluid > .row > .col-7[b-8ddds7rvm4],
    .container-fluid > .row > .col-5[b-8ddds7rvm4] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .no-padding-right[b-8ddds7rvm4],
    .no-padding-left[b-8ddds7rvm4] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .class-details-container[b-8ddds7rvm4] {
        margin-bottom: 1rem;
    }

    .import-class[b-8ddds7rvm4] {
        max-width: none;
        width: auto;
    }

    #classname[b-8ddds7rvm4] {
        max-width: none;
    }

    .pe-input[b-8ddds7rvm4] {
        max-width: none;
        flex: 1;
    }
}
/* /Components/TeachingManagement/Settings/Popups/AddCourse.razor.rz.scp.css */
.pe-modal[b-3l5vke6535] {
    height: fit-content;
    width: min(47rem, 95vw);
    margin: 2rem auto;
    background-color: white;
    border-radius: 3rem;
}

.pe-border-margin[b-3l5vke6535] {
    padding: 0.5rem;
}

.pe-border[b-3l5vke6535] {
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    border-radius: 1rem;
    padding: 0;
    font-size: var(--font-size-base);
    margin: 0 auto;
    width: 34rem;
}

.pe-input[b-3l5vke6535] {
    border: 0 solid #4b5161;
    margin: 0;
    height: 2.5rem;
    vertical-align: middle;
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}

.pe-alt-header[b-3l5vke6535] {
    font-size: var(--font-size-medium);
    text-align: center;
    width: 65%;
    margin: 0 auto;
}

.container-2[b-3l5vke6535] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: space-evenly;
}

.control-container[b-3l5vke6535] {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 1.5rem 0.25rem 1.5rem;
}

.height40[b-3l5vke6535] {
    height: 4rem;
}

.text-center[b-3l5vke6535] {
    text-align: center;
}

.padding15[b-3l5vke6535] {
    padding: 1.5rem;
}

/* Time Picker */
input[type="date"][b-3l5vke6535], input[type="datetime-local"][b-3l5vke6535], input[type="month"][b-3l5vke6535], input[type="time"][b-3l5vke6535] {
    -webkit-appearance: listbox;
}

.time-picker[b-3l5vke6535] {
    border:none;
    border-bottom: 0.1rem solid #4b5161;
    padding: 0;
    color: var(--text-color-default);
}

.time-picker:focus[b-3l5vke6535] {
    outline: none;
}

/* autocomplete */
.sug[b-3l5vke6535] {
    position: relative;
}

.sug-options[b-3l5vke6535] {
    position: absolute;
    top: 4rem;
    left: 0;
    background: white;
    width: 100%;
    padding: 0;
    z-index: 10;
    border: 0.1rem solid #ced4da;
    border-radius: 0.5rem;
    box-shadow: 0 3rem 2.5rem 0.8rem rgba(0,0,0,0.1);
    list-style: none;
    margin: 0;
}

.sug-option[b-3l5vke6535] {
    display: block;
    width: 100%;
    padding: 0.25rem;
    border: none;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.sug-option .sug-option-text[b-3l5vke6535] {
    padding: 0.25rem 0.5rem;
}

.sug-option:hover[b-3l5vke6535] {
    background: #1E90FF;
    color: #fff;
}

.sug-option:focus-visible[b-3l5vke6535] {
    outline: 0.2rem solid #4b5161;
    outline-offset: -0.2rem;
}
/* /Components/TeachingManagement/Settings/Popups/AddWorkGroup.razor.rz.scp.css */
.pe-modal[b-mselhtcsc9] {
    height: fit-content;
    width: fit-content;
    max-width: 82.5rem;
    margin: 2rem auto;
    background-color: white;
    border-radius: 3rem;
    font-size: var(--font-size-medium);
}

.pe-border-margin[b-mselhtcsc9] {
    padding: 0.5rem;
}

.info-text[b-mselhtcsc9] {
    font-size: var(--font-size-base);
}

.group-name[b-mselhtcsc9] {
    width: min(30rem, 100%);
    margin: 0 auto;
    display: flex;
    gap: 1rem;
}

.group-input[b-mselhtcsc9] {
    border: none;
    border-bottom: 0.1rem solid #3c3f4f;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1;
}

.list-container[b-mselhtcsc9] {
    width: min(30rem, 100%);
    margin: 2rem auto 1rem;
}

.list-container:last-child[b-mselhtcsc9] {
    margin: 0 auto 1rem;
}

.delete-icon[b-mselhtcsc9] {
    height: var(--font-size-large);
    width: auto;
    cursor: pointer;
}

.delete-icon:hover[b-mselhtcsc9] {
    opacity: 0.7;
}
/* /Components/TeachingManagement/Settings/Popups/AddWorkGroupMember.razor.rz.scp.css */
.pe-modal[b-r8dgicgdk5] {
    height: fit-content;
    width: fit-content;
    min-width: min(450px, 95vw);
    margin: 5rem auto 0;
    background-color: white;
    border-radius: 30px;
}

.pe-border-margin[b-r8dgicgdk5] {
    padding: 0.5rem;
}

[b-r8dgicgdk5] .pe-page-header {
    padding-left: 1rem;
    padding-right: 1rem;
}

.head-block[b-r8dgicgdk5] {
    padding: 0 1.5rem;
}

.input-block[b-r8dgicgdk5] {
    display: flex;
    gap: 1rem;
    font-size: var(--font-size-medium);
}

.input-block > input[b-r8dgicgdk5] {
    border: none;
    border-bottom: 1px solid #3c3f4f;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1;
}

.input-block > input[b-r8dgicgdk5]::placeholder {
    opacity: 0.25;
}

.control-container[b-r8dgicgdk5] {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 1.5rem 0.25rem 1.5rem;
}
/* /Components/TeachingManagement/Settings/Popups/EditObjectiveColors.razor.rz.scp.css */
.pe-modal[b-xj1phg8w5j] {
    --modal-width: min(1100px, 95vw);
    height: fit-content;
    max-height: 85vh;
    width: var(--modal-width);
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    overflow-y: auto;
    container-type: inline-size;
    container-name: editcolors-content;
}

.pe-border-margin[b-xj1phg8w5j] {
    padding: 0.5rem;
}


.subject-list[b-xj1phg8w5j] {
    display: flex;
    flex-direction: row;
    font-size: var(--font-size-base);
    flex-wrap: wrap;
    line-height: 1;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    align-items: center;
    justify-content: center;
}

.subject-list div span[b-xj1phg8w5j] {
    cursor: pointer;
    margin: 0 0.5rem;
}

.selected[b-xj1phg8w5j] {
    color: limegreen !important;
}

.separator[b-xj1phg8w5j] {
    color: rgba(255, 255, 255, 0.4);
}

.no-classes-message[b-xj1phg8w5j] {
    padding: 3rem 2rem;
    text-align: center;
    font-size: var(--font-size-base);
}

.learning-objectives-list[b-xj1phg8w5j] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.learning-objective-item-container[b-xj1phg8w5j] {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
}

.learning-objective-item[b-xj1phg8w5j] {
    flex: 1;
    min-height: 70px;
    padding: 1rem;
    border-radius: 16px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    user-select: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
}

.learning-objective-item:hover[b-xj1phg8w5j] {
    border-color: rgba(50, 205, 50, 0.4);
}

.learning-objective-item.objective-selected[b-xj1phg8w5j] {
    box-shadow: 0 0 15px 0 rgba(50, 205, 50, 0.25);
}

.learning-objective-item .code[b-xj1phg8w5j] {
    font-size: var(--font-size-large);
    font-weight: 600;
}

.learning-objective-item .name[b-xj1phg8w5j] {
    text-align: center;
    font-size: var(--font-size-base);
}

.learning-objective-item.objective-selected .code[b-xj1phg8w5j],
.learning-objective-item.objective-selected .name[b-xj1phg8w5j] {
    text-shadow: 0.05em 0 var(--outline-color), 0 0.05em var(--outline-color), -0.05em 0 var(--outline-color), 0 -0.05em var(--outline-color), -0.05em -0.05em var(--outline-color), -0.05em 0.05em var(--outline-color), 0.05em -0.05em var(--outline-color), 0.05em 0.05em var(--outline-color);
}

.selected-objective-color[b-xj1phg8w5j] {
    display: flex;
    align-items: center;
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0 auto;
    visibility: hidden;
    pointer-events: none;
}

.learning-objective-item-container.is-selected .selected-objective-color[b-xj1phg8w5j] {
    visibility: visible;
    pointer-events: auto;
}

.selected-objective-color-text[b-xj1phg8w5j] {
    flex: 1;
}

/* Color editing list */
.objective-colors-list[b-xj1phg8w5j] {
    padding: 0 1rem 1rem;
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progression-title[b-xj1phg8w5j] {
    display: flex;
    align-items: center;
    font-size: var(--font-size-base);
    color: white;
}

.progression-title.subtitle[b-xj1phg8w5j] {
    padding-left: 1.5rem;
}

.progression-title-text[b-xj1phg8w5j] {
    flex: 1;
    border-radius: 16px;
    padding: 0.25rem 0.5rem;
    margin-left: 0.5rem;
}

.progression-title .progression-title-text[b-xj1phg8w5j],
.progression-title.subtitle .progression-title-text[b-xj1phg8w5j] {
    text-shadow: 0.05em 0 var(--outline-color), 0 0.05em var(--outline-color), -0.05em 0 var(--outline-color), 0 -0.05em var(--outline-color), -0.05em -0.05em var(--outline-color), -0.05em 0.05em var(--outline-color), 0.05em -0.05em var(--outline-color), 0.05em 0.05em var(--outline-color);
}

.title-color-input[b-xj1phg8w5j] {
    border: none;
    outline: none;
    background-color: transparent;
    width: 30px;
    height: 30px;
    cursor: pointer;
    flex-shrink: 0;
}

.reset-color[b-xj1phg8w5j] {
    height: 18px;
    width: auto;
    cursor: pointer;
    flex-shrink: 0;
}

.reset-color--hidden[b-xj1phg8w5j] {
    visibility: hidden;
    pointer-events: none;
}

@container editcolors-content (max-width: 600px) {
    .pe-header-text[b-xj1phg8w5j] {
        font-size: var(--font-size-xlarge);
        padding: 0 2.5rem;
    }

    .learning-objectives-list[b-xj1phg8w5j] {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .learning-objective-item-container[b-xj1phg8w5j] {
        flex: 0 0 150px;
    }

    .learning-objective-item[b-xj1phg8w5j] {
        min-height: 60px;
        padding: 0.75rem;
    }

    .objective-colors-list[b-xj1phg8w5j] {
        padding: 0 0.75rem 0.75rem;
    }

    .progression-title.subtitle[b-xj1phg8w5j] {
        padding-left: 1rem;
    }
}
/* /Components/TeachingManagement/Settings/Popups/ManageTestType.razor.rz.scp.css */
/* /Components/TeachingManagement/Settings/Popups/SelectClassBasics.razor.rz.scp.css */
.pe-modal[b-y3m1xu985p] {
    height: fit-content;
    width: fit-content;
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
}

.pe-modal *:focus[b-y3m1xu985p] {
    outline: none;
}

.pe-border-margin[b-y3m1xu985p] {
    padding: 0.5rem;
}


.basics-split[b-y3m1xu985p] {
    display: flex;
    align-items: stretch;
    margin: 1rem;
    gap: 1.5rem;
}

.join-column[b-y3m1xu985p] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    flex: 1 1 0;
}

.split-divider[b-y3m1xu985p] {
    width: 1px;
    background-color: #ced4da;
    align-self: stretch;
}

.create-column[b-y3m1xu985p] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    flex: 1 1 0;
}

.column-subtitle[b-y3m1xu985p] {
    font-size: var(--font-size-medium);
    text-align: left;
    white-space: nowrap;
}

.column-subtitle-row[b-y3m1xu985p] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.row-group[b-y3m1xu985p] {
    margin-top: 1rem;
}

.basics-split[b-y3m1xu985p]  .select-wrapper {
    margin: 0.2rem 0;
}

.row-selector[b-y3m1xu985p] {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.row-selector label[b-y3m1xu985p] {
    width: 220px;
    padding: 0;
    margin: 0;
}

.pe-input[b-y3m1xu985p] {
    border: none;
    border-bottom: 1px solid #ced4da;
    height: 25px;
    width: 250px;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.code-class-container[b-y3m1xu985p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#class-code[b-y3m1xu985p] {
    margin: 0;
    width: 130px;
}
/* /Components/TeachingManagement/Settings/SchoolClassListComponent.razor.rz.scp.css */
.white-border-inside[b-lapekc3fi2] {
    padding: 0.5rem;
    border-radius: 1rem;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.pe-no-padding[b-lapekc3fi2] {
    padding: 0;
}

.pe-full-width[b-lapekc3fi2] {
    padding-right: 0;
    padding-left: 0;
}

.pe-full-height[b-lapekc3fi2] {
    height: fit-content;
}

.pe-icon-button[b-lapekc3fi2] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.pe-edit[b-lapekc3fi2] {
    height: var(--font-size-large);
    width: var(--font-size-large);
}

.pe-edit:hover[b-lapekc3fi2] {
    opacity: 0.7;
    cursor: pointer;
}

.pe-class-edit[b-lapekc3fi2] {
    vertical-align: middle;
}

.pe-line-even[b-lapekc3fi2] {
    background-color: white;
}

.pe-line-odd[b-lapekc3fi2] {
    background-color: #f6f6f6;
}

.pe-line-content[b-lapekc3fi2] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: var(--font-size-medium);
}

.pe-line-content .pe-icon-button[b-lapekc3fi2] {
    text-align: right;
}

.pe-line-content div[b-lapekc3fi2] {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.class-content > div[b-lapekc3fi2] {
    width: 100%;
    margin-left: 0;
    padding: 0.5rem;
}
/* /Components/TeachingManagement/Settings/Settings.razor.rz.scp.css */
.pe-no-margin[b-sf5pqwcolk] {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

.spacing[b-sf5pqwcolk] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.white-border[b-sf5pqwcolk] {
    padding: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    min-height: 98vh;
    height: fit-content;
}

.pe-mt[b-sf5pqwcolk] {
    margin-top: 1rem;
}

.pe-block[b-sf5pqwcolk] {
    height: fit-content;
    min-width: 0;
}

.pe-settings-grid[b-sf5pqwcolk] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.pe-settings-sidebar[b-sf5pqwcolk],
.pe-settings-content[b-sf5pqwcolk] {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-width: 0;
}

.pe-settings-content[b-sf5pqwcolk] {
    container-type: inline-size;
}

.pe-settings-secondary-grid[b-sf5pqwcolk] {
    display: grid;
    grid-template-columns: 0.7fr 1fr 0.7fr;
    grid-template-areas: "objective-color automation work-group";
    gap: 1rem;
    min-width: 0;
}

.pe-settings-secondary-grid > *:nth-child(1)[b-sf5pqwcolk] {
    grid-area: objective-color;
}

.pe-settings-secondary-grid > *:nth-child(2)[b-sf5pqwcolk] {
    grid-area: automation;
}

.pe-settings-secondary-grid > *:nth-child(3)[b-sf5pqwcolk] {
    grid-area: work-group;
}

@container (max-width: 820px) {
    .pe-settings-secondary-grid[b-sf5pqwcolk] {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "objective-color work-group"
            "automation automation";
    }
}

@container (max-width: 480px) {
    .pe-settings-secondary-grid[b-sf5pqwcolk] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "objective-color"
            "work-group"
            "automation";
    }
}

@media (min-width: 992px) {
    .pe-settings-grid[b-sf5pqwcolk] {
        grid-template-columns: minmax(280px, 3fr) minmax(0, 9fr);
    }
}

/* Select Year */
.white-border-inside[b-sf5pqwcolk] {
    padding: 0.5rem;
    border-radius: 10px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.pe-year-select[b-sf5pqwcolk] {
    display: flex;
    justify-content: center;
    font-size: var(--font-size-base);
    margin-bottom: 1rem;
}
/* /Components/TeachingManagement/Settings/TaskNumberComponent.razor.rz.scp.css */
.white-border-inside[b-gvr37tv9yc] {
    padding: 0.5rem;
    border-radius: 10px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.options[b-gvr37tv9yc] {
    margin-left: 0.15rem !important;
    margin-right: 0.15rem !important;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-gvr37tv9yc] .toggle-end {
    font-size: var(--font-size-medium);
}

.option-row[b-gvr37tv9yc] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.option-container[b-gvr37tv9yc] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-medium);
    line-height: 1.4rem;
}

#quantity[b-gvr37tv9yc] {
    position: initial;
    opacity: initial;
    cursor: pointer;
    height: 25px;
    padding: 0;
    margin: 0 0.3rem;
    text-align: center;
    border: none;
    border-bottom: 1px solid lightgray;
    outline: none;
    vertical-align: middle;
}

/* Hide spinner arrows for webkit browsers (Chrome, Safari, Edge) */
#quantity[b-gvr37tv9yc]::-webkit-outer-spin-button,
#quantity[b-gvr37tv9yc]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spinner arrows for Firefox */
#quantity[type=number][b-gvr37tv9yc] {
    -moz-appearance: textfield;
}
/* /Components/TeachingManagement/Settings/TestTypeComponent.razor.rz.scp.css */
.white-border-inside[b-4p2yygwgpc] {
    padding: 0.5rem;
    margin-left: 0;
    margin-top: 0.5rem;
    margin-right: -0.5rem;
    border-radius: 10px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.pe-margin-right[b-4p2yygwgpc] {
    margin-right: 0.5rem;
}

.pe-header-2[b-4p2yygwgpc] {
    font-size: var(--font-size-xxlarge);
    min-height: 5rem;
    position: relative;
}

.pe-header-2 p[b-4p2yygwgpc] {
    display: block;
    margin: auto;
    line-height: 1;
}

.control-container[b-4p2yygwgpc] {
    display: flex;
    justify-content: space-evenly;
    margin: 1rem;
}
/* /Components/TeachingManagement/Settings/WeekFormatComponent.razor.rz.scp.css */
.white-border-inside[b-wzamr8fgna] {
    padding: 0.5rem;
    border-radius: 1rem;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.pe-week-format[b-wzamr8fgna] {
    font-size: var(--font-size-medium);
    margin-left: 0.15rem !important;
}
/* /Components/TeachingManagement/Settings/WeekPlanningComponent.razor.rz.scp.css */
.white-border-inside[b-qeuwd5056h] {
    padding: 0.5rem;
    margin-left: 0;
    border-radius: 1rem;
    border-color: white;
    box-shadow: 0 0 1.5rem 0 rgba(0,0,0,0.15);
}

.pe-no-padding[b-qeuwd5056h] {
    padding: 0;
}

.pe-margin-left[b-qeuwd5056h] {
    margin-left: 0.5rem;
}

.pe-table[b-qeuwd5056h] {
    --pe-item-height: 5rem;
    table-layout: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

th[b-qeuwd5056h], td[b-qeuwd5056h] {
    border-left: 0.1rem solid black;
    padding: 0;
    margin: 0;
}

th:first-child[b-qeuwd5056h], td:first-child[b-qeuwd5056h] {
    border-left: none;
}

th[b-qeuwd5056h] {
    text-align: center;
    font-size: var(--font-size-xxlarge);
    font-weight: 100;
}

[class^='col-'][b-qeuwd5056h] {
    padding-left: 1rem;
    padding-right: 1rem;
}

.pe-line-odd[b-qeuwd5056h] {
    background-color: #f6f6f6;
}

/* Regular item styling */
.pe-container[b-qeuwd5056h] {
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
}

.pe-container:hover[b-qeuwd5056h] {
    filter: brightness(1.05);
}

.pe-item[b-qeuwd5056h] {
    color: white;
    padding-bottom: 0.5rem;
    height: var(--pe-item-height);
    margin-left: 0;
    margin-right: 0;
    position: relative;
}

.empty-item[b-qeuwd5056h] {
    height: calc(var(--pe-item-height) / 2);
}

.pe-item > .row[b-qeuwd5056h] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pe-item-left[b-qeuwd5056h] {
    padding-left: 1rem;
}

.pe-item-right[b-qeuwd5056h] {
    text-align: right;
    padding-right: 1rem;
}

.pe-schedule-text[b-qeuwd5056h] {
    font-size: var(--font-size-base);
}

.pe-lesson-text[b-qeuwd5056h] {
    font-size: var(--font-size-large);
}

.pe-class-text[b-qeuwd5056h] {
    font-size: var(--font-size-large);
    overflow: hidden;
    text-wrap: nowrap;
}

/* Alternating weeks container and items */
.pe-alternating-container[b-qeuwd5056h] {
    position: relative;
    height: var(--pe-item-height);
    width: 100%;
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
}

.pe-alternating-container:hover[b-qeuwd5056h] {
    filter: brightness(1.05);
}

/*
 * ContextMenuTrigger wraps its content in its own <div> that never gets this
 * component's scope attribute (it's rendered by the Blazor.ContextMenu
 * package, not authored here), so flex sizing on .pe-alternating-container's
 * direct children can't be trusted - that wrapper becomes an untargetable,
 * content-sized flex item instead of a 50% one. Absolute positioning avoids
 * the problem entirely: non-positioned wrapper divs don't establish a
 * containing block, so .pe-half-item positions relative to
 * .pe-alternating-container no matter what sits between them.
 */
.pe-half-item[b-qeuwd5056h] {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
}

.pe-half-item-odd[b-qeuwd5056h] {
    left: 0;
}

.pe-half-item-even[b-qeuwd5056h] {
    right: 0;
}

.pe-alternating-item[b-qeuwd5056h] {
    height: 100%;
    color: white;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pe-half-empty[b-qeuwd5056h] {
    background-color: #f9f9f9;
    border: 0.1rem dashed #ddd;
}

.pe-half-lesson-text[b-qeuwd5056h] {
    font-size: var(--font-size-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-half-schedule-text[b-qeuwd5056h] {
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* small details */
.pe-item-leftcorner[b-qeuwd5056h] {
    border-bottom-left-radius: 1rem;
}

.pe-item-rightcorner[b-qeuwd5056h] {
    border-bottom-right-radius: 1rem;
}

/* Copy/paste context menu items */
.menu-item-content[b-qeuwd5056h] {
    display: flex;
    align-items: center;
}

.menu-icon[b-qeuwd5056h] {
    width: 3.2rem;
    height: 3.2rem;
    margin-right: 0.8rem;
}
/* /Components/TeachingManagement/Settings/WorkGroupComponent.razor.rz.scp.css */
.white-border-inside[b-5a1itgdo2a] {
    padding: 0.5rem;
    border-radius: 10px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.control-container[b-5a1itgdo2a] {
    margin: 0.5rem;
}

.control-container[b-5a1itgdo2a]  .in-list-task {
    font-size: var(--font-size-medium);
}

.edit-icon[b-5a1itgdo2a],
.delete-icon[b-5a1itgdo2a] {
    height: var(--font-size-large);
    width: auto;
    cursor: pointer;
}

.edit-icon:hover[b-5a1itgdo2a],
.delete-icon:hover[b-5a1itgdo2a] {
    opacity: 0.7;
}
/* /Components/TeachingManagement/Tasks/Tasks.razor.rz.scp.css */
.pe-no-margin[b-x6s1q6zt15] {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

.spacing[b-x6s1q6zt15] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.white-border[b-x6s1q6zt15] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    min-height: 95vh;
    height: auto;
}

.pe-border-margin[b-x6s1q6zt15] {
}

.frame[b-x6s1q6zt15] {
    /*border-radius: 15px;*/
    /*box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);*/
    margin: 0;
    padding: 0;
    min-height: 86vh;
}
/* /Components/TeachingManagement/Tasks/TaskSectionComponent.razor.rz.scp.css */
p[b-iesdcc5fkc] {
    padding: 0;
    margin: 0;
}

.list-header[b-iesdcc5fkc] {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    font-size: var(--font-size-xlarge);
    display: flex;
    flex-direction: row;
}

.arrow[b-iesdcc5fkc] {
    padding-bottom: 5px;
}

.text-large[b-iesdcc5fkc] {
    font-size: var(--font-size-large);
}

.text-medium[b-iesdcc5fkc] {
    font-size: var(--font-size-medium);
    margin: auto;
}

.text-green[b-iesdcc5fkc] {
    color: #27dc95 !important;
}

.text-red[b-iesdcc5fkc] {
    color: red !important;
}

.vertical-center[b-iesdcc5fkc] {
    margin: auto 0;
    padding: 0 0.5rem;
}

.vertical-center img[b-iesdcc5fkc] {
    height: var(--font-size-medium);
    width: auto;
}

.vertical-center img:hover[b-iesdcc5fkc] {
    cursor: pointer;
}

.info-lesson[b-iesdcc5fkc] {
    padding-left: 2rem;
    padding-right: 2rem;
    min-width: 15rem;
}

.info-lesson p[b-iesdcc5fkc] {
    line-height: 1;
}

.last-item[b-iesdcc5fkc] {
    margin-left: auto;
    margin-right: 1rem;
}

.inlisttaskgroup[b-iesdcc5fkc] {
    font-size: var(--font-size-xsmall);
    display: flex;
}

.icon[b-iesdcc5fkc] {
    width: 40px;
    text-align: center;
    margin: auto 0;
    display: flex;
    justify-content: center;
}

.dliconimg[b-iesdcc5fkc] {
    height: var(--font-size-medium);
    width: auto;
    cursor: pointer;
}

.pe-line[b-iesdcc5fkc] {
    padding: 0.5rem;
    margin: 0;
    display: flex;
    flex-direction: row;
}

.pe-line-even[b-iesdcc5fkc] {
    background-color: white;

}

.pe-line-odd[b-iesdcc5fkc] {
    background-color: #f6f6f6;
}
/* /Components/TeachingManagement/ThemePlan/Popups/SelectThemeContext.razor.rz.scp.css */
.pe-modal[b-giaovowaqf] {
    height: fit-content;
    width: fit-content;
    max-width: 825px;
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
}

.pe-modal *:focus[b-giaovowaqf] {
    outline: none;
}

.pe-border-margin[b-giaovowaqf] {
    padding: 0.5rem;
}


.theme-content[b-giaovowaqf] {
    margin-top: 1rem;
}

.row-selector[b-giaovowaqf] {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 1rem;
}

.row-selector label[b-giaovowaqf] {
    width: 150px;
    padding: 0;
    margin: 0;
}

.row-selector select[b-giaovowaqf] {
    background-color: #ffffff;
    border: 1px solid #4b5161;
    border-radius: 15px;
    padding: 5px 20px;
    width: 300px;
}
/* /Components/TeachingManagement/ThemePlan/ThemePlan.razor.rz.scp.css */
label[b-uyt2e8caw4] {
    margin: 0;
}

.pe-no-margin[b-uyt2e8caw4] {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

.spacing[b-uyt2e8caw4] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.white-border[b-uyt2e8caw4] {
    padding: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    height: 95vh;
    display: flex;
    flex-direction: column;
}

.pe-border-margin[b-uyt2e8caw4] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.pe-header-text[b-uyt2e8caw4] {
    font-size: var(--font-size-xxxxlarge);
}

.pe-grey-border[b-uyt2e8caw4] {
    border: 2px solid #4b5161;
    border-radius: 10px;
    padding: 0.5rem;
    font-size: var(--font-size-base);
}

/* flex-wrap + row-gap here (rather than only stacking under the mobile media query below) is
   what stops #import-button's button(s) from overflowing their own 35% column at medium widths
   and spilling over #week-group's arrows/week-number: once any column's own content stops
   fitting its flex-basis, that column now wraps onto its own line instead of overflowing
   sideways. Mirrors the same fix in YearPlanGrid.razor.css, whose #import-button can hold up to
   three buttons and hit this first, but the columns here are just as rigid if this header ever
   grows another button. */
#plan-header[b-uyt2e8caw4] {
    background-color: #4b5161;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 0 0 0 !important;
    text-align: center;
    min-height: 58px;
    height: fit-content;
    line-height: 1;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: wrap;
    row-gap: 10px;
}

#plan-title[b-uyt2e8caw4] {
    color: white;
    font-size: var(--font-size-large);
    text-align: left;
    flex: 1 1 280px;
    padding-left: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Without this, a too-narrow #plan-title doesn't move SchoolYear to its own line - flex items
   only wrap onto a new line as a whole (enabled above), so without nowrap the browser instead
   breaks inside HeaderTitle's own text first, since that's the item actually short on room. */
#plan-title span[b-uyt2e8caw4] {
    white-space: nowrap;
}

#week-group[b-uyt2e8caw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 260px;
}

#import-button[b-uyt2e8caw4] {
    flex: 1 1 280px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-right: 15px;
}

.copied-theme-pill[b-uyt2e8caw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
}

.copied-theme-pill:hover[b-uyt2e8caw4] {
    background-color: rgba(255, 255, 255, 0.28);
}

#week[b-uyt2e8caw4] {
    display: inline;
    font-size: var(--font-size-large);
}

.arrow[b-uyt2e8caw4] {
    color: white;
    display: inline-flex;
    align-items: center;
    margin: 0 15px 0 15px;
    text-decoration: none;
}

.arrow:hover[b-uyt2e8caw4] {
    opacity: 0.7;
    color: white;
    text-decoration: none;
}

@media (max-width: 768px) {
    #plan-header[b-uyt2e8caw4] {
        justify-content: center;
        gap: 10px;
    }

    /* flex-basis (set above) wins over width on a flex item once it's anything but auto, so
       forcing full width below this point takes overriding the basis, not just width itself. */
    #plan-title[b-uyt2e8caw4],
    #week-group[b-uyt2e8caw4],
    #import-button[b-uyt2e8caw4] {
        flex-basis: 100%;
    }

    #plan-title[b-uyt2e8caw4] {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        justify-content: center;
        text-align: center;
        padding-left: 0;
    }

    #import-button[b-uyt2e8caw4] {
        justify-content: center;
        padding-right: 0;
    }
}

/* /Components/TeachingManagement/WeekPlan/HomeworkComponent.razor.rz.scp.css */
.homework-element[b-fluopv1ao9] {
    padding: 0 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

    .homework-element:hover[b-fluopv1ao9] {
        opacity: 0.8;
        background-color: rgba(52, 152, 219, 0.1);
    }

.homework-underline[b-fluopv1ao9] {
    text-decoration: underline;
}

.warn-test[b-fluopv1ao9] {
    color: red;
}
/* /Components/TeachingManagement/WeekPlan/LessonElementComponent.razor.rz.scp.css */
p[b-in8xi9sbr5] {
    margin: 0;
    padding: 0;
    line-height: var(--font-size-base);
    overflow: hidden;
    font-size: var(--font-size-base);
}

.lesson-container[b-in8xi9sbr5] {
    position: relative; /* This ensure the spinner is positioned relative to the container */
    width: 100%;
    height: 100%;
    min-height: 70px;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    overflow: hidden;
}

.lesson-container:not(:hover) .grow:hover[b-in8xi9sbr5] {
    z-index: auto;
}

.smaller-container[b-in8xi9sbr5] {
    min-height: calc(70px / 4);
}

.free-time-even[b-in8xi9sbr5] {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.free-time-odd[b-in8xi9sbr5] {
    background-color: #f6f6f6 !important;
    border-color: #f6f6f6 !important;
}

.non-work-even[b-in8xi9sbr5] {
    background-color: #DCDCDC !important;
    border-color: #DCDCDC !important;
}

.non-work-odd[b-in8xi9sbr5] {
    background-color: #A9A9A9 !important;
    border-color: #A9A9A9 !important;
}

.lesson-color-background[b-in8xi9sbr5] {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.lesson-color-background[class*="-background"][b-in8xi9sbr5] {
    border: solid 1px;
}

.lesson-hover[b-in8xi9sbr5] {
    cursor: pointer;
}

.grow:hover[b-in8xi9sbr5] {
    overflow: visible;
    z-index: 95;
}

.grow:hover .inner-grow[b-in8xi9sbr5] {
    z-index: 95;
    background-color: var(--bg-color) !important;
}

.inner-grow[b-in8xi9sbr5] {
    position: absolute;
    width: 100%;
}

.prep-group[b-in8xi9sbr5]{
    display: flex;
    justify-content: right;
}

.prep[b-in8xi9sbr5] {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.done[b-in8xi9sbr5] {
    background-image: url('/images/app/YearlyTaskDone.png');
}

.not-done[b-in8xi9sbr5] {
    background-image: url('/images/app/YearlyTaskToDo.png');
}

.empty[b-in8xi9sbr5] {

}

.hm-done[b-in8xi9sbr5] {
    background-image: url('/images/app/YearlyHomework.png');
}

.hm-empty[b-in8xi9sbr5] {

}

.track[b-in8xi9sbr5] {
    display: inline-block;
    width: 10px;
    height: 10px;
}

.tasks[b-in8xi9sbr5] {
    font-size: var(--font-size-xsmall);
    padding-left: 3px;
}

.warn-test[b-in8xi9sbr5] {
    color: red;
}

.img-block[b-in8xi9sbr5] {
    width: 100%;
    padding-left: 65%;
}

/* Grid Layout ***********************************/
.lesson-grid[b-in8xi9sbr5] {
    width: 100%;
    min-height: 100%;
    display: grid;
    place-items: center;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 0;
    grid-template-areas:
        "Left Left Left Left Left Right Right"
}

.smaller-grid[b-in8xi9sbr5] {
    min-height: calc(70px / 4) ;
}

.item-lesson[b-in8xi9sbr5] {
    width: 100%;
    height: 100%;
    padding: 0.2rem;
    overflow: hidden;
}

.item-right[b-in8xi9sbr5] {
    grid-area: Right;
    text-align: right;
}

.item-left[b-in8xi9sbr5] {
    grid-area: Left;
}

/* Context menu */
.menu-item-content[b-in8xi9sbr5] {
    display: flex;
    align-items: center;
}

.menu-icon[b-in8xi9sbr5] {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.danger-item[b-in8xi9sbr5] {
    color: #e74c3c;
    transition: all 0.2s ease;
}

.danger-item:hover[b-in8xi9sbr5] {
    color: #c0392b;
}

/* Paste Spinner */
.paste-spinner[b-in8xi9sbr5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin-b-in8xi9sbr5 1s linear infinite;
    z-index: 2;
}

.paste-overlay[b-in8xi9sbr5] {
    position: relative;
}

.paste-overlay[b-in8xi9sbr5]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

@keyframes spin-b-in8xi9sbr5 {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Drag and drop */
.drag-source[b-in8xi9sbr5] {
    border: 3px solid #3498db !important;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}

.drop-target[b-in8xi9sbr5] {
    position: relative;
    border: 3px dashed #2ecc71 !important;
    background-color: rgba(46, 204, 113, 0.1) !important;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
}

.drop-target[b-in8xi9sbr5]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.drop-target *[b-in8xi9sbr5] {
    pointer-events: none !important;
}

/* Ensure drag and drop states override color classes when needed */
.lesson-container.drag-source[b-in8xi9sbr5] {
    border: 3px solid #3498db !important;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5) !important;
}

.lesson-container.drop-target[b-in8xi9sbr5] {
    position: relative;
    border: 3px dashed #2ecc71 !important;
    background-color: rgba(46, 204, 113, 0.1) !important;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.3) !important;
}

/* Task items drag styles */
.task-item[draggable="true"][b-in8xi9sbr5] {
    cursor: move;
    transition: opacity 0.2s ease-in-out;
}

.task-item[draggable="true"]:hover[b-in8xi9sbr5] {
    opacity: 0.8;
    background-color: rgba(52, 152, 219, 0.1);
}

.dragging-from-lesson[b-in8xi9sbr5] {
    opacity: 0.5;
}
/* /Components/TeachingManagement/WeekPlan/WeekPlan.razor.rz.scp.css */
.pe-border-margin[b-0nxv5l0q53] {
}

.pe-no-margin[b-0nxv5l0q53] {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

.spacing[b-0nxv5l0q53] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.white-border[b-0nxv5l0q53] {
    padding: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    min-height: fit-content;
    height: auto;
}

#planheader[b-0nxv5l0q53] {
    background-color: #4b5161;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 0 0 0 !important;
    text-align: center;
    min-height: 5.8rem;
    height: fit-content;
    line-height: 1;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 1rem;
}

#plantitle[b-0nxv5l0q53] {
    color: white;
    font-size: var(--font-size-large);
    text-align: left;
    flex: 1 1 28rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#weekgroup[b-0nxv5l0q53] {
    text-align: center;
    flex: 0 1 26rem;
}

@media (max-width: 768px) {
    /* flex-basis (set above) wins over width on a flex item once it's anything but auto, so
       forcing full width below this point takes overriding the basis, not just width itself.
       Mirrors the header fix in ThemePlan.razor.css / YearPlanGrid.razor.css. */
    #plantitle[b-0nxv5l0q53],
    #weekgroup[b-0nxv5l0q53] {
        flex-basis: 100%;
    }

    /* The right-hand #plantitle (the week date) sets text-align:right inline; !important is
       needed here to win over that inline style so both title columns center when stacked. */
    #plantitle[b-0nxv5l0q53] {
        text-align: center !important;
        padding-left: 0;
        padding-right: 0;
    }
}

#week[b-0nxv5l0q53] {
    display: inline;
    font-size: var(--font-size-large);
}

.arrow[b-0nxv5l0q53] {
    color: white;
    display: inline-flex;
    align-items: center;
    margin: 0 1rem 0 1rem;
    text-decoration: none;
}

.arrow:hover[b-0nxv5l0q53] {
    opacity: 0.7;
    color: white;
    text-decoration: none;
}

.year-weeks-row[b-0nxv5l0q53] {
    margin-top: 0.5rem;
    padding-bottom: 1rem;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.yearweek[b-0nxv5l0q53] {
    border: none;
    border-radius: 3px;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--font-size-medium);
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    cursor: pointer;
    width: calc((100% - (0.2rem * var(--week-count, 52))) / var(--week-count, 52));
    min-width: 2.8rem;
    padding: 0;
    background-clip: content-box;
}

.yearweek:hover[b-0nxv5l0q53] {
    opacity: 0.7;
}

.ywon[b-0nxv5l0q53] {
    background-color: #49d182;
}

.ywselect[b-0nxv5l0q53] {
    background-color: #49d182;
    border: solid 1px #4b5161;
}

.ywcurrent[b-0nxv5l0q53] {
    position: relative;
}

.ywcurrent[b-0nxv5l0q53]::after {
    content: "";
    position: absolute;
    display: block;
    top: 120%;
    height: 2px;
    background: #49d182;
    width: 100%;
}

.ywoff[b-0nxv5l0q53] {
    background-color: #4b5161;
}

.ywfree[b-0nxv5l0q53] {
    background-color: #a3a3a3;
}

#planningblock[b-0nxv5l0q53] {
    margin-top: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#homeworkblock[b-0nxv5l0q53] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Homework Grid Layout ***********************************/
.homework-grid[b-0nxv5l0q53] {
    display: grid;
    place-items: center;
    min-width: 100%;
    grid-template-columns: repeat(5, minmax(22rem, 1fr));
    grid-template-rows: 1fr;
    grid-gap: 0;
    grid-template-areas:
        "HMon HTue HWed HThu HFri";
}

.item-hm-1[b-0nxv5l0q53] {
    grid-area: HMon;
}
.item-hm-2[b-0nxv5l0q53] {
    grid-area: HTue;
}
.item-hm-3[b-0nxv5l0q53] {
    grid-area: HWed;
}
.item-hm-4[b-0nxv5l0q53] {
    grid-area: HThu;
}
.item-hm-5[b-0nxv5l0q53] {
    grid-area: HFri;
}

.white-hw[b-0nxv5l0q53] {
    min-height: fit-content;
    height: fit-content;
}

#planheader.reorder-item[b-0nxv5l0q53] {
    flex-direction: column;
    align-items: start;
}

#planheader > .homework-header[b-0nxv5l0q53] {
    color: white;
    font-size: var(--font-size-large);
    margin: 0 auto;
}

#planheader > .homework-header ~ .homework-header[b-0nxv5l0q53] {
    font-size: var(--font-size-base);
    padding-left: 0.5rem;
    margin: 0;
}

.flex-schoolclass[b-0nxv5l0q53] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}

.flex-schoolclass > div[b-0nxv5l0q53] {
    margin-right: 1rem;
    cursor: pointer;
}

.homework-grid > div[b-0nxv5l0q53] {
    min-height: 8rem;
}

.selected-class[b-0nxv5l0q53] {
    color: #49d182;
}

.maintain-h[b-0nxv5l0q53] {
    height: 8rem;
}

.warning-message[b-0nxv5l0q53] {
    text-align: center;
    margin-top: 5%;
    font-size: var(--font-size-medium);
    position: absolute;
    top: 20%;
}

/* Week Grid Layout ***********************************/
.week-grid[b-0nxv5l0q53] {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(5, minmax(22rem, 1fr));
    grid-template-rows: repeat(9, auto);
    grid-gap: 0;
    min-width: 100%;
    grid-template-areas:
        "Mon0 Tue0 Wed0 Thu0 Fri0"
        "Mon1 Tue1 Wed1 Thu1 Fri1"
        "Mon2 Tue2 Wed2 Thu2 Fri2"
        "Mon3 Tue3 Wed3 Thu3 Fri3"
        "Mon4 Tue4 Wed4 Thu4 Fri4"
        "Mon5 Tue5 Wed5 Thu5 Fri5"
        "Mon6 Tue6 Wed6 Thu6 Fri6"
        "Mon7 Tue7 Wed7 Thu7 Fri7"
        "Mon8 Tue8 Wed8 Thu8 Fri8"
        "Mon9 Tue9 Wed9 Thu9 Fri9"
        "Mon10 Tue10 Wed10 Thu10 Fri10"
}


.item-titles[b-0nxv5l0q53] {
    width: 100%;
    height: 2rem;
    display: flex;
    line-height: 0.7;
}

.item-titles p[b-0nxv5l0q53] {
    margin: 0 auto;
    padding: 0;
    font-size: var(--font-size-large);
}

.item-lessons[b-0nxv5l0q53] {
    width: 100%;
    height: 100%;
}

.item-border[b-0nxv5l0q53] {
    border-right: 2px solid black;
}

#item-title-1[b-0nxv5l0q53] {
    grid-area: Mon0;
}
#item-lesson-1[b-0nxv5l0q53] {
    grid-area: Mon1;
}
#item-lesson-2[b-0nxv5l0q53] {
    grid-area: Mon2;
}
#item-lesson-3[b-0nxv5l0q53] {
    grid-area: Mon3;
}
#item-lesson-4[b-0nxv5l0q53] {
    grid-area: Mon4;
}
#item-lesson-5[b-0nxv5l0q53] {
    grid-area: Mon5;
}
#item-lesson-6[b-0nxv5l0q53] {
    grid-area: Mon6;
}
#item-lesson-7[b-0nxv5l0q53] {
    grid-area: Mon7;
}
#item-lesson-8[b-0nxv5l0q53] {
    grid-area: Mon8;
}
#item-lesson-9[b-0nxv5l0q53] {
    grid-area: Mon9;
}
#item-lesson-10[b-0nxv5l0q53] {
    grid-area: Mon10;
}

#item-title-2[b-0nxv5l0q53] {
    grid-area: Tue0;
}
#item-lesson-11[b-0nxv5l0q53] {
    grid-area: Tue1;
}
#item-lesson-12[b-0nxv5l0q53] {
    grid-area: Tue2;
}
#item-lesson-13[b-0nxv5l0q53] {
    grid-area: Tue3;
}
#item-lesson-14[b-0nxv5l0q53] {
    grid-area: Tue4;
}
#item-lesson-15[b-0nxv5l0q53] {
    grid-area: Tue5;
}
#item-lesson-16[b-0nxv5l0q53] {
    grid-area: Tue6;
}
#item-lesson-17[b-0nxv5l0q53] {
    grid-area: Tue7;
}
#item-lesson-18[b-0nxv5l0q53] {
    grid-area: Tue8;
}
#item-lesson-19[b-0nxv5l0q53] {
    grid-area: Tue9;
}
#item-lesson-20[b-0nxv5l0q53] {
    grid-area: Tue10;
}

#item-title-3[b-0nxv5l0q53] {
    grid-area: Wed0;
}
#item-lesson-21[b-0nxv5l0q53] {
    grid-area: Wed1;
}
#item-lesson-22[b-0nxv5l0q53] {
    grid-area: Wed2;
}
#item-lesson-23[b-0nxv5l0q53] {
    grid-area: Wed3;
}
#item-lesson-24[b-0nxv5l0q53] {
    grid-area: Wed4;
}
#item-lesson-25[b-0nxv5l0q53] {
    grid-area: Wed5;
}
#item-lesson-26[b-0nxv5l0q53] {
    grid-area: Wed6;
}
#item-lesson-27[b-0nxv5l0q53] {
    grid-area: Wed7;
}
#item-lesson-28[b-0nxv5l0q53] {
    grid-area: Wed8;
}
#item-lesson-29[b-0nxv5l0q53] {
    grid-area: Wed9;
}
#item-lesson-30[b-0nxv5l0q53] {
    grid-area: Wed10;
}


#item-title-4[b-0nxv5l0q53] {
    grid-area: Thu0;
}
#item-lesson-31[b-0nxv5l0q53] {
    grid-area: Thu1;
}
#item-lesson-32[b-0nxv5l0q53] {
    grid-area: Thu2;
}
#item-lesson-33[b-0nxv5l0q53] {
    grid-area: Thu3;
}
#item-lesson-34[b-0nxv5l0q53] {
    grid-area: Thu4;
}
#item-lesson-35[b-0nxv5l0q53] {
    grid-area: Thu5;
}
#item-lesson-36[b-0nxv5l0q53] {
    grid-area: Thu6;
}
#item-lesson-37[b-0nxv5l0q53] {
    grid-area: Thu7;
}
#item-lesson-38[b-0nxv5l0q53] {
    grid-area: Thu8;
}
#item-lesson-39[b-0nxv5l0q53] {
    grid-area: Thu9;
}
#item-lesson-40[b-0nxv5l0q53] {
    grid-area: Thu10;
}

#item-title-5[b-0nxv5l0q53] {
    grid-area: Fri0;
}
#item-lesson-41[b-0nxv5l0q53] {
    grid-area: Fri1;
}
#item-lesson-42[b-0nxv5l0q53] {
    grid-area: Fri2;
}
#item-lesson-43[b-0nxv5l0q53] {
    grid-area: Fri3;
}
#item-lesson-44[b-0nxv5l0q53] {
    grid-area: Fri4;
}
#item-lesson-45[b-0nxv5l0q53] {
    grid-area: Fri5;
}
#item-lesson-46[b-0nxv5l0q53] {
    grid-area: Fri6;
}
#item-lesson-47[b-0nxv5l0q53] {
    grid-area: Fri7;
}
#item-lesson-48[b-0nxv5l0q53] {
    grid-area: Fri8;
}
#item-lesson-49[b-0nxv5l0q53] {
    grid-area: Fri9;
}
#item-lesson-50[b-0nxv5l0q53] {
    grid-area: Fri10;
}
/* /Components/TeachingManagement/WorkChecker/MultiStateCheckboxComponent.razor.rz.scp.css */
.multi-state-checkbox[b-vze3su0rsb] {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.multi-state-checkbox .checkbox[b-vze3su0rsb] {
    background-color: #fff;
    border: solid 1px #d7d7d7;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 18px;
    width: 18px;
    vertical-align: middle;
}

.multi-state-checkbox .checkbox svg[b-vze3su0rsb] {
    stroke: currentColor;
    fill: none;
    width: 12px;
    height: 12px;
    stroke-width: 3px;
}

.multi-state-checkbox .checkbox.unchecked[b-vze3su0rsb] {
    background-color: white;
    border-color: #dd0000;
}

.multi-state-checkbox .checkbox.checked[b-vze3su0rsb] {
    background-color: white;
    border-color: #D3D3D3;
    color: var(--color-check-green);
    stroke-width: 6px;
}

.multi-state-checkbox .checkbox.checked-yellow[b-vze3su0rsb] {
    background-color: white;
    border-color: #D3D3D3;
    color: var(--color-check-yellow);
    stroke-width: 6px;
}

.multi-state-checkbox .checkbox.checked-red[b-vze3su0rsb] {
    background-color: white;
    border-color: #D3D3D3;
    color: var(--color-check-red);
    stroke-width: 6px;
}

.multi-state-checkbox .checkbox.not-needed[b-vze3su0rsb] {
    background-color: white;
    border-color: #D3D3D3;
    color: #D3D3D3;
    stroke-width: 6px;
}

.multi-state-checkbox .label[b-vze3su0rsb] {
    font-weight: bold;
    vertical-align: middle;
    font-size: var(--font-size-small);
}

.multi-state-checkbox.checkbox-hidden[b-vze3su0rsb] {
    visibility: hidden;
}
/* /Components/TeachingManagement/WorkChecker/Popups/OpenStudentTask.razor.rz.scp.css */
.pe-modal[b-n73zdho2br] {
    height: fit-content;
    width: fit-content;
    min-width: min(400px, 95vw);
    max-width: 600px;
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
}

.pe-modal *:focus[b-n73zdho2br] {
    outline: none;
}

.pe-border-margin[b-n73zdho2br] {
    padding: 0.5rem;
}

.modal-title[b-n73zdho2br] {
    margin: 0;
    font-size: var(--font-size-medium);
}

.student-list-content[b-n73zdho2br] {
    margin: 1rem 1.5rem 1.5rem;
}

.student-filter[b-n73zdho2br] {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-xsmall);
    margin-bottom: 1rem;
    outline: none;
}

.student-list[b-n73zdho2br] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 50vh;
    overflow-y: auto;
}

.student-row[b-n73zdho2br] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: var(--font-size-small);
    transition: background-color 0.2s ease-in-out;
}

.student-row:hover[b-n73zdho2br] {
    background-color: #dedede;
}

.open-label[b-n73zdho2br] {
    font-size: var(--font-size-xsmall);
    text-transform: uppercase;
    opacity: 0.7;
}

.student-row-empty[b-n73zdho2br] {
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-xsmall);
    color: #999;
}
/* /Components/TeachingManagement/WorkChecker/Popups/SnakeGame.razor.rz.scp.css */
.pe-modal[b-6s1yg35e9e] {
    display: flex;
    flex-direction: column;
    width: 95vw;
    height: 90vh;
    height: 90dvh;
    margin: 1rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
}

.pe-modal *:focus[b-6s1yg35e9e] {
    outline: none;
}

.pe-border-margin[b-6s1yg35e9e] {
    padding: 0.5rem;
}

.modal-title[b-6s1yg35e9e] {
    margin: 0;
    font-size: var(--font-size-medium);
}

.snake-hud[b-6s1yg35e9e] {
    min-height: 1.5em;
    margin: 0.5rem 0;
    text-align: center;
    font-size: var(--font-size-small);
}

/* Takes whatever height the modal has left; snakeGame.js scales the canvas to fit inside it.
   touch-action: none so swipes steer the snake instead of scrolling the page behind. */
.snake-board[b-6s1yg35e9e] {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}

.snake-board canvas[b-6s1yg35e9e] {
    display: block;
}
/* /Components/TeachingManagement/WorkChecker/StatisticsComponent.razor.rz.scp.css */
.stats-layout[b-y69cgjnguf] {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
}

.student-column[b-y69cgjnguf] {
    flex: 0 0 auto;
}

/* Sets the "Classe" option (always first) apart from the student list below it. */
.student-column[b-y69cgjnguf]  .check-container:first-child {
    margin-bottom: 1.6rem;
}

/* Same look as WorkChecker's page container (scoped there, so redeclared here). */
.white-border[b-y69cgjnguf] {
    padding: 1rem;
    border-radius: 30px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.stats-panel[b-y69cgjnguf] {
    /* Shared by the subject column and the objective cards so they line up at the same width. */
    --stats-card-width: 18rem;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stats-title[b-y69cgjnguf] {
    font-size: var(--font-size-xxlarge);
}

/* Title + behavior counts on the left, checkmark legend on the right. The legends wrap below the
   title when the panel gets too narrow for all three side by side. */
.stats-header[b-y69cgjnguf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
}

.stats-header-main[b-y69cgjnguf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Checkmark legend, then card border legend on its right. */
.stats-legends[b-y69cgjnguf] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Items reuse .check-count (colored checkmark + text), stacked in a column. */
.check-legend[b-y69cgjnguf] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: var(--font-size-base);
}

.border-legend[b-y69cgjnguf] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: var(--font-size-base);
}

/* The yellow and red threshold items side by side, below the explanation. */
.border-legend-items[b-y69cgjnguf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 2rem;
}

.border-legend-item[b-y69cgjnguf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

/* Editable threshold, same underline-only look as TaskNumberComponent's number input. */
.threshold-input[b-y69cgjnguf] {
    width: 2.5rem;
    height: 25px;
    padding: 0;
    text-align: center;
    font-size: inherit;
    border: none;
    border-bottom: 1px solid lightgray;
    outline: none;
    -moz-appearance: textfield;
}

.threshold-input[b-y69cgjnguf]::-webkit-outer-spin-button,
.threshold-input[b-y69cgjnguf]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* A miniature objective card border (same border width and colors as .stats-card). */
.stats-card.border-swatch[b-y69cgjnguf] {
    flex: fit-content;
    width: 2.4rem;
    height: 1.4rem;
}

/* Behavior reports (seating plan icons) right below the title. */
.behavior-counts[b-y69cgjnguf] {
    display: flex;
    gap: 1.5rem;
}

.behavior-count[b-y69cgjnguf] {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-base);
}

.behavior-count img[b-y69cgjnguf] {
    height: 50px;
    width: auto;
}

.stats-empty[b-y69cgjnguf] {
    font-size: var(--font-size-medium);
    margin: 0;
}

.subject-row[b-y69cgjnguf] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Subject totals, first in its row (not a card) - outside the scrolling card list, so it stays visible. */
.subject-summary[b-y69cgjnguf] {
    flex: 0 0 15rem;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-base);
    line-height: 1.2;
}

.subject-summary .check-counts[b-y69cgjnguf] {
    justify-content: flex-start;
}

.subject-name[b-y69cgjnguf] {
    font-size: var(--font-size-xxlarge);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* One line of cards, scrolling horizontally when they don't fit. The padding keeps the cards'
   box-shadow from being clipped by the scroll container; the matching negative margin keeps the
   cards where they'd be without it. */
.objective-cards[b-y69cgjnguf] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 1rem;
    overflow-x: auto;
    padding: 15px;
    margin: -15px;
}

/* Objective cards - fixed width, never shrunk to fit the scrolling line. */
.stats-card[b-y69cgjnguf] {
    flex: 0 0 var(--stats-card-width);
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    /* Transparent until a border-* class colors it, so a card doesn't change size when it gets one. */
    border: 2px solid transparent;
    border-radius: 10px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    font-size: var(--font-size-base);
    line-height: 1.2;
    max-width: var(--stats-card-width);
}

/* Card border colors (average task score), shared by the cards and the legend swatches. */
.border-green[b-y69cgjnguf] {
    border-color: var(--color-check-green);
}

.border-yellow[b-y69cgjnguf] {
    border-color: var(--color-check-yellow);
}

.border-red[b-y69cgjnguf] {
    border-color: var(--color-check-red);
}

.objective-code[b-y69cgjnguf] {
    text-align: center;
    font-size: var(--font-size-large);
}

.objective-name[b-y69cgjnguf] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.check-counts[b-y69cgjnguf] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

/* Bottom row of the card (last child of its flex column): speed left, renforcement ratio right. */
.card-footer-stats[b-y69cgjnguf] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
}

.check-count[b-y69cgjnguf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* ::deep because the svg comes from a MarkupString, which never gets this component's scope attribute. */
.check-count[b-y69cgjnguf]  svg {
    stroke-width: 6px;
}

.check-count.checked[b-y69cgjnguf]  svg {
    color: var(--color-check-green);
}

.check-count.checked-yellow[b-y69cgjnguf]  svg {
    color: var(--color-check-yellow);
}

.check-count.checked-red[b-y69cgjnguf]  svg {
    color: var(--color-check-red);
}

@media (max-width: 768px) {
    /* Student list above the panel instead of beside it. */
    .stats-layout[b-y69cgjnguf] {
        flex-direction: column;
        gap: 1rem;
    }

    /* The student list reflows into columns, so it doesn't push the panel a whole class length
       down. "Classe" keeps its own row, still set apart from the students. */
    .student-column[b-y69cgjnguf]  .checkbox-radio-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        column-gap: 1rem;
    }

    .student-column[b-y69cgjnguf]  .check-container:first-child {
        grid-column: 1 / -1;
    }

    /* Subject totals above their cards instead of beside them, so the cards get the full width. */
    .subject-row[b-y69cgjnguf] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .subject-summary[b-y69cgjnguf] {
        flex: 0 0 auto;
    }
}

@media (max-width: 650px) {
    /* Narrower cards, so more than one shows before scrolling. */
    .stats-panel[b-y69cgjnguf] {
        --stats-card-width: 15rem;
    }
}
/* /Components/TeachingManagement/WorkChecker/StudentGradeComponent.razor.rz.scp.css */
/* /Components/TeachingManagement/WorkChecker/StudentGradeGridComponent.razor.rz.scp.css */
.no-padding[b-gvcknwznfr] {
    padding: 0;
}

#main-block[b-gvcknwznfr] {
    overflow-x: auto;
}

#main-block .table-responsive[b-gvcknwznfr] {
    overflow-y: auto;
}

.main-container[b-gvcknwznfr] {
    position: relative;
    width: fit-content;
    max-width: 100%;
    border-radius: 15px;
    overflow: hidden;
    background-color: var(--color);
    border: 4px solid var(--color2);
}

.main-grid[b-gvcknwznfr] {
    width: var(--table-width);
    min-width: var(--table-width);
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--color);
    position: relative;
}

.main-grid th[b-gvcknwznfr],
.main-grid td[b-gvcknwznfr] {
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-grid th.title[b-gvcknwznfr],
.main-grid td:first-child[b-gvcknwznfr] {
    position: sticky;
    left: 0;
    z-index: 2;
}

.main-grid th.title[b-gvcknwznfr],
.main-grid th.task[b-gvcknwznfr],
.main-grid th.semester[b-gvcknwznfr],
.main-grid td.student-name[b-gvcknwznfr],
.main-grid td.grade-container[b-gvcknwznfr] {
    border-right: 2px solid var(--color2);
}

.main-grid th.empty-semester[b-gvcknwznfr],
.main-grid th.empty-task[b-gvcknwznfr],
.main-grid td.empty-grade[b-gvcknwznfr] {
    border-right: none;
}

.main-grid th.semester[b-gvcknwznfr] {
    border-bottom: 2px solid var(--color2);
}

.main-grid th.empty-semester[b-gvcknwznfr] {
    border-bottom: none;
}

.main-grid tbody tr.highlight[b-gvcknwznfr] {
    background-color: rgba(211, 211, 211, 0.5) !important;
    position: relative;
    z-index: 1;
}

.main-grid tbody tr.highlight td.student-name[b-gvcknwznfr] {
    z-index: 3;
}

.main-grid .empty-task[b-gvcknwznfr] {
    background-color: transparent;
}

.empty-semester[b-gvcknwznfr],
.empty-task[b-gvcknwznfr] {
    background-color: var(--color);
}

.main-grid .title[b-gvcknwznfr] {
    background-color: var(--color);
    color: white;
    width: var(--fixed-column-width);
    min-width: var(--fixed-column-width);
    max-width: var(--fixed-column-width);
    text-align: center;
    vertical-align: middle;
    position: sticky;
    left: 0;
    z-index: 2;
    /* th is bold by default in the UA stylesheet; on top of the already-bold
       ubuntu_titlingbold font, that triggers synthetic/faux-bold rendering. */
    font-weight: normal;
}

.text-large[b-gvcknwznfr] {
    font-size: var(--font-size-xxlarge);
    line-height: 1;
}

.text-medium[b-gvcknwznfr] {
    font-size: var(--font-size-large);
    line-height: 1;
}

.main-grid .semester[b-gvcknwznfr] {
    background-color: var(--color);
    color: white;
    text-align: center;
    vertical-align: middle;
}

.main-grid .task[b-gvcknwznfr] {
    width: var(--task-width);
    min-width: var(--task-width);
    max-width: var(--task-width);
    height: 150px;
    padding: 5px 0;
    position: relative;
    overflow: hidden;
    font-weight: normal;
    color: white;
    scroll-margin-left: var(--fixed-column-width);
}

.main-grid .task span[b-gvcknwznfr] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    max-height: var(--task-width);
    width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 18px;
}

.main-grid .task.ecr6h.smaller-width span[b-gvcknwznfr],
.main-grid .task.ecr8h.smaller-width span[b-gvcknwznfr],
.main-grid .task.ts.smaller-width span[b-gvcknwznfr] {
    width: 150px;
}

.main-grid .task.eta span[b-gvcknwznfr] {
    width: 150px;
}

.main-grid .ts:hover[b-gvcknwznfr],
.main-grid .eta:hover[b-gvcknwznfr],
.main-grid .test-group:hover[b-gvcknwznfr] {
    cursor: pointer;
}

.main-grid .ts.no-click:hover[b-gvcknwznfr],
.main-grid .eta.no-click:hover[b-gvcknwznfr],
.main-grid .test-group.no-click:hover[b-gvcknwznfr] {
    cursor: default;
}

.main-grid .test-group[b-gvcknwznfr] {
    border-right: 2px solid var(--color2);
    border-bottom: 2px solid var(--color2);
    background-color: var(--color);
    color: white;
    text-align: center;
    vertical-align: middle;
}

.main-grid .student-name[b-gvcknwznfr] {
    width: var(--fixed-column-width);
    min-width: var(--fixed-column-width);
    max-width: var(--fixed-column-width);
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: inherit;
    padding-left: 10px;
}

.main-grid .grade-container[b-gvcknwznfr] {
    width: var(--task-width);
    min-width: var(--task-width);
    max-width: var(--task-width);
    text-align: center;
    vertical-align: middle;
}

.main-grid .even[b-gvcknwznfr] {
    background-color: #f8f9fa;
}

.main-grid .odd[b-gvcknwznfr] {
    background-color: #ffffff;
}

.main-grid .average-row[b-gvcknwznfr] {
    height: 3rem;
}

.main-grid .average-row td[b-gvcknwznfr] {
    vertical-align: bottom;
}

.task.text-underline.row-3 span[b-gvcknwznfr] {
    width: calc(165px + 29px);
}

.task.text-underline.row-3.default-width span[b-gvcknwznfr] {
    width: 165px;
}

.task.text-underline span[b-gvcknwznfr] {
    text-decoration: underline;
}

.main-grid .task.small[b-gvcknwznfr] {
    height: fit-content;
    text-align: center;
}

.main-grid .final-average-header[b-gvcknwznfr] {
    border-left: 2px solid var(--color2);
    border-top: 2px solid var(--color2);
}

.main-grid .final-average-header.final-average-last[b-gvcknwznfr] {
    border-right: 4px solid var(--color2);
}

.main-grid .final-average-cell[b-gvcknwznfr] {
    border-left: 2px solid var(--color2);
}

.main-grid .final-average-cell.final-average-last[b-gvcknwznfr] {
    border-right: 4px solid var(--color2);
}

.main-grid td[b-gvcknwznfr], .main-grid th[b-gvcknwznfr] {
    transition: border-color 0.1s;
}

.main-grid thead tr th.task.hide-content[b-gvcknwznfr] {
    visibility: hidden;
}

.main-grid tbody tr td.grade-container.hide-content[b-gvcknwznfr] {
    border-right-color: transparent !important;
}

/* GRADE COLOR */
.grade-insufficient[b-gvcknwznfr] {
    color: #ff4646;
}

.grade-sufficient[b-gvcknwznfr] {
    /* default color */
}

.grade-good[b-gvcknwznfr] {
    color: #49d182;
}

/* Separator styling */
.semester-separator[b-gvcknwznfr] {
    width: var(--separator-width);
    min-width: var(--separator-width);
    max-width: var(--separator-width);
    background-color: white;
    border-right: 2px solid var(--color2);
    border-left: none;
}

.semester-separator-cell[b-gvcknwznfr] {
    width: var(--separator-width);
    min-width: var(--separator-width);
    max-width: var(--separator-width);
    background-color: white;
    border-right: 2px solid var(--color2);
    border-left: none;
}

/* Tooltip styling */
.tooltip-cell[b-gvcknwznfr] {
    position: relative;
    cursor: help;
    overflow: visible !important;
}

.cell-tooltip-text[b-gvcknwznfr] {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: var(--font-size-base);
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    width: auto;
    height: auto;
}

.tooltip-cell:hover .cell-tooltip-text[b-gvcknwznfr] {
    visibility: visible;
    opacity: 1;
}

.tooltip-cell:focus .cell-tooltip-text[b-gvcknwznfr] {
    visibility: visible;
    opacity: 1;
}

.cell-tooltip-text.right[b-gvcknwznfr] {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
}

.cell-tooltip-text.left[b-gvcknwznfr] {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
}

.cell-tooltip-text.top[b-gvcknwznfr] {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
}

.cell-tooltip-text.bottom[b-gvcknwznfr] {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
}

.cell-tooltip-text.right[b-gvcknwznfr]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
}

.cell-tooltip-text.left[b-gvcknwznfr]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
}

.cell-tooltip-text.top[b-gvcknwznfr]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.cell-tooltip-text.bottom[b-gvcknwznfr]::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}
/* /Components/TeachingManagement/WorkChecker/StudentHomeworkComponent.razor.rz.scp.css */
.column-header[b-nbjorscbm2] {
    font-size: var(--font-size-medium);
    text-align: center;
}

.warn-test[b-nbjorscbm2] {
    color: red;
}

.homework-row[b-nbjorscbm2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0 5px;
}

.homework-objectives-pdf-icon[b-nbjorscbm2] {
    height: 24px;
    width: auto;
    flex-shrink: 0;
    cursor: pointer;
}

.homework-objectives-pdf-icon:hover[b-nbjorscbm2] {
    opacity: 0.7;
}

.homework-objectives-pdf-icon.generating[b-nbjorscbm2] {
    opacity: 0.4;
    cursor: wait;
}
/* /Components/TeachingManagement/WorkChecker/StudentTask.razor.rz.scp.css */
.pe-no-margin[b-qb16x5aify] {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

.spacing[b-qb16x5aify] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.white-border[b-qb16x5aify] {
    padding: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    min-height: 95vh;
    height: fit-content;
}

.white-border-inside[b-qb16x5aify] {
    margin: 0;
    padding: 0;
    min-height: fit-content;
    height: fit-content;
    border-radius: 15px;
}

.pe-border-margin[b-qb16x5aify] {
}

#pageheader[b-qb16x5aify] {
    background-color: #4b5161;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0px 0px 0px 0px !important;
    text-align: center;
    height: 58px;
}

#pageheader > .checkwork-header[b-qb16x5aify] {
    color: white;
    font-size: var(--font-size-small);
    text-align: left;
    width: 35%;
    padding-left: 15px;
    padding-top: 0.5rem;
}

#pageheader > .checkwork-header ~ .checkwork-header[b-qb16x5aify] {
    font-size: var(--font-size-large);
    padding-top: 0;
    text-align: center;
}

@media (max-width: 835px) {
    #pageheader > .checkwork-header[b-qb16x5aify] {
        width: 100%;
    }
    
    .checkwork-header:first-child[b-qb16x5aify],
    .checkwork-header:last-child[b-qb16x5aify] {
        display: none;
    }
}

#homework-block[b-qb16x5aify] {
    border-radius: 25px;
    margin: 0 !important;
    text-align: center;
    height: 58px;
}

#homework-block > .homework-header[b-qb16x5aify] {
    font-size: var(--font-size-large);
    text-align: left;
    width: 35%;
}

.text-underline[b-qb16x5aify] {
    text-decoration: underline;
    padding-left: 10px;
}

#weekgroup[b-qb16x5aify] {
    text-align: center;
    width: 100%;
}

#week[b-qb16x5aify] {
    display: inline;
    font-size: var(--font-size-large);
}

.arrow[b-qb16x5aify] {
    width: 1.1rem;
    height: 1.1rem;
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px 0 15px;
}

.arrow:hover[b-qb16x5aify] {
    opacity: 0.7;
}

#week-date[b-qb16x5aify] {
    font-size: var(--font-size-base);
    text-align: center;
}

.maintain-h[b-qb16x5aify] {
    height: 8rem;
}

.reinforcement-switch[b-qb16x5aify] {
    margin: 0 0 0.5rem 0.5rem;
}

@media (max-width: 835px) {
    #homework-block > .homework-header[b-qb16x5aify] {
        width: 50%;
    }

    .homework-header:last-child[b-qb16x5aify] {
        display: none;
    }

    .homework-header:nth-child(2n)[b-qb16x5aify]{
        text-align: right;
    }
}

@media (max-width: 600px) {
    #homework-block[b-qb16x5aify] {
        display: flex;
        flex-direction: column;
        height: fit-content;
    }

    #homework-block > .homework-header[b-qb16x5aify] {
        width: 100%;
    }

    .homework-header:last-child[b-qb16x5aify] {
        display: none;
    }
    
    #weekgroup a:first-child > div[b-qb16x5aify] {
        margin-left: 0;
    }

    #weekgroup a:last-child > div[b-qb16x5aify] {
        margin-right: 0;
    }
}

/* Homework ***********************************/
.homework-flex[b-qb16x5aify] {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.item-lessons[b-qb16x5aify] {
    flex: 1 1 250px;
    min-height: 8rem;
    box-sizing: border-box;
    position: relative;
    padding: 10px;
}

.item-lessons[b-qb16x5aify]::after,
.item-lessons[b-qb16x5aify]::before {
    content: '';
    position: absolute;
    background-color: black;
    display: none;
}

.item-lessons[b-qb16x5aify]::after {
    top: 10px;
    right: 0;
    bottom: 10px;
    width: 2px;
}

.item-lessons[b-qb16x5aify]::before {
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
}


/* Media query for 6 items per row */
@media (min-width: 1625px) {
    .item-lessons:not(:nth-child(6)):not(:last-child)[b-qb16x5aify]::after {
        display: block;
    }
}

/* Media query for 5 items per row */
@media (min-width: 1376px) and (max-width: 1624px) {
    .item-lessons:not(:nth-child(5)):not(:last-child)[b-qb16x5aify]::after {
        display: block;
    }
    .item-lessons:nth-child(-n+5)[b-qb16x5aify]::before {
        display: block;
    }
}

/* Media query for 4 items per row */
@media (min-width: 1126px) and (max-width: 1375px) {
    .item-lessons:not(:nth-child(4n)):not(:last-child)[b-qb16x5aify]::after {
        display: block;
    }
    .item-lessons:nth-child(-n+4)[b-qb16x5aify]::before {
        display: block;
    }
}

/* Media query for 3 items per row */
@media (min-width: 876px) and (max-width: 1125px) {
    .item-lessons:not(:nth-child(3n))[b-qb16x5aify]::after {
        display: block;
    }
    .item-lessons:not(:nth-child(n+4))[b-qb16x5aify]::before {
        display: block;
    }
}

/* Media query for 2 items per row */
@media (min-width: 626px) and (max-width: 875px) {
    .item-lessons:not(:nth-child(2n))[b-qb16x5aify]::after {
        display: block;
    }
    .item-lessons:not(:nth-child(n+5))[b-qb16x5aify]::before {
        display: block;
    }
}

/* Media query for 1 item per row */
@media (max-width: 625px) {
    .item-lessons:not(:last-child)[b-qb16x5aify]::before {
        display: block;
    }
}
/* /Components/TeachingManagement/WorkChecker/SubjectSelectorComponent.razor.rz.scp.css */
.flex-subject[b-rl526ijipq] {
    display: flex;
    flex-direction: row;
    margin: 0.5rem 1rem;
    font-size: var(--font-size-medium);
    flex-wrap: wrap;
    line-height: 1;
    align-content: center;
    min-height: 5vh;
}

.flex-subject > div[b-rl526ijipq] {
    margin-right: 1rem;
    cursor: pointer;
}

.selected-subject[b-rl526ijipq] {
    color: #49d182;
}

/* Compact variant: matches the DayPlan work checker header's subject list. */
.compact-subject-list[b-rl526ijipq] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: var(--font-size-base);
    padding-left: 0.5rem;
}

.compact-subject-list div span[b-rl526ijipq] {
    cursor: pointer;
    margin: 0;
}

.compact-selected-subject[b-rl526ijipq] {
    color: limegreen !important;
    text-decoration: underline !important;
    text-decoration-color: white !important;
}
/* /Components/TeachingManagement/WorkChecker/TaskCheckerComponent.razor.rz.scp.css */
.objective-color-legend[b-velozvu8gn] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1rem;
    font-size: var(--font-size-base);
}

.objective-color-legend-item[b-velozvu8gn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.objective-color-dot[b-velozvu8gn] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
/* /Components/TeachingManagement/WorkChecker/TaskCheckerGridComponent.razor.rz.scp.css */
.no-padding[b-t7wk2vkck6] {
    padding: 0;
}

#workcheckblock[b-t7wk2vkck6] {
    overflow-x: auto;
}

#workcheckblock .table-responsive[b-t7wk2vkck6] {
    overflow-y: auto;
}

#workcheckblock .day-plan-height[b-t7wk2vkck6] {
    max-height: 69vh;
}

@media (max-height: 1000px) {
    #workcheckblock .day-plan-height[b-t7wk2vkck6] {
        max-height: 63vh;
    }
}

.workcheck-container[b-t7wk2vkck6] {
    position: relative;
    width: fit-content;
    max-width: 100%;
    border-radius: 15px;
    overflow: hidden;
    background-color: var(--color);
    border: 3px solid var(--color2);
}

.workcheck-grid[b-t7wk2vkck6] {
    width: var(--table-width);
    min-width: var(--table-width);
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--color);
    position: relative;
}

.workcheck-grid th[b-t7wk2vkck6],
.workcheck-grid td[b-t7wk2vkck6] {
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workcheck-grid th.title[b-t7wk2vkck6],
.workcheck-grid td:first-child[b-t7wk2vkck6] {
    position: sticky;
    left: 0;
    z-index: 2;
}

.workcheck-grid th.title[b-t7wk2vkck6],
.workcheck-grid th.task[b-t7wk2vkck6],
.workcheck-grid td.student-name[b-t7wk2vkck6],
.workcheck-grid td.checkbox-container[b-t7wk2vkck6] {
    border-right: 3px solid var(--color2);
}

.workcheck-grid th.empty-task[b-t7wk2vkck6],
.workcheck-grid td.empty-checkbox[b-t7wk2vkck6] {
    border-right: none;
}

.clickable:hover[b-t7wk2vkck6] {
    cursor: pointer;
}

.text-direction[b-t7wk2vkck6] {
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    padding: 5px !important;
}

.student-task-background[b-t7wk2vkck6] {
    background-color: var(--color) !important;
}

.workcheck-grid tbody tr.highlight td[style*="--category-color"][b-t7wk2vkck6] {
    background-color: color-mix(in srgb, var(--category-color) 70%, black) !important;
    position: relative;
    z-index: 1;
}

.workcheck-grid tbody tr.highlight[b-t7wk2vkck6] {
    background-color: rgba(211, 211, 211, 0.5);
    position: relative;
    z-index: 1;
}

.workcheck-grid tbody tr.highlight td.student-name[b-t7wk2vkck6] {
    background-color: rgba(211, 211, 211, 0.5);
    z-index: 3;
}

/* Style for empty tasks and checkboxes */
.workcheck-grid .empty-task[b-t7wk2vkck6],
.workcheck-grid .empty-checkbox[b-t7wk2vkck6] {
    background-color: transparent;
}

.workcheck-grid .title[b-t7wk2vkck6] {
    background-color: var(--color);
    color: white;
    width: var(--fixed-column-width);
    min-width: var(--fixed-column-width);
    max-width: var(--fixed-column-width);
    text-align: center;
    vertical-align: middle;
    position: sticky;
    left: 0;
    z-index: 2;
    /* th is bold by default in the UA stylesheet; on top of the already-bold
       ubuntu_titlingbold font, that triggers synthetic/faux-bold rendering. */
    font-weight: normal;
}

.text-large[b-t7wk2vkck6] {
    font-size: var(--font-size-xxlarge);
    line-height: 1;
}

.text-medium[b-t7wk2vkck6] {
    font-size: var(--font-size-large);
    line-height: 1;
}

.workcheck-grid .task[b-t7wk2vkck6] {
    width: var(--task-width);
    min-width: var(--task-width);
    max-width: var(--task-width);
    height: 130px;
    padding: 5px 0;
    position: relative;
    overflow: hidden;
    font-weight: normal;
    color: white;
    scroll-margin-left: var(--fixed-column-width);
}

.workcheck-grid .task-label[b-t7wk2vkck6] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* `writing-mode: sideways-lr` would give crisper native vertical text than this rotated bitmap,
   but @supports can't be trusted to gate it: Safari and DuckDuckGo both accept the keyword as
   valid syntax (so @supports reports "supported") without actually rendering it, which silently
   no-ops the text back to horizontal AND skips the `@supports not` fallback that would otherwise
   catch them. Rotating unconditionally via `transform` is the only technique that renders
   correctly everywhere. */
.workcheck-grid .task span[b-t7wk2vkck6] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    max-height: var(--task-width);
    width: 130px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 18px;
    font-size: var(--font-size-medium);
}

.workcheck-grid .incomplete-counts[b-t7wk2vkck6] {
    padding-right: 6px;
}

.workcheck-grid .incomplete-subject-count[b-t7wk2vkck6] {
    color: var(--color);
}

.workcheck-grid .incomplete-total-count[b-t7wk2vkck6] {
    color: #bbb;
}

.workcheck-grid .student-name[b-t7wk2vkck6] {
    width: var(--fixed-column-width);
    min-width: var(--fixed-column-width);
    max-width: var(--fixed-column-width);
    position: sticky;
    left: 0;
    z-index: 4;
    background-color: inherit;
    padding-left: 10px;
}

.workcheck-grid .student-name-content[b-t7wk2vkck6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.workcheck-grid .checkbox-container[b-t7wk2vkck6] {
    width: var(--task-width);
    min-width: var(--task-width);
    max-width: var(--task-width);
    padding: 2px 0;
    text-align: center;
    vertical-align: middle;
}

.workcheck-grid .even[b-t7wk2vkck6] {
    background-color: #ffffff;
}

.workcheck-grid .odd[b-t7wk2vkck6] {
    background-color: #f8f9fa;
}

.workcheck-grid td[style*="--category-color"][b-t7wk2vkck6] {
    background-color: color-mix(in srgb, var(--category-color) 70%, white);
}

.workcheck-grid .odd td[style*="--category-color"][b-t7wk2vkck6] {
    background-color: var(--category-color);
}

.week-old-1[b-t7wk2vkck6] {
    color: #ff5c5c;
}

.week-old-2[b-t7wk2vkck6] {
    color: #c03b3b;
}

.empty-task[b-t7wk2vkck6] {
    background-color: var(--color);
}

.empty-checkbox[b-t7wk2vkck6] {
    background-color: #f0f0f0;
}

.workcheck-grid td[b-t7wk2vkck6], .workcheck-grid th[b-t7wk2vkck6] {
    transition: border-color 0.1s;
}

.workcheck-grid thead tr th.task.hide-content[b-t7wk2vkck6] {
    visibility: hidden;
}

.workcheck-grid tbody tr td.checkbox-container.hide-content[b-t7wk2vkck6] {
    border-right-color: transparent !important;
    background-color: transparent !important;
}
/* /Components/TeachingManagement/WorkChecker/WorkChecker.razor.rz.scp.css */
.pe-no-margin[b-5vnb35w0eg] {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    max-width: 1735px;
}

.spacing[b-5vnb35w0eg] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.white-border[b-5vnb35w0eg] {
    padding: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    min-height: 95vh;
    height: auto;
    display: flex;
    flex-direction: column;
}

.pe-border-margin[b-5vnb35w0eg] {
}

#pageheader[b-5vnb35w0eg] {
    background-color: #4b5161;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 0 0 0 !important;
    text-align: center;
    min-height: 58px;
    flex-direction: column;
}

#title[b-5vnb35w0eg] {
    color: white;
    font-size: var(--font-size-large);
    text-align: center;
    max-width: 35%;
    min-width: fit-content;
    padding-left: 15px;
}

.frame[b-5vnb35w0eg] {
    border-radius: 15px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    margin: 0;
    padding: 0;
    min-height: 86vh;
}

#pageheader > .checkwork-header[b-5vnb35w0eg] {
    color: white;
    font-size: var(--font-size-large);
    margin: 0 auto;
    line-height: 1;
}

#pageheader > .checkwork-header ~ .checkwork-header[b-5vnb35w0eg] {
    font-size: var(--font-size-base);
    padding-left: 0.5rem;
    margin: 0;
}

.top-container[b-5vnb35w0eg] {
    display: flex;
    justify-content: space-between;
}

.flex-schoolclass[b-5vnb35w0eg] {
    display: flex;
    flex-direction: row;
    margin: 0.5rem 1rem;
    font-size: var(--font-size-medium);
    flex-wrap: wrap;
    line-height: 1;
    align-content: center;
}

.flex-schoolclass > div[b-5vnb35w0eg] {
    margin-right: 1rem;
    cursor: pointer;
}

.work-type[b-5vnb35w0eg] {
    display: flex;
    flex-direction: row-reverse;
    margin: 0.5rem 1rem;
    font-size: var(--font-size-large);
    flex-wrap: wrap;
    line-height: 1;
    align-content: center;
    gap: 1rem;
}

.selected-class[b-5vnb35w0eg] {
    color: #49d182;
}

.clickable:hover[b-5vnb35w0eg] {
    cursor: pointer;
}

/* Owns the margin/spacing for both the legend and the switch below it via gap - neither
   child needs its own margin, so there's nothing to collapse or fight over regardless of
   whether the legend is present (Categories.Count == 0 just leaves the switch as its only child). */
.legend-and-switch[b-5vnb35w0eg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.flex-category[b-5vnb35w0eg] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    font-size: var(--font-size-small);
}

.category-item[b-5vnb35w0eg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-dot[b-5vnb35w0eg] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: inline-block;
}

.workcheck-switches[b-5vnb35w0eg] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

/* Two classes (not one) so this beats SwitchButton's own same-specificity
   .toggle-switch-container margin rule regardless of stylesheet bundling order. */
[b-5vnb35w0eg] .toggle-switch-container.workcheck-switch {
    margin: 0;
}

.warning-message[b-5vnb35w0eg] {
    text-align: center;
    margin-top: 10%;
    font-size: var(--font-size-medium);
}

.maintain-h[b-5vnb35w0eg] {
    height: 8rem;
}

.qr-container[b-5vnb35w0eg] {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 10px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    min-height: 5vh;
    height: fit-content;
    width: fit-content;
    margin: 0.5rem 1rem 0.5rem 0;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

    .qr-container:hover[b-5vnb35w0eg] {
        background-color: #dedede;
    }

.qr-button[b-5vnb35w0eg] {
    display: flex;
    align-items: center;
}

.qr-button > p[b-5vnb35w0eg] {
    font-size: var(--font-size-base);
    padding: 0 0.5rem;
    margin: 0;
    line-height: 1.1;
    text-wrap: nowrap;
}

.qr-button > img[b-5vnb35w0eg] {
    width: 3rem;
    height: auto;
    padding: 0 0.5rem;
}

.qr-img[b-5vnb35w0eg] {
    height: auto;
    width: 10rem;
}

.qr-list[b-5vnb35w0eg] {
    display: flex;
    flex-wrap: wrap;
}

.qr-card[b-5vnb35w0eg] {
    width: 10rem;
    height: auto;
}

.qr-card > div[b-5vnb35w0eg] {
    text-align: center;
}
/* /Components/TeachingManagement/YearPlan/ImportLesson.razor.rz.scp.css */
.pe-no-margin[b-m2awm20p66] {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

.spacing[b-m2awm20p66] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.white-border[b-m2awm20p66] {
    padding: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pe-border-margin[b-m2awm20p66] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.filter-header[b-m2awm20p66] {
    background-color: #4b5161;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 0 0 0 !important;
    text-align: center;
    min-height: 58px;
    height: fit-content;
    line-height: 1;
    align-items: center;
    flex: 0 0 auto;
    font-size: var(--font-size-large);
    gap: 0.5rem;
}

.filter-title[b-m2awm20p66] {
    color: white;
    font-size: var(--font-size-large);
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    gap: 15px;
}

.subject-item:hover[b-m2awm20p66],
.arrow:hover[b-m2awm20p66] {
    opacity: 0.7;
    text-decoration: none;
    cursor: pointer;
}

.arrow[b-m2awm20p66] {
    font-size: var(--font-size-xxxxlarge);
    line-height: 1;
}

.between-arrow[b-m2awm20p66] {
    line-height: 2;
}

.selected-class[b-m2awm20p66] {
    color: #49d182;
}

.filter-section[b-m2awm20p66] {
    display: flex;
    gap: 0.5rem;
    border: 2px solid #4b5161;
    border-top: none;
}

.own-lesson-filter[b-m2awm20p66] {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    align-items: center;
    border-right: 2px solid #4b5161;
    padding: 0.5rem;
}

.filter-label[b-m2awm20p66] {
    text-align: center;
    font-size: var(--font-size-medium);
}

.filter-label.small-text[b-m2awm20p66] {
    font-size: var(--font-size-base);
    text-align: left;
}

.year-filter[b-m2awm20p66] {
    display: flex;
    gap: 0.5rem;
    font-size: var(--font-size-medium);
    width: fit-content;
}

.others-lesson-filter[b-m2awm20p66] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
}

.global-filter[b-m2awm20p66] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.teacher-filter[b-m2awm20p66] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.group-filter[b-m2awm20p66],
.school-class-filter[b-m2awm20p66] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.import-lesson-container[b-m2awm20p66] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.planning-container[b-m2awm20p66] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* YearPlanGrid defaults to height: 95vh for its standalone use in YearPlan;
   here multiple grids are stacked, so let each one size to its content instead. */
[b-m2awm20p66] .teacher-plan-section .white-border {
    height: fit-content;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

[b-m2awm20p66] .teacher-plan-section .spacing {
    padding: 0;
}

/* The flex:1 1 auto + min-height:0 + overflow:auto chain below normally lets
   .weeks-scroll-container scroll within a definite-height ancestor (95vh).
   With .white-border now sized to fit-content, that chain has no definite
   height to distribute, so it collapses instead of growing - force these
   to size to their content and drop the vertical scroll; horizontal scroll
   is kept since each week row is still wider than the viewport.
   Note: overflow-y must be "hidden", not "visible" - since overflow-x stays
   "auto", the spec forces a "visible" overflow-y to compute as "auto" too,
   which kept showing the scrollbar despite the sizing fix above. */
[b-m2awm20p66] .teacher-plan-section .pe-border-margin,
[b-m2awm20p66] .teacher-plan-section #planning-block,
[b-m2awm20p66] .teacher-plan-section .weeks-scroll-container {
    flex: 0 0 auto;
    min-height: unset;
    overflow-y: hidden;
}



/* /Components/TeachingManagement/YearPlan/LessonComponent.razor.rz.scp.css */
.lesson-content[b-6he0a4gbwf] {
    position: relative; /* This ensure the spinner is positioned relative to the container */
    height: 100px;
    border: 1px solid;
    overflow: hidden;
}

/* A lesson slot whose specific day is a holiday (or weekend), independent of whether the
   rest of the week works - mirrors the grey used for full-holiday weeks in YearPlanGrid. */
.lesson-holiday[b-6he0a4gbwf] {
    background-color: #d9d9d9;
    border-color: #a3a3a3;
}

.hover-content[b-6he0a4gbwf] {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.hover-content:hover:not(.drag-source)[b-6he0a4gbwf] {
    /* We use the rgba approach because the opacity and filter properties 
     * create stacking contexts problem with the context menu */
    background-color: rgba(var(--user-color-rgb), 0.95) !important;
}

.lesson-height > div[b-6he0a4gbwf] {
    height: 100%;
}

.lesson-no-content[b-6he0a4gbwf] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.lesson-no-content img[b-6he0a4gbwf] {
    transition: all 0.3s ease;
}

.lesson-no-content:hover img[b-6he0a4gbwf] {
    opacity: 0.9;
    transform: scale(1.2);
}

.no-cursor[b-6he0a4gbwf] {
    cursor: default;
}

.prep-group[b-6he0a4gbwf]{
    display: flex;
    justify-content: space-between;
}

.prep[b-6he0a4gbwf] {
    display: inline-block;
    width: 15px;
    height: 15px !important;
    margin: 2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.track[b-6he0a4gbwf] {
    display: inline-block;
    width: 10px;
    height: 10px !important;
}

.tasks[b-6he0a4gbwf] {
    font-size: var(--font-size-xsmall);
    padding-left: 3px;
}

.warn-test[b-6he0a4gbwf] {
    color: red;
}

.img-block[b-6he0a4gbwf] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.img-block img[b-6he0a4gbwf] {
    height: 22px;
}

.menu-item-content[b-6he0a4gbwf] {
    display: flex;
    align-items: center;
}

.menu-icon[b-6he0a4gbwf] {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.danger-item[b-6he0a4gbwf] {
    color: #e74c3c;
    transition: all 0.2s ease;
}

.danger-item:hover[b-6he0a4gbwf] {
    color: #c0392b;
}

/* Dynamic styles */
.done[b-6he0a4gbwf] {
    background-image: url('/images/app/YearlyTaskDone.png');
}

.not-done[b-6he0a4gbwf] {
    background-image: url('/images/app/YearlyTaskToDo.png');
}

.empty[b-6he0a4gbwf] {

}

.hm-done[b-6he0a4gbwf] {
    background-image: url('/images/app/YearlyHomework.png');
}

.hm-empty[b-6he0a4gbwf] {

}

/* Paste spinner styles */
.paste-spinner[b-6he0a4gbwf] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin-b-6he0a4gbwf 1s linear infinite;
    z-index: 2;
}

.paste-overlay[b-6he0a4gbwf] {
    position: relative;
}

.paste-overlay[b-6he0a4gbwf]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

@keyframes spin-b-6he0a4gbwf {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Drag and drop visual feedback */
.drag-source[b-6he0a4gbwf] {
    border: 3px solid #3498db !important;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}

/* :hover doesn't reliably track the cursor during a native HTML5 drag in any major browser
   (the drag gesture suppresses normal hover tracking), so the drop-target class below is
   toggled by the client-only JS listener in scrollHelper.js (enableYearPlanTaskDrop) instead -
   still no server round trip per dragover tick. */
.lesson-content.droppable.drop-target-hover:not(.drag-source)[b-6he0a4gbwf] {
    border: 3px dashed #2ecc71 !important;
    background-color: rgba(46, 204, 113, 0.1) !important;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
}

.tasks[data-contextmenu-trigger][b-6he0a4gbwf] {
    pointer-events: auto !important;
    position: relative;
    z-index: 1000;
}

.tasks[draggable="true"][b-6he0a4gbwf] {
    cursor: move;
    transition: opacity 0.2s ease-in-out;
}

.tasks[draggable="true"]:hover:not(.dragging-from-lesson)[b-6he0a4gbwf] {
    opacity: 0.8;
    background-color: rgba(52, 152, 219, 0.1);
}

.dragging-from-lesson[b-6he0a4gbwf] {
    opacity: 0.5;
}
/* /Components/TeachingManagement/YearPlan/Popups/AddAssimilatedWork.razor.rz.scp.css */
.pe-modal[b-i3zlx6ajk4] {
    height: fit-content;
    width: fit-content;
    max-width: 1050px;
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
}

.pe-modal *:focus[b-i3zlx6ajk4] {
    outline: none;
}

.pe-border-margin[b-i3zlx6ajk4] {
    padding: 0.5rem;
}

.modal-title[b-i3zlx6ajk4] {
    margin: 0;
}

.test-content[b-i3zlx6ajk4] {
    margin: 0 1rem;
}

.row-selector[b-i3zlx6ajk4] {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 1rem;
}

.row-selector label[b-i3zlx6ajk4] {
    width: 150px;
    padding: 0;
    margin: 0;
}

.row-selector select[b-i3zlx6ajk4] {
    background-color: #ffffff;
    border: 1px solid #4b5161;
    border-radius: 15px;
    padding: 5px 20px;
    width: 300px;
}

.test-title[b-i3zlx6ajk4] {
    border: none;
    border-bottom: 1px solid #ced4da;
    padding: 5px;
    width: 100%;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* /Components/TeachingManagement/YearPlan/Popups/AddCurriculumObjectives.razor.rz.scp.css */
.pe-modal[b-xe3i8guedt] {
    height: fit-content;
    width: min(1400px, 95vw);
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
}

.pe-border-margin[b-xe3i8guedt] {
    padding: 0.5rem;
}


.subject-list[b-xe3i8guedt] {
    display: flex;
    flex-direction: row;
    font-size: var(--font-size-base);
    flex-wrap: wrap;
    line-height: 1;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    align-items: center;
    justify-content: center;
}

.subject-list div span[b-xe3i8guedt] {
    cursor: pointer;
    margin: 0 0.5rem;
}

.selected[b-xe3i8guedt] {
    color: limegreen !important;
}

.separator[b-xe3i8guedt] {
    color: rgba(255, 255, 255, 0.4);
}

.learning-objectives-list[b-xe3i8guedt] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    flex-shrink: 0;
    overflow-x: auto;
    cursor: grab;
}

.learning-objectives-list.dragging[b-xe3i8guedt] {
    cursor: grabbing;
    user-select: none;
}

.learning-objective-item[b-xe3i8guedt] {
    flex: 0 0 200px;
    min-height: 100px;
    padding: 1rem;
    border-radius: 16px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    user-select: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
}

.learning-objective-item:hover[b-xe3i8guedt] {
    border-color: rgba(50, 205, 50, 0.4);
}

.learning-objective-item.objective-selected[b-xe3i8guedt] {
    box-shadow: 0 0 15px 0 rgba(50, 205, 50, 0.25);
}

.learning-objective-item.objective-selected .code[b-xe3i8guedt],
.learning-objective-item.objective-selected .name[b-xe3i8guedt] {
    text-shadow: 0.05em 0 var(--outline-color), 0 0.05em var(--outline-color), -0.05em 0 var(--outline-color), 0 -0.05em var(--outline-color), -0.05em -0.05em var(--outline-color), -0.05em 0.05em var(--outline-color), 0.05em -0.05em var(--outline-color), 0.05em 0.05em var(--outline-color);
}

.learning-objective-item .code[b-xe3i8guedt] {
    font-size: var(--font-size-xxlarge);
    font-weight: 600;
}

.learning-objective-item .name[b-xe3i8guedt]{
    text-align: center;
    font-size: var(--font-size-medium);
}

.learning-objective-item .objectives-count[b-xe3i8guedt] {
    font-size: var(--font-size-base);
    margin-top: auto;
}

.learning-objective-item.objective-selected .objectives-count[b-xe3i8guedt] {
    color: white;
}

/* Progressions panel */
.learning-progressions[b-xe3i8guedt] {
    padding: 0 1rem 1rem;
    /* Keep the original 450px cap on small screens, but grow with the viewport on larger ones */
    max-height: max(450px, calc(100vh - 370px));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progression-group[b-xe3i8guedt] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-radius: 17px;
    padding-bottom: 0.5rem;
}

.progression-sub-group[b-xe3i8guedt] {
    margin: 0 0.5rem;
}

.progression-title[b-xe3i8guedt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.25rem;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    cursor: pointer;
}

.progression-title.subtitle[b-xe3i8guedt] {
    font-weight: 500;
    padding-left: 0.75rem;
    border-left: 3px solid #ccc;
    border-radius: 0 4px 4px 0;
}

.progression-title-info[b-xe3i8guedt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.progression-title-count[b-xe3i8guedt] {
    font-size: var(--font-size-base);
    white-space: nowrap;
    color: white;
}

.progression-title:not(.subtitle) .progression-title-text[b-xe3i8guedt],
.progression-title:not(.subtitle) .progression-title-count[b-xe3i8guedt] {
    text-shadow: 0.05em 0 var(--outline-color), 0 0.05em var(--outline-color), -0.05em 0 var(--outline-color), 0 -0.05em var(--outline-color), -0.05em -0.05em var(--outline-color), -0.05em 0.05em var(--outline-color), 0.05em -0.05em var(--outline-color), 0.05em 0.05em var(--outline-color);
}

.collapse-arrow[b-xe3i8guedt] {
    width: var(--font-size-base);
    height: auto;
}

.progression-item[b-xe3i8guedt] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-left: 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.progression-item:hover[b-xe3i8guedt] {
    background-color: rgba(50, 205, 50, 0.08);
}

.progression-item.selected[b-xe3i8guedt] {
    background-color: rgba(50, 205, 50, 0.15);
    border: 1px solid #49d182;
}

.prog-check[b-xe3i8guedt] {
    margin-left: auto;
    padding-right: 0.75rem;
    color: #49d182;
    font-weight: 600;
    flex-shrink: 0;
}

.progression-item + .progression-item[b-xe3i8guedt] {
    border-top: 1px solid #e8e8e8;
}

.progression-item + .progression-item.selected[b-xe3i8guedt] {
    border-top: 1px solid #49d182;
}

.sub-cycle[b-xe3i8guedt] {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: white;
    background-color: #4b5161;
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.prog-text[b-xe3i8guedt] {
    font-size: var(--font-size-small);
    color: #444;
    line-height: 1.4;
    padding-left: 1rem;
    text-indent: -1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.prog-text[b-xe3i8guedt]::before {
    content: "•";
    display: inline-block;
    width: 1rem;
    padding-left: 1rem;
}

.prog-text[b-xe3i8guedt]  ul {
    list-style: none;
    padding-left: 1rem;
    margin: 0;
}

.prog-text[b-xe3i8guedt]  li::before {
    content: "- ";
    font-weight: 600;
}

.selection-count[b-xe3i8guedt] {
    font-size: var(--font-size-base);
    white-space: nowrap;
}
/* /Components/TeachingManagement/YearPlan/Popups/AddGradingScale.razor.rz.scp.css */
.pe-modal[b-aa7b3e5gaf] {
    height: fit-content;
    width: fit-content;
    min-width: min(620px, 95vw);
    max-width: 1050px;
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
}

.pe-modal *:focus[b-aa7b3e5gaf] {
    outline: none;
}

.pe-border-margin[b-aa7b3e5gaf] {
    padding: 0.5rem;
}

.pe-header-text[b-aa7b3e5gaf] {
    line-height: 1;
}

.pe-subtitle[b-aa7b3e5gaf] {
    line-height: 1;
    font-size: var(--font-size-base);
}

.close-button[b-aa7b3e5gaf] {
    position: absolute;
    right: 10px;
    top: calc(50% - (40px / 2));
}

.close-button:hover[b-aa7b3e5gaf] {
    cursor: pointer;
}

.close-button img[b-aa7b3e5gaf] {
    height: 40px;
    width: auto;
}

.lb-content[b-aa7b3e5gaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lb-content .row[b-aa7b3e5gaf] {
    align-items: center;
}

.row > *[b-aa7b3e5gaf] {
    padding-right: 0;
    padding-left: 0;
}

.lb-fixed-width[b-aa7b3e5gaf] {
    width: 360px;
    height: 40px;
}

.lb-input-block[b-aa7b3e5gaf] {
    height: 40px;
}

.lb-input[b-aa7b3e5gaf] {
    border-radius: 10px;
    border: 1px solid #d6d6d6;
    padding-left: 5px;
    vertical-align: middle;
    height: 35px;
    margin: 0 !important;
    caret-color: #d6d6d6;
    color: var(--text-color-default);
    width: 80px;
}

    .lb-input:hover[b-aa7b3e5gaf] {
        border: 1px solid #b6b6b6;
    }
    
    .lb-input:focus[b-aa7b3e5gaf] {
        box-shadow: 0 0 2px 0 #49d182;
        border: 1px solid #49d182;
        outline: none;
    }

.lb-input-label[b-aa7b3e5gaf] {
    vertical-align: middle;
    text-align: right;
    padding-right: 0.3rem;
    width: 100px;
}

.lb-post-label[b-aa7b3e5gaf] {
    padding-left: 3px;
    margin-top: 1px;
    width: 50px;
}

.lb-select[b-aa7b3e5gaf] {
    background-color: #ffffff;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    padding: 0 5px;
    width: 230px;
    height: 30px;
}

    .lb-select:hover:enabled[b-aa7b3e5gaf] {
        border: 1px solid #b6b6b6;
    }
    
    .lb-select:focus:enabled[b-aa7b3e5gaf] {
        box-shadow: 0 0 2px 0 #49d182;
        border: 1px solid #49d182;
        outline: none;
    }

.lb-option[b-aa7b3e5gaf] {
    color: #666666;
}

.rating-scale-container[b-aa7b3e5gaf] {
    padding: 0.5rem;
    margin-left: 0;
    border-radius: 10px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

#rating-scale-content[b-aa7b3e5gaf] {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.text-danger[b-aa7b3e5gaf] {
    width: 100%;
    text-align: center;
}

.lb-button-collapse[b-aa7b3e5gaf] {
    text-align: center;
    cursor: pointer;
}

.control-container[b-aa7b3e5gaf] {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 1.5rem 0.25rem 1.5rem;
}
/* /Components/TeachingManagement/YearPlan/Popups/AddLesson.razor.rz.scp.css */
.header[b-5ks7kacrm5] {
    background-color: #4b5161;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 0 0 0 !important;
}

textarea[b-5ks7kacrm5] {
    resize: none;
    width: 100%;
    height: calc(100% - 40px);
    box-sizing: border-box;
    border-color: white !important;
    overflow: hidden !important;
}

textarea:focus[b-5ks7kacrm5] {
    outline: 0 !important;
    -webkit-appearance: none;
    box-shadow: none !important;
}

.pe-modal[b-5ks7kacrm5] {
    min-height: 95vh;
    width: 95vw;
    margin: 1rem auto;
    background-color: white;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pe-border-margin[b-5ks7kacrm5] {
    padding: 0.5rem;
}

.header-bis[b-5ks7kacrm5] {
    background-color: #4b5161;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: white;
    padding: 0 0 0 10px;
    margin: 0 0 0 0 !important;
    height: 3rem;
    line-height: 3rem;
    display: flex;
    justify-content: space-between;
}

.no-task-check[b-5ks7kacrm5] {
    justify-content: start;
}

.pe-header-bis-text[b-5ks7kacrm5] {
    font-size: var(--font-size-medium);
    display: flex;
    align-items: center;
}

.pe-header-text[b-5ks7kacrm5] {
    font-size: var(--font-size-xxxxlarge);
}

.add-icon[b-5ks7kacrm5] {
    cursor: pointer;
    height: var(--font-size-xlarge);
    margin-left: 1rem;
}

.add-icon:hover[b-5ks7kacrm5] {
    opacity: 80%;
}

.pe-grey-border[b-5ks7kacrm5] {
    border: 2px solid #4b5161;
    border-radius: 10px;
    padding: 0;
    font-size: var(--font-size-base);
    overflow: hidden;
}

/* Tâches élèves spans the full row width on its own, so it keeps a wider minimum than the
   individually-wrapping sections below it. */
.student-tasks-container[b-5ks7kacrm5] {
    min-width: 32rem;
}

.min-height100[b-5ks7kacrm5] {
    min-height: 100px;
}

.col-description[b-5ks7kacrm5],
.col-teacher-tasks[b-5ks7kacrm5],
.col-homework-tests[b-5ks7kacrm5] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Each section gets its own min-width and wraps onto a new line - and eventually its own row
   (full-width single column) - once the row can no longer fit it beside its neighbors at that
   minimum. flex-grow shares any extra space beyond the minimums, weighted toward Remarques since
   it started from a larger basis. */
.col-description[b-5ks7kacrm5] {
    flex: 2 1 415px;
    min-width: 415px;
}

.col-teacher-tasks[b-5ks7kacrm5],
.col-homework-tests[b-5ks7kacrm5] {
    flex: 1 1 200px;
    min-width: 200px;
}

/* Makes col-description itself a column flex container so its single child (description-box) can
   flex-grow to fill it, rather than resolving a percentage height against col-description -
   percentage heights inside an auto-height flex item resolve against its *hypothetical*
   (pre-stretch) size in some browsers, which let the description box's rendered content overflow
   past the row's actual (shorter) bottom edge and overlap the "Tâches élèves" section below it
   instead of leaving a gap before it. */

/* The row's flex items already stretch to equal height by default, but that only sizes the
   column div itself - without these rules the grey-bordered box(es) inside col-teacher-tasks/
   col-homework-tests would keep their own natural (min-height100) height and leave blank space
   below them instead of reaching the same bottom edge as the Remarques box. Splitting flex-grow
   evenly between Devoirs and Évaluations makes their combined height match the other columns. */
.col-teacher-tasks .pe-grey-border[b-5ks7kacrm5],
.col-homework-tests .pe-grey-border[b-5ks7kacrm5] {
    flex: 1 1 auto;
}

.description-box[b-5ks7kacrm5] {
    /* flex-grow (not height:100%) fills col-description's definite stretched height without the percentage/
       auto-parent ambiguity described above; min-height316 (on this same element) still floors it
       at 316px when the right column is short. */
    height: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.description-editor-container[b-5ks7kacrm5] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar.ql-toolbar.ql-snow {
    flex: 0 0 auto;
    border: none;
    display: flex;
    justify-content: flex-start;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar .ql-formats {
    margin-right: 0;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar .text-style-group {
    display: inline-flex;
    float: left;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar .text-style-group button,
.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar button.ql-list {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar .text-style-group button {
    float: none;
    height: 100%;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar button.ql-list {
    float: left;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar .text-style-group button svg,
.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar button.ql-list svg {
    height: 18px;
    float: none;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar .ql-picker.ql-font,
.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar .ql-picker.ql-size,
.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar .ql-picker.ql-color,
.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar button.ql-list {
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #ccc;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar .ql-picker-label {
    display: flex;
    align-items: center;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-toolbar .ql-formats > * + * {
    margin-left: -1px;
}

.description-editor-container[b-5ks7kacrm5]  .description-editor-content.ql-container.ql-snow {
    flex: 1 1 auto;
    min-height: 0;
    border: none;
}

.pe-input[b-5ks7kacrm5] {
    border: 1px solid #4b5161;
    margin: 0;
    padding: 5px;
    vertical-align: middle;
    font-size: var(--font-size-base);
    border-radius: 8px;
}

.secondary-text[b-5ks7kacrm5] {
    font-size: var(--font-size-base);
}

/* Makes lesson-block the flexible region that absorbs the modal's height: it grows to fill
   whatever space plan-header/lesson-date-container/control-container don't need.
   student-tasks-container (Tâches élèves) then grows within it while lesson-details-row
   (Remarques/Tâches enseignant/Devoirs/Évaluations) keeps its own natural height below. */
#lesson-block[b-5ks7kacrm5] {
    margin-top: 0.25rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* A direct flex child of lesson-block (no intervening .row/.col-12) - going through Bootstrap's
   row/col grid here would size this box via align-items:stretch instead of flex-grow, and a
   stretched (not explicitly definite) height isn't reliably usable by this box's own flex-grow
   children in every browser, the same class of bug documented below for col-description. */
.student-tasks-container[b-5ks7kacrm5] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Scrolls internally once the task list is taller than the space student-tasks-container was
   given. min-height (not 0) floors the list at a readable size instead of letting a tall
   Remarques/Devoirs/Évaluations row squeeze it down to nothing - .pe-modal only sets a
   min-height (not a fixed height), so once every section is at its floor the modal itself grows
   past 95vh to fit them, and Blazored.Modal's own scroll container (.blazored-modal-content,
   max-height:100vh; overflow-y:auto in app.css) scrolls the page for the rest. */
.student-tasks-list[b-5ks7kacrm5] {
    flex: 1 1 auto;
    min-height: 400px;
    max-height: 525px;
    overflow-y: auto;
}

.lesson-details-row[b-5ks7kacrm5] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lesson-date-container[b-5ks7kacrm5] {
    width: 100%;
    margin-top: 0.5rem;
    text-align: center;
    flex: 0 0 auto;
}

/* Matches the width of TaskListComponent's suivi column, so "suivi" lines up with the monitored
   checkmark below it. */
.track-text[b-5ks7kacrm5] {
    color: white;
    font-size: var(--font-size-medium);
    text-align: center;
    width: 4rem;
}

.task-header-labels[b-5ks7kacrm5] {
    display: flex;
    align-items: center;
}

/* Matches the icon column's width in TaskListComponent's rows, which has no header label of its
   own, so Modalité/Durée/suivi below line up with their matching row columns instead of the
   attachment-download icon column. */
.task-header-icon-spacer[b-5ks7kacrm5] {
    width: 2rem;
}

.task-header-label[b-5ks7kacrm5] {
    color: white;
    font-size: var(--font-size-medium);
    text-align: center;
}

.modality-label[b-5ks7kacrm5] {
    width: 8rem;
}

.duration-label[b-5ks7kacrm5] {
    width: 5rem;
}

.control-container[b-5ks7kacrm5] {
    display: flex;
    flex-direction: row-reverse;
    flex: 0 0 auto;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 1.5rem 0.25rem 1.5rem;
}

.in-list-task-group[b-5ks7kacrm5] {
    width: 100%;
    font-size: var(--font-size-xsmall);
    display: flex;
    overflow: hidden;
    position: relative;
    background-color: #f6f6f6;
    height: 3rem;
}

.in-list-task[b-5ks7kacrm5] {
    width: -webkit-calc(100% - 80px);
    width: -moz-calc(100% - 80px);
    width: calc(100% - 80px);
    font-size: var(--font-size-xsmall);
    text-align: left;
    color: var(--text-color-default);
    border: none;
    white-space: initial;
    padding-left: 10px;
    display: inline-block;
    background-color: #f6f6f6;
    min-height: 35px;
}

.in-list-task:hover[b-5ks7kacrm5] {
    background-color: #e6e6e6;
}

.icon[b-5ks7kacrm5] {
    width: 40px;
    text-align: center;
    background-color: #f6f6f6;
}

.dl-icon-img:hover[b-5ks7kacrm5] {
    opacity: 70%;
}

.dl-icon-img[b-5ks7kacrm5] {
    position: absolute;
    vertical-align: middle;
    top: calc(50% - 11px);
    right: 48px;
    cursor: pointer;
}

.checkbox-container[b-5ks7kacrm5] {
    width: 40px;
    background-color: #f6f6f6;
    margin-right: 5px;
}

.delete-icon-img[b-5ks7kacrm5] {
    position: absolute;
    vertical-align: middle;
    top: calc(50% - 11px);
    right: 12px;
    cursor: pointer;
}

.delete-icon-img:hover[b-5ks7kacrm5] {
    opacity: 80%;
}

#remark[b-5ks7kacrm5] {
    width: 100%;
    padding-left: 5px;
    text-align: start;
    border-radius: 0 0 8px 8px;
    font-size: var(--font-size-xsmall);
    min-height: 40px;
}

#ShortName[b-5ks7kacrm5] {
    width: 100%;
    padding-left: 10px;
    text-align: start;
    border-radius: 0 0 8px 8px;
    font-size: var(--font-size-xsmall);
    height: 60px;
    min-height: 40px;
}

.type[b-5ks7kacrm5] {
    background-color: #ffffff;
    border: 1px solid #4b5161;
    border-radius: 5px;
    padding: 5px;
    margin: 10px 10px 0 10px;
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    width: calc(100% - 20px);
    font-size: var(--font-size-xsmall);
    display: inline;
    vertical-align: middle;
}

/* ADD/EDIT TASK STYLE */
#SchoolTaskName[b-5ks7kacrm5] {
    height: 190px;
    width: 100%;
    padding-left: 10px;
    text-align: start;
    border-radius: 0 0 8px 8px;
}

#ShortName[b-5ks7kacrm5] {
    padding: 15px 0 15px 5px;
    font-size: var(--font-size-base);
}

.pe-line-even[b-5ks7kacrm5] {
    background-color: white;
}

.pe-line-odd[b-5ks7kacrm5] {
    background-color: #f6f6f6;
}

/* CheckboxDesign */
/* The container */
.container[b-5ks7kacrm5] {
    padding-left: 15px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: var(--font-size-xxlarge);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 20px;
    vertical-align: middle;
}

/* Hide the browser's default checkbox */
.container input[b-5ks7kacrm5] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark[b-5ks7kacrm5] {
    position: relative;
    display: inline-block;
    height: 25px;
    width: 25px;
    background-color: #ffffff;
    border: 1px solid #4f96ed;
    vertical-align: middle;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark[b-5ks7kacrm5] {
    background-color: #ffffff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark[b-5ks7kacrm5]:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark[b-5ks7kacrm5]:after {
    display: inline-block;
}

/* Style the checkmark/indicator */
.container .checkmark[b-5ks7kacrm5]:after {
    left: 7px;
    top: 0;
    width: 10px;
    height: 20px;
    border: solid #49d182;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* /Components/TeachingManagement/YearPlan/Popups/AddMaterial.razor.rz.scp.css */
.pe-border-margin[b-lv02ghqsbi] {
    padding: 0.5rem;
}

.pe-modal[b-lv02ghqsbi] {
    height: fit-content;
    width: fit-content;
    max-width: 825px;
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
}


.period[b-lv02ghqsbi] {
    margin: 1rem auto 0 auto;
    text-align: center;
}

.period span[b-lv02ghqsbi] {
    margin: 0 0.5rem;
}

.period-value[b-lv02ghqsbi] {
    margin-right: 10px;
}

.task-description[b-lv02ghqsbi] {
    padding: 1rem;
}

.task-title[b-lv02ghqsbi] {
    border: none;
    border-bottom: 1px solid #3c3f4f;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
}
/* /Components/TeachingManagement/YearPlan/Popups/AddTaskStudent.razor.rz.scp.css */
.pe-modal[b-x724vvos2a] {
    height: fit-content;
    width: min(900px, 95vw);
    box-sizing: border-box;
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
    overflow-x: hidden;
}


/* Remove focus outline for all elements within the modal */
.pe-modal *:focus[b-x724vvos2a] {
    outline: none;
}

.pe-border-margin[b-x724vvos2a] {
    padding: 0.5rem;
}

.modal-title[b-x724vvos2a] {
    background-color: #3c3f4f;
    color: white;
    padding: 10px;
    border-radius: 30px 30px 0 0;
    text-align: center;
}

.head-block[b-x724vvos2a] {
    margin: 0 1rem;
    box-sizing: border-box;
}

.period[b-x724vvos2a] {
    margin: 1rem auto 0 auto;
    text-align: center;
}

.period span[b-x724vvos2a] {
    margin: 0 0.5rem;
}

.period-value[b-x724vvos2a] {
    margin-right: 10px;
}

.edit-button[b-x724vvos2a] {
    background: none;
    border: none;
    cursor: pointer;
}

.head-block .task-description[b-x724vvos2a] {
    padding: 0;
    margin: 1rem 0.5rem;
}

.task-description[b-x724vvos2a] {
    padding: 1rem;
}

.container-center[b-x724vvos2a] {
    display: flex;
    flex-direction: column;
}

.container-center .task-description[b-x724vvos2a] {
    margin: 1rem 0;
}

.follow-container[b-x724vvos2a]{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.follow-header[b-x724vvos2a] {
    align-items: center;
    gap: 1.5rem;
}

.task-category[b-x724vvos2a] {
    margin-bottom: 15px;
    margin-top: 15px;
}

.task-title[b-x724vvos2a] {
    border: none;
    border-bottom: 1px solid #3c3f4f;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
}

.task-title.not-full-width[b-x724vvos2a] {
    width: 60%;
}

.task-title.short[b-x724vvos2a] {
    max-width: 200px;
}

.task-short-row[b-x724vvos2a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.task-desc-row[b-x724vvos2a] {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}

.task-desc-editor-container[b-x724vvos2a] {
    flex: 1;
    min-width: 0;
    min-height: 300px;
    border: 1px solid black;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar.ql-toolbar.ql-snow {
    flex: 0 0 auto;
    border: none;
    display: flex;
    justify-content: flex-start;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar .ql-formats {
    margin-right: 0;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar .text-style-group {
    display: inline-flex;
    float: left;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar .text-style-group button,
.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar button.ql-list {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar .text-style-group button {
    float: none;
    height: 100%;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar button.ql-list {
    float: left;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar .text-style-group button svg,
.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar button.ql-list svg {
    height: 18px;
    float: none;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar .ql-picker.ql-font,
.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar .ql-picker.ql-size,
.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar .ql-picker.ql-color,
.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar button.ql-list {
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #ccc;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar .ql-picker-label {
    display: flex;
    align-items: center;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-toolbar .ql-formats > * + * {
    margin-left: -1px;
}

.task-desc-editor-container[b-x724vvos2a]  .task-desc-editor-content.ql-container.ql-snow {
    flex: 1 1 auto;
    min-height: 0;
    border: none;
}

.task-extra-fields[b-x724vvos2a] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.task-duration[b-x724vvos2a] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.task-duration label[b-x724vvos2a] {
    font-size: var(--font-size-base);
    white-space: nowrap;
}

.task-duration input[b-x724vvos2a] {
    max-width: 3rem;
}

.task-duration input[b-x724vvos2a]::-webkit-outer-spin-button,
.task-duration input[b-x724vvos2a]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.task-duration input[type="number"][b-x724vvos2a] {
    -moz-appearance: textfield;
}

.task-status[b-x724vvos2a] {
    margin-bottom: 15px;
    margin-top: 15px;
    justify-content: space-evenly;
}

.task-status label[b-x724vvos2a] {
    margin-right: 15px;
    margin-top: -15px;
}

.task-status .check-block[b-x724vvos2a] {
    margin: 0 0.5rem;
    text-align: center;
}

.task-status .check-block p[b-x724vvos2a] {
    margin: 0 0 0.5rem;
}

.task-status .check-block .note[b-x724vvos2a] {
    color: #6c757d;
    margin-top: -1.2rem;
    margin-bottom: 0;
    font-size: var(--font-size-xsmall);
}

/* TaskCategory reuses the shared RadioCheckboxGroup atom (same checkbox as Settings' week-format
   picker) - only the label content (.check-text, passed in as this component's own RenderFragment)
   stays scoped here; the checkbox/checkmark/list layout itself lives in the atom's own CSS. */
.task-category[b-x724vvos2a] {
    margin-left: 0.5rem;
}

.task-category .check-text p[b-x724vvos2a] {
    margin: 0;
    text-align: left;
}

.task-category .check-text .note[b-x724vvos2a] {
    color: #6c757d;
    margin-top: -0.6rem;
    font-size: var(--font-size-xsmall);
}

.file-upload[b-x724vvos2a] {
    border: 2px dashed #ced4da;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    margin-bottom: 15px;
}

.attached-file[b-x724vvos2a] {
    background-color: #e9ecef;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.attached-file img[b-x724vvos2a] {
    margin-right: 10px;
}

.delete-button[b-x724vvos2a] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
}

.task-description.objectives-list[b-x724vvos2a] {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

.objectives-header[b-x724vvos2a] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    width: 100px;
    text-wrap: nowrap;
    font-size: var(--font-size-base);
}

.objectives-add-icon[b-x724vvos2a] {
    height: 28px;
    width: auto;
    cursor: pointer;
    margin-left: 1rem;
}

.objective-container[b-x724vvos2a] {
    display: flex;
    height: 100px;
    min-width: 0;
}

.learning-objectives-list[b-x724vvos2a] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 150px;
    overflow: auto;
    min-width: 0;
}

.learning-objective-item[b-x724vvos2a] {
    flex: 0 0 200px;
    padding: 1rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    user-select: none;
    cursor: pointer;
    color: white;
}

.learning-objective-details[b-x724vvos2a] {
    height: 100px;
    overflow: auto;
    min-width: 0;
    flex: 1;
}

.learning-objective-item .code[b-x724vvos2a] {
    font-size: var(--font-size-xxlarge);
    font-weight: 600;
}

.learning-objective-item .name[b-x724vvos2a]{
    text-align: center;
    font-size: var(--font-size-medium);
    overflow-wrap: break-word;
}

.learning-objective-item .code[b-x724vvos2a],
.learning-objective-item .name[b-x724vvos2a] {
    text-shadow: 0.05em 0 var(--outline-color), 0 0.05em var(--outline-color), -0.05em 0 var(--outline-color), 0 -0.05em var(--outline-color), -0.05em -0.05em var(--outline-color), -0.05em 0.05em var(--outline-color), 0.05em -0.05em var(--outline-color), 0.05em 0.05em var(--outline-color);
}

.progression-item[b-x724vvos2a] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.5rem 0 1rem;
}

.progression-item .prog-text[b-x724vvos2a] {
    font-size: var(--font-size-small);
    color: #444;
    line-height: 1.4;
    overflow-wrap: break-word;
    min-width: 0;
}

.progression-item .prog-text[b-x724vvos2a]  ul {
    list-style: none;
    padding-left: 1rem;
    margin: 0;
}

.progression-item .prog-text[b-x724vvos2a]  li {
    padding-left: 1rem;
    text-indent: -1rem;
}

.progression-item .prog-text[b-x724vvos2a]  li::before {
    content: "- ";
    font-weight: 600;
    display: inline-block;
    padding-left: 1rem;
    width: 1rem;
}

/* TaskPhase (Masquer/À terminer/Corr. coll.) can't reuse the shared RadioCheckboxGroup atom
   itself - re-clicking the active phase clears it back to NoPhase, which needs a real
   deselectable checkbox input, whereas the atom always renders (non-deselectable) radio inputs.
   These values are copied from the atom's own CSS so the checkbox still looks identical to the
   Settings week-format picker's. */
.check-container[b-x724vvos2a] {
    padding-left: 0.5rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.check-container input[b-x724vvos2a] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark[b-x724vvos2a] {
    position: relative;
    display: inline-block;
    height: 1.6rem;
    width: 1.6rem;
    background-color: #ffffff;
    border: 0.1rem solid #D3D3D3;
    vertical-align: middle;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark[b-x724vvos2a] {
    background-color: #eee;
}

/* Visible keyboard focus indicator */
.check-container input:focus-visible ~ .checkmark[b-x724vvos2a] {
    outline: 0.2rem solid #4b5161;
    outline-offset: 0.2rem;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark[b-x724vvos2a]:after {
    content: "";
    position: absolute;
    display: none;
    left: 0.56rem;
    top: -0.4rem;
    width: 0.8rem;
    height: 1.6rem;
    border: solid #49d182;
    border-width: 0 0.24rem 0.24rem 0;
    transform: rotate(45deg);
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark[b-x724vvos2a]:after {
    display: block;
}
/* /Components/TeachingManagement/YearPlan/Popups/AddTest.razor.rz.scp.css */
.pe-modal[b-yf6dbqxu7x] {
    height: fit-content;
    width: fit-content;
    max-width: 1080px;
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
}

.pe-modal *:focus[b-yf6dbqxu7x] {
    outline: none;
}

.pe-border-margin[b-yf6dbqxu7x] {
    padding: 0.5rem;
}


.test-content[b-yf6dbqxu7x] {
    margin: 0 1rem;
}

.custom-col[b-yf6dbqxu7x] {
    display: flex;
    flex-direction: column;
    width: fit-content;
}

.custom-col.spacing[b-yf6dbqxu7x] {
    gap: 1rem;
}

.pe-grey-border[b-yf6dbqxu7x] {
    border: 2px solid #4b5161;
    border-radius: 10px;
    padding: 0 0 10px 0;
    font-size: var(--font-size-base);
    overflow: hidden;
}

.objectives-container[b-yf6dbqxu7x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.objectives-content[b-yf6dbqxu7x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0 5px;
}

.objective-button[b-yf6dbqxu7x] {
    font-size: var(--font-size-medium);
    background-color: #4b5161;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 80%;
    margin: 0 auto;
}

.header-bis[b-yf6dbqxu7x] {
    background-color: #4b5161;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: white;
    padding: 0 0 0 10px;
    margin: 0 0 0 0 !important;
    height: 3rem;
    line-height: 3rem;
    display: flex;
    justify-content: start;
}

.pe-header-bis-text[b-yf6dbqxu7x] {
    font-size: var(--font-size-medium);
    display: flex;
}

.period[b-yf6dbqxu7x] {
    margin: 1rem 0;
}

.period span[b-yf6dbqxu7x] {
    margin: 0 0.5rem;
}

.period-value[b-yf6dbqxu7x] {
    margin-right: 10px;
}

.select-semester[b-yf6dbqxu7x] {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 1rem 0 0;
}

.test-title[b-yf6dbqxu7x] {
    border: none;
    border-bottom: 1px solid #ced4da;
    padding: 5px;
    width: 100%;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.test-theme-select[b-yf6dbqxu7x] {
    margin: 1rem 0;
    width: 100%;
}

.test-theme-select[b-yf6dbqxu7x]  .select-wrapper.full-width .select-label {
    width: fit-content;
}

.test-type[b-yf6dbqxu7x] {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
}

.test-eta[b-yf6dbqxu7x] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.test-eta select[b-yf6dbqxu7x] {
    background-color: #FFFFFF;
    border: 1px solid #4B5161;
    border-radius: 10px;
    padding: 0 5px;
    width: 200px;
    height: 2rem;
}

.check-block[b-yf6dbqxu7x] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.check-block p[b-yf6dbqxu7x] {
    margin: 0;
}

.eta-list[b-yf6dbqxu7x] {
    display: flex;
    flex-direction: column;
}

.list-title[b-yf6dbqxu7x] {
    font-size: var(--font-size-xxlarge);
}

.list-container[b-yf6dbqxu7x] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 3rem;
    color: #a0a0a0;
}

.test-automation[b-yf6dbqxu7x] {
    display: flex;
    flex-direction: column;
}

.test-automation .check-container[b-yf6dbqxu7x] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
}

#quantity[b-yf6dbqxu7x] {
    position: initial;
    opacity: initial;
    cursor: pointer;
    height: 25px;
    padding: 0;
    text-align: center;
    border: none;
    border-bottom: 1px solid lightgray;
}

/* Hide spinner arrows for webkit browsers (Chrome, Safari, Edge) */
#quantity[b-yf6dbqxu7x]::-webkit-outer-spin-button,
#quantity[b-yf6dbqxu7x]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spinner arrows for Firefox */
#quantity[type=number][b-yf6dbqxu7x] {
    -moz-appearance: textfield;
}

.download-container[b-yf6dbqxu7x] {
    margin: 1rem 0;
}

.edit-button[b-yf6dbqxu7x] {
    background: transparent;
    border: 2px solid #4b5161;
    border-radius: 10px;
    padding: 1rem 2rem;
    transition: background-color 0.3s ease-in-out;
}

.edit-button:hover[b-yf6dbqxu7x] {
    background-color: #dedede;
}

.button-title[b-yf6dbqxu7x] {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    font-size: var(--font-size-medium);
}

.button-subtitle[b-yf6dbqxu7x] {
    display: block;
    font-size: var(--font-size-base);
    color: var(--text-color-default);
}

.modal-actions[b-yf6dbqxu7x] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0 1rem;
}

.modal-actions .btn[b-yf6dbqxu7x] {
    width: fit-content;
}

/* TA button */
.ta-button[b-yf6dbqxu7x] {
    padding-left: 3rem;
}

.aw-container[b-yf6dbqxu7x] {
    display: flex;
    width: fit-content;
    height: fit-content;
    margin: 0.5rem 1rem 0.5rem 0;
    gap: 1rem;
    font-size: var(--font-size-medium);
    line-height: 1;
    align-items: center;
}

.aw-container:hover[b-yf6dbqxu7x] {
    cursor: pointer;
}

.aw-container p[b-yf6dbqxu7x] {
    margin: 0;
}

.aw-container img[b-yf6dbqxu7x] {
    height: var(--font-size-xxlarge);
    width: auto;
}
/* /Components/TeachingManagement/YearPlan/Popups/AddTheme.razor.rz.scp.css */
.pe-modal[b-sv9p9rermf] {
    height: fit-content;
    width: min(1450px, 95vw);
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
}

.pe-border-margin[b-sv9p9rermf] {
    padding: 0.5rem;
}


.theme-content[b-sv9p9rermf] {
    margin-top: 1rem;
}

.info-row[b-sv9p9rermf] {
    display: flex;
    gap: 2rem;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-content: center;
}

.info-left[b-sv9p9rermf] {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

.info-right[b-sv9p9rermf] {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding-top: 2px;
}

.eval-grp[b-sv9p9rermf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pe-input[b-sv9p9rermf] {
    border: none;
    border-bottom: 1px solid #ced4da;
    padding: 5px;
    width: 150px;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.pe-input.full-width[b-sv9p9rermf] {
    width: 100%;
}

.date-row[b-sv9p9rermf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.date-selection[b-sv9p9rermf] {
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}

.margin-rl[b-sv9p9rermf] {
    margin-left: 1rem;
    margin-right: 1rem;
}

#theme-length[b-sv9p9rermf] {
    line-height: 1;
}

.control-container[b-sv9p9rermf] {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 1.5rem 0.25rem 1.5rem;
}

.pdf-download-btn[b-sv9p9rermf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 180px;
    border-radius: 10px;
    border: 2px solid #de5f5f;
    background-color: transparent;
    color: var(--text-color-default);
    text-transform: uppercase;
    padding: 5px 10px;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

.pdf-download-btn:hover[b-sv9p9rermf] {
    background-color: rgba(222, 95, 95, 0.1);
}

.pdf-download-btn:active[b-sv9p9rermf] {
    transform: scale(0.98);
}

.pdf-download-btn:disabled[b-sv9p9rermf] {
    color: #999;
    border-color: #d2d2d2;
    cursor: not-allowed;
    opacity: 1;
}

.pdf-download-icon[b-sv9p9rermf] {
    width: auto;
}

.pdf-preview-link[b-sv9p9rermf] {
    display: inline-flex;
    align-items: center;
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--font-size-xsmall);
}

.pdf-preview-link:hover[b-sv9p9rermf] {
    color: #2b2f38;
}

/* PANELS */
/* flex-wrap (not grid-template-columns) so the two panels stack into a single column once the
   modal is too narrow to fit both at their minimums, same pattern as AddLesson's row of sections.
   min-height on .panel (not just .panels) keeps the objectives editor from collapsing to near
   nothing once it's no longer stretched by its sibling's height in a shared grid row. */
.panels[b-sv9p9rermf] {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    min-height: 300px;
    gap: 0.5rem;
}

.panel[b-sv9p9rermf] {
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 300px;
}

.panels .panel:first-child[b-sv9p9rermf] {
    flex: 2 1 500px;
    min-width: 500px;
}

.panels .panel:last-child[b-sv9p9rermf] {
    flex: 1 1 350px;
    min-width: 350px;
}

.panel-header[b-sv9p9rermf] {
    background-color: #4b5161;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 0 0 0 !important;
}

.panel-title[b-sv9p9rermf] {
    font-size: var(--font-size-medium);
    display: flex;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
}

.panel-icon[b-sv9p9rermf] {
    height: var(--font-size-xxlarge);
    width: auto;
    cursor: pointer;
}

.panel-content[b-sv9p9rermf] {
    border: 1px solid #4b5161;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar.ql-toolbar.ql-snow {
    flex: 0 0 auto;
    border: none;
    display: flex;
    justify-content: center;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar .ql-formats {
    margin-right: 0;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar .text-style-group {
    display: inline-flex;
    float: left;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar .text-style-group button,
.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar button.ql-list {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar .text-style-group button {
    float: none;
    height: 100%;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar button.ql-list {
    float: left;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar .text-style-group button svg,
.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar button.ql-list svg {
    height: 18px;
    float: none;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar .ql-picker.ql-font,
.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar .ql-picker.ql-size,
.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar .ql-picker.ql-color,
.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar button.ql-list {
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #ccc;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar .ql-picker-label {
    display: flex;
    align-items: center;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-toolbar .ql-formats > * + * {
    margin-left: -1px;
}

.panel-content[b-sv9p9rermf]  .objectives-editor-content.ql-container.ql-snow {
    flex: 1 1 auto;
    min-height: 0;
    border: none;
}

.selected-objectives[b-sv9p9rermf] {
    overflow-y: auto;
    min-height: 300px;
    max-height: 60vh;
    height: fit-content;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.selected-objective[b-sv9p9rermf] {

}

.selected-objective-header[b-sv9p9rermf] {
    padding: 0.25rem 0;
    font-size: var(--font-size-small);
}

.selected-title[b-sv9p9rermf] {
    text-decoration: underline;
    padding: 0.25rem 0.75rem 0;
}

.selected-progression-item[b-sv9p9rermf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.5rem 0 1rem;
}

.selected-progression-item .prog-text[b-sv9p9rermf] {
    font-size: var(--font-size-xsmall);
    color: #444;
    line-height: 1.4;
    padding-left: 1rem;
    text-indent: -1rem;
}

.selected-progression-item .prog-text[b-sv9p9rermf]::before {
    content: "•";
    display: inline-block;
    width: 1rem;
    padding-left: 1rem;
}

.selected-progression-item .prog-text[b-sv9p9rermf]  ul {
    list-style: none;
    padding-left: 1rem;
    margin: 0;
}

.selected-progression-item .prog-text[b-sv9p9rermf]  li::before {
    content: "- ";
    font-weight: 600;
}

.remove-btn[b-sv9p9rermf] {
    cursor: pointer;
    color: #999;
    font-weight: 700;
    font-size: var(--font-size-xsmall);
    line-height: 1;
    flex-shrink: 0;
}

.remove-btn:hover[b-sv9p9rermf] {
    color: #d9534f;
}

/* /Components/TeachingManagement/YearPlan/Popups/EditTestResults.razor.rz.scp.css */
.pe-modal[b-ufneevnjqt] {
    height: fit-content;
    width: fit-content;
    max-width: 1050px;
    margin: 2rem auto;
    background-color: white;
    border-radius: 30px;
    font-size: var(--font-size-medium);
}

.pe-modal *:focus[b-ufneevnjqt] {
    outline: none;
}

.pe-border-margin[b-ufneevnjqt] {
    padding: 0.5rem;
}


.pe-modal-content[b-ufneevnjqt] {
    margin: 1rem;    
}

.threshold.hidden[b-ufneevnjqt] {
    display: flex;
    visibility: hidden; 
}

.inactive[b-ufneevnjqt] {
    opacity: 0.5;
    pointer-events: none;
}

.active[b-ufneevnjqt] {
    opacity: 1;
    z-index: 1;
}

.mode-selection[b-ufneevnjqt],
.threshold[b-ufneevnjqt] {
    display: flex;
    gap: 1rem;
}

.mode-selection .right-align[b-ufneevnjqt],
.threshold .right-align[b-ufneevnjqt] {
    text-align: right;
    width: 80px;
}

.mode-options[b-ufneevnjqt] {
    display: flex;
}

.mode-option[b-ufneevnjqt] {
    border: 2px solid rgba(0,0,0,.2);
    border-radius: 5px;
    padding: 0 1rem;
}

.mode-option.selected[b-ufneevnjqt] {
    border-color: #49d182;
}

.results-list[b-ufneevnjqt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.student-row[b-ufneevnjqt] {
    display: flex;
    gap: 1rem;
    text-align: center;
    align-items: center;
}

.student-name[b-ufneevnjqt] {
    width: 150px;
}

.left-align-text[b-ufneevnjqt] {
    text-align: left;
}

.result-input[b-ufneevnjqt] {
    width: 85px;
}

.check-header[b-ufneevnjqt] {
    width: 70px;
}

[b-ufneevnjqt] .date-input {
    border: none;
    border-radius: 15px;
}

input[type=text][b-ufneevnjqt] {
    border: 1px solid #4b5161;
    border-radius: 15px;
    padding: 0 10px;
}

.button-action[b-ufneevnjqt] {
    display: flex;
    justify-content: space-between;
}

.button-action .btn[b-ufneevnjqt] {
    width: fit-content;
}

/* Remove spinners from text input */
input[type=text][b-ufneevnjqt]::-webkit-inner-spin-button,
input[type=text][b-ufneevnjqt]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=text][b-ufneevnjqt] {
    -moz-appearance: textfield; /* Firefox */
}

/* "Évalué" reuses the shared Checkbox atom (same design as the RadioCheckboxGroup checkbox
   elsewhere) - only the 70px column width/centering that lines it up under the "Évalué" header
   stays scoped here, reached via ::deep since the atom renders its own <label>. */
.student-row[b-ufneevnjqt]  .evaluated-checkbox {
    width: 70px;
    justify-content: center;
}

.control-container[b-ufneevnjqt] {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 1.5rem 0.25rem 1.5rem;
}
/* /Components/TeachingManagement/YearPlan/RatingScale1To6.razor.rz.scp.css */
.rating-scale[b-4b59gaybcr] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1px;
    background-color: #f5f5f5;
    padding: 1px;
    border-radius: 4px;
}

.rating-scale-item[b-4b59gaybcr] {
    width: 50px;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    margin-top: 0.2rem;
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.5;
}

.item-top[b-4b59gaybcr] {
    background-color: #4b5161;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
    padding-top: 0.5rem;
    height: 35px;
    text-align: center;
}

.item-bot[b-4b59gaybcr] {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 0.25rem;
    height: 35px;
    border: 1px solid #d6d6d6;
    text-align: center;
}

.item-bot-list[b-4b59gaybcr] {
    padding-top: 0.25rem;
    height: 35px;
    border: 1px solid #d6d6d6;
    text-align: center;
}

.lb-even[b-4b59gaybcr] {
    background-color: #e9faea;
}


/* Animation for collapse/expand */
.rating-scale-item > div:not(.item-top)[b-4b59gaybcr] {
    transition: all 0.3s ease-in-out;
}

/* Collapsed state */
.rating-scale.collapsed .rating-scale-item > div:not(.item-top):not(.item-bot)[b-4b59gaybcr] {
    height: 0;
    padding: 0;
    overflow: hidden;
}
/* /Components/TeachingManagement/YearPlan/RatingScaleNaToLa.razor.rz.scp.css */
.rating-scale[b-3qbcg4zaq5] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1px;
    background-color: #f5f5f5;
    padding: 1px;
    border-radius: 4px;
}

.rating-scale-item[b-3qbcg4zaq5] {
    width: 50px;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    margin-top: 0.2rem;
    font-size: var(--font-size-xsmall);
    font-weight: 400;
    line-height: 1.5;
}

.item-top[b-3qbcg4zaq5] {
    background-color: #4b5161;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
    padding-top: 0.5rem;
    height: 35px;
    text-align: center;
}

.item-bot[b-3qbcg4zaq5] {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 0.25rem;
    height: 35px;
    border: 1px solid #d6d6d6;
    text-align: center;
}

.item-bot-list[b-3qbcg4zaq5] {
    padding-top: 0.25rem;
    height: 35px;
    border: 1px solid #d6d6d6;
    text-align: center;
}

.lb-even[b-3qbcg4zaq5] {
    background-color: #e9faea;
}


/* Animation for collapse/expand */
.rating-scale-item > div:not(.item-top)[b-3qbcg4zaq5] {
    transition: all 0.3s ease-in-out;
}

/* Collapsed state */
.rating-scale.collapsed .rating-scale-item > div:not(.item-top):not(.item-bot)[b-3qbcg4zaq5] {
    height: 0;
    padding: 0;
    overflow: hidden;
}
/* /Components/TeachingManagement/YearPlan/ThemeComponent.razor.rz.scp.css */
.theme[b-0zwel49pyl] {
    color: white;
    font-size: var(--font-size-small);
    background-color: #4f96ed;
    height: 22px;
    padding-left: 3px;
    position: relative;
}

    .theme img[b-0zwel49pyl] {
        transition: all 0.3s ease;
        vertical-align: text-bottom;
    }

    .theme:hover[b-0zwel49pyl] {
        cursor: pointer;
    }

    .theme:hover img[b-0zwel49pyl] {
        filter: brightness(2.5) drop-shadow(0 0 15px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.7));
        transform: scale(1.3);
    }

.menu-item-content[b-0zwel49pyl] {
    display: flex;
    align-items: center;
}

.menu-icon[b-0zwel49pyl] {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.paste-spinner[b-0zwel49pyl] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: theme-paste-spin-b-0zwel49pyl 1s linear infinite;
    z-index: 2;
}

.paste-overlay[b-0zwel49pyl]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

@keyframes theme-paste-spin-b-0zwel49pyl {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* /Components/TeachingManagement/YearPlan/ThemeTimelineStrip.razor.rz.scp.css */
/* This is now the component's outermost element, so it carries the "fill remaining page height"
   behavior .plan-grid used to have as the direct flex child of .pe-border-margin on the standalone
   /SequencePlan view - YearPlanGrid.razor.css overrides it back to content-height when embedded,
   same as it used to override .plan-grid directly. */
.timeline-scroll[b-nxuqwrgwez] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: visible;
}

/* Below this many pixels per week the week numbers/theme bars stop being legible, so the row
   stops shrinking there and the scroll container above takes over instead of squeezing further. */
.timeline-inner[b-nxuqwrgwez] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: calc(100px + var(--week-count, 52) * 26px);
}

.plan-grid[b-nxuqwrgwez] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Blazor.ContextMenu's own CSS gives the popup position: fixed but no z-index, so it just paints
   in normal DOM order - each .theme-row below is its own stacking context (position: relative +
   z-index), so a later row's bars/border can end up covering an earlier row's open menu. ::deep
   reaches into the library's rendered markup, which isn't scoped to this component. */
[b-nxuqwrgwez] .blazor-context-menu--default {
    z-index: 1000;
}

/* Rows used to pair each .axis-label with its .theme-row-timeline as flex siblings in one shared
   .timeline-row, with the label made position: sticky so it stayed put during horizontal scroll.
   That meant each row's own sticky label could only ever mask its own row's height - the small
   gaps *between* rows (the margins below) and the label's own rounded corners were never covered
   by anything, so lower-stacked content (holiday shading, paste targets) showed through there
   once scrolled. Splitting the 100px axis column out into its own always-present, single sticky
   track (below) fixes this categorically instead of patching each row's edges: the whole column
   is one continuous opaque block for the full height of every row plus every gap between them,
   so there's never a seam for anything behind it to show through. */
.plan-body[b-nxuqwrgwez] {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
}

.axis-track[b-nxuqwrgwez] {
    display: flex;
    flex-direction: column;
    flex: 0 0 100px;
    width: 100px;
    box-sizing: border-box;
    position: sticky;
    left: 0;
    /* Above .current-week-overlay (z-index: 2, a later sibling here in .plan-body) - that overlay
       is deliberately drawn above every theme row so the marker line stays visible over theme
       bars too, but it must stay behind this column once scrolled under it, same as everything
       else back there. */
    z-index: 3;
    background-color: #fff;
}

.content-track[b-nxuqwrgwez] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.timeline-row[b-nxuqwrgwez] {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.timeline-row.weeks-row[b-nxuqwrgwez] {
    margin: 0;
}

.timeline-row.theme-row[b-nxuqwrgwez] {
    border: 1px solid #a3a3a3;
}

.timeline-row.theme-row:first-child[b-nxuqwrgwez] {
    margin-top: 1rem;
}

.timeline-content[b-nxuqwrgwez] {
    flex: 1 1 auto;
    min-width: 0;
}

.axis-gutter[b-nxuqwrgwez] {
    flex: 0 0 100px;
    width: 100px;
    box-sizing: border-box;
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
}

/* Mirrors .timeline-row/.timeline-row.theme-row:first-child's margins exactly so each label
   still lines up with its row over in .content-track - including a same-width transparent
   border, so this box gets the same 1px inset .timeline-row.theme-row's own (visible) border
   gives .theme-row-timeline. Without it the two columns share the same min-height but the
   label's content starts flush at the top while the bars start 1px lower, inset by that border. */
.axis-label[b-nxuqwrgwez] {
    flex: 0 0 auto;
    box-sizing: border-box;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 4px 10px;
    border: 1px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    color: white;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.axis-label:first-child[b-nxuqwrgwez] {
    margin-top: 1rem;
}

.axis-label-subject[b-nxuqwrgwez] {
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-medium);
    line-height: 1;
}

.axis-label-class[b-nxuqwrgwez] {
    font-size: var(--font-size-base);
    color: white;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holiday-overlay[b-nxuqwrgwez] {
    position: absolute;
    top: 0;
    left: 100px;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.holiday-block[b-nxuqwrgwez] {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #ececec;
    border: 1px solid #a3a3a3;
    border-radius: 3px;
}

/* Starts a few pixels below plan-body's own top edge - i.e. right where the weeks row ends -
   so the T sits with a small gap under the button instead of touching its border. */
.current-week-overlay[b-nxuqwrgwez] {
    position: absolute;
    top: 4px;
    left: 100px;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

/* Full button-width cap sitting on top of the thin vertical marker forms a T, drawn entirely
   within this overlay's own coordinate system. */
.current-week-cap[b-nxuqwrgwez] {
    position: absolute;
    top: 0;
    height: 2px;
    background-color: #49d182;
}

.current-week-marker[b-nxuqwrgwez] {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #49d182;
}

.theme-row[b-nxuqwrgwez] {
    position: relative;
    z-index: 1;
    min-height: 20px;
}

.theme-row-timeline[b-nxuqwrgwez] {
    position: relative;
}

.theme-bar[b-nxuqwrgwez] {
    position: absolute;
    box-sizing: border-box;
    color: white;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
    border: 1px solid #a3a3a3;
    cursor: pointer;
}

.theme-bar:hover[b-nxuqwrgwez] {
    opacity: 0.85;
}

/* A row for a subject/class with no theme yet - only rendered while something is copied, as a
   paste target (see .theme-row-paste-target below, which every row gets while copying, not just
   empty ones). */
.timeline-row.theme-row.theme-row-empty[b-nxuqwrgwez] {
    border-style: dashed;
    opacity: 0.7;
}

/* Fills the row's whole timeline (theme-row-timeline is already position: relative) so right-click
   pastes anywhere in the row, not just on a narrow single-week box - rendered before .theme-bar in
   markup, so bars still stack on top and keep their own copy/paste menu on top of this. */
.theme-row-paste-target[b-nxuqwrgwez] {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.theme-row-paste-target:hover[b-nxuqwrgwez] {
    background-color: rgba(0, 0, 0, 0.03);
}

.theme-bar-label[b-nxuqwrgwez] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.menu-item-content[b-nxuqwrgwez] {
    display: flex;
    align-items: center;
}

.menu-icon[b-nxuqwrgwez] {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.paste-overlay[b-nxuqwrgwez] {
    position: relative;
}

.paste-overlay[b-nxuqwrgwez]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

.paste-spinner[b-nxuqwrgwez] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin-b-nxuqwrgwez 1s linear infinite;
    z-index: 2;
}

@keyframes spin-b-nxuqwrgwez {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.year-weeks-row[b-nxuqwrgwez] {
    position: relative;
    z-index: 1;
}

.year-months-row[b-nxuqwrgwez] {
    white-space: nowrap;
    margin-top: 6px;
    margin-bottom: 2px;
}

.year-month[b-nxuqwrgwez] {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    padding: 0 2px;
    overflow: hidden;
}

.year-month-label[b-nxuqwrgwez] {
    display: block;
    font-size: var(--font-size-base);
    color: #a3a3a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.year-month-line[b-nxuqwrgwez] {
    height: 2px;
    margin-top: 2px;
    background-color: #a3a3a3;
}

.year-week[b-nxuqwrgwez] {
    border: none;
    border-radius: 3px;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--font-size-medium);
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    cursor: pointer;
    width: calc((100% - (0.2rem * var(--week-count, 52))) / var(--week-count, 52));
    padding: 0;
    background-clip: content-box;
    text-underline-offset: 10px;
}

.year-week:hover[b-nxuqwrgwez] {
    opacity: 0.7;
}

/* The first/last button's own margin creates a small gap against whatever sits right at the
   row boundary (e.g. the axis-label). Reclaim that margin into the button's own width so it
   reaches the boundary flush, without shifting any of the other buttons. */
.year-week:first-child[b-nxuqwrgwez] {
    margin-left: 0;
    width: calc(((100% - (0.2rem * var(--week-count, 52))) / var(--week-count, 52)) + 0.1rem);
}

.year-week:last-child[b-nxuqwrgwez] {
    margin-right: 0;
    width: calc(((100% - (0.2rem * var(--week-count, 52))) / var(--week-count, 52)) + 0.1rem);
}

.yw-on[b-nxuqwrgwez] {
    background-color: #49d182;
}

.yw-select[b-nxuqwrgwez] {
    background-color: #49d182;
    border: solid 1px #4b5161;
}

.yw-off[b-nxuqwrgwez] {
    background-color: #4b5161;
}

.yw-free[b-nxuqwrgwez] {
    background-color: #a3a3a3;
}
/* /Components/TeachingManagement/YearPlan/YearLineComponent.razor.rz.scp.css */
/* /Components/TeachingManagement/YearPlan/YearPlan.razor.rz.scp.css */
/* /Components/TeachingManagement/YearPlan/YearPlanGrid.razor.rz.scp.css */
label[b-hk64z4bfob] {
    margin: 0;
}

.pe-no-margin[b-hk64z4bfob] {
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

.spacing[b-hk64z4bfob] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.white-border[b-hk64z4bfob] {
    padding: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 30px;
    border-color: white;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
    height: 95vh;
    display: flex;
    flex-direction: column;
}

.pe-border-margin[b-hk64z4bfob] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.pe-header-text[b-hk64z4bfob] {
    font-size: var(--font-size-xxxxlarge);
}

.pe-grey-border[b-hk64z4bfob] {
    border: 2px solid #4b5161;
    border-radius: 10px;
    padding: 0.5rem;
    font-size: var(--font-size-base);
}

/* flex-wrap + row-gap here (rather than only stacking under the mobile media query below) is
   what stops #import-button's buttons - up to three of them here (copy-cancel pill, add-theme,
   import), more than the single button ThemePlan's header ever has - from overflowing their own
   35% column at medium widths and spilling over #week-group's arrows/week-number: once any
   column's own content stops fitting its flex-basis, that column now wraps onto its own line
   instead of overflowing sideways. */
#plan-header[b-hk64z4bfob] {
    background-color: #4b5161;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 0 0 0 !important;
    text-align: center;
    min-height: 58px;
    height: fit-content;
    line-height: 1;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: wrap;
    row-gap: 1rem;
}

#plan-title[b-hk64z4bfob] {
    color: white;
    font-size: var(--font-size-large);
    text-align: left;
    flex: 1 1 280px;
    padding-left: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Without this, a too-narrow #plan-title doesn't move SchoolYear to its own line - flex items
   only wrap onto a new line as a whole (enabled above), so without nowrap the browser instead
   breaks inside HeaderTitle's own text first, since that's the item actually short on room. */
#plan-title span[b-hk64z4bfob] {
    white-space: nowrap;
}

#week-group[b-hk64z4bfob] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 260px;
}

#import-button[b-hk64z4bfob] {
    flex: 1 1 280px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-right: 15px;
}

.copied-theme-pill[b-hk64z4bfob] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
}

.copied-theme-pill:hover[b-hk64z4bfob] {
    background-color: rgba(255, 255, 255, 0.28);
}

#week[b-hk64z4bfob] {
    display: inline;
    font-size: var(--font-size-large);
}

.arrow[b-hk64z4bfob] {
    color: white;
    display: inline-flex;
    align-items: center;
    margin: 0 15px 0 15px;
    text-decoration: none;
}

.arrow:hover[b-hk64z4bfob] {
    opacity: 0.7;
    color: white;
    text-decoration: none;
}

@media (max-width: 768px) {
    #plan-header[b-hk64z4bfob] {
        justify-content: center;
        gap: 10px;
    }

    /* flex-basis (set above) wins over width on a flex item once it's anything but auto, so
       forcing full width below this point takes overriding the basis, not just width itself. */
    #plan-title[b-hk64z4bfob],
    #week-group[b-hk64z4bfob],
    #import-button[b-hk64z4bfob] {
        flex-basis: 100%;
    }

    #plan-title[b-hk64z4bfob] {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        justify-content: center;
        text-align: center;
        padding-left: 0;
    }

    #import-button[b-hk64z4bfob] {
        justify-content: center;
        padding-right: 0;
    }
}

.yw-current[b-hk64z4bfob] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #49d182;
}

/* ThemeTimelineStrip's own stylesheet makes .timeline-scroll (its outermost element) flex-grow
   to fill the page (its intent on the standalone /SequencePlan view). Embedded here it must only
   take its content height so #planning-block (the actual lesson grid) keeps the rest of the
   available space. */
[b-hk64z4bfob] .timeline-scroll {
    flex: 0 0 auto;
    padding-bottom: 1rem;
}

#planning-block[b-hk64z4bfob] {
    margin-top: 10px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.weeks-scroll-container[b-hk64z4bfob] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
}

#week-columns-group[b-hk64z4bfob],
.course-line[b-hk64z4bfob] {
    display: flex;
    width: max-content;
    min-width: 100%;
    text-underline-offset: 5px;
}

.course-id-spacer[b-hk64z4bfob] {
    flex: 0 0 100px;
    width: 100px;
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #fff;
}

.course-id-spacer-eye[b-hk64z4bfob] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 4px;
    color: var(--text-color-default);
    opacity: 0.6;
    cursor: pointer;
}

.course-id-spacer-eye:hover[b-hk64z4bfob] {
    opacity: 1;
}

.week-columns[b-hk64z4bfob] {
    display: inline-block;
    text-align: center;
    font-size: var(--font-size-large);
    flex: 0 0 auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: solid 2px #4b5161;
    border-bottom: none;
    border-right: none;
    padding: 2px 0 2px 0;
    scroll-margin-left: 100px;
}

.week-columns:last-child[b-hk64z4bfob] {
    border-right: solid 2px #4b5161;
}

.week-columns-clickable[b-hk64z4bfob] {
    cursor: pointer;
}

.week-columns-clickable:hover[b-hk64z4bfob] {
    background-color: rgba(75, 81, 97, 0.15);
}

.course-id[b-hk64z4bfob] {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    display: inline-block;
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
}

.course-id-color[b-hk64z4bfob] {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.course-id-eye[b-hk64z4bfob] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background: none;
    border: none;
    padding: 2px;
    color: white;
    opacity: 0.75;
    cursor: pointer;
}

.course-id-eye:hover[b-hk64z4bfob] {
    opacity: 1;
}

.course-name[b-hk64z4bfob] {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: inline;
    color: white;
    text-align: center;
    height: 100%;
    font-size: var(--font-size-large);
    line-height: 20px;
    padding-right: 8px;
}

.classname[b-hk64z4bfob] {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: inline;
    color: white;
    text-align: center;
    height: 100%;
    font-size: var(--font-size-medium);
}

.week-block[b-hk64z4bfob] {
    border-left: solid 2px #4b5161;
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
}

/* Full holiday weeks (every weekday is a holiday) are greyed out in both the column
   header and the content area, mirroring the existing .yw-free treatment on week buttons. */
.week-columns.week-holiday[b-hk64z4bfob],
.week-block.week-holiday[b-hk64z4bfob] {
    background-color: #d9d9d9;
}

.last-week-block[b-hk64z4bfob] {
    border-right: solid 2px #4b5161;
}

.theme[b-hk64z4bfob] {
    color: white;
    font-size: var(--font-size-small);
    background-color: #4f96ed;
    height: 22px;
    padding-left: 3px;
}

.theme a:link p[b-hk64z4bfob] {
    color: white;
    text-decoration: none;
}

.theme a:visited p[b-hk64z4bfob] {
    color: white;
    text-decoration: none;
}

.theme a:hover p[b-hk64z4bfob] {
    color: white;
    text-decoration: none;
}

.theme a:active p[b-hk64z4bfob] {
    color: white;
    text-decoration: none;
}

.lesson-content[b-hk64z4bfob] {
    height: 108px;
    border: 1px solid;
}

.lesson-nocontent[b-hk64z4bfob] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.prep[b-hk64z4bfob] {
    border: solid 1px #4b5161;
    background-color: #e53f3f;
    border-radius: 5px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
}

.track[b-hk64z4bfob] {
    border: solid 1px #4b5161;
    background-color: #49d182;
    border-radius: 5px;
    display: inline-block;
    width: 10px;
    height: 10px;
}

.tasks[b-hk64z4bfob] {
    font-size: var(--font-size-xsmall);
    padding-left: 3px;
}

.last-week[b-hk64z4bfob] {
    border-right: solid 2px #4b5161;
}
/* /Components/TeachingManagement/_Atoms/Button/CustomButton.razor.rz.scp.css */
.button[b-7rb0l9ye4k] {
    min-width: 180px;
    border-radius: 10px;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: var(--font-size-medium);
    user-select: none;
}

.button:hover[b-7rb0l9ye4k] {
    opacity: 0.9;
}

.button:active[b-7rb0l9ye4k] {
    transform: scale(0.98);
}

.button-red[b-7rb0l9ye4k] {
    background-color: #de5f5f;
}

.button-red:hover[b-7rb0l9ye4k] {
    background-color: #C54545;
}

.button-green[b-7rb0l9ye4k] {
    background-color: #49d182;
}

.button-green:hover[b-7rb0l9ye4k] {
    background-color: #5bd892;
}

.button-grey[b-7rb0l9ye4k] {
    background-color: #d2d2d2;
}

.button-grey:hover[b-7rb0l9ye4k] {
    background-color: #C3C3C3;
}

.button-dark[b-7rb0l9ye4k] {
    background-color: #4b5161;
}

.button-dark:hover[b-7rb0l9ye4k] {
    background-color: #3a3f4f;
}

/* Matches the ".white-border" panel look (see DayPlan.razor.css) instead of a solid fill -
   for buttons meant to sit inside a white-border panel without competing with it visually. */
.button-ghost[b-7rb0l9ye4k] {
    background-color: transparent;
    color: var(--text-color-default);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
}

.button-ghost:hover[b-7rb0l9ye4k] {
    background-color: rgba(75, 81, 97, 0.06);
}

.button:disabled[b-7rb0l9ye4k] {
    background-color: #d2d2d2;
    cursor: not-allowed;
    opacity: 1;
}
/* /Components/TeachingManagement/_Atoms/Checkbox/Checkbox.razor.rz.scp.css */
.check-container[b-8b67wwnzat] {
    padding-left: 0.5rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
}

.check-container input:disabled[b-8b67wwnzat] {
    cursor: default;
}

/* Visually hidden but still focusable/operable input */
.check-container input[b-8b67wwnzat] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Custom checkbox */
.checkmark[b-8b67wwnzat] {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    height: 1.6rem;
    width: 1.6rem;
    background-color: #ffffff;
    border: 0.1rem solid #D3D3D3;
}

.label-text[b-8b67wwnzat] {
    padding-left: 1rem;
    min-width: 0;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark[b-8b67wwnzat] {
    background-color: #eee;
}

/* Visible keyboard focus indicator */
.check-container input:focus-visible ~ .checkmark[b-8b67wwnzat] {
    outline: 0.2rem solid #4b5161;
    outline-offset: 0.2rem;
}

/* Checkmark tick */
.checkmark[b-8b67wwnzat]:after {
    content: "";
    position: absolute;
    display: none;
    left: 0.56rem;
    top: -0.4rem;
    width: 0.8rem;
    height: 1.6rem;
    border: solid #49d182;
    border-width: 0 0.24rem 0.24rem 0;
    transform: rotate(45deg);
}

.check-container input:checked ~ .checkmark[b-8b67wwnzat]:after {
    display: block;
}
/* /Components/TeachingManagement/_Atoms/CloseButton/CloseButton.razor.rz.scp.css */
.close-button-row[b-ppt7ygcdme] {
    display: grid;
    grid-template-columns: minmax(4rem, 1fr) auto minmax(4rem, 1fr);
    align-items: center;
    width: 100%;
}

.close-button-leading[b-ppt7ygcdme] {
    justify-self: start;
    min-width: 0;
}

.close-button-title[b-ppt7ygcdme] {
    min-width: 0;
}

.close-button[b-ppt7ygcdme] {
    justify-self: end;
    margin-left: 0.5rem;
    margin-right: 1rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.close-button:disabled[b-ppt7ygcdme] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.close-button img[b-ppt7ygcdme] {
    height: 4rem;
    width: auto;
    display: block;
}
/* /Components/TeachingManagement/_Atoms/PageHeader/PageHeader.razor.rz.scp.css */
.pe-page-header[b-egf725k02q] {
    /* HeaderColorClass sets --bg-color (see planific.css's [class*="-global-background"] rule);
       reading it through a var() here lets that class win despite this scoped rule's higher
       specificity, since a lower-specificity rule can still set the custom property. */
    background-color: var(--bg-color, #4b5161);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 !important;
}

.pe-page-header[b-egf725k02q]  .pe-header-text {
    font-size: var(--pe-header-font-size, var(--font-size-xxxxlarge));
}

.pe-page-header[b-egf725k02q]  .pe-header-secondary-text {
    font-size: var(--font-size-base);
}

.pe-page-header[b-egf725k02q]  .pe-header-leading-text {
    font-size: var(--font-size-large);
    text-align: left;
    padding-left: 15px;
}
/* /Components/TeachingManagement/_Atoms/RadioButton/RadioCheckboxGroup.razor.rz.scp.css */
.checkbox-radio-header[b-3ii840sxh8] {
    text-align: center;
    font-size: var(--font-size-medium);
    margin: 0 0 0.5rem 0;
}

.checkbox-radio-list[b-3ii840sxh8] {
    display: flex;
    flex-direction: column;
}

.checkbox-radio-list.horizontal[b-3ii840sxh8] {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
}

.check-container[b-3ii840sxh8] {
    padding-left: 0.5rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
}

.checkbox-radio-list.horizontal .check-container[b-3ii840sxh8] {
    margin-bottom: 0;
}

/* Visually hidden but still focusable/operable input */
.check-container input[b-3ii840sxh8] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Custom checkbox */
.checkmark[b-3ii840sxh8] {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    height: 1.6rem;
    width: 1.6rem;
    background-color: #ffffff;
    border: 0.1rem solid #D3D3D3;
}

.label-text[b-3ii840sxh8] {
    padding-left: 1rem;
    min-width: 0;
}

/* Label above the checkbox instead of beside it - the checkmark is the only element left in the
   flex flow (the input is taken out of flow via position:absolute above), so reversing the
   column order puts the label-text first (top) and checkmark second (bottom). */
.check-container.stacked[b-3ii840sxh8] {
    flex-direction: column-reverse;
    text-align: center;
}

.check-container.stacked .label-text[b-3ii840sxh8] {
    padding-left: 0;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark[b-3ii840sxh8] {
    background-color: #eee;
}

/* Visible keyboard focus indicator */
.check-container input:focus-visible ~ .checkmark[b-3ii840sxh8] {
    outline: 0.2rem solid #4b5161;
    outline-offset: 0.2rem;
}

/* Checkmark tick */
.checkmark[b-3ii840sxh8]:after {
    content: "";
    position: absolute;
    display: none;
    left: 0.56rem;
    top: -0.4rem;
    width: 0.8rem;
    height: 1.6rem;
    border: solid #49d182;
    border-width: 0 0.24rem 0.24rem 0;
    transform: rotate(45deg);
}

.check-container input:checked ~ .checkmark[b-3ii840sxh8]:after {
    display: block;
}
/* /Components/TeachingManagement/_Atoms/RadioButton/RadioColorPicker.razor.rz.scp.css */
.color-picker-wrapper[b-ipp6omh9xg] {
    margin: 1rem 0;
}

.color-picker-header[b-ipp6omh9xg] {
    text-align: center;
    font-size: var(--font-size-medium);
    margin: 0 0 0.5rem 0;
}

.containerColor[b-ipp6omh9xg] {
    display: inline-block;
    position: relative;
    margin: 0 0.5rem;
    cursor: pointer;
    user-select: none;
}

.containerColor input[b-ipp6omh9xg] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmarkColor[b-ipp6omh9xg] {
    position: relative;
    display: block;
    height: 2rem;
    width: 2rem;
    border-radius: 0.8rem;
    border: 2px solid transparent;
    padding: 1rem;
}

.containerColor:hover input ~ .checkmarkColor[b-ipp6omh9xg] {
    border-color: #4b5161;
}

.containerColor input:checked ~ .checkmarkColor[b-ipp6omh9xg] {
    border-color: #4b5161;
}

.checkmarkColor[b-ipp6omh9xg]:after {
    content: "";
    position: absolute;
    display: none;
}

.containerColor input:checked ~ .checkmarkColor[b-ipp6omh9xg]:after {
    display: block;
}
/* /Components/TeachingManagement/_Atoms/RadioButton/RadioWeekSelection.razor.rz.scp.css */
.radio-group-header[b-83oulbfyry] {
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: var(--font-size-medium);
}

.radio-container[b-83oulbfyry] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-medium);
    width: 6rem;
    height: 6rem;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.radio-container input[b-83oulbfyry] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio-container:hover[b-83oulbfyry] {
    background-color: #f8f9fa;
}

.container-selected[b-83oulbfyry] {
    box-shadow: 0 0 5px 0 rgba(73, 209, 130, 1);
}
/* /Components/TeachingManagement/_Atoms/SectionHeader/SectionHeader.razor.rz.scp.css */
.pe-header-2[b-chib3lr74j] {
    font-size: var(--font-size-xxlarge);
    min-height: 5rem;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem;
    align-items: center;
    padding: 0 7px;
    box-sizing: border-box;
}

.pe-header-2 h2[b-chib3lr74j] {
    grid-column: 2;
    margin: 0;
    font-size: var(--font-size-xxxxlarge);
    font-weight: inherit;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pe-icon-button[b-chib3lr74j] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.pe-add-trigger[b-chib3lr74j] {
    grid-column: 3;
    justify-self: end;
}

.pe-add[b-chib3lr74j] {
    height: 3.5rem;
    width: 3.5rem;
    display: block;
}

.pe-add:hover[b-chib3lr74j] {
    opacity: 0.7;
    cursor: pointer;
}
/* /Components/TeachingManagement/_Atoms/Select/CustomSelect.razor.rz.scp.css */
.select-wrapper[b-kqezg2m29b] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    font-size: var(--font-size-medium);
    height: 4rem;
}

.select-label[b-kqezg2m29b] {
    display: flex;
    align-items: center;
    width: 12rem;
    height: 4rem;
}

.select-container[b-kqezg2m29b] {
    width: 24rem;
    height: 3rem;
    position: relative;
}

.select-container.center .select-input[b-kqezg2m29b] {
    text-align: center;
    padding-right: 10px; /* Correction for svg arrow width (fixed-size SVG, not font-relative) */
}

.select-input[b-kqezg2m29b] {
    width: 100%;
    height: 3rem;
    padding-left: 1rem;
    border-radius: 1rem;
    background-color: white;
    font-size: var(--font-size-medium);
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    user-select: none;
    outline: none;
    box-sizing: border-box;
    line-height: 3rem;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}

.select-input.open[b-kqezg2m29b] {
    border-radius: 1.2rem;
}

.select-input:focus[b-kqezg2m29b] {
    outline: none;
}

.select-input:hover[b-kqezg2m29b] {
    cursor: pointer;
}

.select-input.disabled[b-kqezg2m29b] {
    background-color: #e9ecef;
    cursor: not-allowed;
    pointer-events: none;
}

.selected-text[b-kqezg2m29b] {
    flex: 1;
    padding-right: 2.5rem;
    display: flex;
    align-items: center;
}

.selected-text-content[b-kqezg2m29b] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.select-arrow[b-kqezg2m29b] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.select-arrow.open[b-kqezg2m29b] {
    transform: translateY(-50%) rotate(180deg);
}

/* Dropdown list styling */
.select-container .dropdown-list[b-kqezg2m29b] {
    position: absolute;
}

.dropdown-list[b-kqezg2m29b] {
    position: fixed;
    top: auto;
    left: auto;
    transform: translateY(0.4rem);
    width: max-content;
    min-width: 100%;
    z-index: 9999;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 0.8rem;
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.12);
    max-height: 20rem;
    overflow: hidden auto;
    font-size: var(--font-size-base);
}

.dropdown-item[b-kqezg2m29b] {
    padding: 0.8rem 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    width: 100%;
    white-space: nowrap;
}

.dropdown-item:hover[b-kqezg2m29b] {
    background-color: #e3e3e3;
}

.dropdown-item.selected[b-kqezg2m29b] {
    background-color: #4b5161;
    color: white;
}

.dropdown-item:first-child[b-kqezg2m29b] {
    border-radius: 0.8rem 0.8rem 0 0;
}

.dropdown-item:last-child[b-kqezg2m29b] {
    border-radius: 0 0 0.8rem 0.8rem;
    border-bottom: none;
}

.select-wrapper.label-width-200[b-kqezg2m29b] {
    font-size: var(--font-size-base);
}

.select-wrapper.label-width-200 .select-label[b-kqezg2m29b] {
    width: 20rem;
}

.select-container.input-width-150[b-kqezg2m29b] {
    width: 15rem;
}

.select-container.input-width-130[b-kqezg2m29b] {
    width: 13rem;
}

.select-container.input-width-200[b-kqezg2m29b] {
    width: 20rem;
}

.select-wrapper.medium-width-250[b-kqezg2m29b] {
    width: 25rem;
    padding: 0;
    justify-content: left;
}

/* Theme classes */
.small-width-70[b-kqezg2m29b] {
    width: 7rem;
}

.margin-0[b-kqezg2m29b] {
    margin: 0;
}

/* UserTask specific */
.select-wrapper.select-label-right .select-label[b-kqezg2m29b] {
    justify-content: flex-end;
    width: 17rem;
}

.select-container.large-width-320[b-kqezg2m29b] {
    width: 32rem;
}

.select-wrapper.full-width[b-kqezg2m29b] {
    margin: 0;
}

.select-wrapper.full-width .select-label[b-kqezg2m29b] {
    width: 10rem;
    flex-shrink: 0;
    text-wrap: nowrap;
}

.select-container.full-width[b-kqezg2m29b] {
    flex: 1;
}

.select-wrapper.full-width[b-kqezg2m29b]::after {
    content: "";
    width: 10rem;
    flex-shrink: 0;
}

.select-wrapper.full-width.no-trailing-spacer[b-kqezg2m29b]::after {
    content: none;
}

/* Test specific */
.select-wrapper.no-width .select-label[b-kqezg2m29b] {
    width: unset;
}

/* Inline narrow: label beside select, used in narrow rows (e.g. AddTaskStudent modalité) */
.select-wrapper.inline-narrow[b-kqezg2m29b] {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--font-size-medium);
    height: auto;
    width: auto;
}

.select-wrapper.inline-narrow .select-label[b-kqezg2m29b] {
    width: auto;
    height: auto;
    white-space: nowrap;
}

.select-container.inline-narrow[b-kqezg2m29b] {
    width: 15rem;
}

/* Color square styles */
.color-square[b-kqezg2m29b] {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.4rem;
    margin-right: 0.8rem;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}

.dropdown-item-text[b-kqezg2m29b] {
    flex: 1;
}
/* /Components/TeachingManagement/_Atoms/SwitchButton.razor.rz.scp.css */
/* Toggle Switch Container */
.toggle-switch-container[b-h0yvsbl6m1] {
    display: inline-flex;
    align-items: center;
    margin: 0.3rem 0;
}

.toggle-label[b-h0yvsbl6m1] {
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.toggle-end[b-h0yvsbl6m1] {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
    margin-left: 0.5rem;
}

.pe-switch-spacer[b-h0yvsbl6m1] {
    visibility: hidden;
}

/* Toggle Switch Styles - sized ~20% smaller to match the project's font-size reduction */
.switch[b-h0yvsbl6m1] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 3.325rem;
    height: 1.4rem;
}

.switch input[b-h0yvsbl6m1] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-h0yvsbl6m1] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
}

/* Only apply transitions after initialization */
.switch.initialized .slider[b-h0yvsbl6m1] {
    -webkit-transition: .4s;
    transition: .4s;
}

.slider[b-h0yvsbl6m1]:before {
    position: absolute;
    content: "";
    height: 1.85rem;
    width: 1.85rem;
    left: 0;
    bottom: -0.22rem;
    background-color: white;
}

/* Only apply transitions after initialization */
.switch.initialized .slider[b-h0yvsbl6m1]:before {
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider[b-h0yvsbl6m1] {
    background-color: #49d182;
}

input:focus + .slider[b-h0yvsbl6m1] {
    box-shadow: 0 0 1px #49d182;
}

input:checked + .slider[b-h0yvsbl6m1]:before {
    -webkit-transform: translateX(1.5rem);
    -ms-transform: translateX(1.5rem);
    transform: translateX(1.5rem);
}

input + .slider.round[b-h0yvsbl6m1]:before {
    border: 1px solid #ccc;
}

input:checked + .slider.round[b-h0yvsbl6m1]:before {
    border: 1px solid #49d182;
}

/* Rounded sliders */
.slider.round[b-h0yvsbl6m1] {
    border-radius: 34px;
}

.slider.round[b-h0yvsbl6m1]:before {
    border-radius: 50%;
}
/* /Components/TeachingManagement/_Atoms/Tooltip/Tooltip.razor.rz.scp.css */
.hide-element[b-mzeackhnkn] {
    visibility: hidden;
}

.info-icon[b-mzeackhnkn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #acacac;
    font-size: var(--font-size-large);
    cursor: help;
    position: relative;
    border: 1px solid #acacac;
}

.info-icon .tooltip-text[b-mzeackhnkn] {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: var(--font-size-small);
    white-space: wrap;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

.tooltip-title[b-mzeackhnkn] {
    font-weight: bold;
    font-size: var(--font-size-base);
    margin-bottom: 0.5rem;
}

.tooltip-content[b-mzeackhnkn] {
    text-align: justify;
}

.info-icon:hover .tooltip-text[b-mzeackhnkn] {
    visibility: visible;
    opacity: 1;
}

.info-icon:focus .tooltip-text[b-mzeackhnkn] {
    visibility: visible;
    opacity: 1;
}

/* Position Variants */
.tooltip-text.right[b-mzeackhnkn] {
    left: 120%;
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-text.left[b-mzeackhnkn] {
    right: 120%;
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-text.top[b-mzeackhnkn] {
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-text.bottom[b-mzeackhnkn] {
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
}

/* Arrows for different positions */
.tooltip-text.right[b-mzeackhnkn]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
}

.tooltip-text.left[b-mzeackhnkn]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
}

.tooltip-text.top[b-mzeackhnkn]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip-text.bottom[b-mzeackhnkn]::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}
/* /Components/TeachingManagement/_Moleculs/ActionButtons.razor.rz.scp.css */
.control-container[b-o0yjtf7acl] {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 1.5rem 0.25rem 1.5rem;
}

.save-group[b-o0yjtf7acl] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 1rem;
}
/* /Components/TeachingManagement/_Moleculs/ListComponent.razor.rz.scp.css */
.header-block[b-94x27pp7c2] {
    display: flex;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 0 1rem;
}

.header-block.dark-grey-background[b-94x27pp7c2] {
    border: 2px solid #4b5161;
    font-size: var(--font-size-base);
    background-color: #4b5161;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 0;
}

.p-subtitle[b-94x27pp7c2] {
    font-size: var(--font-size-medium);
    text-decoration: underline;
}

.dark-grey-background .p-subtitle[b-94x27pp7c2] {
    color: white;
    text-decoration: none;
}

.in-list-task-group[b-94x27pp7c2] {
    width: 100%;
    font-size: var(--font-size-base);
    display: flex;
    overflow: hidden;
    background-color: #f6f6f6;
    height: fit-content;
    align-items: stretch;
}

.in-list-task-group:hover[b-94x27pp7c2] {
    background-color: #e6e6e6;
}

.in-list-task-group.dark-grey-background[b-94x27pp7c2] {
    border-left: 2px solid #4b5161;
    border-right: 2px solid #4b5161;
}

.in-list-task-group.dark-grey-background:last-child[b-94x27pp7c2] {
    border-bottom: 2px solid #4b5161;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.in-list-task[b-94x27pp7c2] {
    width: calc(100% - 8rem);
    font-size: var(--font-size-base);
    text-align: left;
    color: var(--text-color-default);
    border: none;
    white-space: normal;
    padding-left: 1rem;
    display: inline-block;
    background-color: transparent;
    min-height: 3rem;
    word-wrap: break-word;
    cursor: unset;
}

.in-list-task.icon-before[b-94x27pp7c2] {
    width: calc(100% - 5rem);
}

/* Icon styles */
.icon[b-94x27pp7c2] {
    width: 3rem;
    text-align: center;
    background-color: transparent;
    height: auto;
    display: flex;
    align-items: center;
    padding-left: 0.25rem;
}

.dl-icon-img[b-94x27pp7c2] {
    cursor: pointer;
}

.dl-icon-img:hover[b-94x27pp7c2] {
    opacity: 70%;
}

.add-icon[b-94x27pp7c2] {
    cursor: pointer;
    height: 2.5rem;
    width: auto;
    margin-left: 1rem;
}

.add-icon:hover[b-94x27pp7c2] {
    opacity: 80%;
}

.monitored-container[b-94x27pp7c2] {
    width: 3rem;
    display: flex;
    align-items: center;
    margin-left: 2rem;
}

.monitored[b-94x27pp7c2] {
    width: 1rem;
    height: 2rem;
    border: solid #49d182;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Row styling */
.pe-line-even[b-94x27pp7c2] {
    background-color: white;
}

.pe-line-odd[b-94x27pp7c2] {
    background-color: #f6f6f6;
}

/* Layout utilities */
.float-l[b-94x27pp7c2] {
    float: left;
}

.float-r[b-94x27pp7c2] {
    float: right;
}
/* /Components/TeachingManagement/_Moleculs/TaskListComponent.razor.rz.scp.css */
/* Header styles */
.header-bis[b-uapxce0q6c] {
    background-color: #4b5161;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: white;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1rem;
    margin: 0 0 0 0 !important;
    height: 3rem;
}

.pe-header-bis-text[b-uapxce0q6c] {
    font-size: var(--font-size-large);
}

.track-text[b-uapxce0q6c] {
    color: white;
    text-align: right;
    padding-top: 8px;
    right: 7px;
}

/* Container styles */
.pe-grey-border[b-uapxce0q6c] {
    border: 2px solid #4b5161;
    border-radius: 10px;
    padding: 0;
    font-size: var(--font-size-base);
    overflow: hidden;
    width: 32rem;
}

/* Task list styles */
.header-block[b-uapxce0q6c] {
    display: flex;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 0 10px;
}

.p-subtitle[b-uapxce0q6c] {
    font-size: var(--font-size-large);
    text-decoration: underline;
}

.in-list-task-group[b-uapxce0q6c] {
    width: 100%;
    font-size: var(--font-size-base);
    display: flex;
    overflow: visible;
    background-color: #f6f6f6;
    height: fit-content;
    align-items: stretch;
    position: relative;
}

.in-list-task-group.dragging[b-uapxce0q6c] {
    opacity: 50%;
}

.in-list-task-group.drag-over[b-uapxce0q6c]::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #0d6efd;
    border-radius: 2px;
    z-index: 1;
}

.in-list-task[draggable="true"][b-uapxce0q6c] {
    cursor: grab;
}

.in-list-task[b-uapxce0q6c] {
    width: calc(100% - 6rem);
    text-align: left;
    color: var(--text-color-default);
    border: none;
    white-space: normal;
    padding-left: 10px;
    display: inline-block;
    background-color: #f6f6f6;
    word-wrap: break-word;
}

.in-list-task.with-details[b-uapxce0q6c] {
    width: calc(100% - 19rem);
}

.in-list-task:hover[b-uapxce0q6c] {
    background-color: #e6e6e6;
}

.in-list-task.markup[b-uapxce0q6c] {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.in-list-task.markup[b-uapxce0q6c]  a {
    color: #0d6efd;
    text-decoration: underline;
}

.in-list-task.markup[b-uapxce0q6c]  p,
.in-list-task.markup[b-uapxce0q6c]  ol,
.in-list-task.markup[b-uapxce0q6c]  ul {
    margin: 0;
}

.warn-test[b-uapxce0q6c] {
    color: red;
}

/* Icon styles */
.icon[b-uapxce0q6c] {
    width: 2rem;
    text-align: center;
    background-color: #f6f6f6;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Modalité/Durée columns (student tasks only, see ShowTaskDetails) */
.detail-container[b-uapxce0q6c] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #f6f6f6;
    padding: 0 4px;
}

.modality-container[b-uapxce0q6c] {
    width: 8rem;
}

.duration-container[b-uapxce0q6c] {
    width: 5rem;
}

.dl-icon-img[b-uapxce0q6c] {
    width: auto;
    height: var(--font-size-base);
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    cursor: pointer;
}

.dl-icon-img:hover[b-uapxce0q6c] {
    opacity: 70%;
}

.add-icon[b-uapxce0q6c] {
    cursor: pointer;
    height: 30px;
    margin-left: 10px;
}

.add-icon:hover[b-uapxce0q6c] {
    opacity: 80%;
}

.monitored-container[b-uapxce0q6c] {
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.monitored[b-uapxce0q6c] {
    /* Invisible square footprint, matching Mes tâches' .checkmark box: flexbox
       centers this square, and the tick is drawn inside via ::after at the
       same bottom/right-biased offset Mes tâches uses, since centering the
       diagonal stroke itself (a right+bottom border) looks visually off. */
    position: relative;
    display: inline-block;
    width: var(--font-size-large);
    height: var(--font-size-large);
}

.monitored[b-uapxce0q6c]::after {
    content: "";
    position: absolute;
    bottom: 3px;
    right: 1px;
    width: calc(var(--font-size-large) / 2);
    height: var(--font-size-large);
    border: solid #49d182;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Row styling */
.pe-line-even[b-uapxce0q6c] {
    background-color: white;
}

.pe-line-odd[b-uapxce0q6c] {
    background-color: #f6f6f6;
}

/* Layout utilities */
.float-l[b-uapxce0q6c] {
    float: left;
}

.float-r[b-uapxce0q6c] {
    float: right;
}