/* ============================================
   BIGDOT DESIGN SYSTEM — theme-control.css
   ============================================ */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap");

:root {
  /* ── Fonts ── */
  --site-primary-font: "Plus Jakarta Sans", sans-serif;
  --site-secondary-font: "Cormorant Garamond", Georgia, serif;
  --site-tertiary-font: "Bricolage Grotesque", sans-serif;

  /* Semantic font roles — use these in prompts */
  --site-heading-font: var(--site-secondary-font);
  --site-body-font: var(--site-primary-font);
  --site-display-font: var(--site-tertiary-font);

  /* ── Colors ── */
  --site-primary-color: #15285d;
  --site-secondary-color: #f2f4ff;
  --site-tertiary-color: #2255e8;
  --site-quaternary-color: #e0dad0;
  --site-text-color: #1c1a16;
  --site-text-muted-color: #808080;
  --site-cta-color: #f05c29;

  /* State colors */
  --site-success-color: #16a34a;
  --site-error-color: #dc2626;
  --site-warning-color: #d97706;
  --site-info-color: var(--site-tertiary-color);

  /* Surface & border */
  --site-border-color: #e0dad0;
  --site-input-bg: #ffffff;
  --site-input-border: #d1cfc9;
  --site-overlay-bg: rgba(28, 26, 22, 0.5);
  --glass-white: rgba(255, 255, 255, 0.95);

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radius ── */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0px 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-card: 0px 4px 20px rgba(0, 0, 0, 0.05);

  /* ── Transitions ── */
  --transition: all 0.2s ease;
  --transition-fast: all 0.15s ease;

  /* Tailwind shadow resets */
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 1.6;
  font-family: var(--site-body-font);
  color: var(--site-text-color);
}

/* ============================================
      COLOR UTILITIES
      ============================================ */
.primaryColor {
  color: var(--site-primary-color) !important;
}

.primaryColor a {
  color: var(--site-primary-color) !important;
}

.primaryBgColor {
  background-color: var(--site-primary-color) !important;
}

.secondaryColor {
  color: var(--site-secondary-color) !important;
}

.secondaryColor a {
  color: var(--site-secondary-color) !important;
}

.secondaryBgColor {
  background-color: var(--site-secondary-color) !important;
}

.tertiaryColor {
  color: var(--site-tertiary-color) !important;
}

.tertiaryBgColor {
  background-color: var(--site-tertiary-color) !important;
}

.headingColor {
  color: var(--site-text-color) !important;
}

.headingColor a {
  color: var(--site-text-color) !important;
}

.linkColor {
  color: var(--site-primary-color) !important;
}

.linkColor a {
  color: var(--site-primary-color) !important;
}

.linkColor a:hover {
  color: var(--site-cta-color) !important;
}

.iconColor {
  color: var(--site-primary-color) !important;
}

.borderColor {
  border-color: var(--site-border-color) !important;
}

.paragraphColor {
  color: var(--site-text-muted-color) !important;
}

.ctaColor {
  color: var(--site-cta-color) !important;
}

.ctaBgColor {
  background-color: var(--site-cta-color) !important;
}

.offerBg {
  background-color: var(--site-cta-color) !important;
}

.secondaryBtnBgColor {
  background-color: var(--site-cta-color) !important;
}

/* State colors */
.successColor {
  color: var(--site-success-color) !important;
}

.errorColor {
  color: var(--site-error-color) !important;
}

.warningColor {
  color: var(--site-warning-color) !important;
}

/* ============================================
      TYPOGRAPHY — FONT FAMILIES
      ============================================ */
.fontPrimary {
  font-family: var(--site-primary-font) !important;
}

.fontSecondary {
  font-family: var(--site-secondary-font) !important;
}

.fontTertiary {
  font-family: var(--site-tertiary-font) !important;
}

/* ── Font Weights (fixed) ── */
.font100 {
  font-weight: 100 !important;
}

.font200 {
  font-weight: 200 !important;
}

.font300 {
  font-weight: 300 !important;
}

.font400 {
  font-weight: 400 !important;
}

.font500 {
  font-weight: 500 !important;
}

.font600 {
  font-weight: 600 !important;
}

.font700 {
  font-weight: 700 !important;
}

.font800 {
  font-weight: 800 !important;
}

.font900 {
  font-weight: 900 !important;
}

/* ── Font Sizes ── */
.font9 {
  font-size: clamp(8px, 0.6vw, 9px);
  line-height: 1.4;
}

.font10 {
  font-size: clamp(9px, 0.7vw, 10px);
  line-height: 1.5;
}

.font11 {
  font-size: clamp(9px, 0.75vw, 11px);
  line-height: 1.45;
}

.font12 {
  font-size: clamp(10px, 0.85vw, 12px);
  line-height: 1.5;
}

.font13 {
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.54;
}

.font14 {
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 1.5;
}

.font16 {
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.5;
}

.font18 {
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.5;
}

.font20 {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.4;
}

.font22 {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
}

.font24 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
}

.font26 {
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.5;
}

.font28 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.3;
}

.font30 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.33;
}

.font32 {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.35;
}

.font36 {
  font-size: clamp(30px, 3vw, 36px);
  line-height: 1.35;
}

.font40 {
  font-size: clamp(32px, 3.2vw, 40px);
  line-height: 1.45;
}

.font48 {
  font-size: clamp(38px, 3.8vw, 48px);
  line-height: 1.2;
}

.font60 {
  font-size: clamp(48px, 4vw, 60px);
  line-height: 1.15;
}

/* ── Line Height ── */
.lh1 {
  line-height: 1 !important;
}

.lh12 {
  line-height: 1.2 !important;
}

.lh14 {
  line-height: 1.4 !important;
}

.lh16 {
  line-height: 1.6 !important;
}

.lhNormal {
  line-height: normal !important;
}

/* ============================================
      BORDER RADIUS (fixed — all unique)
      ============================================ */
.br0 {
  border-radius: var(--radius-none) !important;
}

.br4 {
  border-radius: var(--radius-sm) !important;
}

.br8 {
  border-radius: var(--radius-md) !important;
}

.br12 {
  border-radius: var(--radius-lg) !important;
}

.br16 {
  border-radius: var(--radius-xl) !important;
}

.br24 {
  border-radius: var(--radius-2xl) !important;
}

.brFull {
  border-radius: var(--radius-full) !important;
}

/* Keep old names for backward compatibility */
.br5 {
  border-radius: var(--radius-sm) !important;
}

.br10 {
  border-radius: var(--radius-md) !important;
}

.br50 {
  border-radius: var(--radius-full) !important;
}

/* ============================================
      SHADOWS & CARDS
      ============================================ */
.shadowSm {
  box-shadow: var(--shadow-sm) !important;
}

.shadowMd {
  box-shadow: var(--shadow-md) !important;
}

.shadowLg {
  box-shadow: var(--shadow-lg) !important;
}

.shadowNone {
  box-shadow: none !important;
}

.cardBoxShadow {
  box-shadow: var(--shadow-card);
  border: 1px solid var(--site-border-color) !important;
}

/* ============================================
   INSTACITI MANAGER — instaciti-manager.css
   ============================================ */

:root {
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --glass-white: rgba(255, 255, 255, 0.95);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  /* background: #f8f9ff; */
  color: var(--site-text-color);
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 24px;
  font-family: var(--site-primary-font) !important;
}

.primaryColor {
  color: var(--site-primary-color) !important;
}

.primaryColor a {
  color: var(--site-primary-color) !important;
}

.primaryBgColor {
  background-color: var(--site-primary-color) !important;
}

.secondaryColor {
  color: var(--site-primary-color) !important;
}

.secondaryColor a {
  color: var(--site-primary-color) !important;
}

.secondaryBgColor {
  background-color: var(--site-secondary-color) !important;
}

.linkColor {
  color: var(--site-primary-color) !important;
}

.linkColor a {
  color: var(--site-primary-color) !important;
}

.iconColor {
  color: var(--site-primary-color) !important;
}

.iconColor a {
  color: var(--site-primary-color) !important;
}

.borderColor {
  border-color: var(--site-primary-color) !important;
}

.offerBg {
  background-color: var(--site-cta-color) !important;
}

.secondaryBtnBgColor {
  background-color: var(--site-cta-color) !important;
}

.instaPrimaryColor {
  color: var(--site-primary-color);
}

.instaPrimaryColor {
  color: var(--site-primary-color);
}

.instaPrimaryColor {
  color: var(--site-primary-color);
}

.instaPrimaryBgColor {
  background-color: var(--site-primary-color);
}

/* Theme Controls Ends Here */

/* Height Control CSS Starts Here */

html,
body {
  margin: 0;
  padding: 0;
  height: auto;
  overflow-x: hidden;
}

app-root,
app-publish {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
}

/* Height Control CSS Ends Here */

/* Main CSS Starts Here */

a {
  text-decoration: none !important;
}

.formField .input-group-text {
  border: 1px solid #cddaff !important;
}

.effectControls {
  border-radius: 0.5rem !important;
}

.pinkColor {
  color: #ef1c74 !important;
}

.pinkBgColor {
  background-color: #ef1c74 !important;
}

.pinkButton {
  background-color: #ef1c74 !important;
}

.pinkBgColor:hover {
  background-color: #bf165c !important;
}

.mutedColor {
  color: #505050;
}

.lightMutedColor {
  color: #a39797;
}

.colorWhite {
  color: #ffffff !important;
}

.blackColor {
  color: #000000;
}

.blackColor:hover {
  color: #000000 !important;
}

.mutedText {
  color: #4d4d4e !important;
}

.muted1 {
  color: #898989 !important;
}

.redColor {
  color: #e30b0b !important;
}

p {
  font-size: clamp(10px, 0.9vw, 14px);
  margin-bottom: 10px;
}

.textDecorationNone a {
  text-decoration: none;
}

.primaryBorderBottom {
  border-bottom: 2px solid var(--site-primary-color);
}

.lightRedBg {
  background-color: #fff6f9;
}

.lightBlueBg {
  background-color: #ecedff;
}

.lightYellowBg {
  background-color: #fffaef;
}

.lightGreenBg {
  background-color: #e2fee7;
}

.removeFocus:focus {
  box-shadow: none;
}

.redBg {
  background-color: #df1414 !important;
}

.primaryBlueBg {
  background-color: #0b75d2 !important;
}

.customBackgroundColor b {
  font-weight: 600;
}

/* dashboard css start here */

aside .sidebar {
  width: 270px !important;
  height: 100vh;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  left: 0px;
  background-color: var(--site-primary-color);
  padding: 30px 20px;
  opacity: 1;
  z-index: 12;
}

.italicfontstyle {
  font-style: italic;
}

aside .sidebar .logo {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  display: block !important;
  width: 100%;
}

.sidebar .logo img {
  width: 135px;
}

.splashText {
  width: 300px;
}

aside .sidebar .logo i {
  width: 35px;
  height: 35px;
  background: var(--site-primary-color);
  font-size: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  border: 2px solid #fff;
  position: absolute;
  right: 5px;
  top: 35px;
}

aside .sidebar::-webkit-scrollbar {
  width: 7px;
}

aside .sidebar::-webkit-scrollbar-thumb {
  background: #f15a25 !important;
}

.brandingMenu img {
  margin-right: 10px;
  filter: invert(1) brightness(1500);
}

aside .sidebar ul li a img {
  margin-right: 10px;
}

aside .sidebar .singleMenu::after {
  display: none;
}

aside .sidebar .singleMenu.active {
  background-color: #ffffff;
  color: var(--site-primary-color) !important;
}

aside .sidebar .accordion-button:not(.collapsed) {
  background-color: #ffffff;
  color: var(--site-primary-color);
  box-shadow: none;
}

aside .sidebar .accordion-button:not(.collapsed) img {
  filter: none !important;
}

aside .sidebar .accordion-item {
  border: none;
  background-color: transparent;
}

aside .sidebar .accordion-button {
  background-color: transparent;
  color: #ffffff;
}

aside .sidebar .accordion-button:not(.collapsed)::after {
  background-image: url(https://dkzxkcjlbnjui.cloudfront.net/portal/instaciti-manager/images/down.svg);
  transform: rotate(-0deg);
}

aside .sidebar .accordion-button::after {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  content: "";
  background-image: url(https://dkzxkcjlbnjui.cloudfront.net/portal/instaciti-manager/images/down2.svg);
  background-size: contain;
  transition: transform 0.2s ease-in-out;
  transform: rotate(0deg);
  position: relative;
  background-position: right;
}

aside .sidebar .accordion-item .accordion-button {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 0;
  display: flex;
  align-items: center;
  font-weight: 600;
  padding-right: 30px;
}

aside .sidebar .accordion-item .accordion-button img {
  margin-right: 10px;
  filter: invert(1) brightness(1500);
}

aside .sidebar .accordion {
  margin-right: -20px;
}

aside .sidebar .accordion-body ul {
  margin-top: 0px;
}

aside .sidebar .accordion-body ul li {
  padding: 0.5rem 1.25rem;
  color: wheat;
  margin-bottom: 0;
}

aside .sidebar .accordion-body ul li i {
  margin-right: 10px;
  font-size: 16px;
}

aside .sidebar .needHelp {
  background-color: #f5f1ff;
  border-radius: 8px;
  padding: 20px 10px;
  margin-top: 20px;
  position: absolute;
  /* bottom: 10px; */
  width: 87%;
}

aside .sidebar .needHelp h5 {
  color: black;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
}

aside .sidebar .needHelp p {
  color: #6d6d6d;
  margin-bottom: 0;
}

aside .sidebar .needHelp img {
  margin-right: 10px;
}

aside .sidebar .needHelp .btn {
  background-color: var(--site-primary-color);
  color: #ffffff;
  width: 100%;
  margin-top: 20px;
}

aside .sidebar .subMenu .accordion-button:not(.collapsed) {
  background: transparent;
  color: #ffffff;
}

aside .sidebar .subMenu .accordion-button::after {
  background-image: url(https://dkzxkcjlbnjui.cloudfront.net/portal/instaciti-manager/images/down3.svg);
  transform: rotate(-90deg);
}

aside .sidebar .subMenu .accordion-button:not(.collapsed)::after {
  background-image: url(https://dkzxkcjlbnjui.cloudfront.net/portal/instaciti-manager/images/down3.svg);
  transform: rotate(-0deg);
}

aside .sidebar .subMenu {
  background: var(--site-primary-color);
  border-radius: 8px;
}

.accordion-item:last-of-type .accordion-button.collapsed:focus {
  box-shadow: none !important;
}

.dashboardContainer .famousOne .todos {
  display: flex;
  align-items: flex-start;
}

.dashboardContainer .famousOne .todos img {
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
  margin-right: 25px;
  width: 80px;
}

.dashboardHeading img {
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
  margin-right: 25px;
  width: 70px;
}

.dashboardContainer .famousOne h5 {
  margin-bottom: 25px;
  border-left: none !important;
  padding-left: 0px;
  line-height: 1;
  color: var(--site-primary-color);
  position: relative;
  padding-bottom: 10px;
}

.dashboardContainer .famousOne h5::before {
  content: "";
  width: 100px;
  height: 2px;
  background-color: #c9c0e1;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.dashboardContainer .famousOne ul .heading {
  font-size: 22px;
  color: #333;
  font-weight: 700;
  margin-bottom: 15px;
}

.dashboardContainer {
  width: calc(100% - 270px);
  margin-left: auto;
}

.dashboardContainer .topbar .searchBox {
  position: relative;
  display: none;
}

.dashboardContainer .topbar .searchBox i {
  position: absolute;
  left: 20px;
  top: 10px;
}

.dashboardContainer .topbar .searchBox input {
  padding-left: 45px;
}

.dashboardContainer .topbar .resturentName {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  margin-bottom: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-body .ms-3 h3.mb-0.blackColor {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboardContainer .topbar .location {
  margin-bottom: 0px;
  font-size: clamp(13px, 1.2vw, 16px);
}

.dashboardContainer .topbar ul li {
  list-style: none;
  display: inline-block;
  margin-left: 5px;
}

.dashboardContainer .topbar ul li .dropdown-toggle::after {
  display: none;
}

.dashboardContainer .topbar ul li .dropdown-menu {
  border-color: #e9e9e9;
  padding: 5px;
}

.dashboardContainer .topbar ul li .dropdown-item {
  font-size: clamp(10px, 0.9vw, 14px);
  padding-bottom: 5px;
  color: #5a5959;
  font-weight: 600;
}

.dashboardContainer .topbar ul li .dropdown-item:hover {
  background-color: #fff;
}

.dashboardContainer .topbar ul li .dropdown-item i {
  color: #f15a25;
  margin-right: 5px;
}

.topbar.cardBoxShadow .topbar {
  padding: 0px;
}

.dashboardContainer .topbar {
  background-color: white !important;
  padding: 10px 20px;
  border-radius: 8px;
  position: sticky;
  top: 0px;
  z-index: 111;
  /* border: 1px solid rgba(0, 0, 0, 0.125); */
}

.dashboardContainer .strip {
  width: 100%;
  height: 35px;
  position: fixed;
  top: 0px;
  right: -0%;
  /* background-color: #e9ecee; */
  z-index: 1;
}

.customBackgroundColor {
  /* padding: 0px 15px; */
  margin-bottom: 20px;
}

.dashboardContainer .breadcrumpArea {
  padding: 15px 0px;
  /* padding-bottom: 35px; */
}

.dashboardContainer .breadcrumpArea .breadcrumb-item a {
  color: #000 !important;
  /* text-decoration: none; */
  font-weight: 600;
  margin-left: 0px !important;
}

.table td,
.table th {
  vertical-align: middle;
}

.otherSection .responsiveTable table.table th,
.otherSection .responsiveTable table.table td {
  text-align: center;
}

.responsiveTable table.table td {
  font-size: clamp(11px, 0.9vw, 13px) !important;
  font-weight: 400;
  /* border: 1px solid #ced4da; */
}

.responsiveTable table.table th {
  font-weight: 500;
  font-size: clamp(12px, 1vw, 14px) !important;
  border: 1px solid #ced4da;
}

.container.navbarCss img.img-fluid {
  width: 100px;
}

.btn.pinkBgColor.invoiceSwitch {
  padding: 2px 10px !important;
  font-weight: 400 !important;
  border-radius: 5px !important;
  font-size: clamp(12px, 1vw, 14px);
  background-color: #f15a25 !important;
}

.dashboardContainer .breadcrumpArea .breadcrumb-item.active {
  color: var(--site-primary-color) !important;
  font-weight: 600;
}

.dashboardContainer .breadcrumpArea .searchBox {
  position: relative;
  width: 83%;
  display: inline-block;
  /* margin-right: 15px; */
}

.dashboardContainer .breadcrumpArea .searchBox i {
  position: absolute;
  top: 14px;
  left: 15px;
  color: #a8a8a8;
  font-weight: 400;
  font-size: clamp(12px, 1.1vw, 16px);
}

.dashboardContainer .breadcrumpArea .searchBox input {
  padding-left: 40px !important;
  border-radius: 8px;
  border-color: #e4e4e4 !important;
}

.dashboardContainer .breadcrumpArea a {
  text-decoration: none;
  color: #000000;
  margin-right: 10px;
}

.dashboardContainer .dashboardBtns .btnPurple {
  background-color: var(--site-primary-color);
  color: #ffffff;
  font-size: clamp(10px, 0.9vw, 14px);
  border-radius: 8px;
  min-width: 315px;
  text-align: left;
  padding: 8px 15px;
}

.dashboardContainer .dashboardBtns .btnPurple img {
  margin-right: 5px;
}

.dashboardContainer .dashboardBtns .btnRed {
  background-color: #e30b3f !important;
  color: #ffffff;
  font-size: clamp(10px, 0.9vw, 14px);
  border-radius: 8px;
  min-width: 315px;
  padding: 8px 15px;
}

.dashboardContainer .enterIntro {
  padding: 20px;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
}

.customPaddingCard {
  padding: 20px;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
}

.enterIntro.cardBoxShadow label.font600.instaPrimaryColor.ms-2 {
  width: initial !important;
  color: #495057;
  font-weight: 500 !important;
}

/* .dashboardContainer .enterIntro select {
  margin-bottom: 20px;
  padding: 8px !important;
} */

.dashboardContainer .enterIntro .media {
  /* border-radius: 8px; */
  height: 250px;
  object-fit: cover;
  /* margin-bottom: 20px; */
  width: 100%;
}

.dashboardContainer .enterIntro th {
  padding: 12px;
  vertical-align: middle;
}

.dashboardContainer .enterIntro td {
  font-size: clamp(10px, 0.9vw, 14px);
  vertical-align: middle;
  padding: 12px;
}

.dashboardContainer .enterIntro .applyDiscount {
  display: flex;
  justify-content: space-between;
  padding: 15px 0px;
  margin: 15px 0px;
  margin-bottom: 0px;
}

.dashboardContainer .enterIntro .applyDiscount .form-check:first-child {
  padding-top: 0px;
}

.dashboardContainer .enterIntro .applyDiscount .form-check {
  padding-top: 15px;
}

.dashboardContainer .enterIntro .discountBox .discount {
  margin-top: 15px;
  width: 200px;
}

.dashboardContainer .enterIntro .discountBox .installment {
  margin-top: 15px;
  width: 250px;
}

.dashboardContainer .enterIntro .discountBox .discount {
  display: none;
}

.dashboardContainer .enterIntro .discountBox .installment {
  display: none;
}

.dashboardContainer .enterIntro .discountBox select {
  font-size: clamp(10px, 0.9vw, 14px);
  color: gray;
}

hr {
  color: rgba(0, 0, 0, 0.125);
  opacity: 1;
}

.dashboardContainer
  .enterIntro
  .form-check.d-block
  h6
  input.form-control.ng-untouched {
  margin-top: 10px;
}

.dashboardContainer .enterIntro .form-check.d-block h6 {
  display: flex;
  align-items: center;
  font-weight: 400 !important;
}

/* .dashboardContainer .enterIntro label {
  font-size: clamp(10px, 0.9vw, 14px);
  margin-bottom: 0px !important;
  margin-left: 5px;
} */

form.row.g-3.editForm input#inlineCheckbox1 {
  margin-top: 6px;
}

.dashboardContainer .enterIntro .row.businessColorScheme label {
  margin-right: 5px;
}

.enterIntro.cardBoxShadow .row {
  margin-bottom: 0px;
}

.dashboardContainer .enterIntro .btnPurple {
  background-color: var(--site-primary-color);
  color: #ffffff;
  font-size: 16px;
  padding: 10px 25px !important;
  font-weight: 600;
}

.dashboardContainer .enterIntro .btnRed {
  background-color: #e30b3f !important;
  color: #ffffff;
  font-size: clamp(10px, 0.9vw, 14px);
  padding: 10px 25px;
  margin-top: 10px;
}

.dashboardContainer .enterIntro .btnYellow {
  background-color: #e0a70c !important;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 25px;
  font-weight: 600;
  border-radius: 10px !important;
}

.dashboardContainer .enterIntro input {
  font-size: clamp(10px, 0.9vw, 14px);
  display: inline-block;
  vertical-align: middle;
}

.footerBigdotAi.bg-white img.img-fluid {
  width: 100px;
}

.dashboardContainer .enterIntro a .btnPurple {
  margin-top: 10px !important;
}

table.table.mb-5 {
  border: 1px solid #ced4da;
  border-radius: 10px !important;
  margin: 20px 0px !important;
}

/* .dashboardContainer .table>:not(caption)>*>* {
  border: 1px solid #ced4da;
} */

.dashboardContainer .enterIntro a .btnYellow {
  margin-top: 10px !important;
}

.dashboardContainer .enterIntro a button.btn.btn-warning {
  padding: 10px 25px;
  font-size: 16px !important;
  font-weight: 600;
  background-color: #e0a70c !important;
}

.dashboardContainer .enterIntro textarea {
  border-color: #e4e4e4;
  border-radius: 10px !important;
  font-size: clamp(10px, 0.9vw, 14px);
}

.dashboardContainer .btnGree {
  background-color: #1a9a2f !important;
  color: #fff;
  font-size: clamp(10px, 0.9vw, 14px);
  border-radius: 8px;
  padding: 8px 15px;
}

.dashboardContainer .listing {
  margin-top: 25px;
}

.dashboardContainer .listing ul {
  margin: 0px;
  padding: 0px;
}

.dashboardContainer .listing ul li {
  list-style: none;
  margin-bottom: 15px;
}

.dashboardContainer .listing ul li .btn {
  background-color: #9976ed !important;
  color: #ffffff;
  font-size: clamp(10px, 0.9vw, 14px);
  border-radius: 8px;
  min-width: 315px;
  text-align: left;
  padding: 8px 15px;
}

.dashboardContainer .listing ul li .btn img {
  margin-right: 10px;
}

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

/* Form Controls Start Here */

.input-group-text {
  font-size: 0.875rem;
}

.bdCustomLabel {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--site-text-muted-color, #555);
  margin-bottom: 6px;
  display: block;
}

.input-group-text {
  border-right: none;
  background-color: #fcfcfc !important;
  color: var(--site-tertiary-color);
}

.form-control:focus + .input-group-text {
  border-color: var(--site-tertiary-color);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: transparent;
  opacity: 1;
  /* border: none !important; */
}

.form-control,
.form-select {
  width: 100% !important;
  background: #f9fbff !important;
  border: 1.5px solid #cddaff !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--site-text-color, #1e293b) !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s !important;
  line-height: 1.5 !important;
}

.form-select {
  padding-right: 36px !important;
  background-color: #f9fbff !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 10px !important;
}

.form-control::placeholder,
.form-select::placeholder {
  color: #a0a0b2 !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--site-cta-color) !important;
  box-shadow: 0 0 0 3px rgba(240, 92, 41, 0.1) !important;
  outline: none !important;
  background-color: #fff !important;
}

.form-select:focus {
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 10px !important;
}

/* textarea.form-control {
  height: auto !important;
  min-height: 100px !important;
  padding: 10px 14px !important;
  resize: vertical !important;
} */

.form-control:disabled,
.form-control[readonly] {
  background: #f9fbff !important;
  color: #8a8a9a !important;
  cursor: not-allowed !important;
}

textarea.form-control {
  border-radius: 12px;
  border: 1.5px solid #eee;
  padding: 1rem;
  font-size: 0.95rem;
  background-color: #fcfcfc;
  resize: none;
  animation: slideDown 0.3s ease-out;
}

/* Input group — fix flex layout (width:100% breaks input-group) */
.input-group > .form-control,
.input-group > .form-select {
  width: 1% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* input-group-text shared styles */
.input-group > .input-group-text {
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  background: #f9fbff !important;
  border: 1px solid #cddaff !important;
  padding: 0 14px !important;
  cursor: pointer;
}

/* PREFIX — icon/text on the LEFT */
.input-group > .input-group-text:first-child {
  border-right: none !important;
  border-radius: 10px 0 0 10px !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
}

/* SUFFIX — icon/text on the RIGHT */
.input-group > .input-group-text:last-child {
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
  border-right: none !important;
  border-radius: 10px 0 0 10px !important;
}

/* Focus-within: highlight the whole group */
.input-group:focus-within > .input-group-text {
  border-color: #1c2d64 !important;
  background: #ffffff !important;
}

.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select {
  border-color: var(--site-cta-color) !important;
}

/* Form Controls End Here */

.cLocationsectiontxt label.cInputheading {
  margin-top: 8px !important;
}

.editForm label.form-check-label {
  margin: 0px !important;
}

.infoAccrodions .accordion-button:not(.collapsed) {
  color: var(--site-primary-color);
  max-width: 100%;
  font-size: clamp(11px, 1.1vw, 15px);
  justify-content: space-between;
  background-color: #fff;
  border-radius: 5px !important;
  border: 1px solid #dee2e6 !important;
  padding: 10px 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.infoAccrodions .accordion-button span {
  display: none;
}

.infoAccrodions .accordion-button span.float-end {
  border-radius: 50%;
  /* border: 2px solid #fff; */
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0px;
  /* background-color: #ffffff; */
  color: var(--site-primary-color);
  font-weight: bold;
  /* font-size: 18px !important; */
  display: block;
  text-align: center;
  line-height: 25px;
}

.infoAccrodions .accordion-button span i {
  font-weight: 500;
  margin: 0px !important;
  color: #f15a25 !important;
  font-size: clamp(11px, 1.1vw, 16px) !important;
}

.infoAccrodions .accordion-body {
  padding: 0px;
}

.infoAccrodions .accordion-item {
  background-color: transparent;
  border: none;
  margin-bottom: 15px;
}

.infoAccrodions .accordion-button:not(.collapsed)::after {
  display: block;
}

.infoAccrodions .accordion-button::after {
  display: block;
}

.infoAccrodions .accordion-button img {
  margin-right: 10px;
}

.markIcon img {
  width: 50px !important;
  height: 50px !important;
  /* border-radius: 50%;
    object-fit: cover; */
}

.rigthTopbar {
  text-align: left;
}

.logoDtls ul li {
  display: inline;
}

.rigthTopbar ul li {
  display: inline-block;
  text-align: left;
}

span li {
  display: inline-block;
}

.addressSmall {
  font-size: clamp(10px, 0.9vw, 14px);
}

.has-search .form-control {
  padding-left: 2.375rem;
}

.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: none;
  color: #aaa;
}

.has-search input {
  border-radius: 20px;
}

.has-search input:hover {
  outline: none;
}

.rsideIcon img {
  width: 25px;
  height: auto;
}

.rsideIcon li a {
  text-decoration: none;
  color: #333;
}

.rsideIcon li a .dwn {
  width: 10px;
  height: auto;
}

.mt-05 {
  margin-top: 5px;
}

.emptyBox {
  padding: 20px;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
  border-radius: 8px;
}

.iconTxt {
  width: 100%;
}

.iconTxt img {
  width: 110px;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
}

.txt ul {
  padding: 0px;
}

.txt h4 {
  color: #333;
}

.txt ul li {
  display: block;
  font-weight: 600;
}

.onlyTxt ul li {
  display: block;
  padding: 4px 0px;
}

.onlyTxt ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.onlyTxt ul li a:hover {
  color: rgb(2, 2, 92);
  font-weight: 600;
  transition: 0.3s;
}

.boxx {
  margin-top: 20px;
}

.ordinareyHding h3 {
  color: var(--site-primary-color);
}

.ordinareyHding hr {
  width: 12%;
  height: 3px;
  background-color: var(--site-primary-color);
}

/* notifiction */

.notifiBox {
  position: relative;
  padding-top: 0px;
}

.notifiBox span {
  font-size: 1.2rem;
}

.numNtfic {
  position: absolute;
  top: -40%;
  left: 40%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(236, 101, 52);
  text-align: center;
  color: #fff;
}

.numNtfic p {
  font-size: 12px;
  padding: 0px;
  text-align: center;
}

.dashboardContainer .topbar ul .line {
  border-left: 1px solid #ddd;
  height: 40px;
  position: relative;
  top: 18px;
}

.dashboardContainer .billingList {
  margin-top: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 25px 25px;
}

.dashboardContainer .famousOne {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.dashboardContainer .famousOne ul {
  padding: 0px;
  margin: 0px;
  border-radius: 8px;
}

.dashboardContainer .famousOne ul li {
  list-style: none;
  margin-bottom: 5px;
  color: var(--site-primary-color);
  cursor: pointer;
  font-size: clamp(10px, 0.9vw, 14px);
}

.dashboardContainer .famousOne ul li a {
  color: var(--site-primary-color);
}

.dashboardContainer .famousOne ul li a i {
  color: #f15a25;
  margin-right: 10px;
}

.dashboardContainer .famousOne h5 {
  margin-bottom: 15px;
  border-left: 3px solid var(--site-primary-color);
  /* padding-left: 10px; */
  line-height: 1;
}

.dashboardContainer .famousOne .line {
  height: 1px;
  width: 100%;
  background-color: #efefef;
  margin: 25px 0px;
}

.hrLine {
  height: 1px;
  width: 100%;
  background-color: #dbdbdb;
  margin: 30px 0px;
}

.dashboardContainer .billingList h5 {
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--site-primary-color);
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.dashboardContainer .billingList h5::before {
  content: "";
  width: 100px;
  background-color: var(--site-primary-color);
  position: absolute;
  bottom: 0;
  border-bottom: 3px solid var(--site-primary-color);
}

.dashboardContainer .billingList ul {
  padding: 0px;
  margin: 0px;
}

.dashboardContainer .billingList ul li {
  list-style: none;
  margin-top: 20px;
}

.dashboardContainer .billingList ul li a {
  text-decoration: none;
  color: #8d8989;
  transition: 0.3s;
  font-size: clamp(13px, 1.1vw, 16px);
}

.dashboardContainer .billingList ul li a:hover {
  color: var(--site-primary-color);
}

.dashboardContainer .billingList ul li a img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.dashboardContainer .serviceList {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #dfdfdf;
  margin-top: 20px;
}

.topbar.cardBoxShadow {
  margin-top: 15px;
}

h5#staticBackdropLabel {
  margin-top: 20px;
}

.table > :not(caption) > * > * {
  background-color: transparent;
}

.enquiryTableWrapper .table td button {
  background-color: transparent;
  border: 0px;
}

.serviceList .heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.serviceList .heading svg {
  width: 30px;
}

.serviceList .heading .btn {
  background-color: #0b75d2;
  color: #ffffff;
}

.serviceList .heading .btn svg {
  width: 20px;
  margin-right: 5px;
  font-weight: 700;
}

.serviceList .heading h5 {
  margin-bottom: 0px;
  font-size: clamp(16px, 1.6vw, 20px);
}

.table > :not(:first-child) {
  border-top: 1px solid #f0f0f0;
}

.dashboardContainer .topbar .markIcon {
  text-align: right;
}

.dashboardContainer .topbar span.px-2.mt-05 {
  margin-left: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.responsiveTable {
  overflow: hidden;
  overflow-x: scroll;
  overflow-x: auto;
  -ms-overflow-style: none;
  /* scrollbar-width: none; */
}

.responsiveTable::-webkit-scrollbar {
  height: 5px;
}

.serviceList .row.mt-3 .col-md-9.col-12 h4 {
  margin-bottom: 35px;
}

.dashboardContainer .serviceList table td {
  padding: 8px 10px;
  border-color: #f0f0f0;
  /* min-width: 150px; */
  font-size: clamp(10px, 0.9vw, 14px);
}

.dashboardContainer .serviceList table td .dropdown-menu {
  border-color: #e9e9e9;
  left: -200px;
}

.dashboardContainer .serviceList table td .dropdown-item {
  color: #5a5959;
  font-size: clamp(10px, 0.9vw, 14px);
}

.dashboardContainer .serviceList table td .dropdown-item:hover {
  background-color: #fff;
}

.dashboardContainer .serviceList table td .dropdown-item i {
  margin-right: 5px;
  color: #f15a25;
}

.dashboardContainer .serviceList table tr:nth-child(even) {
  background-color: #f0f0f0;
}

.dashboardContainer .serviceList table td i {
  margin-left: 8px;
  font-size: clamp(14px, 1.1vw, 16px);
}

.dashboardContainer .serviceList table td .visible i {
  color: var(--site-primary-color);
}

.dashboardContainer .serviceList table td a {
  text-decoration: none;
}

.dashboardContainer .serviceList table td a div {
  display: inline-block;
}

.dashboardContainer .serviceList table td:last-child {
  min-width: 100px;
}

.dashboardContainer .serviceList table td a div p {
  margin-bottom: 0px;
}

.dashboardContainer .serviceList table {
  border: 1px solid #f0f0f0;
}

.serviceList .tableItems {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}

.serviceList .tableItems .left {
  display: flex;
  align-items: center;
  width: 500px;
}

.serviceList .tableItems .left select {
  width: 75px;
  margin: 0px 15px;
  font-size: clamp(10px, 0.9vw, 14px);
}

.serviceList .tableItems .right {
  display: flex;
  align-items: center;
}

.serviceList .tableItems .right ul {
  margin: 0px;
}

.serviceList .tableItems .right ul li span.active {
  background-color: var(--site-primary-color);
}

.serviceList .tableItems .right ul li span {
  border: none;
  border-radius: 8px;
  margin: 0px 10px;
}

.serviceList .tableItems .right ul li a {
  border: none;
  color: #212529 !important;
}

.serviceList .tableItems .right ul li.active span {
  background-color: var(--site-primary-color) !important;
  box-shadow: 1px 1px 5px 3px rgb(0 0 0 / 15%);
}

.serviceList .tableItems .right a {
  text-decoration: none;
}

.serviceList .tableItems .right i {
  width: 25px;
  height: 25px;
}

.dashboardContainer .serviceList label {
  font-size: clamp(10px, 0.9vw, 14px);
}

.editForm .imag-card {
  height: 100px !important;
  width: 100px;
  color: #b0b0b0;
  border: 0px;
}

.editForm .imag-card .imag-card-body {
  height: 80px !important;
  border-radius: 5px;
}

.dashboardContainer .serviceList input {
  font-size: clamp(10px, 0.9vw, 14px);
}

.dashboardContainer .serviceList select {
  font-size: clamp(10px, 0.9vw, 14px);
  margin-bottom: 5px;
  margin-top: 0px !important;
}

.dashboardContainer .serviceList .editForm .btn {
  font-size: clamp(10px, 0.9vw, 14px);
  padding: 10px 30px;
}

.dashboardContainer .serviceList .editForm .btnPurple {
  background-color: var(--site-primary-color);
  color: #ffffff;
}

.reSize img {
  width: 110px;
  object-fit: cover;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
}

.btnPurple {
  background-color: var(--site-primary-color) !important;
  color: white !important;
  padding: 10px 10px;
  border-radius: 8px;
}

.btnPurple:hover {
  color: white !important;
}

.famousOne .filterDate {
  border-bottom: 2px dashed #e8e8e8;
  padding-bottom: 30px;
  margin-bottom: 35px;
}

.famousOne .filterDate .btn {
  font-size: 13px;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
}

.famousOne .filterDate input {
  border-color: #e8e8e8;
  font-size: clamp(10px, 0.9vw, 14px);
}

.famousOne .filterDate label {
  font-weight: 600;
}

.enquiryTableWrapper {
  border-bottom: 2px dashed #e8e8e8;
  padding-bottom: 30px;
  margin-bottom: 35px;
}

.enquiryTableWrapper .table td {
  vertical-align: middle;
  font-size: 13px;
}

.enquiryTableWrapper .table td i {
  font-size: 16px;
  /* color: #ffffff; */
}

.enquiryTableWrapper .table td i.active {
  color: var(--site-primary-color) !important;
}

.enquiryTableWrapper h4 {
  font-size: 16px;
  margin: 0px;
  padding: 12px;
  color: var(--site-primary-color);
  background-color: var(--site-secondary-color);
  border-radius: 8px;
  margin-bottom: 20px;
  /* font-weight: 600; */
}

.enquiryTableWrapper .table {
  border: 1px solid #f0f0f0;
}

.enquiryTableWrapper .table strong {
  padding: 5px;
  font-weight: 700;
}

.enquiryTableWrapper .table th {
  padding: 1rem 0.5rem;
}

.enquiryTableWrapper .table th:first-child {
  width: 30%;
}

.enquiryTableWrapper .table .btn {
  background-color: var(--site-primary-color);
  color: #ffffff;
  font-weight: 500;
  font-size: 12px;
}

.enquiryTableWrapper .buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.enquiryTableWrapper .buttons a {
  font-size: 12px;
}

.enquiryTableWrapper .buttons i {
  display: block;
  text-align: center;
  margin-bottom: 15px;
  margin-top: 15px;
}

.myBusiness {
  /* padding: 25px; */
  background-color: #fff;
  border-radius: 8px;
  /* margin-top: 30px; */
}

.filterDate .row {
  align-items: flex-end;
}

.invoiceList h4 {
  font-size: 18px;
  margin: 0px;
  color: var(--site-primary-color);
  border-radius: 8px;
  margin-bottom: 10px;
  font-weight: 500;
}

.dashboardContainer .serviceList h4 i {
  margin-left: 10px;
}

.invoiceList th {
  font-size: clamp(10px, 0.9vw, 14px);
  padding: 15px 8px;
  border: 1px solid #f0f0f0;
  vertical-align: middle;
}

.invoiceList td {
  font-size: 13px;
  border: 1px solid #f0f0f0;
  vertical-align: middle;
}

.invoiceList .dropdown-toggle::after {
  display: none;
}

.invoiceList tr:nth-child(even) {
  background-color: #fafafa !important;
}

.invoiceList nav .nav-link {
  text-align: center;
  width: 20%;
  position: relative;
  z-index: 11;
  border: none;
  outline: none;
}

.invoiceList nav .nav-link::before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 35px;
  z-index: -1;
  border-top: 2px dashed #ddd;
}

.invoiceList nav .nav-link.active {
  border: none;
  color: var(--site-primary-color);
}

.invoiceList nav .nav-link {
  color: #717171;
}

.invoiceList nav .nav-link:hover {
  border: none;
  outline: none;
}

.invoiceList nav .nav-link:focus {
  border: none;
  outline: none;
}

.invoiceList nav .nav-link.active .iconWrapper {
  background-color: #f5f1ff;
  width: 55px;
  height: 55px;
  margin: auto;
  display: flex;
  align-items: center;
  border-radius: 50%;
}

.invoiceList nav .nav-link .iconWrapper {
  background-color: #f0f0f0;
  width: 55px;
  height: 55px;
  margin: auto;
  display: flex;
  align-items: center;
  border-radius: 50%;
}

.invoiceList nav .nav-link svg {
  color: #717171;
}

.invoiceList nav .nav-link.active svg {
  color: var(--site-primary-color);
}

.invoiceList nav .nav-link svg {
  width: 22px;
  height: 22px;
  margin: auto;
  display: block;
}

.invoiceList nav .nav-tabs {
  border: none;
  margin-bottom: 25px;
}

.invoiceList .wizardInsider {
  display: flex;
}

.invoiceList .wizardInsider svg {
  color: var(--site-primary-color);
  width: 25px;
  height: 25px;
  margin-right: 15px;
}

.invoiceList .tab-content .col-md-6 {
  padding-bottom: 25px;
  padding-left: 25px;
}

.invoiceList .tab-content .col-12 {
  margin-top: 15px;
}

.borderRight {
  border-right: 1px solid #f3f3f3;
}

.borderBottom {
  border-bottom: 1px solid #f3f3f3;
}

.invoiceList .wizardInsider .bi-check2 {
  color: #4caf50 !important;
  width: 30px;
  height: 30px;
}

.invoiceList .wizardInsider .bi-x-lg {
  color: tomato !important;
}

.invoiceList .wizardInsider {
  display: flex;
  padding-top: 20px;
}

.invoiceList .wizardInsider img {
  width: 75px;
  height: 75px;
  margin-bottom: 15px;
}

.assestmentHeader .assestmentLogo {
  width: 150px;
}

.invoiceList .wizardInsider p {
  font-size: clamp(10px, 0.9vw, 14px);
}

.invoiceList .wizardInsider i {
  margin-right: 10px;
  font-size: 16px;
  margin-top: 5px;
}

.invoiceList .wizardInsider input {
  width: 18px;
  height: 18px;
}

.invoiceList .tab-content > .active {
  padding: 25px 30px;
  box-shadow: 0px 2px 20px rgb(0 0 0 / 5%);
  border-radius: 8px;
}

.invoiceList .tab-content > .active .btn {
  padding: 10px 30px;
  font-weight: 700;
}

.invoiceList .nav-pills .nav-item {
  width: 20%;
}

.invoiceList .nav-pills .nav-link {
  text-align: center;
  position: relative;
  z-index: 11;
  border: none;
  outline: none;
  margin: auto;
}

.calender .nav {
  display: inline-flex;
  background-color: #dbe1ff;
  border-radius: 8px;
  align-items: center;
}

.calender .nav-item .active {
  background-color: var(--site-primary-color) !important;
  margin: 5px;
  color: white !important;
}

.calender .nav-item .nav-link {
  color: #3f51b5;
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 600;
  padding: 5px 25px;
}

.calender .heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.calender .heading label {
  font-size: clamp(10px, 0.9vw, 14px);
  color: gray;
}

.calender .heading select {
  font-size: clamp(10px, 0.9vw, 14px);
  color: gray;
  font-weight: 600;
  border-color: #e4e4e4;
}

.dashboardContainer .calender {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 25px 25px;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
}

.calenderWrap .calenderHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.calenderWrap .calenderHeading .nextPrev a {
  padding: 8px;
  border: 1px solid #ddd;
  margin-left: 10px;
  border-radius: 8px;
  padding-bottom: 10px;
}

.calenderWrap .calenderHeading h5 {
  margin: 0;
  font-weight: 700;
}

.calender .modal-header .btn-close {
  font-size: 25px;
  padding: 0px;
  padding-right: 10px;
  color: #ffffff;
}

.calender .modal .modal-header {
  background-color: #3f51b5;
}

.calender .modal .modal-header .modal-title {
  color: #ffffff;
}

.calender .modal table td {
  width: unset !important;
  text-align: left !important;
  height: unset !important;
  font-size: clamp(10px, 0.9vw, 14px);
}

.dashboardContainer .calender .table {
  margin-bottom: 0px;
  border-radius: 8px;
  overflow: hidden;
}

.dashboardContainer .calender .table th {
  color: #3f51b5;
  background-color: #e5e9ff;
  text-align: center;
  padding: 15px;
}

.dashboardContainer .calender .table td {
  border: 1px solid #eee;
  padding: 10px 15px;
  height: 100px;
  text-align: right;
  font-weight: 600;
  width: 14.28%;
  color: #7b7b7b;
}

.dashboardContainer .calender .tableDay td {
  text-align: left;
  height: 70px;
}

.dashboardContainer .calender .tableDay .event1 {
  display: inline-block;
}

.dashboardContainer .calender .tableDay .event2 {
  display: inline-block;
}

.dashboardContainer .calender .weeklyTable td {
  width: 12.5%;
  text-align: left;
}

.dashboardContainer .calender .table td:hover {
  background-color: #f4f6ff;
}

.dashboardContainer .calender .table td .event1 {
  background-color: #dbe1ff;
  color: #405eb8;
  border-radius: 8px;
  font-weight: 700;
  padding: 0px 10px;
  font-size: 13px;
  margin-top: 5px;
  text-align: left;
  cursor: pointer;
}

.dashboardContainer .calender .table td .event2 {
  background-color: #dbeeff;
  color: #0b75d2;
  border-radius: 8px;
  font-weight: 700;
  padding: 0px 10px;
  font-size: 13px;
  margin-top: 5px;
  text-align: left;
  cursor: pointer;
}

.dashboardContainer .calender .table td .eventMore {
  font-size: 13px;
  text-align: left;
}

.modal-content .modal-body .responsiveTable table.table {
  border: 1px solid #f0f0f0;
  margin-bottom: 0px;
}

.modal-content .modal-body .responsiveTable table.table td {
  border: 1px solid #f0f0f0;
}

.modal-content .modal-body .responsiveTable table.table th {
  border: 1px solid #f0f0f0;
}

.dashboardContainer .calender .table tr {
  border-color: #e5e9ff;
}

.dashboardContainer .calender .table .fadeText {
  color: #d3d3d3;
}

.dashboardContainer .contactManger {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px 15px;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
}

.dashboardContainer .contactManger .dropdown-menu {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.dashboardContainer .contactManger .dropdown-menu a {
  color: var(--site-primary-color) !important;
  font-size: 15px;
  font-weight: 600;
}

.dashboardContainer .contactManger .dropdown-menu::-webkit-scrollbar {
  width: 7px;
  height: 10px;
}

/* Track */
.dashboardContainer .contactManger .dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.dashboardContainer .contactManger .dropdown-menu::-webkit-scrollbar-thumb {
  background: #d2d2d2;
}

.dashboardContainer .contactManger .floatRight {
  float: right;
}

.dashboardContainer .contactManger .heading {
  margin-bottom: 30px;
}

.contactManger .heading label {
  color: gray;
}

.contactManger .heading h5 {
  margin-bottom: 10px;
  font-size: 18px;
}

.contactManger .featuredHeading h5 {
  font-size: 18px;
  margin: 0px;
  padding: 12px;
  color: var(--site-primary-color);
  background-color: var(--site-secondary-color);
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
  margin-top: 30px;
}

.addNewContact .d-flex p {
  position: relative;
  top: 10px;
  margin-right: 10px;
}

.addNewContact .btnRed {
  background-color: #e70777;
  color: #ffffff;
}

.addNewContact .btn {
  font-size: clamp(10px, 0.9vw, 14px);
  padding: 10px 25px;
}

.addNewContact label {
  margin-bottom: 5px !important;
}

.customCard {
  padding: 15px;
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.customCard .responsiveTable tr td:last-child {
  width: 70px;
}

.customCard div#nav-tab .nav-link {
  color: #000;
  padding: 0px;
  margin-right: 15px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
}

.customCard .form-check.form-check-inline input {
  margin-right: 2px;
  width: 15px;
  height: 15px;
}

.customCard div#nav-tab .nav-link.active {
  color: var(--site-primary-color);
}

.mycustomCard {
  border: none !important;
  position: relative !important;
  border-radius: 0.5rem !important;
  box-shadow: 4px 8px 40px 10px rgb(0 0 0 / 5%) !important;
  padding: 15px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1 px solid rgba(0, 0, 0, 0.125);
  font-size: 0.875rem;
  font-weight: normal;
}

.smallCenterWrapper {
  padding: 25px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
  width: 550px;
  margin: 0 auto;
}

.instacitiStar {
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.instacitiStar hr {
  margin-bottom: 30px;
}

.instacitiStar .topSection label {
  font-weight: 700;
  margin-bottom: 5px;
}

.instacitiStar .topSection select {
  border-color: #ddd;
  border-radius: 7px;
  color: #9c9c9c;
  margin-bottom: 20px;
}

.instacitiStar .topSection .btn {
  background-color: #3f51b5;
  color: #ffffff;
  width: 100%;
  margin-top: 28px;
}

.instacitiStar .topSection .themeName {
  color: #3f51b5;
  font-weight: 600;
  font-size: 16px;
}

.instacitiStar .topSection .themeName span {
  float: right;
  color: #2bac5e;
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 700;
}

.instacitiStar .nav {
  background-color: #d3daff38;
  padding: 10px 8px;
  border-radius: 8px;
}

.publishButton {
  padding: 10px 0px;
}

.instacitiStar .nav-link {
  width: 100%;
  color: #3f51b5;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 16px;
}

.instacitiStar .nav-link i {
  margin-right: 5px;
  font-size: 20px;
}

.instacitiStar .nav-link.active {
  background-color: var(--site-primary-color) !important;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 1px 6px 10px 5px rgb(0 0 0 / 10%);
}

.instacitiStar .nav-link.active img {
  filter: invert(1) brightness(150);
}

.instacitiStar .nav-link img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.instacitiStar .leftBox {
  box-shadow: 0px 4px 20px rgb(0 0 0 / 8%);
  border-radius: 8px;
  padding: 20px;
}

.instacitiStar .leftBox h5 {
  color: #3f51b5;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 20px;
}

.instacitiStar .leftBox small {
  color: gray;
}

.instacitiStar .leftBox .dropImg {
  position: relative;
  width: 80px;
  height: 80px;
  background-color: #ececec;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.instacitiStar .leftBox .dropImg input {
  position: absolute;
  left: 0;
  top: 25px;
  opacity: 0;
}

.instacitiStar .leftBox .dropImg i {
  color: #b0b0b0;
  font-size: 20px;
}

/* .instacitiStar .leftBox label {
  padding-bottom: 0px;
  font-size: 13px;
} */

.personalOnoarding {
  margin-top: 10px;
  width: 100%;
}

.inputShortBio {
  min-height: 100px;
}

.signturePreview {
  border-radius: 8px;
  box-shadow: 0 0 16px 0 rgb(0 0 0 / 8%);
}

.signturePreview .bi-layout-text-sidebar {
  margin: 0px 20px;
}

.signturePreview .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eaeaea;
  padding: 15px 30px;
}

.signturePreview .head .middle {
  display: flex;
  align-items: center;
}

.signturePreview .head p {
  margin: 0px;
  display: flex;
  align-items: center;
  padding: 5px 60px;
  background-color: #f2f2f2;
  font-size: clamp(10px, 0.9vw, 14px);
  border-radius: 8px;
  margin-left: 15px;
  color: gray;
}

.signturePreview .head p svg {
  margin-right: 5px;
}

.signturePreview .head .middle .search {
  display: flex;
  align-items: center;
}

.signturePreview .head .right .bi-question-circle {
  margin: 0px 10px;
}

.signturePreview .signatureBody {
  min-height: 350px;
  /* padding: 30px;
    padding-top: 40px; */
  overflow: hidden;
}

.signturePreview .signatureBody h5 {
  font-size: 18px;
  font-weight: 700;
}

.instacitiStar .leftBox .social {
  padding: 0px;
  margin: 0px;
}

.instacitiStar .leftBox .social li {
  list-style: none;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.instacitiStar .leftBox .social li i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 15px;
  margin-right: 10px;
  color: #ffffff;
}

.instacitiStar .leftBox .social li .fa-facebook-f {
  background-color: #3b5998;
}

.instacitiStar .leftBox .social li .fa-instagram {
  background-color: #e4405f;
}

.instacitiStar .leftBox .social li .fa-linkedin-in {
  background-color: #0077b5;
}

.instacitiStar .leftBox .social li .fa-twitter {
  background-color: #55acee;
}

.instacitiStar .leftBox .social li .fa-youtube {
  background-color: #cd201f;
}

.instacitiStar .leftBox .social li .fa-pinterest {
  background-color: #bd081c;
}

.instacitiStar .leftBox .social li .fa-whatsapp {
  background-color: #4caf50;
}

.instacitiStar .leftBox .freeTheme h6 {
  color: gray;
  font-size: 16px;
  margin-bottom: 10px;
}

.instacitiStar .leftBox .freeTheme .inner {
  text-align: center;
  color: #3f51b5;
  font-weight: 600;
  margin-bottom: 20px;
}

.instacitiStar .leftBox .freeTheme .inner .box.active {
  border-color: var(--site-primary-color) !important;
}

.instacitiStar .leftBox .freeTheme .inner .box {
  height: 120px;
  width: 100%;
  background-color: #f6f6f6;
  border-radius: 8px;
  border: 1px solid #ddd;
  position: relative;
}

.instacitiStar .leftBox .freeTheme .inner .box i {
  position: absolute;
  right: 5px;
  top: 5px;
  color: #45b636;
}

.dashboardContainer .topbar #hamburgerMenu {
  display: none;
}

.enquiryTableWrapper .tableRow {
  border: 1px solid #f0f0f0;
  margin: 0px;
}

.enquiryTableWrapper .tableRow .col {
  padding: 0px;
}

.enquiryTableWrapper .tableRow .col-md-4 {
  padding: 0px;
}

.enquiryTableWrapper .tableRow ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.enquiryTableWrapper .tableRow ul:last-child {
  border: none;
}

.enquiryTableWrapper .tableRow ul li:nth-child(1) {
  width: 35%;
}

.enquiryTableWrapper .tableRow ul li:nth-child(2) {
  width: 16.25%;
  justify-content: center;
}

.enquiryTableWrapper .tableRow ul li:nth-child(3) {
  width: 16.25%;
  justify-content: center;
}

.enquiryTableWrapper .tableRow ul li:nth-child(4) {
  width: 16.25%;
  justify-content: center;
}

.enquiryTableWrapper .tableRow ul li:nth-child(5) {
  width: 16.25%;
  justify-content: center;
}

.enquiryTableWrapper .tableRow ul li {
  list-style: none;
  padding: 12px;
  line-height: 1.5;
  font-size: clamp(10px, 0.9vw, 14px);
  display: flex;
  align-items: center;
}

.enquiryTableWrapper .tableRow .tableHeading {
  font-weight: 700;
  font-size: 16px;
}

.enquiryTableWrapper .tableRow i {
  color: #b9b9b9;
  font-size: 40px;
}

.enquiryTableWrapper .tableRow .active {
  color: #3f51b5;
}

.dashboardContainer .topbar img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.instacitiStar .leftBox .qLinks {
  padding: 0px;
  margin: 0px;
}

.instacitiStar .leftBox .qLinks li {
  list-style: none;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 15px 0px;
}

.instacitiStar .leftBox .qLinks li:last-child {
  border: none;
  padding-bottom: 0px;
}

.instacitiStar .leftBox .qLinks li .leftPane {
  width: 10%;
}

.instacitiStar .leftBox .qLinks li .leftPane i {
  color: tomato;
  font-size: 18px;
}

.instacitiStar .leftBox .qLinks li .middlePane {
  width: 80%;
  padding-right: 15px;
}

.instacitiStar .leftBox .qLinks li .rightPane {
  width: 10%;
}

.instacitiStar .leftBox .qLinks li .rightPane i {
  color: #3f51b5;
  font-size: 18px;
}

.instacitiStar .leftBox .qLinks li h5 {
  margin-bottom: 0px;
  color: #3b3838;
  font-size: clamp(10px, 0.9vw, 14px);
}

.instacitiStar .leftBox .qLinks li a {
  color: gray !important;
  font-size: clamp(10px, 0.9vw, 14px);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Single Class Controls */

.qLinks {
  padding: 0px;
  margin: 0px;
}

.qLinks li {
  list-style: none;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 15px 0px;
}

.qLinks li:last-child {
  border: none;
  padding-bottom: 0px;
}

.qLinks li .leftPane {
  width: 10%;
}

.qLinks li .leftPane i {
  color: tomato;
  font-size: 18px;
}

.qLinks li .middlePane {
  width: 80%;
  padding-right: 15px;
}

.qLinks li .rightPane {
  width: 10%;
}

.qLinks li .rightPane i {
  color: #3f51b5;
  font-size: 18px;
}

.qLinks li h5 {
  margin-bottom: 0px;
  color: #3b3838;
  font-size: clamp(10px, 0.9vw, 14px);
}

.qLinks li a {
  color: gray !important;
  font-size: clamp(10px, 0.9vw, 14px);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.mediaContainer .mediaImage .uploadBtn {
  background-color: #e3d8ff;
  color: #1c2d64 !important;
  padding: 5px 10px;
  border-radius: 7px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  margin-right: 10px;
}

.mediaContainer .mediaImage .uploadBtn input {
  position: absolute;
  left: 0;
  opacity: 0;
}

.enterIntro.cardBoxShadow .note {
  font-size: 12px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.mediaImage.red.box .imageSmartMedia img.img-fluid.media {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  object-fit: cover;
}

.videoPreview video {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.mediaImage .text {
  margin-top: 25px;
  display: none;
}

.dashboardContainer .enterIntro button.btn.saveBtn {
  font-size: 12px;
  padding: 5px 8px;
}

.mediaImage .text label {
  font-weight: 600;
}

.mediaImage .settings {
  margin-top: 20px;
  display: none;
}

.pasteLink {
  margin-bottom: 25px;
  display: none;
}

.mediaContainer .mediaImage .settingBtn {
  color: #4f8000;
  background-color: #eafdc8;
  padding: 5px 10px;
  border-radius: 7px;
}

.mediaContainer .mediaImage .textBtn {
  color: #0b75d2;
  background-color: #dbeeff;
  margin-right: 10px;
  padding: 10px 15px;
  border-radius: 7px;
}

.mediaContainer .mediaImage .deleteBtn {
  background-color: #ffd3e9;
  color: #e70777 !important;
  margin-right: 10px;
  padding: 5px 10px;
  border-radius: 7px;
}

.mediaContainer .mediaImage .thunderBtn {
  background-color: #ffd1c1;
  color: #f15a25 !important;
  padding: 5px 10px;
  border-radius: 7px;
}

.col.sliderSmartMedia.smartMediaPreview div#color-overlay {
  display: none;
}

.mediaContainer .mediaImage .saveBtn {
  background-color: #3f51b5;
  color: #fff !important;
  padding: 10px 15px;
  border-radius: 7px;
  font-weight: 700;
}

/* Clean CSS */

.settingBtn {
  color: #4f8000;
  background-color: #eafdc8;
  margin-right: 10px;
  padding: 10px 15px;
  border-radius: 7px;
}

.textBtn {
  color: #0b75d2;
  background-color: #dbeeff;
  margin-right: 10px;
  padding: 10px 15px;
  border-radius: 7px;
}

.deleteBtn {
  background-color: #ffd3e9;
  color: #e70777 !important;
  margin-right: 10px;
  padding: 10px 15px;
  border-radius: 7px;
}

.thunderBtn {
  background-color: #ffd1c1;
  color: #f15a25 !important;
  padding: 10px 15px;
  border-radius: 7px;
}

.saveContact {
  background-color: #a31c49;
  color: #fff;
  font-size: 18px;
  margin: 0px 0px 20px;
  border-radius: 8px;
  width: 100%;
  height: 50px;
  border: transparent;
}

.dashboardContainer .enterIntro .mediaVideo {
  display: none;
}

.dashboardContainer .enterIntro .mediaVideo video {
  border-radius: 8px;
  margin-bottom: 20px;
}

.dashboardContainer .enterIntro .mediaVideo .item img {
  border-radius: 8px;
}

#sliderImgThumb {
  margin-bottom: 30px;
  padding: 0px 25px;
}

#sliderImgThumb .item img {
  border-radius: 7px;
  height: 60px;
  object-fit: cover;
}

#sliderImgThumb .owl-nav.disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 55px;
  color: gray;
  position: absolute;
  width: 100%;
  left: 0;
  top: 35px;
  z-index: -15;
}

.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
  background: #fff;
}

.ui-state-default {
  text-decoration: none !important;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
  color: #ffffff;
  background: #3f51b5;
  border-radius: 8px;
}

.ui-widget.ui-widget-content {
  border: 1px solid #eaeaea !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: none;
  background: #f6f6f6;
  font-weight: normal;
  padding: 3px;
  text-align: center;
  color: #454545;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.7em;
  border-collapse: collapse;
  font-family: "Bricolage Grotesque", sans-serif;
  margin: 0 0 0.4em;
  color: #000000;
  background: #fff;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.editForm input#PriceTaxInclusive {
  margin-top: 0px !important;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 0.8em;
  text-align: right;
  text-decoration: underline;
}

.datepicker {
  position: relative;
  background-image: url(https://dkzxkcjlbnjui.cloudfront.net/portal/instaciti-manager/icons/calendar.svg);
  background-position: 97.5%;
  background-size: 12px;
  background-repeat: no-repeat;
  cursor: pointer;
  background-position-y: 45%;
}

.btn-hover {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  /* margin: 20px; */
  /* height: 55px; */
  text-align: center;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

/* Main CSS Ends Here */

/* My Custom CSS Starts Here */

.hideDesktop {
  display: none !important;
}

.instaSecondaryBgColor {
  background-color: var(--site-secondary-color);
}

.h100 {
  min-height: 100vh;
}

.d-h100 {
  min-height: 100vh;
}

.blackColor {
  color: #000000;
}

.mutedSubHeading {
  color: #bab8be;
}

.customboxshadow {
  box-shadow: 0px 4px 20px rgb(0 0 0 / 10%);
}

.blackText {
  color: #292929;
}

.lightBlackColor {
  color: #302834;
}

.secondaryBtnBgColor {
  background-color: var(--site-cta-color) !important;
}

.splashImage {
  width: 500px;
}

.form-check-input:checked {
  background-color: var(--site-primary-color);
  border-color: var(--site-primary-color);
}

.flotRight {
  float: right;
}

.editIcon {
  color: #0b75d2 !important;
  font-size: clamp(13px, 1.2vw, 16px) !important;
}

.deleteIcon {
  color: #ff0000 !important;
  font-size: clamp(13px, 1.2vw, 16px);
}

.noBorder {
  box-shadow: none !important;
}

.border-left-primary {
  border-left: 0.25rem solid #4e73df !important;
}

.border-left-danger {
  border-left: 0.25rem solid #e74a3b !important;
}

.border-left-success {
  border-left: 0.25rem solid #1cc88a !important;
}

.border-left-info {
  border-left: 0.25rem solid #36b9cc !important;
}

.icon-primary {
  color: #405eb8 !important;
}

.icon-danger {
  color: #b23a2f !important;
}

.icon-info {
  color: #2a94a4 !important;
}

.successBgColor {
  background-color: #129263;
}

.icon-success {
  color: #129263 !important;
}

.upgradeBtn {
  padding: 2px 5px !important;
}

.btn-close {
  background: none !important;
}

.btn-close {
  opacity: 1 !important;
}

.modalCloseBtn {
  background-image: none;
}

.customResourcesBoxShadow {
  box-shadow: 0px 4px 20px rgb(0 0 0 / 10%);
}

.customPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}

.customPagination .left select {
  width: 80px;
  margin: 0px 15px;
  font-size: clamp(10px, 0.9vw, 14px);
}

.responsiveTable table.table td .editIcon i {
  color: var(--site-primary-color);
  padding-right: 8px !important;
  margin-right: 0px !important;
}

.responsiveTable table.table td .deleteIcon i {
  color: #ff0000;
  margin-right: 0px;
}

.customPagination .left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customPagination.right {
  display: flex;
  align-items: center;
}

.customPagination .right ul {
  margin: 0px;
  align-items: center;
}

.breadcrumbArea {
  margin-top: 20px;
}

.breadcrumpArea a.primaryColor {
  margin-right: 0px;
  margin-left: 10px;
}

.accordion-body .enterIntro.cardBoxShadow .mb-0 .col-md-4 select.form-select {
  margin-bottom: 15px;
}

.page-item.active .page-link {
  color: #fff !important;
}

.customPagination .right ul li span {
  border: none;
  border-radius: 8px;
}

nav.nav.flex-column.secondaryOptions a.nav-link.cursorPointer {
  color: #212529;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

nav.nav.flex-column.secondaryOptions a.nav-link.cursorPointer i {
  margin-bottom: 10px !important;
}

.customPagination .right ul li a {
  border: none;
  color: #212529 !important;
  padding: 8px;
}

.customPagination .right a {
  text-decoration: none;
}

.customPagination .right ul li.active span {
  background-color: var(--site-primary-color) !important;
  box-shadow: 1px 1px 5px 3px rgb(0 0 0 / 15%);
}

.mediaImage.blue.box .col.text-start {
  display: flex;
}

.mediaImage.blue.box .col.text-end {
  display: flex;
}

.customPagination .right {
  margin-top: 10px;
  overflow-x: auto;
  width: auto;
  max-width: 400px;
}

.mobileUpgradeBox {
  height: 145px;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
  border-radius: 8px;
  background: #e91e63;
}

.userImage {
  width: 70px;
  height: 70px;
  border: 1px solid #c9c4c4;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 12%);
  object-fit: cover;
}

.modalHeader {
  background-color: var(--site-primary-color);
  border-radius: 15px 15px 0 0;
}

.modalTitle {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.modalHeader .btn-close {
  font-size: 25px;
  padding: 0px !important;
  padding-right: 5px !important;
  color: #ffffff;
  margin-bottom: 8px !important;
}

.paidFeature {
  background-color: #e7f4ff;
  padding: 10px 15px !important;
  border-radius: 8px;
}

.upgradeBox {
  height: 100px;
  /* box-shadow: 0px 4px 20px rgb(0 0 0 / 5%); */
  border-radius: 8px;
  background: #e91e63;
}

.upgradeIcon {
  background-color: #ffbdd3;
  border-radius: 8px;
  padding: 20px;
  width: 100px;
  text-align: center;
}

.oneClickUpgrade {
  border-radius: 8px;
  text-align: center;
  background-color: #ffffff;
  color: #e91e63 !important;
}

.cardHeader {
  background-color: #e91e63;
  padding: 12px;
  border-radius: 10px 10px 10px 10px;
}

.logoRow img {
  max-width: 120px;
  height: 40px;
}

.row.justify-content-center.h-100 .col-11.col-sm-9.col-md-7.col-lg-7 {
  margin-top: 0px !important;
}

.dashboardContainer .customSideNav a.nav-link .activeNavigation {
  color: #f15a25 !important;
  font-size: clamp(10px, 0.9vw, 14px);
  background: #fff8f5;
  padding: 8px !important;
  border-radius: 8px;
}

.dashboardContainer .contactManger .dropdown-menu::-webkit-scrollbar-thumb {
  background-color: var(--site-primary-color);
  border-radius: 8px;
}

.cursorPointer {
  cursor: pointer !important;
}

.cursorInvalid {
  cursor: not-allowed !important;
}

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

.buttons i {
  display: block;
  text-align: center;
  margin-bottom: 15px;
  margin-top: 15px;
  font-size: 22px;
}

::-webkit-scrollbar-thumb {
  background: var(--site-primary-color);
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar {
  width: 7px;
}

.publishBtn {
  background-color: #1c2d64 !important;
  color: #ffffff !important;
  padding: 10px 10px !important;
  border-radius: 0.5rem !important;
  font-size: 14px !important;
}

.viewBtn {
  background-color: #009688 !important;
  color: #ffffff !important;
  padding: 10px 10px !important;
  border-radius: 0.5rem !important;
  font-size: 14px !important;
}

.upgrade {
  background-color: #ed1c24 !important;
  color: #ffffff !important;
  padding: 10px 15px !important;
  border-radius: 50px !important;
  font-size: 14px !important;
}

.myLine {
  height: 1px;
  width: 100%;
  background-color: #efefef;
  margin: 10px 0px;
}

.cdk-overlay-container {
  z-index: 9999 !important;
}

.mat-option.mat-active {
  background: #ffffff0a !important;
  color: #000 !important;
}

.mat-autocomplete-panel {
  background: #fff !important;
  color: #000 !important;
}

.mat-option {
  color: #000 !important;
}

.mat-form-field-label,
.mat-hint {
  color: #0f0f0fb3 !important;
}

.mat-form-field-appearance-fill .mat-form-field-flex {
  border-radius: 4px 4px 4px 4px;
  background-color: #c4c4c41a;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-top-color: rgb(206, 212, 218);
  border-right-color: rgb(206, 212, 218);
  border-bottom-color: rgb(206, 212, 218);
  border-left-color: rgb(206, 212, 218);
  border-top-color: rgb(206, 212, 218);
  border-right-color: rgb(206, 212, 218);
  border-bottom-color: rgb(206, 212, 218);
  border-left-color: rgb(206, 212, 218);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

a:hover {
  cursor: pointer !important;
}

.customPagination .right ul li a i {
  margin-top: 2px;
}

.editHelloBtn {
  font-weight: 700;
  font-size: clamp(10px, 0.9vw, 14px);
  width: 100%;
  margin-top: 30px;
  padding: 8px;
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #f44336 !important;
  border-color: var(--site-primary-color) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   CALENDAR REDESIGN — bdMgr design system
   ───────────────────────────────────────────────────────────────────── */

/* ── Card wrapper ── */
.bdMgrCalCard {
  background: #ffffff;
  border: 1px solid #cddaff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.07),
    0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ── Toolbar ── */
.bdMgrCalToolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #cddaff;
  background: #ffffff;
  flex-wrap: wrap;
}

.bdMgrCalMonthTitle {
  font-size: 17px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0;
  flex: 1;
  letter-spacing: -0.3px;
}

.bdMgrCalToolbarRight {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Nav buttons (Prev / Today / Next) ── */
.bdMgrCalNavGroup {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f8f9ff;
  border: 1px solid #cddaff;
  border-radius: 10px;
  padding: 3px;
}

.bdMgrCalNavBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #1c1a16;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  font-family: var(--site-primary-font);
}

.bdMgrCalNavBtn:hover {
  background: #ffffff;
  color: var(--site-cta-color);
}

.bdMgrCalNavBtn--today {
  font-weight: 600;
}

/* ── Create Task button ── */
.bdMgrCalCreateBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 36px;
  background: var(--site-cta-color);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
  font-family: var(--site-primary-font);
  white-space: nowrap;
}

.bdMgrCalCreateBtn:hover {
  background: #d44d1c;
  transform: translateY(-1px);
}

/* ── View switcher (Month / Week / Day) ── */
.bdMgrCalViewGroup {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f8f9ff;
  border: 1px solid #cddaff;
  border-radius: 10px;
  padding: 3px;
}

.bdMgrCalViewBtn {
  height: 30px;
  padding: 0 12px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #808080;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  font-family: var(--site-primary-font);
}

.bdMgrCalViewBtn:hover {
  color: #1c1a16;
}

.bdMgrCalViewBtn--active {
  background: var(--site-cta-color) !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* ── Member select wrapper ── */
.bdMgrCalMemberSelect {
  min-width: 180px;
}

/* ── Calendar grid container ── */
.bdMgrCalGrid {
  background: #ffffff;
}

/* ─── ANGULAR-CALENDAR OVERRIDES ─────────────────────────────────────── */

/* Month view — header row (Sun Mon Tue …) */
.bdMgrCalGrid .cal-month-view .cal-header {
  background: #ffffff !important;
  border-bottom: 1px solid #cddaff !important;
}

.bdMgrCalGrid .cal-month-view .cal-header .cal-cell {
  padding: 10px 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #808080 !important;
  border: none !important;
}

/* Days grid */
.bdMgrCalGrid .cal-month-view .cal-days {
  border: none !important;
}

.bdMgrCalGrid .cal-month-view .cal-cell-row {
  border-bottom: 1px solid #ede9e0 !important;
}

.bdMgrCalGrid .cal-month-view .cal-cell-row:last-child {
  border-bottom: none !important;
}

.bdMgrCalGrid .cal-month-view .cal-day-cell {
  min-height: 100px !important;
  border-right: 1px solid #ede9e0 !important;
  padding: 8px 10px !important;
  transition: background 0.15s ease !important;
  cursor: pointer;
}

.bdMgrCalGrid .cal-month-view .cal-day-cell:last-child {
  border-right: none !important;
}

.bdMgrCalGrid .cal-month-view .cal-day-cell:hover {
  background: #faf5f2 !important;
}

/* Day number */
.bdMgrCalGrid .cal-month-view .cal-day-number {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1c1a16 !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  margin: 0 0 4px 0 !important;
  opacity: 1 !important;
}

.bdMgrCalGrid .cal-month-view .cal-day-cell.cal-out-month .cal-day-number {
  color: #c8c4bc !important;
  opacity: 1 !important;
}

/* Today cell */
.bdMgrCalGrid .cal-month-view .cal-day-cell.cal-today {
  background-color: rgba(240, 92, 41, 0.06) !important;
}

.bdMgrCalGrid .cal-month-view .cal-day-cell.cal-today .cal-day-number {
  background: var(--site-cta-color) !important;
  color: #ffffff !important;
}

/* Weekend day numbers — subtle tint */
.bdMgrCalGrid
  .cal-month-view
  .cal-cell-row
  .cal-day-cell:first-child
  .cal-day-number,
.bdMgrCalGrid
  .cal-month-view
  .cal-cell-row
  .cal-day-cell:last-child
  .cal-day-number {
  color: #c8643a;
}

/* Events */
.bdMgrCalGrid .cal-month-view .cal-event {
  background-color: var(--site-cta-color) !important;
  border-color: var(--site-cta-color) !important;
  border-radius: 4px !important;
  width: 8px !important;
  height: 8px !important;
}

.bdMgrCalGrid .cal-month-view .cal-day-badge {
  background-color: var(--site-cta-color) !important;
  border-radius: 12px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
}

.bdMgrCalGrid .cal-month-view .cal-open-day-events {
  background: #ffffff !important;
  border-top: 2px solid var(--site-cta-color) !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  padding: 12px 16px !important;
}

.bdMgrCalGrid .cal-month-view .cal-event-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #1c1a16 !important;
}

/* ── Week view ── */
.bdMgrCalGrid .cal-week-view .cal-header-cell,
.bdMgrCalGrid .cal-week-view .cal-day-headers .cal-header {
  background: #ffffff !important;
  border-bottom: 1px solid #cddaff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #808080 !important;
}

.bdMgrCalGrid .cal-week-view .cal-hour-odd {
  background-color: #fdfcfa !important;
}

.bdMgrCalGrid .cal-week-view .cal-hour:not(:last-child) .cal-hour-segment {
  border-bottom: 1px solid #ede9e0 !important;
}

.bdMgrCalGrid .cal-week-view .cal-day-columns .cal-day-column {
  border-left: 1px solid #ede9e0 !important;
}

.bdMgrCalGrid .cal-week-view .cal-time-events .cal-event,
.bdMgrCalGrid .cal-week-view .cal-event {
  background-color: var(--site-cta-color) !important;
  border-color: var(--site-cta-color) !important;
  border-radius: 6px !important;
  color: #fff !important;
}

/* ── Day view ── */
.bdMgrCalGrid .cal-day-view .cal-hour-odd {
  background-color: #fdfcfa !important;
}

.bdMgrCalGrid .cal-day-view .cal-hour:not(:last-child) .cal-hour-segment {
  border-bottom: 1px solid #ede9e0 !important;
}

.bdMgrCalGrid .cal-day-view .cal-event {
  background-color: var(--site-cta-color) !important;
  border-color: var(--site-cta-color) !important;
  border-radius: 6px !important;
  color: #fff !important;
}

.dropImg {
  position: relative;
  width: 80px;
  height: 80px;
  background-color: #ececec;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.dropImg i {
  color: #b0b0b0;
  font-size: 20px;
}

.dropImg input {
  position: absolute;
  left: 0;
  top: 25px;
  opacity: 0;
}

.social {
  padding: 0px;
  margin: 0px;
}

.social li {
  list-style: none;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.social li .fa-facebook-f {
  background-color: #3b5998;
}

.social li .fa-instagram {
  background-color: #e4405f;
}

.social li .fa-linkedin-in {
  background-color: #0077b5;
}

.social li .fa-twitter {
  background-color: #55acee;
}

.social li .fa-youtube {
  background-color: #cd201f;
}

.social li .fa-pinterest {
  background-color: #bd081c;
}

.social li .fa-whatsapp {
  background-color: #198754;
}

.social li .fa-tiktok {
  background-color: #0f0f0f;
}

.social li i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 15px;
  margin-right: 10px;
  color: #ffffff;
}

.scrollBarModal .col-md-12.mt-2 input#inlineRadio1 {
  margin-top: 5px !important;
}

.cManikMap {
  height: 400px;
  width: 100%;
  margin-top: 20px;
}

.filterDate {
  border-bottom: 2px dashed #e8e8e8;
  padding-bottom: 30px;
  margin-bottom: 35px;
}

.filterDate .btn {
  font-size: clamp(10px, 0.9vw, 14px);
  width: 100%;
  padding: 10px;
  border-radius: 8px;
}

.copyButton {
  background-color: #06a9ff;
  border: #06a9ff;
  padding: 10px 20px;
  color: #fff;
  border-radius: 8px;
  margin-top: 50px;
  margin-bottom: 20px;
  cursor: pointer;
}

.rejectedBg {
  background-color: #ff1c1c;
}

.greenBg {
  background-color: #1a9a2f !important;
}

.greenColor {
  color: #1a9a2f;
}

nav.nav.flex-column .nav-link.cursorPointer {
  color: #212529;
}

.order-first nav.nav.flex-column .nav-link.cursorPointer {
  padding: 8px;
  border-top: 1px solid #c3c3c3;
}

.modalCustomHeight {
  height: 650px;
}

.dropImg img {
  height: 100%;
  object-fit: cover !important;
  text-align: center;
  position: relative;
  right: 15px;
}

.social li img {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 15px;
  margin-right: 10px;
}

.buttonHeight {
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 7px;
}

.customBtnWidth {
  padding: 8px 80px !important;
}

.candidDrop {
  width: 100%;
  min-height: 100px;
  max-height: 100px;
  margin-top: 0px !important;
  object-fit: cover;
  object-position: top;
}

.candidDrop i {
  font-size: 38px;
}

.embed-responsive {
  height: 100px;
}

.paidFeaturePink {
  background-color: transparent;
  padding: 10px 15px !important;
  border-radius: 8px;
}

img.fa-brands {
  width: 45px;
}

.instacitiTagSlug {
  /* border: none !important; */
  color: var(--site-primary-color) !important;
  cursor: pointer;
}

.input-icons {
  width: 100%;
  margin-bottom: 10px;
  position: relative;
}

.input-icons {
  position: absolute;
  height: 100%;
}

.cTooltipCancelText {
  position: relative;
  border: 0;
  background: none;
  font-size: 22px;
  cursor: pointer;
  color: #e86406;
}

.cTooltipSaveText {
  position: relative;
  border: 0;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: green;
}

.invalid input:required:invalid {
  background: #be4c54;
}

.invalid input:required:valid {
  background: #17d654;
}

.imagePreview {
  position: relative;
  max-width: 80px;
}

.imagePreview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.socialMediaPreview video {
  max-width: 500px;
}

.imagePreview video {
  border: 1px solid #d1d1d1;
}

.imagePreview video {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.coverimagePreview {
  position: relative;
}

.coverimagePreview img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e9e9e9;
}

.imageDelete {
  position: absolute;
  top: -8px;
  right: -28px;
  color: rgb(220, 38, 38);
  font-size: 20px;
  cursor: pointer;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  line-height: 1;
}

.videoPreview {
  position: relative;
}

.videoDelete {
  color: red;
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 20px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 100px;
}

.coverimageDelete {
  color: red;
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 20px;
  background-color: #fff;
  cursor: pointer;
  border-radius: 100px;
}

.mobileNavigation {
  display: block;
}

.mobileNavigation .btn-dropdown {
  color: var(--site-primary-color) !important;
  background-color: #ffffff;
  border: 1px solid #ddd;
  text-align: left;
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  text-transform: uppercase;
  position: relative;
}

.mobileNavigation .btn-dropdown i {
  font-size: 20px;
}

.mobileNavigation .btn-dropdown .fa-angle-down {
  position: absolute;
  right: 10px;
}

.mobileNavigation .dropdown-menu {
  max-width: 100% !important;
  width: 100%;
}

.pieGraph {
  transform: scale(1);
  padding: 52px 0px;
}

.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
  background: var(--site-secondary-color) !important;
}

/* .infoAccrodions .accordion-button::after {
    color: #ffffff !important;
    content: "\f078" !important;
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 900;
    background: none !important;
} */

.serviceList .customBtnMargin {
  margin-top: 24px !important;
}

.editForm .col-md-6.mt-2 label.form-check-label {
  margin-top: 0px !important;
}

/* label {
  color: #334155;
  font-size: clamp(13px, 0.9vw, 14px) !important;
  margin-bottom: 1px !important;
} */

.customBtnMargin button.btn.primaryBgColor.text-white {
  padding: 7px;
  border-radius: 8px;
  line-height: 20px;
}

.sliderSmartMedia.smartMediaPreview video {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}

.customBtnMargin {
  margin-top: 28px !important;
}

.rightSideTable {
  width: auto !important;
}

.largeModal {
  z-index: 9999 !important;
}

.customContainerWidth {
  width: 650px;
}

.buttonH50 {
  padding: 13px 5px !important;
  width: 100%;
}

.navMenu {
  padding: 0 !important;
}

.mat-autocomplete-panel {
  min-width: 175px !important;
}

.formBgColor {
  background: #f6f4ff;
  border-radius: 8px;
  box-shadow: 0px 4px 20px 5px rgb(0 0 0 / 5%);
  padding: 20px;
  margin: 0 auto;
}

.businessLogo img {
  max-width: 150px;
  max-height: 150px;
  object-fit: cover;
}

.businessInfo {
  text-align: left;
}

.customAccordion {
  display: block !important;
}

.customAccordion span {
  border: none !important;
  background-color: transparent !important;
}

.smartMediaPreview {
  position: relative;
}

.smartMediaImg img {
  max-width: 667px;
  min-width: 667px;
  max-height: 447px;
  min-height: 447px;
  object-fit: cover;
  border-radius: 8px;
}

.imagePreview img {
  border: 1px solid #d1d1d1;
}

ngb-modal-window.d-block.modal.fade.show {
  z-index: 1234;
}

.modal {
  z-index: 1234 !important;
}

.myCustomButton {
  height: 45px;
  border-radius: 7px;
}

.dineInUserImg {
  width: 22px;
  height: 22px;
  border-radius: 100px;
}

.carouselThumbs .addImg {
  position: relative;
  width: 95px;
  height: 101px;
  background: #e4e8ff;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3f51b5;
  font-size: 30px;
}

.carouselThumbs .addImg input {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  width: 100%;
}

.carouselThumbs .floatAddBtn {
  position: absolute;
  right: 25px;
  top: -1px;
  z-index: 11;
  background: white;
  width: 175px;
  padding-left: 60px;
}

button.btn.saveBtn {
  background-color: var(--site-primary-color);
  color: #fff;
  font-size: 15px;
}

.carouselThumbs {
  position: relative;
}

.calender .modal-header {
  background-color: #3f51b5;
}

.calender .modal-title {
  color: #ffffff;
}

.calender .table th {
  color: #3f51b5;
  background-color: #e5e9ff;
  text-align: center;
  padding: 15px;
}

.dashboardContainer .famousOne .customPagination {
  display: flex;
}

.calender .table td:hover {
  background-color: #f4f6ff;
}

.calender .table td {
  border: 1px solid #eee;
  padding: 10px 15px;
  height: 100px;
  text-align: right;
  font-weight: 600;
  width: 14.28%;
  color: #7b7b7b;
}

.calender .table {
  margin-bottom: 0px;
  border-radius: 8px;
  overflow: hidden;
}

.businessName {
  text-align: center;
}

.businessDashIcon {
  font-size: 40px;
  color: #ef1c74 !important;
}

.video-container {
  position: relative;
  margin: 20vh auto 0 auto;
  display: block;
  width: 50vw;
  min-width: 310px;
  box-shadow: 0 1px 2px 1px rgb(0 0 0 / 60%);
}

.video-control {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 6em;
  opacity: 1;
  transition: opacity 0.3s;
  color: #fff;
  text-align: center;
}

.video-control:before {
  bottom: 50%;
  margin: 0em 0 -0.5em -0.5em;
  z-index: 1000;
  content: "\f144";
  font-family: FontAwesome;
}

.video {
  display: block;
  position: relative;
  max-width: 100%;
  cursor: pointer;
}

.video-control.paused:after {
  opacity: 0;
}

.video-control:after {
  top: 50%;
  margin: -0.5em 0 0em -0.5em;
  content: "\f28b";
  font-weight: 700;
  font-family: FontAwesome;
}

.video-control:hover:before,
.video-control:hover:after {
  opacity: 0.8;
  color: #fff;
  text-shadow: 0 1px 5px rgb(0 0 0 / 50%);
  transition: 0.1s ease all;
}

.video-control:before,
.video-control:after {
  position: absolute;
  width: 1em;
  height: 1em;
  left: 50%;
  opacity: 0;
  transition: 0.8s ease all 0.5s;
}

.video-control.paused:after {
  opacity: 0;
}

.video-control.playing:before {
  opacity: 0;
}

.libraryImages img {
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #d5d5d5;
}

.selectFrame {
  overflow-x: auto;
  max-height: 675px;
}

.selectFrame img {
  margin-bottom: 20px;
}

.socialMediaPreview img {
  max-width: 500px;
}

.titleHighlighter {
  background-color: #ef1c74 !important;
  padding: 10px;
  border-radius: 8px;
  color: #ffffff;
}

.unUpgradeIcon {
  font-size: 40px;
  color: #6e6e6e;
}

.dashUpgradeButton {
  background-color: #009688;
  color: #ffffff;
  /* border: 2px solid #e91e63;
    color: #e91e63; */
  border-radius: 10px;
  /* font-weight: 700; */
  font-size: 12px;
  padding: 3px 10px;
}

.dashUpgradeButton:hover {
  background-color: #ff672b;
  color: #ffffff;
}

.upgradePlan .card {
  border: none;
}

.upgradePlan .card .cardImg {
  position: relative;
}

.upgradePlan .card .cardImg::before {
  content: "";
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
    rgba(83, 200, 191, 0),
    rgba(83, 200, 191, 0),
    rgba(83, 200, 191, 0.3),
    rgba(83, 200, 191, 0.5),
    rgba(83, 200, 191, 0.7),
    rgba(83, 200, 191, 0.7),
    rgba(83, 200, 191, 0.7),
    rgba(83, 200, 191, 0.7)
  );
  z-index: 11111;
}

.upgradePlan .card .cardImg img {
  width: 100%;
  position: relative;
}

.overlayText {
  font-size: 13px !important;
  line-height: 20px;
  cursor: pointer;
}

.upgradePlan .card .overlay h5 {
  color: #ffffff;
  font-weight: 400;
}

.upgradePlan .card h5 {
  color: #213e6e;
  font-size: 24px;
  margin-bottom: 20px;
  margin-top: 25px;
  font-weight: 600;
}

.dashboardContainer .enterIntro .green-btn {
  background-color: #198754 !important;
  color: #fff;
  font-size: 16px;
  padding: 10px 25px;
  margin-top: 0px;
  border-radius: 8px;
  font-weight: 600;
}

.upgradePlan h5 {
  color: #505050;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 30px;
}

.plans .card .card-body {
  padding: 0px;
}

.plansHeader {
  background-color: #53c8bf;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.upgradePlan .card p {
  color: #848484;
}

.upgradePlan .card a {
  text-decoration: none;
  color: #1c2d64;
  font-size: 16px;
}

.planDetailsCta {
  text-decoration: none;
  color: #1c2d64;
  font-size: 16px;
}

.activeSocialFrame {
  padding: 8px;
  border: 2px solid var(--site-primary-color);
  border-radius: 8px;
  box-shadow: 0px 4px 20px rgb(63 81 181 / 42%);
}

.userStats {
  padding: 10px;
  background: #daefff;
  border-radius: 8px;
  margin-bottom: 14px;
  min-height: 165px;
  /* -moz-box-shadow: inset 2px 2px 5px rgb(63 81 181 / 42%), 1px 1px 5px rgba(255, 255, 255, 1); */
  /* -webkit-box-shadow: inset 2px 2px 5px rgb(63 81 181 / 42%), 1px 1px 5px rgb(255 255 255); */
  /* box-shadow: inset 2px 2px 5px rgb(63 81 181 / 42%), 1px 1px 5px rgb(255 255 255); */
}

.userStats img {
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

.invoiceList .customPagination {
  display: flex;
}

.custom-btn {
  color: #fff !important;
  border-radius: 0.5rem !important;
  padding: 10px 10px !important;
  font-weight: 600 !important;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow:
    inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1),
    4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
}

.creatorShapeImage {
  width: 70px;
  height: 70px;
  margin-bottom: 30px;
}

.templateThumbnail {
  border-radius: 8px;
}

.socialBoostButton {
  border: none !important;
  background: rgb(255, 147, 6) !important;
  background: linear-gradient(
    0deg,
    rgb(251, 156, 33) 0%,
    rgb(255, 122, 33) 100%
  ) !important;
  color: #fff !important;
  overflow: hidden;
  font-size: clamp(10px, 0.9vw, 14px);
}

.socialCreatorBoostButton {
  border: none !important;
  background: rgb(255, 147, 6) !important;
  background: linear-gradient(
    0deg,
    rgb(251 79 104) 0%,
    rgb(211 38 63) 100%
  ) !important;
  color: #fff !important;
  overflow: hidden;
  font-size: clamp(10px, 0.9vw, 14px);
}

.socialBoostButton:hover {
  text-decoration: none;
  color: #fff;
}

.socialBoostButton:before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 3s ease-in-out infinite;
}

.socialBoostButton:hover {
  opacity: 0.7;
}

.socialBoostButton:active {
  box-shadow:
    4px 4px 6px 0 rgba(255, 255, 255, 0.3),
    -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
}

@-webkit-keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@keyframes shiny-btn1 {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.bizcardMapDashboard {
  position: relative;
}

.totalStats {
  width: 150px;
  padding: 10px;
  border-radius: 8px;
  position: absolute;
  right: 21px;
  top: 20px;
}

.businessHome a {
  background-color: #f15a25;
  border: 2px solid #f15a25;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.businessHome a i {
  padding-right: 8px !important;
}

.businessHome a:hover {
  background-color: #ef1c74;
  border: 2px solid #ef1c74;
  color: #ffffff;
}

.ideasButton {
  padding: 8px !important;
  font-size: 16px !important;
  width: 120px !important;
}

.sliderThumbnail {
  width: 100px;
  height: 100px;
  border-radius: 7px;
}

.customAccordionColor::after {
  color: var(--site-primary-color) !important;
}

.customBlack {
  color: #1d1d1d !important;
}

.manageBusiness {
  background: #5351b5;
  box-shadow: 0px 13px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  z-index: 2 !important;
  position: relative;
}

.manageBusinessIcon img {
  width: 100px;
}

.upgradeBand {
  background-color: #f2f4ff;
  border-radius: 8px;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: -50px;
  z-index: 1;
  position: relative;
}

.smartMediaThumb img {
  border-radius: 0.5rem !important;
  min-height: 100px !important;
  max-height: 100px;
  object-fit: cover;
  cursor: pointer;
}

.smartMediaThumb video {
  border-radius: 0.5rem !important;
  min-height: 100px !important;
  max-height: 100px;
  object-fit: cover;
  cursor: pointer;
}

.smartMediaPreview img {
  min-height: 250px;
  max-height: 250px;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  position: relative;
  max-width: 100%;
}

.qrCodeDownloadPreview {
  box-shadow: 0px 4px 20px rgb(0 0 0 / 9%);
}

.topInstaLogo {
  width: 80px;
}

.countryDropdownMenu option {
  height: auto;
  max-height: 100px;
  overflow-x: hidden;
}

.selectedEffectColor {
  background: #f0e7ff;
}

.custom-border-bottom {
  border-bottom: 1px solid #c3c3c3 !important;
  cursor: pointer !important;
}

.icon2 {
  padding: 14px 0;
  color: var(--site-primary-color) !important;
  width: 43px;
  text-align: center;
  font-size: 18px !important;
  border: 1px solid #ced4da;
  border-radius: 10px;
}

.text-primary {
  color: var(--site-primary-color) !important;
}

.resendOTP {
  text-align: center;
}

.resendOTP p.text-right {
  text-align: center !important;
}

.resendOTP a {
  color: #ff0000;
}

form#msform .col-3.d-grid {
  padding-right: 0px;
}

.instacitiLogo img {
  width: 72px;
}

.freeBanner img {
  width: 135px;
}

.uploadimagePreview {
  position: relative;
}

.uploadimageDelete {
  position: absolute;
  top: -5px;
  right: -10px;
  color: red;
}

.custombtnHeight {
  padding: 11px;
}

.upgradeboxLogo {
  width: 100px;
  margin-bottom: 5px;
}

.btnupgradeBizcard {
  background-image: linear-gradient(
    to right,
    #fc6076,
    #ff9a44,
    #ef9d43,
    #e75516
  );
  box-shadow: 0 4px 15px 0 rgb(252 104 110 / 75%);
}

.btnupgradeBizcard {
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 600;
  color: #fff;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.btnupgradeBizcard:hover {
  color: #ffffff;
}

.managefromWeb {
  margin-top: 250px;
}

.thankyouMessagePage {
  padding-top: 200px;
}

.additionalinfoMessage img {
  width: 50px;
}

.metalcardpurchaseBox {
  border: none !important;
  position: relative !important;
  border-radius: 0.5rem !important;
  box-shadow: 4px 8px 40px 10px rgb(0 0 0 / 5%) !important;
  padding: 15px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fffdf1;
  background-clip: border-box;
  /* border: 1px solid #cab562; */
  font-size: 0.875rem;
  background: -webkit-linear-gradient(left, #edc06e, #fde08d, #df9f28);
  background: linear-gradient(to right, #8f6b29, #fde08d, #df9f28);
  font-weight: normal;
}

.purchaseStepper.fixed {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  right: 0;
}

.goldenBgColor {
  background-color: #a38539;
}

.metalcardGrid {
  border: none !important;
  position: relative !important;
  border-radius: 0.5rem !important;
  box-shadow: 4px 8px 40px 10px rgb(0 0 0 / 5%) !important;
  padding: 15px;
  background-color: #fffdf1;
  /* border: 1px solid #cab562; */
  font-size: 0.875rem;
  /* background: -webkit-linear-gradient(left, #edc06e, #FDE08D, #DF9F28);
  background: linear-gradient(left, #8f6B29, #FDE08D, #DF9F28); */
  font-weight: normal;
}

.metalcardgridImage {
  margin-top: -75px;
}

.goldoutlineButton {
  border: 1px solid #a38539;
  color: #a38539;
}

.smartmediaIcon .input-group-addon {
  padding: 8px;
}

.sliderSmartMedia #widget2 {
  max-width: 333px;
}

/* .form-label {
  color: #444;
  font-weight: 500;
  font-size: clamp(13px, 0.9vw, 14px);
  margin-bottom: 0.5rem;
} */

.border-start-mobile {
  border-left: 1px solid #dee2e6;
}

.smd p {
  font-family: var(--site-primary-font) !important;
}

/* My Custom CSS Ends Here */

.desktopDisplay {
  display: inline;
}

/* Distributer Plan Page Start Here */

::-webkit-scrollbar-thumb {
  background: var(--site-primary-color);
}

.distributerTertiaryBgColor {
  background-color: var(--site-tertiary-color) !important;
}

.distributerPrimaryBgColor {
  background-color: var(--site-primary-color) !important;
}

.distributerSecondaryColor {
  color: var(--site-secondary-color) !important;
}

.distributerFeatures .card {
  box-shadow: 1px 10px 15px 5px var(--site-tertiary-color) !important;
}

.distributerLogoImage {
  max-width: 185px !important;
}

.formCard {
  box-shadow: 0px 4px 75px 5px rgba(217, 229, 255, 0.5);
}

.herosectionHeader h1 {
  font-size: 90px;
  color: #7244de;
}

.alert-dismissible .btn-close {
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat !important;
  /* top: 11px; */
  right: 15px;
}

.bg-light {
  background-color: #f8f9fa !important;
}

.bg-light-grey {
  background-color: #f9f9f9 !important;
}

.bizcardLoginButton {
  border: 2px solid #7244de;
  color: #7244de;
  border-radius: 50px;
  padding: 0px 30px;
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.borderRadius5 {
  border-radius: 5px !important;
}

.borderRadius10 {
  border-radius: 10px !important;
}

.borderRadius15 {
  border-radius: 15px !important;
}

.borderRadius25 {
  border-radius: 25px !important;
}

.borderRadius50 {
  border-radius: 50px !important;
}

.herosectionButton .btn {
  background-color: #e41a6e;
  border-radius: 50px;
  color: #fff !important;
  padding: 12px 50px;
}

.heading2 {
  font-size: 35px;
  line-height: 40px;
}

.colorLightBlack {
  color: #213e6e;
}

.card-body {
  flex: 1 1 auto;
  padding: 12px;
}

.customCardBorder {
  border-radius: 12px;
}

.features {
  padding-bottom: 40px;
}

.myBusiness .lightBlueBg {
  background-color: #ecedff;
  font-size: clamp(10px, 0.9vw, 14px);
  padding: 10px 10px !important;
}

.orangeGradientButton {
  background: linear-gradient(
    90deg,
    rgba(255, 101, 37, 1) 0%,
    rgba(255, 169, 66, 1) 100%
  );
}

.orangeGradientButton {
  background: linear-gradient(
    90deg,
    rgba(255, 101, 37, 1) 0%,
    rgba(255, 169, 66, 1) 100%
  );
  padding: 0px 30px;
}

.features .card {
  padding: 30px 0px;
  text-align: center;
  border: none;
  margin-bottom: 25px;
  box-shadow: 1px 10px 15px 5px rgb(255, 227, 238);
  border-radius: 8px;
  cursor: pointer;
  transition: 0.5s;
}

.howItWork {
  background-image: url(https://dkzxkcjlbnjui.cloudfront.net/portal/distribution/images/how-it-works.png);
  background-size: cover;
  padding-bottom: 20px;
}

.howItWork .card {
  border: none;
  background-color: #ff1c7a;
  padding: 50px 20px;
  text-align: center;
  color: #ffffff;
  height: 100%;
  border-radius: 8px;
  outline: 2px dashed #ffffff;
  outline-offset: -20px;
}

.howItWork .card img {
  width: 80px;
  display: block;
  margin: auto;
  margin-bottom: 20px;
}

.nav-pills .nav-link {
  background: 0 0;
  border: 0;
  border-radius: 5px !important;
}

.nav-link:focus,
.nav-link:hover {
  color: #0a58ca;
}

.gallery {
  display: flex;
  margin: 10px auto;
  max-width: 600px;
  position: relative;
  padding-top: 400px;
}

.gallerySelector:checked + .galleryImage {
  opacity: 1;
}

.galleryImage {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 20px;
}

.galleryThumb {
  padding-top: 6px;
  margin: 6px;
  display: block;
}

.gallerySelector:checked ~ .galleryThumb > img {
  box-shadow: 0 0 0 3px #0be2f6;
}

.gallerySelector {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #383737 !important;
  text-align: left;
  color: #ffffff !important;
  padding: 5px 10px;
}

.customNav.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--site-primary-color) !important;
  background-color: #ffffff !important;
  font-weight: 400;
  border-radius: 8px;
}

.customNav.nav-pills .nav-link,
.nav-pills .show > .nav-link {
  font-weight: 400;
  color: #ffffff;
  font-size: clamp(12px, 1vw, 14px);
  padding: 10px 8px;
}

.nav-pills .nav-link {
  color: var(--site-primary-color);
  padding: 5px 10px;
  font-size: clamp(10px, 0.9vw, 14px);
}

.customNav.nav-pills .nav-pills .nav-link i {
  margin-right: 10px !important;
}

.distributerCard {
  background-color: #1c2d64 !important;
}

.features .card i {
  margin-bottom: 15px;
  font-size: 40px;
  color: #e41a6e;
}

.features .card:hover {
  box-shadow: 1px 10px 15px 5px rgb(252, 163, 201);
  transform: translateY(-10px);
}

.bizcardPrimaryColor {
  color: #7244de !important;
}

.orangeGradientButton {
  background: linear-gradient(90deg, #ff6525 0%, #ffa942 100%);
}

.primaryBg {
  background: #fff;
  color: #ff792e;
  border-radius: 8px;
}

.sellAnywhere {
  padding-top: 100px !important;
}

.alert {
  border-radius: 0.5rem !important;
}

.customGapping {
  padding-left: 5% !important;
  padding-right: 5% !important;
}

.alert {
  border-radius: 0.5rem !important;
}

.announcementBg {
  background-color: #1c2d64;
}

.plans .topbar {
  padding: 20px 0px 10px 0px;
}

.plans .topbar p {
  margin-bottom: 0;
  color: #213e6e;
}

.plans .topbar h5 {
  font-size: 30px;
  font-weight: 600;
  color: #213e6e;
}

.plans .bgWrapper {
  background-color: #fff;
}

.plans .bgWrapper .btnGroup {
  padding-bottom: 50px;
  padding-top: 10px;
}

.plans .bgWrapper .btnGroup .btn {
  padding: 10px 40px;
  border-radius: 100px;
  color: #ffffff;
  margin-right: 20px;
}

.plans .bgWrapper .btnGroup .btnPurple {
  background-color: #1c2d64;
}

.plans .bgWrapper .btnGroup .btnGreen {
  background-color: #53c8bf;
}

.plans .bgWrapper .btnGroup .btnYellow {
  background-color: #ffc145;
}

.plans .bgWrapper .btnGroup .btnPurple2 {
  background-color: #9b8bff;
}

.getDiscovered {
  background-color: #936eec;
  border-radius: 7px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  height: 415px;
  display: flex;
}

.getDiscovered .line {
  position: absolute;
  width: 750px;
  left: 25px;
  top: 45px;
  z-index: 0;
}

.getDiscovered .title {
  position: absolute;
  left: 10px;
  top: 15px;
  padding-top: 20px;
  padding-left: 19px;
  color: #ffffff;
}

.getDiscovered .title h3 {
  font-size: 30px;
  font-weight: 700;
}

.getDiscovered .title h5 {
  font-size: 25px;
  display: flex;
  align-items: center;
}

.markIcon ul.d-flex {
  justify-content: flex-end;
}

.getDiscovered .title h5 i {
  font-size: clamp(10px, 0.9vw, 14px);
  color: #f2ad22;
  margin: 0px 8px;
}

.getDiscovered .col {
  margin-top: auto;
  padding: 0;
}

.animationSetOne .inner.inner1 {
  animation-name: example;
  animation-duration: 9s;
  animation-iteration-count: infinite;
}

.getDiscovered .inner.inner1 {
  height: 170px;
  background-color: #f15a25;
  padding-top: 10px;
}

.animationSetOne .inner.inner2 {
  animation-name: example2;
  animation-delay: 2s;
  animation-duration: 7s;
  animation-iteration-count: infinite;
}

.getDiscovered .inner.inner2 {
  height: 230px;
  background-color: #f2ad22;
  padding-top: 10px;
}

.animationSetOne .inner.inner3 {
  animation-name: example3;
  animation-duration: 7s;
  animation-delay: 3s;
  animation-iteration-count: infinite;
}

.getDiscovered .inner.inner3 {
  height: 270px;
  background-color: #f15a25;
  padding-top: 10px;
}

.animationSetOne .inner.inner4 {
  animation-name: example4;
  animation-duration: 6s;
  animation-delay: 4s;
  animation-iteration-count: infinite;
}

.getDiscovered .inner.inner4 {
  height: 310px;
  background-color: #1c2d64;
  padding-top: 10px;
}

.animationSetOne .inner.inner5 {
  animation-name: example5;
  animation-duration: 6s;
  animation-delay: 5s;
  animation-iteration-count: infinite;
}

.getDiscovered .inner.inner5 {
  height: 360px;
  background-color: #2c7892;
  padding-top: 10px;
}

.getDiscovered .inner {
  text-align: center;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  padding: 10px;
  box-shadow: -3px 2px 13px 1px rgb(0 0 0 / 30%);
  transition: 0.5s;
}

.getDiscovered .inner.inner1 h2 {
  line-height: 1;
}

.getDiscovered .inner h2 {
  font-size: 80px;
  color: #ffffff80;
}

.getDiscovered .inner h5 {
  color: #ffffff;
}

.getDiscovered .inner p {
  color: #ffffff;
}

.getDiscovered .inner.inner3 h2 {
  margin-bottom: 20px;
  margin-top: 15px;
}

.getDiscovered .inner.inner4 h2 {
  margin-bottom: 30px;
  margin-top: 20px;
}

.getDiscovered .inner.inner5 h2 {
  margin-bottom: 40px;
  margin-top: 50px;
}

.plans .bgWrapper .col-md-9 {
  flex: 0 0 auto;
  width: 70%;
  padding-right: 50px;
}

.famousPlan h5 {
  color: #505050;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 30px;
}

.famousPlan .card h5 {
  color: #213e6e;
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 25px;
}

.famousPlan .card {
  border: none;
  margin-bottom: 50px;
}

.famousPlan .card .cardImg {
  position: relative;
}

.famousPlan .card .cardImg img {
  width: 100%;
  position: relative;
}

.plans .card .card-body {
  padding: 0px;
}

.famousPlan .card:hover .overlay {
  display: flex;
  transition: 0.3s;
}

.famousPlan .card .overlay h5 {
  color: #ffffff;
  font-weight: 400;
}

.famousPlan .card .cardImg::before {
  content: "";
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
    rgba(83, 200, 191, 0),
    rgba(83, 200, 191, 0),
    rgba(83, 200, 191, 0.3),
    rgba(83, 200, 191, 0.5),
    rgba(83, 200, 191, 0.7),
    rgba(83, 200, 191, 0.7),
    rgba(83, 200, 191, 0.7),
    rgba(83, 200, 191, 0.7)
  );
  z-index: 100;
}

.famousPlan .card .overlay {
  padding: 15px 25px;
  display: none;
  transition: 0.3s;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    rgba(83, 200, 191, 0.1),
    rgba(83, 200, 191, 0.3),
    rgba(83, 200, 191, 0.5),
    rgba(83, 200, 191, 0.7),
    rgba(83, 200, 191, 0.9),
    rgba(83, 200, 191, 0.9),
    rgba(83, 200, 191, 0.9),
    rgba(83, 200, 191, 0.9)
  );
  border-radius: 8px;
  /* z-index: 11111111; */
}

.famousPlan .card p {
  color: #848484;
}

.plansHeader {
  background-color: #53c8bf;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.famousPlan .card a {
  text-decoration: none;
  color: #1c2d64;
  font-size: 16px;
}

.addOnProducts {
  margin-top: 30px;
}

.addOnProducts h5 {
  color: #505050;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 50px;
}

.addOnProducts .card h5 {
  color: #213e6e;
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 15px;
}

.addOnProducts .card p {
  color: #848484;
}

.addOnProducts .leftImg {
  position: absolute;
  left: 0;
  top: 200%;
  width: 125px;
}

.addOnProducts .card {
  border: none;
  box-shadow: -4px 1px 10px 1px rgb(0 0 0 / 2%);
  margin-bottom: 60px;
  background-color: transparent;
}

.addOnService {
  margin-top: 20px;
}

.addOnService h5 {
  color: #505050;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 30px;
}

.addOnService .card {
  border: none;
  box-shadow: -4px 1px 10px 1px rgb(0 0 0 / 2%);
  margin-bottom: 50px;
  background-color: transparent;
}

.addOnService .card h5 {
  color: #213e6e;
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 15px;
}

.addOnService .card p {
  color: #848484;
}

.planDetailsCta {
  text-decoration: none;
  color: #1c2d64;
  font-size: 16px;
}

.darkMuted {
  color: #7c7b84;
}

.signUpButton {
  /* background: linear-gradient(270deg, #1c2d64 0%, #8E65F0 112.16%); */
  background: linear-gradient(90deg, #ff6525 0%, #ffa942 100%);
  border-radius: 50px;
  padding: 0px 30px;
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.plans .bgBlueWrapper {
  background-color: #9b8bff;
  padding: 30px 20px;
  border-radius: 8px;
  margin-top: 53px;
  margin-bottom: 60px;
}

.plans .rightImg {
  position: absolute;
  right: 0;
  width: 420px;
}

.plans .bgBlueWrapper h4 {
  color: #ffffff;
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.plans .bgBlueWrapper .btn {
  padding: 10px 30px;
  background-color: #fff;
  color: #1c2d64;
  font-weight: 600;
  width: 100%;
  margin-bottom: 15px;
  font-size: 15px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plans .bgWrapper .col-md-3 {
  flex: 0 0 auto;
  width: 30%;
}

.overlayText {
  font-size: 13px !important;
  line-height: 20px;
  cursor: pointer;
}

.getDiscovered .line {
  position: absolute;
  width: 750px;
  left: 25px;
  top: 45px;
  z-index: 0;
}

.transformText {
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.buttonText {
  width: 70%;
  font-size: 12px;
  padding-left: 0px !important;
}

.buttonAction {
  width: 30%;
}

.alert-warning {
  background-color: #00000000;
  border-color: #00000000 !important;
}

/* Distributer Plan Page Ends here */

/* Social Media Post Preview */

.imageSmartMedia {
  position: relative;
}

.videoSmartMedia {
  position: relative;
}

.sliderSmartMedia {
  position: relative;
}

.overlay {
  bottom: 0;
  transition: 0.5s ease;
  color: white !important;
  padding: 100px;
  text-align: center;
}

#color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(110, 25, 247);
  opacity: 0.6;
}

.recentLibraryDownload img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
}

.recentDownloadGallery img {
  width: 200px;
  height: 200px;
  border-radius: 8px;
}

/* Social Share */

.customResourcesBoxShadow {
  box-shadow: 0px 4px 20px rgb(0 0 0 / 10%);
}

.btn-close {
  opacity: 1 !important;
  background: none !important;
  font-size: 16px;
}

.smd {
  width: 200px;
  font-size: small;
  text-align: center;
  cursor: pointer;
}

.socialShareIcon {
  border-radius: 33px;
  width: 61px;
  height: 61px;
  padding: 1.1rem;
}

.socialShareModalFooter {
  display: block !important;
}

.message {
  font-size: 11px;
  color: #ee5535;
}

.instaBranding .logo {
  width: 120px;
}

.logoText {
  margin-top: 15px;
  font-size: 18px;
  margin-bottom: 0px;
  font-weight: 600;
}

.customButtonHeight {
  padding: 10px 0px;
  border-radius: 10px !important;
}

/* .infoAccrodions .accordion-body .enterIntro.cardBoxShadow .row.mb-0 {
    align-items: center;
} */

.dashboardContainer .serviceList table td a.idCard {
  color: var(--site-primary-color);
  margin-top: 4px;
}

.dashboardContainer .serviceList table td.flotRight {
  align-items: center;
  border-bottom: 0px;
  justify-content: center;
}

.mainCard {
  position: relative;
}

.customboxshadow p.mb-0.ps-3 img.img-fluid.me-3 {
  width: 30px;
}

.d-h100 .row.justify-content-center .col-12 input.form-control.height50 {
  border-right: 0px;
  border-radius: 10px 0px 0px 10px !important;
}

.d-h100 .row.mt-5.justify-content-center .secondaryBtnBgColor.btn-lg {
  border-radius: 8px;
  padding: 10px;
}

.freeBanner img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.previewBizcard .flip-card-inner {
  height: 160px !important;
}

.previewBizcard .flip-card-front img {
  height: 160px !important;
}

.previewBizcard .flip-card {
  border: none !important;
}

.whatsappButton {
  background-color: #25d366;
}

/* new bizcard landing page css start here */

.instaBiz {
  font-family: "Bricolage Grotesque", serif !important;
}

.instaBiz .topHeader {
  text-align: center;
  background-color: #e41a6e;
  padding: 10px;
}

.instaBiz .topHeader p {
  color: #ffffff;
  margin-bottom: 0px;
}

.instaBiz .mainHeader {
  padding: 20px 0px;
  background-color: #fff;
}

.instaBiz .mainHeader .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.instaBiz .mainHeader .user {
  display: flex;
  position: relative;
  padding-left: 50px;
}

.instaBiz .mainHeader .user span {
  font-weight: 600;
}

.instaBiz .mainHeader .user span a {
  display: block;
  color: #d91212 !important;
}

.instaBiz .mainHeader .user img {
  position: absolute;
  left: 0;
  width: 41px;
  height: 41px;
  border-radius: 50%;
}

.instaBiz .mainHeader .logo {
  width: 180px;
}

.instaBiz .mainBody .card {
  padding: 20px;
  border: none;
  margin-top: 25px;
}

.instaBiz .mainBody .card.purple {
  background-color: #f4efff;
  box-shadow: 7.82347px 7.82347px 15.6469px 1.56469px #dbcbff;
}

.instaBiz .mainBody .card.orenge {
  background: #ffe0dc;
  box-shadow: 7.82347px 7.82347px 15.6469px 1.56469px #ffaa9f;
}

.instaBiz .mainBody .card.green {
  background: #dcfffc;
  box-shadow: 7.82347px 7.82347px 15.6469px 1.56469px #a8fff8;
}

.instaBiz .mainBody .card.yellow {
  background: #fff2d9;
  box-shadow: 7.82347px 7.82347px 15.6469px 1.56469px rgba(255, 210, 124, 0.53);
}

.mb-25 {
  margin-bottom: 25px;
}

.instaBiz .mainBody .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.instaBiz .mainBody .head h5 {
  font-weight: 700;
  margin-bottom: 0;
  font-size: 26px;
}

.instaBiz .mainBody .head .upload {
  color: #e41a6e;
}

.instaBiz .mainBody .head .upload .btn {
  position: relative;
  border: 2px solid #e41a6e;
  color: #e41a6e;
  border-radius: 50px;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 700;
  margin-left: 20px;
}

.instaBiz .mainBody .head .upload .btn input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
}

.instaBiz .mainBody .card h5 span {
  font-size: 16px;
}

.instaBiz .mainBody .card p {
  color: #818181;
  margin-top: 10px;
}

.instaBiz .mainBody .card .btn {
  background-color: #fe0306;
  color: #fff;
  border-radius: 50px;
  padding: 10px 40px;
  margin-top: 20px;
}

.selectBizcardCards .card {
  min-height: 810px;
}

.selectBizcardCards .card img {
  /* width: 138px; */
  margin-top: -65px;
  border-radius: 8px;
}

.bgMain {
  background-color: #ffeaef;
}

.instaBiz .mainBody .col-md-8 {
  padding-right: 30px;
  padding-bottom: 25px;
}

.instaBiz .mainBody .col-md-4 {
  background-color: #e41a6e;
  /* padding-top: 25px;
  min-height: calc(100vh - 150px); */
}

.instaBiz .mainBody h6 {
  color: #fff;
  font-size: 25px;
  margin: 15px 0px;
}

.instaBiz .mainBody ul {
  padding: 0px;
  margin: 0px;
}

.instaBiz .mainBody ul li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 15px 25px;
  background-color: #ffeaef;
  margin-bottom: 15px;
}

.instaBiz .mainBody ul li span {
  display: block;
}

.instaBiz .mainBody ul li .counter {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  padding: 6px;
  height: 35px;
  color: #e41a6e;
  border-radius: 7px;
  margin-top: 5px;
}

.innerCounterBtn {
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffeaef;
  padding: 8px;
  height: 35px;
  color: #e41a6e;
  border-radius: 8px;
  margin-top: 5px;
}

.innerCounterPara {
  margin-bottom: 8px;
  font-size: 18px;
}

.instaBiz .mainBody ul li p {
  margin-bottom: 0;
}

.instaBiz .mainBody ul li h5 {
  color: #e41a6e;
  margin-bottom: 0px;
  font-size: 18px;
}

.instaBiz .mainBody .subTotal {
  margin-top: 50px;
}

.instaBiz .mainBody .subTotal h5 {
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding-right: 25px;
}

.instaBiz .mainBody .subTotal .btn {
  background-color: #fff;
  color: #c0002e;
  padding: 5px 0px;
  width: 100%;
  border-radius: 50px;
  font-weight: 600;
  /* margin-top: 20px; */
}

.cardSelectButtonWrap .btn {
  background-color: #fff;
  color: #c0002e;
  padding: 5px 0px;
  width: 100%;
  border-radius: 50px;
  font-weight: 600;
  /* margin-top: 20px; */
}

.mt-md-60 {
  margin-top: 60px !important;
}

.noBg {
  background-color: transparent !important;
}

.instaBiz .mainBody {
  background-color: #ffeaef;
  min-height: calc(100vh - 150px);
}

.bizcardshippingInfo .form-control {
  height: 45px;
  border: 1px solid #f58ab7;
}

.bizcardshippingInfo .customCard {
  border: 1px solid #f58ab7;
}

/* new bizcard landing page css end here */

/* JFF Code Start */

.supportPageWrapper {
  margin: 0px auto;
  max-width: 30rem;
}

.myselfBtn {
  background-color: #f15a25;
  border: #f15a25;
  color: #ffffff;
  height: 50px;
  font-weight: 600;
  width: 100%;
  margin: 0 auto;
}

.mybusinessBtn {
  background-color: #f2ad22;
  border: #f2ad22;
  color: #ffffff;
  height: 50px;
  font-weight: 600;
  width: 100%;
  margin: 0 auto;
}

.personalsiteBtn {
  background-color: #f15a25;
  border: #f15a25;
  color: #ffffff;
  height: 50px;
  font-weight: 600;
  width: 100%;
  margin: 0 auto;
}

.myordersBtn {
  background-color: #2275f2;
  border: #2275f2;
  color: #ffffff;
  height: 50px;
  font-weight: 600;
  width: 100%;
  margin: 0 auto;
}

.myButton:hover {
  background-color: #05437e;
  border: #05437e;
  color: #ffffff;
}

.btnArrow {
  padding-left: 50px;
}

.welcomeFont {
  font-size: 20px;
  font-weight: 400;
}

.highlightFont {
  font-size: 20px;
  font-weight: 600;
  color: #1c2d64;
  text-transform: uppercase;
}

/* JFF Code End */

.selectCountryDrop {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
}

.customcardPreview img {
  max-width: 400px;
  border-radius: 20px;
  max-height: 400px;
}

.personalOnboardingGrid {
  background-color: #ffc145;
  border-radius: 8px;
}

.businessOnboardingGrid {
  background-color: #53c8bf;
  border-radius: 8px;
}

.firstWrapper {
  background-color: #ffc145;
  position: relative;
  box-shadow: 3px 6px 21px 2px rgb(0 0 0 / 25%);
  height: auto;
  margin-bottom: 30px;
}

.secondWrapper {
  background-color: #53c8bf;
  position: relative;
  box-shadow: 3px 6px 21px 2px rgb(0 0 0 / 25%);
  height: auto;
}

.wrapper {
  padding: 25px;
  border-radius: 8px;
  padding-bottom: 0;
  cursor: pointer;
}

.wrapper h4 {
  color: #ffffff;
}

.wrapper p {
  color: #ffffff;
}

.wrapper img {
  margin-top: -50px;
}

.customBodyBg {
  background-color: #fbfaff !important;
}

.width50 {
  width: 50px;
}

.width100 {
  width: 100px;
}

.topbar ul li .dropdown-menu {
  border-color: #e9e9e9;
  padding: 5px;
}

.topbar ul {
  padding: 0;
  margin: 0;
}

.topbar ul li .dropdown-item {
  font-size: clamp(10px, 0.9vw, 14px);
  padding-bottom: 5px;
  color: #5a5959;
  font-weight: 600;
}

.topbar ul li .dropdown-item i {
  color: #f35a25;
  margin-right: 5px;
}

.topbar img {
  width: 50px;
  height: 50px;
}

.topbar ul li .dropdown-toggle::after {
  display: none;
}

.topbar ul li .dropdown-item:hover {
  background-color: #fff;
}

.upgradePersonalBand p {
  font-size: 18px !important;
  font-weight: 600 !important;
}

.onboardingheaderLogo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: none !important;
  /* margin-bottom: 8px; */
  border: 1px solid #bbbbbb;
  padding: 6px;
}

.btn-upgrade {
  background-color: #ef1c74;
  padding: 5px 15px;
  border-radius: 50px !important;
  font-size: 15px;
  font-weight: 500 !important;
}

.managecardButton {
  padding: 20px 50px;
  box-shadow:
    0 8px 8px 0 rgb(239 28 116 / 27%),
    0 1px 10px 2px rgb(60 64 67 / 15%);
}

.custominnerCard {
  box-shadow: 0px 4px 20px rgb(0 0 0 / 8%);
  border-radius: 8px;
  padding: 20px;
}

.custominnerCardBorder {
  box-shadow: 0px 4px 20px rgb(0 0 0 / 8%);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e9e6e6;
}

.selectedCard {
  cursor: pointer;
  border: 2px solid #e41a6e !important;
  box-shadow: 0px 4px 20px rgb(228 26 110 / 63%) !important;
  border-radius: 8px;
}

.selectedPlan {
  background-color: #e41a6e !important;
  color: #ffffff !important;
}

.bizcardpurchaseHeaderButton {
  border: 2px solid #e41a6e !important;
  color: #e41a6e !important;
  border-radius: 50px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  font-weight: 700 !important;
  margin-left: 20px !important;
}

.bizcardcouponSelection .card {
  border: 1px solid #e41a6e !important;
  padding: 16px !important;
}

.borderGrey {
  border: 1px solid grey !important;
}

.couponcodeView {
  border: 1px solid #e41a6e !important;
  border-radius: 2px !important;
  /* padding: 10px 20px!important; */
}

.couponcodeApply {
  border-radius: 2px !important;
  /* padding: 10px 40px!important; */
}

.personalBgColor {
  background-color: #ffc145;
  height: 180px;
  position: relative;
}

.personalBgColor:hover {
  background-color: #ffc145;
  /* height: 175px; */
  border: 2px solid #f3b02b !important;
  box-shadow: 0px 4px 20px rgb(255 193 69 / 79%) !important;
  border-radius: 8px;
}

.myProfileBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.activepersonalBgColor {
  background-color: #ffc145;
  height: 175px;
  border: 2px solid #f3b02b !important;
  box-shadow: 0px 4px 20px rgb(255 193 69 / 79%) !important;
  border-radius: 8px;
}

.businessBgColor {
  background-color: #53c8bf;
  height: 180px;
  position: relative;
}

.businessBgColor:hover {
  background-color: #53c8bf;
  border: 2px solid #1bafa3 !important;
  box-shadow: 0px 4px 20px rgb(83 200 191 / 83%) !important;
  border-radius: 8px;
}

.activebusinessBgColor {
  background-color: #53c8bf;
  height: 175px;
  border: 2px solid #1bafa3 !important;
  box-shadow: 0px 4px 20px rgb(83 200 191 / 83%) !important;
  border-radius: 8px;
}

.shadowCard {
  box-shadow: 0px 4px 20px 10px rgb(0 0 0 / 5%) !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
}

.cardShadow {
  box-shadow: 0px 4px 20px 10px rgb(0 0 0 / 5%) !important;
  border: 0 !important;
}

.cardSelection {
  border-radius: 15px !important;
  border: 2px solid #f0612f !important;
  box-shadow: 0px 4px 20px rgb(243 126 84) !important;
}

.bizcardsocialWhatsapp {
  color: #28a745;
}

.bizcardsocialFacebook {
  color: #2c81e0;
}

.bizcardsocialInstagram {
  color: #a60573;
}

.bizcardsocialTwitter {
  color: #20e4fb;
}

.bizcardsocialLinkedin {
  color: #2c81e0;
}

.bizcardsocialPinterest {
  color: #e60023;
}

.customheadingBox {
  font-size: 20px;
  margin: 0px;
  padding: 12px;
  color: var(--site-primary-color);
  background-color: var(--site-secondary-color);
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
}

.card-body.position-relative .expoBanner.position-absolute img.img-fluid {
  width: 100px;
  margin-top: -15px;
  margin-right: 0px;
  border: 0px;
}

.expoBanner img {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

.vh-100 {
  height: initial !important;
}

@media screen and (max-width: 991px) {
  .logoRow {
    justify-content: center !important;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .heroImage {
    display: none;
    width: 300px;
    height: 220px;
  }

  .border-line {
    border-right: none;
  }

  .card2 {
    border-top: 1px solid #eeeeee !important;
    margin: 0px 15px !important;
    padding-top: 5px !important;
  }

  .card1 {
    padding-bottom: 5px !important;
  }

  .heroImageRow {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
  }
}

.labelCount {
  font-size: 20px;
  font-weight: 500;
}

.loginBTN {
  color: #009688;
  background-color: rgba(153, 153, 153, 0.2);
  border-color: rgba(153, 153, 153, 0.2);
}

.title {
  font-size: x-large;
  font-weight: 600;
  color: #31317a;
}

.form-group {
  text-align: left;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

#grad1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  min-height: 100vh;
  width: 100%;
  background-color: #f8f9ff !important;
  /* background: radial-gradient(circle at center,
      #ffffff 0%,
      #eff1fc 45%,
      #eff1fc 100%); */
  /* background: url(https://dkzxkcjlbnjui.cloudfront.net/uploads/media/images/register-background.png) no-repeat center center / cover; */
}

.calculator .form-control {
  background-color: rgba(63, 81, 181, 0.1);
  border: 0;
  border-left: 1px solid #fff;
  text-align: right;
  color: rgba(63, 81, 181, 0.9);
  padding: 8px 10px;
  height: 100%;
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*-=======Mobilo Branded Card start=======*/

ol.listMuted {
  padding: 10px 0 0;
  list-style: none;
  margin-bottom: 0.5rem;
}

.listMuted li {
  letter-spacing: 0;
  color: #818181;
  margin: 0 0 5px;
  line-height: 18px;
  position: relative;
  padding-left: 10px;
  font-size: clamp(10px, 0.9vw, 14px);
}

.listMuted li:after {
  background: #818181;
  position: absolute;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 8px;
  left: 0;
  top: 6px;
}

.instaBiz .mainBody.selecteTypeCard .col-md-4.bgTransparent {
  background-color: transparent;
}

.bgTransparent {
  background-color: transparent !important;
}

.instaBiz .mainBody .card .product-btn .btn {
  padding: 10px 15px;
  text-transform: capitalize;
  border-radius: 0.4rem;
  margin-top: 5px !important;
}

.instaBiz .mainBody .card .cardMaterial .btn.selectedPlan {
  border-color: #e41a6e;
}

.instaBiz .mainBody .card .cardMaterial .btn {
  padding: 6px 15px;
  margin-top: 0;
  font-size: clamp(10px, 0.9vw, 14px);
  border-radius: 8px;
  background: transparent;
  border: 2px solid #ddd;
  color: #000;
}

.purchaseSortFilter h3 {
  font-size: 26px;
  color: #e41a6e;
  font-weight: 600;
}

.instaBiz .mainBody .purchaseSortFilter .col-md-4 {
  background: transparent;
}

.purchaseSortFilter .form-check-input:checked {
  background-color: #e41a6e !important;
  border-color: #e41a6e !important;
}

.purchaseSortFilter {
  border-bottom: 2px solid #e41a6e;
}

#mkLightboxContainer {
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100vh;
  min-width: 100vw;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mkLightboxContainer > * {
  z-index: 99;
}

#overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.85);
  z-index: 0;
}

#mkLightboxContainer #mklbInner {
  position: relative;
  height: 100vh;
  transition: all 0.4s ease-in-out;
  margin-left: 0;
}

section.imageContainer {
  margin: 0;
  padding: 1em;
  box-sizing: border-box;
  border: none;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
}

#mkLightboxContainer img,
#mkLightboxContainer video {
  background: #fff;
  box-shadow: 0 0 30px #222;
  max-height: 85vh;
  min-width: auto;
  max-width: 85vw;
  width: auto;
  height: auto;
  border-radius: 8px;
}

#mkLightboxContainer #yt-video {
  width: 75vw;
  height: 42.1875vw;
  /* 75*9/16 */
}

.mklbItem:hover {
  cursor: pointer;
  font-style: italic;
}

#closeIconContainer {
  width: 25px;
  height: 25px;
  position: fixed;
  top: 15px;
  right: 15px;
  transition: transform 0.2s linear;
}

#closeIconContainer:hover {
  cursor: pointer;
  transform: rotate(90deg);
}

#closeIconContainer svg,
#prev svg,
#next svg,
#stopGallery svg,
#playGallery svg {
  fill: white;
}

#prevContainer,
#nextContainer {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  padding: 10px 5px 10px 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in;
}

#nextContainer {
  left: auto;
  right: 0;
}

#prevContainer:hover,
#nextContainer:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.25);
}

#prev,
#next {
  width: 35px;
  height: 35px;
}

.grid {
  display: grid;
  align-content: flex-start;
  grid-gap: 1em;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid figure {
  width: 100%;
  margin: 0;
}

.grid img {
  width: 100%;
}

#controlContainer {
  position: absolute;
  top: 1em;
  left: 0.5em;
  display: flex;
}

#controlContainer > div {
  width: 2em;
}

#controlContainer > div:hover {
  cursor: pointer;
}

#controlContainer #stopGallery,
#controlContainer.stop #playGallery {
  opacity: 0.5;
}

#controlContainer.stop #stopGallery,
#controlContainer #playGallery {
  opacity: 1;
}

/* Video LightBox CSS Ends Here*/

.mat-dialog-container {
  background: #fff !important;
  color: #000 !important;
}

.page-heading {
  font-size: 20px;
  margin: 0px;
  padding: 12px;
  color: var(--site-primary-color);
  background-color: var(--site-secondary-color);
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow: hidden;
  z-index: 10;
  background-color: #ffffff;
}

.summarysticky {
  position: sticky;
  top: 68px !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

/*ad-creator css starts here */

.previewPopup .nav-link {
  background: #f3eeff !important;
  border-radius: 0;
  color: var(--site-primary-color) !important;
  text-align: left;
  margin-bottom: 15px;
  width: 100%;
  word-break: break-word;
  font-size: 12px;
  font-weight: 800;
  padding: 10px 5px;
  text-align: center !important;
  line-height: 16px;
  border-radius: 8px;
}

.previewPopup .nav-link i {
  display: block;
  margin-bottom: 10px;
  font-size: 22px;
}

.previewPopup .nav {
  height: 100%;
  background: #ffffff;
  padding: 10px 10px;
  border-right: 1px solid #dbdbdb;
}

.addFrame {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-left: 0;
  height: 100vh;
  cursor: pointer;
}

.scrollBarModal {
  overflow-y: scroll;
  height: 400px;
}

.row.bodyContent .blackColor.mb-0 {
  font-size: 16px;
}

.customeinnerCard .order-type {
  background-color: #ebebeb;
  border-radius: 8px;
  font-size: clamp(10px, 0.9vw, 14px);
}

.customeinnerCard .left-btn {
  background: linear-gradient(to left, #ef1c74 50%, #ef1c74 50%) right;
  background-size: 250% !important;
  transition: 0.5s ease-out;
  border-radius: 8px;
  color: #fff !important;
}

label.form-label.ourSystem {
  font-size: 16px;
}

.smallModal .modal-body.supportModal {
  height: 400px;
  overflow: scroll;
  overflow-x: hidden;
  padding: 0 10px;
}

.smallModal .modal-content {
  height: 550px;
  overflow: hidden;
}

.container-fluid.p-lg-4.customBackgroundColor
  .col-md-12
  .form-check
  label.form-check-label {
  margin-top: 0px !important;
}

.enterIntro.cardBoxShadow .form-check-input.invoivcheck {
  margin-left: 10px;
  margin-bottom: 2px;
}

.accordion-body .enterIntro.cardBoxShadow label.form-check-label.font600.ms-2 {
  white-space: initial;
  overflow: initial;
  width: 90px;
  margin-bottom: -3px !important;
}

.selfhelp {
  background: #929fea;
  display: block;
  padding: 4px 5px;
  color: #fff;
  font-size: clamp(10px, 0.9vw, 14px);
  padding-left: 8px !important;
  font-weight: 600;
}

i.fa-solid.fa-envelope.me-2.email {
  color: #eba017;
  font-size: 17px;
}

i.fa-brands.fa-whatsapp.me-2.whatsapp {
  color: #25d366;
  font-size: 20px;
}

i.fa-duotone.fa-comments.me-2.chat {
  color: #c2185b;
  font-size: 17px;
}

i.fa-brands.fa-skype.me-2.skype {
  color: #03acf8;
  font-size: 20px;
}

.ourSystem {
  font-weight: 600;
}

.user-list {
  max-height: 500px;
  overflow: auto;
}

.user-details {
  padding: 10px 15px;
  background: #eeeeee;
  color: #242424;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.view-user-container {
  overflow-y: auto;
  display: flex;
}

.serviceList.p-0 .col-md-10.col-12 h4 {
  background: transparent;
  padding: 0px;
  margin-bottom: 15px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-left: 12px;
}

.serviceList.p-0 .col-md-10.col-12 h4 span.float-end button.btn.btn-primary {
  padding: 12px 30px !important;
}

.view-user {
  width: 100px;
  display: flex;
  flex-direction: column;
  background-color: #ebeeff;
  align-items: center;
  margin-right: 5px;
  padding: 5px;
  font-size: 12px;
  border-radius: 8px;
}

.view-user img {
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

.ourSystem {
  background-color: #e91e63;
  padding: 12px;
  color: #ffffff;
  border-radius: 8px;
}

.bizcardPromotionText img {
  width: 36px !important;
  margin-right: 10px;
}

/* purchase flow css start here */
body .borderBottom {
  border-bottom: 1px solid #d4d4d4;
}

.navbarCss {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
}

.navbarCss .navbar-nav .nav-link i.fa-solid.fa-bars-staggered {
  display: none;
}

.primaryBg,
.primaryBg:hover {
  background-color: #e53825 !important;
  color: #fff !important;
}

.orangeText {
  color: #f15a25;
}

.teritaryColor1,
.teritaryColor1:hover {
  color: #3e31cf;
}

.teritaryBg,
.teritaryBg:hover {
  background-color: #3e31cf !important;
}

.borderPrimary {
  border: 1px solid #3e31cf !important;
}

.teritaryColor {
  color: #170b9c;
}

.caveatFont {
  font-family: "Caveat", cursive;
}

.top-25 {
  top: -25px;
}

.carousel-indicators {
  margin-bottom: 6rem !important;
}

.purchaseBigdot .carousel-indicators [data-bs-target] {
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  border: 1px solid #3e31cf !important;
}

.purchaseBigdot .carousel-indicators .active {
  background-color: #3e31cf !important;
}

.purchaseBigdot {
  background: #f9f6ff;
  padding: 0px 0px 80px;
  margin-top: 140px;
  position: relative;
  border-radius: 100px 100px 0px 0px;
}

.purchaseBigdot:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100px;
  background: #f9f6ff;
  left: 0;
  border-radius: 100% 100% 0px 0px;
  top: -30px;
}

.bigdotBusiness strong.orangeText.font700 {
  font-style: italic;
  font-size: 200px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 900 !important;
}

.exploreBtn {
  width: 45%;
}

.bigdotBusiness {
  position: sticky;
  text-align: center;
  width: 100%;
  margin-top: -40px;
}

.orangeBackground {
  background-image: url(https://dkzxkcjlbnjui.cloudfront.net/uploads/media/backgrounds/orange-background.svg);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px;
  margin-top: 0px !important;
}

.bizCardFeatures .card {
  padding: 30px 0px;
  text-align: center;
  border: none;
  margin-bottom: 25px;
  box-shadow: 1px 10px 15px 5px var(--site-tertiary-color) !important;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.5s;
}

.bizCardFeatures .card:hover {
  box-shadow: 1px 10px 15px 5px #0d0560;
  transform: translateY(-10px);
}

.bizCardFeatures .card i {
  margin-bottom: 15px;
  font-size: 40px;
  color: #170b9c;
}

.bottomBorder {
  height: 4px;
  background-color: #d9d9d9;
}

.borderSecondary {
  border: 1px solid #f9882e;
}

.secondaryBg1 {
  background-color: #f9882e;
}

.purchaseBigdot .col-lg-4.col-md-6.bg-white {
  border-right: 1px solid #3e31cf;
  border-bottom: 1px solid #3e31cf;
}

.bigdotBusiness.BusinessImage {
  margin-top: -200px;
}

.professionalWebsite {
  padding: 20px 150px;
  display: inline-block;
}

.professionalWebsite .startNowBtn {
  padding: 10px 70px;
  display: inline-block;
  color: #fff !important;
  border-radius: 8px;
}

.userImg {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
}

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

.bigdotBusiness.BusinessImage img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.bigdotBusiness.BusinessImage {
  margin-top: -140px;
  padding: 0px 150px;
}

.hearFromOur:before {
  position: absolute;
  content: "";
  height: 4px;
  width: 50%;
  background: #3e31cf;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
}

.hearFromOur {
  border-bottom: 4px solid #d9d9d9;
  display: inline-block;
  position: relative;
}

.btnGroup button.btn {
  background: #e53825;
  border: initial;
  padding: 6px 50px;
  margin-right: 10px;
  border-radius: 100px;
  color: #fff;
  font-weight: 600;
}

.btnGroup .btn.inactive {
  background: #f1f1f1;
  color: #e53825;
}

.starter {
  background: #43c2af;
  padding: 50px 15px;
  text-align: center;
  border-radius: 8px;
  margin-top: 0px;
  margin-bottom: 10px;
  height: 100%;
}

.professionalWebsite h3 {
  font-size: 90px;
  font-family: "Caveat", cursive;
}

.starter h3.text-white {
  font-size: 17px;
}

.bigdotEnquiryForm .col-md-3.text-center {
  margin-bottom: 20px;
}

.starter p.text-white span {
  font-size: 50px;
  margin: 0px 5px;
  font-weight: 700;
}

.bigdotBusiness h3.font60 {
  font-family: "Caveat", cursive;
  font-size: 80px;
  font-weight: 600;
  font-style: italic;
}

.starter p.text-white {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 0px;
  margin-top: 15px;
}

.starter.professional {
  background: #ee5850;
}

.starter.enterprice {
  background: #61bcd8;
}

.bigdotEnquiryForm .starter {
  padding: 10px 10px 0px;
}

.bigdotEnquiryForm .starter p.text-white span {
  font-size: 34px;
}

.bigdotEnquiryForm .starter h3.text-white {
  font-size: 15px;
}

.bigdotEnquiryForm .form-control {
  display: block;
  width: 100%;
  border: 2px solid #dee2e6;
  height: auto;
  padding: 10px !important;
  font-size: 14px !important;
  line-height: 1.4;
  color: #3e31cf;
}

.bigdotEnquiryForm .form-control:focus {
  color: #3e31cf;
  background-color: #fff;
  border-color: #3e31cf;
  box-shadow: 0 3px 8px 0 rgb(0 0 0 / 10%);
}

.selectBizdots .selectCart {
  /* border: 1px solid #dee2e6; */
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0px 1px 5px #1c2d64;
  margin-bottom: 20px;
}

.selectBizdots .selectCart img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.selectBizdots .selectCart h1 {
  font-size: clamp(16px, 1.6vw, 20px);
  margin: 10px 0px;
  font-weight: 500;
}

.selectBizdots .selectCart h4 {
  font-weight: 500;
  font-size: 15px;
}

.selectBizdots .selectCart h2 {
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 500;
  color: #1c2d64;
}

.selectBizdots .selectCart p {
  font-size: clamp(10px, 0.9vw, 14px);
}

.btnCardSubmit.my-3 a.d-block {
  width: 100%;
  background: #3e31cf;
  padding: 12px;
  font-weight: 500;
  font-size: 18px;
  color: #fff !important;
  text-align: center;
  border-radius: 8px;
}

.selectBizdots .selectCart a.selectedBtn {
  background: #1c2d64;
  display: inline-block;
  width: 100%;
  padding: 8px;
  text-align: center;
  border-radius: 8px;
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(12px, 1vw, 15px);
}

.selectBizdots .classicBtnGroup button.btn {
  width: 100%;
  margin: 10px 10px 10px 0px;
  border-radius: 100px;
  border: 1px solid #ef1414;
  color: #000;
  font-size: clamp(12px, 1vw, 15px);
  padding: 5px;
}

.selectBizdots .classicBtnGroup button:last-child {
  margin-right: 0px !important;
}

.selectBizdots .classicBtnGroup button.btn.active {
  background-color: #ef1414;
  color: #fff;
}

.selectBizdots .selectCart.BrandedCard {
  min-height: 540px;
  position: relative;
}

.cardOption .form-check-input:checked {
  background-color: #1c2d64;
  border-color: #1c2d64;
}

.cardOption .form-check-input {
  border: 1px solid #1c2d64;
  border-color: #1c2d64;
  height: 20px;
  width: 20px;
}

.form-check.cardOption {
  margin-bottom: 10px;
}

.selectBizdots .selectCart.BrandedCard a.selectedBtn {
  width: 95%;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.bigdotYourCard {
  padding: 10px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
}

.bigdotEnquiryForm .form-group label {
  display: block;
  margin-bottom: 0px !important;
  font-weight: 500;
  font-size: clamp(10px, 0.9vw, 14px);
}

.footerBigdotAi.bg-white.py-2 {
  border-top: 2px solid #dee2e6;
}

.btnCardSubmit.my-3 a.d-block {
  width: 100%;
  background: #3e31cf;
  padding: 8px;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 500;
  color: #fff !important;
  text-align: center;
  border-radius: 8px;
}

.getOffer {
  background: #ffa942;
  padding: 15px 10px;
  color: #fff;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.getOffer i {
  font-size: 30px;
  margin-right: 15px;
}

.bigdotpaymentoption .paymentOption {
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 2px solid #dee2e6;
}

.bigdotpaymentoption .form-check-label img {
  width: 100px !important;
}

.bigdotpaymentoption .form-check-input:checked {
  background-color: #1c2d64;
  border-color: #1c2d64;
}

/* purchase flow css end here */

/* Join For Free Start Here */

#heading {
  text-transform: uppercase;
  color: #673ab7;
  font-weight: normal;
  font-weight: 700;
  font-size: 24px;
}

#msform {
  text-align: center;
  position: relative;
  margin-top: 10px;
}

#progressbar {
  overflow: hidden;
  color: lightgrey;
  padding: 0;
  margin-bottom: 0px;
}

#progressbar li p {
  margin-bottom: 0px !important;
}

#progressbar .active {
  color: #252525;
}

#progressbar li {
  list-style-type: none;
  font-size: 15px;
  width: 33.3% !important;
  float: left;
  position: relative;
  font-weight: 400;
}

#progressbar #account:before {
  font-family: FontAwesome;
  content: "\f0f2";
}

#progressbar #personal:before {
  font-family: FontAwesome;
  content: "\f05a";
}

#progressbar #location:before {
  font-family: FontAwesome;
  content: "\f124";
}

#progressbar #address:before {
  font-family: FontAwesome;
  content: "\f041";
}

#progressbar #confirm:before {
  font-family: FontAwesome;
  content: "\f00c";
}

#progressbar li:before {
  width: 50px;
  height: 50px;
  line-height: 45px;
  display: block;
  font-size: 20px;
  color: #ffffff;
  background: lightgray;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  padding: 2px;
}

#progressbar li:after {
  content: "";
  width: 100%;
  height: 2px;
  background: lightgray;
  position: absolute;
  left: 0;
  top: 25px;
  z-index: -1;
}

.mat-option-text {
  font-size: clamp(10px, 0.9vw, 14px);
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #f15a25;
}

#msform fieldset:not(:first-of-type) {
  display: none;
}

.action-button {
  background: var(--site-cta-color) !important;
  color: #fff !important;
  border-radius: 10px !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border: none !important;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease !important;
  letter-spacing: 0.01em;
}

.action-button:hover {
  background-color: var(--site-primary-color) !important;
}

.action-button-previous {
  background: #ffffff !important;
  color: #334155 !important;
  border-radius: 10px !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border: 1.5px solid #cddaff !important;
  transition:
    border-color 0.15s ease,
    color 0.15s ease !important;
}

.action-button-previous:hover,
.action-button-previous:focus {
  background-color: #334155 !important;
  color: #fff !important;
}

/* #msform .action-button {
  background: var(--site-cta-color) !important;
  color: #fff !important;
  border-radius: 10px !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border: none !important;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease !important;
  letter-spacing: 0.01em;
}

#msform .action-button:hover {
  background-color: var(--site-primary-color) !important;
} */

agm-map {
  height: 291px;
  box-shadow: 0px 0px 10px 0px #d9d6d663;
}

.form-card {
  text-align: left;
}

.fs-title {
  font-size: 18px;
  color: #673ab7;
  margin-bottom: 15px;
  font-weight: 700;
  text-align: left;
}

.purple-text {
  color: #673ab7;
  font-weight: normal;
}

.steps {
  font-size: 18px;
  color: gray;
  margin-bottom: 10px;
  font-weight: normal;
  text-align: right;
}

.fieldlabels {
  color: gray;
  text-align: left;
}

.progress {
  height: 20px !important;
  border-radius: 0rem !important;
}

.progress-bar {
  background-color: #673ab7 !important;
}

.fit-image {
  width: 50px;
  object-fit: cover;
}

.loginButton {
  color: #ffffff !important;
  border-radius: 8px;
}

.footerLogo img {
  width: 120px;
}

.cRed {
  color: red;
}

.modal-header {
  border: none;
}

.cBizcategory {
  cursor: pointer;
  padding-bottom: 20px;
}

.cBizcategory:hover {
  color: #1c2d64;
}

.cBizcategoryicon {
  border-radius: 8px;
  margin-right: 16px;
  padding: 10px;
  background-color: #f4f0ff;
}

.cBizcategoryname p {
  font-size: 16px;
  padding-top: 12px;
  font-weight: 700;
}

.cBizcategoryname p:hover {
  font-weight: 600 !important;
}

.cBizsubcategory {
  cursor: pointer;
}

.cBizsubcategory:hover {
  color: #1c2d64;
  font-weight: 700;
}

.btn-outline-primary:hover {
  background-color: #1c2d64;
  border: #1c2d64;
}

.cInputheading {
  margin-bottom: 10px;
  font-size: clamp(11px, 1.1vw, 13px) !important;
  color: #212529 !important;
}

.category-select {
  width: 500px;
  padding-top: 100px;
}

.cCtabtn {
  background-color: #1c2d64;
  border: #1c2d64;
  height: 50px;
}

.cSectionicon img {
  width: 100px;
  padding-bottom: 50px;
}

.custom-padding {
  padding-left: 5% !important;
  padding-right: 5% !important;
  padding-top: 1% !important;
}

.cRowdata p {
  margin-bottom: 0px;
}

.text-area {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  resize: vertical;
  height: 50px !important;
}

.footerNote {
  color: #afafaf;
  font-size: 12px;
}

.successMessage {
  line-height: 30px;
}

.custom-pagebg {
  background: url(https://dkzxkcjlbnjui.cloudfront.net/uploads/media/images/register-background.png)
    no-repeat center center / cover;
  height: 100% !important;
}

.custom-padding {
  padding-left: 5% !important;
  padding-right: 5% !important;
  padding-top: 1% !important;
}

.custom-color {
  color: #1c2d64;
}

.logo-text {
  font-weight: 700;
  font-size: 19.2348px;
  line-height: 23px;
}

.dropdown-toggle.btn-default {
  color: #1c2d64;
  font-weight: 700;
  line-height: 27px;
  background-color: #fbfaff;
}

.bootstrap-select.show > .dropdown-menu > .dropdown-menu {
  display: block;
}

.bootstrap-select > .dropdown-menu > .dropdown-menu li.hidden {
  display: none;
}

.language-select select {
  color: #1c2d64;
  border: none;
  outline: none;
  background-color: #fbfaff;
}

.manageDashIcons {
  width: 52px;
}

/* Join For Free End Here */
.invoiceValue.float-end.text-end {
  text-align: left !important;
}

.dashboardContainer .enterIntro .form-check label {
  font-size: clamp(12px, 0.9vw, 14px);
  /* font-weight: 500 !important; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* margin-bottom: 3px !important;
  margin-left: 0px !important;
  margin-top: 0px !important;
  display: block; */
}

.invoiceValue.float-end.text-end h6 {
  font-size: clamp(14px, 0.9vw, 16px);
  font-weight: 500 !important;
  color: #000;
}

/* .input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0px;
} */
.input-group-text {
  border-radius: 10px;
  border-right: 0px !important;
  background-color: transparent;
}

.dashboardContainer .enterIntro .form-check .form-check-input {
  float: left;
}

.ui-datepicker .ui-icon {
  left: 2px !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  /* display: inline; */
  font-size: 12px;
  position: relative;
  /* top: 13px; */
  margin-left: 0px;
}

.ui-datepicker .ui-datepicker-next {
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.ui-datepicker .ui-datepicker-prev {
  left: 10px;
  top: 3px;
}

/* social studio css start here */

.socialStudio {
  background-color: #fff;
  padding: 30px 0px;
}

.addNewChannel button.btn {
  background: #f15a25;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.socialStudioLogo img {
  width: 160px !important;
}

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

.socialMediaTabs .nav.nav-tabs {
  border-bottom: 5px solid #e8e8e8;
}

.socialMediaTabs .nav-tabs .nav-link {
  margin: -4px 0px;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border: 0;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #361083;
  background-color: initial;
  border-bottom: 5px solid #361083 !important;
  border: none;
}

.mediaAllChannels.bg-white {
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #b4b4b4;
}

.mediaAllChannels h3 {
  color: #000;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.mediaAllChannels ul {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #b4b4b4;
  padding-bottom: 8px;
  margin-bottom: 15px;
  padding-left: 0px;
}

.mediaAllChannels ul li {
  list-style: none;
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 500;
  color: #5f5f5f;
}

.socialMediaBanner {
  background: #fff;
  padding: 20px 20px;
  border-radius: 8px;
  border: 2px solid #b4b4b4;
}

.socialMediaBanner .bannerImage {
  width: 350px;
  height: 350px;
  object-fit: cover;
}

.socialMediaBanner h2 {
  font-size: 18px;
}

.acoountSettings h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.acoountSettings {
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #b4b4b4;
}

.acoountSettings img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 100%;
}

.acoountSettings.bg-white span h5 {
  font-size: 16px;
  font-weight: 600;
}

.acoountSettings.bg-white h4 {
  font-size: 16px;
  margin: 15px 0px 10px;
  color: #26a309;
}

.socialLife.bg-white {
  min-height: 425px;
  border: 2px solid #b4b4b4;
  border-radius: 8px;
  padding: 20px 0px;
}

.socialLife.bg-white h3 {
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #b4b4b4;
  padding: 0px 15px 10px;
}

.socialLife.bg-white h2 {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  padding-top: 70px;
}

.mediaAllChannels .socialMediaImage {
  width: 180px;
}

.mediaAllChannels ul li strong {
  color: #000;
  font-size: clamp(10px, 0.9vw, 14px);
  margin-left: 5px;
}

.addMoreBtn button.btn {
  font-size: 16px;
  font-weight: 600;
  background: #f15a25;
  color: #fff;
  border-radius: 100px;
  padding: 5px 20px;
  margin-right: 10px;
}

.addMoreBtn button.btn img {
  margin-top: -3px;
}

.userDetail img.user {
  width: 50px;
  display: block;
  margin-right: 20px;
  border: 2px solid #efece8;
  padding: 6px;
  border-radius: 100px;
}

.socialLife.bg-white ul {
  margin: 0px;
  padding: 0px;
}

.socialLife.bg-white ul li {
  list-style: none;
  padding: 10px 20px;
}

.socialLife .userDetail {
  position: relative;
}

.socialLife .instagram {
  position: absolute;
  bottom: 15px !important;
  right: 20px !important;
  width: 15px;
}

.socialLife .commented h4 {
  font-size: 17px;
  margin-bottom: 2px;
}

.socialLife .commented p {
  font-size: 16px;
  color: #808080c4;
  font-weight: 500;
  margin: 0px;
}

.socialLife.bg-white ul li:hover {
  background-color: #f2f2f2;
  transition: 0.3s;
}

.socialLife .recentsPosts {
  width: 500px;
}

.socialMediaBanner .recentsPosts h5 {
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 4px;
}

.responsiveTable .dropdown {
  position: initial;
}

.socialMediaBanner .recentsPosts {
  width: 500px;
}

.socialMediaBanner .recentsPosts h3 {
  font-size: 22px;
  font-weight: 600;
}

.socialMediaBanner .recentsPosts .bannerPost {
  width: 100%;
}

.socialMediaBanner .recentsPosts h5 a {
  color: #463bc8;
}

.socialLife.commentedBox {
  min-height: 450px;
}

.mediaAllChannels .socialMediaIcons {
  display: inline-flex;
}

.mediaAllChannels .socialMediaIcons li a img.img-fluid {
  width: 28px;
}

.mediaAllChannels .publishedPosts h2 {
  font-size: clamp(10px, 0.9vw, 14px);
  color: #595959;
}

.mediaAllChannels .publishedPosts p {
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 500;
  color: #1a1a1a;
}

.mediaAllChannels .publishedPosts .bigdotImg1 {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  object-fit: cover;
}

.socialLife.bg-white ul li a i {
  color: #f15a25;
  margin-right: 10px;
  font-weight: 500;
}

.socialLife.bg-white ul li a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

.publishingOptions .form-check-input:checked {
  background-color: #1c2d64;
  border-color: #1c2d64;
}

.publishingOptions label.form-check-label:hover {
  color: #1c2d64;
}

.publishingOptions label.form-check-label {
  font-size: 16px;
  font-weight: 500;
}

.publishingOptions h3 {
  font-size: 18px;
  font-weight: 600;
}

.bigdotEmoji li a {
  color: #000;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
}

.bigdotEmoji li {
  display: inline-block;
  padding: 0px 5px;
}

.saveDraftBtn {
  text-align: right;
}

.saveDraftBtn button.btn {
  border: 1px solid #1c2d64;
  padding: 5px 25px;
  font-size: 16px;
  font-weight: 600;
  color: #1c2d64;
}

.saveDraftBtn span i {
  width: 32px;
  height: 32px;
  color: #f15a25;
  line-height: 30px;
  border-radius: 180px;
  text-align: center;
  display: inline-block;
  margin-right: 10px;
  background-color: #ffcbb9;
}

.bigDotEnquiry textarea.form-control {
  height: 250px !important;
}

.bigDotEnquiry .mediaAllChannels .socialMediaIcons li {
  margin-right: 30px;
}

.publishingOptions {
  border-left: 1px solid #ced4da;
  height: 100%;
  padding-left: 10px;
}

.btn-outline-warning:hover {
  color: #000 !important;
  background-color: #ffc107;
  border-color: #ffc107;
}

/* social studio css start end */

.btn-danger {
  border-radius: 10px !important;
  padding: 10px 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.btn-success {
  border-radius: 10px !important;
  padding: 10px 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.btn-primary {
  border-radius: 10px !important;
  padding: 12px 20px !important;
  font-size: clamp(13px, 1.1vw, 16px);
  color: #ffffff !important;
  background-color: var(--site-primary-color) !important;
  border-color: var(--site-primary-color) !important;
  font-weight: 400 !important;
}

.enquiryTableWrapper img.card-img-top.img-fluid {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.pageSetting ul#myTab {
  padding: 0px;
}

.personalOnoarding .btn-outline-secondary {
  border-color: #cddaff;
  border-radius: 8px 8px 0px 10px;
  border-right: 0px;
}

.personalOnoarding input#basic-url {
  border-radius: 0px 8px 10px 0px !important;
  border-left: 0px !important;
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
  border-radius: 10px !important;
  padding: 10px 15px !important;
  font-weight: 500 !important;
  font-size: clamp(12px, 1.2vw, 16px);
}

.mat-tooltip-trigger i {
  font-size: clamp(12px, 1.2vw, 16px);
}

i.cdk-drag-handle {
  font-size: clamp(12px, 1.2vw, 16px);
}

.menuSettingActive.active label.muted19 {
  color: #fff;
}

.menuSettingActive input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  background-color: #fff;
  border-color: #1c2d64;
}

.menuSettingActive input[type="checkbox"]:checked {
  background-color: #1c2d64;
  border-color: #1c2d64;
}

.menuSettingActive input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

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

.publishListingButton {
  background-color: #f15a25;
  color: #ffffff !important;
  width: 170px;
  border-radius: 10px;
  --tw-shadow:
    0px -1px 0px 0px rgba(47, 43, 67, 0.1) inset,
    0px 1px 3px 0px rgba(47, 43, 67, 0.1);
  --tw-shadow-colored:
    inset 0px -1px 0px 0px var(--tw-shadow-color),
    0px 1px 3px 0px var(--tw-shadow-color);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
  border-color: #0000001a;
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}

.publishListingButton:hover {
  background-color: #d55123 !important;
}

.customDesignButton {
  font-size: clamp(12px, 1.1vw, 16px);
  border-radius: 100px;
  --tw-shadow:
    0px -1px 0px 0px rgba(47, 43, 67, 0.1) inset,
    0px 1px 3px 0px rgba(47, 43, 67, 0.1);
  --tw-shadow-colored:
    inset 0px -1px 0px 0px var(--tw-shadow-color),
    0px 1px 3px 0px var(--tw-shadow-color);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
  border-color: #0000001a;
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}

.customButton {
  border-radius: 10px !important;
  padding: 12px 10px !important;
  font-size: clamp(10px, 1.1vw, 14px) !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.customButton:hover {
  color: #ffffff !important;
  background-color: #140024 !important;
}

.customOutlineButton {
  border-radius: 8px;
  padding: 5px 10px !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  font-weight: 500 !important;
  border: 2px solid var(--site-primary-color);
}

.customOutlineButton:hover {
  color: var(--Prmary_Color) !important;
  background: #e9ecee !important;
}

.plainButton {
  padding: 12px 15px !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.customPlainButton {
  border-radius: 10px !important;
  padding: 10px 10px !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  font-weight: 500 !important;
  background: #e9ecee;
}

.customOrderCardButton {
  border-radius: 8px;
  padding: 6px 10px !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.agm-map-container-inner {
  width: inherit;
  height: inherit;
  border-radius: 8px;
}

.card {
  border-radius: 10px !important;
}

.memberAddButton .btn {
  border-radius: 8px;
}

.modal-content {
  border-radius: 15px !important;
}

input[type="radio"] {
  accent-color: var(--site-primary-color);
}

b,
strong {
  font-weight: 600;
}

.btn-large {
  border-radius: 8px;
}

.responsiveTable {
  border-bottom: 2px dashed #e8e8e8;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.customBackgroundColor .btn-group.float-end .btn {
  padding: 5px 10px !important;
  border-radius: 0px !important;
  height: 38px;
}

.customBackgroundColor .btn-group.float-end {
  border-radius: 0.5rem !important;
  overflow: hidden;
}

.border-bottom-dashed {
  border-bottom: 1px dashed #31317a;
}

.form-check-input {
  width: 1rem;
  height: 1rem;
  margin-right: 8px;
}

.form-check-input:checked {
  background-color: #f26132;
  border-color: #f26132;
}

.threeLink a {
  color: #007bff;
  font-weight: 600;
  text-decoration: none;
  margin-right: 15px;
}

.threeLink a:hover {
  text-decoration: underline;
}

.rightList div {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  width: 100%;
}

.rightList i {
  margin-right: 20px;
  font-size: 60px;
  color: #17a2b8;
}

.text-container {
  display: flex;
  flex-direction: column;
}

.text-container a {
  color: #1c2d64;
  font-weight: 600;
  text-decoration: none;
}

.text-container a:hover {
  text-decoration: underline;
}

.threeLink a {
  text-decoration: underline;
  color: #1c2d64;
}

.icon-text {
  display: flex;
  align-items: center;
}

.icon-text i {
  margin-right: 10px;
}

.card-link {
  color: #090808;
  transition: all 300ms;
  text-decoration: none;
}

.card-link:hover {
  color: #e53825;
}

.leftCard {
  width: 95%;
  /* height: 435px; */
}

.floatCard {
  width: 95%;
  float: right;
}

.leftRightFont {
  font-size: 16px;
}

.sameLinks {
  font-size: 16px;
}

.sameLinks a {
  color: #1c2d64;
  margin-right: 7px;
  text-decoration: underline !important;
}

.item-list {
  margin: 1rem 0;
  padding: 0;
}

.item-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  position: relative;
  list-style-position: inside;
}

.sameLinks {
  display: flex;
  gap: 0rem;
}

.sameLinks::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: #c3c3c3;
}

.goToProfile {
  margin: 105px 0;
  text-align: center;
  font-size: 24px;
  text-transform: capitalize;
}

.goToProfile a {
  color: #1c2d64;
  font-weight: 600;
}

.anotherItem {
  list-style: armenian !important;
}

.datCard {
  margin-left: 32px;
}

.congratsMessage {
  color: #1c2d64;
  font-size: 55px;
}

.giftBoxOpen {
  color: #1c2d64;
  font-size: 18px;
}

select.goog-te-combo {
  background-color: #f4eef8;
  color: #1c2d64;
  font-weight: 500 !important;
  border: none;
  border-radius: 8px;
  padding: 3px 5px;
}

.customPurpleBg {
  background-color: #1c2d64 !important;
  white-space: normal !important;
  text-align: left !important;
  padding: 12px;
}

.editButton span {
  font-size: 18px;
  border-bottom: 2px dashed #1c2d64 !important;
  padding-bottom: 5px;
}

.topBorderRadius5 {
  border-radius: 8px;
}

.bottom-text {
  font-size: clamp(10px, 0.9vw, 14px);
}

.topHeader {
  background: #3b15931a;
}

.text-happy {
  font-size: 15px !important;
  color: #747474;
  margin: 15px 0;
}

.instaciti-btn {
  padding: 12px 0px !important;
  font-weight: 400 !important;
  font-family: "Bricolage Grotesque", sans-serif;
}

p.mb-3.font-24 {
  font-size: 18px;
  color: #0e0d0e;
  font-weight: 500;
}

.social-text,
.areYouText {
  font-size: 40px;
  color: #e53825;
  font-weight: 700;
}

.social-image {
  width: 55%;
}

.help-color {
  color: #515151;
}

.modalBodyContent {
  font-family: "Bricolage Grotesque", sans-serif;
}

.advantagesColor {
  margin-right: 5px;
}

.enableLinkBtn {
  font-size: 20px;
  border-bottom: 2px dotted #1c2d64;
}

.bigDotLogo {
  max-width: 105px !important;
}

.freshFlower {
  font-size: 24px;
  color: #1c2d64;
}

.sellOnline {
  color: #1c2d64;
}

.kalyanpuri {
  font-size: 15px;
  color: #747474;
}

.customerPrefers {
  color: #747474;
}

button#add {
  padding: 8px 12px !important;
}

.BusinessCategory {
  width: 560px;
}

.mb-3.d-flex.align-items-center.justify-content-between.displayBlock {
  margin-bottom: 0.6rem !important;
}

.categoryDetail .dropdown-menu {
  position: absolute;
  top: 50px;
  width: 475px !important;
  right: 0px;
}

.categoryDetail .dropdown-menu a.dropdown-item {
  color: #000 !important;
}

/* Rahman CSS GIFTBOX Starts here */

.mainMessage {
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* height: 100vh; */
  margin-top: 130px;
}

.myBusniessSection .congratulationsTitle {
  color: #f15a25;
  font-size: 55px;
  font-weight: bold;
}

.myBusniessSection .congratulationsText {
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
}

.mainMessage .card {
  border: 1px solid #1c2d64;
  background: #fbfbfb;
  padding: 10px 0;
  border-radius: 8px;
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.17);
}

.mainMessage .cardDetails {
  margin-left: 32px;
  cursor: pointer;
}

.mainMessage .iconText {
  display: flex;
  align-items: center;
}

.mainMessage .iconText img {
  width: 25%;
}

.mainMessage .cardLink {
  color: #1c2d64;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}

.mainMessage .cardLink:hover {
  text-decoration: underline;
}

.mainMessage .leftDivider::after {
  content: "";
  position: fixed;
  top: 0%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background-color: #c3c3c3;
  border-radius: 0 10px 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .serviceList .responsiveTable td.flotRight {
    width: 150px;
} */
.dashboardContainer .serviceList thead {
  font-weight: 600;
  text-transform: uppercase;
}

.dashboardContainer .serviceList thead tr td {
  padding: 12px 10px;
  font-weight: 500;
}

/* Giftbox */

.giftBox .goToProfile a {
  color: #1c2d64;
  font-weight: 600;
  font-size: 24px !important;
  text-transform: capitalize;
  text-align: center;
}

.giftBox .congratsMessage {
  color: #1c2d64;
  font-size: 55px;
}

.giftBox .giftBoxOpen {
  color: #1c2d64;
  font-size: 18px;
}

.giftBox select.goog-te-combo {
  background-color: #f4eef8;
  color: #1c2d64;
  font-weight: 500 !important;
  border: none;
  border-radius: 8px;
  padding: 3px 5px;
}

.giftBox .giftBoxPresent {
  width: 50px;
  border-radius: 50px !important;
}

.giftBox .card-body {
  flex: 1 1 auto;
  padding: 10px;
}

/* List styles */
.giftBox .item-list {
  list-style-type: none;
  padding-left: 0;
}

.giftBox .item-list li {
  padding: 10px;
}

.giftBox .leftCard {
  width: 100%;
}

.giftBox .sameLinks a {
  margin-right: 15px;
  font-size: 14px !important;
  text-decoration: none !important;
  border-bottom: 2px dashed #1c2d64;
}

.giftBox .sameLinks a:hover {
  border-bottom: 2px dashed #f15a25;
  color: #f15a25 !important;
}

/* Media queries for responsive design */

.dashboardContainer .enterIntro .mb-0 .col-md-4.col-6.mt-1 {
  margin-top: 10px !important;
  margin-bottom: 5px;
}

.giftBox .sameLinks {
  font-weight: normal;
}

.giftBox .businessManage {
  font-size: 18px;
}

.giftBox .LogoEndBigdot {
  width: 120px;
}

.giftBox .mySpaceBtn {
  border-radius: 50px !important;
  padding: 10px 20px !important;
  font-size: 16px !important;
}

.goToProfile a {
  border-bottom: 2px dashed #1c2d64;
}

.giftBox .bothImages {
  width: 80px !important;
  border-radius: 0.5rem !important;
}

.giftBox .userProfile {
  margin-top: 20px;
}

.giftBox .meTimeWelness {
  margin-top: 25px;
}

.borderRadiusStart10 {
  border-radius: 10px 0px 0px 10px !important;
}

.borderRadiusEnd10 {
  border-radius: 0px 10px 10px 0px !important;
}

.borderRadiusStart50 {
  border-radius: 0px 0px 0px 0px !important;
}

.borderRadiusEnd50 {
  border-radius: 0px 0px 0px 0px !important;
}

.borderRadiusEnd0 {
  border-radius: 0px 0px 0px 0px !important;
}

/* Rahman CSS GIFTBOX Ends here */

.flotRight {
  display: flex;
}

.headerLogo {
  width: 150px;
}

.font41 {
  font-size: 41px;
}

.qrDownloadLink {
  color: #f15a25;
  font-weight: 600;
  border-bottom: 1px dashed #f15a25;
}

.cardIcon {
  padding-top: 25px;
  padding-bottom: 25px;
}

.cardAction {
  padding-top: 10px;
  border-top: 1px dashed rgb(196, 196, 196);
}

.dashboardContainer .serviceList span.add-more {
  background: #1c2d64;
  color: #fff;
  padding: 8px 10px;
  font-size: 16px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.onboardBulb img {
  width: 65px;
}

.btn-warning {
  padding: 10px 10px;
}

.secondaryBtnColor {
  color: var(--site-cta-color) !important;
}

.error-font.font14 {
  width: 100%;
  margin-top: 5px;
}

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

/* linkedin modal css start here */

.LinkdinModal .modal-header h1 {
  font-size: 18px !important;
  font-weight: 700;
}

.modal-content.LinkdinModal .modal-header {
  background: #efefef;
}

.LinkedinProfile .checkedIcon i {
  font-size: 20px;
}

.LinkedinProfile {
  display: flex;
  align-items: center;
}

.checkedIcon {
  margin-right: 15px;
}

.LinkedinProfile .profileContent {
  display: flex;
  align-items: center;
}

.LinkedinProfile .profileContent img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.LinkedinProfile .profileContent .content {
  margin-left: 15px;
}

.LinkedinProfile .profileContent .content a {
  font-size: 16px;
  font-weight: 600;
  color: #3462a9;
}

.LinkedinProfile .profileContent .content h3 {
  font-size: 16px;
  margin-bottom: 4px;
  font-weight: 700;
  color: #3462a9;
}

.LinkedinProfile {
  margin-bottom: 40px;
}

.LinkdinModal .modal-body p {
  font-size: 16px;
  color: #000;
  font-weight: 600;
}

.noPagesImage img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 0 auto;
}

.LinkdinModal .noPagesImage p {
  margin-top: 20px;
  color: #808080;
}

.noPagesImage.text-center {
  margin: 30px 0px 20px;
}

.LinkdinModal .btn {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #3462a9;
  border-radius: 100px;
}

.LinkdinModal button.btn.CancelBtn {
  color: #3462a9;
  background: transparent;
  text-decoration: underline;
}

/* linkedin modal css end here */
.MobileswitchBtn.plainButton {
  width: 100%;
  /* margin-top: 20px; */
}

.plainButton.switchViewBtn {
  background: var(--site-primary-color);
  padding: 5px 5px !important;
  border-radius: 0px !important;
}

.switchViewBtn {
  border-bottom: 2px solid #ff764b;
  color: #ff764b !important;
  background: none !important;
}

.plainButton.essentials {
  background: #ff764b !important;
}

.infoAccrodions .accordion-button.customAccordion::after {
  display: none !important;
}

#btnCopyTag {
  background-color: #ef1c74 !important;
  border-radius: 50px !important;
  margin-left: 10px;
  font-weight: 500;
  padding: 3px 15px;
}

.expressHelpBtn {
  background: #ffc107;
  border-radius: 50px !important;
  font-weight: 600;
  padding: 4px 10px;
  font-size: 12px;
}

.activatewrapBox div#txtPhone span#basic-addon1 i {
  font-size: 22px;
}

.activatewrapBox div#txtPhone input#Phone {
  padding-left: 5px !important;
}

.expressHelpBtn i {
  vertical-align: middle;
  font-size: 20px !important;
  line-height: 24px;
}

.managerNavBar {
  padding: 5px 15px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.managerNavBar.active {
  background: #f15a25 !important;
}

.managerDropdown.active {
  color: #f15a25 !important;
  background: var(--site-secondary-color) !important;
}

.managerDropdown {
  border-bottom: 1px dashed #c3c3c3 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.managerHeaderDropdown {
  border-radius: 10px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.managerHeaderDropdown li {
  display: block !important;
  padding: 0px !important;
  margin-left: 0px !important;
}

.userNameProfile {
  text-align: left !important;
  padding-bottom: 5px !important;
  border-bottom: 1px dashed grey !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  font-size: 13px;
}

.greyscaleImage {
  filter: grayscale(1);
  opacity: 0.3;
}

.watermarkTransparancy .input-group {
  border: 2px solid #1c2d64;
}

.watermarkTransparancy .input-group .btn.btn-number {
  color: #e41a6e;
  padding: 8px 10px;
}

.watermarkTransparancy .input-group input.form-control.input-number {
  border: 2px solid #1c2d64;
  border-top: 0px;
  border-bottom: 0px;
  text-align: center;
  color: #e41a6e;
  padding: 8px 2px !important;
}

.downloadDialogModal {
  z-index: 1234 !important;
}

.customSideNav {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 10px !important;
}

/* easyedit css start here */

.pubishSiteButton {
  background: var(--site-primary-color);
  color: #fff !important;
  width: 45%;
  margin-left: 15px;
}

.pubishSiteButton:hover {
  background: color-mix(in srgb, var(--site-primary-color) 85%, black);
}

.viewSiteButton {
  background: var(--site-cta-color);
  color: #fff;
  width: 45%;
}

.viewSiteButton:hover {
  background: color-mix(in srgb, var(--site-cta-color) 85%, black);
  color: #fff;
}

.topbar .btn.saveBtn {
  background: var(--site-primary-color);
  color: #fff !important;
  width: 45%;
  margin-left: 15px;
}

.topbar .SecondaryBtnBgColor {
  background: var(--site-cta-color);
  color: #fff;
  width: 45%;
  font-size: 15px;
}

.cSmartMediaBox {
  width: 100%;
  margin: 0px;
  /* display: inline-flex;  */
  position: relative;
  /* height: 300px;  */
  margin-top: 19px;
}

.card-body.cardBoxShadow input.customFocusBorder[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 5px !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent;
  border: 1px solid #ecebeb;
  border-radius: 5px !important;
}

.customSideNav a.nav-link.cursorPointer {
  color: var(--site-primary-color);
}

.effectControls.customBlack .cdk-drag.active .col-8 p {
  color: #fff !important;
}

.borderRadius5.cardBoxShadow a.nav-link.cursorPointer {
  color: var(--site-primary-color);
}

.enterIntro h5 {
  font-size: 16px;
}

.editEffect {
  align-items: center;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.editEffect.active {
  background-color: #f26132;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}

.editEffect.active label {
  color: #fff;
  margin-bottom: 0px !important;
}

.card-body.cardBoxShadow .headerClass.font16 {
  /* border-bottom: 1px solid #c1c1c1; */
  padding-bottom: 10px;
}

.PublishMicrosite .seconds {
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
}

.loaderModal {
  z-index: 10000 !important;
}

.cdk-drop-list .custom-border-bottom.align-items-center.active {
  background: #383737;
  color: #fff !important;
  border-radius: 5px;
  margin-top: 10px;
  padding: 10px 10px !important;
}

.cdk-drop-list
  .custom-border-bottom.align-items-center.active
  .form-check-input:checked {
  background-color: #f26132;
  border-color: #f26132;
}

.selectedNavigation.primaryColor {
  background: #212529;
  color: #fff !important;
  border-radius: 5px;
}

.effectControls.customBlack .cdk-drag .col-8 p {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
}

.filterDashboardItems .form-check.form-check-inline {
  margin-bottom: 10px;
}

.cSmartMediaImg {
  width: 100%;
  height: auto;
  font-size: 8px;
  text-align: center;
  padding: 0px;
  position: relative;
  box-shadow: none !important;
}

.cSmartMediaImg div:first-child {
  position: relative !important;
}

.cSmartMediaImg img {
  width: 100% !important;
  height: 280px !important;
  border-radius: 7px;
  object-fit: cover;
}

.cSMActionButtons {
  position: static;
  right: 0px;
  background: #ffffffba;
  padding: 10px 0px;
  height: 100%;
  z-index: 9;
  width: 100%;
  display: flex;
  bottom: 0px;
  align-items: flex-end;
}

.cSMActionButtons div {
  font-size: 18px;
  background: #2e3192;
  padding: 5px;
  margin-bottom: 10px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
  width: 38px;
  height: 35px;
  margin-right: 10px;
}

.cSMActionButtons label {
  margin-bottom: 0px;
  cursor: pointer;
  margin-bottom: 0px;
  width: 43px;
  height: 25px;
  position: relative;
  left: -15px;
  top: -1px;
}

.cSMUpload input {
  display: none;
}

.cSMActionButtons span {
  font-size: 18px !important;
  color: #ffffff !important;
  font: normal normal normal 15px/1 FontAwesome;
}

.cSMActionButtons span {
  font-size: 15px;
  color: #ffffff;
}

.width_105 a {
  padding-left: 6px;
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 500;
}

.width_105 {
  width: 105px !important;
  background: #1771db !important;
  line-height: 22px;
}

.cSMSettings {
  background: #f15a25 !important;
}

.cSMDelete {
  background: #ea111e !important;
}

.cSmartMedia video {
  width: 100%;
  height: 300px;
  box-shadow: 0px 0px 3px 0px #000c;
}

.cSmartMediaImg video {
  width: 100%;
  height: 300px;
  box-shadow: 0px 0px 3px 0px #000c;
}

.cDefault iframe {
  width: 100%;
  height: 300px;
  box-shadow: 0px 0px 3px 0px #cccbcbcc;
}

.cDefault h5 {
  color: #000 !important;
  font-size: 14px !important;
  margin-top: 10px !important;
  margin-bottom: 5px !important;
  letter-spacing: 0.2px;
  font-weight: 500 !important;
  text-indent: 0;
}

.cMatdd_main.cMatdd_error h5 {
  margin: 15px 0px;
  font-size: clamp(10px, 0.9vw, 14px);
}

.cDefault input[type="text"]:focus,
textarea:focus {
  box-shadow: 0 0 5px rgb(233, 233, 233);
  border-bottom: 1px solid rgb(174, 172, 172);
}

.cDefault textarea {
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  outline: none;
  border: 1px solid #dddddd !important;
  box-shadow: none !important;
  /* border-bottom: 2px #61abaa solid; */
  border-radius: 5px;
  font-size: clamp(10px, 0.9vw, 14px);
  color: #000;
  background: #fff;
  padding: 7px !important;
}

.mobileViewProfile {
  display: none;
}

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

.card-body.cardBoxShadow .input-group {
  width: 100%;
  display: flex;
  border: 1px solid #ced4da;
  border-radius: 8px;
  align-items: center;
}

.card-body.cardBoxShadow .input-group input.form-control {
  padding: 8px !important;
  border: 0;
}

.card-body.cardBoxShadow .input-group .input-group-addon {
  width: 50px;
  text-align: center;
}

.icon-picker .icon-search input.form-control.input-sm {
  border: 1px solid #ced4da !important;
}

.pageSetting .nav-tabs li.nav-item .nav-link span {
  background: #1c2d64;
  color: #fff;
  text-align: center;
  font-size: 10px;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  display: inline-block;
  margin-right: 5px;
}

.pageSetting .nav-tabs li.nav-item .nav-link {
  color: #1c2d64;
  font-weight: 500;
  font-size: clamp(10px, 1.1vw, 15px);
}

.pageSetting .nav-tabs .nav-item.show .nav-link,
.pageSetting .nav-tabs .nav-link.active {
  color: #f26334 !important;
  background-color: initial;
  border-bottom: 2px solid #f26334 !important;
  border: none;
}

.pageSetting .nav-tabs li.nav-item .nav-link.active span {
  background: #f26334;
}

.pageSetting .nav-tabs li.nav-item .nav-link:first-child {
  padding-left: 0px;
}

.pageSetting .nav-tabs li.nav-item .nav-link:last-child {
  padding-right: 0px;
}

.pageSetting .col-md-4.mt-3 input.ng-untouched {
  width: 100%;
}

/* easyedit css end  here */

/* bidgot creator css start here */

.canvasWorkArea {
  padding: 3rem !important;
}

.formatList-3O7OT {
  align-items: flex-end;
  display: flex;
  height: 255px;
  margin-right: 24px;
}

.scrollWrapper-WCsyO {
  overflow: hidden;
}

.bigdotStudioHeader {
  padding: 8px 32px;
  /* background: radial-gradient(68.13% 61318.26% at 6.21% 50%, #4F038A 0%, #1B0050 100%); */
  border-bottom: 1px solid #cfcfcf;
}

.heroBanner {
  background-image: url("https://dkzxkcjlbnjui.cloudfront.net/uploads/media/images/creator-hero-bg.jpg");
  background-position: 50%;
  background-size: cover;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
}

.heroBanner h2 {
  font-size: 3rem;
  /* Adjust as needed */
  font-weight: bold;
  background: linear-gradient(45deg, #ff6b6b, #6b6bff, #6bff6b, #ff6bff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientAnimation 5s infinite linear;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.mt-100 {
  margin-top: 100px;
}

.creatorframeWrapper-1PhkF .frame-1iDMX {
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.creatorframeWrapper-1PhkF {
  bottom: 0;
  cursor: pointer;
  display: inline-flex;
  position: relative;
  transition: transform 0.3s;
}

.scrollView-1Y_5J {
  -ms-overflow-style: none;
  align-items: center;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-top: 4px;
  padding-top: var(--slider-padding-top);
  scrollbar-width: none;
}

.creatorHoverableFrameWrapper {
  display: inline-block;
  position: relative;
}

.creatorHoverableFrameWrapper:hover:before {
  bottom: -2px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.creatorframeWrapper-1PhkF .shadow-1HDHW {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, var(--shadow-strength, 0.08)));
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s;
  will-change: filter, opacity;
  z-index: -1;
}

.creatortransparentFrameWrapper .content-1RARw {
  background: #fff;
}

.creatorframeWrapper-1PhkF .content-1RARw {
  background: #f4f4f5;
  overflow: hidden;
  position: absolute;
  z-index: 0;
}

.creatorHoverableFrameWrapper:hover .shadow-1HDHW {
  opacity: 1;
}

.instagram-2UL_Y {
  position: relative;
}

.formatBackground-1PCU9 {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.instagram-2UL_Y:before {
  background:
    radial-gradient(
      97.08% 97.08% at 38.33%,
      at 102.5%,
      #ffd67e 0,
      #ff7664 37.48%,
      #de359a 63.79%,
      #7247d6 94.99%
    ),
    linear-gradient(135.26deg, #2074f0, rgba(255, 0, 82, 0) 52.89%);
  background:
    radial-gradient(
      97.08% 97.08% at 38.33% 102.5%,
      #ffd67e 0,
      #ff7664 37.48%,
      #de359a 63.79%,
      #7247d6 94.99%
    ),
    linear-gradient(135.26deg, #2074f0, rgba(255, 0, 82, 0) 52.89%);
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.12;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.customSizeBtn-3tNnl {
  align-items: center;
  border: 1px solid #e8e8ea;
  border-radius: 8px;
  display: flex;
  height: 136px;
  justify-content: center;
  margin-bottom: 12px;
  width: 136px;
}

.customSizeBtnIcon-QYUGG {
  color: #0073c7;
}

.svgWrapper-2-4f9 {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: color, transform;
}

.creatorframeWrapper-1PhkF {
  bottom: 0;
  cursor: pointer;
  display: inline-flex;
  position: relative;
  transition: transform 0.3s;
}

.creatorFrameSubTitle,
.creatorFrameTitle {
  max-height: 32px;
  overflow: hidden;
}

.creatorFrameSubTitle {
  color: #91949c;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  white-space: nowrap;
}

.creatorHoverableFrameWrapper:hover .creatorframeWrapper-1PhkF {
  transform: translateY(-2px);
}

.creatorCaptionWrapper {
  bottom: 0;
  left: 0;
  padding-bottom: 56px;
  position: relative;
  right: 0;
}

.creatorCaptionWrapper .captionContent-368Da {
  position: absolute;
  width: 100%;
}

.typography-subheading-s {
  font-size: 12px;
  line-height: 16px;
}

.caption-1IBP5 {
  color: #121316;
  font-size: 12px;
  height: 48px;
  line-height: 16px;
  margin: 8px 0 0;
  text-align: center;
  will-change: transform;
}

.captionWrapper-2Wusw:hover .creatorFrameSubTitle {
  opacity: 1;
}

.creatorframeWrapper-1PhkF .playIcon-3KD8T {
  bottom: 4px;
  position: absolute;
  right: 4px;
  z-index: 2;
}

.mainView-1AZDR {
  --scroll-view-offset-top: calc(
    var(--header-height, 0px) + var(--notification-height, 0px) +
      var(--unauthorized-header-height, 0px) +
      var(--promo-banner-header-height, 0px)
  );
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: padding-top 0.3s;
}

.mainView-1AZDR.promoBannerHeader-1OC2f {
  --promo-banner-header-height: 96px;
  padding-top: 96px;
}

.mainView-1AZDR.headerVisible-1wiub {
  --header-height: 64px;
}

.formatBackground-qmiB5 {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.colorKiwi-1Q253 {
  background: #e8faf2;
}

/* bidgot creator css end here */

/* rich text editor css start */
.editor-controls {
  display: block;
  padding-top: 6px;
  padding-left: 8px;
  padding-right: 8px;
}

.editor-controls .button-group {
  display: inline-block;
  margin: 0 2px;
}

.editor-richText-box {
  width: 100%;
  min-height: 380px;
  border: 2px solid #cccccc;
  background-color: #efefef;
  font-family: "Bricolage Grotesque", sans-serif;
  word-break: break-word;
  word-wrap: normal;
  padding: 16px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.35);
}

.editor-text-box {
  font-family: "Bricolage Grotesque", sans-serif;
  word-break: break-word;
  word-wrap: normal;
}

.rte.button {
  display: block;
  float: left;
  padding: 6px;
  margin: 6px;
  text-align: center;
}

.rte.button:hover {
  cursor: pointer;
}

.rte.main.button {
  color: #ffffff;
  padding: 6px 12px;
  margin: 6px;
  background-color: #2676d5;
  border: 1px solid #1d5aa3;
  font-weight: bold;
  border-radius: 5px;
}

.rte.main.button:hover {
  background-color: #3a3a3a;
  border-color: #1a1a1a;
}

.rte.main.button.fileUpload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.rte.main.button.fileUpload input[type="file"] {
  cursor: pointer;
  position: absolute;
  top: 0;
  opacity: 0;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 20px;
  right: 0;
}

.rte.editor.button {
  color: #1a1a1a;
  background-color: #eeeeee;
  font-weight: bold;
  margin: 0;
  height: 34px;
}

.rte.editor.button:hover {
  background-color: #3a3a3a;
  border-color: #1a1a1a;
  color: #ffffff;
}

.rte.editor.button:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.rte.editor.button:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.rte.editor.dropdown {
  float: left;
  padding: 5px;
  margin: 6px;
  height: 36px;
  text-align: center;
  color: #1a1a1a;
  background-color: #eeeeee;
  font-weight: bold;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin: 0 0px;
  border-left: 0px;
  margin-left: 0;
  border-color: #eeeeee;
}

.rte.editor.dropdown:hover {
  cursor: pointer;
  border-color: #eeeeee;
}

.rte.editor.dropdown option {
  background-color: inherit;
  font-weight: bold;
}

.rte.editor.dropdown-label {
  color: #1a1a1a;
  background-color: #eeeeee;
  font-weight: bold;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  display: block;
  float: left;
  padding: 6px;
  margin: 0;
  text-align: center;
}

.rte.editor.dropdown#fontFamily {
  width: 150px;
  font-weight: normal;
}

/* rich text editor css end */
#hamburgerMenuTest {
  font-size: 24px;
  margin-right: 20px;
  float: right;
}

/* header and footer css start here */

.modalFooter .pages a {
  background: #fff;
  color: #000;
  font-size: 16px;
  border: 1px solid #9c9c9c;
  padding: 5px 10px;
  border-radius: 5px;
}

.modalFooter {
  position: fixed;
  bottom: 10px;
  width: 66.5%;
  padding: 0px 15px;
}

.helpCenter.pages .help {
  background: #000;
  color: #fff;
  border-color: #000;
  margin-left: 10px;
  padding: 5px 20px;
  font-weight: 600;
}

.bigdotStudioHeader a.navbar-brand img.img-fluid {
  width: 120px;
}

.bigdotStudioHeader .navbar-nav li.nav-item a.nav-link {
  background: transparent !important;
  color: #000 !important;
  margin-bottom: 0px;
  padding: 0px 0px;
  font-size: 15px;
  font-weight: 500;
  margin: 0px 20px;
  width: auto;
}

.bigdotStudioHeader .navbar-nav li.nav-item a.nav-link.active {
  border-bottom: 2px solid;
  border-radius: 0px;
  border-color: #f15a25;
}

.bigdotStudioHeader .navbar-nav {
  margin-left: 50px;
}

.bigdotStudioHeader .btn {
  background: var(--site-primary-color);
  margin-left: 15px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  padding: 8px 20px;
}

.bigdotStudioHeader .btn:hover {
  background: var(--site-primary-color);
  color: #fff !important;
}

.bigdotStudioHeader .btn.upgradeToCreator {
  background: var(--site-cta-color) !important;
}

.bigdotStudioHeader .btn.downloding:after {
  display: none;
}

.bigdotStudioHeader .wh40.rounded-circle {
  width: 40px;
  height: 40px;
  margin-left: 15px;
  cursor: pointer;
  object-fit: cover;
}

.dropdown.userProfileDropdown .btn.dropdown-toggle {
  background: transparent;
  border: 0;
  padding: 0px;
  margin: 0px;
}

.bigdotStudioHeader .btn.upgradeToCreator:hover {
  background: var(--site-cta-color) !important;
  color: #fff !important;
}

.userProfileDropdown .dropdown-menu {
  top: 100%;
  left: -20px !important;
  min-width: inherit;
  padding: 5px !important;
}

.bigdotStudioHeader .imageDownload {
  background: #1c2d64;
  color: #fff;
  text-align: center;
  border-radius: 5px;
}

.bigdotStudioHeader .imageDownload:hover {
  background: #1c2d64 !important;
  color: #fff !important;
}

.bigdotStudioHeader .dropdown-item:focus,
.dropdown-item:hover {
  color: initial !important;
  background-color: initial !important;
}

/* header and footer css end here */
/* Emojis UI */
.bigdotEmoji emoji-mart.emoji-mart {
  position: absolute !important;
  top: -12% !important;
}

/* Emojis UI */

.myBusniessSection .congratulationsText .bigdotCongratulations {
  width: 80px;
}

/* temporary deals page css start here */
.cDivMenu3 {
  color: #1c2d64;
  /* background: linear-gradient(60deg, #2d3131, #303837); */
  /* background: #ffc107; */
  /* background: linear-gradient(60deg, #ffa112, #f9820e); */
  /* padding: 10px; */
  border: 1px solid #dfdfdf;
  border-radius: 8px;
  margin-top: 15px;
}

.cManikContainerFluid {
  padding: 0px !important;
}

.container-fluid.p-lg-4.customBackgroundColor {
  padding: 0px 15px !important;
}

#iBreadCrumb1 {
  font-size: 18px;
  color: #0d1925;
  font-weight: 600;
}

.cDivMenu3 p.cPageDescription {
  margin-bottom: 0px;
}

ul.cEntityAdd li {
  display: inline-block;
}

ul.cEntityAdd li a.cEntityAddBg i {
  margin-right: 5px;
}

ul.cEntityAdd li a.cEntityAddBg {
  background: var(--site-primary-color);
  color: #fff;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  display: inline-block;
}

.card .card-body.cDivWorkSpace {
  margin-top: 0px;
}

#iBreadCrumb2 {
  font-size: clamp(10px, 0.9vw, 14px);
  color: #1c2d64;
  margin-left: 30px;
}

#iBreadCrumb1:after {
  content: "";
  height: 10px;
  position: absolute;
  margin-top: 6px;
  background: #1c2d64;
  width: 10px;
  border-radius: 50%;
  margin-left: 10px;
}

.cDivMenu3 ul {
  /* background-color: #ebebeb; */
  padding-bottom: 10px;
}

.nav-tabs {
  border: 0;
  border-radius: 3px;
  padding: 0 15px;
}

.cDivMenu3 .nav-tabs .nav-item {
  position: relative;
  margin-right: 20px;
}

.cDivMenu3 .nav-tabs .nav-item .material-icons {
  font-size: 20px;
  width: 16px;
  float: left !important;
  position: relative;
  top: 4px;
  left: 0px;
  height: 16px;
  margin-right: 7px;
  color: #000044;
}

.cDivMenu3 .active .cPageHeaderText {
  color: #24008a !important;
  font-size: 13px;
}

.mat-tab-labels .mat-tab-label-content {
  font-size: 16px;
}

.mat-tab-labels .mat-tab-label-active {
  color: var(--site-primary-color);
  font-size: 16px;
}

.cDivWorkSpace {
  background-color: #fff;
  border-radius: 8px;
  margin-top: -55px;
  font-size: 13px;
  padding: 3% 1% !important;
}

.manik-table-container button.cOptionEdit {
  background: #28a745;
  padding: 5px 20px;
  font-size: 16px;
  border: 0;
  color: #fff;
  border-radius: 5px;
  margin-right: 10px;
}

.manik-table-container button.cOptionDelete {
  background: #f44336;
  padding: 5px 20px;
  font-size: 16px;
  border: 0;
  color: #fff;
  border-radius: 5px;
}

.cMatdd_main h5 {
  color: #000 !important;
  font-size: 14px !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  letter-spacing: 0.2px;
  font-weight: 500 !important;
  text-indent: 0;
}

.mat-tab-body-wrapper {
  /* background-color: #fff; */
  border-radius: 8px;
  margin-top: 15px;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 13px;
  padding: 10px 0px !important;
  width: 100%;
}

.mat-tab-label:first-child {
  padding-left: 0px;
}

.cDivMenu3 ul.nav.nav-tabs {
  display: block;
}

.cDivMenu3 .mat-tab-body-content {
  overflow: hidden;
}

.cBrandImage img {
  width: 100%;
  border: 1px #c7c7c7 solid;
  border-radius: 5px;
  padding: 2px;
  height: auto;
}

.cCursorPointer h6 {
  color: #000;
  text-transform: initial !important;
  font-size: 13px !important;
}

.cBrandBorder {
  border-bottom: 1px #c5c5c5 solid;
  padding-bottom: 40px;
}

.cButtonCustom {
  background: linear-gradient(60deg, #ff3434, #ff3434);
  padding: 8px 35px;
  color: #fff !important;
  border-radius: 5px;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 16px;
  background: #1c2d64;
  border: 0px;
  margin-right: 10px;
}

.cButtonCancel {
  padding: 8px 30px;
  border-radius: 0.12em;
  transition: all 0.2s;
  cursor: pointer;
  border: 0px;
  background: #f44336;
  color: #fff;
  margin: 7px 8px 0px 0px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
}

.mat-tab-label {
  opacity: 1 !important;
}

.cDefault .mat-input-element {
  box-sizing: border-box !important;
  border: 1px solid #ced4da !important;
}

.mat-horizontal-content-container {
  overflow: hidden;
  padding: 20px 1px !important;
}

.cMatdd_main .mat-select-trigger {
  border: 1px #c9c1c1 solid;
  padding: 5px;
  border-radius: 5px;
  color: #000;
  margin-bottom: 15px;
  border-radius: 8px;
  padding: 10px;
}

button.cButtonCopy {
  background: var(--site-primary-color);
  color: #fff;
  border: 0px;
  border-radius: 5px;
  font-size: clamp(10px, 0.9vw, 14px);
  padding: 5px 10px;
  margin-bottom: 20px;
}

.mat-checkbox.mat-accent {
  margin-right: 10px;
}

.cDivMenu3 .mat-horizontal-stepper-header-container {
  background: #ebebeb;
  margin-top: 0px;
  float: left;
  width: 100%;
  border-radius: 100px;
  height: 50px;
  margin-bottom: 15px;
}

.cDivMenu3 .mat-step-header .mat-step-icon {
  background-color: var(--site-primary-color);
  color: #fff;
}

.mat-horizontal-stepper-header {
  height: 50px;
  border-radius: 50px;
}

.angular-editor .angular-editor-textarea {
  margin-bottom: 30px !important;
}

.cSimpleUpload {
  padding-top: 20px !important;
  position: relative;
}

.cSimpleUpload img {
  width: 100px;
  border-radius: 8px;
  border: 1px #e8e6e6 solid;
  margin-top: -11px;
  height: 85px;
  object-fit: cover;
}

.cSimpleUpload .image-upload {
  background: #fff;
  width: 38px;
  padding: 0px;
  height: 38px;
  display: inline-block;
  border: 1px #e8e6e6 solid;
  text-align: center;
  border-radius: 5px;
  line-height: 38px;
  margin-left: 10px;
  left: 20px;
  position: absolute;
  top: 30px;
  cursor: pointer;
}

.cSimpleUpload input {
  font-size: 12px;
  margin-top: 12px;
}

tr.mat-header-row th.mat-header-cell.cdk-header-cell {
  text-align: left;
}

.mat-paginator-container .mat-select-arrow {
  color: #fff !important;
}

.mat-paginator-icon {
  width: 28px;
  fill: #fff !important;
}

.mat-paginator-container span.mat-select-min-line {
  color: #fff;
}

span.image-remove {
  position: absolute;
  top: 0px;
  background-color: #fff;
  font-size: 18px;
  border-radius: 100px;
  color: red;
}

/* .mat-select-value span.mat-select-min-line {
    color: #000;
} */

.mat-select .mat-select-trigger {
  border: 1px solid #ced4da;
  padding: 8px;
  border-radius: 8px;
}

.image-upload > input {
  display: none;
}

.cDefault {
  position: relative;
  margin-bottom: 10px;
}

.cDefault .mat-datepicker-toggle {
  position: absolute;
  right: 0px;
  top: 30px;
}

.cDivTable .manik-table-container th {
  padding: 0px 10px !important;
  width: 100px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
}

.cDivTable .manik-table-container {
  margin: 15px 0px 30px;
}

.sliderSmartMedia video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin: 10px 0px;
}

.cButtonSubmit {
  transition: all 0.2s;
  cursor: pointer;
  border: 0px;
  background: #1c2d64;
  color: #fff;
  margin-top: 0px;
  padding: 8px 30px;
  border-radius: 10px;
  letter-spacing: 1px;
  font-size: 16px;
  font-weight: 500;
}

.cFirstEntityAdd li {
  list-style: none;
  height: 59px;
  padding: 2px;
  width: 60px;
}

.cFirstEntityAdd a {
  display: block;
  position: relative;
  background-color: #f2f2f2;
  border-radius: 50%;
  text-align: center;
  padding: 17px 10px;
  color: #000;
  font-size: 20px;
}

.cFirstEntityAdd a:focus,
a:hover {
  color: #89229b;
  text-decoration: none;
}

.cFirstEntityAdd a:hover span {
  width: auto;
  padding: 0 20px;
  overflow: visible;
}

.cFirstEntityAdd a:hover span {
  width: auto;
  padding: 0 20px;
  overflow: visible;
}

.cFirstEntityAdd span {
  width: 0;
  padding: 0;
  position: absolute;
  overflow: hidden;
  top: 8px;
  left: 56px;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.6px;
  white-space: nowrap;
  line-height: 39px;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
  border-radius: 5px;
  background: #f2f2f2;
  cursor: pointer;
}

ul.cFirstEntityAdd {
  background: transparent;
}

button.cTooltipEditText {
  background: #28a745;
  padding: 5px 20px;
  font-size: 16px;
  border: 0;
  color: #fff;
  border-radius: 5px;
  margin-right: 10px;
}

button.cTooltipDeleteText {
  background: #f44336;
  padding: 5px 20px;
  font-size: 16px;
  border: 0;
  color: #fff;
  border-radius: 5px;
}

.mat-table td:first-child {
  padding-left: 10px !important;
}

.mat-table td {
  padding: 10px !important;
}

.mat-step-header:hover {
  background: transparent !important;
}

/* temporary deals page css end here */

.sidebar .customNav span i {
  line-height: 1.2;
}

.responsiveTable.CustomCellWidth table td {
  min-width: initial;
}

.responsiveTable.CustomCellWidth table td:nth-child(7) {
  min-width: initial;
}

.dashboardContainer .customSideNav a.nav-link {
  padding: 0px;
}

.dashboardContainer .customSideNav a.nav-link span.font14 {
  padding: 8px 0px;
  display: inline-block;
  width: 100%;
}

.cardBoxShadow .effectPrimarySettings .circle-icon {
  width: 35px !important;
  height: 35px !important;
  border-radius: 50% !important;
  background-color: #f0f0f0 !important;
  line-height: 35px;
  cursor: pointer !important;
  text-align: center;
  margin-left: 15px !important;
  /* float: right; */
}

.searchMybusiness input.mat-autocomplete-trigger {
  padding-left: 30px !important;
}

.searchMybusiness {
  position: relative;
  width: 100%;
  display: block;
}

.cRowdata .cBizdetails label.cInputheading {
  margin-top: 20px;
}

.searchMybusiness i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  z-index: 10;
  pointer-events: none;
}

.searchMybusiness input.form-control {
  padding-left: 40px !important;
}

.angular-editor-wrapper .angular-editor-textarea {
  margin-bottom: 0px !important;
  height: 100px !important;
}

.angular-editor-toolbar {
  margin-top: 15px;
}

.effectPrimarySettings h4 {
  padding-top: 10px !important;
  margin-bottom: 5px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.enterIntro.cardBoxShadow input#exampleColorInput[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 4px !important;
  width: 35px !important;
  height: 35px !important;
  background: transparent;
  border: 1px solid #ecebeb;
  border-radius: 5px !important;
  margin-left: 10px;
}

.cardBoxShadow .effectPrimarySettings .circle-icon i {
  font-size: 16px !important;
  color: #000 !important;
}

button.accordion-button.collapsed {
  color: var(--site-primary-color);
  max-width: 100%;
  font-size: clamp(11px, 1.1vw, 15px);
  justify-content: space-between;
  background-color: #fff;
  border-radius: 5px !important;
  padding: 10px 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.allEffectSetting .accordion-header {
  background-color: #fff;
  padding: 0px;
}

p.font20.font500.blackColor.mb-0 {
  margin-top: 20px;
}

button.accordion-button.bg-white.focusRemove.boxShadowNone {
  color: var(--site-primary-color);
  max-width: 100%;
  font-size: clamp(11px, 1.1vw, 15px);
  justify-content: space-between;
  background-color: #fff;
  border-radius: 5px !important;
  border: 1px solid #dee2e6 !important;
  padding: 10px 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.allEffectSetting .accordion-button:not(.collapsed) {
  background-color: #fff;
  box-shadow: none;
}

.allEffectSetting .accordion-item {
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.125) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.allEffectSetting .accordion-header button.accordion-button {
  font-size: clamp(12px, 1.1vw, 18px);
  font-weight: 400;
  color: #000 !important;
  padding: 12px 10px;
}

.menuSettingActive.active {
  background: #383737;
  color: #fff !important;
  border-radius: 5px;
  margin-top: 10px;
  padding: 10px 10px !important;
}

.menuSettingActive.active p {
  color: #fff !important;
}

.menuSettingActive.active p i {
  color: #fff !important;
}

.menuSettingActive.active .mat-tooltip-trigger i {
  color: #fff !important;
}

.custom-border-bottom:first-child {
  border-top: 1px solid #c3c3c3 !important;
}

/* .custom-border-bottom:last-child {
  border-bottom: 0px !important;
  padding-bottom: 0px !important;
} */

.effectControls .editEffect.float-end {
  border: 0;
}

.allEffectSetting .accordion-item .accordion-body {
  padding-top: 0px;
}

.mat-tooltip-trigger.editEffect {
  border: 0;
}

.p-3 {
  padding: 10px !important;
}

.effectPrimarySettings span.input-group-addon {
  position: absolute;
  left: 10px;
  z-index: 13;
  top: 50%;
  transform: translateY(-50%);
}

.editEffect {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #f15a25;
}

.cdk-drop-list .custom-border-bottom.align-items-center.active i {
  color: #fff !important;
}

.cdk-drop-list .custom-border-bottom.align-items-center.active p {
  color: #fff !important;
}

.serviceList .mt-3 .item-list {
  margin: 0px !important;
  padding: 0px !important;
}

.serviceList .mt-3 .item-list .col-md-6 {
  padding: 0px;
}

.card-body form.row.g-3.editForm .customColor {
  margin: 10px 0px 0px !important;
}

.candidSection {
  border: 1px solid #f26132;
  padding: 5px;
  border-radius: 5px;
}

.effectPrimarySettings .candidImg {
  width: 100%;
  height: 100px;
  margin-bottom: 5px;
  object-fit: cover;
  border-radius: 5px;
}

.dashboardContainer .enterIntro .col-md-3.col-6.mt-1 {
  margin-top: 10px !important;
}

.allEffectSetting .accordion-item .accordion-body .custom-border-bottom .col-8 {
  padding: 0px 8px;
}

.allEffectSetting
  .accordion-item
  .accordion-body
  .custom-border-bottom
  .col-8
  p {
  display: flex;
  align-items: center;
}

.allEffectSetting .accordion-item .accordion-body .custom-border-bottom .col-4 {
  padding: 0px;
}

.userEditEffect img {
  width: 200px;
  margin-bottom: 20px;
}

.userEditEffect h4 {
  font-weight: 400 !important;
}

.userEditEffect {
  text-align: center;
  padding: 100px 20px;
}

.mat-mdc-snack-bar-container {
  margin: 8px;
  position: fixed !important;
  max-width: 320px !important;
  right: 20px !important;
  left: auto !important;
}

.effectPrimarySettings .col-md-12.mb-3 {
  /* border-bottom: 1px solid #b7b7b7; */
  position: relative;
}

.effectPrimarySettings .col-md-12.mb-3:after {
  position: absolute;
  content: "";
  border-bottom: 2px dashed #8b8b8b;
  height: 1px;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
}

.angular-editor {
  margin-bottom: 10px;
}

/* action button css start here  */
.cManikSmartButtonBehaviour {
  border-bottom: 1px #ccc solid;
  margin-bottom: 15px;
}

.cManikSmartButtonNavigate input,
.cManikSmartDropdwonSelector {
  border: 1px #c4c4c4 solid;
  text-indent: 4px;
  width: 100%;
  font-size: clamp(10px, 0.9vw, 14px);
  margin-bottom: 15px;
  height: initial;
}

.ver01 {
  border: 0px;
  padding: 0px;
  background: #fff;
  width: 35px;
  height: 20px;
}

/* button.btn.btnSuccess.btnMd.text-white.customButtonHeight {
  padding: 12px !important;
} */

.cManikSmartColorPicker input[type="color"] {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
  outline: none;
  cursor: pointer;
}

.cManikSmartBgColor {
  font-size: 13px;
  font-weight: normal;
  position: relative;
  top: -7px;
  margin: 0 5px;
}

.cManikActionButton1 {
  padding: 0 5px 0px;
  vertical-align: middle;
}

.cManikSmartColorPicker {
  display: inline-block;
  margin: 0px 0px 10px;
}

.cManikSmartWrapSendButton {
  background: #ff006a;
  border: 0px;
  color: #fff;
  padding: 7px 40px;
  border-radius: 5px;
}

/* action button css end here  */
.personalOnoarding input#basic-addon1 {
  border: 1px solid #ced4da;
  border-radius: 10px 0px 0px 10px !important;
  border-right: 2px solid #ced4da !important;
}

.chatGptButton {
  background: #198754 !important;
  padding: 5px !important;
  height: 38px !important;
}

/*
job application css start here  */

.formContainer {
  margin-top: 20px !important;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.formContainer .row .col-md-6 input.form-control {
  font-size: clamp(10px, 0.9vw, 14px);
}

.formContainer .row .col-md-6 .form-label {
  font-size: 16px;
  margin-bottom: 2px !important;
}

.formContainer h2 {
  text-align: center;
  margin-bottom: 10px;
  color: #333;
  font-size: 24px;
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 10px;
}

.formContainer .form-group {
  margin-bottom: 15px;
}

button.uploadYourResume.btn {
  border: 2px dashed #7244de;
  border-radius: 200px;
  font-size: 15px;
  font-weight: 500;
  color: #7244de;
  padding: 8px;
}

/* body .form-group label {
    display: block;
    margin-bottom: 1px !important;
    color: #222 !important;
    font-size: clamp(13px, 0.9vw, 14px) !important;
} */

.form-group input,
.form-group select {
  border: 1px solid #cddaff;
  font-size: clamp(13px, 0.9vw, 14px);
}

.form-group input:focus,
.form-group select:focus {
  border-color: #4f46e5;
  outline: none;
}

.form-group small {
  color: #666;
  font-size: clamp(10px, 0.9vw, 12px);
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #4f46e5;
  color: #ffffff;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.submit-btn:hover {
  background: #4338ca;
}

.dropFile.uploadYourResume.btn {
  width: 100%;
}

.uploadYourResume.dropFile {
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px dashed #4f46e5;
}

.uploadYourResume.dropFile input {
  position: absolute;
  left: 0;
  top: 0px;
  opacity: 0;
  padding: 0px;
  cursor: pointer;
  height: 44px;
}

.uploadYourResume.dropFile i {
  color: #4f46e5;
  display: inline-block;
  font-size: 20px;
}

/*
job application css end  here  */

.upgradeToEssentials {
  position: relative;
}

.upgradeToEssentials button.btn.Upgrade {
  background: #b1044a;
  border-radius: 100px;
  color: #fff;
  line-height: 20px;
  font-size: clamp(10px, 0.9vw, 14px);
  padding: 10px 15px;
  z-index: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  left: 50%;
}

.upgradeToEssentials:after {
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2.5px);
  content: "";
  inset: 0;
}

.mobileFullWidth {
  margin-left: 0px !important;
}

.serviceList .mt-3 .item-list .form-check.form-check-inline input {
  margin-top: 7px;
}

.editForm .col-md-12 input#PriceTaxInclusive {
  margin-top: 5px !important;
}

.container-fluid.p-lg-4.customBackgroundColor
  .mb-0
  .col-md-2.d-flex.align-items-end {
  display: inline-block !important;
  margin-top: 30px;
}

.container-fluid.p-lg-4.customBackgroundColor
  .mb-0
  .col-md-2.d-flex.align-items-end
  i {
  vertical-align: text-bottom;
  margin-right: 4px;
}

.effectControls.customBlack .row {
  align-items: center;
}

.accordion-body .custom-border-bottom .col-5 {
  padding: 0px 8px;
}

.menuSettingActive.active label.form-label {
  color: #fff !important;
}

.card.jffCard.shadow-2-strong .font13.text-muted a {
  color: var(--site-primary-color);
  font-size: clamp(10px, 0.9vw, 14px);
}

.mat-paginator {
  background: var(--site-primary-color) !important;
  border-radius: 5px;
}

.mat-paginator-page-size-select {
  margin: 0px 5px 0 4px !important;
}

.mat-select-panel {
  background: #fff !important;
}

.mat-paginator,
.mat-paginator-page-size .mat-select-trigger {
  color: #fff !important;
  font-weight: 500;
  font-size: 14px !important;
}

.mat-paginator-container {
  justify-content: space-between !important;
  background-color: var(--site-primary-color);
  border-radius: 5px;
}

.mat-select-panel {
  background: #fff;
}

/* .bg-purple {
  background-color: #3b0a99 !important;
} */

.customPagination select:focus {
  box-shadow: none;
  outline: none;
}

/* .customPagination select {
  border-radius: 0 ;
  background-color: #3b0a99;
  color: #ffffff;
} */

.customPagination select option {
  color: black;
  /* Dropdown options should be visible */
}

.customPagination .btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.pagination-scroll.multipagination {
  background: var(--site-primary-color);
  color: #fff;
  padding: 10px 8px;
  border-radius: 5px;
  margin-top: 10px;
}

.pagination-scroll.multipagination button.btn.text-white.p-0 span i {
  font-size: 15px;
}

.dashboardContainer .serviceList table td a i.fa.fa-sort-asc {
  display: none;
}

.dashboardContainer .serviceList .form-control:disabled {
  background-color: transparent !important;
  opacity: 1;
  border: 0px !important;
  padding: 0px !important;
}

div#content-wrapper .customBackgroundColor .col-md-12.d-flex.align-items-end {
  align-items: center !important;
  justify-content: flex-end;
}

/*
div#content-wrapper .customBackgroundColor .col-md-12.d-flex.align-items-end .uploadIcon {
  border: 2px solid var(--site-primary-color);
  padding: 8px 15px;
  border-radius: 5px;
  color: var(--site-primary-color);
} */
div#content-wrapper
  .customBackgroundColor
  .col-md-12.d-flex.align-items-end
  button.btn.btn-success.w-100
  i {
  font-size: 12px;
  padding-right: 3px;
}

div#content-wrapper
  .customBackgroundColor
  .col-md-12.d-flex.align-items-end
  button.btn.btn-danger.w-100 {
  width: 110px !important;
  padding: 7px 0px !important;
  font-size: clamp(12px, 1vw, 13px) !important;
  font-weight: 400 !important;
}

.otherSection .mb-0 .col-md-12 .row {
  align-items: center;
}

.otherSection .col-lg-12 .border-top.pt-3 {
  margin-top: 15px;
}

div#content-wrapper
  .customBackgroundColor
  .col-md-12.d-flex.align-items-end
  button.btn.btn-success.w-100 {
  background-color: var(--site-primary-color);
  border: 0px;
  width: 110px !important;
  margin-right: 5px;
  padding: 7px 0px !important;
  font-size: clamp(12px, 1vw, 13px) !important;
  font-weight: 400 !important;
}

div#content-wrapper .customBackgroundColor .col-12.mt-4 a .btn {
  width: 20%;
  margin-right: 15px;
}

.file-upload-container {
  width: 320px;
  border-radius: 8px;
}

.file-upload-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: clamp(13px, 1.2vw, 16px);
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 15px;
  background-color: #f3f4f6;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
  font-size: clamp(12px, 1vw, 14px);
}

.upload-btn:hover {
  background-color: #e5e7eb;
}

.upload-btn input[type="file"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

.upload-icon {
  margin-right: 8px;
  font-size: 16px;
}

.file-note {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.otherSection {
  overflow-y: auto;
  height: auto;
  overflow-x: hidden;
  margin-bottom: 80px;
}

.footerGroupBtn button.btn {
  background-color: #d3d3d3;
  padding: 6px 10px !important;
  font-size: clamp(12px, 1vw, 14px) !important;
  margin-right: 10px;
  font-weight: 400 !important;
}

.footerGroupBtn {
  background-color: #fff;
  padding: 10px;
  box-shadow: 2px 2px 6px #939393;
  margin-top: 10px;
  bottom: 0px;
  position: fixed;
}

.footerGroupBtn button.btn:hover {
  color: #000;
}

.footerGroupBtn button.btn.btn-success.text-white {
  background-color: #198754;
}

.purchaseBigdot .row.mt-5 .col-md-4.text-center {
  margin-bottom: 50px;
}

.dropBox .form-group .sliderSmartMedia.mediaImage video {
  width: 100%;
  height: 250px;
  object-fit: cover !important;
  border-radius: 10px;
}

.dropBox .form-group .sliderSmartMedia.mediaImage {
  margin-top: 20px;
}

.effectEditSettings.mt-3 .col-lg-8.col-md-4.col-sm-1 p.mt-4 {
  border: 1px solid #dadada;
  padding: 10px;
  border-radius: 10px;
}

.dropBox .form-group .sliderSmartMedia.mediaImage .videoDelete {
  position: absolute;
  top: -8px;
  right: -10px;
  font-size: 20px;
  color: #f20404;
  background-color: #fff;
  border-radius: 100px;
}

div#memberAdvance .editIcon i {
  color: var(--site-primary-color);
}

.effectEditSettings p.mt-4 span.float-end {
  border: 1px solid;
  border-radius: 100px;
  height: 30px;
  width: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
}

/*
.card-list {
  display: block;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
} */

.card-item {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.card-item.row.selectedEffectColor {
  padding-left: 10px;
}

.card-placeholder {
  background: transparent;
  /* border: 4px dashed #d0cec9; */
  min-height: 50px;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  opacity: 1;
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  opacity: 0.8;
  box-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-animating {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}

.btnPrimary {
  background-color: var(--primary-color) !important;
  border: var(--primary-color) !important;
}

.btnSecondary {
  background-color: var(--secondary-color) !important;
  border: var(--secondary-color) !important;
}

/* latest */

.tab-menu {
  text-align: center;
}

.tab-menu ul {
  text-align: center;
  border-radius: 100px;
  background: #f5f5f5;
  display: inline-block;
}

.tab-menu ul li {
  display: inline-block;
}

.tab-menu ul li a {
  text-decoration: none;
  /* background: rgb(243, 243, 243); */
  color: #333;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  min-width: 125px;
  border-radius: 100px;
}

.tab-menu ul li a.active {
  background: var(--primary-color);
  color: #fff;
}

.custom-model-main {
  text-align: center;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  opacity: 0;
  -webkit-transition:
    opacity 0.15s linear,
    z-index 0.15;
  -o-transition:
    opacity 0.15s linear,
    z-index 0.15;
  transition:
    opacity 0.15s linear,
    z-index 0.15;
  z-index: -1;
  overflow-x: hidden;
  overflow-y: auto;
}

.model-open {
  z-index: 99999;
  opacity: 1;
  overflow: hidden;
}

.custom-model-inner {
  -webkit-transform: translate(0, 60%);
  -ms-transform: translate(0, 60%);
  transform: translate(0, 60%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition:
    transform 0.3s ease-out,
    -webkit-transform 0.3s ease-out;
  display: inline-block;
  vertical-align: middle;
  width: 360px;
  margin: 0 auto;
}

.custom-model-wrap {
  display: block;
  width: 100%;
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  outline: 0;
  text-align: left;
  padding: 50px 25px;
}

.model-open .custom-model-inner {
  -webkit-transform: translate(0, 40%);
  -ms-transform: translate(0, 40%);
  transform: translate(0, 40%);
  position: relative;
  z-index: 999;
  height: 100%;
}

.model-open .bg-overlay {
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  height: 100vh;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.close-btn {
  position: absolute;
  right: 10px;
  top: -5px;
  cursor: pointer;
  z-index: 99;
  font-size: 30px;
  color: #333;
}

.pop-up-content-wrap .btn-group {
  background: #f3f3f3;
  border-radius: 100px;
}

.pop-up-content-wrap .btn-group .btn {
  color: #696969;
  min-width: 140px;
  border-radius: 100px !important;
  text-transform: uppercase;
  font-size: clamp(10px, 0.9vw, 14px);
}

.pop-up-content-wrap .btn-group .btn.active {
  background: var(--primary-color);
  color: #fff;
}

.pop-up-content-wrap .btn {
  box-shadow: none;
}

.pop-up-content-wrap .form-text {
  font-size: 1.1rem;
  margin: 1.3rem 0 0.5rem;
  color: #333;
}

.sendCode .btn {
  width: 100%;
}

.sendCode .btn.send {
  background: var(--primary-color);
  color: #fff;
}

.sendCode h6 {
  margin: 1rem 0;
  position: relative;
}

.sendCode h6:after {
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  bottom: 11px;
}

.sendCode span {
  position: relative;
  background: #fff;
  z-index: 1;
  padding: 0 10px;
}

.addContact {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.envelopeIcon {
  position: absolute;
  top: -35px;
  width: 70px;
  height: 70px;
  text-align: center;
  border-radius: 100px;
  left: 50%;
  margin-left: -40px;
  line-height: 70px;
  font-size: 25px;
  background: #fff;
  color: var(--primary-color);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.tab-teaser .form-control {
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-bottom: 1px solid #afafaf;
  border-radius: 0;
  padding-left: 0;
}

.sendCode .noThanks {
  color: #8080809e;
}

.tab-main-box figure img {
  width: 100px;
}

.borderRadius0 {
  border-radius: 0 !important;
}

.borderRadius2500 {
  border-radius: 25px 25px 0px 0px;
}

.bottomModal {
  max-width: 425px;
  margin: 0 auto !important;
  -webkit-transition:
    opacity 0.3s linear,
    bottom 0.3s ease-out !important;
  -moz-transition:
    opacity 0.3s linear,
    bottom 0.3s ease-out !important;
  -o-transition:
    opacity 0.3s linear,
    bottom 0.3s ease-out !important;
  transition:
    opacity 0.3s linear,
    bottom 0.3s ease-out !important;
  margin-bottom: 90px !important;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

#country-dropdown-menu {
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 282px;
}

header.CardHeaderFlat.css-9hq3fj {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.css-158tjlw {
  position: relative;
}

.css-tbd01i {
  width: 100%;
  position: relative;
  height: 170px;
  object-fit: cover;
}

.css-1lkdozs {
  left: 0px;
  position: absolute;
  width: 100%;
  bottom: 0px;
  z-index: 12;
}

.css-lsz7yh {
  bottom: 0px;
  left: 65%;
  position: absolute;
  right: 0px;
  top: 30%;
}

img.CardImage.css-u2kps4 {
  width: 90px;
}

.css-lsz7yh img {
  box-sizing: border-box;
  display: block;
  height: var(--chakra-sizes-full);
  left: 50%;
  object-fit: contain;
  object-position: 75% 50%;
  padding: 0 1rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: var(--chakra-sizes-full);
  z-index: 1;
}

.CardBox.css-159y9hz {
  /* margin: 20px; */
  text-align: left;
  border-bottom: 1px dashed var(--primary-color);
  z-index: 123;
  padding: 10px 20px 0px;
  position: relative;
  display: inline-block;
  width: 100%;
}

.conIcons a i {
  font-size: 12px;
}

.contText.mp-4 {
  text-align: left;
}

.CardBox span.CardName {
  font-size: 20px;
  font-weight: 600;
}

.CardBox span.CardName i {
  font-size: 16px;
}

.CardBox span.CardTitle {
  font-size: 16px;
  margin: 5px 0px;
  display: inline-block;
}

.inconText {
  display: flex;
  margin-bottom: 6px;
  padding-bottom: 6px;
  align-items: center !important;
}

.contText.mp-4 p {
  margin-bottom: 0px !important;
}

.CardBox span.CardName i {
  margin-right: 5px;
  color: var(--site-primary-color);
}

.conIcons {
  min-width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--site-primary-color);
  margin-right: 13px;
  border-radius: 50%;
}

.bizcardoneLink {
  color: #212529 !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 500;
}

.CardBox .CardDepartment {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color);
}

.introSection .boldText .text-break {
  font-size: clamp(10px, 0.9vw, 14px);
  text-align: left;
}

.CardIdentity.css-0 {
  margin-top: 5px;
  border-bottom: 2px solid #e3e3e3;
  padding-bottom: 10px;
}

/* free bizcard css end here */

.customeinnerCard .order-type button.btn {
  font-size: 12px;
  padding: 5px;
}

.previewImage {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  margin: 0px 0px 20px;
}

.previewImage img {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

.previewImage img.img-fluid:hover {
  transform: scale(1.5);
  transition: 0.5s;
}

div.col-lg-4[cdkScrollable] {
  max-height: 85vh;
  overflow-y: auto;
}

.embed-responsive video {
  width: 100%;
  height: 100px !important;
  object-fit: cover;
  border-radius: 10px;
}

.publishLogo {
  display: flex;
  border-bottom: 1px solid #eaeaea;
  padding: 10px 0px;
}

.borderBottomDashed {
  border-bottom: 1px dashed #eaeaea;
}

.borderTopDashed {
  border-top: 1px dashed #eaeaea;
}

.enterIntro {
  border-radius: 8px;
}

.accordion-body .custom-border-bottom .col-2 {
  padding: 0px;
}

.accordionButton {
  font-size: 16px;
  font-weight: 500;
  padding: 12px 10px;
  background: transparent;
  border: 0px;
  width: 100%;
  text-align: left;
  /* line-height: 24px; */
}

.accordionButton i {
  font-size: 16px;
}

.modal-content.AdditionalPage .modal-header {
  border-bottom: 2px solid #bfbfbf;
}

.AdditionalPage button.btn-close i {
  font-size: 20px;
  color: var(--site-primary-color);
}

.AdditionalPage .col-md-7 {
  position: relative;
  padding-left: 30px;
}

.AdditionalPage .custom-border-bottom:first-child {
  border-top: 0px !important;
}

.AdditionalPage .col-md-7::after {
  border-left: 2px solid #bfbfbf;
  content: "";
  position: absolute;
  height: 100%;
  top: 0px;
  left: 15px;
}

.yourListing {
  text-align: center;
}

.yourListing img {
  width: 100px;
  margin: 40px auto;
  display: block;
}

.yourBusiness {
  background: #f4f4ff;
  padding: 20px 20px 30px 20px;
  border-radius: 10px;
}

.yourBusiness button.btn {
  background: #cdcdcd;
  width: 50%;
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.yourBusiness h3 {
  font-size: 30px;
}

.yourBusiness p {
  font-size: 16px;
  margin: 20px 0px;
}

.yourListing h4 {
  font-size: 20px;
}

div#viewlisting {
  margin-bottom: 30px;
}

.yourListing button.btn.clickHere {
  background: #1c2d64;
}

.yourListing button.viewListingBtn {
  background: #fb5607;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
}

.receivedDetail {
  text-align: center;
  background: #f9f9f9;
  padding: 50px 0px;
  border-radius: 10px;
  margin-top: 15px;
  border: 1px solid #eaeaea;
  margin-bottom: 30px;
}

.receivedDetail h4 {
  font-size: 18px;
}

.receivedDetail img {
  width: 100px;
  display: block;
  margin: 50px auto;
}

.joiningCollection {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  margin-top: 15px;
  border: 1px solid #eaeaea;
  margin-bottom: 30px;
}

/* View Listing View Repsonses Css Start Here */

.entriesControl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(10px, 0.9vw, 14px);
  color: #6c757d;
}

.entriesControl select {
  width: 70px;
  font-size: clamp(10px, 0.9vw, 14px);
  padding: 2px 8px;
}

.editColumns.text-white.w-100 {
  background-color: #1c2d64;
  border-radius: 8px;
  padding: 8px;
}

.cardBox .table-responsive th {
  background-color: #f2f2f2;
  border: 1px solid #d6d6d6;
}

/* View Listing View Repsonses Css End Here */

.col-md-9.card {
  margin-bottom: 15px;
}

button.btn.primaryBgColor.text-white.font16 {
  border-radius: 8px;
  line-height: 20px;
  width: 100%;
  padding: 12px;
}

.headerClass {
  font-size: clamp(12px, 1.1vw, 18px);
  font-weight: 500;
  line-height: 25px;
}

.cardBoxShadow .resturentName.mb-0 {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 20px;
}

.HelpSection iframe {
  border-radius: 5px;
  width: 100%;
  height: 400px;
}

.accordionItem {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  border: 1px solid #d9d9d9;
}

.faqSection .accordionButton {
  font-weight: 400;
  background-color: #fff;
  box-shadow: none !important;
  position: relative;
  color: #000;
  padding: 10px;
}

.faqSection .accordionButton::after {
  content: "+";
  font-size: 24px;
  font-weight: 500;
  position: absolute;
  right: 10px;
  top: 45%;
  transform: translateY(-55%);
  color: #f9882e;
  background-image: none !important;
}

.accordionButton:not(.collapsed)::after {
  content: "-";
  font-size: 30px;
}

.accordionItem .accordion-body {
  padding-top: 0px;
}

.faqSection .accordionItem h2 {
  margin: 0px;
}

.QuickLinkSection ul li a {
  font-size: clamp(12px, 1.1vw, 15px);
  color: #1c2d64;
  border-bottom: 1px dashed #1c2d64;
  margin-bottom: 6px;
  display: inline-block;
  margin-left: 5px;
}

.QuickLinkSection ul li {
  list-style: auto !important;
  color: var(--site-primary-color);
}

.QuickLinkSection ul {
  padding: 0px;
  margin: 0px;
  padding-left: 15px;
}

.QuickLinkSection {
  height: 100vh !important;
  margin-bottom: 20px;
}

button.accordionButton.primaryColor:not(.collapsed)::after {
  content: initial;
}

.quickLinksCard a:hover {
  color: #f15a25 !important;
  border-color: #f15a25;
}

.quickLinksCardbtn {
  border-radius: 8px;
  margin-bottom: 50px;
  border: 1px solid #dfdfdf;
}

.sliderPageSetting button.nav-link.w-100.active {
  text-align: center;
}

.quickLinksCardbtn a {
  font-size: clamp(12px, 1vw, 18px);
  padding: 10px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(12px, 1.1vw, 18px);
  font-weight: 400;
  color: #000 !important;
  padding: 10px 10px;
}

.quickLinksCard a {
  color: #2f2529;
  font-size: clamp(12px, 1.1vw, 18px);
  font-weight: 500;
  border-bottom: 2px dashed #1c2d64;
  font-weight: 400;
  margin-bottom: 10px !important;
  display: inline-block;
  transition: 0.3s;
}

.quickLinksCardbtn.SelectedLink a {
  color: #fff !important;
}

.quickLinksCardbtn.SelectedLink {
  background-color: #1c2d64;
}

.selectedNavigation.primaryColor i {
  color: #fff !important;
}

.quickLinksCard.SelectedLink a {
  color: #f15a25 !important;
  border-color: #f15a25;
}

nav.nav.flex-column .nav-link.cursorPointer i {
  vertical-align: middle;
  margin-right: 8px !important;
}

/* .whatsAppIcon {
    position: fixed;
    right: 30px;
    z-index: 123;
    bottom: 30px;
}

.whatsAppIcon a {
    background-color: #3fba38;
    padding: 12px 20px;
    border-radius: 100px;
    color: #fff;
    font-size: clamp(12px, 1.1vw, 16px);
}

.whatsAppIcon a i {
    vertical-align: middle;
    margin-right: 5px;
    font-size: 30px;
    margin-top: -3px;
} */

.whatsAppIcon {
  position: fixed;
  right: 20px;
  z-index: 123;
  bottom: 10px;
  animation: float 3s ease-in-out infinite;
}

.whatsAppIcon a {
  background-color: #3fba38;
  border-radius: 100px;
  color: #fff;
  font-size: clamp(12px, 1.1vw, 16px);
  box-shadow: 0 0 0 rgba(63, 186, 56, 0.4);
  animation: pulse 2s infinite;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
  padding: 12px 15px;
}

.whatsAppIcon a i {
  vertical-align: middle;
  font-size: 30px;
}

.whatsAppIcon .btn-text {
  display: none;
}

.whatsAppIcon a:hover .btn-text {
  display: inline;
  transition: 0.3s;
}

.whatsAppIcon a:hover i {
  animation: wiggle 0.6s ease-in-out;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(63, 186, 56, 0.5);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(63, 186, 56, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(63, 186, 56, 0);
  }
}

@keyframes wiggle {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(15deg);
  }

  50% {
    transform: rotate(-15deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0);
  }
}

nav.nav.flex-column.secondaryOptions {
  display: flex !important;
  flex-direction: initial !important;
}

.secondaryOptions a.nav-link.cursorPointer {
  /* display: inline-block; */
  width: 50%;
  display: block;
  border-top: 0px !important;
  border-right: 1px solid #c3c3c3;
  text-align: center;
}

.secondaryOptions a.nav-link.cursorPointer i {
  display: block;
  font-size: 30px !important;
}

.secondaryOptions a.nav-link:nth-child(2) {
  border-right: 0px;
}

.secondaryOptions .selectedNavigation.primaryColor {
  margin-top: 0px;
}

.AdditionalPage .modal-body {
  overflow-y: scroll !important;
  height: auto;
  max-height: 400px;
}

.justShowBtn {
  color: #fff;
  border: 2px solid #1c2d64;
  border-radius: 100px;
  position: relative;
  outline: none;
  cursor: pointer;
  width: 100%;
  padding: 10px;
  font-size: clamp(16px, 1.6vw, 20px);
  z-index: 12;
}

.card.lightBlue.cursorPointer {
  background-color: #eee6ff;
  box-shadow: 0px 2px 3px #d1c5eb;
  z-index: 1;
}

.lightGrayColor {
  color: #979797;
}

/* Booking Onboarding css start here */

.bookingHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 10px;
}

.iconGroupBtn .navBtn {
  background: none;
  font-size: 18px;
  border: 1px solid gray;
  color: #000;
  border-radius: 100px;
  height: 38px;
  width: 38px;
  margin-right: 15px;
}

.bookingHeader .logo {
  height: 38px;
}

.bookingContent .bookingTitle {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
}

.bookingContent .bookingSubtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 1.25rem;
}

.bookingContent .categoriesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 15px 18px;
  margin-bottom: 10px;
  width: 100%;
}

.categoriesGrid .categoryCard {
  background: #f6f8fb;
  border: none;
  border-radius: 12px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  /* min-height: 75px; */
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid #d3d3d3;
}

.categoriesGrid .categoryCard:hover {
  background: #e3eaff;
}

.categoryCard .categoryImg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 7px;
  border: 1px solid #dfdfdf;
}

.categoryCard .categoryLabel {
  font-size: 15px;
  color: #19152b;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 10px;
}

.bookingContent .continueBtn {
  width: 100%;
  background: #fc6722;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 0;
  border: none;
  border-radius: 30px;
  margin-top: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.bookingContent .continueBtn:hover {
  background: #e76110;
}

.card.wizardBox {
  padding: 15px;
}

.teamSizeOptions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 10px;
}

.teamSizeOption {
  background: #f6f8fb;
  border: 1px solid #e1e8ed;
  border-radius: 9px;
  padding: 19px 20px;
  font-size: 16px;
  color: #18152b;
  text-align: left;
  font-weight: 500;
  transition:
    background 0.2s,
    border 0.2s;
  cursor: pointer;
}

.teamSizeOption.active {
  border: 2px solid var(--site-tertiary-color);
  background: var(--site-secondary-color);
}

.teamSizeOption:hover {
  background: #e3eaff;
  border-color: #a9bddb;
}

.noServicesContainer {
  max-width: 420px;
  margin: 56px auto 0 auto;
  text-align: center;
}

.noServicesContainer .addServiceBtn {
  padding: 12px 0;
  width: 70%;
  background: #fc6722;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 28px;
  cursor: pointer;
  transition: background 0.18s;
}

.noServicesContainer .addServiceBtn:hover {
  background: #e76110;
}

.noServicesContainer .noServicesDivider {
  border: none;
  border-top: 2px dashed #959595;
  margin: 32px auto 38px auto;
  max-width: 100%;
  background-color: #fff;
}

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

.noServicesContent .noServicesIcon {
  background: #f6f8fb;
  border-radius: 12px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.noServicesContent .noServicesTitle {
  font-size: 17px;
  color: #19152b;
  font-weight: 600;
  margin-bottom: 7px;
}

.noServicesContent .noServicesSubtitle {
  font-size: 15px;
  color: #8b8895;
  margin-bottom: 2px;
}

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

.serviceFormContainer .serviceImageUpload {
  border: 1.5px solid #e1e8ed;
  background: #f6f8fb;
  border-radius: 8px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-bottom: 9px;
  position: relative;
  transition: border 0.2s;
}

.serviceImageUpload:hover {
  border-color: #a9bddb;
}

.serviceFormContainer .serviceImageUploadIcon {
  font-size: 26px;
}

.serviceFormContainer .serviceImageUploadText {
  font-size: clamp(10px, 0.9vw, 14px);
  color: #868ca0;
}

.serviceFormContainer .serviceImageInput {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.serviceFormContainer .serviceInput {
  width: 100%;
  border: 1.5px solid #e1e8ed;
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 15px;
  color: #19152b;
  background: #fff;
  margin-bottom: 8px;
  outline: none;
  transition: border 0.18s;
}

.serviceFormContainer .serviceInput:focus {
  border-color: #a9bddb;
}

.serviceInputWithIcon {
  position: relative;
  display: flex;
  align-items: center;
}

.serviceFormContainer .serviceInputIcon {
  position: absolute;
  left: 14px;
  color: #b0b5bd;
  font-size: 15px;
  pointer-events: none;
}

.serviceFormContainer .serviceInputWithIcon .serviceInput {
  padding-left: 32px;
  margin-bottom: 0;
}

.serviceFormContainer .serviceTextarea {
  width: 100%;
  border: 1.5px solid #e1e8ed;
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 15px;
  color: #19152b;
  min-height: 60px;
  background: #fff;
  resize: vertical;
  outline: none;
  transition: border 0.18s;
}

.serviceFormContainer .serviceTextarea:focus {
  border-color: #a9bddb;
}

.serviceListContainer .serviceCard {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(20, 29, 54, 0.06);
  border: 1px solid #e9ebf0;
  margin-bottom: 18px;
  padding: 12px 18px 12px 12px;
  gap: 15px;
  position: relative;
}

.serviceCard .serviceCardImg {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  object-position: top;
}

.serviceCard .serviceCardInfo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.serviceCardInfo .serviceCardTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serviceCardPriceRow {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.serviceCardPriceRow .serviceCardPrice {
  font-size: 18px;
  font-weight: 600;
}

.serviceCardPriceRow .serviceCardOldPrice {
  font-size: 15px;
  color: #686d7e;
  text-decoration: line-through;
  font-weight: 400;
}

.serviceCardInfo .serviceCardDetails {
  font-size: 13px;
  color: #7a7985;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 3px;
}

.serviceCardInfo .serviceCardDetails span {
  line-height: 18px;
}

.serviceCardActions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 13px;
  margin-left: 14px;
  margin-top: 2px;
}

.serviceCardActions .serviceEditBtn,
.serviceCardActions .serviceDeleteBtn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 15px;
}

.serviceCardActions .serviceEditBtn i {
  color: #3b78ed;
}

.serviceCardActions .serviceDeleteBtn i {
  color: #fb4435;
}

.serviceListContainer .addMoreBtn {
  display: block;
  width: 98%;
  margin: 20px auto 0 auto;
  background: #fff !important;
  border: 1.5px solid #fe702e !important;
  color: #fe702e !important;
  font-size: 18px !important;
  border-radius: 24px !important;
  padding: 12px 0 !important;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.serviceListContainer .addMoreBtn:hover {
  background: #fe702e;
  color: #fff;
}

.congratsContainer {
  padding: 24px 12px 36px 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(23, 32, 47, 0.07);
  text-align: center;
}

.congratsContainer .congratsLogo {
  height: 48px;
  margin-bottom: 8px;
}

.congratsHeadline {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 15px;
  margin-top: 40px;
}

.wizardBox .addMoreBtn {
  /* display: inline-flex; */
  align-items: center;
  gap: 6px;
  padding: 5px 15px;
  border-radius: 8px;
  background-color: #404852;
  color: #ffffff;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
}

.wizardBox .addMoreBtn:hover {
  background-color: #1f272b;
}

.wizardBox .addMoreBtn:active {
  transform: scale(0.97);
}

.wizardBox .addMoreBtn .icon {
  vertical-align: middle;
}

button.congratsPreviewBtn.manageWebsite {
  background-color: #3a1593;
  margin-bottom: 50px;
  margin-top: 25px;
}

.creatingYourWebsite img {
  width: 250px;
}

.congratsUser {
  color: var(--site-primary-color);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 30px;
}

.congratsStoreInfo {
  font-size: 20px;
  margin-bottom: 20px;
}

.congratsStoreName {
  font-weight: 600;
}

.congratsBrand {
  font-weight: 700;
}

.congratsNote {
  color: #949494;
  font-size: clamp(10px, 0.9vw, 14px);
  margin-bottom: 20px;
  font-weight: 300 !important;
}

.congratsLink {
  color: #fc6722;
  text-decoration: underline;
}

.congratsLink:hover {
  color: var(--site-primary-color);
  text-decoration: underline;
}

.congratsPreviewBtn {
  background: #fc6722;
  color: #fff;
  border: none;
  width: 77%;
  margin: 0 auto 16px auto;
  font-size: 16px;
  border-radius: 24px;
  font-weight: 500;
  transition: background 0.18s;
  cursor: pointer;
  display: block;
  padding: 12px 0px;
}

.congratsPreviewBtn:hover {
  background: #d9550c;
}

.congratsHelpBtn {
  width: 77%;
  padding: 12px 0;
  background: #fff;
  color: #fc6722;
  border: 1.2px solid #fc6722;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 500;
  margin: 0 auto 0 auto;
  cursor: pointer;
  transition:
    background 0.16s,
    color 0.16s;
  display: block;
}

.congratsHelpBtn:hover {
  background: #fc6722;
  color: #fff;
}

.card.wizardBox.bookingContent .btn-primary {
  border-radius: 10px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  background-color: var(--site-primary-color) !important;
  border-color: var(--site-primary-color) !important;
  height: 30px;
}

.editEffect label.form-label.font14 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .border-start-0 {
  border-left: 0 !important;
  border-radius: 0px 10px 10px 0px !important;
}

/* Booking Onboarding css end here */

.congratulationsPage {
  min-height: 100vh;
  align-items: center;
  display: flex;
}

section.congratulationsPage:after {
  position: absolute;
  content: "";
  border-left: 1px solid #e2e2e2;
  min-height: 100vh;
  left: 50%;
  transform: translateX(-50%);
}

.effectPrimarySettings .input-group-text {
  height: 42px;
  border-right: 0px;
  border-radius: 6px 0px 0px 6px;
  background-color: transparent;
  font-size: clamp(12px, 0.9vw, 14px) !important;
}

.effectPrimarySettings .input-group input.form-control {
  border-left: 0px;
  border-radius: 0px 10px 10px 0px !important;
}

.detectMyCountry button.btn {
  border: 1px solid #0d47a1;
  border-radius: 100px;
  font-size: clamp(10px, 0.9vw, 14px);
  font-weight: 500;
  padding: 5px 8px;
}

.detectMyCountry {
  position: absolute;
  right: 20px;
}

.detectMyCountry button.btn i {
  vertical-align: middle;
  margin-right: 5px;
  color: #0d47a1;
  font-size: 18px;
}

.gettingStartedSection {
  display: flex;
  align-items: center;
}

.gettingStartedSection img {
  width: 120px;
}

.gettingHeader h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  margin-bottom: 5px;
}

.gettingHeader p {
  margin-bottom: 0px;
  font-size: clamp(13px, 1.2vw, 16px);
  color: #9e9e9e;
}

.gettingStartedList ul {
  margin: 0px;
  padding: 0px;
  padding-left: 20px;
}

.gettingStartedList ul li {
  padding-bottom: 10px;
}

.gettingStartedList ul li a {
  color: #474747;
  font-size: clamp(13px, 1.2vw, 16px);
  border-bottom: 1px dashed #f15a25;
  padding-bottom: 2px;
}

.gettingStartedList ul li i {
  margin-right: 10px;
  vertical-align: middle;
  color: #f15a25;
}

.bigDotLogoEnd p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
  line-height: 14px;
  text-align: right;
}

.bigDotLogoEnd {
  text-align: center;
  padding: 10px;
  border-top: 1px solid #cecece;
}

.aiParagraph {
  font: 45px / 1.2 var(--primary-medium);
  font-size: clamp(10px, 0.9vw, 14px);
  color: transparent;
  background: linear-gradient(
    115deg,
    #3e31cf,
    rgb(226, 3, 72) 20%,
    rgb(255, 144, 27) 42%,
    #1c2d64 63%,
    rgb(236, 123, 3) 83%,
    rgb(222, 115, 2)
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradientMove 4s linear infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

.animationAddressLoader video {
  width: 110px;
}

.disabledButton {
  background: #cccccc !important;
}

.btnXs {
  padding: 4px 10px !important;
  border-radius: 10px !important;
}

.btnSm {
  padding: 4px 8px !important;
  border-radius: 4px !important;
  line-height: 22px !important;
  font-size: 13px !important;
}

.btnSmall {
  padding: 4px 8px !important;
  border-radius: 4px !important;
  line-height: 22px !important;
  font-size: 13px !important;
}

.btnMd {
  padding: 8px 10px !important;
  border-radius: 10px !important;
  line-height: 22px !important;
  font-size: 14px !important;
}

.btnLg {
  padding: 10px 10px !important;
  border-radius: 10px !important;
}

.customBtnXlg {
  padding: 12px 10px !important;
  border-radius: 12px !important;
}

.btnWarning {
  background-color: #ffca2c !important;
}

.btnSuccess {
  background-color: #198754 !important;
  color: #fff;
}

.btnProceed {
  background-color: #16a34a !important;
}

.btnCancel {
  background-color: #ffdde0 !important;
  color: #ef1212 !important;
}

.btnDisabled {
  background-color: #c7c7c7 !important;
  border: 0px !important;
}

.bottomBandContainer {
  position: fixed;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
  padding: 10px 20px;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bottomBandContainer .btn.btnLight {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  color: #212529;
}

.btnLight:hover {
  background-color: #e9e9e9;
}

.bottomBandContainer .btn {
  color: #fff;
}

/* local css start here sharing y amit */

.cErrorMsg {
  color: #d00000;
  font-size: 12px;
}

.background-failure {
  background: #f44336;
  color: #ffffff;
}

.background-success {
  background: #2196f3;
  color: #ffffff;
}

.highlight-today a {
  background-color: #ffcc00 !important;
  color: white !important;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.imag-card {
  border-radius: 8px;
  cursor: pointer;
  color: #ffffff;
  padding: 0.5rem;
  background-color: #f1f1f1;
  position: relative;
  height: 120px;
  text-align: center;
  border: 3px dotted #ccc;
}

.imag-card-body {
  height: auto;
}

.remove-btn {
  background-color: #fff;
  display: flex;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: red;
  position: absolute;
  top: -8px;
  right: -10px;
  z-index: 1;
}

.table thead {
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

/* local css start here sharing y amit */
.btnTeal {
  background-color: #0d9488 !important;
}

.btnIndigo {
  background-color: #6366f1 !important;
}

.btnBlue {
  background-color: #3b82f6 !important;
}

.acceptBtn {
  background-color: #16a34a !important;
}

.btnTeal:hover {
  background-color: #0f766e;
}

a.viewIcon i {
  color: #0f766e;
}

a.copyIcon i {
  color: #6366f1;
}

.btnIndigo:hover {
  background-color: #4f46e5;
}

.btnBlue:hover {
  background-color: #2563eb;
}

.acceptBtn:hover {
  background-color: #15803d;
}

.activeSuccess {
  background: #dcfce7 !important;
  color: #166534;
  font-weight: 500;
  border-radius: 30px !important;
  padding: 2px 8px !important;
}

.categoryCard:hover,
.categoryCard.active {
  box-shadow: 0 4px 16px #4200881a;
  border-color: var(--site-primary-color);
}

.suggestions {
  position: absolute;
  height: auto;
  max-height: 280px;
  width: 100%;
  overflow-y: auto;
  z-index: 123;
  background-color: #fff;
  padding: 5px 10px;
  border: 1px solid #cdcdcd;
  border-radius: 10px;
  top: 45px;
}

.suggestion-item {
  padding: 8px 12px !important;
  transition: background 0.2s;
}

form.example-form {
  position: relative;
}

.mark,
mark {
  padding: 0px;
}

.suggestions .suggestion-item {
  cursor: pointer;
  padding: 2px 0px;
  font-size: clamp(13px, 1.1vw, 14px);
}

/* shared by amit css start here */
.categoriesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/*
.categoryCard {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-height: 72px;
    background: #fff;
    border: 1.5px solid #ececec;
    border-radius: 16px;
    padding: 16px 20px;
    transition: box-shadow 0.25s;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    gap: 16px;
} */

.categoryCard:hover,
.categoryCard.active {
  box-shadow: 0 4px 16px rgba(66, 0, 136, 0.1);
  border-color: #865dff;
}

/* .categoryImg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
} */

/* .categoryLabel {
    font-size: 1rem;
    font-weight: 600;
    color: #231742;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;
    min-width: 0;
} */

/* shared by amit css end  here */

.customBtnMargin .btnIndigo.btnMd {
  padding: 10px !important;
}

.customBtnMargin .acceptBtn.btnMd {
  padding: 10px !important;
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 0px !important;
  margin: 0px !important;
}

.mat-form-field-appearance-outline .mat-form-field-wrapper {
  margin: 0px !important;
  padding: 0px !important;
}

/* --- Custom Components css start here --- */

/* Video Placeholder Styling */
.videoPlaceholder {
  background-color: #000;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio */
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("https://placehold.co/800x450/333/666?text=Video+Preview");
  background-size: cover;
  background-position: center;
}

.videoPlaceholder .playBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ffffff;
  opacity: 0.8;
  cursor: pointer;
}

.videoControls {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

/* Card Styling */
.customCard {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); */
  border: 1px solid #dfdfdf;
}

.cardIcon {
  font-size: 1.2rem;
  margin-right: 8px;
}

.cardTitle {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.cardText {
  font-size: 0.9rem;
  color: #6c757d;
  margin-top: 10px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Buttons */
.btnCustomLg {
  width: 100%;
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  border: none;
  margin-top: auto;
  /* Pushes button to bottom of card */
}

/* Color Specifics */
.btnPurpleBlock {
  background-color: var(--primary-purple);
  color: #ffffff;
}

.btnPurpleBlock:hover {
  background-color: #3b1369;
  color: #ffffff;
}

.btnShare {
  background-color: #bf55ec;
  color: #ffffff;
}

/* Lighter purple */
.btnShare:hover {
  background-color: #a642d3;
  color: #ffffff;
}

.btnSave {
  background-color: #fd7e14;
  color: #ffffff;
}

.btnSave:hover {
  background-color: #e36a08;
  color: #ffffff;
}

.btnExplore {
  background-color: #dc3545;
  color: #ffffff;
}

.btnExplore:hover {
  background-color: #bb2d3b;
  color: #ffffff;
}

.btnSetup {
  background-color: #00d285;
  color: #ffffff;
}

.btnSetup:hover {
  background-color: #14b372;
  color: #ffffff;
}

.btnActivate {
  background-color: #ffc107;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 6px 20px;
  border-radius: 20px;
}

.btnActivate:hover {
  background-color: #e0a800;
  color: #ffffff;
}

/* Icon Colors */
.iconYellow {
  color: #ffc107;
}

.iconPurple {
  color: #bf55ec;
}

.iconOrange {
  color: #fd7e14;
}

.iconRed {
  color: #dc3545;
}

.iconGreen {
  color: #00d285;
}

/* Footer */
.footerBtnBlack {
  background-color: black;
  color: #ffffff;
  border-radius: 8px;
  padding: 10px 25px;
}

.footerBtnOutline {
  background-color: transparent;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 25px;
}

.pageHeader .headerText {
  margin-left: 50px;
}

.pageHeader .bigdotCustomLogo {
  max-height: 55px;
}

.headerText .smallText {
  font-size: 16px;
}

.headerText .mainTitle {
  font-size: 22px;
  font-weight: 600;
  color: #4b2bb5;
  position: relative;
}

.headerText .mainTitle:after {
  position: absolute;
  border-bottom: 3px solid #40483d;
  content: "";
  width: 80px;
  bottom: -10px;
  left: 0px;
}

.pageHeader .helpBtn {
  background: #f58025;
  color: #fff;
  border: none;
  padding: 10px 28px;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s;
}

.pageHeader .helpBtn:hover {
  background: #e46f16;
}

.howToLoginSection .iconCircle i {
  width: 40px;
  height: 40px;
  background: #4c1d95;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.howToLoginSection {
  padding-bottom: 20px;
}

.howToLoginSection .title {
  font-weight: 600;
  color: #000;
  margin-left: 10px;
  font-size: 20px;
}

.howToLoginSection .desc {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
}

.pageHeader {
  border-bottom: 1px solid #d7d7d7;
}

/* --- Custom Components css end here --- */

.gallerySection {
  text-align: center;
  border: 1px dashed #635ef7;
  border-radius: 10px;
  background: #f5f6fe;
  padding: 24px 0 18px 0;
  margin-bottom: 35px;
}

.gallerySection .uploadIcon {
  font-size: 30px;
  margin-bottom: 5px;
}

.gallerySection .uploadInfo {
  color: #7878a0;
  font-size: 14px;
  margin-bottom: 12px;
}

.chooseFilesButton {
  background: #404852;
  color: #fff;
}

.chooseFilesButton:hover {
  color: #fff;
}

.buttonRow {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.backButton {
  border: 1px solid #cccccc;
  color: var(--site-tertiary-color);
}

/* invoice bill payment css start here  */

.vendorDropdownMenu {
  width: 100%;
  background: #fff;
  border: 1px solid #e3e7ed;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(90, 130, 193, 0.09);
  padding: 10px;
}

.vendorOption {
  display: flex;
  align-items: center;
  background: #2b80fa;
  padding: 0.7rem 1rem;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 8px;
  color: #fff;
}

.vendorDropdownMenu .dropdown-item.vendorOption:focus,
.dropdown-item.vendorOption:hover {
  color: #fff !important;
  background-color: #2b80fa !important;
}

.vendorDetails h3.vendorName {
  font-size: 20px;
  margin-bottom: 0px;
}

.vendorAvatar {
  margin-right: 10px;
}

.avatarCircle {
  background: #efeefd;
  color: #4251ad;
  font-weight: bold;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-right: 10px;
}

.vendorEmail {
  color: #fff;
  font-size: 14px;
  margin-bottom: 2px;
  padding-right: 10px;
  border-right: 1px solid #fff;
  margin-right: 10px;
}

.paymentAlert {
  background-color: #ecf1f7;
  padding: 15px 10px;
  border-radius: 8px;
}

.vendorCheck {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.vendorAddNew {
  background: #fff;
  color: #2b80fa;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-weight: 500;
  border: none;
}

.addNewText {
  font-size: 15px;
}

.settingIcon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* invoice bill payment css end here  */

/* auto post css start here shared by kanchan */

.crousalSection {
  border-radius: 8px;
  position: relative;
  background: #eeebf4;
  padding: 10px;
}

.crousalSectionTitle {
  font-weight: 700;
  color: #000;
  margin-bottom: 15px;
  padding-left: 5px;
}

.eventCard {
  border: none;
  background: transparent;
  transition: transform 0.3s ease;
  padding: 5px;
}

.eventCard:hover {
  transform: translateY(-5px);
}

.eventTitle {
  font-size: 14px;
  font-weight: 600;
  color: #4b4747;
  margin: 10px 0 5px 0;
  text-align: start;
}

.carousel-control-prev,
.carousel-control-next {
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 5;
}

.carousel-control-prev i,
.carousel-control-next i {
  color: #333;
  font-size: 14px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.carousel-control-prev {
  left: -10px;
}

.carousel-control-next {
  right: -10px;
}

/* --------------------------- */
.sectionTitle {
  font-weight: 600;
  font-size: 18px;
}

.eventImage {
  width: 265px;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
}

.templateCard {
  border: 1px solid #eee;
  border-radius: 14px;
  transition: 0.3s;
  text-align: center;
}

.templateTitle {
  text-align: start;
  padding: 0px 10px;
}

.templateDesc {
  text-align: start;
  padding: 0px 10px;
}

.templateCard:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.templateImage {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
}

.autopostBtnPrimary {
  background: #ff5c2c;
  color: #fff;
  border-radius: 20px;
  height: 40px;
  font-weight: 600;
}

/* Grey full width line */
.postTemplatesHeader::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #dcdcdc;
  z-index: 1;
}

/* Pink small line (on top of grey) */
.postTemplatesHeader::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55px;
  height: 3px;
  background: #e72b80;
  z-index: 2;
}

.searchInputGroup .form-control {
  box-shadow: none;
  font-size: 14px;
}

.searchInputGroup .input-group-text {
  background: #fff;
  cursor: pointer;
}

.searchInputGroup i {
  font-size: 14px;
  color: #666;
}

.postPreviewCard {
  border-radius: 14px;
  background: #fff;
  padding: 20px 0px;
}

.postPreviewImage {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.actionBtn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: 0.2s;
}

/* Purple button (pen icon) */
.actionEditBtn {
  background: #824dab;
}

/* Grey / Brownish button (sliders icon) */
.actionSettingsBtn {
  background: #5a524c;
}

/* Pink button (calendar icon) */
.actionCalendarBtn {
  background: #820a48;
}

.actionBtn:hover {
  transform: translateY(-3px);
}

/* Right Panel */
.customizationBox {
  border-radius: 14px;
  background: #fff;
}

.colorDot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
}

.addColor {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  border: 1px dashed #666;
}

/* Download Buttons */
.downloadBtn {
  background: #fff;
  border-radius: 10px;
  padding: 12px 0;
  border: 1px solid #ddd;
  transition: 0.2s;
}

.downloadBtn:hover {
  background: #f8f8f8;
}

/* Social Share Buttons */
.shareBtn {
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 500;
}

.whatsappBtn {
  background: #25d366;
}

.instagramBtn {
  background: #c13584;
}

.facebookBtn {
  background: #1877f2;
}

.linkedinBtn {
  background: #0a66c2;
}

.whatsappBtn:hover {
  background: #1ebe5b;
}

.instagramBtn:hover {
  background: #b32e78;
}

.facebookBtn:hover {
  background: #166fe1;
}

.linkedinBtn:hover {
  background: #095bb5;
}

.postTemplatesHeader {
  position: relative;
  padding-bottom: 6px;
  width: 180px !important;
}

.sectionTitle {
  font-weight: 600;
  font-size: 18px;
}

.carousel-inner .row .col-md-3:nth-child(4) {
  border-radius: 10px 20px 20px 10px !important;
}

.navBarWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0px;
}

.actionButton {
  border-radius: 50px;

  padding: 10px 24px;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition: all 0.3s ease;
}

.goPreviousBtn {
  background-color: #ffffff;
  border: 1px solid #000;
  color: #000;
}

.goPreviousBtn:hover {
  background-color: #f0f0f0;
}

.nextStepBtn {
  background-color: #3b1d82;
  border: 1px solid #3b1d82;
  color: #ffffff;
  margin-left: 15px;
}

.nextStepBtn:hover {
  background-color: #2a1260;
  color: #ffffff;
}

.switchCalendarBtn {
  background-color: #ffffff;
  border: 1px solid #000;
  color: #000;
}

.switchCalendarBtn:hover {
  background-color: #f0f0f0;
}

.confirmBtn {
  background-color: #28a745;
  border: 1px solid #28a745;
  color: #ffffff;
  margin-left: 15px;
}

.confirmBtn:hover {
  background-color: #218838;
  color: #ffffff;
}

/* auto post css end here shared by kanchan */

/* list view accounting css start here */

.featureCard {
  border: 1px solid #cddaff;
  border-radius: 8px;
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.featureCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primaryDark);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.featureCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--primaryLight);
}

.featureCard:hover::before {
  opacity: 1;
}

/* Card Icon Wrapper */
.cardIconWrapper {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardIconWrapper .cardIcon {
  width: 100%;
  height: 100%;
  padding: 0px;
}

.featureCard .cardTitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
}

.cardDescription {
  font-size: 15px;
  margin-bottom: 5px;
}

.cardFeatureList {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.cardFeatureList li {
  position: relative;
  cursor: pointer;
  padding-left: 0px;
  color: #8d8989;
  font-size: 15px;
  margin-left: 15px;
  line-height: 1.5;
  margin-top: 10px !important;
  list-style: disc !important;
}

/* .cardFeatureList li::before {
    content: '';
    position: absolute;
    left: 0;
    color: var(--bulletColor);
    font-weight: 700;
} */

.cardFeatureList li:last-child {
  margin-bottom: 0;
}

/* Individual Card Accent Colors (Optional Hover Effect) */
.initialSetupCard:hover {
  border-left: 3px solid #3b82f6;
}

.masterDataCard:hover {
  border-left: 3px solid #8b5cf6;
}

.salesWorkflowCard:hover {
  border-left: 3px solid #10b981;
}

.purchaseWorkflowCard:hover {
  border-left: 3px solid #f59e0b;
}

.accountingCard:hover {
  border-left: 3px solid #ec4899;
}

.settingsCard:hover {
  border-left: 3px solid #6366f1;
}

/* Accessibility - Focus States */
.featureCard:focus-within {
  outline: 2px solid var(--primaryDark);
  outline-offset: 2px;
}

/* Print Styles */

.orderType {
  border-radius: 10px;
  font-size: 14px;
  background-color: #ebebeb;
  width: auto;
  margin-top: 30px;
  padding: 5px;
  max-width: max-content;
}

.orderType .floatRight.active {
  background: #f15a25;
  background-size: 250% !important;
  border: 0px;
  color: #fff;
}

.orderType button.btn.floatRight {
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}

/* list view accounting css end here */

.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 20px;
  background: #fff;
  font-family: sans-serif;
  text-align: center;
}

.icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.custom-icon {
  width: 80px;
  height: 80px;
  stroke: #a0b7d8;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-fill {
  fill: #f1f5f9;
}

.bg-white {
  fill: #ffffff;
}

.icon-text {
  font-family: Arial, sans-serif;
  font-weight: bold;
  fill: #334155;
  stroke: none;
}

.backBtn {
  min-width: 90px;
}

.uploadPreviewContainer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between;
  gap: 6px;
}

.uploadPreviewContainer .uploadBox {
  width: 100% !important;
  height: 130px;
  border: 1px solid #ccc;
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.uploadPreviewContainer .circleIcon {
  width: 50px;
  height: 50px;
  margin: 0 auto 8px;
  background-color: var(--site-primary-color);
  border-radius: 50%;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
}

.uploadPreviewContainer .circleIcon input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.uploadPreviewContainer .uploadLabel {
  font-size: 14px !important;
  color: var(--site-primary-color) !important;
  margin: 0 !important;
}

.uplodingImages .imageDelete {
  color: red;
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 20px;
}

.uplodingImages {
  position: relative;
}

.uplodingImages img {
  width: 100% !important;
  height: 120px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #e5e5e5;
}

/* partnar enquiry css start here*/

.customFocus:focus {
  outline: none;
  box-shadow: none;
}

.font30 {
  font-size: 30px;
  line-height: 45px;
}

.font21 {
  font-size: 22px;
  line-height: 33px;
}

.font20 {
  font-size: 20px;
  line-height: 30px;
}

.font19 {
  font-size: 19px;
  line-height: 23px;
}

.font16 {
  font-size: 16px;
  line-height: 24px;
}

.font18 {
  font-size: 18px;
  line-height: 27px;
}

.blackColor {
  color: #000000;
}

.customPurple {
  color: #3a1593;
}

.customPurpleBg {
  background-color: #3a1593 !important;
}

.thickPurpleBorder {
  border-bottom: 5px solid #3a1593;
}

.topBorderRadius5 {
  border-radius: 5px 5px 0px 0px;
}

/* Main CSS */

.step {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: cream;
}

.v-stepper {
  position: relative;
  /*   visibility: visible; */
}

.v-stepper .circle {
  padding-top: 15px;
  color: #b6b6b6;
}

/* regular step */
.step .circle {
  background-color: #ffffff;
  border: 1px solid #b6b6b6;
  border-radius: 100%;
  width: 64px;
  /* +6 for border */
  height: 64px;
  display: inline-block;
}

.step .line {
  top: 81px;
  left: 30px;
  /*   height: 120px; */
  height: 100%;

  position: absolute;
  border-left: 1px solid #b6b6b6;
}

.step.completed .circle {
  visibility: visible;
  color: #ffffff !important;
  background-color: #3a1593;
  border-color: #3a1593;
}

.step.completed .line {
  border-left: 3px solid #3a1593;
}

.step.active .circle {
  visibility: visible;
  color: #3a1593;
  border-color: #3a1593;
}

.step.empty .circle {
  visibility: hidden;
}

.step.empty .line {
  top: 0;
  height: 150%;
}

.step:last-child .line {
  border-left: 1px solid #b6b6b6;
  z-index: -1;
  /* behind the circle to completely hide */
}

.content {
  margin-left: 20px;
  display: inline-block;
}

/* My Custom CSS */

.cursorPointer {
  cursor: pointer !important;
}

.form-check-input:checked {
  background-color: #3a1593;
  border-color: #3a1593;
}

/* Google Transale Customization */

#google_translate_element select {
  background-color: #fbf5ff;
  color: #3a1593;
  font-weight: 500 !important;
  font-family: "Bricolage Grotesque", serif !important;
  border: none;
  border-radius: 3px;
  padding: 6px 8px;
}

.goog-logo-link {
  display: none !important;
}

.goog-te-gadget {
  color: transparent !important;
}

/* Google Transale Customization Ends */

.wizardFormHeading {
  color: #334155 !important;
  font-size: clamp(13px, 0.9vw, 14px) !important;
  margin-bottom: 1px !important;
}

.announcementLink {
  text-decoration: none !important;
  font-weight: 600;
  color: #0a766e;
}

.alert a {
  text-decoration: none !important;
  color: #ffdf81;
  font-weight: 600;
}

.wizardHeading {
  font-weight: 500 !important;
  font-size: 19.5px;
  line-height: 29px;
  color: #242424;
}

.wizardSubmitButton {
  position: relative !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 250ms !important;
  align-items: center !important;
  padding: 10px 20px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  width: 100%;
  border-radius: 10px !important;
  background-color: rgb(55 2 148) !important;
  color: white !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
    0 2px 0 0 rgb(54 4 132),
    0 4px 0 0 rgb(52 16 108),
    0 6px 0 0 rgb(38 9 83),
    0 8px 0 0 rgb(42 15 85),
    0 8px 16px 0 rgb(90 53 124 / 50%);
  overflow: hidden;
}

img.bizcardPreviewImage {
  width: 100%;
  height: 400px;
  border-radius: 10px;
  border: 1px solid #c8cacf;
  object-fit: cover;
  object-position: top;
}

.formGroup.col-12 .ms-3.mb-3.form-check {
  margin-left: 0px !important;
}

.wizard-form-container {
  text-align: left !important;
}

.wizardSubmitButton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
}

.wizardSubmitButton:hover {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
    0 1px 0 0 rgb(109 40 217),
    0 2px 0 0 rgb(91 33 182),
    0 3px 0 0 rgb(76 29 149),
    0 4px 0 0 rgb(67 26 131),
    0 4px 8px 0 rgba(147, 51, 234, 0.5);
}

.cFilterWizard label {
  color: #727272 !important;
}

.bizGrid {
  height: 170px;
}

.instaWizard {
  /* background: #f6f4ff; */
  border-radius: 5px;
  box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.loadLink {
  cursor: pointer;
  color: #3a1593 !important;
  font-weight: 600 !important;
  text-decoration: none;
}

.successMessage h5 {
  font-size: 20px !important;
  font-weight: 500 !important;
  font-family: "Bricolage Grotesque", serif !important;
}

.socialMedia ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline-block;
}

.bannerImage img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.socialMedia ul li img {
  width: 28px;
}

.advantageSection ul {
  margin: 0px;
  padding: 0px;
  padding-left: 15px;
}

.advantageSection ul li {
  padding-bottom: 10px;
  font-size: 14px;
}

.advantageSection h4 {
  font-size: 28px;
  font-weight: 600;
}

.socialMediaFollow ul li a {
  background: #f15a25;
  border-radius: 50px;
  font-size: 14px;
  padding: 2px 20px;
  text-decoration: none;
  color: #fff;
  display: inline-block;
}

.socialMediaFollow ul li a:hover {
  background: #a23d18;
}

.socialMediaFollow ul li {
  list-style: none;
  display: inline-block;
  margin-right: 25px;
}

.socialMediaFollow ul {
  margin: 0px;
  padding: 0px;
  margin: 10px 0px;
}

.socialMediaFollow ul li p input {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.socialMediaFollow ul li p input[type="checkbox"] {
  accent-color: #3a1593;
}

/* partnar enquiry css end  here*/
.firstSection .form-check.form-check-inline {
  display: block;
}

/* kanchan changes */

.guestMessageLabel {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

.messageCardContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
}

.editActionBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: #ebf8ff;
  color: var(--site-primary-color);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  width: 100%;
}

.editActionBtn:hover {
  background-color: var(--site-primary-color);
  color: #ffffff;
  border-color: var(--site-primary-color);
}

.editActionBtn i {
  font-size: 14px;
}

/* Form Styling */
.formInput,
.formSelect,
.formTextarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #cddaff !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  color: #0c121d;
  transition: all 0.2s ease;
}

.formInput:focus,
.formSelect:focus,
.formTextarea:focus {
  outline: none;
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 4px rgba(140, 188, 67, 0.1);
}

.formRadio .form-check-input:checked {
  background-color: var(--site-primary-color);
  border-color: var(--site-primary-color);
}

.enquirySection .mat-form-field-should-float {
  margin-top: 20px;
}

.enquirySection .mat-form-field-flex.ng-tns-c71-0 {
  padding: 0px;
}

.instaWizard .mat-form-field-infix {
  padding: 0px 10px !important;
  margin: 0px !important;
  height: 45px;
  border: 1px solid #cddaff;
  border-radius: 8px;
}

.instaWizard .mat-form-field-autofill-control.formInput {
  border: 0px !important;
}

.instaWizard .mat-form-field-autofill-control.formInput:focus {
  box-shadow: none;
}

.instaWizard label#mat-form-field-label-1 {
  margin-left: 10px;
  margin-top: -3px;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
}

/* confirm plan purchase css start here */
.confirmPurchase .cardTitle {
  margin-bottom: 10px;
}

.confirmPurchase .userInfoBox {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}

.userSubText {
  font-size: 13px;
  color: #6c757d;
}

.orderSummaryBox {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 14px;
}

.summaryTitle {
  margin-bottom: 10px;
  font-size: 18px;
}

.summaryRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.totalRow {
  font-weight: 500;
}

.statusDot {
  width: 8px;
  height: 8px;
  background: #28a745;
  border-radius: 50%;
}

.orderSummaryBox .makePaymentBtn {
  background: var(--site-primary-color);
  color: #fff;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
}

.orderSummaryBox .makePaymentBtn:hover {
  background: var(--site-primary-color);
  color: #fff;
}

.termsText {
  font-size: 12px;
  margin-top: 14px;
  text-align: center;
}

.confirmPurchase .termsText a {
  color: var(--site-primary-color);
  font-weight: 500;
  text-align: center;
}

.secureText {
  font-size: 12px;
  color: #6c757d;
  margin-top: 8px;
  text-align: center;
}

.footerText {
  font-size: 12px;
  color: #6c757d;
  margin-top: 10px;
  text-align: center;
}

.userInfoBox h2 {
  font-size: 18px;
  margin-bottom: 5px;
}

.summaryRow.standardPlan {
  background-color: rgb(245 247 251);
  padding: 10px;
  border-radius: 8px;
}

.confirmPurchase .planItem {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #f8fbff;
  border: 1px solid #eef2f7;
  margin-bottom: 20px !important;
  cursor: pointer;
  align-items: flex-start;
}

.confirmPurchase .planItem:hover {
  border-color: #c7d7ff;
}

.planItem .planContent {
  flex: 1;
}

.planContent .planHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.planContent .planName {
  font-weight: 600;
}

.planContent .planPrice {
  font-weight: 600;
}

.planContent .planPrice small {
  font-weight: 400;
  color: #6c757d;
}

.planItem .planRadio {
  margin-top: 6px;
}

.planContent .planDesc {
  font-size: 13px;
  color: #6c757d;
  margin-top: 4px;
}

.planContent .planLink {
  font-size: 14px;
  color: var(--site-primary-color);
  border-bottom: 1px dashed;
  float: right;
  line-height: 18px;
  font-weight: 500;
}

.popularBadge {
  position: absolute;
  top: -10px;
  left: 16px;
  background: #20c997;
  color: #fff;
  font-size: 10px;
  padding: 1px 10px;
  border-radius: 20px;
}

/* confirm plan purchase css end here */

.profileCard.cardPreview {
  text-align: center !important;
  border: 0px;
  padding: 0px;
  box-shadow: none;
  border-radius: 10px;
  width: 100%;
  /* height: auto; */
  min-height: 500px;
}

.mediaImage.mediaVideo.green.box video {
  width: 100%;
  height: 100px;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
}

.mediaContainer {
  position: relative;
}

.planContainerBtn button.action-button.continuePeriod {
  background-color: #f59e0b !important;
}

img.websitePreviewImage {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  border: 1px solid #c8cacf;
  object-fit: cover;
  object-position: top;
}

/* activate dashboard page css start  here */

.tagBadge {
  background: var(--site-secondary-color);
  color: var(--site-primary-color);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

p.panelSubtitle {
  margin: 10px 0px;
}

.selectionTitle {
  color: var(--site-primary-color);
  font-weight: 600;
  font-size: 24px;
  margin: 0px 0px 5px;
}

.selectionSubtitle {
  color: var(--site-text-muted-color);
  font-size: 15px;
}

/* Profile Options Styles */
.profileOption {
  border: 2px solid #f2f2f2;
  border-radius: 15px;
  padding: 30px 20px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profileOption:hover {
  transform: translateY(-5px);
  border-color: var(--site-primary-color);
  box-shadow: 0 15px 30px rgba(28, 45, 100, 0.1);
}

.profileOption.cardSelection {
  border-color: var(--site-primary-color);
  background: #f8faff;
}

.iconWrapper {
  width: 70px;
  height: 70px;
  background: var(--site-secondary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.iconWrapper i {
  font-size: 28px;
  color: var(--site-primary-color);
}

.optionContent h4 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
  color: #333;
}

.optionContent p {
  font-size: 13px;
  color: #777;
  margin-bottom: 20px;
}

.actionBtn {
  background: var(--site-primary-color);
  color: #fff;
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 500;
  width: 100%;
  border: none;
}

.actionBtn:hover {
  background: #2a3e7e;
  color: white;
}

/* Empty State Styling */
.emptyStateBox {
  background: #fff9f9;
  border: 1px dashed #ffc1c1;
  border-radius: 20px;
  padding: 40px;
  margin-top: 20px;
}

/* activate dashboard page css end  here */

/* activate bussines page css start here */

/* Container Card */
.modern-business-panel {
  border-radius: 30px;
  border: none;
  background: #ffffff;
  box-shadow: 0 15px 50px rgba(28, 45, 100, 0.08) !important;
}

/* Business Selection Cards */
.bizCardBox {
  background: #fff;
  border: 1.5px solid #f0f2f5;
  border-radius: 18px;
  padding: 15px;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.bizCardBox:hover {
  border-color: var(--site-primary-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.bizCardBox.cardSelection {
  background: #f8faff;
  border-color: var(--site-primary-color);
  border-width: 2px;
}

.bizIcon {
  width: 45px;
  height: 45px;
  background: var(--site-secondary-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: var(--site-primary-color);
  font-size: 20px;
}

.bizInformation {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.biz-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.bizStatus {
  font-size: 11px;
  color: #999;
}

.selectionCheck {
  position: absolute;
  top: -8px;
  right: -8px;
  color: var(--site-primary-color);
  background: white;
  border-radius: 50%;
  display: none;
  font-size: 20px;
}

.bizCardBox.cardSelection .selectionCheck {
  display: block;
}

/* Action Buttons */
.btnMainAction {
  background: var(--site-primary-color);
  color: white !important;
  border-radius: 15px;
  height: 55px;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(28, 45, 100, 0.2);
  border: none;
}

.btnSecondaryAction {
  background: #fff3cd;
  /* Warning light */
  color: #856404;
  border: 1px solid #ffeeba;
  border-radius: 15px;
  height: 55px;
  font-weight: 500;
}

/* Employee Directory Card */
.employeeSectionCard {
  background: #fcfcfd;
  border: 1px solid #eee;
  border-radius: 20px;
}

.bizSearchBox {
  position: relative;
  width: 200px;
}

.bizSearchBox i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #ccc;
}

.bizSearchBox input {
  padding-left: 35px !important;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 13px;
}

.employeeRow {
  background: white;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 10px;
  border: 1px solid #f0f0f0;
}

.avatarCircle {
  width: 35px;
  height: 35px;
  background: #e1e6f9;
  color: var(--site-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}

.btnsmActivate {
  background: var(--site-primary-color);
  color: white;
  border: none;
  padding: 5px 15px;
  border-radius: 8px;
  font-size: 12px;
}

/* Bussnies page css end here */

.ProfileGroup .GroupLabel {
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 5px;
  font-weight: 500;
}

.ProfileGroup .ProfileCard,
.BusinessCard {
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  padding: 15px;
}

.ProfileCard .ProfileHeader {
  display: flex;
  /* align-items: center; */
}

.ProfileGroup .ProfileHeader {
  /* display: flex; */
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px dashed #cacaca;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.ProfileHeader .UserInfo {
  display: flex;
  gap: 12px;
  /* width: 60%; */
}

.UserAvatar,
.BusinessIcon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.BusinessIcon {
  background-color: #fff9db;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

.UserText .UserName {
  font-size: 16px;
  color: var(--site-primary-color);
  margin: 0px;
  font-weight: 600;
}

.UserText p.UserRole {
  margin: 0px !important;
  color: #959595;
}

.ProfileGroup .ProfileCard {
  margin-bottom: 20px;
}

.EditButton {
  background: none;
  border: none;
  color: var(--site-primary-color);
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  display: block;
}

/* Buttons */
.DividerDashed {
  border-top: 1px dashed #eee;
  margin: 15px 0;
  display: none;
}

.ButtonGroup {
  display: flex;
  gap: 10px;
}

.PrimaryButton {
  background-color: var(--site-primary-color);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  width: 50%;
}

.SecondaryButton {
  background-color: #00b274;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  flex: 1;
  width: 50%;
}

/* Employee List Section */
.EmployeeList {
  margin-top: 15px;
}

.EmployeeRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed #eee;
  margin-top: 10px;
}

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

.SmallAvatar,
.InitialAvatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.InitialAvatar {
  background-color: #f0f4ff;
  color: var(--site-primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
}

.EmployeeName {
  font-size: 14px;
  color: var(--site-primary-color);
  font-weight: 600;
}

.BusinessIcon img {
  width: 100%;
  border-radius: 100px;
  border: 1px solid #b6b8c5;
  height: 100%;
  object-fit: cover;
}

.RadioInput {
  accent-color: var(--site-primary-color);
}

.MiniButton {
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.MiniButton.Active {
  background-color: var(--site-primary-color);
  color: white;
}

.MiniButton.Disabled {
  background-color: #e0e0e0;
  color: #aaa;
}

.UserText .UserCompany {
  margin: 0px !important;
  color: #959595;
  font-size: 16px;
  line-height: 18px;
}

.PrimaryButton.FullWidth {
  width: 100%;
}

.userEditProfile.Edit button.EditButton {
  float: right;
}

.ProfileCard h3.UserName {
  font-size: 22px;
  font-weight: 600;
}

.userEditProfile.Edit button.PrimaryButton.FullWidth {
  width: 80%;
}

.ActiveUserIcon img {
  width: 250px;
}

.ActiveUserIcon {
  text-align: center;
  margin-bottom: 40px;
}

.mat-mdc-form-field .mdc-notched-outline__leading,
.mat-mdc-form-field .mdc-notched-outline__notch,
.mat-mdc-form-field .mdc-notched-outline__trailing {
  border-color: transparent !important;
}

.mat-mdc-form-field .mdc-text-field {
  border: 1px solid #cddaff !important;
  border-radius: 8px;
  padding: 10px;
}

.mdc-menu-surface.mat-mdc-autocomplete-panel {
  width: 100%;
  max-height: 256px;
  position: absolute !important;
  visibility: hidden;
  transform-origin: center top;
  margin: 0;
  padding: 8px 0;
  list-style-type: none;
  top: 300px;
  background: #fff;
  max-width: 300px;
  left: 30%;
  border: 1px solid #e2e2e2 !important;
  border-radius: 10px !important;
}

.dbcPurchaseLogoImg {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* Checkout flow 06 march 2026 */

.sSitePage {
  min-height: 100vh;
  color: #0d1b4b;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 140px;
  gap: 18px;
  position: relative;
  overflow-x: hidden;
}

.sSiteProductsIcon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--site-secondary-color);
}

.sSiteProductsIcon i {
  font-size: 28px;
  color: var(--site-primary-color);
}

.sSiteBlob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.sSiteBlob1 {
  width: 650px;
  height: 650px;
  background: radial-gradient(
    circle,
    rgba(24, 71, 212, 0.09) 0%,
    transparent 70%
  );
  top: -220px;
  left: -180px;
}

.sSiteBlob2 {
  width: 450px;
  height: 450px;
  background: radial-gradient(
    circle,
    rgba(74, 123, 245, 0.07) 0%,
    transparent 70%
  );
  bottom: -100px;
  right: -100px;
}

.sSiteBlob3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(245, 166, 35, 0.05) 0%,
    transparent 70%
  );
  top: 45%;
  left: 60%;
}

.sSiteLogoWrap {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  animation: sSiteFadeDown 0.4s ease both;
}

.sSiteLogoText {
  font-size: 22px;
  font-weight: 800;
  color: var(--site-primary-color);
  display: flex;
  align-items: center;
  gap: 1px;
}

.sSiteLogoDot {
  color: var(--site-primary-color);
}

.sSiteLogoSub {
  font-size: 10px;
  color: #8a96b8;
  letter-spacing: 0.6px;
}

.sSiteProgressWrap {
  width: 100%;
  max-width: 700px;
  position: relative;
  animation: sSiteFadeDown 0.5s ease 0.1s both;
}

.sSiteProgSteps {
  display: flex;
  gap: 5px;
}

.sSiteProgSeg {
  flex: 1;
  height: 5px;
  border-radius: 10px;
  background: #e2e8f4;
  overflow: hidden;
}

.sSiteProgFill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    var(--site-primary-color),
    var(--site-tertiary-color)
  );
  width: 0%;
  transition: width 0.5s ease;
}

.sSiteProgSeg.sSiteDone .sSiteProgFill {
  width: 100%;
}

.sSiteProgSeg.sSiteActive .sSiteProgFill {
  width: 100%;
  animation: sSiteFillBar 0.6s ease 0.1s both;
}

@keyframes sSiteFillBar {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

.sSiteProgressLabel {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #8a96b8;
}

.sSiteProgressLabelCurrent {
  color: var(--site-primary-color);
}

.sSiteCard {
  width: 100%;
  max-width: 700px;
  background: #ffffff;
  border-radius: 18px;
  border: 1.5px solid #e2e8f4;
  box-shadow:
    0 4px 40px rgba(24, 71, 212, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
}

.sSiteStep {
  display: none;
}

.sSiteStep.sSiteActive {
  display: block;
  animation: sSiteRiseIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sSiteRiseIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.sSiteContent {
  padding: 24px 28px 20px;
}

.sSiteActions {
  padding: 0 28px 28px;
}

.sSiteStepHeader {
  padding: 28px 28px 0;
}

.sSitePlanChip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px 0;
}

.sSitePlanChipInner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--site-secondary-color);
  border: 1px solid rgba(24, 71, 212, 0.18);
  border-radius: 40px;
  padding: 7px 16px 7px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSitePlanChipDot {
  width: 18px;
  height: 18px;
  background: var(--site-primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
  flex-shrink: 0;
}

.sSiteStepTitle {
  font-size: 22px;
  font-weight: 800;
  color: var(--site-primary-color);
  margin-bottom: 5px;
}

.sSiteStepSubtitle {
  font-size: 13px;
  color: #8a96b8;
  margin-bottom: 0;
  line-height: 1.6;
}

.sSitePlanGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 20px 28px;
}

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

.sSitePlanLabel {
  cursor: pointer;
  display: block;
  width: 100%;
}

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

.sSitePlanCardInner {
  border: 2px solid #e2e8f4;
  background: #ffffff;
  padding: 16px 18px;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-height: 68px;
}

.sSitePlanLabel:hover .sSitePlanCardInner {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(24, 71, 212, 0.1);
}

.sSitePlanLabel input:checked + .sSitePlanCardInner {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  box-shadow:
    0 0 0 1px var(--site-primary-color),
    0 8px 24px -8px rgba(24, 45, 100, 0.18);
  transform: translateY(-2px);
}

.sSitePlanCardMeta {
  flex: 1;
}

.sSitePlanName {
  font-size: 14px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 2px;
}

.sSitePlanSubtitle {
  font-size: 12px;
  color: #8a96b8;
}

.sSitePlanPrice {
  font-size: 15px;
  font-weight: 800;
  color: var(--site-primary-color);
  white-space: nowrap;
  margin-left: 10px;
}

.sSitePlanPriceSuffix {
  font-size: 11px;
  font-weight: 500;
  color: #8a96b8;
}

.sSiteCurrentBadge {
  position: absolute;
  top: -16px;
  left: 14px;
  background: var(--site-cta-color);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sSiteBestBadge {
  display: inline-block;
  background: rgba(23, 178, 106, 0.12);
  color: #17b26a;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 3px;
}

.sSiteTeamInputWrap {
  padding: 0 28px 16px;
  display: none;
}

.sSiteTeamInputWrap.sSiteVisible {
  display: block;
}

.sSiteFormGroup {
  margin-bottom: 0;
}

.sSiteFormLabel {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #4a5578;
  margin-bottom: 7px;
}

.sSiteFormField {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  font-size: 14px;

  font-weight: 500;
  color: var(--site-primary-color);
  background: #fafbff;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

.sSiteFormField::placeholder {
  color: #8a96b8;
  font-weight: 400;
}

.sSiteFormField:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(24, 71, 212, 0.1);
  background: #fff;
}

.sSiteFormFieldBad {
  border-color: #ef4444 !important;
}

.sSiteFormFieldBad:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.sSiteFormErr {
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  margin-top: 5px;
  display: none;
}

.sSiteFormErrOn {
  display: block;
}

.sSiteVisualImgContainer {
  width: 100%;
  margin-bottom: 30px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #cddaff;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.sSiteVisualImg {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.sSiteVisualImg:hover {
  transform: scale(1.03);
}

.sSiteVisualHero {
  padding: 24px 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 155px;
}

.sSiteNfcCardVisual {
  width: 185px;
  height: 115px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--site-primary-color) 0%,
    var(--site-primary-color) 100%
  );
  box-shadow:
    0 20px 50px rgba(24, 71, 212, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transform: rotate(-4deg) translateY(4px);
  transition: transform 0.45s ease;
  z-index: 2;
}

.sSiteNfcCardVisual:hover {
  transform: rotate(-1deg) translateY(-4px);
}

.sSiteNfcCardVisual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.13) 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
}

.sSiteCardVariantB {
  transform: rotate(2deg);
}

.sSiteCardVariantB:hover {
  transform: rotate(0deg) translateY(-4px);
}

.sSiteCardChip {
  position: absolute;
  top: 16px;
  left: 13px;
  width: 28px;
  height: 20px;
  background: linear-gradient(135deg, #d4af70, #f5d98a, #b8962e);
  border-radius: 4px;
  overflow: hidden;
}

.sSiteCardChip::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(139, 101, 20, 0.4);
  border-radius: 2px;
}

.sSiteCardNfcIcon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
}

.sSiteNfcWave {
  position: absolute;
  border: 1.5px solid #fff;
  border-radius: 50%;
  opacity: 0;
  animation: sSiteNfcPulse 2.2s ease infinite;
}

.sSiteNfcWave1 {
  width: 10px;
  height: 10px;
  top: 9px;
  right: 9px;
  animation-delay: 0s;
}

.sSiteNfcWave2 {
  width: 18px;
  height: 18px;
  top: 5px;
  right: 5px;
  animation-delay: 0.3s;
}

.sSiteNfcWave3 {
  width: 26px;
  height: 26px;
  top: 1px;
  right: 1px;
  animation-delay: 0.6s;
}

@keyframes sSiteNfcPulse {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  40% {
    opacity: 0.6;
  }

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

.sSiteCardNameLine {
  position: absolute;
  bottom: 14px;
  left: 13px;
  right: 13px;
}

.sSiteCardName {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.sSiteCardTitle {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
}

.sSiteCardBigdotLogo {
  font-size: 7px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  position: absolute;
  bottom: 8px;
  right: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sSiteStickerVisual {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f4ff, #e2eaff);
  border: 3px solid var(--site-secondary-color);
  box-shadow: 0 8px 24px rgba(24, 71, 212, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  transform: translateX(-14px) translateY(-10px);
  transition: transform 0.4s ease;
  flex-shrink: 0;
}

.sSiteStickerVisual:hover {
  transform: translateX(-14px) translateY(-16px);
}

.sSiteStickerInner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--site-primary-color) 0%,
    var(--site-tertiary-color) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.sSiteStickerInner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 50%
  );
}

.sSiteStickerWaves {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sSiteArc {
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-bottom: none;
  border-radius: 50% 50% 0 0;
}

.sSiteArc1 {
  width: 8px;
  height: 4px;
}

.sSiteArc2 {
  width: 14px;
  height: 7px;
}

.sSiteArc3 {
  width: 20px;
  height: 10px;
}

.sSiteStickerDot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  margin-top: 1px;
}

.sSiteTapVisual {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: white;
  border: 1px solid #e2e8f4;
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: #4a5578;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  animation: sSiteFloatBob 3s ease-in-out infinite;
}

.sSiteFloatBadge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #f5a623;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
  animation: sSiteFloatBob 2.5s ease-in-out infinite 0.5s;
}

@keyframes sSiteFloatBob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.sSiteHeadline {
  font-size: 25px;
  font-weight: 800;
  color: var(--site-primary-color);
  line-height: 1.2;
  margin-bottom: 18px;
}

.sSiteHeadlineAccent {
  color: var(--site-primary-color);
}

.sSiteSocialProof {
  display: flex;
  align-items: center;
  background: var(--site-secondary-color);
  border: 1px solid rgba(24, 71, 212, 0.1);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.sSiteProofStat {
  flex: 1;
  text-align: center;
}

.sSiteProofNumber {
  font-size: 20px;
  font-weight: 800;
  color: var(--site-primary-color);
  line-height: 1;
}

.sSiteProofLabel {
  font-size: 11px;
  color: #8a96b8;
  margin-top: 4px;
  line-height: 1.4;
}

.sSiteProofDivider {
  width: 1px;
  height: 38px;
  background: rgba(24, 71, 212, 0.12);
}

.sSiteBenefitsRow {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.sSiteBenefitChip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--site-secondary-color);
  border: 1px solid rgba(24, 71, 212, 0.1);
  border-radius: 12px;
  padding: 11px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--site-primary-color);
  text-align: center;
  line-height: 1.3;
  transition: all 0.2s;
}

.sSiteBenefitChip:hover {
  background: var(--site-secondary-color);
  border-color: rgba(24, 71, 212, 0.22);
  transform: translateY(-2px);
}

.sSiteBenefitIcon {
  font-size: 17px;
}

.sSiteProductLabel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--site-primary-color);
  margin-bottom: 4px;
}

.sSiteProductHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 5px;
}

.sSiteProductTitle {
  font-size: 21px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSitePriceBadge {
  background: var(--site-primary-color);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  padding: 8px 15px;
  border-radius: 12px;
  text-align: right;
  flex-shrink: 0;
}

.sSitePriceBadgeSub {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.6;
  display: block;
}

.sSiteProductDesc {
  font-size: 13px;
  color: #8a96b8;
  margin-bottom: 18px;
  line-height: 1.6;
}

.sSitePlacementVisual {
  background: linear-gradient(135deg, #0d1b4b 0%, #1847d4 100%);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.sSitePlacementVisual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 50%
  );
}

.sSitePlacementItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.sSitePlacementIcon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  transition: all 0.22s;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.sSitePlacementItem:hover .sSitePlacementIcon {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-3px);
}

.sSitePlacementItem.sSiteActive .sSitePlacementIcon {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.sSitePlacementLabel {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.sSitePlacementSaveBadge {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: #f5a623;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.sSitePlacementHint {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

.sSiteSectionLabelRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sSiteSectionLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a96b8;
}

.sSiteSelectedCount {
  color: var(--site-primary-color);
}

.sSitePlacementOpts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 12px;
}

.sSiteOptCard {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 13px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #ffffff;
  position: relative;
}

.sSiteOptCard:hover {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
}

.sSiteOptCard.sSiteSelected {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  box-shadow: 0 0 0 1px var(--site-primary-color);
}

.sSiteOptCardRow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  text-align: left;
}

.sSiteOptCardRowIcon {
  font-size: 21px;
  flex-shrink: 0;
}

.sSiteOptCardCheck {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border: 1.5px solid #e2e8f4;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: white;
  transition: all 0.2s;
}

.sSiteOptCardRow .sSiteOptCardCheck {
  position: static;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  order: 999;
  margin-left: auto;
}

.sSiteOptCard.sSiteSelected .sSiteOptCardCheck {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
}

.sSiteOptCard.sSiteSelected .sSiteOptCardCheck::after {
  content: "\2714";
}

.sSiteOptCardIcon {
  font-size: 21px;
  margin-bottom: 6px;
}

.sSiteOptCardName {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 2px;
}

.sSiteOptCardSub {
  font-size: 10px;
  color: #8a96b8;
}

.sSiteCustomQty {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.sSiteCustomQtyLabel {
  flex: 1;
}

.sSiteCustomQtyTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSiteCustomQtySub {
  font-size: 11px;
  color: #8a96b8;
}

.sSiteQtyControls {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sSiteQtyBtn {
  width: 32px;
  height: 32px;
  border: 1.5px solid #e2e8f4;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #4a5578;
  transition: all 0.15s;
  font-family: inherit;
}

.sSiteQtyBtn:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  background: var(--site-secondary-color);
}

.sSiteQtyValue {
  font-size: 16px;
  font-weight: 800;
  color: var(--site-primary-color);
  min-width: 26px;
  text-align: center;
}

.sSiteCartMini {
  border: 1.5px dashed #e2e8f4;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  background: #fafbff;
}

.sSiteCartMiniLeft {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sSiteCartMiniEmoji {
  font-size: 20px;
}

.sSiteCartMiniTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSiteCartMiniSub {
  font-size: 11px;
  color: #8a96b8;
}

.sSiteCartMiniPrice {
  font-size: 20px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSiteFeaturesRow {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.sSiteFeatureChip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #4a5578;
}

.sSiteFeatureIcon {
  font-size: 13px;
}

/* Card & CXO hero visuals */
.sSiteCardHero {
  background: linear-gradient(135deg, #0d1b4b, #1847d4);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  min-height: 112px;
}

.sSiteCardHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 50%
  );
}

.sSiteCardHeroLabel {
  background: white;
  border: 1px solid #e2e8f4;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #4a5578;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
}

.sSiteCxoHero {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  min-height: 122px;
}

.sSiteCxoHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 30% 50%,
    rgba(212, 175, 55, 0.15) 0%,
    transparent 60%
  );
}

.sSiteMetalCard {
  width: 162px;
  height: 100px;
  border-radius: 11px;
  background: linear-gradient(
    135deg,
    #c0c0c0 0%,
    #e8e8e8 30%,
    #a8a8a8 50%,
    #d4d4d4 70%,
    #c0c0c0 100%
  );
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  transform: rotate(-3deg);
  transition: transform 0.4s ease;
  flex-shrink: 0;
}

.sSiteMetalCard:hover {
  transform: rotate(0deg) scale(1.05);
}

.sSiteMetalCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 70%,
    transparent 100%
  );
}

.sSiteMetalCardChip {
  position: absolute;
  top: 16px;
  left: 13px;
  width: 26px;
  height: 18px;
  background: linear-gradient(135deg, #d4af37, #f5d98a, #b8962e);
  border-radius: 3px;
}

.sSiteMetalCardName {
  position: absolute;
  bottom: 16px;
  left: 13px;
  font-size: 9px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.5px;
}

.sSiteMetalCardTitle {
  position: absolute;
  bottom: 7px;
  left: 13px;
  font-size: 8px;
  color: rgba(0, 0, 0, 0.5);
}

.sSiteGoldBadge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #d4af37, #f5d98a);
  color: #5a3e00;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.sSiteCxoTagline {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 110px;
  line-height: 1.5;
}

.sSiteCxoTaglineAccent {
  color: #f5d98a;
  font-size: 18px;
  display: block;
  margin-bottom: 4px;
}

.sSiteAddonGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.sSiteAddonTile {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 16px 14px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
  background: #ffffff;
  position: relative;
}

.sSiteAddonTile:hover {
  border-color: var(--site-primary-color);
  box-shadow: 0 4px 20px rgba(24, 71, 212, 0.1);
}

.sSiteAddonTile.sSiteAddonOn {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  box-shadow:
    0 0 0 1px var(--site-primary-color),
    0 4px 16px rgba(24, 71, 212, 0.12);
}

.sSiteAddonTopRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.sSiteAddonIconWrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--site-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--site-primary-color);
  transition:
    background 0.2s,
    color 0.2s;
}

.sSiteAddonTile.sSiteAddonOn .sSiteAddonIconWrap {
  background: var(--site-primary-color);
  color: #fff;
}

.sSiteAddonCheck {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #e2e8f4;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: all 0.2s;
  flex-shrink: 0;
}

.sSiteAddonTile.sSiteAddonOn .sSiteAddonCheck {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #fff;
}

.sSiteAddonTitleRow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.sSiteAddonTitle {
  font-size: 13px;
  font-weight: 700;
  color: #000;
}

.sSiteAddonPill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: rgba(245, 90, 37, 0.1);
  color: var(--site-cta-color);
  border-radius: 5px;
  padding: 2px 7px;
  text-transform: uppercase;
}

.sSiteAddonDesc {
  font-size: 12px;
  color: #8a96b8;
  line-height: 1.5;
  margin-bottom: 8px;
}

.sSiteAddonPrice {
  font-size: 13px;
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteReviewLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sSiteLeadBox {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
}

.sSiteLeadRow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid #e2e8f4;
}

.sSiteLeadRow:last-child {
  border-bottom: none;
}

.sSiteLeadIconWrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--site-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-primary-color);
  font-size: 13px;
  flex-shrink: 0;
}

.sSiteLeadKey {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #8a96b8;
}

.sSiteLeadVal {
  font-size: 13px;
  font-weight: 600;
  color: #000;
}

/* ── Promo code ── */
.sSitePromoWrap {
  display: flex;
  margin-bottom: 10px;
}

.sSitePromoField {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f4;
  border-right: none;
  border-radius: 12px 0 0 12px;
  font-size: 13px;

  font-weight: 500;
  color: var(--site-primary-color);
  background: #fafbff;
  outline: none;
  transition: border-color 0.2s;
}

.sSitePromoField:focus {
  border-color: var(--site-primary-color);
}

.sSitePromoApply {
  padding: 0 20px;
  border-radius: 0 12px 12px 0;
  border: 1.5px solid #e2e8f4;
  border-left: none;
  background: var(--site-primary-color);
  color: #fff;

  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.sSitePromoApply:hover {
  background: var(--site-primary-color);
}

.sSitePromoChips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}

.sSitePromoChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f4;
  background: #f4f6fb;
  font-size: 12px;
  font-weight: 700;
  color: #4a5578;
  cursor: pointer;
  transition: all 0.2s;
}

.sSitePromoChip:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  background: var(--site-secondary-color);
}

.sSitePromoChip.sSitePromoUsed {
  border-color: #17b26a;
  background: #e6f9f1;
  color: #1a7a40;
}

.sSitePromoFeedback {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  display: none;
}

.sSitePromoOk {
  display: block;
  color: #1a7a40;
}

.sSitePromoFail {
  display: block;
  color: #ef4444;
}

.sSiteOrderBox {
  background: #f4f6fb;
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 18px 16px;
}

.sSiteOrderBoxTitle {
  font-size: 14px;
  font-weight: 800;
  color: #000;
  margin-bottom: 14px;
}

.sSiteOrderPlanTag {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--site-secondary-color);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 13px;
}

.sSiteOrderDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

.sSiteOrderPlanLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteOrderRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
}

.sSiteOrderRowLabel {
  color: #4a5578;
  font-weight: 500;
}

.sSiteOrderRowVal {
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteOrderRowDisc {
  color: #17b26a !important;
}

.sSiteOrderHr {
  border: none;
  border-top: 1px solid #e2e8f4;
  margin: 9px 0;
}

.sSiteOrderTotalRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 4px;
}

.sSiteOrderTotalLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteOrderTotalAmt {
  font-size: 26px;
  font-weight: 800;
  color: #000;
  line-height: 1;
}

.sSiteOrderNote {
  font-size: 10px;
  color: #8a96b8;
  text-align: right;
  margin-top: 3px;
}

.sSiteTrustList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}

.sSiteTrustItem {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #8a96b8;
  font-weight: 500;
}

.sSiteTrustItem i {
  color: #17b26a;
  font-size: 12px;
}

.sSiteTerms {
  font-size: 11px;
  color: #8a96b8;
  line-height: 1.65;
  margin-bottom: 18px;
}

.sSiteTerms a {
  color: var(--site-primary-color);
  font-weight: 600;
  text-decoration: none;
}

.sSiteTerms a:hover {
  text-decoration: underline;
}

.sSiteSuccess {
  padding: 52px 28px;
  display: none;
  text-align: center;
}

.sSiteSuccess.sSiteSuccessOn {
  display: block;
  animation: sSiteRiseIn 0.5s ease both;
}

.sSiteSuccessOrb {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--site-tertiary-color) 0%,
    var(--site-primary-color) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  margin: 0 auto 22px;
  box-shadow: 0 8px 28px rgba(24, 71, 212, 0.25);
  animation: sSiteSuccessBounce 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes sSiteSuccessBounce {
  from {
    transform: scale(0.5);
    opacity: 0;
  }

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

.sSiteSuccessTitle {
  font-size: 24px;
  font-weight: 800;
  color: var(--site-primary-color);
  margin-bottom: 8px;
}

.sSiteSuccessBody {
  font-size: 14px;
  color: #4a5578;
  line-height: 1.7;
  margin-bottom: 26px;
}

.sSiteSuccessEm {
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteBtnPrimary {
  width: 100%;
  background: linear-gradient(
    135deg,
    var(--site-primary-color) 0%,
    var(--site-tertiary-color) 100%
  );
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 16px 20px;

  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 24px rgba(24, 71, 212, 0.28);
  transition: all 0.2s;
  margin-bottom: 11px;
  position: relative;
  overflow: hidden;
}

.sSiteBtnPrimary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.sSiteBtnPrimary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(24, 71, 212, 0.38);
}

.sSiteBtnPrimary:active {
  transform: scale(0.98);
}

.sSiteBtnPrimaryLeft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.sSiteBtnPrimaryTitle {
  font-size: 14px;
  font-weight: 700;
}

.sSiteBtnPrimarySub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
}

.sSiteBtnArrow {
  width: auto;
  height: 45px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.sSiteBtnRowSecondary {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}

.sSiteBtnBack {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f4;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #4a5578;
  transition: all 0.2s;
  flex-shrink: 0;
  font-family: inherit;
}

.sSiteBtnBack:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  transform: translateX(-2px);
}

.sSiteBtnSecondary {
  flex: 1;
  background: transparent;
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 12px 16px;

  font-size: 13px;
  font-weight: 600;
  color: #8a96b8;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.sSiteBtnSecondary:hover {
  border-color: #4a5578;
  color: #4a5578;
}

.sSiteBtnOutline {
  width: 100%;
  background: transparent;
  border: 2px dashed var(--site-primary-color);
  border-radius: 12px;
  padding: 13px 16px;

  font-size: 13px;
  font-weight: 700;
  color: var(--site-primary-color);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 11px;
}

.sSiteBtnOutline:hover {
  background: var(--site-secondary-color);
}

.sSiteSkipNote {
  text-align: center;
  font-size: 11px;
  color: #8a96b8;
  line-height: 1.6;
}

.sSiteSkipNoteStrong {
  color: #4a5578;
  font-weight: 600;
}

.sSiteCartBubble {
  position: fixed;
  bottom: 26px;
  right: 26px;
  background: var(--site-primary-color);
  color: white;
  padding: 12px 18px;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(13, 27, 75, 0.3);
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  z-index: 1000;

  font-weight: 700;
  font-size: 14px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  animation: sSiteFadeUp 0.5s ease 0.5s both;
}

.sSiteCartBubble:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(13, 27, 75, 0.38);
}

.sSiteCartBubbleIcon {
  width: 28px;
  height: 28px;
  background: var(--site-secondary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.sSiteCartBubblePulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17b26a;
  animation: sSitePulseGreen 2s ease infinite;
}

@keyframes sSitePulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(23, 178, 106, 0.4);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(23, 178, 106, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(23, 178, 106, 0);
  }
}

.sSiteModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.sSiteModalOverlay.sSiteActive {
  opacity: 1;
  pointer-events: auto;
}

.sSiteCartModal {
  position: fixed;
  bottom: 84px;
  right: 26px;
  width: 360px;
  background: white;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
  border: 1px solid #e2e8f4;
  padding: 22px;
  z-index: 999;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: bottom right;
}

.sSiteCartModal.sSiteActive {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.sSiteCartModalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1.5px solid var(--site-secondary-color);
}

.sSiteCartModalTitle {
  font-size: 16px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSiteCloseBtn {
  width: 30px;
  height: 30px;
  border: none;
  background: #f4f6fb;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a5578;
  font-size: 12px;
  transition: background 0.2s;
  font-family: inherit;
}

.sSiteCloseBtn:hover {
  background: var(--site-secondary-color);
  color: var(--site-primary-color);
}

.sSiteModalItem {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed #e2e8f4;
  font-size: 13px;
}

.sSiteModalItem:last-child {
  border-bottom: none;
}

.sSiteModalItemName {
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSiteModalItemPrice {
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteModalTotalRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-top: 13px;
  border-top: 1.5px solid var(--site-secondary-color);
}

.sSiteModalTotalLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8a96b8;
}

.sSiteModalTotal {
  font-size: 24px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSiteSecureNote {
  text-align: center;
  font-size: 11px;
  color: #8a96b8;
  margin-top: 8px;
}

.sSiteFooter {
  font-size: 11px;
  color: #8a96b8;
  position: relative;
  z-index: 10;
}

@keyframes sSiteFadeDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sSiteFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* checkout flow css ends 06 march 2026 */

button.btn-close.previewCloseBtn i {
  background-color: #fff;
  border-radius: 100px;
  height: 30px;
  width: 30px;
  line-height: 30px;
}

button.btn-close.previewCloseBtn {
  position: absolute;
  right: -10px;
  font-size: 22px;
  top: -15px;
}

.templatePreviewContainer .PreviewBtn {
  background-color: #ffc107;
  color: #000 !important;
  padding: 6px 10px !important;
  border-radius: 0.5rem !important;
  font-size: 14px !important;
  border-color: #ffc107;
  font-weight: 500;
}

.templatePreviewContainer {
  max-height: 400px;
  padding-right: 5px;
  margin-bottom: 15px;
}

.templateCard {
  transition: all 0.3s ease;
  background: #fff;
}

.templateCard:hover {
  border-color: var(--site-primary-color) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.templateCard .imageWrapper {
  height: 220px;
  background: #f8f9fa;
  overflow: hidden;
  cursor: pointer;
}

.templateCard .smallThumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  object-position: top;
}

.templateCard .imageWrapper:hover .smallThumb {
  transform: scale(1.05);
  filter: brightness(70%);
}

.templateCard .imageWrapper:hover .PreviewBtn {
  opacity: 1 !important;
}

/* ===== Modern Company Header ===== */
.dashboardContainer .topbar.company-header {
  background: linear-gradient(135deg, #ffffff 0%, #f7f8ff 100%);
  padding: 12px 28px;
  border-radius: 14px;
  box-shadow:
    0 4px 24px rgba(28, 45, 100, 0.09),
    0 1px 4px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(28, 45, 100, 0.07) !important;
  margin-top: 12px;
}

.dashboardContainer .topbar.company-header .company-logo {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(28, 45, 100, 0.14);
  border: 2.5px solid #ffffff !important;
  outline: 1.5px solid #cddaff;
}

.dashboardContainer .topbar.company-header .resturentName {
  font-size: clamp(14px, 1.3vw, 17px) !important;
  font-weight: 700 !important;
  color: #1c2d64 !important;
  margin-bottom: 2px !important;
  letter-spacing: -0.2px;
}

.dashboardContainer .topbar.company-header .location {
  font-size: clamp(11px, 0.9vw, 12px) !important;
  color: #94a3b8 !important;
  margin-bottom: 0 !important;
  font-weight: 400;
}

.dashboardContainer .topbar.company-header .form-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8 !important;
  margin-bottom: 4px !important;
}

.dashboardContainer .topbar.company-header .form-select {
  border: 1.5px solid #cddaff !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1c2d64 !important;
  background-color: #f8faff !important;
  padding: 6px 32px 6px 12px !important;
  box-shadow: none !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.dashboardContainer .topbar.company-header .form-select:focus {
  border-color: #1c2d64 !important;
  box-shadow: 0 0 0 3px rgba(28, 45, 100, 0.1) !important;
}

.dashboardContainer .topbar.company-header .year-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboardContainer .topbar.company-header .year-badge-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f0f4ff;
  border: 1.5px solid #d0daff;
  border-radius: 10px;
  padding: 6px 16px;
  gap: 1px;
  min-width: 110px;
}

.dashboardContainer .topbar.company-header .year-badge-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  line-height: 1;
}

.dashboardContainer .topbar.company-header .year-badge-value {
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  color: #1c2d64;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dashboardContainer .topbar.company-header .year-badge-value i {
  font-size: 12px;
  color: var(--site-primary-color, #1c2d64);
  opacity: 0.7;
}

.dashboardContainer .topbar.company-header .invoiceSwitch {
  padding: 7px 18px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  background: linear-gradient(135deg, #f15a25 0%, #e0430e 100%) !important;
  box-shadow: 0 2px 10px rgba(241, 90, 37, 0.38) !important;
  transition:
    box-shadow 0.2s,
    transform 0.2s !important;
  border: none !important;
}

.dashboardContainer .topbar.company-header .invoiceSwitch:hover {
  box-shadow: 0 5px 16px rgba(241, 90, 37, 0.45) !important;
  transform: translateY(-1px) !important;
}

.dashboardContainer .topbar.company-header .userImage {
  width: 40px !important;
  height: 40px !important;
  border: 2.5px solid #cddaff !important;
  box-shadow: 0 2px 8px rgba(28, 45, 100, 0.12) !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  border-radius: 50% !important;
}

.dashboardContainer .topbar.company-header .userImage:hover {
  border-color: #1c2d64 !important;
  box-shadow: 0 4px 12px rgba(28, 45, 100, 0.2) !important;
}

.dashboardContainer .topbar.company-header .markIcon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.dashboardContainer .topbar.company-header .align-self-center.border-end {
  border-color: #cddaff !important;
  padding-right: 14px !important;
  margin-right: 6px;
}

/* ===== End Modern Company Header ===== */

.templateCard .sectionLabel {
  font-size: 14px;
  font-weight: 500;
  color: #444;
}

/* ===== Modern Congratulations Page ===== */

.congratsPageWrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: #fff;
  position: relative;
}

.congratsLeftPanel {
  padding: 60px 48px 60px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.congratsLeftPanel::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    #e2e2e2 25%,
    #e2e2e2 75%,
    transparent
  );
}

.congratsLiveBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--site-secondary-color);
  color: var(--site-primary-color);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
  width: fit-content;
}

.congratsLiveDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #22c55e;
  flex-shrink: 0;
}

.congratsMainTitle {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  color: var(--site-cta-color);
  line-height: 1.1;
  margin-bottom: 4px;
}

.congratsPersonName {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 20px;
}

.congratsLiveText {
  font-size: 16px;
  font-weight: 500;
  color: var(--site-text-color);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 32px;
}

.congratsLiveText .bigdotCongratulations {
  height: 22px;
  width: auto;
  object-fit: contain;
}

.congratsBizInfoCard {
  background-color: #fff;
  border-radius: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(28, 45, 100, 0.1);
  border-left: 5px solid var(--site-cta-color);
}

.congratsBizName {
  font-size: 18px;
  font-weight: 700;
  color: var(--site-primary-color);
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0;
}

.congratsBizInfoRow {
  display: flex;
  align-items: flex-start;
  gap: 0;
  font-size: 13px;
  padding: 12px 24px;
  border-bottom: 1px solid #f5f5f5;
}

.congratsBizInfoRow:last-child {
  border-bottom: none;
}

.congratsBizInfoLabel {
  font-weight: 700;
  color: var(--site-text-muted-color);
  min-width: 72px;
  flex-shrink: 0;
  letter-spacing: 0.06em;
  font-size: 11px;
  text-transform: uppercase;
  padding-top: 2px;
}

.congratsBizInfoValue {
  font-weight: 400;
  color: var(--site-text-color);
  line-height: 1.55;
}

/* Right Panel */

.congratsRightPanel {
  padding: 60px 32px 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.congratsToolsBadge {
  display: inline-flex;
  align-items: center;
  background-color: var(--site-quaternary-color);
  color: var(--site-primary-color);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
  width: fit-content;
}

.congratsToolsHeading {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--site-primary-color);
  line-height: 1.3;
  margin-bottom: 6px;
}

.congratsToolsSubtext {
  font-size: 15px;
  color: var(--site-text-muted-color);
  font-style: italic;
  margin-bottom: 28px;
}

.congratsToolsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}

@keyframes congratsCardEntrance {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

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

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

  50% {
    transform: scale(1.25) rotate(-6deg);
  }

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

.congratsToolItem {
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 22px 16px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
  animation: congratsCardEntrance 0.4s ease both;
}

.congratsToolItem:nth-child(1) {
  animation-delay: 0.05s;
}

.congratsToolItem:nth-child(2) {
  animation-delay: 0.12s;
}

.congratsToolItem:nth-child(3) {
  animation-delay: 0.19s;
}

.congratsToolItem:nth-child(4) {
  animation-delay: 0.26s;
}

.congratsToolItem:hover {
  transform: translateY(-5px) scale(1.02);
}

.congratsToolItem:hover .congratsToolIconWrap {
  transform: scale(1.1);
}

.congratsToolWebsite {
  background: linear-gradient(135deg, #e8ecf8 0%, #c8d4f8 100%);
  box-shadow: 0 4px 14px rgba(34, 85, 232, 0.1);
}

.congratsToolWebsite:hover {
  border-color: var(--site-tertiary-color);
  box-shadow: 0 10px 28px rgba(34, 85, 232, 0.22);
}

.congratsToolBizcard {
  background: linear-gradient(135deg, #ede8ff 0%, #d4c5f9 100%);
  box-shadow: 0 4px 14px rgba(120, 80, 220, 0.1);
}

.congratsToolBizcard:hover {
  border-color: #7c50db;
  box-shadow: 0 10px 28px rgba(120, 80, 220, 0.22);
}

.congratsToolEcomm {
  background: linear-gradient(135deg, #fff0eb 0%, #fdd5bc 100%);
  box-shadow: 0 4px 14px rgba(241, 90, 37, 0.1);
}

.congratsToolEcomm:hover {
  border-color: var(--site-cta-color);
  box-shadow: 0 10px 28px rgba(241, 90, 37, 0.22);
}

.congratsToolBooking {
  background: linear-gradient(135deg, #e6f7f1 0%, #b8e8d5 100%);
  box-shadow: 0 4px 14px rgba(16, 160, 100, 0.1);
}

.congratsToolBooking:hover {
  border-color: #10a064;
  box-shadow: 0 10px 28px rgba(16, 160, 100, 0.22);
}

.congratsToolIconWrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  transition: transform 0.22s ease;
}

.congratsToolIconFA {
  font-size: 26px;
  line-height: 1;
}

.congratsToolIconWrapWebsite {
  background-color: rgba(34, 85, 232, 0.12);
}

.congratsToolIconWrapWebsite .congratsToolIconFA {
  color: var(--site-tertiary-color);
}

.congratsToolIconWrapBizcard {
  background-color: rgba(120, 80, 220, 0.12);
}

.congratsToolIconWrapBizcard .congratsToolIconFA {
  color: #7c50db;
}

.congratsToolIconWrapEcomm {
  background-color: rgba(241, 90, 37, 0.12);
}

.congratsToolIconWrapEcomm .congratsToolIconFA {
  color: var(--site-cta-color);
}

.congratsToolIconWrapBooking {
  background-color: rgba(16, 160, 100, 0.12);
}

.congratsToolIconWrapBooking .congratsToolIconFA {
  color: #10a064;
}

.congratsToolItemLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-primary-color);
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}

.congratsToolItemDesc {
  font-size: 12px;
  font-weight: 400;
  color: var(--site-text-muted-color);
  line-height: 1.4;
  margin-bottom: 0;
}

.congratsToolsHintText {
  font-size: 13px;
  color: var(--site-text-muted-color);
  text-align: center;
  font-style: italic;
  margin-bottom: 24px;
  margin-top: 4px;
}

.congratsProceedBtn {
  background-color: var(--site-primary-color);
  color: #fff;
  border-radius: 100px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  text-align: center;
  display: block;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
}

.congratsProceedBtn:hover {
  background-color: var(--site-tertiary-color);
  transform: translateY(-2px);
}

/* ===== End Modern Congratulations Page ===== */

/* ===== Modern Welcome Header ===== */

.welcomeHeaderModern {
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 4px;
  margin-bottom: 4px;
}

.welcomeHeaderInner {
  padding: 12px 20px;
}

.welcomeHeaderLogo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: contain;
  border: 1.5px solid var(--site-quaternary-color);
  padding: 5px;
  background-color: #fff;
}

.welcomeHeaderBizName {
  font-size: 16px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 2px;
}

.welcomeHeaderSubtext {
  font-size: 13px;
  color: var(--site-text-muted-color);
  margin-bottom: 0;
}

.welcomeHeaderModern .managerNavBar {
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 100px !important;
  border: 1.5px solid var(--site-quaternary-color) !important;
  color: var(--site-primary-color) !important;
  background-color: transparent !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.welcomeHeaderModern .managerNavBar:hover {
  background-color: var(--site-secondary-color) !important;
  border-color: var(--site-primary-color) !important;
}

.welcomeHeaderModern .managerNavBar.active {
  background-color: var(--site-primary-color) !important;
  border-color: var(--site-primary-color) !important;
  color: #fff !important;
}

.welcomeHeaderModern .switchViewBtn {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--site-cta-color) !important;
  border: none !important;
  border-bottom: 1.5px solid var(--site-cta-color) !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 4px 2px !important;
}

.welcomeHeaderModern .userImage {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--site-quaternary-color);
  transition: border-color 0.15s ease;
}

.welcomeHeaderModern .userImage:hover {
  border-color: var(--site-primary-color);
}

/* ===== End Modern Welcome Header ===== */

/* ===== Modern Giftbox / Free Tools ===== */

.giftboxBizSelector {
  margin-bottom: 16px;
}

.giftboxLeftPanel {
  padding-right: 36px;
  border-right: 1px solid #f0f0f0;
}

.giftboxPanelHeader {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.giftboxTitleIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
}

.giftboxPanelTitle {
  font-size: 22px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin: 0;
}

.toolRowList {
  display: flex;
  flex-direction: column;
}

.toolRowItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background-color 0.15s ease;
  gap: 12px;
}

.toolRowItem:hover {
  background-color: var(--site-secondary-color);
}

.toolRowLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.toolRowNumber {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--site-quaternary-color);
  color: var(--site-primary-color);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toolRowName {
  font-size: 15px;
  font-weight: 500;
  color: var(--site-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toolRowActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.toolActionView {
  font-size: 12px;
  font-weight: 600;
  color: var(--site-primary-color);
  text-decoration: none !important;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--site-quaternary-color);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
  white-space: nowrap;
}

.toolActionView:hover {
  border-color: var(--site-primary-color);
  background-color: var(--site-secondary-color);
  color: var(--site-primary-color);
}

.toolActionManage {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-decoration: none !important;
  padding: 5px 12px;
  border-radius: 100px;
  background-color: var(--site-primary-color);
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

.toolActionManage:hover {
  background-color: var(--site-tertiary-color);
  color: #fff;
}

.toolActionHowTo {
  font-size: 12px;
  font-weight: 500;
  color: var(--site-cta-color);
  text-decoration: none !important;
  padding: 5px 2px;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.toolActionHowTo:hover {
  opacity: 0.7;
  color: var(--site-cta-color);
}

/* Right Panel: Getting Started */

.giftboxRightPanel {
  padding-left: 36px;
}

.gettingStartedCard {
  background-color: var(--site-secondary-color);
  border-radius: 20px;
  padding: 28px 24px;
}

.gettingStartedCardHeader {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--site-quaternary-color);
}

.gettingStartedBulbIcon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.gettingStartedCardTitle {
  font-size: 20px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 4px;
}

.gettingStartedCardSubtext {
  font-size: 13px;
  color: var(--site-text-muted-color);
  margin-bottom: 0;
  line-height: 1.5;
}

.gettingStartedLinkList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gettingStartedLinkItem {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--site-primary-color);
  text-decoration: none !important;
  padding: 14px 16px;
  border-radius: 12px;
  background-color: #fff;
  border: 1.5px solid transparent;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.gettingStartedLinkItem:hover {
  border-color: var(--site-primary-color);
  box-shadow: 0 4px 14px rgba(28, 45, 100, 0.08);
  color: var(--site-primary-color);
}

.gettingStartedLinkAccent {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background-color: var(--site-cta-color);
  flex-shrink: 0;
}

/* ===== End Modern Giftbox / Free Tools ===== */

/* ===== Modern JFF & Login Form ===== */

.jffHeaderLogo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

#grad1 textarea {
  min-height: 95px !important;
}

.jffCard {
  margin-top: 0px !important;
  z-index: 0 !important;
  position: relative !important;
  border-radius: 20px !important;
  padding: 20px 30px !important;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  font-weight: normal;
  background: #ffffff;
  box-shadow:
    0 8px 40px rgba(28, 45, 100, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #eaecf5 !important;
}

#grad1 .font700.font18.text-capitalize.text-start {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--site-text-color) !important;
  margin-bottom: 4px !important;
}

#grad1 .joinBigdotFor {
  padding: 8px 0 16px !important;
}

#grad1 .joinBigdotFor .form-check-inline {
  margin-right: 24px;
  align-items: center;
  display: inline-flex;
}

#grad1 .joinBigdotFor .form-check-input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--site-primary-color) !important;
  cursor: pointer;
  margin-top: 0 !important;
  flex-shrink: 0;
}

#grad1 .joinBigdotFor .form-check-input[type="radio"]:checked {
  background-color: var(--site-primary-color) !important;
  border-color: var(--site-primary-color) !important;
}

#grad1 .joinBigdotFor .form-check-label {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--site-primary-color) !important;
  cursor: pointer;
  margin-left: 8px !important;
}

/* #grad1 .form-label,
#grad1 .cInputheading,
#grad1 label.cInputheading {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
  margin-top: 0 !important;
  display: block;
  letter-spacing: 0;
} */

#grad1 .cRowdata .cBizdetails label.cInputheading {
  margin-top: 0 !important;
}

/* #grad1 .form-control,
#grad1 .cCustomformfield,
#grad1 input.cCustomformfield {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  border: 1.5px solid #cddaff !important;
  padding: 10px 16px !important;
  color: var(--site-text-color) !important;
  background-color: #f9fbff !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
  box-shadow: none !important;
}

#grad1 .form-control:focus,
#grad1 .cCustomformfield:focus {
  border-color: var(--site-cta-color) !important;
  box-shadow: 0 0 0 3px rgba(240, 92, 41, 0.1) !important;
  outline: none !important;
  background-color: #fff !important;
}

#grad1 .form-control::placeholder,
#grad1 .cCustomformfield::placeholder {
  color: #9ca3af !important;
  font-size: 14px !important;
  font-weight: 400 !important;
} */

/* #grad1 .input-group .input-group-text {
  height: 42px !important;
  border-radius: 10px 0 0 10px !important;
  border: 1.5px solid #cddaff !important;
  border-right: none !important;
  background-color: #f9fbff !important;
  padding: 0 14px !important;
} */

#grad1 .input-group .form-control.border-start-0 {
  border-radius: 0 10px 10px 0 !important;
  border-left: none !important;
}

#grad1 .searchMybusiness .form-control {
  padding-left: 46px !important;
  height: 42px !important;
  border-radius: 10px !important;
}

#grad1 .searchMybusiness i {
  left: 16px !important;
  color: var(--site-text-muted-color);
  font-size: 15px;
}

/* #grad1 .form-group {
  margin-bottom: 20px !important;
} */

#grad1 .cRowdata .font16.font700 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--site-text-color) !important;
  margin-bottom: 4px !important;
}

#grad1 .d-block.my-4.font26 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--site-text-muted-color) !important;
}

/* #grad1 .btn.btn-primary.buttonH50,
#grad1 .btn.btn-primary.submitButton,
#grad1 .customButton {
  height: 42px !important;
  padding: 0 20px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background-color: var(--site-cta-color) !important;
  border-color: var(--site-cta-color) !important;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease !important;
  letter-spacing: 0.01em;
}

#grad1 .btn.btn-primary.buttonH50:hover,
#grad1 .btn.btn-primary.submitButton:hover {
  background-color: var(--site-tertiary-color) !important;
  border-color: var(--site-tertiary-color) !important;
  transform: translateY(-1px);
} */

/* #grad1 .text-danger,
#grad1 .error-text {
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 4px;
  display: block;
} */

#grad1 .font13.text-muted {
  font-size: 13px !important;
  line-height: 1.7 !important;
}

#grad1 .font13.text-muted a {
  color: var(--site-primary-color) !important;
  font-weight: 600 !important;
}

/* ===== End Modern JFF & Login Form ===== */

/* ─────────────────────────────────────────────────────────────────────
   BRAND SETTINGS redesign
   ───────────────────────────────────────────────────────────────────── */

.bsLayout {
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}

.bsOutlineBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  background: #ffffff;
  color: #1c1a16;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.bsOutlineBtn:hover {
  border-color: var(--site-cta-color);
  color: var(--site-cta-color);
}

.bsCardBody {
  padding: 20px;
  border-top: 1px solid #cddaff;
}

.bsColorGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bsColorField {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid #cddaff;
  border-radius: 14px;
  padding: 16px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.bsColorField:hover {
  border-color: var(--site-cta-color);
  box-shadow: 0 0 0 3px rgba(240, 92, 41, 0.08);
}

.bsColorRow {
  display: flex;
  align-items: center;
  background: #f9fbff;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease;
  cursor: pointer;
}

.bsColorRow:hover {
  border-color: var(--site-cta-color);
}

.bsColorPicker {
  width: 54px;
  height: 54px;
  border: none;
  background: none;
  padding: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.bsColorPicker::-webkit-color-swatch-wrapper {
  padding: 4px;
}

.bsColorPicker::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

.bsColorInfo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  flex: 1;
  border-left: 1.5px solid #cddaff;
}

.bsColorSwatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.bsColorHex {
  font-size: 14px;
  font-weight: 600;
  color: #1c1a16;
  font-family: monospace;
  letter-spacing: 0.5px;
}

.bsFontGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Each font card holds selector + preview together */
.bsFontCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ffffff;
  border: 1.5px solid #cddaff;
  border-radius: 14px;
  padding: 16px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.bsFontCard:focus-within {
  border-color: var(--site-cta-color);
  box-shadow: 0 0 0 3px rgba(240, 92, 41, 0.08);
}

/* bdFormField inside bsFontCard: no extra card wrapper needed */
.bsFontCard .bdFormField {
  margin: 0;
}

.bsFontPreviewInner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bsFontPreview {
  background: #f9fbff;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 18px;
  font-weight: 400;
  color: #1c1a16;
  line-height: 1.5;
  min-height: 58px;
}

.bsFooterBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #cddaff;
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.bsRtlCheck {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.bsRtlCheckInput {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bsRtlCheckBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #cddaff;
  border-radius: 6px;
  background: #f9fbff;
  flex-shrink: 0;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.bsRtlCheckInput:checked + .bsRtlCheckBox {
  background: var(--site-cta-color);
  border-color: var(--site-cta-color);
}

.bsRtlCheckInput:checked + .bsRtlCheckBox::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.bsRtlCheckLabel {
  font-size: 13px;
  font-weight: 600;
  color: #1c1a16;
}

.bsDestList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.bsDestItem {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 14px;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  background: #f9fbff;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.bsDestItem:hover {
  border-color: var(--site-cta-color);
  background: #fff8f5;
}

.bsDestCheckbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bsDestCheckBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cddaff;
  border-radius: 5px;
  background: #fff;
  flex-shrink: 0;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.bsDestCheckbox:checked ~ .bsDestCheckBox {
  background: var(--site-cta-color);
  border-color: var(--site-cta-color);
}

.bsDestCheckbox:checked ~ .bsDestCheckBox::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.bsDestLabel {
  font-size: 13px;
  font-weight: 500;
  color: #1c1a16;
}

.otpTitle {
  font-size: 20px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}

.otpSubtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 20px;
  line-height: 1.6;
}

.otpNoticeBox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff8f5;
  border: 1.5px solid rgba(240, 92, 41, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #1c1a16;
  text-align: left;
  width: 100%;
  margin-bottom: 24px;
  line-height: 1.5;
}

.otpNoticeIcon {
  color: var(--site-cta-color);
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.otpInputWrap {
  width: 100%;
  margin-bottom: 12px;
}

.otpInput {
  width: 100% !important;
  height: 52px !important;
  border-radius: 12px !important;
  border: 1.5px solid #cddaff !important;
  background: #f9fbff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: 10px !important;
  color: #1c1a16 !important;
  outline: none !important;
  box-shadow: none !important;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease !important;
}

.otpInput:focus {
  border-color: var(--site-cta-color) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(240, 92, 41, 0.1) !important;
}

.otpInput::placeholder {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #9ca3af !important;
}

.otpError {
  font-size: 13px;
  color: #ef4444;
  font-weight: 500;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.otpVerifyBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  background: var(--site-cta-color) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    background 0.15s ease,
    transform 0.1s ease;
  margin-bottom: 20px;
}

.otpVerifyBtn:hover {
  background: #d44d1c !important;
  transform: translateY(-1px);
}

.otpResendWrap {
  text-align: center;
  margin-top: 20px;
}

.otpResendCountdown {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.otpResendLink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--site-cta-color);
  cursor: pointer;
  text-decoration: none;
}

.otpResendLink:hover {
  text-decoration: underline;
}

/* ===== Manage Business Modern UI ===== */

/* Business Selector */
.businessSelectorLabel {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.businessSelect {
  border: 1.5px solid #cddaff;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.businessSelect:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}

/* Main Panel */
.managePanel {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
  border: 1px solid #f1f5f9;
  overflow: hidden;
  margin-top: 16px;
}

/* Panel Header */
.managePanelHeader {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  padding: 28px 32px 24px;
  text-align: center;
}

.managePanelTitle {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Panel Body */
.managePanelBody {
  padding: 28px 24px;
}

/* Section Header */
.manageSectionHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.manageSectionDot {
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #6366f1, #a78bfa);
  flex-shrink: 0;
}

.manageSectionTitle {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.manageSectionDivider {
  border: none;
  border-top: 1px solid #f1f5f9;
  margin: 28px 0;
}

/* App Tile Grid */
.appTileGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* App Tile */
.appTile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1.5px solid #cddaff;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
  text-align: center;
  min-height: 110px;
  user-select: none;
}

.appTile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.14);
  border-color: #a5b4fc;
  background: #fff;
}

.appTileUpgrade {
  background: #fafafa;
}

.appTileUpgrade:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

/* Tile Icon */
.tileIconWrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tileIconWrap img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.tileLabel {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  line-height: 1.3;
  margin: 0;
}

/* Upgrade Badge */
.tileBadgeUpgrade {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

/* Upgrade Overlay */
.tileUpgradeOverlay {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* Upgrade Modal Header */
.upgradeModalHeader {
  background: linear-gradient(135deg, #1e293b, #334155);
  padding: 20px 24px;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
}

.upgradeModalTitle {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.upgradeModalClose {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
  line-height: 1;
}

.upgradeModalClose:hover {
  background: rgba(255, 255, 255, 0.25);
}

.upgradeModalContent {
  border-radius: 16px;
  overflow: hidden;
  border: none;
}

.upgradeModalBody {
  padding: 20px 24px;
}

/* Upgrade Service Row */
.upgradeServiceRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 12px;
}

.upgradeServiceRow:last-child {
  border-bottom: none;
}

.upgradeServiceName {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  flex: 1;
}

.upgradeServiceValidity {
  font-size: 12px;
  color: #64748b;
  flex-shrink: 0;
}

.upgradeBuyNowBtn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.15s;
  white-space: nowrap;
}

.upgradeBuyNowBtn:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

/* FA icon inside tileIconWrap */
.tileIconWrap i {
  font-size: 24px;
  color: #4f46e5;
}

/* FOLLOW-UP / CREATE TASK MODAL — fupModal */

.fupModal {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #cddaff;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
}

/* ── Header ── */
.fupModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid #cddaff;
  background: #ffffff;
}

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

.fupModalHeaderIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--site-secondary-color);
  border-radius: 12px;
  color: var(--site-cta-color);
  font-size: 18px;
  flex-shrink: 0;
}

.fupModalHeaderLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #808080;
  margin: 0 0 2px;
}

.fupModalHeaderTitle {
  font-size: 17px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0;
  letter-spacing: -0.3px;
}

.fupModal__closeBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #cddaff;
  border-radius: 10px;
  background: #ffffff;
  color: #808080;
  font-size: 20px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  flex-shrink: 0;
  line-height: 1;
}

.fupModal__closeBtn:hover {
  background: #fff0eb;
  color: var(--site-cta-color);
  border-color: var(--site-cta-color);
}

/* ── Body ── */
.fupModalBody {
  padding: 24px;
  overflow-y: auto;
}

.fupModal__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Input wrapper (shared by date/time) ── */
.fupModal__inputWrap {
  position: relative;
}

.fupModal__inputWrap--icon {
  flex: 1;
}

.fupModal__inputIcon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #808080;
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}

.fupModal__input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 38px;
  background: #f9fbff;
  border: 1.5px solid #cddaff;
  border-radius: 12px;
  font-size: 14px;
  color: #1c1a16;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  outline: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.fupModal__input:focus {
  border-color: var(--site-cta-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--site-secondary-color);
}

/* ── When row ── */
.fupModalWhenRow {
  display: flex;
  gap: 10px;
}

/* ── Textarea ── */
.fupModal__textarea {
  width: 100%;
  padding: 12px 14px;
  background: #f9fbff;
  border: 1.5px solid #cddaff;
  border-radius: 12px;
  font-size: 14px;
  color: #1c1a16;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  outline: none;
  resize: vertical;
  min-height: 90px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.fupModal__textarea:focus {
  border-color: var(--site-cta-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--site-secondary-color);
}

.fupModal__textarea::placeholder {
  color: #b0ab9e;
}

.fupModal__input::placeholder {
  color: #b0ab9e;
}

/* ── Error message ── */
.fupModal__error {
  font-size: 12px;
  color: #e53e3e;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Footer ── */
.fupModalFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #cddaff;
  background: #ffffff;
}

.fupModalCancelBtn {
  height: 40px;
  padding: 0 20px;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  background: #ffffff;
  color: #808080;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.fupModalCancelBtn:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}

.fupModalSubmitBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  background: var(--site-cta-color);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}

.fupModalSubmitBtn:hover {
  background: #d44d1c;
  transform: translateY(-1px);
}

/* ── Override auto-select fields inside modal to match ── */
.fupModal .mat-form-field,
.fupModal app-auto-select-field .mat-form-field,
.fupModal app-auto-select-field-dynamic .mat-form-field {
  width: 100%;
}

.fupModal app-auto-select-field .form-control,
.fupModal app-auto-select-field-dynamic .form-control,
.fupModal app-auto-select-field input,
.fupModal app-auto-select-field-dynamic input {
  height: 44px !important;
  background: #f9fbff !important;
  border: 1.5px solid #cddaff !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  color: #1c1a16 !important;
  padding: 0 14px !important;
  box-shadow: none !important;
  font-family: var(
    --site-primary-font,
    "Plus Jakarta Sans",
    sans-serif
  ) !important;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease !important;
}

.fupModal app-auto-select-field input:focus,
.fupModal app-auto-select-field-dynamic input:focus {
  border-color: var(--site-cta-color) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(240, 92, 41, 0.1) !important;
  outline: none !important;
}

/* Dropdown list panel */
.fupModal app-auto-select-field ul,
.fupModal app-auto-select-field-dynamic ul {
  border: 1.5px solid #cddaff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}

.fupModal app-auto-select-field ul li,
.fupModal app-auto-select-field-dynamic ul li {
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #1c1a16 !important;
  transition: background 0.12s ease !important;
}

.fupModal app-auto-select-field ul li:hover,
.fupModal app-auto-select-field-dynamic ul li:hover {
  background: #fff0eb !important;
  color: var(--site-cta-color) !important;
}

/* ===== End Manage Business Modern UI ===== */

/* ─────────────────────────────────────────────────────────────────────
   HAPPY-OR-NOT — Create / Edit Smiley Survey redesign
   ───────────────────────────────────────────────────────────────────── */

/* ── Two-column layout ── */
.honoFormLayout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.honoFormMain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.honoFormSidebar {
  width: 240px;
  flex-shrink: 0;
}

/* ── Card ── */
.honoFormCard {
  background: #ffffff;
  border: 1px solid #cddaff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.honoFormCard--sticky {
  position: sticky;
  top: 20px;
}

/* ── Card header ── */
.honoFormCardHeader {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid #cddaff;
  background: #ffffff;
}

.honoFormCardHeaderIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--site-secondary-color);
  border-radius: 10px;
  color: var(--site-primary-color);
  font-size: 18px;
  flex-shrink: 0;
}

.honoFormCardHeaderIcon--sm {
  width: 34px;
  height: 34px;
  font-size: 15px;
}

.honoFormCardHeaderLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #808080;
  margin: 0 0 2px;
  text-align: left;
}

.honoFormCardHeaderTitle {
  font-size: 15px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0;
  letter-spacing: -0.2px;
  text-align: left;
}

/* ── Collapsible toggle header ── */
.honoFormCardToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  border: none;
  background: #ffffff;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition: background 0.14s ease;
}

.honoFormCardToggle:hover {
  background: #f5f2ed;
}

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

.honoFormCard__chevron {
  font-size: 16px;
  color: #808080;
  transition: transform 0.2s ease;
}

/* ── Card body ── */
.honoFormCardBody {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid #cddaff;
}

.honoFormCardBody--hidden {
  display: none;
}

/* ── Field ── */

.honoField2Col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Label ── */
/* .honoLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #1c1a16;
  margin: 0;
}

.honoLabel__icon {
  color: var(--site-cta-color);
  font-size: 12px;
} */

.honoRequired {
  color: var(--site-cta-color);
  font-weight: 700;
}

/* ── Input / Select / Textarea ── */
.honoInput,
.honoSelect,
.honoTextarea {
  width: 100%;
  padding: 0 13px;
  height: 42px;
  background: #f9fbff !important;
  border: 1.5px solid #cddaff !important;
  border-radius: 10px;
  font-size: 13px;
  color: #1c1a16;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  outline: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.honoInput::placeholder,
.honoTextarea::placeholder {
  color: #b0ab9e;
}

.honoInput:focus,
.honoSelect:focus,
.honoTextarea:focus {
  border-color: var(--site-cta-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--site-secondary-color);
}

.honoTextarea {
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  resize: vertical;
  min-height: 100px;
}

.honoSelect {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23808080' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}

/* ── Smiley prompt chips ── */
.honoCheckGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.honoCheckChip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1.5px solid #cddaff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #808080;
  background: #f9fbff;
  cursor: pointer;
  transition: all 0.14s ease;
  user-select: none;
}

.honoCheckChip:hover {
  border-color: var(--site-cta-color);
  color: var(--site-cta-color);
}

.honoCheckChip--active {
  background: rgba(240, 92, 41, 0.08) !important;
  border-color: var(--site-cta-color) !important;
  color: var(--site-cta-color) !important;
  font-weight: 600;
}

/* ── Toggle rows ── */
.honoToggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.honoToggleLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #1c1a16;
  margin: 0;
}

.honoToggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.honoToggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.honoToggleSlider {
  position: absolute;
  inset: 0;
  background: #cddaff;
  border-radius: 22px;
  transition: background 0.2s ease;
}

.honoToggleSlider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.honoToggle input:checked + .honoToggleSlider {
  background: var(--site-cta-color);
}

.honoToggle input:checked + .honoToggleSlider::before {
  transform: translateX(18px);
}

/* ── Sidebar action buttons ── */
.honoSubmitBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 42px;
  background: #16a34a;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    background 0.15s ease,
    transform 0.1s ease;
  margin-bottom: 10px;
}

.honoSubmitBtn:hover {
  background: #d44d1c;
  transform: translateY(-1px);
}

.honoCancelBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 42px;
  background: #ffffff;
  color: #808080;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.honoCancelBtn:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}

/* ── Responsive ── (consolidated in the block below) */

/* ─────────────────────────────────────────────────────────────────────
   HONO LIST — Smiley Survey redesign
   ───────────────────────────────────────────────────────────────────── */

/* ── Card wrapper ── */
.honoCard {
  background: #ffffff;
  border: 1px solid #cddaff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

/* ── Toolbar ── */
.honoCardToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid #cddaff;
  background: #ffffff;
  flex-wrap: wrap;
}

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

.honoCardToolbarIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--site-secondary-color);
  border-radius: 12px;
  color: var(--site-primary-color);
  font-size: 20px;
  flex-shrink: 0;
}

.honoCardToolbarLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #808080;
  margin: 0 0 2px;
}

.honoCardToolbarTitle {
  font-size: 17px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0;
  letter-spacing: -0.3px;
}

.honoCard__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  background: var(--site-secondary-color);
  color: var(--site-cta-color);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

/* ── Create button (shared) ── */
.honoCreateBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  background: var(--site-cta-color);
  color: #ffffff !important;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  text-decoration: none !important;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
  white-space: nowrap;
}

.honoCreateBtn:hover {
  background: #d44d1c;
  transform: translateY(-1px);
  color: #ffffff !important;
}

/* ── Empty state ── */
.honoEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 24px;
  text-align: center;
  gap: 12px;
}

.honoEmptyIcon {
  font-size: 48px;
  color: #cddaff;
  line-height: 1;
}

.honoEmptyTitle {
  font-size: 18px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0;
}

.honoEmptySub {
  font-size: 14px;
  color: #808080;
  margin: 0 0 8px;
  max-width: 340px;
}

/* ── Table ── */
.honoTable__wrap {
  width: 100%;
}

.honoTable__scroll {
  overflow: visible;
  width: 100%;
}

@media (max-width: 768px) {
  .honoTable__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.honoTable {
  width: 100%;
  border-collapse: collapse;
}

.honoTable thead tr {
  background: #ffffff;
  border-bottom: 1px solid #cddaff;
}

.honoTable thead th {
  padding: 12px 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #808080;
  text-align: left;
  white-space: nowrap;
}

.honoTableThActions {
  width: 1%;
  white-space: nowrap;
  text-align: right !important;
}

.honoTable td {
  padding: 14px 20px;
  vertical-align: middle;
}

.honoTableTdActions .dropdown {
  display: flex;
  justify-content: right;
}

.honoActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.honoAction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border: 1px solid #cddaff;
  border-radius: 8px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 500;
  color: #808080;
  cursor: pointer;
  text-decoration: none !important;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition: all 0.14s ease;
  white-space: nowrap;
}

.honoAction:hover {
  border-color: transparent;
}

.honoAction--publish:hover {
  background: rgba(34, 85, 232, 0.08);
  color: #2255e8;
  border-color: rgba(34, 85, 232, 0.2);
}

.honoAction--analytics:hover {
  background: rgba(240, 92, 41, 0.08);
  color: var(--site-cta-color);
  border-color: rgba(240, 92, 41, 0.2);
}

.honoAction--view:hover {
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.2);
}

.honoAction--edit:hover {
  background: rgba(161, 130, 14, 0.08);
  color: #927a00;
  border-color: rgba(161, 130, 14, 0.2);
}

.honoAction--delete {
  border: none;
  background: transparent;
}

.honoAction--delete:hover {
  background: rgba(229, 62, 62, 0.08);
  color: #e53e3e;
  border-color: rgba(229, 62, 62, 0.2);
  border: 1px solid rgba(229, 62, 62, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────
   COMPANY EMPLOYEES (famous-one-member) redesign
   ───────────────────────────────────────────────────────────────────── */

/* ── Modal shell ── */
.empModal {
  border-radius: 18px !important;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.14) !important;
}

/* ── Modal header ── */
.empModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: #ffffff;
  border-bottom: 1px solid #cddaff;
}

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

.empModalIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--site-secondary-color);
  color: var(--site-primary-color);
  font-size: 18px;
  flex-shrink: 0;
}

.empModalLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #808080;
  margin: 0 0 2px;
}

.empModalTitle {
  font-size: 15px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0;
  letter-spacing: -0.2px;
}

.empModalClose {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid #cddaff;
  border-radius: 8px;
  background: #fff;
  color: #808080;
  cursor: pointer;
  font-size: 13px;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.empModalClose:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}

/* ── Modal body ── */
.empModalBody {
  padding: 22px 22px 0;
}

/* ngb-modal scrollable: targets .modal-body, but we use .empModalBody */
.modal-dialog-scrollable .empModalBody {
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Field ── */

.bdFormField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.bdFormField--sm {
  flex: 0 0 110px;
}

.bdFormField--grow {
  flex: 1;
}

/* ── Row (side-by-side) ── */
.empRow {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.bdInputRequired {
  color: var(--site-cta-color);
  font-weight: 700;
}

/* ── Input / Select ── */
.empInput,
.empSelect {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  background: #f9fbff;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  color: #1c1a16;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  outline: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.empInput::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.empInput:focus,
.empSelect:focus {
  border-color: var(--site-cta-color);
  background: #fff;
  box-shadow: 0 0 0 3px var(--site-secondary-color);
}

/* ── Error ── */
.empError {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #ef4444;
  font-weight: 500;
  margin: 0;
}

/* ── Footer ── */
.empModalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 0 22px;
  border-top: 1px solid #cddaff;
  margin-top: 6px;
}

.empCancelBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  background: #ffffff;
  color: #808080;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.empCancelBtn:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}

.empSubmitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 22px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}

.empSubmitBtn:hover {
  background: #c93a08;
  transform: translateY(-1px);
}

.empSubmitBtn:disabled,
.empSubmitBtn[disabled] {
  background: #f0b49a;
  cursor: not-allowed;
  transform: none;
}

/* ── Department table rows ── */
.deptNameCell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deptAvatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--site-secondary-color);
  color: var(--site-cta-color);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.deptNameText {
  font-size: 14px;
  font-weight: 500;
  color: #1c1a16;
  text-transform: capitalize;
}

/* ── Department action buttons ── */
.deptActions {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 6px;
}

.deptActionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid #cddaff;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.deptActionBtn--edit {
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.2);
  background: rgba(59, 130, 246, 0.06);
}

.deptActionBtn--edit:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: #3b82f6;
}

.deptActionBtn--delete {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.06);
}

.deptActionBtn--delete:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
}

/* ── Toolbar right section ── */
.memberToolbarRight {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Search ── */
.memberSearch {
  position: relative;
  display: flex;
  align-items: center;
}

.memberSearchIcon {
  position: absolute;
  left: 12px;
  color: #808080;
  font-size: 13px;
  pointer-events: none;
}

.memberSearchInput {
  height: 38px;
  padding: 0 14px 0 34px;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  background: #f9fbff;
  font-size: 13px;
  color: #1c1a16;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  outline: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
  width: 200px;
}

.memberSearchInput:focus {
  border-color: var(--site-cta-color);
  background: #fff;
}

.memberSearchInput::placeholder {
  color: #9ca3af;
}

/* ── Outline button (Manage Dept) ── */
.memberOutlineBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  background: #ffffff;
  color: #1c1a16;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

.memberOutlineBtn:hover {
  border-color: #1c1a16;
}

/* ── Table column widths ── */
.memberThName {
  width: 240px;
  padding-left: 20px !important;
}

/* ── Name cell with avatar ── */
.memberTdName {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 20px !important;
}

.memberAvatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--site-secondary-color);
  color: var(--site-primary-color);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0;
}

.memberNameText {
  font-size: 14px;
  font-weight: 600;
  color: #1c1a16;
}

/* ── Muted cell text ── */
.honoTable__muted {
  font-size: 13px;
  color: #808080;
}

/* ── Ellipsis action button ── */
.memberActionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid #cddaff;
  border-radius: 8px;
  background: #fff;
  color: #808080;
  cursor: pointer;
  font-size: 14px;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.memberActionBtn:hover {
  border-color: #1c1a16;
  color: #1c1a16;
  background: #f9fbff;
}

/* ── Dropdown menu ── */
.memberDropdown {
  border-radius: 12px !important;
  border: 1px solid #cddaff !important;
  padding: 6px !important;
  min-width: 200px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.memberDropdownItem {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1c1a16 !important;
  cursor: pointer;
  transition: background 0.12s ease;
}

.memberDropdownItem:hover {
  background: #f9fbff !important;
  color: #1c1a16 !important;
}

.memberDropdownItem--danger:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
}

.memberDropdownItem--danger:hover .memberDropdownIcon {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

/* ── Dropdown icons ── */
.memberDropdownIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(240, 92, 41, 0.08);
  color: var(--site-cta-color);
  font-size: 13px;
  flex-shrink: 0;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.memberDropdownIcon--edit {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.memberDropdownIcon--delete {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.memberDropdownIcon--access {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

/* ─────────────────────────────────────────────────────────────────────
   BLOG PAGE — branding-blog redesign
   ───────────────────────────────────────────────────────────────────── */

/* ── Layout ── */
.blogLayout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.blogGridCol {
  flex: 1;
  min-width: 0;
}

/* ── Toolbar ── */
.blogToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid #cddaff;
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

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

.blogToolbarIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--site-secondary-color);
  border-radius: 12px;
  color: var(--site-cta-color);
  font-size: 20px;
  flex-shrink: 0;
}

.blogToolbarLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #808080;
  margin: 0 0 2px;
}

.blogToolbar__title {
  font-size: 17px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0;
  letter-spacing: -0.3px;
}

.blogAddBtn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  background: var(--site-cta-color);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    background 0.15s ease,
    transform 0.1s ease;
  white-space: nowrap;
}

.blogAddBtn:hover {
  background: #d44d1c;
  transform: translateY(-1px);
}

/* ── Empty state ── */
.blogEmpty {
  text-align: center;
  padding: 64px 24px;
  background: #ffffff;
  border: 1px dashed #cddaff;
  border-radius: 16px;
}

.blogEmptyIcon {
  font-size: 42px;
  color: #cddaff;
  margin-bottom: 16px;
}

.blogEmptyTitle {
  font-size: 18px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0 0 8px;
}

.blogEmptySub {
  font-size: 14px;
  color: #808080;
  margin: 0;
}

/* ── Cards grid ── */
.blogCards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.blogLayoutWithPanel .blogCards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* ── Individual card ── */
.blogCard {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #cddaff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 16px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.blogCard:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.09),
    0 12px 32px rgba(0, 0, 0, 0.07);
}

.blogCardImgWrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f8f9ff;
}

.blogCardImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.blogCard:hover .blogCardImg {
  transform: scale(1.04);
}

.blogCardBody {
  flex: 1;
  padding: 14px 16px 10px;
}

.blogCardTitle {
  font-size: 15px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogCardText {
  font-size: 13px;
  color: #808080;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogCardFooter {
  display: flex;
  align-items: center;
  border-top: 1px solid #f0ede7;
  padding: 0;
}

.blogCardAction {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 8px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    background 0.14s ease,
    color 0.14s ease;
  color: #808080;
}

.blogCardAction + .blogCardAction {
  border-left: 1px solid #f0ede7;
}

.blogCardAction--edit:hover {
  background: #fff5f2;
  color: var(--site-cta-color);
}

.blogCardAction--delete:hover {
  background: #fff5f5;
  color: #e53e3e;
}

.blogCardAction--share:hover {
  background: #f0f7ff;
  color: #2255e8;
}

/* ── Add/Edit Panel ── */
.blogPanel {
  width: 360px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #cddaff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09);
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
}

.blogPanelHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: #ffffff;
  border-bottom: 1px solid #cddaff;
  flex-shrink: 0;
}

.blogPanelHeaderIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--site-secondary-color);
  border-radius: 10px;
  color: var(--site-cta-color);
  font-size: 16px;
  flex-shrink: 0;
}

.blogPanelHeaderLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #808080;
  margin: 0 0 2px;
}

.blogPanelHeaderTitle {
  font-size: 15px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0;
}

.blogPanelCloseBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #cddaff;
  border-radius: 8px;
  background: #ffffff;
  color: #808080;
  font-size: 18px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease;
  line-height: 1;
}

.blogPanelCloseBtn:hover {
  background: #fff0eb;
  color: var(--site-cta-color);
  border-color: var(--site-cta-color);
}

.blogPanelBody {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bdInputRequired {
  color: var(--site-cta-color);
  font-weight: 700;
}

.blogPanelInput {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  background: #f9fbff;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  color: #1c1a16;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  outline: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.blogPanelInput:focus {
  border-color: var(--site-cta-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--site-secondary-color);
}

.blogPanelInputWrap {
  position: relative;
}

.blogPanelInputIcon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #808080;
  font-size: 13px;
  pointer-events: none;
}

.blogPanelInput--icon {
  padding-left: 36px;
}

.blogPanelTextarea {
  width: 100%;
  padding: 10px 13px;
  background: #f9fbff;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  color: #1c1a16;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  outline: none;
  resize: vertical;
  min-height: 90px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.blogPanelTextarea:focus {
  border-color: var(--site-cta-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--site-secondary-color);
}

.blogPanelTextarea::placeholder,
.blogPanelInput::placeholder {
  color: #b0ab9e;
}

.blogPanelSelect {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  background: #f9fbff;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  color: #1c1a16;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23808080' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  transition: border-color 0.15s ease;
}

.blogPanelSelect:focus {
  border-color: var(--site-cta-color);
  box-shadow: 0 0 0 3px var(--site-secondary-color);
}

.blogPanelError {
  font-size: 11px;
  color: #e53e3e;
  margin: 0;
}

/* ── Schedule radio chips ── */
.blogPanelRadioGroup {
  display: flex;
  gap: 8px;
}

.blogPanelRadioChip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #808080;
  background: #f9fbff;
  cursor: pointer;
  transition: all 0.14s ease;
  flex: 1;
  justify-content: center;
}

.blogPanelRadioChip:hover {
  border-color: var(--site-cta-color);
  color: var(--site-cta-color);
}

.blogPanelRadioChip--active {
  background: rgba(240, 92, 41, 0.08) !important;
  border-color: var(--site-cta-color) !important;
  color: var(--site-cta-color) !important;
  font-weight: 600;
}

/* ── Date/time row ── */
.blogPanelWhenRow {
  display: flex;
  gap: 10px;
}

.blogPanelWhenRow .bdFormField {
  flex: 1;
}

/* ── Social chips ── */
.blogPanelSocialGroup {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.blogPanelSocialChip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1.5px solid #cddaff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #808080;
  background: #f9fbff;
  cursor: pointer;
  transition: all 0.14s ease;
}

.blogPanelSocialChip:hover {
  border-color: #808080;
  color: #1c1a16;
}

.blogPanelSocialChip--fb {
  border-color: #1877f2 !important;
  color: #1877f2 !important;
  background: rgba(24, 119, 242, 0.06) !important;
}

.blogPanelSocialChip--ig {
  border-color: #e1306c !important;
  color: #e1306c !important;
  background: rgba(225, 48, 108, 0.06) !important;
}

.blogPanelSocialChip--tw {
  border-color: #000000 !important;
  color: #000000 !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

.blogPanelSocialChip--li {
  border-color: #0a66c2 !important;
  color: #0a66c2 !important;
  background: rgba(10, 102, 194, 0.06) !important;
}

/* ── Toggle switch (Show on website) ── */
.blogPanelToggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin: 0;
}

.blogPanelToggleLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1c1a16;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.blogPanelToggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.blogPanelToggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.blogPanelToggleSlider {
  position: absolute;
  inset: 0;
  background: #cddaff;
  border-radius: 22px;
  transition: background 0.2s ease;
}

.blogPanelToggleSlider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.blogPanelToggle input:checked + .blogPanelToggleSlider {
  background: var(--site-cta-color);
}

.blogPanelToggle input:checked + .blogPanelToggleSlider::before {
  transform: translateX(18px);
}

/* ── File upload wrapper ── */
.blogPanelUploadWrap {
  background: #f9fbff;
  border: 1.5px dashed #cddaff;
  border-radius: 12px;
  padding: 12px;
  transition: border-color 0.14s ease;
}

.blogPanelUploadWrap:hover {
  border-color: var(--site-cta-color);
}

/* ── Panel footer ── */
.blogPanelFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #cddaff;
  background: #ffffff;
  flex-shrink: 0;
}

.blogPanelCancelBtn {
  height: 38px;
  padding: 0 18px;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  background: #ffffff;
  color: #808080;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    border-color 0.14s ease,
    color 0.14s ease;
}

.blogPanelCancelBtn:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}

.blogPanelSubmitBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  background: var(--site-cta-color);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    background 0.14s ease,
    transform 0.1s ease;
}

.blogPanelSubmitBtn:hover {
  background: #d44d1c;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════
   CAMELCASE ALIASES — maps renamed HTML classes to their styles
   All new classes use camelCase going forward (no BEM __ or --)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── fupModal camelCase ─────────────────────────────────────────── */
.fupModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid #cddaff;
  background: #ffffff;
}

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

.fupModalHeaderIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--site-secondary-color);
  border-radius: 12px;
  color: var(--site-cta-color);
  font-size: 18px;
  flex-shrink: 0;
}

.fupModalHeaderLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #808080;
  margin: 0 0 2px;
}

.fupModalHeaderTitle {
  font-size: 17px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0;
  letter-spacing: -0.3px;
}

.fupModalBody {
  padding: 24px;
  overflow-y: auto;
}

.fupModalFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #cddaff;
  background: #ffffff;
}

.fupModalCancelBtn {
  height: 40px;
  padding: 0 20px;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  background: #ffffff;
  color: #808080;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.fupModalCancelBtn:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}

.fupModalSubmitBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  background: var(--site-cta-color);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}

.fupModalSubmitBtn:hover {
  background: #d44d1c;
  transform: translateY(-1px);
}

.fupModalWhenRow {
  display: flex;
  gap: 10px;
}

/* ─── honoCard (hono-list) camelCase ─────────────────────────────── */

.honoCardToolbarRight {
  display: flex;
  align-items: center;
}

.honoCardPagination {
  padding: 12px 20px;
  border-top: 1px solid #cddaff;
  background: #ffffff;
}

.honoTableThNum {
  width: 64px;
}

.honoTableThQuestion {
  width: auto;
}

.honoTableThActions {
  width: 340px;
  text-align: right !important;
}

.honoTableRow {
  border-bottom: 1px solid #f0ede7;
  transition: background 0.14s ease;
}

.honoTableRow:last-child {
  border-bottom: none;
}

.honoTableRow:hover {
  background: #fdfcfa;
}

.honoTableNumBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #f8f9ff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #808080;
}

.honoTableQuestionText {
  font-size: 14px;
  font-weight: 500;
  color: #1c1a16;
  line-height: 1.4;
}

.honoTableTdActions {
  text-align: right;
}

/* ─── duplicate removed — canonical definitions are at line ~24733 ─── */

/* ─── blog camelCase ─────────────────────────────────────────────── */
.blogLayoutWithPanel .blogCards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.blogGridCol {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.blogToolbarIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--site-secondary-color);
  border-radius: 12px;
  color: var(--site-cta-color);
  font-size: 20px;
  flex-shrink: 0;
}

.blogToolbarLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #808080;
  margin: 0 0 2px;
}

.blogCardImgWrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f8f9ff;
}

.blogCardImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.blogCard:hover .blogCardImg {
  transform: scale(1.04);
}

.blogCardBody {
  flex: 1;
  padding: 14px 16px 10px;
}

.blogCardTitle {
  font-size: 15px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogCardText {
  font-size: 13px;
  color: #808080;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogCardFooter {
  display: flex;
  align-items: center;
  border-top: 1px solid #f0ede7;
  padding: 0;
}

.blogCardAction {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 8px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  transition:
    background 0.14s ease,
    color 0.14s ease;
  color: #808080;
}

.blogCardAction + .blogCardAction {
  border-left: 1px solid #f0ede7;
}

.blogCardAction--edit:hover {
  background: #fff5f2;
  color: var(--site-cta-color);
}

.blogCardAction--delete:hover {
  background: #fff5f5;
  color: #e53e3e;
}

.blogCardAction--share:hover {
  background: #f0f7ff;
  color: #2255e8;
}

/* Blog panel camelCase */
.blogPanelHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: #ffffff;
  border-bottom: 1px solid #cddaff;
  flex-shrink: 0;
}

.blogPanelHeaderIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--site-secondary-color);
  border-radius: 10px;
  color: var(--site-cta-color);
  font-size: 16px;
  flex-shrink: 0;
}

.blogPanelHeaderLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #808080;
  margin: 0 0 2px;
}

.blogPanelHeaderTitle {
  font-size: 15px;
  font-weight: 700;
  color: #1c1a16;
  margin: 0;
}

.blogPanelCloseBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #cddaff;
  border-radius: 8px;
  background: #ffffff;
  color: #808080;
  font-size: 18px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease;
}

.blogPanelCloseBtn:hover {
  background: #fff0eb;
  color: var(--site-cta-color);
  border-color: var(--site-cta-color);
}

.blogPanelBody {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bdFormField {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label bdCustomLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1c1a16;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.form-label bdCustomLabelIcon {
  color: var(--site-cta-color);
  font-size: 12px;
}

.bdInputRequired {
  color: var(--site-cta-color);
  font-weight: 700;
}

.blogPanelInput {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  background: #f9fbff;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  color: #1c1a16;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  outline: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.blogPanelInput:focus {
  border-color: var(--site-cta-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--site-secondary-color);
}

.blogPanelInput--icon {
  padding-left: 36px;
}

.blogPanelInputWrap {
  position: relative;
}

.blogPanelInputIcon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #808080;
  font-size: 13px;
  pointer-events: none;
}

.blogPanelTextarea {
  width: 100%;
  padding: 10px 13px;
  background: #f9fbff;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  color: #1c1a16;
  font-family: var(--site-primary-font, "Plus Jakarta Sans", sans-serif);
  outline: none;
  resize: vertical;
  min-height: 90px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.blogPanelTextarea:focus {
  border-color: var(--site-cta-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--site-secondary-color);
}

.blogPanelError {
  font-size: 11px;
  color: #e53e3e;
  margin: 0;
}

.blogPanelRadioGroup {
  display: flex;
  gap: 8px;
}

.blogPanelRadioChip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid #cddaff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #808080;
  background: #f9fbff;
  cursor: pointer;
  transition: all 0.14s ease;
  flex: 1;
  justify-content: center;
}

.blogPanelRadioChip:hover {
  border-color: var(--site-cta-color);
  color: var(--site-cta-color);
}

.blogPanelRadioChip--active {
  background: rgba(240, 92, 41, 0.08) !important;
  border-color: var(--site-cta-color) !important;
  color: var(--site-cta-color) !important;
  font-weight: 600;
}

.blogPanelWhenRow {
  display: flex;
  gap: 10px;
}

.blogPanelSocialGroup {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════
   DEALS COMPONENT
   ═══════════════════════════════════════════════════ */

/* Error message alias for hono-style forms */
.honoError {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #ef4444;
  font-weight: 500;
  margin: 4px 0 0;
}

/* Custom Tab Nav — bleeds to edges of bdMgrPageBody and sticks to top */
.dealsTabNav {
  display: flex;
  gap: 6px;
  background: #fff;
  border-bottom: 1px solid #cddaff;
  padding: 0 20px;
  margin: -24px -32px 0px;
  flex-wrap: wrap;
}

.dealsTabBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: #7a6a5a;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition:
    color 0.18s,
    border-color 0.18s;
  white-space: nowrap;
  margin-bottom: -1px;
}

.dealsTabBtn:hover {
  color: var(--site-cta-color);
}

.dealsTabBtn--active {
  color: var(--site-cta-color);
  border-bottom-color: var(--site-cta-color);
  font-weight: 600;
}

/* Dashboard Tab */
.dealsDashPanel {
  padding: 4px 0;
}

.dealsDashImgWrap {
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.dealsDashImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 280px;
  display: block;
}

.dealsDashActionCard {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 36px 28px;
}

.dealsDashIconWrap {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--site-cta-color) 0%, #e0461a 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  margin-bottom: 4px;
}

.dealsDashTitle {
  font-size: 22px;
  font-weight: 700;
  color: #2b2118;
  margin: 0;
}

.dealsDashSub {
  font-size: 14px;
  color: #7a6a5a;
  margin: 0;
  line-height: 1.5;
}

/* Deal action buttons in table */
.dealActions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 6px;
}

.deptActionBtn--manage {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s,
    color 0.18s;
}

.deptActionBtn--manage:hover {
  background: #2e7d32;
  color: #fff;
}

/* Deal status badges */
.dealsBadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}

.dealsBadge--success {
  background: #e8f5e9;
  color: #2e7d32;
}

.dealsBadge--warning {
  background: #fff3e0;
  color: #e65100;
}

/* Stepper content body */
.dealsStepBody {
  padding: 24px 20px 8px;
}

/* Stepper footer action bar */
.dealsStepFooter {
  border-top: 1px solid #cddaff;
  padding: 16px 20px;
  margin: 0;
  background: #f9fbff;
  border-radius: 0 0 14px 14px;
}

/* Deal schedule section */
.dealsSchedule {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #cddaff;
}

/* Loading card */
.dealsLoadingCard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  padding: 40px;
}

.dealsLoadingText {
  font-size: 15px;
  color: #7a6a5a;
}

/* --- Merged from manager-extra-styles.css --- */

/* --- src/app/TestComponents/booking-form/booking-form.component.scss --- */
.cManikBooking {
  background-color: #0000001f;
  color: #000;
  padding: 20px 10px;
  float: left;
  width: 100%;
  font-size: 14px;
  border-bottom: 3px #ff7d30a6 solid;
}

.cManikBooking div {
  display: inline;
  float: left;
  width: 15%;
  margin: 0px 2px;
}

.cManikDatePic {
  width: 100%;
  border: 1px #ccc solid;
  line-height: 34px;
  border-radius: 5px;
}

.cManikBooking .cManikBookingMinWidth {
  width: 8%;
}

.cManikBooking input {
  height: 38px;
  font-size: 12px;
}

.cManikBooking select {
  height: 38px;
  font-size: 12px;
}

.cManikBooking .cManikBookingButton {
  text-align: center;
  width: 6%;
  margin-top: 29px;
}

.cManikBookingButton button {
  text-align: center;
  width: 100%;
  color: #fff;
  font-weight: bold;
}

/* --- src/app/auth/login-my-self-otp/login-my-self-otp.component.css --- */

/* --- src/app/auth/login-my-self/login-my-self.component.css --- */

.form-floating > .form-control {
  padding: 20px 2px;
  padding-bottom: 0;
  border: 1px solid #ced4da;
  border-bottom: 1px solid #ddd;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/* --- src/app/auth/login-otp/login-otp.component.css --- */

.loginFormWrapper {
  min-height: 100vh;
}

.input-group {
  align-items: stretch;
}

.input-group > .input-group-text {
  height: auto !important;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* --- src/app/auth/login/login.component.css --- */

.googleSignInBtn {
  border: 1.5px solid #e2e2ec !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px !important;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.googleSignInBtn:hover {
  border-color: #b0b0c8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09) !important;
  background-color: #fafafa !important;
}

.googleIcon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.loginFormWrapper {
  min-height: 100vh;
}

/* --- src/app/auth/update-password/update-password.component.css --- */

.loginFormWrapper {
  min-height: 100vh;
}

.input-group {
  align-items: stretch;
}

.input-group > .input-group-text {
  height: auto !important;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* --- src/app/auth/welcome/big-dot-website-pro/big-dot-website-pro.component.css --- */

:host-context(.bdMgrWebViewUpgrade) .bdMgrWebLangBtn {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}

:host-context(.bdMgrWebViewUpgrade) .bdMgrWebLangBtn:hover {
  background: #f1f5f9;
}

.bdMgrWebLangDd {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  width: 180px;
  padding: 6px;
  z-index: 1000;
  display: none;
  animation: bdMgrFadeIn 0.2s ease;
}

.bdMgrWebLangDd.bdMgrDdOpen {
  display: block;
}

.bdMgrWebLangOpt {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s;
}

.bdMgrTopnav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 40px !important;
  height: 64px !important;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1001;
}

.bdMgrWebNavLeft {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.bdMgrWebNavCenter {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
}

.bdMgrWebNavRight {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.bdMgrWebLangSel {
  position: relative;
  display: flex;
  align-items: center;
}

.bdMgrWebLangBtn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.bdMgrWebLangBtn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.bdMgrWebLangOpt:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.bdMgrWebLangOpt--selected {
  color: #2563eb;
  background: #eff6ff;
  font-weight: 600;
}

.bdMgrAvatarWrap {
  position: relative;
}

.bdMgrAvatarDropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 240px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 8px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bdMgrAvatarDropdown.bdMgrDdOpen {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

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

.bdMgrAvatarDdAvatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #3b82f6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

.bdMgrAvatarDdName {
  font-weight: 600;
  color: #1e293b;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdMgrAvatarDdEmail {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdMgrAvatarDdDivider {
  height: 1px;
  background: #f1f5f9;
  margin: 8px 0;
}

.bdMgrAvatarDdItem {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 10px;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}

.bdMgrAvatarDdItem:hover {
  background: #f8fafc;
  color: #1e293b;
}

.bdMgrAvatarDdItem--danger {
  color: #ef4444;
}

@keyframes bdMgrFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* --- src/app/auth/welcome/bookingWizard/stepFour/step-four/step-four.component.css --- */
.uploadedImageWrapper {
  position: relative;
  display: inline-block;
}

.uploadedPreview {
  width: 100%;
  max-width: 180px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.removeImageBtn {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-weight: bold;
  line-height: 18px;
}

/* --- src/app/auto-mobile/add-listing/add-listing.component.css --- */
.displayMonth,
.displayYear {
  position: absolute;
  top: 40px;
  left: 20px;
  min-width: 200px;
  background-color: #fff;
}

/* --- src/app/business-card/business-card-action/business-card-action.component.css --- */
.memberList {
  max-height: 300px;
  overflow-y: auto;
  position: relative;
}

.cdk-drag-placeholder {
  opacity: 1 !important;
}

.memberButton {
  margin-bottom: 4px !important;
  display: block;
}

.memberButton .p-2 {
  min-height: 48px !important;
  display: flex;
  align-items: center;
  width: 100%;
}

.drag-placeholder {
  height: 48px !important;
  margin: 4px 0 !important;
  border: 2px dotted #ff4d94 !important;
  border-radius: 6px !important;
  background-color: rgba(255, 77, 148, 0.08) !important;
  box-sizing: border-box !important;
}

/* --- src/app/business-card/manage-card/manage-card.component.css --- */

/* --- src/app/business-card/paper-business-card/paper-business-card.component.css --- */
.small {
  font-size: 10px;
}

.mainWrapper {
  display: flex;
  margin-top: 10pt;
}

.mainWrapper {
  margin: 0px auto;
  width: 30rem;
}

.mainWrapper {
  display: flex;
  align-items: center;
}

.cardLeft {
  width: 50%;
}

.cardRight {
  width: 50%;
  margin-left: 5pt;
}

.visitingCard .wrapper {
  position: relative;
}

.visitingCard .wrapper .cardBg {
  max-width: 375px;
  position: absolute;
  z-index: -1;
  height: 205px;
}

.visitingCard .wrapper .cardUserImg {
  width: 90px;
  height: 100px;
  object-fit: cover;
  position: absolute;
  right: 62px;
  top: 65px;
}

.visitingCard .cardTextWrapper {
  width: 50%;
  padding: 20px;
  box-shadow: 1px 1px 18px 1px rgb(0 0 0 / 8%);
}

.visitingCard .cardTextWrapper h2 {
  color: white;
  font-size: 30px;
  font-family: auto;
  margin-bottom: 0;
  margin-top: 0;
}

.visitingCard .cardTextWrapper em {
  color: white;
}

.visitingCard .cardTextWrapper ul {
  padding: 0;
  margin: 0;
  margin-top: 20px;
}

.visitingCard .cardTextWrapper ul li {
  list-style: none;
  color: white;
  margin-bottom: 10px;
  font-size: 12px;
  display: flex;
  font-weight: 300;
}

.visitingCard .cardTextWrapper ul li svg {
  width: 16px;
  fill: white;
  margin-right: 10px;
}

.visitingCard .cardTextWrapper2 .rightShape {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
}

.card1 .left {
  margin-right: 20px;
  width: 20%;
}

.card1 .right {
  width: 80%;
  padding-right: 30px;
}

.card1 .left .logo {
  width: 80px;
}

.card1 .left .qrCode {
  width: 70px;
  display: block;
  margin: auto;
  margin-top: 40px;
  border: 2px solid #cdd3ff;
}

.visitingCard .card1 .rightShape .shape1 {
  height: 100%;
  width: 100px;
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 105% 100%);
  background-color: #6775d6;
}

.visitingCard .card1 .rightShape .shape2 {
  height: 100%;
  width: 100px;
  clip-path: polygon(105% 0, 100% 0, 100% 100%, 60% 100%);
  background: #3544a7;
  position: absolute;
  top: 0;
  z-index: 0;
}

.card2 .right {
  margin-right: 25px;
  width: 80%;
}

.card2 .left {
  width: 20%;
}

.card2 .left .logo {
  width: 85px;
}

.card2 .left .qrCode {
  width: 70px;
  display: block;
  margin: auto;
  margin-top: 0px;
  border: 2px solid #ffcadc;
  position: relative;
  top: 35px;
}

.card2 .rightShape {
  left: 0px;
  width: 15px;
}

.card2 ul li {
  padding-right: 0px !important;
}

.card2 ul li svg {
  fill: #e91e63 !important;
  width: 16px !important;
}

.visitingCard .card2 {
  background-color: #fff8fa !important;
  padding: 30px 35px !important;
  align-items: center;
  padding-right: 15px !important;
}

.visitingCard .card2 .designation {
  color: gray;
}

.visitingCard .card2 .designation small {
  margin-left: 10px;
  color: #e91e63;
}

.visitingCard .card2 .rightShape .shape1 {
  height: 33.33%;
  width: 15px;
  background-color: #e91e63;
}

.visitingCard .card2 .rightShape .shape2 {
  height: 33.33%;
  width: 15px;
  background-color: #9c27b0;
}

.visitingCard .card2 .rightShape .shape3 {
  height: 33.33%;
  width: 15px;
  background-color: #03a9f4;
}

.visitingCard .cardTextWrapper2 {
  padding: 30px 20px;

  display: flex;
  background: #f7f7f7;
  position: relative;
  height: 195px;
  align-items: center;
}

.visitingCard .cardTextWrapper2.card1::after {
  background: #34495e;
  width: 100px;
  height: 100%;
  top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%);
}

.visitingCard .cardTextWrapper2.card1::before {
  background: #2c3e50;
  width: 80px;
  height: 120px;
  bottom: 0;
  clip-path: polygon(0 100%, 40% 0, 100% 100%);
}

.visitingCard .cardTextWrapper2 .companyLogo {
  width: 75px;
  margin-right: 20px;
  margin-top: 10px;
}

.visitingCard .card1 h2 {
  color: #6775d6;
  font-size: 16px;
  margin-bottom: 0;
  margin-top: 0px;
  font-weight: 500 !important;
}

.visitingCard .card2 h2 {
  color: #e91e63;
  font-size: 16px;
  margin-bottom: 0;
  margin-top: 0px;
  font-weight: 500 !important;
}

.visitingCard .cardTextWrapper2 .designation {
  font-size: 12px;
  margin-top: 0;
}

.visitingCard .card1 .designation {
  background-color: #6775d6;
  color: white;
  display: initial;
  padding: 2px 5px;
  font-size: 12px;
  border-radius: 5px;
}

.visitingCard .card1 ul {
  margin-top: 15px !important;
  padding-top: 15px !important;
  border-top: 1px solid #ddd;
}

.visitingCard .card2 ul {
  margin-top: 15px !important;
  padding-top: 15px !important;
  border-top: 1px solid #ddd;
}

.visitingCard .cardTextWrapper2 ul {
  margin: 0px;
  padding: 0px;
}

.visitingCard .cardTextWrapper2 ul li {
  list-style: none;
  font-size: 13px;
  padding-right: 25px;
  margin-bottom: 10px;
  color: #757575;
  display: flex;
  align-items: baseline;
}

.visitingCard .cardTextWrapper2 ul li svg {
  width: 14px;
  height: 14px;
  fill: #6775d6;
  margin-right: 5px;
}

.visitingCard .cardTextWrapper3 {
  padding: 20px 25px;
  box-shadow: 1px 1px 18px 1px rgb(0 0 0 / 8%);
  display: flex;
}

.visitingCard .cardTextWrapper3 .companyLogo {
  width: 75px;
  margin-right: 20px;
  margin-top: 30px;
}

.visitingCard .cardTextWrapper3 h2 {
  color: #abcdbe;
  font-size: 25px;
  margin-bottom: 0;
  margin-top: 0;
}

.visitingCard .cardTextWrapper3 .designation {
  font-size: 14px;
  position: relative;
}

.visitingCard .cardTextWrapper3 .designation::after {
  content: "";
  width: 50px;
  height: 2px;
  background-color: #abcdbe;
  display: block;
  margin-top: 10px;
}

.visitingCard .cardTextWrapper3 ul {
  margin: 0px;
  padding: 0px;
}

.visitingCard .cardTextWrapper3 ul li {
  list-style: none;
  font-size: 12px;
  margin-bottom: 5px;
}

.visitingCard .cardTextWrapper3 ul li svg {
  width: 14px;
  fill: #abcdbe;
  margin-right: 5px;
}

.bleedingArea {
  padding: 10px;
  border: 1px dashed darkgray;
  padding-bottom: 10px;
  margin: 25px;
  width: 440px;
  position: relative;
}

.bleedingArea .scissor {
  width: 16px;
  height: 16px;
  position: absolute;
  top: -10px;
  left: 15px;
}

.bleedingArea .topRight {
  width: 20px;
  height: 0px;
  border: 1px dashed darkgray;
  display: block;
  position: absolute;
  right: -20px;
  top: -1px;
}

.bleedingArea .topLeft {
  width: 20px;
  height: 0px;
  border: 1px dashed darkgray;
  display: block;
  position: absolute;
  left: -20px;
  top: -1px;
}

.bleedingArea .topRightTop {
  width: 0px;
  height: 20px;
  border: 1px dashed darkgray;
  display: block;
  position: absolute;
  right: -1px;
  top: -20px;
}

.bleedingArea .topLeftTop {
  width: 0px;
  height: 20px;
  border: 1px dashed darkgray;
  display: block;
  position: absolute;
  left: -1px;
  top: -20px;
}

.bleedingArea .bottomRight {
  width: 20px;
  height: 0px;
  border: 1px dashed darkgray;
  display: block;
  position: absolute;
  right: -20px;
  bottom: -1px;
}

.bleedingArea .bottomLeft {
  width: 20px;
  height: 0px;
  border: 1px dashed darkgray;
  display: block;
  position: absolute;
  left: -20px;
  bottom: -1px;
}

.bleedingArea .bottomRightTop {
  width: 0px;
  height: 20px;
  border: 1px dashed darkgray;
  display: block;
  position: absolute;
  right: -1px;
  bottom: -20px;
}

.bleedingArea .bottomLeftTop {
  width: 0px;
  height: 20px;
  border: 1px dashed darkgray;
  display: block;
  position: absolute;
  left: -1px;
  bottom: -20px;
}

.iconInfo {
  width: 15px;
  padding-right: 10px;
}

.card3 .toprows {
  display: flex;
  align-items: center;
  height: unset;
}

.card3 .toprows .item60 {
  width: 60%;
  padding: 5px;
}

.card3 .toprows .item40 {
  width: 40%;
  padding: 5px;
}

.card3 h2 {
  margin-top: 0px;
  margin-bottom: 0;
  font-size: 16px;
}

.card3 h2 span {
  font-weight: 500;
}

.bg3E3E40 {
  background-color: #3e3e40 !important;
}

.bgFECB0D {
  background-color: #fecb0d !important;
}

.positionAbsolute {
  position: absolute;
  width: 100%;
}

.top {
  top: 0px;
}

.left {
  left: 0px;
  height: 100%;
}

.card3 ul {
  border-left: 2px solid #fecb0d;
  padding-left: 15px !important;
}

.card3 .logo {
  width: 85px;
  margin-top: 10px;
}

.card3 .qrCode {
  width: 70px;
  display: block;
  margin: auto;
  padding-top: 30px;
}

.card3 .left {
  padding-right: 25px;
}

.bottom {
  bottom: 0px;
}

.mr-0 {
  margin-right: 0px !important;
}

small {
  display: block;
  margin: 0px !important;
}

.no-record-center {
  height: 200px;
  text-align: center;
  margin: auto;
  line-height: 11;
}

/* --- src/app/citizen/purchasewizcard/purchase-wizcard/purchase-wizcard.component.css --- */
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

/* --- src/app/ecomm-order-handle/ecomm-order-handle.component.css --- */

div.selected {
  border: 1px solid black;
}

/* --- src/app/education/manage-class/fee/fee.component.css --- */
::ng-deep .mat-select-value,
::ng-deep .mat-select-placeholder {
  color: #000 !important;
}

::ng-deep .mat-select-arrow {
  color: #000 !important;
}

::ng-deep .mat-select-panel {
  background: #fff;
}

.acknowledgmentMessage {
  margin-top: 0px !important;
}

/* --- src/app/manage/manage-real-estate-listing/manage-real-estate-listing.component.css --- */
.honoTableThActions {
  text-align: right !important;
}

.honoTableActions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.honoActionBtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
}

.honoActionBtn--edit {
  border-color: #dbeafe;
  color: #3b82f6;
}

.honoActionBtn--edit:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.honoStatusBadge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.honoStatusBadge--pending {
  background: #fff7ed;
  color: var(--site-cta-color);
}

.honoStatusBadge--active {
  background: #f0fdf4;
  color: #16a34a;
}

/* --- src/app/manage/resume-and-personal-site/portfolio/portfolio.component.css --- */
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  vertical-align: middle;
  text-align: left;
  word-wrap: break-word;
}

th:last-child,
td:last-child {
  text-align: right;
  white-space: nowrap;
}

.editIcon,
.deleteIcon {
  display: inline-block;
  cursor: pointer;
}

.fa-pencil,
.fa-trash-can {
  /* margin-right: 8px; */
  color: #ff0000;
}

td {
  max-width: 300px;
  overflow-wrap: break-word;
}

/* --- src/app/manage/resume-and-personal-site/specialized-skills/specialized-skills.component.css --- */
.skill-tags .badge {
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 15px;
  background-color: #f0f0f5;
  color: #333;
}

.skill-box {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

.active-skill {
  background-color: #f15a25 !important;
  color: white !important;
  border-color: #f15a25 !important;
}

.customCard {
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.table-responsive {
  max-width: 100%;
  overflow-x: auto;
}

.actionBtn {
  width: 100px;
  display: flex;
  justify-content: space-around;
}

/* --- src/app/manik-library/manik-loader/manik-loader.component.scss --- */

.cManikButtonLoader {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 18px;
  top: -19px;
}

.cManikButtonLoader div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.cManikButtonLoader div:nth-child(1) {
  left: 6px;
  animation: cManikButtonLoader1 0.6s infinite;
}

.cManikButtonLoader div:nth-child(2) {
  left: 6px;
  animation: cManikButtonLoader2 0.6s infinite;
}

.cManikButtonLoader div:nth-child(3) {
  left: 26px;
  animation: cManikButtonLoader2 0.6s infinite;
}

.cManikButtonLoader div:nth-child(4) {
  left: 45px;
  animation: cManikButtonLoader3 0.6s infinite;
}

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

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

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

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

@keyframes cManikButtonLoader2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(19px, 0);
  }
}

.cBizloader {
  float: left;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

@keyframes cBizloader {
  0%,
  50% {
    transform: scale(0);
  }
}

/* --- src/app/modules/components/events_componets/filesView/files-view/files-view.component.css --- */
.rotate-image {
  transform: rotate(90deg);
}

/* --- src/app/modules/components/events_componets/slide/slide/slide.component.css --- */

.thumbnail-container {
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: #888 #333;
  text-align: center;
}

.thumbnail-container::-webkit-scrollbar {
  height: 8px;
}

.thumbnail-container::-webkit-scrollbar-track {
  background: #333;
  border-radius: 10px;
}

.thumbnail-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  border: 2px solid #333;
}

.thumbnail-item {
  position: relative;
  display: inline-block;
  margin: 0 4px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid transparent;
  transition: border-color 0.3s ease;
}

.thumbnail-item.active-thumbnail {
  border-color: #0d6efd;
}

.thumbnail-img {
  height: 70px;
  width: auto;
  display: block;
  border-radius: 5px;
}

.video-icon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  transition: background-color 0.3s ease;
}

.thumbnail-item:hover .video-icon-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.thumbnail-item.active-thumbnail .thumbnail-overlay {
  opacity: 1;
}

.uploadSiteContainer {
  background-color: #212529;
  min-height: 100vh;
}

.error-text,
.loading-text {
  color: white;
}

.fullscreenImg {
  max-height: 100vh;
  width: 100%;
  object-fit: contain;
}

.actions-container .btn,
.backToUpload {
  color: white;
}

.carousel-box {
  height: 70vh;
}

.slide-content-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.slide-content-wrapper.video-slide {
  cursor: pointer;
}

.slide-content-wrapper img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.main-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 6rem;
  pointer-events: none;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.slide-content-wrapper.video-slide:hover .main-video-overlay {
  color: #fff;
  transform: scale(1.1);
}

.video-player-container-inline {
  width: 100%;
  height: 100%;
  background: #000;
}

.video-player-container-inline iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* --- src/app/modules/components/events_componets/video_gallery/video-gallery/video-gallery.component.css --- */
.fullscreen-player-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen-player-container .video-frame {
  width: 100%;
  height: 100%;
  border: none;
}

.close-fullscreen-btn {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 2rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 2001;
  transition: transform 0.2s ease;
}

.close-fullscreen-btn:hover {
  transform: scale(1.1);
}

.video-card {
  position: relative;
  overflow: hidden;
  cursor: default;
}

.video-card .play-icon {
  display: none;
}

.video-card-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  padding: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.video-card-actions .btn {
  color: white;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.2s;
  cursor: pointer;
  min-width: 110px;
  justify-content: center;
}

.btn-play {
  background-color: rgba(0, 123, 255, 0.8);
  border: 1px solid rgba(0, 123, 255, 1);
}

.btn-play:hover {
  background-color: rgba(0, 123, 255, 1);
}

.btn-download {
  background-color: rgba(40, 167, 69, 0.8);
  border: 1px solid rgba(40, 167, 69, 1);
}

.btn-download:hover {
  background-color: rgba(40, 167, 69, 1);
}

.btn-download:disabled {
  background-color: rgba(108, 117, 125, 0.8);
  border-color: rgba(108, 117, 125, 1);
  cursor: not-allowed;
}

.folder-list {
  display: none;
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(20, 20, 20, 0.95);
  border: 1px solid #444;
  border-radius: 8px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 1050;
  width: 90%;
  max-width: 300px;
}

.folder-list.show {
  display: block;
}

.folder-item {
  padding: 12px 15px;
  color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #333;
}

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

.folder-item:hover {
  background-color: #007bff;
  color: white;
}

.video-iframe-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-iframe-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 55px;
  background-color: #000;
  z-index: 10;
}

/* --- src/app/modules/components/events_componets/weddingForm/wedding-form/wedding-form.component.css --- */
.page-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1056;
}

.weddingFormSection {
  background-color: #f8f9fa;
}

.scrollable-dropdown {
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-menu {
  min-width: 100%;
}

.country-search-input {
  width: calc(100% - 1rem) !important;
  margin: 0.5rem !important;
}

.dropdown-item[role="button"] {
  cursor: pointer;
  padding: 0.5rem 1rem;
}

.dropdown-item i.fi {
  font-size: 1.2em;
}

.countryDropdownText {
  flex-grow: 1;
}

.btn-outline-secondary.dropdown-toggle {
  color: #212529;
  background-color: #fff;
  border-color: #ced4da;
}

.btn-outline-secondary.dropdown-toggle:focus,
.btn-outline-secondary.dropdown-toggle:active {
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
}

/* --- src/app/modules/components/events_componets/weddingHome/wedding-home/wedding-home.component.css --- */

/* --- src/app/my-business/business-dashboard/branding-employee-card/branding-employee-card-theme.component.css --- */
.textDanger {
  color: #dc3545 !important;
}

.textRight {
  text-align: right;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.cardWrapper {
  border: 1px solid #000000;
  padding: 20px;
  position: relative;
  margin: 35px;
}

.cardWrapper .topRight {
  width: 20px;
  height: 1px;
  background-color: #000000;
  display: block;
  position: absolute;
  right: -20px;
  top: -1px;
}

.cardWrapper .topLeft {
  width: 20px;
  height: 1px;
  background-color: #000000;
  display: block;
  position: absolute;
  left: -20px;
  top: -1px;
}

.cardWrapper .topRightTop {
  width: 1px;
  height: 20px;
  background-color: #000000;
  display: block;
  position: absolute;
  right: -1px;
  top: -20px;
}

.cardWrapper .topLeftTop {
  width: 1px;
  height: 20px;
  background-color: #000000;
  display: block;
  position: absolute;
  left: -1px;
  top: -20px;
}

.cardWrapper .bottomRight {
  width: 20px;
  height: 1px;
  background-color: #000000;
  display: block;
  position: absolute;
  right: -20px;
  bottom: -1px;
}

.cardWrapper .bottomLeft {
  width: 20px;
  height: 1px;
  background-color: #000000;
  display: block;
  position: absolute;
  left: -20px;
  bottom: -1px;
}

.cardWrapper .bottomRightTop {
  width: 1px;
  height: 20px;
  background-color: #000000;
  display: block;
  position: absolute;
  right: -1px;
  bottom: -20px;
}

.cardWrapper .bottomLeftTop {
  width: 1px;
  height: 20px;
  background-color: #000000;
  display: block;
  position: absolute;
  left: -1px;
  bottom: -20px;
}

.cardWrapper .cardWrapperFront {
  width: 265px;
  height: 410px;
}

.cardWrapperFront .left {
  width: 50px;
  height: 410px;
  background-image: url("https://dkzxkcjlbnjui.cloudfront.net/sacredspace/communicator/mastertemplate/id-card/1/cardleftbg.png");
  background-size: cover;
  position: relative;
}

.cardWrapperFront .left h1 {
  color: white;
  text-transform: uppercase;
  transform: rotate(-90deg);
  position: absolute;
  bottom: 190px;
  left: -153px;
  margin: 0;
  font-weight: 500;
}

.cardWrapperFront .right {
  height: 380px;
  width: 100%;
  padding: 15px;
  border-right: 2px solid #3a1593;
}

.cardWrapperFront .right .logo {
  width: 120px;
  padding-bottom: 15px;
}

.text-center {
  text-align: center !important;
}

.cardWrapperFront .right p {
  font-size: 11px;
  margin-bottom: 5px;
  font-weight: 500;
  margin-top: 0;
}

.cardWrapperFront .right h5 {
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: 600;
  margin-top: 0;
}

.userImgBg {
  z-index: -1;
  width: 100px;
  display: block;
  margin: auto;
}

.userImg {
  z-index: 1;
  position: absolute;
  left: 56px;
  top: 11px;
  width: 85px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}

.cardWrapperFront .right .info {
  margin-top: 20px;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
}

.cardWrapperFront .right .info h4 {
  font-size: 16px;
  color: #3a1593;
  margin-bottom: 0;
  font-weight: 500;
}

.cardWrapperFront .right .info p a {
  color: black;
  text-decoration: none;
}

.pRelative {
  position: relative;
}

.idCardFront {
  display: flex;
  align-items: center;
}

.cardWrapper .cardWrapperBack {
  background-image: url(https://dkzxkcjlbnjui.cloudfront.net/sacredspace/communicator/mastertemplate/id-card/1/icardback.png);
  background-size: cover;
  padding: 15px;
  width: 235px;
  height: 380px;
}

.cardWrapper:first-child {
  margin-right: 50px;
}

.idCardBack .logo {
  width: 120px;
}

.idCardBack .name {
  font-size: 16px;
  color: #403089;
  margin-bottom: 0px;
}

.mb-25 {
  margin-bottom: 25px;
  line-height: 20px;
}

.mb-15 {
  margin-bottom: 15px;
  line-height: 20px;
}

.mt-25 {
  margin-top: 35px;
}

.colorPurple {
  color: #403089;
}

.idCardBack p {
  font-size: 11px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0;
}

.idCardBack a {
  font-size: 11px;
  font-weight: 500;
  color: black;
  display: block;
}

.pl-15 {
  padding-left: 15px;
}

.pr-15 {
  padding-right: 15px;
}

.qrImage img {
  max-width: 220px;
  max-height: 220px;
}

.qrImage h6 {
  font-size: 20px;
  font-weight: 500 !important;
}

.p-0 {
  padding: 0px !important;
}

.m-0 {
  margin: 0px !important;
}

.no-record-center {
  height: 200px;
  text-align: center;
  margin: auto;
  line-height: 11;
}

/* --- src/app/my-business/business-dashboard/branding-hello/branding-hello.component.css --- */

/* --- src/app/my-business/business-dashboard/branding-letter-head/branding-letter-head-theme.component.css --- */
article {
  width: 100%;
  min-height: 297mm;
  margin: 20px auto;
  position: relative;
}

h1 img {
  max-width: 120px;
  max-height: 120px;
  object-fit: cover;
}

.businessTitle {
  font-weight: 500;
  font-size: 16px;
  margin: 0;
}

.signature h6 {
  font-size: 16px;
  margin-bottom: 0px;
  font-weight: 600;
}

article {
  background: white;
}

article .logo {
  width: 150px;
}

article .top {
  background-color: #f8f9d2;
  background-image: linear-gradient(315deg, #f8f9d2 0%, #e8dbfc 74%);
  display: flex;
  align-items: center;
  padding-top: 30px;
}

article .top .item {
  width: 33.33%;
  padding: 15px 15px;
  position: relative;
  top: 2px;
}

article .top .bgWhite {
  background-color: white;
  border-top-right-radius: 10px;
}

article .top .item ul {
  margin: 0px;
  padding: 0px;
}

article .top .item ul li {
  list-style: none;
  font-size: 14px;
  margin-bottom: 10px;
}

article .top .item ul li a {
  text-decoration: none;
  color: rgb(37, 37, 37);
}

article .top .item ul li svg {
  width: 14px;
  height: 14px;
  fill: rgb(37, 37, 37);
  position: relative;
  top: 3px;
  margin-right: 5px;
}

article .bottom {
  position: absolute;
  width: 100%;
  height: 40px;
  bottom: 0px;
  left: 0px;
  background-color: #f8f9d2;
  background-image: linear-gradient(315deg, #f8f9d2 0%, #e8dbfc 74%);
}

.contentArea {
  padding: 30px;
}

.contentArea .letterDetails {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
}

.contentArea .letterDetails .left p {
  margin-bottom: 0px;
  margin-top: 0px;
}

.contentArea .letterDetails .left p span {
  color: #614eb7;
  font-weight: 600;
}

.contentArea .letterDetails .left h5 {
  margin-bottom: 0px;
  font-size: 20px;
  font-weight: 500;
  color: #614eb7;
}

address {
  margin-top: 45px;
}

address .businessTitle {
  text-align: left;
}

.textCenter {
  text-align: center;
}

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

.qrCode {
  position: absolute;
  bottom: 25mm;
  left: 5mm;
}

.letterDetails {
  position: absolute;
  bottom: 25mm;
  right: 10mm;
}

.qrCode img {
  width: 130px;
  margin-top: 20px;
}

.spaceBetween {
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
}

.contentArea .details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  margin-top: 0px;
}

.no-record-center {
  height: 200px;
  text-align: center;
  margin: auto;
  line-height: 11;
}

/* --- src/app/my-business/business-dashboard/deals/deals.component.css --- */

:host ::ng-deep .mat-tab-header {
  display: none !important;
}

:host ::ng-deep .mat-tab-body-wrapper {
  padding: 0 !important;
}

:host ::ng-deep .mat-tab-body-content {
  overflow: visible !important;
}

:host ::ng-deep .mat-horizontal-stepper-header-container {
  background: #f7f5f0;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid #e4e1d9;
  padding: 0 20px;
}

:host ::ng-deep .mat-step-header .mat-step-icon-selected,
:host ::ng-deep .mat-step-header .mat-step-icon-state-done {
  background-color: #f05c29;
}

:host ::ng-deep .mat-step-header .mat-step-label.mat-step-label-active {
  color: #2b2118;
}

:host ::ng-deep .mat-horizontal-content-container {
  padding: 0;
}

:host ::ng-deep .dealsMatTable {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

:host ::ng-deep .dealsMatTable th.mat-header-cell {
  background: #f7f5f0;
  color: #7a6a5a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e1d9;
  white-space: nowrap;
}

:host ::ng-deep .dealsMatTable td.mat-cell {
  padding: 14px 16px;
  border-bottom: 1px solid #f0ece4;
  font-size: 13.5px;
  color: #2b2118;
  vertical-align: middle;
}

:host ::ng-deep .dealsMatTable tr.honoTableRow:hover td.mat-cell {
  background: #faf8f3;
}

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

.spacer {
  flex: 1;
}

/* --- src/app/my-business/business-dashboard/deals/preview/preview.component.css --- */
@font-face {
  font-family: "Conv_geometria";
  src:
    local("☺"),
    url("https://dkzxkcjlbnjui.cloudfront.net/temp/font/geometria.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

.leftBorder1 {
  border: 2px #fd8c2c solid;
  border-radius: 6px;
  padding: 6px;
}

.leftBorder2 {
  border: 2px #f3f3f3 solid;

  border-radius: 5px;

  padding: 10px 20px 30px 20px;
}

.dealLeftImg {
  text-align: right;
  margin-bottom: -50px;
}

.dealLeftImg img {
  width: 100px;
  position: relative;
  left: 45px;
  top: -40px;
}

.dealLeftTxt {
  font-size: 24px;
  padding: 0.3% 3.5%;
  float: right;
  color: #ffffff;
  border: 1px solid #ffffff;
  background: #44d070;
}

.topDeal {
  font-size: 20px;
  font-family: "Conv_geometria";
  color: black;
  border-bottom: 1px #ccc solid;
  padding-bottom: 20px;
}

.topDeal span {
  font-size: 20px;
  font-family: "Conv_geo_light";
}

.cafenoorani {
  font-size: 20px;
  font-family: "Conv_geometria";
  color: #000f9f;
  margin-top: -6px;
  margin-bottom: 0px;
}

.cafenoorani span {
  font-size: 20px;
  font-family: "Conv_geo_light";
  color: #000f9f;
}

.DealBuyPizza {
  color: #cb5506;
  font-size: 14px;
  font-family: "Conv_geo_light";
}

.pizzaLo {
  margin-bottom: 0px;
}

.pizzaLo img {
  width: 100%;
}

.PizzaSunday {
  font-family: "Conv_geometira_portal_font";
  color: #000f9f;
  text-align: center;
  font-size: 15px;
  margin-top: -7px;
  margin-bottom: 6px;
}

.PizzaRedclr {
  text-align: center;
}

.PizzaRedclr {
  font-family: "Conv_geometria";
  color: #ff0000;
  font-size: 20px;
  margin-bottom: 10px;
}

.discountPrice {
  font-size: 14px;
  color: #ccc;
  font-family: "Conv_geo_light";
  text-decoration: line-through;
  position: absolute;
  padding: 6px 18px;
}

.PizzaPehra {
  color: #909090;
  font-family: "Conv_geometira_portal_font";
  font-size: 14px;
  margin-bottom: 10px;
}

.PizzaDate {
  font-size: 12px;
  color: #000;
  font-family: "Conv_geometira_portal_font";
  text-align: center;
}

.PizzaDates {
  margin-bottom: 0px;
  text-align: center;
}

.viewDealsbtn {
  background-color: #e2e2e2;
  padding: 7px 19px;
  border-radius: 7px;
  font-size: 14px;
}

.viewDealsbutton {
  background-color: #e2e2e2;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 13px;
}

/* --- src/app/my-business/business-dashboard/events/events.component.css --- */

:host ::ng-deep .mat-tab-header {
  display: none !important;
}

:host ::ng-deep .mat-tab-body-wrapper {
  padding: 0 !important;
}

:host ::ng-deep .mat-tab-body-content {
  overflow: visible !important;
}

:host ::ng-deep .eventsMatTable {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

:host ::ng-deep .eventsMatTable th.mat-header-cell {
  background: #f7f5f0;
  color: #7a6a5a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e1d9;
  white-space: nowrap;
}

:host ::ng-deep .eventsMatTable td.mat-cell {
  padding: 14px 16px;
  border-bottom: 1px solid #f0ece4;
  font-size: 13.5px;
  color: #2b2118;
  vertical-align: middle;
}

:host ::ng-deep .eventsMatTable tr.honoTableRow:hover td.mat-cell {
  background: #faf8f3;
}

/* --- src/app/my-business/business-dashboard/jobs/jobs.component.css --- */

:host ::ng-deep .mat-tab-header {
  display: none !important;
}

:host ::ng-deep .mat-tab-body-wrapper {
  padding: 0 !important;
}

:host ::ng-deep .mat-tab-body-content {
  overflow: visible !important;
}

:host ::ng-deep .jobsMatTable {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

:host ::ng-deep .jobsMatTable th.mat-header-cell {
  background: #f7f5f0;
  color: #7a6a5a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e1d9;
  white-space: nowrap;
}

:host ::ng-deep .jobsMatTable td.mat-cell {
  padding: 14px 16px;
  border-bottom: 1px solid #f0ece4;
  font-size: 13.5px;
  color: #2b2118;
  vertical-align: middle;
}

:host ::ng-deep .jobsMatTable tr.honoTableRow:hover td.mat-cell {
  background: #faf8f3;
}

/* --- src/app/my-business/multi-select-dropdown/multi-select-dropdown.component.css --- */

.parent-container {
  position: relative;
}

.drop-toggle {
  background-color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
  border: 1px solid #ccc;
  width: 233px;
  text-align: left;
}

.drop-toggle i {
  float: right;
}

.drop-show {
  margin-top: 2px;
  padding: 4px;
  width: 233px;
  background-color: #fff;
  border: 1px solid #bababa;
  position: absolute;
  z-index: 100;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  margin-left: 1px;
}

.drop-show label {
  display: block;
  font-size: 15px;
  cursor: pointer;
}

.drop-show label input {
  vertical-align: top;
}

.drop-show label span {
  display: inline-block;
}

/* --- src/app/my-business/payee/payee.component.css --- */
::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: violet;
}

/* --- src/app/page-not-found/page-not-found.component.css --- */

.webLink {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
}

.webLink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.goBackBtn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  color: white;
  border: none;
  padding: 14px 30px;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 8px 15px rgba(255, 65, 108, 0.3);
  transition: all 0.3s ease-in-out;
  letter-spacing: 1px;
  outline: none;
}

.goBackBtn:hover {
  background: linear-gradient(135deg, #ff4b2b, #ff416c);
  box-shadow: 0px 12px 20px rgba(255, 65, 108, 0.4);
  transform: translateX(-50%) scale(1.05);
}

.goBackBtn:active {
  transform: translateX(-50%) scale(0.95);
  box-shadow: 0px 5px 10px rgba(255, 65, 108, 0.3);
}

/* --- src/app/personal-site/personal-site.component.css --- */
.customBackgroundColor {
  background-color: #f8f8fb !important;
  min-height: 100vh;
}

/* --- src/app/personal-site/resume-builder/resume-builder.component.scss --- */
.profileImage {
  width: 50%;
  height: 90px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
  }

  .imageDelete {
    position: absolute;
    top: -5px;
    right: -13px;
    cursor: pointer;
  }
}

/* --- src/app/real-estate/real-estate-add-listing-wizard/real-estate-add-listing-wizard.component.css --- */
:host {
  --primary-red: #ff4d61;
  --dark-btn: #333;
  --soft-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  font-family: "Poppins", sans-serif;
}

.stepCircle {
  background-color: var(--primary-red) !important;
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
}

.card {
  border: 1px solid #eee !important;
  box-shadow: var(--soft-shadow) !important;
}

::ng-deep .customButton {
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 14px 30px !important;
  font-size: 1.05rem !important;
  transition: all 0.3s ease;
  border: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

::ng-deep .btn-primary,
::ng-deep .btn-danger {
  background-color: var(--primary-red) !important;
  color: white !important;
}

::ng-deep .btn-success,
::ng-deep .btn-dark {
  background-color: var(--dark-btn) !important;
  color: white !important;
}

::ng-deep .customButton:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

::ng-deep .form-label {
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

::ng-deep .form-control,
::ng-deep .form-select {
  border-color: #e5e7eb;
  padding: 12px 16px;
  border-radius: 10px;
}

::ng-deep .form-control:focus,
::ng-deep .form-select:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px rgba(255, 77, 97, 0.1);
}

.sidebar-card {
  border: 1px solid #eee !important;
  transition: all 0.3s ease;
}

.nav-link {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.nav-link:hover {
  background-color: #f8f9fa;
  color: var(--primary-red) !important;
}

.active-step {
  background-color: #f0f7ff !important;
  color: #1a73e8 !important;
  border-color: rgba(26, 115, 232, 0.1) !important;
}

.bg-light-primary {
  background-color: rgba(26, 115, 232, 0.05);
}

.transition-all {
  transition: all 0.3s ease-in-out;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --- src/app/real-estate/real-estate-add-listing-wizard/steps/step-attributes/step-attributes.component.css --- */
.step-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

.step-title {
  color: #333;
  font-weight: 700;
  margin-bottom: 5px;
}

.step-subtitle {
  font-size: 0.9rem;
  color: #666;
}

.customInput {
  height: 48px;
  border-radius: 8px;
  border: 1.5px solid #eee;
  padding: 0 15px;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.customInput:focus {
  border-color: var(--primary-color, #007bff);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  outline: none;
}

.btn-primary {
  background-color: var(--primary-color, #007bff);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-outline-secondary {
  border-radius: 8px;
  font-weight: 600;
}

.attribute-form {
  padding: 10px 0;
}

/* --- src/app/real-estate/real-estate-add-listing-wizard/steps/step1-basic-details/step1-basic-details.component.css --- */

/* --- src/app/real-estate/real-estate-add-listing-wizard/steps/step3-locality-details/step3-locality-details.component.css --- */
.city-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #f0f0f0;
  z-index: 1050;
  max-height: 350px;
  overflow-y: auto;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  margin-top: 1px;
}

.detect-location {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f8f9fa;
  color: var(--site-tertiary-color);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.detect-location:hover {
  background: #fdfdfd;
  padding-left: 20px;
}

.detect-location i {
  font-size: 1.1rem;
}

.dropdown-item {
  padding: 10px 15px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #444;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.dropdown-item:hover {
  background: #f8fbff;
  color: var(--site-tertiary-color);
  border-left-color: var(--site-tertiary-color);
}

.section-title {
  padding: 8px 15px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
  background: #fafafa;
  font-weight: 700;
}

/* --- src/app/real-estate/real-estate-add-listing-wizard/steps/step6-gallery/step6-gallery.component.css --- */
.submitPropertyContainer {
  min-height: 400px;
}

.submitPropertyLeft {
  flex: 1;
  border-right: 1px solid #eee;
}

.submitPropertyRight {
  width: 300px;
}

.featureIcon {
  width: 30px;
  color: #2568ef;
}

.priceText {
  font-size: 1.2rem;
}

.freeNotice {
  font-size: 0.9rem;
}

.cardBorder {
  border: 1px solid #dee2e6;
  border-radius: 12px;
}

/* --- src/app/real-estate/real-estate-add-listing-wizard/steps/step7-near-locations/step7-near-locations.component.css --- */
.localityDetailBtn {
  color: #444;
  background: #fdfdfd;
  font-weight: 600;
  border: 1.5px solid #eee !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.localityDetailBtn:hover {
  background: #fff;
  border-color: var(--site-tertiary-color) !important;
  color: var(--site-tertiary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.localityDetailBtn.active {
  background: var(--site-tertiary-color);
  color: #fff;
  border-color: var(--site-tertiary-color) !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

/* --- src/app/real-estate/real-estate-add-listing-wizard/steps/step7-schedule/smart-slider/real-estate-smart-slider.component.css --- */
.mediaContainer {
  max-width: 100%;
}

.smartMediaThumb {
  transition: all 0.2s ease;
  opacity: 0.7;
}

.smartMediaThumb:hover {
  opacity: 1;
}

.smartMediaThumb.active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--bs-primary);
}

.overflow-auto::-webkit-scrollbar {
  height: 6px;
}

.overflow-auto::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.overflow-auto::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.overflow-auto::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

.listingSubmitBand {
  font-size: 0.95rem;
}

.custom-save-btn {
  height: 54px;
}

.object-fit-contain {
  object-fit: contain;
}

.object-fit-cover {
  object-fit: cover;
}

/* --- src/app/shared/biz-card/biz-card.component.css --- */
a.disabled {
  pointer-events: none;
  cursor: default;
}

/* --- src/app/shared/loader/loading.component.css --- */
.progress-spinner {
  position: fixed !important;
  z-index: 99;
}

.overlay {
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.img-spinner {
  margin-top: 10% !important;
  margin-right: 40%;
  margin-left: 40%;
}

/* --- src/app/shared/smart-media-handler/image-handler.component.scss --- */
mat-slider {
  width: 300px;
}

::ng-deep .image-cropper img {
  max-height: 100%;
  display: block;
}

::ng-deep .image-cropper .ng-tns-c138-1 a {
  display: none;
}

/* --- src/app/sidenavbar/my-brand-side-nav/my-brand-side-nav.component.scss --- */
.text-white {
  font-size: 1rem;
}

.sub-link {
  color: white !important;
  padding: 0.5rem 0rem;
  display: inline-block;
  width: 100%;
}

.sub-item-list {
  ul {
    list-style: none;
  }

  ul li::before {
    color: white;
    font-weight: bold;
    display: inline-block;
    width: 1rem;
    margin-left: -1em;
  }
}

/* --- src/app/sidenavbar/side-nav/side-nav.component.scss --- */
.text-white {
  font-size: 1rem;
}

.sub-link {
  color: white !important;
  padding: 0.5rem 0rem;
  display: inline-block;
  width: 100%;
}

.sub-item-list {
  ul {
    list-style: none;
  }

  ul li::before {
    color: white;
    font-weight: bold;
    display: inline-block;
    width: 1rem;
    margin-left: -1em;
  }
}

/* --- src/app/signin-auth/jff/jff.component.scss --- */

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

.red {
  color: red;
}

iframe {
  margin: 0px;
  padding: 0px;
  height: 100vh;
  width: 100vw;
  border: none;
}

iframe {
  display: block;
  width: 100%;
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
}

/* --- src/app/smart-media-handler/image-handler.component.scss --- */
mat-slider {
  width: 300px;
}

::ng-deep .image-cropper img {
  max-height: 100%;
  display: block;
}

/* --- src/app/social-media/social-studio/social-studio.component.css --- */
.buttons-container {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.image-preview-container {
  display: flex;
  flex-wrap: wrap;
}

.image-preview-wrapper {
  position: relative;
  margin: 5px;
}

.image-preview {
  width: 100px;
  height: auto;
}

.remove-button {
  background-color: transparent;
  border: none;
  color: red;
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  top: 5px;
  right: 5px;
}

/* ════════════════════════════════════════════════════════
   DAILY GREETINGS / RESUME SNAPSHOT  (dg*)
   ════════════════════════════════════════════════════════ */

.dgWrapper {
  padding: var(--space-6);
}

/* Header */
.dgHead {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1.5px solid var(--site-quaternary-color);
}

.dgHeadIcon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--site-secondary-color);
  color: var(--site-tertiary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.dgHeadTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin: 0 0 3px;
}

.dgHeadSub {
  font-size: 12px;
  color: var(--site-text-muted-color);
  margin: 0;
}

/* Category row */
.dgCategoryRow {
  margin-bottom: var(--space-6);
}

.dgLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--site-text-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: var(--space-2);
}

.dgSelect,
.dgInput {
  border-radius: var(--radius-lg) !important;
  border: 1.5px solid var(--site-input-border) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  background-color: var(--site-secondary-color) !important;
  transition: var(--transition-fast) !important;
}

.dgSelect:focus,
.dgInput:focus {
  border-color: var(--site-tertiary-color) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(34, 85, 232, 0.08) !important;
}

/* Tag panel */
.dgTagPanel {
  background-color: var(--site-secondary-color);
  border: 1.5px solid var(--site-border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.dgTagPanelInner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.dgTagField {
  flex: 1;
  min-width: 160px;
}

.dgTagField--sm {
  flex: 0 0 140px;
  min-width: 120px;
}

.dgTagField--btn {
  flex: 0 0 auto;
  min-width: unset;
}

.dgSaveTagBtn {
  background: var(--site-primary-color) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.dgSaveTagBtn:hover {
  opacity: 0.88;
}

/* Details section */
.dgDetailsPanel {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1.5px dashed var(--site-border-color);
}

.dgDetailTitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: var(--space-4);
}

.dgDetailList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-4);
}

.dgDetailItem {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dgDetailItem .dgInput {
  flex: 1;
}

.dgDetailRemove {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--site-error-color);
  background: transparent;
  color: var(--site-error-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.dgDetailRemove:hover {
  background: rgba(220, 38, 38, 0.08);
}

.dgAddDetailBtn {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-tertiary-color);
  background: var(--site-secondary-color);
  border: 1.5px solid var(--site-tertiary-color);
  border-radius: var(--radius-md);
  padding: 7px 16px;
}

.dgAddDetailBtn:hover {
  background: rgba(34, 85, 232, 0.08);
}

/* Pending hint */
.dgPendingHint {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(217, 119, 6, 0.08);
  border: 1.5px solid var(--site-warning-color);
  border-radius: var(--radius-lg);
  font-size: 13px;
  color: var(--site-warning-color);
}

/* Empty state */
.dgEmptyState {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  color: var(--site-text-muted-color);
}

.dgEmptyIcon {
  font-size: 40px;
  display: block;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.dgEmptyText {
  font-size: 14px;
  margin: 0;
}

/* Footer */
.dgFooter {
  margin-top: var(--space-2);
}

/* ── Hide mat-tab-group header where custom dealsTabNav is used ── */
.dealsTabNav + mat-tab-group .mat-tab-header,
.dealsTabNav + mat-tab-group .mat-mdc-tab-header {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ANGULAR MATERIAL — force design-system font on all components
   ═══════════════════════════════════════════════════════════════════ */
.mat-typography,
.mat-typography h1,
.mat-typography h2,
.mat-typography h3,
.mat-typography h4,
.mat-typography h5,
.mat-typography h6,
.mat-typography p,
.mat-tab-label,
.mat-tab-link,
.mat-header-cell,
.mat-cell,
.mat-footer-cell,
.mat-sort-header-button,
.mat-button,
.mat-raised-button,
.mat-stroked-button,
.mat-flat-button,
.mat-icon-button,
.mat-fab,
.mat-mini-fab,
.mat-menu-item,
.mat-option,
.mat-select-trigger,
.mat-select-value,
.mat-form-field,
.mat-input-element,
.mat-dialog-title,
.mat-dialog-content,
.mat-snack-bar-container,
.mat-tooltip,
.mat-chip,
.mat-expansion-panel-header,
.mat-expansion-panel-body,
.mat-stepper-label,
.mat-card-title,
.mat-card-subtitle,
.mat-card-content,
.mat-list-item,
.mat-slide-toggle-content,
.mat-checkbox-label,
.mat-radio-label-content,
.mat-paginator,
.mat-paginator-range-label,
.mat-select-panel .mat-option-text {
  font-family: var(--site-primary-font) !important;
}

/* ── Help Section Modal ──────────────────────────────────────── */
.helpTicketBanner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff4f2;
  border: 1px solid #fcd0c4;
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 16px;
  color: #c0392b;
  font-size: 13px;
  line-height: 1.5;
}

.helpContactList {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
  margin-bottom: 4px;
}

.helpContactListTitle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #808080;
  margin-bottom: 8px;
}

.helpContactItem {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #333;
  padding: 4px 0;
}

.helpContactItem a {
  color: var(--site-primary-color);
  font-weight: 600;
  text-decoration: none;
}

.helpContactItem a:hover {
  text-decoration: underline;
}

.helpContactIcon {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
  flex-shrink: 0;
}

.helpContactIcon--chat {
  color: #1a73e8;
}

.helpContactIcon--email {
  color: #e64a19;
}

.helpContactIcon--whatsapp {
  color: #25d366;
}

.helpContactIcon--skype {
  color: #00aff0;
}

/* ── Help Reach Cards ───────────────────────────────────────── */
.helpReach {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.helpReachTitle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #808080;
  margin-bottom: 10px;
}

.helpReachGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.helpReachCard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8f9ff;
  border: 1px solid #eaeef8;
  border-radius: 10px;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.helpReachCard:hover {
  background: #eef1fb;
  border-color: #cddaff;
  transform: translateY(-1px);
}

.helpReachCardIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 15px;
  flex-shrink: 0;
}

.helpReachCardIcon--chat {
  background: #e8f0fe;
  color: #1a73e8;
}

.helpReachCardIcon--email {
  background: #fce8e6;
  color: #e64a19;
}

.helpReachCardIcon--whatsapp {
  background: #e6f7ee;
  color: #25d366;
}

.helpReachCardIcon--learn {
  background: #fef3e2;
  color: #f59e0b;
}

.helpReachCardBody {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.helpReachCardLabel {
  font-size: 13px;
  font-weight: 600;
  color: #1c1a16;
  line-height: 1.2;
}

.helpReachCardSub {
  font-size: 11px;
  color: #808080;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.helpReachCardArrow {
  font-size: 10px;
  color: #cddaff;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.helpReachCard:hover .helpReachCardArrow {
  color: #1a73e8;
}

/* ── Business Branch Layout ─────────────────────────────────── */
.branchLayout {
  display: flex;
  flex-direction: column;
}

.branchLayout--split {
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: start;
  border-top: 1px solid #f0f0f0;
}

.branchTableCol {
  min-width: 0;
}

.branchFormCol {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eaeef8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.branchFormPanel {
  padding: 20px 22px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

.branchFormPanelHead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid #cddaff;
  margin-bottom: 18px;
}

.branchForm {
  padding-bottom: 0;
}

/* ── Branch action buttons ── */
.branchActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.branchActionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1.5px solid #eaeef8;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.branchActionBtn--edit {
  color: #1a73e8;
}

.branchActionBtn--edit:hover {
  background: #e8f0fe;
  border-color: #1a73e8;
}

.branchActionBtn--delete {
  color: #e53935;
}

.branchActionBtn--delete:hover {
  background: #fce8e6;
  border-color: #e53935;
}

/* ── Auto Post ── */
.apTopActionRow {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.apNavRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.apNavRowLeft {
  display: flex;
  gap: 8px;
}

/* Carousel card: overflow visible for arrow buttons, radius applied manually to toolbar */
.apEventsCard {
  overflow: visible;
  margin-bottom: 20px;
}

.apEventsCard .honoCardToolbar {
  border-radius: 12px 12px 0 0;
}

.apCarouselWrap {
  position: relative;
}

/* Shared card body padding */
.apCardBody {
  padding: 0 20px 20px;
}

.apCardFull {
  height: 100%;
}

.apCardBodyForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apSectionLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--site-text-muted-color, #888);
  margin-bottom: 10px;
}

/* Color dot modifiers */
.apColorDot--blue {
  background: #1a73e8;
}

.apColorDot--yellow {
  background: #f4b400;
}

.apColorDot--red {
  background: #e53935;
}

.apColorDot--green {
  background: #34a853;
}

.apTemplateCard {
  border: 1px solid #eaeef8;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition:
    box-shadow 0.18s,
    border-color 0.18s,
    transform 0.18s;
}

.apTemplateCard:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
  border-color: var(--site-primary-color);
  transform: translateY(-2px);
}

.apTemplateImg {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f5f6fa;
}

.apTemplateImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}

.apTemplateCard:hover .apTemplateImg img {
  transform: scale(1.04);
}

.apTemplateBody {
  padding: 14px 14px 16px;
}

.apTemplateTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--site-text-color);
  margin: 0 0 4px;
}

.apTemplateDesc {
  font-size: 12px;
  color: var(--site-text-muted-color, #888);
  margin: 0 0 12px;
  line-height: 1.5;
}

.apCarouselBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #eaeef8;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--site-text-color);
  z-index: 10;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.apCarouselBtn:hover {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #fff;
}

.apCarouselBtn--prev {
  left: -12px;
}

.apCarouselBtn--next {
  right: -12px;
}

.apSearchBox {
  display: flex;
  align-items: center;
  border: 1.5px solid #eaeef8;
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  gap: 6px;
  height: 34px;
  min-width: 200px;
}

.apSearchIcon {
  font-size: 12px;
  color: #aaa;
}

.apSearchInput {
  border: none;
  outline: none;
  font-size: 13px;
  width: 100%;
  background: transparent;
  color: var(--site-text-color);
}

.apPreviewImg {
  width: 100%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}

.apPreviewActions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.apPreviewActionBtn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid #eaeef8;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--site-text-color);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.apPreviewActionBtn:hover {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #fff;
}

.apColorRow {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.apColorDot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  transition:
    transform 0.15s,
    border-color 0.15s;
}

.apColorDot:hover {
  transform: scale(1.15);
  border-color: rgba(0, 0, 0, 0.15);
}

.apColorDot--add {
  background: #f5f6fa;
  border-color: #eaeef8;
  color: #888;
  font-size: 11px;
}

.apDownloadBtn {
  border: 1.5px solid #eaeef8;
  border-radius: 8px;
  background: #fff;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--site-text-color);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.apDownloadBtn:hover {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #fff;
}

.apShareBtn {
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.15s;
}

.apShareBtn:hover {
  opacity: 0.85;
}

.apShareBtn--whatsapp {
  background: #25d366;
  color: #fff;
}

.apShareBtn--instagram {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
  color: #fff;
}

.apShareBtn--facebook {
  background: #1877f2;
  color: #fff;
}

.apShareBtn--linkedin {
  background: #0a66c2;
  color: #fff;
}

/* Dropdown item with colored icon badge */
.honoDropItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.honoDropIcon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
}

/* Dropdown menu sizing + shape for hono tables */
.honoTableTdActions .dropdown-menu {
  min-width: max-content;
  width: auto;
  border-radius: 12px;
  padding: 4px;
  border: 1px solid #eaeef8;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.honoTableTdActions .dropdown-menu .dropdown-item {
  border-radius: 8px;
}

.honoTableTdActions .dropdown-menu .dropdown-divider {
  margin: 3px 8px;
}

/* Responsive CSS Starts Here */

@media (max-width: 1440px) {
  .formContainer .row .col-md-6 input.form-control {
    font-size: 12px;
    padding: 8px 10px !important;
  }

  .personalOnoarding button.btn.btn-sm.btn-outline-primary {
    font-size: 12px;
  }

  .topbar.cardBoxShadow {
    margin-top: 5px !important;
  }

  .cdk-drag.card-item.custom-border-bottom {
    padding: 10px 0px !important;
  }

  .dashboardContainer .topbar ul li {
    margin-left: 2px;
  }

  .dashboardContainer .topbar {
    padding: 10px 15px;
  }

  .dashboardContainer .enterIntro .form-check label {
    width: 150px;
  }

  .dashboardContainer .billingList ul li {
    margin-top: 15px;
  }

  form.example-form .suggestions {
    max-height: 150px !important;
  }

  .joinBigdotFor .form-check-input {
    margin-top: 8px;
  }

  .gettingStartedSection img {
    width: 80px;
  }

  .instaBiz .customBackgroundColor {
    margin-bottom: 0px;
  }

  .instaBiz.purchaseBizcard {
    margin-bottom: 0px;
  }

  .CardHeaderFlat .CardBox.css-159y9hz {
    padding: 5px 20px 0px;
  }

  .managerNavBar {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }

  body .effectEditSettings p.mt-4 span.float-end {
    height: 24px;
    width: 24px;
    line-height: 25px;
    font-size: clamp(10px, 0.9vw, 14px);
  }

  div#content-wrapper
    .customBackgroundColor
    .otherSection
    .col-md-2.d-flex.align-items-end
    button.btn.btn-danger.w-100 {
    width: 70px !important;
    padding: 8px 0px !important;
  }

  body
    div#content-wrapper
    .customBackgroundColor
    .otherSection
    .col-md-2.d-flex.align-items-end
    button.btn.btn-success.w-100 {
    width: 65px !important;
    padding: 8px 0px !important;
    /* font-size: clamp(12px, 1vw, 14px) !important; */
  }

  body .form-check-input {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }

  body .jffCard {
    padding: 10px 10px;
  }

  .formContainer .row .col-md-12 input.form-control {
    font-size: 12px;
    padding: 8px 10px !important;
  }

  .allEffectSetting
    .accordion-header
    button.accordion-button
    a.ms-3.primaryColor {
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .formContainer {
    padding: 15px;
    max-width: 500px;
  }

  .uploadYourResume.dropFile i {
    font-size: 16px;
  }

  .uploadYourResume.dropFile {
    height: 35px;
  }

  .formContainer .row .col-md-6 .form-label,
  .formContainer .row .col-md-12 .form-label {
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .formContainer .row .col-md-6,
  .formContainer .row .col-md-12 {
    margin-bottom: 10px !important;
  }

  .submit-btn {
    padding: 8px;
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .cardBoxShadow #myTab.nav-tabs .nav-item:nth-child(3) {
    display: flex;
    margin: 5px auto;
  }

  .mainWrapper {
    margin: 0px 10px;
    width: auto;
  }

  .mainWrapper {
    margin-top: 1rem !important;
  }

  .bizcardSection img.bizcardPreviewImage {
    height: 200px;
  }

  .whatsAppIcon a i {
    font-size: 20px;
  }

  .whatsAppIcon a {
    padding: 5px 15px !important;
    font-size: clamp(14px, 1.1vw, 16px) !important;
  }

  .form-control {
    padding: 12px 10px !important;
  }

  .infoAccrodions .accordion-button:not(.collapsed) {
    padding: 6px 8px !important;
    font-size: clamp(14px, 1.1vw, 15px);
  }

  .infoAccrodions .accordion-button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 12px;
  }

  body .joinBigdotFor .form-check-input {
    margin-top: 4px;
  }

  .card.lightBlue.cursorPointer .card-body {
    margin-bottom: 0px;
  }

  div#offcanvasWithBothOptions .quickLinksCardbtn a {
    font-size: clamp(16px, 1vw, 18px);
  }

  .headerClass {
    font-size: clamp(16px, 1.1vw, 18px) !important;
  }

  html,
  body {
    overflow-y: auto !important;
  }

  .btn-secondary {
    font-size: clamp(14px, 1.2vw, 16px);
    padding: 10px !important;
  }

  .accordion-body .custom-border-bottom .col-2 {
    padding: 0px 8px !important;
  }

  .card-body {
    margin-bottom: 15px;
  }

  .accordion-body .custom-border-bottom .col-5 {
    padding: 0px 8px;
  }

  i.cdk-drag-handle {
    padding-right: 5px !important;
  }

  .form-label {
    font-size: clamp(13px, 0.9vw, 14px) !important;
  }

  .menuSettingActive.active {
    padding: 8px 4px !important;
  }

  .font16 {
    font-size: clamp(14px, 1.1vw, 16px);
  }

  .col-md-9.card {
    border: 0px;
  }

  body .customButton {
    padding: 8px 8px !important;
    font-size: clamp(15px, 0.9vw, 14px) !important;
  }

  .cardBoxShadow .headerClass {
    font-size: clamp(16px, 1.1vw, 18px);
  }

  button.btn.primaryBgColor.text-white.font16 {
    width: 100%;
    padding: 8px 10px;
  }

  .allEffectSetting .accordion-header button.accordion-button {
    font-size: clamp(16px, 1.1vw, 18px);
  }

  .p-3 {
    margin-bottom: 10px;
  }

  .topbar.cardBoxShadow {
    margin-top: 0px;
  }

  .sidebar-header .btn-close {
    border: none;
    font-size: 15px !important;
    color: #1c2d64 !important;
    position: absolute;
    z-index: 1;
    right: 10px;
    background-color: #fff !important;
    border-radius: 50px;
    height: 20px;
    width: 20px;
    line-height: 22px;
    box-shadow: 0px 2px 3px #000;
  }

  .sidebar-header {
    padding: 0px !important;
  }

  .yourListing .yourBusiness button.btn {
    width: 100%;
  }

  .instacitiStar .profileCard {
    width: 100%;
  }

  .customeinnerCard .order-type .btn {
    padding: 5px;
    margin: 5px;
  }

  .dropBox .form-group .sliderSmartMedia.mediaImage video {
    height: 180px !important;
  }

  .blackColor .bottomBorder.w-25 {
    width: 100% !important;
  }

  .bigdotBusiness h3.font60 {
    font-size: 45px;
    line-height: 45px;
  }

  .orangeBackground {
    padding-top: 160px;
    margin-top: -80px !important;
  }

  .selectBizdots .selectCart.BrandedCard a.selectedBtn {
    width: 100% !important;
    bottom: 10px !important;
    transform: initial !important;
    position: initial;
  }

  .container.navbarCss
    .btn.primaryBg.font18.font700.d-lg-none
    img.img-fluid.mx-1 {
    width: 25px;
  }

  .otherSection .col-md-2.col-6 {
    padding: 0px 12px !important;
  }

  .footerGroupBtn button.btn {
    font-size: 13px !important;
    width: auto;
  }

  div#content-wrapper .customBackgroundColor .col-md-2.d-flex.align-items-end {
    margin-top: 0px !important;
    margin-bottom: 15px;
  }

  div#content-wrapper .customBackgroundColor .col-12.mt-4 a .btn {
    width: 100% !important;
    margin-bottom: 15px;
  }

  .followUpList h4.d-flex.justify-content-between.mb-3.align-items-center {
    display: block !important;
  }

  .followUpList
    h4.d-flex.justify-content-between.mb-3.align-items-center
    button.btn.btn-primary {
    margin-top: 10px;
  }

  .mat-paginator-range-label {
    margin: 0 12px 0 12px !important;
  }

  body .mat-paginator,
  .mat-paginator-page-size .mat-select-trigger {
    font-size: 12px !important;
  }

  .borderRadius5.cardBoxShadow a.nav-link.cursorPointer {
    padding: 5px 0;
  }

  .selectedNavigation.primaryColor {
    padding: 8px !important;
  }
}

@media (max-width: 767px) {
  .PublishMicrosite {
    margin-top: 15px;
  }

  .cRowdata .form-group.mt-3 span.d-block.my-4.font26 {
    margin: 10px 0px 5px !important;
  }

  .PublishMicrosite .seconds {
    top: 65%;
  }

  .myBusniessSection .congratulationsText .bigdotCongratulations {
    width: 100px !important;
  }

  .mobileViewProfile {
    display: block;
  }

  .desktopViewProfile {
    display: none;
  }

  .topbar .PublishMicrosite .btn.saveBtn {
    width: 49%;
    margin-left: 5px;
  }

  .topbar .PublishMicrosite .SecondaryBtnBgColor {
    width: 49%;
  }
}

@media screen and (max-width: 768px) {
  .myBusniessSection .congratulationsTitle {
    font-size: 45px !important;
  }

  .mainMessage .card {
    margin: 18px 0 !important;
  }

  .mainMessage .leftDivider::after {
    background-color: transparent !important;
  }

  .mainMessage .cardLink {
    font-size: 15px;
  }

  .myBusniessSection .congratulationsText {
    font-size: 20px;
    margin-bottom: 0px;
  }

  .businessMessage {
    margin-bottom: 4em;
    text-align: center;
  }

  .mainMessage {
    margin-top: 50px !important;
  }
}

@media screen and (max-width: 768px) {
  .giftBox .leftCard {
    width: 100%;
    height: auto;
    /* Adjusted */
  }

  .giftBox .floatCard {
    width: 100%;
    float: none;
  }

  .giftBox .displayBlock {
    display: block !important;
  }

  .giftBox .text-center-mobile {
    text-align: center;
  }

  .giftBox .sameLinks::before {
    display: none;
  }

  .giftBox .item-list li {
    padding: 10px;
    /* Adjusted */
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    line-height: 27px;
  }

  .giftBox .item-list li .sameLinks {
    margin-top: 5px;
    font-weight: normal;
    font-weight: normal;
  }

  .giftBox .goToProfile {
    font-size: 38px !important;
    margin-bottom: 15px;
  }

  .giftBox .leftRightFont {
    font-size: 16px;
  }

  .giftBox .sameLinks {
    width: 100%;
  }

  .giftBox .businessManage {
    font-size: 18px;
  }

  .giftBox .leftCard {
    margin-bottom: 15px;
  }

  .giftBox .lefGifttDividerGift::after {
    display: none !important;
  }

  .giftBox .brandnameInfo {
    flex-direction: column;
    width: 100%;
  }

  .giftBox .giftBoxPresent {
    width: 80px;
    border-radius: 0.5rem !important;
  }

  .giftBox .leftList h1 span {
    font-size: 22px;
  }

  .giftBox .switchToSpace {
    justify-content: start !important;
  }

  .giftBox .bigDotLogoEnd {
    text-align: center !important;
  }

  .giftBox .headerTopBar {
    padding: 10px !important;
  }

  .otherBusinessBtn {
    flex: none !important;
  }

  .meTimeWelness {
    width: 100% !important;
    text-align: center !important;
    align-items: normal !important;
  }

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

  .userNameProfile {
    width: 55px;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .giftBox .userProfile {
    margin-top: 8px !important;
  }
}

@media screen and (max-width: 400px) {
  .onboardingheaderLogo {
    width: 65px !important;
    height: 65px !important;
  }

  .switchToSpace.hideDesktop .navbar-nav .dropdown-menu {
    position: absolute;
    width: 265px;
    left: 0px;
  }
}

@media only screen and (max-width: 1920px) {
  .dashboardContainer .enterIntro .media {
    height: 400px;
  }

  #sliderImgThumb .item img {
    height: 100px;
    border-radius: 7px;
    object-fit: cover;
  }

  .emptyBox {
    padding: 20px;
    box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
    background: #fff;
    border: 1px solid #dddddd;
  }

  .boxx {
    margin-bottom: 50px;
  }

  .boxx .upperHed h4 {
    margin-bottom: 20px;
    font-size: 25px;
  }

  .txt h4 {
    color: #333;
    font-size: 25px;
  }

  .txt ul li {
    display: block;
    font-weight: 100;
    font-size: 16px;
    padding: 4px 0px;
    color: #8d8989;
  }

  .onlyTxt {
    padding-top: 36px;

    color: #8d8989;
  }

  .onlyTxt ul li a {
    text-decoration: none;
    font-size: 16px;
    color: #333;
    font-weight: 100;
  }

  /* .ordinareyHding{
        padding: 25px 0px;
    } */

  .ordinareyHding h3 {
    color: var(--site-primary-color);
    font-size: 35px;
  }
}

@media only screen and (max-width: 1440px) {
  .datepicker {
    background-position: 96.5%;
    background-position-y: 50%;
  }

  .mainMessage .iconText img {
    width: 20% !important;
  }

  .container.mainMessage {
    margin-top: 100px;
  }

  .myBusniessSection .congratulationsText .bigdotCongratulations {
    width: 100px !important;
  }

  .iconText span {
    font-size: 12px !important;
  }

  .mainMessage .cardLink {
    font-size: 15px !important;
  }

  .mainMessage .cardDetails {
    margin-left: 15px !important;
  }

  .myBusniessSection .congratulationsTitle {
    font-size: 45px !important;
  }

  .BusinessCategory {
    width: 482px !important;
  }

  .error-font {
    color: red;
    width: 100%;
  }

  .customButtonHeight {
    padding: 8px 0px;
    border-radius: 10px !important;
    font-size: 12px;
  }

  .contText.mp-4 {
    font-size: 12px;
  }

  .addresBox .inconText {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .profileDeatil .vcarddetail {
    padding: 10px 20px 0px !important;
  }

  .inconText .conIcons {
    min-width: 24px;
    height: 24px;
  }

  .CardBox {
    font-size: 12px;
  }

  .inconText .conIcons a i {
    font-size: 10px;
  }

  .CardIdentity .CardBox span.CardName {
    font-size: 18px;
  }

  .CardIdentity.css-0 {
    margin-top: 0px;
  }

  .CardAvatar .css-tbd01i {
    height: 150px;
  }

  .instacitiStar .row.mt-4 {
    margin-top: 15px !important;
  }

  .instacitiStar {
    padding-top: 8px;
  }

  .logoRow.border-bottom {
    padding-bottom: 8px !important;
  }

  .instacitiLogo img {
    width: 50px;
  }

  .customBackgroundColor {
    /* padding: 0px 15px; */
    margin-bottom: 10px;
  }

  .instacitiLogo p {
    font-size: clamp(10px, 0.9vw, 14px);
    margin-bottom: 0px !important;
  }

  .dashboardContainer .enterIntro .media {
    height: 300px;
  }

  .googleTranslate div#google_translate_element {
    padding-top: 5px !important;
  }

  .carouselThumbs .addImg {
    height: 62px;
  }

  .carouselThumbs .floatAddBtn {
    position: absolute;
    right: 25px;
    top: -1px;
    z-index: 11;
    background: white;
    width: 145px;
    padding-left: 40px;
  }

  #sliderImgThumb .item img {
    border-radius: 7px;
    height: 60px;
    object-fit: cover;
  }

  #sliderImgThumb .owl-nav.disabled {
    top: 15px;
  }

  .instacitiStar .nav-link {
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .dashboardContainer .famousOne .todos img {
    width: 60px;
  }

  .dashboardContainer .famousOne ul .heading {
    font-size: 18px;
  }

  .instacitiStar .leftBox .freeTheme .inner .box {
    height: 80px;
  }

  .onlyTxt ul li {
    display: block;
    padding: 0px 0px;
  }

  .boxx .upperHed h4 {
    font-size: 20px;
  }

  .reSize img {
    width: 86px;
    object-fit: cover;
  }

  .emptyBox {
    margin: 0px 0px;
    padding: 10px;
    box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
    background: #fff;
  }

  .iconTxt img {
    width: 86px;
  }

  .txt h4 {
    color: #333;
    font-size: 20px;
  }

  .upperHed h4 {
    padding-left: 0px;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .txt ul li {
    display: block;
    /* font-weight: 600; */
    font-size: clamp(10px, 0.9vw, 14px);
    font-weight: 100;
    padding: 0px 0px;
  }

  .onlyTxt {
    padding-top: 29px;
  }

  .onlyTxt ul li a {
    text-decoration: none;
    font-size: clamp(10px, 0.9vw, 14px);
    color: #8d8989;
  }

  .ordinareyHding h3 {
    color: var(--site-primary-color);
    font-size: 24px;
  }
}

@media only screen and (max-width: 1280px) {
  .dashboardContainer .topbar ul li {
    list-style: none;
    display: inline-block;
  }

  .dashboardContainer .breadcrumpArea .searchBox {
    position: relative;
    width: 79%;
    display: inline-block;
  }

  .emptyBox {
    padding: 10px;
    box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
    border-radius: 8px;
  }

  .iconTxt img {
    width: 100%;
  }

  .txt h4 {
    color: #333;
    font-size: 18px;
    /* padding: 0px 10px; */
  }

  .txt ul li {
    display: block;
    /* font-weight: 600; */
    font-size: 16px;
    color: #8d8989;
    font-weight: 100;
    /* padding: 4px 10px; */
  }

  .onlyTxt {
    padding-top: 29px;
  }

  .onlyTxt ul li a {
    text-decoration: none;
    font-size: clamp(10px, 0.9vw, 14px);
    color: #8d8989;
    font-weight: 100;
  }

  .ordinareyHding h3 {
    color: var(--site-primary-color);
    font-size: 24px;
  }

  .iconTxt {
    text-align: center;
  }

  .dashboardContainer .famousOne ul .heading {
    font-size: 18px;
  }

  .enquiryTableWrapper .tableRow i {
    color: #b9b9b9;
    font-size: 26px;
  }
}

@media only screen and (max-width: 1250px) {
  aside .sidebar {
    width: 0%;
    opacity: 0;
    transition: 0.5s;
  }

  .dashboardContainer {
    width: calc(100% - 0px);
    margin-left: auto;
  }

  .dashboardContainer .topbar .col-md-5:first-child {
    display: flex;
    align-items: center;
  }

  aside .sidebar .logo i {
    display: flex;
  }
}

@media only screen and (max-width: 1024px) {
  aside .sidebar {
    width: 0%;
    opacity: 0;
    transition: 0.5s;
  }

  .dashboardContainer {
    width: calc(100% - 0px);
    margin-left: auto;
  }

  .dashboardContainer .topbar .col-md-5:first-child {
    display: flex;
    align-items: center;
  }

  aside .sidebar .logo i {
    display: flex;
  }

  .dashboardContainer .topbar ul li {
    margin-left: 10px;
  }
}

@media only screen and (max-width: 800px) {
  .markIcon img {
    width: 40px !important;
    height: 40px !important;
  }

  .dashboardContainer .topbar .resturentName {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .dashboardContainer .topbar {
    top: 5px;
  }
}

@media only screen and (max-width: 767px) {
  .carouselThumbs .addImg {
    height: 62px;
    width: 60px;
    font-size: 20px;
  }

  .signaturePreview.mobile-mt-2 section.bizcardThreeSection .col-md-6 {
    padding: 0px;
  }

  .signaturePreview.mobile-mt-2 {
    margin-top: 0px !important;
  }

  .breadcrumpArea .col-md-6.col-9 {
    padding: 0px;
  }

  .carouselThumbs .floatAddBtn {
    position: absolute;
    right: 25px;
    top: -1px;
    z-index: 11;
    background: white;
    width: 85px;
    padding-left: 20px;
  }

  .dashboardContainer .enterIntro .media {
    height: 220px;
  }

  .enquiryTableWrapper .table strong {
    padding: 5px;
    font-weight: 700;
    text-align: left;
    display: block;
  }

  .dashboardContainer .breadcrumpArea a {
    margin-left: 0px !important;
  }

  .signturePreview {
    margin-top: 20px;
  }

  .instacitiStar {
    padding: 15px;
    margin-top: 0px !important;
  }

  .signturePreview .signatureBody {
    min-height: 350px;
    /* padding: 15px;
        padding-top: 25px; */
    overflow: hidden;
  }

  .instacitiStar .nav-item {
    width: 48% !important;
    margin-right: 10px !important;
  }

  .instacitiStar .nav-link {
    padding: 15px;
  }

  .signturePreview .head p {
    padding: 5px;
    margin-left: 10px;
  }

  .signturePreview .head {
    padding: 15px;
  }

  .signturePreview .bi-layout-text-sidebar {
    display: none;
  }

  .signturePreview .bi-chevron-left {
    display: none;
  }

  .signturePreview .bi-chevron-right {
    display: none;
  }

  .signturePreview .head .right {
    display: none;
  }

  .dashboardContainer .enterIntro th {
    font-size: 12px;
    padding: 5px;
  }

  .dashboardContainer .enterIntro td {
    font-size: 12px;
    padding: 15px 5px;
  }

  .dashboardContainer .enterIntro .editIcons {
    display: flex;
  }

  .dashboardContainer .enterIntro td i {
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .dashboardContainer .enterIntro td .me-3 {
    margin-right: 5px;
  }

  .dashboardContainer .calender .tableDay td {
    text-align: left;
    height: 50px;
  }

  .dashboardContainer .contactManger {
    padding: 15px;
  }

  .dashboardContainer .contactManger .heading .col-md-3 {
    margin-bottom: 25px !important;
  }

  .dashboardContainer .calender .table th {
    color: #3f51b5;
    background-color: #e5e9ff;
    text-align: center;
    padding: 5px;
    font-size: 12px;
  }

  .dashboardContainer .calender .weeklyTable th {
    font-size: 11px !important;
  }

  .dashboardContainer .calender .weeklyTable td .event1 {
    padding: 0px 3px;
    font-size: 11px;
  }

  .dashboardContainer .calender .weeklyTable td .event2 {
    padding: 0px 3px;
    font-size: 11px;
  }

  .dashboardContainer .calender {
    padding: 15px;
    margin-bottom: 30px;
  }

  .calender .heading {
    flex-direction: column;
    align-items: baseline;
  }

  .calender .heading .timeFrame {
    margin-bottom: 25px;
    width: 100%;
  }

  .calender .nav {
    width: 100%;
  }

  .calender .nav li {
    width: 33.33%;
  }

  .calender .heading .row {
    width: 105%;
  }

  .calender .heading select {
    width: 100%;
  }

  .calender .heading .col-auto {
    margin-top: 5px;
    width: 100%;
  }

  .calender .heading label {
    padding-bottom: 0px;
  }

  .dashboardContainer .calender .table td {
    padding: 5px 5px;
    font-size: 12px;
  }

  .dashboardContainer .calender .table td .event1 {
    font-size: 11px;
  }

  .dashboardContainer .calender .table td .event2 {
    font-size: 11px;
  }

  .dashboardContainer .calender .table td .eventMore {
    font-size: 11px;
  }

  .invoiceList .wizardInsider {
    border-bottom: 1px solid #efefef;
    padding-top: 0;
    padding-bottom: 20px;
  }

  .borderRight {
    border: none;
  }

  .py-5 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .borderBottom {
    border: none !important;
  }

  .invoiceList .tab-content .col-md-6 {
    padding-left: 0px;
    border-bottom: 0px !important;
  }

  .invoiceList .wizardInsider img {
    width: 45px;
  }

  .invoiceList nav .nav-link::before {
    top: 18px;
  }

  .invoiceList nav .nav-link.active .iconWrapper {
    width: 35px;
    height: 35px;
  }

  .invoiceList nav .nav-link svg {
    width: 16px;
    height: 16px;
  }

  .invoiceList nav .nav-link {
    padding: 0px;
  }

  .invoiceList nav .nav-link {
    font-size: 10px;
  }

  .invoiceList nav .nav-link .iconWrapper {
    width: 35px;
    height: 35px;
  }

  .invoiceList th {
    padding: 10px 12px;
  }

  .myBusiness {
    padding: 25px 0px;
    margin-bottom: 30px;
  }

  .headerWithoutSidebar {
    margin-top: 20px;
  }

  .headerWithoutSidebar h3 {
    font-size: 18px;
  }

  .headerWithoutSidebar img {
    width: 65px;
    height: 65px;
    box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
  }

  .headerWithoutSidebar .textDecorationNone {
    width: calc(100% - 65px);
    display: block;
    margin-left: auto;
    text-align: left !important;
    margin-top: 10px;
  }

  .headerWithoutSidebar .textDecorationNone p {
    margin-bottom: 0px;
    font-size: 12px;
  }

  .dashboardContainer .serviceList table .flotRight {
    float: right;
  }

  .dashboardContainer .famousOne {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px 15px;
  }

  .dashboardContainer .enterIntro .applyDiscount {
    flex-direction: column;
    margin-top: 0px;
    padding-bottom: 0px;
  }

  .dashboardContainer .enterIntro .applyDiscount h5 {
    margin-top: 25px;
  }

  .dashboardContainer .enterIntro .applyDiscount .d-flex {
    margin-bottom: 15px;
  }

  .serviceList .tableItems {
    flex-direction: column;
    margin-top: 25px;
  }

  .serviceList .tableItems .right {
    margin-top: 25px;
  }

  .serviceList .tableItems .left {
    width: unset;
  }

  .serviceList .heading .btn {
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .serviceList .heading h5 {
    margin-bottom: 0px;
  }

  .dashboardContainer .serviceList {
    margin-top: 0px;
    margin-bottom: 30px;
    padding: 15px;
  }

  .dashboardContainer .billingList {
    margin-top: 0px;
    margin-bottom: 30px;
    padding: 15px;
  }

  .dashboardContainer .billingList ul li {
    margin-top: 20px;
  }

  .boxx .upperHed h4 {
    margin-bottom: 10px;
  }

  .dashboardContainer .topbar ul .line {
    height: unset !important;
    top: 0px !important;
    display: none;
  }

  .infoAccrodions {
    margin-top: 0;
  }

  .infoAccrodions .accordion-button {
    max-width: 100% !important;
  }

  .dashboardContainer .breadcrumpArea {
    padding: 10px 15px 5px;
  }

  .dashboardContainer {
    width: calc(100% - 0px) !important;
    margin-left: auto;
  }

  .dashboardContainer .topbar .resturentName {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 175px;
  }

  .dashboardContainer .topbar .location {
    color: #505050;
    font-size: 12px;
  }

  .dashboardContainer .topbar ul li img {
    width: 33px !important;
    height: 33px !important;
  }

  .dashboardContainer .topbar ul li {
    margin-left: 5px;
  }

  .dashboardContainer .topbar ul .userProfile {
    /* border-left: 1px solid #ddd; */
    padding-left: 10px;
  }

  .dashboardContainer .topbar {
    padding: 15px;
    box-shadow: none;
    background-color: transparent !important;
    position: initial;
  }

  .dashboardContainer .topbar .col-md-5:first-child {
    box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
  }

  .dashboardContainer .topbar .col-md-5:first-child i {
    font-size: 25px;
    margin-right: 15px;
  }

  .dashboardContainer .topbar .col-md-6:last-child {
    box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
    padding: 0px;
    background-color: #ffffff;
    border-radius: 8px;
    position: relative;
    margin: 10px 10px 0px;
    width: 94%;
    margin-top: 10px !important;
  }

  .dashboardContainer .breadcrumpArea .searchBox {
    display: none;
  }

  .dashboardContainer .breadcrumpArea .col-4 {
    text-align: right;
  }

  .switchToSpace .col-md-5.col-6 {
    text-align: right;
  }

  .dashboardContainer .breadcrumpArea .breadcrumb-item.active {
    font-size: 15px;
  }

  .dashboardContainer .breadcrumpArea .breadcrumb-item {
    font-size: 15px;
  }

  .dashboardContainer .breadcrumpArea a {
    display: inline-block !important;
    font-size: 13px;
  }

  .dashboardContainer .enterIntro h4.font22.font600 {
    font-size: 15px !important;
  }

  .dashboardContainer .dashboardBtns .btnPurple {
    width: 100%;
  }

  .dashboardContainer .dashboardBtns .btnRed {
    width: 100%;
    margin-bottom: 10px;
  }

  .dashboardContainer .enterIntro {
    padding: 15px;
  }

  .dashboardContainer .listing ul li .btn {
    width: 100%;
  }

  aside .sidebar .logo i {
    display: flex;
  }

  .dashboardContainer .topbar .searchBox {
    display: none;
  }

  .dashboardContainer .topbar .searchBox input {
    border: none;
    padding-left: 25px !important;
  }

  .dashboardContainer .topbar .searchBox i {
    position: absolute;
    left: 0px;
    top: 18px;
    color: #9c9c9c;
  }

  .dashboardContainer .topbar .searchBox input::placeholder {
    font-size: clamp(10px, 0.9vw, 14px);
    color: #9c9c9c;
  }

  .dashboardContainer .enterIntro .form-check-input:checked {
    margin-bottom: 7px;
  }

  .instaBiz .mainBody.selecteTypeCard .col-md-4 {
    min-height: auto;
  }

  .instaBiz .mainBody.selecteTypeCard .card {
    margin-top: 0;
  }

  .keyFob {
    flex-direction: column-reverse;
  }

  .instaBiz .mainBody .keyFob .card .d-flex {
    flex-direction: column;
  }

  .keyFob .card {
    text-align: center;
  }

  .instaBiz .mainBody .keyFob .card .btn {
    width: 100%;
    margin-top: 10px !important;
  }

  .keyFob .card {
    border-radius: 0;
  }
}

@media only screen and (max-width: 600px) {
  .dashboardContainer .famousOne {
    margin-bottom: 30px;
  }

  .famousOne .filterDate .col-md-5 {
    margin-bottom: 20px;
  }

  .famousOne .filterDate .btn {
    margin-top: 10px;
  }

  aside .sidebar {
    opacity: 1;
  }

  .responsiveTable {
    overflow-x: scroll;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .myBusiness .lightBlueBg {
    background-color: #ecedff;
    font-size: clamp(10px, 0.9vw, 14px);
    padding: 10px 10px !important;
    margin: 10px 0px;
    width: 100%;
  }

  .dashboardContainer .breadcrumpArea .searchBox {
    display: none !important;
  }

  .subMenu .accordion-body {
    padding-left: 0px;
    padding-right: 0px;
  }

  .dashboardContainer .famousOne .todos {
    margin-bottom: 35px;
  }

  .dashboardContainer .famousOne .mb-5 {
    margin-bottom: 35px !important;
  }

  .famousOneSuit {
    margin-top: 30px;
  }

  .famousOneSuit .row {
    margin-bottom: 25px;
  }

  .boxx {
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .upperHed {
    text-align: left;
  }

  .reSize img {
    margin: 0px;
    width: 100%;
  }

  .iconTxts {
    text-align: center;
  }

  .dashboardContainer .topbar .d-flex img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .dashboardContainer .breadcrumpArea .breadcrumb-item a {
    color: #9c9c9c;
    text-decoration: none;
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .dashboardContainer .breadcrumpArea .breadcrumb-item.active {
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .dashboardContainer .breadcrumpArea .searchBox {
    position: relative;
    width: 48%;
    display: inline-block;
  }

  .emptyBox {
    margin: 0px 0px;
    margin-bottom: 15px;
    padding: 10px;
    box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
    border-radius: 8px;
  }

  .iconTxt {
    width: 100%;
  }

  .txt ul li {
    display: block;
    /* font-weight: 600; */
    font-size: clamp(10px, 0.9vw, 14px);
    /* padding: 4px 10px; */
  }

  .onlyTxt {
    width: calc(100% - 25%);
    margin-left: auto;
    padding: 0px 5px;
  }

  .onlyTxt ul {
    margin: 0px;
    padding: 0px;
  }

  .ordinareyHding {
    text-align: center;
    margin-bottom: 25px;
  }

  .ordinareyHding hr {
    margin: auto;
  }

  .branding .iconTxt {
    margin-top: 0px !important;
  }

  .ordinareyHding h3 {
    color: var(--site-primary-color);
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .mobileView {
    display: block !important;
    margin: auto !important;
  }

  .bottomBandContainer {
    left: 0px;
  }

  section.congratulationsPage:after {
    min-height: 100vh;
    left: 0px;
    height: 1px;
    width: 100%;
  }

  .desktopDisplay {
    display: none;
  }

  .hideDesktop {
    display: inline !important;
  }

  .hideMobile {
    display: none !important;
  }

  .dashUpgradeButton {
    margin-bottom: 10px;
  }

  .ideasButton.br50 {
    width: 100% !important;
  }

  .ideasButton.br50 i {
    font: 18px;
  }

  .instacitiStar .nav-item:last-child {
    margin-right: 0px !important;
  }

  .switchToSpace .plainButton {
    padding: 10px 8px !important;
  }

  .filterDashboardItems .form-check-inline {
    margin-right: 5px;
  }

  .filterDashboardItems .form-check-inline label {
    font-size: 14px !important;
  }

  .btn-warning {
    margin-right: 5px !important;
  }

  .topAlert {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .customGapping {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  .plans .bgWrapper .btnGroup .btn {
    margin-bottom: 15px;
  }

  .getDiscovered .row {
    display: block;
  }

  .getDiscovered .title {
    position: static;
    padding-left: 15px;
    margin-bottom: 30px;
    padding-top: 0px;
  }

  .famousPlan .card img {
    height: unset;
    margin: auto;
    display: block;
  }

  .markIcon {
    padding: 12px 10px;
    text-align: right;
  }

  i#hamburgerMenu {
    z-index: 12;
    position: relative;
    float: right;
  }

  .btn.pinkBgColor.hideDesktop {
    display: none !important;
  }

  .markIcon ul.d-flex {
    justify-content: space-between;
  }

  .font14 {
    font-size: clamp(13px, 0.9vw, 14px) !important;
  }

  .font20 {
    font-size: 18px;
    line-height: 22px;
  }

  .font22 {
    font-size: 18px;
    line-height: 24px;
  }

  .font26 {
    font-size: 20px;
    line-height: 35px;
  }

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

  .font32 {
    font-size: 24px;
  }

  .font34 {
    font-size: 26px;
  }

  .font36 {
    font-size: 28px;
  }

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

  .mobile-mt-1 {
    margin-top: 10px !important;
    font-size: 18px !important;
    line-height: 24px !important;
    margin-bottom: 0px !important;
  }

  .mobile-mt-2 {
    margin-top: 20px !important;
  }

  .mobile-mt-3 {
    margin-top: 30px !important;
  }

  .mobile-mt-4 {
    margin-top: 30px !important;
  }

  .mobile-mb-1 {
    margin-bottom: 10px !important;
  }

  .mobile-mb-2 {
    margin-bottom: 20px !important;
  }

  .mobile-mb-3 {
    margin-bottom: 30px !important;
  }

  .mobile-mb-4 {
    margin-bottom: 30px !important;
  }

  .managefromWeb {
    margin-top: 50px;
  }

  .border-start-mobile {
    border: none;
  }

  .firstWrapper img {
    width: 80px;
  }

  .secondWrapper img {
    width: 80px;
  }

  .businessLogo img {
    max-width: 150px;
    max-height: 150px;
  }

  .businessLogo {
    text-align: center;
  }

  .businessInfo {
    text-align: center !important;
  }

  .btnOne button {
    font-size: 13px;
  }

  .btnArrow {
    padding-left: 10px;
  }

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

  .welcomeFont {
    font-size: 16px;
  }

  .instacitiLogo {
    font-size: 12px;
  }

  .oneClickUpgrade {
    border-radius: 10px !important;
    padding: 10px !important;
    text-align: center;
    background-color: #ffffff;
    color: #e91e63 !important;
    font-size: clamp(10px, 0.9vw, 14px);
    width: 100% !important;
  }

  .upgradeIcon {
    background-color: #ffbdd3;
    border-radius: 10px !important;
    padding: 10px !important;
    width: 50px !important;
    text-align: center;
  }

  .enquiryTableWrapper .tableRow i {
    color: #b9b9b9;
    font-size: 18px;
  }

  .appdownloadButton img {
    width: 135px;
  }

  .dashboardIcons {
    width: 50px;
  }

  .mobileScreenRemoveHeight {
    height: 100% !important;
    background-color: #ffffff !important;
    padding-top: 20px;
  }

  .splashImage {
    width: 165px !important;
  }

  .splashText {
    width: 165px !important;
  }

  .d-h100 {
    height: auto;
  }

  .dashboardContainer .famousOne .todos {
    margin-bottom: 0px;
  }

  .mobileFullWidth {
    display: grid !important;
  }

  .logo-text {
    font-size: 9px;
    line-height: 9px;
    float: right;
    padding-left: 0px !important;
  }

  .store-name a {
    font-size: 20px;
  }

  .small-sc .font16 {
    color: #939393 !important;
  }

  .day-shedule {
    width: 33px;
    height: 33px;
    font-size: 10px;
    padding-top: 7px;
  }

  .custom-heading768 {
    font-size: 12px;
  }

  .countrypicker .filter-option.flag {
    font-size: 8px !important;
  }

  .bootstrap-select > .dropdown-menu > .dropdown-menu li a {
    width: 50%;
  }

  .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(
      .input-group-btn
    ) {
    width: 120px !important;
  }

  .dropdown-toggle.btn-default {
    background-color: #ffffff;
  }

  .custom-border {
    border: none !important;
  }

  .sm-font16 {
    font-size: 16px;
  }

  .sm-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    color: #1c2d64;
  }

  .mobile-view {
    display: inline;
  }

  .index-logo {
    width: 136px;
    height: 34px;
  }

  .progressTitle {
    display: none;
  }
}

@media (max-width: 420px) {
  .toggleMobileView.hideDesktop div#offcanvasWithBothOptions {
    width: 340px !important;
  }

  .publishDeatail h2.font500 {
    font-size: 17px !important;
  }

  .topbar .PublishMicrosite .SecondaryBtnBgColor {
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .topbar .PublishMicrosite .btn.saveBtn {
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .myBusniessSection .congratulationsText {
    font-size: 18px !important;
  }

  body .myBusniessSection .congratulationsTitle {
    font-size: 40px !important;
  }

  .dashboardContainer .breadcrumpArea a {
    font-size: 11px !important;
  }

  .dashboardContainer .breadcrumpArea .breadcrumb-item {
    font-size: 12px !important;
    padding-left: 5px;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 5px;
  }
}

@media only screen and (max-width: 767px) {
  .mediaContainer .mediaImage .btn {
    margin-top: 0px !important;
  }

  .mobile-toggle {
    left: 10px !important;
    position: relative !important;
    background: none;
    border: none;
    font-size: 24px !important;
    color: #1c2d64 !important;
    padding: 0px;
    top: 10px !important;
  }

  .selectBizdots .classicBtnGroup button.btn {
    margin-left: 0px;
    font-size: clamp(10px, 0.9vw, 14px);
    width: auto;
    padding: 5px 10px;
  }

  .selectBizdots .selectCart.BrandedCard {
    min-height: auto !important;
  }

  .customBackgroundColor {
    padding: 0px 0px;
  }

  .userEditEffect {
    padding: 100px 10px !important;
  }

  .userEditEffect img {
    width: 100px;
    margin-bottom: 20px;
  }

  .toggleMobileView.hideDesktop div#offcanvasWithBothOptions {
    width: 380px;
  }

  .customBackgroundColor .breadcrumpArea .col-md-4.col-12.my-auto {
    padding: 0px;
  }

  .dashboardContainer .container-fluid.p-lg-4.customBackgroundColor {
    padding: 15px 15px !important;
  }

  .customBackgroundColor .customBackgroundColor {
    padding: 0px 0px !important;
  }

  .publishButton.hideDesktop .btn.btn-warning {
    margin-right: 0px !important;
    padding: 6px;
  }

  .switchToSpace.hideDesktop {
    margin-top: 18px;
  }

  /* .userProfileDropdown .dropdown-menu {
    transform: translate3d(0px, 47px, 0px) !important;
  } */

  .mediaContainer .mediaImage {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
  }

  .MobileswitchBtn.plainButton {
    margin-top: 10px I !important;
  }

  .mediaContainer .smartMediaThumb video {
    min-height: 50px !important;
    max-height: 50px;
  }

  .switchToSpace.hideDesktop .navbar-nav .dropdown-menu {
    position: absolute;
    width: 320px;
  }

  .mediaContainer .mediaImage .col-lg-3.col-12.text-end {
    text-align: start !important;
  }

  .switchToSpace.hideDesktop .dropdown-item.active,
  .dropdown-item:active {
    background-color: #1c2d64;
  }

  .switchToSpace.hideDesktop .navbar-nav .dropdown-menu li ul {
    margin: 10px;
    padding: 0px;
  }

  .switchToSpace.hideDesktop .navbar-nav .dropdown-menu li ul li {
    padding: 5px 15px;
  }

  .dashboardContainer .strip {
    display: none;
  }

  .mediaImage.blue.box .col.text-start {
    margin-right: 5px;
  }

  .mediaImage.blue.box .smartMediaThumb img {
    min-height: 50px !important;
    max-height: 50px;
  }

  .enquiryTableWrapper .tableRow {
    border: none;
  }

  .editForm span.input-group-addon.col-md-2 i {
    margin: 6px;
  }

  .enquiryTableWrapper .tableRow ul li {
    display: inline-block;
  }

  .enquiryTableWrapper .tableRow ul:first-child {
    display: none !important;
  }

  .enquiryTableWrapper .tableRow ul {
    display: block !important;
    margin-bottom: 20px;
    padding-bottom: 10px;
  }

  .enquiryTableWrapper .tableRow ul li:nth-child(1) {
    width: 100%;
    font-weight: 600;
  }

  .enquiryTableWrapper .tableRow ul li:nth-child(2) {
    width: 23%;
  }

  .enquiryTableWrapper .tableRow ul li:nth-child(3) {
    width: 24%;
  }

  .enquiryTableWrapper .tableRow ul li:nth-child(4) {
    width: 24%;
  }

  .enquiryTableWrapper .tableRow ul li:nth-child(5) {
    width: 24%;
  }

  .enquiryTableWrapper .table th {
    padding: 5px 0px;
    font-size: 13px;
  }

  .enquiryTableWrapper .table td {
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.5;
  }

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

  .customPagination .left {
    width: unset;
  }
}

@media screen and (max-width: 768px) {
  .grid-2-sm {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 450px) {
  .grid-12-xs {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 768px) {
  .previewPopup .nav {
    padding: 10px 10px;
  }

  .addFrame {
    height: 200px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  .customeinnerCard .col-12.mt-3 {
    margin-top: 8px !important;
  }

  .card-profile-image {
    position: relative;
    margin-bottom: 45px;
  }

  .card-profile-image img {
    min-height: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
  }

  .flip-card-front img {
    height: 80px;
  }

  .flip-card-inner {
    height: 80px;
  }

  .flip-card {
    height: 80px;
  }

  .submitDashboard {
    margin-top: 15px !important;
  }

  .submitDashboard .customButtonHeight {
    margin-bottom: 0 !important;
    height: 42px;
  }

  .instacitiLogo {
    margin-top: 10px !important;
  }

  .instacitiStar {
    padding: 18px 20px;
  }

  .instacitiStar .row.mt-4 {
    margin-top: 15px !important;
  }
}

@media only screen and (max-width: 1440px) {
  aside .sidebar {
    width: 275px !important;
  }

  .dashboardContainer {
    width: calc(100% - 275px);
  }

  .customNav.nav-pills .nav-link,
  .nav-pills .show > .nav-link {
    font-size: 12px;
    padding: 5px;
  }

  .p-lg-4 {
    padding: 1rem !important;
  }

  .markIcon img {
    width: 40px !important;
    height: 40px !important;
  }

  .customPagination .right ul li.page-item a {
    padding: 0px 5px;
  }

  .custom-border-bottom {
    justify-content: space-between;
  }

  .custom-border-bottom .darkMuted {
    padding-right: 5px !important;
  }

  .custom-border-bottom i.cdk-drag-handle.mat-tooltip-trigger {
    padding-right: 5px !important;
  }

  .col-auto.topbar {
    align-items: center;
    display: flex;
    margin-top: 10px;
  }

  .topbar img {
    width: 40px !important;
    height: 40px !important;
  }

  .font26 {
    font-size: 22px;
    line-height: 35px;
  }

  .dashboardContainer .breadcrumpArea a {
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .buttonH50 {
    padding: 10px;
    font-size: clamp(10px, 0.9vw, 14px);
    margin-bottom: 20px;
  }

  .invoiceList h4 {
    font-size: 16px;
  }

  .font36 {
    font-size: 28px;
  }

  .font20 {
    font-size: 18px;
    line-height: 30px;
  }

  .buttonHeight {
    font-size: 15px;
  }

  /* .famousOne .filterDate .btn {
    font-size: 10px;
    padding: 8px;
  } */

  .dashboardContainer .enterIntro th {
    padding: 8px;
    vertical-align: middle;
    font-size: 11px;
  }

  /* .invoiceList th {
    font-size: 12px;
  } */

  .dashboardContainer .enterIntro th strong {
    padding: 0px;
  }

  .customBackgroundColor .container.py-lg-4 {
    padding: 10px 10px !important;
  }

  .customBackgroundColor .container.py-lg-4 .col-md-12.mt-4 {
    margin-top: 10px !important;
  }

  .businessDashIcon {
    font-size: 30px !important;
  }

  .businessName {
    text-align: center;
    margin-top: 8px !important;
  }

  .unUpgradeIcon {
    font-size: 30px;
  }

  .myBusiness {
    padding: 10px 0px;
    margin-top: 15px;
  }

  .businessName .font26 {
    margin-bottom: 5px;
  }

  .enquiryTableWrapper .row.mb-5.mt-5 {
    margin: 25px 0px !important;
  }

  .enquiryTableWrapper .row.mb-5 {
    margin-bottom: 20px !important;
  }
}

@media (min-width: 767px) and (max-width: 1250px) {
  aside .sidebar {
    width: 275px !important;
    opacity: 1 !important;
  }

  i#hamburgerMenuTest,
  aside .sidebar .logo i {
    opacity: 0;
    visibility: hidden;
  }
}

@media (max-width: 1920px) {
  .instaBiz .mainBody {
    background-color: #ffeaef;
    margin: 0 auto;
  }
}

@media (max-width: 1440px) {
  .instaBiz .mainBody {
    background-color: #ffeaef;
    max-width: 1370px;
    margin-left: auto;
  }
}

@media (max-width: 1399px) {
  .instaBiz .mainBody {
    background-color: #ffeaef;
    max-width: 1250px;
    margin-left: auto;
  }
}

@media (max-width: 1280px) {
  .instaBiz .mainBody {
    background-color: #ffeaef;
    max-width: 1200px;
    margin-left: auto;
  }
}

@media (max-width: 1080px) {
  .instaBiz .mainBody {
    background-color: #ffeaef;
    max-width: 1000px;
    margin-left: auto;
  }
}

@media only screen and (max-width: 600px) {
  .instaBiz .topHeader {
    font-size: 12px;
  }

  .instaBiz .mainHeader .logo {
    width: 140px;
  }

  .instaBiz .mainHeader .user {
    width: 150px;
    top: -12px;
  }

  .instaBiz .mainHeader .user span {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .instaBiz .mainHeader .user span a {
    position: absolute;
    top: 20px;
  }

  .instaBiz .mainBody .col-md-8 {
    padding-right: 15px;
  }

  .instaBiz .mainBody .col-md-4 {
    padding-bottom: 25px;
  }

  .instaBiz .mainBody .head {
    display: block;
  }

  .instaBiz .mainBody .head h5 {
    font-weight: 700;
    margin-bottom: 15px;
  }

  .d-block-mobile {
    display: block !important;
  }
}

@media only screen and (max-width: 1920px) {
  .finalPreview {
    transform: scale(0.5);
    position: absolute;
    top: -200px;
  }
}

@media only screen and (max-width: 1440px) {
  .finalPreview {
    transform: scale(0.5);
    position: absolute;
    top: -230px;
    left: 375px;
  }
}

@media only screen and (max-width: 1366px) {
  .finalPreview {
    transform: scale(0.5);
    position: absolute;
    top: -200px;
    left: 350px;
  }
}

@media only screen and (max-width: 1280px) {
  .finalPreview {
    transform: scale(0.5);
    position: absolute;
    top: -200px;
    left: 300px;
  }
}

@media only screen and (max-width: 768px) {
  .plans .bgWrapper .btnGroup .btn {
    padding: 8px 16px;
    font-size: 12px;
    margin-right: 5px;
  }

  .plans .bgWrapper .col-md-9 {
    flex: 0 0 auto;
    width: 100%;
    padding-right: 15px;
  }

  .plans .bgWrapper .col-md-3 {
    flex: 0 0 auto;
    width: 100%;
  }

  .plans .rightImg {
    display: block;
    width: 175px;
    top: 275%;
  }
}

@media only screen and (max-width: 1024px) {
  .plans .bgWrapper .btnGroup .btn {
    padding: 10px 18px;
    font-size: 12px;
    margin-right: 5px;
  }

  .plans .rightImg {
    position: absolute;
    right: 0;
    width: 240px;
  }
}

@media (min-width: 1901.98px) and (max-width: 2100.98px) {
  .topAlert {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .customGapping {
    padding-left: 18% !important;
    padding-right: 18% !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .store-name a {
    font-size: 12px;
    line-height: 13px;
  }

  .day-shedule {
    width: 33px;
    height: 33px;
    font-size: 10px;
    padding-top: 8px;
  }

  .custom-heading768 {
    font-size: 12px;
  }

  .index-logo {
    width: 136px;
    height: 34px;
  }

  .logo-text {
    font-size: 10px;
    line-height: 17px;
  }

  .custom-heading {
    font-size: 12px;
  }

  .checkbox-label {
    font-size: 12px;
  }

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

@media (min-width: 992px) and (max-width: 1199.98px) {
  .store-name a {
    font-size: 17px;
    line-height: 23px;
  }

  .index-logo {
    width: 136px;
    height: 34px;
  }

  .logo-text {
    font-size: 10px;
    line-height: 17px;
  }
}

@media (min-width: 1200px) {
  .logo-text {
    font-size: 13.2348px;
    line-height: 17px;
    padding-left: 23px !important;
  }

  .store-name a {
    font-size: 20px;
  }

  .index-logo {
    width: 166px;
    height: 44px;
  }
}

@media (min-width: 1400px) {
  .index-logo {
    width: 233px;
    height: 58px;
  }

  .logo-text {
    font-size: 18.2348px;
    line-height: 17px;
    padding-left: 35px !important;
  }
}

@media (min-width: 1900px) {
  .custom-padding {
    padding-left: 12%;
    padding-right: 12%;
  }
}

@media screen and (max-width: 768px) {
  .leftCard {
    width: 100%;
  }

  .floatCard {
    width: 100%;
    float: none;
  }

  .displayBlock {
    display: block !important;
  }

  /* .w-75 {
    width: 100% !important;
  } */

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

@media only screen and (max-width: 1440px) {
  .socialStudioLogo img {
    width: 150px;
  }

  .addNewChannel button.btn {
    font-size: 13px;
  }

  #grad1 .container.py-5.h-100 {
    padding: 15px 10px !important;
  }

  .socialMediaTabs .nav-tabs .nav-link {
    font-size: clamp(10px, 0.9vw, 14px);
  }
}

@media (max-width: 767px) {
  .getDiscovered {
    padding: 35px 0px;
    padding-bottom: 0px;
    height: unset;
  }

  .instacitiStar.mt-4 {
    margin-top: 15px !important;
  }

  .herosectionHeader h1 {
    font-size: 50px !important;
    color: #7244de;
  }

  .getDiscovered .line {
    display: none;
  }

  .getDiscovered .inner p {
    margin: 0px;
  }

  .instacitiStar .nav-pills .nav-link {
    padding: 10px 4px;
  }

  .getDiscovered .title h3 {
    font-size: 25px;
  }

  .getDiscovered .title h5 {
    font-size: 16px;
  }

  .getDiscovered .inner {
    border-radius: 0;
    box-shadow: none;
    height: 100px !important;
    display: flex;
    align-items: center;
  }

  .getDiscovered .inner {
    position: relative;
  }

  .getDiscovered .inner.inner1::before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: #f15a25;
    position: absolute;
    left: 32px;
    bottom: -7px;
    z-index: 1;
    transform: rotate(45deg);
  }

  .getDiscovered .inner h2 {
    line-height: 1 !important;
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    font-size: 50px;
    margin-bottom: 0px !important;
    width: 70px;
  }

  .getDiscovered .inner h5 {
    text-align: left;
  }

  .getDiscovered .inner p {
    text-align: left;
  }

  .getDiscovered .inner.inner2::before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: #f2ad22;
    position: absolute;
    left: 32px;
    bottom: -7px;
    z-index: 1;
    transform: rotate(45deg);
  }

  .getDiscovered .inner.inner3::before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: #f15a25;
    position: absolute;
    left: 32px;
    bottom: -7px;
    z-index: 1;
    transform: rotate(45deg);
  }

  .getDiscovered .inner.inner4::before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: #1c2d64;
    position: absolute;
    left: 32px;
    bottom: -7px;
    z-index: 1;
    transform: rotate(45deg);
  }

  .plans .bgWrapper .btnGroup {
    padding-top: 10px !important;
    padding-bottom: 0px !important;
  }

  .addOnProducts .leftImg {
    display: none;
  }

  .distributerLogoImage {
    max-width: 135px;
  }

  .mediaAllChannels ul li {
    padding: 5px 0px;
  }

  .dashboardContainer .breadcrumpArea .mobileView.col-4 {
    display: none !important;
  }

  .socialLife .commented h4 {
    font-size: 15px;
  }

  .socialStudioLogo img {
    width: 140px !important;
  }

  .addNewChannel button.btn {
    font-size: 14px !important;
    font-weight: 600;
  }

  .mediaAllChannels ul {
    display: block;
  }

  .socialMediaTabs .nav-tabs .nav-link {
    padding: 0px 5px 5px !important;
    font-size: clamp(10px, 0.9vw, 14px);
  }

  .socialMediaTabs .nav.nav-tabs {
    margin-top: 20px;
  }

  .socialMediaBanner .bannerImage {
    width: 100%;
    height: 250px;
  }

  .socialMediaBanner .recentsPosts {
    width: 100%;
  }

  .addMoreBtn button.btn {
    margin-bottom: 10px;
  }

  .socialLife.bg-white {
    min-height: 250px;
  }

  .saveDraftBtn {
    text-align: center !important;
  }

  .addMoreBtn.align-items-center.d-flex {
    display: block !important;
  }

  .addMoreBtn.align-items-center.d-flex button.btn {
    margin-top: 10px;
  }

  .bigdotEmoji {
    text-align: center;
    margin-bottom: 10px !important;
  }

  .purchaseBigdot .col-lg-4.col-md-6.bg-white {
    border-right: 0px !important;
    border-bottom: 1px solid #3e31cf !important;
  }

  .professionalWebsite h3 {
    font-size: 50px !important;
    line-height: 34px;
  }

  .starter p.text-white span {
    font-size: 40px !important;
  }

  .mat-icon-button {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
  }

  .footerBigdotAi.bg-white .col-md-6.text-end {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px !important;
  }

  .carousel-indicators {
    margin-bottom: 3.5rem !important;
  }

  .BusinessCategory {
    width: 100%;
  }

  .card-body.cardBoxShadow .col-md-6 {
    margin-top: 10px !important;
  }

  body .categoryDetail .dropdown-menu {
    width: 100% !important;
    top: 70px;
  }

  .professionalWebsite {
    padding: 20px;
  }

  .navbarCss .navbar-nav .nav-link i.fa-solid.fa-bars-staggered {
    display: block !important;
  }

  .bigdotBusiness.BusinessImage {
    padding: 0px 0px !important;
    margin-top: -100px !important;
  }

  .bigdotBusiness.BusinessImage img {
    height: 200px !important;
  }

  body .websiteAllProduct {
    display: block !important;
  }

  .websiteAllProduct .btnGroup {
    display: flex;
    margin-bottom: 10px;
  }

  .btnGroup button.btn {
    padding: 6px 40px !important;
  }

  .websiteAllProduct.purchasingWebsite {
    display: flex !important;
  }

  .starter {
    margin: 10px;
  }
}

@media (max-width: 575.98px) {
  .font60 {
    font-size: 28px;
    line-height: 40px;
  }

  .font20 {
    font-size: 17px;
    line-height: 24px;
  }

  .font40,
  .font42 {
    font-size: 20px;
    line-height: 30px;
  }
}

@media (max-width: 420px) {
  .mat-paginator-range-label {
    margin: 0 8px 0 8px !important;
  }

  body .mat-paginator,
  .mat-paginator-page-size .mat-select-trigger {
    font-size: 11px !important;
  }

  .mat-icon-button {
    width: 22px !important;
    height: 26px !important;
    line-height: 22px !important;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
  screen and (min-resolution: 144dpi) {
  .whatsAppIcon a {
    padding: 5px 15px !important;
    font-size: clamp(13px, 1.1vw, 16px) !important;
  }

  .whatsAppIcon a i {
    font-size: 20px !important;
  }

  .cardBoxShadow h5.resturentName.mb-0 {
    line-height: 12px;
  }

  .HelpSection iframe {
    height: 280px !important;
  }

  .cardBoxShadow p.location.mb-0 {
    font-size: 12px;
  }

  .allEffectSetting .accordion-header button.accordion-button {
    padding: 8px 10px;
  }

  .cdk-drag.row.py-3.custom-border-bottom.align-items-center {
    padding: 10px 0px !important;
  }

  .userEditEffect img {
    width: 120px;
    margin-bottom: 20px;
  }

  .headerClass {
    line-height: 22px !important;
  }

  .cdk-drag.row.py-3.custom-border-bottom.align-items-center.active {
    padding: 8px 0px !important;
  }

  .accordionButton i {
    font-size: 16px;
  }

  .accordionButton {
    font-size: clamp(10px, 0.9vw, 14px);
    padding: 10px;
  }

  .accordion-button::after {
    background-size: 16px;
  }

  /* body .form-group label {
    margin-bottom: 0px !important;
  } */

  .btn-secondary {
    padding: 8px 15px !important;
  }

  /* .allEffectSetting .quickLinksCard a {
        padding: 5px 10px;
    } */

  .allEffectSetting .quickLinksCardbtn a {
    padding: 7px 10px;
  }
}

@media screen and (max-width: 767px) {
  .custom-model-inner {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .yourListing h4 {
    font-size: 18px;
  }

  .yourListing .yourBusiness h3 {
    font-size: 22px;
  }

  .publishListing .businessLogo img {
    width: 90px;
  }

  .publishListing .publishDeatail p {
    margin-top: 5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 210px;
  }

  .publishListing .publishButtonWrapper .publishListingButton {
    padding: 10px 50px;
    width: 100%;
    margin-top: 15px;
  }

  .publishDeatail h2.font500 {
    line-height: 20px;
  }
}

@media (max-width: 767px) {
  .serviceCardInfo .serviceCardPriceRow .serviceCardPrice {
    font-size: 14px !important;
  }

  .pageSetting select.form-select {
    margin-bottom: 15px !important;
  }

  button.btn.primaryBgColor.text-white.font16 {
    margin-bottom: 15px !important;
  }

  .congratsPreviewBtn {
    width: 100%;
  }

  .congratsHelpBtn {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .categoriesGrid .categoryCard {
    display: block;
  }

  .serviceCardInfo .serviceCardPriceRow .serviceCardOldPrice {
    font-size: 13px;
  }

  .serviceCard .serviceCardInfo .serviceCardDetails {
    font-size: 12px;
  }

  .categoryCard .categoryImg {
    display: block;
    margin: 0 auto;
  }

  .bookingContent .categoriesGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px 5px !important;
  }

  .card.wizardBox {
    padding: 15px;
    margin: 0px;
  }

  .categoryCard .categoryLabel {
    margin-left: 0px;
  }

  .serviceListContainer .serviceCard {
    gap: 10px !important;
    padding: 10px !important;
  }

  .serviceCardInfo .serviceCardTitle {
    font-size: 15px !important;
  }

  .wizardBox .serviceCard .serviceCardImg {
    width: 80px;
    height: 80px;
  }

  .serviceCardPriceRow .serviceCardPrice {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .serviceCardActions {
    margin-left: 5px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .bookingContent .categoriesGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 15px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
  screen and (min-resolution: 144dpi) {
  .jffCard .card-body {
    padding: 5px;
  }

  .jffCard .card-body .font18.text-capitalize {
    margin-top: 5px !important;
  }

  .joinBigdotFor.py-3 {
    padding: 6px 0px !important;
  }

  .form-check-inline label.form-check-label {
    font-size: 15px;
  }
}

@media (max-width: 1399.98px) {
  .featureCard {
    padding: 1.25rem;
  }

  .cardIconWrapper {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 991.98px) {
  .featureCard {
    padding: 1.25rem;
  }
}

@media (max-width: 767.98px) {
  .featureCard {
    text-align: left;
  }

  .cardIconWrapper {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 575.98px) {
  .featureCard {
    padding: 1.25rem;
  }

  .cardTitle {
    font-size: 0.9375rem;
  }

  .cardDescription,
  .cardFeatureList li {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .pageHeader .headerText {
    margin-left: 15px;
  }

  .pageHeader .bigdotCustomLogo {
    max-height: 45px;
  }

  .pageHeader .helpBtn {
    display: none;
  }
}

@media (max-width: 768px) {
  .carousel-control-prev {
    left: 0px;
  }

  .carousel-control-next {
    right: 0px;
  }

  .crousalSection {
    padding: 20px 10px;
  }

  .eventImage {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 12px;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 35px;
    height: 35px;
  }
}

@media print {
  .featureCard {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .featureCard:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (max-width: 575.98px) {
  .desktopView {
    display: none;
  }

  .mobileView {
    display: inline;
  }

  .socialMedia {
    text-align: center;
  }

  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .text-center-mobile {
    text-align: center !important;
  }

  .font30 {
    font-size: 16px;
    line-height: 24px;
  }

  .font21 {
    font-size: 20px;
    line-height: 18px;
  }

  .font20 {
    font-size: 18px;
    line-height: 24px;
  }

  .font18 {
    font-size: 14px;
    line-height: 18px;
  }

  .imageBottomText {
    font-size: 12px;
    /* padding-left: 42px; */
  }

  .v-stepper .circle {
    padding-top: 9px;
  }

  .step .circle {
    width: 38px;
    height: 38px;
  }

  .step .line {
    left: 18px;
    top: 50px;
  }

  .googleTranslate {
    text-align: left !important;
  }
}

/* // Small devices (landscape phones, less than 768px) */
@media (min-width: 767px) and (max-width: 991.98px) {
  .font30 {
    font-size: 24px;
    line-height: 30px;
  }

  .font21 {
    font-size: 18px;
    line-height: 27px;
  }
}

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 992.98px) {
}

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

/* // X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}

@media (max-width: 767px) {
  .socialMediaFollow ul li {
    margin-right: 10px !important;
  }

  .socialMediaFollow ul li a {
    padding: 6px 25px !important;
    margin-bottom: 15px !important;
  }
}

@media (max-width: 900px) {
  .bsColorGrid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 480px) {
  .bsFooterBar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

@media (max-width: 767.98px) {
  .dashboardContainer .topbar.company-header {
    padding: 12px 14px;
    border-radius: 10px;
    margin-top: 8px;
  }

  .dashboardContainer .topbar.company-header .company-logo {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    flex-shrink: 0;
  }

  .dashboardContainer .topbar.company-header .resturentName {
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .dashboardContainer .topbar.company-header .location {
    font-size: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .dashboardContainer .topbar.company-header .chHamburger {
    font-size: 18px;
    color: #1c2d64;
    flex-shrink: 0;
  }

  .dashboardContainer .topbar.company-header .form-select {
    font-size: 12px !important;
    padding: 5px 28px 5px 10px !important;
  }

  .dashboardContainer .topbar.company-header .form-label {
    font-size: 9px !important;
    margin-bottom: 3px !important;
  }

  .dashboardContainer .topbar.company-header .year-badge-sm {
    padding: 5px 10px;
    min-width: unset;
    width: 100%;
  }

  .dashboardContainer .topbar.company-header .year-badge-sm .year-badge-label {
    font-size: 9px;
  }

  .dashboardContainer .topbar.company-header .year-badge-sm .year-badge-value {
    font-size: 12px;
  }

  .dashboardContainer .topbar.company-header .invoiceSwitch {
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  .dashboardContainer .topbar.company-header .userImage {
    width: 34px !important;
    height: 34px !important;
  }

  .dashboardContainer .topbar.company-header .markIcon ul {
    gap: 8px !important;
  }
}

@media (max-width: 600px) {
  .sSiteContent {
    padding: 20px 18px 16px;
  }

  .sSiteActions {
    padding: 0 18px 24px;
  }

  .sSiteStepHeader {
    padding: 22px 18px 0;
  }

  .sSitePlanGrid {
    padding: 16px 18px;
    grid-template-columns: 1fr;
  }

  .sSitePlanCardFull {
    grid-column: 1;
  }

  .sSiteHeadline {
    font-size: 22px;
  }

  .sSiteBenefitsRow {
    flex-wrap: wrap;
  }

  .sSiteBenefitChip {
    min-width: calc(50% - 4px);
    flex: none;
  }

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

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

  .sSiteCartModal {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }

  .sSiteCartModal.sSiteActive {
    transform: translateY(0);
  }

  .sSiteCartBubble {
    bottom: 100px;
    right: 10px;
    justify-content: center;
    width: auto;
  }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .blogLayout,
  .blogLayoutWithPanel {
    flex-direction: column;
  }

  .blogPanel {
    width: 100%;
    position: static;
    max-height: none;
  }

  .blogCards {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .memberSearchInput {
    width: 140px;
  }

  .memberOutlineBtn span {
    display: none;
  }

  .memberThName {
    width: auto;
  }
}

@media (max-width: 480px) {
  .memberToolbarRight {
    width: 100%;
    justify-content: flex-start;
  }

  .memberSearchInput {
    width: 100%;
  }
}

/* ── Responsive — collapse action labels on small screens ── */
@media (max-width: 768px) {
  .honoAction span {
    display: none;
  }

  .honoAction {
    padding: 8px;
  }

  .honoActions {
    gap: 3px;
  }

  .honoTableThActions {
    width: auto;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .appTileGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .managePanelHeader {
    padding: 20px 16px;
  }

  .managePanelBody {
    padding: 20px 16px;
  }
}

@media (max-width: 480px) {
  /* .otpCard {
    padding: 24px 16px;
  } */

  .otpTitle {
    font-size: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — all redesigned components
   Naming convention going forward: camelCase (e.g. form-label bdCustomLabel)
   Breakpoints: 768px (tablet/mobile), 480px (small mobile)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared: make page body not overflow on mobile ── */
@media (max-width: 768px) {
  .bdMgrPageBody {
    /* padding: 12px !important; */
    margin: 12px !important;
  }

    .congratsLeftPanel {
    padding: 30px 24px 0px 24px;
  }

  .congratsRightPanel {
    padding: 10px 24px 30px 24px;
  }
}

/* ─── CALENDAR ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bdMgrCalCard {
    border-radius: 12px;
  }

  .bdMgrCalToolbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }

  /* Title goes full-width on its own row */
  .bdMgrCalMonthTitle {
    order: -1;
    width: 100%;
    font-size: 15px;
  }

  .bdMgrCalToolbarRight {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .bdMgrCalMemberSelect {
    width: 100%;
    min-width: unset;
  }

  /* Calendar grid cells — smaller on mobile */
  .bdMgrCalGrid .cal-month-view .cal-day-cell {
    min-height: 60px !important;
    padding: 4px 6px !important;
  }

  .bdMgrCalGrid .cal-month-view .cal-day-number {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  .bdMgrCalGrid .cal-month-view .cal-header .cal-cell {
    font-size: 9px !important;
    padding: 7px 0 !important;
  }

  .bdMgrCalNavBtn {
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .bdMgrCalCreateBtn {
    flex: 1;
    justify-content: center;
  }

  .bdMgrCalViewGroup {
    flex: 1;
    justify-content: center;
  }
}

/* ─── FOLLOW-UP / TASK MODAL ─────────────────────────────────────── */
@media (max-width: 480px) {
  .fupModal {
    border-radius: 16px;
  }

  .fupModalHeader {
    padding: 14px 16px;
  }

  .fupModalBody {
    padding: 16px;
    gap: 14px;
  }

  .fupModalFooter {
    padding: 12px 16px;
    flex-direction: column-reverse;
    gap: 8px;
  }

  .fupModalCancelBtn,
  .fupModalSubmitBtn {
    width: 100%;
    justify-content: center;
  }

  .fupModalWhenRow {
    flex-direction: column;
  }
}

/* ─── BLOG PAGE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .blogLayout,
  .blogLayoutWithPanel {
    flex-direction: column;
  }

  .blogPanel {
    width: 100%;
    position: static;
    max-height: none;
  }

  .blogToolbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
  }

  .blogToolbarLeft {
    flex: 1;
  }

  .blogAddBtn {
    width: 100%;
    justify-content: center;
  }

  .blogCards {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .blogPanelHeader {
    padding: 14px 16px;
  }

  .blogPanelBody {
    padding: 14px 16px;
    gap: 14px;
  }

  .blogPanelFooter {
    flex-direction: column-reverse;
    gap: 8px;
    padding: 12px 16px;
  }

  .blogPanelCancelBtn,
  .blogPanelSubmitBtn {
    width: 100%;
    justify-content: center;
  }

  .blogPanelWhenRow {
    flex-direction: column;
  }

  .blogPanelRadioGroup {
    flex-direction: column;
  }
}

/* ─── HONO LIST ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .honoCard {
    border-radius: 12px;
  }

  .honoCardToolbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
  }

  .honoCardToolbarLeft {
    flex: 1;
  }

  .honoCardToolbarRight {
    width: 100%;
  }

  .honoCreateBtn {
    width: 100%;
    justify-content: center;
  }

  /* On mobile: hide action text, show icon only */
  .honoAction span {
    display: none;
  }

  .honoAction {
    padding: 8px 10px;
    font-size: 14px;
  }

  .honoTableThActions {
    width: auto;
  }

  /* Shrink number column */
  .honoTableThNum,
  .honoTable__tdNum {
    display: none;
  }

  .honoTable thead th,
  .honoTable td {
    padding: 12px 12px;
  }
}

/* ─── HAPPY-OR-NOT FORM ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .honoFormLayout {
    flex-direction: column;
    align-items: stretch;
  }

  .honoFormMain {
    width: 100%;
  }

  /* Sidebar moves to top on mobile as a horizontal action bar */
  .honoFormSidebar {
    width: 100%;
    order: -1;
  }

  .honoFormCard--sticky {
    position: static;
  }

  /* Sidebar card becomes a horizontal bar */
  .honoFormSidebar .honoFormCardHeader {
    display: none;
    /* hide the "Actions / Publish" header — redundant on mobile */
  }

  .honoFormSidebar .honoFormCardBody {
    flex-direction: row;
    gap: 10px;
    padding: 14px 16px;
  }

  .honoSubmitBtn,
  .honoCancelBtn {
    flex: 1;
    margin-bottom: 0;
  }

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

@media (max-width: 480px) {
  .honoFormCardHeader {
    padding: 14px 16px;
    gap: 10px;
  }

  .honoFormCardHeaderIcon {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .honoFormCardHeaderTitle {
    font-size: 14px;
  }

  .honoFormCardBody {
    padding: 14px 16px;
    gap: 14px;
  }

  .honoFormCardToggle {
    padding: 14px 16px;
  }

  /* Action bar stacks on very small screens */
  .honoFormSidebar .honoFormCardBody {
    flex-direction: column;
  }

  .honoCheckGrid {
    gap: 6px;
  }

  .honoCheckChip {
    font-size: 12px;
    padding: 6px 11px;
  }

  .honoToggleRow {
    gap: 8px;
  }

  .honoToggleLabel {
    font-size: 12px;
  }

  .honoInput,
  .honoSelect {
    height: 40px;
    font-size: 13px;
  }
}

/* ─── Responsive fixes for camelCase classes ─────────────────────── */
@media (max-width: 768px) {
  /* hono-list toolbar */
  .honoCardToolbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
  }

  .honoCardToolbarLeft {
    flex: 1;
  }

  .honoCardToolbarRight {
    width: 100%;
  }

  .honoTableThNum,
  .honoTable__tdNum {
    display: none;
  }

  .honoTableThActions {
    width: auto;
  }

  .honoCardPagination {
    padding: 10px 14px;
  }

  /* blog */
  .blogGridCol {
    gap: 14px;
  }

  .blogToolbarLeft {
    flex: 1;
  }

  .blogPanelBody {
    padding: 14px 16px;
    gap: 14px;
  }

  .blogPanelHeader {
    padding: 14px 16px;
  }

  .blogPanelWhenRow {
    flex-direction: column;
  }

  .blogPanelRadioGroup {
    flex-direction: column;
  }

  /* fupModal */
  .fupModalBody {
    padding: 16px;
  }

  .fupModalHeader {
    padding: 14px 16px;
  }

  .fupModalFooter {
    flex-direction: column-reverse;
    gap: 8px;
    padding: 12px 16px;
  }

  .fupModalCancelBtn,
  .fupModalSubmitBtn {
    width: 100%;
    justify-content: center;
  }

  .fupModalWhenRow {
    flex-direction: column;
  }

  /* happy-or-not cards */
  .honoFormCardHeader {
    padding: 14px 16px;
    gap: 10px;
  }

  .honoFormCardToggle {
    padding: 14px 16px;
  }

  .honoFormCardBody {
    padding: 14px 16px;
    gap: 14px;
  }

  .honoFormCardHeaderIcon {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .honoFormCardHeaderTitle {
    font-size: 14px;
  }

  /* Sidebar action bar stacks on small screens */
  .honoFormSidebar .honoFormCardHeader {
    display: none;
  }

  .honoFormSidebar .honoFormCardBody {
    flex-direction: row;
    gap: 10px;
    padding: 14px 16px;
  }

  .honoSubmitBtn,
  .honoCancelBtn {
    flex: 1;
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .honoFormSidebar .honoFormCardBody {
    flex-direction: column;
  }

  .blogPanelSocialGroup {
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .dealsTabNav {
    padding: 0 12px;
    margin: -24px -16px 24px;
  }

  .dealsTabBtn {
    padding: 12px 12px;
    font-size: 13px;
  }

  .dealsDashActionCard {
    padding: 24px 20px;
  }
}

@media only screen and (min-width: 240px) and (max-width: 600px) {
  .cManikBooking div {
    width: 100% !important;
  }

  .cManikBookingMinWidth {
    width: 100%;
  }

  .cManikBookingButton {
    width: 100%;
  }
}

/* --- src/app/auth/auth.component.css --- */
@media (max-width: 767px) {
  .screenWidth {
    min-height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
  }

  .h100 {
    min-height: unset !important;
  }

  .mobileScreenRemoveHeight {
    padding-top: 70px !important;
    padding-bottom: 16px !important;
    min-height: unset !important;
  }

  .splashImage {
    width: 140px !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 767px) {
  .loginFormWrapper {
    min-height: unset !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .customButton {
    padding: 14px 10px !important;
    font-size: 15px !important;
    min-height: 48px;
  }

  .secondaryBtnBgColor.customButton {
    padding: 14px 10px !important;
    font-size: 15px !important;
    min-height: 48px;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  .loginFormWrapper {
    min-height: unset !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .customButton {
    padding: 14px 10px !important;
    font-size: 15px !important;
    min-height: 48px;
  }

  .secondaryBtnBgColor.btn-lg {
    padding: 14px 10px !important;
    font-size: 15px !important;
    min-height: 48px;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  .loginFormWrapper {
    min-height: unset !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .customButton {
    padding: 14px 10px !important;
    font-size: 15px !important;
    min-height: 48px;
  }

  .secondaryBtnBgColor.customButton {
    padding: 14px 10px !important;
    font-size: 15px !important;
    min-height: 48px;
    height: auto !important;
  }
}

@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .bleedingArea {
    transform: scale(0.7);
    position: relative;
    left: -80px;
  }

  .mtPrint {
    margin-top: 50px;
  }
}

@media (max-width: 767.98px) {
  .form-label {
    font-size: 0.9rem;
  }
}

@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (max-width: 991.98px) {
  .sidebar-card {
    margin-bottom: 20px;
    position: static !important;
  }

  .nav {
    flex-direction: row !important;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
  }

  .nav-item {
    flex: 0 0 auto;
  }

  .nav-link {
    padding: 10px 15px !important;
    font-size: 0.9rem;
  }

  .nav-link i {
    margin-right: 8px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .stepCircle {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }

  h5 {
    font-size: 1.1rem !important;
  }

  ::ng-deep .customButton {
    padding: 12px 20px !important;
    width: 100%;
    margin-bottom: 10px;
  }

  .d-flex.justify-content-between {
    flex-direction: column-reverse;
  }
}

@media (max-width: 576px) {
  .img-spinner {
    margin-top: 10% !important;
    margin-right: 34%;
    margin-left: -18%;
  }
}

/* Responsive CSS Ends Here */

/* ============================================================
   Consolidated styles moved from component-scoped CSS/SCSS
   ============================================================ */
/* --- src/app/shared/loader/loading.component.css --- */
.progress-spinner {
  position: fixed !important;
  z-index: 99;
}

.overlay {
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.img-spinner {
  margin-top: 10% !important;
  margin-right: 40%;
  margin-left: 40%;
}

@media (max-width: 576px) {
  .img-spinner {
    margin-top: 10% !important;
    margin-right: 34%;
    margin-left: -18%;
  }
}

/* --- Digital Business Card preview (shared by manage + citizen dashboards) --- */
.dbcCard {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  max-width: 400px;
  margin: 0 auto;
}

.dbcCover {
  position: relative;
  height: 140px;
  overflow: hidden;
}

.dbcCoverImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dbcCoverOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(21, 40, 93, 0.15),
    rgba(21, 40, 93, 0.55)
  );
}

.dbcAvatarWrap {
  display: flex;
  justify-content: center;
  margin-top: -48px;
  position: relative;
  z-index: 2;
}

.dbcAvatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  background: #f1f5f9;
}

.dbcIdentity {
  text-align: center;
  padding: 12px 24px 0;
}

.dbcName {
  font-size: 20px;
  font-weight: 700;
  color: #15285d;
  margin: 0 0 4px;
}

.dbcDesig {
  font-size: 13px;
  font-weight: 500;
  color: #2255e8;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dbcCompany {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.dbcContacts {
  margin: 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dbcContactRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.12s;
  cursor: pointer;
}

.dbcContactRow:hover {
  background: #f8fafc;
}

.dbcContactIcon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f0f4ff;
  color: #2255e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.dbcContactText {
  font-size: 13px;
  color: #1c1a16;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dbcBio {
  margin: 16px 20px 0;
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 3px solid #2255e8;
}

.dbcBioLabel {
  font-size: 11px;
  font-weight: 700;
  color: #2255e8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}

.dbcBioText {
  font-size: 13px;
  color: #475569;
  margin: 0;
  line-height: 1.6;
}

.dbcActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 20px 0;
}

.dbcActionBtn {
  border: none;
  border-radius: 12px;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
}

.dbcActionBtn:hover {
  opacity: 0.88;
}

.dbcActionBtn--share {
  background: #15285d;
  color: #ffffff;
}

.dbcActionBtn--save {
  background: #f05c29;
  color: #ffffff;
}

.dbcBrand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 20px 20px;
  margin-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.dbcBrandText {
  font-size: 11px;
  color: #94a3b8;
}

.dbcBrandLogo {
  height: 18px;
  width: auto;
  opacity: 0.75;
}