html,
body {
  overflow: hidden;
}

.wobble-hor-bottom{-webkit-animation:wobble-hor-bottom 1.2s .4s both;animation:wobble-hor-bottom 1.2s .4s both}
@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}

.puff-in-center{-webkit-animation:puff-in-center .5s cubic-bezier(.175,.885,.32,1.275) both;animation:puff-in-center .6s cubic-bezier(.175,.885,.32,1.275) both}
@-webkit-keyframes puff-in-center{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes puff-in-center{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}
.slide-in-elliptic-top-fwd{-webkit-animation:slide-in-elliptic-top-fwd .7s cubic-bezier(.175,.885,.32,1.275) both;animation:slide-in-elliptic-top-fwd .4s cubic-bezier(.175,.885,.32,1.275) both}
@-webkit-keyframes slide-in-elliptic-top-fwd{0%{-webkit-transform:translateY(-600px) rotateX(-30deg) scale(0);transform:translateY(-600px) rotateX(-30deg) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% 1400px;transform-origin:50% 1400px;opacity:1}}@keyframes slide-in-elliptic-top-fwd{0%{-webkit-transform:translateY(-600px) rotateX(-30deg) scale(0);transform:translateY(-600px) rotateX(-30deg) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% 1400px;transform-origin:50% 1400px;opacity:1}}


.page {
  background-color: #101525;
}

.my-page {
  margin-top:100px;
}

.watch-title {
  padding: 6px 16px;
  font-size: 30px;
  font-weight: 700;
  filter: drop-shadow(5px 5px 7px #000);
}

@media (min-width: 768px) {
  .my-page {
    margin-top:120px;
  }
}

::-webkit-scrollbar {
  display: none;
}

.container {
  padding-right: 16px;
  padding-left: 16px;
  margin-right: auto;
  margin-left: auto;
}

.container-img {
  width:95%;
  display:block;
  margin:auto auto 20px auto;
  border-radius: 12px;
}

.groupheader {
  width:100%;
  display: flex;
  margin:50px 0 -10px 0;
}

.groupheader-l {
  margin:0 0 0 20px;
  font-size: 25px;
  font-weight: 700;
}

.groupheader-r {
  margin:auto 20px auto auto;
  font-size: 18px;
}

@media (min-width: 768px) {
  .groupheader {
    margin:80px 0 -20px 0;
  }

  .groupheader-l {
    margin:0 0 0 30px;
    font-size: 38px;
  }

  .groupheader-r {
    margin:auto 0 8px 30px;
    font-size: 20px;
  }
}

.select-device-img {
  margin:70px auto 20px auto;
  width:400px;
}

.select-device-header {
  margin:0px auto 90px auto;
  font-size: 28px;
  font-weight: 700;
  width:fit-content;
}

.select-device-img2 {
  margin:0px auto;
  width:300px;
}

.select-device {
  margin:0px auto 40px auto;
  font-size: 18px;
  font-weight: 500;
  width:fit-content;  
  opacity:0.6;
}

@media (min-width: 768px) {
  .container-item {
    width:100%;
    margin:auto;
  }
}

.tb-icon {
  width:40px;
  margin:0px 5px;
}

.tb-icon2 {
  width:32px;
  margin:8px 5px 0px 5px;
}

.item-icon {
   padding:8px;
}

.item-icon2 {
   padding-right:18px;
   margin-top:-2px;
}

.item-icon3 {
   padding-right:40px;
}

.item-icon4 {
   padding-right:40px;
   opacity: 0;
}

.right-gap {
  margin-right:16px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1270px;
  }
}

.container2 {
  padding-right: 16px;
  padding-left: 16px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container2 {
    width: 90%;
    max-width: 500px;
  }
}

.container-item {
  width:100%;
}

@media (min-width: 768px) {
  .container-item {
    width:350px;
    margin:auto;
  }
}

.div-search {
  position: absolute;
  background-color: #2a2934;
  border-radius: 8px;
  z-index: 100000;
  overflow-x: hidden;
  overflow-y: scroll;
}

@media (min-width: 1250px) {
  .div-search {
    border: 1px solid rgba(255,255,255,0.2);
    padding:0 8px;
  }
}

.sbutton-results-bg {
  padding:20px 8px 12px 8px;
  position: fixed;
  display:flex;
  z-index: 10;
  background-color: rgba(42,41,52,0.8);
}

.sbutton-reset {
  margin:auto 16px auto 0;
  display:none;
}

.sbutton-results {
  background-color: #d57e3d;
  color: #ffffff;
  border-radius:6px;
  font-size:15px;
  font-weight:700;
  height:40px;
  transition: 0.15s ease;
  flex-grow:1;
}

.sbutton-results.disabled {
  background-color: #606060;
  color: #aaa;
  opacity:1 !important;
  transition: 0.15s ease;
}

.sbutton {
  background-color: #000;
  color: #ffffff;
  border-radius:20px;
  font-size:15px;
  font-weight:500;
  margin:4px;
  padding:0 12px;
  outline: none;
  border: none;
  width:fit-content;
  height:34px;
  transition: 0.15s ease;
}

.sbutton.active {
  background-color: #d57e3d;
  transition: 0.15s ease;
}

.sbutton:hover {
  background-color: #614835;
}

.sbutton.active:hover {
  background-color: #de8540;
}

.scolor-none {
  width:39px;
  height:39px;
  margin:5px;
}

.scolor {
  width:35px;
  height:35px;
  margin:5px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  border: 2px solid rgba(160,160,160,0.3);
}

.scolor:hover {
  border: 2px solid rgba(200,200,200,0.5);
}

.scolor-select {
  position: absolute;
  left:-100px;
  top:-100px;
  width:51px;
  height:51px;
}

.search-header {
  color: #7d859e;
  font-size:16px;
  margin:32px 12px 12px 12px;
}

.search-colors {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  padding-bottom:300px;
}

@media (min-width: 1250px) {
  .search-colors {
    padding-bottom:12px;
  }
}

.my-button {
  font-size:17px;
  width:230px;
  margin:0 auto 0 auto;
}

.my-button-small1 {
  font-size:16px;
  width:fit-content;
  padding:0 40px;
}

.my-button-small2 {
  font-size:16px;
  width:fit-content;
  padding:0 50px;
}

.badge {
  padding: 14px;
  margin: 4px 1px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: rgba(147,129,188,0.7);
  border-radius: 40px;
}

a.badge:hover,
a.badge:focus {
  color: #fff;
  background-color: rgba(147,129,188,0.9);
}

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.scrolling-wrapper::-webkit-scrollbar {
  display: none;
}

div.hide-on-loading
{
  display: none
}

.item-info
{
  padding-left: calc(var(--f7-page-title-padding-left) + var(--f7-safe-area-left));
  padding-right: calc(var(--f7-page-title-padding-right) + var(--f7-safe-area-right));
}

.right-menu
{
  margin:16px 0px 0 auto;
}

@media (min-width: 768px) {
  .item-info
  {
    padding-left: calc(var(--f7-page-title-padding-left) + var(--f7-safe-area-left) + 30px);
    padding-right: calc(var(--f7-page-title-padding-right) + var(--f7-safe-area-right) - 10px);
  }
  .right-menu {
    margin:16px 0px 0 auto;
  }
}

.item2-title
{
  padding-top:20px;
  padding-bottom:14px;
  font-size:16px;
  font-weight: bold;
}

.item2-title2
{
  padding-top:50px;
  padding-bottom:14px;
  font-size:16px;
  font-weight: bold;
}

.item3-title
{
  font-size:20px;
  font-weight: bold;
  color:#9aa1b9;
  margin-bottom: 10px;
}

@media (min-width: 1000px) {
.item3-title
{
  font-size:28px;
}
}

.user-divs
{
  display:flex;
  flex-wrap: wrap;
  margin:auto;
  width:fit-content;
  gap:80px;
  row-gap: 10px;
  padding-bottom:50px;
}

.user-top1
{
  display:flex;
  margin:0;
}

.user-top2
{
  width:100%;
  margin:20px 16px 0px 16px;
}

.banner-wrapper
{
  padding: 0;
  position: relative;
}

.banner-wrapper .banner
{
  height: 300px;
}

@media screen and (min-width: 1200px)
{
  .banner-wrapper .banner
  {
    height: 400px; 
  }
}

@media (max-width: 700px)
{
  .banner-wrapper .banner
  {
    height: 150px;
  } 
}

.avatar-parent
{
  position:relative;
  width:120px;
  height:120px;
  margin:-65px 20px 0 20px;
}

.avatar-profile
{
  margin:-135px 0 0 16px
}

@media (min-width: 1000px) and (min-height: 700px) {
  .avatar-parent
  {
    width:180px;
    height:180px;
    margin:-100px 10vw 0 0px;
  }

  .avatar-profile
  {
    margin:-170px 0 0 25vw
  }
}

.avatar
{
  border-radius:50%;
  box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.25);
}

