/**
 * WEBSITE: https://themefisher.com
 * TWITTER: https://twitter.com/themefisher
 * FACEBOOK: https://www.facebook.com/themefisher
 * GITHUB: https://github.com/themefisher/
 */

@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,500,500i,600,600i,700,700i,800|Open+Sans:400,400i,600,600i,700,700i,800&display=swap);
/* Typography
================================================== */
body {
  background: #fff;
  color: #555;
}

body,
p {
  font-family: "Open Sans", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
  line-height: 26px;
  font-size: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #212121;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
}

h1 {
  font-size: 36px;
  line-height: 48px;
}

h2 {
  font-size: 28px;
  line-height: 36px;
  text-transform: uppercase;
  letter-spacing: -1px;
}

h3 {
  font-size: 24px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

h4 {
  font-size: 18px;
  line-height: 28px;
  text-transform: uppercase;
  letter-spacing: -0.2px;
}

h5 {
  font-size: 14px;
  line-height: 24px;
}

.alert .icon {
  margin-right: 15px;
}

@font-face {
  font-family: ZingRustDemo-Base;
  src: url("../fonts/Zing/ZingScriptRustSBDemo-Base.otf") format("truetype");
}
html {
  width: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
}

label {
  padding: 0px !important;
  position: relative;
  margin: 0px !important;
  cursor: pointer;
}

#font-testing {
  color: white;
  font-size: 32px;
}

#header {
  margin-top: 20px;
  padding: 16px;
  right: 0;
  left: 0;
  z-index: 1030;
  bottom: 0;
  background-color: #0096ff;
  position: fixed;
  width: 41.666667%;
  margin: auto;
}

.logo {
  position: relative;
  width: 50%;
  height: 50%;
}

.cursor-pointer {
  cursor: pointer;
}

.form-control-sm {
  background-color: #209ae9 !important;
  color: white !important;
}

.form-control::-webkit-input-placeholder {
  color: white !important;
}

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

.game-cards {
  height: 221px;
  width: 126px;
}

.buttons-round {
  height: 40px;
  width: 40px;
  background-color: white;
}

.buttons-row {
  margin-top: 80px;
}

.number-circle {
  width: 30px;
  height: 30px;
  background-color: white;
  color: #f48eb6;
  border-radius: 50px;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
}

.logoWrapper {
  height: calc(100vh - 71px);
  padding-top: 16px;
  background-color: #0096ff !important;
  position: relative;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 30px;
}

.logoWrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.navicons {
  width: 47px;
  margin-right: auto;
  margin-left: auto;
  display: block;
  height: -moz-max-content;
  height: max-content;
}

.nav-link {
  font-family: Roboto;
  letter-spacing: 0.54px;
  color: #FFFFFF;
  opacity: 1;
  font-size: 18px;
}

.text-sm {
  font-size: 12px;
}

.nav .nav-link:active {
  color: #EB356A;
}

.formWrapper {
  box-shadow: 0px 3px 6px rgba(18, 27, 79, 0.5098039216);
  border-radius: 15px;
  opacity: 0.95;
}

.formLogo {
  margin-top: -4rem;
  margin-left: -2rem;
  width: 163px;
  height: 105px;
  position: fixed;
}

.formLabel {
  color: #595F83;
}

.input-custom-design {
  background: #39a3e7;
  border-radius: 8px;
  padding: 24px;
  color: white;
}

.form-control:focus {
  background: #39a3e7;
  border-radius: 8px;
  padding: 24px;
  color: white;
}

.input-custom-design::-moz-placeholder {
  color: white !important;
}

.input-custom-design::placeholder {
  color: white !important;
}

.form-group {
  margin-bottom: 0.7rem;
}

.btn-primary-2 {
  background-image: linear-gradient(180deg, #6FE6E9, #00BDC1);
  font-size: 12px;
  padding-top: 1px;
  padding-left: 13px;
  padding-left: 3rem;
  padding-right: 3rem;
  border-radius: 2rem;
  box-shadow: 2px 2px 3px rgba(239, 93, 149, 0.5607843137);
  color: #FFFFFF;
  text-align: center;
}

.btn-primary-3 {
  font-size: 12px;
  padding-top: 6px;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 2rem;
  color: #CF4A7D;
  text-align: center;
  margin-top: -11px !important;
  align-items: center;
  margin-inline: 190px;
  box-shadow: 2px 2px 3px rgba(239, 93, 149, 0.5607843137);
}

.form-control::-moz-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  /* Firefox */
}

.form-control::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  /* Firefox */
}

.image-container {
  position: relative;
  text-align: center;
  color: black;
}

.image-container2 {
  position: relative;
  text-align: center;
  color: black;
}

.image-text {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  color: #FFFFFF;
  background-color: black;
  opacity: 0.5;
  overflow: hidden;
  width: 134px;
}

.image-text2 {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFFFFF;
  opacity: 1;
  overflow: hidden;
  width: 134px;
}

img {
  vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: black;
}

.modal-height {
  height: 60%;
}

