From 8ec1a0299bb4196f127d2329f3eee7c5d49bc601 Mon Sep 17 00:00:00 2001
From: BRENDAN  DEVELOPS <54499726+brendandevelops@users.noreply.github.com>
Date: Thu, 7 Nov 2019 14:03:21 +0100
Subject: [PATCH 1/2] Add files via upload

mail automation updat and bug fixes.
please delete all other files by name mail campaign automation upate or watever...leave file by name mail campaign automation update 2
test url
https://meetbrendanchima.000webhostapp.com/mail_mailcampaign-automation-update2.html
---
 mail_mailcampaign-automation-update2.html | 43 +++++++++--------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/mail_mailcampaign-automation-update2.html b/mail_mailcampaign-automation-update2.html
index ff4da52..59b4bb7 100644
--- a/mail_mailcampaign-automation-update2.html
+++ b/mail_mailcampaign-automation-update2.html
@@ -750,8 +750,10 @@
         height: 500px;
         margin-bottom: -120px;
         margin-left: -200px;
-        background:white;
+        background-color: white;
+
         display:none;
+        z-index: 1;
         } 
         #popup2{
         position: fixed;
@@ -761,7 +763,7 @@
         height: 450px;
         margin-bottom: -120px;
         margin-left: -200px;
-        background:white;
+        background-color :white;
         display:none;
         } 
 
@@ -773,7 +775,7 @@
         height: 450px;
         margin-bottom: -120px;
         margin-left: -200px;
-        background:white;
+        background-color:white;
         display:none;
         } 
         #opacity{
@@ -935,7 +937,7 @@
               </nav>
               <div class="col main p-3 text-white" style="background:#1A73E8;">
                   <div class="col">
-                      <h1 style="font-size: 35px">Welcome back Admin</h1>
+                      <h1 style="font-size: 35px"></h1>
                       <h6 class="pt-2">CAR PARK APPLICATION </h6>
                   </div>
               </div>
@@ -955,29 +957,17 @@ <h6 class="pt-2">CAR PARK APPLICATION </h6>
         </a>
     <ul>
       <li>
-          <a href="./mail_mailcampaign.html">
-        <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/All_lpndxk.svg" alt="All">
-          </a>
-        All
-      </li>
+          <a href="./mail_mailcampaign.html" style="text-decoration: none; color: white;">
+        <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/All_lpndxk.svg" alt="All">All</li> </a>
       <li>
-          <a href="./mail_mailcampaignongoing.html">
-              <img src="https://res.cloudinary.com/kayode/image/upload/v1571831583/cars/Arrow_vmii5g.svg" alt="->" a href="./mail_mailcampaignongoing.html">
-          </a>
-        Ongoing
-      </li>
+          <a href="./mail_mailcampaignongoing.html" style="text-decoration: none; color: white;">
+              <img src="https://res.cloudinary.com/kayode/image/upload/v1571831583/cars/Arrow_vmii5g.svg" alt="->" a href="./mail_mailcampaignongoing.html">Ongoing</li></a>
       <li>
-          <a href="./mail_mailcampaigndraft.html">
-              <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/draft_k9nyhc.svg" alt="Draft">
-          </a>
-        Draft
-      </li>
+          <a href="./mail_mailcampaigndraft.html" style="text-decoration: none; color: white;">
+              <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/draft_k9nyhc.svg" alt="Draft">Draft</li></a>
       <li>
-          <a href="./mail_mailcampaigncompleted.html">
-              <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/completed_csrvtb.svg" alt="Completed">
-          </a>
-        Completed
-      </li>
+          <a href="./mail_mailcampaigncompleted.html" style="text-decoration: none; color: white;">
+              <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/completed_csrvtb.svg" alt="Completed">Completed</li> </a>
       <a href="#" id="Automation" onclick="automate()" style="text-decoration: none; color: white;"><li>
               <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/Automation_g0qdiq.svg" alt="Automation"> Automation
           </li></a>
@@ -1156,7 +1146,7 @@ <h2 style="text-align: center;margin-top: 20px;margin-bottom: 20px;">Recurring D
                      
                     </select>
                     <br>
-                      <a href="/Users/inVENT/Desktop/Car-Park-App-Web-FE-SuperAdmin/mail_mailcampaign-proceed.html"><button class="btn btn-primary" style="float: right; margin-top: 5px;margin-right: 18%;text-decoration: none;">Proceed</button></a>
+                      <a href="mail_mailcampaign-proceed.html"><button class="btn btn-primary" style="float: right; margin-top: 5px;margin-right: 18%;text-decoration: none;">Proceed</button></a>
 
               </form>
 
@@ -1187,7 +1177,7 @@ <h4 style="text-align: center;margin-top: 30px;margin-bottom: 20px;">Say Happy B
                      
                     </select>
                     <br>
-                      <a href="/Users/inVENT/Desktop/Car-Park-App-Web-FE-SuperAdmin/mail_mailcampaign-proceed.html"><button class="btn btn-primary" style="float: right; margin-top: 5px;margin-right: 18%;text-decoration: none;">Proceed</button></a>
+                      <a href="mail_mailcampaign-proceed-bday.html"><button class="btn btn-primary" style="float: right; margin-top: 5px;margin-right: 18%;text-decoration: none;">Proceed</button></a>
 
               </form>
 
@@ -1206,6 +1196,7 @@ <h4 style="text-align: center;margin-top: 30px;margin-bottom: 20px;">Say Happy B
            
 
   </div>
+</div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js">
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>

From 53fee6bbf82b8ba265734b3b3ded0392571ba4a5 Mon Sep 17 00:00:00 2001
From: BRENDAN  DEVELOPS <54499726+brendandevelops@users.noreply.github.com>
Date: Thu, 7 Nov 2019 14:07:40 +0100
Subject: [PATCH 2/2] Add files via upload

updated mail campaign  and proceed pages
https://meetbrendanchima.000webhostapp.com/mail_mailcampaign-proceed-bday.html

https://meetbrendanchima.000webhostapp.com/mail_mailcampaign-proceed.html
---
 mail_mailcampaign-proceed-bday.html | 1159 ++++++++++-----------------
 mail_mailcampaign-proceed.html      | 1158 ++++++++++----------------
 2 files changed, 836 insertions(+), 1481 deletions(-)

diff --git a/mail_mailcampaign-proceed-bday.html b/mail_mailcampaign-proceed-bday.html
index 60a3158..26f42d1 100644
--- a/mail_mailcampaign-proceed-bday.html
+++ b/mail_mailcampaign-proceed-bday.html
@@ -7,530 +7,14 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-  <title>Mail-Campaign </title>
+  <title>Mail-Campaign</title>
+  <link
+      rel="icon"
+      href="https://res.cloudinary.com/seun007/image/upload/v1572520438/image_3_zznsc1.png"
+      type="image/gif"
+      sizes="5x16"
+    />
   <style>
