.MYUI-Panel {
  position: relative;
  width: 100%;
  height: var(--app-height, 100vh);
}


.MYUI-Panel__in {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-area-inset-top);
}


.MYUI-Panel__children {
  /* -webkit-overflow-scrolling: touch;
  overscroll-behavior: none; */
  overflow-y: auto;
  height: calc(var(--app-height, 100vh) - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
}

.MYUI-Panel[data-header="true"] .MYUI-Panel__children {
  /* margin-top: var(--panel_header_height); */
  height: calc(var(--app-height, 100vh) - var(--panel_header_height) - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
}

.MYUI-SplitLayout[data-tabbar=true] .MYUI-Panel__children {
  --panel_tabbar_height: calc(var(--tabbar_item_height));
  height: calc(var(--app-height, 100vh) - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - var(--panel_tabbar_height));
}

.MYUI-SplitLayout[data-tabbar=true] .MYUI-Panel[data-header="true"] .MYUI-Panel__children {
  --panel_tabbar_height: calc(var(--tabbar_item_height));
  height: calc(var(--app-height, 100vh) - var(--panel_header_height) - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - var(--panel_tabbar_height));
  /* padding-bottom: var(--panel_tabbar_height); */
}

.MYUI-SplitLayout[data-tabbar=false] .MYUI-Panel[data-header="true"] .MYUI-Panel__children {
  height: calc(var(--app-height, 100vh) - var(--panel_header_height) - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
}

.MYUI-Panel::after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  content: "";
}

.MYUI-Panel__header {
  position: relative;
  width: 100%;
}

.MYUI-Panel .MYUI-Panel__in,
.MYUI-Panel::after {
  background-color: var(--html_background);
}