@media only screen and (max-width: 767px) {
  #container {
    min-height: 100vh !important;
  }

  .ranking-item {
    padding: 10px;
    background-color: #fff;
  }

  .ranking-item:nth-child(odd) {
    background-color: #f8f8f8;
  }

  .ranking-item__content,
  .ranking-item__content__info_ranking {
    display: flex;
    justify-content: left;
  }

  .ranking-item__header {
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center;
  }

  #content_header {
    padding: 20px;
    float: left;
  }

  .ranking-item__content__img .sp-app-icon-40 {
    width: 60px;
    height: 60px;
    border-radius: 9px;
  }

  .ranking-item__content__info__ranking {
    padding-left: 10px;
    /* flex: 1; */
    width: calc(100% - 60px);
  }

  .ranking-item__content__info .name a {
    color: #232323;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 21px;
    white-space: nowrap;
    width: 100%;
  }
  .trending-ranking-content .ranking_lower .item-ranking .info .img {
    border: 1px solid #E1E1E1;
    margin-right: 10px;
    border-radius: 6px;
    overflow: hidden;
    width: 40px;
    height: 40px;
  }
  .trending-ranking-content .ranking_lower .item-ranking .info .img img {
    max-width: 40px;
    width: 40px;
    height: 40px;
  }

  .ranking-item__content {
    margin-top: 10px;
  }

  .ranking-item__content__info_ranking {
    margin-top: 10px;
  }

  .ranking-item__content__info .name {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
  }

  .ranking-item__content__info .publisher {
    font-size: 12px;
    font-weight: 500;
    line-height: 14.4px;
    color: #A6A6A6;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 14.4px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: pre-wrap;
    width: 100%;
  }

  .ranking-item__content__info_ranking {
    font-size: 11px;
    font-weight: 500;
    line-height: 13.2px;
    align-items: center;
    display: flex;
    gap: 5px;
  }

  .ranking-item__content__info_ranking .ranking-item__content__info_ranking_title {
    font-size: 11px;
    line-height: 13.2px;
    font-weight: 500;
    color: #787878;
    margin-right: 0;
  }

  .ranking-item__content__info_ranking .gross,
    .ranking-item__content__info_ranking .free {
      margin-left: 0;
  }

  .ranking-item__content__info_ranking .gross .name,
    .ranking-item__content__info_ranking .free .name {
      font-size: 12px;
      line-height: 21px;
      font-weight: 500;
      color: #787878;
      margin-right: 0;
  }

  .ranking-item__content__info_ranking .gross .unit,
    .ranking-item__content__info_ranking .free .unit {
      font-size: 14px;
      line-height: 14px;
      font-weight: 500;
      color: #232323;

  }

  .ranking-item__header {
    font-size: 11px;
    font-weight: 500;
    line-height: 13.2px;
  }

  .form-new-rank-in .item:last-child {
    margin-right: 0% !important;
  }

  .form-new-rank-in #item-date-to {
    margin-left: 2%;
  }

  .new_rank_in .header-new-rank-in .form-new-rank-in .item:nth-child(4) .item_label,
  .new_rank_in .header-new-rank-in .form-new-rank-in .item:nth-child(3) .item_label {
    max-width: 100%;
    margin-right: 0;
  }

  .new_rank_in .header-new-rank-in .form-new-rank-in .item .item_info {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .form-new-rank-in #item-date-from #date_from,
  .form-new-rank-in #item-date-to #date_to {
    text-align: left;
    padding-top: 25px;
    background-position: 25px center;
    padding-left: 40%;
  }

  .form-new-rank-in #item-date-from .item_label {
    left: 40% !important;
  }

  .form-new-rank-in #item-date-to .item_label {
    left: 40% !important;
  }

  .form-new-rank-in .item .item_label  {
    position: absolute;
    font-size: 11px;
    font-weight: 400;
    top: -10px;
    left: 35%;
    color: #A6A6A6 !important;
  }

  .form-new-rank-in .item .sp-input {
    height: 40px;
  }

  .header-new-rank-in.show-sp,
  .sp-content-header  {
    padding: 0 0 10px;
  }

  .new_rank_in {
    padding: 0;
  }

  .trending-ranking-header.ranking-option {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }

  .trending-ranking-header .item {
    width: 100%;
    float: left;
    padding-bottom: 15px;
  }

  .tab-data-grossing-free-ranking {
    display: flex !important;
    justify-content: space-around;
  }

  .tab-data-grossing-free-ranking .title_ranking_app {
    flex: 49%;
  }

  .tab-data-grossing-free-ranking .title_ranking_app:first-child {
    margin-right: 0;
  }

  .tab-data-grossing-free-ranking .title_ranking_app:last-child {
    margin-left: 0;
  }

  .tab-data-grossing-free-ranking .title_ranking_app {
    height: 40px;
    line-height: 40px;
  }

  .tab-data-grossing-free-ranking .title_ranking_app h2 {
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-weight: 500;
    width: 100%;
    background-color: #D8D8D8;
    cursor: pointer;
    border-bottom: 2px solid #232323;
  }

  .tab-data-grossing-free-ranking .title_ranking_app h2.tab-active {
    background-color: #232323;
  }

  .tbl-header-list.tbl-grid-content.mt-24 {
    grid-template-columns: 1fr;
  }

  .tab-data-grossing-free-ranking.show-sp {
    margin-top: 5px;
    display: flex !important;
    background-color: #232323;
  }

  .data-free-ranking {
    display: none;
  }

  .retweet-buttons .sp-btn:first-child {
    margin-right: 10px;
  }

  .clear-both {
    float: clear !important;
    clear: both !important;
  }

  #duration_time {
    margin-left: 0 !important;
  }

  .trending-ranking-content .ranking_lower .item-ranking .triangle {
    width: 40px;
    padding-left: 15px;
    padding-right: 10px;
  }

  .trending-ranking-content .ranking_lower .item-ranking .rank {
    margin-right: 0;
    text-align: center;
    color: #000;
    font-size: 13px;
    line-height: 13px;
    font-weight: 500;
    width: 22px;
  }

  .trending-ranking-content .ranking_lower .item-ranking .info .title-name-app .title-app {
    color: #232323;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
  }

  .trending-ranking-content .ranking_lower .item-ranking .info .title-name-app p a {
    color: #A6A6A6;
    font-size: 11px;
    line-height: 13.2px;
    font-weight: 500;
    width: 100%;
  }

  .trending-ranking-content .ranking_lower .item-ranking .info .title-name-app {
    flex: 1;
    width: inherit;
    padding-right: 10px;
  }

  .trending-ranking-content .ranking_lower .item-ranking .info {
    width: inherit;
    flex: calc(100% - 145px);
  }

  .trending-ranking-content .ranking_lower .item-ranking .info .title-name-app .title-app {
    width: 100%;
    -webkit-line-clamp: 1;
  }
  .trending-ranking-content .ranking_lower .item-ranking .info .title-name-app .title-app.show-sp {
    display: -webkit-box !important;
  }

  .loading-data-table, .cutom-loading-data {
    top: 75px;
  }

  .ranking-item__header__arrow {
    color: #E8E8E8;
  }

  #table-pagination {
    padding-bottom: 20px;
  }

  .form-new-rank-in.responsive-form-new-rank-in {
    display: block !important;
    margin-bottom: 15px;
    float: left;
    width: 100%;
    height: inherit !important;
  }

  .responsive-select-country-new-rankin {
    float: left;
    width: 100%;
    display: block;
    margin-right: 0 !important;
    margin-bottom: 15px;
  }

  .new_rank_in .header-new-rank-in .form-new-rank-in .item {
    display: block;
    float: left;
    width: 49%;
  }

  .new_rank_in .header-new-rank-in .form-new-rank-in .item:last-child {
    margin-right: 0;
  }

  .new_rank_in .content-new-rank-in {
    margin-top: 10px;
    float: left;
    width: 100%;
    display: block;
  }

  .trending-ranking-header .item:nth-child(2) .item_label {
    width: auto;
    font-size: 16px;
    /* padding-top: 10px; */
  }

  .trending-ranking-header .item:nth-child(2) .sp-radio-buttons label {
    font-size: 16px;
    padding-left: 25px;
  }
  .trending-ranking-header .item:nth-child(2) input[type="radio"] + *::before {
    width: 14px;
    height: 14px;
  }
  .trending-ranking-header .item:nth-child(2) input[type="radio"]:checked + *::before {
    background: radial-gradient(#232323 0%, #232323 30%, transparent 85%, transparent);
  }

  .sp-radio-buttons label {
    font-size: 70%;
  }
  .trending-ranking-content .ranking_lower .item-ranking {
    display: flex;
    align-items: center;
    height: auto;
    padding: 10px;
    gap: 10px;
  }
  .trending-ranking-content .ranking_lower .item-ranking .triangle {
    width: 10px;
    padding: 0;
  }
  .trending-ranking-content .ranking_lower .item-ranking .triangle .triangle-up, .trending-ranking-content .ranking_lower .item-ranking .triangle .triangle-down, .trending-ranking-content .ranking_lower .item-ranking .triangle .triangle-right {
    width: 10px !important;
    height: 10px !important;
    background-size: 10px !important;
  }
  .ranking-item__header__date,
  .ranking-item__header__published {
    font-size: 11px;
    line-height: 120%;
    color: #787878;
    letter-spacing: 0.04em;
  }
}

@media only screen and (max-width: 400px) {
  .trending-ranking-header .item:nth-child(2) .sp-radio-buttons label {
      font-size: 14px;
  }
  .trending-ranking-header .item:nth-child(2) .item_label {
    font-size: 14px;
  }
}