-              .mail-container {
-              padding: 0;
-              margin:0;
-            }
-            .mail-side-bar {
-              background-color:#1A73E8;
-              color: #fff;
-              font-family: 'Roboto', sans-serif;
-              padding-left: 0px;
-              padding-top: 42px;
-              padding-bottom: 59px;
-            }
-            .mail-side-bar ul {
-              padding-top: 59px;
-            }
-            .mail-side-bar ul li {
-              list-style-type: none;
-              padding-bottom: 30px;
-            }
-            .mail-side-bar ul li img {
-              padding-right: 10px;
-            }
-            .compose {
-              color: white;
-              width: 180px;
-              border: 0;
-              height: 50px;
-              background-color: #5cb5ff;
-              border-radius: 0px 25px 25px 0px;
-              font-weight: bolder;
-            }
-            .compose span {
-              padding-left: 46px;
-            }
-            .mail-main-bar {
-              margin: 0;
-              padding: 0;
-            }
-            .read-mail {
-              background-color: #f6f6f6;
-              padding: 70px 25px 25px 25px;
-            }
-            .mail {
-              box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
-              background-color: #fff;
-              margin-top: 2px;
-              font-size: 13px;
-            }
-            .read-mail div img {
-              padding-top: 10px;
-              padding-bottom: 10px;
-            }
-            .mail span small {
-              color: #0049B5;
-              font-size: 11px;
-            }
-            .p-first {
-              box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
-            }
-            #sent {
-              float: right;
-            }
-            #span-first {
-              float: right;
-            }
-            .tym {
-              padding-right: 9px;
-            }
-            .marketting {
-              background-color: #fff;
-              margin-top: 200px;
-              padding: 10px;
-            }
-            .marketting .marketting-head {
-              text-align: center;
-            }
-            .marketting .marketting-head h5 {
-              color: #5cb5ff;
-            }
-            .marketting .marketting-head {
-              color: #b1bbb1;
-            }
-            .marketting ul li {
-              list-style-type: none;
-              box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
-              padding: 5px;
-            }
-            .marketting ul li span {
-            float: right;
-            color: royalblue;
-            size: 11px;
-            }
-            .last-bar {
-              padding-top: 70px;
-              background-color: #fff;
-            }
-            .last-bar button{
-              float: right;
-            margin-top: 20px;
-            margin-right: 20px;
-            margin-bottom: 40px;
-            padding-left: 30px;
-            padding-right: 30px;
-            }
-            .session-first {
-              font-size: 12px;
-              padding: 10px;
-              width: 90%;
-              margin: auto;
-              background-color: #b1b1b1;
-            }
-            .session-second {
-              padding: 10px;
-              font-size: 12px;
-              width: 90%;
-              text-align: center;
-              margin-left: auto;
-              margin-right: auto;
-              margin-top: 11px;
-              background-color: #171717;
-              color: whitesmoke;
-            }
-            #newletter-head {
-              text-align: center;
-              font-weight: bold;
-              padding: 10px;
-              font-size: 13px;
-              border-bottom: 1px solid rgb(197, 192, 192);
-              margin-bottom: 10px;
-            }
-            .span-nav .active {
-                padding-right: 20px;
-                border-bottom: 1px solid #0049B5;
-              }
-              #body-row {
-                    margin-left:0;
-                    margin-right:0;
-                }
-                #sidebar-container {
-                    min-height: 100vh;   
-                    background-color: #0049B5;
-                    padding: 0;
-                }
-                /* Sidebar sizes when expanded and expanded */
-                .sidebar-expanded {
-                    width: 230px;
-                }
-                .sidebar-collapsed {
-                    width: 60px;
-                }
-                /* Menu item*/
-                #sidebar-container .list-group a {
-                    height: 50px;
-                    color: white;
-                }
-                /* Submenu item*/
-                #sidebar-container .list-group .sidebar-submenu a {
-                    height: 45px;
-                    padding-left: 30px;
-                }
-                .sidebar-submenu {
-                    font-size: 0.9rem;
-                }
-                /* Separators */
-                .sidebar-separator-title {
-                    background-color: #0049B5;
-                    height: 35px;
-                }
-                .sidebar-separator {
-                    background-color: #0049B5;
-                    height: 25px;
-                }
-                .logo-separator {
-                    background-color: #0049B5;    
-                    height: 60px;
-                }
-                /* Closed submenu icon */
-                #sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
-                content: " \f0d7";
-                font-family: FontAwesome;
-                display: inline;
-                text-align: right;
-                padding-left: 10px;
-                }
-                /* Opened submenu icon */
-                #sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
-                content: " \f0da";
-                font-family: FontAwesome;
-                display: inline;
-                text-align: right;
-                padding-left: 10px;
-                }
-                .max-width {
-                  max-width: 98.5%;
-                }
-                .ml-reset {
-                  margin-left: 0px;
-                }
-                .campaign {
-                  margin-bottom: 3px;
-                }
-        
-        /*Pop-up starts here*/
-        .welcome-row {
-                    background-color: #1A73E8;
-                }
-                hgroup {
-                    color: #fff;
-                }
-                hgroup>h1 {
-                    font-size: 2em;
-                    font-weight: 100;
-                }
-                hgroup>h2 {
-                    font-size: 1em;
-                    font-weight: 100;
-                    letter-spacing: 0.05em;
-                }
-               .span-nav .active {
-                padding-right: 20px;
-                border-bottom: 1px solid #0049B5;
-              }
-              #body-row {
-                    margin-left: 0;
-                    margin-right: 0;
-                }
-                #sidebar-container {
-                    min-height: 100vh;  
-                    background-color: #0049B5;
-                    padding: 0;
-                }
-                /* Sidebar sizes when expanded and expanded */
-                .sidebar-expanded {
-                    width: 230px;
-                }
-                .sidebar-collapsed {
-                    width: 60px;
-                }
-                /* Menu item*/
-                #sidebar-container .list-group a {
-                    height: 50px;
-                    color: white;
-                }
-                /* Submenu item*/
-                #sidebar-container .list-group .sidebar-submenu a {
-                    height: 45px;
-                    padding-left: 30px;
-                }
-                .sidebar-submenu {
-                    font-size: 0.9rem;
-                }
-                /* Separators */
-                .sidebar-separator-title {
-                    background-color: #0049B5;
-                    height: 35px;
-                }
-                .sidebar-separator {
-                    background-color: #0049B5;
-                    height: 25px;
-                }
-                .logo-separator {
-                    background-color: #0049B5;    
-                    height: 60px;
-                }
-                
-                /* Closed submenu icon */
-                #sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
-                content: " \f0d7";
-                font-family: FontAwesome;
-                display: inline;
-                text-align: right;
-                padding-left: 10px;
-                }
-               
-                /*.max-width {
-                  max-width: 98.5%;
-                }*/
-                 /* Opened submenu icon */
-                #sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
-                    content: " \f0da";
-                    font-family: FontAwesome;
-                    display: inline;
-                    text-align: right;
-                    padding-left: 10px;
-                }
-                
-                /* {
-            box-sizing: border-box;
-        }
-        body {
-            min-height: 100vh;
-            min-width: 100vw;
-            width: 100;
-        }*/
-        .p-1:hover {
-        background-color: white;
-        border-radius: 10px;
-        }
-        .notification-box img {
-            margin: 10px;
-            margin-left: 20px;
-            margin-right: -10px;
-            padding: 14px;
-        }
-        .notification-box {
-            border: 1px solid #C4C4C4;
-            margin-bottom: 15px;
-            margin-right: 10px;
-            margin-left: 20px;
-            border-radius: 10px;
-            background-color: lightblue;
-        }
-        .notification-box b {
-            font-family: sans-serif;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 14px;
-            
-        }
-        .notification-box span {
-            font-family: sans-serif;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 14px;
-            line-height: 2
-        }
-        p {
-            font-family: sans-serif;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            margin-bottom: 0px;
-        }
-        @media screen and (min-width: 710px) and (max-width: 850px) {
-        h1, b, .notification-box {
-            margin-left: 80px;
-        }
-        }
-        @media screen and (min-width: 850px) and (max-width: 1090px) {
-        h1, b, .notification-box, .popuptext {
-            margin-left: 70px;
-        }
-        }
-        /* Dropdown Button */
-        .dropbtn {
-          background-color: white;
-          border: 1px solid lightblue;
-            border: 10px;
-        cursor: pointer;
-        width: 98%;
-          font-size: 25px;
-        }
-        /* Dropdown button on hover & focus */
-        .dropbtn:hover, .dropbtn:focus {
-          background-color: white;
-          border-radius: 10px;
-        }
-        /* The container <div> - needed to position the dropdown content */
-        .dropdown {
-          /*position: relative;*/
-          display: inline-block;
-          width: 100%;
-        }
-        /* Dropdown Content (Hidden by Default) */
-        .dropdown-content {
-         display: none;
-          /*position: absolute;*/
-          background-color: #f1f1f1;
-          width: 100%;
-          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-          /*z-index: 1;*/
-          overflow: auto;
-        }
-        /* Change color of dropdown links on hover */
-        .dropdown-content a:hover {background-color: #ddd}
-        /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
-        .show {display:block;}
-        .popup {
-          /*position: relative;*/
-          
-          /*display: inline-block;*/
-          cursor: pointer;
-          -webkit-user-select: none;
-          -moz-user-select: none;
-          -ms-user-select: none;
-          user-select: none;
-        }
-        /* The actual popup */
-        .popup .popuptext {
-          visibility: hidden;
-          width: 400px;
-          color: #555;
-          border-radius: 6px;
-          /*padding: 8px 0;*/
-          position: absolute;
-          z-index: 1;
-          top: 15vh;
-          left: -250px;
-          height: 420px;
-           background: white;
-          border: 1px solid #ccc;
-          transition: 1.1s ease-out;
-          box-shadow: 
-            -2rem 2rem 2rem rgba(black, 0.2);
-          filter: blur(0);
-          transform: scale(1);  
-          opacity: 1;
-          /*visibility: visible;
-          &.off {
-            opacity: 0;
-            visibility: hidden;
-            filter: blur(8px);
-            transform: scale(0.33);
-            box-shadow: 1rem 0 0 rgba(black, 0.2);*/
-          
-        }
-        .popup .notification-box {
-            border: 1px solid grey; 
-            margin-bottom: 5px;
-            margin-right: 5px;
-            margin-left: 5px;
-            border-radius: 5px;
-            background-color: white;
-        }
-        .popup .notification-box b {
-            font-family: sans-serif;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 14px;
-            
-        }
-        p {
-            font-family: sans-serif;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            margin-bottom: 0px;
-        }
-        /* Popup arrow */
-        .popup .popuptext::after {
-          width: 0; 
-          height: 0; 
-          border-top: 5px solid transparent;
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          
-          border-bottom: 5px solid white;
-         content: "";
-          position: absolute;
-          bottom: 100%;
-          right: 25%;
-          margin-left: -5px;
-          border-width: 10px;
-          border-style: solid;
-          /*border-color: #ff  transparent transparent;*/
-        }
-        /* Toggle this class - hide and show the popup */
-        .popup .display {
-          visibility: visible;
-          -webkit-animation: fadeIn 1s;
-          animation: fadeIn 1s;
-        }
-        /* Add animation (fade in the popup) */
-        @-webkit-keyframes fadeIn {
-          from {opacity: 0;} 
-          to {opacity: 1;}
-        }
-        @keyframes fadeIn {
-          from {opacity: 0;}
-          to {opacity:1 ;}
-        }
-        @media screen and (min-width: 710px) and (max-width: 850px) {
-            .col-8 pt-3 d-flex {
-                float: right;
-                /*display: inline-block;
-                text-align: center;
-                width: auto;
-                left: 30px*/
-            }
-        }
-        @media screen and (min-width: 850px) and (max-width: 1090px) {
-            .popup .popuptext {
-                margin-left: 90px;
-            }
-        }
-        
-        #test{
-            display: flex;
-            align-items: baseline;
-            justify-content: center;
-        }
-        .test-2{
-            margin-left: 100px;
-            cursor: pointer;
-        }
-        
-        #test-4{
-            position: absolute; 
-            float: right; 
-            margin-top: -5px; 
-            right: 50px;
-        }
-        
-        @media screen and (max-width: 991px) {
-            #test-3{
-                margin-left: 68%;
-                margin-top: -20px;
-            }
-        }
-        
-        @media screen and (max-width: 950px) {
-            .test-2{
-                margin-left: 50px;
-                margin-right: 10px;
-            }
-        }
-        
-        @media screen and (max-width: 375px) {
-            #test-4{
-                right: 5px;
-            }
-        }
     .mail-container {
       padding: 0;
       margin:0;
@@ -628,10 +112,7 @@
     color: royalblue;
     size: 11px;
     }
-    .last-bar {
-      padding-top: 70px;
-      background-color: #fff;
-    }
+    
     .last-bar button{
       float: right;
     margin-top: 20px;
@@ -642,29 +123,21 @@
 
     }
     .session-first {
-      font-size: 12px;
+      font-size: 15px;
       padding: 10px;
-      width: 90%;
       margin: auto;
-      background-color: #b1b1b1;
     }
     .session-second {
+      font-size: 15px;
       padding: 10px;
-      font-size: 12px;
-      width: 90%;
-      text-align: center;
-      margin-left: auto;
-      margin-right: auto;
-      margin-top: 11px;
-      background-color: #171717;
-      color: whitesmoke;
+      margin: auto;
     }
     #newletter-head {
       text-align: center;
       font-weight: bold;
-      padding: 5px;
-      font-size: 15px;
-      
+      padding: 10px;
+      font-size: 13px;
+      border-bottom: 1px solid rgb(197, 192, 192);
     }
     .span-nav .active {
         padding-right: 20px;
@@ -764,6 +237,18 @@
         background:white;
         display:none;
         } 
+
+        #popup3{
+        position: fixed;
+        bottom: 40%;
+        left: 75%;
+        width:500px;
+        height: 450px;
+        margin-bottom: -120px;
+        margin-left: -200px;
+        background:white;
+        display:none;
+        } 
         #opacity{
          background: rgb(6,0,1);
 background: linear-gradient(90deg, rgba(6,0,1,0.9724264705882353) 0%, rgba(9,5,6,0.9724264705882353) 45%, rgba(3,0,0,0.9668242296918768) 100%);
@@ -772,12 +257,283 @@
 
         }
         
