body {
  font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  font-weight: normal;
  overflow-x: hidden;
  line-height: 1.2;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 320px) {
  body {
    font-size: 12px;
  }
}
body .bg-layer {
  z-index: -9999;
  position: fixed;
  height: 100vh;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
body .bg-layer .bg-layer-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body .bg-layer .bg-layer-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 0%;
}
body .bg-color {
  background-color: #3ab49aaa;
}
body .masthead-img {
  margin: 0 auto;
  max-width: 400px;
  height: 25vw;
  max-height: 250px;
  min-height: 150px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: transparent;
  background-size: contain;
  background-position: 50% 100%;
  background-image: url("/assets/images/cl/_main/Plant-Rewards_Masthead.png") !important;
}
body .masthead-img.big {
  height: 60vw;
}
body.cny-theme {
  background-color: #8b131a;
  color: #fff;
}
body.cny-theme .bg-layer-gradient {
  background: #8b131a;
  background: linear-gradient(90deg, #8b131a 0%, #8b131a00 2%, #8b131a00 98%, #8b131a 100%);
}
body.cny-theme .bg-layer-img {
  background-color: #8b131a;
  background-image: url("/assets/images/cl/_main/CL_PR_Default_BG_CNY.png");
}
body.cny-theme .masthead-img {
  background-image: url("/assets/images/cl/_main/Plant-Rewards_Masthead_CNY.png") !important;
}
body.cny-theme .bg-color {
  background-color: #8b131aaa;
}
body.cny-theme .bg-nav-top {
  background: linear-gradient(0deg, #8b131a00 0%, #8b131a 100%);
}
body.cny-theme .bg-nav {
  background: #8b131aee;
}
body.xmas-theme {
  background-color: #144e47;
  color: #fff;
}
body.xmas-theme .bg-layer-gradient {
  background: #144e47;
  background: linear-gradient(90deg, #144e47 0%, #144e4700 2%, #144e4700 98%, #144e47 100%);
}
body.xmas-theme .bg-layer-img {
  background-color: url("/assets/images/cl/_main/CL_PR_BG_Xmas.png");
  background-image: url("/assets/images/cl/_main/CL_PR_BG_Xmas.png");
}
body.xmas-theme .masthead-img {
  background-image: url("/assets/images/cl/_main/Plant-Rewards_Masthead-xmas.png") !important;
}
body.xmas-theme .bg-color {
  background-color: #144e47aa;
}
body.xmas-theme .bg-nav-top {
  background: linear-gradient(0deg, #144e4700 0%, #144e47 100%);
}
body.xmas-theme .bg-nav {
  background: rgba(7, 54, 40, 0.87);
}
body input, body select {
  font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
  margin: 10px auto;
  font-weight: bold;
}
body b, body .bold {
  font-weight: bold;
}
body a {
  color: inherit;
  transition: 0.3s ease !important;
}
body a:hover {
  color: inherit;
  opacity: 0.5;
}
body small, body .small {
  margin: 10px auto;
  display: block;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.75);
}
body .underline {
  text-decoration: underline;
}
body img {
  object-fit: contain;
}
body .cursor-pointer {
  cursor: pointer;
  transition: 0.3s ease !important;
}
body .cursor-pointer:hover {
  opacity: 0.7;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

button {
  transition: 0.3s ease !important;
}
button:focus, button:hover {
  outline: none;
  webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  opacity: 0.9;
}
button a {
  text-decoration: none;
}
button.btn-collect.disabled {
  display: none;
}
button.btn-collect.claimable {
  font-size: 16px;
  line-height: 32px;
  background-color: #FFD24F;
  border: 0px;
  color: #3A2178;
  cursor: pointer;
  width: 100%;
  border-radius: 0 5px 5px 0;
}

.btn-primary {
  background-color: #fde501 !important;
  color: #222 !important;
  font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  border: none;
  display: block;
  margin: 0 auto;
  padding: 0.5em 2.5em;
}
.btn-primary[disabled], .btn-primary.disabled {
  background: #989898;
  cursor: default;
}
.btn-primary[disabled]:hover, .btn-primary.disabled:hover {
  opacity: 1;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:target, .btn-primary:active {
  background-color: #fde501 !important;
  color: #222 !important;
  font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  border: none;
  opacity: 0.5;
}

.footer {
  background: #0d1122;
}

.modal-theme .modal-header, .modal-theme .modal-footer {
  border: 0;
}
.modal-theme .modal-content {
  background: transparent;
  border: 0;
}
.modal-theme .modal-masthead {
  width: 75%;
  max-width: 250px;
  z-index: 1;
  margin: 0 auto;
  margin-bottom: -100px;
}
.modal-theme .modal-close {
  position: absolute;
  width: 40px;
  justify-content: center;
  align-items: center;
  height: 40px;
  right: 0;
  top: 0;
  transform: translate(40%, -40%);
  background: #fff;
  border-radius: 50%;
  display: flex;
  cursor: pointer;
  transition: 0.3s ease !important;
}
.modal-theme .modal-close i {
  transition: 0.3s ease !important;
}
.modal-theme .modal-close:hover i {
  color: #971b26 !important;
}
.modal-theme .modal-body {
  padding-top: 65px;
  background: #faba00 url("/assets/images/cl/_main/plant-reward-popup-bg.png") no-repeat 50% 100%;
  background-size: cover;
  border-radius: 2.5rem;
  border: 0.5rem solid #fff;
}

.popup {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: RGBA(0, 0, 0, 0.8);
  z-index: 3;
}

#get-free-seed {
  /* Shine */
  /* animation */
}
#get-free-seed img {
  animation: shake-animation 7.5s ease infinite;
  transform-origin: 50% 50%;
}
@keyframes shake-animation {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  1% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  2% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  3% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  4% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  5% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  6% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  7% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  8% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  9% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  10% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
  10.1% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
#get-free-seed .shine {
  position: relative;
  display: block;
  overflow: hidden;
}
#get-free-seed .shine:after {
  content: "";
  top: 0;
  left: 0;
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  animation: 5s slide 5s infinite;
  /*
  CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/
  */
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)), color-stop(99%, rgba(128, 186, 232, 0)), color-stop(100%, rgba(125, 185, 232, 0)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
  /* IE10+ */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff", endColorstr="#007db9e8",GradientType=1 );
  /* IE6-9 */
}
@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
}

