.internal-page {
  padding: $internal-page-padding;
  color: $internal-page-text-color;

  h1 {
    display: flex;
    border-bottom: $internal-page-h1-border-bottom;
    margin: $internal-page-h1-margin;
    padding: $internal-page-h1-padding;

    small {
      font-weight: $internal-page-h1-small-font-weight;
      margin: 0 0 0 20px;
    }
  }

  h2 {
    display: flex;
    margin: $internal-page-h2-margin;
    padding: $internal-page-h2-padding;

    label {
      display: flex;
      justify-content: flex-end;
      flex: $internal-page-h2-label-flex;
      font-size: $internal-page-h2-label-font-size;
      margin: $internal-page-h2-label-margin;

      input {
        margin: $internal-page-h2-label-input-margin;
      }
    }
  }

  small {
    font-weight: $internal-page-h2-small-font-weight;
    // margin-left: auto;

    // to-do: lets think about moving these out onto their own
    &.status-tag {
      display: inline-flex;
      align-self: center;
      border-radius: .25em;
      padding: 2px 5px;
      color: white;
      font-size: 16px;

      input {
        margin: 0 5px 0 0;
      }

      &.processed {
        background: $roman-coffee;
      }

      &.approved {
        background: $fern;
      }

      &.approval-ready {
        background: $cob-blue;
      }

      &.not-submitted {
        background: $red;
      }

      &.not-approved {
        background: $california;
      }

      &.select-all {
        margin: 0;
      }
    }
  }

  a {
    color: $internal-page-a-text-color;

    &:hover,
    &:focus,
    &.active {
      color: $internal-page-a-active-state-text-color;
    }
  }

  ul {
    margin: $internal-page-ul-margin;
    padding: 0 0 0 10px;
    list-style-position: $internal-page-ul-list-style-position;

    // &:last-of-type {
    //   margin: 0;
    // }

    li {
      margin: $internal-page-ul-li-margin;
    }
  }

  &.settings {
    h1 {
      margin: 0 0 20px 0;
    }

    h2 {
      padding: 0;
      margin: 0 0 5px 0;
    }
  }

  .emp-no-time-wrapper {
    margin: 20px 0;

    strong {
      display: block;
      margin: 0 0 10px 0;
    }
  }

  .calendar-header-controls {
    padding: 0 !important;
    margin: 20px 0;

    a {
      color: $dark-slate;
    }

    hr {
      margin: 20px 0;
    }

    select {
      margin: 0 20px 0 0 !important;
    }

    .button {
      position: relative;
      display: -ms-inline-flexbox;
      display: inline-flex;
      vertical-align: middle;
    }
  }

  // to-do: rethink everythnig below
  .m-b-40,
  table {
    &:last-of-type {
      margin-bottom: 0 !important;
    }
  }

  .approval-wrapper {
    border-bottom: 1px solid $silver-chalice;
    margin: 0 0 0 -20px;
    padding: 20px;
    width: calc(100% + 40px);

    h1 {
      border: none;
    }

    ul {
      margin: 10px 0 30px 0;
    }

    p {
      margin: 0 0 10px 0;
    }

    .alert {
      p {
        margin: 0;
      }
    }

    &:last-of-type {
      border-bottom: none;
    }

    &:nth-child(odd) {
      background: #efefef;

      .totals-row {
        background: #efefef
      }
    }
  }

  button {
    &.quick-approve {
      background-color: $fern;
      color: white;
      margin: 0 0 0 10px;
      padding: 0 16px;

      &:hover {
        background-color: darken($fern, 10%);
      }
    }
  }

  .approve-process-header-lists {
    border-bottom: 1px solid $silver-chalice;
    margin: 20px 0;

    small {
      &.status-tag {
        float: left;
        margin: 0 0 5px 0;
        min-width: 140px;
        text-align: center;
      }
    }

    ul {
      display: inline-block;
      margin: 0 0 20px 0;
      padding: 0;
      width: 100%;

      li {
        float: left;
        list-style: none;
        margin: 0 5px 5px 0;
      }
    }
  }

  input[type="submit"],
  button[type=submit],
  .button[type=submit] {
    background-color: $fern;
    border-color: $fern;
    color: white;
    margin-left: auto;
  }

  .approval-button-row {
    padding: 20px 0 0 0;
  }

  .internal-timewarp {
    h1 {
      margin: 20px 0;
    }

    ul {
      &.no-data {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
        border-bottom: 1px solid #9e9e9e;

        li {
          display: inline-block;
          margin: 0 0 10px 0;
          padding: 0;
        }
      }
    }

    .emp-runs {
      background: #c6c6c6;
      padding: 20px;
      border-radius: 10px;
      margin: 0 0 40px 0;

      .title-row {
        display: flex;
        align-items: center;
        margin: 0 0 20px 0;
        padding: 0 0 10px 0;
        border-bottom: 1px solid #9e9e9e;

        h1 {
          border: none;
          margin: 0;
          padding: 0;
        }

        h2 {
          margin: 0 0 0 auto;
          padding: 0;
        }
      }

      .weeks-run {
        display: flex;
        flex-wrap: wrap;

        table {
          width: calc(50% - 20px);

          &:nth-child(2) {
            margin: 0 0 0 auto;
          }

          tr {
            th {
              &:nth-child(n+2) {
                text-align: right;
              }
            }
          }
        }
      }

      table {
        &.last-workflow {
          width: 100%;
          margin: 0 0 20px 0;
        }
      }
    }
  }
}