/* One scroll container, above navigation, within the visible keyboard viewport. */
.u21-shell .modal {
  width: 100vw;
  max-width: 100vw;
  z-index: 1000;
  top: var(--dialog216-top, 0px);
  bottom: auto;
  height: 100vh;
  height: var(--dialog216-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: contain;
}
.u21-shell .modal-card {
  min-height: 0;
  max-height: calc(100vh - 36px) !important;
  max-height: calc(var(--dialog216-height, 100dvh) - 36px) !important;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-padding-block: 18px 80px;
}
.u21-shell .modal-card > form {
  flex: 0 0 auto;
  overflow: visible;
  min-height: auto;
}
.u21-shell .modal-card > form > .btn.primary:last-child,
.u21-shell .modal-card > form > .form-actions:last-child {
  position: sticky;
  bottom: 0;
  margin: 16px 0 0;
  max-width: 100%;
  z-index: 2;
}
.u21-shell .modal-card > form > .form-actions:last-child {
  padding: 12px 0 0;
}
.u21-shell .modal-head .x {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
}
body.dialog-open216 { overflow: hidden; }
@media (max-width: 760px) {
  .u21-shell .modal-card {
    max-height: calc(100vh - 12px) !important;
    max-height: calc(var(--dialog216-height, 100dvh) - 12px) !important;
    padding-bottom: max(var(--modal-pad), env(safe-area-inset-bottom, 0px));
  }
}

/* A block card cannot flex-shrink its long form out of the scrollable area. */
.u21-shell .modal-card{display:block!important;touch-action:pan-y;max-width:640px;min-width:0!important}
.u21-shell .modal-card .form-grid{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.u21-shell .modal-card label,.u21-shell .modal-head h2{min-width:0;overflow-wrap:anywhere}
.u21-shell .modal-head{position:relative;top:auto;z-index:4;background:#fff;padding:10px 0;border-bottom:1px solid #dfe6ec}
.u21-shell .modal-card>form{display:block;overflow:visible!important;flex:none!important}
.u21-shell .modal-card>form>.btn.primary:last-child{width:100%!important;margin:16px 0 0!important;bottom:0!important;left:auto;right:auto}
.u21-shell.dialog-open216 .mobile-bottom-nav,.u21-shell.dialog-open216 .u21-mobile-nav,.u21-shell.dialog-open216 .pwaBanner{visibility:hidden!important;pointer-events:none!important}
@media(max-width:760px){.u21-shell .modal{align-items:flex-start!important;padding:6px!important}.u21-shell .modal-card{border-radius:14px!important;padding:16px!important;padding-bottom:max(16px,env(safe-area-inset-bottom))!important}.u21-shell .modal-card .form-grid{grid-template-columns:minmax(0,1fr)}}