.footer-cloud {
  width: 100%;
  height: 100px;
  margin-bottom: -2px;
}

input.codebox, input[type=number] {
  width: 11vw;
  height: 11vw;
  max-height: 45px !important;
  max-width: 45px !important;
  margin: 2px;
  padding: 5px !important;
  font-size: 18px !important;
  text-align: center;
  font-weight: 800 !important;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.form-check {
  display: block;
  padding: 5px;
  border-radius: 5px;
  transition: 0.3s ease !important;
}

.form-check label {
  position: relative;
  cursor: pointer;
}

.form-check label:before {
  content: "";
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  height: 35px;
  width: 35px;
  border-radius: 7px;
  transition: 0.3s ease !important;
}

.form-check input:checked + label:before {
  background: #3ab49a;
}

.form-check input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 13px;
  width: 6px;
  height: 14px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.capitastar-status {
  position: relative;
}
.capitastar-status:after {
  content: "";
  position: absolute;
  right: -25%;
  bottom: 1px;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: transparent;
  background-size: contain;
}
.capitastar-status.check-success:after {
  background-image: url("/assets/images/cl/token_icons/check-circle-solid.svg");
}
.capitastar-status.check-fail:after {
  background-image: url("/assets/images/cl/token_icons/times-circle-solid.svg");
}

.top_layer_ui {
  z-index: 10;
  opacity: 1;
}
.top_layer_ui.inactive {
  z-index: 0;
  opacity: 0.5;
}

#main_ui {
  width: 98%;
  height: calc(100vh - 50px - 30px);
  position: relative;
  margin: 0 auto 10px;
}
#main_ui .ui_msg {
  width: 100%;
}
#main_ui .check_in_ui, #main_ui .bottom_ui, #main_ui .plant_ui, #main_ui .nutrition_ui, #main_ui .progress_ui {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: transparent;
  background-size: contain;
  margin: 5px;
  cursor: pointer;
  position: relative;
}
#main_ui .bottom_section {
  position: absolute;
  top: calc(100vh - 150px);
  left: 0;
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 468px) {
  #main_ui .bottom_section {
    top: calc(100vh - 140px);
  }
}
#main_ui .bottom_section .bottom_ui_wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#main_ui .bottom_section .bottom_ui {
  width: 15vw;
  height: 15vw;
  max-width: 50px;
  max-height: 50px;
  transition: 0.3s ease !important;
}
#main_ui .bottom_section .bottom_ui:hover {
  opacity: 0.5;
}
#main_ui .bottom_section .bottom_ui.unread {
  position: relative;
}
#main_ui .bottom_section .bottom_ui.unread:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #dc3545 !important;
  border: 2px solid #fbc107;
}
#main_ui .bottom_section .bottom_ui#core_ar_btn:before {
  content: "AR";
}
#main_ui .bottom_section .bottom_ui#daily_challenge_btn:before {
  content: "Challenge";
}
#main_ui .bottom_section .bottom_ui#reward_redemption_btn:before {
  content: "Reward";
}
#main_ui .bottom_section .bottom_ui#notification_btn:before {
  content: "Notice";
}
#main_ui .bottom_section .bottom_ui#share_btn:before {
  content: "Share";
}
#main_ui .bottom_section .bottom_ui:last-child:before {
  position: relative;
  top: -12;
  left: 2%;
}
#main_ui .bottom_section #core_ar_btn {
  background-image: url("/assets/images/cl/token_icons/Gold Token_AR Game.png");
}
#main_ui .bottom_section #daily_challenge_btn {
  background-image: url("/assets/images/cl/token_icons/Gold Token_Challenge.png");
}
#main_ui .bottom_section #reward_redemption_btn {
  background-image: url("/assets/images/cl/token_icons/Gold Token_Rewards.png");
}
#main_ui .bottom_section #notification_btn {
  background-image: url("/assets/images/cl/token_icons/Gold Token_Notifications.png");
}
#main_ui .bottom_section #share_btn {
  background-image: url("/assets/images/cl/token_icons/Gold Token_Refer a Friend.png");
}
#main_ui div.nutrition_ui:before, #main_ui div.bottom_ui:before, #main_ui div.check_in_ui:before {
  font-size: 10px;
  font-weight: bold;
  position: absolute;
  overflow: hidden;
}
#main_ui div.bottom_ui:before, #main_ui div.check_in_ui:before {
  text-align: left;
  right: 50%;
  transform: translate(50%, -100%);
}
#main_ui div.check_in_ui#check_in_btn:before {
  content: "Daily";
}
@media only screen and (max-width: 287px) {
  #main_ui div.nutrition_ui:before, #main_ui div.bottom_ui:before, #main_ui div.check_in_ui:before {
    font-size: 8px;
    top: -3;
  }
}
@media only screen and (min-width: 450px) {
  #main_ui div.nutrition_ui:before, #main_ui div.bottom_ui:before, #main_ui div.check_in_ui:before {
    font-size: 12px;
  }
  #main_ui div.nutrition_ui:before {
    top: 0;
  }
}
#main_ui .top_left_section {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
}
#main_ui .top_left_section .nutrition_ui {
  width: 25vw;
  height: 10vw;
  background-position: 0% 50%;
  position: relative;
  max-width: 125px;
  max-height: 50px;
}
#main_ui .top_left_section .nutrition_ui .progress_box_wrap {
  position: absolute;
  left: 37%;
  top: 50%;
  transform: translate(0%, -50%);
  width: 59%;
  height: 13px;
  border-radius: 11px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  background: #5d3725;
}
#main_ui .top_left_section .nutrition_ui .progress_box_wrap .progress_box {
  height: 100%;
  width: calc(100%/10);
  background: #5d3725;
}
#main_ui .top_left_section .nutrition_ui .progress_box_wrap .progress_box:last-child {
  border-radius: 0 0.5em 0.5em 0;
  background-color: yellow;
}
#main_ui .top_left_section .nutrition_ui:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: transparent;
  background-size: contain;
  background-position: 0% 50%;
}
#main_ui .top_left_section .nutrition_ui .nutrition_add {
  position: absolute;
  right: -5px;
  top: 50%;
  width: 5vw;
  height: 5vw;
  max-width: 25px;
  max-height: 25px;
  z-index: 1;
  transform: translate(50%, -50%);
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: transparent;
  background-size: contain;
  background-image: url("/assets/images/cl/bars/Nutrition_Plus Button.png");
}
#main_ui .top_left_section .nutrition_ui:before {
  width: 100%;
  z-index: 1;
  top: -1;
  transform: translate(38%, 0%);
}
#main_ui .top_left_section .nutrition_ui#fertilizer_bar:before {
  content: "Fertilizer";
}
#main_ui .top_left_section .nutrition_ui#sunlight_bar:before {
  content: "Sun";
}
#main_ui .top_left_section .nutrition_ui#water_bar:before {
  content: "Water";
}
#main_ui .top_left_section #water_bar .progress_box {
  background: #2282ca;
  background: linear-gradient(0deg, #2282ca 15%, #45daff 60%, #45dbf7 80%);
}
#main_ui .top_left_section #water_bar:after {
  background-image: url("/assets/images/cl/bars/Nutrition_Water.png");
}
#main_ui .top_left_section #sunlight_bar .progress_box {
  background: #f7760f;
  background: linear-gradient(0deg, #f7760f 15%, #fab500 60%, #fccd1d 80%);
}
#main_ui .top_left_section #sunlight_bar:after {
  background-image: url("/assets/images/cl/bars/Nutrition_Sun.png");
}
#main_ui .top_left_section #fertilizer_bar .progress_box {
  background: #4d8a1d;
  background: linear-gradient(0deg, #4d8a1d 15%, #77cc45 60%, #99df67 80%);
}
#main_ui .top_left_section #fertilizer_bar:after {
  background-image: url("/assets/images/cl/bars/Nutrition_Fertilizer.png");
}
#main_ui .top_right_section {
  position: absolute;
  top: 0;
  right: 5px;
  width: 25%;
  display: flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  align-items: flex-end;
  -webkit-align-items: flex-end;
  flex-direction: column;
  text-align: right;
}
#main_ui .top_right_section .check_in_ui {
  width: 10vw;
  height: 10vw;
  max-width: 50px;
  max-height: 50px;
  transition: 0.3s ease !important;
  position: relative;
}
#main_ui .top_right_section .check_in_ui:hover {
  opacity: 0.5;
}
#main_ui .top_right_section .check_in_ui #check-status {
  position: absolute;
  left: 47%;
  top: 59%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: transparent;
  background-size: contain;
  background-image: url("/assets/images/cl/token_icons/times-circle-solid.svg");
}
#main_ui .top_right_section .check_in_ui #check-status.check-success {
  background-image: url("/assets/images/cl/token_icons/check-circle-solid.svg");
}
#main_ui .top_right_section .check_in_ui #check-status.check-fail {
  background-image: url("/assets/images/cl/token_icons/times-circle-solid.svg");
}
#main_ui .top_right_section #check_in_btn {
  background-image: url("/assets/images/cl/token_icons/Calendar_no tick.png");
}
#main_ui .top_right_section .progress_ui {
  width: 10vw;
  height: 60vw;
  max-width: 50px;
  max-height: 200px;
  position: relative;
}
#main_ui .top_right_section .progress_ui:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: transparent;
  background-size: contain;
  background-image: url("/assets/images/cl/bars/Progress_Bar.png");
}
#main_ui .top_right_section .progress_ui .progress_box_wrap {
  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translate(-50%, 0);
  width: 15px;
  height: 85%;
  border-radius: 1.5em;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  justify-content: end;
  align-items: center;
  background: #5d3725;
  background: linear-gradient(180deg, #5d3725 0%, #5d3725 calc( calc(100% / 8 * 1) - 1% ), #9e4d34 calc( 100% / 8 * 1), #5d3725 calc( calc(100% / 8 * 1) - 1% ), #5d3725 calc( calc(100% / 8 * 2) - 1% ), #9e4d34 calc( 100% / 8 * 2), #5d3725 calc( calc(100% / 8 * 2) + 1% ), #5d3725 calc( calc(100% / 8 * 3) - 1% ), #9e4d34 calc( 100% / 8 * 3), #5d3725 calc( calc(100% / 8 * 3) + 1% ), #5d3725 calc( calc(100% / 8 * 4) - 1% ), #9e4d34 calc( 100% / 8 * 4), #5d3725 calc( calc(100% / 8 * 4) + 1% ), #5d3725 calc( calc(100% / 8 * 5) - 1% ), #9e4d34 calc( 100% / 8 * 5), #5d3725 calc( calc(100% / 8 * 5) + 1% ), #5d3725 calc( calc(100% / 8 * 6) - 1% ), #9e4d34 calc( 100% / 8 * 6), #5d3725 calc( calc(100% / 8 * 6) + 1% ), #5d3725 calc( calc(100% / 8 * 7) - 1% ), #9e4d34 calc( 100% / 8 * 7), #5d3725 calc( calc(100% / 8 * 7) + 1% ), #5d3725 100%);
}
#main_ui .top_right_section .progress_ui .progress_box_wrap .progress_box {
  border-bottom: 2px solid #5d3725;
  width: 100%;
  height: calc( calc(100%/7) - 3px);
}
#main_ui .top_right_section .progress_ui .progress_box_wrap .progress_box:nth-child(1) {
  background: #f51519;
}
#main_ui .top_right_section .progress_ui .progress_box_wrap .progress_box:nth-child(2) {
  background: #f5271a;
}
#main_ui .top_right_section .progress_ui .progress_box_wrap .progress_box:nth-child(3) {
  background: #f53b1b;
}
#main_ui .top_right_section .progress_ui .progress_box_wrap .progress_box:nth-child(4) {
  background: #f54d1d;
}
#main_ui .top_right_section .progress_ui .progress_box_wrap .progress_box:nth-child(5) {
  background: #f66120;
}
#main_ui .top_right_section .progress_ui .progress_box_wrap .progress_box:nth-child(6) {
  background: #f77524;
}
#main_ui .top_right_section .progress_ui .progress_box_wrap .progress_box:nth-child(7) {
  background: #f9ad2e;
}
#main_ui .top_right_section .progress_ui .progress_box_wrap .progress_box:nth-child(8) {
  background: #cdb52c;
}
#main_ui .middle_section {
  position: absolute;
  transform: translate(-50%, 0%);
  display: block;
  justify-content: center;
  bottom: 17%;
  left: 50%;
  width: 80vw;
  min-width: 250px;
  max-width: 400px;
  height: 80vw;
  min-height: 250px;
  max-height: 400px;
}
#main_ui .middle_section .plant_ui {
  width: 100%;
  height: 100%;
  margin: 0;
  background-position: 50% 100%;
}
#main_ui .middle_section .growth-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  cursor: pointer;
}
#main_ui .middle_section .growth-container .grown_plant_star {
  position: absolute;
  transform: translate(-50%, -50%) scale(1);
  bottom: 22%;
  left: 70%;
  width: 30%;
  animation: slide-fwd-center 1s ease-in-out infinite forwards;
}
@keyframes slide-fwd-center {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
}
#main_ui .middle_section .growth-container .grown_plant_refresh {
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  left: 65%;
  bottom: -10%;
  width: 15%;
  animation: 10s spin 3s ease infinite;
}
@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  20% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  70% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  70.1% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
#main_ui .middle_section .growth-container .grown_plant_coin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20%;
  min-width: 50px;
  max-width: 80px;
}
#main_ui .middle_section .growth-container .grown_plant_coin:nth-child(1) {
  bottom: 8%;
  left: 20%;
}
#main_ui .middle_section .growth-container .grown_plant_coin:nth-child(2) {
  transform: translate(-50%, -50%) rotate(340deg);
  bottom: -2%;
  left: 10%;
}
#main_ui .middle_section .growth-container .grown_plant_coin:nth-child(3) {
  bottom: -4%;
  left: 35%;
}
#main_ui .middle_section .growth-container .grown_plant_coin:nth-child(4) {
  transform: translate(-50%, -50%) rotate(340deg);
  bottom: 8%;
  right: 2%;
}
#main_ui .middle_section .growth-container .grown_plant_coin:nth-child(5) {
  bottom: -3%;
  right: -10%;
}

