@font-face {
  font-family: 'Open Sauce One';
  src: url('/fonts/collection/OpenSauceOne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('/fonts/collection/OpenSauceOne-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('/fonts/collection/OpenSauceOne-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/collection/OpenSans-VariableFont_wdth,wght.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/collection/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/collection/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/collection/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #EEF1F4 !important;
  margin: 0 auto;
  font-family: 'Open Sauce One', sans-serif;
}

.login-bg {
  flex: 1;
}

footer {
  margin-top: auto;
}

/* Top navigation */
.topbar {
  height: 72px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid #E4EBEF;
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
}

.nav-tabs {
  display: flex;
  gap: 18px;
  align-items: center;
  color: #323232;
  font-weight: 400;
}

.nav-tabs a {
  color: #323232;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  font-size: 14px;
  font-weight: 400;
}

.nav-tabs a.active {
  color: #323232;
  font-size: 14px;
  font-weight: 400;
}

.nav-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FB7436;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  box-shadow: 0 4px 12px #101E3C14;
}

.card-profile-row{
  display: flex;
  gap: 10px;
}

.card-support-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-info {
  margin-bottom: 25px;
}

.card-profile-name {
  font-weight: 600;
}

#profilePopup .card-profile-row .email{
      word-break: break-word;
}

#profilePopup .card-profile-row .avatar span{
      padding: 10px;
}

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #4CAF50;
  color: #fff;
  padding: 14px 18px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 8px 20px #00000026;
  transform: translateY(-10px);
  transition: all 0.35s ease;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.toast-success {
  background-color: #4CAF50;
}

.toast-error {
  background-color: #f44336;
}

.toast-close {
  position: absolute;
  top: -15px;
  right: -5px;
  font-size: 25px;
  cursor: pointer;
  color: #000;
  line-height: 1;
  opacity: 0.8;
    
}

.toast-close:hover {
  opacity: 1;
}

/* Layout */
div#dashboard-section {
  background: #EEF1F4;
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 22px;
  align-items: start;
}

@media (max-width: 1100px) {
  .wrap {
    grid-template-columns: 1fr 340px;
    display: block;
  }
}

@media (max-width: 920px) {
  .wrap {
    grid-template-columns: 1fr;
    padding-bottom: 60px;
  }
}

.reset-key{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.api-key-title{
  font-weight:500;
  font-size:14px;
  color: #323232;
}

/* Shared card */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.card-key-box {
  padding: 18px 0;
}

/* API Key box */
.api-key-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reset-key-box{
  display:flex;
  gap:8px;
  align-items:center;
}

.api-key {
  background: #0b0b0b;
  color: #fff;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: 'Open Sauce One', sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 13px;
}

.api-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.small-ghost {
  background: #FFFFFF0F;
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
  font-weight: 600;
  border: 1px solid #FFFFFF08;
}

/* My Plan */
.plan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top:14px;
}

.plan-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-box {
  padding: 14px 0;
}

.plan-title {
  font-size: 14px;
  color: #323232;
  font-weight: 500;
}

.plan-value {
  font-weight: 600;
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  color: #323232;
}

.upgrade-inline {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.upgrade-btn {
  background: transparent;
  border: 1px solid #0052CC;
  padding: 12px 10px;
  border-radius: 4px;
  color: #0052CC;
  font-weight: normal;
  cursor: pointer;
  box-shadow: 0 6px 14px #1F6FEB0F;
  text-decoration: none;
}

/* Plan description column */
.plan-desc {
  padding: 14px;
  border-left: solid 1px #E4EBEF;
  height: -webkit-fill-available;
}

.plan-desc-inline {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.plan-desc-title {
  color: #323232;
  font-size: 14px;
  font-weight: 700;
}

.plan-desc-check{
  margin-top:10px;
  display:flex;
  flex-direction:column;
}

.feature {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 3px 0;
  color: #27344A;
  font-weight: 400;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
}

.feature svg {
  flex: 0 0 18px;
}

a.upgrade-btn {
  color: #0052CC;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 113%;
}

.plan-note {
  border-radius: 10px;
  border: 1px dashed #14285008;
  font-size: 13px;
  color: var(--muted);
}

/* Usage summary with chart */
.usage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top:14px;
}

.usage-bar{
  display:flex;
  align-items:center;
  gap:10px;
  width: 60%;
}

.usage-stat {
  display: flex;
  gap: 8px;
  align-items: center;
}

.usage-stat img {
  display: none;
}

.usage-stat-title{
  font-weight:700;
  display: flex;
  align-items: center;
}

.usage-stat-title span{
  font-weight:900;
}

.tooltip-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E4EBEF;
  color: #323232;
  padding: 24px;
  font-family: 'Open Sauce One', sans-serif;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
}

.tooltip-icon:hover::after {
  opacity: 1;
}


.card-key-box-disable {
  pointer-events: none;     
  opacity: 0.5;            
  user-select: none;   
  position: relative;
  padding: 18px 0;
}

.contract-btn-align {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 25px;
}

.empty-box-bg {
  background-image: url(/images/assets/Ellips-556.svg);
  background-repeat: no-repeat;
  background-position: center;
  padding: 50px;
}

.contract-upgrade-btn {
  background: #0052cc;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid #0052cc;
  color: #fff;
  text-decoration: none;
}

.contract-pricing-btn {
  background: #fff;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid #0052cc;
  color: #0052cc;
  text-decoration: none;
}

.myPlan-subscribe {
  padding-bottom: 50px;
}

.myPlan-subscribe h3 {
  margin: 0;
  color: #323232;
  font-family: 'Open Sauce One', sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.progress {
  width: 600px;
  height: 16px;
  border-radius: 4px;
  background: #E9EBED;
  overflow: hidden;
  border: 1px solid #14285005;
}

.progress > i {
  display: block;
  height: 100%;
}

.progress_green {
  background: #37C625 !important;
}

.progress_yellow {
  background: orange !important;
}

.progress_orange {
  background: #f36d0a !important;
}

.progress_red {
  background: #FB3640 !important;
}

.usage-stat.progress_red {
  padding: 5px;
  border-radius: 10px;
  background: #FB36401A !important;
}

.usage-stat.progress_red img {
  display: flex;
}

.usage-stat.progress_red .api-progress-text {
  margin: auto;
}

.usage-stat.progress_red .api-total-usage {
  color: #FB3640;
}

.usage-chart-wrap{
  height: 350px;
  position: relative;
  margin-top: 12px;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid #14285008;
}
.usage-chart{
  height: 100% !important;
  display: block;
}

/* Right sidebar */
aside.sidebar-sec {
  background-image: url(/images/assets/Group_6356120.png);
  background-repeat: no-repeat;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #1c1b1f;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.tooltip .tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #1c1b1f transparent transparent transparent;
}

.tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

.box-bg {
  background: #fff;
  margin: 20px 30px 16px 30px;
}

.box-bg-orng{
  border-radius: 8px;
  border: 1px solid #FB3640;
  background: #FFEBEC;
  margin: 20px 30px 16px 30px;
}

section.left-side {
  padding: 0 0 0 30px;
}

.plan-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 5px 0;
}

.upgrade-now-btn{
  margin-top:12px;
  display: flex;
  gap: 16px;
}

.platinum-box {
  margin: 56px 0 0 0;
  background: #E6EEFA;
  padding: 16px;
  border-radius: 4px;
}

.card-box {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 18px;
}

.usage-summary-inline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom: 1px solid #E4EBEF;
  padding-bottom: 15px;
}

.usage-summary-title{
  font-weight: 700;
}

.date-inline {
  display: flex;
  align-items: center;
  gap: 4px;
}

.refresh-text {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #0052CC;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.sidebar-sec .right-card {
  margin-bottom: 16px;
  padding: 16px 30px;
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
}

.right-card h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 700;
}

.right-card p {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  text-align: left;
}

.muted {
  color: var(--muted);
  font-size: 13px;
}

