MetaPhase-Consulting/State-TalentMAP

.bidder-portfolio-card {
  .dashboard-user-profile-picture {
    height: 75px;
    width: 75px;
  }

  .view-more-link-centered {
    border-top: 0;
    padding: 5px;
  }

  .bid-count-container {
    margin-top: 0;
  }
}

.bidder-portfolio-stat-card-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

// IE11 fix for input text not displaying
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .user-dashboard > .bidder-portfolio-stat-card-list {
    max-width: calc(100vw - 260px);
  }
}

.bidder-portfolio-stat-card-container:last-child {
  flex-grow: 100;
}

.portfolio-row-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  list-style-type: none;
}

.portfolio-row {
  background-color: $blue-primary;
  // border-left: 8px solid $blue-primary;
  margin-bottom: 1em !important;

  .usa-accordion-button {
    background-color: $blue-primary;
    background-position: right 2rem center;
    color: $color-white;
    font-weight: normal;
    padding: .7em;
  }

  .usa-accordion-content {
    margin: .75em 0 0;
    padding: 0;
  }
}

.classifications-row {
  display: inline;
  padding: 15px 15px 0 50px;
  float: right;
}

.classifications-season-text {
  padding-top: 10px;
}

.multiBidSeasonDropdown {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(165px, 1fr));
  padding-left: 40px;
}

.multiBidSeason {
    display: inline;
  }

.ribbon-container-condensed-min {
  float:right;
  max-width: 200px;
}

.bidder-portfolio-stat-row {
  border: 1px solid $color-gray-light;
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  .bidder-portfolio-ribbon-container {
    float: right;
    width: auto;
    .ribbon-container-condensed {
      position: absolute;
      right: 0;
      top: 20;
      z-index: 2;
      padding: 20px;
      .ribbon-htf {
        max-width: 150px;
      }
    }
  }

  h4 {
    font-family: inherit;
    font-size: 1em;
    margin: 0;
    margin-right: 1em;
  }

  > div:nth-child(2) {

    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    > div {
      margin-right: 1em;

      > .tm-avatar {
        font-size: 3rem;
        height: 65px;
        line-height: 6.5rem;
        width: 65px;
      }
    }

    > div:last-child {
      margin-right: 0;
    }

    // setup flex values
    > div:nth-child(1) {
      flex: 3 1 280px;
    }

    > div:nth-child(2) {
      display: flex;
      flex: 6 0 100px;
    }

    > div:nth-child(3) {
      flex: 8 0 225px;
      padding-top: 1em;

      > span {
        display: flex;
      }
    }

    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
      > div:nth-child(3) {
        flex: 8 0 50%;
      }
    }

    // Disable to override the >div:nth-child() styles
    // scss-lint:disable MergeableSelector
    // scss-lint:disable QualifyingElement
    > div.client-checkbox-list {
    // scss-lint:enable MergeableSelector
    // scss-lint:enable QualifyingElement
      display: flex;
      flex: 16 1 450px;
      flex-wrap: wrap;
      justify-content: flex-start;

      .tm-checkbox {
        margin: 0 auto;
        margin-left: 0;
        margin-right: 2rem;
        min-width: 10rem;

        label {
          margin-bottom: 1rem;
          margin-top: 1rem;
        }
      }
    }
  }

  .stat-card-data-point--name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 1.1em;

    a {
      font-size: 1.1em;
      font-weight: bold;
    }
  }

  .stat-card-comments {
    width: '100%';
    dd {
      width: 100%;
    }
  }

  .stat-card-data-space {
    display: flex;
    justify-content: space-between;
  }

  .client-badge-list {
    display: flex;

    .client-badge-container {
      margin-right: 1em;
      min-width: 30px; //Fixes ie11 issues
    }
  }

  dt {
    font-weight: bold;
  }

  dd {
    margin-left: 5px;
  }
  .stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    border-bottom: 1px solid $color-gray-light;
  }
  .stat-card-client {
    margin: 0px;
  }
  .stat-card-data-point {
    display: flex;
    flex-direction: row;
    line-height: 1.3em;
  }

  .stat-card-btn-container {
    display: flex;
    justify-content: flex-end;
  }

  .stat-card-cancel-btn {
    background-color: transparent;
  }

  .toggle-more-container {
    text-align: right;
  }

  .button-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;

    @media screen and (max-width: 1260px) {
      justify-content: center;
    }

    > span {
      margin-right: 10px;
    }

    span,
    a,
    button {
      margin: 0;
      margin-bottom: 0;
    }

    > button {
      width: 150px;
    }

    .link-button-wrapper {
      margin-right: 10px;
    }

    .search-as-client-button {
      margin-right: 2rem;
    }
  }
}