.avatar-following
{
  z-index:1;
  position:absolute;
  top:0;
  left:0;
  width:30px;
  height:30px;
  border-radius:50%;
  box-shadow: 0px 0px 0px 3px #444;
}

@media (min-width: 700px) {
  .avatar-following
  {
    width:50px;
    height:50px;
  }
}

.follow-box {
  margin:20px 10px 5px 10px;
}

.follow1 {
  font-weight: bold;
  font-size: 22px;
  text-align: center;
}

.follow2 {
  font-size: 10px;
  text-align: center;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .user-top2
  {
    width:fit-content;
    margin:20px auto 0px auto;
  }

  .follow1 {
    font-weight: bold;
    font-size: 30px;
    text-align: center;
  }

  .follow2 {
    font-size: 14px;
    text-align: center;
  }
}

.handles {
  width:24px;
  margin:12px 10px 0px 10px;
  color: #9dc9fa;
}

.collection-image {
  border-radius: 20px;
  display: block;
  box-shadow: 0px 0px 0px 3px #20273f;
  margin:0px auto 40px auto;
  width: 95%;
  aspect-ratio: 1080/440;
}

@media (min-width: 1000px) {
  .collection-image {
    margin:0px auto 0px auto;
  }
}

.banner-grid {
  display: grid;
  grid-template-columns: repeat(1,1fr);
  align-items: center;
  padding-bottom:0px;
}

