h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

hr {
  background: #888;
  height: 1px;
  border: solid 0px Transparent;
}

/* TRANSITIONS */

body > header a {
  text-decoration: none;
}

a,
input[type=text],
input[type=password],
input[type=date],
input[type=number],
select,
textarea,
button,
.button,
.green,
.red,
.blue,
.orange,
.purple,
.black,
.mdi,
.button-green,
.button-hover-green,
.button-orange,
.button-hover-orange,
.button-red,
.button-hover-red,
.button-purple,
.button-hover-purple {
  transition-property: background-color, border-color, color, box-shadow;
  transition-timing-function: ease;
  transition-duration: 0.25s;
}

/* METRO LINKS */

.MetroLinks > a,
.MetroLinks > input {
  font-size: 200%;
  font-weight: 300;
  padding-right: 20px;
  opacity: 0.7;
}

  .MetroLinks > a.active,
  .MetroLinks > input.active {
    font-weight: 600;
    opacity: 1;
  }

/* PAGE CONTENT */

#content > .columns {
  display: table;
  width: 100%;
  height: 100%;
}

  #content > .columns > div {
    display: table-row;
  }

    #content > .columns > div > div {
      display: table-cell;
      vertical-align: top;
      height: 100%;
    }

    #content > .columns > div > .left-column,
    #content > .columns > div > .right-column {
      width: 256px;
    }

#content .page-content,
.products {
  padding: 20px;
}

/* SIDEBARS */

.sidebar-links {
  margin: 20px 0px;
}

  .sidebar-links,
  .sidebar-links ul {
    padding: 0px;
  }

    .sidebar-links li,
    .sidebar-links li > a {
      display: block;
    }

    .sidebar-links li {
      list-style-type: none;
      transition: background-color ease 0.5s;
    }

      .sidebar-links li > a {
        font-size: 80%;
        font-weight: 400;
        padding: 6px 30px;
        text-decoration: none;
      }

      .sidebar-links li.active > a {
        font-weight: 600;
      }

      .sidebar-links li li > a {
        padding-left: 50px;
      }

      .sidebar-links li li li > a {
        padding-left: 70px;
      }

      .sidebar-links li li li li > a {
        padding-left: 90px;
      }

      .sidebar-links li li li li li > a {
        padding-left: 110px;
      }

      .sidebar-links li > a > img,
      .sidebar-links li > a > span {
        vertical-align: middle;
      }

      .sidebar-links li > a > img {
          height:24px;
        padding-right: 8px;
      }

    .sidebar-links li > .add {
        float: right;
        padding-left: 10px;
        padding-right: 10px;
        font-family: "Segoe UI Symbol", "Segoe UI", sans-serif;
    }

    .sidebar-links li > .add:hover {
        background-color: #00b050;
    }

.sidebar-links .mdi {
    font-size: 150%;
    margin-right: 0.4em;
}

/* FOOTER */

footer {
    font-size: 95%;
    line-height: 1.5em;
}

footer .title,
footer .copy {
    font-weight: 600;
    font-size: 95%;
    text-transform: uppercase;
}

footer a {
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
}

@media screen and (max-width: 999px) {
    footer > div {
        padding: 8px;
        text-align: center;
    }

    footer > div:first-child {
        padding-bottom: 20px;
    }
}

@media screen and (min-width: 1000px) {
    footer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    footer > div:first-child {
        text-align: center !important;
        padding-right: 24px;
        border-right: 1px solid #888;
    }

    footer > div:last-child {
        text-align: left !important;
        padding-left: 20px;
    }
}

/* FORMS & BUTTONS */

@media screen and (max-width: 999px) {
  input[type=text],
  input[type=password],
  input[type=date],
  input[type=time],
  input[type=datetime-local],
  textarea {
    width: 100%;
  }
}

@media screen and (min-width: 1000px) {
  .form {
    display: table;
  }

    .form > div {
      display: table-row;
    }

      .form > div > * {
        display: table-cell;
        white-space: nowrap;
      }

  input[type=text],
  input[type=password] {
    width: 20em;
  }

  input[type=date],
  input[type=time] {
    width: 8em;
  }

  input[type=text].extrashort,
  input[type=number].extrashort {
    width: 3em;
  }

  input[type=text].short,
  input[type=number].short {
    width: 10em;
  }

  input[type=text].medium,
  input[type=number].medium {
    width: 15em;
  }

  input[type=text].long,
  input[type=number].long {
    width: 40em;
  }

  .form input[type=text],
  .form input[type=number],
  .form input[type=password],
  select {
    margin-right: 20px;
  }

  input[type=date],
  input[type=time],
  input[type=datetime-local] {
    margin-right: 10px;
  }

  textarea {
    width: 600px;
  }
}

.field,
.form label {
  font-size: 80%;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.8;
}

input[type=text],
input[type=password],
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=number],
textarea,
select {
  padding: 4px;
  border-width: 1px;
  border-style: solid;
}

textarea {
  height: 200px;
}

button,
.button,
.button-default,
.green,
.red,
.blue,
.orange,
.purple,
.black,
.gray,
.symbolbutton,
.greenhover,
.redhover,
.bluehover,
.orangehover,
.purplehover,
.blackhover,
.grayhover {
    align-items: center;
    cursor: default;
    border-width: 1px;
    border-style: solid;
    display: inline-flex;
    font-size: 90%;
    font-weight: 600;
    padding: 0.4em 1.2em;
    text-decoration: none;
    white-space: nowrap;
}