.btn1 {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 0px solid #F38D1B;
  padding: 0.575rem 3rem;
  --btn-raise: 1rem;
  -webkit-clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
          clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
  background-color: #fefd64;
  text-transform: uppercase;
  background: transparent linear-gradient(180deg, #F6CD84 0%, #F3A032 65%, #F38D1B 100%) 0% 0% no-repeat padding-box;
  opacity: 1;
}

.btn2 {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 3px solid #15A5CF;
  padding: 0.5rem 3rem;
  --btn-raise: 1rem;
  -webkit-clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
          clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
  background-color: #fefd64;
  text-transform: uppercase;
  background: #20C4F4;
  opacity: 1;
}

.bgpink {
  width: 100px;
  height: 100px;
  background-image: url("../images/13.jpeg");
}

.flip-card {
  width: 143px;
  height: 220px;
  cursor: pointer;
}

.card-2,
.card-3,
.card-3,
.card-4,
.card-5 {
  animation: fadeInOne 1s;
  opacity: 0;
}

.card-2 {
  animation-fill-mode: forwards;
}

.card-3 {
  animation-delay: 0.75s;
  animation-fill-mode: forwards;
}

.card-4 {
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}

.card-5 {
  animation-delay: 2.25s;
  animation-fill-mode: forwards;
}

@keyframes fadeInOne {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.bgpink {
  background-color: pink;
}

.light-blue-bg {
  background-color: #6FE6E9;
  font-size: 6px;
  line-height: normal;
}

.cardimg {
  max-height: 75px;
}

.confirmation-modal {
  border-radius: 2rem;
}

.pleasewait {
  top: 0px;
}

.borderblue {
  border: 5px solid #20C4F4;
  border-radius: 5px;
}

.borderrainbow {
  border: 5px solid transparent;
  background-image: linear-gradient(to bottom, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-radius: 0px;
}

.borderblack {
  border: 4px solid black;
  border-radius: 10px;
}

.moreOptionModalStyle {
  position: absolute;
  background-color: #333652;
  border-radius: 20px;
}

.moreOptionModalStyle .welcome-img {
  width: 100px;
  height: 100px;
  display: block;
  margin: auto;
  margin-top: 26px;
  margin-bottom: 26px;
}

.moreOptionModalItems {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.moreOptionModalItems a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 3px solid #ffffff;
  border-radius: 6px;
  margin-bottom: 20px;
  width: 90%;
  padding: 10px;
}

.moreOptionModalItems a:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 3px solid #ffffff;
  border-radius: 6px;
  margin-bottom: 20px;
  width: 90%;
  padding: 10px;
}

.moreOptionModalItems p {
  text-transform: uppercase;
  font-size: 16px;
  width: 80%;
  white-space: initial;
  margin-bottom: 0;
  color: #ffffff;
}

.moreOptionModalItems img {
  width: 32px;
}

.moreOptionModalItems a:first-child img {
  margin-right: 18px;
}

.moreOptionModalItems a:hover {
  border: 3px solid #FCBD08;
  background-color: transparent;
}

.modify-preferences-wrapper {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 15px;
}

.modify-preferences {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding-bottom: 30px;
}

.modify-preferences-container {
  height: 115px;
  width: 115px;
  box-shadow: 1px -28px 179px -28px rgba(17, 1, 68, 0.08);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  border: 2px solid #F7F7F7;
}

.modify-preferences-container.selected-tile {
  box-shadow: -1px 1px 42px 5px rgba(247, 247, 247, 0.54);
  -webkit-box-shadow: -1px 1px 42px 5px rgba(247, 247, 247, 0.54);
  -moz-box-shadow: -1px 1px 42px 5px rgba(247, 247, 247, 0.54);
  background-color: #F7F7F7;
}

.company-catalog {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 30px;
}

.modify-preferences input[type=checkbox] {
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
}

.modify-preferences input[type=checkbox]:after {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: none;
}

.modify-preferences input[type=checkbox]:checked:after {
  background-color: white;
}

.modify-preferences-container img {
  width: 60px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
}

.active-status {
  color: #2BFF03 !important;
}

.company-catalog-items {
  display: flex;
  gap: 15px;
  align-items: start;
  cursor: pointer;
}

.subscribed-modal {
  position: absolute;
  z-index: 1000000;
  left: 50%;
  right: 50%;
  top: 27px;
  transform: translateX(-50%);
}

.info-modal {
  position: absolute;
  z-index: 1000000;
  left: 50%;
  right: 50%;
  top: 27px;
  transform: translateX(-50%);
}

.add-space-modal {
  position: absolute;
  z-index: 1000000;
  left: 50%;
  right: 50%;
  top: 27px;
  transform: translateX(-50%);
}

.oops-modal {
  position: absolute;
  z-index: 1000000;
  left: 50%;
  right: 50%;
  top: 27px;
  transform: translateX(-50%);
}

.sorryModal {
  position: absolute;
  z-index: 100000;
  left: 50%;
  right: 50%;
  top: 27px;
  transform: translateX(-50%);
}

.calendar-modal {
  position: absolute;
  z-index: 99999;
  left: 50%;
  right: 50%;
  top: 27px;
  transform: translateX(-50%);
}

.company-catalog-modal {
  position: absolute;
  z-index: 99999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.subscribed-modal {
  position: absolute;
  z-index: 99999;
  left: 50%;
  right: 50%;
  top: 100px;
  transform: translateX(-50%);
}

.unsuscribe-modal {
  position: absolute;
  z-index: 99999;
  left: 50%;
  right: 50%;
  top: 100px;
  transform: translateX(-50%);
}

.welcome-to-juice-card-modal {
  position: absolute;
  z-index: 999999;
  left: 50%;
  right: 50%;
  top: 100px;
  transform: translateX(-50%);
}

.shadow-modal-calender {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  opacity: 0.5;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
}

.divider-seperator {
  width: 100%;
  height: 1px;
  background-color: #707070;
  opacity: 0.3;
  margin: 30px 0 30px 0;
}

.company-catalog-modal-card {
  background-color: #FF6499;
  color: white;
  border: 5px solid black;
  border-radius: 1rem;
  height: 280px;
  width: 150px !important;
}

.history-of-used-card {
  background-color: #20C4F4;
  color: white;
  border: 5px solid black;
  border-radius: 1rem;
  height: 221px;
  width: 126px !important;
}

.history-of-used-multi-color-card {
  background: linear-gradient(to top, #FBC71D 0%, #FBC71D 50%, #F0629A 50%, #F0629A 100%);
  color: white;
  border: 5px solid black;
  border-radius: 1rem;
  height: 260px;
  width: 150px !important;
}

.chat-msg-input input:focus,
.chat-msg-input input:active {
  outline: none;
}

.wrapper .option {
  background: #fff;
  height: 65px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 6px solid #FCBD08;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.wrapper .option .dot {
  height: 20px;
  width: 20px;
  background: transparent;
  border-radius: 50%;
  position: relative;
  border: 2px solid #EA4978;
}

.wrapper .option .dot::before {
  position: absolute;
  content: "";
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #EA4978;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}

input[type=radio] {
  display: none;
}

#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2 {
  border-color: #FCBD08;
}

#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot {
  background: #fff;
}

#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before {
  opacity: 1;
  transform: scale(1);
}

.wrapper .option span {
  font-size: 20px;
  color: #FCBD08;
}

#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span {
  color: #EA4978;
}

.custom-scrollbar-container {
  display: flex;
  -moz-column-gap: 20px;
       column-gap: 20px;
  border: 1px solid rgba(18, 27, 79, 0.3);
  border-radius: 5px;
  padding: 16px;
}

.scrollbar {
  height: 300px;
  overflow: auto;
  padding: 0 10px;
}

#scrollbar1::-webkit-scrollbar {
  width: 16px;
}

#scrollbar1::-webkit-scrollbar-track {
  border-radius: 8px;
}

#scrollbar1::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: #00218d;
}

.single-card-display {
  color: white;
  border: 5px solid black;
  border-radius: 1rem;
  height: 400px;
  width: 280px !important;
}

.confirmation-card-modal {
  position: absolute;
  z-index: 99999;
  left: 50%;
  right: 50%;
  top: 100px;
  transform: translateX(-50%);
}