#popup_notifications .msg-container::-webkit-scrollbar,
#popup_plant_progress .progress-matured .plants-box::-webkit-scrollbar,
#popup_rewards .reward-body-container::-webkit-scrollbar,
#popup_attempt_plant_reward_redemption_confirmation .reward-body-container::-webkit-scrollbar {
  display: none;
}

#popup_notifications .msg-container {
  min-height: 300px;
  max-height: 60vh;
  overflow-y: scroll;
}
#popup_notifications .msg-box {
  text-align: left;
  color: black;
  margin-bottom: 10px;
}
#popup_notifications .msg-box .date {
  border-radius: 5px;
  background-color: #FFD24F;
  text-align: center;
  width: 100px;
  padding: 5px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
}
#popup_notifications .msg-box .status_item {
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: justify;
}
#popup_notifications .msg-box hr {
  border: 1px dashed grey;
}
#popup_notifications .content.have-unread-icon {
  width: 90%;
  display: inline-block;
}
#popup_notifications .unread-icon {
  width: 10%;
  vertical-align: middle;
  display: inline-block;
  padding-left: 10px;
}

#popup_nutrition .nutrient-caption label,
#popup_nutrition .act-text label,
#popup_nutrition .nutrient-content .nutrient-item {
  display: block;
}
#popup_nutrition .nutrient-content .nutrient-item {
  padding: 5px;
  cursor: pointer;
}
#popup_nutrition .nutrient-content .nutrient-item div, #popup_nutrition .nutrient-content .nutrient-item .balance {
  display: inline-block;
}
#popup_nutrition .nutrient-content .nutrient-item div.nutrient-icon {
  background-position: 0 50%;
  height: 35px;
  transform: translate(-10%);
  width: 35px;
  position: fixed;
}
#popup_nutrition .nutrient-content .nutrient-item div.nutrient-sun-icon {
  background-image: url("/assets/images/cl/token_icons/Gold Token_Sun.png");
}
#popup_nutrition .nutrient-content .nutrient-item div.nutrient-water-icon {
  background-image: url("/assets/images/cl/token_icons/Gold Token_Water.png");
}
#popup_nutrition .nutrient-content .nutrient-item div.nutrient-fertilizer-icon {
  background-image: url("/assets/images/cl/token_icons/Gold Token_Fertilizer.png");
}
#popup_nutrition .nutrient-content .nutrient-item .balance {
  margin-top: 3px;
}
#popup_nutrition .nutrient-content .nutrient-item .nutrient-txt {
  text-align: left;
  margin-left: 40px;
}
#popup_nutrition .nutrient-content .nutrient-item .nutrition_add {
  background-image: url("/assets/images/cl/bars/Nutrition_Plus Button.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: transparent;
  background-size: contain;
  height: 5vw;
  max-height: 15px;
  width: 15px;
  margin-left: 5px;
}
#popup_nutrition .nutrient-confirmation .icon,
#popup_nutrition .nutrient-content .nutrient-item div.nutrient-icon {
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}
#popup_nutrition .nutrient-confirmation .icon {
  height: 200px;
  width: 100%;
  background-position: center;
}
#popup_nutrition .nutrient-confirmation .nutrient-water-icon {
  background-image: url("/assets/images/cl/token_icons/Bubbles_Water_01.png");
}
#popup_nutrition .nutrient-confirmation .nutrient-sun-icon {
  background-image: url("/assets/images/cl/token_icons/Bubbles_Sun_01.png");
}
#popup_nutrition .nutrient-confirmation .nutrient-fertilizer-icon {
  background-image: url("/assets/images/cl/token_icons/Bubbles_Fertilizer_01.png");
}
#popup_nutrition .act-text {
  margin-top: 20px;
  margin-bottom: 20px;
}
#popup_nutrition .act-text .important {
  font-size: 18px;
  font-weight: bold;
}