.upgrade-small-text {
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.upgrade-now-btn a {
  font-size: 14px;
  font-weight: 500;
}

.primary-cta {
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 8px;
  background: #0052CC;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.desc {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.14px;
  line-height: 120%;
}

a.primary-cta-orng {
  border-radius: 4px;
  border: 1px solid #FFBF91;
  background: linear-gradient(90deg, #FD9950 0%, #ED661D 100%);
}

a.primary-cta-contact {
  border-radius: 4px;
  border: 1px solid #0E29D8;
  background: transparent;
  color: #0E29D8;
}

span.orng-box-text {
  color: #323232;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.resources-grid-box{
  background: linear-gradient(180deg, #fff, #fbfdff);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #14285008;
}

a.res-card-link {
  text-decoration: none;
  color: #0052CC;
  font-weight: 600;
  display: flex;
  gap: 2px;
  align-items: center;
}

.res-card {
  display: flex;
  align-items: start;
  gap: 10px;
  margin-bottom: 7px;
}

.res-card .icon {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.res-card .title {
  font-weight: 500;
  font-size: 18px;
  color: #323232;
}

.expolre-inline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

p.view-txt {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #0052CC;
  font-size: 14px;
  font-weight: 600;
}

p.view-txt a {
  text-decoration: none;
  color: #0052CC;
}

.res-card .desc {
  font-size: 12px;
  color: var(--muted);
}

.explore-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.api-item {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #1428500A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.api-item .meta {
  display: flex;
  gap: 10px;
  align-items: center;
}

img.meta-symbol {
  width: 25px;
  height: 25px;
  padding: 2px;
  border-radius: 4px;
  border: 1px solid var(--Light-Blue, #E4EBEF);
}

.api-item .meta svg {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  padding: 6px;
  background: #f7faff;
}

.explore-list-anchor {
  cursor: pointer;
}

.explore-title{
  font-weight:600;
  font-size: 16px;
}

.blog-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.blog-card {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  align-items: center;
  flex: 1;
  box-shadow: 0 4px 12px #14285008;
}

.blog-img {
  width: auto;
  height: 56px;
  border-radius: 8px;
}

.blog-card a {
  text-decoration: none;
  color: #000000;
}

.blog-card-head{
  font-weight:400;
  color: #323232;
}

.blog-card-text{
  margin-top: 6px;
}

.code-box {
  background: #000;
  color: #fff;
  padding: 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}

input::placeholder,
textarea::placeholder {
  font-family: 'Open Sauce One', sans-serif;
}

.code-text {
  font-size: 18px;
  white-space: nowrap;
  overflow-x: auto;
  user-select: text;
}

.code-secret-box {
  border-radius: 8px;
  border: 1px solid #9CA2AC;
  background: #FFF;
  color: #27344A;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}

.card-key-align {
  display: flex;
}

.reset-card{
  width: 50%;
}

.secret-card{
  width: 50%;
  display: none;
}

.secret-key {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.secret-edit-text {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #0052CC;
  cursor: pointer;
}

div#addSecretKey {
  margin-top: 5px;
}

.add-secret-box {
  padding: 17px;
}

input#secretKeyField {
  background: transparent;
  border: none;
  color: #27344A;
  font-size: 14px;
  width: 100%;
  outline: none;
  cursor: text;
  letter-spacing: 0.08em;
  margin: 0 auto;
  padding: 0;
}

.secret-keyword-title {
  color: #323232;
  font-family: 'Open Sauce One', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  display: flex;
  gap: 4px;
  align-items: center;
}

input#apiKeyField {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  width: 100%;
  outline: none;
  cursor: text;
  letter-spacing: 0.08em;
  margin: 0 auto;
  padding: 0;
}

.stripe-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #d6dbe3;
  background: var(--input-bg);
  font-size: 14px;
  outline: none;
  }

.code-text.masked {
  -webkit-text-security: disc; /* Chrome / Safari */
}

.icon-btn {
  cursor: pointer;
}

.copied-text {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
}

.secret-copied-text {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
}

.icons {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.icon-btn {
  cursor: pointer;
  width: 26px;
  height: 26px;
}

/* Copied text */
.copied-text {
  position: absolute;
  right: -10px;
  top: -15px;
  font-size: 14px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.secret-copied-text {
  position: absolute;
  right: -10px;
  top: -15px;
  font-size: 14px;
  color: #0052CC;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Hide scrollbar */
.code-text::-webkit-scrollbar {
  display: none;
}

/* Small helpers */
.muted-2 {
  color: #94a3b8;
}

.small {
  font-size: 13px;
}

.small_platinum {
  color: #323232;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

span.small-text-platinum {
  color: #27344A;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.spaced {
  display: flex;
  gap: 12px;
  align-items: center;
}

.label-pill {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #1428500A;
  font-weight: 700;
}

.right-small {
  font-size: 12px;
  color: var(--muted);
}

.myPlan-sec{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  border-bottom: solid 1px #E4EBEF;
  padding-bottom: 10px;
}

.myPlan-sec .plan-text{
  display: flex;
}

.myPlan-sec h3{
  color: #323232;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  flex-shrink: 0;
}

span.cancelation-text {
  margin-left: 20px;
  background: #eaeefe;
  color: #323232;
  padding: 3px 8px;
  font-size: 14px;
  border-radius: 8px;
  text-align: center;
}

.upgrade-plan-dots{
  display:flex;
  gap:8px;
  align-items:center;
}

.upgrade-plan-dots button {
  background:transparent;
  border:none;
  font-weight:600;
  color:#0052CC;
  cursor: pointer;
  text-align: unset;
}

.desc-txt {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #0052CC;
  font-weight: 600;
  margin-top: 5px;
  gap: 4px;
}

/* Responsive tweaks */
@media (max-width: 920px) {

.plan-desc {
    border:none;
}

  nav.nav-tabs a {
    font-size: 12px;

  }

.nav-tabs{
    gap: 10px;
  }

.wrap {
    gap: 16px;
    display: block;
  }

.plan {
    grid-template-columns: 1fr;
  }

.resources-grid {
    grid-template-columns: 1fr 1fr;
  }

.progress {
    width: 200px;
  }
}

.logo_retina,
.logo_retina.inline {
  display: none;
}

.brand .logo{
  width: 230px;
}
.brand .logo a img{
  width: 100%;
    height: 36px!important;
}

.brand .logo span.zapier-logo{
  display: flex;
  justify-content: center;
}

.brand .logo span.zapier-logo img{
  height: 25px!important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo_non_retina,
  .logo_non_retina.inline {
    display: none;
  }
  .logo_retina.inline {
    display: inline-block;
  }
  .logo_retina {
    display: block;
  }
}

@media (max-width: 620px) {
  .brand .logo {
    width: 32px;
    height: 32px;
  }

.wrap {
    padding: 0 12px;
  }

.resources-grid {
    grid-template-columns: 1fr;
  }

.blog-row {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  section.left-side {
    padding: 0;
  }

  .brand .logo a img {
    width: auto;
  }

.contact-modal-wrapper .submit-area button {
    width: 100% !important;
    padding: 10px 16px !important;
  }
}

/* payment and billing  tab on dashboard page */

.container-payment{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:20px;
  margin: 30px;
}

.card-payment{
  background:#fff;
  border-radius:8px;
  padding:20px;
  box-shadow:0 2px 6px #00000014;
  height: fit-content;
}

.card-billing {
  margin-top: 20px;
}

h2{
  margin:0 0 15px 0;
  font-size:18px;
  font-weight:600;
}

table{
  width:100%;
  border-collapse:collapse;
  border: none;
  /* border-collapse: separate; */
  border-spacing: 0;
}

thead.th-bg th{
  border: none;
  position: relative;
}

thead.th-bg th div.overlap{
  position:absolute;
  height: 94%;
  width: 3px;
  background-color: #edeff2;
  top: 1px;
  right: -2px;
}

thead.th-bg {
  /* border-radius: 8px;
  border: 1px solid #E4EBEF;
  background: #EDEFF2; */
  /* border: 1px solid #E4EBEF; */
}

thead.th-bg span {
  padding: 10px 14px;
  background: #EDEFF2;
  display: block;
}

thead.th-bg th span{
  background: #EDEFF2;
}
thead th {
  border: none !important;
}

thead th.align-space {
  padding: 14px;
}

/* First TD */
thead.th-bg th:first-child span{
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

thead.th-bg th:last-child span{
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

th{
  text-align: left;
  /* padding: 14px; */
  font-size: 13px;
  color: #323232;
  font-weight: 600;
}

td{
  padding: 14px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  border-top: none;
  border-left: none;
  border-right: none;
  color: #323232;
  font-weight: 400;
}

.status-success{
  color:#14A801;
  border: 1px solid #37C62578;
  background: #37C6252E;
}

.status-failed{
  color:#FB3640;
  border: 1px solid #FECDCF;
  background: #FEE1E2;
}

.status-due{
  color:#ffa500;
  border: 1px solid #ffa500b0;
  background: #ffa50042;
}

.payment-box{
  display:flex;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #eee;
  width: 100%;

}

.payment-box:last-child{
  border-bottom:none;
}

.cc_icon.visa {
  background-image: url(../images/assets/visa_icon.png) !important;
    background-repeat: no-repeat;
}

.cc_icon.diners {
  background-image: url(../images/assets/diners_icon.png) !important;
    background-repeat: no-repeat;
}

.cc_icon.mastercard {
  background-image: url(../images/assets/mastercard_icon.png) !important;
    background-repeat: no-repeat;
}

.cc_icon.amex {
  background-image: url(../images/assets/amex_icon.png) !important;
    background-repeat: no-repeat;
}

.cc_icon.discover {
  background-image: url(../images/assets/discover_icon.png) !important;
    background-repeat: no-repeat;
}

.cc_icon.paypal {
  background-image: url(../images/assets/paypal_icon.png) !important;
    background-repeat: no-repeat;
}

.cc_icon.default {
  background-image: url(../images/assets/cc_icon.png) !important;
  background-repeat: no-repeat;
  background-size: 26px 17px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .cc_icon.visa {
    background-image: url(../images/assets/visa_icon_x2.png) !important;
    background-repeat: no-repeat;
    width: 55px;
    height: 33px;
  }
  .cc_icon.diners {
    background-image: url(../images/assets/diners_icon_x2.png) !important;
    background-repeat: no-repeat;
  }
  .cc_icon.mastercard {
    background-image: url(../images/assets/mastercard_icon_x2.png) !important;
    background-repeat: no-repeat;
  }
  .cc_icon.amex {
    background-image: url(../images/assets/amex_icon_x2.png) !important;
    background-repeat: no-repeat;
  }
  .cc_icon.discover {
    background-image: url(../images/assets/discover_icon_x2.png) !important;
    background-repeat: no-repeat;
  }
  .cc_icon.paypal {
    background-image: url(../images/assets/paypal_icon_x2.png) !important;
    background-repeat: no-repeat;
  }
  .cc_icon.default {
    background-image: url(../images/assets/cc_icon_x2.png) !important;
    background-repeat: no-repeat;
  }
}

.default-label{
  background:#eaeefe;
  color:#323232;
  padding:3px 8px;
  font-size:11px;
  border-radius:8px;
  margin-top: -20px;
  margin-left: 10px;
}

.edit-btn{
  color:#4a60e6;
  font-size:14px;
  float:right;
  cursor:pointer;
  font-weight: 700;
}

.billing-details p{
  margin:12px 0;
  font-size:14px;
}

.sidebar-payment .card-payment{
  padding:20px;
}

.card-txt{
  float:right;
  color:#4a60e6;
  font-size:14px;
  cursor:pointer;

}

@media(max-width:900px){
  .container-payment{
      grid-template-columns:1fr;
      display: block;
  }

}

/* profile popup */

#avatarTrigger {
  cursor: pointer;
}

.profile-popup {
  position: absolute;
  top: 65px;
  right: 30px;
  background: #fff;
  width: 260px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 25px #00000026;
  display: none;
  z-index: 9999;
}

.section-title {
  margin: 0 0 15px 0;
  font-size: 20px;
}

.card-profile {
  background: #fff;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.divider {
  height: 1px;
  background: #e5e5e5;
  margin: 15px 0;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
}

.link-row a {
  text-decoration: none;
  color: #1C1B1F;
}

.link-row.logout span {
  color: #FB3640;
}

.link-row:hover {
  background: #f5f5f5;
  border-radius: 6px;
  padding-left: 5px;
  transition: 0.2s;
}

/* support contact popup */

.support-popup {
  position: absolute;
  right: 70px;
  top: 65px;
  background: white;
  border: 1px solid #E4EBEF;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 4px 0 #00000029;
  width: 358px;
  display: none;
  z-index: 9999;

}

.support-contact {
  cursor: pointer;
}

/* Account Setting Popup */

:root {
  --page-bg: #eef2f4;
  --card-bg: #ffffff;
  --muted: #6b7280;
  --border: #e6e9ee;
  --accent: #0b63ff;
  --danger: #e53935;
  --input-bg: #fcfdff;
  --radius: 10px;
}

.account-popup {
  position: fixed;
  inset: 0;
  background: #00000059;
  display: none;
  z-index: 99999;
  overflow-y: auto;
}

.account-popup .page-wrap {
  width: 1200px;
  margin: 60px auto;
  padding: 20px;
  border-radius: 12px;
}

.account-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 25px 18px;
  border-radius: 12px 12px 0 0;
}

.account-topbar h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.account-topbar .account-close-btn {
  border: none;
  background: transparent;
  cursor: pointer;
}

.account-topbar .account-close-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  color: #111827;
  opacity: 0.8;
}

.inner {
  margin: 0;
  padding: 26px 100px;
  background: #EEF1F4;
  border-radius: 0 0 12px 12px;
}

.inner-card-bg {
  border-radius: 8px;
  border: 1px solid #E4EBEF;
  background: #FFF;
}

.inner h1 {
  font-size: 16px;
  font-weight: 700;
  color: #323232;
  margin-bottom: 50px;
}

.billing-details p {
  text-align: left;
  border-bottom: 1px solid #E4EBEF;
}

.card-payment h2 {
  color: #323232;
  font-family: 'Open Sauce One', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.card-payment h2.no-payment-mthds {
  text-align: center;
}

.profile-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 18px;
}

.profile-info {
  flex: 1;
}

.profile-info .name {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.profile-info .email {
  font-weight: 400;
  font-size: 16px;
  color: #000;
  margin-top: 4px;
}

.profile-info .links {
  margin-top: 8px;
}

.profile-info .links a {
  color: #0052CC;
  text-decoration: none;
  margin-right: 14px;
  font-size: 14px;
  cursor: pointer;
}

.profile-actions {
  flex: 0 0 160px;
  text-align: right;
}

.delete-account {
  color: #FB3640;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

button.btn.btn-save {
  font-family: 'Open Sauce One', sans-serif;
  border-radius: 4px;
  border: 1px solid #2480FC;
  background: #0052CC;
}

.main-account-form {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  width: 100%;
}

.col-left,
.col-right {
  width: 50%;
}

.account-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  box-shadow: none;
  width: -webkit-fill-available;
}

.account-card h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  color: #111827;
}

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 6px;
}

input[type="text"],
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #d6dbe3;
  background: var(--input-bg);
  font-size: 14px;
  outline: none;
}

input[type="password"], select, textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #d6dbe3;
  background: var(--input-bg);
  font-size: 14px;
  outline: none;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px #0B63FF0F;
  border-color: #a7c1ff;
}

.g-recaptcha {
  margin: 10px 0px 20px;
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}

.full {
  grid-column: 1 / -1;
}

.actions-row {
  display: flex;
  gap: 12px;
  margin: 18px;
}

.btn {
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

.btn-save {
  background: var(--accent);
  color: #fff;
  border-color: #0B63FF1F;
  box-shadow: 0 2px 0 #0B63FF1F;
}

.btn-cancel {
  background: #fff;
  color: var(--accent);
  border: 1px solid #dbe8ff;
}

.muted-small {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

@media (max-width: 1000px) {
  .col-left {
    flex-basis: 56%;
  }

.col-right {
    flex-basis: 44%;
  }
}

@media (max-width: 820px) {
  .main-account-form {
    flex-direction: column;
  }

.col-left,
  .col-right {
    width: 100%;
  }

.profile-actions {
    text-align: left;
    margin-left: auto;
  }
}

@media (max-width: 520px) {
  .avatar {
    /* width: 58px;
    height: 58px; */
  }

.topbar h1 {
    font-size: 16px;
  }

.input-inline {
  display: inline-block;
  width: 100%;
}
}

/* Add new Payment popup css */
/* Add new Payment popup css */

.modal-wrapper {
  display: none;
  position: fixed;
  inset: 0;
  background: #00000059;
  z-index: 99999;
  overflow-y: auto;
  outline: none;
}

.modal-content-wrapper {
  background: #fff;
  max-width: 600px;
  margin: 60px auto;
  border-radius: 12px;
  padding: 20px;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 4px 16px #00000033;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-header h2{
  margin:0;
  font-size:18px;
  color:#222222;
  font-weight: 700;
}

.add-payment-close-btn {
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  user-select: none;
  transition: color 0.3s ease;
}

.add-payment-close-btn:hover {
  color: #0b63ff;
}

.modal-content label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}

.modal-content input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.modal-content input[type="text"]:focus {
  border-color: #0b63ff;
  outline: none;
}

.row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0;
}

.col {
  flex: 1;
}

.col h4 {
  color: #fff;
}

.checkbox-row {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.btn-primary {
  padding: 10px 16px;
  background: #0b63ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background: #0052CC;
}

.card-txt {
  color: #0052CC;
  cursor: pointer;
  font-weight: 700;
  margin-left: 10px;
  user-select: none;
  font-size: 14px;
}

.card-txt:hover {
  text-decoration: none;
}

/* logout popup css */

/* Background overlay */
.logout-modal-wrapper {
  display: none;
  position: fixed;
  inset: 0;
  background: #00000059;
  z-index: 99999;
  display: none;
  justify-content: center;
  align-items: center;
}

/* Card box */
.logout-card {
  background: #fff;
  width: 340px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 14px #00000033;
  position: relative;
}

/* Header */
.logout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.logout-header h2 {
  margin: 0;
}

.logout-close {
  cursor: pointer;
  font-size: 24px;
  color: #333;
}

/* Inputs */
.input-box {
  width: 100%;
  margin-bottom: 12px;
}

.input-box input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.password-row {
  align-items: center;
  justify-content: space-between;
}

.eye-icon {
  cursor: pointer;
  margin-left: 8px;
}

.hint {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.forgot {
  text-align: right;
}

.forgot a {
  text-decoration: none;
  color: #0052CC;
}

.btn {
  /* width: 100%; */
  padding: 10px;
  border-radius: 6px;
  border: none;
  color: white;
  cursor: pointer;
  background: #0052CC;
}

.bottom-text {
  text-align: center;
  margin-top: 12px;
}

.bottom-text a {
  text-decoration: none;
  color: #0052CC;
}

.logout {
  cursor: pointer;
}

/* Contact section text */
.contact-subtext {
  font-size: 13px;
  color: #323232;
  padding: 5px 0 12px;
  text-align: left;
}

.faq-btn-txt{
  color: #0052CC;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.get-in-touch-btn, .signup-get-in-touch-btn {
  color: #0052CC;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

/* Background overlay */
.contact-modal-wrapper {
  display: none;
  position: fixed;
  inset: 0;
  background: #00000059;
  z-index: 999999;
  justify-content: center;
  align-items: center;
}

.contact-modal-wrapper .contact-body {
  padding: 20px;
}



/* Popup box */
.contact-box {
  background: #fff;
  width: 500px;
  /* padding: 20px; */
  border-radius: 12px;
  box-shadow: 0 4px 14px #00000033;
}

/* Header */
.contact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  /* margin-bottom: 15px; */
  border-bottom: solid 1px #E4EBEF;
  padding: 20px;
}

.contact-close {
  font-size: 26px;
  cursor: pointer;
}

.contact-close:hover {
  color: #0052CC;
}

/* Form area */
.contact-body label {
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
  font-weight: normal;
}

.contact-body select,
.contact-body textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.contact-body textarea {
  height: 110px;
  resize: none;
}

/* Submit */
.submit-area {
  /* margin-top: 15px; */
  padding: 20px;
  border-top: solid 1px #E4EBEF;
}

.submit-area button {
  width: 120px;
    padding: 10px 16px;
  /* width: 100%;
  padding: 10px; */
  background: #0052CC;
  border: none;
  color: #fff;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Open Sauce One', sans-serif;
}

.upgrade-payment-box h3 {
  color: #323232;
  font-family: 'Open Sauce One', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

.inner-payment-box label {
  color: #323232;
  font-family: 'Open Sauce One', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.submit-area button:hover {
  background: #084fca;
}

/* Platinum popup css */
.platinum-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

/* Overlay wrapper */
.platinum-modal-wrapper {
  display: none;
  position: fixed;
  inset: 0;
  background: #00000059;
  z-index: 99999;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Modal styling (your existing CSS) */
.modal-box {
  max-width: 700px;
  background: #ffffff;
  border-radius: 8px;
  margin: auto;
  padding: 0;
  box-shadow: 0 2px 8px #00000014;
  border: 1px solid #e2e3e6;
}

.modal-header .close-btn {
  font-size: 24px;
  cursor: pointer;
  color: #6a6c6f;
  font-weight: bold;
}

/* Table styling */

.icon {
  font-size: 18px;
  font-weight: bold;
}

.green { color: #1ec765; }

.red { color: #e54848; }

.footer {
  padding: 20px 22px 16px;
  text-align: left;
  font-size: 13px;
  margin-top:20px;
  display: flex;
  align-items: center;
  gap:15px;
  width: 60%;
}

.footer a {
  color: #1877f2;
  text-decoration: none;
  font-weight: 600;
}

/* upgrade plan page css */

.upgrade-plan-container {
  padding: 20px 30px;
  background: #EEF1F4;
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #1d1d1d;
  cursor: pointer;
  justify-content: space-between;
  border-bottom: 1px solid #E4EBEF;
  background: #FFF;
  padding: 30px;
}

.top-bar svg {
  width: 18px;
  height: 18px;
}

.top-bar-left {
  display: flex;
  align-items: center;
}

.top-bar-right {
  color: #0052CC;
}

.main {
  display: flex;
  gap: 25px;
}

.upgrade-payment-box {
  background: #fff;
  width: 60%;
  padding: 25px;
  border-radius: 6px;
  box-shadow: 0 0 3px #0000001A;
  box-sizing: border-box;
}

.payment-box h3 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
}

label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: #555;
}

input {
  width:-webkit-fill-available;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 14px;
  margin-bottom: 18px;
}

.row {
  display: flex;
  gap: 15px;
}

.btn-pay {
  background: #0052CC;
  color: #fff;
  padding: 12px;
  border: none;
  width: 100%;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  font-weight: 500;
  font-family: 'Open Sauce One', sans-serif;
}

.downgrade-plan-header span {
  color: #323232;
  font-family: 'Open Sauce One', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

.summary-header span {
  color: #323232;
  font-family: 'Open Sauce One', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.upgrade-platinum-text h2 {
  color: #323232;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.summary-box {
  background: #fff;
  width: 40%;
  padding: 25px;
  border-radius: 6px;
  box-shadow: 0 0 3px #0000001A;
  height: 100%;
  box-sizing: border-box;
}

.downgrade-plan-popup-box .summary-box {
  width: 100%;
}
form.summary-box .summary-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.signup-container .summary-header {
  align-self: end;
}

.downgrade-plan-popup-box .summary-header .summary-checkboxes {
  margin-left: auto;
}

.downgrade-plan-popup-box .summary-box {
  padding: 0;
}

.upgrade-form-summary, .downgrade-plan-popup-box .upgrade-now-btn {
  padding: 25px;
}

.toggle-buttons input[type="radio"] {
  vertical-align: middle;
  position: relative;
  top: 2px;
  right: 5px;
}

.line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 6px;
}

.note {
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

div#gdpr-section label {
  font-weight: 400;
}

.plan-card {
  border: 2px solid #0052CC;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 18px;
}

.plan-card-title {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 700;
}

span.plan-card-price{
  font-size:26px; 
  font-weight:700;
}

span.plan-card-price-small{
  font-size:18px;
}

span.plan-card-price-cut{
  text-decoration: line-through;
  font-size: 18px;
  color: #4D4D4D;
}

span.plan-card-price-discount{
  color: #37C625;
  font-size: 14px;
}

.plan-features {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}

.plan-features div {
  font-size: 13px;
  margin-bottom: 4px;
  align-items: center;
  gap: 6px;
}

.upgrade-platinum {
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  justify-content: space-between;
  border-radius: 4px;
  background: #E6EEFA;
  margin-top: 15px;

}

p.svg-icon-text {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  padding: 0;
  color: #27344A;
  font-size: 13px;
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
}

.upgrade-platinum-btn {
  border-radius: 4px;
  border: 1px solid #0052CC;
  padding: 12px 16px;
  text-align: center;
}

a.upgrade-add-btn {
  text-decoration: none;
  color: #0052CC;
}

a.upgrade-rmv-btn {
  color: #FB3640;
  text-decoration: none;
}

a.upgrade-rmv-btn.muted, a.upgrade-add-btn {
  pointer-events: none;
  cursor: default;
}

.remove-platinum {
  border-color: #FB3640;
}

.additional-text{
  font-size: 12px; 
  margin-top: 10px !important;
}

span.plan-item-head{
  font-size:20px;
}

span.plan-item-text{
  font-size:26px; 
  font-weight:700;
}

span.plan-item-text-small{
  font-size:18px;
}

.starter-txt {
  display: flex;
  color: #323232;
  font-family: 'Open Sauce One', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 210%;
}

.additional-text.subtext {
  color: #4E545D;
  font-family: 'Open Sauce One', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

.plan-features img {
  width: 13px;
  height: 13px;
}

.top-line {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.btm-line {
  padding-bottom: 15px;
}

.plan-list {
  border: 1px solid #e4e9f0;
  border-radius: 6px;
  padding: 10px;
}

.plan-item {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s ease;
}

.plan-item:last-child {
  border-bottom: none;
}

.plan-item.active {
  background: #f5f8ff;
  border: 2px solid #0052CC;
  border-radius: 6px;
}

.most-popular {
  background: #0057ff;
  color: #fff !important;
  font-size: 13px !important;
  padding: 4px 16px;
  font-family: 'Open Sauce One', sans-serif;
  border-radius: 8px;
  margin-right: 20px;
  font-weight: 500 !important;
}

.footer-platinum {
  width: auto !important;
}

.contact-btn {
  border-radius: 4px;
  border: 1px solid #0052CC;
  padding: 8px 14px;
}

.plan-item-footer-text {
  color: #323232;
  font-weight: 500;
  font-size: 18px;
  width: 65%;
}

span.plan-footer-sml {
  font-weight: 400;
  color: #000;
  font-size: 14px;
  margin-top: 25px;
}

.plan-card-txt{
  color: #323232;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding: 0 20px 15px;
}

.plan-card-item {
  font-size: 14px;
  font-weight: 600;
  color: #323232;
  padding-top: 5px;
  border: none;
}

@media (max-width: 768px) {
  .main{
      display:block;
  }

.payment-box,.summary-box {
      width: auto;
  }

}

/* Three Dots popup css */

.three-dots-wrapper {
  position: relative;
  display: inline-block;
}

.three-dots-btn {
  background: transparent;
  border: none;
  font-size: 22px;
  font-weight: 700;
  color: #0052CC;
  cursor: pointer;
}

/* Dropdown */
.three-dot-dropdown {
  position: absolute;
  top: 28px;
  right: 0;
  background: white;
  border-radius: 12px;
  width: 270px;
  padding: 15px 0;
  display: none;
  box-shadow: 0 4px 12px #0000001F;
  z-index: 500;
  border-radius: 4px;
  border: 1px solid #E4EBEF;
}

/* Links */
.three-dot-dropdown a, .three-dot-dropdown button {
  display: block;
  padding: 10px 16px;
  font-size: 16px;
  color: #1a2b3c;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.three-dot-dropdown a:hover, .three-dot-dropdown form:hover {
  background: #f5f6f8;
}

.three-dot-dropdown a.cancel {
  color: #e53935;
  font-weight: 600;
  cursor: pointer;
}

/* downgrade plan popup css */

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0000008C;
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.downgrade-plan-popup-box {
  animation: fadeIn 0.25s ease;
  max-height: 90vh;
  overflow-y: auto;
}
#upgradeOverlay .downgrade-plan-popup-box {
  width: 50%;
}
span.downgrade-plan-mon{
  font-size:14px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }

to { opacity: 1; transform: scale(1); }
}

#textareaBox {
  display: none;
}

.close-popup{
  cursor: pointer;
}

button.active,button.actived {
  border-radius: 8px;
  background: #41EB2C;
  padding: 4px 16px;
  align-items: center;
  border: 1px solid #41EB2C;
  color: #000;
}

.empty-box {
  text-align: center;
}

.empty-box h2 {
  padding: 10px 0;
  color: #323232;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

.start-icon {
  text-decoration: none;
}

.start-icon span {
  display: flex;
  justify-content: center;
  gap: 6px;
  color: #0052CC;
  font-size: 14px;
  font-weight: 600;
}

.downgrade-plan-card {
  width: 700px;
  height: fit-content;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  /* padding: 20px; */
  box-shadow: 0 2px 4px #0000000D;
}

.downgrade-plan-features-inline {
  display: flex;
  justify-content: space-between;
  font-size: 14px;

}

.downgrade-plan-header {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
  align-items: baseline;
  padding: 10px 20px 0;
}

.btm-space{
  margin-bottom: 0px !important;
}

.downgrade-plan-box {
  border: 1px solid #e4e9f0;
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  background-color: #ffffff;
}

.downgrade-plan-box .downgrade-plan-features,
.downgrade-plan-box .subtext:last-child {
  display: none;
}

.downgrade-plan-box.active {
  border: 2px solid #0052cc;
}

.downgrade-plan-box.active .downgrade-plan-features,
.downgrade-plan-box.active .subtext:last-child {
  display: block;
}

.subtext {
  font-size: 13px;
  color: #555;
  margin: 5px 0 15px;
  padding-left: 20px;
}

.downgrade-plan-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 14px;
  border-top:  1px solid #E4EBEF;
  padding-top: 12px;
}

.downgrade-plan-features span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tick { color: #28a745; }

.cross { color: #d9534f; }

.why-section {
  margin-top: 20px;
  font-size: 15px;
  font-weight: bold;
}
#planPopupDescription{
  text-align: unset;
  font-size: 14px;
  line-height: 24px;
}
.plan-modal-container{
  padding: 25px 20px 0;
}

.downgrade-checkbox-list {
  margin-top: 10px;
}

.downgrade-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: normal;
}

textarea {
  width: -webkit-fill-available;
  height: 120px;
  margin-top: 10px;
  font-size: 14px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.downgrade-plan-footer {
  display: flex;
  /* justify-content: flex-end; */
  gap: 10px;
  margin-top: 20px;
  padding: 20px;
  border-top: 1px solid #E4EBEF;
}

.btn {
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid;
  cursor: pointer;
  font-size: 14px;
}

.blue-btn {
  background: #0052CC;
  border-color: #2480FC;
  color: #fff;
}

.red-btn {
  background: #fff;
  border-color: #dc3545!important;
  color: #dc3545;
}

.row{
  display:flex;
  gap:40px;
  justify-content:center;
}

.downgrade-plan-textareatxt{
  text-align:right;
  font-size:13px;
  color:#444;
}

input[type="checkbox"] {
  margin: 0;
  width: auto;
}

@media (max-width: 768px) {
  .row{
      display:block;
  }

.card {
      width: auto;
  }
}

@media (max-width: 480px) {
  .downgrade-plan-features {
      grid-template-columns: 1fr;
  }

  .downgrade-plan-footer {
      flex-direction: column;
  }

  #upgradeOverlay .downgrade-plan-popup-box {
    width: 100%;
  }
}

/* cancel plan popup css */

.modal,
.overlay {
    display: none;
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000066;
    z-index: 999;
}

/* Popup */
.modal {
    width:700px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    z-index: 1000;
    transition: 0.25s ease;
}

/* When popup is active */
.modal.active {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.overlay.active {
    display: block;
}

.close-btn{
  cursor:pointer;
  width:20px;
}

p{
  color: #323232;
  text-align: center;
  font-family: "Open Sauce One";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.reason-title{
  margin-top:20px;
  font-weight:bold;
  font-size:14px;
  color:#222;
}

.checkbox-group{
  margin-top:10px;
}

.checkbox-group label{
  display:flex;
  gap:7px;
  align-items:center;
  margin-bottom:10px;
  font-size:14px;
  color:#333;
  cursor:pointer;
}

.checkbox-group input{
  width:16px;
  height:16px;
  cursor:pointer;
}

.textarea-box{
  margin-top:15px;
}

textarea{
  width:-webkit-fill-available;
  height:110px;
  padding:10px;
  border:1px solid #ccc;
  border-radius:6px;
  resize:none;
  font-size:14px;
}

.char-count{
  text-align:right;
  font-size:12px;
  margin-bottom:4px;
  color:#666;
}

.conatct-footer-upgrade {
    margin-top:20px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap:15px;
    padding-top:20px;
}

.btn{
  padding:10px 20px;
  border-radius:6px;
  font-size:14px;
  cursor:pointer;
  border:1px solid transparent;
}

.btn-support{
  background:#1a73e8;
  color:#fff;
}

.btn-cancel{
  background:#fff;
  color:#d93025;
  border:1px solid #f2b8b5;
}

.modal {
      width: auto;
  }

/* Signup page css */

.signup-container {
  max-width: 1300px;
  margin: 30px auto;
  padding: 20px;
}

.user-signup-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.signup-flex {
  display: flex;
  gap: 25px;
}

.signup-left-box {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  flex: 1;
  box-shadow: 0 2px 6px #00000014;
}

.signup-left-box h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
}

label {
  font-size: 14px;
  font-weight: 400;
}

input, select, textarea {
  width: -webkit-fill-available;
  padding: 10px 12px;
  margin: 6px 0 18px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.signup-row {
  display: flex;
  gap: 15px;
}

.signup-row > div {
  flex: 1;
}

.signup-button {
  width: 100%;
  padding: 12px;
  background: #0052CC;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #2480FC;
}

.nav-tabs {
  height: 72px;
  display: flex;
  align-items: stretch;
}

.nav-tabs a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 18px;
  text-decoration: none;
  color: #6b6b6b;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}

.nav-tabs a.active {
  color: #111;
  font-weight: 700;
  border-bottom: 3px solid #2f6fed;
}

.signup-signup-btn:hover {
  background: #0053d6;
}

.signup-login-text {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
}

.signup-login-text a {
  color: #0052CC;
  font-weight: bold;
  text-decoration: none;
}

.signup-register-text {
  font-size: 13px;
  font-weight: 400;
  color: #323232;
}

.signup-register-text a {
  color: #0052CC;
  font-weight: bold;
  text-decoration: none;
}

.signup-right-box {
  flex: 0.8;
  display: flex;
  flex-direction: column;
}

.signup-plan-box {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 6px #00000014;
}

.signup-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.signup-inline-txt {
  width: 75%;
  padding-top: 20px;
  font-family: 'Inter', sans-serif;
}

.upgrade-plan-title {
  font-size: 20px;
  font-weight: 500;
}

.signup-plan-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.signup-plan-count {
  font-size: 28px;
  font-weight: bold;
  margin: 10px 0 20px;
}

.signup-plan-count span {
  font-size:14px;
  font-family: 'Inter', sans-serif;
}

.signup-list-align {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.signup-list-btm {
  margin-bottom: 20px;
  border-bottom: 1px solid #E4EBEF;
}

.signup-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.signup-list li {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}

.signup-list svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.green {
  color: #28b463;
}

.red {
  color: #e74c3c;
}

p.comparison-para {
  text-align: end;
}

.signup-price-btn {
  font-weight: 700;
  padding: 0;
  border: none;
  color: #0052CC;
  cursor: pointer;
}

select#state {
  height: 38px;
}

button#openPricing {
  background: transparent;
}

@media(max-width: 900px) {
  .signup-flex {
      flex-direction: column;
  }

}
@media (max-width: 480px) {
  .signup-container {
    padding: 5px;
  }
}

/* pricing popup css */

.pricing-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #00000080;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.pricing-page-wrap {
  background: white;
  overflow-y: auto;
  border-radius: 10px;
  position: relative;
}

/* Pricing Page popup css */

.pricing-page-wrap {
  width: 100%;
  height: -webkit-fill-available;
}

.pricing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #eef2f6;
}

.pricing-header h2 {
  margin: 0;
  font-weight: 800;
  font-size: 20px;
  color: #0b1220;
}

.pricing-header .right {
  color: #0b1220;
  opacity: 0.7;
  font-size: 18px;
  cursor: default;
}

.billing-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 12px 22px;
  margin-bottom: 50px;
}

.billing-toggle {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.toggle-buttons {
  display: flex;
  gap: 16px;
}

.toggle-buttons label {
  display: flex;
  align-items: baseline;
  margin: 0;
}

.toggle-pill {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  border: 1px solid #e6eaf1;
  padding: 6px;
  gap: 6px;
}

.toggle-pill button {
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
}

.reset-key-modal-box p {
  text-align: left;
}

.toggle-pill button.active {
  background: #0052CC;
  color: #fff;
  box-shadow: 0 10px 24px #1566FF1F;
}

.save-badge {
  background: #41EB2C;
  color: #000;
  border: 1px solid #41EB2C;
  padding: 4px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  justify-content: center;
  align-items: center;
  display: flex
}

.grid-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px;
}

.card-grid-wrap {
  grid-template-columns: repeat(6, 1fr);
}

span.req {
  font-size: 24px;
}

.features-col {
  padding-right: 16px;
  padding-top: 215px;
}

.features-col .features-title {
  font-weight: 800;
  font-size: 15px;
  color: #111827;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.requests-text{
  font-size:12px;
  font-weight:400;
}

.custom-feature-list{
  margin-top:12px; 
  width:100%; 
  display:flex; 
  flex-direction:column; 
  gap:18px; 
  align-items:flex-start; 
  z-index:2;
}

.feature-item {
  color: #6b7280;
  font-size: 14px;
  height: 20px;
  display: flex;
  align-items: center;
}

.pricing_plan {
  border-radius: 8px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 8px;
  min-width: 0;
}

.pricing_plan {
  position: relative;
    border-radius: 8px;

}

.pricing_plan.popular {
  padding-top: 14px !important;
}

.pricing_plan h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: #0b1220;
  text-align: left;
}

.pricing_plan .requests {
  font-size: 13px;
  color: #0052CC;
  font-weight: 700;
  text-align: left;
}

.pricing_plan .price {
  font-weight: 600;
  font-size: 16px;
  color: #0b1220;
  text-align: left;
}

.price-small {
  font-size: 13px;
  color: #4E545D;
}

.pricing_plan .cta {
  text-align: center;
  margin-top: 6px;
  display: inline-block;
  padding: 8px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid #0052CC;
  color: #0052CC;
  text-decoration: none;
}

.pricing_plan .cta.filled {
  background: #fff;
  color: #0052CC;
  border-color: #0052CC;
}

.pricing_plan.popular .cta.filled {
  background: #0052CC;
  color: #fff;
  border-color: #0052CC;
  box-shadow: 0 12px 30px #1566FF1F;
}

.pricing_plan.popular {
  transform: translateY(-8px);
  border-radius: 0 0 8px 8px;
  border: 1px solid #0052CC;
  box-shadow: 0 2px 24.6px -8px #0E29D8;
  padding: 0;
}

.popular-badge {
  background: #0052CC;
  color: #fff;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 11px;
  margin-bottom: 6px;
}

.pricing_plan.popular::before {
  content: "MOST POPULAR";
  position: absolute;
  top: 0;
  left: -1px;
  width: 100%;
  height: 32px;
  background: #0052CC;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-top: -33px;
  border: 1px solid #0052CC;
}

.pro-card {
  border-radius: 8px;
  padding: 19px 8px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-top: -3px;
}

.icons-col {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: left;
  width: 100%;
}

.icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.icon.ok {
  color: #22c55e;
  font-weight: 900;
}

.icon.no {
  color: #ef4444;
  font-weight: 900;
}

.pricing_plan.custom {
  background-image: url(/images/assets/Group-6356123.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 645px;
  padding-top: 28px;
  border: 2px dashed #d2d8e6;
}

.plan.custom {
  border: 2px dashed #d2d8e6;
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  text-align: left;
  padding: 14px;
}

.custom-top h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.custom-top p {
  padding: 8px 0;
  margin: 0 0 27px 0;
  color: #6b7280;
  font-size: 13px;
  text-align: left;
}

.contact {
  display: inline-block;
  padding: 8px 8px;
  background: #27344A;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  width:-webkit-fill-available;
  text-align: center;
  border: 1px solid #4A5567;
}

div#closePricing {
  cursor: pointer;
}

@media (max-width: 1180px) {
  .grid-wrap {
    grid-template-columns: 200px repeat(6, minmax(140px, 1fr));
    gap: 12px;
  }

.features-col {
    padding-right: 12px;
  }

}

@media (max-width: 980px) {
  .grid-wrap {
    gap: 12px;
    padding: 12px;
  }

.features-col {
    border-right: none;
    padding-right: 0;
  }

.plans-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

.pricing_plan {
    width: 100%;
  }

}

@media (max-width: 768px) {
    .features-col {
      padding-top: 0px;
    }

.pricing_plan.popular {
        margin-top: 30px;
    }

.grid-wrap .pricing_plan,
.grid-wrap .features-col {
  min-height: 200px;
}

}

/* logout btn css */

.logout-btn {
  border-radius: 4px;
  border: 1px solid #2480FC;
  background: #0065FF;
  display: inline-flex;
  padding: 12px 16px;
  align-items: center;
  gap: 18px;
}

.logout-btn a {
  color: #fff;
  text-decoration: none;
}

/* login page css */

.login-bg{
  margin: 0;
  padding: 0;
  font-family: 'Open Sauce One', sans-serif;
  background-image: url(/images/assets/Bg.png);
  background-repeat: no-repeat;
  background-position: bottom;
  display: flex;
  flex-direction: column;

}

.login-logo-wrapper {
  padding: 25px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-logo-circle {
  width: 32px;
  height: 32px;
  background: #000;
  border-radius: 50%;
}

.login-logo-text {
  font-size: 17px;
  font-weight: 600;
  color: #000;
}

.login-center-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: 10px;
  padding: 34px 36px 40px;
  box-shadow: 0 15px 40px #0000000D;
}

.login-card h2 {
  margin: 0 0 25px;
  font-size: 22px;
  font-weight: 600;
  color: #111827;
  font-family: 'Open Sauce One', sans-serif;
}

label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.login-input-box {
  width: 100%;
  margin-top: 6px;
  margin-bottom: 14px;
}

.login-input-box input {
  width: -webkit-fill-available;
  padding: 11px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #d0d7df;
  outline: none;
}

.login-input-box input:focus {
  border-color: #8bb1ff;
  box-shadow: 0 0 0 2px #1E64EB26;
}

.login-password-row {
  align-items: center;
  position: relative;
}

.login-password-row .eye-icon {
  position: absolute;
  right: 12px;
  font-size: 17px;
  color: #6b7280;
  cursor: pointer;
}

.login-hint {
  margin-top: -6px;
  font-size: 12px;
  color: #6b7280;
}

.login-hint-italic {
  font-style: italic;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  color: #3C3C3C;
}

.login-forgot {
  margin: 6px 0 20px;
  font-size: 14px;
  font-weight: 600;
}

.login-forgot a {
  text-decoration: none;
  color: #0052CC;
}

.login-btn {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  border: none;
  background: #0052CC;
  cursor: pointer;
}

.login-bottom-text {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: #111827;
}

.login-bottom-text a {
  color: #0b63ff;
  font-weight: 600;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 480px) {
  .login-card {
    width: 100%;
    padding: 26px 22px 32px;
  }

.login-card h2 {
    font-size: 20px;
  }

.login-logo-wrapper {
    padding: 20px;
  }

}

/* forgot password css */

.forgot-passowrd-bg{
  margin: 0;
  padding: 0;
  font-family: 'Open Sauce One', sans-serif;
  background-image: url(/images/assets/Bg.png);
  background-repeat: no-repeat;
  background-position: bottom;
  padding-bottom: 100px;
  padding-top: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.forgot-logo {
  position: absolute;
  top: 25px;
  left: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #000;
}

.forgot-logo .dot {
  width: 18px;
  height: 18px;
  background: #000;
  border-radius: 50%;
  margin-right: 8px;
}

.forgot-card {
  width: 40%;
  background: #fff;
  padding: 30px 28px;
  border-radius: 6px;
  box-shadow: 0px 2px 10px #0000000F;
  text-align: left;
}

.forgot-card h2 {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 600;
  color: #111;
}

.forgot-card p {
  margin: 0 0 20px 0;
  font-size: 13px;
  color: #555;
}

label {
  font-size: 13px;
  color: #111;
  margin-bottom: 5px;
  display: block;
}

input {
  width: -webkit-fill-available;
  padding: 10px;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 18px;
  outline: none;
}

.forgot-back {
  text-align: center;
  margin-top: 15px;
  font-size: 13px;
}

.forgot-back a {
  color: #0b63d4;
  text-decoration: none;
  font-weight: 500;
}

@media (max-width: 480px) {
  .forgot-card {
    width: 90%;
    padding: 25px 20px;
  }

}

/* Reset Password Popup Css */

.overlay {
  position: fixed;
  inset: 0;
  background: #00000073;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* Modal */
.reset-modal-box {
  background: #fff;
  width: 95%;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 5px 30px #00000026;
  overflow: hidden;
  animation: fadeUp .3s ease;
}

@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }

to   { transform: translateY(0); opacity: 1; }

}

.reset-header {
  padding: 20px 25px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reset-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.reset-header span {
  font-size: 25px;
  cursor: pointer;
}

.reset-content {
  padding: 0 25px 25px 25px;
}

.reset-content small {
  color: #3C3C3C;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
}

.verify-container h1 {
  font-weight: 500;
}

.verify-container h3 {
  font-weight: 500;
  margin-bottom: 50px
}

label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: #333;
}

.reset-input-wrapper {
  position: relative;
}

.forgot-card p {
  text-align: left;
}

.eye-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

small {
  color: #666;
  font-size: 12px;
}

.reset-footer {
  padding: 20px 25px;
  border-top: 1px solid #e5e5e5;
}

/* Edit email Popup css */

.edit-email-modal-box {
  background: #fff;
  width: 95%;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 5px 30px #00000026;
  overflow: hidden;
  animation: fadeUp .3s ease;
}

.edit-email-header {
  padding: 20px 25px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-email-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.edit-email-header span {
  font-size: 25px;
  cursor: pointer;
}

.edit-email-content {
  padding: 25px;
}

.edit-email-input-wrapper {
  margin-bottom: 20px;
}

input[type="email"] {
  padding: 14px 15px;
  border: 1px solid #cdd3dd;
  border-radius: 7px;
  font-size: 15px;
  outline: none;
}

.edit-email-footer {
  padding: 20px 25px;
  border-top: 1px solid #e5e5e5;
}

button.reset-pass-btn,.edit-email-btn {
  background: #0052cc;
  border: none;
  padding: 12px 35px;
  color: #fff;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
}

/* Reset Key Popup css */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000080;
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.reset-key-modal-box {
  width: 90%;
  max-width: 600px;
  background: #fff;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0px 2px 10px #0000001A;
  border: 1px solid #e5e7eb;
}

.reset-key-modal-box h2 {
  margin: 0 0 15px 0;
  font-size: 28px;
  font-weight: 700;
  color: #202124;
}

.reset-key-modal-box p {
  margin: 0 0 30px 0;
  font-size: 18px;
  line-height: 1.6;
  color: #4a4a4a;
}

.reset-key-btn-wrap {
  display: flex;
  gap: 15px;
}

.reset-key-btn {
  padding: 12px 35px;
  font-size: 18px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: 0.25s ease;
}

.reset-key-btn {
  border-radius: 4px;
  border: 1px solid #2480FC;
  background: #0052CC;
  color: #fff;
}

.reset-key-btn:hover {
  background: #004ccd;
  border-color: #004ccd;
}

.reset-key-cancel-btn {
  background: transparent;
  color: #0052CC;
  border-color: #0052CC;
}

.reset-key-cancel-btn:hover {
  background: #e8f1ff;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .reset-key-modal-box {
      padding: 25px;
  }

.reset-key-modal-box h2 {
      font-size: 22px;
  }

.reset-key-modal-box p {
      font-size: 16px;
  }

.reset-key-btn-wrap {
      flex-direction: column;
  }

.reset-key-btn {
      width: 100%;
      text-align: center;
  }
  .card-key-box {
    padding: 25px 0;
  }
}
/* Cancel popup css */

.cancel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #00000080;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.cancel-overlay .box {
  background: #fff;
  padding: 25px;
  width: 90%;
  max-width: 420px;
  border-radius: 10px;
  position: relative;
}

.cancel-plan-box {
  background: #fff;
  width: 100%;
  max-width: 520px;
  padding: 35px 30px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 2px 6px #00000014;
}

.cancel-plan-icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  /* background: #e5f8ec; */
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-plan-icon svg {
  width: 30px;
  height: 30px;
  stroke: #2ecc71;
}

.cancel-plan-box h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: #27344A;
}

.cancel-plan-box p {
  margin: 0 0 25px;
  font-size: 14px;
  color: #5a6371;
  line-height: 1.6;
}

.cancel-plan-btn {
    width: 230px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 12px 16px;
    background: #0057d9;
    border: 0;
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
}

@media (max-width: 480px) {
  .cancel-plan-box {
      padding: 28px 20px;
  }

.cancel-plan-box h2 {
      font-size: 18px;
  }

.cancel-plan-box p {
      font-size: 13px;
  }
}

.status-col {
  position: relative;
  min-height: 36px;
}

.status-text {
  display: inline-block;
  padding:3px 12px;
  font-size:12px;
  border-radius: 12px;
}

.download-invoice {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  color: #0b74ff;
  cursor: pointer;
  white-space: nowrap;
}

.download-invoice a {
  color: #0b74ff;
  text-decoration: none;
}

tbody tr:hover .status-text {
  visibility: hidden;
}

tbody tr:hover .download-invoice {
  opacity: 1;
  visibility: visible;
}

tbody.hover-rmv tr:hover td:nth-child(2),
tbody.hover-rmv tr:hover td:nth-child(3) {
  color: transparent;
}

.arrow-svg {
  display: flex;
  align-items: center;
  gap: 6px;
}

tbody tr:hover .download-invoice {
  display: inline-block !important;
  
}

.table-scroll {
  max-height: 300px;   
  overflow-y: auto;
  border-radius: 8px;
}

/* Optional: pretty scrollbar (WebKit browsers) */
.table-scroll::-webkit-scrollbar {
  width: 6px;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 5px;
}

.table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.three-dots-payment-first,.three-dots-payment-secound {
  position: relative;
  display: inline-block;
  /* width: 43%; */
  text-align: end;
  margin-left: auto;
}

/* span.cc_icon.visa {
  width: 25%;
} */

.payment-align {
  margin-left: 20px;
}

.card-vissa {
  display: flex;
  gap: 10px;
}

.three-dots-payment-btn,.three-dots-payment-btn-sec {
  background: transparent;
  border: none;
  font-size: 22px;
  font-weight: 700;
  color: #1C1B1F;
  cursor: pointer;
}

.payment-scroll {
  max-height: 120px;  
  overflow-y: auto;
  padding-right: 5px; 
}

/* Optional smooth custom scrollbar */
.payment-scroll::-webkit-scrollbar {
  width: 6px;
}

.payment-scroll::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 5px;
}

.payment-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.three-dot-payment-dropdown {
  position: absolute;
  top: 28px;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  padding: 8px 0;
  width: 130px;
  border-radius: 6px;
  display: none;
  z-index: 999;
  box-shadow: 0 4px 10px #00000026;
  animation: fadeIn 0.15s ease-in-out;
}

.three-dot-payment-dropdown a {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
  text-decoration: none;
  color: #333;
}

/* Smooth fade animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
}

.three-dot-payment-dropdown-sec {
  position: absolute;
  top: 28px;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 0;
  width: 160px;
  box-shadow: 0px 4px 12px #00000026;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 1;
}

.three-dot-payment-dropdown-sec.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.three-dot-payment-dropdown-sec a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.billing-align {
  text-align: center;
}

.billing-align h2 {
  padding-top: 20px;
}

/* Delete Payment Method Popup css */

.payment-dell-modal-box {
  background: #ffffff;
  width: 90%;
  max-width: 480px;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 20px #00000014;
  text-align: left;
}

.payment-dell-modal-box h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #111827;
}

.payment-dell-modal-box p {
  margin: 10px 0 25px;
  font-size: 15px;
  color: #4b5563;
  line-height: 1.4;
}

.payment-dell-btn-area {
  display: flex;
  gap: 12px;
}

.payment-dell-btn {
  padding: 10px 26px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: 0.2s;
}

.payment-dell-cancel-btn {
  background: #0d6efd;
  color: white;
}

.payment-dell-cancel-btn:hover {
  background: #0b5ed7;
}

.payment-delete-btn {
  background: transparent;
  color: #dc3545;
  border-color: #dc3545;
}

.payment-delete-btn:hover {
  background: #dc3545;
  color: white;
}

/* Responsive */
@media (max-width: 500px) {
  .payment-dell-modal-box {
      padding: 22px;
  }

.payment-dell-btn-area {
      flex-direction: column;
  }

.payment-dell-btn {
      width: 100%;
      text-align: center;
  }

}

/* Edit Payment Method Popup css */

.modal-overlay-edit {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #00000080;
  z-index: 9998;
  justify-content: center;
  align-items: center;
}

.edit-payment-modal-wrapper {
  background: #fff;
    max-width: 600px;
    margin: 60px auto;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 4px 16px #00000033;
}

/* Header */
.edit-payment-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 25px;
  border-bottom: 1px solid #e5e7eb;
}

.edit-payment-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.edit-payment-close-btn {
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  color: #444;
}

.edit-payment-modal-content {
  padding: 25px;
}

.edit-payment-modal-content label {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 6px;
}

/* Button */
.edit-payment-btn-primary {
  background: #0052CC;
  color: white;
  padding: 12px 26px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s;
}

.edit-payment-btn-primary:hover {
  background: #0052CC;
}

@media (max-width: 600px) {
  .row {
      flex-direction: column;
  }

}

/* upgrade plan inner payment section css */

.inner-payment-box {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  max-width: 900px;
  margin: auto;
  box-shadow: 0 3px 12px #0000000D;
}

.payment-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.payment-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e3e6ea;
  padding: 18px;
  border-radius: 10px;
  margin-bottom: 15px;
  background: #fff;
}

