.txt-dark {
  color: var(--primary-clr);
}

/* new */
.overlay { 
  top: 0; 
}
/* new */

.grad-btn {
  color: #0D2E38;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 0 12px;
  border-radius: 20px;
  background: #EEDB99;
  border: 1px solid #0D2E38;
  transition: .2s linear;
}

.grad-btn:hover {
  color: #0D2E38;
  background: var(--primary-clr);
  border: 1px solid #0D2E38;
}
.grad-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #EEDB99;
  transition: .2s linear;
  width: 100%;
}

.grad-btn:hover::before,
.grad-btn:active::before {
  width: 200%;
}

.btn-unstyled {
  border: none;
  padding: 0;
  background: none;
  outline: none;
}

.btn-lg-voilet {
  background: #EEDB99;
  color: #0D2E38;;
  border: 1px solid #EEDB99;
  transition: .2s ease;
}

.btn-lg-voilet:hover,
.btn-lg-voilet:active {
  color: #eedb99;
  background: var(--primary-clr);
  border: 1px solid #eedb99;
}

/* ------Side Menu---- */

.dash-sidebar {
  position: fixed;
  left: 0;
  width: 275px;
  background: var(--primary-clr);
  height: 100%;
  border-right: 0.3px solid #F5F5F5;
  z-index: 9;
}

.dash-sidebar .inner {
  height: 100%;
  padding: 0 17px 0 33px;
}

.dash-sidebar .menu-header {
  padding: 43px 0 20px 6px;
}

.menu-list li a {
  display: flex;
  padding: 9px 16px;
  border-radius: 7px;
  align-items: center;
  gap: 13px;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  color: #EEDB99;
  transition: color .2s ease, background .2s ease;
}

.menu-list li a:hover {
  background: #C1D9DF;
  color: #0D2E38;
}

.menu-list li a:hover .icnx img {

  filter: brightness(0) saturate(100%) invert(11%) sepia(14%) saturate(4377%) hue-rotate(156deg) brightness(94%) contrast(90%);
}


.menu-list li a.active {
  background: #99C1CC;
  color: #0D2E38;
}


.menu-list li a.active .icnx img {
  opacity: 0;
  filter: unset;

}

.menu-list li a.active .icnx img.sub {
  opacity: 1;
}

.menu-list li:not(:last-of-type) {
  margin-bottom: 24px;
}

.menu-list li a .icnx {
  max-width: 26px;
}

.menu-list li a .icnx {
  max-width: 22px;
  position: relative;
  display: flex;
  align-items: center;
}

.menu-list li a .icnx img {
  transition: opacity .2s ease;
}

.menu-list li a .icnx img.sub {
  position: absolute;
  left: 0;
  /* top: 0; */
  opacity: 0;
}

.dashMenu-links {
  margin-top: 59px;
  height: calc(100vh - 107px - 59px - 73px);
  overflow: hidden auto;
}

.log-out {
  padding-top: 12px;
}

.log-out button {
  color: #EEDB99;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: calc(49px - 33px);
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  gap: 0 15px;
  transition: color .2s ease;
}

.log-out button:hover {
  color: white;
}

.log-out button .icnx {
  max-width: 16px;
  position: relative;
  display: flex;
  align-items: center;
}

.log-out button .icnx img {
  transition: opacity .2s;
}

.log-out button .icnx img.sub {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.log-out button:hover img {
  opacity: 0;
}

.log-out button:hover img.sub {
  opacity: 1;
}

.dash-container {
  min-height: 100vh;
  width: calc(100% - 240px);
  margin-left: auto;
}

.dash-container .inner-area {
  padding: 20px 50px 20px;
}

.dash-header h2 {
  font-family: 'ppacma-900';
  font-size: 25px;
  line-height: 36px;
}

.pf-header h2{
  color:#99C1CC !important;
}

.dash-profile-form {
  margin-top: 47px;
}

.dash-profile-form label {
  display: block;
  margin-bottom: 7px;
}

.dash-input {
  width: 100%;
  min-height: 37px;
  padding: 0 16px;
  border: 1px solid #fff;
  border-radius: 5px;
  background-color: #fff;
  color: #0D2E38;
  transition: box-shadow 0.2s;
}

.fields-row {
  width: 100%;
  display: flex;
  gap: 0 30px;
  margin-bottom: 35px;
  align-items:baseline;
}


.dash-profile-form .fields-row:nth-of-type(3) {
width:87%;
}

.fname-block {
  max-width: 275px;
  width: 100%;
}

.city-block {
  max-width: 292px;
  width: 100%;
}

.town-block {
  max-width: 248px;
  width: 100%;
}

.postal-code-block {
  max-width: 147px;
  width: 100%;
}

.phone-block {
  max-width: 217px;
  width: 100%;
}

.lname-block,
.dni-block,
.email-block,
.address-block {
  flex-grow: 1;
}



.btn-edit button {
  background: #EEDB99;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  min-height: 27px;
  padding: 0 22px;
  line-height:12px;
}

.myPf-closeInfo {
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  min-height: 33px;
  padding: 0 14px;
}

.info_show_btn {
  margin-top: 9px;
}

.dash-header {
  display: flex;
  align-items: center;
  gap: 0 18px;
}

.dash-header .profile-box {
  border-radius: 50%;
  overflow: hidden;
  --sz: 56px;
  height: var(--sz);
  width: var(--sz);
  background: #99C1CC;
  border: 1px solid #99C1CC;
}

.dash-input:focus {
  box-shadow: 2px 3px 3px  rgba(238, 219, 153, 0.7);

}

.dash-input-label {
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  display: block;
}

.dash-content .status {
  display: flex;
  align-items: center;
  margin-top: 94px;
}

.dash-content .status .indicator {
  --sz: 7px;
  height: var(--sz);
  width: var(--sz);
  background: #8BF123;
  border-radius: 50%;
  margin-right: 9px;
  display: block;
}

.dash-content .status .head {
  gap: 0 21px;
}

.dash-content .status .head h3 {
  font-family: 'ppacma-900';
  font-size: 25px;
  line-height: 35px;
}

.dash-content .status .head h6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}


.myPf-moreInfo {
  font-size: 13px;
  font-weight: 500;
  min-height: 33px;
  padding: 0px 24px;
  border-radius: 20px;
}

.myPf-dash-area {
  margin-top: 47px;
}

.myChart-dash-area {
  margin-top: 61px;
}

.chat-dash-area {
  margin-top: 10px;
}

.myChart-wrapper {
  display: flex;
  gap: 0 34px;
}

.chart-col {
  max-width: calc(50% - 17px);
  flex-basis: calc(50% - 17px);
}

.prevw-chart-container {
  background: #99C1CC;
  border: 1px solid #99C1CC;
  border-radius: 5px;
  max-width: 454px;
  min-height: 605px;
  height: 100%;
}

.prevw-chart-container .inner {
  padding: 21px 29px 23px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.prevw-chart-container .header h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 13px;
}

.prevw-chart-container .header p {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

.prevw-chart-container .header {
  max-width: calc(100% - 34px);
}

.prevw-chart-container .header .chart-download {
  position: absolute;
  right: 29px;
  top: 21px;
}

.prevw-chart-container .header .chart-download:hover {
  animation: downloadAnimation .6s ease-in-out infinite;
}

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

  to {
      transform: translateY(4px);
      opacity: 0;
  }
}

.prevw-chart-container .chart-prev-box {
  background: #E6E6E6;
  /* border: 1px solid #0D2E38; */
  height: 100%;
  border-radius: 5px;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: #2a2144;
  padding-bottom: 135px;
}

.prevw-chart-container .main-content {
  margin-top: 32px;
  flex-grow: 1;
  height: 350px;
}

.prevw-chart-container .chart-prev-box::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(../images/astral-preview.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* filter: brightness(0) saturate(100%) invert(13%) sepia(78%) saturate(5903%) hue-rotate(287deg) brightness(99%) contrast(116%); */
}

.chart-listing-box .list-col:not(:last-of-type) {
  margin-bottom: 37px;
}

.chart-listing-box h4.title {
  font-family: 'ppacma-900';
  font-size: 25px;
  margin-bottom: 4px;
  line-height: 35px;
}

.chart-listing-box .sub-para {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 25px;
}

.card-payment-details-wrapper {
  display: flex;
  margin-top: 29px;
  gap: 20px;
}

.table-wrapper {
  border: 1px solid #eedb99;
  border-radius: 20px;
  padding: 20px 30px;
  background-color: #99C1CC;
}

.payment-deatils-wrapper thead th {
  font-weight: 400;
  font-size: 15px;
  font-weight: 400;
  color: #0D2E38;
  padding: 0 30px 0 0;
}

.payment-deatils-wrapper tbody td {
  font-size: 13px;
  font-weight: 400;
  color: #0D2E38;
  padding: 11px 37px 5px 0;
  /* text-wrap:nowrap; */
}

.payment-deatils-wrapper tbody td[data-label="Descripción"] {
  max-width: 160px;
}

.card-deatils-wrapper .period-btn {
  font-size: 16px;
  color: #0D2E38;
  border-radius: 20px;
  min-height: 33px;
  padding: 0 15px;
  margin-bottom: 41px;
  font-weight: 700;
  transition: .2s ease-out;
  background-color: #eedb99;
  border: 1px solid #eedb99;
}

.card-deatils-wrapper .period-btn:hover {
  background: transparent;
  color: #eedb99;
  border: 1px solid #eedb99;

}

.card-deatils-wrapper .input-row {
  display: flex;
  gap: 20px;
  align-items:end;
}

.table-wrapper table {
  display: block;
}

.table-wrapper table thead {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-bottom: 0.5px solid #EEDB99;
  padding-bottom: 17px;
}

.table-wrapper table tbody {
  display: block;
  position: relative;
  width: 100%;
  overflow-y: auto;
  max-height: 100px;
  margin-top: 17px;
}

.table-wrapper table .file-downoad:hover img {
  animation: downloadAnimation .8s ease-in-out infinite;
}

.card-num-block {
  max-width: 205px;
}

.cvc-block {
  max-width: 64px;
}

.exp-block {
  max-width: 77px;
}

button.check-py-details {
  margin-top: 20px;
}

.payment-deatils-wrapper tbody td:last-of-type,
.payment-deatils-wrapper thead th:last-of-type {
  padding-right: 14px;
}

.table-wrapper table thead th:last-of-type {
  width: 34px;
}

.table-wrapper table tbody::-webkit-scrollbar {
  width: 4px;
}

.table-wrapper table tbody::-webkit-scrollbar-thumb {
  border-radius: 120px;
  background: #eedb99;

}

.table-wrapper table tbody::-webkit-scrollbar-track {
  border-radius: 100px;
  background: transparent;
  border: 0.2px solid  #eedb99;
}

.payment-deatils-wrapper tbody td:nth-of-type(1),
.payment-deatils-wrapper thead th:nth-of-type(1) {
  width: 98px;
}

.payment-deatils-wrapper tbody td:nth-of-type(2),
.payment-deatils-wrapper thead th:nth-of-type(2) {
  width: 150px;
}

.chart-slider-wrapper {
  border: 1px solid #99C1CC;
  padding: 23px 20px;
  background: #2A2144;
  border-radius: 5px;
}

.chart-slider-wrapper .doc-card .title {
  font-size: 13px;
  font-weight: 400;
  line-height: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-transform: capitalize;
}

.chart-slider-wrapper .doc-card .no-chart-title {
  -webkit-line-clamp: unset;
  line-height: unset;
}

.chart-slider-wrapper .doc-card .iconx {
  background: #E6E6E6;
  /* max-width: 95px; */
  height: 104px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.chart-slider-wrapper .doc-card .iconx img {
  max-width: 38px;
}

.doc-card {
  padding: 0 8px;
  margin-left: -4px;
}

.slick-prev:before,
.slick-next:before {
  content: " ";
  background-image: url(../images/chevron.svg);
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.slick-prev,
.slick-next {
  top: calc(50% + 11px);
  transform: translateY(-50%);
}

.slick-prev {
  left: -23px;
  transform: translateY(-50%) scale(-1);
}

.slick-next {
  right: -19px;
  width: 15px;
}

.slick-arrow.slick-disabled {
  display: none !important;
}

/* CHAT PAGE */
.dash-head-subPara {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}

.chat-content {
  margin-top: 40px;
}

.dash-head-subPara:not(:last-of-type) {
  margin-bottom: 20px;
}

.chatTab-nav {
  gap: 17px;
}

.chatTab-nav .nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #EEDB99;
  min-height: 33px;
  border-radius: 50px !important;
  padding: 0 19px;
  font-size: 13px;
  font-weight: 500;
  color: #EEDB99;
  gap: 0 11px;
  transition: background .3s ease, color .3s ease;
}

.chatTab-nav .nav-link .icnx {
  width: 18px;
  position: relative;
  display: flex;
  align-items: center;
}

.chatTab-nav .nav-link .icnx img {
  transition: .2s ease;

}

.chatTab-nav .nav-link .icnx img.sub {
  position: absolute;
  opacity: 0;
}

.chatTab-nav .nav-link:hover,
.chatTab-nav .nav-link.active {
  color: #0d2e38;
  border: 1px solid #EEDB99;
  background: #EEDB99;

}

.chatTab-nav .nav-link:hover .icnx img {
  opacity: 0;
}

.chatTab-nav .nav-link.active .icnx img.sub,
.chatTab-nav .nav-link:hover .icnx img.sub {
  opacity: 1;
}

.expert-listings {
  margin-top: 46px;
  display: flex;
  gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  overflow-x: auto;
  justify-content: flex-start;
  padding-bottom: 10px;
}
.exp-card-col {
  min-width: 348px;
}
.expert-listings::-webkit-scrollbar {
  height: 5px;
}

.expert-listings::-webkit-scrollbar-track {
  background: white;
}

.expert-listings::-webkit-scrollbar-thumb {
  background:#eedb99

  
}
.exp-card {
  height: 100%;
}

.exp-card .content {
  border: 1px solid #0D2E38;
  background: #99C1CC;
  padding: 22px;
  border-radius: 5px;
  /* height: calc(100% - 46px); */
  height:100%;
}

.exp-card .img-box {
  --sz: 56px;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  border: 1px solid #99c1cc;
  background: #F9F9F9;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.exp-info{
  color:#0D2E38;
}

.exp-card .info{
  color:#0D2E38;
}

.exp-pf {
  min-width: 56px;
  position: relative;
}

.exp-card .img-box img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.exp-card .img-box img.fallBack-img {
  height: unset;
  width: unset;
  object-fit: unset;
  padding-bottom: 5px;
}

.exp-card .header {
  display: flex;
  align-items: center;
  gap: 0 9px;
}

.exp-card .online-status {
  position: absolute;
  display: block;
  background: #8BF123;
  --sz: 15px;
  height: var(--sz);
  width: var(--sz);
  border-radius: 50%;
  right: 0;
  bottom: 0;
}
.exp-card .offline-status {
  position: absolute;
  display: block;
  background: #b7b7b7;
  --sz: 15px;
  height: var(--sz);
  width: var(--sz);
  border-radius: 50%;
  right: 0;
  bottom: 0;
}

.exp-info>* {
  font-size: 15px;
  line-height: 20px;
}

.exp-info h5 {
  font-weight: 500;
}

.exp-info span {
  font-weight: 400;
  display: block;
}

.exp-card .info {
  margin-top: 19px;
  max-height: 245px;
  overflow: hidden auto;
  padding-right: 6px;
}

.exp-card .info p {
  font-size: 12px;
  line-height: 18px;
}

.exp-card .info p:not(:last-of-type) {
  margin-bottom: 7px;
}

.start-chat {
  background: transparent;
  margin-top: 19px;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  min-height: 27px;
  padding: 0 17px;
}

/* .exp-card .grad-btn:hover{
  color: #eedb99;
  background: var(--primary-clr);
  border: 1px solid var(--primary-clr);
} */

.astral-chat-pane .tb-inner>.content {
  margin-top: 21px;
}

.chat-wrapper {
  width: 100%;
}

.chat-app {
  background: #dcf4fc;
  border-radius: 20px;
  overflow: hidden;

}

.chat-app .header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 7px 24px;
  background: #99C1CC;
  box-shadow: 0px 4px 4px 0px #A393E64D;
}

.chat-app .app-name h4 {
  font-family: 'ppacma-900';
  line-height: 1;
  font-size: 20px;
}

.chat-app .reply-wrapper {
  padding: 47px 24px 16px;
  max-height: 480px;
  min-height: 374px;
  overflow: hidden auto;
}

.chat-app .reply-wrapper::-webkit-scrollbar {
  width: 0;
}

.reply-wrapper .reply-col .pf-box {
  --sz: 30px;
  height: var(--sz);
  width: var(--sz);
  border-radius: 50%;
  overflow: hidden;
  min-width: var(--sz);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F9F9F9;
  padding-bottom: 3px;
}

.reply-wrapper .reply-col .pf-box img {
  max-width: 17px;
}

.reply-wrapper .reply-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.reply-wrapper .reply-col:not(:last-of-type) {
  margin-bottom: 21px;
}

