.header-meta {
  text-transform: uppercase;
  font-size: 14px;
  opacity: 0.6;
}

.task {
  position: relative;
  padding-left: 30px;
  padding-right: 0;
}

.task-points-badge {
  position: absolute;
  top: 0;
  left: -2px;
  color: #262729;
}

.task-actions {
  visibility: hidden;
}

.task:hover .task-actions {
  visibility: visible;
}

.task button {
  padding-left: 8px;
  padding-right: 8px;
}

.mobile-list-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: #fff;
}

.list-switch-button i {
  font-size: 30px;
}

@media (max-width: 768px) {
  .task-list {
    position: absolute;
    transform: translateX(-150%);
    transition: transform .3s ease;
  }

  .task-list.active {
    transform: translateX(0);
    transition: transform .3s ease;
  }

  .mobile-list-nav {
    display: flex;
  }
}