#popup_plant_progress .progress-guide .guide-caption, #popup_plant_progress .progress-guide .guide-content, #popup_plant_progress .progress-guide .guide-footer {
  width: 90%;
}
#popup_plant_progress .progress-guide .guide-caption {
  margin-bottom: 30px;
}
#popup_plant_progress .progress-guide .guide-content {
  margin-bottom: 15px;
}
#popup_plant_progress .progress-guide .guide-footer {
  margin: 0px auto;
  margin-bottom: 20px;
}
#popup_plant_progress .white-bg-opacity {
  color: #000000;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(0px);
  position: absolute;
  left: 0;
  padding: 10px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  bottom: 0;
  right: 0;
}
#popup_plant_progress .plant_ui, #popup_plant_progress .tp-app-logo {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: transparent;
  background-size: contain;
  cursor: pointer;
  margin: 5px;
}
#popup_plant_progress .plant_ui {
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: default;
  height: 150px;
  margin-bottom: 15px;
}
#popup_plant_progress .link-learn-more {
  cursor: pointer;
  margin-top: 5px;
  margin-bottom: 10px;
}
#popup_plant_progress .tp-app-logo {
  height: 100px;
  cursor: default;
}
#popup_plant_progress .progress-tab {
  width: 100%;
  margin-bottom: 15px;
  display: flex;
}
#popup_plant_progress .progress-tab div.tab {
  display: inline-block;
  width: 50%;
  cursor: pointer;
  padding: 10px;
  background-color: #FFD24F;
  border-radius: 5px;
}
#popup_plant_progress .progress-tab div.tab.selected {
  font-weight: bold;
  border-top: 2px solid;
  background-color: inherit;
}
#popup_plant_progress .progress-matured .no-item {
  height: 100%;
}
#popup_plant_progress .progress-matured .plants-box {
  min-height: 300px;
  max-height: 57vh;
  overflow-y: scroll;
}
#popup_plant_progress .progress-matured .plants-box.no-item {
  height: 150px;
}
#popup_plant_progress .progress-matured .plant-box {
  width: 42%;
  display: inline-block;
  margin-bottom: 10px;
}
#popup_plant_progress .progress-matured .plant-box:nth-child(even) {
  margin-left: 10px !important;
}
#popup_plant_progress .progress-matured .plant-box .plant_ui {
  background-color: #ffffff !important;
}
#popup_plant_progress .progress-matured .plant-box .plant-info {
  align-items: center;
  height: 30px;
}
#popup_plant_progress .progress-matured .plant-box .plant-info i.fa-times {
  color: red;
}
#popup_plant_progress .progress-matured .plant-box .plant-info i.fa-check-square {
  color: #48df48;
}