.reply-wrapper .reply-col .details {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.reply-wrapper .reply-col .reply-text {
  border-radius: 20px;
  font-size: 15px;
  font-weight: 300;
  line-height: 18px;
  padding: 6px 10px;
  color: #000000;
  max-width: 376px;
  text-align: start;
}

.time-stamp {
  font-size: 10px;
  font-weight: 300;
  line-height: 12px;
  color: #0d2e38;
  display: block;
  margin-top: 9px;
}

.reply-wrapper .reply-col .inner {
  width: fit-content;
}

.reply-wrapper .reply-col.left-reply .time-stamp {
  padding-left: calc(6px + 30px);
}

.reply-wrapper .reply-col.right-reply .time-stamp {
  padding-right: calc(6px + 30px);
  text-align: end;
}

.reply-wrapper .reply-col.left-reply .reply-text {
  background-color: #fff;
}

.reply-wrapper .reply-col.right-reply .inner {
  margin-left: auto;
}

.reply-wrapper .reply-col.right-reply .details {
  flex-direction: row-reverse;
}

.reply-wrapper .reply-col.right-reply .reply-text {
  background: #eedb99;
  text-align: end;
  max-width: 450px;
}

.chat-form {
  padding: 13px 24px 13px;
  gap: 6px;
}

.chat-form .input-block {
  flex-grow: 1;
}

.chat-form button {
  background: none;
  padding: 0;
}

.chat-form button svg{
  transition: transform 0.3s ease;
}

.chat-form button:hover svg{
      transform: translateX(5px);
}

.chat-form .input-block textarea {
  width: 100%;
  resize: none;
  border-radius: 20px;
  box-shadow: 0px 1px 2px 1px #0000000D inset;
  background: #F5F5F5;
  height: 30px;
  font-size: 14px;
  font-weight: 300;
  padding: 4px 16px;
}

.chat-form .input-block textarea:focus {
  box-shadow: 1px 0px 10px #99c1cc;
}

.chat-form .input-block textarea::-webkit-scrollbar {
  width: 0;
}

.chat-app .chat-logo {
  --sz: 56px;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  border: 1px solid #99c1cc;
  background: #F9F9F9;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.chat-logo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.chat-pf-box {
  position: relative;
}

.chat-pf-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background: #8BF123;
  z-index: 1;
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.right-reply .pf-box {
  border: 0.5px solid #4C417F
}

.confirm-mdl .modal-dialog {
  max-width: 350px;
  margin: 0 auto;
}

.confirm-mdl .modal-header {
  padding: 0;
  border: 0;
  flex-direction: column;
  align-items: flex-start;
  color: #0d2e38;
  position: relative;
}


.confirm-mdl .modal-body h3 {
  font-size: 20px;
}

.confirm-mdl .modal-header span {
  padding-block: 7px;
  display: block;
  font-size: 14px;
}

.confirm-mdl .modal-header .btn-close {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 15px;
  padding: 0;
  box-shadow: none !important;
}

.confirm-mdl .btn-actions {
  gap: 20px;
}

.confirm-mdl .btn-actions button {
  max-width: calc(50% - 10px);
  flex-basis: calc(50% - 10px);
  font-weight: 500;
}

.confirm-mdl .btn-secondary {
  background: #0d2e38;
  border-color: #0d2e38;
}

.confirm-mdl .btn-secondary:hover,
.confirm-mdl .btn-secondary:active {
  background: white;
  color:#0d2e38;
  border-color: #0d2e38;
}

.confirm-mdl .btn-primary {
  background: #bd0000;
  border-color: #bd0000;
}

.confirm-mdl .btn-primary:hover,
.confirm-mdl .btn-primary:active {
  background: white;
  color: #bd0000;
  border-color: #bd0000;

}

.sidemenu-btn {
  position: absolute;
  top: 17px;
  font-size: 21px;
  color: #ffffff;
  display: none;
  cursor: pointer;
}

.menu-close-btn {
  position: absolute;
  right: -12px;
  border-radius: 4px;
  background: #EEDB99;
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 22px;
  display: none;
}

.menu-close-btn i {
  transition: transform .2s ease;
}

.menu-close-btn:hover i {
  transform: translateX(-2px);
}

/* ----Media Queries------ */

@media screen and (min-width:1400px) {

  .payment-deatils-wrapper tbody td:nth-of-type(1),
  .payment-deatils-wrapper thead th:nth-of-type(1) {
      width: 128px;
  }

  .payment-deatils-wrapper tbody td[data-label="Descripción"] {
      max-width: 160px;
  }

  .payment-deatils-wrapper tbody td:nth-of-type(2),
  .payment-deatils-wrapper thead th:nth-of-type(2) {
      width: 160px;
  }

  .payment-deatils-wrapper tbody td:nth-of-type(3),
  .payment-deatils-wrapper thead th:nth-of-type(3) {
      width: 110px;
  }

  .myChart-wrapper {
      max-width: 1300px;
      gap: 80px;
  }

  .left-col.chart-col {
      max-width: max-content;
  }

  .prevw-chart-container {
      width: 454px;
  }

  .card-payment-details-wrapper {
      gap: 44px;
  }

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

  .exp-card .content {
      height: 100%;
  }
}

@media screen and (max-width:1199px) {
  .city-block {
      max-width: 190px;
  }

  .town-block {
      max-width: 150px;
  }
/* 
  .dash-profile-form .fields-row:last-of-type {
      flex-wrap: wrap;
      gap: 35px;
  } */

  .dash-profile-form .btn-edit {
  
      width: 100%;
  }

  .card-payment-details-wrapper {
      flex-direction: column;
  }

  .card-deatils-wrapper .period-btn {
      margin-bottom: 31px;
      margin-top: 20px;
  }

  .payemnt_dt_form {
      display: flex;
      align-items: center;
      gap: 30px;
  }

  .payment-deatils-wrapper thead tr {
      display: flex;
  }

  .payment-deatils-wrapper thead th {
      width: 100% !important;
  }

  .payment-deatils-wrapper tbody tr {
      display: flex;
  }

  .payment-deatils-wrapper tbody td {
      width: 100% !important;
      text-wrap:wrap;
  }

  .myChart-wrapper {
      flex-direction: column;
      row-gap: 50px;
  }

  .chart-col {
      max-width: 100%;
      flex-basis: 100%;
  }

  .prevw-chart-container {
      height: 485px;
  }

  .prevw-chart-container .chart-prev-box::after {
      background-size: 20%;
  }

  .chart-slider-wrapper {
      padding: 23px 25px;
  }
}

@media screen and (max-width:991px) {
  .dash-container {
      width: 100%;
  }

  .dash-sidebar-collapse {
      left: -265px;
      border-right: 0;
      transition: left .2s ease-in;
  }

  .sidemenu-btn {
      display: block;
  }

  .dash-sidebar-collapse.menu-open {
      left: 0;
  }

  .dash-overlay {
      display: block;
      z-index: 2;
      width: 100%;
  }

  .menu-close-btn {
      display: flex;
      cursor: pointer;
  }
}

@media screen and (max-width:767px) {
  .dash-container .inner-area {
      padding: 72px 50px 30px;
  }

  .dashMenu-links {
      margin-top: 29px;
      height: calc(100vh - 107px - 29px - 73px);
      overflow: hidden auto;
  }

  .log-out {
      padding-top: 12px;
      /* position: sticky; */
      bottom: 40px;
      z-index: 2;
  }

  .fields-row {
      gap: 30px;
      flex-wrap: wrap;
      margin-bottom: 30px;

  }

  .fields-row .input-block {
      max-width: calc(50% - 15px);
      flex-basis: calc(50% - 15px);
  }

  .fields-row .dni-block,
  .fields-row .address-block,
  .fields-row .email-block {
      max-width: 100%;
      flex-basis: 100%;

  }

  .dash-profile-form .fields-row:last-of-type {
      gap: 30px;
  }

  .reply-wrapper .reply-col .reply-text {
      max-width: 250px;
  }

  .reply-wrapper .reply-col.right-reply .reply-text {
      max-width: 230px;
  }
}

@media screen and (max-width:575px) {
  .dash-container .inner-area {
      padding: 72px 35px 30px;
  }

  .payemnt_dt_form {
      flex-wrap: wrap;
      row-gap: 0px;
  }

  .table-wrapper {
      padding: 20px;
  }

  .card-num-block {
      max-width: 100%;
  }

  .payment-deatils-wrapper table,
  .payment-deatils-wrapper table thead,
  .payment-deatils-wrapper table tbody,
  .payment-deatils-wrapper table th,
  .payment-deatils-wrapper table td,
  .payment-deatils-wrapper table tr {
      display: block;
  }

  .table-wrapper table thead {
      padding: 0;
      border: 0;
  }

  .table-wrapper table tbody {
      max-height: 350px;
      padding-right: 20px;
      margin-top: 0;
  }

  .table-wrapper table thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }

  .table-wrapper table tr:not(:last-of-type) {
      margin-bottom: 40px;
      position: relative;
  }

  .table-wrapper table tr:not(:last-of-type)::after {
      content: '';
      position: absolute;
      background: #EEDB99;
      height: 1px;
      width: 100%;
      bottom: -20px;
      left: 0;
  }

  .table-wrapper table td {
      border: none;
      position: relative;
      padding-left: 50% !important;
      padding-right: 0 !important;
      text-align: end;
  }

  .table-wrapper table td:before {
      position: absolute;
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      content: attr(data-label);
      color: #0D2E38;
      text-align: start;
  }

  .payment-deatils-wrapper tbody td[data-label="Descripción"] {
      max-width: unset;
  }

  .prevw-chart-container .inner {
      padding: 20px;
  }
 
}

@media screen and (max-width:480px) {
  .fields-row .input-block {
      max-width: 100%;
      flex-basis: 100%;
  }

  .dash-content {
      margin-top: 31px;
  }

  .dash-input-label {
      font-size: 14px;
      line-height: 1;
  }

  .dash-input {
      min-height: 34px;
      font-size: 14px;
  }

  .fields-row {
      gap: 22px;
      flex-wrap: wrap;
      margin-bottom: 22px;
  }

  .dash-profile-form .fields-row:last-of-type {
      gap: 22px;
  }

  .dash-content .status {
      margin-top: 64px;
  }

  .dash-header h2 {
      font-size: 22px;
      line-height: 1.3;
  }

  .dash-header .profile-box {
      --sz: 40px;
  }

  .dash-header .profile-box .fallBack-img {
      width: 50%;
  }

  .btn-edit button {
      font-size: 12px;
      min-height: 32px;
      padding: 0 52px;
  }

  .dash-content .status .head h3 {
      font-size: 22px;
  }

  .dash-content .status .head h6 {
      font-size: 11px;
      line-height: normal;
  }

  .dash-content .status .indicator {
      margin-right: 5px;
  }

  .card-deatils-wrapper .input-row {
      flex-wrap: wrap;
  }

  .card-num-block {
      width: 100%;
  }

  .card-deatils-wrapper .period-btn {
      font-size: 14px;
  }

  .cvc-block,
  .exp-block {
      max-width: calc(50% - 10px);
      flex-basis: calc(50% - 10px);
  }

  .menu-header a img {
      max-width: 110px;
  }

  .dash-sidebar .inner {
      padding: 0 17px;
  }

  .dashMenu-links {
      margin-top: 10px;
      height: calc(100vh - 107px - 73px);
  }

  .menu-list li a {
      gap: 10px;
      font-size: 14px;
  }

  .menu-list li:not(:last-of-type) {
      margin-bottom: 18px;
  }

  ul.menu-list {
      padding-right: 12px;
  }

  .menu-list li a .icnx {
      max-width: 16px;
  }

  .menu-list li a .icnx img {
      width: 100%;
  }

  .prevw-chart-container .header h3 {
      font-size: 17px;
      line-height: 13px;
      margin-bottom: 7px;
  }

  .prevw-chart-container .header p {
      font-size: 13px;
      line-height: 17px;
  }

  .prevw-chart-container .header .chart-download img {
      max-width: 22px;
  }

  .prevw-chart-container {
      height: 395px;
  }

  .prevw-chart-container .main-content {
      margin-top: 15px;
  }

  .prevw-chart-container .chart-prev-box::after {
      background-size: 17%;
  }

  .chart-listing-box h4.title {
      font-size: 21px;
      margin-bottom: 14px;
      line-height: 1.3;
  }

  .chart-listing-box .sub-para {
      font-size: 12px;
      line-height: 1.6;
  }

  .chart-slider-wrapper {
      padding: 17px 20px;
  }

  .dash-head-subPara {
      font-size: 13px;
      font-weight: 500;
      line-height: 20px;
  }

  .chat-app .reply-wrapper {
      padding: 37px 24px 16px;
  }

  .reply-wrapper .reply-col .reply-text {
      font-size: 13px;
      line-height: 16px;
  }

  .chat-form {
      padding: 13px 16px 13px;
      gap: 6px;
  }

  .chat-logo {
      --sz: 30px;
  }

  .chat-app .header {
      padding: 11px 24px;
  }

  .confirm-mdl .modal-dialog {
      max-width: 300px;
      margin: 0 auto;
  }
}

@media screen and (max-width:420px) {
  .dash-container .inner-area {
      padding: 72px 25px 30px;
  }

  .chart-slider-wrapper .doc-card .iconx img {
      max-width: 25%;
  }
  .dwn-text{
      font-size: 14px;
      text-align: center;
      padding: 0 16px;
  }
}
.disable-chat-btn::before {
  background: #818181;
}
.no-chart-report .slick-track{width: 100% !important;}
.no-chart-report .slick-track .slick-slide {width: 100% !important;}
.no-chart-title{margin-bottom: 0 !important;text-align: center;}


@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* 14/11/24 */


/* myChart-dash-area */


