.ui-box
{
  margin: var(--padding);
  padding: var(--padding);
  background: var(--color-bg-light);
  border-radius: var(--radius);
  box-shadow: var(--color-shadow-short);
  /*max-width: 1104px;*/
  h2
  {
    margin: -5px -32px var(--padding);
    padding: 0 var(--padding) 25px;
    border-bottom: 1px solid var(--color-line-light);
  }

  h3
  {
    margin: -5px -32px var(--padding);
    padding: 0 var(--padding) 25px;
    border-bottom: 1px solid var(--color-line-light);
  }

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

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

.ui-box + .ui-box.is-connected,
.ui-tabs + .ui-box.is-connected
{
  margin-top: -31px;
}

.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;
    grid-gap: var(--padding);
  }

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

  .ui-box + .ui-box
  {
    margin-top: var(--padding);
  }
}

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

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

  .ui-property + .ui-property
  {
    padding-top: 0;
    margin-top: 25px;
  }
}