MetaPhase-Consulting/State-TalentMAP

.aim-header-container {
  background-color: $tm-navy-dark;

  a {
    text-decoration: none;
  }

  .aim-title-container {
    color: $color-white;
    font-size: 1.2em;
    padding: 14px;

    .fa {
      padding-right: 10px;
    }

    .aim-title {
      border-bottom: 2px solid $color-white;
      color: $color-white;
    }

    .aim-title-dash {
      padding-left: 5px;
    }
  }
}

.aim-disabled {
  .ai-maintenance-header {
    .back-save-btns-container {
      button:disabled {
        background-color: #d6d7d9;
        border: 1px solid #d6d7d9;
        color: $color-white;
      }
    }
  }

  .asg-dropdown,
  .aim-select,
  .aim-select-small,
  .add-pos-num-input {
    color: $color-gray;
    cursor: not-allowed;
  }

  .ai-research-pane {

    .frequent-positions-table,
    .remarks-glossary-container {
      .filter {
        display: inline-flex;
        align-items: baseline;
        justify-content: flex-start;

        input[type="text"] {
          border-right: 0.1rem solid #5b616b;
          width: 400px;
        }

        span {
          margin-left: -35px;
        }

        .close-fa {
          font-size: initial;
        }

        .fa-close {
          cursor: default;
        }
      }

      .fa,
      .fa-disabled,
      .fa-disabled:hover {
        color: $color-gray;
        cursor: not-allowed;
      }
    }
  }
}

.remarks-glossary-container {

  .fa-disabled,
  .fa-disabled:hover {
    color: $color-gray !important;
    cursor: not-allowed;
  }
}