.pleasewait-card-modal {
  position: absolute;
  z-index: 99999;
  left: 50%;
  right: 50%;
  top: 100px;
  transform: translateX(-50%);
}

.cards-container {
  position: absolute;
  width: 100px;
  height: 100px;
  bottom: 100px;
  right: 25%;
}

.cards-container img {
  width: 100px;
  height: 100px;
}

.cards-container-text {
  position: absolute;
  font-weight: bold;
  color: white;
  left: 4px;
  top: 35px;
  margin-bottom: 0;
  width: 130px;
  font-size: 18px;
}

.container-clock-animation {
  position: absolute;
  bottom: 40%;
  color: #272f5e;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  left: 40%;
}

.container-clock-animation p {
  margin-bottom: 0;
  font-size: 10px;
  font-weight: 600;
}

.container-clock-animation h1 {
  font-size: 24px;
  font-weight: 300px;
  margin-bottom: 0;
}
@keyframes slide-top {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}
.payment-strip-heading,
.policies-heading {
  font-size: 16px;
}

.circle {
  background-color: white;
  height: 25px;
  width: 25px;
  position: absolute;
  margin-top: -1rem;
  margin-left: 1.8rem;
  color: #F0629A;
}

.cancircle {
  background-color: #F0629A;
  height: 22px;
  width: 21px;
  position: absolute;
  margin-top: -1.5rem;
  margin-left: 5.8rem;
  color: #fff;
}

.tin-circle {
  position: relative;
}

.number-in-circle {
  margin-bottom: 10px !important;
}

ul.tabs {
  padding: 7px;
  font-size: 0;
  margin-top: 60px;
  list-style-type: none;
  text-align: left;
}

ul.tabs li {
  display: inline;
  margin: 0;
  margin-top: 15px;
}

ul.tabs li a {
  font: normal 12px Verdana;
  text-decoration: none;
  position: relative;
  z-index: 1;
  padding: 10px 30px;
  margin: 10px;
  color: #fff !important;
  background: #20C4F4;
  border-radius: 15px 15px 15px 15px;
  outline: none;
}

ul.tabs li.selected a {
  position: relative;
  top: 0px;
  font-weight: bold;
  background: #F0629A;
}

.yellow-card {
  background-color: #FFCB03;
}

.pink-card {
  background-color: #F0629A;
}

.pink-yellow {
  background-image: linear-gradient(180deg, #F0629A 50%, #FFCB03 50%);
}

.scroll-extender {
  height: 100px;
}

@media only screen and (max-width: 1280px) {
  .calendar {
    position: relative;
    display: block;
  }
  .calenderimg {
    position: absolute;
  }
}
@media (max-width: 768px) {
  .calender {
    -o-object-fit: contain;
       object-fit: contain;
    position: absolute;
    margin-top: 50px;
  }
}
@media screen and (max-width: 790px) {
  .header-popups-font {
    font-size: clamp(1rem, 2vw, 2rem);
  }
  .popup-font {
    font-size: clamp(0.9rem, 1vw, 2rem);
  }
  .next-button-mobile {
    padding-inline: 20px;
    padding-block: 10px;
  }
  .good-luck-img-mobile {
    width: 100px;
    height: 100px;
  }
  .moreOptionModalStyle {
    width: 80%;
  }
  .moreOptionModalItems a:first-child {
    padding: 5px;
  }
  .moreOptionModalItems p {
    font-size: 12px;
  }
  .moreOptionModalStyle .welcome-img {
    width: 50px;
    height: 50px;
  }
  .moreOptionModalItems img {
    width: 16px;
  }
  .modify-preferences-container {
    height: 130px;
    width: 130px;
  }
  .company-catalog {
    justify-content: center;
  }
  .company-catalog-container {
    height: 180px;
    width: 220px;
  }
  .page-header-text {
    font-size: 16px;
  }
  .company-catalog-modal-content h2 {
    font-size: 16px !important;
  }
  .company-catalog-modal-content h4 {
    font-size: 14px !important;
  }
  .company-catalog-modal-content p {
    font-size: 12px !important;
  }
  .cards-container {
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: 100px;
    right: 5%;
  }
  .cards-container img {
    width: 80px;
    height: 80px;
  }
  .cards-container-text {
    top: 25px;
    font-size: 14px;
  }
  .juicebar-center {
    justify-content: center !important;
  }
}
@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px;
  }
}
@media screen and (max-width: 500px) {
  .navigation-container {
    width: 2000px !important;
    margin: 0 auto;
  }
  .nav-smaller {
    padding-inline: 0.5rem;
  }
  .nav-link {
    padding-inline: 0px;
  }
  .nav-item {
    white-space: nowrap;
  }
  .header-popups-font {
    font-size: clamp(0.7rem, 2.2vw, 1rem);
  }
  .popup-font {
    font-size: clamp(0.5rem, 1.9vw, 0.9rem);
  }
  .navicons {
    width: 20px;
    height: 20px;
    margin-right: auto;
    margin-left: auto;
    display: block;
  }
  .nav-link {
    font-family: Roboto;
    letter-spacing: 0.54px;
    color: #FFFFFF;
    opacity: 1;
    font-size: 12px;
  }
}
@media screen and (max-width: 800px) {
  .logoWrapperContainer border-red app-container app-outer-container {
    display: block;
  }
  .logoWrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  #header {
    width: 100% !important;
  }
}
*:not(.fa) {
  font-family: ZingRustDemo-Base !important;
}

/* Button */
.btn:active, .btn:focus {
  box-shadow: none !important;
}

.btn-primary,
.btn-dark {
  border: 0;
  border-radius: 3px;
  padding: 12px 20px 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  transition: 350ms;
  font-size: 14px;
}
@media (max-width: 800px) {
  .btn-primary,
  .btn-dark {
    font-size: 13px;
  }
}

.btn-white.btn-primary {
  background: #fff;
  color: #ffb600;
}

.btn-primary {
  background: #ffb600;
}

.btn-dark {
  background: #23282d;
}

.btn-primary:hover,
.btn-dark:hover,
.btn-white.btn-primary:hover {
  background: #111;
  color: #fff;
}
.btn-primary:hover:active, .btn-primary:hover:focus,
.btn-dark:hover:active,
.btn-dark:hover:focus,
.btn-white.btn-primary:hover:active,
.btn-white.btn-primary:hover:focus {
  color: #fff;
  background-color: #111 !important;
}

.general-btn {
  margin-top: 50px;
}

.border-red {
  border: 0px solid red !important;
}

.app-container,
.navigation-container {
  width: 800px !important;
  margin: 0 auto;
}

