$header-height: 52px;
$navbar-width: 250px;

.Layout {
  &__header {
    box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03),
      0 0.9375rem 1.40625rem rgba(4,9,20,0.03),
      0 0.25rem 0.53125rem rgba(4,9,20,0.05),
      0 0.125rem 0.1875rem rgba(4,9,20,0.03);
    z-index: 31;
  }

  &__container {
    margin-top: $header-height;
    margin-left: $navbar-width;
  }

  &__navbar {
    width: $navbar-width;
    display: flex;
    flex-direction: column;
    box-shadow: 7px 0 60px rgba(0,0,0,0.05);
    position: fixed;
    top: $header-height;
    left: 0;
    bottom: 0;
    padding: 20px 20px;
    overflow-y: scroll;
  }
}

.react-datepicker-wrapper {
  display: flex !important;
}

.react-datepicker-popper {
  z-index: 30 !important;
}

.topic-message-button {
  &::after {
    content: attr(data-title);
    position: absolute;
    top: -140%;
    z-index: 1;
    background: #F5F5F5;
    color: rgb(89, 89, 89);
    border-radius: 5px;
    font-size: 15px;
    padding: 5px 10px;
    opacity: 0;
    pointer-events: none;
    transition: .2s opacity;
    transition-delay: 0s;
  }

  &:hover::after {
    opacity: 1;
    transition-delay: .5s;
   }
}