.myChart-wrapper {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.myChart-header{
justify-content:center;
}

.left-col .prevw-chart-container .inner {
  min-height: 605px;
}

.myChart-dash-area {
  margin-top: 41px;
}

.dash-profile-form .fields-row:last-of-type {
 width:87%;
}

/* HorrorScope */

.horroscope-header{
  justify-content:center;
}

.dash-sub-header h6{
  font-size:15px;
  font-weight:500;
  line-height:20px;
  color:#ffffff;
  text-align:center;
  margin-top: 10px;
}


.horroscope-wrapper .horo-tab .nav-item.show .nav-link {
  color: #fff;
  background-color: transparent;
  border-color: transparent;
}
.horroscope-wrapper  .horo-tab .nav-link.active{

  color: #fff;
  background-color: transparent;
  border-color: transparent;
}

.horroscope-wrapper .horo-tab .nav-link{
 border:none !important;
}

.horroscope-wrapper .horo-tab{
  border:none !important;
  margin-top: 38px;
  margin-bottom: 54px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.hscope-tab-img{
  position: relative;
  display: flex;
  justify-content: center;
}

.h-tab{
  opacity:1;
}

.h-tab-sub{
  position: absolute;
  opacity:0;
}

.nav-link.active  .h-tab{
  opacity:0;
}
.nav-link.active  .h-tab-sub{
  opacity:1;
}
.hscope-link p{
  font-size:10px;
  font-weight:400;
  line-height:13px;
  margin-top: 9px;
  text-align:center;
  color:#ffffff;
}
.nav-link.active p{
  font-weight:700;
  color:#B3A3fc;
}

.horroscope-area{

  padding: 72px 72px 44px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.horroscope-main{
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.predict-row {
display: flex;
justify-content: space-around;
}

.predict-image{
  width:43%;
}

.predict-content {
  width:57%;
}

.predict-image{
display: flex;
justify-content: center;
}

.predict-date{
  margin-top: 16px;
font-weight: 700;
font-size: 15px;
line-height: 20px;
color: #fff;
}

.predict-desc{
font-weight: 500;
font-size: 15px;
line-height: 20px;
color: #fff;
margin-top: 15px;
max-width:373px;
}


.horroscope-wrapper .predict-tab .nav-item.show .nav-link {
  color: #fff;
  background-color: transparent;
  border-color: transparent;
}
.horroscope-wrapper  .predict-tab .nav-link.active{

  color: #fff;
  background-color: transparent;
  border-color: transparent;
}

.horroscope-wrapper  .predict-tab .nav-link{
 border:none !important;
 padding-bottom: 0;
 padding-left: 13px;
 padding-right: 25px;
 text-align: center;
 margin-bottom: 6px;
}

.horroscope-wrapper  .predict-tab{
border:none !important;
 
}
.horroscope-wrapper  .predict-tab::after{
content:'';
height:1px;
width:375px;
background-color:#d9d9d9;
   
  }

.predict-item .nav-link{
  font-family: 'roboto';
  line-height:23px;
  font-size:15px;
  font-weight:400;
  color:#ffffff !important;
  transition: color 0.3s ease-in;
}
.predict-item{
  position: relative;
  display: inline-block;
  transition: color 0.3s;
}

.predict-item .nav-link.active{
  color: #EEDB99 !important;
}

.predict-item .nav-link.active::after{
  display: block;
  content: '';
  height: 7px;
  width: 100%;
  border-radius: 8px;
  background-color:#EEDB99;
  position: absolute;
  top: 33px;
  left: 0;
}

.focus-of-day{
  padding-top:55px;
}

.horr-title{
  font-size:15px;
  line-height:20px;
  font-weight:700;
  color:#ffffff;
}


.progress-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 60px;
}

.progress-wrapper {
  width: 137px;
  height: 137px;
  position: relative;
  margin: 0 20px;
  border-radius: 50%;
}

.progress-core h6{
font-weight: 400;
font-size: 15px;
line-height: 23px;
color: #fff;
font-family: 'ppacma-900';
text-align: center;
margin-bottom:25px;
}

.beauty-calendar{
  margin-top: 60px;
}
.health-calendar{
  margin-top: 60px;
}
.calendar-date{
margin-top: 10px;
display: flex;
align-items: center;
}

.calendar-main {
  width: 305px;

}

.calendar{
  width: 75%;
  display: flex;
justify-content: center;
}

.calendar-cont{
  width: 25%;
}

.days-of-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 17px;
  margin-bottom: 10px;
  
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 17px;
}

.day {
  text-align: center;
   border-radius: 50%;
  color: #ffffff;
  height: 31px;
  width: 31px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.highlight {
  background-color: #ffeb3b;
}


.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-header .month-head{
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  font-family: 'ppacma-600';
}

.calendar-header button {   
  background-color: transparent;
  color: white;
  cursor: pointer;
  font-size: 20px;
  line-height: 30px;
  padding: 20px  15px;

}

.calendar-header:hover {
  background-color: transparent;
}

.days-of-week > div{
text-align: center;
border-radius: 50%;
color: #ffffff;
height: 31px;
width: 31px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
gap:17px;
}

.horroscope-wrapper{
  padding-bottom: 33px;
}


.c-core{
  display:flex;
  align-items:center;
  padding-top: 14px;
  padding-bottom: 14px;
}
.purple-rad{
background-color: #eedb99;
}

.dark-purple-rad{
  background-color: #99c1cc;
}
.medium-purple-rad{
  background-color: #3b7d91
}
.lbl-clr-blt{
  height: 21px;
  width: 21px;
  border-radius: 50%;
  min-width: 21px;
  align-self: baseline;
  transform: translateY(4px);
}

.c-core span{
  font-weight:400;
  font-size:15px;
  line-height:23px;
  color:#fff;
  font-family: 'ppacma-600';
  padding-left:16px;

}

/* media queries */
@media screen and (max-width: 1199px) {
  .prevw-chart-container {
    height: 605px;
    margin-left: auto;
    margin-right: auto;
  }
  .horroscope-main{
      max-width: 100%;
      margin: 0 auto;
  }
  .dash-container .inner-area {
      padding: 72px 40px 40px;
    }

  .horroscope-wrapper .horo-tab .nav-link {
    padding-left: 10px;
    padding-right: 10px;
  }
  .horroscope-wrapper .predict-tab .nav-link {
      padding-left: 15px;
      padding-right: 20px;
    }

    .horroscope-wrapper .predict-tab::after {
       width: 370px;
      }

      .predict-item .nav-link {
       
        line-height: 23px;
        font-size: 13px;
       
      }

}

@media screen and (max-width: 991px) {
.horroscope-wrapper .horo-tab .nav-link {
  padding-left: 12px;
  padding-right: 12px;
}

.dash-container .inner-area {
  padding: 72px 20px 20px;
}

.calendar-date {
  flex-direction: column;
}
.calendar {
  width: 100%;
}

.calendar-cont {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 30px;
}

.c-core {
  padding-bottom: 0;
}

}

@media screen and (max-width: 767px) {
.horroscope-wrapper .horo-tab .nav-link {
  padding-bottom: 15px;
}
.predict-row {
  justify-content: center;
  flex-direction: column;
}
.predict-desc {
  max-width: 100%;
}
.predict-image {
   width: 100%;
}
.predict-content {
  width: 100%;
  padding-top: 50px;
}
.predict-date{
  text-align:center;
}
.predict-desc {
  text-align: center;
}
.predict-tab{
  margin: 0 auto;
  width: 375px;
}
.focus-of-day {
  padding-top: 50px;
}

.beauty-calendar {
  margin-top: 50px;
}

.health-calendar {
  margin-top: 50px;
}
}

@media screen and (max-width: 575px) {

.horroscope-wrapper .horo-tab {
  margin-bottom: 30px;
}

.predict-content {
  width: 100%;
  padding-top: 30px;
}

.progress-container {
  flex-wrap: wrap;
}

}
@media screen and (max-width: 480px) {
  .prevw-chart-container {
    height: 542px;
  }
  .left-col .prevw-chart-container .inner {
      min-height: 480px;
    }
    .predict-item .nav-link {
      font-size: 12px; 
    }
    
    .predict-date {
       font-size: 13px;
    }
    .predict-desc {
      font-size: 13px;
    }

    .c-core span {
      font-size: 12px;
      text-wrap: nowrap;
      padding-left:5px;
  }
  .lbl-clr-blt{
      min-width: 15px;
  }
}

@media screen and (max-width: 420px) {

  .horroscope-wrapper .predict-tab::after {
      width: 100%;
    }
    .predict-tab {
      width: 272px;
    }
    .horroscope-wrapper .predict-tab .nav-link {
      padding-left: 10px;
      padding-right: 10px;
    }
     .calendar-main {
      width: 100%;
    }

    .days {
      gap: 15px;
    }

    .days-of-week {
      gap: 15px;
    }
}

@media screen and (max-width: 375px) {
  .calendar .table-condensed {
      border-spacing: 10px;
      padding: 0 10px;
  }
  .calendar .prev {
      left: 68px;
  }
  .calendar .next {
      right: 68px;
  }

  .days {
      gap: 10px;
    }

    .days-of-week {
      gap: 10px;
    }
}


/* 14/11/24 */


/* myChart-dash-area */


.myChart-wrapper {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.myChart-header {
  justify-content: center;
}

.myChart-area {
  height: 100dvh;
}

.left-col .prevw-chart-container .inner {
  min-height: 605px;
  height: 100%;
}

.myChart-area .dash-content {
  height: calc(100% - 72px);
}

.myChart-dash-area,
.myChart-wrapper {
  height: 100%;
  min-height: 350px;
}

.myChart-dash-area {
  margin-top: 41px;
}
.prevw-chart-container{height: 100% !important;}
/* 
.myChart-area {
  background-image:  url(../assets/images/mi-carta-bg.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 78px;
  padding-top: 130px;
} */

/* HorrorScope */

.horroscope-header {
  justify-content: center;
}

.dash-sub-header h6 {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  margin-top: 10px;
}


.horroscope-wrapper .horo-tab .nav-item.show .nav-link {
  color: #fff;
  background-color: transparent;
  border-color: transparent;
}

.horroscope-wrapper .horo-tab .nav-link.active {

  color: #fff;
  background-color: transparent;
  border-color: transparent;
}

.horroscope-wrapper .horo-tab .nav-link {
  border: none !important;
}

.horroscope-wrapper .horo-tab {
  border: none !important;
  margin-top: 38px;
  margin-bottom: 54px;
  display: flex;
  justify-content: center
}

.hscope-tab-img {
  position: relative;
  display: flex;
  justify-content: center;
}

.h-tab {
  opacity: 1;
}

.h-tab-sub {
  position: absolute;
  opacity: 0;
}

.tab-link.active .h-tab {
  opacity: 0;
}

.tab-link.active .h-tab-sub {
  opacity: 1;
}

.hscope-link p {
  font-size: 10px;
  font-weight: 400;
  line-height: 13px;
  margin-top: 9px;
  text-align: center;
  color: #ffffff;
}

.tab-link.active p {
  font-weight: 700;
  color: #EEDB99;
}

.horroscope-area {

  padding: 72px 72px 44px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.horroscope-main {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.horo-tab .tab-link {
  padding-left: 15px;
  padding-right: 15px;
}

.predict-row {
  display: flex;
  justify-content: space-around;
}

.predict-image {
  width: 43%;
}

.predict-content {
  width: 57%;
}

.predict-image {
  display: flex;
  justify-content: center;
}

.predict-date {
  margin-top: 16px;
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  color: #fff;
}

.predict-desc {
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #fff;
  margin-top: 15px;
  max-width: 373px;
}


.horroscope-wrapper .predict-tab .nav-item.show .nav-link {
  color: #fff;
  background-color: transparent;
  border-color: transparent;
}

.horroscope-wrapper .predict-tab .nav-link.active {

  color: #fff;
  background-color: transparent;
  border-color: transparent;
}

.horroscope-wrapper .predict-tab .nav-link {
  border: none !important;
  padding-bottom: 0;
  padding-left: 13px;
  padding-right: 25px;
  text-align: center;
  margin-bottom: 6px;
}

.horroscope-wrapper .predict-tab {
  border: none !important;

}

.horroscope-wrapper .predict-tab::after {
  content: '';
  height: 1px;
  width: 375px;
  background-color: #d9d9d9;

}

.predict-item .nav-link {
  font-family: 'roboto';
  line-height: 23px;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff !important;
  transition: color 0.3s ease-in;
}

.predict-item {
  position: relative;
  display: inline-block;
  transition: color 0.3s;
}

.predict-item .nav-link.active {
  color: #EEDB99 !important;
}

.predict-item .nav-link.active::after {
  display: block;
  content: '';
  height: 7px;
  width: 100%;
  border-radius: 8px;
  background-color: #EEDB99;
  position: absolute;
  top: 33px;
  left: 0;
}

.focus-of-day {
  padding-top: 55px;
}

.horr-title{
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: #ffffff;
}


.progress-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  gap: 81px;
}


.progress-wrapper {
  width: 137px;
  height: 137px;
  position: relative;
  margin: 0 20px;
  border-radius: 50%;
}

.progress-wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}


.progress-core h6 {
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  color: #fff;
  font-family: 'ppacma-900';
  text-align: center;
  margin-bottom: 25px;
  text-transform: capitalize;
}


.calendar-date .datepicker .prev,
.calendar-date .datepicker .next {
  font-size: 20px;
  color: #fff;
  line-height: 30px;
  color: #ffffff;
  font-family: 'ppacma-900';
}


.datepicker-div {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.calendar {
  width: 80%;
  display: flex;
  justify-content: center;
}

.calendar .datepicker-inline {
  width: auto;
}

.calendar .table-condensed {
  width: 305px;
  height: 219px;
  border-spacing: 15px;
  border-collapse: separate;
  margin-top: -15px;
}

.calendar-date {
  display: flex;
  align-items: center;
}

.calendar-date .datepicker td {
  font-size: 15px;
  width: 31px;
  height: 31px;
  padding: 3px 8px;
}

.calendar-date .datepicker th {
  font-size: 15px;
  width: 31px;
  height: 31px;
  padding: 3px 8px;
}

.calendar-date .datepicker-switch {
  font-size: 20px !important;
  line-height: 30px;
  color: #fff;
  font-weight: 400;
  font-family: 'ppacma-900';
}

.beauty-calendar {
  margin-top: 60px;
}

.health-calendar {
  margin-top: 30px;
}

.calendar-cont {
  width: 20%;
}



.c-core {
  display: flex;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
}

.purple-rad {
  height: 21px;
  width: 21px;
  background-color: #eedb99;
  border-radius: 50%;
}

.dark-purple-rad {
  height: 21px;
  width: 21px;
  background-color: #99c1cc;
  border-radius: 50%;
}

.medium-purple-rad {
  height: 21px;
  width: 21px;
  background-color: #3b7d91;
  border-radius: 50%;
}

.c-core span {
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  color: #fff;
  font-family: 'roboto';
  padding-left: 16px;

}

.calendar thead tr:nth-child(2) {
  height: 50px;
  position: relative;
}

.calendar .prev {
  position: absolute;
  top: 15%;
  left: 90px;
}

.calendar .next {
  position: absolute;
  top: 15%;
  right: 90px;
}

.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
  background: transparent;
}

.dark-purple {
  background-color: #8B3E92;
  border-radius: 50% !important;
}

.light-purple {
  background-color: #AFA0EC;
  border-radius: 50% !important;
}

.medium-purple {
  background-color: #5D4185;
  border-radius: 50% !important;
}

.dark-purple:hover {
  background-color: #8B3E92 !important;
  border-radius: 50% !important;
}

.light-purple:hover {
  background-color: #AFA0EC !important;
  border-radius: 50% !important;
}

.medium-purple:hover {
  background-color: #5D4185 !important;
  border-radius: 50% !important;
}

/* media queries */
@media screen and (max-width: 1199px) {
  .prevw-chart-container {
      height: 605px;
      margin-left: auto;
      margin-right: auto;
  }

  .horroscope-main {
      max-width: 100%;
      margin: 0 auto;
  }

  .dash-container .inner-area {
      padding: 72px 40px 40px;
  }

  .horroscope-wrapper .horo-tab .nav-link {
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 20px;
  }

  .horroscope-wrapper .predict-tab .nav-link {
      padding-left: 15px;
      padding-right: 20px;
  }

  .horroscope-wrapper .predict-tab::after {
      width: 370px;
  }

}

@media screen and (max-width: 991px) {
  .horroscope-wrapper .horo-tab .nav-link {
      padding-left: 12px;
      padding-right: 12px;
  }

  .dash-container .inner-area {
      padding: 72px 20px 20px;
  }

  .calendar-date {
      flex-direction: column;
  }

  .calendar {
      width: 100%;
  }

  .calendar-cont {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
  }

}

@media screen and (max-width: 767px) {
  .horroscope-wrapper .horo-tab .nav-link {
      padding-bottom: 15px;
  }

  .predict-row {
      justify-content: center;
      flex-direction: column;
  }

  .predict-desc {
      max-width: 100%;
  }

  .predict-image {
      width: 100%;
  }

  .predict-image  img{
    filter: brightness(0) saturate(100%) invert(83%) sepia(28%) saturate(391%) hue-rotate(8deg) brightness(98%) contrast(97%);
  }

  .predict-content {
      width: 100%;
      padding-top: 50px;
  }

  .predict-date {
      text-align: center;
  }

  .predict-desc {
      text-align: center;
  }

  .predict-tab {
      margin: 0 auto;
      width: 375px;
  }

  .progress-container {
      justify-content: space-around;
      flex-wrap: wrap;
      gap: 10px;
  }
}

@media screen and (max-width: 575px) {

  .horroscope-wrapper .horo-tab {
      margin-bottom: 30px;
  }

  .predict-content {
      width: 100%;
      padding-top: 30px;
  }



}

@media screen and (max-width: 480px) {
  .prevw-chart-container {
      height: 542px;
  }

  .left-col .prevw-chart-container .inner {
      min-height: 480px;
  }

  .predict-item .nav-link {
      font-size: 13px;
  }

  .predict-date {
      font-size: 13px;
  }

  .predict-desc {
      font-size: 13px;
  }

  .c-core span {
      font-size: 12px;
      text-wrap: nowrap;
      padding-left: 5px;
  }

  .purple-rad,
  .dark-purple-rad,
  .medium-purple-rad {
      height: 15px;
      width: 15px;

  }

  .myChart-area {
      min-height: 100dvh;
  }

  .prevw-chart-container {
      height: 450px;
  }

  .left-col .prevw-chart-container .inner {
      min-height: auto;
  }
}

@media screen and (max-width: 420px) {

  .horroscope-wrapper .predict-tab::after {
      width: 100%;
  }

  .predict-tab {
      width: 272px;
  }

  .horroscope-wrapper .predict-tab .nav-link {
      padding-left: 10px;
      padding-right: 10px;
  }

  .predict-item .nav-link {
    font-size: 12px !important;
  }
}


@media screen and (max-width: 375px) {
  .calendar .table-condensed {
      border-spacing: 10px;
      padding: 0 10px;
  }

  .calendar .prev {
      left: 68px;
  }

  .calendar .next {
      right: 68px;
  }

  .c-core {

    padding-top: 8px;
    padding-bottom: 8px;
  }

  .c-core span {
    font-size: 10px;
  }
}

/* //-----------18Nov--------- */
.predict-image{
  height: fit-content;
}
.horo-tab .tab-link{
  cursor: pointer;
}
.datepicker td, .datepicker th{text-align: center;}
.horroscope-wrapper .horo-tab {
  flex-wrap: wrap;
}
.datepicker-switch{
  pointer-events: none;
}

.calendar .table-condensed {
  width: auto;
  height: auto;
}

.calendar-date .datepicker td {
  padding: unset;
}

.calendar-date .datepicker th {
  padding: unset;
}

.calendar .next,
.calendar .prev {
  top: 50%;
  transform: translateY(-50%);
}

.calendar .next {
  right: 76px;
}

.calendar .prev {
  left: 76px;
}

.datepicker tbody {
  pointer-events: none;
}

@media screen and (max-width: 1199px) {
  .horroscope-wrapper .horo-tab .tab-link {
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 20px;
  }
 
 
  .predict-item .nav-link {
    font-size: 14px;
  }
 
 

}

@media screen and (max-width:480px) {
  .progress-container {
      gap: 20px 10px;
  }

  .progress-wrapper {
      width: 107px;
      height: 107px;
  }

  .progress-core h6 {
      margin-bottom: 15px;
  }

  .calendar .table-condensed {
      border-spacing: 11px;
  }
}

@media screen and (max-width: 991px) {
  .calendar-cont {
      justify-content: center;
      gap: 50px;
  }

}

@media screen and (max-width: 575px) {
  .calendar-cont {
      gap: 30px;
  }
}

@media screen and (max-width: 480px) {
  .calendar-cont {
      gap: 0 45px;
      flex-direction:column;
  }

  .calendar-date .datepicker td {
      font-size: 11px;
      width: 28px;
      height: 28px;
  }

  .calendar .prev {
      left: 46px;
  }

  .calendar .next {
      right: 46px;
  }
}
h6#hrs_sign_date {
  text-transform: capitalize;
}
/*Test Compability Tab1 */
.test-header{
  justify-content:center;
}

.tab-test-content{
  display:none;
}

.tab-test-content.active{
  display:block;
}

.tabs {
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

.test-tab-buttons{
  display:flex;
  justify-content:center;
  gap:50px;
  max-width: 630px;
  margin: auto;
}
.tab-test-btn{
  cursor:pointer;
}

.test-tab-image{
  position:relative;
}

.test-p-img{
  position:absolute;
  opacity:0;
}

.tab-test-btn.show  .test-p-img{
  opacity:1;
}

.tab-test-btn  .test-w-img{
  opacity:1;
}

.tab-test-btn.show  .test-w-img{
  opacity:0;
}

.test-progress-wrap{
  max-width: 727px;
  margin:auto;
  position:relative;
}

.test-bar{
  width: 100%;
  height: 7px;
  display: block;
  background-color:transparent;
  border-radius: 20px;
  margin-top: 10px;
  border: 1px solid var(--primary-clr);
}

.actual-progress{
  width: 16.6667%;
  height: 7px;
  display: block;
  background-color:#0d2e38;
  border-radius: 20px;
  position: absolute;
  top: 0;
}

.test-tabs{
  margin-top:10px;
  background-color: #99c1cc;
  padding-top:20px;
  padding-bottom:20px;
  color:var(--primary-clr);
  border-radius:20px;
  padding-left: 60px;
padding-right: 60px;
}

.test-birth-date{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top:1px;
}

.z-title{
  font-size: 19px;
  line-height: 34px;
  font-weight: 400;
  text-align: center;
  font-family: 'ppacma-600';
  margin-bottom: 0px;
}




.z-descp{
font-size: 12px;
line-height: 22px;
font-weight: 600;
font-family: 'Roboto';
text-align: center;
}

.solar-image{
  display: flex;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: auto;
  margin-top: 10px;
}

  .solar-image img{
  width: 100%;
  height: auto;
  }
 .test-tab-image img{
  width:100%;
  height:auto;
} 

.test-birth-label{
font-size: 12px;
line-height: 20px;
color: #0d2e38;
margin-bottom: 5px;
font-weight: 600;
font-family: 'Roboto';
}

.test-form-birth, 
.test-your-partner{
  margin-top:5px;
}

.test-sub-heading{
  font-size: 18px;
  line-height: 36px;
  font-weight: 400;
  text-align: center;
  font-family: 'ppacma-600';
  margin-bottom: -5px;
}
.test-select + .select2-container--default .select2-selection--single {

  border-radius: 5px;
  border-color: var(--primary-clr);
  background: #1008211A;
  height: 31px;
}


.test-select + .select2-container--default .select2-selection--single .select2-selection__arrow b {
  margin-top: 0;
  margin-left: -9px;
  top: calc(50% - 3px);
  transform: translateY(-50%) rotate(135deg);
  background: transparent;
  border-color: white;
  border-width: 1px 1px 0 0;
  width: 9px;
  height: 9px;
  border-style: solid;
}

.test-select + .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 31px;
}
.test-block{
  width: 222px;
  display: flex;
  flex-direction: column;
}

.month-block {
  width: 222px;
  display: flex;
  flex-direction: column;
}

.test-select + .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: #ffffff;
  font-size: 13px;
  line-height: 19px;
  font-family: 'Roboto';
  font-weight: 400;
}

.test-select + .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #0d2e38;
  line-height: 28px;
  height: 30px;
  display: flex;
  align-items: center;
  padding-left: 14px;
}

#select2-day_input1-results .select2-results__option,
#select2-month_input1-results .select2-results__option,
#select2-year_input1-results .select2-results__option
{
  color: var(--primary-clr);
  text-align: center;
}



#select2-day_input2-results .select2-results__option,
#select2-month_input2-results .select2-results__option,
#select2-year_input2-results .select2-results__option
{
  color: var(--primary-clr);
  text-align: center;
}


#select2-day_input1-results  .select2-container--default .select2-results__option--highlighted[aria-selected],
#select2-month_input1-results  .select2-container--default .select2-results__option--highlighted[aria-selected], 
#select2-year_input1-results  .select2-container--default .select2-results__option--highlighted[aria-selected]{
  color: #ffffff !important ;
  background-color:var(--primary-clr) !important;
}

#select2-day_input1-results .select2-results__option:hover,
#select2-month_input1-results .select2-results__option:hover,
#select2-year_input1-results .select2-results__option:hover{
  color: #ffffff !important;
  background-color:var(--primary-clr) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: #ffffff!important;
  background-color:var(--primary-clr) !important;
}

 .next-btn{
  width: 224px;
  margin-top:25px;
  margin-left:auto;
  margin-right:auto;
  transition:all 0.2s ease-in-out;
  min-height: 42px !important; 
 }

 .next-btn:hover{
  border:1px solid var(--primary-clr);
  background: #1008211A;
  color:var(--primary-clr);
 }

 .birth,
 .future{
  display: flex;
  gap: 28px;
 }

 .test-field{
  gap: 28px;
 }

 .error{
  color:red;
  font-size: 14px;
  margin-top: 4px;
 }

 /* Test-Compabality Tab2 */
 .z-sign{
  margin-top:40px;
 }

 .z-sign-image{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
 }

 .z-sign-info .z-descp{
  max-width: 588px;
  margin: auto;
  line-height:20px;
  font-weight:500;
 }

 .z-sign-info .z-title{
  font-size:25px;
  line-height:35px;
 }

 .z-sign-info{
  margin-top:30px;
 }


 /* Tab3 */

 .specific-place{
  margin-top:20px;
 }

 .place-info .z-descp{
  max-width: 464px;
  margin: auto;
  line-height: 20px;
  font-weight:500;
 }

 .place-image{
  margin-top: 5px;
  display: flex;
  justify-content: center;
  height:180px;
 }

 .place-block label{
  font-family: 'Roboto';
  font-size:17px;
  line-height: 20px;
  font-weight:600;
  color:#0d2e38;
  margin-bottom:10px;
 }

 .place-field{
  width: 348px;
  height: 37px;
  border-radius: 5px;
  background: #1008211A;
  border: 1px solid #0d2e38;
  padding: 5px 14px;
  color: #0d2e38;
  font-size: 15px;
  line-height: 18px;
 }

 .place-field::placeholder{
  font-family: 'Roboto';
  font-size:15px;
  line-height: 19px;
  font-weight:400;
  color:#ffffff;
 }

 .place-block{
  display:flex;
  flex-direction:column;
 }

 .main-place-form{
  max-width: 727px;
  margin: auto;
 }

 .place-blocks{
  display: flex;
  gap: 30px;
 }

 .place-form{
  margin-top:5px;
 }

 .place-info .z-title{
    font-size: 25px;
    line-height: 35px;
 }
 /* Step 4 */
 .birth-time{
  margin-top:1px;
 }
 .hrs-fields input{
   color: #0d2e38 !important;
 }
 .time-info .z-title{
  font-size: 22px;
  line-height: 35px;
  margin-bottom: -3px !important;
 }

 .time-info .z-descp{
  line-height: 15px;
  font-weight: 500;
  max-width: 500px;
  margin: auto;
 }

 .time-image {
  display: flex;
  justify-content: center;
  margin-top: 2px;
  height: 130px;
}