a-scene {
  z-index: -1;
  visibility: hidden;
}
a-scene.show {
  z-index: 1;
  visibility: unset;
  color: #444;
  text-shadow: none;
}
a-scene .game-ui {
  display: block;
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
  text-align: center;
  bottom: 115px;
  z-index: 10;
  color: #fff;
}

.box-content-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.curved-text {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  font-size: 40px;
}

.curved-text span {
  min-width: 0.5em;
  text-align: center;
  padding: 0;
  margin: 0;
}

#popup_daily_challenge #loading_container,
#popup_daily_challenge #msg_container {
  height: 150px;
}
#popup_daily_challenge #msg_container {
  flex-direction: column;
}
#popup_daily_challenge #msg_container .msg-footer {
  width: 100%;
}
#popup_daily_challenge .challenge-logo,
#popup_daily_challenge .reward-icon {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: transparent;
  background-size: contain;
}
#popup_daily_challenge .challenge-logo {
  height: 150px;
  margin-top: 10px;
  margin-bottom: 5px;
}
#popup_daily_challenge .challenge-name,
#popup_daily_challenge .box_take_a_pic .challenge-msg {
  color: #000000;
}
#popup_daily_challenge .challenge-footer,
#popup_daily_challenge .msg-footer,
#popup_daily_challenge .reward-footer {
  margin-top: 30px;
  margin-bottom: 20px;
}
#popup_daily_challenge .act-panel {
  margin-bottom: 10px;
}
#popup_daily_challenge .btn-cta-prev,
#popup_daily_challenge .btn-cta-next {
  display: inline-block;
}
#popup_daily_challenge .box_take_a_pic .challenge-msg {
  width: 80%;
  margin-left: 10%;
}
#popup_daily_challenge .riddle-tips {
  margin-top: 5px;
  margin-bottom: 15px;
}
#popup_daily_challenge .riddle-choices span {
  display: block;
}
#popup_daily_challenge .riddle-choices span label.btn {
  width: 100%;
  overflow: hidden;
  word-break: break-word;
}
#popup_daily_challenge .reward-footer .main-msg,
#popup_daily_challenge .reward-caption {
  font-weight: bold;
}
#popup_daily_challenge .reward-footer {
  margin-top: 10px;
}
#popup_daily_challenge .reward-footer .main-msg {
  margin-bottom: 10px;
}
#popup_daily_challenge .reward-icon {
  height: 100px;
}
#popup_daily_challenge .box_tap_the_plant .plant_wrapper {
  position: relative;
  width: 200px;
  height: auto;
  margin: 10px auto;
}
#popup_daily_challenge .box_tap_the_plant .tap_progress_ui {
  display: block;
  position: relative;
  margin: 10px auto;
  width: 100%;
  height: 10px;
  background: #ff9385;
  background: linear-gradient(90deg, #f53415, #f9ad2e, #7ab500);
  border-radius: 5px;
  border: 2px solid #f1d391;
  overflow: hidden;
}
#popup_daily_challenge .box_tap_the_plant .tap_progress_ui .progress_box {
  background: #5d3725;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transition: 0.3s ease;
}
#popup_daily_challenge .box_tap_the_plant .plant_ui {
  background-repeat: no-repeat;
  width: 100%;
  height: 200px;
  background-size: contain;
  background-position: 50% 50%;
  transform-origin: bottom center;
}
#popup_daily_challenge .box_tap_the_plant .plant_bubble {
  position: absolute;
  left: calc(50% + 32.5px);
  bottom: 80px;
  background-repeat: no-repeat;
  width: 75px;
  height: 50px;
  background-size: contain;
  background-position: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  animation-fill-mode: forwards;
  transform-origin: 0% 100%;
  background-image: url("/assets/images/cl/speech_bubbles/Speech_Bubble_Empty.png");
}
#popup_daily_challenge .box_tap_the_plant .plant_bubble .plant_counter {
  font-size: 1.5rem;
  color: #000;
  font-weight: bold;
}
#popup_daily_challenge .box_tap_the_plant .plant_bubble[status=number] {
  background-image: url("/assets/images/cl/speech_bubbles/Speech_Bubble_Empty.png");
}
#popup_daily_challenge .box_tap_the_plant .plant_bubble[status=default] {
  background-image: url("/assets/images/cl/speech_bubbles/Speech_Bubble_Tap.png");
}
#popup_daily_challenge .box_tap_the_plant .plant_bubble[status=default] .plant_counter {
  display: none;
}
#popup_daily_challenge .box_tap_the_plant .plant_bubble[status=happy] {
  background-image: url("/assets/images/cl/speech_bubbles/Speech_Bubble_Happy.png");
}
#popup_daily_challenge .box_tap_the_plant .plant_bubble[status=happy] .plant_counter {
  display: none;
}
#popup_daily_challenge .box_tap_the_plant .plant_bubble[status=sad] {
  background-image: url("/assets/images/cl/speech_bubbles/Speech_Bubble_Sad.png");
}
#popup_daily_challenge .box_tap_the_plant .plant_bubble[status=sad] .plant_counter {
  display: none;
}
@keyframes expand-bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes shrink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes shake {
  25% {
    transform: skew(1deg, 1deg) rotate(-2deg);
  }
  75% {
    transform: skew(-1deg, -1deg) rotate(2deg);
  }
  0%, 100% {
    transform: none;
  }
}