.ai-maintenance-container {
  margin: 10px;
  padding-bottom: 15px;

  // at 1600 we auto stack, so smaller screen styles should go there
  @media screen and (min-width: 1600px) {
    width: 99%;
  }

  @media screen and (min-width: 4000px) {
    width: 99.5%;
  }

  // ---- start: styling for left pane ----

  .ai-maintenance-header {
    background-color: $tm-white-smoke-light;
    padding-bottom: 20px;

    label {
      font-weight: bold;
      margin: 0px;
      text-align: right;
      margin-right: 5px;
      width: 125px;
    }

    .back-save-btns-container {
      padding-top: 2.5rem;
      min-height: 70px;

      button {
        margin: 0 !important;
      }
      .delete-btn {
        border: 1px solid $color-red;
        border-radius: 5px;
        color: $color-red;
        background-color: $color-white;
        padding: 10px 20px;
        float: right;
        font-size: 14px;
        margin-left: 5px !important;
      }

      .delete-btn:disabled {
        background-color: $color-gray-lighter;
        border: 1px solid $color-gray-light;
        color: $color-gray;
      }

      .delete-btn:hover {
        border-color: $color-red-darkest;
        color: $color-red-darkest;
      }

      .save-ai-btn {
        border: 1px solid $primary-blue;
        border-radius: 5px;
        color: $primary-blue;
        background-color: $color-white;
        padding: 10px 20px;
        float: right;
        font-size: 14px;
      }

      .save-ai-btn:hover {
        border-color: $primary-blue-darkest;
        color: $primary-blue-darkest;
      }
    }

    .remarks {
      margin: 10px 0 15px;

      label {
        display: inline;
        margin: 0 10px 0 0;
      }

      div:not(.remarks-pill) {
        display: inline;
      }

      .remarks-pill {
        display: inline-block;
      }
    }

    .add-legs-container {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      border-top: 2px solid gray;

      .add-legs-header {
        margin: 5px 0 10px 0;
        width: 100%;
        text-align: center;
        font-weight: bold;
      }

      select {
        border: 1px solid $bg-gray-dark-2;
        border-radius: 3px;
        font-size: 0.8em;
        height: 28px;
        padding: 0 28px 0 5px;
        text-overflow: ellipsis;
      }

      .asg-dropdown {
        width: 351px;
      }

      .asg-disabled {
        background-color: $color-gray-lighter;
        border: 1px solid $color-gray-light;
        color: $color-black;
      }

      .asg-animation {
        animation: asgAnimation 2s;
      }

      @keyframes asgAnimation {
        0% {
          background-color: $primary-alt-light;
        }

        100% {
          background-color: $primary-alt-lightest;
        }
      }

      .position-number-container {
        .add-pos-num-input {
          border-radius: 3px;
          height: 28px;
          padding: 0 30px 0 5px;
          width: 351px;
          font-size: 13px;
          display: inline;
        }

        .input-error {
          background-color: $color-red-lightest;
          border: 1px solid $color-red;
        }

        .input-disabled {
          background-color: $color-gray-lighter;
          border: 1px solid $color-gray-light;
        }

        .add-pos-num-icon {
          color: $primary-blue;
          margin-left: -25px;
        }

        .add-pos-num-icon:hover {
          color: $primary-blue-darkest;
        }

        .icon-disabled {
          color: $color-gray;

          .fa {
            cursor: not-allowed;
          }
        }

        .icon-disabled:hover {
          color: $color-gray;
        }

        label {
          display: flex;
        }

        .fa {
          padding-left: 0px;
        }
      }

      .add-fp-link {
        cursor: pointer;
        margin-top: 5px;
        width: 100%;
      }
    }

    .ai-maintenance-header-dd {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(425px, 1fr));

      div {
        display: flex;
        flex: 70%;
        align-items: center;
      }

      .select-label {
        align-self: end;
        padding-bottom: 8px;
      }

      select {
        border: 1px solid $bg-gray-dark-2;
        border-radius: 3px;
        font-size: 0.8em;
        height: 28px;
        padding: 0 28px 0 5px;
        text-overflow: ellipsis;
      }

      .aim-select {
        width: 280px;
      }

      .aim-select-small {
        width: 140px;
      }
    }
  }

  .maintenance-container-left {
    height: 98vh;
    overflow-y: auto;
    padding: 0 10px 20px 0;
    width: 49%;
    display: inline-block;

    .tm-spinner-left-pane {
      left: 35%;
      position: absolute;
      top: 40%;
    }

    @media screen and (min-width: 4000px) {
      .ai-maintenance-header label {
        margin: 10px;
        min-width: 0;
        text-align: right;
      }
    }
  }

  .maintenance-container-left-expanded {
    height: 98vh;
    overflow-y: auto;
    width: 98%;
    display: inline-block;

    .tm-spinner-left-pane {
      left: 55%;
      position: absolute;
      top: 40%;
    }
  }

  .aim-timestamp-wrapper {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    flex-wrap: wrap;
    font-size: 12px;

    .aim-timestamp {
      display: flex;
      justify-content: space-around;
    }

    .date {
      padding-left: 2px;
      font-size: 10px;
      align-self: center;
    }
  }

  .read-only-pmd {
    height: 33px;
  }

  // ---- end: styling for left pane ----

  .expand-arrow {
    align-self: center;
    color: $primary-blue;
    display: inline-block;
    width: 2%;
  }

  .expand-arrow>div {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }

  // ---- start: styling for right pane ----

  .maintenance-container-right {
    background-color: $color-white;
    height: 98vh;
    overflow-y: auto;
    width: 49%;
    display: inline-block;
  }

  .hidden {
    display: none !important;
  }

  .ai-research-pane {
    input {
      border-radius: 5px;
    }

    .bid-content-container>div:last-child>div {
      display: inline;
    }
  }

  .ai-research-content {
    padding: 20px;
    position: relative;
    background-color: $color-white;

    .filter {
      display: inline-flex;
      align-items: baseline;
      justify-content: flex-start;

      input[type="text"] {
        border-right: 0.1rem solid #5b616b;
        width: 400px;
      }

      span {
        margin-left: -35px;
      }

      .close-fa {
        font-size: initial;
      }

      .fa-close {
        cursor: default;
      }
    }

    .dashboard-section-title {
      margin-bottom: 1em;
    }

    h2 {
      display: inline;
      font-size: 1.1em;
    }

    #aim-classifications {
      .classifications-client-badges-container {
        max-height: initial;
      }
    }

    .tm-spinner {
      margin-top: 100px;
    }

    .rpv-core__viewer {
      div div {
        overflow: unset !important;
      }
    }
  }

  .data-point-container {
    margin-bottom: 10px;

    .data-point-title {
      color: $color-black;
      font-size: 1.6rem;
      font-weight: bold;
    }
  }

  .language-details>span {
    border-left: 1px solid $bg-gray-medium-1;
    float: inherit;
    margin-left: 10px;
    padding-left: 10px;
  }

  .frequent-positions-table {

    .ds-c-spinner {
      left: 45%;
      position: absolute;
      top: 0px;

      &::before,
      &::after {
        height: 20px;
        width: 20px;
      }
    }

    .spinner-blue {
      color: $blue-primary;
    }

    .usa-alert {
      margin-top: 0;
      margin-bottom: 20px;
    }

    font-size: .9em;

    td {
      border: 0;
      margin: auto;
    }

    table {
      width: 100%;
    }

    tr {
      display: flex;
    }

    tr>*:nth-child(1) {
      flex: 1
    }

    tr>*:nth-child(2) {
      flex: 6
    }

    tr>*:nth-child(3) {
      flex: 6
    }

    tr>*:nth-child(4) {
      flex: 12
    }

    .gsa-locations {
      thead>tr {
        th:first-of-type {
          position: relative;

          .fa {
            font-size: 1.4em;
            left: 30%;
            position: relative;
          }
        }

        .fa-globe {
          color: $color-white;
        }
      }

      tr>*:nth-child(1),
      *:nth-child(6) {
        flex: 1
      }

      tr>*:nth-child(2),
      *:nth-child(3),
      *:nth-child(4),
      *:nth-child(5) {
        flex: 4;
      }

    }

    tbody>tr {
      border: 2px solid $bg-gray-dark-1;
      border-top: 0px;
    }

    tbody>tr {
      >td:first-of-type {
        position: relative;

        .fa {
          font-size: 1.4em;
          left: 30%;
          position: relative;
        }

        .fa-enabled {
          color: $color-blue-hover;
        }

        .fa-enabled:hover {
          color: $primary-blue-darkest;
        }
      }
    }

    tbody>tr:nth-child(even) {
      $bg: $bg-gray-medium-2;
      background-color: $bg;

      td {
        background-color: $bg;
      }
    }

    tbody>tr:nth-child(odd) {
      $bg: $color-white;
      background-color: $bg;

      td {
        background-color: $bg;
      }
    }

    th {
      background-color: $dos-blue;
      border: 0;
      color: $color-white;
      font-weight: bold;
    }
  }

  // ---- end: styling for right pane ----
}

