Update static/popups.css

static/popups.css

@@ -43,7 +43,7 @@
 }
 
 /* Modal Overlay */
-.mpopup, .overlay {
+.mpopup, .overlay , .dropdown-content{
   display: none;
   position: absolute;
   z-index: 1;
@@ -57,8 +57,8 @@
 }
 
 /* Modal Content */
-.modal-content, .popup {
-  position: relative;
+.modal-content, .popup ,#userguidetext{
+  position: fixe;
   background-color: #fff;
   margin: auto;
   padding: 0;
@@ -68,7 +68,191 @@
   animation: animatetop 0.4s;
   border-radius: 0.3rem;
 }
+#userguideHome{
+  margin-top:10px;
+  font-size: 1.7em;
+  margin-left:5px;
+}
+#userguideTableMaya{
+  float:right;
+  margin-top:8px;
+  margin-right:5px;
+  font-size: 1.25em;
+}
+#userguideHome:hover,#userguideTableMaya:hover,.Userguidecontainer:hover{
+cursor:pointer;
+color:#302f2f;
+}
+#userguidetext{
+  width:97%;
+  height:88%;
+  margin-top:-40px;
+  margin-left: 25px;
+  margin-right: 25px;
+  overflow-y:auto;
+  font-family: "acumin-pro", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  position:fixed;
+}
+
+#textfirstpage, .othesectionsuserguide{
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 50px;
+  margin-bottom:20px;
+  font-size: 15px;
+
+}
+#userguideheadings{
+  font-size: 14px;
+  font-weight: bold; 
+}
+#underlinedLables{
+  text-decoration: underline;
+}
+
+/* Style the entire scrollbar */
+#userguidetext::-webkit-scrollbar, #UserGuideSideBar::-webkit-scrollbar{
+  width: 8px; /* Width of the scrollbar */
+  height: 8px; /* Height of the scrollbar (if horizontal) */
+}
+
+/* Style the thumb (the draggable part) */
+#userguidetext::-webkit-scrollbar-thumb , #UserGuideSideBar::-webkit-scrollbar-thumb{
+  background-color: #888; /* Color of the thumb */
+  border: 2px solid #fff; /* Optional: Adds a border around the thumb */
+}
+/* Hover effect for the thumb */
+#userguidetext::-webkit-scrollbar-thumb:hover , #UserGuideSideBar::-webkit-scrollbar-thumb:hover {
+  background-color: #2d2d2d; /* Darker color when hovering over the thumb */
+}
+
+/* Style the track (the area the thumb moves within) */
+#userguidetext::-webkit-scrollbar-track , #UserGuideSideBar::-webkit-scrollbar-track{
+  background: #eee; /* Light gray background for the track */
+  border-radius: 15px; /* Rounded corners for the track */
+}
+
+
+
+
+
+.Userguidecontainer {
+  /* display: inline-block; */
+  cursor: pointer;
+  margin-top: 2px;
+  margin-bottom:2px;
+  display: block;
+  float: left;
+  margin-right: 5px;
+
+}
+
+.UserGuidebar1, .UserGuidebar2, .UserGuidebar3 {
+  width: 30px;
+  height: 5px;
+  background-color: #000000;
+  margin: 5px 0;
+  transition: 0.4s;
+  margin-left: 5px;
+ 
+}
+
+
+
+.change .UserGuidebar1 {
+  transform: translate(0, 10px) rotate(-45deg);
+}
+
+.change .UserGuidebar2 {opacity: 0;}
+
+.change .UserGuidebar3 {
+  transform: translate(0, -10px) rotate(45deg);
+}
+
+#UserGuidemenuOptions{
+  margin-left: 5px;
+  font-size: 18px;
+  margin-top: 8px;
+  color: white;
+  font-family: "acumin-pro", sans-serif;
+  font-weight: 400;
+  
+  font-style: normal;
+  text-decoration: none;
+}
+
+#UserGuidemenuOptions li:hover{
+  color: #000000;
+  cursor:pointer;
+
+}
+#UserGuideSideBar{
 
+position: fixed;
+
+height:82.6%;
+
+margin-top: 11px;
+
+background:rgb(179, 179, 179);
+
+transform: translateX(-100%);
+
+-webkit-transform: translateX(-100%);
+
+z-index: 2;
+
+overflow-y:auto
+}
+
+#UserguideRibbon{
+  position: fixed;
+  background-color: #767373;
+  width:97%;
+  }
+
+#UserGuideHeader{
+  
+  font-size: 18px;
+
+  font-family: "acumin-pro", sans-serif;
+  margin-top:9px;
+  margin-left:35px;
+  position:absolute;
+} 
+
+.UserGuideslide-in {
+  animation: slide-in 0.9s forwards;
+  -webkit-animation: slide-in 0.9s forwards;
+}
+
+.UserGuideslide-out {
+  animation: UserGuideslide-out 0.9s forwards;
+  -webkit-animation: UserGuideslide-out 0.9s forwards;
+}
+  
+@keyframes UserGuideslide-in {
+  100% { transform: translateX(0%); }
+}
+
+@-webkit-keyframes UserGuideslide-in {
+  100% { -webkit-transform: translateX(0%); }
+}
+  
+@keyframes UserGuideslide-out {
+  0% { transform: translateX(0%); }
+  100% { transform: translateX(-100%); }
+}
+
+@-webkit-keyframes UserGuideslide-out {
+  0% { -webkit-transform: translateX(0%); }
+  100% { -webkit-transform: translateX(-100%); }
+}
+.fa fa-circle-o{
+  margin-left:20px;
+}
 /* Modal Header */
 .modal-header {
   padding: 2px 12px;
@@ -136,6 +320,8 @@
 .closeModal {
   /* color: #aaa; */
   float: right;
+  margin-top:3px;
+  margin-right:7px;
   font-size: 28px;
   font-weight: bold;
   background: none;
@@ -147,6 +333,7 @@
   color:rgb(134, 28, 28);
   text-decoration: none;
   cursor: pointer;
+  
 }
 #passwordField{
   font-size: 12px;
@@ -193,4 +380,4 @@
     box-shadow: 0 0 8px 2px  #880909;
  color:black;
    cursor: pointer;
-}
+}