@media (min-width: 1000px) {
  .banner-grid {
    grid-template-columns: repeat(2,1fr);
    padding: 0 50px;
  }
}

.collection-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow-x: hidden;
  padding-top:7px;
  padding-bottom:20px;
}

@media (min-width: 480px) {
  .collection-items {
    gap: 20px;
    padding-bottom:30px;
  }
}

@media (min-width: 600px) {
  .collection-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .collection-items {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .collection-items {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
  }
}

.extra-parent {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.extra-items {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-top:6px;
}

.extra-items::-webkit-scrollbar {
  display: none;
}

.game-card {
  color: inherit;
  user-select: none;
}

.game-card-rd {
  width: 94%;
  margin:0 auto;
  padding-bottom: 8px;
}

@media (min-width: 1000px) {
  .game-card-rd {
    width: 244px;
    margin:0;
    padding:12px;
  }
}

.game-card-sq {
  width: 100%;
}

@media (min-width: 1000px) {
  .game-card-sq {
    width: 220px;
  }
}

.game-card-image {
  width: 100%;
  background: #141828;
  position: relative;
}

@media (min-width: 1000px) {
  .game-card-image {
    margin-bottom: 14px;
  }
}

.game-card-rd .game-card-image {
  aspect-ratio: 1/1;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 4px #000;
}

@media (min-width: 1000px) {
  .game-card-rd .game-card-image {
  aspect-ratio: 1/1;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 6px #000;
}
}

.game-card-sq .game-card-image {
  border-radius: 22%;
}

.game-card-image img:not(.avatar-following) {
  object-fit: cover;
  object-position: center;
  display: block;
  width: 100%;
  height: 100%;
}

.game-card-rd .game-card-image .check-border {
  border-radius: 100%;
}

.game-card-sq .game-card-image .check-border {
  width:89%;
  height:89%;
  margin:auto;
  border-radius: 22%;
}

.game-card.active-state .game-card-image {
  transform: scale(0.95);
}

.game-card-name {
  text-align: center;
  font-size: 13px;
  color:rgba(255,255,255,1);
}

.game-card-rd .game-card-name {
  margin-top: 14px;
  margin-bottom: 18px;
}

.game-card-sq .game-card-name {
  margin-top: 10px;
  margin-bottom: 20px;
}

.game-card-name2 {
  text-align: center;
  font-size: 11px;
  color:rgba(255,255,255,0.5);
  margin-top: -14px;
  margin-bottom: 6px;
}

@media (min-width: 1000px) {
  .game-card-name2 {
    font-size: 12px;
    margin-top: -34px;
  }
}

.game-card-admin {
  text-align: center;
  font-size:14px;
  margin-top:0px;
}

@media (min-width: 1000px) {
  .game-card-name {
    font-weight: bold;
    font-size: 18px;
    color:rgba(255,255,255,0.8);
  }

  .game-card-rd .game-card-name {
    margin-top: 26px;
  }

  .game-card-sq .game-card-name {
    margin-top: 16px;
  }

  .game-card-admin {
    text-align: center;
    font-size:18px;
    margin-top:-30px;
  }

  .collection-items .game-card-name {
    margin-bottom: 40px;
  }

  .extra-items .game-card-name {
    margin-bottom: 35px;
  }
}

.extra-watches {
  margin:40px auto 0px auto;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .extra-watches {
    width: fit-content;
  }
}

.extra-card {
  width:140px;
  margin:0px 10px;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .extra-card {
    width:180px;
  }
}

.popup-content .extra-card {
  width:32%;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .popup-content .extra-card {
    width:120px;
  }

  .popup-up-wide 
  {
    margin-top:6px;
  }
}


.explore-packs {
  display: grid;
  text-align: center;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 30px;
  margin-top: 50px;
}

@media (min-width: 700px) {
  .explore-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 15px;
    margin-top: 60px;
  }
}

@media (min-width: 1000px) {
  .explore-packs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 25px;
    margin-top: 80px;
  }
}