.upgrade-payment-btn-align {
  display: flex;
}

.btn-align{
  text-align: right;
  display: block;
}

.payment-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.payment-details {
  line-height: 1.3;
}

.payment-details strong {
  font-size: 15px;
  color: #333;
}

.payment-details span {
  font-size: 13px;
  color: #666;
}

.default-badge {
  border-radius: 8px;
  background: #0E29D826;
  color: #323232;
  padding: 6px 12px;
  font-size: 12px;
  margin-right: 15px;
  margin: 10px 0;
}

.default-badge-box{
  display: flex; 
  align-items: center; 
  gap: 10px;
}

.dots-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #777;
}

.payment-left input[type="radio"] {
  vertical-align: middle;
  position: relative;
  top: 5px;
  right: 5px;
  width: 25px;
}

.add-payment {
  margin-top: 15px;
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 4px;
  border: 1px solid #0052CC;
  background: #fff;
  color: #0052CC;
  cursor: pointer;
  transition: 0.2s;
}

.add-payment:hover {
  background: #2b78ff;
  color: #fff;
}

.card-row{
  flex:1;
}

.upgrade-box-scroller {
  overflow-y: auto;
  border-radius: 8px;
  height: fit-content;
}

.payment-sec {
  position: relative;
}

@media (max-width: 600px) {
  .payment-card {
      flex-direction: column;
      align-items: flex-start;
  }

}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000080;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.downgrade-modal-box {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  max-width: 450px;
  width: 90%;
  text-align: center;
}

