: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%; }
}

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