.popup-dialog .popup-background { transition: 1s opacity; /* Makes animation on the fade down */ opacity: 0; } .popup-dialog .popup-content { display: none; } /*The ‘popup-active’ class is added to a DOM element higher eg. , when pop-up is open */ .popup-active .popup-dialog { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; /* Ensures full hight of the viewport, even if the page is smaller than the screen resolution*/ position: absolute; left: 0; top: 0; z-index: 1000; /* Ensures breakout of depth. If you have higher Z- indexes set, you need to raise this number*/ } .popup-active .popup-dialog .popup-content { display: flex; flex-direction: column; width: 400px; /* minimum width of MidID, to ensure the popover hides the content*/ height: 588px; align-items: center; justify-content: center; color: white; z-index: 1100; text-align: center; } .popup-active .popup-dialog .popup-content h3 { color: white; } .popup-active .popup-dialog .popup-content .btn-main { margin: 1rem; } .popup-active .popup-dialog .popup-background { opacity: 0.8; /* Controls the opacity of the backdrop */ background: black; width: 100%; height: 100%; position: absolute; } .btn.btn-secondary { background-color: #f2f3f1; } .btn.btn-secondary:hover { background-color: #d9dbd6; } @font-face { font-family: "IBM-Plex-Sans"; src: url("fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); } .popup-dialog-moces2 .popup-background { transition: 1s opacity; /* Makes animation on the fade down */ opacity: 0; } .popup-dialog-moces2 .popup-content { display: none; } .mitidbtn { background-color: #0060E6; height: 48px; padding-left: 24px; padding-right: 24px; border: 0; border-radius: 4px; color: #ffffff; font-family: "IBM-Plex-Sans"; font-size: 14px; min-width: 240px; white-space: nowrap; } .mitidbtn:hover { background-color: #004CB8; } .mitidbtn:before { content: url("assets/MitID_logo.svg"); width: 4em; float: left; margin-right: 16px; margin-top: 2px; } .air { height: 20px; }