:host {
  display: block;
}

div#container {
  display: flex;
  flex-wrap: wrap;
}
div#navbar {
  height: 74px;
  width: 100%;
  background-color: #f3f3f3;
  border-bottom: 1px solid #cdcdcd;
}
div#sidebar {
  width: 59px;
  height: calc(100vh - 74px);
  background-color: #f3f3f3;
  border-right: 1px solid #cdcdcd;
}
div#side-panel {
  width: 468px;
  height: calc(100vh - 74px);
  background: #f9f9f9;
  border-right: 1px solid #cdcdcd;
}
div#video-player {
  width: calc(100vw - 529px);
  height: calc(100vh - 74px);
}
div#video-player.fullscreen {
  width: calc(100vw - 60px);
  height: 100vh;
}

.sidebar-tab {
  height: 60px;
  width: 59px;
  fill: #1a5059;
  border: 0;
  border-bottom: 1px solid #cdcdcd;
  cursor: pointer;
  position: relative;
}
.sidebar-tab span {
  width: 20px;
  height: 20px;
  display: inherit;
  pointer-events: none;
}
.sidebar-tab::after {
  position: absolute;
  height: 2px;
  bottom: 0;
  width: 100%;
  background: #1a5059;
  content: "";
  left: 0;
  visibility: hidden;
}
.sidebar-tab:hover, .sidebar-tab.active {
  background: #e5ebec;
}
.sidebar-tab:hover::after, .sidebar-tab.active::after {
  visibility: visible;
}