.sidebar {
  width: 56px;
  padding: 14px 7px;
  gap: 20px;
  align-items: center;
  background: #f7f8f8;
  z-index: 20;
  overflow: visible;
}
.sidebar nav {gap: 10px;}
.sidebar .rail-action {
  position: relative;
  display: flex;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #65706b;
}
.sidebar .rail-new {color: #285c47; background: #e7eeea;}
.sidebar .rail-action:hover, .sidebar .rail-action.active {color: #285c47; background: #e7eeea;}
.sidebar .rail-action::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 4px;
  background: #242a28;
  color: white;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  pointer-events: none;
  z-index: 40;
}
.sidebar .rail-action:hover::after, .sidebar .rail-action:focus-visible::after {display: block;}
.sidebar footer {margin-top: auto; padding: 0; width: 40px;}
.sidebar #libraryStatus {font-size: inherit;}
main {margin-left: 56px;}
body.sidebar-collapsed main {margin-left: 0;}
@media (min-width: 761px) {
  .query-bar #composer > [data-action="new"], .query-bar .conditions > [data-action="history"] {display: none;}
  .sidebar-collapsed .query-bar #composer > [data-action="new"], .sidebar-collapsed .query-bar .conditions > [data-action="history"] {display: inline-flex;}
}
@media (max-width: 760px) {
  main {margin-left: 0;}
  body.sidebar-mobile-open main {margin-left: 56px;}
  body.sidebar-mobile-open .sidebar {display: flex; width: 56px; top: 104px; bottom: 0; padding: 12px 7px; box-shadow: 4px 0 16px #00000012;}
  .sidebar .rail-action::after {max-width: 240px;}
}