<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="csrf-token" content="olQQeqqN8A74TPU9YIk5ilV01sKKjYYBIi6wj9tO">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">

<link rel="stylesheet" type="text/css" href="styles/bootstrap.css?v14">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<link rel="stylesheet" type="text/css" href="fonts/css/fontawesome-all.min.css">
<!-- <link rel="manifest" href="_manifest.json" data-pwa-version="set_in_manifest_and_pwa_js"> -->
<link rel="icon" type="image/png" href="app/icons/icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="app/icons/icon-192x192.png">
<style>
    body {
        font-family: Jost !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    span {
        font-family: Jost !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        border-bottom: 1px solid #dee2e6;
    }

    .card-style {
        overflow: hidden;
        margin: 0 8px 30px;
        border-radius: 20px;
        border: none;
        box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .1);
    }

    .card-shadow {
        box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .1);
    }

    .z-depth-1 {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
    }

    .z-depth-1-half {
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) !important;
    }

    .z-depth-2 {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
    }

    .z-depth-3 {
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19) !important;
    }

    .z-depth-4 {
        box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21) !important;
    }

    .z-depth-5 {
        box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22) !important;
    }

    #footer-bar a span {
        font-family: Jost !important;
    }

    .header .header-icon {
        font-size: 22px;
    }

    .header .header-title {
        font-size: 17px;
    }

    .text-left {
        text-align: left;
    }

    .img-profile {
        width: 60px;
        height: 60px;
        border: 1px solid #dee2e6;
        border-radius: 30px;
    }

    .card-style {
        overflow: hidden;
        margin: 0 8px 10px;
        border-radius: 9px;
        border: none;
        box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .1);
    }

    .card-filter {
        position: fixed !important;
        top: 50px;
        left: 0;
        right: 0;
        z-index: 50;
        margin: 0px 0px 0px 0px;
        border-radius: 0px;
        backdrop-filter: saturate(180%) blur(20px);
        background-color: rgba(255, 255, 255, .7);
    }

    .no-margin {
        margin: 0 15px 30px;
        border-radius: 0px;
    }

    .border_collapse {
        border: 1px solid #adb5bd;
        margin: 3px 10px;
    }

    .accordion button {
        border-bottom: 1px solid #f0f0f0;
    }

    .space_evenly {
        display: flex;
        justify-content: space-between;
    }

    .item_space {
        flex: 1;
        margin-left: 3px;
    }
</style>
</head>