+.p-1:hover {
+background-color: white;
+border-radius: 10px;
+}
+
+.notification-box img {
+    margin: 10px;
+    margin-left: 20px;
+    margin-right: -10px;
+    padding: 14px;
+}
+.notification-box {
+    border: 1px solid #C4C4C4;
+    margin-bottom: 15px;
+    margin-right: 10px;
+    margin-left: 20px;
+    border-radius: 10px;
+    background-color: lightblue;
+}
+.notification-box b {
+    font-family: sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    
+}
+.notification-box span {
+    font-family: sans-serif;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 2
+}
+
+
+
+@media screen and (min-width: 710px) and (max-width: 850px) {
+h1, b, .notification-box {
+    margin-left: 80px;
+}
+}
+
+@media screen and (min-width: 850px) and (max-width: 1090px) {
+h1, b, .notification-box, .popuptext {
+    margin-left: 70px;
+}
+}
+
+
+/* Dropdown Button */
+.dropbtn {
+  background-color: white;
+  border: 1px solid lightblue;
+    border: 10px;
+cursor: pointer;
+width: 98%;
+  font-size: 25px;
+}
+
+/* Dropdown button on hover & focus */
+.dropbtn:hover, .dropbtn:focus {
+  background-color: white;
+  border-radius: 10px;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  /*position: relative;*/
+  display: inline-block;
+  width: 100%;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ display: none;
+  /*position: absolute;*/
+  background-color: #f1f1f1;
+  width: 100%;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  /*z-index: 1;*/
+  overflow: auto;
+}
+
+
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #ddd}
+
+/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+.show {display:block;}
+
+.popup {
+  /*position: relative;*/
+  
+  /*display: inline-block;*/
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* The actual popup */
+.popup .popuptext {
+  visibility: hidden;
+  width: 400px;
+  color: #555;
+  border-radius: 6px;
+  /*padding: 8px 0;*/
+  position: absolute;
+  z-index: 1;
+  top: 15vh;
+  left: -250px;
+  height: 420px;
+   background: white;
+  border: 1px solid #ccc;
+  transition: 1.1s ease-out;
+  box-shadow: 
+    -2rem 2rem 2rem rgba(black, 0.2);
+  filter: blur(0);
+  transform: scale(1);  
+  opacity: 1;
+  /*visibility: visible;
+  &.off {
+    opacity: 0;
+    visibility: hidden;
+    filter: blur(8px);
+    transform: scale(0.33);
+    box-shadow: 1rem 0 0 rgba(black, 0.2);*/
+  
+}
+.popup .notification-box {
+    border: 1px solid grey; 
+    margin-bottom: 5px;
+    margin-right: 5px;
+    margin-left: 5px;
+    border-radius: 5px;
+    background-color: white;
+}
+.popup .notification-box b {
+    font-family: sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    
+}
+
+
+/* Popup arrow */
+.popup .popuptext::after {
+  width: 0; 
+  height: 0; 
+  border-top: 5px solid transparent;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  
+  border-bottom: 5px solid white;
+ content: "";
+  position: absolute;
+  bottom: 100%;
+  right: 25%;
+  margin-left: -5px;
+  border-width: 10px;
+  border-style: solid;
+  /*border-color: #ff  transparent transparent;*/
+}
+
+/* Toggle this class - hide and show the popup */
+.popup .display {
+  visibility: visible;
+  -webkit-animation: fadeIn 1s;
+  animation: fadeIn 1s;
+}
+
+/* Add animation (fade in the popup) */
+@-webkit-keyframes fadeIn {
+  from {opacity: 0;} 
+  to {opacity: 1;}
+}
+
+@keyframes fadeIn {
+  from {opacity: 0;}
+  to {opacity:1 ;}
+}
+@media screen and (min-width: 710px) and (max-width: 850px) {
+    .col-8 pt-3 d-flex {
+        float: right;
+        /*display: inline-block;
+        text-align: center;
+        width: auto;
+        left: 30px*/
+
+
+    }
+}
+@media screen and (min-width: 850px) and (max-width: 1090px) {
+    .popup .popuptext {
+        margin-left: 90px;
+    }
+    }
+
+        textarea {
+  width: 100%;
+  height: 150px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  background-color: #f8f8f8;
+  resize: none;
+}
+#list>li{
+    display:inline;
+    padding:0.5rem; 
+}
+   @media screen and (max-width: 700px) {
+  .container {
+    width: 375px;
+    margin: 30px auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: 600px;
+    justify-content: center;
+    align-content: center;
+  }
+  #list>li{
+    display:none;   
+}
+   }
+
+     /*style for the elipsis message dots*/
+         .move-two {
+        border-bottom: 1px solid rgba(119, 119, 119, 0.2);
+        margin-bottom: 3em;
+        margin-top: 2em;
+    }
+
+    .move-two h2 {
+        font-size: 0.9em;
+        color: #0049B5;
+    }
+
+    .move-two p {
+        font-size: 0.7em;
+        color: #0049B5;
+    }
+
+    .move-two p span a {
+        margin-left: 2em;
+        color: rgba(119, 119, 119, 0.5);
+    }
+
+    .move-two .messageDot {
+        color: #777777;
+        float: right;
+        margin-top: 0;
+    }
+
+    .move-two .messageDot:hover{
+        cursor: pointer;
+    }
+
+    .move-two p span a:hover {
+        text-decoration: none;
+    }
+
+    .dropdown-item {
+        color: #000000;
+        font-size: 0.9em;
+        font-weight: 500;
+    }
 
       </style>
 </head>
 <body>
-  <div id="opacity">
-  <div id="pop">
+    <div id="pop">
+
+ <div id="opacity">
   
   <div class="container-fluid p-0" style="background-color: #FFF;">
         <div class="row " id="body-row">
@@ -791,49 +547,47 @@
                             <span id="collapse-text" class="menu-collapsed">Menu</span>
                         </div>
                     </a>
-                        <a href="#" class="d-flex w-100 justify-content-start align-items-center  list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
+                        <a href="./dashboard_overview.html" class="d-flex w-100 justify-content-start align-items-center  list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
                             <span class="mr-auto">
                                     <img class="mr-auto" src="https://res.cloudinary.com/benjee/image/upload/v1571813970/Vector_excuh3.svg" alt="Dashboard" width="30" height="30">
                                     <span class="menu-collapsed">Dashboard</span>
                                     <span class="submenu-icon ml-auto"></span>
                             </span>  
                         </a>
-
-                        <a href="#" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
-                            <span class="mr-auto">
-                                    <img class="mr-auto" src="https://res.cloudinary.com/benjee/image/upload/v1571813952/Group_46_tnscz9.svg" alt="Apps" width="30" height="30">
-                                    <span class="menu-collapsed">Apps</span>
-                                    <span class="submenu-icon ml-auto"></span>
-                            </span>  
-                        </a>
-                        <a href="#" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
+                        <a href="./mail_supportinbox.html" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
                             <span class="mr-auto">
                                     <img class="mr-auto" src="https://res.cloudinary.com/benjee/image/upload/v1571813955/Group_45_vky2t5.svg" alt="Mail" width="30" height="30">
                                     <span class="menu-collapsed">Mail</span>
                                     <span class="submenu-icon ml-auto"></span>
                             </span>  
                         </a>
-                        <a href="#" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
+                        <a href="#"
+                            class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start"
+                            style="background-color: #0049B5">
                             <span class="mr-auto">
-                                    <img src="https://res.cloudinary.com/benjee/image/upload/v1571813959/Vector_1_sos0vb.svg" alt="Users" width="30" height="30">
-                                    <span class="menu-collapsed">Users</span>
-                                    <span class="submenu-icon ml-auto"></span>
-                            </span>  
+                                <img src="https://res.cloudinary.com/seun007/image/upload/v1572290891/image_2_mjjnfc.png"
+                                    alt="Users" width="30" height="30">
+                                <span class="menu-collapsed">Manage Parks</span>
+                                <span class="submenu-icon ml-auto"></span>
+                            </span>
+                        </a>
+                        <a href="#"
+                            class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start"
+                            style="background-color: #0049B5">
+                            <span class="mr-auto">
+                                <img src="https://res.cloudinary.com/seun007/image/upload/v1572455740/image_1_juyukf.png"
+                                    alt="Users" width="30" height="30">
+                                <span class="menu-collapsed">Noifications</span>
+                                <span class="submenu-icon ml-auto"></span>
+                            </span>
                         </a>
-                        <a href="#" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
+                        <a href="./settings_account.html" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
                             <span class="mr-auto">
                                     <img class="mr-auto" src="https://res.cloudinary.com/benjee/image/upload/v1571813962/Vector_2_zvoqmz.svg" alt="Settings" width="25" height="25">
                                     <span class="menu-collapsed">Settings</span>
                                     <span class="submenu-icon ml-auto"></span>
                             </span>  
                         </a>
-                       <!-- <a href="#" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
-                                <span class="mr-auto">
-                                        <img class="mr-auto" src="https://res.cloudinary.com/benjee/image/upload/v1571904849/Group_47_gq0grj.svg" alt="Settings" width="25" height="25">
-                                        <span class="menu-collapsed">Cancelation Policy</span>
-                                        <span class="submenu-icon ml-auto"></span>
-                                </span>  
-                            </a>-->
                 </ul>
             </div>
             <!--For main content area -->
@@ -856,74 +610,73 @@
                         
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
                         <div class="col-8 pt-3 d-flex">
-                            <div class="d-flex">
-                                <img
-                                src="https://res.cloudinary.com/dfjzditzc/image/upload/v1572447652/Ellipse_1_sjzgqf.png">
-                                <i class="" aria-hidden="true"></i>
+                                <i class="fa fa-user pr-1" aria-hidden="true"></i>
                                 <p class="text-muted">John Travolta</p>
