.apos-modal
{
  .apos-schema-tabs
  {
    position: fixed;
    top: 0;
    float: left;
    height: 100%;
    width: 25%;
    background-color: @apos-light;
    // If tab number exceeds viewport allow scroll
    overflow: auto;
    border-right: 2px solid @apos-mid;
    p {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    @media @apos-breakpoint-desktop-xl { width: 25%; }
  }

  .apos-schema--with-tabs .apos-schema-tabs {}

  .apos-schema-tab
  {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    padding: @apos-padding-2 @apos-padding-1;
    border-bottom: 1px solid @apos-mid;
    font-size: 14px;
    cursor: pointer;
    @media @apos-breakpoint-desktop-xl { font-size: 16px; }
    &.apos-active
    {
      background-color: @apos-white;
      cursor: default;
    }
  }

  .apos-schema-group
  {
    display: none;
    float: right;
    width: 75%;
    @media @apos-breakpoint-desktop-xl { width: 75%; }
    height: 100%;
    overflow: auto;
    .apos-scrollbar;
  }

  .apos-schema-group.apos-active
  {
    display: block;
  }

  .apos-schema-group-inner
  {
    width: 100%;
    min-height: 100%;
    padding: @apos-padding-2;
    background-color: @apos-white;
  }
}