.downgrade-modal-box h2 {
  text-align: center;
}

/* Delete Account Popup  */

/* Overlay */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000066;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

/* Popup */
.delete-popup-box {
  width: 100%;
  max-width: 600px;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px #0000001A;
}

.delete-popup-box h2 {
  font-size: 26px;
  margin-bottom: 12px;
  color: #111;
}

.delete-popup-box p {
  font-size: 16px;
  color: #444;
  line-height: 1.5;
  width: 90%;
}

/* Buttons */
.delete-popup-btn-area {
  margin-top: 25px;
  display: flex;
  gap: 10px;
}

.btn {
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  /* border: none; */
  cursor: pointer;
  font-weight: normal;
}

.cancel-btn {
  background: #0d6efd;
  color: #fff;
}

.delete-btn {
  background: #fff;
  color: red;
  border: 1px solid red;
}

/* Responsive */
@media (max-width: 480px) {
  .delete-popup-box {
      padding: 20px;
  }

.delete-popup-btn-area {
      flex-direction: column;
  }

.btn {
      width: 100%;
  }

}

/* alert email notify */

.alert-box {
  background: #e9f1ff;
  border-radius: 10px;
  padding: 25px 30px;
  position: relative;
  max-width: 1100px;
  margin-top: 20px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.alert-content {
  flex: 1;
}

.alert-box h3 {
  font-size: 20px;
  margin: 0 0 8px;
  color: #27344A;
  font-weight: 700;
}

.alert-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  width: 90%;
  color: #27344A;
  font-weight: 400;
  text-align: left;
}

