@import url(https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap);
.main-header nav ul, .item-list {
  list-style: none;
}

.main-header nav ul li a {
  text-decoration: none;
  color: #3d4f90;
  color: var(--primary);
}

.main-header .actions .logout, form button, table tbody td.actions button, .item-list .item .info .actions button, .item-list .item .info .actions a, .no-items button, .users .add-user, .add-user .cancel {
  border: 0;
  color: #fff;
  color: var(--white);
  background: #3d4f90;
  background: var(--primary);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  line-height: 1.5rem;
}

.main-header {
  background: #eee;
  background: var(--gray-light);
  padding: 2rem
}

.main-header .title {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
            align-items: center
  }

.main-header .title h1 {
      margin: 0.5rem 0;
      height: 92px;
      width: 240px;
      font-size: 0;
      background-image: url("data:image/png;base64,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");
      background-repeat: no-repeat;
    }

.main-header nav ul li {
        display: inline-block;
        margin: 0 0.5rem 0.5rem 0
      }

.main-header nav ul li a {
          padding: 0.25rem 0.75rem;
          display: block;
          color: #fff;
          color: var(--white);
          background: #595959;
          background: var(--gray)
        }

.main-header nav ul li a.active {
            background: #3d4f90;
            background: var(--primary);
          }

.main-header .actions .logout {
      background: #dc3545;
      background: var(--danger);
    }

@media (min-width: 48rem) {
      .main-header nav ul {
        display: -webkit-box;
        display: flex
      }

        .main-header nav ul li {
          margin-right: 1rem;
        }
  }

form fieldset {
    border: none;
    margin-bottom: 1rem
  }

form fieldset span {
      font-size: 0.8rem;
      color: #595959;
      color: var(--gray);
    }

form fieldset input, form fieldset select {
      background-color: #fff;
      background-color: var(--white);
      border: 1px solid #595959;
      border: 1px solid var(--gray);
      margin-top: 0.25rem;
      border-radius: 0.25rem;
      padding: 0.5rem;
      font-size: 1rem;
      width: 100%;
      height: 2.5rem;
    }

form fieldset input:not([type='text']):not([type='search']) {
      height: auto;
    }

form fieldset input[type='checkbox'] {
      position: relative;
      top: -2px;
    }

form fieldset.checkbox label {
        margin-left: 0.25rem;
      }

form fieldset.checkbox input {
        width: auto;
      }

form button {
    margin-right: 0.5rem;
  }

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed
}

table thead th {
      border-bottom: 2px solid #595959;
      border-bottom: 2px solid var(--gray);
      padding: 0.5rem;
      text-align: left
    }

table thead th:nth-child(1) {
        width: 30%;
      }

table thead th:nth-child(2) {
        width: 30%;
      }

table thead th:nth-child(3) {
        width: 40%;
      }

table tbody td {
      border-bottom: 1px solid #595959;
      border-bottom: 1px solid var(--gray);
      padding: 0.5rem
    }

table tbody td.actions span {
          font-size: 0.8rem;
          padding-right: 0.15rem;
        }

table tbody td.actions button {
          margin-right: 0.15rem;
          padding: 0.25rem 0.5rem;
          font-size: 0.8rem
        }

table tbody td.actions button.danger {
            background: #dc3545;
            background: var(--danger);
          }

table tbody td.actions button.neutral {
            background: #eee;
            background: var(--gray-light);
            color: #000;
            color: var(--black);
          }

.item-list {
  display: grid
}

.item-list .item {
    display: -webkit-box;
    display: flex;
    width: 100%;
    margin-bottom: 1rem
  }

.item-list .item picture {
      margin-right: 1rem;
      padding-top: 0.5rem
    }

.item-list .item picture img {
        max-width: 80px;
      }

.item-list .item .info {
      -webkit-box-flex: 1;
              flex-grow: 1;
      padding-bottom: 2rem;
      border-bottom: 1px solid #eee;
      border-bottom: 1px solid var(--gray-light)
    }

.item-list .item .info h2 {
        font-weight: normal;
        font-size: 1.25rem;
      }

.item-list .item .info p {
        font-size: 0.75rem;
        margin-top: -0.25rem;
      }

.item-list .item .info .actions {
        margin-top: 1rem;

        display: -webkit-box;

        display: flex;
        -webkit-box-pack: justify;
                justify-content: space-between
      }

.item-list .item .info .actions span {
          font-size: 0.8rem;
          padding-right: 0.15rem;
        }

.item-list .item .info .actions button, .item-list .item .info .actions a {
          margin-right: 0.15rem;
          padding: 0.25rem 0.5rem;
          font-size: 0.8rem;
          line-height: 1.5
        }

.item-list .item .info .actions button.danger, .item-list .item .info .actions a.danger {
            background: #dc3545;
            background: var(--danger);
          }

.item-list .item .info .actions button.neutral, .item-list .item .info .actions a.neutral {
            background: #eee;
            background: var(--gray-light);
            color: #000;
            color: var(--black);
          }

@media (min-width: 48rem) {

.item-list {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem
}
  }

@media (min-width: 80rem) {

.item-list {
    grid-template-columns: repeat(3, 1fr)
}
  }

.item-filter {
  margin-bottom: 2rem;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center
}

.item-filter fieldset {
    margin: 0;
    -webkit-box-flex: 1;
            flex-grow: 1
  }

.item-filter fieldset:last-of-type {
      margin: 0;
    }

.item-filter label {
    margin-right: 0.5rem;
  }

.no-items {
  text-align: center;
  font-size: 1.25rem;
  color: #595959;
  color: var(--gray);
  margin: 1rem 0
}

/* Specific page css */

/* Users */

.users .add-user {
    margin-top: 1rem;
  }

.add-user .cancel {
    background: #dc3545;
    background: var(--danger);
  }

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-family: var(--font-family-sans-serif);
  line-height: 1.5;
}

/* Layout */

.wrapper {
  max-width: 80rem;
  margin: 0 auto;
}

.content {
  padding: 2rem
}

.content h1 {
    font-weight: normal;
    margin-bottom: 1rem;
  }

.content .error {
    color: #dc3545;
    color: var(--danger);
    display: block;
    background: #eee;
    background: var(--gray-light);
    padding: 1rem;
    font-weight: bold;
    margin: 1rem 0;
    font-size: 0.8rem;
  }

/* Variables  */

:root {
  --white: #fff;
  --gray-light: #eee;
  --gray: #595959;
  --black: #000;

  --primary: #3d4f90;
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;

  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
}