#notifications > #query,
#notifications > #responses {
  font-size: 11px;
  margin: 10px 0;
  overflow: hidden auto;
  padding: 0 10px 0 52px; }
  #notifications > #query > li,
  #notifications > #responses > li {
    border-radius: 2px;
    display: block;
    line-height: 1.5em;
    padding: 3px 8px; }
    #notifications > #query > li h3,
    #notifications > #responses > li h3 {
      font-weight: 500; }
    #notifications > #query > li li,
    #notifications > #responses > li 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; }