* {
  /* Disable selection/Copy of UIWebView */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.overflow-hidden {
  overflow: hidden;
}

button:focus {
  outline: none;
}

*:focus {
  outline: none;
}

.navbar .menu-left a:not([href]):not([class]):hover {
  color: #009ea2;
}

.popover {
  border: 0;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  max-width: 210px;
  border-radius: 11px;
}

.error-text {
  display: block;
  text-align: center;
  color: red;
  font-size: 12px;
  font-weight: 500;
  margin-top: 5px;
}

.bs-popover-auto[x-placement^="top"] > .arrow::before,
.bs-popover-top > .arrow::before {
  bottom: 0;
  border-width: 0;
  border-top-color: rgba(0, 0, 0, 0.25);
}

.popover-body {
  color: #000000;
  font-size: 12px;
  padding: 5px 10px;
  font-weight: 600;
}

.popover-header {
  padding: 4px 10px;
  margin-bottom: 0;
  line-height: normal;
  font-size: 12px;
  background-color: #009ea2;
  color: #ffffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.test-banner {
  width: 100%;
  text-align: center;
  color: #ffffff;
  background-color: #cb0000;
  padding: 1px 0;
  font-weight: 500;
  top: 66px;
  height: 20px;
  bottom: 0;
  left: 0;
  right: 0;
}

.test-banner span {
  display: block;
  margin: 0 auto;
}

.stories.carousel {
  text-align: center;
  padding: 0;
  margin-bottom: 20px;
}

#nav-icon1 {
  display: none;
  width: 23px;
  height: 15px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #009ea2;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 7px;
}

#nav-icon1 span:nth-child(3) {
  top: 14px;
}

/*#nav-icon1.open span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
    opacity: 0;
}

#nav-icon1.open span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}*/

select,
option {
  -webkit-appearance: none;
}

input,
textarea {
  /* Exception for input areas */
  -webkit-touch-callout: default !important;
  -webkit-user-select: text !important;
}

body {
  background-color: #fafafa;
  background-color: #ffffff;
  font-family: "Roboto", sans-serif;
  line-height: normal;
  font-size: 15px;
  font-weight: 400;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  color: #000000;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  touch-action: pan-x pan-y;
  width: 100%;
  height: 100vh;
  background-image: url(../img/bg5.png);
  background-size: 70% auto;
  background-repeat: repeat;
  background-position: top;
  background-attachment: fixed;
  padding-top: env(safe-area-inset-top, 30px);
}

.sticky-header {
  --safe-area-inset-top: env(safe-area-inset-top);
  position: fixed;
  width: 100%;
  height: calc(35px + var(--safe-area-inset-top));
  background-color: #ffffff;
  top: 0;
  display: block;
  z-index: 99;
}

.sticky-header-active {
  display: block;
}

.form-control:focus {
  border: 1px solid;
  border-color: #eef2f3 !important;
  box-shadow: none;
}

a {
  color: inherit;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

a:focus {
  text-decoration: none;
}

.btn-link.focus,
.btn-link:focus {
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: none;
}

.btn.focus,
.btn:focus {
  box-shadow: none;
}

.scroll-hidden {
  overflow: hidden;
  touch-action: none;
}

.logo-div {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  font-size: 17px;
  width: 250px;
  display: inline-block;
}

.logo-div img {
  width: 130px;
}

.logo-div span {
  font-size: 17px;
  font-weight: 500;
  color: #009ea2;
}

.logo-div i{
  margin-right: 2px;
}

.navbar {
  --safe-area-inset-top: calc(env(safe-area-inset-top) - 15px);
  margin-top: 0;
  height: 80px;
  position: fixed;
  width: 100%;
  left: 0;
  top: max(0px, var(--safe-area-inset-top));
  padding: 0 15px;
  transition: 0.5s;
  z-index: 999;
  background-color: #ffffff;
  border-bottom: 1px solid #f7f7f7;
}

.product-detail-nav {
  z-index: 0;
}

.navbar .menu-left {
  z-index: 10;
}

.navbar .medal-navbar-img {
  width: 45px;
  position: absolute;
  left: 50px;
  top: 15px;
}

.navbar .medal-navbar-img.zoom-out {
  animation: crescendo2 2s infinite;
}

.navbar .menu-left a {
  font-size: 23px;
  color: #009ea2;
}

.navbar .menu-left a .pp-div {
  position: relative;
}

.navbar .menu-left a .pp-div .profile-picture-span {
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-size: 20px;
  width: 47px;
  height: 47px;
  align-items: center;
  justify-content: center;
}

.navbar.scrolled {
  height: 60px;
}

.navbar .logo-div .logo-scrolled {
  display: none;
}

.navbar.scrolled .logo-div .logo-scrolled {
  display: block;
}

.navbar.scrolled .logo-div .logo-scrolled {
  display: n;
}

.navbar.scrolled .menu-left a .pp-div {
  display: none;
}

.navbar.scrolled .menu-left a #nav-icon1 {
  display: block;
}

.navbar .menu-left a .pp-div img {
  width: 47px;
  height: 47px;
  border-radius: 25px;
}

.navbar .menu-left a .pp-div .medal-item {
  position: absolute;
  right: -9px;
  bottom: -10px;
  width: 32px;
}

.navbar .menu-right .money-menu {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 4px 8px;
  -webkit-box-shadow: 2px 2px 5px 0px rgb(189 189 189);
  -moz-box-shadow: 2px 2px 5px 0px rgba(189, 189, 189, 1);
  box-shadow: 2px 2px 5px 0px rgb(189 189 189);
  color: #009a53;
}

.navbar .menu-right .first-div {
  text-align: center;
  display: flex;
  align-items: center;
  font-size: 15px;
}

.navbar .menu-right .first-div span {
  margin-left: 5px;
  font-weight: 900;
  color: #009a53;
  display: inline-flex;
  align-items: flex-end;
}

.navbar .menu-right .second-div {
  display: block;
  padding-left: 5px;
  padding-top: 2px;
}