/* Resend button */
.resend-btn {
  background: #fff;
  border: 1px solid #0d6efd;
  color: #0d6efd;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  white-space: nowrap;
}

/* Close icon */
.close-btn {
  top: 12px;
  right: 12px;
  font-size: 20px;
  cursor: pointer;
  color: #000;
  font-weight: bold;
  background: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 600px) {
  .alert-box {
      flex-direction: column;
      align-items: flex-start;
  }

.resend-btn {
      width: 100%;
      text-align: center;
  }

}

/* reset passowrd page css */

.reset-password-box {
  margin: 0 auto;
  max-width: 600px;
  width: 90%;
  background: #fff;
  margin-bottom: 50px;
  border-radius: 6px;
  border: 1px solid #EAF1F5;
  margin-top: 50px;
}

.reset-back {
  text-align: center;
  padding: 30px;
}

.reset-header-title {
  padding: 20px 20px;
  justify-content: space-between;
  align-items: center;
}

.reset-header-title p {
  text-align: left;
  margin-bottom: 0;
}

.reset-header-title h2 {
  margin: 0;
}

button.reset-submit-btn,button.forgot-submit-btn {
  background: #0052cc;
  border: none;
  padding: 12px 35px;
  color: #fff;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  font-family: 'Open Sauce One', sans-serif;
}