.test-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.test-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.test-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 55px;
  height: 27px;
  border-radius: 5px;
  background: #0d2e38;
  -webkit-transition: .4s;
  transition: .4s;
  display: flex;
  align-items: center;
  gap: -2px;
  justify-content: center;
  gap: 6px;
}

.test-slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 23px;
  left: 2px;
  bottom: 2px;
  background-color:#ffffff;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 4px;
}

input:checked + .test-slider:before {
  -webkit-transform: translateX(28px);
  -ms-transform: translateX(28px);
  transform: translateX(28px);
}

input:checked + .test-slider{
  background: #0d2e38;
}

.test-slider span{
font-size: 12px;
display: inline-block;
line-height: 14px;
font-weight: 700;
font-family: 'Roboto';
color: #fff;
}

.test-checkbox-block label{
  font-family: 'Roboto';
  font-weight:500;
  font-size:15px;
  line-height:20px;
  color: #0d2e38;
  margin-bottom:0;
}

.not-sure{
  width: 20px;
  height: 20px;
  border: 1px solid var(--primary-clr);
  background-color: #a393e6;
}

.not-sure:checked{
  background-color:var(--primary-clr);
  color:#ffffff;
}

.test-input-fields{
  background: #1008211A;
border-color: var(--primary-clr);
color: white;
}

.your-time-blocks{
  max-width: 553px;
  margin: auto;
  display: flex;
  gap: 64px;
  justify-content: center;
}

.test-hrs{
  gap: 10px;
  align-items: center;
}

.test-hrs, .test-min{
  position:relative;
}

.t-block{
  max-width:100% !important;
}

.t-block .icon{
  top:4px;
}

.t-block label{
 font-size: 17px;
 margin-bottom: 5px;
 font-weight: 600;
 line-height: 20px;
 color: #0d2e38;
 font-family: 'Roboto';
}

.hrs-data{
  display:flex;
  gap:10px;
}

.test-hrs{
  width:71px;
}

.test-min{
  width:104px;
}

.test-hrs input{ 
  width:71px;
  height: 37px;
}

.test-min input{ 
  width:104px;
  height: 37px;
}

.hrs-data input::placeholder{
  color:#ffffff;
}

.test-checkbox-block{
  margin-top: 69px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.am-pm-switch{
  margin-top: 3px;
}

.time-des {
  margin-top:3px;
  /* margin-bottom: -30px; */
}

.time-des p{
  font-family: 'Roboto';
  font-size:14px;
  line-height:20px;
  font-weight:500;
  max-width:553px;
  margin:auto;
  text-align:center;
}

.test-checkbox-field{
  margin-top:33px;
}

.ckBox-label {
  color: var(--primary-clr);
  user-select: none;
}

.cc-ckBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.cc-ckBox {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
  align-items: center;
}

.cc-ckBox .checkmark {
  position: relative;
  box-shadow: #0d2e38 0px 0px 0px 1px;
  background-color: #1008211a;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  transition: all 0.2s ease 0s;
  cursor: pointer;
  transform-origin: 0px 10px;
  border-radius: 4px;
  padding: 0px;
  box-sizing: border-box;
}

.cc-ckBox input:checked~.checkmark {
  box-shadow: #0d2e38 0px 0px 0px 1px;
  background-color: #0d2e38;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  transition: all 0.2s ease 0s;
  cursor: pointer;
  transform-origin: 0px 10px;
  border-radius: 4px;
  padding: 0px;
  box-sizing: border-box;
}

.cc-ckBox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.cc-ckBox input:checked~.checkmark:after {
  display: block;
}
.cc-ckBox .checkmark:after {
  left: 6px;
  top: 42%;
  width: 5px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-50%, -50%);
  transition: all 500ms ease-in-out;
}

.test-hr{
  margin-top:0;
}

.test-time-form{
  margin-top:1px;
}

.your-time-blocks:nth-of-type(2) {
  margin-top: 5px;
}
.disabled-input{
  background-color: gray !important;
  cursor: not-allowed;
}
/* Step 5*/
.gn-nam {
  margin-top: 5px;
}

.gn-info .z-title {
  font-size: 19px;
  line-height: 30px;
}

.gn-info .z-descp {
  line-height: 12px;
  font-weight: 500;
}

.gen-nam-form {
  margin-top: 5px;
}

.gn-block {
  width: 70px;
  height: 70px;
  /* padding:10px !important; */
}

.gn-icon {
  font-size: 15px;
  line-height: 0px;
  font-weight: 500;
  font-family: 'Roboto';
  color: #0d2e38;
  text-align: center;
}

.gn-icon img {
  margin-bottom: 0px;
  max-height: 45px;
}

.gn-key {
  display: flex;
  justify-content: center;
  gap: 0 30px;
  align-items: center;
  flex-wrap: wrap;
  max-width: max-content;
  margin-inline: auto;
}
.gn-key .help-block {
  width: 100%;
}
.help-block{
  font-size:13px !important;
}
.gn-blocks .help-block {
  text-align: center;
}

.gn-block{
  background-color: transparent;
  border-color: #0d2e38;
}

.gn-block:hover,
.gn-your-block.active,
.gn-partner-block.active {
  background-color: #EEDB99;
  border-color: #EEDB99;
}

.gn-name {
  margin-top: 5px;
}

.gn-name-block {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 320px;
  margin: auto;
}

.gn-name-block input {
  width: 100%;
  height: 35px;
  border: 1px solid var(--primary-clr);
  border-radius: 5px;
  padding: 11px;
  background-color: #1008211a;
  color: #0d2e38;
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
}

.gn-name-block input::placeholder {
  color: #ffffff;
  font-weight: 500;
}

.gn-blocks:nth-of-type(2) {
  margin-top: 5px;
  margin-bottom: -10px;
}