-                            </div>
-                            <div class="col p-0 w-25" id="test-4">
-                                <div class="popup" onclick="popupMessage()"><i class="far fa-bell" style="font-size: 25px;"aria-hidden="true"><i class="fas fa-sort-down"></i></i>                      
-                                <span class="popuptext" style="text-align: center; margin: auto;" id="myPopup"><b>Notifications</b>
-                                    <b style="color: royalblue; margin-left: 65px;">Mark all as read</b>
-                                    <b style="float: right; color: blue; padding-right: 10px;"><a href="./settings_account.html">Settings</a></b><br><br>
-                                    <div style="background-color: lightblue;"><b style="color: blue; padding-right: 350px;"> Now</b></div><br>
-                                
-                                    <div class="notification-box">
-                                        <div class="d-flex bd-highlight">
-                                            <div>
-                                                <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
-                                            </div>
-                                            <div class="p-1 w-100 bd-highlight" style=" font-size: 14px;">
-                                                <p>You have <b style="color: royalblue;">10</b> new requests for carpark Registration.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
-                                                <b style="float: right; color: royalblue; margin-right: 10px;">View Requests</b></a></p>
-                                                <br>
-                                            </div>
-                                        </div>
-                                    </div>
-                                
-                                    <div style="background-color: lightblue;"><b style="color: blue; padding-right: 340px;">Earlier</b></div><br>                                 
-                                    <div class="notification-box">
-                                        <div class="d-flex bd-highlight">
-                                            <div>
-                                                <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
+                                <!--notofication bell and popup codes starts-->
+                                    <div class="popup" onclick="popupMessage()">
+                                        <i class="fas fa-bell mt-1 ml-5"><i class="fa fa-angle-down fa-lg"></i></i>
+                                        <br>
+                                        <span class="popuptext" style="text-align: center; margin: auto;" id="myPopup">
+                                            <div class="notHeadAll mt-1 mb-1">
+                                                <b class="notHead">Notifications</b>
+                                                <b class="notHead" style="color: royalblue;">Mark all as read</b>
+                                                <b class="notHead" style="float: right; color: rgba(16, 119, 255, 0.7);"><a href="./settings_account.html">Settings</a></b>
+                                            </div>    
+                                            <div class="mb-1" style="background-color: lightblue;"><b style="color: rgba(16, 119, 255, 0.7); padding-right: 350px;"> Now</b></div>
+                                            <div class="notification-box">
+                                                <div class="d-flex bd-highlight">
+                                                    <div>
+                                                        <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
+                                                    </div>
+                                                    <div class="p-1 w-100 bd-highlight" style=" font-size: 14px;">
+                                                        <p>You have <b style="color: royalblue;">10</b> new requests for carpark Registration.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
+                                                        <b style="float: right; color: royalblue; margin-right: 10px;">View Requests</b></a></p>
+                                                        <br>
+                                                    </div>
+                                                </div>
                                             </div>
-                                            <div class="p-1 w-100 bd-highlight" style="font-size: 14px;">
-                                                <p>You have <b style="color: royalblue;">15</b> new <b style="color: royalblue;">issues</b> from carpark customers.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
-                                                <b style="float: right; color: royalblue; margin-right: 10px;">View issue</b></a></p>
-                                                <br>
+                                            <div class="mb-1"  style="background-color: lightblue;"><b style="color: blue; padding-right: 340px;">Earlier</b></div>
+                                            <div class="notification-box">
+                                                <div class="d-flex bd-highlight">
+                                                    <div>
+                                                        <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
+                                                    </div>
+                                                    <div class="p-1 w-100 bd-highlight" style="font-size: 14px;">
+                                                        <p>You have <b style="color: royalblue;">15</b> new <b style="color: royalblue;">issues</b> from carpark customers.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
+                                                        <b style="float: right; color: royalblue; margin-right: 10px;">View issue</b></a></p>
+                                                        <br>
+                                                    </div>
+                                                </div>
                                             </div>
-                                        </div>
-                                    </div>
-                                
-                                    <div class="notification-box">
-                                        <div class="d-flex bd-highlight">
-                                            <div>
-                                                <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
+                                            <div class="notification-box">
+                                                <div class="d-flex bd-highlight">
+                                                    <div>
+                                                        <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
+                                                    </div>
+                                                    <div class="p-1 w-100 bd-highlight" style="font-size: 14px;">
+                                                        <p>You have <b style="color: royalblue;">15</b> new <b style="color: royalblue;">issues</b> from carpark customers.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
+                                                        <b style="float: right; color: royalblue; margin-right: 10px;">View issue</b></a></p>
+                                                        <br>
+                                                    </div>
+                                                </div>
                                             </div>
-                                            <div class="p-1 w-100 bd-highlight" style="font-size: 14px;">
-                                                <p>You have <b style="color: royalblue;">15</b> new <b style="color: royalblue;">issues</b> from carpark customers.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
-                                                <b style="float: right; color: royalblue; margin-right: 10px;">View issue</b></a></p>
-                                                <br>
+                                            <div style="background-color: royalblue; width: 100%" class="notBottom mb-3">
+                                                <b><a href="notification.html"  style="color: white; padding-right: 10px; text-decoration: none;"> See All</a></b>
                                             </div>
-                                        </div>
-                                    </div>
-                                    <div style="background-color: royalblue; width: 100%">
-                                        <b><a href="notification.html"  style="color: white; padding-right: 10px; text-decoration: none;"> See All</a></b>
+                                        </span>
                                     </div>
-                                </span>
-                                </div>
-                            </div>
+                                    <!--notofication bell and popup codes starts-->
+
                         </div>
-                            <div class="col-4  d-flex border-left justify-content-end" id="test-3">
+                        <div class="col-4  d-flex border-left justify-content-end">
                                 <img src="https://res.cloudinary.com/benjee/image/upload/v1571821721/Rectangle_15_cj6nwd.svg" alt="EN" width="25" height="25">
                                 <span class="text-muted pl-2">EN</span>
-                            </div>
+                        </div>
                     </div>
                 </nav>
                 <div class="col main p-3 text-white" style="background:#1A73E8;">
                     <div class="col">
-                        <h1 style="font-size: 35px">Welcome back Admin</h1>
+                        <h1 style="font-size: 35px"></h1>
                         <h6 class="pt-2">CAR PARK APPLICATION </h6>
                     </div>
                 </div>
@@ -933,40 +686,28 @@ <h6 class="pt-2">CAR PARK APPLICATION </h6>
                             <a class="nav-link  active text-muted border-bottom border-primary" href="./mail_mailcampaign.html">Campaign</a>
                         </nav>
                 </div>
+
+
                 <div>
                   <!-- My Work Starts here -->
     <div class="mail-container container max-width">
     <div class="row ml-reset">
     <div class="col-sm-2 mail-side-bar">
-        <a href="./mail_mailcampaign_compose.html">
-          <button class="compose">Compose <span>+</span></button>
-          </a>
+      < <a href="mail_mailcampaign_compose_update.html"><button class="compose" style="text-decoration: none; color: white;">Compose <span>+</span></button></a>
       <ul>
-        <li>
-            <a href="./mail_mailcampaign.html">
+        <a href="mail_mailcampaign.html" style="text-decoration: none; color: white;"><li>
           <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/All_lpndxk.svg" alt="All">
-            </a>
-          All
-        </li>
-        <li>
-            <a href="./mail_mailcampaignongoing.html">
-                <img src="https://res.cloudinary.com/kayode/image/upload/v1571831583/cars/Arrow_vmii5g.svg" alt="->" a href="./mail_mailcampaignongoing.html">
-            </a>
-          Ongoing
-        </li>
-        <li>
-            <a href="./mail_mailcampaigndraft.html">
-                <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/draft_k9nyhc.svg" alt="Draft">
-            </a>
-          Draft
-        </li>
-        <li>
-            <a href="./mail_mailcampaigncompleted.html">
-                <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/completed_csrvtb.svg" alt="Completed">
-            </a>
-          Completed
-        </li>
-        <a href="#" id="Automation" onclick="automate()" style="text-decoration: none; color: white;"><li>
+          All</li></a>
+
+        <a href="mail_mailcampaignongoing_update.html" style="text-decoration: none; color: white;"><li>
+                <img src="https://res.cloudinary.com/kayode/image/upload/v1571831583/cars/Arrow_vmii5g.svg" alt="->" a href="ongoing">Ongoing</li></a>
+        <a href="mail_mailcampaigndraft.html" style="text-decoration: none; color: white;"><li>
+            
+                <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/draft_k9nyhc.svg" alt="Draft">Draft</li> </a>
+
+        <a href="mail_mailcampaigncompleted.html" style="text-decoration: none; color: white;"><li><img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/completed_csrvtb.svg" alt="Completed">Completed</li></a>
+
+        <a href="mail_mailcampaign.html" id="Automation"style="text-decoration: none; color: white;"><li>
                 <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/Automation_g0qdiq.svg" alt="Automation"> Automation
             </li></a>
       
@@ -985,7 +726,7 @@ <h6 class="pt-2">CAR PARK APPLICATION </h6>
               </p>
               <p>
                 <span ><small>1215 Recipient</small></span>
-                <span id="sent" ><small>Message Sent</small></span>
+                <span id="sent" ><small>Draft</small></span>
               </p>
             </div>
           </div>
@@ -1000,54 +741,35 @@ <h6 class="pt-2">CAR PARK APPLICATION </h6>
               </p>
               <p>
                 <span ><small>1215 Recipient</small></span>
-                <span id="sent" ><small>Message Sent</small></span>
+                <span id="sent" ><small>Draft</small></span>
               </p>
             </div>
           </div>
-        
-                            <div class="marketting">
-                                <div class="marketting-head">
-                                    <h5>Integrate with best Email Marketing Softwares</h5>
-                                    <small>Add respondent names and emails to Subscribers list <span
-                                            id="show-display" class="pointer"><i class="fa fa-angle-up"
-                                                style="font-size: 20px; position: absolute; right: 18px !important;"></i><i class="fa fa-angle-down down-java"
-                                                style="font-size: 20px; position: absolute; right: 18px !important;"></i></span></small>
-                                </div>
-                                <hr>
-                                <div class="list-items">
-                                    <div class="list-item">
-                                        <img src="https://res.cloudinary.com/kayode/image/upload/v1571831585/cars/head_dwwk4x.svg"
-                                            alt="">
-                                        <p class="list-item-p">Integrated</p>
-                                    </div>
-                                    <hr>
-                                    <div class="list-item">
-                                        <img src="https://res.cloudinary.com/kayode/image/upload/v1571831585/cars/hubsport_xhkljw.svg"
-                                            alt="">
-                                        <p class="list-item-p">Integrated</p>
-                                    </div>
-                                    <hr>
-                                    <div class="list-item">
-                                        <img src="https://res.cloudinary.com/kayode/image/upload/v1571831586/cars/sendblue_elymyd.svg"
-                                            alt="">
-                                        <p class="list-item-p">Integrated</p>
-                                    </div>
-                                    <hr>
-                                    <div class="list-item">
-                                        <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/constant_hqp3rw.svg"
-                                            alt="">
-                                        <p class="list-item-p">Integrated</p>
-                                    </div>
-                                    <hr>
-                                    <div class="see-more">
-                                        <p>See more</p>
-                                        <i class="fa fa-angle-double-right" style="font-size: 20px; margin-left: 14px; padding-top: 3px;"></i>
-                                    </div>
-                                </div>
-
-                            </div>
-                        </div>
-
+          <div class="marketting">
+              <div class="marketting-head">
+                <h5>Integrate with best Email Marketing Softwares</h5>
+                <small>Add respondent names and emails to Subscribers list</small>
+              </div>
+              <ul>
+                <li>
+                  <img src="https://res.cloudinary.com/kayode/image/upload/v1571831585/cars/head_dwwk4x.svg" alt="">
+                  <span><small>integrated</small></span>
+                </li>
+                <li>
+                  <img src="https://res.cloudinary.com/kayode/image/upload/v1571831585/cars/hubsport_xhkljw.svg" alt="">
+                  <span><small>integrated</small></span>
+                </li>
+                <li>
+                  <img src="https://res.cloudinary.com/kayode/image/upload/v1571831586/cars/sendblue_elymyd.svg" alt="">
+                  <span><small>integrated</small></span>
+                </li>
+                <li>
+                  <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/constant_hqp3rw.svg" alt="">
+                  <span><small>integrated</small></span>
+                </li>
+              </ul>
+          </div>
+        </div>
         <div class="last-bar col-sm-6">
           <a href=""><p style="font-size: 15px; margin-right: 60px; color:#0049B5;float: right;margin-top: 5%;text-decoration: none;"><i>edit</i></p></a>
         <div style=""><p id="newletter-head"><h4 style="text-align: center;font-size: 20px; margin-top: 0px; float: left; margin-left: 25%;"><b>Say Happy Birthday Campaign</b></h4></p><br></div>
