.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 { display: none; position: absolute; z-index: 1; 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 { position: relative; 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 Header */ .modal-header { padding: 2px 12px; 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 { font-size: 14px; 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; } .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; 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-bottom: 50px; 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; }