.gender-radio {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.gn-wrap span{
  display:block;
  text-align:center;
margin-top:3px;
}

/* Step 6 */
.test-tab-buttons.hide,
.test-progress-bar.hide,
.test-header.hide{
  display:none;
}

.reading-image{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.reading-blocks{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.reading-wrap{
  border: 1px dashed var(--primary-clr);
  padding: 20px;
  width: 371px;
  background-color:#99C1CC;
  border-radius: 5px;
}

.reading-info .z-title{
font-size:25px;
line-height:35px;
}

.r-dob span{
  font-size: 15px;
  line-height: 19px;
  font-weight: 600;
}

.r-dob .dob-date{
  color:#ffffff;
}

.r-dob{
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 9px;
}

.r-desc{
  font-size: 15px;
  line-height: 19px;
  font-weight: 600;
  text-align: center;
  margin-top: 20px;
}

.reading-progress p{
  font-size:15px;

}

.reading-progress p{
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  margin-top: 20px;

}

.reading-progress .progress{
  max-width: 607px;
  height: 20px;
  border-radius: 20px;
  margin: auto;
  padding:1px;
}

.reading-progress{
  margin-top:30px;
}

.reading-progress .progress-bar{
  background: #eedb99;
  border-radius: 20px;
  transition: width 5s ease;
}

.reading{
  margin-top: 20px;
  margin-bottom: 20px;
}
.reading{
  display:block;
}

.reading.hidden{
  display:none;
}

.test-result{
  display:none;
}

.test-result.visible{
  display:block;
}

.test-tabs.final-tab{
background-color:transparent;
}

.test-result{
  color:#ffffff;
}
/* Result section */

.ts-top-row1 {
  background-color: #eedb99;
  padding: 22px 31px 22px 22px;
  border: 1px dashed var(--primary-clr);
  border-radius: 5px;
}

.ts-top {
  background-color: #99c1cc;
  border-radius: 20px;
  padding: 60px;
  color: #0d2e38;
}

.ts-top-desc p {
  font-size: 16px;
  line-height: 25px;
  font-weight: bold; 
  text-align: center; 
  max-width: 797px;
  margin: auto; 
}
.horoscope-img {
  display: flex;
  height: 50px;
  width: 50px;
  float: left;
  margin-right: 15px;
}

.predict-info p {
  font-size: 16px;
  line-height: 25px;
  font-weight: 500;
  text-align: center;
}

.predict-img {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.ts-top-row2 {
  margin-top: 40px;
}

.ts-predict {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.predict-wrap {
  background-color: #eedb99;
  padding: 30px;
  width: 313px;
  border-radius: 5px;
}

.ts-middle, .ts-top {
  margin-top: 80px;
}

.rs-title {
  font-size: 25px;
  line-height: 35px;
  text-align: center;
  font-weight: 400;
  font-family: 'ppacma-900';
}

.rs-img {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.rel-status {
  margin-top: 80px;
}

.rel-title {
  display: flex;
  gap: 5px;
  align-items: center;
}

.rel-title p {
  font-size: 22px;
  line-height: 25px;
  font-weight: 400;
}

.rel-title p span {
  font-size: 30px;
  line-height: 35px;
  color: #eedb99;
  font-weight: 400;
}

.rel-desc {
  font-size: 16px;
  line-height: 25px;
  font-weight: 500;
  font-family: 'Roboto';
  margin-top: 16px;
  max-width: 983px;
}

.rel-wrap:not(:last-child) {
  margin-bottom: 57px;
}

.ts-bottom {
  background-color: #99c1cc;
  border-radius: 20px;
  padding: 60px;
  color: #0d2e38;
  margin-top: 80px;
}

.relation-progress-bar {

  background: #eedb99;
  border-radius: 20px;
  height: 18px;
  transition: width 5s ease;
}

.rel-progress {
  height: 20px;
  border-radius: 20px;
  margin: auto;
  background-color: #fff;
  position: relative;
  border: 1.5px solid #fff;
}

.heart {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 50px;
}

.rels-title {
  font-size: 22px;
  line-height: 25px;
  margin-bottom: 30px;
}

.rel-value {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
}

.relation-progress:not(:last-child) {
  margin-bottom: 40px;
}
 @media screen and (max-width: 1300px) {
  .test-tabs {
      padding-left: 20px;
      padding-right: 20px;
  }

 }

@media screen and (max-width: 1199px) {

    .test-tab-buttons {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .test-bar {
      width: 100%;
    }

    .test-progress-wrap {
      width: 100%;
    }

    .place-blocks {
      flex-wrap: wrap;
      justify-content: center;
    }

    .place-field {
      width: 283px;
      height: 37px;
    }

    .dash-profile-form .fields-row:nth-of-type(3) {
      width: 100%;
  }
    
  .test-tab-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .test-bar {
    width: 100%;
  }

  .test-progress-wrap {
    width: 100%;
  }

  .place-blocks {
    flex-wrap: wrap;
    justify-content: center;
  }

  .place-field {
    width: 283px;
    height: 37px;
  }

  .predict-wrap {
    padding: 30px 20px;
    min-height: 251px;
  }

  .ts-top-desc p {
    font-size: 15px;
  }

  .predict-info p {
    font-size: 15px;
  }
  .rel-desc {
    font-size: 15px;
  }
  .rel-value {
    font-size: 15px;
  }
}

@media screen and (min-width: 992px) {
  .dash-container {
    width: calc(100% - 275px);
  }
    .test-block {
      width: 150px;
    }
  
    .month-block {
      width: 150px;
    }
    .test-select
    + .select2-container--default
    .select2-selection--single
    .select2-selection__placeholder {
    font-size: 12px;
  }
} 


@media screen and (max-width: 991px) {
  .dash-sidebar-collapse {
    left: -300px;
    border-right: 0;
    transition: left .2s ease-in;
}
.dash-container .inner-area {
    padding: 72px 20px 20px;
}
.place-field {
    width: 329px;
  }

  .predict-wrap {
    min-height: auto;
  }

  .test-tabs.final-tab {
    padding-top: 30px;
  }

  .ts-top {
    padding: 60px 40px;
  }

  .ts-bottom {
    padding: 60px 40px;
  }
}

@media screen and (max-width: 767px) {
  .test-tab-buttons {
    gap: 30px;
  }

  .z-sign-info .z-descp {
    width: 100%;
  }

  .test-tabs {
    padding-left: 30px;
    padding-right: 30px;
  }

  .test-select
    + .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    padding-left: 10px;
  }

  .test-block {
    width: 147px;
  }

  .month-block {
    width: 147px;
  }

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

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

  .test-select
    + .select2-container--default
    .select2-selection--single
    .select2-selection__placeholder {
    font-size: 12px;
  }

  .place-field {
    width: 223px;
  }

  .ts-predict {
    flex-direction: column;
  }

  .predict-wrap {
    width: 100%;
  }

  .ts-top-desc p {
    max-width: 100%;
  }

  .rel-desc {
    max-width: 100%;
  }

  .rel-title p span {
    font-size: 27px;
    line-height: 34px;
  }

  .rel-title p {
    font-size: 20px;
    line-height: 23px;
  }

  .rels-title {
    font-size: 20px;
    line-height: 23px;
  }

  .rel-wrap:not(:last-child) {
    margin-bottom: 40px;
  }

  .ts-middle,
  .rel-status,
  .ts-bottom {
    margin-top: 60px;
  }

  .ts-top-desc p {
    text-align: center;
    margin-top:10px;
  }
/* new css */
  .your-partner-place .help-block{
    max-width: 223px;
  }
  /* new css */
}

@media screen and (max-width: 575px) {
  .dash-container .inner-area {
      background-color: var(--primary-clr);
  }
  .test-container {
    background-color: #99c1cc;
  }

  .test-header h2{
    color: #0d2e38;
  }

  .test-sidemenu-btn {
    color: #0d2e38;
  }

  .test-sidemenu-btn {
    color: #fff;
  }
  .test-block {
    width: 100%;
  }

  .test-select
    + .select2-container--default
    .select2-selection--single
    .select2-selection__placeholder {
    font-size: 13px;
  }

  .test-select
    + .select2-container--default
    .select2-selection--single
    .select2-selection__arrow
    b {
    width: 8px;
    height: 8px;
  }

  .test-select
    + .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    top: 3px;
    right: -3px;
  }
  .test-birth-date {
    margin-top: 45px;
  }

  .z-sign {
    margin-top: 45px;
  }

  .specific-place {
    margin-top: 45px;
  }

  .test-form-birth,
  .test-your-partner {
    margin-top: 50px;
  }

  .next-btn {
    margin-top: 45px;
  }

  .error {
    color: red;
    font-size: 12px;
  }

  .compabality-form {
    width: 100%;
  }

  .birth,
  .future {
    flex-direction: column;
    gap: 18px;
  }

  .month-block {
    width: 100%;
  }

  .place-block {
    width: 100%;
  }

  .place-field {
    width: 100%;
  }

  .test-tabs {
    margin-top: 0;
    padding-bottom: 30px;
  }

  .your-time-blocks {
    gap: 18px;
  }

  .hrs-data .help-block {
    font-size: 12px;
    line-height: 14px;
  }

  .time-des {
    margin-top: 40px;
    margin-bottom: 0;
  }

  .birth-time {
    margin-top: 45px;
  }

  .solar-image {
    margin-top: 45px;
  }

  .gn-nam {
    margin-top: 45px;
  }

  .hrs-data input::placeholder {
    font-size: 13px;
  }

  .cc-ckBox .checkmark {
    height: 16px;
    width: 16px;
  }

  .cc-ckBox input:checked ~ .checkmark {
    height: 16px;
    width: 16px;
  }

  .cc-ckBox {
    font-size: 13px;
  }

  .cc-ckBox .checkmark::after {
    left: 3px;
  }

  .gn-info .z-title {
    line-height: 30px;
  }

  .gen-nam-form {
    margin-top: 40px;
  }

  .gn-blocks:nth-of-type(2) {
    margin-top: 40px;
    margin-bottom: 0;
  }

  .gn-name-block input {
    font-size: 13px;
    line-height: 19px;
  }

  .place-block .help-block {
    font-size: 12px;
    line-height: 18px;
  }

  .gn-blocks .help-block {
    font-size: 12px;
    line-height: 18px;
  }

  .place-field::placeholder {
    font-size: 13px;
    line-height: 19px;
  }

  .place-block label {
    font-size: 15px;
    line-height: 18px;
  }

  .reading {
    margin-top: -45px;
  }

  .result-cont {
    background-color: transparent;
  }

  .rel-progress {
    height: 16px;
  }

  .relation-progress-bar {
    height: 14px;
  }

  .heart {
    top: 28%;
    width: 38px;
    height: 50px;
  }
  .ts-middle,
  .rel-status,
  .ts-bottom {
    margin-top: 60px;
  }
   /* Newly added css  start*/

  .test-container.result-cont  .test-sidemenu-btn{
    color: #9586d3;
  }

  .z-title{
      font-size: 28px;
  }
  .rels-title {
    font-size: 17px;
    line-height: 23px;
    margin-bottom: 28px;
  }

  .z-title{
    font-size: 28px;
  }

  .your-partner-place .help-block {
    max-width: 100%;
  }
  .rs-title {
    color: #ffffff;
  }

  .rel-title {
    color: #ffffff;
  }
  .rel-desc {
    color: #ffffff;
  }
  .horoscope-img {
      display: flex;
      flex-direction: column; 
      align-items: center; 
      justify-content: center; 
      margin: 0 auto; 
      float: none; 
  }
}

@media screen and (max-width: 480px) {
  .test-tab-buttons {
    gap: 20px;
  }

  .test-tabs {
    border-radius: 0;
    margin-top: -31px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
  }

  .birth,
  .future {
    display: flex;
    gap: 18px;
    align-items: center;
  }

  .help-block {
      font-size: 13px !important;
  }
  .test-field {
    gap: 18px;
  }

  .z-descp {
    font-size: 13px;
  }
  .time-des p {
    font-size: 13px;
  }

  .your-time-blocks {
    gap: 10px;
    flex-direction: column;
  }

  .test-checkbox-field {
    margin-top: 0;
  }

  .hrs-data {
    gap: 30px;
  }

  .your-time-blocks:nth-of-type(2) {
    margin-top: 40px;
  }
  .gn-block {
    width: 100px;
    min-height: 100px;
    max-height: 90px;
  }
  .radio-block {
      padding-block: 23px !important;
  }
  .gn-icon {
    font-size: 13px;
    line-height: 20px;
  }

  .reading-progress .progress {
    max-width: 100%;
  }

  .test-tabs.final-tab {
    margin-left: 0;
    margin-right: 0;
  }

  .rs-img img {
    width: 100%;
    height: auto;
  }

  .rel-title img {
    width: 22px;
    height: 22px;
  }

  .heart {
    top: 28%;
    width: 33px;
    height: 50px;
  }

  .ts-top {
    padding: 50px 30px;
  }

  .ts-bottom {
    padding: 50px 30px;
  }

  .test-tabs.final-tab {
    padding-top: 0;
  }
  .horoscope-img {
      display: flex;
      flex-direction: column; 
      align-items: center; 
      justify-content: center; 
      margin: 0 auto; 
      float: none; 
  }
  /* Newly added css  start*/
  .rels-title {
    margin-bottom: 25px;
  }
   .gn-icon img {
    min-height: auto;
  }
}

@media screen and (max-width: 420px) {
  .birth,
  .future {
    gap: 10px;
  }

  .test-field {
    gap: 10px;
  }

  .z-title {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 7px;
  }

  .z-sign-info .z-title,
  .place-info .z-title,
  .time-info .z-title {
    font-size: 22px;
    line-height: 30px;
  }

  .z-sign-info .z-descp {
    font-size: 13px;
  }

  .test-sub-heading {
    font-size: 22px;
    line-height: 32px;
  }

  .test-birth-label {
    font-size: 15px;
    line-height: 18px;
  }

  .t-block label {
    font-size: 15px;
    line-height: 18px;
  }

  .z-sign-image {
    gap: 40px;
    padding-inline: 3%;
  }

  .z-sign-image img {
    width: calc(50% - 20px);
    flex-basis: calc(50% - 20px);
    height: auto;
  }

  .gn-info .z-title {
    line-height: 30px;
    font-size: 22px;
  }

  .r-desc {
    font-size: 13px;
    margin-top: 10px;
  }

  .r-dob span {
    font-size: 13px;
  }

  .reading-progress p {
    font-size: 13px;
  }

  .reading-info .z-title {
    font-size: 22px;
    line-height: 30px;
  }

  .predict-info p {
    font-size: 13px;
    line-height: 23px;
  }

  .ts-top-desc p {
    font-size: 13px;
    line-height: 23px;
    margin-top:10px;
  }

  .rel-title p span {
    font-size: 22px;
    line-height: 32px;
  }

  .rs-title {
    font-size: 22px;
    line-height: 30px;
  }

  .rel-title p {
    font-size: 19px;
    line-height: 23px;
  }

  .rels-title {
    font-size: 16px;
    line-height: 23px;
  }

  .rel-desc {
    font-size: 13px;
    line-height: 23px;
  }

  .rel-value {
    font-size: 13px;
  }
  .horoscope-img {
      display: flex;
      flex-direction: column; 
      align-items: center; 
      justify-content: center; 
      margin: 0 auto; 
      float: none; 
  }
  .horoscope-img img {
      max-width: 100%;
      height: auto;
  }
}
@media screen and (max-width: 375px) {
  .test-tab-buttons {
    gap: 15px;
  }
  .next-btn {
    width: 120px;
  }
  .birth, .future {
    gap: 15px;
    flex-direction: column;
  }
  .test-field {
    gap: 15px;
  }
  .hrs-data {
    gap: 15px;
  }

  .gn-name-block {
    width: 100%;
  }

  .reading-wrap {
    padding: 20px 14px;
  }

  .rels-title {
    font-size: 15px;
  }

  .ts-top-row1 {
    padding: 22px 15px 22px 15px;
  }

  .predict-wrap {
    padding: 30px 15px;
  }
  .horoscope-img {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto; 
    float: none; 
}
.horoscope-img img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

}

/* / ====== Dashboard Changes 1 Jan Start===== / */

.menu-close-btn {
  color: #0d2e38;
}

.prevw-chart-container,
.left-col .prevw-chart-container .inner {
  min-height: 325px;
}

.myChart-header {
  margin-top: -15px;
}

.myChart-dash-area {
  margin-top: 25px;
  height: auto;
  padding-bottom: 20px;
}

@media screen and (max-width:991px) {
  .myChart-area .dash-content {
    height: auto;
    margin-top: 20px;
    padding-bottom: 20px;
  }
}

@media screen and (max-width:575px) {
  .myChart-header {
    margin-top: 0;
  }
}

/* / ====== Dashboard Changes 1 Jan End===== / */
.go-to-dashboard{
  display: flex;
  justify-content: end;
  color: #0d2e38;
  font-weight: 700;
  font-size: 20px;
  text-decoration: underline;
  margin-top: -35px;
  margin-bottom: 10px;
}
.myChart-header {
  margin-top: 40px;
}
.chat-wrapper .chat-form  {
  flex-direction: row !important;
}
/* ---Palm scan module css---- */
.bd-radius {
  border-radius: 20px;
}
.user-plm .get-started{
margin-top:20px;
}
.user-plm .chat-form-btn{
  background-color: #00C851;
}
.user-plm .ts-middle{
  margin-top:0px;
}
.user-plm .rel-title,.rel-desc{
  color:white;
}

.user-plm .use-mdl .modal-dialog{
    max-width: 548px;
}

.user-plm  .use-mdl  .tst-cb-fld{
      margin-top:0;
}

@media screen and (max-width:480px) {
  .expert-listings{
    padding-bottom: 60px;
  }
}
@media screen and (max-width:420px) {
.us-blk-sure{
      flex-direction: column;
}

.us-blk-sure .test-checkbox-field {
  padding-left:0;
}
}
/* Astral chart preview css start */
.down-chart-text{
  text-transform: uppercase;
    background: #00993d;
    padding: 11px;
    border-radius: 7px;
    cursor: pointer;
    color: white;
    display: flex;
    max-width: 300px;
    margin-bottom: -15px;
    font-size: 14px;
    display: inline-block;
    text-wrap: nowrap;
}
@media screen and (max-width:480px) {
  .down-chart-text{
    margin-top: 10px;
    margin-bottom: 0;
  }
}
.left-col .prevw-chart-container .inner{
  min-height: 605px;
  height: 100%;
}
.ast-top-txt{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}
.ast-btm-txt{
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
}
.chart-dnl{
  position:relative;
}
.text-trs{
  text-transform: uppercase;
  color: #fcdc48;
  font-weight: 600;
  font-size: 35px;
  text-align: center;
  white-space: nowrap;
}
.top-lst-txt{
    display: inline-block;
    text-align: center;
    width: 100%;
}
.pdf-dow{
  height: 20px;
  width: auto;
  margin-right: 10px;
}
.usr-name{
   text-align: center;
}
.user-loc, .usr-birthdate{
  text-align: center;
  font-size: 12px;
}
.prevw-chart-container .header .chart-download {
  position: absolute;
  right: 29px;
  top: 16px;
}
.ast-dwn-txt{
  position: absolute;
  bottom: 30px;
  left: 50%;
 transform: translateX(-50%);
}
.left-col .prevw-chart-container .inner {
  margin-top: -22px;
}
.down-chart-text:hover{
  background-color: #00C851;
  animation: bounceZoom-trail-pay 1.5s ease-in-out infinite;
}
@media screen and (max-width: 1199px) {
    .prevw-chart-container .chart-prev-box::after {
        background-size: cover;
    }
    .text-trs{
      font-size: 30px;
    }
}
@media screen and (max-width: 1299px) {
    .text-trs{
      font-size: 30px;
    }
}
@media screen and (max-width: 420px) {
    .text-trs {
        font-size: 25px;
    }
}
/* Astral chart preview css end */
/* Best Plce to Live  */

/* Aug 4  2025 start */
.best-place-sec .bspc-wrap{ 
  background-color: var(--primary-clr) !important;
  color: var(--secondary-clr);
  padding: 40px 20px;
  border-radius: 15px;
  max-width: 490px;
  margin-inline: auto;
}


.astro-form .frm-top{
  display: flex;
  gap: 5px;
  justify-content: center;
}

.astro-form .frm-bot .date-fields{
  display:flex;
  gap:5px;
  justify-content: center;
}

.chk-btn{
  margin-top: 20px;
  max-width: 145px;
  margin-inline: auto;
  min-height: 43px;
  min-height: 40px;
  font-size: 18px;
  padding-top: 6px;
}

.astro-form label{
  text-align:center;
  width:100%;
}

.bcpc-bot{
  margin-top: 20px;
}
.bp-title{
  font-family: ppacma-900;
  color: #fff;
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.astro-form .dash-input{
  color: #fff;
  border-color: #ffffff78;
  background: #99c1cc52;
  padding: 0 10px;

}
.astro-form .dash-input:focus{
  box-shadow:none;
}
.bp-name{
  max-width: 150px;
}

.bp-day{
  max-width: 40px;
}
.bp-year{
  max-width: 70px;
}
.bp-form-fld{
  max-width: 264px;
  margin-inline: auto;
}

.astro-form .cmn-select + .select2-container--default .select2-selection--single{
  color: #fff;
  border-color: #ffffff78;
  background: #99c1cc52;
 
}

.astro-form .select2-results__option[aria-selected]{
  color:var(--primary-clr);
}

.astro-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  margin-top: 0;
  margin-left: -9px;
  top: calc(50% - 3px);
  transform: translateY(-50%) rotate(135deg);
  background: transparent;
  border-color: white;
  border-width: 1px 1px 0 0;
  width: 10px;
  height: 10px;
  border-style: solid;
}
.bp-form-fld{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.bp-sub-title{
  font-size: 22px;
  text-align: center;
  font-family: ppacma-900;
  color: #eedb99;
}
.bcpc-bot.step2 .astro-content{
  display: flex;
  flex-direction: column;
  max-width: 380px;
  margin-inline: auto;
}
.bp-para{
  font-size: 13px;
  color: #fff;
  line-height: 17px;
  margin-top:15px;
}
.astro-ln-list{
  display: flex;
  gap: 5px;
  justify-content: space-between;
  margin-top:30px;
}
.ln-wrp{
  font-size: 12px;
  color: #fff;
  font-weight: 500;}
.ln-cnt img{
  width:14px;
  height:14px;
}
.ln-wrp .ln-txt .bold{
font-weight:700;
}

.ln-cnt{
  position:relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ln-cnt::before{
  content: '';
  width: 14px;
  height: 1px;
  background-color: #ffffff;
  display: block;
}
.ln-cnt:not(:last-child){
  margin-bottom:10px;
}
.ln-txt:not(:last-child){
  margin-bottom:10px;
}

#map {
  height: 300px; 
  width: 100%;
  border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #ffffffd4;
}

.map-container {
  position: relative;
  width: 100%;
}


.vertical-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 10;
  transition: left 0.8s ease-in-out;
}

.line1 { left: 10%; background-color: rgb(202, 116, 116); }
.line2 { left: 20%; background-color: rgb(173, 149, 104); }
.line3 { left: 30%; background-color: rgb(174, 174, 137); }
.line4 { left: 40%; background-color: rgb(114, 137, 114); }
.line5 { left: 50%; background-color: rgb(178, 178, 219); }
.line6 { left: 60%; background-color: rgb(140, 98, 173); }
.line7 { left: 70%; background-color: rgb(78, 50, 78); }
.line8 { left: 80%; background-color: rgb(178, 178, 219); }
.line9 { left: 90%; background-color: rgb(140, 98, 173); }
.line10 { left: 12%; background-color: rgb(78, 50, 78); }
.line11 { left: 22%; background-color: rgb(114, 137, 114); }
.line12 { left: 52%; background-color: rgb(143, 32, 32); }
.line13 { left: 62%; background-color: rgb(140, 98, 173); }
.line14 { left: 44%; background-color: rgb(178, 178, 219); }
.line15 { left: 33%; background-color: rgb(140, 98, 173); }
.line16 { left: 76%; background-color: rgb(78, 50, 78); }
.line17 { left: 88%; background-color: rgb(178, 178, 219); }
.line18 { left: 5%; background-color: rgb(140, 98, 173); }
.line19 { left: 65%; background-color: rgb(78, 50, 78); }
.line20 { left: 88%; background-color: rgb(114, 137, 114); }


.custom-info-box {
  position: absolute;
  /* transform: translate(-50%, -100%); */
  transform: translate(-45%, -85%);
  z-index: 20;
  pointer-events: auto;
}

.marker-line {
  transform: rotate(45deg) translate(91px, 111px);
}
.marker-line .marker-ln{
  width: 0;
  height: 31px;
  background: white;
  margin: 0 auto;
  position: relative;
  transition: width 0.6s ease-in-out;
  overflow: visible;
  display:block;
}
.marker-line.active .marker-ln {
  width:1px;
}

.marker-line .marker-point{
  height: 5px;
  width: 5px;
  background-color: #ffffff;
  display: block;
  position: absolute;
  left: 48.5%;
  top: 28px;
  border-radius: 50px;
  transition: width 0.6s ease-in-out;
  opacity:0;
}

.marker-line.active .marker-point{
  opacity: 1;
}

.marker-pulse {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border: 1px solid white;
  border-radius: 50%;
  opacity: 0;
  animation: markerPulse 1.2s ease-out infinite;
  pointer-events: none;
  transition: opacity 0.6s ease-in-out;
}

.marker-line.active .marker-pulse {
  opacity: 1;
}

@keyframes markerPulse {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-50%) scale(1.6);
    opacity: 0.3;
  }
  100% {
    transform: translateX(-50%) scale(2);
    opacity: 0;
  }
}
.marker-loader {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border: 1px solid transparent;
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-radius: 50%;
  opacity: 0;
  animation: spin 1s linear infinite;
  pointer-events: none;
  transition: opacity 0.6s ease-in-out;
}
.marker-line.active .marker-loader {
  opacity: 1;
}
@keyframes spin {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}
.info-card {
  background: #233d4470;
  color: #222222;
  padding: 12px;
  border-radius: 10px;
  width: 174px;
  font-size: 11px;
  text-align: left;
  transform: translate(-110px, 136px);
  backdrop-filter: blur(2px);
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.info-card.visible {
  opacity: 1;
}
.info-card h5{
  font-size:16px;
}
.gmnoprint{display:none;}
.gm-control-active{display:none;}

@keyframes pulseEffect {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.8);
    opacity: 0.4;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
.astro-form .date-picker{
  flex:1 1;
}
.best-place-sec.get-started{
  margin-top: 20px;
  padding-bottom:20px;
}
.best-place-sec .tab-content-box{
  padding-block: 20px;
}
@media screen and (max-width: 991px) {
  .chk-btn{
    padding-top:0;
  }
}
@media screen and (max-width: 767px) {
  .bcpc-bot.step2 .astro-content{
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
  }
  .best-place-sec .tab-content-box{
    padding-inline:12px;
  }
}
@media screen and (max-width: 575px) {
  .best-place-sec .bspc-wrap{
    padding:20px;
  }
  .info-card{
    transform: translate(-25px, 140px);
  }
}
@media screen and (max-width: 480px) {
  .best-place-sec #astro_qa_form .tab-content-box{
    padding-inline: 0;
    padding-block: 10px;
  }
  .astro-ln-list{
    justify-content: left;
    flex-wrap: wrap;
    gap:0;
  }
  .ln-wrp{
    width: 50%;
  }
  .ln-wrp-3{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top:20px;
  }
  .ln-txt{
    gap: 5px;
    width: 50%;
  }
  .bp-title{
    font-size: 20px;
  }
  .info-card h5{
    font-size: 13px;
  }
  .info-card{
    padding: 5px;
  }
  .custom-info-box{
    transform: translate(-45%, -95%);
  }
  .bp-sub-title{
    font-size: 18px;
  }
  .bp-para{
    font-size: 11px;
  }
  .astro-ln-list{
    margin-top: 20px;
  }
  .ln-wrp{
    font-size:10px;
  }
  .marker-loader{
    top: 24px;
    left: 49.5%;
  }
  .ln-cnt::before{
    left: 13px;
  }
}
@media screen and (max-width: 375px) {
  #map {
    height: 258px; 
  }
  .best-place-sec .bspc-wrap {
    padding: 10px;
  }
}
/* Aug 4 2025 end  */
/* Style the wrapper of the InfoWindow */
.gm-style-iw-c {
  padding: 0 !important;
  overflow: visible !important;
}
.gm-style .gm-style-iw-tc{
  display:none;
}
.gm-style-iw-chr{
  display:none !important;
  overflow: hidden !important;
  height:0 !important;
  padding:0 !important;
  width:0 !important;
}
.gm-ui-hover-effect{
  display:none !important;
}
.gm-style .gm-style-iw-tc::after{
  display:none;
}
.gm-style .gm-style-iw-c{
  background-color:transparent;
  box-shadow:none !important;
  border:0 !important;
}
@media screen and (max-width: 767px) {
  .gm-style-iw-chr{
    display:none !important;
  }
}
/* g-new-e */
/* Style your box to be more flexible */
.best-plc-user .tab-pane-questions .tab-content-box{
  padding-block: 60px;
}
.best-plc-user .question-block{
  margin-top: 0px;
}
.best-plc-user .hrs-fields .date-picker {
    max-width: 225px;
}
.best-plc-user .text-block{
  min-width: 475px;
}
.best-plc-user #astro_qa_form .tab-pane.tab-pane-questions{
  margin-top: 10px;
}
.best-plc-user .loading-circle::before{
  left: 50px;
}
.best-plc-user .loading-content{
  left: 60%;
}
.best-plc-user .loading-circle::after {
  left:0px;
}
.best-plc-user .loading-circle .loader-maps {
    left: 45%;
}
@media only screen and (max-width: 1400px) {
    .best-plc-user .date-fields .input-block {
        min-width: 140px;
    }
}
@media only screen and (max-width: 767px) {
    .best-plc-user .text-block {
      min-width: 100%;
    }
    .best-plc-user .date-fields .input-block {
        min-width: 100px;
    }
    .best-plc-user .date-fields {
      max-width: 460px;
      width: 100%;
    }
}
@media only screen and (max-width: 480px) {
    .best-plc-user .question-block .trigger-next{
      margin-top: 0px;
    }
    .best-plc-user .inner-area{
    padding-top: 0px;
  }
}
@media only screen and (max-width: 420px) {
    .best-plc-user .date-fields .input-block {
        min-width: 76px;
    }
}

/* dream meaning start */
.d-men-user{
  margin-top: 0px;
}
.d-men-user .hrs-fields .date-picker {
    max-width: 215px;
}
.d-men-user .text-block {
    max-width: 455px;
}
.d-men-user .name-block {
    max-width: 100%;
}
.d-result-user .dream-card-4{
  display: none;
}
.d-result-user .sidemenu-btn{
  margin-left: 20px;
}
@media only screen and (max-width: 1199px) {
  .d-result-user .grid-2{
    display: flex;
    flex-direction:column;
  }

  .d-result-user .left-wrapper .dream-card{
    width:100%
  }

  .d-result-user .ele-mood .box{
    width:100%;
  }
  .d-result-user .left-wrapper{
    gap:20px;
  }
  
}
@media only screen and (max-width: 767px) {
  .d-result-user .main-step-box{
    padding: 20px;
  }
}
@media only screen and (max-width: 575px) {
  .d-men-user .date-fields .input-block {
    min-width: auto;
    width: 100%;
  }
  .d-men-user .text-block {
      width: 100%;
      min-width: auto;
  }
}
@media only screen and (max-width: 420px) {
  .d-men-user .date-fields .input-block {
    min-width: auto;
    width: 100%;
  }
  .d-men-user .text-block {
     min-width: 30px;
    width: 100%;
  }
}

/* New Chat Page Start */
/* Tokens container */

.dashchat-sec .dash-header h2{
  font-family: 'ppacma-900';
}

.new-chat-tokens {
  position: absolute; /* place it in top-right */
  right: 40px;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: normal;
  font-size: 18px;
  color: #EEDB99; /* gold */
  gap: 6px;
  z-index: 10;
  font-family: Roboto;
}

/* Coin icon */
.new-chat-token-icon {
  font-size: 16px;
  line-height: 1;
}

/* Responsive: Mobile view */
@media (max-width: 768px) {
  .new-chat-tokens {
    padding: 4px 8px;
    font-size: 13px;
  }
}

.new-chat-psychic-of-day {
  width: 100%;
  margin-top:24px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.new-chat-psychic-card {
  background: #277A91;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
}

.new-chat-psychic-header {
  background: #277A91;
  color: #fff;
  font-weight: 600;
  padding: 11px 20px 9px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.new-chat-psychic-header .new-chat-header-icon {
  margin-right: 6px;
}

.new-chat-psychic-body {
  display: flex;
  align-items: start;
  padding: 18px 14px 20px;
  gap: 15px;
  border-radius: 20px;
  background: #99C1CC;
}

.new-chat-profile-pic {
  position: relative;
  flex-shrink: 0;
}
.new-chat-profile-pic img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #0D2E38;
}
.new-chat-status-dot {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
  background: #00ff4c;
  border: 2px solid #fff;
  border-radius: 50%;
}

.new-chat-psychic-info {
  flex: 1;
}

.new-chat-psychic-info .new-chat-name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

.new-chat-psychic-info .new-chat-title {
  margin: 5px 0 7px;
  font-size: 14px;
  color: #333;
}

.new-chat-tags-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content:space-between;
  font-size: 13px;
}

.new-chat-tags-stats-left{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.new-chat-tags-stats-left .tag{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.new-chat-tags-stats-left .stat{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top:0;
}

.new-chat-tag {
  background: #d9e8e6;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 700;
  color: #222222;
  min-height: 28px;
}
.new-chat-stat {
  display: flex;
  align-items: center;
  color: #042c2c;
  gap: 10px;
  font-weight: 700;
}

.new-chat-stat-rating{
  display: flex;
  align-items: center;
  background-color: #277A91;
  min-width: 61px;
  gap: 5px;
  color: #EFCB4D;
  height: 24px;
  justify-content: center;
  border-radius: 20px;
}

.new-chat-stat::before{
  content:"";
  width:5px;
  height:5px;
  display:block;
  background-color:#6B98A4;
  border-radius:50px;
  margin-right: 2px;

}
.new-chat-stat i {
  margin-right: 4px;
}

.new-chat-psychic-actions {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.new-chat-chat-btn {
  background: #00c853;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: bold;
}
.new-chat-free-minutes {
  font-size: 12px;
  color: #000000E5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

/* Common Card Section Styles MOST ACCURATE VOTED and RECOMMENDED FOR YOU Section*/
.card-section {
  padding: 40px 0 0 0;
}

.card-section .new-chat-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-section .new-chat-section-title {
  font-size: 20px;
  letter-spacing: 1px;
  color: #cdd7d7;
  font-weight: 700;
  text-transform: uppercase;
}

.card-section .new-chat-view-all {
  background: none;
  border: none;
  color: #cdd7d7;
  font-size: 14px;
  cursor: pointer;
}

/* Card wrapper: horizontal scroll */
.card-section .new-chat-card-wrapper {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-behavior: smooth;
  cursor: grab;
  -webkit-user-select: text;
}

.card-section .new-chat-card-wrapper.dragging {
  cursor: grabbing;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.card-section .new-chat-card-wrapper::-webkit-scrollbar {
  display: none;
}
.card-section .new-chat-card-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Card */
.card-section .new-chat-card {
  flex: 0 0 calc(100% / 3.5);
  min-width: calc(100% / 3.5);
  background: #132836;
  border-radius: 14px;
  padding: 18px;
}

/* Card Header */
.card-section .new-chat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.card-section .new-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1f3d4d;
  position: relative;
}

.card-section .new-chat-status-dot {
  width: 10px;
  height: 10px;
  background: #00ff9d;
  border: 2px solid #132836;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.card-section .new-chat-info {
  flex: 1;
  margin-left: 10px;
}
.card-section .new-chat-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.card-section .new-chat-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #89C4D9;
}

/* Tags */
.card-section .new-chat-tags {
  margin: 10px 0;
}
.card-section .new-chat-tags span {
  display: inline-block;
  background: #FFFFFF33;
  color: #FFFFFF;
  font-size: 11px;
  padding: 5px 13px;
  margin: 2px;
  border-radius: 32px;
}

/* Meta */
.card-section .new-chat-meta {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #bbb;
  margin-top: 6px;
  gap:16px;
}

.card-section .new-chat-rating {
  background: #277A91;
  color: #ffcc00;
  font-size: 12px;
  padding: 2px 6px 1px;
  min-width: 61px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  gap: 5px;
}

/* Reviews */
.card-section .new-chat-reviews {
  font-size: 12px;
  color: #ffffff;
  margin: 6px 0;
}

/* Description */
.card-section .new-chat-description {
  font-size: 13px;
  color: #B0D4E0;
  line-height: 1.4;
  margin: 10px 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA Button */
.card-section .new-chat-free-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #00C65D;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0px 1px 4px 0px #00000026;
  transition: 0.3s;
  color: #FFFFFF;
  font-size: 14px;
  border-radius: 24px;
  height: 40px;
  margin-top:auto !important;
}
.card-section .new-chat-free-btn:hover {
  background: #00c65dcf;
}

/* Grid view when View All pressed */
.card-section .new-chat-card-wrapper.new-chat-grid-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  overflow: visible;
}
.card-section .new-chat-card-wrapper.new-chat-grid-view .new-chat-card {
  flex: initial;
  min-width: initial;
}

.card-section .new-chat-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(100% / 3.5);
  min-width: calc(100% / 3.5);
  background: #132836;
  border-radius: 14px;
  padding: 18px;
  border: 1px solid #FFFFFF1A;
  background: #FFFFFF0D;
}

.card-section .new-chat-free-btn {
    margin-top: auto; /* Ensures button is always at the bottom */
}

.card-section .new-chat-avatar {
    width: 40px;
    height: 40px;     
    position: relative;
}

.card-section .new-chat-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;       /* ensures image covers entire circle */
}

.card-section .new-chat-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #132836;
    position: absolute;
    bottom: 0;
    right: 0;
}

