.new-container-pull {
  display: flex;
  flex: 1 auto;
  align-items: center;
  justify-content: center;
  .content {
    text-align: center;

    .buttons {
      margin-top: 30px;
      .btn {
        margin-left: 10px;
        margin-right: 10px;
        padding: 8px 18px;
        font-size: 14px;
        background: white;
        font-weight: 300;
      }
    }
  }
  h1 {
    font-size: 20px;
    color: @gray-normal;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
  }
}

.new-container {
  display: flex;
  flex: 1 auto;
  flex-direction: column;

  .spinner {
    display: inline-block;
  }

  .results {
    display: flex;
    flex-direction: column;
    flex: 1 auto;
    color: @gray-normal;

    .no-results {
      flex: 1 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      img {
        width: 380px;
      }

      .verify {
        margin: 15px 0;
        position: relative;

        .spinner {
          position: absolute;
          top: 0;
          right: -50px;
        }
      }

      .loader {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 300px;
        margin-top: -10%;
        h2 {
          color: @gray-normal;
          margin-bottom: 20px;
        }
      }
      h1 {
        color: @gray-lighter;
        font-size: 24px;
        margin: 0 auto;
      }
    }
  }
  .new-container-header {
    background-color: white;
    height: 45px;
    border-bottom: 1px solid @color-divider;
    display: flex;
    flex: 0 auto;
    flex-shrink: 0;
    .search {
      flex: 1 auto;
      .search-bar {
        position: relative;
        .loading {
          position: absolute;
          top: 13px;
          left: 13px;
        }
        .search-icon {
          font-size: 14px;
          color: @gray-lighter;
          position: absolute;
          top: 14px;
          left: 13px;
        }
        input {
          transition: all 140ms;
          width: 90%;
          max-width: 500px;
          border-radius: 0;
          position: relative;
          top: -1px;
          left: -1px;
          font-size: 14px;
          height: 46px;
          padding-left: 3.7rem;
          color: @gray-darkest;
          box-shadow: none;
          border: 1px solid @color-divider;
          //border-right: 1px solid transparent;
          &:hover {
            border: 1px solid @gray-lighter;
          }
          &:focus {
            box-shadow: none;
            border: 1px solid @brand-primary;
          }
          &::-webkit-input-placeholder {
            color: @gray-lighter;
            font-weight: 400;
          }
        }
      }
    }
    .results-filters {
      margin: 1.2rem 1.2rem 0 0;
      .results-filter-title {
        font-size: 12px;
        color: @gray-lighter;
        font-weight: 500;
        margin-right: 0.7rem;
      }
    }
  }
}

