#notifications {
  position: relative; }
  #notifications > #query,
  #notifications > #responses {
    font-size: 11px;
    margin: 10px 0;
    overflow: hidden auto;
    padding: 0 10px 0 52px; }
    #notifications > #query > li:not(.hidden),
    #notifications > #responses > li:not(.hidden) {
      border-radius: 2px;
      display: block;
      line-height: 1.5em;
      padding: 3px 8px; }
      #notifications > #query > li:not(.hidden) h3,
      #notifications > #responses > li:not(.hidden) h3 {
        font-weight: 500; }
      #notifications > #query > li:not(.hidden) li,
      #notifications > #responses > li:not(.hidden) li {
        list-style: disc;
        margin-left: 1em; }
    #notifications > #query:empty:after,
    #notifications > #responses:empty:after {
      color: #7c7c7c;
      content: attr(data-empty);
      display: block;
      position: relative;
      top: calc(50% - 6px);
      text-align: center; }
  #notifications > #query {
    box-shadow: inset -1px 0 #d8d8d8; }
    #notifications > #query:empty {
      background: url("img/warning-32-inactive.svg") 10px top no-repeat; }
    #notifications > #query:not(:empty) {
      background: url("img/warning-32.svg") 10px top no-repeat; }
    #notifications > #query > li {
      background: #f9d4d4; }
  #notifications > #responses {
    box-shadow: inset 1px 0 #d8d8d8; }
    #notifications > #responses:empty {
      background: url("img/information-32-inactive.svg") 10px top no-repeat; }
    #notifications > #responses:not(:empty) {
      background: url("img/information-32.svg") 10px top no-repeat; }
    #notifications > #responses > li {
      background: #e8e8e8; }

#notifications {
  display: grid;
  grid-template-areas: "query responses user";
  grid-template-columns: .5fr .5fr 32px; }
  #notifications > h2 {
    display: none; }
  #notifications > #query {
    grid-area: query; }
  #notifications > #responses {
    grid-area: responses; }
  #notifications > .user {
    grid-area: user; }