.mwb_modal { will-change: visibility, opacity; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 1000; visibility: hidden; opacity: 0; transition: all .5s cubic-bezier(.23, 1, .32, 1); transition-delay: 0s } .mwb_modal--active { visibility: visible; opacity: 1 } .modal--align-top { align-items: flex-start } .mwb_modal__bg { background-color: #888; background-color: rgba(0, 0, 0, 0.5) } .mwb_modal__dialog { max-width: 600px; padding: 1.2rem } .mwb_modal__content { will-change: transform, opacity; position: relative; opacity: 0; display: flex; flex-direction: column; font-size: 16px; font-weight: 400; min-height: 200px; overflow: hidden; z-index: 1; background: #fff; border-radius: 2px; box-sizing: border-box; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); transition: all .5s cubic-bezier(.23, 1, .32, 1) } .mwb_modal__content--active { opacity: 1 } .mwb_modal__close { z-index: 1100; cursor: pointer } .modal__trigger { overflow: visible; transition: all .5s cubic-bezier(.23, 1, .32, 1) } .mwb_modal__trigger--active { z-index: 10 } .mwb_modal__title { align-items: center; color: #000; display: block; display: flex; justify-content: stretch; line-height: normal; padding: 16px; perspective-origin: 165px 56px; transform-origin: 165px 56px; box-sizing: border-box } .mwb_modal__title .mwb_modal__title-text { align-self: flex-end; color: inherit; display: block; display: flex; font-size: 24px; font-weight: 300; line-height: normal; overflow: hidden; transform-origin: 149px 48px; margin: 0 } .mwb_modal__text { color: rgba(0, 0, 0, 0.54); font-size: 13px; line-height: 18px; overflow: hidden; padding: 16px; width: 90% } .mwb_modal__footer { font-size: 16px; line-height: normal; width: 100%; background-color: transparent; padding: 8px; box-sizing: border-box; border-top: 1px solid rgba(0, 0, 0, 0.1) } .mwb_modal__close { z-index: 1100; cursor: pointer } .mwb_modal__header .mwb_modal__close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 42px !important; z-index: 1; color: #777777; font-weight: 600; font-size: 22px; } .mwb_modal__close:hover { background: rgba(158, 158, 158, .2) } .mwb_modal__close img { max-width: 15px; display: inline-block; position: relative; z-index: -1 } .mwb_modal__header .mwb_modal__close:before { position: absolute; top: 4px; right: 4px } #modal__temp { will-change: transform, opacity, background-color; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: none; opacity: 1; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); transition: background-color .2s linear, opacity .1s ease-out, transform .5s cubic-bezier(.23, 1, .32, 1) } .content { padding: 15px } .modal-demo { padding: 15px } .demo-close { position: absolute; top: 0; right: 0; margin: 1.2rem; padding: .6rem; background: rgba(0, 0, 0, 0.3); border-radius: 50%; transition: all .5s cubic-bezier(.23, 1, .32, 1); color: #fff; text-decoration: none } .demo-close svg { width: 24px; fill: #fff; pointer-events: none; vertical-align: top } .demo-close:hover { background: rgba(0, 0, 0, 0.6) }