.bidder-portfolio-stat-card {
  border-top: 8px solid $primary-blue;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  max-height: 800px;
  margin-bottom: 25px;
  margin-left: 15px;
  margin-right: 25px;
  width: 330px;

  a {
    display: inline-block;
  }

  h3 {
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    margin: 0 5px 0 0;

    a {
      align-items: center;
      display: flex;
      font-size: 1.6rem;
    }

    .fa {
      font-size: 2.5rem;
      font-weight: bold;
      margin-left: 5px;
    }
  }

  dt {
    font-weight: bold;
  }

  .location-label {
    flex-shrink: 0;
  }

  dd {
    margin-left: 5px;
  }

  .bidder-portfolio-stat-card-top {
    display: flex;
    flex: 5;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
  }

  .bidder-portfolio-stat-card-bottom {
    border-top: 1px solid $color-gray-lighter;
    display: flex;
    flex: 5;
    flex-direction: column;
    padding-bottom: 20px;

    > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px 16px 0;
      width: 100%;

      .updates {
        font-weight: bold;
        margin-bottom: 15px;
      }
    }

    > div:nth-child(2) {
      padding-bottom: 0;
    }
  }

  .stat-card-data-point {
    display: flex;
    flex-direction: row;
  }

  .button-container {
    margin-top: 10px;

    span,
    a,
    button {
      margin: 0;
      margin-bottom: 0;
    }

    > span,
    > button {
      width: 48%;
    }

    a,
    button {
      font-size: .9em;
      padding: 10px 5px;
    }
  }
}

.client-badge-list {
  display: flex;
  margin: 0;
}

.client-badge-container {
  flex: 1;
  text-align: center;

  .client-badge {
    min-width: 1em;

    svg {
      align-items: center;
      background-color: $bg-gray-medium-1;
      color: $bg-gray-dark-0;
      display: flex;
      height: 30px;
      justify-content: center;
      margin: auto;
      padding: .3em;
      width: 30px;
    }
  }

  &.client-badge-container--success {
    svg {
      background-color: $color-green-dark;
      color: $color-white;
    }
  }

  &.client-badge-container--warning > .client-badge > svg {
    background-color: $color-gold-lighter;
    color: $color-black;
  }

  .client-badge-text {
    font-size: 1rem;
    font-weight: normal;
    margin-top: 10px;
  }

  &.client-badge-container--text {
    .client-badge {
      span {
        font-size: .8em;
      }
    }
  }
}

$cdo-search-container-width: 270px;
$cdo-search-container-padding: 10px;

