@import "../../../tools/functions.scss";

.root {
  margin-bottom: 64px !important;
  margin-top: 1rem !important;
}

.inputInput {
  width: 100%;
}

.favorite {
  margin-top: 8px;
}

.tabs {
  background-color: unset !important;
  background: linear-gradient(#036fc8, #005da9);

  :global .dark :local & {
    background: linear-gradient(#7dbcef, #073f6d);
    color: #fff !important;
  }
}

.number {
  font-weight: bold !important;
  font-size: 1.15rem !important;
}

.main_title {
  margin-bottom: 1.2rem !important;
  font-weight: bold !important;
}

.second_title {
  margin-bottom: .7rem !important;
}

.delete_btn {
  margin-top: 1rem !important;
}

.dl_btn {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.t_wrapper {
  max-height: 344px;
  overflow: auto;
}

.th {
  z-index: unset !important;
}

.sn_root {
  width: 100%;
  margin-top: .5rem;
  overflow-x: auto;
}

.table {
  min-width: 300px;
}

.table_large {
  min-width: 450px;
}

.light_btn {
  margin-top: .7rem;
  margin-bottom: .5rem;
}


/* FAVORITES */

.card_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  align-items: center;
  // Pour le speeddial
  padding-bottom: 12px;

  // TODO CHECK IF OK
  max-width: 1200px;
  margin: auto;
  // ENDOF TODO

  @include mobile_large {
    display: block;
  }
}

.list_container {
  display: block;
  align-items: center;
  // Pour le speeddial
  padding-bottom: 12px;

  max-width: 1200px;
  margin: auto;

  @include mobile_large {
    display: block;
  }
}

.loader {
  flex: 0 100%;
  width: 100%;
  grid-column: 1 / 3;
}

.loader_real {
  width: 56px;
  height: 56px;
  margin-top: 1.2rem;
  margin-bottom: 2rem;
}

.no_tweets {
  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;
}

.toggleContainer {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: center;
  gap: 10px 25px;

  @include threshold_bar {
    grid-template-columns: auto;
  }
}

.inlineToggleButton {
  background-color: unset !important;
  justify-content: center;
}
