.clickable {
  cursor:pointer;
}

.center-text {
  display: flex;
  align-items: center;
  height: 100%;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.margin-left {
  margin-left: 0.5em;
}

.transitioned-component {
  -webkit-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

.notes-component:empty {
  padding: 0;
  max-height: 0;
  border: 0px;
  -webkit-transition: max-height 50ms linear;
  -ms-transition: max-height 50ms linear;
  transition: max-height 50ms linear;

  -webkit-transition: padding 50ms linear;
  -ms-transition: padding 50ms linear;
  transition: padding 50ms linear;
}

.notes-component {
  max-height: 11.5em;
  height: 11.5em;
  -webkit-transition: max-height 300ms linear;
  -ms-transition: max-height 300ms linear;
  transition: max-height 300ms linear;
  overflow-y: hidden;
}
.notes-component textarea {
  height: 11em;
  resize: none;
  margin-top: 0.5em;
}

.notes-component > * {
  height: 100%;
  overflow: scroll;
}

.updated {
  background-color: yellow;
}

.u-letter-box-margins--xlarge {
  margin-top: 2em;
  margin-bottom: 2em;
}

.u-letter-box-margins--xlarge {
  margin-top: 2em;
  margin-bottom: 2em;
}

.u-letter-box-margins--small {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.u-window-box-margins--small {
  margin: 0.5em;
}

.hierarchy-root {
  background-color: #cad3d8;
}

.hierarchy-root .name-component {
  font-weight: bold;
}

.moment-selector {
  margin-top: 0.5em;
}

.moment-selector button {
  width: 11%;
  margin-right: 0.5em;
}

.component-main-container {
    width: 100%;
    /*height : 2.5em;*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    margin-bottom: 0.5em;
    }

.name-detail-container {
  width: 100%;
  display: flex;
  flex: auto;
  flex-direction: column;
  overflow-x: hidden;
}

.member-adder  .name-detail-container {
  flex-direction: row;
}

.avatar  {
  max-width: 2.5em;
  max-height: 2.5em;
}

.name-component {
    order: 1;
    flex: auto;
    flex-shrink: 0;
    align-self: auto;
    margin-right: 0.5em;
    white-space: nowrap;
    }

.detail-component {
    order: 0;
    flex: auto;
    flex-shrink: 0;
    align-self: auto;
    white-space: nowrap;
    }

.actions-component {
    order: 0;
    flex: initial;
    flex-shrink: 0;
    align-self: auto;
    justify-content: flex-end;
    }

.actions-component .c-button {
  width: 2.3em;
  margin-left: 0.5em;
}

.white-background {
  background-color: white;
}

.member-adder {
  margin-top: .5em;
  margin-bottom: .5em;
}

.detail-component {
  font-size: 0.7em;
  opacity: 0.4;
}

.c-breadcrumbs a {
  opacity: 0.4;
  margin-top: 3em;
  /*font-size: small;*/
  text-decoration: none;
  color: inherit;
}

.c-breadcrumbs a:hover {
  text-decoration: underline;
}

.pointer {
  cursor: pointer;
}

body {
   font-size: 1.0em;
   background-color: #f9fbfb;
}


@media
  (min-device-width: 300px) and
  (max-device-width: 1024px) {
  body {
    font-size: 2.0em;
  }
}