<body class="theme-light" id="body" data-highlight="highlight-green">
    <div id="preloader" class="preloader-hide">
        <div class="spinner-border color-highlight" role="status"></div>
    </div>
    <div id="page" data-swup="0">

        <div id="menu_nav" class="menu menu-box-modal rounded-0" data-menu-height="cover" data-menu-width="cover" style="display: block; width: 100%; height: 100%;">
            <div class="card rounded-0 bg-6s" data-card-height="420" style="height: 420px;">
                <div class="page-title">
                    <!-- <h1>Our Menu</h1>
                    <a href="#" class="page-title-icon shadow-xl bg-theme color-theme" data-menu="menu-share"><i class="fa fa-share-alt"></i></a>
                    <a href="#" class="page-title-icon shadow-xl bg-theme color-theme show-on-theme-light" data-toggle-theme=""><i class="fa fa-moon"></i></a>
                    <a href="#" class="page-title-icon shadow-xl bg-theme color-theme show-on-theme-dark" data-toggle-theme=""><i class="fa fa-lightbulb color-yellow-dark"></i></a> -->

                </div>
            </div>
            <!-- <div class="card card-styles card-full-right canvas-spinner" style="margin-top: -450px; margin-bottom: -80px; min-height: 750px; z-index: 1; display: none;">
                <div class="center">
                    <div class="spinner-border color-green-dark" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div> -->
            <div class="card card-styles rounded-m card-full-right canvas-contents" style="margin-top: -450px; margin-bottom: 0px; z-index: 1;">
                <div class="content" style="min-height: 750px;">
                    <div class="card card-styles">
                        <div class="contents mb-0">
                            <div class="">
                                <div class="d-flex z-depth-1 p-2 mb-3 " style="background: rgba(0,0,0,.05);">
                                    <div class="w-35 border-right border-highlight">
                                        <img src="images/avatars/2s.png" width="60" class="bg-highlight rounded-circle z-depth-1">
                                        <h6 class="font-10 font-600 mt-2 text-center">Parent</h6>
                                        <p class="color-blue-dark mt-n3 font-10 font-400 text-center mb-0 pt-1">P/16/0001</p>
                                    </div>
                                    <div class="w-100 ps-3">
                                        <h6 class="mb-2 font-12" style="text-align: center;"><span class="badge bg-blue-dark font-12 color-white z-depth-1 mt-2"> EARLY STRIDES PRIVATE SCHOOLS ABUJA</span></h6>
                                        <!-- <p class="color-highlight mt-n3 font-10 pt-1 mb-0">27 PARAKUO STREET, WUSE 2, ABUJA</p> -->
                                        <div class="col-lg-12 mb-0 mb-2 space_evenly">
                                            <div class=" item_space">
                                                <a data-menu="" href="#" class="btn btn-full bg-green-dark btn-sm z-depth-1">Profile </a>
                                            </div>
                                            <div class=" item_space">
                                                <a data-menu="" href="#" class="btn btn-full bg-blue-dark btn-sm z-depth-1 ">Add Account </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-0">
                                    <div class="col ">
                                        <a href="student_list.php" class="card card-shadow rounded-m me-0 p-3 mb-3">
                                            <i class="fa fa-users color-red-light font-35 icon-50"></i>
                                            <h6 class="pt-3">Manage Student</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Admit and manage learners</p>
                                        </a>
                                    </div>
                                    <div class="col">
                                        <a href="staff_list.php" class="card card-shadow rounded-m ms-0  p-3 mb-3">
                                            <i class="fa fa-sitemap color-blue-light font-35 icon-50"></i>
                                            <h6 class="pt-3">Manage Staff</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Employ and assign staff</p>
                                        </a>
                                    </div>
                                    <div class="w-100"></div>
                                    <div class="col ">
                                        <a href="generate.php" class="card card-shadow rounded-m me-0 p-3 mb-3">
                                            <i class="fa fa-newspaper color-magenta-light font-35 icon-50"></i>
                                            <h6 class="pt-3">School Result</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Summarize End of Term Result</p>
                                        </a>
                                    </div>
                                    <div class="col">
                                        <a href="#" class="card card-shadow rounded-m me-0 p-3 mb-3">
                                            <i class="fa fa-newspaper color-teal-light font-35 icon-50"></i>
                                            <h6 class="pt-3">Extra Result</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Summarize Mid Term Result</p>
                                        </a>
                                    </div>
                                    <div class="w-100"></div>
                                    <div class="col ">
                                        <a href="topic.php" class="card card-shadow rounded-m ms-0  p-3 mb-3">
                                            <i class="fa fa-file-text color-yellow-light font-35 icon-50"></i>
                                            <h6 class="pt-3">Topics</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Learning topics and materials</p>
                                        </a>
                                    </div>
                                    <div class="col">
                                        <a href="bill.php" class="card card-shadow rounded-m ms-0  p-3 mb-3">
                                            <i class="fa fa-book color-gray-dark font-35 icon-50"></i>
                                            <h6 class="pt-3">Assignment</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Submit your assigment </p>
                                        </a>
                                    </div>
                                    <div class="w-100"></div>
                                    <div class="col ">
                                        <a href="bill.php" class="card card-shadow rounded-m ms-0  p-3 mb-3">
                                            <i class="fa fa-credit-card color-gray-dark font-35 icon-50"></i>
                                            <h6 class="pt-3">My Invoice</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Pay school bills </p>
                                        </a>
                                    </div>
                                    <div class="col">
                                        <a href="#" class="card card-shadow rounded-m ms-0  p-3 mb-3">
                                            <i class="fa fa-phone color-green-light font-35 icon-50"></i>
                                            <h6 class="pt-3">Contact</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Send your Message</p>
                                        </a>
                                    </div>
                                    <div class="w-100"></div>
                                    <div class="col ">
                                        <a href="#" class="card card-shadow rounded-m me-0 p-3 mb-3">
                                            <i class="fa fa-clipboard color-brown-light font-35 icon-50"></i>
                                            <h6 class="pt-3">Check Result</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Check your end of term result</p>
                                        </a>
                                    </div>
                                    <div class="col">
                                        <a href="#" class="card card-shadow rounded-m ms-0  p-3 mb-3">
                                            <i class="fa fa-clipboard color-yellow-light font-35 icon-50"></i>
                                            <h6 class="pt-3">Extra Result</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Check Mid Term Result</p>
                                        </a>
                                    </div>
                                    <div class="w-100"></div>
                                    <div class="col ">
                                        <a href="#" class="card card-shadow rounded-m me-0 p-3 mb-3">
                                            <i class="fa fa-file color-red-light font-35 icon-50"></i>
                                            <h6 class="pt-3">About Us</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Know the vision and mission</p>
                                        </a>
                                    </div>
                                    <div class="col">
                                        <a href="#" class="card card-shadow rounded-m ms-0  p-3 mb-3">
                                            <i class="fa fa-phone color-green-light font-35 icon-50"></i>
                                            <h6 class="pt-3">Contact</h6>
                                            <p class="font-10 mt-n2 mb-0 color-highlight">Send your Message</p>
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div style="margin-bottom:60px;"></div>
                </div>
            </div>
            <div id="footer-bar" class="close-menu comment_box d-flex modal_footer pt-1" style="position: sticky; transform: translateX(0px);">
                <a href="#" class="btn text-white btn-full bg-blue-dark z-depth-1 btn-sm mt-0" style="font-size: 20px !important;"> CLOSE MENU </a>
            </div>

            <!-- <div id="footer-bar" class="comment_box d-flex modal_footer pt-1" style="position: sticky; transform: translateX(0px);">
                <div class="me-3 speach-icon">
                    <a href="#" class="bg-red-light ms-2 reset_edit_comment"><i class="fa fa-times-circle pt-2"></i></a>
                </div>
                <div class="flex-fill speach-input rounded-0">
                    <input type="text" id="comment" name="comment" class="form-control comment" placeholder="Enter your Message here">
                </div>
                <div class="ms-3 speach-icon">
                    <a href="#" data-id="" class="font-10 gradient-highlight color-white me-2 add_comment"><i class="fa fa-envelope pt-2"></i></a>
                </div>
            </div> -->
        </div>