@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Mea+Culpa&display=swap');
                                    /* General body styles */
                                    
                                    body,
                                    html {
                                        margin: 0;
                                        padding: 0;
                                        height: 100%;
                                        overflow-x: hidden;
                                        font-family: 'Cormorant', sans-serif;
                                    }
                                    
                                    .body-div {
                                        width: 100vw;
                                        background-image: url('images/white-wall.jpg');
                                        background-size: cover;
                                        display: flex;
                                        flex-direction: column;
                                        overflow: hidden;
                                    }
                                    /* Navigation section */
                                    
                                    .nav-div {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        height: 10vh;
                                        padding: 0.35rem;
                                        position: fixed;
                                        top: 0;
                                        width: 100%;
                                        z-index: 10;
                                    }
                                    
                                    .nav-links button,
                                    .register-login {
                                        background-color: #111;
                                        border: none;
                                        padding: 1rem;
                                        margin: 0 0.3125rem;
                                        /* 5px */
                                        border-radius: 0.3125rem;
                                        /* 5px */
                                        transform: translateY(-0.3125rem);
                                        /* -5px */
                                        transition: transform 0.3s ease;
                                        font-size: 1.3rem;
                                        font-weight: 550;
                                        color: white;
                                        border: 0.6px solid #8d9d9e;
                                        font-family: 'Cormorant', sans-serif;
                                        cursor: pointer;
                                    }
                                    
                                    .nav-links button.active,
                                    .register-login.active,
                                    .nav-links button:hover,
                                    .register-login:hover {
                                        background-image: url('images/white-wall.jpg');
                                        background-size: cover;
                                        color: #111;
                                        border: 0.6px solid #111;
                                    }
                                    
                                    .nav-links button:hover,
                                    .register-login:hover {
                                        transform: translateY(-0.625rem);
                                        /* -10px */
                                    }
                                    
                                    .register-login {
                                        font-size: 1.2rem;
                                        /* 1.2 * 16px = 19.2px */
                                    }
                                    /* Dropdown styling */
                                    
                                    .dropdown {
                                        position: relative;
                                        display: inline-block;
                                    }
                                    
                                    .dropbtn {
                                        background-color: #111;
                                        border: none;
                                        padding: 1rem;
                                        margin: 0 0.3125rem;
                                        /* 5px */
                                        border-radius: 0.3125rem;
                                        /* 5px */
                                        transform: translateY(-0.3125rem);
                                        /* -5px */
                                        transition: transform 0.3s ease;
                                        font-size: 1.2rem;
                                        font-weight: 550;
                                        color: white;
                                    }
                                    
                                    .dropbtn:hover {
                                        transform: translateY(-0.625rem);
                                        /* -10px */
                                    }
                                    
                                    .dropdown-content {
                                        display: none;
                                        position: absolute;
                                        background-color: #f9f9f9;
                                        min-width: 10rem;
                                        /* 160px */
                                        z-index: 1;
                                        border-radius: 0.3125rem;
                                        /* 5px */
                                        box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.2);
                                        /* 8px 16px */
                                    }
                                    
                                    .dropdown-content a {
                                        color: black;
                                        padding: 0.75rem 1rem;
                                        /* 12px 16px */
                                        text-decoration: none;
                                        display: block;
                                        font-size: 1.185rem;
                                    }
                                    
                                    .dropdown-content a:hover {
                                        background-color: #ddd;
                                    }
                                    
                                    .dropdown:hover .dropdown-content {
                                        display: block;
                                    }
                                    /* Hamburger menu */
                                    
                                    .hamburger-menu {
                                        display: none;
                                        font-size: 1.875rem;
                                        /* 30px */
                                        cursor: pointer;
                                        color: #111;
                                        padding: 0.5rem;
                                        padding-right: 0.8rem;
                                        z-index: 25;
                                        border-radius: 3px;
                                        background-image: url('images/white-wall.jpg');
                                        background-size: cover;
                                        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
                                        transition: transform 0.3s ease, box-shadow 0.3s ease;
                                    }
                                    
                                    .hamburger-menu:hover {
                                        color: blue;
                                        transform: translateY(-0.5rem);
                                        /* Lift by 8px */
                                        box-shadow: rgba(50, 50, 93, 0.4) 0px 6.25rem 12.5rem -2.5rem, rgba(0, 0, 0, 0.4) 0px 3.75rem 7.5rem -3.75rem, rgba(10, 37, 64, 0.4) 0px -0.25rem 0.625rem 0px inset;
                                    }
                                    /* Side Navigation Bar (from right) */
                                    
                                    .side-nav {
                                        height: 100vh;
                                        width: 0;
                                        position: fixed;
                                        z-index: 100;
                                        top: 0;
                                        right: 0;
                                        /* Positioned on the right side */
                                        background-color: #111;
                                        overflow-x: hidden;
                                        transition: 0.5s;
                                        padding-top: 3.75rem;
                                        /* 60px */
                                        text-decoration: none;
                                    }
                                    
                                    .side-nav a {
                                        text-decoration: none;
                                    }
                                    /* Adjustments for the side-nav button positioning */
                                    
                                    .side-nav button,
                                    .side-nav .dropdown {
                                        padding: 0.5rem 1rem;
                                        text-decoration: none;
                                        font-size: 1.5rem;
                                        font-weight: 550;
                                        color: white;
                                        font-family: 'Cormorant', sans-serif;
                                        display: block;
                                        background: none;
                                        border: none;
                                        width: 100%;
                                        text-align: left;
                                        /* Align links to the left */
                                        transition: background-color 0.3s ease;
                                    }
                                    
                                    .side-nav .dropdown {
                                        padding-left: 0;
                                    }
                                    
                                    .side-nav .dropbtn {
                                        margin-left: 0;
                                    }
                                    
                                    .side-nav .dropdown-content {
                                        display: none;
                                        padding-left: 1.25rem;
                                        /* 20px */
                                        margin-top: 0.5rem;
                                        /* Add a little space before the dropdown */
                                    }
                                    
                                    .side-nav .dropdown:hover .dropdown-content {
                                        display: block;
                                    }
                                    
                                    .side-nav button:hover {
                                        background-color: #ddd;
                                        color: black;
                                    }
                                    
                                    .side-nav .closebtn {
                                        position: absolute;
                                        top: 0;
                                        right: 1.5625rem;
                                        /* 25px */
                                        font-size: 3rem;
                                        margin-left: 3.125rem;
                                        /* 50px */
                                        color: white;
                                        cursor: pointer;
                                    }
                                    /* Adjust buttons' positions when dropdown is visible */
                                    
                                    .side-nav button.contact-button,
                                    .side-nav button.register-login {
                                        transition: margin-top 0.3s ease;
                                        /* Smooth transition for moving down */
                                    }
                                    
                                    .side-nav button.contact-button,
                                    .side-nav button.register-login {
                                        margin-top: 0;
                                        /* Default position */
                                    }
                                    /* For smaller screens */
                                    
                                    @media screen and (max-width: 768px) {
                                        /* max-width: 48rem */
                                        .nav-links {
                                            display: none;
                                        }
                                        .hamburger-menu {
                                            display: block;
                                            z-index: 25;
                                        }
                                        .side-nav {
                                            width: 0;
                                        }
                                    }
                                    /* Contents section */
                                    
                                    .contents-div {
                                        height: 100%;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 1rem;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    
                                    .hero-section {
                                        width: 95%;
                                        height: 100%;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    /* Entrance section */
                                    
                                    .entrance-div {
                                        display: flex;
                                        width: 95%;
                                        height: 100vh;
                                        background-color: #111;
                                    }
                                    
                                    @media screen and (max-width: 817px) {
                                        .hero-section {
                                            width: 100%;
                                        }
                                        .entrance-div {
                                            width: 100%;
                                        }
                                    }
                                    
                                    .entrance-div .left-wall,
                                    .entrance-div .right-wall {
                                        background-image: url('images/black-brick-wall-textured-backgr.jpg');
                                        background-size: cover;
                                        position: relative;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    
                                    .entrance-div .left-wall {
                                        width: 10%;
                                    }
                                    
                                    .entrance-div .right-wall {
                                        width: 30%;
                                    }
                                    
                                    .actual-entrance {
                                        width: 60%;
                                    }
                                    
                                    @media screen and (max-width: 955px) {
                                        .entrance-div .left-wall {
                                            width: 0%;
                                        }
                                        .entrance-div .right-wall {
                                            width: 30%;
                                        }
                                        .actual-entrance {
                                            width: 70%;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 514px) {
                                        .entrance-div .left-wall {
                                            width: 0%;
                                        }
                                        .entrance-div .right-wall {
                                            width: 0%;
                                        }
                                        .actual-entrance {
                                            width: 100%;
                                        }
                                        .entrance-div .right-wall .blackboard-menu .inner-layer-menu p {
                                            display: none;
                                        }
                                    }
                                    
                                    .entrance-div .right-wall .blackboard-menu {
                                        position: relative;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 80%;
                                        height: auto;
                                        background-image: url('images/white-wall.jpg');
                                        background-size: cover;
                                        border-radius: 2px;
                                    }
                                    
                                    .entrance-div .right-wall .blackboard-menu .second-level-menu {
                                        position: relative;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 90%;
                                        height: auto;
                                        background-image: url('images/black-brick-wall-textured-backgr.jpg');
                                        background-size: cover;
                                        border-radius: 2px;
                                    }
                                    
                                    .entrance-div .right-wall .blackboard-menu .third-level-menu {
                                        position: relative;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 90%;
                                        height: auto;
                                        background-color: #ddd;
                                        border-radius: 2px;
                                    }
                                    
                                    .entrance-div .right-wall .blackboard-menu .inner-layer-menu {
                                        position: relative;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        width: 90%;
                                        height: auto;
                                        background-color: #ffffff;
                                        border-radius: 2px;
                                        padding: 0.5rem;
                                    }
                                    
                                    .entrance-div .right-wall .blackboard-menu .inner-layer-menu p {
                                        color: black;
                                        font-size: 1.4vw;
                                        font-weight: 450;
                                        text-align: center;
                                    }
                                    
                                    .entrance-div .right-wall .blackboard-menu .inner-layer-menu .header-p {
                                        color: black;
                                        font-size: 2vw;
                                        font-family: 'Mea Culpa', 'Roboto', sans-serif;
                                        font-weight: 550;
                                    }
                                    
                                    .entrance-div .right-wall .blackboard-menu .inner-layer-menu .menu-header {
                                        color: black;
                                        font-size: 2.5vw;
                                        font-family: 'Mea Culpa', 'Roboto', sans-serif;
                                        font-weight: 650;
                                    }
                                    
                                    .entrance-div .left-wall {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    
                                    .entrance-div .left-wall .antique-light {
                                        width: 50%;
                                        height: auto;
                                        z-index: 3;
                                    }
                                    
                                    .actual-entrance {
                                        height: 100%;
                                        background-color: #111;
                                        display: flex;
                                        flex-direction: column;
                                        overflow: hidden;
                                        position: relative;
                                    }
                                    /* Banner section */
                                    
                                    .banner-div {
                                        width: 100%;
                                        height: 15%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        position: absolute;
                                    }
                                    
                                    .app-title-and-cutlery {
                                        width: 100%;
                                        height: 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        background-color: #111;
                                        z-index: 5;
                                    }
                                    
                                    .plate-title {
                                        width: 60%;
                                        height: 100%;
                                        position: relative;
                                        text-align: center;
                                        background-color: #111;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        z-index: 5;
                                    }
                                    
                                    .plate-title h1 {
                                        position: absolute;
                                        top: 60%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        z-index: 3;
                                        font-size: 4.5vw;
                                        font-family: 'Mea Culpa', 'Roboto', sans-serif;
                                    }
                                    
                                    .plate-title img {
                                        width: 80%;
                                        height: auto;
                                        position: absolute;
                                        top: 85%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                    }
                                    
                                    .entrance-image {
                                        height: 100%;
                                    }
                                    
                                    .entrance-image img {
                                        width: 100%;
                                        object-fit: cover;
                                    }
                                    
                                    @media screen and (max-width: 768px) {
                                        .plate-title h1 {
                                            font-size: 5.5vw;
                                        }
                                        .entrance-div .right-wall .blackboard-menu .inner-layer-menu p {
                                            font-size: 1.15rem;
                                        }
                                        .entrance-div .right-wall .blackboard-menu .inner-layer-menu .header-p {
                                            font-size: 1.4rem;
                                        }
                                        .entrance-div .right-wall .blackboard-menu .inner-layer-menu .menu-header {
                                            font-size: 1.85rem;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 738px) {
                                        .actual-entrance {
                                            position: relative;
                                            top: 20%;
                                            height: 80%;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 588px) {
                                        .actual-entrance {
                                            position: relative;
                                            top: 30%;
                                            height: 70%;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 514px) {
                                        .actual-entrance {
                                            position: relative;
                                            top: 3%;
                                            height: 97%;
                                        }
                                        .plate-title h1 {
                                            font-size: 7.5vw;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 487px) {
                                        .actual-entrance {
                                            position: relative;
                                            top: 20%;
                                            height: 80%;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 407px) {
                                        .actual-entrance {
                                            position: relative;
                                            top: 5%;
                                            height: 95%;
                                        }
                                        .entrance-image img {
                                            width: auto;
                                            height: 98%;
                                            object-fit: cover;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 376px) {
                                        .actual-entrance {
                                            position: relative;
                                            top: 15%;
                                            height: 85%;
                                        }
                                    }
                                    /* ===== Register/Login MODAL OVERLAY ===== */
                                    
                                    .modal-overlay {
                                        position: fixed;
                                        top: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 100%;
                                        background-color: rgba(0, 0, 0, 0.4);
                                        display: none;
                                        align-items: center;
                                        justify-content: center;
                                        z-index: 1000;
                                    }
                                    
                                    .modal-overlay.active {
                                        display: flex;
                                    }
                                    /* ===== MODAL CARD ===== */
                                    
                                    .modal {
                                        position: relative;
                                        display: flex;
                                        flex-direction: row;
                                        background: url('images/modal-background.jpg'), white;
                                        background-size: cover;
                                        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                                        border-radius: 10px;
                                        overflow: hidden;
                                        max-width: 800px;
                                        width: 90%;
                                        min-height: 300px;
                                        animation: fadeIn 0.3s ease-in-out;
                                    }
                                    
                                    .modal::before {
                                        content: '';
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 100%;
                                        background: rgba(255, 255, 255, 0.4);
                                        /* White overlay */
                                        z-index: 0;
                                    }
                                    
                                    @keyframes fadeIn {
                                        from {
                                            transform: translateY(-20px);
                                            opacity: 0;
                                        }
                                        to {
                                            transform: translateY(0);
                                            opacity: 1;
                                        }
                                    }
                                    /* Ensure modal content is above overlay */
                                    
                                    .modal-text,
                                    .modal-image,
                                    .close-btn {
                                        position: relative;
                                        z-index: 1;
                                    }
                                    /* ===== MODAL LEFT (TEXT) ===== */
                                    
                                    .modal-text {
                                        flex: 1;
                                        padding: 2rem;
                                    }
                                    
                                    .modal-text h2 {
                                        font-family: 'Cormorant', serif;
                                        font-size: 2.5rem;
                                        margin-bottom: 0.5rem;
                                    }
                                    
                                    .modal-text p {
                                        font-size: 1.2rem;
                                        line-height: 1.6;
                                    }
                                    /* ===== MODAL RIGHT (IMAGE) ===== */
                                    
                                    .modal-image {
                                        flex: 1;
                                        background: url('images/modal-plate.png') no-repeat center center;
                                        background-size: cover;
                                    }
                                    /* ===== CLOSE BUTTON ===== */
                                    
                                    .modal .close-btn {
                                        position: absolute;
                                        top: 15px;
                                        right: 20px;
                                        width: 2.8rem;
                                        height: 2.8rem;
                                        background: rgba(255, 255, 255, 0.4);
                                        backdrop-filter: blur(8px);
                                        -webkit-backdrop-filter: blur(8px);
                                        border: 1px solid rgba(255, 255, 255, 0.5);
                                        border-radius: 50%;
                                        font-size: 2.5rem;
                                        font-weight: bold;
                                        color: #333;
                                        cursor: pointer;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        z-index: 2;
                                        transition: background 0.2s ease;
                                    }
                                    
                                    .modal .close-btn:hover {
                                        background: rgba(255, 255, 255, 0.6);
                                        color: red;
                                    }
                                    
                                    @media (max-width: 768px) {
                                        .modal {
                                            flex-direction: column;
                                        }
                                        .modal-image {
                                            height: 200px;
                                        }
                                    }
                                    /* Sections Common code */
                                    
                                    .meal-plan-categories,
                                    .meal-plan-reasons,
                                    .service-options {
                                        width: 100%;
                                        min-height: 100vh;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        background-color: rgba(255, 255, 255, 0.75);
                                        padding: 1rem;
                                    }
                                    
                                    .meal-plan-reasons .intro-text,
                                    .meal-plan-categories .intro-text,
                                    .service-options .intro-text {
                                        color: black;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        width: 90%;
                                        flex-wrap: wrap;
                                        padding: 1rem;
                                    }
                                    
                                    .meal-plan-reasons .intro-text h1,
                                    .meal-plan-categories .intro-text h1,
                                    .service-options .intro-text h1 {
                                        font-size: 3rem;
                                        color: black;
                                    }
                                    
                                    .meal-plan-reasons .intro-text p,
                                    .service-options .intro-text p {
                                        font-size: 1.5rem;
                                        padding: 1rem;
                                        text-align: left;
                                        margin-top: -1rem;
                                        font-weight: 450;
                                    }
                                    
                                    .meal-plan-categories .categories-container,
                                    .meal-plan-reasons .reasons-grid,
                                    .service-options .service-options-grid {
                                        display: flex;
                                        justify-content: center;
                                        flex-wrap: wrap;
                                        gap: 4rem;
                                        padding: 1rem;
                                        width: 90%;
                                    }
                                    /* meal plan categories */
                                    
                                    .meal-plan-categories .categories-container {
                                        align-items: center;
                                        flex-wrap: wrap;
                                        width: 90%;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        flex-direction: column;
                                        width: 30rem;
                                        height: auto;
                                        min-height: 5rem;
                                        /* To Be Removed */
                                        position: relative;
                                        /*background-color: #000; /* To Be Removed */
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .category-podium {
                                        width: 90%;
                                        margin-top: -10rem;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .coffee-overlay {
                                        width: 28%;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .school-coffee {
                                        position: absolute;
                                        top: 11.98rem;
                                        left: 1.9rem;
                                        z-index: 4;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .family-coffee {
                                        position: absolute;
                                        top: 16.05rem;
                                        left: 1.9rem;
                                        z-index: 4;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .fruit-overlay {
                                        width: 28%;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .school-fruit {
                                        position: absolute;
                                        top: 12.4rem;
                                        right: 2.2rem;
                                        z-index: 4;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .family-fruit {
                                        position: absolute;
                                        top: 16.4rem;
                                        right: 2.2rem;
                                        z-index: 4;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .family-mini-plan {
                                        width: 95%;
                                        padding: 1rem;
                                        height: 18rem;
                                        /*background-color: pink; /* To Be Removed */
                                        /*min-height: 4rem; /* To Be Removed */
                                        position: relative;
                                        left: 4rem;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .school-mini-plan {
                                        position: relative;
                                        width: 95%;
                                        height: 14rem;
                                        padding: 1rem;
                                        /*background-color: pink; /* To Be Removed */
                                        /*min-height: 4rem; /* To Be Removed */
                                        left: 4rem;
                                    }
                                    
                                    .meal-plan-categories .categories-container .family-option {
                                        position: relative;
                                    }
                                    
                                    .meal-plan-categories .categories-container .school-option {
                                        position: relative;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display img {
                                        width: 100%;
                                        height: auto;
                                    }
                                    /* Create Meal Plan Button */
                                    
                                    .create-plan-btn {
                                        border: 0;
                                        background-color: #f3f3f3;
                                        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(50%, #dddddd), color-stop(50%, #d2d2d2), color-stop(100%, #dfdfdf));
                                        background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
                                        background-image: -moz-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
                                        background-image: -ms-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
                                        background-image: -o-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
                                        background-image: linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
                                        border-bottom: 1px solid #b4b4b4;
                                        border-right: 1px solid #dfdfdf;
                                        -webkit-border-radius: 5px;
                                        -moz-border-radius: 5px;
                                        border-radius: 5px;
                                        -webkit-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
                                        -moz-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
                                        box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
                                        color: #4b4b4b;
                                        font: bold 1.8rem 'Cormorant', sans-serif;
                                        margin: 0;
                                        margin-top: 0.5rem;
                                        padding: 1rem 0.7rem;
                                        text-shadow: 0 1px 1px #fff;
                                        width: 15rem;
                                    }
                                    
                                    .create-plan-btn:hover {
                                        background-color: #e5e5e5;
                                        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e5e5), color-stop(50%, #d1d1d1), color-stop(50%, #c4c4c4), color-stop(100%, #b8b8b8));
                                        background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
                                        background-image: -moz-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
                                        background-image: -ms-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
                                        background-image: -o-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
                                        background-image: linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
                                        -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
                                        -moz-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
                                        box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
                                        cursor: pointer;
                                    }
                                    
                                    .create-plan-btn:active {
                                        -webkit-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 rgba(255, 255, 255, .1);
                                        -moz-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 rgba(255, 255, 255, .1);
                                        box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 rgba(255, 255, 255, .1);
                                    }
                                    /* Reasons to Plan meals */
                                    
                                    .meal-plan-reasons .reasons-grid .reason-card {
                                        position: relative;
                                        width: 20rem;
                                        height: 22.5rem;
                                        background-color: #f1f1f1;
                                        border-top-right-radius: 4.5rem;
                                        border-bottom-left-radius: 4.5rem;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        padding: 0.5rem;
                                        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
                                    }
                                    
                                    .meal-plan-reasons .reasons-grid .reason-card .reason-heading {
                                        height: 15%;
                                        padding: 0.5rem;
                                    }
                                    
                                    .meal-plan-reasons .reasons-grid .reason-card .reason {
                                        height: 85%;
                                        padding: 0.5rem;
                                    }
                                    
                                    .meal-plan-reasons .reasons-grid .reason-card h2 {
                                        font-size: 1.8rem;
                                        text-align: center;
                                    }
                                    
                                    .meal-plan-reasons .reasons-grid .reason-card p {
                                        font-size: 1.3rem;
                                        font-weight: 400;
                                        line-height: 1.6;
                                    }
                                    /* Circle styling */
                                    
                                    .circle {
                                        position: absolute;
                                        width: 4rem;
                                        height: 4rem;
                                        border-radius: 50%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        color: white;
                                        font-size: 1.5rem;
                                        font-weight: bold;
                                    }
                                    
                                    .circle.top-left {
                                        top: -1rem;
                                        left: -1rem;
                                        background-image: url('images/grey-wall.jpg');
                                        background-size: cover;
                                        background-position: center;
                                    }
                                    
                                    .circle.bottom-right {
                                        bottom: -1rem;
                                        right: -1rem;
                                        background-image: url('images/black-brick-wall-textured-backgr.jpg');
                                        background-size: cover;
                                        background-position: center;
                                        color: white;
                                        font-size: 2rem;
                                        font-family: 'Mea Culpa', 'Roboto', sans-serif;
                                        font-weight: 650;
                                    }
                                    /* For circle at the top-left */
                                    
                                    .circle.top-left img {
                                        width: 85%;
                                        height: 85%;
                                        object-fit: cover;
                                        border-radius: 50%;
                                    }
                                    /* Service options: No Account vs Account */
                                    /* Footer Section */
                                    
                                    footer {
                                        background-image: url('images/black-brick-wall-textured-backgr.jpg');
                                        background-size: cover;
                                        background-position: center;
                                        color: white;
                                        padding: 20px 20px;
                                        text-align: center;
                                        margin-top: 50px;
                                    }
                                    
                                    footer .footer-content {
                                        max-width: 1200px;
                                        margin: 0 auto;
                                    }
                                    
                                    footer p {
                                        font-size: 1.3rem;
                                        margin-bottom: 20px;
                                    }
                                    
                                    footer .footer-links {
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                    }
                                    
                                    footer .footer-links a {
                                        margin: 10px 0;
                                    }
                                    /* Button Styling */
                                    
                                    footer .button {
                                        cursor: pointer;
                                        font-size: 1rem;
                                        border-radius: 16px;
                                        border: none;
                                        padding: 2px;
                                        background: radial-gradient(circle 80px at 80% -10%, #ffffff, #181b1b);
                                        position: relative;
                                        transition: background 0.3s, transform 0.3s;
                                    }
                                    
                                    footer .button:hover {
                                        transform: scale(0.98);
                                    }
                                    
                                    footer .button::after {
                                        content: "";
                                        position: absolute;
                                        width: 65%;
                                        height: 60%;
                                        border-radius: 120px;
                                        top: 0;
                                        right: 0;
                                        box-shadow: 0 0 20px #ffffff38;
                                        z-index: -1;
                                        transition: box-shadow 0.3s;
                                    }
                                    
                                    footer .button:hover::after {
                                        box-shadow: 0 0 10px #ffffff18;
                                    }
                                    
                                    footer .blob1 {
                                        position: absolute;
                                        width: 70px;
                                        height: 100%;
                                        border-radius: 16px;
                                        bottom: 0;
                                        left: 0;
                                        background: radial-gradient(circle 60px at 0% 100%, #3fe9ff, #0000ff80, transparent);
                                        box-shadow: -10px 10px 30px #0051ff2d;
                                        transition: background 0.3s, box-shadow 0.3s;
                                    }
                                    
                                    footer .button:hover .blob1 {
                                        box-shadow: -5px 5px 20px #000;
                                    }
                                    
                                    footer .inner {
                                        padding: 14px 25px;
                                        border-radius: 14px;
                                        color: #fff;
                                        z-index: 3;
                                        position: relative;
                                        background: radial-gradient(circle 80px at 80% -50%, #777777, #0f1111);
                                        transition: background 0.3s;
                                        display: flex;
                                        align-items: center;
                                        /* Aligns the icon and text */
                                    }
                                    
                                    footer .button:hover .inner {
                                        background: radial-gradient(circle 80px at 80% -50%, #333333, #0f0f0f);
                                    }
                                    
                                    footer .inner i {
                                        font-size: 1rem;
                                        /* Adjust icon size */
                                    }
                                    
                                    footer .inner::before {
                                        content: "";
                                        width: 100%;
                                        height: 100%;
                                        left: 0;
                                        top: 0;
                                        border-radius: 14px;
                                        background: radial-gradient(circle 60px at 0% 100%, #00e1ff1a, #0000ff11, transparent);
                                        position: absolute;
                                        transition: opacity 0.3s;
                                    }
                                    
                                    footer .button:hover .inner::before {
                                        opacity: 0;
                                    }
                                    /* Mobile responsiveness for footer */
                                    
                                    @media (max-width: 768px) {
                                        footer {
                                            padding: 30px 20px;
                                        }
                                        footer .footer-links {
                                            flex-direction: column;
                                            align-items: center;
                                        }
                                        footer p {
                                            font-size: 0.9rem;
                                        }
                                    }
                                    /* Family Plan Css */
                                    
                                    .family-plan-parent-container,
                                    mini-family-plan-card-container {
                                        width: 100%;
                                        min-height: 100vh;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    
                                    .family-plan-parent-container .layout-header,
                                    .school-lunch-plan-parent-container .layout-header {
                                        width: 90%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        padding: 1.5rem 1rem;
                                        z-index: 11;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs {
                                        position: relative;
                                        display: flex;
                                        flex-wrap: wrap;
                                        border-radius: 1rem;
                                        background: linear-gradient(145deg, #e6e6e6, #ffffff);
                                        box-sizing: border-box;
                                        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15), -5px -5px 15px rgba(255, 255, 255, 0.8);
                                        padding: 1rem;
                                        width: 22rem;
                                        font-size: 1.35rem;
                                        gap: 0.5rem;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio {
                                        pointer-events: auto;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio {
                                        flex: 1 1 auto;
                                        text-align: center;
                                        position: relative;
                                        z-index: 12;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input {
                                        display: none;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio .name,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio .name {
                                        display: flex;
                                        cursor: pointer;
                                        align-items: center;
                                        justify-content: center;
                                        border-radius: 0.7rem;
                                        border: none;
                                        padding: 0.7rem 0;
                                        color: #2d3748;
                                        font-size: 1.35rem;
                                        font-weight: 500;
                                        font-family: 'Cormorant', sans-serif;
                                        background: linear-gradient(145deg, #ffffff, #e6e6e6);
                                        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1), -3px -3px 6px rgba(255, 255, 255, 0.7);
                                        transition: all 0.2s ease;
                                        overflow: hidden;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name {
                                        /*background: linear-gradient(145deg, #3b82f6, #2563eb);*/
                                        background-image: url('images/family-plan-background.jpg');
                                        color: white;
                                        font-weight: 600;
                                        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                                        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.1), 3px 3px 8px rgba(59, 130, 246, 0.3);
                                        transform: translateY(2px);
                                    }
                                    /* Hover effect */
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio:hover .name,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio:hover .name {
                                        background: linear-gradient(145deg, #f0f0f0, #ffffff);
                                        transform: translateY(-1px);
                                        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), -4px -4px 8px rgba(255, 255, 255, 0.8);
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio:hover input:checked+.name,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio:hover input:checked+.name {
                                        transform: translateY(1px);
                                    }
                                    /* Animation */
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name {
                                        animation: select 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                                    }
                                    /* Particles */
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio .name::before,
                                    .family-plan-parent-container .layout-header .radio-inputs .radio .name::after,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio .name::before,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio .name::after {
                                        content: "";
                                        position: absolute;
                                        width: 6px;
                                        height: 6px;
                                        border-radius: 50%;
                                        opacity: 0;
                                        pointer-events: none;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::before,
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::after,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::before,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::after {
                                        animation: particles 0.8s ease-out forwards;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio .name::before,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio .name::before {
                                        background: #60a5fa;
                                        box-shadow: 0 0 6px #60a5fa;
                                        top: -10px;
                                        left: 50%;
                                        transform: translateX(-50%);
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio .name::after,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio .name::after {
                                        background: #93c5fd;
                                        box-shadow: 0 0 8px #93c5fd;
                                        bottom: -10px;
                                        left: 50%;
                                        transform: translateX(-50%);
                                    }
                                    /* Sparkles */
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio .name::after,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio .name::after {
                                        content: "";
                                        position: absolute;
                                        inset: 0;
                                        z-index: -1;
                                        background: radial-gradient( circle at var(--x, 50%) var(--y, 50%), rgba(59, 130, 246, 0.3) 0%, transparent 50%);
                                        opacity: 0;
                                        transition: opacity 0.3s;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::after,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::after {
                                        opacity: 1;
                                        animation: sparkle-bg 1s ease-out forwards;
                                    }
                                    /* Multiple particles */
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name {
                                        overflow: visible;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::before,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::before {
                                        box-shadow: 0 0 6px #60a5fa, 10px -10px 0 #60a5fa, -10px -10px 0 #60a5fa;
                                        animation: multi-particles-top 0.8s ease-out forwards;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio input:checked+.name::after,
                                    .school-lunch-plan-parent-container .layout-header .radio input:checked+.name::after {
                                        box-shadow: 0 0 8px #93c5fd, 10px 10px 0 #93c5fd, -10px 10px 0 #93c5fd;
                                        animation: multi-particles-bottom 0.8s ease-out forwards;
                                    }
                                    
                                    @keyframes select {
                                        0% {
                                            transform: scale(0.95) translateY(2px);
                                        }
                                        50% {
                                            transform: scale(1.05) translateY(-1px);
                                        }
                                        100% {
                                            transform: scale(1) translateY(2px);
                                        }
                                    }
                                    
                                    @keyframes multi-particles-top {
                                        0% {
                                            opacity: 1;
                                            transform: translateX(-50%) translateY(0) scale(1);
                                        }
                                        40% {
                                            opacity: 0.8;
                                        }
                                        100% {
                                            opacity: 0;
                                            transform: translateX(-50%) translateY(-20px) scale(0);
                                            box-shadow: 0 0 6px transparent, 20px -20px 0 transparent, -20px -20px 0 transparent;
                                        }
                                    }
                                    
                                    @keyframes multi-particles-bottom {
                                        0% {
                                            opacity: 1;
                                            transform: translateX(-50%) translateY(0) scale(1);
                                        }
                                        40% {
                                            opacity: 0.8;
                                        }
                                        100% {
                                            opacity: 0;
                                            transform: translateX(-50%) translateY(20px) scale(0);
                                            box-shadow: 0 0 8px transparent, 20px 20px 0 transparent, -20px 20px 0 transparent;
                                        }
                                    }
                                    
                                    @keyframes sparkle-bg {
                                        0% {
                                            opacity: 0;
                                            transform: scale(0.2);
                                        }
                                        50% {
                                            opacity: 1;
                                        }
                                        100% {
                                            opacity: 0;
                                            transform: scale(2);
                                        }
                                    }
                                    /* Ripple effect */
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio .name::before,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio .name::before {
                                        content: "";
                                        position: absolute;
                                        inset: 0;
                                        border-radius: inherit;
                                        background: radial-gradient( circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.5) 0%, transparent 50%);
                                        opacity: 0;
                                        transition: opacity 0.3s;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::before,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::before {
                                        animation: ripple 0.8s ease-out;
                                    }
                                    
                                    @keyframes ripple {
                                        0% {
                                            opacity: 1;
                                            transform: scale(0.2);
                                        }
                                        50% {
                                            opacity: 0.5;
                                        }
                                        100% {
                                            opacity: 0;
                                            transform: scale(2.5);
                                        }
                                    }
                                    /* Glowing border */
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name {
                                        position: relative;
                                    }
                                    
                                    .family-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::after,
                                    .school-lunch-plan-parent-container .layout-header .radio-inputs .radio input:checked+.name::after {
                                        content: "";
                                        position: absolute;
                                        inset: -2px;
                                        border-radius: inherit;
                                        background: linear-gradient( 45deg, rgba(59, 130, 246, 0.5), rgba(37, 99, 235, 0.5));
                                        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                                        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                                        -webkit-mask-composite: xor;
                                        mask-composite: exclude;
                                        animation: border-glow 1.5s ease-in-out infinite alternate;
                                    }
                                    
                                    @keyframes border-glow {
                                        0% {
                                            opacity: 0.5;
                                        }
                                        100% {
                                            opacity: 1;
                                        }
                                    }
                                    /* Default state for all sections */
                                    
                                    .family-plan-card-container,
                                    .family-weekly-plan-card-container {
                                        display: none;
                                        /* Initially hidden */
                                        opacity: 0;
                                        /* Make them invisible */
                                        visibility: hidden;
                                        /* Ensure they are hidden from interaction */
                                        transition: opacity 0.5s ease, visibility 0.5s ease;
                                        /* Smooth fade transition */
                                    }
                                    /* Specific layout styles */
                                    
                                    .family-plan-card-container.flex,
                                    .family-weekly-plan-card-container.flex,
                                    .school-lunch-plan-card-container.flex,
                                    .school-lunch-weekly-plan-card-container.flex {
                                        opacity: 1;
                                        /* Fully visible */
                                        visibility: visible;
                                        /* Ensure they are interactable */
                                    }
                                    
                                    .family-plan-card-container.flex,
                                    .school-lunch-plan-card-container.flex {
                                        display: flex;
                                    }
                                    
                                    .family-plan-card-container,
                                    .mini-family-plan-card-container {
                                        width: 100%;
                                        min-height: 100vh;
                                        /*display: flex;*/
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        background-color: rgba(255, 255, 255, 0.65);
                                        padding: 1rem;
                                        overflow-x: hidden;
                                    }
                                    
                                    .family-plan-card {
                                        width: 88%;
                                        position: relative;
                                        padding: 1rem;
                                        background-image: url('images/family-plan-background.jpg');
                                        background-size: cover;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
                                    }
                                    
                                    @media screen and (max-width: 768px) {
                                        .family-plan-card-container {
                                            padding: 2rem;
                                        }
                                        .family-plan-card {
                                            width: 80%;
                                        }
                                    }
                                    
                                    .ribbon-holder {
                                        position: absolute;
                                        right: -5px;
                                        top: -5px;
                                        z-index: 1;
                                        width: 75px;
                                        height: 75px;
                                        text-align: right;
                                        overflow: hidden;
                                    }
                                    
                                    .ribbon {
                                        -ms-transform: rotate(45deg);
                                        -webkit-transform: rotate(45deg);
                                        transform: rotate(45deg);
                                        display: block;
                                        box-shadow: 0 3px 10px -8px black;
                                        position: absolute;
                                        top: 16.3px;
                                        right: -21.8px;
                                        text-align: center;
                                    }
                                    
                                    .ribbon:before {
                                        content: '';
                                        position: absolute;
                                        left: 0;
                                        top: 100%;
                                        z-index: -1;
                                        border-left: 3px solid #666;
                                        border-right: 3px solid transparent;
                                        border-bottom: 3px solid transparent;
                                        border-top: 3px solid #666;
                                    }
                                    
                                    .ribbon:after {
                                        content: '';
                                        position: absolute;
                                        right: 0%;
                                        top: 100%;
                                        z-index: -1;
                                        border-right: 3px solid #666;
                                        border-left: 3px solid transparent;
                                        border-bottom: 3px solid transparent;
                                        border-top: 3px solid #666;
                                    }
                                    
                                    .ribbon>span {
                                        display: block;
                                        width: 100px;
                                        font-size: 10px;
                                        text-transform: uppercase;
                                        font-weight: bold;
                                        line-height: 20px;
                                    }
                                    
                                    .ribbon-outlined>span:before {
                                        content: '';
                                        border-left: 1px solid #ccc;
                                        height: 30px;
                                        display: block;
                                        -ms-transform: rotate(45deg);
                                        -webkit-transform: rotate(45deg);
                                        transform: rotate(45deg);
                                        position: absolute;
                                        top: -4px;
                                        left: 11px;
                                    }
                                    
                                    .ribbon-outlined>span:after {
                                        content: '';
                                        border-left: 1px solid #ccc;
                                        height: 30px;
                                        display: block;
                                        -ms-transform: rotate(-45deg);
                                        -webkit-transform: rotate(-45deg);
                                        transform: rotate(-45deg);
                                        position: absolute;
                                        top: -4px;
                                        left: 89px;
                                    }
                                    
                                    .ribbon-outlined>span {
                                        border: 1px solid #ccc;
                                        background-color: #fff;
                                    }
                                    
                                    .family-heading-and-day-selector,
                                    .school-heading-and-day-selector {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        align-items: center;
                                        padding: 1rem;
                                        width: 90%;
                                        gap: 1rem;
                                    }
                                    
                                    .day-selector {
                                        position: relative;
                                        width: fit-content;
                                        height: fit-content;
                                        border-radius: 9999px;
                                    }
                                    
                                    .day-selector::before {
                                        content: "";
                                        position: absolute;
                                        top: 0%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        width: 0;
                                        height: 0;
                                        background: #06b5d4;
                                        border-radius: 50%;
                                        filter: blur(30px);
                                        opacity: 0.8;
                                        transition: all 0.6s cubic-bezier(1, 0, 0, 1);
                                    }
                                    
                                    .day-selector:hover::before {
                                        width: 100%;
                                        height: 25px;
                                    }
                                    
                                    .day-selector-dropdown {
                                        cursor: pointer;
                                        position: relative;
                                        padding: 20px 48px;
                                        -webkit-appearance: none;
                                        -moz-appearance: none;
                                        appearance: none;
                                        background-color: #083344;
                                        background-image: url("data:image/svg+xml;utf8,<svg fill='%23fefefe' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
                                        /*Custom SVG arrow (white, scalable, editable) */
                                        background-repeat: no-repeat;
                                        background-position: right 16px center;
                                        /* Moves it closer to the text. */
                                        background-size: 2rem 2rem;
                                        /* Controls chevron size. */
                                        padding-right: 3.5rem;
                                        /* space for the chevron,  Ensures text doesn’t overlap the icon. */
                                        font-size: 1.5rem;
                                        font-family: 'Cormorant', sans-serif;
                                        color: #fefefe;
                                        font-weight: 500;
                                        border: none;
                                        border-radius: 9999px;
                                        -webkit-backdrop-filter: blur(4px);
                                        backdrop-filter: blur(4px);
                                        box-shadow: inset 0px 1px 1px #67e8f9;
                                        transition: all 0.3s ease-in-out, box-shadow 0.1s ease-in-out;
                                        overflow: hidden;
                                    }
                                    
                                    .day-selector-dropdown::before {
                                        content: "";
                                        position: absolute;
                                        top: 0;
                                        left: 50%;
                                        transform: translate(-50%, 0%);
                                        width: 0;
                                        height: 0;
                                        border-radius: 50%;
                                        box-shadow: 0px 0px 25px 3px #67e8f97e;
                                        transition: all 0.5s cubic-bezier(1, 0, 0, 1);
                                    }
                                    
                                    .day-selector-dropdown::after {
                                        content: "";
                                        position: absolute;
                                        top: 0;
                                        left: 50%;
                                        transform: translate(-50%, 0%);
                                        width: 0;
                                        height: 0;
                                        background-image: linear-gradient( to right, #06b5d400, #4ec4db00, #72d0e200, #90ddea3d, #ace9f277, #ace9f2, #ace9f2, #ace9f277, #90ddea3d, #72d0e200, #4ec3db00, #06b6d400);
                                        border-radius: 0 0 50% 50%;
                                        opacity: 0.8;
                                        filter: drop-shadow(0px 0px 30px #06b6d4);
                                        transition: all 0.5s cubic-bezier(1, 0, 0, 1);
                                    }
                                    
                                    .day-selector:hover .day-selector-dropdown {
                                        background: #18181898;
                                        box-shadow: inset 0px 0px 0px #fefefe;
                                    }
                                    
                                    .day-selector:hover .day-selector-dropdown::before {
                                        width: 30%;
                                        height: 2px;
                                    }
                                    
                                    .day-selector:hover .day-selector-dropdown::after {
                                        width: 100%;
                                        height: 2px;
                                    }
                                    
                                    .family-plan-card h1 {
                                        position: relative;
                                        color: white;
                                        font-size: 3rem;
                                        padding: 1rem;
                                    }
                                    
                                    .family-plan-card .day-view-user-guide {
                                        color: white;
                                        font-size: 1.25rem;
                                        margin-top: -1rem;
                                        padding-bottom: 1rem;
                                    }
                                    
                                    .family-plan-card .meal-sections {
                                        position: relative;
                                        width: 100%;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        padding: 1rem;
                                        gap: 4rem;
                                    }
                                    
                                    .family-plan-card .meal-sections .breakfast-section,
                                    .family-plan-card .meal-sections .lunch-section,
                                    .family-plan-card .meal-sections .snacks-section,
                                    .family-plan-card .meal-sections .dinner-section {
                                        width: 90%;
                                        min-height: 10rem;
                                        box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
                                        position: relative;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    /* Position text closer to the top boundary */
                                    
                                    .family-plan-card .meal-sections .breakfast-section::before,
                                    .family-plan-card .meal-sections .lunch-section::before,
                                    .family-plan-card .meal-sections .snacks-section::before,
                                    .family-plan-card .meal-sections .dinner-section::before {
                                        content: attr(data-title);
                                        font-size: 2.5rem;
                                        color: white;
                                        position: absolute;
                                        top: -1.5rem;
                                        /* Adjust to move the text closer to the top */
                                        left: 50%;
                                        transform: translateX(-50%);
                                        /* Center the text horizontally */
                                        z-index: 3;
                                        background-color: rgba(31, 32, 37, 255);
                                        padding: 0.2rem;
                                        font-family: 'Mea Culpa', 'Roboto', sans-serif;
                                    }
                                    /* Image positioning */
                                    
                                    .breakfast-section img,
                                    .lunch-section img,
                                    .snacks-section img,
                                    .dinner-section img {
                                        position: absolute;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        z-index: 2;
                                        height: 5rem;
                                        /* Set height of image */
                                        width: auto;
                                    }
                                    
                                    .breakfast-section img {
                                        left: -1.6rem;
                                        /* Image on the left boundary of breakfast */
                                    }
                                    
                                    .lunch-section img {
                                        height: 4rem;
                                        right: -2rem;
                                        /* Image on the right boundary of lunch */
                                    }
                                    
                                    .snacks-section img {
                                        height: 7rem;
                                        left: -2rem;
                                        /* Image on the left boundary of snacks */
                                    }
                                    
                                    .dinner-section img {
                                        right: -1.5rem;
                                        /* Image on the right boundary of dinner */
                                    }
                                    
                                    .breakfast-section p,
                                    .lunch-section p,
                                    .snacks-section p,
                                    .dinner-section p {
                                        position: relative;
                                        color: #fff;
                                        padding: 0.5rem;
                                        font-size: 1.65rem;
                                        line-height: 1.7;
                                        text-align: center;
                                    }
                                    
                                    .breakfast-section .text-area,
                                    .lunch-section .text-area,
                                    .snacks-section .text-area,
                                    .dinner-section .text-area {
                                        position: relative;
                                        width: 50%;
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        align-items: center;
                                        padding: 1rem 2rem;
                                    }
                                    /* Weekly Plan Css */
                                    
                                    .family-weekly-plan-card-container.flex,
                                    .school-lunch-weekly-plan-card-container.flex {
                                        display: flex;
                                    }
                                    
                                    .family-weekly-plan-card-container,
                                    .school-lunch-weekly-plan-card-container {
                                        width: 98%;
                                        position: relative;
                                        padding: 1rem;
                                        background-size: cover;
                                        /*display: flex;*/
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    
                                    .family-weekly-plan-card,
                                    .school-lunch-weekly-plan-card {
                                        width: 98%;
                                        position: relative;
                                        padding: 1rem;
                                        background-size: cover;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        /*box-shadow: rgba(0, 0, 0, 0.12) 1px 2px 3px, rgba(0, 0, 0, 0.24) 1px 2px 3px;*/
                                        background-color: rgba(255, 255, 255, 0.3);
                                    }
                                    
                                    @media screen and (max-width: 768px) {
                                        .family-weekly-plan-card-container,
                                        .school-lunch-weekly-plan-card-container {
                                            padding: 2rem;
                                        }
                                        .family-weekly-plan-card,
                                        .school-lunch-weekly-plan-card {
                                            width: 90%;
                                        }
                                    }
                                    
                                    .family-weekly-plan-card table,
                                    .school-lunch-weekly-plan-card table {
                                        width: 95%;
                                        background-color: rgba(255, 255, 255, 0.55);
                                        box-shadow: rgba(9, 30, 66, 0.432) 0px 1px 1px, rgba(9, 30, 66, 0.247) 0px 0px 1px 1px;
                                        border-spacing: 1.2rem 1rem;
                                    }
                                    
                                    .family-weekly-plan-card table,
                                    td,
                                    th,
                                    .school-lunch-weekly-plan-card table,
                                    td,
                                    th {
                                        /*border: 1px solid #595959;*/
                                        /*border-collapse: collapse;*/
                                        font-size: 120%;
                                    }
                                    
                                    .family-weekly-plan-card td,
                                    th,
                                    .school-lunch-weekly-plan-card td,
                                    th {
                                        padding: 1%;
                                        width: auto;
                                        height: auto;
                                        /*border: 1px solid #595959;*/
                                        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
                                    }
                                    
                                    @media screen and (max-width: 662px) {
                                        .family-weekly-plan-card table,
                                        td,
                                        th {
                                            font-size: 100%;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 476px) {
                                        .family-weekly-plan-card table,
                                        td,
                                        th {
                                            font-size: 95%;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 439px) {
                                        .family-weekly-plan-card table,
                                        td,
                                        th {
                                            font-size: 90%;
                                        }
                                    }
                                    
                                    .family-weekly-plan-card table .row-spacer,
                                    .family-weekly-plan-card table .header-body-row-spacer,
                                    .school-lunch-weekly-plan-card table .row-spacer,
                                    .school-lunch-weekly-plan-card table .header-body-row-spacer {
                                        border: none;
                                        box-shadow: none;
                                    }
                                    
                                    .family-weekly-plan-card table .row-spacer,
                                    .school-lunch-weekly-plan-card table .row-spacer {
                                        padding: 0.5rem;
                                    }
                                    
                                    .family-weekly-plan-card table .header-body-row-spacer,
                                    .school-lunch-weekly-plan-card table .header-body-row-spacer {
                                        padding: 0.2rem;
                                    }
                                    
                                    .family-weekly-plan-card table th,
                                    .school-lunch-weekly-plan-card table th {
                                        /*background: #f0e6cc;*/
                                        background-image: url('images/family-plan-background.jpg');
                                        background-size: cover;
                                        color: #ffffff;
                                    }
                                    
                                    .family-weekly-plan-card table .style-preserver-cell,
                                    .school-lunch-weekly-plan-card table .style-preserver-cell {
                                        background-image: none;
                                        box-shadow: none;
                                    }
                                    
                                    .family-weekly-plan-card table .date-cell,
                                    .school-lunch-weekly-plan-card table .date-cell {
                                        background-image: linear-gradient(163.3deg, #f5f5f5 11.54%, #d8d8d8c9 90.45%);
                                    }
                                    
                                    .family-weekly-plan-card table .plan-header,
                                    .school-lunch-weekly-plan-card table .plan-header {
                                        margin-top: 0.2rem;
                                        color: black;
                                        font-size: 2.5vw;
                                        font-family: 'Mea Culpa', 'Roboto', sans-serif;
                                        font-weight: 550;
                                    }
                                    
                                    .family-weekly-plan-card table .user-edit-guide,
                                    .school-lunch-weekly-plan-card table .user-edit-guide {
                                        margin-top: 0.9rem;
                                        font-size: 1.15rem;
                                        color: rgba(48, 48, 48, 0.959);
                                    }
                                    
                                    @media screen and (max-width: 768px) {
                                        .family-weekly-plan-card table .plan-header,
                                        .school-lunch-weekly-plan-card table .plan-header {
                                            font-size: 5vw;
                                        }
                                    }
                                    
                                    .family-weekly-plan-card .actual-start-end-date,
                                    .school-lunch-weekly-plan-card .actual-start-end-date {
                                        text-align: center;
                                    }
                                    
                                    .family-weekly-plan-card .date-container,
                                    .family-weekly-plan-card .deeds-meta-header,
                                    .family-weekly-plan-card .deeds-meta-header .start-end-date,
                                    .family-weekly-plan-card .deeds-meta-header .calendar-image,
                                    .family-weekly-plan-card .deeds-meta-header .calendar-image .icon-container,
                                    .school-lunch-weekly-plan-card .date-container,
                                    .school-lunch-weekly-plan-card .deeds-meta-header,
                                    .school-lunch-weekly-plan-card .deeds-meta-header .start-end-date,
                                    .school-lunch-weekly-plan-card .deeds-meta-header .calendar-image,
                                    .school-lunch-weekly-plan-card .deeds-meta-header .calendar-image .icon-container {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    
                                    .family-weekly-plan-card .date-container,
                                    .family-weekly-plan-card .deeds-meta-header,
                                    .school-lunch-weekly-plan-card .date-container,
                                    .school-lunch-weekly-plan-card .deeds-meta-header {
                                        gap: 2%;
                                        width: 100%;
                                        position: relative;
                                    }
                                    
                                    @media screen and (max-width: 768px) {
                                        .family-weekly-plan-card .deeds-meta-header,
                                        .school-lunch-weekly-plan-card .deeds-meta-header {
                                            flex-direction: column;
                                        }
                                    }
                                    
                                    .family-weekly-plan-card .deeds-meta-header .start-end-date,
                                    .school-lunch-weekly-plan-card .deeds-meta-header .start-end-date {
                                        width: 90%;
                                        padding: 0.5rem;
                                        position: relative;
                                        font-size: 140%;
                                    }
                                    
                                    .family-weekly-plan-card .deeds-meta-header .calendar-image,
                                    .school-lunch-weekly-plan-card .deeds-meta-header .calendar-image {
                                        position: relative;
                                        width: 6rem;
                                        padding: 0.5rem;
                                    }
                                    
                                    .family-weekly-plan-card .deeds-meta-header .calendar-image .icon-container,
                                    .school-lunch-weekly-plan-card .deeds-meta-header .calendar-image .icon-container {
                                        width: 90%;
                                        padding: 0.5rem;
                                        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
                                        cursor: pointer;
                                        transition: transform 0.3s ease, box-shadow 0.3s ease;
                                    }
                                    
                                    .family-weekly-plan-card .deeds-meta-header .calendar-image .icon-container:hover,
                                    .school-lunch-weekly-plan-card .deeds-meta-header .calendar-image .icon-container:hover {
                                        transform: translateY(-0.5rem);
                                        /* Lift by 8px */
                                        box-shadow: rgba(50, 50, 93, 0.4) 0px 6.25rem 12.5rem -2.5rem, rgba(0, 0, 0, 0.4) 0px 3.75rem 7.5rem -3.75rem, rgba(10, 37, 64, 0.4) 0px -0.25rem 0.625rem 0px inset;
                                    }
                                    
                                    .family-weekly-plan-card .deeds-meta-header .calendar-image .icon-container img,
                                    .school-lunch-weekly-plan-card .deeds-meta-header .calendar-image .icon-container img {
                                        width: 50%;
                                    }
                                    
                                    .family-weekly-plan-card .date-container,
                                    .school-lunch-weekly-plan-card .date-container {
                                        flex-direction: column;
                                        text-align: left;
                                    }
                                    
                                    .family-weekly-plan-card .date-container .day-month,
                                    .school-lunch-weekly-plan-card .date-container .day-month {
                                        font-size: 1.15rem;
                                        color: #303030b7;
                                    }
                                    
                                    @media screen and (max-width: 522px) {
                                        .family-weekly-plan-card .date-container .day-month,
                                        .school-lunch-weekly-plan-card .date-container .day-month {
                                            font-size: 3.5vw;
                                        }
                                    }
                                    /* Calendar styling */
                                    
                                    .calendar-container {
                                        display: none;
                                        position: absolute;
                                        top: 4%;
                                        background-color: white;
                                        border: 1px solid #ccc;
                                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                                        padding: 1.5rem;
                                        width: 20rem;
                                        text-align: center;
                                        z-index: 10;
                                    }
                                    
                                    .calendar-header {
                                        width: 100%;
                                        padding: 1rem 0.2rem;
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        gap: 2rem;
                                        background-image: linear-gradient(to bottom, #d5d5d5, #e8e8e8);
                                    }
                                    
                                    .calendar-header span {
                                        font-size: 1.6rem;
                                        color: #333;
                                    }
                                    
                                    .calendar-header .close-calendar-container {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        position: relative;
                                        border-radius: 50%;
                                        padding: 0.125em;
                                        background-image: linear-gradient(to bottom, #d5d5d5, #e8e8e8);
                                        box-shadow: 0 1px 1px rgb(255 255 255 / 0.6);
                                        font-size: 1.55em;
                                        font-family: 'Open Sans', sans-serif;
                                        -webkit-user-select: none;
                                        user-select: none;
                                    }
                                    
                                    .calendar-header .close-calendar-container:hover {
                                        cursor: pointer;
                                    }
                                    
                                    .calendar-header .inner-ring {
                                        display: flex;
                                        align-items: center;
                                        position: relative;
                                        border-radius: 50%;
                                        width: 2em;
                                        height: 2em;
                                        background-color: #e8e8e8;
                                        box-shadow: inset 0 0 0.0625em 0.125em rgb(255 255 255 / 0.2), inset 0 0.0625em 0.125em rgb(0 0 0 / 0.4);
                                    }
                                    
                                    .calendar-header .button {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        position: absolute;
                                        left: 50%;
                                        top: 50%;
                                        transform: translate(-50%, -50%);
                                        border-radius: 50%;
                                        width: 2.5rem;
                                        height: 2.5rem;
                                        background-color: #e8e8e8;
                                        box-shadow: inset 0 -0.0625em 0.0625em 0.125em rgb(0 0 0 / 0.1), inset 0 -0.125em 0.0625em rgb(0 0 0 / 0.2), inset 0 0.1875em 0.0625em rgb(255 255 255 / 0.3), 0 0.125em 0.125em rgb(0 0 0 / 0.5);
                                        transition: 200ms ease-out;
                                    }
                                    
                                    .calendar-header .button:active {
                                        transform: translate(-50%, -50%) scale(0.95);
                                    }
                                    
                                    .calendar-header .button:hover {
                                        color: red;
                                    }
                                    
                                    .calendar-container input[type="date"] {
                                        font-size: 1.3rem;
                                        color: #333;
                                        padding: 0.8rem;
                                        width: 18.5rem;
                                    }
                                    
                                    #weekly-timetable-content.blurred {
                                        filter: blur(4px);
                                        pointer-events: none;
                                    }
                                    /* Modal Pop Up Buttons */
                                    
                                    .weekly-timetable-modal table,
                                    .weekly-timetable-modal {
                                        position: relative;
                                    }
                                    
                                    .weekly-timetable-modal table .modal-header,
                                    .modal-meal,
                                    .date-cell,
                                    .modal-popUp-btns {
                                        padding: 1.5rem;
                                        font-size: 1.5rem;
                                    }
                                    
                                    .weekly-timetable-modal table .date-cell .date-container {
                                        padding: 0.5rem;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        padding-right: 1.5rem;
                                        padding-left: 0;
                                    }
                                    
                                    .weekly-timetable-modal table .modal-popUp-btns {
                                        padding: 0.01rem;
                                        padding-top: 2rem;
                                        box-shadow: none;
                                    }
                                    
                                    .weekly-timetable-modal .clear-enter-btns {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                    }
                                    
                                    .modal-clear-btn {
                                        align-items: center;
                                        appearance: none;
                                        background-color: #FCFCFD;
                                        border-radius: 4px;
                                        border-width: 0;
                                        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                                        box-sizing: border-box;
                                        color: #36395A;
                                        cursor: pointer;
                                        font-family: 'Cormorant', sans-serif;
                                        display: inline-flex;
                                        height: 48px;
                                        justify-content: center;
                                        line-height: 1;
                                        list-style: none;
                                        overflow: hidden;
                                        padding-left: 2rem;
                                        padding-right: 2rem;
                                        position: relative;
                                        text-align: left;
                                        text-decoration: none;
                                        transition: box-shadow .15s, transform .15s;
                                        -webkit-user-select: none;
                                        user-select: none;
                                        touch-action: manipulation;
                                        white-space: nowrap;
                                        will-change: box-shadow, transform;
                                        font-size: 1.5rem;
                                    }
                                    
                                    .modal-clear-btn:focus {
                                        box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                                    }
                                    
                                    .modal-clear-btn:hover {
                                        box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                                        transform: translateY(-2px);
                                    }
                                    
                                    .modal-clear-btn:active {
                                        box-shadow: #D6D6E7 0 3px 7px inset;
                                        transform: translateY(2px);
                                    }
                                    
                                    .modal-enter-btn {
                                        align-items: center;
                                        appearance: none;
                                        background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
                                        border: 0;
                                        border-radius: 6px;
                                        box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
                                        box-sizing: border-box;
                                        color: #fff;
                                        cursor: pointer;
                                        display: inline-flex;
                                        font-family: 'Cormorant', sans-serif;
                                        height: 48px;
                                        justify-content: center;
                                        line-height: 1;
                                        list-style: none;
                                        overflow: hidden;
                                        padding-left: 2rem;
                                        padding-right: 2rem;
                                        position: relative;
                                        text-align: left;
                                        text-decoration: none;
                                        transition: box-shadow .15s, transform .15s;
                                        -webkit-user-select: none;
                                        user-select: none;
                                        touch-action: manipulation;
                                        white-space: nowrap;
                                        will-change: box-shadow, transform;
                                        font-size: 1.6rem;
                                    }
                                    
                                    .modal-enter-btn:focus {
                                        box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
                                    }
                                    
                                    .modal-enter-btn:hover {
                                        box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
                                        transform: translateY(-2px);
                                    }
                                    
                                    .modal-enter-btn:active {
                                        box-shadow: #3c4fe0 0 3px 7px inset;
                                        transform: translateY(2px);
                                    }
                                    /* Centered modal styling */
                                    
                                    .weekly-timetable-modal {
                                        position: fixed;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        z-index: 9999;
                                        background: white;
                                        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
                                        padding: 20px;
                                        /*display: flex;*/
                                        display: none;
                                    }
                                    /* Optional overlay style (for dim effect) */
                                    
                                    .modal-overlay {
                                        content: "";
                                        position: fixed;
                                        top: 0;
                                        left: 0;
                                        width: 100vw;
                                        height: 100vh;
                                        background: rgba(0, 0, 0, 0.3);
                                        z-index: 9998;
                                    }
                                    /* Modal Close Button */
                                    
                                    .weekly-timetable-modal .close-modal-button {
                                        position: absolute;
                                        right: -4%;
                                        top: -10%;
                                        z-index: 10;
                                        background-color: #fff;
                                        border-radius: 4em;
                                        height: 4em;
                                        width: 4em;
                                        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                                        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                                    }
                                    
                                    .weekly-timetable-modal .close-modal-button:before {
                                        position: absolute;
                                        left: 50%;
                                        top: 50%;
                                        /*font-family: fontAwesome;*/
                                        /*content: "\f00d";*/
                                        font-family: 'Open Sans', sans-serif;
                                        content: "X";
                                        color: #000;
                                        font-size: 2.7em;
                                        transform: translate(-50%, -50%);
                                    }
                                    
                                    .weekly-timetable-modal .close-modal-button:hover:before {
                                        color: #ba3242;
                                        -webkit-transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
                                        -moz-transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
                                        -o-transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
                                        transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
                                        -webkit-transform: translate(-55%, -48%) rotate(-0.25turn);
                                        transform: translate(-55%, -48%) rotate(-0.25turn);
                                        /*Had to bump it b/c the dimensions are not square*/
                                    }
                                    /* School Meal Plan Css */
                                    
                                    .school-lunch-plan-parent-container {
                                        width: 100%;
                                        min-height: 100vh;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    
                                    .school-lunch-plan-card-container {
                                        width: 100%;
                                        min-height: 100vh;
                                        /*display: flex;*/
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        background-color: rgba(255, 255, 255, 0.5);
                                        padding: 1rem;
                                        overflow-x: hidden;
                                    }
                                    
                                    .school-lunch-plan-card {
                                        width: 88%;
                                        position: relative;
                                        padding: 1rem;
                                        background-color: whitesmoke;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
                                        overflow: hidden;
                                    }
                                    
                                    @media screen and (max-width: 768px) {
                                        .school-lunch-plan-card-container {
                                            padding: 2rem;
                                        }
                                        .school-lunch-plan-card {
                                            width: 80%;
                                        }
                                    }
                                    
                                    .school-lunch-plan-card .image-container,
                                    .school-lunch-plan-card .text-container {
                                        position: relative;
                                        width: 100%;
                                    }
                                    
                                    .school-lunch-plan-card .image-container {
                                        height: 20%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        background: url(images/gray-abstract-wireframe-technolo.jpg);
                                        background-size: cover;
                                        position: relative;
                                        /* For absolute positioning of Bento Lunchbox and School Bag */
                                    }
                                    
                                    .school-lunch-plan-card .image-container .header {
                                        height: 15%;
                                        font-family: 'Mea Culpa', 'Cormorant', sans-serif;
                                        font-weight: 400;
                                        font-size: 4rem;
                                        padding: 1rem;
                                    }
                                    
                                    .school-lunch-plan-card .image-container .header .Day-view-user-guide {
                                        font-family: 'Cormorant', sans-serif;
                                        font-weight: 300;
                                        font-size: 1.4rem;
                                        text-align: center;
                                    }
                                    
                                    .school-lunch-plan-card .image-container img {
                                        width: 15%;
                                        aspect-ratio: 1/1;
                                    }
                                    /* Bento Lunchbox positioned at the top-left corner and made larger */
                                    
                                    .school-lunch-plan-card .image-container .circle-img {
                                        position: absolute;
                                        top: -45px;
                                        /* Moves Bento Lunchbox slightly off the top */
                                        left: -45px;
                                        /* Moves Bento Lunchbox slightly off the left */
                                        width: 20vw;
                                        aspect-ratio: 1/1;
                                        border-radius: 50%;
                                        border: 3px solid grey;
                                        object-fit: cover;
                                        z-index: 2;
                                        /* Ensures it's above the background image */
                                    }
                                    /* Main Body Css */
                                    
                                    .school-lunch-plan-card .text-container {
                                        height: 80%;
                                        padding: 1rem;
                                        width: 90%;
                                        position: relative;
                                        display: flex;
                                        flex-direction: column;
                                    }
                                    
                                    .school-lunch-plan-card .text-container .day-selector-container {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 90%;
                                        position: relative;
                                        left: 5%;
                                    }
                                    /* Default state for all sections */
                                    
                                    .school-lunch-plan-card .text-container .meal-sections,
                                    /*.school-lunch-plan-card .text-container .break-system,*/
                                    
                                    .school-lunch-plan-card .text-container .meal-categories {
                                        display: none;
                                        /* Initially hidden */
                                        opacity: 0;
                                        /* Make them invisible */
                                        visibility: hidden;
                                        /* Ensure they are hidden from interaction */
                                        transition: opacity 0.5s ease, visibility 0.5s ease;
                                        /* Smooth fade transition */
                                    }
                                    /* Specific layout styles */
                                    
                                    .school-lunch-plan-card .text-container .meal-sections.flex,
                                    .school-lunch-plan-card .text-container .break-system.flex,
                                    .school-lunch-plan-card .text-container .meal-categories.grid {
                                        opacity: 1;
                                        /* Fully visible */
                                        visibility: visible;
                                        /* Ensure they are interactable */
                                    }
                                    
                                    .school-lunch-plan-card .text-container .layout-selection {
                                        width: 98%;
                                        display: flex;
                                        flex-direction: column;
                                        padding: 1rem;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    
                                    .school-lunch-plan-card .text-container .layout-selection .selection-question {
                                        width: 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        flex-wrap: wrap;
                                        font-size: 1.3rem;
                                    }
                                    
                                    .school-lunch-plan-card .text-container .layout-selection .layout-options {
                                        width: 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        flex-wrap: wrap;
                                        gap: 2rem;
                                        padding: 0.5rem;
                                    }
                                    /* Layout Selection Radio Button */
                                    
                                    .meal-selection-layout-radio-btn label {
                                        display: flex;
                                        align-items: flex-start;
                                        text-align: left;
                                        min-width: 140px;
                                        justify-content: space-between;
                                        padding: 11px;
                                        border: none;
                                        border-radius: 6px;
                                        box-shadow: 0 0 0 1px #d8dee4;
                                        transition: all 0.2s ease;
                                        font-size: 1.2rem;
                                    }
                                    
                                    .meal-selection-layout-radio-btn label:not(:has(input:disabled)):hover {
                                        background: #f5f6f8;
                                    }
                                    
                                    .meal-selection-layout-radio-btn label:has(input:disabled) {
                                        opacity: .8;
                                        cursor: not-allowed;
                                        background: #f5f6f8;
                                    }
                                    
                                    .meal-selection-layout-radio-btn label:has(input:checked) {
                                        box-shadow: 0 0 0 1.5px rgb(37 99 235), 0 0 0 1px #d8dee4;
                                    }
                                    
                                    .meal-selection-layout-radio-btn label:has(input:focus) {
                                        box-shadow: 0 0 0 1.5px rgb(37 99 235), 0 0 0 4px rgb(191 219 254), 0 0 0 1px #d8dee4;
                                    }
                                    
                                    .meal-selection-layout-radio-btn label .inputAndLeftText {
                                        display: flex;
                                        gap: .75em;
                                    }
                                    
                                    .meal-selection-layout-radio-btn label .inputAndLeftText div {
                                        color: rgb(55 65 81);
                                        line-height: 1.25rem;
                                        display: flex;
                                        flex-direction: column;
                                    }
                                    
                                    .meal-selection-layout-radio-btn label .title {
                                        font-weight: 600;
                                    }
                                    
                                    .meal-selection-layout-radio-btn label .desc {
                                        color: rgb(94, 99, 109);
                                        font-size: 1.1rem;
                                    }
                                    
                                    .meal-selection-layout-radio-btn input {
                                        color: rgb(37 99 235);
                                    }
                                    
                                    .meal-selection-layout-radio-btn input {
                                        -webkit-appearance: none;
                                        -moz-appearance: none;
                                        appearance: none;
                                        padding: 0;
                                        -webkit-print-color-adjust: exact;
                                        print-color-adjust: exact;
                                        display: inline-block;
                                        vertical-align: middle;
                                        background-origin: border-box;
                                        -webkit-user-select: none;
                                        -moz-user-select: none;
                                        user-select: none;
                                        border: 1px solid rgb(209 213 219);
                                        box-shadow: 0 1px 2px 0 #0000000d;
                                        border-radius: 9999px;
                                        width: 1rem;
                                        height: 1rem;
                                        margin: 2px 0 0;
                                    }
                                    
                                    .meal-selection-layout-radio-btn input:checked {
                                        border-color: #0000;
                                        background-color: currentColor;
                                        background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjMiLz48L3N2Zz4=);
                                    }
                                    
                                    .meal-selection-layout-radio-btn input:focus {
                                        box-shadow: 0 0 0 3px rgb(191 219 254), 0 1px 2px 0 #0000000d;
                                    }
                                    
                                    .meal-selection-layout-radio-btn input:disabled {
                                        color: rgb(156 163 175);
                                    }
                                    /* General Menu Layout Css */
                                    
                                    .school-lunch-plan-card .meal-sections.flex {
                                        display: flex;
                                    }
                                    
                                    .school-lunch-plan-card .meal-sections {
                                        position: relative;
                                        width: 100%;
                                        padding: 3rem 2rem;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        gap: 4rem;
                                    }
                                    
                                    .school-lunch-plan-card .meal-sections .appetizer,
                                    .school-lunch-plan-card .meal-sections .main-course,
                                    .school-lunch-plan-card .meal-sections .laitage,
                                    .school-lunch-plan-card .meal-sections .dessert,
                                    .school-lunch-plan-card .meal-sections .snacks {
                                        width: 90%;
                                        min-height: 10rem;
                                        box-shadow: rgba(50, 50, 93, 0.25) 0px 3.125rem 6.25rem -1.25rem, rgba(0, 0, 0, 0.3) 0px 1.875rem 3.75rem -1.875rem, rgba(10, 37, 64, 0.35) 0px -0.125rem 0.375rem 0px inset;
                                        position: relative;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    /* Position text closer to the top boundary */
                                    
                                    .school-lunch-plan-card .meal-sections .appetizer::before,
                                    .school-lunch-plan-card .meal-sections .main-course::before,
                                    .school-lunch-plan-card .meal-sections .laitage::before,
                                    .school-lunch-plan-card .meal-sections .dessert::before,
                                    .school-lunch-plan-card .meal-sections .snacks::before {
                                        content: attr(data-title);
                                        font-size: 2.5rem;
                                        color: rgb(0, 0, 0);
                                        position: absolute;
                                        top: -1.8rem;
                                        /* Adjust to move the text closer to the top */
                                        left: 50%;
                                        transform: translateX(-50%);
                                        /* Center the text horizontally */
                                        z-index: 3;
                                        background-color: rgba(255, 255, 255, 0.75);
                                        box-shadow: rgba(50, 50, 93, 0.25) 0px 3.125rem 6.25rem -1.25rem, rgba(0, 0, 0, 0.3) 0px 1.875rem 3.75rem -1.875rem, rgba(10, 37, 64, 0.35) 0px -0.125rem 0.375rem 0px inset;
                                        padding: 0.8rem;
                                        font-family: 'Mea Culpa', 'Roboto', sans-serif;
                                    }
                                    /* Image positioning */
                                    
                                    .school-lunch-plan-card .meal-sections .appetizer img,
                                    .school-lunch-plan-card .meal-sections .main-course img,
                                    .school-lunch-plan-card .meal-sections .laitage img,
                                    .school-lunch-plan-card .meal-sections .dessert img,
                                    .school-lunch-plan-card .meal-sections .snacks img {
                                        position: absolute;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        z-index: 2;
                                        width: auto;
                                    }
                                    
                                    .school-lunch-plan-card .meal-sections .appetizer img {
                                        height: 8rem;
                                        /* Set height of image */
                                        left: -3.5rem;
                                        /* Image on the left boundary of breakfast */
                                    }
                                    
                                    @media screen and (max-width: 748px) {
                                        .school-lunch-plan-card .meal-sections .appetizer img {
                                            height: 7rem;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 537px) {
                                        .school-lunch-plan-card .meal-sections .appetizer img {
                                            height: 7rem;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 510px) {
                                        .school-lunch-plan-card .meal-sections .appetizer img {
                                            height: 6rem;
                                        }
                                    }
                                    
                                    .school-lunch-plan-card .meal-sections .main-course img {
                                        height: 12rem;
                                        right: -2rem;
                                        /* Image on the right boundary of lunch */
                                    }
                                    
                                    @media screen and (max-width: 768px) {
                                        .school-lunch-plan-card .meal-sections .main-course img {
                                            height: 10rem;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 619px) {
                                        .school-lunch-plan-card .meal-sections .main-course img {
                                            height: 9rem;
                                        }
                                    }
                                    
                                    .school-lunch-plan-card .meal-sections .laitage img {
                                        height: 9rem;
                                        left: -2rem;
                                        /* Image on the left boundary of snacks */
                                    }
                                    
                                    .school-lunch-plan-card .meal-sections .dessert img {
                                        height: 6rem;
                                        /* Set height of image */
                                        right: -2.5rem;
                                        /* Image on the right boundary of dinner */
                                    }
                                    
                                    @media screen and (max-width: 748px) {
                                        .school-lunch-plan-card .meal-sections .dessert img {
                                            height: 5rem;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 541px) {
                                        .school-lunch-plan-card .meal-sections .laitage img {
                                            height: 8rem;
                                        }
                                        .school-lunch-plan-card .meal-sections .dessert img {
                                            height: 4rem;
                                        }
                                        .school-lunch-plan-card .meal-sections .snacks img {
                                            height: 9rem;
                                        }
                                    }
                                    
                                    .school-lunch-plan-card .meal-sections .snacks img {
                                        height: 10rem;
                                        left: -3rem;
                                    }
                                    
                                    @media screen and (max-width: 555px) {
                                        .school-lunch-plan-card .meal-sections .snacks img {
                                            height: 9rem;
                                            left: -4rem;
                                        }
                                    }
                                    
                                    .school-lunch-plan-card .meal-sections .appetizer p,
                                    .school-lunch-plan-card .meal-sections .main-course p,
                                    .school-lunch-plan-card .meal-sections .laitage p,
                                    .school-lunch-plan-card .meal-sections .dessert p,
                                    .school-lunch-plan-card .meal-sections .snacks p {
                                        position: relative;
                                        color: #000000;
                                        padding: 0.5rem;
                                        padding-top: 1rem;
                                        font-size: 1.65rem;
                                        line-height: 1.7;
                                        text-align: center;
                                    }
                                    
                                    @media screen and (max-width: 768px) {
                                        .school-lunch-plan-card .meal-sections .appetizer p {
                                            padding-top: 5rem;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 736px) {
                                        .school-lunch-plan-card .meal-sections .laitage p {
                                            padding-top: 5rem;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 418px) {
                                        .school-lunch-plan-card .meal-sections .laitage p {
                                            padding-top: 10rem;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 619px) {
                                        .school-lunch-plan-card .meal-sections .main-course p {
                                            padding-top: 5rem;
                                        }
                                    }
                                    
                                    @media screen and (max-width: 574px) {
                                        .school-lunch-plan-card .meal-sections .snacks p {
                                            padding-top: 5rem;
                                        }
                                    }
                                    
                                    .school-lunch-plan-card .meal-sections .appetizer .text-area,
                                    .school-lunch-plan-card .meal-sections .main-course .text-area,
                                    .school-lunch-plan-card .meal-sections .laitage .text-area,
                                    .school-lunch-plan-card .meal-sections .dessert .text-area,
                                    .school-lunch-plan-card .meal-sections .snacks .text-area {
                                        position: relative;
                                        width: 50%;
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        align-items: center;
                                        padding: 1rem 2rem;
                                    }
                                    /* Break System Css */
                                    /*.school-lunch-plan-card .break-system.flex {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        align-items: center;
                                        gap: 4rem;
                                        row-gap: 9rem;
                                    }*/
                                    
                                    .school-lunch-plan-card .break-system {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        align-items: center;
                                        gap: 4rem;
                                        row-gap: 9rem;
                                    }
                                    /* To be removed when the options layout is in use */
                                    
                                    .school-lunch-plan-card .break-system {
                                        position: relative;
                                        width: 100%;
                                        padding: 6rem 2rem;
                                    }
                                    
                                    .school-lunch-plan-card .break-system .recess,
                                    .school-lunch-plan-card .break-system .lunch {
                                        width: 30rem;
                                        min-height: 10rem;
                                        box-shadow: rgba(50, 50, 93, 0.25) 0px 3.125rem 6.25rem -1.25rem, rgba(0, 0, 0, 0.3) 0px 1.875rem 3.75rem -1.875rem, rgba(10, 37, 64, 0.35) 0px -0.125rem 0.375rem 0px inset;
                                        position: relative;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        padding-top: 4rem;
                                    }
                                    
                                    @media screen and (max-width: 1292px) {
                                        .school-lunch-plan-card .break-system .recess {
                                            margin-top: 2rem;
                                        }
                                    }
                                    
                                    .school-lunch-plan-card .break-system .recess .meal-image,
                                    .school-lunch-plan-card .break-system .lunch .meal-image {
                                        position: absolute;
                                        top: -7rem;
                                        /* Adjust to move the text closer to the top */
                                        left: 50%;
                                        transform: translateX(-50%);
                                        /* Center the text horizontally */
                                        z-index: 3;
                                        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
                                        background: linear-gradient(0deg, #ddd, #fff);
                                        padding: 0.5rem;
                                        width: 12rem;
                                        height: 12rem;
                                        border-radius: 50%;
                                    }
                                    
                                    .school-lunch-plan-card .break-system .recess .meal-image .lunchbox-image,
                                    .school-lunch-plan-card .break-system .lunch .meal-image .lunchbox-image {
                                        width: 100%;
                                        height: 100%;
                                        border-radius: 50%;
                                    }
                                    
                                    .school-lunch-plan-card .break-system .recess::before,
                                    .school-lunch-plan-card .break-system .lunch::before {
                                        content: attr(data-title);
                                        font-size: 2.5rem;
                                        color: rgb(0, 0, 0);
                                        position: absolute;
                                        left: -11%;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        z-index: 3;
                                        width: 8rem;
                                        background-color: rgba(255, 255, 255, 0.75);
                                        box-shadow: rgba(50, 50, 93, 0.25) 0px 3.125rem 6.25rem -1.25rem, rgba(0, 0, 0, 0.3) 0px 1.875rem 3.75rem -1.875rem, rgba(10, 37, 64, 0.35) 0px -0.125rem 0.375rem 0px inset;
                                        padding: 0.8rem;
                                        padding-left: 1.4rem;
                                        padding-right: 0.6rem;
                                        font-family: 'Mea Culpa', 'Roboto', sans-serif;
                                    }
                                    
                                    .school-lunch-plan-card .break-system .recess .text-area,
                                    .school-lunch-plan-card .break-system .lunch .text-area {
                                        position: relative;
                                        left: 8%;
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        align-items: center;
                                        padding: 1rem 4rem;
                                    }
                                    
                                    @media screen and (max-width: 480px) {
                                        .school-lunch-plan-card .break-system .recess .text-area,
                                        .school-lunch-plan-card .break-system .lunch .text-area {
                                            left: 17%;
                                        }
                                    }
                                    
                                    .school-lunch-plan-card .break-system .recess .text-area p,
                                    .school-lunch-plan-card .break-system .lunch .text-area p {
                                        position: relative;
                                        color: #000000;
                                        padding: 0.5rem;
                                        padding-top: 1.5rem;
                                        font-size: 1.65rem;
                                        line-height: 1.7;
                                        text-align: left;
                                        padding-left: 2rem;
                                    }
                                    /* Meal Categories Css */
                                    
                                    .school-lunch-plan-card .meal-categories.grid {
                                        display: grid;
                                        grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
                                        gap: 3rem;
                                    }
                                    
                                    .school-lunch-plan-card .meal-categories {
                                        position: relative;
                                        width: 100%;
                                        margin-bottom: 2.5rem;
                                        /* 40px / 16 = 2.5rem */
                                    }
                                    
                                    .school-lunch-plan-card .meal-categories .card {
                                        background-color: #fff;
                                        border-radius: 0.5rem;
                                        /* 8px / 16 = 0.5rem */
                                        overflow: hidden;
                                        box-shadow: rgba(50, 50, 93, 0.25) 0px 3.125rem 6.25rem -1.25rem, rgba(0, 0, 0, 0.3) 0px 1.875rem 3.75rem -1.875rem, rgba(10, 37, 64, 0.35) 0px -0.125rem 0.375rem 0px inset;
                                        padding: 1.25rem;
                                        /* 20px / 16 = 1.25rem */
                                        min-width: 12rem;
                                        min-height: 5rem;
                                        text-align: center;
                                        display: flex;
                                        flex-direction: column;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        align-items: center;
                                        transition: transform 0.3s ease, box-shadow 0.3s ease;
                                        /* Smooth transition for hover effect */
                                    }
                                    
                                    .school-lunch-plan-card .meal-categories .card:hover {
                                        transform: translateY(-0.5rem);
                                        /* Lift card by 8px */
                                        box-shadow: rgba(50, 50, 93, 0.4) 0px 6.25rem 12.5rem -2.5rem, rgba(0, 0, 0, 0.4) 0px 3.75rem 7.5rem -3.75rem, rgba(10, 37, 64, 0.4) 0px -0.25rem 0.625rem 0px inset;
                                    }
                                    
                                    .school-lunch-plan-card .meal-categories .card h1 {
                                        text-align: center;
                                        width: 90%;
                                        font-size: 2rem;
                                        display: flex;
                                        justify-content: center;
                                        flex-wrap: wrap;
                                    }
                                    
                                    .school-lunch-plan-card .meal-categories .card li {
                                        text-align: left;
                                        font-size: 1.6rem;
                                        color: black;
                                        font-weight: 450;
                                        padding: 0.3rem;
                                    }
                                    
                                    .school-lunch-weekly-plan-card table .style-preserver-cell {
                                        color: black;
                                        font-size: 1.4rem;
                                        font-weight: 300;
                                        text-align: left;
                                    }
                                    /* Saved Meal Plan Css */
                                    
                                    .plan-nav-btn {
                                        all: unset;
                                        cursor: pointer;
                                        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                                        position: relative;
                                        border-radius: 100em;
                                        background-color: rgba(0, 0, 0, 0.75);
                                        box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25), 0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
                                    }
                                    
                                    .plan-nav-btn::after {
                                        content: "";
                                        position: absolute;
                                        z-index: 0;
                                        width: calc(100% + 0.3em);
                                        height: calc(100% + 0.3em);
                                        top: -0.15em;
                                        left: -0.15em;
                                        border-radius: inherit;
                                        background: linear-gradient( -135deg, rgba(5, 5, 5, 0.5), transparent 20%, transparent 100%);
                                        filter: blur(0.0125em);
                                        opacity: 0.25;
                                        mix-blend-mode: multiply;
                                    }
                                    
                                    .plan-nav-btn .plan-nav-btn-outer {
                                        position: relative;
                                        z-index: 1;
                                        border-radius: inherit;
                                        transition: box-shadow 300ms ease;
                                        will-change: box-shadow;
                                        box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1), 0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5), 0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
                                    }
                                    
                                    .plan-nav-btn:hover .plan-nav-btn-outer {
                                        box-shadow: 0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5), 0 0 0 0 rgba(5, 5, 5, 0.25);
                                    }
                                    
                                    .plan-nav-btn-inner {
                                        --inset: 0.035em;
                                        position: relative;
                                        z-index: 1;
                                        border-radius: inherit;
                                        padding: 1em 1.5em;
                                        background-image: linear-gradient( 135deg, rgba(230, 230, 230, 1), rgba(180, 180, 180, 1));
                                        transition: box-shadow 300ms ease, clip-path 250ms ease, background-image 250ms ease, transform 250ms ease;
                                        will-change: box-shadow, clip-path, background-image, transform;
                                        overflow: clip;
                                        clip-path: inset(0 0 0 0 round 100em);
                                        box-shadow: /* 1 */
                                        0 0 0 0 inset rgba(5, 5, 5, 0.1), /* 2 */
                                        -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25), /* 3 */
                                        0 0 0 0 inset rgba(5, 5, 5, 0.1), /* 4 */
                                        0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25), /* 5 */
                                        0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1), /* 6 */
                                        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), /* 7 */
                                        -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
                                    }
                                    
                                    .plan-nav-btn:hover .plan-nav-btn-inner {
                                        clip-path: inset( clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 100em);
                                        box-shadow: /* 1 */
                                        0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75), /* 2 */
                                        -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5), /* 3 */
                                        0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5), /* 4 */
                                        0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15), /* 5 */
                                        0 0 0 0 inset rgba(255, 255, 255, 1), /* 6 */
                                        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), /* 7 */
                                        -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
                                    }
                                    
                                    .plan-nav-btn .plan-nav-btn-inner span {
                                        position: relative;
                                        z-index: 4;
                                        font-family: 'Open Sans', sans-serif;
                                        letter-spacing: -0.05em;
                                        font-weight: 500;
                                        color: rgba(0, 0, 0, 0);
                                        background-image: linear-gradient( 135deg, rgba(25, 25, 25, 1), rgba(75, 75, 75, 1));
                                        -webkit-background-clip: text;
                                        background-clip: text;
                                        transition: transform 250ms ease;
                                        display: block;
                                        will-change: transform;
                                        text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
                                        -webkit-user-select: none;
                                        -moz-user-select: none;
                                        -ms-user-select: none;
                                        user-select: none;
                                    }
                                    
                                    .plan-nav-btn:hover .plan-nav-btn-inner span {
                                        transform: scale(0.975);
                                    }
                                    
                                    .plan-nav-btn:active .plan-nav-btn-inner {
                                        transform: scale(0.975);
                                    }
                                    
                                    .plan-nav-user-guide {
                                        font-size: 1.28rem;
                                        display: flex;
                                        justify-content: center;
                                        width: 80%;
                                        flex-wrap: wrap;
                                    }
                                    /* Calendar CSS */
                                    
                                    .plan-nav-calendar {
                                        background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
                                        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
                                        padding: 2rem;
                                        padding-left: 1rem;
                                        margin-top: 1.8rem;
                                        border-radius: 20px;
                                        width: 80%;
                                    }
                                    
                                    .plan-nav-calendar .header {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        margin-bottom: 1rem;
                                    }
                                    
                                    .plan-nav-calendar .header button {
                                        background: #e0e5ec;
                                        border: none;
                                        box-shadow: 4px 4px 8px #babecc, -4px -4px 8px #ffffff;
                                        border-radius: 10px;
                                        width: 35px;
                                        height: 35px;
                                        font-size: 1.2rem;
                                        cursor: pointer;
                                        transition: all 0.2s ease;
                                    }
                                    
                                    .plan-nav-calendar .header button:active {
                                        box-shadow: inset 4px 4px 8px #babecc, inset -4px -4px 8px #ffffff;
                                    }
                                    
                                    .plan-nav-calendar .month-year {
                                        font-size: 1.4rem;
                                        font-weight: bold;
                                    }
                                    
                                    .plan-nav-calendar .weekdays,
                                    .plan-nav-calendar .days {
                                        display: grid;
                                        grid-template-columns: repeat(7, 1fr);
                                        text-align: center;
                                    }
                                    
                                    .plan-nav-calendar .weekdays {
                                        padding-bottom: 1rem;
                                        gap: 0.5rem;
                                    }
                                    
                                    .plan-nav-calendar .days {
                                        gap: 0.75rem;
                                    }
                                    
                                    .plan-nav-calendar .weekdays div {
                                        font-weight: bold;
                                        color: #555;
                                    }
                                    
                                    .plan-nav-calendar .days button {
                                        background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
                                        border: 1px solid #8F9092;
                                        transition: all 0.2s ease;
                                        border-radius: 5px;
                                        padding: 0.7rem 0.22rem;
                                        box-shadow: 6px 6px 8px #babecc, -6px -6px 8px #ffffff;
                                        font-size: 1rem;
                                        cursor: pointer;
                                        font-family: 'Roboto', sans-serif;
                                        font-weight: 480;
                                        color: #606060;
                                        text-shadow: 0 1px #fff;
                                    }
                                    
                                    .plan-nav-calendar .days button:hover {
                                        box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
                                    }
                                    
                                    .plan-nav-calendar .days button:active {
                                        box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
                                    }
                                    
                                    .plan-nav-calendar .days button:focus {
                                        box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
                                    }
                                    
                                    .plan-nav-calendar .empty {
                                        visibility: hidden;
                                    }
                                    /* Miniature Css */
                                    /* Miniature Family Plan */
                                    
                                    .meal-plan-categories .categories-container .family-option .miniature-family-plan-body-div {
                                        width: 80rem;
                                        background-image: url('images/white-wall.jpg');
                                        background-size: cover;
                                        display: flex;
                                        flex-direction: column;
                                        overflow-x: hidden;
                                        transform: scale(0.25);
                                        /* Shrinks everything to 25% */
                                        transform-origin: top left;
                                        position: relative;
                                        /*top: -10rem;
    left: 2rem;*/
                                        z-index: 2;
                                        box-shadow: rgba(0, 0, 0, 0.534) 0px 3px 6px, rgba(0, 0, 0, 0.83) 0px 3px 6px;
                                    }
                                    
                                    .mini-family-plan-card-container {
                                        display: flex;
                                        opacity: 1;
                                        visibility: visible;
                                        display: flex;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .mini-family-plan-card-container .breakfast-section img,
                                    .meal-plan-categories .categories-container .category-display .mini-family-plan-card-container .lunch-section img,
                                    .meal-plan-categories .categories-container .category-display .mini-family-plan-card-container .snacks-section img,
                                    .meal-plan-categories .categories-container .category-display .mini-family-plan-card-container .dinner-section img {
                                        height: 5rem;
                                        /* Set height of image */
                                        width: auto;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .mini-family-plan-card-container .lunch-section img {
                                        height: 4rem;
                                    }
                                    
                                    .meal-plan-categories .categories-container .category-display .mini-family-plan-card-container .snacks-section img {
                                        height: 7rem;
                                    }
                                    /* Miniature School Plan */
                                    
                                    .meal-plan-categories .categories-container .school-option .miniature-school-plan-body-div {
                                        width: 80rem;
                                        background-image: url('images/white-wall.jpg');
                                        background-size: cover;
                                        display: flex;
                                        flex-direction: column;
                                        overflow: hidden;
                                        transform: scale(0.25);
                                        /* Shrinks everything to 25% */
                                        transform-origin: top left;
                                        position: relative;
                                        /*top: 0;
    left: 0;*/
                                        z-index: 2;
                                        box-shadow: rgba(0, 0, 0, 0.534) 0px 3px 6px, rgba(0, 0, 0, 0.83) 0px 3px 6px;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-parent-container {
                                        width: 100%;
                                        min-height: 100vh;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card-container {
                                        width: 100%;
                                        min-height: 100vh;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        background-color: rgba(255, 255, 255, 0.5);
                                        padding: 1rem;
                                        overflow-x: hidden;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card {
                                        width: 95%;
                                        position: relative;
                                        padding: 1rem;
                                        background-color: whitesmoke;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
                                        overflow: hidden;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .image-container,
                                    .miniature-school-plan-body-div .school-lunch-plan-card .text-container {
                                        position: relative;
                                        width: 100%;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .image-container {
                                        height: 20%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        background: url(images/gray-abstract-wireframe-technolo.jpg);
                                        background-size: cover;
                                        position: relative;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .image-container .header {
                                        height: 15%;
                                        font-family: 'Mea Culpa', 'Cormorant', sans-serif;
                                        font-weight: 400;
                                        font-size: 7rem;
                                        padding: 1rem;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .image-container img {
                                        width: 15%;
                                        aspect-ratio: 1/1;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .image-container .circle-img {
                                        position: absolute;
                                        top: -45px;
                                        left: -45px;
                                        width: 12vw;
                                        aspect-ratio: 1/1;
                                        border-radius: 50%;
                                        border: 3px solid grey;
                                        object-fit: cover;
                                        z-index: 2;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .text-container {
                                        height: 80%;
                                        padding: 1rem;
                                        width: 95%;
                                        position: relative;
                                        display: flex;
                                        flex-direction: column;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .text-container .layout-selection {
                                        width: 98%;
                                        display: flex;
                                        flex-direction: column;
                                        padding: 1rem;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .text-container .layout-selection .selection-question {
                                        width: 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        flex-wrap: nowrap;
                                        font-size: 1.5rem;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .text-container .layout-selection .layout-options {
                                        width: 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        flex-wrap: nowrap;
                                        gap: 2rem;
                                        padding: 0.5rem;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn label {
                                        display: flex;
                                        align-items: flex-start;
                                        text-align: left;
                                        min-width: 140px;
                                        justify-content: space-between;
                                        padding: 11px;
                                        border: none;
                                        border-radius: 6px;
                                        box-shadow: 0 0 0 1px #d8dee4;
                                        transition: all 0.2s ease;
                                        font-size: 1.5rem;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn label:not(:has(input:disabled)):hover {
                                        background: #f5f6f8;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn label:has(input:disabled) {
                                        opacity: .8;
                                        cursor: not-allowed;
                                        background: #f5f6f8;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn label:has(input:checked) {
                                        box-shadow: 0 0 0 1.5px rgb(37 99 235), 0 0 0 1px #d8dee4;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn label:has(input:focus) {
                                        box-shadow: 0 0 0 1.5px rgb(37 99 235), 0 0 0 4px rgb(191 219 254), 0 0 0 1px #d8dee4;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn label .inputAndLeftText {
                                        display: flex;
                                        gap: .75em;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn label .inputAndLeftText div {
                                        color: rgb(55 65 81);
                                        line-height: 1.25rem;
                                        display: flex;
                                        flex-direction: column;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn label .title {
                                        font-weight: 600;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn label .desc {
                                        color: rgb(94, 99, 109);
                                        font-size: 1.1rem;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn input {
                                        color: rgb(37 99 235);
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn input {
                                        -webkit-appearance: none;
                                        -moz-appearance: none;
                                        appearance: none;
                                        padding: 0;
                                        -webkit-print-color-adjust: exact;
                                        print-color-adjust: exact;
                                        display: inline-block;
                                        vertical-align: middle;
                                        background-origin: border-box;
                                        -webkit-user-select: none;
                                        -moz-user-select: none;
                                        user-select: none;
                                        border: 1px solid rgb(209 213 219);
                                        box-shadow: 0 1px 2px 0 #0000000d;
                                        border-radius: 9999px;
                                        width: 1rem;
                                        height: 1rem;
                                        margin: 2px 0 0;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn input:checked {
                                        border-color: #0000;
                                        background-color: currentColor;
                                        background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGnpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjMiLz48L3N2Zz4=);
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn input:focus {
                                        box-shadow: 0 0 0 3px rgb(191 219 254), 0 1px 2px 0 #0000000d;
                                    }
                                    
                                    .miniature-school-plan-body-div .meal-selection-layout-radio-btn input:disabled {
                                        color: rgb(156 163 175);
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system {
                                        position: relative;
                                        display: flex;
                                        flex-wrap: nowrap;
                                        justify-content: center;
                                        align-items: center;
                                        gap: 4rem;
                                        row-gap: 9rem;
                                        width: 100%;
                                        padding: 6rem 2rem;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .recess,
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .lunch {
                                        width: 30rem;
                                        min-height: 10rem;
                                        box-shadow: rgba(50, 50, 93, 0.25) 0px 3.125rem 6.25rem -1.25rem, rgba(0, 0, 0, 0.3) 0px 1.875rem 3.75rem -1.875rem, rgba(10, 37, 64, 0.35) 0px -0.125rem 0.375rem 0px inset;
                                        position: relative;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;
                                        padding-top: 4rem;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .recess .meal-image,
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .lunch .meal-image {
                                        position: absolute;
                                        top: -7rem;
                                        left: 50%;
                                        transform: translateX(-50%);
                                        z-index: 3;
                                        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
                                        background: linear-gradient(0deg, #ddd, #fff);
                                        padding: 0.5rem;
                                        width: 12rem;
                                        height: 12rem;
                                        border-radius: 50%;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .recess .meal-image .lunchbox-image,
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .lunch .meal-image .lunchbox-image {
                                        width: 100%;
                                        height: 100%;
                                        border-radius: 50%;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .recess::before,
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .lunch::before {
                                        content: attr(data-title);
                                        font-size: 3.5rem;
                                        color: rgb(0, 0, 0);
                                        position: absolute;
                                        left: -11%;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        z-index: 3;
                                        width: 8rem;
                                        background-color: rgba(255, 255, 255, 0.75);
                                        box-shadow: rgba(50, 50, 93, 0.25) 0px 3.125rem 6.25rem -1.25rem, rgba(0, 0, 0, 0.3) 0px 1.875rem 3.75rem -1.875rem, rgba(10, 37, 64, 0.35) 0px -0.125rem 0.375rem 0px inset;
                                        padding: 0.8rem;
                                        padding-left: 1.4rem;
                                        padding-right: 0.6rem;
                                        font-family: 'Mea Culpa', 'Roboto', sans-serif;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .recess .text-area,
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .lunch .text-area {
                                        position: relative;
                                        left: 13%;
                                        display: flex;
                                        flex-wrap: nowrap;
                                        justify-content: center;
                                        align-items: center;
                                        padding: 1rem 4rem;
                                    }
                                    
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .recess .text-area p,
                                    .miniature-school-plan-body-div .school-lunch-plan-card .break-system .lunch .text-area p {
                                        position: relative;
                                        color: #000000;
                                        padding: 0.5rem;
                                        padding-top: 1.5rem;
                                        font-size: 1.65rem;
                                        line-height: 1.7;
                                        text-align: center;
                                    }
                                    /*Save Document Button*/
                                    
                                    .save-document {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        width: auto;
                                        padding: 1rem;
                                        gap: 2rem;
                                    }
                                    
                                    .Documents-btn,
                                    .Documents-print-btn {
                                        display: flex;
                                        align-items: center;
                                        justify-content: flex-start;
                                        width: fit-content;
                                        height: 4rem;
                                        padding: 0.5rem 1.2rem;
                                        border-radius: 5px;
                                        gap: 1.5rem;
                                        cursor: pointer;
                                        transition: all 0.3s;
                                    }
                                    
                                    .Documents-btn {
                                        background-color: rgb(49, 49, 83);
                                        border: none;
                                    }
                                    
                                    .Documents-print-btn {
                                        border: 0.5px solid rgb(49, 49, 83);
                                        background-color: rgba(49, 49, 83, 0.26);
                                    }
                                    
                                    .folderContainer {
                                        width: 3rem;
                                        height: fit-content;
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: flex-end;
                                        position: relative;
                                    }
                                    
                                    .fileBack {
                                        z-index: 1;
                                        width: 80%;
                                        height: auto;
                                    }
                                    
                                    .filePage {
                                        width: 50%;
                                        height: auto;
                                        position: absolute;
                                        z-index: 2;
                                        transition: all 0.3s ease-out;
                                    }
                                    
                                    .fileFront {
                                        width: 85%;
                                        height: auto;
                                        position: absolute;
                                        z-index: 3;
                                        opacity: 0.95;
                                        transform-origin: bottom;
                                        transition: all 0.3s ease-out;
                                    }
                                    
                                    .save-doc-text,
                                    .print-doc-text {
                                        font-size: 1.8rem;
                                        font-weight: 600;
                                        letter-spacing: 0.5px;
                                        font-family: 'Cormorant';
                                    }
                                    
                                    .save-doc-text {
                                        color: white;
                                    }
                                    
                                    .print-doc-text {
                                        color: rgb(49, 49, 83);
                                    }
                                    
                                    .Documents-btn:hover .filePage {
                                        transform: translateY(-5px);
                                    }
                                    
                                    .Documents-btn:hover {
                                        background-color: rgb(58, 58, 94);
                                    }
                                    
                                    .Documents-btn:active {
                                        transform: scale(0.95);
                                    }
                                    
                                    .Documents-btn:hover .fileFront {
                                        transform: rotateX(30deg);
                                    }
                                    
                                    .Documents-btn:hover .fileFront {
                                        transform: rotateX(30deg);
                                    }
                                    
                                    .Documents-print-btn p {
                                        margin-left: -3rem;
                                    }
                                    /* Printer Icon and Animation */
                                    
                                    @keyframes page1 {
                                        0% {
                                            transform: translateY(0px);
                                        }
                                        100% {
                                            transform: translateY(125px);
                                        }
                                    }
                                    /* Scale printer down */
                                    
                                    .printer-icon .printerWrapper {
                                        position: relative;
                                        width: 100px;
                                        height: auto;
                                        transform: scale(0.18) translate(50px, 58px);
                                        transform-origin: top left;
                                    }
                                    /* Animation trigger on hover or click */
                                    
                                    .Documents-print-btn:hover .printer-icon .page1,
                                    .Documents-print-btn:active .printer-icon .page1 {
                                        animation: page1 3s infinite linear;
                                    }
                                    /* SCOPED STYLES UNDER .printer-icon */
                                    
                                    .printer-icon .paperWrapper {
                                        position: absolute;
                                        top: 50%;
                                        left: 45%;
                                        margin-left: -100px;
                                        height: 110px;
                                        width: 350px;
                                        margin-top: -250px;
                                        z-index: 1000;
                                    }
                                    
                                    .printer-icon .paperIn {
                                        position: absolute;
                                        top: 0%;
                                        left: 57%;
                                        margin-left: -90px;
                                        height: 123px;
                                        width: 131px;
                                        margin-top: 12px;
                                        background-color: #d6d7e1;
                                        box-shadow: 0 0 6px rgba(0, 0, 0, .34);
                                        background-image: linear-gradient(to top, #fafafc, #fff 71%);
                                        color: #777;
                                        text-transform: uppercase;
                                        text-align: center;
                                        padding-top: 0.1em;
                                        box-sizing: border-box;
                                        font-family: "Cormorant";
                                        font-size: 1.8em;
                                    }
                                    
                                    .printer-icon .page1 {
                                        z-index: 250;
                                    }
                                    
                                    .printer-icon .page2 {
                                        z-index: 245;
                                    }
                                    
                                    .printer-icon .paperInsert {
                                        position: absolute;
                                        top: 0%;
                                        left: 58%;
                                        margin-left: -115px;
                                        height: 75px;
                                        width: 175px;
                                        margin-top: 60px;
                                        z-index: 150;
                                        border-radius: 5px 5px 0 0/8px 8px 0 0;
                                        background-color: #fff;
                                        box-shadow: 0 -2px 0 2px rgba(0, 0, 0, .4);
                                        background-image: linear-gradient(to top, #151617, #3a3f3f 51%, #515859);
                                    }
                                    
                                    .printer-icon .paperSlot {
                                        position: absolute;
                                        top: 120%;
                                        left: 54.5%;
                                        margin-left: -115px;
                                        background: #000;
                                        z-index: 350;
                                        height: 5px;
                                        width: 200px;
                                        border-radius: 50%;
                                    }
                                    
                                    .printer-icon .paperHide {
                                        position: absolute;
                                        top: 122.9%;
                                        left: 58%;
                                        margin-left: -115px;
                                        background: #CDCED0;
                                        z-index: 300;
                                        height: 75px;
                                        width: 175px;
                                    }
                                    
                                    .printer-icon .printerTop {
                                        position: absolute;
                                        top: 37%;
                                        left: 45%;
                                        margin-left: -100px;
                                        margin-top: -75px;
                                        z-index: 100;
                                        border-bottom: 70px solid #CDCED0;
                                        border-left: 40px solid transparent;
                                        border-right: 40px solid transparent;
                                        border-top-left-radius: 30px;
                                        border-top-right-radius: 30px;
                                        height: 0;
                                        width: 269px;
                                    }
                                    
                                    .printer-icon .printerTop:after {
                                        content: ' ';
                                        left: 0px;
                                        top: -3px;
                                        position: absolute;
                                        background: #CDCED0;
                                        border-radius: 10px 10px 0 0;
                                        width: 269px;
                                        height: 5px;
                                        display: block;
                                    }
                                    
                                    .printer-icon .printerBody {
                                        position: absolute;
                                        top: 50%;
                                        left: 45%;
                                        margin-left: -100px;
                                        height: 110px;
                                        width: 350px;
                                        margin-top: -75px;
                                        border-top: 1px solid #cdced0;
                                        z-index: 1000;
                                        border-radius: 10px;
                                        background-image: linear-gradient(to top, #fff, #f0f0f3 47%, #b3b4b9);
                                        box-shadow: 2px 3px 4px rgba(255, 2555, 255, 1) inset, 0px 1px 3px rgba(0, 0, 0, .25), 0px 2px 1px rgba(200, 200, 200, 1);
                                    }
                                    
                                    .printer-icon .bayWrapper {
                                        position: absolute;
                                        top: 50%;
                                        left: 45%;
                                        margin-left: -100px;
                                        height: 110px;
                                        width: 350px;
                                        margin-top: -250px;
                                        z-index: 1000;
                                    }
                                    
                                    .printer-icon .lightLarge,
                                    .printer-icon .lightSmall {
                                        position: absolute;
                                        top: 180%;
                                        left: 110%;
                                        margin-left: -100px;
                                        padding: 2px;
                                        border-radius: 50px;
                                        display: inline-block;
                                        background: linear-gradient(to bottom, #fAfAfA 0%, #4D4D4D 100%);
                                    }
                                    
                                    .printer-icon .light {
                                        z-index: 1400;
                                        width: 13px;
                                        height: 13px;
                                        border-radius: 50px;
                                        background-image: radial-gradient(50% 80%, rgb(49, 226, 252), rgb(30, 152, 199));
                                        box-shadow: 0px 1px 1px rgba(180, 180, 180, 0.8) inset, 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 5px 3px rgba(200, 200, 200, .45);
                                    }
                                    
                                    .printer-icon .lightSmall {
                                        top: 181%;
                                        left: 117%;
                                    }
                                    
                                    .printer-icon .lightSmall>.light {
                                        width: 9px;
                                        height: 9px;
                                        background-image: radial-gradient(50% 80%, rgb(111, 111, 121), rgb(82, 82, 92));
                                    }
                                    
                                    .printer-icon .facePlate {
                                        position: absolute;
                                        top: 165%;
                                        left: 47%;
                                        margin-left: -90px;
                                        height: 98px;
                                        width: 200px;
                                        margin-top: 12px;
                                        z-index: 1500;
                                        border-radius: 10px;
                                        background-image: linear-gradient(to right, #1b1d1d, #515859 15%, #1b1d1d);
                                        box-shadow: 0px 1px 1px rgba(180, 180, 180, 1) inset, 0px 1px 3px rgba(0, 0, 0, .25), 0px 0px 0px 1px rgba(77, 77, 77, .75), 0px 5px 3px rgba(200, 200, 200, .2);
                                    }
                                    
                                    .printer-icon .bayOpening {
                                        position: absolute;
                                        top: 225%;
                                        left: 54%;
                                        margin-left: -90px;
                                        height: 30px;
                                        width: 150px;
                                        margin-top: 12px;
                                        z-index: 1600;
                                        background-color: #000;
                                        box-shadow: 0 -2px 0 0px rgba(255, 255, 255, .5);
                                    }
                                    
                                    .printer-icon .bayTray {
                                        position: absolute;
                                        top: 320%;
                                        left: 51%;
                                        margin-left: -100px;
                                        margin-top: -75px;
                                        z-index: 1600;
                                        border-bottom: 60px solid #555;
                                        border-left: 30px solid transparent;
                                        border-right: 30px solid transparent;
                                        border-top-left-radius: 30px;
                                        border-top-right-radius: 30px;
                                        height: 0;
                                        width: 133px;
                                    }
                                    
                                    .printer-icon .bayTray:after {
                                        content: ' ';
                                        left: -30px;
                                        top: 60px;
                                        position: absolute;
                                        background: #000;
                                        width: 193px;
                                        height: 5px;
                                        display: block;
                                    }
                                    
                                    .printer-icon .paperOut {
                                        position: absolute;
                                        top: 320%;
                                        left: 51%;
                                        margin-left: -100px;
                                        margin-top: -75px;
                                        z-index: 1900;
                                        border-bottom: 80px solid #fff;
                                        border-left: 30px solid transparent;
                                        border-right: 30px solid transparent;
                                        border-top-left-radius: 30px;
                                        border-top-right-radius: 30px;
                                        height: 0;
                                        width: 133px;
                                    }
                                    
                                    .printer-icon .paperOut:before {
                                        content: ' ';
                                        left: 0px;
                                        top: -17px;
                                        position: absolute;
                                        background: #c0c1c8;
                                        width: 133px;
                                        height: 17px;
                                        display: block;
                                    }
                                    
                                    .printer-icon .paperOutShadow {
                                        position: absolute;
                                        top: 320%;
                                        left: 50.4%;
                                        margin-left: -100px;
                                        margin-top: -75px;
                                        z-index: 1800;
                                        border-bottom: 84px solid rgba(192, 193, 200, .5);
                                        border-left: 30px solid transparent;
                                        border-right: 30px solid transparent;
                                        border-top-left-radius: 30px;
                                        border-top-right-radius: 30px;
                                        height: 0;
                                        width: 137px;
                                    }


                                    /* Only show the visible card when printing */
                                
                                    @media print {
                                        /* Hide everything by default */
                                        body * {
                                            visibility: hidden !important;
                                        }
                                        /* Show only the card with .print-scope and its children */
                                        .print-scope,
                                        .print-scope * {
                                            visibility: visible !important;
                                            overflow: visible !important;
                                        }

                                        /* Preserve flex layout for the card */
                                        .print-scope {
                                            position: relative !important;
                                            display: flex !important;
                                            flex-direction: column !important;
                                            width: 100% !important;
                                            max-width: 100vw !important;
                                            min-width: 0 !important;
                                            min-height: 0 !important;
                                            padding: 10px !important;
                                            box-sizing: border-box !important;
                                            overflow: visible !important;
                                            page-break-inside: auto;
                                        }

                                        /*Accomodate for huge whitespace left at the top*/
                                        .family-plan-card{
                                            margin-top: -5rem;
                                        }

                                        .family-weekly-plan-card{
                                            margin-top: -60rem;
                                        }

                                        /* Prevent unwanted page breaks inside main sections */
                                        .print-scope>* {
                                            page-break-inside: avoid;
                                        }

                                        /* Page break after the lunch section in the day view */
                                        .family-plan-card .meal-sections .lunch-section {
                                            page-break-after: always !important;
                                            break-after: page !important;
                                        }

                                        /* Remove scrollbars */
                                         ::-webkit-scrollbar {
                                            display: none !important;
                                        }

                                        html,
                                        body {
                                            overflow: visible !important;
                                            height: auto !important;
                                        }

                                        /* Hide user instruction guides */
                                        .day-view-user-guide,
                                        .user-edit-guide {
                                            display: none !important;
                                        }
                                    }

                                    /* Modal Formatting Toolbar */
                                    .modal-format-toolbar {
                                        display: flex;
                                        gap: 8px;
                                        margin-bottom: 8px;
                                    }
                                    .modal-format-toolbar button {
                                        background: #f3f3f3;
                                        border: 1px solid #ccc;
                                        border-radius: 4px;
                                        padding: 4px 8px;
                                        cursor: pointer;
                                        font-size: 1em;
                                        transition: background 0.2s;
                                    }
                                    .modal-format-toolbar button:hover {
                                        background: #e0e7ff;
                                    }