video {
  width: 100vw;
  height: 100vh;
  z-index: -999;
  object-fit: cover;
  position: fixed;
  filter: brightness(0.75);
}

#popup_new_plant_for_mature .new_seed {
  width: 60%;
  display: block;
  margin: 0px auto;
}
#popup_new_plant_for_mature .new_seed_footer {
  margin-top: 30px;
}
#popup_new_plant_for_mature .new_seed_footer button.btn-cta {
  background-color: red !important;
  color: white !important;
  border-radius: 30px !important;
  border: 4px solid !important;
}

#popup-daily-checkin-body {
  margin-left: 1%;
  display: grid;
  grid-column-start: 1;
  grid-column-end: 7;
  grid-template-columns: 14% 14% 14% 14% 14% 14% 14%;
  margin: 1em auto;
}
#popup-daily-checkin-body .calendar_block {
  display: block;
  padding: 15px 0 5px;
  border-radius: 9px;
  color: white;
  justify-content: center;
  align-items: center;
  margin: 3px;
  font-weight: bold;
  float: left;
  font-size: 1em;
  position: relative;
}
#popup-daily-checkin-body .calendar_block.blank {
  background: transparent;
  opacity: 0;
}
#popup-daily-checkin-body .calendar_block.unchecked {
  background: #8d4d32;
}
#popup-daily-checkin-body .calendar_block.checked {
  background: #7bdd57;
}
#popup-daily-checkin-body .calendar_block:before {
  content: "MON";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
}
#popup-daily-checkin-body .calendar_block:nth-child(7n+1):before {
  content: "MON";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
}
#popup-daily-checkin-body .calendar_block:nth-child(7n+2):before {
  content: "TUE";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
}
#popup-daily-checkin-body .calendar_block:nth-child(7n+3):before {
  content: "WED";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
}
#popup-daily-checkin-body .calendar_block:nth-child(7n+4):before {
  content: "THU";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
}
#popup-daily-checkin-body .calendar_block:nth-child(7n+5):before {
  content: "FRI";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
}
#popup-daily-checkin-body .calendar_block:nth-child(7n+6):before {
  content: "SAT";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
}
#popup-daily-checkin-body .calendar_block:nth-child(7n+7):before {
  content: "SUN";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
}

