:root {
    --main-background: rgb(46, 26, 90);
    --main-background-highlight: rgb(158, 81, 197);
    --input-border: rgba(166, 135, 232, .4);
    --input-border-active: rgba(166, 135, 232, .7);
    --input-color: rgb(116, 67, 161);
    --input-color-active: rgb(94, 52, 133);
    --input-background: rgba(255, 255, 255);
    --input-background-active: rgba(255, 255, 255);
    --input-icon-color: rgba(166, 135, 232, .6);
    --input-icon-color-active: rgba(166, 135, 232, 1);
    --button-main-background: rgba(166, 135, 232, .6);
    --button-main-background-active: rgba(166, 135, 232, .8);
    --button-main-color: rgba(255, 255, 255, .9);
    --text-on-background-color: rgba(255, 255, 255, 0.7);
    --text-on-background-color-2: rgba(255, 255, 255, 0.85);
    --nav-category-background: rgb(43, 58, 101);
    --nav-category-background-highlight: rgb(113, 43, 145);
    --nav-category-background-hover: rgb(120, 50, 153);
    --nav-sub-background: rgb(72, 39, 102);
    --nav-sub-background-highlight: rgb(94, 52, 133);
    --nav-sub-background-hover: rgb(116, 67, 161);
    --nav-header-background: rgb(72, 39, 102);
    --nav-header-background-highlight: rgb(94, 52, 133);
    --nav-header-background-hover: rgb(116, 67, 161);
    --nav-content-hover: rgb(177, 97, 218);
    --font-family: 'Roboto', sans-serif;
    --button-colored-background: rgb(158, 81, 197);
    --button-colored-background-hover: rgb(177, 97, 218);
    --table-caption-background: rgb(255, 255, 255);
    --table-head-background: rgb(236, 232, 255);
    --table-row-background: rgb(255, 255, 255);
    --table-row-background-alt: rgb(255, 255, 255);
    --table-row-background-hover: rgb(220, 211, 255);
    --link-color: rgb(72, 39, 102);
    --link-hover: rgb(158, 81, 197);
    --badge-size: .55rem;
    --badge-color: rgb(255, 255, 255);
    --badge-background: rgb(158, 81, 197);
    --box-border: rgb(218, 218, 218); }

  html, body {
    width: 100%;
    height: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
    font-family: var(--font-family);
    color: #000; }

  body {
    display: flex; flex-direction: column;}

header {
    background: #f8f8f8;
    border-bottom: 1px solid var(--box-border);
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-flow: row;
    flex: 0; }
  header > form {
      display: flex;
      flex: 1;
      padding: 0 5px 0 5px;
      max-width: 800px; }
  header .inputWrapper {
      flex: 1; }
  header input[type=text] {
      width: 100%;
      background: white;
      border: 1px solid var(--input-border);
      text-shadow: none;
      box-shadow: none;
      transition: border 500ms ease-out;
      outline: none;
      box-sizing: border-box;
      padding-left: 2rem; }

  #logo {
    flex: 1;
    text-align: right; }
    #logo select {
      background: none;
      color: rgba(255, 255, 255, 0.8);
      font-size: .8rem; }

  .ham-trigger {
    display: flex;
    color: #000;
    align-items: center;
    flex: 0;
    margin-right: 5px; }
    .ham-trigger i {
      font-size: 1.5rem; }

  nav .ham-trigger {
    color: var(--text-on-background-color-2);
    margin: 0 0 0 5px;
    display: none; }

  #t-nav-container {
    margin-left: auto; }

  #content {
    flex: 1;
    padding-left: 1rem;
    overflow-y: auto; }

  #t-nav {
    font-size: .8rem;
    color: #000;
    font-weight: bold; }
    #t-nav a {
      padding: 0 5px 0 5px;
      line-height: 25px; }
    #t-nav i {
      margin-right: 5px; }
    #t-nav li {
      display: inline; }
      #t-nav li:hover {
        color: var(--link-hover); }

  main {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f1f1f1;
    flex: 1;
    box-sizing: border-box; }

  #dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 5; }

  #u-box {
    display: flex;
    align-items: center;
    padding: 0 1rem 0 1rem;
    height: 60px;
    border-bottom: 1px solid var(--input-border);
    box-sizing: border-box; }
    #u-box img {
      width: 40px;
      height: 40px;
      border-radius: 50%; }
    #u-box a {
      display: inline-block; }

      #app-message-container {
        position: absolute;
        margin: 0 auto;
        right: 0;
        top: 0;
        padding: 85px 10px 0 0;
    }

    .log-msg {
      z-index: 11;
      position: relative;
      margin: 0 auto;
      right: 0;
      top: 0;
      margin-bottom: 10px;
  }

  @media only screen and (max-width: 500px) {
    nav .ham-trigger {
      display: flex; } }
  @media only screen and (max-width: 600px) {
header {
      flex-flow: column;
      height: auto;
      padding: 1rem; }
  header form {
        width: 100%; }

    #t-nav-container {
      order: -1;
      margin-bottom: .5rem; } }
  @media only screen and (max-width: 1000px) {
    #t-nav .link {
      display: none; } }