.content
  width: 100%
  background: $background
  position: relative
  z-index: 10
  margin-top: 15px
  margin-bottom: 100px

  +mobile
    padding: 0 10px
    margin-bottom: 20px

  ul
    margin: 10px 0

  &.bg-background
    background: $background-secondary
    border: 1px solid $divider
    padding: 20px

  h1
    color: $color
    font-size: 24px
    padding: 20px

  h2
    color: $color
    font-size: 20px
    padding: 20px 20px 0 20px
    font-family: $font-family-regular

  h3
    color: $color-secondary
    padding: 20px 20px 10px 20px
    font-size: 14px
    text-transform: uppercase
    font-family: $font-family-medium

  h4
    text-transform: uppercase
    font-size: 12px
    font-family: $font-family-medium
    color: $color-secondary
    padding: 20px 0 0 0

  span
    color: $color-secondary

    &.underlined
      text-decoration: underline

    &.bold
      font-family: $font-family-medium

    &.larger
      font-size: 15px
      font-family: $font-family-medium

      +mobile
        padding: 5px 0

    &.smaller
      font-size: 12px
      color: $color-secondary

.columns

  &.cache-item
    margin: 5px 0
    font-size: 13px
    border: 1px solid $green
    background: rgba($green-secondary, 0.4)

    span
      font-weight: $weight-semibold
      color: darken($green, 10)

  &.repo-item
    margin: 5px 0
    font-size: 13px

    &.border-red
      border: 1px solid $red
      background: rgba($red-secondary, 0.4)
      color: darken($red, 10)

      &:hover
        border: 1px solid $red
        background: rgba($red-secondary, 0.4)
        color: darken($red, 10)

    &.border-green
      border: 1px solid $green
      background: rgba($green-secondary, 0.4)
      color: darken($green, 10)

      &:hover
        border: 1px solid $green
        background: rgba($green-secondary, 0.4)
        color: darken($green, 10)

.list-item
  height: 100px
  color: $color
  font-size: 12px
  cursor: pointer
  background: $white
  display: flex
  align-items: center
  font-family: $font-family-regular
  box-shadow: $box-shadow
  border-radius: 10px
  transition: background 200ms ease-out
  margin: 5px 0

  +mobile
    display: block
    box-shadow: 1px 2px 30px 0 rgba(#4259E7, 0.2)

    .column
      display: block !important
      margin: 5px 0
      text-align: center

  &.list-item-mini
    height: 35px

    &:hover
      cursor: default
      background-image: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%)
      border: 1px solid #CED0DA
      border-radius: 4px

  &.list-item-slim
    height: 70px

    .column
      margin-top: 0

  &.columns
    margin: 10px 0

    +mobile
      margin: 10px 0

  span
    display: block
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    margin-right: 10px

    +mobile
      width: 100%
      text-align: center
      display: flex
      align-items: center
      justify-content: center
      white-space: pre-wrap

  &:hover
    background: $hover-item-background

  .column
    padding: 0 10px !important
    display: flex
    align-items: center

    +tablet
      margin-top: 12px

    .columns
      width: 100%

      +mobile
        width: 100%
        padding: 0
        margin: 0

    &.commit-column
      display: inline-block

      span
        display: block

        +mobile
          width: 100%
          text-align: center

        &.icon
          display: inline-flex
          justify-content: center
          align-content: center
          float: left
          margin-top: 20px
          margin-right: 20px

          +mobile
            display: none

          img
            width: 14px
            height: 14px

    .repo-branch-column
      width: 100%

      span
        font-size: 16px
        font-family: $font-family-regular

        +mobile
          text-align: center

        &.span-branch
          font-size: 13px
          display: inline-block

          img
            display: block
            float: left
            margin: 5px 5px 0 0
            width: 12px
            height: 12px

  .icon
    width: 26px
    height: 26px
    display: block

    img
      width: 26px
      height: 26px

    &.is-large
      width: 36px
      height: 36px

      img
        width: 36px
        height: 36px

  &.is-success
    border-left: 6px solid $green

    +mobile
      border-left: 0
      border-top: 4px solid $green

  &.is-running
    border-left: 6px solid transparent
    -webkit-animation: pulsate 2s infinite ease-in-out
    animation: pulsate 2s infinite ease-in-out

    +mobile
      border-left: 0
      border-top: 4px solid $yellow

  &.is-errored
    border-left: 6px solid $red

    +mobile
      border-left: 0
      border-top: 4px solid $red

  &.is-queued
    border-left: 6px solid $grey-light

    +mobile
      border-left: 0
      border-top: 4px solid $grey-light

  .avatar-icon
    width: 50px
    height: 50px
    border-radius: 5px
    margin: 0 15px 0 5px

  span
    display: block

    &.underlined
      text-decoration: underline

    &.bold
      font-family: $font-family-medium

  .icon-and-text
    display: inline-flex
    justify-content: center
    align-items: center
    margin-right: 25px

    +mobile
      display: block
      width: 100%
      text-align: center
      margin: 0

    .icon
      display: inline-flex
      justify-content: center
      align-items: center


      &.script

        img
          width: 18px

      &.hourglass
        img
          width: 15px

    .version
      padding: 0 5px
      font-size: 15px

    .env-text
      font-size: 14px

