Upload popups.css

static/popups.css

@@ -1,459 +1,498 @@
-.mpopuppassword {
-  display: none; /* Ensure popup is hidden by default */
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
-  backdrop-filter: blur(10px); /* Apply blur effect to the background */
-  -webkit-backdrop-filter: blur(5px); /* For Safari support */
-  justify-content: center;
-  align-items: center;
-}
-/* Styling for the error message */
-.error-message {
-  display: none;
-  background-color: #f44336;
-  color: white;
-  padding: 10px;
-  margin-top: 10px;
-  text-align: center;
-  border-radius: 5px;
-}
-#submitBtn{
-    background-color: #16c72e;
-    border: none;
-    padding: 10px 30px; /*102*/
-    cursor: pointer;
-    border-radius: 5px;
-    margin-left: 3px;
-    font-family: "acumin-pro", sans-serif;
-    font-weight: bold;
-    font-style: normal;
-    font-size: 14px;
-    color:white;  
-    float : right;
-    display:inline-block;
-}
-.modal-contentpassword {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-/* Modal Overlay */
-.mpopup, .overlay , .dropdown-content{
-  display: none;
-  position: absolute;
-  z-index: 100;
-  padding-top: 100px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-/* Modal Content */
-.modal-content, .popup ,#userguidetext{
-  position: fixed;
-  background-color: #fff;
-  margin: auto;
-  padding: 0;
-  overflow: visible;
-  display: block;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  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;
-}
-#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: #ffffff;
-  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: #100f0f;
-  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: #ee6464;
-  width:97%;
-  }
-
-#UserGuideHeader{
-  
-  font-size: 18px;
-  color:white;
-
-  font-family: "acumin-pro", sans-serif;
-  margin-top:4px;
-  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 ,.errorModal-header{
-  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;
-}
-}
-
-
-.modal-header h2 , .errorModal-header h2 {
-  font-size: 17px;
-  font-family: "acumin-pro", sans-serif;
-  margin: 14px 0;
-  color: maroon;
-}
-
-/* Modal Body */
-.modal-body {
-  padding: 2px 15px;
-  overflow: visible; /* Ensure tooltip is not clipped */
-}
-
-
-#modal-bodyText ,#enterPText{
-  font-family: "acumin-pro", sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-size: 16px;
-
-  white-space: pre-line;
-
-}
-
-.close {
-  color: #888;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
-.close:hover, .close:focus {
-  color: maroon;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-/* add animation effects */
-@-webkit-keyframes animatetop {
-  from {top:-300px; opacity:0}
-  to {top:0; opacity:1}
-}
-
-@keyframes animatetop {
-  from {top:-300px; opacity:0}
-  to {top:0; opacity:1}
-}
-
-.closeModal {
-  /* color: #aaa; */
-  float: right;
-  margin-top:3px;
-  margin-right:7px;
-  font-size: 28px;
-  font-weight: bold;
-  background: none;
-  border: none;
-}
-
-.closeModal:hover,
-.closeModal:focus {
-  color:rgb(134, 28, 28);
-  text-decoration: none;
-  cursor: pointer;
-  
-}
-#passwordField{
-  font-size: 12px;
-  width: 310px;
-  height: 33px;
-  border-radius: 1px;
-  border-color:#646060;
-  margin-bottom: 3px;
-  margin-right: 0.2%;
-  font-family: "acumin-pro", sans-serif;
-  font-weight: 400;
-  font-style: normal;
-}
- .text-right{
-  text-align: right;
-  float: right;
-  margin-top: -14px;
-  margin-right: 27px;
- }
- .dialog-btn#confirm{
-  background-color:#098815;
- }
- .dialog-btn#cancel{
-  background-color:#880909;
- }
-.dialog-btn { 
-  color: white;
-  font-weight: 600;
-  font-size: 12px;
-  border: none;
-  border-radius: 5px;
-  height: 30px;
-  width: 50px;
-}
-
-.dialog-btn#confirm:hover{
-  box-shadow: 0 0 8px 2px  #098815;
- color:black;
-   cursor: pointer;
-}
-.dialog-btn#cancel:hover{
-    box-shadow: 0 0 8px 2px  #880909;
- color:black;
-   cursor: pointer;
-}
-
-
-/* Custom style for all <ul> elements with class="custom-ul" */
-.custom-ul {
-  padding-left: 20px; /* Indent from the left */
-  margin-bottom: 10px;
-}
-
-.custom-ul li {
-  margin: 6px 0; /* Spacing between list items */
-  line-height: 1.5;
-  font-size: 15px;
-  color: #333; /* Dark gray text */
-}
-
-/* Optional: add a subtle bullet style */
-.custom-ul li::marker {
-  color: #555; /* Bullet color */
-  font-size: 14px;
-}
-
-
-/* The Modal (background) */
-.ErrorModalClass {
-  display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
-  z-index: 1; /* Sit on top */
-  padding-top: 150px; /* Location of the box */
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: auto; /* Enable scroll if needed */
-  background-color: rgb(0,0,0); /* Fallback color */
-  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-}
-
-/* Modal Content */
-.Errormodal-content{
-  background-color: #fefefe;
-  margin: auto;
-  padding: 20px;
-  border: 1px solid #888;
-  width: 30%;
-}
-#errorTextContent{
-    font-family: "acumin-pro", sans-serif;
-    font-style: normal;
-    font-size: 16px;
+.mpopuppassword {
+  display: none; /* Ensure popup is hidden by default */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+  backdrop-filter: blur(10px); /* Apply blur effect to the background */
+  -webkit-backdrop-filter: blur(5px); /* For Safari support */
+  justify-content: center;
+  align-items: center;
+}
+/* Styling for the error message */
+.error-message {
+  display: none;
+  background-color: #f44336;
+  color: white;
+  padding: 10px;
+  margin-top: 10px;
+  text-align: center;
+  border-radius: 5px;
+}
+#submitBtn{
+    background-color: #16c72e;
+    border: none;
+    padding: 10px 30px; /*102*/
+    cursor: pointer;
+    border-radius: 5px;
+    margin-left: 3px;
+    font-family: "acumin-pro", sans-serif;
+    font-weight: bold;
+    font-style: normal;
+    font-size: 14px;
+    color:white;  
+    float : right;
+    display:inline-block;
+}
+.modal-contentpassword {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+/* Modal Overlay */
+.mpopup, .overlay , .dropdown-content{
+  display: none;
+  position: absolute;
+  z-index: 100;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.Lpopup{
+  display: none;
+  position: absolute;
+  z-index: 100;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-footerLegend {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 12px;
+    border-top: 1px solid #ccc;
+    margin-top: 10px;
+}
+
+.legend-btn {
+    padding: 6px 14px;
+    border-radius: 4px;
+    cursor: pointer;
+    border: none;
+    font-size: 14px;
+}
+
+.cancel-btn {
+    background: #ccc;
+}
+
+.submit-btn {
+    background: #4CAF50;
+    color: white;
+}
+
+/* Modal Content */
+.modal-content, .popup ,#userguidetext{
+  position: fixed;
+  background-color: #fff;
+  margin: auto;
+  padding: 0;
+  overflow: visible;
+  display: block;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  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;
+}
+#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: #ffffff;
+  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: #100f0f;
+  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: #ee6464;
+  width:97%;
+  }
+
+#UserGuideHeader{
+  
+  font-size: 18px;
+  color:white;
+
+  font-family: "acumin-pro", sans-serif;
+  margin-top:4px;
+  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 ,.errorModal-header{
+  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;
+}
+}
+
+
+.modal-header h2 , .errorModal-header h2 {
+  font-size: 17px;
+  font-family: "acumin-pro", sans-serif;
+  margin: 14px 0;
+  color: maroon;
+}
+
+/* Modal Body */
+.modal-body {
+  padding: 2px 15px;
+  overflow: visible; /* Ensure tooltip is not clipped */
+}
+
+
+#modal-bodyText ,#enterPText{
+  font-family: "acumin-pro", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+
+  white-space: pre-line;
+
+}
+
+.close {
+  color: #888;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+.close:hover, .close:focus {
+  color: maroon;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* add animation effects */
+@-webkit-keyframes animatetop {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+
+.closeModal {
+  /* color: #aaa; */
+  float: right;
+  margin-top:3px;
+  margin-right:7px;
+  font-size: 28px;
+  font-weight: bold;
+  background: none;
+  border: none;
+}
+
+.closeModal:hover,
+.closeModal:focus {
+  color:rgb(134, 28, 28);
+  text-decoration: none;
+  cursor: pointer;
+  
+}
+#passwordField{
+  font-size: 12px;
+  width: 310px;
+  height: 33px;
+  border-radius: 1px;
+  border-color:#646060;
+  margin-bottom: 3px;
+  margin-right: 0.2%;
+  font-family: "acumin-pro", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+ .text-right{
+  text-align: right;
+  float: right;
+  margin-top: -14px;
+  margin-right: 27px;
+ }
+ .dialog-btn#confirm{
+  background-color:#098815;
+ }
+ .dialog-btn#cancel{
+  background-color:#880909;
+ }
+.dialog-btn { 
+  color: white;
+  font-weight: 600;
+  font-size: 12px;
+  border: none;
+  border-radius: 5px;
+  height: 30px;
+  width: 50px;
+}
+
+.dialog-btn#confirm:hover{
+  box-shadow: 0 0 8px 2px  #098815;
+ color:black;
+   cursor: pointer;
+}
+.dialog-btn#cancel:hover{
+    box-shadow: 0 0 8px 2px  #880909;
+ color:black;
+   cursor: pointer;
+}
+
+
+/* Custom style for all <ul> elements with class="custom-ul" */
+.custom-ul {
+  padding-left: 20px; /* Indent from the left */
+  margin-bottom: 10px;
+}
+
+.custom-ul li {
+  margin: 6px 0; /* Spacing between list items */
+  line-height: 1.5;
+  font-size: 15px;
+  color: #333; /* Dark gray text */
+}
+
+/* Optional: add a subtle bullet style */
+.custom-ul li::marker {
+  color: #555; /* Bullet color */
+  font-size: 14px;
+}
+
+
+/* The Modal (background) */
+.ErrorModalClass {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 150px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.Errormodal-content{
+  background-color: #fefefe;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 30%;
+}
+#errorTextContent{
+    font-family: "acumin-pro", sans-serif;
+    font-style: normal;
+    font-size: 16px;
 }