.app-container .container {
  width: 100% !important;
}

.app-inner-container {
  width: 800px !important;
  margin: 0 auto !important;
}

.app-outer-container {
  display: contents;
  position: relative;
}

.full-height {
  height: 100vh;
}

.popup {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
}

.popup-w1 {
  min-width: 350px !important;
  max-width: 250px;
}

.popup-w2 {
  width: 93%;
}

.popup-w3 {
  min-width: 350px !important;
  max-width: 500px;
}

.popup-w4 {
  min-width: 350px !important;
  max-width: 500px;
}

.popup-open {
  display: block;
}

.modal-overlay,
.shadow-modal {
  position: fixed;
  display: none;
  width: 800px;
  margin: 0 auto;
  background-color: #000000;
  opacity: 0.5;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
}

.modal-overlay-open {
  display: block;
}

.popup-open {
  display: block;
}

#card-modal {
  border-radius: 30px;
  width: unset;
  max-width: 90%;
}

#option-modal {
  top: unset;
  left: 50%;
  transform: translateX(60px);
  right: 0 !important;
  width: 300px;
  bottom: 50px;
}

#catalog-modal,
#cards-tutoral-modal {
  border-radius: 30px;
  max-width: 620px;
}

@media screen and (max-width: 800px) {
  #option-modal {
    margin-right: 40px;
    left: unset;
    transform: unset;
  }
}
.nav-items-container {
  position: relative;
  flex-wrap: nowrap !important;
  gap: 15px;
}

.navigation-container {
  padding: 0px 10px !important;
  padding-top: 5px !important;
  height: 71px;
}

.navigation-icon {
  width: 40px;
  height: 40px;
}

.navigation-icon.more-icon {
  margin: 13px 0px;
  margin-left: 7px;
  height: 15px;
}

.navigation-txt {
  font-size: 14px;
  padding: 0px 10px;
}

.navigation-txt.active-tab {
  color: #EB346A;
}

@media screen and (max-width: 500px) {
  .nav-items-container {
    overflow: scroll !important;
    overflow-y: hidden !important;
  }
  .nav-items-container::-webkit-scrollbar {
    width: 8px;
  }
  .nav-items-container {
    scrollbar-width: thin;
    scrollbar-color: #1F9AE9;
  }
  .nav-items-container::-webkit-scrollbar-track {
    background: #1F9AE9;
  }
  .nav-items-container::-webkit-scrollbar-thumb {
    background-color: #0b69a3;
    border-radius: 6px;
    border: 3px solid #1F9AE9;
  }
  .navigation-container {
    width: 2000px !important;
    margin: 0 auto;
  }
  .nav-smaller {
    padding-inline: 0.5rem;
  }
  .nav-link {
    padding-inline: 0px;
  }
  .nav-item {
    white-space: nowrap;
  }
  .header-popups-font {
    font-size: clamp(0.7rem, 2.2vw, 1rem);
  }
  .popup-font {
    font-size: clamp(0.5rem, 1.9vw, 0.9rem);
  }
  .navicons {
    width: 20px;
    height: 20px;
    margin-right: auto;
    margin-left: auto;
    display: block;
  }
  .nav-link {
    font-family: Roboto;
    letter-spacing: 0.54px;
    color: #FFFFFF;
    opacity: 1;
    font-size: 12px;
  }
  .navigation-icon.more-icon {
    margin: 0px 0px;
    margin-left: -6px;
  }
  .navigation-txt.more-txt {
    transform: translateY(-3px);
  }
}
.page-header-text {
  margin-top: 12px;
}

.catalog-modal {
  padding: 15px 30px;
  max-height: 90%;
  overflow-y: scroll;
}

.card-outer {
  min-width: 180px !important;
  height: 300px !important;
  margin-bottom: 10px;
}

.card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  flex: 1;
  display: flex;
}

.card-image {
  width: 100%;
  min-height: 100px;
  flex: 5;
}

.card-image img {
  height: 100%;
  width: 100%;
}

.card-text {
  font-size: 10px;
  flex: 1;
  margin: 0;
}

.card-action {
  flex: 5;
}

.popup-logo-wrapper {
  display: flex;
}

.social-icons-wrapper {
  display: flex;
  justify-content: center;
}

.social-img {
  margin: 0px 5px;
}

.header-right-image {
  width: 25px;
}

.catalog-container {
  max-width: 700px;
  margin: 0 auto;
  margin-bottom: 0;
}

.company-catalog-container img {
  width: 100px;
  border-radius: 11px;
  margin-bottom: 10px;
}

.company-catalog-container {
  width: 195px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  padding: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}

.company-catalog-container h6 {
  font-size: 18px;
  margin-top: 4px;
  color: white;
}

.company-catalog-container p {
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  color: white;
  margin-top: 4px;
}

.catalog-searcher-wrapper form {
  color: #fffbfb;
  display: flex;
  padding: 2px;
  border: 1px solid currentColor;
  border-radius: 5px;
  margin: 0 0 30px;
}

.catalog-searcher-wrapper input[type=search] {
  border: none;
  background: transparent;
  margin: 0;
  padding: 7px 8px;
  font-size: 14px;
  color: white;
  border: 1px solid transparent;
  border-radius: inherit;
}

.catalog-searcher-wrapper input[type=search]::-moz-placeholder {
  color: #fffefe !important;
}

.catalog-searcher-wrapper input[type=search]::placeholder {
  color: #fffefe !important;
}

.catalog-searcher-wrapper button[type=submit] {
  text-indent: -999px;
  overflow: hidden;
  width: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  cursor: pointer;
  opacity: 0.7;
}

.catalog-searcher-wrapper button[type=submit]:hover {
  opacity: 1;
}

.catalog-searcher-wrapper button[type=submit]:focus,
.catalog-searcher-wrapper input[type=search]:focus {
  box-shadow: 0 0 3px 0 #ffffff;
  border-color: #ffffff;
  outline: none;
}

.catalog-searcher-wrapper form.nosubmit {
  border: none;
  padding: 0;
}

.catalog-searcher-wrapper input.nosubmit {
  width: 100%;
  padding: 9px 4px 9px 40px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}

.wrapper {
  background: #fff;
  border-radius: 15px;
}

.wrapper header {
  display: flex;
  align-items: center;
  padding: 25px 30px 10px;
  justify-content: space-between;
}

header .icons {
  display: flex;
}

header .icons span {
  height: 38px;
  width: 38px;
  margin: 0 1px;
  cursor: pointer;
  color: #878787;
  text-align: center;
  line-height: 38px;
  font-size: 1.9rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 50%;
}

.icons span:last-child {
  margin-right: -10px;
}