@@ -1242,53 +964,8 @@ <h2 style="text-align: center;margin-top: 20px;margin-bottom: 20px;">Recurring D
     $('.submenu-icon').toggleClass('d-none');
     $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
     
-                // Collapse/Expand icon
-                $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
-            })
-
-
-            const up = document.querySelector('.fa-angle-up');
-            const list = document.querySelector('.list-items');
-            const down = document.querySelector('.down-java');
-            up.addEventListener('click', () => {
-                list.style.display = 'none';
-                up.style.display = 'none'
-                down.style.display = 'block'
-            })
-
-            down.addEventListener('click', () => {
-                list.style.display = 'block';
-                up.style.display = 'block'
-                down.style.display = 'none'
-            })
-            // When the user clicks on div, open the popup
-
-    function popupMessage() {
-        var popup = document.getElementById("myPopup");
-        popup.classList.toggle("display");
-      }
-
-/* toggle between hiding and showing the dropdown content */
-      function myFunction() {
-        document.getElementById("myDropdown").classList.toggle("show");
-      }
-
-      // Close the dropdown menu if the user clicks outside of it
-      window.onclick = function(event) {
-        if (!event.target.matches('.dropbtn')) {
-          var dropdowns = document.getElementsByClassName("dropdown-content");
-          var i;
-          for (i = 0; i < dropdowns.length; i++) {
-            var openDropdown = dropdowns[i];
-            if (openDropdown.classList.contains('show')) {
-              openDropdown.classList.remove('show');
-            }
-          }
-        }
-      }
-
-$(function () {
-  $('[data-toggle="popover"]').popover()
+    // Collapse/Expand icon
+    $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
 })
 //pop-up and mail automation starts here
 
diff --git a/mail_mailcampaign-proceed.html b/mail_mailcampaign-proceed.html
index 6667d68..c8d50a6 100644
--- a/mail_mailcampaign-proceed.html
+++ b/mail_mailcampaign-proceed.html
@@ -7,530 +7,14 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-  <title>Mail-Campaign </title>
+  <title>Mail-Campaign</title>
+  <link
+      rel="icon"
+      href="https://res.cloudinary.com/seun007/image/upload/v1572520438/image_3_zznsc1.png"
+      type="image/gif"
+      sizes="5x16"
+    />
   <style>
-              .mail-container {
-              padding: 0;
-              margin:0;
-            }
-            .mail-side-bar {
-              background-color:#1A73E8;
-              color: #fff;
-              font-family: 'Roboto', sans-serif;
-              padding-left: 0px;
-              padding-top: 42px;
-              padding-bottom: 59px;
-            }
-            .mail-side-bar ul {
-              padding-top: 59px;
-            }
-            .mail-side-bar ul li {
-              list-style-type: none;
-              padding-bottom: 30px;
-            }
-            .mail-side-bar ul li img {
-              padding-right: 10px;
-            }
-            .compose {
-              color: white;
-              width: 180px;
-              border: 0;
-              height: 50px;
-              background-color: #5cb5ff;
-              border-radius: 0px 25px 25px 0px;
-              font-weight: bolder;
-            }
-            .compose span {
-              padding-left: 46px;
-            }
-            .mail-main-bar {
-              margin: 0;
-              padding: 0;
-            }
-            .read-mail {
-              background-color: #f6f6f6;
-              padding: 70px 25px 25px 25px;
-            }
-            .mail {
-              box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
-              background-color: #fff;
-              margin-top: 2px;
-              font-size: 13px;
-            }
-            .read-mail div img {
-              padding-top: 10px;
-              padding-bottom: 10px;
-            }
-            .mail span small {
-              color: #0049B5;
-              font-size: 11px;
-            }
-            .p-first {
-              box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
-            }
-            #sent {
-              float: right;
-            }
-            #span-first {
-              float: right;
-            }
-            .tym {
-              padding-right: 9px;
-            }
-            .marketting {
-              background-color: #fff;
-              margin-top: 200px;
-              padding: 10px;
-            }
-            .marketting .marketting-head {
-              text-align: center;
-            }
-            .marketting .marketting-head h5 {
-              color: #5cb5ff;
-            }
-            .marketting .marketting-head {
-              color: #b1bbb1;
-            }
-            .marketting ul li {
-              list-style-type: none;
-              box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
-              padding: 5px;
-            }
-            .marketting ul li span {
-            float: right;
-            color: royalblue;
-            size: 11px;
-            }
-            .last-bar {
-              padding-top: 70px;
-              background-color: #fff;
-            }
-            .last-bar button{
-              float: right;
-            margin-top: 20px;
-            margin-right: 20px;
-            margin-bottom: 40px;
-            padding-left: 30px;
-            padding-right: 30px;
-            }
-            .session-first {
-              font-size: 12px;
-              padding: 10px;
-              width: 90%;
-              margin: auto;
-              background-color: #b1b1b1;
-            }
-            .session-second {
-              padding: 10px;
-              font-size: 12px;
-              width: 90%;
-              text-align: center;
-              margin-left: auto;
-              margin-right: auto;
-              margin-top: 11px;
-              background-color: #171717;
-              color: whitesmoke;
-            }
-            #newletter-head {
-              text-align: center;
-              font-weight: bold;
-              padding: 10px;
-              font-size: 13px;
-              border-bottom: 1px solid rgb(197, 192, 192);
-              margin-bottom: 10px;
-            }
-            .span-nav .active {
-                padding-right: 20px;
-                border-bottom: 1px solid #0049B5;
-              }
-              #body-row {
-                    margin-left:0;
-                    margin-right:0;
-                }
-                #sidebar-container {
-                    min-height: 100vh;   
-                    background-color: #0049B5;
-                    padding: 0;
-                }
-                /* Sidebar sizes when expanded and expanded */
-                .sidebar-expanded {
-                    width: 230px;
-                }
-                .sidebar-collapsed {
-                    width: 60px;
-                }
-                /* Menu item*/
-                #sidebar-container .list-group a {
-                    height: 50px;
-                    color: white;
-                }
-                /* Submenu item*/
-                #sidebar-container .list-group .sidebar-submenu a {
-                    height: 45px;
-                    padding-left: 30px;
-                }
-                .sidebar-submenu {
-                    font-size: 0.9rem;
-                }
-                /* Separators */
-                .sidebar-separator-title {
-                    background-color: #0049B5;
-                    height: 35px;
-                }
-                .sidebar-separator {
-                    background-color: #0049B5;
-                    height: 25px;
-                }
-                .logo-separator {
-                    background-color: #0049B5;    
-                    height: 60px;
-                }
-                /* Closed submenu icon */
-                #sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
-                content: " \f0d7";
-                font-family: FontAwesome;
-                display: inline;
-                text-align: right;
-                padding-left: 10px;
-                }
-                /* Opened submenu icon */
-                #sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
-                content: " \f0da";
-                font-family: FontAwesome;
-                display: inline;
-                text-align: right;
-                padding-left: 10px;
-                }
-                .max-width {
-                  max-width: 98.5%;
-                }
-                .ml-reset {
-                  margin-left: 0px;
-                }
-                .campaign {
-                  margin-bottom: 3px;
-                }
-        
-        /*Pop-up starts here*/
-        .welcome-row {
-                    background-color: #1A73E8;
-                }
-                hgroup {
-                    color: #fff;
-                }
-                hgroup>h1 {
-                    font-size: 2em;
-                    font-weight: 100;
-                }
-                hgroup>h2 {
-                    font-size: 1em;
-                    font-weight: 100;
-                    letter-spacing: 0.05em;
-                }
-               .span-nav .active {
-                padding-right: 20px;
-                border-bottom: 1px solid #0049B5;
-              }
-              #body-row {
-                    margin-left: 0;
-                    margin-right: 0;
-                }
-                #sidebar-container {
-                    min-height: 100vh;  
-                    background-color: #0049B5;
-                    padding: 0;
-                }
-                /* Sidebar sizes when expanded and expanded */
-                .sidebar-expanded {
-                    width: 230px;
-                }
-                .sidebar-collapsed {
-                    width: 60px;
-                }
-                /* Menu item*/
-                #sidebar-container .list-group a {
-                    height: 50px;
-                    color: white;
-                }
-                /* Submenu item*/
-                #sidebar-container .list-group .sidebar-submenu a {
-                    height: 45px;
-                    padding-left: 30px;
-                }
-                .sidebar-submenu {
-                    font-size: 0.9rem;
-                }
-                /* Separators */
-                .sidebar-separator-title {
-                    background-color: #0049B5;
-                    height: 35px;
-                }
-                .sidebar-separator {
-                    background-color: #0049B5;
-                    height: 25px;
-                }
-                .logo-separator {
-                    background-color: #0049B5;    
-                    height: 60px;
-                }
-                
-                /* Closed submenu icon */
-                #sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
-                content: " \f0d7";
-                font-family: FontAwesome;
-                display: inline;
-                text-align: right;
-                padding-left: 10px;
-                }
-               
-                /*.max-width {
-                  max-width: 98.5%;
-                }*/
-                 /* Opened submenu icon */
-                #sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
-                    content: " \f0da";
-                    font-family: FontAwesome;
-                    display: inline;
-                    text-align: right;
-                    padding-left: 10px;
-                }
-                
-                /* {
-            box-sizing: border-box;
-        }
-        body {
-            min-height: 100vh;
-            min-width: 100vw;
-            width: 100;
-        }*/
-        .p-1:hover {
-        background-color: white;
-        border-radius: 10px;
-        }
-        .notification-box img {
-            margin: 10px;
-            margin-left: 20px;
-            margin-right: -10px;
-            padding: 14px;
-        }
-        .notification-box {
-            border: 1px solid #C4C4C4;
-            margin-bottom: 15px;
-            margin-right: 10px;
-            margin-left: 20px;
-            border-radius: 10px;
-            background-color: lightblue;
-        }
-        .notification-box b {
-            font-family: sans-serif;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 14px;
-            
-        }
-        .notification-box span {
-            font-family: sans-serif;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 14px;
-            line-height: 2
-        }
-        p {
-            font-family: sans-serif;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            margin-bottom: 0px;
-        }
-        @media screen and (min-width: 710px) and (max-width: 850px) {
-        h1, b, .notification-box {
-            margin-left: 80px;
-        }
-        }
-        @media screen and (min-width: 850px) and (max-width: 1090px) {
-        h1, b, .notification-box, .popuptext {
-            margin-left: 70px;
-        }
-        }
-        /* Dropdown Button */
-        .dropbtn {
-          background-color: white;
-          border: 1px solid lightblue;
-            border: 10px;
-        cursor: pointer;
-        width: 98%;
-          font-size: 25px;
-        }
-        /* Dropdown button on hover & focus */
-        .dropbtn:hover, .dropbtn:focus {
-          background-color: white;
-          border-radius: 10px;
-        }
-        /* The container <div> - needed to position the dropdown content */
-        .dropdown {
-          /*position: relative;*/
-          display: inline-block;
-          width: 100%;
-        }
-        /* Dropdown Content (Hidden by Default) */
-        .dropdown-content {
-         display: none;
-          /*position: absolute;*/
-          background-color: #f1f1f1;
-          width: 100%;
-          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-          /*z-index: 1;*/
-          overflow: auto;
-        }
-        /* Change color of dropdown links on hover */
-        .dropdown-content a:hover {background-color: #ddd}
-        /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
-        .show {display:block;}
-        .popup {
-          /*position: relative;*/
-          
-          /*display: inline-block;*/
-          cursor: pointer;
-          -webkit-user-select: none;
-          -moz-user-select: none;
-          -ms-user-select: none;
-          user-select: none;
-        }
-        /* The actual popup */
-        .popup .popuptext {
-          visibility: hidden;
-          width: 400px;
-          color: #555;
-          border-radius: 6px;
-          /*padding: 8px 0;*/
-          position: absolute;
-          z-index: 1;
-          top: 15vh;
-          left: -250px;
-          height: 420px;
-           background: white;
-          border: 1px solid #ccc;
-          transition: 1.1s ease-out;
-          box-shadow: 
-            -2rem 2rem 2rem rgba(black, 0.2);
-          filter: blur(0);
-          transform: scale(1);  
-          opacity: 1;
-          /*visibility: visible;
-          &.off {
-            opacity: 0;
-            visibility: hidden;
-            filter: blur(8px);
-            transform: scale(0.33);
-            box-shadow: 1rem 0 0 rgba(black, 0.2);*/
-          
-        }
-        .popup .notification-box {
-            border: 1px solid grey; 
-            margin-bottom: 5px;
-            margin-right: 5px;
-            margin-left: 5px;
-            border-radius: 5px;
-            background-color: white;
-        }
-        .popup .notification-box b {
-            font-family: sans-serif;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 14px;
-            
-        }
-        p {
-            font-family: sans-serif;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            margin-bottom: 0px;
-        }
-        /* Popup arrow */
-        .popup .popuptext::after {
-          width: 0; 
-          height: 0; 
-          border-top: 5px solid transparent;
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          
-          border-bottom: 5px solid white;
-         content: "";
-          position: absolute;
-          bottom: 100%;
-          right: 25%;
-          margin-left: -5px;
-          border-width: 10px;
-          border-style: solid;
-          /*border-color: #ff  transparent transparent;*/
-        }
-        /* Toggle this class - hide and show the popup */
-        .popup .display {
-          visibility: visible;
-          -webkit-animation: fadeIn 1s;
-          animation: fadeIn 1s;
-        }
-        /* Add animation (fade in the popup) */
-        @-webkit-keyframes fadeIn {
-          from {opacity: 0;} 
-          to {opacity: 1;}
-        }
-        @keyframes fadeIn {
-          from {opacity: 0;}
-          to {opacity:1 ;}
-        }
-        @media screen and (min-width: 710px) and (max-width: 850px) {
-            .col-8 pt-3 d-flex {
-                float: right;
-                /*display: inline-block;
-                text-align: center;
-                width: auto;
-                left: 30px*/
-            }
-        }
-        @media screen and (min-width: 850px) and (max-width: 1090px) {
-            .popup .popuptext {
-                margin-left: 90px;
-            }
-        }
-        
-        #test{
-            display: flex;
-            align-items: baseline;
-            justify-content: center;
-        }
-        .test-2{
-            margin-left: 100px;
-            cursor: pointer;
-        }
-        
-        #test-4{
-            position: absolute; 
-            float: right; 
-            margin-top: -5px; 
-            right: 50px;
-        }
-        
-        @media screen and (max-width: 991px) {
-            #test-3{
-                margin-left: 68%;
-                margin-top: -20px;
-            }
-        }
-        
-        @media screen and (max-width: 950px) {
-            .test-2{
-                margin-left: 50px;
-                margin-right: 10px;
-            }
-        }
-        
-        @media screen and (max-width: 375px) {
-            #test-4{
-                right: 5px;
-            }
-        }  
     .mail-container {
       padding: 0;
       margin:0;
@@ -628,10 +112,7 @@
     color: royalblue;
     size: 11px;
     }
