:root{
  --app-left-expanded: 270px;
  --app-left-collapsed: 85px;
  --app-transition: margin-left .4s ease, width .4s ease;
}

#app{
  margin-left: var(--app-left-expanded, 270px);
  width: calc(100% - var(--app-left-expanded, 270px));
  min-height: 100dvh;
  display:flex;
  flex-direction: column;
  transition: var(--app-transition, margin-left .4s ease, width .4s ease);
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar ~ #app{
  margin-left: var(--app-left-expanded, 270px);
  width: calc(100% - var(--app-left-expanded, 270px));
}
.sidebar.collapsed ~ #app{
  margin-left: var(--app-left-collapsed, 85px);
  width: calc(100% - var(--app-left-collapsed, 85px));
}
@media (max-width: 1024px){
  #app{ margin-left: var(--app-left-collapsed, 85px); width: calc(100% - var(--app-left-collapsed, 85px)); }
}
@media (max-width: 768px){
  #app{ margin-left:0; width:100%; padding-top: 56px; }
  .sidebar ~ #app,
  .sidebar.collapsed ~ #app{ margin-left:0; width:100%; }
  #trarity-analytics{ margin-left:0 !important; width:100% !important; max-width:100vw !important; padding-top: 56px; }
  .sidebar ~ #trarity-analytics,
  .sidebar.collapsed ~ #trarity-analytics{ margin-left:0 !important; width:100% !important; }
}

:root.sidebar-freeze #app,
:root.sidebar-freeze #app *{ transition: none !important; }
:root.sidebar-freeze #trarity-analytics,
:root.sidebar-freeze #trarity-analytics *{ transition: none !important; }