@media (min-width: 1300px) {
  .explore-packs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 25px;
    row-gap: 40px;
    margin-top: 100px;
  }
}

.explore-pack {
  border-radius: 20px;
  display: block;
  box-shadow: 0px 0px 0px 3px #20273f;
  margin:auto;
  width:100%;
  aspect-ratio: 1080/440;
}

.explore-name {
  font-weight: bold;
  font-size: 16px;
  margin:16px auto 8px auto;
  color:#fff;
}

@media (min-width: 1000px) {
  .explore-name {
    font-size: 18px;
  }
}

.coll-add-packs {
  display: grid;
  text-align: center;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 30px;
  margin-top: 20px;
}

@media (min-width: 700px) {
  .coll-add-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 15px;
    margin-top: 30px;
  }
}

.user-packs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  text-align: center;
  column-gap: 10px;
  padding: 0px 0px 10px 10px;
}

.user-packs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 600px) {
  .user-packs {
    margin: 20px 0px 30px 0;
    padding: 0px 20px;
    column-gap: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .user-packs {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 25px;
  }
}

.user-pack {
  border-radius: 20px;
  display: block;
  box-shadow: 0px 0px 0px 3px #20273f;
  margin:4px;
  width:80vw;
  aspect-ratio: 1080/440;
}

.user-pack-name {
  font-weight: bold;
  font-size: 16px;
  margin:16px auto 16px auto;
  color:#fff;
}

.show-more
{
  display:none;
  margin: -46px 0 60px 0;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

@media (min-width: 600px) {
  .show-one-row {
    grid-template-rows: auto;
    grid-auto-rows:0px;
    overflow:hidden;
  }

  .user-pack {
    width:100%;
  }

  .user-pack-name {
    margin:16px auto 32px auto;
  }

  .show-more
  {
    display: block;
  }
}

.chart-items {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px;
}

@media (min-width: 800px) {
  .chart-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1300px) {
  .chart-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.chart-pos-name {
  display:flex;
  width:100vw;
}

.chart-pos {
  font-weight: bold;
  font-size: 50px;
  text-align: right;
  margin:0 20px 0 0;
}

.chart-name {
  font-weight: bold;
  font-size: 16px;
  margin:18px 6px 0 0;
}

@media (min-width: 800px) {
  .chart-pos-name {
    display:flex;
    width:25vw;
  }

  .chart-pos {
    font-size: 60px;
  }

  .chart-name {
    font-size: 18px;
    margin:18px 20px 0 0;
  }
}

@media (min-width: 900px) {
  .chart-pos-name {
    width:15vw;
  }
}

:root {
  --light-color: #7d859e;
  --dark-color: #202945;
  --f7-page-bg-color: #0f1526;
}

.myparent {
  display: grid;
  grid-template-columns: 1fr;
}

.myparent div {
  grid-row-start: 1;
  grid-column-start: 1;
}

.myparent img {
  grid-row-start: 1;
  grid-column-start: 1;
}

.show-narrow {
  display: block;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .show-narrow {
    display: none;
  }
}

.show-narrow-flex {
  display: flex;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .show-narrow-flex {
    display: none;
  }
}

.show-narrow-grid {
  display: grid;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .show-narrow-grid {
    display: none;
  }
}

.show-wide {
  display: none;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .show-wide {
    display: block;
  }
}

.show-wide-grid {
  display: none;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .show-wide-grid {
    display: grid;
  }
}

.show-wide-flex {
  display: none;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .show-wide-flex {
    display: flex;
  }
}

.absolute-wide {
}

@media (min-width: 1000px) and (min-height: 700px) {
  .absolute-wide {
    position: absolute;
  }
}

.hidden {
  display: none;
}

.nav-title {
  font-weight: 700;
}

.item-grid {
  display: grid;
  margin:-10px 0 0 0;
  gap:0px;
  flex-direction: row;
  width:fit-content;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .item-grid {
    display: flex;
    margin:24px auto 0px auto;
    gap:30px;
  }
}

.item-col1 {
    width:100vw;
}

.item-col2 {
  width:100vw;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .item-col1 {
    width:auto;
  }

  .item-col2 {
    width:30vw;
  }
}

@media (min-width: 1000px) and (min-height: 700px) {
  .popup-content .extra-items {
    width:500px;
  }
}

.item2-grid {
  display: grid;
  margin:-10px 0 0 0;
  gap:0px;
  flex-direction: row;
  width:100%;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .item2-grid {
    display: flex;
    margin:66px auto 0px auto;
  }
}

.item2-col1 {
    width:100vw;
}

.item2-col2 {
  width:100vw;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .item2-col1 {
    width:100%;
  }

  .item2-col2 {
    width:100%;
  }
}

.item3-grid {
  display: grid;
  gap:16px;
  flex-direction: row;
  width:fit-content;
  margin:auto;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .item3-grid {
    display: flex;
  }
}

.item3-col1 {
  width:100vw;
}

.item3-col2 {
  width:100vw;
}

.item3-banner {
  padding:0 16px;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .item3-col1 {
    width:100%;
    max-width:800px;
  }

  .item3-col2 {
    width:fit-content;
  }

  .item3-banner {
    padding:16px 0;
  }
}

@media (min-width: 1000px) and (min-height: 700px) {
  .popup-content .extra-items {
    width:500px;
  }
}

.margin-right-if-wide {
  padding-top:70px;
  padding-right:0px;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .margin-right-if-wide {
    padding-top:0px;
    margin:70px 0 0 500px;
    padding-right:30px;
    height:calc(100% - 70px);
  }
}

.item-placeholder {
  width:100%;
  height:100%;
  border-radius: 100%;
  background: #141828;
}

#item-loaded img
{
  opacity:0;
}

#item-loaded img.loaded
{
  transition-duration: 1.5s;
  opacity: 1;
}

.item-watch-rd
{
  width:100%;
  height:100%;
  aspect-ratio: 1;
  border-radius:100%;
}

.item-watch-sq
{
  width:88%;
  margin:6%;
  border-radius: 22%;
  aspect-ratio: 486/594;
  object-fit: cover;
  object-position: center;
}

.item-watch-sq-frame
{
  position: absolute;
}

.game-page .link.popup-close {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  z-index: 20;
}

.game-page-summary {
  line-height: 1.75;
  margin: 0px 0px 12px 0px;
}

.game-page-text-item {
  margin: 0px 0px 12px 0px;
  font-size: 16px;
  font-weight: bold;
}

.divider-down {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.2);
  min-height: calc(-200%);
  box-shadow: 0px -2px 3px rgba(0,0,0,0.2);
  padding-top: 2px;
  border-top: 1.5px solid rgba(0,0,0,0.6);
  position: relative;
}

.premium-feature {
  margin:4px 0 14px 0;
}

#publish-right
{
    padding:40px 20px 0px 20px;
}

@media screen and (max-width: 500px)
{
    #publish-right
    {
        padding:0px 20px 0px 20px;
    }
}

.footers
{
  margin:auto;
  width:fit-content;
}

.footer-group
{
  margin:0px 20px 30px 20px;
}

.footer-title
{
  font-size:15px;
  margin-bottom:8px;
}

.footer-item
{
  font-size:14px;
  margin-bottom:4px;
}

@media (min-width: 1000px) {
  .footers
  {
    display:flex;
  }

  .footer-group
  {
    margin:20px 50px;
  }

  .footer-title
  {
    font-size:16px;
  }

  .footer-item
  {
    font-size:15px;
  }
}

.watch-sticker
{
  z-index:1;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.error1
{
  background:#821034;
  border-radius:6px;
  padding:14px 14px;
  margin:16px 16px 0px 16px;
  width:300px;
  display:none;
  margin:-10px 0 0 0;
  width:100%;
}

.grow-if-narrow {
  flex-grow: 1;
}

@media (min-width: 1000px) and (min-height: 700px) {
  .error1 {
    width:930px;
    margin:66px auto -40px auto;
  }

  .grow-if-narrow {
    flex-grow: 0;
  }
}

.mychev {
  color:#999;
  font-size:16px;
  margin-right:10px;
}

.header-help {
  padding-top:20px;
  font-size:20px;
  font-weight:700;
  color:#cfd6f0;
}

.header-reviews {
  padding-top:50px;
  font-size:20px;
  font-weight:700;
  color:#cfd6f0;
}

.help-ol li {
  margin-top: 40px;
}

.ucolor {
  width:35px;
  height:35px;
  margin:9px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}

.ucolor-extra {
  display:grid;
  width:35px;
  height:35px;
  margin:9px;
}

.ucolor-extra-content {
  width:100%;
  height:100%;
  grid-area: 1 / 1;
}

.ucolor-select {
  position: absolute;
  left:-100px;
  top:-100px;
  width:47px;
  height:47px;
}

.my-message {
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  border-radius: 24px;
  margin:8px 0 0 0;
  padding: 6px 16px;
  height: 34px;
  color: #fff;
  font-size: 17px;
  line-height: 20px;
  border: 1px solid rgba(255,255,255,0.2);
}

.down-hover {
  position:absolute;
  right:6px;
  width:25px;
  opacity:0;
  transition: 0.15s ease;
}

.message-text:hover .down-hover {
  opacity:0.8;
  transition: 0.15s ease;
}

.mytime {
  font-size:10px;
  opacity:0.5;
  margin:0 32px 0 12px;
}

.show-1400 {
  display:none;
}

@media (min-width: 1400px) {
  .show-1400 {
    display:block;
  }
}

.show-1500 {
  display:none;
}

@media (min-width: 1500px) {
  .show-1500 {
    display:block;
  }
}

.promo-container
{
  display:flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  height:200px;
  padding:0 4px;
}

@media (min-width: 768px) {
  .promo-container {
  width:fit-content;
  margin:auto;
  }
}

.promo-item-a
{
  height:100%;
}

.promo-item
{
  margin:0 8px;
  border-radius:30px;
  height:100%;
}

.promo-item-edit
{
  margin:auto;
  height:120px;
  border-radius:20px;
}

.margin-apple {
  margin:48px 0 22px 0;
}

.margin-wear {
  margin:42px 0 0 0;
  height:159px;
}

.margin-top-apple {
  margin-top:50px;
}

.margin-top-wear {
  margin-top:20px;
}

.margin-top2-apple {
  margin-top:70px;
}

.margin-top2-wear {
  margin-top:20px;
}

.bottom-apple {
  bottom:92px;
}

.bottom-wear {
  bottom:72px;
}

.bottom2-apple {
  bottom:20px;
}

.bottom2-wear {
  bottom:0px;
}

.btn {
  background: linear-gradient(90deg, #68ccda, #62a8db, #3271fb, #62a8db, #68ccda);
  background-size: 400% 100%;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  font-size: 24px;
  animation: Gradient 30s ease infinite;
  text-decoration: none;
  width:calc(100% - 32px);
  margin:0 16px;
  position:absolute;
}

.btn div {
  color: #000;
  min-height: 54px;
  border-radius: inherit;
  background-size: inherit;
  background-image: inherit;
  animation: Gradient 30s ease infinite;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px #49a7b4;
}

.btn:active {
  background: #88c3ed;
}

@keyframes Gradient {
  50% {
    background-position: 140% 50%;
  }
}

.my-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background:rgba(0, 0, 0, 0.8);
}

.watch-face-wear {
  border-radius: 100%;
}

.promo-title {
  font-size:20px;
  font-weight:700;
  text-align:center;
}

.promo-title2 {
  font-size:18px;
  font-weight:700;
  text-align:center;
  margin-top:40px;
}

.float-bottom {
  width:100%;
  height:80px;
  background-color:#252530;
  border-radius: 20px 20px 0 0;
  position: fixed;
  bottom: 0px;
  padding-top:18px;
  z-index: 3;
}

.pricing-box {
  position: relative;
  width: 29vw;
  height: 148px;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  text-align: center;
  margin: 0 5px;
}

.box-selected {
   border: 2px solid #acace1 !important;
}

.pricing-title {
  position: absolute;
  left: 50%;
  top: -20px;
  font-size: 9px;
  transform: translateX(-50%);
  font-weight: 700;
  color: #acace1;
}

.pricing-bottom {
  position: absolute;
  top:55%;
  width:100%;
  height:45%;
  background-color:rgba(0,0,0,0.3);
  border-radius: 0 0 12px 12px;
}

.pricing-selected {
  position: absolute;
  left: 87%;
  top: 4%;
  width: 18px;
  transform: translateX(-50%);
}

.pricing-unit {
  position: absolute;
  left: 50%;
  top: 6%;
  font-size: 30px;
  transform: translateX(-50%);
  font-weight: 700;
}

.pricing-period {
  position: absolute;
  left: 50%;
  top: 33%;
  transform: translateX(-50%);
  font-size: 11px;
}

.pricing-discount {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; 
}

.discount-good {
  background-color: #537f2d;
}

.discount-bad {
  background-color: #000;
}

.pricing-price {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 500;
}

.pricing-price-m {
  position: absolute;
  top: 83%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color:rgba(255,255,255,0.7);
}

.pricing1 {
  background-color: #333342;
  border-radius: 26px 26px 0 0;
}

.pricing-detail {
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding-bottom:120px;
  border-radius: 20px 20px 0 0;
  background-color:#252530;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.pricing-detail.active {
  opacity:1 !important;
  transition: 0.3s ease;
  pointer-events: auto;
}

.chosen-box {
  position: relative;
  background:rgba(0,0,0,0.3);
  margin:auto;
  margin:30px 22px 0px 22px;
  height:80px;
  border-radius: 12px;
}

.chosen-box2 {
  position: relative;
  margin:auto;
  margin:0px 22px;
  height:90px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.pricing-selected2 {
  position: absolute;
  left: 7%;
  top: 23%;
  width: 18px;
  transform: translateX(-50%);
}

.pricing-detail1 {
  position: absolute;
  left: 12%;
  top: 20%;
  max-width: 60%;
  font-size: 17px;
  font-weight: 700;
}

.pricing-detail2 {
  position: absolute;
  left: 97%;
  top: 30%;
  font-size: 12px;
  transform: translateX(-100%);
}

.pricing-detail3 {
  position: absolute;
  left: 97%;
  top: 55%;
  font-size: 12px;
  transform: translateX(-100%);
}

.pricing-detail4 {
  position: absolute;
  left: 4%;
  top: 22%;
  font-size: 17px;
  font-weight: 700;
}

.pricing-detail5 {
  position: absolute;
  left: 4%;
  top: 52%;
  font-size: 12px;
}

.pricing-detail6 {
  position: absolute;
  left: 96%;
  top: 28%;
  transform: translateX(-100%);
}

.pricing-detail7 {
  position: absolute;
  left: 96%;
  top: 54%;
  font-size: 12.5px;
  font-weight: 700;
  transform: translateX(-100%);
  color:#69e11e;
}

.price-old {
  font-size: 14px;
  margin-right:10px;
  color:#ff4d4d;
  text-decoration: line-through;
}

.price-new {
  font-size: 15px;
  font-weight: 700;
}

.pricing-terms {
  margin:11px 0 0 0;
  text-align: center;
  font-size:11.5px;
}

.feature-box {
  margin:32px 32px 20px 32px;
}

.feature-tick {
  width: 28px;
  height: 28px;
  margin-right:18px;
}

.feature-header {
  font-size: 13px;
  font-weight: 700;
}

.feature-text {
  font-size: 11.5px;
  margin-bottom:20px;
  color:#ccc;
}

.promo-proof {
  width:calc(100% - 38px);
  max-width: 500px;
  margin:0px auto 4px auto;
}

.feature-box2 {
  position: relative;
  width: calc(100% - 38px);
  margin:19px;
  border: 2px solid #464651;
  border-radius: 12px;
}

.feature-row2 {
  position: relative;
  height: 50px;
}

.feature-row2.border {
  border-top: 1px solid rgba(255,255,255,0.2);
}

.feature2-hdr1 {
  font-size: 36px !important;
  padding:0 !important;
}

.feature2-hdr2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  top: 30% !important;
}

.feature2-col1 {
  position: absolute;
  left: 4%;
  top: 50%;
  max-width:30%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 500;
}

.feature2-col2 {
  position: absolute;
  left: 51%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 500;
}

.feature2-col3 {
  position: absolute;
  left: 83%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 700;
}

.feature-hl-col3 {
  position: absolute;
  left: 66%;
  top: 0%;
  width: 34%;
  height: 100%;
  margin: -2px;
  background: linear-gradient(#684580, #3d348f);
  border: 2px solid #9459c6;
  border-radius: 0 12px 12px 0;
}

.feature2-icon {
  width: 26px;
  height: 26px;
  margin-top: 5px;
}

.review-box {
  display:flex;
  flex-direction:row;
  margin:6px;
  background: linear-gradient(#684580, #3d348f);
  border-radius: 24px;
  padding: 20px 16px;
}

.flex-col {
  display:flex;
  flex-direction:column;
}

.flex-row {
  display:flex;
  flex-direction:row;
}

.review-person {
  width:36px;
  height:36px;
  border-radius: 100%;
  margin-right:12px;
}

.review-text {
  font-size:11.5px;
}

.review-text2 {
  font-size:11px;
  font-weight: 700;
  margin:4px 16px 0 0;
}

.review-stars {
  width:60px;
  height:11.5px;
  margin-top:6px;
}

.faq-box {
  margin:19px;
}

.faq-header {
  position: relative;
  font-size:13px;
  font-weight: 500;
  margin:0 0 4px 0;
  padding:12px 20px 0 0;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.faq-icon {
  position:absolute;
  right:0px;
  top:16px;
  font-size:14px;
  opacity:0.7;
}

.faq-text {
  font-size:12px;
  margin:0 0 12px 0;
  opacity:0.8;
}

.faq-line {
  margin-bottom:4px;
}

.promo-terms {
  font-size:12px;
  margin:0 19px 12px 19px;
  opacity:0.8;  
}

.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}