-    .last-bar {
-      padding-top: 70px;
-      background-color: #fff;
-    }
+    
     .last-bar button{
       float: right;
     margin-top: 20px;
@@ -642,29 +123,21 @@
 
     }
     .session-first {
-      font-size: 12px;
+      font-size: 15px;
       padding: 10px;
-      width: 90%;
       margin: auto;
-      background-color: #b1b1b1;
     }
     .session-second {
+      font-size: 15px;
       padding: 10px;
-      font-size: 12px;
-      width: 90%;
-      text-align: center;
-      margin-left: auto;
-      margin-right: auto;
-      margin-top: 11px;
-      background-color: #171717;
-      color: whitesmoke;
+      margin: auto;
     }
     #newletter-head {
       text-align: center;
       font-weight: bold;
-      padding: 5px;
-      font-size: 15px;
-      
+      padding: 10px;
+      font-size: 13px;
+      border-bottom: 1px solid rgb(197, 192, 192);
     }
     .span-nav .active {
         padding-right: 20px;
@@ -764,6 +237,18 @@
         background:white;
         display:none;
         } 
+
+        #popup3{
+        position: fixed;
+        bottom: 40%;
+        left: 75%;
+        width:500px;
+        height: 450px;
+        margin-bottom: -120px;
+        margin-left: -200px;
+        background:white;
+        display:none;
+        } 
         #opacity{
          background: rgb(6,0,1);
 background: linear-gradient(90deg, rgba(6,0,1,0.9724264705882353) 0%, rgba(9,5,6,0.9724264705882353) 45%, rgba(3,0,0,0.9668242296918768) 100%);
@@ -772,12 +257,283 @@
 
         }
         
+.p-1:hover {
+background-color: white;
+border-radius: 10px;
+}
+
+.notification-box img {
+    margin: 10px;
+    margin-left: 20px;
+    margin-right: -10px;
+    padding: 14px;
+}
+.notification-box {
+    border: 1px solid #C4C4C4;
+    margin-bottom: 15px;
+    margin-right: 10px;
+    margin-left: 20px;
+    border-radius: 10px;
+    background-color: lightblue;
+}
+.notification-box b {
+    font-family: sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    
+}
+.notification-box span {
+    font-family: sans-serif;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 2
+}
+
+
+
+@media screen and (min-width: 710px) and (max-width: 850px) {
+h1, b, .notification-box {
+    margin-left: 80px;
+}
+}
+
+@media screen and (min-width: 850px) and (max-width: 1090px) {
+h1, b, .notification-box, .popuptext {
+    margin-left: 70px;
+}
+}
+
+
+/* Dropdown Button */
+.dropbtn {
+  background-color: white;
+  border: 1px solid lightblue;
+    border: 10px;
+cursor: pointer;
+width: 98%;
+  font-size: 25px;
+}
+
+/* Dropdown button on hover & focus */
+.dropbtn:hover, .dropbtn:focus {
+  background-color: white;
+  border-radius: 10px;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  /*position: relative;*/
+  display: inline-block;
+  width: 100%;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ display: none;
+  /*position: absolute;*/
+  background-color: #f1f1f1;
+  width: 100%;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  /*z-index: 1;*/
+  overflow: auto;
+}
+
+
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #ddd}
+
+/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+.show {display:block;}
+
+.popup {
+  /*position: relative;*/
+  
+  /*display: inline-block;*/
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* The actual popup */
+.popup .popuptext {
+  visibility: hidden;
+  width: 400px;
+  color: #555;
+  border-radius: 6px;
+  /*padding: 8px 0;*/
+  position: absolute;
+  z-index: 1;
+  top: 15vh;
+  left: -250px;
+  height: 420px;
+   background: white;
+  border: 1px solid #ccc;
+  transition: 1.1s ease-out;
+  box-shadow: 
+    -2rem 2rem 2rem rgba(black, 0.2);
+  filter: blur(0);
+  transform: scale(1);  
+  opacity: 1;
+  /*visibility: visible;
+  &.off {
+    opacity: 0;
+    visibility: hidden;
+    filter: blur(8px);
+    transform: scale(0.33);
+    box-shadow: 1rem 0 0 rgba(black, 0.2);*/
+  
+}
+.popup .notification-box {
+    border: 1px solid grey; 
+    margin-bottom: 5px;
+    margin-right: 5px;
+    margin-left: 5px;
+    border-radius: 5px;
+    background-color: white;
+}
+.popup .notification-box b {
+    font-family: sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    
+}
+
+
+/* Popup arrow */
+.popup .popuptext::after {
+  width: 0; 
+  height: 0; 
+  border-top: 5px solid transparent;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  
+  border-bottom: 5px solid white;
+ content: "";
+  position: absolute;
+  bottom: 100%;
+  right: 25%;
+  margin-left: -5px;
+  border-width: 10px;
+  border-style: solid;
+  /*border-color: #ff  transparent transparent;*/
+}
+
+/* Toggle this class - hide and show the popup */
+.popup .display {
+  visibility: visible;
+  -webkit-animation: fadeIn 1s;
+  animation: fadeIn 1s;
+}
+
+/* Add animation (fade in the popup) */
+@-webkit-keyframes fadeIn {
+  from {opacity: 0;} 
+  to {opacity: 1;}
+}
+
+@keyframes fadeIn {
+  from {opacity: 0;}
+  to {opacity:1 ;}
+}
+@media screen and (min-width: 710px) and (max-width: 850px) {
+    .col-8 pt-3 d-flex {
+        float: right;
+        /*display: inline-block;
+        text-align: center;
+        width: auto;
+        left: 30px*/
+
+
+    }
+}
+@media screen and (min-width: 850px) and (max-width: 1090px) {
+    .popup .popuptext {
+        margin-left: 90px;
+    }
+    }
+
+        textarea {
+  width: 100%;
+  height: 150px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  background-color: #f8f8f8;
+  resize: none;
+}
+#list>li{
+    display:inline;
+    padding:0.5rem; 
+}
+   @media screen and (max-width: 700px) {
+  .container {
+    width: 375px;
+    margin: 30px auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: 600px;
+    justify-content: center;
+    align-content: center;
+  }
+  #list>li{
+    display:none;   
+}
+   }
+
+     /*style for the elipsis message dots*/
+         .move-two {
+        border-bottom: 1px solid rgba(119, 119, 119, 0.2);
+        margin-bottom: 3em;
+        margin-top: 2em;
+    }
+
+    .move-two h2 {
+        font-size: 0.9em;
+        color: #0049B5;
+    }
+
+    .move-two p {
+        font-size: 0.7em;
+        color: #0049B5;
+    }
+
+    .move-two p span a {
+        margin-left: 2em;
+        color: rgba(119, 119, 119, 0.5);
+    }
+
+    .move-two .messageDot {
+        color: #777777;
+        float: right;
+        margin-top: 0;
+    }
+
+    .move-two .messageDot:hover{
+        cursor: pointer;
+    }
+
+    .move-two p span a:hover {
+        text-decoration: none;
+    }
+
+    .dropdown-item {
+        color: #000000;
+        font-size: 0.9em;
+        font-weight: 500;
+    }
 
       </style>
 </head>
 <body>