.card-section .new-chat-status-dot.online  { background: #00ff9d; }  /* green */
.card-section .new-chat-status-dot.busy    { background: #ffcc00; }  /* yellow */
.card-section .new-chat-status-dot.offline { background: #888888; }  /* gray */

/* Overlay blur effect */
.welcome-info-overlay {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(8px);
  background: #FFFFFF1A;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Show popup */
.welcome-info-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Popup container */
.welcome-info-popup {
  background: linear-gradient(0deg, #558D9E, #558D9E), linear-gradient(0deg, rgba(25, 56, 66, 0.2), rgba(25, 56, 66, 0.2));
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  width: 360px;
  position: relative;
  animation: scaleUp 0.25s ease;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #ffffff;
  box-shadow: 0px 10px 20px 0px #00000066;
}

/* Close button */
.welcome-info-close {
  position: absolute;
  right: 16px;
  top: 10px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
  transition: color 0.2s;
}
.welcome-info-close:hover {
  color: #fff;
}

/* Header layout */
.welcome-info-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 15px;
}

.welcome-info-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.welcome-info-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.welcome-info-role {
  margin: 0;
  color: #89C4D9;
  font-size: 12px;
}

.welcome-info-rating {
  font-size: 14px;
  color: #ffcc4d;
  margin-top: 4px;
  background-color: #00000033;
  height: 24px;
  min-width: 61px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

/* Tag buttons */
.welcome-info-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.welcome-info-tags span {
  background: #FFFFFF33;
  padding: 6px 12px;
  border-radius: 32px;
  font-size: 12px;
  color: #FFFFFF;
}

/* Meta info */
.welcome-info-meta {
  font-size: 13px;
  color: #ffffff;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.welcome-info-meta p {
  margin: 2px 0;
  display: flex;
  align-items: center;
  font-weight:700;
}

.welcome-info-meta p {
  font-weight:400;
}

.welcome-info-meta img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7475%) hue-rotate(66deg) brightness(108%) contrast(98%);
  margin-right:10px;
}

/* Bio text */
.welcome-info-bio {
  font-size: 13px;
  color: #B0D4E0;
  margin-bottom: 17px;
  line-height: 20.5px;
  text-align:center;
}

.welcome-divide{
  width:100%;
  display:block;
  height:1px;
  background-color:#FFFFFF33;
  margin-bottom:19px;
}

/* Message box */
.welcome-info-message {
  background: #00000033;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12px;
  color: #d2e6f2;
  line-height: 17px;
  margin-bottom: 16px;
}

/* Button */
.welcome-info-btn {
  background: #00C65D;
  color: #ffffff;
  border: none;
  font-weight: 600;
  border-radius: 25px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 15px;
  width: 153px;
  margin-inline: auto;
  display: flex;
  justify-content:center;
  align-items:center;
  box-shadow: 0px 1px 4px 0px #00000026;
}
.welcome-info-btn:hover {
  background: #00c65dcf;;
}

/* Animation */
@keyframes scaleUp {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Avatar wrapper for positioning the status badge */
.welcome-info-avatar-wrapper {
  position: relative;
  display: inline-block;
}

.welcome-info-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Status badge (online/offline indicator) */
.welcome-info-status-badge {
  position: absolute;
  bottom: 2px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #183243; /* match popup bg for clean edge */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.welcome-info-status-badge.online {
  background-color: #28c76f; /* bright green */
  box-shadow: 0 0 6px rgba(40, 199, 111, 0.7);
}

.welcome-info-status-badge.offline {
  background-color: #6c757d; /* grayish tone */
  box-shadow: none;
}




.chat-tabs-container {
  width: 100%;
  background: #0f1419;
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.chat-tabs {
  display: flex;
  border-bottom: 1px solid #1f2a33;
  background: #18222b;
}

.chat-tab {
  flex: 1;
  padding: 12px 0;
  font-weight: 600;
  text-align: center;
  background: transparent;
  border: none;
  color: #9da9b5;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-tab.active {
  color: #fff;
  background: #24303a;
  border-bottom: 3px solid #00d084;
}

.chat-section {
  display: block;
  padding: 20px;
}

.chat-section.hidden {
  display: none;
}

/* Chat Layout */
.chat-wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  background: #141b22;
  border-radius: 12px;
  padding: 20px;
}

.new-chat-wrapper{
  border: 1px solid #ffffff;
  background: transparent;
  padding:0;
  gap:0;
}

.chat-astro-info{
  border-top-left-radius: 12px;
  padding: 11px 20px 9px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.chat-astro-image{
  width: 45px;
  height: 45px;
}

.chat-astro-image img{
  border: 1px solid #ffffff;
}

.chat-info .chat-astro-name{
  margin-top:0;
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 100%;
}

 .chat-astro-status-chk  {
  position:relative;
}  

.chat-astro-status-chk::before{
  content: "";
  position: absolute;
  top: 8px;
  left: 4px;
  background-color: #8BF123;
  border: 1px solid #ffffff;
  border-radius: 50px;
  width: 10px;
  height: 10px;
}  

.chat-astro-status-chk.offline::before{
  background-color:  #6c757d;
}

.chat-astro-status-chk span{
  margin-left: 17px;
  font-size: 13px;
}

/* Messages */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 60vh;
  justify-content: end;
  background: linear-gradient(0deg, #558D9E, #558D9E), linear-gradient(0deg, rgba(25, 56, 66, 0.2), rgba(25, 56, 66, 0.2));
  position: relative;
}
.chat-message-inner{
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 481px;
  overflow-y: auto;
  padding: 20px 7px 16px 20px;
  
}

.chat-text-wrap .chat-date{
  font-size: 13px;
  margin-top: 4px;
  display: flex;
}

.chat-bubble.user .chat-text-wrap .chat-date{
      justify-content: end;
}
 
.chat-bubble.astro.blur  .chat-text-wrap .chat-date{
  margin-top:10px;
}


.chat-message-inner::-webkit-scrollbar-track {
  background: #FFFFFFB2;
  border-radius:50px;

}

.chat-message-inner::-webkit-scrollbar-thumb{
  background: #FFFFFF;
}

.chat-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 80%;
}

.chat-bubble.astro {
  align-self: flex-start;
}

.chat-bubble.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-text {
  background: #E3E3E3;
  border-radius: 16px;
  padding: 6px 10px;
  color: #282828;
  font-size: 15px;
  line-height: 21px;
}

.chat-bubble.user .chat-text {
  background: #EEDB99;
    color: #282828;
}

.chat-message-review{
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #FFFFFF1A;
  padding-top: 20px;
}

.chat-message-review img{
  width:40px;
  height:40px;
  border:1px solid #ffffff;
  border-radius:50px;
  margin-bottom:6px;
}

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

.chat-message-review p{
  margin-bottom:14px;
}

/* Sidebar */
.chat-sidebar {
  background: #133E4B;
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
  padding: 16px;
}

.chat-astro-avatar-wrapper {
  position: relative;
  margin: 0 auto;
  display: flex;
  gap: 12px;
}

.chat-astro-img{
  width:56px;
  height:56px;
  position: relative;
}

.chat-astro-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.chat-astro-status {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

.chat-astro-status.online {
  background: #28c76f;
  box-shadow: 0 0 8px rgba(40, 199, 111, 0.8);
}

.chat-astro-status.offline {
  background: #6c757d;
}

.chat-astro-name {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
}

.chat-astro-role {
  font-size: 12px;
  color: #89C4D9;
}

.chat-astro-rating{
  margin-top: 4px;
  color: #cfd8e3;
  background: #00000033;
  min-width: 61px;
  height: 24px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #EFCB4D;
  font-size: 12px;
  gap: 2px;
}

.chat-astro-exp, .chat-astro-review {
  font-size: 13px;
  margin-top: 4px;
  color: #ffffff;
  display:flex;
  gap:5px;
  align-items:center;
}

.chat-astro-exp img, .chat-astro-review img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7475%) hue-rotate(47deg) brightness(118%) contrast(98%);
}

.chat-astro-about {
  margin-top: 10px;
  font-size: 13px;
  line-height:20.8px;
  color: #B0D4E0;
}

.chat-tags {
  margin-top: 12px;
  margin-bottom:13px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chat-astro-out{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.chat-tag {
  background: #FFFFFF33;
  border-radius: 32px;
  padding: 5px 13px;
  font-size: 12px;
  display: inline-block;
  color: #ffffff;
}

/* Input Bar */
.chat-input-bar {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  margin-top: 0;
  padding: 8px 12px;
  color: #222222;
  border-bottom-left-radius: 10px;
}

.chat-num{
  font-family: Roboto;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #666666;
  margin-right: 20px;
}

.chat-bubble.astro.blur .chat-text{
  position:relative;
}
.chat-bubble.astro.blur .chat-text::after{
  content: "";
  position: absolute;
  backdrop-filter: blur(2px);
  background: #FFFFFF1A;
  width: 100%;
  border-radius: 16px;
  height: calc(100% + 17px);
  transform: scale(1.03);
  left: 0;
  top: -9px;
}

.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #222222;
  font-size: 16px;
  outline: none;
}

.chat-input::placeholder{
 color:#222222;
}

.chat-send-btn {
  background: #0D2E38;
  border: none;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition:0.3s ease-in-out;
}

.chat-send-btn:hover,.chat-send-btn:disabled {
  background: linear-gradient(0deg, #558D9E, #558D9E), linear-gradient(0deg, rgba(25, 56, 66, 0.2), rgba(25, 56, 66, 0.2));
}

#astral-chat{
  padding: 20px 0 0 0;
}

.dashchat-sec .dash-head-subPara{
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
}

.dashchat-sec .dash-head-subPara:not(:last-of-type) {
  margin-bottom: 8px;
  color: #99C1CC;
}

.dashchat-sec .chat-dash-area{
  font-family:'Roboto';
}

.dashchat-sec  .chatTab-nav .nav-link{
  min-height: 48px;
  font-size: 16px;
}

 .new-chat-heart{
  color: #057E9F;
  background-color: #FFFFFF1A;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
}

.new-chat-heart.active{
  color:#ffffff;
}

.new-chat-psychic-info-right {
  display: flex;
  align-items: center;
  gap: 13px;
}

.new-chat-psychic-info-right .start-chat{
  margin-top:0;
}

.new-chat-psychic-action{
  display: flex;
  justify-content: space-between;
}

.choose-your-psychic{
  margin-top:20px;
}

.choose-your-psychic h2{
  font-family: Roboto;
  font-weight: 600;
  font-size: 20px;
}

.choose-your-psychic p{
  background: linear-gradient(91.8deg, rgba(153, 193, 204, 0.2) 0%, rgba(59, 145, 169, 0.2) 100%);
  padding: 8px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  margin-top: 15px;
}

.new-chat-card .new-chat-icon img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7463%) hue-rotate(283deg) brightness(100%) contrast(104%);
}

.new-chat-card  .new-chat-reviews img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7463%) hue-rotate(283deg) brightness(100%) contrast(104%);
}


.new-chat-meta .new-chat-icon, .new-chat-reviews{
  display: flex;
  gap: 10px;
  align-items: center;
  color:#ffffff;
}

.card-section .new-chat-free-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
 
}

.card-section .new-chat-free-btn img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(240deg) brightness(102%) contrast(102%);
}

.recom-text{
  font-family: Roboto;
  font-weight: 300;
  font-style: Light;
  font-size: 15px;
  line-height: 20px;
  color:#FFFFFF;
  margin-bottom:20px;

}

.new-chat-chat-btn.start-chat.mob{
  display:none;
}

.new-chat-profile-pic.mob{
  display:none;
}

.token-btn{
  position: absolute;
  background-color: #497C8C;
  z-index: 1;
  height: 40px;
  border-radius: 40px;
  padding: 10px 23px;
  color: #ffffff;
  font-size: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-wrap:nowrap;
}

/* Token Refill Modal  */

.token-refill .modal-content{
  border: 1px solid #FFFFFF;
  border-radius: 20px;
  max-width: 460px;
  margin-inline: auto;
  background: #497C8C;
  box-shadow: 0px 10px 20px 0px #00000066;  
}

.token-refill .modal-header{
  border:0 !important;
  padding: 15px;
}

.token-refill .modal-body{
  border:0 !important;
  padding: 15px;
  padding-top:0;
}

.refill-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top: -20px;
}