.message-center
  display: block
  width: 400px
  margin: 0 auto

  .message
    position: relative
    p
      text-align: center
      img
        position: absolute
        width: 30px
        height: 30px
        left: 5px
        top: 5px
      a
        color: $white
        text-decoration: underline

.justify-end
  display: flex
  justify-content: flex-end

  +mobile
    justify-content: center

.search-input-container
  display: inline-block
  position: relative

  .search-input
    display: block
    background: $background
    border: 1px solid $divider
    border-radius: 4px
    min-width: 150px
    outline: none
    padding: 10px 30px 10px 20px
    font-size: 14px
    color: $color-search
    transition: min-width 300ms ease

    &::-webkit-input-placeholder
      color: $color-search

    &::-moz-placeholer
      color: $color-search

    &:-ms-input-placeholder
      color: $color-search

    &:-moz-olaceholder
      color: $color-search

    &:focus
      min-width: 350px

  svg
    display: block
    position: absolute
    width: 16px
    height: 16px
    right: 10px
    top: 11px

.more-button-container
  margin: 30px 0

progress
  width: 100%
  margin: 0 10px
  height: 5px
  border-radius: 10px

  &::-webkit-progress-bar
    background: #313D4F
    border-radius: 10px
  &::-webkit-progress-value
    background-image: linear-gradient(-90deg, #2BB415 2%, #5AD946 98%)
    border-radius: 10px
  &::-moz-progress-bar
    background-image: linear-gradient(-90deg, #2BB415 2%, #5AD946 98%)
    border-radius: 10px

.avatar-img-container
  display: block
  width: 40px
  height: 40px
  margin-left: 10px
  margin-right: 20px !important
  position: relative
  overflow: visible !important

  img
    width: 40px
    height: 40px

  .avatar-small
    position: absolute
    top: -12px
    right: -12px
    width: 30px
    height: 30px
    border: 1px solid $border
    border-radius: 5px
    z-index: 11

.avatar-img
  display: block
  max-width: 50px
  height: 50px
  border-radius: 4px


.data-label
  border-radius: 3px
  font-size: 12px
  color: $white !important
  padding: 5px 20px
  width: 100px
  margin: 0 auto
  text-align: center
  font-weight: $weight-semibold

  &.green
    background: #36AF47

  &.red
    background: #ED1C24

  &.bright
    background: #C2CAD4
    color: $white

  &.yellow
    background: #ffd43b

.data-label-mini
  border-radius: 5px
  font-size: 10px
  color: $white !important
  padding: 5px 20px
  width: 80px
  margin: 0 auto
  text-align: center
  font-weight: $weight-semibold

  &.green
    background: #36AF47

  &.red
    background: #ED1C24

  &.bright
    background: #C2CAD4
    color: $white

  &.yellow
    background: #ffd43b

.text-time
  display: block
  color: $grey-light !important
  margin-left: 5px