.fs-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1029; overflow: auto; background-color: white; opacity: 0; display: flex; justify-content: center; padding: 15px 15px; transform: scale(0); transition: transform linear .3s, opacity linear .3s; } .fs-modal .fs-modal-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .fs-modal .fs-modal-dialog { background-color: white; border-radius: 4px; max-height: calc(100vh - 30px); width: 1120px; box-shadow: 0 3px 6px #0000001a; height: fit-content; position: relative; } .fs-modal .fs-modal-dialog > .header { height: 39px; padding: 30px 40px; border-bottom: 1px solid rgba(var(--theme-secondary-color-rgb), 0.4); } .fs-modal .fs-modal-dialog > .content { max-height: calc(100vh - 280px); padding: 30px 40px; overflow: auto; } .fs-modal .fs-modal-dialog > .content.hasFooter { max-height: calc(100vh - 340px); } .fs-modal .fs-modal-dialog > .footer { height: 39px; padding: 30px 40px; border-top: 1px solid rgba(26, 26, 26, 0.2); } .fs-modal .fs-modal-dialog > .close { position: absolute; opacity: 0.7; top: 10px; right: 10px; z-index: 1; } @media only screen and (min-width: 640px) { .fs-modal { padding: 50px 30px; } .fs-modal .fs-modal-dialog { max-height: calc(100vh - 100px); } } @media only screen and (min-width: 960px) { .fs-modal { padding: 50px 40px; } } html.fs-modal-open { overflow: hidden !important; } html.fs-modal-open .fs-modal { opacity: 1; transform: scale(1); } .uk-modal.uk-open ~ .uk-tooltip { z-index: 10001; } .fs-modal ~ .uk-tooltip { z-index: 10000; }