.refill-top span{
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(140.19deg, #19BBC8 10.66%, #0A948E 91.32%);
}

.token-refill .modal-title{
  font-family: Roboto;
  font-weight: 700;
  font-size: 24px;
  line-height: 18px;
  text-align:center;
}

.refill-text{
  font-family: Roboto;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  max-width: 370px;
  letter-spacing: 0%;
  margin-top: 0;
  text-align:center;
}

.token-refill-info{
  margin-top: 16px;
  margin-bottom: 12px;
}

.token-refill-info ul{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.token-refill-info ul li{
  background: #50899A;
  padding: 15px 18px 13px 24px;
  border-radius: 16px;
  position:relative;
  transition:all 0.3s ease-in-out;
}

.token-refill-info ul li:hover::after{
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  width: 4px;
  height: 64px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background: linear-gradient(180deg, #17C0B0 0%, #37ACBB 100%);
}

.token-refill-info ul li:hover{
  background: #719FAD99;
  box-shadow: 0px 10px 20px 0px #0000004D;
}

.credit-plan{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.credit{
  font-family: Roboto;
  font-weight: 500;
  font-size: 20px;
  line-height: 38.82px;
  letter-spacing: 0%;
  display: flex;
  gap: 20px;
  align-items: center;
}

.credit-img{
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(140.19deg, #19BBC8 10.66%, #0A948E 91.32%);
  border-radius: 12px;
}

.token-refill-info ul li:nth-child(3) .credit-img {
  background: linear-gradient(140.19deg, #17AF9A 10.66%, #0F9B70 91.32%);
}
.plan{
  font-family: Roboto;
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: -6%;
}

.best-value{
  margin-top: 15px;
}

.best-value div{
  position:relative;
}

.bvr {
  font-family: Roboto;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 12px;
  letter-spacing: 0%;
  color: #12323C;
  padding: 3px 12px;
  border-radius: 40px;
  position: absolute;
  top: -8px;
  right: 15px;
  background: linear-gradient(272.98deg, #DF9D1A 6.4%, #FFC600 103.14%);
}

.ppacma{
  font-family: "ppacma-900";
}

.comman-grn-btn{
  background: #00C65D;
  color: #ffffff;
  border: none;
  font-weight: 600;
  border-radius: 16px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 18px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 1px 4px 0px #00000026;
  height: 60px;
}

.comman-grn-btn:hover{
  background: #00c65dcf;
}

.chat-message-review.hide{
  display:none;
}

.chat-input-bar.disabled{
  opacity: 0.5;
  pointer-events: none;
  background: #ffffff;
}

.token-refill .btn-close{
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
  padding: 0 !important;
  opacity: 1;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  display: flex;
  background-color: #FFFFFF1A;
  align-items: center;
  justify-content: center;
  background-size: 10px;
}

.chat-input-bar.enable {
  opacity: 1;
  pointer-events: auto;
}

/* Base styling for the token refill plans */
.token-refill-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.token-refill-info ul li {
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* On hover — yellow border */

/* When selected (clicked) — persistent yellow border */
.token-refill-info ul li.active {
background: #719FAD99;
box-shadow: 0px 10px 20px 0px #0000004D;
}

.token-refill-info ul li.active::after {
content: "";
position: absolute;
left: -1px;
top: 6px;
width: 4px;
height: 64px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
background: linear-gradient(180deg, #17C0B0 0%, #37ACBB 100%);
}


@media screen and (min-width:1400px) {

.new-chat-psychic-body{
  align-items:center;
}
}

@media screen and (max-width:1199px) {
.card-section .new-chat-card{
  flex: 0 0 calc(100% / 2.5);
  min-width: calc(100% / 2.5);
 }

 .card-section .new-chat-card-wrapper.new-chat-grid-view {
  grid-template-columns: repeat(2, 1fr);
 }
}

@media screen and (max-width:767px) {
  .dashchat-sec .dash-head-subPara{
    font-size: 16px;
  }

  .dashchat-sec .chatTab-nav .nav-link {
    min-height: 40px;
    font-size: 14px;
  }

  .new-chat-wrapper{
    grid-template-columns: 1fr 250px;
  }

  .token-hide-mob{
    display:none;
  }

  .token-refill .modal-title {
    font-size: 20px;
    line-height: 18px;
  }
  
  .refill-text {
    font-size: 14px;
    line-height: 18px;
    max-width: 370px;
  }

  .token-refill-info ul li {
    padding: 12px 18px 9px 24px;
  }

  .credit {
    font-size: 18px;
    line-height: 38.82px;
  }

  .plan {
    font-size: 22px;
  }

  .best-value {
    margin-top: 12px;
  }

  .comman-grn-btn{
    height:60px;
  }

  .token-refill-info ul li {
    padding: 12px;
  }

  .token-refill-info ul li:hover::after {
    height: 57px;
  }

  .token-refill-info ul li.active::after {
    height: 57px;
  }
    

  .credit-img{
    width: 45px;
    height: 45px;
  }

  .credit-img img{
    width: 27px;
    height: 27px;
  }

  .refill-top span{
    width: 45px;
    height: 45px;
  }


  .refill-top span img{
    width: 27px;
    height: 27px;
  }
}

  @media screen and (max-width:575px) {
    .card-section .new-chat-card {
      flex: 0 0 calc(100% / 1.5);
      min-width: calc(100% / 1.5);
    }

    .chat-sidebar{
      display: none;
    }

    .new-chat-wrapper {
      grid-template-columns: 1fr;
  }

  .chat-input-bar {
    border-bottom-right-radius: 10px;
}
  }


  @media screen and (max-width:480px) {
    .new-chat-tags-stats-left .stat .new-chat-stat{
      width: calc(100% / 2 - (1* 10px) / 2);
    }

    .new-chat-stat::before{
      display:none;
    }

    .new-chat-tags-stats-left .stat .new-chat-stat:nth-of-type(2){
      order:2;
    }
    .new-chat-chat-btn.start-chat.mob{
      display:block;
    }
    .new-chat-chat-btn.start-chat.dsk{
      display:none;
    }

    .new-chat-tags-stats{
      flex-direction:column;
    }

    .new-chat-profile-pic.dsk{
      display:none;
    }

    .new-chat-profile-pic.mob{
      display:block;
    }

    .new-chat-psychic-action{
      display: flex;
      justify-content: left;
      gap: 10px;
      align-items: center;
      margin-bottom:15px;
    }

    .new-chat-psychic-info .new-chat-name{
      font-size:14px;
    }

    .new-chat-psychic-info .new-chat-title{
      font-size:12px;
    }

    .new-chat-psychic-info-right{
      margin-left:auto;
    }

    .new-chat-heart{
      height:37px;
      width:37px;
    }

    .new-chat-tag {
      font-size: 11px;
      min-height: 26px;
      background: #FFFFFF33;
  }

  .new-chat-tags-stats-left .stat img{
    width:18px;
  }

  .new-chat-tags-stats{
    font-size:12px;
  }

  
  .new-chat-tags-stats-left .stat {
    gap: 6px;
  }

  .new-chat-psychic-body {
    padding: 18px 20px 20px;
  }

  .new-chat-chat-btn.start-chat.mob{
    margin-top: 0;
    width: 100%;
    height: 37px;

  }

  .choose-your-psychic h2{
    font-size: 12px;
  }

  .choose-your-psychic p{
    padding: 6px 16px;
    font-size: 10px;
    gap: 6px;
    margin-top: 8px;
  }

  .choose-your-psychic p img{
    width:12px;
    height:12px;
  }

  .card-section{
    padding: 20px 0 0 0;
  }

  .card-section .new-chat-section-title {
    font-size: 12px;
  }

  .card-section .new-chat-view-all{
    font-size: 10px;
  }

  .card-section .new-chat-card-wrapper.new-chat-grid-view {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .card-section .new-chat-name{
    font-size: 14px;
  }

  .card-section .new-chat-sub {
    font-size: 11px;
  }  

  .card-section .new-chat-meta{
    font-size: 12px;
  }
  .card-section .new-chat-description {
    font-size: 12px;
  }
  .card-section .new-chat-section-header{
    margin-bottom: 4px;
  }
  .recom-text {
    font-size: 10px;
    margin-bottom: 12px;
  }

  .dashchat-sec .chatTab-nav .nav-link {
    min-height: 29px;
    font-size: 10px;
  }

  .chatTab-nav {
    gap: 7px;
  }

  .welcome-info-name {
    font-size: 13px;
  }

  .welcome-info-role {
    font-size: 11px;
  }

  .welcome-info-rating{
    font-size: 12px;
  }

  .welcome-info-tags span {
    padding: 5px 12px;
    font-size: 10px;
  }

  .welcome-info-meta img{
    width:17px;
  }

  .welcome-info-meta{
    font-size: 11px;
  }

  .welcome-info-bio {
    font-size: 11px;
    line-height: 18px;
  }

  .welcome-info-message {
    padding: 8px 14px;
    font-size: 11px;
    color: #d2e6f2;
    line-height: 14px;
  }

  .welcome-info-btn {
    padding: 10px 20px;
    font-size: 12px;
  }

  .welcome-info-header{
    margin-bottom:13px;
  }

  .welcome-info-header{
    margin-bottom: 12px;
  }

  .welcome-info-bio {
    margin-bottom: 15px;
  }

  .welcome-divide {
    margin-bottom: 15px;
  }

  .welcome-info-message {
    margin-bottom: 13px;
  }

  .welcome-info-overlay{
    padding-inline: 10px;
  }

  .new-chat-wrapper {
    border: 0;
    box-shadow: 0px 10px 20px 0px #00000066;
    border: 1px solid #ffffff;
  }

  .chat-text {
    font-size: 12px;
    line-height: 21px;
    padding: 4px 10px;
  }

  .chat-text-wrap .chat-date {
    font-size: 10px;
    margin-top: 3px;
  }

  .chat-num {
    font-size: 12px;
  }

  .chat-input {
    font-size: 12px;
  }

  .chat-send-btn {
    width: 30px;
    height: 30px;
  }

  .chat-send-btn img{
    width: 14px;
  }

  .card-section .new-chat-free-btn {
    height: 37px;
    font-size: 13px;
  }

  .token-btn {
    font-size:12px;
    height:30px;
    padding: 5px 17px;
  }

  .chat-message-review {
    padding-top: 16px;
  }

  .review-inner {
    margin-bottom: 16px;
  }

  .chat-message-inner{
    gap: 10px;
  }

  .chat-message-review p {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .chat-avatar {
    width: 36px;
    height: 36px;
  }

  .token-refill .modal-content {
    max-width: 100%;
  }

  /* .token-refill .modal-dialog{
    padding: 0 !important;
    margin-inline: 0;
    margin-bottom: -22px;
    align-items:end;
  } */

  .token-refill .modal-title {
    font-size: 16px;
    line-height: 18px;
  }
  .refill-text {
    font-size: 12px;
    line-height: 15px;
    max-width: 100%;
  }

  .refill-top {
    gap:7px;
  }

  .plan {
    font-size: 18px;
  }

  .credit {
    font-size: 16px;
    line-height: 38.82px;
  }

  .token-refill-info ul {
    gap: 5px;
 }

  .new-chat-tokens {
    right: 20px;
  }

  .bvr {
    font-size: 10px;
  }

  .comman-grn-btn{
    font-size:14px;
    height:45px;
  }

  .token-refill-info ul li {
    padding: 8px;
  }

  .token-refill-info ul li:hover::after {
    height: 43px;
  }


  .token-refill-info ul li.active::after {
   height: 43px;
  }

  .credit {
    gap: 8px;
  }

  .credit-img {
    width: 38px;
    height: 38px;
  }  

  .credit-img img {
    width: 20px;
    height: 20px;
  }

  .refill-top span {
    width: 38px;
    height: 38px;
  }
  .refill-top span img{
    width: 20px;
    height: 20px;
  }

  .token-refill .modal-header {
    padding-top: 20px;
  }

  .token-refill .btn-close {  
    height: 20px;
    width: 20px;
    background-size: 8px;
  }

}

@media screen and (max-width:375px) {
  .new-chat-tokens {
    padding: 40px 0;
    font-size: 13px;
  }

  .dashchat-sec .chatTab-nav .nav-item{
    margin-bottom: 17px;
  }
}

#chat_form_new {
  margin-bottom: 0 !important;
}


.chat-message-review .review-star span {
    cursor: pointer;
    font-size: 22px;
    color: #ccc;
    transition: color 0.3s ease;
}
.chat-message-review .review-star span.active {
    color: #FFD700; /* gold star */
}
.chat-message-review {
    display: none;
    text-align: center;
    padding: 15px 0;
}

.comman-grn-btn:disabled,
.welcome-info-btn.disabled 
{
    background-color: #979a99 !important;
    color: #f2f2f2;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Prevent color change on hover/focus/active when disabled */
.comman-grn-btn.disabled:hover,
.comman-grn-btn.disabled:focus,
.comman-grn-btn.disabled:active,
.comman-grn-btn:disabled:hover,
.comman-grn-btn:disabled:focus,
.comman-grn-btn:disabled:active
.welcome-info-btn.disabled:hover,
.welcome-info-btn.disabled:focus,
.welcome-info-btn.disabled:active,
.welcome-info-btn:disabled:hover,
.welcome-info-btn:disabled:focus,
.welcome-info-btn:disabled:active
{
    background-color: #979a99 !important;
    color: #f2f2f2;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Title */
.swal2-title-responsive {
    font-size: 1.1rem;
    word-break: break-word;
}

/* Text / HTML content */
.swal2-html-container-responsive {
    font-size: 0.95rem;
    line-height: 1.4;
    word-break: break-word;
}

/* Buttons */
.swal2-confirm, .swal2-cancel {
    font-size: 0.9rem;
    padding: 0.5em 1em;
}

@media (max-width: 480px) {
    .swal2-title-responsive {
        font-size: 1rem;
    }
    .swal2-html-container-responsive {
        font-size: 0.85rem;
    }
    .swal2-confirm, .swal2-cancel {
        font-size: 0.8rem;
        padding: 0.4em 0.8em;
    }
}

/* SweetAlert responsive adjustments */
@media (max-width: 480px) {
    .swal2-popup {
        width: 90% !important;  /* make popup smaller */
        padding: 1.2em !important;
    }

    .swal2-title {
        font-size: 1.1rem !important;  /* slightly smaller title */
    }

    .swal2-html-container {
        font-size: 0.9rem !important;  /* smaller text */
        line-height: 1.4;
        word-break: break-word;
    }

    .swal2-actions .swal2-confirm,
    .swal2-actions .swal2-cancel {
        font-size: 0.85rem !important;  /* smaller buttons */
        padding: 0.4em 0.8em !important;
    }
}

#payment_new_model .hide-mobile {
    text-align: center;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#payment_new_model .pay-right-col .right-col {
    padding: 0 0 20px 24px;
}

#payment_new_model .right-cht {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 0;
}

#payment_new_model .genpay-top {
    margin-top: 5px;
}

#payment_new_model .pay-form-box h3 {
    width: 100%;
    color: #000;
    margin: 17px 0 11px;
}

#payment_new_model .total-payout-box {
    color: #000;
}

#payment_new_model .total-payout-box {
    margin-top: 18px;
    font-family: "ppacma-900";
    font-size: 25px;
    line-height: 34px;
    display: flex;
    justify-content: space-between;
}

#payment_new_model .close{
    float: right;
    font-size: xx-large;
    font-weight: 700;
    line-height: 0.8;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
}

/* Themed welcome bar */
.chat-welcome-bar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #ffd37b 0%, #ff9f68 100%);
    color: #2d2d2d;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 6px;
    text-align: center;
    max-width: 85%;
    width: auto;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    opacity: 0;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: fadeSlideIn 0.5s ease forwards;
}

/* smoother and shorter animations */
@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes fadeSlideOut {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
}
/* New Chat Page End */

/* Your chart explian section */
.explain-card{
  background-color: #19414d;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--secondary-clr);
  height:100%;
  transition:all 0.2s ease-in-out;
}

.explain-card:hover{
  box-shadow: 0 0px 30px 15px rgba(255, 255, 255, 0.1), 0 4px 16px rgba(8, 48, 31, 0.5);
}

.explain-image{
    width:100%;
    height: 350px;
}

.explain-image img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.explain-content{
  padding: 10px 20px;
}

.explain-title span{
  background-color: #6460529c;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.explain-card:hover .explain-title span {
  background-color: transparent;
}


.explain-title span img{
  filter: brightness(0) saturate(100%) invert(92%) sepia(4%) saturate(3258%) hue-rotate(348deg) brightness(96%) contrast(96%);
  width: 20px;
  height: 20px;
  transition: all 0.2s ease-in-out;
}

.explain-card:hover  .explain-title span img{
  filter: brightness(0) saturate(100%) invert(99%) sepia(4%) saturate(201%) hue-rotate(278deg) brightness(116%) contrast(100%);
}



.explain-title{
  display: flex;
  align-items: center;
  gap: 10px;
}

.explain-title h3{
  margin-top: 0;
  font-size: 24px;
  font-weight: 700;
  font-family: 'Roboto';
}

.explain-description{
  font-size: 14px;
  line-height: 22px;
  margin-top: 12px;
}

.explain-feature-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top:15px;
}

.explain-feature-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.explain-feature-list li::before{
  content: "";
  background-color: #EEDB99;
  width: 7px;
  height: 7px;
  display: flex;
  border-radius: 50px;
  transition:all 0.2s ease-in-out;
}

.explain-card:hover .explain-feature-list li::before{
  background-color: #ffffff;
}

.explain-content-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.explain-price p{
  color: #EEDB99;
  font-size: 40px;
  font-family: 'Roboto';
  transition:all 0.2s ease-in-out;
}

.explain-card:hover .explain-price p{
  color:#ffffff;
}

.explain-price span{
  font-size: 12px;
  margin-top: 0px;
}


.explain-btn{
  background: #EEDB99;
  color: #0d2e38;
  border: 1px solid #EEDB99;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 10px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 170px;
  transition: .2s ease;
}

.explain-btn:hover{
  background: transparent;
  color: #EEDB99;
  border: 1px solid #EEDB99;
}

.explain-btn img{
  width: 20px;
  height: 20px;
  transition: .2s ease;
}

.explain-btn:hover img{
  filter: brightness(0) saturate(100%) invert(98%) sepia(35%) saturate(1524%) hue-rotate(319deg) brightness(102%) contrast(87%);
}

.white-col .explain-btn{
  background: #ffffff;
  color:#222222;
  border:1px solid #ffffff;
}

.white-col .explain-btn:hover{
  border: 1px solid #EEDB99;
  background:#EEDB99;
}

.white-col .explain-btn:hover img{
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(304deg) brightness(100%) contrast(102%);
}

/* .explain-upsell-Mdl .upsell-modal-content{
  background: linear-gradient(0deg, rgba(29, 41, 61, 0.5), rgba(29, 41, 61, 0.5)), linear-gradient(90deg, rgba(25, 65, 77, 1) 0%, rgba(253, 199, 0, 0) 50%, rgba(25, 65, 77, 1) 100%);
  border: 1px solid #99c1cc;
} */

.chart-rating{
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 10px;
  align-items: center;
}

.chart-rating i.yellow{
  color:#a7a75f;;
}

.chart-rating i.mid{
  font-size:14px;
}

.chart-rating i.small{
  font-size:12px;
}

.chart-explained-sec .dash-header h2{
  margin-bottom:20px;
}

.explain-upsell-Mdl .whts-num label{
  margin-bottom:2px;
}


@media screen and (max-width:1199px) {
  .explain-content-bottom{
    flex-wrap: wrap;
    gap:20px;
  }

  .explain-price p{
    font-size:35px;
    line-height: 35px;
  }
}


@media screen and (max-width:767px) {
  .chart-explain .row{
    gap:20px;
  }
}

@media screen and (max-width:575px) {
  .explain-upsell-Mdl .upsell-modal-content{
    margin-inline:auto;
  }

  .explain-upsell-Mdl .whts-num label{
    margin-bottom:2px;
  }
}



@media screen and (max-width:480px) {
  .chart-explained-sec .dash-header h2 {
    margin-bottom: 0px;
  }
  .explain-title h3 {
    font-size: 18px;
  }
  .explain-description {
    font-size: 12px;
    line-height: 18px;
    margin-top: 10px;
  }

  .explain-title span {
    width: 32px;
    height: 32px;
  }

  .explain-title span img{
    width: 15px;
    height: 15px;
  }

  .explain-feature-list{
    gap: 7px;
    margin-top: 10px;
  }

  .explain-feature-list li {
    gap: 7px;
    font-size: 12px;
  }
  .explain-feature-list li::before {
    content: "";
    background-color: #EEDB99;
    width: 5px;
    height: 5px;
    display: flex;
    border-radius: 50px;
    transition: all 0.2s ease-in-out;
  }

  .explain-price p {
    font-size: 24px;
    line-height: 24px;
  }
  .explain-price span {
    font-size: 10px;
    margin-top: -2px;
    display: block;
  }
  .explain-btn{
    min-width: 150px;
    height: 35px;
    font-size: 12px;
  }
  .explain-btn img {
    width: 15px;
    height: 15px;
  }
  .explain-content {
    padding: 13px 12px;
}
}
/* Your chart explian section End */

  .schedule-modal {
    font-family: 'Ubuntu' !important;
    background: #561E82;
    color: #fff;
    border-radius: 16px;
    padding: 20px;
    position: relative;
    border: 1px solid #B3A3FC;
    backdrop-filter: blur(60px);
    background: linear-gradient(0deg, rgba(29, 41, 61, 0.5), rgba(29, 41, 61, 0.5)),
linear-gradient(90deg, rgba(253, 199, 0, 0.1) 0%, rgba(253, 199, 0, 0) 50%, rgba(253, 199, 0, 0.1) 100%);

border: 1px solid #FDC700;
  }
  

  .schedule-close{
    position: absolute;
    top: 0;
    right: 15px;
    color: #fff;
    font-size: 37px;
    opacity: 0.8;
    background: transparent;
  }
  .schedule-close:hover {
    opacity: 1;
  }
  
  .schedule-title {
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    text-align: center;
    margin-bottom:7px;
  }
  
  .schedule-subtitle {
    font-size: 16px;;
    line-height: 24px;
    text-align: center;
    color: #C9D1E5;
    margin-bottom:20px;
  }

  .schedule-row{
    display:flex;
    gap:28px;
  }
  
  
  .schedule-section {
    width: calc(100% / 2 - (1 * 28px) / 2);
    margin-bottom: 20px;
  }

  .schedule-section .date-picker{
    border: 1px solid #FDC700;
    border-radius:16px;
    padding:15px 15px;
    height: 295px;
  }

  .schedule-section .time-slots{
    border: 1px solid #FDC700;
    border-radius:16px;
    padding:15px 15px;
    max-height: 345px;
    overflow: auto;
    scrollbar-width: none;
  }

  .schedule .datepicker td, .schedule .datepicker th{
    padding: 7px;
    border-radius: 4px;
  }

  .schedule .datepicker-inline{
   width:100%;
  }

  .schedule .datepicker .datepicker-switch:hover,  .schedule .datepicker .next:hover, .schedule .datepicker .prev:hover, .schedule .datepicker tfoot tr th:hover{
    background:transparent;
  }

  .schedule .datepicker table tr td.day.focused, .schedule .datepicker table tr td.day:hover, .schedule .datepicker table tr td span.focused,  .schedule .datepicker table tr td span:hover {
    background: #EEDB99;
    color: #222;
  }

  .schedule .datepicker table tr td.active, .schedule .datepicker table tr td.active.disabled, .schedule .datepicker table tr td.active.disabled:hover, .schedule .datepicker table tr td.active:hover {
    background: #EEDB99 !important;
    color: #222;
  } 

  .schedule .datepicker table{
    width:100%;
  }
  
  .section-title {
    font-size: 14.42px;
    line-height: 20.19px;
    font-weight:700;
    margin-bottom:6px;
  }

  .schedule-info-text{
    font-size: 14px;
    line-height: 17.31px;
    color:#EEDB99;
    display:flex;
    align-items:center;
    margin-top:10px;
    gap:5px;
  }
  .schedule-info-text img{
    filter: brightness(0) saturate(100%) invert(86%) sepia(41%) saturate(323%) hue-rotate(356deg) brightness(96%) contrast(94%);
  }

  .schedule-slot{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  
  .time-slot {
    display: inline-block;
    width: calc(100% / 2 - (1 * 10px) / 2);
    padding: 10px 20px;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    margin-bottom:0 !important;
    transition: all 0.2s ease-in-out;
    background: #64646433;
    text-align:center;
        border: 1px solid #FDC700;
  }

 
  .time-slots p{
    font-size: 11.54px;
    line-height: 17.31px;
    margin-bottom:10px;
  }

  .time-slots p span{
    font-weight:700;

  }
  
  .time-slot input {
   appearance: none;
  }
  
  .time-slot:hover {
    background: #EEDB99; 
    color:#0F172B;
  }
  
  .time-slot input:checked + label,
    .time-slot input:checked,
    .time-slot:has(input:checked) {
        border-top: 1px solid  #EEDB99;
            background: #EEDB99;
            color: #222;
    }
   .time-slot input:checked{
    color: #222;
   }
  
  .schedule-summary {
    padding: 15px;
    border-radius: 12px;
    margin-bottom:10px;
    background: linear-gradient(0deg, rgba(29, 41, 61, 0.5), rgba(29, 41, 61, 0.5)),
linear-gradient(90deg, rgba(253, 199, 0, 0.1) 0%, rgba(253, 199, 0, 0) 50%, rgba(253, 199, 0, 0.1) 100%);

border: 1px solid #FDC700
  }

  .summary-ttl{
    font-weight:700;
    font-size: 17px;
    line-height: line height/24_5;
    color:#EEDB99;
    margin-bottom:20px;
  }

  .summary-cont{
    display:flex;
    gap:14px;
  }

  .summary-box{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }

  .summary-box .summary-cont{
    width: calc(100% / 3 - (2 * 15px) / 3);
  }
  
  .summary-cont span{
      background:#EEDB99;
      border-radius:8px;
      height:42px;
      width:42px;
      display:flex;
      justify-content:center;
      align-items: center;
    }
    .summary-cont span img{
        filter: brightness(0) saturate(100%) invert(8%) sepia(36%) saturate(1037%) hue-rotate(183deg) brightness(94%) contrast(97%);
    }

  .summary-cont p{
    display: flex;
   flex-direction: column;
  font-size: 12.3px;
  }
  .summary-cont p strong {
    font-weight:500;
    font-size:14px;
    line-height:21px;
  }


  
  .summary-box div {
    margin-bottom: 8px;
    font-size: 14px;
  }
  
  .schedule-footer {
    display: flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top: 20px;
  }
  
  .schedule-footer button{
  width:calc(50% - 10px);
  height:50px;
  }

  .schedule-back-btn {
    background: #EEDB99;
    border-top: 1px solid  #EEDB99;
  }

  .schedule-back-btn:hover {
    background: #999;
    border: 1px solid #999;
    color:#ffffff;
  }
  
 .schedule-confirm-btn {
    background: #00A63E;
    border: none;
    color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: bold;
  }
.schedule-confirm-btn:hover{
    background: #EEDB99;
    color: #222;
    
}
  .schedule-back-btn{
    color: var(--primary-clr);
    border-color: #EEDB99;
  }
  .schedule-modal{
    padding: 40px 30px 20px 30px;
  }
  #scheduleModal .modal-dialog{
    min-width: 995px;
    width: 100%;
  }
  .schedule-section .date-picker , .schedule-section .time-slots{
    width: 432px;
  }
  .schedule-body{
    display: flex;
    gap: 28px;
    justify-content: center;
  }
  .schedule-summary{
    width: 100%;
    max-width: 895px;
    margin: 0px 20px;
  }
  .schedule-footer{
    width: 895px;
    margin: 20px 20px 0px;
  }

  .explain-datepicker .day{
    display:table-cell;
  }

  .sc-modal{
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px) brightness(0.6);
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .explain-datepicker .datepicker tbody {
    pointer-events: auto;
  }

    @media only screen and (max-width: 1199px) {
        /* 29 Aug 2025 changes */
        #scheduleModal .modal-dialog {
            min-width: auto;
            width: auto;
        }
        .schedule-section .date-picker, .schedule-section .time-slots {
            width: auto;
        }
        .schedule-summary {
            width: auto;
            max-width: auto;
            margin: 0px 0px;
        }
        .schedule-footer {
            width: auto;
            margin: 20px 0px 0px 0px;
        }
        .schedule-modal {
            padding: 30px 16px 16px 16px;
        }
    }
  @media only screen and (max-width: 991px) {
    .schedule-row {
        flex-direction: column;
        gap: 0;
      }
    .schedule-section{
        width: 100%;
    }

    .summary-box{
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .summary-box .summary-cont{
        width:100%;
    }
    .schedule-title{
        text-align:left;
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 3px;
    }

    .schedule-subtitle{
        text-align:left;
        font-size: 14px;
        line-height: 22px;
    }
       /* new end  */
  }
  @media only screen and (max-width: 575px) {
    #scheduleModal .modal-dialog {
        min-width: auto;
        width: auto;
    }
    .schedule-section .date-picker, .schedule-section .time-slots {
        width: auto;
    }
    .schedule-summary {
        width: auto;
        max-width: auto;
        margin: 0px 0px;
    }
    .schedule-modal {
        padding: 30px 16px 16px 16px;
    }
  }


  @media only screen and (max-width: 480px) {
    .schedule-title{
        font-size: 18px;
    }
    .schedule-subtitle{
        font-size: 12px;
        line-height:16px;
        margin-bottom:16px;
    }

    .schedule-info-text {
        font-size: 12px;
        line-height: 17.31px;
    }
    .schedule-section{
        margin-bottom:16px;
    }

    .summary-ttl{
        font-size: 14px;
    }

    .summary-cont p{
        font-size: 12.3px;
    }

    .summary-cont p strong {
        font-size: 11px;
      }

      .schedule-footer button {
        width: calc(50% - 5px);
        height: 34px;
        font-size: 11px;
        padding: 4px;
      }

      .time-slot{
        font-size:10px;
      }

      .schedule-footer{
        gap:10px;
      }
  }

  /* Weekly Tips Css Start */
/* header */
.wt-hero { text-align: center; margin: 8px 0 28px; }
.wt-hero .wt-title {
  font-family: "ppacma-900";
  font-size: 36px;
  margin: 6px 0 6px;
  display: flex;
  justify-content: center;
  align-items:center;
  gap: 12px;
}

.wt-hero .wt-title img{
  filter: brightness(0) saturate(100%) invert(93%) sepia(90%) saturate(383%) hue-rotate(327deg) brightness(98%) contrast(90%);
}
.wt-hero .wt-sub { 
  color: #99c1cc;
  font-size: 15px;
  margin: 0;
  font-weight: 500;
  max-width: 684px;
  margin-inline: auto;
 }

/* left card (image) */
.wt-card {
  background: #19414d;
  border-radius: 18px;
  display: flex;
  align-items: stretch;
  box-shadow: 0 18px 40px rgba(6, 10, 20, 0.6) inset;
  overflow: hidden;
  border: 1px solid #eedd9a;
  max-width: 830px;
  min-width: 830px;
  margin-inline: auto;
  transition:all 0.3s ease-in-out;
}

.wt-card:hover{
  box-shadow: 0px 0px 20px 7px rgba(214, 165, 60, 0.14);
}

.wt-card .wt-left {
  width: 50%;
}
.wt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f2e2c9;
  color: #10232a;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  position: absolute;
  top: 13px;
  left: 20px;
}

.wt-cover{
  position:relative;
}

.wt-cover img {
  max-width: 100%;
  height: 100%;
  border-radius: 6px;
  display: block;
}

/* right features */
.wt-features {
  background: linear-gradient(180deg, rgba(10,25,34,0.55), rgba(6,15,22,0.45));
  padding: 22px;
  color: #dceaf3;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  gap:10px;
  transition:all 0.3s ease-in-out;
}
.wt-feature-list { display: flex; flex-direction: column;  gap: 25px; }
.wt-feature { display: flex; gap: 14px; align-items: flex-start; }
.wt-feature .wt-icon {
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(230 197 90 / 28%);
  display: grid;
  place-items: center;
}

.wt-feature .wt-icon img{
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(623%) hue-rotate(5deg) brightness(106%) contrast(87%);
}

.wt-feature h4 {
  margin: 0;
  font-family: "ppacma-600";
  font-size: 18px;
}

.wt-feature p {
  margin: 6px 0 0;
  color: #99c1cc;
  font-size: 14px;
  line-height: 23px;
  font-weight: 500;
}

/* price & CTA */
.wt-price-row { display: flex; align-items: center; gap: 18px; margin-top: 6px; 
  flex-direction: column;
  justify-content: center;}
.wt-price {     
  font-family: "ppacma-900";
  font-size: 34px;
  color: #eedd9a;
  text-align: center;
  line-height: 40px;}

  .wt-price span{
    font-size:14px;
    color:#9aa9b6;
  }

.wt-small { color: #9aa9b6; font-size: 13px;text-align:center; }

.wt-cta {
  background: #eedd9a;
  border: none;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 600;
  color: #222222;
  cursor: pointer;
  display: flex;
  text-align: center;
  gap: 10px;
  border: 1px solid #eedd9a;
  transition: all 0.3s ease-in-out; 
}
.wt-cta:hover { 
  box-shadow: 0 8px 24px rgba(214,165,60,0.14);
  border: 1px solid #eedd9a;
  background: transparent;
  color: #eedd9a;
}

.wt-cta img{
  transition: all 0.3s ease-in-out; 
}

.wt-cta:hover img{
filter: brightness(0) saturate(100%) invert(95%) sepia(49%) saturate(1196%) hue-rotate(322deg) brightness(92%) contrast(77%);
}



/* audio preview box below (compact) */
.wt-audio-preview {
  margin-top: 36px;
  border-radius: 14px;
  padding: 15px 15px;
  box-shadow: 0 10px 30px rgba(2, 6, 12, 0.6);
  background: #19414d;
  max-width: 550px;
  margin-inline: auto;
  border: 1px solid #99c1cc;
}
.wt-audio-title {
  display: flex;
  gap: 10px;
  font-weight: 600;
}

.wt-audio-title img{
  width:18px;
  height:18px;
  filter: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(623%) hue-rotate(5deg) brightness(106%) contrast(87%);
}

.wt-audio-title h4{
  font-weight: 700;
  font-size: 18px;
  font-family: "ppacma-600"
}

.wt-wave {
  margin-top: 14px;
  background: #061424;
  border-radius: 10px;
  padding: 16px;
}
.wt-wave .wt-play { display: inline-flex; gap: 12px; font-weight: 600; }
.wt-wave .wt-quote { font-style: italic; margin-top: 8px; font-size: 12px;}
.wt-footer-note { margin-top: 12px; color: #9aa9b6; font-size: 13px; text-align: center; }

.wt-play .sound-icon{
  width: 40px;
  height: 40px;
  background: #eedd9a;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  color: #0d2e38;
  gap: 12px;
  font-weight: 600;
}

.sound-icon-block{
  position:relative;
}

.sound-icon {
  width: 40px;
  height: 40px;
  background: #eedd9a;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 50px;
  color: #0d2e38;
  gap: 12px;
  font-weight: 600;
  position:absolute;
}

.sound-wave {
  width: 100%;
  height: 30px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.audio-wave{
  margin-left: 45px;
}

.audio-wave p{
  font-size: 14px;
}

.sound-bar {
  display: block;
  width: 2px;
  margin-right: 1px;
  background: #eedd9a;
  animation: sound 0ms -800ms linear infinite alternate;
  transition: height 0.8s;
}

@keyframes sound {
  0% {
    opacity: 0.35;
    height: 6px;
  }
  100% {
    opacity: 1;
    height: 30px;
  }
}

.sound-wave .sound-bar {
  animation-play-state: paused;
}

.sound-wave.active .sound-bar {
  animation-play-state: running;
}

.yellow-divider{
  width: 100%;
  height: 1px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(230, 197, 90, 0) 0%, #eedd9a 15%, #fff3b0 50%, #e6c55a 85%, rgba(230, 197, 90, 0) 100%);
}

.wt-cover{
  height: 100%;
}

.wt-cta.mob{
  display:none
}

@media screen and (max-width:1199px) {
  .wt-card{
    max-width: 100%;
    min-width: 100%;
  }
  .wt-feature h4{
    font-size: 16px;
  }
  .wt-feature p{
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 20px;
  }

  .wt-feature .wt-icon{
    min-width: 40px;
    height: 40px;
  }

  .wt-feature .wt-icon img{
    width: 16px;
    height: 16px;
  }
  .wt-price-row{
    flex-direction: column;
  }
  .wt-feature-list{
    gap:15px;
  }
  .wt-cta {
    padding: 7px 18px;
  }

  .wt-price-row{
    justify-content: center;
  }

  .wt-cta{
    margin-left: 0;
    font-size: 15px;
  }

  .wt-price {
    text-align:center;
  }

  .wt-small{
    text-align:center;
  }

  .wt-cta{
    margin-left:0;
  }
}

@media screen and (max-width:767px) {
  .wt-hero .wt-title {
    font-size: 30px;
  }
  .wt-hero .wt-sub{
    font-size: 14px;
  }

  .wt-cover img{
    max-width: 450px;
  }

  .wt-features{
    width: 100%;
    border: 1px solid #eedd9a;
    border-radius: 18px;
    max-width: 450px;
  }
  .wt-left{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .wt-price-row{
    justify-content: center;
  }

  .wt-cta{
    margin-left: 0;
    font-size: 15px;
  }

  .wt-price {
    font-size: 30px;
    line-height: 30px;
    text-align:center;
  }

  .wt-small{
    text-align:center;
  }

  .wt-audio-preview{
    max-width: 450px;
  }

  .wt-card .wt-left{
    width: 100%;
    position: relative;
  }

  .wt-card{
    flex-direction: column;
    border: 0;
    box-shadow: none;
    background: transparent;
    align-items: center;
    gap: 30px;
  }

  .wt-hero .wt-sub {
    max-width: 406px;
  }

  .wt-card:hover{
    box-shadow:none;
  }

  .wt-features:hover{
    box-shadow: 0 8px 24px rgba(214, 165, 60, 0.14);
  }

  .sound-wave{
    gap:8px;
  }
}

@media screen and (max-width:480px) {
  .wt-badge  {
    font-size: 12px;
    padding: 4px 14px;
  }

  .wt-hero .wt-title {
    font-size: 22px;
  }

  .wt-hero .wt-sub {
    font-size: 12px;
    max-width: 100%;
  }

  .wt-cover img, .wt-features, .wt-audio-preview {
    max-width: 100%;
  }
  .wt-audio-preview{
    margin-top:20px;
  }

  .wt-card{
    gap:20px;
  }

  .wt-feature .wt-icon {
    min-width: 35px;
    height: 35px;
  }

  .wt-feature .wt-icon img {
    width: 12px;
    height: 12px;
  }

  .wt-feature h4 {
    font-size: 15px;
  }

  .wt-feature p {
    line-height: 18px;
  }

  .wt-price {
    font-size: 26px;
    line-height: 24px;
  }

  .wt-small {
    font-size: 12px;
  }  

  .wt-cta {
    margin-left: 0;
    font-size: 13px;
  }

  .wt-audio-title h4 {
    font-size: 15px;
  } 

  .audio-wave p {
    font-size: 13px;
  }  

  .wt-play .sound-icon{
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .wt-wave .wt-quote {
    margin-top: 0px;
    font-size: 11px;
  }

  .wt-wave {
    padding: 12px;
  }

  .wt-audio-preview{
    padding: 12px 12px;
  }

  .wt-footer-note {
    margin-top: 5px;
    font-size: 11px;
  }

  .audio-wave {
    margin-left: 30px;
  }

  @keyframes sound {
    0% {
      opacity: 0.35;
      height: 6px;
    }
    100% {
      opacity: 1;
      height: 20px;
    }
  }

  .sound-wave {
    gap: 6px;
  }

  .wt-cta.mob{
    display:block;
  }

}
@media screen and (max-width:420px) {
  .audio-wave {
    margin-left: 0;
    margin-top: 20px;
  }
  .wt-play .sound-icon{
    left: 50%;
    transform: translateX(-50%);
    top: -15px;
  }
  .wt-wave .wt-play{
    flex-direction:column;
    gap:0;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  .wt-wave .wt-quote {
    margin-top: 2px;
    text-align: center;
  }

  .audio-wave p {
    font-size: 13px;
    text-align: center;
  }

}

.wt-status-badge {
  position: absolute;
  top: 20px;
  right: 25px;
  z-index: 10;
}

.wt-status-badge .badge{
  padding: 10px;
} 

/* Weekly Tips Css End  */