.mgnl-shell {
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
  height: 100vh;
  font-family: var(--mgnl-font-family-default);
  background-color: #f2f3f1;
  font-size: 14px;
}
.mgnl-shell--brand {
  width: 120px !important; /* todo fix the imporant and remove it */
}
.mgnl-shell--brand img {
  margin-bottom: -5px;
}
.mgnl-shell--brand:hover {
  background: inherit;
}
.mgnl-shell__bar {
  display: flex;
  height: 70px;
  background-color: #fff;
  border-bottom: 2px solid #dbdbdb;
  border-top: 2px solid #dbdbdb;
  box-shadow: 0 5px 20px -10px #a3a3a3;
  position: relative;
  margin-bottom: 5px;
}
.mgnl-shell__bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  padding: 5px;
  overflow: hidden;
  border-right: 1px solid #dbdbdb;
  cursor: pointer;
}
.mgnl-shell__bar__item:hover {
  background-color: #656565;
  color: #fff;
}
.mgnl-shell__sidebar {
  /* border: 1px solid #dbdbdb; */
}
.mgnl-shell__footer {
  /* border: 1px solid #dbdbdb; */
}

.subapp {
  /* border: 10px solid orange; */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.subapp__view {
  flex: 1;
  /* border: 3px solid lime; */
  display: flex;
  flex-flow: wrap;
  flex-direction: row;
  justify-content: flex-end;
  background-color: white;
}
.subapp__content {
  flex: 1;
  display: flex;
  /* border: 3px solid blue;
  background-color: yellow;       */
}
.subapp__actionbar {
  background-color: #232323;
  width: 265px;
}
.subapp__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border: 3px solid purple;  */
}
.subapp__footer {
  /* border: 1px solid yellow;         */
  background-color: magenta;
  height: 80px;
}