#reward-program-popup { position: fixed; top: 0; left: 0; width: 0; height: 0; opacity: 0; transition: opacity 0.25s; display: flex; align-items: center; justify-content: center; z-index: -100000; } #reward-program-popup.active { width: 100%; height: 100%; opacity: 1; z-index: 100000; } #reward-program-popup.active:before { content: ""; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgb(75 75 75 / 60%); z-index: 0; } .popup-inner { position: relative; background: #fff; height: 100%; width: 100%; max-width: 680px; max-height: 820px; border-radius: 12px; overflow: hidden; z-index: 1; } .popup-close { display: flex; width: 100%; background: #000; color: #fff; align-items: center; padding: 15px; font-size: 17px; cursor: pointer; height: 60px; } .popup-close svg { max-width: 18px; width: 100%; margin-right: 5px; } .popup-content { height: 100%; overflow-x: auto; padding-bottom: 60px; } #show-reward-program { width: 100%; max-width: 120px; height: 45px; background: black; border-radius: 50px; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 20px; left: 15px; cursor: pointer; z-index: 100; } #show-reward-program svg { margin-right: 3px; max-width: 26px; } #show-reward-program span { color: #fff; font-size: 15px; } @media only screen and (max-width: 768px) { .popup-inner { max-width: 100%; max-height: 100%; border-radius: 0; } #show-reward-program { display: none; } }