.dialogContainer { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999 !important; contain: strict; overflow: hidden; overscroll-behavior: contain } .dialog { margin: 0; -webkit-border-radius: .2em; border-radius: .2em; -webkit-font-smoothing: antialiased; border: 0; padding: 0; will-change: transform, opacity; contain: style paint; -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4); box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4) } .dialog-fixedSize { -webkit-border-radius: 0; border-radius: 0; max-height: none; max-width: none; contain: layout style paint } .dialog-fullscreen { position: fixed !important; top: 0; bottom: 0; left: 0; right: 0; margin: 0; -webkit-box-shadow: none; box-shadow: none } @-webkit-keyframes scaledown { from { opacity: 1; -webkit-transform: none; transform: none } to { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5) } } @keyframes scaledown { from { opacity: 1; -webkit-transform: none; transform: none } to { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5) } } @-webkit-keyframes scaleup { from { -webkit-transform: scale(.5); transform: scale(.5); opacity: 0 } to { -webkit-transform: none; transform: none; opacity: 1 } } @keyframes scaleup { from { -webkit-transform: scale(.5); transform: scale(.5); opacity: 0 } to { -webkit-transform: none; transform: none; opacity: 1 } } @-webkit-keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes fadeout { from { opacity: 1 } to { opacity: 0 } } @keyframes fadeout { from { opacity: 1 } to { opacity: 0 } } @-webkit-keyframes slideup { from { opacity: 0; -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes slideup { from { opacity: 0; -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-webkit-keyframes slidedown { from { opacity: 1; -webkit-transform: none; transform: none } to { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0) } } @keyframes slidedown { from { opacity: 1; -webkit-transform: none; transform: none } to { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0) } } @media all and (max-width:80em), all and (max-height:45em) { .dialog-fixedSize, .dialog-fullscreen-lowres { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; -webkit-box-shadow: none; box-shadow: none } } @media all and (min-width:80em) and (min-height:45em) { .dialog-medium { width: 80%; height: 80% } .dialog-medium-tall { width: 80%; height: 90% } .dialog-small { width: 60%; height: 80% } .dialog-fullscreen-border { width: 90%; height: 90% } } .noScroll { overflow-x: hidden !important; overflow-y: hidden !important } .dialogBackdrop { background-color: #000; opacity: 0; position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; z-index: 999999 !important; -webkit-transition: opacity ease-out .2s; -o-transition: opacity ease-out .2s; transition: opacity ease-out .2s; will-change: opacity } .dialogBackdropOpened { opacity: .5 }