.green,
.red,
.blue,
.orange,
.purple,
.black,
.green:hover,
.red:hover,
.blue:hover,
.orange:hover,
.purple:hover,
.black:hover,
.greenhover:hover,
.redhover:hover,
.bluehover:hover,
.orangehover:hover,
.purplehover:hover,
.blackhover:hover {
    color: #fff !important;
}

.greenhover,
.redhover,
.bluehover,
.orangehover,
.purplehover,
.blackhover {
    background-color: #444;
    border-color: #aaa;
    color: #ddd !important;
}

.green {
  background-color: rgb(19, 154, 81);
  border-color: rgb(0, 120, 54);
}

  .green:hover,
  .greenhover:hover {
    background-color: rgb(0, 176, 80);
    border-color: rgb(19, 154, 81);
  }

.red {
  background-color: rgb(176, 21, 19);
  border-color: rgb(135, 18, 15);
}

  .red:hover,
  .redhover:hover {
    background-color: rgb(196, 5, 0);
    border-color: rgb(176, 21, 19);
  }

.blue {
  background-color: rgb(84, 132, 154);
  border-color: rgb(53, 83, 97);
}

  .blue:hover,
  .bluehover:hover {
    background-color: rgb(49, 146, 189);
    border-color: rgb(84, 132, 154);
  }

.orange {
  background-color: rgb(234, 99, 18);
  border-color: rgb(186, 80, 14);
}

  .orange:hover,
  .orangehover:hover {
    background-color: rgb(255, 113, 25);
    border-color: rgb(234, 99, 18);
  }

.purple {
  background-color: rgb(158, 94, 155);
  border-color: rgb(94, 56, 92);
}

  .purple:hover,
  .purplehover:hover {
    background-color: rgb(177, 123, 174);
    border-color: rgb(158, 94, 155);
  }

.black {
  background-color: #222;
  border-color: #666;
}

  .black:hover,
  .blackhover:hover {
    background-color: #444;
    border-color: #aaa;
  }

.gray {
  background-color: #ccc;
  color: #222 !important;
  border-color: #666;
}

  .gray:hover,
  .grayhover:hover {
    background-color: #eee;
    color: #000 !important;
    border-color: #444;
  }

.calendar > input {
  vertical-align: middle;
}

option.itemheader {
  color: #ffffff;
  text-transform: uppercase;
}

button > .mdi,
.button > .mdi,
.symbolbutton > .mdi {
    font-size: 150%;
    margin-right: 0.4em;
}

.greenhover > .mdi {
    color: rgb(0, 176, 80);
}

.redhover > .mdi {
    color: rgb(196, 5, 0);
}

.bluehover > .mdi {
    color: rgb(49, 146, 189);
}

.orangehover > .mdi {
    color: rgb(255, 113, 25);
}

.purplehover > .mdi {
    color: rgb(177, 123, 174);
}

.blackhover > .mdi {
    color: #444;
}

.grayhover > .mdi {
    color: #eee;
}

.symbolbutton:hover > .mdi {
    color: #fff !important;
}

button[disabled=disabled],
.button[disabled=disabled] {
    background-color: #444 !important;
    border-color: #aaa !important;
}

button[disabled=disabled],
.button[disabled=disabled],
.symbolbutton[disabled=disabled]:hover > .mdi {
    color: #888 !important;
}

/* TABLES */

.borders,
.bordersleft {
    font-size: 90%;
    border-spacing: 0px;
    border-collapse: collapse;
}

  .borders td,
  .bordersleft td {
    vertical-align: top;
    padding: 5px 10px;
  }

  .borders > thead > tr,
  .borders .header,
  .bordersleft tr td:first-child {
    font-size: 90%;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
  }

.table-pagination,
.table-pagination-search {
    display: grid;
    margin-bottom: 1em;
}

.table-pagination {
    grid-template-columns: auto auto;
}

.table-pagination-search {
    grid-template-columns: auto auto auto;
}

.table-pagination-search > div:nth-child(2) {
    justify-self: center;
}

.table-pagination > div:last-child,
.table-pagination-search > div:last-child {
    justify-self: right;
}

/* MESSAGE BOXES */

.messagebox,
.messagebox,
.messagebox,
.messagebox {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border-left-width: 4px;
    border-left-style: solid;
    width: calc(100% - 44px);
    margin: 20px;
}

.messagebox > .icon {
    width: 24px;
    height: 24px;
    margin: 8px;
}

.messagebox > .content {
    vertical-align: middle;
}

.messagebox-ok {
  border-left-color: #00966f;
}

.messagebox-info {
  border-left-color: #0080dc;
}

.messagebox-warning {
  border-left-color: #ffdc60;
}

.messagebox-error {
  border-left-color: #ff5000;
}

.env-tag {
    padding: 0.3em 1em;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 1em;
}

.env-tag-local {
    background-color: #ff2828;
    color: #fff;
}

.env-tag-dev {
    background-color: #ffa528;
    color: #000;
}

.env-tag-staging {
    background-color: #00cc44;
    color: #fff;
}

.env-tag-psi {
    background-color: #0088cc;
    color: #fff;
}

.env-tag-prod {
    background-color: #8c66ff;
    color: #fff;
}