-  <div id="opacity">
-  <div id="pop">
+    <div id="pop">
+
+ <div id="opacity">
   
   <div class="container-fluid p-0" style="background-color: #FFF;">
         <div class="row " id="body-row">
@@ -791,49 +547,47 @@
                             <span id="collapse-text" class="menu-collapsed">Menu</span>
                         </div>
                     </a>
-                        <a href="#" class="d-flex w-100 justify-content-start align-items-center  list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
+                        <a href="./dashboard_overview.html" class="d-flex w-100 justify-content-start align-items-center  list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
                             <span class="mr-auto">
                                     <img class="mr-auto" src="https://res.cloudinary.com/benjee/image/upload/v1571813970/Vector_excuh3.svg" alt="Dashboard" width="30" height="30">
                                     <span class="menu-collapsed">Dashboard</span>
                                     <span class="submenu-icon ml-auto"></span>
                             </span>  
                         </a>
-
-                        <a href="#" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
-                            <span class="mr-auto">
-                                    <img class="mr-auto" src="https://res.cloudinary.com/benjee/image/upload/v1571813952/Group_46_tnscz9.svg" alt="Apps" width="30" height="30">
-                                    <span class="menu-collapsed">Apps</span>
-                                    <span class="submenu-icon ml-auto"></span>
-                            </span>  
-                        </a>
-                        <a href="#" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
+                        <a href="./mail_supportinbox.html" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
                             <span class="mr-auto">
                                     <img class="mr-auto" src="https://res.cloudinary.com/benjee/image/upload/v1571813955/Group_45_vky2t5.svg" alt="Mail" width="30" height="30">
                                     <span class="menu-collapsed">Mail</span>
                                     <span class="submenu-icon ml-auto"></span>
                             </span>  
                         </a>
-                        <a href="#" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
+                        <a href="#"
+                            class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start"
+                            style="background-color: #0049B5">
                             <span class="mr-auto">
-                                    <img src="https://res.cloudinary.com/benjee/image/upload/v1571813959/Vector_1_sos0vb.svg" alt="Users" width="30" height="30">
-                                    <span class="menu-collapsed">Users</span>
-                                    <span class="submenu-icon ml-auto"></span>
-                            </span>  
+                                <img src="https://res.cloudinary.com/seun007/image/upload/v1572290891/image_2_mjjnfc.png"
+                                    alt="Users" width="30" height="30">
+                                <span class="menu-collapsed">Manage Parks</span>
+                                <span class="submenu-icon ml-auto"></span>
+                            </span>
+                        </a>
+                        <a href="#"
+                            class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start"
+                            style="background-color: #0049B5">
+                            <span class="mr-auto">
+                                <img src="https://res.cloudinary.com/seun007/image/upload/v1572455740/image_1_juyukf.png"
+                                    alt="Users" width="30" height="30">
+                                <span class="menu-collapsed">Noifications</span>
+                                <span class="submenu-icon ml-auto"></span>
+                            </span>
                         </a>
-                        <a href="#" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
+                        <a href="./settings_account.html" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
                             <span class="mr-auto">
                                     <img class="mr-auto" src="https://res.cloudinary.com/benjee/image/upload/v1571813962/Vector_2_zvoqmz.svg" alt="Settings" width="25" height="25">
                                     <span class="menu-collapsed">Settings</span>
                                     <span class="submenu-icon ml-auto"></span>
                             </span>  
                         </a>
-                       <!-- <a href="#" class="d-flex w-100 justify-content-start align-items-center list-group-item list-group-item-action border-0 flex-column align-items-start" style="background-color: #0049B5">
-                                <span class="mr-auto">
-                                        <img class="mr-auto" src="https://res.cloudinary.com/benjee/image/upload/v1571904849/Group_47_gq0grj.svg" alt="Settings" width="25" height="25">
-                                        <span class="menu-collapsed">Cancelation Policy</span>
-                                        <span class="submenu-icon ml-auto"></span>
-                                </span>  
-                            </a>-->
                 </ul>
             </div>
             <!--For main content area -->
@@ -856,74 +610,73 @@
                         
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
                         <div class="col-8 pt-3 d-flex">
-                            <div class="d-flex">
-                                <img
-                                src="https://res.cloudinary.com/dfjzditzc/image/upload/v1572447652/Ellipse_1_sjzgqf.png">
-                                <i class="" aria-hidden="true"></i>
+                                <i class="fa fa-user pr-1" aria-hidden="true"></i>
                                 <p class="text-muted">John Travolta</p>
-                            </div>
-                            <div class="col p-0 w-25" id="test-4">
-                                <div class="popup" onclick="popupMessage()"><i class="far fa-bell" style="font-size: 25px;"aria-hidden="true"><i class="fas fa-sort-down"></i></i>                      
-                                <span class="popuptext" style="text-align: center; margin: auto;" id="myPopup"><b>Notifications</b>
-                                    <b style="color: royalblue; margin-left: 65px;">Mark all as read</b>
-                                    <b style="float: right; color: blue; padding-right: 10px;"><a href="./settings_account.html">Settings</a></b><br><br>
-                                    <div style="background-color: lightblue;"><b style="color: blue; padding-right: 350px;"> Now</b></div><br>
-                                
-                                    <div class="notification-box">
-                                        <div class="d-flex bd-highlight">
-                                            <div>
-                                                <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
+                                <!--notofication bell and popup codes starts-->
+                                    <div class="popup" onclick="popupMessage()">
+                                        <i class="fas fa-bell mt-1 ml-5"><i class="fa fa-angle-down fa-lg"></i></i>
+                                        <br>
+                                        <span class="popuptext" style="text-align: center; margin: auto;" id="myPopup">
+                                            <div class="notHeadAll mt-1 mb-1">
+                                                <b class="notHead">Notifications</b>
+                                                <b class="notHead" style="color: royalblue;">Mark all as read</b>
+                                                <b class="notHead" style="float: right; color: rgba(16, 119, 255, 0.7);"><a href="./settings_account.html">Settings</a></b>
+                                            </div>    
+                                            <div class="mb-1" style="background-color: lightblue;"><b style="color: rgba(16, 119, 255, 0.7); padding-right: 350px;"> Now</b></div>
+                                            <div class="notification-box">
+                                                <div class="d-flex bd-highlight">
+                                                    <div>
+                                                        <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
+                                                    </div>
+                                                    <div class="p-1 w-100 bd-highlight" style=" font-size: 14px;">
+                                                        <p>You have <b style="color: royalblue;">10</b> new requests for carpark Registration.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
+                                                        <b style="float: right; color: royalblue; margin-right: 10px;">View Requests</b></a></p>
+                                                        <br>
+                                                    </div>
+                                                </div>
                                             </div>
-                                            <div class="p-1 w-100 bd-highlight" style=" font-size: 14px;">
-                                                <p>You have <b style="color: royalblue;">10</b> new requests for carpark Registration.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
-                                                <b style="float: right; color: royalblue; margin-right: 10px;">View Requests</b></a></p>
-                                                <br>
+                                            <div class="mb-1"  style="background-color: lightblue;"><b style="color: blue; padding-right: 340px;">Earlier</b></div>
+                                            <div class="notification-box">
+                                                <div class="d-flex bd-highlight">
+                                                    <div>
+                                                        <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
+                                                    </div>
+                                                    <div class="p-1 w-100 bd-highlight" style="font-size: 14px;">
+                                                        <p>You have <b style="color: royalblue;">15</b> new <b style="color: royalblue;">issues</b> from carpark customers.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
+                                                        <b style="float: right; color: royalblue; margin-right: 10px;">View issue</b></a></p>
+                                                        <br>
+                                                    </div>
+                                                </div>
                                             </div>
-                                        </div>
-                                    </div>
-                                
-                                    <div style="background-color: lightblue;"><b style="color: blue; padding-right: 340px;">Earlier</b></div><br>                                 
-                                    <div class="notification-box">
-                                        <div class="d-flex bd-highlight">
-                                            <div>
-                                                <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
+                                            <div class="notification-box">
+                                                <div class="d-flex bd-highlight">
+                                                    <div>
+                                                        <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
+                                                    </div>
+                                                    <div class="p-1 w-100 bd-highlight" style="font-size: 14px;">
+                                                        <p>You have <b style="color: royalblue;">15</b> new <b style="color: royalblue;">issues</b> from carpark customers.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
+                                                        <b style="float: right; color: royalblue; margin-right: 10px;">View issue</b></a></p>
+                                                        <br>
+                                                    </div>
+                                                </div>
                                             </div>