.result-grids {

  overflow: auto;
  margin: 0 0 0 1.3rem;

  .result-grid {
    display: flex;
    align-content: stretch;
    display: flex;
    flex-flow: row wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
    .image-item {
      display: flex;
      flex: 1 0;
      position: relative;
      min-width: @image-card-width;
      max-width: @image-card-width;
      height: @image-card-height;
      border-radius: @border-radius;
      background-color: white;
      margin-right: 1rem;
      margin-bottom: 1rem;
      .overlay {
        display: flex;
        flex: 1 0;
        background-color: white;
        border-radius: @border-radius;
        min-width: @image-card-width;
        max-width: @image-card-width;
        height: @image-card-height;
        position: absolute;
        color: @gray-normal;
        display: none;
        border: 1px solid @color-divider;
        
      }
      .menu-overlay {
        z-index: 999;
        .menu-item {
          padding: 0.8rem 1rem;
          border-bottom: 1px solid @color-divider;
          .box-button();
          .selected-tag {
            color: @brand-primary;
          }        
        }
        .close-overlay {
          position: absolute;
          bottom: 1rem;
          right: 1rem;
        }
      }
      .tag-overlay {
        z-index: 1000;
        .close-overlay {
          position: absolute;
          top: 0.6rem;
          right: 0.7rem;
        }
        p {
          color: @gray-normal;
          padding: 0.8rem 1rem;
          margin-bottom: 0;
          border-bottom: 1px solid @color-divider;
        }
        .tag-list {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          align-content: flex-start;
          flex-flow: row wrap;
          height: 90px;
          overflow: auto;
          padding: 0.5rem;
          .tag {
            font-size: 10px;
            padding: 0.3rem 0.6rem;
            display: inline-block;
            flex: 0 auto;
            border-radius: @border-radius;
            margin-right: 0.3rem;
            margin-bottom: 0.3rem;
            border: 1px solid transparent;
            &.active {
              background-color: @brand-primary;
              color: white;
              &:hover {
                background-color: @brand-primary;
                color: white;
                border: 1px solid transparent;
              }
            }
            &:hover {
              background-color: @color-box-button;
              border: 1px solid @color-divider;
            }
          }
        }
        .tags-loading {
          position: relative;
          left: 45%;
          text-align: center;
          margin-top: 3rem;
          -webkit-animation-name: spin;
          -webkit-animation-duration: 1.8s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-timing-function: linear;
        }
        .no-tags {
          color: @gray-lighter;
          text-align: center;
          margin-top: 3rem;
        }
      }
      .logo {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
        background-color: @brand-action;
        border-top-left-radius: @border-radius;
        border-bottom-left-radius: @border-radius;
        justify-content: center;
        text-align: center;
        box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2);
        img {
          width: 35px;
          height: auto;
          margin-top: 1.2rem;
        }
      }
      .card {
        position: relative;
        border: 1px solid darken(@gray-lightest, 5%);
        border-left: 0;
        border-top-right-radius: @border-radius;
        border-bottom-right-radius: @border-radius;
        .info {
          padding: 0.7rem 1rem 0.7rem 1.2rem;
          .badges {
            color: @brand-primary;
            position: absolute;
            right: 0.6rem;
            top: 0.7rem;
          }
          .name {
            color: @gray-darkest;
            position: relative;
            width: 190px;
            .namespace {
              font-size: 10px;
              color: @gray-normal;
              &.official {
                color: @brand-action;
              }
            }
            .repo {
              font-size: 13px;
              font-weight: 500;
              display: inline-block;
              max-width: 190px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .description {
            font-size: 10px;
            color: @gray-light;
            padding-right: 1rem;
            height: 44px;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            display: -webkit-box;
            word-wrap: break-word;
          }
        }
        .actions {
          display: flex;
          flex-direaction: column;
          justify-content: flex-end;
          height: 33px;
          border-top: 1px solid @color-divider;
          .favorites {
            flex: 1 auto;
            font-size: 10px;
            color: @gray-normal;
            border-right: 1px solid @color-divider;
            padding: 1.1rem 1.2rem;
            .icon {
              position: relative;
              font-size: 11px;
              margin-right: 0.5rem;
              color: @gray-normal;
            }
            .text {
              position: relative;
              top: -0.2rem;
            }
          }
          .tags {
            flex: 1 auto;
            font-size: 10px;
            color: @gray-darker;
            padding-left: 1rem;
            .key {
              position: relative;
              font-weight: 400;
              color: @gray-light;
            }
            .text {
              position: relative;
              color: @brand-action;
              &:hover {
                background-color: @brand-action;
                color: white;
                border-radius: 20px;
              }
            }
          }
          .more-menu {
            flex: 0 auto;
            width: 39px;
            padding: 0.4rem 1rem;
            font-size: 20px;
            .box-button();
          }
          .action {
            flex: 0 auto;
            position: relative;
            top: -1px;
            right: -1px;
            height: 34px;
            .box-button();
            padding: 0.9rem 1rem;
            color: @brand-primary;
            border: 1px solid @brand-primary;
            border-bottom-right-radius: @border-radius;
            transition: all 140ms;
            &:hover {
              background-color: @brand-action;
              color: white;
              border: 1px solid darken(@brand-primary, 10%);
            }
          }
        }
      }
    }
  }
}