:host {
  @apply flex flex-col w-full box-content relative;
}

shell-breadcrumb {
  @apply sticky z-sticky top-0 py-4;
}

.filter {
  @apply absolute font-sans flex items-center font-bold bg-gray-400 border-0 text-regular -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky;

  right: 0;
  top: 10px;
  min-width: 106px;

  .label {
    @apply ml-px-5;
  }

  &.active {
    @apply bg-active-branch text-white ml-px-5;
  }
}

.content-container {
  max-height: calc(100vh - 267px);
  overflow: scroll;
  @apply bg-white rounded-card;
}

.switch-group {
  @apply flex flex-row justify-center my-9;

  a.calendar-switch {
    @apply flex flex-row items-center px-7 py-2 no-underline text-black bg-munsell;
    &:first-child {
      @apply rounded-l-card;
    }

    &:last-child {
      @apply rounded-r-card;
    }
    ui-icon {
      @apply mr-3;
    }
  }

  a.calendar-switch.active,
  a.calendar-switch:active {
    @apply text-white bg-active-branch;
  }
}

:host ::ng-deep ui-calendar .navigation .title {
  margin-left: -140px;
}
