.modal-open {
overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden; overflow-y: auto;
}
.modal {
position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0;
}
.modal-dialog {
position: relative; width: auto; margin: 0.5rem; pointer-events: none;
}
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out; transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog { transition: none; }
}
.modal.show .modal-dialog {
transform: none;
}
.modal-dialog-scrollable {
display: flex; max-height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 1rem); overflow: hidden;
}
.modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .modal-footer {
flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
overflow-y: auto;
}
.modal-dialog-centered {
display: flex; align-items: center; min-height: calc(100% - 1rem);
}
.modal-dialog-centered::before {
display: block; height: calc(100vh - 1rem); content: "";
}
.modal-dialog-centered.modal-dialog-scrollable {
flex-direction: column; justify-content: center; height: 100%;
}
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
max-height: none;
}
.modal-dialog-centered.modal-dialog-scrollable::before {
content: none;
}
.modal-content {
position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid #e2e2e2; border-radius: 0.3rem; outline: 0;
}
.modal-backdrop {
position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0.75;
}
.modal-header {
display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 16px; border-bottom: 1px solid #e2e2e2; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;
}
.modal-header .close {
padding: 16px 16px; margin: -16px -16px -16px auto;
}
.modal-title {
margin-bottom: 0; line-height: 20px;
}
.modal-body {
position: relative; flex: 1 1 auto; padding: 24px;
}
.modal-footer {
display: flex; align-items: center; justify-content: flex-end; padding: 24px; border-top: 1px solid #e2e2e2; border-bottom-right-radius: 0.3rem; border-bottom-left-radius: 0.3rem;
}
.modal-footer > :not(:first-child) {
margin-left: .25rem;
}
.modal-footer > :not(:last-child) {
margin-right: .25rem;
}
.modal-scrollbar-measure {
position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll;
}
@media (min-width: 576px) {
.modal-dialog { max-width: 600px; margin: 1.75rem auto; } .modal-dialog-scrollable { max-height: calc(100% - 3.5rem); } .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); } .modal-dialog-centered { min-height: calc(100% - 3.5rem); } .modal-dialog-centered::before { height: calc(100vh - 3.5rem); } .modal-sm { max-width: 392px; }
}
@media (min-width: 992px) {
.modal-lg, .modal-xl { max-width: 808px; }
}
@media (min-width: 1272px) {
.modal-xl { max-width: 1140px; }
}
.fade {
transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
.fade { transition: none; }
}
.fade:not(.show) {
opacity: 0;
}
.collapse:not(.show) {
display: none;
}
.collapsing {
position: relative; height: 0; overflow: hidden; transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
.collapsing { transition: none; }
}
.close {
float: right; font-size: 1.3125rem; font-weight: 500; line-height: 1; color: #777; text-shadow: 0 1px 0 #fff; opacity: .5;
}
@media (max-width: 1200px) {
.close { font-size: calc(1.25625rem + 0.075vw) ; }
}
.close:hover {
color: #777; text-decoration: none;
}
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
opacity: .75;
}
button.close {
padding: 0; background-color: transparent; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
a.close.disabled {
pointer-events: none;
}
.modal .modal-header {
position: relative; padding: 16px 16px 16px 24px;
}
.modal .modal-header .close {
padding: 16px; margin: -16px -16px -16px auto; font-size: 20px; font-weight: 600; opacity: 1;
}
.modal .modal-header .close span {
color: #777;
}
.modal .modal-title {
font-size: 16px; font-weight: 500; line-height: 24px;
}
.modal .modal-body {
padding: 16px 24px;
}
.modal .modal-footer {
padding: 4px 24px 32px; border-top: 0;
}
.modal-backdrop {
opacity: 0.75;
} /*# sourceMappingURL=mekari-ui-modal.css.map */