.bidder-portfolio-page {
  border-top: 1px solid $color-white;

  .bid-cycle-picker-container, .unassigned-bidder-picker-container {
    > div {
      font-size: .8em;
    }

    li {
      margin-bottom: 1px;
      margin-top: 1px;
    }

    li:first-child {
      margin-top: 3px;
    }

    li:last-child {
      margin-bottom: 3px;
    }

    .picky--sublabel {
      margin-left: 2em;
    }
  }
  .bid-cycle-picker-container {
    .picky {
      width: 185px;
    }
  }
  .unassigned-bidder-picker-container {
    .picky {
      width: 190px;
      .picky__input--disabled {
        background-color: $bg-gray-medium-4;
        border-color: $bg-gray-medium-1;
        color: $bg-gray-medium-0
      }
    }
  }

  .unassigned-disabled {
    opacity: 0.4;
  }

  .dropdown-trigger-container {
    align-items: center;
    display: flex;

    > span {
      margin-right: 10px;
    }
  }

  .account-dropdown--name {
    border: 1px solid $bg-gray-dark-2;
    display: flex;
    justify-content: space-between;
    margin-left: 0;
    min-width: $cdo-search-container-width + ($cdo-search-container-padding * 2);
    padding: 8px 11px;
  }

  .tm-avatar {
    font-size: 2rem;
    height: 50px;
    line-height: 5rem;
    width: 50px;
  }

  .export-button-container,
  .edit-buttons-container {
    display: flex;

    button {
      align-items: center;
      display: flex;
      justify-content: center;
      margin-left: 10px;
      min-width: 100px;
    }
  }

  .client-as-button-container {
    display: inherit;

    button {
      margin: 0;
      margin-left: 0;
      min-width: 120px;
      padding: 10px 5px;
    }
  }

  .bidder-portfolio-search-container {
    background-color: $bg-blue-dark-1;
    padding: 12px 31px;
  }

  .portfolio-sort-container {
    .bid-cycle-picker-container,
    .usa-form {
      align-items: center;
      display: flex;
      margin-right: 10px;

      .label {
        margin-right: 10px;
      }

      label,
      .label {
        margin-top: 0;
      }
    }
    #portfolio-filter {
      width: 140px;
    }
  }

  .portfolio-sort-container-contents {
    align-items: center;
    display: flex;
    float: right;
  }

  @media screen and (max-width: 1800px) {
    .small-screen-stack {
      flex-wrap: wrap;
      float: none;
    }
    .small-screen-stack > div {
      flex-basis: 45%;
      margin: 0 10px;
    }
    .small-screen-stack > div > label,.label {
      min-width: 120px;
    }
  }
  @media screen and (max-width: 1301px) {
    .small-screen-stack {
      width: 100%;
      margin-bottom: 10px;
    }

    .small-screen-stack > div {
      align-items: center;
      display: flex;
      float: right;
      margin: 0 10px 0 0;
    }
  }

  .results-search-bar {
    background-color: inherit;
  }

  .search-bar-container {
    max-width: unset;
    padding: 0;

    .search-results-inputs {
      padding: 15px 0;
    }
  }

  .total-results-container {
    // we need at least 1px of height for the width of this div to render when its contents are null
    min-height: 1px;
  }

  .tm-button-alt {
    margin-right: 0;
  }
}

.portfolio-grid-list {
  list-style-type: none;
  margin-top: 0;

  .usa-width-one-fourth:first-of-type {

    .current-user-name {
      margin-left: 0;
    }

    .dashboard-section-title.current-user-name.dashboard-section-title-small {
      text-align: center;
    }

    .data-point-container.skill-code-data-point-container.skill-code-data-point-container-gen-spec,
    .dashboard-section-title.current-user-name.dashboard-section-title-small {
      margin-left: 0;
    }

    h2,
    .skill-code-data-point-container > .data-point-content,
    .list-view,
    .status-container,
    .current-user-name,
    .skill-code-data-point-container-gen-spec {
      text-align: center;
    }

  }

  .user-dashboard-section {
    margin-bottom: 0;
  }

  .current-user-top {
    .section-padded-inner-container {
      padding-top: 5px;
    }
  }

  .name-group {
    margin-left: 9%;
    width: 39%;
  }

  .avatar-group {
    padding-top: 5px;
    width: 52%;
  }

  .avatar-group,
  .name-group {
    display: inline-block;
    float: left;

    .tm-avatar {
      margin-left: 30%;
      margin-top: 7%;
    }

    .skill-code-data-point-container,
    .dashboard-section-title {
      width: 100%;
    }

    .status-container {
      margin: 0;
      width: 100%;
    }
  }
}

.portfolio-grid-list-item {

  border-bottom: 0;

  .current-user-section-container {
    float: left;

    .tm-button-alt {
      border-width: 2px;
      font-size: 14px;
      margin-top: 10px;
      padding: 1rem 4rem;
    }
  }

  .view-more-link-centered {
    width: 100%;
  }

  .checkbox-container {
    float: left;
    width: 7%;

    label {
      margin-top: 4rem;
    }
  }

  .general-information-container {
    float: left;
    width: 93%;
  }
}

.bidder-portfolio-grid-item {
  padding: 10px;
}

.card-view {
  .bidder-portfolio-listing {
    left: -15px;
  }
}

