@media screen and (max-width: 900px) {
  .list_win {
    display: flex;
    justify-content: end;
    gap: 1rem;
  }
  .lotteryListTable tr td {
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-normal);
  }
  .lottery_header .wrapper {
    display: grid;
    grid-template-areas:
      "title time"
      "result result";
  }
  .lottery_title {
    text-align: center;
    grid-area: title;
    margin-bottom: 5px;
  }
  #name {
    font-size: var(--font-large);
  }
  .lottery_time p {
    font-size: var(--font-normal);
    text-align: center;
  }
  .period p {
    font-size: var(--font-large);
  }
  .lottery_result {
    grid-area: result;
  }
  .lottery_time {
    grid-area: time;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .numberquery div {
    text-align: center;
  }
  #lottery_results,
  #lottery_options {
    justify-content: center;
  }
  /* rules table start */

  .tbl-first tbody tr,
  .secondtb tbody tr {
    display: flex;
    flex-wrap: wrap;
  }
  .tbl-first tbody tr td,
  .secondtb tbody tr td {
    line-height: 45px;
    padding: 0 0.5rem;
  }
  .tbl-first tbody tr td {
    width: 100%;
  }

  .secondtb tbody tr td {
    width: 100%;
  }

  #cltxul {
    justify-content: space-evenly;
  }

  .rules_wrapper {
    padding: 5px 10px;
    width: 100%;
  }
  #rules {
    gap: 1rem;
  }
  #rules li {
    margin-right: unset;
    line-height: 23px;
  }
  .headlist_title {
    white-space: nowrap;
  }
  /* rules table end */
}
@media screen and (max-width: 500px) {
  #lottery_results,
  .lottery_winings {
    flex-wrap: wrap;
    justify-content: end;
  }
  #lottery_options {
    flex-wrap: wrap;
  }
  .lotteryListTable tr td {
    height: 86px;
  }
}