header .icons span:hover {
  background: #f2f2f2;
}

header .current-date {
  font-size: 1.55rem;
  font-weight: 500;
}

.calendar ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
}

.calendar .days {
  margin-bottom: 20px;
}

.calendar li {
  /* color: #333; */
  width: 14.2857142857%;
  font-size: 1.07rem;
}

.calendar .weeks li {
  font-weight: 500;
  cursor: default;
}

.calendar .days li {
  z-index: 1;
  cursor: pointer;
  position: relative;
  margin-top: 30px;
}

.days li.inactive {
  color: #aaa;
}

.days li.active {
  color: #fff;
  background-color: none;
}

.days li::before {
  position: absolute;
  content: "";
  left: 18%;
  top: 40%;
  height: 40px;
  width: 40px;
  z-index: -1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: none !important;
}

.days li.active {
  background: #9B59B6;
  border-radius: 200px;
}

.days li:not(.active):hover::before {
  background: #f2f2f2;
}

.wallet-card {
  position: relative;
  border-width: 3px;
  width: 150px !important;
  border-radius: 20px;
  padding: 15px 10px !important;
}

.wallet-card-inner {
  height: 185px;
}

.wallet-card-time {
  font-size: 16px;
  color: #ffffff;
  margin-top: 10px;
}

.wallet-card-blank {
  border: 1px dotted black;
  border-radius: 10px;
  height: 185px;
}

.img-level {
  position: absolute;
  top: -15px;
  right: -15px;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  display: flex;
  overflow: hidden;
}

.img-level-border {
  border: 1px solid black;
}

.img-level-inner {
  display: flex;
  flex: 1;
  background-color: #DDDDDD;
  border-left: 1px solid black;
}

.img-level-first {
  border-left: 0px solid black;
}

.yellow-level {
  background-color: #FFCB03;
}

.pink-level {
  background-color: #F0629A;
}

.wallet-level-btn {
  position: relative;
  color: #ffffff;
  width: 100px;
  width: -moz-fit-content;
  width: fit-content;
  border-width: 0px;
}

.wallet-btn-wrapper-outer {
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px;
  background: #20C4F4;
  --btn-raise: 1rem;
  -webkit-clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
  clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
}

.wallet-btn-wrapper-inner {
  width: -moz-fit-content;
  width: fit-content;
  padding: 3px;
  background: #14A4CF;
  --btn-raise: 1rem;
  -webkit-clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
  clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
}

.bigger-btn {
  height: 55px;
  width: 180px;
  font-size: 16px;
}

