Update static/popups.css

static/popups.css

@@ -58,7 +58,7 @@
 
 /* Modal Content */
 .modal-content, .popup ,#userguidetext{
-  position: fixe;
+  position: fixed;
   background-color: #fff;
   margin: auto;
   padding: 0;
@@ -68,13 +68,39 @@
   animation: animatetop 0.4s;
   border-radius: 0.3rem;
 }
+.modal-content {    
+  -webkit-animation-name: zoom;
+  -webkit-animation-duration: 0.6s;
+  animation-name: zoom;
+  animation-duration: 0.6s;
+}
+
+/* 100% Image Width on Smaller Screens */
+@media only screen and (max-width: 700px){
+  .modal-content {
+      width: 100%;
+  }
+}
+
+.modal-content {
+  margin: auto;
+  display: block;
+  width: 490px;
+  margin-left:400px;
+  margin-top:50px;
+  /* max-width: 560px; */
+  overflow-x: visible;
+}
+
 #userguideHome{
+  color:white;
   margin-top:10px;
   font-size: 1.7em;
   margin-left:5px;
 }
 #userguideTableMaya{
   float:right;
+  color:white;
   margin-top:8px;
   margin-right:5px;
   font-size: 1.25em;
@@ -152,7 +178,7 @@ color:#302f2f;
 .UserGuidebar1, .UserGuidebar2, .UserGuidebar3 {
   width: 30px;
   height: 5px;
-  background-color: #000000;
+  background-color: #ffffff;
   margin: 5px 0;
   transition: 0.4s;
   margin-left: 5px;
@@ -184,7 +210,7 @@ color:#302f2f;
 }
 
 #UserGuidemenuOptions li:hover{
-  color: #000000;
+  color: #100f0f;
   cursor:pointer;
 
 }
@@ -209,16 +235,17 @@ overflow-y:auto
 
 #UserguideRibbon{
   position: fixed;
-  background-color: #767373;
+  background-color: #ee6464;
   width:97%;
   }
 
 #UserGuideHeader{
   
   font-size: 18px;
+  color:white;
 
   font-family: "acumin-pro", sans-serif;
-  margin-top:9px;
+  margin-top:4px;
   margin-left:35px;
   position:absolute;
 } 
@@ -255,15 +282,16 @@ overflow-y:auto
 }
 /* Modal Header */
 .modal-header {
-  padding: 2px 12px;
+  padding: 2px 15px;
   background-color: #ffffff;
   color: #333;
   border-bottom: 1px solid #e9ecef;
   border-top-left-radius: 0.3rem;
   border-top-right-radius: 0.3rem;
-
   cursor: move;
   cursor: grab;
+  
+  
   &:active {
   cursor: grabbing;
 }
@@ -351,9 +379,7 @@ overflow-y:auto
   text-align: right;
   float: right;
   margin-top: -14px;
-  margin-bottom: 50px;
   margin-right: 27px;
-  
  }
  .dialog-btn#confirm{
   background-color:#098815;