.ui-box
{
  margin: var(--padding);
  padding: var(--padding);
  background: var(--color-box);
  border-radius: var(--radius);
  box-shadow: var(--shadow-short);
  /*max-width: 1104px;*/
  
  h2, h3
  {
    margin: -5px 0 25px;
    padding: 0;
  }

  .ui-property-content &
  {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  &.is-light
  {
    background: var(--color-box-light);
  }

  &.is-blank
  {
    background: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

.ui-box + .ui-box.is-connected,
.ui-tabs + .ui-box.is-connected
{
  margin-top: -32px;
  border-top: 1px solid var(--color-line); 
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ui-blank-box
{
  margin: var(--padding);
  border-radius: var(--radius);
  /*max-width: 1104px;*/
}


.ui-view-box
{
  padding: var(--padding);
  /*max-width: 1104px + 32px + 320px + 64px;*/

  &.has-sidebar
  {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
  }

  .ui-box, .ui-blank-box
  {
    margin: 0;
  }

  .ui-box + .ui-box
  {
    margin-top: 16px;
  }
}

.ui-view-box-aside
{
  width: 340px;
  max-width: 100%;
  padding: var(--padding);

  &.ui-box
  {
    margin-top: 0 !important;
  }

  .ui-property + .ui-property
  {
    border-top: none;
    padding-top: 0;
    margin-top: var(--padding-s);
  }
}

.ui-view-split
{
  display: grid;
  grid-template-columns: 1fr 360px;

  > :last-child
  {
    margin-top: 90px;
  }
}