.reset-back a {
  text-decoration: none;
  color: #0052CC;
}

.reset-form-footer {
  padding: 0 20px 0 20px;
}

.password-change-box,.email-change-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px #0000001A;
  padding: 40px 30px;
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.chnage-icon {
  margin-bottom: 20px;
}

.password-change-box h2,.email-change-box h2 {
  margin: 10px 0;
  font-size: 22px;
  color: #222;
  font-weight: bold;
}

.password-change-box p,.email-change-box p {
  color: #666;
  font-size: 15px;
  margin-bottom: 25px;
}

button.reset-back-login-btn {
  background: #0052CC;
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

/* check email popup css */

.email-popup-overlay {
  position: fixed;
  inset: 0;
  background: #00000080;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.email-change-box {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 360px;
  text-align: center;
}

.outline-btn {
  background: none;
  border: 2px solid #0053d1;
  color: #0053d1;
  padding: 12px 28px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;

}

.outline-btn-orange{
  background: none;
  border-radius: 4px;
  border: 1px solid #E6670A;
  color: #E6670A;  
  padding: 12px 28px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}

.outline-btn:hover {
  background:#fff;
}

.outline-btn:hover {
  background:#fff;
}

/* verify-email page css */

.verify-container {
  width: 100%;
  max-width: 480px;
}

.verify-container p {
  margin-bottom: 30px;
}

.verify-circle {

  margin: 0 auto 25px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.verify-circle svg {
  width: 48px;
  height: 48px;
  stroke: white;
}

.verify-email-wrapper{
  margin: 0;
  font-family: 'Open Sauce One', sans-serif;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  background: #fff;
}

/* unsubscribed popup css */

.unsubscribed-popup-overlay {
  position: fixed;
  inset: 0;
  background: #00000066;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.unsubscribed-btn {
  background: #0057d9;
  color: #fff;
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 15px;
  display: inline-block;
  cursor: pointer;
  border: none;
}

.unsubscribed-box.icon svg {
  width: 30px;
  height: 30px;
  stroke: #2ecc71;
}

.unsubscribed-box .icon {
  margin-bottom: 15px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #e5f8ec;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unsubscribed-box {
  background: #fff;
  width: 100%;
  max-width: 520px;
  padding: 35px 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 6px #00000014;
}

/* main footer css */

.main-footer{
  background:#000;
  padding:50px 22px 30px;
  color:#fff;
}

.footer-wrap{
  padding-left: 20px;
  padding-right: 20px;
  margin:0 auto;
}

.footer-grid p.logo{
    display: flex;
    margin-left: -5px;
}

.footer-grid{
  display:grid;
  /* grid-template-columns: 200px 1fr 1fr 1fr 330px; */
  grid-template-columns: 240px 1fr 1fr 1fr 330px;
  gap:40px; 
  
  align-items:flex-start;
}

.footer-grid a img {
  filter: brightness(0) invert(1);
  width: 100%!important;
  height: 36px!important;
}

img.social-icon-img {
  filter: brightness(0.5);
}

.footer-brand{
  font-size:34px;
  font-weight:800;
  margin-bottom:10px;
}

.col-footer h4{
  margin:0 0 18px;
  font-size:16px;
  font-weight:600;
  color: #fff;
}

.col-footer ul{
  list-style:none;
  margin:0;padding:0;
}

.col-footer li{
  margin-bottom:10px;
}

.col-footer li a{
  color:#bdbdbd;
  font-size:14px;
  cursor:pointer;
  text-decoration: none;
}

.col-footer li:hover{color:#fff;}

.newsletter h4{
  margin:0 0 15px;
  font-size:16px;
  font-weight:600;
  text-align: left;
  color: #fff;
}

.newsletter-row{
  display:flex;
  width:100%;
  gap:10px;
  align-items: flex-start;
  border-radius: 4px;
  border: 0.5px solid #F1EDE8;
  padding: 5px;
}

.newsletter-row input{
  flex:1;
  padding:12px 14px;
  background:transparent;
  border:none;
  color:#fff;
  margin: 0;
}

.newsletter-row input::placeholder{color:#7b7b7b;}

.newsletter-row button{
  background:#1976ff;
  color:#fff;
  padding:12px 18px;
  font-weight:600;
  border:none;
  border-radius:6px;
  white-space:nowrap;
  cursor:pointer;
}

.newsletter-row button:hover{
  background:#1976ff;
}

.divider-footer{
  border-top:1px solid #242424;
  margin:40px 0 25px;
}

.show-mobile {
  display: none;
}

.bottom-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.social-row{
  display:flex;
  gap:12px;
}

.social-icon{
  width:36px;
  height:36px;
  display:flex;
  justify-content:center;
  align-items:center;
  border: 0.5px solid #5f6062;
  border-radius: 4px;
}

.footer-grid p {
  margin: 0;
}

select:has(option[value=""]:checked) {
  color: #757575;
  font-family: 'Open Sauce One', sans-serif;
}

#country_code option, .state-select option {
  color: #000 !important;
}

.social-icon svg{
  width:17px;
  height:17px;
  fill:#d1d1d1;
}

.bottom-links{
  display:contents;
  gap:26px;
}

.bottom-links a{
  color:#bdbdbd;
  font-size:14px;
  cursor:pointer;
  text-decoration: none;
}

.footer-grid .col-footer {
  text-align: left;
}

.bottom-links a:hover{color:#fff;}

@media (max-width:900px){
  .footer-grid {
    display: block;
  }
}

@media (max-width:600px){
  .footer-grid {
    display: block;
  }

.newsletter-row{flex-direction:column;}

.newsletter-row button{width:100%;}

.bottom-bar{
    flex-direction:column;
    text-align:center;
  }
}

.social-row{justify-content:center;}

/* error messages */

.error-msg {
  color: #e63946;
  font-size: 12px;
  margin-bottom: 15px;
}

  .pricing-card-align .pricing_plan.custom .custom-top{
display: flex;
    min-height: 148px;
    flex-direction: column;
    justify-content: space-between;
  }  

.pricing_plan .icons-col .price {
  margin-top: 7px;
}

.error-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: #FB3640;
}

.error-icon {
  display: flex;
  flex-shrink: 0;
}

.error-text {
  line-height: 1.4;
}

/* passowrd eye */

.password-field {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 14px;
  top: 28px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #9aa0a6;
  user-select: none;
}

.toggle-password:hover {
  color: #000;
}

/* Mobile devices (up to 767px) */
@media only screen and (max-width: 767px) {
  .wrap {
    display: block;
  }
  .footer-grid {
    display: block;
  }
}

/* Mobile header layout */
.mobile-left {
  display: none;
  align-items: center;
  gap: 12px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.hamburger span {
  width: 22px;
  height: 3px;
  background: #000;
  border-radius: 2px;
}

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 999;
  border-top: 1px solid #eee;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.mobile-menu a {
  padding: 14px 0;
  text-decoration: none;
  color: #000;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
}

/* Select */
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.select-wrapper select {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 27px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #555;
  background: url(/images/assets/keyboard_arrow_down.svg);
  background-size: contain;
  width: 20px;
  height: 20px;
}
/*  */

a,
button,
input,
select,
textarea {
  cursor: pointer;
}

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

.payment-tabs-mobile {
  display: none;
}

select {
  color: #000 !important;
}

select option {
  color: #000 !important;
}

select:invalid {
  color: #000 !important;
}

select,
select option {
    color: #000 !important;
}

/* MOBILE BREAKPOINT */
@media (max-width: 768px) {

  .brand .logo,
  .nav-tabs {
    display: none;
  }

  .brand_logo_mobile .logo_mobile{
    display: block !important;
  }

  .support-popup {
    right: 20px;
  }

  .mobile-left {
      display: flex;
  }

  .hamburger {
      display: flex;
  }

  .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
  }

  .nav-actions {
      display: flex;
      gap: 12px;
      align-items: center;
  }

  .upgrade-payment-box {
    width: auto;
    margin-bottom: 20px;
  }

  .summary-header {
    display: block;
  }

  .summary-checkboxes {
    margin-top: 15px;
  }

  .conatct-footer-upgrade {
    width: auto;
    display: block !important;
  }

  .plan-item-footer-text {
    margin-bottom: 20px;
  }

  .contact-btn {
    text-align: center;
  }

  .platinum-row {
    display: block;
  }

  .small_platinum {
    margin-bottom: 20px;
  }

  .upgrade-btn {
    width: 100%;
  }

  .signup-row {
    display: block;
  }

  .signup-inline {
    display: block;
  }

  .billing-row {
    justify-content: flex-start;
  }

  .plan-desc-check {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    text-align: left;
  }

  .plan-desc-check .feature {
    align-items: center;
    font-size: 14px;
  }

  .plan-desc-check img {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
  }

  p.signup-register-text {
    text-align: left;
  }

  a.btn-ghost {
    display: none;
  }

  .profile-row {
    display: block;
  }

  .row-2 {
    display: block;
  }

  .inner {
    padding: 20px 20px;
    background: #eef2f4;
  }

  .note {
    display: block;
  }

  .upgrade-platinum {
    display: block;
  }

  .card-grid-wrap {
    overflow-x: auto;
    width: 140px;
  }

  .features-col{
    padding-top: 205px;
  }

  .pricing_plan.popular h3 {
    margin-top: -30px;
  }

  .payment-tabs-mobile {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 20px;
  }

  .payment-tab {
    background: none;
    border: none;
    padding: 10px 12px;
    font-weight: 500;
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
  }

  .payment-tab.active {
    color: #323232;
    border-bottom: 2px solid #0052CC;
    background: none;
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
  }

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

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

  .container-payment {
    display: block;
    margin: 0;
  }

  .sidebar-payment {
    width: 100%;
  }
  
  span.payment-heading {
    display: none;
  }

  .scroll-horizontlly {
    overflow: hidden;
  }

  .scroll-horizontlly tbody {
    background: #fff;
  }

  #tab-methods h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .payment-scroll {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .payment-box {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #fff;
  }

  .payment-box .cc_icon {
    flex-shrink: 0;
    width: 48px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .payment-align {
    flex: 1;
  }

  .payment-align div {
    font-weight: 600;
    font-size: 15px;
    color: #111827;
  }

  th {
    text-align: center;
  }

  td {
    text-align: center;
  }

  .payment-align small {
    font-size: 13px;
    color: #6b7280;
  }

  .three-dots-payment-first {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .three-dots-payment-btn-sec {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
  }

  .default-label {
    display: inline-block;
    margin-top: 50px;
    padding: 6px 12px;
    font-size: 13px;
    background: #e0e7ff;
    color: #1e3a8a;
    border-radius: 999px;
    width: fit-content;
    position: absolute;
    margin-left: 0;
  }

  .payment-box + .payment-box {
    border-top: none;
  }

  #tab-methods h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  #tab-methods .payment-heading {
    flex: 1;
    text-align: left;
  }

  #tab-methods .add-payment-close-btn {
    margin-left: auto;
    white-space: nowrap;
    font-size: 14px;
    color: #2563eb;
    cursor: pointer;
  }

  .card-payment {
    box-shadow: none;
  }

  .hidden-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block;
  }

  .profile-inline {
    display: flex;
    gap: 20px;
  }

  .avatar-icon {
    height: 50px;
    width: 50px;
  }

  .profile-actions {
    margin-left: 55px;
  }

  thead.th-bg th:first-child span{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  
  thead.th-bg th:last-child span{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  th:first-child, td:first-child {
    text-align: start;
  }

  th:last-child, td:last-child {
    text-align: end;
  }

  .status-col {
    min-width: 100px;
  }

}

@media (max-width: 480px) {
  .note {
    display: flex;
  }
}

@media only screen
and (min-width: 834px)
and (max-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {

  .summary-checkboxes {
    margin-left: 10px;
  }

  .signup-row {
    display: block;
  }

  .summary-box {
    padding: 15px;
  }

  .signup-inline {
    display: block;
  }

  .pricing_plan.popular {
    margin-top: 30px;
  }

  .pricing_plan.popular h3 {
    margin-top: -30px;
  }

  .grid-wrap {
    grid-template-columns: 200px repeat(6, minmax(140px, 1fr));
  }

  .pricing-card-align.grid-wrap.card-grid-wrap {
    overflow-x: auto;
  }

  .pricing-page-wrap {
    overflow-y: unset;
  }

  .card-grid-wrap {
    width: 700px;
  }  
}