html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html {
  font-size: 112.5%;
  line-height: 1.5em; }

html {
  box-sizing: border-box;
  padding: 0; }

* {
  box-sizing: inherit; }

a {
  color: inherit;
  text-decoration: none; }

strong {
  font-weight: bold; }

img {
  display: block;
  max-width: 100%; }

body {
  font-family: "IBM Plex Sans", sans-serif;
  background: #f1f3f5;
  margin: 0; }

header {
  background: #212529;
  color: white; }
  header .content {
    width: 100%;
    max-width: 45em;
    margin: 0 auto;
    display: flex;
    align-items: center; }
  header h1.logo a {
    display: block;
    font-weight: 900;
    overflow: hidden;
    text-indent: -100%;
    background: url(logo-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 15em;
    height: 1.5em;
    margin: 0.75em; }
  header #menu {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end; }
    header #menu a {
      display: block;
      padding: 0.75em; }
      header #menu a.active {
        background-color: #0c8599; }
      header #menu a:hover {
        text-decoration: underline; }
      header #menu a i {
        margin-right: .5em; }

section {
  width: 45em;
  background: white;
  margin: 0 auto;
  padding: 1.5em;
  padding-top: 0; }
  section h1 {
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1em; }

.toolbar {
  display: flex;
  align-items: center;
  padding: 1.5em 0 3em; }
  .toolbar h1, .toolbar .meta {
    flex-grow: 1;
    margin-right: 1em; }
  .toolbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4.5em;
    height: 4.5em;
    text-align: center;
    background: white;
    margin-right: 0.75em;
    flex-shrink: 0; }
    .toolbar a:hover {
      background: #e3fafc; }
    .toolbar a.cta {
      background: #0b7285;
      color: white; }
      .toolbar a.cta:hover {
        background: #0c8599; }
    .toolbar a i {
      display: block;
      font-size: 1em;
      line-height: 1.5em; }
    .toolbar a .title {
      display: block;
      font-size: 0.66667em;
      line-height: 1.125em; }

.intro {
  margin-bottom: 3em; }

.details {
  margin-top: -1.5em;
  font-style: italic;
  margin-bottom: 3em; }

section.ui-message {
  box-shadow: inset 0 0 0 0.375em #82c91e;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  padding: 1.5em; }
  section.ui-message.error {
    box-shadow: inset 0 0 0 0.375em #fd7e14; }

/*
Inbox
*/
.inbox .message {
  display: grid;
  background: #f8f9fa;
  padding: 0.75em; }
  .inbox .message.unread {
    background: #e3fafc; }
  .inbox .message.read {
    color: #868e96; }
  .inbox .message:hover .text {
    text-decoration: underline; }
  .inbox .message + .message {
    box-shadow: inset 0px 1px #adb5bd; }
  .inbox .message .date {
    font-size: 13.5px; }
  .inbox .message .from {
    font-style: italic; }
  .inbox .message .text {
    font-weight: bold; }

/*
Message view
*/
section.message .meta .date {
  font-size: 0.66667em;
  line-height: 2.25em; }

section.message .message {
  background: #f1f3f5;
  padding: 0.75em;
  margin: 1.5em 0; }

section.message h2 {
  font-size: 1em;
  line-height: 3em;
  font-weight: bold; }

section.message .file {
  display: flex;
  align-items: center;
  padding: 0.75em 0; }
  section.message .file .preview {
    display: block;
    width: 4.5em;
    height: 4.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125), inset 0 0 16px rgba(0, 0, 0, 0.125); }
    section.message .file .preview i.fa {
      font-size: 1.25em;
      line-height: 1.2em;
      color: #212529; }
  section.message .file .name {
    margin-left: 1.5em; }
  section.message .file:hover .name {
    text-decoration: underline; }

/*
Compose
*/
form {
  display: flex;
  flex-direction: column; }
  form a {
    color: #22b8cf; }
    form a:hover {
      text-decoration: underline; }
  form label.label {
    display: inline-block;
    color: #868e96;
    min-width: 3em;
    margin-right: 1.5em; }
  form .to-group {
    display: flex;
    margin-bottom: 1.5em; }
    form .to-group select {
      font: inherit;
      font-weight: bold;
      background: none;
      border: none;
      overflow: hidden;
      text-overflow: ellipsis; }
    form .to-group .autocomplete {
      flex-grow: 1; }
  form .label-group {
    display: flex;
    align-items: center;
    margin-bottom: 1.5em; }
    form .label-group input {
      flex-grow: 1; }
  form .checkbox-group input {
    display: none; }
  form .checkbox-group label {
    cursor: pointer; }
    form .checkbox-group label:hover {
      color: #212529; }
  form .checkbox-group input + label i.yas {
    display: none; }
  form .checkbox-group input:checked + label i.yas {
    display: inline-block; }
  form .checkbox-group input + label i.nuh {
    display: inline-block;
    color: #adb5bd; }
  form .checkbox-group input:checked + label i.nuh {
    display: none; }
  form input, form textarea {
    border: none;
    font: inherit;
    background: #f8f9fa;
    padding: 0.375em 0.75em; }
  form textarea {
    height: 7.5em;
    padding: 0.75em;
    margin-bottom: 1.5em; }
  form .upload-group {
    margin-bottom: 1.5em; }
  form .button-container {
    display: flex;
    justify-content: flex-end; }
    form .button-container > * {
      margin-left: 1.5em; }
  form button, form a.button {
    padding: 0.75em;
    background: #22b8cf;
    color: white;
    border: none;
    font: inherit;
    display: flex;
    align-items: center;
    cursor: pointer; }
    form button:hover, form a.button:hover {
      background: #3bc9db; }
    form button i, form a.button i {
      margin-right: 0.75em; }
    form button.link, form a.button.link {
      background: none;
      color: inherit; }
  form .spacer {
    height: 3em; }

/*
User list
*/
section.users a.user {
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  padding: 0.75em; }
  section.users a.user .name {
    font-weight: bold; }
  section.users a.user .email {
    font-size: 0.66667em;
    line-height: 2.25em; }
  section.users a.user:hover .name {
    text-decoration: underline; }

/*
Legal pages
*/
section.legal h2 {
  font-size: 1.5em;
  line-height: 2em; }

section.legal h3 {
  margin-top: 1.5em;
  font-weight: bold; }

section.legal a {
  color: #22b8cf; }
  section.legal a:hover {
    text-decoration: underline; }

section.legal .intro {
  font-size: 0.66667em;
  line-height: 2.25em;
  margin: 0; }

section.legal .cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1.5em;
  margin: 1.5em 0; }
  section.legal .cards .card {
    display: flex;
    align-items: center; }
    section.legal .cards .card i {
      font-size: 2.25em;
      line-height: 1.33333em;
      margin-right: 0.66667em;
      color: #0b7285;
      width: 1.33333em;
      text-align: center; }
    section.legal .cards .card h3 {
      margin: 0; }

section.legal .box {
  margin: 1.5em 0;
  padding: 1.5em;
  background: #f1f3f5; }

/*
Autocomplete component
*/
.autocomplete, .autocomplete-list {
  display: none; }

.autocomplete-list {
  display: flex;
  flex-direction: column;
  position: absolute;
  box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.25); }

.autocomplete-list > * {
  padding: .5em;
  min-width: 20em;
  max-width: 30em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  background: #f1f3f5; }

.autocomplete-list > *:hover {
  background: #dee2e6; }

.autocomplete-list > *.highlighted {
  background: #66d9e8; }


/*# sourceMappingURL=app.css.map*/