/** Modal CSS **/ body.fd-frozen { position: relative; /* Needed to allow modal wrapper to extend to the bottom of the */ overflow: hidden; } .fd-modal-container { display: none; } .fd-modal-close { position: absolute; top: -10px; right: -10px; background: #fff; color: #999; font-size: 20px; padding-top: 3px; padding-left: 2px; line-height: 1; text-align: center; border-radius: 50%; width: 24px; height: 24px; transition: color 0.2s ease; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; } .fd-modal-close:hover { cursor: pointer; color: #555; } .fd-modal-backdrop { position: fixed; top: 0; bottom: 0; left: 0; z-index: 999999; right: 0; background-color: black; opacity: 0.7; } .fd-modal-container .fd-modal-wrapper { top: 0; text-align: center; overflow: hidden; bottom: 0; left: 0; right: 0; position: fixed; z-index: 1000000000; transition: all 0.2s ease-in-out; transform: scale(0.8); } .fd-modal-container.modal-active .fd-modal-wrapper { transform: scale(1); } .fd-modal-wrapper::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .fd-modal-wrapper .fd-loading { position: relative; top: 40%; left: 50%; opacity: 1; height: 70px; width: 70px; border-radius: 50%; border-top: 1px solid rgba(255, 255, 255, 0.6); border-right: 1px solid rgba(255, 255, 255, 0.6); border-bottom: 1px solid rgba(255, 255, 255, 0.6); transform: translateZ(0); animation: load8 1.1s infinite linear; animation-delay: 0.4s; } #fd-modal { background: #fff; max-width: 450px; display: inline-block; position: relative; vertical-align: middle; text-align: left; border-radius: 5px; box-shadow: 10px 10px 20px #000; } #fd-modal.fd-mobile { background-color: inherit; padding: 25px; }