.navbar .menu-right .second-div span {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.navbar .menu-right-product {
  display: flex;
  align-items: center;
}

.product-detail-top {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  position: relative;
  height: 65px;
  padding-bottom: 10px;
  z-index: 2;
}

.product-detail-top .new-product-box {
  top: 0;
}

.product-detail-top .fav-a {
  display: inline-block;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  border-radius: 10px;
  font-size: 18px;
  color: #ff4e00;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  margin-left: 20px;
  z-index: 9;
  position: absolute;
  right: 15px;
  top: 0;
}

.product-detail-top .fav-a.fav-active {
  right: 60px;
}

.product-detail-top .share-a {
  z-index: 9;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  line-height: 30px;
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  border-radius: 10px;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0;
  text-align: center;
  right: 15px;
}

.product-detail-top .share-a img {
  width: 20px;
}

.navbar .menu-right-product .i-none {
  color: #c5c5c5;
}

.menu-bottom {
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 0;
  background-color: #eefaff;
  bottom: -1px;
  z-index: 11;
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  padding-bottom: min(env(safe-area-inset-bottom), 20px);
}

.menu-bottom .center-home .popup-menu {
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
}

.menu-bottom .center-home .popup-menu.active {
  opacity: 1;
  pointer-events: all;
}

.menu-bottom .center-home .popup-menu .first {
  position: absolute;
  top: -70px;
  width: 65px;
  height: 65px;
  background: rgb(0, 123, 133);
  background: linear-gradient(
    0deg,
    rgba(0, 123, 133, 1) 0%,
    rgba(0, 158, 162, 1) 50%
  );
  border-radius: 50px;
  font-size: 21px;
  left: -40px;
  -webkit-box-shadow: 0 2px 5px 0 rgb(171 171 171);
  -moz-box-shadow: 0 2px 5px 0 rgb(171 171 171);
  box-shadow: 0 2px 25px 0 rgb(144 144 144);
}

.menu-bottom .center-home .popup-menu .last {
  position: absolute;
  top: -70px;
  width: 65px;
  height: 65px;
  background: rgb(0, 123, 133);
  background: linear-gradient(
    0deg,
    rgba(0, 123, 133, 1) 0%,
    rgba(0, 158, 162, 1) 50%
  );
  border-radius: 50px;
  font-size: 21px;
  right: -45px;
  -webkit-box-shadow: 0 2px 5px 0 rgb(171 171 171);
  -moz-box-shadow: 0 2px 5px 0 rgb(171 171 171);
  box-shadow: 0 2px 25px 0 rgb(144 144 144);
}

.menu-bottom .center-home .popup-menu img {
  width: 30px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.menu-bottom .sm-icon-menu-bottom {
  font-size: 23px;
}

.menu-bottom .active-menu-bottom::after {
  content: "";
  color: #009ea2;
  font-weight: bold;
  height: 8px;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  width: 40px;
  display: block;
  margin: 0 auto;
}

.menu-bottom-div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.menu-bottom-div .bottom-icon img {
  width: 50px;
  filter: invert(72%) sepia(76%) saturate(7080%) hue-rotate(154deg)
    brightness(94%) contrast(101%);
  margin-top: -3px;
}

.menu-bottom a {
  padding: 15px 0;
  cursor: pointer;
  color: #009ea2;
  text-decoration: none;
  position: relative;
  font-size: 25px;
  width: 20%;
  height: 65px;
}

.menu-bottom a span {
  position: absolute;
  background: #ff4200;
  animation: leaves 1.2s ease-in-out infinite alternate;
  font-size: 12px;
  color: #ffffff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  line-height: 18px;
  font-weight: 700;
  top: 10px;
  right: 20%;
}

.menu-bottom .center-home {
  position: relative;
  background: rgb(0, 123, 133);
  background: linear-gradient(
    0deg,
    rgba(0, 123, 133, 1) 0%,
    rgba(0, 158, 162, 1) 50%
  );
  color: #ffffff;
  bottom: 35px;
  border-radius: 50%;
  width: 75px;
  font-size: 40px;
  height: 75px;
  -webkit-box-shadow: 0 2px 5px 0 rgb(171 171 171);
  -moz-box-shadow: 0 2px 5px 0 rgb(171 171 171);
  box-shadow: 0 2px 5px 0 rgb(171 171 171);
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-bottom .center-home.colored-div {
  background: #ffffff;
}

.menu-bottom .center-home.colored-div > img {
  filter: invert(27%) sepia(92%) saturate(1953%) hue-rotate(158deg)
    brightness(70%) contrast(87%);
}

.menu-bottom .center-home > img {
  width: 34px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.home-chart-wrap {
  position: relative;
  width: 235px;
  height: 120px;
  margin: 0 auto;
  margin-bottom: 25px;
}

.home-chart-wrap .chart-stars i {
  position: absolute;
  z-index: 9;
  color: #ffd300;
  animation: myfirst3 1.5s infinite;
}

.home-chart-wrap .mothers-day i {
  color: #ff284f;
  animation: myfirst-anneler-gunu 1.5s infinite;
}

.home-chart-wrap .chart-stars img.star-icon2 {
  right: 13px;
  bottom: 14px;
  font-size: 20px;
}

.home-chart-wrap .chart-stars .star-icon1 {
  right: -6px;
  bottom: 34px;
  font-size: 24px;
}

.home-chart-wrap .chart-stars .star-icon2 {
  right: 13px;
  bottom: 10px;
  font-size: 20px;
}

.home-chart-wrap .chart-stars .star-icon3 {
  right: -9px;
  bottom: -3px;
  font-size: 16px;
}

@keyframes myfirst3 {
  0% {
    color: #ffe600;
  }

  50% {
    color: #ff9900;
  }

  100% {
    color: #ffe600;
  }
}

@keyframes myfirst-anneler-gunu {
  0% {
    color: #ff6d88;
  }

  50% {
    color: #ff284f;
  }

  100% {
    color: #ff6d88;
  }
}

.fire1 {
  font-size: 7px;
  bottom: -15px;
  filter: blur(0.02em);
  -webkit-filter: blur(0.02em);
  position: absolute;
  width: 8em;
  height: 9em;
  left: -16px;
  margin: 0 auto;
}

.fire2 {
  font-size: 7px;
  bottom: -15px;
  filter: blur(0.02em);
  -webkit-filter: blur(0.02em);
  position: absolute;
  width: 8em;
  height: 9em;
  right: -16px;
  margin: 0 auto;
}

.particle {
  animation: rise 1s ease-in infinite;
  background-image: radial-gradient(#ff3c00 20%, rgba(255, 80, 0, 0) 70%);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: 5em;
  height: 5em;
}

.particle:nth-of-type(1) {
  animation-delay: 0.6447668641s;
  left: calc((100% - 5em) * 0);
}

.particle:nth-of-type(2) {
  animation-delay: 0.2286919008s;
  left: calc((100% - 5em) * 0.02);
}

.particle:nth-of-type(3) {
  animation-delay: 0.3101439542s;
  left: calc((100% - 5em) * 0.04);
}

.particle:nth-of-type(4) {
  animation-delay: 0.7248343264s;
  left: calc((100% - 5em) * 0.06);
}

.particle:nth-of-type(5) {
  animation-delay: 0.0374268254s;
  left: calc((100% - 5em) * 0.08);
}

.particle:nth-of-type(6) {
  animation-delay: 0.081073683s;
  left: calc((100% - 5em) * 0.1);
}

.particle:nth-of-type(7) {
  animation-delay: 0.7440237846s;
  left: calc((100% - 5em) * 0.12);
}

.particle:nth-of-type(8) {
  animation-delay: 0.7986880765s;
  left: calc((100% - 5em) * 0.14);
}

.particle:nth-of-type(9) {
  animation-delay: 0.4845859905s;
  left: calc((100% - 5em) * 0.16);
}

.particle:nth-of-type(10) {
  animation-delay: 0.949613098s;
  left: calc((100% - 5em) * 0.18);
}

.particle:nth-of-type(11) {
  animation-delay: 0.3351093841s;
  left: calc((100% - 5em) * 0.2);
}

.particle:nth-of-type(12) {
  animation-delay: 0.3817435826s;
  left: calc((100% - 5em) * 0.22);
}

.particle:nth-of-type(13) {
  animation-delay: 0.248240727s;
  left: calc((100% - 5em) * 0.24);
}

.particle:nth-of-type(14) {
  animation-delay: 0.4281804933s;
  left: calc((100% - 5em) * 0.26);
}

.particle:nth-of-type(15) {
  animation-delay: 0.8445710964s;
  left: calc((100% - 5em) * 0.28);
}

.particle:nth-of-type(16) {
  animation-delay: 0.0153354319s;
  left: calc((100% - 5em) * 0.3);
}

.particle:nth-of-type(17) {
  animation-delay: 0.3717046314s;
  left: calc((100% - 5em) * 0.32);
}

.particle:nth-of-type(18) {
  animation-delay: 0.7486692647s;
  left: calc((100% - 5em) * 0.34);
}

.particle:nth-of-type(19) {
  animation-delay: 0.6640574168s;
  left: calc((100% - 5em) * 0.36);
}

.particle:nth-of-type(20) {
  animation-delay: 0.9654532415s;
  left: calc((100% - 5em) * 0.38);
}

.particle:nth-of-type(21) {
  animation-delay: 0.8377427673s;
  left: calc((100% - 5em) * 0.4);
}

.particle:nth-of-type(22) {
  animation-delay: 0.1223463132s;
  left: calc((100% - 5em) * 0.42);
}

.particle:nth-of-type(23) {
  animation-delay: 0.4192609696s;
  left: calc((100% - 5em) * 0.44);
}

.particle:nth-of-type(24) {
  animation-delay: 0.4156799014s;
  left: calc((100% - 5em) * 0.46);
}

.particle:nth-of-type(25) {
  animation-delay: 0.3160208533s;
  left: calc((100% - 5em) * 0.48);
}

.particle:nth-of-type(26) {
  animation-delay: 0.213649079s;
  left: calc((100% - 5em) * 0.5);
}

.particle:nth-of-type(27) {
  animation-delay: 0.6292547603s;
  left: calc((100% - 5em) * 0.52);
}

.particle:nth-of-type(28) {
  animation-delay: 0.3781087051s;
  left: calc((100% - 5em) * 0.54);
}

.particle:nth-of-type(29) {
  animation-delay: 0.5656390168s;
  left: calc((100% - 5em) * 0.56);
}

.particle:nth-of-type(30) {
  animation-delay: 0.6818173113s;
  left: calc((100% - 5em) * 0.58);
}

.particle:nth-of-type(31) {
  animation-delay: 0.6122379053s;
  left: calc((100% - 5em) * 0.6);
}

.particle:nth-of-type(32) {
  animation-delay: 0.2448326914s;
  left: calc((100% - 5em) * 0.62);
}

.particle:nth-of-type(33) {
  animation-delay: 0.9651704387s;
  left: calc((100% - 5em) * 0.64);
}

.particle:nth-of-type(34) {
  animation-delay: 0.0965377529s;
  left: calc((100% - 5em) * 0.66);
}

.particle:nth-of-type(35) {
  animation-delay: 0.2598497611s;
  left: calc((100% - 5em) * 0.68);
}

.particle:nth-of-type(36) {
  animation-delay: 0.0949417494s;
  left: calc((100% - 5em) * 0.7);
}

.particle:nth-of-type(37) {
  animation-delay: 0.1585137435s;
  left: calc((100% - 5em) * 0.72);
}

.particle:nth-of-type(38) {
  animation-delay: 0.4985780882s;
  left: calc((100% - 5em) * 0.74);
}

.particle:nth-of-type(39) {
  animation-delay: 0.9477096623s;
  left: calc((100% - 5em) * 0.76);
}

.particle:nth-of-type(40) {
  animation-delay: 0.939270518s;
  left: calc((100% - 5em) * 0.78);
}

.particle:nth-of-type(41) {
  animation-delay: 0.6946313893s;
  left: calc((100% - 5em) * 0.8);
}

.particle:nth-of-type(42) {
  animation-delay: 0.0827202458s;
  left: calc((100% - 5em) * 0.82);
}

.particle:nth-of-type(43) {
  animation-delay: 0.0731003558s;
  left: calc((100% - 5em) * 0.84);
}

.particle:nth-of-type(44) {
  animation-delay: 0.9578996754s;
  left: calc((100% - 5em) * 0.86);
}

.particle:nth-of-type(45) {
  animation-delay: 0.9782870206s;
  left: calc((100% - 5em) * 0.88);
}

.particle:nth-of-type(46) {
  animation-delay: 0.3328614636s;
  left: calc((100% - 5em) * 0.9);
}

.particle:nth-of-type(47) {
  animation-delay: 0.2084380693s;
  left: calc((100% - 5em) * 0.92);
}

.particle:nth-of-type(48) {
  animation-delay: 0.3751326135s;
  left: calc((100% - 5em) * 0.94);
}

.particle:nth-of-type(49) {
  animation-delay: 0.5022508709s;
  left: calc((100% - 5em) * 0.96);
}

.particle:nth-of-type(50) {
  animation-delay: 0.97855664s;
  left: calc((100% - 5em) * 0.98);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0) scale(1);
  }

  25% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(-10em) scale(0);
  }
}

.home-chart {
  width: 65%;
  animation: left 2s ease-in-out infinite;
  margin: 0 auto;
}

@keyframes left {
  0% {
    transform: translatex(5px);
  }

  50% {
    transform: translatex(0px);
  }

  100% {
    transform: translatex(5px);
  }
}

.step-chart {
  width: 100%;
  position: relative;
  margin-top: 20px;
}

.step-chart canvas {
  pointer-events: none;
}

.step-chart .chartWrapper {
  overflow-x: scroll;
  width: 100%;
  height: auto;
}

.content {
  padding-bottom: 125px;
  width: 100%;
  padding-top: 90px;
}

.counter-div {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  margin-top: 0;
}

.counter-div .total-step {
  margin-bottom: 20px;
}

.counter-div .total-step .step-info-text {
  width: max-content;
  margin: 0 auto;
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.counter-div .total-step .step-info-text.yellow-info {
  color: #ff8100;
}

.counter-div .total-step .step-info-text.green-info {
  color: #009a53;
}

.counter-div .total-step .step-info-text.red-info {
  color: #ff0000;
}

.counter-div .total-step span {
  display: block;
}

.counter-div .total-step .total-h {
  font-weight: 500;
  font-size: 15px;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter-div .total-step .total-h .info-modal {
  padding-left: 5px;
}

.counter-div .total-step .total-c {
  font-size: 32px;
  font-weight: 600;
  color: #009ea2;
}

.counter-div .total-step .total-c.end-step {
  color: rgb(255 78 0);
}

.counter-div .total-step .total-c2 {
  color: rgb(255 78 0);
}

.counter-div .total-step .total-c2.end-step {
  color: #009a53;
}

.counter-div .undo-btn {
  font-size: 40px;
  background: rgb(255 82 0);
  background: linear-gradient(0deg, rgba(255, 82, 0, 1) 40%, rgb(255 3 3) 100%);
  color: #ffffff;
  height: 75px;
  width: 75px;
  line-height: 75px;
  border-radius: 50%;
  /* animation: leaves 1.8s ease-in-out infinite alternate; */
  display: inline-block;
  position: absolute;
  bottom: 0;
  z-index: 9;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 24px;
  text-align: center;
  color: #ffffff;
  font-weight: 500;
  border: 0;
}

.counter-div .mothers-day {
  background: linear-gradient(
    0deg,
    rgb(255, 72, 105) 40%,
    rgb(255, 40, 79) 100%
  );
}

.counter-div .undo-btn:active {
  -webkit-box-shadow: 0px 0px 15px 0px rgba(130, 130, 130, 1);
  -moz-box-shadow: 0px 0px 15px 0px rgba(130, 130, 130, 1);
  box-shadow: 0px 0px 15px 0px rgba(130, 130, 130, 1);
  background: #ff4800;
}

.counter-div .undo-btn.hourglass:active {
  box-shadow: none;
  background: #e9e9e9;
}

.counter-div .undo-btn.undo-btn.disable-counter {
  animation: none;
}

.counter-div .undo-btn.undo-btn.info-counter {
  animation: none;
  background: #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 60px;
}

.counter-div .undo-btn.undo-btn.info-counter i {
  color: #009a53;
}

.counter-div .undo-btn.undo-btn.info-counter:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.counter-div .undo-btn.info-counter img {
  filter: none;
  width: 52px;
  height: 52px;
  margin-top: 0;
}

.counter-div .video-play-btn {
  background: #009ea2;
  height: 50px;
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 10px;
  transform: translate(0%, -50%);
  z-index: 9;
  left: 0;
  right: 0;
  margin-left: auto;
  border-radius: 50%;
  margin-right: auto;
  font-size: 24px;
  text-align: center;
  color: #ffffff;
  font-weight: 500;
  border: 0;
}

.counter-div .video-play-btn i {
  padding-left: 5px;
}

.counter-div .battery-btn {
  display: block;
  position: absolute;
  z-index: 9;
  left: 0;
  width: 40px;
  height: 40px;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #000000;
  top: -5px;
}

.counter-div .battery-btn i {
  font-size: 30px;
  animation: crescendo 1.8s infinite, myanimation 1.8s infinite;
}

.counter-div .battery-btn img {
  width: 30px;
  animation: crescendo 1.8s infinite, myanimation 1.8s infinite;
}

.counter-div .battery-btn .chart-play-btn {
  font-size: 11px;
  position: absolute;
  left: 12px;
  color: #ffffff;
  top: 6px;
  z-index: 999;
  animation: crescendo 1.8s infinite;
}

.counter-div .battery-btn.disable-play i {
  color: #000000;
  animation: none;
}

.counter-div .battery-btn.disable-play {
  animation: none;
}

@keyframes crescendo {
  0% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes crescendo2 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes myanimation {
  0% {
    color: #000000;
  }

  55% {
    color: #ffae00;
  }

  100% {
    color: #000000;
  }
}

@keyframes progresslight {
  0% {
    filter: none;
  }

  50% {
    filter: drop-shadow(0 0 0.5rem #ff5216);
  }

  100% {
    filter: none;
  }
}

.counter-div .battery-btn .progress {
  background-color: #ffffff;
  border-radius: 5px;
  height: 25px;
  border: 1px solid #4e4e4e;
}

.counter-div .battery-btn .progress::before {
  left: -2px;
  bottom: 0;
  top: 0px;
  content: " ";
  position: absolute;
  width: 3px;
  height: 8px;
  background-color: #4e4e4e;
  border-radius: 10px 0 0 10px;
  z-index: 9;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  display: block;
}

.counter-div .battery-btn .bg-battery-green {
  background-color: #00ca2e;
}

.counter-div .battery-btn .bg-battery-yellow {
  background-color: #f3c029;
}

.counter-div .battery-btn .bg-battery-red {
  background-color: #f11b30;
}

.counter-div .undo-btn.disable-counter {
  background: #e9e9e9;
}

.counter-div .video-play-btn.disable-play {
  background: #b7b7b7;
}

.counter-div .undo-btn img {
  filter: invert(100%) sepia(20%) saturate(2%) hue-rotate(252deg)
    brightness(111%) contrast(101%);
  width: 60px;
  height: 60px;
  margin-top: -3px;
}

.counter-div .undo-btn .chart-play-btn {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 10px;
  font-size: 15px;
}

.banner1 {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  margin-bottom: 30px;
  position: relative;
}

.draw-banner {
  background-color: #eefaff;
}

@keyframes limitedanimate-bg3 {
  0% {
    border: 2px solid #ffcebd;
    box-shadow: 0px 0px 5px 3px rgb(255, 228, 220);
  }

  50% {
    border: 2px solid #ff9f80;
    box-shadow: 0px 0px 5px 3px rgb(255, 182, 160);
  }

  100% {
    border: 2px solid #ffcebd;
    box-shadow: 0px 0px 5px 3px rgb(255, 228, 220);
  }
}

.banner1.draw-banner .banner1-img-div {
  /* border-radius: 25px; */
  /* overflow: hidden; */
}

.banner1.banner-active .banner-name {
  color: #009a53;
}

.banner1.banner-active .banner-bottom2 .product-play i {
  color: #dadada;
}

.banner1.banner-lock .banner-bottom2 .product-play i {
  color: #dadada;
}

.banner1.banner-lock .banner-bottom2 .product-play2 {
  background-color: #dadada;
}

.banner1.banner-lock .banner-bottom2 .product-play2 i {
  color: #ffffff;
}

.banner1 .banner1-img-div img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
}

.banner1-img-div {
  background-image: url(../img/load-icon.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 41%;
  margin-bottom: 12px;
  background-color: #e8e8e8;
}

.single-banner .banner1-img-div {
  background-image: url(../img/single-banner-load.jpg);
  padding-top: 100%;
}

.product-detail .banner1-img-div {
  margin-top: -45px;
  margin-bottom: 15px;
}

.banner1 .banner-name {
  font-size: 14px;
  display: block;
  font-weight: 500;
}

.exit-bonus-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner1 .banner-bottom {
  background-color: #ffffff;
  color: #008447;
  border-radius: 20px;
  margin-top: 10px;
  text-align: center;
}

.banner1 .banner-bottom .banner-count {
  text-align: right;
  position: absolute;
  right: 15px;
  color: #000000;
}

.banner1 .banner-bottom2 .product-play i {
  color: #019da1;
  font-size: 50px;
}

.banner1 .banner-bottom2 .complete-bonus i {
  color: #009a53;
  font-size: 40px;
}

.banner1 .banner-bottom2 .active-bonus {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #00b562;
  padding: 7px 10px;
  border-radius: 10px;
  width: 75px;
  font-weight: 600;
  font-size: 11px;
  text-align: center;
  color: #ffffff;
}

.banner1 .banner-bottom2 .exit-bonus {
  display: inline-block;
  top: 45px;
  right: 10px;
  background-color: #fa0d0d;
  border-radius: 25px;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  width: 75px;
  padding: 7px 15px;
  font-size: 13px;
  margin-right: 8px;
}

.banner1 .banner-bottom2 .exit-bonus i {
  font-size: 18px;
}

.banner1 .banner-bottom2 .product-play2.product-play-plane i {
  margin-right: 3px;
}

.banner1 .banner-bottom2 .product-play2.product-play-man i {
  margin-left: 1px;
}

.banner1 .banner-bottom2 .product-play2 {
  background-color: #019da1;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 62px;
  display: inline-block;
}

.banner1 .banner-bottom2 .product-play2 i {
  color: #ffffff;
  font-size: 28px;
  display: inline-block;
}

.banner1.banner-shop .banner-bottom {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.banner1.banner-shop .banner-bottom .temin-ediliyor {
  margin: 0;
  margin-left: auto;
  font-size: 12px;
  padding: 6px 10px;
}

.banner1.banner-shop .banner-bottom .temin-ediliyor svg {
  width: 20px;
}

.banner1.banner-shop.banner-multi .banner-bottom .temin-ediliyor {
  text-align: center;
  margin: 0 auto;
}

.banner-multi .product-price {
  font-weight: 900;
  justify-content: center;
  color: #009a53;
  position: relative;
  display: flex;
  align-items: center;
}

.banner-multi {
  position: relative;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  background-color: #ffffff;
  margin-bottom: 30px;
  padding: 15px 3px;
}

.banner-multi .product-price .first-div .money {
  margin-right: 3px;
}

.banner-multi .banner1-img-div {
  background-image: url(../img/single-banner-load.jpg);
  padding-top: 100%;
}

.banner-multi .banner-name {
  text-align: center;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-weight: 500;
  padding: 0 3px;
  margin: 6px 0;
  height: 38px;
}

.banner1.banner-shop.draw-banner .banner-bottom {
  /* justify-content: space-between; */
  background-color: transparent;
}

.banner1.banner-shop.draw-banner .draw-div {
  font-size: 12px;
  background-color: #4ec900;
  border-radius: 10px;
  padding: 5px 10px;
  color: #ffffff;
  font-weight: 500;
}

.banner1.banner-shop.draw-banner .draw-div.waiting {
  background-color: #b3b3b3;
}

.banner1.banner-shop.draw-banner .draw-div.end {
  background-color: #009ea2;
  color: #ffffff;
  font-size: 14px;
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 500;
}

.banner1.banner-shop.draw-banner .draw-div.win {
  background-color: #12d068;
  color: #ffffff;
  font-size: 14px;
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 500;
}

.banner1.banner-shop.draw-banner .draw-div.lose {
  background-color: #f82c2c;
  color: #ffffff;
  font-size: 14px;
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 500;
}

.banner1.banner-shop.draw-banner .banner1-img-div {
  /* padding-top: 41%; */
  border: 3px solid #ffffff;
}

.banner1.banner-shop.draw-banner.single-banner .banner1-img-div {
  border: 0;
}

.shop-row {
  justify-content: space-evenly;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.cargo-info-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ffc300;
  width: 32px;
  height: 32px;
  display: flex;
  color: #ffffff;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cargo-info-btn:hover {
  color: #ffffff;
}

.shop-page .row .col-6,
.shop-page .row .col-12 {
  padding: 0 9px;
}

.banner-multi.banner-shop .banner-bottom {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
}

.banner-shop .fav-div {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ffffff;
  padding: 8px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  border-radius: 10px;
}

.banner-shop .fav-div i {
  font-size: 20px;
  color: #ff2f00;
}

.product-sale-box {
  font-weight: 900;
  font-size: 11px;
  color: #ffffff;
  background-color: #ff2f00;
  padding: 5px 8px;
  border-radius: 10px;
  margin-right: 12px;
}

.product-medal-box {
  display: flex;
  align-items: center;
}

.product-medal-box span {
  font-weight: bold;
  color: #009ea2;
  margin-right: 10px;
  display: block;
}

.product-medal-box .img-div {
  margin-left: -15px;
}

.product-medal-box .img-div img {
  display: block;
  width: 36px;
}

.lastStock {
  text-align: center;
  display: block;
  font-size: 10px;
  font-weight: 500;
  background-color: #00bfe4;
  width: max-content;
  padding: 4px;
  border-radius: 10px;
  position: absolute;
  left: 5px;
  top: 5px;
  color: #ffffff;
}

.lastStock b {
  font-weight: 700;
}

.limitedStock {
  text-align: center;
  display: flex;
  align-items: center;
  font-weight: 500;
  width: max-content;
  border-radius: 25px;
  background-color: #009ea2;
  font-size: 11px;
  padding: 6px 8px;
  color: #ffffff;
  animation: limitedanimate-bg 1.5s infinite;
}

.total-stock {
  display: flex;
  align-items: center;
  background-color: #00b6bb;
  font-size: 12px;
  min-width: 60px;
  justify-content: center;
  height: 25px;
  border-radius: 25px;
  color: #ffffff;
  font-weight: 400;
  padding: 0 10px;
  margin-left: auto;
}

.total-stock b {
  margin-left: 3px;
  font-weight: 600;
  font-size: 14px;
}

.limited-product-icon {
  position: absolute;
  top: 7px;
  right: 7px;
  animation: limitedanimate 1.5s infinite;
  font-size: 24px;
}

@keyframes limitedanimate {
  0% {
    fill: #00b8bb;
  }

  50% {
    fill: #00e2e6;
  }

  100% {
    fill: #00b8bb;
  }
}

@keyframes limitedanimate-bg {
  0% {
    background-color: #00b8bb;
  }

  50% {
    background-color: #00e2e6;
  }

  100% {
    background-color: #00b8bb;
  }
}

.limited-product-icon svg {
  width: 30px;
}
.left-sticker-product {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  width: 100%;
  left: 0;
  top: -15px;
  flex-wrap: wrap;
}

.product-detail .left-sticker-product {
  top: 0;
}

.new-product-box {
  text-align: center;
  background-color: #ffb300;
  color: #ffffff;
  font-size: 10px;
  font-weight: bolder;
  border-radius: 50px;
  height: 30px;
  line-height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.star-product-icon {
  position: absolute;
  top: 7px;
  right: 7px;
  animation: myfirst3 1.5s infinite;
  font-size: 24px;
}

.banner-shop .product-price {
  font-weight: 900;
  color: #009a53;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.price-div .old-price {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  color: #cfcfcf;
}

.price-div .old-price i {
  font-size: 14px;
}

.price-div .old-price b {
  font-size: 15px;
  margin-left: -2px;
}

.price-div .old-price .first-div {
  display: flex;
  align-items: center;
  font-weight: 900;
  font-size: 14px;
}

.price-div .old-price .first-div .money {
  margin-left: 5px;
}

.price-div .old-price .second-div span {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.price-div .old-price .second-div {
  display: inline-block;
  padding-left: 3px;
}

.banner-shop .product-price .first-div {
  display: flex;
  align-items: center;
  font-size: 15px;
}

.banner-shop .product-price .first-div .money {
  margin-left: 5px;
}

.banner-shop .product-price .second-div span {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.banner-shop .product-price .second-div {
  display: inline-block;
  padding-left: 3px;
}

.banner-shop .end-product {
  border: 1px solid #bdbdbd;
  background-color: #ffffff;
  color: #6f6f6f;
  font-size: 12px;
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 500;
}

.banner-shop .notification-product {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ffffff;
  padding: 8px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  border-radius: 10px;
  width: 36px;
  text-align: center;
  color: #009ea2;
}

.banner-shop .notification-product.fav-active {
  top: 55px;
}

.banner-shop .notification-product i {
  font-size: 20px;
}

.banner-shop .end-product i {
  font-size: inherit;
  color: #000000;
  margin-right: 2px;
}

.none-banner-div {
  text-align: center;
  margin: 15px 0;
}

.none-banner-div p {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
}

.none-banner-div p.text2 {
  margin-top: 15px;
  font-size: 18px;
  color: #00979b;
}

.none-banner-div p.text2 img {
  width: 25px;
  margin-left: 5px;
}

.app-btn {
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  background: #009ea2;
  color: #ffffff;
  padding: 10px 25px;
  font-weight: 500;
  display: block;
  width: 150px;
  margin: 0 auto;
  max-width: 100%;
  border-radius: 25px;
  border: 0;
}

.app-btn.buy-btn {
  width: 100%;
  height: 43px;
  padding: 0;
  border-radius: 25px;
  line-height: 43px;
}

.app-btn.edit-btn {
  color: #ffffff;
  background: rgb(255 78 0);
  padding: 15px 10px;
}

.app-btn.buy-btn.end-activty-btn {
  background: rgb(163 163 163);
}

.app-btn i {
  margin-right: 5px;
}

.app-btn:hover {
  color: #ffffff;
}

.banner-bottom .banner-summary a {
  display: inline-flex;
  align-items: center;
  color: #000000;
  font-weight: 500;
}

.banner-bottom .banner-summary i {
  padding-left: 3px;
  font-size: 13px;
}

.product-detail {
  margin-top: -10px;
}

.product-detail .league-page .friends {
  margin-top: 30px;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 5px 5px rgb(236 236 236);
  border-radius: 10px;
  background-color: #eefaff;
  padding: 10px;
}

.product-detail .league-page .friends .first-league-table li .inside {
  align-items: center;
}

.product-detail .league-page .friends .first-league-table li .name {
  width: 220px;
}

.product-detail .league-page .friends ul li .number {
  width: 25px;
  height: 25px;
  font-size: 13px;
}

.product-detail .league-page .friends ul li {
  /* box-shadow: none; */
}

.product-detail .league-page .friends ul {
  padding-bottom: 0;
  height: auto;
}

.product-detail .league-page .friends .draw-list-title {
  text-align: center;
  display: flex;
  margin: 0 auto;
  margin-bottom: 10px;
  color: #009ea2;
  width: max-content;
  padding-top: 10px;
  font-size: 15px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
}

.product-detail .league-page .friends .draw-list-title img {
  width: 19px;
  margin-left: 3px;
}

.product-detail .index-top-info-box {
  margin-top: 20px;
  height: 30px;
  border-radius: 10px;
  width: max-content;
  padding: 5px 10px;
  font-weight: 400;
  background-color: white;
  color: #009ea2;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 6px 2px rgb(235 235 235);
}

.product-detail .draw-page-sticker-date {
  margin: 0 auto;
  margin-top: 20px;
  height: 30px;
  border-radius: 10px;
  width: max-content;
  padding: 5px 10px;
  font-weight: 400;
  background-color: #dbf4fe;
  color: #000000;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 5px 0px rgb(235 235 235);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail .draw-page-sticker-date.waiting {
  background-color: #ffcf4b;
}

.product-detail .index-top-info-box span b {
  font-weight: 800;
}

.product-detail .banner1-img-div img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
}

.product-detail .brand-name {
  font-weight: 900;
  font-size: 15px;
  color: #f27a1a;
  margin-bottom: 2px;
  display: block;
}

.product-detail h2 {
  font-size: 17px;
  font-weight: 500;
  padding-bottom: 10px;
  margin: 0;
}

.product-detail p {
  font-size: 15px;
  text-align: left;
  padding-bottom: 12px;
  font-weight: 400;
  margin: 0;
}

.product-detail ul {
  padding: 0;
  font-size: 15px;
  text-align: left;
  padding-bottom: 12px;
  font-weight: 400;
  margin: 0;
  padding-left: 15px;
}

.product-detail .product-date {
  text-align: center;
  display: block;
  font-weight: 400;
  font-size: 15px;
  padding-bottom: 10px;
}

.product-detail .product-price {
  font-size: 20px;
  font-weight: 900;
  color: #009a53;
  display: inline-flex;
  align-items: center;
  position: relative;
}

.product-detail .product-price .first-div {
  display: flex;
  align-items: center;
  font-size: 15px;
}

.product-detail .product-price .first-div .money {
  margin-left: 5px;
}

.product-detail .product-price .second-div span {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.product-detail .product-price .second-div {
  display: inline-block;
  padding-left: 3px;
}

.product-detail .product-price i {
  font-size: 15px;
}

.product-detail-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail-bottom.medal-bottom-piece {
  margin-top: -25px;
}

.product-detail-bottom.medal-bottom-piece .product-medal-box .img-div {
  margin-left: -15px;
  text-align: center;
}

.product-detail-bottom.medal-bottom-piece .product-medal-box .img-div img {
  display: block;
  width: 33px;
}

.product-detail-bottom.medal-bottom-piece .product-medal-box .img-div b {
  color: #009a53;
  font-size: 15px;
  display: block;
}

.product-detail .limitedStockCost-div {
  margin-top: 25px;
  margin-bottom: 25px;
}

.product-detail .tukendi-product-detail {
  border: 1px solid #bdbdbd;
  background-color: #ffffff;
  color: #6f6f6f;
  font-size: 13px;
  border-radius: 20px;
  padding: 6px 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  height: 43px;
}

.product-detail .limitedStockCost-table {
  background: #bff2f4;
  text-align: center;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 8px 30px;
  margin: 0 auto;
}

.product-detail .limitedStockCost-table .text1 {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-right: 10px;
  color: #00b6bb;
}

.product-detail .limitedStockCost-table .text2 {
  font-size: 26px;
  background-color: #00bcbf;
  display: block;
  width: max-content;
  color: #ffffff;
  padding: 5px 10px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  font-weight: 600;
}

.product-detail .limitedStockCost-table .text2::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.5px;
  left: 0;
  top: 50%;
  background: rgb(255 255 255 / 3%);
  z-index: 0;
}

.product-detail .limitedStockCost-table .text2::after {
  content: "";
  background: linear-gradient(
    to bottom,
    rgb(255 255 255 / 16%) 0%,
    rgb(0 192 197) 100%
  );
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  bottom: 0;
  z-index: 0;
}

.product-detail .limitedStockCost-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.product-detail .limitedStockCost-title svg {
  width: 30px;
  animation: limitedanimate 1.5s infinite;
  margin-right: 10px;
}

.product-detail .limitedStockCost-title span {
  text-align: center;
  display: block;
  font-weight: 500;
  width: max-content;
  border-radius: 10px;
  background-color: #009ea2;
  font-size: 15px;
  padding: 6px 15px;
  color: #ffffff;
  animation: limitedanimate-bg 1.5s infinite;
}

/* ürün detay 2 */

.product-detail2 {
  margin-top: -10px;
}

.product-detail2 .app-btn.view-btn {
  width: 100%;
  height: 43px;
  padding: 0;
  border-radius: 0;
}

.product-detail2 .product-detail-top .share-a img {
  width: 20px;
  padding-right: 1px;
  padding-bottom: 1px;
}

.product-detail2 .app-btn.view-btn i {
  padding-bottom: 2px;
}

.product-detail2 .app-btn.buy-btn {
  width: 100%;
  height: 43px;
  padding: 0;
  border-radius: 0;
  line-height: 43px;
}

.product-detail2 .product-detail-top {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  position: relative;
  height: 45px;
  padding-bottom: 10px;
}

.product-detail2 .product-image {
  margin-top: -45px;
  margin-bottom: 10px;
}

.product-detail2 .product-image img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
}

.product-detail2 .brand-name {
  font-weight: 900;
  font-size: 15px;
  color: #f27a1a;
  margin-bottom: 2px;
  display: block;
}

.product-detail2 .product-detail-top .share-a {
  z-index: 9;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  border-radius: 10px;
  width: 35px;
  height: 35px;
  position: absolute;
  text-align: center;
  top: 60px;
  right: 15px;
}

.product-detail2 .product-detail-top .fav-a {
  z-index: 9;
  position: absolute;
  right: 15px;
  top: 15px;
}

.product-detail2 .product-price {
  font-size: 20px;
  font-weight: 900;
  color: #009a53;
  display: inline-flex;
  align-items: center;
  margin-bottom: 15px;
}

.product-detail2 .product-price .first-div {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.product-detail2 .product-price .first-div .money {
  margin-left: 5px;
}

.product-detail2 .product-price .second-div span {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.product-detail2 .product-price .second-div {
  display: inline-block;
  padding-left: 3px;
}

.product-detail2 .product-price i {
  font-size: 16px;
}

.product-detail2 h2 {
  font-size: 17px;
  font-weight: 500;
  padding-bottom: 10px;
  margin: 0;
}

.product-detail2 p {
  font-weight: 300;
}

.product-detail .more-info-div p {
  font-weight: 400;
  font-size: 13px;
}

.more-info-div {
  text-align: left;
  font-size: 15px;
  margin-top: 25px;
}

.more-info-div .accordion {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #404040;
}

.more-info-div .accordion .link p {
  text-align: left;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 8px;
  margin-bottom: 0;
  margin-right: 5px;
}

.more-info-div .accordion .link-noAccordion p {
  text-align: left;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 10px;
  margin-right: 5px;
}

.more-info-div .accordion .link i {
  color: #3b3b3b;
  font-size: 12px;
}

.more-info-div .accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.more-info-div .submenu {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.more-info-div .submenu li p {
  text-align: left;
  font-size: 13px;
  padding-bottom: 5px;
}

.more-info-div a {
  display: inline-block;
  font-weight: 600;
}

.more-info-div .submenu a:hover {
  color: #fff;
}

.product-detail .app-btn {
  background: #009ea2;
  margin-top: 20px;
}

.product-detail .request-btn {
  background: #0db87d;
  border: 1px solid #0db87d;
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  border-radius: 25px;
  margin-top: 15px;
  font-weight: 500;
}

.product-detail .request-btn i {
  margin-right: 6px;
}

.product-detail .request-btn.active {
  background-color: #ffffff;
  color: #0db87d;
}

.product-detail .request-div {
  background-color: #ffffff;
  padding: 15px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.product-detail .request-div .total-user {
  display: block;
  text-align: center;
}

.product-detail .request-div .total-user i {
  color: rgb(255, 0, 0);
  font-size: 20px;
  margin-right: 2px;
}

.product-detail .request-div .total-user b {
  color: #0db87d;
}

.product-detail .request-div span {
  margin-bottom: 20px;
  display: block;
}

.product-detail .request-div .info-list span:last-child {
  margin-bottom: 0;
}

.product-detail .request-div .last-date-request {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6e6e6e;
}

.product-detail .request-div .last-date-request i {
  color: rgb(137 194 175);
  font-size: 17px;
  margin-right: 6px;
}

.product-detail .request-div .last-date-request b {
  margin-left: 4px;
  font-weight: 400;
  color: #000000;
}

.product-detail .app-btn.draw-btn {
  /* background-color: #ff4200; */
}

.product-detail .app-btn.star-btn-product {
  animation: myfirst5 1.5s infinite;
}

.app-btn.view-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 15px;
  font-size: 14px;
  border: 1px solid #f27a1a;
  color: #f27a1a;
  background: #fff;
  width: 100%;
  height: 43px;
  padding: 0;
  border-radius: 0;
  border-radius: 25px;
}

.app-btn.draw-view-btn {
  /* border: 1px solid #009ea2; */
  /* color: #009ea2; */
}

.app-btn.view-btn:active {
  border: 2px solid #f27a1a;
  color: #f27a1a;
  background: #fff;
}

.app-btn.view-btn i {
  margin-left: 5px;
  margin-right: 0;
  font-size: 18px;
}

.app-btn.view-btn span {
  padding-top: 2px;
}

.product-detail-end .product-price {
  color: #c5c5c5;
}

.product-detail-end .app-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 15px;
  font-size: 14px;
  border: 1px solid #f27a1a;
  color: #f27a1a;
  background: #fff;
  width: 100%;
  height: 43px;
  padding: 0;
  border-radius: 25px;
}

.product-detail-end .app-btn.follow-product-click {
  background-color: #f27a1a;
  color: #fff;
}

.product-detail-end .app-btn:hover {
  border: 2px solid #f27a1a;
  color: #f27a1a;
  background: #fff;
}

.invite-page {
  text-align: center;
}

.invite-page .banner1-img-div img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
  background-color: #fafafa;
}

.invite-page .banner1-img-div {
  margin-bottom: 15px;
}

.invite-page p {
  margin: 0;
  font-size: 16px;
  padding-bottom: 20px;
}

.invite-page b {
  color: #009ea2;
  font-weight: 500;
}

.friends h2 {
  font-size: 16px;
  color: #009ea2;
  padding-bottom: 10px;
  padding-top: 30px;
  margin: 0;
}

.friends ul {
  padding: 0;
  text-align: left;
}

.friends ul li {
  list-style-type: none;
  background-color: #ffffff;
  border-radius: 25px;
  padding: 5px 6px;
  position: relative;
  margin-bottom: 20px;
  height: 52px;
  display: flex;
  z-index: 9;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dddddd;
}

.friends ul .date-end-challenge {
  font-size: 11px;
  font-weight: 600;
  display: block;
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  height: auto;
  margin-bottom: 10px;
  border-radius: 0;
}

.friends ul li .list-inside {
  display: flex;
  align-items: center;
  width: 100%;
}

.friends ul li .step-count-list {
  font-weight: 600;
  color: #ff4e00;
  font-size: 13px;
  position: absolute;
  right: 60px;
}

.friends ul li .pp-lig {
  width: 42px;
  float: none;
  display: inline-block;
  margin-left: 10px;
}

.friends ul li .pp-div {
  position: relative;
}

.friends ul li .pp-div .medal-item {
}

.friends ul li .number {
  width: 60px;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eefaff;
  border-radius: 25px;
  color: #009ea2;
}

.friends ul li .number img {
  width: 26px;
}

.friends ul li .profile-picture {
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  text-align: center;
  margin-left: 6px;
  width: 33px;
  height: 33px;
  line-height: 33px;
  font-size: 13px;
}

.friends ul li .name-div .step-div {
  margin-left: 8px;
  font-weight: 700;
  color: #ff4e00;
  font-size: 11px;
}

.friends .remove-follower {
  position: absolute;
  right: 20px;
  font-size: 20px;
  color: #f00000;
}

.bg1 {
  background: #8930ff;
}

.bg2 {
  background: #ff8d00;
}

.bg3 {
  background: #00c0ff;
}

.bg4 {
  background: #ff1a5f;
}

.bg5 {
  background: #ffc400;
}

.bg6 {
  background: #00e97c;
}

.friends ul li .name {
  margin-left: 8px;
  font-weight: 500;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 175px;
  max-width: 100%;
}

.friends ul li .waiting-step {
  position: absolute;
  right: 10px;
  width: 105px;
  font-size: 11px;
  text-align: center;
  font-weight: 500;
  color: #ffb000;
  background-color: #ffffff;
  padding: 5px 3px;
  border-radius: 10px;
}

.friends ul li .completed-step {
  position: absolute;
  right: 15px;
  color: #009a53;
  font-size: 12px;
  font-weight: 700;
  background-color: #ffffff;
  padding: 5px 3px;
  border-radius: 10px;
}

.friends ul li .i-lig {
  color: #c9c9c9;
  font-size: 18px;
  position: absolute;
  right: 20px;
}

.friends ul li .list-unfollow-btn {
  color: #515151;
  position: absolute;
  right: 15px;
  border: 1px solid #cbcbcb;
  padding: 5px;
  border-radius: 15px;
  font-size: 12px;
  width: 65px;
  text-align: center;
  font-weight: 500;
}

.friends ul li .medal {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  right: 5px;
  margin-left: auto;
  margin-right: auto;
}

.league-page h2 {
  text-align: center;
  padding-top: 0;
  font-weight: 700;
  margin: 0;
  color: #ff9100;
  font-size: 16px;
}

.friends .league-date {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

.friends .league-date a {
  background-color: #b8b8b8;
  color: #ffffff;
  border-radius: 50px;
  width: 70px;
  text-align: center;
  font-weight: 500;
  font-size: 13px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-right: 10px;
}

.friends .league-date a:hover {
  color: #ffffff;
}

.friends .league-date .date-active {
  background-color: #009ea2;
}

.friends .league-date a:last-child {
  margin-right: 0;
}

.league-page h2 img {
  padding-right: 5px;
  width: 30px;
}

.bg-icon {
  position: fixed;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  display: none;
  min-height: 10em;
  width: 70%;
  top: 50%;
  transform: translate(0, -50%);
  color: #ffffff;
  font-weight: 500;
  opacity: 0.02;
  filter: invert(0%) sepia(0%) saturate(28%) hue-rotate(284deg) brightness(0)
    contrast(101%);
  z-index: 10;
  pointer-events: none;
}

.form-page .login-top-text {
  text-align: center;
  margin-bottom: 20px;
}

.form-page .login-top-text h2 {
  font-size: 22px;
  font-weight: 600;
}

.form-page .login-top-text h3 {
  font-size: 16px;
  margin-top: 5px;
  font-weight: 400;
}

form small {
  color: red;
}

.form-page .sm-login {
  text-align: center;
  padding: 15px 0;
  font-size: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}

.form-page .sm-login i {
  margin-right: 10px;
  font-size: 23px;
}

.form-page .sm-login.fb-login {
  background-color: #0062e8;
  padding: 13px 0;
  color: #ffffff;
}

.form-page .sm-login.g-login {
  background-color: #e94235;
  color: #ffffff;
}

.form-page .sm-login.adimpara-login {
  background-color: #009ea2;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-page .sm-login.adimpara-login img {
  margin-right: 5px;
  display: inline-block;
  width: 25px;
  filter: invert(100%) sepia(20%) saturate(2%) hue-rotate(252deg)
    brightness(111%) contrast(101%);
}

.form-page .sm-login.adimpara-login span {
  display: inline-block;
}

.invite-code-box {
  margin-bottom: 25px;
  text-align: center;
  padding: 6px;
  width: max-content;
  margin: 0 auto;
  margin-bottom: 20px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invite-code-box label {
  font-size: 18px;
  margin: 0;
  color: #ffffff;
  padding-bottom: 6px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 0;
}

.invite-code-box i {
  font-size: 30px;
  margin-right: 7px;
  color: #ffab00;
}

.invite-code-box .form-control {
  background-color: #ffab00;
  border: 1px solid;
  resize: none;
  border-radius: 0;
  padding: 5px 15px;
  border-color: #ffab00;
  font-size: 15px;
  text-align: center;
  margin: 0 auto;
  border-radius: 0;
  font-weight: 400;
  font-size: 18px;
  padding: 0;
  color: #ffffff;
  line-height: normal;
  height: 40px;
  padding: 6px 10px;
  box-shadow: none;
  border-radius: 10px;
}

.invite-code-box .form-control:focus {
  background-color: #ffffff;
  color: #000000;
  border-color: rgb(231, 231, 231);
}

.invite-code-box .form-control::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ffffff;
  font-weight: 600;
  opacity: 1;
  /* Firefox */
}

.invite-code-box .form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #ffffff;
}

.invite-code-box .form-control::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #ffffff;
}

.form-page .sm-login.apple-login {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}

.form-page .login-center-text {
  text-align: center;
  display: block;
  margin-bottom: 15px;
}

.login-contract {
  text-align: center;
  display: block;
  font-weight: 400;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.login-contract a {
  font-weight: 600;
  color: #009ea2 !important;
}

.form-page form .app-btn {
  margin-bottom: 20px;
}

.form-page.profile-page .form-control {
  color: #989898;
}

.form-page.profile-page2 .form-control {
  color: #000000;
}

.form-page.profile-page2 .form-control {
  resize: none;
}

.form-control {
  background-color: #eef2f3;
  border: 0;
  resize: none;
  border-radius: 15px;
  padding: 5px 15px;
  border: 1px solid #eef2f3;
  font-size: 15px;
}

.profile-page .profile-top {
  text-align: center;
}

.profile-page .profile-top .pp-area {
  position: relative;
  width: 140px;
  margin: 0 auto;
}

.profile-page .profile-top .pp-area .pp-div {
  position: relative;
  width: max-content;
  margin: 0 auto;
}

.profile-page .profile-top .pp-area .pp-div .medal-item {
  width: 50px;
  right: -15px;
  position: absolute;
  bottom: -5px;
  border-radius: 0;
  display: block;
  height: auto;
}

input[type="file"] {
  display: none;
}

.profile-page .profile-top .short-name {
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  font-size: 50px;
  width: 115px;
  height: 115px;
  line-height: 115px;
  padding: 0;
}

.profile-page .profile-top img {
  width: 115px;
  height: 115px;
  border-radius: 50%;
}

.profile-page .profile-top .add-pp {
  position: absolute;
  bottom: 0;
  font-size: 22px;
  background-color: #e6e6e6;
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding-left: 2px;
  font-weight: 700;
  color: #000000;
  right: 0;
  border-radius: 50%;
}

.profile-page .profile-picture-change-btn {
  text-align: center;
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #009ea2;
  padding: 10px 0;
}

.proifle-alerts-box {
  border-radius: 10px;
  padding: 6px 0;
  display: block;
  margin-top: 35px;
  text-align: center;
}

.proifle-alerts-box .delete-account-btn {
  margin-top: 10px;
  font-size: 14px;
}

.proifle-alerts {
  margin-top: 35px;
}

.proifle-alerts-box.profile-point {
  background-color: #ff4b4b;
  color: #ffffff;
}

.proifle-alerts-box.profile-coin-day {
  background-color: #ffffff;
  color: #000000;
  padding: 20px 10px;
  border-radius: 25px;
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
}

.proifle-alerts-box img {
  width: 20px;
}

.proifle-alerts-box span {
  font-weight: 500;
  font-size: 12px;
  padding-left: 7px;
}

.proifle-alerts-box span b {
  font-weight: 800;
  font-size: 14px;
}

.first-page-content {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
  height: 100vh;
}

.first-page-content .first-page-div {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  z-index: 9;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.first-page-content .first-page-div img {
  width: 140px;
}

.first-page-content .first-page-div .first-btn1 {
  text-align: center;
  font-size: 16px;
  background: #009ea2;
  color: #ffffff;
  padding: 7px 10px;
  display: block;
  width: 150px;
  margin: 20px auto;
  border-radius: 10px;
}

.first-page-content .first-page-div .first-btn2 {
  text-align: center;
  font-size: 16px;
  background: rgb(255 78 0);
  color: #ffffff;
  padding: 7px 10px;
  display: block;
  width: 150px;
  font-weight: 500;
  margin: 20px auto;
  border-radius: 10px;
}

.sum-step {
  text-align: center;
}

.sum-step .sum-step-text {
  font-size: 17px;
  font-weight: 400;
  display: block;
}

.sum-step .sum-step-number {
  margin: 5px 0;
}

.sum-step .sum-step-number span {
  font-size: 22px;
  display: inline-block;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 700;
  background-color: #000000;
  background: linear-gradient(0deg, #000000 0%, #4e4e4e 50%);
  margin: 0 2px;
}

.sum-step .sum-step-number .dot-step {
  background: transparent;
  color: #000000;
  padding: 0;
  margin: 0;
}

.app-tabs .nav-tabs {
  border-radius: 15px;
  margin-bottom: 15px;
  justify-content: center;
  padding-bottom: 1px;
  background-color: #ffffff;
  border: 2px solid #ffffff;
}

.app-tabs .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #ffffff;
  background-color: #ff4e00;
  border: 0;
  border-radius: 15px;
}

.stats-page .wrapper {
  margin-bottom: 20px;
}

.stats-page .tab-content {
  position: relative;
}

.color-info {
  display: flex;
  padding-bottom: 10px;
}

.color-info .info-div {
  display: flex;
  align-items: center;
  padding-right: 10px;
}

.color-info .color-area1 {
  width: 40px;
  height: 15px;
  display: inline-block;
  background-color: #009ea2;
}

.color-info .color-area2 {
  width: 40px;
  height: 15px;
  display: inline-block;
  background-color: #ff4e00;
}

.color-info .text-area {
  font-weight: 400;
  font-size: 13px;
  padding-left: 5px;
  display: inline-block;
}

.app-tabs .nav-item {
  font-size: 13.5px;
  font-weight: 500;
  max-height: 40px;
  width: 50%;
  text-align: center;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-drill .nav-drill-wrapper {
  z-index: 9;
}

.nav-drill .custom-switch {
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #0f6bd0;
  background-color: #0f6bd0;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #848484;
}

.custom-switch .custom-control-label::after {
  background-color: #848484;
}

.custom-control-label::before {
  border: #848484 solid 1px;
}

.nav-drill .custom-switch .switch-text {
  position: absolute;
  top: 2px;
}

.nav-top {
  position: relative;
}

.nav-drill {
  margin-top: 50px;
  transform: translateX(-100%);
}

.nav-is-toggled .nav-drill {
  transform: translateX(0);
}

.nav-is-toggled::after {
  opacity: 1;
  visibility: visible;
}

.nav-drill {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: #00bfc3;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: 0.3s;
  margin: 0;
  padding: 0px 15px;
  z-index: 1001;
  padding-top: 70px;
}

.nav-drill .nav-drill-top {
  text-align: center;
}

.nav-drill .nav-drill-top .pp-div {
  position: relative;
  width: max-content;
  margin: 0 auto;
}

.nav-drill .nav-drill-top .pp-div .medal-item {
  width: 50px;
  right: -15px;
  position: absolute;
  bottom: -10px;
  border-radius: 0;
  display: block;
}

.nav-drill .nav-drill-top .profile-picture-span {
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  position: relative;
  font-size: 40px;
  width: 90px;
  height: 90px;
  line-height: 90px;
}

.nav-drill .nav-drill-top img {
  width: 90px;
  border-radius: 50%;
  display: inline-block;
}

.nav-drill .nav-drill-top .name-user {
  display: block;
  margin-top: 10px;
  color: #ffffff;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 20px;
}

.nav-drill .nav-items {
  flex: 0 0 100%;
}

.nav-drill ul {
  padding: 0;
}

.nav-drill .nav-item {
  list-style-type: none;
}

.nav-drill .nav-item i {
  display: inline-block;
  margin-right: 5px;
}

.nav-drill .nav-link {
  display: block;
  color: #ffffff;
  font-size: 17px;
  font-weight: 300;
  padding: 13px 0;
}

.nav-drill .dark-mod {
  border-top: 1px solid #00cbd0;
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  padding: 13px 0;
  display: flex;
  align-items: flex-end;
}

.nav-drill .dark-mod img {
  width: 26px;
  padding-right: 5px;
}

body.nav-is-toggled {
  overflow: hidden;
}

.menu-overlay {
  top: 0;
  left: 0;
  width: 100vw;
  display: block;
  position: fixed;
  z-index: 999;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

.menu-overlay.active-menu-overlay {
  display: block;
}

.share-overlay {
  top: 0;
  left: 0;
  width: 100vw;
  display: block;
  position: fixed;
  z-index: 999;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  transition: opacity 0.15s linear;
}

.share-overlay.active-share-overlay {
  display: block;
}

.fade {
  transition: none;
}

.contact-page .contact-box {
  text-align: center;
}

.contact-page .contact-box .title-contact {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
}

.contact-page .contact-box .text-contact {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 10px;
}

.contact-page .contact-box span {
  display: block;
}

.contact-page .contact-box a {
  display: inline-block;
  width: auto;
}

.contact-page .contact-box i {
  color: #009ea2;
  margin-right: 6px;
  font-size: 26px;
}

.contact-page .contact-logo {
  width: 120px;
  margin: 0 auto;
  margin-bottom: 20px;
  display: block;
}

.contact-page .bg-icon {
  position: absolute;
  opacity: 0.03;
  pointer-events: none;
}

.contact-page hr {
  margin: 15px 0;
  border-color: #efefef;
}

.contact-page {
  position: relative;
  z-index: 9;
  text-align: center;
}

.info-app {
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  padding: 10px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
}

.info-app i {
  font-size: 35px;
  display: inline-block;
  color: #ffc800;
}

.info-app span {
  font-weight: 400;
  font-size: 15px;
  padding-left: 10px;
}

.modal-emoji-div {
  margin-top: -60px;
}

.app-modal1b .modal-emoji-div img {
  margin-bottom: 0;
  width: 70px;
}

.app-modal1b.rozet-modal3 .img-div {
  padding: 5px;
}

.app-modal1b.rozet-modal3 .modal-body {
  padding: 20px 10px;
}

.app-modal1b.rozet-modal3 .medals-div-inside {
  margin-bottom: 20px;
}

.app-modal1b.rozet-modal3 .title {
  margin-bottom: 15px;
  font-size: 16px;
}

.app-modal1b.rozet-modal2 .modal-emoji-div img {
  margin-bottom: 0;
  width: 100px;
}

.app-modal1b.rozet-modal2 .title {
  font-weight: 400;
  display: block;
  font-size: 17px;
  margin-top: 6px;
  margin-bottom: 15px;
}

.overlay-modal {
  z-index: 1;
}

.app-modal1 {
  text-align: center;
  color: #000000;
}

.app-modal1 .app-modal1-div {
  position: relative;
}

.app-modal1 .bg-icon {
  position: absolute;
  display: none;
  min-height: auto;
  opacity: 0.06;
  display: none;
}

.app-modal1 .bg-icon img {
  width: 80px;
  margin: 0 auto;
}

.app-modal1 .profil-bonus-modal .bg-icon img {
  width: 80px;
  margin: 0 auto;
}

.app-modal1 .modal-header {
  border: 0;
  padding: 0;
}

.app-modal1 .modal-content {
  border-radius: 10px;
  border: 0;
}

.app-modal1 .modal-header .close {
  position: absolute;
  right: 10px;
  font-size: 25px;
  top: -31px;
  color: #ffffff;
  opacity: 1;
}

.app-modal1 .modal-t1 {
  color: #ff4e00;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 5px;
  display: block;
}

.app-modal1 .modal-t3 {
  color: #000000;
  font-size: 16px;
  display: block;
  margin-bottom: 10px;
}

.app-modal1 .day-happy-modal1 .modal-emoji-div {
  margin-bottom: 10px;
}

.app-modal1 .day-happy-modal1 .modal-t3 {
  font-size: 15px;
}

.app-modal1 .day-happy-modal1 .app-btn {
  max-width: max-content;
  width: auto;
  margin-top: 15px;
}

.app-modal1 .day-happy-modal1 .app-btn i {
  margin-right: 0;
  margin-left: 5px;
}

.app-modal1 .modal-t4 {
  display: flex;
  color: #000000;
  margin-bottom: 10px;
  font-weight: 500;
  align-items: center;
  font-size: 15px;
  justify-content: center;
}

.app-modal1 .modal-t4 i {
  font-size: 18px;
  color: #009ea2;
  background-color: #eaeaea;
  width: 35px;
  text-align: center;
  margin-left: 8px;
  height: 35px;
  line-height: 35px;
  padding: 0;
  display: inline-block;
}

.app-modal1 .modal-t6 {
  display: flex;
  align-items: center;
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 18px;
  justify-content: center;
}

.app-modal1 .modal-t6 img {
  margin-left: 5px;
  width: 25px;
}

.app-modal1 .modal-t7 {
  margin-bottom: 10px;
  display: block;
  font-weight: 500;
  color: #848484;
  font-size: 15px;
}

.app-modal1 .modal-t5 {
  font-size: 14px;
  display: block;
  color: #494949;
  margin-bottom: 15px;
}

.app-modal1 .modal-btn {
  margin-top: 20px;
}

.app-modal1 .modal-t2 {
  color: #009a53;
  font-size: 18px;
  display: block;
}

.app-modal1 .modal-t2 {
  color: #009a53;
  font-size: 16px;
  display: block;
}

.app-modal1 .modal-price {
  font-size: 16px;
  font-weight: 900;
  color: #009a53;
  display: inline-flex;
  align-items: center;
  margin-bottom: 5px;
}

.app-modal1.rozet-modal .close-modal-btn-top {
  top: 30px;
}

.app-modal1.rozet-modal .modal-emoji-div img {
  width: 130px;
}

.app-modal1.rozet-modal .modal-price .money {
  margin-left: 0;
}

.app-modal1 .modal-price .money {
  margin-left: 5px;
}

.app-modal2-div {
  text-align: left;
}

.app-modal2-div .app-btn {
  display: block;
  width: 150px;
}

.app-modal2-div p {
  margin-bottom: 15px;
}

.app-modal2-div input {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 15px;
  display: block;
}

.app-modal3-div .profile-picture-span {
  line-height: 100px;
  background: #009ea2;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  position: relative;
  width: 100px;
  font-size: 40px;
  height: 100px;
  margin-bottom: 10px;
}

.app-modal3-div img {
  width: 100px;
  display: inline-block;
}

.app-modal3-div .name-user {
  display: block;
  color: #000000;
  font-weight: 500;
  font-size: 18px;
}

.app-modal3-div ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 18px;
}

.app-modal3-div .modal-follow-btn {
  color: #ffffff;
  background: #009ea2;
  border-radius: 15px;
  padding: 5px 10px;
  display: inline-block;
  font-size: 16px;
  margin-top: 8px;
  font-weight: 500;
}

.app-modal3-div .modal-follow-btn i {
  padding-right: 4px;
}

.app-modal3-div ul li {
  margin: 0 3px;
  width: 33.3%;
  padding: 10px 4px;
  background-color: rgba(239 239 239 / 60%);
  border-radius: 5px;
}

.app-modal3-div ul li .lig-modal-h {
  display: block;
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 2px;
  height: 60px;
}

.app-modal3-div ul li .lig-modal-data {
  display: block;
  font-weight: 600;
  font-size: 20px;
  color: #ff4e00;
}

.app-modal4-div p {
  font-size: 15px;
  text-align: center;
  margin: 0;
  margin-bottom: 10px;
  padding-top: 0;
}

.invitation-modal-btn {
  width: 200px;
  font-weight: 500;
  background-color: #009ea2;
  color: #ffffff !important;
}

.invitation-modal-btn i {
  color: #ffc903;
  font-size: 15px;
  margin: 0;
  margin-left: 2px;
}

.invitation-modal-div label {
  text-align: left;
  width: 80%;
}

.invitation-modal-div input {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 15px;
  display: block;
}

.share-div-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #ffffff;
  padding: 30px 10px;
  display: none;
  justify-content: space-between;
}

.share-div-bottom a {
  display: inline-block;
  text-align: center;
  width: 70px;
}

.share-div-bottom a i {
  display: block;
  margin: 0 auto;
  font-size: 50px;
}

.share-div-bottom a i.whatsapp {
  color: #15bf00;
}

.share-div-bottom a i.facebook {
  color: #3338d0;
}

.share-div-bottom a i.twitter {
  color: #1da1f2;
}

.share-div-bottom a i.mail {
  color: #ffb100;
}

.share-div-bottom a span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  padding-top: 3px;
}

.share-active {
  display: flex;
}

.faq-page .accordion {
  width: 100%;
  max-width: 360px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

.faq-page .accordion .link {
  display: block;
  padding: 10px 15px;
  font-size: 14px;
  position: relative;
  background-color: #009ea2;
  border-radius: 15px;
  margin-bottom: 15px;
  color: #ffffff;
}

.faq-page .accordion .link p {
  width: 90%;
  font-weight: 400;
  margin: 0;
}

.faq-page .accordion li:last-child .link {
  border-bottom: 0;
}

.faq-page .accordion li i {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 18px;
}

.faq-page .accordion li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 16px;
}

.faq-page .accordion li.open i {
  color: #ffffff;
}

.faq-page .accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.faq-page .submenu {
  display: none;
  font-size: 14px;
  list-style-type: none;
  margin: 0;
  padding: 10px;
  padding-top: 0;
}

.faq-page .submenu a {
  font-weight: 500;
  color: #007bff;
  text-decoration: revert;
}

.invite-box {
  height: 58px;
  display: flex;
  background-color: #ffffff;
  border: 1px solid #ececec;
  align-items: center;
  justify-content: center;
}

.invite-box .code-div {
  padding-right: 10px;
}

.invite-box .code-div label {
  display: block;
  padding: 0;
  margin: 0;
  text-align: left;
}

.invite-box .invite-code {
  font-size: 20px;
  font-weight: 300;
}

.invite-box .invite-icon {
  font-size: 18px;
  color: #009ea2;
  background-color: #eaeaea;
  width: 35px;
  margin-left: 12px;
  height: 35px;
  line-height: 35px;
  display: inline-block;
}

.invite-box .invite-icon img {
  width: 18px;
  padding: 0;
  display: inline-block;
  margin-top: -3px;
}

.introjs-tooltipReferenceLayer * {
  font-family: "Roboto" !important;
}

.introjs-helperLayer {
  box-shadow: rgb(33 33 33 / 0) 0px 0px 1px 2px,
    rgb(33 33 33 / 65%) 0px 0px 0px 5000px !important;
}

.introjs-tooltipbuttons {
  border-top: 0 !important;
}

.introjs-button {
  background-color: #009ea2 !important;
  color: #ffffff !important;
  border: 0 !important;
  text-shadow: none !important;
}

.introjs-tooltiptext {
  padding: 10px !important;
  font-size: 15px;
}

.introjs-bullets {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.introjs-button:focus {
  box-shadow: none !important;
}

.introjs-skipbutton {
  color: #000000 !important;
  font-size: 28px !important;
  padding: 0 !important;
}

.introjs-tooltip-title {
  background-color: #009ea2 !important;
  width: 35px !important;
  height: 35px !important;
  text-align: center !important;
  line-height: 35px !important;
  color: #ffffff !important;
  border-radius: 50% !important;
}

.introjs-tooltip-header {
  padding-left: 10px !important;
  padding-right: 15px !important;
  padding-top: 15px !important;
}

.brands-follow-page .brands-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  margin-bottom: 15px;
  position: relative;
}

.brands-follow-page .brands-box img {
  width: 70px;
  border-radius: 10px;
}

.brands-follow-page .brands-box .notification-product {
  display: inline-block;
  background-color: #ffffff;
  padding: 8px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  border-radius: 10px;
  width: 36px;
  text-align: center;
  color: #009ea2;
  right: 10px;
}

.content-body .content {
  padding: 15px;
}

.content-body .logo-div span {
  font-size: 17px;
  width: 250px;
  display: inline-block;
}

.helpvideo-div p {
  text-align: center;
  margin-top: 35px;
  margin-bottom: 20px;
  font-size: 18px;
}

.helpvideo-div .app-btn {
  margin-bottom: 15px;
  width: 170px;
}

.helpvideo-div img {
  width: 100%;
  margin: 0 auto;
  display: block;
  border-radius: 40px;
  padding: 3px;
}

.iphone-x {
  position: relative;
  margin: 35px auto;
  width: 80%;
  border-radius: 40px;
  box-shadow: 0px 0px 0px 5px #b2b2b2, 0px 0px 0px 5px #b2b2b2,
    0px 0px 0px 5px #b2b2b2;
}

.iphone-x:before,
.iphone-x:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.iphone-x:after {
  bottom: 7px;
  width: 140px;
  height: 4px;
  border-radius: 10px;
}

.iphone-x:before {
  top: 0px;
  width: 56%;
  height: 30px;
  background-color: #b2b2b2;
  border-radius: 0px 0px 40px 40px;
}

.adres-page .adres-btn {
  width: 200px;
  margin-top: 20px;
}

.adres-list .card {
  margin: 0;
  list-style-type: none;
  text-align: left;
  padding: 0;
}

.adres-list .card {
  background-color: #efefef;
  border-radius: 5px;
  padding: 5px 10px;
  margin-bottom: 15px;
  position: relative;
}

.adres-list .card span {
  display: block;
  padding: 2px 0;
  font-size: 14px;
}

.adres-list .adres-name {
  font-weight: 600;
}

.adres-list .card .adres-trash {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  background-color: #eef2f3;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-align: center !important;
  font-size: 16px;
  width: 35px;
  color: #000000;
  padding: 0;
  height: 35px;
}

.adres-list .card .adres-edit span {
  padding: 0;
  display: inline-block;
}

.adres-list .card .adres-edit {
  position: absolute;
  right: 45px;
  bottom: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  background-color: #eef2f3;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  font-size: 16px;
  text-align: -webkit-center;
  text-align: center;
  width: 35px;
  padding: 0;
  height: 35px;
}

.adres-list .card .adres-edit i {
  color: #000000;
}

.adres-list .accordion .card.active-adres .card-body {
  padding: 15px 0;
  background-color: #ffffff;
  color: #000000;
  padding: 10px;
  margin-top: 10px;
}

.adres-list .accordion .card.active-adres {
  background-color: #00c76a;
  color: #ffffff;
}

.adres-list .accordion .card.active-adres::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  font-weight: 900;
  left: 3px;
  width: 20px;
  line-height: 20px;
  margin-top: 13px;
  height: 20px;
  text-align: center;
  font-size: 12px;
  border-radius: 25px;
  top: 0;
  background-color: #00c76a;
  color: #ffffff;
}

.adres-list .accordion .card.active-adres button {
  background-color: #ffffff;
}

.adres-list .accordion .card.active-adres .adres-name {
  padding-left: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 19px;
  max-width: 190px;
}

.adres-list .accordion .card.active-adres .adres-city {
  padding-left: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 19px;
  max-width: 190px;
}

.adres-list .accordion .adres-name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 19px;
  max-width: 190px;
}

.adres-list .accordion .adres-city {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 19px;
  max-width: 190px;
}

.app-modal4-div .adres-list .accordion {
  max-height: 350px;
  margin-bottom: 10px;
  margin-top: 10px;
  overflow-y: auto;
}

.app-modal4-div .adres-list .accordion.accordion-height-change {
  height: auto;
}

.alert-modal1.x10-adimpara-modal img {
  margin-bottom: 0;
  width: 70px;
  background-color: #defeff;
  border-radius: 50%;
  padding: 10px;
}

.alert-modal1.x10-adimpara-modal .modal-t3 {
  font-size: 16px;
}

.alert-modal1.x10-adimpara-modal .modal-t3 b {
  font-size: 16px;
}

.alert-modal1.x10-adimpara-modal .modal-t4 {
  color: #ff4e00;
  font-size: 17px;
}

.alert-modal1 .modal-t3 {
  font-size: 15px;
}

.alert-modal1 .modal-t3 a {
  color: #009ea2 !important;
  font-weight: 500;
}

.app-modal1b .alert-modal1 .modal-emoji-div {
  margin-bottom: 10px;
}

.adres-list .accordion {
  text-align: left !important;
}

.adres-list .accordion .card.add-adres {
  text-align: center;
  background-color: #ffffff;
}

.adres-list .accordion .card.add-adres button {
  width: 100%;
  text-align: center;
  background: #ffffff;
  height: 100%;
}

.adres-list .accordion .card.add-adres i {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 19px;
  background-color: #ededed;
  padding: 0px 12px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
}

.adres-list .accordion .card {
  background-color: #ffffff;
  border: 1px solid #ededed;
  border-radius: 10px;
  padding: 5px 10px;
  margin-bottom: 15px;
  position: relative;
  box-shadow: 0px 0px 8px 0px rgb(235 235 235);
}

.adres-list .accordion .card button {
  border: 0;
}

.adres-list .accordion .card .card-body {
  padding: 10px;
  margin-top: 10px;
  text-align: left;
}

.adres-list .accordion .card .card-top {
  position: relative;
}

.big-info-modal b {
  margin-bottom: 10px;
  display: block;
}

.big-info-modal .change-step-btn {
  width: 200px;
  background-color: #e40000;
}

.big-info-modal .change-step-btn:active {
  background-color: #e40000 !important;
}

.big-info-modal .energy-full-btn:active {
  background-color: #04ab5f !important;
}

.big-info-modal .energy-full-btn {
  width: 200px;
  background-color: #04ab5f;
}

.sms-modal .countdown {
  color: #019fa3;
  font-size: 15px;
  font-weight: 600;
}

.sms-modal .countdown-div {
  display: flex;
  align-items: center;
}

.sms-modal .countdown-div .countdown-text {
  padding-right: 5px;
}

.sms-modal .ref-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.sms-modal .ref-div p {
  margin: 0;
}

.search {
  width: 100%;
  position: relative;
  display: flex;
  margin-bottom: 25px;
}

.searchTerm {
  width: 100%;
  height: 40px;
  border-radius: 25px;
  outline: none;
  color: #212529;
  -webkit-appearance: none;
  background-color: #ffffff;
  resize: none;
  padding: 5px 15px;
  border: 0;
  font-size: 15px;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
}

.searchButton {
  width: 40px;
  height: 40px;
  background: transparent;
  text-align: center;
  border: 0;
  color: #b3b3b3;
  border-radius: 0px 10px 10px 0px;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 15px;
}

.searchClose {
  width: 40px;
  height: 40px;
  background: transparent;
  text-align: center;
  border: 0;
  color: #b3b3b3;
  border-radius: 0px 10px 10px 0px;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 15px;
}

.stats-page .social-nav .nav-tabs .nav-item.show .nav-link,
.stats-page .nav-tabs .nav-link.active {
  color: #000000 !important;
  background: rgb(255 255 255) !important;
}

.stats-page .app-tabs .nav-tabs {
  margin-top: 15px;
}

.social-nav .nav-tabs .nav-item.show .nav-link,
.social-nav .nav-tabs .nav-link.active {
  color: #ffffff;
  background: rgb(255 78 0);
  border: 0;
  border-radius: 15px;
}

.social-nav .nav-item {
  font-size: 13px;
  position: relative;
  width: 33.3%;
  height: 30px;
  padding: 0 7px;
}

.lig-nav .nav-item span,
.social-nav .nav-item span {
  position: absolute;
  background: #ff5216;
  font-size: 10px;
  color: #ffffff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-weight: 700;
  top: -9px;
  right: 10px;
}

.social-nav .nav-tabs {
  background-color: #ffffff;
  border: 2px solid #ffffff;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
  flex-wrap: nowrap;
}

.activity-tab .app-btn {
  margin-top: 30px;
  margin-bottom: 30px;
}

.activty-ul {
  padding: 0;
  margin: 0;
}

.activty-ul a {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.activty-ul li {
  list-style-type: none;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 5px 10px;
  position: relative;
  margin-bottom: 20px;
  display: flex;
  z-index: 9;
  height: 65px;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
  align-items: center;
}

.activty-ul li .location-activity {
  font-weight: 400;
  padding-bottom: 5px;
  color: #5c5c5c;
  display: block;
}

.activty-ul li .location-activity i {
  padding-right: 4px;
}

.activty-ul li .h-activity {
  font-weight: 500;
  display: -webkit-inline-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  width: 175px;
}

.activty-ul li .h-activity.start-activity {
  color: #06ab5f;
}

.follow-request .activty-ul li .h-activity {
  display: block;
  margin-bottom: 8px;
}

.follow-request .activty-ul li {
  height: 100px;
}

.activty-ul li .date-activity-div {
  text-align: right;
  width: 135px;
  display: flex;
  align-items: center;
}

.activty-ul li .date-activity {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.activty-ul li i {
  color: #ff4e00;
  padding-right: 8px;
  font-size: 16px;
}

.activty-ul li .date-activity img {
  width: 25px;
}

.social-page .search-bar-open-div .search-list-item {
  margin-bottom: 15px;
}

.social-page .search-bar-open-div .search-list-item .friends ul {
  margin: 0;
}

.social-page .search-bar-open-div .search-list-item .friends ul li {
  margin: 0;
}

.social-page .follow-request {
  border-bottom: 1px solid #e1e1e1;
  margin-bottom: 1rem;
}

.social-page .follow-request-line-none {
  border: 0;
}

.social-page .follow-request .users-piece {
  margin-bottom: 15px;
  display: block;
  margin-top: 25px;
  font-weight: 500;
  font-size: 12px;
}

.social-page .follow-request .accept-follower {
  background-color: #009ea2;
  color: #ffffff;
  padding: 5px;
  border-radius: 15px;
  font-size: 12px;
  width: 65px;
  font-weight: 500;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}

.social-page .follow-request .delete-follower {
  background-color: #909090;
  color: #ffffff;
  padding: 5px;
  border-radius: 15px;
  font-weight: 500;
  width: 45px;
  font-size: 12px;
  display: inline-block;
  text-align: center;
}

.social-page .friends ul.follow-request li .name {
  width: 130px;
}

.social-page .follow-request .request-select {
  position: absolute;
  right: 15px;
}

.social-page.league-page .friends {
  height: auto;
  overflow: auto;
  padding-bottom: 0;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.social-page.league-page .friends::-webkit-scrollbar {
  display: none;
}

.social-page.league-page .friends ul {
  height: auto;
  overflow: hidden;
  padding: 0;
  padding-bottom: 200px;
}

.activty-detail h2 {
  font-size: 17px;
  font-weight: 500;
  padding-bottom: 8px;
  margin: 0;
  text-align: center;
}

.activty-detail p {
  font-size: 16px;
  font-weight: 300;
  padding-bottom: 5px;
  margin: 0;
  text-align: center;
}

.activty-detail .activty-detail-span {
  display: block;
  margin-bottom: 2px;
  margin-top: 15px;
  color: #009ea2;
  font-weight: 500;
  font-size: 14px;
}

.activty-detail .date-div {
  width: 200px;
  margin: 0 auto;
  margin-bottom: 25px;
}

.activty-detail .date {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  padding-top: 5px;
}

.activty-detail .add-calendar-activty {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 15px;
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
  background: #b4b4b4;
  border-radius: 15px;
  padding: 8px 10px;
  width: 150px;
}

.activty-detail .add-calendar-activty i {
  margin-right: 5px;
  font-size: 18px;
}

.activty-detail .date i {
  color: #ff4e00;
  padding-right: 6px;
  font-size: 20px;
}

.activty-detail .clock {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  padding-top: 20px;
}

.activty-detail .clock i {
  color: #ff4e00;
  padding-right: 8px;
  font-size: 28px;
}

.activty-detail .creative-activty-user {
  font-size: 14px;
  margin-top: 15px;
  display: block;
}

.activty-detail .creative-activty-user b {
  font-weight: 500;
}

.activty-detail .users {
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 20px;
  margin: 0;
  display: block;
  margin-top: 10px;
}

.activty-detail .activity-date-live {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  display: block;
  margin-top: 10px;
  text-align: right;
}

.activty-detail .users b {
  font-weight: 500;
}

.new-profile-page .profile-chart {
  margin-top: 35px;
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
  background-color: #ffffff;
  padding: 20px 10px;
  border-radius: 25px;
}

.new-profile-page .profile-header-wrap .profile-code {
  font-size: 14px;
  font-weight: 500;
  display: block;
  text-align: center;
  margin-bottom: 13px;
}

.new-profile-page .profile-header-wrap .profile-code b {
  margin-left: 5px;
  background-color: #ffca22;
  padding: 3px 8px;
  border-radius: 10px;
}

.new-profile-page .profile-follow-accept-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  background-color: white;
  padding: 10px 15px;
  border-radius: 25px;
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
}

.new-profile-page .profile-follow-accept-btn .followers-name-div {
  width: 50%;
  font-size: 13px;
  font-weight: 600;
}

.new-profile-page .profile-follow-accept-btn .followers-name-div .text-btn {
  font-weight: 400;
}

.new-profile-page .profile-follow-accept-btn .btn-div {
  width: 50%;
  text-align: right;
  font-size: 13px;
}

.new-profile-page .profile-follow-accept-btn .btn-div .accept-btn-profile {
  background-color: #009ea2;
  color: #ffffff;
  padding: 5px;
  border-radius: 15px;
  font-weight: 500;
  font-size: 13px;
  width: 65px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}

.new-profile-page .profile-follow-accept-btn .btn-div .reject-btn-profile {
  background-color: #b4b4b4;
  color: #ffffff;
  padding: 5px;
  font-weight: 500;
  border-radius: 15px;
  width: 45px;
  font-size: 13px;
  display: inline-block;
  text-align: center;
}

.new-profile-page .profile-name {
  font-weight: 500;
  margin-top: 8px;
  font-size: 17px;
}

.new-profile-page .profile-header {
  display: block;
  margin: 0 auto;
  margin-bottom: 15px;
  max-width: 100%;
}

.new-profile-page .profile-header .pp-div {
  position: relative;
  width: max-content;
  margin: 0 auto;
}

.new-profile-page .profile-header .pp-div .medal-item {
  width: 65px;
  right: -15px;
  position: absolute;
  bottom: -10px;
}

.new-profile-page .profile-header-wrap .follow-btn {
  color: #ffffff;
  background: #009ea2;
  border-radius: 25px;
  padding: 5px 10px;
  font-size: 14px;
  width: 165px;
  font-weight: 500;
  text-align: center;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  height: 36px;
}

.new-profile-page .profile-header-wrap .share-btn {
  color: #ffffff;
  background: #ffffff;
  border-radius: 25px;
  font-size: 14px;
  text-align: center;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  max-width: 100%;
  height: 36px;
  box-shadow: 0px 0px 4px 3px rgb(235 235 235);
}

.new-profile-page .profile-header-wrap .challenge-btn {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  color: #20acb0;
  font-weight: 500;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  max-width: 100%;
  margin: 0 5px;
  box-shadow: 0px 0px 4px 3px rgb(235 235 235);
}

.new-profile-page .profile-header-wrap .challenge-btn.waiting {
  background-color: #ffbf00;
  color: #000000;
  border: 1px solid #ffbf00;
}

.new-profile-page .profile-header-wrap .challenge-btn.reject {
  background-color: #e42727;
  color: #ffffff;
  border: #e42727;
}

.new-profile-page .profile-header-wrap .challenge-btn.started {
  background-color: #14c257;
  color: #ffffff;
  border: #14c257;
}

.new-profile-page .profile-header-wrap .challenge-btn.lock {
  background-color: #cbcbcb;
  color: #ffffff;
  border: #cbcbcb;
}

.new-profile-page .profile-header-wrap .challenge-btn img {
  fill: #20acb0;
  width: 24px;
}

.new-profile-page .profile-header-wrap .share-btn img {
  width: 22px;
}

.new-profile-page .profile-header-wrap .edit-btn {
  color: #ffffff;
  background: rgb(0 158 162);
}

.new-profile-page .profile-header-wrap .unfollow-btn {
  color: #ffffff;
  background: #b4b4b4;
}

.new-profile-page .profile-header-wrap .waiting-btn {
  color: #ffffff;
  background: #ffbf00;
  border-radius: 25px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  width: 150px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  height: 33px;
}

.new-profile-page .profile-header .profile-picture {
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  text-align: center;
  width: 130px;
  height: 130px;
  font-size: 50px;
  align-items: center;
  justify-content: center;
}

.new-profile-page .profile-header .followers-info-div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.new-profile-page .profile-header .my-followers {
  text-align: center;
  margin-right: 35px;
}

.new-profile-page .profile-header .my-followers:last-child {
  margin-right: 0px;
}

.new-profile-page .profile-header .my-followers .span1 {
  display: block;
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 2px;
}

.new-profile-page .profile-header .my-followers .span2 {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: #535353;
}

.new-profile-page .profile-header .edit-btn i {
  padding-right: 2px;
}

.new-profile-page .profile-step {
  margin-top: 30px;
  display: flex;
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
  background-color: #ffffff;
  padding: 10px 5px;
  border-radius: 25px;
}

.new-profile-page .medals-div {
  margin-top: 35px;
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
  background-color: #ffffff;
  padding: 20px 5px;
  border-radius: 25px;
}

.medals-div .title {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #009ea2;
  margin-bottom: 5px;
}

.medals-div .box {
  width: 33.3%;
  text-align: center;
  padding: 10px;
  position: relative;
}

.medals-div .box .img-div {
  position: relative;
}

.medal-page .medals-div .medals-div-inside .img-div {
  padding: 10px;
}

.medal-page .medals-div .medals-div-inside .img-div a {
  padding: 10px;
}

.medals-div .medals-div-inside {
  display: flex;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
}

.new-profile-page .medals-div .medals-div-inside {
  margin-bottom: 10px;
}

.medals-div .img-div img {
  width: 90px;
}

.medals-div .img-div b {
  position: absolute;
  right: 0;
  bottom: 15px;
  background: #ff5216;
  color: #ffffff;
  font-weight: revert;
  border-radius: 25px;
  font-size: 14px;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 2px;
  left: 0;
  width: max-content;
}

.medals-div .img-div.lock-item img {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.medals-div .img-div.lock-item a {
  background-color: #c0c0c0;
}

.medals-div .box span {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-top: 6px;
}

.medals-div .box span b {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #009ea2;
}

.new-profile-page .user-link {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 17px;
  justify-content: center;
  margin-top: 10px;
}

.new-profile-page .user-link i {
  font-size: 22px;
  color: #009ea2;
  margin-left: 7px;
}

.new-profile-page .profile-hidden {
  text-align: center;
  color: #4a4a4a;
  margin-top: 25px;
}

.new-profile-page .profile-hidden i {
  display: block;
  font-size: 40px;
  margin-bottom: 8px;
}

.new-profile-page .profile-hidden .span1 {
  display: block;
  font-size: 17px;
  margin-bottom: 5px;
  font-weight: 500;
}

.new-profile-page .profile-hidden .span2 {
  display: block;
  font-size: 15px;
}

.new-profile-page .profile-step .profile-step-box {
  list-style-type: none;
  position: relative;
  z-index: 9;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  width: 33.3%;
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
}

.new-profile-page .profile-step .profile-step-box .span1 {
  display: block;
}

.new-profile-page .profile-step .profile-step-box .span1 {
  display: block;
  font-weight: 500;
  font-size: 13px;
  margin-top: 4px;
  text-align: l;
}

.new-profile-page .profile-step .profile-step-box .span2 {
  display: block;
  font-weight: 600;
  font-size: 20px;
  color: #ff4e00;
}

.lig-nav .nav-tabs .nav-item.show .nav-link,
.lig-nav .nav-tabs .nav-link.active {
  color: #ffffff;
  background: rgb(255 78 0);
  border: 0;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lig-nav .nav-tabs {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
  border: 2px solid #ffffff;
}

.lig-nav .nav-tabs {
  margin-top: 0;
  flex-wrap: nowrap;
}

.lig-nav .league-arrows-bottom {
  margin-left: 5px;
}

.lig-nav .target-svg {
  width: 16px;
  margin-left: 5px;
}

.lig-nav .nav-item {
  font-size: 13px;
  padding: 7px 0;
  position: relative;
  width: 50%;
}

.remove-followers-modal .alert-followers {
  font-size: 16px;
  text-align: center;
  margin: 0;
  padding-bottom: 10px;
  display: block;
}

.remove-followers-modal .remove-followers {
  display: block;
  width: max-content;
  background: #ff0000;
  margin-bottom: 10px;
  max-width: 100%;
}

.remove-followers-modal .protect-followers {
  display: block;
  width: max-content;
  max-width: 100%;
}

.form-page .add-user-activty {
  color: #ffffff;
  background: rgb(255 78 0);
  border-radius: 15px;
  font-size: 14px;
  padding: 7px 17px;
  font-weight: 500;
  display: inline-block;
  box-shadow: none;
  margin-bottom: 1rem;
  border: 0;
}

.form-page .friends {
  max-height: 280px;
  margin-bottom: 10px;
  overflow-y: auto;
}

.add-activty-modal .friends {
  max-height: 270px;
  margin-top: 20px;
  margin-bottom: 10px;
  overflow-y: auto;
}

.modal-add-adres-btn {
  padding: 7px 15px;
  margin-bottom: 5px;
  margin-top: 5px;
  color: #000000;
  border-radius: 5px;
  display: inline-block;
  font-size: 14px;
  background-color: #eef2f3;
  font-weight: 500;
  border-radius: 25px;
}

.add-activty-modal .friends label {
  display: block;
}

.add-activty-modal .friends .form-check-inline {
  margin: 0;
}

.app-modal1 .close-btn {
  background: #909090;
  color: #ffffff;
}

.app-modal1 .modal-footer {
  border: 0;
  padding-top: 0;
}

.activty-detail .friends {
  max-height: 280px;
  margin-bottom: 10px;
  position: relative;
  overflow-y: auto;
}

.activty-detail.activty-detail-end .friends {
  margin-top: 15px;
}

.activty-detail .step-count {
  position: absolute;
  right: 32px;
  font-weight: 600;
  color: #ff4e00;
  padding-bottom: 2px;
  font-size: 14px;
}

.activty-detail.activty-detail-end .users {
  padding-bottom: 0px;
}

.friends .users-piece {
  margin-bottom: 15px;
  display: block;
  margin-top: 0;
  font-weight: 500;
  font-size: 12px;
}

.new-profile-page .profile-header-wrap .profile-buttons-div {
  display: flex;
  justify-content: center;
  padding: 5px;
  width: 100%;
}

.league-number-modal p {
  padding: 0;
}

.follow-btn-friends {
  color: #ffffff;
  background: #009ea2;
  width: 33px;
  height: 33px;
  text-align: center;
  position: absolute;
  right: 20px;
  border-radius: 50%;
  line-height: 31px;
}

.follow-btn-friends img {
  width: 15px;
}

.send-btn-friends {
  color: #ffffff;
  background: #ffbf00;
  width: 33px;
  height: 33px;
  text-align: center;
  position: absolute;
  right: 20px;
  border-radius: 50%;
  line-height: 31px;
}

.send-btn-friends img {
  width: 15px;
}

.follow-btn-friends i {
  font-size: 20px;
  color: #b9b9b9;
}

.unfollow-btn-friends {
  color: #ffffff;
  background: #00c78c;
  width: 33px;
  height: 33px;
  text-align: center;
  position: absolute;
  right: 20px;
  border-radius: 50%;
  line-height: 31px;
}

.lock-btn-friends {
  color: #ffffff;
  background: #cbcbcb;
  width: 33px;
  height: 33px;
  text-align: center;
  position: absolute;
  right: 20px;
  border-radius: 50%;
  line-height: 31px;
}

.lock-btn-friends img {
  width: 15px;
}

.unfollow-btn-friends img {
  width: 15px;
}

.league-page .challenge-league {
  height: 100vh;
  overflow: auto;
  padding-bottom: 350px;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.league-page .challenge-league::-webkit-scrollbar {
  display: none;
}

.league-page .challenge-league .challenge-text span {
  font-size: 16px;
  text-align: center;
  display: block;
  margin-bottom: 15px;
  margin-top: 30px;
}

.league-page .challenge-league .challenge-request {
  height: auto !important;
  padding: 0 !important;
}

.league-page .challenge-league .title-challenge1 {
  margin-bottom: 15px;
  display: block;
  margin-top: 15px;
  font-weight: 500;
  text-align: center;
  font-size: 14px;
}

.league-page .challenge-league .users-piece {
  margin-bottom: 15px;
  display: block;
  margin-top: 15px;
  font-weight: 500;
  font-size: 12px;
}

.league-page .friends.continue-challenge ul {
  height: auto;
  padding-bottom: 0;
}

.continue-challenge ul li .step-div {
  position: absolute;
  right: 20px;
  top: 18px;
  font-size: 13px;
}

.challenge-end-page .friends ul li .name {
  width: 135px;
}

.challenge-end-page .card-body {
  padding: 0;
}

.challenge-end-page .continue-challenge:first-child .users-piece {
  margin: 5px 0;
  margin-top: 20px;
}

.challenge-end-page .continue-challenge li {
  padding: 5px;
  margin: 10px 0;
  background-color: #ffffff;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
}

.challenge-end-page .continue-challenge {
  background-color: transparent;
  border-bottom: 1px solid #dbdbdb;
  border-radius: 0;
  padding: 0 5px;
}

.challenge-end-page .continue-challenge ul {
  padding-bottom: 10px;
}

.challenge-end-page .continue-challenge:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

.challenge-end-page .continue-challenge:last-child {
  border: 0;
}

.challenge-end-page .continue-challenge .end {
  background-color: #96e9cb;
}

.challenge-end-page .users-piece {
  margin: 10px 0;
  display: block;
}

.end-challenge .winner {
  background-color: #96e9cb;
}

.league-page .friends .end-challenge ul:first-child {
  padding-top: 0;
}

.friends .end-challenge-out {
  margin-top: 30px;
}

.league-page .friends .end-challenge ul {
  height: auto;
  padding: 20px 0;
  border-bottom: 1px solid #d2d2d2;
}

.league-page .friends .end-challenge ul li:last-child {
  margin-bottom: 0;
}

.continue-challenge {
  background-color: #96e9cb;
  border-radius: 25px;
  margin-bottom: 20px;
}

.continue-challenge ul li {
  box-shadow: none;
  margin: 10px;
}

.league-page .challenge-league .challenge-request .request-select {
  position: absolute;
  right: 15px;
}

.league-page .challenge-league .challenge-request .accept-follower {
  background-color: #009ea2;
  color: #ffffff;
  padding: 5px;
  border-radius: 15px;
  font-size: 12px;
  width: 65px;
  font-weight: 500;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}

.league-page .challenge-league .challenge-request .delete-follower {
  background-color: #909090;
  color: #ffffff;
  padding: 5px;
  border-radius: 15px;
  font-weight: 500;
  width: 65px;
  font-size: 12px;
  display: inline-block;
  text-align: center;
}

.league-page .step-count {
  position: absolute;
  right: 75px;
  font-weight: 600;
  color: #ff4e00;
  font-size: 14px;
  padding-bottom: 2px;
}

.league-page .friends ul {
  height: 100vh;
  padding-bottom: 300px;
  overflow: auto;
  margin: 0;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.league-page .friends ul::-webkit-scrollbar {
  display: none;
}

.league-page .friends ul.follow-request {
  height: auto;
  padding-bottom: 0;
  overflow: hidden;
  margin: 0;
  margin-bottom: 30px;
}

.league-page .friends ul li .name {
  width: 120px;
}

.league-page .friends.duello-challenge2 {
  margin-bottom: 25px;
}

.league-page .friends.duello-challenge2 ul {
  height: auto;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 10px 0px rgb(235 235 235);
  border-radius: 10px;
  background-color: #ffffff;
  padding: 20px 5px;
  margin: 5px;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
}

.league-page .friends.duello-challenge2 ul li {
  display: block;
  background-color: transparent;
  text-align: center;
  height: auto;
  box-shadow: none;
  margin-bottom: 0;
  border-radius: 0;
  width: 33.3%;
  border: 0;
}

.league-page .friends.duello-challenge2 .draw-icon {
  width: 50px;
  position: absolute;
  top: 0;
}

.league-page .friends.duello-challenge2 ul li .profile-picture {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 5px;
  font-size: 22px;
}

.league-page .friends.duello-challenge2 ul li .list-picture-img {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  margin-left: 0 !important;
  margin-bottom: 5px;
  font-size: 22px;
}

.league-page .friends.duello-challenge2 ul li .name {
  margin-left: 0;
  font-size: 12px;
}

.league-page .friends.duello-challenge2.duello-end ul li .name-div .step-div {
  margin-left: 0;
  color: #ef0000;
}

.league-page .friends.duello-challenge2 .winner-finish-text {
  font-size: 15px;
  font-weight: 700;
  color: #0dc28d;
  background-color: rgb(13 194 141 / 20%);
  border-radius: 25px;
  padding: 5px 10px;
}

.league-page .friends.duello-challenge2 .date-end {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 11px;
}

.league-page .friends.duello-challenge2 .lose-finish-text {
  font-size: 15px;
  font-weight: 700;
  color: #ef0000;
  background-color: rgb(239 0 0 / 20%);
  border-radius: 25px;
  padding: 5px 10px;
}

.league-page
  .friends.duello-challenge2
  ul
  li.winner-challenge
  .name-div
  .step-div {
  color: #0dc28d;
}

.league-page
  .friends.duello-challenge2
  ul
  li.draw-challenge
  .name-div
  .step-div {
  color: #ffa700;
}

.league-page .friends.duello-challenge2 li {
  width: 30%;
}

.league-page .friends.duello-challenge2 .progress-area {
  width: 40%;
}

.league-page .friends.duello-challenge2 .progress-area .vs-img {
  width: 36px;
  display: block;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 8px;
}

.league-page .friends.duello-challenge2 .progress-area .step-winner {
  display: block;
  font-size: 13px;
  margin-top: 8px;
  color: #0dc28d;
  font-weight: 500;
}

.league-page .friends.duello-challenge2 .progress-area .step-draw {
  display: block;
  font-size: 13px;
  margin-top: 8px;
  color: #ffa700;
  font-weight: 500;
}

.league-page .friends.duello-challenge2 .progress-area .step-lose {
  display: block;
  font-size: 13px;
  margin-top: 5px;
  color: #ef0000;
  font-weight: 500;
}

.league-page .friends.duello-challenge2 ul li .name-div .step-div {
  color: #009ea2;
  margin-left: 0;
}

.league-page .friends.duello-challenge2 ul li .end-cup {
  position: absolute;
  right: 5px;
  width: 40px;
  top: 0;
}

.league-page .friends.duello-challenge2 .progress-area .progress {
  height: 10px;
  border-radius: 25px;
}

.league-page .friends.duello-challenge2 .progress-area .bg-winner {
  background-color: #0dc28d;
}

.league-page .friends.duello-challenge2 .progress-area .bg-lose {
  background-color: #ef0000;
}

.izle-kazan-modal .video-modal-img {
  background: linear-gradient(0deg, rgb(252 167 51) 0%, rgb(254 213 133) 50%);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  margin-top: -55px;
  line-height: 67px;
}

.izle-kazan-modal .app-btn {
  margin-top: 20px;
}

.izle-kazan-modal.talep-et-reklam-modal .video-modal-img {
  background: #0db87d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 26px;
}

.izle-kazan-modal.talep-et-reklam-modal .list-video .watching {
  color: #0db87d;
}

.izle-kazan-modal.yeni-modal-bonus .video-modal-img {
  background: transparent;
  border-radius: initial;
  width: 110px;
  height: 80px;
  margin: 0 auto;
  position: relative;
  margin-top: -55px;
  line-height: normal;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus .modal-t1 {
  color: #ffb300;
  font-size: 22px;
  padding: 0;
  font-weight: 600;
  margin-bottom: 5px;
  margin-top: 10px;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul {
  list-style-type: none;
  padding: 0;
  justify-content: space-between;
  display: flex;
  align-items: center;
  width: 100%;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul li .day {
  font-size: 9px;
  font-weight: 600;
  margin-top: 3px;
  margin-bottom: 0;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul .watching .win {
  color: #009a53;
  display: block;
  font-weight: 800;
  margin-bottom: 0;
  margin-top: 5px;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul .watching .win i {
  color: #009a53;
  font-size: 16px;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul .wait-watch .win {
  color: #bfbfbf;
  display: block;
  font-weight: 800;
  margin-bottom: 0;
  margin-top: 5px;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul .wait-watch .win i {
  color: #bfbfbf;
  font-size: 16px;
}

.izle-kazan-modal.yeni-modal-bonus .list-video .watching span {
  color: #008547;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus .info-text {
  background-color: #fff0b6;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 15px;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus .info-text a {
  font-weight: 600;
  color: rgb(255 78 0);
  padding: 5px 0;
  text-decoration: underline;
  display: block;
}

.yeni-modal-bonus .lock-daily-bonus {
  margin: 0;
  font-size: 50px;
  color: #dadada;
}

.yeni-modal-bonus .error-text-bonus {
  margin: 0;
  margin-top: 10px;
  font-weight: 500;
  color: #000000;
}

.izle-kazan-modal.yeni-modal-bonus .list-video .wait-watch i {
  color: #bfbfbf;
}

.izle-kazan-modal.yeni-modal-bonus .list-video .wait-watch span {
  color: #878787;
}

.yeni-modal-bonus .clock-bonus {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  font-weight: 900;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

.yeni-modal-bonus .clock-bonus span {
  font-weight: 900;
  padding-left: 3px;
  display: block;
  font-size: 11px;
  margin: 0;
}

.izle-kazan-modal.yeni-modal-bonus .video-modal-img::before {
  content: "";
  position: absolute;
  width: 90px;
  height: 15px;
  left: 0;
  background-color: #ffe994;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  bottom: 3px;
}

.izle-kazan-modal.yeni-modal-bonus .video-modal-img img {
  margin-bottom: 0;
  width: 70px;
  z-index: 999;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: 10px;
}

.app-modal1b .izle-kazan-modal .modal-t1 {
  color: #000000;
  font-size: 18px;
  padding-top: 10px;
  font-weight: 500;
  margin-bottom: 10px;
  display: block;
}

.izle-kazan-modal .video-modal-img img {
  margin-bottom: 0;
  width: 43px;
}

.izle-kazan-modal p {
  padding: 0;
}

.app-modal1b img {
  display: inline-block;
  margin: 0 auto;
  margin-bottom: 10px;
}

.app-modal1b .modal-t1 {
  color: #ff4e00;
  font-size: 17px;
  padding-top: 10px;
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}

.app-modal1b .modal-content {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
}

.extra-bonus-page {
  text-align: center;
}

.extra-bonus-page .app-btn {
  background: rgb(255, 181, 0);
  background: linear-gradient(
    79deg,
    rgba(255, 181, 0, 1) 0%,
    rgba(255, 207, 0, 1) 93%
  );
  animation: myfirst5 1.8s infinite;
}

@keyframes myfirst5 {
  0% {
    background: #ffd000;
  }

  50% {
    background: #ffbb00;
  }

  100% {
    background: #ffd000;
  }
}

.extra-bonus-page .list-video {
  margin-bottom: 15px;
}

.extra-bonus-page .list-video i {
  font-size: 35px;
  margin: 0 2px;
}

.extra-bonus-page .list-video .watching {
  color: #009a53;
  animation: myfirst4 1.4s infinite;
}

@keyframes myfirst4 {
  0% {
    color: #009a53;
  }

  50% {
    color: #00ca6c;
  }

  100% {
    color: #009a53;
  }
}

.extra-bonus-page .list-video .wait-watch {
  color: #bfbfbf;
}

.extra-bonus-page .extra-bonus-banner {
  background-image: url(../img/load-icon.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 41%;
  background-color: #e8e8e8;
}

.extra-bonus-page .extra-bonus-banner img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
}

.extra-bonus-page .video-modal-img {
  background: linear-gradient(0deg, rgb(252 167 51) 0%, rgb(254 213 133) 50%);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  margin-top: -55px;
  line-height: 67px;
}

.extra-bonus-page .extra-bonus-t1 {
  color: #ffb000;
  font-size: 18px;
  padding-top: 10px;
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}

.extra-bonus-page .extra-bonus-t2 {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 10px;
  display: block;
}

.extra-bonus-page .video-modal-img img {
  margin-bottom: 0;
  width: 43px;
}

.extra-bonus-page p {
  padding: 0;
}

.app-modal2 .modal-content {
  border-radius: 10px;
  border: 0;
  margin-top: 25%;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.app-modal1b img {
  display: inline-block;
  margin: 0 auto;
  margin-bottom: 10px;
}

.app-modal1b .modal-t1 {
  color: #ff4e00;
  font-size: 17px;
  padding-top: 10px;
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}

.app-modal1b .modal-content {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
}

.izle-kazan-modal .list-video {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.izle-kazan-modal .list-video i {
  font-size: 25px;
  display: block;
  margin: 0 2px;
}

.izle-kazan-modal .list-video .watching {
  color: #009a53;
}

.izle-kazan-modal .list-video .wait-watch {
  color: #bfbfbf;
}

.izle-kazan-modal .list-video li {
  position: relative;
}

.izle-kazan-modal .list-video li:last-child i {
  font-size: 45px;
}

.izle-kazan-modal.yeni-modal-bonus .list-video .today-watch span {
  color: #009ea2;
}

.izle-kazan-modal .today-watch-div {
  width: 27px;
  height: 27px;
  position: relative;
  background-color: #009ea2;
  border-radius: 50%;
  margin: 0 auto;
}

.izle-kazan-modal .today-watch-div img {
  width: 15px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.izle-kazan-modal .end-watch-div {
  width: 27px;
  height: 27px;
  position: relative;
  background-color: #bfbfbf;
  border-radius: 50%;
  margin: 0 auto;
}

.izle-kazan-modal .end-watch-div img {
  width: 15px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.izle-kazan-modal li:last-child .today-watch-div {
  width: 47px;
  height: 47px;
}

.izle-kazan-modal li:last-child .today-watch-div img {
  width: 24px;
}

.izle-kazan-modal li:last-child .end-watch-div {
  width: 47px;
  height: 47px;
}

.izle-kazan-modal li:last-child .end-watch-div img {
  width: 24px;
}

.izle-kazan-modal .list-video .last-stars-div {
  position: absolute;
  top: -19px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.izle-kazan-modal .list-video .last-stars-div .last-stars-inside {
  display: flex;
  position: relative;
}

.izle-kazan-modal .list-video .last-stars-div .last-stars-inside i {
  font-size: 16px;
}

.izle-kazan-modal .list-video .last-stars-div .last-stars-inside .star-icon1 {
  font-size: 13px;
  position: absolute;
  top: 7px;
  left: -4px;
  color: #ffd300;
  animation: myfirst3 1.5s infinite;
}

.izle-kazan-modal .list-video .last-stars-div .last-stars-inside .star-icon2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  color: #ffd300;
  animation: myfirst3 1.5s infinite;
}

.izle-kazan-modal .list-video .last-stars-div .last-stars-inside .star-icon3 {
  font-size: 13px;
  position: absolute;
  top: 7px;
  right: -4px;
  color: #ffd300;
  animation: myfirst3 1.5s infinite;
}

.izle-kazan-modal.yeni-modal-bonus .list-video .crown-i {
  position: absolute;
  top: -29px;
  left: 0;
  color: #ffc800 !important;
  font-size: 26px;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.izle-kazan-modal.yeni-modal-bonus p {
  margin: 4px 0;
  font-size: 14px;
}

.izle-kazan-modal.yeni-modal-bonus p:first-child {
  font-weight: 600;
}

.adimpara-erteleme-modal .list-video li:last-child i {
  font-size: 25px;
}

.app-modal1b .adimpara-erteleme-modal.yeni-modal-bonus .modal-t1 {
  color: #009ea2;
}

.app-modal1b .adimpara-erteleme-modal.yeni-modal-bonus ul {
  width: max-content;
  max-width: 100%;
  margin-bottom: 0;
}

.adimpara-erteleme-modal.yeni-modal-bonus p {
  margin: 0;
  margin-bottom: 10px;
}

.adimpara-erteleme-modal.yeni-modal-bonus p:last-child {
  margin-bottom: 0;
}

.adimpara-erteleme-modal.yeni-modal-bonus span {
  display: inline-block;
  margin: 0;
}

.adimpara-erteleme-modal .date {
  background-color: #f3df8e;
  padding: 5px 10px;
  border-radius: 5px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto !important;
}

.adimpara-erteleme-modal .date.extended {
  background-color: #aadfb8;
}

.adimpara-erteleme-modal .date.extended .after {
  background-color: #1dab41;
  color: #ffffff;
}

.adimpara-erteleme-modal .now {
  background-color: #ed3434;
  padding: 2px 4px;
  display: inline-block;
  color: #ffffff;
  border-radius: 5px;
  line-height: normal;
}

.adimpara-erteleme-modal .after {
  background-color: #ddc460;
  padding: 5px;
  display: inline-block;
  color: #000000;
  border-radius: 5px;
  line-height: normal;
  font-weight: 600;
}

.banner1 .deadline-adimpara {
  display: flex;
  align-items: center;
  background-color: #fff0b6;
  width: max-content;
  margin: 0 auto;
  padding: 5px 10px;
  margin-top: 5px;
  font-weight: 400;
  font-size: 13px;
  border-radius: 5px;
}

.banner1 .deadline-adimpara b {
  background-color: #efda87;
  padding: 5px;
  margin-left: 5px;
  border-radius: 5px;
  font-weight: 600;
}

.acitve-bonus-x2 {
  color: white;
  background-color: #ff4200;
  width: 295px;
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
}

.index-top-info-box.adimpara-sifirlanma {
  color: #009ea2;
  background-color: #eefaff;
  width: 295px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid #93d5d7;
  font-weight: 700;
  font-size: 13px;
}

.index-top-info-box.adimpara-sifirlanma span {
  padding: 10px;
  right: 10px;
  display: block;
}

.index-top-info-box.adimpara-sifirlanma .close-btn {
  position: absolute;
  right: 0;
  font-size: 14px;
  color: #666666;
  top: -10px;
  background-color: #ffffff;
  border-radius: 25px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #93d5d7;
}

.page-top-alert-box {
  color: #000000;
  background-color: #dddddd;
  width: 295px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-top-alert-box img {
  width: 18px;
  margin-left: 3px;
}

.league-page .league-refresh-waiting {
  margin-top: 20px;
}

.league-page .league-refresh-waiting span {
  text-align: center;
  display: block;
  color: #009ea2;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
}

.league-page .league-refresh-waiting  i{
  margin-right: 2px;
}

.league-page .league-refresh-waiting span b {
  display: block;
  font-weight: 700;
  color: #ff4e00;
  font-size: 26px;
}

.league-page .league-refresh-waiting img {
  width: 270px;
  display: block;
  margin: 0 auto;
  margin-top: 5px;
  max-width: 100%;
}

@keyframes alertanimate {
  0% {
    background: #00bb64;
  }

  50% {
    background: #00d471;
  }

  100% {
    background: #00bb64;
  }
}

.index-top-info {
  margin-bottom: 20px;
  margin-top: 0;
}

.index-top-info-box {
  border-radius: 10px;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  padding: 8px 5px;
  margin: 0 auto;
  margin-bottom: 15px;
  border-radius: 25px;
}

.index-top-info-box:last-child {
  margin-bottom: 0;
}

.index-top-info-box.active-btn-alert {
  background-color: #009ea2;
  color: #ffffff;
  width: max-content;
  padding: 4px 30px;
  animation: alertanimate 1s infinite;
}

.invite-friend-home {
  color: #ffffff;
  background-color: #00b5ba;
  width: 200px;
  display: flex;
  align-items: center;
  max-width: 100%;
  justify-content: center;
  padding: 5px;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}

.invite-friend-home b {
  font-weight: 600;
}

.invite-friend-home img {
  width: 45px;
  position: absolute;
  right: -10px;
  bottom: 1px;
}

.activity-start-home {
  color: white;
  background-color: #00b562;
  width: 295px;
  display: flex;
  align-items: center;
  max-width: 100%;
  justify-content: center;
}

.activity-start-home img {
  width: 20px;
  margin-left: 5px;
}

.sale-product-home {
  color: white;
  background-color: #00bec3;
  width: 295px;
  display: flex;
  align-items: center;
  max-width: 100%;
  justify-content: center;
}

.sale-product-home img {
  width: 20px;
  margin-left: 5px;
}

.acitve-bonus-x2 img {
  width: 20px;
  margin-left: 5px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.ptr--ptr {
  box-shadow: none !important;
}

.new-profile-page .profile-header-wrap .follow-btn:active {
  background: #028994;
}

.follow-btn-friends:active {
  background: #028994;
}

.banner-getmoney .banner-bottom3 {
  text-align: center;
}

.banner-getmoney .getmoney-bottom {
  display: inline-block;
  position: relative;
}

.banner-getmoney .getmoney-bottom a {
  display: block;
  margin: auto;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  border-radius: 25px;
  background-color: #00b562;
  z-index: -1;
  animation: myfirst 1.8s infinite, leaves 1.8s ease-in-out infinite alternate;
  background-size: 300% 300%;
}

@keyframes myfirst {
  0% {
    background: #00b562;
  }

  50% {
    background: #00d471;
  }

  100% {
    background: #00b562;
  }
}

@keyframes leaves {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }

  50% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }

  100% {
    transform: scale(1.1);
    -webkit-transform: scale(1);
  }
}

.banner-getmoney .money-banner {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #009a53;
  font-size: 14px;
  margin-top: 5px;
  position: absolute;
  right: 0;
}

.banner-getmoney .money-banner i {
  font-size: 13px;
}

.banner-getmoney .money-banner .money {
  margin-left: 3px;
  font-weight: 900;
  color: #009a53;
  display: inline-flex;
  align-items: flex-end;
}

.banner-getmoney .money-banner span .small-money {
  margin-left: 0;
  font-size: 10px;
}

.introjs-button:active {
  background: #028994 !important;
}

.new-profile-page
  .profile-follow-accept-btn
  .btn-div
  .accept-btn-profile:active {
  background: #028994;
}

.app-btn:active {
  background: #028994;
}

.new-profile-page
  .profile-follow-accept-btn
  .btn-div
  .reject-btn-profile:active {
  background: rgb(144, 144, 144);
}

.social-page .follow-request .delete-follower:active {
  background: rgb(144, 144, 144);
}

.unfollow-btn-friends:active {
  background: #aaaaaa;
}

.social-page .follow-request .accept-follower:active {
  background: #028994;
}

.new-profile-page .profile-header-wrap .unfollow-btn:active {
  background: #e70000;
}

.remove-followers-modal .remove-followers:active {
  background: #e70000;
}

.new-profile-page .profile-header-wrap .waiting-btn:active {
  background: #f0b400;
}

.send-btn-friends:active {
  background: #f0b400;
}

.activty-detail .add-calendar-activty:active {
  background: rgb(144, 144, 144);
}

.friends ul li .list-unfollow-btn:active {
  color: #515151;
  border: 1px solid #cbcbcb;
  background-color: #dddddd;
}

.form-page .add-user-activty:active {
  background: #e54600;
}

.invite-page .invite-info-text {
  font-size: 15px;
}

.invite-page .friends ul li .name {
  width: 160px;
}

.followers-page .search {
  margin-bottom: 25px;
}

.app-modal-bottom .modal-dialog {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
}

.app-modal-bottom2 .modal-dialog {
  position: absolute;
  bottom: 0px;
  left: 0;
  margin: 0;
  right: 0;
}

.app-modal-bottom2 .app-btn {
  display: inline-block;
  width: auto;
  min-width: 150px;
}

.app-modal-bottom2 .icon-modal-div {
  background-color: #ffffff;
  display: block;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  padding: 10px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: -20px;
}

.app-modal-bottom2 .icon-modal-div img {
  width: 50px;
}

.app-modal-bottom2 .modal-content {
  border-radius: 15px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 0;
}

.app-modal-bottom2 .modal-body {
  padding-bottom: 100px;
  padding-top: 70px;
}

.agreement-page {
  padding-top: 15px;
  font-size: 14px;
}

.agreement-page p {
  margin-bottom: 8px;
}

.agreement-page ol {
  margin-bottom: 8px;
  padding-inline-start: 30px;
}

.agreement-page ul {
  padding-inline-start: 30px;
}

.green-dot i {
  color: #0f9e30;
  font-size: 16px;
  margin-right: 3px;
}

.yellow-dot i {
  color: #e4ad08;
  font-size: 16px;
  margin-right: 3px;
}

.red-dot i {
  color: #ce1022;
  font-size: 16px;
  margin-right: 3px;
}

.snowflakes {
  position: absolute;
  color: #009a53;
  font-size: 30px;
}

#site {
  width: 100%;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  top: 0;
}

.loader-wrap {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999999999999;
  opacity: 1;
  padding-top: env(safe-area-inset-top, 30px);
  background-image: url(../img/bg5.png);
  background-size: 70% auto;
  background-repeat: repeat;
  background-position: top;
  background-attachment: fixed;
}

.banner1 .loader-wrap img {
  top: 50%;
  transform: translateY(-50%);
}

.banner1 .loader-wrap {
  background-color: transparent;
  opacity: 1;
}

.circle-div {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.loader-wrap img {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 45%;
  transform: translateY(-45%);
  width: 60px;
}

.circle-loader {
  border: 5px solid #e2e2e2;
  border-left-color: #009ea2;
  animation: loader-spin 1.2s infinite linear;
  display: inline-block;
  border-radius: 50%;
  width: 105px;
  height: 105px;
  background-color: #e9e9e9;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* DARK THEME */

body.dark-theme {
  background-color: #14202b;
  color: #ffffff;
}

.dark-theme .product-detail .product-price {
  color: #12ca74;
}

.dark-theme .brands-follow-page .brands-box .notification-product {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.dark-theme .sticky-header {
  background-color: #14202b;
}

.dark-theme .navbar .menu-right .money-menu {
  background-color: #253138;
  color: #11ca74;
  box-shadow: none;
}

.dark-theme .navbar .menu-right .first-div span {
  color: #11ca74;
}

.dark-theme .counter-div .total-step .total-h {
  color: #ffffff;
}

.dark-theme .banner1 {
  background-color: #1e3040;
  box-shadow: none;
}

.dark-theme .menu-bottom {
  background-color: #14202b;
  border-top: 1px solid #32434c;
}

.dark-theme .menu-bottom .center-home {
  box-shadow: none;
}

.dark-theme .menu-bottom a {
  color: #bdddde;
}

.dark-theme .menu-bottom .active-menu-bottom::after {
  color: #bdddde;
}

.dark-theme .banner1 .banner-bottom {
  background-color: transparent;
}

.dark-theme .banner1 .banner-bottom2 .product-play i {
  color: #00b0b5;
}

.dark-theme .banner1.banner-active .banner-bottom2 .product-play i {
  color: #b7b7b7;
}

.dark-theme .banner1 .banner-bottom2 .product-play2 i {
  color: #1d3040;
}

.dark-theme .banner1 .banner-bottom .banner-count {
  color: #ffffff;
}

.dark-theme .banner1.banner-active .banner-name {
  color: #12ca74;
}

.dark-theme .banner-shop .fav-div {
  box-shadow: none;
}

.dark-theme .banner-shop .notification-product {
  box-shadow: none;
}

.dark-theme .info-app {
  box-shadow: none;
  background-color: #1e3040;
}

.dark-theme .stats-page .nav-tabs {
  background-color: #1e3040;
  border: 2px solid #1e3040;
}

.dark-theme .friends ul li {
  background-color: #1e3040;
}

.dark-theme .nav-drill {
  background: #14202b;
}

.dark-theme .menu-overlay {
  background: rgba(95, 95, 95, 0.5);
}

.dark-theme .form-page .form-control {
  background-color: #1e3040;
  border-color: #1e3040;
}

.dark-theme .form-page.profile-page .form-control {
  background-color: #263035;
  color: #696969;
  border-radius: 10px;
  border-color: #263035;
}

.dark-theme .form-page.profile-page2 .form-control {
  color: #ffffff;
}

.dark-theme .form-page.profile-page2 .form-control {
  background-color: #1e3040;
}

.dark-theme .none-banner-div p {
  color: white;
}

.dark-theme .brands-follow-page .brands-box {
  background-color: #1e3040;
  box-shadow: none;
}

.dark-theme .brands-follow-page .brands-box img {
  background-color: #ffffff;
  padding: 2px;
}

.dark-theme .banner-bottom .banner-summary a {
  color: #ffffff;
}

.banner-summary {
  font-size: 14px;
}

.dark-theme .contact-page .contact-box a {
  color: #eefaff;
  border: 1px solid #eefaff;
}

.dark-theme .introjs-tooltip {
  background-color: #000000 !important;
}

.dark-theme .introjs-arrow.top {
  border-bottom-color: #000000 !important;
}

.dark-theme .introjs-arrow.top-right {
  border-bottom-color: #000000 !important;
}

.dark-theme .introjs-helperLayer {
  box-shadow: rgb(33 33 33 / 0%) 0px 0px 1px 2px,
    rgb(255 255 255 / 20%) 0px 0px 0px 5000px !important;
}

.dark-theme .nav-drill .dark-mod {
  border-top: 1px solid #32434c;
}

.dark-theme .banner1 .banner-bottom2 .product-play2 {
  background-color: #01b0b5;
}

.dark-theme .product-detail .more-info-div .accordion {
  color: #ffffff;
}

.dark-theme .navbar .menu-right-product .fav-a {
  box-shadow: none;
}

.dark-theme .bg-icon {
  opacity: 0.1;
}

.dark-theme .loader-wrap {
  background-color: #000000;
  opacity: 0.9;
}

.refresh-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #fafafa;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999999999999;
  opacity: 0.95;
}

.refresh-wrap1 .circle-div {
  position: relative;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: auto;
  transform: initial;
  text-align: center;
}

.refresh-wrap1 img {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 45%;
  transform: translateY(-45%);
  width: 25px;
}

.refresh-wrap1 .circle-loader {
  border: 3px solid #e2e2e2;
  border-left-color: #e2e2e2;
  animation: loader-spin 1.2s infinite linear;
  display: inline-block;
  border-radius: 50%;
  width: 65px;
  height: 65px;
}

.refresh-wrap1 .circle-div::after {
  width: 45px;
  height: 45px;
  background-image: url(../img/load.svg);
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  content: "";
  animation: none;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 9px;
}

.refresh-wrap2 .circle-div {
  position: relative;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: auto;
  transform: initial;
  text-align: center;
}

.refresh-wrap2 img {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 45%;
  transform: translateY(-45%);
  width: 25px;
}

.refresh-wrap2 .circle-loader {
  border: 3px solid #e2e2e2;
  border-left-color: #009ea2;
  animation: loader-spin 1.2s infinite linear;
  display: inline-block;
  border-radius: 50%;
  width: 65px;
  height: 65px;
}

.refresh-wrap2 .circle-div::after {
  width: 45px;
  height: 45px;
  background-image: url(../img/walking.gif);
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  content: "";
  animation: none;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 9px;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.ptr--ptr.ptr--pull.ptr--release {
  padding-top: 160px;
  margin-bottom: -85px;
}

.ptr--ptr.ptr--refresh {
  padding-top: 160px;
  margin-bottom: -85px;
}

.company-signature {
  font-size: 13px;
  text-align: center;
  display: flex;
  color: black;
  justify-content: center;
  align-items: center;
  z-index: 9;
  border-radius: 10px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.company-signature span {
  padding: 0 3px;
  font-weight: 900;
  display: flex;
  align-items: flex-end;
}

.company-signature span img {
  width: 85px;
  margin-left: 2px;
}

.heart {
  fill: red;
  position: relative;
  width: 13px;
  margin-left: 3px;
  animation: pulse 1.2s ease infinite;
  margin-bottom: 2px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.product-summary-total-div.medal-bottom-piece .text1 .img-div img {
  display: block;
  width: 42px;
}

.product-summary-total-div.medal-bottom-piece .text1 .img-div b {
  color: #009a53;
  font-size: 15px;
  display: block;
}

.product-summary-total-div.medal-bottom-piece .text1 .summary-img {
  display: flex;
  align-items: center;
  text-align: center;
}

.product-summary-total-div {
  display: flex;
  justify-content: center;
}

.product-summary-total-div .text1 {
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-summary-total-div .text1 .summary-img {
  font-weight: bold;
  color: #009ea2;
  margin: 0 7px;
  display: block;
}

.product-summary-total-div .text1 .summary-img img {
  width: 40px;
}

.product-detail .product-summary-detail-text {
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  font-weight: 400;
  font-size: 15px;
  padding-bottom: 20px;
}

.product-detail .star-item-text {
  background-color: #ffcf00;
  border-radius: 0;
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 10px 15px;
  margin-bottom: 20px;
  font-weight: 900;
}

.product-detail .star-item-index-text {
  background-color: #fff4c0;
  border-radius: 0;
  width: max-content;
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 10px 15px;
  margin-bottom: 10px;
  color: #ff9c00;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
}

.product-detail .star-item-index-text i {
  margin-right: 3px;
  animation: myfirst3 1.5s infinite;
}

.product-detail .star-item-index-content {
  background-color: #fff4c0;
  border-radius: 10px;
  width: max-content;
  max-width: 100%;
  justify-content: center;
  margin: 0 auto;
  padding: 5px 10px;
  margin-bottom: 10px;
  margin-top: 15px;
  text-align: center;
  font-size: 14px;
}

.product-detail .star-item-index-content p {
  margin: 10px 0;
  font-weight: 500;
  padding: 0;
  font-size: 13px;
  color: #ff9c00;
}

.product-detail .star-item-text b {
  font-weight: 400;
  margin-right: 3px;
}

.product-detail .product-summary-detail-text b {
  font-weight: 500;
}

.product-detail .product-summary-detail-text i {
  font-size: 18px;
  color: #009ea2;
  background-color: #eaeaea;
  width: 35px;
  text-align: center;
  margin-left: 8px;
  height: 35px;
  line-height: 35px;
  padding: 0;
  display: inline-block;
}

.product-detail-summary .certificate-banner {
  margin-bottom: 10px;
}

.product-detail-summary .certificate-banner img {
  width: 300px;
  margin: 0 auto;
  display: block;
  max-width: 100%;
}

.product-detail-summary p b {
  padding-bottom: 0;
}

.product-detail-summary .banner1-img-div {
  margin-top: 0;
  margin-bottom: 15px;
}

.app-version {
  font-size: 13px;
  color: rgb(255 255 255 / 82%);
  position: absolute;
  bottom: 30px;
}

.close-modal-btn {
  margin-top: 15px;
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  color: #212121;
}

.close-modal-btn-top {
  -webkit-box-shadow: 0px 0px 18px 0px rgb(110 110 110);
  -moz-box-shadow: 0px 0px 18px 0px rgba(110, 110, 110, 1);
  box-shadow: 0px 0px 18px 0px rgb(110 110 110);
  position: absolute;
  top: -20px;
  right: 5px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #000000;
  background-color: #ffffff;
  z-index: 2;
}

.profile-picture-btn {
  display: block;
  padding: 10px;
  width: 100%;
  color: #000000;
  border-bottom: 1px solid #e2e2e2;
}

.profile-picture-btn:active {
  background-color: #e2e2e2;
}

.profile-picture-img {
  width: 130px;
  border-radius: 50%;
  height: 130px;
}

.list-picture-img {
  width: 33px;
  border-radius: 50%;
  height: 33px;
  margin-left: 6px !important;
}

.profile-edit-back-btn {
  width: 200px;
}

.save-btn-nav a {
  font-weight: 600;
  font-size: 15px;
  color: #009ea2;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 13px;
  font-weight: 600;
}

.friends ul li.me-list {
  background-color: rgb(212 247 248);
}

.navbar .menu-right .first-div span .small-money {
  margin-left: 0;
  font-size: 11px;
}

.the-datepicker__deselect {
  display: none;
}

.the-datepicker__main .the-datepicker__close a.the-datepicker__button {
  padding: 10px;
}

.league-page-number {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  color: #009ea2;
}

.league-page-number span {
  font-size: 15px;
  font-weight: 600;
  margin-left: 15px;
  margin-right: 15px;
}

.league-page-number a {
  font-size: 20px;
  line-height: 40px;
  width: 40px;
  height: 40px;
  text-align: center;
}

.sss-detail {
  text-align: center;
  left: 0;
  right: 0;
  padding-bottom: 50px;
  width: 100%;
}

.sss-detail img {
  margin: 0 auto;
  width: 95%;
}

.sss-detail .sss-tutorial-item img {
  margin: 0 auto;
  width: 85%;
}

.sss-detail .slide-number {
  display: block;
  border-radius: 50%;
  margin: 0 auto;
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  background-color: #009ea2 !important;
  width: 35px !important;
  height: 35px !important;
  text-align: center !important;
  line-height: 35px !important;
}

.sss-detail .slide-text {
  font-weight: 400;
  margin-top: 10px;
  display: block;
  font-size: 18px;
  height: 45px;
  margin-bottom: 10px;
  padding: 0 12px;
}

.height-slide {
  line-height: 45px;
}

.sss-detail .carousel-control-prev {
  top: 50%;
  bottom: auto;
  font-size: 14px;
  opacity: 1;
  background: #009ea2;
  left: 10px;
  color: #ffffff;
  border-radius: 0.2em;
  padding: 0.5rem 1rem;
}

.sss-detail .carousel-control-next {
  top: 50%;
  bottom: auto;
  font-size: 14px;
  opacity: 1;
  background: #009ea2;
  right: 10px;
  color: #ffffff;
  border-radius: 0.2em;
  padding: 0.5rem 1rem;
}

.carousel-inner .carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  margin-top: 32px;
}

.wallet-page {
  background-color: #ffffff;
  padding: 20px 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(233 233 233);
  -moz-box-shadow: 0px 0px 10px 0px rgba(233, 233, 233, 1);
  box-shadow: 0px 0px 10px 5px rgb(233 233 233);
  max-height: 80vh;
  padding-bottom: min(env(safe-area-inset-bottom), 20px);
  position: relative;
  min-height: 155px;
}

.wallet-page p {
  text-align: center;
  margin: 30px 0;
  font-weight: 400;
}

.wallet-page ul {
  padding: 0;
  max-height: 64vh;
  overflow: auto;
}

.wallet-page .cost-money {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e2e2e2;
  padding: 15px;
}

.wallet-page .cost-money span {
  font-size: 13px;
  display: flex;
  align-items: center;
}

.wallet-page .cost-money span b {
  font-weight: 600;
  font-size: 14px;
  margin-left: 2px;
}

.wallet-page .wallet-box {
  padding: 13px 15px;
  display: flex;
  align-items: center;
  background-color: #f6f6f6;
  border-radius: 20px;
  margin-bottom: 15px;
}

.wallet-page .date-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.wallet-page .date-select .prev {
  font-size: 20px;
  background-color: #1ea9ad;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  color: #ffffff;
}

.wallet-page .date-select .next {
  font-size: 20px;
  background-color: #1ea9ad;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  color: #ffffff;
}

.wallet-page .date-select .next.disabled-date {
  background-color: #e9e9e9;
  color: #bebebe;
}

.wallet-page .date-select .prev.disabled-date {
  background-color: #e9e9e9;
  color: #bebebe;
}

.wallet-page .date-select .today {
  font-weight: 500;
  color: #009ea2;
  display: block;
}

.wallet-page .wallet-box:last-child {
  border-bottom: 0;
}

.wallet-page .wallet-box .box-info {
  width: 80%;
  font-weight: 500;
}

.wallet-page .wallet-box .box-info .clock {
  display: block;
  font-size: 11px;
  color: #b6b6b6;
  font-weight: 500;
  margin-bottom: 2px;
}

.wallet-page .wallet-box .box-info .product {
  font-size: 13px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
}

.wallet-page .wallet-box .box-info .detail-wallet {
  font-size: 13px;
  background-color: var(--warning);
  border-radius: 5px;
  padding: 3px 7px;
  margin-left: 7px;
}

.wallet-page .wallet-box .price-wallet {
  font-weight: 600;
  font-size: 15px;
  text-align: right;
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 35px;
}

.wallet-page .wallet-box .price-wallet i {
  font-size: 20px;
  margin-right: 5px;
}

.wallet-page .wallet-box.income .price-wallet i {
  font-size: 16px;
}

.wallet-page .wallet-box.expense .price-wallet {
  color: #15979a;
  background-color: #9becee;
  width: max-content;
  padding: 5px 15px;
  border-radius: 25px;
}

.wallet-page .wallet-box.income .price-wallet {
  color: #009450;
  background-color: #79e8b5;
  width: max-content;
  padding: 5px 15px;
  border-radius: 25px;
}

.wallet-page .wallet-box.income .price-wallet .small-money {
  margin-left: 0;
  font-size: 11px;
}

.wallet-page .wallet-box.delete .price-wallet i {
  font-size: 16px;
}

.wallet-page .wallet-box.delete .price-wallet {
  color: #e70000;
  background-color: #ffb4b4;
  width: max-content;
  padding: 5px 15px;
  border-radius: 25px;
}

.game-modal .modal-content {
  background-color: transparent;
  width: 85%;
}

.game-modal .modal-body {
  padding: 0;
}

.game-modal .game-modal-container {
  /* position: fixed; */
  /* top: 46%; */
  /* left: 0; */
  width: 100%;
  /* font-size: 30px; */
  /* right: 0; */
  margin-top: 50px;
}

.game-modal .game-check-list {
  margin-bottom: 4%;
}

.game-modal .game-check-list .star {
  background-image: url(../img/star3.svg);
  width: 40px;
  height: 40px;
  display: inline-block;
}

.game-modal .game-check-list .star.star-active {
  background-image: url(../img/star2.svg);
}

.game-modal .app-btn {
  background: #ee8e00;
}

.game-modal img {
  margin: 0;
}

.outer {
  display: table;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  /* Whatever width you want */
}

.slider-home .owl-stage-outer {
  height: 290px;
}

.hour-bonus .hour-info-btn {
  position: absolute;
  top: 10px;
  margin: 0 auto;
  z-index: 2;
  right: 22%;
  background-color: #ffffff;
  border-radius: 25px;
  color: #ffb500;
  font-size: 25px;
  height: 25px;
  display: flex;
  align-items: center;
}

.hour-bonus .slider-home .owl-nav .owl-prev {
  width: 35px;
  height: 35px;
  position: absolute;
  left: 12%;
  background-color: #009ea2;
  top: 40%;
  font-size: 40px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hour-bonus .slider-home .owl-nav .owl-prev::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f053";
  color: #ffffff;
  font-size: 22px;
  text-align: center;
  padding-right: 2px;
}

.hour-bonus .slider-home .owl-nav .owl-next::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  color: #ffffff;
  font-size: 22px;
  text-align: center;
  padding-left: 2px;
}

.hour-bonus .slider-home .owl-nav .owl-next span {
  display: none;
}

.hour-bonus .slider-home .owl-nav .owl-prev span {
  display: none;
}

.hour-bonus .slider-home .owl-nav .owl-next {
  width: 35px;
  height: 35px;
  position: absolute;
  right: 12%;
  background-color: #009ea2;
  top: 40%;
  font-size: 40px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hour-bonus .slider-home .owl-nav .disabled {
  display: none;
}

.hour-bonus {
  text-align: center;
}

.hour-bonus .bonus-title {
  font-weight: 500;
  font-size: 15px;
  margin-right: 5px;
  display: block;
}

.hour-bonus-div {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 290px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
}

.hour-bonus-div .loader-wrap {
  position: absolute;
}

.hour-bonus-div::-webkit-scrollbar {
  display: none;
}

.hour-bonus-div .bonus-box {
  display: inline-block;
  width: 95%;
  padding-bottom: 40px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 10px;
  text-align: center;
  background-color: #ffffff;
  position: relative;
  height: 250px;
  border: 2px solid #eaeaea;
}

.hour-bonus-div .bonus-box.active-box {
  border-color: #009ea2;
}

.hour-bonus-div .buy-bonus {
  display: inline-block;
  width: 95%;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 10px;
  position: relative;
  text-align: center;
  background-image: url(../img/bonus-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 0;
  position: relative;
  height: 225px;
}

.hour-bonus-div .completed-bonus {
  display: inline-block;
  width: 95%;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 10px;
  position: relative;
  text-align: center;
  background-image: url(../img/bonus-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 0;
  position: relative;
  height: 225px;
}

.hour-bonus-div .bonus-box.completed-bonus .hours-icon img {
  width: 110px;
}

.hour-bonus-div .bonus-box.completed-bonus .hour {
  color: #ffffff;
  font-weight: 500;
  font-size: 13px;
}

.hour-bonus-div .bonus-box .info-text {
  display: flex;
  white-space: normal;
  height: 70px;
  font-size: 12px;
  font-weight: 600;
  color: #009194;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  overflow: hidden;
  letter-spacing: 0.3px;
  line-height: 16px;
}

.hour-bonus-div .bonus-box .info-modal {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #009ea2;
}

.hour-bonus-div .bonus-box .hours-icon img {
  width: 85px;
  height: 85px;
}

.hour-bonus-div .buy-bonus .hours-icon img {
  width: 110px;
}

.hour-bonus-div .bonus-box .hours-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}

.hour-bonus-div .bonus-box i {
  color: #009ea2;
  font-size: 50px;
  display: block;
  background-color: #ffffff;
  border-radius: 50%;
}

.hour-bonus-div .bonus-box .play-bonus-pasif i {
  color: #a1a1a1;
}

.hour-bonus-div .bonus-box .play-bonus.hourglass-play {
  background-color: #e6e6e6;
  border-radius: 25px;
}

.hour-bonus-div .bonus-box .play-bonus.hourglass-play .hourglass {
  position: absolute;
  bottom: 13px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.hour-bonus-div .bonus-box .play-bonus.hourglass-play .hourglass td > span {
  width: 20px;
  height: 15px;
}

.hour-bonus-div .bonus-box .play-bonus.star-play i {
  color: #ffb500;
}

.hour-bonus-div .bonus-box .play-bonus.star-play .stars {
  position: absolute;
  left: 0;
  top: -12px;
  right: 0;
  margin: 0 auto;
  width: 100%;
  color: #ffd300;
  animation: myfirst3 1.5s infinite;
}

.hour-bonus-div .bonus-box .play-bonus.star-play .stars .star-icon1 {
  display: block;
  position: absolute;
  top: 0px;
  left: -40px;
  right: 0;
  margin: 0 auto;
}

.hour-bonus-div .bonus-box .play-bonus.star-play .stars .star-icon2 {
  display: block;
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.hour-bonus-div .bonus-box .play-bonus.star-play .stars .star-icon3 {
  display: block;
  position: absolute;
  top: 0;
  right: -3px;
  margin: 0 auto;
}

.hour-bonus-div .bonus-box .check {
  display: flex;
  margin: 0 auto;
  background-color: #00b562;
  border-radius: 25px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  bottom: -15px;
}

.hour-bonus-div .bonus-box .check i {
  color: #ffffff;
  font-size: 25px;
  background-color: transparent;
}

.hour-bonus-div .bonus-box .disable-bonus i {
  color: #a9a8a5;
}

.hour-bonus-div .bonus-box .play-bonus {
  position: absolute;
  left: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  bottom: -25px;
}

.hour-bonus-div .bonus-box i.watching {
  color: #03c96b;
}

.hour-bonus-div .bonus-box .hour {
  font-weight: 900;
  font-size: 13px;
  display: block;
  width: max-content;
  margin: 0 auto;
  background-color: #efefef;
  padding: 5px 10px;
  border-radius: 25px;
}

.hour-bonus-div .bonus-box.buy-bonus .hour {
  color: #ffffff;
  font-weight: 500;
}

.hour-bonus-div .bonus-box .hour b {
  font-size: 15px;
  font-weight: 700;
}

.hour-bonus-div .bonus-box-disable {
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  justify-content: center;
  padding-bottom: 0;
}

.hour-bonus-div .bonus-box-disable .info-text {
  height: auto;
  padding-top: 10px;
}

.hour-bonus .get-bonus {
  display: inline-block;
  position: relative;
  margin-top: 10px;
}

.hour-bonus .get-bonus a {
  display: block;
  margin: auto;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff !important;
  border-radius: 25px;
  border: 3px solid white;
  background-color: #00b562;
  z-index: -1;
  animation: myfirst 1.8s infinite, leaves 1.8s ease-in-out infinite alternate;
  background-size: 300% 300%;
}

.hour-bonus .get-disable-bonus a {
  color: #a1a1a1 !important;
  border: 3px solid #dcdcdc;
  background-color: #dcdcdc;
  font-weight: 500;
  animation: none;
}

.hour-bonus-div .bonus-box .bonus-play.active-play i {
  color: #009ea2;
}

.hour-bonus .hour-bonus-bottom {
  display: block;
  font-weight: 800;
  font-size: 15px;
  color: #009ea2;
  margin-top: 8px;
}

.hour-bonus .hour-bonus-top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.info-modal {
  border: 0;
  background-color: transparent;
  margin: 0;
  padding: 0;
  color: #ffb000;
  font-size: 20px;
}

.hour-bonus .bonus-progress .progress-inside {
  display: inline-flex;
  justify-content: center;
  border-radius: 25px;
  background-color: #cbcbcb;
}

.hour-bonus .bonus-progress .progress-inside span:first-child {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  width: 45px;
}

.hour-bonus .bonus-progress .progress-inside span:last-child {
  border-top-right-radius: 25px;
  width: 45px;
  border-bottom-right-radius: 25px;
  border-right: 1px solid #d1d1d1;
}

.hour-bonus .bonus-progress .progress-inside span {
  width: 43px;
  height: 43px;
  border: 1px solid #d1d1d1;
  background-color: #e6e6e6;
  border-right: 0;
  font-size: 18px;
  color: #a9a8a5;
  line-height: 43px;
}

.hour-bonus .bonus-progress .progress-inside .active-span {
  background-color: #ffffff;
  color: #00c86c;
}

.hour-bonus .bonus-progress img {
  width: 35px;
}

.hour-bonus .bonus-progress {
  display: flex;
  align-items: center;
  margin-top: 10px;
  justify-content: center;
}

.home-nav {
  display: flex;
  justify-content: center;
}

.home-nav .nav-tabs {
  border: 0;
}

.home-nav .nav-tabs .nav-link.active {
  background-color: #009ea2;
  color: #ffffff;
  font-size: 13px;
  margin: 0;
  height: 31px;
  line-height: 30px;
  padding: 0 15px;
  font-weight: 500;
  border-radius: 25px;
  border: 1px solid #009ea2;
  margin-right: 5px;
  margin-left: 5px;
  display: flex;
  align-items: center;
}

.home-nav .nav-tabs .nav-link .step-nav1:after {
  background-image: url(../img/walk-blue.svg);
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  background-position: center;
  width: 11px;
  height: 23px;
  position: absolute;
  display: inline-block;
  top: 2px;
  right: 0;
}

.home-nav .nav-tabs .nav-link.active .step-nav1:after {
  background-image: url(../img/walk-white.svg);
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  background-position: center;
  width: 11px;
  height: 23px;
  position: absolute;
  display: inline-block;
  top: 2px;
  right: 0;
}

.home-nav .nav-tabs .nav-link .step-nav1 {
  width: 64px;
  position: relative;
}

.home-nav .nav-tabs .nav-link .jump-nav2:after {
  background-image: url(../img/jump-blue.svg);
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  background-position: center;
  width: 17px;
  height: 23px;
  position: absolute;
  display: inline-block;
  top: 2px;
  right: 0;
}

.home-nav .nav-tabs .nav-link.active .jump-nav2:after {
  background-image: url(../img/jump-white.svg);
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  background-position: center;
  width: 17px;
  height: 23px;
  position: absolute;
  display: inline-block;
  top: 2px;
  right: 0;
}

.home-nav .nav-tabs .nav-link .jump-nav2 {
  width: 80px;
  position: relative;
}

.home-nav .nav-tabs .nav-link .walk {
  width: 13px;
  padding-left: 3px;
}

.home-nav .nav-tabs .nav-link .jump {
  width: 19px;
  padding-left: 3px;
}

.home-nav .nav-tabs .nav-link {
  background-color: #ffffff;
  color: #009ea2;
  border: 1px solid #009ea2;
  font-size: 13px;
  margin: 0;
  height: 31px;
  line-height: 30px;
  padding: 0 15px;
  font-weight: 500;
  border-radius: 25px;
  margin-right: 5px;
  margin-left: 5px;
  display: flex;
  align-items: center;
}

/*.home-tab-content {
    height: 320px;
}*/

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.notifications-page ul {
  list-style-type: none;
  padding: 0;
}

.custom-control-label {
  margin-top: 4px;
}

.notifications-page ul li {
  padding: 8px 20px;
  border-radius: 0;
  margin-bottom: 15px;
  background-color: #f5f5f5;
}

.notifications-page .li-inside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  font-weight: 500;
  font-size: 14px;
}

.notifications-page .hour-select-btn {
  border: 0;
  background-color: #dcdcdc;
  width: 70px;
  height: 35px;
  margin-left: auto;
  border-radius: 8px;
  display: block;
  font-weight: 500;
  margin-top: 12px;
  font-size: 14px;
}

.custom-switch {
  padding-left: 0;
  text-align: center;
}

.custom-switch .custom-control-label::before {
  width: 3.2rem;
  height: 28px;
  border-radius: 25px;
  background-color: #b0b0b0;
  border-color: #b0b0b0;
  left: 0;
  top: -3px;
  position: relative;
}

.custom-switch .custom-control-label::after {
  background-color: #ffffff;
  width: 22px;
  height: 22px;
  border-radius: 25px;
  top: 0;
  left: 4px;
}

.custom-switch .custom-control-input,
.custom-control-label::after {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #009ea2;
  border-color: #009ea2;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  -webkit-transform: translateX(1.4rem);
  transform: translateX(1.4rem);
}

.modal-play-btn {
  margin-right: 0 !important;
  margin-left: 5px;
}

.delete-account-btn {
  background-color: #ff0000;
  display: block;
  margin: 0 auto;
  width: max-content;
  padding: 7px 15px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 25px;
  color: #ffffff;
}

.delete-account-btn.disabled-btn {
  background-color: #cdcdcd;
}

.delete-account-btn.disabled-btn:hover {
  background-color: #cdcdcd;
}

.delete-account-btn:hover {
  background-color: #de0000;
}

.delete-account-btn:focus {
  color: #ffffff;
}

.delete-account-btn:hover {
  color: #ffffff;
}

.delete-account-modal .modal-emoji-div {
  margin-top: -80px;
}

.delete-account-modal .modal-emoji-div img {
  margin-bottom: 0;
  width: 90px;
}

.delete-account-modal .delete-t1 {
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
  color: #000000;
  margin-top: 8px;
  font-weight: 500;
}

.delete-account-modal .delete-t2 {
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
  color: #fe121a;
  font-weight: 600;
}

.delete-account-modal .modal-btn {
  background-color: #ff0000;
  width: max-content;
}

.delete-account-modal .modal-btn.disable-delete-btn {
  background-color: #c0c0c0;
}

.delete-account-modal label {
  font-weight: 400;
}

.delete-account-modal label b {
  font-weight: 600;
}

.delete-account-modal input {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 15px;
  display: block;
}

.sss-tutorial-item {
  margin-bottom: 30px;
}

.privacy-list-p {
  padding-left: 15px;
}

.tutorial-page-body {
  overflow: hidden;
  padding-top: 0;
}

.first-tutorial {
  position: relative;
  background-color: #ffffff;
  min-height: 100vh;
}

.first-tutorial img {
  margin: 0 auto;
  height: 73vh;
  display: block;
}

.first-tutorial .exit-tutorial-div {
  width: 100%;
  background-color: transparent;
  height: 70px;
  position: absolute;
  z-index: 9;
}

.first-tutorial .exit-tutotiral {
  color: #000000;
  font-size: 14px;
  background-color: #e0e0e0;
  padding: 1px 10px;
  border-radius: 5px;
  font-weight: 500;
  z-index: 2;
  float: right;
  margin-top: 45px;
  margin-right: 15px;
}

.first-tutorial .sss-tutorial-item img {
  margin: 0 auto;
  width: 85%;
}

.first-tutorial .first-slide-wrap img {
  width: 100%;
}

.first-tutorial .first-slide-inside img {
  height: auto;
}

.first-tutorial .first-slide-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.first-tutorial .first-slide-inside {
  text-align: center;
}

.first-tutorial .first-slide-inside span {
  font-size: 34px;
  font-weight: 300;
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #009ea2;
}

.first-tutorial .first-slide-inside span b {
  display: block;
  font-weight: 600;
}

.first-tutorial .first-slide2 .left-area {
  width: 100%;
}

.first-tutorial .first-slide2 a {
  text-align: center;
  font-size: 18px;
  background: #009ea2;
  color: #ffffff;
  font-weight: 400;
  display: block;
  margin: 0 auto;
  border-radius: 0;
  width: 90%;
  margin-top: 30px;
  border-radius: 25px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
}

.first-tutorial .bg-icon {
  opacity: 0.04;
}

.first-tutorial .first-slide2 .tutorial-logo {
  width: 210px;
  margin-bottom: 30px;
  margin-top: 0;
}

.first-tutorial .exchange-svg {
  height: auto;
  width: 24px;
  display: inline-block;
  margin-left: 3px;
  margin-right: 4px;
  margin-top: -4px;
}

.first-tutorial .energy-i {
  color: #fdad01;
  font-size: 20px;
  margin-bottom: -4px;
  display: inline-block;
  margin-left: 3px;
  margin-right: 4px;
}

.first-tutorial .slide-number {
  display: block;
  border-radius: 50%;
  margin: 0 auto;
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  background-color: #009ea2 !important;
  width: 35px !important;
  height: 35px !important;
  text-align: center !important;
  line-height: 35px !important;
  margin-bottom: 8px;
}

.first-tutorial .slide-text-div {
  height: 15vh;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
  padding-bottom: 0;
}

.first-tutorial .last-item-carousel .slide-text-div {
  height: 10vh;
}

.first-tutorial .last-item-carousel img {
  height: 70vh;
}

.accept-tutorial-btn {
  left: 0;
  right: 0;
  text-align: center;
  font-size: 18px;
  background: #009ea2;
  color: #ffffff;
  font-weight: 400;
  width: 90%;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  margin: 0 auto;
  margin-top: 15px;
}

.accept-tutorial-btn:hover {
  color: #ffffff;
}

.first-tutorial .slide-text {
  font-weight: 600;
  display: block;
  font-size: 19px;
  text-align: center;
  color: #039aa1;
  margin-bottom: 2px;
  margin-top: 2px;
}

.first-tutorial .carousel-control-prev {
  top: 50%;
  transform: translate(0, -50%);
  position: fixed;
  bottom: auto;
  font-size: 35px;
  opacity: 1;
  background: #ff5317;
  left: 0;
  color: #ffffff;
  border-radius: 0;
  padding: 5px;
  width: 40px;
  height: 62px;
}

.first-tutorial .carousel-control-next {
  top: 50%;
  transform: translate(0, -50%);
  position: fixed;
  bottom: auto;
  font-size: 35px;
  opacity: 1;
  background: #ff5317;
  right: 0;
  color: #ffffff;
  border-radius: 0;
  padding: 5px;
  width: 40px;
  height: 62px;
}

.first-slide-wrap2 {
  margin-top: -37px;
}

.first-slide-wrap2 .first-slide2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.first-slide-wrap2 .first-slide2 ul {
  padding: 0;
  list-style-type: none;
  margin: 0 auto;
  max-width: 100%;
  width: 270px;
}

.first-slide-wrap2 .first-slide2 ul li {
  font-size: 24px;
  color: #00949a;
  font-weight: 300;
}

.first-slide-wrap2 .first-slide2 ul li span {
  display: flex;
  align-items: center;
}

.first-slide-wrap2 .first-slide2 ul li span img {
  width: 45px;
  margin: 0;
  margin-right: 10px;
}

.first-slide-wrap2 .first-slide2 .right-area {
  width: 35%;
}

.first-slide-wrap2 .first-slide2 img {
  width: 100%;
  height: auto;
}

.scroll-down {
  display: block;
  text-align: center;
  font-size: 20px;
  z-index: 100;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 10px;
  text-shadow: 0;
  width: 15px;
  height: 15px;
  border-bottom: 3px solid #009ea2;
  border-right: 3px solid #009ea2;
  z-index: 9;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
  -webkit-animation: fade_move_down 1.5s ease-in-out infinite;
  -moz-animation: fade_move_down 1.5s ease-in-out infinite;
  animation: fade_move_down 1.5s ease-in-out infinite;
}

/*animated scroll arrow animation*/

@-webkit-keyframes fade_move_down {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes fade_move_down {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade_move_down {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.adv-banner {
  margin: 20px 0 50px 0;
  position: relative;
}

.adv-banner .banner-name {
  background-color: #ffffff;
  position: absolute;
  right: 0;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  border-radius: 25px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 500;
  bottom: -30px;
  color: #919191;
  left: 0;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.shop-top {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
  border-radius: 25px;
  margin-bottom: 30px;
  font-weight: 500;
  font-size: 13px;
}

.shop-top .filter-btn {
  padding: 10px 0;
  width: 50%;
  text-align: center;
  border-right: 1px solid #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-top .filter-btn i {
  color: #009ea2;
  font-size: 14px;
  margin-right: 5px;
}

.shop-top .list-btn {
  padding: 10px 0;
  width: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-top .list-btn select {
  border: 0;
  font-weight: 500;
  line-height: normal;
}

.shop-top .list-btn i {
  color: #009ea2;
  margin-right: 4px;
  font-size: 18px;
}

.content2-page {
  background-color: #ffffff;
  padding: 15px 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  font-weight: 500;
}

.yeni-modal-bonus span {
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 15px;
  display: block;
}

.daily-bonus .daily-bonus-title {
  text-align: center;
  background-color: #fff0b6;
  border-radius: 25px;
  width: max-content;
  padding: 5px 10px;
  margin: 0 auto;
  margin-bottom: 5px;
}

.daily-bonus .daily-bonus-title span {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin: 5px 0;
}

.daily-bonus .alert-bonus {
  text-align: center;
  margin: 0;
  font-weight: 500;
  color: #000000;
  margin-top: 20px;
  margin-bottom: 10px;
}

.daily-bonus .alert-bonus span {
  display: block;
  font-size: 13px;
  margin: 5px 0;
}

.daily-bonus ul {
  padding: 0;
  list-style-type: none;
}

.daily-bonus ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 9px 0;
  margin: 0 auto;
  width: 300px;
  max-width: 100%;
}

.daily-bonus ul li.left {
  justify-content: flex-start;
}

.daily-bonus ul li.right {
  justify-content: flex-end;
}

.daily-bonus ul li.left:first-child:before {
  height: 47px;
}

.daily-bonus ul li.left:last-child .step-icon {
  font-size: 28px;
  width: 50px;
  height: 50px;
}

.daily-bonus ul li.left:last-child:before {
  height: 50px;
  left: 24px;
  bottom: 38px;
}

.daily-bonus ul li.left::before {
  content: "";
  position: absolute;
  width: 3px;
  background-color: #009a53;
  height: 69px;
  left: 14px;
  bottom: 0px;
  z-index: -1;
}

.daily-bonus ul li.left::after {
  content: "";
  position: absolute;
  width: 62.4%;
  background-color: #009a53;
  height: 3px;
  left: 14px;
  bottom: -3px;
  z-index: -1;
}

.daily-bonus ul li.right::before {
  content: "";
  position: absolute;
  width: 3px;
  background-color: #009a53;
  height: 68px;
  right: 98px;
  bottom: -1px;
  z-index: -1;
}

.daily-bonus ul li.right::after {
  content: "";
  position: absolute;
  width: 62.4%;
  background-color: #009a53;
  height: 3px;
  left: 15px;
  bottom: -1px;
  z-index: -1;
}

.daily-bonus ul li:last-child::after {
  display: none;
}

.daily-bonus ul li .step-icon {
  font-size: 14px;
  color: #ffffff;
  background-color: #009a53;
  border-radius: 50%;
  padding: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.daily-bonus ul li:last-child {
  width: 320px;
  padding-top: 27px;
}

.daily-bonus ul li:last-child .step-icon {
  font-size: 45px;
}

.daily-bonus ul li span {
  display: block;
}

.daily-bonus ul li .step-text {
  margin-left: 20px;
  padding: 5px 10px;
  background-color: #ffffff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  width: 65px;
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
}

.daily-bonus ul li .day {
  font-weight: 600;
  text-align: center;
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
  color: #000000;
}

.daily-bonus ul li .pay {
  font-weight: 900;
  color: #009a53;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.daily-bonus ul li .pay i {
  margin-right: 5px;
}

.daily-bonus .last-stars-div {
  position: absolute;
  top: -10px;
  left: -1px;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.daily-bonus .last-stars-div .last-stars-inside {
  display: flex;
  position: relative;
}

.daily-bonus .last-stars-div .last-stars-inside i {
  font-size: 16px;
}

.daily-bonus .last-stars-div .last-stars-inside .star-icon1 {
  font-size: 13px;
  position: absolute;
  top: 0px;
  left: 2px;
  color: #ffd300;
  animation: myfirst3 1.5s infinite;
}

.daily-bonus .last-stars-div .last-stars-inside .star-icon2 {
  position: absolute;
  top: -10px;
  left: 18px;
  margin-left: auto;
  margin-right: auto;
  color: #ffd300;
  animation: myfirst3 1.5s infinite;
}

.daily-bonus .last-stars-div .last-stars-inside .star-icon3 {
  font-size: 13px;
  position: absolute;
  top: 0px;
  left: 38px;
  color: #ffd300;
  animation: myfirst3 1.5s infinite;
}

.daily-bonus .total-price {
  margin: 0 auto;
  display: flex;
  font-size: 13px;
  align-items: center;
  width: max-content;
  border-radius: 15px;
  padding: 4px 8px;
  background-color: #ffffff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  color: #000000;
  font-weight: 600;
}

.daily-bonus .total-price .pay {
  color: #009a53;
  font-size: 18px;
  margin-left: 6px;
}

.shop-menu {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 9991;
  transform: translateX(100%);
  transition: all 0.3s ease 0s;
  padding: 15px;
}

.shop-menu .close-div {
  display: flex;
  align-items: center;
  height: 10vh;
}

.shop-menu .save-div {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.shop-menu .price-rank {
  display: flex;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.shop-menu .price-rank li span {
  padding-right: 20px;
  display: block;
  font-size: 18px;
  color: #009a53;
  font-weight: 700;
}

.shop-menu .price-rank li {
  position: relative;
}

.shop-menu .price-rank li::after {
  content: "-";
  position: absolute;
  right: 6px;
  top: -3px;
  font-size: 22px;
  font-weight: 700;
  color: #009a53;
}

.shop-menu .price-rank li:last-child:after {
  display: none;
}

.shop-menu .price-rank li span i {
  color: #009a53;
}

.shop-menu .filter-title {
  font-weight: 500;
  font-size: 16px;
  display: block;
  margin-bottom: 15px;
  text-align: center;
}

.shop-menu .filter-group {
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f3f3;
  margin-bottom: 20px;
}

.shop-menu .filter-group:last-child {
  border-bottom: 0;
}

.shop-menu .select-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.shop-menu .select-list li {
  border-bottom: 1px solid #e3e3e3;
}

.shop-menu .select-list li:last-child {
  border-bottom: 0;
}

.shop-menu .select-list a {
  padding-left: 32px;
  background-color: #f7f7f7;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}

.shop-menu .select-list a.active::before {
  position: absolute;
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #ffffff;
  padding: 3px;
  font-size: 10px;
  background-color: #009a53;
}

.shop-menu .select-list a::before {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  background-color: #e7e7e7;
  left: 6px;
}

.shop-menu .shop-close-btn {
  -webkit-box-shadow: 0px 0px 18px 0px rgb(210 210 210);
  -moz-box-shadow: 0px 0px 18px 0px rgba(210, 210, 210, 1);
  box-shadow: 0px 0px 18px 0px rgb(210 210 210);
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #000000;
  background-color: #ffffff;
  margin-right: 20px;
  margin-left: auto;
}

.shop-menu.active {
  transform: translateX(0%);
}

.shop-menu .shop-menu-category {
  display: flex;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.shop-menu .shop-menu-category li:first-child {
  margin-left: 0;
}

.shop-menu .shop-menu-category li {
  margin: 0 7px;
}

.shop-menu .shop-menu-category li a {
  padding: 7px 15px;
  background-color: #ffffff;
  position: relative;
  border-radius: 25px;
  display: block;
  font-weight: 600;
  font-size: 14px;
  -webkit-box-shadow: 0px 0px 6px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 6px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 6px 0px rgb(204 204 204);
}

.shop-menu .shop-menu-category li a.active::before {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 0;
  font-weight: 900;
  top: -8px;
  color: #009a53;
  font-size: 16px;
}

.shop-fist-page .category-list-div .category-box {
  display: flex;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  background-color: #ffffff;
  justify-content: space-evenly;
}

.shop-fist-page .category-list-div .category-box span {
  display: block;
  font-size: 16px;
  font-weight: 500;
  padding-top: 10px;
  padding-left: 6px;
  color: #009ea2;
}

.shop-fist-page .category-list-div .category-box img {
  width: 85px;
}

.category-shop {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.category-shop .filter-btn {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.category-shop .filter-btn img {
  width: 20px;
}

.category-shop ul {
  list-style-type: none;
  margin: 0;
  padding: 8px 5px;
  display: flex;
  align-items: center;
  width: 85%;
  overflow: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.category-shop ul::-webkit-scrollbar {
  display: none;
}

.category-shop ul::-webkit-scrollbar {
  background-color: #dbdbdb;
  height: 3px;
}

.category-shop ul li:first-child {
  margin: 0;
  margin-right: 7px;
}

.category-shop ul li {
  margin: 0 7px;
}

.category-shop ul li a {
  padding: 7px 15px;
  background-color: #ffffff;
  position: relative;
  border-radius: 25px;
  display: block;
  font-weight: 600;
  font-size: 12px;
  -webkit-box-shadow: 0px 0px 6px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 6px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 6px 0px rgb(204 204 204);
}

.category-shop ul li a.star-product {
  animation: myfirst3 1.5s infinite;
}

.category-shop ul li a.active::before {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 0;
  font-weight: 900;
  top: -8px;
  color: #009ea2;
  font-size: 16px;
}

.multi-range {
  width: 100%;
  height: 45px;
  position: relative;
  margin-bottom: 2em;
}

.multi-range__track {
  height: 10px;
  width: 100%;
  background: transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.multi-range__track-bg {
  height: 100%;
  width: 95%;
  background: #ccc;
  position: absolute;
  top: 0;
  left: 2.5%;
}

.multi-range__fill {
  height: 100%;
  width: 100%;
  background: #2994b2;
  background: linear-gradient(to right, #2994b2 0%, #91157e 100%);
  position: absolute;
  top: 0;
  left: 0;
}

.multi-range__handle {
  height: 100%;
  width: 5%;
  background: #343434;
  position: absolute;
  top: 50%;
  cursor: -webkit-grab;
  cursor: grab;
  transform: translateY(-50%);
  border-radius: 4px;
}

.multi-range__handle:focus:first-child {
  border: 3px solid #2994b2;
}

.multi-range__handle:focus:last-child {
  border: 3px solid #91157e;
}

.multi-range__ticks {
  height: 100%;
  width: 95%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 2.5%;
  display: flex;
  justify-content: space-between;
}

.multi-range__tick {
  width: 2px;
  height: 100%;
  background: #fff;
}

.multi-range__labels {
  font-size: 14px;
  position: absolute;
  left: 2.5%;
  min-width: 100%;
  overflow: visible;
  top: calc(100% + 0.5em);
}

.multi-range__labels > .label {
  position: absolute;
  display: none;
}

.bonus-product-page ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  margin: 0 auto;
}

.bonus-product-page ul li {
  margin-bottom: 15px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  border-radius: 10px;
  background-color: #ffffff;
  position: relative;
}

.bonus-product-page ul li a {
  width: 100%;
  font-weight: 500;
  font-size: 14px;
}

.bonus-product-page ul li a .products-title {
  display: block;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  padding: 10px;
  width: 75%;
}

.bonus-product-page ul li a .products-img {
  margin-bottom: 0;
  padding: 5px;
  padding-bottom: 0;
  position: relative;
  max-width: 100%;
  display: flex;
  align-items: center;
}

.bonus-product-page ul li a .products-img img {
  border-radius: 10px;
}

.bonus-product-page .bottom-product {
  display: flex;
  align-items: center;
}

.bonus-product-page .bottom-product .active-product {
  width: 25%;
  background-color: #27d760;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  margin-right: 10px;
  font-size: 11px;
  color: #ffffff;
}

.bonus-product-page .bottom-product .passive-product {
  width: 25%;
  background-color: #b6b6b6;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  margin-right: 10px;
  font-size: 11px;
  color: #ffffff;
}

.bonus-product-page
  ul
  li
  a
  .products-img
  .bonus-product-page
  ul
  li
  a
  .products-img
  img {
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bonus-product-detail-page .list-title {
  font-weight: 500;
  color: #ff4e00;
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.bonus-product-detail-page .friends ul li {
  border-radius: 25px;
  padding: 5px 6px;
  margin-bottom: 14px;
  height: 50px;
}

.bonus-product-detail-page .friends ul li .number {
  width: 52px;
}

.bonus-product-detail-page .friends ul li .profile-picture {
  width: 33px;
  height: 32px;
  line-height: 33px;
  font-size: 11px;
}

.bonus-product-detail-page .list-picture-img {
  width: 35px;
  height: 35px;
}

.bonus-product-detail-page .friends ul li.winner {
  background-color: #a2f9c3;
  box-shadow: none;
}

.bonus-product-detail-page .friends ul li .date-div {
  margin-left: 8px;
  font-weight: 400;
  color: #ff4e00;
  font-size: 11px;
  margin-top: 5px;
}

.bonus-product-detail-page .friends ul li .date-div b {
  font-weight: 700;
  margin-right: 2px;
}

.bonus-product-detail-page .friends ul li .date-div span {
  margin-right: 10px;
}

.bonus-product-detail-page .products-top .products-box {
  position: relative;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  background-color: #ffffff;
  margin-bottom: 15px;
  padding: 5px;
  position: relative;
  max-width: 100%;
  display: flex;
  align-items: center;
}

.bonus-product-detail-page .products-top .products-box img {
  border-radius: 10px;
}

.star-content-page ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: 5px;
  font-weight: 400;
  font-size: 13px;
}

.star-content-page ul li {
  margin: 8px 0;
}

.star-content-page h2 {
  font-size: 14px;
  margin-top: 15px;
  font-weight: 500;
  margin-bottom: 0;
  text-align: center;
}

.star-content-page ul.list-gift {
  font-weight: 400;
  margin-top: 15px;
  font-size: 14px;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 10px;
}

.star-content-page .app-btn {
  margin-top: 21px;
}

.friends ul li .emoji-div {
  display: flex;
  align-items: center;
  position: absolute;
  right: 65px;
  text-align: center;
}

.friends ul li .emoji-div .emoji-div-inside {
  margin-right: 2px;
}

.friends ul li .emoji-div .emoji-div-inside:last-child {
  margin-right: 0;
}

.friends ul li .emoji-div .emoji-div-inside .total span {
  font-size: 10px;
  font-weight: 600;
  width: 35px;
  display: block;
}

.friends ul li .emoji-div .emoji-div-inside .icon {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.friends ul li .emoji-div .emoji-div-inside img {
  width: 18px;
}

.friends ul li .emoji-div .emoji-div-inside.like img {
  width: 20px;
}

.friends ul li .emoji-div .emoji-div-inside.active.like .total span {
  color: #f9595f;
}

.friends ul li .emoji-div .emoji-div-inside.active.clapping .total span {
  color: #ffb100;
}

.friends ul li .emoji-tab {
  text-align: center;
  margin-right: 15px;
}

.friends ul li .emoji-tab .emoji-tab-img-div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.friends ul li .emoji-tab .emoji-tab-img-box {
  display: inline-block;
  line-height: normal;
}

.friends ul li .emoji-tab .emoji-tab-img-div img {
  width: 24px;
  display: block;
}

.friends ul li .emoji-tab span {
  font-weight: 700;
  font-size: 12px;
  display: block;
  padding-top: 5px;
}

.friends ul li .emoji-tab .like {
  color: #000000;
  font-weight: 800;
  font-size: 10px;
}

.friends ul li .emoji-tab .lock-like-btn {
  color: #a4a4a4;
}

.friends ul li .emoji-tab .lock-like {
  padding-top: 0;
}

.friends ul li .emoji-tab .lock-like img {
  height: 22px;
}

.friends ul li .emoji-tab .like-btn {
  color: #44a4ec;
}

.friends ul li .emoji-tab .love {
  color: #f9595f;
}

.friends ul li .emoji-tab .clapping {
  color: #fab30f;
}

.friends ul li .emoji-tab .run {
  color: #64dca0;
}

.emoji-modal .emoji-modal-inside {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  z-index: 44;
}

.emoji-modal .emoji-modal-box {
  margin: 0 8px;
  width: 50px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-modal img {
  width: 40px;
}

.emoji-modal .modal-content {
  border-radius: 35px;
}

.emoji-modal .modal-body {
  padding: 0 10px;
}

.emoji-list-modal .nav {
  justify-content: space-between;
  flex-wrap: nowrap;
  border: 0;
  height: 6vh;
  align-items: center;
}

.emoji-list-modal .tab-content {
  height: 40vh;
  overflow: auto;
  position: relative;
  display: block;
}

.emoji-list-modal .friends ul li {
  height: 45px;
  margin: 10px;
}

.emoji-list-modal .nav .nav-link {
  border: 0;
  padding: 8px;
}

.emoji-list-modal .nav .nav-link.active {
  background-color: whitesmoke;
}

.emoji-list-modal .nav img {
  width: 20px;
}

.emoji-list-modal .nav span {
  font-weight: 600;
  font-size: 12px;
  margin-left: 4px;
}

.temin-ediliyor {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(208 240 244);
  color: #009ea1;
  font-weight: 500;
  border-radius: 25px;
  width: 100%;
  margin: 0 auto;
  font-size: 13px;
  padding: 6px 10px;
  margin: 20px auto;
  height: 43px;
}

.temin-ediliyor svg {
  width: 26px;
  fill: #009ea1;
  margin-right: 5px;
  display: block;
}

.request-product {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0db87d;
  color: #ffffff;
  font-weight: 500;
  border-radius: 25px;
  width: max-content;
  margin: 0 auto;
  font-size: 13px;
  padding: 6px 20px;
}

.request-product i {
  margin-right: 5px;
  font-size: 12px;
}

.blog-box {
  background-color: #ffffff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  padding: 10px;
  position: relative;
}

.blog-box .inside {
  /* display: flex; */
  /* align-items: center; */
  justify-content: center;
  position: relative;
}

.blog-box .img-div {
  border-radius: 10px;
  background-image: url(../img/load-icon.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  background-position-y: 50%;
  position: relative;
  padding-top: 63%;
  background-color: #e8e8e8;
}

.blog-box .img-div img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
}

.blog-box .info-div {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 10px;
  background-color: rgb(0 188 194 / 91%);
  color: #ffffff;
}

.blog-box .sponsor {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #f7ce00;
  border-radius: 25px;
  padding: 5px;
  font-size: 11px;
  font-weight: 600;
}

.blog-box .info-div .title {
  font-size: 14px;
  font-weight: 400;
}

.blog-box .info-sm {
  display: flex;
  align-items: center;
  margin-top: 7px;
  font-size: 13px;
}

.blog-box .info-sm .tag {
  padding: 4px 9px;
  border-radius: 10px;
  display: block;
  width: max-content;
  font-weight: 500;
  background-color: #efefef;
  color: #000000;
}

.blog-box .info-sm .date {
  display: block;
  margin-left: 5px;
}

.blog-box .detail-blog h1 {
  font-size: 20px;
  margin-bottom: 10px;
}

.blog-box .detail-blog .info-sm {
  margin: 10px 0;
}

.blog-box .detail-blog {
  margin-top: 15px;
}

.blog-box .detail-blog p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.blog-box .detail-blog h2 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 15px;
}

.owl-stage {
  padding-left: 0 !important;
}

.home-blog .item {
  padding: 10px 7px;
}

.home-blog .slider-top-div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 20px;
}

.home-blog .slider-top-div h2 {
  font-size: 16px;
  margin: 0;
}

.home-blog .slider-top-div .app-btn {
  width: max-content;
  padding: 0;
  margin: 0;
  margin-top: 5px;
  background-color: transparent;
  color: #000000;
  font-weight: 500;
  font-size: 13px;
}

.home-blog .blog-box .info-div .title {
  font-size: 13px;
}

.home-blog .blog-box .info-sm .tag {
  font-size: 11px;
}

.home-blog .blog-box .info-sm .date {
  font-size: 12px;
}

.blog-page.blog-detail-page .comment-blog {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: 10px;
}

.blog-page.blog-detail-page .comment-blog a {
  padding: 10px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  width: max-content;
  margin: 0 10px;
  align-items: center;
  justify-content: center;
  background-color: #edf9ff;
}

.blog-page.blog-detail-page .comment-blog a img {
  width: 20px;
  margin-right: 5px;
}

.blog-page.blog-detail-page .comment-blog a.active span {
  color: #0088ee;
}

.blog-page.blog-detail-page .blog-box {
  padding: 10px;
}

.blog-page .category-shop ul {
  width: 100%;
}

.blog-page .category-shop ul li {
  margin: 0 4px;
}

.home-blog {
  margin-right: -15px;
  margin-left: -5px;
  margin-bottom: 25px;
}

.challenge-end-page .card-header h2 {
  margin: 0;
}

.challenge-end-page .card {
  background-color: #ffffff;
  border-radius: 25px !important;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
  padding: 5px;
  margin-bottom: 15px;
  border: 0;
}

.challenge-end-page .card-header {
  background: transparent;
  border: 0;
  padding: 0;
}

.challenge-end-page .card-header button {
  font-size: 15px;
  background-color: #e0f4f4;
  text-align: center;
  padding: 12px;
  font-weight: 600;
  border-radius: 25px;
  width: 100%;
  display: block;
  color: #009ea2;
  outline: 0;
  border: 0;
}

.challenge-end-page ul {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.challenge-end-page ul li.this-week {
  max-height: 55vh;
  overflow: auto;
}

.challenge-end-page ul li.this-week .date {
  margin-bottom: 20px;
}

.challenge-end-page ul li .date {
  font-size: 15px;
  background-color: #e0f4f4;
  text-align: center;
  padding: 10px 5px;
  font-weight: 600;
  border-radius: 25px;
  width: 100%;
  display: block;
  color: #009ea2;
}

.challenge-end-page ul li .text {
  display: block;
  text-align: center;
  padding-top: 10px;
}

.challenge-end-page ul li .text b {
  color: #00b31d;
  font-weight: 400;
}

.league-page .friends .first-league-table .first-league-table-bottom {
  display: flex;
  align-items: center;
  position: absolute;
  top: 8px;
  right: 10px;
}

.league-page .friends .first-league-table li {
  display: block;
  height: auto;
  margin-bottom: 20px;
}

.league-page .friends .first-league-table li .inside {
  display: flex;
  padding-bottom: 5px;
  padding-top: 5px;
}

.league-page .friends .first-league-table .lock-challenge-btn {
  background-color: #cbcbcb;
  border: 1px solid #cbcbcb;
  color: #ffffff;
  font-weight: 500;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.league-page .friends .first-league-table .lock-challenge-btn img {
  height: 22px;
}

.league-page .friends .first-league-table .challenge-btn {
  background-color: #d3fdff;
  border: 1px solid #d3fdff;
  color: #20acb0;
  font-weight: 500;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
}

.league-page .friends .first-league-table .activty-btn {
      min-width: 30px;
    height: 40px;
    position: relative;
    text-align: center;
}

.league-page .friends .first-league-table .activty-btn img {
  height: 26px;
}

.league-page .friends .first-league-table .activty-btn .total {
  font-size: 10px;
  border-radius: 25px;
  display: block;
  font-weight: 800;
}

.league-page .friends .first-league-table .challenge-btn img {
  fill: #20acb0;
  width: 20px;
}

.league-page .friends .first-league-table .challenge-btn.waiting img {
  fill: #000000;
}

.league-page .friends .first-league-table .challenge-btn.started img {
  fill: #ffffff;
}

.league-page .friends .first-league-table .challenge-btn.waiting {
  background-color: #ffbf00;
  color: #000000;
  border: 1px solid #ffbf00;
}

.league-page .friends .first-league-table .challenge-btn.started {
  background-color: #14c257;
  color: #ffffff;
  border: #14c257;
}

.league-page .friends .first-league-table .challenge-btn.reject {
  background-color: #e42727;
  color: #ffffff;
  border: #e42727;
}

.league-page .friends .first-league-table .challenge-btn.lock {
  background-color: #cbcbcb;
  color: #ffffff;
  border: #cbcbcb;
}

.league-page .friends .first-league-table .challenge-btn.reject svg {
  fill: #ffffff;
}

.noth-options {
  background-color: #ffffff;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 8px 2px rgb(235 235 235);
  margin-top: 35px;
  padding: 15px 0;
}

.noth-options ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.noth-options ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 10px;
  font-weight: 500;
  font-size: 14px;
  border-bottom: 1px solid #e4f0f0;
  max-width: 100%;
}

.noth-options ul li:last-child {
  border-bottom: 0;
}

.noth-options ul li span {
  display: flex;
  align-items: center;
}

.noth-options ul li span img {
  width: 24px;
  margin-right: 5px;
}

.noth-options .noth-title {
  text-align: center;
  display: block;
  padding-bottom: 10px;
  font-weight: 700;
}

.noth-options input[type="radio"] {
  display: none;
}
.noth-options input[type="radio"] + label {
  color: #292b2a;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 20px;
}

.noth-options .list-radio:last-child input[type="radio"] + label {
  margin: 0;
}

.noth-options input[type="radio"] + label span {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  border-radius: 50%;
  background-color: #b0b0b0;
}
.noth-options input[type="radio"]:checked + label span {
  background-color: #009ea2;
}
.invite-page.invite-page-new p {
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
}

.invite-page.invite-page-new p span {
  background-color: rgb(0 158 162 / 15%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #009ea2;
  margin-right: 5px;
  font-weight: bolder;
  font-size: 18px;
}

.invite-page.invite-page-new p b {
  font-weight: 600;
}

.invite-page.invite-page-new .invite-box {
  margin: 30px 0;
  border: 2px solid #009ea2;
  border-radius: 25px;
  justify-content: space-between;
  padding: 0 40px;
}

.invite-page.invite-page-new .invite-box .code-div label {
  display: block;
  padding: 0;
  margin: 0;
  text-align: left;
  color: #009ea2;
}

.invite-page.invite-page-new .invite-box .invite-icon {
  color: #009ea2;
  background-color: #ffffff;
  margin-left: 0;
  font-size: 22px;
}

.invite-page.invite-page-new .step-box-ul {
  list-style-type: none;
  padding: 0;
  margin-top: 40px;
}

.invite-page.invite-page-new .step-box-ul li {
  text-align: left;
  position: relative;
  width: 300px;
  padding-bottom: 50px;
  margin: 0 auto;
}

.invite-page.invite-page-new .step-box-ul li:last-child {
  padding-bottom: 0;
}

.invite-page.invite-page-new .step-box-ul li p:last-child {
  padding-bottom: 0;
}

.invite-page.invite-page-new .step-box-ul li.right:last-child p:last-child {
  width: 100%;
  text-align: right;
}

.invite-page.invite-page-new .step-box-ul li.left {
  text-align: left;
}

.invite-page.invite-page-new .step-box-ul li.right {
  text-align: right;
  margin-left: auto;
  padding-top: 50px;
}

.invite-page.invite-page-new .step-box-ul li.right p:last-child {
  text-align: left;
  margin-left: auto;
  width: 270px;
  max-width: 100%;
}

.invite-page.invite-page-new .step-box-ul li.left::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 69px;
  left: 14px;
  bottom: 0px;
  z-index: -1;
  border: 1px rgb(0 158 162 / 63%);
  border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li.left:first-child:before {
  height: 25px;
}

.invite-page.invite-page-new .step-box-ul li.left::after {
  content: "";
  position: absolute;
  width: 65%;
  height: 1px;
  left: 14px;
  bottom: -3px;
  z-index: -1;
  z-index: -1;
  border: 1px rgb(0 158 162 / 63%);
  border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li.right::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 25px;
  right: 90px;
  bottom: 4px;
  z-index: -1;
  z-index: -1;
  border: 1px rgb(0 158 162 / 63%);
  border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li.right::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 25px;
  right: 90px;
  top: 5px;
  z-index: -1;
  z-index: -1;
  border: 1px rgb(0 158 162 / 63%);
  border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li.step3 {
  padding-top: 50px;
}

.invite-page.invite-page-new .step-box-ul li.step3::after {
  bottom: auto;
  top: 0;
  left: 15px;
}

.invite-page.invite-page-new .step-box-ul li.step3::before {
  bottom: auto;
  top: 5px;
  height: 25px;
}

.invite-page.invite-page-new .step-box-ul li.step4::after {
  bottom: auto;
  top: -26px;
  left: 15px;
  z-index: -1;
  border: 1px rgb(0 158 162 / 63%);
  border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li.step4::before {
  bottom: auto;
  top: 0;
  left: 15px;
  width: 65%;
  height: 0px;
  z-index: -1;
  border: 1px rgb(0 158 162 / 63%);
  border-style: dashed;
}

.invite-page.invite-page-new .step4 .step-after2 {
  content: "";
  position: absolute;
  width: 1px;
  height: 25px;
  right: 90px;
  top: 0;
  z-index: -1;
  z-index: -1;
  border: 1px rgb(0 158 162 / 63%);
  border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li img {
  width: 30px;
  display: inline-block;
  margin-left: 2px;
}

.invite-page.invite-page-new .invite-btn {
  width: 250px;
  font-size: 18px;
  margin: 30px auto;
}

.invite-page.invite-page-new .friends ul {
  margin-top: 10px;
}

.app-modal1 .modal-btn.challenge-modal-btn {
  background-color: #d3fdff;
  border: 1px solid #d3fdff;
  color: #20acb0;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.app-modal1 .modal-btn.challenge-modal-btn img {
  width: 26px;
  margin: 0;
  margin-right: 5px;
}

.app-modal1 .modal-btn.challenge-istek-modal-btn {
  background-color: #ffbf00;
  border: 1px solid #ffbf00;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.app-modal1 .modal-btn.challenge-istek-modal-btn img {
  width: 26px;
  margin: 0;
  margin-right: 5px;
}

.app-modal1 .modal-btn.challenge-red-modal-btn {
  background-color: #e42727;
  border: 1px solid #e42727;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.app-modal1 .modal-btn.challenge-red-modal-btn img {
  width: 26px;
  margin: 0;
  margin-right: 5px;
}

.home-vote-box {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  width: 300px;
  margin: 0 auto;
  margin-bottom: 25px;
}

.home-vote .vote-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 5px 0;
}

.home-vote ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.home-vote ul li {
  background-color: #eef2f3;
  border-radius: 25px;
  font-weight: 500;
  font-size: 16px;
  margin: 15px 0;
  position: relative;
  padding: 10px 15px;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
}

.home-vote ul li .text {
  display: block;
  z-index: 2;
  position: relative;
  font-size: 15px;
}

.home-vote ul li .ratio {
  font-size: 13px;
  font-weight: 900;
  position: relative;
  z-index: 2;
}

.home-vote ul li .background {
  display: none;
}

.home-vote ul li.active .background {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 1;
  left: 0;
  background-color: #0dd398;
  -webkit-animation: linear;
  -webkit-animation-name: run;
  -webkit-animation-duration: 1s;
  width: 100%;
  transition: 0.3s;
  overflow: hidden;
}

.home-vote ul li.total-other .background {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 1;
  left: 0;
  background-color: #dbe2e4;
  -webkit-animation: linear;
  -webkit-animation-name: run;
  -webkit-animation-duration: 1s;
  width: 100%;
  transition: 0.3s;
  overflow: hidden;
}

.home-vote .home-vote-box.product-box ul {
  display: flex;
  align-items: center;
}

.home-vote .home-vote-box.product-box img {
  width: 200px;
  border-radius: 25px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.home-vote .home-vote-box.product-box ul li {
  display: block;
  text-align: center;
  margin: 10px;
  padding: 10px;
}

.home-vote .home-vote-box.product-box ul li.active {
  color: #ffffff;
}

.home-vote .home-vote-box.product-box ul li.active .background {
  animation: none;
}

.home-vote .home-vote-box.product-box.four-box {
  width: 100%;
}

.home-vote .home-vote-box.product-box.four-box ul li {
  margin: 5px;
  border-radius: 10px;
  width: 25%;
  text-align: center;
  background-color: #ffffff;
}

.home-vote .home-vote-box.product-box.four-box .active {
  background-color: #0dd398;
}

.home-vote .home-vote-box.product-box.four-box img {
  margin: 0 auto;
  width: 40px;
  display: block;
}

.quiz-modal-div {
  margin-bottom: 25px;
  background-color: #0dd398;
  text-align: center;
  padding: 10px 15px;
  border-radius: 10px;
  color: #ffffff;
  font-size: 16px;
}

.quiz-modal-div span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-modal-div img {
  width: 30px;
  margin-right: 6px;
}

@-webkit-keyframes run {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

.home-story {
  margin-bottom: 20px;
}

.home-story ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  width: 100%;
  overflow: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.home-story ul::-webkit-scrollbar {
  display: none;
}

.home-story ul li {
  min-width: 70px;
  display: inline-flex;
  text-align: center;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 500;
}

.home-story ul li a {
  display: block;
}

.home-story ul li a .img-div {
  border-radius: 50px;
  margin-bottom: 5px;
  overflow: hidden;
  position: relative;
  padding: 2px;
}

.home-story ul li a .img-div img {
  max-width: 100%;
  border-radius: 50px;
  border: 2px solid #ffffff;
}

.home-story ul li a .img-div::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  background: rgb(0, 123, 133);
  background: linear-gradient(308deg, rgb(0 158 162) 0%, rgb(0 200 205) 50%);
}

.home-story ul li span {
  display: block;
  font-weight: 500;
  font-size: 12px;
}

.home-story ul li:last-child {
  margin-right: 0;
}

.home-welcome-top {
  margin-bottom: 0;
  margin-top: -10px;
  width: max-content;
  background-color: #e2f6ff;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid #aee6e8;
  display: flex;
  align-items: center;
}

.home-welcome-top .text1 {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
}

.home-welcome-top .text2 {
  font-size: 14px;
  color: #009ea2;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95px;
  display: inline-block;
  margin-left: 3px;
}

.story-modal1 .modal-content {
  border: 0;
}

.story-modal1 .modal-body {
  padding: 0;
}

.story-modal-div img {
  max-width: 100%;
  display: block;
}

.story-modal-div .slide {
  display: grid;
}

.story-modal-div .slide-items {
  position: relative;
  grid-area: 1/1;
  border-radius: 5px;
  overflow: hidden;
}

.story-modal-div .slide-nav {
  grid-area: 1/1;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
}

.story-modal-div .slide-nav button {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  opacity: 0;
}

.story-modal-div .slide-items > * {
  position: absolute;
  top: 0px;
  opacity: 0;
  pointer-events: none;
}

.story-modal-div .slide-items > .active {
  position: relative;
  opacity: 1;
  pointer-events: initial;
}

.story-modal-div .slide-thumb {
  display: flex;
  grid-column: 1 / 3;
}

.story-modal-div .slide-thumb > span {
  flex: 1;
  display: block;
  height: 3px;
  background: rgba(0, 0, 0, 0.4);
  margin: 5px;
  border-radius: 3px;
  overflow: hidden;
}

.story-modal-div .slide-thumb > span.active::after {
  content: "";
  display: block;
  height: inherit;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  transform: translateX(-100%);
  animation: thumb 5s forwards linear;
}

.anket-modal-div .carousel-inner {
  margin-top: 13px;
}

.anket-modal-div .carousel-inner .carousel-item {
  margin-top: 0;
}

.anket-modal-div .carousel-inner .carousel-item .form-control {
  width: 250px;
  margin: 0 auto;
  border-radius: 40px;
}

.anket-modal-div .carousel-inner .carousel-item .dp-select-menu {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.anket-modal-div .carousel-inner .carousel-item .dp-select-menu::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  width: 20px;
  height: 20px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #009ea2;
  font-weight: bold;
  padding-top: 2px;
}

.anket-modal-div label {
  font-size: 15px;
  display: block;
  margin-bottom: 15px;
}

.anket-modal-div .app-btn {
  margin-top: 15px;
}

.anket-modal-div .slide-btn-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.anket-modal-div .slide-btn-div .carousel-control-next {
  width: 50%;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

.anket-modal-div .slide-btn-div .carousel-control-next span {
  color: #009ea2;
  padding: 0 6px;
  font-size: 25px;
}

.anket-modal-div .slide-btn-div .carousel-control-prev span {
  color: #009ea2;
  padding: 0 6px;
  font-size: 25px;
}

.anket-modal-div .slide-btn-div .carousel-control-prev {
  width: 50%;
  margin-right: auto;
  display: flex;
  justify-content: flex-start;
}

.anket-modal-div .slide-btn-div a {
  font-weight: 700;
  color: #000000;
  font-size: 13px;
  position: relative;
  opacity: 1;
}

.game-page-modal .video-modal-img {
  background: #3e8fdb;
}

.game-page-modal .video-modal-img img {
  width: 60px;
  max-width: unset;
  margin-top: 0;
}

@keyframes thumb {
  to {
    transform: initial;
  }
}

.friends ul li.bottom-loader {
  position: relative;
  width: 100%;
  padding: 0;
  height: 70px !important;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  border: 0;
}

.bottom-loader .loader-wrap {
  position: relative;
  z-index: 1;
}

.bottom-loader .loader-wrap .circle-loader {
  width: 65px;
  height: 65px;
  border-width: 3px;
}

.bottom-loader .loader-wrap img {
  width: 35px;
}

.stories.snapgram .story > .item-link > .item-preview {
  border-radius: 50%;
  padding: 0px;
  border: 2px solid #00c8cd;
}

.stories.carousel .story > .item-link > .info .name {
  display: block;
  font-weight: 500;
  font-size: 12px;
  word-wrap: break-word;
  line-height: normal;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
}

#zuck-modal-content .story-viewer .head .right .time {
  display: none !important;
}

#zuck-modal-content .story-viewer .slides .item > .media {
  position: absolute;
  left: 0;
  margin: auto;
  left: 0;
  right: 0;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 100%;
  top: 50%;
  transform: translateY(-50%);
}

#zuck-modal-content .story-viewer .slides .item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: rgb(0 0 0 / 10%);
  box-shadow: 0px 6px 15px 3px rgb(0 0 0 / 10%);
  padding-bottom: 55px;
}

.past-draw-slider-div {
  margin-top: 20px;
}

.past-draw-slider-div span {
  text-align: center;
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
  color: #009ea2;
  width: max-content;
  padding-top: 10px;
  font-size: 15px;
  font-weight: 600;
}

.owl-carousel.past-draw-slider {
  padding: 10px;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 5px 5px rgb(236 236 236);
  border-radius: 10px;
  background-color: #eefaff;
}

.owl-carousel.past-draw-slider .owl-item img {
  max-width: 150px;
}

.owl-carousel.past-draw-slider .img-box {
  background-color: #ffffff;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
  -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
  box-shadow: 0px 0px 8px 0px rgb(235 235 235);
  overflow: hidden;
}

.cargo-modal.medal-modal-select ul li {
  height: 36px;
}

.cargo-modal p b {
  font-size: 22px;
}

.cargo-modal ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cargo-modal ul li {
  background-color: #ffffff;
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  position: relative;
  /* box-shadow: 0px 0px 8px 5px rgb(235 235 235); */
  display: flex;
  align-items: center;
  position: relative;
  height: 65px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  margin: 0 5px;
  width: 50%;
  text-align: center;
}

.cargo-modal-inside p {
  margin-top: 10px;
  font-size: 16px;
  margin-bottom: 20px;
}

.cargo-modal-inside p b {
  display: inline-block;
}

.cargo-modal-inside .modal-emoji-div {
  margin-top: -70px;
}

.app-modal1b .cargo-modal-inside .modal-emoji-div img {
  margin-bottom: 0;
  width: 90px;
}

.cargo-modal ul li img {
  width: 20px;
  display: inline-block;
  margin: 0;
}

.cargo-modal ul li.active {
  padding-left: 32px;
  background-color: #00c76a;
  color: #ffffff;
}

.cargo-modal ul li.active::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  font-weight: 900;
  left: 5px;
  width: 20px;
  line-height: 20px;
  height: 20px;
  text-align: center;
  font-size: 12px;
  border-radius: 25px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #00ae5c;
  color: #ffffff;
}

.cargo-modal ul li.btn1 {
  background-color: #009ea2;
  color: #ffffff;
}

.cargo-modal ul li.btn2 {
  background-color: #009ea2;
  color: #ffffff;
}

.cargo-modal ul li span {
  font-weight: 400;
  font-size: 12px;
  margin-top: 3px;
  display: block;
}

.cargo-modal .select-list {
  margin-top: 0;
  margin-bottom: 15px;
}

.cargo-modal p {
  margin-top: 10px;
  font-size: 17px;
  margin-bottom: 10px;
}

.cargo-modal .modal-emoji-div {
  margin-top: -70px;
}

.cargo-modal ul li.disabled {
  background-color: #dcdcdc;
  padding-left: 32px;
}

.cargo-modal ul li.disabled::before {
  content: "\f057";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  font-weight: 900;
  line-height: 20px;
  margin-top: 15px;
  text-align: center;
  font-size: 18px;
  top: 0;
  color: #a1a1a1;
  left: 5px;
}

.medal-page .img-div a {
  font-size: 12px;
  margin-bottom: 10px;
  display: block;
  color: #ffffff;
  background-color: #00acb3;
  width: max-content;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  margin: 0 auto;
  margin-top: 5px;
}

.select-buy-div {
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: 6px;
}

.brand-form-page img {
  width: 100px;
  margin: 0 auto;
  display: block;
  margin-bottom: 20px;
}

.brand-form-page .info-div {
  margin-bottom: 25px;
}

.brand-form-page .alert-text {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #e30000;
  margin-bottom: 10px;
}

.brand-form-page .other-text {
  text-align: center;
  font-size: 14px;
  margin: 0;
}

.brand-form-page .other-text a {
  color: #009ea2;
  font-weight: bold;
}

.stories.carousel .story {
  margin-bottom: 0;
}

#zuck-modal-content .story-viewer .head {
  --safe-area-inset-top: calc(env(safe-area-inset-top) - 15px);
  margin-top: max(0px, var(--safe-area-inset-top));
}

#zuck-modal-content .story-viewer .slides-pointers {
  --safe-area-inset-top: calc(env(safe-area-inset-top) - 15px);
  margin-top: max(0px, var(--safe-area-inset-top));
  padding-top: 15px;
}

/* #zuck-modal-content .story-viewer .slides .item > .media {
  position: absolute;
  left: 0;
  margin: auto;
  left: 0;
  right: 0;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 100%;
  top: 50%;
  transform: translateY(-50%);
} */

#zuck-modal-content .story-viewer .head .left .time,
#zuck-modal-content .story-viewer .head .right .close {
  display: none;
}

.stories.snapgram .story > .item-link {
  text-decoration: none;
  color: #000000;
}
.stories.snapgram .story > .item-link > .item-preview {
  border-radius: 50%;
  padding: 0px;
  /* background: rgb(255, 201, 0);
  background: linear-gradient(
    36deg,
    rgb(255, 201, 0) 13%,
    rgb(255, 0, 95) 73%,
    rgb(255, 9, 237) 100%
  ); */
  border: 2px solid #00c8cd;
}
.stories.snapgram .story > .item-link > .item-preview img {
  border-radius: 50%;
  border: 3px solid #fff;
}

.stories.snapgram .story.seen img {
  opacity: 1;
}

.stories.snapgram .story.seen {
  opacity: 1;
}

.stories.snapgram .story.seen .item-preview {
  border: 2px solid #dbdbdb;
}

.stories.snapgram .story.seen > a {
  color: #000000 !important;
}

@media screen and (max-width: 709px) {
  .multi-range__labels > .label:nth-child(4n + 1) {
    display: block;
  }
}

@media screen and (min-width: 710px) {
  .multi-range__labels > .label:nth-child(odd) {
    display: block;
  }
}

@media screen and (min-width: 1560px) {
  .multi-range__labels > .label {
    display: block;
  }
}

#zuck-modal-content .story-viewer .head .right .close {
  display: block;
  color: snow;
  box-shadow: none;
  border: 0;
  text-shadow: none;
  opacity: 1;
  font-size: 42px;
  margin-top: 10px;
  border-radius: 25px;
  font-weight: 300;
  font-family: "Roboto", sans-serif;
  text-shadow: 0px 0px 4px rgb(102 102 102 / 35%);
}

#zuck-modal-content .story-viewer.with-back-button .head .left > .back {
  text-shadow: 0px 0px 4px rgb(102 102 102 / 35%);
}

#zuck-modal-content .story-viewer .head .left .info .name {
  text-shadow: 0px 0px 10px rgb(102 102 102 / 55%);
  font-weight: 500;
}

#zuck-modal-content .story-viewer .head .left {
  margin-top: 25px;
  margin-left: 15px;
}

.brands-logo-slider {
  margin-bottom: 10px;
}

.brands-logo-slider ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.brands-logo-slider ul li {
  margin-right: 13px;
  position: relative;
}

.brands-logo-slider ul li .img-box {
  -webkit-box-shadow: 0px 0px 6px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 6px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 6px 0px rgb(204 204 204);
  border-radius: 10px;
  display: block;
  margin: 4px 0;
}

.brands-logo-slider ul li.active .img-box::after {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 0;
  font-weight: 900;
  top: 0;
  color: #009ea2;
  font-size: 17px;
  width: max-content;
  background-color: #ffffff;
  border-radius: 25px;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brands-logo-slider ul img {
  width: 70px;
  height: 70px;
  border-radius: 10px;
}

.step-date-countdown {
  position: relative;
  display: block;
  width: max-content;
  margin: 0 auto;
  margin-bottom: 30px;
}

.step-date-countdown .text {
  background-color: #ffae00;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  color: #ffffff;
  display: block;
  width: max-content;
  margin: 0 auto;
}

.step-date-countdown img {
  width: 33px;
  position: absolute;
  right: -12px;
  top: -22px;
}

.step-date-countdown .countdown-items {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -5px;
}

.step-date-countdown .countdown-items span {
  width: 34px;
  height: 34px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #009ea2;
  border-radius: 5px;
  margin: 0 8px;
  font-size: 17px;
  font-weight: 500;
}

.notification-modal .icon-modal-div {
  background: rgb(10, 160, 243);
  background: linear-gradient(
    0deg,
    rgba(10, 160, 243, 1) 0%,
    rgba(98, 191, 139, 1) 93%
  );
  display: block;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  line-height: 53px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: -20px;
}

.notification-modal .icon-modal-div img {
  width: 35px;
}

.switch-input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
  display: block;
}

.switch-label {
  cursor: pointer;
  text-indent: -9999px;
  width: 60px;
  height: 30px;
  background: #a0a0a0;
  margin: 0;
  display: block;
  border-radius: 100px;
  position: relative;
  margin-left: 15px;
}

.switch-label:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

.switch-input:checked + label {
  background: #009ea2;
}

.notification-modal .modal-t5 {
  margin-bottom: 10px;
}

.notification-modal .switch-div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  margin-top: 25px;
}

.notification-modal b {
  font-weight: 500;
  display: block;
  margin-right: 10px;
}

.switch-input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

.notification-modal label:active:after {
  width: 20px;
}

label.input-has-value {
  color: red;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, 100px);
  transform: translate(0, 100px);
}

.modal.show .modal-dialog {
  transform: none;
}

.container-dropdown {
  width: 80px;
  display: flex;
  justify-content: end;
  margin-left: auto;
}

.container-dropdown .dropdown {
  position: relative;
  margin-top: 5px;
  width: 215px;
  height: 35px;
}

.container-dropdown .dropdown::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 1000;
  width: 8px;
  height: 8px;
  border: 2px solid #333;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg);
  transition: 0.5s;
  pointer-events: none;
}

.container-dropdown .dropdown.active::before {
  top: 16px;
  transform: rotate(-225deg);
}

.container-dropdown .dropdown input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #fff;
  font-size: 13px;
  border: none;
  outline: none;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid #e9e9e9;
}

.container-dropdown .dropdown .options {
  position: absolute;
  top: 50px;
  width: 100%;
  background: #fff;
  box-shadow: none;
  border-radius: 10px;
  overflow: hidden;
  display: none;
}

.container-dropdown .dropdown.active .options {
  display: block;
}

.container-dropdown .dropdown .options div {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
}

.container-dropdown .dropdown .options div:hover {
  background: #62baea;
  color: #fff;
}

.container-dropdown .dropdown .options div ion-icon {
  position: relative;
  top: 4px;
  font-size: 1.2em;
  margin-right: 10px;
}

.hour-select-modal {
  text-align: left;
  max-height: 225px;
  overflow-y: auto;
}

.hour-select-modal .hours-div {
  display: inline-block;
  width: 22%;
  text-align: center;
  height: 35px;
  line-height: 35px;
  background-color: #eeeeee;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 5px;
  margin-top: 5px;
  font-weight: 500;
  font-size: 14px;
  margin-right: 3px;
  margin-left: 3px;
}

.hour-select-modal .hours-div.active-hour {
  background-color: #009ea2;
  color: #ffffff;
}

.vertical-alignment-helper {
  display: table;
  height: 100%;
  width: 100%;
  padding: 10px;
  margin: 0 auto;
  pointer-events: none;
}

.vertical-align-center {
  display: table-cell;
  vertical-align: middle;
  pointer-events: none;
}

.modal-content {
  width: inherit;
  max-width: inherit;
  height: inherit;
  margin: 0 auto;
  pointer-events: all;
}

.img-modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(101 101 101 / 90%);
  z-index: 999;
}

.img-modal .modal-content {
  display: block;
  border-radius: 0;
  border: 0;
  width: 80%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.img-modal .modal-content,
#zoom-caption {
  -webkit-animation-name: zoom-img;
  -webkit-animation-duration: 0.2s;
  animation-name: zoom-img;
  animation-duration: 0.2s;
}

@-webkit-keyframes zoom-img {
  from {
    -webkit-transform: scale(0);
  }

  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom-img {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.img-modal .close-img {
  position: absolute;
  top: 40px;
  left: 30px;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s;
}

.img-modal .close-img:hover,
.close-img:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.adim-kaynak-modal .modal-emoji-div {
  margin-bottom: 10px;
}

.adim-kaynak-modal .app-btn {
  width: max-content;
  max-width: 100%;
}

.adim-kaynak-modal .noth-options {
  box-shadow: none;
  padding: 0;
  margin: 0;
  margin-bottom: 15px;
}

.adim-kaynak-modal .title {
  font-size: 20px;
  font-weight: 600;
}

.adim-kaynak-modal .big-text {
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 15px;
}

.adim-kaynak-modal .next-btn {
  width: max-content;
  display: block;
  font-size: 16px;
  margin-left: auto;
  margin-top: 10px;
  color: #009ea2;
  font-weight: 500;
}

.adim-kaynak-modal .next-btn .no-active {
  color: #b4b4b4;
}

.adim-kaynak-modal .list-radio {
  display: flex;
  align-items: center;
}

.adim-kaynak-modal .noth-options ul li {
  justify-content: center;
}

.adim-kaynak-modal .noth-options ul li .radio-profile {
  display: flex;
  align-items: center;
}

.adim-kaynak-modal .noth-options input[type="radio"] + label {
  margin: 0;
  margin-right: 20px;
}

.adim-kaynak-modal .ul-permission {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: 20px;
}

.adim-kaynak-modal .ul-permission li {
  text-align: left;
  margin-bottom: 15px;
}

.adim-kaynak-modal ul li:last-child {
  margin: 0;
}

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

.undo-btn.hourglass {
  animation: none;
  background: #e9e9e9;
  font-size: 40px;
}

.product-play.hourglass {
  margin-top: 15px;
  margin-bottom: 5px;
  display: inline-block;
}

.product-play.hourglass td > span {
  width: 25px;
  height: 20px;
}

.izle-kazan-modal .hourglass {
  height: 37px;
  padding-top: 8px;
  display: block;
  margin: 0;
}

.hourglass table {
  width: 100%;
}

.hourglass td > span {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 25px;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: spin;
  animation-timing-function: linear;
}

.hourglass span span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #b4b4b4;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
}

.hourglass span span:first-of-type {
  transform: translateY(-50%);
}

.hourglass span span:last-of-type {
  transform: translateY(50%) rotate(180deg);
}

.hourglass span span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffb24c;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-timing-function: linear;
}

.hourglass span span:last-of-type::before {
  animation-delay: -2s;
}

@keyframes slide {
  0% {
    transform: translateY(0%);
  }

  25% {
    transform: translateY(100%);
  }

  50% {
    transform: translateY(100%);
  }

  75% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.multi-graph {
  width: 235px;
  height: 118px;
  position: relative;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 auto;
}

.multi-graph:before {
  content: "";
  width: 235px;
  height: 118px;
  border: 20px solid #c9c9c9;
  border-bottom: none;
  position: absolute;
  box-sizing: border-box;
  transform-origin: 50% 0%;
  border-radius: 300px 300px 0 0;
  left: 0;
  top: 0;
}

.multi-graph .graph {
  width: 235px;
  height: 118px;
  border: 20px solid var(--fill);
  border-top: none;
  position: absolute;
  transform-origin: 50% 0% 0;
  border-radius: 0 0 300px 300px;
  left: 0;
  top: 100%;
  z-index: 5;
  animation: 1s fillGraphAnimation ease-in;
  transform: rotate(calc(1deg * (var(--percentage) * 1.8)));
  box-sizing: border-box;
  cursor: pointer;
}

.multi-graph .graph::after {
  content: "";
  position: absolute;
  top: 0;
  left: -26px;
  background-color: #ffffff;
  width: 210px;
  height: 1px;
  z-index: 3;
}

.multi-graph .graph:first-child::after {
  display: none;
}

@keyframes myfirst2 {
  0% {
    border-color: #00f080;
  }

  50% {
    border-color: #00a357;
  }

  100% {
    border-color: #00f080;
  }
}

/*

@-webkit-keyframes fillAnimation {
    0% {
        transform: rotate(-45deg);
    }

    50% {
        transform: rotate(135deg);
    }
}

@keyframes fillAnimation {
    0% {
        transform: rotate(-45deg);
    }

    50% {
        transform: rotate(135deg);
    }
}

@-webkit-keyframes fillGraphAnimation {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
}

@keyframes fillGraphAnimation {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
}*/

@media (max-height: 720px) {
  .first-tutorial .slide-text {
    font-size: 16.5px;
  }

  .accept-tutorial-btn {
    margin-top: 5px;
    height: 40px;
  }

  .first-tutorial .last-item-carousel img {
    height: 70vh;
  }

  .first-tutorial .last-item-carousel .slide-text-div {
    margin-top: 10px;
  }
}

@-webkit-keyframes walkanim {
  to {
    background-position: 100% 0;
  }
}

@keyframes walkanim {
  to {
    background-position: 100% 0;
  }
}

#walk-container {
  position: relative;
  width: 100px;
  padding-bottom: 120px;
  vertical-align: middle;
  overflow: hidden;
  margin: 0 auto;
  display: revert;
}

#walk {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/sprite.svg);
  background-repeat: no-repeat;
  background-size: 2700%;
  -webkit-animation: walkanim s infinite steps(30);
  animation: walkanim 1s infinite steps(29);
  margin-left: auto;
  margin-right: auto;
}

.slide-range {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  margin-bottom: 0;
}

.slide-range .middle {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 50px;
}

.slide-range .slider {
  position: relative;
  z-index: 1;
  height: 10px;
  width: 95%;
  margin: 0 auto;
}

.slide-range .slider .track {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: 5px;
  background-color: #bad4d5;
}

.slide-range .slider .range {
  position: absolute;
  z-index: 2;
  left: 25%;
  right: 25%;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background-color: #009ea2;
}

.slide-range .slider .thumb {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  background-color: #009ea2;
  border-radius: 50%;
  box-shadow: 0 0 0 0px rgb(98 0 238 / 10%);
  transition: box-shadow 0.3s ease-in-out;
}

.slide-range .slider > .thumb.hover {
  box-shadow: 0 0 0 20px rgba(98, 0, 238, 0.1);
}

.slide-range .slider > .thumb.active {
  box-shadow: 0 0 0 40px rgba(98, 0, 238, 0.2);
}

.slide-range .slider .thumb.left {
  left: 25%;
  transform: translate(-15px, -6px);
}

.slide-range .slider .thumb.right {
  right: 25%;
  transform: translate(0px, -6px);
}

.slide-range input[type="range"] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 2;
  height: 10px;
  width: 100%;
  opacity: 0;
}

.slide-range input[type="range"]::-webkit-slider-thumb {
  pointer-events: all;
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: 0 none;
  background-color: red;
  -webkit-appearance: none;
}

.slide-range .graduation {
  position: absolute;
  width: 100%;
  top: 20px;
  left: 0px;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 5px;
  margin: 0 auto;
}

.slide-range .graduation span {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
}

.slide-range ul li {
  list-style: none;
  text-align: center;
  font-size: 12px;
}

/* NEW CHART  */

.new-chart-wrapper input[type="text"] {
  border: 0;
  border: solid 1px #8080ff;
  text-align: center;
  font-size: 20px;
  width: 45px;
  display: inline-block;
  position: absolute;
  color: #000000;
  left: 0;
}

.new-chart-wrapper input:focus {
  outline: 0;
  border-bottom: dashed 1px #ff8080;
}

.new-chart-wrapper input::-moz-selection {
  color: #1a1a1a;
  background-color: #c6e4ee;
}

.new-chart-wrapper input::selection {
  color: #1a1a1a;
  background-color: #c6e4ee;
}

.new-chart-wrapper ::-webkit-input-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}

.new-chart-wrapper :-moz-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}

.new-chart-wrapper ::-moz-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}

.new-chart-wrapper :-ms-input-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}

.new-chart-wrapper {
  display: -ms-flexbox;
  display: box;
  display: flex;
  -o-box-align: center;
  align-items: center;
  -o-box-pack: center;
  justify-content: center;
  -o-box-orient: vertical;
  flex-direction: column;
  height: 100%;
  position: relative;
  margin-bottom: 20px;
  margin-top: 30px;
}

.counter-div .new-chart-wrapper .battery-btn {
  top: -15px;
}

.counter-div .new-chart-wrapper .undo-btn {
  top: 27px;
}

.new-chart-wrapper .green .progress,
.new-chart-wrapper .red .progress,
.new-chart-wrapper .orange .progress {
  position: relative;
  border-radius: 50%;
}

.new-chart-wrapper .green .progress,
.new-chart-wrapper .red .progress,
.new-chart-wrapper .orange .progress {
  width: 130px;
  height: 130px;
  background-color: #ffffff;
}

.new-chart-wrapper .green .progress {
  box-shadow: 0 0 50px rgb(0 189 0 / 75%);
}

.new-chart-wrapper .green .progress,
.new-chart-wrapper .red .progress,
.new-chart-wrapper .orange .progress {
  transition: all 1s ease;
}

.new-chart-wrapper .green .progress .inner,
.new-chart-wrapper .red .progress .inner,
.new-chart-wrapper .orange .progress .inner {
  position: absolute;
  overflow: hidden;
  z-index: 2;
  border-radius: 50%;
}

.new-chart-wrapper .green .progress .inner,
.new-chart-wrapper .red .progress .inner,
.new-chart-wrapper .orange .progress .inner {
  width: 130px;
  height: 130px;
}

.new-chart-wrapper .green .progress .inner,
.new-chart-wrapper .red .progress .inner,
.new-chart-wrapper .orange .progress .inner {
  border: 0 solid #1a1a1a;
}

.new-chart-wrapper .green .progress .inner,
.new-chart-wrapper .red .progress .inner,
.new-chart-wrapper .orange .progress .inner {
  transition: all 1s ease;
}

.new-chart-wrapper .green .progress .inner .water,
.new-chart-wrapper .red .progress .inner .water,
.new-chart-wrapper .orange .progress .inner .water {
  position: absolute;
  z-index: 1;
  width: 200%;
  height: 200%;
  left: -50%;
  border-radius: 40%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: spin-home;
  animation-name: spin-home;
}

.new-chart-wrapper .green .progress .inner .water {
  top: 25%;
}

.new-chart-wrapper .green .progress .inner .water {
  background: rgb(58 198 58 / 75%);
}

.new-chart-wrapper .green .progress .inner .water,
.new-chart-wrapper .red .progress .inner .water,
.new-chart-wrapper .orange .progress .inner .water {
  transition: all 1s ease;
}

.new-chart-wrapper .green .progress .inner .water,
.new-chart-wrapper .red .progress .inner .water,
.new-chart-wrapper .orange .progress .inner .water {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

.new-chart-wrapper .green .progress .inner .water {
  box-shadow: none;
}

.new-chart-wrapper .green .progress .inner .glare,
.new-chart-wrapper .red .progress .inner .glare,
.new-chart-wrapper .orange .progress .inner .glare {
  position: absolute;
  top: -120%;
  left: -120%;
  z-index: 5;
  width: 200%;
  height: 200%;
  transform: rotate(45deg);
  border-radius: 50%;
}

.new-chart-wrapper .green .progress .inner .glare,
.new-chart-wrapper .red .progress .inner .glare,
.new-chart-wrapper .orange .progress .inner .glare {
  background-color: rgba(255, 255, 255, 0.15);
}

.new-chart-wrapper .green .progress .inner .glare,
.new-chart-wrapper .red .progress .inner .glare,
.new-chart-wrapper .orange .progress .inner .glare {
  transition: all 1s ease;
}

.new-chart-wrapper .green .progress .inner .percent,
.new-chart-wrapper .red .progress .inner .percent,
.new-chart-wrapper .orange .progress .inner .percent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-weight: bold;
  text-align: center;
}

.new-chart-wrapper .green .progress .inner .percent,
.new-chart-wrapper .red .progress .inner .percent,
.new-chart-wrapper .orange .progress .inner .percent {
  line-height: 150px;
  font-size: 50px;
}

.new-chart-wrapper .green .progress .inner .percent {
  color: #03c603;
}

.new-chart-wrapper .green .progress .inner .percent {
  /* text-shadow: 0 0 10px #029502; */
}

.new-chart-wrapper .green .progress .inner .percent,
.new-chart-wrapper .red .progress .inner .percent,
.new-chart-wrapper .orange .progress .inner .percent {
  transition: all 1s ease;
}

.new-chart-wrapper .red .progress {
  box-shadow: 0 0 50px rgb(235 78 78 / 75%);
}

.new-chart-wrapper .red .progress .inner .water {
  top: 75%;
}

.new-chart-wrapper .red .progress .inner .water {
  background: rgb(195 40 40);
}

.new-chart-wrapper .red .progress .inner .water {
  box-shadow: none;
}

.new-chart-wrapper .red .progress .inner .percent {
  color: #a30f0f;
}

.new-chart-wrapper .red .progress .inner .percent {
  text-shadow: 0 0 10px #7a0b0b;
}

.new-chart-wrapper .orange .progress {
  box-shadow: 0 0 50px rgb(255 187 0);
}

.new-chart-wrapper .orange .progress .inner .water {
  top: 50%;
}

.new-chart-wrapper .orange .progress .inner .water {
  background: rgb(255 165 0 / 81%);
}

.new-chart-wrapper .orange .progress .inner .water {
  box-shadow: none;
}

.new-chart-wrapper .orange .progress .inner .percent {
  color: #a8430d;
}

.new-chart-wrapper .orange .progress .inner .percent {
  text-shadow: 0 0 10px #7e320a;
}

.new-chart-wrapper #copyright {
  margin-top: 25px;
  background-color: transparent;
  font-size: 14px;
  color: #b3b3b3;
  text-align: center;
}

.new-chart-wrapper #copyright div {
  margin-bottom: 10px;
}

.new-chart-wrapper #copyright a,
.new-chart-wrapper #copyright a:link {
  color: #808080;
  text-decoration: none;
  border-bottom: 1px solid #808080;
  padding-bottom: 2px;
}

.new-chart-wrapper #copyright a:active {
  color: #b3b3b3;
}

.new-chart-wrapper #copyright a:hover {
  color: #b3b3b3;
  border-bottom: 1px solid #b3b3b3;
  padding-bottom: 4px;
}

.new-chart-wrapper .instructions {
  display: inline-block;
  margin: 5px 0;
  font-size: 16px;
}

.new-chart-wrapper .progress .progress-lines {
  position: relative;
  width: 100%;
  height: 100%;
}

.new-chart-wrapper .progress .progress-lines .line-item {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: rgb(0 0 0 / 3%);
}

.draw-sticker-product-box {
  position: absolute;
  text-align: center;
  background-color: #ff4200;
  color: #ffffff;
  font-size: 11px;
  font-weight: bolder;
  border-radius: 50px;
  height: 25px;
  line-height: 25px;
  width: 55px;
  right: 0;
  top: -10px;
  right: 0;
}

@-webkit-keyframes spin-home {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(90deg);
  }
}

@keyframes spin-home {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(90deg);
  }
}

.video-modal p {
  padding-top: 15px;
}

.video-modal .video-div {
  margin-top: 10px;
}

.video-modal .video-div img {
  max-height: 60vh;
}

.stand-up-area {
  padding: 10px 0;
  /*height: 285px;
  overflow: auto;*/
  margin-top: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.stand-up-area .box {
  text-align: center;
  display: block;
  border-radius: 10px;
  margin: 10px 0;
  width: 33.3%;
  padding: 0 10px;
}

.stand-up-area .box a {
  margin-left: 15px;
  color: #ffffff;
  background-color: #009ea2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  font-size: 12px;
  margin: 0 auto;
  margin-top: 5px;
}

.stand-up-area .box a.check {
  color: #ffffff;
  background-color: #00c076;
  font-size: 16px;
}

.stand-up-area .box a.disable {
  background-color: #acacac;
}

.stand-up-area .box img {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
  margin-bottom: 5px;
}

.stand-up-area .box .time {
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.stand-up-title {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-weight: 800;
  color: #009ea2;
  font-size: 18px;
}

.radio {
  text-align: left;
  width: 200px;
  margin: 0 auto;
}
.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.radio input[type="radio"] + .radio-label:before {
  content: "";
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.1em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before {
  background-color: #009ea2;
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #009ea2;
}
.radio input[type="radio"]:focus + .radio-label:before {
  outline: none;
  border-color: #3197ee;
}
.radio input[type="radio"]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}
.radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}

.radio-div label {
  font-weight: 400;
  margin-bottom: 12px;
}

.new-tutorial-page {
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

.new-tutorial-page .top {
  height: 65vh;
  background-color: #15aeb5;
  position: relative;
}

.new-tutorial-page .top::before {
  content: "";
  position: absolute;
  left: -83%;
  top: -78%;
  width: 215%;
  height: 150%;
  background-color: #039aa1;
  border-radius: 50%;
}

.new-tutorial-page .bottom {
  position: absolute;
  height: 35vh;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgb(203 203 203);
  z-index: 2;
  bottom: 0;
  width: 100%;
}

.new-tutorial-page .first-list {
  padding: 0;
  width: max-content;
  margin: 0 auto;
  padding-bottom: 15px;
}

.new-tutorial-page .first-list li {
  list-style-type: none;
  padding: 0;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.4;
}

.new-tutorial-page .first-list li&:last-child {
  margin-bottom: 0;
}

.new-tutorial-page .first-list li span {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.new-tutorial-page .first-list li img {
  width: 30px;
}

.new-tutorial-page .item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 85vh;
}

.new-tutorial-page .next-btn {
  padding: 5px 25px;
  background: #039aa1;
  min-width: 170px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  margin: 0 auto;
  margin-top: 20px;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  width: max-content;
  max-width: 100%;
}

.new-tutorial-page .permission-btn {
  padding: 5px 10px;
  background: #039aa1;
  width: 170px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  margin: 0 auto;
  margin-top: 20px;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
}

.new-tutorial-page .inside {
  position: relative;
}

.no-btn-link {
  font-size: 15px;
  color: #009ea2;
  font-weight: 600;
  margin-top: 15px;
  display: block;
}

.new-tutorial-page .owl-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 0 50px;
}

.new-tutorial-page .owl-dots .owl-dot {
  border: 0;
  padding: 0 5px;
  background-color: transparent;
}

.new-tutorial-page .owl-dots span {
  width: 15px;
  height: 15px;
  display: block;
  background-color: #a6dde0;
  border-radius: 25px;
}

.new-tutorial-page .owl-dots .active span {
  width: 35px;
  background-color: #00cad3;
}

.new-tutorial-page .top .step-title {
  font-size: 19px;
  margin: 0 auto;
  color: #ffffff;
  font-weight: 500;
  display: block;
  max-width: 100%;
  padding: 0 15px;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.5;
}

.new-tutorial-page .top .step-title .energy-i {
  color: #fdad01;
  font-size: 20px;
  margin-bottom: -4px;
  display: inline-block;
  margin-left: 3px;
  margin-right: 4px;
}

.new-tutorial-page .top .step-title .exchange-svg {
  width: 30px;
  display: inline-block;
  margin-top: -5px;
}

.new-tutorial-page .top .screen-mockup {
  width: 85%;
  margin: 0 auto;
  display: block;
}

.step-source-page {
  background-color: #ffffff;
  padding: 30px 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  font-weight: 500;
}

.step-source-page .noth-options {
  box-shadow: none;
  padding: 0;
  margin-top: 20px;
}

.step-source-page .noth-options ul li {
  padding: 0;
}

.step-source-page .title-img {
  width: 100px;
  margin: 0 auto;
  display: block;
  margin-bottom: 20px;
}

.step-source-page p {
  font-weight: 400;
}

.beginner-tutorial {
  padding: 0 25px;
}

.beginner-tutorial .top {
  background-color: #ffffff;
  height: 87vh;
}

.beginner-tutorial .top::before {
  display: none;
}

.beginner-tutorial .new-tutorial-inside img {
  width: 250px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.beginner-tutorial .new-tutorial-inside .title {
  display: block;
  text-align: center;
  font-size: 22px;
  color: #00cad3;
  font-weight: 600;
  margin-bottom: 10px;
}

.beginner-tutorial .new-tutorial-inside .text {
  display: block;
  text-align: center;
  color: #00cad3;
  margin-bottom: 7px;
  font-size: 16px;
}

.beginner-tutorial .new-tutorial-inside .text .fa-bolt {
  color: #ff9100;
  font-size: 25px;
}

.beginner-tutorial .new-tutorial-inside .text .convert-icon {
  background: rgb(255 82 0);
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  margin-top: 0;
  position: relative;
}

.beginner-tutorial .new-tutorial-inside .text .convert-icon img {
  filter: invert(100%) sepia(20%) saturate(2%) hue-rotate(252deg)
    brightness(111%) contrast(101%);
  width: 19px;
  margin: 0;
}

.beginner-tutorial .bottom {
  max-width: 100%;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 17vh;
  padding-bottom: 80px;
}

.beginner-tutorial .bottom .next-btn {
  width: 40px;
  height: 40px;
  min-width: unset;
  max-width: unset;
  margin: 0;
  padding: 0;
  background-color: #00cad3;
}

.finish-tutorial {
  display: block;
  color: #afafaf;
  font-weight: 500;
}

.beginner-tutorial .app-btn {
  width: max-content;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
  background-color: #00cad3;
}

.beginner-tutorial .owl-dots {
  margin: 0;
}

.access-page {
  padding: 0 20px;
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}

.access-page .app-btn {
  width: 180px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: #00cad3;
}

.access-page .title {
  display: block;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #00cad3;
  margin-bottom: 20px;
}

.access-page .access-box {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(227, 227, 227, 1);
  -moz-box-shadow: 0px 0px 14px 0px rgba(227, 227, 227, 1);
  box-shadow: 0px 0px 14px 0px rgba(227, 227, 227, 1);
  border-radius: 10px;
  margin-bottom: 20px;
}

.access-page .access-box:last-child {
  margin-bottom: 0;
}

.access-page .access-box img {
  width: 100px;
}

.access-page .access-box span {
  color: #00b7bf;
  margin-left: 15px;
  font-size: 15px;
  position: relative;
}

.access-page .access-box span i {
  background: rgb(255 82 0);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  position: absolute;
  margin-left: 4px;
  margin-top: 0;
}

.access-page .access-box span i img {
  filter: invert(100%) sepia(20%) saturate(2%) hue-rotate(252deg)
    brightness(111%) contrast(101%);
  width: 16px;
}

.access-page .btn-area {
  margin-top: 50px;
}

.access-page .later {
  display: block;
  text-align: center;
  width: max-content;
  margin: 0 auto;
  margin-top: 20px;
  color: #989898;
}

.start-page {
  padding: 0 20px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}

.start-page .img-div {
  margin-bottom: 20px;
}

.start-page .img-div img {
  max-width: 100%;
  width: 280px;
  margin: 0 auto;
  display: block;
}

.start-page .title {
  display: block;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #00cad3;
  margin-bottom: 8px;
}

.start-page .text {
  display: block;
  text-align: center;
  font-size: 17px;
  margin-bottom: 20px;
}

.start-page .app-btn {
  width: 180px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: #00cad3;
}

.no-steps-div {
  margin-bottom: 40px;
}

.no-steps-div .icon-div {
  margin-bottom: 10px;
}

.no-steps-div .icon-div img {
  width: 150px;
  margin: 0 auto;
  display: block;
}

.no-steps-div .title {
  display: block;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 5px;
}

.no-steps-div .text {
  display: block;
  text-align: center;
  font-size: 16px;
  margin-bottom: 12px;
}

.no-steps-div .text:last-child {
  margin-bottom: 0;
}

.no-steps-div .app-btn {
  width: max-content;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.no-steps-div .link-text {
  font-size: 14px;
  font-weight: 400;
  margin: 0 auto;
  text-align: center;
  display: block;
  width: 260px;
}

.no-steps-div .link-text a {
  color: #009ea2;
  font-weight: 600;
}

.questions-page .box {
  background-color: #ffffff;
  padding: 20px 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  margin-bottom: 30px;
  position: relative;
}

.questions-page .box .img-div {
  background-image: url(../img/load-icon.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 41%;
  margin-bottom: 15px;
  background-color: #e8e8e8;
}

.questions-page .box img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
}

.questions-page .box .question-title {
  display: block;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 15px;
}

.questions-page .box .date-div {
  display: flex;
  justify-content: center;
  text-align: center;
}

.questions-page .box .date-div .item {
  font-size: 13px;
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid #ebebeb;
}

.questions-page .box .date-div .item:last-child {
  margin: 0;
  padding: 0;
  border: 0;
}

.questions-page .box .date-div .item .title {
  display: block;
  color: #a2a2a2;
  margin-bottom: 4px;
}

.questions-page .box .date-div .item i {
  margin-right: 2px;
}

.questions-page .box .date-div .item .date {
  display: block;
}

.questions-page .box .date-div .item .date b {
  font-weight: 400;
  margin-left: 6px;
}
.questions-page .box .win-total {
  color: #009a53;
  bottom: 28px;
  right: 15px;
  text-align: center;
  position: absolute;
}

.questions-page .box .win-total .title {
  display: block;
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 2px;
  color: #57ac85;
}

.questions-page .box .win-total .cash {
  font-weight: 600;
}

.questions-page .box .win-total .cash i {
  margin-right: 2px;
}

.questions-page .box .status {
  margin-top: 15px;
}

.questions-page .box .status span {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border-radius: 25px;
  font-weight: 500;
  font-size: 14px;
  min-width: 150px;
  width: max-content;
  max-width: 100%;
  padding: 10px 25px;
}

.questions-page .box .status .add-money-status {
  color: #009a53;
  padding: 0;
  margin-top: 5px;
  font-weight: 800;
  font-size: 15px;
}

.questions-page .box .status span i {
  margin-right: 4px;
}

.questions-page .box .status .continue {
  color: #00a20f;
  background-color: #c5ffc7;
}

.questions-page .box .status .soon {
  color: #009ea2;
  background-color: #d2fdff;
}

.questions-page .box .status .end {
  color: #9b9b9b;
  background-color: #eaeaea;
}

.questions-page .box .status .completed {
  color: #009a53;
  background-color: unset;
}

.questions-page .box .status .started {
  color: #009ea2;
  background-color: unset;
}

.questions-page .box .status .take-award {
  color: #ffffff;
  background-color: #009a53;
}

.question-detail-page .img-div {
  background-image: url(../img/load-icon.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 41%;
  margin-bottom: 30px;
  background-color: #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
}

.question-detail-page img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
}

.question-detail-page .inside {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  position: relative;
}

.question-detail-page .title {
  text-align: center;
  display: block;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 18px;
}

.question-detail-page button {
  box-shadow: none;
  border: 0;
  margin-top: 40px;
}

.question-detail-page .question-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 20px;
  bottom: 25px;
  color: #5d5d5d;
  background-color: #e9e9e9;
  border-radius: 25px;
  font-size: 14px;
}

.question-detail-page .win-btn {
  background-color: #009a53;
}

.question-detail-page .radio {
  margin: 0;
  width: unset;
}

.question-detail-page label {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 15px;
}

.question-detail-page .radio input[type="radio"] + .radio-label:before {
  margin-right: 10px;
}

.question-detail-page .page-step {
  display: block;
  position: absolute;
  right: 20px;
  bottom: 30px;
  color: #009ea2;
  font-weight: 500;
  font-size: 14px;
}

.question-detail-page .form-item {
  margin-bottom: 15px;
}

.question-detail-page .form-item label {
  margin-bottom: 0;
  display: flex;
}

.question-detail-page .finish-screen {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-detail-page .finish-screen .app-btn {
  margin-top: 20px;
}

.question-detail-page .finish-screen .finish-text {
  display: block;
}

.question-detail-page .finish-screen .finish-text b {
  display: block;
  text-align: center;
  font-size: 26px;
  margin-bottom: 8px;
  color: #009a53;
}

.question-detail-page .finish-screen .img-div {
  margin-bottom: 20px;
}

.question-detail-page .finish-screen span {
  display: block;
  text-align: center;
  font-size: 17px;
  margin-bottom: 6px;
  line-height: 1.3;
}

.question-detail-page .finish-screen .cong-div {
  margin-bottom: 10px;
}

.question-detail-page .finish-screen .cong-div .price {
  font-size: 16px;
  font-weight: 900;
  color: #009a53;
  display: inline-flex;
  margin-bottom: 5px;
  align-items: center;
}

.question-detail-page .finish-screen .cong-div span {
  margin: 0;
  margin-left: 4px;
  font-weight: 900;
  color: #009a53;
}

.anket-modal .video-modal-img {
  background: #0087ff;
}

.anket-modal .video-modal-img img {
  width: 80px;
  max-width: unset;
  margin-top: -20px;
}

.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
.styled-checkbox + label:before {
  content: "";
  padding-left: 19px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: #f4f4f4;
  border: 1px solid #c4c4c4;
  transition: 0.3s;
  border-radius: 4px;
  margin-right: 10px;
}

.styled-checkbox:checked + label:before {
  background: #009ea2;
  border-color: #009ea2;
}
.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.styled-checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  background: #ffffff;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 #ffffff, 4px 0 0 #ffffff, 4px -2px 0 #ffffff,
    4px -4px 0 #ffffff, 4px -6px 0 #ffffff, 4px -8px 0 #ffffff;
  transform: rotate(45deg);
}

.step-source-page-new {
  background-color: #ffffff;
  padding: 40px 15px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  position: relative;
}

.step-source-page-new .app-btn {
  margin-top: 35px;
  width: 180px;
  height: 45px;
}

.step-source-page-new .box {
  background-color: #ffffff;
  margin-bottom: 25px;
  border-bottom: 1px solid #e2e2e2;
  position: relative;
  padding-bottom: 25px;
}

.step-source-page-new form .box:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.step-source-page-new .box .inside {
  width: 90%;
}

.step-source-page-new .box .radio {
  width: 100%;
  display: flex;
  align-items: center;
}

.step-source-page-new .box .radio label {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.step-source-page-new .box .radio label .inside .title {
  display: block;
  font-size: 15px;
  margin-bottom: 0;
  font-weight: 500;
  color: #009ea2;
}

.step-source-page-new .box .radio label .inside .text {
  display: block;
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.5;
  margin-bottom: 0;
}

.step-source-access-page {
  padding: 0 20px;
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}

.step-source-access-page .app-btn {
  width: 180px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: #009ea2;
}

.step-source-access-page .title {
  display: block;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #009ea2;
  margin-bottom: 20px;
}

.step-source-access-page .access-box {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 25px;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(227, 227, 227, 1);
  -moz-box-shadow: 0px 0px 14px 0px rgba(227, 227, 227, 1);
  box-shadow: 0px 0px 14px 0px rgba(227, 227, 227, 1);
  border-radius: 10px;
  margin-bottom: 20px;
}

.step-source-access-page .access-box:last-child {
  margin-bottom: 0;
}

.step-source-access-page .access-box img {
  width: 100px;
}

.step-source-access-page .access-box span {
  color: #000000;
  font-size: 15px;
  position: relative;
  line-height: 1.5;
}

.step-source-access-page .access-box span i {
  background: rgb(255 82 0);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  position: absolute;
  margin-left: 4px;
  margin-top: 0;
}

.step-source-access-page .access-box span i img {
  filter: invert(100%) sepia(20%) saturate(2%) hue-rotate(252deg)
    brightness(111%) contrast(101%);
  width: 16px;
}

.step-source-access-page .btn-area {
  margin-top: 50px;
}

.step-source-access-page .later {
  display: block;
  text-align: center;
  width: max-content;
  margin: 0 auto;
  margin-top: 20px;
  color: #989898;
}

.game-detail-page .game-info-div {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  background-color: #ffffff;
}

.game-detail-page .game-info-div .app-btn {
  margin-top: 15px;
}
.game-detail-page h1 {
  font-size: 20px;
  text-align: center;
  display: block;
  margin-bottom: 15px;
  color: #009ea2;
}

.game-detail-page .game-info-div p {
  font-size: 14px;
  line-height: 1.3;
  margin: 0;
}

.game-detail-page .canvas-main {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  background-color: #ffffff;
  position: relative;
}

.game-detail-page .canvas-main canvas {
  margin: 0 auto;
  display: block;
}

.game-detail-page .word-found {
  position: relative;
}

.game-detail-page .word-found .app-btn {
  background-color: #009a53;
  width: 180px;
  border-radius: 25px;
  font-size: 15px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  animation: myfirst 1.8s infinite, leaves 1.8s ease-in-out infinite alternate;
}

.game-detail-page .word-found .take-cash {
  color: #009a53;
  padding: 0;
  margin-top: 20px;
  font-weight: 800;
  font-size: 15px;
  display: block;
  text-align: center;
}

.game-detail-page .word-found .pieces {
  position: absolute;
  right: 15px;
  top: -17px;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  background-color: #009a53;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  border: 1px solid #009a53;
}

.game-detail-page .word-found h2 {
  font-size: 15px;
  text-align: center;
  display: block;
  color: #000000;
  position: absolute;
  left: 0;
  right: 0;
  top: -17px;
  width: max-content;
  background-color: #ffffff;
  padding: 6px 15px;
  border-radius: 5px;
  border: 2px solid #b4b4b4;
  margin: 0 auto;
  font-weight: 400;
}

.game-detail-page .word-found .inside {
  border-radius: 5px;
  overflow: auto;
  height: 125px;
}

.game-detail-page .word-found .inside span {
  display: block;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 20px;
  letter-spacing: 5px;
  color: #009a53;
  font-weight: 500;
  position: relative;
  background-color: #e0f5eb;
  margin-bottom: 10px;
  border-radius: 5px;
}

.game-detail-page .word-found .inside span i {
  position: absolute;
  left: 12px;
  font-size: 17px;
  color: #009a53;
  top: 15px;
}

.game-detail-page .word-found .inside span:last-child {
  margin: 0;
  border: 0;
}

.game-detail-page .progress-bar {
  width: 83%;
  height: 35px;
  background-color: #ffffff;
  border: 3px solid #b4b4b4;
  border-radius: 25px;
  padding: 3px;
  position: relative;
}

.game-detail-page .progress-bar .progress-item {
  position: absolute;
  left: 0;
  top: 0;
  height: 35px;
  background-color: #ffc730;
}

.game-detail-page .progress-bar .line-div {
  width: 100%;
  height: 35px;
  top: 0;
  left: 0;
  display: block;
  position: absolute;
}

.game-detail-page .progress-bar .line-div .line {
  width: 1.5px;
  background-color: #c6c6c6;
  height: 35px;
  position: absolute;
}

.game-detail-page .top-word {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  right: 10px;
  border-radius: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.game-detail-page .top-word .win-total {
  color: #009a53;
  text-align: center;
  justify-content: flex-end;
  display: flex;
  font-weight: 600;
  font-size: 16px;
}

.game-detail-page .top-word .win-total i {
  margin-right: 2px;
}

.game-detail-page .finish-screen {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-detail-page .finish-screen .img-div {
  margin-bottom: 20px;
}

.game-detail-page .finish-screen .app-btn {
  margin-top: 20px;
}

.game-detail-page .finish-screen .finish-text {
  display: block;
}

.game-detail-page .finish-screen .finish-text b {
  display: block;
  text-align: center;
  font-size: 26px;
  margin-bottom: 8px;
  color: #009a53;
}

.game-detail-page .finish-screen span {
  display: block;
  text-align: center;
  font-size: 17px;
  margin-bottom: 6px;
  line-height: 1.3;
}

.game-detail-page .finish-screen .cong-div {
  margin-bottom: 10px;
}

.game-detail-page .finish-screen .cong-div .price {
  font-size: 16px;
  font-weight: 900;
  color: #009a53;
  display: inline-flex;
  margin-bottom: 5px;
  align-items: center;
}

.game-detail-page .finish-screen .cong-div span {
  margin: 0;
  margin-left: 4px;
  font-weight: 900;
  color: #009a53;
}

.game-detail-page .find-word {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 16px;
  background-color: #ffffff;
  width: 100%;
  padding: 3px;
  border: 2px solid #00b662;
  border-radius: 5px;
  position: relative;
}

.game-detail-page .find-word .total {
  margin-left: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00b662;
  border-radius: 25px;
  font-size: 15px;
  color: #ffffff;
  font-weight: 700;
}

.invite-code-page {
  background-color: #ffffff;
  padding: 30px 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
}

.invite-code-page h1 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 6px;
  color: #009ea2;
  font-weight: 600;
}

.invite-code-page p {
  text-align: center;
  margin-bottom: 0;
  font-size: 15px;
  color: #000000;
  line-height: 1.5;
}

.invite-code-page b {
  color: #009ea2;
}

.invite-code-page form {
  width: 100%;
  height: auto;
  border-radius: 25px;
  position: relative;
}

.invite-code-page .is-code {
  border: 1px solid #cfd4d9;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  background-color: #eff3f7;
}

.invite-code-page form input {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: #ffffff;
  padding: 10px;
  border: 1px solid #d2d5d9;
  text-align: center;
  font-size: 16px;
  transition: 0.3s;
}

.invite-code-page form input:focus {
  background-color: #ffffff;
  border-color: #8a8a8a;
}

.invite-code-page form button {
  height: 44px;
  min-width: 150px;
  background-color: #009ea2;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #009ea2;
  border-radius: 25px;
  margin: 0 auto;
  margin-top: 15px;
  font-size: 14px;
  font-weight: 500;
}

.invite-code-page form button i {
  font-size: 16px;
  margin-left: 7px;
}

.invite-code-page .error-text {
  margin-top: 10px;
}

.invite-code-page .bottom-text {
  display: flex;
  text-align: center;
  color: #009ea2;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.invite-code-page .bottom-text i {
  margin-left: 7px;
}

.invite-code-page .img-div {
  margin-top: 30px;
  margin-bottom: 30px;
}

.invite-code-page .img-div img {
  width: 230px;
  margin: 0 auto;
  display: block;
}

.league-event-page .event-box {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  margin-bottom: 30px;
  position: relative;
}

.league-event-page .event-box .img-div {
  background-image: url(../img/load-icon.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 41%;
  margin-bottom: 15px;
  background-color: #e8e8e8;
}

.league-event-page .event-box .img-div img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
}

.league-event-page .event-box .date-div {
  display: flex;
  justify-content: center;
  text-align: center;
}

.league-event-page .event-box .date-div .item {
  font-size: 13px;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #ebebeb;
}

.league-event-page .event-box .date-div .item:last-child {
  margin: 0;
  padding: 0;
  border: 0;
}

.league-event-page .event-box .date-div .item .title {
  display: block;
  color: #a2a2a2;
  margin-bottom: 4px;
}

.league-event-page .event-box .date-div .item i {
  margin-right: 2px;
}

.league-event-page .event-box .date-div .item .date {
  display: block;
}

.league-event-page .event-box .date-div .item .date b {
  font-weight: 400;
  margin-left: 6px;
}

.league-event-page .event-box .item .total-user {
  height: 100%;
  display: flex;
  align-items: center;
  color: #009ea2;
}

.league-event-page .event-box .item .total-user i {
  margin-right: 4px;
}

.league-event-page .event-box .item .total-user span {
  display: block;
  font-weight: 500;
}

.league-event-page .event-box .box-bottom {
  margin-top: 15px;
}

.league-event-page .event-box .box-bottom .step-convert-btn {
  background: rgb(255 82 0);
  background: linear-gradient(0deg, rgba(255, 82, 0, 1) 40%, rgb(255 3 3) 100%);
  color: #ffffff;
  height: 30px;
  width: 30px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}

.league-event-page .event-box .box-bottom .step-convert-btn img {
  filter: invert(100%) sepia(20%) saturate(2%) hue-rotate(252deg)
    brightness(111%) contrast(101%);
  width: 24px;
  height: 24px;
}

.league-event-page .event-box .box-bottom .victory-user span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00a24a;
  font-size: 14px;
}

.league-event-page .event-box .box-bottom .victory-user span b {
  font-size: 17px;
  margin-left: 4px;
  background-color: #d6fbe7;
  color: #00a24a;
  padding: 5px 10px;
  font-weight: 500;
}

.league-event-page .event-box .event-name {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  font-weight: 500;
}

.league-event-page .event-box .event-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  position: absolute;
  top: -10px;
  z-index: 5;
  padding: 5px 10px;
  background-color: #05d35f;
  color: #ffffff;
  border-radius: 5px;
  font-size: 13px;
}

.league-event-page .event-box .event-status.finish-event {
  background-color: #b1b1b1;
}

.league-event-page .event-box .event-status.soon {
  background-color: #ffc107;
}

.league-event-page .event-box .info-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  position: absolute;
  font-size: 15px;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.league-event-page .event-box .info-btn img {
  max-width: 100%;
}

.new-league-list .info-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  position: absolute;
  font-size: 15px;
  top: -6px;
  right: 5px;
  z-index: 2;
}

.new-league-list .info-btn img {
  max-width: 100%;
}

.league-event-page .event-box .event-p {
  text-align: center;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 16px;
}

.league-event-page .event-box .event-p.converted-text b {
  color: #ff2402;
}

.league-event-page .event-box .event-p.converted-text .step-convert-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  color: #ff2402;
  font-weight: 500;
}

.league-event-page .event-box .event-p.all-converted {
  color: #088b41;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.league-event-page .event-box .event-p.all-converted i {
  font-size: 20px;
  margin-right: 4px;
}

.league-event-page .event-box .join-event-p {
  display: block;
  margin: 0;
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
}

.league-page .league-first-user-div {
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
  -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 10px 5px rgb(230 230 230);
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.league-page .league-first-user-div .pp-div {
  position: relative;
  width: max-content;
}

.league-page .league-first-user-div .right {
  padding-left: 20px;
}

.league-page .league-first-user-div .pp-div .profile-picture {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-size: 25px;
  color: #ffffff;
}

.league-page .league-first-user-div .pp-div .list-picture-img {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-size: 25px;
  color: #ffffff;
}

.league-page .league-first-user-div .pp-div .number {
  position: absolute;
  top: 33px;
  right: -13px;
  width: 50px;
}

.league-page .league-first-user-div .name {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 18px;
}

.league-page .league-first-user-div .step-div {
  font-weight: 700;
  color: #ff4e00;
  font-size: 13px;
  display: block;
  margin-bottom: 10px;
}

.league-page .league-first-user-div .emoji-tab {
  width: max-content;
  text-align: center;
}

.league-page .league-first-user-div .emoji-tab .emoji-tab-img-box img {
  width: 26px;
}

.league-page .league-first-user-div .emoji-tab .like {
  font-size: 11px;
  font-weight: 600;
}

.league-page .league-first-user-div .bottom {
  display: flex;
  align-items: center;
}

.league-page .league-first-user-div .challenge-btn {
  background-color: #d3fdff;
  border: 1px solid #d3fdff;
  color: #20acb0;
  font-weight: 500;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  max-width: 100%;
  margin-left: 15px;
}

.league-page .league-first-user-div .challenge-btn.waiting {
  background-color: #ffbf00;
  color: #000000;
  border: 1px solid #ffbf00;
}

.league-page .league-first-user-div .challenge-btn.reject {
  background-color: #e42727;
  color: #ffffff;
  border: #e42727;
}

.league-page .league-first-user-div .challenge-btn.started {
  background-color: #14c257;
  color: #ffffff;
  border: #14c257;
}

.league-page .league-first-user-div .challenge-btn.lock {
  background-color: #cbcbcb;
  color: #ffffff;
  border: #cbcbcb;
}

.league-page .league-first-user-div .challenge-btn img {
  fill: #20acb0;
  width: 24px;
}

.league-page .sort-div {
  color: #ffffff;
  background: rgb(255 78 0);
  border: 0;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 30px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.league-page .sort-div i {
  margin-left: 5px;
}

.league-activity-modal .modal-t1{
      color: #009ea2!important;
}

.league-activity-modal .modal-emoji-div{
  background: rgb(0, 123, 133);
    background: linear-gradient(0deg, rgba(0, 123, 133, 1) 0%, rgba(0, 158, 162, 1) 50%);
    width: 70px;
    height: 70px;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 0;
    right: 0;
    border-radius: 50px;
}

.league-activity-modal .modal-emoji-div img{
  width: 35px;
}

.league-activity-modal .app-btn{
  margin-top: 15px;
}

.league-activity-modal .step-btn{
      background: rgb(255 82 0);
    background: linear-gradient(0deg, rgba(255, 82, 0, 1) 40%, rgb(255 3 3) 100%);
    width: unset;
    width: max-content;
    max-width: 100%;
    padding: 5px 14px;
}

.league-activity-modal .step-btn img{
        filter: invert(100%) sepia(20%) saturate(2%) hue-rotate(252deg) brightness(111%) contrast(101%);
    width: 26px;
    margin: 0;
    margin-right: 3px;
}


.league-page .index-top-info-box{
      width: 100%;
    border: 1px solid #dddddd;
    background-color: #f5f5f5;
}

.league-page .sort-div{
  margin-bottom: 10px;
}

.event-box-modal ul {
  text-align: left;
  padding-left: 25px;
}

.event-box-modal ul li {
  margin-bottom: 10px;
}

.event-box-modal ul li:last-child {
  margin-bottom: 0;
}

.event-box-modal li::marker {
  color: #009ea2;
}

.event-box-modal .modal-t1 {
  color: #009ea2;
}


.event-box .app-btn{
  min-width: 150px;
  width: max-content;
  max-width: 100%;
}


.new-league-list .friends ul li .number{
  width: 33px;
  background-color: unset;
}

.new-league-list .league-page .friends .first-league-table .first-league-table-bottom .activty-btn{
  margin-right: 10px;
  padding-right: 10px;
}

.new-league-list .league-page .friends .first-league-table .first-league-table-bottom .activty-btn:last-child{
  margin-right: 0;
  padding-right: 0;
}

.new-league-list .league-page .friends .first-league-table .first-league-table-bottom .activty-btn:first-child{
  min-width: 48px;
}


.new-league-list .league-page .friends .first-league-table .first-league-table-bottom .activty-btn:last-child::after{
  display: none;
}

.new-league-list .league-page .friends .first-league-table .first-league-table-bottom .activty-btn::after{
        content: "";
    position: absolute;
    right: 0;
    width: 1px;
    height: 60%;
    background-color: #d1d1d1;
    top: 0;
    top: 50%;
    transform: translateY(-50%);
}

.new-league-list .friends ul li .name-div {
    width: 150px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.new-league-list .friends ul li .name-div .name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
    -webkit-line-clamp:unset;
    -webkit-box-orient:unset;
}

.new-league-list .friends ul li .name-div .entry-date{
  display: flex;
    font-size: 11px;
    margin-left: 8px;
    color: #8b8b8b;
    margin-top: 3px;
    font-weight: 500;
    align-items: flex-start;
}

.new-league-list .friends ul li .name-div .entry-date i{
  margin-right: 4px;
  font-size: 11px;
}

.new-league-list .league-top{
  position: relative;
  margin-bottom: 10px;
}

.new-league-list .total-people-event{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #009ea2;
    font-size: 14px;
    font-weight: 500;
}

.new-league-list .total-people-event i{
  margin-right: 4px;
}

.new-league-list .league-top .sort-div{
  margin-bottom: 0;
      font-size: 14px;
}

.new-league-list .event-box{
      background-color: #ffffff;
      padding: 10px;
      border-radius: 10px;
      -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
      -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
      box-shadow: 0px 0px 10px 5px rgb(230 230 230);
      margin-bottom: 15px;
      position: relative;
}

.new-league-list .event-box .event-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    position: absolute;
    top: -10px;
    z-index: 5;
    padding: 5px 10px;
    background-color: #05d35f;
    color: #ffffff;
    border-radius: 5px;
    font-size: 13px;
}

.new-league-list .event-box .img-div{
  margin-bottom: 10px;
}

.new-league-list .event-box .event-name {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-weight: 500;
    margin-bottom: 8px;
    text-align: center;
    max-width: 80%;
}

.new-league-list .event-box .price-event{
      display: flex;
      align-items: center;
      font-size: 15px;
      justify-content: center;
      font-weight: 900;
      margin-bottom: 8px;
      color: #009a53;
}

.new-league-list .event-box .price-event i{
  margin-right: 4px;
}

.new-league-list .event-box .date-div {
    text-align: center;
}

.new-league-list .event-box .date-div .date{
      display: block;
      font-size: 14px;
      margin-bottom: 8px;
}

.new-league-list .league-refresh-waiting {
    margin-bottom: 15px;
    margin-top: 0;
}

.new-league-list .league-refresh-waiting span {
    font-size: 16px;
}

.new-league-list .league-refresh-waiting span b {
    font-size: 18px;
}

.new-league-list .league-page .friends ul{
  height: 80vh;
}

.new-league-list .index-top-info-box.page-top-alert-box{
      font-weight: 400;
      font-size: 14px;
}

.new-league-list .index-top-info-box.page-top-alert-box b{
      font-size: 14px;
}

.new-league-list .no-event-user{
display: flex;
align-items: center;
justify-content: center;
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
    color: #009ea2;
    font-weight: 500;
}

.new-league-list .no-event-user img{
  width: 20px;
}

.event-info-detail-div{
      display: flex
;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.event-info-detail-div span{
      display: block;
    font-size: 14px;
    font-weight: 500;
    margin-right: 4px;
        color: #009ea2;
}

.event-info-detail-div .info-btn{
  width: 26px;
}

.event-info-detail-div img{
  max-width: 100%;
}

@media (max-height: 800px) {
  .new-tutorial-page .top {
    height: 70vh;
  }

  .new-tutorial-page .item {
    height: 70vh;
  }

  .new-tutorial-page .bottom {
    height: 30vh;
  }
}

@media (max-height: 700px) {
  .new-tutorial-page .top {
    height: 75vh;
  }

  .new-tutorial-page .item {
    height: 75vh;
  }

  .new-tutorial-page .bottom {
    height: 25vh;
  }
}

@media (max-height: 750px) {
  .daily-bonus ul li {
    padding: 3px 0;
  }

  .daily-bonus ul li.left::before {
    height: 57px;
  }

  .daily-bonus ul li.right::before {
    height: 56px;
  }

  .daily-bonus ul li .step-text {
    padding: 2px 10px;
  }
}

@media (max-height: 860px) {
  .wallet-page ul {
    max-height: 60vh;
  }
}

@media (max-height: 720px) {
  .wallet-page ul {
    max-height: 55vh;
  }
}

@media (max-height: 635px) {
  .wallet-page ul {
    max-height: 50vh;
  }
}

@media (max-height: 580px) {
  .wallet-page ul {
    max-height: 47vh;
  }
}

@media (max-width: 380px) {
  .access-page .access-box img {
    width: 70px;
  }

  .access-page .access-box span {
    color: #00b7bf;
    margin-left: 15px;
    font-size: 14px;
  }
}

@media (max-width: 350px) {
  .wallet-page .wallet-box .price-wallet {
    font-size: 12px;
    padding: 2px 10px !important;
    height: 30px;
    border-radius: 10px;
  }
  .wallet-page .wallet-box.income .price-wallet i {
    font-size: 14px;
  }
  .wallet-page .wallet-box.delete .price-wallet i {
    font-size: 14px;
  }
  .wallet-page .wallet-box .price-wallet i {
    font-size: 18px;
  }
  .banner-multi .banner-name {
    height: 50px;
  }

  .first-tutorial img {
    height: 70vh;
  }

  .first-tutorial .first-slide2 .tutorial-logo {
    width: 180px;
    margin-bottom: 15px;
  }

  .first-tutorial .first-slide2 a {
    margin-top: 15px;
  }

  .first-slide-wrap2 .first-slide2 ul li {
    font-size: 20px;
  }

  .scroll-down {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .social-page .friends ul.follow-request li .name {
    width: 110px;
  }

  .navbar .menu-right .first-div {
    font-size: 13px;
  }

  .logo-div img {
    width: 120px;
  }

  .league-page .friends ul li .name {
    width: 110px;
    font-size: 13px;
    margin-left: 5px;
  }

  .product-detail .league-page .friends .first-league-table li .name {
    width: 190px;
  }

  .challenge-end-page .friends ul li .name {
    width: 110px;
    font-size: 13px;
  }

  .friends ul li .emoji-div .emoji-div-inside {
    margin-right: 8px;
  }

  .activty-ul li .request-info .date-activity-div {
    width: 125px;
  }

  .activty-ul li .date-activity {
    font-size: 13px;
  }

  .friends ul li .name {
    font-size: 15px;
  }

  .friends ul li .name-div .step-div {
    font-size: 10px;
    margin-left: 5px;
  }

  .follow-btn-friends,
  .send-btn-friends,
  .unfollow-btn-friends,
  .lock-btn-friends {
    width: 36px;
    height: 36px;
  }

  .league-page .friends .first-league-table .challenge-btn {
    width: 32px;
    height: 32px;
    bottom: 6px;
  }
}

@media (max-width: 340px) {
  .wallet-page .cost-money span {
    font-size: 11px;
  }

  .wallet-page .cost-money span b {
    font-size: 12px;
  }

  .hour-bonus-div .bonus-box .info-text {
    font-size: 11px;
  }

  .stories.carousel .story > .item-link > .info .name {
    font-size: 11px;
  }

  .product-detail .league-page .friends ul li .profile-picture {
    margin-left: 5px;
  }

  .friends ul li .profile-picture {
    margin-left: 2px;
  }

  .list-picture-img {
    margin-left: 2px !important;
  }

  .nav-drill {
    padding-top: 30px;
  }

  .social-nav .nav-item span {
    top: -10px;
  }

  .social-page .follow-request .accept-follower {
    font-size: 12px;
  }

  .social-page .follow-request .delete-follower {
    font-size: 12px;
  }

  .league-page .friends ul li .name {
    width: 93px;
    font-size: 12px;
  }

  .challenge-end-page .friends ul li .name {
    width: 93px;
    font-size: 12px;
  }

  .new-profile-page .profile-step .profile-step-box {
    width: 32%;
  }

  .new-profile-page .profile-step .profile-step-box .span1 {
    font-size: 15px;
    height: 58px;
  }

  .new-profile-page .profile-step .profile-step-box .span2 {
    font-size: 23px;
  }

  .social-page .friends ul.follow-request li .name {
    width: 90px;
  }

  .social-page .follow-request .request-select {
    right: 10px;
  }

  .activity-tab .activty-ul li .h-activity {
    width: 130px;
    font-size: 12px;
  }

  .friends ul li .name {
    width: 150px;
  }

  .menu-bottom .center-home {
    width: 62px;
    height: 62px;
    padding: 0;
  }

  .menu-bottom .center-home img {
    width: 30px;
  }

  .menu-bottom a {
    font-size: 26px;
  }

  .app-modal3-div ul li {
    padding: 10px 2px;
  }

  .app-modal1 .modal-body {
    padding-left: 10px;
    padding-right: 10px;
  }

  .app-modal3-div ul li .lig-modal-h {
    font-size: 15px;
    height: 55px;
  }

  .app-modal3-div ul li .lig-modal-data {
    font-size: 17px;
  }
}

@media (max-width: 330px) {
  .cargo-modal ul li {
    font-size: 13px;
    padding: 10px 5px;
  }

  .cargo-modal ul li img {
    width: 18px;
  }

  .league-page .friends .first-league-table .challenge-btn {
    font-size: 11px;
  }

  .league-page .friends .first-league-table .challenge-btn img {
    width: 16px;
  }

  .league-page .friends .first-league-table .lock-challenge-btn img {
    height: 16px;
  }

  .friends ul li .emoji-tab .lock-like img {
    height: 16px;
  }

  .daily-bonus ul li {
    width: 230px;
  }

  .daily-bonus ul li.left::after {
    width: 50%;
  }

  .daily-bonus ul li.right::after {
    width: 50%;
  }

  .daily-bonus ul li:last-child {
    width: 250px;
    padding-top: 27px;
  }
}

@media (max-width: 320px) {
  .product-detail .league-page .friends .first-league-table li .name {
    width: 170px;
  }

  .product-detail .league-page .friends ul li .number {
    margin-right: 3px;
  }

  .new-profile-page .profile-header-wrap .follow-btn.following-btn {
    font-size: 11px;
  }

  .banner-multi .banner-name {
    height: 50px;
  }

  .izle-kazan-modal .list-video li:last-child i {
    font-size: 40px;
  }

  .app-modal1b .izle-kazan-modal.yeni-modal-bonus ul li .day {
    font-size: 9px;
    font-weight: 600;
    width: 20px;
    text-align: center;
    margin: 0 auto;
    margin-top: 2px;
  }

  .index-top-info-box {
    font-size: 11px;
  }

  /* .home-tab-content {
    height: 290px;
  } */

  .hour-bonus-div {
    height: 290px;
  }

  .invitation-modal-btn {
    width: 210px;
  }

  .invitation-modal-div .app-btn {
    width: 210px;
  }

  .invitation-modal-btn i {
    color: #ffc903;
    font-size: 15px;
    margin: 0;
  }

  .friends ul li .waiting-step {
    width: 90px;
    font-size: 10px;
  }

  .friends ul li .completed-step {
    right: 45px;
  }

  .game-modal .game-check-list .star {
    width: 30px;
    height: 30px;
  }

  .wallet-page .wallet-box .box-info .product {
    font-size: 12px;
  }

  .activty-detail .date {
    font-size: 15px;
  }

  .activty-detail .creative-activty-user {
    font-size: 14px;
  }

  .activty-detail .users {
    font-size: 14px;
  }

  .activty-detail h2 {
    font-size: 16px;
  }

  .activty-detail p {
    font-size: 15px;
  }

  .app-tabs .nav-item {
    font-size: 13px;
    height: 28px;
    padding: 6px 0;
  }

  .counter-div .undo-btn img {
    width: 50px;
    height: 50px;
  }

  .counter-div .undo-btn.info-counter img {
    width: 45px;
    height: 45px;
  }

  .counter-div .undo-btn {
    height: 70px;
    top: 40px;
    width: 70px;
    line-height: 70px;
  }

  .counter-div {
    margin-bottom: 10px;
  }

  .counter-div .total-step {
    margin-bottom: 15px;
  }

  .home-chart-wrap {
    margin-bottom: 15px;
  }

  .counter-div .total-step .total-h {
    font-size: 14px;
  }

  .counter-div .total-step .total-c {
    font-size: 26px;
  }

  .new-profile-page .profile-header .my-followers .span1 {
    font-size: 18px;
  }

  .new-profile-page .profile-header .my-followers .span2 {
    font-size: 14px;
  }

  .new-profile-page .profile-step .profile-step-box .span1 {
    font-size: 14px;
    height: 55px;
  }

  .new-profile-page .profile-step .profile-step-box .span2 {
    font-size: 20px;
  }

  .banner-shop .product-price .first-div {
    font-size: 14px;
  }

  .banner-shop .product-price .second-div span {
    font-size: 12px;
  }

  .banner1 i {
    font-size: 14px;
  }

  .star-product-icon i {
    font-size: 20px;
  }

  .activty-ul li .date-activity {
    font-size: 12px;
  }

  .activty-ul li .request-info .date-activity-div {
    width: 120px;
  }

  .league-page .friends ul li .name {
    width: 100px;
    font-size: 13px;
  }

  .challenge-end-page .friends ul li .name {
    width: 100px;
    font-size: 13px;
  }

  .logo-div img {
    width: 100px;
  }

  .banner1 {
    padding: 10px;
  }

  .product-detail h2 {
    font-size: 16px;
  }

  .product-detail p {
    font-size: 15px;
  }

  .product-detail p b {
    font-size: 14px;
  }

  .friends h2 {
    font-size: 16px;
    padding-bottom: 10px;
  }

  .invite-page p {
    font-size: 15px;
    padding-bottom: 15px;
  }

  .invite-page .invite-info-text {
    font-size: 14px;
  }

  .contact-page .contact-box a {
    font-size: 14px;
  }

  .contact-page .contact-box .text-contact {
    font-size: 14px;
  }

  .app-btn {
    width: 140px;
    font-size: 14px;
  }

  .save-div .app-btn {
    width: auto;
  }

  .profile-edit-back-btn {
    width: 170px;
    font-size: 14px;
  }

  .app-btn.profile-picture-btn {
    width: 100%;
    font-size: 14px;
  }

  body {
    font-size: 14px;
  }

  .logo-div span {
    font-size: 16px;
    width: 150px;
    display: inline-block;
  }

  .friends ul li .name {
    font-size: 14px;
    width: 120px;
  }

  .invite-page .friends ul li .name {
    width: 120px;
  }

  .invite-page .friends ul li .waiting-step {
    width: 95px;
    font-size: 9px;
  }

  .friends ul li .number {
    width: 40px;
    font-size: 9px;
    margin-right: 5px;
  }

  .friends ul li .profile-picture {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 11px;
  }

  .list-picture-img {
    width: 25px;
    height: 25px;
  }

  .nav-drill {
    width: 230px;
  }

  .nav-drill .nav-link {
    font-size: 16px;
    padding: 6px 0;
    line-height: 28px;
  }

  .banner1 .banner-name {
    font-size: 14px;
  }

  .banner1.banner-multi .banner-name {
    font-size: 14px;
    height: 50px;
  }

  .banner-summary {
    font-size: 12px;
  }

  .banner-bottom .banner-summary i {
    padding-left: 2px;
    font-size: 11px;
  }

  .banner1 .banner-bottom2 .product-play i {
    margin: 0;
  }

  .product-detail p b {
    font-size: 15px;
  }

  .product-detail .product-price .first-div {
    font-size: 15px;
  }

  .product-detail .product-price .second-div span {
    font-size: 14px;
  }

  .product-detail .product-price i {
    font-size: 15px;
  }

  .product-detail-top .share-a {
    font-size: 25px;
  }

  .product-detail-top .fav-a {
    border-radius: 10px;
    font-size: 18px;
    width: 33px;
    height: 32px;
    line-height: 32px;
  }

  .navbar .menu-right .first-div {
    font-size: 13px;
  }

  .navbar .menu-right .money-menu {
    padding: 4px 8px;
  }

  .none-banner-div p {
    font-size: 17px;
  }

  .navbar .menu-left a {
    font-size: 22px;
  }

  .sum-step .sum-step-text {
    font-size: 18px;
  }

  .sum-step .sum-step-number span {
    font-size: 23px;
  }

  .info-app span {
    font-size: 15px;
  }

  .menu-bottom a {
    height: 75px;
  }

  .menu-bottom a {
    font-size: 22px;
  }

  .menu-bottom .sm-icon-menu-bottom {
    font-size: 20px;
  }

  .menu-bottom a span {
    width: 12px;
    height: 12px;
    line-height: 17px;
    top: 7px;
    font-size: 11px;
  }

  .lig-nav .nav-item {
    font-size: 11px;
    height: 28px;
    padding: 6px 0;
  }

  .social-nav .nav-item {
    font-size: 13px;
    height: 28px;
    padding: 6px 0;
  }

  .lig-nav .nav-item span,
  .social-nav .nav-item span {
    top: -12px;
    font-size: 11px;
    right: 8px;
    line-height: 20px;
  }

  /* .menu-bottom .center-home img {
    width: 30px;
  } */
}

@media (max-width: 300px) {
  .menu-bottom .center-home {
    width: 62px;
    height: 62px;
  }

  .product-detail .league-page .friends .first-league-table li .name {
    width: 155px;
  }

  .banner1.banner-multi .banner-name {
    font-size: 13px;
    height: 50px;
  }

  .banner1 .banner-name {
    font-size: 13px;
  }

  .lig-nav .nav-item {
    font-size: 10px;
    height: 28px;
    padding: 6px 0;
  }

  .league-page .friends ul li .name {
    width: 45px;
    font-size: 13px;
  }
}

@media (max-width: 280px) {
  .logo-div img {
    width: 100px;
  }

  .banner1.banner-multi .banner-name {
    font-size: 12px;
    height: 46px;
  }

  .banner1 .banner-name {
    font-size: 12px;
  }

  .yeni-modal-bonus .clock-bonus span {
    font-size: 10px;
  }

  .yeni-modal-bonus .clock-bonus i {
    font-size: 12px;
  }

  .izle-kazan-modal.yeni-modal-bonus .video-modal-img img {
    margin-bottom: 0;
    width: 60px;
  }

  .izle-kazan-modal .list-video li:last-child i {
    font-size: 35px;
  }

  .izle-kazan-modal .today-watch-div {
    width: 23px;
    height: 23px;
  }

  .izle-kazan-modal .today-watch-div img {
    width: 11px;
    top: 4px;
    left: 6px;
  }

  .izle-kazan-modal .list-video i {
    font-size: 23px;
  }

  .daily-bonus ul li:last-child {
    padding-top: 20px;
  }

  .daily-bonus ul li.left:last-child .step-icon {
    font-size: 23px;
    width: 44px;
    height: 44px;
  }

  .daily-bonus ul li.left {
    justify-content: center;
  }

  .daily-bonus ul li.right {
    justify-content: center;
  }

  .daily-bonus ul li.left::before {
    left: 71px;
  }

  .daily-bonus ul li.left::after {
    display: none;
  }

  .daily-bonus ul li.right::after {
    display: none;
  }

  .daily-bonus ul li.right::before {
    height: 93px;
    bottom: -25px;
    left: 71px;
  }

  .daily-bonus ul li.left:last-child:before {
    display: none;
  }

  .daily-bonus .last-stars-div {
    left: -5px;
  }
}

@media (max-width: 255px) {
  .daily-bonus ul li.right::before {
    display: none;
  }

  .daily-bonus ul li.right::before {
    display: none;
  }

  .daily-bonus ul li.left::before {
    display: none;
  }
}