.stacked {
  display: block;
  width: 99%;

  .maintenance-container-left-expanded {
    border-bottom: 3px solid $color-black;
    width: 100%;
  }

  .maintenance-container-right {
    margin-top: 20px;
    width: 100%;
  }
}

.remarks-categories-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  flex-direction: row;
  flex-wrap: wrap;
  margin: 10px 10px 30px 10px;
  justify-content: space-between;

  a {
    min-width: 200px;
    color: black;
    font-weight: bold;
    cursor: pointer;
    padding: 10px
  }

}

.remarks-glossary-container {
  margin: 2em 0;

  ul {
    list-style: none;
    padding-left: 0;
    font-size: 13px;
  }

  li>* {
    display: inline;
  }

  li:nth-child(even) {
    $bg: $bg-gray-medium-2;
    background-color: $bg;
  }

  li:nth-child(odd) {
    $bg: $color-white;
    background-color: $bg;
  }

  .fa {
    font-size: 1.5em;
    margin-top: 2px;
  }

  .fa-minus-circle {
    color: $color-red;
  }

  .fa-plus-circle {
    color: $tertiary-success;
  }

  .remark-input-container {
    display: inline;
    margin: auto 0 auto 7px;

    .react-datepicker-wrapper {
      width: 200px;
    }

    .remark-input {
      display: inline-block;
      height: 10px;
      margin-right: 0;
      width: 200px;

      label {
        display: inline;
      }

      input,
      .react-datepicker__input-container {
        height: 10px;
        display: inline-block;
        font-size: 13px;
        line-height: normal;
        margin: 0;
      }
    }
  }

  .remark-category {
    color: $color-white;
    border-radius: 5px;
    padding: .5em;
    font-size: 13px;
    display: flex;
  }
}

// ---- start: styling for validation errors ----
.ai-validation-errored,
.ai-validation-errored:hover {
  background-color: $color-white !important;
  border: 2px solid $secondary-dark;
  border-radius: 5px;
  color: $secondary-dark;
  float: right;
  font-size: 14px;
  padding: 9px 17px;
}

.validation-error-border-legs {
  border: 2px solid $secondary-dark !important;
}

.validation-error-border {
  border-bottom: 2px solid $secondary-dark !important;
}

.legs-form-container {
  .validation-error-border:hover {
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
  }
}

.ail-form-ted {
  .validation-error-border:hover {
    border-top: none;
    border-left: none;
    border-right: none;
  }
}

.validation-error-message {
  color: $secondary-dark;
  font-size: 12px;
  font-weight: normal;
}

.error-message-wrapper {
  display: block !important;

  .validation-error-message-label {
    text-align: right;
    display: block !important;
    height: 15px;
  }
}

// ---- end: styling for validation errors ----

.aim-combined-tod {
  display: flex;
  align-self: flex-end;
}

.aim-combined-tod-other-text {
  justify-content: center;
}

.search-locations-container {
  .search-locations-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    button {
      margin: 0;
    }

    .filter {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: flex-start;
      width: 250px;

      label {
        margin-right: 5px;
      }

      input[type="search"] {
        border-right: 0.1rem solid #5b616b;
        width: 240px;
      }

      span {
        margin-left: -25px;
      }

      .fa-close {
        cursor: default;
      }
    }
  }

  .active-globe {
    text-shadow: 0px 0px 12px $color-blue-neon;
  }
}