.mpopup ,.overlay{ display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content ,.popup{ position: relative; background-color: #fff; margin: auto; padding: 0; width: 450px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; border-radius: 0.3rem; } .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; } .modal-header h2{ font-size: 1.25rem; margin-top: 14px; margin-bottom: 14px; color: maroon; } .modal-body { padding: 2px 12px; height: auto; } #modal-bodyText{ 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; } .text-right{ text-align: center; } .dialog-btn#confirm{ background-color:#098815; } .dialog-btn#cancel{ background-color:#880909; } .dialog-btn { color: white; font-weight: 600; border: none; border-radius: 5px; height: 30px; width: 30%; } .dialog-btn#confirm:hover{ background-color:#05470c; cursor: pointer; } .dialog-btn#cancel:hover{ background-color:#430505; cursor: pointer; }