.header-left-logo {
  width: 110px;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.header-center-icon {
  width: 100px;
  margin: 0 auto;
}

.header-right-logo {
  width: 60px;
}

.activity-icon-wrapper {
  margin-top: 10px;
}

.activity-icon {
  width: 15px;
}

.activity-text {
  color: #2bff03;
  margin-left: 10px;
  font-size: 18px;
}

.inactivity-text {
  color: #BD5D74;
  margin-left: 10px;
  font-size: 18px;
}

.single-logo {
  margin: 30px 0px;
  padding-left: 0px;
}

.single-logo-img {
  width: 150px;
}

ul {
  list-style-type: none;
  max-width: auto;
}

li {
  display: inline-block;
}

input[type=checkbox][id^=checkbox] {
  display: none;
}

label {
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
}

label p {
  text-align: center;
  font-family: Open Sans;
  font-weight: 700;
}

label img {
  height: 200px;
  width: 200px;
  transition-duration: 0.2s;
}

:checked + label:before {
  transform: scale(2);
}

:checked + label img {
  transform: scale(0.9);
  box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

.welcome-content-blur {
  filter: blur(5px);
  pointer-events: none;
}

.dice-animation {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 10%);
  cursor: pointer;
  display: none;
}

.info-icon {
  width: 20px;
}

.steps-wrapper {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

.dice-gif,
.plan-ended-image {
  -o-object-fit: none;
     object-fit: none;
  height: 320px;
}

.plan-ended-image {
  display: none;
}

.blur-gif {
  filter: blur(5px);
}

.dice-wrapper {
  position: relative;
}

.plan-ended {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: 400px;
  height: 100%;
  position: absolute;
}

.next-plain-wrapper {
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
}
.next-plain-wrapper .next-plan-timer {
  font-size: 25px;
  font-weight: bold;
}
.next-plain-wrapper span {
  text-align: center;
  color: black;
}

.next-plain-wrapper:first-child {
  font-size: 16px;
}

.next-plan-cards-wrapper .next-plan-cards {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateX(50px);
  width:120px
}
.next-plan-cards-wrapper .next-plan-cards img {
  width: 120px;
}
.next-plan-cards-wrapper .next-plan-cards .image-overlay {
  height: 66px;
  width: 120px;
  position: absolute;
  top: 27px;
  background: rgba(0, 0, 0, 0.1333333333);
  border-radius: 10px;
}
.next-plan-cards-wrapper .new-pack {
  position: absolute;
  right: 0;
  bottom: -21px;
  transform: translateX(37px);
  font-size: 20px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8666666667);
}
.next-plan-cards-wrapper .juice-price {
  transform: translate(267px, 73px);
}
.next-plan-cards-wrapper .juice-price img {
  width: 35px;
}
.next-plan-cards-wrapper .juice-price div {
  background-color: #f0629a;
  height: 18px;
  width: 18px;
  margin-top: -13px;
  margin-left: 16px;
}
.next-plan-cards-wrapper .juice-price div p {
  color: #ffffff;
  font-size: 10px;
  padding: 0px;
  margin: 0px;
  line-height: 2;
}

@media screen and (max-width: 550px) {
  .plan-ended {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.eye {
  cursor: pointer;
  margin-left: -30px;
  z-index: 100;
  padding-right: 13px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.icon-input {
  border-top-right-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
}

.eye-shown {
  display: none;
}

.password-input {
  color: black !important;
}

.form-control-sm {
  background-color: white !important;
}

.form-control::-webkit-input-placeholder {
  color: #209ae9 !important;
  font-size: 12px !important;
}

.blue-input {
  background-color: #209ae9 !important;
  color: #fff !important;
}

.blue-input:-webkit-autofill,
.blue-input:-webkit-autofill:hover,
.blue-input:-webkit-autofill:focus,
.blue-input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #ffffff;
}

.construction-text {
  font-size: 20px;
  color: #fff;
}

.construction-text-wrapper {
  max-width: 495px;
  margin: 0 auto;
  margin-top: 50px;
}

.user-pfp {
  width: 140px;
  height: 140px;
  border: 6px solid #F6B734;
  margin: auto;
  display: block;
  border-radius: 100px;
}

.user-details-container {
  margin-top: 75px !important;
  max-width: 420px;
  margin: 0 auto;
}

.user-single-detail {
  margin-bottom: 60px;
}

.user-detail-key {
  margin-left: 15px;
  margin-bottom: -3px;
  color: #717795;
  font-size: 18px;
}

.user-detail-value {
  color: #99A3AB;
  font-size: 18px;
  font-weight: bold;
}

.camera-icon {
  position: absolute;
  bottom: 7px;
  right: 7px;
  background-color: #fff;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-pfp-wrapper {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  margin-bottom: 18px;
}

.history-container {
  max-width: 650px;
  margin: 0 auto;
  margin-bottom: 0;
}

.history-heading {
  color: #eac31c;
  font-size: 20px;
  font-weight: bold;
}

.hist-cards-section {
  width: 100%;
  margin: 0 auto;
}

.hist-text {
  font-size: 18px;
}

.payment-option-text {
  font-weight: bold;
  font-size: 23px !important;
}

.apple-icon {
  filter: invert(96%) sepia(25%) saturate(7475%) hue-rotate(333deg) brightness(98%) contrast(91%);
  width: 28px;
  margin-bottom: 12px;
  margin-left: -2px;
}

.apple-wrapper {
  margin-top: 7px;
}

#option-2:checked:checked ~ .option-2 img {
  filter: invert(44%) sepia(60%) saturate(2821%) hue-rotate(312deg) brightness(94%) contrast(87%);
}

.juicebar-tile {
  background: #20c4f4;
  border-radius: 13px;
  width: 200px;
  height: 200px;
  border: 3px solid #0690b8 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.juicebar-tile img {
  width: 108px;
  height: 108px;
  -o-object-fit: none;
     object-fit: none;
}

.object-fit-unset {
  -o-object-fit: unset !important;
     object-fit: unset !important;
}

.juicebar-tile span {
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  color: #ffffff;
  text-align: center;
  max-width: 145px;
  margin-top: 5px;
}

.juicebar-tile .shine {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 120.6px;
  height: 101.3px;
}

.space-img {
  -o-object-fit: unset !important;
     object-fit: unset !important;
  height: 70px !important;
  margin-bottom: 30px;
} 

.pack-img {
  -o-object-fit: unset !important;
     object-fit: unset !important;
  height: 100px !important;
  transform: translateY(-10px);
}

.juicebar-row {
  max-width: 660px;
  margin: 0 auto;
}

.juicebar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.bottles-wrapper {
  width: -moz-fit-content;
  margin-top: 12px !important;
  width: fit-content;
  margin: 0 auto;
  position: relative;
}

.bottles-wrapper .bottles {
  width: 50px;
}

.bottles-wrapper .badge {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  position: absolute;
  bottom: -8px;
  right: -3px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0629a;
}

.bottles-wrapper .count {
  font-size: 14px;
  color: #fff;
}

.tabs-wrapper {
  max-width: 430px;
  margin: 0 auto;
  margin-bottom: 40px;
}

.tabs-wrapper .tab {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

.tab-text {
  font-size: 23px;
  font-weight: 400;
  line-height: 30px;
  color: #fff;
  margin-top: 5px;
}

.tab-bullet {
  cursor: pointer;
  width: 125px;
  height: 50px;
  border-radius: 26px;
  background-image: linear-gradient(180deg, #20C4F4 50%, #1FB5E2 50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-bullet.active {
  background-image: linear-gradient(180deg, #F0629A 50%, #DD5A8E 50%);
}

.display-none {
  display: none;
}

.juicebar-price {
  margin-top: 18px;
  font-size: 35px;
  font-weight: bold;
  line-height: 35px;
  color: #ffffff;
}

.popular-ribbon {
  position: absolute;
  top: -35px;
  right: -52px;
}

.subscribe-tab-container {
  max-width: 550px;
  margin: 0 auto;
  border-radius: 31px;
  padding-bottom: 25px;
  padding-top: 13px;
}

.subscribe-tab-inner {
  background-color: #FFCB04;
  border-radius: 25px;
  padding: 28px 23px !important;
}

.header-text {
  font-size: 27px;
  font-weight: bold;
  line-height: 27px;
  color: #f0629a;
}

.header-text-right {
  justify-content: flex-end;
  display: flex;
}

.header-text-right sub {
  margin-top: 15px;
}

.header-wrapper {
  margin-bottom: 40px;
}

.subscribe-info-wrapper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 23px;
}

.subscribe-text {
  opacity: 0.8;
  font-size: 17px;
  line-height: 25px;
  color: #ffffff;
  margin-left: 15px;
}

.bullet-point {
  margin-top: 6px;
}

.end-link-text {
  color: #c69500;
  cursor: pointer;
}

.subscribe-btn,
.subscribe-btn:active,
.subscribe-btn:focus {
  background-color: #FCDC2C;
  position: absolute;
  bottom: -35px;
  width: 188.4px;
  border-radius: 30px;
  height: 61.5px;
  font-size: 23px;
  font-weight: 400;
  line-height: 35px;
  font-style: normal;
  color: #cf4a7d;
  box-shadow: 4px 5px 0px 0px rgba(219, 201, 84, 0.75);
  -webkit-box-shadow: 4px 5px 0px 0px rgba(219, 201, 84, 0.75) !important;
  -moz-box-shadow: 4px 5px 0px 0px rgba(219, 201, 84, 0.75);
  margin: 0 auto;
  margin-left: 50%;
  transform: translateX(-50%);
}

.subscribe-right-logo {
  position: absolute;
  top: -47px;
  right: -27px;
}

.subscribe-left-logo {
  position: absolute;
  top: -52px;
  left: -40px;
}

@media screen and (max-width: 575px) {
  .subscribe-tab-container {
    width: 90%;
  }
}
.cards-wrapper {
  max-width: 70%;
  margin: 0 auto;
}

.flip-card-wrapper {
  margin: 0px 8px;
  transform-style: preserve-3d;
}

.flipped-card-90 {
  transform: rotateY(90deg);
  transition: transform 0.5s ease;
}

.flipped-card-180 {
  transform: rotateY(180deg);
  transition: transform 0.5s ease;
}

.flipped-card-360 {
  transform: rotateY(360deg);
  transition: transform 0.5s ease;
}

.item-to-buy {
  cursor: pointer;
  position: absolute;
  top: 600px;
  transform: translateY(-50%);
}

.item-to-buy.left-item {
  left: 15px;
}

.item-to-buy.right-item {
  right: 15px;
}

.package-wrapper {
  display: flex;
  align-items: center;
}

.package-tin-wrapper {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}

.package-tin {
  width: 35px;
}

.package-price-wrapper {
  position: absolute;
  bottom: -6px;
  right: 0px;
  height: 18px;
  width: 18px;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  border-radius: 50%;
}

.package-price {
  font-size: 11px;
  margin: 0px !important;
}

.package-quantity {
  font-size: 12px;
}

.level1-modal,
.level2-modal,
.level3-modal {
  background-color: transparent;
  width: -moz-fit-content;
  width: fit-content;
}
.level1-modal .choose-card-btn,
.level2-modal .choose-card-btn,
.level3-modal .choose-card-btn {
  color: #173964;
  font-weight: bold;
  margin-top: 10px;
  margin-left: 50px;
}

.card-level1,
.card-level2,
.card-level3 {
  height: 465px;
  width: 280px;
  background: #10C0DF;
  border-radius: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.card-level1 .card-gradients-wrapper,
.card-level2 .card-gradients-wrapper,
.card-level3 .card-gradients-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 25px;
  overflow: hidden;
}
.card-level1 .card-gradients-wrapper .left-gradient,
.card-level2 .card-gradients-wrapper .left-gradient,
.card-level3 .card-gradients-wrapper .left-gradient {
  flex: 1;
  background-image: linear-gradient(to top, #FFD330, #70DDFC);
}
.card-level1 .card-gradients-wrapper .middle-gradient,
.card-level2 .card-gradients-wrapper .middle-gradient,
.card-level3 .card-gradients-wrapper .middle-gradient {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-level1 .card-gradients-wrapper .middle-gradient .middle-top-gradient,
.card-level2 .card-gradients-wrapper .middle-gradient .middle-top-gradient,
.card-level3 .card-gradients-wrapper .middle-gradient .middle-top-gradient {
  flex: 1;
  background-image: linear-gradient(to right, #70DEFC, #A6C9EB);
}
.card-level1 .card-gradients-wrapper .middle-gradient .middle-bottom-gradient,
.card-level2 .card-gradients-wrapper .middle-gradient .middle-bottom-gradient,
.card-level3 .card-gradients-wrapper .middle-gradient .middle-bottom-gradient {
  flex: 1;
  background-image: linear-gradient(to right, #FFD230, #F8955C);
}
.card-level1 .card-gradients-wrapper .right-gradient,
.card-level2 .card-gradients-wrapper .right-gradient,
.card-level3 .card-gradients-wrapper .right-gradient {
  flex: 1;
  background-image: linear-gradient(to top, #F8955C, #A5C9EB);
}
.card-level1 .card-content,
.card-level2 .card-content,
.card-level3 .card-content {
  height: 85%;
  width: 88%;
  border-radius: 40px;
  background: #10C0DF;
  position: absolute;
  display: flex;
  flex-direction: column;
}
.card-level1 .card-content .card-top,
.card-level2 .card-content .card-top,
.card-level3 .card-content .card-top {
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 20px 0px 10px;
}
.card-level1 .card-content .card-top .left-wrapper,
.card-level2 .card-content .card-top .left-wrapper,
.card-level3 .card-content .card-top .left-wrapper {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.card-level1 .card-content .card-top .left-wrapper .left-image,
.card-level2 .card-content .card-top .left-wrapper .left-image,
.card-level3 .card-content .card-top .left-wrapper .left-image {
  width: 40%;
}
.card-level1 .card-content .card-top .left-wrapper .left-txt,
.card-level2 .card-content .card-top .left-wrapper .left-txt,
.card-level3 .card-content .card-top .left-wrapper .left-txt {
  color: white;
  font-weight: bold;
  font-size: 30px;
}
.card-level1 .card-content .card-top .middle-wrapper,
.card-level2 .card-content .card-top .middle-wrapper,
.card-level3 .card-content .card-top .middle-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}
.card-level1 .card-content .card-top .middle-wrapper .middle-image,
.card-level2 .card-content .card-top .middle-wrapper .middle-image,
.card-level3 .card-content .card-top .middle-wrapper .middle-image {
  width: 60%;
}
.card-level1 .card-content .card-top .right-wrapper,
.card-level2 .card-content .card-top .right-wrapper,
.card-level3 .card-content .card-top .right-wrapper {
  width: 100px;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.card-level1 .card-content .card-top .right-wrapper .right-txt,
.card-level2 .card-content .card-top .right-wrapper .right-txt,
.card-level3 .card-content .card-top .right-wrapper .right-txt {
  color: white;
  font-weight: bold;
  font-size: 18px;
}
.card-level1 .card-content .card-middle,
.card-level2 .card-content .card-middle,
.card-level3 .card-content .card-middle {
  flex: 2;
  position: relative;
}
.card-level1 .card-content .card-middle img,
.card-level2 .card-content .card-middle img,
.card-level3 .card-content .card-middle img {
  height: 150px;
  width: 100%;
  z-index: 998;
}
.card-level1 .card-content .card-bottom,
.card-level2 .card-content .card-bottom,
.card-level3 .card-content .card-bottom {
  flex: 3;
  z-index: 9999;
}
.card-level1 .card-content .card-bottom .card-detail,
.card-level2 .card-content .card-bottom .card-detail,
.card-level3 .card-content .card-bottom .card-detail {
  width: 90%;
  background-color: white;
  margin: 0 auto;
  border-radius: 40px;
  margin-top: -30px;
  padding: 10px 20px;
}
.card-level1 .card-content .card-bottom .card-detail .card-detail-top-wrapper,
.card-level2 .card-content .card-bottom .card-detail .card-detail-top-wrapper,
.card-level3 .card-content .card-bottom .card-detail .card-detail-top-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}
.card-level1 .card-content .card-bottom .card-detail .card-detail-top-wrapper .card-detail-top,
.card-level2 .card-content .card-bottom .card-detail .card-detail-top-wrapper .card-detail-top,
.card-level3 .card-content .card-bottom .card-detail .card-detail-top-wrapper .card-detail-top {
  font-size: 14px;
  color: #10C0E0;
  font-weight: bold;
}
.card-level1 .card-content .card-bottom .card-detail .txt-middle,
.card-level2 .card-content .card-bottom .card-detail .txt-middle,
.card-level3 .card-content .card-bottom .card-detail .txt-middle {
  font-size: 16px;
  color: black;
  font-weight: bold;
}
.card-level1 .card-content .card-bottom .card-detail .list,
.card-level2 .card-content .card-bottom .card-detail .list,
.card-level3 .card-content .card-bottom .card-detail .list {
  display: flex;
  flex-direction: column;
}
.card-level1 .card-content .card-bottom .card-detail .list span,
.card-level2 .card-content .card-bottom .card-detail .list span,
.card-level3 .card-content .card-bottom .card-detail .list span {
  font-size: 10px;
  color: black;
  font-weight: bold;
  line-height: 15px;
}
.card-level1 .card-content .card-bottom .bottom-content,
.card-level2 .card-content .card-bottom .bottom-content,
.card-level3 .card-content .card-bottom .bottom-content {
  width: 100%;
  height: 100px;
  display: flex;
  padding: 10px 10px 0px 10px;
}
.card-level1 .card-content .card-bottom .bottom-content .bottom-left img,
.card-level2 .card-content .card-bottom .bottom-content .bottom-left img,
.card-level3 .card-content .card-bottom .bottom-content .bottom-left img {
  cursor: pointer;
  width: 25px;
}
.card-level1 .card-content .card-bottom .bottom-content .bottom-middle,
.card-level2 .card-content .card-bottom .bottom-content .bottom-middle,
.card-level3 .card-content .card-bottom .bottom-content .bottom-middle {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.card-level1 .card-content .card-bottom .bottom-content .bottom-middle img,
.card-level2 .card-content .card-bottom .bottom-content .bottom-middle img,
.card-level3 .card-content .card-bottom .bottom-content .bottom-middle img {
  height: 85%;
  width: 75%;
}
.card-level1 .card-content .card-bottom .bottom-content .bottom-right img,
.card-level2 .card-content .card-bottom .bottom-content .bottom-right img,
.card-level3 .card-content .card-bottom .bottom-content .bottom-right img {
  cursor: pointer;
  width: 30px;
}

.card-level2 {
  background: #FF66C4;
}
.card-level2 .card-content {
  background: #FF66C4;
}

.card-level3 {
  background: #edc32d;
}
.card-level3 .card-content {
  background: #edc32d;
}

.card-mini {
  height: 220px;
  width: 150px;
  border-radius: 12px;
  padding: 5px;
  position: relative;
  cursor: pointer;
  margin-left: -8px;
}
.card-mini .card-gradients-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.card-mini .card-content {
  height: 92%;
  width: 87%;
  border-radius: 15px;
}
.card-mini .card-content .card-top {
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 5px 10px 0px 5px;
}
.card-mini .card-content .card-top .left-wrapper {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.card-mini .card-content .card-top .left-wrapper .left-image {
  width: 15px;
  height: 18px;
}
.card-mini .card-content .card-top .left-wrapper div {
  width: 15px;
  display: flex;
}
.card-mini .card-content .card-top .left-wrapper div .left-txt {
  font-size: 10px;
  line-height: 8px;
}
.card-mini .card-content .card-top .right-wrapper {
  flex: unset;
}
.card-mini .card-content .card-top .right-wrapper .right-txt {
  font-size: 8px;
}
.card-mini .card-content .card-top .middle-wrapper .middle-image {
  margin-left: 15px;
  width: 25px;
}
.card-mini .card-content .card-middle img {
  height: 65px;
  margin-top: 2px;
}
.card-mini .card-content .card-bottom .card-detail {
  padding: 5px 10px;
  border-radius: 15px;
}
.card-mini .card-content .card-bottom .card-detail .card-detail-top-wrapper .card-detail-top {
  font-size: 6px;
  line-height: 10px;
}
.card-mini .card-content .card-bottom .card-detail .txt-middle {
  font-size: 9px;
  display: inline-block;
  line-height: 12px;
}
.card-mini .card-content .card-bottom .card-detail .list span {
  font-size: 5px;
  line-height: 8px;
}
.card-mini .card-content .card-bottom .bottom-content {
  padding: 0px 5px 0px 5px;
}
.card-mini .card-content .card-bottom .bottom-content .bottom-left img {
  width: 12px;
}
.card-mini .card-content .card-bottom .bottom-content .bottom-middle {
  align-items: center;
  margin-bottom: 25px;
}
.card-mini .card-content .card-bottom .bottom-content .bottom-middle img {
  height: 55%;
  width: 75%;
}
.card-mini .card-content .card-bottom .bottom-content .bottom-right img {
  width: 13px;
}

.detail-modal-counter {
  color: #747999;
  font-size: 16px;
  margin-bottom: 0;
}

.signature-wrapper {
  position: relative;
}

.detail-modal-bar {
  background-color: #3cd3d6;
  color: #215D80;
  padding: 5px 0px;
  font-weight: bold;
}

.warning-black {
  position: absolute;
  margin-left: 10px;
  top: 0;
}

.confirm-modal {
  background-color: white;
  max-width: 425px;
  padding: 0px 50px;
  border-radius: 30px;
}

.confirm-modal-subtitle {
  color: #F07FAB;
  font-weight: bold;
}

.confirm-modal-actions {
  display: flex;
  width: 250px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.calendar-modal {
  min-width: 350px !important;;
  width: 25% !important;
  border-radius: 20px !important;;
  overflow: hidden;
  padding: 20px 20px 0px 20px !important;;
  background-color: white;
}
.fc-view-harness {
  height:290px;
}

.calendar-modal .fc table,
.calendar-modal .fc th,
.calendar-modal .fc td {
  border-width: 0px !important;
}
.calendar-modal .fc .fc-col-header-cell-cushion {
  color: black;
  font-size: 18px;
  text-decoration: none;
}
.calendar-modal .fc .fc-day {
  background: white;
}
.calendar-modal .fc .fc-day-sun .fc-daygrid-day-frame a,
.calendar-modal .fc .fc-day-sat .fc-daygrid-day-frame a {
  color: #FDC91A;
}
.calendar-modal .fc .fc-day-sun a,
.calendar-modal .fc .fc-day-sat a {
  color: #FDC91A;
}
.calendar-modal .fc .fc-toolbar {
  justify-content: center;
}
.calendar-modal .fc .fc-toolbar-title {
  color: #F0629A;
  width: 250px;
  font-size: 22px;
  text-align: center;
  margin-top: 5px;
}
.calendar-modal .fc .fc-button {
  background: white !important;
  border-width: 0px !important;
  width: 30px;
  height: 35px;
  box-shadow: none !important;
}
.calendar-modal .fc .fc-daygrid-day-events {
  display: none;
}
.calendar-modal .fc .fc-daygrid-day-top {
  justify-content: center;
}
.calendar-modal .fc .fc-daygrid-day-top .fc-daygrid-day-number {
  color: black;
  cursor: pointer;
  text-decoration: none !important;
}
.calendar-modal .calendar-btn-wrapper {
  padding: 0px 10px !important;
}
/*# sourceMappingURL=style.css.map */