-                                            <div class="p-1 w-100 bd-highlight" style="font-size: 14px;">
-                                                <p>You have <b style="color: royalblue;">15</b> new <b style="color: royalblue;">issues</b> from carpark customers.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
-                                                <b style="float: right; color: royalblue; margin-right: 10px;">View issue</b></a></p>
-                                                <br>
+                                            <div style="background-color: royalblue; width: 100%" class="notBottom mb-3">
+                                                <b><a href="notification.html"  style="color: white; padding-right: 10px; text-decoration: none;"> See All</a></b>
                                             </div>
-                                        </div>
+                                        </span>
                                     </div>
-                                
-                                    <div class="notification-box">
-                                        <div class="d-flex bd-highlight">
-                                            <div>
-                                                <i class="fas fa-exclamation-triangle" style="font-size: 25px; float: left; margin-left: 10px; margin-top: 10px"></i>
-                                            </div>
-                                            <div class="p-1 w-100 bd-highlight" style="font-size: 14px;">
-                                                <p>You have <b style="color: royalblue;">15</b> new <b style="color: royalblue;">issues</b> from carpark customers.<p style="float: left; margin-left: 35px;">Today 10:21AM</p><br><a href="#">
-                                                <b style="float: right; color: royalblue; margin-right: 10px;">View issue</b></a></p>
-                                                <br>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div style="background-color: royalblue; width: 100%">
-                                        <b><a href="notification.html"  style="color: white; padding-right: 10px; text-decoration: none;"> See All</a></b>
-                                    </div>
-                                </span>
-                                </div>
-                            </div>
+                                    <!--notofication bell and popup codes starts-->
+
                         </div>
-                            <div class="col-4  d-flex border-left justify-content-end" id="test-3">
+                        <div class="col-4  d-flex border-left justify-content-end">
                                 <img src="https://res.cloudinary.com/benjee/image/upload/v1571821721/Rectangle_15_cj6nwd.svg" alt="EN" width="25" height="25">
                                 <span class="text-muted pl-2">EN</span>
-                            </div>
+                        </div>
                     </div>
                 </nav>
                 <div class="col main p-3 text-white" style="background:#1A73E8;">
                     <div class="col">
-                        <h1 style="font-size: 35px">Welcome back Admin</h1>
+                        <h1 style="font-size: 35px"></h1>
                         <h6 class="pt-2">CAR PARK APPLICATION </h6>
                     </div>
                 </div>
@@ -933,40 +686,28 @@ <h6 class="pt-2">CAR PARK APPLICATION </h6>
                             <a class="nav-link  active text-muted border-bottom border-primary" href="./mail_mailcampaign.html">Campaign</a>
                         </nav>
                 </div>
+
+
                 <div>
                   <!-- My Work Starts here -->
     <div class="mail-container container max-width">
     <div class="row ml-reset">
     <div class="col-sm-2 mail-side-bar">
-        <a href="./mail_mailcampaign_compose.html">
-          <button class="compose">Compose <span>+</span></button>
-          </a>
+      <a href="mail_mailcampaign_compose_update.html"><button class="compose" style="text-decoration: none; color: white;">Compose<span>+</span></button></a>
       <ul>
-        <li>
-            <a href="./mail_mailcampaign.html">
+        <a href="mail_mailcampaign.html" style="text-decoration: none; color: white;"><li>
           <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/All_lpndxk.svg" alt="All">
-            </a>
-          All
-        </li>
-        <li>
-            <a href="./mail_mailcampaignongoing.html">
-                <img src="https://res.cloudinary.com/kayode/image/upload/v1571831583/cars/Arrow_vmii5g.svg" alt="->" a href="./mail_mailcampaignongoing.html">
-            </a>
-          Ongoing
-        </li>
-        <li>
-            <a href="./mail_mailcampaigndraft.html">
-                <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/draft_k9nyhc.svg" alt="Draft">
-            </a>
-          Draft
-        </li>
-        <li>
-            <a href="./mail_mailcampaigncompleted.html">
-                <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/completed_csrvtb.svg" alt="Completed">
-            </a>
-          Completed
-        </li>
-        <a href="#" id="Automation" onclick="automate()" style="text-decoration: none; color: white;"><li>
+          All</li></a>
+
+        <a href="mail_mailcampaignongoing_update.html" style="text-decoration: none; color: white;"><li>
+                <img src="https://res.cloudinary.com/kayode/image/upload/v1571831583/cars/Arrow_vmii5g.svg" alt="->" a href="ongoing">Ongoing</li></a>
+        <a href="mail_mailcampaigndraft.html" style="text-decoration: none; color: white;"><li>
+            
+                <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/draft_k9nyhc.svg" alt="Draft">Draft</li> </a>
+
+        <a href="mail_mailcampaigncompleted.html" style="text-decoration: none; color: white;"><li><img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/completed_csrvtb.svg" alt="Completed">Completed</li></a>
+
+        <a href="mail_mailcampaign.html" id="Automation"style="text-decoration: none; color: white;"><li>
                 <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/Automation_g0qdiq.svg" alt="Automation"> Automation
             </li></a>
       
@@ -985,7 +726,7 @@ <h6 class="pt-2">CAR PARK APPLICATION </h6>
               </p>
               <p>
                 <span ><small>1215 Recipient</small></span>
-                <span id="sent" ><small>Message Sent</small></span>
+                <span id="sent" ><small>Draft</small></span>
               </p>
             </div>
           </div>
@@ -1000,53 +741,35 @@ <h6 class="pt-2">CAR PARK APPLICATION </h6>
               </p>
               <p>
                 <span ><small>1215 Recipient</small></span>
-                <span id="sent" ><small>Message Sent</small></span>
+                <span id="sent" ><small>Draft</small></span>
               </p>
             </div>
           </div>
-        
-                            <div class="marketting">
-                                <div class="marketting-head">
-                                    <h5>Integrate with best Email Marketing Softwares</h5>
-                                    <small>Add respondent names and emails to Subscribers list <span
-                                            id="show-display" class="pointer"><i class="fa fa-angle-up"
-                                                style="font-size: 20px; position: absolute; right: 18px !important;"></i><i class="fa fa-angle-down down-java"
-                                                style="font-size: 20px; position: absolute; right: 18px !important;"></i></span></small>
-                                </div>
-                                <hr>
-                                <div class="list-items">
-                                    <div class="list-item">
-                                        <img src="https://res.cloudinary.com/kayode/image/upload/v1571831585/cars/head_dwwk4x.svg"
-                                            alt="">
-                                        <p class="list-item-p">Integrated</p>
-                                    </div>
-                                    <hr>
-                                    <div class="list-item">
-                                        <img src="https://res.cloudinary.com/kayode/image/upload/v1571831585/cars/hubsport_xhkljw.svg"
-                                            alt="">
-                                        <p class="list-item-p">Integrated</p>
-                                    </div>
-                                    <hr>
-                                    <div class="list-item">
-                                        <img src="https://res.cloudinary.com/kayode/image/upload/v1571831586/cars/sendblue_elymyd.svg"
-                                            alt="">
-                                        <p class="list-item-p">Integrated</p>
-                                    </div>
-                                    <hr>
-                                    <div class="list-item">
-                                        <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/constant_hqp3rw.svg"
-                                            alt="">
-                                        <p class="list-item-p">Integrated</p>
-                                    </div>
-                                    <hr>
-                                    <div class="see-more">
-                                        <p>See more</p>
-                                        <i class="fa fa-angle-double-right" style="font-size: 20px; margin-left: 14px; padding-top: 3px;"></i>
-                                    </div>
-                                </div>
-
-                            </div>
-                        </div>
+          <div class="marketting">
+              <div class="marketting-head">
+                <h5>Integrate with best Email Marketing Softwares</h5>
+                <small>Add respondent names and emails to Subscribers list</small>
+              </div>
+              <ul>
+                <li>
+                  <img src="https://res.cloudinary.com/kayode/image/upload/v1571831585/cars/head_dwwk4x.svg" alt="">
+                  <span><small>integrated</small></span>
+                </li>
+                <li>
+                  <img src="https://res.cloudinary.com/kayode/image/upload/v1571831585/cars/hubsport_xhkljw.svg" alt="">
+                  <span><small>integrated</small></span>
+                </li>
+                <li>
+                  <img src="https://res.cloudinary.com/kayode/image/upload/v1571831586/cars/sendblue_elymyd.svg" alt="">
+                  <span><small>integrated</small></span>
+                </li>
+                <li>
+                  <img src="https://res.cloudinary.com/kayode/image/upload/v1571831584/cars/constant_hqp3rw.svg" alt="">
+                  <span><small>integrated</small></span>
+                </li>
+              </ul>
+          </div>
+        </div>
         <div class="last-bar col-sm-6">
           <a href=""><p style="font-size: 15px; margin-right: 60px; color:#0049B5;float: right;margin-top: 5%;text-decoration: none;"><i>edit</i></p></a>
         <div style=""><p id="newletter-head"><h4 style="text-align: center;font-size: 20px; margin-top: 0px; float: left; margin-left: 30%;"><b>Recurring Date Campaign</b></h4></p><br></div>
@@ -1241,53 +964,8 @@ <h2 style="text-align: center;margin-top: 20px;margin-bottom: 20px;">Recurring D
     $('.submenu-icon').toggleClass('d-none');
     $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
     
-                // Collapse/Expand icon
-                $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
-            })
-
-
-            const up = document.querySelector('.fa-angle-up');
-            const list = document.querySelector('.list-items');
-            const down = document.querySelector('.down-java');
-            up.addEventListener('click', () => {
-                list.style.display = 'none';
-                up.style.display = 'none'
-                down.style.display = 'block'
-            })
-
-            down.addEventListener('click', () => {
-                list.style.display = 'block';
-                up.style.display = 'block'
-                down.style.display = 'none'
-            })
-            // When the user clicks on div, open the popup
-
-    function popupMessage() {
-        var popup = document.getElementById("myPopup");
-        popup.classList.toggle("display");
-      }
-
-/* toggle between hiding and showing the dropdown content */
-      function myFunction() {
-        document.getElementById("myDropdown").classList.toggle("show");
-      }
-
-      // Close the dropdown menu if the user clicks outside of it
-      window.onclick = function(event) {
-        if (!event.target.matches('.dropbtn')) {
-          var dropdowns = document.getElementsByClassName("dropdown-content");
-          var i;
-          for (i = 0; i < dropdowns.length; i++) {
-            var openDropdown = dropdowns[i];
-            if (openDropdown.classList.contains('show')) {
-              openDropdown.classList.remove('show');
-            }
-          }
-        }
-      }
-
-$(function () {
-  $('[data-toggle="popover"]').popover()
+    // Collapse/Expand icon
+    $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
 })
 //pop-up and mail automation starts here