$black: #3b4151;
$green: #2faa00;
$orange: orange;
$blue: #75d8d0;

$red: red;

$lightgrey: #f6f6f6;
$mediumgrey: #dddddd;
$darkgrey: #5e5e5e;

$backgroundgrey: $lightgrey;

$fontColor: #2a2a2a;
$linkColor: $green;

$successColor: $green;
$failureColor: $orange;
$disabledGrey: #8d8d8d;
// helpers

// Typography
body {
  color: $fontColor;
  font-size: 12px;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: $backgroundgrey;
}

a {
  text-decoration: none;
  color: $linkColor;
}

// Primary layout
html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
}

.primary-frame {
  flex-grow: 1;
  overflow: hidden;
}

.primary-frame-inner {
  overflow: auto;
  height: 100%;
  width: 100%;
}
.wrapper {
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.api-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: $black;
  color: white;
  width: 250px;
  padding-bottom: 1rem;

  .logo {
    text-align: center;
    margin: 2rem auto;
    width: 50%;

    a {
      color: none;
    }
    img {
      width: 100%;
    }
  }

  a.menu-item {
    display: block;
    padding: 1rem;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: white;

    border: 1px solid #3b4151;
    border-left-width: 2px;
    border-left-width: 0px;

    &.impersonation-banner {
      color: red;
    }

    i {
      font-size: 16px;
      margin-right: 0.5rem;
    }

    &[href]:hover {
      background: white;
      color: $black;
      width: 260px;
      box-sizing: border-box;
      z-index: 1000000;
    }
  }

  hr {
    border: 0;
    height: 2px;
    border-top: 1px solid $backgroundgrey;
  }
}

header.title {
  display: flex;
  justify-content: space-between;
  margin: 50px 0;
  h1 {
    font-size: 36px;
    font-family: sans-serif;
    color: $black;
  }
}

.items-content {
  display: flex;
  width: 100%;
  > div:first-child {
    flex-grow: 1;
  }
  form {
    > div {
      padding-bottom: 5px;
      padding-left: 1rem;
    }
    .search {
      padding: 10px 8px;
    }
    .choices,
    .search {
      width: 300px;
      box-sizing: border-box;
      border: 1px solid lightgrey;

      background-color: white;
    }

    .choices__inner {
      box-sizing: border-box;
      border: none;
      padding-bottom: 0px;
      min-height: 0px;
      background-color: white;
    }

    .choices__input {
      background-color: white;
    }

    .choices__list--multiple .choices__item {
      background-color: $green;
      border-color: white;
    }
  }
}

.item-card {
  background-color: white;
  padding: 0.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  h2 {
    display: flex;
    justify-content: space-between;
  }
  .tags {
    .tag {
      background: $mediumgrey;

      border-radius: 100px;
      padding: 2px 10px;
      font-weight: bold;
      font-size: 0.6rem;
    }
  }
}

.query-table-form {
  input {
    width: 50px;
    box-sizing: border-box;
    height: 25px;
    padding-left: 2px;
    border: 1px solid $mediumgrey;
    // color: $lightgrey;
    background: none;
  }

  .query-table {
    border-collapse: collapse;
    width: 100%;

    thead {
      // background: $black;
      // color: white;
      th:first-child {
        width: 6rem;
      }
      tr:first-child {
        th {
          padding: 5px;
          text-align: left;
        }
      }
      tr:nth-child(2) {
        input {
          width: 100%;
        }
      }
    }

    tbody {
      tr:nth-child(2n + 1) {
        background: white;
      }
      td {
        padding: 5px;
        a {
          font-weight: bold;
        }
      }
    }
  }

  .table-footer {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}