.install-toast {
  z-index: 10;
  position: absolute;
  top: calc(100vh - 220px );
  color: #222;
  text-shadow: none;
}
.install-toast #install-app {
  display: flex;
  border-radius: 5px;
  padding: 10px;
  color: #222;
  background: rgba(255, 255, 255, 0.5);
  text-shadow: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .register-footer .logo-3d, .register-footer .logo-ecm, .register-footer .logo-tm {
    width: 20%;
  }
  .register-footer .logo-gp {
    width: 11%;
  }
  .register-footer .logo-mm {
    width: 12%;
  }
  .register-footer .logo-sw, .register-footer .logo-qm {
    width: 25%;
  }
}
@media only screen and (max-width: 370px) {
  .register-footer .logo-3d, .register-footer .logo-ecm, .register-footer .logo-tm {
    width: 18%;
  }
  .register-footer .logo-gp, .register-footer .logo-mm {
    width: 10%;
  }
  .register-footer .logo-sw, .register-footer .logo-qm {
    width: 23%;
  }
}
@media only screen and (max-width: 320px) {
  .register-footer .logo-3d, .register-footer .logo-ecm, .register-footer .logo-tm {
    width: 17%;
  }
  .register-footer .logo-mm {
    width: 10%;
  }
  .register-footer .logo-sw, .register-footer .logo-qm {
    width: 20% !important;
  }
}

#popup_attempt_plant_reward_redemption_confirmation .voucher-tnc-box {
  overflow: hidden;
  display: block;
  width: 100%;
  word-wrap: break-word;
}

#popup_ar_game #popup_ar_game_icon_container label.lbl-nutrition:before {
  position: absolute;
  font-size: 10px;
  font-size: 12px;
}
#popup_ar_game #popup_ar_game_icon_container label.lbl-nutrition.lbl-water:before {
  content: "Water";
  transform: translate(35%, 390%);
}
#popup_ar_game #popup_ar_game_icon_container label.lbl-nutrition.lbl-sunlight:before {
  content: "Sun";
  transform: translate(90%, 390%);
}
#popup_ar_game #popup_ar_game_icon_container label.lbl-nutrition.lbl-fertilizer:before {
  content: "Fertilizer";
  transform: translate(13%, 390%);
}

#popup_rewards .reward-body-container,
#popup_attempt_plant_reward_redemption_confirmation .reward-body-container {
  max-height: 60vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

/*# sourceMappingURL=plant.css.map */