$drawer_width:240px;

@mixin threshold_app_bar {
  @media screen and (max-width: 600px) {
    @content;
  }
}

.root {
  display: flex;
  width: 100%;

  min-height: calc(100vh - 64px - 56px);

  @include threshold_app_bar {
    min-height: calc(100vh - 56px - 56px);
  }
}

.drawer {
  width: $drawer_width;
  flex-shrink: 0;
}
.drawerPaper {
  width: $drawer_width;
  position: unset !important;
}

.content {
  flex-grow: 1;
  margin-bottom: 56px;
}

.inner_content {
  padding: 10px;
}

.conv_header_img {
  max-height: 25vh;
  width: 100%;
  object-fit: cover;
  box-shadow: 0px 3px 4px 0px #00000026;
}

.list_month {
  width: 100%;
  margin-bottom: .5rem !important;
}
.drawer_month {
  padding-left: 14px;
  box-sizing: border-box;
  font-size: .95rem;
}
.back_btn {
  transition: background-color .5s !important;

  &:hover {
    background-color: #e2e2ff !important;

    :global .dark :local & {
      background-color: #5c5c85 !important;
    }
  }
}
.get_back_paper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.05rem !important;
  font-weight: 200 !important;
  color: #0078D7;

  :global .dark :local & {
    color: #52a8ee;
  }
}
.get_back_icon {
  margin-bottom: 1px;
}
.selected_month {
  background-color: #006cc5 !important;

  :global .dark :local & {
    background-color: #4ba7f3 !important;
  }

  color: white !important;
}

.no_msg {
  color: lighten($color: #000000, $amount: 30);

  :global .dark :local & {
    color: lighten($color: #000000, $amount: 75);
  }

  margin-top: 2rem;
}
.icon {
  color: lighten($color: #000000, $amount: 70);
  font-size: 7rem !important; 
}

.month_header {
  font-style: italic;
  font-weight: 200;
  font-size: 1.9rem;

  margin: 1rem 0 1.5rem 1rem;
}
.month_msg_number {
  font-size: 1.1rem;
  font-weight: lighter;
}

.search_paper {
  justify-content: space-around !important;
}

.search_btn {
  transition: background-color .5s !important;
  border-bottom: 1px solid #e0e0e0 !important;

  &:hover {
    background-color: #e2e2ff !important;
  }

  :global .dark :local & {
    border-bottom: 1px solid #31313a !important;

    &:hover {
      background-color: #5c5c85 !important;
    }
  }
}

.year_count {
  color: lighten($color: #000000, $amount: 30);
  
  :global .dark :local & {
    color: lighten($color: #000000, $amount: 75);
  }

  margin-left: .2rem;
  font-size: .8rem;
}

.search_input {
  border-top: 1px solid #e0e0e0 !important;

  :global .dark :local & {
    border-top: 1px solid #31313a !important;
  }
}

.textField {
  margin-top: 0 !important;
  width: 100%;
}

.full_w {
  width: 100%;
}
