@import "@tp-link/node-base-client/styles/global.css";
@import "@tp-link/node-base-astro/styles/global.css";
@import "@tp-link/website-base-common/styles/global.css";
@import "@tp-link/website-base-tp-link/styles/global.css";
@import "@tp-link/tp-link-com-sharing-is-caring/styles/global.css";

.robust-wifi-swiper {
    overflow:hidden;
    width: 100%;
}

.robust-wifi-swiper .swiper-wrapper {
    max-width: 100vw;
}

.robust-wifi-swiper .swiper-slide {
  width: min(65vw, 1248px);
  height: auto;
  opacity: 0;
  aspect-ratio: 16/9;
}

.robust-wifi-swiper .swiper-slide-active {
  opacity: 1;
}

.robust-wifi-swiper .swiper-slide img {
  width: 100%;
  object-fit: contain;
}

.robust-wifi-swiper .swiper-pagination {
  position: relative;
}

.robust-wifi-swiper .swiper-pagination-bullet {
  background-color: transparent;
  opacity: 1;
  border: 1px solid #000;
  width: 1vw;
  height: 1vw;
}

.robust-wifi-swiper .swiper-pagination-bullet-active {
  background-color: #000;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 2px #fff;
}

.robust-wifi-swiper .swiper-pagination {
  --swiper-pagination-bottom: -5px;
}

@media (max-width: 767px) {
  .robust-wifi-swiper .swiper-slide {
    width: 100%;
    opacity: 1;
  }

  .robust-wifi-swiper .swiper-pagination-bullet {
    background: transparent;
    border: 1.5px solid #fff;
  }

  .robust-wifi-swiper .swiper-pagination-bullet-active {
    background: #fff;
    border: 1.5px solid #fff;
  }
}

/* ---------------------------------------------------------------- */

.device-swiper .swiper-pagination-bullet {
  background-color: transparent;
  opacity: 1;
  border: 1px solid #fff;
  width: 15px;
  height: 15px;
}

.device-swiper .swiper-pagination-bullet-active {
  background-color: #fff;
  border: none;
  outline: 1px solid #fff;
  outline-offset: 1px;
}

@media (max-width: 767px) {
  .device-swiper {
    /* overflow: hidden; */
    max-width: 100vw;
  }

  .device-swiper .swiper-slide {
    width: 100% !important;
  }
}
/* ---------------------------------------------------------------- */

.vpn-swiper .swiper-pagination {
  position: relative;
  padding-top: 4vw;
}

.vpn-swiper .swiper-pagination-bullet {
  background-color: transparent;
  opacity: 1;
  border: 1px solid #000;
  width: 1vw;
  height: 1vw;
}

.vpn-swiper .swiper-pagination-bullet-active {
  background-color: #000;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 2px #fff;
}

.vpn-swiper {
  overflow: hidden;
  width: 100%;
}

.vpn-swiper .swiper-slide {
  width: 100% !important;
  overflow: hidden;
}

/* ---------------------------------------------------------------- */

.comparison-table div::-webkit-scrollbar {
  display: none;
}

.comparison-table div {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media (max-width: 767px) {
  .comparison-table .table-scroll-container::-webkit-scrollbar {
    display: block;
    height: 2vw;
  }

  .comparison-table .table-scroll-container::-webkit-scrollbar-track {
    background: #cccccc;
    border-radius: 1vw;
    margin: 0 3vw;
  }

  .comparison-table .table-scroll-container::-webkit-scrollbar-thumb {
    background: #383838;
    border-radius: 1vw;
  }

  .comparison-table .table-scroll-container {
    -ms-overflow-style: auto;
    scrollbar-width: auto;
    padding-bottom: 5vw;
  }
  .comparison-table .table-scroll-container {
    transform: rotateX(180deg);
  }

  .comparison-table .table-scroll-container table {
    transform: rotateX(180deg);
  }
}