.list-view {
  margin-right: inherit;

  .portfolio-grid-list-item {
    border-bottom: 0;
  }

  .portfolio-grid-list-item:last-child {
    border-bottom: 1px solid $color-gray-light;
  }

  .bidder-portfolio-listing {
    margin-right: inherit;
    .usa-accordion-button-all {
      background-color: $blue-primary;
      float: right;
      color: $color-white;
      font-weight: normal;
      padding: .7em;
    }
  }

  .dashboard-user-profile-picture {
    float: left;
    margin: 0;
  }

  @media screen and (max-width: 730px) {
    .tm-avatar {
      font-size: 1.8rem;
      height: 40px;
      line-height: 4.2rem;
      width: 40px;
    }
  }

  .status-container,
  .current-user-name,
  .skill-code-data-point-container-gen-spec {
    float: left;
    margin-left: 15px;
    text-align: left;
    width: 50%;
  }

  .status-container {
    margin-bottom: 5px;
  }

  .current-user-bid-information {
    margin-left: 5%;
    width: 100%;
  }

  .current-user-personal-information {
    min-height: unset;
    width: 100%;

    .data-point-title {
      display: none;
    }

    .data-point-container {
      float: left;
      text-align: center;
      width: 50%;
    }
  }

  .current-user-personal-information-grid-container {
    .skill-code-data-point-container-one {
      width: 60%;
    }

    .skill-code-data-point-container-two {
      width: 40%;
    }
  }
}

.portfolio-grid-list-header {
  background-color: $color-white;
  border: 1px solid $color-gray-lighter;
  border-bottom: 0;
  font-size: 13px;
  min-height: 40px;

  .fa {
    margin-left: 5px;
  }

  .section-padded-inner-container {
    padding: 10px 10px 5px;
  }

  .grid-list-header-col-one {
    .portfolio-grid-list-header-item {
      float: right;
      margin-right: 5%;
    }

    label {
      margin-top: 0;
    }
  }

  .grid-list-header-col-two {
    border-left: 1px solid $color-gray-light;

    .portfolio-grid-list-header-item {
      margin-left: 10%;
    }
  }

  .grid-list-header-col-three {
    border-left: 1px solid $color-gray-light;

    @media screen and (max-width: $screen-lg-min) {
      border-left: unset;
    }

    .portfolio-grid-list-header-item {
      margin-left: 10%;
    }
  }

  .grid-list-header-col-four {
    border-left: 1px solid $color-gray-light;
    min-height: 1px;
  }
}

.bidder-portfolio-additional-container {
  background: $color-gray;
  height: 350px;
  overflow-y: scroll;
  padding: 2em 4em;
  position: relative;

  .bidder-portfolio-additional-section {
    background: $color-white;
    margin-bottom: 1em;
  }

  .bidder-portfolio-additional {
    word-wrap: break-word;
  }
}

.item-list-container {
  padding: 1em 2em;

  .item-list-title {
    font-weight: bold;
    margin-bottom: .5em;
  }
}

// scss-lint:disable SelectorFormat
.portfolio-account-dropdown {
  $highlighted-color: $color-botticelli-blue;
  $unhighlighted-color: #F1F1F1;

  input {
    position: relative;
    top: -2px;
  }

  .dropdown__content {
    position: relative;
  }

  .react-autosuggest__suggestions-container {
    border: 1px solid $color-black;
    border-top: 0;
    max-height: 200px;
    overflow-y: scroll;
    width: $cdo-search-container-width;
  }

  li {
    background-color: $unhighlighted-color;
    border: 0;
  }

  .react-autosuggest__suggestion--highlighted {
    background-color: $highlighted-color;
  }

  .react-autosuggest__container {
    background-color: $unhighlighted-color;
    border: 1px solid $color-black;
    border-top: 0;
    left: 122px;
    padding: $cdo-search-container-padding $cdo-search-container-padding 0;
    top: -11px;
  }

  .dropdown-content-outer-container {
    position: absolute;
  }

  .autosuggest-container {
    padding: 5px;
  }

  .react-autosuggest__suggestions-container--open {
    border: 0;
    position: relative;
    right: 0;
    top: 0;
  }
}

.cdo-autosuggest > .picky {
  width: 250px;
}

.portfolio-filter-pills-container {
  .selections-container {
    margin-right: 10px;
  }
  .usa-grid-full {
    display: inline;
  }
  .usa-grid-full > * {
    display: inline;
  }
  .reset-filters-container {
    span {
      color: $primary-blue;
    .fa-times {
      color: $color-red;
      margin-right: 5px;
    }
    }
  }
}

.bidder-portfolio-stat-card-top {
  min-height: 250px;
  .bidder-compact-card-head{
    display: flex;
    justify-content: space-between;
  }
}

.bidder-portfolio-stat-card-bottom {
  .toggle-more-container {
    text-align: right;
  }
}

// scss-lint:enable SelectorFormat