@include export-module('co-activity-list-header-layout') {
  .co-activity-list-header {
    display: flex;
    flex-direction: column;
    z-index: 1;
    h2 {
      font-size: 14px;
    }
    .input-search {
      width: 300px;
      height: 30px;
      background: $color_text_light;
      border-radius: 5px;
      margin-bottom: 0;
    }

    .period-filter {
      align-items: center;
      height: 30px;
    }

    .header-wrapper {
      align-items: center;
    }

    .sub-header {
      display: flex;
      flex-wrap: wrap-reverse;
      padding-bottom: 10px;
      border-color: $color-border;
      border-bottom: 1px solid;

      .first-column {
        display: flex;
        flex-basis: 250px;
        flex-shrink: 0;
        height: 40px;
      }

      .second-column {
        display: flex;
        height: 40px;
        align-items: flex-end;
        flex: 1 1 300px;
        .second-column-right {
          display: flex;
          column-gap: 5px;
          width: 100%;
          justify-content: flex-end;
          .input-search {
            width: auto;
            flex: 1 1 300px;
            min-width: 75px;
            max-width: 300px;
          }
        }
      }
    }

    .tab-no-router {
      margin-top: 14px;

      nav.tab-no-router-nav {
        padding-left: 0 !important; // todo: fix this
        a {
          color: #171721;
          border-bottom-width: 3px;
          padding-bottom: 14px;
          &:hover {
            color: #171721;
          }
          &.active {
            color: #171721;
            &:hover {
              color: #171721;
            }
          }
        }
      }
    }
  }
}