div.headbar-nav {
  display: grid;
  grid-template-columns: 10vw 1fr 10vw;
  grid-template-rows: 1fr;
  grid-template-areas: "logo tools clock";
  grid-column-gap: 5px;
  height: 100%;
}

.headbar-nav div.logo {
  grid-area: logo;
  background-image: url(../images/logo-espertia.png);
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
  border: 1px solid #aaaaaa;
}

.headbar-nav div.tools {
  grid-area: tools;
  border: 1px solid #aaaaaa;
}

.headbar-nav div.system-datetime {
  grid-area: clock;
  flex: initial;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.headbar-nav div.system-datetime div {
  display: flex;
  border: 1px solid #aaaaaa;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45%;
}