
.main-search
  display: flex
  width: 640px
  justify-content: center
  align-items: flex-start
  padding: 6rem 2rem
  margin-top: -6rem
  box-sizing: border-box

  @media (max-width: 640px)
    width: 100%
    flex-direction: column
    align-items: center

  .main-logo-container
    margin-top: 2.4rem

    @media (max-width: 640px)
      padding-left: 0

    .app-menu-button-container

      @media (max-width: 640px)
        display: none

      .app-menu
        width: 640px
        padding-top: 6px
        background: transparent
        border: none
        box-shadow: none
        transition: opacity .15s

        &:before
          display: none

        ul.menu
          background: #fff

        li[data-id="main_page"],
        .avatar-badge
          display: none

  .search-tabs
    display: flex
    list-style: none
    padding: 0
    margin: .5rem 0

    & > li
      display: block
      padding: 0

      strong
        font-weight: 500

      & + li
        margin-left: 1.25rem

  .org-stats
    margin: 1em 0 0 2px

    @media (max-width: 640px)
      margin: 32px 0 0 0

    table
      font-size: .9rem
      border: none
      border-spacing: 0
      margin: 0

      @media (max-width: 640px)

        .separator
          display: none

        a
          font-size: 0

          &:after
            content: "/recent"
            font-size: .9rem
            margin-left: .5rem

      td
        color: #999
        padding: 0 .5em .1em 0

      td.value
        color: #555
        text-align: right

      .separator
        margin: 0 .25em

  & > .search-box
    width: 100%
    flex: 1
    margin: 1px 0 0 20px
    
    @media (max-width: 640px)
      display: flex
      flex-direction: column
      width: auto
      align-items: center
      margin: 32px 0 0 0

    form
      display: flex
      flex: 1
      border: 2px solid #ffdb4d
      border-radius: 2px
      padding: 0
      margin-right: 5px
      position: relative

    input
      height: 34px
      flex: 1
      font-size: 16px
      border: none
      padding: 6px 32px 6px 13px
      margin: 0
      box-sizing: border-box

    button
      height: 34px
      font-size: 16px
      color: #000
      background: #ffdb4d
      border: none
      padding: 0 13px 0 16px
      margin: 0
      position: relative
      cursor: pointer

      &:before
        content: ""
        width: 0
        height: 0
        border-style: solid
        border-color: rgba(#ffdb4d, 0)
        border-left-color: #ffdb4d
        border-width: 19px 0 19px 10px
        transform: translateY(-50%)
        -o-transform: rotate(360deg)
        position: absolute
        right: -12px
        top: 50%

      span
        display: inline-block
        font-size: 24px
        transform: rotate(45deg)
